@import url('./fonts/fonts.css');
:root{color-scheme:dark;--bg:#101413;--ink:#f0ede3;--muted:#b8c0b6;--line:#353e35;--coral:#efa394;--font:'Barlow','Segoe UI',sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 var(--font)}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;touch-action:manipulation;color:inherit}button:disabled{cursor:default;opacity:.45}a{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--coral);outline-offset:4px}button{transition:background 160ms,color 160ms}button:active:not(:disabled){translate:0 1px}h1,h2,p{margin:0}[hidden]{display:none!important}.skip-link{position:fixed;left:16px;top:-70px;background:var(--coral);color:#231a17;padding:12px;z-index:20}.skip-link:focus{top:8px}
.topbar{max-width:1400px;padding:0 32px;height:72px;display:flex;align-items:center;gap:22px;margin:auto;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:9px;text-decoration:none;font-size:22px;font-weight:600;letter-spacing:-.6px}.brand img{width:26px;height:26px}.divider{height:24px;width:1px;background:var(--line)}h1{font-size:20px;font-weight:500}.topbar nav{margin-left:auto;display:flex;align-items:center;gap:22px}.topbar nav a,.topbar nav button{font-size:14px;text-decoration:none}.topbar nav>button:not(.outline){border:0;background:none;padding:10px 0;color:var(--muted)}.topbar nav>a{color:var(--muted)}.outline{border:1px solid #677061;background:transparent;border-radius:5px;padding:9px 16px;min-height:42px}.outline:hover:not(:disabled){background:#293027}
.game-layout{display:grid;grid-template-columns:minmax(0,560px) minmax(260px,310px);align-items:center;justify-content:center;gap:64px;max-width:1180px;margin:32px auto;padding:0 30px}.board-side{min-width:0}.board-caption{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;font-size:12px;color:var(--muted)}.board-caption>span:first-child{font-size:10px;letter-spacing:2px;color:#d3cbb9}.board-frame{position:relative;padding:22px 10px 10px 22px;border:1px solid #6b6c56;border-bottom-width:5px;border-radius:8px;background:#383e30;box-shadow:0 16px 35px #0006,inset 0 0 0 4px #252e24,inset 0 0 0 5px #62664d66}.letters{position:absolute;top:4px;left:22px;right:10px;display:grid;grid-template-columns:repeat(8,1fr);text-align:center;font-size:10px;color:#c2c4ad}.numbers{position:absolute;top:22px;bottom:10px;left:5px;display:grid;grid-template-rows:repeat(8,1fr);align-items:center;font-size:10px;color:#c2c4ad}.board{display:grid;grid-template-rows:repeat(8,1fr);aspect-ratio:1;border:1px solid #10190f;background:#344b3b;box-shadow:inset 0 0 20px #101b1455}.board-row{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));min-height:0}.cell{position:relative;border:0;border-right:1px solid #131f1766;border-bottom:1px solid #131f1766;background:transparent;padding:0;perspective:400px;min-width:0;min-height:0}.board-row:nth-child(even) .cell:nth-child(odd),.board-row:nth-child(odd) .cell:nth-child(even){background:#ffffff03}.cell[aria-disabled="true"]{cursor:default}.cell:focus-visible{outline-offset:-3px;z-index:2}.cell:active{translate:none!important}.cell.legal:hover,.cell.preview{background:#ffffff0b}.cell.last:after{content:'';position:absolute;width:10%;height:10%;border-radius:50%;background:var(--coral);left:45%;top:45%;box-shadow:0 0 0 2px #3b3525;pointer-events:none}.move-dot{position:absolute;inset:42%;border-radius:50%;background:#dfc7ac;opacity:0;pointer-events:none;box-shadow:0 0 0 4px #dfc7ac0a}.show-moves .legal .move-dot{opacity:.65}.cell.legal.preview .move-dot{opacity:1}.cell.recommended{outline:2px solid var(--coral);outline-offset:-5px}.cell.will-turn:before{content:'';position:absolute;inset:8%;border:2px solid var(--coral);border-radius:50%;z-index:3;pointer-events:none}
.disc{position:absolute;inset:12%;display:block;transform-style:preserve-3d;pointer-events:none}.disc.white{transform:rotateY(180deg)}.disc-face{position:absolute;inset:0;border-radius:50%;backface-visibility:hidden;-webkit-backface-visibility:hidden}.disc-face.front,.counter-disc.black{background:radial-gradient(circle at 35% 25%,#505550 0%,#262d29 42%,#111815 90%);border:1px solid #0a100c;box-shadow:inset 0 1px 2px #abb7a333,inset 0 -3px 0 #080d09,0 3px 2px #0a130a80}.disc-face.back,.counter-disc.white{background:radial-gradient(circle at 35% 22%,#fffcf0 0%,#ece6d5 60%,#c2bba7 100%);border:1px solid #e1d8bf;box-shadow:inset 0 2px 2px #fff9,inset 0 -3px 0 #9c9584,0 3px 3px #0a130a66}.disc-face.back{transform:rotateY(180deg)}.disc.flip.black{--from:180deg;--to:360deg}.disc.flip.white{--from:0deg;--to:180deg}.disc.flip{animation:disc-turn 480ms cubic-bezier(.45,0,.2,1) var(--delay) both}.disc.placed{animation:disc-place 220ms ease-out both}.disc.white.placed{--pose:180deg}.disc.black.placed{--pose:0deg}@keyframes disc-turn{
  0%{transform:translate3d(0,0,0) rotateY(var(--from))}
  25%{transform:translate3d(0,-12%,12px) rotateX(-8deg) rotateY(calc(var(--from) + 28deg))}
  58%{transform:translate3d(0,-22%,24px) rotateX(-5deg) rotateY(calc(var(--from) + 115deg))}
  84%{transform:translate3d(0,1%,0) rotateY(var(--to)) scale(.985)}
  100%{transform:translate3d(0,0,0) rotateY(var(--to)) scale(1)}
}@keyframes disc-place{from{opacity:0;transform:rotateY(var(--pose)) scale(.78);translate:0 -6px}to{opacity:1;transform:rotateY(var(--pose)) scale(1);translate:0 0}}
.board-tools{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:18px;font-size:13px;color:var(--muted)}.board-tools label{display:flex;gap:8px;align-items:center;cursor:pointer;white-space:nowrap}.board-tools input{accent-color:var(--coral);width:16px;height:16px;margin:0}#last-move{text-align:right}.game-side{align-self:stretch;display:flex;flex-direction:column;padding:32px 0 12px}.scoreboard{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line);gap:20px;padding-bottom:22px}.player{position:relative;display:grid;grid-template-columns:26px 1fr;column-gap:9px;align-items:center;border-top:2px solid transparent;padding-top:12px}.player.active{border-color:var(--coral)}.counter-disc{display:block;width:24px;height:24px;border-radius:50%}.player-name{font-size:16px;font-weight:500}.player small{display:block;color:var(--muted);font-size:12px}.player strong{grid-column:1/-1;font:normal 52px/1 Georgia,serif;letter-spacing:-2px;margin-top:14px}.turn-panel{padding:30px 0 24px}.eyebrow{font-size:11px;letter-spacing:1.6px;color:var(--coral);font-weight:500}.turn-panel h2{font:italic 34px/1.15 Georgia,serif;letter-spacing:-.7px;margin:10px 0 14px;text-wrap:balance}.turn-panel>p:not(.eyebrow){color:#cbd0c5;font-size:16px;line-height:1.55}.turn-panel .pass-note{color:#f1b8a5!important;font-size:14px!important;margin-top:12px;padding-left:12px;border-left:2px solid #c78e76}.actions{display:flex;gap:12px}.primary{display:flex;align-items:center;justify-content:space-between;gap:20px;border:1px solid #f1b39e;border-bottom-color:#956b59;background:#e4a18b;color:#2d2018;border-radius:5px;padding:12px 16px;min-height:46px;font-weight:600;box-shadow:0 2px 0 #6c4b3b}.primary:hover:not(:disabled){background:#efb59f}.actions .primary{flex:1}.table-note{margin-top:auto;padding-top:28px;display:flex;gap:14px;align-items:center;color:#b8bbaa}.table-note p{font:italic 17px/1.4 Georgia,serif}.note-mark{font-size:28px;color:#d7c9ae}.save-status{font-size:12px;color:#a6b09f;margin-top:24px}footer{max-width:1180px;margin:20px auto 0;padding:18px 30px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;font-size:12px;color:var(--muted)}footer a{text-decoration:none}
dialog{position:fixed;width:min(460px,calc(100% - 28px));max-height:90dvh;overflow:auto;border:1px solid #777c68;border-radius:8px;background:#252c23;color:var(--ink);padding:30px;box-shadow:0 20px 80px #0008}dialog::backdrop{background:#080d0bd9;backdrop-filter:blur(4px)}dialog h2{font:italic 34px/1.2 Georgia,serif;margin:10px 0 24px}.close{position:absolute;right:12px;top:10px;width:34px;height:34px;background:none;border:0;font-size:26px;color:var(--muted)}fieldset{border:0;padding:0;margin:0 0 20px}legend{font-size:14px;margin-bottom:10px}.option{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #57614f;border-radius:5px;margin:8px 0;cursor:pointer}.option:has(input:checked){border-color:var(--coral);background:#efa39409}.option input{accent-color:var(--coral)}.option strong{font-size:16px;font-weight:500}.option small{display:block;font-size:13px;color:var(--muted);margin-top:3px}.field{display:block;font-size:14px;margin:16px 0}.field select{display:block;width:100%;margin-top:6px;background:#141c15;color:var(--ink);padding:10px;border:1px solid #68725d;border-radius:4px}.setup-note{font-size:13px;color:var(--muted);margin:16px 0}.wide{width:100%}.rules-list{padding-left:20px;font-size:16px;line-height:1.6}.rules-list li{padding-left:5px;margin:14px 0}.rules-list strong{color:#f4d1ba}.tip{border-block:1px solid #59604f;padding:14px 0;font:italic 17px/1.5 Georgia,serif}
@media(min-width:851px) and (max-height:800px){.topbar{height:60px}.game-layout{grid-template-columns:minmax(0,min(540px,calc(100dvh - 220px))) minmax(240px,290px);margin-top:20px;margin-bottom:16px;gap:44px}.game-side{padding-top:10px}.turn-panel{padding-top:22px}.player strong{font-size:44px}.table-note{padding-top:16px}.save-status{margin-top:16px}footer{margin-top:10px;padding-block:12px}}
@media(max-width:850px){.game-layout{grid-template-columns:minmax(0,560px);gap:20px;max-width:620px;padding:0 22px;margin-top:20px}.game-side{display:contents}.scoreboard{grid-row:1;grid-template-columns:1fr 1fr;gap:28px;padding-bottom:12px}.player{grid-template-columns:24px 1fr auto;padding-top:8px}.player strong{grid-column:3;grid-row:1;margin:0;font-size:34px}.board-side{grid-row:3}.turn-panel{grid-row:2;padding:0}.turn-panel .eyebrow{display:none}.turn-panel h2{font-size:26px;margin:0 0 5px}.turn-panel>p:not(.eyebrow){font-size:15px}.turn-panel .pass-note{margin-top:6px}.board-caption{display:none}.actions{grid-row:4;max-width:400px;width:100%;justify-self:center}.table-note{display:none}.save-status{margin:0;text-align:center}.board-tools{margin-top:12px}footer{margin-top:18px}.topbar{height:60px;padding:0 20px;gap:14px}.brand span{display:none}.topbar nav{gap:16px}.topbar nav a{display:none}}
@media(max-width:420px){.topbar{padding-inline:14px;gap:10px}.topbar .divider{display:none}.topbar nav{gap:12px}.topbar nav button{font-size:12px}.topbar .outline{padding:7px 10px}h1{font-size:19px}.game-layout{padding:0 12px;margin-top:12px;gap:12px}.board-frame{padding:19px 6px 6px 19px}.letters{left:19px;right:6px;top:2px}.numbers{top:19px;bottom:6px;left:4px}.board-tools{font-size:12px;gap:8px}.board-tools input{width:14px;height:14px}.player-name{font-size:15px}.player strong{font-size:30px}.turn-panel h2{font-size:24px}.turn-panel>p:not(.eyebrow){font-size:14px}.actions .primary,.actions .outline{font-size:14px;min-height:44px}footer{padding:14px;font-size:11px}.board-caption{font-size:11px}dialog{padding:26px 22px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Moulded plastic: a broad softbox reflection, a fine rim and a grounded edge. */
.disc{inset:10%}
.disc-face.front,.counter-disc.black{
  background:radial-gradient(ellipse 62% 30% at 36% 14%,#d9e1e68c 0%,#a5b1b72e 42%,transparent 76%),linear-gradient(155deg,#555f65 0%,#252d32 28%,#101619 58%,#080b0d 100%);
  border:1px solid #161c20;
  box-shadow:inset 0 1px 1px #edf6ff80,inset 1px 0 1px #d7e5eb30,inset 0 -3px 1px #000b,0 2px 0 #030505,0 4px 3px #050a0799,0 7px 10px #07100866;
}
.disc-face.back,.counter-disc.white{
  background:radial-gradient(ellipse 65% 33% at 35% 15%,#fff 0%,#ffffffb3 42%,transparent 78%),linear-gradient(150deg,#fffef5 0%,#f4f4e9 36%,#dedfd5 72%,#b8bdb6 100%);
  border:1px solid #d8dcd4;
  box-shadow:inset 0 1px 1px #fff,inset 1px 0 2px #fff,inset 0 -3px 1px #818b8170,0 2px 0 #8b9389,0 4px 3px #050a0780,0 7px 10px #07100855;
}
.disc-face:before{content:'';position:absolute;inset:5.5%;border-radius:50%;border:1px solid #ffffff24;border-top-color:#ffffff70;border-bottom-color:#00000030;pointer-events:none}
.disc-face:after{content:'';position:absolute;left:20%;top:9%;width:47%;height:13%;border-radius:50%;transform:rotate(-23deg);background:linear-gradient(180deg,#ffffffa8,#ffffff00);opacity:.7;pointer-events:none}
.disc-face.back:before{border-color:#ffffff65;border-bottom-color:#89958c35}.disc-face.back:after{opacity:.9}
.disc-face.front{transform:translateZ(1px)}.disc-face.back{transform:rotateY(180deg) translateZ(1px)}

/* The square board gets the available height; the controls occupy a narrow rail. */
@media(min-width:851px), (min-width:600px) and (orientation:landscape){
  .topbar{height:56px;max-width:none;padding-inline:24px}
  .game-layout{max-width:none;grid-template-columns:minmax(0,min(calc(100dvh - 114px),calc(100vw - 340px))) minmax(240px,280px);gap:28px;margin:12px auto;padding:0 16px;align-items:center}
  .game-side{display:flex;flex-direction:column;padding:4px 0;align-self:stretch}
  .board-side{grid-row:auto}
  .board-tools{margin-top:10px}
  .board-caption{display:flex;margin:0 0 18px;font-size:13px}
  .board-caption>span:first-child{display:none}
  .scoreboard{padding-bottom:18px}
  .turn-panel{padding:24px 0}
  .table-note{display:none}
  .save-status{margin-top:auto;padding-top:22px}
}
@media(min-width:851px) and (max-height:650px), (min-width:600px) and (max-height:650px) and (orientation:landscape){
  .board-caption{margin-bottom:8px}.player{padding-top:7px}.player strong{font-size:34px;margin-top:8px}.scoreboard{padding-bottom:12px}.turn-panel{padding:14px 0}.turn-panel h2{font-size:28px;margin:6px 0 10px}.turn-panel>p:not(.eyebrow){font-size:15px}.save-status{padding-top:12px}
}
@media(max-width:850px) and (orientation:portrait), (max-width:599px){
  .game-layout{max-width:none;grid-template-columns:minmax(0,1fr);padding-inline:8px}
  .board-caption{display:none}
  .board-side{max-width:100%;width:100%}
  .topbar{height:56px}
}

@media(min-width:600px) and (max-height:500px) and (orientation:landscape){
  .board-caption{margin-bottom:4px}.scoreboard{padding-bottom:8px;gap:16px}.player{grid-template-columns:24px 1fr auto}.player strong{grid-column:3;grid-row:1;font-size:30px;margin:0}.turn-panel{padding:12px 0}.turn-panel .eyebrow{display:none}.turn-panel h2{font-size:26px;margin:0 0 6px}.save-status{padding-top:10px}.actions{gap:8px}.actions .primary{padding:10px 12px}.board-tools{font-size:12px}
}