/* Original canvas artwork retained. Mobile controls surround the playfield. */
:root{color-scheme:dark;--bg:#11151e;--panel:#1c2430;--line:#354051;--muted:#a6b2c3;--gold:#ffd471;--ink:#f7f3e8;--blue:#94d9eb;font-family:'Trebuchet MS',Verdana,sans-serif;color:var(--ink);background:var(--bg)}
*{box-sizing:border-box}body{margin:0;min-height:100svh;background:radial-gradient(ellipse at 50% 0,#2a3545 0,transparent 65%),#11151e}button,select,input{font:inherit}button,select{cursor:pointer}button{color:inherit}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,canvas:focus-visible{outline:3px solid var(--blue);outline-offset:4px}button{touch-action:manipulation}button[hidden],[hidden]{display:none!important}button:disabled{opacity:.5;cursor:default}svg{display:block}p{line-height:1.6}h1,h2,h3,p{margin-top:0}h2{color:var(--gold);font-size:1.55rem}h3{font-size:1rem;margin-bottom:5px}a{color:inherit}.page{max-width:1440px;margin:auto;padding:max(18px,env(safe-area-inset-top)) max(22px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(22px,env(safe-area-inset-left))}.app-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 0 22px;border-bottom:1px solid #ffffff12}.brand{display:flex;align-items:center;gap:12px;text-decoration:none}.brand img{border-radius:11px}h1{font-size:1.55rem;line-height:1.15;letter-spacing:-.04em;margin:0;color:var(--gold)}#subtitle{font-size:.65rem;color:var(--muted);margin:5px 0 0}.toolbar{display:flex;align-items:center;gap:8px}.icon-button,.close-button{height:40px;min-width:40px;border:1px solid var(--line);border-radius:10px;background:#202936;display:grid;place-items:center;font-size:1.2rem;font-weight:bold}.icon-button svg{height:20px;width:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}.icon-button:hover,.text-button:hover{background:#303c4b}.install-button{min-height:40px;padding:0 16px;border:1px solid #d3af64;border-radius:10px;color:var(--gold);background:#ffd4710c;font-weight:bold;font-size:.8rem}.game-deck{display:grid;grid-template-columns:146px minmax(0,1fr) 122px;gap:20px;align-items:center;padding:26px 0 22px}.screen-column{min-width:0}.screen-frame{width:100%;position:relative;border:1px solid #62748b;border-radius:12px;background:#080c12;overflow:hidden;box-shadow:0 18px 45px #0006,0 0 0 5px #080c124d;aspect-ratio:8/5}canvas{width:100%;height:100%;display:block;touch-action:none}.screen-action{position:absolute;inset:0;border:0;background:transparent;cursor:pointer}.screen-action:focus-visible{outline-offset:-6px}.paused-overlay{position:absolute;inset:0;background:#080e19c9;display:grid;place-items:center;backdrop-filter:blur(3px)}.pause-card{text-align:center}.pause-card h2{font-size:clamp(1.5rem,4vw,3rem);margin:8px 0 18px}.eyebrow{font-size:.64rem;letter-spacing:.16em;color:var(--blue);font-weight:bold}.movement-controls,.pour-controls{display:flex;flex-direction:column;align-items:center;gap:17px;user-select:none;-webkit-user-select:none}.control-caption{color:#b4c3d8;font-size:.64rem;font-weight:bold;letter-spacing:.22em}.dpad{display:grid;grid-template-columns:repeat(3,45px);grid-template-rows:repeat(3,45px);gap:4px}.control{border:1px solid #526173;border-bottom:4px solid #10161d;border-radius:9px;background:linear-gradient(#3c4a5a,#263341);color:#e1ebf5;font-size:1rem;touch-action:none;box-shadow:0 3px 0 #080e15;-webkit-tap-highlight-color:transparent}.up{grid-area:1/2}.left{grid-area:2/1}.right{grid-area:2/3}.down{grid-area:3/2}.dpad-center{grid-area:2/2;display:grid;place-items:center;color:#6c7c90;font-size:1.2rem}.control.is-pressed,.control:active{transform:translateY(2px);background:#668199;box-shadow:none;border-bottom-width:2px}.control-hint{text-align:center;font-size:.66rem;line-height:1.65;color:var(--muted)}.pour-button{width:106px;height:123px;border-radius:25px;border:1px solid #ffdf89;border-bottom:5px solid #8e5a26;background:linear-gradient(145deg,#ffdf8a,#dfa942);box-shadow:0 6px 0 #382b22,0 12px 25px #0005;color:#402909;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;touch-action:none;-webkit-tap-highlight-color:transparent;font-weight:bold;letter-spacing:.08em;font-size:.83rem}.pour-button svg{width:48px;height:48px}.pour-button.is-pressed,.pour-button:active{transform:translateY(4px);background:#fff0a3;box-shadow:0 2px 0 #382b22}.bottom-bar{border-top:1px solid #ffffff12;border-bottom:1px solid #ffffff12;padding:16px 0;display:flex;align-items:center;justify-content:space-between;gap:16px}.bar-actions{display:flex;align-items:center;gap:8px}.gold-button{min-height:42px;padding:10px 22px;border:0;border-bottom:3px solid #a47a31;border-radius:8px;background:var(--gold);font-size:.82rem;font-weight:bold;color:#35280e}.gold-button:hover{background:#ffe4a3}.text-button{border:0;border-radius:8px;min-height:42px;padding:10px 14px;background:transparent;font-size:.8rem;color:#d5e1ee}.keyboard-hint{font-size:.68rem;color:var(--muted);text-align:center}.offline-status{border:0;background:transparent;display:flex;align-items:center;gap:7px;font-size:.64rem;min-height:40px;color:var(--muted);text-align:left;padding:0}.status-dot{width:6px;height:6px;flex-shrink:0;border-radius:50%;background:#d6b26c}.offline-status.ready .status-dot{background:#92dbad;box-shadow:0 0 7px #92dbad40}.offline-status.error .status-dot{background:#ff9a85}.portrait-tip{display:none;color:var(--muted);font-size:.73rem;text-align:center;margin:15px 0 0}footer{display:flex;justify-content:space-between;gap:12px;padding-top:17px;font-size:.65rem;color:#8491a3}.edition{font-size:.58rem;letter-spacing:.14em}dialog{position:fixed;width:min(480px,calc(100% - 28px));max-height:calc(100dvh - 32px);padding:26px;border:1px solid #58697c;border-radius:20px;background:#1c2531;color:var(--ink);box-shadow:0 25px 90px #0009}dialog::backdrop{background:#03070dbf;backdrop-filter:blur(5px)}.dialog-header{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:20px}.dialog-header h2{margin:0}.close-button{font-size:1.4rem;min-width:36px;height:36px}.language-row{display:flex;justify-content:space-between;align-items:center;padding-bottom:20px;margin-bottom:22px;border-bottom:1px solid #ffffff18;font-size:.85rem}select,input{background:#111a25;border:1px solid #5b6b7c;border-radius:8px;color:#fff;padding:10px}.help-intro{display:flex;gap:15px;margin-bottom:16px}.help-number{font-size:.7rem;letter-spacing:.04em;color:var(--gold);margin-top:3px}.help-intro p,dialog>p{font-size:.85rem;color:#c5cfdc}.help-intro p{margin:0}.dialog-note{font-size:.75rem;line-height:1.6;color:var(--muted);margin-bottom:0}.highscores{padding:0;list-style-position:inside;margin:22px 0 0;counter-reset:scores}.highscores li{padding:13px 0;border-top:1px solid #ffffff15;color:#e2e9f0;font-size:.86rem;line-height:1.4}.highscores li::marker{color:var(--gold);font-weight:bold}.name-label{display:block;margin:20px 0 8px;font-size:.8rem}#playerName{width:100%;font-size:1.2rem;letter-spacing:.06em}.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:22px}#nameDialog h2{margin:10px 0}.score-summary{font-size:2rem;color:var(--gold);margin:12px 0}.install-icon{border-radius:18px;float:left;margin:0 16px 10px 0}#nativeInstallButton{margin-top:18px}progress{width:100%;height:9px;accent-color:var(--gold);margin:5px 0 15px}#retryOfflineButton{margin-top:20px}.toast{position:fixed;bottom:max(20px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);padding:13px 20px;background:#f4d18e;color:#30220c;border-radius:10px;box-shadow:0 8px 30px #0006;font-size:.8rem;z-index:20;width:max-content;max-width:90%;text-align:center}
@media(min-width:1100px) and (min-height:760px){.game-deck{padding-top:40px;padding-bottom:36px}.app-header{padding-bottom:25px}.page{padding-top:28px}}
@media(max-width:1000px){.game-deck{grid-template-columns:116px minmax(0,1fr) 96px;gap:12px}.dpad{grid-template-columns:repeat(3,36px);grid-template-rows:repeat(3,40px);gap:3px}.pour-button{width:88px;height:110px}.keyboard-hint{display:none}}
@media(max-width:620px) and (orientation:portrait){.page{padding:16px 14px}.app-header{padding-bottom:18px;gap:10px}.brand{gap:8px}.brand img{width:35px;height:35px}h1{font-size:1.13rem}#subtitle{font-size:.55rem}.toolbar{gap:5px}.icon-button{min-width:34px;height:36px;border-radius:8px}#fullscreenButton{display:none}.install-button{padding:0 10px;font-size:.69rem;min-height:36px}.game-deck{grid-template-columns:1fr 1fr;gap:24px;padding:22px 0}.screen-column{grid-column:1/-1;grid-row:1}.movement-controls{grid-column:1;grid-row:2}.pour-controls{grid-column:2;grid-row:2}.dpad{grid-template-columns:repeat(3,46px);grid-template-rows:repeat(3,44px);gap:4px}.pour-button{width:114px;height:132px}.movement-controls,.pour-controls{gap:12px}.control-hint{font-size:.67rem}.bottom-bar{flex-wrap:wrap;gap:8px}.bar-actions{flex:1;justify-content:center}.offline-status{width:100%;justify-content:center;min-height:26px;font-size:.66rem}.portrait-tip{display:block}footer{padding-top:22px;flex-direction:column;text-align:center;gap:7px}.screen-frame{border-radius:9px}.eyebrow{font-size:.53rem}dialog{padding:22px}.pause-card .gold-button{min-height:36px;padding:7px 16px}}
@media(orientation:landscape) and (max-height:600px){.page{padding:max(6px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(5px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));max-width:1160px}.app-header{padding:0 0 6px}.brand img{width:30px;height:30px}.brand{gap:8px}h1{font-size:1.1rem}#subtitle{display:none}.icon-button{height:32px;min-width:34px;border-radius:7px}.install-button{min-height:32px;font-size:.7rem}.game-deck{grid-template-columns:120px minmax(0,1fr) 110px;gap:12px;padding:8px 0 6px}.screen-column{display:flex;justify-content:center}.screen-frame{width:auto;height:calc(100svh - 109px);max-width:100%;border-radius:7px;aspect-ratio:8/5}.movement-controls,.pour-controls{gap:10px}.dpad{grid-template-columns:repeat(3,38px);grid-template-rows:repeat(3,40px);gap:3px}.control-hint{font-size:.58rem}.pour-button{width:92px;height:109px}.bottom-bar{padding:4px 0;border-bottom:0;gap:8px}.gold-button,.text-button{min-height:32px;padding:6px 14px;font-size:.73rem}.offline-status{min-height:28px;font-size:.6rem}footer{display:none}.screen-frame canvas{object-fit:contain}.portrait-tip{display:none}.pause-card h2{margin:8px 0 12px}.eyebrow{font-size:.55rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}

.control-hint{white-space:pre-line}
@media(max-width:380px) and (orientation:portrait){.brand img{display:none}.install-button{padding:0 8px}}