:root{
  --bg:#0f1117;
  --panel:#181c25;
  --panel-2:#202633;
  --line:#31394b;
  --text:#eef2ff;
  --muted:#aab4cf;
  --accent:#6ea8ff;
  --accent-2:#8cc7ff;
  --good:#35c46a;
  --bad:#ff6b6b;
  --warn:#ffca57;
  --light-square:#e8d7ba;
  --dark-square:#8a6948;
  --light-square-flipped:#eddcc1;
  --dark-square-flipped:#76583e;
  --move:#63d471;
  --capture:#ff6b6b;
  --check:#ff4d6d;
  --last:#f7ca45;
  --shadow:0 12px 28px rgba(0,0,0,.28);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{min-height:100%;background:#0f1117}
body{
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  background:radial-gradient(circle at top,#171d2b 0%,#0f1117 45%,#0b0d12 100%);
  color:var(--text);
  min-height:100vh;
  -webkit-tap-highlight-color:transparent;
}
button,select,input{font:inherit}
a{color:var(--accent)}

.app-shell{
  max-width:1600px;
  margin:0 auto;
  padding:18px;
}
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.zamunda-logo{width:42px;height:42px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(180deg,#5f98ff,#386bca);color:#fff;font-size:26px;font-family:"Times New Roman",Georgia,serif;box-shadow:0 10px 24px rgba(56,107,202,.32)}
.brand h1{
  margin:0;
  font-size:20px;
  line-height:1.1;
}
.brand p{
  margin:6px 0 0;
  color:var(--muted);
  font-size:14px;
}
.topbar-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:center;
}
.language-switch{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  background:rgba(255,255,255,.045);
  box-shadow:none;
}
.lang-btn{
  border:0;
  border-radius:999px;
  padding:8px 10px;
  cursor:pointer;
  background:transparent;
  color:var(--muted);
  font-weight:800;
  font-size:12px;
  letter-spacing:.04em;
}
.lang-btn.active{
  background:linear-gradient(180deg,#5f98ff,#386bca);
  color:#fff;
}

.btn{
  border:1px solid var(--line);
  background:linear-gradient(180deg,#273247,#1c2432);
  color:var(--text);
  border-radius:14px;
  padding:11px 16px;
  cursor:pointer;
  box-shadow:var(--shadow);
  transition:transform .15s ease, opacity .15s ease, background .15s ease, border-color .15s ease;
  user-select:none;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.22)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn.primary{
  background:linear-gradient(180deg,#5f98ff,#386bca);
  border-color:#78a7ff;
}
.btn.ghost{
  background:rgba(255,255,255,.04);
  box-shadow:none;
}
.btn.danger-soft{border-color:rgba(255,107,107,.35);color:#ffd5d5}
.btn.wide{width:100%;justify-content:center}

.layout{
  display:grid;
  grid-template-columns:minmax(620px,1fr) 370px;
  gap:18px;
  align-items:start;
}
.panel{
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
  border:1px solid rgba(255,255,255,.08);
  border-radius:24px;
  padding:16px;
  box-shadow:var(--shadow);
  backdrop-filter:blur(8px);
}
.board-wrap{
  display:flex;
  flex-direction:column;
  gap:14px;
  overflow:visible;
}
.board-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.badges{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  color:var(--muted);
  border:1px solid rgba(255,255,255,.08);
  font-size:14px;
}
.badge strong{color:var(--text)}

.clock-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.clock-card{
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.045);
  border-radius:18px;
  padding:12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.clock-card.active{
  border-color:rgba(110,168,255,.65);
  box-shadow:0 0 0 3px rgba(110,168,255,.12);
}
.clock-card.low-time{
  border-color:rgba(255,107,107,.75);
  box-shadow:0 0 0 3px rgba(255,107,107,.12);
}
.clock-side{
  color:var(--muted);
  font-weight:800;
  display:flex;
  align-items:center;
  gap:8px;
}
.side-dot{
  width:12px;
  height:12px;
  border-radius:999px;
  display:inline-block;
  border:1px solid rgba(255,255,255,.3);
}
.white-dot{background:#f4ead7}
.black-dot{background:#12151c}
.clock-time{
  font-variant-numeric:tabular-nums;
  font-size:28px;
  line-height:1;
  font-weight:950;
  letter-spacing:.02em;
}

.board-shell{
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  overflow:visible;
  touch-action:manipulation;
}
.chess-board{
  width:min(76vh,100%,860px);
  max-width:100%;
  aspect-ratio:1/1;
  display:grid;
  grid-template-columns:repeat(8,1fr);
  grid-template-rows:repeat(8,1fr);
  background:#5c412f;
  padding:8px;
  border-radius:24px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.3), 0 22px 48px rgba(0,0,0,.34);
  position:relative;
}
.square{
  position:relative;
  border:0;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  min-width:0;
  min-height:0;
  color:#1e2430;
  overflow:hidden;
}
.square.light{background:var(--light-square)}
.square.dark{background:var(--dark-square)}
.square:nth-child(1){border-top-left-radius:16px}
.square:nth-child(8){border-top-right-radius:16px}
.square:nth-child(57){border-bottom-left-radius:16px}
.square:nth-child(64){border-bottom-right-radius:16px}
.square::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
}
.square.selected::before{
  opacity:1;
  box-shadow:inset 0 0 0 4px rgba(110,168,255,.85);
}
.square.last-move::before{
  opacity:1;
  background:rgba(247,202,69,.38);
}
.square.in-check::before{
  opacity:1;
  background:radial-gradient(circle,rgba(255,77,109,.72),rgba(255,77,109,.08) 62%,transparent 78%);
}
.square.legal-empty::after{
  content:"";
  width:25%;
  height:25%;
  border-radius:999px;
  background:rgba(28,36,50,.34);
  position:absolute;
  z-index:1;
}
.square.legal-capture::after{
  content:"";
  position:absolute;
  inset:10%;
  border-radius:999px;
  border:4px solid rgba(255,107,107,.72);
  z-index:1;
}
.square.drop-target{
  box-shadow:inset 0 0 0 4px rgba(110,168,255,.9);
}
.piece{
  position:relative;
  z-index:2;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  font-size:clamp(34px,7.2vw,82px);
  font-family:"Times New Roman",Georgia,serif;
  text-shadow:0 4px 12px rgba(0,0,0,.22);
  user-select:none;
  touch-action:none;
  cursor:grab;
}
.piece.white{color:#fff8e8;filter:drop-shadow(0 2px 1px rgba(0,0,0,.5))}
.piece.black{color:#111827;filter:drop-shadow(0 2px 1px rgba(255,255,255,.18))}
.piece.dragging{opacity:.45;cursor:grabbing}
.coord{
  position:absolute;
  font-size:11px;
  font-weight:900;
  opacity:.62;
  pointer-events:none;
  z-index:3;
}
.coord.file{right:7px;bottom:5px}
.coord.rank{left:7px;top:5px}
.square.light .coord{color:#6f563b}
.square.dark .coord{color:#f1dfbf}

.game-dock{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.dock-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.status-box{
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:12px;
}
.status-box strong{display:block;margin-bottom:6px}
.status-text{
  color:var(--muted);
  line-height:1.45;
}
.status-box-mobile{display:none}

.sidebar{
  position:sticky;
  top:18px;
  align-self:start;
}
.sidebar-inner{
  display:flex;
  flex-direction:column;
  gap:16px;
  max-height:calc(100vh - 36px);
  overflow:auto;
  padding-right:2px;
  scrollbar-width:thin;
}
.section-title{
  margin:0 0 12px;
  font-size:18px;
  line-height:1.2;
}
.scoreboard{
  display:grid;
  gap:10px;
}
.score-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:rgba(255,255,255,.04);
}
.score-row strong{font-size:18px}
.score-row span{color:var(--muted);font-size:13px}

.chat-panel.hidden{display:none}
.chat-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.chat-badge{
  display:inline-flex;
  padding:5px 9px;
  border-radius:999px;
  font-size:12px;
  color:#d9fce4;
  background:rgba(53,196,106,.14);
  border:1px solid rgba(53,196,106,.26);
}
.chat-messages{
  height:160px;
  overflow:auto;
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  background:rgba(0,0,0,.13);
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.chat-empty{color:var(--muted);font-size:14px}
.chat-message{
  padding:8px 10px;
  border-radius:14px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.06);
}
.chat-message strong{font-size:13px}
.chat-message p{margin:3px 0 0;color:var(--muted);line-height:1.35}
.chat-form{
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
  margin-top:10px;
}
.chat-form input,
.field input,
.field select{
  width:100%;
  min-width:0;
  border:1px solid rgba(255,255,255,.12);
  background:#111722;
  color:var(--text);
  border-radius:14px;
  padding:12px 13px;
  outline:none;
}
.chat-form input:focus,
.field input:focus,
.field select:focus{
  border-color:rgba(110,168,255,.78);
  box-shadow:0 0 0 3px rgba(110,168,255,.12);
}
.move-history{
  max-height:250px;
  overflow:auto;
  display:grid;
  gap:6px;
  scrollbar-width:thin;
}
.move-row{
  display:grid;
  grid-template-columns:38px 1fr 1fr;
  gap:8px;
  align-items:center;
  padding:7px 8px;
  border-radius:12px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  font-variant-numeric:tabular-nums;
}
.move-number{color:var(--muted);font-size:13px}
.move-san{
  font-weight:800;
  min-height:20px;
  color:#f5f7ff;
}
.captured-grid{
  display:grid;
  gap:12px;
}
.captured-label{
  display:block;
  color:var(--muted);
  font-size:13px;
  margin-bottom:6px;
}
.captured-list{
  min-height:38px;
  display:flex;
  flex-wrap:wrap;
  gap:3px;
  align-items:center;
  border-radius:14px;
  padding:8px;
  background:rgba(0,0,0,.12);
  border:1px solid rgba(255,255,255,.07);
}
.captured-piece{
  font-family:"Times New Roman",Georgia,serif;
  font-size:26px;
  line-height:1;
}

.overlay{
  position:fixed;
  inset:0;
  z-index:50;
  background:rgba(3,6,12,.76);
  backdrop-filter:blur(10px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
}
.overlay.hidden{display:none}
.modal{
  width:min(720px,100%);
  max-height:min(90vh,820px);
  overflow:auto;
  background:linear-gradient(180deg,#1d2432,#121722);
  border:1px solid rgba(255,255,255,.12);
  border-radius:28px;
  padding:24px;
  box-shadow:0 28px 80px rgba(0,0,0,.46);
}
.modal h2{
  margin:0 0 8px;
  font-size:28px;
}
.modal p{
  margin:0 0 18px;
  color:var(--muted);
  line-height:1.45;
}
.form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.field label{
  display:block;
  color:var(--muted);
  font-weight:800;
  font-size:13px;
  margin:0 0 7px;
}
.hint-list{
  display:grid;
  gap:8px;
  margin:16px 0;
}
.hint{
  color:var(--muted);
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:10px 12px;
  line-height:1.38;
}
.footer-note{
  text-align:center;
  margin-top:14px;
  color:var(--muted);
  font-size:13px;
}
.promotion-modal{width:min(430px,100%)}
.promotion-options{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}
.promotion-btn{
  aspect-ratio:1/1;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:var(--text);
  font-family:"Times New Roman",Georgia,serif;
  font-size:48px;
  cursor:pointer;
  transition:transform .15s ease, background .15s ease;
}
.promotion-btn:hover{transform:translateY(-2px);background:rgba(110,168,255,.14)}

@media (max-width:1100px){
  .layout{grid-template-columns:1fr}
  .sidebar{position:static}
  .sidebar-inner{max-height:none;overflow:visible;padding-right:0}
  .status-panel-desktop{display:none}
  .status-box-mobile{display:block}
  .chess-board{width:min(92vw,760px)}
}

@media (max-width:760px){
  .app-shell{padding:12px}
  .topbar{
    align-items:flex-start;
    flex-direction:column;
  }
  .brand{width:100%}
  .brand p{display:none}
  .topbar-actions{width:100%;display:grid;grid-template-columns:repeat(2,1fr)}
  .language-switch{grid-column:1/-1;justify-content:center}
  .topbar-actions .btn{padding:10px 12px}
  .panel{border-radius:20px;padding:12px}
  .board-meta{display:block}
  .badge{font-size:12px;padding:7px 10px}
  .clock-row{gap:8px}
  .clock-card{padding:9px 10px;border-radius:14px}
  .clock-side{font-size:12px}
  .clock-time{font-size:22px}
  .chess-board{
    width:100%;
    padding:5px;
    border-radius:18px;
  }
  .square:nth-child(1){border-top-left-radius:12px}
  .square:nth-child(8){border-top-right-radius:12px}
  .square:nth-child(57){border-bottom-left-radius:12px}
  .square:nth-child(64){border-bottom-right-radius:12px}
  .piece{font-size:clamp(28px,10vw,54px)}
  .coord{font-size:9px}
  .coord.file{right:4px;bottom:3px}
  .coord.rank{left:4px;top:3px}
  .dock-actions{display:grid;grid-template-columns:1fr;gap:8px}
  .chat-form{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .modal{padding:18px;border-radius:22px}
  .modal h2{font-size:23px}
  .promotion-options{gap:8px}
  .promotion-btn{font-size:38px}
  .move-row{grid-template-columns:32px 1fr 1fr}
}

@media (max-width:380px){
  .clock-row{grid-template-columns:1fr}
  .topbar-actions{grid-template-columns:1fr}
}

.online-room-box{
  margin-top:12px;
  border:1px solid rgba(110,168,255,.24);
  background:rgba(110,168,255,.08);
  border-radius:18px;
  padding:12px;
  color:var(--text);
  line-height:1.4;
}
.online-room-box.hidden{display:none}
.online-room-code{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:116px;
  margin:6px 6px 6px 0;
  padding:8px 12px;
  border-radius:14px;
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.12);
  font-size:22px;
  letter-spacing:.12em;
  font-weight:900;
}
.online-room-box small{display:block;color:var(--muted);margin-top:4px}
.chat-message.system{
  border-color:rgba(255,202,87,.22);
  background:rgba(255,202,87,.06);
}
.btn.is-waiting{opacity:.82;cursor:progress}

/* Online room invite card v0.3 */
.online-card{
  flex:1 1 340px;
  max-width:560px;
  border:1px solid rgba(110,168,255,.24);
  background:rgba(110,168,255,.08);
  border-radius:18px;
  padding:12px;
  box-shadow:0 12px 30px rgba(0,0,0,.18);
}
.online-card.hidden{display:none}
.online-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.online-status{
  color:var(--muted);
  font-size:13px;
  margin-top:4px;
}
.online-link{
  width:100%;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(15,20,32,.92);
  color:var(--text);
  padding:10px 12px;
  font-size:13px;
  outline:none;
}
.online-link:focus{
  border-color:rgba(110,168,255,.78);
  box-shadow:0 0 0 3px rgba(110,168,255,.12);
}
.chat-panel.chat-flash,
.chat-messages.chat-flash{
  animation:chatFlash 1.15s ease;
}
.chat-message.mine{
  border-color:rgba(110,168,255,.18);
  background:rgba(110,168,255,.075);
}
.status-text{
  border-radius:10px;
  transition:color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.status-text.status-flash{
  animation:statusFlash 1s ease;
}
@keyframes chatFlash{
  0%{
    border-color:rgba(140,199,255,.85);
    box-shadow:0 0 0 0 rgba(110,168,255,0), 0 0 0 rgba(110,168,255,0);
    background:rgba(110,168,255,.08);
  }
  35%{
    border-color:rgba(140,199,255,1);
    box-shadow:0 0 0 6px rgba(110,168,255,.12), 0 16px 38px rgba(0,0,0,.18);
    background:rgba(110,168,255,.15);
  }
  100%{
    border-color:rgba(255,255,255,.08);
    box-shadow:none;
    background:transparent;
  }
}
@keyframes statusFlash{
  0%{
    color:#fff;
    background:rgba(110,168,255,.26);
    box-shadow:0 0 0 0 rgba(110,168,255,0);
  }
  35%{
    color:#fff;
    background:rgba(110,168,255,.34);
    box-shadow:0 0 0 6px rgba(110,168,255,.12);
  }
  100%{
    color:var(--muted);
    background:rgba(110,168,255,0);
    box-shadow:0 0 0 0 rgba(110,168,255,0);
  }
}

@media (max-width:760px){
  .online-card{
    max-width:none;
    width:100%;
    margin-top:12px;
  }
  .online-card-top{
    align-items:flex-start;
  }
  .online-card-top .btn{
    padding:9px 11px;
  }
}



/* Boot/loading overlay v0.4 - ported from Scrabble */
.boot-loading{
  z-index:120;
}
.boot-loading-card{
  width:min(460px, calc(100vw - 32px));
  padding:28px 24px;
  border-radius:24px;
  background:linear-gradient(180deg,#171d29,#11161f);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow);
  text-align:center;
}
.boot-loading-card h3{
  margin:0 0 10px;
  font-size:28px;
  line-height:1.15;
}
.boot-loading-card p{
  margin:0;
  color:var(--muted);
  line-height:1.5;
}
.boot-loading-spinner{
  width:52px;
  height:52px;
  margin:0 auto 16px;
  border-radius:999px;
  border:4px solid rgba(255,255,255,.12);
  border-top-color:var(--accent);
  animation:bootSpin .9s linear infinite;
}
@keyframes bootSpin{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}
@media (max-width:760px){
  .boot-loading-card{
    padding:24px 18px;
    border-radius:22px;
  }
  .boot-loading-card h3{font-size:24px}
  .boot-loading-card p{font-size:14px}
}
/* =========================================================
   KOE CHESS — CLEAN PREMIUM BOARD + FAST MOBILE DRAG
   Single production skin. Heavy experimental skins removed.
   ========================================================= */

body.is-embedded-game{
  min-height:100%;
  overscroll-behavior:contain;
}

.board-shell{
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  overflow:visible;
  padding:10px 0 18px;
  touch-action:pan-y;
}

.chess-board{
  width:min(76vh,100%,860px);
  max-width:100%;
  aspect-ratio:1/1;
  display:grid;
  grid-template-columns:repeat(8,1fr);
  grid-template-rows:repeat(8,1fr);
  padding:10px;
  border-radius:26px;
  position:relative;
  isolation:isolate;
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.16), transparent 28%),
    linear-gradient(145deg, #c7924f 0%, #6a4024 52%, #1d0f08 100%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:
    0 24px 52px rgba(0,0,0,.42),
    inset 0 2px 0 rgba(255,255,255,.18),
    inset 0 -9px 16px rgba(0,0,0,.3);
  touch-action:none;
}

.chess-board::before{
  content:"";
  position:absolute;
  inset:9px -7px -14px;
  border-radius:28px;
  background:linear-gradient(145deg,#3b2214,#100804 78%);
  box-shadow:0 16px 24px rgba(0,0,0,.38);
  z-index:-1;
  pointer-events:none;
}

.square{
  position:relative;
  z-index:1;
  border:0;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  min-width:0;
  min-height:0;
  overflow:hidden;
  color:#1e2430;
  touch-action:none;
  -webkit-user-select:none;
  user-select:none;
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.12),
    inset -1px -1px 0 rgba(0,0,0,.12);
}

.square.light{
  background:
    radial-gradient(circle at 30% 23%, rgba(255,255,255,.35), transparent 36%),
    linear-gradient(145deg,#f2d7a7 0%,#d9b274 100%);
}

.square.dark{
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,.13), transparent 36%),
    linear-gradient(145deg,#a76a38 0%,#71401d 100%);
}

.square.selected::before{
  opacity:1;
  box-shadow:
    inset 0 0 0 4px rgba(110,168,255,.95),
    inset 0 0 20px rgba(110,168,255,.24);
}

.square.last-move::before{
  opacity:1;
  background:rgba(247,202,69,.34);
}

.square.in-check::before{
  opacity:1;
  background:radial-gradient(circle,rgba(255,77,109,.72),rgba(255,77,109,.12) 62%,transparent 78%);
}

.square.legal-empty::after{
  content:"";
  width:22%;
  height:22%;
  border-radius:999px;
  background:rgba(68,215,117,.62);
  position:absolute;
  z-index:4;
  box-shadow:0 0 12px rgba(68,215,117,.35);
}

.square.legal-capture::after{
  content:"";
  position:absolute;
  inset:11%;
  border-radius:999px;
  border:4px solid rgba(255,107,107,.78);
  z-index:4;
}

.square.touch-drop-target{
  box-shadow:
    inset 0 0 0 4px rgba(53,196,106,.95),
    inset 0 0 18px rgba(53,196,106,.24),
    0 0 18px rgba(53,196,106,.22) !important;
}

.piece{
  position:relative;
  z-index:7;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  font-size:clamp(38px,7.6vw,88px);
  font-family:"Times New Roman",Georgia,serif;
  user-select:none;
  -webkit-user-select:none;
  touch-action:none;
  cursor:grab;
  transition:opacity .12s ease, transform .12s ease;
}

.piece.white{
  color:#fff1cf;
  -webkit-text-stroke:.8px rgba(100,68,28,.45);
  text-shadow:
    0 1px 0 #fffaf0,
    0 2px 0 #d7b176,
    0 6px 9px rgba(0,0,0,.34);
  filter:drop-shadow(0 4px 4px rgba(0,0,0,.28));
}

.piece.black{
  color:#111925;
  -webkit-text-stroke:.6px rgba(160,190,255,.16);
  text-shadow:
    0 1px 0 #3c485c,
    0 2px 0 #0c121d,
    0 6px 9px rgba(0,0,0,.42);
  filter:drop-shadow(0 4px 4px rgba(0,0,0,.34));
}

.piece.dragging{
  opacity:.36;
  cursor:grabbing;
}

.coord{
  z-index:8;
  font-weight:950;
  text-shadow:0 1px 2px rgba(0,0,0,.2);
}

.square.light .coord{color:rgba(92,56,22,.7)}
.square.dark .coord{color:rgba(255,234,202,.72)}

body.touch-dragging{
  user-select:none;
  -webkit-user-select:none;
  overscroll-behavior:contain;
  cursor:grabbing;
}

.touch-drag-ghost{
  position:fixed;
  top:0;
  left:0;
  z-index:9999;
  pointer-events:none;
  opacity:0;
  margin:0;
  transform:translate3d(-9999px,-9999px,0) translate(-50%,-50%) scale(1);
  transition:opacity .05s linear;
  will-change:transform, opacity;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  contain:layout paint style;
  filter:drop-shadow(0 12px 16px rgba(0,0,0,.36));
}

.touch-drag-ghost.visible{
  opacity:.96;
}

.touch-drop-preview{
  position:fixed;
  top:0;
  left:0;
  width:34px;
  height:34px;
  z-index:10000;
  pointer-events:none;
  transform:translate3d(-9999px,-9999px,0) translate(-50%,-50%);
  border-radius:10px;
  border:2px dashed rgba(255,255,255,.72);
  background:rgba(110,168,255,.12);
  box-shadow:0 8px 18px rgba(0,0,0,.22);
  opacity:0;
  transition:opacity .05s linear, border-color .05s linear, background .05s linear;
  will-change:transform, opacity;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

.touch-drop-preview.visible{opacity:1}
.touch-drop-preview.valid{
  border-style:solid;
  border-color:#35c46a;
  background:rgba(53,196,106,.22);
}

@media (min-width:761px){
  .touch-drop-preview{display:none !important}
}

@media (max-width:1100px){
  .chess-board{width:min(92vw,760px)}
}

@media (max-width:760px){
  body.is-embedded-game{
    background:#0b101b;
  }

  body.is-embedded-game .app-shell{
    padding:10px;
  }

  body.is-embedded-game .panel,
  body.is-embedded-game .overlay{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  .board-shell{
    padding:4px 0 10px;
  }

  .chess-board{
    width:100%;
    padding:7px;
    border-radius:20px;
    box-shadow:
      0 18px 32px rgba(0,0,0,.38),
      inset 0 1px 0 rgba(255,255,255,.16),
      inset 0 -6px 12px rgba(0,0,0,.24);
  }

  .chess-board::before{
    inset:7px -4px -9px;
    border-radius:22px;
    box-shadow:0 10px 16px rgba(0,0,0,.3);
  }

  .piece{
    font-size:clamp(30px,10.6vw,57px);
    transition:none;
  }

  .piece.white,
  .piece.black{
    filter:drop-shadow(0 3px 3px rgba(0,0,0,.3));
  }



  .square.touch-drop-target{
    box-shadow:inset 0 0 0 3px rgba(53,196,106,.95) !important;
  }
}


.touch-drop-preview{
  display:none !important;
}

.captured-piece.white{
  color:#fff1cf;
  -webkit-text-stroke:.4px rgba(100,68,28,.45);
  text-shadow:
    0 1px 0 #fffaf0,
    0 2px 0 #d7b176,
    0 4px 6px rgba(0,0,0,.32);
}

.captured-piece.black{
  color:#111925;
  -webkit-text-stroke:.4px rgba(160,190,255,.18);
  text-shadow:
    0 1px 0 #3c485c,
    0 2px 0 #0c121d,
    0 4px 6px rgba(0,0,0,.38);
}

/* =========================================================
   ZAMUNDA.GAMES CHESS — VIEWPORT FIT FIX
   Keeps the full chess UI visible inside CloudArcade iframe
   and in /full/chess without browser zoom-out.
   ========================================================= */
:root{
  --zg-vh:1vh;
  --zg-board-size:min(62vh,760px);
}
html,body{
  width:100%;
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
body{
  min-height:calc(var(--zg-vh) * 100);
}
.app-shell{
  max-width:1500px;
  padding:clamp(8px,1vw,18px) !important;
}
.topbar{
  margin-bottom:clamp(8px,1vw,14px) !important;
}
.layout{
  grid-template-columns:minmax(520px,1fr) minmax(280px,330px) !important;
  gap:clamp(10px,1.2vw,18px) !important;
}
.panel{
  padding:clamp(10px,1.1vw,16px) !important;
}
.board-wrap{
  gap:clamp(8px,1vw,12px) !important;
}
.board-meta{
  gap:8px !important;
}
.badges{
  gap:6px !important;
}
.badge{
  padding:6px 10px !important;
  font-size:13px !important;
}
.clock-row{
  gap:8px !important;
}
.clock-card{
  padding:clamp(7px,.8vw,11px) clamp(9px,1vw,13px) !important;
  border-radius:15px !important;
}
.clock-time{
  font-size:clamp(18px,2.2vw,26px) !important;
}
.btn{
  padding:clamp(8px,.8vw,10px) clamp(10px,1vw,14px) !important;
  border-radius:12px !important;
}
.board-shell{
  padding:4px 0 8px !important;
  min-height:0 !important;
}
.chess-board{
  width:min(var(--zg-board-size),100%) !important;
  max-width:100% !important;
  padding:clamp(5px,calc(var(--zg-board-size) / 80),10px) !important;
  border-radius:clamp(18px,calc(var(--zg-board-size) / 32),26px) !important;
}
.chess-board::before{
  border-radius:clamp(20px,calc(var(--zg-board-size) / 30),28px) !important;
}
.piece{
  font-size:clamp(28px,calc(var(--zg-board-size) / 9.8),82px) !important;
}
.game-dock{
  gap:8px !important;
}
.dock-actions{
  gap:8px !important;
}
.sidebar-inner{
  max-height:calc((var(--zg-vh) * 100) - 22px) !important;
}
.move-history{
  max-height:min(220px, calc((var(--zg-vh) * 22))) !important;
}
.chat-messages{
  height:min(150px, calc((var(--zg-vh) * 16))) !important;
}
body.is-embedded-game .app-shell{
  padding:10px !important;
}
body.is-compact-height .brand p{
  display:none !important;
}
body.is-compact-height .brand h1{
  font-size:18px !important;
}
body.is-compact-height .zamunda-logo{
  width:36px !important;
  height:36px !important;
  border-radius:12px !important;
  font-size:22px !important;
}
body.is-compact-height .topbar-actions{
  gap:6px !important;
}
body.is-compact-height .language-switch{
  padding:3px !important;
}
body.is-compact-height .lang-btn{
  padding:6px 9px !important;
}
body.is-short-height .badge:nth-child(4){
  display:none !important;
}
body.is-short-height .chat-panel{
  display:block !important;
}
body.is-short-height .section-title{
  margin-bottom:8px !important;
  font-size:16px !important;
}
body.is-short-height .score-row{
  padding:8px 10px !important;
}

@media (max-width:1180px){
  .layout{
    grid-template-columns:1fr !important;
  }
  .sidebar{
    position:static !important;
  }
  .sidebar-inner{
    max-height:none !important;
    overflow:visible !important;
    padding-right:0 !important;
  }
  .status-panel-desktop{display:none !important}
  .status-box-mobile{display:block !important}
}

@media (max-width:760px){
  .topbar{
    gap:10px !important;
  }
  .topbar-actions{
    gap:7px !important;
  }
  .panel{
    padding:10px !important;
  }
  .chess-board{
    width:min(var(--zg-board-size),100%) !important;
    padding:6px !important;
  }
  .piece{
    font-size:clamp(25px,calc(var(--zg-board-size) / 9.4),58px) !important;
  }
}


/* Zamunda.Games chess scroll bridge — keep touchpad/mobile scrolling usable inside CloudArcade iframes. */
html.is-zg-full-window,
html.is-zg-full-window body,
body.is-full-game-window{
  height:auto !important;
  min-height:100% !important;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch !important;
  overscroll-behavior-y:auto !important;
}

body.is-portal-game-embed{
  height:auto !important;
  min-height:100% !important;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch !important;
  overscroll-behavior-y:contain !important;
}

body.is-portal-game-embed .app-shell{
  padding-bottom:18px !important;
}

body.is-portal-game-embed .layout{
  align-items:start !important;
}

body.is-portal-game-embed .sidebar-inner{
  max-height:none !important;
  overflow:visible !important;
}

body.is-full-game-window .sidebar-inner,
body.is-short-height .sidebar-inner{
  max-height:none !important;
  overflow:visible !important;
}

body.is-full-game-window .chat-panel,
body.is-short-height .chat-panel{
  display:block !important;
}

body.is-full-game-window .chat-messages{
  height:min(220px, 34vh) !important;
}

body.is-portal-game-embed .chat-messages{
  height:min(150px, 24vh) !important;
}

@media (max-width:760px){
  body.is-full-game-window .app-shell{
    padding-bottom:24px !important;
  }
  body.is-full-game-window .layout{
    display:block !important;
  }
  body.is-full-game-window .sidebar{
    margin-top:12px !important;
  }
  body.is-full-game-window .panel{
    margin-bottom:12px !important;
  }
}
/* Zamunda.Games Chess — dark scrollbar styling */
html,
body,
.sidebar-inner,
.move-history,
.chat-messages,
.modal-card,
.panel {
  scrollbar-width: thin;
  scrollbar-color: #64748b rgba(15, 23, 41, 0.72);
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
.sidebar-inner::-webkit-scrollbar,
.move-history::-webkit-scrollbar,
.chat-messages::-webkit-scrollbar,
.modal-card::-webkit-scrollbar,
.panel::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
.sidebar-inner::-webkit-scrollbar-track,
.move-history::-webkit-scrollbar-track,
.chat-messages::-webkit-scrollbar-track,
.modal-card::-webkit-scrollbar-track,
.panel::-webkit-scrollbar-track {
  background: rgba(15, 23, 41, 0.72);
  border-radius: 999px;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
.sidebar-inner::-webkit-scrollbar-thumb,
.move-history::-webkit-scrollbar-thumb,
.chat-messages::-webkit-scrollbar-thumb,
.modal-card::-webkit-scrollbar-thumb,
.panel::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #7c3aed, #475569);
  border: 2px solid rgba(15, 23, 41, 0.72);
  border-radius: 999px;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
.sidebar-inner::-webkit-scrollbar-thumb:hover,
.move-history::-webkit-scrollbar-thumb:hover,
.chat-messages::-webkit-scrollbar-thumb:hover,
.modal-card::-webkit-scrollbar-thumb:hover,
.panel::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #8b5cf6, #64748b);
}

/* Zamunda.Games account + chat visibility refinements */
.zamunda-account-note{
  margin:14px 0 0;
  padding:11px 13px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:14px;
  background:rgba(255,255,255,.045);
  color:var(--muted);
  font-size:13px;
  line-height:1.38;
}
.zamunda-account-note.is-logged-in{
  color:#d9fce4;
  border-color:rgba(53,196,106,.24);
  background:rgba(53,196,106,.10);
}
.zamunda-account-note.is-guest{
  color:#ffe6b3;
  border-color:rgba(245,158,11,.26);
  background:rgba(245,158,11,.10);
}
.zamunda-account-note.is-local{
  color:#cbd5e1;
}
.field input.is-zamunda-locked{
  color:#eaf7ff;
  border-color:rgba(53,196,106,.32);
  background:rgba(53,196,106,.09);
  cursor:default;
}
.chat-panel.hidden,
body.is-short-height .chat-panel.hidden,
body.is-full-game-window .chat-panel.hidden{
  display:none !important;
}