:root {
  color-scheme: dark;
  --ink: #f7f1df;
  --muted: #a9bbb8;
  --night: #09191e;
  --deep: #10262d;
  --panel: #16313a;
  --panel-2: #1b3c42;
  --line: #31525a;
  --mint: #82ddcf;
  --mint-dark: #246f73;
  --cream: #ffe7ac;
  --gold: #efb85f;
  --coral: #f07466;
  --danger: #e95c62;
  --green: #83d5a5;
  --shadow: #020c0f99;
}

* { box-sizing: border-box; }

html,
body {
  margin: 0;
  min-height: 100%;
  background: #041014;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Segoe UI", sans-serif;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}

body { display: grid; place-items: center; }
button, input { font: inherit; }
button { cursor: pointer; -webkit-user-select: none; user-select: none; }
button:focus-visible, input:focus-visible, a:focus-visible, canvas:focus-visible { outline: 3px solid #fff7d4; outline-offset: 3px; }
[hidden] { display: none !important; }
.svg-defs { position: fixed; width: 0; height: 0; overflow: hidden; }
svg { display: block; }

.game-shell {
  position: relative;
  width: min(100vw, 430px);
  min-height: 100svh;
  background:
    radial-gradient(circle at 90% 4%, #3d756b33 0, transparent 28%),
    radial-gradient(circle at 5% 25%, #7e4e7230 0, transparent 27%),
    linear-gradient(165deg, #142f36, var(--night) 66%);
  box-shadow: 0 0 80px #000a;
  overflow: hidden;
  isolation: isolate;
}

.game-shell::before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .12;
  background-image:
    linear-gradient(120deg, transparent 48%, #d5fff207 49%, transparent 50%),
    linear-gradient(30deg, transparent 48%, #d5fff205 49%, transparent 50%);
  background-size: 26px 26px;
}

.topbar {
  height: calc(64px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px)));
  padding: calc(9px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px))) 15px 7px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.brand, .top-actions { display: flex; align-items: center; gap: 10px; }
.brand-mark {
  position: relative;
  width: 40px;
  height: 40px;
  flex: none;
  border: 1px solid #d9fff25c;
  border-radius: 11px 11px 15px 11px;
  background: #10282f url("icons/icon-192.png") center / cover no-repeat;
  box-shadow: 0 7px 18px #00101470;
  overflow: hidden;
}
.brand-mark::before, .brand-mark::after, .brand-mark i, .brand-mark b { display: none; }
.brand-mark::before { width: 6px; height: 29px; top: 5px; left: 17px; border-radius: 6px; background: #ffe2a0; transform: rotate(36deg); box-shadow: 0 0 8px #ffdb7d80; }
.brand-mark::after { width: 6px; height: 29px; top: 5px; left: 17px; border-radius: 6px; background: #9be9dd; transform: rotate(-36deg); }
.brand-mark i { width: 26px; height: 5px; left: 7px; top: 18px; border-radius: 5px; background: #e9c278; }
.brand-mark b { width: 7px; height: 7px; left: 16px; top: 15px; border-radius: 50%; background: #fff8db; }
.brand > div { min-width: 0; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 18px; line-height: 1.1; letter-spacing: -.8px; }
.brand small, .score-box small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.score-box { min-width: 66px; text-align: right; }
.score-box strong { display: block; margin-top: -1px; color: var(--cream); font-size: 20px; line-height: 1; font-variant-numeric: tabular-nums; }
.icon-button, .pause-button {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid #c8fff025;
  border-radius: 14px;
  background: #dffdf80b;
  color: #dff8f1;
}
.icon-button svg, .pause-button svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.lobby {
  height: calc(100svh - 64px - var(--safe-area-inset-top, env(safe-area-inset-top, 0px)));
  padding: 2px 14px max(20px, var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));
  overflow-y: auto;
  scrollbar-width: none;
}
.lobby::-webkit-scrollbar { display: none; }

.hero-banner {
  position: relative;
  min-height: 160px;
  overflow: hidden;
  border: 1px solid #9ce9d326;
  border-radius: 24px 24px 8px 24px;
  --hero-accent: #69b8dc;
  background: linear-gradient(145deg, #173d47, #0b2229 72%);
  box-shadow: 0 15px 32px #0004;
}
.hero-banner[data-hero="striker"] { --hero-accent: #82bd72; }
.hero-banner[data-hero="guardian"] { --hero-accent: #d26d6c; }
.hero-banner::before { content: ""; position: absolute; width: 178px; height: 178px; right: -27px; bottom: -59px; border-radius: 50%; background: color-mix(in srgb, var(--hero-accent) 27%, transparent); filter: blur(4px); }
.hero-banner::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, #0b2027f5 0, #0b2027d4 43%, #0b202744 70%, transparent 100%); }
.banner-scene { position: absolute; inset: 0; overflow: hidden; }
.banner-moon { position: absolute; top: 21px; right: 31px; width: 31px; height: 31px; border-radius: 50%; background: #fff1ba; box-shadow: 0 0 23px #ffe28b70; }
.banner-ridge { position: absolute; right: -12px; bottom: 28px; width: 245px; height: 92px; clip-path: polygon(0 75%, 18% 40%, 32% 57%, 49% 21%, 68% 52%, 82% 33%, 100% 57%, 100% 100%, 0 100%); background: #163239; opacity: .96; }
.banner-road { position: absolute; right: 30px; bottom: -18px; width: 168px; height: 112px; border: solid var(--hero-accent); border-width: 0 0 8px 25px; border-radius: 0 0 0 100%; opacity: .42; transform: rotate(-23deg); }
.banner-exit { position: absolute; top: 29px; right: 91px; width: 18px; height: 35px; border-radius: 55% 55% 45% 45%; background: linear-gradient(#d7fff7, var(--hero-accent)); box-shadow: 0 0 19px var(--hero-accent); transform: rotate(18deg); }
.banner-hero-portrait { position: absolute; z-index: 1; right: 0; bottom: -5px; width: 149px; height: 158px; filter: drop-shadow(0 11px 9px #0008); }
.banner-hero-portrait canvas, .banner-hero-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.banner-hero-fallback svg { width: 100%; height: 100%; }
.banner-copy { position: absolute; z-index: 1; top: 17px; left: 17px; max-width: 205px; }
.banner-copy small { color: var(--mint); font-size: 11px; font-weight: 800; }
.banner-copy h1 { margin: 5px 0 6px; font-size: 27px; line-height: 1; letter-spacing: -1.5px; }
.banner-copy p { margin: 0; color: #d7e5df; font-size: 12px; line-height: 1.5; }
.map-code { position: absolute; z-index: 2; bottom: 12px; left: 17px; padding: 0; border: 0; background: transparent; color: #e6c985; font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; text-shadow: 0 1px 5px #000; }
.hero-banner:has(.record-row:not([hidden])) .map-code { top: 12px; right: 12px; bottom: auto; left: auto; }
.record-row { position: absolute; z-index: 2; right: 11px; bottom: 10px; left: 11px; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.record-row span { padding: 7px 8px 5px; border: 0; border-top: 1px solid #d8fff326; border-radius: 0; background: linear-gradient(#06171b00, #06171bb5); color: #a8bbb7; font-size: 11px; }
.record-row b { float: right; color: var(--ink); font-size: 12px; font-variant-numeric: tabular-nums; }

.challenge-copy { margin: 9px 0 0; padding: 10px 12px; border: 1px solid #edc4774b; border-radius: 13px; background: #e8ae4f14; color: #ffe1a2; font-size: 12px; font-weight: 700; line-height: 1.45; }

.connection-card {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 10px 0;
  min-height: 54px;
  padding: 8px 9px;
  border: 1px solid #d8fff312;
  border-radius: 12px;
  background: #06171b66;
}
.connection-card.is-loading { border-color: #78d8d138; background: #65d4ce0b; }
.connection-card.is-local {
  min-height: 44px;
  margin: 4px 0 2px;
  padding: 0 2px;
  border-color: transparent;
  background: transparent;
}
.connection-orb { width: 12px; height: 12px; flex: none; border: 3px solid #0e312b; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px #77d4aa1b, 0 0 12px #77d4aa66; }
.is-loading .connection-orb { border-color: #123437; background: var(--mint); animation: breathe 1.2s ease-in-out infinite; }
.is-local .connection-orb { width: 9px; height: 9px; border-width: 2px; border-color: #2e3b3c; background: #8b9895; box-shadow: none; }
.connection-copy { min-width: 0; flex: 1; }
.connection-copy strong, .connection-copy small { display: block; }
.connection-copy strong { font-size: 12px; }
.connection-copy small { margin-top: 2px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.is-local .connection-copy strong { color: #c5d0cd; font-size: 11px; }
.is-local .connection-copy small { margin-top: 0; color: #879996; }
.mini-button { min-width: 68px; min-height: 44px; padding: 7px 8px; border: 1px solid #ffffff24; border-radius: 11px; background: #ffffff0c; color: var(--ink); font-size: 11px; font-weight: 800; }
.name-field { width: 116px; flex: none; color: #b7c6c3; font-size: 11px; }
.name-field span { display: block; margin: 0 0 3px 2px; }
.name-field input { width: 100%; height: 44px; padding: 6px 8px; border: 1px solid #cefff126; border-radius: 10px; outline: none; background: #06171caa; color: var(--ink); font-size: 12px; font-weight: 700; }

.mission-card { display: grid; grid-template-columns: 42px minmax(0, 1fr) 54px; align-items: center; gap: 10px; margin: 10px 0 2px; padding: 10px 10px 10px 12px; border: 0; border-left: 3px solid #d3a556; border-radius: 3px 15px 15px 3px; background: linear-gradient(90deg, #8d643128, #1a3c3d42 72%, transparent); box-shadow: none; }
.mission-card.is-complete { border-color: #72c799; background: linear-gradient(90deg, #427f5a2d, #173b383d 72%, transparent); }
.mission-mark { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 13px; background: #e2a95224; color: var(--cream); box-shadow: inset 0 0 0 1px #f5cc7c35; }
.mission-mark svg { width: 24px; height: 24px; fill: currentColor; }
.mission-copy { min-width: 0; text-align: left; }
.mission-copy small, .mission-copy strong, .mission-copy span { display: block; }
.mission-copy small { color: var(--gold); font-size: 11px; font-weight: 900; }
.mission-copy strong { margin-top: 2px; font-size: 13px; }
.mission-copy span { margin-top: 2px; color: #c2cfcb; font-size: 11px; line-height: 1.35; }
.mission-progress { height: 5px; margin-top: 7px; overflow: hidden; border-radius: 5px; background: #071519; }
.mission-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #eeb968, #fff0ae); transition: width .25s ease-out; }
.is-complete .mission-progress i { background: linear-gradient(90deg, #58b287, #a5e2b9); }
.mission-reward { text-align: center; }
.mission-reward b, .mission-reward span, .mission-reward em { display: block; }
.mission-reward b { color: var(--cream); font-size: 15px; }
.mission-reward span { color: #baaaa0; font-size: 11px; }
.mission-reward em { margin-top: 4px; color: #d6e1dd; font-size: 11px; font-style: normal; font-weight: 800; }

.progress-card { display: grid; grid-template-columns: 48px minmax(0, 1fr) 58px 63px; align-items: center; gap: 8px; margin-top: 14px; padding: 10px 4px; border: 0; border-top: 1px solid #d7fff41b; border-bottom: 1px solid #d7fff412; border-radius: 0; background: transparent; }
.level-medal { width: 42px; height: 42px; display: grid; place-content: center; border: 1px solid #efc67866; border-radius: 15px 15px 19px 19px; background: linear-gradient(145deg, #775a31, #382b1c); text-align: center; box-shadow: inset 0 1px #fff2c83a; }
.level-medal small, .level-medal b { display: block; }
.level-medal small { color: #e9c98c; font-size: 11px; }
.level-medal b { font-size: 16px; line-height: 1.1; }
.xp-progress { min-width: 0; }
.xp-progress > span { display: flex; justify-content: space-between; align-items: baseline; }
.xp-progress b { font-size: 11px; }
.xp-progress small { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.meter { height: 7px; overflow: hidden; border: 1px solid #c8fff013; border-radius: 8px; background: #031014; }
.xp-progress .meter { margin-top: 5px; }
.meter i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #53b4ae, #9be3cf); transition: width .25s ease-out; }
.wallet { display: flex; justify-content: center; align-items: center; gap: 4px; color: var(--cream); }
.wallet svg { width: 17px; height: 17px; fill: none; stroke: var(--gold); stroke-width: 1.8; }
.wallet b { font-size: 13px; }
.streak { text-align: right; }
.streak small, .streak b { display: block; }
.streak small { color: var(--muted); font-size: 11px; }
.streak b { margin-top: 2px; color: #dce9e4; font-size: 12px; }

.picker { margin-top: 15px; }
.section-heading { min-height: 30px; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin: 0 2px 8px; }
.section-heading > div small { display: block; color: var(--mint); font-size: 11px; font-weight: 800; }
.section-heading h2 { margin: 1px 0 0; font-size: 18px; letter-spacing: -.5px; }
.section-heading p { max-width: 190px; margin: 0; color: #9fb1ae; font-size: 11px; text-align: right; line-height: 1.4; }
.choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.choice { position: relative; min-height: 156px; padding: 7px 5px 9px; overflow: hidden; border: 0; border-bottom: 3px solid #47666c; border-radius: 13px 13px 4px 4px; background: linear-gradient(180deg, #21434a9e, #10282f4d); color: var(--ink); text-align: center; box-shadow: none; }
.choice::after { content: ""; pointer-events: none; position: absolute; inset: 0; opacity: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px var(--mint); transition: opacity .15s; }
.choice.selected { border-color: var(--cream); background: linear-gradient(180deg, #315a5a, #15383e70); box-shadow: 0 7px 18px #00111570; }
.choice.selected::after { opacity: 1; }
.choice[data-hero="balanced"] { border-color: #69a8c8; background: linear-gradient(180deg, #274a61c2, #172e384d 76%); }
.choice[data-hero="striker"] { border-color: #78a66d; background: linear-gradient(180deg, #2d4a34c2, #182f344d 76%); }
.choice[data-hero="guardian"] { border-color: #bd6666; background: linear-gradient(180deg, #563035c2, #192c344d 76%); }
.choice[data-hero].selected { border-bottom-color: var(--cream); box-shadow: inset 0 0 0 2px #ffe9bd68, 0 8px 18px #00111570; }
.choice.locked { background: linear-gradient(160deg, #24383d, #132328); }
.choice .select-tag { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hero-portrait { position: relative; width: 84px; height: 88px; display: block; margin: -2px auto 1px; filter: drop-shadow(0 8px 8px #0005); }
.hero-portrait canvas, .hero-portrait-fallback { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-portrait canvas { object-fit: contain; }
.hero-portrait-fallback { display: block; }
.hero-portrait svg { width: 100%; height: 100%; }
.choice strong, .choice small, .choice .price { display: block; position: relative; z-index: 1; }
.choice strong { font-size: 15px; letter-spacing: -.35px; }
.choice small { margin-top: 3px; color: #c1d0cd; font-size: 10.5px; line-height: 1.25; }
.choice .hero-role { width: max-content; margin: 4px auto 0; padding: 0; border-radius: 0; background: transparent; color: #bceaff; font-weight: 900; }
.choice[data-hero="striker"] .hero-role { background: transparent; color: #ccebbe; }
.choice[data-hero="guardian"] .hero-role { background: transparent; color: #ffd0c9; }
.choice .price { margin-top: 5px; color: var(--cream); font-size: 11px; font-weight: 900; }
.choice .hero-record { position: relative; z-index: 1; display: block; margin-top: 5px; color: var(--cream); font-size: 10px; font-style: normal; font-weight: 800; }
.trails .choice { min-height: 98px; padding-top: 13px; }
.trail-swatch { position: relative; width: 70%; height: 10px; margin: 5px auto 13px; border: 2px solid #ffffff56; border-radius: 8px 100% 8px 100%; transform: rotate(-7deg); box-shadow: 0 0 15px currentColor; }
.trail-swatch::after { content: ""; position: absolute; width: 5px; height: 5px; top: -7px; right: 10%; border-radius: 50%; background: currentColor; box-shadow: -18px 13px currentColor, 12px 10px currentColor; }

.lobby-actions { display: grid; gap: 8px; margin-top: 15px; }
.primary, .secondary, .text-button, .danger-button { min-height: 48px; border-radius: 15px; color: var(--ink); font-weight: 900; }
.primary { border: 1px solid #ffe8b492; background: linear-gradient(150deg, #f2c36f, #c77b45); color: #261b0d; box-shadow: inset 0 1px #fff1ce, 0 9px 25px #bd6e3852; }
.primary > span, .primary > small { display: block; }
.primary > span { font-size: 15px; }
.primary > small { margin-top: 3px; opacity: .76; font-size: 11px; }
.secondary { display: flex; justify-content: center; align-items: center; gap: 7px; border: 1px solid #d4fff126; background: #c9fdf20b; font-size: 12px; }
.secondary svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.text-button { border: 0; background: transparent; color: var(--mint); font-size: 11px; }
.primary:disabled { opacity: .55; box-shadow: none; }

.leaderboard-panel { margin-top: 13px; padding: 12px; border: 1px solid #d5fff21a; border-radius: 17px; background: #06171ba6; text-align: left; }
.leaderboard-mine { margin: 0 0 7px; padding: 8px 9px; border-radius: 10px; background: #80daca12; color: #aee9dd; font-size: 11px; font-weight: 800; }
.leaderboard-list { max-height: 212px; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.leaderboard-list li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 7px; align-items: center; min-height: 40px; padding: 6px 4px; border-top: 1px solid #effff20e; color: #ccd9d5; font-size: 11px; }
.leaderboard-list li:first-child { border-top: 0; }
.leaderboard-list .rank { color: var(--cream); font-weight: 900; }
.leaderboard-list .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leaderboard-list .board-score { color: var(--ink); font-weight: 900; font-variant-numeric: tabular-nums; }
.leaderboard-empty { margin: 8px 0 0; color: #9fb0ad; font-size: 11px; text-align: center; }

.play-view { height: calc(100svh - 64px - var(--safe-area-inset-top, env(safe-area-inset-top, 0px))); padding: 0 8px max(3px, var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))); overflow: hidden; }
.battle-head { height: 42px; padding: 0 3px 5px 7px; display: flex; align-items: center; justify-content: space-between; }
.wave-progress { display: grid; grid-template-columns: repeat(3, 24px) auto; align-items: center; gap: 5px; }
.wave-progress span { height: 5px; border-radius: 5px; background: #547077; }
.wave-progress span.active { background: var(--cream); box-shadow: 0 0 10px #efbe666b; }
.wave-progress b { margin-left: 4px; color: #d5e3df; font-size: 11px; }
.pause-button { width: 44px; height: 44px; border-radius: 12px; }
.pause-button svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }

.stats { height: 53px; margin: 0 3px 7px; padding: 6px 9px; display: flex; align-items: center; gap: 8px; border: 1px solid #d5fff218; border-radius: 15px; background: #d9fff309; }
.stat { min-width: 68px; display: flex; align-items: center; gap: 6px; padding-right: 8px; border-right: 1px solid #effff211; }
.stat:last-child { min-width: 62px; border: 0; padding-right: 0; }
.stat svg { width: 19px; height: 19px; flex: none; fill: none; stroke: var(--gold); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.stat.hp svg { fill: #f06d72; stroke: #f7a29b; }
.stat > div { min-width: 0; display: flex; flex-direction: column; }
.stat small { color: #aabbb8; font-size: 11px; }
.stat b { font-size: 13px; font-variant-numeric: tabular-nums; }
.stat.hp { flex: 1; }
.stat.hp > div { flex: 1; }
.stat.hp > b { font-size: 11px; }
.stat.hp .meter { width: 100%; min-width: 72px; margin-top: 3px; }
.stat.hp .meter i { width: 100%; background: linear-gradient(90deg, #d74e5c, #ef8b78); }

.arena-wrap { position: relative; width: 100%; max-height: calc(100svh - 204px - var(--safe-area-inset-top, env(safe-area-inset-top, 0px)) - var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))); aspect-ratio: 390 / 556; margin: 0 auto; overflow: hidden; border: 2px solid #38565a; border-radius: 24px; background: #172b2c; box-shadow: inset 0 0 40px #0009, 0 13px 35px #0008; }
canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.phase-card { pointer-events: none; position: absolute; z-index: 3; top: 12px; left: 50%; width: min(266px, 74%); padding: 8px 14px; transform: translateX(-50%); border: 1px solid #dff8ee30; border-radius: 14px; background: #07181dda; box-shadow: 0 8px 24px #0008; text-align: center; backdrop-filter: blur(8px); }
.phase-card small, .phase-card strong, .phase-card span { display: block; }
.phase-card small { color: var(--mint); font-size: 11px; font-weight: 800; }
.phase-card strong { margin: 3px 0; font-size: 15px; }
.phase-card span { color: #c3cfcc; font-size: 12px; line-height: 1.4; }
.phase-card .route-forecast { margin-top: 6px; padding-top: 6px; border-top: 1px solid #dff8ee1c; color: #f6e0a8; font-size: 11px; font-weight: 900; }
.phase-card .route-forecast.is-risky { color: #ffab9f; }
.timer { position: absolute; z-index: 4; top: 15px; right: 12px; width: 40px; height: 40px; display: none; place-items: center; border: 3px solid #fff1ce; border-radius: 50%; background: #c64c54; box-shadow: 0 6px 18px #a8324d88; color: white; font-size: 18px; font-weight: 900; }
.gesture-guide { pointer-events: none; position: absolute; z-index: 2; inset: 0; opacity: .82; }
.gesture-guide i { position: absolute; left: 48px; bottom: 50px; width: 210px; height: 265px; border: 4px dashed #fff0b877; border-width: 0 4px 0 0; border-radius: 50%; transform: rotate(24deg); }
.gesture-guide span { position: absolute; left: 35px; bottom: 35px; width: 24px; height: 30px; border-radius: 13px 13px 9px 9px; background: #fff1d7; box-shadow: 0 0 0 5px #ffe4a926, 0 8px 16px #0005; animation: guide 1.8s ease-in-out infinite; }
.start-button { position: absolute; z-index: 5; bottom: 20px; left: 50%; min-width: 156px; min-height: 49px; padding: 12px 23px; transform: translateX(-50%); border: 1px solid #fff0c9a8; border-radius: 16px; background: linear-gradient(150deg, #f2c36f, #c87b44); box-shadow: inset 0 1px #fff3d0, 0 9px 26px #9b503d80; color: #2c1c0d; font-size: 14px; font-weight: 900; animation: startPulse 1.6s ease-in-out infinite; }
.toast { pointer-events: none; position: absolute; z-index: 7; bottom: 79px; left: 50%; max-width: 86%; padding: 10px 14px; opacity: 0; transform: translate(-50%, 10px); border: 1px solid #e9fff42c; border-radius: 18px; background: #06171bee; box-shadow: 0 6px 18px #0008; color: #f8f1dc; font-size: 12px; font-weight: 800; text-align: center; transition: opacity .16s, transform .16s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.tactic-panel { position: absolute; z-index: 8; inset: auto 12px 16px; padding: 16px 14px 14px; border: 1px solid #ffe1a85c; border-radius: 20px 20px 8px 20px; background: linear-gradient(155deg, #342d25f5, #102b31f5 70%); box-shadow: 0 18px 42px #000b; text-align: left; backdrop-filter: blur(10px); }
.tactic-panel::before { display: none; }
.tactic-panel > small { color: var(--gold); font-size: 11px; font-weight: 900; }
.tactic-panel h2 { margin: 3px 0 2px; font-size: 20px; letter-spacing: -.7px; }
.tactic-panel p { margin: 0 0 11px; color: #c9d5d1; font-size: 11px; }
.tactic-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tactic-choice { position: relative; min-height: 98px; padding: 12px 9px 10px 12px; overflow: hidden; border: 0; border-left: 3px solid #6ea99f; border-radius: 4px 12px 12px 4px; background: #07191d99; color: var(--ink); text-align: left; }
.tactic-choice > span { width: 31px; height: 31px; display: block; margin-bottom: 9px; border: 2px solid currentColor; border-radius: 50% 50% 44% 56%; color: var(--mint); box-shadow: inset 0 0 0 5px #77dace12; }
.tactic-choice strong, .tactic-choice small { position: relative; z-index: 1; display: block; }
.tactic-choice strong { font-size: 13px; }
.tactic-choice small { margin-top: 4px; color: #bccbc8; font-size: 11px; line-height: 1.35; }
.tactic-choice.tactic-whetstone > span { border-radius: 3px 90% 3px 90%; transform: rotate(-22deg); color: #efc273; }
.tactic-choice.tactic-shieldline > span { clip-path: polygon(50% 0, 94% 17%, 84% 75%, 50% 100%, 16% 75%, 6% 17%); border-radius: 0; color: #8fd4d6; }
.tactic-choice.tactic-fieldkit > span { border-color: #8ddeaa; box-shadow: inset 0 0 0 7px #2b6b4c; }
.tactic-choice.tactic-vanguard > span { border-width: 0 0 3px 3px; border-radius: 0; transform: skew(-17deg) rotate(-35deg); color: #ef8e72; }
.legend { min-height: 38px; display: flex; justify-content: center; align-items: center; gap: 8px; color: #b8c7c4; font-size: 11px; }
.legend span { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.legend i { position: relative; width: 11px; height: 11px; display: inline-block; }
.legend-rune { border: 2px solid #77d9d0; transform: rotate(45deg); }
.legend-rune::after { content: ""; position: absolute; width: 2px; height: 7px; left: 3px; top: 0; background: #d9fff7; }
.legend-heal { border: 2px solid #7ed19d; border-radius: 50% 50% 45% 45%; background: #2d7559; }
.legend-chest { border: 2px solid #e5b35c; border-radius: 3px; background: #6f482a; }
.legend-spike { clip-path: polygon(50% 0,100% 100%,0 100%); background: var(--coral); }

.result { position: absolute; z-index: 10; inset: 0; padding: max(25px, var(--safe-area-inset-top, env(safe-area-inset-top, 0px))) 17px max(18px, var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))); display: flex; flex-direction: column; overflow-y: auto; background: radial-gradient(circle at 50% 4%, #3a6761 0, #153139 28%, #07171c 75%); text-align: center; }
.result::before { content: ""; pointer-events: none; position: absolute; inset: 0; opacity: .09; background-image: radial-gradient(circle, #c6fff2 1px, transparent 1px); background-size: 27px 27px; }
.result > * { flex: none; }
.result > small { order: 1; }
.result > h1 { order: 2; }
.result > p { order: 3; }
.result-highlight { order: 4; }
.final-score { order: 5; }
.verification-card, .opponent-compare { order: 6; }
.result-actions { order: 7; }
.level-reward { order: 8; }
.result-mission { order: 9; }
.next-goal { order: 10; }
.result-details { order: 11; }
.share-status { order: 12; }
.result > small { position: relative; color: var(--mint); font-size: 11px; font-weight: 900; }
.result h1 { position: relative; margin: 4px 0 0; font-size: 28px; letter-spacing: -1.2px; }
.result > p { position: relative; margin: 4px 0 11px; color: #c7d3d0; font-size: 12px; line-height: 1.45; }
.result-highlight { position: relative; display: grid; grid-template-columns: minmax(132px, .95fr) minmax(0, 1.05fr); gap: 4px; min-height: 142px; margin-bottom: 4px; overflow: hidden; border: 1px solid #d9fff21c; border-radius: 24px 24px 8px 24px; background: linear-gradient(145deg, #31575c8c, #07191dc9 72%); box-shadow: 0 13px 30px #0004; }
.result-hero-card, .result-path-card { overflow: hidden; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.result-hero-card { position: relative; min-width: 0; }
.result-hero-card::after { content: ""; position: absolute; right: -29px; bottom: -44px; width: 122px; height: 122px; border-radius: 50%; background: #82ded12b; }
.result-hero-portrait { position: absolute; z-index: 1; top: -8px; right: -1px; bottom: 16px; left: -1px; filter: drop-shadow(0 10px 10px #0009); }
.result-hero-portrait canvas, .result-hero-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.result-hero-fallback svg { width: 100%; height: 100%; }
.result-hero-copy { position: absolute; z-index: 2; right: 8px; bottom: 8px; left: 9px; padding: 16px 2px 1px; border-radius: 0; background: linear-gradient(transparent, #05171bd9 58%); text-align: left; text-shadow: 0 1px 4px #000; }
.result-hero-copy strong, .result-hero-copy small { display: block; }
.result-hero-copy strong { font-size: 13px; }
.result-hero-copy small { margin-top: 1px; color: var(--mint); font-size: 10px; }
.final-score { position: relative; padding: 10px 12px 9px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.final-score span, .final-score strong { display: block; }
.final-score span { color: #b3c3c0; font-size: 11px; }
.final-score strong { color: var(--cream); font-size: 37px; line-height: 1.08; font-variant-numeric: tabular-nums; }
.final-score em { display: inline-block; padding: 2px 0; border-radius: 0; border-bottom: 2px solid #e7bd68; background: transparent; color: var(--cream); font-size: 11px; font-style: normal; font-weight: 900; }
.verification-card { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 8px; margin-top: 0; padding: 8px 5px; border: 0; border-top: 1px solid #78d5a531; border-bottom: 1px solid #78d5a51d; border-radius: 0; background: transparent; text-align: left; }
.verification-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: var(--green); color: #153326; }
.verification-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.verification-card strong, .verification-card small { display: block; }
.verification-card strong { font-size: 12px; }
.verification-card small { margin-top: 2px; color: #b9c8c5; font-size: 11px; line-height: 1.4; }
.verification-card > b { color: #9fe4be; font-size: 11px; }
.verification-card.is-pending { border-color: #7cd9cf31; background: transparent; }
.verification-card.is-pending .verification-icon { background: var(--mint); }
.verification-card.is-local { border-color: #e6b46031; background: transparent; }
.verification-card.is-local .verification-icon { background: var(--gold); }
.verification-card.is-failed { border-color: #e8686d3d; background: transparent; }
.verification-card.is-failed .verification-icon { background: var(--danger); color: white; }
.verification-card.is-failed > b { color: #ff9794; }
.opponent-compare { margin-top: 8px; padding: 9px; border: 1px solid #ecc2713c; border-radius: 11px; background: #e4aa4913; color: #ffe0a1; font-size: 12px; font-weight: 900; }
.level-reward { display: flex; align-items: center; gap: 9px; margin-top: 11px; padding: 8px 5px; border: 0; border-left: 3px solid #bd8bd2; border-radius: 0; background: linear-gradient(90deg, #9b6dbb17, transparent 78%); text-align: left; }
.level-reward svg { width: 27px; height: 27px; fill: #dca9ed; stroke: none; }
.level-reward strong, .level-reward small { display: block; }
.level-reward strong { font-size: 12px; }
.level-reward small { margin-top: 2px; color: #d5c3da; font-size: 11px; }
.result-mission { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; margin-top: 4px; padding: 9px 5px; border: 0; border-bottom: 1px solid #edc47724; border-radius: 0; background: transparent; text-align: left; }
.result-mission.is-complete { border-color: #82d9ac59; background: #55a97b16; }
.result-mission span small, .result-mission span strong { display: block; }
.result-mission span small { color: var(--gold); font-size: 11px; font-weight: 900; }
.result-mission span strong { margin-top: 2px; font-size: 12px; }
.result-mission > b { color: var(--ink); font-size: 12px; font-variant-numeric: tabular-nums; }
.result-mission > em { padding: 0; border-radius: 0; background: transparent; color: #f2c46c; font-size: 11px; font-style: normal; font-weight: 900; }
.next-goal { position: relative; margin-top: 0; padding: 10px 5px; border: 0; border-bottom: 1px solid #8bdacf20; border-radius: 0; background: transparent; text-align: left; }
.next-goal small, .next-goal strong, .next-goal span { display: block; }
.next-goal small { color: var(--mint); font-size: 11px; font-weight: 900; }
.next-goal strong { margin-top: 2px; font-size: 13px; }
.next-goal span { margin-top: 2px; color: #bdceca; font-size: 11px; line-height: 1.4; }
.trail-goal { display: block; margin-top: 8px; padding-top: 7px; border-top: 1px solid #c9fff219; color: var(--cream); font-size: 11px; font-style: normal; font-weight: 800; }
.result-details { position: relative; margin-top: 8px; border: 1px solid #dffff216; border-radius: 13px; background: #0312167a; text-align: left; }
.result-details summary { min-height: 44px; padding: 13px 14px; color: #bfd0cc; font-size: 12px; font-weight: 800; cursor: pointer; }
.result-details[open] summary { border-bottom: 1px solid #dffff210; }
.record-route { margin: 8px 8px 0; padding: 8px 9px; display: flex; justify-content: space-between; gap: 8px; border-radius: 9px; background: #e5fff207; color: #b9cbc7; font-size: 10px; line-height: 1.4; }
.record-route span { min-width: 0; }
.record-route b { flex: none; color: #dbe8e4; font-variant-numeric: tabular-nums; }
.result-details .score-breakdown, .result-details .reward-row { margin: 8px; }
.result-details .result-board { margin: 8px; }
.result-board { position: relative; max-height: 145px; margin-top: 8px; padding: 8px 10px; overflow: hidden; }
.result-board .leaderboard-list { max-height: 94px; }
.result-board .leaderboard-list li { min-height: 30px; }
.score-breakdown { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border: 1px solid #e6fff20d; border-radius: 13px; background: #0413178c; }
.score-breakdown span { min-height: 34px; padding: 7px 8px; display: flex; align-items: center; justify-content: space-between; border-right: 1px solid #e6fff20c; border-bottom: 1px solid #e6fff20c; color: #aebdb9; font-size: 11px; }
.score-breakdown b { color: var(--ink); font-size: 12px; }
.path-card { padding: 7px; border: 1px solid #e6fff20d; border-radius: 13px; background: #0413178c; }
.path-card small { color: #b5c4c1; font-size: 11px; }
.path-card canvas { height: 80px; margin-top: 3px; border-radius: 7px; }
.result-path-card { padding: 13px 11px 9px 4px; text-align: left; }
.result-path-card small { display: block; color: #d2e5df; font-weight: 900; }
.path-card-head { min-height: 16px; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.route-compare-legend { display: inline-flex; align-items: center; gap: 3px; color: #d8ddd2; font-size: 10px; font-weight: 800; white-space: nowrap; }
.route-compare-legend[hidden] { display: none; }
.route-compare-legend i { width: 12px; height: 0; border-top: 2px solid #80daca; }
.route-compare-legend i.friend { margin-left: 3px; border-color: #e7bd68; border-top-style: dashed; }
.result-path-card canvas { height: 104px; margin-top: 5px; border: 0; border-radius: 9px; }
.reward-row { position: relative; display: grid; grid-template-columns: .7fr .7fr 1.6fr; margin-top: 8px; overflow: hidden; border: 1px solid #e6fff20d; border-radius: 12px; background: #e9fff208; }
.reward-row span { padding: 9px 4px; border-right: 1px solid #e8fff20d; color: #acbcb8; font-size: 11px; }
.reward-row span:last-child { border: 0; }
.reward-row b { display: block; margin-top: 2px; color: var(--ink); font-size: 11px; }
.share-status { position: relative; min-height: 18px; margin: 6px 0 0 !important; color: #a9e8dc !important; font-size: 11px !important; overflow-wrap: anywhere; }
.result-actions { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 9px; }
.result-actions .primary, .result-actions .text-button { grid-column: 1 / -1; }
.result-actions button { min-height: 48px; padding: 8px; font-size: 12px; }

.modal-layer { position: absolute; z-index: 30; inset: 0; display: grid; place-items: end center; padding: 18px 14px max(18px, var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))); background: #020b0eca; backdrop-filter: blur(8px); }
.modal-card { position: relative; width: 100%; padding: 23px 18px 18px; border: 1px solid #d7fff22a; border-radius: 25px; background: linear-gradient(165deg, #23434a, #10282f); box-shadow: 0 22px 60px #000b, inset 0 1px #ffffff10; text-align: center; }
.modal-card > small { color: var(--mint); font-size: 11px; font-weight: 900; }
.modal-card h2 { margin: 4px 0 8px; font-size: 23px; letter-spacing: -.8px; }
.modal-card p { margin: 0 0 17px; color: #c5d1ce; font-size: 13px; line-height: 1.6; }
.modal-close { position: absolute; z-index: 2; top: 10px; right: 10px; width: 44px; height: 44px; border: 0; border-radius: 14px; background: #ffffff0a; color: #d7e8e4; font-size: 24px; }
.tutorial-card { padding-top: 18px; }
.tutorial-art { position: relative; height: 185px; margin-bottom: 10px; overflow: hidden; border: 1px solid #dafff21b; border-radius: 19px; background: linear-gradient(#315159, #142e35); }
.tutorial-art::before { content: ""; position: absolute; inset: 0; background-size: cover; background-position: center; }
.tutorial-art.step-1::before { background: radial-gradient(circle at 80% 18%, #a6efe244 0 18px, transparent 19px), linear-gradient(132deg, transparent 55%, #87ded075 56% 58%, transparent 59%), radial-gradient(circle at 20% 78%, #e9b66a 0 18px, #6d5231 19px 23px, transparent 24px); }
.tutorial-art.step-1::after { content: ""; position: absolute; width: 29px; height: 36px; left: 18%; bottom: 13%; border-radius: 16px 16px 10px 10px; background: #fff0d2; animation: guide 1.8s ease-in-out infinite; }
.tutorial-art.step-2::before { background: radial-gradient(circle at 20% 65%, #73d7ca 0 15px, #255c60 16px 21px, transparent 22px), radial-gradient(circle at 51% 35%, #efb65f 0 16px, #68472d 17px 22px, transparent 23px), radial-gradient(circle at 81% 67%, #78cb97 0 16px, #265b47 17px 22px, transparent 23px); }
.tutorial-art.step-2::after { content: ""; position: absolute; left: 17%; right: 17%; top: 54%; height: 4px; border-radius: 4px; background: linear-gradient(90deg, #7ee0d5, #f1bb67, #7ac998); transform: rotate(-6deg); box-shadow: 0 0 16px #8ce4d099; }
.tutorial-art.step-3::before { background: linear-gradient(132deg, transparent 44%, #7fd8ca75 45% 47%, transparent 48%), linear-gradient(60deg, transparent 43%, #e96e633b 44% 52%, transparent 53%), radial-gradient(ellipse at 68% 35%, #b5444d 0 22px, #4c2631 23px 30px, transparent 31px); }
.tutorial-art.step-3::after { content: ""; position: absolute; width: 75px; height: 25px; right: 9%; top: 16%; border: 3px solid #ffdf9d; border-width: 3px 0 0; border-radius: 50%; transform: rotate(-24deg); }
.step-dots { color: var(--cream) !important; letter-spacing: 2px; }
.tutorial-card .primary { width: 100%; }
.pause-card .primary, .pause-card .secondary, .pause-card .text-button { width: 100%; margin-top: 8px; }
.pause-mark { width: 60px; height: 60px; margin: 0 auto 8px; display: grid; place-items: center; border: 1px solid #e9c17563; border-radius: 50%; background: #795b3033; color: var(--cream); }
.pause-mark svg { width: 25px; height: 25px; fill: currentColor; }
.settings-card { text-align: left; }
.settings-card h2 { font-size: 25px; }
.setting-list { margin: 14px 0; overflow: hidden; border: 1px solid #e5fff218; border-radius: 16px; }
.setting-row { width: 100%; min-height: 54px; padding: 8px 12px; display: flex; align-items: center; justify-content: space-between; border: 0; border-bottom: 1px solid #e5fff212; background: #e5fff207; color: var(--ink); }
.setting-row:last-child { border: 0; }
.setting-row span { display: flex; align-items: center; gap: 10px; }
.setting-row svg { width: 20px; height: 20px; fill: none; stroke: var(--mint); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.setting-row i { position: relative; width: 44px; height: 25px; border-radius: 16px; background: #526568; transition: background .15s; }
.setting-row i::after { content: ""; position: absolute; width: 19px; height: 19px; top: 3px; left: 3px; border-radius: 50%; background: white; transition: transform .15s; }
.setting-row[aria-pressed="true"] i { background: #4fac9f; }
.setting-row[aria-pressed="true"] i::after { transform: translateX(19px); }
.settings-card .wide { width: 100%; }
.legal-links { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 13px; }
.legal-links a { min-height: 44px; padding: 8px; display: grid; place-items: center; border: 1px solid #e4fff216; border-radius: 11px; color: #c4ddd8; font-size: 11px; text-decoration: none; text-align: center; }
.legal-links a:last-child { grid-column: 1 / -1; }
.danger-text { width: 100%; min-height: 44px; margin-top: 6px; border: 0; background: transparent; color: #ffaaa6; font-size: 11px; }
.confirm-layer { z-index: 40; place-items: center; }
.confirm-card { max-width: 340px; }
.confirm-card .danger-button, .confirm-card .secondary { width: 100%; margin-top: 8px; }
.danger-button { border: 1px solid #ff9c9c58; background: linear-gradient(150deg, #d85c62, #a23f4b); color: white; }

@keyframes breathe { 50% { opacity: .45; transform: scale(.82); } }
@keyframes guide { 50% { transform: translate(150px, -245px) rotate(-8deg); opacity: .6; } }
@keyframes startPulse { 50% { transform: translateX(-50%) scale(1.025); box-shadow: inset 0 1px #fff3d0, 0 11px 31px #bc68498c; } }
@keyframes orbit { 50% { transform: rotate(45deg) scale(1.18); } }

@media (max-width: 374px) {
  .topbar { padding-right: 11px; padding-left: 11px; }
  .lobby { padding-right: 10px; padding-left: 10px; }
  .hero-banner { min-height: 156px; }
  .banner-copy { left: 14px; }
  .banner-copy h1 { font-size: 25px; }
  .progress-card { grid-template-columns: 45px minmax(0, 1fr) 50px 57px; gap: 5px; }
  .choice-grid { gap: 6px; }
  .choice { min-height: 151px; padding-right: 2px; padding-left: 2px; }
  .hero-portrait { width: 80px; height: 84px; }
  .choice small { font-size: 11px; }
  .legend { gap: 6px; font-size: 11px; }
  .result { padding-right: 13px; padding-left: 13px; }
  .mission-card { grid-template-columns: 38px minmax(0, 1fr) 49px; gap: 7px; padding-right: 8px; padding-left: 8px; }
  .mission-mark { width: 37px; height: 37px; }
  .result-mission { grid-template-columns: minmax(0, 1fr) auto; }
  .result-mission > em { grid-column: 2; }
}

@media (max-height: 760px) {
  .topbar { height: calc(58px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px))); padding-top: calc(6px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px))); }
  .brand-mark { width: 36px; height: 36px; }
  .brand-mark::before, .brand-mark::after { height: 26px; top: 5px; left: 15px; }
  .brand-mark i { width: 24px; left: 6px; top: 16px; }
  .brand-mark b { left: 14px; top: 13px; }
  .lobby, .play-view { height: calc(100svh - 58px - var(--safe-area-inset-top, env(safe-area-inset-top, 0px))); }
  .hero-banner { min-height: 150px; }
  .picker { margin-top: 11px; }
  .choice { min-height: 150px; }
  .hero-portrait { width: 78px; height: 81px; }
  .trails .choice { min-height: 96px; }
  .arena-wrap { max-height: calc(100svh - 193px - var(--safe-area-inset-top, env(safe-area-inset-top, 0px)) - var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))); }
  .legend { min-height: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition-duration: .01ms !important; }
}

.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { scroll-behavior: auto !important; animation: none !important; transition-duration: .01ms !important; }

/* 2026-09-05: expedition ledger direction */
:root {
  --ink: #f1e8d2;
  --muted: #aaa99d;
  --night: #111713;
  --deep: #18221d;
  --panel: #1c2922;
  --panel-2: #25332a;
  --line: #665f4c;
  --mint: #9bbcad;
  --mint-dark: #476f62;
  --cream: #ead49c;
  --gold: #d2a54f;
  --coral: #c6573f;
  --danger: #c6574f;
  --green: #8eaf7f;
  --font-ui: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --font-chronicle: "AppleMyungjo", "Nanum Myeongjo", "Noto Serif KR", serif;
}

html, body { background: #090c0a; font-family: var(--font-ui); }
button, input { font-family: var(--font-ui); }
.game-shell { background: var(--night); box-shadow: none; }
.game-shell::before { display: none; }
.topbar { height: calc(70px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px))); padding: calc(10px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px))) 16px 9px; border-bottom: 1px solid #d8cda827; }
.brand-mark { width: 38px; height: 38px; border: 0; border-radius: 0; background-color: transparent; box-shadow: none; }
.brand strong { font-family: var(--font-chronicle); font-size: 20px; font-weight: 700; letter-spacing: -.7px; }
.brand small, .score-box small { color: #969b90; font-size: 12px; }
.icon-button, .pause-button { border: 0; border-radius: 0; background: transparent; }
.lobby { height: calc(100svh - 70px - var(--safe-area-inset-top, env(safe-area-inset-top, 0px))); padding: 0 16px max(24px, var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))); }

.hero-banner { min-height: 232px; margin: 0 -16px; border: 0; border-bottom: 1px solid #d8cda82e; border-radius: 0; background: #1b2923; box-shadow: none; }
.hero-banner::before { right: -54px; bottom: -80px; width: 210px; height: 210px; border-radius: 0; background: color-mix(in srgb, var(--hero-accent) 16%, transparent); filter: none; transform: rotate(18deg); }
.hero-banner::after { background: linear-gradient(90deg, #111713 0, #111713e8 42%, transparent 78%); }
.banner-moon { top: 26px; right: 42px; width: 48px; height: 48px; box-shadow: none; }
.banner-ridge { bottom: 22px; height: 105px; background: #24342d; }
.banner-road { border-width: 0 0 5px 17px; opacity: .5; }
.banner-exit { border-radius: 0; background: var(--cream); box-shadow: 0 0 18px #e8d29370; }
.banner-hero-portrait { right: -2px; bottom: -5px; width: 205px; height: 218px; }
.banner-copy { top: 26px; left: 17px; max-width: 215px; }
.banner-copy small { color: #b9c9bb; font-size: 12px; font-weight: 700; }
.banner-copy h1 { margin: 9px 0 8px; font-family: var(--font-chronicle); font-size: 40px; font-weight: 700; line-height: 1.03; letter-spacing: -2.3px; }
.banner-copy h1, .section-heading h2, .result h1, .modal-card h2 { word-break: keep-all; }
.banner-copy p { max-width: 180px; color: #cbc8bb; font-size: 13px; line-height: 1.5; }
.map-code { bottom: 15px; left: 17px; color: var(--cream); font-size: 12px; }
.record-row { bottom: 0; right: 0; left: 0; gap: 0; }
.record-row span { padding: 9px 16px; border-top: 1px solid #d8cda82e; background: #111713cf; font-size: 12px; }

.picker { margin-top: 24px; }
.section-heading { min-height: 38px; margin: 0; padding-bottom: 9px; border-bottom: 1px solid #d8cda845; }
.section-heading h2 { font-family: var(--font-chronicle); font-size: 23px; font-weight: 700; letter-spacing: -.8px; }
.section-heading > div small, .section-heading p { color: #9b9e94; font-size: 12px; }
.choice-grid { gap: 0; }
.choice { min-height: 172px; padding: 9px 3px 11px; border: 0; border-right: 1px solid #d8cda82b; border-bottom: 3px solid transparent; border-radius: 0; background: transparent !important; box-shadow: none !important; }
.choice:first-child { border-left: 1px solid #d8cda82b; }
.choice::after { display: none; }
.choice.selected, .choice[data-hero].selected { border-bottom-color: var(--coral); background: #e7d8af0b !important; }
.hero-portrait { width: 102px; height: 108px; margin: -2px auto 1px; filter: drop-shadow(0 8px 5px #0008); }
.choice strong { font-family: var(--font-chronicle); font-size: 17px; font-weight: 700; }
.choice small { color: #b5b5aa; font-size: 12px; }
.choice .hero-role, .choice[data-hero="striker"] .hero-role, .choice[data-hero="guardian"] .hero-role { color: #cbc7b7; }

.lobby-actions { gap: 0; margin-top: 16px; border-top: 1px solid #d8cda845; }
.primary, .secondary, .text-button, .danger-button { min-height: 52px; border-radius: 0; }
.primary { border: 0; background: var(--coral); color: #fff8e7; box-shadow: none; }
.primary > span { font-family: var(--font-chronicle); font-size: 18px; }
.primary > small { font-size: 12px; }
.secondary { border: 0; border-bottom: 1px solid #d8cda82b; background: transparent; }
.text-button { color: #b7c9bd; font-size: 12px; }

.progress-card { grid-template-columns: 52px minmax(0, 1fr) 58px 63px; gap: 8px; margin-top: 17px; padding: 12px 0; border-top: 1px solid #d8cda845; border-bottom: 1px solid #d8cda845; }
.level-medal { width: auto; height: 44px; border: 0; border-right: 1px solid #d8cda83b; border-radius: 0; background: transparent; box-shadow: none; }
.level-medal small, .xp-progress b, .streak small { font-size: 12px; }
.level-medal b { font-family: Georgia, serif; font-size: 21px; }
.meter { height: 4px; border: 0; border-radius: 0; background: #070a08; }
.meter i { border-radius: 0; background: var(--coral); }

.mission-card { grid-template-columns: 34px minmax(0, 1fr) 56px; gap: 10px; margin: 0; padding: 16px 0; border: 0; border-bottom: 1px solid #d8cda845; border-radius: 0; background: transparent; }
.mission-card.is-complete { background: transparent; }
.mission-mark { width: 28px; height: 42px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.mission-mark svg { width: 22px; height: 22px; }
.mission-copy small, .mission-copy strong, .mission-copy span, .mission-reward span, .mission-reward em { font-size: 12px; }
.mission-copy strong { font-family: var(--font-chronicle); font-size: 16px; font-weight: 700; }
.mission-progress { height: 3px; border-radius: 0; background: #070a08; }
.mission-progress i { border-radius: 0; background: var(--gold); }

.connection-card, .connection-card.is-loading, .connection-card.is-local { min-height: 47px; margin: 0; padding: 0; border: 0; border-bottom: 1px solid #d8cda82b; border-radius: 0; background: transparent; }
.connection-orb { width: 7px; height: 7px; border: 0; box-shadow: none; }
.connection-copy strong, .connection-copy small, .is-local .connection-copy strong { font-size: 12px; }
.mini-button { border-radius: 0; background: transparent; }
.name-field { font-size: 12px; }
.name-field input { border: 0; border-bottom: 1px solid #d8cda845; border-radius: 0; background: transparent; }
.trails .choice { min-height: 104px; }
.trail-swatch { border-radius: 0; box-shadow: none; }
.leaderboard-panel { padding: 0; border: 0; border-top: 1px solid #d8cda845; border-radius: 0; background: transparent; }
.leaderboard-mine { border-radius: 0; background: transparent; }

.play-view { height: calc(100svh - 70px - var(--safe-area-inset-top, env(safe-area-inset-top, 0px))); background: var(--night); }
.battle-head { border-bottom: 1px solid #d8cda833; }
.stats { margin-right: 0; margin-left: 0; border: 0; border-bottom: 1px solid #d8cda833; border-radius: 0; background: transparent; }
.stat { border: 0; border-right: 1px solid #d8cda829; border-radius: 0; background: transparent; }
.arena-wrap { border-radius: 0; box-shadow: none; }
.phase-card { border: 0; border-left: 3px solid var(--cream); border-radius: 0; background: #111713e8; box-shadow: none; backdrop-filter: none; text-align: left; }
.phase-card strong { font-family: var(--font-chronicle); }
.timer { font-family: Georgia, serif; }
.start-button { border-radius: 0; background: var(--coral); box-shadow: none; animation: none; }
.tactic-panel { border: 1px solid #d8cda845; border-radius: 0; background: #151d18f2; box-shadow: none; backdrop-filter: none; }
.tactic-panel h2 { font-family: var(--font-chronicle); font-size: 24px; }
.tactic-choice { border: 0; border-top: 1px solid #d8cda845; border-radius: 0; background: transparent; }

.result { background: var(--night); text-align: left; }
.result::before { display: none; }
.result > small { color: #b2b8ab; font-size: 12px; letter-spacing: .08em; }
.result h1 { margin-top: 8px; font-family: var(--font-chronicle); font-size: 38px; font-weight: 700; letter-spacing: -1.8px; }
.result > p { color: #aaa99d; font-size: 13px; }
.result-highlight { min-height: 162px; margin: 6px 0 0; border: 0; border-top: 1px solid #d8cda845; border-bottom: 1px solid #d8cda845; border-radius: 0; background: transparent; box-shadow: none; }
.result-hero-card::after { display: none; }
.result-hero-copy { background: #111713d9; }
.result-hero-copy strong { font-family: var(--font-chronicle); font-size: 17px; }
.result-path-card canvas { border-radius: 0; }
.final-score { padding: 14px 0 10px; text-align: left; }
.final-score span { font-size: 12px; }
.final-score strong { font-family: Georgia, serif; font-size: 52px; }
.verification-card { grid-template-columns: 30px minmax(0,1fr) auto; padding: 10px 0; }
.verification-icon { width: 27px; height: 27px; border-radius: 0; }
.verification-card strong, .verification-card small, .verification-card > b { font-size: 12px; }
.opponent-compare, .result-details, .score-breakdown, .path-card, .reward-row { border-radius: 0; background: transparent; }
.next-goal strong { font-family: var(--font-chronicle); font-size: 16px; }

.modal-layer { background: #090c0ae8; backdrop-filter: none; }
.modal-card { padding: 25px 18px 18px; border: 1px solid #d8cda845; border-radius: 0; background: var(--deep); box-shadow: none; text-align: left; }
.modal-card h2 { font-family: var(--font-chronicle); font-size: 29px; }
.modal-close { border-radius: 0; background: transparent; }
.tutorial-art { border-radius: 0; }
.pause-mark { margin-left: 0; border-radius: 0; }
.setting-list { border-radius: 0; }
.setting-row { border-radius: 0; background: transparent; }
.legal-links { gap: 0; border-top: 1px solid #d8cda845; }
.legal-links a { border: 0; border-bottom: 1px solid #d8cda82b; border-radius: 0; }
.danger-button { border: 0; background: var(--danger); }

@media (max-width: 374px) {
  .lobby { padding-right: 12px; padding-left: 12px; }
  .hero-banner { min-height: 220px; margin-right: -12px; margin-left: -12px; }
  .banner-copy h1 { font-size: 36px; }
  .banner-hero-portrait { width: 190px; height: 205px; }
  .choice { min-height: 166px; }
  .hero-portrait { width: 96px; height: 101px; }
}

@media (max-height: 760px) {
  .hero-banner { min-height: 210px; }
  .choice { min-height: 164px; }
  .banner-hero-portrait { width: 187px; height: 199px; }
}

/* 2026-09-05: reference-led mobile RPG direction */
@font-face {
  font-family: "Galmuri Game";
  src: url("assets/fonts/Galmuri11.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Galmuri Game";
  src: url("assets/fonts/Galmuri11-Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --ink: #f7e7be;
  --muted: #b6aa8e;
  --night: #17241f;
  --deep: #2b211c;
  --panel: #3a2c25;
  --panel-2: #21352c;
  --line: #15100e;
  --mint: #92c8a2;
  --mint-dark: #3e765b;
  --cream: #f0d38a;
  --gold: #e8b552;
  --coral: #c94f3d;
  --danger: #bd403c;
  --green: #78a96e;
  --font-game: "Galmuri Game", "Apple SD Gothic Neo", sans-serif;
}

html, body { background: #0d1512; font-family: var(--font-game); }
button, input { font-family: var(--font-game); }
.game-shell {
  background-color: var(--night);
  background-image: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,.045) 3px 4px);
  box-shadow: 0 0 0 1px #000;
}
.game-shell::before { display: none; }
.topbar {
  height: calc(62px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px)));
  padding: calc(7px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px))) 10px 5px;
  border: 0;
  border-bottom: 4px solid #100d0b;
  background: #31231e;
  box-shadow: inset 0 -2px #594238;
}
.brand, .top-actions { gap: 8px; }
.brand-mark { width: 42px; height: 42px; border: 2px solid #0e0b09; border-radius: 2px; background-color: #13221d; box-shadow: inset 0 0 0 2px #705246; image-rendering: pixelated; }
.brand strong { font-family: var(--font-game); font-size: 16px; font-weight: 700; letter-spacing: 0; }
.brand small, .score-box small { margin-top: 2px; color: #bcae91; font-size: 12px; }
.score-box strong { font-family: var(--font-game); font-size: 18px; }
.icon-button, .pause-button { border: 2px solid #120e0c; border-radius: 2px; background: #49362d; box-shadow: inset 0 0 0 1px #76584a, 0 2px #0c0908; }

.lobby { height: calc(100svh - 62px - var(--safe-area-inset-top, env(safe-area-inset-top, 0px))); padding: 8px 10px max(16px, var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))); }
.hero-banner {
  min-height: 190px;
  margin: 0;
  border: 3px solid #100d0b;
  border-radius: 2px;
  background: #244138;
  box-shadow: inset 0 0 0 2px #5f7455, 0 3px #0b0a08;
}
.hero-banner::before { right: -42px; bottom: -68px; width: 180px; height: 180px; border-radius: 50%; background: color-mix(in srgb, var(--hero-accent) 14%, transparent); transform: none; }
.hero-banner::after { background: linear-gradient(90deg, #14251fe8 0, #14251fc4 45%, transparent 78%); }
.banner-moon { top: 20px; right: 34px; width: 38px; height: 38px; border: 2px solid #614d2f; border-radius: 50%; box-shadow: 0 0 0 2px #181611; }
.banner-ridge { bottom: 19px; height: 92px; background: #29493f; }
.banner-road { border-width: 0 0 6px 18px; opacity: .62; }
.banner-exit { border: 2px solid #5c4525; border-radius: 1px; background: var(--cream); box-shadow: 0 0 0 2px #18130c, 0 0 14px #e8c56a; }
.banner-hero-portrait { right: 3px; bottom: -2px; width: 174px; height: 184px; filter: drop-shadow(4px 6px 0 #10120f99); }
.banner-hero-portrait canvas, .banner-hero-fallback svg, .hero-portrait canvas, .hero-portrait-fallback svg { image-rendering: pixelated; }
.banner-copy { top: 22px; left: 16px; max-width: 205px; }
.banner-copy small { color: #c9dfbc; font-size: 12px; font-weight: 400; }
.banner-copy h1 { margin: 9px 0 9px; font-family: var(--font-game); font-size: 27px; font-weight: 700; line-height: 1.15; letter-spacing: 0; text-shadow: 2px 2px #12100d; }
.banner-copy p { max-width: 185px; color: #e8dec5; font-size: 12px; line-height: 1.55; }
.map-code { bottom: 12px; left: 16px; color: var(--gold); font-size: 12px; font-weight: 700; text-shadow: 1px 1px #111; }
.record-row { right: 3px; bottom: 3px; left: 3px; gap: 3px; }
.record-row span { padding: 7px 8px; border: 2px solid #100d0b; background: #241b17e8; font-size: 12px; }

.picker { margin-top: 13px; }
.section-heading { min-height: 34px; padding: 0 2px 7px; border: 0; }
.section-heading h2 { font-family: var(--font-game); font-size: 16px; font-weight: 700; letter-spacing: 0; }
.section-heading > div small, .section-heading p { color: var(--muted); font-size: 12px; }
.choice-grid { gap: 6px; }
.choice {
  min-height: 124px;
  padding: 7px 3px 8px;
  border: 2px solid #110e0c;
  border-radius: 2px;
  background: #2d362d !important;
  box-shadow: inset 0 0 0 1px #56604c, 0 2px #0c0a09 !important;
}
.choice:first-child { border-left: 2px solid #110e0c; }
.choice::after { display: none; }
.choice.selected, .choice[data-hero].selected { border-color: #120e0b; background: #493a29 !important; box-shadow: inset 0 0 0 3px var(--gold), 0 2px #0c0a09 !important; }
.select-tag { top: 5px; left: 5px; padding: 2px 4px; border: 1px solid #110e0c; border-radius: 1px; color: #24180d; background: var(--gold); font-size: 12px; }
.hero-portrait { width: 68px; height: 72px; margin: 0 auto 1px; filter: drop-shadow(2px 3px 0 #10100d); }
.choice strong { font-family: var(--font-game); font-size: 14px; font-weight: 700; }
.choice small { color: #c6baa0; font-size: 12px; line-height: 1.25; }
.choice .hero-role, .choice[data-hero="striker"] .hero-role, .choice[data-hero="guardian"] .hero-role { color: #ecd395; }

.lobby-actions { gap: 7px; margin-top: 10px; border: 0; }
.primary, .secondary, .text-button, .danger-button { min-height: 50px; border-radius: 2px; }
.primary {
  border: 3px solid #160e0c;
  background: var(--coral);
  color: #fff3d3;
  box-shadow: inset 0 3px #ef8364, inset 0 -4px #8c302a, 0 3px #0a0807;
}
.primary > span { font-family: var(--font-game); font-size: 18px; }
.primary > small { font-size: 12px; }
.secondary { border: 2px solid #120f0c; border-bottom: 2px solid #120f0c; background: #44342b; box-shadow: inset 0 0 0 1px #775d4c, 0 2px #0a0807; }
.text-button { color: #c7b99a; font-size: 12px; }

.progress-card { grid-template-columns: 54px minmax(0,1fr) 58px 62px; gap: 6px; margin-top: 14px; padding: 8px; border: 2px solid #110e0c; background: #2c231e; box-shadow: inset 0 0 0 1px #5c463b; }
.level-medal { height: 43px; border: 0; border-right: 2px solid #100d0b; border-radius: 0; background: transparent; }
.level-medal small, .xp-progress b, .streak small { font-size: 12px; }
.level-medal b { font-family: var(--font-game); font-size: 18px; }
.meter { height: 5px; border: 1px solid #090806; border-radius: 0; background: #100e0c; }
.meter i { border-radius: 0; background: var(--gold); }
.mission-card { grid-template-columns: 32px minmax(0,1fr) 54px; gap: 8px; margin: 8px 0 0; padding: 11px 9px; border: 2px solid #110e0c; border-radius: 2px; background: #223b30; box-shadow: inset 0 0 0 1px #4c6b55; }
.mission-mark { width: 26px; height: 40px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.mission-copy small, .mission-copy strong, .mission-copy span, .mission-reward span, .mission-reward em { font-size: 12px; }
.mission-copy strong { font-family: var(--font-game); font-size: 14px; font-weight: 700; }
.mission-progress { height: 4px; border: 1px solid #0d0b09; border-radius: 0; background: #10100d; }
.mission-progress i { border-radius: 0; }
.connection-card, .connection-card.is-loading, .connection-card.is-local { min-height: 44px; margin: 6px 0 0; padding: 0 5px; border: 0; border-radius: 0; background: transparent; }
.connection-copy strong, .connection-copy small, .is-local .connection-copy strong { font-size: 12px; }
.trails .choice { min-height: 88px; }
.trail-swatch { border: 2px solid #110e0c; border-radius: 1px; box-shadow: inset 0 0 0 1px #7a6e54; }
.leaderboard-panel { padding: 9px; border: 2px solid #110e0c; border-radius: 2px; background: #2c231e; box-shadow: inset 0 0 0 1px #5c463b; }

.play-view { height: calc(100svh - 62px - var(--safe-area-inset-top, env(safe-area-inset-top, 0px))); background: #101915; }
.battle-head { min-height: 38px; border-bottom: 3px solid #100d0b; background: #31231e; }
.stats { margin: 0; padding: 5px; border: 0; border-bottom: 3px solid #100d0b; border-radius: 0; background: #44342b; }
.stat { border: 0; border-right: 2px solid #17110e; border-radius: 0; background: transparent; }
.arena-wrap { border: 3px solid #0c0a08; border-radius: 0; box-shadow: inset 0 0 0 2px #584233; }
.phase-card { border: 3px solid #120e0b; border-left: 3px solid #120e0b; border-radius: 2px; background: #34271fea; box-shadow: inset 0 0 0 1px #7b5c48, 0 3px #0a0807; backdrop-filter: none; text-align: center; }
.phase-card strong { font-family: var(--font-game); font-size: 18px; }
.timer { font-family: var(--font-game); }
.start-button { border: 3px solid #120e0b; border-radius: 2px; background: var(--coral); box-shadow: inset 0 3px #ef8364, inset 0 -4px #8c302a, 0 3px #0a0807; animation: none; }
.tactic-panel { border: 3px solid #100d0b; border-radius: 2px; background: #30241ef5; box-shadow: inset 0 0 0 2px #725544, 0 4px #080706; backdrop-filter: none; }
.tactic-panel h2 { font-family: var(--font-game); font-size: 20px; }
.tactic-choice { border: 2px solid #110e0c; border-radius: 2px; background: #254032; box-shadow: inset 0 0 0 1px #53705a; }

.result { background-color: #17241f; background-image: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,.05) 3px 4px); text-align: center; }
.result::before { display: none; }
.result > small { color: var(--gold); font-size: 12px; letter-spacing: 0; }
.result h1 { margin-top: 8px; font-family: var(--font-game); font-size: 30px; font-weight: 700; letter-spacing: 0; text-shadow: 2px 2px #111; }
.result > p { color: #c5b99d; font-size: 12px; }
.result-highlight { min-height: 154px; margin: 12px 0; border: 3px solid #100d0b; border-radius: 2px; background: #2c231e; box-shadow: inset 0 0 0 1px #624b3c, 0 3px #0a0807; }
.result-hero-copy { background: #211914e8; }
.result-hero-copy strong { font-family: var(--font-game); font-size: 15px; }
.result-path-card canvas { border-radius: 1px; image-rendering: pixelated; }
.final-score { padding: 12px; border: 2px solid #110e0c; background: #21382d; text-align: center; }
.final-score span { font-size: 12px; }
.final-score strong { font-family: var(--font-game); font-size: 42px; text-shadow: 2px 2px #111; }
.verification-card, .opponent-compare, .next-goal, .result-mission, .result-details { border: 2px solid #110e0c; border-radius: 2px; background: #2c231e; }
.next-goal strong { font-family: var(--font-game); font-size: 14px; }

.modal-layer { background: #0b0e0cd9; backdrop-filter: none; }
.modal-card { padding: 22px 16px 16px; border: 3px solid #100d0b; border-radius: 2px; background: #30241e; box-shadow: inset 0 0 0 2px #765847, 0 5px #080706; text-align: center; }
.modal-card h2 { font-family: var(--font-game); font-size: 23px; letter-spacing: 0; }
.modal-close { border: 2px solid #110e0c; border-radius: 2px; background: #49372d; }
.tutorial-art, .pause-mark, .setting-list, .setting-row, .legal-links, .legal-links a, .danger-button { border-radius: 2px; }
.setting-list { border: 2px solid #110e0c; background: #241c18; }
.setting-row { background: transparent; }
.legal-links a { border: 2px solid #110e0c; background: #403028; }
.danger-button { border: 3px solid #100d0b; background: var(--danger); box-shadow: inset 0 3px #e16b64, inset 0 -4px #7c2726; }

@media (max-width: 374px) {
  .lobby { padding-right: 8px; padding-left: 8px; }
  .hero-banner { min-height: 178px; }
  .banner-copy h1 { font-size: 24px; }
  .banner-hero-portrait { width: 160px; height: 170px; }
  .choice { min-height: 119px; }
  .hero-portrait { width: 62px; height: 66px; }
}

@media (max-height: 760px) {
  .hero-banner { min-height: 170px; }
  .choice { min-height: 116px; }
  .banner-hero-portrait { width: 154px; height: 164px; }
}