*{box-sizing:border-box}body{margin:0;background:#f7f8f6;color:#202622;font:15px/1.5 system-ui}header,main{max-width:1200px;margin:auto;padding:20px}header{display:flex;align-items:center;justify-content:space-between}a{color:#27533b}h1{font-size:clamp(30px,5vw,44px);letter-spacing:-.04em;margin:0}p{color:#647068}button,input,select{font:600 13px system-ui;min-height:44px;border:1px solid #dfe4df;border-radius:5px;padding:10px}button{cursor:pointer}button:disabled{opacity:.5;cursor:default}input,select{width:100%;background:white;color:#202622}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #167dc2;outline-offset:2px}label{display:block;font-size:12px}.setup{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:24px 0}.setup>div{background:white;border:1px solid #dfe4df;padding:20px;border-radius:8px}.setup h2{margin-top:0;font-size:20px}.fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:15px}.row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.note{font-size:12px}#player{background:white;border:1px solid #dfe4df;border-radius:8px;padding:16px;margin:24px 0;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:10px}.topbar{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}#status{margin:0;font-size:14px;min-height:24px;font-weight:650}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:20px;min-height:0}.arena{height:630px;min-height:0;min-width:0;container-type:size;display:grid;place-items:center}#board{position:relative;width:min(100cqw,100cqh);height:min(100cqw,100cqh);background:#faf9f4;border-radius:8px;overflow:hidden;border:1px solid #dfe4df}#board>svg{display:block;width:100%;height:100%}#board .token{position:absolute;min-width:0;min-height:0;width:5.6%;height:5.6%;padding:0;border:2px solid white;border-radius:50%;transform:translate(-50%,-50%);color:white!important;background:var(--token)!important;font-size:clamp(9px,1.5vmin,15px);font-weight:800;box-shadow:0 1px 4px #0005;z-index:2;line-height:1}#board .token:disabled{opacity:1;cursor:default}#board .token.playable{outline:3px solid #202622;outline-offset:2px;cursor:pointer}#board .token:focus-visible{outline:4px solid #117dca;outline-offset:2px;z-index:3}aside{min-height:0;overflow:auto}.players{list-style:none;padding:0;margin:10px 0}.players li{padding:10px 8px;border:1px solid #dfe4df;border-left:5px solid var(--token);border-radius:5px;margin:7px 0;font-size:13px}.players li.turn{background:#edf2e9;font-weight:700}.players button{min-height:34px;font-size:11px;padding:5px 8px;margin:5px 5px 0 0}.dicebox{border:1px solid #dfe4df;padding:15px;border-radius:8px;text-align:center}#dice{font:800 44px/1.2 system-ui;display:block;margin-bottom:10px}#roll{width:100%}#turnText{font-size:13px}#code{font:750 24px ui-monospace,monospace;letter-spacing:.07em}#roomPanel{padding:14px;border:1px solid #dfe4df;border-radius:8px;margin:14px 0;background:white}.invite{display:grid;grid-template-columns:1fr auto;gap:8px;margin:10px 0}.invite label{min-width:0}#roomNotice,#connection{font-size:12px}.token-actions{display:flex;gap:5px;flex-wrap:wrap;margin-top:10px}.token-actions button{flex:1;min-width:70px}#skip{margin-top:10px}.bottom{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:11px;color:#647068}#rules{margin:30px 0}#rules h2{font-size:23px}footer{padding:24px 0;font-size:13px}[hidden]{display:none!important}html.table-full,html.table-full body{overflow:hidden}#player:is(:fullscreen,:-webkit-full-screen,.expanded){position:fixed;inset:0;z-index:100;margin:0;width:100%;height:100dvh;border:0;border-radius:0;padding:max(6px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));gap:6px}#player:is(:fullscreen,:-webkit-full-screen,.expanded) .arena{height:100%}#player:is(:fullscreen,:-webkit-full-screen,.expanded) .workspace{overflow:hidden}#player:is(:fullscreen,:-webkit-full-screen,.expanded) aside{overflow:auto;max-height:100%}@media(max-width:760px){main{padding:12px}.setup{grid-template-columns:1fr}.workspace{grid-template-columns:1fr}.arena{height:min(94vw,620px)}aside{overflow:visible}#player{padding:10px}.topbar strong{font-size:13px}.topbar button{font-size:11px;padding:8px}.players{display:grid;grid-template-columns:1fr 1fr;gap:5px}.players li{margin:0;padding:7px;font-size:11px}.dicebox{padding:10px;display:flex;align-items:center;justify-content:space-between;gap:12px}#dice{font-size:30px;margin:0}#roll{width:auto;flex:1}#turnText{font-size:12px}#player:is(:fullscreen,:-webkit-full-screen,.expanded) .workspace{grid-template-rows:minmax(0,1fr) minmax(100px,28%)}#player:is(:fullscreen,:-webkit-full-screen,.expanded) .note{display:none}}@media(max-height:500px) and (orientation:landscape){#player:is(:fullscreen,:-webkit-full-screen,.expanded) .workspace{grid-template-columns:minmax(0,1fr) 240px;grid-template-rows:minmax(0,1fr)}#player .topbar button{min-height:32px;padding:5px 10px}#player .bottom{display:none}#player:is(:fullscreen,:-webkit-full-screen,.expanded){grid-template-rows:auto auto minmax(0,1fr)}#status{font-size:12px;min-height:18px}.players{display:block}.players li{margin-bottom:5px}}

#roomCode{font:750 24px ui-monospace,monospace;letter-spacing:.07em}

.dice-readout{display:grid;justify-items:center;gap:8px}.dice-scene{width:86px;height:86px;perspective:420px;display:grid;place-items:center}.dice-cube{position:relative;width:52px;height:52px;transform-style:preserve-3d}.dice-face{position:absolute;inset:0;display:grid;place-items:center;font:800 30px/1 system-ui;color:#244331;background:#fffdf5;border:1px solid #c9cebf;border-radius:7px;backface-visibility:hidden;box-shadow:inset 0 0 10px #d7ddc9}.face-1{transform:translateZ(26px)}.face-6{transform:rotateY(180deg) translateZ(26px)}.face-2{transform:rotateY(90deg) translateZ(26px)}.face-5{transform:rotateY(-90deg) translateZ(26px)}.face-3{transform:rotateX(90deg) translateZ(26px)}.face-4{transform:rotateX(-90deg) translateZ(26px)}.dice-readout #dice{font:700 16px/1.3 system-ui;margin:0 0 8px}.dice-scene.rolling{filter:drop-shadow(0 5px 3px #20352420)}@media(max-width:760px){.dice-readout{gap:0}.dice-scene{width:72px;height:72px}.dice-readout #dice{margin:0;font-size:13px}}@media(prefers-reduced-motion:reduce){.dice-scene.rolling{filter:none}}