/* ⚫ Ντάμα & ♟️ Σκάκι (ομάδα «Με συμπαίκτη») */
.bg-body { display: flex; gap: 18px; align-items: center; justify-content: center; flex-wrap: wrap; perspective: 1100px; }
/* Ελαφριά ισομετρική κλίση της σκακιέρας· τα κομμάτια «στέκονται» όρθια (αντίστροφη περιστροφή) */
/* Μόνο το ταμπλό γέρνει (χωρίς preserve-3d στα κελιά — τα κελιά μένουν επίπεδα ώστε οι επισημάνσεις να ταυτίζονται πάντα με το πλέγμα) */
.bg-board { transform: rotateX(22deg); position: relative; }
.bg-board { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); width: min(56vh, 90vw, 560px); height: min(56vh, 90vw, 560px); border: 6px solid #5d4037; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.25); overflow: hidden; background: #5d4037; }
.bg-sq { position: relative; display: flex; align-items: center; justify-content: center; cursor: grab; user-select: none; min-width: 0; min-height: 0; touch-action: none; }
.bg-sq:active { cursor: grabbing; }
.bg-sq.light { background: #f5deb3; }
.bg-sq.dark { background: #a1762f; }
.bg-rank, .bg-file { position: absolute; font-style: normal; font-size: 10px; font-weight: 900; opacity: .55; color: #3e2723; }
.bg-rank { left: 3px; top: 2px; }
.bg-file { right: 3px; bottom: 1px; }
.bg-sq.sel { box-shadow: inset 0 0 0 4px #ffd740; }
.bg-sq.last { box-shadow: inset 0 0 0 100px rgba(255, 235, 59, .28); }
.bg-sq.sel.last { box-shadow: inset 0 0 0 4px #ffd740, inset 0 0 0 100px rgba(255, 235, 59, .28); }
.bg-sq.can::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; border: 3px dashed rgba(255,255,255,.55); pointer-events: none; }
/* Διαθέσιμες κινήσεις: το πλακίδιο απλώς φωτίζεται (ημιδιάφανη απόχρωση πάνω στο δικό του χρώμα + λεπτό εσωτερικό περίγραμμα),
   χωρίς κίνηση — πράσινο = ελεύθερο τετράγωνο, κόκκινο = φάγωμα */
.bg-sq.bg-target { background-image: linear-gradient(rgba(156, 220, 96, .62), rgba(156, 220, 96, .62)); box-shadow: inset 0 0 0 3px rgba(46, 125, 50, .85), inset 0 0 16px rgba(255, 255, 255, .35); }
.bg-sq.bg-target.bg-cap { background-image: linear-gradient(rgba(255, 112, 100, .6), rgba(255, 112, 100, .6)); box-shadow: inset 0 0 0 3px rgba(198, 40, 40, .9), inset 0 0 16px rgba(255, 255, 255, .3); }
.bg-sq.bg-target:hover { box-shadow: inset 0 0 0 5px rgba(46, 125, 50, 1), inset 0 0 16px rgba(255, 255, 255, .5); }
.bg-sq.bg-target.bg-cap:hover { box-shadow: inset 0 0 0 5px rgba(198, 40, 40, 1), inset 0 0 16px rgba(255, 255, 255, .4); }
.bg-sq.check { background: #ef5350 !important; animation: bg-check .5s ease-in-out infinite alternate; }
@keyframes bg-check { from { filter: brightness(1); } to { filter: brightness(1.3); } }
.bg-piece { pointer-events: none; z-index: 1; }
.bg-piece.chk.drop { animation: bg-drop .4s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes bg-drop { 0% { transform: translateY(-14px) scale(1.15); } 100% { transform: translateY(0) scale(1); } }
.bg-piece.ch.drop { animation: bg-drop-ch .4s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes bg-drop-ch { 0% { transform: scaleY(1.16) translateY(-18px) scale(1.15); } 100% { transform: scaleY(1.16) translateY(-2px) scale(1); } }
.bg-ghost { z-index: 50; pointer-events: none; filter: drop-shadow(0 22px 10px rgba(0,0,0,.45)) !important; transition: none; }
.bg-fly { z-index: 40; pointer-events: none; filter: drop-shadow(0 16px 8px rgba(0,0,0,.4)); }
/* Πούλια ντάμας */
.bg-piece.chk { width: 74%; height: 74%; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; transition: transform .18s, box-shadow .18s; }
.bg-piece.chk.p0 { background: radial-gradient(circle at 35% 30%, #757575, #1a1a1a); box-shadow: 0 3px 0 #000, 0 6px 0 #0a0a0a, 0 9px 0 #050505, 0 12px 10px rgba(0,0,0,.45), inset 0 -5px 0 rgba(0,0,0,.35), inset 0 4px 0 rgba(255,255,255,.25); }
.bg-piece.chk.p1 { background: radial-gradient(circle at 35% 30%, #fff, #d7dde2); box-shadow: 0 3px 0 #9aa4ab, 0 6px 0 #8a949b, 0 9px 0 #7a848b, 0 12px 10px rgba(0,0,0,.4), inset 0 -5px 0 rgba(0,0,0,.12), inset 0 4px 0 rgba(255,255,255,.7); }
.bg-sq.sel .bg-piece.chk { transform: translateY(-10px) scale(1.1); box-shadow: 0 3px 0 #000, 0 6px 0 #0a0a0a, 0 9px 0 #050505, 0 30px 14px rgba(0,0,0,.5); }
.bg-sq.sel .bg-piece.chk.p1 { box-shadow: 0 3px 0 #9aa4ab, 0 6px 0 #8a949b, 0 9px 0 #7a848b, 0 30px 14px rgba(0,0,0,.45); }
/* Κομμάτια σκακιού */
/* Κομμάτια σκακιού: ίδια «γεμάτη» γλυφή για τα δύο χρώματα, χρωματισμένη λευκή/μαύρη, με «πάχος» (εξώθηση) και στέκονται όρθια στη γερμένη σκακιέρα */
.bg-piece.ch { font-size: min(4.4vh, 7vw, 42px); line-height: 1; transform: scaleY(1.16) translateY(-2px); transform-origin: 50% 100%; transition: transform .18s, text-shadow .18s; font-family: "Segoe UI Symbol", "DejaVu Sans", "Noto Sans Symbols2", "Apple Symbols", sans-serif; }
.bg-piece.ch.w { color: #fafafa; -webkit-text-stroke: 1px #37474f; text-shadow: 0 1px 0 #d0d0d0, 0 2px 0 #c0c0c0, 0 3px 0 #b0b0b0, 0 4px 0 #9e9e9e, 0 5px 0 #8d8d8d, 0 8px 8px rgba(0,0,0,.45); }
.bg-piece.ch.b { color: #263238; -webkit-text-stroke: 1px #000; text-shadow: 0 1px 0 #1c262b, 0 2px 0 #161e22, 0 3px 0 #10171a, 0 4px 0 #0b1013, 0 5px 0 #060809, 0 8px 8px rgba(0,0,0,.5); }
.bg-sq.sel .bg-piece.ch { transform: scaleY(1.16) translateY(-14px) scale(1.12); text-shadow: 0 1px 0 #d0d0d0, 0 2px 0 #c0c0c0, 0 3px 0 #b0b0b0, 0 4px 0 #9e9e9e, 0 5px 0 #8d8d8d, 0 30px 14px rgba(0,0,0,.5); }
.bg-sq.sel .bg-piece.ch.b { text-shadow: 0 1px 0 #1c262b, 0 2px 0 #161e22, 0 3px 0 #10171a, 0 4px 0 #0b1013, 0 5px 0 #060809, 0 30px 14px rgba(0,0,0,.55); }
.bg-ghost.ch, .bg-fly.ch { transform: none; display: flex; align-items: center; justify-content: center; }
/* Πλαϊνό πάνελ */
.bg-side { display: flex; flex-direction: column; gap: 10px; min-width: 190px; max-width: 260px; }
.bg-cap { background: rgba(255,255,255,.75); border-radius: 12px; padding: 8px 12px; font-weight: 700; color: #37474f; font-size: 15px; min-height: 38px; letter-spacing: 1px; word-break: break-all; }
.bg-log { background: rgba(255,255,255,.65); border-radius: 12px; padding: 8px 12px; font-size: 13px; font-weight: 600; color: #455a64; max-height: 180px; overflow-y: auto; line-height: 1.5; }
.bg-promo { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.35); }
.bg-promo.hidden { display: none; }
.bg-promo-box { background: #fff; border-radius: 20px; padding: 18px 24px; text-align: center; box-shadow: 0 12px 40px rgba(0,0,0,.3); }
.bg-promo-box p { margin: 0 0 12px; font-weight: 700; color: #37474f; }
.bg-promo-btn { font-size: 56px; width: 84px; height: 84px; border-radius: 16px; border: 3px solid #b0bec5; background: #f5deb3; cursor: pointer; margin: 0 4px; line-height: 1; }
.bg-promo-btn:hover { border-color: #ffd740; transform: scale(1.08); }
.bg-promo-btn.w { color: #fafafa; -webkit-text-stroke: 1px #37474f; text-shadow: 0 2px 0 #bdbdbd, 0 4px 0 #9e9e9e, 0 6px 6px rgba(0,0,0,.4); }
.bg-promo-btn.b { color: #263238; text-shadow: 0 2px 0 #10171a, 0 4px 0 #060809, 0 6px 6px rgba(0,0,0,.5); }
@media (max-width: 800px) { .bg-side { flex-direction: row; flex-wrap: wrap; max-width: none; } .bg-log { max-height: 60px; flex: 1; } }