:root { --ink: #07131d; --cream: #f7e6c2; --cyan: #2fd6ee; --gold: #ffc62e; --pink: #ff5c7a; --panel: rgba(255,255,255,.95); --shadow: 0 10px 30px rgba(7,19,29,.25); --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; background: #8fd8ff; 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; touch-action: none; }
button { font: inherit; color: inherit; border: 0; cursor: pointer; background: none; padding: 0; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
i { display: inline-block; flex: none; font-style: normal; }
/* 아이콘 */
.coin-ic { width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6b8, #ffc62e 55%, #d98b00); box-shadow: inset 0 0 0 2.5px #e8a000, 0 1px 0 rgba(0,0,0,.2); vertical-align: middle; }
.coin-ic.big { width: 30px; height: 30px; }
.i-play { width: 0; height: 0; border-left: 22px solid currentColor; border-top: 14px solid transparent; border-bottom: 14px solid transparent; margin-left: 4px; }
.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-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%); }
/* 버튼 */
.big-btn { display: flex; align-items: center; justify-content: center; gap: 12px; min-width: 220px; height: 70px; padding: 0 34px; border-radius: 999px; font-size: 30px; 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); transition: transform .08s; animation: pulse 1.6s ease-in-out infinite; }
.big-btn:active { transform: translateY(5px); box-shadow: 0 2px 0 #c4520a; }
.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); }
@keyframes pulse { 50% { transform: scale(1.04); } }
/* 메뉴 */
/* HUD */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
#hud > * { position: absolute; }
.tl { left: 12px; top: calc(10px + var(--safe-t)); display: flex; gap: 8px; pointer-events: auto; }
.tl .ic-btn { width: 42px; height: 42px; }
.stroke, #dayBox, #walletBox, .goal-n { color: #fff; -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 0 3px 0 rgba(7,19,29,.3); font-weight: 700; }
#dayBox { left: 50%; top: calc(8px + var(--safe-t)); transform: translateX(-50%); font-size: 30px; display: flex; gap: 6px; align-items: center; white-space: nowrap; }
#dayBox span { font-size: 24px; -webkit-text-stroke: 0; }
#walletBox { right: 12px; top: calc(10px + var(--safe-t)); display: flex; gap: 6px; align-items: center; font-size: 30px; padding: 2px 12px 2px 8px; border-radius: 999px; background: rgba(7,19,29,.5); -webkit-text-stroke: 0; text-shadow: none; }
#walletBox b { color: var(--gold); font-variant-numeric: tabular-nums; }
#walletBox.shake { animation: shake .35s; }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
#goalRow { left: 50%; top: calc(58px + var(--safe-t)); transform: translateX(-50%); width: min(88vw, 400px); display: flex; align-items: center; gap: 10px; }
#goalBar { position: relative; flex: 1; height: 22px; border-radius: 11px; background: rgba(7,19,29,.55); box-shadow: 0 0 0 3px rgba(255,255,255,.7); }
#goalBar span { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 11px; background: linear-gradient(90deg, #ffb13b, #ff5c7a); transition: width .25s; }
#goalBar .st { position: absolute; top: -9px; font-size: 22px; transform: translateX(-50%); filter: grayscale(1) brightness(1.1) drop-shadow(0 2px 0 rgba(7,19,29,.4)); opacity: .75; }
#goalBar .s1 { left: 41.7%; } #goalBar .s2 { left: 66.7%; } #goalBar .s3 { left: 100%; transform: translateX(-70%); }
#goalBar.s1 .s1, #goalBar.s2 .s2, #goalBar.s3 .s3 { filter: drop-shadow(0 2px 0 rgba(7,19,29,.4)); opacity: 1; animation: pulse .5s 2; }
.goal-n { font-size: 20px; min-width: 56px; text-align: left; white-space: nowrap; }
.goal-n small { font-size: 14px; opacity: .9; }
#timeBar { left: 0; right: 0; top: 0; height: 5px; background: rgba(7,19,29,.25); }
#timeBar span { display: block; height: 100%; width: 0; background: #fff; }
#gauges { left: 50%; transform: translateX(-50%); top: calc(92px + var(--safe-t)); display: flex; gap: 10px; align-items: center; }
.g { display: flex; align-items: center; gap: 4px; padding: 2px 8px 2px 4px; border-radius: 999px; background: rgba(7,19,29,.5); }
.g i { font-size: 20px; }
.g div { width: 62px; height: 10px; border-radius: 5px; background: rgba(255,255,255,.25); overflow: hidden; }
.g div span { display: block; height: 100%; width: 70%; border-radius: 5px; background: #5ad17a; transition: width .3s; }
#gHappy div span { background: linear-gradient(90deg, #ff5c7a, #ffd23f); }
#lives { display: flex; gap: 2px; padding: 1px 8px; border-radius: 999px; background: rgba(7,19,29,.5); }
#lives i, .de-lives i { font-size: 20px; filter: grayscale(1); opacity: .35; }
#lives i.on, .de-lives i.on { filter: none; opacity: 1; }
/* 건설 바 */
#build { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 8px calc(8px + var(--safe-b)); pointer-events: none; }
#build > * { pointer-events: auto; }
#btnGo { height: 62px; font-size: 28px; min-width: 190px; }
#pal { display: flex; flex-direction: column; gap: 5px; padding: 7px; border-radius: 22px; background: rgba(255,255,255,.88); box-shadow: 0 6px 20px rgba(7,19,29,.2); }
.prow { display: flex; gap: 5px; justify-content: center; }
.card { position: relative; width: 54px; height: 66px; border-radius: 15px; background: #fff; box-shadow: 0 4px 0 rgba(7,19,29,.18), inset 0 0 0 2px rgba(7,19,29,.07); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; transition: transform .1s; }
.card:active { transform: translateY(3px); }
.card .ci { font-size: 29px; line-height: 1.1; }
.card b { font-size: 14px; display: flex; align-items: center; gap: 2px; }
.card b .coin-ic { width: 12px; height: 12px; box-shadow: inset 0 0 0 1.5px #e8a000; }
.card.poor { opacity: .5; }
.card.armed { background: #fff3c4; box-shadow: 0 0 0 4px var(--gold), 0 4px 0 rgba(7,19,29,.18); transform: translateY(-6px); }
.card.new::after { content: ''; position: absolute; right: -2px; top: -2px; width: 14px; height: 14px; border-radius: 50%; background: var(--pink); border: 2px solid #fff; }
.card.staff { background: #e6f2ff; }
.card.maxed { opacity: .6; }
.card em { position: absolute; right: 3px; top: 1px; font-style: normal; font-size: 10px; font-weight: 700; color: #3a6ab0; }
#sel { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 3px var(--gold), var(--shadow); animation: rise .25s cubic-bezier(.2,1.5,.4,1); }
@keyframes rise { from { transform: translateY(20px); opacity: 0; } }
.sel-ic { font-size: 34px; }
.sel-t { display: flex; flex-direction: column; min-width: 70px; }
.sel-t b { font-size: 16px; line-height: 1.1; }
#selLv i { color: #cfd6df; font-size: 16px; } #selLv i.on { color: var(--gold); }
.act { height: 54px; min-width: 62px; padding: 0 8px; border-radius: 16px; background: #eef2f6; box-shadow: 0 4px 0 rgba(7,19,29,.18); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 22px; line-height: 1; }
.act b { font-size: 14px; display: flex; gap: 3px; align-items: center; }
.act.up { background: #d9f7e0; } .act.up.poor { opacity: .5; }
.act.x { min-width: 44px; }
.act:active { transform: translateY(3px); }
#zones { position: fixed; inset: 0; pointer-events: none; z-index: 4; }
.zbtn { position: absolute; transform: translate(-50%, -50%); pointer-events: auto; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 76px; padding: 8px 14px; border-radius: 22px; font-size: 30px; line-height: 1; background: #fff; box-shadow: 0 0 0 3px var(--gold), 0 6px 0 rgba(7,19,29,.25); animation: pulse 1.4s infinite; }
.zbtn b { font-size: 17px; display: flex; gap: 4px; align-items: center; }
.zbtn.poor { opacity: .62; animation: none; }
/* 팝업 */
#pops { position: fixed; inset: 0; pointer-events: none; z-index: 8; }
.pop { position: absolute; transform: translate(-50%, 0); font-size: 26px; font-weight: 700; color: #fff; -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; white-space: nowrap; animation: popUp 1s ease-out forwards; text-shadow: 0 3px 0 rgba(7,19,29,.3); }
#banner { position: fixed; left: 50%; top: 34%; font-size: 68px; transform: translate(-50%, -50%) scale(.3); opacity: 0; pointer-events: none; z-index: 20; filter: drop-shadow(0 8px 12px rgba(7,19,29,.35)); }
#banner.show { animation: ban 1.5s ease-out; }
@keyframes ban { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); } 25% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); } 70% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -80%) scale(1); } }
#toast { position: fixed; left: 50%; top: calc(132px + var(--safe-t)); transform: translate(-50%, -10px); opacity: 0; padding: 8px 18px; border-radius: 16px; background: #fff; font-weight: 700; font-size: 22px; z-index: 40; pointer-events: none; box-shadow: 0 6px 20px rgba(7,19,29,.25); }
#toast.show { animation: tst 1.4s ease-out; }
@keyframes tst { 0% { opacity: 0; transform: translate(-50%, -10px); } 15%, 80% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }
#nogl { display: none; }
body.nogl #nogl { display: grid; position: fixed; inset: 0; place-items: center; font-size: 24px; }
/* 결과 */
@keyframes starPop { 0% { transform: scale(.3) rotate(-30deg); } 60% { transform: scale(1.4) rotate(10deg); } }
/* 모바일 작은 화면 */
@media (max-height: 700px) { .card { height: 58px; } .card .ci { font-size: 25px; } #btnGo { height: 54px; } .de-stars i { font-size: 46px; } }
@media (min-width: 700px) and (min-height: 600px) { #hud, #build { zoom: 1; } }

.pop.sfx { font-size: 34px; color: #ffe14d; -webkit-text-stroke: 3px #c4170f; transform: rotate(-8deg); font-family: 'Jua','Fredoka',sans-serif; letter-spacing: 1px; animation: sfxPop 1.1s ease-out forwards; }
@keyframes sfxPop { 0% { transform: translate(-50%, 0) scale(.3) rotate(-14deg); opacity: 0; } 15% { transform: translate(-50%, -14px) scale(1.5) rotate(-6deg); opacity: 1; } 35% { transform: translate(-50%, -18px) scale(1.15) rotate(-8deg); } 100% { transform: translate(-50%, -70px) scale(1) rotate(-8deg); opacity: 0; } }
body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 3; background: radial-gradient(ellipse at 50% 45%, rgba(0,0,0,0) 55%, rgba(20,40,80,.28) 100%); }

.ptabs { display: flex; gap: 6px; justify-content: center; margin-bottom: 2px; }
.ptab { position: relative; width: 74px; height: 34px; border-radius: 17px; background: #e8edf3; font-size: 22px; line-height: 1; box-shadow: 0 3px 0 rgba(7,19,29,.14); }
.ptab.on { background: #ffe9a6; box-shadow: 0 0 0 3px var(--gold), 0 3px 0 rgba(7,19,29,.14); }
.ptab i { position: absolute; right: 8px; top: 3px; width: 11px; height: 11px; border-radius: 50%; background: var(--pink); border: 2px solid #fff; }

#lvBox { left: 50%; transform: translateX(-50%); top: calc(126px + var(--safe-t)); display: flex; align-items: center; gap: 8px; padding: 2px 12px 2px 10px; border-radius: 999px; background: rgba(7,19,29,.5); color: #fff; font-weight: 700; font-size: 15px; white-space: nowrap; }
#lvBox .lvn b { color: var(--gold); font-size: 18px; }
#lvBox .lvbar { width: 70px; height: 9px; border-radius: 5px; background: rgba(255,255,255,.25); overflow: hidden; }
#lvBox .lvbar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #7be0a8, #ffd23f); border-radius: 5px; transition: width .3s; }
#lvBox em { font-style: normal; font-size: 13px; opacity: .9; }

.ppage { display: flex; gap: 8px; justify-content: center; padding: 2px 0; }
.pg { width: 12px; height: 12px; border-radius: 50%; background: #cfd6df; } .pg.on { background: var(--gold); box-shadow: 0 0 0 2px #fff; }
.ptab { width: 58px; }

.resbtn { position: absolute; right: 14px; top: -58px; width: 54px; height: 54px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px var(--gold), 0 5px 0 rgba(7,19,29,.2); font-size: 26px; display: grid; place-items: center; pointer-events: auto; }
.resbtn b { position: absolute; right: -4px; bottom: -4px; min-width: 22px; height: 22px; border-radius: 11px; background: var(--pink); color: #fff; font-size: 13px; display: grid; place-items: center; padding: 0 5px; }
.rsheet { position: fixed; inset: 0; z-index: 30; background: rgba(7,19,29,.55); display: grid; place-items: center; backdrop-filter: blur(3px); }
.rs-in { position: relative; width: min(100% - 16px, 420px); max-height: 92vh; overflow-y: auto; background: var(--panel); border-radius: 26px; padding: 16px 10px 14px; box-shadow: var(--shadow); }
.rs-x { position: absolute; right: 10px; top: 10px; width: 40px; height: 40px; border-radius: 50%; background: #eef2f6; display: grid; place-items: center; }
.rs-h { text-align: center; font-size: 28px; font-weight: 700; margin-bottom: 10px; } .rs-h b { color: #c07a00; }
.rrow { display: flex; align-items: center; gap: 2px; margin: 8px 0; }
.rbr { font-size: 26px; width: 36px; text-align: center; }
.rrow u { text-decoration: none; color: #9aa7b5; font-size: 22px; }
.rn { position: relative; flex: 1; min-width: 0; height: 84px; border-radius: 16px; background: #eef2f6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 2px; box-shadow: 0 4px 0 rgba(7,19,29,.14); }
.rn span { font-size: 24px; line-height: 1.1; } .rn small { font-size: 11px; font-weight: 700; line-height: 1.1; text-align: center; } .rn em { font-style: normal; font-size: 12px; line-height: 1.1; } .rn b { font-size: 12px; color: #6b5200; }
.rn.own { background: #d9f7e0; } .rn.own b { color: #1d8a47; font-size: 16px; }
.rn.av { background: #fff3c4; box-shadow: 0 0 0 3px var(--gold), 0 4px 0 rgba(7,19,29,.14); opacity: .8; } .rn.av.ok { opacity: 1; animation: pulse 1.3s infinite; }
.rn.lock { opacity: .45; }
#qBox { font-size: 14px; }

/* 로고 오른쪽 위 관람차 아이콘은 가린다(원본 파일은 공통 브랜드 그대로) */
.kk-logo-img { width: min(64vw, 300px); max-height: none; height: auto; clip-path: polygon(0 0, 72% 0, 72% 21.5%, 100% 21.5%, 100% 100%, 0 100%); }

#dexGrid h4 { margin: 10px 4px 4px; font-size: 18px; }
.dg { display: flex; flex-wrap: wrap; gap: 6px; }
.dc { width: 52px; height: 52px; border-radius: 14px; background: #e8edf3; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 26px; filter: grayscale(1); opacity: .6; }
.dc.on { background: #fff3c4; filter: none; opacity: 1; box-shadow: 0 0 0 2px var(--gold); }
.ag .dc { width: 76px; } .dc small { font-size: 10px; font-weight: 700; line-height: 1; margin-top: 1px; text-align: center; }
#toast { white-space: nowrap; max-width: 94vw; overflow: hidden; text-overflow: ellipsis; }
.presbtn { margin-left: 12px; height: 40px; padding: 0 14px; border-radius: 20px; background: linear-gradient(180deg,#ffd23f,#ffa200); font-size: 18px; font-weight: 700; box-shadow: 0 4px 0 #b86f00; vertical-align: middle; }

/* 편집 UI 크게 + 연구 글자 크게 (QA 지적) */
#pal { padding: 9px; gap: 7px; border-radius: 26px; }
.prow { gap: 7px; }
.card { width: 62px; height: 78px; border-radius: 18px; }
.card .ci { font-size: 34px; } .card b { font-size: 16px; } .card b .coin-ic { width: 14px; height: 14px; }
.ptab { width: 76px; height: 42px; border-radius: 21px; font-size: 26px; }
.pg { width: 14px; height: 14px; }
#sel { gap: 10px; padding: 8px 10px; } .sel-ic { font-size: 40px; } .sel-t b { font-size: 19px; }
.act { height: 62px; min-width: 70px; font-size: 26px; } .act b { font-size: 17px; }
#btnGo { height: 68px; font-size: 30px; min-width: 210px; }
.resbtn { width: 62px; height: 62px; font-size: 30px; top: -68px; }
.rs-in { width: min(100% - 12px, 440px); padding: 18px 10px 16px; }
.rrow { margin: 10px 0; } .rbr { font-size: 30px; width: 40px; }
.rn { height: 104px; border-radius: 18px; gap: 1px; } .rn span { font-size: 30px; } .rn small { font-size: 15px; font-weight: 700; } .rn em { font-size: 15px; } .rn b { font-size: 15px; } .rn.own b { font-size: 20px; }
.rs-h { font-size: 34px; }
@media (max-height: 700px) { .card { height: 70px; } }

.card.locked { opacity: .55; filter: grayscale(.9); background: #eef2f6; } .card.locked b { font-size: 15px; color: #6b7886; }
/* HUD 정리: 게이지·하트를 알약 하나로 합침 */
#gauges { background: rgba(7,19,29,.5); border-radius: 999px; padding: 3px 10px; gap: 8px; }
#gauges .g, #gauges #lives { background: none; padding: 0; }
#gauges .g div { width: 54px; }
#lvBox { padding: 1px 12px 1px 10px; }

/* ===== QA2: 글자·아이콘 키우기, HUD 정리 (PC 에서는 화면 크기에 맞춰 더 키움) ===== */
#hud, #build, .rs-in { zoom: var(--ui, 1); }
.card { width: 66px; height: 84px; } .card .ci { font-size: 38px; } .card b { font-size: 17px; }
.ptab { width: 80px; height: 44px; font-size: 28px; }
.rn small { font-size: 16px; } .rn em { font-size: 16px; } .rn b { font-size: 16px; } .rn span { font-size: 32px; }
.rs-h { font-size: 38px; } #dexGrid h4 { font-size: 22px; } .dc { width: 60px; height: 60px; font-size: 30px; } .ag .dc { width: 88px; } .dc small { font-size: 13px; }
#btnGo { font-size: 32px; }
#lvChip { position: relative; flex: none; min-width: 58px; height: 38px; padding: 0 10px; border-radius: 19px; background: rgba(7,19,29,.6); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 3px; overflow: hidden; }
#lvChip::after { content: ''; position: absolute; left: 0; bottom: 0; height: 5px; width: var(--p, 0%); background: linear-gradient(90deg, #7be0a8, #ffd23f); }
#lvChip span { font-size: 13px; opacity: .9; } #lvChip b { font-size: 22px; color: var(--gold); } #lvChip em { font-style: normal; font-size: 13px; }
#goalRow { gap: 8px; } #goalBar { height: 24px; }
#gauges { top: calc(98px + var(--safe-t)); gap: 10px; padding: 4px 12px; }
#gauges .g i { font-size: 22px; } #gauges .g div { width: 56px; height: 11px; }
#qBox { font-size: 17px; font-weight: 700; color: #fff; min-width: 54px; }
#lvBox { display: none; }

.rs-in { max-height: calc(92vh / var(--ui, 1)); }
#goalRow { width: min(calc(94vw / var(--ui, 1)), 400px); }