:root{font-family:"Avenir Next",system-ui,sans-serif;color:#fff5df;background:#17293d;font-synthesis:none;--sr-ink:#24384a;--sr-accent:#38836e;--sr-paper:#fff6e2;--sr-edge:#b9ccba;--sr-shadow:#15253655}*{box-sizing:border-box}body{margin:0;overscroll-behavior:none}button{font:inherit;color:inherit;cursor:pointer;border:2px solid #e7d1a4;background:#24475a;padding:8px 14px;touch-action:manipulation}button:disabled{opacity:.55}button:hover:not(:disabled){filter:brightness(1.08)}[hidden]{display:none!important}.app{height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr) auto;max-width:1700px;margin:auto}.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;background:#142336;z-index:2}.brand{font-size:24px;font-weight:900;line-height:1.1}.brand span{display:block;font-size:16px;color:#cae2df;font-weight:650;margin-top:4px}.top-actions{display:flex;gap:8px}.icon-button{padding:6px;display:grid;place-items:center}.stage{min-height:0;position:relative;overflow:hidden}#world{width:100%;height:100%;display:block;touch-action:none;outline:none}.hud{position:absolute;inset:10px 12px auto;display:flex;justify-content:center;gap:10px;pointer-events:none}.hud-box{background:#142c40ed;border:1px solid #bdcdbb55;box-shadow:0 4px 12px #07152350;border-radius:14px;padding:6px 12px;min-width:90px;text-align:center}.hud-box strong{display:block;font-size:22px;line-height:1.2;font-variant-numeric:tabular-nums}.hud-box span{display:block;font-size:16px;color:#c8e1e3}.hud-box.danger{background:#873845}.hud-box.full{background:#a3293d;border-color:#ff8c98;color:#fff}.controls{display:flex;justify-content:center;align-items:center;gap:16px;padding:10px 16px max(10px,env(safe-area-inset-bottom));background:#142336}.hold{font-size:20px!important;min-height:58px!important;min-width:200px!important;border-radius:20px!important;background:linear-gradient(#ffeeb6,#ecc36c);color:#443328;border-color:#ffedb4;font-weight:900!important;touch-action:none}.hold[data-held=true]{background:#96dfb3;border-color:#d4ffe1;transform:translateY(2px);box-shadow:0 0 20px #8cebb055}.hint{font-size:16px;line-height:1.4;max-width:330px;margin:0}.toast{position:absolute;left:50%;top:96px;transform:translateX(-50%);max-width:90%;background:#fff7de;color:#263c42;box-shadow:0 4px 0 #152c4566;border-radius:20px;padding:8px 16px;font-size:20px;font-weight:900;text-align:center;pointer-events:none}.toast[data-kind=bank]{background:#baf0c3;font-size:28px;animation:bank-pop .3s ease-out}@keyframes bank-pop{50%{transform:translateX(-50%) scale(1.16)}}dialog{width:min(440px,calc(100vw - 32px));max-height:calc(100dvh - 24px);padding:24px;color:#24384a;background:#fff6e2;border:3px solid #bfd6c9;box-shadow:0 20px 80px #08132080}dialog::backdrop{background:#14233680;backdrop-filter:blur(4px)}dialog h2{font-size:28px;line-height:1.1;margin:6px 0 16px;font-weight:900}dialog p{font-size:16px;line-height:1.5}dialog button{color:#263c42;background:#fffbef;border-color:#b9ccba}.close{float:right;margin:-10px -8px 0 8px;padding:6px;display:grid;place-items:center}dialog .primary{width:100%;background:#387e6e;color:#fff8e2;border-color:#2d695d;margin-top:10px}#result-dialog{text-align:center}#result-title{font-size:28px}#result-score{font-size:48px;font-weight:950;line-height:1.1;margin:12px 0 4px;color:#3d7662}#result-meta,#result-best{font-size:20px;font-weight:800}#pause-dialog button:not(.close){width:100%;margin-top:12px}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.storage{position:fixed;bottom:6px;left:6px;background:#fff6df;color:#382c20;font-size:16px;padding:8px;z-index:20}
@media(max-width:740px){.top{padding:8px 12px}.brand{font-size:22px}.top-actions{gap:6px}.hud{inset:8px 8px auto;gap:6px}.hud-box{padding:5px 8px;min-width:0;flex:1;max-width:150px}.hud-box strong{font-size:20px}.hud-box span{font-size:16px}.controls{gap:10px;padding:8px 12px max(8px,env(safe-area-inset-bottom))}.hold{min-width:150px!important}.hint{font-size:16px}.toast{top:79px;font-size:18px;width:max-content;max-width:90%;padding:6px 12px}dialog.sr-sheet{padding-top:20px;padding-bottom:20px}.sr-sheet h2{font-size:28px}}
@media(max-width:360px){.top{padding:6px 10px}.brand{font-size:20px}.brand span{font-size:16px}.controls{flex-direction:column;gap:4px}.hold{width:100%;min-height:48px!important}.hint{font-size:16px;text-align:center}.hint br{display:none}.hud-box{padding:4px 5px}.toast{top:75px}.sr-sheet h2{font-size:28px}}
@media(min-width:741px) and (max-height:540px){.top{padding:6px 16px}.brand span{display:inline;margin-left:12px}.controls{padding:6px 16px}.hold{min-height:48px!important}.hud{justify-content:flex-start}.hud-box{min-width:100px}.toast{left:80%;top:18px;max-width:220px}}
html[data-reduced=true] *,html[data-reduced=true] *::after{animation:none!important;transition:none!important}
/* D60 review: the HUD has its own band. It never covers a room or a face. */
.stage{display:grid;grid-template-rows:74px minmax(0,1fr)}.hud{position:relative;inset:auto;grid-row:1;background:#142336;align-items:center;padding:6px 10px;gap:8px}.hud-box{min-width:100px;box-shadow:none}.hud-box span{white-space:nowrap}#world{grid-row:2;min-height:0}.toast{top:82px;z-index:3}#flood-label{height:22px;display:flex;justify-content:center}#flood-label svg{width:24px;height:22px}#water-box{display:flex;flex-direction:column-reverse;gap:1px}#result-dialog::backdrop{backdrop-filter:none;background:#14233633}#result-dialog{position:fixed;inset:12px auto auto 50%;transform:translateX(-50%);margin:0;width:min(400px,calc(100vw - 28px));max-height:calc(60dvh - 50px);padding:16px 20px;border:3px solid #bfd6c9;border-radius:24px}#result-dialog h2{margin:0 0 8px}#result-dialog #result-score{font-size:36px;margin:2px}#result-dialog p{margin:6px 0}#result-dialog #result-line{display:none}#result-dialog #result-best{font-size:20px}#result-dialog .primary{margin-top:6px}
@media(max-width:740px){.hud{inset:auto;padding:5px 8px;gap:6px}.hud-box{min-width:0;max-width:150px}.toast{top:80px;font-size:18px}#result-dialog.sr-sheet:before{display:none}}
@media(min-width:741px) and (max-height:540px){.hud{justify-content:center}.toast{left:50%;top:78px;width:max-content;max-width:90%}#result-dialog{inset:80px 18px auto auto;transform:none;width:310px;max-height:calc(100dvh - 100px)}}

/* Reserve two subtitle lines so the balloon goal never moves the play area. */
.top{min-height:82px}.brand{max-width:calc(100% - 118px)}.brand span{height:36px;line-height:18px;margin-top:4px}.top-actions{flex-shrink:0}@media(min-width:741px) and (max-height:540px){.top{min-height:66px}.brand{display:flex;align-items:center;gap:14px}.brand span{display:block;width:240px;height:36px;margin:0}}

/* The canvas uses explicit stage bounds. WebKit resolves a 100% grid-row height against the entire stage. */
.stage{display:block}.hud{height:74px}#world{position:absolute;inset:74px 0 0;width:100%;height:calc(100% - 74px)}

/* Final review: one HUD/footer layout across both phone widths. */
.hud{height:110px;display:grid;grid-template-columns:1fr 1fr 1.2fr;grid-template-rows:72px 24px;gap:0 6px;padding:5px 8px 9px;align-items:stretch;max-width:620px;margin:auto}
.hud-box{min-width:0;max-width:none!important;padding:4px 5px;display:flex;flex-direction:column;justify-content:center;gap:2px}.hud-box strong{font-size:20px}.hud-box span{font-size:16px;line-height:18px}.hud-box .hud-label{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:3px}.hud-label svg{width:24px;height:24px;flex-shrink:0}
#water-box{flex-direction:column;gap:0}#water-box strong{font-size:20px}#flood-label{height:24px}#flood-label svg{width:24px;height:24px}#water-below{line-height:18px}
#bank-hint{grid-column:1/-1;text-align:center;margin:3px 0 0;font-size:16px;line-height:22px;color:#f9e8b7;white-space:nowrap}
#world{inset:110px 0 0;height:calc(100% - 110px)}
@media(max-width:740px){.controls{flex-direction:row;gap:10px;padding:8px 10px max(8px,env(safe-area-inset-bottom))}.hold{width:auto;min-width:140px!important;min-height:58px!important;font-size:20px!important}.hint{font-size:16px;text-align:left;max-width:150px}.hint br{display:block}}
@media(min-width:741px){.hud-box span{font-size:16px}.hud-box strong,#water-box strong{font-size:24px}}

.stage{background:#142336}

.app{max-width:none}

/* Final polish: tips sit in reserved UI space, clear of the animals. */
#first-tips{position:absolute;z-index:3;top:82px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;background:#142336;font-size:16px;line-height:24px;white-space:nowrap;color:#fff0ba}
#first-tips b{font-weight:500;color:#9bdaca}#close-tip{position:absolute;top:108px;left:50%;transform:translateX(-50%);z-index:4;margin:0;padding:6px 9px;border-radius:0 0 12px 12px;background:#ffe1ad;color:#513824;font-size:16px;line-height:20px;font-weight:800;text-align:center;width:max-content;max-width:96%;pointer-events:none}
.hold.teach-hold::before{content:'☝';display:inline-block;margin-right:6px;animation:teach-hand .9s ease-in-out infinite}@keyframes teach-hand{50%{transform:translateY(-4px) scale(1.1)}}
#score.bank-score{animation:score-pop .65s ease-out}@keyframes score-pop{30%{transform:scale(1.24);color:#ffe08d}100%{transform:scale(1)}}
#result-dialog{inset:204px auto auto 50%;max-height:calc(100dvh - 290px);overflow:auto}
@media(max-height:650px){#result-dialog{inset:196px auto auto 50%;max-height:calc(100dvh - 274px);padding:10px 16px}#result-dialog h2{font-size:28px}#result-dialog #result-score{font-size:30px}#result-dialog p{font-size:20px;margin:3px 0}}
@media(min-width:741px) and (max-height:540px){#result-dialog{inset:184px 18px auto auto;transform:none;max-height:calc(100dvh - 194px)}}

#first-tips span{display:flex;align-items:center;gap:4px}#first-tips svg{width:20px;height:20px;flex-shrink:0}

.hold{position:relative}.hold.teach-hold::before{position:absolute;right:5px;top:-9px;margin:0;line-height:22px}

.hud-box.full span{color:#ffe7e9}

.privacy-link{color:inherit;font-size:18px;text-underline-offset:3px}


/* Portal round: one instruction row and controls sized for desktop play. */
.hud{height:116px;grid-template-rows:76px 26px;padding-bottom:8px}
#world{inset:116px 0 0;height:calc(100% - 116px)}
#instruction{position:absolute;top:82px;left:0;width:100%;margin:0;padding:0 8px;color:#fff0ba;font-size:18px;font-weight:750;line-height:26px;text-align:center;pointer-events:none}
.hold.teach-hold::before{content:none}
@media(min-width:741px){
 .hud{height:134px;max-width:820px;grid-template-rows:84px 34px;padding:6px 10px 10px;gap:0 12px}
 .hud-box .hud-label,.hud-box span{font-size:20px;line-height:24px}
 .hud-box strong,#water-box strong{font-size:32px;line-height:38px}
 #water-below{line-height:22px}
 #instruction{top:98px;font-size:24px;line-height:30px}
 #world{inset:134px 0 0;height:calc(100% - 134px)}
 .hold{min-width:260px!important;min-height:72px!important;font-size:26px!important}
 .controls{padding:10px 16px}
}
@media(min-width:741px) and (max-height:540px){
 .top{min-height:58px;padding:4px 14px}.brand span{height:32px;line-height:16px}
 .hud{height:112px;grid-template-rows:72px 26px;padding:4px 10px}
 #instruction{top:80px;font-size:20px;line-height:28px}
 #world{inset:112px 0 0;height:calc(100% - 112px)}
 .hold{min-height:56px!important}.controls{padding:6px 16px}
}

/* Ten friends form a compact loss counter, separate from the world. */
.hud{height:146px;grid-template-rows:76px 30px 26px}
#world{inset:146px 0 0;height:calc(100% - 146px)}
#instruction{top:112px}
#losses{grid-column:1/-1;grid-row:2;display:flex;align-items:center;justify-content:center;gap:3px;white-space:nowrap}
.loss-label{font-size:16px;font-weight:750;margin-right:5px}.friend-mark{position:relative;display:block;width:22px;height:24px;flex:none}.friend-mark svg{width:22px;height:24px;display:block}.friend-shape{fill:none;stroke:#a0b8c8;stroke-width:1.3;opacity:.38}.friend-face,.friend-drop{display:none}.friend-mark.lost .friend-shape{fill:#4b6072;stroke:#dce8ed;opacity:1}.friend-mark.lost .friend-face{display:block;fill:none;stroke:#f3e8d2;stroke-width:1.4;stroke-linecap:round}.friend-mark.lost .friend-drop{display:block;fill:#91e0f1;stroke:#213447;stroke-width:.5}
.friend-mark.loss-splash::after{content:'';position:absolute;inset:1px;border:3px dotted #92efff;border-radius:50%;animation:loss-splash .45s ease-out forwards;pointer-events:none}
@keyframes loss-splash{0%{opacity:1;transform:scale(.5)}100%{opacity:0;transform:scale(1.6)}}
#result-rate{font-size:20px;font-weight:750}
html[data-reduced=true] .friend-mark.loss-splash::after{display:none}
@media(min-width:741px){.hud{height:168px;grid-template-rows:84px 32px 34px}#world{inset:168px 0 0;height:calc(100% - 168px)}#instruction{top:132px}.friend-mark,.friend-mark svg{width:26px;height:28px}.loss-label{font-size:20px}}
@media(min-width:741px) and (max-height:540px){.hud{height:144px;grid-template-rows:72px 30px 26px}#world{inset:144px 0 0;height:calc(100% - 144px)}#instruction{top:112px}}
/* Results begin below the enlarged HUD. The disabled hold control can sit behind them. */
#result-dialog{inset:240px auto auto 50%;max-height:calc(100dvh - 252px)}
@media(min-width:741px){#result-dialog{inset:262px auto auto 50%;max-height:calc(100dvh - 274px)}}
@media(min-width:741px) and (max-height:540px){#result-dialog{inset:214px auto auto 50%;transform:translateX(-50%);width:min(480px,calc(100vw - 28px));max-height:calc(100dvh - 224px);padding:8px 14px}#result-dialog h2{font-size:28px;line-height:1.05;margin-bottom:3px}#result-dialog #result-score{font-size:30px;line-height:1}#result-dialog p{font-size:20px;line-height:1.1;margin:3px 0}#result-dialog .primary{margin-top:3px}}
@media(min-width:741px) and (max-height:540px){.hud{height:152px;grid-template-rows:80px 30px 26px}#world{inset:152px 0 0;height:calc(100% - 152px)}#instruction{top:120px}.hud-box .hud-label{font-size:20px;line-height:22px}.hud-box strong,#water-box strong{font-size:28px;line-height:30px}#water-below{font-size:20px;line-height:20px}#result-dialog{inset:222px auto auto 50%;max-height:calc(100dvh - 232px)}}

#losses.loss-danger{border-radius:9px;animation:loss-danger .65s ease-out}
@keyframes loss-danger{0%,100%{background:transparent;box-shadow:none}25%{background:#8f3438;box-shadow:0 0 0 2px #ff8b84}}
html[data-reduced=true] #losses.loss-danger{animation:none;color:#ffb0a8}

/* Short runs teach the missed action without a scroll inside the result. */
#result-dialog.early-result{width:min(440px,calc(100vw - 16px));padding:10px 12px}
.early-result .result-stats{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:2px 8px}
#result-dialog.early-result #result-score{grid-column:1;grid-row:1;font-size:32px;margin:0}
#result-dialog.early-result #result-meta{grid-column:2;grid-row:1;font-size:20px}
#result-dialog.early-result #result-rate{grid-column:2;grid-row:2;font-size:20px}
#result-dialog.early-result #result-best{grid-column:1;grid-row:2;font-size:20px}
#result-dialog.early-result #result-tip{font-size:18px;line-height:1.25;margin:8px 0 2px}
@media(min-width:741px) and (max-height:540px){
 #result-dialog.early-result{width:min(720px,calc(100vw - 28px));padding:8px 14px}
 #result-dialog.early-result[open]{display:grid;grid-template-columns:1fr 1fr;gap:2px 18px;align-items:center}
 #result-dialog.early-result h2{grid-column:1/-1}
 .early-result .result-stats{grid-column:1;grid-row:2/4}
 #result-dialog.early-result #result-tip{grid-column:2;grid-row:2;font-size:20px;margin:2px 0}
 #result-dialog.early-result #again{grid-column:2;grid-row:3}
 #result-dialog.early-result #result-meta,#result-dialog.early-result #result-rate,#result-dialog.early-result #result-best{font-size:20px}
}
#result-dialog.early-result #result-best{grid-column:2;grid-row:1;white-space:nowrap}
#result-dialog.early-result #result-meta{grid-column:1/-1;grid-row:2}
#result-dialog.early-result #result-rate{grid-column:1/-1;grid-row:3}
@media(max-width:740px){#result-dialog.early-result .result-stats{grid-template-columns:44px 1fr;gap:0}#result-dialog.early-result .result-stats p{margin:1px 0;line-height:1.15}#result-dialog.early-result h2{margin-bottom:4px}}

.result-actions{display:flex;gap:8px;align-items:stretch;margin-top:6px}
#result-dialog .result-actions #again{width:auto;flex:1;min-width:0;margin:0}
#result-settings{flex:none;width:48px;min-height:48px;display:grid;place-items:center;padding:8px}
@media(min-width:741px) and (max-height:540px){#result-dialog.early-result .result-actions{grid-column:2;grid-row:3;margin-top:3px}}

/* All Settings actions stay together on short screens. */
.settings-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.settings-actions #tutorial-skip{grid-column:1/-1}.settings-actions .primary{margin:0;width:auto}#settings-dialog h2{margin-bottom:12px}#settings-dialog p{margin:12px 0}
@media(max-height:600px){#settings-dialog{padding:16px!important}#settings-dialog h2{font-size:28px}#settings-dialog p{line-height:1.35;margin:10px 0}}
@media(min-width:741px) and (max-height:540px){#settings-dialog{width:560px}#settings-dialog p{margin:8px 0}#settings-dialog #sound,#settings-dialog #music{display:inline-flex;width:calc(50% - 6px);margin-bottom:0}#settings-dialog #music{margin-left:6px}#settings-dialog #motion{display:flex;width:100%;margin:12px 0}}

/* Landscape: keep the tower large and put status in one top row. */
.brand-short{display:none}
@media(orientation:landscape){
 .app{grid-template-rows:58px minmax(0,1fr)}
 .top{height:58px;min-height:58px;padding:4px 8px;gap:4px}
 .brand{display:block;font-size:20px;max-width:70px}.brand-full,.brand #zone{display:none}.brand-short{display:inline}
 .top-actions{gap:4px}.top-actions button{width:48px;min-width:48px;height:48px;padding:6px}
 .hud{position:fixed;z-index:3;top:4px;left:82px;right:116px;inset-block-end:auto;display:flex;align-items:center;justify-content:space-evenly;gap:8px;max-width:none;height:48px;margin:0;padding:0;background:transparent}
 .hud-box{flex:none;flex-direction:row;align-items:center;gap:4px;min-width:64px;padding:2px 3px;border-radius:8px}
 .hud-box .hud-label{font-size:0;line-height:0;gap:0}.hud-box .hud-label svg{width:24px;height:24px}
 .hud-box strong,#water-box strong{font-size:20px;line-height:24px}#water-box{flex-direction:row;gap:4px}#water-below{display:none}
 #losses{flex:none;gap:1px;height:30px}.loss-label{font-size:20px;margin-right:3px}.friend-mark,.friend-mark svg{width:18px;height:22px}
 #world{inset:0;width:100%;height:100%}
 .controls{position:fixed;z-index:3;left:10px;bottom:10px;padding:0;background:transparent;display:block}
 .hold{min-width:140px!important;min-height:48px!important;font-size:20px!important;border-radius:24px!important;padding:8px 14px}
 #instruction{position:fixed;z-index:2;top:auto;bottom:18px;left:168px;width:calc(100% - 340px);font-size:20px;line-height:26px;padding:0}
 #result-dialog{inset:76px auto auto 50%;max-height:calc(100dvh - 92px)}
}

@media(orientation:landscape) and (min-width:1000px){
 .app{grid-template-rows:64px minmax(0,1fr)}.top{height:64px;min-height:64px}.brand{font-size:24px;max-width:88px}
 .hud{left:102px;right:140px;height:56px;gap:12px}.hud-box strong,#water-box strong{font-size:24px;line-height:28px}
 .top-actions button{width:56px;min-width:56px;height:56px}.friend-mark,.friend-mark svg{width:20px;height:24px}
 .hold{min-width:170px!important;min-height:56px!important;font-size:24px!important}
 #instruction{left:200px;width:calc(100% - 400px);font-size:22px;line-height:28px}#result-dialog{inset-block-start:80px}
}
@media(orientation:landscape) and (min-width:1600px){
 .app{grid-template-rows:72px minmax(0,1fr)}.top{height:72px;min-height:72px}.hud{height:64px}
 .hud-box strong,#water-box strong{font-size:28px;line-height:32px}.loss-label{font-size:24px}.friend-mark,.friend-mark svg{width:22px;height:26px}
 #result-dialog{inset-block-start:88px}
}

/* Water status has its own bottom strip, outside the drawable world. */
.stage{--water-strip:40px;--water-color:105 195 255;--hold-lane:0px}
.hud{grid-template-columns:1fr 1fr}
#world{height:calc(100% - 146px - var(--water-strip))}
#water-gauge{position:absolute;z-index:2;bottom:0;left:50%;transform:translateX(-50%);height:var(--water-strip);display:flex;align-items:center;justify-content:center;padding:0 12px;white-space:nowrap;color:#fff5df;pointer-events:none}
#clearance{font-size:20px;font-weight:800;line-height:26px;font-variant-numeric:tabular-nums;text-shadow:0 2px 3px #071523}
#water-glow{position:absolute;z-index:1;bottom:0;left:var(--hold-lane);right:0;height:var(--water-strip);border-bottom:3px solid rgb(var(--water-color));background:linear-gradient(transparent,rgb(var(--water-color) / .24));pointer-events:none}
.stage[data-water-danger=true] #water-glow{animation:water-urgency 1s ease-in-out infinite}
@keyframes water-urgency{0%,100%{opacity:.55}50%{opacity:1}}
html[data-reduced=true] #water-glow{animation:none!important;background:none;border-bottom:3px solid rgb(var(--water-color))}
@media(min-width:741px) and (orientation:portrait){#world{height:calc(100% - 168px - var(--water-strip))}}
@media(orientation:landscape){
 .stage{--water-strip:32px;--hold-lane:168px}
 #world{height:calc(100% - var(--water-strip))}
 #instruction{bottom:calc(var(--water-strip,32px) + 12px)}
}
@media(orientation:landscape) and (min-width:1000px){
 .stage{--water-strip:40px;--hold-lane:200px}
 #clearance{font-size:24px;line-height:30px}
 #instruction{bottom:52px}
}

/* First entry waits for a deliberate start. Restart returns directly to play. */
#start-card{position:fixed;z-index:5;left:50%;top:50%;margin:0;transform:translate(-50%,-50%);width:min(520px,calc(100vw - 28px));max-height:calc(100dvh - 24px);padding:20px;color:#24384a;background:#fff6e2;border:3px solid #bfd6c9;border-radius:24px;box-shadow:0 12px 60px #08132066;overflow:auto;transition:opacity .3s ease,transform .3s ease;touch-action:none;outline:none}
#start-card.leaving{opacity:0;transform:translate(-50%,-50%) translateY(-16px);pointer-events:none}
html[data-reduced=true] #start-card{transition:none}
#start-title{font-size:32px;line-height:1.15;margin:0 0 18px;text-align:center}
#start-rules{list-style:none;margin:0;padding:0;display:grid;gap:16px}
#start-rules li{display:grid;grid-template-columns:32px minmax(0,1fr);align-items:center;gap:12px;font-size:18px;line-height:1.35;font-weight:650}
.start-icon{display:block;width:32px;height:32px;color:#38836e}
#start-prompt{margin:20px 0 0;text-align:center;font-size:18px;line-height:1.3;font-weight:850;color:#326b59}
@media(max-height:420px){#start-card{padding:14px 20px}#start-title{font-size:28px;margin-bottom:12px}#start-rules{gap:10px}#start-rules li{font-size:16px}#start-prompt{margin-top:12px;font-size:16px}}