/* Arena da Floresta v2 — interface HD: painéis arredondados de madeira e folhas, fonte Baloo 2 (OFL).
   Tudo em rem. 1rem = 1% da largura ou 1/56,25 da altura (o que for menor): 16px em 1600x900, 12,8px em
   1280x720, 19,2px em 1920x1080. A tela inteira sempre cabe em 100rem x 56,25rem. */

/* ------------------------------------------------------------------ fonte (assets/fonts/OFL.txt) */
/* Família 'ArenaRound': é a primeira da pilha FONT da arte (client/js/art/core.js), então o texto do canvas
   usa a mesma fonte da interface. */
@font-face {
  font-family: 'ArenaRound';
  src: url('../assets/fonts/Baloo2-latin.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'ArenaRound';
  src: url('../assets/fonts/Baloo2-latin-ext.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@property --spin { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

:root {
  --ink: #2a160b;
  --wood-9: #1e1008; --wood-8: #2a160b; --wood-7: #3d2213; --wood-6: #5a3319; --wood-5: #7a4721; --wood-4: #9c5f2c; --wood-3: #c07f3e; --wood-2: #e0a85f;
  --leaf-9: #0f2414; --leaf-8: #16341c; --leaf-7: #1f4a26; --leaf-6: #2b6331; --leaf-5: #3d8a3e; --leaf-4: #5fb04a; --leaf-3: #9ad66a;
  --cream: #fff4dc; --cream-2: #f3e2bd; --muted: #d9c29a; --dim: #b39a74;
  --gold: #ffd257; --gold-2: #ffb534; --orange: #ff8a2a; --red: #ff5a5f; --blue: #6cc8ff; --green: #7de35e; --purple: #c38aff;
  --outline: .06rem .06rem 0 var(--ink), -.06rem .06rem 0 var(--ink), .06rem -.06rem 0 var(--ink), -.06rem -.06rem 0 var(--ink), 0 .12rem 0 var(--ink);
  --outline-lg: .1rem .1rem 0 var(--ink), -.1rem .1rem 0 var(--ink), .1rem -.1rem 0 var(--ink), -.1rem -.1rem 0 var(--ink), 0 .1rem 0 var(--ink), .1rem 0 0 var(--ink), -.1rem 0 0 var(--ink), 0 -.1rem 0 var(--ink), 0 .24rem 0 var(--ink);
  --font: 'ArenaRound', 'Baloo 2', 'Nunito', 'Segoe UI', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: clamp(11px, min(1vw, 1.7778vh), 22px); }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
/* Cursores do jogo (client/js/ui/cursors.js põe --cur e --cur-hand): seta dourada de contorno escuro e mão para o
   que é clicável, bem mais visíveis que os do sistema. No canvas o jogo troca pela mira em cima de um inimigo. */
html { cursor: var(--cur, default); }
input:not([type]), input[type=text], textarea { cursor: text; }
body {
  font-family: var(--font);
  font-weight: 500;
  line-height: 1.25;
  color: var(--cream);
  background: radial-gradient(ellipse 90% 80% at 50% 40%, #2d5c2c 0%, #173a1e 50%, #0b1a0e 100%);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
[hidden] { display: none !important; }
button, input { font: inherit; color: inherit; }
img { -webkit-user-drag: none; user-select: none; }
b, strong { font-weight: 700; }
small { font-size: .82em; }
:focus-visible { outline: .18rem solid var(--gold); outline-offset: .14rem; }

#game { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }

.screen { position: fixed; inset: 0; }

/* ------------------------------------------------------------------ peças comuns */

.glyph { width: 1em; height: 1em; flex: none; display: inline-block; vertical-align: -.16em; overflow: visible; }

/* Painel de madeira (moldura clara, miolo escuro, contorno de tinta). */
.panel-wood {
  position: relative;
  color: var(--cream);
  border: .34rem solid transparent;
  border-radius: 1.6rem;
  background:
    linear-gradient(180deg, rgba(255, 236, 200, .07), rgba(255, 236, 200, 0) 4rem) padding-box,
    repeating-linear-gradient(97deg, rgba(255, 220, 170, .022) 0 .5rem, rgba(0, 0, 0, .04) .5rem 1.4rem) padding-box,
    linear-gradient(180deg, #44271a, #2b170c) padding-box,
    linear-gradient(180deg, #e2a45a 0%, #a8662f 28%, #74421e 68%, #4c2913 100%) border-box;
  box-shadow: 0 0 0 .14rem var(--ink), 0 1rem 2.4rem rgba(0, 0, 0, .55), inset 0 .12rem 0 rgba(255, 232, 190, .16), inset 0 0 0 .1rem rgba(0, 0, 0, .35);
}
/* Painel leve da HUD (por cima do jogo). */
.hud-panel {
  color: var(--cream);
  border: .16rem solid transparent;
  border-radius: 1.05rem;
  background:
    linear-gradient(180deg, rgba(64, 37, 21, .93), rgba(35, 19, 10, .9)) padding-box,
    linear-gradient(180deg, #c98a48, #6b3c1c) border-box;
  box-shadow: 0 0 0 .12rem var(--ink), 0 .45rem 1rem rgba(0, 0, 0, .38), inset 0 .08rem 0 rgba(255, 232, 190, .15);
}

.panel-head { display: flex; align-items: center; gap: .8rem; margin-bottom: .9rem; }
.panel-title {
  display: flex; align-items: center; gap: .5rem;
  font-size: 1.7rem; font-weight: 800; line-height: 1; color: var(--cream); text-shadow: var(--outline);
}
.panel-title .glyph { font-size: 1.5rem; }
.panel-sub { color: var(--muted); font-size: .95rem; font-weight: 600; }
.x-btn {
  margin-left: auto; width: 2.3rem; height: 2.3rem; border-radius: 50%; border: .14rem solid var(--ink);
  background: linear-gradient(180deg, #ff8a7a, #d8423a); color: #fff; font-size: 1.4rem; font-weight: 800; line-height: 1;
  box-shadow: 0 .2rem 0 var(--ink); cursor: var(--cur-hand, pointer); text-shadow: 0 .08rem 0 var(--ink);
  display: grid; place-items: center; padding: 0 0 .12rem;
}
.x-btn:hover { filter: brightness(1.08); }
.x-btn:active { transform: translateY(.14rem); box-shadow: 0 .06rem 0 var(--ink); }

/* Botões 3D. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .5rem 1.3rem .56rem; border-radius: 999px; border: .15rem solid var(--ink);
  font-size: 1.05rem; font-weight: 700; line-height: 1.1; color: var(--ink); white-space: nowrap;
  background: linear-gradient(180deg, #fff6dc 0%, #f6d898 55%, #e6b866 100%);
  box-shadow: 0 .26rem 0 var(--ink), 0 .5rem .8rem rgba(0, 0, 0, .3), inset 0 .14rem 0 rgba(255, 255, 255, .75);
  cursor: var(--cur-hand, pointer); transition: transform .08s, box-shadow .08s, filter .15s;
}
.btn:hover { filter: brightness(1.06) saturate(1.05); transform: translateY(-.06rem); }
.btn:active { transform: translateY(.2rem); box-shadow: 0 .06rem 0 var(--ink), 0 .2rem .4rem rgba(0, 0, 0, .3), inset 0 .14rem 0 rgba(255, 255, 255, .6); }
.btn:disabled { filter: grayscale(.6) brightness(.85); cursor: var(--cur, default); transform: none; }
.btn .kc { height: 1.45rem; min-width: 1.45rem; font-size: .78rem; box-shadow: 0 .1rem 0 var(--ink); }
.btn-green { color: #fff; text-shadow: var(--outline); background: linear-gradient(180deg, #b8f58a 0%, #6fd045 45%, #3f9e2a 100%); }
.btn-danger { color: #fff; text-shadow: var(--outline); background: linear-gradient(180deg, #ffab98 0%, #f0564c 50%, #c13232 100%); }
.btn-ghost {
  color: var(--cream); background: linear-gradient(180deg, rgba(255, 244, 220, .16), rgba(255, 244, 220, .06));
  box-shadow: 0 .22rem 0 var(--ink), inset 0 .1rem 0 rgba(255, 255, 255, .12);
}
.btn-ghost .kc { color: var(--ink); }
.btn-play {
  width: 100%; padding: .55rem 1rem .7rem; font-size: 2.1rem; font-weight: 800; letter-spacing: .02em;
  color: #fff; text-shadow: var(--outline-lg);
  background: linear-gradient(180deg, #c9fb98 0%, #79dc4c 40%, #45a92c 78%, #37902a 100%);
  box-shadow: 0 .36rem 0 var(--ink), 0 .8rem 1.4rem rgba(0, 0, 0, .4), inset 0 .2rem 0 rgba(255, 255, 255, .6), inset 0 -.3rem 0 rgba(0, 0, 0, .12);
}
.btn-play .glyph { font-size: 1.6rem; filter: drop-shadow(0 .1rem 0 var(--ink)); }
.btn-play .kc { margin-left: .4rem; text-shadow: none; }
.btn-play:not(:disabled) { animation: playBreath 2.4s ease-in-out infinite; }
.btn-play:active { transform: translateY(.28rem); box-shadow: 0 .08rem 0 var(--ink), inset 0 .2rem 0 rgba(255, 255, 255, .5); }

/* Campo de texto. */
.field { display: flex; flex-direction: column; gap: .3rem; }
.field-label { font-size: .95rem; font-weight: 700; color: var(--gold); text-shadow: 0 .1rem 0 var(--ink); letter-spacing: .01em; }
.input {
  width: 100%; padding: .45rem .9rem .5rem; border-radius: .9rem; border: .15rem solid var(--ink);
  font-size: 1.2rem; font-weight: 700; color: var(--ink); background: #fff8ea;
  box-shadow: inset 0 .22rem 0 rgba(42, 22, 11, .12), 0 .18rem 0 rgba(0, 0, 0, .35);
  user-select: text;
}
.input::placeholder { color: #a88e6a; font-weight: 600; }
.input:focus { outline: none; box-shadow: 0 0 0 .22rem rgba(255, 210, 87, .75), inset 0 .22rem 0 rgba(42, 22, 11, .12); }

/* Tecla desenhada. */
.kc {
  display: inline-flex; align-items: center; justify-content: center; gap: .22rem; flex: none;
  min-width: 1.75rem; height: 1.75rem; padding: 0 .42rem;
  font-size: .86rem; font-weight: 800; line-height: 1; color: var(--ink); white-space: nowrap; text-shadow: none;
  background: linear-gradient(180deg, #fffdf6, #eedbb2);
  border: .13rem solid var(--ink); border-radius: .48rem; box-shadow: 0 .16rem 0 var(--ink);
}
.kc .g-mouse { width: .9rem; height: 1.24rem; vertical-align: 0; }
.kc-mouse { padding: 0 .4rem 0 .3rem; }

/* Seletor de duas opções (Clique | Teclado). */
.seg {
  display: inline-flex; gap: .2rem; padding: .22rem; border-radius: 999px;
  background: rgba(10, 5, 2, .55); box-shadow: inset 0 .14rem .3rem rgba(0, 0, 0, .45), 0 0 0 .12rem rgba(255, 220, 170, .14);
}
.seg-b {
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.02;
  min-width: 6.4rem; padding: .3rem .95rem .34rem; border: 0; border-radius: 999px; background: transparent;
  color: var(--muted); cursor: var(--cur-hand, pointer); transition: background .15s, color .15s;
}
.seg-b b { font-size: 1rem; font-weight: 800; }
.seg-b small { font-size: .72rem; font-weight: 600; opacity: .85; }
.seg-b:hover { color: var(--cream); background: rgba(255, 244, 220, .08); }
.seg-b.on {
  color: var(--ink); background: linear-gradient(180deg, #ffeaa4, #ffc34a 60%, #f5a52a);
  box-shadow: 0 .16rem 0 var(--ink), inset 0 .1rem 0 rgba(255, 255, 255, .7), 0 0 0 .12rem var(--ink);
}

/* Interruptor liga/desliga. */
.toggle { display: flex; align-items: center; gap: .75rem; cursor: var(--cur-hand, pointer); }
.toggle input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.toggle .tg {
  position: relative; flex: none; width: 3.3rem; height: 1.8rem; border-radius: 999px; border: .14rem solid var(--ink);
  background: #4a3424; box-shadow: inset 0 .18rem .3rem rgba(0, 0, 0, .45); transition: background .18s;
}
.toggle .tg::after {
  content: ''; position: absolute; top: .12rem; left: .14rem; width: 1.28rem; height: 1.28rem; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #f3e2bd 70%); border: .12rem solid var(--ink);
  box-shadow: 0 .12rem 0 rgba(0, 0, 0, .4); transition: transform .18s cubic-bezier(.4, 1.6, .6, 1);
}
.toggle input:checked + .tg { background: linear-gradient(180deg, #8fe25e, #4fae34); }
.toggle input:checked + .tg::after { transform: translateX(1.46rem); }
.toggle input:focus-visible + .tg { outline: .18rem solid var(--gold); outline-offset: .14rem; }
.tg-t { display: flex; flex-direction: column; font-size: 1rem; font-weight: 700; line-height: 1.15; }
.tg-t small { font-size: .78rem; font-weight: 500; color: var(--muted); }

/* Controle deslizante (volume). --v = posição (%), atualizado pelo JS. */
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 1.6rem; background: transparent; cursor: var(--cur-hand, pointer); --v: 50%; }
.range:focus { outline: none; }
.range::-webkit-slider-runnable-track {
  height: .72rem; border-radius: 999px; border: .13rem solid var(--ink);
  background: linear-gradient(90deg, #ffd257, #ff9a2a) 0 / var(--v) 100% no-repeat, #3a2415;
  box-shadow: inset 0 .12rem .2rem rgba(0, 0, 0, .35);
}
.range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 1.45rem; height: 1.45rem; margin-top: -.5rem; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fffdf2, #ffe08a 55%, #f0a52a); border: .14rem solid var(--ink);
  box-shadow: 0 .16rem 0 var(--ink);
}
.range::-moz-range-track { height: .72rem; border-radius: 999px; border: .13rem solid var(--ink); background: #3a2415; }
.range::-moz-range-progress { height: .72rem; border-radius: 999px; background: linear-gradient(90deg, #ffd257, #ff9a2a); }
.range::-moz-range-thumb { width: 1.2rem; height: 1.2rem; border-radius: 50%; background: #ffe08a; border: .14rem solid var(--ink); }
.range:focus-visible::-webkit-slider-thumb { box-shadow: 0 .16rem 0 var(--ink), 0 0 0 .22rem rgba(255, 210, 87, .7); }

/* Retrato redondo na cor do herói (--c1 principal, --c2 escura, --c3 clara: faceVars em ui/icons.js). */
.face {
  position: relative; display: inline-block; vertical-align: middle; flex: none; overflow: hidden; border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--c3, #c8c8d4) 70%, #fff) 0%, var(--c1, #8a8a9a) 48%, color-mix(in srgb, var(--c1, #8a8a9a) 45%, var(--c2, #2a2a34)) 100%);
  border: .15rem solid var(--ink);
  box-shadow: inset 0 -.25rem .5rem rgba(0, 0, 0, .25), 0 .14rem 0 rgba(0, 0, 0, .35);
}
.face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.face.npc { --c1: #5a8a3a; --c2: #1f3a14; --c3: #b8e08a; }
.face.ghost { background: rgba(255, 255, 255, .06); border-style: dashed; border-color: rgba(255, 244, 220, .3); box-shadow: none; }

.chip {
  display: inline-flex; align-items: center; gap: .3rem; padding: .14rem .6rem .18rem; border-radius: 999px;
  font-size: .8rem; font-weight: 700; line-height: 1.1; white-space: nowrap;
  color: var(--cream); background: rgba(10, 5, 2, .45); box-shadow: inset 0 0 0 .1rem rgba(255, 220, 170, .18);
}
.chip-role { color: var(--ink); background: linear-gradient(180deg, #fff3cf, #f2cf86); box-shadow: 0 0 0 .12rem var(--ink); }

/* Tecla + descrição (ajuda de controles). */
.ctl { display: inline-flex; align-items: center; gap: .42rem; white-space: nowrap; font-size: .9rem; font-weight: 600; color: var(--cream); }
.ctl-ui .ctl-t { color: var(--muted); }

/* ------------------------------------------------------------------ carregamento */

#loading { z-index: 100; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 45%, #2d5c2c 0%, #133018 60%, #0a170c 100%); }
.loading-box { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; width: 30rem; }
.loading-box .logo-text { font-size: 3rem; }
.bar { width: 100%; height: 1.3rem; border-radius: 999px; border: .15rem solid var(--ink); background: #2a170c; overflow: hidden; box-shadow: 0 0 0 .12rem rgba(255, 220, 170, .2), inset 0 .2rem .3rem rgba(0, 0, 0, .5); }
#load-fill { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(180deg, #b8f58a, #5fbf38 60%, #3f9e2a); transition: width .2s; }
#load-text { font-size: 1.05rem; font-weight: 600; color: var(--cream-2); text-shadow: 0 .1rem 0 var(--ink); }

/* ------------------------------------------------------------------ logotipo (texto com degradê e contorno) */

.logo-text {
  position: relative; isolation: isolate; display: inline-block; margin: 0;
  font-size: 3.5rem; font-weight: 800; line-height: 1.05; letter-spacing: .015em; white-space: nowrap;
}
.logo-text::before {
  content: attr(data-text); position: absolute; left: 0; top: 0; z-index: -1;
  color: var(--ink); -webkit-text-stroke: .55rem var(--ink);
  text-shadow: 0 .38rem 0 var(--ink), 0 .9rem 1.6rem rgba(0, 0, 0, .55);
}
.logo-text > span {
  background: linear-gradient(180deg, #fffbe0 0%, #ffe07a 38%, #ffb534 70%, #ff8a2a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.logo-text .lt-green { background: linear-gradient(180deg, #eaffc8 0%, #a8ec72 40%, #5fc03a 75%, #3f9e2a 100%); -webkit-background-clip: text; background-clip: text; }

/* ------------------------------------------------------------------ tela inicial */

#lobby {
  z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: safe center; gap: .75rem;
  padding: 1rem 2rem .9rem;
  background: radial-gradient(ellipse 75% 70% at 50% 48%, rgba(6, 14, 4, .12) 0%, rgba(6, 12, 4, .58) 100%);
}
.lobby-head { flex: none; display: flex; flex-direction: column; align-items: center; gap: .15rem; position: relative; }
.tagline { margin: 0; font-size: 1.1rem; font-weight: 600; color: var(--cream); text-shadow: var(--outline); }
.lobby-main {
  flex: 0 1 auto; min-height: 0; width: min(94rem, 100%);
  display: grid; grid-template-columns: 40rem minmax(0, 1fr); gap: 1.3rem; padding: 1.05rem 1.2rem 1.1rem;
}
.lobby-left { display: flex; flex-direction: column; gap: .62rem; min-height: 0; }
.lobby-left .field-label { display: flex; align-items: center; gap: .4rem; }
.play-row { display: flex; flex-direction: column; gap: .5rem; margin-top: .15rem; }
.error {
  padding: .5rem .8rem; border-radius: .8rem; font-size: .95rem; font-weight: 700; color: #fff;
  background: linear-gradient(180deg, #d8423a, #a82a24); border: .14rem solid var(--ink); text-shadow: 0 .08rem 0 var(--ink);
}
.server-status { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .5rem; font-size: .92rem; font-weight: 600; color: var(--cream-2); min-height: 1.4rem; }
.server-status .ss-leader { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.server-status b { color: var(--cream); }
.server-status .dot { width: .75rem; height: .75rem; flex: none; border-radius: 50%; background: #9a8a70; border: .12rem solid var(--ink); }
.server-status.on .dot { background: #7de35e; box-shadow: 0 0 .5rem #7de35e; animation: dotPulse 2s ease-in-out infinite; }
.server-status.off .dot { background: #ff5a5f; }
.server-status .face { width: 1.45rem; height: 1.45rem; border-width: .1rem; }
.credits { margin-top: auto; font-size: .8rem; font-weight: 500; color: var(--dim); line-height: 1.3; }
.credits b { color: var(--muted); font-weight: 700; }

.lobby-foot {
  flex: none; width: min(94rem, 100%); display: flex; align-items: center; gap: 1.1rem; padding: .5rem 1.1rem;
  border-radius: 1.2rem; background: rgba(24, 13, 6, .82); box-shadow: 0 0 0 .14rem var(--ink), inset 0 0 0 .12rem rgba(255, 220, 170, .12), 0 .5rem 1.2rem rgba(0, 0, 0, .4);
}
.foot-head { flex: none; display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.controls { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .5rem; }
.ctl-row { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.05rem; }
.ctl-div { flex: none; align-self: stretch; width: .12rem; min-height: 1.4rem; border-radius: 1rem; background: rgba(255, 220, 170, .16); }

/* Folhas decorativas nos cantos dos painéis. */
.deco { position: absolute; pointer-events: none; width: 6.5rem; height: auto; filter: drop-shadow(0 .2rem .2rem rgba(0, 0, 0, .35)); }
.deco-tl { left: -1.6rem; top: -1.7rem; transform: rotate(-8deg); }
.deco-tr { right: -1.6rem; top: -1.7rem; transform: scaleX(-1) rotate(-8deg); }
.lobby-head .deco { width: 5rem; top: .2rem; }
.lobby-head .deco-tl { left: -5.4rem; }
.lobby-head .deco-tr { right: -5.4rem; }

/* Cartões de herói (tela inicial e troca de herói). */
.hero-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .55rem; }
.hero-card {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .1rem; min-width: 0;
  padding: .38rem .38rem .45rem; border-radius: 1.05rem; cursor: var(--cur-hand, pointer); text-align: center;
  border: .14rem solid var(--ink);
  background: linear-gradient(180deg, #6a3e20 0%, #4a2a15 100%);
  box-shadow: 0 .22rem 0 var(--ink), inset 0 .1rem 0 rgba(255, 232, 190, .18);
  transition: transform .12s, box-shadow .12s, background .12s;
}
.hero-card:hover { transform: translateY(-.14rem); background: linear-gradient(180deg, #7a4826, #53301a); }
.hero-card:active { transform: translateY(.1rem); box-shadow: 0 .08rem 0 var(--ink); }
.hero-card.sel {
  background: linear-gradient(180deg, #ffe7a0 0%, #f4bf57 100%); transform: translateY(-.14rem);
  box-shadow: 0 .22rem 0 var(--ink), 0 0 0 .2rem #fff3c4, 0 0 1.1rem .15rem rgba(255, 210, 87, .7);
}
.hc-face {
  position: relative; display: block; width: 100%; aspect-ratio: 1.12 / 1; overflow: hidden; border-radius: .8rem;
  border: .13rem solid var(--ink);
  background: radial-gradient(ellipse 80% 90% at 50% 25%, color-mix(in srgb, var(--c3) 70%, #fff) 0%, var(--c1) 55%, color-mix(in srgb, var(--c1) 50%, var(--c2)) 100%);
  box-shadow: inset 0 -.3rem .6rem rgba(0, 0, 0, .22);
}
.hc-face img { position: absolute; left: 0; right: 0; bottom: -4%; width: 100%; height: 108%; object-fit: contain; object-position: 50% 100%; transition: transform .15s; }
.hero-card:hover .hc-face img, .hero-card.sel .hc-face img { transform: scale(1.05); }
.hc-role {
  position: absolute; left: 50%; bottom: .22rem; transform: translateX(-50%); max-width: calc(100% - .4rem);
  overflow: hidden; text-overflow: ellipsis;
  padding: .06rem .45rem .1rem; border-radius: 999px; font-size: .7rem; font-weight: 800; line-height: 1.1; white-space: nowrap;
  color: var(--cream); background: rgba(20, 10, 4, .78); box-shadow: 0 0 0 .1rem rgba(255, 244, 220, .25);
}
.hc-name { margin-top: .2rem; font-size: 1.08rem; font-weight: 800; line-height: 1.05; color: var(--cream); text-shadow: var(--outline); }
.hc-title { font-size: .74rem; font-weight: 600; line-height: 1.12; color: var(--cream-2); min-height: 1.66rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hero-card.sel .hc-title { color: var(--ink); }
.hero-card.sel .hc-name { color: #fff; }
.hc-tag {
  position: absolute; top: -.5rem; right: -.35rem; z-index: 1; padding: .08rem .45rem .12rem; border-radius: 999px;
  font-size: .66rem; font-weight: 800; color: var(--ink); background: linear-gradient(180deg, #d6ffb0, #7de35e); border: .12rem solid var(--ink);
}
.hc-tag.cur { background: linear-gradient(180deg, #fff, #d9c29a); }

/* Detalhe do herói escolhido. */
.hero-detail { display: flex; flex-direction: column; gap: .7rem; min-width: 0; min-height: 0; }
.hd-top { display: flex; gap: 1.1rem; align-items: stretch; }
.hd-stage {
  position: relative; flex: none; width: 11.4rem; height: 11.4rem; border-radius: 1.3rem; overflow: hidden;
  border: .15rem solid var(--ink);
  background:
    radial-gradient(ellipse 60% 18% at 50% 84%, rgba(20, 40, 10, .45), transparent 70%),
    radial-gradient(ellipse 90% 75% at 50% 30%, color-mix(in srgb, var(--c3) 45%, #f7ffe8) 0%, color-mix(in srgb, var(--c1) 45%, #7cc35a) 55%, #3f7a2e 100%);
  box-shadow: inset 0 -.5rem 1rem rgba(0, 0, 0, .25), 0 .2rem 0 rgba(0, 0, 0, .35);
}
.hd-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hd-anim {
  position: absolute; left: .45rem; bottom: .4rem; padding: .04rem .5rem .08rem; border-radius: 999px;
  font-size: .7rem; font-weight: 700; color: var(--cream); background: rgba(20, 10, 4, .6);
}
.hd-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .25rem; }
.hd-name { display: flex; align-items: baseline; gap: .6rem; font-size: 2.2rem; font-weight: 800; line-height: 1; color: var(--cream); text-shadow: var(--outline-lg); }
.hd-title { font-size: 1.12rem; font-weight: 700; color: var(--gold); text-shadow: 0 .1rem 0 var(--ink); }
.hd-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin: .1rem 0 .05rem; }
.hd-desc { margin: 0; font-size: .92rem; font-weight: 500; color: var(--cream-2); line-height: 1.28; }
.hd-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem 1.1rem; margin-top: auto; }
.stat { display: flex; flex-direction: column; gap: .12rem; }
.stat-h { display: flex; justify-content: space-between; font-size: .8rem; font-weight: 700; color: var(--muted); }
.stat-h b { color: var(--cream); }
.stat-h b small { margin-left: .2rem; font-size: .72rem; font-weight: 700; color: var(--gold); }
.stat-bar { height: .55rem; border-radius: 999px; background: rgba(0, 0, 0, .45); overflow: hidden; box-shadow: inset 0 0 0 .08rem rgba(0, 0, 0, .4); }
.stat-bar > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #8fe25e, #ffd257); }

.hd-abs-t { display: flex; align-items: center; gap: .4rem; font-size: .95rem; font-weight: 700; color: var(--gold); text-shadow: 0 .1rem 0 var(--ink); }
.hd-abs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .36rem; min-height: 0; }
.ab {
  display: flex; align-items: center; gap: .75rem; padding: .34rem .7rem .34rem .38rem; border-radius: .95rem;
  background: rgba(255, 244, 220, .06); box-shadow: inset 0 0 0 .1rem rgba(255, 220, 170, .1);
}
.ab-icon { flex: none; width: 2.85rem; height: 2.85rem; border-radius: .7rem; filter: drop-shadow(0 .12rem 0 rgba(0, 0, 0, .4)); }
.ab-body { min-width: 0; flex: 1; }
.ab-head { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.ab-name { font-size: 1.02rem; font-weight: 800; color: var(--cream); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-tag { flex: none; padding: .02rem .45rem .06rem; border-radius: 999px; font-size: .7rem; font-weight: 800; color: var(--ink); background: #d9c29a; }
.ab-cd { margin-left: auto; flex: none; font-size: .8rem; font-weight: 700; color: var(--muted); }
.ab-head .kc { height: 1.5rem; min-width: 1.5rem; font-size: .76rem; box-shadow: 0 .12rem 0 var(--ink); }
.ab-desc { font-size: .84rem; font-weight: 500; color: var(--cream-2); line-height: 1.22; }
.ab-ult { background: linear-gradient(90deg, rgba(255, 196, 70, .18), rgba(255, 196, 70, .04)); box-shadow: inset 0 0 0 .12rem rgba(255, 210, 87, .45); }
.ab-ult .ab-tag { background: linear-gradient(180deg, #ffe7a0, #ffb534); }
.ab-basic .ab-tag { background: linear-gradient(180deg, #d6ffb0, #8fe25e); }

/* ------------------------------------------------------------------ HUD */

#hud { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
#hud button, #hud input, #hud label, #hud .overlay-card, #hud .hud-click { pointer-events: auto; }
/* Tamanho da HUD (menu Esc > Interface; ui/hudscale.js põe --hud): zoom só nos painéis da partida, as janelas (loja,
   menu, placar, pódio, derrota) ficam do tamanho normal. Cada painel se posiciona em rem, então as distâncias entre
   eles (itens ao lado da barra, avisos acima dela, som desligado acima do minimapa) encolhem junto. */
#me-box, #top-center, #top-right, #skills, #items, #burrow-box, #pickup-msg, #toasts, #minimap-box, #mute-ind, #hint, #debug { zoom: var(--hud, 1); }

/* Eu: retrato, nome, vida e estados. */
#me-box { position: absolute; left: 1rem; top: 1rem; width: 24.5rem; display: flex; gap: .8rem; align-items: center; padding: .55rem .8rem .6rem .55rem; }
.me-face { width: 5.2rem; height: 5.2rem; }
.me-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
.me-line { display: flex; flex-direction: column; min-width: 0; }
.me-name { font-size: 1.25rem; font-weight: 800; line-height: 1.05; color: var(--cream); text-shadow: var(--outline); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-hero { margin-top: .05rem; font-size: .82rem; font-weight: 600; line-height: 1.15; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hpbar {
  position: relative; height: 1.45rem; border-radius: 999px; overflow: hidden;
  background: #1c0f07; border: .15rem solid var(--ink); box-shadow: 0 .12rem 0 rgba(0, 0, 0, .35);
}
.hpbar > div { position: absolute; top: 0; bottom: 0; left: 0; width: 0; }
.hp-lag { background: #ffe7b0; transition: width .5s ease .22s; }
.hp-fill { background: linear-gradient(180deg, #c3f79a 0%, #72d44a 45%, #3f9e2a 100%); transition: width .08s linear; }
.hpbar.mid .hp-fill { background: linear-gradient(180deg, #ffeaa0 0%, #ffc43a 45%, #e08a1a 100%); }
.hpbar.low .hp-fill { background: linear-gradient(180deg, #ffb0a0 0%, #ff5a4a 45%, #c42a24 100%); }
.hp-shield { background: repeating-linear-gradient(-45deg, #d4f0ff 0 .35rem, #8fd0ff .35rem .7rem); box-shadow: inset 0 0 0 .1rem rgba(255, 255, 255, .6); }
.hp-fill::after { content: ''; position: absolute; left: .4rem; right: .4rem; top: .14rem; height: .28rem; border-radius: 999px; background: rgba(255, 255, 255, .35); }
.hp-text {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .3rem;
  font-size: .9rem; font-weight: 800; line-height: 1; color: #fff; text-shadow: var(--outline);
}
.hp-text .sh { color: #bfe8ff; }
.status-row { display: flex; flex-wrap: wrap; gap: .25rem; min-height: 1.85rem; }
.status { position: relative; width: 1.85rem; height: 1.85rem; animation: popIn .25s cubic-bezier(.3, 1.6, .5, 1); }
.status img { width: 100%; height: 100%; filter: drop-shadow(0 .1rem 0 rgba(0, 0, 0, .45)); }
.me-next { display: flex; align-items: center; gap: .35rem; font-size: .8rem; font-weight: 700; color: var(--green); text-shadow: 0 .08rem 0 var(--ink); }
.me-next .face { width: 1.45rem; height: 1.45rem; border-width: .1rem; }
#me-box.dead .me-face { filter: grayscale(1) brightness(.7); }
/* Evolução na partida: selo do nível no retrato, barra de XP e ouro. */
.me-face-box { position: relative; flex: none; }
.me-lv {
  position: absolute; right: -.4rem; bottom: -.35rem; min-width: 2.1rem; height: 2.1rem; padding: 0 .3rem; border-radius: 999px;
  display: grid; place-items: center; font-size: 1.15rem; font-weight: 800; line-height: 1; color: #fff; text-shadow: var(--outline);
  background: linear-gradient(180deg, #fff3b0, #ffc43a 55%, #e8961a); border: .16rem solid var(--ink);
  box-shadow: 0 .14rem 0 rgba(0, 0, 0, .45), inset 0 .12rem 0 rgba(255, 255, 255, .5); font-variant-numeric: tabular-nums;
}
.me-lv.max { background: linear-gradient(180deg, #f6dcff, #c38aff 55%, #8a4ad8); }
.me-lv.pop { animation: slotPop .45s cubic-bezier(.3, 1.8, .5, 1); }
.me-prog { display: flex; align-items: center; gap: .45rem; }
.xpbar {
  position: relative; flex: 1; min-width: 0; height: 1.05rem; border-radius: 999px; overflow: hidden;
  background: #1c0f07; border: .13rem solid var(--ink); box-shadow: 0 .1rem 0 rgba(0, 0, 0, .35);
}
.xp-fill { position: absolute; top: 0; bottom: 0; left: 0; width: 0; background: linear-gradient(180deg, #ead8ff 0%, #a86aff 50%, #7438d0 100%); transition: width .25s ease-out; }
.xpbar.max .xp-fill { background: linear-gradient(180deg, #fff3b0 0%, #ffc43a 50%, #e08a1a 100%); }
.xp-text {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 800; line-height: 1; color: #fff; text-shadow: var(--outline); white-space: nowrap;
}
.gold-chip {
  flex: none; display: inline-flex; align-items: center; gap: .22rem; min-width: 4.4rem; padding: .08rem .5rem .08rem .22rem; border-radius: 999px;
  font-size: .92rem; font-weight: 800; line-height: 1.1; color: var(--gold); background: rgba(24, 13, 6, .8); box-shadow: 0 0 0 .1rem var(--ink);
  font-variant-numeric: tabular-nums;
}
.gold-chip .glyph { font-size: 1.1rem; }
.gold-chip.pop { animation: slotPop .35s cubic-bezier(.3, 1.8, .5, 1); }

/* Centro do topo: rodada, Guardião e anúncios. */
#top-center { position: absolute; left: 50%; top: .8rem; transform: translateX(-50%); width: 46rem; display: flex; flex-direction: column; align-items: center; gap: .45rem; }
.round-box { display: flex; align-items: stretch; padding: .2rem; border-radius: 1.2rem; }
.rb-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: .15rem .95rem .2rem; line-height: 1.05; }
.rb-cell + .rb-cell { border-left: .12rem solid rgba(255, 220, 170, .16); }
.rb-k { font-size: .72rem; font-weight: 700; color: var(--muted); letter-spacing: .02em; }
.rb-v { font-size: 1.15rem; font-weight: 800; color: var(--cream); text-shadow: var(--outline); white-space: nowrap; }
.rb-v small { font-size: .78rem; color: var(--cream-2); }
.rb-clock { min-width: 7.2rem; }
.rb-clock .rb-v { display: flex; align-items: center; gap: .4rem; font-size: 1.9rem; font-variant-numeric: tabular-nums; }
.rb-clock .glyph { font-size: 1.35rem; }
.round-box.warn .rb-clock .rb-v { color: #ff9080; animation: warnPulse 1s ease-in-out infinite; }
.round-box.warn { box-shadow: 0 0 0 .12rem var(--ink), 0 .45rem 1rem rgba(0, 0, 0, .38), 0 0 1.1rem rgba(255, 90, 70, .45), inset 0 .08rem 0 rgba(255, 232, 190, .15); }
.round-box.inter .rb-clock .rb-v { color: var(--gold); }
/* dia e noite: quanto falta para anoitecer ou amanhecer (azulada no escuro) */
.rb-night .rb-v { display: flex; align-items: center; gap: .35rem; font-variant-numeric: tabular-nums; }
.rb-night .glyph { font-size: 1.15rem; }
.rb-night.dark .rb-k { color: #a9b8ee; }
.rb-night.dark .rb-v { color: #d6e0ff; }

.guardian-box {
  display: flex; align-items: center; gap: .55rem; padding: .22rem .9rem .22rem .25rem; border-radius: 999px;
  font-size: .98rem; font-weight: 700; color: var(--cream); text-shadow: var(--outline);
}
.guardian-box .face { width: 2.2rem; height: 2.2rem; }
.guardian-box b { color: var(--gold); font-variant-numeric: tabular-nums; }
.guardian-box .g-dist { display: inline-flex; align-items: center; gap: .3rem; font-size: .86rem; color: var(--cream-2); }
.guardian-box .g-dir { width: 1.35rem; height: 1.35rem; transition: transform .2s; }
.guardian-box.awake {
  background: linear-gradient(180deg, rgba(60, 110, 34, .95), rgba(28, 64, 18, .93)) padding-box, linear-gradient(180deg, #b8f58a, #3f9e2a) border-box;
  animation: guardGlow 1.6s ease-in-out infinite;
}
.guardian-box.dead { opacity: .9; }
.guardian-box.dead .face { filter: grayscale(.8); }

/* Anúncios grandes. */
#announce { width: 100%; display: flex; flex-direction: column; align-items: center; margin-top: .4rem; }
.ann {
  display: flex; align-items: center; gap: .9rem; max-width: 46rem; padding: .5rem 1.4rem .6rem .6rem; border-radius: 1.4rem;
  background: linear-gradient(180deg, rgba(58, 33, 18, .94), rgba(34, 19, 10, .92)); box-shadow: 0 0 0 .14rem var(--ink), 0 .6rem 1.4rem rgba(0, 0, 0, .45), inset 0 0 0 .14rem rgba(255, 220, 170, .2);
  animation: annIn .38s cubic-bezier(.2, 1.5, .4, 1) both;
}
.ann.out { animation: annOut .35s ease-in both; }
.ann.no-icon { padding-left: 1.4rem; }
.ann-ic { flex: none; width: 3.6rem; height: 3.6rem; }
.ann-ic.face { border-width: .15rem; }
.ann-ic.st { border-radius: 0; background: none; border: 0; box-shadow: none; }
.ann-ic.st img { filter: drop-shadow(0 .14rem 0 rgba(0, 0, 0, .45)); }
.ann-ic.gl { display: flex; align-items: center; justify-content: center; }
.ann-ic.gl .glyph { width: 100%; height: 100%; display: block; filter: drop-shadow(0 .14rem 0 rgba(0, 0, 0, .45)); }
.ann-tx { display: flex; flex-direction: column; min-width: 0; }
.ann-t { font-size: 2rem; font-weight: 800; line-height: 1.05; color: var(--cream); text-shadow: var(--outline-lg); }
.ann-s { font-size: 1rem; font-weight: 600; line-height: 1.2; color: var(--cream-2); text-shadow: 0 .1rem 0 var(--ink); margin-top: .12rem; }
.ann-guardian { background: linear-gradient(180deg, rgba(50, 96, 30, .95), rgba(22, 52, 14, .93)); box-shadow: 0 0 0 .14rem var(--ink), 0 .6rem 1.4rem rgba(0, 0, 0, .45), inset 0 0 0 .14rem rgba(184, 245, 138, .35); }
.ann-guardian .ann-t { color: #d8ffb0; }
.ann-streak1 .ann-t { color: #ffc46a; }
.ann-streak2 .ann-t { color: #9fe0ff; }
.ann-streak3 .ann-t { color: #f0b8ff; }
.ann-streak1 { box-shadow: 0 0 0 .14rem var(--ink), 0 0 1.6rem rgba(255, 138, 42, .55), inset 0 0 0 .14rem rgba(255, 170, 80, .45); }
.ann-streak2 { box-shadow: 0 0 0 .14rem var(--ink), 0 0 1.6rem rgba(90, 170, 255, .55), inset 0 0 0 .14rem rgba(140, 210, 255, .45); }
.ann-streak3 { box-shadow: 0 0 0 .14rem var(--ink), 0 0 1.8rem rgba(190, 110, 255, .6), inset 0 0 0 .14rem rgba(230, 180, 255, .5); }
.ann-shutdown { background: linear-gradient(180deg, rgba(110, 30, 26, .95), rgba(60, 14, 12, .93)); }
.ann-shutdown .ann-t { color: #ffd0c4; }
.ann-round { background: linear-gradient(180deg, rgba(92, 60, 18, .96), rgba(52, 30, 8, .94)); box-shadow: 0 0 0 .14rem var(--ink), 0 .6rem 1.4rem rgba(0, 0, 0, .45), inset 0 0 0 .14rem rgba(255, 210, 87, .45); }
.ann-round .ann-t { color: var(--gold); }
.ann-start .ann-t { color: #d8ffb0; }
.ann-me { outline: .16rem solid rgba(255, 243, 196, .9); outline-offset: .12rem; }
.ann-kill .ann-t { font-size: 1.55rem; color: #fff1c8; }
.ann-streak .ann-t { color: #ffc46a; }

/* Placar pequeno (canto superior direito) e abates. */
#top-right { position: absolute; right: 1rem; top: 1rem; width: 18.5rem; display: flex; flex-direction: column; align-items: flex-end; gap: .55rem; }
#mini-board { width: 100%; padding: .45rem .5rem .5rem; }
#mini-board:empty { display: none; }
.mb-title { display: flex; align-items: center; gap: .35rem; padding: 0 .3rem .3rem; font-size: .84rem; font-weight: 700; color: var(--muted); }
.mb-title b { color: var(--gold); }
.mb-title .mb-goal { margin-left: auto; }
.mb-row { display: flex; align-items: center; gap: .45rem; height: 1.95rem; padding: 0 .45rem 0 .3rem; border-radius: .7rem; font-size: .95rem; font-weight: 700; }
.mb-row + .mb-row { margin-top: .1rem; }
.mb-row .rk { width: 1.3rem; text-align: center; font-size: .82rem; color: var(--muted); font-weight: 800; }
.mb-row .face { width: 1.55rem; height: 1.55rem; border-width: .1rem; }
.mb-row .lv {
  flex: none; min-width: 1.3rem; height: 1.3rem; padding: 0 .2rem; border-radius: 999px; display: grid; place-items: center;
  font-size: .72rem; font-weight: 800; line-height: 1; color: #fff; text-shadow: var(--outline);
  background: linear-gradient(180deg, #f2ecff, #8a7aa8); box-shadow: 0 0 0 .1rem var(--ink); font-variant-numeric: tabular-nums;
}
.mb-row.me .lv { background: linear-gradient(180deg, #fff3b0, #e8961a); }
.mb-row .nm { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--cream); }
.mb-row .pt { font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; }
.mb-row.me { background: linear-gradient(90deg, rgba(255, 210, 87, .3), rgba(255, 210, 87, .08)); box-shadow: inset 0 0 0 .1rem rgba(255, 210, 87, .45); }
.mb-row.sep { margin-top: .3rem; }
.mb-row.r1 .rk { color: var(--gold); }
.mb-row .bot { font-size: .64rem; font-weight: 800; color: var(--dim); }

#feed { display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; width: 100%; }
.feed-row {
  display: flex; align-items: center; gap: .35rem; max-width: 100%; padding: .16rem .55rem .16rem .2rem; border-radius: 999px;
  font-size: .88rem; font-weight: 700; color: var(--cream); background: rgba(24, 13, 6, .82); box-shadow: 0 0 0 .1rem var(--ink), inset 0 0 0 .1rem rgba(255, 220, 170, .12);
  animation: feedIn .25s cubic-bezier(.2, 1.4, .4, 1) both;
}
.feed-row.out { animation: feedOut .5s ease-in both; }
.feed-row .face { width: 1.55rem; height: 1.55rem; border-width: .1rem; }
.feed-row .glyph { font-size: 1.1rem; }
.feed-row .nm { max-width: 6.4rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-row .kl { color: #ffe09a; }
.feed-row .vc { color: var(--cream-2); }
.feed-row.mine { background: linear-gradient(90deg, rgba(120, 80, 10, .92), rgba(60, 36, 8, .9)); box-shadow: 0 0 0 .1rem var(--ink), inset 0 0 0 .12rem rgba(255, 210, 87, .6); }
.feed-row.mine-v { background: linear-gradient(90deg, rgba(120, 26, 22, .92), rgba(60, 14, 12, .9)); }
.feed-row .sk { display: inline-flex; align-items: center; gap: .1rem; padding: 0 .35rem; border-radius: 999px; font-size: .74rem; color: var(--ink); background: linear-gradient(180deg, #ffe07a, #ff9a2a); }
.feed-row .sk .glyph { font-size: .8rem; }

/* Barra de habilidades. */
#skills { position: absolute; left: 50%; bottom: 1.5rem; transform: translateX(-50%); display: flex; align-items: flex-end; gap: .85rem; }
.slot {
  position: relative; flex: none; width: 4.7rem; height: 4.7rem; border-radius: 1.15rem;
  border: .17rem solid var(--ink);
  background: linear-gradient(180deg, #5a3319, #2a160b);
  box-shadow: 0 .28rem 0 rgba(0, 0, 0, .55), inset 0 0 0 .13rem rgba(255, 220, 170, .25);
}
.slot > img { position: absolute; inset: .2rem; width: calc(100% - .4rem); height: calc(100% - .4rem); border-radius: .85rem; transition: filter .15s; }
.slot-cd { position: absolute; inset: .2rem; border-radius: .85rem; background: conic-gradient(transparent calc((1 - var(--p, 0)) * 360deg), rgba(12, 6, 2, .74) 0); }
.slot-t {
  position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.75rem; font-weight: 800; color: #fff;
  text-shadow: var(--outline-lg); font-variant-numeric: tabular-nums; line-height: 1;
}
.slot > .kc { position: absolute; left: 50%; bottom: -.72rem; transform: translateX(-50%); height: 1.5rem; min-width: 1.5rem; font-size: .76rem; padding: 0 .36rem; box-shadow: 0 .12rem 0 var(--ink); }
.slot > .kc .g-mouse { width: .78rem; height: 1.06rem; }
.slot.cooling > img { filter: saturate(.45) brightness(.8); }
.slot.small { width: 4.05rem; height: 4.05rem; border-radius: 1rem; }
.slot.small > img, .slot.small .slot-cd { border-radius: .75rem; }
.slot.small .slot-t { font-size: 1.45rem; }
.slot.flash::after { content: ''; position: absolute; inset: -.2rem; border-radius: 1.3rem; background: rgba(255, 255, 230, .55); animation: flashOut .22s ease-out forwards; }
.slot.pop { animation: slotPop .35s cubic-bezier(.3, 1.8, .5, 1); }
.slot.pop::before { content: ''; position: absolute; inset: -.35rem; border-radius: 1.4rem; box-shadow: 0 0 0 .2rem rgba(255, 244, 200, .9); animation: ringOut .45s ease-out forwards; pointer-events: none; }
#skills.dead .slot > img { filter: grayscale(1) brightness(.55); }
#skills.dead .slot-t { opacity: 0; }

/* Ultimate: anel de carga + brilho de pronta. */
.slot.ult { width: 5.6rem; height: 5.6rem; border-radius: 1.4rem; margin-left: .45rem; }
.slot.ult > img, .slot.ult .ult-dim { border-radius: 1.05rem; }
.ult-ring {
  position: absolute; inset: -.55rem; border-radius: 1.85rem; padding: .3rem; pointer-events: none;
  background: conic-gradient(#fff3a8, #ffc43a calc(var(--c, 0) * 360deg), rgba(20, 10, 4, .75) 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  filter: drop-shadow(0 0 .1rem rgba(0, 0, 0, .6));
}
.ult-dim { position: absolute; inset: .2rem; background: linear-gradient(0deg, rgba(12, 6, 2, .0) 0, rgba(12, 6, 2, .0) calc(var(--c, 0) * 100%), rgba(12, 6, 2, .55) calc(var(--c, 0) * 100%)); }
.ult-pct {
  position: absolute; left: 50%; top: -1.65rem; transform: translateX(-50%); padding: .02rem .5rem .06rem; border-radius: 999px;
  font-size: .8rem; font-weight: 800; color: var(--gold); background: rgba(24, 13, 6, .88); box-shadow: 0 0 0 .1rem var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.slot.ult:not(.ready) > img { filter: saturate(.55) brightness(.82); }
.slot.ult.ready {
  box-shadow: 0 .28rem 0 rgba(0, 0, 0, .55), inset 0 0 0 .13rem rgba(255, 240, 180, .7), 0 0 1.2rem .35rem rgba(255, 200, 60, .75);
  animation: ultPulse 1.2s ease-in-out infinite;
}
.slot.ult.ready .ult-ring { background: conic-gradient(from var(--spin), #fffbe0, #ffc43a, #ff8a2a, #ffe07a, #fff3a8, #ffb534, #fffbe0); animation: ringSpin 2.2s linear infinite; }
.slot.ult.ready .ult-pct { color: var(--ink); background: linear-gradient(180deg, #fff3b0, #ffc43a); animation: readyBob 1.2s ease-in-out infinite; }
.slot.ult.no-charge .ult-ring, .slot.ult.no-charge .ult-pct:not(.show) { display: none; }

/* Itens da partida (ao lado da barra de habilidades: Q, W, E, esquiva e R somam 27,6rem) e botão da loja. */
#items { position: absolute; left: calc(50% + 14.85rem); bottom: 1.1rem; padding: .35rem .35rem .4rem; display: flex; flex-direction: column; gap: .35rem; }
.items-slots { display: grid; grid-template-columns: repeat(3, 2.6rem); gap: .25rem; }
.it-slot {
  display: block; width: 2.6rem; height: 2.6rem; padding: .1rem; border-radius: .65rem; border: .13rem solid var(--ink); cursor: var(--cur-hand, pointer);
  background: linear-gradient(180deg, #5a3319, #2a160b); box-shadow: inset 0 0 0 .1rem rgba(255, 220, 170, .2);
}
.it-slot img { display: block; width: 100%; height: 100%; }
.it-slot:hover { filter: brightness(1.12); }
.it-slot.empty { cursor: var(--cur, default); background: rgba(0, 0, 0, .3); border-style: dashed; border-color: rgba(255, 244, 220, .18); box-shadow: none; }
.it-slot.pop { animation: slotPop .35s cubic-bezier(.3, 1.8, .5, 1); }
.items-shop {
  display: flex; align-items: center; justify-content: center; gap: .3rem; padding: .12rem .3rem; border-radius: 999px; cursor: var(--cur-hand, pointer);
  border: .12rem solid var(--ink); background: rgba(24, 13, 6, .85); color: var(--gold); font-size: .8rem; font-weight: 800; line-height: 1.1; white-space: nowrap;
}
.items-shop .glyph { font-size: 1rem; }
.items-shop .kc { height: 1.2rem; min-width: 1.2rem; font-size: .66rem; padding: 0 .25rem; box-shadow: 0 .08rem 0 var(--ink); }
.items-shop:hover { filter: brightness(1.15); }
/* Lanterna de vaga-lumes (consumível, tecla G; ui/shop.js paintUse): quantas guardo, um anel por lanterna minha no chão
   (a luz que falta) e a tecla. Sem nenhuma guardada: apagada. Soltar recusado (hud.js placeReply): balança. */
.items-top { display: flex; gap: .25rem; align-items: stretch; }
.it-use {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .12rem; width: 2.6rem; padding: .12rem .1rem .22rem;
  border-radius: .65rem; border: .13rem solid var(--ink); cursor: var(--cur-hand, pointer); font: inherit; color: var(--cream);
  background: linear-gradient(180deg, #2a5078, #102238); box-shadow: inset 0 0 0 .1rem rgba(232, 255, 122, .22);
}
.it-use .iu-ic { display: block; width: 2.1rem; height: 2.1rem; }
.it-use .iu-n { font-size: .76rem; font-weight: 800; line-height: 1; color: #f2ffb0; text-shadow: var(--outline); font-variant-numeric: tabular-nums; }
.it-use .iu-on { display: flex; gap: .2rem; }
.it-use .iu-on i { display: block; width: .6rem; height: .6rem; border-radius: 50%; box-shadow: 0 0 0 .09rem var(--ink); background: conic-gradient(#e8ff7a calc(var(--p, 0) * 360deg), rgba(0, 0, 0, .55) 0); }
.it-use .iu-on i.off { background: rgba(0, 0, 0, .3); box-shadow: 0 0 0 .08rem rgba(255, 244, 220, .22); }
.it-use .kc { margin-top: auto; height: 1.2rem; min-width: 1.2rem; font-size: .66rem; padding: 0 .25rem; box-shadow: 0 .08rem 0 var(--ink); }
.it-use:hover { filter: brightness(1.15); }
.it-use.empty .iu-ic { filter: grayscale(.8) brightness(.7); }
.it-use.empty .iu-n { color: var(--cream-2); }
.it-use.pop { animation: slotPop .35s cubic-bezier(.3, 1.8, .5, 1); }
.it-use.deny { animation: useDeny .4s ease-in-out; }
@keyframes useDeny { 0%, 100% { transform: none; } 20% { transform: translateX(-.35rem); } 40% { transform: translateX(.3rem); } 60% { transform: translateX(-.2rem); } 80% { transform: translateX(.12rem); } }
#items.near { animation: shopGlow 1.3s ease-in-out infinite; }
#items.near .items-shop { color: var(--ink); background: linear-gradient(180deg, #fff3b0, #ffc43a); }

/* Minimapa, dica, depuração. */
#minimap-box { position: absolute; right: 1rem; bottom: 1rem; padding: .35rem; border-radius: 1.2rem; }
#minimap { display: block; width: 13rem; height: 13rem; border-radius: .9rem; background: #09100b; }
#minimap-box.dead { z-index: 31; } /* por cima da tela de derrota (#death): dá para ver o mapa inteiro enquanto espera */
.mini-zoom { position: absolute; top: .65rem; right: .65rem; display: flex; flex-direction: column; gap: .2rem; }
.mini-zoom button {
  width: 1.35rem; height: 1.35rem; padding: 0; border-radius: .45rem; border: .1rem solid var(--ink); cursor: var(--cur-hand, pointer);
  background: rgba(24, 13, 6, .8); color: var(--gold); font-size: .95rem; font-weight: 900; line-height: 1;
}
.mini-zoom button:hover { filter: brightness(1.2); }
#mute-ind { position: absolute; right: 1rem; bottom: 15.4rem; }
#hint { position: absolute; left: 1rem; bottom: 1rem; max-width: 23rem; padding: .6rem .8rem .7rem; display: flex; flex-direction: column; gap: .32rem; transition: opacity 1.2s, transform 1.2s; }
#hint .hint-t { font-size: .82rem; font-weight: 700; color: var(--gold); }
#hint .ctl { font-size: .84rem; }
#hint .kc { height: 1.5rem; min-width: 1.5rem; font-size: .74rem; box-shadow: 0 .12rem 0 var(--ink); }
#hint.fade { opacity: 0; transform: translateY(.6rem); }
#debug { position: absolute; left: 1rem; top: 8.5rem; padding: .5rem .7rem; border-radius: .7rem; background: rgba(0, 0, 0, .7); color: #cfe; font: 600 .78rem/1.35 ui-monospace, Consolas, monospace; white-space: pre; }

/* Avisos (toasts) e item pego. */
#toasts { position: absolute; left: 50%; bottom: 9.6rem; transform: translateX(-50%); display: flex; flex-direction: column-reverse; align-items: center; gap: .4rem; z-index: 60; }
.toast {
  max-width: 40rem; padding: .42rem 1.1rem .48rem; border-radius: 999px; font-size: 1rem; font-weight: 700; color: var(--ink); text-align: center;
  background: linear-gradient(180deg, #fffaf0, #f3e2bd); box-shadow: 0 0 0 .14rem var(--ink), 0 .4rem .9rem rgba(0, 0, 0, .4);
  animation: toastIn .3s cubic-bezier(.2, 1.5, .4, 1) both;
}
.toast.out { animation: toastOut .4s ease-in both; }
#pickup-msg { position: absolute; left: 50%; bottom: 7.9rem; transform: translateX(-50%); }
/* Caixa da toca visível (hud.js updateBurrow): o item pego e os avisos sobem para não ficar por cima dela. */
#hud.burrow-on #pickup-msg { bottom: 11.2rem; }
#hud.burrow-on #toasts { bottom: 12.9rem; }
.pk {
  display: flex; align-items: center; gap: .55rem; padding: .25rem 1rem .25rem .3rem; border-radius: 999px; white-space: nowrap;
  font-size: 1rem; font-weight: 700; color: var(--cream); text-shadow: 0 .1rem 0 var(--ink);
  background: linear-gradient(180deg, rgba(40, 90, 26, .95), rgba(22, 52, 14, .93)); box-shadow: 0 0 0 .14rem var(--ink), inset 0 0 0 .12rem rgba(184, 245, 138, .35);
  animation: pickIn 2.6s ease both;
}
.pk img { width: 2.1rem; height: 2.1rem; }
.pk b { color: #d8ffb0; }

/* Toca de coelho (hud.js updateBurrow): em cima de uma toca, o que ela liga e o botão Entrar (tecla T); cavando, a barra
   e o botão Parar; embaixo da terra, a barra da viagem; com recarga, quanto falta. Recusada: balança (deny). */
.burrow-box {
  position: absolute; left: 50%; bottom: 8rem; transform: translateX(-50%);
  display: flex; align-items: center; gap: .55rem; padding: .26rem .4rem .34rem .4rem; border-radius: 999px; white-space: nowrap;
  font-size: 1rem; font-weight: 700; color: var(--cream); text-shadow: var(--outline);
  background: linear-gradient(180deg, rgba(104, 66, 32, .96), rgba(56, 32, 14, .94)) padding-box, linear-gradient(180deg, #f0cf94, #9a6a34) border-box;
  box-shadow: 0 0 0 .12rem var(--ink), 0 .4rem .9rem rgba(0, 0, 0, .35);
  animation: burrowIn .25s cubic-bezier(.2, 1.4, .4, 1) both;
}
.burrow-box .b-ic { width: 2rem; height: 2rem; flex: none; }
.burrow-box .b-ic .glyph { width: 100%; height: 100%; display: block; }
.burrow-box b { color: #ffe2a8; font-variant-numeric: tabular-nums; }
.burrow-box .b-text { padding-right: .25rem; }
.burrow-box .b-btn {
  display: inline-flex; align-items: center; gap: .4rem; padding: .18rem .3rem .2rem .75rem; border-radius: 999px; border: 0; cursor: pointer;
  font: inherit; font-size: .95rem; color: var(--ink); text-shadow: none;
  background: linear-gradient(180deg, #fff3cf, #f0c86a); box-shadow: 0 0 0 .12rem var(--ink), 0 .18rem 0 rgba(0, 0, 0, .45);
}
.burrow-box .b-btn:hover { background: linear-gradient(180deg, #fffae6, #ffd97e); }
.burrow-box .b-btn:active { transform: translateY(.1rem); box-shadow: 0 0 0 .12rem var(--ink), 0 .08rem 0 rgba(0, 0, 0, .45); }
.burrow-box .b-btn .kc { height: 1.35rem; min-width: 1.35rem; font-size: .76rem; }
.burrow-box .b-bar { position: absolute; left: 2.8rem; right: 1.1rem; bottom: .18rem; height: .26rem; border-radius: 999px; background: rgba(0, 0, 0, .5); overflow: hidden; }
.burrow-box .b-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #e2bd84, #fff0c0); transition: width .1s linear; }
.burrow-box.cd { filter: saturate(.55); }
.burrow-box.cd b { color: var(--cream-2); }
.burrow-box.dig .b-ic { animation: burrowDig .32s ease-in-out infinite alternate; }
.burrow-box.under { background: linear-gradient(180deg, rgba(58, 36, 18, .97), rgba(26, 14, 6, .95)) padding-box, linear-gradient(180deg, #c8a06a, #6a4420) border-box; }
.burrow-box.under .b-bar i { background: linear-gradient(90deg, #9a6a34, #ffd98a); }
.burrow-box.deny { animation: burrowDeny .4s ease-in-out; }
/* Em pé na lanterna de outro jogador (ui/wards.js snuffView): o botão Apagar. */
.burrow-box.snuff { background: linear-gradient(180deg, rgba(34, 58, 92, .97), rgba(14, 26, 48, .95)) padding-box, linear-gradient(180deg, #f2ffb0, #8a9a3a) border-box; }
.burrow-box.snuff b { color: #f2ffb0; }
@keyframes burrowIn { from { opacity: 0; transform: translateX(-50%) translateY(.6rem) scale(.9); } to { opacity: 1; transform: translateX(-50%); } }
@keyframes burrowDig { from { transform: rotate(-6deg) translateY(.05rem); } to { transform: rotate(6deg) translateY(-.1rem); } }
@keyframes burrowDeny { 0%, 100% { transform: translateX(-50%); } 20% { transform: translateX(calc(-50% - .5rem)); } 40% { transform: translateX(calc(-50% + .45rem)); } 60% { transform: translateX(calc(-50% - .3rem)); } 80% { transform: translateX(calc(-50% + .2rem)); } }

/* Vinheta de dano. */
#hurt-vignette { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .25s; background: radial-gradient(ellipse at center, transparent 55%, rgba(200, 20, 20, .55) 100%); }
#hurt-vignette.on { opacity: 1; transition: none; }
#hurt-vignette.low { opacity: .85; animation: lowHp 1.1s ease-in-out infinite; }

/* ------------------------------------------------------------------ janelas por cima da HUD */

.overlay { position: absolute; inset: 0; display: grid; place-items: center; padding: 1.5rem; }
.overlay-dim { background: rgba(8, 5, 2, .55); pointer-events: auto; }

/* Derrota. */
#death { z-index: 30; background: radial-gradient(ellipse at center, rgba(40, 0, 0, .1) 30%, rgba(60, 4, 4, .6) 100%); }
.death-card { width: 30rem; padding: 1.2rem 1.4rem 1.3rem; display: flex; flex-direction: column; align-items: center; gap: .75rem; text-align: center; transform: translateY(-3rem); animation: deathIn .45s cubic-bezier(.2, 1.3, .4, 1) both; }
.death-title { display: flex; align-items: center; gap: .5rem; font-size: 2.2rem; font-weight: 800; line-height: 1; color: #ffb3a8; text-shadow: var(--outline-lg); }
.death-title .glyph { font-size: 2rem; }
.death-by { display: flex; align-items: center; gap: .85rem; text-align: left; }
.death-by .face { width: 4.6rem; height: 4.6rem; }
.death-by .db-k { font-size: .9rem; font-weight: 600; color: var(--muted); }
.death-by .db-n { font-size: 1.5rem; font-weight: 800; line-height: 1.05; color: var(--cream); text-shadow: var(--outline); }
.death-by .db-h { font-size: .88rem; font-weight: 600; color: var(--cream-2); }
.death-by .db-cause .glyph { width: 4.2rem; height: 4.2rem; display: block; }
.death-timer { width: 100%; display: flex; flex-direction: column; gap: .35rem; }
.dt-bar { height: .75rem; border-radius: 999px; overflow: hidden; background: #1c0f07; border: .13rem solid var(--ink); }
#death-fill { height: 100%; width: 100%; background: linear-gradient(90deg, #8fe25e, #ffd257); border-radius: 999px; }
#death-timer-t { font-size: 1.25rem; font-weight: 800; color: var(--cream); font-variant-numeric: tabular-nums; }
.death-stats { font-size: .9rem; font-weight: 600; color: var(--muted); }
.death-stats b { color: var(--cream); }

/* Placar completo (Tab). */
#scoreboard { z-index: 40; background: rgba(8, 5, 2, .35); }
.score-panel { width: 58rem; max-height: 100%; display: flex; flex-direction: column; padding: 1.1rem 1.3rem 1rem; }
.score-scroll { min-height: 0; overflow: auto; border-radius: .9rem; }
.score-table { width: 100%; border-collapse: separate; border-spacing: 0 .22rem; font-size: .98rem; }
.score-table th { padding: 0 .6rem .2rem; font-size: .78rem; font-weight: 700; color: var(--muted); text-align: center; white-space: nowrap; }
.score-table th.l, .score-table td.l { text-align: left; }
.score-table td { padding: .22rem .6rem; text-align: center; font-weight: 700; background: rgba(255, 244, 220, .06); font-variant-numeric: tabular-nums; }
.score-table td:first-child { border-radius: .7rem 0 0 .7rem; width: 3rem; color: var(--muted); font-weight: 800; }
.score-table td:last-child { border-radius: 0 .7rem .7rem 0; }
.score-table .who { display: flex; align-items: center; gap: .55rem; }
.score-table .who .face { width: 2rem; height: 2rem; border-width: .12rem; }
.score-table .who .nm { max-width: 14rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--cream); }
.score-table .hero { color: var(--cream-2); font-weight: 600; font-size: .88rem; white-space: nowrap; }
.score-table .pts { color: var(--gold); font-size: 1.12rem; font-weight: 800; }
.score-table .lvl { color: var(--cream); font-weight: 800; }
.score-table tr.me td { background: rgba(255, 210, 87, .2); box-shadow: inset 0 .12rem 0 rgba(255, 210, 87, .45), inset 0 -.12rem 0 rgba(255, 210, 87, .45); }
.score-table tr.me td:first-child { box-shadow: inset .12rem .12rem 0 rgba(255, 210, 87, .45), inset 0 -.12rem 0 rgba(255, 210, 87, .45); color: var(--gold); }
.score-table tr.me td:last-child { box-shadow: inset -.12rem .12rem 0 rgba(255, 210, 87, .45), inset 0 -.12rem 0 rgba(255, 210, 87, .45); }
.score-table tr.r1 td:first-child { color: var(--gold); }
.tag-bot { margin-left: .3rem; padding: .02rem .4rem .06rem; border-radius: 999px; font-size: .64rem; font-weight: 800; color: var(--muted); background: rgba(0, 0, 0, .35); }
.score-me { margin-top: .7rem; padding: .5rem .8rem; border-radius: .9rem; font-size: .95rem; font-weight: 600; color: var(--cream-2); background: rgba(0, 0, 0, .25); display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; }
.score-me b { color: var(--gold); font-weight: 800; }

/* Loja (B). */
#shop { z-index: 45; background: rgba(8, 5, 2, .4); }
.shop-panel { width: 66rem; max-height: 100%; padding: 1.1rem 1.3rem 1.2rem; display: flex; flex-direction: column; gap: .8rem; }
.shop-panel .deco-tl { left: -2.7rem; top: -2.5rem; width: 5.6rem; }
.shop-panel .panel-head { margin-bottom: 0; }
.shop-panel .x-btn { margin-left: 0; }
.shop-where { flex: 1; min-width: 0; }
.shop-where.ok { color: var(--green); }
.shop-gold { font-size: 1.15rem; padding: .15rem .75rem .15rem .3rem; }
.shop-gold .glyph { font-size: 1.35rem; }
.shop-body { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: 1.1rem; min-height: 0; }
.shop-cat { display: flex; flex-direction: column; gap: .7rem; min-height: 0; overflow: auto; padding: .1rem .2rem .2rem 0; }
.shop-sec, .shop-invbox { display: flex; flex-direction: column; gap: .45rem; padding: .6rem .7rem .7rem; border-radius: 1rem; background: rgba(0, 0, 0, .22); box-shadow: inset 0 0 0 .1rem rgba(255, 220, 170, .1); }
.shop-sec.rec { background: rgba(255, 210, 87, .08); box-shadow: inset 0 0 0 .1rem rgba(255, 210, 87, .28); }
.shop-sec-t { display: flex; align-items: center; gap: .4rem; font-size: .98rem; font-weight: 800; color: var(--gold); text-shadow: 0 .1rem 0 var(--ink); }
.shop-sec-t .glyph { font-size: 1.05rem; }
.shop-sec-t b { color: var(--cream); }
.shop-sec-t small { margin-left: auto; font-size: .74rem; font-weight: 600; color: var(--muted); text-shadow: none; }
.gear-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .45rem; }
.gear-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .45rem; }
.gear-card {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .12rem; padding: .45rem .3rem .4rem; cursor: var(--cur-hand, pointer);
  border-radius: .9rem; border: .13rem solid var(--ink); color: var(--cream);
  background: linear-gradient(180deg, rgba(255, 244, 220, .11), rgba(255, 244, 220, .03)); box-shadow: 0 .18rem 0 var(--ink);
  transition: transform .08s, background .12s;
}
.gear-card:hover { background: rgba(255, 244, 220, .17); transform: translateY(-.08rem); }
.gear-card img { width: 3.3rem; height: 3.3rem; }
.gc-name { min-height: 1.6rem; display: flex; align-items: center; font-size: .74rem; font-weight: 700; line-height: 1.05; text-align: center; }
.gc-cost { display: inline-flex; align-items: center; gap: .15rem; font-size: .84rem; font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; }
.gc-cost .glyph { font-size: .95rem; }
.gear-card.poor .gc-cost { color: #ff8f86; }
.gear-card.poor img { filter: saturate(.7) brightness(.85); }
.gc-n {
  position: absolute; left: .25rem; top: .22rem; min-width: 1.2rem; height: 1.2rem; border-radius: 999px; display: grid; place-items: center;
  font-size: .72rem; font-weight: 800; color: var(--ink); background: var(--cream-2); box-shadow: 0 0 0 .1rem var(--ink);
}
.gc-own { position: absolute; right: .3rem; top: .18rem; font-size: .8rem; font-weight: 800; color: var(--green); text-shadow: var(--outline); }
.gc-own:empty { display: none; }
.gear-card.next { box-shadow: 0 .18rem 0 var(--ink), 0 0 .9rem rgba(255, 200, 60, .5); }
.gear-card.next .gc-n { background: linear-gradient(180deg, #fff3b0, #ffc43a); }
.gear-card.sel { background: rgba(255, 210, 87, .24); box-shadow: 0 .18rem 0 var(--ink), 0 0 0 .17rem var(--gold); }
/* Consumíveis (a lanterna de vaga-lumes): seção e cartões em azul-noite; gc-own = quantos guardo de quantos. */
.shop-sec.use { background: rgba(120, 170, 255, .07); box-shadow: inset 0 0 0 .1rem rgba(232, 255, 122, .2); }
.gear-card.use .gc-own { color: #f2ffb0; }
.gear-card.use.full .gc-own { color: var(--gold); }
.sd-tier.use { color: #f2ffb0; }
.shop-side { display: flex; flex-direction: column; gap: .7rem; min-height: 0; }
.shop-detail { flex: 1; display: flex; flex-direction: column; gap: .5rem; padding: .8rem .9rem .9rem; border-radius: 1rem; background: rgba(0, 0, 0, .25); box-shadow: inset 0 0 0 .1rem rgba(255, 220, 170, .1); }
.sd-top { display: flex; align-items: center; gap: .8rem; }
.sd-ic { flex: none; width: 5.4rem; height: 5.4rem; }
.sd-name { font-size: 1.35rem; font-weight: 800; line-height: 1.05; color: var(--cream); text-shadow: var(--outline); }
.sd-tier { margin-top: .2rem; font-size: .8rem; font-weight: 700; color: var(--muted); }
.sd-tier.adv { color: var(--gold); }
.sd-stats { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .15rem; }
.sd-stats li { font-size: 1rem; font-weight: 800; color: #b8f58a; text-shadow: 0 .08rem 0 var(--ink); }
.sd-desc { margin: 0; font-size: .9rem; font-weight: 600; color: var(--cream-2); }
.sd-after { padding: .45rem .6rem .5rem; border-radius: .7rem; background: rgba(255, 244, 220, .06); }
.sd-k { font-size: .76rem; font-weight: 700; color: var(--muted); }
.sd-after ul { margin: .15rem 0 0; padding: 0; list-style: none; font-size: .88rem; font-weight: 800; color: var(--cream); }
.sd-act { margin-top: auto; display: flex; flex-direction: column; gap: .45rem; }
.sd-cost { display: flex; align-items: center; gap: .3rem; font-size: .9rem; font-weight: 700; color: var(--muted); }
.sd-cost span { margin-right: auto; }
.sd-cost .glyph { font-size: 1.3rem; }
.sd-cost b { font-size: 1.4rem; font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; text-shadow: 0 .1rem 0 var(--ink); }
.sd-btn { width: 100%; font-size: 1.15rem; }
.sd-why { min-height: 1.2rem; font-size: .8rem; font-weight: 600; color: var(--muted); text-align: center; }
.sd-why.warn { color: #ff9a8f; }
.sd-empty { margin: auto; color: var(--muted); }
.shop-inv { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .3rem; }
.si-slot {
  display: block; aspect-ratio: 1; padding: .12rem; border-radius: .7rem; border: .13rem solid var(--ink); cursor: var(--cur-hand, pointer);
  background: linear-gradient(180deg, #5a3319, #2a160b); box-shadow: 0 .15rem 0 rgba(0, 0, 0, .5);
}
.si-slot img { display: block; width: 100%; height: 100%; }
.si-slot:hover { filter: brightness(1.12); }
.si-slot.empty { cursor: var(--cur, default); background: rgba(0, 0, 0, .25); border-style: dashed; border-color: rgba(255, 244, 220, .2); box-shadow: none; }
.si-slot.sel { box-shadow: 0 0 0 .17rem var(--gold), 0 .15rem 0 rgba(0, 0, 0, .5); }
.shop-total { display: flex; flex-wrap: wrap; gap: .2rem .6rem; font-size: .78rem; font-weight: 700; color: #b8f58a; }
.shop-total .none { color: var(--muted); font-weight: 600; }

/* Menu (Esc). */
#menu { z-index: 50; }
.menu-panel .deco-tl { left: -2.7rem; top: -2.5rem; width: 5.6rem; }
.menu-panel { width: 36rem; max-height: 100%; padding: 1.1rem 1.4rem 1.3rem; display: flex; flex-direction: column; gap: .9rem; }
.menu-panel .panel-head { margin-bottom: 0; }
.menu-sec { display: flex; flex-direction: column; gap: .6rem; padding: .8rem .95rem .9rem; border-radius: 1.05rem; background: rgba(0, 0, 0, .22); box-shadow: inset 0 0 0 .1rem rgba(255, 220, 170, .1); }
.menu-sec-t { display: flex; align-items: center; gap: .45rem; font-size: 1rem; font-weight: 800; color: var(--gold); text-shadow: 0 .1rem 0 var(--ink); }
.menu-sec-t .glyph { font-size: 1.1rem; }
.menu-controls { display: grid; grid-template-columns: 1fr 1fr; gap: .38rem .9rem; }
.menu-controls .ctl { font-size: .86rem; white-space: normal; }
.menu-controls .kc { height: 1.55rem; min-width: 1.55rem; font-size: .76rem; box-shadow: 0 .12rem 0 var(--ink); }
.slider { display: grid; grid-template-columns: 5.5rem 1fr 2.4rem; align-items: center; gap: .8rem; font-size: 1rem; font-weight: 700; }
.slider output { text-align: right; font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; }
.menu-note { font-size: .78rem; font-weight: 500; color: var(--muted); }
.menu-actions { display: flex; gap: .7rem; justify-content: space-between; }
.menu-actions .btn { flex: 1; }

/* Troca de herói (H). */
#hero-picker { z-index: 55; }
.picker-panel { width: 94rem; max-height: 100%; padding: 1.1rem 1.3rem 1.2rem; display: flex; flex-direction: column; gap: .9rem; }
.picker-panel .panel-head { margin-bottom: 0; }
.picker-body { display: grid; grid-template-columns: 40rem minmax(0, 1fr); gap: 1.3rem; min-height: 0; }
.picker-side { display: flex; flex-direction: column; gap: .7rem; }
.picker-note { font-size: .92rem; font-weight: 600; color: var(--cream-2); padding: .55rem .8rem; border-radius: .8rem; background: rgba(0, 0, 0, .25); }
.picker-note b { color: var(--gold); }
.picker-actions { display: flex; gap: .7rem; margin-top: auto; }
.picker-actions .btn { flex: 1; }

/* Pódio do fim da rodada. */
#podium {
  z-index: 35; align-content: center; padding: 1.2rem 2rem;
  background: radial-gradient(ellipse 70% 60% at 50% 45%, rgba(40, 24, 6, .72), rgba(8, 5, 2, .88));
  animation: fadeIn .4s ease both;
}
#hud.podium-on #death, #hud.podium-on #announce { display: none; }
.pod { width: 70rem; display: flex; flex-direction: column; align-items: center; gap: .9rem; }
.pod-head { display: flex; flex-direction: column; align-items: center; gap: .1rem; text-align: center; }
.pod-kicker { font-size: 1.05rem; font-weight: 800; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.pod-title { font-size: 3rem; font-weight: 800; line-height: 1.05; color: var(--gold); text-shadow: var(--outline-lg), 0 0 1.6rem rgba(255, 190, 60, .45); }
.pod-why { display: flex; align-items: center; gap: .4rem; font-size: 1rem; font-weight: 700; color: var(--cream-2); }
.pod-stage { display: flex; align-items: flex-end; justify-content: center; gap: 1rem; margin-top: .6rem; }
.pod-spot { width: 17.5rem; display: flex; flex-direction: column; align-items: center; gap: .18rem; animation: rise .6s cubic-bezier(.2, 1.3, .4, 1) both; }
.pod-spot.p1 { animation-delay: .35s; }
.pod-spot.p2 { animation-delay: .15s; }
.pod-spot.p3 { animation-delay: .5s; }
.pod-face-wrap { position: relative; }
.pod-face { width: 6.4rem; height: 6.4rem; border-width: .2rem; box-shadow: 0 .3rem 0 var(--ink), 0 .6rem 1.2rem rgba(0, 0, 0, .4); }
.p1 .pod-face { width: 8.2rem; height: 8.2rem; box-shadow: 0 .3rem 0 var(--ink), 0 0 0 .3rem #ffd257, 0 0 1.8rem .4rem rgba(255, 200, 60, .55); }
.pod-crown { position: absolute; left: 50%; top: -2.3rem; transform: translateX(-50%) rotate(-6deg); font-size: 3rem; line-height: 0; z-index: 1; filter: drop-shadow(0 .2rem 0 rgba(0, 0, 0, .35)); }
.pod-crown .glyph { width: 3rem; height: 3rem; }
.pod-mvp-tag {
  position: absolute; left: 50%; bottom: -.7rem; transform: translateX(-50%); display: flex; align-items: center; gap: .2rem;
  padding: .06rem .55rem .1rem .35rem; border-radius: 999px; font-size: .8rem; font-weight: 800; color: var(--ink);
  background: linear-gradient(180deg, #fff3b0, #ffc43a); border: .13rem solid var(--ink); white-space: nowrap;
}
.pod-name { margin-top: .55rem; max-width: 100%; font-size: 1.35rem; font-weight: 800; line-height: 1.1; color: var(--cream); text-shadow: var(--outline); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pod-name small { font-size: .8rem; color: var(--gold); }
.pod-hero { font-size: .82rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.pod-points { font-size: .95rem; font-weight: 700; color: var(--cream-2); }
.pod-points b { font-size: 1.6rem; color: var(--gold); text-shadow: var(--outline); }
.pod-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: .15rem .6rem; font-size: .8rem; font-weight: 700; color: var(--cream-2); }
.pod-stats span { display: inline-flex; align-items: center; gap: .22rem; white-space: nowrap; }
.pod-block {
  width: 100%; margin-top: .45rem; display: grid; place-items: center; border-radius: 1rem 1rem .4rem .4rem;
  border: .16rem solid var(--ink); box-shadow: inset 0 .2rem 0 rgba(255, 255, 255, .45), 0 .4rem 1rem rgba(0, 0, 0, .4);
}
.pod-block span { font-size: 2.6rem; font-weight: 800; color: #fff; text-shadow: var(--outline-lg); }
.p1 .pod-block { height: 6.4rem; background: linear-gradient(180deg, #ffe89a, #ffc43a 50%, #e0921a); }
.p2 .pod-block { height: 4.6rem; background: linear-gradient(180deg, #f4f6fa, #c4cad6 50%, #8e96a6); }
.p3 .pod-block { height: 3.4rem; background: linear-gradient(180deg, #ffd0a0, #d88a4a 50%, #a45a26); }
.pod-spot.me .pod-name { color: var(--gold); }
.pod-spot.empty .pod-face { opacity: .6; }
.pod-cards { display: flex; justify-content: center; gap: 1rem; width: 100%; }
.pod-card { min-width: 22rem; max-width: 34rem; padding: .6rem 1rem .7rem; border-radius: 1.1rem; background: rgba(24, 13, 6, .85); box-shadow: 0 0 0 .14rem var(--ink), inset 0 0 0 .12rem rgba(255, 220, 170, .14); }
.pod-card-k { display: flex; align-items: center; gap: .35rem; font-size: .82rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.pod-card-body { display: flex; align-items: center; gap: .8rem; margin-top: .3rem; }
.pod-card-body .face { width: 3.4rem; height: 3.4rem; }
.pod-card-name { font-size: 1.2rem; font-weight: 800; color: var(--cream); line-height: 1.1; }
.pod-card-name small { color: var(--gold); }
.pod-card-sub { font-size: .85rem; font-weight: 600; color: var(--cream-2); }
.pod-card .pod-stats { justify-content: flex-start; margin-top: .15rem; }
.pod-mvp { box-shadow: 0 0 0 .14rem var(--ink), inset 0 0 0 .14rem rgba(255, 210, 87, .55), 0 0 1.4rem rgba(255, 190, 60, .3); }
.pod-mvp .pod-card-k { color: var(--gold); }
.pod-rank { font-size: 2.6rem; font-weight: 800; line-height: 1; color: var(--cream); text-shadow: var(--outline-lg); min-width: 3.6rem; text-align: center; }
.pod-me.top .pod-rank { color: var(--gold); }
.pod-next { display: flex; align-items: center; gap: .5rem; padding: .35rem 1.2rem .4rem; border-radius: 999px; font-size: 1.1rem; font-weight: 700; color: var(--cream); background: rgba(0, 0, 0, .35); }
.pod-next b { color: var(--gold); font-size: 1.35rem; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ animações */

@keyframes playBreath { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.08) saturate(1.08); } }
@keyframes dotPulse { 0%, 100% { box-shadow: 0 0 .3rem #7de35e; } 50% { box-shadow: 0 0 .75rem #7de35e; } }
@keyframes popIn { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes warnPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes guardGlow { 0%, 100% { box-shadow: 0 0 0 .12rem var(--ink), 0 0 .6rem rgba(125, 227, 94, .35); } 50% { box-shadow: 0 0 0 .12rem var(--ink), 0 0 1.3rem rgba(125, 227, 94, .75); } }
@keyframes annIn { from { transform: translateY(-.8rem) scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes annOut { to { transform: translateY(-.6rem) scale(.96); opacity: 0; } }
@keyframes feedIn { from { transform: translateX(1.5rem); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes feedOut { to { transform: translateX(1rem); opacity: 0; } }
@keyframes flashOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes shopGlow { 0%, 100% { box-shadow: 0 0 0 .12rem var(--ink), 0 .45rem 1rem rgba(0, 0, 0, .38), 0 0 .5rem rgba(255, 200, 60, .35); } 50% { box-shadow: 0 0 0 .12rem var(--ink), 0 .45rem 1rem rgba(0, 0, 0, .38), 0 0 1.3rem rgba(255, 200, 60, .8); } }
@keyframes slotPop { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes ringOut { from { opacity: 1; transform: scale(.92); } to { opacity: 0; transform: scale(1.18); } }
@keyframes ultPulse { 0%, 100% { box-shadow: 0 .28rem 0 rgba(0, 0, 0, .55), inset 0 0 0 .13rem rgba(255, 240, 180, .7), 0 0 .9rem .2rem rgba(255, 200, 60, .6); } 50% { box-shadow: 0 .28rem 0 rgba(0, 0, 0, .55), inset 0 0 0 .13rem rgba(255, 250, 210, .9), 0 0 1.9rem .6rem rgba(255, 190, 40, .95); } }
@keyframes ringSpin { to { --spin: 360deg; } }
@keyframes readyBob { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-.2rem); } }
@keyframes toastIn { from { transform: translateY(.6rem) scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes toastOut { to { transform: translateY(-.4rem); opacity: 0; } }
@keyframes pickIn { 0% { transform: translateY(.6rem) scale(.9); opacity: 0; } 10% { transform: none; opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(-.8rem); opacity: 0; } }
@keyframes lowHp { 0%, 100% { opacity: .55; } 50% { opacity: .95; } }
@keyframes deathIn { from { transform: translateY(-2rem) scale(.85); opacity: 0; } to { transform: translateY(-3rem); opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { transform: translateY(3rem); opacity: 0; } to { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Tempestade (hud.js updateStorm): contagem da fase; fora do círculo seguro, seta e distância. */
.storm-box {
  display: flex; align-items: center; gap: .5rem; padding: .22rem .9rem .22rem .35rem; border-radius: 999px;
  font-size: .98rem; font-weight: 700; color: var(--cream); text-shadow: var(--outline);
}
.storm-box .s-ic .glyph { width: 1.9rem; height: 1.9rem; display: block; }
.storm-box b { color: #d8c8ff; font-variant-numeric: tabular-nums; }
.storm-box .s-go { display: inline-flex; align-items: center; gap: .3rem; font-size: .9rem; color: var(--cream); }
.storm-box .s-dir { width: 1.35rem; height: 1.35rem; transition: transform .2s; }
.storm-box .s-dir .glyph { width: 100%; height: 100%; display: block; }
.storm-box.final b { color: #ffb0f0; }
.storm-box.soon {
  background: linear-gradient(180deg, rgba(120, 72, 20, .95), rgba(70, 38, 10, .93)) padding-box, linear-gradient(180deg, #ffd08a, #c0701a) border-box;
}
.storm-box.soon b { color: #ffd257; }
.storm-box.out {
  background: linear-gradient(180deg, rgba(122, 28, 60, .96), rgba(64, 12, 34, .94)) padding-box, linear-gradient(180deg, #ff9ad0, #b0206a) border-box;
  animation: stormGlow 1s ease-in-out infinite;
}
.storm-box.out b { color: #ffd0e4; }
@keyframes stormGlow { 0%, 100% { box-shadow: 0 0 0 .12rem var(--ink), 0 0 .6rem rgba(255, 70, 160, .4); } 50% { box-shadow: 0 0 0 .12rem var(--ink), 0 0 1.4rem rgba(255, 70, 160, .85); } }
/* Eventos da floresta (hud.js updateEvent): o que é, contagem ou vida, seta e distância; barra do baú da estrela. */
.event-box {
  position: relative; display: flex; align-items: center; gap: .5rem; padding: .22rem .9rem .3rem .35rem; border-radius: 999px;
  font-size: .98rem; font-weight: 700; color: var(--cream); text-shadow: var(--outline);
  background: linear-gradient(180deg, rgba(38, 48, 104, .95), rgba(18, 22, 62, .93)) padding-box, linear-gradient(180deg, #ffe89a, #c79a2a) border-box;
}
.event-box .e-ic .glyph { width: 1.9rem; height: 1.9rem; display: block; }
.event-box b { color: var(--gold); font-variant-numeric: tabular-nums; }
.event-box .e-go { display: inline-flex; align-items: center; gap: .3rem; font-size: .9rem; color: var(--cream-2); }
.event-box .e-dir { width: 1.35rem; height: 1.35rem; transition: transform .2s; }
.event-box .e-dir .glyph { width: 100%; height: 100%; display: block; }
.event-box .e-bar { position: absolute; left: 2.6rem; right: 1rem; bottom: .16rem; height: .24rem; border-radius: 999px; background: rgba(0, 0, 0, .5); overflow: hidden; }
.event-box .e-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #fff0b0, #ffd257); transition: width .1s linear; }
.event-box.live { animation: eventGlow 1.4s ease-in-out infinite; }
.event-box.mine .e-bar i { background: linear-gradient(90deg, #d8ffb0, #7de35e); }
.event-box.dis b { color: #ff9080; }
.event-box.caravan { background: linear-gradient(180deg, rgba(112, 70, 22, .95), rgba(62, 34, 10, .93)) padding-box, linear-gradient(180deg, #ffd08a, #b8741e) border-box; animation: none; }
/* Caçada ao líder (hud.js updateHunt): quem é caçado, recompensa, quando foi visto, seta e distância até a revelação;
   caçado, a própria cabeça e a contagem até a próxima revelação. */
.hunt-box {
  display: flex; align-items: center; gap: .5rem; padding: .22rem .9rem .3rem .35rem; border-radius: 999px;
  font-size: .98rem; font-weight: 700; color: var(--cream); text-shadow: var(--outline);
  background: linear-gradient(180deg, rgba(118, 30, 30, .95), rgba(62, 12, 14, .93)) padding-box, linear-gradient(180deg, #ffb0a0, #c0302a) border-box;
}
.hunt-box .h-ic { position: relative; width: 1.9rem; height: 1.9rem; flex: none; }
.hunt-box .h-ic .face { width: 100%; height: 100%; }
.hunt-box .h-ic .glyph { width: 100%; height: 100%; display: block; color: #ffb0a0; }
.hunt-box b { color: var(--gold); font-variant-numeric: tabular-nums; }
.hunt-box .h-go { display: inline-flex; align-items: center; gap: .3rem; font-size: .9rem; color: var(--cream-2); }
.hunt-box .h-dir { width: 1.35rem; height: 1.35rem; transition: transform .2s; }
.hunt-box .h-dir .glyph { width: 100%; height: 100%; display: block; }
.hunt-box .h-n { font-size: .8rem; color: #ffb0a0; }
.hunt-box.fresh { animation: huntFlash .9s ease-out; }
.hunt-box.mine { animation: huntGlow 1.1s ease-in-out infinite; }
.hunt-box.mine b { color: #ffd0c4; }
@keyframes huntFlash { 0% { box-shadow: 0 0 0 .12rem var(--ink), 0 0 1.6rem rgba(255, 80, 60, .95); } 100% { box-shadow: 0 0 0 .12rem var(--ink), 0 0 0 rgba(255, 80, 60, 0); } }
@keyframes huntGlow { 0%, 100% { box-shadow: 0 0 0 .12rem var(--ink), 0 0 .5rem rgba(255, 70, 50, .4); } 50% { box-shadow: 0 0 0 .12rem var(--ink), 0 0 1.4rem rgba(255, 70, 50, .9); } }
.ann-hunt { background: linear-gradient(180deg, rgba(110, 30, 26, .95), rgba(60, 14, 12, .93)); box-shadow: 0 0 0 .14rem var(--ink), 0 .6rem 1.4rem rgba(0, 0, 0, .45), inset 0 0 0 .14rem rgba(255, 150, 130, .5); }
.ann-hunt .ann-t { color: #ffd0c4; }
.ann-ward { background: linear-gradient(180deg, rgba(30, 56, 92, .96), rgba(12, 24, 48, .94)); box-shadow: 0 0 0 .14rem var(--ink), 0 .6rem 1.4rem rgba(0, 0, 0, .45), inset 0 0 0 .14rem rgba(232, 255, 122, .5); }
.ann-ward .ann-t { color: #f2ffb0; }
@keyframes eventGlow { 0%, 100% { box-shadow: 0 0 0 .12rem var(--ink), 0 0 .5rem rgba(255, 214, 90, .35); } 50% { box-shadow: 0 0 0 .12rem var(--ink), 0 0 1.3rem rgba(255, 214, 90, .8); } }
.ann-event { background: linear-gradient(180deg, rgba(44, 54, 120, .96), rgba(20, 24, 70, .94)); box-shadow: 0 0 0 .14rem var(--ink), 0 .6rem 1.4rem rgba(0, 0, 0, .45), inset 0 0 0 .14rem rgba(255, 226, 140, .55); }
.ann-event .ann-t { color: #ffe9a8; }
.ann-caravan { background: linear-gradient(180deg, rgba(112, 70, 22, .96), rgba(62, 34, 10, .94)); box-shadow: 0 0 0 .14rem var(--ink), 0 .6rem 1.4rem rgba(0, 0, 0, .45), inset 0 0 0 .14rem rgba(255, 208, 138, .55); }
.ann-caravan .ann-t { color: #ffe0a8; }
.ann-storm { background: linear-gradient(180deg, rgba(70, 40, 120, .96), rgba(34, 16, 70, .94)); box-shadow: 0 0 0 .14rem var(--ink), 0 .6rem 1.4rem rgba(0, 0, 0, .45), inset 0 0 0 .14rem rgba(190, 150, 255, .5); }
.ann-storm .ann-t { color: #e2d4ff; }
.ann-night { background: linear-gradient(180deg, rgba(22, 30, 72, .96), rgba(8, 12, 36, .94)); box-shadow: 0 0 0 .14rem var(--ink), 0 .6rem 1.4rem rgba(0, 0, 0, .45), inset 0 0 0 .14rem rgba(200, 214, 255, .45); }
.ann-night .ann-t { color: #dfe6ff; }
.ann-night.ann-dawn { background: linear-gradient(180deg, rgba(120, 72, 40, .96), rgba(64, 34, 22, .94)); box-shadow: 0 0 0 .14rem var(--ink), 0 .6rem 1.4rem rgba(0, 0, 0, .45), inset 0 0 0 .14rem rgba(255, 210, 120, .5); }
.ann-night.ann-dawn .ann-t { color: #ffe3a0; }