:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #f4f1e7;
  background: #0f1410;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
html, body, #app, .game-root { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { overscroll-behavior: none; touch-action: none; user-select: none; }
button { font: inherit; }

.game-root { position: relative; background: #0d120e; }
.game-canvas { display: block; width: 100%; height: 100%; outline: none; touch-action: none; }

.loading-screen {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-content: center; gap: 14px;
  background: radial-gradient(circle at 50% 42%, #263626 0, #111712 52%, #090d0a 100%);
  transition: opacity 360ms ease, visibility 360ms ease;
}
.loading-screen--hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.loading-logo { font-size: clamp(44px, 9vw, 92px); font-weight: 950; letter-spacing: 0.06em; line-height: 0.88; text-align: center; text-shadow: 0 8px 35px rgba(0,0,0,.55); }
.loading-subtitle { text-align: center; opacity: .72; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; }
.loading-track { width: min(56vw, 360px); height: 4px; background: rgba(255,255,255,.12); overflow: hidden; border-radius: 99px; }
.loading-track span { display: block; width: 44%; height: 100%; background: #d5b463; border-radius: inherit; animation: loading 1s ease-in-out infinite alternate; }
@keyframes loading { from { transform: translateX(-30%); } to { transform: translateX(160%); } }

.class-select {
  position: absolute; inset: 0; z-index: 80; display: grid; place-items: center; padding: clamp(14px, 2vw, 28px);
  background: linear-gradient(180deg, rgba(4,8,5,.46), rgba(4,8,5,.82));
  backdrop-filter: blur(5px) saturate(.9);
  transition: opacity 180ms ease, transform 180ms ease;
  pointer-events: auto;
}
.class-select--closing { opacity: 0; transform: scale(1.015); pointer-events: none; }
.class-select__panel { width: min(1160px, 96vw); padding: clamp(16px, 2.2vw, 30px); border: 1px solid rgba(255,255,255,.12); border-radius: 22px; background: rgba(10,14,11,.84); box-shadow: 0 30px 80px rgba(0,0,0,.42); }
.class-select__eyebrow { color: #d8bd76; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.class-select h1 { margin: 6px 0 4px; font-size: clamp(28px, 4vw, 48px); line-height: 1; }
.class-select p { margin: 0 0 18px; max-width: 720px; color: rgba(255,255,255,.62); font-size: 13px; }
.class-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.class-card {
  --class-accent: #d5b463;
  min-height: 270px; padding: 16px; border: 1px solid color-mix(in srgb, var(--class-accent) 38%, rgba(255,255,255,.08)); border-radius: 16px;
  text-align: left; color: #f6f1e4; background: linear-gradient(160deg, color-mix(in srgb, var(--class-accent) 14%, #141914 86%), rgba(11,15,12,.98));
  box-shadow: inset 0 1px rgba(255,255,255,.03); cursor: pointer; transition: transform 160ms ease, border-color 160ms ease, filter 160ms ease;
  display: flex; flex-direction: column; align-items: flex-start;
}
.class-card:hover, .class-card:focus-visible { transform: translateY(-4px); border-color: var(--class-accent); filter: brightness(1.08); outline: none; }
.class-card__sigil { width: 46px; aspect-ratio: 1; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--class-accent) 24%, #171c18 76%); border: 1px solid color-mix(in srgb, var(--class-accent) 55%, transparent); color: var(--class-accent); font-size: 22px; font-weight: 900; margin-bottom: 14px; }
.class-card__meta { font-size: 9px; text-transform: uppercase; letter-spacing: .11em; color: var(--class-accent); font-weight: 800; }
.class-card strong { display: block; margin-top: 3px; font-size: 23px; }
.class-card em { margin-top: 5px; font-style: normal; font-size: 12px; font-weight: 700; }
.class-card__description { display: block; margin-top: 9px; min-height: 50px; color: rgba(255,255,255,.58); font-size: 11px; line-height: 1.45; }
.class-card__stats { display: flex; gap: 7px; flex-wrap: wrap; margin-top: auto; padding-top: 12px; }
.class-card__stats b { font-size: 9px; padding: 5px 7px; border-radius: 999px; background: rgba(255,255,255,.06); font-weight: 700; }
.class-card__cta { margin-top: 10px; color: var(--class-accent); font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.class-select__hint { margin-top: 14px; font-size: 10px; color: rgba(255,255,255,.45); text-align: center; }

.hud { position: absolute; inset: 0; z-index: 20; pointer-events: none; --class-accent: #d5b463; }
.hud-top-left { position: absolute; left: max(18px, env(safe-area-inset-left)); top: max(18px, env(safe-area-inset-top)); width: min(345px, 43vw); }
.brand-chip { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; text-shadow: 0 2px 8px rgba(0,0,0,.7); }
.brand-chip strong { letter-spacing: .06em; font-size: 20px; }
.brand-chip span { font-size: 10px; opacity: .65; letter-spacing: .08em; }
.player-card { border: 1px solid rgba(255,255,255,.12); background: rgba(7,10,8,.62); backdrop-filter: blur(10px); border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.24); overflow: hidden; }
.player-card__heading { display: flex; justify-content: space-between; align-items: baseline; padding: 9px 10px 4px; }
.player-card__heading b { font-size: 12px; color: var(--class-accent); }
.player-card__heading span { font-size: 9px; opacity: .55; }
.status-bars { display: grid; gap: 6px; padding: 6px 10px 8px; }
.status-row { display: grid; grid-template-columns: 24px 1fr 72px; align-items: center; gap: 8px; font-size: 11px; }
.status-row > span { font-weight: 800; opacity: .85; }
.status-row b { font-size: 10px; text-align: right; opacity: .7; font-weight: 650; }
.bar { height: 9px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,.5); }
.bar i { display: block; width: 100%; height: 100%; border-radius: inherit; transition: width 120ms linear; }
.bar--hp { background: linear-gradient(90deg, #7c1e25, #c74b4b); }
.bar--resource { background: linear-gradient(90deg, color-mix(in srgb, var(--class-accent) 48%, #1d3550), var(--class-accent)); }
.player-card__foot { display: flex; justify-content: space-between; padding: 5px 10px 7px; border-top: 1px solid rgba(255,255,255,.05); font-size: 9px; color: rgba(255,255,255,.52); }

.controls-tip { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); padding: 8px 11px; background: rgba(7,10,8,.52); border: 1px solid rgba(255,255,255,.09); border-radius: 999px; font-size: 11px; color: rgba(255,255,255,.76); white-space: nowrap; backdrop-filter: blur(8px); }

.target-frame { position: absolute; top: 58px; left: 50%; transform: translateX(-50%); width: min(300px, 32vw); padding: 9px 10px 8px; background: rgba(15,8,9,.7); border: 1px solid rgba(255,100,88,.35); border-radius: 12px; backdrop-filter: blur(9px); box-shadow: 0 10px 26px rgba(0,0,0,.26); }
.target-frame[hidden] { display: none; }
.target-frame > div:first-child { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.target-frame strong { font-size: 12px; }
.target-frame span { font-size: 9px; opacity: .58; }
.target-bar { margin-top: 6px; height: 8px; background: rgba(255,255,255,.09); border-radius: 99px; overflow: hidden; }
.target-bar i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, #811f27, #d44f4f); border-radius: inherit; transition: width 120ms linear; }
.target-frame small { display: block; margin-top: 4px; text-align: right; font-size: 8px; opacity: .55; }

.ability-bar { position: absolute; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; gap: 8px; pointer-events: auto; }
.ability-button { position: relative; width: clamp(58px, 6.1vw, 76px); aspect-ratio: 1; border: 1px solid color-mix(in srgb, var(--class-accent) 42%, rgba(255,255,255,.08)); border-radius: 12px; color: #fff7db; background: linear-gradient(145deg, color-mix(in srgb, var(--class-accent) 15%, rgba(46,53,44,.98)), rgba(24,29,24,.98)); box-shadow: inset 0 0 0 2px rgba(0,0,0,.28), 0 8px 20px rgba(0,0,0,.32); cursor: pointer; overflow: hidden; }
.ability-button::before { content: ''; position: absolute; inset: 7px; border-radius: 8px; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--class-accent) 68%, white 8%), color-mix(in srgb, var(--class-accent) 32%, #462d4a 68%) 48%, rgba(23,26,24,.2) 72%); opacity: .72; }
.ability-button__name { position: relative; z-index: 2; display: block; padding: 0 5px; font-weight: 850; font-size: clamp(8px, .75vw, 10px); line-height: 1.1; text-shadow: 0 2px 5px rgba(0,0,0,.7); }
.ability-button small { position: absolute; right: 5px; bottom: 3px; z-index: 4; font-size: 9px; opacity: .72; }
.ability-button__cooldown { position: absolute; z-index: 3; inset: 0; transform-origin: bottom; transform: scaleY(0); background: rgba(2,4,3,.68); pointer-events: none; }
.ability-button__timer { position: absolute; z-index: 5; inset: 0; display: grid; place-items: center; font-size: 14px; text-shadow: 0 2px 6px #000; pointer-events: none; }
.ability-button--cooling { filter: saturate(.55); }
.ability-button--active { animation: abilityPulse 340ms ease; }
@keyframes abilityPulse { 0% { transform: translateY(0) scale(1); filter: brightness(1); } 45% { transform: translateY(-6px) scale(1.08); filter: brightness(1.6); } 100% { transform: translateY(0) scale(1); filter: brightness(1); } }

.combat-toast { position: absolute; left: 50%; bottom: 116px; transform: translate(-50%, 8px); padding: 8px 12px; border-radius: 999px; background: rgba(8,11,9,.72); border: 1px solid color-mix(in srgb, var(--class-accent) 34%, rgba(255,255,255,.08)); color: #f4f1e7; font-size: 11px; opacity: 0; transition: opacity 160ms ease, transform 160ms ease; backdrop-filter: blur(8px); }
.combat-toast--visible { opacity: 1; transform: translate(-50%, 0); }

.server-chip { position: absolute; right: max(14px, env(safe-area-inset-right)); top: max(14px, env(safe-area-inset-top)); padding: 7px 9px; border-radius: 999px; background: rgba(11,15,12,.58); border: 1px solid rgba(255,255,255,.1); font-size: 10px; opacity: .72; backdrop-filter: blur(8px); }
.server-chip--ok { border-color: rgba(128,205,123,.5); color: #d7ffd4; }

.touch-controls { display: none; }
.orientation-gate { display: none; position: absolute; inset: 0; z-index: 120; background: rgba(8,11,9,.96); place-items: center; padding: 24px; }
.orientation-gate--visible { display: grid; }
.orientation-card { display: grid; justify-items: center; gap: 9px; text-align: center; }
.orientation-card strong { font-size: 26px; }
.orientation-card span { opacity: .68; }
.phone-icon { width: 72px; height: 72px; border: 2px solid rgba(255,255,255,.7); display: grid; place-items: center; border-radius: 16px; font-size: 42px; transform: rotate(-90deg); margin-bottom: 8px; }

@media (max-width: 920px) {
  .class-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .class-select__panel { max-height: 92vh; overflow: auto; }
  .class-card { min-height: 205px; }
  .class-card__description { min-height: auto; }
}

@media (pointer: coarse), (max-width: 900px) {
  .desktop-only { display: none; }
  .touch-controls { display: block; }
  .hud-top-left { width: min(290px, 42vw); top: 8px; left: max(8px, env(safe-area-inset-left)); }
  .brand-chip { margin-bottom: 4px; }
  .brand-chip strong { font-size: 14px; }
  .brand-chip span { font-size: 7px; }
  .player-card__heading { padding: 6px 7px 2px; }
  .player-card__heading b { font-size: 10px; }
  .player-card__heading span { font-size: 7px; }
  .status-bars { padding: 4px 7px 5px; gap: 4px; }
  .status-row { grid-template-columns: 18px 1fr 55px; gap: 4px; font-size: 8px; }
  .status-row b { font-size: 7px; }
  .bar { height: 6px; }
  .player-card__foot { font-size: 7px; padding: 3px 7px 5px; }
  .server-chip { font-size: 7px; top: 7px; right: max(7px, env(safe-area-inset-right)); max-width: 31vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .target-frame { top: 8px; width: min(250px, 34vw); padding: 6px 7px; }
  .target-frame strong { font-size: 9px; }
  .target-frame span, .target-frame small { font-size: 7px; }
  .target-bar { height: 6px; }

  .ability-bar { right: max(12px, env(safe-area-inset-right)); left: auto; bottom: max(10px, env(safe-area-inset-bottom)); transform: none; gap: 5px; }
  .ability-button { width: clamp(43px, 9vh, 58px); border-radius: 9px; }
  .ability-button::before { inset: 5px; }
  .ability-button__name { font-size: 7px; }
  .combat-toast { bottom: 78px; font-size: 8px; }

  .joystick-zone { position: absolute; left: max(16px, env(safe-area-inset-left)); bottom: max(14px, env(safe-area-inset-bottom)); width: min(25vh, 142px); aspect-ratio: 1; display: grid; place-items: center; pointer-events: auto; touch-action: none; }
  .joystick-ring { width: 100%; height: 100%; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); background: rgba(8,11,9,.26); display: grid; place-items: center; backdrop-filter: blur(3px); }
  .joystick-knob { width: 42%; height: 42%; border-radius: 50%; background: rgba(235,230,205,.32); border: 1px solid rgba(255,255,255,.38); box-shadow: 0 8px 22px rgba(0,0,0,.25); will-change: transform; }
  .dash-button { position: absolute; right: max(16px, env(safe-area-inset-right)); bottom: calc(max(10px, env(safe-area-inset-bottom)) + min(9vh, 58px) + 10px); width: 54px; height: 54px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--class-accent) 45%, rgba(255,255,255,.12)); background: rgba(44,36,26,.72); color: #f7e4ac; font-size: 8px; font-weight: 900; letter-spacing: .05em; pointer-events: auto; }

  .class-select { padding: 8px; }
  .class-select__panel { width: 98vw; max-height: 96vh; padding: 10px; border-radius: 14px; }
  .class-select__eyebrow { font-size: 8px; }
  .class-select h1 { margin-top: 3px; font-size: 23px; }
  .class-select p { font-size: 9px; margin-bottom: 9px; }
  .class-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
  .class-card { min-height: 145px; padding: 9px; border-radius: 10px; }
  .class-card__sigil { width: 28px; border-radius: 7px; font-size: 14px; margin-bottom: 6px; }
  .class-card__meta { font-size: 6px; }
  .class-card strong { font-size: 14px; }
  .class-card em { font-size: 7px; }
  .class-card__description { font-size: 7px; margin-top: 4px; line-height: 1.25; }
  .class-card__stats { display: none; }
  .class-card__cta { margin-top: auto; padding-top: 5px; font-size: 7px; }
  .class-select__hint { margin-top: 6px; font-size: 7px; }
}

@media (max-height: 520px) and (orientation: landscape) {
  .hud-top-left { transform: scale(.84); transform-origin: top left; }
  .ability-button { width: 43px; }
  .joystick-zone { width: 108px; }
  .dash-button { width: 48px; height: 48px; bottom: 62px; }
}

/* ===== BRUTAL FASE 3 · combate, casteo y arena ===== */
.target-frame__foot { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:4px; }
.target-frame__foot small { margin:0; text-align:left; }
.target-frame__foot b { font-size:8px; letter-spacing:.09em; text-transform:uppercase; color:rgba(255,255,255,.42); }
.target-frame__auto--active { color:#f6d27a !important; text-shadow:0 0 10px rgba(246,210,122,.38); }

.ability-button em { position:absolute; left:5px; bottom:3px; z-index:4; font-style:normal; font-size:7px; opacity:.55; }

.cast-bar {
  position:absolute; left:50%; bottom:112px; transform:translateX(-50%); width:min(390px,42vw);
  padding:8px 10px; border-radius:10px; border:1px solid color-mix(in srgb,var(--class-accent) 38%,rgba(255,255,255,.08));
  background:rgba(7,10,8,.78); backdrop-filter:blur(10px); box-shadow:0 12px 28px rgba(0,0,0,.32);
}
.cast-bar[hidden] { display:none; }
.cast-bar > div:first-child { display:flex; justify-content:space-between; gap:12px; align-items:center; margin-bottom:5px; }
.cast-bar strong { font-size:10px; color:#fff4ce; }
.cast-bar span { font-size:9px; opacity:.62; }
.cast-track { height:9px; border-radius:99px; overflow:hidden; background:rgba(255,255,255,.1); box-shadow:inset 0 1px 3px rgba(0,0,0,.55); }
.cast-track i { display:block; height:100%; width:0; border-radius:inherit; background:linear-gradient(90deg,color-mix(in srgb,var(--class-accent) 65%,#7257c8),var(--class-accent)); transition:width 50ms linear; }

.queue-card {
  position:absolute; right:max(14px,env(safe-area-inset-right)); top:52px; width:190px; padding:11px;
  border-radius:13px; border:1px solid rgba(255,255,255,.1); background:rgba(8,11,9,.68); backdrop-filter:blur(10px);
  box-shadow:0 12px 28px rgba(0,0,0,.26); display:grid; gap:3px; pointer-events:auto; transition:border-color 160ms ease, transform 160ms ease;
}
.queue-card--near { border-color:rgba(211,177,92,.42); }
.queue-card--queued { border-color:rgba(255,196,91,.72); box-shadow:0 0 0 1px rgba(255,196,91,.12),0 12px 30px rgba(0,0,0,.3); }
.queue-card__eyebrow { font-size:7px; font-weight:900; letter-spacing:.16em; color:#d7b86d; }
.queue-card strong { font-size:18px; line-height:1; }
.queue-card span { font-size:9px; color:rgba(255,255,255,.58); }
.queue-card small { font-size:12px; font-variant-numeric:tabular-nums; color:#f5dc9b; margin-top:2px; }
.queue-card button { margin-top:6px; border:1px solid rgba(215,184,109,.4); border-radius:8px; padding:7px 8px; color:#fff0bf; background:rgba(112,78,35,.42); font-size:9px; font-weight:850; cursor:pointer; }
.queue-card button:disabled { opacity:.35; cursor:not-allowed; }
.queue-card--queued button { background:rgba(109,47,42,.5); border-color:rgba(221,116,97,.45); color:#ffd9cd; }

.interaction-prompt {
  position:absolute; left:50%; bottom:172px; transform:translateX(-50%); padding:8px 13px; border-radius:999px;
  border:1px solid rgba(222,190,111,.38); background:rgba(9,12,9,.76); color:#f6dda0; font-size:10px; font-weight:750;
  box-shadow:0 8px 24px rgba(0,0,0,.24); backdrop-filter:blur(7px); animation:promptPulse 1.4s ease-in-out infinite alternate;
}
.interaction-prompt[hidden] { display:none; }
@keyframes promptPulse { from{transform:translateX(-50%) translateY(2px); filter:brightness(.92)} to{transform:translateX(-50%) translateY(-1px); filter:brightness(1.15)} }

.combat-floats { position:absolute; left:50%; top:34%; width:1px; height:1px; pointer-events:none; }
.combat-float { position:absolute; left:var(--float-x,0); top:0; font-weight:950; font-size:17px; text-shadow:0 2px 6px rgba(0,0,0,.95); animation:combatFloat .82s ease-out forwards; white-space:nowrap; }
.combat-float--damage { color:#ffd080; }
.combat-float--heal { color:#aef3a7; }
@keyframes combatFloat { 0%{opacity:0; transform:translate(-50%,12px) scale(.78)} 15%{opacity:1; transform:translate(-50%,0) scale(1.08)} 100%{opacity:0; transform:translate(-50%,-58px) scale(.94)} }

.interact-button { display:none; }

@media (pointer:coarse), (max-width:900px) {
  .queue-card { top:36px; right:max(7px,env(safe-area-inset-right)); width:126px; padding:7px; border-radius:9px; gap:1px; }
  .queue-card__eyebrow { font-size:5px; }
  .queue-card strong { font-size:12px; }
  .queue-card span { font-size:6px; }
  .queue-card small { font-size:8px; }
  .queue-card button { padding:5px; font-size:6px; margin-top:3px; }
  .cast-bar { bottom:67px; width:min(270px,38vw); padding:5px 7px; }
  .cast-bar strong,.cast-bar span { font-size:7px; }
  .cast-track { height:6px; }
  .interaction-prompt { bottom:64px; font-size:7px; padding:6px 9px; max-width:38vw; text-align:center; }
  .interact-button { display:block; position:absolute; right:max(74px,calc(env(safe-area-inset-right) + 74px)); bottom:calc(max(10px,env(safe-area-inset-bottom)) + min(9vh,58px) + 12px); width:46px; height:46px; border-radius:50%; border:1px solid rgba(224,191,108,.48); background:rgba(74,58,33,.74); color:#ffe8ab; font-size:14px; font-weight:950; pointer-events:auto; }
  .combat-float { font-size:12px; }
}

@media (max-height:520px) and (orientation:landscape) {
  .queue-card { transform:scale(.86); transform-origin:top right; }
  .cast-bar { bottom:58px; }
  .interaction-prompt { bottom:54px; }
}

/* ===== BRUTAL FASE 4 · cuentas, personajes y persistencia ===== */
.auth-screen,
.character-lobby,
.bootstrap-error {
  position:absolute; inset:0; z-index:90; pointer-events:auto;
  background:linear-gradient(180deg,rgba(5,9,6,.58),rgba(5,9,6,.91));
  backdrop-filter:blur(7px) saturate(.9);
}
.auth-screen input,
.character-lobby input { user-select:text; touch-action:manipulation; }

.auth-screen { display:grid; place-items:center; padding:clamp(12px,2vw,28px); }
.auth-panel {
  width:min(1080px,96vw); display:grid; grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr); gap:clamp(18px,4vw,54px);
  padding:clamp(20px,4vw,48px); border:1px solid rgba(255,255,255,.11); border-radius:24px;
  background:radial-gradient(circle at 14% 20%,rgba(202,163,83,.12),transparent 34%),rgba(8,12,9,.88);
  box-shadow:0 32px 90px rgba(0,0,0,.48);
}
.auth-brand { grid-column:1/-1; display:flex; align-items:baseline; gap:10px; }
.auth-brand b { font-size:24px; letter-spacing:.06em; }
.auth-brand span { font-size:9px; letter-spacing:.13em; opacity:.5; }
.auth-copy { align-self:center; max-width:620px; }
.auth-kicker { color:#d9ba71; font-size:10px; font-weight:900; letter-spacing:.16em; }
.auth-copy h1 { margin:8px 0 10px; font-size:clamp(42px,7vw,82px); line-height:.88; letter-spacing:-.045em; }
.auth-copy p { margin:0; max-width:580px; color:rgba(255,255,255,.58); font-size:14px; line-height:1.55; }
.auth-points { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.auth-points span { padding:7px 10px; border:1px solid rgba(216,187,114,.19); border-radius:999px; background:rgba(216,187,114,.07); color:#ead8a7; font-size:9px; font-weight:750; }
.auth-form-card { align-self:center; padding:18px; border:1px solid rgba(255,255,255,.1); border-radius:17px; background:rgba(14,19,15,.84); box-shadow:0 16px 36px rgba(0,0,0,.25); }
.auth-tabs { display:grid; grid-template-columns:1fr 1fr; padding:3px; border-radius:10px; background:rgba(255,255,255,.05); margin-bottom:14px; }
.auth-tabs button { border:0; border-radius:8px; padding:9px; color:rgba(255,255,255,.48); background:transparent; cursor:pointer; font-weight:800; font-size:10px; }
.auth-tabs button.is-active { color:#f9e9bd; background:rgba(211,175,89,.16); box-shadow:inset 0 0 0 1px rgba(211,175,89,.2); }
.auth-form-card form { display:grid; gap:10px; }
.auth-form-card label { display:grid; gap:5px; color:rgba(255,255,255,.62); font-size:9px; font-weight:800; letter-spacing:.03em; }
.auth-form-card label[hidden] { display:none; }
.auth-form-card input,
.create-character input {
  width:100%; border:1px solid rgba(255,255,255,.12); border-radius:9px; padding:11px 12px;
  color:#fff4d5; background:rgba(2,5,3,.42); outline:none; font-size:12px;
}
.auth-form-card input:focus,
.create-character input:focus { border-color:rgba(223,187,99,.65); box-shadow:0 0 0 3px rgba(223,187,99,.08); }
.auth-submit { margin-top:3px; border:1px solid rgba(221,184,91,.42); border-radius:9px; padding:11px; color:#20180a; background:linear-gradient(180deg,#e3c372,#b98d3f); font-weight:950; font-size:11px; cursor:pointer; }
.auth-submit:disabled { opacity:.55; cursor:wait; }
.auth-error { min-height:18px; margin:0; color:#ff9e8f; font-size:9px; line-height:1.35; }
.auth-form-card > small { display:block; margin-top:8px; color:rgba(255,255,255,.32); font-size:8px; }

.character-lobby { overflow:auto; padding:clamp(10px,2vw,24px); }
.lobby-shell { width:min(1240px,97vw); min-height:calc(100vh - 48px); margin:0 auto; display:grid; grid-template-rows:auto 1fr; }
.lobby-header { display:flex; justify-content:space-between; align-items:center; padding:8px 2px 15px; }
.lobby-header > div:first-child { display:flex; align-items:baseline; gap:9px; }
.lobby-header b { font-size:20px; letter-spacing:.06em; }
.lobby-header span { font-size:8px; opacity:.5; letter-spacing:.1em; }
.lobby-user { display:flex; align-items:center; gap:9px; }
.lobby-user span { font-size:10px; opacity:.72; }
.lobby-user button,
.session-chip button { pointer-events:auto; border:1px solid rgba(255,255,255,.12); border-radius:999px; padding:6px 9px; color:#eee5cf; background:rgba(255,255,255,.05); font-size:8px; font-weight:800; cursor:pointer; }
.lobby-main { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(300px,.55fr); gap:16px; min-height:0; }
.lobby-existing,
.create-character { border:1px solid rgba(255,255,255,.1); border-radius:19px; background:rgba(9,13,10,.81); box-shadow:0 20px 56px rgba(0,0,0,.3); }
.lobby-existing { padding:clamp(16px,2.4vw,30px); }
.lobby-title span,
.create-character__heading span { color:#d7b86d; font-size:8px; font-weight:900; letter-spacing:.17em; }
.lobby-title h1 { margin:6px 0 4px; font-size:clamp(28px,4vw,48px); line-height:1; }
.lobby-title p { margin:0 0 18px; color:rgba(255,255,255,.4); font-size:9px; }
.character-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
.character-card {
  --char-accent:#d7b86d; min-height:205px; padding:15px; display:flex; flex-direction:column; align-items:flex-start;
  border:1px solid color-mix(in srgb,var(--char-accent) 34%,rgba(255,255,255,.08)); border-radius:14px; color:#f3eddf;
  background:linear-gradient(155deg,color-mix(in srgb,var(--char-accent) 11%,#141914),rgba(9,13,10,.96)); cursor:pointer; text-align:left;
  transition:transform 150ms ease,border-color 150ms ease,filter 150ms ease;
}
.character-card:hover,.character-card:focus-visible { transform:translateY(-3px); border-color:var(--char-accent); filter:brightness(1.08); outline:none; }
.character-card__sigil { width:42px; aspect-ratio:1; display:grid; place-items:center; border-radius:11px; margin-bottom:14px; color:var(--char-accent); background:color-mix(in srgb,var(--char-accent) 16%,#121713); border:1px solid color-mix(in srgb,var(--char-accent) 46%,transparent); font-weight:950; font-size:19px; }
.character-card small { color:var(--char-accent); font-size:7px; font-weight:900; text-transform:uppercase; letter-spacing:.12em; }
.character-card strong { margin-top:3px; font-size:22px; }
.character-card em { margin-top:3px; color:rgba(255,255,255,.55); font-style:normal; font-size:9px; }
.character-card__xp { width:100%; height:4px; margin-top:auto; border-radius:99px; overflow:hidden; background:rgba(255,255,255,.07); }
.character-card__xp i { display:block; height:100%; background:var(--char-accent); border-radius:inherit; }
.character-card > span:last-child { margin-top:7px; color:rgba(255,255,255,.48); font-size:8px; font-weight:750; }
.character-empty { grid-column:1/-1; min-height:205px; display:grid; place-items:center; border:1px dashed rgba(255,255,255,.12); border-radius:14px; color:rgba(255,255,255,.36); font-size:11px; }
.create-character { padding:18px; align-self:start; display:grid; gap:12px; }
.create-character.is-disabled { opacity:.48; }
.create-character__heading { display:grid; gap:3px; }
.create-character__heading strong { font-size:18px; }
.create-character label { display:grid; gap:5px; color:rgba(255,255,255,.5); font-size:8px; font-weight:800; }
.create-class-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:7px; }
.create-class { --char-accent:#d7b86d; display:grid; grid-template-columns:30px 1fr; grid-template-rows:auto auto; align-items:center; column-gap:8px; padding:8px; border:1px solid rgba(255,255,255,.08); border-radius:9px; background:rgba(255,255,255,.025); color:#eee8d9; text-align:left; cursor:pointer; }
.create-class b { grid-row:1/3; width:30px; height:30px; display:grid; place-items:center; border-radius:8px; color:var(--char-accent); background:color-mix(in srgb,var(--char-accent) 14%,#111612); }
.create-class span { font-size:9px; font-weight:900; }
.create-class small { font-size:6px; opacity:.42; }
.create-class.is-selected { border-color:var(--char-accent); background:color-mix(in srgb,var(--char-accent) 9%,rgba(255,255,255,.02)); }
.create-character__button { border:1px solid rgba(211,175,89,.4); border-radius:9px; padding:10px; color:#241b0b; background:linear-gradient(180deg,#dec06e,#ae8036); font-size:10px; font-weight:950; cursor:pointer; }
.create-character__button:disabled { opacity:.4; cursor:not-allowed; }
.create-character__error { min-height:15px; margin:0; color:#ff9e8f; font-size:8px; }
.lobby-loading,.bootstrap-error { display:grid; place-items:center; }
.lobby-loading { min-height:80vh; gap:7px; align-content:center; }
.lobby-loading b { font-size:36px; }
.lobby-loading span { color:rgba(255,255,255,.45); font-size:10px; }
.bootstrap-error { z-index:95; }
.bootstrap-error > div,.lobby-panel--error { padding:24px; border:1px solid rgba(255,255,255,.1); border-radius:16px; background:rgba(10,14,11,.91); text-align:center; }
.bootstrap-error button,.lobby-panel--error button { border:1px solid rgba(216,184,103,.4); border-radius:8px; padding:8px 12px; color:#f7e3ae; background:rgba(112,78,35,.4); cursor:pointer; }

.session-chip {
  position:absolute; left:max(18px,env(safe-area-inset-left)); top:132px; display:flex; align-items:center; gap:7px;
  padding:5px 7px; border:1px solid rgba(255,255,255,.09); border-radius:999px; background:rgba(7,10,8,.58); backdrop-filter:blur(8px);
  color:rgba(255,255,255,.52); font-size:8px; pointer-events:auto;
}
.session-chip span:first-child { color:#e6bf69; }
.session-chip span:first-child.is-ok { color:#a9e5a0; }
.player-card__heading i { font-style:normal; }

@media (max-width:900px) {
  .auth-screen { padding:6px; }
  .auth-panel { width:98vw; max-height:96vh; overflow:auto; grid-template-columns:1fr 310px; gap:12px; padding:12px; border-radius:14px; }
  .auth-brand { display:none; }
  .auth-copy h1 { font-size:36px; }
  .auth-copy p { font-size:9px; }
  .auth-points { margin-top:9px; gap:4px; }
  .auth-points span { font-size:6px; padding:4px 6px; }
  .auth-form-card { padding:10px; }
  .auth-tabs button { padding:6px; font-size:7px; }
  .auth-form-card input { padding:7px 8px; font-size:8px; }
  .auth-submit { padding:8px; font-size:8px; }
  .character-lobby { padding:6px; }
  .lobby-shell { width:99vw; min-height:auto; }
  .lobby-header { padding:2px 3px 6px; }
  .lobby-header b { font-size:13px; }
  .lobby-main { grid-template-columns:1.45fr .55fr; gap:7px; }
  .lobby-existing,.create-character { border-radius:11px; padding:9px; }
  .lobby-title h1 { font-size:22px; margin:2px 0; }
  .lobby-title p { margin-bottom:7px; }
  .character-grid { grid-template-columns:repeat(2,1fr); gap:6px; }
  .character-card { min-height:125px; padding:8px; border-radius:9px; }
  .character-card__sigil { width:27px; border-radius:7px; margin-bottom:5px; font-size:12px; }
  .character-card strong { font-size:13px; }
  .character-card em,.character-card > span:last-child { font-size:6px; }
  .character-empty { min-height:125px; font-size:7px; }
  .create-character { gap:6px; }
  .create-character__heading strong { font-size:11px; }
  .create-character input { padding:6px 7px; font-size:7px; }
  .create-class-grid { gap:4px; }
  .create-class { grid-template-columns:22px 1fr; padding:4px; gap:4px; border-radius:6px; }
  .create-class b { width:22px; height:22px; border-radius:5px; font-size:8px; }
  .create-class span { font-size:6px; }
  .create-class small { font-size:5px; }
  .create-character__button { padding:6px; font-size:7px; }
  .session-chip { left:max(8px,env(safe-area-inset-left)); top:95px; gap:4px; padding:3px 5px; font-size:6px; max-width:40vw; }
  .session-chip button { padding:3px 6px; font-size:6px; }
}

@media (max-height:520px) and (orientation:landscape) {
  .auth-copy h1 { font-size:32px; }
  .auth-copy p { line-height:1.3; }
  .auth-form-card { padding:8px; }
  .character-card { min-height:108px; }
  .session-chip { top:85px; transform:scale(.86); transform-origin:left top; }
}


/* ==============================================================
   BRUTAL 0.4.5-alpha · FASE 4.5 · VISUAL POLISH
   No altera gameplay ni persistencia. Capa de presentación.
   ============================================================== */
:root {
  --brutal-gold:#d7b45f;
  --brutal-gold-2:#f0d78d;
  --brutal-ink:#080b09;
  --brutal-panel:rgba(8,12,9,.78);
  --brutal-line:rgba(229,204,139,.18);
}

body { background:#07100c; }
.game-root::before {
  content:''; position:absolute; inset:0; z-index:8; pointer-events:none;
  background:radial-gradient(circle at 50% 46%, transparent 36%, rgba(1,5,3,.08) 68%, rgba(0,0,0,.34) 100%);
  mix-blend-mode:multiply;
}
.game-root::after {
  content:''; position:absolute; inset:0; z-index:9; pointer-events:none; opacity:.25;
  background-image:linear-gradient(rgba(255,255,255,.014) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.01) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.32),transparent 38%,transparent 72%,rgba(0,0,0,.26));
}

.loading-screen {
  background:
    radial-gradient(circle at 50% 34%, rgba(213,177,88,.2), transparent 20%),
    radial-gradient(circle at 50% 62%, rgba(51,98,72,.24), transparent 38%),
    linear-gradient(180deg,#101a13 0,#080d0a 68%,#050705 100%);
}
.loading-logo { font-family:Georgia,"Times New Roman",serif; letter-spacing:.11em; color:#f4e8c4; text-shadow:0 1px 0 #5a411d,0 5px 18px #000,0 0 46px rgba(220,181,88,.2); }
.loading-logo::first-letter { color:#e2bd61; }
.loading-subtitle { color:#cdbd95; }
.loading-track { height:3px; border:1px solid rgba(229,201,127,.18); background:rgba(0,0,0,.44); }
.loading-track span { background:linear-gradient(90deg,#7e5d27,#f1d88e,#9b7834); box-shadow:0 0 14px rgba(237,199,105,.45); }

/* AUTH — portada más narrativa */
.auth-screen,.character-lobby,.bootstrap-error {
  background:
    radial-gradient(circle at 18% 18%,rgba(200,163,80,.09),transparent 26%),
    radial-gradient(circle at 80% 72%,rgba(58,106,76,.12),transparent 34%),
    linear-gradient(180deg,rgba(3,8,5,.54),rgba(3,7,5,.92));
  backdrop-filter:blur(9px) saturate(.95);
}
.auth-panel {
  position:relative; overflow:hidden;
  border:1px solid rgba(225,198,126,.2); border-radius:10px;
  background:
    linear-gradient(90deg,rgba(8,12,9,.96),rgba(8,12,9,.84)),
    radial-gradient(circle at 25% 20%,rgba(205,167,78,.14),transparent 36%);
  box-shadow:0 38px 120px rgba(0,0,0,.62),inset 0 1px rgba(255,243,209,.05);
}
.auth-panel::before,.lobby-existing::before,.create-character::before {
  content:''; position:absolute; inset:7px; border:1px solid rgba(221,190,111,.06); pointer-events:none;
}
.auth-brand b,.lobby-header b,.brand-chip strong { font-family:Georgia,"Times New Roman",serif; color:#f0e6cc; text-shadow:0 2px 10px rgba(0,0,0,.7); }
.auth-brand b { font-size:29px; letter-spacing:.12em; }
.auth-brand span,.lobby-header > div:first-child span,.brand-chip span { color:#cbb783; }
.auth-copy { position:relative; align-self:center; padding:18px 6px 22px 0; }
.auth-kicker { color:#d6b75f; }
.auth-copy h1 { max-width:620px; font-family:Georgia,"Times New Roman",serif; font-weight:650; letter-spacing:-.035em; color:#fff5d9; text-shadow:0 8px 26px rgba(0,0,0,.42); }
.auth-copy p { max-width:560px; color:rgba(242,234,211,.61); }
.auth-worldmark { width:230px; margin:22px 0 3px; padding:12px 14px; display:grid; grid-template-columns:34px 1fr; grid-template-rows:auto auto; column-gap:10px; align-items:center; border:1px solid rgba(218,184,97,.17); background:linear-gradient(90deg,rgba(211,174,80,.07),transparent); }
.auth-worldmark > span { grid-row:1/3; width:32px; height:32px; display:grid; place-items:center; color:#edcd77; border:1px solid rgba(232,199,111,.28); transform:rotate(45deg); }
.auth-worldmark > span::first-letter { transform:rotate(-45deg); }
.auth-worldmark b { font-family:Georgia,"Times New Roman",serif; font-size:11px; letter-spacing:.12em; color:#e7d7aa; }
.auth-worldmark small { font-size:6px; letter-spacing:.16em; color:rgba(255,255,255,.34); }
.auth-points span { position:relative; padding-left:15px; border-color:rgba(224,195,117,.12); background:rgba(230,198,111,.035); }
.auth-points span::before { content:'◇'; position:absolute; left:6px; color:#d4b35e; }
.auth-form-card { position:relative; border:1px solid rgba(230,202,128,.16); border-radius:7px; background:linear-gradient(180deg,rgba(16,21,17,.93),rgba(6,9,7,.96)); box-shadow:0 24px 64px rgba(0,0,0,.36),inset 0 1px rgba(255,255,255,.035); }
.auth-tabs { padding:3px; border:1px solid rgba(255,255,255,.055); background:#080b09; }
.auth-tabs button { border-radius:3px; letter-spacing:.08em; text-transform:uppercase; }
.auth-tabs button.is-active { color:#20180a; background:linear-gradient(180deg,#e5c97c,#ad8136); box-shadow:inset 0 1px rgba(255,255,255,.35); }
.auth-form-card input,.create-character input { border-radius:4px; border-color:rgba(225,205,153,.14); background:rgba(1,4,2,.52); }
.auth-submit,.create-character__button { border-radius:4px; letter-spacing:.06em; text-transform:uppercase; background:linear-gradient(180deg,#e0c374,#a9782f); box-shadow:inset 0 1px rgba(255,255,255,.32),0 8px 20px rgba(0,0,0,.25); }

/* LOBBY — sala de héroes */
.lobby-shell { max-width:1320px; }
.lobby-header { border-bottom:1px solid rgba(223,194,119,.1); }
.lobby-header b { letter-spacing:.13em; }
.lobby-main { gap:12px; }
.lobby-existing,.create-character { position:relative; border-radius:7px; border-color:rgba(224,197,126,.13); background:linear-gradient(180deg,rgba(10,15,11,.9),rgba(5,8,6,.92)); box-shadow:0 28px 70px rgba(0,0,0,.34); }
.lobby-title h1 { font-family:Georgia,"Times New Roman",serif; font-weight:650; letter-spacing:-.03em; color:#fff4d7; }
.character-grid { gap:8px; }
.character-card {
  position:relative; overflow:hidden; min-height:220px; border-radius:5px;
  border-color:color-mix(in srgb,var(--char-accent) 34%,rgba(224,197,126,.08));
  background:
    radial-gradient(circle at 78% 28%,color-mix(in srgb,var(--char-accent) 18%,transparent),transparent 30%),
    linear-gradient(155deg,color-mix(in srgb,var(--char-accent) 8%,#111712),#070a08 72%);
  box-shadow:inset 0 1px rgba(255,255,255,.025);
}
.character-card::after { content:''; position:absolute; right:-28px; bottom:-34px; width:130px; height:130px; border:1px solid color-mix(in srgb,var(--char-accent) 16%,transparent); transform:rotate(45deg); }
.character-card:hover,.character-card:focus-visible { transform:translateY(-3px); filter:brightness(1.06); box-shadow:0 17px 32px rgba(0,0,0,.32),inset 0 1px rgba(255,255,255,.04); }
.character-card__sigil { width:52px; border-radius:3px; font-size:22px; transform:rotate(45deg); }
.character-card small { letter-spacing:.16em; }
.character-card strong { margin-top:5px; font-family:Georgia,"Times New Roman",serif; font-size:25px; font-weight:650; }
.character-card__xp { height:3px; background:rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.035); }
.character-card > span:last-child { width:100%; display:flex; justify-content:space-between; align-items:center; }
.character-card > span:last-child b { color:var(--char-accent); font-size:8px; letter-spacing:.06em; }
.create-character__heading strong { font-family:Georgia,"Times New Roman",serif; color:#f5e8c6; font-weight:650; }
.create-class { border-radius:4px; }
.create-class b { border-radius:2px; font-size:13px; }
.create-class.is-selected { box-shadow:inset 3px 0 var(--char-accent); }

/* HUD — marco MMORPG más compacto */
.hud { z-index:20; }
.hud-top-left { width:min(372px,45vw); }
.brand-chip { margin-left:4px; margin-bottom:5px; }
.brand-chip strong { font-size:17px; letter-spacing:.14em; }
.player-card { border-radius:5px; border-color:rgba(225,201,139,.16); background:linear-gradient(90deg,rgba(5,8,6,.87),rgba(11,16,12,.72)); box-shadow:0 13px 34px rgba(0,0,0,.33),inset 0 1px rgba(255,255,255,.035); }
.player-card__heading { display:grid; grid-template-columns:44px 1fr auto; gap:9px; align-items:center; padding:7px 9px 5px; }
.player-portrait { width:40px; height:40px; display:grid; place-items:center; border:1px solid color-mix(in srgb,var(--class-accent) 48%,rgba(255,255,255,.12)); color:var(--class-accent); background:radial-gradient(circle,color-mix(in srgb,var(--class-accent) 18%,#151a16),#090c0a 72%); font-size:16px; }
.player-card__identity { min-width:0; display:grid; gap:2px; }
.player-card__identity b { color:#f9efda; font-family:Georgia,"Times New Roman",serif; font-size:14px; overflow:hidden; text-overflow:ellipsis; }
.player-card__identity span { font-size:8px; color:rgba(255,255,255,.48); }
.player-card__state { padding:3px 5px; border:1px solid rgba(166,212,160,.16); color:#a9d9a3; background:rgba(83,132,77,.08); font-size:6px !important; letter-spacing:.12em; }
.status-bars { padding:5px 9px 7px; }
.status-row { grid-template-columns:20px 1fr 70px; }
.bar { height:8px; border-radius:2px; border:1px solid rgba(255,255,255,.04); }
.bar i { border-radius:1px; }
.player-card__foot { background:rgba(0,0,0,.16); }
.target-frame { top:50px; width:min(330px,35vw); border-radius:5px; border-color:rgba(209,80,75,.28); background:linear-gradient(180deg,rgba(18,8,9,.83),rgba(9,6,6,.73)); }
.target-frame strong { font-family:Georgia,"Times New Roman",serif; font-size:13px; }
.target-bar { border-radius:2px; height:7px; }
.target-bar i { border-radius:1px; }
.controls-tip { top:auto; bottom:9px; opacity:.56; border-radius:3px; padding:5px 8px; font-size:8px; }
.server-chip { border-radius:3px !important; }
.session-chip { border-radius:3px; }

.ability-bar { gap:4px; padding:5px; border:1px solid rgba(226,199,129,.13); background:rgba(4,7,5,.52); box-shadow:0 11px 34px rgba(0,0,0,.3); backdrop-filter:blur(6px); }
.ability-button { width:clamp(60px,5.7vw,72px); border-radius:3px; border-color:color-mix(in srgb,var(--class-accent) 42%,rgba(232,208,148,.1)); background:linear-gradient(145deg,color-mix(in srgb,var(--class-accent) 11%,#20251f),#0b0e0c); }
.ability-button::before { inset:3px; border-radius:1px; opacity:.42; }
.ability-button__glyph { position:absolute; z-index:2; top:7px; left:8px; font-size:20px; line-height:1; color:color-mix(in srgb,var(--class-accent) 76%,#fff0bd); text-shadow:0 2px 8px rgba(0,0,0,.7); }
.ability-button__name { position:absolute; z-index:2; left:5px; right:5px; bottom:15px; padding:0; font-size:8px; text-align:left; }
.ability-button small { padding:1px 4px; right:3px; bottom:2px; border:1px solid rgba(255,255,255,.08); background:rgba(0,0,0,.38); }
.ability-button em { left:4px; bottom:3px; }
.ability-button:hover { border-color:var(--class-accent); filter:brightness(1.12); }
.cast-bar { border-radius:4px; border-color:color-mix(in srgb,var(--class-accent) 32%,rgba(225,197,126,.1)); }
.cast-track { border-radius:2px; }
.cast-track i { border-radius:1px; }
.queue-card { border-radius:5px; border-color:rgba(223,194,117,.13); background:linear-gradient(180deg,rgba(8,12,9,.82),rgba(4,7,5,.76)); }
.queue-card strong { font-family:Georgia,"Times New Roman",serif; color:#f2e2b9; }
.queue-card__eyebrow { color:#d5b55d; }
.queue-card button { border-radius:3px; }
.interaction-prompt { border-radius:3px; }
.combat-toast { border-radius:3px; }

@media (pointer:coarse),(max-width:900px) {
  .auth-panel { border-radius:6px; }
  .auth-worldmark { display:none; }
  .character-card { min-height:128px; }
  .character-card__sigil { width:30px; font-size:12px; }
  .player-card__heading { grid-template-columns:31px 1fr auto; gap:6px; padding:4px 6px; }
  .player-portrait { width:28px; height:28px; font-size:10px; }
  .player-card__identity b { font-size:10px; }
  .ability-bar { padding:3px; gap:3px; }
  .ability-button { width:clamp(43px,9vh,56px); }
  .ability-button__glyph { top:5px; left:6px; font-size:14px; }
  .ability-button__name { bottom:11px; font-size:6px; }
  .controls-tip { display:none; }
}