:root{color-scheme:only light;--ink:#294f46;--muted:#769084;--cream:#f7f4e8;--mint:#b9d9bf;--green:#3e715e;--sun:#ffcf5c;font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;font-synthesis:none}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}
body{display:flex;justify-content:center;background:radial-gradient(circle at 50% 30%,#6fb7ad,#2e6b66 70%);color:var(--ink);-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;border:0;cursor:pointer;-webkit-appearance:none;appearance:none;touch-action:manipulation}
button:focus-visible{outline:3px solid #89b883;outline-offset:4px}button:disabled{cursor:wait;opacity:.55}
[hidden]{display:none!important}
#game{position:relative;width:100vw;height:100dvh;--map:124px;--feed-w:0px;overflow:hidden;isolation:isolate;background:#91bfb0;container-type:inline-size;box-shadow:0 0 70px #39564912}
#world{display:block;width:100%;height:100%;touch-action:none;user-select:none;-webkit-user-select:none}
.scene-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,#284c435e,transparent 32%);opacity:0;transition:opacity .6s}
#game[data-phase=ready] .scene-shade{opacity:1;background:linear-gradient(0deg,#f0f3e3 0%,#eef2e0ee 18%,#edf3df80 38%,transparent 62%)}
#game[data-phase=intro] .scene-shade,#game[data-phase=farewell] .scene-shade{opacity:1;background:linear-gradient(0deg,#284c435e,transparent 32%)}

/* top bar */
.topbar{position:absolute;left:16px;right:16px;top:max(16px,calc(env(safe-area-inset-top) + 8px));height:44px;display:flex;align-items:center;justify-content:space-between;gap:16px;pointer-events:none;z-index:5}
.brand{display:flex;align-items:center;gap:9px;color:#f6f6e8;text-shadow:0 1px 12px #365a4d40}.brand>svg{width:44px;height:26px;filter:drop-shadow(0 1px 3px #1d3c3440)}.brand>span{font-size:22px;font-weight:850;letter-spacing:-.8px}
.toolbar{display:flex;gap:8px;margin-left:auto;pointer-events:auto}
.icon-button{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#f6f6e63a;border:1px solid #f8f9e970;color:#fffced;backdrop-filter:blur(5px);font-size:22px;line-height:1}
/* The intro and the reunion carry no text at all, the name included. */
#game[data-phase=intro] .brand,#game[data-phase=farewell] .brand{display:none}
/* While playing the name stays in the top-left (the map moved bottom-right): smaller, with a shadow to read over the water. */
#game[data-phase=playing] .brand{gap:7px;text-shadow:0 1px 3px #0b221e55,0 0 14px #1d3c3466}#game[data-phase=playing] .brand>svg{width:34px;height:20px}#game[data-phase=playing] .brand>span{font-size:18px}
#game[data-phase=playing] .icon-button{color:var(--ink);background:#f8f7e8d9;border-color:#fff6}

/* hud: a quiet little canal map. Translucent, no card edge, so it sits in the scene instead of on it. */
/* The canal map lives bottom-right (it grows up and left near the end), leaving the top to the buttons and the news. */
.hud{position:absolute;right:10px;bottom:max(12px,calc(env(safe-area-inset-bottom) + 8px));width:var(--map);height:var(--map);overflow:hidden;background:#123a3833;border-radius:50%;box-shadow:inset 0 0 0 1.5px #ffffff38;transition:width .8s cubic-bezier(.2,.8,.3,1),height .8s cubic-bezier(.2,.8,.3,1);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:.92;pointer-events:none;z-index:4}
.ic{display:inline-block;width:1em;height:1em;vertical-align:middle;fill:currentColor}
.map{display:block;width:100%;height:100%}
.map .bank{display:none}
.map .water{fill:none;stroke:#ffffff40;stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.map .done{fill:none;stroke:#ffffffcc;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;transition:stroke-dashoffset .3s}
.map .sea{fill:#2b8fb8b3}
.map .sea-wave{fill:none;stroke:#ffffff70;stroke-width:1.2;stroke-linecap:round}
.map .start{fill:#ffffffaa}
.map .duck{fill:#c98f55}.map .gull{fill:#ffffff}
.map .me-ring{fill:#fffdf5;stroke:none}
.map .me svg{color:#2f5d55}
.map .flag-pole{stroke:#fffdf5;stroke-width:1.6;stroke-linecap:round}
.map .flag-cloth{fill:#ff6b5a}
.map .flag-foot{fill:#ffffff99}
.map .flag.call .flag-cloth{animation:wave .9s ease-out;transform-box:fill-box;transform-origin:left center}
@keyframes wave{0%,100%{transform:scaleX(1)}30%{transform:scaleX(.6) skewY(8deg)}60%{transform:scaleX(1.15) skewY(-6deg)}}
@keyframes call{0%{transform:scale(1)}30%{transform:scale(1.5)}60%{transform:scale(.95)}100%{transform:scale(1)}}

/* live chat: small, translucent, bottom-left. It never takes a tap (food still lands under it). */
.chat{position:absolute;left:10px;bottom:max(12px,calc(env(safe-area-inset-bottom) + 8px));width:min(calc(100% - var(--map) - 28px),360px);display:flex;flex-direction:column;align-items:flex-start;gap:5px;pointer-events:none;z-index:8}
.msg{max-width:100%;padding:3px 9px 4px;border-radius:11px;background:#0d2b2961;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);color:#f4faf5;font-size:13.5px;line-height:1.42;font-weight:600;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 2px #0006;opacity:.95;animation:msgin .32s ease-out both;transition:opacity .45s,transform .45s}
.msg b{font-weight:800;margin-right:5px}
.msg.old{opacity:.72}
.msg.news{background:#fffdf2cc;color:#23433b;text-shadow:none;white-space:normal;word-break:keep-all;overflow-wrap:anywhere}
.msg.news .tag{display:inline-block;margin-right:5px;padding:0 5px;border-radius:6px;background:#e0563f;color:#fff;font-size:10px;font-weight:800;line-height:15px;vertical-align:1px}
.msg.out{opacity:0;transform:translateY(-6px)}
@keyframes msgin{from{opacity:0;transform:translateY(8px)}}
@container(max-width:345px){.chat{width:calc(100% - var(--map) - 28px)}.msg{font-size:11px}}

/* cinematic news card: a news-app alert that slides down during the intro and the farewell */
/* Phones: the buttons sit alone in the top row (the map is bottom-right); a headline slides in as one full-width row
   just under them, above Bukang, with a photo of that moment. */
.newscard{position:absolute;left:10px;right:10px;--nc-top:calc(max(16px,calc(env(safe-area-inset-top) + 8px)) + 54px);top:var(--nc-top);z-index:6;display:flex;gap:11px;align-items:center;padding:8px 14px 8px 8px;border-radius:18px;background:#fffdf5f2;box-shadow:0 8px 26px #1b3b3338;pointer-events:auto;cursor:pointer;color:#1f3a33;transform-origin:50% 0;transition:top .8s cubic-bezier(.2,.8,.3,1)}
.newscard.in{animation:ncin .45s cubic-bezier(.2,.9,.3,1.2) both}
.newscard.out{animation:ncout .35s ease-in both;pointer-events:none}
/* The photo slot is always there (water-coloured until the picture arrives), so the text never jumps sideways. */
.nc-thumb{flex:0 0 60px;height:60px;border-radius:12px;overflow:hidden;background:linear-gradient(160deg,#9fd3d0,#4f9ea3);box-shadow:inset 0 0 0 1px #1f3a3314}
.nc-thumb img{display:block;width:100%;height:100%;object-fit:cover;animation:ncphoto .35s ease-out both}
@keyframes ncphoto{from{opacity:0}}
.nc-body{min-width:0;flex:1}
.nc-meta{margin:0 0 3px;display:flex;align-items:center;gap:6px;min-width:0;font-size:10.5px;font-weight:700;color:#7a8b85;letter-spacing:-.1px}
.nc-tag{flex-shrink:0;white-space:nowrap;display:inline-block;padding:1px 6px;border-radius:5px;background:#cf715e;color:#fff;font-size:10.5px;font-weight:850;letter-spacing:0}
.nc-place{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.nc-head{margin:0;font-size:15.5px;line-height:1.3;font-weight:850;letter-spacing:-.5px;word-break:keep-all;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
/* the sub-headline waits for the article: the card stays one glance */
.newscard .nc-sub{display:none}
.nc-sub{margin:3px 0 0;font-size:11.5px;line-height:1.35;color:#4f6660;font-weight:600;letter-spacing:-.2px;word-break:keep-all;overflow-wrap:anywhere}
@keyframes ncin{from{opacity:0;transform:translateY(-14px) scale(.96)}}
@keyframes ncout{to{opacity:0;transform:translateY(-10px) scale(.97)}}
@container(max-width:345px){.nc-head{font-size:14px}.nc-thumb{flex-basis:50px;height:50px}}

/* tap a headline: a news-app article sheet slides up; the body streams in as the LLM writes it */
.msg.news{pointer-events:auto;cursor:pointer}
.msg.news::after{content:"›";margin-left:5px;font-weight:900;color:#cf715e}
.article{position:absolute;inset:0;z-index:25;display:flex;align-items:flex-end;background:#10262466;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.sheet{position:relative;width:100%;max-height:84%;overflow-y:auto;overscroll-behavior:contain;background:#fffdf7;border-radius:22px 22px 0 0;box-shadow:0 -12px 40px #10262440;animation:sheetin .32s cubic-bezier(.2,.9,.3,1) both;color:#1f3a33}
.art-close{position:absolute;right:12px;top:12px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#10262488;color:#fff;font-size:20px;z-index:2}
.art-photo{height:168px;background:linear-gradient(180deg,#8fd0d8,#3f97a8 60%,#2b6f82);border-radius:22px 22px 0 0;overflow:hidden}
.art-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 34%}
.art-text{padding:16px 20px calc(20px + env(safe-area-inset-bottom))}
.art-meta{margin:0 0 8px;display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;color:#7a8b85}
.art-head{margin:0;font-size:21px;line-height:1.3;font-weight:850;letter-spacing:-.7px;word-break:keep-all;overflow-wrap:anywhere}
.art-sub{margin:7px 0 0;font-size:13.5px;line-height:1.45;color:#4f6660;font-weight:650;word-break:keep-all}
.art-sub:empty{display:none}
.art-body{margin:14px 0 0;padding-top:14px;border-top:1px solid #e6e1d2;font-size:15px;line-height:1.72;color:#2b3f3a;word-break:keep-all;overflow-wrap:anywhere;min-height:120px}
.art-body p{margin:0 0 11px}
.art-body.loading::before{content:"";display:block;height:12px;border-radius:6px;margin:4px 0 12px;background:linear-gradient(90deg,#ece7d8,#f7f3e8,#ece7d8);background-size:200% 100%;animation:shimmer 1.1s linear infinite;box-shadow:0 24px 0 #ece7d8,0 48px 0 #ece7d8}
.art-cap{margin:0 0 10px;font-size:11.5px;line-height:1.45;color:#7a8b85}
.art-fig{margin:2px 0 16px}
.art-fig img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;background:#dfe9e4}
.art-fig figcaption{margin-top:6px;font-size:12px;line-height:1.45;color:#7a8b85;word-break:keep-all}
/* Ending: the feature story about this run, one tap away. */
.feature{display:flex;align-items:center;gap:10px;width:100%;margin:0 0 18px;padding:8px;border-radius:16px;background:#fffdf5;border:1px solid #e6e1d2;box-shadow:0 6px 18px #1b3b3318;text-align:left;color:#1f3a33}
.feature img{flex:0 0 72px;width:72px;height:54px;border-radius:10px;object-fit:cover;background:#8fd0d8}
.ft-text{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.ft-text b{font-size:14px;line-height:1.3;font-weight:850;letter-spacing:-.4px;word-break:keep-all;overflow-wrap:anywhere}
.ft-text b::after{content:" ›";color:#cf715e}
.art-note{margin:6px 0 0;font-size:11px;line-height:1.5;color:#98a59f}
@keyframes sheetin{from{transform:translateY(40px);opacity:0}}
@keyframes shimmer{to{background-position:-200% 0}}

/* title */
.welcome{position:absolute;left:28px;right:28px;bottom:max(36px,calc(env(safe-area-inset-bottom) + 24px));z-index:4;text-align:center}
.welcome h1{font-size:72px;line-height:1.05;letter-spacing:-4.5px;font-weight:900;margin:0 0 24px;color:#32614d}
.welcome>p{font-size:26px;line-height:1.4;font-weight:700;letter-spacing:-.6px;margin:0 0 26px;color:#3e715e}
.primary{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:56px;padding:0 20px;border-radius:22px;background:var(--green);color:#fffbe9;font-size:16px;font-weight:800;box-shadow:0 6px 0 #244c3433;transition:background .2s,transform .1s}
.primary:active{transform:translateY(3px);box-shadow:0 3px 0 #244c3433}
.primary.big{min-height:84px;font-size:44px;border-radius:30px}
.start-button.primary.big{font-size:32px;font-weight:900;letter-spacing:-1px}.ic.big{width:1.1em;height:1.1em}
.round-button{width:56px;height:56px;margin-top:16px;border-radius:50%;background:#e8eddf;color:#527765;font-size:26px;display:grid;place-items:center}

/* intro captions */
.sequence{position:absolute;left:20px;right:20px;bottom:max(88px,calc(env(safe-area-inset-bottom) + 70px));z-index:4;pointer-events:none;text-align:center}
.sequence p{margin:0;color:#fffdef;font-size:30px;font-weight:800;letter-spacing:-.8px;line-height:1.4;text-shadow:0 2px 16px #24423899;word-break:keep-all}
.skip-button{position:absolute;right:16px;top:max(72px,calc(env(safe-area-inset-top) + 64px));width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#f3f3df3a;color:#fffdef;font-size:22px;border:1px solid #fffee44a;backdrop-filter:blur(5px);z-index:5}

/* fish bucket (feed) */
.bucket{pointer-events:none;position:absolute;left:50%;bottom:max(26px,calc(env(safe-area-inset-bottom) + 18px));transform:translateX(-50%);width:108px;height:108px;border-radius:50%;background:radial-gradient(circle at 50% 35%,#fff7d6,#ffd67a 62%,#f0b23e);border:5px solid #fffdf0;box-shadow:0 10px 0 #b8832a55,0 14px 36px #24493b33;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;transition:transform .12s}
.bucket:active{transform:translateX(-50%) scale(.94)}
.bucket.shake{animation:shake .35s}
.bucket.chicken{background:radial-gradient(circle at 50% 35%,#fff1ec,#ffc3ad 62%,#f08f78);animation:chickenready 1.1s ease-in-out infinite}.bucket.chicken .bucket-fish{color:#d9745d}
@keyframes chickenready{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.1)}}
.bucket-fish{font-size:54px;line-height:1;color:#2f7fb0;filter:drop-shadow(0 2px 2px #7a5a1a44)}.bucket-fish .ic{display:block}
.bucket-dots{display:flex;gap:5px}
.bucket-dots i{display:block;width:10px;height:10px;border-radius:50%;background:#ffffffa0;transition:background .3s,transform .3s;transform:scale(.8)}
.bucket-dots i.on{background:#3e715e;transform:scale(1)}

/* pointing hand guide */
.guide{position:absolute;z-index:8;pointer-events:none;transform:translate(-50%,-50%);font-size:72px;line-height:1;filter:drop-shadow(0 4px 8px #0006)}.guide .ic{display:block}
.guide>span{display:block;animation:pointdown .8s ease-in-out infinite;transform-origin:50% 20%}
.guide.edge>span{animation:none}

/* gull shadows: the future, shown before it happens */
.shadows{position:absolute;inset:0;z-index:5;pointer-events:none}
.gull-shadow{position:absolute;width:84px;height:44px;margin:-22px 0 0 -42px;border-radius:50%;background:radial-gradient(ellipse at center,#0d2a2acc 0%,#0d2a2a88 45%,transparent 72%);transform-origin:50% 50%}
.fear-mark{position:absolute;font-size:34px;color:#e0563f;filter:drop-shadow(0 2px 4px #0006);transform:translate(-50%,-100%);animation:wiggle .35s ease-in-out infinite}
.bubble{position:absolute;transform:translate(-50%,-100%);width:64px;height:64px;border-radius:32px 32px 32px 8px;background:#fffdf3;border:3px solid #ffb4a0;box-shadow:0 6px 18px #24493b33;font-size:34px;line-height:1;color:#e0563f;display:grid;place-items:center;pointer-events:auto;animation:bubblein .3s ease-out,wiggle .5s ease-in-out infinite}
.bubble.quiet{background:#e5f4ea;border-color:#a9d7b7;color:#4d8a5e;pointer-events:none;animation:none}

/* emoji pops */
.pops{position:absolute;inset:0;z-index:9;pointer-events:none;overflow:hidden}
.pop{position:absolute;transform:translate(-50%,-50%);font-size:24px;line-height:1;color:#fff;filter:drop-shadow(0 2px 6px #0007);animation:popup .9s ease-out forwards}.pop .ic{display:block}
.pop.small{font-size:18px}.pop.big{font-size:30px}.pop.heart{color:#ff6b81}.pop.spark{color:#ffe36e}.pop.fish{color:#4aa8dd}.pop.hush{color:#fff}.pop.wave{color:#9be3ff}

/* overlays */
.overlay{position:absolute;inset:0;z-index:20;display:grid;place-items:center;padding:24px;background:#264e403d;backdrop-filter:blur(9px)}
.dialog{width:min(340px,100%);padding:30px 24px 24px;border-radius:32px;background:var(--cream);box-shadow:0 20px 65px #244c3929;text-align:center;animation:arrive .3s ease-out;display:flex;flex-direction:column;align-items:center}
.end-hero{display:flex;align-items:center;gap:10px;font-size:64px;margin-bottom:16px;color:#3e715e}.end-hero .end-shark{width:1.4em;height:1em}.end-hero .end-wave{color:#3d8fbf}
.dialog h2{font-size:30px;line-height:1.3;letter-spacing:-1px;margin:0 0 18px;word-break:keep-all;color:#32614d}
.dialog .primary{width:100%}
.end-pics{display:flex;flex-direction:column;gap:8px;font-size:28px;margin:0 0 22px;line-height:1.3}
.end-pics span{display:flex;gap:4px;justify-content:center;flex-wrap:wrap}.end-pics .fish{color:#3d8fbf}.end-pics .trash{color:#3e8a4d}

#loading{position:absolute;inset:0;z-index:30;background:#e5eddd;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#6c8e78}
#loading>svg{width:80px;height:60px;animation:float 2.4s ease-in-out infinite}
#loading-progress{appearance:none;-webkit-appearance:none;border:0;border-radius:8px;overflow:hidden;background:#cedfd3}
#loading-progress::-webkit-progress-bar{background:#cedfd3;border-radius:8px}
#loading-progress::-webkit-progress-value{background:#5d9b87;border-radius:8px;transition:width .25s ease}
#loading-progress::-moz-progress-bar{background:#5d9b87;border-radius:8px}
#loading-progress:indeterminate{background:linear-gradient(90deg,#cedfd3,#74ab93,#cedfd3);background-size:200% 100%;animation:shimmer 1.8s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){#loading>svg,#loading-progress:indeterminate{animation:none}}
.error{position:absolute;inset:0;z-index:40;background:var(--cream);padding:34px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.error>strong{font-size:64px}.error>p{font-size:14px;line-height:1.8;color:#78907b;margin:20px 0 28px;word-break:keep-all}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;clip-path:inset(50%)}

@keyframes float{50%{transform:translateY(-6px) rotate(-3deg)}}
@keyframes arrive{from{opacity:0;transform:translateY(7px)}}
@keyframes pointdown{0%,100%{transform:translateY(-10px) scale(1)}50%{transform:translateY(8px) scale(1.08)}}
@keyframes pulse{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.06)}}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(8px)}}
@keyframes shake{0%,100%{transform:translateX(-50%) rotate(0)}25%{transform:translateX(-56%) rotate(-8deg)}75%{transform:translateX(-44%) rotate(8deg)}}
@keyframes popup{0%{opacity:0;transform:translate(-50%,-30%) scale(.5)}20%{opacity:1;transform:translate(-50%,-60%) scale(1.15)}100%{opacity:0;transform:translate(-50%,-150%) scale(1)}}
@keyframes bubblein{from{opacity:0;transform:translate(-50%,-80%) scale(.6)}}
@keyframes wiggle{0%,100%{transform:translate(-50%,-100%) rotate(-4deg)}50%{transform:translate(-50%,-100%) rotate(4deg)}}
@keyframes slotpop{0%{transform:scale(.6)}60%{transform:scale(1.5)}100%{transform:scale(1.05)}}

@media(max-height:700px){.welcome h1{font-size:58px}.welcome>p{font-size:22px;margin-bottom:18px}.primary.big{min-height:72px;font-size:34px}.sequence p{font-size:26px}.bucket{width:92px;height:92px}.bucket-fish{font-size:44px}}
@media(max-width:345px){#game{--map:108px}#game.map-near{--map:124px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ending: friendship tier + stickers */
.end-tier{display:flex;gap:6px;font-size:34px;color:#ff6b81;margin:0 0 14px}.end-tier .ic.off{color:#e3dfd2}
.stickers{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 0 12px;min-height:52px}
.sticker{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:30px;background:#fff;border:3px solid #f1e6c8;box-shadow:0 3px 0 #0000000f;animation:slotpop .5s ease-out both}
.album{display:flex;justify-content:center;gap:5px;margin:0 0 20px}
.album .sticker{width:30px;height:30px;border-radius:10px;font-size:17px;border-width:2px;animation:none}
.album .sticker.off{filter:grayscale(1) opacity(.3)}
.st-golden{color:#f0b32e}.st-snatch{color:#ffb300}.st-gull{color:#7b8c96}.st-plow{color:#3e8a4d}.st-brave{color:#e0563f}.st-pet{color:#c68a2e}.st-friend{color:#3d8fbf}
.pop.gold{color:#ffd23f}.pop.gull{color:#eef3f5}

.end-family{width:1.7em;height:1em;color:#2f6f9e}
.end-stats-icons{display:flex;flex-direction:column;gap:6px;align-items:center;margin:0 0 20px;font-size:24px}
.end-stats-icons span{display:flex;flex-wrap:wrap;justify-content:center;gap:3px}
.end-stats-icons .fish{color:#3d8fbf}.end-stats-icons .chicken{color:#e08770}.end-stats-icons .birds{color:#8a9aa5}
.pop.chicken{color:#f3a58f}.pop.duck{color:#c79256}
/* Camera cuts: black bars slide in top and bottom while a special move plays in close-up. */
#game::before,#game::after{content:"";position:absolute;left:0;right:0;height:0;background:#163d43;z-index:7;pointer-events:none;transition:height .3s ease}
#game::before{top:0}#game::after{bottom:0}
#game.cut::before,#game.cut::after{height:8%}
/* the chat and the news panel stay above the bars: people keep talking through the close-up */
#game.cut .hud{opacity:0;transition:opacity .2s}
/* a headline during a close-up steps down out of the top bar (on tall screens the bar reaches past the card's usual spot) */
#game.cut .newscard{top:max(var(--nc-top),calc(8% + 8px));transition:top .3s ease}

/* ---------- canal map: a round, turning map; it grows a little near the end ---------- */
#game.map-near{--map:156px}
.map .sea{fill:#2b8fb8b3}
.map .me-ring{fill:#fffdf5;stroke:none}
.map .me-shark{fill:#2f5d55}
.map .water,.map .done{stroke-linecap:round;stroke-linejoin:round}

/* ---------- the ending: the run's special article, full screen, with share and replay at the bottom ---------- */
.article.ending{align-items:stretch;justify-content:center;background:#10262499}
.article.ending .sheet{max-height:100%;height:100%;width:100%;border-radius:0;animation:endin .6s cubic-bezier(.2,.9,.3,1) both}
.article.ending .art-photo{height:min(46vh,340px);border-radius:0}
.article.ending .art-text{padding-bottom:0}
.art-end{position:sticky;bottom:0;z-index:3;display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;margin:14px -20px 0;padding:18px 20px calc(14px + env(safe-area-inset-bottom));background:linear-gradient(to top,#fffdf7 72%,#fffdf700)}
.art-end .replay-end{min-height:66px;border-radius:24px;font-size:21px;font-weight:900;letter-spacing:-.5px;gap:10px;box-shadow:0 6px 0 #244c3433,0 10px 24px #244c3426;animation:replaynudge 2.4s ease-in-out 4s infinite}
.art-end .replay-end .ic{width:1.15em;height:1.15em}
.art-end .share-end{min-height:66px;padding:0 16px 0 44px;border-radius:24px;background:#ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233e715e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='2.6'/%3E%3Ccircle cx='6' cy='12' r='2.6'/%3E%3Ccircle cx='18' cy='19' r='2.6'/%3E%3Cpath d='M8.3 10.8l7.4-4.3M8.3 13.2l7.4 4.3'/%3E%3C/svg%3E") no-repeat 16px 50%/20px 20px;border:2px solid #d6e2d8;color:#3e715e;font-size:15px;font-weight:800;letter-spacing:-.3px;white-space:nowrap}
.art-end .share-end:disabled{opacity:.7}
.share-msg{grid-column:1/-1;margin:0;font-size:13px;line-height:1.5;color:#4f6660;min-height:0;word-break:break-all}
.share-msg:empty{display:none}
@keyframes replaynudge{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
@media(max-width:345px){.art-end .share-end{padding:0 12px 0 38px;font-size:14px;background-position:12px 50%}}
.share-msg a{color:#2b6f82}
@keyframes endin{from{transform:translateY(60px);opacity:0}}

/* ---------- wide screens (laptop, tablet on its side): whole screen, news panel on the right ---------- */
.feed{position:absolute;top:0;right:0;bottom:0;width:var(--feed-w);z-index:8;display:flex;flex-direction:column;background:#f7f4e8f2;border-left:1px solid #e0dccb;box-shadow:-12px 0 40px #1f3a3314}
.feed-mast{display:flex;align-items:baseline;justify-content:space-between;padding:max(18px,env(safe-area-inset-top)) 18px 12px;border-bottom:1px solid #e3dfcf;color:#1f3a33}
.feed-mast b{font-size:18px;font-weight:900;letter-spacing:-.6px}.feed-mast span{font-size:12px;font-weight:700;color:#7a8b85}
.feed-list{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:10px 12px 18px;display:flex;flex-direction:column;gap:8px}
.feed-list::before{content:"";flex:1}
.feed-item{flex-shrink:0;background:#fffdf7;border-radius:14px;box-shadow:0 2px 0 #0000000a;border:1px solid #ece7d7;overflow:hidden;animation:feedin .35s ease-out both}
.feed-head{display:grid;grid-template-columns:auto 1fr;gap:3px 7px;align-items:center;width:100%;text-align:left;padding:10px 12px;background:none;color:#1f3a33}
.feed-when{font-size:11px;font-weight:700;color:#8b9892}
.feed-title{grid-column:1/-1;font-size:14px;line-height:1.35;font-weight:800;letter-spacing:-.4px;word-break:keep-all;overflow-wrap:anywhere;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.feed-item.open .feed-title{white-space:normal;font-size:17px;line-height:1.3}
.feed-open{display:none;padding:0 12px 12px}
.feed-item.open .feed-open{display:block}
.feed-photo{margin:0 -12px 10px;order:-1}.feed-photo img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}.feed-photo figcaption{font-size:11.5px;color:#7a8b85;padding:5px 12px 0}
.feed-sub{margin:0 0 8px;font-size:13px;line-height:1.45;color:#4f6660;font-weight:650;word-break:keep-all}.feed-sub:empty{display:none}
.feed-body{font-size:14px;line-height:1.7;color:#2b3f3a;word-break:keep-all;overflow-wrap:anywhere;min-height:40px}.feed-body p{margin:0 0 9px}
.feed-body.loading::before{content:"";display:block;height:11px;border-radius:6px;margin:4px 0 10px;background:linear-gradient(90deg,#ece7d8,#f7f3e8,#ece7d8);background-size:200% 100%;animation:shimmer 1.1s linear infinite;box-shadow:0 22px 0 #ece7d8}
.feed-note{margin:6px 0 0;font-size:10.5px;line-height:1.5;color:#9aa6a0}
.feed-item:not(.open) .feed-head:hover{background:#f4f1e6}
/* Folded stories keep a small photo beside the headline (the open one shows it big). */
.feed-thumb{display:none;grid-row:1/3;width:46px;height:46px;border-radius:9px;object-fit:cover;background:#cfe1d9}
.feed-item:not(.open) .feed-thumb{display:block}
.feed-item:not(.open) .feed-head:has(.feed-thumb){grid-template-columns:46px auto 1fr;column-gap:10px}
.feed-item:not(.open) .feed-head:has(.feed-thumb) .feed-title{grid-column:2/-1}
@keyframes feedin{from{opacity:0;transform:translateY(10px)}}
.feed-item.open{order:0}
#game.wide{--map:150px}
#game.wide[data-phase=playing]{--feed-w:clamp(320px,27vw,420px)}
#game.wide.map-near{--map:196px}
#game.wide #world{width:calc(100% - var(--feed-w))}
#game.wide .topbar{right:calc(var(--feed-w) + 16px)}
#game.wide .newscard{display:none}
#game.wide .skip-button{right:calc(var(--feed-w) + 16px)}
#game.wide .chat{left:16px;bottom:16px;width:min(40%,380px)}
#game.wide .msg{font-size:13px}
#game.wide .sequence{right:calc(var(--feed-w) + 20px)}
#game.wide .welcome{left:50%;right:auto;width:min(460px,calc(100% - 56px));transform:translateX(-50%)}
#game.wide .article:not(.ending) .sheet{max-width:560px;margin:0 auto;border-radius:22px 22px 0 0}
#game.wide .article.ending .sheet{max-width:720px;box-shadow:0 0 80px #10262455}
#game.wide .pops{right:var(--feed-w)}
/* Portrait tablets: whole screen too, content kept to a comfortable column. */
@media (min-width:600px){#game:not(.wide) .welcome{left:50%;right:auto;width:min(480px,calc(100% - 56px));transform:translateX(-50%)}
  #game:not(.wide) .article .sheet{max-width:640px;margin:0 auto}#game:not(.wide) .newscard{max-width:460px}#game{--map:120px}#game.map-near{--map:160px}}
#game.wide::before,#game.wide::after{right:var(--feed-w)}

/* Landscape phones with a notch: keep HUD, chat and buttons clear of the rounded corners. */
.hud{right:max(10px,calc(env(safe-area-inset-right) + 6px))}
#game.wide .hud{right:calc(var(--feed-w) + 16px);bottom:16px}
.chat{left:max(10px,calc(env(safe-area-inset-left) + 6px))}
.topbar{left:max(16px,calc(env(safe-area-inset-left) + 8px));right:max(16px,calc(env(safe-area-inset-right) + 8px))}
#game.wide .topbar{right:calc(var(--feed-w) + 16px)}
.newscard{left:max(10px,calc(env(safe-area-inset-left) + 6px));right:max(10px,calc(env(safe-area-inset-right) + 6px))}

/* Hold-to-restart on the pause screen: a ring fills while pressed. */
.round-button.hold{position:relative;touch-action:none;-webkit-user-select:none;user-select:none;--p:0}
.round-button.hold::after{content:"";position:absolute;inset:-6px;border-radius:50%;background:conic-gradient(#3e715e calc(var(--p) * 1turn),transparent 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 0);mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 0);pointer-events:none}
.hold-hint{margin:8px 0 0;font-size:12px;color:#8a9a92;font-weight:700}
/* PC: visitors' chat reads comfortably from a laptop distance. */
#game.wide .chat{width:min(42%,460px);gap:6px}
#game.wide .msg{font-size:15.5px;line-height:1.4;padding:5px 12px 6px;border-radius:13px}
#game.wide .msg.news .tag{font-size:12px;line-height:17px}

/* Pause screen: the run's latest headlines, each with its photo, for a grown-up to open. */
.pause-news{width:100%;margin:18px 0 0;padding-top:14px;border-top:1px solid #e3dfcf;display:flex;flex-direction:column;gap:8px}
.pn-item{display:flex;gap:10px;align-items:center;width:100%;padding:6px 10px 6px 6px;border-radius:14px;background:#fffdf5;border:1px solid #e6e1d2;text-align:left;color:#1f3a33}
.pn-thumb{flex:0 0 52px;height:52px;border-radius:10px;overflow:hidden;background:linear-gradient(160deg,#9fd3d0,#4f9ea3)}
.pn-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.pn-text{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.pn-text b{font-size:13px;line-height:1.3;font-weight:800;letter-spacing:-.4px;word-break:keep-all;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.pn-text b::after{content:" ›";color:#cf715e}
/* Short screens (a phone on its side): the dialog must fit, so only the newest headline. */
@media(max-height:560px){.dialog{padding:18px 20px 16px}.pause-news{margin-top:10px;padding-top:10px}.pn-item:nth-child(n+2){display:none}}
/* A phone on its side: the headline sits in the top row beside the buttons, not across the middle of a short
   screen where Bukang swims. */
@media(max-height:520px) and (min-aspect-ratio:4/3){
  #game:not(.wide) .newscard{--nc-top:max(12px,calc(env(safe-area-inset-top) + 6px));right:calc(max(16px,calc(env(safe-area-inset-right) + 8px)) + 112px);max-width:460px;padding:6px 12px 6px 6px}
  #game:not(.wide) .nc-thumb{flex-basis:48px;height:48px}
  #game:not(.wide) .nc-head{font-size:14px}
  .topbar{top:max(12px,calc(env(safe-area-inset-top) + 6px))}}
/* A weak phone (perf.js, from its third quality step: #game.lowfx): the glass over the moving harbour goes without its
   blur, which is redone every frame under each panel; a little more tint keeps icons and chat as legible. */
#game.lowfx .icon-button,#game.lowfx .skip-button,#game.lowfx .hud,#game.lowfx .msg,#game.lowfx .food-count{-webkit-backdrop-filter:none;backdrop-filter:none}
#game.lowfx:not([data-phase=playing]) .icon-button,#game.lowfx .skip-button{background:#2c4f4966}
#game.lowfx .hud{background:#123a3866}
#game.lowfx .msg{background:#0d2b29a6}
#game.lowfx .food-count{background:#f8f7e8f2}

/* The harbour has room to breathe after eight quiet seconds; a touch restores all HUD content. */
#game.calm .hud{opacity:.34;transition:opacity 1.2s}
#game.calm .chat .msg:not(:last-child){opacity:0}
#game.calm .chat .msg:last-child{opacity:.48}
.pop.heart{width:1.42em;height:1.42em;padding:.28em;border:1px solid #ffe7e57d;border-radius:50%;background:radial-gradient(circle at 28% 23%,#fff9 0 3%,#ffffff1f 12%,#e6fff808 65%);color:#eab8b6;filter:none;animation:heartbubble 1.8s ease-out forwards}
@keyframes heartbubble{0%{opacity:0;transform:translate(-50%,-30%) scale(.65)}15%{opacity:.82}75%{opacity:.55}100%{opacity:0;transform:translate(calc(-50% + 10px),-230%) scale(1.08)}}
@media(prefers-reduced-motion:reduce){.pop.heart{animation:popup .9s ease-out forwards}}

/* Five readable lines fit beside the larger map; long messages can use a second line. */
#game:not(.wide) .msg.talk{white-space:normal;word-break:keep-all;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
@media(max-height:520px) and (min-aspect-ratio:4/3){#game:not(.wide) .msg.talk{-webkit-line-clamp:1}}