/*
 * Checkers 360
 * Copyright (c) 2026
 * All Rights Reserved.
 *
 * Unauthorized copying, modification, distribution,
 * resale, or commercial use of this software is prohibited.
 */
 /* =========================================================
   LIGHT MODE — LEGAL / PRIVACY / TERMS FIX
   ========================================================= */

body[data-color-mode="light"] .legal-panel {
  background: rgba(247, 250, 255, 0.98);
  color: #142336;
  border-color: rgba(20, 35, 54, 0.12);
}

/* Force ALL legal text to be readable */
body[data-color-mode="light"] #legalContent,
body[data-color-mode="light"] #legalContent h1,
body[data-color-mode="light"] #legalContent h2,
body[data-color-mode="light"] #legalContent h3,
body[data-color-mode="light"] #legalContent p,
body[data-color-mode="light"] #legalContent li,
body[data-color-mode="light"] #legalContent strong,
body[data-color-mode="light"] #legalContent small {
  color: #142336 !important;
}

/* "Last updated" text */
body[data-color-mode="light"] #legalContent .legal-updated {
  color: #516176 !important;
  opacity: 1 !important;
}

/* Links inside Privacy Policy */
body[data-color-mode="light"] #legalContent a {
  color: #2563c7 !important;
}

/* Privacy / Cookies & Storage / Terms in footer */
body[data-color-mode="light"] .footer-legal-links button {
  color: #34465d !important;
  opacity: 0.82;
}

body[data-color-mode="light"] .footer-legal-links button:hover {
  color: #142336 !important;
  opacity: 1;
}

/* Close X */
body[data-color-mode="light"] .legal-close {
  color: #142336 !important;
  background: rgba(20, 35, 54, 0.05);
  border-color: rgba(20, 35, 54, 0.12);
}
 :root {
  --page:#eef6ff;
  --page-2:#f8f6ff;
  --ink:#10254b;
  --muted:#6480a4;
  --brand:#2c7df7;
  --brand-deep:#1764de;
  --accent:#55d9ff;
  --panel:rgba(255,255,255,.62);
  --panel-strong:rgba(255,255,255,.80);
  --line:rgba(95,148,216,.20);
  --board-light:#f5d9ad;
  --board-dark:#8f5237;
  --move:#22c78a;
  --select:#ff4357;
  --last:rgba(255,193,46,.26);
  --player-piece:#e93643;
  --player-edge:#a71526;
  --ai-piece:#1d2634;
  --ai-edge:#090d14;
  --king:#ffd45a;
  --shadow:0 22px 60px rgba(75,125,196,.14);
  --glass:linear-gradient(145deg,rgba(255,255,255,.78),rgba(246,249,255,.46));
}
body[data-piece-theme="ivory"] { --player-piece:#f5efe0; --player-edge:#b9ae94; --ai-piece:#30363a; --ai-edge:#111517; }
body[data-piece-theme="ocean"] { --player-piece:#2d86d3; --player-edge:#14558e; --ai-piece:#e4aa2a; --ai-edge:#a8710d; }
body[data-piece-theme="forest"] { --player-piece:#f4e8cc; --player-edge:#baa982; --ai-piece:#347a4c; --ai-edge:#1b4d2d; }

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; min-height:100vh; color:var(--ink); font-family:'DM Sans',sans-serif;
  background:
    radial-gradient(circle at 8% 18%,rgba(108,187,255,.33),transparent 20%),
    radial-gradient(circle at 88% 12%,rgba(130,215,255,.28),transparent 24%),
    radial-gradient(circle at 77% 88%,rgba(213,153,255,.25),transparent 22%),
    radial-gradient(circle at 15% 86%,rgba(116,164,255,.24),transparent 23%),
    linear-gradient(135deg,#f9fbff 0%,#edf7ff 44%,#f8f4ff 100%);
  background-attachment:fixed; overflow-x:hidden;
}
body::before,body::after{content:"";position:fixed;border-radius:50%;filter:blur(.2px);pointer-events:none;z-index:-1}
body::before{width:210px;height:210px;left:-70px;bottom:40px;background:radial-gradient(circle at 36% 30%,rgba(255,255,255,.95),rgba(117,184,255,.46) 40%,rgba(129,101,255,.12) 70%,transparent 71%);box-shadow:inset -24px -24px 40px rgba(83,111,255,.13),0 18px 60px rgba(75,130,220,.12)}
body::after{width:180px;height:180px;right:-38px;bottom:54px;background:radial-gradient(circle at 35% 27%,rgba(255,255,255,.96),rgba(177,157,255,.32) 42%,rgba(107,182,255,.20) 72%,transparent 73%);box-shadow:inset -18px -24px 38px rgba(166,97,255,.12),0 18px 60px rgba(97,120,220,.10)}
button,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}

.site-header{
  width:min(1292px,calc(100% - 48px));height:72px;margin:38px auto 10px;padding:0 36px;
  display:flex;align-items:center;justify-content:space-between;position:sticky;top:14px;z-index:20;
  background:rgba(255,255,255,.56);border:1px solid rgba(255,255,255,.72);border-radius:22px;
  box-shadow:0 14px 40px rgba(86,127,188,.10),inset 0 1px 0 rgba(255,255,255,.92);
  backdrop-filter:blur(22px) saturate(145%);-webkit-backdrop-filter:blur(22px) saturate(145%);
}
.brand{display:flex;align-items:center;gap:14px;font-size:20px;font-weight:800;letter-spacing:-.035em;color:#132955}.brand b{color:var(--brand)}
.brand-checker{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 30% 26%,#ff7580 0 13%,#ec3d4b 31%,#cf1c2d 75%);color:transparent;border:2px solid rgba(141,12,27,.38);box-shadow:inset 0 0 0 4px rgba(255,255,255,.22),0 5px 12px rgba(214,37,54,.24)}
.main-nav{display:flex;align-items:center;gap:30px;color:#436185;font-size:13px;font-weight:700}.main-nav a,.nav-button{position:relative}.main-nav a:first-child{color:var(--brand)}.main-nav a:first-child::after{content:"";position:absolute;left:0;right:0;bottom:-21px;height:2px;border-radius:3px;background:linear-gradient(90deg,#2687ff,#6377ff);box-shadow:0 0 10px rgba(61,124,255,.35)}
.main-nav a:hover,.nav-button:hover{color:var(--brand)}.nav-button{border:0;background:transparent;color:inherit;cursor:pointer;font-weight:700}
.nav-link{display:inline-flex;align-items:center;gap:7px}.nav-icon{width:16px;height:16px;flex:0 0 auto;filter:drop-shadow(0 2px 5px rgba(44,125,247,.10))}.nav-button.nav-link{padding:0}

main{max-width:1320px;margin:0 auto;padding:0 24px 70px}.game-intro{display:none}
.game-stage{
  margin-top:8px;padding:0 22px 22px;border:1px solid rgba(255,255,255,.76);border-radius:28px;
  background:rgba(255,255,255,.34);box-shadow:0 22px 65px rgba(77,123,190,.14),inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter:blur(20px) saturate(145%);-webkit-backdrop-filter:blur(20px) saturate(145%);overflow:hidden;
}
.score-strip{min-height:94px;display:flex;align-items:center;justify-content:center;padding:14px 24px;background:transparent;border:0}
.turn-pill{min-width:375px;padding:13px 28px;border-radius:999px;background:linear-gradient(120deg,rgba(225,255,255,.82),rgba(222,235,255,.68));text-align:center;border:1px solid rgba(255,255,255,.92);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 12px 30px rgba(86,152,226,.12);position:relative}
.turn-pill::before{content:"";position:absolute;left:24px;top:50%;transform:translateY(-50%);width:15px;height:15px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 9px rgba(44,125,247,.10),0 0 18px rgba(44,125,247,.35)}
.turn-pill strong{display:block;font-size:16px;letter-spacing:-.01em}.turn-pill span{display:block;margin-top:2px;color:var(--muted);font-size:11px}

.play-layout{display:grid;grid-template-columns:245px minmax(470px,690px) 245px;justify-content:center;gap:18px;padding:0 0 6px;align-items:start}
.panel-card{background:var(--glass);border:1px solid rgba(255,255,255,.82);border-radius:22px;padding:20px;box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.95);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
.panel-card h2{margin:0 0 22px;font-size:20px;letter-spacing:-.03em}.game-controls h2::before{content:"◉";display:inline-grid;place-items:center;width:34px;height:34px;margin-right:10px;border-radius:50%;background:rgba(83,168,255,.11);color:#3d92f8;font-size:13px;vertical-align:middle;box-shadow:inset 0 0 0 1px rgba(86,157,255,.15)}
.control-label{display:block;margin:0 0 8px;color:#3f6697;font-size:12px;font-weight:800}.select-control{width:100%;border:1px solid rgba(98,145,208,.20);border-radius:14px;padding:13px 14px;background:rgba(255,255,255,.68);color:var(--ink);outline:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.88),0 5px 16px rgba(102,142,200,.06)}.select-control:focus{border-color:#6ba9ff;box-shadow:0 0 0 4px rgba(66,136,255,.10)}.microcopy{color:#7d94b3;font-size:10px;line-height:1.45}
.button-stack{display:grid;gap:10px;margin-top:20px}.action-btn{border:1px solid rgba(96,142,202,.18);border-radius:14px;background:rgba(255,255,255,.70);color:var(--ink);padding:13px 12px;cursor:pointer;font-weight:800;transition:.18s ease;box-shadow:0 6px 16px rgba(93,133,190,.07),inset 0 1px 0 rgba(255,255,255,.9)}.action-btn:hover{transform:translateY(-1px);border-color:rgba(70,130,220,.34);box-shadow:0 10px 20px rgba(93,133,190,.11)}.action-btn:disabled{opacity:.45;cursor:not-allowed;transform:none}.primary-action{border-color:transparent;background:linear-gradient(100deg,#35c6f4 0%,#3a9cff 52%,#7769ff 100%);color:#fff;box-shadow:0 10px 24px rgba(65,130,255,.24),inset 0 1px 0 rgba(255,255,255,.35)}.primary-action:hover{background:linear-gradient(100deg,#2bbce9,#328df5 54%,#695df1)}.quiet-action{background:rgba(244,248,255,.64);color:#6f82a0}.full-width{width:100%;margin-top:10px}
.quick-setting{margin-top:20px;padding-top:17px;border-top:1px solid rgba(104,150,208,.18);display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:800}.quick-setting span::before{content:"◖";margin-right:8px;color:#3b72ad}.toggle-chip{border:0;border-radius:999px;padding:6px 11px;cursor:pointer;background:#edf2f8;color:#7586a0;font-weight:800}.toggle-chip.on{background:linear-gradient(90deg,#4d9cff,#2f7df8);color:#fff;box-shadow:0 5px 14px rgba(56,124,235,.22)}

.board-column{min-width:0}.board-shell{width:100%;aspect-ratio:1;background:linear-gradient(145deg,rgba(255,255,255,.86),rgba(188,220,255,.55));padding:13px;border-radius:24px;border:1px solid rgba(255,255,255,.9);box-shadow:0 18px 45px rgba(52,108,178,.20),0 0 0 5px rgba(92,174,255,.10),inset 0 1px 0 #fff;position:relative}
.board-shell::after{content:"";position:absolute;inset:-6px;border-radius:29px;pointer-events:none;background:linear-gradient(135deg,rgba(66,190,255,.40),transparent 36%,transparent 70%,rgba(149,122,255,.28));z-index:-1;filter:blur(3px)}
.board{width:100%;height:100%;aspect-ratio:1;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr));overflow:hidden;border-radius:12px;box-shadow:0 9px 24px rgba(64,49,39,.26),inset 0 0 0 1px rgba(63,36,21,.22)}
.square{width:100%;height:100%;min-width:0;min-height:0;overflow:hidden;border:0;padding:0;position:relative;display:grid;place-items:center;cursor:default}.square.light{background:linear-gradient(135deg,#f9e5bf,#efcfa0)}.square.dark{background:linear-gradient(135deg,#9a5b3d,#7e432e)}.square.dark.movable{cursor:pointer}.square.dark.movable::after{content:"";position:absolute;width:9px;height:9px;right:8px;top:8px;background:#fff;border-radius:50%;box-shadow:0 0 0 2px rgba(16,39,70,.15),0 2px 8px rgba(255,255,255,.35);z-index:4}.square.selected{box-shadow:inset 0 0 0 5px var(--select);z-index:2}.square.destination{cursor:pointer}.square.destination::before{content:"";width:22%;aspect-ratio:1;border-radius:50%;background:var(--move);box-shadow:0 0 0 8px rgba(34,199,138,.18),0 0 20px rgba(34,199,138,.25);position:absolute;z-index:4}.square.last-from,.square.last-to{box-shadow:inset 0 0 0 999px var(--last)}.square.last-to{box-shadow:inset 0 0 0 4px rgba(255,192,34,.82),inset 0 0 0 999px rgba(255,199,47,.14)}
.piece{width:69%;aspect-ratio:1;height:auto;flex:none;border-radius:50%;z-index:3;display:grid;place-items:center;position:relative;line-height:1;transform:translateZ(0);transition:transform .16s ease}.movable .piece:hover{transform:translateY(-3px) scale(1.02)}
.piece::after{content:"";position:absolute;inset:14%;border-radius:50%;border:1px solid rgba(255,255,255,.28);box-shadow:inset 0 -2px 4px rgba(0,0,0,.16)}
.piece.player{background:radial-gradient(circle at 31% 24%,rgba(255,255,255,.58),transparent 18%),linear-gradient(145deg,#ff5260 0%,var(--player-piece) 52%,#b91529 100%);border:clamp(2px,.32vw,4px) solid var(--player-edge);box-shadow:inset 0 0 0 clamp(2px,.24vw,3px) rgba(255,255,255,.24),inset 0 -7px 9px rgba(118,5,21,.24),0 6px 10px rgba(98,18,31,.26),0 0 0 1px rgba(255,255,255,.12)}
.piece.computer{background:radial-gradient(circle at 31% 24%,rgba(255,255,255,.36),transparent 19%),linear-gradient(145deg,#465264 0%,var(--ai-piece) 50%,#070b11 100%);border:clamp(2px,.32vw,4px) solid var(--ai-edge);box-shadow:inset 0 0 0 clamp(2px,.24vw,3px) rgba(255,255,255,.11),inset 0 -7px 10px rgba(0,0,0,.32),0 6px 10px rgba(13,20,30,.33),0 0 0 1px rgba(96,191,255,.15)}
.piece.king{box-shadow:inset 0 0 0 3px var(--king),0 6px 10px rgba(0,0,0,.28),0 0 18px rgba(255,210,70,.18)}.crown{position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(13px,2.2vw,27px);color:var(--king);text-shadow:0 1px 1px rgba(0,0,0,.75);pointer-events:none;z-index:2}
.board-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:22px;color:#58769f;font-size:10px;padding-top:12px}.legend-dot,.legend-swatch{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:-1px}.selected-dot{border:2px solid var(--select)}.move-dot{background:var(--move)}.last-dot{background:#ffbe26;border-radius:3px}

.side-scoreboard{display:grid;gap:10px;margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid rgba(104,150,208,.18)}.side-score-row{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:15px;background:linear-gradient(120deg,rgba(255,241,244,.78),rgba(255,255,255,.58));border:1px solid rgba(255,255,255,.84);box-shadow:inset 0 1px 0 rgba(255,255,255,.88)}.side-score-row .mini-piece{width:38px;height:38px;flex:none}.side-score-row small{display:block;color:#5578a4;font-size:9px;font-weight:800}.side-score-row strong{display:block;font-size:22px;line-height:1;margin-top:2px}.side-score-row.computer-score{background:linear-gradient(120deg,rgba(242,246,251,.84),rgba(255,255,255,.56))}.mini-piece{width:44px;height:44px;border-radius:50%;display:block}.player-mini{background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.5),transparent 22%),linear-gradient(145deg,#ff5260,var(--player-piece) 58%,#b91529);border:3px solid var(--player-edge);box-shadow:inset 0 0 0 2px rgba(255,255,255,.20),0 5px 10px rgba(190,29,50,.18)}.ai-mini{background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.3),transparent 22%),linear-gradient(145deg,#4c5969,var(--ai-piece) 56%,#080d13);border:3px solid var(--ai-edge);box-shadow:inset 0 0 0 2px rgba(255,255,255,.10),0 5px 10px rgba(13,24,38,.22)}
.panel-title-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px}.panel-title-row h2{margin-bottom:12px}.panel-title-row small{color:#6f88a7;font-size:9px}.move-list{max-height:490px;overflow:auto;display:grid;gap:7px;padding-right:2px}.empty-history{min-height:138px;display:grid;place-items:center;text-align:center;color:#8498b2;font-size:11px;padding:14px;border:1px solid rgba(100,150,210,.12);border-radius:15px;background:rgba(255,255,255,.30)}.empty-history::before{content:"≡";display:block;position:absolute;margin-top:-42px;font-size:28px;color:#a3bfdf}.move-row{display:grid;grid-template-columns:22px 1fr auto;gap:6px;align-items:center;padding:9px;border-radius:10px;background:rgba(255,255,255,.50);font-size:10px;border:1px solid rgba(97,143,202,.10)}.move-number{color:#9aabc0}.move-actor{color:#637d9c}.capture-tag{grid-column:2/4;color:#c68111;font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}

.rules-section{padding:74px 0 0}.rules-section>div:first-child{text-align:center}.kicker,.modal-kicker{color:var(--brand);font-size:11px;font-weight:800;letter-spacing:.16em}.rules-section h2{margin:8px 0 26px;font-size:34px;letter-spacing:-.04em}.rule-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.rule-grid article{background:rgba(255,255,255,.52);border:1px solid rgba(255,255,255,.78);border-radius:18px;padding:24px;box-shadow:0 12px 30px rgba(90,130,190,.09);backdrop-filter:blur(16px)}.rule-grid article>strong{color:var(--brand);font-size:11px}.rule-grid h3{margin:15px 0 7px}.rule-grid p{color:var(--muted);font-size:13px;line-height:1.55;margin:0}
footer{max-width:1320px;margin:0 auto;padding:28px 24px 44px;border-top:1px solid rgba(100,148,207,.17);display:flex;justify-content:space-between;gap:24px;color:#7186a2;font-size:11px}

.modal{position:fixed;inset:0;z-index:50;background:rgba(65,91,131,.24);backdrop-filter:blur(16px);display:grid;place-items:center;opacity:0;pointer-events:none;transition:.18s ease;padding:18px}.modal.show{opacity:1;pointer-events:auto}.modal-card{width:min(92vw,460px);max-height:90vh;overflow:auto;background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(243,248,255,.88));border:1px solid rgba(255,255,255,.96);border-radius:24px;padding:28px;box-shadow:0 30px 90px rgba(70,100,150,.22),inset 0 1px 0 #fff;position:relative}.modal-card h2{margin:6px 0 12px;font-size:30px;letter-spacing:-.04em}.modal-card>p:not(.modal-kicker){color:var(--muted);line-height:1.55}.modal-close{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;border:1px solid rgba(95,145,205,.18);background:rgba(255,255,255,.7);cursor:pointer;font-size:20px;color:#60799a}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 0;border-top:1px solid rgba(105,150,205,.17);border-bottom:1px solid rgba(105,150,205,.17)}.setting-row strong,.setting-heading strong{display:block;font-size:13px}.setting-row small,.setting-heading small{display:block;color:var(--muted);font-size:10px;margin-top:3px}.toggle-switch{width:45px;height:25px;border:0;border-radius:999px;background:#cad8e8;padding:3px;cursor:pointer;flex:none}.toggle-switch span{display:block;width:19px;height:19px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.18);transition:.18s}.toggle-switch.on{background:linear-gradient(90deg,#3bbcf2,#557cff)}.toggle-switch.on span{transform:translateX(20px)}.setting-block{padding-top:18px}.setting-heading{margin-bottom:10px}.theme-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.theme-option{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px;border:1px solid rgba(95,145,205,.18);background:rgba(255,255,255,.66);border-radius:13px;cursor:pointer;color:var(--ink)}.theme-option.active{border-color:#5e9fff;box-shadow:0 0 0 3px rgba(58,128,255,.08)}.theme-option>span{display:flex;gap:4px}.theme-piece{display:block;width:22px;height:22px;border-radius:50%;border:2px solid rgba(0,0,0,.16)}.theme-piece.red{background:#c83a35}.theme-piece.black{background:#20272a}.theme-piece.ivory{background:#f5efe0}.theme-piece.charcoal{background:#30363a}.theme-piece.blue{background:#2d86d3}.theme-piece.gold{background:#e4aa2a}.theme-piece.cream{background:#f4e8cc}.theme-piece.green{background:#347a4c}.result-card{text-align:center}.result-icon{display:block;width:44px;height:44px;border-radius:50%;background:linear-gradient(145deg,#5bc8ff,#5776ff);color:transparent;margin:0 auto 12px;box-shadow:0 8px 20px rgba(79,124,255,.22)}.result-actions{display:grid;gap:8px;margin-top:20px}.menu-card{text-align:center}.menu-card .select-control{margin:8px 0 4px}.capture-setting-row{border-top:0}

@media(max-width:1120px){.play-layout{grid-template-columns:210px minmax(430px,640px)}.history-panel{grid-column:1/-1}.move-list{max-height:180px;grid-template-columns:repeat(3,1fr)}.history-panel .side-scoreboard{grid-template-columns:1fr 1fr}}
@media(max-width:760px){body::before,body::after{display:none}.site-header{width:calc(100% - 24px);margin:12px auto 8px;padding:0 16px;height:62px;border-radius:18px}.main-nav a{display:none}.main-nav{gap:8px}main{padding:0 12px 55px}.game-stage{padding:0 10px 14px;border-radius:20px}.score-strip{min-height:80px;padding:10px}.turn-pill{min-width:0;width:min(100%,360px);padding-left:48px}.play-layout{grid-template-columns:1fr;padding:0}.board-column{grid-row:1}.game-controls{grid-row:2}.history-panel{grid-row:3}.button-stack{grid-template-columns:repeat(3,1fr)}.action-btn{font-size:11px;padding:10px 8px}.rule-grid{grid-template-columns:1fr}.rules-section{padding-top:55px}.move-list{grid-template-columns:repeat(2,1fr)}footer{flex-direction:column}.board-shell{padding:8px;border-radius:16px}.piece{width:72%}}
@media(max-width:460px){.brand{font-size:17px}.brand-checker{width:28px;height:28px}.button-stack{grid-template-columns:1fr}.move-list{grid-template-columns:1fr}.theme-grid{grid-template-columns:1fr}.modal-card{padding:23px}}

@media (min-width:1121px) and (max-height:980px){
  .site-header{margin-top:18px;height:64px}.game-stage{margin-top:4px}.score-strip{min-height:72px;padding:9px 20px}.play-layout{grid-template-columns:220px auto 220px;gap:16px}.board-column{width:min(69vh,620px)}.panel-card{padding:16px}.panel-card h2{margin-bottom:16px}.button-stack{margin-top:15px}.quick-setting{margin-top:15px}.board-legend{padding-top:8px}
}


/* Dark mode — the same glassmorphism model, shifted into a deep midnight palette. */
body[data-color-mode="dark"]{
  --page:#07111f;
  --page-2:#10192b;
  --ink:#eef6ff;
  --muted:#91a7c5;
  --brand:#65a8ff;
  --brand-deep:#4691f8;
  --accent:#6de5ff;
  --panel:rgba(14,27,47,.70);
  --panel-strong:rgba(17,31,53,.84);
  --line:rgba(121,177,238,.18);
  --shadow:0 24px 68px rgba(0,0,0,.34);
  --glass:linear-gradient(145deg,rgba(25,43,70,.82),rgba(12,24,43,.62));
  color-scheme:dark;
  background:
    radial-gradient(circle at 9% 16%,rgba(42,122,219,.28),transparent 22%),
    radial-gradient(circle at 88% 10%,rgba(41,188,226,.16),transparent 24%),
    radial-gradient(circle at 78% 88%,rgba(124,83,220,.17),transparent 23%),
    radial-gradient(circle at 14% 88%,rgba(44,91,181,.22),transparent 24%),
    linear-gradient(135deg,#050c17 0%,#091626 45%,#101426 100%);
}
body[data-color-mode="dark"]::before{
  background:radial-gradient(circle at 36% 30%,rgba(160,216,255,.32),rgba(48,131,226,.24) 40%,rgba(83,68,202,.10) 70%,transparent 71%);
  box-shadow:inset -24px -24px 42px rgba(40,83,175,.15),0 18px 60px rgba(0,0,0,.28);
}
body[data-color-mode="dark"]::after{
  background:radial-gradient(circle at 35% 27%,rgba(216,210,255,.25),rgba(129,91,223,.18) 42%,rgba(52,145,218,.13) 72%,transparent 73%);
  box-shadow:inset -18px -24px 38px rgba(110,65,205,.12),0 18px 60px rgba(0,0,0,.25);
}
body[data-color-mode="dark"] .site-header{
  background:rgba(9,22,39,.66);
  border-color:rgba(135,188,239,.14);
  box-shadow:0 16px 42px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.06);
}
body[data-color-mode="dark"] .brand{color:#f3f8ff}
body[data-color-mode="dark"] .main-nav{color:#a8bdd7}
body[data-color-mode="dark"] .game-stage{
  background:rgba(10,22,39,.48);
  border-color:rgba(135,188,239,.12);
  box-shadow:0 24px 70px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.05);
}
body[data-color-mode="dark"] .turn-pill{
  background:linear-gradient(120deg,rgba(19,48,72,.88),rgba(22,35,66,.78));
  border-color:rgba(132,207,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 12px 30px rgba(0,0,0,.22);
}
body[data-color-mode="dark"] .panel-card{
  border-color:rgba(144,197,244,.13);
  box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.06);
}
body[data-color-mode="dark"] .game-controls h2::before{background:rgba(72,163,255,.14);box-shadow:inset 0 0 0 1px rgba(111,187,255,.18)}
body[data-color-mode="dark"] .control-label{color:#9fb8d8}
body[data-color-mode="dark"] .microcopy{color:#7f96b3}
body[data-color-mode="dark"] .select-control{
  background:rgba(17,33,56,.82);color:var(--ink);border-color:rgba(123,180,237,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 5px 16px rgba(0,0,0,.14);
}
body[data-color-mode="dark"] .select-control option{background:#0e1c30;color:#eff6ff}
body[data-color-mode="dark"] .action-btn{
  background:rgba(18,34,57,.82);color:var(--ink);border-color:rgba(125,181,236,.15);
  box-shadow:0 7px 18px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.05);
}
body[data-color-mode="dark"] .action-btn:hover{border-color:rgba(101,168,255,.38);box-shadow:0 10px 22px rgba(0,0,0,.25)}
body[data-color-mode="dark"] .primary-action{background:linear-gradient(100deg,#28bce8 0%,#377ff4 53%,#705de9 100%);color:#fff;border-color:transparent;box-shadow:0 10px 26px rgba(27,91,218,.30),inset 0 1px 0 rgba(255,255,255,.20)}
body[data-color-mode="dark"] .quiet-action{background:rgba(15,29,49,.68);color:#98acc7}
body[data-color-mode="dark"] .quick-setting{border-top-color:rgba(128,183,237,.14)}
body[data-color-mode="dark"] .toggle-chip{background:#17273d;color:#8ea4c1}
body[data-color-mode="dark"] .toggle-chip.on{background:linear-gradient(90deg,#3896f6,#5a72ef);color:#fff}
body[data-color-mode="dark"] .board-shell{
  background:linear-gradient(145deg,rgba(27,55,82,.92),rgba(18,31,54,.85));
  border-color:rgba(126,198,255,.22);
  box-shadow:0 22px 52px rgba(0,0,0,.40),0 0 0 5px rgba(67,155,240,.08),inset 0 1px 0 rgba(255,255,255,.09);
}
body[data-color-mode="dark"] .board-shell::after{background:linear-gradient(135deg,rgba(50,177,255,.34),transparent 36%,transparent 70%,rgba(126,91,255,.22))}
body[data-color-mode="dark"] .board-legend{color:#91a8c5}
body[data-color-mode="dark"] .side-scoreboard{border-bottom-color:rgba(125,181,236,.14)}
body[data-color-mode="dark"] .side-score-row{
  background:linear-gradient(120deg,rgba(71,31,43,.68),rgba(28,37,56,.78));
  border-color:rgba(255,255,255,.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)
}
body[data-color-mode="dark"] .side-score-row.computer-score{background:linear-gradient(120deg,rgba(21,30,44,.92),rgba(29,41,59,.70))}
body[data-color-mode="dark"] .side-score-row small{color:#9ab2d1}
body[data-color-mode="dark"] .panel-title-row small{color:#849bb9}
body[data-color-mode="dark"] .empty-history{color:#8196b1;border-color:rgba(119,177,234,.10);background:rgba(9,22,39,.34)}
body[data-color-mode="dark"] .empty-history::before{color:#607b9d}
body[data-color-mode="dark"] .move-row{background:rgba(18,33,54,.70);border-color:rgba(112,169,228,.10)}
body[data-color-mode="dark"] .move-number{color:#7289a7}
body[data-color-mode="dark"] .move-actor{color:#93a9c4}
body[data-color-mode="dark"] .rule-grid article{background:rgba(12,26,45,.62);border-color:rgba(135,188,239,.12);box-shadow:0 14px 34px rgba(0,0,0,.20)}
body[data-color-mode="dark"] footer{border-top-color:rgba(122,177,233,.13);color:#7f94af}
body[data-color-mode="dark"] .modal{background:rgba(1,8,18,.58)}
body[data-color-mode="dark"] .modal-card{
  background:linear-gradient(145deg,rgba(20,38,62,.97),rgba(9,21,38,.96));
  border-color:rgba(140,195,244,.15);
  box-shadow:0 34px 100px rgba(0,0,0,.52),inset 0 1px 0 rgba(255,255,255,.06);
}
body[data-color-mode="dark"] .modal-close{background:rgba(22,39,62,.86);border-color:rgba(123,180,237,.15);color:#a7bdd8}
body[data-color-mode="dark"] .setting-row{border-color:rgba(122,177,233,.13)}
body[data-color-mode="dark"] .toggle-switch{background:#293b53}
body[data-color-mode="dark"] .toggle-switch.on{background:linear-gradient(90deg,#32b4e8,#587af5)}
body[data-color-mode="dark"] .theme-option{background:rgba(18,35,58,.78);border-color:rgba(119,176,234,.14);color:var(--ink)}
body[data-color-mode="dark"] .theme-option.active{border-color:#67aaff;box-shadow:0 0 0 3px rgba(75,145,255,.10)}
body[data-color-mode="dark"] .result-icon{box-shadow:0 8px 22px rgba(49,94,218,.30)}
body[data-color-mode="dark"] .capture-setting-row{border-bottom:0}
body[data-color-mode="dark"] .appearance-setting-row{border-top:1px solid rgba(122,177,233,.13)}


/* ===== Full v9 feature layer preserved inside the modern glass UI ===== */
.turn-line{display:flex;align-items:center;justify-content:center;gap:12px}.turn-timer{min-width:50px;padding:4px 8px;border-radius:999px;background:rgba(16,37,75,.86);color:#fff!important;font-weight:900;font-size:11px!important;letter-spacing:.03em;font-variant-numeric:tabular-nums;box-shadow:inset 0 1px 0 rgba(255,255,255,.16)}.turn-timer.warning{background:#d29320;animation:timerPulse .8s ease-in-out infinite alternate}.turn-timer.danger{background:#c7434e;animation:timerPulse .45s ease-in-out infinite alternate}@keyframes timerPulse{to{transform:scale(1.06);box-shadow:0 0 0 4px rgba(199,67,78,.14)}}

/* Kings remain geometry-stable: the crown is only an overlay. */
.piece,.piece.king{width:84%;height:84%;aspect-ratio:auto}.crown{position:absolute;inset:50% auto auto 50%;width:54%;height:auto;transform:translate(-50%,-50%);display:block;color:var(--king);filter:drop-shadow(0 1px 1px rgba(0,0,0,.58));pointer-events:none}@media(max-width:760px){.piece,.piece.king{width:84%;height:84%}}

/* Competition identity / real flags. */
.country-flag{width:34px;text-align:center;flex:none}.real-flag{width:34px;height:23px;display:inline-grid;place-items:center;position:relative;overflow:hidden;border-radius:5px;background:rgba(232,239,248,.9);border:1px solid rgba(68,104,150,.18);box-shadow:0 2px 7px rgba(35,72,119,.10);flex:none;vertical-align:middle}.real-flag>span{font-size:8px;font-weight:900;letter-spacing:.02em;color:#5d6a6d}.real-flag>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}.real-flag.tiny-flag{width:25px;height:17px;border-radius:3px}.real-flag.hero-flag{width:72px;height:48px;border-radius:8px;box-shadow:0 8px 20px rgba(31,66,115,.18)}.country-flag.real-flag{font-size:0;width:34px;height:23px}.side-score-row{gap:8px}.side-score-row .mini-piece{width:30px;height:30px}

/* Regular and Championship stay separate; both remain available. */
.mode-action.active-mode{border-color:#5e9fff;background:rgba(228,241,255,.84);box-shadow:inset 3px 0 0 #4a91fa,0 7px 18px rgba(60,122,210,.08)}.cup-action{background:linear-gradient(120deg,rgba(255,248,220,.80),rgba(255,239,188,.56));border-color:rgba(213,165,51,.34);color:#805d11}.cup-action.active-mode{border-color:#d3a12a;background:rgba(255,243,198,.86);box-shadow:inset 3px 0 0 #d3a12a}.championship-setup-card{text-align:left}.championship-setup-card .modal-kicker,.championship-setup-card h2,.championship-setup-card>p{text-align:center}.championship-setup-card .select-control{margin:7px 0 14px}.championship-setup-card .primary-action{margin-top:4px}.menu-country-wrap.hidden{display:none}.menu-country-label{text-align:left;margin-top:4px}

/* Trophy room in the same glass language, preserving all trophy counts/difficulties. */
.trophies-card{width:min(94vw,820px)}.trophy-shelf{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:24px;padding:22px 16px 18px;border-radius:22px;background:linear-gradient(145deg,rgba(18,38,73,.94),rgba(28,47,89,.82));border:1px solid rgba(132,184,255,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 45px rgba(41,78,139,.18);position:relative;overflow:hidden}.trophy-shelf::after{content:'';position:absolute;left:16px;right:16px;bottom:12px;height:10px;border-radius:7px;background:linear-gradient(90deg,#8e5a35,#c28a53,#7b492c);box-shadow:0 6px 16px rgba(0,0,0,.28)}.trophy-item{min-width:0;text-align:center;color:#fff;position:relative;z-index:1;padding-bottom:18px}.trophy-art{height:130px;display:grid;place-items:end center}.trophy-art svg{width:100%;max-width:120px;height:120px;overflow:visible;filter:drop-shadow(0 8px 4px rgba(0,0,0,.24))}.trophy-art .cup-handle{fill:none;stroke:currentColor;stroke-width:8;stroke-linecap:round}.trophy-art .cup-bowl,.trophy-art .cup-stem,.trophy-art .cup-base{fill:currentColor}.trophy-item.rookie{color:#cf7d39}.trophy-item.intermediate{color:#d8e2ea}.trophy-item.pro{color:#f4bf39}.trophy-item.grandmaster{color:#ffdc55}.trophy-item.rookie .trophy-art svg{transform:scale(.70);transform-origin:bottom}.trophy-item.intermediate .trophy-art svg{transform:scale(.82);transform-origin:bottom}.trophy-item.pro .trophy-art svg{transform:scale(.93);transform-origin:bottom}.trophy-item.grandmaster .trophy-art svg{transform:scale(1.05);transform-origin:bottom}.trophy-item>div+div strong,.trophy-item>div+div span{display:block}.trophy-item>div+div strong{font-size:12px;color:#fff}.trophy-item>div+div span{font-size:9px;color:#bed0e6;margin-top:2px}.trophy-count{display:inline-block;margin-top:8px;min-width:48px;padding:5px 8px;border:1px solid rgba(255,255,255,.30);border-radius:9px;color:#fff;background:rgba(0,0,0,.18);font-size:17px}.total-trophies{display:flex;justify-content:flex-end;gap:10px;align-items:center;margin-top:15px;color:var(--muted);font-size:12px}.total-trophies strong{font-size:22px;color:var(--ink)}

/* Championship hub: same glass/blue visual language, with all 8 groups and knockout logic untouched. */
.championship-card{width:min(96vw,1060px);max-height:92vh;overflow:hidden!important;position:relative;padding:0;background:linear-gradient(145deg,rgba(248,252,255,.97),rgba(235,244,255,.94));border:1px solid rgba(255,255,255,.84);border-radius:26px}.championship-card>.modal-close{position:absolute!important;top:18px!important;right:18px!important;margin:0!important;z-index:50;background:rgba(255,255,255,.86);box-shadow:0 8px 24px rgba(51,93,152,.12)}.championship-card>.modal-kicker,.championship-card>#championshipTitle{margin-left:32px;margin-right:32px}.championship-card>.modal-kicker{margin-top:28px;color:#4a83df}.championship-card>#championshipTitle{margin-bottom:0;color:#10254b;font-size:38px}#championshipContent{max-height:calc(92vh - 118px);overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable;padding:18px 32px 34px}.tournament-head{display:flex;align-items:center;gap:14px;margin:0 0 16px;padding:18px 20px;border-radius:18px;background:linear-gradient(120deg,rgba(19,47,91,.97),rgba(54,82,144,.94));color:#fff;border:1px solid rgba(255,255,255,.12);box-shadow:0 14px 32px rgba(31,65,124,.18),inset 0 1px 0 rgba(255,255,255,.10)}.tournament-emblem{width:52px;height:52px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(145deg,#ffd45f,#e9a821);font-size:25px;box-shadow:inset 0 0 0 4px rgba(255,255,255,.20),0 6px 16px rgba(0,0,0,.14)}.tournament-head>div:last-child{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center}.tournament-head small{grid-column:1/-1;color:#bcd6ff;letter-spacing:.14em}.tournament-head strong{grid-column:1/-1;font-size:18px;margin:3px 0 8px}.tournament-head span{color:#e9f1ff;font-size:11px;display:flex;align-items:center;gap:7px}.tournament-management{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.tournament-quiet-btn,.tournament-danger-btn{border:1px solid rgba(255,255,255,.20);border-radius:11px;padding:9px 12px;font:inherit;font-size:12px;font-weight:700;cursor:pointer}.tournament-quiet-btn{background:rgba(255,255,255,.10);color:#fff}.tournament-quiet-btn:hover{background:rgba(255,255,255,.17)}.tournament-danger-btn{background:rgba(255,238,235,.96);border-color:rgba(255,182,166,.65);color:#9c3e2c}.tournament-danger-btn:hover{background:#ffe8e2}
.tournament-tabs{display:flex;gap:6px;padding:5px;background:rgba(216,230,249,.70);border:1px solid rgba(120,160,214,.12);border-radius:13px;margin-bottom:18px;overflow:auto}.tournament-tabs button{border:0;background:transparent;color:#5e7394;padding:9px 13px;border-radius:9px;cursor:pointer;font-size:11px;font-weight:800;white-space:nowrap}.tournament-tabs button.active{background:rgba(255,255,255,.95);color:#17345f;box-shadow:0 5px 14px rgba(62,102,157,.10)}.group-switcher{display:grid;grid-template-columns:repeat(8,minmax(66px,1fr));gap:6px;margin:0 0 14px;padding:6px;border-radius:13px;background:linear-gradient(120deg,#16325f,#264c86)}.group-switcher button{border:0;border-radius:9px;padding:10px 8px;cursor:pointer;background:transparent;color:#c7d8f3;font-size:10px;font-weight:900;letter-spacing:.03em}.group-switcher button:hover{background:rgba(255,255,255,.08);color:#fff}.group-switcher button.active{background:linear-gradient(100deg,#55c8f4,#5f86ff);color:#fff;box-shadow:0 5px 14px rgba(24,68,145,.22)}.single-group-view{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);gap:14px;align-items:start}.groups-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.group-card,.results-panel,.single-group-results,.group-results-note{background:rgba(255,255,255,.78);border:1px solid rgba(116,156,207,.16);border-radius:16px;overflow:hidden;box-shadow:0 8px 22px rgba(57,98,153,.08),inset 0 1px 0 rgba(255,255,255,.86)}.group-card{min-height:100%}.group-title{display:flex;justify-content:space-between;align-items:center;padding:11px 13px;background:linear-gradient(120deg,#16325f,#254c87);color:#fff}.group-title b{font-size:11px;letter-spacing:.1em}.group-title span{color:#c5d4e9;font-size:9px}.standings{border:1px solid rgba(112,153,206,.14);border-radius:12px;overflow:hidden}.group-card .standings{border:0;border-radius:0}.standing-row{display:grid;grid-template-columns:24px minmax(0,1fr) 44px 56px;align-items:center;gap:6px;padding:9px 11px;border-bottom:1px solid rgba(116,156,207,.12);font-size:10px}.standing-row:last-child{border-bottom:0}.standing-row.you,.group-card .standing-row.you{background:linear-gradient(90deg,rgba(71,152,255,.12),rgba(123,119,255,.07));box-shadow:inset 3px 0 #4f92ff}.standing-row b{color:#869bb8}.standing-row em{font-style:normal;color:var(--muted)}.standing-row strong{text-align:right;font-size:10px}.group-card .standing-row{grid-template-columns:22px minmax(0,1fr) 40px 50px;min-height:42px;padding:8px 10px}.group-card .standing-row>span{min-width:0;display:flex;align-items:center;gap:7px}.group-card .standing-row>span em{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#30466a}.group-card .standing-row>i{font-style:normal;color:#8090aa}.group-card .standing-row>strong{color:#18345e}.single-group-results,.group-results-note{padding:14px}.group-results-note{color:#7285a2;font-size:11px;line-height:1.6;text-align:center;padding:30px 18px}.single-group-results .result-line{font-size:10px}.next-fixture{background:linear-gradient(125deg,#153462,#2f4f91);border:1px solid rgba(255,255,255,.10);border-radius:18px;padding:21px;margin:0 0 10px;box-shadow:0 14px 28px rgba(25,61,119,.16)}.next-fixture>small{display:block;color:#bcd7ff;letter-spacing:.15em;text-transform:uppercase;font-size:9px;margin-bottom:12px}.fixture-teams{display:grid!important;grid-template-columns:1fr 50px 1fr!important;gap:10px!important;align-items:center}.fixture-teams>span{display:grid!important;justify-items:center;gap:9px!important;font-size:inherit!important}.fixture-teams b{font-size:14px!important;color:#fff}.fixture-teams i{font-size:12px!important;color:#92bfff!important}.fixture-meta{margin-top:17px;padding-top:13px;border-top:1px solid rgba(255,255,255,.12);display:flex!important;justify-content:center;gap:22px!important;color:#cad8ec;font-size:10px}.fixture-meta b{color:#fff}.tournament-primary{background:linear-gradient(100deg,#35c6f4,#3a9cff 52%,#7769ff);border-color:transparent;color:#fff;font-weight:900}.tournament-primary:hover{background:linear-gradient(100deg,#2bbce9,#328df5 54%,#695df1)}.results-panel{padding:16px;margin:14px 0}.section-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.section-heading b{color:#18345e;font-size:14px}.section-heading span{color:#7890b0;font-size:9px;text-transform:uppercase;letter-spacing:.1em}.result-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.result-group{border:1px solid rgba(112,153,206,.14);border-radius:11px;overflow:hidden}.result-group>strong{display:block;padding:7px 9px;background:rgba(224,235,250,.56);color:#4c6387;font-size:9px;text-transform:uppercase;letter-spacing:.1em}.result-line{display:grid;grid-template-columns:minmax(0,1fr) 42px minmax(0,1fr);gap:6px;align-items:center;padding:8px;border-top:1px solid rgba(112,153,206,.10);font-size:9px}.result-line span{display:flex;align-items:center;gap:5px;min-width:0}.result-line span:last-child{justify-content:flex-end;text-align:right}.result-line b{text-align:center;color:#4a7bc3;font-size:8px}.empty-tournament-state{padding:28px;border:1px dashed rgba(105,149,207,.28);border-radius:14px;background:rgba(255,255,255,.48);text-align:center;color:#7085a5;font-size:11px}.bracket{display:grid;grid-template-columns:2.1fr 1.6fr 1.25fr 1fr;gap:14px;align-items:start;margin:6px 0 18px}.bracket-round{display:grid;gap:10px}.bracket-round h4{margin:0 0 2px;color:#477ac3;font-size:10px;text-transform:uppercase;letter-spacing:.11em}.bracket-match{background:rgba(255,255,255,.82);border:1px solid rgba(112,153,206,.16);border-radius:12px;overflow:hidden;box-shadow:0 6px 18px rgba(57,98,153,.06)}.bracket-match>span{display:flex;align-items:center;gap:6px;padding:9px;border-bottom:1px solid rgba(112,153,206,.10);color:#5c6f8e;font-size:9px}.bracket-match>span:last-child{border-bottom:0}.bracket-match>span.winner{background:linear-gradient(90deg,rgba(54,158,255,.12),rgba(111,103,255,.08));color:#18345e;font-weight:900}.bracket-tbd{padding:18px 9px;border:1px dashed rgba(105,149,207,.28);border-radius:11px;color:#8295b0;text-align:center;font-size:9px}.champion-banner,.eliminated-banner{margin:18px 0 8px;padding:20px;border-radius:16px;text-align:center;background:rgba(255,255,255,.78);border:1px solid rgba(113,153,207,.18)}.big-trophy{font-size:48px;margin-bottom:7px}.champion-banner .hero-flag{margin:0 auto 9px}.champion-banner strong,.eliminated-banner strong{display:block;color:#17345f;font-size:18px;margin-top:6px}.champion-banner span,.eliminated-banner span{display:block;color:#7185a4;font-size:10px;margin-top:4px}

/* 3-2-1 match introduction remains functional in both modes. */
.start-countdown{position:absolute;inset:13px;z-index:12;display:grid;place-items:center;border-radius:13px;background:rgba(8,22,40,.32);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .15s ease}.start-countdown.show{opacity:1;pointer-events:auto}.start-countdown span{width:118px;height:118px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.94);color:#17345f;border:5px solid #5ea5ff;font-size:58px;line-height:1;font-weight:900;box-shadow:0 18px 50px rgba(23,62,120,.25);animation:count-pop .6s ease both}.start-countdown.go span{width:150px;border-radius:999px;font-size:37px}@keyframes count-pop{0%{transform:scale(.72);opacity:.2}45%{transform:scale(1.08);opacity:1}100%{transform:scale(1);opacity:1}}

/* Dark-mode extensions for v9-only tournament/trophy surfaces. */
body[data-color-mode="dark"] .turn-timer{background:rgba(56,108,188,.75)}body[data-color-mode="dark"] .mode-action.active-mode{background:rgba(38,83,135,.36);border-color:#63a7ff}body[data-color-mode="dark"] .cup-action{background:rgba(128,91,22,.20);border-color:rgba(218,174,71,.30);color:#e7c56e}body[data-color-mode="dark"] .cup-action.active-mode{background:rgba(140,97,20,.28);box-shadow:inset 3px 0 0 #e2b74e}body[data-color-mode="dark"] .championship-card{background:linear-gradient(145deg,rgba(16,31,53,.98),rgba(8,20,37,.97));border-color:rgba(138,192,244,.15)}body[data-color-mode="dark"] .championship-card>#championshipTitle{color:#f2f7ff}body[data-color-mode="dark"] .championship-card>.modal-kicker{color:#75adff}body[data-color-mode="dark"] .tournament-tabs{background:rgba(26,46,74,.72);border-color:rgba(124,179,235,.12)}body[data-color-mode="dark"] .tournament-tabs button{color:#99afcb}body[data-color-mode="dark"] .tournament-tabs button.active{background:rgba(40,66,103,.92);color:#f1f7ff;box-shadow:0 5px 16px rgba(0,0,0,.22)}body[data-color-mode="dark"] .group-card,body[data-color-mode="dark"] .results-panel,body[data-color-mode="dark"] .single-group-results,body[data-color-mode="dark"] .group-results-note,body[data-color-mode="dark"] .bracket-match,body[data-color-mode="dark"] .champion-banner,body[data-color-mode="dark"] .eliminated-banner{background:rgba(16,31,52,.78);border-color:rgba(124,178,232,.13);box-shadow:0 8px 22px rgba(0,0,0,.18)}body[data-color-mode="dark"] .standing-row{border-bottom-color:rgba(119,174,230,.10)}body[data-color-mode="dark"] .standing-row.you,body[data-color-mode="dark"] .group-card .standing-row.you{background:linear-gradient(90deg,rgba(56,139,235,.18),rgba(116,92,225,.10))}body[data-color-mode="dark"] .group-card .standing-row>span em,body[data-color-mode="dark"] .group-card .standing-row>strong,body[data-color-mode="dark"] .section-heading b,body[data-color-mode="dark"] .champion-banner strong,body[data-color-mode="dark"] .eliminated-banner strong{color:#eaf3ff}body[data-color-mode="dark"] .group-card .standing-row>i,body[data-color-mode="dark"] .section-heading span,body[data-color-mode="dark"] .group-results-note,body[data-color-mode="dark"] .champion-banner span,body[data-color-mode="dark"] .eliminated-banner span{color:#91a7c3}body[data-color-mode="dark"] .result-group{border-color:rgba(119,174,230,.11)}body[data-color-mode="dark"] .result-group>strong{background:rgba(39,63,95,.58);color:#a6bdd8}body[data-color-mode="dark"] .result-line{border-top-color:rgba(119,174,230,.08)}body[data-color-mode="dark"] .bracket-match>span{border-bottom-color:rgba(119,174,230,.09);color:#a4b8d2}body[data-color-mode="dark"] .bracket-match>span.winner{color:#eff6ff;background:linear-gradient(90deg,rgba(52,133,232,.19),rgba(109,92,223,.11))}body[data-color-mode="dark"] .empty-tournament-state{background:rgba(12,27,47,.52);color:#8ca3c0;border-color:rgba(121,177,235,.18)}body[data-color-mode="dark"] .single-group-results,body[data-color-mode="dark"] .group-results-note{color:#91a7c3}body[data-color-mode="dark"] .trophy-shelf{background:linear-gradient(145deg,rgba(10,25,47,.96),rgba(24,38,72,.90));border-color:rgba(126,184,241,.14)}

@media(max-width:980px){.group-switcher{grid-template-columns:repeat(4,1fr)}}
@media(max-width:760px){.trophy-shelf{grid-template-columns:repeat(2,1fr)}.country-flag{font-size:20px}.side-score-row .mini-piece{width:28px;height:28px}.championship-card>.modal-kicker,.championship-card>#championshipTitle{margin-left:20px;margin-right:20px}#championshipContent{padding:14px 20px 24px;max-height:calc(92vh - 104px)}.groups-grid,.result-groups,.bracket{grid-template-columns:1fr}.fixture-meta{flex-direction:column;gap:5px!important}.real-flag.hero-flag{width:56px;height:37px}.championship-card>#championshipTitle{font-size:31px}.group-switcher{grid-template-columns:repeat(2,1fr)}.single-group-view{grid-template-columns:1fr}.start-countdown{inset:8px}.start-countdown span{width:92px;height:92px;font-size:46px}.start-countdown.go span{width:124px;font-size:31px}.tournament-head{align-items:flex-start;flex-wrap:wrap}.tournament-management{width:100%;margin-left:0;justify-content:flex-start}}

/* ---------------- Online multiplayer ---------------- */
.online-action{border-color:rgba(49,130,246,.28);background:linear-gradient(135deg,rgba(49,130,246,.10),rgba(133,90,255,.08));}
.online-card{width:min(760px,calc(100vw - 32px));}
.online-lobby-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:24px 0 4px;}
.online-choice{min-height:150px;padding:22px;text-align:left;border:1px solid var(--line,#d7e3eb);border-radius:22px;background:rgba(255,255,255,.62);color:inherit;cursor:pointer;transition:.2s transform,.2s border-color,.2s box-shadow;display:flex;flex-direction:column;gap:8px;}
body[data-color-mode="dark"] .online-choice{background:rgba(10,22,40,.62);}
.online-choice:hover{transform:translateY(-2px);border-color:rgba(49,130,246,.48);box-shadow:0 14px 40px rgba(28,74,136,.12);}
.online-choice-icon{font-size:30px}.online-choice strong{font-size:19px}.online-choice small{font-size:14px;line-height:1.5;opacity:.68;}
.online-subpanel{margin-top:18px;padding-top:18px;border-top:1px solid var(--line,#d7e3eb);}
.online-friend-grid{display:grid;gap:12px}.join-room-row{display:grid;grid-template-columns:1fr auto;gap:10px}.online-code-input{width:100%;height:52px;border:1px solid var(--line,#d7e3eb);border-radius:15px;padding:0 16px;background:rgba(255,255,255,.62);color:inherit;font:700 17px/1 'DM Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;outline:none}.online-code-input:focus{border-color:#3b82f6;box-shadow:0 0 0 4px rgba(59,130,246,.12)}body[data-color-mode="dark"] .online-code-input{background:rgba(5,15,30,.64)}
.online-waiting{text-align:center;padding:26px 6px 4px}.online-spinner{display:inline-block;width:44px;height:44px;border-radius:50%;border:4px solid rgba(59,130,246,.14);border-top-color:#3b82f6;animation:onlineSpin .85s linear infinite}@keyframes onlineSpin{to{transform:rotate(360deg)}}.online-waiting h3{margin:14px 0 5px}.online-waiting p{margin:0 0 18px;opacity:.7}.room-code-box{margin:16px auto;max-width:330px;padding:16px;border-radius:18px;background:rgba(59,130,246,.08);border:1px dashed rgba(59,130,246,.38);display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 12px;text-align:left}.room-code-box small{grid-column:1/-1;letter-spacing:.14em;font-weight:800;opacity:.62}.room-code-box strong{font-size:30px;letter-spacing:.18em}.copy-code-btn{border:0;border-radius:11px;padding:9px 12px;background:#2563eb;color:#fff;font-weight:800;cursor:pointer}
.online-setup-notice{margin-top:18px;padding:16px 18px;border-radius:16px;background:rgba(245,158,11,.10);border:1px solid rgba(245,158,11,.3);line-height:1.5}.online-setup-notice p{margin:6px 0 0}.online-setup-notice code{font-size:.92em}.online-error{min-height:20px;margin:14px 0 0;color:#d64545;font-weight:700}.online-match-panel{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:22px;padding:16px;border-radius:18px;border:1px solid rgba(59,130,246,.2);background:rgba(59,130,246,.07)}.online-match-summary{display:flex;align-items:center;gap:11px}.online-match-summary div{display:flex;flex-direction:column}.online-match-summary small{opacity:.66}.online-match-actions{display:flex;gap:8px}.danger-action{border-color:rgba(220,38,38,.25)!important;color:#c62e2e!important;background:rgba(220,38,38,.06)!important}
.online-connection-bar{display:flex;align-items:center;gap:8px;padding:9px 11px;margin-bottom:12px;border-radius:13px;background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.16)}.online-connection-bar small{margin-left:auto;opacity:.65}.connection-dot{width:9px;height:9px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.11)}.online-connection-bar.waiting .connection-dot,.online-match-summary.waiting .connection-dot{background:#f59e0b;box-shadow:0 0 0 4px rgba(245,158,11,.12)}.online-connection-bar.offline .connection-dot,.online-match-summary.offline .connection-dot{background:#ef4444;box-shadow:0 0 0 4px rgba(239,68,68,.12)}
@media(max-width:680px){.online-lobby-choices{grid-template-columns:1fr}.online-match-panel{align-items:stretch;flex-direction:column}.online-match-actions{display:grid;grid-template-columns:1fr 1fr}.join-room-row{grid-template-columns:1fr}.room-code-box{grid-template-columns:1fr auto}}


.site-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 24px 32px;
  font-size: 13px;
  opacity: 0.8;
}

.footer-links {
  display: flex;
  gap: 18px;
}

.footer-links button {
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  opacity: 0.78;
}

.footer-links button:hover {
  opacity: 1;
  text-decoration: underline;
}

.legal-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.legal-modal.open {
  display: block;
}

.legal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 9, 20, 0.72);
  backdrop-filter: blur(12px);
}

.legal-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(820px, calc(100vw - 32px));
  max-height: min(820px, calc(100vh - 48px));
  transform: translate(-50%, -50%);
  overflow-y: auto;

  padding: 42px;

  background: rgba(16, 30, 54, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 28px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.4);

  color: #f5f7fb;
}

.legal-close {
  position: sticky;
  top: 0;
  float: right;

  width: 42px;
  height: 42px;

  border: 1px solid rgba(255,255,255,.14);
  border-radius: 50%;

  background: rgba(255,255,255,.08);
  color: white;

  font-size: 25px;
  cursor: pointer;
}

#legalContent h1 {
  margin-top: 0;
  font-size: clamp(32px, 4vw, 48px);
}

#legalContent h2 {
  margin-top: 34px;
  font-size: 20px;
}

#legalContent p,
#legalContent li {
  line-height: 1.7;
  color: rgba(245,247,251,.78);
}

#legalContent a {
  color: #60c8ff;
}

.legal-updated {
  font-size: 13px;
  opacity: .65;
}

body.modal-open {
  overflow: hidden;
}

.board .square .piece {
  width: 98% !important;
  height: 98% !important;
}

@media (min-width:1121px) and (max-height:980px){

  /* Smaller navbar container — text stays same size */
  .site-header{
    margin-top:8px;
    height:36px;
    padding-left:28px;
    padding-right:28px;
  }

  /* Less empty vertical space around Your Turn */
  .score-strip{
    min-height:58px;
    padding:5px 20px;
  }

  /* Smaller Your Turn pill */
  .turn-pill{
    min-width:340px;
    padding:1px 28px;
  }

  /* Now allow a larger board */
  .board-column{
    width:min(82vh,650px);
  }
}

/* Hide duplicate controls from left panel */
#sideSettingsBtn,
.game-controls .quick-setting {
  display: none !important;
}

.main-nav a:first-child::after{
  display:none;
}

.wifi-icon{
  width:18px;
  height:18px;
  margin-right:7px;
  vertical-align:-3px;
}

.brand-logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

@media (max-width: 700px) {
  .brand-logo {
    width: 44px;
    height: 44px;
  }
}

/* =========================================================
   MOBILE PERFORMANCE OPTIMIZATION
   Keeps desktop visuals unchanged
   ========================================================= */

@media (max-width: 760px) {

  /* Fixed backgrounds can cause expensive mobile repaints */
  body {
    background-attachment: scroll !important;
  }

  /*
     Heavy glass blur is one of the biggest GPU costs
     on budget / mid-range Android devices.
  */
  .site-header,
  .game-stage,
  .panel-card,
  .rule-grid article,
  .modal,
  .legal-backdrop,
  .start-countdown {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* Keep the glass LOOK without calculating real-time blur */
  .site-header {
    background: rgba(245, 250, 255, 0.94);
    box-shadow:
      0 7px 20px rgba(70, 105, 155, 0.10),
      inset 0 1px 0 rgba(255,255,255,.9);
  }

  .game-stage {
    background: rgba(245, 250, 255, 0.72);
    box-shadow:
      0 12px 28px rgba(70, 110, 170, 0.12),
      inset 0 1px 0 rgba(255,255,255,.8);
  }

  .panel-card {
    background: rgba(250, 252, 255, 0.92);
    box-shadow:
      0 8px 20px rgba(70, 105, 155, 0.10),
      inset 0 1px 0 rgba(255,255,255,.85);
  }

  .rule-grid article {
    background: rgba(250, 252, 255, 0.92);
    box-shadow: 0 7px 18px rgba(70, 105, 155, 0.08);
  }


  /* ---------- DARK MODE ---------- */

  body[data-color-mode="dark"] .site-header {
    background: rgba(9, 22, 39, 0.96);
  }

  body[data-color-mode="dark"] .game-stage {
    background: rgba(9, 22, 39, 0.90);
  }

  body[data-color-mode="dark"] .panel-card {
    background: rgba(17, 31, 53, 0.95);
  }

  body[data-color-mode="dark"] .rule-grid article {
    background: rgba(12, 26, 45, 0.94);
  }


  /* Board glow: blur is unnecessary on a small screen */
  .board-shell::after {
    filter: none !important;
    opacity: 0.55;
  }


  /* Phones don't need mouse-hover animations */
  .piece {
    transition: none !important;
  }

  .movable .piece:hover {
    transform: none !important;
  }


  /* Crown drop-shadow is attractive but relatively expensive */
  .crown {
    filter: none;
  }


  /* -----------------------------------------
     MOBILE NAVBAR
     Keep icons, remove text to prevent crowding
     ----------------------------------------- */

  .nav-button span {
    display: none;
  }

  .main-nav {
    gap: 5px;
  }

  .nav-button {
    width: 38px;
    height: 38px;
    padding: 0 !important;
    display: grid;
    place-items: center;
    border-radius: 10px;
  }

  .nav-icon {
    width: 19px;
    height: 19px;
  }

  .brand {
    gap: 8px;
    font-size: 16px;
  }

  .brand-logo {
    width: 38px;
    height: 38px;
  }
}


/* Extra-small phones */
@media (max-width: 400px) {

  .site-header {
    width: calc(100% - 14px);
    padding-left: 10px;
    padding-right: 10px;
  }

  .brand {
    font-size: 15px;
  }

  .brand-logo {
    width: 35px;
    height: 35px;
  }

  .nav-button {
    width: 34px;
    height: 34px;
  }

  main {
    padding-left: 7px;
    padding-right: 7px;
  }

  .game-stage {
    padding-left: 6px;
    padding-right: 6px;
  }
}
/* ======================================================================
   GAME CONTROL PANEL V2
   Visible Classic / Russian game style selector + safer mobile actions.
   Added October 2026. Existing game logic and element IDs are preserved.
   ====================================================================== */

/* Give the redesigned left rail a little more breathing room without
   changing the board or history panel proportions. */
@media (min-width:1121px){
  .play-layout{
    grid-template-columns:255px minmax(470px,690px) 245px;
    gap:16px;
  }
}

@media (min-width:1121px) and (max-height:980px){
  .play-layout{
    grid-template-columns:255px auto 220px;
    gap:14px;
  }
}

.game-controls-new{
  padding:14px;
  border-radius:25px;
  overflow:hidden;
}

.game-controls-new h2::before{
  display:none !important;
  content:none !important;
}

.game-panel-header{
  display:flex;
  align-items:center;
  gap:11px;
  padding:2px 3px 11px;
}

.game-panel-icon{
  width:42px;
  height:42px;
  flex:0 0 42px;
  display:grid;
  place-items:center;
  border-radius:14px;
  color:#fff;
  background:linear-gradient(145deg,#39c7f2 0%,#3f8cff 48%,#735cf0 100%);
  border:1px solid rgba(255,255,255,.34);
  box-shadow:
    0 8px 20px rgba(61,116,236,.24),
    inset 0 1px 0 rgba(255,255,255,.35);
}

.game-panel-icon svg{
  width:23px;
  height:23px;
}

.game-panel-heading-copy{
  min-width:0;
}

.game-panel-heading-copy h2{
  margin:0 !important;
  font-size:22px;
  line-height:1.05;
  letter-spacing:-.035em;
}

.game-panel-heading-copy p{
  margin:3px 0 0;
  color:var(--muted);
  font-size:9px;
  font-weight:600;
}

.game-style-panel{
  position:relative;
  padding:10px;
  margin-top:2px;
  border-radius:17px;
  background:rgba(255,255,255,.38);
  border:1px solid rgba(101,150,211,.15);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72);
}

.game-control-heading{
  display:block;
  margin:0 0 8px;
  color:var(--ink);
  font-size:10px;
  line-height:1.2;
  font-weight:800;
  letter-spacing:-.01em;
}

/* The original #ruleset control remains available to app.js, but the user
   interacts with the polished cards below. */
.ruleset-native-select{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
  opacity:0 !important;
  pointer-events:none !important;
}

.ruleset-choice-list{
  display:grid;
  gap:7px;
}

.ruleset-choice{
  width:100%;
  min-height:47px;
  display:grid;
  grid-template-columns:28px minmax(0,1fr) 22px;
  align-items:center;
  gap:8px;
  padding:7px 8px;
  border-radius:13px;
  border:1px solid rgba(93,143,207,.18);
  background:rgba(255,255,255,.52);
  color:var(--ink);
  text-align:left;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72);
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,background .16s ease;
}

.ruleset-choice:hover:not(:disabled){
  transform:translateY(-1px);
  border-color:rgba(68,137,232,.34);
}

.ruleset-choice.is-active{
  border-color:rgba(58,164,255,.78);
  background:linear-gradient(110deg,rgba(52,202,244,.92),rgba(57,139,250,.92) 52%,rgba(102,91,239,.92));
  color:#fff;
  box-shadow:
    0 8px 18px rgba(57,121,237,.19),
    inset 0 1px 0 rgba(255,255,255,.30);
}

.ruleset-choice.is-locked,
.ruleset-choice:disabled{
  cursor:not-allowed;
  opacity:.62;
  transform:none;
}

.ruleset-choice-icon{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:9px;
  color:#5e91d7;
  background:rgba(87,151,236,.10);
}

.ruleset-choice.is-active .ruleset-choice-icon{
  color:#fff;
  background:rgba(255,255,255,.15);
}

.checkerboard-icon{
  grid-template-columns:repeat(3,5px);
  grid-template-rows:repeat(3,5px);
  gap:1px;
}

.checkerboard-icon i{
  width:5px;
  height:5px;
  border-radius:1px;
  background:currentColor;
}

.checkerboard-icon i:nth-child(even){
  opacity:.28;
}

.crown-icon svg{
  width:18px;
  height:18px;
}

.ruleset-choice-copy{
  min-width:0;
}

.ruleset-choice-copy strong{
  display:block;
  font-size:9.5px;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.ruleset-choice-copy small{
  display:block;
  margin-top:2px;
  color:var(--muted);
  font-size:7.5px;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.ruleset-choice.is-active .ruleset-choice-copy small{
  color:rgba(255,255,255,.78);
}

.ruleset-choice-check{
  width:19px;
  height:19px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1.5px solid rgba(99,145,204,.35);
  color:transparent;
  background:rgba(255,255,255,.32);
}

.ruleset-choice-check svg{
  width:13px;
  height:13px;
}

.ruleset-choice.is-active .ruleset-choice-check{
  color:#3484f5;
  border-color:#fff;
  background:#fff;
}

.game-style-hint{
  margin:7px 1px 0;
  color:var(--muted);
  font-size:7.5px;
  line-height:1.35;
}

.difficulty-control-block{
  margin-top:12px;
}

.select-with-icon{
  position:relative;
}

.difficulty-bars{
  position:absolute;
  z-index:2;
  left:13px;
  top:50%;
  transform:translateY(-50%);
  width:17px;
  height:18px;
  display:flex;
  align-items:flex-end;
  gap:2px;
  pointer-events:none;
}

.difficulty-bars i{
  width:4px;
  border-radius:2px 2px 1px 1px;
  background:linear-gradient(#56d2f4,#5184ff);
  box-shadow:0 0 8px rgba(77,151,255,.18);
}

.difficulty-bars i:nth-child(1){height:7px}
.difficulty-bars i:nth-child(2){height:12px}
.difficulty-bars i:nth-child(3){height:17px}

.game-difficulty-select{
  min-height:43px;
  padding:10px 34px 10px 40px !important;
  border-radius:13px !important;
  font-size:11px;
  font-weight:700;
}

.game-difficulty-copy{
  margin:7px 1px 0;
  font-size:8px;
}

.game-action-stack,
.game-mode-stack{
  display:grid;
  gap:9px;
}

.game-action-stack{
  margin-top:13px;
  padding-bottom:11px;
  border-bottom:1px solid rgba(104,150,208,.13);
}

.game-mode-stack{
  margin-top:11px;
}

.game-side-action{
  width:100%;
  min-height:51px;
  padding:8px 13px !important;
  display:grid;
  grid-template-columns:31px minmax(0,1fr) 31px;
  align-items:center;
  column-gap:8px;
  border-radius:15px !important;
  font-size:11px !important;
  line-height:1.1;
  font-weight:800;
  text-align:center;
  touch-action:manipulation;
  -webkit-user-select:none;
  user-select:none;
}

.game-side-action > span:nth-child(2){
  grid-column:2;
  justify-self:center;
}

.side-action-icon{
  grid-column:1;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:50%;
  justify-self:start;
}

.side-action-icon svg{
  width:18px;
  height:18px;
}

.undo-side-action{
  border-color:rgba(85,166,255,.25) !important;
  color:#fff !important;
  background:linear-gradient(100deg,#35c7eb 0%,#368ff7 53%,#735ce9 100%) !important;
  box-shadow:0 9px 20px rgba(56,123,235,.20),inset 0 1px 0 rgba(255,255,255,.28) !important;
}

.undo-side-action .side-action-icon{
  background:rgba(255,255,255,.14);
  color:#fff;
}

.new-game-side-action{
  border-color:rgba(39,184,151,.38) !important;
  background:linear-gradient(110deg,rgba(31,179,148,.16),rgba(50,183,209,.13)) !important;
}

.new-game-side-action .side-action-icon{
  color:#32c4af;
  background:rgba(42,195,166,.12);
}

.regular-side-action{
  border-color:rgba(122,91,245,.40) !important;
  background:linear-gradient(110deg,rgba(120,77,239,.15),rgba(84,67,198,.11)) !important;
}

.regular-side-action .side-action-icon{
  color:#7f6df1;
  background:rgba(116,88,238,.12);
}

.regular-side-action.active-mode{
  border-color:rgba(91,160,255,.82) !important;
  background:linear-gradient(110deg,rgba(66,139,243,.20),rgba(98,88,224,.13)) !important;
  box-shadow:inset 0 0 0 1px rgba(88,157,255,.08),0 7px 18px rgba(60,122,210,.08) !important;
}

.championship-side-action{
  border-color:rgba(225,173,56,.48) !important;
  color:#9a7116 !important;
  background:linear-gradient(110deg,rgba(255,219,117,.22),rgba(185,137,35,.11)) !important;
}

.championship-side-action .side-action-icon{
  color:#d09a22;
  background:rgba(231,178,56,.13);
}

.championship-side-action.active-mode{
  border-color:rgba(224,175,58,.78) !important;
  box-shadow:inset 0 0 0 1px rgba(224,175,58,.10),0 7px 18px rgba(145,104,25,.08) !important;
}

.online-side-action{
  border-color:rgba(231,79,128,.30) !important;
  background:linear-gradient(110deg,rgba(238,58,104,.11),rgba(194,66,150,.09),rgba(100,80,225,.10)) !important;
}

.online-side-action .side-action-icon{
  color:#e2578a;
  background:rgba(231,76,125,.11);
}

.game-side-action:hover:not(:disabled){
  transform:translateY(-1px);
}

.legacy-control-hooks{
  display:none !important;
}

/* ---------------- Dark mode: closely matches the selected mockup ---------------- */
body[data-color-mode="dark"] .game-controls-new{
  background:linear-gradient(155deg,rgba(24,48,86,.97),rgba(12,29,56,.97)) !important;
  border-color:rgba(116,179,245,.20) !important;
  box-shadow:
    0 20px 46px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 0 36px rgba(53,114,223,.05) !important;
}

body[data-color-mode="dark"] .game-panel-heading-copy p,
body[data-color-mode="dark"] .game-style-hint,
body[data-color-mode="dark"] .game-difficulty-copy{
  color:#8fa8c8;
}

body[data-color-mode="dark"] .game-style-panel{
  background:linear-gradient(145deg,rgba(22,46,82,.84),rgba(13,31,58,.80));
  border-color:rgba(111,173,239,.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 8px 20px rgba(0,0,0,.12);
}

body[data-color-mode="dark"] .ruleset-choice{
  background:rgba(15,34,62,.78);
  border-color:rgba(113,172,235,.20);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

body[data-color-mode="dark"] .ruleset-choice.is-active{
  background:linear-gradient(110deg,#2cc7ec 0%,#348cf6 54%,#6659e9 100%);
  border-color:rgba(82,208,255,.76);
  box-shadow:
    0 8px 20px rgba(36,119,226,.28),
    inset 0 1px 0 rgba(255,255,255,.24);
}

body[data-color-mode="dark"] .ruleset-choice:not(.is-active) .ruleset-choice-icon{
  color:#efbb42;
  background:rgba(221,165,47,.10);
}

body[data-color-mode="dark"] .ruleset-choice-copy small{
  color:#88a2c3;
}

body[data-color-mode="dark"] .game-difficulty-select{
  background:rgba(14,33,60,.84) !important;
  border-color:rgba(102,171,238,.26) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 5px 14px rgba(0,0,0,.12) !important;
}

body[data-color-mode="dark"] .game-action-stack{
  border-bottom-color:rgba(122,180,236,.12);
}

body[data-color-mode="dark"] .new-game-side-action{
  color:#edf8f7 !important;
  border-color:rgba(54,208,174,.56) !important;
  background:linear-gradient(110deg,rgba(27,173,142,.36),rgba(27,118,137,.42)) !important;
  box-shadow:0 8px 18px rgba(0,0,0,.13),inset 0 1px 0 rgba(255,255,255,.05) !important;
}

body[data-color-mode="dark"] .regular-side-action{
  color:#f3efff !important;
  border-color:rgba(138,91,247,.58) !important;
  background:linear-gradient(110deg,rgba(113,66,224,.46),rgba(69,50,160,.40)) !important;
  box-shadow:0 8px 18px rgba(0,0,0,.13),inset 0 1px 0 rgba(255,255,255,.05) !important;
}

body[data-color-mode="dark"] .regular-side-action.active-mode{
  border-color:rgba(131,99,255,.78) !important;
  background:linear-gradient(110deg,rgba(116,67,232,.62),rgba(71,50,170,.52)) !important;
}

body[data-color-mode="dark"] .championship-side-action{
  color:#f1c95d !important;
  border-color:rgba(224,171,52,.55) !important;
  background:linear-gradient(110deg,rgba(116,85,25,.36),rgba(67,53,31,.46)) !important;
  box-shadow:0 8px 18px rgba(0,0,0,.13),inset 0 1px 0 rgba(255,255,255,.04) !important;
}

body[data-color-mode="dark"] .online-side-action{
  color:#fff0f6 !important;
  border-color:rgba(236,72,119,.60) !important;
  background:linear-gradient(110deg,rgba(220,48,94,.66),rgba(160,52,131,.55),rgba(76,57,170,.55)) !important;
  box-shadow:0 8px 18px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.06) !important;
}

body[data-color-mode="dark"] .new-game-side-action .side-action-icon,
body[data-color-mode="dark"] .regular-side-action .side-action-icon,
body[data-color-mode="dark"] .championship-side-action .side-action-icon,
body[data-color-mode="dark"] .online-side-action .side-action-icon{
  color:currentColor;
  background:rgba(255,255,255,.08);
}

/* ---------------- Responsive / touch safety ---------------- */
@media (max-width:1120px){
  .game-controls-new{
    width:100%;
  }
}

@media (max-width:760px){
  .game-controls-new{
    padding:14px !important;
    border-radius:20px;
  }

  .game-panel-header{
    padding-bottom:12px;
  }

  .game-style-panel{
    padding:11px;
  }

  .ruleset-choice-list{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
  }

  .ruleset-choice{
    min-height:72px;
    grid-template-columns:1fr 20px;
    grid-template-rows:auto auto;
    align-items:center;
    padding:10px;
  }

  .ruleset-choice-icon{
    grid-column:1;
    grid-row:1;
    justify-self:start;
  }

  .ruleset-choice-copy{
    grid-column:1/-1;
    grid-row:2;
  }

  .ruleset-choice-copy strong{
    font-size:10px;
  }

  .ruleset-choice-copy small{
    font-size:8px;
  }

  .ruleset-choice-check{
    grid-column:2;
    grid-row:1;
    justify-self:end;
  }

  .game-action-stack,
  .game-mode-stack{
    gap:12px;
  }

  .game-action-stack{
    padding-bottom:13px;
  }

  /* Taller, clearly separated touch targets prevent Undo/New Game misclicks. */
  .game-side-action{
    min-height:58px;
    padding:10px 15px !important;
    border-radius:16px !important;
    font-size:12px !important;
  }

  .side-action-icon{
    width:33px;
    height:33px;
  }

  .side-action-icon svg{
    width:19px;
    height:19px;
  }
}

@media (max-width:420px){
  .ruleset-choice-list{
    grid-template-columns:1fr;
  }

  .ruleset-choice{
    min-height:52px;
    grid-template-columns:30px minmax(0,1fr) 20px;
    grid-template-rows:1fr;
  }

  .ruleset-choice-icon,
  .ruleset-choice-copy,
  .ruleset-choice-check{
    grid-row:1;
  }

  .ruleset-choice-icon{grid-column:1}
  .ruleset-choice-copy{grid-column:2}
  .ruleset-choice-check{grid-column:3}
}