:root{color:#f8fafc;background:#0b1020;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(circle at top left,rgba(45,212,191,.14),transparent 32rem),linear-gradient(145deg,#0b1020,#141827 54%,#111827)}button{font:inherit}.app-shell{width:min(1080px,100%);margin:0 auto;padding:20px}.app-nav{position:sticky;top:0;z-index:5;display:flex;gap:8px;width:min(1080px,100%);margin:0 auto;padding:12px 20px 0;background:linear-gradient(180deg,#0b1020f5,#0b102000)}.app-nav button{min-height:44px;border:1px solid rgba(148,163,184,.22);border-radius:8px;padding:0 16px;color:#cbd5e1;background:#0f172ae0;font-weight:800;cursor:pointer}.app-nav button.active{color:#07111f;background:#bef264}.top-bar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:16px}.top-bar>div,.score-card,.controls,.error-message{border:1px solid rgba(148,163,184,.24);border-radius:8px;background:#0f172ad1;box-shadow:0 18px 40px #0000003d}.top-bar>div{min-height:104px;padding:18px}.state-panel{grid-column:1 / -1}.metric-label{display:block;margin-bottom:8px;color:#94a3b8;font-size:.78rem;font-weight:700;letter-spacing:0;text-transform:uppercase}.metric-value{display:block;color:#fff;font-size:clamp(3rem,13vw,5.75rem);line-height:.92}.state-value{display:block;color:#d9f99d;font-size:clamp(1.5rem,6vw,2.7rem);line-height:1.08}.error-message{margin:0 0 16px;padding:14px 16px;color:#fecaca;background:#7f1d1d75}.score-card{padding:14px}.score-scroll{overflow-x:auto;padding-bottom:4px}.score-grid{display:grid;grid-template-columns:repeat(9,88px) 116px;gap:8px;min-width:916px}.frame-card{display:grid;grid-template-rows:28px 42px 48px;overflow:hidden;border:1px solid rgba(148,163,184,.28);border-radius:6px;background:#101827}.frame-header{display:grid;place-items:center;color:#cbd5e1;font-size:.82rem;font-weight:800;background:#334155c7}.roll-boxes{display:grid;grid-template-columns:repeat(2,1fr);border-bottom:1px solid rgba(148,163,184,.24)}.roll-boxes.tenth{grid-template-columns:repeat(3,1fr)}.roll-box{display:grid;place-items:center;min-width:0;border-left:1px solid rgba(148,163,184,.24);color:#fff;font-size:1.2rem;font-weight:800}.roll-box:first-child{border-left:0}.frame-score{display:grid;place-items:center;color:#f8fafc;font-size:1.42rem}.controls{margin-top:16px;padding:14px}.pin-pad{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.pin-button,.secondary-button{min-height:64px;border:1px solid rgba(203,213,225,.18);border-radius:8px;color:#07111f;background:#f8fafc;font-size:1.35rem;font-weight:900;cursor:pointer;touch-action:manipulation}.pin-button:active:not(:disabled),.secondary-button:active:not(:disabled){transform:translateY(1px)}.pin-button:disabled,.secondary-button:disabled{cursor:not-allowed;opacity:.28}.action-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}.secondary-button{color:#e2e8f0;background:#243044}.secondary-button.danger{color:#fecaca;background:#3f1d2b}.game-page{padding-top:14px}.game-canvas-wrap,.game-panel{border:1px solid rgba(148,163,184,.24);border-radius:8px;background:#0f172ad1;box-shadow:0 18px 40px #0000003d}.game-canvas-wrap{position:relative;display:grid;place-items:center;margin-bottom:16px;padding:12px}.game-canvas{display:block;width:min(100%,390px);max-height:70vh;aspect-ratio:360 / 620;border-radius:8px;background:#0f172a;touch-action:none;-webkit-user-select:none;user-select:none}.game-hint{width:min(100%,390px);margin:10px 0 0;color:#d9f99d;font-size:1.05rem;font-weight:800;text-align:center}.spin-readout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:min(100%,390px);margin-top:8px}.spin-readout span{min-height:36px;display:grid;place-items:center;border:1px solid rgba(148,163,184,.2);border-radius:8px;color:#e2e8f0;background:#02061761;font-size:.92rem;font-weight:900}.game-panel{display:grid;gap:12px;margin-bottom:16px;padding:14px}.last-roll{margin:0;color:#bef264;font-size:1.8rem;font-weight:900}.restart-button{width:100%}.game-panel .action-row{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:0}.ranking-panel{grid-column:1 / -1}.ranking-subtitle{margin:0;color:#cbd5e1;font-weight:800}.final-score-line{margin:0;color:#fff;font-size:2.5rem;font-weight:900}.ranking-form{display:grid;grid-template-columns:minmax(0,1fr) 104px;gap:10px}.ranking-form input{min-height:58px;border:1px solid rgba(148,163,184,.28);border-radius:8px;padding:0 14px;color:#f8fafc;background:#0206178c;font:inherit;font-size:1.1rem;font-weight:800}.save-note{margin:0;color:#bef264;font-weight:900}.ranking-list{display:grid;gap:8px;margin:0;padding-left:24px}.ranking-list li{padding:8px 10px;border-radius:8px;color:#e2e8f0;background:#02061759}.ranking-list li::marker{color:#94a3b8;font-weight:900}.ranking-list span{font-weight:800}.ranking-list strong{float:right;color:#bef264}@media(min-width:760px){.app-shell{padding:32px}.app-nav{padding-inline:32px}.top-bar{grid-template-columns:220px 220px 1fr}.state-panel{grid-column:auto}.pin-pad{grid-template-columns:repeat(11,minmax(0,1fr))}.game-page{display:grid;grid-template-columns:minmax(360px,420px) 1fr;gap:16px;align-items:start}.game-page .top-bar,.game-page .score-card{grid-column:1 / -1}.game-canvas-wrap,.game-panel{margin-bottom:0}}