:root{--bg: #08111a;--panel: rgba(13, 25, 37, .92);--line: rgba(107, 144, 182, .28);--text: #ebf3ff;--muted: #9bb2ce;--accent: #86d9ff}*{box-sizing:border-box}html,body{margin:0;min-height:100%;width:100%;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;color:var(--text);background:radial-gradient(circle at top left,rgba(51,90,143,.36),transparent 30%),radial-gradient(circle at 80% 20%,rgba(33,128,116,.24),transparent 32%),linear-gradient(180deg,#0b1622,#060b11 72%)}body{padding:10px}.page{width:min(1240px,100%);min-height:calc(100dvh - 20px);margin:0 auto;display:grid;gap:12px;grid-template-rows:auto minmax(0,1fr)}.panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:12px 14px;box-shadow:0 14px 40px #00000047;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}h1{margin:0;letter-spacing:.02em}p{margin:6px 0 10px;color:var(--muted)}.stats{display:flex;flex-wrap:wrap;gap:8px}.stats span{background:#07101beb;padding:7px 11px;border-radius:999px;border:1px solid rgba(105,142,178,.24);color:#dbe8fb;font-size:.95rem}.game-wrap{padding:12px;min-height:0;display:flex;flex-direction:column;align-items:center}#poolCanvas{width:100%;max-width:100%;aspect-ratio:2.08 / 1;max-height:min(78dvh,900px);display:block;margin-inline:auto;border-radius:18px;background:#0d5638;border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px #ffffff0a,0 20px 50px #00000052;touch-action:none}.controls{display:flex;align-items:center;gap:12px;margin-top:12px;flex-wrap:wrap}.mode-picker{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:.95rem}.mode-picker select{appearance:none;border:1px solid rgba(105,142,178,.3);border-radius:999px;background:#07101beb;color:var(--text);padding:9px 14px;font:inherit}.mode-picker select:disabled{opacity:.55}button{appearance:none;border:0;border-radius:999px;background:linear-gradient(135deg,#8ce4ff,#7ea6ff);color:#06111d;font-weight:800;letter-spacing:.01em;padding:10px 15px;cursor:pointer;box-shadow:0 10px 24px #5888ff3d}button:hover{filter:brightness(1.04)}.secondary-btn{background:#07101beb;color:var(--text);border:1px solid rgba(105,142,178,.3);box-shadow:none}.secondary-btn[disabled]{opacity:.5;cursor:default}.msg{color:#d7e8ff}.note{color:#afc4df;margin-top:10px}.event-log-panel{width:100%;margin-top:14px;border:1px solid rgba(105,142,178,.24);border-radius:16px;background:#07101bbd;overflow:hidden}.event-log-header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:12px 14px 10px;border-bottom:1px solid rgba(105,142,178,.18)}.event-log-header h2{margin:0;font-size:1rem}.event-log-header p{margin:4px 0 0;font-size:.88rem}.event-log-meta{flex:0 0 auto;color:var(--accent);background:#86d9ff1f;border:1px solid rgba(134,217,255,.16);padding:6px 10px;border-radius:999px;font-size:.82rem;white-space:nowrap}.event-log{list-style:none;margin:0;padding:0;max-height:min(30dvh,320px);overflow:auto}.event-log li{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;padding:11px 14px;border-top:1px solid rgba(105,142,178,.12)}.event-log li:first-child{border-top:0}.log-shot{color:var(--accent);font-weight:700;font-size:.83rem}.log-text{color:#e8f2ff;line-height:1.4;font-size:.92rem}.log-text strong{color:#fff}@media(max-width:700px){body{padding:4px}.page{min-height:calc(100dvh - 8px);gap:6px;grid-template-rows:auto minmax(0,1fr)}.panel{padding:8px 10px;border-radius:14px}h1{font-size:1.02rem}p{margin:4px 0 6px;font-size:.84rem;line-height:1.3}.stats{gap:6px}.stats span{flex:1 1 calc(50% - 6px);min-width:0;border-radius:12px;font-size:.82rem;padding:6px 8px}.game-wrap{padding:6px;justify-content:flex-start}#poolCanvas{aspect-ratio:auto;min-height:260px;border-radius:14px}.controls{width:100%;gap:8px;margin-top:8px;justify-content:space-between;align-items:flex-start}.mode-picker{font-size:.82rem}.mode-picker select{padding:8px 11px}button{padding:9px 13px;flex:0 0 auto}.msg,.note{font-size:.82rem;line-height:1.35}.msg{flex:1 1 180px}.event-log-panel{margin-top:10px;border-radius:14px}.event-log-header{padding:10px 11px 9px;flex-direction:column;gap:8px}.event-log-header h2{font-size:.94rem}.event-log-header p,.event-log-meta,.log-shot,.log-text{font-size:.8rem}.event-log{max-height:min(28dvh,240px)}.event-log li{gap:8px;padding:9px 11px}}@media(max-width:420px){body{padding:2px}.page{min-height:calc(100dvh - 4px);gap:4px}.panel{padding:7px 8px;border-radius:12px}.stats span{font-size:.78rem;padding:5px 7px}.game-wrap{padding:5px}#poolCanvas{min-height:232px;border-radius:12px}.controls{gap:6px;margin-top:6px}button{padding:8px 12px}.event-log{max-height:210px}.event-log li{grid-template-columns:1fr;gap:4px}}