/* beta11: fluid layout for any CSS width (incl. Android Chrome page zoom from OS font size: a 412 px phone at 130% is ~317 CSS px),
   real safe areas (notch, gesture bar), no prototype device chrome. Loaded last. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
*,*::before,*::after{box-sizing:border-box}
img,svg,video,canvas{max-width:100%}
#app{overflow:hidden}
/* bottom nav: height grows with the gesture bar inset (min 12 px when the browser reports none), labels never clipped */
:root{--nav-pad:max(var(--sab),12px);--end-pad:calc(var(--nav-h) + var(--nav-pad) + 20px)}
#app>.tabs{height:auto;min-height:calc(64px + var(--nav-pad));padding:8px max(4px,var(--sar)) var(--nav-pad) max(4px,var(--sal));align-items:flex-start}
#app>.tabs a{flex:1 1 0;min-width:0;width:auto;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-bottom:2px}
/* map HUD + control column: HUD shrinks before it can reach the right-hand controls */
.s-map .ov{top:calc(44px + var(--sat));left:max(12px,var(--sal));right:max(12px,var(--sar));gap:8px}
.s-map .ov .hud{min-width:0;flex:1 1 auto;flex-wrap:nowrap;gap:6px;overflow:hidden}
.s-map .ov .pill{flex:0 1 auto;min-width:0;white-space:nowrap;padding-right:10px}
.s-map .fab{right:max(12px,var(--sar))}
.s-map .fab[aria-label="Centre"]{top:calc(150px + var(--sat))!important}.s-map .fab:not([aria-label="Centre"])[style*="top:194px"]{top:calc(202px + var(--sat))!important}
/* festival strip: stops before the control column, scrolls, chips never hard-cut (fade + snap) */
.s-map .fstrip{top:calc(96px + var(--sat));left:max(12px,var(--sal));right:max(12px,var(--sar));scroll-snap-type:x proximity;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);padding-right:28px}
.s-map .fc{scroll-snap-align:start;max-width:calc(100% - 8px);min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
/* next-pin card: header wraps; coin column never shrinks; meta text wraps */
.s-map .sheet{padding-left:max(16px,var(--sal));padding-right:max(16px,var(--sar))}
.s-map .sheet>div:nth-child(2){flex-wrap:wrap;gap:6px 10px}
.s-map .sheet>div:nth-child(2)>div{min-width:0;flex:1 1 200px}.s-map .sheet>div:nth-child(2) .cap{white-space:normal!important}
.s-map .sheet .chip.sf{flex:none}
.s-map .opt .coin{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.s-map .opt .meta{white-space:normal}
/* sets: grid columns may shrink below their content; heading row wraps */
.s-sets .sg{grid-template-columns:repeat(auto-fill,minmax(min(100%,104px),1fr))}
.s-sets .sc{min-width:0;overflow-wrap:anywhere}
.s-sets .sc svg{max-width:100%;height:auto}
.s-sets .feat{margin-left:max(14px,var(--sal));margin-right:max(14px,var(--sar))}
.s-sets .mg{grid-template-columns:repeat(auto-fill,minmax(44px,1fr))}
/* stories: floating button clears the nav */
.s-stories .fabw{bottom:calc(var(--nav-h) + var(--nav-pad) + 12px);right:max(18px,var(--sar))}
/* wide screens: generous column, centred */
@media (min-width:600px){#app{max-width:560px}}
/* standalone (installed app): pad for status bar / notch */
@media (display-mode:standalone){#app>.scr{padding-top:var(--sat)}#app>.scr.s-map .ov{top:calc(12px + var(--sat))}#app>.scr.s-map .fstrip{top:calc(58px + var(--sat))}}
.shore{left:0!important;right:0!important;border-radius:60% 60% 0 0/40% 40% 0 0}
.s-map .fc{flex:0 0 auto;max-width:100%}.s-map .fc .fbadge{flex:none}.s-map .fc .ft{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* the prototype status bar used to supply 44 px of top space; keep breathing room without it */
#app>.scr:not(.s-map):not(.s-run){padding-top:max(14px,var(--sat))}
/* verse.js is hash-locked (beta9 AC10: byte-identical); its leftover prototype status bar is hidden here instead */
.status{display:none!important}
/* PWA install card (Profile only) */
#pwa-install{position:fixed;z-index:60;left:max(12px,var(--sal,0px));right:max(12px,var(--sar,0px));bottom:calc(76px + var(--nav-pad,12px));max-width:520px;margin:0 auto;display:flex;align-items:center;gap:10px;padding:10px 10px 10px 12px;border-radius:16px;background:#FFF8EC;border:1.5px solid #E9D3AE;box-shadow:0 8px 24px rgba(59,42,30,.18);font:600 12.5px/1.35 var(--f-b,sans-serif);color:#3B2A1E}
#pwa-install img{width:40px;height:40px;border-radius:10px;flex:none}
#pwa-install>div{flex:1;min-width:0}#pwa-install>div b{display:block;font-weight:900;font-size:13.5px}#pwa-install>div span b{display:inline;font-size:inherit}
#pwa-install .go{flex:none;border:0;border-radius:12px;padding:9px 14px;background:#7A1F2B;color:#fff;font:900 13px var(--f-b,sans-serif)}
#pwa-install .x{flex:none;border:0;background:none;font-size:16px;color:#8A7360;padding:6px;min-width:32px;min-height:32px}
@media (display-mode:standalone){#pwa-install{display:none!important}}
/* beta14: while a run is active no touch may scroll, overscroll or swipe-navigate the page */
html.kot-run,body.kot-run{touch-action:none;overscroll-behavior:none;overflow:hidden}
.s-run,.s-run iframe{touch-action:none;overscroll-behavior:none}
.lv-back{position:absolute;inset:0;z-index:20;background:rgba(30,15,8,.55);display:flex;align-items:flex-end;justify-content:center}
.lv-card{width:100%;max-width:480px;background:var(--card,#FBF3E4);border-radius:28px 28px 0 0;padding:20px 20px calc(20px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:6px;box-sizing:border-box}
.lv-card .meta{margin-bottom:8px}
/* beta15: persistent in-app Back button (safe-area aware, 44 px target, fits 317-1920 px) */
.kot-back{position:fixed;z-index:60;top:calc(env(safe-area-inset-top,0px) + 8px);left:calc(env(safe-area-inset-left,0px) + 8px);width:44px;height:44px;border-radius:50%;border:2px solid #E7C48C;background:#FFF8ECee;color:var(--ink,#3a2412);font:900 22px/1 var(--f-b,system-ui);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #0003;cursor:pointer;padding:0}
.kot-back[hidden]{display:none}
.kot-back:focus-visible{outline:3px solid var(--saffron-d,#C25A00);outline-offset:2px}
.lv-hint{font:600 12px/1.4 var(--f-b,system-ui);color:var(--ink-2,#5a4030);margin:10px 0 0;text-align:center}
/* beta15: screens whose title sits top-left get room for the floating Back button */
body.kb-float #app > .scr{padding-top:calc(env(safe-area-inset-top,0px) + 56px)!important;box-sizing:border-box}