:root { --ink: #07131d; --cream: #f7e6c2; --gold: #ffc62e; --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px); }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; position: fixed; inset: 0; background: #2f8fe8; color: var(--ink); font-family: 'Fredoka', 'Jua', system-ui, sans-serif; user-select: none; -webkit-user-select: none; touch-action: none; }
#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
button { font: inherit; color: inherit; border: 0; cursor: pointer; background: none; }
[hidden] { display: none !important; }
i { display: inline-block; flex: none; }
.ic-btn { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: rgba(255,255,255,.92); box-shadow: 0 4px 0 rgba(7,19,29,.15); pointer-events: auto; }
.i-pause { width: 16px; height: 18px; border-left: 5px solid var(--ink); border-right: 5px solid var(--ink); }
.i-x { width: 18px; height: 18px; background: linear-gradient(45deg, transparent 42%, var(--ink) 42% 58%, transparent 58%), linear-gradient(-45deg, transparent 42%, var(--ink) 42% 58%, transparent 58%); }
.i-sound { width: 24px; height: 22px; background: var(--ink); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 5V4L7 9H3zm13.5 3A4.5 4.5 0 0 0 14 8v8a4.5 4.5 0 0 0 2.5-4zM14 3.2v2.1a7 7 0 0 1 0 13.4v2.1a9 9 0 0 0 0-17.6z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 5V4L7 9H3zm13.5 3A4.5 4.5 0 0 0 14 8v8a4.5 4.5 0 0 0 2.5-4zM14 3.2v2.1a7 7 0 0 1 0 13.4v2.1a9 9 0 0 0 0-17.6z'/%3E%3C/svg%3E") center/contain no-repeat; }
.btn-sound.off .i-sound { opacity: .35; }
.pill { display: flex; align-items: center; gap: 6px; padding: 5px 14px 5px 8px; border-radius: 999px; background: rgba(7,19,29,.6); color: #fff; font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* HUD */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
#hud > * { position: absolute; }
#btnPause { left: 14px; top: calc(14px + var(--safe-t)); }
#topc { left: 72px; right: 118px; top: calc(12px + var(--safe-t)); display: flex; flex-direction: column; align-items: center; gap: 2px; }
#prog { width: 100%; max-width: 280px; display: flex; flex-direction: column; align-items: center; gap: 3px; }
#prog b { font-size: 14px; font-weight: 700; color: #fff; -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill; letter-spacing: 1px; }
.bar { position: relative; width: 100%; height: 14px; border-radius: 999px; background: rgba(7,19,29,.55); box-shadow: inset 0 0 0 2px rgba(255,255,255,.25); }
.bar > i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 999px; background: linear-gradient(90deg, #7fe3ff, #d6ff5a); }
.pflag { position: absolute; right: -6px; top: -12px; width: 28px; height: 28px; }
#score { font-size: 38px; font-weight: 700; color: #fff; -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 0 4px 0 rgba(7,19,29,.35); font-variant-numeric: tabular-nums; line-height: 1; }
#left { left: 14px; top: calc(70px + var(--safe-t)); display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
#hearts, #relics { display: flex; gap: 5px; padding: 5px 8px; border-radius: 999px; background: rgba(7,19,29,.55); }
#hearts i { width: 24px; height: 22px; background: #5a6577; clip-path: path('M12 22 L2 11 A6 6 0 0 1 12 4 A6 6 0 0 1 22 11 Z'); }
#hearts i.on { background: #ff4d6d; }
#relics i { width: 20px; height: 24px; background: #5a6577; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
#relics i.on { background: linear-gradient(135deg, #fff1b0, #ffc62e 60%, #d98b00); }
#right { right: 14px; top: calc(14px + var(--safe-t)); display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
#hstars { display: flex; gap: 2px; padding: 4px 8px; border-radius: 999px; background: rgba(7,19,29,.55); }
#hstars svg { width: 22px; height: 22px; } #hstars path { fill: #5a6577; } #hstars path.on { fill: #ffc62e; stroke: #07131d; stroke-width: 1.2; }
#fuelBar { left: 50%; bottom: calc(14% + var(--safe-b)); transform: translateX(-50%); width: 160px; height: 12px; border-radius: 999px; background: rgba(7,19,29,.55); }
#fuelBar i { display: block; height: 100%; width: calc(var(--p) * 100%); border-radius: 999px; background: linear-gradient(90deg, #ffe14d, #d6ff5a); }
#pops { left: 50%; top: 40%; width: 0; height: 0; }
.pop { position: absolute; left: 0; top: 0; transform: translate(-50%, 0); font-size: 28px; font-weight: 700; color: #fff; -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; white-space: nowrap; animation: popUp .9s ease-out forwards; }
.pop small { font-size: 20px; color: #ffe14d; margin-left: 6px; }
@keyframes popUp { 0% { transform: translate(-50%, 10px) scale(.6); opacity: 0; } 20% { transform: translate(-50%, -10px) scale(1.15); opacity: 1; } 100% { transform: translate(-50%, -70px) scale(1); opacity: 0; } }

/* 지도 */
.screen { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; z-index: 10; }
#map { background: linear-gradient(180deg, rgba(10,30,60,.55), rgba(10,30,60,.15) 30%, rgba(10,30,60,.5)); padding: calc(10px + var(--safe-t)) 14px calc(14px + var(--safe-b)); }
.mtop { width: 100%; max-width: 440px; display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.mtop .pill:nth-child(3) { margin-right: auto; }
#nodes { position: relative; flex: 1; width: 100%; max-width: 440px; overflow-y: auto; display: flex; flex-direction: column-reverse; gap: 22px; padding: 18px 6px 28px; touch-action: pan-y; scrollbar-width: none; }
#nodes::-webkit-scrollbar { display: none; }
#nodes svg.path { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; z-index: 0; }
.node { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 46%; flex: none; text-align: center; transition: transform .15s; }
.node.l { align-self: flex-start; margin-left: 6%; } .node.r { align-self: flex-end; margin-right: 6%; }
.node .num { position: relative; width: 78px; height: 78px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 4px rgba(255,255,255,.85), 0 6px 0 rgba(7,19,29,.28), 0 10px 20px rgba(7,19,29,.3); }
.node .num b { font-size: 36px; color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.node .nm { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 5px 12px 6px; border-radius: 16px; background: rgba(255,255,255,.93); box-shadow: 0 3px 0 rgba(7,19,29,.18); }
.node .nm b { font-size: 15px; white-space: nowrap; }
.node .nm em { display: flex; gap: 2px; font-style: normal; }
.node .nm em i { width: 17px; height: 17px; background: #c5ccd6; clip-path: polygon(50% 0, 62% 36%, 100% 38%, 70% 60%, 80% 100%, 50% 76%, 20% 100%, 30% 60%, 0 38%, 38% 36%); }
.node .nm em i.on { background: #ffc62e; }
.node.sel { transform: scale(1.1); }
.node.sel .num { box-shadow: inset 0 0 0 4px #fff, 0 0 0 5px #ffb13b, 0 0 26px 6px rgba(255,177,59,.7), 0 8px 0 rgba(7,19,29,.28); animation: bob 1.1s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-5px); } }
.node.lock { filter: grayscale(.9) brightness(.85); opacity: .75; }
.node.lock .num u { position: absolute; right: -2px; bottom: -2px; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); }
.node.lock .num u::after { content: ''; position: absolute; left: 8px; top: 8px; width: 12px; height: 10px; border-radius: 2px; background: #fff; box-shadow: 0 -5px 0 -2px #fff; }
.selbar { width: 100%; max-width: 440px; display: flex; justify-content: center; padding-top: 6px; }
#btnGo { display: flex; align-items: center; justify-content: center; gap: 12px; min-width: 260px; height: 70px; padding: 0 30px; border-radius: 999px; font-size: 24px; font-weight: 700; color: #fff; background: linear-gradient(180deg, #ffb13b, #ff7a1a); box-shadow: 0 7px 0 #c4520a, 0 14px 28px rgba(196,82,10,.35); text-shadow: 0 2px 0 rgba(0,0,0,.18); }
#btnGo:active { transform: translateY(5px); box-shadow: 0 2px 0 #c4520a; }
#toast { position: fixed; left: 50%; top: calc(84px + var(--safe-t)); transform: translate(-50%, -30px) scale(.8); opacity: 0; padding: 10px 18px; border-radius: 22px; background: rgba(255,255,255,.96); box-shadow: 0 0 0 3px #ffc62e; z-index: 20; pointer-events: none; transition: .35s cubic-bezier(.2,1.6,.4,1); font-weight: 700; }
#toast.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
#nogl { display: none; } body.nogl #nogl { display: grid; position: fixed; inset: 0; place-items: center; font-size: 24px; }

#crew { display: flex; gap: 6px; }
#crew i { width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 3px rgba(255,255,255,.85), 0 3px 0 rgba(7,19,29,.3); }
#crew i.penguin { background: radial-gradient(circle at 50% 70%, #fff 0 28%, #1d2230 30%); }
#crew i.seal { background: radial-gradient(circle at 40% 40%, #cfd8e3, #6d7f95); }
#crew i.whale { background: radial-gradient(circle at 40% 40%, #7fd0ff, #2a7ad0); }
#crew i.used { filter: grayscale(1) brightness(.7); }
.node .nm .rl { display: flex; gap: 2px; justify-content: center; }
.node .nm .rl u { width: 11px; height: 13px; background: #c5ccd6; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.node .nm .rl u.on { background: linear-gradient(135deg, #fff1b0, #ffc62e 60%, #d98b00); }

#codex { background: rgba(7,19,29,.55); justify-content: center; padding: 16px; z-index: 12; }
.cdx { width: min(100%, 420px); max-height: 86vh; overflow-y: auto; background: rgba(255,255,255,.95); border-radius: 26px; padding: 16px; box-shadow: 0 10px 30px rgba(7,19,29,.3); }
.cdx-h { display: flex; justify-content: space-between; align-items: center; font-size: 22px; margin-bottom: 10px; }
#cdxCrew { display: flex; gap: 14px; justify-content: center; margin-bottom: 14px; }
#cdxCrew i { width: 58px; height: 58px; border-radius: 50%; filter: grayscale(1) brightness(.75); opacity: .6; box-shadow: inset 0 0 0 4px rgba(255,255,255,.9), 0 4px 0 rgba(7,19,29,.25); }
#cdxCrew i.on { filter: none; opacity: 1; }
#cdxCrew i.penguin { background: radial-gradient(circle at 50% 70%, #fff 0 28%, #1d2230 30%); }
#cdxCrew i.seal { background: radial-gradient(circle at 40% 40%, #cfd8e3, #6d7f95); }
#cdxCrew i.whale { background: radial-gradient(circle at 40% 40%, #7fd0ff, #2a7ad0); }
.cdx-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-radius: 16px; background: #f2f4f8; margin-bottom: 8px; font-weight: 700; }
.cdx-row .rl { display: flex; gap: 6px; }
.cdx-row .rl u { width: 24px; height: 28px; background: #c5ccd6; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.cdx-row .rl u.on { background: linear-gradient(135deg, #fff1b0, #ffc62e 60%, #d98b00); }
#cdxStats { display: flex; gap: 18px; justify-content: center; margin-bottom: 12px; font-size: 20px; } #cdxStats span { display: flex; align-items: center; gap: 6px; }
#cdxSkin { display: flex; gap: 8px; justify-content: center; margin-bottom: 12px; flex-wrap: wrap; } .skb { padding: 8px 12px; border-radius: 14px; background: #f2f4f8; font-weight: 700; font-size: 14px; box-shadow: 0 3px 0 rgba(7,19,29,.15); } .skb.on { background: linear-gradient(180deg, #ffb13b, #ff7a1a); color: #fff; } .skb.lock { opacity: .45; }

#hstars { gap: 8px; padding: 6px 10px; }
.hs { width: 22px; height: 22px; background: #5a6577; }
.hs.flag { clip-path: polygon(14% 0, 18% 0, 18% 100%, 14% 100%, 14% 0, 18% 8%, 92% 8%, 70% 34%, 92% 60%, 18% 60%); }
.hs.rl { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.hs.hp { clip-path: path('M11 21 L2 11 A5.5 5.5 0 0 1 11 4 A5.5 5.5 0 0 1 20 11 Z'); }
.hs.on { background: #ffc62e; filter: drop-shadow(0 0 4px rgba(255,198,46,.9)); }
.hs.hp.on { background: #ff4d6d; filter: drop-shadow(0 0 4px rgba(255,77,109,.9)); }
#menu .kk-best, #menu .best-m { transform: translateY(-38px); }
#relics[hidden], #crew[hidden] { display: none; }
#menu .kk-best, #menu .best-m { transform: none; position: relative; top: -40px; }