:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#f4f2e8;background:#09110f;--safe-top:0px;--safe-right:0px;--safe-bottom:0px;--safe-left:0px}
*{box-sizing:border-box}html,body,#app{margin:0;width:100%;height:100%;overflow:hidden}body{background:#09110f}button,input{font:inherit}
#app{position:relative;background:#0b1714;color:#f8f5e8;touch-action:none;user-select:none}
#app,#app *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#app :is(input:not([type=range]),textarea,[contenteditable=true],[contenteditable=""],[contenteditable=plaintext-only]){-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
#lane{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.hidden{display:none!important}.hud{position:absolute;left:calc(14px + var(--safe-left));right:calc(14px + var(--safe-right));top:calc(14px + var(--safe-top));z-index:10;display:flex;align-items:flex-start;justify-content:space-between;pointer-events:none}
.score-pill,.turn-pill,.hud-actions,.throw-hud,.camera-return{backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);background:rgba(8,27,22,.72);border:1px solid rgba(220,231,193,.16);box-shadow:0 12px 38px rgba(0,0,0,.2)}
.score-pill{min-width:132px;border-radius:18px;padding:10px 12px;display:grid;grid-template-columns:auto 1fr;grid-template-areas:"eye eye" "score frame";column-gap:10px}
.score-pill .eyebrow{grid-area:eye;font-size:10px;letter-spacing:.18em;color:#bfd08b}.score-pill strong{grid-area:score;font-family:Georgia,serif;font-size:27px;line-height:1}.score-pill small{grid-area:frame;align-self:end;font-size:10px;color:#b9c7be}
.turn-pill{align-self:center;border-radius:999px;padding:8px 12px;font-size:11px;display:flex;gap:7px;align-items:center}.turn-pill .dot{width:7px;height:7px;border-radius:50%;background:#cfe29c;box-shadow:0 0 12px #cfe29c}
.hud-actions{pointer-events:auto;display:flex;gap:6px;padding:5px;border-radius:16px}.icon-btn{width:44px;height:44px;border-radius:12px;border:1px solid rgba(236,241,211,.13);background:rgba(255,255,255,.04);color:#f5f4e9;cursor:pointer}.icon-btn:active{transform:scale(.96)}
.throw-hud{position:absolute;left:50%;bottom:calc(16px + var(--safe-bottom));transform:translateX(-50%);z-index:9;display:flex;align-items:center;gap:5px;border-radius:18px;padding:6px 7px;pointer-events:auto}
.readout{min-width:62px;padding:5px 8px}.readout span{display:block;font-size:10px;letter-spacing:.16em;color:#90a99a}.readout b{font-size:15px;font-weight:700}
.throw-btn,.main-btn{border:0;border-radius:13px;background:#d9e7aa;color:#10201a;font-weight:800;cursor:pointer}.throw-btn{height:46px;padding:0 17px;min-width:104px}.throw-btn span{margin-left:12px}.throw-btn:active,.main-btn:active{transform:translateY(1px)}
.camera-return{position:absolute;left:50%;top:76px;transform:translateX(-50%);z-index:8;border-radius:999px;padding:7px 11px;font-size:10px;color:#d9e7d8}
.toast{position:absolute;left:50%;top:24%;transform:translateX(-50%);z-index:30;background:rgba(7,23,19,.9);border:1px solid rgba(223,235,197,.18);border-radius:999px;padding:10px 16px;font-weight:700;font-size:13px;white-space:nowrap}
.screen{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:calc(28px + var(--safe-top)) calc(18px + var(--safe-right)) calc(24px + var(--safe-bottom)) calc(18px + var(--safe-left));background:radial-gradient(circle at 50% 72%,rgba(16,48,39,.42),rgba(6,15,13,.72) 55%,rgba(5,12,11,.9))}
#menu{justify-content:space-between}.brand{text-align:center;margin-top:min(7vh,64px)}.edition{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:#bbcd8f}.brand h1,.panel h2,.dialog-head h2{font-family:Georgia,serif;font-weight:500;margin:7px 0 6px}.brand h1{font-size:clamp(38px,7vw,72px);line-height:.95}.brand p{margin:0;color:#b8c6bd;font-size:13px}
.menu-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;width:min(880px,94vw);margin:auto}.menu-item{min-height:98px;border:1px solid rgba(222,234,197,.14);border-radius:18px;background:rgba(9,29,24,.68);color:#f4f3e9;text-align:left;padding:13px 15px;cursor:pointer;box-shadow:0 12px 32px rgba(0,0,0,.12)}.menu-item.primary{background:rgba(210,229,163,.92);color:#102019}.menu-item span{font-size:10px;letter-spacing:.16em;text-transform:uppercase;opacity:.75}.menu-item b{display:block;font:500 21px Georgia,serif;margin:5px 0}.menu-item small{font-size:10px;opacity:.65}.menu-item:active{transform:scale(.985)}
.menu-footer{display:flex;gap:16px}.text-btn{min-height:44px;border:0;background:transparent;color:#dfe5d7;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(220,230,204,.25);cursor:pointer;padding:9px}
.panel{width:min(520px,92vw);padding:24px;border-radius:24px;background:rgba(7,25,21,.92);border:1px solid rgba(225,237,201,.15);box-shadow:0 30px 90px rgba(0,0,0,.3);text-align:center}.panel.compact{width:min(420px,92vw)}.panel h2{font-size:32px}.muted{color:#aebeb5;font-size:13px;line-height:1.55}.main-btn{width:100%;padding:14px 18px;margin:8px 0}.stepper{display:flex;justify-content:center;align-items:center;gap:20px;margin:18px}.stepper button{width:48px;height:48px;border-radius:14px;border:1px solid rgba(220,230,200,.15);background:rgba(255,255,255,.04);color:white;font-size:24px}.stepper strong{font-size:34px}
.join-row{display:flex;gap:8px;margin:10px 0}.join-row input{flex:1;min-width:0;border:1px solid rgba(220,230,200,.15);border-radius:13px;background:rgba(255,255,255,.04);color:white;text-transform:uppercase;padding:12px}.join-row button{border:0;border-radius:13px;background:#d9e7aa;color:#10201a;font-weight:800;padding:0 18px}.room-status{margin:12px 0;padding:12px;border-radius:14px;background:rgba(255,255,255,.04);font-size:12px}
.result-score strong{font:500 68px Georgia,serif}.result-score span{color:#98aa9d}.podium{display:grid;gap:6px;margin:12px 0}.podium-row{display:flex;justify-content:space-between;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.035)}
dialog{width:min(720px,92vw);max-height:82vh;overflow:auto;border:1px solid rgba(220,232,195,.15);border-radius:24px;background:#0a211b;color:#f4f3e9;padding:20px;box-shadow:0 30px 100px rgba(0,0,0,.45)}dialog::backdrop{background:rgba(3,8,7,.58);backdrop-filter:blur(8px)}.dialog-head{display:flex;justify-content:space-between;align-items:flex-start}.dialog-head h2{font-size:28px}.rules{display:grid;grid-template-columns:1fr 1fr;gap:10px}.rules p{margin:0;padding:14px;border-radius:16px;background:rgba(255,255,255,.035);color:#c8d2ca;font-size:13px;line-height:1.55}.score-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:5px}.frame-box{min-width:0;border:1px solid rgba(220,230,200,.12);border-radius:12px;padding:7px;text-align:center}.frame-box span{display:block;font-size:10px;color:#91a599}.frame-box b{font-size:13px}.frame-box strong{display:block;font:500 19px Georgia,serif;margin-top:4px}.score-total{text-align:right;margin-top:12px;font:500 28px Georgia,serif}
#app[data-theme="garden"]{background:#16251d}#app[data-theme="midnight"]{background:#101224}
@media(max-width:720px){
  .hud{top:calc(8px + var(--safe-top));left:calc(8px + var(--safe-left));right:calc(8px + var(--safe-right))}
  .score-pill{min-width:112px;padding:8px 10px;border-radius:15px}.score-pill strong{font-size:23px}.turn-pill{display:none}.hud-actions{padding:3px}.icon-btn{width:44px;height:44px}
  .throw-hud{bottom:calc(8px + var(--safe-bottom));width:calc(100% - 16px);justify-content:space-between;border-radius:17px}.readout{min-width:0;padding:5px 6px}.readout:nth-child(1){display:none}.throw-btn{min-width:96px}
  #menu{justify-content:flex-start;overflow:auto}.brand{margin-top:36px;margin-bottom:22px}.brand h1{font-size:44px}.menu-grid{grid-template-columns:1fr 1fr;width:100%;gap:8px}.menu-item{min-height:91px;padding:11px 12px}.menu-item b{font-size:18px}.menu-footer{margin:15px 0}
  .rules{grid-template-columns:1fr}.score-grid{grid-template-columns:repeat(5,1fr)}dialog{padding:16px}
}
@media(max-height:500px){
 .brand{margin-top:6px}.brand h1{font-size:36px}.brand p{display:none}.menu-grid{grid-template-columns:repeat(7,1fr);width:97vw}.menu-item{min-height:80px;padding:10px}.menu-item b{font-size:16px}.menu-item small{display:none}.menu-footer{margin-bottom:0}.screen{padding-top:10px;padding-bottom:10px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}