:root{color:#2b2420;--ink:#2b2420;--paper:#fff7e8;--cream:#fffaf0;--gold:#f3c653;background:#ece0cb;font-family:Fredoka,system-ui,sans-serif}*{box-sizing:border-box}body{min-width:280px;margin:0}button,input,select{font:inherit;color:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer;touch-action:manipulation}button:disabled{opacity:.5;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline-offset:3px;outline:3px solid #3f6fd6}::selection{color:#fffaf0;background:#3f6fd6}[hidden]{display:none!important}header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;display:flex}.brand{color:var(--ink);font-size:30px;font-weight:700;text-decoration:none}nav{flex-wrap:wrap;gap:8px;display:flex}.tool,.quiet,.primary{border:2px solid var(--ink);background:var(--cream);border-radius:12px;min-height:44px;padding:10px 14px;font-weight:600;box-shadow:0 3px 5px #2b242023}.tool:hover,.quiet:hover{background:#e6efdf}.primary{background:var(--gold)}main{width:min(100%,max(300px,100dvh - 240px));max-width:680px;margin:0 auto;padding:0 20px 20px}.player{justify-content:space-between;align-items:center;gap:12px;min-height:44px;font-size:17px;font-weight:600;display:flex;position:relative}#onlineActions{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}#reconnect,#watching{text-align:center;font-weight:500}#roomCode{letter-spacing:.12em;text-align:center;font-size:32px;font-weight:700}#openTables{gap:8px;margin-top:12px;display:grid}.player span+span{font-size:14px}time{font-variant-numeric:tabular-nums;text-align:center;border:2px solid #0000;border-radius:10px;min-width:72px;padding:6px 10px}time.active{background:#fffaf0;border-color:#236449}#boardMount{aspect-ratio:1;width:100%;position:relative}#c{width:100%;height:100%;display:block}.debug-board{border:9px solid #6e4a33;border-radius:8px;grid-template-rows:repeat(8,1fr);grid-template-columns:repeat(8,1fr);display:grid;position:absolute;inset:0;overflow:hidden;box-shadow:0 6px 12px #2b242030}.debug-board button{border:0;border-radius:0;min-width:0;padding:0;font-family:Segoe UI Symbol,DejaVu Sans,serif;font-size:clamp(24px,5.5vw,52px);line-height:1;position:relative}.debug-board .light{background:#e9dfc9}.debug-board .dark{background:#937052}.debug-board [data-side=w]{color:#fffaf0;text-shadow:1px 1px #2b2420,-1px -1px #2b2420,1px -1px #2b2420,-1px 1px #2b2420}.debug-board [data-side=b]{color:#2b2420}.debug-board .last{background:#c4b86f}.debug-board .picked{box-shadow:inset 0 0 0 4px #3f6fd6}.debug-board .target:after{content:"";background:#236449;border-radius:50%;width:22%;height:22%;position:absolute;top:39%;left:39%}.debug-board .target.capture:after{background:0 0;border:4px solid #236449;width:85%;height:85%;top:7.5%;left:7.5%}.debug-board .check{background:#da8a70}.debug-board button:focus-visible{outline-offset:-3px;z-index:1;outline:3px solid #3f6fd6}#turnText{text-align:center;margin:10px 0;font-weight:600}#notice{text-align:center;min-height:1.3em;margin:6px 0}.debug-note{text-align:center;margin:6px 0;font-size:12px}dialog{border:3px solid var(--ink);background:var(--paper);color:var(--ink);width:min(420px,100vw - 32px);max-height:calc(100dvh - 36px);box-shadow:0 0 0 4px #bd8551,0 0 0 6px var(--ink),0 12px 30px #2b242045;border-radius:20px;padding:24px}dialog::backdrop{background:#2b242080}h1{margin:12px 0;font-size:40px;line-height:1.05}h2{margin:0 0 14px;font-size:27px;line-height:1.15}p{line-height:1.45}.back{color:var(--ink);text-underline-offset:3px;font-size:14px}label{gap:6px;margin:14px 0;font-weight:500;display:grid}input:not([type=checkbox],[type=radio]),select{background:var(--cream);border:2px solid #a99a81;border-radius:10px;width:100%;min-height:44px;padding:10px}.check-option{align-items:center;gap:10px;min-height:44px;display:flex}.check-option input{width:20px;height:20px}dialog .primary,dialog .quiet{width:100%;margin-top:10px}.promotions{border:0;grid-template-columns:1fr 1fr;gap:8px;margin:0;padding:0;display:grid}.promotions label{align-items:center;gap:8px;min-height:44px;margin:0;display:flex}.sr-only{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}@media (width<=520px){header{gap:10px;padding:12px}nav{gap:6px}.tool{padding:8px 10px;font-size:13px}main{width:100%;padding:0 12px 12px}.debug-board{border-width:6px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}.music-panel{z-index:20;background:#fff7e8;border:2.5px solid #2b2420;border-radius:16px;gap:10px;width:220px;padding:12px;display:grid;position:fixed;top:64px;right:16px;box-shadow:0 4px #2b2420}.music-panel[hidden]{display:none}.vol{gap:4px;font-size:13px;font-weight:600;display:grid}.vol input{accent-color:#e9b43c;width:100%}.credit{opacity:.8;font-size:13px}html:has(body.midnight){background:#181b30}body.midnight,body.midnight .brand,body.midnight .player,body.midnight #turnText,body.midnight #notice{color:#eef0ff}body.midnight .tool,body.midnight dialog,body.midnight .music-panel{color:#2b2420}#boardMount{aspect-ratio:auto;z-index:0;width:auto;position:fixed;inset:0}header{z-index:2;position:relative}main{z-index:1;width:100%;max-width:none;padding:0 12px max(14px,env(safe-area-inset-bottom));pointer-events:none;flex-direction:column;height:calc(100dvh - 76px);margin:0;display:flex;position:relative}main>*,main>#boardMount{pointer-events:auto}#self{margin-top:auto}.player{border:2px solid var(--ink);width:min(100%,520px);box-shadow:0 3px 0 var(--ink);color:var(--ink);background:#fff7e8e6;border-radius:99px;align-self:center;padding:6px 14px}#turnText,#notice{border:2px solid var(--ink);background:#fff7e8e6;border-radius:99px;align-self:center;margin:8px 0 0;padding:6px 14px}#notice:empty{display:none}body.midnight .player,body.midnight #turnText,body.midnight #notice{color:#eef0ff;background:#181b30d9;border-color:#5b6390;box-shadow:0 3px #0b0d18}@media (width<=520px){main{height:calc(100dvh - 104px)}}#moveList{scrollbar-width:none;white-space:nowrap;color:#2b2420b0;background:#fff7e8b3;border-radius:99px;align-self:center;gap:10px;width:min(100%,520px);margin:8px 0 0;padding:4px 14px;font:600 13px/1.6 ui-monospace,monospace;list-style:none;display:flex;overflow-x:auto}#moveList::-webkit-scrollbar{display:none}#moveList:empty{display:none}#moveList li{flex:none}#moveList .latest{color:var(--ink)}body.midnight #moveList{color:#eef0ff99;background:#181b30b3}body.midnight #moveList .latest{color:#f0cf6e}body{flex-direction:column;height:100dvh;display:flex;overflow:hidden}main{flex:1;height:auto;min-height:0}@media (width<=520px){header{flex-wrap:nowrap;padding:10px 12px}nav{scrollbar-width:none;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;padding-bottom:4px;overflow-x:auto}nav::-webkit-scrollbar{display:none}nav .tool{flex:none}main{height:auto}}:root{--navy:#2c3a63;--ivory:#f1e7d2;--gilt:#d8b25c;--walnut:#5d3c28;--maple:#e6d5b2;--soft:0 1px 0 #0005,0 2px 4px #0003}body.midnight .brand{color:var(--ivory);text-shadow:var(--soft)}nav{align-items:center;gap:6px}nav .tool{color:#0000;width:46px;height:46px;min-height:0;box-shadow:none;background:radial-gradient(circle at 50% 35%,#45558a,var(--navy) 70%);filter:drop-shadow(0 4px 5px #0007);border:0;border-radius:50%;padding:0;font-size:0;transition:transform 80ms}nav .tool:hover{background:radial-gradient(circle at 50% 35%,#45558a,var(--navy) 70%)}nav .tool:active{transform:translateY(2px)scale(.94)}.baked nav .tool{background:var(--art) center/contain no-repeat}#pause{--art:var(--cap-pause)}#pause.on{--art:var(--cap-play)}#undo{--art:var(--cap-undo)}#flip{--art:var(--cap-flip)}#sound{--art:var(--cap-sound)}#sound[aria-pressed=false]{--art:var(--cap-mute)}#music{--art:var(--cap-music)}#music.off{opacity:.6}#help{--art:var(--cap-help)}#setupButton{--art:var(--cap-board)}#roomButton{--art:var(--cap-room)}#look{--art:var(--cap-sun)}body.midnight #look{--art:var(--cap-moon)}@media (width<=520px){nav .tool{width:40px;height:40px}}.primary,.quiet,.music-panel .tool{border:0;border-radius:99px;min-height:48px;font-weight:700;transition:transform 80ms;box-shadow:0 4px 8px #0004}.primary{color:#3a2a0e;text-shadow:0 1px #fff6;background:linear-gradient(#ecd08a,#c9a04a)}.quiet,.music-panel .tool{color:var(--ivory);text-shadow:var(--soft);background:linear-gradient(#45558a,var(--navy))}.primary:hover{background:linear-gradient(#ecd08a,#c9a04a)}.quiet:hover,.music-panel .tool:hover{background:linear-gradient(#45558a,var(--navy))}.primary:active,.quiet:active,.music-panel .tool:active{transform:translateY(2px)scale(.98)}.baked :is(.primary,.quiet,.music-panel .tool){box-shadow:none;filter:drop-shadow(0 4px 5px #0005);border-style:solid;border-image:var(--pill) 45% 16% fill/24px 26px stretch;background:0 0;border-radius:0}.primary{--pill:var(--pill-gold)}.quiet,.music-panel .tool{--pill:var(--pill-navy)}.player,body.midnight .player{color:var(--ivory);text-shadow:var(--soft);box-shadow:inset 0 0 0 3px var(--walnut),inset 0 0 0 4.5px var(--gilt),0 4px 8px #0006;background:linear-gradient(#4a3020,#3d2619);border:0;padding:6px 18px}body.baked .player{box-shadow:none;filter:drop-shadow(0 4px 5px #0006);border-style:solid;border-image:var(--plate) 45% 16% fill/20px 24px stretch;background:0 0;border-radius:0}.player span+span{opacity:.75}time{color:var(--ivory);border:0}time.active{color:#3a2a0e;text-shadow:0 1px #fff6;background:linear-gradient(#ecd08a,#c9a04a);box-shadow:0 2px 3px #0005}time.low{color:#ffb4a0}time.active.low{color:#7a1f1a}#turnText,#notice,body.midnight #turnText,body.midnight #notice{color:var(--ivory);text-shadow:var(--soft);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#141726c4;border:0;box-shadow:0 4px 8px #0004}body:not(.midnight) :is(#turnText,#notice){background:#2c3a63d9}#moveList,body.midnight #moveList{color:#f1e7d2a8;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#141726a8}#moveList .latest,body.midnight #moveList .latest{color:#f0cf6e}dialog,.music-panel,body.midnight :is(dialog,.music-panel){color:var(--ink);background:radial-gradient(ellipse at 50% 35%,#f1e5c9,var(--maple) 80%);box-shadow:inset 0 0 0 7px var(--walnut),inset 0 0 0 9px var(--gilt),0 6px 0 #3d2619,0 18px 36px #0009;border:0}dialog{padding:30px}dialog[open]{animation:.32s cubic-bezier(.2,1.4,.4,1) set}@keyframes set{0%{opacity:0;transform:translateY(14px)scale(.95)}}dialog::backdrop{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#0c0e20a0}dialog h1,dialog h2{color:var(--navy);text-align:center}#resultTitle{color:var(--ivory);text-shadow:0 2px #151c33;background:linear-gradient(#45558a,var(--navy) 60%,#1d2645);clip-path:polygon(0 0,100% 0,94% 50%,100% 100%,0 100%,6% 50%);margin:0 auto 14px;padding:6px 34px 9px;display:table}.back{color:var(--navy)}input:not([type=checkbox],[type=radio]),select{background:#fbf4e4;border:0;border-radius:12px;box-shadow:inset 0 0 0 1.5px #b79a68,inset 0 2px 4px #5d3c2833}select{appearance:none;background:#fbf4e4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%232c3a63' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 10px center/18px no-repeat;padding-right:36px}input{accent-color:var(--navy)}.music-panel{padding:16px}.vol input{accent-color:#c9a04a}.promotions label{background:#fbf4e4;border-radius:12px;padding:0 12px;box-shadow:inset 0 0 0 1.5px #b79a68}.promotions label:has(:checked){background:#ecd08a66;box-shadow:inset 0 0 0 2.5px #c9a04a}main>:not(#boardMount){z-index:1;position:relative}