:root {
  --bg-0: #03070c;
  --bg-1: #07111d;
  --bg-2: #0b1a29;
  --panel-0: rgba(8, 18, 29, .96);
  --panel-1: rgba(13, 30, 45, .96);
  --panel-2: rgba(18, 39, 56, .94);
  --line: #26445b;
  --line-soft: rgba(114, 183, 222, .18);
  --line-bright: #5db2dc;
  --ice: #67d8ff;
  --frost: #c5f1ff;
  --blue: #2b84b6;
  --gold: #e3bd71;
  --gold-deep: #7b591e;
  --red: #ee6c7d;
  --green: #54d5a6;
  --violet: #b987ff;
  --text: #e5f3fb;
  --muted: #91abc0;
  --dim: #58738a;
  --shadow: rgba(0, 0, 0, .72);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --panel-texture: url('/static/assets/ui/panel.png');
  --card-texture: url('/static/assets/ui/card.png');
  --button-primary-texture: url('/static/assets/ui/button_primary.png');
  --button-secondary-texture: url('/static/assets/ui/button_secondary.png');
  font-family: "Philosopher", Georgia, serif;
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; background: var(--bg-0); color: var(--text); }
html { overscroll-behavior: none; }
body {
  min-height: 100dvh;
  overflow-x: hidden;
  font-family: "Philosopher", Georgia, serif;
  font-size: 15px;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background:
    radial-gradient(120% 75% at 50% -10%, rgba(36, 98, 140, .38) 0%, rgba(5, 11, 18, .12) 56%, transparent 75%),
    linear-gradient(180deg, #07111d 0%, #03070c 100%);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  opacity: .18;
  background-image:
    linear-gradient(30deg, rgba(255,255,255,.025) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,.025) 87.5%),
    linear-gradient(150deg, rgba(255,255,255,.018) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,.018) 87.5%);
  background-size: 36px 62px;
}
button, input, textarea, select { font: inherit; }
button { -webkit-user-select: none; user-select: none; }
img { display: block; max-width: 100%; }
.hidden { display: none !important; }
.num { font-variant-numeric: tabular-nums; }

.snow { position: fixed; inset: 0; pointer-events: none; z-index: -1; opacity: .22; }
.snow::before, .snow::after {
  content: ""; position: absolute; inset: -80px;
  background-image:
    radial-gradient(circle at 20px 20px, rgba(221,247,255,.9) 0 1px, transparent 1.4px),
    radial-gradient(circle at 70px 85px, rgba(221,247,255,.6) 0 1.2px, transparent 1.7px),
    radial-gradient(circle at 120px 45px, rgba(221,247,255,.55) 0 1px, transparent 1.5px);
  background-size: 140px 130px;
  animation: snow-fall 34s linear infinite;
}
.snow-b::before { background-size: 210px 180px; animation-duration: 49s; opacity: .55; }
@keyframes snow-fall { to { transform: translate3d(-40px, 180px, 0); } }

.app-shell {
  position: relative;
  width: 100%;
  min-height: 100dvh;
  margin: 0 auto;
  background: linear-gradient(180deg, rgba(3, 9, 15, .66), rgba(3, 7, 12, .95));
  overflow: clip;
}
@media (min-width: 620px) {
  body { padding: 18px 0; }
  .app-shell {
    max-width: 480px;
    min-height: calc(100dvh - 36px);
    border: 1px solid rgba(115, 192, 232, .28);
    border-radius: 24px;
    box-shadow: 0 28px 90px #000, inset 0 0 0 1px rgba(255,255,255,.03);
  }
  .drawer { left: calc(50% - 240px) !important; }
  .battle-dock { max-width: 478px !important; bottom: 18px !important; }
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  padding: calc(8px + var(--safe-top)) 12px 9px;
  background:
    linear-gradient(180deg, rgba(16, 37, 55, .98), rgba(6, 16, 27, .98)),
    var(--panel-texture);
  border-bottom: 1px solid var(--line-bright);
  box-shadow: 0 10px 28px rgba(0,0,0,.72), inset 0 -1px 0 rgba(255,255,255,.04);
}
.topbar::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(112, 219, 255, .65), transparent);
}
.menu-button {
  position: absolute; left: 12px; top: calc(9px + var(--safe-top));
  width: 42px; height: 42px; display: grid; align-content: center; gap: 5px; padding: 0 11px;
  border: 1px solid rgba(103,216,255,.48); border-radius: 10px;
  background: linear-gradient(145deg, rgba(29, 65, 88, .95), rgba(10, 27, 41, .95));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 4px 12px rgba(0,0,0,.48);
}
.menu-button span { display: block; height: 2px; border-radius: 2px; background: var(--frost); box-shadow: 0 0 8px rgba(103,216,255,.35); }
.menu-button:active { transform: translateY(1px) scale(.97); }
.hero-head { min-height: 42px; padding-left: 52px; padding-right: 166px; display: flex; flex-direction: column; justify-content: center; }
.hero-name { max-width: 145px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; font-weight: 700; letter-spacing: .055em; color: var(--frost); text-shadow: 0 1px 0 #000, 0 0 12px rgba(85,199,244,.2); }
.hero-meta { color: var(--muted); font-size: 11px; margin-top: 1px; }
.resource-strip { position: absolute; right: 12px; top: calc(10px + var(--safe-top)); display: flex; gap: 5px; }
.resource-pill { min-width: 45px; height: 38px; padding: 4px 6px; display: flex; align-items: center; justify-content: center; gap: 3px; border: 1px solid rgba(107,167,200,.25); border-radius: 9px; background: rgba(3, 11, 18, .62); box-shadow: inset 0 1px 0 rgba(255,255,255,.035); font-size: 11px; }
.resource-pill img { width: 19px; height: 19px; object-fit: contain; image-rendering: pixelated; }
.resource-pill b { max-width: 55px; overflow: hidden; text-overflow: ellipsis; }
.resource-pill:first-child b { color: var(--gold); }
.resource-pill:nth-child(2) b { color: var(--ice); }
.resource-pill.power b { color: var(--frost); }
.xp-track { position: relative; height: 15px; margin-top: 7px; overflow: hidden; border: 1px solid #24465f; border-radius: 4px; background: #02070b; box-shadow: inset 0 1px 6px #000; }
.xp-fill { width: 0; height: 100%; background: linear-gradient(90deg, #17597f, #2fa8d9 65%, #83e6ff); box-shadow: 0 0 10px rgba(78,204,255,.46); transition: width .35s ease; }
.xp-track span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 9px; font-weight: 700; letter-spacing: .03em; color: #eefbff; text-shadow: 0 1px 2px #000; }

.view { padding: 13px 12px calc(92px + var(--safe-bottom)); min-height: calc(100dvh - 80px); }
.screen-head { margin-bottom: 11px; }
.screen-head .eyebrow { margin: 0 0 2px; color: var(--gold); font-size: 10px; letter-spacing: .19em; }
.screen-head h1 { margin: 0; color: var(--frost); font-size: 22px; letter-spacing: .07em; text-transform: uppercase; }
.screen-head p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }

.panel {
  position: relative;
  margin-bottom: 11px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background:
    linear-gradient(160deg, rgba(24, 48, 66, .94), rgba(7, 17, 27, .97) 67%),
    var(--panel-texture);
  box-shadow: 0 8px 22px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.045), inset 0 -1px 0 rgba(0,0,0,.52);
  overflow: hidden;
}
.panel::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(115deg, rgba(255,255,255,.045), transparent 35%, transparent 70%, rgba(69,150,192,.035)); }
.panel > * { position: relative; z-index: 1; }
.panel.gold-panel { border-color: rgba(227,189,113,.47); background: linear-gradient(160deg, rgba(67,50,24,.92), rgba(17,15,12,.97) 70%); }
.panel.danger-panel { border-color: rgba(238,108,125,.48); background: linear-gradient(160deg, rgba(63,26,35,.94), rgba(16,9,14,.97) 70%); }
.panel-title { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 14px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--frost); }
.panel-title img { width: 22px; height: 22px; object-fit: contain; image-rendering: pixelated; }
.panel-title small { margin-left: auto; font-size: 10px; font-weight: 400; color: var(--muted); letter-spacing: 0; text-transform: none; }
.panel-copy { color: var(--muted); font-size: 12px; }

.button {
  min-height: 40px;
  padding: 9px 13px;
  border: 1px solid #375e78;
  border-radius: 9px;
  color: var(--text);
  background:
    linear-gradient(180deg, rgba(32,62,84,.94), rgba(16,38,56,.97)),
    var(--button-secondary-texture);
  background-size: 100% 100%, 100% 100%;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 4px 10px rgba(0,0,0,.32);
  font-weight: 700;
  letter-spacing: .015em;
  cursor: pointer;
  transition: transform .12s ease, filter .14s ease, border-color .14s ease;
}
.button:hover { border-color: #5c9ec4; filter: brightness(1.06); }
.button:active { transform: translateY(1px) scale(.985); }
.button:disabled { opacity: .38; filter: grayscale(.45); cursor: default; }
.button.primary, .button.ice {
  border-color: rgba(103,216,255,.72);
  background:
    linear-gradient(180deg, rgba(43,141,183,.91), rgba(21,87,120,.95)),
    var(--button-primary-texture);
  background-size: 100% 100%, 100% 100%;
  color: #f4fcff;
}
.button.gold { border-color: rgba(227,189,113,.7); background: linear-gradient(180deg, rgba(143,107,37,.82), rgba(82,59,19,.94)), var(--button-primary-texture); background-size:100% 100%,100% 100%; color: #fff1c9; }
.button.red { border-color: rgba(238,108,125,.72); background: linear-gradient(180deg, #8c3549, #4c1825); }
.button.ghost { background: rgba(4,13,21,.5); box-shadow: none; }
.button.compact { min-height: 34px; padding: 6px 10px; font-size: 12px; }
.button.tiny { min-height: 28px; padding: 4px 8px; font-size: 10px; }
.button.wide { width: 100%; }
.button-row { display: flex; gap: 8px; flex-wrap: wrap; }
.button-row .button { flex: 1 1 120px; }

.battle-scene {
  position: relative;
  min-height: 390px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px 13px 13px;
  border: 1px solid rgba(91,175,217,.46);
  border-radius: 16px;
  overflow: hidden;
  background-position: center;
  background-size: cover;
  box-shadow: 0 14px 32px rgba(0,0,0,.58), inset 0 0 48px rgba(0,0,0,.5);
}
.battle-scene::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2,8,14,.18), rgba(2,8,14,.34) 43%, rgba(2,7,12,.91) 100%), radial-gradient(circle at 50% 42%, transparent 0 26%, rgba(1,6,10,.38) 75%); }
.battle-scene::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), inset 0 -60px 90px rgba(0,0,0,.66); pointer-events: none; }
.scene-top, .scene-center, .scene-bottom { position: relative; z-index: 1; }
.zone-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 80%; padding: 5px 9px; border: 1px solid rgba(143,216,246,.35); border-radius: 99px; background: rgba(2,11,18,.68); color: var(--frost); font-size: 11px; box-shadow: 0 3px 10px rgba(0,0,0,.44); }
.zone-chip b { color: var(--gold); }
.scene-center { display: flex; flex-direction: column; align-items: center; margin: 3px 0 10px; }
.enemy-frame { width: 210px; height: 210px; display: grid; place-items: center; position: relative; }
.enemy-frame::before { content: ""; position: absolute; width: 80%; height: 28%; bottom: 4px; border-radius: 50%; background: radial-gradient(ellipse, rgba(0,0,0,.72), transparent 68%); filter: blur(3px); }
.enemy-art { position: relative; width: 190px; height: 190px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 10px 16px rgba(0,0,0,.7)); transform-origin: 50% 80%; animation: enemy-breathe 3.6s ease-in-out infinite; }
.boss-scene .enemy-art { width: 206px; height: 206px; filter: drop-shadow(0 0 18px rgba(238,108,125,.27)) drop-shadow(0 12px 18px rgba(0,0,0,.75)); }
@keyframes enemy-breathe { 50% { transform: translateY(-3px) scale(1.015); } }
.enemy-title { margin-top: -3px; text-align: center; }
.enemy-title h2 { margin: 0; font-size: 21px; color: #f1fbff; text-shadow: 0 2px 3px #000; }
.enemy-title p { margin: 2px 0 0; color: var(--muted); font-size: 11px; }
.hp-track, .meter { position: relative; height: 18px; overflow: hidden; border: 1px solid #36566c; border-radius: 5px; background: #02070b; box-shadow: inset 0 2px 6px #000; }
.hp-fill { height: 100%; background: linear-gradient(90deg, #792a3d, #d6536b 75%, #ff8697); transition: width .22s linear; }
.hero-hp .hp-fill { background: linear-gradient(90deg, #1b7259, #45c49a 75%, #7be0bd); }
.hp-track span, .meter span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 10px; color: #f5fbff; text-shadow: 0 1px 2px #000; }
.combat-bars { display: grid; gap: 6px; }
.combat-meta { display: flex; justify-content: space-between; gap: 10px; margin-top: 7px; color: var(--muted); font-size: 10px; }
.boss-timer { color: var(--red); font-weight: 700; }

.zone-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.zone-card { position: relative; min-height: 78px; padding: 9px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background-size: cover; background-position: center; text-align: left; color: var(--text); }
.zone-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3,10,16,.91), rgba(3,10,16,.42)); }
.zone-card > * { position: relative; z-index: 1; }
.zone-card.current { border-color: var(--ice); box-shadow: 0 0 16px rgba(103,216,255,.18); }
.zone-card.locked { opacity: .38; filter: grayscale(.55); }
.zone-card b { display: block; color: var(--frost); font-size: 12px; }
.zone-card small { color: var(--muted); font-size: 9px; }

.log-list { display: grid; gap: 5px; max-height: 138px; overflow: hidden; }
.log-entry { padding: 5px 8px; border-left: 2px solid #315e79; background: rgba(3,11,18,.42); color: var(--muted); font-size: 11px; }
.log-entry:first-child { color: var(--text); border-left-color: var(--ice); }
.empty-state { padding: 18px 10px; text-align: center; color: var(--muted); font-size: 12px; }

.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.stat-card { padding: 9px; border: 1px solid var(--line-soft); border-radius: 9px; background: linear-gradient(rgba(4,13,21,.78), rgba(4,13,21,.78)), var(--card-texture); background-size:100% 100%,100% 100%; }
.stat-card span { display: block; color: var(--muted); font-size: 10px; }
.stat-card b { display: block; margin-top: 2px; color: var(--frost); font-size: 16px; }
.kv-list { display: grid; gap: 1px; }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.045); font-size: 12px; }
.kv:last-child { border-bottom: 0; }
.kv span { color: var(--muted); }
.kv b { text-align: right; }

.equipment-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.equipment-slot { min-height: 119px; padding: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 1px solid var(--line); border-radius: 11px; background: linear-gradient(145deg, rgba(22,45,63,.82), rgba(4,13,21,.82)); text-align: center; cursor: pointer; }
.equipment-slot.empty { opacity: .48; }
.equipment-slot img { width: 62px; height: 62px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 5px 7px rgba(0,0,0,.5)); }
.equipment-slot .slot-name { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.equipment-slot .item-name { font-size: 11px; font-weight: 700; line-height: 1.12; }
.item-list { display: grid; gap: 7px; }
.item-row { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 9px; align-items: center; min-height: 72px; padding: 7px 8px; border: 1px solid var(--line); border-left-width: 3px; border-radius: 10px; background: linear-gradient(145deg, rgba(20,40,57,.86), rgba(5,14,23,.88)); cursor: pointer; }
.item-row img { width: 54px; height: 54px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 4px 6px rgba(0,0,0,.55)); }
.item-main { min-width: 0; }
.item-main b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.item-main small { display: block; color: var(--muted); margin-top: 3px; font-size: 9px; }
.item-power { min-width: 48px; text-align: right; }
.item-power b { display: block; color: var(--frost); font-size: 12px; }
.item-power em { font-style: normal; font-size: 9px; }
.delta-up { color: var(--green); }
.delta-down { color: var(--red); }
.rarity-common { border-left-color: #91a0aa; }
.rarity-uncommon { border-left-color: #58c780; }
.rarity-rare { border-left-color: #50aef2; }
.rarity-epic { border-left-color: #ac74eb; }
.rarity-legendary { border-left-color: #e0a23d; box-shadow: 0 0 15px rgba(224,162,61,.08); }
.rarity-mythic { border-left-color: #ff7272; box-shadow: 0 0 18px rgba(255,114,114,.12); }
.text-common { color: #c6d0d6; }
.text-uncommon { color: #73dc98; }
.text-rare { color: #6dc4ff; }
.text-epic { color: #c99cff; }
.text-legendary { color: #f0c05d; }
.text-mythic { color: #ff8b8b; }

.forge-tier-strip { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.forge-tier-strip::-webkit-scrollbar { display: none; }
.tier-button { min-width: 60px; padding: 8px 6px; border: 1px solid var(--line); border-radius: 9px; background: rgba(5,15,24,.7); color: var(--muted); text-align: center; }
.tier-button b { display: block; color: var(--text); }
.tier-button.active { border-color: var(--ice); background: rgba(27,75,102,.55); color: var(--frost); }
.tier-button:disabled { opacity: .3; }
.forge-slot-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.forge-slot { min-height: 75px; padding: 7px 3px; display: grid; place-items: center; gap: 2px; border: 1px solid var(--line); border-radius: 9px; background: rgba(5,15,24,.72); color: var(--muted); font-size: 9px; text-align: center; }
.forge-slot img { width: 40px; height: 40px; object-fit: contain; image-rendering: pixelated; }
.forge-slot.active { border-color: var(--ice); color: var(--frost); background: rgba(26,75,101,.5); }
.cost-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 9px 0; }
.cost-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 7px; border: 1px solid var(--line-soft); border-radius: 99px; background: rgba(3,11,18,.55); color: var(--muted); font-size: 10px; }
.cost-chip img { width: 16px; height: 16px; image-rendering: pixelated; }
.queue-list { display: grid; gap: 7px; }
.queue-job { padding: 9px; border: 1px solid var(--line); border-radius: 9px; background: rgba(4,13,21,.5); }
.queue-job-head { display: flex; justify-content: space-between; font-size: 11px; }
.queue-job-head span { color: var(--muted); }
.progress { height: 9px; margin-top: 6px; overflow: hidden; border: 1px solid #29475b; border-radius: 99px; background: #02070b; }
.progress i { display: block; height: 100%; background: linear-gradient(90deg, #1f6d95, #67d8ff); }

.tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 5px; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: 0 0 auto; padding: 7px 10px; border: 1px solid var(--line); border-radius: 99px; background: rgba(4,13,21,.55); color: var(--muted); font-size: 11px; }
.tab.active { border-color: var(--ice); color: var(--frost); background: rgba(28,80,108,.52); }
.skill-branch { display: grid; gap: 7px; margin-top: 10px; }
.skill-node { padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: linear-gradient(145deg, rgba(22,43,59,.75), rgba(5,14,22,.8)); }
.skill-node.locked { opacity: .45; }
.skill-node-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.skill-node h3 { margin: 0; font-size: 13px; color: var(--frost); }
.skill-node p { margin: 4px 0 7px; color: var(--muted); font-size: 10px; }
.pips { display: flex; gap: 4px; }
.pips i { width: 8px; height: 8px; border-radius: 50%; background: #253a49; }
.pips i.on { background: var(--ice); box-shadow: 0 0 7px rgba(103,216,255,.55); }

.offer-grid, .pet-grid, .profession-grid, .opponent-grid { display: grid; gap: 8px; }
.offer-card, .pet-card, .profession-card, .opponent-card { display: grid; grid-template-columns: 58px minmax(0,1fr) auto; gap: 9px; align-items: center; padding: 9px; border: 1px solid var(--line); border-radius: 10px; background:
  linear-gradient(160deg, rgba(9,25,38,.88), rgba(3,11,18,.94)),
  var(--card-texture);
  background-size: 100% 100%, 100% 100%; }
.offer-card img, .pet-card img { width: 54px; height: 54px; object-fit: contain; image-rendering: pixelated; }
.offer-card h3, .pet-card h3, .profession-card h3, .opponent-card h3 { margin: 0; font-size: 13px; color: var(--frost); }
.offer-card p, .pet-card p, .profession-card p, .opponent-card p { margin: 3px 0 0; color: var(--muted); font-size: 10px; }
.profession-card { grid-template-columns: minmax(0,1fr) auto; }
.selected-card { border-color: var(--gold); background: linear-gradient(145deg, rgba(70,51,20,.68), rgba(15,13,9,.75)); }
.locked-card { opacity: .38; }

.quest-card {
  padding: 10px; margin-bottom: 7px; border: 1px solid var(--line); border-radius: 10px;
  background:
    linear-gradient(160deg, rgba(9,25,38,.84), rgba(3,11,18,.92)),
    var(--card-texture);
  background-size: 100% 100%, 100% 100%;
}
.quest-head { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; }
.quest-head span { color: var(--muted); }
.quest-card.done { border-color: rgba(84,213,166,.45); }
.quest-card.claimed { opacity: .55; }

.rank-list { display: grid; gap: 6px; }
.rank-row { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 8px 9px; border: 1px solid var(--line-soft); border-radius: 9px; background: rgba(4,13,21,.5); }
.rank-row.player { border-color: var(--ice); background: rgba(24,69,94,.45); }
.rank-num { color: var(--gold); font-size: 15px; font-weight: 700; text-align: center; }
.rank-name b { display: block; font-size: 12px; }
.rank-name small { color: var(--muted); font-size: 9px; }
.rank-power { text-align: right; color: var(--frost); font-size: 11px; }

.material-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.material-card { padding: 8px 4px; text-align: center; border: 1px solid var(--line-soft); border-radius: 9px; background: rgba(4,13,21,.45); }
.material-card img { width: 30px; height: 30px; margin: 0 auto 3px; object-fit: contain; image-rendering: pixelated; }
.material-card b { display: block; color: var(--frost); font-size: 12px; }
.material-card span { color: var(--muted); font-size: 8px; }

.text-input, .text-area, select {
  width: 100%; border: 1px solid #31536a; border-radius: 9px; background: rgba(2,8,13,.86); color: var(--text); padding: 10px 11px; outline: none; box-shadow: inset 0 2px 7px rgba(0,0,0,.5);
}
.text-input:focus, .text-area:focus, select:focus { border-color: var(--ice); box-shadow: 0 0 0 2px rgba(103,216,255,.1), inset 0 2px 7px rgba(0,0,0,.5); }
.text-area { min-height: 150px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; }
.field-label { display: block; margin: 8px 0 5px; color: var(--muted); font-size: 11px; }

.battle-dock {
  position: fixed; z-index: 28; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 100%; max-width: 480px; min-height: 60px;
  padding: 8px 12px calc(8px + var(--safe-bottom));
  display: flex; align-items: center; gap: 9px;
  border-top: 1px solid rgba(103,216,255,.44);
  background: linear-gradient(180deg, rgba(11,27,41,.97), rgba(4,12,20,.99));
  box-shadow: 0 -8px 25px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.035);
}
.status-line { flex: 1; min-width: 0; color: var(--muted); font-size: 10px; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.scrim { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.72); opacity: 0; pointer-events: none; transition: opacity .24s ease; backdrop-filter: blur(2px); }
.scrim.open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; z-index: 61; left: 0; top: 0; bottom: 0; width: min(84vw, 330px);
  padding-top: var(--safe-top); display: flex; flex-direction: column;
  transform: translateX(-103%); transition: transform .26s cubic-bezier(.2,.7,.2,1);
  border-right: 1px solid rgba(103,216,255,.46);
  background: linear-gradient(180deg, rgba(13,31,47,.995), rgba(3,10,17,.995));
  box-shadow: 16px 0 55px rgba(0,0,0,.74), inset -1px 0 0 rgba(255,255,255,.025);
}
.drawer.open { transform: translateX(0); }
.drawer-hero { min-height: 92px; padding: 15px 14px 13px; display: grid; grid-template-columns: 58px minmax(0,1fr) 32px; gap: 10px; align-items: center; border-bottom: 1px solid var(--line); background: radial-gradient(circle at 10% 10%, rgba(58,138,181,.22), transparent 48%); }
.drawer-emblem { width: 58px; height: 58px; padding: 4px; border: 1px solid rgba(227,189,113,.48); border-radius: 13px; background: rgba(2,8,13,.7); box-shadow: 0 6px 15px rgba(0,0,0,.55); }
.drawer-emblem img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.drawer-name { color: var(--frost); font-size: 18px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer-meta { color: var(--muted); font-size: 10px; margin-top: 2px; }
.drawer-close, .modal-close { width: 30px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: rgba(3,10,17,.7); color: var(--muted); font-size: 22px; line-height: 1; }
.drawer-nav { flex: 1; overflow-y: auto; padding: 7px 0; overscroll-behavior: contain; }
.nav-button { position: relative; width: 100%; min-height: 49px; padding: 7px 13px; display: grid; grid-template-columns: 34px minmax(0,1fr) auto; gap: 10px; align-items: center; border: 0; border-left: 3px solid transparent; background: transparent; color: var(--muted); text-align: left; }
.nav-button img { width: 30px; height: 30px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 2px 3px rgba(0,0,0,.45)); }
.nav-button span { font-weight: 700; font-size: 13px; }
.nav-button small { color: var(--dim); font-size: 9px; }
.nav-button.active { border-left-color: var(--ice); color: var(--frost); background: linear-gradient(90deg, rgba(31,89,119,.55), rgba(15,44,62,.18)); }
.nav-button.locked { opacity: .45; }
.nav-badge { min-width: 21px; padding: 2px 6px; border-radius: 99px; background: var(--gold); color: #201505 !important; text-align: center; font-size: 9px !important; }
.drawer-foot { padding: 10px 14px calc(10px + var(--safe-bottom)); border-top: 1px solid var(--line); color: var(--dim); font-size: 9px; }

.modal { position: fixed; inset: 0; z-index: 90; padding: calc(16px + var(--safe-top)) 14px calc(16px + var(--safe-bottom)); display: grid; place-items: center; background: rgba(0,0,0,.82); backdrop-filter: blur(5px); }
.modal-card { position: relative; width: 100%; max-width: 430px; max-height: 92dvh; overflow-y: auto; padding: 18px; border: 1px solid rgba(103,216,255,.48); border-radius: 16px; background: linear-gradient(160deg, #132c40, #07111d 62%, #040a10); box-shadow: 0 24px 80px #000, inset 0 1px 0 rgba(255,255,255,.06); animation: modal-in .22s ease both; }
@keyframes modal-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.modal-close { position: absolute; right: 10px; top: 10px; z-index: 2; }
.brand-mark { width: 82px; height: 82px; margin: -2px auto 6px; padding: 5px; border: 1px solid rgba(227,189,113,.55); border-radius: 18px; background: rgba(2,8,13,.65); box-shadow: 0 9px 20px rgba(0,0,0,.55); }
.brand-mark img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.create-card { text-align: center; }
.create-card .eyebrow { margin: 0; color: var(--gold); font-size: 9px; letter-spacing: .2em; }
.create-card h1 { margin: 2px 0 5px; color: var(--frost); font-size: 31px; letter-spacing: .1em; }
.create-card .lead { margin: 0 0 12px; color: var(--muted); font-size: 12px; }
.create-card .field-label { text-align: left; }
.class-grid { display: grid; gap: 8px; margin: 11px 0 14px; text-align: left; }
.class-card { display: grid; grid-template-columns: 58px minmax(0,1fr); gap: 10px; align-items: center; padding: 9px; border: 1px solid var(--line); border-radius: 11px; background: rgba(4,13,21,.58); cursor: pointer; }
.class-card.selected { border-color: var(--ice); background: rgba(27,76,102,.48); box-shadow: 0 0 16px rgba(103,216,255,.1); }
.class-card img { width: 54px; height: 54px; object-fit: contain; image-rendering: pixelated; }
.class-card h3 { margin: 0; color: var(--frost); font-size: 14px; }
.class-card p { margin: 3px 0 0; color: var(--muted); font-size: 10px; }
.detail-card { text-align: left; }
.detail-hero { display: grid; grid-template-columns: 94px minmax(0,1fr); gap: 12px; align-items: center; margin-bottom: 12px; }
.detail-hero img { width: 94px; height: 94px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 7px 9px rgba(0,0,0,.55)); }
.detail-hero h2 { margin: 0; padding-right: 28px; color: var(--frost); font-size: 18px; }
.detail-hero p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.detail-stats { display: grid; gap: 5px; margin: 10px 0; }
.detail-stat { display: flex; justify-content: space-between; padding: 6px 8px; border: 1px solid var(--line-soft); border-radius: 7px; background: rgba(3,10,17,.55); font-size: 11px; }
.detail-stat span { color: var(--muted); }

.toast { position: fixed; z-index: 120; left: 50%; bottom: calc(74px + var(--safe-bottom)); transform: translate(-50%, 12px); width: max-content; max-width: calc(100vw - 30px); padding: 9px 13px; border: 1px solid var(--line-bright); border-radius: 10px; background: rgba(12,31,47,.97); color: var(--text); box-shadow: 0 12px 35px rgba(0,0,0,.7); opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; text-align: center; font-size: 11px; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.error { border-color: var(--red); }
.offline-banner { position: fixed; z-index: 119; top: calc(10px + var(--safe-top)); left: 50%; transform: translateX(-50%); width: min(92vw, 430px); padding: 10px 12px; border: 1px solid rgba(227,189,113,.58); border-radius: 11px; background: rgba(47,36,17,.98); color: #ffedbd; box-shadow: 0 12px 30px rgba(0,0,0,.66); font-size: 11px; text-align: center; }

.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); font-size: 9px; }
.badge.gold { border-color: rgba(227,189,113,.45); color: var(--gold); }
.badge.green { border-color: rgba(84,213,166,.4); color: var(--green); }
.badge.red { border-color: rgba(238,108,125,.4); color: var(--red); }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.muted { color: var(--muted); }
.dim { color: var(--dim); }
.tiny { font-size: 10px; }
.center { text-align: center; }
.separator { height: 1px; margin: 10px 0; background: linear-gradient(90deg, transparent, var(--line), transparent); }

@media (max-width: 370px) {
  .hero-head { padding-right: 142px; }
  .resource-pill { min-width: 39px; padding: 4px; }
  .resource-pill img { width: 16px; height: 16px; }
  .equipment-grid { gap: 6px; }
  .equipment-slot { min-height: 108px; }
  .forge-slot-grid { grid-template-columns: repeat(4, 1fr); gap: 4px; }
  .enemy-frame { width: 188px; height: 188px; }
  .enemy-art { width: 172px; height: 172px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ===== v0.4 online accounts and meaningful skill trees ===== */
.drawer-account { margin-top: 4px; color: var(--gold); font-size: 10px; letter-spacing: .04em; }
.drawer-actions { padding: 9px 12px 0; border-top: 1px solid rgba(115,202,236,.13); }
.auth-card { overflow: hidden; }
.auth-card::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 0, rgba(82,210,255,.13), transparent 42%), linear-gradient(135deg, transparent 55%, rgba(215,176,92,.06)); }
.auth-card > * { position: relative; }
.auth-tabs { margin: 14px 0 12px; }
.auth-note { margin: 12px 2px 0; color: var(--dimmer); font-size: 10px; line-height: 1.45; text-align: center; }
.online-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border: 1px solid rgba(74,214,155,.35); border-radius: 99px; color: #90edbf; background: rgba(25,92,66,.24); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.online-chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #62e0a4; box-shadow: 0 0 8px #62e0a4; }

.resource-track { position: relative; height: 12px; margin-top: 6px; overflow: hidden; border: 1px solid rgba(113,204,241,.26); border-radius: 99px; background: rgba(1,6,10,.78); }
.resource-track i { display: block; height: 100%; background: linear-gradient(90deg, #792d1e, #e57435 58%, #ffd07a); box-shadow: 0 0 12px rgba(239,112,49,.4); }
.resource-track.frost i { background: linear-gradient(90deg, #285b89, #62d6ff 58%, #d6f8ff); }
.resource-track.focus i { background: linear-gradient(90deg, #6d5a18, #d6b851 58%, #fff2a0); }
.resource-track span { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 8px; text-shadow: 0 1px 2px #000; }
.combat-status-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.combat-status { padding: 3px 7px; border: 1px solid rgba(101,208,247,.25); border-radius: 99px; color: var(--muted); background: rgba(2,10,16,.66); font-size: 9px; }
.combat-status.active { color: #ffd58c; border-color: rgba(221,177,82,.45); box-shadow: 0 0 12px rgba(221,177,82,.12); }

.development-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
.development-tab { min-height: 52px; display: grid; place-items: center; gap: 2px; padding: 7px 4px; border: 1px solid var(--line); border-radius: 11px; color: var(--muted); background: linear-gradient(155deg, rgba(20,43,59,.78), rgba(4,12,19,.92)); font: inherit; }
.development-tab img { width: 23px; height: 23px; object-fit: contain; }
.development-tab span { font-size: 10px; }
.development-tab.active { color: var(--frost); border-color: rgba(98,215,255,.65); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 20px rgba(64,190,240,.12); }

.build-overview { position: relative; overflow: hidden; }
.build-overview::after { content: ''; position: absolute; width: 150px; height: 150px; right: -75px; top: -70px; border: 1px solid rgba(221,177,82,.15); border-radius: 50%; box-shadow: 0 0 45px rgba(221,177,82,.07); }
.build-counts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.build-count { padding: 8px 5px; border: 1px solid rgba(99,188,226,.14); border-radius: 9px; background: rgba(3,12,19,.58); text-align: center; }
.build-count span { display: block; color: var(--muted); font-size: 9px; }
.build-count b { display: block; margin-top: 2px; color: var(--frost); font-size: 15px; }
.effect-chip-list { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.effect-chip { padding: 4px 7px; border: 1px solid rgba(218,179,93,.26); border-radius: 99px; color: #e7cf98; background: rgba(83,61,20,.19); font-size: 9px; }

.branch-selector { display: grid; gap: 7px; margin-bottom: 10px; }
.branch-card { position: relative; width: 100%; display: grid; grid-template-columns: 44px minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 9px; border: 1px solid var(--line); border-radius: 12px; color: var(--text); background: linear-gradient(145deg, rgba(22,44,59,.88), rgba(4,12,19,.94)); text-align: left; font: inherit; overflow: hidden; }
.branch-card::after { content: ''; position: absolute; inset: auto 0 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(92,211,255,.6), transparent); transform: scaleX(0); transition: transform .2s ease; }
.branch-card.active { border-color: rgba(92,211,255,.65); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 8px 24px rgba(0,0,0,.22); }
.branch-card.active::after { transform: scaleX(1); }
.branch-card > img { width: 42px; height: 42px; object-fit: contain; filter: drop-shadow(0 5px 7px #000); }
.branch-card h3 { margin: 0; color: var(--frost); font-size: 13px; }
.branch-card p { margin: 2px 0 0; color: var(--muted); font-size: 9px; line-height: 1.3; }
.branch-card strong { color: var(--gold); font-size: 12px; }

.branch-head { position: relative; padding: 12px; margin-bottom: 8px; border: 1px solid rgba(98,215,255,.23); border-radius: 12px; background: radial-gradient(circle at 100% 0, rgba(76,190,232,.12), transparent 44%), linear-gradient(155deg, rgba(19,42,58,.94), rgba(3,10,16,.96)); overflow: hidden; }
.branch-head-top { display: flex; align-items: center; gap: 10px; }
.branch-head img { width: 50px; height: 50px; object-fit: contain; filter: drop-shadow(0 8px 10px #000); }
.branch-head h2 { margin: 0; color: var(--frost); font-size: 18px; }
.branch-head h2 small { display: block; margin-top: 2px; color: var(--gold); font-size: 10px; font-weight: 400; letter-spacing: .04em; }
.branch-head p { margin: 7px 0 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.branch-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.branch-tag { padding: 3px 6px; border-radius: 99px; border: 1px solid rgba(99,194,229,.18); color: #a6c7d7; background: rgba(1,8,13,.45); font-size: 8px; }

.skill-tree { position: relative; display: grid; gap: 9px; }
.skill-tree::before { content: ''; position: absolute; left: 24px; top: 18px; bottom: 18px; width: 2px; background: linear-gradient(#63d8ff, rgba(73,125,151,.28) 70%, transparent); box-shadow: 0 0 8px rgba(99,216,255,.22); }
.skill-node-v4 { position: relative; display: grid; grid-template-columns: 50px minmax(0,1fr) auto; gap: 9px; padding: 10px; border: 1px solid rgba(84,157,190,.24); border-radius: 12px; background: linear-gradient(145deg, rgba(19,42,57,.93), rgba(3,11,18,.97)); box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 7px 18px rgba(0,0,0,.22); }
.skill-node-v4.locked { opacity: .53; filter: saturate(.65); }
.skill-node-v4.maxed { border-color: rgba(222,181,89,.55); background: radial-gradient(circle at 0 50%, rgba(190,138,46,.12), transparent 36%), linear-gradient(145deg, rgba(38,36,25,.94), rgba(10,10,8,.98)); }
.skill-node-v4.available { border-color: rgba(94,217,255,.68); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 20px rgba(64,190,240,.12); }
.skill-node-v4 .skill-icon { position: relative; z-index: 1; width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(102,203,239,.25); border-radius: 11px; background: radial-gradient(circle, rgba(73,160,195,.24), rgba(3,10,16,.85)); }
.skill-node-v4 .skill-icon img { width: 38px; height: 38px; object-fit: contain; filter: drop-shadow(0 5px 6px #000); }
.skill-copy h3 { margin: 0; color: var(--frost); font-size: 13px; }
.skill-copy h3 span { color: var(--gold); font-size: 10px; }
.skill-current { margin: 4px 0 0; color: #d9e9f2; font-size: 10px; line-height: 1.35; }
.skill-next { margin: 3px 0 0; color: #78cfea; font-size: 9px; line-height: 1.35; }
.skill-mechanic { margin: 5px 0 0; color: var(--muted); font-size: 9px; line-height: 1.35; }
.skill-lock-reason { display: inline-block; margin-top: 5px; color: #d69a8a; font-size: 8px; }
.skill-scope { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 6px; }
.skill-scope span { padding: 2px 5px; border: 1px solid rgba(103,176,204,.15); border-radius: 99px; color: #6e9fb4; font-size: 7px; }
.skill-rank-pips { display: flex; gap: 3px; margin-top: 7px; }
.skill-rank-pips i { width: 12px; height: 4px; border-radius: 99px; background: #1b3444; }
.skill-rank-pips i.on { background: linear-gradient(90deg, #43b6e3, #bdeeff); box-shadow: 0 0 6px rgba(91,211,255,.45); }
.skill-node-v4.maxed .skill-rank-pips i.on { background: linear-gradient(90deg, #a87827, #f1d277); box-shadow: 0 0 6px rgba(222,181,89,.42); }
.skill-plus { align-self: center; width: 34px; height: 34px; padding: 0; border-radius: 9px; font-size: 20px; }

.skill-reset-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(104,185,216,.13); }
.skill-reset-row p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.4; }

.guild-directory { display: grid; gap: 7px; }
.guild-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; align-items: center; padding: 9px; border: 1px solid var(--line); border-radius: 10px; background: rgba(3,11,18,.66); }
.guild-row h3 { margin: 0; color: var(--frost); font-size: 12px; }
.guild-row p { margin: 3px 0 0; color: var(--muted); font-size: 9px; }
.arena-history { display: grid; gap: 5px; }
.arena-history-row { display: flex; justify-content: space-between; gap: 8px; padding: 7px 8px; border: 1px solid rgba(99,177,207,.12); border-radius: 8px; color: var(--muted); background: rgba(3,10,16,.52); font-size: 9px; }
.arena-history-row.win b { color: #78dda8; }
.arena-history-row.loss b { color: #e68791; }

@media (min-width: 430px) {
  .branch-selector { grid-template-columns: repeat(3, 1fr); }
  .branch-card { grid-template-columns: 34px minmax(0,1fr); }
  .branch-card > img { width: 32px; height: 32px; }
  .branch-card strong { grid-column: 1 / -1; justify-self: end; margin-top: -18px; }
}
.auth-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.auth-tabs .tab { padding-inline: 5px; font-size: 9px; }
.recovery-code-box { margin: 12px 0; padding: 12px; border: 1px solid rgba(221,177,82,.45); border-radius: 12px; background: radial-gradient(circle at 50% 0, rgba(221,177,82,.15), transparent 58%), rgba(20,15,6,.78); text-align: center; }
.recovery-code-box code { display: block; margin-top: 8px; color: #ffe29a; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; user-select: all; }
.guild-create-grid { display: grid; grid-template-columns: minmax(0,1fr) 84px; gap: 7px; }
.guild-members { display: grid; gap: 5px; margin-top: 8px; }
.guild-member { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; padding: 7px 8px; border: 1px solid rgba(99,177,207,.12); border-radius: 8px; background: rgba(3,10,16,.52); font-size: 9px; }
.guild-member b { color: var(--frost); }
.guild-member span { color: var(--muted); }

.warning-copy { color: #d9b98a; border-left: 2px solid rgba(221,177,82,.48); padding-left: 8px; }

/* ---- Admin panel v0.4.7 ---- */
.admin-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin:0 0 10px; }
.admin-tab { min-height:44px; border:1px solid var(--line); border-radius:12px; background:linear-gradient(155deg,rgba(22,44,59,.88),rgba(3,10,16,.96)); color:var(--muted); font:inherit; font-weight:700; }
.admin-tab.active { color:var(--frost); border-color:rgba(98,215,255,.7); box-shadow:0 0 18px rgba(71,196,241,.15), inset 0 1px 0 rgba(255,255,255,.05); }
.admin-panel { border-color:rgba(112,210,245,.22); background:radial-gradient(circle at 100% 0,rgba(91,191,232,.08),transparent 46%),linear-gradient(155deg,rgba(14,30,43,.94),rgba(3,9,15,.98)); }
.admin-search-row { display:grid; grid-template-columns:minmax(0,1fr) 86px; gap:7px; margin-bottom:9px; }
.admin-player-list { display:grid; gap:6px; }
.admin-player-row { width:100%; text-align:left; display:grid; gap:2px; padding:9px; border:1px solid rgba(96,174,207,.18); border-radius:10px; background:rgba(3,11,18,.62); color:var(--text); font:inherit; }
.admin-player-row.active, .admin-player-row:hover { border-color:rgba(100,216,255,.56); background:rgba(17,44,60,.78); }
.admin-player-row b { color:var(--frost); font-size:12px; }
.admin-player-row span { color:var(--muted); font-size:9px; }
.compact-kv .kv { padding-block:2px; }
.admin-resource-grid { display:grid; grid-template-columns:1fr; gap:7px; margin-top:9px; }
.admin-generator-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin:9px 0; }
.asset-grid-admin { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.asset-card-admin { padding:8px; border:1px solid rgba(99,177,207,.16); border-radius:12px; background:linear-gradient(rgba(3,11,18,.72),rgba(3,11,18,.72)),var(--card-texture); background-size:100% 100%,100% 100%; text-align:center; min-height:174px; display:flex; flex-direction:column; align-items:center; gap:5px; }
.asset-card-admin.ready { border-color:rgba(103,222,163,.38); }
.asset-card-admin.missing { border-color:rgba(221,177,82,.28); }
.asset-card-admin img { width:70px; height:70px; object-fit:contain; image-rendering:auto; filter:drop-shadow(0 6px 8px #000); }
.asset-card-admin b { color:var(--frost); font-size:10px; line-height:1.2; min-height:24px; }
.asset-card-admin span { color:var(--muted); font-size:8px; line-height:1.25; min-height:22px; }
.admin-task-list, .admin-log-list { display:grid; gap:7px; }
.admin-task-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px; align-items:center; padding:8px; border:1px solid rgba(99,177,207,.14); border-radius:10px; background:rgba(3,10,16,.58); }
.admin-task-row b, .admin-log-row b { display:block; color:var(--frost); font-size:10px; }
.admin-task-row span, .admin-log-row span { display:block; color:var(--muted); font-size:8px; line-height:1.35; overflow-wrap:anywhere; }
.admin-task-row img { width:52px; height:52px; object-fit:contain; margin-top:5px; border-radius:8px; border:1px solid rgba(99,177,207,.18); background:rgba(0,0,0,.25); }
.admin-task-row small { display:block; color:#e39792; font-size:8px; margin-top:4px; overflow-wrap:anywhere; }
.admin-log-row { display:grid; gap:3px; padding:8px; border:1px solid rgba(99,177,207,.13); border-radius:10px; background:rgba(3,10,16,.58); }
.admin-log-row code { display:block; color:#8db7c7; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:8px; overflow-wrap:anywhere; }
@media (min-width:430px){ .asset-grid-admin{grid-template-columns:repeat(3,minmax(0,1fr));} .admin-resource-grid{grid-template-columns:1fr 1fr;} }

.hero-portrait-panel { display: grid; grid-template-columns: 104px minmax(0,1fr); gap: 12px; align-items: center; }
.hero-portrait-panel img { width: 104px; height: 104px; object-fit: contain; image-rendering: pixelated; border-radius: 12px; border: 1px solid var(--line-bright); background: rgba(3,11,18,.58); box-shadow: 0 8px 22px rgba(0,0,0,.42); }
.hero-portrait-panel h2 { margin: 0 0 4px; color: var(--frost); font-size: 18px; }
.hero-portrait-panel p { margin: 0; color: var(--muted); font-size: 11px; }
.class-card { grid-template-columns: 86px minmax(0,1fr) !important; }
.class-card img { width: 82px !important; height: 82px !important; border-radius: 10px; border: 1px solid rgba(103,216,255,.22); background: rgba(3,11,18,.6); }

/* v0.4.7: холодный объёмный интерфейс и компактная мобильная компоновка */
:root {
  --panel-0: rgba(5, 17, 29, .98);
  --panel-1: rgba(8, 30, 48, .98);
  --panel-2: rgba(13, 43, 64, .96);
  --line: #315f7a;
  --line-bright: #83dfff;
  --ice: #72e1ff;
  --frost: #dcf8ff;
  --blue: #1f8fc6;
  --muted: #9cbdd2;
}
body {
  background:
    radial-gradient(120% 65% at 50% -12%, rgba(36, 126, 177, .42), transparent 62%),
    radial-gradient(70% 45% at 10% 35%, rgba(20, 73, 110, .2), transparent 70%),
    linear-gradient(180deg, #06131f 0%, #02070d 100%);
}
.panel {
  border-color: rgba(104, 191, 232, .34);
  background:
    linear-gradient(160deg, rgba(20, 53, 75, .97), rgba(5, 18, 30, .985) 70%),
    var(--panel-texture);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, .58),
    0 2px 0 rgba(133, 225, 255, .08),
    inset 0 1px 0 rgba(226, 249, 255, .11),
    inset 0 -4px 10px rgba(0, 0, 0, .38);
}
.panel.frost-panel {
  border-color: rgba(114, 225, 255, .56);
  background: linear-gradient(160deg, rgba(22, 67, 91, .96), rgba(5, 21, 35, .985) 72%), var(--panel-texture);
}
.button {
  position: relative;
  overflow: hidden;
  min-height: 43px;
  border-radius: 11px;
  border-color: rgba(114, 199, 237, .62);
  background:
    linear-gradient(180deg, rgba(50, 94, 121, .98) 0%, rgba(23, 55, 76, .98) 52%, rgba(9, 29, 45, .99) 100%),
    var(--button-secondary-texture);
  box-shadow:
    0 6px 0 rgba(1, 10, 17, .92),
    0 10px 18px rgba(0, 0, 0, .38),
    inset 0 2px 0 rgba(225, 249, 255, .18),
    inset 0 -2px 0 rgba(0, 0, 0, .48),
    inset 1px 0 0 rgba(177, 231, 255, .08),
    inset -1px 0 0 rgba(0, 0, 0, .32);
  text-shadow: 0 1px 2px #00111d;
}
.button::before {
  content: "";
  position: absolute;
  left: 7px;
  right: 7px;
  top: 4px;
  height: 1px;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, rgba(222, 249, 255, .45), transparent);
  pointer-events: none;
}
.button:hover { filter: brightness(1.11) saturate(1.08); }
.button:active { transform: translateY(4px) scale(.99); box-shadow: 0 2px 0 rgba(1,10,17,.92), inset 0 1px 0 rgba(225,249,255,.12); }
.button:disabled { transform: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.button.ice, .button.primary {
  background: linear-gradient(180deg, #43b9df 0%, #1c789f 52%, #0a3d5a 100%), var(--button-primary-texture);
  border-color: rgba(149, 235, 255, .9);
  box-shadow: 0 6px 0 #052438, 0 10px 18px rgba(0,0,0,.4), inset 0 2px 0 rgba(238,253,255,.3), inset 0 -2px 0 rgba(0,0,0,.42);
}
.button.gold { box-shadow: 0 6px 0 #2c1d06, 0 10px 18px rgba(0,0,0,.4), inset 0 2px 0 rgba(255,244,190,.24), inset 0 -2px 0 rgba(0,0,0,.45); }
.button.red { box-shadow: 0 6px 0 #2c0911, 0 10px 18px rgba(0,0,0,.4), inset 0 2px 0 rgba(255,220,225,.18), inset 0 -2px 0 rgba(0,0,0,.45); }
.button.ghost { box-shadow: 0 4px 0 rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.05); }

.city-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin: 0 0 12px;
}
.city-tab {
  min-height: 70px;
  padding: 8px 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid #315f7a;
  border-radius: 12px;
  color: var(--muted);
  background: linear-gradient(180deg, rgba(25,61,84,.98), rgba(7,24,39,.98));
  box-shadow: 0 5px 0 #020b12, inset 0 1px 0 rgba(255,255,255,.1);
}
.city-tab img { width: 29px; height: 29px; object-fit: contain; }
.city-tab span { display: flex; flex-direction: column; align-items: center; font-size: 11px; font-weight: 700; }
.city-tab small { color: var(--dim); font-size: 9px; }
.city-tab.active { color: var(--frost); border-color: var(--ice); background: linear-gradient(180deg, rgba(41,126,162,.98), rgba(11,53,76,.99)); box-shadow: 0 5px 0 #062b3e, 0 0 18px rgba(75,210,255,.18), inset 0 1px 0 rgba(255,255,255,.2); }
.city-tab:disabled { opacity: .38; filter: grayscale(.5); }
.city-subview > .screen-head { display: none; }

.inventory-control-grid, .admin-resource-grid, .admin-generator-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.inventory-control-grid label, .content-field { display: flex; flex-direction: column; gap: 5px; color: var(--muted); font-size: 11px; }
.toggle-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.toggle-card { min-height: 68px; display: flex; align-items: flex-start; gap: 8px; padding: 9px; border: 1px solid rgba(92,171,211,.35); border-radius: 10px; background: rgba(3,15,25,.58); }
.toggle-card input { margin-top: 3px; accent-color: var(--ice); }
.toggle-card span { display: flex; flex-direction: column; gap: 2px; }
.toggle-card b { color: var(--frost); font-size: 12px; }
.toggle-card small { color: var(--muted); font-size: 10px; }

.admin-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.admin-self-card { border-color: rgba(227,189,113,.52); }
.content-record-list { max-height: 360px; overflow-y: auto; }
.content-fields { display: grid; grid-template-columns: 1fr; gap: 10px; }
.content-textarea { min-height: 105px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; }
.content-editor-panel { border-color: rgba(114,225,255,.48); }

@media (max-width: 390px) {
  .city-tabs { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .toggle-row, .inventory-control-grid, .admin-resource-grid, .admin-generator-grid { grid-template-columns: 1fr; }
  .admin-tabs { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* ================================================================
   v0.4.7 — компактный мобильный интерфейс, достижения и автокрафт
   ================================================================ */

.auto-craft-status {
  margin-top: 10px;
  padding: 9px 10px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 9px;
  align-items: center;
  border: 1px solid rgba(103, 216, 255, .42);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(20, 68, 92, .72), rgba(3, 19, 31, .84));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 5px 15px rgba(0,0,0,.3);
}
.auto-craft-status::before {
  content: "∞";
  grid-row: 1 / 3;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(112, 225, 255, .65);
  border-radius: 9px;
  color: var(--frost);
  background: rgba(15, 83, 113, .72);
  font-size: 20px;
  font-weight: 700;
  text-shadow: 0 0 10px rgba(103,216,255,.55);
}
.auto-craft-status b { color: var(--frost); font-size: 12px; }
.auto-craft-status span { color: var(--gold); font-size: 11px; }
.auto-craft-status small { grid-column: 2; color: var(--muted); font-size: 9px; }
.queue-job.auto-job {
  border-color: rgba(114, 225, 255, .53);
  background: linear-gradient(145deg, rgba(19, 67, 91, .66), rgba(3, 16, 26, .7));
  box-shadow: inset 3px 0 0 rgba(103,216,255,.7), inset 0 1px 0 rgba(255,255,255,.05);
}
.queue-job.auto-job .queue-job-head b::after {
  content: " · авто";
  color: var(--ice);
  font-size: 9px;
  font-weight: 400;
}

.avatar-frame {
  --frame-primary: #526d86;
  --frame-accent: #b7e8ff;
  position: relative;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  padding: 7px;
  border-radius: 18px;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 45%, rgba(255,255,255,.10), transparent 55%),
    linear-gradient(145deg, color-mix(in srgb, var(--frame-accent) 45%, #091621), color-mix(in srgb, var(--frame-primary) 68%, #02070b));
  box-shadow:
    0 9px 22px rgba(0,0,0,.56),
    0 0 17px color-mix(in srgb, var(--frame-accent) 25%, transparent),
    inset 0 1px 0 rgba(255,255,255,.2),
    inset 0 -2px 5px rgba(0,0,0,.56);
}
.avatar-frame::before,
.avatar-frame::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 2;
}
.avatar-frame::before {
  inset: 2px;
  border: 2px solid var(--frame-accent);
  border-radius: 16px;
  clip-path: polygon(0 0, 37% 0, 42% 5%, 58% 5%, 63% 0, 100% 0, 100% 37%, 95% 42%, 95% 58%, 100% 63%, 100% 100%, 63% 100%, 58% 95%, 42% 95%, 37% 100%, 0 100%, 0 63%, 5% 58%, 5% 42%, 0 37%);
  box-shadow: inset 0 0 9px var(--frame-primary), 0 0 7px color-mix(in srgb, var(--frame-accent) 55%, transparent);
}
.avatar-frame::after {
  inset: 5px;
  border: 1px solid color-mix(in srgb, var(--frame-primary) 80%, white);
  border-radius: 13px;
  opacity: .75;
}
.avatar-frame > img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: 0 !important;
  border-radius: 11px !important;
  background: radial-gradient(circle at 50% 35%, rgba(35,75,101,.74), rgba(1,8,13,.92)) !important;
  box-shadow: inset 0 0 16px rgba(0,0,0,.72) !important;
  image-rendering: pixelated;
}
.hero-avatar-frame { width: 94px; height: 94px; }
.achievement-avatar { width: 100px; height: 100px; }
.frame-preview { width: 74px; height: 74px; }
.frame-caption { display: block; margin-top: 5px; color: var(--gold); font-size: 9px; }

.achievement-profile {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
  border-color: rgba(171, 217, 238, .45);
}
.achievement-profile h2 { margin: 0 0 3px; color: var(--frost); font-size: 18px; }
.achievement-profile p { margin: 0; color: var(--muted); font-size: 10px; }
.achievement-summary {
  margin-top: 9px;
  display: grid;
  grid-template-columns: auto 1fr auto 1fr;
  gap: 3px 6px;
  align-items: baseline;
}
.achievement-summary b { color: var(--gold); font-size: 18px; }
.achievement-summary span { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .05em; }

.achievement-filters { display: flex; gap: 6px; overflow-x: auto; padding: 2px 1px 5px; scrollbar-width: none; }
.achievement-filters::-webkit-scrollbar { display: none; }
.achievement-filter { flex: 0 0 auto; min-height: 31px; padding: 5px 9px; }
.achievement-filter small { margin-left: 4px; color: inherit; opacity: .72; }
.achievement-filter.active { border-color: currentColor; box-shadow: 0 0 13px currentColor; }

.achievement-grid { display: grid; gap: 8px; }
.achievement-card {
  --rarity-color: #8ea6b8;
  position: relative;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 9px;
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--rarity-color) 52%, #20384a);
  border-left: 3px solid var(--rarity-color);
  border-radius: 11px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--rarity-color) 8%, rgba(12,30,44,.96)), rgba(3,12,20,.96)),
    var(--card-texture);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 5px 15px rgba(0,0,0,.28);
}
.achievement-card.rarity-common, .rarity-common { --rarity-color: #8fa8ba; }
.achievement-card.rarity-silver, .rarity-silver { --rarity-color: #d3e6f2; }
.achievement-card.rarity-gold, .rarity-gold { --rarity-color: #f0c66a; }
.achievement-card.rarity-platinum, .rarity-platinum { --rarity-color: #91f1f2; }
.achievement-card.locked { filter: saturate(.48); opacity: .68; }
.achievement-card.unlocked { box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 17px color-mix(in srgb, var(--rarity-color) 15%, transparent), 0 6px 17px rgba(0,0,0,.32); }
.achievement-card.unlocked::after {
  content: "✓";
  position: absolute;
  right: 7px;
  top: 6px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--rarity-color) 70%, white);
  border-radius: 50%;
  color: #031118;
  background: var(--rarity-color);
  font-size: 11px;
  font-weight: 900;
}
.achievement-icon { position: relative; width: 58px; height: 58px; padding: 4px; border: 1px solid color-mix(in srgb, var(--rarity-color) 55%, #24445a); border-radius: 10px; background: rgba(1,8,13,.72); }
.achievement-icon img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.rarity-mark { position: absolute; left: -4px; right: -4px; bottom: -7px; padding: 1px 3px; border: 1px solid color-mix(in srgb, var(--rarity-color) 65%, #172a37); border-radius: 99px; color: #061017; background: var(--rarity-color); text-align: center; font-size: 7px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.achievement-copy h3 { margin: 0 22px 3px 0; color: var(--frost); font-size: 13px; }
.achievement-copy p { margin: 0 0 3px; color: var(--muted); font-size: 10px; line-height: 1.3; }
.achievement-copy small { display: block; color: color-mix(in srgb, var(--rarity-color) 70%, var(--muted)); font-size: 8px; }
.achievement-copy .frame-reward { margin-top: 3px; color: var(--gold); }
.achievement-progress { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; gap: 3px 7px; align-items: center; }
.achievement-progress .progress { grid-column: 1 / -1; height: 7px; }
.achievement-progress span { color: var(--muted); font-size: 8px; }
.achievement-progress b { color: var(--rarity-color); font-size: 9px; }

.frame-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.frame-card {
  --rarity-color: #8fa8ba;
  min-width: 0;
  padding: 9px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  border: 1px solid color-mix(in srgb, var(--rarity-color) 46%, #28485d);
  border-radius: 12px;
  color: var(--text);
  background: linear-gradient(150deg, color-mix(in srgb, var(--rarity-color) 7%, #102638), #06121d);
  box-shadow: 0 5px 13px rgba(0,0,0,.33), inset 0 1px 0 rgba(255,255,255,.05);
  text-align: center;
}
.frame-card.rarity-common { --rarity-color: #8fa8ba; }
.frame-card.rarity-silver { --rarity-color: #d3e6f2; }
.frame-card.rarity-gold { --rarity-color: #f0c66a; }
.frame-card.rarity-platinum { --rarity-color: #91f1f2; }
.frame-card.selected { border-color: var(--rarity-color); box-shadow: 0 0 18px color-mix(in srgb, var(--rarity-color) 28%, transparent), inset 0 1px 0 rgba(255,255,255,.09); }
.frame-card span { min-width: 0; }
.frame-card b { display: block; color: var(--frost); font-size: 11px; }
.frame-card small { display: block; margin-top: 2px; color: var(--muted); font-size: 8px; line-height: 1.25; }
.frame-card em { color: var(--rarity-color); font-size: 9px; font-style: normal; font-weight: 700; }

.admin-achievement-owned { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.achievement-mini {
  --rarity-color: #8fa8ba;
  padding: 4px 7px;
  border: 1px solid color-mix(in srgb, var(--rarity-color) 58%, #27465a);
  border-radius: 99px;
  color: var(--rarity-color);
  background: color-mix(in srgb, var(--rarity-color) 8%, rgba(2,11,18,.78));
  font-size: 9px;
}
.achievement-mini.rarity-common { --rarity-color: #8fa8ba; }
.achievement-mini.rarity-silver { --rarity-color: #d3e6f2; }
.achievement-mini.rarity-gold { --rarity-color: #f0c66a; }
.achievement-mini.rarity-platinum { --rarity-color: #91f1f2; }
.compact-toggle { min-height: 52px; margin: 8px 0; }

/* Пять вкладок админ-панели не растягивают экран на телефоне. */
.admin-tabs { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; overflow-x: auto; }
.admin-tab { min-width: 0; min-height: 39px; padding: 5px 3px; font-size: 9px; }

/* На смартфоне уменьшаем интерфейс примерно на 12–18% без потери областей нажатия. */
@media (max-width: 619px) {
  body { font-size: 13px; line-height: 1.28; }
  .topbar { padding: calc(6px + var(--safe-top)) 8px 6px; }
  .topbar::after { left: 8px; right: 8px; }
  .menu-button { left: 8px; top: calc(7px + var(--safe-top)); width: 36px; height: 36px; padding: 0 9px; gap: 4px; border-radius: 9px; }
  .hero-head { min-height: 36px; padding-left: 44px; padding-right: 143px; }
  .hero-name { max-width: 130px; font-size: 14px; letter-spacing: .04em; }
  .hero-meta { font-size: 9px; }
  .resource-strip { right: 8px; top: calc(7px + var(--safe-top)); gap: 3px; }
  .resource-pill { min-width: 39px; height: 32px; padding: 3px 4px; gap: 2px; border-radius: 8px; font-size: 9px; }
  .resource-pill img { width: 15px; height: 15px; }
  .resource-pill b { max-width: 45px; }
  .xp-track { height: 12px; margin-top: 5px; }
  .xp-track span { font-size: 8px; }

  .view { padding: 9px 8px calc(74px + var(--safe-bottom)); min-height: calc(100dvh - 65px); }
  .screen-head { margin-bottom: 7px; }
  .screen-head .eyebrow { margin-bottom: 1px; font-size: 8px; letter-spacing: .15em; }
  .screen-head h1 { font-size: 18px; letter-spacing: .055em; }
  .screen-head p { margin-top: 2px; font-size: 10px; line-height: 1.25; }
  .panel { margin-bottom: 8px; padding: 9px; border-radius: 10px; box-shadow: 0 7px 18px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.045), inset 0 -1px 0 rgba(0,0,0,.52); }
  .panel-title { gap: 6px; margin-bottom: 7px; font-size: 11px; letter-spacing: .065em; }
  .panel-title img { width: 18px; height: 18px; }
  .panel-title small { font-size: 8px; }
  .panel-copy { font-size: 10px; line-height: 1.3; }

  .button { min-height: 35px; padding: 7px 9px; border-radius: 9px; font-size: 11px; box-shadow: 0 4px 0 rgba(1,10,17,.92), 0 7px 13px rgba(0,0,0,.34), inset 0 1px 0 rgba(225,249,255,.15), inset 0 -2px 0 rgba(0,0,0,.42); }
  .button:active { transform: translateY(3px) scale(.99); box-shadow: 0 1px 0 rgba(1,10,17,.92), inset 0 1px 0 rgba(225,249,255,.1); }
  .button.compact { min-height: 29px; padding: 5px 7px; font-size: 10px; }
  .button.tiny { min-height: 26px; padding: 3px 6px; font-size: 9px; }
  .button-row { gap: 6px; }
  .button-row .button { flex-basis: 104px; }

  .battle-scene { min-height: 315px; padding: 10px 9px 9px; border-radius: 12px; }
  .zone-chip { padding: 4px 7px; font-size: 9px; }
  .scene-center { margin: 0 0 6px; }
  .enemy-frame { width: 165px; height: 165px; }
  .enemy-art { width: 150px; height: 150px; }
  .boss-scene .enemy-art { width: 164px; height: 164px; }
  .enemy-title h2 { font-size: 17px; }
  .enemy-title p { font-size: 9px; }
  .hp-track, .meter { height: 15px; }
  .hp-track span, .meter span { font-size: 8px; }
  .combat-bars { gap: 4px; }
  .combat-meta { margin-top: 5px; font-size: 8px; }
  .zone-grid { gap: 5px; }
  .zone-card { min-height: 64px; padding: 7px; border-radius: 8px; }
  .zone-card b { font-size: 10px; }
  .zone-card small { font-size: 8px; }
  .log-list { max-height: 111px; gap: 4px; }
  .log-entry { padding: 4px 6px; font-size: 9px; }
  .empty-state { padding: 13px 7px; font-size: 10px; }

  .battle-dock { min-height: 54px; padding: 6px 8px calc(6px + var(--safe-bottom)); }
  .drawer { width: min(278px, 84vw); }
  .drawer-hero { min-height: 76px; padding: 11px 10px 9px; grid-template-columns: 47px minmax(0,1fr) 28px; gap: 8px; }
  .drawer-emblem { width: 47px; height: 47px; border-radius: 10px; }
  .drawer-name { font-size: 15px; }
  .drawer-meta, .drawer-account { font-size: 9px; }
  .drawer-nav { padding: 4px 0; }
  .nav-button { min-height: 39px; padding: 6px 10px; font-size: 11px; }
  .nav-button img { width: 22px; height: 22px; }
  .drawer-foot { padding: 7px 10px calc(7px + var(--safe-bottom)); }

  .city-tabs { gap: 5px; margin-bottom: 8px; }
  .city-tab { min-height: 55px; padding: 5px 3px; border-radius: 9px; box-shadow: 0 3px 0 #020b12, inset 0 1px 0 rgba(255,255,255,.08); }
  .city-tab img { width: 22px; height: 22px; }
  .city-tab span { font-size: 9px; }
  .city-tab small { font-size: 7px; }

  .forge-tier-strip { gap: 4px; }
  .tier-button { min-height: 43px; padding: 5px 4px; border-radius: 8px; }
  .tier-button b { font-size: 13px; }
  .tier-button span { font-size: 7px; }
  .forge-slot-grid { gap: 5px; }
  .forge-slot { min-height: 58px; padding: 6px 4px; border-radius: 8px; font-size: 9px; }
  .forge-slot img { width: 27px; height: 27px; }
  .cost-row { gap: 4px; }
  .cost-chip { padding: 3px 5px; font-size: 8px; }
  .cost-chip img { width: 13px; height: 13px; }
  .queue-job { padding: 6px; border-radius: 8px; }
  .queue-job-head { font-size: 9px; }
  .auto-craft-status { margin-top: 7px; padding: 7px; }

  .hero-portrait-panel { grid-template-columns: 82px minmax(0,1fr); gap: 9px; }
  .hero-avatar-frame { width: 82px; height: 82px; padding: 6px; }
  .hero-portrait-panel h2 { font-size: 15px; }
  .hero-portrait-panel p { font-size: 9px; }
  .equipment-grid { gap: 5px; }
  .equipment-slot { min-height: 78px; padding: 6px 4px; border-radius: 8px; }
  .equipment-slot img { width: 37px; height: 37px; }
  .slot-name { font-size: 8px; }
  .item-name { font-size: 9px; }
  .item-row { min-height: 54px; padding: 6px; gap: 7px; }
  .item-row img { width: 39px; height: 39px; }
  .item-main b { font-size: 10px; }
  .item-main small, .item-power em { font-size: 8px; }
  .item-power b { font-size: 11px; }
  .toggle-card { min-height: 56px; padding: 7px; }
  .toggle-card b { font-size: 10px; }
  .toggle-card small { font-size: 8px; }

  .achievement-profile { grid-template-columns: 86px minmax(0,1fr); gap: 9px; }
  .achievement-avatar { width: 86px; height: 86px; }
  .achievement-profile h2 { font-size: 15px; }
  .achievement-summary b { font-size: 15px; }
  .achievement-card { grid-template-columns: 51px minmax(0,1fr); gap: 7px; padding: 7px; }
  .achievement-icon { width: 51px; height: 51px; }
  .achievement-copy h3 { font-size: 11px; }
  .achievement-copy p { font-size: 9px; }
  .frame-gallery { gap: 6px; }
  .frame-card { padding: 7px; }
  .frame-preview { width: 62px; height: 62px; }

  .stat-grid { gap: 5px; }
  .stat-card { padding: 7px; }
  .stat-card span { font-size: 8px; }
  .stat-card b { font-size: 13px; }
  .kv { padding: 5px 0; font-size: 10px; }
  .text-input, .text-area { min-height: 35px; padding: 7px 8px; font-size: 11px; }
  .text-area { min-height: 82px; }
  .admin-tabs { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .admin-tab { min-height: 34px; font-size: 9px; }
  .admin-generator-grid, .admin-resource-grid { gap: 6px; }
}

@media (max-width: 370px) {
  .hero-head { padding-right: 130px; }
  .resource-pill { min-width: 36px; padding: 2px 3px; }
  .resource-pill img { width: 13px; height: 13px; }
  .screen-head h1 { font-size: 17px; }
  .frame-gallery, .zone-grid { grid-template-columns: 1fr; }
  .achievement-profile { grid-template-columns: 76px minmax(0,1fr); }
  .achievement-avatar { width: 76px; height: 76px; }
  .admin-tabs { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* Frostforge v0.4.7: prestige labels and class-specific forge blueprints */
.prestige-name { color: inherit; font: inherit; }
.prestige-glow {
  color: #fff;
  text-shadow: 0 0 4px rgba(255,255,255,.95), 0 0 10px rgba(218,242,255,.9), 0 0 18px rgba(151,213,255,.7);
}
.hero-name.prestige-glow,
.drawer-name.prestige-glow { color: #fff; }

.forge-blueprint-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 8px 0 10px;
}
.forge-blueprint {
  min-height: 76px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 8px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--text);
  background: linear-gradient(180deg, rgba(25,52,72,.96), rgba(7,19,30,.98));
  box-shadow: 0 4px 0 #02080d, inset 0 1px 0 rgba(255,255,255,.08);
}
.forge-blueprint.active {
  border-color: var(--ice);
  box-shadow: 0 4px 0 #02080d, 0 0 15px rgba(99,213,255,.22), inset 0 1px 0 rgba(255,255,255,.12);
}
.forge-blueprint:disabled { opacity: .38; }
.forge-blueprint img { width: 48px; height: 48px; object-fit: contain; }
.forge-blueprint b { display: block; font-size: 12px; line-height: 1.15; }
.forge-blueprint small { display: block; margin-top: 4px; color: var(--dim); font-size: 9px; line-height: 1.2; }
.forge-selected-card {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin: 8px 0;
  padding: 9px;
  border: 1px solid var(--line-hi);
  border-radius: 11px;
  background: linear-gradient(180deg, rgba(18,43,62,.96), rgba(7,18,29,.98));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 5px 16px rgba(0,0,0,.32);
}
.forge-selected-card img { width: 62px; height: 62px; object-fit: contain; }
.forge-selected-card h3 { margin: 0 0 4px; color: var(--frost); font-size: 14px; }
.forge-selected-card p { margin: 0; color: var(--dim); font-size: 10px; line-height: 1.35; }
.forge-selected-card small { display: block; margin-top: 5px; color: var(--gold); font-size: 9px; }
.queue-item-name { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.queue-item-name img { width: 25px; height: 25px; object-fit: contain; flex: 0 0 auto; }
.queue-item-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 619px) {
  .forge-blueprint-grid { gap: 5px; }
  .forge-blueprint { min-height: 62px; grid-template-columns: 37px minmax(0,1fr); gap: 6px; padding: 6px; border-radius: 8px; }
  .forge-blueprint img { width: 37px; height: 37px; }
  .forge-blueprint b { font-size: 9px; }
  .forge-blueprint small { font-size: 7px; }
  .forge-selected-card { grid-template-columns: 48px minmax(0,1fr); padding: 7px; gap: 7px; }
  .forge-selected-card img { width: 48px; height: 48px; }
  .forge-selected-card h3 { font-size: 11px; }
  .forge-selected-card p, .forge-selected-card small { font-size: 8px; }
}

/* Frostforge v0.4.7: объединённые разделы, саб-классы и общий чат */
.section-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 0 0 9px;
}
.profile-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.section-tab {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--muted);
  background: linear-gradient(180deg, rgba(21,48,68,.96), rgba(6,17,27,.98));
  box-shadow: 0 4px 0 #02090f, inset 0 1px 0 rgba(255,255,255,.08);
}
.section-tab.active {
  color: var(--frost);
  border-color: var(--ice);
  background: linear-gradient(180deg, rgba(30,83,111,.98), rgba(8,29,43,.98));
  box-shadow: 0 4px 0 #02090f, 0 0 16px rgba(99,213,255,.20), inset 0 1px 0 rgba(255,255,255,.12);
}
.section-tab img { width: 25px; height: 25px; object-fit: contain; }
.section-tab span { display: flex; flex-direction: column; align-items: flex-start; font: inherit; font-weight: 700; }
.section-tab small { color: var(--dim); font-size: 8px; }
.section-subview > .screen-head { display: none; }

.tier-button { min-width: 92px; }
.tier-button b { font-size: 10px; line-height: 1.15; }

.achievement-filters.vertical {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  overflow: visible;
  padding: 0;
}
.achievement-filters.vertical .achievement-filter {
  width: 100%;
  min-height: 37px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 10px;
  border-radius: 9px;
}
.achievement-filters.vertical .achievement-filter small { margin-left: auto; }

.subclass-overview { background: linear-gradient(150deg, rgba(15,42,61,.98), rgba(6,17,28,.98)); }
.subclass-tree { display: flex; flex-direction: column; gap: 8px; }
.subclass-node {
  position: relative;
  display: grid;
  grid-template-columns: 28px 52px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 76px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: linear-gradient(180deg, rgba(20,45,63,.96), rgba(6,17,27,.98));
  box-shadow: 0 5px 14px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.05);
}
.subclass-node:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 21px;
  bottom: -9px;
  width: 2px;
  height: 9px;
  background: var(--line-hi);
}
.subclass-node.unlocked { border-color: rgba(99,213,255,.58); }
.subclass-node.current { border-color: var(--gold); box-shadow: 0 0 18px rgba(217,182,115,.20), inset 0 1px 0 rgba(255,255,255,.08); }
.subclass-node.locked { opacity: .48; filter: saturate(.55); }
.subclass-index { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-hi); color: var(--frost); background: #071521; font-weight: 700; }
.subclass-node.current .subclass-index { color: #fff1c7; border-color: var(--gold); }
.subclass-node img { width: 52px; height: 52px; object-fit: contain; }
.subclass-node h3 { margin: 0 0 3px; color: var(--frost); font-size: 13px; }
.subclass-node p { margin: 0 0 4px; color: var(--muted); font-size: 10px; line-height: 1.3; }
.subclass-node small { color: var(--gold); font-size: 9px; }

.chat-panel { padding-bottom: 7px; }
.chat-messages {
  max-height: min(52vh, 520px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 2px;
  scroll-behavior: smooth;
}
.chat-message {
  padding: 7px 8px;
  border: 1px solid rgba(64,104,132,.55);
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(13,34,50,.94), rgba(5,16,26,.96));
}
.chat-author { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px; font-size: 9px; }
.chat-author b { font-size: 11px; }
.chat-guild { color: #d6c184; font-weight: 700; }
.chat-warrior { color: #ff8a8f; }
.chat-mage { color: #7ebcff; }
.chat-rogue { color: #78d9a5; }
.chat-message p { margin: 4px 0 2px; color: var(--text); font-size: 11px; line-height: 1.35; overflow-wrap: anywhere; }
.chat-message > small { color: var(--dimmer); font-size: 8px; }
.chat-compose .text-area { min-height: 72px; resize: vertical; }
.chat-compose .button-row { align-items: flex-end; }
.chat-compose .panel-copy { flex: 1 1 150px; margin: 0; }

@media (max-width: 619px) {
  .section-tabs { gap: 5px; margin-bottom: 7px; }
  .section-tab { min-height: 44px; padding: 5px; gap: 5px; font-size: 9px; }
  .section-tab img { width: 20px; height: 20px; }
  .tier-button { min-width: 78px; }
  
  .tier-button b { font-size: 8px; }
  .subclass-node { grid-template-columns: 24px 42px minmax(0,1fr); min-height: 64px; gap: 7px; padding: 7px; }
  .subclass-index { width: 24px; height: 24px; font-size: 9px; }
  .subclass-node:not(:last-child)::after { left: 18px; }
  .subclass-node img { width: 42px; height: 42px; }
  .subclass-node h3 { font-size: 10px; }
  .subclass-node p, .subclass-node small { font-size: 8px; }
  .chat-messages { max-height: 48vh; }
  .chat-message { padding: 6px; }
  .chat-message p { font-size: 10px; }
}


/* v0.4.8: mutually exclusive city/battle mode and offline summary */
.battle-mode-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0 10px}.city-leave-button{margin:0 0 10px}.offline-card{max-width:390px}.offline-summary{display:grid;gap:7px;margin:14px 0}.offline-summary .kv{background:rgba(5,18,32,.72);border:1px solid rgba(135,199,239,.22);border-radius:10px;padding:9px 11px}.item-row:has(.item-main small){position:relative}.item-row .item-main small{display:block}

/* v0.4.9: class weapon layout */
.equipment-slot.class-special-slot {
  background: linear-gradient(145deg, rgba(7,18,28,.94), rgba(2,8,13,.96));
  border-color: rgba(122,171,205,.28);
  box-shadow: inset 0 0 18px rgba(0,0,0,.48);
}
.equipment-slot.two-handed-linked {
  filter: brightness(.72) saturate(.82);
  box-shadow: inset 0 0 22px rgba(0,0,0,.55), 0 0 0 1px rgba(205,230,245,.12);
}

/* Frostforge v0.5.0: abilities, inventory rows, NPC, events and telemetry */
.player-title {
  --title-color: #dcebf7;
  --title-glow: #ffffff;
  --title-gradient: linear-gradient(90deg, var(--title-color), var(--title-color));
  display: inline-block;
  max-width: 100%;
  color: var(--title-color);
  background: var(--title-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-shadow: 0 0 7px var(--title-glow);
  line-height: 1.15;
}
.player-title.hidden { display: none; }
.hero-identity, .drawer-identity { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; }
.chat-author .player-title { font-size: 8px; margin-right: 1px; }
.personalization-title-preview { min-height: 14px; margin-bottom: 2px; }

.ability-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 7px; }
.ability-card {
  min-height: 116px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 8px 6px;
  border: 1px solid rgba(67,111,141,.72);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(17,43,62,.96), rgba(4,15,24,.98));
  color: var(--text);
  text-align: center;
  box-shadow: 0 5px 13px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.055);
}
.ability-card.ready { border-color: rgba(99,213,255,.72); box-shadow: 0 0 14px rgba(99,213,255,.15), inset 0 1px 0 rgba(255,255,255,.09); }
.ability-card.ultimate { border-color: rgba(217,182,115,.62); }
.ability-card:disabled { opacity: .52; }
.ability-card img { width: 42px; height: 42px; object-fit: contain; }
.ability-card b { color: var(--frost); font-size: 10px; }
.ability-card small { color: var(--muted); font-size: 8px; line-height: 1.25; }
.ability-card em { margin-top: auto; color: var(--gold); font-size: 8px; font-style: normal; }
.autobattle-rules, .battle-rules { margin-top: 9px; border: 1px solid var(--line-soft); border-radius: 10px; padding: 8px; background: rgba(3,12,19,.56); }
.autobattle-rules summary, .battle-rules summary { cursor: pointer; color: var(--frost); font-size: 11px; font-weight: 700; }
.build-presets-panel { background: linear-gradient(150deg, rgba(19,46,65,.97), rgba(5,16,25,.98)); }
.preset-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.preset-card { padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: rgba(4,14,22,.72); }
.preset-card.empty { opacity: .68; }
.preset-card b { display:block; color:var(--frost); font-size:11px; }
.preset-card small { display:block; min-height:24px; margin:3px 0 6px; color:var(--muted); font-size:8px; }

.set-bonus-panel { border-color: rgba(142,132,227,.42); }
.set-bonus-list { display:grid; gap:6px; }
.set-bonus-row { padding:8px; border:1px solid rgba(133,119,213,.36); border-radius:9px; background:linear-gradient(145deg,rgba(42,35,74,.55),rgba(5,15,25,.72)); }
.set-bonus-row b { color:#d8d0ff; font-size:11px; }
.set-bonus-row p { margin:3px 0; color:var(--text); font-size:9px; }
.set-bonus-row small { color:var(--muted); font-size:8px; }
.inventory-category-list { display:grid; grid-template-columns:1fr; gap:5px; }
.inventory-category-row { width:100%; min-height:38px; display:grid; grid-template-columns:minmax(0,1fr) auto 18px; align-items:center; gap:7px; padding:7px 9px; border:1px solid var(--line); border-radius:9px; background:linear-gradient(180deg,rgba(16,40,58,.95),rgba(5,16,25,.97)); color:var(--text); text-align:left; }
.inventory-category-row.active { border-color:var(--ice); color:var(--frost); box-shadow:0 0 13px rgba(99,213,255,.13); }
.inventory-category-row b { color:var(--gold); font-size:10px; }
.inventory-category-row em { color:var(--muted); font-style:normal; text-align:center; }
.inventory-category-content { margin-top:8px; padding-top:8px; border-top:1px solid rgba(255,255,255,.055); }
.inventory-resource-list { display:grid; gap:5px; }
.inventory-resource-row { display:grid; grid-template-columns:36px minmax(0,1fr) auto; align-items:center; gap:8px; padding:7px 8px; border:1px solid var(--line-soft); border-radius:9px; background:rgba(3,13,21,.66); }
.inventory-resource-row img { width:34px; height:34px; object-fit:contain; }
.inventory-resource-row b { display:block; color:var(--frost); font-size:10px; }
.inventory-resource-row small { color:var(--muted); font-size:8px; }
.inventory-resource-row strong { color:var(--gold); font-size:12px; }

.npc-grid { display:grid; gap:8px; }
.npc-card { display:grid; grid-template-columns:74px minmax(0,1fr); gap:10px; padding:9px; border:1px solid var(--line); border-radius:12px; background:linear-gradient(145deg,rgba(18,44,62,.93),rgba(5,15,24,.97)); box-shadow:0 6px 15px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05); }
.npc-card > img { width:74px; height:74px; object-fit:contain; border-radius:10px; background:#06131e; }
.npc-copy h3 { margin:0; color:var(--frost); font-size:13px; }
.npc-copy h3 small { display:block; margin-top:2px; color:var(--gold); font-size:8px; font-weight:400; }
.npc-dialogue { margin:5px 0; color:var(--text); font-size:9px; line-height:1.35; }
.npc-quest { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 7px; padding-top:6px; border-top:1px solid rgba(255,255,255,.06); }
.npc-quest b, .npc-quest small, .npc-quest .progress { grid-column:1 / -1; }
.npc-quest b { color:#dcebf7; font-size:9px; }
.npc-quest small { color:var(--muted); font-size:8px; }
.npc-quest span, .npc-quest em { font-size:8px; color:var(--gold); font-style:normal; }
.npc-quest .button { min-height:28px; padding:4px 7px; font-size:8px; }
.lore-list { display:grid; gap:7px; }
.lore-card { padding:10px; border:1px solid var(--line); border-radius:10px; background:rgba(3,13,21,.68); }
.lore-card.locked { opacity:.48; filter:saturate(.45); }
.lore-card span { color:var(--gold); font-size:8px; text-transform:uppercase; letter-spacing:.12em; }
.lore-card h3 { margin:3px 0; color:var(--frost); font-size:12px; }
.lore-card p { margin:0; color:var(--muted); font-size:9px; line-height:1.4; }

.event-list { display:grid; gap:8px; }
.event-card { padding:10px; border:1px solid var(--line); border-radius:11px; background:linear-gradient(150deg,rgba(21,47,65,.95),rgba(5,15,24,.98)); }
.event-card.active { border-color:rgba(217,182,115,.55); box-shadow:0 0 17px rgba(217,182,115,.10); }
.event-card.claimed { opacity:.66; }
.event-card-head { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.event-card-head span { color:var(--gold); font-size:7px; letter-spacing:.12em; }
.event-card-head h3 { margin:2px 0 0; color:var(--frost); font-size:13px; }
.event-card-head > b { color:var(--ice); font-size:10px; }
.event-card > p { margin:6px 0 3px; color:var(--text); font-size:10px; }
.event-card > small { display:block; margin-bottom:7px; color:var(--muted); font-size:8px; }
.event-progress { display:flex; justify-content:space-between; gap:8px; margin:4px 0 7px; color:var(--muted); font-size:8px; }
.event-progress b { color:var(--gold); text-align:right; }
.event-title-reward { margin:5px 0 8px; padding:5px 7px; border:1px solid rgba(217,182,115,.24); border-radius:7px; background:rgba(5,13,20,.56); color:var(--muted); font-size:8px; }
.title-gallery { display:grid; gap:6px; }
.title-card { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:3px 9px; align-items:center; padding:8px; border:1px solid var(--line); border-radius:9px; background:rgba(3,13,21,.68); text-align:left; }
.title-card.selected { border-color:var(--gold); }
.title-card > span, .title-card > small { grid-column:1; }
.title-card small { color:var(--muted); font-size:8px; }
.title-card em { grid-column:2; grid-row:1 / 3; color:var(--gold); font-size:8px; font-style:normal; }

.bestiary-filters { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
.bestiary-grid { display:grid; gap:7px; }
.bestiary-card { display:grid; grid-template-columns:76px minmax(0,1fr); gap:9px; padding:8px; border:1px solid var(--line); border-radius:11px; background:rgba(3,13,21,.68); }
.bestiary-card.unseen { opacity:.53; filter:grayscale(.85); }
.bestiary-card.boss { border-color:rgba(238,108,125,.46); }
.bestiary-card > img { width:76px; height:76px; object-fit:contain; }
.bestiary-card span { color:var(--gold); font-size:7px; letter-spacing:.08em; }
.bestiary-card h3 { margin:2px 0 3px; color:var(--frost); font-size:12px; }
.bestiary-card p { margin:0 0 4px; color:var(--text); font-size:9px; line-height:1.3; }
.bestiary-card small { color:var(--muted); font-size:8px; }
.tower-main { border-color:rgba(152,127,231,.48); background:linear-gradient(150deg,rgba(41,31,73,.88),rgba(5,15,25,.98)); }

.event-admin-list, .analytics-grid, .analytics-bars { display:grid; gap:6px; }
.event-admin-row, .analytics-card { padding:8px; border:1px solid var(--line); border-radius:9px; background:rgba(3,13,21,.66); }
.event-admin-row b, .analytics-card b { display:block; color:var(--frost); font-size:10px; }
.event-admin-row span, .analytics-card span { display:block; color:var(--text); font-size:8px; margin-top:2px; }
.event-admin-row small, .analytics-card small { color:var(--muted); font-size:8px; }
.analytics-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.analytics-bar { display:grid; grid-template-columns:48px minmax(0,1fr) 34px; align-items:center; gap:6px; color:var(--muted); font-size:8px; }
.analytics-bar > div { height:10px; overflow:hidden; border:1px solid var(--line); border-radius:99px; background:#02080d; }
.analytics-bar i { display:block; height:100%; background:linear-gradient(90deg,#246f96,#70d7ff); }
.analytics-bar b { color:var(--frost); text-align:right; }
.check-row { display:flex!important; align-items:center; gap:7px; }
.check-row input[type="checkbox"] { width:18px; height:18px; accent-color:#5dcff9; }
.subclass-node.branch-node { border-left-width:3px; }
.subclass-node.available { opacity:1; border-color:var(--gold); box-shadow:0 0 16px rgba(217,182,115,.16); }
.subclass-node h3 small { display:block; color:var(--gold); font-size:7px; }
.subclass-choice { margin-top:6px; }

@media (max-width: 619px) {
  .ability-card { min-height:100px; padding:6px 4px; }
  .ability-card img { width:34px; height:34px; }
  .ability-card b { font-size:8px; }
  .ability-card small, .ability-card em { font-size:7px; }
  .preset-grid { grid-template-columns:1fr 1fr; gap:5px; }
  .preset-card { padding:6px; }
  .npc-card { grid-template-columns:58px minmax(0,1fr); gap:7px; padding:7px; }
  .npc-card > img { width:58px; height:58px; }
  .npc-copy h3 { font-size:10px; }
  .npc-dialogue, .bestiary-card p, .event-card > p { font-size:8px; }
  .bestiary-card { grid-template-columns:58px minmax(0,1fr); }
  .bestiary-card > img { width:58px; height:58px; }
  .analytics-grid { grid-template-columns:1fr; }
  .inventory-control-grid { grid-template-columns:1fr; }
  .player-title { font-size:8px; }
}

/* v0.5.0 expanded balance telemetry */
.analytics-subtitle {
  margin: 14px 0 8px;
  color: var(--frost, #c9efff);
  font-size: .9rem;
  letter-spacing: .04em;
}
.economy-report-list {
  display: grid;
  gap: 7px;
}
.economy-report-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  padding: 8px 9px;
  border: 1px solid rgba(120, 190, 225, .18);
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(21, 48, 68, .82), rgba(8, 22, 34, .88));
}
.economy-report-row span { min-width: 0; }
.economy-report-row b,
.economy-report-row small { display: block; }
.economy-report-row small { color: var(--dim, #87a8bc); font-size: .72rem; }
.economy-report-row em { font-style: normal; font-weight: 700; font-size: .78rem; }
@media (max-width: 370px) {
  .economy-report-row { grid-template-columns: minmax(0, 1fr) auto; }
  .economy-report-row em:last-child { grid-column: 2; }
}

/* v0.5.0 audio settings */
.audio-settings-panel { display: grid; gap: 12px; }
.audio-range { display: grid; gap: 7px; }
.audio-range > span { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.audio-range em { color: var(--ice, #78d9ff); font-style: normal; font-weight: 700; }
.audio-range input[type="range"] { width: 100%; accent-color: var(--ice, #78d9ff); }

/* v0.6.0 — factions and shared MMORPG systems */
.faction-grid { display:grid; gap:8px; margin:8px 0 12px; }
.faction-card {
  width:100%; display:grid; grid-template-columns:42px minmax(0,1fr); gap:9px; align-items:center;
  text-align:left; padding:10px; border:1px solid var(--line); border-radius:11px;
  background:linear-gradient(180deg,rgba(25,45,64,.96),rgba(9,20,31,.98)); color:var(--text);
  box-shadow:inset 0 1px rgba(255,255,255,.06),0 7px 16px rgba(0,0,0,.28);
}
.faction-card.selected { border-color:var(--faction-color,#7ec8ff); box-shadow:0 0 18px color-mix(in srgb,var(--faction-color,#7ec8ff) 34%,transparent),inset 0 1px rgba(255,255,255,.12); }
.faction-symbol { width:40px;height:40px;display:grid;place-items:center;border-radius:10px;font-size:22px;background:rgba(0,0,0,.28);border:1px solid var(--faction-color,#7ec8ff);color:var(--faction-color,#7ec8ff); }
.faction-card h3 { margin:0 0 2px;font-size:15px;color:var(--faction-color,#dcebf7); }
.faction-card p,.faction-card small { margin:0;color:var(--dim);line-height:1.3; }
.faction-chip { display:inline-flex;align-items:center;gap:5px;border:1px solid currentColor;border-radius:999px;padding:3px 8px;font-size:11px; }
.shared-world-panel,.world-event-panel,.faction-panel,.market-panel,.project-panel,.season-panel { position:relative;overflow:hidden; }
.shared-world-panel::before,.world-event-panel::before,.faction-panel::before,.season-panel::before { content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 100% 0,rgba(126,200,255,.10),transparent 45%); }
.online-players { display:flex;flex-direction:column;gap:5px;max-height:210px;overflow:auto; }
.online-player-row { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:7px 8px;border:1px solid var(--line);border-radius:8px;background:rgba(4,12,20,.52); }
.online-player-row small { color:var(--dim); }
.shared-mob-card { display:grid;grid-template-columns:64px minmax(0,1fr);gap:10px;align-items:center; }
.shared-mob-card img { width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 5px 9px rgba(0,0,0,.55)); }
.territory-list,.market-list,.project-list,.season-milestones,.world-event-leaders { display:flex;flex-direction:column;gap:7px; }
.territory-card,.market-row,.project-card,.season-milestone { border:1px solid var(--line);border-radius:10px;padding:9px;background:linear-gradient(180deg,rgba(20,38,54,.92),rgba(8,18,28,.96)); }
.territory-card.selected { border-color:var(--ice); }
.territory-owner { display:flex;justify-content:space-between;gap:8px;align-items:center;margin-bottom:5px; }
.influence-bars { display:grid;gap:4px;margin-top:6px; }
.influence-row { display:grid;grid-template-columns:80px minmax(0,1fr) 54px;gap:6px;align-items:center;font-size:11px; }
.influence-row .progress { margin:0; }
.market-row { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center; }
.market-row h3,.project-card h3,.season-milestone h3 { margin:0;font-size:14px; }
.market-row p,.project-card p,.season-milestone p { margin:3px 0;color:var(--dim);font-size:12px; }
.market-sell-form { display:grid;grid-template-columns:minmax(0,1fr) 90px 90px;gap:6px;align-items:end; }
.market-sell-form .button { min-height:38px; }
.project-contribute { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;margin-top:7px; }
.sea-route-grid { display:grid;gap:7px; }
.sea-route-card { border:1px solid var(--line);border-radius:10px;padding:9px;background:rgba(10,23,35,.86); }
.sea-route-card.locked { opacity:.5; }
.season-rank { display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:7px;align-items:center;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.06); }
.mmo-tabs { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-bottom:9px; }
@media (max-width:420px){
  .market-sell-form{grid-template-columns:1fr 1fr}.market-sell-form label:first-child{grid-column:1/-1}
  .shared-mob-card{grid-template-columns:52px minmax(0,1fr)}.shared-mob-card img{width:52px;height:52px}
}

/* v0.6.0 — completed shared-world layouts */
.faction-profile { display:grid; grid-template-columns:56px minmax(0,1fr); gap:11px; align-items:center; border-color:color-mix(in srgb,var(--faction-color,#7ec8ff) 55%,var(--line)); }
.faction-profile-symbol { width:54px; height:54px; display:grid; place-items:center; border-radius:13px; color:var(--faction-color,#7ec8ff); border:1px solid currentColor; background:rgba(0,0,0,.25); font-size:28px; box-shadow:0 0 16px color-mix(in srgb,var(--faction-color,#7ec8ff) 28%,transparent); }
.faction-profile h2 { margin:0; color:var(--frost); }
.faction-profile p { margin:3px 0; color:var(--text); }
.faction-profile small { color:var(--gold); }
.territory-grid,.city-project-grid { display:grid; grid-template-columns:1fr; gap:8px; }
.territory-card { border-color:color-mix(in srgb,var(--owner-color,#7190a8) 45%,var(--line)); }
.territory-head { display:grid; grid-template-columns:36px minmax(0,1fr); gap:8px; align-items:center; }
.territory-head > span { width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--owner-color,#7190a8);border-radius:9px;color:var(--owner-color,#7190a8);font-size:18px;background:rgba(0,0,0,.24); }
.territory-head h3 { margin:0;color:var(--frost);font-size:13px; }
.territory-head small,.territory-card > small { color:var(--dim);font-size:9px; }
.territory-card > p { margin:6px 0;color:var(--text);font-size:10px;line-height:1.35; }
.territory-influence { display:grid;gap:3px;margin:6px 0; }
.territory-influence > div { display:flex;justify-content:space-between;gap:8px;padding:3px 5px;border-radius:6px;background:rgba(0,0,0,.18);font-size:9px; }
.territory-card .button { margin-top:7px; }
.world-effect-row { padding:8px;border:1px solid var(--line);border-radius:9px;background:rgba(4,14,22,.7); }
.world-effect-row.success { border-color:rgba(104,214,171,.42); }
.world-effect-row.failure { border-color:rgba(232,102,125,.42); }
.world-effect-row b { color:var(--frost);font-size:11px; }
.world-effect-row p { margin:3px 0;color:var(--text);font-size:9px; }
.world-effect-row small { color:var(--dim);font-size:8px; }
.market-form-grid { display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:7px 0; }
.market-form-grid label { color:var(--dim);font-size:9px; }
.market-row { grid-template-columns:46px minmax(0,1fr) auto; }
.market-row > img { width:44px;height:44px;object-fit:contain; }
.market-row h3 { color:var(--frost);font-size:11px; }
.market-row small { color:var(--gold);font-size:8px; }
.city-project-card { margin:0; }
.city-project-card > h2 { display:flex;justify-content:space-between;gap:8px;margin:0;color:var(--frost);font-size:13px; }
.city-project-card > h2 small { color:var(--gold);font-size:9px; }
.city-project-card > p { color:var(--text);font-size:9px;line-height:1.35; }
.season-summary { border-color:rgba(174,151,255,.45);background:linear-gradient(150deg,rgba(42,31,73,.84),rgba(5,15,25,.98)); }
.season-milestone { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center; }
.season-milestone.complete { border-color:rgba(217,182,115,.48); }
.season-milestone.claimed { opacity:.66; }
.season-milestone b { color:var(--frost);font-size:11px; }
.season-milestone p { margin:3px 0;color:var(--dim);font-size:8px; }
@media (min-width:700px){.territory-grid,.city-project-grid,.sea-route-grid{grid-template-columns:1fr 1fr}}
@media (max-width:370px){.market-form-grid{grid-template-columns:1fr}.market-row{grid-template-columns:38px minmax(0,1fr)}.market-row>.button{grid-column:1/-1}.market-row>img{width:36px;height:36px}}

/* Frostforge v0.6.1 — compact grouped navigation and newcomer guide */
.nav-direct-group { padding: 3px 0 5px; border-bottom: 1px solid rgba(103,216,255,.10); }
.nav-group { border-bottom: 1px solid rgba(103,216,255,.08); }
.nav-group > summary {
  min-height: 41px;
  padding: 6px 11px;
  display: grid;
  grid-template-columns: 25px minmax(0,1fr) auto 14px;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
  user-select: none;
  background: rgba(4,14,22,.22);
}
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary img { width: 22px; height: 22px; object-fit: contain; }
.nav-group > summary span { font-size: 11px; font-weight: 700; letter-spacing: .035em; }
.nav-group > summary > i { color: var(--dim); font-style: normal; text-align: center; transition: transform .18s ease; }
.nav-group[open] > summary { color: var(--frost); background: linear-gradient(90deg, rgba(29,78,104,.42), rgba(7,22,34,.14)); }
.nav-group[open] > summary > i { transform: rotate(180deg); }
.nav-group-items { padding: 2px 0 5px 13px; background: rgba(0,0,0,.10); }
.nav-button.nested { min-height: 34px; grid-template-columns: 24px minmax(0,1fr) auto; gap: 7px; padding: 4px 10px 4px 8px; border-left-width: 2px; }
.nav-button.nested img { width: 19px; height: 19px; }
.nav-button.nested span { font-size: 10px; }
.drawer-actions { display: grid; gap: 6px; }

.city-toolbar {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 7px;
  align-items: end;
  margin-bottom: 9px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(15,38,55,.93), rgba(5,16,25,.96));
}
.city-section-picker { display: grid; gap: 3px; color: var(--muted); font-size: 9px; }
.city-section-picker .text-input { min-height: 34px; padding: 6px 8px; }
.city-gate-panel, .battle-away-panel { border-color: rgba(103,216,255,.40); }

.today-list { display: grid; gap: 5px; }
.today-row {
  width: 100%;
  min-height: 48px;
  display: grid;
  grid-template-columns: 31px minmax(0,1fr) 15px;
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  color: var(--text);
  background: rgba(3,12,19,.58);
  text-align: left;
}
.today-row:hover { border-color: rgba(103,216,255,.46); }
.today-row img { width: 28px; height: 28px; object-fit: contain; }
.today-row b { display: block; color: var(--frost); font-size: 10px; }
.today-row small { display: block; margin-top: 2px; color: var(--muted); font-size: 8px; line-height: 1.25; }
.today-row > i { color: var(--ice); font-size: 18px; font-style: normal; }

.guide-card { max-width: 410px; }
.guide-progress-head { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; color: var(--muted); font-size: 10px; }
.guide-progress { margin: 5px 0 10px; }
.guide-current { padding: 10px; border: 1px solid rgba(103,216,255,.38); border-radius: 10px; background: linear-gradient(145deg, rgba(24,68,91,.55), rgba(4,15,24,.68)); }
.guide-current.complete { border-color: rgba(84,213,166,.45); }
.guide-current > span { color: var(--gold); font-size: 8px; letter-spacing: .12em; text-transform: uppercase; }
.guide-current h3 { margin: 3px 0; color: var(--frost); font-size: 15px; }
.guide-current p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.35; }
.guide-step-list { display: grid; gap: 5px; margin: 10px 0; }
.guide-step { display: grid; grid-template-columns: 27px minmax(0,1fr); gap: 7px; align-items: start; padding: 6px; border: 1px solid rgba(255,255,255,.055); border-radius: 8px; opacity: .60; }
.guide-step.current { opacity: 1; border-color: rgba(103,216,255,.45); background: rgba(22,66,90,.28); }
.guide-step.complete { opacity: .82; border-color: rgba(84,213,166,.25); }
.guide-step > i { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; color: var(--frost); background: #18364a; font-size: 10px; font-style: normal; font-weight: 700; }
.guide-step.complete > i { color: #062317; background: var(--green); }
.guide-step b { display: block; color: var(--text); font-size: 10px; }
.guide-step small { display: block; margin-top: 2px; color: var(--muted); font-size: 8px; line-height: 1.25; }
.guide-actions .button { flex-basis: 130px; }

.profile-tabs { grid-template-columns: repeat(5, minmax(0,1fr)); }
.profile-tabs .section-tab { min-height: 45px; padding: 5px 2px; gap: 3px; flex-direction: column; }
.profile-tabs .section-tab img { width: 19px; height: 19px; }
.profile-tabs .section-tab span { align-items: center; font-size: 8px; }

@media (max-width: 619px) {
  body { font-size: 12.5px; }
  .view { padding: 7px 7px calc(69px + var(--safe-bottom)); }
  .screen-head h1 { font-size: 16px; }
  .screen-head p { font-size: 9px; }
  .panel { padding: 8px; margin-bottom: 7px; }
  .button { min-height: 32px; padding: 6px 8px; font-size: 10px; }
  .button.compact { min-height: 27px; padding: 4px 6px; font-size: 9px; }
  .drawer { width: min(266px, 82vw); }
  .drawer-hero { min-height: 68px; padding: 8px; grid-template-columns: 42px minmax(0,1fr) 27px; }
  .drawer-emblem { width: 42px; height: 42px; }
  .drawer-name { font-size: 13px; }
  .drawer-nav { padding: 2px 0; }
  .nav-button { min-height: 35px; padding: 4px 8px; grid-template-columns: 24px minmax(0,1fr) auto; gap: 7px; }
  .nav-button img { width: 20px; height: 20px; }
  .nav-button span { font-size: 10px; }
  .nav-group > summary { min-height: 36px; padding: 5px 8px; grid-template-columns: 21px minmax(0,1fr) auto 12px; gap: 6px; }
  .nav-group > summary img { width: 19px; height: 19px; }
  .nav-group > summary span { font-size: 10px; }
  .nav-button.nested { min-height: 30px; padding: 3px 8px 3px 6px; }
  .nav-button.nested img { width: 17px; height: 17px; }
  .nav-button.nested span { font-size: 9px; }
  .drawer-actions { padding: 6px 8px 0; }
  .drawer-foot { padding: 6px 8px calc(6px + var(--safe-bottom)); }
  .city-toolbar { grid-template-columns: 1fr; padding: 6px; }
  .city-toolbar > .button { width: 100%; }
  .today-row { min-height: 43px; grid-template-columns: 27px minmax(0,1fr) 12px; padding: 5px 6px; }
  .today-row img { width: 24px; height: 24px; }
  .guide-card { padding: 14px; }
  .guide-current { padding: 8px; }
  .guide-step { padding: 5px; }
  .profile-tabs { gap: 4px; }
  .profile-tabs .section-tab { min-height: 40px; font-size: 7px; }
  .profile-tabs .section-tab img { width: 17px; height: 17px; }
  .battle-scene { min-height: 285px; }
  .enemy-frame { width: 145px; height: 145px; }
  .enemy-art { width: 132px; height: 132px; }
  .boss-scene .enemy-art { width: 145px; height: 145px; }
}

/* Frostforge v0.6.2 — review queue and batch asset regeneration */
.asset-review-panel { border-color: rgba(123, 217, 255, .38); }
.asset-review-filter-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 6px;
  margin: 8px 0;
}
.asset-selection-actions,
.asset-batch-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 7px;
}
.asset-batch-actions .wide { grid-column: 1 / -1; }
.prompt-rule-preview code {
  display: block;
  margin-top: 5px;
  padding: 6px 7px;
  border: 1px solid rgba(114, 225, 255, .25);
  border-radius: 7px;
  background: rgba(0, 0, 0, .28);
  color: #dff9ff;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 8px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.asset-card-admin {
  position: relative;
  min-height: 214px;
  padding-top: 31px;
}
.asset-card-admin.selected {
  border-color: rgba(114, 225, 255, .85);
  box-shadow: 0 0 0 1px rgba(114, 225, 255, .2), 0 0 18px rgba(70, 196, 240, .18), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.asset-card-admin.quality-review { border-color: rgba(239, 126, 129, .65); }
.asset-card-admin.quality-approved { border-color: rgba(103, 222, 163, .62); }
.asset-card-admin.quality-unscanned { border-color: rgba(218, 183, 108, .42); }
.asset-select-toggle {
  position: absolute;
  inset: 6px 6px auto 6px;
  min-height: 22px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 6px;
  border: 1px solid rgba(99, 177, 207, .18);
  border-radius: 7px;
  background: rgba(2, 10, 16, .76);
  color: var(--muted);
  font-size: 8px;
  cursor: pointer;
}
.asset-select-toggle input { margin: 0; accent-color: var(--ice); }
.asset-card-admin.selected .asset-select-toggle { color: var(--frost); border-color: rgba(114, 225, 255, .55); }
.asset-quality-badge {
  display: inline-flex !important;
  min-height: 0 !important;
  padding: 3px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted) !important;
  font-size: 7px !important;
  line-height: 1.2 !important;
}
.asset-quality-badge.review { color: #ffb1b4 !important; border-color: rgba(239, 126, 129, .55); background: rgba(86, 22, 30, .4); }
.asset-quality-badge.ok,
.asset-quality-badge.approved { color: #9bf0c2 !important; border-color: rgba(103, 222, 163, .48); background: rgba(16, 66, 48, .35); }
.asset-quality-badge.unscanned { color: #ead092 !important; border-color: rgba(218, 183, 108, .42); }
.asset-quality-detail,
.asset-generation-meta {
  display: block;
  min-height: 0 !important;
  color: var(--dim) !important;
  font-size: 7px !important;
  line-height: 1.25 !important;
  overflow-wrap: anywhere;
}
.asset-card-actions {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  margin-top: auto;
}
.asset-card-actions .button { min-width: 0; padding-inline: 4px; font-size: 8px; }
@media (max-width: 390px) {
  .asset-review-filter-grid { grid-template-columns: 1fr; }
  .asset-selection-actions,
  .asset-batch-actions { grid-template-columns: 1fr 1fr; }
  .asset-card-admin { min-height: 202px; padding-inline: 6px; }
  .asset-card-admin img { width: 62px; height: 62px; }
}

/* Frostforge v0.6.3 — equipment eras and material progression */
.tier-button {
  min-width: 118px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
}
.tier-button > span {
  display: block;
  color: var(--frost);
  font-size: 8px;
  line-height: 1.15;
}
.tier-button > span > small {
  display: block;
  margin-top: 2px;
  color: var(--dim);
  font-size: 7px;
  line-height: 1.15;
  white-space: normal;
}
.forge-era-banner {
  display: grid;
  gap: 3px;
  border-color: rgba(114, 225, 255, .36);
  background:
    linear-gradient(135deg, rgba(22, 66, 90, .42), rgba(4, 14, 23, .82)),
    var(--panel-texture);
}
.forge-era-banner b { color: var(--frost); font-size: 13px; }
.forge-era-banner span { color: #d8eef6; font-size: 10px; }
.forge-era-banner small { color: var(--muted); font-size: 8px; }
.asset-era-meta {
  display: block;
  min-height: 0 !important;
  padding: 4px 5px;
  border-radius: 6px;
  background: rgba(33, 78, 99, .22);
  color: #c4e7f3 !important;
  font-size: 7px !important;
  line-height: 1.25 !important;
}
.asset-review-filter-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.asset-review-filter-grid .button { min-width: 0; }
@media (max-width: 390px) {
  .tier-button { min-width: 98px; }
  .asset-review-filter-grid { grid-template-columns: 1fr; }
}

/* Frostforge v0.6.3 — equipment era filters and forge material identity */
.forge-era-banner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 10px;
  border-color: rgba(123, 204, 255, .32);
  background:
    linear-gradient(145deg, rgba(20, 43, 66, .96), rgba(7, 17, 29, .98)),
    radial-gradient(circle at 10% 0%, rgba(130, 217, 255, .12), transparent 48%);
}
.forge-era-banner b { color: var(--frost); font-size: 15px; }
.forge-era-banner span { color: var(--gold); font-weight: 700; text-align: right; }
.forge-era-banner small { grid-column: 1 / -1; color: var(--dim); }
.asset-era-meta { color: var(--ice); line-height: 1.35; }
@media (max-width: 370px) {
  .forge-era-banner { grid-template-columns: 1fr; }
  .forge-era-banner span { text-align: left; }
}

/* v0.6.6 — полный генератор изображений и визуальный редактор контента */
.content-record-row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-height: 58px;
  text-align: left;
}
.content-record-thumb {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(102, 199, 235, .35);
  border-radius: 9px;
  background: rgba(2, 13, 23, .82);
}
.content-record-thumb img { width: 100%; height: 100%; object-fit: contain; }
.content-record-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.content-record-copy b, .content-record-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.content-record-copy small { color: var(--muted); font-size: 10px; }
.content-editor-identity {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin: 0 0 12px;
  padding: 10px;
  border: 1px solid rgba(102, 199, 235, .3);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(11, 36, 54, .88), rgba(3, 15, 26, .94));
}
.content-editor-preview {
  width: 90px;
  height: 90px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(112, 225, 255, .5);
  border-radius: 12px;
  background: rgba(1, 9, 16, .88);
}
.content-editor-preview img { width: 100%; height: 100%; object-fit: contain; }
.content-editor-identity h3 { margin: 0 0 4px; color: var(--frost); }
.content-editor-identity p { margin: 0 0 8px; color: var(--muted); font-size: 11px; }
.asset-coverage {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 8px 0 10px;
  padding: 9px 10px;
  border-radius: 10px;
  font-size: 11px;
}
.asset-coverage.complete { border: 1px solid rgba(101, 219, 168, .45); background: rgba(19, 73, 57, .34); }
.asset-coverage.warning { border: 1px solid rgba(255, 139, 139, .5); background: rgba(95, 31, 42, .34); }
.asset-coverage b { color: var(--frost); }
.asset-coverage span, .asset-coverage small { color: var(--muted); }
.expedition-card {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  overflow: hidden;
}
.expedition-card-art {
  width: 92px;
  height: 58px;
  object-fit: cover;
  border: 1px solid rgba(103, 205, 239, .32);
  border-radius: 9px;
  background: rgba(1, 9, 16, .85);
}
@media (max-width: 390px) {
  .content-editor-identity { grid-template-columns: 72px minmax(0, 1fr); }
  .content-editor-preview { width: 70px; height: 70px; }
  .expedition-card { grid-template-columns: 76px minmax(0, 1fr); }
  .expedition-card-art { width: 76px; height: 52px; }
  .expedition-card > .button { grid-column: 1 / -1; width: 100%; }
}
.asset-usage-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  border: 1px solid rgba(255, 173, 94, .45);
  border-radius: 999px;
  color: #ffd6a0 !important;
  background: rgba(82, 46, 17, .38);
  font-size: 8px !important;
  min-height: 0 !important;
}
.asset-usage-badge.unused {
  border-color: rgba(239, 126, 129, .52);
  color: #ffb1b4 !important;
  background: rgba(86, 22, 30, .38);
}

/* Frostforge v0.6.9 — usability, profiles, modals and combat telemetry */
.loading-screen {
  position: fixed; inset: 0; z-index: 500; display: grid; place-content: center; justify-items: center;
  gap: 9px; padding: 24px; text-align: center;
  background:
    radial-gradient(circle at 50% 33%, rgba(39,111,151,.35), transparent 34%),
    linear-gradient(180deg, #071521 0%, #02070c 100%);
  transition: opacity .24s ease, visibility .24s ease;
}
.loading-screen.loading-complete { opacity: 0; visibility: hidden; pointer-events: none; }
.loading-sigil { width: 94px; height: 94px; display:grid; place-items:center; border:1px solid rgba(103,216,255,.5); border-radius:24px; background:rgba(8,29,44,.82); box-shadow:0 0 36px rgba(103,216,255,.22), inset 0 1px 0 rgba(255,255,255,.12); animation:loading-pulse 1.65s ease-in-out infinite; }
.loading-sigil img { width:76px; height:76px; object-fit:contain; }
.loading-screen h1 { margin:0; color:var(--frost); font-size:23px; }
.loading-screen p:last-child { color:var(--muted); font-size:11px; }
.loading-track { width:min(260px,72vw); height:7px; overflow:hidden; border:1px solid #31566e; border-radius:99px; background:#02070b; }
.loading-track i { display:block; width:38%; height:100%; background:linear-gradient(90deg,transparent,var(--ice),transparent); animation:loading-sweep 1.15s linear infinite; }
@keyframes loading-sweep { from { transform:translateX(-100%); } to { transform:translateX(290%); } }
@keyframes loading-pulse { 50% { transform:scale(1.035); box-shadow:0 0 48px rgba(103,216,255,.34), inset 0 1px 0 rgba(255,255,255,.16); } }

.action-modal-card { max-width: 390px; }
.action-modal-actions { margin-top: 15px; }
.action-modal-actions .button { flex:1; }

/* Vertical forge ranges: no horizontal swipe is needed. */
.forge-tier-strip { display:grid !important; grid-template-columns:1fr !important; gap:6px !important; overflow:visible !important; padding:0 !important; }
.forge-tier-strip .tier-button { width:100%; min-width:0 !important; min-height:49px; padding:7px 10px; display:grid; grid-template-columns:minmax(108px,.55fr) minmax(0,1fr); align-items:center; gap:9px; text-align:left; }
.forge-tier-strip .tier-button b { font-size:11px; }
.forge-tier-strip .tier-button > span { display:flex; flex-direction:column; min-width:0; color:var(--frost); font-size:10px; }
.forge-tier-strip .tier-button small { display:block; margin-top:2px; color:var(--muted); font-size:8px; white-space:normal; }

.player-profile-link { cursor:pointer; }
button.chat-author, button.rank-row { width:100%; border:0; color:inherit; font:inherit; }
button.chat-author { padding:0; display:flex; flex-wrap:wrap; gap:4px; align-items:center; background:transparent; text-align:left; }
button.chat-author:hover b, button.rank-row:hover .rank-name b { text-decoration:underline; text-decoration-color:rgba(103,216,255,.55); }
button.rank-row { appearance:none; text-align:left; }
.public-profile-head { display:grid; grid-template-columns:94px minmax(0,1fr); gap:12px; align-items:center; }
.public-profile-head h2 { margin:3px 0; color:var(--frost); font-size:18px; }
.public-profile-head p, .public-profile-head small { display:block; margin:0; color:var(--muted); font-size:10px; }
.public-profile-avatar { width:94px; height:94px; }
.public-profile-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin:12px 0; }
.public-profile-summary span { padding:7px; border:1px solid var(--line-soft); border-radius:9px; color:var(--muted); font-size:8px; background:rgba(3,13,21,.66); }
.public-profile-summary b { display:block; margin-top:2px; color:var(--frost); font-size:11px; }
.public-profile-stats { display:grid; gap:4px; }
.public-equipment-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.public-equipment-slot { min-height:115px; padding:7px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; border:1px solid var(--line); border-radius:10px; background:rgba(4,14,22,.76); text-align:center; }
.public-equipment-slot.empty { opacity:.45; }
.public-equipment-slot img { width:58px; height:58px; object-fit:contain; image-rendering:pixelated; }
.public-equipment-slot small { color:var(--muted); font-size:8px; }
.public-equipment-slot b { color:var(--text); font-size:9px; line-height:1.15; }
.public-equipment-slot em { color:var(--gold); font-size:8px; font-style:normal; }
.read-only-note { margin:12px 0 0; padding:8px; border:1px solid rgba(103,216,255,.2); border-radius:9px; color:var(--muted); background:rgba(6,25,38,.58); font-size:9px; }
.detail-section-title { margin:14px 0 7px; color:var(--frost); font-size:13px; }
.detail-stat span { min-width:0; }
.detail-stat span b { display:block; color:var(--text); font-size:10px; }
.detail-stat span small { display:block; margin-top:2px; color:var(--muted); font-size:8px; line-height:1.3; }
.detail-stat strong { color:var(--frost); font-size:11px; white-space:nowrap; }
.affix-detail { border-left:2px solid rgba(173,121,232,.65); padding-left:8px; }

/* Use actual generated frame art as an overlay, rather than a placeholder-only CSS border. */
.avatar-frame { overflow:visible; }
.avatar-portrait { position:absolute; inset:8px; z-index:1; overflow:hidden; border-radius:11px; background:radial-gradient(circle at 50% 35%, rgba(35,75,101,.74), rgba(1,8,13,.92)); }
.avatar-portrait > img { width:100%; height:100%; object-fit:contain; image-rendering:pixelated; }
.avatar-frame-art { position:absolute !important; inset:-4px !important; z-index:4 !important; width:calc(100% + 8px) !important; height:calc(100% + 8px) !important; object-fit:contain !important; pointer-events:none; border:0 !important; background:transparent !important; box-shadow:none !important; image-rendering:auto !important; }
.drawer-emblem { position:relative; overflow:visible !important; }
.drawer-portrait-image { position:relative; z-index:1; }
.drawer-frame-art { position:absolute; inset:-6px; z-index:4; width:calc(100% + 12px); height:calc(100% + 12px); object-fit:contain; pointer-events:none; }

.enemy-transition-in { animation:enemy-arrival .43s cubic-bezier(.2,.8,.25,1) both; }
.enemy-transition-in .enemy-art { animation:enemy-flash .43s ease both; }
@keyframes enemy-arrival { from { opacity:0; transform:translateX(28px) scale(.88); filter:blur(5px); } 55% { opacity:1; transform:translateX(-4px) scale(1.025); filter:blur(0); } to { transform:none; } }
@keyframes enemy-flash { 35% { filter:brightness(1.7) drop-shadow(0 0 16px rgba(130,225,255,.65)); } }

/* Expanded bottom combat telemetry. */
.view { padding-bottom:calc(124px + var(--safe-bottom)); }
.battle-dock { min-height:88px; align-items:stretch; padding-top:7px; padding-bottom:calc(7px + var(--safe-bottom)); }
.status-line { display:flex; flex:1; flex-direction:column; justify-content:center; gap:4px; overflow:visible; -webkit-line-clamp:unset; }
.dock-primary { display:flex; justify-content:space-between; gap:8px; align-items:center; }
.dock-primary b { max-width:58%; overflow:hidden; color:var(--frost); font-size:10px; white-space:nowrap; text-overflow:ellipsis; }
.dock-primary span { color:var(--gold); font-size:9px; white-space:nowrap; }
.dock-rates { display:flex; flex-wrap:wrap; gap:3px 5px; }
.dock-rates small { padding:2px 5px; border:1px solid rgba(84,145,181,.25); border-radius:99px; color:var(--muted); background:rgba(2,9,15,.45); font-size:7px; white-space:nowrap; }
.battle-dock > .button { align-self:center; }

/* Larger equipped-item art, especially on narrow phones. */
.equipment-slot { min-height:132px; }
.equipment-slot img { width:78px; height:78px; }
.stat-card small { display:block; margin-top:4px; color:var(--muted); font-size:7px; line-height:1.25; }
.inventory-resource-row { align-items:start; }
.inventory-resource-row small { display:block; line-height:1.3; }
.nav-badge { animation:badge-breathe 1.8s ease-in-out infinite; }
@keyframes badge-breathe { 50% { box-shadow:0 0 12px rgba(255,198,94,.4); } }

@media (max-width:619px) {
  .view { padding-bottom:calc(112px + var(--safe-bottom)); }
  .battle-dock { min-height:82px; }
  .forge-tier-strip .tier-button { min-height:44px; grid-template-columns:105px minmax(0,1fr); }
  .equipment-slot { min-height:102px !important; }
  .equipment-slot img { width:56px !important; height:56px !important; }
  .public-profile-summary { grid-template-columns:1fr; }
  .public-equipment-slot { min-height:100px; }
  .public-equipment-slot img { width:50px; height:50px; }
}

/* v0.6.9 follow-up: readable resources and larger worn-item artwork. */
.material-card small {
  display: block;
  grid-column: 1 / -1;
  margin-top: 3px;
  color: var(--muted);
  font-size: 7px;
  line-height: 1.25;
}
@media (max-width: 619px) {
  .equipment-slot img { width: 64px !important; height: 64px !important; }
}

/* v0.7.0: compact achievement-specific avatar frames. */
.avatar-frame.has-frame-art {
  padding: 0;
  overflow: hidden;
  border-radius: 16px;
  background: transparent;
  box-shadow: 0 8px 18px rgba(0,0,0,.48), 0 0 12px color-mix(in srgb, var(--frame-accent) 20%, transparent);
}
.avatar-frame.has-frame-art::before,
.avatar-frame.has-frame-art::after,
.avatar-frame.has-frame-art .avatar-frame-ring { display: none !important; }
.avatar-frame.has-frame-art .avatar-portrait { inset: 12%; border-radius: 13px; }
.avatar-frame.has-frame-art .avatar-frame-art {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}
.drawer-emblem.drawer-avatar-framed {
  position: relative;
  overflow: hidden !important;
  padding: 0;
  border: 0;
  border-radius: 13px;
  background: transparent;
  box-shadow: 0 6px 15px rgba(0,0,0,.55);
}
.drawer-emblem.drawer-avatar-framed .drawer-portrait-image {
  position: absolute;
  inset: 9px;
  width: calc(100% - 18px);
  height: calc(100% - 18px);
  z-index: 1;
  border-radius: 10px;
  object-fit: contain;
  background: radial-gradient(circle at 50% 35%, rgba(35,75,101,.74), rgba(1,8,13,.92));
}
.drawer-emblem.drawer-avatar-framed:not(.has-frame-art) .drawer-portrait-image {
  inset: 4px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
}
.drawer-emblem .drawer-frame-art {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 4;
  object-fit: contain;
  pointer-events: none;
}
@media (max-width: 619px) {
  .drawer-emblem.drawer-avatar-framed .drawer-portrait-image { inset: 7px; width: calc(100% - 14px); height: calc(100% - 14px); }
  .avatar-frame.has-frame-art .avatar-portrait { inset: 11%; }
}