:root { --ink: #07131d; --cream: #f7e6c2; --gold: #ffc62e; --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --org1: #ffb13b; --org2: #ff7a1a; --orgd: #c4520a; --shadow: 0 8px 22px rgba(7,19,29,.25); }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #cfeaff; color: var(--ink); font-family: 'Fredoka', 'Jua', system-ui, sans-serif; user-select: none; -webkit-user-select: none; touch-action: none; overscroll-behavior: none; }
#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
button { font: inherit; color: inherit; border: 0; cursor: pointer; background: none; padding: 0; }
[hidden] { display: none !important; }
i { display: inline-block; flex: none; }
#touch { position: fixed; inset: 0; z-index: 1; touch-action: none; }
#joy { position: fixed; z-index: 2; width: 112px; height: 112px; margin: -56px 0 0 -56px; border-radius: 50%; border: 3px solid rgba(255,255,255,.7); background: rgba(255,255,255,.14); opacity: 0; pointer-events: none; transition: opacity .12s; }
#joy.on { opacity: 1; }
#knob { position: absolute; left: 30px; top: 30px; width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.85); box-shadow: 0 3px 10px rgba(7,19,29,.3); }
/* HUD: 코인 + 별 진행 + 일시정지/홈 */
#hud { position: fixed; left: 0; right: 0; top: 0; z-index: 5; pointer-events: none; height: calc(78px + var(--safe-t)); }
#hud .ic-btn { position: absolute; top: calc(12px + var(--safe-t)); pointer-events: auto; }
#btnPause { left: 12px; } #btnHome { right: 12px; }
.ic-btn { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; background: rgba(255,255,255,.92); box-shadow: 0 4px 0 rgba(7,19,29,.16); color: var(--ink); }
.ic-btn:active { transform: translateY(2px); }
#topc { position: absolute; left: 50%; top: calc(10px + var(--safe-t)); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 7px; }
.pill.big { display: flex; align-items: center; gap: 8px; padding: 5px 18px 5px 10px; border-radius: 999px; background: rgba(7,19,29,.62); color: #fff; font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; box-shadow: 0 4px 12px rgba(7,19,29,.2); }
.coin-ic { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3b0, #ffc62e 55%, #d98b00); box-shadow: inset 0 0 0 3px #e09a00, 0 1px 0 rgba(0,0,0,.2); }
#goalBar { position: relative; width: 172px; height: 14px; border-radius: 9px; background: rgba(7,19,29,.55); box-shadow: 0 0 0 2px rgba(255,255,255,.7); }
#goalFill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 9px; background: linear-gradient(90deg, #ffd23f, #ff9f1a); transition: width .25s; }
.gs { position: absolute; top: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; background: #5b6575; clip-path: polygon(50% 0, 62% 35%, 98% 36%, 69% 57%, 80% 92%, 50% 71%, 20% 92%, 31% 57%, 2% 36%, 38% 35%); filter: drop-shadow(0 2px 0 rgba(7,19,29,.4)); }
.gs.g1 { left: 40%; } .gs.g2 { left: 70%; } .gs.g3 { left: 100%; }
.gs.on { background: #ffd23f; } .gs.pulse { animation: starPop .5s; }
@keyframes starPop { 50% { transform: scale(1.8) rotate(25deg); } }
#dayLine { width: 120px; height: 4px; border-radius: 2px; background: rgba(7,19,29,.35); overflow: hidden; } #dayBar { display: block; height: 100%; background: #fff; }
.i-pause { width: 16px; height: 18px; border-left: 5px solid currentColor; border-right: 5px solid currentColor; }
.i-home { width: 22px; height: 20px; background: currentColor; clip-path: polygon(50% 0, 100% 45%, 86% 45%, 86% 100%, 14% 100%, 14% 45%, 0 45%); }
.i-map { width: 22px; height: 22px; background: currentColor; clip-path: polygon(0 12%, 33% 0, 66% 12%, 100% 0, 100% 88%, 66% 100%, 33% 88%, 0 100%); }
.i-skip { width: 0; height: 0; border-left: 12px solid currentColor; border-top: 8px solid transparent; border-bottom: 8px solid transparent; position: relative; margin-right: 20px; } .i-skip::after { content: ''; position: absolute; left: 12px; top: -8px; width: 4px; height: 16px; background: currentColor; }
.i-x { width: 18px; height: 18px; background: linear-gradient(45deg, transparent 42%, currentColor 42% 58%, transparent 58%), linear-gradient(-45deg, transparent 42%, currentColor 42% 58%, transparent 58%); }
/* 주문 띠 (하단, 안전영역) */
#strip { position: fixed; left: 0; right: 0; bottom: calc(12px + var(--safe-b)); z-index: 5; display: flex; justify-content: center; gap: 6px; padding: 0 8px; pointer-events: none; }
.oc { position: relative; width: 52px; height: 64px; border-radius: 15px; background: rgba(255,255,255,.93); border: 3px solid var(--cc, #fff); box-shadow: 0 4px 0 rgba(7,19,29,.2); display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; --p: 1; }
.oc .ci { position: absolute; left: 2px; top: 0; font-size: 13px; line-height: 1.1; }
.oc .its { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0; width: 100%; padding: 6px 2px 8px; }
.oc .its em { font-style: normal; font-size: 18px; line-height: 1.05; width: 20px; text-align: center; filter: grayscale(.6); opacity: .5; }
.oc .its em.cook { filter: none; opacity: 1; animation: cookPulse .8s infinite; } .oc .its em.ready { filter: none; opacity: 1; text-shadow: 0 0 6px #2bc46a; } .oc .its em.carried, .oc .its em.packed { filter: none; opacity: 1; }
.oc .its em.wait { opacity: .55; }
.oc .ring { position: absolute; left: 0; bottom: 0; height: 6px; width: calc(var(--p) * 100%); background: #2bc46a; border-radius: 0 3px 3px 0; transition: width .2s linear; }
.oc.urg .ring { background: #ff3b3b; } .oc.urg { animation: urg .5s infinite alternate; }
.oc.st-new { border-color: #ffc62e; animation: newPulse .6s infinite alternate; } .oc.st-new .its em { opacity: .9; filter: none; }
.oc.st-new::after { content: '!'; position: absolute; right: 3px; top: 0; font-weight: 700; font-size: 15px; color: #ff3b3b; }
.oc.wait { opacity: .6; }
.oc.st-bag, .oc.st-packing { border-color: #2bc46a; } .oc.st-out { border-color: #1f8cf0; background: #e6f4ff; }
@keyframes newPulse { to { transform: scale(1.08); } } @keyframes urg { to { transform: translateY(-3px); } } @keyframes cookPulse { 50% { transform: scale(1.2); } }
#mapBtn { position: fixed; right: 12px; bottom: calc(86px + var(--safe-b)); z-index: 5; width: 44px; height: 44px; }
#mapBtn.on { background: var(--org1); color: #fff; }
/* 월드 위 표시 */
#rings, #pins { position: fixed; inset: 0; z-index: 3; pointer-events: none; }
.sring { position: absolute; left: 0; top: 0; width: 0; height: 0; transition: opacity .15s; }
.sring i { position: absolute; left: -19px; top: -19px; width: 38px; height: 38px; border-radius: 50%; background: conic-gradient(#ff9f1a calc(var(--p) * 1turn), rgba(7,19,29,.4) 0); box-shadow: 0 3px 8px rgba(7,19,29,.3); }
.sring i::after { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: #fff; }
.sring b { position: absolute; left: -14px; top: -14px; width: 28px; height: 28px; display: grid; place-items: center; font-size: 18px; font-weight: 400; z-index: 1; }
.sring.done i { background: conic-gradient(#2bc46a calc(var(--p) * 1turn), rgba(7,19,29,.4) 0); animation: bob .5s infinite alternate; } .sring.hot i { background: conic-gradient(#ff3b3b calc(var(--p) * 1turn), rgba(7,19,29,.4) 0); }
@keyframes bob { to { transform: translateY(-6px); } }
.pin { position: absolute; left: 0; top: 0; width: 0; height: 0; --cc: #fff; }
.pin b { position: absolute; left: -15px; top: -34px; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 3px solid var(--cc); display: grid; place-items: center; font-size: 15px; font-weight: 400; box-shadow: 0 3px 6px rgba(7,19,29,.3); }
.pin b::after { content: ''; position: absolute; left: 50%; bottom: -9px; margin-left: -6px; border: 6px solid transparent; border-top: 8px solid var(--cc); border-bottom: 0; }
.pin i { position: absolute; left: -22px; top: -66px; width: 44px; text-align: center; font-style: normal; font-weight: 700; font-size: 15px; color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.pin u { position: absolute; left: 14px; top: -20px; width: 16px; height: 16px; display: none; border: 8px solid transparent; border-left: 12px solid var(--cc); transform-origin: -14px 8px; }
.pin.off u { display: block; }
.pin.big b { left: -21px; top: -48px; width: 42px; height: 42px; font-size: 22px; border-width: 4px; animation: bob .5s infinite alternate; } .pin.big i { top: -88px; font-size: 20px; }
.pin.dim { opacity: .75; } .pin:not(.big):not(.dim) b { background: #e6f4ff; }
#kmark { position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 4; pointer-events: none; }
#kmark .ka { position: absolute; left: -11px; top: -20px; border: 11px solid transparent; border-top: 15px solid #ff7a1a; border-bottom: 0; filter: drop-shadow(0 2px 0 #fff) drop-shadow(0 0 2px #fff); animation: kbob .5s infinite alternate; }
@keyframes kbob { to { transform: translateY(-5px); } }
#kmark .kc { position: absolute; left: 0; bottom: 24px; transform: translateX(-50%); display: flex; gap: 2px; padding: 1px 4px; border-radius: 14px; background: rgba(255,255,255,.88); white-space: nowrap; }
#kmark .kc:empty { display: none; } #kmark .kc em { font-style: normal; font-size: 19px; }
#pops { position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 6; pointer-events: none; }
.pop { position: absolute; transform: translate(-50%, -50%); font-size: 26px; font-weight: 700; color: #ffe14d; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; white-space: nowrap; animation: popUp 1.05s ease-out forwards; }
.pop.bad { color: #ff9a9a; } .pop.item { font-size: 30px; -webkit-text-stroke: 0; animation-duration: .8s; } .pop.tip { color: #ff9ec7; font-size: 22px; }
@keyframes popUp { 0% { transform: translate(-50%, -20%) scale(.5); opacity: 0; } 15% { transform: translate(-50%, -60%) scale(1.15); opacity: 1; } 100% { transform: translate(-50%, -190%) scale(1); opacity: 0; } }
/* 배너·토스트 */
#banner { position: fixed; left: 50%; top: calc(96px + var(--safe-t)); transform: translate(-50%, -20px) scale(.8); opacity: 0; z-index: 12; padding: 8px 22px; border-radius: 999px; background: #fff; border: 4px solid var(--bc, #fff); font-size: 26px; font-weight: 700; white-space: nowrap; box-shadow: var(--shadow); transition: .3s cubic-bezier(.2,1.6,.4,1); pointer-events: none; }
#banner.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
#toast { position: fixed; left: 50%; bottom: calc(150px + var(--safe-b)); transform: translate(-50%, 20px) scale(.9); opacity: 0; z-index: 70; display: flex; gap: 8px; align-items: center; padding: 8px 20px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 3px #ffc62e, var(--shadow); font-weight: 700; font-size: 22px; transition: .3s cubic-bezier(.2,1.6,.4,1); pointer-events: none; }
#toast.show { opacity: 1; transform: translate(-50%, 0) scale(1); } #toast em { font-style: normal; background: #ff5c7a; color: #fff; border-radius: 8px; padding: 1px 8px; font-size: 14px; } #toast span { font-size: 28px; }
/* 튜토리얼 */
#tut { position: fixed; inset: 0; z-index: 8; pointer-events: none; }
#tutDim { position: absolute; inset: 0; background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(7,19,29,0) 0 60px, rgba(7,19,29,.38) 120px); }
#tutRing { position: absolute; left: 0; top: 0; width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 50%; border: 6px solid #ffd63f; box-shadow: 0 0 0 3px rgba(7,19,29,.35), 0 0 22px #ffd63f; animation: ringP 1s infinite; }
@keyframes ringP { 50% { scale: 1.18; opacity: .7; } }
#tutHand { position: absolute; left: 0; top: 0; width: 56px; height: 56px; filter: drop-shadow(0 4px 8px rgba(7,19,29,.5)); transform-origin: 20px 6px; }
#tutIc { position: absolute; right: 18px; top: calc(96px + var(--safe-t)); font-size: 40px; filter: drop-shadow(0 3px 6px rgba(7,19,29,.4)); }
#tutDrag { position: absolute; left: 50%; top: 74%; width: 52px; height: 52px; margin-left: -20px; animation: dragH 1.4s infinite; filter: drop-shadow(0 4px 8px rgba(7,19,29,.5)); }
@keyframes dragH { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: 1; } 80% { transform: translate(var(--dx), var(--dy)); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)); opacity: 0; } }
.skip { position: fixed; left: 12px; top: calc(68px + var(--safe-t)); pointer-events: auto; display: flex; align-items: center; height: 36px; padding: 0 14px 0 12px; border-radius: 18px; background: rgba(255,255,255,.9); font-weight: 700; font-size: 15px; box-shadow: 0 3px 0 rgba(7,19,29,.16); }
/* 시트 */
#sheet { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: linear-gradient(180deg, #fff6e6, #ffe9c7); padding-top: var(--safe-t); }
.sh-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; font-size: 26px; font-weight: 700; } .sh-head b { flex: 1; }
.sh-coin { display: flex; align-items: center; gap: 6px; background: rgba(7,19,29,.7); color: #fff; font-size: 20px; padding: 4px 14px 4px 8px; border-radius: 999px; }
.sh-x { width: 44px; height: 44px; border-radius: 14px; background: #fff; display: grid; place-items: center; box-shadow: 0 3px 0 rgba(7,19,29,.16); }
.sh-tabs { display: flex; gap: 6px; padding: 0 12px 8px; overflow-x: auto; } .sh-tabs button { flex: 1; min-width: 44px; height: 46px; border-radius: 14px; background: rgba(255,255,255,.7); font-size: 24px; box-shadow: 0 3px 0 rgba(7,19,29,.12); } .sh-tabs button.on { background: var(--bc); box-shadow: 0 3px 0 rgba(7,19,29,.3); transform: translateY(-2px); }
.sh-list { flex: 1; overflow-y: auto; padding: 4px 12px calc(20px + var(--safe-b)); display: flex; flex-direction: column; gap: 8px; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
.node { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 18px; background: #fff; border-left: 8px solid var(--bc); box-shadow: 0 3px 0 rgba(7,19,29,.12); }
.node.lock { opacity: .6; } .ni { font-size: 32px; width: 44px; text-align: center; } .nb { flex: 1; min-width: 0; } .nb b { font-size: 19px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pips { display: flex; gap: 4px; margin-top: 4px; } .pips s { width: 14px; height: 8px; border-radius: 4px; background: #d6d9de; } .pips s.on { background: #2bc46a; }
.ne { font-weight: 700; font-size: 17px; text-align: right; min-width: 56px; } .ne small { display: block; color: #2bc46a; font-size: 13px; }
.buy { display: flex; align-items: center; justify-content: center; gap: 5px; min-width: 88px; height: 44px; padding: 0 10px; border-radius: 14px; font-weight: 700; font-size: 18px; color: #fff; background: linear-gradient(180deg, var(--org1), var(--org2)); box-shadow: 0 4px 0 var(--orgd); }
.buy:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--orgd); } .buy.lock { background: #aab2bd; box-shadow: 0 4px 0 #7b8490; } .buy.max { background: #2bc46a; box-shadow: 0 4px 0 #17803f; } .buy .coin-ic { width: 18px; height: 18px; }
.bump { animation: starPop .4s; }
.pres { background: #fff; border-radius: 22px; padding: 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; } .pres .pi { font-size: 64px; } .pres b { font-size: 26px; } .pres .pv { font-size: 22px; color: #ff7a1a; font-weight: 700; } .pres .pm { font-size: 18px; }
.cx-h { display: flex; align-items: center; gap: 8px; font-size: 24px; margin-top: 6px; } .cx-h b { font-size: 20px; }
.cx-g { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .cx { background: #fff; border-radius: 14px; padding: 6px 2px; text-align: center; box-shadow: 0 3px 0 rgba(7,19,29,.1); } .cx.lock { opacity: .5; } .cx .cxi { font-size: 30px; } .cx b { display: block; font-size: 12px; line-height: 1.1; min-height: 14px; } .cx small { font-size: 12px; color: #ff7a1a; font-weight: 700; display: block; min-height: 14px; } .cx.got { box-shadow: 0 0 0 3px #ffc62e; } .cx.open .cxi { filter: grayscale(1) opacity(.7); }
.quest { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #fff; border-radius: 16px; } .quest.done { box-shadow: 0 0 0 3px #2bc46a; } .qb { flex: 1; } .qb b { font-size: 15px; } .qbar { height: 10px; border-radius: 5px; background: #e3e6ea; overflow: hidden; } .qbar span { display: block; height: 100%; background: #2bc46a; } .qr { display: flex; align-items: center; gap: 4px; font-weight: 700; } .qr .coin-ic { width: 18px; height: 18px; }
.kd-up { margin: 4px auto; padding: 5px 16px; border-radius: 999px; background: linear-gradient(180deg, #ffe36a, #ffb13b); font-weight: 700; font-size: 20px; color: #5a2c00; box-shadow: 0 3px 0 #c4520a; animation: starPop .6s; }
#loadMsg { position: fixed; inset: 0; display: grid; place-items: center; z-index: 100; background: #cfeaff; font-size: 14px; } .spin { width: 46px; height: 46px; border-radius: 50%; border: 6px solid #fff; border-top-color: #ff7a1a; animation: sp 1s linear infinite; } @keyframes sp { to { transform: rotate(360deg); } }
#nogl { display: none; } body.nogl #nogl { display: grid; position: fixed; inset: 0; place-items: center; background: #fff; z-index: 200; }
@media (min-width: 700px) { #strip { bottom: 20px; } .oc { width: 62px; height: 74px; } .oc .its em { font-size: 22px; width: 24px; } #topc { transform: translateX(-50%) scale(1.15); transform-origin: top; } }

.sh-main { display: flex; gap: 6px; padding: 0 12px 8px; } .sh-main button { flex: 1; height: 42px; border-radius: 14px; background: rgba(255,255,255,.7); font-size: 20px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 6px; box-shadow: 0 3px 0 rgba(7,19,29,.12); } .sh-main button.on { background: linear-gradient(180deg, var(--org1), var(--org2)); color: #fff; box-shadow: 0 3px 0 var(--orgd); } .sh-main span { font-size: 15px; }

#strip .oc { pointer-events: auto; cursor: pointer; }
.pop.tap { font-size: 30px; color: #fff; text-shadow: 0 0 6px #ff7a1a; }