@font-face {
    font-family: "Wildstat Chat";
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url("fonts/nunito-latin-v32.woff2") format("woff2");
  }

  :root {
    color-scheme: dark;
    --panel: rgba(13, 20, 17, .90);
    --panel2: rgba(22, 31, 26, .94);
    --border: rgba(255,255,255,.14);
    --text: #f5f5e9;
    --muted: #b7c5b7;
    --green: #69e56f;
    --gold: #ffd85b;
    --red: #ff6767;
    --stat-armor: #74d8ff;
    --stat-regen: #ff7ccb;
    --font-rounded: "Arial Rounded MT Bold", "Arial Rounded MT", Arial, sans-serif;
    --chat-font: "Arial Rounded MT Bold", "Arial Rounded MT", "Wildstat Chat", Arial, sans-serif;
    --player-name-font: var(--font-rounded);
    --font-readable-min: 11px;
    --font-readable-label: 12px;
    --font-readable-body: 14px;
    --font-readable-title: 17px;
    --line-height-readable: 1.3;
    --profile-portrait-sheet-size: 824%;
    --text-outline-width: .08em;
    --text-shadow: .06em .10em 0 #000;
    --text-shadow-large: .06em .10em 0 #000;
    --game-window-width: min(420px, calc(100vw - 24px));
    --hud-surface: rgba(18, 28, 22, .60);
    --hud-frame: #050a06;
    --hud-radius: 9px;
    --hud-radius-small: 8px;
    --hud-edge-gap: 8px;
    --hud-safe-top: max(var(--hud-edge-gap), env(safe-area-inset-top, 0px));
    --hud-safe-left: max(var(--hud-edge-gap), env(safe-area-inset-left, 0px));
    --hud-safe-right: max(var(--hud-edge-gap), env(safe-area-inset-right, 0px));
    --hud-row-height: clamp(59px, 8.5vw, 63px);
    --hud-map-size: calc(var(--hud-row-height) * 2);
    --player-hud-height: calc(var(--hud-row-height) + 16px);
    --mini-chat-height: 58px;
    --toolbar-button-height: 58px;
    --toolbar-height: calc(var(--toolbar-button-height) + env(safe-area-inset-bottom, 0px));
    --gameplay-bottom-inset: var(--toolbar-height);
    --window-back-bottom-gap: 9px;
  }

  * {
    box-sizing: border-box;
    font-family: var(--font-rounded);
    -webkit-text-stroke: var(--text-outline-width) #000;
    paint-order: stroke fill;
    text-shadow: var(--text-shadow);
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    scrollbar-color: rgba(205, 216, 208, .62) transparent;
    scrollbar-width: thin;
  }

  *::-webkit-scrollbar { width: 7px; height: 7px; background: transparent; }
  *::-webkit-scrollbar-track,
  *::-webkit-scrollbar-track-piece,
  *::-webkit-scrollbar-corner { background: transparent; }
  *::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(205, 216, 208, .62); }
  *::-webkit-scrollbar-thumb:hover { background: rgba(235, 241, 237, .78); }

  .window-title { text-transform: none; }

  html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: #000;
    font-family: var(--font-rounded);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    touch-action: none;
  }

  canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    background: #000;
  }

  canvas#game {
    bottom: var(--gameplay-bottom-inset);
    height: auto;
  }

  #gameGpu { z-index: 0; pointer-events: none; bottom: var(--gameplay-bottom-inset); height: auto; }
  #game { z-index: 1; }
  body.has-webgl-world #game { background: transparent; }

  #hud {
    position: fixed;
    inset: 0;
    pointer-events: none;
    color: var(--text);
    text-shadow: var(--text-shadow);
    z-index: 2;
  }

  .topbar {
    position: absolute;
    left: var(--hud-safe-left);
    top: var(--hud-safe-top);
    right: var(--hud-safe-right);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
  }

  .card {
    background: var(--panel);
    border: 2px solid var(--border);
    border-radius: 10px;
    padding: 8px 10px;
    backdrop-filter: blur(4px);
  }

  .player-hud-stack { display: block; width: min(420px, 68vw, calc(100vw - var(--hud-safe-left) - var(--hud-safe-right) - var(--hud-map-size) - var(--hud-edge-gap))); height: var(--player-hud-height); }

  .player-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
    min-width: 0;
    padding: 0 3px 0 2px;
  }

  .player-hud-card { position: relative; z-index: 3; isolation: isolate; display: grid; grid-template-columns: var(--hud-row-height) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); align-items: stretch; column-gap: 8px; width: 100%; height: 100%; min-height: 0; padding: 6px 8px 6px 6px; overflow: hidden; border: 2px solid var(--hud-frame); border-radius: var(--hud-radius); background: var(--hud-surface); box-shadow: 0 2px 0 rgba(0,0,0,.42); }
  .player-hud-content { display: grid; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 4px; min-width: 0; min-height: 0; }
  .profile-icon { flex: 0 0 auto; margin: 0; padding: 0; overflow: hidden; border: 2px solid #000; border-radius: 7px; background-color: #fff; background-repeat: no-repeat; background-size: var(--profile-portrait-sheet-size) var(--profile-portrait-sheet-size); background-clip: padding-box; -webkit-text-stroke: 0; text-shadow: none; }
  .profile-icon-button { width: 100%; height: 100%; align-self: stretch; border-radius: 5px; cursor: pointer; }
  #playerHudProfileIcon:active { transform: none; }
  .profile-window-icon { width: 58px; min-width: 58px; height: 58px; cursor: default; }
  .profile-window-icon.is-editable { position: relative; border-color: #000; cursor: pointer; }
  .profile-window-icon.is-editable::after { position: absolute; top: 2px; right: 2px; display: grid; place-items: center; width: 17px; height: 17px; border: 2px solid #080a08; border-radius: 50%; background: var(--green); color: #0a120c; content: "✎"; font: 900 11px/1 Arial, sans-serif; -webkit-text-stroke: 0; text-shadow: none; }
  #profileIconPicker { position: fixed; inset: 0; z-index: 13; display: grid; place-items: center; padding: 10px; background: transparent; }
  #profileIconPicker[hidden] { display: none; }
  .profile-icon-picker-modal { display: grid; grid-template-rows: minmax(0, 1fr) auto; width: var(--game-window-width); max-height: calc(100vh - 18px); padding: 12px; overflow: hidden; text-align: left; }
  .profile-icon-choices { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; max-height: min(74vh, 480px); margin-top: 10px; overflow-y: auto; }
  .profile-icon-choice { aspect-ratio: 1; width: 100%; margin: 0; padding: 0; border: 2px solid #000; border-radius: 6px; background-color: #fff; background-repeat: no-repeat; background-size: var(--profile-portrait-sheet-size) var(--profile-portrait-sheet-size); background-clip: padding-box; }
  .profile-icon-choice.is-selected { border-color: var(--green); box-shadow: 0 0 0 1px rgba(105,229,111,.5); }

  #playerPower {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    color: var(--gold);
    font-size: 12.5px;
    letter-spacing: .035em;
    text-align: right;
  }
  .power-icon { display: inline-block; flex: 0 0 auto; object-fit: contain; }
  .power-icon-hud { width: 18px; height: 18px; }

  .settings-wrap {
    position: fixed;
    inset: auto 0 0;
    z-index: 7;
    display: flex;
    width: 100vw;
    height: var(--toolbar-height);
    min-height: var(--toolbar-height);
    padding: 0 max(0px, env(safe-area-inset-right)) 0 max(0px, env(safe-area-inset-left));
    gap: 0;
    border-top: 2px solid #000;
    background: rgba(8,13,10,.96);
    box-shadow: 0 -4px 14px rgba(0,0,0,.34);
    pointer-events: auto;
  }

  .settings-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    height: 100%;
    margin: 0;
    padding: 0 0 env(safe-area-inset-bottom, 0px);
    border: 2px solid #000;
    border-top: 0;
    border-bottom: 0;
    border-radius: 0;
    background: rgba(13,20,17,.70);
    color: var(--text);
    font: 900 24px/1 var(--font-rounded);
    text-shadow: var(--text-shadow);
    transition: box-shadow 160ms ease-in-out;
  }

  .settings-button[hidden] { display: none; }
  .settings-button + .settings-button { border-left: 0; }

  .toolbar-icon {
    display: block;
    width: 31px;
    height: 31px;
    object-fit: contain;
    pointer-events: none;
  }
  .tech-tree-button { position: relative; }
  .tech-tree-notice { position: absolute; top: 12%; left: calc(50% + 8px); width: 8px; height: 8px; border: 1px solid #fff; border-radius: 50%; background: #e63d3d; box-shadow: 0 1px 0 #000; pointer-events: none; }
  .tech-tree-notice[hidden] { display: none; }

  .toolbar-label { max-width: 100%; overflow: hidden; color: #fff; font: 900 10px/1 var(--font-rounded); letter-spacing: .01em; text-align: center; text-overflow: clip; white-space: nowrap; -webkit-text-stroke: 0; text-shadow: 1px 1px 0 #000; }

  .settings-button.is-off {
    background: linear-gradient(#8c5555, #683334);
    color: #f5c7c4;
  }
  .settings-button[aria-expanded="true"] {
    background: linear-gradient(#356d42, #244c30);
    box-shadow: inset 0 3px 0 var(--green), inset 0 0 0 2px rgba(105,229,111,.18);
  }
  #leaderboardBtn { background: linear-gradient(#3c331b, #251f14); }
  #techTreeBtn { background: linear-gradient(#1b3243, #142430); }
  #inventoryBtn { background: linear-gradient(#3a291d, #271d16); }
  #shopBtn { background: linear-gradient(#542440, #321629); }
  #settingsBtn { background: linear-gradient(#303532, #222624); }
  #leaderboardBtn[aria-expanded="true"] { background: linear-gradient(#6b5621, #473a1a); box-shadow: inset 0 3px 0 #e0b84f, inset 0 0 0 2px rgba(224,184,79,.18); }
  #techTreeBtn[aria-expanded="true"] { background: linear-gradient(#2c5c79, #1f4259); box-shadow: inset 0 3px 0 #74c7ef, inset 0 0 0 2px rgba(116,199,239,.18); }
  #inventoryBtn[aria-expanded="true"] { background: linear-gradient(#644229, #452e20); box-shadow: inset 0 3px 0 #bf875c, inset 0 0 0 2px rgba(191,135,92,.18); }
  #settingsBtn[aria-expanded="true"] { background: linear-gradient(#4f5854, #393f3c); box-shadow: inset 0 3px 0 #c3cac6, inset 0 0 0 2px rgba(195,202,198,.18); }
  .settings-button:active { filter: brightness(1.16); transform: none; }

  .fps-status { position: fixed; top: calc(var(--hud-safe-top) + var(--player-hud-height) + 40px); bottom: auto; left: var(--hud-safe-left); z-index: 5; display: flex; gap: 7px; padding: 5px 7px; border: 2px solid var(--hud-frame); border-radius: var(--hud-radius-small); background: var(--hud-surface); color: #fff; font: 900 8px/1 var(--font-rounded); letter-spacing: .03em; white-space: nowrap; pointer-events: none; }
  .fps-status[hidden] { display: none; }

  .card.settings-panel {
    position: fixed;
    inset: 0 0 var(--toolbar-height);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: auto;
    height: auto;
    max-height: none;
    padding: max(12px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left));
    overflow-y: auto;
    border: 0;
    border-radius: 0;
    background: radial-gradient(ellipse at 50% 38%, #243129, #0b110e 76%);
    box-shadow: none;
    pointer-events: auto;
    transform: none;
  }

  .settings-panel[hidden] { display: none; }

  .settings-panel > * { flex: 0 0 auto; width: min(520px, 100%); }
  .settings-panel .setting-row { min-height: 44px; padding: 4px 0; }
  .settings-panel .setting-toggle { min-height: 44px; }

  .card.inventory-panel {
    --inventory-surface: #18221c;
    --inventory-surface-deep: #0d1410;
    --inventory-ink: #f4f3e8;
    --inventory-muted: #aebcaf;
    --inventory-line: rgba(255,255,255,.17);
    --inventory-gold: #e0aa42;
    position: fixed;
    inset: 0 0 var(--toolbar-height);
    z-index: 10;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    width: auto;
    height: auto;
    max-height: none;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    outline: 0;
    background: radial-gradient(ellipse at 50% 38%, #243129, #0b110e 76%);
    box-shadow: none;
    color: var(--inventory-ink);
    color-scheme: dark;
    pointer-events: auto;
    transform: none;
  }

  .inventory-panel[hidden] { display: none; }
  .inventory-panel, .inventory-panel * { -webkit-text-stroke: 0; paint-order: normal; text-shadow: none; }

  .inventory-panel-header { display: grid; place-items: center; min-height: 52px; margin: 0; padding: max(8px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 8px max(14px, env(safe-area-inset-left)); border-bottom: 2px solid rgba(255,255,255,.15); background: rgba(10,15,12,.94); box-shadow: 0 4px 12px rgba(0,0,0,.28); }
  .inventory-capacity { color: var(--inventory-muted); font-size: var(--font-readable-min); font-weight: 900; letter-spacing: .04em; text-align: center; white-space: nowrap; }

  .inventory-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; min-height: 56px; padding: 6px max(14px, env(safe-area-inset-right)) 6px max(14px, env(safe-area-inset-left)); border-bottom: 1px solid rgba(255,255,255,.14); background: rgba(10,15,12,.94); }
  .inventory-tab { min-width: 0; height: 44px; min-height: 44px; margin: 0; padding: 0 10px; border: 2px solid rgba(255,255,255,.17); border-radius: 8px; background: linear-gradient(#27312b, #171e1a); box-shadow: inset 0 -3px 0 rgba(0,0,0,.24); color: #b9c5bc; font: 900 var(--font-readable-label)/1 var(--font-rounded); letter-spacing: .04em; }
  .inventory-tab.is-active { border-color: #d9a344; background: linear-gradient(#4b3c23, #282016); color: #fff4d6; box-shadow: inset 0 -3px 0 rgba(0,0,0,.22), inset 0 0 0 1px rgba(255,229,167,.2); }
  .inventory-tab:focus-visible { outline: 2px solid #fff4d6; outline-offset: 1px; }

  .inventory-content { --inventory-grid-gap: 6px; --inventory-slot-size: calc(18.75% - 3.375px); --inventory-slot-row-size: calc(18.75cqi - 3.375px); position: relative; display: grid; grid-template-columns: repeat(2, minmax(330px, 430px)); grid-template-rows: minmax(0, 1fr); align-items: center; align-content: stretch; justify-content: center; gap: 12px; min-height: 0; padding: clamp(12px, 2.3vw, 28px) max(clamp(12px, 2.3vw, 28px), env(safe-area-inset-right)) max(clamp(12px, 2.3vw, 28px), env(safe-area-inset-bottom)) max(clamp(12px, 2.3vw, 28px), env(safe-area-inset-left)); overflow: hidden; }

  .inventory-loadout {
    position: relative;
    display: grid;
    grid-column: 1;
    grid-row: 1;
    grid-template-columns: var(--inventory-slot-size) minmax(112px, 160px) var(--inventory-slot-size);
    grid-auto-rows: auto;
    justify-content: center;
    gap: var(--inventory-grid-gap);
    min-height: 0;
    padding: 7px;
  }

  .character-loadout-preview {
    position: relative;
    isolation: isolate;
    border: 2px solid #000;
    border-radius: 7px;
    outline: 1px solid #000;
    outline-offset: -3px;
    background: #31945b;
    box-shadow: none;
  }

  canvas.character-preview-canvas { position: absolute; z-index: 0; inset: 0; display: block; width: 100%; height: 100%; border-radius: 5px; background: #31945b; image-rendering: pixelated; pointer-events: none; }

  .equipment-slot {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-rows: 14px minmax(0, 1fr) 14px;
    place-items: center;
    gap: 1px;
    width: 100%;
    height: auto;
    min-width: 0;
    aspect-ratio: 1 / 1;
    margin: 0;
    padding: 3px;
    overflow: hidden;
    border: 2px solid var(--inventory-line);
    border-radius: 8px;
    background: linear-gradient(rgba(24,33,27,.62), rgba(12,18,15,.70));
    box-shadow: inset 0 -3px 0 rgba(0,0,0,.25);
    color: var(--inventory-muted);
    font: 900 7px var(--font-rounded);
    line-height: 1;
  }

  .equipment-slot-label { align-self: start; color: #d6dfd7; font-size: var(--font-readable-min); letter-spacing: .03em; pointer-events: none; }
  .equipment-slot-art { display: grid; min-width: 0; min-height: 0; place-items: center; pointer-events: none; }
  .equipment-slot-name { align-self: end; max-width: 100%; overflow: hidden; color: #eef2ed; font-size: var(--font-readable-min); line-height: var(--line-height-readable); text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
  .equipment-slot-empty { color: #758178; font: 500 18px/1 Arial, sans-serif; }
  .equipment-slot.is-equipped { border-color: #c88b2c; background: linear-gradient(rgba(59,49,29,.62), rgba(33,27,17,.70)); color: #ffe19a; }
  .equipment-slot.is-cosmetic-inherited { border-color: #77827b; background: linear-gradient(rgba(37,48,42,.62), rgba(18,25,21,.70)); cursor: pointer; }
  .equipment-slot.is-cosmetic-inherited .inventory-item-art { opacity: .42; filter: grayscale(.32); }
  .equipment-slot.is-cosmetic-hidden { border-color: #76666f; background: linear-gradient(rgba(45,39,43,.62), rgba(23,19,22,.70)); cursor: pointer; }
  .cosmetic-hidden-icon { position: relative; display: block; width: 28px; height: 20px; }
  .cosmetic-hidden-icon::before { position: absolute; inset: 4px 5px; border: 2px solid #aeb6b1; border-radius: 70% 12%; content: ""; transform: rotate(45deg); }
  .cosmetic-hidden-icon::after { position: absolute; top: 9px; left: 0; width: 28px; height: 2px; border-radius: 999px; background: #e49a9f; box-shadow: 0 1px 0 #111; content: ""; transform: rotate(-36deg); }
  .equipment-slot.is-selected { z-index: 2; border-color: #e29b21; box-shadow: 0 0 0 2px #fff3c9, 0 0 0 4px rgba(215,150,38,.58); }
  .equipment-slot.is-compatible { z-index: 1; border-color: #d5962c; animation: inventory-compatible-pulse 1.15s ease-in-out infinite; }
  .equipment-slot.is-incompatible { opacity: .48; filter: saturate(.55); }
  .equipment-slot.is-equipped-now { animation: inventory-equipped-pop .34s cubic-bezier(.2, .85, .25, 1.35); }
  .equipment-slot:hover, .equipment-slot:focus-visible { border-color: #8d7655; outline: 2px solid rgba(111,88,53,.2); outline-offset: 1px; }
  .equipment-slot:active, .inventory-item:active { transform: scale(.97); }

  .slot-head { grid-column: 1; grid-row: 1; }
  .slot-chest { grid-column: 1; grid-row: 2; }
  .slot-feet { grid-column: 1; grid-row: 3; }
  .slot-right-hand { grid-column: 3; grid-row: 1; }
  .slot-left-hand { grid-column: 3; grid-row: 2; }

  .inventory-character-stage { position: relative; z-index: 1; grid-column: 2; grid-row: 1 / span 3; min-width: 0; min-height: 0; overflow: hidden; border: 0; border-radius: 3px; background: transparent; box-shadow: none; pointer-events: none; }
  .bag-section { position: relative; display: grid; grid-column: 2; grid-row: 1; grid-template-rows: auto minmax(0, 1fr); container-type: inline-size; align-self: stretch; min-width: 0; min-height: 0; margin: 0; padding: 7px; overflow: hidden; border: 2px solid rgba(255,255,255,.16); border-radius: 8px; background: rgba(9,14,11,.58); box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
  .inventory-section-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; color: #f2f4ef; font-size: var(--font-readable-label); font-weight: 900; letter-spacing: .06em; }
  .inventory-items { display: grid; grid-template-columns: repeat(4, var(--inventory-slot-size)); grid-auto-flow: row; grid-auto-rows: var(--inventory-slot-row-size); align-content: start; align-items: start; justify-content: center; gap: var(--inventory-grid-gap); min-height: 0; padding-bottom: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
  .inventory-items::-webkit-scrollbar { display: none; width: 0; height: 0; }
  .inventory-items > .inventory-item { height: 100%; }
  .inventory-item.is-locked { grid-template-rows: 1fr auto; place-items: center; gap: 2px; border-color: #423947; background: linear-gradient(#28212a, #171319); color: #e9dfe9; }
  .inventory-item.is-locked:disabled { opacity: .72; }
  .inventory-slot-lock-symbol { align-self: end; font: 900 22px/1 Arial, sans-serif; filter: grayscale(.2); }
  .inventory-slot-unlock-cost { display: flex; align-items: center; justify-content: center; gap: 2px; color: #fff; font: 900 var(--font-readable-min)/1 var(--font-rounded); }
  .inventory-slot-unlock-cost img { display: block; width: 15px; height: 15px; object-fit: contain; }
  .inventory-item { position: relative; display: grid; grid-template-rows: minmax(0, 1fr); place-items: center; width: 100%; min-width: 0; min-height: 0; aspect-ratio: 1 / 1; margin: 0; padding: 5px; overflow: hidden; border: 2px solid rgba(255,255,255,.15); border-radius: 7px; background: linear-gradient(#172019, #0a0f0c); box-shadow: inset 0 -3px 0 rgba(0,0,0,.28); color: var(--inventory-ink); }
  .inventory-item.is-empty { background: rgba(4,8,6,.34); border-color: rgba(255,255,255,.09); box-shadow: inset 0 0 0 1px rgba(0,0,0,.24); cursor: default; }
  .inventory-item.is-filled { border-color: rgba(213,154,58,.58); background: linear-gradient(#302719, #17130d); }
  .inventory-item.is-filled, .equipment-slot.is-equipped { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  .inventory-item.is-filled, .equipment-slot.is-equipped { cursor: grab; }
  .inventory-item.is-selected { z-index: 1; border-color: #f0b044; background: linear-gradient(#57411e, #2c2112); box-shadow: 0 0 0 2px rgba(255,220,142,.55), inset 0 -3px 0 rgba(0,0,0,.2); }
  .inventory-item:hover, .inventory-item:focus-visible { border-color: #8d7655; outline: 2px solid rgba(111,88,53,.2); outline-offset: 1px; }
  .inventory-item-art-wrap { display: grid; width: 100%; height: 100%; min-width: 0; min-height: 0; place-items: center; pointer-events: none; }
  .inventory-item-art { display: block; width: 100%; height: 100%; background-position: center; background-size: contain; background-repeat: no-repeat; image-rendering: pixelated; }
  .inventory-item-art-wrap .inventory-item-art { width: min(62px, 90%); height: min(58px, 90%); }
  .inventory-item[data-item-id="starter_stone"] .inventory-item-art { width: min(40px, 58%); height: min(40px, 58%); }
  .inventory-item-art-wrap .boot-pixel-icon { transform: scale(1.35); }
  .equipment-slot .inventory-item-art { width: var(--equipped-art-width, 34px); height: var(--equipped-art-height, 34px); }
  .inventory-item:is([data-item-id="starter_bow"], [data-item-id="iron_bow"], [data-item-id="frost_bow"], [data-item-id="lava_bow"], [data-item-id="fire_metal_bow"]) .inventory-item-art,
  .equipment-slot:is([data-item-id="starter_bow"], [data-item-id="iron_bow"], [data-item-id="frost_bow"], [data-item-id="lava_bow"], [data-item-id="fire_metal_bow"]) .inventory-item-art { transform: rotate(-45deg); }
  .inventory-upgrade-level { position: absolute; top: 4px; right: 4px; z-index: 2; min-width: 22px; padding: 3px 4px; border: 1px solid #071009; border-radius: 999px; background: #65d66d; box-shadow: 0 1px 0 rgba(0,0,0,.55); color: #08150a; font: 900 var(--font-readable-min)/1 var(--font-rounded); text-align: center; pointer-events: none; }
  .inventory-item-empty-mark { color: #a17932; font: 900 20px/1 Arial, sans-serif; }

  body.inventory-dragging, body.inventory-dragging * { cursor: grabbing !important; }
  .inventory-panel.is-dragging .is-drag-source { opacity: .38; transform: scale(.94); }
  .inventory-panel.is-dragging .is-drag-valid { border-color: #86e78e; box-shadow: 0 0 0 2px rgba(134,231,142,.42), inset 0 0 0 1px rgba(9,32,14,.35); }
  .inventory-panel.is-dragging .is-drag-invalid { opacity: .42; filter: saturate(.45); }
  .inventory-panel.is-dragging .is-drag-over { z-index: 4; border-color: #d8ffab; box-shadow: 0 0 0 3px rgba(145,240,111,.72), 0 0 18px rgba(117,231,105,.45); }
  .inventory-panel.is-dragging .equipment-slot.is-drag-over { transform: scale(1.035); }
  .inventory-panel.is-dragging .bag-section.is-drag-over { box-shadow: inset 0 0 0 3px rgba(145,240,111,.72), inset 0 0 18px rgba(117,231,105,.32); transform: none; }
  .inventory-drag-ghost { position: fixed; z-index: 1000; display: grid; width: 62px; height: 62px; place-items: center; overflow: hidden; border: 2px solid #d8ffab; border-radius: 10px; background: rgba(24,33,27,.92); box-shadow: 0 8px 18px rgba(0,0,0,.48), 0 0 14px rgba(117,231,105,.38); pointer-events: none; transform: translate(-50%, -50%) rotate(2deg); }
  .inventory-drag-ghost .inventory-item-art { width: 50px; height: 46px; }
  .inventory-drag-ghost .boot-pixel-icon { transform: scale(1.6); }

  .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
  .upgrade-bench-panel { position: fixed; inset: 0 0 var(--toolbar-height); z-index: 11; display: grid; place-items: center; padding: max(12px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 14px max(14px, env(safe-area-inset-left)); overflow: hidden; background: radial-gradient(ellipse at 50% 42%, #28352d, #0b110e 76%); color: #f4f3e8; pointer-events: auto; }
  .upgrade-bench-panel[hidden] { display: none; }
  .upgrade-bench-content { display: grid; place-items: center; align-content: center; gap: 13px; width: min(100%, 390px); min-height: 0; text-align: center; }
  .upgrade-bench-prompt { margin: 0; color: #f6f3e7; font-size: var(--font-readable-body); font-weight: 900; line-height: var(--line-height-readable); letter-spacing: .03em; }
  .upgrade-bench-slots { display: flex; align-items: center; justify-content: center; gap: 16px; }
  .inventory-item.upgrade-bench-slot { display: grid; grid-template-rows: 1fr; place-items: center; width: clamp(60px, 18.75vw, 76px); min-width: clamp(60px, 18.75vw, 76px); height: clamp(60px, 18.75vw, 76px); min-height: clamp(60px, 18.75vw, 76px); aspect-ratio: 1; padding: 5px; }
  .inventory-item.upgrade-bench-slot.is-selected { border-color: #b8f29d; box-shadow: 0 0 0 2px rgba(126,220,119,.42), inset 0 -3px 0 rgba(0,0,0,.32); }
  .inventory-item.upgrade-bench-slot.is-active { background: linear-gradient(#3c321f, #211a10); }
  .inventory-item.upgrade-bench-slot.is-locked { grid-template-rows: 1fr auto; gap: 1px; border-color: #70536a; background: linear-gradient(#332832, #1b161b); color: #f0d8e6; }
  .upgrade-bench-lock-symbol { align-self: end; font: 900 22px/1 Arial, sans-serif; filter: grayscale(.2); }
  .upgrade-bench-slot-cost { display: flex; align-items: center; justify-content: center; gap: 2px; min-width: 0; color: #fff; font: 900 var(--font-readable-min)/1 var(--font-rounded); }
  .upgrade-bench-slot-cost img { display: block; width: 15px; height: 15px; object-fit: contain; }
  .upgrade-bench-slot .inventory-item-art-wrap { display: grid; width: 100%; height: 100%; place-items: center; }
  .upgrade-bench-slot .inventory-item-art { width: 82%; height: 82%; }
  .upgrade-bench-stat-gain { display: grid; gap: 5px; min-height: 20px; color: #d7dfd8; font-size: var(--font-readable-label); line-height: var(--line-height-readable); }
  .upgrade-bench-stat-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; text-align: left; }
  .upgrade-bench-stat-row strong { color: #f5f2e8; font-size: var(--font-readable-label); }
  .upgrade-bench-stat-row span { color: #8deb94; font-weight: 900; white-space: nowrap; }
  .upgrade-bench-stat-row[data-stat-kind="armor"] strong, .upgrade-bench-stat-row[data-stat-kind="armor"] span,
  .upgrade-bench-picker-stat[data-stat-kind="armor"], .upgrade-bench-picker-stat[data-stat-kind="armor"] span { color: var(--stat-armor); }
  .upgrade-bench-stat-row[data-stat-kind="regen"] strong, .upgrade-bench-stat-row[data-stat-kind="regen"] span,
  .upgrade-bench-picker-stat[data-stat-kind="regen"], .upgrade-bench-picker-stat[data-stat-kind="regen"] span { color: var(--stat-regen); }
  .upgrade-bench-timer { min-height: 20px; color: #f3cf70; font-size: var(--font-readable-body); font-weight: 900; letter-spacing: .04em; }
  .upgrade-bench-action { display: flex; align-items: center; justify-content: center; width: min(220px, 80vw); height: 44px; min-height: 44px; margin: 0; padding: 0 8px 2px; border-color: #15371b; border-radius: 8px; background: linear-gradient(#72d977, #3e9f48); box-shadow: 0 3px 0 #17361c; color: #fff; font-size: var(--font-readable-body); line-height: 1; }
  .upgrade-bench-action[hidden] { display: none; }
  .upgrade-bench-action.is-cancel { border-color: #492020; background: linear-gradient(#cf6868, #953c3c); box-shadow: 0 3px 0 #431d1d; }
  .upgrade-bench-speed-up { display: flex; align-items: center; justify-content: center; gap: 6px; border-color: #65354f; background: linear-gradient(#d86f9f, #a84573); box-shadow: 0 3px 0 #53243d; }
  .upgrade-bench-speed-up img { display: block; width: 20px; height: 20px; object-fit: contain; }
  .upgrade-bench-speed-up strong { font: inherit; }
  .upgrade-bench-action:disabled { border-color: #313a34; background: #4b554f; box-shadow: none; color: #9ba49e; }
  .upgrade-bench-back { position: absolute; right: 0; bottom: var(--window-back-bottom-gap); left: 0; display: flex; align-items: center; justify-content: center; width: min(220px, 80vw); height: 44px; min-height: 44px; margin: 0 auto; padding: 0 8px 2px; border-color: #351010; border-radius: 8px; background: linear-gradient(#c85050, #842f34); box-shadow: 0 3px 0 #351519; color: #fff; font-size: var(--font-readable-body); line-height: 1; }
  .upgrade-bench-back[hidden] { display: none; }
  .upgrade-bench-picker { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; padding: 16px; background: rgba(4,8,6,.76); }
  .upgrade-bench-picker[hidden] { display: none; }
  .upgrade-bench-picker-sheet { display: grid; grid-template-rows: auto minmax(0, 388px) auto; gap: 10px; width: min(100%, 360px); max-height: min(calc(100dvh - var(--toolbar-height) - 32px), 520px); padding: 12px; overflow: hidden; border: 2px solid rgba(255,255,255,.22); border-radius: 10px; background: #111a15; box-shadow: 0 10px 30px rgba(0,0,0,.55); }
  .upgrade-bench-picker-heading { color: #f4f3e8; font-size: var(--font-readable-label); font-weight: 900; letter-spacing: .05em; text-align: center; }
  .upgrade-bench-picker-items { display: grid; align-content: start; gap: 7px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
  .upgrade-bench-picker-items::-webkit-scrollbar { display: none; }
  .upgrade-bench-picker-item { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 9px; height: 72px; min-height: 72px; margin: 0; padding: 5px 9px; overflow: hidden; border: 2px solid #54462f; border-radius: 8px; background: linear-gradient(#302719, #17130d); color: #f4f3e8; text-align: left; }
  .upgrade-bench-picker-item .inventory-item-art { width: 44px; height: 44px; }
  .upgrade-bench-picker-copy { display: grid; gap: 1px; min-width: 0; pointer-events: none; }
  .upgrade-bench-picker-title { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
  .upgrade-bench-picker-title strong { overflow: hidden; font-size: var(--font-readable-label); text-overflow: ellipsis; white-space: nowrap; }
  .upgrade-bench-picker-title small { flex: none; color: #f3cf70; font-size: var(--font-readable-min); }
  .upgrade-bench-picker-stats { display: grid; gap: 0; min-width: 0; }
  .upgrade-bench-picker-stat { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; color: #d7dfd8; font-size: var(--font-readable-min); line-height: 1.05; }
  .upgrade-bench-picker-stat span:last-child { color: #8deb94; font-weight: 900; white-space: nowrap; }
  .upgrade-bench-picker-stat[data-stat-kind="armor"] span:last-child { color: var(--stat-armor); }
  .upgrade-bench-picker-stat[data-stat-kind="regen"] span:last-child { color: var(--stat-regen); }
  .upgrade-bench-picker-close { min-height: 44px; margin: 0; }

  .boot-pixel-icon { display: flex; justify-content: center; gap: 3px; align-items: end; height: 22px; }
  .boot-pixel-icon i { position: relative; display: block; width: 8px; height: 15px; border: 2px solid #32190d; border-radius: 2px 2px 3px 3px; background: #d58b32; box-shadow: -2px 3px 0 #ffe47b; }

  .item-inspection-panel { position: fixed; inset: 0 0 var(--toolbar-height); z-index: 13; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; background: radial-gradient(ellipse at 50% 38%, #2f302a, #0c100d 76%); color: #f4f3e8; pointer-events: auto; }
  .item-inspection-panel[hidden] { display: none; }
  .item-inspection-header { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; min-height: 64px; padding: max(10px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 10px max(14px, env(safe-area-inset-left)); border-bottom: 2px solid rgba(255,255,255,.15); background: rgba(10,15,12,.94); box-shadow: 0 4px 12px rgba(0,0,0,.28); }
  .item-inspection-title-block { display: grid; gap: 2px; min-width: 0; }
  .item-inspection-kicker { color: #d9aa58; font-size: var(--font-readable-min); font-weight: 900; letter-spacing: .08em; }
  .item-inspection-header h2 { margin: 0; overflow: hidden; color: #fff; font-size: 24px; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
  .item-inspection-content { align-self: center; justify-self: center; display: grid; grid-template-columns: 112px minmax(0, 340px); align-items: center; gap: 16px; width: min(520px, 100%); max-height: 100%; padding: 18px max(18px, env(safe-area-inset-right)) 18px max(18px, env(safe-area-inset-left)); overflow-y: auto; scrollbar-width: none; color: #c9d3cb; font-size: var(--font-readable-body); line-height: var(--line-height-readable); }
  .item-inspection-content::-webkit-scrollbar { display: none; }
  .item-inspection-icon { display: grid; place-items: center; width: 112px; height: 112px; border: 2px solid rgba(217,161,68,.68); border-radius: 12px; background: #201a10; box-shadow: inset 0 -4px 0 rgba(0,0,0,.32), 0 6px 0 rgba(0,0,0,.28); }
  .item-inspection-icon .inventory-item-art { width: 92px; height: 92px; }
  .item-inspection-icon .boot-pixel-icon { transform: scale(2.2); }
  .item-inspection-copy { display: grid; gap: 8px; min-width: 0; }
  .item-inspection-copy p { max-width: none; margin: 0; color: #d5ddd6; font-size: var(--font-readable-body); line-height: var(--line-height-readable); }
  .item-inspection-context { color: #f0bb61; font-size: var(--font-readable-min); font-weight: 900; letter-spacing: .04em; }
  .item-inspection-stats { display: flex; flex-wrap: wrap; gap: 5px; color: #ffe4a7; font-size: var(--font-readable-min); font-weight: 900; letter-spacing: .01em; }
  .item-inspection-stats span { padding: 5px 6px; border: 1px solid rgba(224,170,66,.4); border-radius: 5px; background: rgba(151,101,26,.18); }
  .item-inspection-stats [data-stat-kind="armor"] { color: var(--stat-armor); }
  .item-inspection-stats [data-stat-kind="regen"] { color: var(--stat-regen); }
  .item-inspection-actions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 160px)); justify-content: center; gap: 8px; width: 100%; }
  .item-inspection-actions:empty { display: none; }
  .item-inspection-actions button { min-width: 0; min-height: 44px; margin: 0; padding: 8px; border: 2px solid #312a22; border-radius: 8px; box-shadow: 0 3px 0 rgba(59,46,31,.36); color: #fff; font-size: var(--font-readable-min); line-height: 1.15; }
  .item-inspection-actions button:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(59,46,31,.36); }
  .item-inspection-action-primary { background: linear-gradient(#6fce69, #3d9f45); }
  .item-inspection-action-secondary { background: linear-gradient(#918473, #655b4e); }
  .item-inspection-actions button:disabled { border-color: #a39786; background: #d4cab9; box-shadow: none; color: #827766; cursor: default; }

  @keyframes inventory-compatible-pulse {
    0%, 100% { box-shadow: 0 0 0 1px rgba(215,150,38,.2); }
    50% { box-shadow: 0 0 0 3px rgba(215,150,38,.45); }
  }
  @keyframes inventory-equipped-pop {
    0% { transform: scale(.94); }
    55% { transform: scale(1.07); }
    100% { transform: scale(1); }
  }

  @media (max-width: 760px) {
    .inventory-content {
      grid-template-columns: minmax(0, 420px);
      grid-template-rows: auto minmax(0, 1fr);
      align-content: stretch;
      justify-content: center;
      gap: 8px;
      padding: 10px max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
    }

    .inventory-loadout { grid-column: 1; grid-row: 1; align-self: start; }
    .bag-section { grid-column: 1; grid-row: 2; align-self: stretch; }
  }

  @media (max-width: 460px) {
    :root { --game-window-width: min(360px, calc(100vw - 16px)); }
    .inventory-content { --inventory-grid-gap: 4px; --inventory-slot-size: calc(18.75% - 2.25px); --inventory-slot-row-size: calc(18.75cqi - 2.25px); }
    .card.inventory-panel { max-height: none; padding: 0; }
    .inventory-panel-header { margin: 0; }
    .inventory-capacity { font-size: var(--font-readable-min); }
    .inventory-loadout { padding: 5px; }
    .equipment-slot { grid-template-rows: 14px minmax(0, 1fr) 14px; padding: 2px; }
    .equipment-slot-label { font-size: var(--font-readable-min); }
    .equipment-slot-name { font-size: var(--font-readable-min); }
    .equipment-slot .inventory-item-art { max-width: 42px; max-height: 33px; }
    .bag-section { margin: 0; padding: 5px; }
    .inventory-section-title { margin-bottom: 4px; font-size: var(--font-readable-label); }
    .inventory-item { padding: 4px; border-radius: 6px; }
    .inventory-item-art-wrap .inventory-item-art { width: min(54px, 88%); height: min(51px, 88%); }
    .inventory-item[data-item-id="starter_stone"] .inventory-item-art { width: min(35px, 56%); height: min(35px, 56%); }
    .inventory-upgrade-level { top: 2px; right: 2px; min-width: 20px; padding: 2px 3px; font-size: var(--font-readable-min); }
    .item-inspection-content { grid-template-columns: 1fr; justify-items: center; align-content: center; gap: 12px; padding-top: 14px; padding-bottom: 14px; text-align: center; }
    .item-inspection-icon { width: 96px; height: 96px; }
    .item-inspection-icon .inventory-item-art { width: 78px; height: 78px; }
    .item-inspection-stats { justify-content: center; }
    .item-inspection-actions { width: 100%; }
  }

  @media (prefers-reduced-motion: reduce) {
    .equipment-slot.is-compatible, .equipment-slot.is-equipped-now { animation: none; }
    .inventory-panel.is-dragging .equipment-slot.is-drag-over, .inventory-panel.is-dragging .is-drag-source { transform: none; }
  }

  .settings-title {
    margin-bottom: 8px;
    color: var(--gold);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
  }

  .setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
  }

  .setting-toggle {
    min-width: 58px;
    margin: 0;
    padding: 6px 8px;
    border-width: 2px;
    border-radius: 6px;
    font-size: 12px;
  }

  .setting-row + .setting-row { margin-top: 9px; }

  .setting-volume { align-items: center; }

  .volume-control {
    display: flex;
    align-items: center;
    gap: 6px;
    width: min(300px, 70vw);
    min-width: 0;
  }

  .volume-control input[type="range"] {
    --volume-percent: 35%;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: 260px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    accent-color: var(--green);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
  }

  .volume-control input[type="range"]::-webkit-slider-runnable-track {
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(to right, var(--green) 0, var(--green) var(--volume-percent), #39463d var(--volume-percent), #39463d 100%);
    box-shadow: 0 0 0 2px #050805, inset 0 1px 2px rgba(0,0,0,.55);
  }

  .volume-control input[type="range"]::-webkit-slider-thumb {
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    margin-top: -18px;
    border: 3px solid #050805;
    border-radius: 50%;
    background: linear-gradient(#efffe9, #69e56f);
    box-shadow: 0 3px 0 rgba(0,0,0,.42), 0 0 0 2px rgba(255,255,255,.18);
    appearance: none;
    -webkit-appearance: none;
  }

  .volume-control input[type="range"]::-moz-range-track {
    height: 8px;
    border: 0;
    border-radius: 999px;
    background: #39463d;
    box-shadow: 0 0 0 2px #050805, inset 0 1px 2px rgba(0,0,0,.55);
  }

  .volume-control input[type="range"]::-moz-range-progress {
    height: 8px;
    border-radius: 999px;
    background: var(--green);
  }

  .volume-control input[type="range"]::-moz-range-thumb {
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    border: 3px solid #050805;
    border-radius: 50%;
    background: linear-gradient(#efffe9, #69e56f);
    box-shadow: 0 3px 0 rgba(0,0,0,.42), 0 0 0 2px rgba(255,255,255,.18);
  }

  .volume-control output {
    flex: 0 0 42px;
    width: 42px;
    color: var(--muted);
    font-size: 10px;
    text-align: right;
  }

  .setting-reset {
    display: flex;
    justify-content: flex-start;
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,.12);
  }

  .setting-reset .danger {
    min-width: 0;
    padding-inline: 10px;
  }

  .setting-toggle.danger {
    background: linear-gradient(#b95c54, #803c38);
  }

  .setting-toggle.is-off {
    background: linear-gradient(#8c5555, #683334);
  }

  .connection-status {
    color: var(--green);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .06em;
  }

  .connection-status.is-offline { color: #ff9b91; }

  .account-row { margin-top: 9px; }

  .account-button {
    min-width: 106px;
    font-size: 10px;
  }

  .account-status {
    margin-top: 5px;
    color: #a9b5ad;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .06em;
  }

  .account-status.is-signed-in { color: var(--green); }

  .account-status.is-error { color: #ff9b91; }

  .bar {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    border: 2px solid var(--hud-frame);
    border-radius: var(--hud-radius-small);
    background: linear-gradient(to bottom, #4a594a 0 49%, #303c31 50% 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
  }

  #hpFill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 100%;
    overflow: hidden;
    border-radius: 5px;
    background: linear-gradient(to bottom, #83f087 0 49%, #2fbf4b 50% 100%);
    box-shadow: none;
    transition: width .12s linear;
  }

  #hpText {
    position: relative;
    z-index: 1;
    font-size: 12px;
    font-weight: 900;
    line-height: 13px;
    letter-spacing: .04em;
    -webkit-text-stroke: 0;
    paint-order: normal;
    text-shadow:
      -1px -1px 0 #000,
      0 -1px 0 #000,
      1px -1px 0 #000,
      -1px 0 0 #000,
      1px 0 0 #000,
      -1px 1px 0 #000,
      0 1px 0 #000,
      1px 1px 0 #000,
      1px 2px 0 #000;
  }

  #message {
    position: absolute;
    left: 50%;
    top: 24%;
    z-index: 16;
    transform: translate(-50%, -50%);
    text-align: center;
    font-weight: 900;
    letter-spacing: .04em;
    font-size: clamp(18px, 4vw, 34px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s;
  }

  .minimap-meta {
    position: absolute;
    top: calc(var(--hud-safe-top) + var(--hud-map-size) + 1px);
    right: calc(var(--hud-safe-right) + 4px);
    z-index: 4;
    display: grid;
    justify-items: center;
    width: calc(var(--hud-map-size) - 8px);
    pointer-events: none;
    text-align: center;
    text-shadow: 1px 1px 0 #000;
  }

  .minimap-players {
    color: rgba(246, 246, 232, .9);
    font: 900 10px/12px var(--font-rounded);
    white-space: nowrap;
  }

  .minimap-version {
    color: rgba(246, 246, 232, .72);
    font: 900 9px/11px var(--font-rounded);
    letter-spacing: .06em;
  }

  .minimap-button {
    position: absolute;
    top: var(--hud-safe-top);
    right: var(--hud-safe-right);
    z-index: 4;
    width: var(--hud-map-size);
    height: var(--hud-map-size);
    margin: 0;
    padding: 0;
    border: 2px solid var(--hud-frame);
    border-radius: var(--hud-radius);
    background: transparent;
    box-shadow: 0 2px 0 rgba(0,0,0,.42);
    color: #fff;
    cursor: pointer;
    pointer-events: auto;
    -webkit-text-stroke: 0;
    text-shadow: none;
  }
  .minimap-button:active { transform: none; }
  .minimap-button:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
  .minimap-help-mark {
    position: absolute;
    top: 7px;
    right: 7px;
    display: grid;
    width: 25px;
    height: 25px;
    place-items: center;
    border: 2px solid rgba(255,255,255,.52);
    border-radius: 50%;
    background: rgba(8,13,10,.32);
    box-shadow: 0 2px 0 rgba(0,0,0,.3);
    color: #fff;
    font: 900 16px/1 var(--font-rounded);
    -webkit-text-stroke: 0;
    text-shadow: 1px 1px 0 #000;
    transition: transform 120ms ease, background 120ms ease;
  }
  .minimap-button:hover .minimap-help-mark,
  .minimap-button:focus-visible .minimap-help-mark { background: rgba(43,91,61,.48); transform: scale(1.08); }
  body:is(.is-dueling, .is-replaying) .minimap-button,
  body:is(.is-dueling, .is-replaying) .minimap-meta,
  body:is(.is-dueling, .is-replaying) .respawn-ad-button,
  body:is(.is-dueling, .is-replaying) .respawn-boost-status { visibility: hidden; pointer-events: none; }

  .respawn-ad-button {
    position: absolute;
    top: calc(var(--hud-safe-top) + var(--hud-map-size) + 27px);
    right: calc(var(--hud-safe-right) + 4px);
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: calc(var(--hud-map-size) - 8px);
    min-height: 42px;
    margin: 0;
    padding: 3px 1px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #ffe36b;
    font: 900 10px/1 var(--font-rounded);
    letter-spacing: .045em;
    filter: drop-shadow(0 0 3px rgba(255, 219, 73, .95)) drop-shadow(0 0 8px rgba(255, 153, 33, .72));
    animation: respawn-ad-glow 1.55s ease-in-out infinite;
    isolation: isolate;
  }

  .respawn-ad-button[hidden] { display: none; }
  .respawn-ad-button:active { transform: translateY(1px) scale(.98); }
  .respawn-ad-button:disabled { cursor: default; }
  .respawn-ad-button[data-state="checking"],
  .respawn-ad-button[data-state="waiting"],
  .respawn-ad-button[data-state="showing"] { opacity: .68; animation: none; }

  .respawn-ad-play {
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    padding-left: 2px;
    border: 2px solid currentColor;
    border-radius: 50%;
    font: 900 10px/1 Arial, sans-serif;
    -webkit-text-stroke: 0;
    text-shadow: 0 0 5px currentColor;
  }

  .respawn-ad-copy { display: grid; justify-items: start; gap: 3px; white-space: nowrap; }
  .respawn-ad-copy strong { font-size: 10px; line-height: 1; }
  .respawn-ad-copy > span { color: #fff; font-size: 7px; line-height: 1; letter-spacing: .09em; }

  .respawn-boost-status {
    position: absolute;
    top: calc(var(--hud-safe-top) + var(--hud-map-size) + 29px);
    right: calc(var(--hud-safe-right) + 4px);
    z-index: 4;
    width: calc(var(--hud-map-size) - 8px);
    color: #72ef58;
    font: 900 9px/1.2 var(--font-rounded);
    letter-spacing: .025em;
    text-align: center;
    text-shadow: 1px 2px 0 #000;
    pointer-events: none;
  }

  .respawn-boost-status[hidden] { display: none; }
  .respawn-boost-status span { font-variant-numeric: tabular-nums; }

  @keyframes respawn-ad-glow {
    0%, 100% { filter: drop-shadow(0 0 2px rgba(255, 219, 73, .72)) drop-shadow(0 0 6px rgba(255, 153, 33, .52)); transform: scale(.98); }
    50% { filter: drop-shadow(0 0 5px rgba(255, 239, 128, 1)) drop-shadow(0 0 12px rgba(255, 153, 33, .9)); transform: scale(1.025); }
  }

  #duelControls {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    display: grid;
    justify-items: start;
    gap: 5px;
    align-self: center;
    pointer-events: auto;
  }

  #duelControls[hidden] { display: none; }

  #duelStatus {
    padding: 5px 8px;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 6px;
    background: rgba(20,24,24,.86);
    color: #edf1ef;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .07em;
    white-space: nowrap;
  }

  #duelControls button {
    margin: 0;
    padding: 7px 11px;
    border-width: 2px;
    border-radius: 7px;
    font-size: 11px;
    max-width: calc(100vw - 160px);
  }

  #duelCountdown {
    position: fixed;
    top: 42%;
    left: 50%;
    z-index: 7;
    transform: translate(-50%, -50%);
    color: #ff4e4e;
    font: 900 clamp(90px, 22vw, 190px)/1 var(--font-rounded);
    text-shadow: var(--text-shadow-large);
    pointer-events: none;
  }

  #duelAcceptBtn { background: linear-gradient(#83cdf2, #3f83bd); }

  #pickupLog {
    position: fixed;
    top: 20%;
    left: 50%;
    bottom: auto;
    z-index: 6;
    display: grid;
    justify-items: center;
    gap: 8px;
    width: min(440px, calc(100vw - 24px));
    transform: translateX(-50%);
    pointer-events: none;
  }

  #itemDropReveal {
    position: fixed;
    inset: 0 0 var(--toolbar-height);
    z-index: 7;
    overflow: hidden;
    pointer-events: none;
  }

  #itemDropReveal:empty { display: none; }

  .item-drop-reveal {
    --item-drop-color: #ffd45c;
    position: absolute;
    top: 84%;
    left: 50%;
    display: grid;
    place-items: center;
    width: min(360px, calc(100vw - 28px));
    color: #fff;
    text-align: center;
    transform: translate(-50%, -50%) translateY(24px) scale(.72);
    animation: item-drop-reveal 3.4s cubic-bezier(.18, .72, .2, 1) forwards;
    will-change: top, opacity, transform;
  }

  .item-drop-art {
    position: relative;
    display: grid;
    place-items: center;
    width: clamp(82px, 22vw, 112px);
    height: clamp(64px, 17vw, 88px);
    -webkit-text-stroke: 0;
    text-shadow: none;
  }

  .item-drop-art::before {
    position: absolute;
    inset: 14%;
    border-radius: 50%;
    background: var(--item-drop-color);
    content: "";
    filter: blur(17px);
    opacity: .52;
    transform: scale(.7);
    animation: item-drop-glow 1.05s ease-in-out infinite alternate;
  }

  .item-drop-sprite {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    filter: drop-shadow(0 0 4px var(--item-drop-color)) drop-shadow(0 0 10px var(--item-drop-color));
    image-rendering: pixelated;
  }

  .item-drop-name {
    color: var(--item-drop-color);
    font: 900 clamp(14px, 4vw, 20px)/1 var(--player-name-font);
    letter-spacing: .035em;
    -webkit-text-stroke: .09em #000;
    paint-order: stroke fill;
    text-shadow: .06em .11em 0 #000;
  }

  .item-drop-stats {
    display: grid;
    gap: 2px;
    margin-top: 5px;
    color: #fff;
    font: 900 clamp(9px, 2.4vw, 12px)/1.2 var(--font-rounded);
    letter-spacing: .02em;
    -webkit-text-stroke: .08em #000;
    paint-order: stroke fill;
    text-shadow: .06em .11em 0 #000;
  }

  @keyframes item-drop-reveal {
    0% { top: 84%; opacity: 0; transform: translate(-50%, -50%) translateY(24px) scale(.72); }
    18% { top: 32%; opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
    28%, 72% { top: 30%; opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { top: 26%; opacity: 0; transform: translate(-50%, -50%) translateY(-12px) scale(.96); }
  }

  @keyframes item-drop-glow {
    from { opacity: .4; transform: scale(.64); }
    to { opacity: .68; transform: scale(1); }
  }

  #topMeta {
    display: flex;
    gap: 8px;
    margin-left: auto;
    color: rgba(245,245,233,.58);
    font-size: 9px;
    letter-spacing: .05em;
    pointer-events: none;
  }

  #latencyStatus[data-quality="good"] { color: #72ef58; }
  #latencyStatus[data-quality="fair"] { color: var(--gold); }
  #latencyStatus[data-quality="poor"] { color: #ff8f86; }

  #playerName {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 3px;
    min-width: 0;
    max-width: none;
    min-height: 12px;
    overflow: hidden;
    color: #fff;
    font-size: 12.5px;
    letter-spacing: .05em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .player-gender-icon { display: inline-block; flex: 0 0 auto; width: 1.12em; height: 1.12em; object-fit: contain; vertical-align: -.16em; filter: drop-shadow(0 1px 0 rgba(0,0,0,.45)); pointer-events: none; user-select: none; }
  .player-hud-name-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .topbar > .card,
  .player-hud-card {
    cursor: pointer;
    pointer-events: auto;
  }

  #chatPanel {
    position: fixed;
    left: 0;
    right: 0;
    top: auto;
    bottom: var(--toolbar-height);
    width: 100vw;
    height: var(--mini-chat-height);
    padding: 3px 6px 5px;
    border-top: 0;
    border-bottom: 0;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    cursor: default;
    font-family: var(--chat-font);
    pointer-events: auto;
    z-index: 6;
  }

  .hud-gem-wallet { position: fixed; top: calc(var(--hud-safe-top) + var(--player-hud-height) + 6px); left: var(--hud-safe-left); z-index: 5; display: flex; align-items: center; gap: 4px; min-height: 28px; padding: 3px 8px 3px 5px; border: 2px solid var(--hud-frame); border-radius: var(--hud-radius-small); background: var(--hud-surface); box-shadow: 0 2px 0 rgba(0,0,0,.35); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; line-height: 1; pointer-events: none; }
  .hud-gem-icon { display: block; width: 20px; height: 20px; object-fit: contain; }
  .hud-gem-balance { color: #fff; font-size: 11px; font-weight: 900; text-shadow: 0 1px #071c29; }

  .daily-gem-bonus { position: fixed; inset: 0 0 var(--toolbar-height); z-index: 18; display: grid; place-items: center; padding: 18px; background: rgba(8, 7, 10, .78); pointer-events: auto; }
  .daily-gem-bonus[hidden] { display: none; }
  .daily-gem-bonus-card { position: relative; display: grid; justify-items: center; gap: 7px; width: min(330px, calc(100vw - 36px)); padding: 19px 22px 22px; overflow: hidden; border: 2px solid #e89abd; border-radius: 13px; background: radial-gradient(circle at 50% 32%, #352a31, #252125 72%); box-shadow: 0 12px 0 rgba(0,0,0,.42), 0 0 30px rgba(241,130,187,.2); color: #fff; text-align: center; animation: daily-gem-card-enter .34s cubic-bezier(.2,.9,.24,1.24); }
  .daily-gem-bonus-kicker { color: #ffc2df; font-size: 10px; font-weight: 900; letter-spacing: .18em; }
  .daily-gem-bonus-art { position: relative; display: grid; width: 112px; height: 112px; place-items: center; }
  .daily-gem-bonus-art::before { position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(255,190,223,.24) 0 7deg, transparent 7deg 22deg); content: ""; animation: daily-gem-rays 12s linear infinite; }
  .daily-gem-bonus-art img { position: relative; display: block; width: 70px; height: 70px; object-fit: contain; animation: daily-gem-float 1.6s ease-in-out infinite alternate; }
  .daily-gem-bonus-card h2 { margin: -3px 0 0; color: #fff; font-size: 29px; line-height: 1; letter-spacing: .04em; }
  .daily-gem-bonus-card p { margin: 0 0 6px; color: #d9cbd2; font-size: 9px; letter-spacing: .12em; }
  .daily-gem-claim-button { justify-self: center; min-width: 164px; min-height: 44px; margin: 0; border: 2px solid #ffd1e7; border-radius: 8px; background: linear-gradient(#e971aa, #a33f78); box-shadow: 0 4px 0 #55233f; color: #fff; font-size: 13px; letter-spacing: .08em; }
  .daily-gem-claim-button:hover:not(:disabled), .daily-gem-claim-button:focus-visible { border-color: #fff; background: linear-gradient(#f58abd, #bd4a8b); outline: 0; }
  .daily-gem-claim-button:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 #55233f; }
  .daily-gem-bonus.is-claimed .daily-gem-bonus-art img { animation: daily-gem-claimed .72s cubic-bezier(.2,.9,.24,1.3); }
  .balance-apology-gift { z-index: 19; }
  .daily-gem-bonus-card .balance-apology-gift-copy { max-width: 265px; font-size: 10px; line-height: 1.55; letter-spacing: .08em; }

  @keyframes daily-gem-card-enter { from { opacity: 0; transform: scale(.76) translateY(18px); } to { opacity: 1; transform: scale(1) translateY(0); } }
  @keyframes daily-gem-rays { to { transform: rotate(360deg); } }
  @keyframes daily-gem-float { to { transform: translateY(-6px) scale(1.04); } }
  @keyframes daily-gem-claimed { 45% { transform: scale(1.42) rotate(-8deg); } 100% { transform: scale(1) rotate(0); } }

  .chat-message-actions {
    --chat-sheet-drag-y: 0px;
    position: fixed;
    inset: 0;
    z-index: 17;
    display: grid;
    justify-items: center;
    pointer-events: none;
  }
  .chat-message-actions[hidden] { display: none; }
  .chat-message-actions.is-open { pointer-events: auto; }
  .chat-message-actions-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: rgba(0,0,0,.38); opacity: 0; transition: opacity .24s ease; -webkit-text-stroke: 0; text-shadow: none; }
  .chat-message-actions.is-open .chat-message-actions-backdrop { opacity: 1; }
  .chat-message-action-sheet {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-rows: 28px auto minmax(0, 1fr);
    width: min(100%, 520px);
    height: clamp(286px, 40dvh, 430px);
    max-height: calc(100dvh - max(12px, env(safe-area-inset-top)));
    margin: 0 auto;
    padding: 0 max(14px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.13);
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
    background: linear-gradient(180deg, #302e2b, #242321 78%);
    box-shadow: 0 -12px 30px rgba(0,0,0,.38);
    color: #f7f4ed;
    contain: layout paint;
    transform: translate3d(0, 100%, 0);
    transition: transform .28s cubic-bezier(.2,.82,.24,1);
    will-change: transform;
  }
  .chat-message-actions.is-open .chat-message-action-sheet { transform: translate3d(0, var(--chat-sheet-drag-y), 0); }
  .chat-message-actions.is-dragging .chat-message-actions-backdrop,
  .chat-message-actions.is-dragging .chat-message-action-sheet { transition: none; }
  .chat-message-action-drag { display: grid; place-items: center; margin: 0 -14px; cursor: grab; touch-action: none; }
  .chat-message-actions.is-dragging .chat-message-action-drag { cursor: grabbing; }
  .chat-message-action-handle { display: block; width: 42px; height: 5px; border-radius: 999px; background: rgba(255,255,255,.34); box-shadow: none; }
  .chat-message-action-header { min-width: 0; padding: 0 4px 8px; border-bottom: 1px solid rgba(255,255,255,.09); }
  .chat-message-action-header h2 { margin: 0; color: #fff; font-size: 16px; line-height: 1.2; text-transform: none; }
  .chat-message-action-header p { margin: 3px 0 0; overflow: hidden; color: #c8c4bc; font-size: 11px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; -webkit-text-stroke: 0; text-shadow: none; }
  .chat-message-action-menu { display: grid; align-content: start; padding: 8px 0; overflow: auto; touch-action: pan-y; }
  .chat-message-action-menu[hidden],
  .chat-message-action-button[hidden] { display: none; }
  .chat-message-action-button { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; width: 100%; min-height: 48px; margin: 0; padding: 4px 10px; border: 0; border-bottom: 1px solid rgba(255,255,255,.09); border-radius: 0; background: transparent; color: #f7f4ed; font-size: 14px; line-height: 1; text-align: left; text-transform: none; box-shadow: none; }
  .chat-message-action-button:hover,
  .chat-message-action-button:focus-visible { background: rgba(255,255,255,.07); outline: 0; }
  .chat-message-action-button > span { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 7px; background: rgba(255,255,255,.1); color: #ddd9d1; font-size: 17px; -webkit-text-stroke: 0; text-shadow: none; }
  .chat-message-action-button > .chat-message-watch-replay-icon { background: center / contain no-repeat url("duel-replay-play-medallion-v1.png"); mix-blend-mode: screen; }
  .chat-message-action-button.is-danger { color: #ff9a9a; }
  .chat-message-action-button.is-danger > span { background: rgba(201,69,69,.18); color: #ff9a9a; }
  .chat-message-report-form { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; padding: 8px 0 0; }
  .chat-message-report-form[hidden] { display: none; }
  .chat-message-report-form fieldset { min-width: 0; min-height: 0; margin: 0; padding: 0 2px; overflow: hidden auto; border: 0; touch-action: pan-y; }
  .chat-message-report-form legend { width: 100%; margin: 0 0 7px; padding: 0; color: #d7d2ca; font-size: 11px; line-height: 1.25; }
  .chat-message-report-reasons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .chat-message-report-reason { min-height: 40px; margin: 0; padding: 5px 7px; border: 1px solid rgba(255,255,255,.14); border-radius: 7px; background: rgba(255,255,255,.055); color: #eeeae2; font-size: 11px; line-height: 1.15; text-transform: none; box-shadow: none; }
  .chat-message-report-reason.is-selected { border-color: #d9b8ff; background: rgba(170,110,224,.2); color: #f0dfff; }
  .chat-message-report-actions { display: grid; grid-template-columns: 1fr 1.35fr; gap: 7px; padding: 8px 2px 0; }
  .chat-message-report-actions button { min-height: 44px; margin: 0; border-radius: 7px; font-size: 11px; text-transform: none; }
  .chat-message-report-actions .danger { border-color: #67272b; background: linear-gradient(#c85050, #842f34); color: #fff; }
  .chat-message-report-actions .danger:disabled { opacity: .45; }

  #chatPanel[hidden] { display: none; }
  #chatPanel:not(.is-large) { height: var(--mini-chat-height); min-height: var(--mini-chat-height); max-height: var(--mini-chat-height); border-radius: 0; background: linear-gradient(180deg, rgba(61, 63, 64, .62), rgba(29, 31, 32, .74)); backdrop-filter: none; cursor: pointer; }
  #chatPanel:not(.is-large) #topMeta { color: #fff; }
  .chat-header,
  #chatForm {
    display: flex;
    align-items: center;
  }

  .chat-header {
    min-height: 23px;
    justify-content: flex-start;
    gap: 8px;
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .08em;
    cursor: pointer;
  }

  .chat-size-toggle {
    position: relative;
    flex: 0 0 24px;
    width: 24px;
    height: 22px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
  }

  .chat-size-icon {
    position: absolute;
    inset: 3px;
    -webkit-text-stroke: 0;
    text-shadow: none;
  }

  .chat-size-icon::before { position: absolute; inset: 2px 1px; background: #fff; content: ""; clip-path: polygon(0 0, 100% 50%, 0 100%, 22% 50%); filter: drop-shadow(1px 1px 0 #101914); transform: rotate(-45deg); }
  #chatSizeToggle[aria-expanded="true"] .chat-size-icon::before { transform: rotate(135deg); }

  #chatForm button {
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    padding: 4px 7px;
    border-width: 1px;
    border-radius: 5px;
    font-size: 11px;
    line-height: 1;
  }

  #chatMessages {
    display: grid;
    align-content: safe end;
    gap: 3px;
    min-height: 38px;
    max-height: 70px;
    margin: 5px 0;
    overflow: hidden;
    font-size: 10px;
    line-height: 1.2;
  }

  #chatPanel.is-large #chatMessages {
    grid-row: 1;
    display: flex;
    flex-direction: column;
    row-gap: 0;
    min-height: 0;
    height: auto;
    max-height: none;
    margin: 8px 0;
    padding: 4px;
    overflow: hidden auto;
    align-self: stretch;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  #chatPanel.is-large #chatMessages::before { flex: 0 0 auto; margin-top: auto; content: ""; }
  #chatPanel.is-large #chatMessages::-webkit-scrollbar { display: none; width: 0; height: 0; }
  #chatPanel.is-large {
    inset: 0 0 var(--toolbar-height);
    z-index: 8;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    row-gap: 6px;
    width: auto;
    height: auto;
    padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) 0 max(8px, env(safe-area-inset-left));
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: radial-gradient(ellipse at 50% 38%, #2e2c29, #1c1b19 88%);
    box-shadow: none;
    backdrop-filter: none;
  }
  #chatPanel.is-large .chat-header { display: none; }
  #chatPanel.is-large .chat-size-toggle { width: 44px; height: 44px; flex-basis: 44px; }
  #chatPanel.is-large .chat-size-icon { inset: 12px; }
  #chatPanel.is-large .chat-line { flex: 0 0 auto; grid-template-columns: 66px minmax(0, 1fr); grid-template-rows: auto auto; width: 100%; min-height: 93px; padding: 7px 0 0; row-gap: 6px; column-gap: 9px; align-self: start; }
  #chatPanel.is-large .chat-profile-icon { grid-column: 1; grid-row: 2; width: 66px; height: 66px; border-radius: 6px; }
  #chatPanel.is-large .chat-message-content { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  #chatPanel.is-large .chat-name { font-size: 15px; }
  #chatPanel.is-large .chat-power-icon { width: 18px; height: 18px; }
  #chatPanel.is-large .chat-time { grid-column: 1 / -1; grid-row: 1; justify-self: center; font-size: 11px; text-align: center; }
  #chatPanel.is-large .chat-text { display: block; align-self: start; width: fit-content; max-width: calc(100% - 50px); min-width: 0; min-height: 29px; height: auto; margin: 0 0 10px; padding: 6px 12px; overflow-wrap: anywhere; font-size: 15px; line-height: 1.4; }
  #chatPanel.is-large .chat-text.is-actionable { cursor: pointer; }
  #chatPanel.is-large .chat-text.is-actionable:focus-visible { outline: 2px solid rgba(217,184,255,.9); outline-offset: 2px; }
  #chatPanel.is-large #chatForm { grid-row: 2; display: grid; grid-template-columns: minmax(0, 1fr) 53px; grid-template-rows: max-content max-content max-content; grid-template-areas: "reply reply" "input send" "back back"; align-content: start; align-items: start; gap: 5px; padding: 0 0 var(--window-back-bottom-gap); }
  #chatPanel.is-large .chat-reply-composer { grid-area: reply; }
  #chatPanel.is-large #chatInput { grid-area: input; width: 100%; }
  #chatPanel.is-large #chatSendBtn { grid-area: send; }
  #chatPanel.is-large #chatBackBtn { grid-area: back; justify-self: center; width: min(150px, 44vw); height: 44px; min-height: 44px; }
  #chatPanel:not(.is-large) #chatForm { display: none; }
  #chatPanel:not(.is-large) .chat-header { display: none; }
  #chatPanel:not(.is-large) #topMeta { display: block; margin-left: auto; color: #fff; font-size: 8px; }
  #chatPanel:not(.is-large) #version { display: none; }
  #chatPanel:not(.is-large) .chat-size-toggle { margin-left: 0; }
  #chatPanel:not(.is-large) #chatMessages { display: grid; align-content: end; height: 39px; min-height: 39px; max-height: 39px; padding: 0 3px 0 43px; background: 2px center / 38px 38px no-repeat url("icons/Icon_Misc_ETC_Chat01.png"); }
  #chatPanel:not(.is-large) .chat-line { display: flex; align-items: center; gap: 5px; min-width: 0; min-height: 18px; }
  #chatPanel:not(.is-large) .chat-message-content { display: flex; flex: 1 1 0; align-items: center; gap: 5px; min-width: 0; }
  #chatPanel:not(.is-large) .chat-time,
  #chatPanel:not(.is-large) .chat-profile-icon { display: none; }
  #chatPanel:not(.is-large) .chat-name { flex: 0 0 auto; max-width: none; overflow: visible; font-size: 10px; text-overflow: clip; }
  #chatPanel:not(.is-large) .chat-name::after { content: ":"; }
  #chatPanel:not(.is-large) .chat-text,
  #chatPanel:not(.is-large) .chat-line.has-replay .chat-text { flex: 1 1 0; grid-column: auto; grid-row: auto; min-width: 0; min-height: 0; padding: 0; overflow: hidden; border-radius: 0; background: transparent; font-size: 10px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
  #chatPanel:not(.is-large) .chat-reply-preview { display: none; }
  #chatPanel:not(.is-large) .chat-message-body { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #chatPanel:not(.is-large) .chat-replay { display: none; }
  .chat-line { display: grid; grid-template-columns: 29px minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 2px 6px; align-items: start; overflow-wrap: anywhere; }
  .chat-message-content { min-width: 0; }
  .chat-profile-icon { grid-column: 1; grid-row: 1 / 3; display: block; width: 29px; height: 29px; margin: 0; border: 1px solid #000; border-radius: 4px; background-color: #fff; background-repeat: no-repeat; background-size: var(--profile-portrait-sheet-size) var(--profile-portrait-sheet-size); background-clip: padding-box; cursor: pointer; -webkit-text-stroke: 0; text-shadow: none; }
  body.is-loading-game-assets .profile-icon,
  body.is-loading-game-assets .profile-icon-choice,
  body.is-loading-game-assets .chat-profile-icon { background-image: url("../../assets/wildstat/profile-portraits-grid-v2.png"); }
  .chat-profile-icon:focus-visible, canvas.leaderboard-profile-icon:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
  .chat-time { grid-column: 3; grid-row: 1; color: var(--muted); font-size: 10px; line-height: 1.25; text-align: right; white-space: nowrap; }
  .chat-name { grid-column: 2; grid-row: 1; display: flex; align-items: center; gap: 4px; min-width: 0; margin: 0; padding: 0; overflow: hidden; border: 0; border-radius: 0; background: transparent; color: var(--gold); font-family: var(--player-name-font); font-size: 11.25px; font-weight: 900; line-height: 1.25; text-align: left; white-space: nowrap; cursor: default; }
  .chat-name-core { display: inline-flex; align-items: center; gap: 2px; min-width: 0; overflow: hidden; white-space: nowrap; }
  .chat-name-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .chat-power { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 2px; color: #fff; font-variant-numeric: tabular-nums; }
  .chat-power-icon { width: 13px; height: 13px; }
  .chat-text { grid-column: 2 / 4; grid-row: 2; min-height: 19px; padding: 3px 11px; border-radius: 5px; background: rgba(255,255,255,.09); color: var(--text); font-family: var(--player-name-font); font-size: 11.25px; font-weight: 900; line-height: 1.5; }
  .chat-message-body { display: block; min-width: 0; white-space: pre-wrap; }
  .chat-reply-preview { display: block; min-width: 0; margin: 0 0 3px; overflow: hidden; color: rgba(235,232,226,.58); font-size: .82em; font-weight: 800; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; -webkit-text-stroke: 0; text-shadow: none; }
  .chat-text.is-moderated .chat-message-body { font-style: italic; }
  .chat-line.has-replay .chat-text { grid-column: 2 / 4; }
  .chat-line.has-replay { cursor: pointer; }
  #chatForm { gap: 5px; }

  .chat-reply-composer { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; min-width: 0; min-height: 44px; overflow: hidden; border-radius: 6px; background: rgba(255,255,255,.065); }
  .chat-reply-composer[hidden] { display: none; }
  .chat-reply-composer-copy { display: grid; min-width: 0; gap: 2px; padding: 5px 9px; overflow: hidden; border-left: 3px solid rgba(201,166,255,.72); }
  .chat-reply-composer-copy strong { overflow: hidden; color: rgba(237,220,255,.78); font-size: 10px; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
  .chat-reply-composer-copy span { overflow: hidden; color: rgba(235,232,226,.52); font-size: 10px; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; -webkit-text-stroke: 0; text-shadow: none; }
  #chatReplyCancelBtn { width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 0; background: transparent; color: rgba(255,255,255,.72); font-size: 19px; box-shadow: none; }

  #chatSendBtn { flex: 0 0 53px; width: 53px; }
  #chatBackBtn[hidden] { display: none; }

  .window-back-footer { display: grid; flex: 0 0 auto; place-items: center; min-height: 60px; padding: 7px max(10px, env(safe-area-inset-right)) var(--window-back-bottom-gap) max(10px, env(safe-area-inset-left)); }
  .settings-panel > .window-back-footer { margin-top: auto; }
  #chatForm button.window-back-button,
  .window-back-button { display: flex; align-items: center; justify-content: center; width: min(150px, 44vw); min-width: 0; height: 44px; min-height: 44px; margin: 0 auto; padding: 0 8px 2px; border: 2px solid #351010; border-radius: 8px; background: linear-gradient(#c85050, #842f34); box-shadow: 0 3px 0 #351519; color: #fff; font: 900 11px/1 var(--font-rounded); -webkit-text-stroke: var(--text-outline-width) #000; paint-order: stroke fill; text-shadow: var(--text-shadow); }

  #chatInput,
  #profileNameInput {
    min-width: 0;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 5px;
    background: rgba(0,0,0,.28);
    color: var(--text);
    font: 12px var(--font-rounded);
    padding: 6px 7px;
  }

  #chatInput {
    flex: 1;
    height: 44px;
    min-height: 44px;
    max-height: 88px;
    resize: none;
    font-family: var(--chat-font);
    line-height: 18px;
    padding: 12px 8px;
    cursor: text;
  }

  #chatForm button { cursor: pointer; }
  #chatForm button:disabled { min-width: 53px; opacity: .72; cursor: wait; }
  .pickup {
    justify-self: center;
    max-width: 100%;
    padding: 9px 13px;
    border: 2px solid rgba(2, 8, 5, .96);
    border-radius: 13px;
    background: linear-gradient(180deg, rgba(14, 34, 23, .97), rgba(6, 20, 13, .97));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .08),
      0 4px 0 rgba(2, 8, 5, .82),
      0 9px 18px rgba(0, 0, 0, .30);
    color: #fff;
    font: 900 clamp(14px, 4vw, 18px)/1 var(--font-rounded);
    animation: floatout 2.3s ease forwards;
    isolation: isolate;
    will-change: opacity, transform;
  }

  .stat-reward-toast {
    --stat-reward-accent: var(--green);
    display: grid;
    grid-template-columns: 21px minmax(0, auto) auto 14px;
    align-items: center;
    column-gap: 6px;
    width: max-content;
    min-height: 38px;
    padding: 6px 9px;
    border-color: var(--hud-frame);
    border-radius: var(--hud-radius);
    background: var(--hud-surface);
    box-shadow: 0 2px 0 rgba(0,0,0,.42);
    font-size: clamp(10px, 2.8vw, 13px);
  }

  .stat-reward-icon {
    display: grid;
    place-items: center;
    width: 21px;
    min-width: 21px;
    color: var(--stat-reward-accent);
    font: 900 17px/1 "Apple Color Emoji", "Segoe UI Emoji", var(--font-rounded);
    -webkit-text-stroke: 0;
    text-shadow: 0 2px 2px rgba(0, 0, 0, .82);
  }

  .stat-reward-label { color: #fff; white-space: nowrap; }
  .stat-reward-value { color: var(--green); white-space: nowrap; }

  .stat-reward-arrow {
    position: relative;
    width: 14px;
    height: 20px;
    filter: drop-shadow(0 2px 0 #143516);
    -webkit-text-stroke: 0;
    text-shadow: none;
  }

  .stat-reward-arrow::before {
    position: absolute;
    left: 5px;
    bottom: 1px;
    width: 5px;
    height: 12px;
    border-radius: 1px;
    background: var(--green);
    content: "";
  }

  .stat-reward-arrow::after {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 0;
    height: 0;
    border-right: 6px solid transparent;
    border-bottom: 7px solid var(--green);
    border-left: 6px solid transparent;
    content: "";
  }

  @keyframes floatout {
    0% { opacity: 0; transform: translateY(10px) scale(.95); }
    12%, 72% { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-14px) scale(.98); }
  }

  #start, #gameOver {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    background: transparent;
    z-index: 5;
  }

  #start,
  #gameUpdateGate {
    top: -2px;
    right: 0;
    bottom: auto;
    left: 0;
    width: 100vw;
    height: calc(100vh + 30px);
    height: calc(100dvh + 30px);
    isolation: isolate;
    background-color: #000;
    /* The versioned artwork URL from index.html resolves relative to this stylesheet. */
    background-image:
      linear-gradient(180deg, rgba(4, 12, 6, .06), rgba(4, 12, 6, .095)),
      var(--signin-artwork, none);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  html.signin-auth-return #start,
  html.signin-auth-return #gameUpdateGate { background-image: none; }

  #start::before,
  #gameUpdateGate::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: #000;
    content: "";
    opacity: 1;
    pointer-events: none;
    transition: opacity 2s ease;
  }

  html.signin-artwork-ready #start::before,
  html.signin-artwork-ready #gameUpdateGate::before { opacity: 0; }

  @media (prefers-reduced-motion: reduce) {
    #start::before, #gameUpdateGate::before { transition: none; }
  }

  .signin-mute-button {
    position: fixed;
    top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    z-index: 4;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .58);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(28, 27, 20, .76), rgba(28, 24, 20, .76));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 4px 12px rgba(0, 0, 0, .34);
    color: #fff;
    -webkit-text-stroke: 0;
    text-shadow: none;
    cursor: pointer;
    transition: border-color 120ms ease, box-shadow 120ms ease, color 120ms ease, filter 120ms ease, transform 120ms ease;
  }

  .signin-mute-button svg { display: block; width: 26px; height: 26px; overflow: visible; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .5)); pointer-events: none; }
  .signin-sound-speaker { fill: currentColor; }
  .signin-sound-waves, .signin-sound-muted { fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; }
  .signin-sound-muted { display: none; }
  .signin-mute-button:hover { border-color: rgba(255, 255, 255, .5); filter: brightness(1.12); }
  .signin-mute-button:focus-visible { outline: 3px solid rgba(255, 255, 255, .92); outline-offset: 3px; }
  .signin-mute-button[aria-pressed="true"] { border-color: rgba(255, 255, 255, .2); background: linear-gradient(180deg, rgba(31, 37, 33, .9), rgba(7, 11, 8, .9)); color: #bdc6bf; }
  .signin-mute-button[aria-pressed="true"] .signin-sound-waves { display: none; }
  .signin-mute-button[aria-pressed="true"] .signin-sound-muted { display: block; }
  .signin-mute-button:active { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 2px 6px rgba(0, 0, 0, .3); transform: translateY(1px); }

  .signin-install-button {
    position: fixed;
    top: max(12px, env(safe-area-inset-top));
    left: max(12px, env(safe-area-inset-left));
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 7px;
    width: auto;
    min-width: 0;
    min-height: 48px;
    margin: 0;
    padding: 0 13px 0 10px;
    border: 1px solid rgba(255, 255, 255, .58);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(28, 27, 20, .82), rgba(28, 24, 20, .82));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 4px 12px rgba(0, 0, 0, .34);
    color: #fff;
    font: 900 10px/1 var(--font-rounded);
    letter-spacing: .06em;
    -webkit-text-stroke: 0;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .72);
    cursor: pointer;
    transition: border-color 120ms ease, filter 120ms ease, transform 120ms ease;
  }

  .signin-install-button::before {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border: 2px solid currentColor;
    border-radius: 5px;
    content: "+";
    font: 900 17px/1 Arial, sans-serif;
  }

  .signin-install-button:hover { border-color: #fff; filter: brightness(1.12); }
  .signin-install-button:focus-visible { outline: 3px solid rgba(255, 255, 255, .92); outline-offset: 3px; }
  .signin-install-button:active { transform: translateY(1px); }
  .signin-install-button:disabled { opacity: .62; cursor: wait; }
  .signin-install-button[hidden], .signin-install-hint[hidden] { display: none; }

  .signin-install-hint {
    position: fixed;
    top: calc(max(12px, env(safe-area-inset-top)) + 56px);
    left: max(12px, env(safe-area-inset-left));
    z-index: 4;
    width: min(270px, calc(100vw - 24px));
    margin: 0;
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: 7px;
    background: rgba(7, 12, 8, .9);
    color: #fff;
    font: 800 10px/1.4 var(--font-rounded);
    letter-spacing: .035em;
    text-align: left;
    text-shadow: 0 1px 0 #000;
  }

  #accountChoicePanel[hidden] ~ .signin-install-button,
  #accountChoicePanel[hidden] ~ .signin-install-hint { display: none; }

  #gameUpdateGate {
    position: fixed;
    top: -2px;
    right: 0;
    bottom: auto;
    left: 0;
    width: 100vw;
    height: calc(100vh + 30px);
    height: calc(100dvh + 30px);
    z-index: 30;
    display: grid;
    place-items: center;
  }

  #gameUpdateGate[hidden] { display: none; }

  #reconnectOverlay {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, .62);
    color: #fff;
    font: 900 clamp(18px, 4vw, 28px) var(--font-rounded);
    letter-spacing: .08em;
    pointer-events: auto;
  }

  #reconnectOverlay[hidden] { display: none; }
  .reconnect-content {
    display: grid;
    width: min(360px, calc(100vw - 40px));
    justify-items: center;
    gap: 12px;
    text-align: center;
  }
  #reconnectDetail {
    margin: 0;
    color: rgba(255, 255, 255, .78);
    font: 700 13px/1.35 var(--font-rounded);
    letter-spacing: .02em;
  }
  #reconnectRetryBtn,
  #connectionRetryBtn {
    width: min(220px, 100%);
  }
  #reconnectRetryBtn { margin: 4px 0 0; }
  #connectionRetryBtn { margin: 12px auto 0; }
  #reconnectRetryBtn[hidden],
  #connectionRetryBtn[hidden] { display: none; }
  .reconnect-ellipsis::after { content: "..."; display: inline-block; width: 0; overflow: hidden; vertical-align: bottom; animation: reconnect-ellipsis 1s steps(4, end) infinite; }

  @keyframes reconnect-ellipsis { to { width: 1.15em; } }

  #browserRewardedAd {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 12px;
    background: #000;
    color: #fff;
    pointer-events: auto;
  }

  #browserRewardedAd[hidden] { display: none; }
  .browser-rewarded-ad-label { font-size: 15px; font-weight: 900; letter-spacing: .22em; }
  .browser-rewarded-ad-timer { min-width: 4ch; font: 900 clamp(38px, 12vw, 76px)/1 var(--font-rounded); font-variant-numeric: tabular-nums; text-align: center; }

  @media (prefers-reduced-motion: reduce) {
    .respawn-ad-button,
    #accountChoicePanel .wildstat-wordmark-title,
    .daily-gem-bonus-card,
    .daily-gem-bonus-art::before,
    .daily-gem-bonus-art img,
    .daily-gem-bonus.is-claimed .daily-gem-bonus-art img { animation: none; }
    .chat-message-actions-backdrop,
    .chat-message-action-sheet { transition: none; }
  }

  .modal.game-update-modal { width: min(430px, calc(100vw - 28px)); }
  .game-update-modal h2 { margin: 8px 0 3px; color: var(--gold); font-size: clamp(22px, 6vw, 30px); }
  .game-update-modal p { font-size: 10px; letter-spacing: .07em; }
  .update-wait-track { height: 10px; margin: 14px 0 10px; overflow: hidden; border: 2px solid #080a08; border-radius: 6px; background: #101914; }
  .update-wait-track span { display: block; width: 34%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #34be39, #86f45d); animation: update-wait 1.25s ease-in-out infinite; }

  @keyframes update-wait {
    from { transform: translateX(-110%); }
    to { transform: translateX(300%); }
  }

  #gameOver {
    z-index: 80;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: transparent;
    color: #f02d3d;
    pointer-events: auto;
    opacity: 0;
    transition: opacity .24s ease-out;
  }

  #gameOver.is-visible { opacity: 1; }

  #gameOver[hidden] { display: none; }

  .death-screen {
    display: grid;
    place-items: center;
    gap: 16px;
    width: 100%;
    padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
    color: #f02d3d;
    text-align: center;
    transform: translateY(-25vh);
    transform: translateY(-25dvh);
  }

  .death-screen h1 {
    margin: 0;
    color: #f02d3d;
    font-size: clamp(34px, 9.8vw, 78px);
    line-height: .9;
    letter-spacing: -.03em;
    text-shadow: none;
    -webkit-text-stroke: .09em #000;
    paint-order: stroke fill;
  }

  .death-countdown {
    margin: 0;
    color: #fff;
    font-size: clamp(12px, 3.5vw, 20px);
    font-variant-numeric: tabular-nums;
    letter-spacing: .06em;
    text-shadow: none;
  }

  #connectionPanel[hidden], #accountChoicePanel[hidden], #legalGatePanel[hidden], #newPlayerPanel[hidden] { display: none; }

  .modal.connection-modal,
  .modal.account-choice-modal,
  .modal.legal-gate-modal {
    position: fixed;
    top: 50vh;
    top: 50dvh;
    left: 50%;
    width: min(430px, calc(100vw - 36px));
    height: min(586px, calc(100vh - 24px));
    height: min(586px, calc(100svh - 24px));
    max-height: calc(100svh - 24px);
    margin: 0;
    overflow-y: auto;
    transform: translate(-50%, -50%);
  }

  .modal.account-choice-modal {
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: none;
    scrollbar-width: none;
  }
  .modal.account-choice-modal::-webkit-scrollbar { display: none; width: 0; height: 0; }

  .connection-modal {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    overscroll-behavior: none;
    text-align: center;
  }

  .legal-gate-modal {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px clamp(18px, 6vw, 34px);
    overflow-y: auto;
    text-align: center;
  }

  .legal-wordmark-title {
    width: min(260px, 78%);
    margin-bottom: 8px;
  }

  .legal-gate-modal h2 {
    margin: 0;
    color: #f3f6f2;
    font-size: clamp(23px, 6vw, 30px);
    line-height: 1.05;
  }

  .legal-gate-modal #legalGateIntro {
    margin: 7px 0 2px;
    color: #aeb9b0;
    font-size: 12px;
    font-weight: 800;
  }

  .legal-age-output {
    min-width: 3ch;
    margin: 8px 0 10px;
    color: #fff;
    font: 900 clamp(34px, 10vw, 48px)/1 var(--font-rounded);
    font-variant-numeric: tabular-nums;
    -webkit-text-stroke: var(--text-outline-width) #000;
    text-shadow: var(--text-shadow);
  }

  .legal-age-control { width: min(300px, 100%); }

  #legalAgeSlider {
    width: 100%;
    height: 26px;
    margin: 0;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    cursor: pointer;
  }

  #legalAgeSlider::-webkit-slider-runnable-track {
    height: 5px;
    border-radius: 999px;
    background: rgba(220, 230, 222, .24);
  }

  #legalAgeSlider::-moz-range-track {
    height: 5px;
    border: 0;
    border-radius: 999px;
    background: rgba(220, 230, 222, .24);
  }

  #legalAgeSlider::-webkit-slider-thumb {
    width: 24px;
    height: 24px;
    margin-top: -9.5px;
    border: 3px solid #071008;
    border-radius: 50%;
    appearance: none;
    -webkit-appearance: none;
    background: #7aec60;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .38);
  }

  #legalAgeSlider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border: 3px solid #071008;
    border-radius: 50%;
    background: #7aec60;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .38);
  }

  #legalAgeSlider.is-unset::-webkit-slider-thumb { background: #78827a; }
  #legalAgeSlider.is-unset::-moz-range-thumb { background: #78827a; }
  #legalAgeSlider:focus-visible { outline: none; }
  #legalAgeSlider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px #fff, 0 2px 8px rgba(0, 0, 0, .38); }
  #legalAgeSlider:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px #fff, 0 2px 8px rgba(0, 0, 0, .38); }

  .legal-age-limits {
    display: flex;
    justify-content: space-between;
    margin-top: -2px;
    color: #77827a;
    font-size: 9px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
  }

  .legal-agreement {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    width: min(330px, 100%);
    margin: 22px auto 0;
    color: #c9d1ca;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    text-align: left;
  }

  .legal-agreement input {
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: #68df4f;
  }

  .legal-agreement a { color: #9af080; text-underline-offset: 2px; }
  .legal-agreement:has(input:disabled) { opacity: .48; }

  #legalContinueBtn {
    width: min(260px, 100%);
    margin-top: 20px;
  }

  .legal-gate-status {
    min-height: 1.4em;
    margin: 9px 0 0;
    color: #89958c;
    font-size: 9px;
    font-weight: 800;
    line-height: 1.4;
  }

  .legal-gate-status.is-blocked { color: #ff9b91; }

  .setting-legal {
    margin: 6px 0 2px;
    text-align: center;
  }

  .setting-legal a {
    color: var(--muted);
    font-size: 9px;
    font-weight: 800;
    text-underline-offset: 2px;
  }

  .account-choice-modal.is-signing-in #signInFromStartBtn,
  .account-choice-modal.is-signing-in #continueGuestBtn {
    visibility: hidden;
    pointer-events: none;
  }

  .signin-version {
    position: fixed;
    z-index: 3;
    left: 50%;
    bottom: 0;
    display: block;
    width: auto;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 15px 40px;
    border: 0;
    border-radius: 9px 9px 0 0;
    background: rgba(7, 12, 8, .58);
    box-shadow: none;
    color: #aebbb0;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .18em;
    -webkit-text-stroke: 0;
    text-shadow: 0 -1px 0px rgba(20, 20, 20, .92);
    cursor: pointer;
    transform: translateX(-50%);
    transition: color 120ms ease, background-color 120ms ease;
  }

  #accountChoicePanel[hidden] ~ .signin-update-notice,
  #accountChoicePanel[hidden] ~ .signin-version { display: none; }
  .signin-version:hover { color: #e8eee9; background: rgba(7, 12, 8, .78); }
  .signin-version:focus-visible { outline: 2px solid rgba(255, 255, 255, .9); outline-offset: -2px; }
  .signin-version:active { transform: translateX(-50%); }
  .signin-version[aria-expanded="true"] { color: #fff; background: rgba(7, 12, 8, .9); }

  .wildstat-wordmark-title {
    width: min(390px, 100%);
    margin: 0 auto 10px;
    -webkit-text-stroke: 0;
    text-shadow: none;
  }

  .wildstat-wordmark-frame {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 1;
  }

  .wildstat-wordmark-frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  #accountChoicePanel .wildstat-wordmark-title {
    width: min(390px, calc(100vw - 36px));
    max-width: none;
    margin-right: 0;
    margin-left: calc((100% - min(390px, calc(100vw - 36px))) / 2);
    animation: signin-logo-float 3.2s ease-in-out infinite;
    opacity: 1;
  }

  @keyframes signin-logo-float {
    0%, 100% { transform: translateY(calc(-10% + 8px)); }
    50% { transform: translateY(-10%); }
  }

  .welcome-wordmark-title {
    display: grid;
    gap: 6px;
  }

  .welcome-wordmark-prefix {
    color: #f5f5e9;
    font-size: clamp(16px, 4vw, 24px);
    line-height: 1;
    -webkit-text-stroke: var(--text-outline-width) #000;
    text-shadow: var(--text-shadow);
  }

  .account-choice-modal p:not(.loading-detail) {
    color: #d8e3d8;
    line-height: 1.55;
  }

  .account-choice-modal p.account-beta-note { color: #fff; font-size: 14px; }

  .account-choice-modal p.account-character {
    margin: 16px 0 4px;
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .035em;
  }

  .account-choice-modal .account-character strong {
    color: #86f45d;
    text-shadow: var(--text-shadow);
  }

  .account-choice-modal .account-character.is-empty strong {
    color: #ffd869;
    text-shadow: var(--text-shadow);
  }

  .account-choice-modal button {
    display: block;
    width: min(360px, calc(100vw - 108px));
    max-width: none;
    min-height: 70px;
    margin: 13px 0 0 50%;
    border-width: 2px;
    border-radius: 999px;
    font-size: 24px;
    line-height: 1;
    -webkit-text-stroke: 0 rgba(255, 255, 255, 0);
    text-shadow: 0 -.7px 2px rgba(0, 0, 0, 1);
    transform: translateX(-50%);
    transition: filter 120ms ease, transform 120ms ease, box-shadow 120ms ease;
  }

  .account-choice-modal #signInFromStartBtn {
    border-color: #045801;
    background: linear-gradient(180deg, #82ea03 0%, #12ca02 52%, #019304 100%);
    box-shadow:
      inset 1px 2px 3px rgba(255, 255, 255, .72),
      0 3px 0 #035701,
      0 7px 14px rgba(0, 0, 0, .28);
    color: #fff;
  }

  .account-choice-modal #continueGuestBtn {
    border-color: #303738;
    background: linear-gradient(180deg, #747f80 0%, #596364 52%, #41494a 100%);
    box-shadow:
      inset 1px 2px 3px rgba(255, 255, 255, .72),
      0 3px 0 #252b2c,
      0 7px 14px rgba(0, 0, 0, .28);
    color: #fff;
  }

  .account-choice-modal button:hover:not(:disabled) { filter: brightness(1.035); }

  .account-choice-modal button:focus-visible {
    outline: 3px solid rgba(255, 255, 255, .92);
    outline-offset: 3px;
  }

  .account-choice-modal #signInFromStartBtn:active:not(:disabled) {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .62),
      0 1px 0 #246f19,
      0 3px 8px rgba(0, 0, 0, .24);
    transform: translate(-50%, 2px);
  }

  .account-choice-modal #continueGuestBtn:active:not(:disabled) {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .24),
      0 1px 0 #252b2c,
      0 3px 8px rgba(0, 0, 0, .26);
    transform: translate(-50%, 2px);
  }

  .account-choice-modal button:disabled {
    filter: saturate(.6);
    opacity: .58;
    cursor: default;
  }

  #accountChoiceDetail { display: none; }

  .connection-modal p {
    color: #d8e3d8;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: .08em;
  }

  .loading-track {
    height: 12px;
    overflow: hidden;
    border: 2px solid #0a0a0a;
    border-radius: 7px;
    background: #101914;
  }

  .loading-fill {
    width: 8%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #34be39, #86f45d, #34be39);
    transition: width .28s ease-out;
  }

  .loading-detail {
    color: var(--muted) !important;
    font-size: 9px !important;
    line-height: 1.5;
  }

  #sessionTakeoverBtn {
    width: min(240px, 100%);
    margin: 12px auto 0;
  }

  .session-takeover-note {
    margin: 7px 0 0 !important;
    color: var(--muted) !important;
    font-size: 8px !important;
    letter-spacing: .04em !important;
  }

  .onboarding-modal {
    width: min(620px, calc(100vw - 26px));
  }

  .onboarding-name-label {
    display: block;
    margin: 14px 0 6px;
    color: #ffe777;
    font-weight: 900;
    letter-spacing: .07em;
  }

  #newPlayerNameInput {
    width: min(320px, 100%);
    box-sizing: border-box;
    border: 2px solid rgba(255,255,255,.3);
    border-radius: 7px;
    background: #07100b;
    color: #fff;
    font: 900 17px var(--font-rounded);
    padding: 10px 12px;
    text-align: center;
  }

  #newPlayerNameInput:focus {
    outline: 2px solid #72ef58;
    outline-offset: 2px;
  }

  #bootUpgrade {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 13px;
    background: transparent;
    z-index: 6;
  }

  #bootUpgrade[hidden] { display: none; }

  #duelResult,
  #dragonResult,
  #playerProfile,
  #leaderboard,
  #devAudit,
  #techTreeOverlay {
    position: fixed;
    inset: 0;
    z-index: 8;
    display: grid;
    place-items: center;
    padding: 13px;
    background: transparent;
  }

  #duelResult[hidden],
  #dragonResult[hidden],
  #playerProfile[hidden],
  #leaderboard[hidden],
  #devAudit[hidden],
  #techTreeOverlay[hidden] { display: none; }

  #leaderboard,
  #devAudit,
  #techTreeOverlay { bottom: var(--toolbar-height); }

  #leaderboard { place-items: stretch; padding: 0; }

  /* Let world touch controls through outside non-blocking windows. */
  #playerProfile,
  #leaderboard,
  #devAudit,
  #profileIconPicker { pointer-events: none; }
  #playerProfile .modal,
  #leaderboard .modal,
  #devAudit .modal,
  #profileIconPicker .modal { pointer-events: auto; }

  #techTreeOverlay { z-index: 12; padding: 0; background: rgba(0,0,0,.78); }
  .tech-tree-window { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: 100%; height: 100%; overflow: hidden; background: radial-gradient(ellipse at 50% 42%, #252a30, #090b0e 70%); border: 2px solid #000; border-bottom: 0; color: var(--text); text-align: left; }
  .tech-tree-header { z-index: 2; display: flex; align-items: center; gap: 12px; min-height: 62px; padding: 10px max(14px, env(safe-area-inset-right)) 10px max(14px, env(safe-area-inset-left)); border-bottom: 2px solid rgba(202,207,214,.3); background: rgba(10,12,15,.94); }
  .tech-tree-active { min-width: 0; margin: 0 auto; color: #c2c7ce; font-size: clamp(7px, 1.7vw, 10px); letter-spacing: .06em; text-align: center; }
  .tech-tree-viewport { position: relative; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: none; }
  .tech-tree-viewport::-webkit-scrollbar { display: none; }
  #techTreeCanvas { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; background: transparent; image-rendering: auto; pointer-events: none; }
  .tech-tree-map { position: relative; z-index: 1; display: grid; grid-auto-rows: 168px; min-width: 420px; min-height: calc(var(--tech-tree-row-count, 1) * 168px + 44px); height: auto; padding: 22px clamp(24px, 7vw, 112px); }
  .tech-tree-tier { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; justify-self: center; width: min(372px, 100%); gap: 56px; }
  .tech-tree-tier-bottom { justify-content: space-between; }
  .tech-tree-node { position: relative; display: grid; place-items: center; gap: 3px; width: 112px; aspect-ratio: 1; margin: 0; padding: 9px; border: 2px solid #737a84; border-radius: 15px; background: linear-gradient(145deg, #2d333a, #12161a); box-shadow: inset 0 0 0 2px rgba(0,0,0,.5), 0 5px 0 rgba(0,0,0,.42); color: var(--text); text-align: center; }
  .tech-tree-node::before { position: absolute; inset: 4px; border: 1px solid rgba(222,227,234,.16); border-radius: 10px; content: ""; pointer-events: none; }
  .tech-tree-node.is-available { border-color: #c4cad1; background: linear-gradient(145deg, #3d444c, #171b20); }
  .tech-tree-node.is-active { border-color: #f1f3f5; background: linear-gradient(145deg, #555d66, #20262c); box-shadow: inset 0 0 0 2px rgba(0,0,0,.5), 0 0 18px rgba(230,234,239,.28); }
  .tech-tree-node.is-complete { border-color: #f0c44f; background: linear-gradient(145deg, #66501d, #29200e); box-shadow: inset 0 0 0 2px rgba(54,34,4,.62), 0 0 14px rgba(240,196,79,.25), 0 5px 0 rgba(0,0,0,.42); }
  .tech-tree-node.is-complete::before { border-color: rgba(255,232,154,.42); }
  .tech-tree-node.is-complete::after { position: absolute; top: -8px; right: -8px; z-index: 2; color: #65d66d; content: "Max"; font: 900 12px/1 var(--font-rounded); text-shadow: 0 2px 0 rgba(0,0,0,.78), 0 0 4px rgba(101,214,109,.35); }
  .tech-tree-node.is-complete strong { color: #fff1b0; }
  .tech-tree-node.is-complete small { color: #ffd963; }
  .tech-tree-node.is-locked { opacity: .56; }
  .tech-tree-node strong { color: #f1f3f5; font-size: clamp(10px, 1.65vw, 15px); line-height: 1.05; }
  .tech-tree-node small { color: #c0c6cd; font-size: 14px; letter-spacing: .045em; }
  .tech-tree-node:hover, .tech-tree-node:focus-visible { border-color: #f1f3f5; box-shadow: inset 0 0 0 2px rgba(0,0,0,.5), 0 0 0 2px rgba(240,243,246,.22), 0 5px 0 rgba(0,0,0,.42); outline: 0; }
  .tech-tree-detail { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; padding: 18px; background: rgba(0,0,0,.62); }
  .tech-tree-detail[hidden] { display: none; }
  .tech-tree-detail-card { display: grid; gap: 12px; width: min(100%, 360px); padding: 14px; border: 2px solid #8c949e; border-radius: 9px; background: linear-gradient(145deg, #30363d, #13171c); box-shadow: 0 10px 0 rgba(0,0,0,.45); }
  .tech-tree-detail-content { display: grid; gap: 9px; }
  .tech-tree-detail-content strong { color: #f4f5f7; font-size: 16px; }
  .tech-tree-detail-content span { color: #c2c7ce; font-size: 9px; }
  .tech-tree-effect-value { color: #fff; font-size: 23px; line-height: 1; }
  .tech-tree-research-time { display: grid; gap: 3px; padding: 9px; border: 1px solid #707883; background: rgba(0,0,0,.24); }
  .tech-tree-research-time span { color: #c2c7ce; font-size: 8px; letter-spacing: .08em; }
  .tech-tree-research-time strong { color: #fff; font-size: 21px; line-height: 1; }
  .tech-tree-timer { display: grid; gap: 5px; }
  .tech-tree-timer-label { color: #e9edf1; font-size: 10px; }
  .tech-tree-timer-track { height: 13px; overflow: hidden; border: 2px solid #9ba3ad; background: #0d1013; }
  .tech-tree-timer-fill { width: calc(var(--research-progress) * 100%); height: 100%; margin-right: auto; background: #d9dde2; transform-origin: left center; transition: width .7s linear; }
  .tech-tree-action { justify-self: center; min-height: 28px; margin-top: 3px; border-color: #aeb5bd; background: #515963; color: #fff; font-size: 9px; text-align: center; }
  .tech-tree-action:hover:not(:disabled), .tech-tree-action:focus-visible { border-color: #fff; background: #68727d; }
  .tech-tree-action.is-gem-speed-up { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 38px; padding-inline: 12px; border-color: #e697bd; background: linear-gradient(#864c72, #57304b); color: #fff; }
  .tech-tree-action.is-gem-speed-up:hover:not(:disabled), .tech-tree-action.is-gem-speed-up:focus-visible { border-color: #ffd0e6; background: linear-gradient(#a35e8b, #6e3b60); }
  .tech-tree-action.is-gem-speed-up img { display: block; width: 18px; height: 18px; object-fit: contain; }
  .tech-tree-action.is-gem-speed-up strong { color: #fff; font-size: 12px; line-height: 1; }

  #sceneFade {
    position: fixed;
    inset: 0;
    z-index: 20;
    background: #000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease;
  }

  #sceneFade[hidden] { display: none; }
  #sceneFade.is-visible { opacity: 1; pointer-events: auto; }
  #cutsceneOverlay { position: fixed; inset: 0; z-index: 21; background: transparent; pointer-events: auto; }
  #cutsceneOverlay[hidden] { display: none; }
  body.is-cutscene #hud { visibility: hidden; }

  .duel-modal { width: var(--game-window-width); border-color: rgba(198,208,210,.56); }
  .duel-modal h2 { margin: 0; color: #eef1ee; font-size: clamp(22px, 6vw, 34px); }
  .duel-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 14px 0; text-align: left; font-size: 11px; }
  .duel-stat-row { padding: 8px; border: 1px solid rgba(255,255,255,.16); border-radius: 7px; background: rgba(0,0,0,.2); }
  .duel-stat-name, .duel-status-name { display: inline-flex; align-items: center; gap: 3px; color: var(--gold); font-weight: 900; }
  #watchDuelReplayBtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; margin-top: 8px; padding: 3px 13px; border-color: transparent; background: transparent; font-size: 13px; line-height: 1; }
  .duel-replay-play-icon { display: block; width: 25px; height: 25px; background: center / contain no-repeat url("duel-replay-play-medallion-v1.png"); mix-blend-mode: screen; -webkit-text-stroke: 0; text-shadow: none; }
  .dragon-result-modal { width: var(--game-window-width); padding: 14px; border-color: rgba(255,101,90,.6); }
  #dragonResult { background: transparent; pointer-events: none; }
  #dragonResult .dragon-result-modal { pointer-events: auto; }
  .dragon-result-modal h2 { margin: 0; color: #ff8a65; font-size: clamp(24px, 7vw, 38px); }
  .dragon-result-total { margin: 5px 0 9px; color: var(--gold); font-size: 11px; }
  .dragon-result-contributors { display: grid; gap: 5px; max-height: min(44vh, 360px); margin-bottom: 8px; overflow-y: auto; text-align: left; }
  .dragon-result-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 7px 9px; border: 1px solid rgba(255,255,255,.16); border-radius: 7px; background: rgba(0,0,0,.24); font-size: 10px; }
  .dragon-result-name { min-width: 0; overflow: hidden; color: #fff; text-overflow: ellipsis; white-space: nowrap; }
  .dragon-result-damage { color: var(--gold); }
  .dragon-result-percentage { min-width: 52px; color: #72ef58; text-align: right; }
  #dragonWorldNotice { position: fixed; top: 142px; left: 50%; z-index: 9; display: grid; gap: 3px; min-width: min(350px, calc(100vw - 30px)); padding: 10px 16px; border: 2px solid rgba(255,101,90,.68); border-radius: 9px; background: rgba(13,22,17,.94); color: #fff; text-align: center; pointer-events: none; transform: translateX(-50%); animation: dragon-world-notice 6s ease forwards; }
  #dragonWorldNotice[hidden] { display: none; }
  #dragonWorldNotice strong { color: #ff8a65; font-size: 14px; }
  .dragon-world-notice-detail { display: grid; gap: 2px; width: min(260px, calc(100vw - 70px)); margin: 1px auto 0; }
  .dragon-world-notice-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; color: var(--gold); font-size: 10px; text-align: left; }
  .dragon-world-notice-row span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dragon-world-notice-row span:last-child { color: #72ef58; text-align: right; }
  #closeDragonResultBtn { margin-top: 2px; padding: 9px 18px; font-size: 16px; }
  @keyframes dragon-world-notice {
    0%, 78% { opacity: 1; transform: translate(-50%, 0); }
    100% { opacity: 0; transform: translate(-50%, -8px); }
  }
  #playerProfile { padding: 5px; }
  /* Counter half of the preview's rendered growth so the centered window's bottom edge does not move down. */
  .modal.player-profile-modal { width: var(--game-window-width); max-height: calc(100vh - 10px); max-height: calc(100dvh - 10px); padding: 8px; overflow-y: auto; text-align: left; transform: translateY(-28px); }
  .player-profile-header { display: flex; align-items: center; gap: 10px; }
  .player-profile-title-row { min-width: 0; flex: 1; display: flex; align-items: center; gap: 10px; }
  .player-profile-identity { min-width: 0; flex: 1; }
  .player-profile-name-row { position: relative; display: flex; align-items: center; gap: 4px; min-width: 0; }
  .player-profile-guest { position: absolute; bottom: calc(100% + 1px); left: 0; color: #a9b1ad; font-family: var(--player-name-font); font-size: 8px; line-height: 1; }
  .player-profile-guest[hidden] { display: none; }
  .player-profile-header h2 { display: flex; align-items: center; gap: 3px; min-width: 0; margin: 0; color: var(--text); font-family: var(--player-name-font); font-size: clamp(12px, 2.9vw, 18px); line-height: 1.08; overflow-wrap: anywhere; }
  .player-name-guest { color: #a9b1ad; font-size: .8em; }
  .player-profile-header h2 .player-name-guest { display: none; }
  .profile-name-edit { display: grid; flex: 0 0 auto; place-items: center; width: 19px; min-width: 19px; height: 19px; margin: 0; padding: 0; border: 1px solid rgba(255,255,255,.28); border-radius: 4px; background: transparent; color: var(--green); font: 900 12px/1 Arial, sans-serif; -webkit-text-stroke: 0; text-shadow: none; }
  .profile-name-edit[hidden] { display: none; }
  .player-profile-presence { margin-top: 4px; color: var(--muted); font-size: 8px; letter-spacing: .08em; }
  .player-profile-presence.is-online { color: #72ef58; }
  #playerProfilePower { margin-left: auto; font-size: 11px; white-space: nowrap; text-align: right; }
  .power-label { color: var(--gold); }
  .power-value { color: #fff; }
  .profile-character-preview { --inventory-line: rgba(255,255,255,.17); --inventory-muted: #aebcaf; position: relative; display: grid; grid-template-columns: 54px minmax(0, 1fr) 54px; grid-template-rows: repeat(3, 44px); justify-content: center; align-items: stretch; gap: 2px 4px; height: 148px; min-height: 148px; margin: 5px 0 2px; padding: 4px; overflow: visible; }
  .profile-character-stage { position: relative; z-index: 1; grid-column: 2; grid-row: 1 / span 3; min-width: 0; min-height: 0; overflow: visible; border-radius: 3px; background: transparent; pointer-events: none; }
  .profile-equipment-slot { grid-template-rows: 12px minmax(0, 1fr); gap: 1px; height: 44px; min-height: 44px; aspect-ratio: auto; padding: 2px; border-radius: 5px; cursor: pointer; }
  .profile-equipment-slot.is-equipped { cursor: pointer; }
  .profile-equipment-slot:disabled { cursor: default; opacity: .72; }
  .profile-equipment-slot .equipment-slot-label { font-size: 7px; }
  .profile-equipment-slot .equipment-slot-name { display: none; }
  .profile-equipment-slot .inventory-item-art { max-width: 30px; max-height: 23px; }
  .profile-equipment-slot .boot-pixel-icon { transform: scale(.82); }
  .profile-equipment-slot .inventory-upgrade-level { top: auto; right: 1px; bottom: 1px; min-width: 16px; padding: 1px 2px; font-size: 7px; }
  .profile-equipment-slot.is-cosmetic { border-color: #d990bc; background: linear-gradient(rgba(67,40,58,.62), rgba(36,21,31,.70)); }
  .profile-equipment-slot.is-cosmetic-hidden .equipment-slot-art > .inventory-item-art { opacity: .4; filter: grayscale(.45); }
  .profile-equipment-hidden-mark { position: absolute; top: 58%; left: 50%; width: 31px; height: 2px; border-radius: 999px; background: #e49a9f; box-shadow: 0 1px 0 #111; transform: translate(-50%, -50%) rotate(-36deg); }
  .player-sprite-selector { display: grid; place-items: center; width: 23px; min-width: 23px; height: 31px; margin: 0 auto; padding: 0; border: 2px solid #000; border-radius: 4px; background: #fff; }
  .player-sprite-selector[hidden] { display: none; }
  .player-sprite-selector span { width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
  .player-sprite-selector.previous span { border-right: 10px solid #111; }
  .player-sprite-selector.next span { border-left: 10px solid #111; }
  .profile-character-stage .player-sprite-selector { position: absolute; z-index: 2; top: 50%; margin: 0; transform: translateY(-50%); pointer-events: auto; }
  .profile-character-stage .player-sprite-selector.previous { left: 5px; }
  .profile-character-stage .player-sprite-selector.next { right: 5px; }
  .player-sprite-selector:active { transform: none; box-shadow: inset 0 0 0 999px rgba(0,0,0,.12); }
  .profile-skin-tone-edit { position: absolute; z-index: 2; top: 6px; right: 6px; display: grid; place-items: center; width: 22px; height: 22px; margin: 0; padding: 0; border: 2px solid #000; border-radius: 4px; background: #fff; color: #111; font: 900 13px/1 Arial, sans-serif; -webkit-text-stroke: 0; text-shadow: none; pointer-events: auto; }
  .profile-skin-tone-edit[hidden], .profile-skin-tone[hidden] { display: none; }
  .profile-skin-tone { position: absolute; z-index: 3; top: 32px; right: 6px; display: grid; grid-template-columns: repeat(5, 22px); gap: 4px; padding: 5px; border: 2px solid #000; border-radius: 5px; background: rgba(20,29,22,.96); box-shadow: 0 3px 0 rgba(0,0,0,.45); pointer-events: auto; }
  .profile-skin-tone-choice { width: 22px; height: 22px; margin: 0; padding: 0; border: 2px solid rgba(255,255,255,.45); border-radius: 3px; box-shadow: none; }
  .profile-skin-tone-choice[aria-pressed="true"] { border-color: #000; box-shadow: 0 0 0 2px #fff; }
  .profile-gender-setting { position: relative; display: flex; align-items: center; gap: 4px; width: max-content; min-height: 30px; margin: 5px 0 2px auto; padding: 2px 3px 2px 7px; border: 1px solid rgba(255,255,255,.14); border-radius: 6px; background: rgba(0,0,0,.22); }
  .profile-gender-setting[hidden] { display: none; }
  .profile-gender-label { color: var(--muted); font-size: 8px; font-weight: 900; letter-spacing: .07em; }
  .profile-gender-value { display: inline-flex; align-items: center; gap: 2px; min-width: 17px; color: #fff; font-size: 8px; }
  .profile-gender-value .player-gender-icon { width: 15px; height: 17px; }
  .profile-gender-edit { display: grid; place-items: center; width: 25px; min-width: 25px; height: 25px; margin: 0; padding: 0; border: 1px solid rgba(255,255,255,.28); border-radius: 4px; background: transparent; color: var(--green); font: 900 13px/1 Arial, sans-serif; -webkit-text-stroke: 0; text-shadow: none; }
  .profile-gender-choices { position: absolute; z-index: 5; top: calc(100% + 3px); right: 0; display: flex; gap: 4px; padding: 4px; border: 2px solid #000; border-radius: 6px; background: rgba(20,29,22,.97); box-shadow: 0 3px 0 rgba(0,0,0,.45); }
  .profile-gender-choices[hidden] { display: none; }
  .profile-gender-choice { display: grid; place-items: center; width: 36px; min-width: 36px; height: 36px; margin: 0; padding: 3px; border: 2px solid rgba(255,255,255,.3); border-radius: 6px; background: rgba(255,255,255,.08); }
  .profile-gender-choice img { width: 23px; height: 27px; object-fit: contain; pointer-events: none; }
  .profile-gender-choice[aria-pressed="true"] { border-color: var(--green); background: rgba(78,205,82,.2); box-shadow: 0 0 0 1px #000, 0 0 8px rgba(78,205,82,.3); }
  .profile-gender-choice:disabled { opacity: .58; }
  .profile-tabs { display: flex; gap: 7px; margin: 12px 0 8px; border-bottom: 2px solid rgba(255,255,255,.13); }
  .profile-tab { display: grid; place-items: center; height: 44px; min-height: 44px; margin: 0 0 -2px; padding: 8px 12px; border: 0; border-bottom: 3px solid transparent; border-radius: 5px 5px 0 0; background: transparent; color: var(--muted); font-size: 10px; }
  .profile-tab.is-active { border-bottom-color: var(--green); color: #fff; }
  .profile-loading { padding: 24px 8px; color: var(--muted); font-size: 11px; text-align: center; }
  .profile-panel[hidden], .profile-loading[hidden] { display: none; }
  .player-profile-modal .profile-panel { min-height: 260px; }
  #profileStatsPanel { height: 260px; max-height: 260px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
  #profileStatsPanel::-webkit-scrollbar { display: none; width: 0; height: 0; }
  .profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
  .profile-grid > div { min-width: 0; padding: 8px; border: 1px solid rgba(255,255,255,.14); border-radius: 7px; background: rgba(0,0,0,.2); }
  .profile-grid dt { color: var(--muted); font-size: 8px; letter-spacing: .07em; }
  .profile-grid dd { margin: 5px 0 0; color: #fff; font-size: 12px; overflow-wrap: anywhere; }
  .profile-stat-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 6px; background: rgba(0,0,0,.27); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
  .profile-stat-grid > div { display: grid; grid-template-columns: 108px minmax(0, 1fr); grid-template-rows: 44px 44px; column-gap: 8px; align-items: center; height: 44px; min-height: 44px; padding: 0 8px; overflow: hidden; border: 0; border-bottom: 1px solid rgba(255,255,255,.1); border-radius: 0; background: transparent; cursor: pointer; transition: height .16s ease, background-color .16s ease; }
  .profile-stat-grid > div.is-expanded { height: 88px; background: rgba(255,255,255,.035); }
  .profile-stat-grid > div:hover { background: rgba(255,255,255,.025); }
  .profile-stat-grid > div:focus-visible { z-index: 1; outline: 2px solid rgba(105,229,111,.8); outline-offset: -2px; }
  .profile-stat-grid > div:last-child { border-bottom: 0; }
  .profile-stat-grid dt { grid-column: 1; grid-row: 1; font-size: 10px; letter-spacing: .04em; white-space: nowrap; }
  .profile-stat-grid dd { min-width: 0; margin: 0; color: #fff; font-size: clamp(8px, 1.6vw, 10px); line-height: 1.15; white-space: nowrap; }
  .profile-stat-summary { grid-column: 2; grid-row: 1; display: grid; grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr) 20px minmax(0, 1fr); gap: 0; align-items: center; }
  .profile-stat-base { grid-column: 1; min-width: 0; text-align: left; }
  .profile-stat-equation-operator { min-width: 0; color: var(--muted); text-align: center; }
  .profile-stat-multiply { grid-column: 2; }
  .profile-stat-multiplier { grid-column: 3; min-width: 0; color: #f2f4ee; text-align: center; }
  .profile-stat-equals { grid-column: 4; }
  .profile-stat-total-group { grid-column: 5; display: flex; align-items: baseline; justify-content: flex-end; gap: 3px; min-width: 0; }
  .profile-stat-total { flex: 0 0 auto; min-width: 0; text-align: right; }
  .profile-stat-sources { grid-column: 1 / -1; grid-row: 2; align-self: stretch; display: flex; align-items: center; justify-content: center; gap: 7px; overflow: hidden; border-top: 1px solid rgba(255,255,255,.08); color: #d4ddd5; text-align: center; }
  .profile-stat-sources[hidden] { display: none; }
  .profile-stat-source strong { color: #fff; }
  .profile-stat-source-operator { color: var(--muted); }
  .profile-stat-expanded-detail { color: #fff; }
  .profile-stat-source-empty { color: var(--muted); }
  .profile-stat-health dt { color: #72ef58; }
  .profile-stat-regen dt { color: var(--stat-regen); }
  .profile-stat-damage dt { color: #ff8b77; }
  .profile-stat-armor dt { color: var(--stat-armor); }
  .profile-stat-attack dt { color: #ffe05d; }
  .profile-stat-range dt { color: #74d8ff; }
  .profile-stat-speed dt { color: #bf9cff; }
  .profile-stat-stat-gain dt, .profile-stat-critical dt { color: #f3d36b; }
  #profileNameEditor { position: fixed; inset: 0; z-index: 14; display: grid; place-items: center; padding: 13px; background: transparent; }
  #profileNameEditor[hidden] { display: none; }
  .profile-name-editor-modal { width: min(290px, calc(100vw - 26px)); padding: 10px; text-align: left; }
  .profile-name-editor-modal label { display: block; margin-bottom: 6px; color: var(--muted); font-size: 9px; letter-spacing: .08em; }
  .profile-name-editor-controls { display: flex; gap: 5px; }
  #profileNameInput { flex: 1; width: 0; }
  #savePlayerNameBtn { min-width: 0; margin: 0; padding: 4px 8px; border-width: 1px; border-radius: 5px; font-size: 11px; line-height: 1; text-transform: none; }
  .modal.leaderboard-modal {
    --leaderboard-content-width: min(720px, 100%);
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    width: 100%;
    height: 100%;
    max-height: none;
    padding: max(12px, env(safe-area-inset-top)) max(13px, env(safe-area-inset-right)) 0 max(13px, env(safe-area-inset-left));
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: radial-gradient(ellipse at 50% 38%, #243129, #0b110e 76%);
    box-shadow: none;
    text-align: left;
  }

  #mapGuide {
    position: fixed;
    inset: 0 0 var(--toolbar-height);
    z-index: 12;
    display: block;
    overflow: hidden;
    background: #09100c;
    color: var(--text);
    pointer-events: auto;
  }
  #mapGuide[hidden] { display: none; }
  .map-guide-window {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: radial-gradient(ellipse at 50% 32%, #243129, #090d0b 76%);
    text-align: left;
  }
  .map-guide-header {
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 62px;
    padding: max(10px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 10px max(14px, env(safe-area-inset-left));
    border-bottom: 2px solid rgba(255,255,255,.15);
    background: rgba(10,15,12,.94);
    box-shadow: 0 4px 12px rgba(0,0,0,.28);
  }
  .map-guide-header > div:first-child { min-width: 0; }
  .map-guide-kicker { margin: 0 0 2px; color: #aebcaf; font-size: var(--font-readable-min); font-weight: 900; letter-spacing: .08em; line-height: 1; }
  .map-guide-header h2 { margin: 0; color: #fff; font-size: clamp(20px, 4vw, 28px); line-height: 1; }
  .map-guide-scroll { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; touch-action: pan-y; }
  .map-guide-scroll::-webkit-scrollbar { display: none; width: 0; }
  .map-guide-content { display: grid; gap: 15px; width: min(820px, 100%); margin: 0 auto; padding: 14px max(12px, env(safe-area-inset-right)) 18px max(12px, env(safe-area-inset-left)); }
  .map-guide-map-frame {
    position: relative;
    justify-self: center;
    width: min(75%, 420px);
    aspect-ratio: 1;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: #17241c;
    box-shadow: none;
    isolation: isolate;
  }
  canvas#mapGuideCanvas { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; background: transparent; image-rendering: auto; pointer-events: none; }
  .map-guide-zone-labels { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
  .map-guide-zone-label,
  .map-guide-boss-label {
    position: absolute;
    left: calc(var(--map-x) * 100%);
    top: calc(var(--map-y) * 100%);
    max-width: min(124px, 29%);
    padding: 1px 2px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #fff;
    font-size: clamp(6px, 1.25vw, 9px);
    line-height: 1.15;
    text-align: center;
    transform: translate(-50%, -50%);
    -webkit-text-stroke: .1em #000;
    paint-order: stroke fill;
    text-shadow: 1px 1px 0 #000;
  }
  .map-guide-zone-label strong { display: block; overflow: hidden; font-size: 1em; text-overflow: ellipsis; white-space: nowrap; }
  .map-guide-zone-rewards { display: block; margin: 0; font-size: .9em; font-weight: 900; white-space: normal; }
  .map-guide-boss-label { color: #ffad9d; white-space: nowrap; }
  .map-guide-boss-label.is-defeated { opacity: .55; }
  .map-guide-drops { display: grid; gap: 8px; }
  .map-guide-drops > header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
  .map-guide-drops h3 { margin: 0; color: #fff; font-size: var(--font-readable-title); line-height: 1; }
  .map-guide-drop-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .map-guide-drop-card {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    min-width: 0;
    min-height: 82px;
    padding: 4px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .map-guide-drop-art { display: grid; width: 58px; height: 58px; place-items: center; border: 0; border-radius: 0; background: transparent; }
  .map-guide-drop-art img { display: block; width: 50px; height: 50px; object-fit: contain; image-rendering: pixelated; }
  .map-guide-drop-card:is([data-item-id="starter_bow"], [data-item-id="iron_bow"], [data-item-id="frost_bow"], [data-item-id="lava_bow"], [data-item-id="fire_metal_bow"]) .map-guide-drop-art img { transform: rotate(-45deg); }
  .map-guide-drop-copy { display: grid; gap: 3px; min-width: 0; }
  .map-guide-drop-copy h4 { margin: 0; overflow: hidden; color: #fff; font-size: var(--font-readable-label); line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
  .map-guide-drop-copy p { margin: 0; color: #c5cec7; font-size: var(--font-readable-min); line-height: 1.2; }
  .map-guide-drop-stats { display: flex; flex-wrap: wrap; gap: 2px 5px; color: #f3c86f; font-size: 9px; line-height: 1.15; }
  .map-guide-drop-chance { display: grid; gap: 3px; min-width: 78px; padding-left: 8px; border-left: 0; text-align: right; }
  .map-guide-drop-chance span { color: #aebcaf; font-size: 8px; white-space: nowrap; }
  .map-guide-drop-chance strong { color: #ffe19a; font-size: var(--font-readable-min); white-space: nowrap; }
  .map-guide-footer { z-index: 2; display: grid; place-items: center; min-height: 60px; padding: 7px max(14px, env(safe-area-inset-right)) var(--window-back-bottom-gap) max(14px, env(safe-area-inset-left)); border-top: 2px solid rgba(255,255,255,.13); background: rgba(8,13,10,.96); }

  @media (max-width: 680px) {
    .map-guide-header { min-height: 56px; padding-top: max(8px, env(safe-area-inset-top)); padding-bottom: 8px; }
    .map-guide-kicker { font-size: 8px; }
    .map-guide-header h2 { font-size: 19px; }
    .map-guide-content { gap: 12px; padding-top: 10px; }
    .map-guide-drop-card { grid-template-columns: 48px minmax(0, 1fr); min-height: 76px; gap: 7px; padding: 7px; }
    .map-guide-drop-art { width: 48px; height: 48px; }
    .map-guide-drop-art img { width: 42px; height: 42px; }
    .map-guide-drop-chance { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; min-width: 0; padding: 5px 0 0; border-top: 0; border-left: 0; text-align: left; }
  }
  #leaderboard[data-stat="power"] .leaderboard-modal { background: radial-gradient(ellipse at 50% 38%, #39331e, #121009 76%); }
  #leaderboard[data-stat="damage"] .leaderboard-modal { background: radial-gradient(ellipse at 50% 38%, #3a2422, #130b0b 76%); }
  #leaderboard[data-stat="health"] .leaderboard-modal { background: radial-gradient(ellipse at 50% 38%, #263a29, #0b130d 76%); }
  #leaderboard[data-stat="armor"] .leaderboard-modal { background: radial-gradient(ellipse at 50% 38%, #233843, #0a1216 76%); }
  #leaderboard[data-stat="regen"] .leaderboard-modal { background: radial-gradient(ellipse at 50% 38%, #43273a, #160c12 76%); }
  #leaderboard[data-stat="time"] .leaderboard-modal { background: radial-gradient(ellipse at 50% 38%, #303534, #101211 76%); }
  .leaderboard-modal > .leaderboard-tabs,
  .leaderboard-modal > .leaderboard-podium,
  .leaderboard-modal > .leaderboard-column-headings,
  .leaderboard-modal > .leaderboard-rows,
  .leaderboard-modal > .leaderboard-loading,
  .leaderboard-modal > #leaderboardEmpty,
  .leaderboard-modal > .window-back-footer { width: var(--leaderboard-content-width); margin-right: auto; margin-left: auto; }
  .leaderboard-modal > .leaderboard-rows,
  .leaderboard-modal > .leaderboard-loading,
  .leaderboard-modal > #leaderboardEmpty { grid-row: 4; min-height: 0; height: auto; }
  .leaderboard-tabs { grid-row: 1; margin: 9px 0 8px; }
  .leaderboard-podium { grid-row: 2; }
  .leaderboard-column-headings { grid-row: 3; }
  .leaderboard-modal > .window-back-footer { grid-row: 5; }
  #leaderboardPowerTab { --leaderboard-tab-color: #ffe05d; }
  #leaderboardDamageTab { --leaderboard-tab-color: #ff7f70; }
  #leaderboardHealthTab { --leaderboard-tab-color: #72ef58; }
  #leaderboardArmorTab { --leaderboard-tab-color: var(--stat-armor); }
  #leaderboardRegenTab { --leaderboard-tab-color: var(--stat-regen); }
  #leaderboardTimeTab { --leaderboard-tab-color: #c3cbcf; }
  .leaderboard-tabs .profile-tab {
    padding: 6px 10px;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: var(--leaderboard-tab-color);
    opacity: .68;
    text-shadow: 0 1px 0 #000;
  }
  .leaderboard-tabs .profile-tab.is-active {
    border: 0;
    background: transparent;
    box-shadow: none;
    color: var(--leaderboard-tab-color);
    opacity: 1;
  }
  .leaderboard-podium { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 4px; min-height: 148px; margin: 0 0 7px; padding: 5px 6px 0; overflow: hidden; border: 2px solid #000; border-radius: 7px; outline: 1px solid #000; outline-offset: -3px; background: radial-gradient(ellipse at 50% 40%, #49b86d, #2f8e54); }
  .leaderboard-podium[hidden] { display: none; }
  .leaderboard-podium-player { position: relative; z-index: 1; display: grid; grid-template-rows: 14px 84px auto; align-items: end; width: 100%; min-width: 0; height: auto; min-height: 0; margin: 0; padding: 0 2px; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: #fff; text-align: center; }
  .leaderboard-podium-player:hover, .leaderboard-podium-player:focus-visible { transform: none; filter: none; }
  .leaderboard-podium-player:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
  .leaderboard-podium-player:active { transform: none; box-shadow: none; }
  .leaderboard-podium-player.is-empty { opacity: .34; }
  .leaderboard-podium-player.is-empty .leaderboard-podium-name, .leaderboard-podium-player.is-empty .leaderboard-podium-canvas { visibility: hidden; }
  .leaderboard-podium-name { display: flex; align-items: center; justify-content: center; gap: 2px; min-width: 0; overflow: hidden; color: #fff; font-family: var(--player-name-font); font-size: 9px; line-height: 1; text-shadow: 0 2px 0 #000; white-space: nowrap; }
  .leaderboard-podium-name-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .leaderboard-podium-name .player-gender-icon { flex: 0 0 auto; width: 11px; height: 13px; }
  canvas.leaderboard-podium-canvas { position: static; inset: auto; display: block; width: 100%; height: 84px; padding: 0; background: transparent; image-rendering: pixelated; pointer-events: none; }
  .leaderboard-podium-step { display: grid; place-items: center; width: 100%; border: 2px solid #000; border-bottom: 0; border-radius: 4px 4px 0 0; box-shadow: inset 0 2px 0 rgba(255,255,255,.34), inset 0 -4px 0 rgba(0,0,0,.18); }
  .leaderboard-podium-rank-label { color: #111; font-size: 13px; line-height: 1; text-shadow: 0 1px 0 rgba(255,255,255,.4); }
  .leaderboard-podium-rank-1 { grid-template-rows: 14px 88px auto; }
  .leaderboard-podium-rank-1 canvas.leaderboard-podium-canvas { height: 88px; }
  .leaderboard-podium-rank-1 .leaderboard-podium-name { color: #ffe05d; }
  .leaderboard-podium-rank-1 .leaderboard-podium-step { height: 31px; background: linear-gradient(#ffe978, #d9a92f); }
  .leaderboard-podium-rank-2 .leaderboard-podium-step { height: 24px; background: linear-gradient(#eef5f7, #9faeb5); }
  .leaderboard-podium-rank-3 .leaderboard-podium-step { height: 18px; background: linear-gradient(#e2a067, #9e6038); }
  .leaderboard-column-headings { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; padding: 0 9px 5px 70px; color: var(--muted); font-size: 8px; letter-spacing: .08em; }
  .leaderboard-rows { display: grid; align-content: start; gap: 0; height: auto; margin: 0; padding: 0; overflow-y: auto; background: rgba(0,0,0,.22); list-style: none; }
  .leaderboard-rows[hidden] { display: none; }
  .leaderboard-loading { display: grid; place-items: center; height: auto; margin: 0; padding: 0; background: rgba(0,0,0,.22); }
  .leaderboard-loading[hidden] { display: none; }
  .leaderboard-modal > #leaderboardEmpty { display: grid; place-items: center; height: auto; padding: 0; background: rgba(0,0,0,.22); }
  .leaderboard-modal > #leaderboardEmpty[hidden] { display: none; }
  .leaderboard-spinner { width: 24px; height: 24px; border: 3px solid rgba(255,255,255,.22); border-top-color: var(--gold); border-radius: 50%; animation: leaderboard-spin .65s linear infinite; }
  @keyframes leaderboard-spin { to { transform: rotate(1turn); } }
  .leaderboard-row { display: grid; grid-template-columns: 29px 25px minmax(0, 1fr) auto; gap: 7px; align-items: center; min-height: 44px; padding: 4px 8px; border: 0; border-radius: 0; background: transparent; }
  canvas.leaderboard-profile-icon { position: static; inset: auto; display: block; width: 25px; height: 25px; padding: 0; border: 2px solid #000; border-radius: 4px; background: #fff; cursor: pointer; image-rendering: auto; }
  .leaderboard-row.is-local { background: rgba(67,160,62,.24); }
  .leaderboard-rank { color: var(--muted); font-size: 9px; text-align: center; }
  .leaderboard-row:nth-child(1) .leaderboard-rank { color: #ffe05d; }
  .leaderboard-row:nth-child(2) .leaderboard-rank { color: #dce6e8; }
  .leaderboard-row:nth-child(3) .leaderboard-rank { color: #e4a96a; }
  .leaderboard-name { display: flex; align-items: center; gap: 2px; min-width: 0; margin: 0; padding: 0; overflow: hidden; border: 0; background: transparent; color: #fff; font-size: 10px; text-align: left; white-space: nowrap; cursor: pointer; }
  .leaderboard-name-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .leaderboard-name:hover, .leaderboard-name:focus-visible { color: var(--green); }
  .leaderboard-name:active { transform: none; }
  .leaderboard-guest { color: var(--muted); font-size: .82em; }
  .leaderboard-value { color: #fff; font-size: 10px; text-align: right; white-space: nowrap; }
  #leaderboard[data-stat="armor"] .leaderboard-value, #leaderboard[data-stat="armor"] #leaderboardValueHeading { color: var(--stat-armor); }
  #leaderboard[data-stat="regen"] .leaderboard-value, #leaderboard[data-stat="regen"] #leaderboardValueHeading { color: var(--stat-regen); }
  .dev-badge { color: var(--gold); }
  .developer-settings-row[hidden] { display: none; }
  .dev-audit-button { min-width: 112px; background: linear-gradient(#5b4a20, #332810); color: var(--gold); font-size: 12px; }
  .modal.dev-audit-modal { width: var(--game-window-width); max-height: calc(100vh - var(--toolbar-height) - 20px); max-height: calc(100dvh - var(--toolbar-height) - 20px); padding: 13px; overflow: hidden; text-align: left; }
  .dev-audit-tabs { display: flex; gap: 5px; margin: 3px 0 7px; }
  .dev-audit-tabs .profile-tab { flex: 1; }
  #devControlsPanel[hidden], #devCutscenesPanel[hidden] { display: none; }
  #devPerformancePanel[hidden] { display: none; }
  .dev-performance-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin: 0; }
  .dev-performance-stats > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; align-items: center; min-height: 28px; padding: 4px 6px; border: 1px solid rgba(145,207,160,.2); border-radius: 4px; background: rgba(0,0,0,.22); }
  .dev-performance-stats dt { min-width: 0; color: var(--muted); font-size: 7px; letter-spacing: .06em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dev-performance-stats dd { margin: 0; color: #b8f4be; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 9px; text-align: right; white-space: nowrap; }
  .dev-cutscene-trigger { width: 100%; min-height: 48px; margin: 8px 0 2px; border-color: rgba(255,216,91,.52); color: var(--gold); font-size: 10px; }
  .dev-presence-control { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 54px; padding: 8px; border: 1px solid rgba(145,207,160,.24); border-radius: 5px; background: rgba(0,0,0,.22); }
  .dev-presence-control > div { display: grid; gap: 4px; }
  .dev-presence-control strong { color: var(--cream); font-size: 9px; }
  .dev-presence-control small { color: var(--muted); font-size: 7px; }
  .dev-presence-control button { flex: 0 0 auto; min-height: 32px; font-size: 8px; }
  .dev-load-test-control { flex-wrap: wrap; margin-top: 8px; }
  .dev-load-test-control > :first-child { min-width: 150px; }
  .dev-presence-control > .dev-load-test-actions { display: flex; grid-auto-flow: column; align-items: center; justify-content: flex-end; gap: 6px; }
  .dev-load-test-actions label { color: var(--muted); font-size: 7px; letter-spacing: .08em; }
  .dev-load-test-actions input { width: 66px; min-height: 32px; padding: 0 6px; border: 1px solid rgba(145,207,160,.32); border-radius: 4px; color: var(--cream); background: #111a13; font: inherit; font-size: 8px; }
  .dev-load-test-actions input:disabled { opacity: .5; }
  .dev-audit-help { margin: 4px 0 9px; font-size: 8px; }
  .dev-bug-report-rows { max-height: min(68vh, 520px); overflow-y: auto; background: #09110d; border: 2px solid #000; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
  .dev-bug-report { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; padding: 8px; border-bottom: 1px solid #254132; color: #b8f4be; font-size: 9px; line-height: 1.45; }
  .dev-bug-report:last-child { border-bottom: 0; }
  .dev-bug-report-meta { color: #75a982; font-size: 7px; }
  .dev-bug-report-message { margin-top: 3px; color: #fff; overflow-wrap: anywhere; }
  .dev-bug-report-clear { align-self: start; min-width: 48px; height: 25px; margin: 0; padding: 2px 5px; border-color: #72ef58; color: #72ef58; background: #102517; font-size: 7px; }
  .profile-edit-button { display: block; margin: 7px 0 0 auto; padding: 6px 10px; font-size: 9px; }
  .profile-duel-button { display: block; min-width: 112px; margin: 7px auto 0; padding: 7px 12px; font-size: 10px; }
  .profile-duel-button.is-cooling-down { background: linear-gradient(#676f70, #454b4c); color: #d1d7d5; cursor: not-allowed; }
  .profile-duel-button[hidden], .profile-edit-button[hidden], .profile-edit-panel[hidden] { display: none; }
  .profile-edit-panel { margin-top: 10px; padding-top: 10px; border-top: 2px solid rgba(255,255,255,.13); }
  .profile-edit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .profile-edit-grid label { display: grid; gap: 4px; color: var(--muted); font-size: 8px; }
  .profile-edit-grid input { width: 100%; min-width: 0; height: 33px; margin: 0; padding: 5px 7px; font-size: 10px; }
  .profile-edit-grid .profile-edit-name { grid-column: 1 / -1; }
  .profile-edit-actions { display: flex; justify-content: flex-end; gap: 7px; margin-top: 9px; }
  .profile-edit-actions button { margin: 0; padding: 7px 11px; font-size: 9px; }
  .signin-update-notice {
    position: fixed;
    z-index: 2;
    top: 50vh;
    top: 50dvh;
    left: 50%;
    width: min(400px, calc(100vw - 24px));
    margin: 0;
    padding: 16px 17px 18px;
    overflow: hidden;
    border: 1px solid rgba(220, 230, 222, .2);
    border-radius: 15px;
    background: linear-gradient(180deg, rgba(31, 39, 33, .97), rgba(12, 18, 14, .97));
    box-shadow: 0 12px 30px rgba(0, 0, 0, .46), inset 0 1px 0 rgba(255, 255, 255, .08);
    text-align: left;
    transform: translate(-50%, -50%);
  }
  .signin-update-notice[hidden] { display: none; }
  .signin-update-notice header { padding: 0 1px 11px; border-bottom: 1px solid rgba(220, 230, 222, .2); }
  .signin-update-notice header strong { color: #fff; font-size: 11px; font-weight: 900; letter-spacing: .12em; }
  .signin-update-history {
    display: grid;
    gap: 16px;
    max-height: min(42svh, 300px);
    margin: 13px 0 0;
    padding: 0 5px 0 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    color: #e9eeea;
    font-size: 14px;
    line-height: 1.45;
    list-style: none;
    scrollbar-color: rgba(255, 255, 255, .52) transparent;
    scrollbar-width: thin;
  }
  .update-release { margin: 0; padding: 0; }
  .update-release-heading { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
  .update-release-heading strong { color: #fff; font-size: 13px; font-weight: 900; }
  .update-release-heading time { margin-left: auto; color: #c8d0ca; font-size: 10px; font-style: normal; letter-spacing: .06em; text-align: right; }
  .update-release ul { display: grid; gap: 5px; margin: 0; padding-left: 17px; }
  .update-release li::marker { color: #fff; }
  .chat-name { cursor: pointer; }
  .chat-name:hover { filter: brightness(1.2); }
  #duelReplay { position: fixed; inset: 0; z-index: 10; background: #42494b; }
  #duelReplay[hidden] { display: none; }
  #duelReplayHud { position: fixed; top: 12px; left: 50%; display: flex; align-items: center; gap: 10px; transform: translateX(-50%); color: #eef1ee; font: 900 11px var(--font-rounded); letter-spacing: .08em; white-space: nowrap; }
  .duel-replay-player-name { display: inline-flex; align-items: center; gap: 3px; }
  #duelReplayHud button { margin: 0; padding: 7px 10px; border-width: 2px; border-radius: 7px; font-size: 11px; }
  body.is-replaying #hud { display: none; }
  body.is-replaying #duelReplay { display: block; background: transparent; pointer-events: none; }
  body.is-replaying #duelReplayHud { pointer-events: auto; z-index: 11; }
  .secondary-button { margin-left: 6px; background: linear-gradient(#6e797a, #41494a); }
  .chat-replay { display: inline-grid; place-items: center; width: 25px; min-width: 25px; height: 25px; margin: 0 0 0 3px; padding: 0; border: 0; border-radius: 4px; background: transparent; line-height: 1; vertical-align: middle; }
  .chat-replay-icon { width: 25px; height: 25px; background: center / contain no-repeat url("duel-replay-play-medallion-v1.png"); mix-blend-mode: screen; -webkit-text-stroke: 0; text-shadow: none; }

  @media (max-width: 520px) {
    .duel-stats { grid-template-columns: 1fr; }
  }

  @media (max-width: 600px), (pointer: coarse) {
    .modal.player-profile-modal { border-width: 2px; border-radius: 10px; }
    .player-profile-header { gap: 7px; }
    .profile-window-icon { width: 46px; min-width: 46px; height: 46px; border-radius: 6px; }
    .player-profile-title-row { gap: 7px; }
    .player-profile-header h2 { font-size: clamp(11px, 3.8vw, 16px); }
    .player-profile-presence { margin-top: 2px; font-size: 7px; line-height: 1.15; }
    #playerProfilePower { font-size: 10px; }
    .player-profile-modal .profile-tabs { margin: 8px 0 5px; }
    .player-profile-modal .profile-tab { padding: 5px 9px; font-size: 9px; }
    .player-profile-modal .profile-grid { gap: 4px; }
    .player-profile-modal .profile-grid > div { padding: 6px 4px; }
    .player-profile-modal .profile-grid dt { font-size: 7px; }
    .player-profile-modal .profile-grid dd { margin-top: 2px; font-size: 10px; }
    .player-profile-modal .profile-stat-grid { gap: 0; }
    .player-profile-modal .profile-stat-grid > div { grid-template-columns: 106px minmax(0, 1fr); column-gap: 6px; height: 44px; min-height: 44px; padding: 0 6px; }
    .player-profile-modal .profile-stat-grid > div.is-expanded { height: 88px; }
    .player-profile-modal .profile-stat-summary { grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr) 16px minmax(0, 1fr); gap: 0; }
    .player-profile-modal .profile-stat-sources { gap: 5px; }
    .player-profile-modal .profile-stat-grid dt, .player-profile-modal .profile-stat-grid dd { margin: 0; font-size: 9px; }
    .profile-edit-button { margin-top: 5px; padding: 4px 7px; font-size: 8px; }
    .modal.leaderboard-modal { padding: max(9px, env(safe-area-inset-top)) max(9px, env(safe-area-inset-right)) 0 max(9px, env(safe-area-inset-left)); }
    .leaderboard-tabs { margin: 4px 0 3px; }
    .leaderboard-tabs .profile-tab { padding: 3px 8px; font-size: 9px; }
    .leaderboard-podium { min-height: 124px; margin-bottom: 3px; padding: 3px 3px 0; }
    .leaderboard-podium-player { grid-template-rows: 12px 69px auto; padding: 0 1px; }
    .leaderboard-podium-rank-1 { grid-template-rows: 12px 73px auto; }
    .leaderboard-podium-name { font-size: 7px; }
    .leaderboard-podium-name .player-gender-icon { width: 9px; height: 11px; }
    canvas.leaderboard-podium-canvas { height: 69px; }
    .leaderboard-podium-rank-1 canvas.leaderboard-podium-canvas { height: 73px; }
    .leaderboard-podium-rank-1 .leaderboard-podium-step { height: 25px; }
    .leaderboard-podium-rank-2 .leaderboard-podium-step { height: 20px; }
    .leaderboard-podium-rank-3 .leaderboard-podium-step { height: 15px; }
    .leaderboard-podium-rank-label { font-size: 10px; }
    .leaderboard-column-headings { padding: 0 7px 2px 35px; font-size: 7px; }
    .leaderboard-rows { gap: 0; padding: 0; }
    .leaderboard-row { min-height: 44px; padding: 0 7px; }
    .leaderboard-rank { font-size: 8px; }
    .leaderboard-name, .leaderboard-value { font-size: 9px; }
    .modal.dev-audit-modal { padding: 9px; }
  }

  @media (max-width: 420px) {
    .player-profile-title-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
    #playerProfilePower { width: 100%; margin: 0; font-size: 9px; text-align: right; }
  }

  .upgrade-modal {
    width: var(--game-window-width);
    max-width: none;
    border-color: rgba(255,218,94,.52);
  }

  .boots-icon {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin: 0 auto 12px;
  }

  .boots-icon span {
    position: relative;
    display: block;
    width: 40px;
    height: 58px;
    border: 4px solid #32190d;
    border-radius: 8px 8px 12px 12px;
    background: linear-gradient(90deg, #8a481d 0 24%, #da8e32 24% 76%, #6a3518 76%);
  }

  .boots-icon span::after {
    content: "";
    position: absolute;
    left: -9px;
    bottom: -7px;
    width: 48px;
    height: 15px;
    border: 4px solid #32190d;
    border-radius: 6px 6px 11px 11px;
    background: #f0c158;
  }

  .upgrade-modal h2 {
    margin: 0;
    color: #ffe777;
    font-size: clamp(22px, 6vw, 32px);
    line-height: 1;
    text-shadow: var(--text-shadow);
  }

  .upgrade-stat {
    margin: 12px 0 0;
    color: #76ed7e;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: .06em;
  }

  .modal {
    width: min(620px, calc(100vw - 26px));
    background: var(--panel2);
    border: 3px solid rgba(255,255,255,.20);
    border-radius: 14px;
    padding: 20px;
    text-align: center;
  }

  #connectionPanel,
  #accountChoicePanel,
  #gameUpdateGate .game-update-modal {
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  h1 {
    margin: 0 0 8px;
    font-size: clamp(28px, 7vw, 54px);
    line-height: .95;
    color: #ffe777;
    text-shadow: var(--text-shadow-large);
  }

  p {
    color: var(--muted);
    margin: 8px auto;
    max-width: 540px;
    line-height: 1.45;
  }

  button {
    pointer-events: auto;
    border: 4px solid #0a0a0a;
    border-radius: 10px;
    background: linear-gradient(#72ef58, #31bd34);
    color: white;
    font: 900 20px var(--font-rounded);
    padding: 12px 24px;
    margin-top: 12px;
    cursor: pointer;
    text-shadow: var(--text-shadow);
  }

  button:active {
    transform: translateY(3px);
  }

  :fullscreen,
  :-webkit-full-screen {
    width: 100%;
    height: 100%;
    background: #000;
  }


  .key {
    display: inline-block;
    min-width: 24px;
    padding: 2px 5px;
    border: 1px solid #777;
    border-bottom-width: 3px;
    border-radius: 4px;
    background: #282d2a;
    color: #fff;
    text-align: center;
  }

  #joystick {
    display: block;
    pointer-events: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 118px;
    height: 118px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,.25);
    background: rgba(0,0,0,.24);
    opacity: 0;
    transform: translate3d(-160px, -160px, 0);
    will-change: transform, opacity;
    contain: layout paint;
    z-index: 4;
  }

  #stick {
    position: absolute;
    left: 36px;
    top: 36px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255,255,255,.42);
    border: 2px solid rgba(0,0,0,.40);
    transform: translate3d(0, 0, 0);
    will-change: transform;
  }

  @media (pointer: coarse), (max-width: 800px) {
    .card {
      background: rgba(13, 20, 17, .96);
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
    .card { padding: 6px 8px; }
    .topbar { top: var(--hud-safe-top); right: var(--hud-safe-right); left: var(--hud-safe-left); }
    .player-hud-card { column-gap: 7px; padding: 6px 7px 6px 6px; background: var(--hud-surface); }
    .profile-icon-button { border-radius: 5px; }
    .player-summary { min-width: 0; gap: 5px; padding: 0 2px; }
    .bar { width: 100%; height: 100%; margin: 0; }
    #playerName, #playerPower { font-size: 11.25px; }
    #hpText { font-size: 10px; line-height: 11px; transform: translateY(-1px); }
    .settings-button { font-size: 25px; }
    .toolbar-icon { width: 28px; height: 28px; }
    #chatPanel {
      padding-bottom: 5px;
    }
  }

  /*
   * Readability guardrails for functional UI copy. Apple recommends 17pt body
   * text and an 11pt minimum on iOS; these selectors keep compact game labels
   * at that minimum while the semantic tokens above leave room for text scaling.
   */
  .fps-status,
  #musicVolumeValue,
  #sfxVolumeValue,
  .account-button,
  .account-status,
  .respawn-ad-button,
  .respawn-ad-copy strong,
  .respawn-ad-copy > span,
  .respawn-boost-status,
  #duelStatus,
  .item-drop-stats,
  #topMeta,
  .chat-header,
  #chatMessages,
  #chatPanel:not(.is-large) #topMeta,
  #chatPanel:not(.is-large) .chat-name,
  #chatPanel:not(.is-large) .chat-text,
  #chatPanel:not(.is-large) .chat-line.has-replay .chat-text,
  .chat-time,
  .game-update-modal p,
  .signin-version,
  .tech-tree-active,
  .tech-tree-node strong,
  .tech-tree-detail-content span,
  .tech-tree-research-time span,
  .tech-tree-timer-label,
  .tech-tree-action,
  .dragon-result-row,
  .dragon-world-notice-row,
  .player-profile-presence,
  .profile-gender-label,
  .profile-gender-value,
  .profile-tab,
  .profile-grid dt,
  .profile-stat-grid dt,
  .profile-stat-grid dd,
  .profile-name-editor-modal label,
  .leaderboard-podium-name,
  .leaderboard-podium-rank-label,
  .leaderboard-column-headings,
  .leaderboard-rank,
  .leaderboard-name,
  .leaderboard-guest,
  .leaderboard-value,
  .dev-audit-button,
  .dev-performance-stats dt,
  .dev-performance-stats dd,
  .dev-cutscene-trigger,
  .dev-presence-control strong,
  .dev-presence-control small,
  .dev-presence-control button,
  .dev-load-test-actions label,
  .dev-load-test-actions input,
  .dev-audit-help,
  .dev-bug-report,
  .dev-bug-report-meta,
  .dev-bug-report-clear,
  .profile-edit-button,
  .profile-duel-button,
  .profile-edit-grid label,
  .profile-edit-grid input,
  .profile-edit-actions button,
  .update-release-heading time,
  #playerProfilePower,
  #hpText,
  .player-profile-modal .profile-tab,
  .player-profile-modal .profile-grid dt,
  .player-profile-modal .profile-grid dd,
  .player-profile-modal .profile-stat-grid dt,
  .player-profile-modal .profile-stat-grid dd,
  .leaderboard-tabs .profile-tab {
    font-size: var(--font-readable-min);
  }

  .loading-detail,
  .session-takeover-note {
    font-size: var(--font-readable-min) !important;
  }

  .item-inspection-copy p,
  .chat-text,
  .game-update-modal p,
  .loading-detail,
  .session-takeover-note,
  .dev-bug-report {
    line-height: var(--line-height-readable);
  }

  @media (prefers-contrast: more) {
    :root {
      --border: rgba(255,255,255,.34);
      --muted: #e0e8e1;
    }

    .card,
    .item-inspection-panel,
    .profile-stat-grid,
    .leaderboard-rows,
    .chat-text {
      border-color: rgba(255,255,255,.38);
      background-color: rgba(5,9,7,.98);
    }

    .card.inventory-panel,
    .card.settings-panel,
    #chatPanel.is-large,
    .modal.leaderboard-modal,
    .tech-tree-window {
      --inventory-muted: #e0e8e1;
      background: #050907;
      color: #fff;
    }
  }