:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color-scheme:dark;--bg:#0f172a;--panel:#111827;--line:#334155;--ink:#f8fafc;--muted:#94a3b8;--accent:#e2e8f0}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink)}body{padding:10px;overflow:auto}.app{max-width:1180px;margin:auto}header{height:48px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}h1{font-size:1.28rem;margin:0;text-align:center}.back{color:var(--ink);text-decoration:none;font-weight:750}.ghost{justify-self:end;width:auto}.shell{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:12px;align-items:start}.boardWrap{background:var(--panel);padding:8px;border-radius:16px;min-width:0}canvas{display:block;width:100%;height:auto;border-radius:10px;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:12px;display:grid;gap:9px}.statusCard{min-height:62px}.turn{font-size:1.08rem;font-weight:850}.sub{font-size:.8rem;color:var(--muted);line-height:1.35;margin-top:4px}.diceRow{display:flex;justify-content:center;gap:12px}.die{width:54px;height:54px;border-radius:10px;background:#f8fafc;color:#111827;display:grid;place-items:center;font-size:1.65rem;font-weight:900;box-shadow:inset 0 0 0 2px #cbd5e1}button,select{width:100%;padding:10px;border-radius:10px;border:1px solid var(--line);background:#253247;color:var(--ink);font:inherit;font-weight:750}button{cursor:pointer}.primary{background:#e5e7eb;color:#111827}button:disabled{opacity:.42;cursor:not-allowed}label{font-size:.74rem;color:var(--muted)}select{margin-top:5px} .legend,.score{font-size:.78rem;color:#cbd5e1;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.dot{display:inline-block;width:12px;height:12px;border-radius:50%;vertical-align:-1px;margin-right:4px}.dot.white{background:#f8fafc;border:1px solid #64748b}.dot.black{background:#111827;border:1px solid #cbd5e1}details{margin-top:10px;background:var(--panel);border-radius:14px;padding:10px 12px}summary{cursor:pointer;font-weight:750}.helpText{color:#cbd5e1;font-size:.81rem;line-height:1.5;padding-top:8px}.helpText a{color:#fff}@media(max-width:820px){body{overflow:hidden;padding:6px}.app{height:100dvh;display:flex;flex-direction:column}header{height:42px;flex:0 0 auto}h1{font-size:1.05rem}.shell{flex:1;min-height:0;grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;gap:6px}.boardWrap{min-height:0;padding:5px;display:grid;place-items:center}.boardWrap canvas{width:auto;height:auto;max-width:100%;max-height:100%}.panel{grid-template-columns:1.35fr .75fr 1fr 1fr 1fr;gap:5px;padding:7px;align-items:center}.statusCard{min-height:0}.turn{font-size:.9rem}.sub{display:none}.diceRow{gap:4px}.die{width:34px;height:34px;font-size:1.1rem;border-radius:7px}.panel button{padding:8px 5px;font-size:.78rem}.panel label,.legend,.score{display:none}details{position:fixed;left:8px;right:8px;bottom:8px;z-index:20;max-height:72vh;overflow:auto;box-shadow:0 8px 30px #000}details:not([open]){display:none}}@media(max-width:560px) and (orientation:portrait){header{grid-template-columns:auto 1fr auto}.shell{grid-template-rows:minmax(0,1fr) auto}.panel{grid-template-columns:1.3fr .8fr 1fr 1fr}.boardWrap canvas{max-height:calc(100dvh - 118px)}}@media(orientation:landscape) and (max-height:650px){body{overflow:hidden}.app{height:100dvh;display:flex;flex-direction:column}header{height:36px}.shell{flex:1;min-height:0;grid-template-columns:minmax(0,1fr) 190px}.boardWrap{min-height:0;display:grid;place-items:center}.boardWrap canvas{width:auto;max-width:100%;height:100%;max-height:calc(100dvh - 48px)}.panel{padding:7px;gap:5px}.statusCard{min-height:42px}.turn{font-size:.9rem}.sub{font-size:.68rem}.die{width:38px;height:38px;font-size:1.15rem}.panel button,.panel select{padding:7px;font-size:.75rem}.legend,.score{font-size:.67rem}details{position:fixed;left:8px;right:8px;bottom:8px;z-index:20;max-height:80vh;overflow:auto}details:not([open]){display:none}}

.srOnly{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}.modeGroup{display:grid;gap:5px}.controlLabel{font-size:.74rem;color:var(--muted)}.modeButtons{display:grid;grid-template-columns:1fr 1fr;gap:5px}.modeButtons button{padding:8px 5px;font-size:.72rem}.modeButtons button.active{background:#e5e7eb;color:#111827;border-color:#f8fafc}.modeButtons button:not(.active){background:#253247;color:var(--ink)}
@media(max-width:820px){.panel .modeGroup{display:grid;grid-column:1 / -1;grid-template-columns:auto 1fr;align-items:center;gap:6px}.panel .controlLabel{font-size:.68rem}.panel .modeButtons{display:grid;grid-template-columns:1fr 1fr}.panel .modeButtons button{padding:6px 4px;font-size:.7rem}.panel #difficultyLabel{display:block;grid-column:1 / -1;font-size:.68rem}.panel #difficultyLabel select{margin-top:2px;padding:6px;font-size:.72rem}}
@media(max-width:560px) and (orientation:portrait){.panel{grid-template-columns:1.3fr .8fr 1fr 1fr}.panel .modeGroup{grid-column:1 / 3}.panel #difficultyLabel{grid-column:3 / 5}.panel .controlLabel{display:none}.panel .modeGroup{display:block}.panel .modeButtons button{font-size:.66rem}}