:root {
  --bg: #080d19;
  --surface: #151d30;
  --surface-2: #1d2841;
  --line: rgba(230, 237, 255, .12);
  --text: #f7f1df;
  --muted: #9aa7bd;
  --gold: #f3c86a;
  --blue: #7dd3fc;
  --violet: #aa8cff;
  --green: #76e3a5;
  --red: #fb7185;
}

* { box-sizing: border-box; }
html { color-scheme: dark; background: var(--bg); }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--text);
  background: radial-gradient(circle at 50% -15%, #273354 0, #0d1322 38%, #080c16 72%);
  font-family: "Pretendard", "Noto Sans KR", "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; }
button:not(:disabled) { cursor: pointer; }
button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.hidden { display: none !important; }

.game-shell {
  width: min(100%, 540px);
  min-height: 100vh;
  margin: 0 auto;
  padding: max(14px, env(safe-area-inset-top)) 14px max(26px, env(safe-area-inset-bottom));
}

.battle-hud { position:absolute; z-index:31; top:12px; left:12px; right:12px; overflow:hidden; border:1px solid rgba(255,255,255,.12); border-radius:16px; background:rgba(8,13,25,.72); box-shadow:0 10px 28px rgba(0,0,0,.2); backdrop-filter:blur(10px); }
.top-hud { display: flex; align-items: center; justify-content: space-between; padding: 7px 9px 6px; }
.brand span, .modal-kicker { color: var(--gold); font-size: 9px; font-weight: 900; letter-spacing: .17em; }
.brand h1 { margin: 2px 0 0; font-family: Georgia, "Times New Roman", serif; font-size: 23px; }
.hud-actions { display: flex; gap: 7px; }
.round-button, .auto-toggle, .speed-toggle { height: 36px; border: 1px solid var(--line); color: var(--muted); background: rgba(255,255,255,.04); }
.round-button { width: 36px; border-radius: 50%; color: var(--gold); }
.auto-toggle, .speed-toggle { padding: 0 10px; border-radius: 18px; font-size: 9px; font-weight: 900; letter-spacing: .04em; }
.auto-toggle.active { color: #102217; border-color: rgba(118,227,165,.38); background: var(--green); box-shadow: 0 0 17px rgba(118,227,165,.18); }
.speed-toggle.active { color:#171126; border-color:rgba(170,140,255,.5); background:var(--violet); box-shadow:0 0 17px rgba(170,140,255,.22); }

.resource-hud {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  overflow: hidden;
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--line);
}
.resource-hud div { padding: 8px 4px; text-align: center; background: rgba(13,19,34,.96); }
.resource-hud small { display: block; margin-bottom: 2px; color: var(--muted); font-size: 8px; }
.resource-hud strong { color: #f6efd9; font-size: 12px; }
.battle-hud .resource-hud { margin:0; border-width:1px 0 0; border-radius:0; background:rgba(230,237,255,.1); }

.battlefield {
  position: relative;
  height: 500px;
  overflow: hidden;
  border: 1px solid rgba(234,227,190,.16);
  border-radius: 24px;
  background: linear-gradient(#1e2f58 0%, #4f4a76 45%, #223748 75%, #111923 100%);
  box-shadow: 0 24px 60px rgba(0,0,0,.44);
  isolation: isolate;
  transition: background 1s ease;
}
.battlefield.region-2 { background: linear-gradient(#182f40 0%, #31595b 45%, #263c38 75%, #101b1b); }
.battlefield.region-3 { background: linear-gradient(#43263e 0%, #8d4d4e 44%, #674c3d 73%, #211815); }
.battlefield::after { content:""; position:absolute; inset:0; z-index:13; pointer-events:none; box-shadow:inset 0 -80px 80px rgba(4,7,13,.32); }
.sky-glow { position:absolute; left:50%; top:-150px; width:360px; height:300px; transform:translateX(-50%); border-radius:50%; background:rgba(173,192,255,.13); filter:blur(8px); }
.moon { position:absolute; top:124px; right:48px; width:48px; height:48px; border-radius:50%; background:#f6df9d; box-shadow:0 0 34px rgba(246,223,157,.43); }
.moon::after { content:""; position:absolute; inset:-5px 9px 5px -4px; border-radius:50%; background:#2d3a60; }
.stars, .stars::before, .stars::after { position:absolute; left:20px; top:28px; width:2px; height:2px; border-radius:50%; background:#fff; box-shadow:33px 12px #fff,86px 32px #f9e8bd,147px 5px #fff,212px 29px #ddebff,283px 12px #fff,347px 46px #f9e8bd,414px 17px #fff; animation:twinkle 2.6s ease-in-out infinite alternate; }
.stars::before { content:""; top:43px; left:12px; opacity:.45; }.stars::after { content:""; top:85px; left:-4px; opacity:.25; }

.parallax { position:absolute; left:-20%; width:140%; background-repeat:repeat-x; }
.mountains.far { bottom:96px; height:170px; opacity:.58; background:linear-gradient(145deg,transparent 50%,#293550 51%) 0 0/170px 100%,linear-gradient(215deg,transparent 50%,#293550 51%) 85px 0/170px 100%; }
.mountains.near { bottom:70px; height:130px; opacity:.86; background:linear-gradient(145deg,transparent 50%,#172a38 51%) 0 0/140px 100%,linear-gradient(215deg,transparent 50%,#172a38 51%) 70px 0/140px 100%; }
.trees { bottom:63px; height:96px; opacity:.95; background:linear-gradient(72deg,transparent 44%,#13252d 45% 55%,transparent 56%) 0 100%/52px 92px,linear-gradient(108deg,transparent 44%,#13252d 45% 55%,transparent 56%) 26px 100%/52px 74px; }
.battlefield.moving .mountains.far { animation:scrollFar 18s linear infinite; }.battlefield.moving .mountains.near { animation:scrollNear 10s linear infinite; }.battlefield.moving .trees { animation:scrollTrees 5s linear infinite; }
.ground-track { position:absolute; left:0; right:0; bottom:0; height:86px; background:linear-gradient(#16272a,#0d171b); }
.ground-track::before { content:""; position:absolute; inset:0; opacity:.35; background:repeating-linear-gradient(95deg,transparent 0 32px,rgba(179,203,155,.35) 34px 36px,transparent 38px 56px); }
.ground-track span { position:absolute; left:-20%; right:-20%; top:6px; height:2px; background:repeating-linear-gradient(90deg,#6e8063 0 9px,transparent 10px 27px); }
.battlefield.moving .ground-track::before,.battlefield.moving .ground-track span { animation:groundMove 1.5s linear infinite; }

.scene-topline { position:absolute; z-index:20; top:111px; left:14px; right:14px; display:flex; align-items:start; justify-content:space-between; }
.scene-topline > div:first-child { display:flex; align-items:center; gap:8px; }
.scene-topline strong { font-size:10px; text-shadow:0 2px 6px rgba(0,0,0,.45); }
.phase-badge { padding:4px 7px; border-radius:9px; color:#162015; background:var(--green); font-size:8px; font-weight:900; }
.phase-badge.combat { color:#2b0d12; background:var(--red); }.phase-badge.reward { color:#2b1d08; background:var(--gold); }
.encounter-counter { padding:4px 7px; border:1px solid rgba(255,255,255,.12); border-radius:9px; color:#d5dbea; background:rgba(6,10,20,.42); font-size:8px; }

.boss-bar { position:absolute; z-index:19; top:145px; left:50%; width:72%; transform:translateX(-50%); padding:8px 10px; border:1px solid rgba(251,113,133,.28); border-radius:12px; background:rgba(30,9,17,.65); backdrop-filter:blur(6px); }
.boss-bar > div:first-child { display:flex; justify-content:space-between; margin-bottom:5px; }.boss-bar span { color:#fca5b4; font-size:7px; }.boss-bar strong { font-size:9px; }.bar { height:7px; overflow:hidden; border-radius:8px; background:rgba(255,255,255,.09); }.bar i { display:block; width:100%; height:100%; border-radius:inherit; background:linear-gradient(90deg,#b92449,#fb7185); transition:width .2s linear; }

.party { position:absolute; z-index:7; left:15%; bottom:76px; width:31%; height:112px; transition:transform .5s ease; }
.party.marching { transform:translateX(9%); }
.unit { position:absolute; width:50px; height:74px; transform-origin:50% 100%; filter:drop-shadow(0 7px 5px rgba(0,0,0,.4)); }
.unit em { position:absolute; left:50%; bottom:-17px; transform:translateX(-50%); color:#dbe3f2; font-size:7px; font-style:normal; opacity:.8; }
.unit .head { position:absolute; z-index:4; left:16px; top:6px; width:19px; height:20px; border-radius:45%; background:#d8aa88; box-shadow:inset -3px -2px 0 rgba(71,39,32,.16); }
.unit .body { position:absolute; z-index:3; left:11px; top:25px; width:29px; height:38px; border-radius:12px 12px 7px 7px; }
.unit .cape { position:absolute; z-index:1; left:7px; top:25px; width:32px; height:40px; border-radius:16px 7px 13px 7px; transform:skewX(-8deg); }
.unit .weapon { position:absolute; z-index:6; }
.unit .aura { position:absolute; z-index:0; left:3px; top:17px; width:45px; height:51px; border-radius:50%; opacity:0; }
.hero.champion { left:24px; bottom:5px; transform:scale(1.18); }
.champion .body { background:linear-gradient(90deg,#33465f,#91a6c5 48%,#58407c); box-shadow:inset 0 0 0 3px #29384f; }
.champion .cape { left:4px; width:37px; background:linear-gradient(150deg,#743849,#3a315d); }
.champion .head { background:#d4dce8; border-radius:7px 7px 10px 10px; }
.champion .head::after { content:""; position:absolute; left:4px; right:4px; top:9px; height:3px; background:#20293a; box-shadow:0 0 6px #87e1ff; }
.champion .weapon { left:39px; top:17px; width:5px; height:52px; border-radius:4px 4px 1px 1px; background:linear-gradient(90deg,#74869f,#fff,#66788f); transform:rotate(12deg); }
.champion .weapon::after { content:""; position:absolute; left:-7px; bottom:10px; width:19px; height:4px; border-radius:4px; background:var(--gold); }
.champion .sigil { position:absolute; z-index:7; left:-10px; top:17px; color:#9ee8ff; font-size:18px; text-shadow:0 0 10px #6ad8ff; animation:orbPulse 1.2s ease-in-out infinite alternate; }
.familiar { position:absolute; z-index:8; left:88px; bottom:35px; width:34px; height:34px; border:1px solid rgba(145,226,255,.55); border-radius:50%; background:radial-gradient(circle,#dff8ff 0 12%,#6bd7ff 13% 28%,rgba(70,96,190,.52) 29% 55%,transparent 58%); box-shadow:0 0 19px rgba(104,214,255,.65); animation:familiarFloat 1.5s ease-in-out infinite alternate; }.familiar span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#fff7ce;font-size:13px;text-shadow:0 0 8px #fff}
.party.marching .unit { animation:championWalk .62s ease-in-out infinite alternate; }
.unit.attacking { animation:championAttack .26s ease-out; }.unit.hit { animation:hitShake .24s linear; }.unit.celebrate { animation:celebrate .55s ease-in-out 2; }
.party.has-haste .unit { filter:drop-shadow(0 7px 5px rgba(0,0,0,.4)) drop-shadow(0 0 5px #f3c86a); }

.enemy-lane { position:absolute; z-index:8; right:5%; bottom:76px; width:45%; height:112px; }
.enemy { position:absolute; bottom:3px; width:60px; height:60px; transform-origin:50% 100%; filter:drop-shadow(0 7px 5px rgba(0,0,0,.42)); animation:enemyIdle .7s ease-in-out infinite alternate; transition:opacity .25s, transform .25s; }
.enemy em { position:absolute; left:50%; bottom:-19px; width:max-content; transform:translateX(-50%); color:#d7ddec; font-size:7px; font-style:normal; }
.enemy .enemy-health { position:absolute; left:7px; right:7px; top:-11px; height:4px; overflow:hidden; border-radius:5px; background:rgba(0,0,0,.45); }.enemy .enemy-health i { display:block; height:100%; background:var(--red); transition:width .18s; }
.enemy.slime { border-radius:52% 52% 34% 34%; background:linear-gradient(135deg,#8b70b5,#463965); }.enemy.slime::before,.enemy.slime::after { content:""; position:absolute; top:21px; width:7px; height:8px; border-radius:50%; background:#f5edda; box-shadow:0 0 6px rgba(255,255,255,.25); }.enemy.slime::before { left:15px; }.enemy.slime::after { right:15px; }
.enemy.wolf { height:50px; bottom:5px; border-radius:45% 55% 35% 35%; background:linear-gradient(135deg,#718099,#2f3848); }.enemy.wolf::before,.enemy.wolf::after { content:""; position:absolute; top:-15px; border-left:12px solid transparent; border-right:5px solid transparent; border-bottom:24px solid #59677b; }.enemy.wolf::before { left:8px; transform:rotate(-15deg); }.enemy.wolf::after { right:8px; transform:scaleX(-1) rotate(-15deg); }
.enemy.golem { width:64px; height:76px; border-radius:16px 16px 25px 25px; background:linear-gradient(90deg,#30394a,#77849a 50%,#30394a); box-shadow:inset 0 0 0 6px #252c3a; }.enemy.golem::before { content:""; position:absolute; left:15px; right:15px; top:22px; height:7px; border-radius:7px; background:#ff6175; box-shadow:0 0 12px #f43f5e; }
.enemy.boss { width:90px; height:105px; bottom:-2px; border-radius:35% 35% 22% 22%; background:linear-gradient(90deg,#291d32,#695377,#291d32); box-shadow:inset 0 0 0 7px #211827; animation:bossIdle 1s ease-in-out infinite alternate; }.enemy.boss::before,.enemy.boss::after { content:""; position:absolute; top:-24px; border-left:18px solid transparent; border-right:8px solid transparent; border-bottom:38px solid #493b59; }.enemy.boss::before { left:10px; transform:rotate(-17deg); }.enemy.boss::after { right:10px; transform:scaleX(-1) rotate(-17deg); }.enemy.boss .eye { position:absolute; left:25px; right:25px; top:31px; height:8px; border-radius:8px; background:#ff4768; box-shadow:0 0 15px #fb7185; }
.enemy.boss.enraged { filter:drop-shadow(0 0 16px #fb4264) brightness(1.35); animation:bossEnrage .28s linear 4; }
.enemy.hit { animation:enemyHit .18s linear; }.enemy.dead { opacity:0; transform:translateY(-18px) scale(.6) rotate(12deg); }

.effect-layer,.loot-layer { position:absolute; z-index:12; inset:0; pointer-events:none; overflow:hidden; }
.projectile { position:absolute; width:16px; height:4px; border-radius:6px; transform-origin:0 50%; animation:projectileFly .3s linear forwards; }.projectile.arrow { background:#f4c477; box-shadow:0 0 7px #ff9c46; }.projectile.magic { width:13px; height:13px; border-radius:50%; background:#8be7ff; box-shadow:0 0 14px #5bd7ff; }.projectile.slash { width:29px; height:18px; border:3px solid #f1f5f9; border-left-color:transparent; border-bottom-color:transparent; background:transparent; transform:rotate(35deg); }
.damage-number { position:absolute; color:#fff3c4; font-size:13px; font-weight:900; text-shadow:0 2px 4px #000; animation:damageFloat .7s ease-out forwards; }.damage-number.crit { color:#ffcf56; font-size:18px; }.damage-number.heal { color:#8af0b3; }
.starfall { position:absolute; width:8px; height:90px; border-radius:50%; background:linear-gradient(#fff, #9de9ff, transparent); box-shadow:0 0 18px #70dfff; transform:rotate(18deg); animation:starFall .52s ease-in forwards; }.explosion { position:absolute; width:30px; height:30px; border-radius:50%; border:4px solid #f7ca72; box-shadow:0 0 25px #ff8b3d; animation:explode .42s ease-out forwards; }.shield-wave { position:absolute; left:8%; bottom:69px; width:47%; height:116px; border:3px solid rgba(113,218,255,.78); border-radius:50%; background:rgba(87,190,255,.12); box-shadow:inset 0 0 30px rgba(87,190,255,.2),0 0 20px rgba(87,190,255,.4); animation:shieldPulse 1s ease-in-out infinite alternate; }.heal-wave { position:absolute; left:24%; bottom:103px; width:70px; height:70px; border-radius:50%; border:3px solid #84f1ad; box-shadow:0 0 25px #62de95; animation:healPulse .7s ease-out forwards; }
.loot-drop { position:absolute; bottom:96px; width:14px; height:14px; transform:rotate(45deg); border-radius:3px; background:var(--gold); box-shadow:0 0 12px rgba(243,200,106,.7); animation:lootRise 1.2s ease-out forwards; }

.party-status { position:absolute; z-index:21; left:13px; right:13px; bottom:38px; display:grid; grid-template-columns:auto 1fr auto; gap:9px; align-items:center; padding:8px 10px; border:1px solid rgba(255,255,255,.1); border-radius:12px; background:rgba(7,11,20,.66); backdrop-filter:blur(8px); }
.portrait-stack { display:flex; }.portrait-stack span { display:grid; place-items:center; width:25px; height:25px; margin-right:-6px; border:2px solid #34425b; border-radius:50%; color:#f2e8ce; background:#586680; font-size:7px; }.portrait-stack.solo span { width:29px; height:29px; margin-right:0; color:#fff3c4; background:linear-gradient(145deg,#405b7f,#765390); box-shadow:0 0 10px rgba(135,225,255,.28); }
.party-health > div:first-child { display:flex; justify-content:space-between; margin-bottom:4px; }.party-health span,.party-health strong { color:#cdd5e5; font-size:7px; }.bar.health i { background:linear-gradient(90deg,#2ca465,#78e7a5); }
.barrier-icon { padding:4px 6px; border-radius:8px; color:#10232d; background:#86dcff; font-size:7px; font-weight:900; }
.battle-message { position:absolute; z-index:22; left:13px; right:13px; bottom:9px; color:#c5cede; text-align:center; font-size:8px; text-shadow:0 2px 5px #000; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.journey-card,.relic-section,.activity-feed { margin-top:11px; padding:14px; border:1px solid var(--line); border-radius:17px; background:linear-gradient(145deg,rgba(26,35,58,.96),rgba(15,21,36,.98)); }
.journey-head,.section-heading,.feed-head { display:flex; justify-content:space-between; align-items:end; gap:10px; }.journey-head small,.section-heading small,.feed-head small { display:block; margin-bottom:3px; color:var(--gold); font-size:8px; font-weight:800; letter-spacing:.09em; }.journey-head strong { font-size:12px; }.journey-head > span { color:var(--muted); font-size:9px; }
.route-progress { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:12px; }.route-node { position:relative; height:6px; border-radius:7px; background:rgba(255,255,255,.08); }.route-node::after { content:""; position:absolute; left:50%; top:50%; width:9px; height:9px; transform:translate(-50%,-50%) rotate(45deg); border:2px solid #45536c; border-radius:2px; background:#172035; }.route-node.complete { background:rgba(243,200,106,.32); }.route-node.complete::after,.route-node.current::after { border-color:var(--gold); background:var(--gold); box-shadow:0 0 10px rgba(243,200,106,.5); }.route-node.current::after { animation:routePulse 1.2s infinite; }

.skill-zone { margin-top:11px; }
.skill-toolbar { display:flex; align-items:center; justify-content:space-between; min-height:30px; margin-bottom:6px; padding:0 3px 0 7px; color:var(--muted); font-size:8px; font-weight:800; letter-spacing:.08em; }
.skill-toolbar .auto-toggle { height:28px; }
.skill-panel { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.skill { position:relative; min-height:83px; overflow:hidden; padding:9px 5px 8px; border:1px solid var(--line); border-radius:15px; color:var(--text); background:linear-gradient(160deg,#24304c,#141b2e); }
.skill:disabled { opacity:.55; }.skill-glyph { display:block; margin-bottom:2px; color:var(--gold); font-size:23px; text-shadow:0 0 12px rgba(243,200,106,.35); }.skill strong { display:block; font-size:10px; }.skill small { color:var(--muted); font-size:7px; }.skill .cooldown { position:absolute; left:0; right:0; bottom:0; height:0; background:rgba(6,9,17,.72); transition:height .1s linear; pointer-events:none; }.star-skill .skill-glyph { color:#9de8ff; }.barrier-skill .skill-glyph { color:#88dbff; }.heal-skill .skill-glyph { color:#83e9a9; }

.section-heading h2 { margin:0; font-size:14px; }.text-button { padding:4px 0; border:0; color:#b9c4d8; background:transparent; font-size:9px; text-decoration:underline; text-underline-offset:3px; }
.relic-rack { display:flex; gap:7px; overflow-x:auto; margin-top:11px; scrollbar-width:none; }.relic-rack::-webkit-scrollbar{display:none}.relic-rack p { width:100%; margin:0; padding:12px; border:1px dashed var(--line); border-radius:11px; color:#7f8ba1; text-align:center; font-size:8px; }.relic-chip { flex:0 0 auto; display:grid; grid-template-columns:27px auto; gap:7px; align-items:center; min-width:142px; padding:8px; border:1px solid rgba(243,200,106,.18); border-left:3px solid var(--family,#f3c86a); border-radius:11px; background:rgba(243,200,106,.045); }.relic-chip b { display:grid; place-items:center; width:27px; height:27px; border-radius:50%; color:var(--family,#f3c86a); background:#30364c; }.relic-chip strong { display:block; font-size:8px; }.relic-chip strong i { color:var(--family,#f3c86a); font-size:7px; font-style:normal; }.relic-chip small { color:var(--muted); font-size:7px; }
.equipment-rack { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:11px; }.equipment-card { display:grid; grid-template-columns:32px 1fr; gap:8px; align-items:center; padding:9px; border:1px solid var(--line); border-radius:12px; background:linear-gradient(135deg,rgba(243,200,106,.08),rgba(255,255,255,.025)); }.equipment-card b { display:grid; place-items:center; width:32px; height:32px; border-radius:9px; color:var(--gold); background:#293249; font-size:17px; }.equipment-card small,.equipment-card strong,.equipment-card span { display:block; }.equipment-card small { color:var(--muted); font-size:6px; letter-spacing:.08em; }.equipment-card strong { margin:1px 0; font-size:9px; }.equipment-card span { color:#d7c27d; font-size:7px; }.build-label { display:flex; justify-content:space-between; align-items:center; margin-top:14px; }.build-label strong { font-size:9px; }.build-label span { color:var(--muted); font-size:7px; }.special-label { margin-top:13px; }.special-rune-slots { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:7px; }.special-slot { min-height:52px; padding:9px; border:1px dashed #58657b; border-radius:12px; background:rgba(134,225,255,.025); }.special-slot.filled { border-style:solid; border-color:#bd8cff; background:linear-gradient(135deg,rgba(153,92,255,.13),rgba(255,255,255,.025)); }.special-slot small,.special-slot strong,.special-slot span { display:block; }.special-slot small { color:#9c87c9; font-size:6px; }.special-slot strong { margin:3px 0; color:#decfff; font-size:9px; }.special-slot span { color:var(--muted); font-size:7px; line-height:1.35; }
.special-synergy { grid-column:1/-1; padding:8px 10px; border:1px solid rgba(214,154,255,.45); border-radius:12px; background:linear-gradient(120deg,rgba(110,60,180,.22),rgba(80,190,255,.1)); box-shadow:inset 0 0 18px rgba(178,106,255,.08); }.special-synergy small,.special-synergy strong,.special-synergy span{display:block}.special-synergy small{color:#a990d8;font-size:6px;letter-spacing:.1em}.special-synergy strong{margin:2px 0;color:#ead9ff;font-size:10px}.special-synergy span{color:var(--muted);font-size:7px}
.feed-head span { color:#68758b; font-size:7px; }.activity-feed #activityFeed { display:grid; gap:7px; margin-top:10px; }.feed-line { display:flex; gap:8px; color:#aeb9cc; font-size:8px; line-height:1.45; }.feed-line::before { content:""; flex:0 0 auto; width:5px; height:5px; margin-top:3px; transform:rotate(45deg); border:1px solid var(--gold); }.feed-line strong { color:#e6deca; font-weight:700; }

.modal-backdrop { position:fixed; inset:0; z-index:100; display:grid; place-items:end center; padding:16px; background:rgba(3,6,12,.79); backdrop-filter:blur(9px); }
.modal { width:min(100%,510px); max-height:91vh; overflow:auto; padding:23px; border:1px solid rgba(243,200,106,.2); border-radius:23px; background:linear-gradient(150deg,#222d49,#111728 72%); box-shadow:0 32px 90px rgba(0,0,0,.65); animation:modalIn .32s ease both; }.modal h2 { margin:5px 0; font-family:Georgia,"Times New Roman",serif; font-size:21px; }.modal > p { margin:0 0 17px; color:var(--muted); font-size:9px; line-height:1.5; }
.relic-choices { display:grid; gap:8px; }.relic-choice { position:relative; display:grid; grid-template-columns:45px 1fr; gap:10px; align-items:center; width:100%; padding:11px; border:1px solid var(--line); border-left:3px solid var(--family,#f3c86a); border-radius:13px; color:var(--text); text-align:left; background:rgba(255,255,255,.035); }.relic-choice:hover,.relic-choice.recommended { border-color:var(--family,#f3c86a); background:rgba(243,200,106,.07); }.relic-choice.recommended::after { content:"추천"; position:absolute; right:9px; top:8px; padding:2px 5px; border-radius:7px; color:#111827; background:var(--family,#f3c86a); font-size:6px; font-weight:900; }.relic-choice b { display:grid; place-items:center; width:43px; height:43px; border-radius:50%; color:var(--family,#f3c86a); background:radial-gradient(circle,#4c455f,#262d43); font-size:20px; }.relic-choice strong { display:block; margin-bottom:3px; font-size:11px; }.relic-choice strong i { color:var(--family,#f3c86a); font-size:8px; font-style:normal; }.relic-choice small { display:block; color:var(--family,#aab5c8); font-size:7px; line-height:1.4; }.relic-choice p { margin:1px 0 0; color:#f4f0df; font-size:9px; font-weight:800; }.relic-choice em { display:block; margin-top:4px; color:#91dcb2; font-size:7px; font-style:normal; line-height:1.45; }
.auto-choice { margin-top:13px; }.auto-choice > span { display:block; margin-bottom:5px; color:#7f8ba1; font-size:7px; }.auto-choice > div { height:3px; overflow:hidden; border-radius:4px; background:rgba(255,255,255,.07); }.auto-choice i { display:block; width:100%; height:100%; background:var(--gold); transform-origin:0 50%; }
.family-flame{--family:#ff9a55}.family-star{--family:#87e1ff}.family-guard{--family:#9cbcff}.family-hunt{--family:#f3c86a}.family-life{--family:#82e7a9}
.category-attack{--family:#ff8f62}.category-defense{--family:#8db6ff}.category-utility{--family:#79dfb0}.category-special{--family:#c798ff}
.grade-badge { display:inline-block; margin-right:5px; padding:2px 5px; border:1px solid currentColor; border-radius:7px; font-weight:900; letter-spacing:.04em; }
.relic-choice.grade-rare { box-shadow:inset 0 0 22px rgba(80,151,255,.08); }.relic-choice.grade-rare .grade-badge { color:#80b8ff; background:rgba(64,132,255,.12); }
.relic-choice.grade-epic { box-shadow:inset 0 0 25px rgba(190,118,255,.13),0 0 13px rgba(170,92,255,.08); }.relic-choice.grade-epic .grade-badge { color:#d59aff; background:rgba(169,83,255,.14); }
.relic-choice.grade-common .grade-badge { color:#aeb9cc; background:rgba(255,255,255,.04); }
.relic-choice.salvage-action { --family:#9aa7bd; border-style:dashed; opacity:.9; }.relic-choice.slot-action b{border-radius:11px;font-size:13px}.relic-choice.special-drop{box-shadow:inset 0 0 28px rgba(185,113,255,.12),0 0 18px rgba(127,208,255,.09)}
.rune-grade { display:inline-block; margin-left:4px; padding:1px 4px; border-radius:5px; color:#c7d0df; background:rgba(255,255,255,.07); font-size:6px; font-weight:900; vertical-align:1px; }.rune-grade.grade-rare{color:#8fc0ff;background:rgba(64,132,255,.13)}.rune-grade.grade-epic{color:#d9a5ff;background:rgba(169,83,255,.15)}
.return-scenes { display:grid; gap:7px; margin:15px 0; }.return-scene { padding:10px 10px 10px 28px; position:relative; border:1px solid var(--line); border-radius:11px; color:#bdc7d8; background:rgba(5,8,16,.22); font-size:8px; line-height:1.45; }.return-scene::before { content:"✦"; position:absolute; left:10px; top:9px; color:var(--gold); }.return-loot { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-bottom:15px; }.return-loot div { padding:10px 5px; border:1px solid var(--line); border-radius:11px; text-align:center; background:rgba(255,255,255,.025); }.return-loot strong { display:block; color:var(--gold); font-size:14px; }.return-loot small { color:var(--muted); font-size:7px; }.primary-button { width:100%; min-height:47px; border:0; border-radius:13px; color:#251a0c; background:linear-gradient(135deg,#f4d384,#d99e46); font-weight:900; }
.toast { position:fixed; z-index:120; left:50%; bottom:27px; width:max-content; max-width:calc(100% - 34px); padding:10px 14px; transform:translateX(-50%); border:1px solid var(--line); border-radius:11px; color:#f5edda; background:#263048; box-shadow:0 14px 35px rgba(0,0,0,.46); font-size:9px; animation:toastIn .25s ease both; }
.mobile-nav { display:none; }

.game-shell.speed-2 .battlefield.moving .mountains.far{animation-duration:9s}.game-shell.speed-2 .battlefield.moving .mountains.near{animation-duration:5s}.game-shell.speed-2 .battlefield.moving .trees{animation-duration:2.5s}.game-shell.speed-2 .battlefield.moving .ground-track::before,.game-shell.speed-2 .battlefield.moving .ground-track span{animation-duration:.75s}
.game-shell.speed-2 .party.marching .unit{animation-duration:.31s}.game-shell.speed-2 .enemy{animation-duration:.35s}.game-shell.speed-2 .enemy.boss{animation-duration:.5s}.game-shell.speed-2 .projectile{animation-duration:.15s}.game-shell.speed-2 .starfall{animation-duration:.26s}.game-shell.speed-2 .damage-number{animation-duration:.35s}.game-shell.speed-2 .loot-drop{animation-duration:.6s}

@keyframes twinkle{to{opacity:.35;transform:scale(.8)}}
@keyframes scrollFar{to{transform:translateX(-120px)}}
@keyframes scrollNear{to{transform:translateX(-180px)}}
@keyframes scrollTrees{to{transform:translateX(-230px)}}
@keyframes groundMove{to{transform:translateX(-90px)}}
@keyframes heroWalk{to{transform:translateY(-5px) rotate(-1deg)}}
@keyframes heroAttack{45%{transform:translateX(14px) scale(1.05)}100%{transform:translateX(0)}}
@keyframes championWalk{from{transform:scale(1.18)}to{transform:translateY(-5px) rotate(-1deg) scale(1.18)}}
@keyframes championAttack{45%{transform:translateX(16px) scale(1.24)}100%{transform:scale(1.18)}}
@keyframes orbPulse{to{transform:translateY(-3px) scale(1.15);filter:brightness(1.35)}}
@keyframes familiarFloat{to{transform:translateY(-8px) rotate(8deg);filter:brightness(1.22)}}
@keyframes hitShake{25%{transform:translateX(-5px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}
@keyframes celebrate{50%{transform:translateY(-15px) rotate(-4deg)}}
@keyframes enemyIdle{to{transform:translateY(-4px) scaleY(1.03)}}
@keyframes bossIdle{to{transform:translateY(-5px) scale(1.03)}}
@keyframes enemyHit{50%{transform:translateX(7px);filter:brightness(2) drop-shadow(0 7px 5px rgba(0,0,0,.42))}}
@keyframes bossEnrage{50%{transform:translateY(-5px) scale(1.08);filter:drop-shadow(0 0 23px #ff3158) brightness(1.7)}}
@keyframes projectileFly{from{transform:translateX(0)}to{transform:translateX(175px)}}
@keyframes damageFloat{from{transform:translateY(0);opacity:1}to{transform:translateY(-36px);opacity:0}}
@keyframes starFall{from{transform:translate(50px,-100px) rotate(18deg);opacity:0}40%{opacity:1}to{transform:translate(0,50px) rotate(18deg);opacity:0}}
@keyframes explode{from{transform:scale(.25);opacity:1}to{transform:scale(2.1);opacity:0}}
@keyframes shieldPulse{to{transform:scale(1.04);opacity:.65}}
@keyframes healPulse{from{transform:scale(.2);opacity:1}to{transform:scale(2.4);opacity:0}}
@keyframes lootRise{0%{transform:translateY(20px) rotate(45deg);opacity:0}30%{opacity:1}100%{transform:translateY(-55px) rotate(225deg);opacity:0}}
@keyframes routePulse{50%{transform:translate(-50%,-50%) rotate(45deg) scale(1.35)}}
@keyframes modalIn{from{transform:translateY(25px);opacity:0}}
@keyframes autoChoice{to{transform:scaleX(0)}}
@keyframes toastIn{from{transform:translate(-50%,10px);opacity:0}}

@media (min-width:650px){.game-shell{padding-left:0;padding-right:0}.modal-backdrop{place-items:center}}
@media (max-width:649px) and (orientation:portrait){
  html,body{width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
  body{min-height:0}
  .game-shell{display:grid;grid-template-rows:minmax(0,1fr) auto;width:100%;height:100dvh;min-height:0;padding:max(5px,env(safe-area-inset-top)) 8px max(5px,env(safe-area-inset-bottom));overflow:hidden}
  .battle-hud{top:7px;left:7px;right:7px;border-radius:12px}.top-hud{min-height:34px;padding:3px 6px}.brand span{display:none}.brand h1{margin:0;font-size:15px}.hud-actions{gap:4px}.round-button,.auto-toggle,.speed-toggle{height:27px}.round-button{width:27px}.auto-toggle{max-width:105px;padding:0 8px;font-size:7px}.speed-toggle{padding:0 9px;font-size:9px}
  .resource-hud{min-height:35px}.resource-hud div{padding:4px 3px}.resource-hud small{font-size:6px}.resource-hud strong{font-size:9px}
  main{min-height:0;overflow:hidden}
  .game-shell.mobile-tab-combat main{display:grid;grid-template-rows:minmax(0,1fr) 53px 94px;gap:6px}
  .game-shell.mobile-tab-combat [data-mobile-panel="build"],.game-shell.mobile-tab-combat [data-mobile-panel="log"]{display:none}
  .game-shell.mobile-tab-build .battlefield,.game-shell.mobile-tab-build [data-mobile-panel="combat"],.game-shell.mobile-tab-build [data-mobile-panel="log"]{display:none}
  .game-shell.mobile-tab-log .battlefield,.game-shell.mobile-tab-log [data-mobile-panel="combat"],.game-shell.mobile-tab-log [data-mobile-panel="build"]{display:none}
  .game-shell.mobile-tab-build main,.game-shell.mobile-tab-log main{display:block;height:100%}
  .battlefield{width:100%;height:auto;min-height:0;border-radius:17px}.scene-topline{top:84px;left:9px;right:9px}.scene-topline strong{max-width:145px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.boss-bar{top:113px;width:78%;padding:6px 8px}.moon{top:119px;right:35px;transform:scale(.8)}
  .party{left:3%;bottom:69px;transform:scale(.82);transform-origin:left bottom}.party.marching{transform:translateX(5%) scale(.82)}.enemy-lane{right:0;bottom:69px;transform:scale(.8);transform-origin:right bottom}.shield-wave{left:4%;bottom:61px;width:48%;height:100px}.heal-wave{left:18%;bottom:87px}
  .party-status{left:8px;right:8px;bottom:31px;padding:5px 7px}.portrait-stack.solo span{width:23px;height:23px}.battle-message{left:8px;right:8px;bottom:6px;font-size:7px}
  .journey-card,.skill-zone,.relic-section,.activity-feed{margin-top:0}
  .journey-card{padding:7px 10px;border-radius:12px}.journey-head small{display:none}.journey-head strong{font-size:9px}.route-progress{margin-top:7px}.route-node{height:4px}
  .skill-zone{display:grid;grid-template-rows:21px minmax(0,1fr);min-height:0}.skill-toolbar{min-height:21px;margin:0;padding:0 3px 3px 7px;font-size:7px}.skill-toolbar .auto-toggle{height:20px;padding:0 7px;font-size:6px}.skill-panel{gap:6px;min-height:0}.skill{min-height:0;padding:4px 3px;border-radius:12px}.skill-glyph{font-size:17px}.skill strong{font-size:8px}.skill small{font-size:6px}
  .relic-section{display:flex;height:100%;min-height:0;flex-direction:column;padding:10px;border-radius:14px;overflow:hidden}.section-heading h2{font-size:12px}.section-heading small{font-size:6px}.text-button{font-size:7px}.equipment-rack{gap:5px;margin-top:6px}.equipment-card{grid-template-columns:24px 1fr;padding:5px}.equipment-card b{width:24px;height:24px;font-size:13px}.equipment-card strong{font-size:7px}.build-label{margin-top:7px}.build-label strong{font-size:8px}.build-label span{font-size:6px}.relic-rack{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-content:start;gap:4px;min-height:38px;margin-top:5px;overflow:hidden}.relic-rack p{grid-column:1/-1;padding:8px}.relic-chip{grid-template-columns:20px minmax(0,1fr);gap:3px;min-width:0;padding:4px}.relic-chip b{width:20px;height:20px;font-size:10px}.relic-chip strong{overflow:hidden;font-size:6px;text-overflow:ellipsis;white-space:nowrap}.relic-chip small{display:none}.special-label{margin-top:6px}.special-rune-slots{gap:5px;margin-top:4px}.special-slot{min-height:39px;padding:5px}.special-slot strong{margin:1px 0;font-size:7px}.special-slot span{font-size:6px}
  .activity-feed{height:100%;padding:11px;border-radius:14px;overflow:hidden}.activity-feed #activityFeed{gap:5px;margin-top:7px}.feed-line{font-size:7px;line-height:1.3}
  .mobile-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;min-height:45px;padding-top:6px}.mobile-nav button{display:flex;align-items:center;justify-content:center;gap:5px;border:1px solid var(--line);border-radius:11px;color:var(--muted);background:rgba(255,255,255,.035);font-size:8px;font-weight:800}.mobile-nav button span{font-size:11px}.mobile-nav button.active{color:#211707;border-color:rgba(243,200,106,.5);background:var(--gold)}
  .modal-backdrop{place-items:center;padding:6px}.modal{max-height:calc(100dvh - 12px);padding:13px;border-radius:17px;overflow:hidden}.modal h2{margin:3px 0;font-size:16px}.modal>p{margin-bottom:8px;font-size:7px}.relic-choices{gap:5px}.relic-choice{grid-template-columns:34px 1fr;gap:7px;padding:7px}.relic-choice b{width:33px;height:33px;font-size:15px}.relic-choice strong{font-size:9px}.relic-choice p{font-size:7px}.relic-choice em{margin-top:2px;font-size:6px}.auto-choice{margin-top:7px}.return-scenes{gap:4px;margin:8px 0}.return-scene{padding:6px 6px 6px 24px}.return-loot{margin-bottom:8px}.primary-button{min-height:39px}.toast{bottom:calc(54px + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important}}