/* Golden Knight Chess — polish layer (23 Sep 2026). Loaded last.
   1. Desktop: board, both clocks, toolbar and Finish-turn fit one screen with no scrolling.
   2. Move history sits directly under the game panel; the golden-knight explainer follows it.
   3. Clearer last-move marking on Marble; golden markers for a golden knight's second jump.
   4. Nothing floats over the playing surface. */

/* ---------- 1. One-screen desktop layout ---------- */
@media (min-width:801px){
  :root{--board-size:clamp(360px,calc(100dvh - 280px),780px)}
  .topbar{height:66px}
  .brand-mark{width:46px;height:46px;font-size:36px;border-radius:14px}
  .brand{font-size:17px}
  .brand-sub{font-size:12px;margin-top:4px}
  main{padding-top:14px;padding-bottom:14px}
  .section-heading{display:none}
  .player-row{height:46px;margin-bottom:4px}
  .board-toolbar{padding-top:6px;min-height:44px}
}
@media (min-width:801px) and (max-height:711px){
  :root{--board-size:clamp(330px,calc(100dvh - 262px),560px)}
  .topbar{height:58px}
  .player-row{height:40px}
}

/* ---------- 2. Sidebar order: game panel, move history, explainer ---------- */
.sidebar .turn-panel{order:1}
.sidebar .history-panel{order:2}
.sidebar .gold-card{order:3}
.sidebar > #online-panel{order:1}
@media (min-width:801px){
  .history-list{height:auto;min-height:84px;max-height:190px}
}
.history-row span:nth-child(2),.history-row span:nth-child(3){font-variant-numeric:tabular-nums;letter-spacing:.1px}

/* ---------- 3. Board markers ---------- */
/* Last move: a crisp gold frame on both squares (Marble). Forest and the gold world already use bold fills. */
body[data-theme="marble"]:not(.gold-world) .sq.last{box-shadow:inset 0 0 0 3px #e3b33fe6,inset 0 0 16px #f6cf6e73}
body[data-theme="marble"]:not(.gold-world) .sq.dark.last{box-shadow:inset 0 0 0 3px #f0c24df2,inset 0 0 16px #f6cf6e66}

/* Golden knight's second jump: gold landing dots and rings, so the double move reads as golden. */
.golden-pending .sq.legal:not(.capture):not(.fusion):after{background:radial-gradient(circle at 40% 35%,#fff8d8,#f2c04a 62%,#c98f1c);border:2px solid #fff6d6;box-shadow:0 0 10px #f3c24fb3;width:26%;height:26%}
.golden-pending .sq.capture:after{border-color:#e9b23cd9;box-shadow:0 0 12px #f3c24f80,inset 0 0 10px #f3c24f59}

/* ---------- Readable small text: nothing a player reads sits below 11-12px ---------- */
.player-row>div>span{font-size:12px}
.game-setting>label{font-size:12px;letter-spacing:.9px}
.game-setting>small{font-size:12px;line-height:1.45}
.history-labels{font-size:11px}
.history-row{font-size:13px}
.coord{font-size:12px}
@media (max-width:480px){.coord{font-size:10px}}

/* ---------- 4. Keep the playing surface clean ---------- */
.board-drops{display:none}

/* ---------- 5. Sidebar structure: Status card, then Setup card (Play / Level / Clock / New game) ---------- */
.status-panel{padding-bottom:20px}
.status-panel>p{margin-bottom:0;min-height:0}
.status-panel .primary-button,.status-panel .secondary-button{width:100%;margin-top:14px}
.status-panel .secondary-button+.primary-button,.status-panel .primary-button+.secondary-button{margin-top:8px}
.setup-panel{display:grid;gap:14px;padding:20px}
.setup-panel .game-setting{margin:0}
.setup-panel .game-setting>small{margin-top:7px}
.setup-panel .mode-switch{margin-bottom:0}
.setup-panel .mode-switch.online-ready{grid-template-columns:repeat(2,minmax(0,1fr))}
.setup-panel .mode-switch.online-ready button{white-space:nowrap;font-size:13px;padding:10px 4px}
.setting-options>button{font-size:14px}
.primary-button{justify-content:center;text-align:center;font-size:15px;font-weight:800}
.primary-button>span{display:none}
#new-game{margin-top:2px}
/* Finish turn is a golden-knight action: make it read gold */
.gold-action{background:linear-gradient(160deg,#f6d57a,#e0a72c)!important;border-color:#fff0bf!important;border-bottom-color:#a8751b!important;color:#4a2f06!important}
.gold-action:disabled{opacity:.55}

/* Online panel: one flat block inside the Setup card, no boxes inside boxes */
.setup-panel .online-panel,body[data-theme="forest"] .setup-panel .online-panel{margin:0;padding:0;border:0;background:none;box-shadow:none;color:inherit;gap:12px}
.online-heading small{display:none}
.setup-panel .guest-name-field{padding:0;border:0;background:none}
.setup-panel .guest-name-field>span{font-size:12px}
.setup-panel .guest-name-field small{font-size:12px}
.setup-panel .online-panel p{font-size:14px}
@media (max-width:800px){.sidebar{display:flex;flex-direction:column}}

/* Online in-game actions sit in the Status card: two calm, equal buttons */
.status-panel .online-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.status-panel .online-actions.hidden{display:none}
.status-panel .online-actions button{width:100%;margin:0;padding:11px 8px;border-radius:12px;font-size:14px;font-weight:750;text-decoration:none;cursor:pointer}
.status-panel #online-resign{background:#2b4566;color:#f1f6ff;border:1px solid #6f90b466}
.status-panel #online-leave{background:transparent;color:#f3d993;border:1px solid #f3d99355}
body[data-theme="forest"] .status-panel #online-resign{background:#e6edcf;color:#21523f;border-color:#c2d1a8}
body[data-theme="forest"] .status-panel #online-leave{color:#7a4a0c;border-color:#d99a2b66}
#online-panel .online-times.hidden{display:none!important}

/* Readability floor, round 2: every label a player reads is 12px+ */
.panel-heading>span:last-child,#turn-number{font-size:12px}
.gold-card .eyebrow,.sidebar .eyebrow{font-size:12px}
.empty-history span{font-size:12px}
.leaderboard-dialog .leaderboard-head{font-size:12px;font-weight:800}
@media (max-width:520px){.leaderboard-dialog .leaderboard-row{font-size:12px}}
.setup-panel .mode-switch.online-ready button{font-size:14px}
/* Leaderboard is a pop-up, not a mode: a quiet link under the mode buttons (hidden while guest-only) */
.leaderboard-link{margin-top:8px;padding:4px 0;border:0;background:none;color:#f3d993;font-size:13px;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.leaderboard-link.hidden{display:none}
body[data-theme="forest"] .leaderboard-link{color:#7a4a0c}
@media (min-width:801px) and (max-width:1100px){.setup-panel .mode-switch.online-ready button{font-size:13px;padding:10px 2px}}

/* ---------- 6. Game review: step through any game move by move ---------- */
.review-nav{display:grid;grid-template-columns:44px 44px 1fr 44px 44px;align-items:center;gap:6px;padding:10px 14px 14px;border-top:1px solid #ffffff14}
.review-nav.hidden{display:none}
.review-nav button{height:40px;border-radius:10px;border:1px solid #6f90b455;background:#223a58;color:#eef5ff;font:800 20px/1 "Segoe UI",sans-serif;cursor:pointer;transition:background .15s,transform .1s}
.review-nav button:hover:not(:disabled){background:#2f4d74}
.review-nav button:active:not(:disabled){transform:translateY(1px)}
.review-nav button:disabled{opacity:.35;cursor:default}
.review-nav button:focus-visible{outline:3px solid #f3d27a;outline-offset:2px}
#rv-pos{text-align:center;font-size:14px;font-weight:750;color:#dfe9f6;white-space:nowrap}
.history-row .ply{cursor:pointer;border-radius:7px;padding:2px 6px;margin:-2px -6px;transition:background .12s}
.history-row .ply:hover{background:#ffffff14}
.history-row .ply.rv-active{background:#f3d27a;color:#3a2605;font-weight:800}
body.reviewing .board-wrap{box-shadow:0 0 0 3px #f3d27acc,0 0 28px #f3d27a55}
body.reviewing .board .sq{cursor:pointer}
.resign-button:not(:disabled):hover{background:#a8433a!important;color:#fff!important}
body[data-theme="forest"] .review-nav button{background:#1c4a3b;border-color:#6fae8c55}
body[data-theme="forest"] .review-nav button:hover:not(:disabled){background:#246150}

/* ---------- 7. Online entry: Log in with Phantom / Play as guest ---------- */
.login-choice{display:grid;gap:10px}
.login-choice.hidden,.wallet-line.hidden,.login-switch.hidden{display:none}
.phantom-button{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:50px;border:0;border-radius:13px;background:linear-gradient(160deg,#b7abff,#9886f0);color:#1d1440;font:800 16px/1 "Segoe UI",sans-serif;cursor:pointer;box-shadow:0 8px 20px rgba(120,100,230,.35);transition:transform .12s,box-shadow .12s}
.phantom-button svg{width:24px;height:24px}
.phantom-button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 12px 26px rgba(120,100,230,.45)}
.phantom-button:disabled{opacity:.6;cursor:wait}
.guest-button{width:100%;min-height:46px;border-radius:13px;border:1px solid #6f90b477;background:transparent;color:#eef5ff;font:750 15px/1 "Segoe UI",sans-serif;cursor:pointer}
.guest-button:hover{background:#ffffff12}
.login-note{font-size:12px;line-height:1.45;color:#a4bad2}
.wallet-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px;border-radius:12px;background:#ab9ff21f;border:1px solid #ab9ff255;font-size:14px;color:#e8e3ff}
.wallet-line b{font-family:Consolas,monospace;letter-spacing:.3px}
.wallet-dot{width:9px;height:9px;border-radius:50%;background:#7ee2a8;box-shadow:0 0 8px #7ee2a8}
.wallet-line .text-button{margin-left:auto;font-size:13px}
.login-switch{justify-self:start;padding:2px 0;font-size:13px}
.login-error:empty{display:none}
.login-error a{color:#f3d27a;font-weight:800}
body[data-theme="forest"] .guest-button{border-color:rgba(224,188,108,.4);color:#f6efd8}
body[data-theme="forest"] .login-note{color:#a9c4b4}
#wallet-line{display:grid!important;grid-template-columns:10px minmax(0,1fr) auto;align-items:center;gap:9px}
#wallet-line.hidden{display:none!important}
#wallet-line>*{margin:0!important}
#wallet-line>span:nth-child(2){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Design gate round 3: every label 12px+, clickable moves 14px */
.eyebrow{font-size:12px}
.history-labels{font-size:12px}
.history-row{font-size:14px}
.leaderboard-head{font-size:12px!important}
@media (max-width:480px){.coord{font-size:11px}}

/* M1: rewards-off notice + waiting room */
#online-panel .rewards-note{margin:0 0 10px;padding:8px 10px;border:1px solid rgba(230,196,106,.35);border-radius:8px;background:rgba(230,196,106,.1);color:#ece3c7!important;font-size:13px;line-height:1.45}
#online-panel .rewards-note b{color:#e6c46a;font-weight:700}
#online-panel .rewards-note.hidden{display:none}
#online-panel.waiting #online-message{border-left:3px solid #e6c46a;padding-left:8px}

/* Phones: keep the board and BOTH clocks on one screen during play (target 360x640 with browser bars). */
@media (max-width:480px){
  .play-area>.section-heading{display:none}
  header.topbar{row-gap:6px;padding-bottom:6px}
  .play-area{padding-top:8px}
}

/* Ladder: live counts, profile line, join, first win */
#online-panel .live-counts{margin-left:auto;font-size:12px;letter-spacing:.04em;color:#9fb3c8;font-weight:600}
#online-panel .live-counts.hidden{display:none}
#online-panel .ladder-box{display:grid;gap:10px;margin-top:10px}
#online-panel .ladder-me{display:grid;gap:4px;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);font-size:14px;color:#ece3c7}
#online-panel .ladder-me-actions{display:flex;gap:14px;flex-wrap:wrap}
#online-panel .ladder-join{display:grid;gap:4px}
#online-panel .ladder-join small{font-size:12px;color:#9fb3c8}
#online-panel .hidden{display:none!important}
#online-panel.entry-choose #ladder-join,#online-panel.entry-choose #online-match-type{display:none!important}
#profile-code-dialog code{display:block;margin:12px 0;padding:14px;border-radius:10px;background:#0d1b2e;color:#e6c46a;font:700 20px/1.3 ui-monospace,Consolas,monospace;letter-spacing:.08em;text-align:center;word-break:break-all}
#profile-code-dialog .hidden{display:none}
.first-win-banner{display:grid;gap:3px;margin:4px auto 14px;padding:12px 16px;max-width:360px;border-radius:14px;text-align:center;background:linear-gradient(160deg,#fff7e2,#fbeec9);border:1px solid #e6c46a;animation:fw-in .35s ease-out}
.first-win-banner .eyebrow{color:#9a6b12;letter-spacing:.14em;font-size:12px;font-weight:800}
.first-win-banner strong{font-size:18px;color:#1b2a44}
.first-win-banner .first-win-rating{font-size:16px;font-weight:700;color:#8a5a0c}
.first-win-banner .first-win-note{font-size:13px;color:#4f5d6e}
@keyframes fw-in{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.first-win-banner{animation:none}}
#online-panel .ladder-join{gap:8px}
#online-panel .ladder-join-title,#online-panel .match-type-label{font-size:12px;font-weight:800;letter-spacing:.08em;color:#e6c46a}
#online-panel #ladder-join-btn{width:100%;min-height:44px;font-weight:750}
body[data-theme="forest"] #online-panel .ladder-join-title,body[data-theme="forest"] #online-panel .match-type-label{color:#7a4a0c}
#online-panel .match-type-label{display:block;margin-top:2px}
.setup-panel .lesson-link{margin-top:8px;width:100%;font-size:14px;color:#e6c46a;text-decoration:underline;text-underline-offset:3px}
footer .footer-link{color:inherit;font:inherit;text-decoration:underline;text-underline-offset:3px}

/* Desktop board actions stay centred while the readable hint remains at the left. */
@media (min-width:801px){
 .board-toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center}
 .board-toolbar>span{grid-column:1;justify-self:start}
 .board-toolbar>div{grid-column:2;justify-self:center}
 .board-toolbar>.inline-end{grid-column:3;justify-self:end}
}