@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;800;900&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{font-family:'DM Sans',Arial,sans-serif;color:#fff1d0;background:#082f3a;color-scheme:dark;font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 55% 0,#18515a,#082f3a 75%);min-height:100dvh;padding:16px 22px 12px;overscroll-behavior:none}button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none}button:disabled{cursor:default}button:focus-visible,canvas:focus-visible{outline:3px solid #ffce70;outline-offset:3px}#shell{max-width:1260px;margin:auto}header{display:flex;justify-content:space-between;align-items:center;height:49px;margin-bottom:12px}.brand{display:flex;align-items:center;font-family:'Barlow Condensed',Impact,sans-serif;font-size:45px;font-weight:900;letter-spacing:-1px;color:#ffcc6c}.brand span{color:#f28b55}.brand b{font-family:'DM Sans',Arial,sans-serif;font-size:16px;letter-spacing:3px;color:#f7e9cb;margin-left:18px}nav{display:flex;align-items:center;gap:7px}nav button{background:#0b3038;color:#e0e9dc;border:1px solid #42686b;border-radius:7px;padding:7px 10px;min-height:33px;font-size:11px;font-weight:700}nav #pause,nav #full{font-size:19px;line-height:1;min-width:34px}nav button:disabled{opacity:.4}#game{border:3px solid #052530;border-radius:16px;overflow:hidden;box-shadow:0 7px 0 #052530,0 18px 55px #001c2866}.viewport{position:relative;aspect-ratio:16/10;touch-action:none;overflow:hidden;background:#f4a461}canvas{width:100%;height:100%;display:block;touch-action:none}.hud{position:absolute;left:22px;right:22px;top:18px;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none;gap:18px}.round-card,.time-card{background:#103d43ed;border:1px solid #fff2cc70;border-radius:10px;padding:11px 17px;min-width:106px;box-shadow:0 4px 0 #0b303c55}.hud small{display:block;font-size:10px;font-weight:700;letter-spacing:1.2px;color:#d7e3d3}.hud strong{font-family:'Barlow Condensed',Impact,sans-serif;font-size:39px;line-height:1.08}.hud strong span{font-size:19px;color:#d7e3d3}.time-card{text-align:right}.time-card.urgent{background:#a53629ef}.task{text-align:center;background:#fff3d5f2;border:1px solid #153b4470;padding:10px 22px;border-radius:30px;color:#143c41;box-shadow:0 3px 0 #13364222;max-width:420px}.task span{display:block;font-size:9px;font-weight:800;letter-spacing:1.6px;margin-bottom:3px}.task b{font-size:15px}.intro{position:absolute;inset:0;background:linear-gradient(90deg,#062e3aed 0,#082f3ad9 38%,#082f3a35 66%,transparent 85%);display:flex;align-items:center;padding:6% 7%;z-index:4}.intro.hidden{display:none}.intro-content{max-width:470px}.eyebrow{font-size:11px;font-weight:800;letter-spacing:2.7px;color:#bdd7ce}.intro h1{font-family:'Barlow Condensed',Impact,sans-serif;font-weight:900;font-size:clamp(74px,9vw,132px);line-height:.84;letter-spacing:-1px;margin:22px 0;color:#fff4d6}.intro h1 em{font-style:normal;color:#ffcb6a}.intro p{font-size:18px;line-height:1.6;color:#f5edda;margin:0 0 25px}.intro button{background:#ffcc6b;border:2px solid #082b36;box-shadow:0 5px 0 #052630;border-radius:9px;color:#123c42;padding:17px 30px;font-family:'Barlow Condensed',Impact,sans-serif;font-size:25px;font-weight:800;letter-spacing:.5px}.intro button:disabled{opacity:.6}.intro button:active{transform:translateY(3px);box-shadow:0 2px 0 #052630}.intro small{display:block;font-size:10px;font-weight:800;letter-spacing:1.4px;color:#bad0c8;margin-top:23px}#loading{position:absolute;inset:0;background:#0b3942;display:flex;align-items:center;justify-content:center;z-index:8;font-size:17px}#loading.hidden{display:none}.controls{padding:16px 20px;display:flex;align-items:center;justify-content:space-between;gap:20px;background:#fff0cf;border-top:3px solid #103842;color:#153c40}.directions{display:flex;gap:8px}.directions button{width:59px;height:60px;border:2px solid #123a42;border-radius:12px;background:#c6d9c6;box-shadow:0 3px 0 #123a42;color:#123a42;font-size:42px;line-height:.85;touch-action:none}.directions .jump{font-size:28px;background:#ffce78;margin-left:5px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}.jump small{font-size:9px;font-weight:900;letter-spacing:.7px}.directions button.held{background:#a9c9b4;transform:translateY(2px);box-shadow:0 1px 0 #123a42}.hint{display:flex;flex-direction:column;gap:6px;font-size:14px}.hint span{font-size:12px;color:#697b6c}#plunge{background:#ef8958;color:#153c40;border:2px solid #153c40;box-shadow:0 3px 0 #153c40;border-radius:12px;display:flex;align-items:center;gap:13px;padding:8px 21px;min-width:259px;height:64px;touch-action:none}#plunge:disabled{opacity:.48}#plunge.held{background:#ffd078;box-shadow:0 1px 0 #153c40;transform:translateY(2px)}.drag-icon{font-size:40px;line-height:1}#plunge>span:last-child{display:flex;flex-direction:column;text-align:left;gap:3px}#plunge b{font-family:'Barlow Condensed',Impact,sans-serif;font-size:24px}#plunge small{font-size:11px}footer{margin-top:18px;display:flex;justify-content:space-between;align-items:center;color:#bed3cf;font-size:11px;letter-spacing:.6px}footer button{border:0;background:none;color:#bed3cf;font-size:10px;font-weight:700;padding:5px}footer b{font-size:12px}
@media(min-width:950px) and (max-height:980px){#shell{max-width:min(1200px,calc((100dvh - 222px)*1.6))}body{padding-top:9px}header{height:42px}.controls{padding:12px 18px}.viewport{aspect-ratio:16/10}}
@media(max-width:760px){body{padding:7px 7px 12px}header{height:42px;margin-bottom:8px}.brand{font-size:37px}.brand b{font-size:12px;letter-spacing:1.4px;margin-left:10px}nav{gap:5px}nav button{font-size:9px;padding:6px;min-height:29px}nav #full,nav #pause{font-size:17px;min-width:29px}.viewport{aspect-ratio:.98}.hud{top:10px;left:10px;right:10px;gap:8px}.round-card,.time-card{padding:8px 10px;min-width:69px}.hud strong{font-size:29px}.hud small{font-size:8px;letter-spacing:.5px}.hud strong span{font-size:13px}.task{padding:8px 11px;border-radius:12px;max-width:180px}.task span{font-size:8px;letter-spacing:.5px}.task b{font-size:11px}.intro{padding:8%;background:linear-gradient(90deg,#082f3af2,#082f3aab 58%,#082f3a26)}.intro h1{font-size:78px;margin:18px 0}.intro p{font-size:14px;line-height:1.5;margin-bottom:18px}.eyebrow{font-size:9px;letter-spacing:1.4px}.intro button{font-size:22px;padding:13px 23px}.intro small{font-size:8px;letter-spacing:.8px;margin-top:17px}.controls{gap:10px;flex-wrap:wrap;padding:12px 10px}.directions{gap:5px}.directions button{width:45px;height:54px;font-size:35px}.directions .jump{margin-left:2px;font-size:25px}.hint{order:3;width:100%;text-align:center;font-size:12px;gap:4px}.hint span{font-size:10px}#plunge{min-width:0;flex:1;max-width:220px;padding:7px 8px;height:56px;gap:6px}#plunge b{font-size:18px}#plunge small{font-size:9px}.drag-icon{font-size:30px}footer{font-size:10px;letter-spacing:0}footer b{font-size:10px}}
@media(max-height:520px) and (orientation:landscape){body{padding:4px}#shell{max-width:800px}header{height:27px;margin-bottom:4px}.brand{font-size:26px}.brand b{font-size:11px}nav button{min-height:24px}.viewport{aspect-ratio:auto;height:calc(100dvh - 132px)}.hud{top:7px;left:10px;right:10px}.round-card,.time-card{padding:5px 9px;min-width:70px}.hud strong{font-size:24px}.hud small{font-size:8px}.task{padding:6px 12px}.task b{font-size:11px}.controls{padding:6px 10px;flex-wrap:nowrap}.directions button{height:36px;width:45px;font-size:28px}.directions .jump{font-size:20px}.jump small{font-size:7px}#plunge{height:39px;min-width:188px}#plunge b{font-size:17px}#plunge small{font-size:9px}.hint{order:0;width:auto;font-size:11px}.hint span{display:none}.intro h1{font-size:56px;margin:12px 0}.intro p{font-size:12px;margin-bottom:12px}.intro button{font-size:17px;padding:8px 18px}.intro small{display:none}.eyebrow{font-size:8px}footer{margin-top:9px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Compact touch controls keep the action above the fold. */
#plunge.pumping{background:linear-gradient(90deg,#ffd078 var(--pressure,0%),#ef8958 var(--pressure,0%))}.directions button:disabled{opacity:.35}.hint span{font-size:12px}nav button{min-height:40px;min-width:40px}footer button{min-height:40px}
@media(pointer:coarse){#keys{display:none}}
@media(max-width:760px){.viewport{aspect-ratio:1.12}.controls{padding:10px;gap:9px}.directions button{height:52px;width:44px}.hint{font-size:13px}.task b{font-size:12px}.task span,.hud small{font-size:9px}#plunge{height:54px;max-width:none}#plunge b{font-size:19px}#plunge small{font-size:11px}footer{margin-top:9px}.intro p{font-size:16px}.intro small{font-size:10px}.brand b{font-size:11px}nav button{min-height:36px;min-width:36px}nav #pause,nav #full{min-width:36px}}
@media(max-width:370px){.brand b{display:none}#plunge small{font-size:10px}#plunge b{font-size:17px}.directions{gap:4px}.directions button{width:42px}}
@media(max-height:520px) and (orientation:landscape){.viewport{aspect-ratio:auto}.controls{flex-wrap:nowrap}.hint{display:none}nav button{min-height:26px}.directions button{height:40px}#plunge{height:42px}.intro p{font-size:12px}}



/* The game is a touch surface: no iOS callout, text selection or drag preview. */
html,body,#shell,#shell *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}#shell ::selection{background:transparent}button,canvas{touch-action:manipulation}#canvas,.controls,.controls button{touch-action:none}button:focus:not(:focus-visible),canvas:focus:not(:focus-visible){outline:none}.controls *{pointer-events:none}.controls button{pointer-events:auto}#screen.hidden,#visitPicker.hidden{display:none}
.mode-choice{display:flex;gap:8px;margin:12px 0}.intro .mode-choice button{font-family:inherit;font-size:12px;padding:10px 14px;box-shadow:none;background:#16434a;color:#d7e8de;border:1px solid #719690;letter-spacing:.5px}.intro .mode-choice button[aria-pressed=true]{background:#ffcc6b;color:#143c42;border-color:#ffcc6b}.venue-choices{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;max-width:410px}.intro .venue-choices button{font-family:inherit;font-size:10px;padding:8px 5px;border-radius:8px;box-shadow:none;background:#0d333c;color:#e4efe3;border:1px solid #5a827e;min-height:44px}.intro .venue-choices button[aria-pressed=true]{border-color:#ffd27c;box-shadow:inset 0 0 0 1px #ffd27c;color:#ffd27c}.intro .venue-detail{font-size:13px;line-height:1.4;color:#c4d9ce;margin:9px 0 15px}.intro-content{max-width:490px}.intro h1{font-size:clamp(60px,7vw,108px);margin:14px 0}.intro p{margin-bottom:12px;line-height:1.4}.intro small{margin-top:13px}.intro .venue-choices button:disabled{opacity:.5}.intro button#start{min-height:48px}#location{max-width:40%;text-align:center}.controls button{min-height:52px}
@media(max-width:760px){.intro{padding:6%}.intro h1{font-size:58px;margin:10px 0}.intro p{font-size:14px}.intro .eyebrow{font-size:9px}.intro .venue-detail{font-size:12px;margin-bottom:10px}.intro #start{padding:9px 20px;font-size:21px}.intro small{font-size:9px}.intro .mode-choice button{padding:9px 10px;font-size:11px}.intro .venue-choices button{font-size:9px;min-height:39px}.intro .venue-choices{max-width:320px}.intro-content{width:100%}#location{font-size:9px}}
@media(max-height:520px) and (orientation:landscape){.intro{padding:3% 5%}.intro h1{font-size:38px;margin:6px 0}.intro p{font-size:11px}.intro .eyebrow,.intro .venue-detail,.intro small{display:none}.mode-choice{margin:5px 0}.intro .mode-choice button{padding:5px 10px;font-size:10px;min-height:30px}.intro .venue-choices button{min-height:29px;padding:5px}.intro #start{font-size:16px;padding:6px 18px;min-height:32px;margin-top:7px}.intro-content{max-width:360px}.controls button{min-height:40px}}

@media(max-width:760px){.intro.choosing{padding:4% 6%}.choosing h1{font-size:44px;line-height:1;margin:6px 0}.choosing h1 br{display:none}.choosing h1 em{margin-left:7px}.choosing .eyebrow{font-size:8px}.choosing p{font-size:13px;margin:0 0 6px}.choosing .mode-choice{margin:7px 0}.choosing .mode-choice button{min-height:32px;padding:6px 10px}.choosing .venue-detail{font-size:11px;margin:6px 0 8px}.choosing #start{min-height:41px;font-size:19px;padding:6px 18px}.choosing small{font-size:8px;margin-top:9px}}
@media(max-height:520px) and (orientation:landscape){.choosing h1{font-size:28px;line-height:1;margin:3px 0}.choosing h1 br{display:none}.choosing h1 em{margin-left:5px}.choosing .mode-choice{margin:3px 0}.choosing .mode-choice button{min-height:25px}.choosing #start{min-height:28px;padding:3px 16px}.choosing #description{display:none}.choosing .venue-choices button{min-height:27px}}

@media(max-width:370px){.choosing #description{display:none}.choosing h1{font-size:39px}.choosing .venue-detail{font-size:10px}.choosing .venue-choices button{font-size:8px;padding:6px 2px}}

/* Keep installed phone shortcuts clear of the notch and home indicator. */
@media(display-mode:standalone){body{padding-top:max(12px,env(safe-area-inset-top));padding-right:max(12px,env(safe-area-inset-right));padding-bottom:max(12px,env(safe-area-inset-bottom));padding-left:max(12px,env(safe-area-inset-left))}}

/* Celebrate without hiding Fo's raised plunger on narrow screens. */
.hud.saved .time-card,.hud.saved .round-card{background:#145c51f2;border-color:#b7f1cb}.hud.saved .task{background:#d9f6c9;color:#174937;border-color:#287450}.result-win{background:linear-gradient(90deg,#062e3af2,#082f3ad9 34%,#082f3a15 64%,transparent)}
@media(max-width:760px){.intro.result-win{align-items:flex-end;padding:12px;background:linear-gradient(0deg,#082f3aeb,transparent 54%)}.result-win .intro-content{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;background:#082f3aef;border:1px solid #b8d9bd;border-radius:12px;padding:12px}.result-win .eyebrow,.result-win #screenHint{display:none}.result-win h1{font-size:31px;line-height:1;margin:0;letter-spacing:0}.result-win h1 br{display:none}.result-win h1 em{margin-left:5px}.result-win p{grid-column:1;grid-row:2;margin:0;font-size:12px}.result-win #start{grid-column:2;grid-row:1/3;max-width:125px;padding:10px;font-size:17px;min-height:48px}}
/* Expand the actual game layout; rotate freely, including on iOS browsers
   without native fullscreen. The exit button stays reachable at the notch. */
html:is(.game-expanded,.game-landscape),html:is(.game-expanded,.game-landscape) body{height:100%;overflow:hidden;overscroll-behavior:none}
:is(.game-expanded,.game-landscape) body{position:fixed;inset:0;padding:max(5px,env(safe-area-inset-top)) max(7px,env(safe-area-inset-right)) max(5px,env(safe-area-inset-bottom)) max(7px,env(safe-area-inset-left));height:var(--game-height,100dvh);min-height:0}
:is(.game-expanded,.game-landscape) #shell{height:100%;width:100%;max-width:none;position:relative;display:flex;flex-direction:column}
:is(.game-expanded,.game-landscape) header{flex:none;height:40px;margin-bottom:5px}:is(.game-expanded,.game-landscape) header nav button{min-height:36px;min-width:36px}.game-expanded #full{color:#ffcf76}
:is(.game-expanded,.game-landscape) #game{flex:1;min-height:0;display:flex;flex-direction:column;box-shadow:none;border-radius:12px}
:is(.game-expanded,.game-landscape) .viewport{flex:1;min-height:0;aspect-ratio:auto;height:auto}
:is(.game-expanded,.game-landscape) .controls{flex:none;padding:8px 10px;gap:8px}:is(.game-expanded,.game-landscape) footer{display:none}:is(.game-expanded,.game-landscape) .intro{overflow-y:auto}
/* Landscape uses the screen width, with controls beside the playfield.
   No height-derived shell width: that was shrinking the game on rotation. */
@media(orientation:landscape){
 :is(.game-expanded,.game-landscape) #shell{--control-rail:160px}
 :is(.game-expanded,.game-landscape) #game{display:grid;grid-template-columns:minmax(0,1fr) var(--control-rail);grid-template-rows:minmax(0,1fr)}
 :is(.game-expanded,.game-landscape) .viewport{min-width:0;width:100%;height:100%}
 :is(.game-expanded,.game-landscape) header{position:absolute;top:6px;right:3px;width:var(--control-rail);height:40px;margin:0;justify-content:center;z-index:6}
 :is(.game-expanded,.game-landscape) .brand{display:none}
 :is(.game-expanded,.game-landscape) header nav{gap:5px}
 :is(.game-expanded,.game-landscape) header nav button{min-width:36px;min-height:36px;padding:6px;font-size:10px}
 :is(.game-expanded,.game-landscape) header nav #pause,:is(.game-expanded,.game-landscape) header nav #full{font-size:19px}
 :is(.game-expanded,.game-landscape) .controls{min-width:0;min-height:0;flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;align-items:stretch;border-top:0;border-left:3px solid #103842;padding:56px 9px 10px;gap:12px}
 :is(.game-expanded,.game-landscape) .hint{display:none}
 :is(.game-expanded,.game-landscape) .directions{display:grid;grid-template-columns:1fr 1fr;gap:6px;width:100%;flex:none}
 :is(.game-expanded,.game-landscape) .directions button{height:44px;min-height:44px;width:100%;font-size:34px}
 :is(.game-expanded,.game-landscape) .directions .jump{grid-column:1/-1;margin:0;flex-direction:row;gap:9px;font-size:27px}
 :is(.game-expanded,.game-landscape) .jump small{font-size:10px}
 :is(.game-expanded,.game-landscape) #plunge{width:100%;min-width:0;height:auto;min-height:76px;max-height:140px;max-width:none;flex:1;padding:10px 8px;justify-content:center}
 :is(.game-expanded,.game-landscape) #plunge .drag-icon{display:none}
 :is(.game-expanded,.game-landscape) #plunge>span:last-child{text-align:center;gap:7px}
 :is(.game-expanded,.game-landscape) #plunge b{font-size:20px;line-height:1.05}
 :is(.game-expanded,.game-landscape) #plunge small{font-size:10px;line-height:1.2}
 :is(.game-expanded,.game-landscape) .intro h1{font-size:clamp(28px,6vh,75px)}
 :is(.game-expanded,.game-landscape) .intro.choosing{padding:2% 5%}
 :is(.game-expanded,.game-landscape) .intro.choosing .intro-content{max-width:410px}
 :is(.game-expanded,.game-landscape) .intro.choosing .venue-detail,:is(.game-expanded,.game-landscape) .intro.choosing .eyebrow,:is(.game-expanded,.game-landscape) .intro.choosing #description,:is(.game-expanded,.game-landscape) .intro.choosing small{display:none}
 :is(.game-expanded,.game-landscape) .intro.choosing #start{min-height:36px}
 :is(.game-expanded,.game-landscape) .intro.choosing .venue-choices button{min-height:36px}
 :is(.game-expanded,.game-landscape) .mode-choice{margin:4px 0}
 :is(.game-expanded,.game-landscape) .intro.choosing .mode-choice button{min-height:30px;padding:5px 10px}
}
@media(orientation:landscape) and (max-height:280px){
 :is(.game-expanded,.game-landscape) .controls{padding-top:48px;gap:7px;padding-bottom:6px}
 :is(.game-expanded,.game-landscape) .directions button{height:40px;min-height:40px}
 :is(.game-expanded,.game-landscape) #plunge{min-height:62px;padding:5px}
 :is(.game-expanded,.game-landscape) #plunge b{font-size:18px}
 :is(.game-expanded,.game-landscape) .intro.choosing .venue-choices button{min-height:30px}
 :is(.game-expanded,.game-landscape) .intro.choosing #start{min-height:30px}
}
/* Six destination choices; short landscape keeps a compact row. */
.venue-choices{grid-template-columns:repeat(6,minmax(0,1fr));max-width:570px}.intro .venue-choices{max-width:570px}.viewport{touch-action:auto}.intro{touch-action:pan-y;overflow-y:auto}
@media(max-width:760px){.intro .venue-choices button{font-size:9px;padding:8px 2px}.choosing .venue-detail{min-height:15px}}

/* In-game navigation remains available when the footer is out of view. */
.screen-actions{display:flex;gap:10px;margin-top:13px;flex-wrap:wrap}
.screen-actions.hidden{display:none}
.intro .screen-actions button{font-family:inherit;font-size:14px;font-weight:700;letter-spacing:0;padding:9px 12px;min-height:40px;background:#143f47;color:#f5eedb;border:1px solid #88aaa3;box-shadow:none}
.result-win .screen-actions{grid-column:1/-1;margin-top:3px}
/* HUD and bubbles each get their own readable space on small game views. */
:is(.game-expanded,.game-landscape) .hud{left:9px;right:9px;top:8px;gap:7px}
@media(orientation:landscape){
 :is(.game-expanded,.game-landscape) .task{min-width:0;max-width:260px;border-radius:12px}
 :is(.game-expanded,.game-landscape) .task span{font-size:10px;letter-spacing:.5px}
 :is(.game-expanded,.game-landscape) .task b{font-size:12px;line-height:1.2}
 :is(.game-expanded,.game-landscape) .intro .screen-actions{margin-top:8px;gap:7px}
 :is(.game-expanded,.game-landscape) .intro .screen-actions button{min-height:36px;padding:7px 10px}
}
@media(orientation:landscape) and (max-height:340px){
 :is(.game-expanded,.game-landscape) .intro:not(.choosing){align-items:flex-start;padding-top:10px}
 :is(.game-expanded,.game-landscape) .intro h1{margin:4px 0}
 :is(.game-expanded,.game-landscape) .intro p{margin-bottom:7px}
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:760px) and (orientation:portrait){
 .intro .venue-choices{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
 .intro .venue-choices button{min-height:44px;font-size:11px;padding:8px 6px}
}
@media(max-width:760px) and (orientation:portrait){
 .intro:not(.result-win){align-items:flex-start}
 .intro.choosing{padding:14px 16px}
 .choosing .eyebrow,.choosing #description,.choosing #screenHint{display:none}
 .choosing h1{font-size:39px;margin:6px 0}
}