:root{--zc-bg:#f3f1eb;--zc-fg:#25392f;--zc-accent:#2f7468;color-scheme:light;
 /* Sea-glass over a pale shore: the HUD shares the island's mint by default and follows the chosen flavor. */
 --accent:#2f7468;--accent-ink:#f6fbf8;
 --hud-glass:rgba(250,251,247,.64);--hud-glass-solid:rgba(250,251,247,.95);--hud-edge:rgba(42,74,64,.14);--hud-ink:#213a31;--hud-muted:#4e675d;--hud-soft:rgba(42,74,64,.07);--hud-pressed:rgba(42,74,64,.13);--hud-shadow:0 14px 40px rgba(31,58,52,.16);
 --hud-inset:max(14px,env(safe-area-inset-bottom));--dock-h:56px;--bg:#eef1ec;
 /* Serif faces whose default figures are lining; Georgia (old-style figures only) is the last resort. */
 --serif-lining:"Palatino Linotype",Palatino,"Book Antiqua","Noto Serif",Georgia,serif}
:root[data-light=sunset]{--bg:#f6e4d6;--hud-glass:rgba(255,248,243,.62);--hud-edge:rgba(110,70,60,.14);--hud-ink:#3d2a27;--hud-muted:#6d544d;--hud-soft:rgba(110,70,60,.07);--hud-pressed:rgba(110,70,60,.13)}
/* At night the glass turns smoky and the type turns pale. */
:root[data-light=night]{color-scheme:dark;--bg:#1b2840;--hud-glass:rgba(20,30,48,.6);--hud-glass-solid:rgba(20,30,48,.95);--hud-edge:rgba(200,215,255,.16);--hud-ink:#e8eefc;--hud-muted:#b7c3dc;--hud-soft:rgba(220,230,255,.08);--hud-pressed:rgba(220,230,255,.15);--hud-shadow:0 14px 40px rgba(0,0,0,.35);--accent-ink:#0f1a2b}
*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden}
body{background:var(--bg);color:var(--hud-ink);font:15px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;font-variant-numeric:lining-nums tabular-nums}
/* The page stays invisible until it is written in the chosen language. */
html:not(.localized) main{visibility:hidden}
button,input{font:inherit;color:inherit}
button{cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none}
button:disabled{opacity:.5;cursor:default}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
:root[data-light=night] :focus-visible{outline-color:#cfe0ff}
[hidden]{display:none!important}
.isle{position:relative;width:100%;height:100vh;height:100dvh;overflow:hidden;isolation:isolate}

/* The jelly island is the screen. */
.stage{position:absolute;inset:0;z-index:0;touch-action:none;cursor:grab}
.stage:active{cursor:grabbing}
[data-stir=true] .stage{cursor:crosshair}
.stage canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
#scene:focus-visible{outline:2px solid var(--accent);outline-offset:-6px}
.paint{z-index:1;pointer-events:none}

/* Small numbers that float up from where a pearl was gathered or a ring was passed. */
.floaters{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden}
.floaters span{position:absolute;transform:translate(-50%,-50%);font:700 20px/1 system-ui,sans-serif;color:#fffdf6;text-shadow:0 1px 3px rgba(25,45,40,.45),0 0 14px rgba(255,236,190,.8);animation:float-up 1.1s ease-out forwards;white-space:nowrap}
.floaters span.gold{color:#ffe7a6;font-size:24px}
@keyframes float-up{0%{opacity:0;transform:translate(-50%,-30%) scale(.8)}15%{opacity:1;transform:translate(-50%,-60%) scale(1.06)}100%{opacity:0;transform:translate(-50%,-180%) scale(1)}}

/* One small status card in the top-right corner, only while a game runs. */
.corner{position:absolute;z-index:3;top:max(14px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));display:flex;flex-direction:column;align-items:flex-end;gap:1px;max-width:min(260px,calc(100% - 92px));padding:9px 15px 10px;border-radius:20px;background:var(--hud-glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--hud-edge);color:var(--hud-ink);pointer-events:none;text-align:right;transition:opacity .25s ease}
.corner[data-empty=true]{opacity:0}
.game-title{margin:0 0 2px;font:600 10px/1.4 system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--hud-muted)}
[data-frame=embedded] .game-title,:root:not([data-frame]) .game-title{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
[data-frame=standalone] .corner[data-empty=true]{opacity:1}
[data-frame=standalone] .corner[data-empty=true] .score,[data-frame=standalone] .corner[data-empty=true] .detail{display:none}
[data-frame=standalone] .corner[data-empty=true] .game-title{margin:0}
.score{margin:0;font:400 19px/1.25 var(--serif-lining);color:var(--hud-ink)}
.score:empty,.detail:empty{display:none}
.detail{margin:0;font-size:12px;line-height:1.45;color:var(--hud-muted)}
.timebar{width:120px;height:3px;margin-top:5px;border-radius:2px;background:var(--hud-soft);overflow:hidden}
.timebar span{display:block;height:100%;width:100%;border-radius:2px;background:var(--accent);transform-origin:left center}

/* First visit: one line of purpose and one gesture, placed on the thing to touch. */
.hint{position:absolute;z-index:12;left:50%;top:auto;bottom:calc(var(--hud-inset) + var(--dock-h) + 58px);transform:translate(-50%,0);width:max-content;max-width:min(330px,calc(100% - 32px));padding:11px 44px 12px 16px;border-radius:20px;background:var(--hud-glass-solid);border:1px solid var(--hud-edge);box-shadow:var(--hud-shadow);color:var(--hud-ink);animation:hint-in .4s ease both;pointer-events:auto}
.hint[data-placed=true]{bottom:auto;transform:translate(-50%,calc(-100% - 22px))}
.hint::after{content:"";position:absolute;left:calc(50% + var(--arrow,0px));bottom:-7px;width:12px;height:12px;margin-left:-6px;background:inherit;border-right:1px solid var(--hud-edge);border-bottom:1px solid var(--hud-edge);transform:rotate(45deg)}
.hint-purpose{margin:0 0 4px;font:14px/1.45 Georgia,serif;color:var(--hud-muted)}
.hint-gesture{margin:0;font:600 15px/1.35 system-ui,sans-serif}
.hint-gesture::before{content:"";display:inline-block;width:9px;height:9px;margin-right:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 60%,transparent);vertical-align:1px;animation:pulse 1.6s ease-out infinite}
.hint-close{position:absolute;top:4px;right:4px;display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--hud-muted)}
.hint-close:hover{background:var(--hud-soft)}
.hint-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
@keyframes hint-in{from{opacity:0;translate:0 6px}}
@keyframes pulse{70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* A short guidance line rises above the dock and fades; a lost connection stays. */
#status{position:absolute;z-index:9;left:50%;bottom:calc(var(--hud-inset) + var(--dock-h) + 10px);transform:translateX(-50%);width:max-content;max-width:min(560px,calc(100% - 32px));margin:0;padding:6px 15px;border-radius:999px;background:var(--hud-glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--hud-edge);font:italic 14px/1.4 Georgia,serif;color:var(--hud-ink);text-align:center;opacity:0;pointer-events:none}
#status[data-fresh=true]:not(:empty){opacity:1;animation:guide-line 5.5s ease forwards}
#status[data-persist=true]:not(:empty){opacity:1;animation:none}
@keyframes guide-line{0%{opacity:0;translate:0 4px}6%{opacity:1;translate:0 0}80%{opacity:1}100%{opacity:0}}
[data-overlay=true] #status{opacity:0!important}

/* The dock: games, the one action that fits the moment, sound, and options. */
.dock{position:absolute;z-index:10;left:50%;bottom:var(--hud-inset);transform:translateX(-50%);display:flex;align-items:center;gap:3px;max-width:calc(100% - 24px);padding:5px;border-radius:999px;background:var(--hud-glass);-webkit-backdrop-filter:blur(18px) saturate(1.15);backdrop-filter:blur(18px) saturate(1.15);border:1px solid var(--hud-edge);box-shadow:var(--hud-shadow)}
.dock button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;height:44px;padding:0 17px;border:0;border-radius:999px;background:transparent;color:var(--hud-ink);font:500 14px/1 system-ui,sans-serif;white-space:nowrap;transition:background-color .22s ease,color .22s ease,transform .22s ease}
.dock button:hover:not(:disabled){background:var(--hud-soft)}
.dock button:active:not(:disabled){transform:scale(.97)}
.dock .primary{background:var(--accent);color:var(--accent-ink);font-weight:600;min-width:104px}
.dock .primary:hover:not(:disabled){background:color-mix(in srgb,var(--accent) 86%,#fff)}
.dock svg{flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.dock-games{padding:0 16px 0 13px!important}
.dock-games[aria-expanded=true],.dock-options[aria-expanded=true]{background:var(--hud-pressed)}
.dock-icon{padding:0!important;width:44px}
.dock-icon .mute{display:inline}.dock-icon .wave{display:none}
.dock-icon[aria-pressed=true] .mute{display:none}.dock-icon[aria-pressed=true] .wave{display:inline}
.dock-rule{flex:none;width:1px;height:24px;margin:0 3px;background:var(--hud-edge)}
.dock-options{padding:0 16px 0 13px!important}

/* Floating cards over the scene: the game picker and the end-of-run card share one place above the dock. */
.picker,.result{position:absolute;z-index:20;left:50%;bottom:calc(var(--hud-inset) + var(--dock-h) + 12px);width:min(560px,calc(100% - 24px));border-radius:20px;background:var(--hud-glass);-webkit-backdrop-filter:blur(22px) saturate(1.15);backdrop-filter:blur(22px) saturate(1.15);border:1px solid var(--hud-edge);box-shadow:var(--hud-shadow),inset 0 1px rgba(255,255,255,.3);color:var(--hud-ink)}
.picker{padding:10px 10px 12px;transform:translate(-50%,10px);opacity:0;visibility:hidden;transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s;max-height:calc(100% - var(--hud-inset) - var(--dock-h) - 12px - max(70px,env(safe-area-inset-top)));overflow:auto}
.picker[data-open=true]{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .22s ease,transform .22s ease}
.picker-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:2px 2px 6px 10px}
.picker h2{margin:0;font:400 18px/1.3 Georgia,serif}
.picks{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.pick{display:flex;align-items:flex-start;gap:12px;min-height:72px;padding:11px 12px;border:1px solid transparent;border-radius:16px;background:var(--hud-soft);text-align:left;transition:background-color .22s ease,border-color .22s ease,transform .22s ease}
.pick:hover{background:var(--hud-pressed)}
.pick:active{transform:scale(.985)}
.pick[aria-current=true]{border-color:color-mix(in srgb,var(--accent) 55%,transparent);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.pick svg{flex:none;width:34px;height:34px;margin-top:1px;padding:6px;border-radius:12px;background:color-mix(in srgb,var(--accent) 16%,transparent);fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
:root[data-light=night] .pick svg{stroke:#cfe0ff;background:rgba(207,224,255,.12)}
.pick-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.pick-name{font:600 15px/1.3 system-ui,sans-serif}
.pick-line{font-size:12.5px;line-height:1.4;color:var(--hud-muted)}
.pick-best{font:500 12px/1.4 system-ui,sans-serif;color:var(--hud-muted)}
.pick-best:empty{display:none}
.panel-close{display:grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--hud-ink);transition:background-color .22s ease}
.panel-close:hover{background:var(--hud-soft)}
.panel-close svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}

.result{transform:translateX(-50%);width:min(400px,calc(100% - 24px));padding:18px 20px 16px;text-align:center;animation:result-in .45s cubic-bezier(.2,.8,.2,1) both}
.result:focus{outline:none}
@keyframes result-in{from{opacity:0;translate:0 14px;scale:.97}}
.eyebrow{margin:0;font:600 10px/1.4 system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--hud-muted)}
.result h2{margin:4px 0 4px;font:400 24px/1.2 Georgia,serif}
.result-line{margin:0;font:15px/1.5 var(--serif-lining);color:var(--hud-muted)}
.result-best{display:inline-block;margin:8px 0 0;padding:3px 12px;border-radius:999px;background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--hud-ink);font:600 12px/1.6 system-ui,sans-serif;letter-spacing:.04em}
.result-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:14px}
.result-actions button{min-height:44px;padding:0 18px;border:0;border-radius:999px;background:var(--hud-soft);font:500 14px/1 system-ui,sans-serif}
.result-actions button:hover{background:var(--hud-pressed)}
.result-actions .primary{background:var(--accent);color:var(--accent-ink);font-weight:600}

/* Options: a floating drawer on the right of wide landscape frames, a sheet above the dock elsewhere. */
.panel{position:absolute;z-index:30;left:50%;bottom:calc(var(--hud-inset) + var(--dock-h) + 10px);width:min(520px,calc(100% - 24px));max-height:calc(100% - var(--hud-inset) - var(--dock-h) - 10px - max(64px,env(safe-area-inset-top)));display:flex;flex-direction:column;border-radius:20px;background:var(--hud-glass);-webkit-backdrop-filter:blur(22px) saturate(1.15);backdrop-filter:blur(22px) saturate(1.15);border:1px solid var(--hud-edge);box-shadow:var(--hud-shadow),inset 0 1px rgba(255,255,255,.3);color:var(--hud-ink);transform:translate(-50%,12px);opacity:0;visibility:hidden;transition:opacity .24s ease,transform .24s ease,visibility 0s linear .24s}
.panel[data-open=true]{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .24s ease,transform .24s ease}
@media (min-width:900px) and (orientation:landscape){
 .panel{left:auto;right:max(16px,env(safe-area-inset-right));top:max(72px,env(safe-area-inset-top));bottom:calc(var(--hud-inset) + var(--dock-h) + 12px);width:360px;max-height:none;transform:translateX(14px)}
 .panel[data-open=true]{transform:none}
}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 8px 4px 20px}
.panel h2{margin:0;font:400 20px/1.3 Georgia,serif}
.panel-body{overflow:auto;padding:4px 20px 18px;overscroll-behavior:contain}
.group{padding:12px 0 14px;border-top:1px solid var(--hud-edge)}
.group:first-child{border-top:0}
.group h3{margin:0 0 9px;font:600 11px/1.4 system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--hud-muted)}
.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.swatch{display:flex;flex-direction:column;align-items:center;gap:6px;min-height:76px;padding:9px 2px 8px;border:1px solid transparent;border-radius:14px;background:transparent;font-size:11.5px;line-height:1.25;text-align:center;transition:background-color .22s ease,border-color .22s ease}
.swatch:hover{background:var(--hud-soft)}
.swatch[aria-pressed=true]{border-color:color-mix(in srgb,var(--accent) 50%,transparent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.orb{position:relative;width:30px;height:30px;border-radius:50%;box-shadow:inset -3px -4px 6px rgba(40,70,60,.14),inset 3px 3px 7px rgba(255,255,255,.6),0 3px 7px rgba(30,50,40,.12)}
.orb::after{content:"";position:absolute;width:8px;height:4px;border-radius:50%;background:rgba(255,255,255,.7);top:6px;left:7px;transform:rotate(-35deg)}
.orb-lagoon{background:radial-gradient(circle at 31% 25%,#d6faf2,#84d7ca 46%,#56ad9e)}
.orb-peach{background:radial-gradient(circle at 31% 25%,#ffe4df,#efb1b0 46%,#dd9696)}
.orb-citrus{background:radial-gradient(circle at 31% 25%,#f4fac5,#d2df7f 46%,#a9c465)}
.orb-berry{background:radial-gradient(circle at 31% 25%,#eee8ff,#bfaef3 46%,#8f78db)}
.segments{display:flex;gap:4px;padding:3px;border-radius:999px;background:var(--hud-soft)}
.segment{flex:1;min-height:40px;padding:0 10px;border:0;border-radius:999px;background:transparent;font:500 13.5px/1 system-ui,sans-serif;transition:background-color .22s ease,color .22s ease}
.segment[aria-pressed=true]{background:var(--hud-glass-solid);box-shadow:0 1px 4px rgba(20,40,35,.12)}
.slider{margin-top:6px}
.slider-head{display:flex;justify-content:space-between;align-items:baseline;font-size:13.5px}
.slider-head output{font:500 12.5px/1 system-ui,sans-serif;color:var(--hud-muted)}
.slider input{appearance:none;-webkit-appearance:none;display:block;width:100%;height:28px;margin:2px 0 0;background:transparent;cursor:pointer;accent-color:var(--accent)}
.slider input::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(90deg,var(--accent) var(--fill,50%),var(--hud-pressed) var(--fill,50%))}
.slider input::-moz-range-track{height:4px;border-radius:4px;background:var(--hud-pressed)}
.slider input::-moz-range-progress{height:4px;border-radius:4px;background:var(--accent)}
.slider input::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-7px;border-radius:50%;border:3px solid var(--hud-glass-solid);background:var(--accent);box-shadow:0 1px 4px rgba(20,40,35,.25)}
.slider input::-moz-range-thumb{width:13px;height:13px;border-radius:50%;border:3px solid var(--hud-glass-solid);background:var(--accent)}
.slider-ends{display:flex;justify-content:space-between;font-size:11.5px;color:var(--hud-muted);margin-top:-2px}
.switch{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:44px;margin-top:6px;padding:0;border:0;background:transparent;font-size:14px;text-align:left}
.track{position:relative;flex:none;width:36px;height:21px;border-radius:999px;background:var(--hud-pressed);transition:background-color .22s ease}
.track::after{content:"";position:absolute;top:3px;left:3px;width:15px;height:15px;border-radius:50%;background:var(--hud-glass-solid);box-shadow:0 1px 3px rgba(20,40,35,.25);transition:transform .22s ease}
.switch[aria-pressed=true] .track{background:var(--accent)}
.switch[aria-pressed=true] .track::after{transform:translateX(15px)}
.text-button{min-height:40px;margin-top:6px;padding:0 14px;border:1px solid var(--hud-edge);border-radius:999px;background:transparent;font:500 13px/1 system-ui,sans-serif}
.text-button:hover{background:var(--hud-soft)}
.log dl{margin:0;display:grid;gap:6px}
.log dl div{display:flex;justify-content:space-between;gap:12px;font-size:14px}
.log dt{color:var(--hud-muted)}
.log dd{margin:0;font:13.5px/1.5 system-ui,sans-serif;text-align:right}
.small{margin:8px 0 0;font-size:12.5px;line-height:1.55;color:var(--hud-muted)}
.howto ul{margin:0;padding-left:18px;display:grid;gap:6px;font-size:13.5px;line-height:1.5}

/* Narrow frames: the dock keeps its icons; labels give way first. */
@media (max-width:560px){
 .picks{grid-template-columns:1fr}
 .pick{min-height:60px;padding:9px 11px}
 .dock button{padding:0 13px}
 .dock .primary{min-width:84px}
}
@media (max-width:430px){
 .dock .dock-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .dock-games,.dock-options{width:44px;padding:0!important}
 .corner{max-width:calc(100% - 96px)}
 .swatch{font-size:10.5px}
}
@media (max-height:460px){
 :root{--dock-h:52px}
 .dock button{height:40px}
 .picks{grid-template-columns:1fr 1fr}
 .pick{min-height:54px;padding:7px 10px}.pick-line{display:none}
}
@media (max-width:300px){.dock-rule{display:none}.dock button{padding:0 10px}.dock .primary{min-width:0}
 .picks{grid-template-columns:1fr}.pick{min-height:46px;padding:6px 10px;align-items:center}.pick svg{width:30px;height:30px;padding:5px}.pick-line,.pick-best{display:none}.picker h2{font-size:15px}}
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
 #status[data-fresh=true]:not(:empty){animation:none;opacity:1}
}