:root {
    --bg: #070605; --panel: #111010; --panel2: #181614; --slot: #0a0908; --edge: #2e2c2a;
    --edge2: #3c3834; --gold: #8a7c70; --gold-soft: #c8bcb0; --gold-deep: #5a5048;
    --accent: #8a2828; --accent-soft: #a83838; --accent-glow: rgba(138,40,40,.28);
    --txt: #d8d0c6; --txt-dim: #9a9288;
    --font-ui: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
    --font-display: "Literata", Georgia, "Palatino Linotype", serif;
    --green: #5a9060; --red: #c05050; --blue: #5a7888; --purple: #706080;
    --cursor-l2: url("../assets/ui/cursor_l2.png") 5 3, auto;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  input[type="text"],
  input[type="search"],
  .search,
  .dev-adena-input,
  .dev-search {
    cursor: text;
  }

  html, body {
    height: 100%;
    /* Mac trackpad: swipe-back / overscroll не уводит со страницы игры */
    overscroll-behavior: none;
    overscroll-behavior-x: none;
  }
  body {
    font-family: var(--font-ui);
    font-size: 15px;
    line-height: 1.45;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    cursor: var(--cursor-l2);
    background:
      radial-gradient(1100px 640px at 50% -8%, rgba(40,24,24,.35) 0%, transparent 58%),
      radial-gradient(800px 500px at 88% 108%, rgba(20,16,14,.6) 0%, transparent 55%),
      repeating-linear-gradient(135deg, rgba(0,0,0,0) 0 20px, rgba(255,255,255,.008) 20px 21px),
      var(--bg);
    color: var(--txt); min-height: 100%;
    display: flex; align-items: center; justify-content: center;
    padding: 24px; overflow: hidden;
  }
  .shell {
    display: flex;
    align-items: stretch;
    gap: 0;
    width: 100%;
    max-width: min(1100px, calc(100vw - 48px));
    min-width: 0;
    height: calc(100vh - 48px);
    max-height: calc(100vh - 48px);
    overflow: hidden;
    position: relative;
  }
  .game-log {
    position: fixed;
    z-index: 48;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    pointer-events: none;
  }
  .game-log-tab {
    pointer-events: auto;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 8px;
    min-height: 120px;
    border: 1px solid var(--edge2);
    border-left: none;
    border-radius: 0 10px 10px 0;
    background: linear-gradient(180deg, #2a2014, #1a140c);
    color: var(--gold-soft);
    box-shadow: 4px 0 18px rgba(0,0,0,.45);
    cursor: var(--cursor-l2);
    transition: border-color .15s, filter .15s, background .15s;
  }
  .game-log-tab:hover {
    border-color: var(--gold);
    filter: brightness(1.08);
  }
  .game-log-tab-label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .game-log-tab-badge {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--accent);
    color: #f0e8e0;
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
  }
  .game-log:not(.is-collapsed) .game-log-tab { display: none; }
  .game-log-body {
    pointer-events: auto;
    position: absolute;
    left: 12px;
    top: 24px;
    bottom: 24px;
    width: min(300px, calc(100vw - 32px));
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #1e1810, #120d08);
    border: 2px solid var(--edge2);
    border-radius: 10px;
    box-shadow: 0 16px 40px rgba(0,0,0,.55), inset 0 0 0 1px #140d07;
    overflow: hidden;
    transform: translateX(0);
    opacity: 1;
    transition: transform .28s ease, opacity .2s ease;
  }
  .game-log.is-collapsed .game-log-body {
    transform: translateX(calc(-100% - 20px));
    opacity: 0;
    pointer-events: none;
  }
  .game-log-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--edge);
    background: linear-gradient(180deg, #2a2014, #1a140c);
    flex-shrink: 0;
  }
  .game-log-title {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gold-soft);
    font-weight: 600;
  }
  .game-log-head-actions { display: flex; gap: 6px; align-items: center; }
  .game-log-clear,
  .game-log-collapse {
    background: transparent;
    border: 1px solid var(--edge);
    color: var(--txt-dim);
    width: 26px;
    height: 26px;
    border-radius: 6px;
    cursor: var(--cursor-l2);
    font-size: 13px;
    line-height: 1;
    transition: .15s;
  }
  .game-log-clear:hover,
  .game-log-collapse:hover { border-color: var(--gold); color: var(--gold-soft); }
  .game-log-filters {
    display: flex; flex-wrap: wrap; gap: 5px;
    padding: 8px 10px 6px;
    border-bottom: 1px solid var(--edge);
    background: rgba(0,0,0,.18);
    flex-shrink: 0;
  }
  .log-filter {
    flex: 1 1 auto;
    min-width: 0;
    padding: 4px 6px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    border-radius: 6px;
    border: 1px solid var(--edge);
    background: rgba(0,0,0,.25);
    color: var(--txt-dim);
    cursor: var(--cursor-l2);
    transition: .15s;
    white-space: nowrap;
  }
  .log-filter:hover { border-color: var(--gold); color: var(--gold-soft); }
  .log-filter.on {
    border-color: var(--gold);
    color: var(--gold-soft);
    background: rgba(201,168,106,.12);
    box-shadow: inset 0 0 0 1px rgba(201,168,106,.15);
  }
  .log-line.log-hidden { display: none; }
  .game-log-feed {
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .log-line {
    font-size: 13px;
    line-height: 1.5;
    padding: 7px 9px;
    border-radius: 7px;
    background: rgba(0,0,0,.28);
    border-left: 3px solid var(--edge2);
    min-width: 0;
    flex-shrink: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
    animation: logIn .2s ease;
  }
  @keyframes logIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
  .log-line .log-time {
    display: block;
    font-size: 10px;
    color: var(--txt-dim);
    margin-bottom: 2px;
    font-variant-numeric: tabular-nums;
  }
  .log-line .log-text {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .log-line.kind-system { border-left-color: var(--gold); color: var(--gold-soft); }
  .log-line.kind-info { border-left-color: #7a6a50; }
  .log-line.kind-success { border-left-color: var(--green); }
  .log-line.kind-enchant { border-left-color: var(--blue); }
  .log-line.kind-fail { border-left-color: var(--red); }
  .log-line.kind-warn { border-left-color: #e0a84a; }
  .log-line.kind-gold { border-left-color: var(--gold-soft); }
  .log-line.kind-loot { border-left-color: var(--purple); }
  .log-line.kind-craft { border-left-color: #6ab8a8; }
  .game-log-feed::-webkit-scrollbar { width: 8px; }
  .game-log-feed::-webkit-scrollbar-track { background: #150e08; }
  .game-log-feed::-webkit-scrollbar-thumb { background: linear-gradient(#6e5630,#3a2c1a); border-radius: 5px; }

  /* L2-style scrollbars */
  .sf-scroll {
    scrollbar-width: thin;
    scrollbar-color: #8a6c3a #120c08;
  }
  .sf-scroll::-webkit-scrollbar { width: 10px; }
  .sf-scroll::-webkit-scrollbar-button { display: none; height: 0; width: 0; }
  .sf-scroll::-webkit-scrollbar-track {
    background: linear-gradient(180deg, #120c08 0%, #1a1209 50%, #120c08 100%);
    border-left: 1px solid rgba(74, 58, 36, .65);
    border-radius: 0 10px 10px 0;
    margin: 4px 0;
  }
  .sf-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #c9a86a 0%, #8a6c3a 45%, #4a3820 100%);
    border: 2px solid #120c08;
    border-radius: 8px;
    min-height: 36px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 0 6px rgba(0, 0, 0, .35);
  }
  .sf-scroll::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #e7cf95 0%, #a88444 50%, #5c4828 100%);
  }
  .sf-scroll::-webkit-scrollbar-thumb:active {
    background: linear-gradient(180deg, #8a6c3a 0%, #5c4828 100%);
  }

  .app { position: relative; width: 100%; flex: 1; min-width: 0; min-height: 0; max-height: 100%; overflow: hidden; display: flex; flex-direction: column; align-self: stretch; }
  .app > .card {
    flex: 1; min-width: 0; min-height: 0;
    overflow-x: hidden; overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .app.hub-screen > .card {
    scrollbar-width: thin;
    scrollbar-color: #6e5630 transparent;
  }
  .app > .card::-webkit-scrollbar { width: 0; height: 0; }
  .app.hub-screen > .card::-webkit-scrollbar { width: 8px; }
  .app.hub-screen > .card::-webkit-scrollbar-thumb {
    background: linear-gradient(#6e5630, #3a2c1a);
    border-radius: 5px;
  }
  .app.dev-open::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .4);
    z-index: 25;
    border-radius: 10px;
    pointer-events: none;
  }
  .dev-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: min(440px, 44vw);
    max-width: 480px;
    z-index: 30;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #141210, #0a0908);
    border: 1px solid var(--edge2);
    border-radius: 4px 0 0 4px;
    box-shadow: -12px 0 32px rgba(0,0,0,.65), inset 0 0 0 1px rgba(0,0,0,.4);
    overflow: hidden;
  }
  .dev-panel[hidden] { display: none !important; }
  .dev-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid var(--edge);
    background: linear-gradient(180deg, #1a1816, #100e0c);
  }
  .dev-panel-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    color: var(--ash);
    font-weight: 700;
  }
  .dev-panel-close {
    background: transparent;
    border: 1px solid var(--edge);
    color: var(--txt-dim);
    width: 26px;
    height: 26px;
    border-radius: 6px;
    cursor: var(--cursor-l2);
    font-size: 16px;
    line-height: 1;
  }
  .dev-panel-close:hover { border-color: var(--accent-soft); color: var(--ash); }
  .dev-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--edge);
    background: linear-gradient(180deg, #161412, #100e0c);
    flex-shrink: 0;
  }
  .dev-tab {
    flex: 1;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--txt-dim);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 9px 8px;
    cursor: var(--cursor-l2);
    transition: .12s;
  }
  .dev-tab:hover { color: var(--txt); }
  .dev-tab.sel { color: var(--accent-soft); border-bottom-color: var(--accent); background: rgba(138,40,40,.1); }
  .dev-section {
    border: 1px solid var(--edge);
    border-radius: 4px;
    background: rgba(0,0,0,.2);
    margin-bottom: 6px;
  }
  .dev-section summary {
    padding: 8px 10px;
    font-size: 11px;
    font-weight: 700;
    color: var(--ash);
    cursor: var(--cursor-l2);
    list-style: none;
    user-select: none;
  }
  .dev-section summary::-webkit-details-marker { display: none; }
  .dev-section[open] summary { border-bottom: 1px solid var(--edge); }
  .dev-section > .dev-adena,
  .dev-section > .dev-avatar-xp,
  .dev-section > .dev-quests,
  .dev-section > .dev-tune,
  .dev-section > .dev-mine,
  .dev-section > .dev-collect,
  .dev-section > .dev-secret-ach {
    margin: 0;
    border: none;
    border-radius: 0;
    background: transparent;
  }
  #devViewWorld { gap: 8px; }
  .dev-world-search { width: 100%; box-sizing: border-box; margin-bottom: 4px; }
  .dev-world-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
  .dev-world-group {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--accent-soft);
    padding: 8px 4px 2px;
  }
  .dev-world-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 6px;
    border-radius: 3px;
    border: 1px solid var(--edge);
    background: rgba(0,0,0,.22);
  }
  .dev-world-row img {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    object-fit: contain;
    image-rendering: pixelated;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.6));
  }
  .dev-world-row img.bad { opacity: .25; }
  .dev-world-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
  .dev-world-meta b { font-size: 11px; color: var(--txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dev-world-meta small { font-size: 9px; color: var(--txt-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dev-world-empty { color: var(--txt-dim); text-align: center; padding: 16px 8px; font-size: 12px; }
  #devViewLog .dev-debug { flex: 1; min-height: 0; margin: 0; display: flex; flex-direction: column; }
  #devViewLog .dev-debug-feed { flex: 1; max-height: none; min-height: 120px; }
  .dev-panel-body { flex: 1; overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
  .dev-panel-view { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
  .dev-panel-view[hidden] { display: none !important; }
  #devViewWeapons { padding: 0; overflow: hidden; }
  .dev-weapon-cats { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
  .dev-weapon-cats[hidden] { display: none !important; }
  .dev-weapon-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    padding: 10px;
    overflow: hidden;
  }
  .dev-weapon-list[hidden] { display: none !important; }
  .dev-panel-note { font-size: 11px; color: var(--txt-dim); line-height: 1.4; }
  .dev-adena {
    padding: 10px;
    border-radius: 4px;
    background: rgba(0,0,0,.22);
    border: 1px solid var(--edge);
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .dev-adena-head {
    font-size: 12px;
    font-weight: 700;
    color: var(--gold-soft);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
  }
  .dev-adena-head span { color: var(--gold); font-variant-numeric: tabular-nums; }
  .dev-adena-presets { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .dev-adena-preset {
    border: 1px solid var(--edge);
    border-radius: 3px;
    padding: 7px 4px;
    font-size: 11px;
    font-weight: 700;
    cursor: var(--cursor-l2);
    color: var(--ash);
    background: linear-gradient(180deg, #242220, #161412);
    transition: .12s;
  }
  .dev-adena-preset:hover { border-color: var(--accent-soft); filter: none; }
  .dev-adena-custom { display: flex; gap: 6px; }
  .dev-adena-input {
    flex: 1;
    min-width: 0;
    padding: 7px 9px;
    border-radius: 6px;
    border: 1px solid var(--edge);
    background: #120d08;
    color: var(--txt);
    font-size: 12px;
  }
  .dev-adena-input:focus { outline: none; border-color: var(--accent-soft); }
  .dev-adena-go {
    width: 34px;
    flex-shrink: 0;
    border-radius: 6px;
    border: 1px solid #3a8a52;
    background: linear-gradient(180deg, #2a6b3e, #1d4f2d);
    color: #dffbe6;
    font-size: 18px;
    font-weight: 800;
    cursor: var(--cursor-l2);
    line-height: 1;
  }
  .dev-adena-go:hover { filter: brightness(1.12); }
  .dev-quests {
    padding: 10px;
    border-radius: 8px;
    background: rgba(0,0,0,.28);
    border: 1px solid var(--edge);
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .dev-quest-zones { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
  .dev-quest-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    font-size: 11px;
  }
  .dev-quest-label { flex: 1; color: var(--muted); line-height: 1.3; }
  .dev-quest-chapter-btn {
    flex-shrink: 0;
    border: 1px solid var(--edge);
    border-radius: 5px;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 700;
    cursor: var(--cursor-l2);
    color: var(--gold);
    background: rgba(0,0,0,.35);
  }
  .dev-quest-chapter-btn:hover { border-color: var(--accent-soft); }
  .dev-mine {
    padding: 10px;
    border-radius: 8px;
    background: rgba(0,0,0,.28);
    border: 1px solid #4a3a5a;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .dev-banan-btn {
    width: 100%;
    border: 1px solid #8a6b38;
    border-radius: 7px;
    padding: 9px 10px;
    font-size: 12px;
    font-weight: 700;
    cursor: var(--cursor-l2);
    color: #f4e6c8;
    background: linear-gradient(180deg, #5a3a20, #3a2410);
    transition: .12s;
  }
  .dev-banan-btn:hover { filter: brightness(1.12); border-color: var(--purple); }
  .dev-mine-hint { font-size: 10px; color: var(--txt-dim); text-align: center; line-height: 1.4; overflow-wrap: anywhere; }
  .dev-collect {
    padding: 10px;
    border-radius: 8px;
    background: rgba(0,0,0,.28);
    border: 1px solid #4a3a5a;
  }
  .dev-collect-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(176,107,255,.45);
    border-radius: 7px;
    padding: 8px 10px;
    cursor: var(--cursor-l2);
    color: #f0e0ff;
    background: linear-gradient(180deg, #3a2848, #241830);
    font-size: 11px;
    font-weight: 700;
    text-align: left;
    transition: .12s;
  }
  .dev-collect-btn img { width: 28px; height: 28px; flex-shrink: 0; image-rendering: pixelated; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
  .dev-collect-btn span { flex: 1; min-width: 0; line-height: 1.25; }
  .dev-collect-n { color: var(--gold); font-size: 13px; min-width: 1.2em; text-align: right; }
  .dev-collect-btn:hover { filter: brightness(1.12); border-color: var(--purple); }
  .dev-secret-ach {
    padding: 10px;
    border-radius: 8px;
    background: rgba(0,0,0,.28);
    border: 1px solid rgba(140,100,200,.4);
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .dev-secret-ach-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    color: var(--gold-soft);
  }
  .dev-secret-ach-head b { color: var(--gold); font-variant-numeric: tabular-nums; }
  .dev-secret-ach-list { display: flex; flex-direction: column; gap: 5px; max-height: 220px; overflow-y: auto; }
  .dev-secret-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    border: 1px solid rgba(140,100,200,.28);
    border-radius: 6px;
    padding: 6px 8px;
    cursor: var(--cursor-l2);
    color: #e8dcff;
    background: linear-gradient(180deg, #2a2038, #1a1424);
    font-size: 11px;
    text-align: left;
    transition: .12s;
  }
  .dev-secret-row img { width: 24px; height: 24px; flex-shrink: 0; image-rendering: pixelated; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
  .dev-secret-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .dev-secret-meta b { font-size: 11px; line-height: 1.2; color: var(--gold-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dev-secret-meta small { font-size: 10px; color: var(--txt-dim); line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .dev-secret-act { flex-shrink: 0; font-size: 10px; font-weight: 800; color: #c9a0ff; min-width: 3.2em; text-align: right; }
  .dev-secret-row.done { opacity: .72; cursor: var(--cursor-l2); border-color: rgba(125,255,176,.25); }
  .dev-secret-row.done .dev-secret-act { color: #7dffb0; }
  .dev-secret-row:not(.done):hover { filter: brightness(1.12); border-color: var(--purple); }
  .dev-secret-ach-actions { display: flex; gap: 6px; }
  .dev-secret-btn {
    flex: 1;
    border: 1px solid rgba(176,107,255,.45);
    border-radius: 6px;
    padding: 7px 8px;
    font-size: 11px;
    font-weight: 700;
    cursor: var(--cursor-l2);
    color: #f0e0ff;
    background: linear-gradient(180deg, #3a2848, #241830);
    transition: .12s;
  }
  .dev-secret-btn.ghost {
    flex: 0 0 auto;
    color: var(--txt-dim);
    background: transparent;
    border-color: var(--edge);
  }
  .dev-secret-btn:hover { filter: brightness(1.12); border-color: var(--purple); }
  .dev-debug {
    margin-top: 8px;
    padding: 10px;
    border-radius: 8px;
    background: rgba(0,0,0,.28);
    border: 1px solid rgba(110,86,48,.45);
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .dev-debug-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    color: var(--gold-soft);
  }
  .dev-debug-head b { color: var(--gold); font-variant-numeric: tabular-nums; font-size: 10px; }
  .dev-debug-actions { display: flex; flex-wrap: wrap; gap: 6px; }
  .dev-debug-actions .dev-secret-btn { flex: 1 1 auto; min-width: 72px; }
  .dev-debug-actions .dev-secret-btn.on {
    color: #ffe8b8;
    border-color: rgba(255,196,80,.55);
    background: linear-gradient(180deg, #3a3018, #241a0c);
  }
  .dev-debug-feed {
    max-height: 180px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 10px;
    line-height: 1.35;
  }
  .dev-debug-empty { color: var(--txt-dim); padding: 8px 4px; text-align: center; }
  .dev-debug-row {
    display: grid;
    grid-template-columns: 52px 52px 1fr;
    gap: 6px;
    align-items: start;
    padding: 4px 6px;
    border-radius: 5px;
    background: rgba(0,0,0,.22);
    border: 1px solid rgba(255,255,255,.04);
  }
  .dev-debug-row.error { border-color: rgba(255,107,74,.35); background: rgba(80,20,10,.25); }
  .dev-debug-row.warn { border-color: rgba(255,196,80,.25); }
  .dev-debug-time { color: var(--txt-dim); font-variant-numeric: tabular-nums; }
  .dev-debug-tag { color: var(--gold-soft); font-weight: 700; }
  .dev-debug-msg { color: #e8dcc8; word-break: break-word; }
  .dev-debug-detail {
    grid-column: 1 / -1;
    margin: 0;
    padding: 4px 6px;
    font-size: 9px;
    color: var(--txt-dim);
    white-space: pre-wrap;
    word-break: break-all;
    background: rgba(0,0,0,.25);
    border-radius: 4px;
    max-height: 72px;
    overflow: auto;
  }
  .dev-tune {
    border: 1px solid rgba(176,107,255,.35);
    border-radius: 8px;
    background: rgba(0,0,0,.22);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .dev-tune-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    color: var(--gold-soft);
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  .dev-tune-reset {
    background: transparent;
    border: 1px solid var(--edge);
    color: var(--txt-dim);
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 5px;
    cursor: var(--cursor-l2);
  }
  .dev-tune-reset:hover { border-color: var(--purple); color: var(--purple); }
  .dev-tune-section {
    border: 1px solid var(--edge);
    border-radius: 6px;
    background: rgba(0,0,0,.15);
    overflow: hidden;
  }
  .dev-tune-section summary {
    cursor: var(--cursor-l2);
    padding: 6px 8px;
    font-size: 11px;
    font-weight: 700;
    color: var(--txt);
    list-style: none;
    user-select: none;
  }
  .dev-tune-section summary::-webkit-details-marker { display: none; }
  .dev-tune-section[open] summary { border-bottom: 1px solid var(--edge); color: var(--gold-soft); }
  .dev-tune-grid { display: flex; flex-direction: column; gap: 4px; padding: 6px; }
  .dev-tune-row {
    display: grid;
    grid-template-columns: 1fr minmax(96px, 42%);
    gap: 8px;
    align-items: center;
    font-size: 11px;
    color: var(--txt-dim);
  }
  .dev-tune-inp {
    width: 100%;
    background: #120d08;
    border: 1px solid var(--edge);
    border-radius: 5px;
    color: var(--gold-soft);
    font-size: 12px;
    padding: 5px 8px;
    font-variant-numeric: tabular-nums;
  }
  .dev-tune-inp:focus { outline: none; border-color: var(--purple); }
  .dev-tune-grade { padding: 6px; display: flex; flex-direction: column; gap: 4px; }
  .dev-tune-grade-h, .dev-tune-grade-r {
    display: grid;
    grid-template-columns: 1fr repeat(4, minmax(64px, 1fr));
    gap: 6px;
    align-items: center;
  }
  .dev-tune-grade-h { font-size: 10px; color: var(--txt-dim); text-align: center; }
  .dev-tune-grade-h span:first-child { text-align: left; }
  .dev-tune-grade-r span { font-size: 10px; color: var(--txt-dim); }
  .dev-tune-shot { padding: 4px 6px 8px; border-top: 1px solid var(--edge); }
  .dev-tune-shot:first-of-type { border-top: none; }
  .dev-tune-shot-g { font-size: 10px; color: var(--gold-soft); margin-bottom: 4px; font-weight: 700; }
  .dev-tune-hint { font-size: 10px; color: var(--txt-dim); line-height: 1.45; margin: 0; overflow-wrap: anywhere; word-break: break-word; }
  .dev-panel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .dev-cat {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 10px 6px; border-radius: 8px; cursor: var(--cursor-l2);
    background: linear-gradient(180deg, #2e2438, #1e1828);
    border: 1px solid #4a3a5a; color: var(--txt); transition: .15s;
  }
  .dev-cat:hover { border-color: var(--purple); filter: brightness(1.1); }
  .dev-cat-emoji { font-size: 28px; line-height: 1; }
  .dev-cat-name { font-size: 11px; font-weight: 700; color: var(--gold-soft); text-align: center; }
  .dev-cat-count { font-size: 10px; color: var(--txt-dim); }
  .dev-panel-back {
    align-self: flex-start;
    background: transparent;
    border: 1px solid var(--edge);
    color: var(--txt-dim);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    cursor: var(--cursor-l2);
  }
  .dev-panel-back:hover { border-color: var(--purple); color: var(--txt); }
  .dev-list-title { font-size: 14px; color: var(--gold-soft); font-family: var(--font-display); }
  .dev-filterbar { display: flex; flex-direction: column; gap: 8px; }
  .dev-search { width: 100%; }
  .dev-wlist { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; min-height: 0; }
  .dev-wrow {
    display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 6px 8px; border-radius: 7px; cursor: var(--cursor-l2); text-align: left;
    background: rgba(0,0,0,.25); border: 1px solid var(--edge);
    color: var(--txt); transition: .12s;
  }
  .dev-wrow:hover { border-color: var(--purple); background: rgba(176,107,255,.08); }
  .dev-wrow .wico { width: 32px; height: 32px; flex-shrink: 0; object-fit: contain; }
  .dev-wmeta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .dev-wmeta .wn { font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dev-wmeta .wd { font-size: 10px; color: var(--txt-dim); }
  .dev-wact {
    flex-shrink: 0; width: 28px; height: 28px; border-radius: 6px;
    background: linear-gradient(180deg, #3a2c5a, #241a38);
    border: 1px solid var(--purple); color: var(--purple);
    font-weight: 800; font-size: 16px; line-height: 26px; text-align: center;
  }
  .dev-panel-view::-webkit-scrollbar, .dev-wlist::-webkit-scrollbar { width: 8px; }
  .dev-panel-view::-webkit-scrollbar-thumb, .dev-wlist::-webkit-scrollbar-thumb {
    background: linear-gradient(#6e5630,#3a2c1a); border-radius: 5px;
  }
  @media (max-width: 1100px) {
    body {
      align-items: flex-start;
      overflow-x: hidden;
      overflow-y: auto;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    body::-webkit-scrollbar { width: 0; height: 0; }
    .shell { flex-direction: column; max-width: min(980px, calc(100vw - 48px)); height: auto; max-height: none; overflow: visible; }
    .app { min-height: 0; align-self: auto; }
    .app.dev-open { min-height: min(70vh, 520px); }
    .game-log-body {
      top: 12px; bottom: auto; height: min(42vh, 320px);
      width: min(300px, calc(100vw - 24px));
    }
    .dev-panel { width: min(400px, 96%); max-width: none; height: min(72vh, 640px); max-height: min(72vh, 640px); border-radius: 10px 0 0 0; }
    .dev-panel-grid { grid-template-columns: repeat(2, 1fr); }
  }
  .topbar { display: flex; align-items: center; justify-content: flex-end; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; flex-shrink: 0; }
  .brand { display: none !important; }
  .brand .l2 { font-size: 26px; color: var(--gold-soft); text-shadow: 0 0 16px rgba(201,168,106,.45); }
  .brand .sub { font-size: 12px; color: var(--txt-dim); text-transform: uppercase; letter-spacing: 2px; }
  .wallet { display: flex; align-items: center; gap: 10px; background: linear-gradient(180deg,#2a2014,#1a140c); border: 1px solid var(--edge2); border-radius: 8px; padding: 7px 14px; box-shadow: inset 0 0 8px rgba(0,0,0,.6); }
  .wallet-ico { width: 22px; height: 22px; flex-shrink: 0; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 1px 2px #000); }
  .wallet .coin { color: var(--gold-soft); font-weight: 800; letter-spacing:.3px; }
  .wallet .lbl { font-size: 10px; color: var(--txt-dim); text-transform: uppercase; letter-spacing: 1px; }
  .iconbtn { background: linear-gradient(180deg,#3a2c1a,#241a10); border: 1px solid var(--edge2); color: var(--gold-soft); width: 38px; height: 38px; border-radius: 8px; cursor: var(--cursor-l2); font-size: 16px; transition: .15s; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
  .iconbtn:hover { border-color: var(--gold); filter: brightness(1.15); }
  .iconbtn.dev-toggle.on { border-color: var(--purple); box-shadow: 0 0 12px rgba(176,107,255,.35); }
  .topbar-actions { display: flex; gap: 10px; align-items: center; position: relative; flex-wrap: wrap; justify-content: flex-end; }
  .topbar-hub-meta {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }
  .topbar-hub-meta .corner-bar {
    flex-wrap: nowrap;
    justify-content: flex-end;
  }
  .topbar-hub-meta .corner-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: min(300px, calc(100vw - 32px));
    z-index: 65;
  }
  .app:not(.hub-screen) .topbar-hub-meta {
    display: none;
  }
  .settings-pop { position: absolute; top: calc(100% + 8px); right: 0; min-width: 272px; background: linear-gradient(180deg,#2e2418,#1a140c); border: 1px solid var(--edge2); border-radius: 10px; padding: 10px 0; box-shadow: 0 16px 40px rgba(0,0,0,.55); z-index: 60; }
  .settings-pop[hidden] { display: none; }
  .tile[hidden] { display: none !important; }
  .settings-pop .settings-head { padding: 4px 16px 10px; font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--txt-dim); border-bottom: 1px solid var(--edge); margin-bottom: 6px; }
  .settings-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; font-size: 13px; }
  .settings-row span { color: var(--txt); }
  .sett-toggle { background: linear-gradient(180deg,#3a2c1a,#241a10); border: 1px solid var(--edge2); color: var(--gold-soft); border-radius: 7px; padding: 5px 12px; font-size: 12px; font-weight: 700; cursor: var(--cursor-l2); min-width: 52px; transition: .15s; }
  .sett-toggle.on { background: linear-gradient(180deg,#2a6b3e,#1d4f2d); border-color: #3a8a52; color: #dffbe6; }
  .sett-toggle:hover { filter: brightness(1.12); }
  .sett-hint { padding: 0 16px 8px; font-size: 11px; color: var(--txt-dim); line-height: 1.4; }
  .settings-vol { gap: 10px; }
  .settings-vol span { flex: 0 0 88px; }
  .sett-range {
    flex: 1; min-width: 0; height: 4px; accent-color: var(--gold-soft);
    cursor: var(--cursor-l2);
  }
  .sett-vol-val { flex: 0 0 38px; text-align: right; font-size: 12px; color: var(--gold); font-variant-numeric: tabular-nums; }
  .settings-divider { padding: 10px 16px 6px; font-size: 10px; text-transform: uppercase; letter-spacing: 1.4px; color: var(--txt-dim); border-top: 1px solid var(--edge); margin-top: 4px; }
  .player-id { font-size: 11px; color: var(--gold-soft); background: rgba(0,0,0,.25); padding: 3px 8px; border-radius: 5px; border: 1px solid var(--edge); font-family: Consolas, monospace; }
  .cloud-auth-status { font-size: 12px; color: var(--gold-soft); font-weight: 600; }
  .cloud-auth-form { padding: 4px 16px 10px; display: flex; flex-direction: column; gap: 8px; }
  .cloud-input {
    width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 4px;
    border: 1px solid var(--edge2); background: rgba(0,0,0,.35); color: var(--txt); font: inherit;
  }
  .cloud-auth-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  #cloudAuthMsg.warn { color: #c87868; }
  .lb-body { padding: 12px 18px 28px; }
  .lb-tabs { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
  .lb-tab {
    border: 1px solid var(--edge2); background: rgba(12,10,8,.7); color: var(--txt-dim);
    padding: 6px 12px; border-radius: 4px; cursor: pointer; font: inherit;
  }
  .lb-tab.sel { color: var(--gold-soft); border-color: rgba(180,140,90,.45); }
  .lb-status { font-size: 12px; color: var(--txt-dim); margin-bottom: 12px; }
  .lb-login-cta {
    display: inline-flex; align-items: center; margin: -4px 0 12px;
    padding: 8px 14px; border-radius: 4px; border: 1px solid rgba(180,140,90,.4);
    background: linear-gradient(180deg, #3a2c18, #1e160c);
    color: var(--gold-soft); font: inherit; font-size: 12px; font-weight: 700;
    cursor: var(--cursor-l2);
  }
  .lb-login-cta[hidden] { display: none !important; }
  .lb-login-cta:hover { filter: brightness(1.08); }
  .lb-list { display: flex; flex-direction: column; gap: 6px; }
  .lb-row {
    display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center;
    padding: 8px 12px; border: 1px solid var(--edge); border-radius: 4px;
    background: rgba(0,0,0,.22);
  }
  .lb-row.me {
    border-color: rgba(201,168,106,.65);
    background: rgba(55,40,16,.55);
    box-shadow: inset 0 0 0 1px rgba(201,168,106,.15);
  }
  .lb-row.mine {
    border-color: rgba(201,168,106,.35);
    background: rgba(40,30,14,.4);
  }
  .lb-rank { color: var(--txt-dim); font-variant-numeric: tabular-nums; }
  .lb-name { color: var(--txt); font-weight: 600; display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
  .lb-name-main { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lb-nick {
    flex-shrink: 0; font-size: 11px; font-weight: 500; color: var(--txt-dim);
    opacity: .9;
  }
  .lb-nick::before { content: "· "; opacity: .7; }
  .lb-me-tag {
    flex-shrink: 0; font-size: 10px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: #1a1208; background: var(--gold-soft);
    border-radius: 3px; padding: 1px 6px;
  }
  .lb-mine-tag {
    flex-shrink: 0; font-size: 10px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--gold-soft);
    border: 1px solid rgba(201,168,106,.45); border-radius: 3px; padding: 0 5px;
  }
  .lb-val { color: var(--gold-soft); font-variant-numeric: tabular-nums; }
  .lb-empty { color: var(--txt-dim); font-size: 13px; }

  .card { position: relative; background:
      linear-gradient(180deg, #2a2014, #1d160d),
      repeating-linear-gradient(90deg, rgba(0,0,0,0) 0 6px, rgba(255,255,255,.01) 6px 7px);
    border: 2px solid var(--edge2); border-radius: 10px;
    box-shadow: 0 24px 60px rgba(0,0,0,.6), inset 0 0 0 2px #140d07, inset 0 0 0 3px #3a2c1a, inset 0 0 40px rgba(0,0,0,.5);
    overflow: hidden; }
  .card::before { content:""; position:absolute; inset:6px; border:1px solid rgba(201,168,106,.25); border-radius:6px; pointer-events:none; z-index:5; }
  .app > .card:has(#screen-mine.active),
  .app > .card:has(#screen-ach.active),
  .app > .card:has(#screen-avatar.active),
  .app > .card:has(#screen-quests.active),
  .app > .card:has(#screen-inv.active),
  .app > .card:has(#screen-shop.active),
  .app > .card:has(#screen-ench.active),
  .app > .card:has(#screen-acc.active),
  .app.sub-screen > .card {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .app > .card:has(#screen-mine.active)::before { display: none; }
  .app.hub-screen > .card::before { display: none; }
  .app:has(#screen-mine.active),
  .app:has(#screen-ach.active),
  .app:has(#screen-avatar.active),
  .app:has(#screen-quests.active),
  .app:has(#screen-inv.active),
  .app:has(#screen-shop.active),
  .app:has(#screen-ench.active),
  .app:has(#screen-acc.active) { overflow: hidden; }
  .screen { display: none; }
  .screen.active { display: block; animation: fade .35s ease; }
  #screen-menu.active { display: flex; flex-direction: column; }
  #screen-mine.active {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  #screen-ach.active,
  #screen-avatar.active,
  #screen-quests.active,
  #screen-inv.active,
  #screen-shop.active,
  #screen-ench.active,
  #screen-acc.active {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  #screen-ach .panel-head,
  #screen-ach .ach-sticky-meta,
  #screen-avatar .panel-head,
  #screen-quests .panel-head,
  #screen-inv .panel-head,
  #screen-shop .panel-head,
  #screen-ench .panel-head,
  #screen-acc .panel-head { flex-shrink: 0; }
  #screen-ach .ach-scroll,
  #screen-avatar .avatar-screen,
  #screen-quests .quest-journal-list,
  #screen-inv .wlist,
  #screen-shop .wsbody,
  #screen-ench .ench,
  #screen-acc .acc-panel {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
  }
  #screen-ach .ach-scroll { padding: 0 16px 20px; }
  #screen-mine .panel-head,
  #screen-mine .mine-hud,
  #screen-mine .mine-story-bar,
  #screen-mine .mine-quest-hud,
  #screen-mine .mine-session-loot { flex-shrink: 0; }
  @keyframes fade { from { opacity: 0; transform: translateY(8px);} to {opacity:1; transform:none;} }

  .hero { padding: 16px 20px 8px; }
  .hero-panel {
    position: relative;
    border-radius: 14px;
    border: 2px solid #6e5630;
    box-shadow:
      0 0 0 1px #140d07,
      0 0 0 3px rgba(201,168,106,.12),
      0 14px 36px rgba(0,0,0,.55),
      inset 0 1px 0 rgba(255,255,255,.08);
    overflow: hidden;
    isolation: isolate;
    min-height: 168px;
  }
  .hero-bg {
    position: absolute;
    inset: 0;
    background:
      url("../assets/ui/hero_banner_bg.png?v=1") center 42% / cover no-repeat,
      linear-gradient(180deg, #1a1208 0%, #0e0a06 100%);
    transform: scale(1.02);
    filter: saturate(1.08) contrast(1.05) brightness(0.92);
  }
  .hero-scrim {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 85% 90% at 50% 38%, rgba(8,5,3,.25), rgba(8,5,3,.72) 72%),
      linear-gradient(180deg, rgba(6,4,2,.35) 0%, rgba(6,4,2,.88) 100%);
    pointer-events: none;
  }
  .hero-vignette {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 90% 70% at 50% 18%, rgba(201,168,106,.18), transparent 55%),
      linear-gradient(180deg, rgba(8,5,3,.55) 0%, rgba(8,5,3,.82) 48%, rgba(6,4,2,.94) 100%);
    pointer-events: none;
  }
  .hero-glow {
    position: absolute;
    inset: -20% -5%;
    background: radial-gradient(ellipse 50% 40% at 50% 0%, rgba(255,196,107,.28), transparent 70%);
    pointer-events: none;
    animation: heroGlow 4s ease-in-out infinite;
    mix-blend-mode: screen;
  }
  @keyframes heroGlow {
    0%, 100% { opacity: .65; }
    50% { opacity: 1; }
  }
  .hero-embers {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
  }
  .hero-embers span {
    position: absolute;
    bottom: -4px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #ffc46b;
    box-shadow: 0 0 6px #ff9a2e;
    opacity: 0;
    animation: heroEmber 4.5s ease-in infinite;
  }
  .hero-embers span:nth-child(1) { left: 12%; animation-delay: 0s; }
  .hero-embers span:nth-child(2) { left: 28%; animation-delay: 1.2s; }
  .hero-embers span:nth-child(3) { left: 44%; animation-delay: 2.4s; }
  .hero-embers span:nth-child(4) { left: 62%; animation-delay: .6s; }
  .hero-embers span:nth-child(5) { left: 78%; animation-delay: 1.8s; }
  .hero-embers span:nth-child(6) { left: 90%; animation-delay: 3.1s; }
  @keyframes heroEmber {
    0% { opacity: 0; transform: translateY(0) scale(.6); }
    15% { opacity: .9; }
    100% { opacity: 0; transform: translateY(-72px) scale(.2); }
  }
  .hero-inner {
    position: relative;
    z-index: 1;
    padding: 18px 20px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .hero-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
  }
  .hero-brand-text { text-align: center; min-width: 0; }
  .hero-brand-mark {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: rgba(231,207,149,.55);
    border: 1px solid rgba(201,168,106,.35);
    border-radius: 6px;
    background: rgba(0,0,0,.35);
    box-shadow: inset 0 0 10px rgba(0,0,0,.5);
  }
  .hero-panel::before,
  .hero-panel::after {
    content: "";
    position: absolute;
    z-index: 2;
    width: 32px;
    height: 32px;
    border: 2px solid rgba(231,207,149,.55);
    pointer-events: none;
  }
  .hero-panel::before { top: 10px; left: 10px; border-right: none; border-bottom: none; border-radius: 6px 0 0 0; }
  .hero-panel::after { bottom: 10px; right: 10px; border-left: none; border-top: none; border-radius: 0 0 6px 0; }
  .hero-crest {
    display: none;
  }
  .hero-eyebrow {
    font-size: 10px;
    letter-spacing: 2.6px;
    text-transform: uppercase;
    color: rgba(231,207,149,.72);
    margin-bottom: 6px;
    text-shadow: 0 1px 4px rgba(0,0,0,.8);
  }
  .hero h1 {
    font-family: var(--font-display);
    font-size: clamp(30px, 4.8vw, 38px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: .4px;
    color: #f3e2b8;
    text-shadow:
      0 0 24px rgba(255,196,107,.45),
      0 2px 0 #5c4520,
      0 3px 8px rgba(0,0,0,.85);
    animation: heroShimmer 5s ease-in-out infinite;
  }
  @keyframes heroShimmer {
    0%, 100% { text-shadow: 0 0 20px rgba(255,196,107,.35), 0 2px 0 #5c4520, 0 3px 8px rgba(0,0,0,.85); }
    50% { text-shadow: 0 0 32px rgba(255,196,107,.65), 0 2px 0 #5c4520, 0 3px 8px rgba(0,0,0,.85); }
  }
  .hero-sub {
    margin-top: 6px;
    font-size: 11px;
    letter-spacing: 3.2px;
    text-transform: uppercase;
    color: rgba(201,168,106,.75);
    text-shadow: 0 1px 3px rgba(0,0,0,.7);
  }
  .hero-tagline {
    margin: 0 auto;
    max-width: 520px;
    font-size: 12px;
    line-height: 1.45;
    color: rgba(217, 205, 178, .88);
    text-shadow: 0 1px 6px rgba(0, 0, 0, .85);
    font-style: italic;
    text-align: center;
  }
  .hero-rule {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    color: rgba(201,168,106,.45);
    font-size: 8px;
  }
  .hero-rule::before,
  .hero-rule::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201,168,106,.55), transparent);
  }
  .hero-rule span { color: rgba(231,207,149,.65); font-size: 9px; }
  .hero-cycle {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    max-width: 560px;
    margin: 2px auto 0;
    width: 100%;
  }
  .hero-cycle-track {
    position: absolute;
    top: 28px;
    left: 12%;
    right: 12%;
    height: 2px;
    background: linear-gradient(90deg, rgba(155,230,166,.35), rgba(95,168,255,.45) 50%, rgba(255,196,107,.55));
    border-radius: 2px;
    opacity: .65;
    pointer-events: none;
    z-index: 0;
  }
  .hero-flow {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 4px;
    flex-wrap: wrap;
  }
  .hero-step {
    position: relative;
    z-index: 1;
    flex: 1 1 88px;
    min-width: 0;
    max-width: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 10px 8px 9px;
    border-radius: 10px;
    border: 1px solid rgba(110,86,48,.85);
    background: linear-gradient(180deg, rgba(14,10,6,.82), rgba(8,6,4,.78));
    backdrop-filter: blur(4px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 4px 14px rgba(0,0,0,.4);
    transition: border-color .2s, transform .2s, box-shadow .2s;
  }
  .hero-step-mine { border-top: 2px solid rgba(155,230,166,.55); }
  .hero-step-ench { border-top: 2px solid rgba(95,168,255,.55); }
  .hero-step-gold { border-top: 2px solid rgba(255,196,107,.65); }
  .hero-step:hover {
    transform: translateY(-2px);
    border-color: var(--gold);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 6px 18px rgba(0,0,0,.45), 0 0 16px rgba(201,168,106,.12);
  }
  .hero-step-ico {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 7px;
    border-radius: 9px;
    background: radial-gradient(circle at 50% 30%, rgba(255,255,255,.06), rgba(0,0,0,.5));
    border: 1px solid rgba(74,58,36,.95);
    box-shadow: inset 0 0 12px rgba(0,0,0,.55);
  }
  .hero-step-ico img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    image-rendering: auto;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.6));
  }
  @media (max-width: 640px) {
    .hero-brand-mark { display: none; }
    .hero-cycle { gap: 6px; }
    .hero-cycle-track { display: none; }
    .hero-step { padding: 8px 4px; }
    .hero-step-d { font-size: 9px; }
    .hero-inner { padding: 14px 12px 12px; gap: 8px; }
  }
  @media (max-width: 480px) {
    .hero-tagline { display: none; }
    .hero-step-d { display: none; }
  }
  @media (max-width: 380px) {
    .hero-cycle { display: none; }
  }
  .hero-step-t {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    color: var(--gold-soft);
    line-height: 1.2;
    text-shadow: 0 1px 3px rgba(0,0,0,.7);
  }
  .hero-step-d {
    margin-top: 3px;
    font-size: 10px;
    line-height: 1.35;
    color: rgba(217,205,178,.72);
  }
  .hero-step-arrow {
    flex: 0 0 auto;
    align-self: center;
    font-size: 22px;
    line-height: 1;
    color: rgba(201,168,106,.55);
    text-shadow: 0 0 8px rgba(201,168,106,.35);
    font-weight: 700;
    user-select: none;
  }
  @media (max-width: 520px) {
    .topbar-hub-meta .corner-fab { padding: 5px 8px; font-size: 10px; }
  }
  .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; padding: 22px; }
  .tile { background: linear-gradient(180deg,#2e2418,#201810); border: 1px solid var(--edge2); border-radius: 8px; padding: 18px 16px 20px; text-align: center; cursor: var(--cursor-l2); transition: .18s; box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
    display: flex; flex-direction: column; align-items: center; min-height: 168px; }
  .tile:hover { transform: translateY(-4px); border-color: var(--gold); box-shadow: 0 16px 30px rgba(0,0,0,.5), 0 0 14px rgba(201,168,106,.25); }
  .tile .emoji { font-size: 52px; line-height: 80px; height: 80px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.5)); }
  .tile .tile-ico { width: 80px; height: 80px; flex-shrink: 0; margin: 0 auto; object-fit: contain; image-rendering: auto; filter: drop-shadow(0 4px 10px rgba(0,0,0,.5)); display: block; }
  #avatarTile:hover .tile-ico,
  #questTile:hover .tile-ico,
  #invTile:hover .tile-ico,
  #shopTile:hover .tile-ico,
  #achTile:hover .tile-ico { filter: drop-shadow(0 4px 12px rgba(201,168,106,.45)) brightness(1.12); }
  #avatarTile:active .tile-ico,
  #questTile:active .tile-ico,
  #invTile:active .tile-ico,
  #shopTile:active .tile-ico,
  #achTile:active .tile-ico { transform: scale(0.96); }
  .tile .tname { margin-top: 8px; font-weight: 600; font-size: 14px; color: var(--gold-soft); font-family: var(--font-display); letter-spacing: 0.01em; }
  .tile .tcount { font-size: 12px; color: var(--txt-dim); margin-top: 4px; line-height: 1.4; }

  .panel-head { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--edge2); flex-wrap: wrap;
    background: linear-gradient(180deg, rgba(42,32,20,.95), rgba(22,16,10,.98));
    box-shadow: 0 4px 18px rgba(0,0,0,.35), inset 0 1px 0 rgba(231,207,149,.06);
    flex-shrink: 0; z-index: 2; }
  .panel-head-ornate {
    border-bottom-color: rgba(201,168,106,.35);
    background:
      linear-gradient(180deg, rgba(52,38,22,.98), rgba(18,12,8,.99)),
      repeating-linear-gradient(90deg, transparent 0 12px, rgba(201,168,106,.03) 12px 13px);
  }
  .panel-head h2 { font-size: 18px; color: var(--gold-soft); font-family: var(--font-display); letter-spacing: 0.02em; font-weight: 600; display:flex; align-items:center; gap:8px; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
  .inv-head-ico { width:22px; height:22px; image-rendering:auto; filter:drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
  .back { background: linear-gradient(180deg,#3a2c1a,#241a10); border: 1px solid var(--edge2); color: var(--gold-soft); padding: 7px 14px; border-radius: 7px; cursor: var(--cursor-l2); font-size: 13px; transition: .15s; }
  .back:hover { border-color: var(--gold); filter:brightness(1.12); }

  .filterbar { display: flex; gap: 10px; align-items: center; padding: 12px 20px; border-bottom: 1px solid var(--edge); flex-wrap: wrap; }
  .grade-filters { display: flex; gap: 6px; }
  .gf { background: linear-gradient(180deg,#2a2014,#1c140c); border: 1px solid var(--edge); color: var(--txt-dim); padding: 6px 12px; border-radius: 6px; cursor: var(--cursor-l2); font-size: 13px; font-weight: 700; transition: .15s; }
  .gf:hover { color: var(--gold-soft); }
  .gf.sel { border-color: var(--gold); color: var(--gold-soft); background: rgba(201,168,106,.14); }
  .search { flex: 1; min-width: 160px; background: var(--slot); border: 1px solid var(--edge); color: var(--txt); padding: 8px 12px; border-radius: 6px; font-size: 13px; outline: none; box-shadow: inset 0 0 6px rgba(0,0,0,.6); }
  .search:focus { border-color: var(--gold); }

  .wlist {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .inv-bar, .inv-res, .inv-crystallize, .empty { flex-shrink: 0; }
  #screen-inv .wlist {
    display: flex;
    flex-direction: column;
    min-height: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  #screen-inv .wlist::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }
  #screen-inv .inv-grid-panel {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--edge2);
    background: rgba(0,0,0,.12);
  }
  #screen-inv .inv-grid-panel .inv-grid {
    flex: 0 0 auto;
    align-content: start;
    overflow: visible;
  }
  .wrow { display: flex; align-items: center; gap: 14px; padding: 11px 20px; cursor: var(--cursor-l2); border-bottom: 1px solid rgba(74,58,36,.5); transition: .12s; }
  .wrow:hover { background: rgba(201,168,106,.08); }
  .wrow .wico { width: 42px; height: 42px; object-fit: contain; image-rendering: auto; flex-shrink: 0; background: var(--slot); border:1px solid var(--edge); border-radius:5px; padding:2px; box-shadow: inset 0 0 5px rgba(0,0,0,.7); }
  .wrow .wmeta { flex: 1; min-width: 0; }
  .wrow .wn { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .wrow .wd { font-size: 12px; color: var(--txt-dim); }
  .empty { padding: 30px; text-align: center; color: var(--txt-dim); line-height:1.6; }
  .grade { font-weight: 800; font-size: 11px; padding: 1px 7px; border-radius: 5px; margin-left: 4px; }
  .g-A { color: #ffc46b; background: rgba(201,168,106,.16); border:1px solid rgba(201,168,106,.55);}
  .g-B { color: #c79bff; background: rgba(176,107,255,.14); border:1px solid rgba(176,107,255,.45);}
  .g-C { color: #7fd1ff; background: rgba(95,168,255,.12); border:1px solid rgba(95,168,255,.4);}
  .g-D { color: #9be6a6; background: rgba(118,196,106,.12); border:1px solid rgba(118,196,106,.35);}
  .best-tag { color: var(--gold); }

  /* Инвентарь — сетка ячеек как в Lineage 2 */
  .inv-bar { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px 12px; padding:9px 18px; color:var(--gold-soft); font-weight:700; font-size:13px; border-bottom:1px solid var(--edge2); background: rgba(0,0,0,.25); font-family: var(--font-display); }
  .inv-bar-title span { color: var(--txt-dim); font-weight:400; }
  .inv-sort { display:flex; flex-wrap:wrap; gap:4px; justify-content:flex-end; }
  .inv-sort-btn {
    font: 600 10px/1 var(--font-ui, system-ui);
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid #3a2c1a;
    background: linear-gradient(180deg, #1a1208, #0f0a06);
    color: var(--txt-dim);
    cursor: var(--cursor-l2);
    transition: .12s;
  }
  .inv-sort-btn:hover { border-color: var(--gold-dim, #8a7040); color: var(--gold-soft); }
  .inv-sort-btn.active {
    border-color: var(--gold);
    color: #1a1208;
    background: linear-gradient(180deg, #ffe9a8, #c9a86a);
    box-shadow: 0 0 8px rgba(201,168,106,.35);
  }
  .inv-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    padding: 8px 12px 0;
    flex-shrink: 0;
  }
  .inv-tab {
    flex: 1 1 0;
    min-width: 46px;
    padding: 8px 6px 9px;
    border: 1px solid #4a3820;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    background: linear-gradient(180deg, #1a1208 0%, #100a06 100%);
    font: 800 11px/1.1 var(--font-ui, system-ui);
    color: #8a7a62;
    cursor: var(--cursor-l2);
    transition: .12s;
    position: relative;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  }
  .inv-tab.g-A { color: #c9a050; }
  .inv-tab.g-B { color: #a878e8; }
  .inv-tab.g-C { color: #6ecf78; }
  .inv-tab.g-D { color: #5aa8e8; }
  .inv-tab.g-NG { color: #9a9a9a; }
  .inv-tab:hover:not(.active) {
    color: var(--gold-soft);
    border-color: #6e5630;
    background: linear-gradient(180deg, #24180c, #140e08);
  }
  .inv-tab.active {
    color: #ffe9a8;
    border-color: var(--gold);
    background: linear-gradient(180deg, #3a2c18 0%, #1e160c 100%);
    box-shadow:
      0 -2px 10px rgba(201,168,106,.18),
      inset 0 1px 0 rgba(255,233,168,.18),
      inset 0 0 12px rgba(201,168,106,.08);
    z-index: 1;
    padding-bottom: 10px;
    margin-bottom: -1px;
  }
  .inv-tab.g-A.active { color: #ffe9a8; border-color: #ffc46b; box-shadow: 0 -2px 10px rgba(255,196,107,.2), inset 0 1px 0 rgba(255,233,168,.2); }
  .inv-tab.g-B.active { color: #f0e0ff; border-color: #c79bff; }
  .inv-tab.g-C.active { color: #e0ffe4; border-color: #5fcf6b; }
  .inv-tab.g-D.active { color: #e0f4ff; border-color: #5fb8ff; }
  .inv-tab.g-NG.active { color: #e8e8e8; border-color: #9a9a9a; }
  .inv-tab .inv-tab-n {
    font-size: 10px;
    font-weight: 700;
    opacity: .75;
    margin-left: 1px;
    color: inherit;
  }
  .inv-equipped {
    margin: 0 0 12px;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(12,8,4,.55);
    border: 1px solid rgba(201,168,106,.28);
  }
  .inv-equipped-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 12px;
  }
  .inv-equipped-head b { color: var(--gold-soft); }
  .inv-equipped-head span { color: var(--txt-dim); font-size: 11px; }
  .inv-equipped .inv-slot.equipped {
    width: 64px;
    height: 64px;
    border-width: 2px;
    box-shadow: 0 0 14px rgba(201,168,106,.35), inset 0 0 6px rgba(0,0,0,.55);
  }
  .inv-equipped-meta {
    margin-top: 8px;
    font-size: 12px;
    color: var(--txt-dim);
  }
  .inv-slot .inv-eq-badge {
    position: absolute;
    left: 2px;
    top: 1px;
    z-index: 2;
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 3px;
    color: #1a1208;
    background: linear-gradient(180deg, #ffe9a8, #c9a86a);
    box-shadow: 0 1px 3px rgba(0,0,0,.6);
    pointer-events: none;
  }
  .inv-empty-note { margin-top: 4px; font-size: 13px; }
  .inv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 54px);
    gap: 6px;
    padding: 10px 16px 16px;
    justify-content: center;
    overscroll-behavior: contain;
    touch-action: pan-y;
    border-top: 1px solid var(--gold-dim, #6e5630);
    background: linear-gradient(180deg, rgba(20,14,8,.55), rgba(8,6,4,.35));
  }
  .inv-slot.filled.inv-draggable { cursor: grab; }
  .inv-slot.filled.inv-draggable:active,
  .inv-slot.filled.inv-draggable.dragging { cursor: grabbing; }
  .inv-drag-ghost {
    position: fixed;
    left: 0;
    top: 0;
    width: 50px;
    height: 50px;
    margin-left: -25px;
    margin-top: -25px;
    z-index: 100000;
    pointer-events: none;
    border-radius: 4px;
    border: 2px solid var(--gold);
    background: linear-gradient(160deg, #1a1208, #0f0a06);
    box-shadow:
      0 10px 28px rgba(0,0,0,.8),
      0 0 18px rgba(201,168,106,.5);
    opacity: 0.95;
    transform: scale(1.06);
  }
  .inv-drag-ghost.g-D { border-color: #5fb8ff; box-shadow: 0 10px 28px rgba(0,0,0,.8), 0 0 16px rgba(95,184,255,.45); }
  .inv-drag-ghost.g-C { border-color: #5fcf6b; }
  .inv-drag-ghost.g-B { border-color: #c79bff; }
  .inv-drag-ghost.g-A { border-color: #ffc46b; }
  .inv-drag-ghost img {
    position: absolute;
    inset: 4px;
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    object-fit: contain;
    pointer-events: none;
    -webkit-user-drag: none;
  }
  .inv-drag-ghost .ip {
    position: absolute;
    right: 2px;
    bottom: 0;
    font-size: 11px;
    font-weight: 800;
    color: #ffe9a8;
    text-shadow: 0 1px 2px #000, 0 0 4px #000;
    pointer-events: none;
  }
  .inv-slot { width:54px; height:54px; border-radius:4px; position:relative;
    background: linear-gradient(160deg,#0f0a06,#1d140b); border:1px solid #3a2c1a; box-shadow: inset 0 0 7px rgba(0,0,0,.85); transition:.12s;
    user-select: none;
    touch-action: none;
  }
  .inv-slot.filled { cursor:var(--cursor-l2); }
  .inv-slot.filled:hover { border-color: var(--gold); box-shadow: 0 0 12px rgba(201,168,106,.55), inset 0 0 5px rgba(0,0,0,.6); transform: translateY(-2px); }
  .inv-slot.empty { opacity:.6; }
  .inv-slot.g-D { border-color:#5fb8ff; }
  .inv-slot.g-NG { border-color:#7a7a7a; opacity: .92; }
  .grade.g-NG { color: #a8a8a8; }
  .g-NG { color: #b0b0b0; }
  .inv-slot.g-C { border-color:#5fcf6b; }
  .inv-slot.g-B { border-color:#ff3b3b; }
  .inv-slot.g-A { border-color:#f6b8d6; }
  .inv-slot.g-epic { border-color:#b06bff; box-shadow:0 0 12px rgba(176,107,255,.4), inset 0 0 5px rgba(0,0,0,.6); }
  /* img/badge не должны блокировать HTML5-drag родителя (WebView2/Tauri) */
  .inv-slot img,
  .inv-slot .ip,
  .inv-slot .inv-eq-badge {
    position:absolute;
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
  }
  .inv-slot img { inset:4px; width:calc(100% - 8px); height:calc(100% - 8px); object-fit:contain; image-rendering:auto; }
  .inv-slot .ip { right:2px; bottom:0; left:auto; top:auto; width:auto; height:auto; font-size:12px; font-weight:800; color:#ffe9a8; text-shadow:0 1px 2px #000,0 0 4px #000; }
  .inv-slot.dragging { opacity:.35; }
  .inv-slot.dragover { outline:2px dashed var(--gold); outline-offset:1px; border-color: var(--gold); }
  .inv-res { padding: 9px 18px 10px; border-bottom: 1px solid var(--edge); background: rgba(0,0,0,.18); overflow-x: auto; }
  .inv-res-row {
    display: grid;
    grid-template-columns: 92px repeat(4, minmax(72px, 1fr)) auto;
    column-gap: 10px;
    row-gap: 6px;
    align-items: center;
    min-width: min(100%, 620px);
  }
  .inv-res-row + .inv-res-row { margin-top: 8px; }
  .inv-res .cl { color: var(--txt-dim); font-size: 13px; white-space: nowrap; }
  .inv-res .cr { display: flex; align-items: flex-start; gap: 5px; min-width: 0; }
  .inv-res .cr .cicon { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; image-rendering: pixelated; image-rendering: crisp-edges; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
  .inv-res .cr-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
  .inv-res .cr-lbl { font-size: 12px; font-weight: 700; line-height: 1.15; white-space: nowrap; }
  .inv-res .cr-meta b { font-size: 12px; font-weight: 800; color: #fff; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .inv-res .cryst-sell { grid-column: 6; justify-self: end; align-self: center; }
  .cryst-bar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:9px 18px; border-bottom:1px solid var(--edge); background: rgba(0,0,0,.18); }
  .cryst-bar .cl { color: var(--txt-dim); font-size:13px; }
  .cryst-bar .cr { font-size:13px; font-weight:700; display:inline-flex; align-items:center; gap:3px; }
  .cryst-bar .cr .cicon { width:20px; height:20px; image-rendering:pixelated; image-rendering:crisp-edges; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
  .cryst-bar .cr b { margin-left:2px; color:#fff; }
  .cryst-sell { margin-left:auto; background: linear-gradient(180deg,#2a6b3e,#1d4f2d); color:#dffbe6; border:1px solid #3a8a52; border-radius:7px; padding:6px 12px; font-weight:700; font-size:12px; cursor:var(--cursor-l2); transition:.15s; white-space: nowrap; }
  .cryst-sell:hover:not(:disabled){ filter:brightness(1.12); border-color:#58d977; }
  .cryst-sell:disabled { opacity:.4; cursor:var(--cursor-l2); }

  .inv-crystallize {
    display:grid; grid-template-columns:54px 1fr; align-items:center; gap:14px;
    padding:12px 18px; border-bottom:1px solid var(--edge2); background:rgba(0,0,0,.12);
    cursor: var(--cursor-l2);
  }
  .inv-crystallize-slot {
    width:54px; height:54px; position:relative;
    background:linear-gradient(160deg,#0f0a06,#1d140b); border:1px solid #3a2c1a; border-radius:4px;
    box-shadow:inset 0 0 7px rgba(0,0,0,.85);
    overflow:hidden;
  }
  .inv-crystallize-ico {
    position:absolute; width:40px; height:40px;
    top:50%; left:50%; transform:translate(-50%, -50%);
    object-fit:contain; object-position:center;
    image-rendering:auto;
    pointer-events:none; transition:filter .12s;
  }
  .inv-crystallize.hover .inv-crystallize-ico { filter:brightness(1.12); }
  .inv-crystallize.dragover .inv-crystallize-ico { filter:brightness(1.2) drop-shadow(0 0 6px rgba(95,184,255,.5)); }
  .inv-crystallize-text { display:flex; flex-direction:column; justify-content:center; gap:4px; min-width:0; }
  .inv-crystallize-text b { color:var(--gold-soft); font-size:14px; font-family: var(--font-display); line-height:1.2; }
  .inv-crystallize-text span { color:var(--txt-dim); font-size:12px; line-height:1.35; }

  .ench { display: grid; grid-template-columns: 1.25fr 1fr; }
  @media (max-width: 760px) { .ench { grid-template-columns: 1fr; } }
  .stage { position: relative; padding: 26px; min-height: 430px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(420px 420px at 50% 40%, rgba(120,80,30,.28), transparent 70%), #120c06; overflow: hidden; }
  .ench-rays {
    position: absolute; inset: -30%; pointer-events: none; z-index: 0; opacity: 0;
    background: conic-gradient(from 0deg, transparent 0deg, rgba(255, 220, 150, .12) 40deg, transparent 80deg, rgba(255, 200, 100, .08) 140deg, transparent 200deg, rgba(255, 230, 180, .1) 280deg, transparent 360deg);
    mix-blend-mode: screen;
  }
  .ench-flash {
    position: absolute; inset: 0; pointer-events: none; z-index: 5; opacity: 0;
    --flash-color: #ffc847;
    background:
      radial-gradient(circle at 50% 42%, rgba(255, 196, 72, .22) 0%, rgba(255, 160, 40, .1) 20%, transparent 52%);
  }
  .stage.charging .ench-rays { opacity: 1; animation: enchRaysSpin 1.1s linear infinite; }
  .stage.charging .ench-flash { animation: enchChargePulse .55s ease-in-out infinite alternate; }
  .stage.charging .aura { animation: enchAuraPulse .45s ease-in-out infinite alternate; }
  .stage.success-flash .ench-flash {
    background:
      radial-gradient(circle at 50% 42%, rgba(255, 210, 90, .32) 0%, rgba(255, 170, 50, .14) 24%, transparent 58%);
    animation: enchSuccessFlash .85s cubic-bezier(.2, .8, .3, 1) forwards;
  }
  .stage.fail-flash .ench-flash {
    background: radial-gradient(circle at 50% 42%, rgba(255, 70, 50, .42) 0%, rgba(120, 20, 10, .18) 28%, transparent 58%);
    animation: enchFailFlash .58s ease-out forwards;
  }
  @keyframes enchRaysSpin { to { transform: rotate(360deg); } }
  @keyframes enchChargePulse {
    from { opacity: .08; transform: scale(.97); }
    to { opacity: .22; transform: scale(1.02); }
  }
  @keyframes enchAuraPulse {
    from { transform: scale(.92); filter: brightness(.85); }
    to { transform: scale(1.08); filter: brightness(1.2); }
  }
  @keyframes enchSuccessFlash {
    0% { opacity: 0; transform: scale(.88); }
    18% { opacity: .55; transform: scale(1); }
    42% { opacity: .28; transform: scale(1.08); }
    100% { opacity: 0; transform: scale(1.28); }
  }
  @keyframes enchFailFlash {
    0% { opacity: 0; transform: scale(.9); }
    18% { opacity: .85; transform: scale(1.05); }
    100% { opacity: 0; transform: scale(1.2); }
  }
  .wname { font-size: 21px; font-weight: 800; color: #fff; text-align: center; font-family: var(--font-display); position: relative; z-index: 2; }
  .wplus-wrap {
    position: relative; z-index: 3; min-height: 28px;
    display: flex; align-items: center; justify-content: center; margin-top: 2px;
  }
  .wplus {
    font-size: 18px; font-weight: 800; color: var(--gold-soft);
    letter-spacing: 1px; text-shadow: 0 0 12px rgba(201,168,106,.35);
  }
  .wplus.plus-pop { animation: wplusPop .55s cubic-bezier(.2, 1.55, .35, 1); }
  @keyframes wplusPop {
    0% { transform: scale(.7); filter: brightness(1); }
    35% { transform: scale(1.55); filter: brightness(1.35); color: #fff6d8; }
    100% { transform: scale(1); filter: brightness(1); }
  }
  .wplus-float {
    position: absolute; left: 50%; top: 42%; z-index: 6; pointer-events: none;
    font-size: 28px; font-weight: 900; letter-spacing: 1px;
    color: #fff6d8; text-shadow: 0 0 16px rgba(255,220,140,.7), 0 2px 8px rgba(0,0,0,.8);
    animation: wplusFloat .85s ease-out forwards;
    font-family: var(--font-display);
  }
  .wplus-float.is-max {
    font-size: 32px; color: #ffe9a8;
    text-shadow: 0 0 22px rgba(255,200,80,.85), 0 2px 10px rgba(0,0,0,.85);
  }
  @keyframes wplusFloat {
    0% { opacity: 0; transform: translate(-50%, 8px) scale(.6); }
    18% { opacity: 1; transform: translate(-50%, -6px) scale(1.15); }
    100% { opacity: 0; transform: translate(-50%, -64px) scale(1); }
  }
  .safezone { font-size: 11px; color: var(--green); margin-top: 3px; opacity: .85; }
  .weapon-wrap { position: relative; margin: 16px 0; width: 150px; height: 150px; display:flex; align-items:center; justify-content:center; z-index: 2; }
  .weapon { position: relative; z-index: 2; transition: transform .2s; }
  .weapon img#stgImg { width: 118px; height: 118px; object-fit: contain; image-rendering: auto; }
  .weapon .broken-crystal {
    width: 96px; height: 96px; object-fit: contain; image-rendering: auto;
    filter: drop-shadow(0 0 14px var(--crystal-glow, #5fb8ff)) drop-shadow(0 0 28px color-mix(in srgb, var(--crystal-glow, #5fb8ff) 45%, transparent));
  }
  .weapon.is-broken .broken-crystal { animation: crystalPop .58s cubic-bezier(.18, 1.35, .32, 1) forwards; }
  .stage.fail .weapon img#stgImg { animation: crash .55s ease forwards; }
  @keyframes crystalPop {
    0% { transform: scale(0) rotate(-24deg); opacity: 0; }
    45% { transform: scale(1.22) rotate(6deg); opacity: 1; }
    100% { transform: scale(1) rotate(0); opacity: 1; }
  }
  .aura { position: absolute; inset: -30px; border-radius: 50%; z-index: 1; pointer-events: none; opacity: 0; background: radial-gradient(circle, var(--glow, #d9b24a) 0%, transparent 65%); transition: opacity .4s; }
  .stage.charging .weapon { animation: shake .35s linear infinite; filter: brightness(1.15) drop-shadow(0 0 12px rgba(255, 220, 140, .5)); }
  @keyframes shake { 0%,100%{transform:translate(0,0) rotate(0)} 25%{transform:translate(-3px,1px) rotate(-2deg)} 75%{transform:translate(3px,-1px) rotate(2deg)} }
  .stage.success .weapon { animation: pop .5s cubic-bezier(.2,1.6,.4,1); }
  @keyframes pop { 0%{transform:scale(1)} 40%{transform:scale(1.32)} 100%{transform:scale(1)} }
  .stage.fail .weapon:not(.is-broken) { animation: crash .55s ease forwards; }
  @keyframes crash { 0%{transform:scale(1) rotate(0); opacity:1} 60%{transform:scale(.6) rotate(20deg); opacity:.3} 100%{transform:scale(.15) rotate(60deg); opacity:0} }
  .stage.shake { animation: bigshake .4s ease; }
  @keyframes bigshake { 0%,100%{transform:translate(0,0)} 20%{transform:translate(-8px,4px)} 40%{transform:translate(8px,-4px)} 60%{transform:translate(-6px,2px)} 80%{transform:translate(6px,-2px)} }

  .verdict { min-height: 26px; font-weight: 800; font-size: 18px; text-align:center; letter-spacing:.5px; margin-top: 4px; }
  .verdict.good { color: var(--green); text-shadow: 0 0 14px rgba(88,217,119,.5); }
  .verdict.bad { color: var(--red); text-shadow: 0 0 14px rgba(255,90,90,.4); }
  .verdict.neutral { color: var(--gold-soft); }
  .statsbox { display:flex; gap: 10px; justify-content:center; flex-wrap:wrap; margin-top: 10px; }
  .pill { background: rgba(255,255,255,.04); border:1px solid var(--edge); border-radius: 10px; padding: 8px 14px; text-align:center; min-width: 88px; }
  .pill .v { font-weight: 800; color:#fff; font-size: 15px;}
  .pill .k { font-size: 10px; color: var(--txt-dim); text-transform: uppercase; letter-spacing: 1px; }

  .control { padding: 22px; display: flex; flex-direction: column; gap: 13px; border-left: 1px solid var(--edge); }
  @media (max-width:760px){ .control{ border-left:none; border-top:1px solid var(--edge);} }
  .atk { display:flex; gap: 10px; }
  .atk .box { flex:1; background: var(--panel2); border:1px solid var(--edge); border-radius: 12px; padding: 12px; text-align:center;}
  .atk .box .num { font-size: 22px; font-weight: 800; color: var(--gold-soft);}
  .atk .box .num small { font-size: 12px; color: var(--green); }
  .atk .box .cap { font-size: 11px; color: var(--txt-dim); text-transform: uppercase; letter-spacing:1px;}
  .scrolls { display:flex; flex-direction:column; gap: 8px; }
  .scroll-opt { display:flex; align-items:center; gap: 12px; cursor:var(--cursor-l2); background: var(--panel2); border:1px solid var(--edge); border-radius: 12px; padding: 11px 12px; transition:.15s; }
  .scroll-opt:hover { border-color: var(--gold); }
  .scroll-opt.sel { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; background: rgba(217,178,74,.08); }
  .scroll-opt .si { width: 48px; height: 48px; flex-shrink: 0; display:flex; align-items:center; justify-content:center; }
  .scroll-opt .si img { width: 44px; height: 44px; object-fit: contain; image-rendering: auto; }
  .scroll-tier-1 .si img { filter: saturate(0.88) brightness(0.94); }
  .scroll-tier-2 .si img { filter: saturate(1.12) brightness(1.06) drop-shadow(0 0 5px rgba(255, 196, 80, .55)); }
  .scroll-tier-3 .si img { filter: saturate(1.2) brightness(1.04) drop-shadow(0 0 7px rgba(235, 50, 80, .6)); }
  .scroll-tier-4 .si img { filter: saturate(1.15) brightness(1.12) drop-shadow(0 0 6px rgba(120, 210, 255, .65)) drop-shadow(0 0 12px rgba(255, 220, 140, .35)); }
  .scroll-tier-2.sel { box-shadow: 0 0 0 1px var(--gold) inset, 0 0 14px rgba(255, 196, 80, .14); }
  .scroll-tier-3.sel { box-shadow: 0 0 0 1px rgba(220, 70, 90, .65) inset, 0 0 16px rgba(220, 50, 80, .18); }
  .scroll-tier-4.sel { box-shadow: 0 0 0 1px var(--gold) inset, 0 0 20px rgba(140, 210, 255, .22); }
  .scroll-opt .sm { flex:1; }
  .scroll-opt .st { font-weight:700; font-size: 14px; }
  .scroll-opt .sd { font-size: 11px; color: var(--txt-dim); }
  .scroll-opt .sc { font-size: 12px; color: var(--gold); font-weight:700; text-align:right; }
  .scroll-opt .sc small { display:block; color: var(--txt-dim); font-weight:400; }
  .odds { text-align:center; font-size: 13px; color: var(--txt-dim); }
  .odds b { color: var(--gold-soft); }
  .actions { display:flex; gap: 10px; }
  .btn { flex:1; border:none; border-radius: 12px; padding: 14px; font-family: var(--font-ui); font-weight: 600; font-size: 15px; cursor:var(--cursor-l2); transition:.15s; letter-spacing:0.02em; }
  .btn:disabled { opacity:.4; cursor:var(--cursor-l2); }
  .btn-primary { background: linear-gradient(180deg, var(--gold-soft), var(--gold)); color:#23190a; box-shadow: 0 8px 22px rgba(217,178,74,.3);}
  .btn-primary:hover:not(:disabled){ filter:brightness(1.08); transform: translateY(-1px);}
  .btn-ghost { background: var(--panel2); color: var(--txt); border:1px solid var(--edge); }
  .btn-ghost:hover { border-color: var(--gold); color: var(--gold-soft); }
  .btn-sell { width:100%; background: linear-gradient(180deg,#2a6b3e,#1d4f2d); color:#dffbe6; border:1px solid #3a8a52; }
  .btn-sell:hover:not(:disabled){ filter:brightness(1.1); border-color:#58d977; }
  .hint { text-align:center; font-size: 11px; color: var(--txt-dim); }
  .particle { position:absolute; z-index:3; pointer-events:none; border-radius:50%; }
  .particle.spark { box-shadow: 0 0 6px currentColor; }
  .particle.star {
    border-radius: 0;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    box-shadow: 0 0 8px rgba(255, 210, 90, .85);
  }
  .particle.streak {
    border-radius: 2px;
    transform-origin: center center;
    box-shadow: 0 0 4px currentColor;
  }
  .ench-ring {
    position: absolute; pointer-events: none; z-index: 4;
    border: 1.5px solid rgba(255, 200, 80, .55);
    border-radius: 50%;
    box-shadow: 0 0 12px rgba(255, 190, 70, .35), inset 0 0 8px rgba(255, 220, 120, .15);
    transform: translate(-50%, -50%);
    animation: enchRingExpand .75s ease-out forwards;
  }
  @keyframes enchRingExpand {
    0% { width: 16px; height: 16px; opacity: .75; filter: brightness(1.1); }
    100% { width: 200px; height: 200px; opacity: 0; filter: brightness(.9); }
  }
  .toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--panel2); border:1px solid var(--gold); color: var(--gold-soft); padding: 10px 18px; border-radius: 12px; font-size: 13px; opacity:0; transition:.3s; z-index: 50; }
  .toast.show { opacity:1; }

  .modal-backdrop { position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center; padding:24px; overflow-y:auto; scrollbar-width:none; -ms-overflow-style:none; background:rgba(0,0,0,.78); animation:modalIn .18s ease; }
  .modal-backdrop::-webkit-scrollbar { display:none; width:0; height:0; }
  .modal-backdrop[hidden] { display:none; }
  @keyframes modalIn { from { opacity:0; } to { opacity:1; } }
  .modal-box { width:min(440px,100%); max-height:none; overflow:visible; flex-shrink:0; background:linear-gradient(180deg,#2e2418,#161008); border:2px solid var(--edge2); border-radius:12px; box-shadow:0 24px 64px rgba(0,0,0,.7), inset 0 0 0 1px #140d07; animation:modalBoxIn .22s cubic-bezier(.2,1.2,.4,1); }
  @keyframes modalBoxIn { from { opacity:0; transform:translateY(12px) scale(.97); } to { opacity:1; transform:none; } }
  .modal-head { padding:16px 20px 12px; border-bottom:1px solid var(--edge); font-family: var(--font-display); font-size:18px; font-weight:700; color:var(--gold-soft); }
  .modal-body { padding:18px 20px; font-size:14px; line-height:1.55; color:var(--txt); overflow: visible; }
  .modal-body p { margin:0 0 10px; }
  .modal-body p:last-child { margin-bottom:0; }
  .modal-actions { display:flex; gap:10px; padding:14px 20px 18px; border-top:1px solid var(--edge); background:rgba(0,0,0,.22); }
  .modal-actions .btn { flex:1; padding:11px 14px; font-size:14px; border-radius:10px; }
  .btn-danger { background:linear-gradient(180deg,#9a3838,#5c1f1f); color:#ffe8e8; border:1px solid #b04848; box-shadow:0 6px 18px rgba(160,50,50,.25); }
  .btn-danger:hover:not(:disabled) { filter:brightness(1.1); transform:translateY(-1px); }
  .modal-cryst { display:flex; gap:16px; align-items:flex-start; }
  .modal-cryst-wpn { width:64px; height:64px; flex-shrink:0; object-fit:contain; image-rendering:auto; background:linear-gradient(160deg,#0f0a06,#1d140b); border:1px solid #3a2c1a; border-radius:6px; padding:4px; }
  .modal-cryst-info { flex:1; min-width:0; }
  .modal-cryst-name { font-size:16px; font-weight:800; margin-bottom:6px; font-family: var(--font-display); }
  .modal-cryst-warn { color:var(--red); font-size:13px; margin-bottom:10px; }
  .modal-cryst-reward { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:700; color:var(--gold-soft); }
  .modal-cryst-reward img { width:22px; height:22px; image-rendering:pixelated; image-rendering:crisp-edges; }
  .modal-funpay p { margin:0 0 10px; line-height:1.5; }

  .story-backdrop {
    position: fixed; inset: 0; z-index: 125;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 24px 24px 96px;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(40, 28, 14, .92), rgba(0, 0, 0, .88));
    animation: modalIn .22s ease;
  }
  .story-backdrop::-webkit-scrollbar { display: none; width: 0; height: 0; }
  .story-backdrop[hidden] { display: none; }
  .story-box {
    width: min(480px, 100%); max-height: none;
    display: flex; flex-direction: column;
    flex-shrink: 0;
    overflow: visible;
    background: linear-gradient(180deg, #2e2418 0%, #1a1209 55%, #120c06 100%);
    border: 2px solid var(--edge2); border-radius: 14px;
    box-shadow: 0 28px 72px rgba(0, 0, 0, .75), inset 0 0 0 1px #140d07, 0 0 48px rgba(201, 168, 106, .08);
    animation: modalBoxIn .28s cubic-bezier(.2, 1.15, .35, 1);
    padding: 22px 22px 18px;
  }
  .story-actions {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1;
    display: flex; justify-content: center;
    padding: 14px 20px max(14px, env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .55) 28%, rgba(8, 5, 2, .92));
    border-top: 1px solid rgba(201, 168, 106, .22);
    pointer-events: none;
  }
  .story-actions .story-ok { pointer-events: auto; max-width: min(480px, 100%); }
  .story-ornament {
    text-align: center; font-size: 10px; color: rgba(201, 168, 106, .45);
    margin-bottom: 4px; letter-spacing: .3em;
  }
  .story-title {
    font-family: var(--font-display); font-size: 26px; font-weight: 700;
    text-align: center; color: var(--gold-soft);
    text-shadow: 0 0 18px rgba(255, 196, 107, .25);
    margin: 0 0 4px;
  }
  .story-eyebrow {
    text-align: center; font-size: 11px; letter-spacing: .22em;
    text-transform: uppercase; color: var(--txt-dim); margin: 0 0 16px;
  }
  .story-body {
    flex: 0 1 auto; min-height: 0; overflow: visible;
    font-size: 14px; line-height: 1.58; color: var(--txt);
    padding-right: 0; margin-bottom: 16px;
  }
  .story-body p { margin: 0 0 12px; }
  .story-body p:last-child { margin-bottom: 0; }
  .story-body b { color: var(--gold-soft); font-weight: 700; }
  .story-meta {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    margin-bottom: 8px; min-height: 36px;
  }
  .story-meta-icon {
    width: 48px; height: 48px; object-fit: contain; border-radius: 8px;
    border: 1px solid rgba(201,168,106,.35); background: rgba(0,0,0,.25);
    image-rendering: auto;
  }
  .story-chapter {
    font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
    color: var(--gold); padding: 4px 10px; border-radius: 999px;
    border: 1px solid rgba(201,168,106,.35); background: rgba(201,168,106,.08);
  }
  .story-lead {
    text-align: center; font-size: 14px; font-style: italic; line-height: 1.45;
    color: var(--gold-soft); margin: 0 0 10px; padding: 0 6px;
  }
  .story-quest-ref {
    text-align: center; font-size: 11px; line-height: 1.4; color: var(--txt-dim);
    margin: 0 0 12px; padding: 8px 10px; border-radius: 8px;
    background: rgba(0,0,0,.22); border: 1px solid rgba(201,168,106,.15);
  }
  .story-quest-label {
    display: block; font-size: 9px; letter-spacing: .16em; text-transform: uppercase;
    color: var(--gold); margin-bottom: 3px;
  }
  .story-epigraph {
    font-size: 13px; line-height: 1.5; color: var(--txt-dim);
    padding: 10px 12px; margin-bottom: 14px !important;
    border-left: 3px solid rgba(201,168,106,.45);
    background: rgba(0,0,0,.18); border-radius: 0 8px 8px 0;
  }
  .story-mechanic {
    margin-top: 14px; padding: 10px 12px; border-radius: 10px;
    background: linear-gradient(135deg, rgba(201,168,106,.12), rgba(0,0,0,.2));
    border: 1px solid rgba(201,168,106,.28);
  }
  .story-mechanic-k {
    display: block; font-size: 9px; letter-spacing: .18em; text-transform: uppercase;
    color: var(--gold); margin-bottom: 6px;
  }
  .story-mechanic p { margin: 0; font-size: 13px; line-height: 1.45; }
  .story-arc-hd { margin: 4px 0 8px; font-size: 13px; }
  .story-arc-hd a { color: var(--gold-soft); }
  .story-finale { margin-top: 12px; font-size: 13px; color: var(--txt-dim); }
  .story-arc-list { list-style: none; margin: 8px 0 12px; padding: 0; }
  .story-arc-list li {
    padding: 9px 10px; margin-bottom: 6px; border-radius: 8px;
    border: 1px solid rgba(201,168,106,.12); font-size: 12px; line-height: 1.35;
    background: rgba(0,0,0,.15);
  }
  .story-arc-list li.story-arc-item { cursor: pointer; }
  .story-arc-list li.story-arc-item:hover { border-color: rgba(201,168,106,.45); background: rgba(201,168,106,.06); }
  .story-arc-item-main { display: block; }
  .story-arc-item-st { float: right; margin-left: 8px; font-weight: 700; }
  .story-arc-quest { display: block; margin-top: 3px; color: var(--gold-soft); font-size: 11px; }
  .story-arc-list li small { display: block; margin-top: 3px; color: var(--txt-dim); }
  .story-arc-list li.done { border-color: rgba(120,200,120,.25); }
  .story-arc-list li.open { border-color: rgba(201,168,106,.35); }
  .story-arc-list li.locked { opacity: .72; }
  .story-race-beat {
    margin-top: 10px; padding: 10px 12px; border-radius: 8px;
    border-left: 3px solid var(--gold);
    background: rgba(201,168,106,.08);
    font-size: 12px; line-height: 1.45; color: var(--txt);
  }
  .story-race-beat b { color: var(--gold-soft); }
  .story-ok {
    width: 100%; padding: 13px 16px; font-size: 15px; border-radius: 10px;
    transition: opacity .2s ease, filter .2s ease;
  }
  .story-ok--locked {
    opacity: .42; filter: saturate(.65);
    cursor: not-allowed; pointer-events: none;
  }
  .modal-funpay-risk { color:var(--red); font-weight:700; }

  .ach-modal-backdrop {
    position: fixed; inset: 0; z-index: 130;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 24px 24px 96px;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    background: rgba(0,0,0,.82); animation: modalIn .2s ease;
  }
  .ach-modal-backdrop::-webkit-scrollbar { display: none; width: 0; height: 0; }
  .ach-modal-backdrop[hidden] { display: none; }
  body.game-paused .app,
  body.game-paused .game-log,
  body.game-paused .shell > aside.dev-panel { pointer-events: none; user-select: none; }
  .ach-modal-box {
    position: relative; width: min(420px, 100%); text-align: center;
    flex-shrink: 0;
    padding: 28px 26px 22px; overflow: hidden;
    background: linear-gradient(180deg, #3a2e1c 0%, #1a1208 55%, #100a04 100%);
    border: 2px solid #c9a86a; border-radius: 16px;
    box-shadow: 0 0 48px rgba(201,168,106,.35), 0 24px 64px rgba(0,0,0,.75), inset 0 0 0 1px rgba(255,230,180,.08);
    animation: achModalIn .35s cubic-bezier(.2,1.15,.35,1);
  }
  @keyframes achModalIn {
    from { opacity: 0; transform: translateY(18px) scale(.94); }
    to { opacity: 1; transform: none; }
  }
  .ach-modal-rays {
    position: absolute; inset: 0; pointer-events: none; z-index: 0;
    border-radius: inherit;
    background: radial-gradient(ellipse 90% 65% at 50% 18%, rgba(255,196,80,.16), transparent 68%);
    animation: achGlowPulse 2.8s ease-in-out infinite alternate;
  }
  @keyframes achGlowPulse {
    from { opacity: .55; }
    to { opacity: 1; }
  }
  .ach-modal-badge { font-size: 36px; line-height: 1; margin-bottom: 8px; position: relative; }
  .ach-modal-ico {
    width: 72px; height: 72px; object-fit: contain; margin: 0 auto 14px; display: block; position: relative;
    background: linear-gradient(160deg,#0f0a06,#1d140b); border: 2px solid #5a4528; border-radius: 10px; padding: 6px;
    box-shadow: 0 8px 20px rgba(0,0,0,.55), 0 0 20px rgba(201,168,106,.25);
  }
  .ach-modal-kicker {
    font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--gold); margin-bottom: 6px; position: relative;
  }
  .ach-modal-title {
    font-family: var(--font-display); font-size: 22px; font-weight: 800; color: #fff;
    margin: 0 0 10px; line-height: 1.25; position: relative;
  }
  .ach-modal-desc { font-size: 14px; line-height: 1.45; color: var(--txt-dim); margin: 0 0 14px; position: relative; }
  .ach-modal-reward {
    font-size: 14px; font-weight: 700; color: var(--gold-soft); margin-bottom: 16px; position: relative;
    padding: 10px 14px; border-radius: 10px; background: rgba(0,0,0,.28); border: 1px solid var(--edge2);
  }
  .ach-modal-reward:empty { display: none; }
  .ach-modal-queue { font-size: 12px; color: var(--txt-dim); margin-bottom: 10px; position: relative; }
  .ach-modal-actions {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1;
    display: flex; justify-content: center;
    padding: 14px 20px max(14px, env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .55) 28%, rgba(8, 5, 2, .92));
    border-top: 1px solid rgba(201, 168, 106, .22);
    pointer-events: none;
  }
  .ach-modal-actions .ach-modal-btn {
    width: min(420px, 100%); padding: 12px 16px; font-size: 15px; position: relative;
    pointer-events: auto;
    transition: opacity .2s ease, filter .2s ease;
  }
  .ach-modal-btn--locked {
    opacity: .42; filter: saturate(.65);
    cursor: not-allowed; pointer-events: none;
  }
  .ach-modal-box.secret .ach-modal-kicker { color: #c9a0ff; }
  .ach-modal-box.secret { border-color: #9b6fd4; box-shadow: 0 0 48px rgba(155,111,212,.3), 0 24px 64px rgba(0,0,0,.75); }

  .ach-reward-backdrop {
    position: fixed; inset: 0; z-index: 140;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 20px 20px 96px;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    background: rgba(0,0,0,.88); animation: modalIn .2s ease;
  }
  .ach-reward-backdrop::-webkit-scrollbar { display: none; width: 0; height: 0; }
  .ach-reward-backdrop[hidden] { display: none; }
  .ach-reward-box {
    width: min(520px, 100%); max-height: none;
    flex-shrink: 0;
    display: flex; flex-direction: column; gap: 14px;
    overflow: visible;
    padding: 20px 20px 16px;
    background: linear-gradient(180deg, #2e2418, #120c06);
    border: 2px solid #9b6fd4; border-radius: 14px;
    box-shadow: 0 0 40px rgba(155,111,212,.35), 0 24px 64px rgba(0,0,0,.8);
    animation: achModalIn .3s cubic-bezier(.2,1.1,.35,1);
  }
  .ach-reward-head { text-align: center; }
  .ach-reward-kicker { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #c9a0ff; margin-bottom: 6px; }
  .ach-reward-title { margin: 0 0 6px; font-family: var(--font-display); font-size: 20px; color: #fff; }
  .ach-reward-desc { margin: 0; font-size: 13px; color: var(--txt-dim); line-height: 1.4; }
  .ach-reward-frame {
    flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center;
    border-radius: 10px; overflow: hidden; background: #000;
    border: 1px solid rgba(155,111,212,.45);
    box-shadow: inset 0 0 24px rgba(0,0,0,.65);
  }
  .ach-reward-img {
    width: 100%; max-height: min(52vh, 560px); object-fit: contain; display: block;
  }
  .ach-reward-actions {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1;
    display: flex; justify-content: center;
    padding: 14px 20px max(14px, env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .55) 28%, rgba(8, 5, 2, .92));
    border-top: 1px solid rgba(155, 111, 212, .28);
    pointer-events: none;
  }
  .ach-reward-actions .ach-reward-btn {
    width: min(520px, 100%); padding: 12px 16px; font-size: 15px;
    pointer-events: auto;
    transition: opacity .2s ease, filter .2s ease;
  }
  .ach-reward-btn--locked {
    opacity: .42; filter: saturate(.65);
    cursor: not-allowed; pointer-events: none;
  }

  .corner-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
  }
  .corner-fab {
    padding: 7px 11px; font-size: 11px; font-weight: 700; letter-spacing: .02em;
    border-radius: 8px; border: 1px solid var(--edge2);
    background: linear-gradient(180deg, #2a2014, #161008);
    color: var(--gold-soft); cursor: var(--cursor-l2); opacity: .88;
    box-shadow: 0 4px 14px rgba(0,0,0,.45);
    transition: .15s;
  }
  .corner-fab:hover, .corner-fab[aria-expanded="true"] {
    opacity: 1; border-color: var(--gold); filter: brightness(1.08);
  }
  #patchFab { color: #d4c4a8; font-variant-numeric: tabular-nums; }
  .corner-panel {
    background: linear-gradient(180deg, #2e2418, #161008);
    border: 2px solid var(--edge2); border-radius: 12px;
    box-shadow: 0 12px 36px rgba(0,0,0,.65), inset 0 0 0 1px #140d07;
    animation: cornerPanelIn .18s ease;
  }
  .corner-panel[hidden] { display: none; }
  @keyframes cornerPanelIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
  }
  .corner-panel-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 10px 12px; border-bottom: 1px solid var(--edge);
    font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--gold-soft);
  }
  .corner-panel-close {
    width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--edge);
    background: transparent; color: var(--txt-dim); font-size: 18px; line-height: 1; cursor: var(--cursor-l2);
  }
  .corner-panel-close:hover { border-color: var(--gold); color: var(--gold-soft); }
  .corner-panel-body {
    padding: 12px 14px 14px; font-size: 12px; line-height: 1.5; color: var(--txt);
  }
  .corner-panel-body p { margin: 0 0 10px; }
  .corner-panel-body p:last-child { margin-bottom: 0; }
  .corner-panel-body a {
    color: var(--gold-soft); text-decoration: underline; text-underline-offset: 2px;
  }
  .corner-panel-body a:hover { color: #fff; }
  .patch-body ul { margin: 0 0 4px; padding: 0 0 0 16px; }
  .patch-body li { margin: 0 0 6px; }
  .patch-body li:last-child { margin-bottom: 0; }
  .patch-body b { color: var(--gold-soft); font-weight: 700; }
  .patch-body .patch-ver {
    margin: 0 0 6px; font-family: var(--font-display); font-size: 13px; font-weight: 700; color: var(--gold-soft);
  }
  .patch-body .patch-ver:not(:first-child) {
    margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--edge);
  }
  .patch-body { max-height: min(62vh, 440px); overflow-y: auto; padding-right: 4px; }
  .author-feedback { color: var(--txt-dim); font-size: 11px; }
  .author-ver { font-size: 10px; color: var(--txt-dim); text-align: right; margin-top: 8px !important; }

  .acc-panel {
    padding: 24px 20px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-width: 420px;
    margin: 0 auto;
  }
  .acc-stage {
    position: relative;
    width: 140px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .acc-aura {
    position: absolute;
    inset: -20px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(176,107,255,.5) 0%, rgba(176,107,255,.15) 50%, transparent 72%);
    animation: bananAura 1.1s ease-in-out infinite alternate;
  }
  .acc-img {
    position: relative;
    z-index: 1;
    width: 96px;
    height: 96px;
    object-fit: contain;
    image-rendering: pixelated;
    filter: drop-shadow(0 0 16px rgba(176,107,255,.7));
  }
  .acc-name {
    font-size: 18px;
    font-weight: 800;
    color: var(--gold-soft);
    font-family: var(--font-display);
    text-align: center;
  }
  .acc-note {
    font-size: 13px;
    color: var(--txt-dim);
    text-align: center;
    line-height: 1.45;
    max-width: 340px;
  }
  .acc-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 320px;
    margin-top: 8px;
  }
  .acc-actions .btn { width: 100%; padding: 13px; font-size: 14px; border-radius: 10px; }
  .btn-funpay {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(180deg, #3d6b28, #2a4f1c);
    color: #e8ffd8;
    border: 1px solid #5a9a3a;
    font-weight: 800;
    cursor: var(--cursor-l2);
    transition: .15s;
  }
  .btn-funpay:hover { filter: brightness(1.1); border-color: #7fcf52; }
  .funpay-ico {
    width: 22px;
    height: 22px;
    image-rendering: pixelated;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
  }
  .acc-hint {
    font-size: 11px;
    color: var(--red);
    opacity: .85;
    text-align: center;
  }

  /* Шахта Банана (мини-игра) */
  .mine-banner { display:flex; align-items:center; gap:16px; margin: 0; padding: 14px 18px; border:1px solid var(--edge); border-radius:16px;
    background: linear-gradient(100deg, rgba(120,80,30,.25), rgba(40,30,20,.15)); cursor:var(--cursor-l2); transition:.18s; }
  .mine-banner:hover { transform: translateY(-3px); border-color: var(--gold); box-shadow: 0 14px 28px rgba(0,0,0,.4); }
  .mine-banner img { width: 56px; height: 64px; object-fit: cover; object-position: top center; border-radius: 8px; border:2px solid var(--edge2); box-shadow: 0 4px 8px rgba(0,0,0,.5); image-rendering: auto; }
  .mine-banner .mb-t { font-weight:800; color: var(--gold-soft); font-size:17px; }
  .mine-banner .mb-d { font-size:12px; color: var(--txt-dim); margin-top:2px; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .mine-banner .mb-go { margin-left:auto; color: var(--gold); font-weight:700; white-space:nowrap; flex-shrink: 0; }
  .mine-banner > div:not(.mb-go) { flex: 1; min-width: 0; }

  .mine-hud { display:flex; gap:18px; align-items:center; padding: 10px 20px; border-bottom:1px solid var(--edge); flex-wrap:wrap; }
  .mine-hud .mh { font-size:12px; color:var(--txt-dim); }
  .mine-hud .mh b { color: var(--gold-soft); font-size:15px; }
  .mine-hud .mine-shot-toggle {
    margin-left: auto;
    cursor: pointer;
    border: 1px solid var(--edge2);
    background: rgba(20,16,14,.85);
    color: var(--txt-dim);
    border-radius: 10px;
    padding: 5px 12px 5px 6px;
    font: inherit;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
    min-height: 44px;
  }
  .mine-hud .mine-shot-toggle .mine-shot-ico-wrap {
    position: relative;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(0,0,0,.35);
    border: 1px solid rgba(80,70,55,.55);
  }
  .mine-hud .mine-shot-toggle .mine-shot-ico {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    image-rendering: auto;
    filter: grayscale(0.15) brightness(0.92);
  }
  .mine-hud .mine-shot-toggle .mine-shot-shine {
    display: none;
    pointer-events: none;
  }
  .mine-hud .mine-shot-toggle .mine-shot-qty {
    font-size: 14px;
    font-weight: 700;
    color: #8ec8a8;
    font-variant-numeric: tabular-nums;
    min-width: 2ch;
  }
  .mine-hud .mine-shot-toggle.off {
    opacity: 0.72;
  }
  .mine-hud .mine-shot-toggle.off .mine-shot-ico {
    filter: grayscale(0.55) brightness(0.75);
  }
  .mine-hud .mine-shot-toggle.off .mine-shot-qty { color: #a88878; }
  .mine-hud .mine-shot-toggle.empty .mine-shot-qty { color: #c07060; }
  .mine-hud .mine-shot-toggle.on {
    border-color: rgba(180, 150, 80, .55);
    box-shadow:
      0 0 0 1px rgba(201,168,106,.12),
      0 0 12px rgba(201,168,106,.18);
  }
  .mine-hud .mine-shot-toggle.on .mine-shot-ico {
    filter: none;
  }
  .mine-hud .mine-shot-toggle.on .mine-shot-ico-wrap {
    border-color: rgba(201,168,106,.45);
    box-shadow: inset 0 0 8px rgba(255,220,140,.18);
  }
  .mine-hud .mine-shot-toggle.on .mine-shot-shine {
    display: block;
    position: absolute;
    inset: -20%;
    background: linear-gradient(
      115deg,
      transparent 0%,
      transparent 38%,
      rgba(255,255,255,.08) 45%,
      rgba(255,240,180,.55) 50%,
      rgba(255,255,255,.12) 55%,
      transparent 62%,
      transparent 100%
    );
    transform: translateX(-120%) rotate(8deg);
    animation: mine-shot-glint 2.4s ease-in-out infinite;
  }
  @keyframes mine-shot-glint {
    0%, 28% { transform: translateX(-130%) rotate(8deg); opacity: 0; }
    35% { opacity: 1; }
    55% { transform: translateX(130%) rotate(8deg); opacity: 0.85; }
    62%, 100% { transform: translateX(130%) rotate(8deg); opacity: 0; }
  }
  .mine-hud .mine-shot-toggle:hover { border-color: rgba(180,140,90,.45); }
  @media (prefers-reduced-motion: reduce) {
    .mine-hud .mine-shot-toggle.on .mine-shot-shine { animation: none; opacity: 0.35; transform: none; }
  }
  .mine-session-loot {
    position: relative;
    z-index: 8;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    border-bottom: 1px solid var(--edge);
    background: rgba(0,0,0,.12);
  }
  .mine-session-loot.is-open {
    z-index: 40;
  }
  .mine-session-loot[hidden] { display: none !important; }
  .mine-loot-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 8px 16px 8px 14px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
  }
  .mine-loot-toggle:disabled {
    cursor: default;
    opacity: 0.85;
  }
  .mine-loot-toggle:not(:disabled):hover {
    background: rgba(201,168,106,.06);
  }
  .mine-loot-chevron {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--txt-dim);
    flex-shrink: 0;
    transition: transform .18s ease;
  }
  .mine-session-loot.is-open .mine-loot-chevron {
    transform: rotate(180deg);
  }
  .mine-loot-toggle:disabled .mine-loot-chevron {
    opacity: 0.35;
  }
  .mine-loot-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
  }
  .mine-loot-lbl {
    font-size: 11px;
    font-weight: 700;
    color: var(--txt-dim);
    white-space: nowrap;
  }
  .mine-loot-count {
    flex-shrink: 0;
    min-width: 1.25em;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    color: #1a120a;
    background: linear-gradient(180deg, #e7cf95, #c9a86a);
    text-align: center;
    line-height: 1.3;
  }
  .mine-loot-body {
    display: none;
    position: absolute;
    left: 8px;
    right: 8px;
    top: calc(100% - 1px);
    z-index: 41;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    max-height: min(38vh, 240px);
    overflow-y: auto;
    padding: 10px 12px;
    border: 1px solid rgba(201,168,106,.35);
    border-radius: 0 0 10px 10px;
    background: linear-gradient(180deg, rgba(28,20,12,.97), rgba(12,9,6,.98));
    box-shadow: 0 14px 28px rgba(0,0,0,.55);
    scrollbar-width: none;
  }
  .mine-loot-body::-webkit-scrollbar { display: none; width: 0; height: 0; }
  .mine-session-loot.is-open .mine-loot-body {
    display: flex;
  }
  .mine-loot-toggle.is-static {
    cursor: default;
  }
  .mine-loot-empty {
    font-size: 11px;
    color: var(--txt-dim);
    opacity: 0.75;
  }
  .mine-loot-toggle.is-static .mine-loot-empty {
    margin-left: 8px;
  }
  .mine-loot-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    padding: 3px 8px 3px 4px;
    border-radius: 6px;
    border: 1px solid #3a2c1a;
    background: linear-gradient(180deg, rgba(28,20,12,.92), rgba(14,10,7,.9));
    font-size: 11px;
    line-height: 1.2;
  }
  .mine-loot-chip img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex-shrink: 0;
    image-rendering: auto;
  }
  .mine-loot-name {
    color: var(--gold-soft);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
  }
  .mine-loot-qty {
    font-size: 10px;
    font-weight: 800;
    color: var(--txt-dim);
    margin-left: 1px;
  }
  .mine-loot-chip.g-D { border-color: rgba(95,168,255,.45); }
  .mine-loot-chip.g-C { border-color: rgba(118,196,106,.45); }
  .mine-loot-chip.g-B { border-color: rgba(176,107,255,.45); }
  .mine-loot-chip.g-A { border-color: rgba(201,168,106,.55); }
  .mine-loot-chip.g-epic { border-color: rgba(176,107,255,.55); box-shadow: 0 0 8px rgba(176,107,255,.15); }
  .minefield {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    user-select: none;
    background: #100b06;
  }
  .mine-stage {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .mine-stage-inner {
    position: relative;
    line-height: 0;
    max-width: 100%;
    max-height: 100%;
  }
  .mine-stage-inner.mine-stage-fill {
    width: 100%;
    height: 100%;
  }
  .mine-loot-layer {
    position: absolute;
    inset: 0;
    z-index: 12;
    pointer-events: none;
    overflow: visible;
  }
  .mine-bg-img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    pointer-events: none;
    user-select: none;
  }
  .mine-bg-img.mine-bg-cover {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center 35%;
    image-rendering: auto;
  }
  .mine-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(10,7,4,.35), rgba(10,7,4,.55));
    pointer-events: none;
  }
  .gnome { position:absolute; cursor:var(--cursor-l2); transform: translate(-50%,-50%) scale(0); animation: gpop .18s ease forwards; z-index:2; }
  .gnome.mine-solo {
    z-index: 4;
    animation: soloPop .32s cubic-bezier(.2,.9,.25,1) forwards;
  }
  .gnome.mine-solo .mine-solo-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 212px;
    padding: 10px 10px 12px;
    background:
      linear-gradient(180deg, rgba(22,18,16,.98) 0%, rgba(10,8,7,.99) 100%);
    border: 1px solid rgba(58,52,48,.95);
    border-radius: 4px;
    box-shadow:
      0 18px 42px rgba(0,0,0,.82),
      inset 0 1px 0 rgba(255,255,255,.04),
      inset 0 -1px 0 rgba(0,0,0,.55);
    overflow: hidden;
  }
  .gnome.mine-solo .mine-solo-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.65);
  }
  .gnome.mine-solo.golden .mine-solo-card {
    border-color: rgba(90,72,40,.85);
    box-shadow:
      0 18px 42px rgba(0,0,0,.82),
      0 0 24px rgba(80,50,12,.12),
      inset 0 1px 0 rgba(255,220,160,.05);
  }
  .gnome.mine-solo.boss .mine-solo-card {
    border-color: rgba(92,32,28,.9);
    box-shadow:
      0 20px 48px rgba(0,0,0,.85),
      0 0 28px rgba(120,20,12,.22),
      inset 0 1px 0 rgba(255,120,90,.06);
  }
  .gnome.mine-solo .mob-timer-wrap {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
    width: 100%;
    min-width: 0;
    margin-bottom: 6px;
    flex-shrink: 0;
    box-sizing: border-box;
  }
  .gnome.mine-solo .mob-timer {
    position: relative;
    display: block;
    width: 100%;
    height: 8px;
    min-height: 8px;
    border-radius: 2px;
    background: rgba(0,0,0,.72);
    border: 1px solid rgba(48,44,42,.95);
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.55);
    flex: none;
  }
  .gnome.mine-solo .mob-timer-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    display: block;
    height: auto;
    min-height: 0;
    background: linear-gradient(90deg, #1a3a48, #5a9aaa);
    box-shadow: 0 0 6px rgba(90,154,170,.35);
    transition: width .1s linear;
  }
  .gnome.mine-solo.golden .mob-timer-fill { background: linear-gradient(90deg, #4a3818, #a08040); }
  .gnome.mine-solo.boss .mob-timer-fill { background: linear-gradient(90deg, #4a1810, #c04838); }
  .gnome.mine-solo .mob-timer-label {
    display: block;
    width: 100%;
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #8a9aa4;
    text-align: center;
    letter-spacing: .04em;
    line-height: 1.1;
    white-space: nowrap;
  }
  .gnome.mine-solo.golden .mob-timer-label { color: #b8a070; }
  .gnome.mine-solo.boss .mob-timer-label { color: #c89088; }
  .gnome.mine-solo .mob-portrait-frame {
    position: relative;
    width: 100%;
    height: 168px;
    border-radius: 2px;
    overflow: hidden;
    background: #060504;
    border: 1px solid rgba(36,32,30,.95);
    box-shadow: inset 0 0 28px rgba(0,0,0,.75);
  }
  .gnome.mine-solo .mob-portrait-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, transparent 28%, transparent 72%, rgba(0,0,0,.45) 100%);
  }
  .gnome.mine-solo .mob-portrait-frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    border: none;
    border-radius: 0;
    background: #060504;
    box-shadow: none;
    pointer-events: none;
    image-rendering: auto;
  }
  .gnome.mine-solo.target-icon .mob-portrait-frame {
    height: 132px;
    background: rgba(8,6,4,.92);
  }
  .gnome.mine-solo.target-icon .mob-portrait-frame img {
    object-fit: contain;
    object-position: center;
    padding: 8px;
  }
  .gnome.mine-solo.golden .mob-portrait-frame { height: 176px; }
  .gnome.mine-solo.boss .mob-portrait-frame { height: 184px; }

  /* —— Mine mob sprites (AI, animated) —— */
  .gnome.mine-solo.mob-sprite-kind .mine-solo-unit {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 188px;
    gap: 2px;
    pointer-events: none;
  }
  .gnome.mine-solo.mob-sprite-kind.golden .mine-solo-unit { width: 204px; }
  .gnome.mine-solo.mob-sprite-kind.boss .mine-solo-unit { width: 220px; }
  .gnome.mine-solo.mob-sprite-kind .mob-timer-wrap {
    align-self: stretch;
    width: 100%;
    min-width: 100%;
    margin-bottom: 4px;
    padding: 0 4px;
    box-sizing: border-box;
  }
  .gnome.mine-solo.mob-sprite-kind .mob-timer {
    width: 100%;
    height: 8px;
    min-height: 8px;
  }
  .gnome.mine-solo.mob-sprite-kind .mob-sprite-stage {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    height: 172px;
    margin-bottom: 2px;
  }
  .gnome.mine-solo.mob-sprite-kind.golden .mob-sprite-stage { height: 188px; }
  .gnome.mine-solo.mob-sprite-kind.boss .mob-sprite-stage { height: 204px; }
  .gnome.mine-solo.mob-sprite-kind .mob-sprite-img {
    position: relative;
    z-index: 2;
    display: block;
    max-width: 168px;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: bottom center;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    pointer-events: none;
    opacity: 1;
    filter:
      contrast(1.12) brightness(1.06) saturate(1.08)
      drop-shadow(0 0 1px rgba(0,0,0,.98))
      drop-shadow(0 0 2px rgba(0,0,0,.95))
      drop-shadow(0 0 4px rgba(0,0,0,.85))
      drop-shadow(0 10px 18px rgba(0,0,0,.88));
    transform-origin: center bottom;
    animation: mobIdleBob 2.6s ease-in-out infinite;
  }
  .gnome.mine-solo.mob-sprite-kind.golden .mob-sprite-img {
    max-width: 182px;
    filter:
      contrast(1.14) brightness(1.08) saturate(1.12)
      drop-shadow(0 0 1px rgba(0,0,0,.98))
      drop-shadow(0 0 2px rgba(0,0,0,.95))
      drop-shadow(0 0 6px rgba(120,80,20,.35))
      drop-shadow(0 14px 22px rgba(0,0,0,.9));
  }
  .gnome.mine-solo.mob-sprite-kind.boss .mob-sprite-img {
    max-width: 198px;
    filter:
      contrast(1.16) brightness(1.08) saturate(1.1)
      drop-shadow(0 0 1px rgba(0,0,0,.98))
      drop-shadow(0 0 2px rgba(0,0,0,.95))
      drop-shadow(0 0 8px rgba(140,30,18,.35))
      drop-shadow(0 16px 26px rgba(0,0,0,.92));
  }
  .gnome.mine-solo.mob-sprite-kind.target-shadow .mob-sprite-img {
    filter:
      contrast(1.2) brightness(1.02) saturate(1.05)
      drop-shadow(0 0 1px rgba(0,0,0,.98))
      drop-shadow(0 0 2px rgba(80,40,120,.85))
      drop-shadow(0 0 8px rgba(120,60,180,.35))
      drop-shadow(0 10px 18px rgba(0,0,0,.88));
  }
  .gnome.mine-solo.mob-sprite-kind.target-spirit .mob-sprite-img {
    filter:
      contrast(1.14) brightness(1.1) saturate(1.05)
      drop-shadow(0 0 1px rgba(0,0,0,.98))
      drop-shadow(0 0 2px rgba(60,120,180,.8))
      drop-shadow(0 0 10px rgba(140,200,255,.28))
      drop-shadow(0 10px 18px rgba(0,0,0,.88));
  }
  .gnome.mine-solo.mob-sprite-kind .mob-sprite-shadow {
    position: absolute;
    left: 50%;
    bottom: 2px;
    z-index: 1;
    width: 58%;
    height: 12px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse, rgba(0,0,0,.62) 0%, transparent 72%);
    animation: mobShadowPulse 2.6s ease-in-out infinite;
    pointer-events: none;
  }
  .gnome.mine-solo.mob-sprite-kind .mob-sprite-glow {
    position: absolute;
    left: 50%;
    bottom: 18%;
    z-index: 0;
    width: 72%;
    height: 48%;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(90,70,50,.14) 0%, transparent 68%);
    pointer-events: none;
  }
  .gnome.mine-solo.mob-sprite-kind.target-elite .mob-sprite-glow {
    background: radial-gradient(ellipse, rgba(210,175,95,.16) 0%, transparent 68%);
  }
  .gnome.mine-solo.mob-sprite-kind.target-shadow .mob-sprite-glow {
    background: radial-gradient(ellipse, rgba(120,60,180,.22) 0%, transparent 68%);
  }
  .gnome.mine-solo.mob-sprite-kind.target-spirit .mob-sprite-glow {
    background: radial-gradient(ellipse, rgba(120,190,255,.18) 0%, transparent 68%);
  }
  .gnome.mine-solo.mob-sprite-kind.target-boss .mob-sprite-glow {
    background: radial-gradient(ellipse, rgba(180,40,28,.2) 0%, transparent 68%);
  }
  .gnome.mine-solo.mob-sprite-kind.mob-anim-float .mob-sprite-img {
    animation: mobIdleFloat 3.1s ease-in-out infinite;
  }
  .gnome.mine-solo.mob-sprite-kind.mob-anim-prowl .mob-sprite-img {
    animation: mobIdleProwl 2.3s ease-in-out infinite;
  }
  .gnome.mine-solo.mob-sprite-kind .mob-hud {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    padding: 0 6px 2px;
    pointer-events: none;
  }
  .gnome.mine-solo.mob-sprite-kind .mob-hp-wrap .mob-hp {
    width: 100%;
    position: relative;
    left: auto;
    top: auto;
    transform: none;
  }
  .gnome.mine-solo.mob-sprite-kind .mob-solo-name {
    padding: 4px 8px;
    border-radius: 3px;
    background: linear-gradient(180deg, rgba(8,6,5,.78), rgba(4,3,2,.88));
    border: 1px solid rgba(48,42,38,.75);
  }
  .gnome.mine-solo.mob-sprite-kind.golden .mob-solo-name {
    border-color: rgba(90,72,40,.65);
    background: linear-gradient(180deg, rgba(16,12,6,.82), rgba(8,6,3,.9));
  }
  .gnome.mine-solo.mob-sprite-kind.boss .mob-solo-name {
    border-color: rgba(92,32,28,.75);
    background: linear-gradient(180deg, rgba(18,8,6,.84), rgba(8,4,3,.92));
  }
  @keyframes mobIdleBob {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-6px) scale(1.018); }
  }
  @keyframes mobIdleFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-11px) scale(1.01); }
  }
  @keyframes mobIdleProwl {
    0%, 100% { transform: translateY(0) translateX(0); }
    25% { transform: translateY(-4px) translateX(3px); }
    75% { transform: translateY(-3px) translateX(-3px); }
  }
  @keyframes mobShadowPulse {
    0%, 100% { opacity: .72; transform: translateX(-50%) scale(1); }
    50% { opacity: .46; transform: translateX(-50%) scale(.86); }
  }
  .gnome.mine-solo .mob-card-foot {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    margin-top: 8px;
  }
  .gnome.mine-solo .mob-solo-name,
  .gnome.mine-solo .boss-name {
    font-size: 13px;
    font-weight: 700;
    color: #b8b0a8;
    text-align: center;
    line-height: 1.2;
    letter-spacing: .03em;
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(0,0,0,.9);
  }
  .gnome.mine-solo.golden .mob-solo-name { color: #c8b890; }
  .gnome.mine-solo.boss .mob-solo-name { color: #d8a098; }
  .gnome.mine-solo .mob-hp-wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: stretch;
  }
  .gnome.mine-solo .mob-hp {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: 100%;
    height: 7px;
    border-radius: 2px;
    background: rgba(0,0,0,.7);
    border: 1px solid rgba(40,20,20,.85);
    overflow: hidden;
    pointer-events: none;
    z-index: auto;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.6);
  }
  .gnome.mine-solo.golden .mob-hp { border-color: rgba(60,40,20,.8); }
  .gnome.mine-solo.boss .mob-hp { border-color: rgba(70,24,20,.9); }
  .gnome.mine-solo .mob-hp-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    display: block;
    height: auto;
    width: 100%;
    background: linear-gradient(90deg, #5c1010, #c02828 55%, #e84848);
    box-shadow: 0 0 6px rgba(200,40,40,.35);
    transition: width .12s ease-out;
  }
  .gnome.mine-solo.golden .mob-hp-fill {
    background: linear-gradient(90deg, #5c3010, #c86028 55%, #e89048);
    box-shadow: 0 0 6px rgba(200,100,40,.3);
  }
  .gnome.mine-solo.boss .mob-hp-fill {
    background: linear-gradient(90deg, #480808, #a82020 50%, #ff4040);
    box-shadow: 0 0 8px rgba(255,60,40,.4);
  }
  .gnome.mine-solo .mob-hp-label {
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.06em;
    color: #9a8888;
    text-align: center;
    text-shadow: none;
  }
  .gnome.mine-solo.golden .mob-hp-label { color: #a89878; }
  .gnome.mine-solo.boss .mob-hp-label { color: #b89090; }
  .gnome.mine-solo:active { transform: translate(-50%,-50%) scale(.96); }
  @keyframes soloPop {
    from { transform: translate(-50%,-50%) scale(.55); opacity: 0; }
    to { transform: translate(-50%,-50%) scale(1); opacity: 1; }
  }
  .gnome:not(.mine-solo) .mob-hp {
    position: absolute;
    left: 50%;
    top: -8px;
    width: 72px;
    height: 6px;
    transform: translateX(-50%);
    border-radius: 4px;
    background: rgba(0,0,0,.55);
    border: 1px solid rgba(255,255,255,.12);
    overflow: hidden;
    pointer-events: none;
    z-index: 3;
  }
  .gnome:not(.mine-solo).golden .mob-hp { width: 82px; border-color: rgba(255,196,80,.35); }
  .gnome .mob-hp-fill {
    display: block;
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #8b1a1a, #e85a4f);
    transition: width .12s ease-out;
  }
  .gnome.golden .mob-hp-fill { background: linear-gradient(90deg, #8a5a12, #ffc46b); }
  .gnome.mob-hit { filter: brightness(1.15); }
  .gnome.mob-hit img { border-color: #ff8a7a; }
  .gnome.mob-hit.mob-sprite-kind .mob-sprite-img {
    animation: mobHitFlash .14s ease;
    filter: brightness(1.35) drop-shadow(0 0 14px rgba(255,120,90,.55)) drop-shadow(0 12px 20px rgba(0,0,0,.88));
  }
  @keyframes mobHitFlash {
    0% { transform: translateY(-4px) scale(1.04); }
    100% { transform: translateY(0) scale(1); }
  }
  .mine-quest-hud {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 12px 8px;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(12,8,4,.72);
    border: 1px solid var(--edge2);
    font-size: 12px;
    color: var(--text-dim);
  }
  .mine-quest-npc { color: var(--gold); font-weight: 600; white-space: nowrap; }
  .mine-quest-obj { flex: 1; min-width: 0; }
  .mine-quest-bar {
    flex: 0 0 72px;
    height: 6px;
    border-radius: 4px;
    background: rgba(0,0,0,.45);
    overflow: hidden;
  }
  .mine-quest-bar i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #3a6b2a, #9be6a6);
    transition: width .2s ease;
  }
  .mine-quest-hud.mine-quest-boss {
    border-color: rgba(255,107,74,.45);
    background: rgba(28,8,4,.78);
    color: #ffb8a8;
  }
  .mine-quest-hud.mine-quest-boss .mine-quest-npc { color: #ff8a6a; }
  .gnome.boss {
    z-index: 5;
    animation: bosspop .35s ease forwards;
  }
  .gnome:not(.mine-solo).boss .mob-hp { width: 110px; border-color: rgba(255,107,74,.5); }
  .gnome.boss .mob-hp-fill { background: linear-gradient(90deg, #6b1a12, #ff6b4a); }
  .gnome.boss .boss-name {
    position: absolute;
    left: 50%;
    top: -10px;
    transform: translate(-50%, -100%);
    white-space: nowrap;
    font-size: 11px;
    font-weight: 700;
    color: #ff9a7a;
    text-shadow: 0 1px 6px rgba(0,0,0,.9);
    pointer-events: none;
  }
  .gnome.boss img {
    width: 108px;
    height: 128px;
    border-color: #ff6b4a;
    box-shadow: 0 0 28px rgba(255,107,74,.75), 0 8px 16px rgba(0,0,0,.7);
  }
  .gnome.boss.target-icon img { width: 92px; height: 92px; }
  @keyframes bosspop {
    from { transform: translate(-50%,-50%) scale(0.4); opacity: 0; }
    to { transform: translate(-50%,-50%) scale(1); opacity: 1; }
  }
  .quest-npc-greet { margin-bottom: 4px; }
  .quest-ref-line { color: var(--text-dim); font-size: 13px; }
  #screen-quests .panel-head-meta { margin-left: auto; font-size: 13px; color: var(--text-dim); }
  .quest-journal-list { padding: 14px 16px 20px; display: flex; flex-direction: column; gap: 12px; }
  .quest-journal-empty { color: var(--text-dim); padding: 24px 8px; text-align: center; }
  .qj-chapter {
    border: 1px solid var(--edge2); border-radius: 12px; background: rgba(8,6,4,.55);
    padding: 12px 14px; display: flex; flex-direction: column; gap: 10px;
  }
  .qj-chapter.current { border-color: rgba(200,168,96,.45); box-shadow: 0 0 0 1px rgba(200,168,96,.12); }
  .qj-chapter.complete { opacity: .92; }
  .qj-chapter.locked { opacity: .72; }
  .qj-chapter-head { display: flex; align-items: center; gap: 10px; }
  .qj-chapter-icon { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; border: 1px solid var(--edge2); }
  .qj-chapter-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .qj-chapter-titles b { color: var(--gold-soft); font-size: 14px; }
  .qj-chapter-titles span { color: var(--text-dim); font-size: 12px; }
  .qj-chapter-badge { font-size: 11px; color: var(--gold); white-space: nowrap; }
  .qj-steps { display: flex; flex-direction: column; gap: 6px; }
  .qj-step {
    display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 6px 8px; align-items: center;
    font-size: 13px; padding: 6px 6px; border-radius: 8px;
  }
  .qj-step.current { background: rgba(200,168,96,.08); }
  .qj-step.done { color: var(--text-dim); }
  .qj-step.done .qj-step-title { text-decoration: line-through; text-decoration-color: rgba(255,255,255,.15); }
  .qj-step-n { color: var(--gold); font-weight: 700; text-align: center; }
  .qj-boss .qj-step-n { color: #ff8a6a; }
  .qj-step-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; grid-column: 2; }
  .qj-status { font-size: 12px; color: var(--text-dim); white-space: nowrap; grid-column: 3; justify-self: end; }
  .qj-status.done { color: #7fd48a; }
  .qj-status.active { color: var(--gold-soft); }
  .qj-step-bar {
    grid-column: 2 / -1; height: 4px; border-radius: 2px; background: rgba(255,255,255,.08); overflow: hidden;
  }
  .qj-step-bar i { display: block; height: 100%; background: linear-gradient(90deg, #8a6a30, var(--gold)); border-radius: 2px; }
  .qj-step-loot {
    grid-column: 2 / -1; font-size: 11px; color: rgba(201,168,106,.78); line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .qj-step-loot.claimed { color: rgba(127,212,138,.75); }
  .quest-step-loot {
    margin-top: 8px; padding: 10px 12px; border-radius: 10px;
    background: rgba(0,0,0,.22); border: 1px solid var(--edge2);
  }
  .quest-step-loot ul { margin: 6px 0 0; padding-left: 18px; }
  .qj-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
  .qj-locked { font-size: 12px; color: var(--text-dim); }
  .chapter-reward-loot { margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: rgba(0,0,0,.25); border: 1px solid var(--edge2); }
  .chapter-reward-loot ul { margin: 6px 0 0; padding-left: 18px; }
  .story-backdrop.story-chapter-reward .story-title { color: var(--gold); }
  .story-backdrop.story-prelude-finale .story-title { color: var(--gold-soft); }
  .prelude-chaos-tease { margin-top: 10px; color: var(--text-dim); font-size: 13px; }
  .mine-skill-bar {
    position: absolute;
    z-index: 22;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    padding: 0;
    margin: 0;
    background: none;
    border: 0;
    pointer-events: none;
  }
  .mine-skill-bar[hidden] { display: none !important; }
  .mine-skill-dock {
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 5px 7px 7px;
    border-radius: 12px;
    border: 1px solid rgba(201,168,106,.38);
    background: linear-gradient(180deg, rgba(30,22,14,.94), rgba(12,9,6,.97));
    box-shadow: 0 12px 28px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05);
    user-select: none;
  }
  .mine-skill-drag {
    height: 11px;
    border-radius: 6px;
    cursor: grab;
    touch-action: none;
    background:
      linear-gradient(90deg, transparent 12%, rgba(201,168,106,.22) 12%, rgba(201,168,106,.22) 88%, transparent 88%),
      radial-gradient(circle at 30% 50%, rgba(201,168,106,.55) 1.2px, transparent 1.4px),
      radial-gradient(circle at 50% 50%, rgba(201,168,106,.55) 1.2px, transparent 1.4px),
      radial-gradient(circle at 70% 50%, rgba(201,168,106,.55) 1.2px, transparent 1.4px);
    background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
    opacity: 0.75;
  }
  .mine-skill-drag:active,
  .mine-skill-bar.is-dragging .mine-skill-drag { cursor: grabbing; opacity: 1; }
  .mine-skill-bar.is-dragging { z-index: 30; }
  .mine-skill-bar-inner {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
  }
  .mine-skill-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid rgba(110,86,48,.7);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(36,26,16,.95), rgba(14,8,4,.92));
    box-shadow: inset 0 1px 0 rgba(231,207,149,.08), 0 2px 8px rgba(0,0,0,.35);
    color: var(--txt);
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color .15s, filter .15s, transform .1s;
  }
  .mine-skill-btn:hover:not(:disabled) {
    border-color: rgba(201,168,106,.55);
    filter: brightness(1.08);
  }
  .mine-skill-btn:active:not(:disabled) { transform: scale(.96); }
  .mine-skill-btn img {
    width: 34px;
    height: 34px;
    border-radius: 6px;
    flex-shrink: 0;
    pointer-events: none;
  }
  .mine-skill-btn.on-cd { opacity: .85; }
  .mine-skill-btn.locked { opacity: .4; cursor: not-allowed; }
  .mine-skill-name { display: none !important; }
  .mine-skill-key {
    position: absolute;
    top: 2px;
    right: 2px;
    z-index: 2;
    min-width: 14px;
    padding: 0 3px;
    font-size: 9px;
    font-weight: 800;
    line-height: 1.35;
    color: #1a120a;
    text-align: center;
    border-radius: 3px;
    border: 1px solid rgba(90,70,40,.55);
    background: linear-gradient(180deg, #e7cf95, #c9a86a);
    box-shadow: 0 1px 2px rgba(0,0,0,.45);
  }
  .mine-skill-cd {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 800;
    color: #ffd0c0;
    background: rgba(0,0,0,.5);
    text-shadow: 0 1px 3px rgba(0,0,0,.9);
  }
  .gnome.mob-shielded .mine-solo-card::before {
    content: "🛡";
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 14px;
    z-index: 3;
    opacity: .85;
  }
  .gnome.mob-enraged .mine-solo-card {
    box-shadow:
      0 18px 42px rgba(0,0,0,.82),
      0 0 22px rgba(140,28,20,.35),
      inset 0 0 16px rgba(80,12,8,.2);
    animation: mobEnragePulse 1.2s ease-in-out infinite;
  }
  .gnome.mob-enraged .mob-timer-fill {
    background: linear-gradient(90deg, #5a1008, #ff4028) !important;
    box-shadow: 0 0 12px rgba(255,64,40,.55);
  }
  .gnome.mob-enraged .mob-timer-label {
    color: #ff7a60 !important;
    font-weight: 800;
  }
  @keyframes mobEnragePulse {
    0%, 100% { border-color: rgba(92,32,28,.75); }
    50% { border-color: rgba(140,48,38,.95); }
  }
  .gnome.mob-urgent .mob-timer-fill {
    background: linear-gradient(90deg, #6a1810, #ff5030) !important;
    box-shadow: 0 0 10px rgba(255,80,48,.45);
  }
  .avatar-skills-panel { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--edge2); }
  .avatar-skills-title { font-size: 14px; color: var(--gold-soft); margin-bottom: 4px; }
  .avatar-skills-hint { font-size: 12px; color: var(--text-dim); margin-bottom: 10px; }
  .avatar-skill-row {
    display: flex; gap: 10px; align-items: flex-start; padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,.06);
  }
  .avatar-skill-row img { width: 32px; height: 32px; border-radius: 6px; }
  .avatar-skill-row.locked { opacity: .55; }
  .avatar-skill-row p { font-size: 12px; color: var(--text-dim); margin: 2px 0 0; }
  .story-backdrop.story-quest .story-title { color: var(--gold); }
  .gnome img { width: 80px; height: 96px; object-fit: cover; object-position: top center; pointer-events:none; border-radius: 10px; border:2px solid var(--edge2); background:#0f0a06; box-shadow: 0 6px 12px rgba(0,0,0,.6); image-rendering: auto; }
  .gnome:not(.target-icon) img { object-fit: contain; object-position: center bottom; background: rgba(6,4,2,.92); }
  .gnome.target-icon img { width: 72px; height: 72px; object-fit: contain; object-position: center; border-radius: 12px; background: rgba(8,6,4,.85); padding: 4px; }
  .gnome:not(.mine-solo).target-shadow img { filter: brightness(0.72) contrast(1.15) saturate(0.85); box-shadow: 0 0 14px rgba(120,60,180,.45), 0 6px 12px rgba(0,0,0,.6); }
  .gnome:not(.mine-solo).target-spirit img { filter: brightness(1.08) saturate(0.75) hue-rotate(18deg); box-shadow: 0 0 16px rgba(140,200,255,.35), 0 6px 12px rgba(0,0,0,.6); }
  .gnome.target-elite img { border-color: #e7cf95; }
  .gnome.golden img { width: 90px; height: 108px; border-color:#e7cf95; box-shadow: 0 0 22px rgba(255,196,80,.9), 0 6px 12px rgba(0,0,0,.6); }
  .gnome.golden.target-icon img { width: 80px; height: 80px; }
  .gnome.banan { z-index: 6; }
  .gnome.banan .banan-aura {
    position: absolute; left: 50%; top: 50%; width: 160px; height: 160px;
    transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, rgba(176,107,255,.65) 0%, rgba(140,60,220,.35) 38%, rgba(176,107,255,.12) 58%, transparent 72%);
    animation: bananAura 1.1s ease-in-out infinite alternate;
  }
  .gnome.banan .banan-timer {
    position: absolute; left: 50%; top: 50%; width: 130px; height: 130px;
    transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
    border: 3px solid rgba(176,107,255,.55);
    animation: bananTimer 9s linear forwards;
  }
  @keyframes bananAura { from { opacity: .75; transform: translate(-50%,-50%) scale(.95); } to { opacity: 1; transform: translate(-50%,-50%) scale(1.08); } }
  @keyframes bananTimer { from { clip-path: inset(0 0 0 0 round 50%); opacity: .9; } to { clip-path: inset(100% 0 0 0 round 50%); opacity: .35; } }
  .gnome.banan img {
    position: relative; z-index: 1;
    width: 96px; height: 112px; object-fit: cover; object-position: center top;
    border-color: #b06bff; border-width: 3px;
    box-shadow: 0 0 20px rgba(176,107,255,.85), 0 6px 14px rgba(0,0,0,.65);
  }
  .gnome.banan .banan-hits {
    position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%);
    z-index: 2; font-size: 12px; font-weight: 800; color: #f0e0ff;
    text-shadow: 0 0 10px #b06bff, 0 1px 3px #000; white-space: nowrap;
    background: rgba(20,10,30,.75); border: 1px solid rgba(176,107,255,.5);
    border-radius: 6px; padding: 2px 8px;
  }
  .gnome.banan.banan-tap { transform: translate(-50%,-50%) scale(0.9); }
  .gnome.leaving { animation: gout .2s ease forwards; }
  .gnome.caught { animation: gcaught .22s ease forwards; pointer-events: none; }
  .gnome:active { transform: translate(-50%,-50%) scale(.9); }
  .loot-drop {
    position: absolute; z-index: 5; pointer-events: none; transform: translate(-50%, -50%);
    image-rendering: auto;
  }
  .loot-drop.loot-coin { width: 26px; height: 26px; filter: drop-shadow(0 0 4px rgba(255,196,80,.45)) drop-shadow(0 2px 4px rgba(0,0,0,.65)); }
  .loot-drop.loot-coin.golden { width: 30px; height: 30px; filter: drop-shadow(0 0 8px rgba(255,196,80,.85)) drop-shadow(0 2px 5px rgba(0,0,0,.65)); }
  .loot-drop.loot-weapon {
    width: 52px; height: 52px; object-fit: contain;
    border-radius: 6px; border: 2px solid var(--edge2); background: rgba(8,6,4,.85);
    box-shadow: 0 4px 14px rgba(0,0,0,.7);
  }
  .loot-drop.loot-weapon.g-D { border-color: #5fb8ff; box-shadow: 0 0 12px rgba(95,184,255,.55), 0 4px 14px rgba(0,0,0,.7); }
  .loot-drop.loot-weapon.g-C { border-color: #5fcf6b; box-shadow: 0 0 12px rgba(95,207,107,.55), 0 4px 14px rgba(0,0,0,.7); }
  .loot-drop.loot-weapon.g-B { border-color: #ff3b3b; box-shadow: 0 0 12px rgba(255,59,59,.5), 0 4px 14px rgba(0,0,0,.7); }
  .loot-drop.loot-weapon.g-A { border-color: #f6b8d6; box-shadow: 0 0 14px rgba(246,184,214,.55), 0 4px 14px rgba(0,0,0,.7); }
  @keyframes gpop { from{transform:translate(-50%,-50%) scale(0) rotate(-12deg);} to{transform:translate(-50%,-50%) scale(1) rotate(0);} }
  @keyframes gout { from{transform:translate(-50%,-50%) scale(1); opacity:1;} to{transform:translate(-50%,-30%) scale(.4); opacity:0;} }
  @keyframes gcaught { from{transform:translate(-50%,-50%) scale(1); opacity:1;} to{transform:translate(-50%,-58%) scale(.72); opacity:0;} }
  .floattxt { position:absolute; z-index:6; pointer-events:none; font-weight:800; font-size:15px; text-shadow:0 2px 6px rgba(0,0,0,.8); animation: ftup .9s ease forwards; transform: translate(-50%, 0); white-space: nowrap; }
  .floattxt.floattxt-adena {
    z-index: 7;
    font-size: 17px;
    color: #ffe08a;
    letter-spacing: 0.02em;
    text-shadow: 0 0 10px rgba(255,196,80,.5), 0 2px 8px rgba(0,0,0,.9);
  }
  @keyframes ftup { from{transform:translate(-50%,0); opacity:1;} to{transform:translate(-50%,-46px); opacity:0;} }
  .mine-empty { position:absolute; inset:0; z-index:1; display:flex; align-items:center; justify-content:center; color:var(--txt-dim); font-size:14px; line-height:1.45; text-align:center; padding:20px; }
  .dev-note { padding:10px 20px; color:var(--txt-dim); font-size:13px; border-bottom:1px solid var(--edge); }
  .ach-sticky-meta {
    padding: 0 16px;
    background: linear-gradient(180deg, rgba(24,18,12,.98), rgba(16,12,8,.92));
    border-bottom: 1px solid rgba(110,86,48,.45);
    box-shadow: 0 6px 16px rgba(0,0,0,.25);
  }
  .ach-head { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:8px 16px; padding:12px 4px 14px; margin-bottom: 0; border-bottom: none; }
  .ach-progress { font-size:18px; font-weight:800; color:var(--gold-soft); font-family: var(--font-display); text-shadow: 0 0 12px rgba(201,168,106,.2); }
  .ach-hint { font-size:12px; color:var(--txt-dim); max-width:420px; line-height:1.45; }
  .ach-playtest-bar { padding: 0 4px 10px; }
  .ach-playtest-label { font-size: 11px; font-weight: 700; color: #9fd4ff; margin-bottom: 5px; }
  .ach-playtest-track { height: 6px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
  .ach-playtest-track i { display: block; height: 100%; background: linear-gradient(90deg, #4a9fd4, #7dd4ff); border-radius: 3px; transition: width .25s ease; }
  .ach-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 4px 10px; }
  .ach-tab {
    border: 1px solid var(--edge); border-radius: 999px; padding: 5px 11px; font-size: 11px; font-weight: 700;
    background: rgba(0,0,0,.22); color: var(--txt-dim); cursor: var(--cursor-l2);
  }
  .ach-tab.sel { color: var(--gold-soft); border-color: rgba(201,168,106,.45); background: rgba(201,168,106,.08); }
  .ach-list { display:flex; flex-direction:column; gap:10px; padding:12px 4px 28px; }
  .ach-card {
    display:flex; gap:14px; align-items:flex-start; padding:12px 14px; border-radius:12px;
    border:1px solid rgba(74,58,36,.9);
    background: linear-gradient(135deg, rgba(12,8,5,.75), rgba(24,16,10,.55));
    box-shadow: inset 0 1px 0 rgba(231,207,149,.05), 0 4px 14px rgba(0,0,0,.28);
    transition:border-color .2s, opacity .2s, box-shadow .2s;
  }
  .ach-card.locked { opacity:.72; }
  .ach-card.unlocked {
    border-color:rgba(201,168,106,.42);
    background: linear-gradient(135deg, rgba(201,168,106,.1), rgba(24,16,10,.5));
    box-shadow: inset 0 1px 0 rgba(231,207,149,.12), 0 0 20px rgba(201,168,106,.08);
  }
  .ach-card.playtest { border-color: rgba(95,184,255,.22); }
  .ach-card.playtest.unlocked {
    border-color: rgba(125,200,255,.35);
    background: linear-gradient(135deg, rgba(74,159,212,.1), rgba(201,168,106,.08));
  }
  .ach-tag { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #8ec8f0; margin-bottom: 4px; }
  .ach-progress-row { display: flex; align-items: center; gap: 8px; margin: 4px 0 6px; }
  .ach-progress-bar { flex: 1; height: 5px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
  .ach-progress-bar i { display: block; height: 100%; background: linear-gradient(90deg, #6a5030, var(--gold-soft)); border-radius: 3px; transition: width .25s ease; }
  .ach-progress-val { font-size: 11px; color: var(--txt-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .ach-ico { width:52px; height:52px; flex-shrink:0; object-fit:contain; border-radius:8px; image-rendering:auto; background:rgba(0,0,0,.28); border:1px solid rgba(74,58,36,.7); filter:drop-shadow(0 2px 8px rgba(0,0,0,.45)); }
  .ach-card.locked .ach-ico { filter:grayscale(.55) brightness(.88) drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
  .ach-secret-head { margin-top:18px; padding:10px 4px 6px; font-size:13px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--txt-dim); border-top:1px solid var(--edge); }
  .ach-card.secret-locked { border-style:dashed; border-color:rgba(140,120,90,.28); background:rgba(0,0,0,.14); }
  .ach-card.secret-locked .ach-title { color:var(--txt-dim); letter-spacing:.12em; }
  .ach-card.secret-locked .ach-ico { filter:grayscale(1) brightness(.55) blur(.3px); opacity:.85; }
  .ach-card.secret.unlocked { border-color:rgba(180,140,255,.35); background:linear-gradient(135deg,rgba(120,80,180,.08),rgba(212,175,95,.05)); }
  .ach-reward-secret { color:var(--txt-dim); font-weight:500; }
  .ach-body { flex:1; min-width:0; }
  .ach-title { font-weight:800; font-size:15px; color:var(--gold-soft); margin-bottom:4px; }
  .ach-badge { color:#7dffb0; font-size:13px; }
  .ach-desc { font-size:13px; color:var(--txt-dim); line-height:1.4; margin-bottom:6px; }
  .ach-reward { font-size:12px; color:var(--gold); font-weight:600; }
  .ach-placeholder { padding: 52px 24px 40px; text-align: center; color: var(--txt-dim); }
  .ach-placeholder .ach-hero-ico { width: 80px; height: 80px; image-rendering: auto; filter: drop-shadow(0 4px 14px rgba(0,0,0,.55)); margin-bottom: 18px; opacity: .92; }
  .ach-placeholder p { font-size: 20px; font-weight: 700; color: var(--gold-soft); font-family: var(--font-display); margin: 0 0 8px; }
  .ach-placeholder span { font-size: 13px; line-height: 1.55; max-width: 320px; display: inline-block; }
  .pluslvl { font-weight:800; font-size:11px; padding:1px 7px; border-radius:5px; margin-left:6px; color:#180f06; background: var(--gold-soft); }
  .wrow .wact { font-size:13px; color: var(--gold); font-weight:700; white-space:nowrap; }
  /* Мастерская зарядов */
  .wsbody { padding-bottom: 18px; }
  .ws-cryst-bar {
    display:flex; align-items:center; gap:12px; flex-wrap:wrap;
    padding:10px 18px; border-bottom:1px solid var(--edge2);
    background:rgba(0,0,0,.22);
    position:sticky; top:0; z-index:2;
  }
  .ws-cryst-bar .cl { color:var(--txt-dim); font-size:13px; font-weight:600; }
  .ws-cryst-bar .cr { font-size:13px; font-weight:700; display:inline-flex; align-items:center; gap:3px; }
  .ws-cryst-bar .cr .cicon { width:20px; height:20px; image-rendering:pixelated; image-rendering:crisp-edges; filter:drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
  .ws-cryst-bar .cr b { margin-left:2px; color:#fff; }
  .ws-sec { padding:14px 18px; border-bottom:1px solid var(--edge); }
  .ws-sec h3 { margin:0 0 12px; font-size:15px; color:var(--gold); letter-spacing:.4px; display:flex; align-items:center; gap:8px; }
  .ws-ore { display:flex; gap:14px; flex-wrap:wrap; }
  .ore-card { flex:1 1 240px; background:rgba(0,0,0,.22); border:1px solid var(--edge); border-radius:10px; padding:12px; }
  .ore-card .oh { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
  .ore-card .oh img { width:34px; height:34px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
  .ore-card .oh .on { font-weight:700; }
  .ore-card .oh .oc { margin-left:auto; font-weight:800; color:#fff; }
  .ore-card .oh .opx { color:var(--txt-dim); font-size:12px; }
  .buyrow { display:flex; gap:6px; }
  .buyrow button { flex:1; background:linear-gradient(180deg,#3a3050,#241d34); color:#e9e1ff; border:1px solid #4a3e66; border-radius:7px; padding:7px 4px; font-weight:700; font-size:12px; cursor:var(--cursor-l2); transition:.15s; }
  .buyrow button:hover:not(:disabled){ filter:brightness(1.14); border-color:#7a66a8; }
  .buyrow button:disabled{ opacity:.4; cursor:var(--cursor-l2); }
  .craft-tabs { display:flex; gap:8px; margin-bottom:12px; }
  .craft-tabs button { background:rgba(0,0,0,.25); color:var(--txt-dim); border:1px solid var(--edge); border-radius:8px; padding:7px 14px; font-weight:700; cursor:var(--cursor-l2); }
  .craft-tabs button.sel { background:var(--gold-soft); color:#180f06; border-color:var(--gold); }
  .craft-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; }
  .craft-card { background:rgba(0,0,0,.22); border:1px solid var(--edge); border-radius:10px; padding:12px; display:flex; flex-direction:column; gap:8px; }
  .craft-card .ch { display:flex; align-items:center; gap:10px; }
  .craft-card .ch img { width:36px; height:36px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
  .craft-card .ch .cn { font-weight:700; font-size:14px; }
  .craft-card .ch .cg { font-size:11px; font-weight:800; padding:1px 7px; border-radius:5px; margin-left:auto; }
  .craft-card .cinfo { font-size:12px; color:var(--txt-dim); line-height:1.5; }
  .craft-card .cinfo b { color:#e8dcc4; }
  .craft-card .cinfo .cryreq { width:15px; height:15px; vertical-align:-3px; margin-right:2px; }
  .craft-card .cstock { font-size:12px; }
  .craft-card .cstock b { color:#fff; }
  .craft-card .cbtns { display:flex; gap:6px; margin-top:auto; }
  .craft-card button.craftb { flex:1; background:linear-gradient(180deg,#6e5630,#473414); color:#f4e6c8; border:1px solid #8a6b38; border-radius:7px; padding:7px; font-weight:700; font-size:12px; cursor:var(--cursor-l2); transition:.15s; }
  .craft-card button.craftb:hover:not(:disabled){ filter:brightness(1.14); }
  .craft-card button.sellb { background:linear-gradient(180deg,#2a6b3e,#1d4f2d); color:#dffbe6; border:1px solid #3a8a52; border-radius:7px; padding:7px 10px; font-weight:700; font-size:12px; cursor:var(--cursor-l2); transition:.15s; }
  .craft-card button.sellb:hover:not(:disabled){ filter:brightness(1.14); }
  .craft-card button:disabled{ opacity:.4; cursor:var(--cursor-l2); }
  .ws-sellall { margin-top:12px; width:100%; background:linear-gradient(180deg,#2a6b3e,#1d4f2d); color:#dffbe6; border:1px solid #3a8a52; border-radius:8px; padding:10px; font-weight:800; cursor:var(--cursor-l2); transition:.15s; }
  .ws-sellall:hover:not(:disabled){ filter:brightness(1.12); border-color:#58d977; }
  .ws-sellall:disabled{ opacity:.4; cursor:var(--cursor-l2); }
  .wlist::-webkit-scrollbar,
  .inv-grid::-webkit-scrollbar { width: 10px; }
  .wlist::-webkit-scrollbar-track,
  .inv-grid::-webkit-scrollbar-track { background: #150e08; }
  .wlist::-webkit-scrollbar-thumb,
  .inv-grid::-webkit-scrollbar-thumb { background: linear-gradient(#6e5630,#3a2c1a); border-radius: 6px; border: 1px solid #241a10; }

  /* —— Персонаж (аватар) —— */
  .avatar-hub { flex: 0 1 auto; min-width: 0; }
  .avatar-hub-btn {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 12px 6px 6px; border-radius: 10px;
    border: 1px solid rgba(201,168,106,.35);
    background: linear-gradient(180deg, rgba(42,32,22,.95), rgba(24,18,12,.98));
    color: var(--txt); cursor: pointer; max-width: 220px;
  }
  .avatar-hub-btn:hover { border-color: rgba(231,207,149,.55); }
  .avatar-hub-btn img { width: 36px; height: 36px; object-fit: contain; filter: drop-shadow(0 0 6px rgba(95,168,255,.35)); }
  .avatar-hub-text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; text-align: left; }
  .avatar-hub-name { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
  .avatar-hub-meta { font-size: 11px; color: var(--txt-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
  .avatar-setup-backdrop {
    position: fixed; inset: 0; z-index: 1200;
    background: rgba(8,6,4,.82); display: flex; align-items: center; justify-content: center; padding: 20px;
  }
  .avatar-setup-backdrop[hidden] { display: none !important; }
  .avatar-setup-box {
    width: min(420px, 100%); padding: 24px 22px 20px;
    background: linear-gradient(180deg, #1e1610, #120d09);
    border: 1px solid rgba(201,168,106,.4); border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,.65);
  }
  .avatar-setup-wide { width: min(560px, 100%); }
  .avatar-setup-actions {
    display: flex; gap: 10px; justify-content: space-between; margin-top: 16px;
  }
  .avatar-pick-lead, .avatar-pick-hint {
    margin: 0 0 12px; font-size: 13px; color: var(--txt-dim); line-height: 1.4;
  }
  .avatar-pick-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px;
    max-height: min(52vh, 360px); overflow-y: auto; padding-right: 2px;
  }
  .avatar-pick-grid-class { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .avatar-class-skills-preview {
    margin-top: 14px; padding: 12px 14px; border-radius: 10px;
    border: 1px solid rgba(231,207,149,.18); background: rgba(8,6,4,.55);
    font-size: 12px; color: var(--txt-dim); line-height: 1.45;
  }
  .avatar-class-skills-preview strong { display: block; margin-bottom: 8px; color: var(--gold-soft); font-size: 13px; }
  .avatar-class-skills-preview ul { margin: 0; padding-left: 18px; }
  .avatar-class-skills-preview li { margin-bottom: 6px; }
  .avatar-class-skills-preview li b { color: var(--accent-soft); }
  .avatar-pick-card {
    display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
    padding: 12px; text-align: left; cursor: pointer;
    border: 1px solid rgba(201,168,106,.25); border-radius: 10px;
    background: rgba(16,12,8,.55); color: var(--txt);
    transition: border-color .15s, box-shadow .15s;
  }
  .avatar-pick-card:hover { border-color: rgba(231,207,149,.45); }
  .avatar-pick-card.sel {
    border-color: rgba(95,168,255,.65);
    box-shadow: 0 0 0 1px rgba(95,168,255,.35), inset 0 0 20px rgba(95,168,255,.08);
  }
  .avatar-pick-card img { width: 40px; height: 40px; object-fit: contain; }
  .avatar-pick-card strong { font-size: 15px; font-weight: 600; color: var(--gold-soft); font-family: var(--font-display); }
  .avatar-pick-card span { font-size: 13px; color: var(--txt-dim); line-height: 1.45; }
  .avatar-pick-card.race-human.sel { border-color: rgba(201,168,106,.7); }
  .avatar-pick-card.race-elf.sel { border-color: rgba(120,200,120,.65); }
  .avatar-pick-card.race-dark_elf.sel { border-color: rgba(160,100,200,.65); }
  .avatar-pick-card.race-orc.sel { border-color: rgba(200,90,70,.65); }
  .avatar-pick-card.race-dwarf.sel { border-color: rgba(180,140,80,.65); }
  .avatar-summary {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 12px; margin-bottom: 14px;
    border: 1px solid rgba(95,168,255,.25); border-radius: 10px;
    background: rgba(16,12,8,.6);
  }
  .avatar-summary img { width: 52px; height: 52px; object-fit: contain; }
  .avatar-summary strong { display: block; margin-bottom: 6px; color: var(--gold-soft); }
  .avatar-summary p { margin: 0 0 4px; font-size: 12px; color: var(--txt-dim); line-height: 1.35; }
  .avatar-name-label { display: block; font-size: 12px; color: var(--txt-dim); margin-bottom: 6px; }
  .avatar-name-input {
    width: 100%; box-sizing: border-box; margin-bottom: 14px;
    padding: 10px 12px; border-radius: 8px;
    border: 1px solid rgba(201,168,106,.35); background: #0f0b08; color: var(--txt);
    font-size: 15px;
  }
  .avatar-name-input:focus { outline: none; border-color: rgba(231,207,149,.6); }
  .avatar-screen { padding: 8px 4px 16px; }
  .avatar-card {
    display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start;
    padding: 18px; border-radius: 12px;
    border: 1px solid rgba(201,168,106,.28);
    background: linear-gradient(165deg, rgba(30,22,16,.95), rgba(16,12,8,.98));
  }
  .avatar-portrait-wrap {
    width: 168px; height: 208px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    padding: 6px;
    border-radius: 4px;
    border: 1px solid rgba(201,168,106,.35);
    background: linear-gradient(180deg, rgba(20,14,10,.95), rgba(8,6,4,.98));
    box-shadow: inset 0 0 24px rgba(0,0,0,.65), 0 8px 20px rgba(0,0,0,.35);
  }
  .avatar-portrait-frame {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 2px;
    border: 1px solid rgba(36,32,30,.95);
    background: #060504;
    box-shadow: inset 0 0 28px rgba(0,0,0,.75);
  }
  .avatar-portrait-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0,0,0,.12) 0%, transparent 30%, transparent 70%, rgba(0,0,0,.42) 100%);
  }
  .avatar-portrait-wrap.race-human { border-color: rgba(201,168,106,.45); background: radial-gradient(circle at 50% 40%, rgba(201,168,106,.12), transparent 70%); }
  .avatar-portrait-wrap.race-elf { border-color: rgba(120,200,120,.45); background: radial-gradient(circle at 50% 40%, rgba(120,200,120,.12), transparent 70%); }
  .avatar-portrait-wrap.race-dark_elf { border-color: rgba(160,100,200,.45); background: radial-gradient(circle at 50% 40%, rgba(160,100,200,.12), transparent 70%); }
  .avatar-portrait-wrap.race-orc { border-color: rgba(200,90,70,.45); background: radial-gradient(circle at 50% 40%, rgba(200,90,70,.12), transparent 70%); }
  .avatar-portrait-wrap.race-dwarf { border-color: rgba(180,140,80,.45); background: radial-gradient(circle at 50% 40%, rgba(180,140,80,.12), transparent 70%); }
  .avatar-hub-btn.race-human { border-color: rgba(201,168,106,.4); }
  .avatar-hub-btn.race-elf { border-color: rgba(120,200,120,.35); }
  .avatar-hub-btn.race-dark_elf { border-color: rgba(160,100,200,.35); }
  .avatar-hub-btn.race-orc { border-color: rgba(200,90,70,.35); }
  .avatar-hub-btn.race-dwarf { border-color: rgba(180,140,80,.35); }
  .avatar-portrait { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
  .avatar-gender { margin: 0 0 2px; font-size: 12px; color: var(--txt-dim); }
  .avatar-pick-grid-gender { grid-template-columns: repeat(2, minmax(180px, 1fr)); max-width: 520px; margin: 0 auto; }
  .avatar-gender-card { align-items: stretch; text-align: center; padding: 10px 12px 14px; }
  .avatar-gender-portrait {
    width: 100%; height: 148px; margin-bottom: 10px; overflow: hidden;
    border-radius: 4px; border: 1px solid rgba(36,32,30,.9);
    background: #060504; box-shadow: inset 0 0 20px rgba(0,0,0,.7);
  }
  .avatar-gender-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
  .avatar-summary-portrait {
    width: 88px; height: 108px; flex-shrink: 0; overflow: hidden;
    border-radius: 4px; border: 1px solid rgba(36,32,30,.9); background: #060504;
  }
  .avatar-summary-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
  .avatar-summary { display: flex; gap: 14px; align-items: flex-start; }
  .avatar-card-body { flex: 1; min-width: 200px; }
  .avatar-name { margin: 0 0 4px; font-size: 22px; }
  .avatar-race { margin: 0 0 2px; font-size: 13px; color: var(--txt-dim); }
  .avatar-class { margin: 0 0 6px; color: var(--gold-soft); font-size: 14px; }
  .avatar-rank { margin: 0 0 10px; font-size: 13px; color: var(--txt-dim); }
  .avatar-xp-track {
    height: 8px; border-radius: 4px; background: rgba(0,0,0,.45);
    border: 1px solid rgba(201,168,106,.2); overflow: hidden; margin-bottom: 6px;
  }
  .avatar-xp-bar { height: 100%; width: 0; background: linear-gradient(90deg, #3d6a9e, #5fa8ff); transition: width .35s ease; }
  .avatar-xp-text { margin: 0 0 12px; font-size: 12px; color: var(--txt-dim); }
  .avatar-class-desc, .avatar-perk { margin: 0 0 8px; font-size: 13px; line-height: 1.45; color: var(--txt-dim); }
  .avatar-perk { color: rgba(155,230,166,.85); }
  .avatar-gear-layout {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    flex-wrap: wrap; margin-bottom: 14px;
  }
  .avatar-gear-col { display: flex; flex-direction: column; gap: 8px; min-width: 72px; }
  .avatar-gear-col[hidden] { display: none !important; }
  .avatar-card-center {
    padding: 12px; border: none; background: transparent;
    box-shadow: none;
  }
  .avatar-card-stats {
    width: 100%; max-width: 560px; margin: 0 auto;
  }
  .avatar-slot {
    position: relative; width: 72px; height: 72px; padding: 4px;
    border-radius: 10px; border: 1px dashed rgba(201,168,106,.35);
    background: rgba(12,9,6,.75); cursor: pointer; color: var(--txt);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    transition: border-color .15s, box-shadow .15s;
  }
  .avatar-slot:hover { border-color: rgba(231,207,149,.55); }
  .avatar-slot.filled { border-style: solid; border-color: rgba(95,168,255,.4); }
  .avatar-slot.filled.g-epic { border-color: rgba(255,196,107,.55); box-shadow: 0 0 12px rgba(255,196,107,.15); }
  .avatar-slot img { width: 40px; height: 40px; object-fit: contain; }
  .avatar-slot img.avatar-slot-ph { opacity: .25; filter: grayscale(.4); }
  .avatar-slot-lbl {
    position: absolute; top: 3px; left: 0; right: 0; text-align: center;
    font-size: 9px; color: var(--txt-dim); pointer-events: none;
  }
  .avatar-slot-plus {
    position: absolute; bottom: 2px; right: 4px; font-size: 11px; font-weight: 700;
    color: #5fa8ff; text-shadow: 0 0 6px rgba(95,168,255,.6);
  }
  .avatar-portrait-wrap.has-weapon { box-shadow: 0 0 18px rgba(95,168,255,.25); }
  .avatar-equip-backdrop {
    position: fixed; inset: 0; z-index: 1190;
    background: rgba(8,6,4,.82); display: flex; align-items: center; justify-content: center; padding: 20px;
  }
  .avatar-equip-backdrop[hidden] { display: none !important; }
  .avatar-equip-box {
    width: min(480px, 100%); max-height: min(84vh, 620px); overflow: hidden;
    display: flex; flex-direction: column;
    padding: 20px 18px 16px; border-radius: 12px;
    border: 1px solid rgba(201,168,106,.4);
    background: linear-gradient(180deg, #1e1610, #120d09);
    box-shadow: 0 20px 60px rgba(0,0,0,.65);
  }
  .avatar-equip-box h3 { margin: 0 0 6px; font-size: 18px; }
  .avatar-equip-hint { margin: 0 0 10px; font-size: 13px; color: var(--txt-dim); }
  .avatar-equip-tools {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
    flex-shrink: 0;
  }
  .avatar-equip-search {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid rgba(201,168,106,.28);
    background: rgba(10,8,6,.75);
    color: var(--txt);
    font: inherit;
    font-size: 14px;
  }
  .avatar-equip-search:focus {
    outline: none;
    border-color: rgba(201,168,106,.55);
  }
  .avatar-equip-grades,
  .avatar-equip-aff {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .avatar-equip-grade,
  .avatar-equip-aff-btn {
    cursor: pointer;
    border: 1px solid rgba(201,168,106,.28);
    background: rgba(16,12,8,.7);
    color: var(--txt-dim);
    border-radius: 999px;
    padding: 4px 10px;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
  }
  .avatar-equip-grade.sel,
  .avatar-equip-aff-btn.sel {
    color: #1a120a;
    background: linear-gradient(180deg, #e7cf95, #c9a86a);
    border-color: #c9a86a;
  }
  .avatar-equip-list {
    flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px;
    margin-bottom: 12px; padding-right: 2px; min-height: 120px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .avatar-equip-list::-webkit-scrollbar { display: none; width: 0; height: 0; }
  .avatar-equip-empty { margin: 0; font-size: 13px; color: var(--txt-dim); text-align: center; padding: 16px 8px; }
  .avatar-equip-opt {
    display: flex; gap: 12px; align-items: flex-start; text-align: left;
    padding: 10px 12px; border-radius: 10px; cursor: pointer;
    border: 1px solid rgba(201,168,106,.25); background: rgba(16,12,8,.55); color: var(--txt);
  }
  .avatar-equip-opt:hover { border-color: rgba(231,207,149,.5); }
  .avatar-equip-opt.is-best {
    border-color: rgba(201,168,106,.55);
    box-shadow: 0 0 0 1px rgba(201,168,106,.18), inset 0 0 18px rgba(201,168,106,.06);
  }
  .avatar-equip-opt img { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; }
  .avatar-equip-opt strong { display: block; font-size: 14px; color: var(--gold-soft); margin-bottom: 2px; }
  .avatar-equip-opt span { font-size: 12px; color: var(--txt-dim); line-height: 1.35; }
  .avatar-equip-best {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-style: normal;
    font-weight: 800;
    letter-spacing: .02em;
    color: #1a120a;
    background: linear-gradient(180deg, #e7cf95, #c9a86a);
    vertical-align: middle;
  }
  .avatar-equip-actions { display: flex; gap: 10px; justify-content: flex-end; }
  .hero-panel.race-human .hero-glow { background: radial-gradient(ellipse at 50% 0%, rgba(201,168,106,.18), transparent 65%); }
  .hero-panel.race-elf .hero-glow { background: radial-gradient(ellipse at 50% 0%, rgba(120,200,120,.16), transparent 65%); }
  .hero-panel.race-dark_elf .hero-glow { background: radial-gradient(ellipse at 50% 0%, rgba(160,100,200,.16), transparent 65%); }
  .hero-panel.race-orc .hero-glow { background: radial-gradient(ellipse at 50% 0%, rgba(200,90,70,.16), transparent 65%); }
  .hero-panel.race-dwarf .hero-glow { background: radial-gradient(ellipse at 50% 0%, rgba(180,140,80,.16), transparent 65%); }
  .story-backdrop.race-human .story-box { border-color: rgba(201,168,106,.45); }
  .story-backdrop.race-elf .story-box { border-color: rgba(120,200,120,.4); }
  .story-backdrop.race-dark_elf .story-box { border-color: rgba(160,100,200,.4); }
  .story-backdrop.race-orc .story-box { border-color: rgba(200,90,70,.4); }
  .story-backdrop.race-dwarf .story-box { border-color: rgba(180,140,80,.4); }
  .mine-banner.mine-locked { opacity: .65; filter: grayscale(.25); }
  button.mine-banner { width: 100%; text-align: left; cursor: pointer; font: inherit; color: inherit; background: linear-gradient(135deg, rgba(22,16,10,.92), rgba(12,9,6,.88)); }
  .farm-hub { margin: 0 22px 8px; }
  .farm-hub-head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 8px; padding: 0 4px; font-size: 13px; color: var(--gold-soft); font-weight: 700;
  }
  .farm-hub-head small { color: var(--txt-dim); font-weight: 400; }
  .farm-zone-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
    gap: 8px;
    margin-bottom: 10px;
  }
  .farm-zone-chip {
    display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
    padding: 8px 9px; border-radius: 10px; min-height: 68px;
    border: 1px solid rgba(201,168,106,.22); background: rgba(12,9,6,.55);
    cursor: pointer; text-align: left; font: inherit; color: inherit; width: 100%;
    transition: border-color .15s, transform .15s;
  }
  .farm-zone-chip:hover { border-color: rgba(201,168,106,.45); transform: translateY(-1px); }
  .farm-zone-chip img { width: 32px; height: 32px; object-fit: contain; border-radius: 6px; flex-shrink: 0; image-rendering: auto; }
  .farm-zone-chip strong { display: block; font-size: 11px; color: var(--txt); line-height: 1.25; }
  .farm-zone-chip small {
    font-size: 10px; color: var(--txt-dim); line-height: 1.25;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .farm-zone-chip.sel { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(201,168,106,.25); background: rgba(201,168,106,.08); }
  .farm-zone-chip.ok { border-color: rgba(120,200,120,.3); }
  .farm-zone-chip.rec:not(.sel) { border-color: rgba(201,168,106,.55); box-shadow: 0 0 10px rgba(201,168,106,.12); }
  .farm-zone-chip.rec strong::after { content: " ★"; color: var(--gold); font-size: 9px; }
  .farm-zone-chip.lock { opacity: .82; }
  .farm-zone-chip.soon { opacity: .5; cursor: not-allowed; }
  .farm-zone-chip.story-done strong::after { content: " ✦"; color: var(--gold); font-size: 10px; }
  .farm-story-read {
    width: 100%; margin: 0; padding: 8px 12px; border-radius: 10px;
    border: 1px dashed rgba(201,168,106,.35); background: rgba(201,168,106,.05);
    color: var(--gold-soft); font-size: 12px; font-weight: 700; cursor: pointer;
  }
  .farm-story-read:hover { border-color: var(--gold); background: rgba(201,168,106,.1); }
  .farm-hub-play { display: flex; flex-direction: column; gap: 8px; }
  .mine-story-bar {
    display: flex; align-items: flex-start; gap: 10px; margin: 0 16px 10px; padding: 10px 12px;
    border-radius: 12px; border: 1px solid rgba(201,168,106,.22);
    background: linear-gradient(135deg, rgba(22,16,10,.85), rgba(12,9,6,.75));
  }
  .mine-story-btn {
    flex-shrink: 0; width: 36px; height: 36px; border-radius: 8px;
    border: 1px solid rgba(201,168,106,.35); background: rgba(201,168,106,.1);
    font-size: 16px; cursor: pointer; line-height: 1;
  }
  .mine-story-btn:hover { border-color: var(--gold); background: rgba(201,168,106,.18); }
  .mine-story-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .mine-story-tag { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
  .mine-story-lead { font-size: 13px; line-height: 1.35; color: var(--txt); }
  .mine-story-quest { font-size: 11px; color: var(--txt-dim); line-height: 1.3; }
  .story-arc-bar { margin: 0 22px 10px; }
  .story-arc-btn {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 9px 12px; border-radius: 10px; border: 1px solid rgba(201,168,106,.25);
    background: rgba(12,9,6,.55); cursor: var(--cursor-l2); font: inherit; color: var(--gold-soft);
    transition: border-color .15s, background .15s;
  }
  .story-arc-btn:hover { border-color: var(--gold); background: rgba(201,168,106,.08); }
  .story-arc-label { font-size: 12px; font-weight: 700; text-align: left; display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
  .story-arc-main { display: block; line-height: 1.25; }
  .story-arc-sub { display: block; font-size: 10px; font-weight: 500; color: var(--txt-dim); letter-spacing: 0; text-transform: none; }
  .story-arc-dots { display: flex; gap: 5px; flex-shrink: 0; align-items: center; }
  .story-arc-dot {
    width: 10px; height: 10px; border-radius: 50%; padding: 0; cursor: pointer;
    background: rgba(201,168,106,.25); border: 1px solid rgba(201,168,106,.35);
  }
  .story-arc-dot:hover { transform: scale(1.15); }
  .story-arc-dot.done { background: var(--green); border-color: rgba(120,200,120,.6); }
  .story-arc-dot.open { background: var(--gold); box-shadow: 0 0 6px rgba(201,168,106,.5); }
  .story-arc-dot.locked { opacity: .45; }
  .story-arc-dot.future { opacity: .25; border-style: dashed; }
  .mine-zone-elven .mine-overlay { background: linear-gradient(rgba(10,20,8,.4), rgba(20,40,16,.55)); }
  .mine-zone-orc .mine-overlay { background: linear-gradient(rgba(30,8,4,.45), rgba(50,12,6,.55)); }
  .mine-zone-dark .mine-overlay { background: linear-gradient(rgba(20,8,30,.5), rgba(10,4,18,.65)); }
  .mine-zone-dwarf .mine-overlay { background: linear-gradient(rgba(25,18,8,.45), rgba(35,25,10,.58)); }
  .mine-zone-banana .mine-overlay { background: linear-gradient(rgba(10,7,4,.35), rgba(10,7,4,.55)); }
  @media (min-width: 920px) {
    .farm-hub {
      display: grid;
      grid-template-columns: 1fr minmax(260px, 34%);
      grid-template-areas:
        "head head"
        "zones play";
      gap: 8px 14px;
      align-items: stretch;
    }
    .farm-hub-head { grid-area: head; margin-bottom: 0; }
    .farm-zone-list { grid-area: zones; margin-bottom: 0; }
    .farm-hub-play { grid-area: play; display: flex; flex-direction: column; gap: 8px; min-height: 88px; }
    .farm-hub .mine-banner { margin: 0; flex: 1; min-height: 0; }
  }
  @media (max-height: 820px) {
    body { padding: 14px; }
    .shell { height: calc(100vh - 28px); max-height: calc(100vh - 28px); }
    .hero { padding: 12px 18px 4px; }
    .hero-inner { padding: 14px 12px 10px; }
    .hero-tagline { display: none; }
    .hero-step { padding: 7px 6px; }
    .hero-step-d { display: none; }
    .grid { padding: 14px 18px 18px; gap: 10px; }
  }
  @media (max-height: 700px) {
    .hero-cycle { display: none; }
    .hero h1 { font-size: clamp(24px, 4vw, 32px); }
    .farm-zone-list { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
    .farm-zone-chip { min-height: 60px; padding: 6px 8px; }
  }
  .avatar-farm-hint { font-size: 11px; color: var(--txt-dim); margin: -4px 0 10px; line-height: 1.4; }
  .dev-avatar-xp {
    padding: 10px;
    border-radius: 4px;
    background: rgba(0,0,0,.22);
    border: 1px solid var(--edge);
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .mine-farm-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: center;
    flex: 1;
    min-width: 0;
    color: var(--gold-soft);
    font-size: 12px;
  }
  .avatar-stat-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
    margin: 12px 0 10px;
  }
  .avatar-stat {
    padding: 8px 6px; border-radius: 8px; text-align: center;
    border: 1px solid rgba(201,168,106,.22);
    background: rgba(10,8,6,.55);
  }
  .avatar-stat-k { display: block; font-size: 10px; color: var(--txt-dim); margin-bottom: 2px; }
  .avatar-stat-v { font-size: 15px; color: var(--gold-soft); }
  .avatar-farm-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px; margin-bottom: 10px; border-radius: 10px;
    border: 1px solid rgba(95,168,255,.3);
    background: linear-gradient(90deg, rgba(30,40,55,.5), rgba(16,12,8,.4));
  }
  .avatar-farm-row span { font-size: 13px; color: var(--txt-dim); }
  .avatar-farm-row b { font-size: 18px; color: #5fa8ff; }
  .avatar-zones { margin-bottom: 10px; }
  .avatar-zones-head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 8px; font-size: 13px; color: var(--gold-soft);
  }
  .avatar-zones-head small { color: var(--txt-dim); font-weight: 400; }
  .avatar-zone-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; margin-bottom: 6px; border-radius: 10px;
    border: 1px solid rgba(201,168,106,.2); background: rgba(12,9,6,.5);
  }
  .avatar-zone-row img { width: 36px; height: 36px; object-fit: contain; border-radius: 6px; flex-shrink: 0; }
  .avatar-zone-row strong { display: block; font-size: 13px; color: var(--txt); }
  .avatar-zone-row span { font-size: 11px; color: var(--txt-dim); line-height: 1.35; }
  .avatar-zone-row.ok { border-color: rgba(120,200,120,.35); }
  .avatar-zone-row.lock { border-color: rgba(200,90,70,.3); opacity: .85; }
  .avatar-zone-row.soon { opacity: .55; }
  .avatar-zone-badge { margin-left: auto; font-size: 14px; opacity: .8; }
  @media (max-width: 520px) {
    .avatar-stat-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 720px) {
    .avatar-hub { order: 3; width: 100%; }
    .avatar-hub-btn { max-width: 100%; width: 100%; }
  }

  /* ===== Главное меню (title screen) ===== */
  body:has(.app.title-screen) {
    background: #040302;
  }
  body:has(.app.title-screen)::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    background: url("../assets/ui/login_bg.png?v=2") center 42% / cover no-repeat;
    transform: scale(1.02);
    animation: none;
  }
  body:has(.app.title-screen)::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
      linear-gradient(180deg, rgba(0,0,0,.4) 0%, rgba(0,0,0,.12) 40%, rgba(0,0,0,.58) 100%),
      radial-gradient(ellipse 90% 70% at 50% 45%, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 100%);
  }
  .shell:has(.app.title-screen) {
    position: relative;
    z-index: 1;
    max-width: min(520px, calc(100vw - 48px));
    height: auto;
    max-height: calc(100vh - 48px);
    align-items: center;
    justify-content: center;
    overflow: visible;
  }
  .shell:has(.app.title-screen) .game-log,
  .shell:has(.app.login-screen) .game-log { display: none; }

  .app.title-screen {
    flex: 0 0 auto;
    align-self: center;
    max-height: calc(100vh - 48px);
    overflow: visible;
  }
  .app.title-screen .wallet,
  .app.title-screen #resetBtn,
  .app.title-screen .avatar-hub,
  .app.title-screen .topbar-hub-meta { display: none !important; }
  .app.title-screen .topbar { justify-content: center; margin-bottom: 10px; }
  .app.title-screen .topbar .brand { text-align: center; }

  .app.title-screen > .card {
    display: flex; flex-direction: column;
    flex: 0 0 auto;
    height: auto;
    min-height: 0;
    max-height: calc(100vh - 96px);
    overflow: auto;
    background:
      linear-gradient(180deg, rgba(22,16,10,.82), rgba(8,6,4,.9)),
      repeating-linear-gradient(90deg, rgba(0,0,0,0) 0 6px, rgba(255,255,255,.012) 6px 7px);
    border-color: rgba(201,168,106,.32);
    box-shadow: 0 20px 48px rgba(0,0,0,.65), inset 0 0 0 1px rgba(255,220,160,.06);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .app.title-screen > .card::before {
    border-color: rgba(201,168,106,.22);
  }
  #screen-home.active {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .home-wrap {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 14px;
    padding: 10px 14px 14px;
    max-width: 400px;
    margin: 0 auto;
    width: 100%;
  }
  .home-header { text-align: center; }
  .home-eyebrow {
    font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--txt-dim); margin-bottom: 8px; font-weight: 500;
  }
  .home-title {
    margin: 0 0 10px; font-family: var(--font-display); font-size: clamp(28px, 6vw, 36px);
    font-weight: 600; letter-spacing: 0.01em;
    color: var(--gold-soft); text-shadow: 0 2px 20px rgba(0,0,0,.85), 0 0 32px rgba(0,0,0,.5);
  }
  .home-tagline {
    margin: 0; font-size: 14px; line-height: 1.5; color: rgba(230,222,210,.92);
    text-shadow: 0 1px 10px rgba(0,0,0,.75);
  }
  .home-account {
    margin: 10px 0 0; font-size: 12px; font-weight: 600; letter-spacing: .04em;
    color: rgba(201,168,106,.85); text-shadow: 0 1px 8px rgba(0,0,0,.7);
  }
  .home-account.is-guest { color: var(--txt-dim); font-weight: 500; }

  /* ===== Меню персонажей ===== */
  .char-menu-body {
    flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px;
    padding: 12px 20px 24px;
  }
  .char-menu-hint {
    margin: 0; font-size: 12px; line-height: 1.45; color: var(--txt-dim);
  }
  .char-roster {
    display: flex; flex-direction: column; gap: 6px;
    flex: 0 0 auto;
    overflow: visible;
  }
  .char-roster-empty {
    margin: 8px 0 4px; padding: 14px 12px; border-radius: 8px;
    border: 1px dashed var(--edge2); color: var(--txt-dim);
    font-size: 13px; line-height: 1.45; text-align: center;
  }
  .char-slot-row {
    display: flex; align-items: stretch; gap: 8px;
  }
  .char-slot-card {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: 10px; text-align: left;
    border: 1px solid var(--edge2);
    background: linear-gradient(180deg, rgba(34,26,18,.92), rgba(16,11,8,.9));
    color: var(--txt); cursor: var(--cursor-l2);
    transition: border-color .15s, filter .15s, box-shadow .15s;
  }
  .char-slot-card:hover { border-color: rgba(201,168,106,.45); filter: brightness(1.05); }
  .char-slot-active {
    border-color: rgba(201,168,106,.55);
    box-shadow: 0 0 0 1px rgba(201,168,106,.15), 0 6px 18px rgba(0,0,0,.35);
  }
  .char-slot-empty { opacity: .88; }
  .char-slot-portrait {
    flex: 0 0 40px; width: 40px; height: 40px; border-radius: 8px;
    object-fit: cover; border: 1px solid rgba(201,168,106,.25);
    background: rgba(8,6,4,.8);
  }
  .char-slot-portrait-ph {
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; font-weight: 700; color: var(--txt-dim);
  }
  .char-slot-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
  .char-slot-name {
    font-size: 14px; font-weight: 700; color: var(--gold-soft);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .char-slot-meta { font-size: 11px; color: var(--txt-dim); line-height: 1.35; }
  .char-slot-badge {
    align-self: flex-start; margin-top: 2px;
    font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: #8fd48f; padding: 2px 6px; border-radius: 4px;
    border: 1px solid rgba(120,200,120,.35); background: rgba(20,40,24,.5);
  }
  .char-slot-del {
    flex: 0 0 40px; width: 40px; border-radius: 10px;
    border: 1px solid rgba(200,90,70,.35);
    background: linear-gradient(180deg, rgba(48,24,18,.9), rgba(24,12,10,.92));
    color: #e8a090; font-size: 16px; line-height: 1; cursor: var(--cursor-l2);
    transition: border-color .15s, filter .15s, color .15s;
  }
  .char-slot-del:hover {
    border-color: rgba(220,100,80,.65); color: #ffc4b8; filter: brightness(1.08);
  }
  .char-menu-create {
    width: 100%; padding: 12px 16px; border-radius: 10px;
    border: 1px dashed rgba(201,168,106,.4);
    background: linear-gradient(180deg, rgba(42,32,20,.85), rgba(18,12,8,.88));
    color: var(--gold-soft); font-size: 14px; font-weight: 700;
    cursor: var(--cursor-l2); transition: border-color .15s, filter .15s;
  }
  .char-menu-create:hover:not(.disabled) {
    border-color: var(--gold); filter: brightness(1.06);
  }
  .char-menu-create.disabled {
    opacity: .45; cursor: not-allowed;
  }

  /* ===== Login screen (L2-style) ===== */
  body:has(.app.login-screen) {
    background: #040302;
  }
  body:has(.app.login-screen)::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    background: url("../assets/ui/login_bg.png?v=2") center 42% / cover no-repeat;
    transform: scale(1.02);
    animation: none;
  }
  body:has(.app.login-screen)::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
      linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.08) 40%, rgba(0,0,0,.55) 100%),
      radial-gradient(ellipse 90% 70% at 50% 45%, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 100%);
  }
  .shell:has(.app.login-screen) {
    position: relative;
    z-index: 1;
    max-width: min(1100px, calc(100vw - 24px));
    width: 100%;
  }
  .app.login-screen > .card {
    flex: 1;
    align-self: stretch;
    height: auto;
    max-height: none;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    min-height: min(86vh, 760px);
  }
  .app.login-screen {
    flex: 1;
    align-self: stretch;
    max-height: 100%;
  }
  .app.login-screen > .card::before { display: none; }
  .app.login-screen .topbar { display: none !important; }

  #screen-login.active {
    flex: 1; display: flex; flex-direction: column;
    min-height: min(86vh, 760px);
    position: relative;
  }
  .login-stage {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: flex-start;
    gap: 18px; padding: clamp(36vh, 40vh, 340px) 12px 72px;
    position: relative;
    min-height: 100%;
  }
  .login-logo {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
  }
  .login-panel { display: contents; }

  .l2-login-win {
    position: relative;
    width: min(318px, 92vw);
    border: 1px solid rgba(160,130,70,.65);
    border-radius: 2px;
    background:
      linear-gradient(180deg, rgba(42,32,20,.94) 0%, rgba(12,9,6,.96) 100%);
    box-shadow:
      0 20px 56px rgba(0,0,0,.72),
      inset 0 0 0 1px rgba(255,220,160,.1),
      inset 0 1px 0 rgba(255,230,180,.18),
      inset 0 -1px 0 rgba(0,0,0,.55);
    overflow: hidden;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  .l2-login-win::before,
  .l2-login-win::after {
    content: "";
    position: absolute;
    width: 12px; height: 12px;
    border-color: rgba(201,168,106,.82);
    pointer-events: none;
    z-index: 3;
  }
  .l2-login-win::before {
    top: 2px; left: 2px;
    border-top: 2px solid; border-left: 2px solid;
  }
  .l2-login-win::after {
    top: 2px; right: 2px;
    border-top: 2px solid; border-right: 2px solid;
  }
  .l2-login-chrome {
    position: absolute;
    inset: auto 0 0 0;
    height: 12px;
    pointer-events: none;
    z-index: 3;
  }
  .l2-login-chrome::before,
  .l2-login-chrome::after {
    content: "";
    position: absolute;
    bottom: 2px;
    width: 12px; height: 12px;
    border-color: rgba(201,168,106,.82);
  }
  .l2-login-chrome::before {
    left: 2px;
    border-bottom: 2px solid; border-left: 2px solid;
  }
  .l2-login-chrome::after {
    right: 2px;
    border-bottom: 2px solid; border-right: 2px solid;
  }
  .l2-login-title {
    position: relative;
    padding: 8px 14px 7px;
    font-size: 14px;
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: .08em;
    text-align: center;
    text-transform: uppercase;
    color: #f0e2c0;
    background:
      linear-gradient(180deg, rgba(78,58,32,.98), rgba(34,24,12,.99)),
      repeating-linear-gradient(90deg, transparent 0 10px, rgba(201,168,106,.04) 10px 11px);
    border-bottom: 1px solid rgba(201,168,106,.42);
    text-shadow: 0 1px 0 rgba(0,0,0,.7), 0 0 14px rgba(201,168,106,.22);
    box-shadow: inset 0 1px 0 rgba(255,230,180,.12);
  }
  .l2-login-body {
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .l2-login-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(201,168,106,.82);
  }
  .l2-login-field input {
    height: 30px;
    padding: 0 10px;
    border-radius: 1px;
    border: 1px solid rgba(70,54,32,.95);
    background: linear-gradient(180deg, #080604 0%, #14100a 100%);
    color: #f4ecda;
    box-shadow:
      inset 0 2px 6px rgba(0,0,0,.85),
      inset 0 0 0 1px rgba(0,0,0,.45),
      0 0 0 1px rgba(255,220,160,.05);
    outline: none;
    font: inherit;
    font-size: 13px;
    letter-spacing: .02em;
    text-transform: none;
  }
  .l2-login-field input::placeholder {
    color: rgba(160,150,130,.45);
    font-size: 11px;
    letter-spacing: .02em;
  }
  .l2-login-field input:focus {
    border-color: rgba(201,168,106,.8);
    box-shadow:
      inset 0 2px 6px rgba(0,0,0,.85),
      0 0 0 1px rgba(201,168,106,.25),
      0 0 10px rgba(201,168,106,.12);
  }
  .l2-login-msg {
    margin: 0;
    min-height: 1.2em;
    font-size: 11px;
    line-height: 1.35;
    text-align: center;
    color: rgba(210,200,180,.88);
  }
  .l2-login-msg.warn { color: #e0a070; }
  .l2-login-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-top: 4px;
    padding-top: 4px;
  }
  .l2-login-btn {
    width: 100%;
    min-width: 0;
    height: 34px;
    padding: 0 16px;
    border-radius: 1px;
    border: 1px solid rgba(100,78,42,.95);
    background: linear-gradient(180deg, #7a6238 0%, #4a3818 45%, #2e2210 100%);
    color: #f2e6c8;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
    cursor: var(--cursor-l2);
    box-shadow:
      inset 0 1px 0 rgba(255,230,180,.28),
      inset 0 -1px 0 rgba(0,0,0,.35),
      0 2px 4px rgba(0,0,0,.45);
    text-shadow: 0 1px 0 rgba(0,0,0,.6);
  }
  .l2-login-btn-primary {
    height: 38px;
    font-size: 14px;
    border-color: rgba(180,145,80,.95);
    background: linear-gradient(180deg, #9a7c40 0%, #5e4820 48%, #3a280c 100%);
  }
  .l2-login-btn-secondary {
    border-color: rgba(120,100,60,.9);
    background: linear-gradient(180deg, #5a4a30 0%, #322818 50%, #1c160e 100%);
    color: #e8dcc0;
  }
  .l2-login-btn-danger {
    border-color: rgba(120,70,50,.9);
    background: linear-gradient(180deg, #6a4030 0%, #3a2418 50%, #20140e 100%);
    color: #f0d0b8;
  }
  .l2-login-btn:hover {
    filter: brightness(1.12);
    border-color: rgba(201,168,106,.95);
  }
  .l2-login-btn-danger:hover {
    border-color: rgba(200,120,90,.9);
  }
  .l2-login-btn:active {
    filter: brightness(.94);
    box-shadow: inset 0 2px 4px rgba(0,0,0,.55);
    transform: translateY(1px);
  }
  .l2-login-btn:disabled {
    opacity: .55;
    cursor: default;
    filter: none;
    transform: none;
  }
  .l2-login-hint {
    margin: 0;
    padding-top: 4px;
    font-size: 10px;
    line-height: 1.4;
    text-align: center;
    color: rgba(170,158,138,.78);
  }
  .l2-login-status {
    margin: 0;
    font-size: 11px;
    text-align: center;
    color: rgba(201,168,106,.85);
    letter-spacing: .04em;
  }
  .cloud-write-lock-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 14px;
    padding: 10px 14px;
    background: linear-gradient(180deg, rgba(72, 36, 24, .97), rgba(32, 18, 12, .98));
    border-bottom: 1px solid rgba(200, 120, 90, .55);
    color: #f0d8c0;
    font-size: 13px;
    line-height: 1.35;
    text-align: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .45);
  }
  .cloud-write-lock-banner[hidden] { display: none !important; }
  body.cloud-write-locked .app {
    pointer-events: none;
    user-select: none;
    filter: grayscale(0.12) brightness(0.92);
  }
  body.cloud-write-locked .cloud-write-lock-banner {
    pointer-events: auto;
    inset: 0;
    bottom: auto;
    min-height: 100%;
    align-items: center;
    padding-top: 18vh;
    background: rgba(8, 6, 4, 0.72);
    border-bottom: none;
  }
  .cloud-write-lock-card {
    max-width: 420px;
    padding: 18px 20px;
    border-radius: 4px;
    border: 1px solid rgba(200, 120, 90, .45);
    background: linear-gradient(180deg, rgba(48, 28, 18, .98), rgba(24, 14, 10, .99));
    box-shadow: 0 12px 40px rgba(0, 0, 0, .55);
  }
  .cloud-write-lock-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 12px;
  }
  .cloud-write-lock-btn-primary {
    background: linear-gradient(180deg, #9a6838, #5a3818);
  }
  .cloud-write-lock-btn-ghost {
    background: transparent;
    border-color: rgba(201,168,106,.35);
  }
  .cloud-write-lock-btn {
    height: 30px;
    padding: 0 14px;
    border-radius: 2px;
    border: 1px solid rgba(201,168,106,.7);
    background: linear-gradient(180deg, #8a6038, #4a3018);
    color: #f2e6c8;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    cursor: var(--cursor-l2);
  }
  .cloud-write-lock-btn:hover { filter: brightness(1.1); }
  .login-corner {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .login-corner-btn,
  .login-settings-btn {
    height: 34px;
    padding: 0 14px;
    border-radius: 4px;
    border: 1px solid rgba(201,168,106,.45);
    background: linear-gradient(180deg, rgba(48,36,20,.92), rgba(18,12,8,.94));
    color: #e8d7b0;
    font-size: 12px;
    letter-spacing: .03em;
    cursor: var(--cursor-l2);
    box-shadow: 0 6px 18px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,220,160,.12);
    white-space: nowrap;
  }
  .login-corner-btn:hover,
  .login-settings-btn:hover {
    border-color: var(--gold);
    filter: brightness(1.06);
  }
  .login-dev-skip {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 5;
    height: 30px;
    padding: 0 12px;
    border-radius: 4px;
    border: 1px dashed rgba(160,120,220,.55);
    background: rgba(40,20,50,.75);
    color: #d8c0f0;
    font-size: 11px;
    letter-spacing: .04em;
    cursor: var(--cursor-l2);
  }
  .login-dev-skip:hover { filter: brightness(1.1); }
  .login-copy {
    margin: 0;
    position: absolute;
    left: 0; right: 0; bottom: 48px;
    text-align: center;
    font-size: 10px;
    letter-spacing: .04em;
    color: rgba(210,210,215,.55);
    text-shadow: 0 1px 4px rgba(0,0,0,.8);
    pointer-events: none;
  }

  .home-nav { display: flex; flex-direction: column; gap: 10px; width: 100%; }
  .home-nav-btn {
    display: flex; align-items: center; gap: 14px; width: 100%;
    padding: 14px 16px; border-radius: 12px; cursor: var(--cursor-l2);
    border: 1px solid rgba(201,168,106,.22);
    background: linear-gradient(180deg, rgba(28,20,12,.88), rgba(10,8,5,.92));
    color: var(--txt); text-align: left;
    box-shadow: 0 8px 24px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.04);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: border-color .15s, transform .12s, filter .15s;
  }
  .home-nav-btn:hover {
    border-color: var(--gold); filter: brightness(1.06);
    transform: translateY(-1px);
  }
  .home-nav-btn:active { transform: translateY(0); filter: brightness(.98); }
  .home-nav-play {
    border-color: rgba(201,168,106,.45);
    background: linear-gradient(180deg, rgba(58,44,24,.98), rgba(24,16,10,.95));
  }
  .home-nav-ico {
    flex: 0 0 40px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
    font-size: 22px; line-height: 1; filter: drop-shadow(0 0 8px rgba(201,168,106,.25));
  }
  .home-nav-ico img { width: 36px; height: 36px; object-fit: contain; }
  .home-nav-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .home-nav-text strong { font-size: 15px; color: var(--gold-soft); font-weight: 700; }
  .home-nav-text small { font-size: 11px; color: var(--txt-dim); line-height: 1.35; }
  .home-footer {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    margin-top: 4px; text-align: center;
  }
  .home-login-link {
    padding: 0; border: none; background: none;
    color: rgba(201,168,106,.72); font-size: 12px; font-weight: 600;
    letter-spacing: .04em; cursor: var(--cursor-l2);
    text-decoration: underline; text-underline-offset: 3px;
    transition: color .15s, filter .15s;
  }
  .home-login-link:hover { color: var(--gold-soft); filter: brightness(1.08); }
  .home-ver {
    font-size: 11px; letter-spacing: .08em; color: var(--txt-dim);
    font-variant-numeric: tabular-nums;
  }

  .hub-top-row { padding: 4px 4px 12px; flex-shrink: 0; }
  .hub-back-btn {
    padding: 8px 14px; border-radius: 8px; border: 1px solid var(--edge2);
    background: linear-gradient(180deg, #2a2014, #161008);
    color: var(--gold-soft); font-size: 12px; font-weight: 700; cursor: var(--cursor-l2);
    transition: border-color .15s, filter .15s;
  }
  .hub-back-btn:hover { border-color: var(--gold); filter: brightness(1.08); }

  #screen-settings.active,
  #screen-patch.active,
  #screen-author.active,
  #screen-characters.active {
    display: flex; flex-direction: column; min-height: min(68vh, 560px);
    overflow: hidden;
  }
  #screen-characters .char-menu-body {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  #screen-characters .char-menu-body::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }
  #screen-characters .char-roster {
    flex: 0 0 auto;
    max-height: none;
    overflow: visible;
  }
  #screen-characters .char-menu-create {
    flex-shrink: 0;
  }
  #screen-settings .settings-screen,
  #screen-patch .patch-body,
  #screen-author .author-screen {
    flex: 1; min-height: 0; max-height: none;
    overflow-y: auto; padding: 12px 20px 24px;
  }
  .sub-screen-body { font-size: 13px; line-height: 1.55; color: var(--txt); }
  .author-screen p { margin: 0 0 12px; }
  .author-screen a { color: var(--gold-soft); }
  .author-screen a:hover { color: #fff; }
  .author-feedback { margin-top: 16px !important; padding-top: 12px; border-top: 1px solid var(--edge); }

  /* ===== Mobile portrait (≤640px) ===== */
  @media (hover: none), (pointer: coarse) {
    body,
    button,
    .tile,
    .home-nav-btn,
    .btn,
    .l2-login-btn,
    .hub-back-btn,
    .sett-toggle {
      cursor: auto;
    }
  }

  @media (max-width: 640px) {
    html {
      height: 100%;
      height: 100dvh;
    }
    body {
      padding:
        max(8px, env(safe-area-inset-top, 0px))
        max(8px, env(safe-area-inset-right, 0px))
        max(8px, env(safe-area-inset-bottom, 0px))
        max(8px, env(safe-area-inset-left, 0px));
      overflow-x: hidden;
      overflow-y: auto;
      align-items: stretch;
      justify-content: flex-start;
      min-height: 100%;
      min-height: 100dvh;
      cursor: auto;
    }
    .shell {
      width: 100%;
      max-width: 100%;
      height: auto;
      min-height: calc(100dvh - 16px);
      max-height: none;
      overflow: visible;
    }
    .shell:not(:has(.app.title-screen)) {
      height: calc(100dvh - 16px);
      max-height: calc(100dvh - 16px);
      min-height: 0;
      overflow: hidden;
    }
    .app {
      max-height: none;
      min-height: calc(100dvh - 16px);
    }
    .app:not(.title-screen) {
      height: 100%;
      max-height: 100%;
      min-height: 0;
    }
    .app > .card {
      max-height: none;
    }

    /* Title / login / home full-bleed */
    .shell:has(.app.title-screen),
    .shell:has(.app.login-screen) {
      max-width: 100%;
      width: 100%;
      min-height: 100dvh;
      height: 100dvh;
      max-height: 100dvh;
      align-items: stretch;
      justify-content: stretch;
      overflow: hidden;
    }
    .app.title-screen {
      flex: 1;
      align-self: stretch;
      max-height: 100%;
      min-height: 0;
      overflow: hidden;
    }
    .app.title-screen > .card {
      flex: 1;
      height: 100%;
      max-height: 100%;
      min-height: 0;
      overflow: auto;
      -webkit-overflow-scrolling: touch;
      border-radius: 0;
      box-shadow: none;
    }
    .app.title-screen .topbar { display: none; }

    /* Mobile login: one BG fitted to width (logo intact), form + bar below */
    body:has(.app.title-screen),
    body:has(.app.login-screen) {
      padding-left: 0;
      padding-right: 0;
    }
    body:has(.app.title-screen)::before,
    body:has(.app.login-screen)::before {
      background: #060403 url("../assets/ui/login_bg_mobile.png?v=3") center top / 100% auto no-repeat;
      transform: none;
      inset: 0;
    }
    body:has(.app.title-screen)::after,
    body:has(.app.login-screen)::after {
      background:
        linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.0) 28%, rgba(0,0,0,.35) 58%, rgba(0,0,0,.7) 100%);
    }

    .login-screen.active,
    #screen-login.active {
      min-height: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
    }
    .app.login-screen > .card {
      min-height: 100%;
      height: 100%;
      background: transparent;
      overflow: hidden;
    }
    .login-stage {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      gap: 0;
      min-height: 0;
      height: 100%;
      padding:
        max(0px, env(safe-area-inset-top, 0px))
        14px
        max(10px, env(safe-area-inset-bottom, 0px));
    }
    .login-panel {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      gap: 10px;
      width: 100%;
      flex: 0 0 auto;
      min-height: 0;
      margin: 0;
      /* height of landscape when BG is width-fitted (1536×1024 → ~66.7vw) */
      padding-top: min(64vw, 300px);
      padding-bottom: 8px;
    }
    .login-copy {
      position: static;
      left: auto; right: auto; bottom: auto;
      font-size: 10px;
      opacity: .75;
      margin: 0;
    }
    .l2-login-win {
      width: min(100%, 400px);
      max-width: 100%;
      flex-shrink: 0;
    }
    .l2-login-body {
      padding: 14px 14px 14px;
      gap: 10px;
    }
    .l2-login-hint { display: none; }
    .l2-login-field input {
      font-size: 16px;
      min-height: 44px;
      height: 44px;
      padding: 10px 12px;
    }
    .l2-login-btn {
      min-height: 44px;
      padding: 12px 14px;
      font-size: 15px;
      touch-action: manipulation;
    }
    .l2-login-actions { gap: 10px; }
    .login-dev-skip,
    .login-dev-skip[hidden] { display: none !important; }
    .login-corner {
      position: static;
      left: auto; right: auto; bottom: auto;
      flex: 0 0 auto;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: stretch;
      align-items: stretch;
      gap: 6px;
      width: 100%;
      margin-top: auto;
      padding: 0;
      z-index: 2;
    }
    .login-corner-btn {
      flex: 1 1 0;
      min-width: 0;
      min-height: 42px;
      height: auto;
      padding: 8px 6px;
      font-size: 11px;
      white-space: normal;
      line-height: 1.2;
      touch-action: manipulation;
    }

    @media (max-height: 640px) {
      .login-panel { padding-top: min(48vw, 200px); }
      .login-stage { overflow-y: auto; -webkit-overflow-scrolling: touch; }
      .l2-login-body { padding: 12px; gap: 8px; }
    }

    .home-wrap {
      max-width: 100%;
      padding: 12px 12px max(16px, env(safe-area-inset-bottom, 0px));
      gap: 12px;
    }
    .home-title { font-size: clamp(24px, 8vw, 32px); margin-bottom: 6px; }
    .home-tagline { font-size: 13px; }
    .home-nav { gap: 8px; }
    .home-nav-btn {
      min-height: 52px;
      padding: 12px 14px;
      gap: 12px;
      touch-action: manipulation;
    }
    .home-nav-btn:hover { transform: none; }
    .home-nav-btn:active { filter: brightness(1.08); }
    .home-nav-ico { flex: 0 0 36px; width: 36px; height: 36px; }
    .home-nav-ico img { width: 32px; height: 32px; }
    .home-nav-text strong { font-size: 15px; }
    .home-login-link {
      min-height: 44px;
      padding: 10px 8px;
      display: inline-flex;
      align-items: center;
      touch-action: manipulation;
    }

    /* Game log — compact, less intrusive */
    .game-log-tab {
      min-height: 72px;
      padding: 10px 6px;
      top: auto;
      bottom: max(72px, env(safe-area-inset-bottom, 0px) + 56px);
      transform: none;
    }
    .game-log-tab-label { font-size: 10px; writing-mode: vertical-rl; transform: rotate(180deg); }
    .game-log:not(.is-collapsed) {
      width: min(92vw, 320px);
    }

    /* Topbar / hub — минимум хрома */
    .topbar {
      flex-wrap: nowrap;
      gap: 6px;
      padding: 6px 8px;
      margin-bottom: 6px;
      align-items: center;
    }
    .topbar .brand { display: none !important; }
    .topbar-actions {
      flex: 1 1 auto;
      justify-content: space-between;
      flex-wrap: nowrap;
      gap: 6px;
      min-width: 0;
      width: 100%;
    }
    .topbar-hub-meta,
    #resetBtn,
    #devToggle { display: none !important; }
    .wallet { padding: 4px 8px; margin-left: auto; }
    .wallet .lbl { font-size: 9px; }
    .wallet .coin { font-size: 13px; }
    .avatar-hub {
      order: 0;
      width: auto;
      flex: 0 1 auto;
    }
    .avatar-hub-btn {
      max-width: min(100%, 140px);
      min-height: 40px;
      padding: 4px 8px;
      touch-action: manipulation;
    }
    .avatar-hub-btn img { width: 28px; height: 28px; }
    .avatar-hub-name { max-width: 72px; font-size: 12px; }
    .avatar-hub-meta { display: none !important; }
    .hub-top-row { padding: 2px 8px 8px; }
    .hub-back-btn {
      min-height: 40px;
      padding: 8px 12px;
      touch-action: manipulation;
    }

    /* На ферме / заточке / инвентаре — ещё чище */
    .app:has(#screen-mine.active) .avatar-hub,
    .app:has(#screen-ench.active) .avatar-hub,
    .app:has(#screen-inv.active) .avatar-hub {
      display: none !important;
    }
    .app:has(#screen-mine.active) .game-log,
    .app:has(#screen-ench.active) .game-log {
      display: none !important;
    }
    .app:has(#screen-mine.active) .topbar {
      margin-bottom: 0;
      padding: 4px 8px;
    }

    /* Menu tiles */
    .grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      padding: 12px 10px 18px;
    }
    .tile {
      min-height: 128px;
      padding: 12px 10px 14px;
      touch-action: manipulation;
    }
    .tile:hover { transform: none; }
    .tile:active { transform: scale(0.98); filter: brightness(1.06); }
    .tile .tile-ico,
    .tile .emoji { width: 56px; height: 56px; line-height: 56px; font-size: 40px; }
    .tile .tname { font-size: 13px; }
    .tile .tcount { font-size: 11px; }

    .panel-head {
      gap: 8px;
      padding: 10px 12px;
    }
    .panel-head .back,
    .panel-head .btn,
    .panel-head button.back {
      min-height: 40px;
      touch-action: manipulation;
    }

    /* Buttons / inputs */
    .btn,
    .sett-toggle,
    .lb-tab,
    .char-menu-create,
    .lb-login-cta {
      min-height: 44px;
      touch-action: manipulation;
    }
    .btn:hover { filter: none; }
    .btn:active { filter: brightness(1.08); }
    input[type="text"],
    input[type="password"],
    input[type="search"],
    input[type="number"],
    .search,
    .avatar-name-input {
      font-size: 16px !important;
    }

    /* Enchant */
    .ench { gap: 0; }
    .stage {
      min-height: 280px;
      padding: 16px 12px;
    }
    .control {
      padding: 12px 12px max(16px, env(safe-area-inset-bottom, 0px));
    }
    .actions { flex-direction: column; }
    .actions .btn { width: 100%; flex: none; }
    .btn-sell { width: 100%; min-height: 44px; }
    .wplus { font-size: 20px; }

    /* Mine — только поле + короткий HUD */
    #screen-mine .panel-head {
      padding: 6px 8px;
      gap: 6px;
    }
    #screen-mine .panel-head h2 {
      font-size: 14px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 55%;
    }
    #screen-mine .panel-head .back {
      min-height: 36px;
      padding: 6px 10px;
      font-size: 12px;
    }
    .mine-story-bar {
      display: none !important;
    }
    .mine-hud {
      gap: 4px 8px;
      padding: 4px 8px;
      font-size: 11px;
    }
    .mine-hud .mh { font-size: 11px; }
    .mine-hud .mh b { font-size: 12px; }
    .mine-hud .mine-farm-stats { display: none !important; }
    .mine-session-loot .mine-loot-toggle { padding: 5px 10px 5px 8px; }
    .mine-loot-lbl { font-size: 10px; }
    .mine-loot-count { font-size: 10px; padding: 1px 5px; }
    .mine-loot-body { left: 6px; right: 6px; max-height: min(36vh, 200px); }
    .mine-loot-name { max-width: 96px; }
    .mine-hud .mine-shot-toggle {
      margin-left: 0;
      padding: 3px 8px 3px 4px;
      min-height: 34px;
      gap: 5px;
      border-radius: 8px;
    }
    .mine-hud .mine-shot-toggle .mine-shot-ico-wrap {
      width: 26px;
      height: 26px;
    }
    .mine-hud .mine-shot-toggle .mine-shot-qty { font-size: 12px; }
    .mine-quest-hud {
      padding: 3px 8px 4px;
      font-size: 10px;
      gap: 4px;
    }
    .mine-quest-hud .mine-quest-obj {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .mine-banner {
      gap: 10px;
      padding: 10px 12px;
      flex-wrap: wrap;
    }
    .mine-banner img { width: 44px; height: 52px; }
    .mine-banner .mb-t { font-size: 14px; }
    .mine-banner .mb-go { margin-left: 0; width: 100%; text-align: right; }
    .mine-stage {
      min-height: min(62dvh, 520px);
      flex: 1;
    }
    .mine-skill-bar {
      left: 50% !important;
      right: auto !important;
      top: auto !important;
      bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important;
      transform: translateX(-50%) !important;
      pointer-events: none;
    }
    .mine-skill-drag { display: none !important; }
    .mine-skill-key { display: none !important; }
    .mine-skill-dock {
      padding: 5px 6px;
      border-radius: 10px;
    }
    .mine-skill-bar-inner { gap: 5px; }
    .mine-skill-btn {
      width: 46px;
      height: 46px;
      border-radius: 9px;
      touch-action: manipulation;
    }
    .mine-skill-btn img { width: 32px; height: 32px; }
    .mine-skill-cd { font-size: 12px; }
    .gnome.mine-solo .mine-solo-card {
      max-width: min(78vw, 200px);
    }
    .gnome.mine-solo .mob-portrait-frame { height: 112px; }
    .gnome.mine-solo.golden .mob-portrait-frame { height: 120px; }
    .gnome.mine-solo.boss .mob-portrait-frame { height: 128px; }
    .gnome.mine-solo.mob-sprite-kind .mine-solo-unit {
      width: 118px;
      max-width: min(42vw, 130px);
    }
    .gnome.mine-solo.mob-sprite-kind.golden .mine-solo-unit {
      width: 128px;
      max-width: min(46vw, 140px);
    }
    .gnome.mine-solo.mob-sprite-kind.boss .mine-solo-unit {
      width: 138px;
      max-width: min(50vw, 150px);
    }
    .gnome.mine-solo.mob-sprite-kind .mob-sprite-stage { height: 108px; }
    .gnome.mine-solo.mob-sprite-kind.golden .mob-sprite-stage { height: 116px; }
    .gnome.mine-solo.mob-sprite-kind.boss .mob-sprite-stage { height: 124px; }
    .gnome.mine-solo.mob-sprite-kind .mob-sprite-img { max-width: 102px; }
    .gnome.mine-solo.mob-sprite-kind.golden .mob-sprite-img { max-width: 110px; }
    .gnome.mine-solo.mob-sprite-kind.boss .mob-sprite-img { max-width: 118px; }
    .gnome.mine-solo .mob-solo-name { font-size: 11px; }
    .gnome.mine-solo.mob-sprite-kind .mob-solo-name { font-size: 11px; }

    /* Hero / story arc на хабе — короче */
    .hero-cycle,
    .hero-tagline { display: none !important; }
    .story-arc-bar .story-arc-sub { display: none; }

    /* Inventory / workshop */
    .inv-toolbar,
    .inv-filters,
    .filters {
      flex-wrap: wrap;
      gap: 8px;
      padding-left: 10px;
      padding-right: 10px;
    }
    .wrow { padding: 10px 8px; }
    .inv-res { flex-wrap: wrap; }

    /* Journal / leaderboard / settings */
    .lb-body,
    .settings-screen,
    .char-menu-body,
    .quest-journal-list,
    .sub-screen-body {
      padding-left: 12px;
      padding-right: 12px;
    }
    #screen-settings.active,
    #screen-patch.active,
    #screen-author.active,
    #screen-characters.active,
    #screen-leaderboard.active {
      min-height: 0;
      flex: 1;
    }
    .lb-tabs { flex-wrap: wrap; gap: 6px; }
    .lb-tab { flex: 1 1 auto; min-width: 88px; }
    .qj-chapter-head { flex-wrap: wrap; }
    .avatar-pick-grid,
    .avatar-pick-grid-gender {
      grid-template-columns: 1fr !important;
      max-width: 100%;
    }
    .avatar-gear-layout {
      flex-direction: column;
      align-items: center;
    }

    /* Story / modals */
    .story-backdrop {
      padding:
        max(12px, env(safe-area-inset-top, 0px))
        max(12px, env(safe-area-inset-right, 0px))
        calc(76px + env(safe-area-inset-bottom, 0px))
        max(12px, env(safe-area-inset-left, 0px));
      justify-content: flex-end;
    }
    .story-box {
      width: 100%;
      max-height: none;
      padding: 16px 14px 14px;
      border-radius: 14px;
    }
    .ach-modal-backdrop,
    .ach-reward-backdrop {
      padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    }
    .story-title { font-size: 22px; }
    .story-body { font-size: 14px; margin-bottom: 12px; }
    .story-actions .btn,
    #storyOk {
      min-height: 48px;
      width: 100%;
      touch-action: manipulation;
    }
    .modal-box,
    .ach-modal {
      width: min(100%, 420px);
      max-height: min(90dvh, 560px);
    }
  }

  @media (max-width: 480px) {
    body:has(.app.title-screen)::before,
    body:has(.app.login-screen)::before {
      background: #060403 url("../assets/ui/login_bg_mobile.png?v=3") center top / 100% auto no-repeat;
    }
    .login-stage {
      padding-left: 12px;
      padding-right: 12px;
    }
    .login-corner-btn { font-size: 10px; padding: 8px 4px; }
    .home-tagline { font-size: 12px; }
    .grid { gap: 8px; padding: 10px 8px 14px; }
    .tile { min-height: 112px; padding: 10px 8px 12px; }
    .tile .tile-ico,
    .tile .emoji { width: 48px; height: 48px; line-height: 48px; font-size: 34px; }
    .stage { min-height: 240px; padding: 12px 8px; }
    .wname { font-size: 17px; }
    .mine-stage { min-height: min(62dvh, 420px); }
    .l2-login-win { width: 100%; }
    .app:not(.title-screen):not(.login-screen) .topbar-actions {
      justify-content: flex-end;
    }
  }