:root {
  color-scheme: dark;
  --bg: #070809;
  --panel: #111416;
  --panel-2: #181c1f;
  --panel-3: #20262a;
  --line: #343b40;
  --line-soft: #242a2e;
  --text: #f1eee7;
  --muted: #969b9d;
  --faint: #656b6e;
  --orange: #ef892b;
  --orange-2: #ffb14b;
  --cyan: #63c4c7;
  --red: #d9584c;
  --green: #7dbb73;
  --gold: #d8ad57;
  --radius: 7px;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100%;
  color: var(--text);
  background:
    radial-gradient(circle at 15% 5%, rgba(78, 118, 120, .12), transparent 35rem),
    radial-gradient(circle at 85% 90%, rgba(180, 83, 29, .11), transparent 40rem),
    #060708;
  font: 14px/1.4 Arial, Helvetica, sans-serif;
}

button, input, select { font: inherit; }
button { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: "Arial Narrow", Arial, sans-serif; letter-spacing: -.02em; }
.ui-icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.art-sprite { display: block; background-size: 300% 200%; background-repeat: no-repeat; background-color: #101315; }
.item-sprite { background-size: 300% 200%; }

.game-page { min-height: 100vh; padding: 18px 0; }
.game-frame {
  position: relative;
  width: min(100%, 480px);
  min-height: calc(100vh - 36px);
  margin: 0 auto;
  overflow: clip;
  background: #0b0d0e;
  border: 1px solid #2b3033;
  box-shadow: 0 24px 80px #000, 0 0 0 1px rgba(255,255,255,.025) inset;
}
.game-frame::before {
  content: "";
  position: fixed;
  inset: 0;
  width: min(100%, 478px);
  margin: auto;
  pointer-events: none;
  opacity: .14;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size: 18px 18px;
}
.game-content { min-height: 610px; }

.status-bar {
  position: sticky;
  z-index: 20;
  top: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 64px;
  background: rgba(9, 11, 12, .96);
  border-bottom: 1px solid #303538;
  backdrop-filter: blur(14px);
}
.identity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
.identity > span:last-child { min-width: 0; }
.identity b { display: block; overflow: hidden; color: #fff; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.identity small { display: block; overflow: hidden; color: var(--muted); font-size: 10px; text-transform: uppercase; text-overflow: ellipsis; white-space: nowrap; letter-spacing: .07em; }
.status-avatar { flex: 0 0 43px; width: 43px; height: 43px; border: 1px solid #4b5356; border-radius: 4px; }
.status-resources { display: grid; grid-template-columns: repeat(2, auto); gap: 2px 8px; padding: 6px 10px 6px 3px; color: #e1e3e0; font-weight: 700; font-size: 11px; }
.status-resources span:last-child { grid-column: 2; color: var(--orange-2); text-align: right; }
.thin-progress { position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: #1f2426; }
.thin-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--orange)); }

.page-screen { padding: 12px 10px 22px; }
.scene-card {
  position: relative;
  height: 300px;
  overflow: hidden;
  border: 1px solid #3a4245;
  border-radius: var(--radius);
  background-color: #161b1d;
  background-repeat: no-repeat;
}
.scene-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,5,6,.94) 0%, rgba(4,5,6,.65) 44%, rgba(4,5,6,.08) 78%), linear-gradient(0deg, #090b0c 0, transparent 46%); }
.scene-copy { position: absolute; z-index: 2; left: 18px; bottom: 24px; width: 64%; }
.scene-copy h1 { margin-bottom: 8px; font-size: 34px; line-height: .95; text-transform: uppercase; }
.scene-copy p:last-child { margin: 0; color: #c5c7c5; font-size: 12px; }
.kicker { margin-bottom: 7px; color: var(--orange-2); font-weight: 800; font-size: 10px; text-transform: uppercase; letter-spacing: .16em; }
.scene-player { position: absolute; z-index: 1; right: -35px; bottom: 0; width: 270px; height: 270px; background-color: transparent; filter: drop-shadow(-14px 8px 14px #000); }

.urgent-card {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid #593c26;
  border-radius: var(--radius);
  background: linear-gradient(100deg, rgba(105, 54, 22, .32), #121516 60%);
}
.urgent-card.completed { border-color: #31514c; background: linear-gradient(100deg, rgba(35, 83, 77, .32), #121516 60%); }
.urgent-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; color: #17100a; background: var(--orange); font-weight: 900; font-size: 20px; }
.urgent-card.completed .urgent-icon { background: var(--cyan); }
.urgent-card small, .urgent-card b { display: block; }
.urgent-card small { color: var(--orange-2); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.urgent-card b { margin: 2px 0; font-size: 16px; }
.urgent-card p { display: -webkit-box; overflow: hidden; margin: 0; color: var(--muted); font-size: 11px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.arrow-button { display: grid; width: 34px; height: 34px; padding: 0; place-items: center; border: 1px solid #4c5356; border-radius: 50%; background: #1d2225; cursor: pointer; }

.section-caption { margin: 18px 2px 8px; color: #c1c5c4; font-size: 11px; text-transform: uppercase; letter-spacing: .13em; }
.hub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.hub-tile {
  position: relative;
  display: grid;
  grid-template-columns: 35px minmax(0, 1fr);
  align-items: center;
  min-height: 74px;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  color: #dadcda;
  background: linear-gradient(145deg, #1a1f21, #101314);
  text-align: left;
  cursor: pointer;
}
.hub-tile:hover { border-color: #515a5d; background: #1b2022; }
.hub-tile > .ui-icon { width: 30px; height: 30px; color: var(--orange); }
.hub-tile b, .hub-tile small { display: block; }
.hub-tile b { font-size: 13px; }
.hub-tile small { margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.25; }
.hub-tile em { position: absolute; top: 6px; right: 7px; display: grid; min-width: 18px; height: 18px; padding: 0 4px; place-items: center; border-radius: 9px; color: #160c05; background: var(--orange); font-style: normal; font-weight: 900; font-size: 9px; }

.compact-panel { margin-top: 10px; padding: 12px; border: 1px solid var(--line-soft); border-radius: var(--radius); background: #111415; }
.panel-title { display: flex; justify-content: space-between; color: #e1e3e1; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.panel-title small { color: var(--muted); font-weight: 400; text-transform: none; letter-spacing: 0; }
.stat-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 10px; }
.stat-strip span { padding: 8px 4px; border: 1px solid #2b3133; background: #0d1011; color: var(--muted); text-align: center; font-size: 9px; }
.stat-strip b { display: block; color: var(--cyan); font-size: 16px; }
.mini-wide-button { width: 100%; min-height: 32px; margin-top: 8px; padding: 6px 9px; border: 1px solid #3b4446; color: #bbc0bf; background: #171b1c; cursor: pointer; font-size: 9px; text-transform: uppercase; }

.bottom-tabs {
  position: sticky;
  z-index: 20;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  min-height: 63px;
  border-top: 1px solid #3a4043;
  background: rgba(10, 12, 13, .97);
  backdrop-filter: blur(14px);
}
.bottom-tab { position: relative; display: grid; gap: 2px; place-items: center; padding: 7px 2px 8px; border: 0; color: #7d8385; background: none; cursor: pointer; }
.bottom-tab .ui-icon { width: 22px; height: 22px; }
.bottom-tab span { font-weight: 700; font-size: 9px; text-transform: uppercase; letter-spacing: .05em; }
.bottom-tab.active { color: var(--orange-2); background: linear-gradient(0deg, rgba(239,137,43,.13), transparent); }
.bottom-tab.active::before { content: ""; position: absolute; top: 0; width: 32px; height: 2px; background: var(--orange); }
.nav-badge { position: absolute; top: 6px; left: calc(50% + 9px); display: grid; width: 15px; height: 15px; place-items: center; border-radius: 50%; color: #120a04; background: var(--orange); font-style: normal; font-weight: 900; font-size: 9px; }
.micro-footer { padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); color: #5f6567; background: #07090a; text-align: center; font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }
.online-dot { display: inline-block; width: 5px; height: 5px; margin-right: 4px; border-radius: 50%; background: var(--green); box-shadow: 0 0 7px var(--green); }

.page-title { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 10px; margin-bottom: 12px; padding: 4px 2px; }
.page-title-icon { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid #4b4033; border-radius: 5px; color: var(--orange); background: #1a1714; }
.page-title h1 { margin: 0 0 2px; font-size: 25px; text-transform: uppercase; }
.page-title p { margin: 0; color: var(--muted); font-size: 10px; }

.npc-dialog { display: grid; grid-template-columns: 84px 1fr; min-height: 92px; overflow: hidden; border: 1px solid #30383b; border-radius: var(--radius); background: #15191b; }
.npc-portrait { position: relative; overflow: hidden; background: #0c0f10; }
.npc-art { position: absolute; inset: 0; width: 118px; height: 118px; transform: translate(-15px, 0); }
.npc-dialog > div:last-child { padding: 12px; }
.npc-dialog b { color: var(--cyan); }
.npc-dialog p { margin: 4px 0 0; color: #c0c3c2; font-size: 11px; }
.mission-card { margin-top: 10px; padding: 14px; border: 1px solid #3a4042; border-radius: var(--radius); background: linear-gradient(145deg, #181c1e, #101314); }
.mission-top { display: flex; justify-content: space-between; align-items: center; }
.mission-type { padding: 3px 6px; color: #17100a; border-radius: 3px; background: var(--orange); font-weight: 900; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.mission-top small { color: var(--muted); }
.mission-card h1 { margin: 12px 0; font-size: 28px; text-transform: uppercase; }
.target-row { display: grid; gap: 5px; }
.target-chip { display: grid; grid-template-columns: 56px 1fr; min-height: 58px; align-items: center; overflow: hidden; border: 1px solid #2f3538; background: #0b0e0f; }
.target-art { width: 56px; height: 56px; }
.target-chip span { padding: 5px 8px; }
.target-chip b, .target-chip small { display: block; }
.target-chip b { font-size: 12px; }
.target-chip small { color: var(--muted); font-size: 9px; text-transform: uppercase; }
.story-glyph { display: grid; height: 120px; place-items: center; color: #495154; background: radial-gradient(circle, #1e2426, #0e1112 65%); }
.story-glyph .ui-icon { width: 54px; height: 54px; }
.reward-box { margin: 12px 0; padding: 9px; border: 1px solid #443c31; background: rgba(131, 80, 31, .12); }
.reward-box > small { display: block; margin-bottom: 6px; color: var(--gold); font-size: 9px; text-transform: uppercase; letter-spacing: .12em; }
.reward-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.reward-chips span { padding: 3px 6px; border: 1px solid #4a4d49; border-radius: 3px; color: #e4e1d9; background: #171a1a; font-size: 9px; }
.action { display: block; width: 100%; min-height: 45px; padding: 10px 14px; border: 1px solid #555; border-radius: 4px; font-weight: 900; text-align: center; text-transform: uppercase; letter-spacing: .04em; cursor: pointer; }
.action.primary { border-color: #e8963f; color: #18100a; background: linear-gradient(#ffb250, #e58228); }
.action.danger { border-color: #b84c42; color: #fff; background: #7f2f2c; }
.action.ghost { margin-top: 6px; color: #b5b9b8; background: #171b1c; }
.action.choice { margin-top: 6px; color: #f0eee8; background: #202527; text-align: left; text-transform: none; }
.action.choice small { display: block; margin-top: 4px; }
.action:disabled, button:disabled { cursor: not-allowed; filter: grayscale(.8); opacity: .42; }
.chapter-track { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 10px; }
.chapter-track i, .wave-dots i { display: grid; height: 23px; place-items: center; border: 1px solid #343a3c; color: #6b7173; background: #101314; font-style: normal; font-size: 9px; }
.chapter-track i.done, .wave-dots i.done { color: #15201e; border-color: var(--cyan); background: var(--cyan); }
.chapter-track i.current, .wave-dots i.current { color: #170f08; border-color: var(--orange); background: var(--orange); }

.district-switcher { display: flex; gap: 5px; padding-bottom: 8px; overflow-x: auto; scrollbar-width: none; }
.district-switcher button { flex: 0 0 auto; padding: 7px 9px; border: 1px solid #343b3e; border-radius: 3px; color: #a8acad; background: #141819; cursor: pointer; font-size: 10px; }
.district-switcher button.active { color: #160e07; border-color: var(--orange); background: var(--orange); font-weight: 800; }
.district-banner { position: relative; height: 150px; overflow: hidden; border: 1px solid #3b4245; border-radius: var(--radius); background-size: 300% 200%; }
.district-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,6,7,.93), rgba(5,6,7,.3)); }
.district-banner > div { position: absolute; z-index: 1; left: 14px; bottom: 13px; width: 70%; }
.district-banner small { color: var(--orange-2); text-transform: uppercase; }
.district-banner h2 { margin: 2px 0; font-size: 25px; text-transform: uppercase; }
.district-banner p { margin: 0; color: #b1b5b4; font-size: 10px; }
.mastery-line { height: 4px; margin: 5px 0 11px; background: #272d2f; }
.mastery-line span { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--orange)); }
.operation-list { display: grid; gap: 7px; }
.operation-card { display: grid; grid-template-columns: 49px minmax(0, 1fr); gap: 10px; padding: 11px; border: 1px solid #303638; border-radius: var(--radius); background: #131718; }
.operation-card.elite { border-color: #683832; background: linear-gradient(135deg, rgba(114, 39, 33, .2), #131718 55%); }
.operation-mark { display: grid; width: 49px; height: 49px; place-items: center; color: var(--orange); border: 1px solid #494136; background: #1b1916; }
.operation-card.elite .operation-mark { color: var(--red); border-color: #693d38; background: #211514; }
.operation-copy small { color: var(--muted); font-size: 9px; text-transform: uppercase; }
.operation-copy h2 { margin: 2px 0 3px; font-size: 20px; }
.operation-copy p { margin: 0; color: #aeb2b1; font-size: 10px; }
.reward-inline { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.reward-inline span { padding: 2px 5px; border: 1px solid #33393b; color: #c6c8c6; background: #0c0f10; font-size: 8px; }
.operation-card > .action { grid-column: 1 / -1; min-height: 39px; }

.battle-screen { padding: 8px 9px 20px; }
.battle-heading { display: grid; grid-template-columns: 35px 1fr 35px; align-items: center; min-height: 40px; text-align: center; }
.battle-heading button { width: 31px; height: 31px; border: 1px solid #4c3432; border-radius: 50%; color: #d89089; background: #1d1313; cursor: pointer; }
.battle-heading span { font-weight: 800; text-transform: uppercase; }
.battle-heading small { color: var(--muted); }
.wave-dots { display: grid; grid-template-columns: repeat(var(--waves, 5), 1fr); grid-auto-flow: column; gap: 3px; margin-bottom: 7px; }
.enemy-stage { position: relative; height: 320px; overflow: hidden; border: 1px solid #423332; border-radius: var(--radius); background: radial-gradient(circle at 50% 40%, #3a2421, #111415 70%); }
.enemy-stage.boss { border-color: #7a4239; box-shadow: 0 0 28px rgba(178, 64, 42, .16) inset; }
.battle-enemy { position: absolute; inset: 0 0 0 0; width: 100%; height: 100%; background-color: transparent; background-size: 300% 200%; }
.enemy-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(7,8,9,.95), transparent 48%), linear-gradient(90deg, rgba(0,0,0,.15), transparent 50%, rgba(0,0,0,.15)); }
.enemy-name { position: absolute; z-index: 2; left: 13px; bottom: 61px; }
.enemy-name small { color: #e68a71; font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.enemy-name h1 { max-width: 330px; margin: 2px 0; font-size: 27px; line-height: .95; text-transform: uppercase; text-shadow: 0 2px 5px #000; }
.intent-card { position: absolute; z-index: 3; right: 8px; bottom: 8px; left: 8px; display: grid; grid-template-columns: 38px 1fr; gap: 8px; align-items: center; padding: 7px 9px; border: 1px solid #5d4039; background: rgba(24, 16, 15, .92); }
.intent-card > span { display: grid; width: 34px; height: 34px; place-items: center; color: #ff8a6c; border: 1px solid #704038; }
.intent-card small, .intent-card b { display: block; }
.intent-card small { color: #b27166; font-size: 8px; text-transform: uppercase; }
.intent-card b { font-size: 11px; }
.intent-card p { margin: 0; color: #9f9692; font-size: 9px; }
.health-block { padding: 6px 4px 3px; }
.health-block > span:first-child { display: block; margin-bottom: 3px; color: var(--muted); text-align: right; font-size: 9px; }
.meter { display: block; height: 7px; overflow: hidden; border: 1px solid #33393b; background: #07090a; }
.meter i { display: block; height: 100%; }
.meter.red i { background: linear-gradient(90deg, #a62e35, #e65e52); }
.meter.cyan i { background: linear-gradient(90deg, #377c82, #64c8c9); }
.meter.orange i { background: linear-gradient(90deg, #a75220, #f19a35); }
.player-strip { display: grid; grid-template-columns: 62px 1fr; align-items: center; gap: 8px; padding: 7px; border: 1px solid #2c393a; background: #101617; }
.battle-player { width: 62px; height: 62px; border: 1px solid #355053; }
.player-strip b, .player-strip small { display: flex; justify-content: space-between; }
.player-strip small { margin-bottom: 4px; color: var(--muted); font-size: 9px; }
.player-strip .meter + .meter { margin-top: 4px; height: 4px; }
.battle-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; margin-top: 7px; }
.combat-button { min-height: 52px; padding: 7px; border: 1px solid #3a4143; color: #dedfdb; background: #161a1c; cursor: pointer; }
.combat-button b, .combat-button small { display: block; }
.combat-button b { font-size: 11px; text-transform: uppercase; }
.combat-button small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.combat-button.main-hit { color: #171008; border-color: #ef9c42; background: linear-gradient(#ffb24f, #e58028); }
.combat-button.main-hit small { color: #6b3b17; }
.combat-button.finisher { grid-column: 1 / -1; border-color: #8b4634; background: linear-gradient(90deg, #4e2219, #251412); }
.combat-button.med { border-color: #365953; }
.combat-log { margin-top: 7px; padding: 8px; border: 1px solid #282e30; color: #9ca1a2; background: #0c0f10; font-size: 9px; }
.combat-log summary { cursor: pointer; }
.combat-log ul { margin: 7px 0 0; padding-left: 18px; }
.result-screen { display: grid; min-height: 650px; place-items: center; }
.result-card { width: 100%; padding: 24px 16px; border: 1px solid #4a3432; background: radial-gradient(circle at 50% 35%, #38201c, #111415 63%); text-align: center; }
.result-card.win { border-color: #385754; background: radial-gradient(circle at 50% 35%, #183734, #111415 63%); }
.result-symbol { display: grid; width: 48px; height: 48px; margin: 0 auto 8px; place-items: center; border: 1px solid currentColor; border-radius: 50%; color: var(--red); font-size: 30px; }
.result-card.win .result-symbol { color: var(--cyan); }
.result-card h1 { margin: 0; font-size: 36px; text-transform: uppercase; }
.result-enemy { width: 190px; height: 190px; margin: 10px auto; border: 1px solid #3b4244; }
.result-card p { color: #b4b7b5; }

.equipped-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.equipped-slot { min-width: 0; padding: 5px; overflow: hidden; border: 1px solid #343a3c; border-radius: 4px; background: #121516; text-align: left; cursor: pointer; }
.equipped-slot.legendary { border-color: #98712c; }
.equipped-slot.epic { border-color: #80508c; }
.equipped-art { width: 100%; aspect-ratio: 1; border: 1px solid #252a2c; }
.equipped-slot > .ui-icon { display: block; width: 45px; height: 70px; margin: auto; color: #3c4345; }
.equipped-slot span { display: block; padding: 5px 2px 2px; }
.equipped-slot small, .equipped-slot b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.equipped-slot small { color: var(--muted); font-size: 8px; text-transform: uppercase; }
.equipped-slot b { font-size: 9px; }
.inventory-list, .recipe-list, .skill-list, .objective-list, .achievement-list { display: grid; gap: 6px; margin-top: 10px; }
.item-row { position: relative; display: grid; grid-template-columns: 86px 1fr; gap: 9px; min-height: 98px; padding: 7px; border: 1px solid #303638; border-left-width: 3px; background: #121617; }
.item-row.common { border-left-color: #7c8588; }
.item-row.uncommon { border-left-color: #6eaa78; }
.item-row.rare { border-left-color: #5e8ed0; }
.item-row.epic { border-left-color: #9d63ac; }
.item-row.legendary { border-left-color: #d5a241; }
.item-art-button { padding: 0; border: 0; background: none; cursor: pointer; }
.list-item-art { width: 84px; height: 84px; border: 1px solid #2b3032; }
.item-copy { min-width: 0; padding: 1px 0; }
.item-copy small { color: var(--muted); font-size: 8px; text-transform: uppercase; }
.item-copy h3 { margin: 2px 0 3px; font-size: 15px; }
.item-copy p { margin: 0; color: #aeb2b1; font-size: 9px; }
.row-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.row-actions button, .recipe-row button, .skill-row button, .objective-row button, .daily-login button, .admin-buttons button, .admin-form button, .danger-zone button { min-height: 29px; padding: 5px 8px; border: 1px solid #55534a; color: #e8ddd0; background: #2a2520; cursor: pointer; font-weight: 700; font-size: 8px; text-transform: uppercase; }
.row-actions .muted-action { color: #959a9b; border-color: #33393b; background: #161a1b; }
.equipped-label { position: absolute; top: 5px; right: 5px; color: var(--cyan); font-style: normal; font-size: 8px; text-transform: uppercase; }
.vendor-strip { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid #423a30; background: #171512; }
.vendor-face { display: grid; flex: 0 0 48px; width: 48px; height: 48px; place-items: center; border: 1px solid #695134; color: var(--gold); background: #211a12; font-size: 22px; }
.vendor-strip p { margin: 0; color: #b9b7b0; font-size: 10px; }
.material-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.material-strip span { padding: 8px 4px; border: 1px solid #343a3c; color: var(--muted); background: #121516; text-align: center; font-size: 8px; text-transform: uppercase; }
.material-strip b { display: block; margin-top: 2px; color: var(--orange-2); font-size: 15px; }
.recipe-row { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 8px; padding: 7px; border: 1px solid #303638; background: #121617; }
.recipe-art { width: 64px; height: 64px; border: 1px solid #282d2f; }
.recipe-row small, .recipe-row b { display: block; }
.recipe-row small { color: var(--muted); font-size: 8px; }
.recipe-row b { margin-top: 2px; font-size: 12px; }
.recipe-row p { margin: 4px 0 0; color: var(--orange-2); font-size: 8px; }
.skill-hero { position: relative; display: grid; grid-template-columns: 132px 1fr; min-height: 150px; align-items: end; overflow: hidden; border: 1px solid #374044; background: radial-gradient(circle at 25% 35%, #253033, #111516 68%); }
.skill-character { width: 150px; height: 150px; background-color: transparent; }
.skill-hero > div { padding: 12px 10px 14px 0; }
.skill-hero small { color: var(--cyan); font-size: 8px; text-transform: uppercase; }
.skill-hero h2 { margin: 2px 0; font-size: 22px; }
.skill-hero p { margin: 0; color: #aeb2b1; font-size: 9px; }
.skill-row { display: grid; grid-template-columns: 43px 1fr auto; gap: 8px; align-items: center; padding: 9px; border: 1px solid #303638; background: #121617; }
.skill-row.locked { opacity: .55; }
.skill-icon { display: grid; width: 43px; height: 43px; place-items: center; border: 1px solid #55503e; color: var(--orange-2); background: #1c1914; font-size: 21px; }
.skill-row small { color: var(--muted); font-size: 8px; text-transform: uppercase; }
.skill-row h3 { margin: 2px 0; font-size: 14px; }
.skill-row p { margin: 0; color: #aeb2b1; font-size: 8px; }
.skill-pips { display: flex; gap: 3px; margin-top: 5px; }
.skill-pips i { width: 16px; height: 3px; background: #353b3d; }
.skill-pips i.filled { background: var(--orange); }

.district-list { display: grid; gap: 7px; }
.district-row { position: relative; min-height: 148px; overflow: hidden; border: 1px solid #3a4144; border-radius: var(--radius); background-size: 300% 200%; }
.district-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,6,7,.94), rgba(5,6,7,.25)); }
.district-row > div:last-child { position: relative; z-index: 1; width: 72%; padding: 19px 15px; }
.district-row small { color: var(--orange-2); font-size: 8px; text-transform: uppercase; }
.district-row h2 { margin: 3px 0; font-size: 23px; text-transform: uppercase; }
.district-row p { margin: 0 0 7px; color: #b7b9b7; font-size: 9px; }
.district-row span { color: var(--cyan); font-size: 8px; text-transform: uppercase; }
.district-row.locked { filter: grayscale(1); opacity: .58; }
.daily-login { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; padding: 12px; border: 1px solid #56432d; background: linear-gradient(135deg, #261d13, #131617 65%); }
.daily-login small, .daily-login b { display: block; }
.daily-login small { color: var(--orange-2); font-size: 8px; text-transform: uppercase; }
.daily-login b { font-size: 18px; }
.daily-login p { margin: 3px 0 0; color: #aeb2b1; font-size: 9px; }
.objective-row { display: grid; grid-template-columns: 42px 1fr auto; gap: 8px; align-items: center; padding: 9px; border: 1px solid #303638; background: #121617; }
.objective-icon { display: grid; width: 42px; height: 42px; place-items: center; color: var(--orange); border: 1px solid #4c4034; background: #1d1915; }
.objective-row small { color: var(--muted); font-size: 8px; }
.objective-row h3 { margin: 1px 0 5px; font-size: 13px; }
.objective-row p { margin: 4px 0 0; color: #9da2a2; font-size: 8px; }
.achievement-row { display: grid; grid-template-columns: 38px 1fr; gap: 8px; padding: 10px; border: 1px solid #2e3436; background: #111516; opacity: .62; }
.achievement-row.unlocked { border-color: #655335; background: linear-gradient(90deg, rgba(119, 82, 29, .2), #111516); opacity: 1; }
.achievement-row > div { display: grid; width: 38px; height: 38px; place-items: center; color: #596063; border: 1px solid #363c3e; }
.achievement-row.unlocked > div { color: var(--gold); border-color: #725d37; }
.achievement-row small, .achievement-row b { display: block; }
.achievement-row small { color: var(--muted); font-size: 8px; text-transform: uppercase; }
.achievement-row b { margin-top: 2px; }
.achievement-row p { margin: 2px 0 0; color: #9fa3a2; font-size: 9px; }
.menu-list { display: grid; gap: 5px; }
.menu-list > button { display: grid; grid-template-columns: 38px 1fr 24px; align-items: center; gap: 9px; min-height: 62px; padding: 9px 10px; border: 1px solid #303638; color: #dfe0dc; background: #131718; text-align: left; cursor: pointer; }
.menu-list > button > .ui-icon:first-child { width: 28px; height: 28px; color: var(--orange); }
.menu-list > button > .ui-icon:last-child { color: #656b6d; }
.menu-list b, .menu-list small { display: block; }
.menu-list b { font-size: 13px; }
.menu-list small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.admin-buttons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; margin-top: 10px; }
.admin-form { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 6px; margin-top: 8px; padding: 10px; border: 1px solid #303638; background: #121617; }
.admin-form:has(label + label) { grid-template-columns: 1fr 70px auto; }
.admin-form label, .stack-form label { display: grid; gap: 5px; color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .06em; }
.field-input { width: 100%; min-height: 40px; padding: 8px 9px; border: 1px solid #3d4446; border-radius: 3px; color: #f0efe9; background: #0a0d0e; }
.danger-zone { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 16px; }
.danger-zone .danger-button { color: #ffd8d5; border-color: #713a36; background: #381a19; }
.ending-card { margin-top: 25px; padding: 34px 20px; border: 1px solid #4d493d; background: radial-gradient(circle at 50% 20%, #343126, #111415 65%); text-align: center; }
.ending-card > div { color: var(--gold); font-size: 42px; }
.ending-card h1 { font-size: 31px; text-transform: uppercase; }
.ending-card p:not(.kicker) { color: #b7b9b6; }
.empty-card { padding: 25px; color: var(--muted); border: 1px dashed #394043; text-align: center; }

.gate-page { display: grid; min-height: 100vh; padding: 18px; place-items: center; background: radial-gradient(circle at 50% 20%, #1f2b2d, #080a0b 55%); }
.gate-card { width: min(100%, 430px); padding: 28px 24px; border: 1px solid #3a4346; background: linear-gradient(145deg, rgba(25,31,33,.98), rgba(11,14,15,.98)); box-shadow: 0 24px 80px #000; }
.gate-card.wide { width: min(100%, 520px); }
.gate-mark { display: grid; width: 54px; height: 54px; margin-bottom: 18px; place-items: center; border: 1px solid #b96f2d; color: #191009; background: var(--orange); font-weight: 900; font-size: 31px; }
.gate-card h1 { margin-bottom: 10px; font-size: 34px; text-transform: uppercase; }
.gate-card > p:not(.kicker) { color: #aeb2b1; }
.stack-form { display: grid; gap: 12px; margin-top: 19px; }
.notice { padding: 9px; border: 1px solid #3d4c4e; color: #b9d5d4; background: #11191a; }
.notice.danger { border-color: #6c3c38; color: #e6b0aa; background: #201313; }
.choice-field { margin: 0; padding: 9px; border: 1px solid #333b3e; }
.choice-field legend { padding: 0 5px; color: var(--muted); font-size: 9px; text-transform: uppercase; }
.choice-row { position: relative; display: grid; grid-template-columns: 19px 1fr; gap: 8px; align-items: start; padding: 7px; border: 1px solid transparent; cursor: pointer; }
.choice-row:has(input:checked) { border-color: #73502e; background: rgba(172, 95, 31, .12); }
.choice-row b, .choice-row small { display: block; }
.choice-row small { margin-top: 2px; color: var(--muted); font-size: 9px; text-transform: none; letter-spacing: 0; }
.class-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.class-choice { position: relative; overflow: hidden; padding: 5px; border: 1px solid #333a3c; background: #101314; cursor: pointer; text-align: center; }
.class-choice:has(input:checked) { border-color: var(--orange); background: #1e1711; }
.class-choice input { position: absolute; top: 5px; left: 5px; }
.class-portrait { width: 100%; aspect-ratio: 1; }
.class-choice b, .class-choice small { display: block; }
.class-choice b { margin-top: 5px; color: #ece9e2; }
.class-choice small { min-height: 25px; color: var(--muted); font-size: 8px; line-height: 1.2; text-transform: none; letter-spacing: 0; }
.toast-root { position: fixed; z-index: 100; right: 12px; bottom: 12px; display: grid; width: min(360px, calc(100vw - 24px)); gap: 6px; }
.toast { padding: 11px 13px; border: 1px solid #485154; color: #e9eae5; background: #151a1c; box-shadow: 0 10px 30px #000; }
.toast.success { border-color: #486658; }
.toast.error { border-color: #733f3a; background: #271615; }
.offline-badge { position: fixed; z-index: 200; top: 0; right: 0; left: 0; padding: 6px; color: #1b0f08; background: var(--orange); text-align: center; font-weight: 900; font-size: 10px; text-transform: uppercase; }
.modal-backdrop { position: fixed; z-index: 80; inset: 0; display: grid; padding: 18px; place-items: center; background: rgba(0,0,0,.82); backdrop-filter: blur(6px); }
.game-modal { position: relative; width: min(100%, 390px); padding: 17px; border: 1px solid #41484a; background: #121617; box-shadow: 0 24px 80px #000; }
.modal-close { position: absolute; z-index: 2; top: 8px; right: 8px; width: 34px; height: 34px; border: 1px solid #4a5052; border-radius: 50%; background: #111516; cursor: pointer; }
.modal-item-art { width: 170px; height: 170px; margin: 0 auto 12px; border: 1px solid #33393b; }
.game-modal > small { color: var(--orange-2); text-transform: uppercase; }
.game-modal h2 { margin: 3px 0 8px; font-size: 25px; }
.game-modal p { color: #b1b4b3; }

@media (max-width: 520px) {
  .game-page { padding: 0; }
  .game-frame { min-height: 100vh; border: 0; box-shadow: none; }
  .scene-card { height: 285px; }
  .scene-player { right: -45px; width: 250px; height: 250px; }
  .scene-copy { left: 14px; bottom: 18px; }
  .scene-copy h1 { font-size: 31px; }
  .enemy-stage { height: min(320px, 70vw); min-height: 270px; }
}

@media (max-width: 370px) {
  .status-resources { gap: 2px 5px; font-size: 10px; }
  .hub-tile { grid-template-columns: 29px 1fr; padding: 8px; }
  .hub-tile > .ui-icon { width: 25px; height: 25px; }
  .hub-tile b { font-size: 11px; }
  .scene-copy { width: 71%; }
  .class-grid { grid-template-columns: 1fr; }
  .class-choice { display: grid; grid-template-columns: 88px 1fr; align-items: center; text-align: left; }
  .class-portrait { width: 88px; }
}

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