:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--ink:#e9eef7;--ink-dim:#a9b6cc;--night:#070d18;--night-2:#0e1a2b;--sea:#173149;--teal:#2c6f78;--amber:#ffb347;--amber-hot:#ffd27a;--ember:#ff6a3d;--danger:#ff4d4d;--veil:#060c18b8;--safe-t:env(safe-area-inset-top,0px);--safe-r:env(safe-area-inset-right,0px);--safe-b:env(safe-area-inset-bottom,0px);--safe-l:env(safe-area-inset-left,0px);color:var(--ink);background:var(--night);-webkit-text-size-adjust:100%;font-family:Apple SD Gothic Neo,Noto Sans KR,system-ui,-apple-system,sans-serif;line-height:1.6}html,body{background:var(--night);min-height:100%;margin:0}body{overscroll-behavior:none;-webkit-tap-highlight-color:transparent;min-height:100dvh}#app{min-height:100dvh}button,input{font:inherit;color:inherit}button{cursor:pointer;touch-action:manipulation;background:#173149bf;border:1px solid #ffd27a59;border-radius:999px;min-height:44px;padding:.6rem 1.4rem;transition:transform .12s,background .2s,box-shadow .2s}button:hover{background:#2c6f78cc}button:active{transform:scale(.97)}button:focus-visible{outline:2px solid var(--amber-hot);outline-offset:3px}button.big{color:#2a1504;background:radial-gradient(120% 140% at 50% 20%, var(--amber-hot), var(--amber) 55%, #e8892a);border:none;min-height:56px;padding:.85rem 2.6rem;font-size:1.2rem;font-weight:700;box-shadow:0 0 24px #ffb34773,0 6px 18px #00000073}button.big:focus-visible{outline-color:#fff3dc59}button.big:hover{box-shadow:0 0 36px #ffb347b3,0 6px 18px #00000073}.quiet,.muted{opacity:.6}.row{flex-wrap:wrap;justify-content:center;align-items:center;gap:.75rem;display:flex}.guesses{padding-left:1.2rem}.judged{font-weight:700}@keyframes from-dark{0%{opacity:0}}.screen{box-sizing:border-box;text-align:center;min-height:100dvh;padding:calc(1.5rem + var(--safe-t)) calc(1.5rem + var(--safe-r)) calc(1.5rem + var(--safe-b)) calc(1.5rem + var(--safe-l));background:radial-gradient(60% 45% at 50% 46%, #ffb34738, transparent 70%), radial-gradient(120% 80% at 50% 110%, #2c6f7859, transparent 70%), linear-gradient(#070d18ad, #070d18eb), url(/art/ground.webp) center / cover no-repeat, var(--night);flex-direction:column;justify-content:center;align-items:center;gap:.9rem;animation:.6s ease-out from-dark;display:flex;position:relative}.screen h1{letter-spacing:.02em;margin:0;font-weight:800}.stage{flex-direction:column;align-items:center;margin:0;line-height:1.3;display:flex}.stage b{color:var(--amber-hot);border:1px solid #ffd27a73;border-radius:999px;padding:.15rem .7rem;font-size:.85rem}.stage span{color:var(--ink-dim);margin-top:.3rem;font-size:.78rem}.title .stage{top:calc(1rem + var(--safe-t));position:absolute;left:0;right:0}.title .hero{flex:none;place-items:center;width:9rem;height:10.5rem;display:grid;position:relative}.title .hero img{filter:drop-shadow(0 6px 10px #0000008c);width:auto;height:10rem;animation:3.2s ease-in-out infinite bob;display:block;position:relative}.title .hero .glow{background:radial-gradient(circle,#ffd27a8c,#ffb3472e 40%,#0000 70%);border-radius:50%;width:16rem;height:16rem;margin:-8rem 0 0 -8rem;animation:2.6s ease-in-out infinite flicker;position:absolute;top:48%;left:50%}@keyframes bob{50%{transform:translateY(-5px)}}@keyframes flicker{0%,to{opacity:.85;transform:scale(1)}40%{opacity:1;transform:scale(1.04)}70%{opacity:.75;transform:scale(.98)}}.title h1{color:#fff3dc;text-shadow:0 0 22px #ffb3478c,0 2px #00000080;font-size:clamp(2.6rem,9vw,4rem)}.title .lead{max-width:26rem;color:var(--ink-dim);word-break:keep-all;margin:0 0 .8rem}.result .eyebrow{color:var(--ink-dim);letter-spacing:.3em;margin:0;font-size:.85rem}.result .verdict{font-size:clamp(2rem,7vw,2.8rem)}.result.win .verdict{color:#fff3dc;text-shadow:0 0 24px #ffb347b3}.result.win{background:radial-gradient(90% 60% at 50% 0%, #ffc47859, transparent 70%), linear-gradient(#070d1899, #070d18e6), url(/art/ground.webp) center / cover no-repeat, var(--night)}.result.lose .verdict{color:var(--ink-dim)}.stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;width:min(26rem,100%);margin:.4rem 0;display:grid}.stats>div{background:#0e1a2bbf;border:1px solid #a9b6cc2e;border-radius:14px;padding:.7rem .6rem}.stats dt{text-wrap:balance;color:var(--ink-dim);word-break:keep-all;font-size:.8rem;line-height:1.3}.stats dd{color:var(--amber-hot);margin:.2rem 0 0;font-size:1.5rem;font-weight:800}.result .row{margin-top:.4rem}.run{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;background:var(--night-2);animation:.5s ease-out from-dark;position:fixed;inset:0;overflow:hidden}.run canvas.world{width:100%;height:100%;display:block}.hud{padding:calc(.5rem + var(--safe-t)) calc(.6rem + var(--safe-r)) .6rem calc(.6rem + var(--safe-l));pointer-events:none;background:linear-gradient(#070d1899,#0000);grid-template-columns:auto 1fr auto;align-items:center;gap:.6rem;transition:opacity .3s;display:grid;position:absolute;top:0;left:0;right:0}.run[data-mode=opening] .bar{opacity:0}.hud>*{pointer-events:auto}.hud .bars{pointer-events:none;grid-template-columns:repeat(3,minmax(0,1fr));justify-self:center;gap:.9rem;width:100%;max-width:46rem;transition:opacity .4s;display:grid}.corner{background:#070d188c;border-color:#a9b6cc40;min-width:40px;min-height:40px;padding:.3rem .85rem;font-size:.85rem}.corner.snd{place-items:center;width:40px;padding:.3rem;display:grid}.corner.snd svg{width:22px;height:22px}.corner.snd .slash,.corner.snd.off .wave{display:none}.corner.snd.off .slash{display:inline}.corner.snd.off{color:var(--ink-dim)}.bar{flex-direction:column;gap:.2rem;min-width:0;transition:opacity .4s;display:flex;position:relative}.bar .lab{white-space:nowrap;text-overflow:ellipsis;text-shadow:0 1px 2px #000c;font-size:.78rem;font-weight:700;line-height:1.1;overflow:hidden}.bar .track{background:#070d18b3;border-radius:999px;height:8px;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #a9b6cc40}.bar .track i{border-radius:inherit;transform-origin:0;transition:transform .15s linear;position:absolute;inset:0;transform:scaleX(0)}.bar.hp .track i{background:linear-gradient(90deg, var(--ember), var(--amber))}.bar.hp:after{content:attr(data-num);color:var(--amber-hot);text-shadow:0 1px 2px #000c;font-size:.75rem;font-weight:700;line-height:1.1;position:absolute;top:0;right:0}.bar.hp.crisis .track{animation:.8s ease-in-out infinite crisis}.bar.hp.crisis .track i{background:var(--danger)}.bar.hp.crisis:after{color:var(--danger)}@keyframes crisis{50%{box-shadow:inset 0 0 0 1px var(--danger), 0 0 12px var(--danger)}}.bar.xp .track i{background:linear-gradient(90deg,#ffd27a,#fff3c4);box-shadow:0 0 8px #ffd27acc}.bar.night .track i{background:linear-gradient(90deg,#2c6f78,#7fb3d5);transition:transform .5s linear}.bar.night.warn .track{animation:1.2s ease-in-out infinite crisis}.bar.night.tide .lab{color:#9fd7ff}.bar.night.tide .track i{background:#4aa3d8;box-shadow:0 0 8px #4aa3d8b3}.bar.night.tide .track:after{content:"";background:repeating-linear-gradient(90deg,#0000 0 calc(8.33333% - 2px),#070d18e6 calc(8.33333% - 2px) 8.33333%);position:absolute;inset:0}.toasts{top:calc(4.2rem + var(--safe-t));pointer-events:none;flex-direction:column;align-items:center;gap:.4rem;padding:0 1rem;display:flex;position:absolute;left:0;right:0}.toast{text-align:center;word-break:keep-all;max-width:30rem;animation:toast var(--ms,2.5s) ease forwards;background:#070d18c7;border:1px solid #a9b6cc4d;border-radius:12px;padding:.5rem 1.1rem;font-weight:700}.toast.warn,.toast.king{color:#ffd9d0;border-color:#ff6a3d99;box-shadow:0 0 24px #ff6a3d59}.toast.tide{color:#bfe6ff;border-color:#4aa3d899}@keyframes toast{0%{opacity:0;transform:translateY(-8px)scale(.96)}8%,80%{opacity:1;transform:none}to{opacity:0}}.stick{--r:56px;width:calc(var(--r) * 2);height:calc(var(--r) * 2);margin:calc(var(--r) * -1) 0 0 calc(var(--r) * -1);pointer-events:none;opacity:0;background:radial-gradient(circle,#ffb34714,#070d1840 70%);border:2px solid #ffd27a73;border-radius:50%;transition:opacity .12s;position:absolute;top:0;left:0}.stick.on{opacity:1}.stick i{background:radial-gradient(circle at 40% 35%, #fff3c4, var(--amber) 60%, #c86a1c);border-radius:50%;width:44px;height:44px;margin:-22px 0 0 -22px;position:absolute;top:50%;left:50%;box-shadow:0 0 16px #ffb347b3}.run .overlay{pointer-events:none;place-items:center;display:grid;position:absolute;inset:0}.run .overlay>*{pointer-events:auto}.panel{box-sizing:border-box;text-align:center;background:#070d18d6;border:1px solid #ffd27a40;border-radius:20px;width:min(30rem,100vw - 2rem);max-height:calc(100dvh - 6rem);padding:1.6rem 1.5rem;animation:.5s ease-out from-dark;overflow:auto;box-shadow:0 0 60px #ffb3471f,0 12px 40px #00000080}.panel h2{color:#fff3dc;margin:0 0 .8rem;font-size:1.6rem}.howto ul{text-align:left;gap:.55rem;margin:0 0 1.3rem;padding:0;list-style:none;display:grid}.howto li{word-break:keep-all;color:var(--ink);padding-left:1.3rem;position:relative}.howto li:before{content:"";background:var(--amber);width:.5rem;height:.5rem;box-shadow:0 0 8px var(--amber);border-radius:50%;position:absolute;top:.6em;left:.2rem}.choose{-webkit-backdrop-filter:blur(2px);padding:calc(1rem + var(--safe-t)) calc(1rem + var(--safe-r)) calc(1rem + var(--safe-b)) calc(1rem + var(--safe-l));box-sizing:border-box;background:radial-gradient(70% 60%,#0e1a2b80,#070d18c7);place-items:center;animation:.25s ease-out from-dark;display:grid;position:absolute;inset:0;overflow:auto}.choose-in{text-align:center;width:min(58rem,100%)}.choose h2{color:#fff3dc;text-shadow:0 0 18px #ffb34799;margin:0;font-size:1.7rem}.choose .lead{color:var(--ink-dim);margin:.1rem 0 1rem}.cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;display:grid}.card{text-align:center;background:linear-gradient(#173149eb,#0a1424f2);border:1px solid #ffd27a4d;border-radius:18px;flex-direction:column;align-items:center;gap:.5rem;padding:1.2rem 1rem 1.1rem;animation:.3s ease-out backwards card-in;display:flex;position:relative;box-shadow:0 8px 24px #00000073}.card:nth-child(2){animation-delay:50ms}.card:nth-child(3){animation-delay:.1s}@keyframes card-in{0%{opacity:0;transform:translateY(12px)}}.card:hover,.card:focus-visible{border-color:var(--amber);background:linear-gradient(#2c5268f2,#0e1c2ef7);box-shadow:0 0 28px #ffb34766,0 8px 24px #00000073}.card.new{border-color:#ffd27aa6}.card img{object-fit:contain;filter:drop-shadow(0 0 12px #ffb34759);pointer-events:none;border-radius:50%;width:96px;height:96px}.card .text{flex-direction:column;align-items:center;gap:.25rem;display:flex}.card b{color:#fff3dc;font-size:1.2rem}.card em{color:#2a1504;background:var(--amber);border-radius:999px;padding:.05rem .6rem;font-size:.8rem;font-style:normal;font-weight:700}.card small{color:var(--ink-dim);word-break:keep-all;font-size:.88rem;line-height:1.45}.card .key{color:var(--ink-dim);opacity:.8;font-size:.8rem;font-weight:700;position:absolute;top:.55rem;left:.7rem}.choose .keys{color:var(--ink-dim);margin:.9rem 0 0;font-size:.8rem}@media (hover:none) and (pointer:coarse){.choose .keys,.card .key{display:none}}@media (orientation:portrait){.cards{grid-template-columns:1fr;gap:.7rem}.card{text-align:left;flex-direction:row;gap:.9rem;padding:.9rem 1rem}.card img{flex:none;width:72px;height:72px}.card .text{align-items:flex-start}.card .text b{display:inline}}.ending{text-align:center;box-sizing:border-box;flex-direction:column;justify-content:center;align-items:center;gap:.4rem;padding:1.5rem;display:flex;position:absolute;inset:0}.ending.win{animation:2.2s ease-out forwards dawn}.ending.lose{animation:2.2s ease-in forwards dark}@keyframes dawn{0%{background:#ffd2a000}to{background:radial-gradient(50% 40% at 50% 48%,#14101e73,#14101e14 75%)}}@keyframes dark{0%{background:0 0}to{background:#02040ad9}}.ending h2{margin:0;font-size:clamp(2rem,8vw,3.2rem);font-weight:800;animation:1s ease-out .3s backwards from-dark}.ending.win h2{color:#fff7e6;text-shadow:0 0 30px #ffb347e6,0 2px 6px #0009}.ending.lose h2{color:#c7d0de;text-shadow:0 2px 10px #000c}.ending p{color:#fff;text-shadow:0 1px 6px #000000f2,0 0 2px #000000e6;margin:0 0 1.2rem;font-weight:700;animation:1s ease-out .7s backwards from-dark}.ending button{visibility:hidden;opacity:0;transition:opacity .4s}.run.ready .ending button{visibility:visible;opacity:1}@media (width<=640px){.hud{grid-template-columns:auto 1fr 1fr auto;grid-template-areas:"quit night night snd""hp hp xp xp";gap:.5rem .7rem}.hud .quit{grid-area:quit}.hud .snd{grid-area:snd}.hud .bars{display:contents}.bar.night{grid-area:night}.bar.hp{grid-area:hp}.bar.xp{grid-area:xp}.toasts{top:calc(6.2rem + var(--safe-t))}.toast{font-size:.92rem}}@media (prefers-reduced-motion:reduce){*,:before,:after{animation-duration:.01ms!important;animation-iteration-count:1!important}}
