:root { color-scheme: dark; font-family: 'Noto Sans KR', system-ui, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; overflow: hidden; background: #07071a; }
button { font: inherit; }
#game-shell { position: fixed; inset: 0; width: 100vw; height: 100dvh; overflow: hidden; background: radial-gradient(circle at 50% 38%, #2b2358 0%, #12102e 55%, #07071a 100%); touch-action: none; }
#game { width: 100%; height: 100%; display: block; }
.hidden { display: none !important; }

#hud { position: absolute; inset: 0; pointer-events: none; padding: max(14px, env(safe-area-inset-top)) 16px 18px; }
.hud-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.level-badge, .timer, .kills { text-shadow: 0 2px 2px #17312677; font-weight: 900; }
.level-badge { color: #fff0a5; }
.timer { font-size: 1.25rem; letter-spacing: .06em; }
.icon-btn { justify-self: end; width: 38px; height: 38px; border: 2px solid #ffffff55; border-radius: 12px; color: white; background: #173c3aaa; pointer-events: auto; cursor: pointer; }
.hud-actions { justify-self: end; display: flex; gap: 6px; pointer-events: auto; }
.hud-actions .icon-btn { font-size: .85rem; }
.xp-track { height: 8px; margin-top: 10px; border-radius: 20px; background: #173c3aaa; overflow: hidden; border: 1px solid #ffffff44; }
#xp-bar { width: 0; height: 100%; background: linear-gradient(90deg,#ffe15e,#ff9f43); transition: width .15s; }
.boss-hud { width: min(88%,420px); margin: 11px auto 0; padding: 6px 10px 9px; border: 2px solid #b790ff; border-radius: 12px; background: #27153de8; text-align: center; box-shadow: 0 0 18px #8c51ff88; }
.boss-hud span { color: #f2d9ff; font-size: .72rem; font-weight: 900; }
.boss-hud div { height: 8px; margin-top: 4px; border-radius: 8px; overflow: hidden; background: #130b1d; }
.boss-hud i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg,#8f43e7,#eb4e9a); transition: width .12s; }
.hud-bottom { position: absolute; left: 16px; right: 16px; bottom: 18px; display: flex; align-items: end; justify-content: space-between; }
.weapon-bar { position: absolute; left: 50%; bottom: 52px; transform: translateX(-50%); display: flex; gap: 5px; }
.weapon-slot { min-width: 37px; height: 37px; padding: 2px 5px; display: grid; place-items: center; border: 2px solid #f4d16c; border-radius: 10px; background: #142b29dd; box-shadow: 0 3px 8px #0a171699; font-size: 1.15rem; }
.weapon-slot small { margin-top: -7px; color: #ffe477; font-size: .55rem; font-weight: 900; }
.hp-track { position: relative; width: min(230px, 58%); height: 19px; background: #183735cc; border: 2px solid #fff8; border-radius: 20px; overflow: hidden; }
#hp-bar { height: 100%; width: 100%; background: linear-gradient(90deg,#ea4351,#ff7a67); transition: width .18s; }
#hp-text { position: absolute; inset: -1px 0 0; text-align: center; font-size: .69rem; font-weight: 900; }

.overlay { position: absolute; inset: 0; z-index: 5; display: none; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px 24px; background: linear-gradient(160deg,#5b4bd6ee,#9a4fd0ee,#e85bb0ee); backdrop-filter: blur(5px); }
.overlay.visible { display: flex; }
#start-screen { justify-content: safe center; overflow-y: auto; gap: 14px; padding: max(28px,4vh) 24px max(28px, env(safe-area-inset-bottom)); background: radial-gradient(ellipse 92% 44% at 50% 14%, rgba(201,166,255,.5), transparent 62%), radial-gradient(circle at 80% 82%, rgba(255,126,201,.34), transparent 52%), radial-gradient(circle at 16% 74%, rgba(92,166,255,.32), transparent 50%), linear-gradient(180deg,#2a205e 0%,#191240 55%,#241150 100%); }
#start-screen > * { flex-shrink: 0; }
#start-screen::before { content:''; position:absolute; inset:0; pointer-events:none; opacity:.8; background-repeat:no-repeat; background-image: radial-gradient(1.6px 1.6px at 18% 24%, #fff, transparent), radial-gradient(1.4px 1.4px at 72% 18%, #ffffffcc, transparent), radial-gradient(2px 2px at 42% 58%, #fff, transparent), radial-gradient(1.2px 1.2px at 86% 46%, #ffffffcc, transparent), radial-gradient(1.6px 1.6px at 62% 82%, #fff, transparent), radial-gradient(1.2px 1.2px at 28% 78%, #ffffffaa, transparent), radial-gradient(1.4px 1.4px at 8% 52%, #ffffffbb, transparent), radial-gradient(1.3px 1.3px at 92% 70%, #ffffffbb, transparent); }
#start-screen > * { position: relative; z-index: 1; }
.logo-wrap { position: relative; }
.logo-wrap::before { content:''; position:absolute; left:50%; top:34px; transform:translateX(-50%); width:min(260px,60vw); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, rgba(255,213,120,.4), rgba(255,150,220,.18) 50%, transparent 70%); filter:blur(4px); z-index:-1; }
.stage-list { width: min(100%,360px); display: flex; gap: 8px; overflow-x: auto; padding: 3px 2px 8px; }
.stage-btn { flex: 0 0 86px; padding: 10px 8px; border: 2px solid #ffffff33; border-radius: 13px; color: #d7d0ff; background: rgba(30,22,70,.65); font-weight: 900; cursor: pointer; }
.stage-btn.selected { color: #24192f; border-color: #f3cd68; background: #f3cd68; }
.stage-btn.locked { opacity: .38; cursor: not-allowed; }
.record-card { width: min(100%,360px); display: flex; justify-content: space-between; padding: 10px 14px; border-radius: 12px; color: #cfc8ff; background: rgba(255,255,255,.15); font-size: .72rem; }
.record-card strong { color: #ffe27b; }
.danger-alert { position: absolute; z-index: 8; left: 50%; top: 36%; width: 82%; padding: 20px; border-block: 3px solid #ff476c; color: white; background: linear-gradient(90deg,transparent,#7d122ddd,transparent); text-align: center; opacity: 0; pointer-events: none; transform: translate(-50%,-50%) scale(1.4); }
.danger-alert.visible { animation: danger-in 2.2s ease both; }
.danger-alert small { display: block; color: #ff9bad; font-size: .65rem; font-weight: 900; letter-spacing: .25em; }
.danger-alert strong { display: block; font-size: 3rem; line-height: 1; text-shadow: 0 0 18px #ff174f; }
@keyframes danger-in { 0%{opacity:0;transform:translate(-50%,-50%) scale(1.6)} 15%,72%{opacity:1;transform:translate(-50%,-50%) scale(1)} 100%{opacity:0;transform:translate(-50%,-50%) scale(.8)} }
.logo-goose { position: relative; display: grid; place-items: center; width: 112px; height: 112px; margin: auto; border-radius: 31px; background: radial-gradient(circle,#ffe797,#b97624); transform: rotate(-3deg); box-shadow: 0 8px 0 #7d4716, 0 15px 28px #07181799; overflow: hidden; }
.logo-goose img { width: 118%; height: 118%; object-fit: contain; transform: translateY(4px) rotate(3deg); filter: drop-shadow(0 5px 4px #3a1e0c88); }
.logo-heroine { width: 128%; height: 128%; background: url('assets/images/heroine-directions.png') 100% 0 / 200% 200% no-repeat; filter: drop-shadow(0 5px 4px #3a1e0c88); transform: translateY(5px) rotate(3deg); }
.duo-logo { width: 132px; overflow: visible; }
.duo-logo span { position: absolute; width: 88px; height: 108px; background-size: 200% 200%; background-position: 100% 0; background-repeat: no-repeat; filter: drop-shadow(0 5px 4px #3a1e0c88); }
.logo-mage { left: -15px; bottom: 0; background-image: url('assets/images/duo-mage.png'); }
.logo-blade { right: -15px; bottom: 0; background-image: url('assets/images/duo-blade.png'); }
.logo-star-hero { width: 132%; height: 132%; background: url('assets/images/star-hero.png') 100% 0 / 200% 200% no-repeat; filter: drop-shadow(0 5px 4px #3a1e0c88); transform: translateY(4px); }
.logo-goose.small { width: 76px; height: 76px; font-size: 2.7rem; margin: 0 0 24px; }
.hero-logo { display: block; width: min(190px, 44vw); height: auto; margin: 0 auto; filter: drop-shadow(0 10px 16px rgba(20,10,50,.45)); animation: floaty 3s ease-in-out infinite; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.eyebrow { margin: 24px 0 8px; font-family: 'Jua', sans-serif; color: #ffe14d; font-size: .82rem; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; text-shadow: 0 2px 0 #00000040; }
h1 { margin: 0; font-family: 'Do Hyeon', sans-serif; color: #ffd54a; -webkit-text-stroke: 7px #241046; paint-order: stroke fill; font-size: clamp(3.6rem, 14vw, 6rem); line-height: 1.14; letter-spacing: .02em; text-shadow: 0 5px 12px rgba(8,4,24,.55); }
h1 em { color: #ffd84d; font-style: normal; }
.tagline { margin: 22px 0 0; color: #ffffff; font-weight: 700; text-shadow: 0 2px 4px rgba(20,10,50,.4); }
.mission-card { width: min(100%, 360px); padding: 16px 20px; border: 1px solid #ffffff22; border-radius: 18px; background: rgba(255,255,255,.15); display: flex; justify-content: space-between; gap: 12px; font-size: .82rem; }
.mission-card span { color: #cfc8ff; }
.primary-btn { width: min(100%, 380px); padding: 19px 24px; border: 3px solid #fff6; border-radius: 20px; color: #3a2400; background: linear-gradient(#ffe879,#f5a623); box-shadow: 0 7px 0 #b8731f, 0 0 22px #ffd24d77, 0 14px 30px #00000055; font-family: 'Black Han Sans','Jua',sans-serif; font-weight: 400; font-size: 1.35rem; letter-spacing: .02em; cursor: pointer; transition: transform .12s, box-shadow .12s; animation: btnglow 1.7s ease-in-out infinite; }
.primary-btn:active { transform: translateY(5px); box-shadow: 0 2px 0 #b8731f, 0 0 14px #ffd24d77; }
@keyframes btnglow { 0%,100%{box-shadow:0 7px 0 #b8731f,0 0 16px #ffd24d55,0 14px 30px #00000055} 50%{box-shadow:0 7px 0 #b8731f,0 0 34px #ffd24daa,0 14px 30px #00000055} }
.credits { margin: 6px 0 0; font-size: .58rem; color: #ffffff66; line-height: 1.4; max-width: 360px; }
.controls-hint { margin: -12px 0 0; color: #cfc8ffcc; font-size: .72rem; }

h2 { margin: 4px 0 26px; font-size: 1.8rem; }
.upgrade-list { width: auto; max-width: 98vw; display: flex; justify-content: center; gap: 12px; }
.upgrade-card { position: relative; width: min(31vw, 168px); min-height: 234px; display: flex; flex-direction: column; align-items: center; padding: 0 0 12px; border: 3px solid #14102e; border-radius: 18px; color: #fff; background: linear-gradient(#352a64, #211a44); cursor: pointer; box-shadow: 0 7px 0 #120c28, 0 12px 24px #00000066; overflow: hidden; transition: transform .1s, box-shadow .1s; }
.upgrade-card:active { transform: translateY(5px); box-shadow: 0 2px 0 #120c28, 0 8px 16px #00000066; }
.upgrade-card .card-head { width: 100%; padding: 9px 6px; font-family: 'Jua', sans-serif; font-size: 1.04rem; color: #4a2e00; background: linear-gradient(#ffe273, #f3b01f); border-bottom: 3px solid #14102e; box-shadow: inset 0 -2px 0 #d9961088; }
.upgrade-card .card-ic { width: 80px; height: 80px; margin: 14px 0 6px; display: flex; align-items: center; justify-content: center; font-size: 3.1rem; border-radius: 50%; background: radial-gradient(circle at 50% 36%, rgba(255,255,255,.18), rgba(0,0,0,.3)); box-shadow: inset 0 -3px 6px rgba(0,0,0,.4); filter: drop-shadow(0 3px 4px #00000066); }
.upgrade-card .card-desc { flex: 1; font-size: .77rem; line-height: 1.45; color: #efeaff; padding: 4px 10px; display: flex; align-items: center; }
.upgrade-card .card-stars { font-size: 1.02rem; letter-spacing: 1px; color: #463c6c; margin-top: 2px; }
.upgrade-card .card-stars .on { color: #ffd24d; text-shadow: 0 0 7px #ffd24daa; }
.upgrade-card.is-new::after { content: 'NEW'; position: absolute; top: 10px; right: -26px; transform: rotate(40deg); background: linear-gradient(#54e87f,#28c25a); color: #06381a; font-size: .58rem; font-weight: 900; letter-spacing: .5px; padding: 3px 26px; box-shadow: 0 1px 3px #0007; }
.upgrade-card.card-weapon { background: linear-gradient(#5c3b2c, #3a2419); }
.upgrade-card.card-active { background: linear-gradient(#2e4a6e, #1c2e4a); }
@media (max-height: 560px) { .upgrade-card { min-height: 168px; width: min(30vw, 140px); } .upgrade-card .card-ic { font-size: 2.3rem; } .upgrade-card .card-desc { font-size: .66rem; } }
.compact .panel { width: 100%; padding: 28px 22px; border-radius: 24px; background: #43308a; }
.compact .eyebrow { margin-top: 0; }
.text-btn { margin-top: 20px; border: 0; color: #a9c5b9; background: transparent; cursor: pointer; }
.result-stats { width: min(100%, 440px); margin-bottom: 32px; display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.result-stats div { padding: 15px 6px; border-radius: 15px; background: #0e292780; }
.result-stats span { display: block; color: #90b4a5; font-size: .68rem; }
.result-stats strong { display: block; margin-top: 5px; color: #ffe070; font-size: 1.25rem; }
#joystick { display: none; position: absolute; z-index: 3; width: 104px; height: 104px; border-radius: 50%; border: 2px solid #fff4; background: #173d3a55; pointer-events: none; transform: translate(-50%,-50%); }
#joystick-knob { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; border-radius: 50%; background: #fff9; transform: translate(-50%,-50%); }
#skill-bar { position: absolute; right: max(14px, env(safe-area-inset-right)); bottom: max(22px, env(safe-area-inset-bottom)); display: flex; align-items: flex-end; gap: 10px; z-index: 6; pointer-events: none; }
.skill-btn { position: relative; width: 58px; height: 58px; border-radius: 50%; border: 3px solid #ffffffcc; background: radial-gradient(circle at 50% 34%, #4a3a96, #251a52); color: #fff; font-size: 25px; cursor: pointer; pointer-events: auto; box-shadow: 0 4px 12px #00000066; display: grid; place-items: center; }
.skill-btn .ic { line-height: 1; }
.skill-btn .k { position: absolute; top: -7px; left: -5px; width: 20px; height: 20px; line-height: 17px; font-size: 11px; font-weight: 900; color: #251a52; background: #ffe14d; border: 2px solid #fff; border-radius: 7px; text-align: center; }
.skill-btn .cd { position: absolute; inset: 0; border-radius: 50%; background: rgba(8,6,22,.72); color: #fff; font-size: 17px; font-weight: 900; display: none; align-items: center; justify-content: center; }
.skill-btn.cooling .cd { display: flex; }
.skill-btn:active { transform: translateY(2px); }
.skill-btn.ult { width: 70px; height: 70px; font-size: 31px; border-color: #ffe14d; background: radial-gradient(circle at 50% 34%, #7a45c0, #3a1a78); }
.skill-btn.ult .cd { font-size: 14px; background: rgba(8,6,22,.55); }
.skill-btn.ult.ready { box-shadow: 0 0 0 4px #ffe14d, 0 0 20px #ffe14d; animation: ultpulse .85s ease-in-out infinite; }
@keyframes ultpulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.1)} }

@media (max-height: 700px) { #start-screen { padding-top: 32px; } .logo-goose { width: 76px; height: 76px; font-size: 2.8rem; } h1 { font-size: 4.2rem; } .mission-card { padding: 12px 16px; } }

/* ---------- P1: character select ---------- */
.gold-bar { display: inline-flex; align-items: center; gap: 4px; padding: 5px 14px; border-radius: 999px; background: rgba(0,0,0,.4); border: 2px solid #ffd24d88; color: #ffe27b; font-weight: 900; font-size: .9rem; }
#start-screen .gold-bar { position: absolute; top: max(14px, env(safe-area-inset-top)); right: 16px; z-index: 3; }
.char-open-btn { margin-top: 2px; padding: 10px 20px; border: 2px solid #ffffff44; border-radius: 14px; background: rgba(255,255,255,.12); color: #fff; font-family: inherit; font-weight: 800; font-size: .9rem; cursor: pointer; }
.char-open-btn b { color: #ffe27b; }
.char-open-btn:active { transform: translateY(2px); }
#char-screen { justify-content: flex-start; padding: max(20px,5vh) 16px 20px; gap: 14px; background: radial-gradient(ellipse at 50% 0%, #3a2c6e, #160f33 70%); }
.char-top { width: min(100%,560px); display: flex; align-items: center; justify-content: space-between; color: #fff; }
.char-grid { width: min(100%, 560px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; overflow-y: auto; flex: 1 1 auto; min-height: 0; padding: 4px; align-content: start; }
.char-card { position: relative; display: flex; flex-direction: column; align-items: center; padding: 8px 6px 10px; border: 3px solid #1a1138; border-radius: 14px; background: linear-gradient(#3a2c6e,#241a4a); cursor: pointer; box-shadow: 0 4px 0 #160d30; transition: transform .1s; }
.char-card:active { transform: translateY(3px); }
.char-card img { width: 74px; height: 74px; object-fit: contain; pointer-events: none; filter: drop-shadow(0 3px 3px #0007); }
.char-card .cn { font-size: .74rem; font-weight: 900; color: #fff; margin-top: 2px; text-align: center; }
.char-card .cs { font-size: .68rem; color: #ffd24d; letter-spacing: -1px; }
.char-card.sel { border-color: #ffd24d; box-shadow: 0 0 0 3px #ffd24d, 0 4px 0 #160d30; }
.char-card .clk { position: absolute; inset: 0; border-radius: 11px; background: rgba(8,6,22,.76); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.char-card .clk .lk { font-size: 1.3rem; }
.char-card .clk .cost { color: #ffe27b; font-weight: 900; font-size: .76rem; }

.weapon-slot.evo { border-color:#ff6ae0; box-shadow:0 0 10px #ff6ae0, 0 3px 8px #0a171699; }
.weapon-slot.evo small { color:#ff9ef0; }

/* ---------- 탕탕식 로비 ---------- */
.lobby-top { width: min(100%,560px); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mini-logo { font-family: 'Do Hyeon',sans-serif; font-size: clamp(1.5rem,6vw,2.1rem); color: #ffd54a; -webkit-text-stroke: 3px #241046; paint-order: stroke fill; margin: 0; line-height: 1; }
.mini-logo .lp { color: #ff8fb1; }
.currency { display: flex; gap: 7px; }
.currency .cur { display: inline-flex; align-items: center; gap: 4px; padding: 5px 11px; border-radius: 999px; background: rgba(0,0,0,.42); border: 2px solid #ffd24d77; color: #ffe27b; font-weight: 900; font-size: .8rem; }
.char-showcase { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 30px 10px; border: 3px solid #ffd24d; border-radius: 24px; background: radial-gradient(ellipse at 50% 28%, rgba(255,210,120,.25), rgba(40,28,90,.55)); box-shadow: 0 6px 18px #00000066, inset 0 0 30px rgba(255,210,120,.14); cursor: pointer; font-family: inherit; }
.char-showcase:active { transform: translateY(2px); }
.char-showcase img { width: min(150px,40vw); height: auto; filter: drop-shadow(0 8px 10px #0009); animation: floaty 3s ease-in-out infinite; pointer-events: none; }
.char-showcase .sc-name { font-size: 1.06rem; font-weight: 900; color: #fff; }
.char-showcase .sc-star { color: #ffd24d; letter-spacing: -1px; }
.char-showcase .sc-tap { font-size: .68rem; color: #ffe27b; }
.bottom-nav { position: absolute; left: 0; right: 0; bottom: 0; display: flex; background: #160f33; border-top: 3px solid #2a1a5e; z-index: 4; padding-bottom: env(safe-area-inset-bottom); }
.nav-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 9px 4px; background: none; border: 0; color: #9c93c8; font-weight: 800; font-size: .68rem; cursor: pointer; }
.nav-tab .ni { font-size: 1.4rem; filter: grayscale(.4) brightness(.85); }
.nav-tab.active { color: #ffd24d; }
.nav-tab.active .ni { filter: none; }
#start-screen { padding-bottom: 80px; }

/* ---------- 로비 짜임새 보정 ---------- */
#start-screen .bottom-nav { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; }
#start-screen { gap: 11px; padding-top: max(20px,3vh); padding-bottom: 82px; }
.char-showcase { padding: 10px 28px 8px; border-radius: 22px; }
.char-showcase img { width: min(120px, 30vw); }
.char-showcase .sc-name { font-size: 1rem; }
.mission-card { padding: 11px 18px; font-size: .8rem; }
.record-card { padding: 9px 16px; }
.nav-tab { padding: 10px 4px 12px; }
.nav-tab .ni { font-size: 1.5rem; }
.controls-hint { margin: 2px 0 0; font-size: .66rem; }

/* ---------- 로비 상단 정렬 ---------- */
.lobby-top { justify-content: center; padding-top: 2px; }
#start-screen .currency { position: absolute; top: max(14px, env(safe-area-inset-top)); right: 14px; z-index: 4; }
.mini-logo { text-align: center; }

/* ---------- 로비 상단: 로고+재화 세로 중앙 정렬 ---------- */
.lobby-top { flex-direction: column; align-items: center; gap: 9px; }
#start-screen .currency { position: static; justify-content: center; }

/* ---------- #3/#4 진화 트리 · 상점 ---------- */
#evo-screen, #shop-screen{justify-content:flex-start;padding:max(22px,4vh) 0 26px;gap:12px;overflow-y:auto}
.scr-sub{color:#b9a7e8;font-size:.8rem;margin:0;text-align:center}
.evo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:min(94%,440px);padding:2px}
.evo-node{background:linear-gradient(160deg,#2a2150,#1b1438);border:2px solid #4a3a86;border-radius:16px;padding:12px 10px;color:#fff;text-align:center;cursor:pointer;display:flex;flex-direction:column;gap:3px;align-items:center;transition:transform .08s,border-color .15s}
.evo-node:active{transform:scale(.96)}
.evo-node .en-ic{font-size:1.85rem;line-height:1}
.evo-node .en-name{font-weight:800;font-size:.92rem}
.evo-node .en-bonus{font-size:.72rem;color:#ffd54a}
.evo-node .en-lv{font-size:.7rem;color:#b9a7e8}
.evo-node .en-cost{margin-top:3px;font-weight:800;font-size:.82rem;background:#0d0a1e;border-radius:10px;padding:4px 12px}
.evo-node.cant{opacity:.5}
.evo-node.cant .en-cost{color:#ff7b7b}
.evo-node.maxed{border-color:#ffd54a;box-shadow:0 0 10px #ffd54a66}
.evo-node.maxed .en-cost{color:#ffd54a;background:transparent}

/* ---------- P3 럭키 드로우 ---------- */
.lucky-panel{max-width:400px;width:min(92%,400px)}
.lucky-cells{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0}
.lucky-cell{background:#1b1438;border:2px solid #4a3a86;border-radius:13px;padding:11px 5px;text-align:center;transition:transform .05s,box-shadow .05s,border-color .05s}
.lucky-cell .lc-ic{font-size:1.6rem;line-height:1}
.lucky-cell .lc-lb{font-size:.6rem;color:#b9a7e8;margin-top:3px;font-weight:700}
.lucky-cell.on{border-color:#ffd54a;background:#3a2e10;box-shadow:0 0 16px #ffd54a;transform:scale(1.1)}
.lucky-cell.on .lc-lb{color:#ffe9a3}
.lucky-result{min-height:26px;font-weight:900;color:#ffd54a;font-size:1.1rem;margin:2px 0 8px;text-shadow:0 2px 6px rgba(0,0,0,.5)}

/* ---------- 미션/업적 ---------- */
#ach-screen{justify-content:flex-start;padding:max(22px,4vh) 0 26px;gap:12px;overflow-y:auto}
.ach-list{display:flex;flex-direction:column;gap:9px;width:min(94%,460px)}
.ach-row{display:flex;align-items:center;gap:11px;background:linear-gradient(160deg,#2a2150,#1b1438);border:2px solid #4a3a86;border-radius:14px;padding:10px 12px}
.ach-row.done{border-color:#ffd54a;box-shadow:0 0 8px #ffd54a44}
.ach-row .ar-ic{font-size:1.7rem;flex-shrink:0}
.ach-row .ar-mid{flex:1;min-width:0}
.ach-row .ar-name{font-weight:800;font-size:.9rem;color:#fff}
.ach-row .ar-desc{font-size:.7rem;color:#b9a7e8;margin:1px 0 5px}
.ach-bar{height:7px;border-radius:4px;background:#0d0a1e;overflow:hidden}
.ach-bar>i{display:block;height:100%;background:linear-gradient(90deg,#7c5cff,#c264d6);border-radius:4px}
.ach-reward{font-size:.66rem;color:#ffd54a;margin-top:4px}
.ach-claim{flex-shrink:0;border:none;border-radius:10px;padding:9px 11px;font-weight:800;font-size:.74rem;cursor:pointer;color:#1a1230;background:#ffd54a}
.ach-claim.locked{background:#2a2150;color:#6b5e9a;cursor:default}
.ach-claim.claimed{background:transparent;color:#7bd88a;border:1px solid #3a6e44}
.nav-tab .ni{font-size:1.4rem}

/* ---------- 장비 ---------- */
#gear-screen{justify-content:flex-start;padding:max(22px,4vh) 0 26px;gap:11px;overflow-y:auto}
.gear-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:min(94%,440px)}
.gear-slot{background:#1b1438;border:2px solid #4a3a86;border-radius:13px;padding:9px 5px;text-align:center}
.gear-slot .gs-ic{font-size:1.5rem;line-height:1.1}
.gear-slot .gs-name{font-size:.62rem;color:#b9a7e8}
.gear-slot .gs-rar{font-size:.7rem;font-weight:800;margin-top:2px}
.gear-slot .gs-bonus{font-size:.6rem;color:#ffd54a}
.gear-actions{display:flex;flex-direction:column;align-items:center;gap:6px;width:min(94%,440px)}
.gear-actions .primary-btn{width:100%}
.gi-cell{position:relative}
.gi-cell .en-cnt{position:absolute;top:5px;right:7px;background:#0d0a1e;border-radius:8px;padding:1px 7px;font-size:.7rem;font-weight:800}

/* ---------- 하단 안내문구 ↔ 네비 간격 ---------- */
#start-screen{padding-bottom:118px}
.controls-hint{margin:6px 0 16px}
.bottom-nav{border-top:1px solid rgba(255,255,255,.1);box-shadow:0 -8px 22px rgba(0,0,0,.4);padding-top:8px}

/* ---------- 하단 탭 뷰포트 최하단 고정 (간격 정상화) ---------- */
#start-screen .bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:5}
#start-screen{padding-bottom:98px}
.controls-hint{margin:8px 0 0}

/* ===================== 밝은 모찌풍 로비 (구스) ===================== */
#start-screen{
  background:
    radial-gradient(ellipse 95% 48% at 50% 6%, rgba(255,255,255,.55), transparent 60%),
    linear-gradient(180deg,#a9ddff 0%,#cbeaff 46%,#fff3e2 100%) !important;
}
#start-screen::before{ opacity:.22; }

/* 타이틀: 흰 글씨 + 진한 남색 외곽 + 핑크 포인트 */
.mini-logo{ color:#ffffff; -webkit-text-stroke:5px #2b3f7a; }
.mini-logo .lp{ color:#ff7fb0; }

/* 재화 바: 흰 알약 + 진한 테두리 */
.currency .cur{ background:#ffffff; border:2.5px solid #2b3f7a; color:#3a4a86; box-shadow:0 3px 0 rgba(43,63,122,.25); }

/* 캐릭터 쇼케이스 카드: 흰색 + 진한 둥근 테두리 */
.char-showcase{
  background:#ffffff !important; border:4px solid #2b3f7a !important; border-radius:26px;
  box-shadow:0 6px 0 rgba(43,63,122,.22), 0 10px 20px rgba(40,60,120,.16) !important;
}
.char-showcase .sc-name{ color:#33406e; }
.char-showcase .sc-star{ color:#ffb43c; }
.char-showcase .sc-tap{ color:#8a93b8; }
.char-showcase img{ filter:drop-shadow(0 6px 8px rgba(60,80,140,.28)); }

/* 미션/기록/스테이지 카드: 흰색 + 진한 테두리 */
.mission-card, .record-card{
  background:#ffffff !important; border:3px solid #2b3f7a !important; border-radius:16px;
  box-shadow:0 4px 0 rgba(43,63,122,.18); color:#33406e;
}
.mission-card span, .record-card span{ color:#8a93b8; }
.mission-card strong{ color:#33406e; }
.record-card strong{ color:#e8893a; }
.stage-btn{ background:#eef4ff; border:2.5px solid #2b3f7a; color:#5566a0; }
.stage-btn.selected{ background:#ffd54a; color:#3a3018; border-color:#2b3f7a; }
.stage-btn.locked{ opacity:.45; }

/* 출격 버튼: 입체 테두리 */
.primary-btn{ box-shadow:0 5px 0 #c79a2a, 0 9px 16px rgba(40,60,120,.2); }
.controls-hint{ color:#5b6aa0; }

/* 하단 탭: 흰 바 + 텍스트만 (이모지 숨김) */
.bottom-nav{ background:#ffffff !important; border-top:3px solid #2b3f7a !important; box-shadow:0 -6px 18px rgba(40,60,120,.14) !important; }
.nav-tab{ color:#9aa3c4; font-size:.86rem; font-weight:900; letter-spacing:.02em; padding:14px 4px calc(14px + env(safe-area-inset-bottom)); }
.nav-tab .ni{ display:none !important; }
.nav-tab.active{ color:#2b3f7a; }
.nav-tab.active::after{ content:''; position:absolute; left:50%; bottom:8px; transform:translateX(-50%); width:20px; height:4px; border-radius:3px; background:#ff7fb0; }
.nav-tab{ position:relative; }

/* ===== 로비 요소 좌우 너비 통일 (380px) ===== */
#start-screen > .char-showcase,
#start-screen > .mission-card,
#start-screen > .stage-list,
#start-screen > .record-card,
#start-screen > .primary-btn,
#start-screen > .controls-hint{
  width: min(100%, 380px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
}

/* ===================== 입체적 하늘 배경 (모찌풍 깊이감) ===================== */
#start-screen{
  background:
    radial-gradient(circle at 50% -8%, rgba(255,255,255,.85), transparent 42%),
    radial-gradient(165px 100px at 15% 25%, rgba(255,255,255,.95), transparent 70%),
    radial-gradient(215px 128px at 85% 18%, rgba(255,255,255,.88), transparent 72%),
    radial-gradient(185px 112px at 73% 56%, rgba(255,255,255,.62), transparent 72%),
    radial-gradient(145px 92px at 19% 67%, rgba(255,255,255,.56), transparent 72%),
    radial-gradient(125px 80px at 92% 80%, rgba(255,255,255,.5), transparent 72%),
    linear-gradient(180deg,#6cc0ff 0%,#a0d9ff 36%,#d0edff 70%,#fff2e2 100%) !important;
}
/* 떠다니는 거품 (가벼운 부유 애니메이션) */
#start-screen::before{
  opacity:1 !important; background-repeat:no-repeat !important;
  background:
    radial-gradient(circle at 12% 86%, rgba(255,255,255,.55) 0 13px, transparent 15px),
    radial-gradient(circle at 86% 44%, rgba(255,255,255,.45) 0 9px, transparent 11px),
    radial-gradient(circle at 32% 15%, rgba(255,255,255,.5) 0 7px, transparent 9px),
    radial-gradient(circle at 66% 88%, rgba(255,255,255,.42) 0 11px, transparent 13px),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.32) 0 6px, transparent 8px) !important;
  animation: bgfloat 7s ease-in-out infinite;
}
@keyframes bgfloat { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-16px); } }
/* 카드 입체감 강화 (두꺼운 하드 그림자) */
.char-showcase{ box-shadow:0 7px 0 rgba(43,63,122,.30), 0 12px 22px rgba(40,60,120,.18) !important; }
.mission-card, .record-card{ box-shadow:0 5px 0 rgba(43,63,122,.22) !important; }
.currency .cur{ box-shadow:0 4px 0 rgba(43,63,122,.28) !important; }

/* ===================== 가로 모드 + 회전 안내 ===================== */
#rotate-screen{ display:none; }
@media (orientation: portrait) and (max-width: 920px){
  #rotate-screen{
    display:flex; position:fixed; inset:0; z-index:9999;
    align-items:center; justify-content:center; text-align:center;
    background:linear-gradient(180deg,#6cc0ff 0%,#a0d9ff 55%,#fff2e2 100%);
    color:#2b3f7a;
  }
  .rot-phone{ font-size:64px; display:inline-block; animation:rotpulse 1.7s ease-in-out infinite; }
  .rot-card p{ font-family:'Do Hyeon',sans-serif; font-size:1.4rem; font-weight:900; margin:14px 0 0; line-height:1.4; }
  .rot-card b{ color:#ff7fb0; }
}
@keyframes rotpulse{ 0%,22%{ transform:rotate(0); } 62%,100%{ transform:rotate(-90deg); } }

/* 가로 화면(낮은 높이)에서 로비 축소 — 한 화면에 들어오게 */
@media (orientation: landscape) and (max-height: 600px){
  #start-screen{ gap:7px; padding-top:10px; padding-bottom:62px; }
  .mini-logo{ font-size:clamp(1.1rem,4.6vh,1.7rem); -webkit-text-stroke-width:4px; }
  .currency .cur{ padding:4px 10px; font-size:.74rem; }
  .char-showcase{ padding:5px 24px 4px; border-width:3px; }
  .char-showcase img{ width:min(74px,15vh); }
  .char-showcase .sc-name{ font-size:.86rem; }
  .char-showcase .sc-tap{ font-size:.6rem; }
  .mission-card, .record-card{ padding:6px 14px; font-size:.72rem; }
  .stage-btn{ flex-basis:74px; padding:6px 8px; font-size:.82rem; }
  .primary-btn{ padding:11px 20px; font-size:1.1rem; }
  .controls-hint{ font-size:.6rem; margin:2px 0 0; }
  .nav-tab{ padding:8px 4px calc(8px + env(safe-area-inset-bottom)); font-size:.74rem; }
  #start-screen > .char-showcase, #start-screen > .mission-card,
  #start-screen > .stage-list, #start-screen > .record-card,
  #start-screen > .primary-btn, #start-screen > .controls-hint{ width:min(100%,440px) !important; }
}