:root{--ink:#1c2548;--ink-soft:#55608a;--ice:#f4fafe;--ice-shade:#d3e6f3;--sky:#cfe9f8;--panel:#fffffff0;--panel-edge:#1c25481f;--accent:#f39a3b;--accent-ink:#7a3f06;--fish:#3f8fd0;--danger:#e8554e;--cold:#5a8fd8;--radius:14px;--shadow:0 6px 18px #1c254829;--font:"Jua", -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;--safe-top:env(safe-area-inset-top,0px);--safe-right:env(safe-area-inset-right,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px)}*,:before,:after{box-sizing:border-box}[hidden]{display:none!important}html,body{background:var(--sky);width:100%;height:100%;color:var(--ink);font-family:var(--font);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;margin:0;overflow:hidden}#game,#ui{position:fixed;inset:0}#game{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}#game canvas{display:block}#ui,.ui-region{pointer-events:none}.ui-region{position:absolute;overflow:hidden}.ui-overlay{position:absolute;inset:0}button{font:inherit;color:inherit;touch-action:manipulation}.safe-area-probe{visibility:hidden;pointer-events:none;padding:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);position:fixed}.gallery-portraits{background:var(--panel);border-radius:14px;flex-wrap:wrap;justify-content:flex-end;align-items:flex-end;gap:2px;max-width:calc(100% - 24px);padding:4px 8px;display:flex;position:absolute;bottom:10px;right:12px}.card{pointer-events:none;z-index:30;transform-origin:50% 100%;background:#fff;border-radius:18px;width:232px;padding:12px 14px 12px 12px;animation:.2s cubic-bezier(.2,1.4,.4,1) both card-in;position:absolute;top:0;left:0;box-shadow:0 10px 28px #1c254842}.card.is-below{transform-origin:50% 0}@keyframes card-in{0%{opacity:0;transform:scale(.86)}}.card-head{align-items:center;gap:8px;display:flex}.card-portrait{background:linear-gradient(180deg, var(--sky), var(--ice));border-radius:16px;flex:none}.card-id{min-width:0}.card-name{text-overflow:ellipsis;white-space:nowrap;font-size:21px;line-height:1.15;overflow:hidden}.card-personality{color:var(--ink-soft);margin-top:3px;font-size:13px;line-height:1.25}.card-personality b{background:var(--ice-shade);color:var(--ink);border-radius:999px;margin-right:5px;padding:1px 7px 0;font-weight:400;display:inline-block}.card-place{background:var(--accent);color:#fff;border-radius:999px;margin:10px 0 4px;padding:2px 9px 1px;font-size:12px;display:inline-block}.card[data-where=box] .card-place{background:var(--fish)}.card-rows{margin:0}.card-row{border-top:1.5px dashed var(--ice-shade);justify-content:space-between;gap:10px;padding:4px 2px;font-size:14px;display:flex}.card-row:first-child{border-top:0}.card-row dt{color:var(--ink-soft);flex:none}.card-row dd{text-align:right;text-overflow:ellipsis;white-space:nowrap;margin:0;overflow:hidden}.card-note{color:var(--ink-soft);margin:6px 2px 0;font-size:12.5px;line-height:1.3}.hud{padding:calc(6px + var(--safe-top)) calc(8px + var(--safe-right)) 0 8px;z-index:10;position:absolute;inset:0 0 auto}#ui[data-mode=portrait] .hud{padding-left:calc(8px + var(--safe-left))}.hud-bar{align-items:center;gap:6px;height:40px;display:flex}.hud-pill{background:var(--panel);white-space:nowrap;border-radius:999px;align-items:center;gap:6px;min-width:0;height:36px;padding:0 12px;display:flex;box-shadow:0 2px 8px #1c25481f}.hud-colony{flex:0 auto}.hud-name{text-overflow:ellipsis;font-size:17px;overflow:hidden}.hud-pop{border-left:1.5px solid var(--panel-edge);color:var(--ink-soft);flex:none;align-items:center;gap:3px;padding-left:8px;font-size:15px;display:flex}.hud-pop svg{color:#2f3e75;font-size:17px}.hud-spacer{flex:1 1 0}.hud-fish{flex:none;font-size:17px}.hud-fish svg{color:var(--fish);font-size:19px}.hud-rate{color:var(--ink-soft);font-size:13px}.hud-fish.is-stalled .hud-rate{color:var(--cold)}.hud-fish.is-cramped .hud-rate{color:var(--danger)}.hud-gear{background:var(--panel);width:36px;height:36px;color:var(--ink-soft);cursor:pointer;pointer-events:auto;border:0;border-radius:50%;flex:none;place-items:center;padding:0;font-size:19px;display:grid;box-shadow:0 2px 8px #1c25481f}.hud-chips{flex-wrap:wrap;justify-content:flex-end;gap:6px;margin-top:6px;display:flex}.hud-chip{color:#fff;border-radius:999px;align-items:center;gap:5px;height:28px;padding:0 11px;font-size:14px;animation:.25s cubic-bezier(.2,1.4,.4,1) both hud-chip-in;display:flex;box-shadow:0 2px 8px #1c254829}.hud-chip-cramped{background:var(--danger)}.hud-chip-blizzard{background:var(--cold)}.hud-chip-festival{background:var(--accent)}@keyframes hud-chip-in{0%{opacity:0;transform:scale(.8)}}.hud-menu{top:calc(50px + var(--safe-top));right:calc(8px + var(--safe-right));border-radius:var(--radius);width:212px;box-shadow:var(--shadow);pointer-events:auto;background:#fff;padding:12px;font-size:14px;position:absolute}.hud-menu p{color:var(--ink-soft);margin:0 0 10px;line-height:1.4}.hud-menu-ask,.hud-menu-row{gap:6px;display:flex}.hud-menu button{background:var(--ice-shade);cursor:pointer;border:0;border-radius:10px;flex:1;padding:9px 8px;font-size:14px}.hud-menu button.is-danger{background:var(--danger);color:#fff}@media (max-width:420px){.hud-pill{padding:0 10px}.hud-name,.hud-fish{font-size:15px}}.log{top:calc(52px + var(--safe-top));flex-direction:column;align-items:flex-start;gap:3px;max-width:min(62%,340px);display:flex;position:absolute;left:8px}#ui[data-mode=portrait] .log{left:calc(8px + var(--safe-left))}#ui[data-mode=portrait] .log-line[data-rank="2"]{display:none}.log-line{max-width:100%;color:var(--ink);background:#ffffffc7;border-radius:11px;align-items:baseline;gap:6px;padding:3px 10px 3px 8px;font-size:13px;line-height:1.35;transition:opacity .4s;display:flex}.log-line[data-rank="1"]{opacity:.72}.log-line[data-rank="2"]{opacity:.46}.log-line i{background:var(--ink-soft);border-radius:50%;flex:none;width:7px;height:7px;transform:translateY(-1px)}.log-line[data-kind=pair] i{background:#ff8fab}.log-line[data-kind=elderPair] i{background:#f2b632}.log-line[data-kind=blizzardStart] i,.log-line[data-kind=blizzardEnd] i{background:var(--cold)}.log-line[data-kind=festival] i{background:var(--accent)}.log-line[data-kind=facility] i{background:var(--fish)}.log-line[data-kind=cramped] i{background:var(--danger)}.log-line[data-kind=relieved] i{background:#4fb286}.log-line.is-new{animation:.3s ease-out both log-in}.log-line.is-leaving{opacity:0;transition:opacity .3s,transform .3s;position:absolute;top:0;transform:translateY(-10px)}@keyframes log-in{0%{opacity:0;transform:translate(-10px)}}@media (prefers-reduced-motion:reduce){.log-line.is-new{animation:none}}.name-prompt{padding:calc(16px + var(--safe-top)) 16px calc(16px + var(--safe-bottom));-webkit-backdrop-filter:blur(3px);pointer-events:auto;z-index:40;background:#1c25486b;place-items:center;display:grid;position:absolute;inset:0}.name-prompt-panel{text-align:center;background:#fff;border-radius:22px;width:min(100%,360px);padding:22px 20px 20px;animation:.28s cubic-bezier(.2,1.3,.4,1) both name-prompt-in;box-shadow:0 16px 40px #1c25484d}@keyframes name-prompt-in{0%{opacity:0;transform:translateY(12px)scale(.94)}}.name-prompt-portraits{justify-content:center;gap:2px;margin-bottom:6px;display:flex}.name-prompt-title{margin:0 0 4px;font-size:22px;font-weight:400}.name-prompt-lead{color:var(--ink-soft);margin:0 0 14px;font-size:14px;line-height:1.4}.name-prompt-input{border:2px solid var(--ice-shade);background:var(--ice);width:100%;color:var(--ink);font:inherit;text-align:center;border-radius:14px;outline:none;padding:12px 14px;font-size:18px}.name-prompt-input:focus{border-color:var(--fish)}.name-prompt-suggestions{flex-wrap:wrap;justify-content:center;gap:6px;margin:10px 0 16px;display:flex}.name-prompt-suggestion{background:var(--ice-shade);cursor:pointer;border:0;border-radius:999px;padding:6px 12px;font-size:14px}.name-prompt-suggestion:active{transform:scale(.96)}.name-prompt-start{background:var(--accent);color:#fff;cursor:pointer;border:0;border-radius:14px;width:100%;padding:13px;font-size:18px;box-shadow:0 3px #c97418}.name-prompt-start:disabled{cursor:default;background:#d9dde8;box-shadow:0 3px #bcc2d3}.name-prompt-start:not(:disabled):active{transform:translateY(2px);box-shadow:0 1px #c97418}.preview{top:8px;left:max(8px, var(--safe-left));justify-content:center;align-items:flex-start;gap:8px;display:flex;position:absolute;right:8px}.preview-card{background:var(--panel);opacity:.86;transform-origin:50% 0;border-radius:18px;align-items:center;gap:8px;min-width:0;padding:7px 14px 7px 8px;display:flex;position:relative;box-shadow:0 4px 12px #1c254824}.preview-card.is-next{opacity:1;box-shadow:0 0 0 2px var(--accent), 0 6px 16px #1c25482e}.preview-portrait{background:linear-gradient(180deg, var(--sky), var(--ice));border-radius:12px;flex:none}.preview-text{flex-direction:column;min-width:0;line-height:1.2;display:flex}.preview-name{text-overflow:ellipsis;white-space:nowrap;font-size:18px;overflow:hidden}.preview-meta{white-space:nowrap;color:var(--ink-soft);font-size:12.5px}.preview-order{background:var(--ink-soft);color:#fff;text-align:center;border-radius:999px;min-width:18px;padding:1px 6px;font-size:11px;line-height:1.35;position:absolute;top:-7px;left:-5px}.preview-card.is-next .preview-order{background:var(--accent);color:#fff}.preview[data-size=compact]{gap:6px;top:3px}.preview[data-size=compact] .preview-card{border-radius:15px;gap:5px;padding:2px 9px 2px 3px}.preview[data-size=compact] .preview-portrait{border-radius:50%}.preview[data-size=compact] .preview-name{font-size:13px}.preview[data-size=compact] .preview-meta{font-size:10px}.preview[data-size=compact] .preview-order,.preview[data-size=micro] .preview-order{display:none}.preview[data-size=micro]{gap:4px;top:1px}.preview[data-size=micro] .preview-card{border-radius:9px;gap:3px;padding:0 7px 0 1px}.preview[data-size=micro] .preview-portrait{border-radius:50%}.preview[data-size=micro] .preview-text{flex-direction:row;align-items:baseline;gap:4px;line-height:17px}.preview[data-size=micro] .preview-name{font-size:11.5px}.preview[data-size=micro] .preview-meta{font-size:9.5px}.preview[data-size=micro][data-count="3"] .preview-card:not(.is-next) .preview-meta{display:none}.preview-card.is-promoted{animation:.36s cubic-bezier(.2,1.5,.4,1) both preview-promote}.preview-card.is-shifting{animation:.3s ease-out both preview-shift}.preview-card.is-entering{animation:.34s ease-out both preview-enter}.preview-card.is-unlocked{animation:.6s cubic-bezier(.2,1.6,.4,1) both preview-unlock,.7s ease-in-out .2s 4 alternate preview-glow}@keyframes preview-promote{0%{transform:translate(34px)scale(.86)}}@keyframes preview-shift{0%{transform:translate(34px)}}@keyframes preview-enter{0%{opacity:0;transform:translate(30px)}}@keyframes preview-unlock{0%{opacity:0;transform:scale(.2)}}@keyframes preview-glow{to{box-shadow:0 0 0 3px #ffd34d,0 0 22px 6px #ffc42ebf}}@media (prefers-reduced-motion:reduce){.preview-card{animation:none!important}}.shop{height:var(--shop-height);gap:6px;padding:4px 8px 6px;display:flex;position:absolute;inset:auto 0 0;container-type:inline-size}.shop-item{border-radius:var(--radius);background:var(--panel);min-width:0;color:var(--ink);font-family:var(--font);text-align:left;cursor:pointer;pointer-events:auto;touch-action:manipulation;border:0;flex-direction:column;flex:1 1 0;justify-content:center;gap:2px;padding:0 10px 2px;transition:background-color .2s,box-shadow .2s;display:flex;position:relative;overflow:hidden;box-shadow:0 2px 8px #1c254824}.shop-item>span{white-space:nowrap;align-items:center;min-width:0;display:flex}.shop-head{justify-content:space-between;gap:4px;font-size:14px}.shop-name{text-overflow:ellipsis;overflow:hidden}.shop-pips{flex:none;gap:3px;display:flex}.shop-pips i{background:var(--ice-shade);border-radius:50%;width:7px;height:7px}.shop-pips i.is-on{background:var(--fish)}.shop-effect{color:var(--ink-soft);gap:3px;font-size:12.5px}.shop-box{color:var(--accent);flex:none;font-size:13px;display:flex}.shop-effect-text,.shop-extra{text-overflow:ellipsis;overflow:hidden}.shop-extra:not(:empty):before{content:"· "}.shop-cost{color:var(--ink-soft);gap:4px;font-size:14px}.shop-cost svg{color:var(--fish);flex:none;font-size:15px}.shop-fill{background:var(--fish);opacity:.55;transform-origin:0;height:4px;transition:transform .2s linear;position:absolute;inset:auto 0 0}.shop-item[aria-disabled=true] .shop-name{color:var(--ink-soft)}.shop-item[aria-disabled=true] .shop-cost svg{opacity:.6}.shop-item.is-short .shop-cost{color:var(--accent-ink)}.shop-item.is-affordable{box-shadow:inset 0 0 0 2px var(--accent), 0 3px 10px #f39a3b59;background:#fff3da}.shop-item.is-affordable .shop-cost{color:var(--accent-ink)}.shop-item.is-affordable .shop-cost svg{color:var(--accent)}.shop-item.is-affordable:active{background:#ffe6b8}.shop-item.is-max{box-shadow:none;cursor:default;background:#ffffffb3}.shop-item.is-max .shop-cost svg{display:none}.shop-item.is-refused{animation:.3s ease-out shop-refused}.shop-item.is-built{animation:.45s cubic-bezier(.2,1.5,.4,1) shop-built}@keyframes shop-refused{25%{transform:translate(-4px)}75%{transform:translate(4px)}}@keyframes shop-built{30%{transform:scale(.94)}65%{transform:scale(1.05)}}@container (width<=520px){.shop-item{padding:0 7px 2px}.shop-head{font-size:13px}.shop-pips{gap:2px}.shop-pips i{width:6px;height:6px}.shop-effect{letter-spacing:-.02em;font-size:11px}.shop-box{font-size:11px}.shop-extra{display:none}.shop-cost{font-size:13px}}@media (prefers-reduced-motion:reduce){.shop-item.is-refused,.shop-item.is-built{animation:none}}.toasts{pointer-events:none;z-index:30;flex-direction:column;align-items:center;gap:6px;width:min(92vw,420px);display:flex;position:absolute;top:36%;left:50%;transform:translate(-50%)}.toast{color:#fff;text-align:center;max-width:100%;box-shadow:var(--shadow);background:#1c2548e6;border-radius:999px;padding:9px 16px;font-size:15px;line-height:1.3;animation:.22s ease-out both toast-in}.toast.is-leaving{animation:.3s ease-in both toast-out}@keyframes toast-in{0%{opacity:0;transform:translateY(-8px)scale(.96)}}@keyframes toast-out{to{opacity:0;transform:translateY(-6px)}}