@import url('../fonts.css');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* Styled scrollbars for all containers */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
*::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--muted);
}

:root{
  --sq-light:#ececd7;--sq-dark:#4b7399;
  --hl-light:#cee3f6;--hl-dark:#5c84a8;
  --sel-color:#4d90f077;
  --last-light:#cee3f6aa;--last-dark:#5c84a8aa;
  --check-light:#e74c3cbb;--check-dark:#c0392bbb;
  --bg:#302e2b;--panel:#262522;--panel2:#312e2b;--border:#3b3936;
  --text:#ffffff;--dim:#989795;--muted:#575653;--gold:#4d90f0; 
  --sq:min(120px, calc((100vh - 128px) / 8), calc((100vw - 400px) / 8));
  --sq:min(120px, calc((100dvh - 128px) / 8), calc((100vw - 400px) / 8));
  --bsz:calc(var(--sq)*8);
  }

/* Dark · Pink */
html[data-theme="dark-pink"]{
  --gold:#f04d90;
  --sel-color:#f04d9077;
  --hl-light:#f6cee3;--hl-dark:#a85c84;
  --last-light:#f6cee3aa;--last-dark:#a85c84aa;
  --sq-dark:#994b73;
}

/* Light · Blue */
html[data-theme="light-blue"]{
  --bg:#f2efe9;--panel:#ffffff;--panel2:#f5f3ee;--border:#dcd8d0;
  --text:#221f1c;--dim:#6b6864;--muted:#8f8b85;--gold:#3a7ce0;
  --sq-light:#f5f3ea;--sq-dark:#6d9dc9;
  --sel-color:#3a7ce077;
  --hl-light:#dbeaf9;--hl-dark:#7fa8cf;
  --last-light:#dbeaf9aa;--last-dark:#7fa8cfaa;
}

/* Light · Pink */
html[data-theme="light-pink"]{
  --bg:#f2efe9;--panel:#ffffff;--panel2:#f5f3ee;--border:#dcd8d0;
  --text:#221f1c;--dim:#6b6864;--muted:#8f8b85;--gold:#e0397c;
  --sq-light:#f5f3ea;--sq-dark:#c96d9d;
  --sel-color:#e0397c77;
  --hl-light:#f9dbea;--hl-dark:#cf7fac;
  --last-light:#f9dbeaaa;--last-dark:#cf7facaa;
}
html,body{height:100%;background:var(--bg);color:var(--text);font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;overflow:hidden}
body{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;padding:12px;overflow:hidden}

/* PWA: respect notches / home-indicator when installed standalone (iOS) */
@media (display-mode: standalone), (display-mode: fullscreen) {
  body{
    padding-top:max(12px, env(safe-area-inset-top));
    padding-bottom:max(12px, env(safe-area-inset-bottom));
    padding-left:max(12px, env(safe-area-inset-left));
    padding-right:max(12px, env(safe-area-inset-right));
  }
}


.chex-logo {
  height: 56px;
  width: auto;
  color: var(--gold);
  flex-shrink: 0;
  display: block;
  transform: translateZ(0);
  backface-visibility: hidden;
}

#arrowOverlay {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* layout */
.game-wrap{
  display: grid;
  grid-template-columns: 1fr calc(var(--bsz) + 14px) 1fr;
  column-gap: 20px;
  row-gap: 6px;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.game-wrap.has-eval {
  grid-template-columns: 1fr calc(var(--bsz) + 14px) 1fr;
}
.game-wrap.has-eval .board-col {
  margin-right: 0px;
}
.left-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: calc(100vh - 48px);
  overflow-y: auto;
  overflow-x: hidden;
}
.right-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: calc(100vh - 48px);
  overflow-y: auto;
  overflow-x: hidden;
}

/* Dev credit footer: sits directly under the left panel on desktop.
   On mobile (see media query below) it gets order:4 + full width/centered so
   it always renders after the board/left-panel/right-panel, at the very end. */
.dev-footer {
  grid-column: 1;
  justify-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.68rem;
  color: var(--muted);
}
.dev-footer a {
  color: var(--muted);
  text-decoration: none;
}

/* player bars */
.board-col{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex-shrink:0;position:relative;z-index:10}
.player-bar{
  width:var(--bsz);display:flex;align-items:center;justify-content:space-between;
  padding:5px 10px;height:34px;box-sizing:border-box;
  border-radius:6px;transition:background .28s, color .28s;
}
#barW{background:#e8e6e0;color:#1a1a1a;}
#barW .p-name{color:#1a1a1a;}
#barW .p-score{color:#333;}
#barW .turn-dot{background:#2a5db0;box-shadow:0 0 8px #2a5db0;}
#barW .p-clock{background:rgba(0,0,0,0.1);color:#1a1a1a;border:1px solid rgba(0,0,0,0.15);}
#barB{background:#1c1b19;color:#e0e0e0;}
#barB .p-name{color:#e0e0e0;}
#barB .p-score{color:#aaa;}
#barB .p-clock{background:rgba(255,255,255,0.08);color:#e0e0e0;border:1px solid rgba(255,255,255,0.12);}
.player-bar.active{outline: 2px solid var(--gold); outline-offset:-2px; background:inherit;}
.p-info{display:flex;align-items:center;gap:7px}
.p-avatar{width:24px;height:24px;border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:800;box-shadow:0 2px 4px rgba(0,0,0,0.2)}
.p-avatar.w{background:#fff;color:#222}
.p-avatar.b{background:#222;color:#fff}
.p-name{font-family:'Inter',sans-serif;font-size:.82rem;font-weight:700}
.turn-dot{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px var(--gold);opacity:0;transition:opacity .28s}
.player-bar.active .turn-dot{opacity:1}
.p-right{display:flex;align-items:center;gap:6px}
.p-caps{display:flex;flex-wrap:wrap;align-items:center;min-height:22px}
.p-caps span{display:inline-flex;width:22px;height:22px;margin-left:-9px}
.p-caps span:first-child{margin-left:0}
.p-caps span svg{width:100%;height:100%}
.p-score{font-size:.78rem;font-weight:600;font-family:'Inter',sans-serif;margin-left:3px;}

/* eval bar */

.eval-bar #evalFill,
#evalFill {
  transition: height 0.35s ease;
}

.eval-bar {
  width: 14px;
  background: #2a2a2a;
  border-right: 2px solid var(--bg);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.eval-bar.flipped {
  justify-content: flex-start;
}
.eval-fill {
  background: #e0e0e0;
  width: 100%;
  height: 50%;
  transition: height 0.35s ease;
}
.eval-text {
  display: block;
  position: absolute;
  left: 50%;
  transform: translateX(-50%) rotate(-90deg);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  font-weight: 800;
  white-space: nowrap;
  pointer-events: none;
  z-index: 12;
  transition: top 0.3s ease, bottom 0.3s ease, color 0.3s ease;
}
/* board wrapper */
.board-outer{display:flex}

.board-frame {
  display: flex;
  border-radius: 4px;
  overflow: hidden;
}

.board{
  display:grid;
  width:var(--bsz);
  height:var(--bsz);
  box-sizing:content-box;
  position:relative;
  grid-template-columns:repeat(8,var(--sq));grid-template-rows:repeat(8,var(--sq));
  user-select:none;
  -webkit-touch-callout:none;touch-action:none
}
.sq{width:var(--sq);height:var(--sq);position:relative;display:flex;align-items:center;justify-content:center;cursor:default}
.sq.light{background:var(--sq-light)}.sq.dark{background:var(--sq-dark)}
.sq.sel.light,.sq.sel.dark{background:var(--sel-color)}
.sq.lf.light{background:var(--last-light)}.sq.lf.dark{background:var(--last-dark)}
.sq.lt.light{background:var(--last-light)}.sq.lt.dark{background:var(--last-dark)}
@keyframes checkPulse{0%{box-shadow:inset 0 0 0 0 rgba(231,76,60,.7)}70%{box-shadow:inset 0 0 0 20px rgba(231,76,60,0)}100%{box-shadow:inset 0 0 0 0 rgba(231,76,60,0)}}
.sq.chk.light,.sq.chk.dark{background:var(--check-light);animation:checkPulse 1.5s infinite}
.sq.dov.light{background:var(--hl-light)}.sq.dov.dark{background:var(--hl-dark)}

/* move hints */
@keyframes hintFade{from{opacity:0;transform:scale(0.8)}to{opacity:1;transform:scale(1)}}
.sq.mhint::after{content:'';position:absolute;width:34%;height:34%;border-radius:50%;background:rgba(0,0,0,.17);pointer-events:none;z-index:1;animation:hintFade .15s ease-out}
.sq.chint::before{content:'';position:absolute;inset:4px;border-radius:50%;border:5px solid rgba(0,0,0,.18);pointer-events:none;z-index:1;animation:hintFade .15s ease-out}
.sq.mhint,.sq.chint{cursor:pointer}

/* piece */
.piece{
  position:absolute;inset:2px;display:flex;align-items:center;justify-content:center;
  cursor:default;z-index:2
}
.piece svg{width:100%;height:100%;pointer-events:none}
.piece.mine{cursor:grab}
.piece.flip-piece svg{transform:rotate(180deg)}
.piece.dragging-active{z-index:9999!important;pointer-events:none!important;transition:none!important;filter:drop-shadow(0 4px 10px rgba(0,0,0,.5))}

/* side panel */
.side-panel{
  flex:1;min-width:180px;max-width:100%;display:flex;flex-direction:column;gap:16px;position:relative;z-index:1;
}
.card{background:var(--panel);border:1px solid var(--border);border-radius:8px;overflow:hidden;flex-shrink:0;box-shadow:0 4px 12px rgba(0,0,0,0.15)}
.card.hist-card{flex:1;display:flex;flex-direction:column;min-height:80px;overflow:hidden;flex-shrink:1}
.card-hd{padding:10px 14px;background:var(--panel2);border-bottom:1px solid var(--border);font-size:.75rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--dim);display:flex;align-items:center;}
.status-body{padding:14px;display:flex;flex-direction:column;gap:12px}
.status-txt{font-family:'Inter',sans-serif;font-size:1.1rem;font-weight:700;min-height:1.5rem;line-height:1.3}
.btn-row{display:flex;gap:8px;flex-wrap:wrap}
.btn{flex:1;min-width:58px;padding:9px 12px;border-radius:8px;border:none;border-bottom:4px solid rgba(0,0,0,0.25);background:var(--panel2);color:var(--text);font-family:'Inter',sans-serif;font-size:.85rem;font-weight:600;cursor:pointer;transition:transform .05s, border-bottom-width .05s, filter .1s;white-space:nowrap;box-shadow:0 2px 4px rgba(0,0,0,0.15)}
.btn:active{transform:translateY(4px);border-bottom-width:0px;box-shadow:none}
.btn.primary{background:var(--gold);color:#fff;border-bottom-color:rgba(0,0,0,0.3);text-shadow:0 1px 2px rgba(0,0,0,0.2)}
.btn.on{background:var(--gold);color:#fff;border-bottom-color:rgba(0,0,0,0.3)}

/* history */
.hist-body{
  padding:6px;flex:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--border) transparent
}
.hist-body::-webkit-scrollbar{width:3px}
.hist-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.mrow{display:grid;grid-template-columns:26px 1fr 1fr;gap:2px;margin-bottom:2px}
.mnum{display:flex;align-items:center;justify-content:flex-end;padding:3px 5px;font-family:'JetBrains Mono',monospace;font-size:.68rem;color:var(--muted);background:var(--panel2);border-radius:3px 0 0 3px}
.mcell{padding:3px 7px;font-family:'JetBrains Mono',monospace;font-size:.78rem;color:var(--dim);border-radius:2px;transition:background .1s;cursor:pointer}
.mcell.cur{background:rgba(77,144,240,.12);color:var(--gold)}
.hist-empty{display:flex;align-items:center;justify-content:center;height:100%;min-height:60px;color:var(--muted);font-size:.78rem;font-style:italic}

.hist-footer{display:flex;align-items:stretch;gap:6px;padding:6px;border-top:1px solid var(--border);background:var(--panel2);flex-shrink:0}
.hist-nav-btn{flex:0 0 34px;min-height:36px;display:flex;align-items:center;justify-content:center;padding:8px 0;border-radius:6px;border:none;border-bottom:3px solid rgba(0,0,0,0.25);background:var(--panel);color:var(--dim);cursor:pointer;transition:transform .05s,border-bottom-width .05s,filter .1s,color .1s}
.hist-nav-btn:active:not(:disabled){transform:translateY(3px);border-bottom-width:0;box-shadow:none}
.hist-nav-btn:disabled{opacity:.35;cursor:default;pointer-events:none}
.hist-clear-btn{flex:1;min-height:36px;display:flex;align-items:center;justify-content:center;gap:5px;padding:8px 6px;border-radius:6px;border:none;border-bottom:3px solid rgba(0,0,0,0.25);background:var(--panel);color:var(--dim);font-family:'Inter',sans-serif;font-size:.68rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;cursor:pointer;white-space:nowrap;transition:transform .05s,border-bottom-width .05s,filter .1s,color .1s}
.hist-clear-btn:active{transform:translateY(3px);border-bottom-width:0;box-shadow:none}
.hist-clear-btn:disabled{opacity:.35;cursor:default;pointer-events:none}
.hist-clear-btn[hidden]{display:none}

.hist-item-icon-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border-radius:6px;border:none;background:transparent;color:var(--dim);cursor:pointer;transition:background .1s,color .1s,transform .05s}
.hist-item-icon-btn:hover{background:var(--panel);color:var(--text)}
.hist-item-icon-btn:active{transform:translateY(1px)}
.hist-item-icon-btn:disabled{opacity:.4;pointer-events:none}
.hist-item-icon-btn.danger:hover{color:#ff4444}
.hist-item-icon-btn.star{color:var(--dim)}
.hist-item-icon-btn.star:hover{color:var(--gold)}
.hist-item-icon-btn.star.active{color:var(--gold)}
.hist-item-actions{display:flex;gap:2px}

/* promotion */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;pointer-events:none;transition:opacity .16s}
.overlay.show{opacity:1;pointer-events:all}
.promo-dlg{background:var(--panel);border-radius:12px;padding:22px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.82)}
.promo-dlg h3{font-family:'Inter',sans-serif;font-size:1.1rem;font-weight:700;color:var(--text);margin-bottom:16px}
.promo-row{display:flex;gap:9px}
.pbtn{width:64px;height:64px;border-radius:8px;border:2px solid var(--border);background:var(--panel2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .13s,transform .13s}
.pbtn svg{width:52px;height:52px}

.result-banner{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:2000;pointer-events:none;opacity:0;transition:opacity .32s}
.result-banner.show{opacity:1;pointer-events:auto}
.result-box{background:var(--panel);border-radius:16px;padding:32px 48px;text-align:center;box-shadow:0 20px 80px rgba(0,0,0,.9)}
.result-title{font-family:'Inter',sans-serif;font-size:2.1rem;font-weight:800;color:var(--text)}
.result-sub{font-size:.88rem;color:var(--dim);margin:6px 0 20px}

/* Challenge Popup */
.challenge-popup {
  position: fixed; bottom: 20px; right: 20px; width: 320px;
  background: var(--panel); border: 2px solid var(--gold);
  border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.8);
  z-index: 2100; overflow: hidden;
  animation: slideUp 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes slideUp { from { transform: translateY(100px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.challenge-body{padding:14px}
.challenge-sender-row{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.challenge-avatar{width:38px;height:38px;border-radius:50%;background:var(--gold);color:#000;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.05rem;flex-shrink:0;text-transform:uppercase;font-family:'Inter',sans-serif}
.challenge-sender-name{font-size:0.95rem;font-weight:700;color:var(--text);font-family:'Inter',sans-serif}
.challenge-sender-sub{font-size:0.7rem;color:var(--dim)}
.challenge-details{display:flex;flex-direction:column;margin-bottom:12px;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.challenge-detail-row{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--panel2)}
.challenge-detail-row + .challenge-detail-row{border-top:1px solid var(--border)}
.challenge-detail-icon{width:16px;height:16px;color:var(--dim);flex-shrink:0;display:flex;align-items:center;justify-content:center}
.challenge-detail-label{font-size:0.66rem;color:var(--dim);text-transform:uppercase;letter-spacing:.03em;width:50px;flex-shrink:0}
.challenge-detail-value{font-size:0.8rem;color:var(--text);font-weight:600;flex:1;display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.challenge-variant-chip{display:inline-block;background:rgba(77,144,240,.14);color:var(--gold);font-size:0.66rem;font-weight:700;padding:2px 7px;border-radius:10px}
.challenge-color-dot{width:13px;height:13px;border-radius:50%;display:inline-block;border:1px solid var(--border);flex-shrink:0}

/* Fog of War Variant */
.sq.fog .piece{display:none!important}
.sq.fog::after, .sq.fog::before { display: none !important }
.sq.light.fog { background: var(--sq-light) !important }
.sq.dark.fog { background: var(--sq-dark) !important }

/* Drafting Mode */
.draft-bank{display:flex;gap:4px;justify-content:center;margin-top:6px;background:var(--panel2);padding:6px;border-radius:6px;border:1px solid var(--border)}
.draft-piece-btn{background:var(--panel);border:1px solid var(--border);border-radius:6px;padding:4px 6px;cursor:pointer;color:var(--text);display:flex;flex-direction:column;align-items:center;font-size:0.62rem;font-weight:600;transition:transform 0.1s,border-color 0.1s;min-width:38px}
.draft-piece-btn svg{width:24px;height:24px}
.draft-piece-btn.active{border-color:var(--gold);background:rgba(77,144,240,0.15)}
.draft-pts{font-size:0.75rem;color:var(--gold);font-family:'JetBrains Mono',monospace;text-align:center;margin:3px 0}
.drafting-active-row .sq{position:relative}
.sq.draft-valid{box-shadow:inset 0 0 0 2px rgba(77,144,240,0.5)}

/* Dice Chess Variant */
.dice-piece-icon{width:22px;height:22px}
.dice-piece-icon svg{width:100%;height:100%}

/* UI Options & Settings Panel */
.settings-group{display:flex;flex-direction:column;gap:6px;margin-bottom:4px}
.settings-row{display:flex;justify-content:space-between;align-items:center;font-size:0.72rem;color:var(--dim)}

/* Custom toggle switch */
.toggle-label {
  display: flex; align-items: center; gap: 9px;
  cursor: pointer; color: var(--text); font-size: .78rem; user-select: none;
}
.toggle-label input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  flex-shrink: 0;
  width: 34px; height: 18px;
  border-radius: 9px;
  background: var(--panel2);
  border: 1.5px solid var(--border);
  position: relative;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.toggle-label input[type="checkbox"]::after {
  content: '';
  position: absolute;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--dim);
  top: 2px; left: 2px;
  transition: transform .2s, background .2s;
}
.toggle-label input[type="checkbox"]:checked {
  background: rgba(77,144,240,.18);
  border-color: var(--gold);
}
.toggle-label input[type="checkbox"]:checked::after {
  background: var(--gold);
  transform: translateX(16px);
}
.toggle-label input[type="checkbox"]:disabled { opacity: .4; cursor: not-allowed; }

.select-input{background:var(--panel2);border:1px solid var(--border);border-radius:4px;color:var(--text);padding:2px 4px;font-family:'Inter',sans-serif;font-size:0.7rem;outline:none}
.select-input:focus{border-color:var(--gold)}
.connection-panel{display:flex;flex-direction:column;gap:6px;background:var(--panel2);border:1px solid var(--border);padding:8px;border-radius:6px;margin-top:6px}
.connection-input{width:100%;background:var(--panel);border:1px solid var(--border);color:var(--text);font-family:'JetBrains Mono',monospace;font-size:0.62rem;padding:4px 6px;border-radius:4px;outline:none}

/* Segmented Control GUI Buttons */
.segmented-control {
  display: flex;
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px;
  gap: 2px;
  width: 100%;
}
.segmented-btn {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--dim);
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  transition: all 0.2s;
  text-align: center;
  white-space: nowrap;
}
.segmented-btn.active {
  background: var(--gold);
  color: #fff;
  font-weight: 600;
}

/* Responsive */
@media (max-width:960px), (max-aspect-ratio: 1/1){
  .hist-item-icon-btn {
    width: 40px;
    height: 40px;
  }
  .hist-item-icon-btn svg {
    width: 18px;
    height: 18px;
  }
  .hist-item-actions {
    gap: 4px;
  }
  html, body {
    overflow: auto;
    height: auto;
    min-height: 100%;
  }
  body {
    padding: 8px;
    overflow-y: auto;
    height: auto;
    justify-content: flex-start;
  }
  :root {
    --sq: min(120px, calc((100vh - 104px) / 8), calc((100vw - 48px) / 8));
  }
  .game-wrap, .game-wrap.has-eval {
    grid-template-columns: 1fr;
    gap: 16px;
    justify-items: center;
    overflow: visible;
    height: auto;
    width: 100%;
  }
  .board-col {
    align-items: center;
    width: 100%;
    order: 1;
  }
  .left-panel {
    order: 2;
  }
  .left-panel, .right-panel {
    max-width: var(--bsz);
    width: 100%;
    min-width: unset;
    height: auto;
  }
  .dev-footer {
    order: 4;
    grid-column: 1;
    justify-self: center;
    justify-content: center;
    width: 100%;
    max-width: var(--bsz);
    padding: 12px 0 4px;
  }
  .right-panel {
    order: 3;
    height: auto;
    overflow: visible;
  }
  .hist-body {
    height: 140px;
    flex: none;
    order: 3;
  }
  .hist-card {
    display: flex;
    flex-direction: column;
  }
  .hist-card .card-hd {
    order: 1;
  }
  .hist-card .hist-footer {
    order: 2;
    border-top: none;
    border-bottom: 1px solid var(--border);
  }

  /* Setup Flow Optimization on Mobile: Swap ordering so setup card is at the top,
     while board and analysis remain scrollable below it */
  .game-wrap.in-setup-flow .left-panel {
    order: 1;
  }
  .game-wrap.in-setup-flow .board-col {
    order: 2;
  }
  .game-wrap.in-setup-flow .right-panel {
    order: 3;
  }
  /* Hide the in-game status card ("White to move", Resign, Draw) during lobby setup */
  .game-wrap.in-setup-flow #gameActionsCard {
    display: none !important;
  }

  /* Responsive Popups & Dialogs */
  .challenge-popup {
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    width: auto !important;
  }
  .result-box {
    padding: 24px 20px !important;
    width: 90% !important;
    max-width: 340px !important;
  }
  .result-title {
    font-size: 1.65rem !important;
  }
  .promo-dlg {
    padding: 16px !important;
    width: 90% !important;
    max-width: 320px !important;
  }

  /* Hide header/logo during active play on mobile */
  .game-wrap:not(.in-setup-flow) #brandingCard {
    display: none !important;
  }

  /* Shadows are expensive to paint/composite on many mobile GPUs and show up
     as visible smudging/banding artifacts, especially against light theme
     backgrounds. Flatten them on small screens; borders keep the same
     depth cues without the repaint cost. */
  .card,
  .btn,
  .p-avatar,
  .promo-dlg,
  .result-box,
  #barW .turn-dot,
  .turn-dot,
  .join-code-input,
  .join-code-input:focus,
  .sq.draft-valid {
    box-shadow: none !important;
  }
  .btn.primary {
    text-shadow: none !important;
  }
  .piece.dragging-active {
    filter: none !important;
  }
}

/* ─── Setup Flow ─────────────────────────────────────────────────────────────── */
.setup-step { animation: stepFadeIn .18s ease; }
@keyframes stepFadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }

/* card-hd with back button */
.card-hd { display: flex; align-items: center; gap: 8px; }
.back-btn {
  background: none; border: none; color: var(--gold); cursor: pointer;
  font-size: 0.75rem; font-weight: 500; padding: 0 4px; line-height: 1;
  opacity: 0.7; transition: opacity .15s;
}

/* Large mode select buttons */
.mode-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 100%; padding: 14px 12px; border-radius: 10px;
  border: 1.5px solid var(--border); background: var(--panel2);
  color: var(--text); cursor: pointer;
  transition: border-color .18s, background .18s, transform .12s, box-shadow .18s;
}
.mode-btn:active { transform: translateY(0); }
.mode-icon { display:flex; align-items:center; justify-content:center; width:28px; height:28px; color: var(--dim); transition: color .18s; }
.mode-icon svg { width:100%; height:100%; }
.mode-label { font-size: .92rem; font-weight: 700; color: var(--text); }
.mode-sub { font-size: .7rem; color: var(--dim); }

/* Join code input */
.join-code-wrap { display: flex; flex-direction: column; gap: 6px; }
.join-code-label { font-size: .72rem; color: var(--dim); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.join-code-input {
  width: 100%; background: var(--panel2); border: 2px solid var(--border);
  border-radius: 8px; color: var(--gold); padding: 10px 14px;
  font-family: 'JetBrains Mono', monospace; font-size: 1.3rem; font-weight: 700;
  letter-spacing: 4px; text-align: center; text-transform: uppercase; outline: none;
  transition: border-color .18s, box-shadow .18s;
}
.join-code-input::placeholder { color: var(--muted); font-size: .85rem; letter-spacing: 1px; font-weight: 300; }
.join-code-input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(77,144,240,.15); }

/* Variation tree inline elements */
.var-inline-link {
  color: var(--dim);
  font-size: 0.72rem;
  font-weight: normal;
  cursor: pointer;
  margin-left: 5px;
  user-select: none;
  font-style: italic;
  font-family: 'Inter', sans-serif;
}
/* Inline chess board coordinates */
.coord {
  position: absolute;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  font-weight: 800;
  pointer-events: none;
  user-select: none;
  z-index: 5;
}
.sq.light .coord {
  color: var(--sq-dark);
}
.sq.dark .coord {
  color: var(--sq-light);
}
.file-coord {
  bottom: 2px;
  right: 4px;
}
.rank-coord {
  top: 2px;
  right: 4px;
}

/* Flipped board-col swaps player cards */
.board-col.flipped #barW {
  order: 1;
}
.board-col.flipped .board-outer {
  order: 2;
}
.board-col.flipped #barB {
  order: 3;
}

/* Time Control Selection Grid */
.time-control-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 6px;
}
.tc-btn {
  background: var(--panel2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 8px 4px;
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  outline: none;
}
.tc-btn.active {
  background: var(--gold);
  color: #fff;
  border-color: var(--gold);
  box-shadow: 0 0 10px rgba(77, 144, 240, 0.25);
}
#clockSelectLobby:disabled ~ .time-control-grid {
  pointer-events: none;
  opacity: 0.5;
}

/* Custom Clock UI Rows */
.custom-clock-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  margin-top: 4px;
}
.custom-clock-row span {
  font-size: 0.75rem;
  color: var(--dim);
  font-weight: 600;
  flex: 1;
}
.custom-clock-input {
  width: 60px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.9rem;
  font-weight: 700;
  padding: 5px 6px;
  border-radius: 4px;
  outline: none;
  text-align: center;
  box-sizing: border-box;
  -moz-appearance: textfield;
}
.custom-clock-input::-webkit-outer-spin-button,
.custom-clock-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.custom-clock-input:focus {
  border-color: var(--gold);
}

/* Premium Variant Suggestion and Info Containers */
.variant-info-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  margin-bottom: 4px;
  background: rgba(77, 144, 240, 0.06);
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid rgba(77, 144, 240, 0.25);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.variant-info-box .brain-thinking {
  color: var(--dim);
  font-style: italic;
  font-weight: 500;
  animation: textPulse 1.5s infinite ease-in-out;
}
@keyframes textPulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* Hover-only effects. Gated to devices that support real hover (mouse/trackpad)
   so touch devices don't get a button "stuck" in its hover state after a tap
   until the user taps something else. Everything below is purely additive on
   top of the base rules above; :active (the tap/press feedback) still works
   everywhere regardless of this media query. */
@media (hover: hover) and (pointer: fine) {
  .piece.mine:hover svg{filter:brightness(1.09)}
  .btn:hover{filter:brightness(1.15);transform:translateY(1px);border-bottom-width:3px}
  .mcell:hover{background:var(--panel2);color:var(--text)}
  .hist-nav-btn:hover:not(:disabled){filter:brightness(1.2);color:var(--text);transform:translateY(1px);border-bottom-width:2px}
  .hist-clear-btn:hover{filter:brightness(1.2);color:#e74c3c;transform:translateY(1px);border-bottom-width:2px}
  .pbtn:hover{border-color:var(--gold);transform:scale(1.07)}
  .draft-piece-btn:hover{border-color:var(--gold);transform:scale(1.05)}
  .segmented-btn:hover {
    color: var(--text);
    background: color-mix(in srgb, var(--text) 8%, transparent);
  }
  .back-btn:hover { opacity: 1; }
  .mode-btn:hover {
    border-color: var(--gold); background: rgba(77,144,240,.08);
    transform: translateY(-1px); box-shadow: 0 4px 18px rgba(77,144,240,.12);
  }
  .mode-btn:hover .mode-icon { color: var(--gold); }
  .var-inline-link:hover {
    color: var(--gold);
    text-decoration: underline;
  }
  .tc-btn:hover {
    border-color: var(--gold);
    background: rgba(77, 144, 240, 0.05);
  }
}