:root{--bg: #06283d;--bg2: #041d2e;--water: #0b3a5e;--water2: #135080;--accent: #3fd6e0;--raft: #b07a3e;--raft-edge: #6e4a22;--hopper: #5ee06a;--hopper-dark: #2c8a36;--goal: #f2c84b;--danger: #ff5d6c;--text: #e8f4fb;--muted: #8fb6cf}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;background:radial-gradient(circle at 50% 0%,var(--bg) 0%,var(--bg2) 100%);color:var(--text);font-family:Segoe UI,system-ui,-apple-system,sans-serif;-webkit-user-select:none;user-select:none}#app{min-height:100%;display:flex;align-items:center;justify-content:center;padding:12px}.screen{width:100%;max-width:480px;display:flex;flex-direction:column;align-items:center;gap:14px}.title{font-size:2rem;font-weight:800;letter-spacing:.5px;background:linear-gradient(90deg,var(--accent),var(--hopper));-webkit-background-clip:text;background-clip:text;color:transparent;margin:0}.sub{color:var(--muted);text-align:center;line-height:1.45;font-size:.95rem;margin:0}.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center}button.btn{appearance:none;border:1px solid rgba(63,214,224,.4);background:#1350808c;color:var(--text);font-size:1rem;font-weight:600;padding:10px 18px;border-radius:10px;cursor:pointer;transition:transform .08s ease,background .15s ease}button.btn:hover{background:#3fd6e040}button.btn:active{transform:translateY(1px)}button.btn.primary{background:linear-gradient(90deg,var(--accent),var(--hopper));color:#04232f;border:none}.hud{display:flex;justify-content:space-between;width:100%;font-variant-numeric:tabular-nums;font-size:.95rem}.hud .pill{background:#0b3a5e99;border:1px solid rgba(63,214,224,.25);border-radius:8px;padding:4px 10px}canvas{border-radius:12px;box-shadow:0 8px 30px #00000073;touch-action:none;background:var(--water)}.pad{display:grid;grid-template-columns:repeat(3,56px);grid-template-rows:repeat(3,56px);gap:6px}.pad button{appearance:none;border:1px solid rgba(63,214,224,.35);background:#13508080;color:var(--accent);font-size:1.4rem;border-radius:10px;cursor:pointer}.pad button:active{background:#3fd6e04d}.pad .up{grid-column:2;grid-row:1}.pad .left{grid-column:1;grid-row:2}.pad .down{grid-column:2;grid-row:3}.pad .right{grid-column:3;grid-row:2}.overlay{position:relative;width:100%;text-align:center}.big{font-size:1.6rem;font-weight:800;margin:6px 0}.big.win{color:var(--goal)}.big.lose{color:var(--danger)}.copied-toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%);background:#04232ff2;color:var(--text);border:1px solid var(--accent);padding:8px 16px;border-radius:20px;font-size:.9rem}