:root {
  --ink: #17201b;
  --pine: #233a30;
  --moss: #526656;
  --bone: #e9dfc8;
  --parchment: #d6c69f;
  --wood: #9a7047;
  --wood-dark: #61472f;
  --ember: #a23b2f;
  --gold: #d4a94e;
  --cell: min(7.35vw, 7.35vh, 64px);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100dvh;
  color: var(--bone);
  background:
    radial-gradient(circle at 50% -20%, #486052 0, transparent 44%),
    linear-gradient(135deg, #19251f, #101713 70%);
  font-family: "Trebuchet MS", system-ui, sans-serif;
  overflow-x: hidden;
}
.skip-link { position:fixed; z-index:30; top:8px; left:8px; padding:10px 14px; color:#19150d; background:var(--gold); transform:translateY(-150%); }
.skip-link:focus { transform:none; }

body::before {
  content: "";
  position: fixed; inset: 0; pointer-events: none; opacity: .12;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

button { font: inherit; }
.app-shell { position:relative; z-index:1; width: min(1180px, 100%); min-height: 100dvh; margin: auto; padding: 24px 32px 30px; }
.masthead { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e9dfc82b; padding-bottom: 14px; }
.masthead-actions { display:flex; gap:9px; }
.eyebrow { margin: 0 0 3px; color: #c5b792; text-transform: uppercase; letter-spacing: .18em; font: 700 .68rem/1.3 system-ui, sans-serif; }
h1, h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-weight: 500; letter-spacing: .025em; }
h1 { font-size: clamp(2rem, 5vw, 3.7rem); line-height: .9; }
h2 { font-size: 2rem; }
.icon-button { width: 42px; height: 42px; border-radius: 50%; border: 1px solid #e9dfc85c; color: var(--bone); background: transparent; font-weight: 800; cursor: pointer; }
.icon-button:hover { background: #fff1; }
.game-layout { display: grid; grid-template-columns: minmax(210px, 270px) auto; gap: clamp(22px, 4vw, 64px); align-items: center; justify-content: center; padding-top: 26px; }
.mobile-game-summary { display:none; }
.status-panel { grid-column:1; grid-row:1; }
.board-wrap { grid-column:2; grid-row:1; min-width:0; }
.status-panel { align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.turn-card { display: flex; align-items: center; gap: 14px; padding: 17px; border: 1px solid #e9dfc82b; border-radius: 4px; background: #0c120f52; }
.turn-card small { display: block; color: #b5ac98; margin-bottom: 2px; }
.turn-card strong { font: 500 1.35rem Georgia, serif; }
.turn-marker { width: 34px; height: 34px; flex:0 0 auto; border-radius: 50%; display: block; background-repeat:no-repeat; background-position:center; background-size:contain; filter:drop-shadow(0 3px 2px #0008); }
.turn-marker.attacker { background-image:url("assets/pieces/attacker-viking.png"); }
.turn-marker.defender { background-image:url("assets/pieces/defender-viking.png"); }
.turn-marker.attacker.skin-stones { background-image:url("assets/pieces/attacker-stones.png"); }
.turn-marker.defender.skin-stones { background-image:url("assets/pieces/defender-stones.png"); }
.turn-marker.attacker.skin-birka { background-image:url("assets/pieces/attacker-birka.png"); }
.turn-marker.defender.skin-birka { background-image:url("assets/pieces/defender-birka.png"); }
.turn-marker.attacker.skin-bone { background-image:url("assets/pieces/attacker-bone.png"); }
.turn-marker.defender.skin-bone { background-image:url("assets/pieces/defender-bone.png"); }
.turn-marker.attacker.skin-bronze { background-image:url("assets/pieces/attacker-bronze.png"); }
.turn-marker.defender.skin-bronze { background-image:url("assets/pieces/defender-bronze.png"); }
.turn-marker.attacker.skin-classic { background-image:none; background:radial-gradient(circle at 34% 26%,#6a766d,#263129 54%,#111814 78%); border:2px solid #8a948c; }
.turn-marker.defender.skin-classic { background-image:none; background:radial-gradient(circle at 34% 26%,#fff9eb,#d2c39e 55%,#918264 82%); border:2px solid #f4e9d0; }
.mini-piece.attacker { background: radial-gradient(circle at 35% 28%, #667469, #17201b 62%); border: 2px solid #859187; }
.mini-piece.defender { background: radial-gradient(circle at 35% 28%, #fff8e9, #c4b48e 64%); border: 2px solid #f1e7ce; }
.instruction { color: #c8c0ad; line-height: 1.55; min-height: 3em; }
.game-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 4px 0 14px; }
.game-options label:last-child { grid-column: 1 / -1; }
.game-options label { color: #aaa18e; font-size: .68rem; text-transform: uppercase; letter-spacing: .09em; }
.game-options select { width: 100%; margin-top: 6px; padding: 9px 28px 9px 9px; color: var(--bone); border: 1px solid #e9dfc83d; border-radius: 3px; background: #101713; font: 700 .78rem system-ui, sans-serif; cursor: pointer; }
.game-options select:disabled { opacity: .4; }
.scoreline { display: grid; gap: 10px; color: #bdb29a; font-size: .86rem; margin: 12px 0 26px; }
.scoreline span { display: flex; align-items: center; gap: 8px; }
.online-status { padding: 12px; margin: 0 0 16px; border: 1px solid #d4a94e55; background: #0d1511; }
.online-status:not([hidden]) { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; }
.connection-dot { width: 9px; height: 9px; border-radius: 50%; background: #66b879; box-shadow: 0 0 10px #66b879; }
.online-status small,.online-status strong { display: block; }
.online-status small { color: #aaa18e; font-size: .65rem; }
.clocks { grid-column: 1/-1; display: flex; justify-content: space-between; font: 1.1rem Georgia,serif; font-variant-numeric: tabular-nums; font-feature-settings:"tnum" 1; }
.clocks b { min-width: 4ch; text-align: center; }
.online-status .button { grid-column: 1/-1; padding: 8px; }
.move-status { grid-column:1/-1; min-height:1.2em; margin:0; color:#d8c99f; font-size:.76rem; }
.button.danger { border-color: #a64b42; color: #f1c1b9; background: #351b18; }
.button.danger:hover { background: #49231f; }
.connection-dot.connecting { background: #d4a94e; box-shadow: 0 0 10px #d4a94e; }
.connection-dot.offline { background: #a64b42; box-shadow: 0 0 10px #a64b42; }
.mini-piece { width: 16px; height: 16px; display: inline-block; border-radius: 50%; }
.desktop-actions, .mobile-actions { display: flex; gap: 10px; }
.button { border-radius: 3px; border: 1px solid transparent; padding: 12px 16px; font-weight: 800; cursor: pointer; transition: transform .15s, background .15s; }
.button:hover:not(:disabled) { transform: translateY(-1px); }
.button:disabled { opacity: .35; cursor: default; }
.button.primary { color: #19150d; background: var(--gold); border-color: #edcc77; }
.button.secondary { color: var(--bone); background: transparent; border-color: #e9dfc84d; }
.board-wrap { padding: 12px; border: 1px solid #d6c69f55; background: #37291e; box-shadow: 0 24px 55px #0009, inset 0 0 0 5px #76553a; transform: rotate(.15deg); }
.board-viewport { width:100%; max-width:100%; min-width:0; overflow:auto; overscroll-behavior-inline:contain; scrollbar-color:#d4a94e #201810; }
.board-help { margin:8px 2px 0; max-width:calc(var(--cell) * 11); color:#b8ad95; font-size:.72rem; line-height:1.4; }
.board { display: grid; grid-template-columns: repeat(11, var(--cell)); grid-template-rows: repeat(11, var(--cell)); border: 2px solid #422e1e; background: var(--wood); }
.cell { position: relative; border: 1px solid #5c402680; background: #a87d50; padding: 0; display: grid; place-items: center; cursor: pointer; }
.cell[aria-disabled="true"] { cursor:wait; }
.cell:nth-child(odd) { background: #a37649; }
.cell::after { content: ""; position: absolute; inset: 10%; border: 2px solid transparent; border-radius: 50%; }
.cell.valid::after { border-color: #ead078; background: #ead0783a; box-shadow: 0 0 0 3px #35281866; }
.cell.last-from { box-shadow: inset 0 0 0 3px #d4a94e66; }
.cell.last-to { box-shadow: inset 0 0 0 4px #f2d77e; z-index: 1; }
.death-mark { position:absolute; z-index:1; inset:calc(8% - var(--death-grow,0%)); pointer-events:none; opacity:var(--death-opacity,.66); }
.death-specter .death-mark { border-radius:46% 54% 58% 42%; background:radial-gradient(ellipse at 48% 55%,#0b100db8 0 27%,#18221ab0 38%,transparent 72%); filter:blur(1px); transform:rotate(-12deg) scale(.96,.7); box-shadow:0 0 7px #07100b99; }
.death-specter .death-mark::before,.death-specter .death-mark::after { content:""; position:absolute; top:-10%; width:22%; height:78%; border-radius:50%; background:linear-gradient(#17201bb8,transparent); filter:blur(2px); }
.death-specter .death-mark::before { left:22%; transform:rotate(-18deg); }
.death-specter .death-mark::after { right:20%; transform:rotate(20deg); }
.death-runes .death-mark { inset:calc(14% - var(--death-grow,0%)); border:2px solid #282e2a99; border-radius:50%; background:radial-gradient(circle,transparent 37%,#252b2680 39% 45%,transparent 48%); box-shadow:inset 0 0 9px #1a201b99,0 0 6px #1a201b88; transform:rotate(16deg); }
.death-runes .death-mark::before { content:"ᛉ"; position:absolute; inset:0; display:grid; place-items:center; color:#1c241fc9; font:700 calc(var(--cell)*.48)/1 Georgia,serif; text-shadow:0 0 5px #d6c69f66; }
.death-crimson .death-mark { inset:calc(18% - var(--death-grow,0%)) calc(10% - var(--death-grow,0%)) calc(12% - var(--death-grow,0%)) calc(14% - var(--death-grow,0%)); border-radius:44% 56% 48% 52%; background:radial-gradient(ellipse at 45% 48%,#5d100fc4 0 24%,#7918159c 44%,#35100d66 62%,transparent 74%); filter:blur(.35px); transform:rotate(9deg) scale(1.05,.72); box-shadow:9px -7px 0 -8px #701714b0,-8px 5px 0 -7px #4b0e0db0; }
.death-mark.new-death-mark { animation:death-mark-arrival .5s ease-out both; }
@keyframes death-mark-arrival { from { opacity:0; transform:scale(.45) rotate(0); } to { opacity:.66; } }
.piece.capture-striker { z-index:4; animation:flank-strike .52s cubic-bezier(.2,.8,.25,1) both; }
.piece.capture-victim { z-index:3; animation:fallen-piece .54s ease-out both; }
.capture-slash { position:absolute; z-index:5; left:8%; top:47%; width:84%; height:3px; border-radius:50%; pointer-events:none; background:linear-gradient(90deg,transparent,#fff8d6 25% 72%,transparent); box-shadow:0 0 5px #fff2ba,0 0 11px #d4a94e; transform:rotate(-36deg); animation:sword-cut .5s ease-out both; }
@keyframes flank-strike { 0%,100% { transform:translate(0,0) scale(1); } 38% { transform:translate(var(--strike-x),var(--strike-y)) scale(1.08); filter:brightness(1.3) drop-shadow(0 5px 4px #21170dcc); } 58% { transform:translate(var(--strike-x),var(--strike-y)) scale(1.03); } }
@keyframes fallen-piece { 0%,32% { opacity:1; transform:scale(1); filter:drop-shadow(0 4px 3px #21170dbb); } 62% { opacity:.65; transform:scale(.9) rotate(7deg); filter:grayscale(.55) brightness(.75); } 100% { opacity:0; transform:scale(.45) rotate(16deg); filter:grayscale(1) blur(2px); } }
@keyframes sword-cut { 0% { opacity:0; transform:translate(-35%,-28%) rotate(-36deg) scaleX(.2); } 26% { opacity:1; transform:translate(0,0) rotate(-36deg) scaleX(1); } 62% { opacity:.9; } 100% { opacity:0; transform:translate(22%,18%) rotate(-36deg) scaleX(.7); } }
@keyframes landed { 0% { transform: scale(.72); filter: brightness(1.7); } 55% { transform: scale(1.12); } 100% { transform: scale(1); filter: none; } }
.cell.special { background: #76513a; }
.appearance-dialog { width:min(680px,calc(100% - 28px)); max-height:90dvh; overflow:auto; }
.appearance-intro { color:#665c47; line-height:1.45; }
.board-theme-field select { padding:10px; border:1px solid #75684955; background:#fffaf0; font:inherit; }
.appearance-note { margin:10px 0 0; color:#665c47; font-size:.78rem; text-align:center; }
.death-mark-field { position:relative; margin:16px 0 4px; padding:13px 76px 12px 14px; border:1px solid #75684955; background:#fff8e866; }
.death-mark-field legend { padding:0 6px; color:#514937; font:700 .78rem/1.2 system-ui,sans-serif; text-transform:uppercase; letter-spacing:.08em; }
.death-mark-toggle { display:flex; align-items:center; gap:9px; min-height:36px; color:#514937; font-size:.8rem; font-weight:700; line-height:1.3; cursor:pointer; }
.death-mark-toggle input { width:19px; height:19px; flex:none; accent-color:var(--ember); }
.death-mark-field .field { margin:7px 0 0; }
.death-mark-preview { position:absolute; right:14px; bottom:15px; width:48px; height:48px; overflow:hidden; border:1px solid #604b2466; background:#a87d50; box-shadow:inset 0 0 0 2px #fff2; }
.death-mark-preview .death-mark { opacity:.8; }
.visual-settings { display:grid; gap:8px; margin:14px 0; }
.advanced-appearance { margin:14px 0; border:1px solid #75684955; }
.advanced-appearance>summary { padding:13px; color:#514937; font-weight:800; cursor:pointer; }
.advanced-appearance-body { padding:0 13px 8px; }
.tutorial-panel { margin:10px 0; padding:13px; border:1px solid #d4a94e66; background:#101713; }
.tutorial-panel h2 { font-size:1.25rem; }.tutorial-panel p { line-height:1.45; }
.tutorial-progress,.tutorial-actions { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.tutorial-progress span { color:#d4a94e; font-size:.75rem; font-weight:800; text-transform:uppercase; }
.tutorial-actions .button { flex:1; }.tutorial-launch { margin:0 0 10px; }
.cell.tutorial-target { box-shadow:inset 0 0 0 3px #72d6a1,0 0 10px #72d6a188; z-index:2; }
.tutorial-demo { --demo-cell:clamp(32px,7vw,42px); display:grid; grid-template-columns:repeat(5,var(--demo-cell)); grid-template-rows:repeat(3,var(--demo-cell)); justify-content:center; margin:12px 0 15px; border:1px solid #d4a94e55; background:#61472f; }
.tutorial-demo-cell { position:relative; display:grid; place-items:center; border:1px solid #3f2d1d88; background:#a87d50; }
.tutorial-demo-cell:nth-child(odd) { background:#a37649; }
.tutorial-demo-cell.demo-path::after { content:""; position:absolute; width:18%; height:18%; border-radius:50%; background:#f2d77e; box-shadow:0 0 7px #f2d77e; opacity:.72; }
.tutorial-demo-cell.demo-throne { background:#694531; box-shadow:inset 0 0 0 3px #d4a94eaa; }
.tutorial-demo-cell.demo-throne::before { content:"♛"; position:absolute; color:#f2d77e; opacity:.5; font:700 1.15rem/1 Georgia,serif; }
.tutorial-demo-cell.demo-corner { background:#493329; box-shadow:inset 0 0 0 3px #e3c56c99; }
.tutorial-demo .piece { width:88%; height:88%; z-index:2; }
.tutorial-demo .demo-moving { animation:tutorial-piece-move 1.8s ease-in-out infinite; }
.tutorial-demo .demo-victim { animation:tutorial-captured 1.8s ease-in-out infinite; }
@keyframes tutorial-piece-move { 0%,18% { transform:translate(var(--demo-from-x),var(--demo-from-y)); } 48%,82% { transform:none; } 100% { transform:translate(var(--demo-from-x),var(--demo-from-y)); } }
@keyframes tutorial-captured { 0%,52% { opacity:1; transform:scale(1); } 72%,92% { opacity:.18; transform:scale(.5) rotate(14deg); } 100% { opacity:1; transform:scale(1); } }
.visual-settings details { border:1px solid #75684955; background:#fff8e866; }
.rule-variants { margin:14px 0; border:1px solid #75684955; background:#fff8e866; }
.rule-variants>summary { padding:12px 13px; color:#514937; font-weight:800; cursor:pointer; }
.variant-note { grid-column:1/-1; margin:2px 0 0; color:#665c47; font-size:.74rem; line-height:1.4; }
.rule-variants.is-competitive { opacity:.55; }
.visual-settings summary { padding:11px 13px; color:#514937; font:700 .78rem/1.2 system-ui,sans-serif; text-transform:uppercase; letter-spacing:.08em; cursor:pointer; }
.setting-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px 12px; padding:2px 13px 13px; }
.setting-toggle { display:flex; align-items:center; gap:8px; min-height:38px; color:#514937; font-size:.79rem; font-weight:700; cursor:pointer; }
.setting-toggle input { width:18px; height:18px; flex:none; accent-color:var(--ember); }
.setting-wide { grid-column:1/-1; margin:4px 0 0; }
.piece.move-arrival { animation:piece-travel .34s cubic-bezier(.22,.8,.25,1) both; }
@keyframes piece-travel { from { transform:translate(var(--move-x),var(--move-y)) scale(.94); filter:brightness(1.25) drop-shadow(0 7px 5px #21170dcc); } to { transform:translate(0,0) scale(1); } }
.capture-particle { position:absolute; z-index:6; left:50%; top:50%; width:5px; height:5px; border-radius:50%; background:#f4d881; box-shadow:0 0 5px #fff0ad; pointer-events:none; animation:particle-burst .48s ease-out both; transform:rotate(var(--particle-angle)) translateX(8px); }
@keyframes particle-burst { from { opacity:1; transform:rotate(var(--particle-angle)) translateX(3px) scale(1); } to { opacity:0; transform:rotate(var(--particle-angle)) translateX(calc(var(--cell)*.45)) scale(.25); } }
.board-wrap.capture-shake { animation:board-impact .28s ease-out; }
@keyframes board-impact { 0%,100% { translate:0 0; } 30% { translate:-3px 1px; } 55% { translate:3px -1px; } 75% { translate:-1px 0; } }
.cell.special.special-near { box-shadow:inset 0 0 0 2px #d4a94e88,0 0 13px #d4a94e55; }
.cell.special.king-sanctuary { box-shadow:inset 0 0 18px #ffe399aa,0 0 18px #d4a94e88; }
.piece.king.king-danger { animation:king-danger 1.1s ease-in-out infinite; }
.piece.king.king-hope { filter:drop-shadow(0 0 8px #f5df83) drop-shadow(0 4px 3px #21170dbb); }
@keyframes king-danger { 50% { filter:drop-shadow(0 0 10px #b52b24) drop-shadow(0 4px 3px #21170dbb); transform:scale(1.035); } }
.cell.threatened { box-shadow:inset 0 0 0 3px #a23b2f99; }
.cell.capture-hint::after { border-color:#d86e45; background:#a23b2f45; box-shadow:0 0 9px #a23b2f99; }
.cell.king-route::after { border-color:#f2d77e; background:linear-gradient(135deg,transparent 35%,#f2d77e77 36% 54%,transparent 55%); }
.board.intro-active .piece.intro-king { animation:king-deploy .55s cubic-bezier(.18,.84,.24,1) .08s both; }
.board.intro-active .piece.intro-defender { animation:defender-deploy .7s cubic-bezier(.18,.76,.2,1) var(--intro-delay,170ms) both; will-change:transform,opacity; }
.board.intro-active .piece.intro-attacker { animation:attacker-deploy .5s cubic-bezier(.16,.78,.2,1) var(--intro-delay,940ms) both; will-change:transform,opacity; }
.board.intro-active { overflow:hidden; }
@keyframes king-deploy { from { opacity:0; transform:scale(.25); filter:drop-shadow(0 0 16px #f2d77e); } 70% { opacity:1; transform:scale(1.1); } to { transform:scale(1); } }
@keyframes defender-deploy { 0%,22% { opacity:1; transform:translate3d(var(--intro-x),var(--intro-y),0) scale(.82); } 82% { opacity:1; transform:translate3d(0,0,0) scale(1.04); } 100% { transform:translate3d(0,0,0) scale(1); } }
@keyframes attacker-deploy { from { opacity:0; transform:translate3d(var(--intro-x),var(--intro-y),0) scale(.88); } 82% { opacity:1; transform:translate3d(0,0,0) scale(1.025); } to { opacity:1; transform:translate3d(0,0,0) scale(1); } }
body[data-ambient="fog"]::after,body[data-ambient="embers"]::after,body[data-ambient="snow"]::after,body[data-ambient="torch"]::after { content:""; position:fixed; inset:0; z-index:0; pointer-events:none; }
body[data-ambient="fog"]::after { background:radial-gradient(ellipse at 20% 30%,#d8e2dc18,transparent 36%),radial-gradient(ellipse at 80% 65%,#c8d8d020,transparent 42%); animation:ambient-drift 10s ease-in-out infinite alternate; }
body[data-ambient="embers"]::after { background-image:radial-gradient(circle,#e9853b99 0 1px,transparent 2px),radial-gradient(circle,#d4a94e66 0 1px,transparent 2px); background-size:67px 83px,97px 71px; animation:embers-rise 9s linear infinite; }
body[data-ambient="snow"]::after { background-image:radial-gradient(circle,#fff9 0 1px,transparent 2px),radial-gradient(circle,#fff6 0 1px,transparent 2px); background-size:55px 69px,89px 81px; animation:snow-fall 12s linear infinite; }
body[data-ambient="torch"]::after { background:radial-gradient(circle at 8% 55%,#dc7b382c,transparent 25%),radial-gradient(circle at 92% 45%,#dc7b3826,transparent 27%); animation:torch-flicker 2.6s ease-in-out infinite alternate; }
@keyframes ambient-drift { to { transform:translate3d(3%,-2%,0) scale(1.05); } } @keyframes embers-rise { to { background-position:20px -180px,-15px -130px; } } @keyframes snow-fall { to { background-position:35px 220px,-25px 170px; } } @keyframes torch-flicker { to { opacity:.62; filter:brightness(1.35); } }
.result-dialog.cinematic { overflow:hidden; isolation:isolate; animation:result-arrival .55s cubic-bezier(.2,.8,.2,1); }
.result-dialog.cinematic>* { position:relative; z-index:1; }
.result-dialog.cinematic::after { content:""; position:absolute; inset:-50%; z-index:0; background:conic-gradient(transparent,#d4a94e33,transparent 32%); animation:victory-light 4s linear infinite; }
.rematch-countdown { margin: 8px 0; color: #d4a94e; font-weight: 800; font-variant-numeric: tabular-nums; }
.result-dialog .button + .button { margin-top: 8px; }
@keyframes result-arrival { from { opacity:0; transform:scale(.72) rotate(-1deg); } to { opacity:1; transform:scale(1); } } @keyframes victory-light { to { transform:rotate(1turn); } }
body[data-board-theme="ash"] .board-wrap { background:#514737; box-shadow:0 24px 55px #0009,inset 0 0 0 5px #95866d; }
body[data-board-theme="ash"] .board { border-color:#5d503d; background:#cab68f; }
body[data-board-theme="ash"] .cell { border-color:#76684e80; background:repeating-linear-gradient(82deg,#ffffff09 0 2px,transparent 2px 11px),#c7ae7d; }
body[data-board-theme="ash"] .cell:nth-child(odd) { background:#d1bd91; }
body[data-board-theme="ash"] .cell.special { background:#9a8062; }
body[data-board-theme="slate"] .board-wrap { background:#171c1d; box-shadow:0 24px 55px #000b,inset 0 0 0 5px #4e5c5e; }
body[data-board-theme="slate"] .board { border-color:#111718; background:#435154; }
body[data-board-theme="slate"] .cell { border-color:#1c282a99; background:radial-gradient(circle at 20% 18%,#ffffff0d 0 1px,transparent 2px),linear-gradient(145deg,#566669,#48575a); background-size:17px 19px,auto; }
body[data-board-theme="slate"] .cell:nth-child(odd) { background:#48575a; }
body[data-board-theme="slate"] .cell.special { background:#29383b; }
.cell.special::before { content: "◆"; position: absolute; color: #c99b5c; font-size: calc(var(--cell) * .45); opacity: .65; }
.piece { z-index: 2; width: 91%; height: 91%; border-radius: 50%; pointer-events: none; background-repeat: no-repeat; background-position: center; background-size: contain; filter: drop-shadow(0 4px 3px #21170dbb); transition: transform .16s ease, filter .16s ease; }
.cell:hover .piece { transform: translateY(-2px); }
.piece.attacker { background-image: url("assets/pieces/attacker-viking.png"); }
.piece.defender { background-image: url("assets/pieces/defender-viking.png"); }
.piece.king { width: 98%; height: 98%; background-image: url("assets/pieces/king-viking.png"); filter: drop-shadow(0 0 4px #ffd46899) drop-shadow(0 4px 3px #21170dbb); }
.piece.king::after { content: none; }
.board.skin-attacker-bone .piece.attacker { background-image:url("assets/pieces/attacker-bone.png"); }
.board.skin-defender-bone .piece.defender { background-image:url("assets/pieces/defender-bone.png"); }
.board.skin-king-bone .piece.king { background-image:url("assets/pieces/king-bone.png"); }
.board.skin-attacker-bronze .piece.attacker { background-image:url("assets/pieces/attacker-bronze.png"); }
.board.skin-defender-bronze .piece.defender { background-image:url("assets/pieces/defender-bronze.png"); }
.board.skin-king-bronze .piece.king { background-image:url("assets/pieces/king-bronze.png"); }
.board.skin-attacker-stones .piece.attacker { background-image:url("assets/pieces/attacker-stones.png"); }
.board.skin-defender-stones .piece.defender { background-image:url("assets/pieces/defender-stones.png"); }
.board.skin-king-stones .piece.king { background-image:url("assets/pieces/king-stones.png"); }
.board.skin-attacker-birka .piece.attacker { background-image:url("assets/pieces/attacker-birka.png"); }
.board.skin-defender-birka .piece.defender { background-image:url("assets/pieces/defender-birka.png"); }
.board.skin-king-birka .piece.king { background-image:url("assets/pieces/king-birka.png"); }
.board.skin-attacker-classic .piece.attacker { background-image:none; background:radial-gradient(circle at 34% 26%,#6a766d,#263129 54%,#111814 78%); border:2px solid #8a948c; width:72%; height:72%; }
.board.skin-defender-classic .piece.defender { background-image:none; background:radial-gradient(circle at 34% 26%,#fff9eb,#d2c39e 55%,#918264 82%); border:2px solid #f4e9d0; width:72%; height:72%; }
.board.skin-king-classic .piece.king { background-image:none; background:radial-gradient(circle at 34% 26%,#f4d881,#bd7c24 58%,#6e3e18 82%); border:2px solid #ffe7a0; width:79%; height:79%; }
.board.skin-king-classic .piece.king::after { content:"♔"; color:#432811; font:700 calc(var(--cell)*.55)/1 Georgia,serif; display:grid; place-items:center; height:100%; }
.cell.selected .piece { transform: translateY(-4px) scale(1.04); filter: drop-shadow(0 0 6px #f2d77e) drop-shadow(0 5px 3px #21170dcc); }
.mobile-actions { display: none; }
dialog { width: min(500px, calc(100% - 28px)); color: var(--ink); border: 0; border-radius: 5px; padding: 28px; background: var(--bone); box-shadow: 0 30px 80px #000b; }
dialog::backdrop { background: #07100bc9; backdrop-filter: blur(4px); }
.dialog-head { display: flex; justify-content: space-between; align-items: start; margin-bottom: 22px; }
dialog .eyebrow { color: #756849; }
dialog .icon-button { color: var(--ink); border-color: #17201b45; font-size: 1.4rem; }
dialog .button.secondary { color: #241b10; background: #fff8e8; border-color: #7a6846; box-shadow: inset 0 0 0 1px #fff8; }
dialog .button.secondary:hover:not(:disabled) { background: #f3dfad; border-color: #8a6727; }
dialog ol { padding-left: 24px; line-height: 1.45; }
dialog li { margin: 13px 0; padding-left: 5px; }
.rule-note { padding: 12px; background: #bda97140; border-left: 3px solid var(--ember); line-height: 1.4; }
.full { width: 100%; margin-top: 10px; }
.result-dialog { text-align: center; }
.result-rune { color: var(--ember); font: 4rem Georgia, serif; line-height: 1; margin-bottom: 10px; }
.result-dialog p:not(.eyebrow) { line-height: 1.5; }
.online-notice { padding: 12px; margin-bottom: 14px; background: #a23b2f1c; border-left: 3px solid var(--ember); line-height: 1.4; }
.online-profile-hint { display: block; margin-top: 8px; color: #d8cba8; line-height: 1.35; }
.field { display: grid; gap: 6px; margin: 12px 0; font-size: .78rem; font-weight: 700; }
.field input,.join-row input { min-width: 0; padding: 11px; border: 1px solid #17201b55; background: #fffaf0; font: inherit; }
.field select { min-width:0; width:100%; padding:11px; border:1px solid #17201b55; background:#fffaf0; font:inherit; }
.signup-identity { margin:12px 0; padding:12px; border:1px solid #8a672755; background:#fff8e866; }
.signup-identity .field { margin:7px 0; }
.signup-identity small { display:block; margin-top:8px; color:#665c47; line-height:1.35; }
.dialog-actions,.join-row { display: flex; gap: 9px; }
.dialog-actions .button { flex: 1; }
.auth-actions { flex-direction: column; margin-top: 14px; }
.auth-actions .button { width: 100%; }
.account-welcome { display:flex; align-items:center; gap:13px; margin:-5px 0 12px; padding:12px; border-block:1px solid #75684944; }
.account-welcome h3 { margin:1px 0 0; font:500 1.55rem Georgia,"Times New Roman",serif; }
.account-welcome .eyebrow { margin:0; }
.account-rune { width:48px; height:48px; flex:none; display:grid; place-items:center; border:1px solid #8a672766; border-radius:50%; color:var(--ember); background:#fff8e8; font:2rem Georgia,serif; box-shadow:inset 0 0 0 4px #d4a94e18; }
.account-promise { margin:0 0 15px; color:#514937; line-height:1.5; }
.account-skip { margin-top:18px; padding-top:14px; border-top:1px solid #75684944; width:100%; }
.profile-strip { display: flex; align-items:center; justify-content: space-between; padding: 12px 0 18px; }
.profile-strip > span { display:flex; align-items:center; gap:8px; font-weight:800; }
.country-flag { font-style:normal; font-size:1.35rem; line-height:1; }
.armory { margin-bottom: 18px; padding: 14px; border: 1px solid #75684955; background: #fff9e966; }
.armory h3 { margin: 2px 0 8px; font: 700 1.35rem Georgia,serif; }
.profile-password { margin-top: 16px; padding-top: 10px; border-top: 1px solid #75684944; }
.skin-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin: 12px 0; }
.skin-grid label { display: grid; justify-items: center; gap: 5px; font-size: .68rem; font-weight: 800; text-align: center; }
.skin-grid select { width: 100%; padding: 7px 3px; border: 1px solid #75684955; background: #fffaf0; font-size: .68rem; }
.skin-swatch { width: 44px; height: 44px; display: block; border-radius: 50%; background-position: center; background-size: contain; background-repeat: no-repeat; filter: drop-shadow(0 2px 2px #0005); }
.attacker-swatch { background-image: url("assets/pieces/attacker-viking.png"); }
.defender-swatch { background-image: url("assets/pieces/defender-viking.png"); }
.king-swatch { background-image: url("assets/pieces/king-viking.png"); }
.skin-grid label:has(select option[value="classic"]:checked) .attacker-swatch { background-image:none; background:radial-gradient(circle at 34% 26%,#6a766d,#111814 78%); }
.skin-grid label:has(select option[value="classic"]:checked) .defender-swatch { background-image:none; background:radial-gradient(circle at 34% 26%,#fff9eb,#918264 82%); }
.skin-grid label:has(select option[value="classic"]:checked) .king-swatch { background-image:none; background:radial-gradient(circle at 34% 26%,#f4d881,#6e3e18 82%); }
.skin-grid label:has(select option[value="bone"]:checked) .attacker-swatch { background-image:url("assets/pieces/attacker-bone.png"); }
.skin-grid label:has(select option[value="bone"]:checked) .defender-swatch { background-image:url("assets/pieces/defender-bone.png"); }
.skin-grid label:has(select option[value="bone"]:checked) .king-swatch { background-image:url("assets/pieces/king-bone.png"); }
.skin-grid label:has(select option[value="bronze"]:checked) .attacker-swatch { background-image:url("assets/pieces/attacker-bronze.png"); }
.skin-grid label:has(select option[value="bronze"]:checked) .defender-swatch { background-image:url("assets/pieces/defender-bronze.png"); }
.skin-grid label:has(select option[value="bronze"]:checked) .king-swatch { background-image:url("assets/pieces/king-bronze.png"); }
.skin-grid label:has(select option[value="stones"]:checked) .attacker-swatch { background-image:url("assets/pieces/attacker-stones.png"); }
.skin-grid label:has(select option[value="stones"]:checked) .defender-swatch { background-image:url("assets/pieces/defender-stones.png"); }
.skin-grid label:has(select option[value="stones"]:checked) .king-swatch { background-image:url("assets/pieces/king-stones.png"); }
.skin-grid label:has(select option[value="birka"]:checked) .attacker-swatch { background-image:url("assets/pieces/attacker-birka.png"); }
.skin-grid label:has(select option[value="birka"]:checked) .defender-swatch { background-image:url("assets/pieces/defender-birka.png"); }
.skin-grid label:has(select option[value="birka"]:checked) .king-swatch { background-image:url("assets/pieces/king-birka.png"); }
.join-row { margin-top: 12px; }
.join-row input { flex: 1; text-transform: uppercase; letter-spacing: .2em; }
.matchmaking-panel { margin: 14px 0; padding: 14px; border: 1px solid #75684955; background: #fff9e966; }
.matchmaking-panel select { padding: 10px; border: 1px solid #17201b55; background: #fffaf0; font: inherit; }
.matchmaking-status { min-height: 2.7em; margin: 10px 0 0; color: #665c47; font-size: .82rem; line-height: 1.35; }
.online-entry { position: relative; }
.notification-badge { min-width: 19px; height: 19px; display: inline-grid; place-items: center; margin-left: 5px; padding: 0 5px; border-radius: 99px; background: #a23b2f; color: white; font-size: .66rem; }
.notification-badge[hidden] { display: none; }
.stats-strip { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; margin: 10px 0; }
.stats-strip span { display: grid; justify-items: center; padding: 9px 4px; border: 1px solid #75684955; background: #fff9e966; }
.stats-strip b { font: 700 1.08rem Georgia,serif; }.stats-strip small { color: #665c47; font-size: .62rem; text-align: center; }
.social-grid { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,.9fr); gap: 12px; }
.social-card { min-width: 0; padding: 14px; border: 1px solid #75684955; background: #fff9e966; }
.social-card h3,.matchmaking-panel h3 { margin: 2px 0 10px; }
.social-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.social-heading>span { color: #526656; font-size: .72rem; font-weight: 800; }
.player-search { display: flex; gap: 7px; margin-bottom: 10px; }
.player-search input { min-width: 0; flex: 1; }
.social-list { display: grid; gap: 7px; margin-top: 8px; }
.social-entry { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px; border: 1px solid #75684944; background: #fffaf0; }
.social-entry>span:first-child { min-width: 0; }
.social-entry b,.social-entry small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.social-entry small { color: #665c47; font-size: .69rem; }
.social-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.social-actions .button { min-height: 30px; padding: 5px 7px; font-size: .65rem; }
.empty-state { margin: 4px 0; color: #665c47; font-size: .78rem; }
.private-match { margin-top: 12px; padding: 10px 12px; border: 1px solid #75684955; }
.private-match summary { cursor: pointer; font-weight: 800; }
.private-match .full { margin-top: 10px; }
.match-history { margin-top: 12px; }
.history-result { font-weight: 800; }.history-result.win { color: #326440; }.history-result.loss { color: #8b3027; }
.sound-toggle { display: flex; align-items: center; gap: 5px; color: #665c47; font-size: .7rem; }
.toast-region { position: fixed; z-index: 120; right: max(14px,env(safe-area-inset-right)); bottom: max(14px,env(safe-area-inset-bottom)); width: min(360px,calc(100vw - 28px)); display: grid; gap: 8px; pointer-events: none; }
.match-intro { position: fixed; z-index: 115; left: 50%; top: max(18px,env(safe-area-inset-top)); width: min(620px,calc(100vw - 28px)); padding: 16px 18px; display: flex; align-items: center; gap: 13px; border: 1px solid #d4a94e; border-left: 5px solid #a23b2f; background: #101813ed; color: #f5ead1; box-shadow: 0 12px 34px #0009; transform: translateX(-50%); animation: toast-in .3s ease-out; pointer-events: none; }
.match-intro[hidden] { display: none; }.match-intro-rune { color: #d4a94e; font-size: 2rem; }.match-intro p { margin: 0; font: 700 clamp(.95rem,3vw,1.25rem) Georgia,serif; line-height: 1.35; }
.online-toast { padding: 13px 15px; border: 1px solid #d4a94e; border-left: 4px solid #a23b2f; background: #101813; color: #f5ead1; box-shadow: 0 10px 28px #0008; animation: toast-in .22s ease-out; }
.online-toast b,.online-toast small { display: block; }.online-toast small { margin-top: 3px; color: #c8c0ad; }
@keyframes toast-in { from { opacity:0; transform:translateY(8px); } }
.text-button { display: block; margin: 16px auto 0; border: 0; background: none; text-decoration: underline; cursor: pointer; color: #665c47; }
#authPanel .text-button + .text-button { margin-top: 9px; }
.auth-inline-help { margin: 7px 0 0; color: #665c47; font-size: .76rem; line-height: 1.35; text-align: center; }
.google-button { width: 100%; min-height: 48px; margin: 14px 0 12px; display: flex; align-items: center; justify-content: center; gap: 12px; border: 1px solid #8a806b; border-radius: 3px; background: #fff; color: #201b12; font: inherit; font-weight: 700; cursor: pointer; box-shadow: 0 2px 0 #604b2440; }
.google-button:hover { background: #fffaf0; border-color: #604b24; transform: translateY(-1px); }
.google-button:disabled { opacity: .62; cursor: wait; transform: none; }
.google-button svg { width: 21px; height: 21px; flex: none; }
.auth-divider { display: flex; align-items: center; gap: 10px; color: #756849; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.auth-divider::before,.auth-divider::after { content:""; height: 1px; flex: 1; background: #75684955; }
:focus-visible { outline: 3px solid #f2d77e; outline-offset: 3px; }

@media (max-width: 820px) {
  :root { --cell: 44px; }
  .app-shell { padding: 16px 12px max(18px, env(safe-area-inset-bottom)); }
  .masthead { padding-inline: 4px; }
  .masthead h1 { font-size:2.15rem; }.masthead-actions { gap:4px; }.icon-button { width:40px; height:40px; }
  .game-layout { grid-template-columns: minmax(0,1fr); gap: 14px; padding-top: 14px; justify-content:stretch; }
  .mobile-game-summary { display:grid; grid-row:1; gap:3px; padding:10px 12px; border:1px solid #e9dfc82b; background:#0c120f99; }
  .mobile-game-summary small { color:#b5ac98; }.mobile-game-summary strong { font:500 1.2rem Georgia,serif; }.mobile-game-summary span { color:#c8c0ad; font-size:.82rem; }
  .board-wrap { grid-column:1; grid-row:2; width:min(504px,100%); justify-self:center; padding:7px; transform:none; }
  .board-viewport { container-type:inline-size; overflow:hidden; }
  .board { width:fit-content; max-width:100%; --cell:min(44px,calc((100cqw - 4px)/11)); }
  .status-panel { grid-column:1; grid-row:3; }
  .status-panel { display: block; }
  .turn-card,.status-panel>.instruction { display:none; }
  .turn-marker { width: 28px; height: 28px; }
  .instruction { margin: 8px 2px 0; min-height: 0; font-size: .84rem; }
  .game-options { margin: 10px 0 0; }
  .scoreline, .desktop-actions { display: none; }
  .board-help { max-width:none; }
  .mobile-actions { display: flex; justify-self: center; width: min(100%, 430px); }
  .mobile-actions .button { flex: 1; }
  .setting-grid { grid-template-columns:1fr; }
  .setting-wide { grid-column:auto; }
  .social-grid { grid-template-columns: 1fr; }
  .social-entry { align-items: flex-start; }
  .stats-strip { grid-template-columns: repeat(2,1fr); }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }
@media (prefers-reduced-motion: reduce) { .death-mark.new-death-mark { animation:none; } }
@media (prefers-reduced-motion: reduce) { .piece.capture-striker { animation:none; } .piece.capture-victim,.capture-slash { display:none; } }
@media (prefers-reduced-motion: reduce) { .piece.move-arrival,.board.intro-active .piece,.board-wrap.capture-shake,.piece.king.king-danger,.result-dialog.cinematic,body::after { animation:none!important; } .capture-particle { display:none; } }
.sr-only { 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; }
.language-picker select { min-width:48px; min-height:44px; padding:0 8px; border:1px solid #d4a94e55; border-radius:8px; background:#0d1511; color:#ead9b4; font:600 .8rem Georgia,serif; cursor:pointer; }
.language-picker select:focus-visible { outline:2px solid #d4a94e; outline-offset:2px; }