:root{--ink:#f4f0e4;--muted:#819087;--gold:#d6b36b;--green:#0b6a46;--deep:#06130f;--panel:#0c1c17;--red:#d84c3f}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden;background:var(--deep);color:var(--ink);font-family:Manrope,system-ui,sans-serif;user-select:none}button,input{font:inherit}.screen{position:absolute;inset:0;display:none}.screen.active{display:flex}#home{padding:clamp(26px,5vw,70px);flex-direction:column;justify-content:center;background:radial-gradient(circle at 74% 34%,rgba(20,123,80,.36),transparent 32%),linear-gradient(120deg,#07140f 0%,#07140f 46%,#0b261c 100%)}#home:after{content:"";position:absolute;width:min(47vw,650px);aspect-ratio:2/1;right:5%;top:26%;border:clamp(18px,2vw,28px) solid #4c2717;border-radius:18px;box-shadow:inset 0 0 0 7px #c5a45e,0 40px 80px #0008;transform:perspective(800px) rotateX(58deg) rotateZ(-14deg);background:radial-gradient(circle at 25% 50%,#f6eac9 0 2.5%,transparent 2.8%),radial-gradient(circle at 56% 42%,#e3b52d 0 2.5%,transparent 2.8%),radial-gradient(circle at 75% 63%,#d5463e 0 2.5%,transparent 2.8%),#075d3e}.brand,.tagline,.main-actions,.secondary-actions,.profile{position:relative;z-index:1;width:min(440px,90vw)}.brand{display:flex;align-items:center;gap:20px}.brand img{width:70px;height:70px;border-radius:18px;object-fit:cover}.brand p,.eyebrow{font-size:10px;letter-spacing:.25em;color:var(--gold);font-weight:800;margin:0 0 8px}.brand h1{font-size:clamp(36px,5vw,65px);line-height:.86;letter-spacing:-.065em;margin:0}.brand h1 span{color:var(--gold)}.tagline{color:var(--muted);margin:20px 0 28px}.main-actions{display:grid;gap:9px}.main-actions button{height:66px;border:1px solid #ffffff12;border-radius:10px;background:#11221cbf;color:var(--ink);display:flex;align-items:center;text-align:left;padding:0 20px;gap:16px;cursor:pointer;transition:.2s}.main-actions button:hover{transform:translateX(4px);background:#19332a}.main-actions button.primary{height:80px;background:linear-gradient(100deg,#c69b4e,#e3c984);color:#172017;border:0;box-shadow:0 12px 35px #0006}.main-actions small{display:block;font-size:9px;letter-spacing:.15em;opacity:.65}.main-actions strong{font-size:14px;letter-spacing:.04em}.main-actions .primary strong{font-size:16px}.main-actions .primary span{margin-left:auto;font-size:24px}.button-icon{width:28px;text-align:center;color:var(--gold)}.secondary-actions{display:flex;align-items:center;gap:13px;margin-top:22px}.secondary-actions button{background:none;border:0;color:#86948d;font-size:9px;letter-spacing:.12em;cursor:pointer}.secondary-actions i{height:3px;width:3px;border-radius:50%;background:#6b766f}.profile{margin-top:28px;display:flex;gap:10px;align-items:center}.profile>span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#21342b;color:var(--gold);font-weight:800}.profile b,.profile small{display:block;font-size:10px}.profile small{color:#66776e;font-size:8px;margin-top:2px}#game{flex-direction:column;background:#08130f}.hud{height:74px;display:grid;grid-template-columns:50px 1fr 70px 1fr 50px;align-items:center;padding:8px 20px;position:relative;z-index:3;background:linear-gradient(#0d1a16,#09130f);box-shadow:0 5px 20px #0008}.hud>button{border:1px solid #ffffff14;background:#ffffff08;color:#aaa;width:34px;height:34px;border-radius:8px}.player{display:flex;align-items:center;gap:10px;max-width:280px}.player.right{justify-self:end}.player div small,.target small{display:block;font-size:8px;letter-spacing:.15em;color:#748178}.player div b{font-size:26px}.player em{font-size:9px;font-style:normal;color:#718078;margin-left:auto}.player.right em{margin:0 auto 0 0}.ball-dot{width:24px;height:24px;border-radius:50%;box-shadow:inset -4px -5px 7px #0004,0 0 10px #fff2}.white{background:#f2ecd9}.yellow{background:#e8bd34}.target{text-align:center;color:var(--gold)}.target b{font-size:18px}.mode-label{position:absolute;bottom:5px;left:50%;transform:translateX(-50%);font-size:7px;letter-spacing:.15em;color:#4d5d55}.player.active:after{content:"";position:absolute;bottom:0;width:80px;height:2px;background:var(--gold);box-shadow:0 0 10px var(--gold)}#table-wrap{position:relative;flex:1;min-height:0;background:radial-gradient(circle,#17251e,#050b08);padding:14px 24px}canvas{width:100%;height:100%;display:block;touch-action:none}#shot-message{position:absolute;top:45%;left:50%;transform:translate(-50%,-50%);font-weight:800;font-size:24px;letter-spacing:.12em;color:#f6d78f;text-shadow:0 2px 20px #000;opacity:0;transition:.25s;pointer-events:none}#shot-message.show{opacity:1;transform:translate(-50%,-58%)}#cushion-count{position:absolute;right:38px;top:30px;text-align:center;background:#07100ccc;border:1px solid #ffffff14;border-radius:9px;padding:8px 11px;opacity:.85}#cushion-count b,#cushion-count small{display:block}#cushion-count b{font-size:18px;color:var(--gold)}#cushion-count small{font-size:6px;letter-spacing:.13em;color:#809088}.game-controls{height:76px;padding:9px 20px;display:grid;grid-template-columns:62px 1fr minmax(180px,26vw) 90px;gap:18px;align-items:center;background:#09130f;border-top:1px solid #ffffff0d}.spin-control{width:54px;height:54px;border:2px solid #cab67d;border-radius:50%;background:radial-gradient(circle,#f1ead6 0 57%,#17221d 59%);position:relative}.spin-control span{position:absolute;width:8px;height:8px;border-radius:50%;background:#b94338;left:50%;top:50%;transform:translate(-50%,-50%);box-shadow:0 1px 3px #000}.spin-control small{position:absolute;top:60px;left:50%;transform:translateX(-50%);color:#68776f;font-size:7px}.hint{text-align:center}.hint b,.hint small{display:block;font-size:9px;letter-spacing:.12em}.hint small{font-size:7px;color:#65746c;margin-top:4px}.power-control{display:grid;grid-template-columns:40px 1fr 30px;align-items:center;gap:8px}.power-control small{font-size:7px;color:#748178}.power-control output{font-size:10px;color:var(--gold)}input[type=range]{accent-color:var(--gold);width:100%}.shoot{height:48px;border:0;border-radius:8px;background:linear-gradient(110deg,#b88e47,#e3c782);font-weight:800;color:#172017;letter-spacing:.08em;cursor:pointer}.shoot:disabled{filter:grayscale(1);opacity:.4}.modal{position:absolute;inset:0;display:none;place-items:center;background:#020705cc;backdrop-filter:blur(12px);z-index:10}.modal.open{display:grid}.modal-card{width:min(410px,88vw);padding:30px;border:1px solid #ffffff18;border-radius:16px;background:linear-gradient(145deg,#12251e,#09130f);box-shadow:0 24px 80px #000;position:relative}.modal-card h2{margin:0 0 20px;font-size:26px}.close{position:absolute;right:16px;top:14px;border:0;background:none;color:#89978f;font-size:25px}.modal-card .menu-button{display:block;width:100%;height:48px;margin:8px 0;border:1px solid #ffffff13;background:#ffffff08;color:white;border-radius:8px}.modal-card .menu-button.gold{background:var(--gold);color:#152018;border:0;font-weight:800}.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.stat-grid div{background:#ffffff07;padding:15px;border-radius:8px}.stat-grid b,.stat-grid small{display:block}.stat-grid b{font-size:22px;color:var(--gold)}.stat-grid small{font-size:8px;color:#7c8b83;letter-spacing:.1em}#rotate{display:none}@media(max-width:760px){#home:after{opacity:.25;right:-25%;width:80vw}.hud{padding:7px 8px;grid-template-columns:35px 1fr 42px 1fr 0}.player em{display:none}.game-controls{grid-template-columns:54px 1fr 80px;padding:8px;gap:7px}.power-control{position:absolute;right:4px;top:25%;width:150px;transform:rotate(-90deg) translateY(100%);transform-origin:right bottom}.hint{display:none}.shoot{grid-column:3}.brand,.tagline,.main-actions,.secondary-actions,.profile{width:min(400px,100%)}}@media(orientation:portrait) and (max-width:700px){#game.active~#rotate,#game.active+#modal+#rotate{display:flex;position:absolute;inset:0;background:#07130f;z-index:20;align-items:center;justify-content:center;flex-direction:column;gap:10px;text-align:center}#rotate div{font-size:48px;color:var(--gold)}#rotate span{color:#748178;font-size:12px;max-width:240px}}