:root{
    /* Áreas seguras do aparelho (entalhe/Ilha Dinâmica em cima, barra de gesto
       do "home" embaixo, cantos arredondados nas laterais quando deitado).
       O <meta viewport-fit=cover> faz a página ir ATÉ a borda física da tela —
       sem consumir estes env() aqui, a HUD fica embaixo do entalhe e o manche
       cai dentro da faixa de gesto do iOS (arrastar ali sai do jogo).
       Viram variáveis (e não env() solto) por dois motivos: dá pra escrever
       max(12px, var(--sal)) sem repetir env() em todo canto, e um teste
       automatizado consegue simular um iPhone sobrescrevendo as variáveis. */
    --sat: env(safe-area-inset-top, 0px);
    --sar: env(safe-area-inset-right, 0px);
    --sab: env(safe-area-inset-bottom, 0px);
    --sal: env(safe-area-inset-left, 0px);
    --void:var(--hud-surface-canvas);
    --stone:var(--hud-surface-control);
    --edge:var(--hud-border-subtle);
    --t0:var(--hud-team-0);
    --t1:var(--hud-team-1);
    --t2:var(--hud-team-2);
    --gold:var(--hud-accent);
    --life:var(--hud-health);
    --mana:var(--hud-resource);
    --ink:var(--hud-text);
    --dim:var(--hud-text-muted);
  }
  /* Cover scroll containers too: gesture handling can stop at the nearest
     scroller before reaching body. Keep panning, but never double-tap zoom.
     Joystick, canvas and skill controls override this with touch-action:none. */
  *{box-sizing:border-box;touch-action:manipulation;}
  /* Square, recessed scroll rails shared by the picker, shop and HUD panels. */
  html{color-scheme:dark;}
  *{scrollbar-width:thin;scrollbar-color:#706184 var(--void);}
  /* Use the pixel-edged thumb on Chromium/WebKit; retain the native fallback elsewhere. */
  @supports selector(::-webkit-scrollbar){
    *{scrollbar-width:auto;scrollbar-color:auto;}
    ::-webkit-scrollbar{width:10px;height:10px;}
    ::-webkit-scrollbar-track{background:var(--void);border:1px solid var(--edge);}
    ::-webkit-scrollbar-thumb{
      background:#706184;border:2px solid var(--void);border-radius:0;
      box-shadow:inset 0 0 0 1px #9183a5;min-height:32px;
    }
    ::-webkit-scrollbar-thumb:hover{background:var(--gold);box-shadow:inset 0 0 0 1px #ffe08a;}
    ::-webkit-scrollbar-thumb:active{background:#c99932;box-shadow:none;}
    ::-webkit-scrollbar-button{display:none;width:0;height:0;}
    ::-webkit-scrollbar-corner{background:var(--void);}
  }
  /* Game HUD, tooltips and menus should never select text while clicking/dragging. */
  body,body *{-webkit-user-select:none!important;user-select:none!important;}
  body input,body textarea,body [contenteditable="true"],body [contenteditable="true"] *{
    -webkit-user-select:text!important;user-select:text!important;
  }
  /* iOS aumenta a fonte sozinho ao girar pro deitado se não travar isso — a
     HUD em pixel art depende de tamanhos exatos, então qualquer "ajuda" do
     sistema desalinha tudo. */
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
  html,body{height:100%;}
  body{
    margin:0;
    /* Campo de estrelas: 3 camadas de pontinhos repetidos em escalas
       diferentes (paralaxe estático, sem custo de JS nenhum) por cima do
       gradiente de fundo escuro — dá o "vácuo" sem precisar desenhar nada
       por frame; o jogo em si (dentro do canvas) continua sendo desenhado
       pelo motor normalmente. */
    background:
      radial-gradient(1px 1px at 20px 30px, rgba(255,255,255,.85), transparent),
      radial-gradient(1px 1px at 140px 90px, rgba(255,255,255,.6), transparent),
      radial-gradient(1.5px 1.5px at 60px 160px, rgba(200,220,255,.9), transparent),
      radial-gradient(1px 1px at 200px 40px, rgba(255,255,255,.5), transparent),
      radial-gradient(1px 1px at 240px 190px, rgba(255,255,255,.7), transparent),
      radial-gradient(1.5px 1.5px at 320px 110px, rgba(200,220,255,.8), transparent),
      radial-gradient(1px 1px at 380px 220px, rgba(255,255,255,.55), transparent),
      radial-gradient(circle at 50% 0%, #1b1e3a 0%, var(--void) 60%);
    background-size:400px 260px, 400px 260px, 400px 260px, 400px 260px, 400px 260px, 400px 260px, 400px 260px, 100% 100%;
    color:var(--ink);
    font-family:'Silkscreen',ui-monospace,monospace;
    display:block;min-height:100vh;overflow:hidden;
  }
  header{display:none;}
  header h1{font-size:20px;margin:0;letter-spacing:2px;color:var(--gold);text-shadow:0 3px 0 #000;}
  header span{font-size:10px;color:var(--dim);}

  #stage{
    position:relative;width:100vw;height:100dvh;
    border:none;box-shadow:none;
  }
  canvas{display:block;width:100%;height:100%;image-rendering:pixelated;background:#10121a;}
  /* Override native/inline HUD cursors with the matching pixel pointer. */
  body,body *{cursor:url('../assets/ui/hud-pointer.png?v=dark1') 4 4, pointer !important;}
  body:not(.inlobby):not(:has(#matchFlow:not([hidden]))) #game{
    cursor:url('../assets/ui/target-cursor.png') 16 16, crosshair !important;
  }

  /* ---------- HUD ---------- */
  .hud{position:absolute;pointer-events:none;font-size:10px;}
  #hudTop{top:0;left:0;right:0;display:flex;justify-content:space-between;padding:8px;gap:8px;}
  body:not(.touch) #objectives{margin-right:54px;}
  .panel{background:var(--hud-surface-glass);border:var(--hud-border-width) solid var(--edge);padding:7px 9px;}
  #itemsPanel{bottom:10px;left:10px;display:flex;gap:5px;}
  body:not(.touch) #itemsPanel{gap:7px;}
  @media(max-width:1100px){
    body:not(.touch) #itemsPanel{bottom:70px;max-width:calc(100% - 20px);flex-wrap:wrap;gap:var(--hud-space-1);}
    body:not(.touch) #autoBuyLabel{bottom:180px;max-width:calc(100% - 20px);}
  }
  body:not(.touch) #itemsPanel .itemSlot{width:50px;height:50px;font-size:24px;}
  body:not(.touch) #itemsPanel .itemSlot .k{font:700 15px/20px Arial,sans-serif;color:#fff;padding:0 4px;min-width:20px;text-align:center;background:#080b12;border:1px solid #c1d6ed;border-radius:3px;z-index:2;text-shadow:none;letter-spacing:0;}
  #autoBuyLabel{position:absolute;bottom:68px;left:10px;}
  .autoToggle{
    position:relative;display:inline-flex;align-items:center;justify-content:space-between;gap:10px;
    min-height:30px;padding:5px 8px;border:1px solid #51495f;background:#100f1bea;
    box-shadow:inset 0 1px 0 #ffffff0a,0 2px 0 #05060d;
    color:#b8afc7;font:9px/1.2 'Silkscreen',monospace;text-transform:uppercase;
    pointer-events:auto;cursor:pointer;user-select:none;
  }
  .autoToggle:has(input:checked){border-color:#806333;background:#211c16ed;color:var(--gold);}
  .autoToggle:hover{border-color:#c4aed9;background:#201c2c;}
  .autoToggle:has(input:checked):hover{border-color:var(--gold);background:#302719;}
  .autoToggle:has(input:focus-visible){outline:2px solid var(--t0);outline-offset:3px;}
  .autoToggle input{position:absolute;width:1px;height:1px;padding:0;margin:0;opacity:0;}
  .autoToggleSwitch{width:32px;height:16px;flex:none;background:url('../assets/ui/auto-switch.svg') 0 0 / 64px 16px no-repeat;image-rendering:pixelated;}
  .autoToggle input:checked~.autoToggleSwitch{background-position:-32px 0;}
  .autoToggleText{white-space:nowrap;}
  #btnFullscreen{position:fixed;top:calc(42px + var(--sat));right:calc(8px + var(--sar));z-index:16;width:38px;height:36px;padding:0;font:24px monospace;background:#10101bec;color:var(--ink);border:2px solid var(--edge);}
  #deathCameraHud{position:fixed;left:50%;bottom:calc(132px + var(--sab));transform:translateX(-50%);z-index:14;width:max-content;max-width:calc(100vw - 24px);padding:10px 14px;text-align:center;font:9px/1.6 'Silkscreen',monospace;background-color:#0a0910ed;}
  #deathCameraHud[hidden]{display:none;}
  #deathCameraHud>strong,#deathCameraHud>span{display:block;}
  #deathCameraHud>strong{color:var(--t0);font-size:11px;}
  #deathCameraHud>span{color:var(--dim);margin:4px 0 8px;}
  #deathCameraHud>div{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;}
  #deathCameraHud .btn{font-size:8px;padding:8px;min-height:36px;}
  #deathCameraHud .btn:disabled{opacity:.45;cursor:default;}
  @media(max-height:500px){#deathCameraHud{bottom:12px;left:12px;transform:none;max-width:calc(100vw - 350px);}}
  .itemSlot{
    width:34px;height:34px;background:rgba(10,9,16,.9);border:2px solid var(--edge);
    display:flex;align-items:center;justify-content:center;font-size:16px;position:relative;
    overflow:hidden;
  }
  .itemSlot.empty{opacity:.35;border-style:dashed;}
  .resourceDenied{outline:2px solid #ff858b!important;outline-offset:2px;box-shadow:0 0 12px #ff536b99!important;}
  .itemSlot.filled{pointer-events:auto;cursor:context-menu;}
  .itemSlot.active{pointer-events:auto;cursor:pointer;border-color:#9fd8ff;}
  .itemSlot.active.ready{box-shadow:0 0 0 1px #9fd8ff inset;}
  .itemSlot.active:not(.ready){filter:grayscale(.6) brightness(.6);cursor:default;}
  .itemSlot .veil{position:absolute;left:0;right:0;bottom:0;height:0;background:rgba(0,0,0,.72);transition:height .1s linear;}
  .itemSlot .k{position:absolute;top:1px;left:2px;font-size:7px;color:var(--dim);}
  #heroPanel{min-width:230px;display:flex;flex-direction:column;gap:5px;}
  .bar{display:flex;align-items:center;gap:6px;}
  .bar b{width:26px;font-weight:400;color:var(--dim);}
  .track{flex:1;height:11px;background:#000;position:relative;overflow:hidden;}
  .fill{position:absolute;inset:0;width:100%;transition:width .12s linear;}
  .fill.life{background:linear-gradient(180deg,#8bff9c,var(--life));}
  .fill.mana{background:linear-gradient(180deg,#a8b4ff,var(--mana));}
  .track em{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    font-style:normal;font-size:8px;color:#04120a;text-shadow:0 1px 0 rgba(255,255,255,.35);
  }
  #heroMeta{display:flex;justify-content:space-between;font-size:9px;color:var(--dim);gap:8px;}
  #heroMeta i{font-style:normal;}
  .gold{color:var(--gold);}
  #xpTrack{height:4px;background:#000;position:relative;}
  #xpFill{position:absolute;inset:0;width:0;background:var(--gold);}

  #objectives{display:flex;flex-direction:column;gap:var(--hud-space-2);align-items:stretch;align-self:flex-start;min-width:210px;padding:var(--hud-space-2);}
  /* Mural de abates: cai por baixo do painel de time (top calculado bem
     abaixo do maior caso, 3v3), empilhando de cima pra baixo — cada linha
     entra deslizando e se apaga sozinha (removida via setTimeout no JS). */
  #killFeed{
    position:absolute;top:112px;right:10px;width:210px;
    display:flex;flex-direction:column;gap:3px;align-items:flex-end;
    pointer-events:none;
  }
  .kfRow{
    display:flex;align-items:center;gap:5px;font-size:9px;
    background:rgba(10,9,16,.82);border:1px solid var(--edge);
    padding:3px 7px;white-space:nowrap;
    animation:kfIn .15s steps(3) both, kfOut .4s ease-in 4.6s both;
  }
  .kfRow .kfIcon{font-size:11px;}
  .kfRow .kfKiller{color:var(--gold);}
  .kfRow .kfVictim{color:#ff9b9b;}
  .kfRow .kfArrow{color:var(--dim);font-size:8px;}
  @keyframes kfIn{from{transform:translateX(14px);opacity:0;}to{transform:translateX(0);opacity:1;}}
  @keyframes kfOut{to{opacity:0;transform:translateX(14px);}}
  @media (prefers-reduced-motion:reduce){
    .kfRow{animation:kfOut .4s ease-in 4.6s both;}
  }
  #scoreLine{display:flex;gap:var(--hud-space-2);justify-content:center;font-size:var(--hud-text-xs);color:var(--hud-text-muted);}
  #teamRows{display:grid;grid-template-columns:max-content max-content max-content;gap:var(--hud-space-1) var(--hud-space-2);align-self:center;}
  .trow{display:grid;grid-template-columns:subgrid;grid-column:1/-1;align-items:center;font-size:var(--hud-text-xs);}
  .trow .tn{min-width:max-content;text-align:left;}
  .trow .mini{width:64px;height:8px;background:#000;position:relative;}
  .trow .mini i{position:absolute;inset:0;width:100%;display:block;}
  .trow .tw{font-size:8px;color:var(--dim);width:20px;}
  .trow.out{opacity:.32;text-decoration:line-through;}
  .trow.you .tn{color:var(--gold);}

  #abilities{
    position:absolute;bottom:10px;left:50%;transform:translateX(-50%);
    display:flex;gap:7px;pointer-events:none;
  }
  #companionSkills{position:absolute;bottom:calc(100% + var(--hud-space-1));right:0;display:flex;gap:var(--hud-space-1);max-width:100%;pointer-events:none;}
  #companionSkills[hidden]{display:none;}
  #companionSkills .hud-companion-skill{display:grid;grid-template-columns:24px auto;align-items:center;gap:var(--hud-space-1);min-width:0;}
  #companionSkills .companionIcon{position:relative;overflow:hidden;width:24px;height:24px;grid-row:span 2;}
  #companionSkills img{position:absolute;height:200%;width:300%;max-width:none;image-rendering:pixelated;}
  #companionSkills small{white-space:nowrap;}
  #companionSkills b{font:inherit;font-variant-numeric:tabular-nums;white-space:nowrap;}
  body.touch #companionSkills .hud-companion-skill{grid-template-columns:20px auto;}
  body.touch #companionSkills .companionIcon{width:20px;height:20px;}
  @media(max-height:480px){
    body.touch #companionSkills small{display:none;}
    body.touch #companionSkills .companionIcon{grid-row:auto;}
  }
  .slot{
    width:50px;height:50px;background:rgba(10,9,16,.9);
    border:2px solid var(--edge);position:relative;overflow:hidden;
    display:flex;align-items:center;justify-content:center;font-size:19px;
    pointer-events:auto;cursor:help;
  }
  .slot .veil{position:absolute;left:0;right:0;bottom:0;height:0;background:rgba(0,0,0,.72);transition:height .1s linear;}
  .slot .k{position:absolute;top:2px;left:3px;font-size:8px;color:var(--dim);}
  .slot .n{position:absolute;bottom:2px;right:3px;font-size:8px;color:var(--mana);}
  .slot .chg{position:absolute;top:2px;right:3px;font-size:9px;color:var(--gold);font-weight:bold;}
  .slot.locked{filter:grayscale(1) brightness(.45);}
  .slot.ready{border-color:var(--t0);box-shadow:inset 0 0 8px rgba(111,227,255,.35);}
  .slot.universal{border-color:#5a4410;}
  .slot.universal.ready{border-color:var(--gold);box-shadow:inset 0 0 8px rgba(242,193,78,.4);}
  .slot .rank{position:absolute;bottom:2px;left:3px;font-size:8px;color:#7fe6d6;font-weight:bold;letter-spacing:-1px;}
  .slot.levelable{animation:lvlPulse 1s ease-in-out infinite;cursor:pointer;}
  @keyframes lvlPulse{
    0%,100%{box-shadow:0 0 0 2px var(--gold),inset 0 0 8px rgba(242,193,78,.4);}
    50%{box-shadow:0 0 0 2px var(--gold),0 0 14px rgba(242,193,78,.9),inset 0 0 8px rgba(242,193,78,.4);}
  }

  /* ---------- Loja ---------- */
  #shop{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:520px;max-width:min(92%, calc(100vw - var(--sal) - var(--sar) - 16px));
    /* 21 itens (10 básicos + 5 ativos + 6 combinados) não cabem inteiros em
       nenhuma tela — sem isso o modal só crescia pra baixo do viewport, sem
       jeito nenhum de rolar até o resto ou até o botão de fechar. */
    max-height:min(640px, calc(100vh - var(--sat) - var(--sab) - 24px));
    max-height:min(640px, calc(100dvh - var(--sat) - var(--sab) - 24px));
    background:rgba(10,9,16,.96);border:3px solid var(--edge);
    padding:14px;display:none;flex-direction:column;gap:10px;
    box-shadow:0 12px 40px rgba(0,0,0,.8);z-index:4;
  }
  #shop h3{margin:0;font-size:13px;color:var(--gold);letter-spacing:1px;flex:none;}
  .shopHeader{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:none;}
  #btnCloseShop{min-width:88px;min-height:44px;padding:8px 10px;font-size:10px;touch-action:manipulation;}
  #shopHint{font-size:9px;color:var(--dim);line-height:1.6;flex:none;}
  /* só a LISTA rola — título e dica ficam sempre visíveis no topo/rodapé do
     modal, em vez do modal inteiro sumir pra fora da tela */
  #shopList{
    display:flex;flex-direction:column;gap:6px;
    overflow-y:auto;overflow-x:hidden;min-height:0;
  }
  .item{
    display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:10px;align-items:center;
    border:2px solid #221f36;padding:7px 9px;font-size:10px;cursor:pointer;
  }
  .item:hover{border-color:var(--t0);}
  .item .idx{color:var(--dim);}
  .item .desc{font-size:8px;color:var(--dim);margin-top:3px;line-height:1.5;}
  .item .cost{color:var(--gold);font-size:10px;}
  .item.afford{border-color:#1d5f78;}
  .item.owned{opacity:.4;}
  /* Item combinado (receita): borda dourada fininha o tempo todo pra se
     destacar dos básicos na lista; quando os componentes já estão no
     inventário e MONTAR fica disponível (bem mais barato), acende de
     verdade — é o sinal de "monte agora" que o jogador deve notar rápido. */
  .item.combined{border-left:3px solid var(--gold);}
  .item.combined .cost{color:var(--gold);}
  .item.can-combine{border-color:var(--gold);box-shadow:inset 0 0 10px rgba(242,193,78,.25);}
  .item.can-combine .cost{color:#ffe08a;font-weight:bold;}

  /* Placement only; shared notice appearance lives in hud-components.css. */
  #banner{
    position:absolute;top:74px;left:50%;
    max-width:min(520px,calc(100vw - 32px));width:max-content;box-sizing:border-box;
    opacity:0;transition:opacity var(--hud-motion-fast);pointer-events:none;
    white-space:normal;overflow-wrap:anywhere;text-align:center;z-index:4;
    transform:translateX(-50%);
  }
  #banner.in{animation:none;}


  #endcard{
    position:absolute;inset:0;display:none;flex-direction:column;
    align-items:center;justify-content:center;gap:18px;
    background:rgba(6,5,12,.88);text-align:center;z-index:6;
    overflow-y:auto;overflow-x:hidden;
  }
  /* margin:auto centraliza enquanto a ficha+gráfico+placar cabem e, quando
     não cabem, deixa rolar sem cortar o topo (que é o que justify-center
     sozinho faria num container com overflow) */
  #endInner{
    margin:auto;display:flex;flex-direction:column;align-items:center;gap:14px;
    padding:max(16px, var(--sat)) max(10px, var(--sar)) max(16px, var(--sab)) max(10px, var(--sal));
    max-width:100%;
  }
  /* fundo tingido pela cor do resultado — dá pra saber se ganhou antes de ler */
  #endcard.win{background:radial-gradient(circle at 50% 40%, rgba(24,74,32,.72) 0%, rgba(6,5,12,.94) 62%);}
  #endcard.lose{background:radial-gradient(circle at 50% 40%, rgba(80,18,24,.6) 0%, rgba(6,5,12,.95) 62%);}
  #endcard h2{margin:0;font-size:26px;letter-spacing:3px;}
  #endcard.show h2{animation:endTitle .6s cubic-bezier(.16,1.5,.3,1) both;}
  #endcard.show p{animation:endFade .5s ease-out .35s both;}
  #endcard.show #endStatsTable{animation:endFade .4s ease-out .5s both;}
  #endcard.show #again{animation:endFade .4s ease-out 1.4s both;}
  @keyframes endTitle{
    0%{transform:scale(2.4);opacity:0;filter:blur(6px);letter-spacing:18px;}
    100%{transform:scale(1);opacity:1;filter:blur(0);letter-spacing:3px;}
  }
  @keyframes endFade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
  /* uma linha do placar por vez, de cima pra baixo */
  #endcard.show tr.reveal{animation:endRow .34s ease-out both;animation-delay:calc(.62s + var(--i) * .11s);}
  @keyframes endRow{from{opacity:0;transform:translateX(-14px);}to{opacity:1;transform:none;}}
  @media (prefers-reduced-motion:reduce){
    #endcard.show h2,#endcard.show p,#endcard.show #endStatsTable,
    #endcard.show #again,#endcard.show tr.reveal{animation:none;}
  }
  :is(#endStatsTable, #matchStatsTable){border-collapse:collapse;font-size:10px;max-width:94vw;overflow-x:auto;display:block;}
  :is(#endStatsTable, #matchStatsTable) th, :is(#endStatsTable, #matchStatsTable) td{padding:5px 10px;text-align:center;white-space:nowrap;}
  :is(#endStatsTable, #matchStatsTable) th{color:var(--dim);font-weight:400;border-bottom:1px solid var(--edge);}
  :is(#endStatsTable, #matchStatsTable) td.nm{text-align:left;}
  :is(#endStatsTable, #matchStatsTable) td.pos{color:var(--dim);}
  :is(#endStatsTable, #matchStatsTable) tr.you{background:rgba(242,193,78,.08);}
  :is(#endStatsTable, #matchStatsTable) td.score{color:var(--gold);font-weight:bold;}
  /* ---------- MVP ----------
     Linha 1 não pode ser "a de cima e pronto": ela ganha borda dourada
     sólida, coroa na posição e um selo com o texto MVP. Sem blur — o brilho
     é um anel sólido de 1px, no mesmo vocabulário do resto do jogo. */
  :is(#endStatsTable, #matchStatsTable) tr.mvp td{
    background:rgba(242,193,78,.16);
    border-top:2px solid var(--gold);border-bottom:2px solid var(--gold);
    color:#fff6d8;
  }
  :is(#endStatsTable, #matchStatsTable) tr.mvp td:first-child{border-left:2px solid var(--gold);}
  :is(#endStatsTable, #matchStatsTable) tr.mvp td:last-child{border-right:2px solid var(--gold);}
  :is(#endStatsTable, #matchStatsTable) tr.mvp td.pos{font-size:12px;}
  :is(#endStatsTable, #matchStatsTable) .mvpTag{
    margin-left:7px;background:var(--gold);color:#1a1405;
    padding:1px 5px;font-size:8px;letter-spacing:1px;font-weight:700;
    box-shadow:2px 2px 0 #000;
  }

  /* ---------- corpo da tela final: ficha pessoal + gráfico ---------- */
  #endBody{display:flex;gap:14px;align-items:stretch;justify-content:center;flex-wrap:wrap;max-width:96vw;}
  #endcard.show #endBody{animation:endFade .45s ease-out .45s both;}
  #endMine,#endChartBox{
    background:rgba(10,9,16,.86);border:2px solid var(--edge);
    padding:12px 14px;text-align:left;
  }
  /* a ficha do MVP fica emoldurada de ouro — se foi você, dá pra ver de longe */
  #endMine.mvp{border-color:var(--gold);box-shadow:0 0 0 2px #000, inset 0 0 0 1px rgba(242,193,78,.35);}
  #endMine{min-width:280px;max-width:340px;display:flex;flex-direction:column;gap:8px;}
  #endMine .mHead{display:flex;align-items:center;gap:9px;}
  #endMine .mIcon{
    width:38px;height:38px;display:flex;align-items:center;justify-content:center;
    font-size:20px;background:#12101f;border:2px solid var(--edge);
  }
  #endMine .mWho{display:flex;flex-direction:column;gap:2px;flex:1;}
  #endMine .mWho b{font-size:14px;letter-spacing:1px;}
  #endMine .mWho i{font-style:normal;font-size:8px;}
  #endMine .mRank{font-size:16px;color:var(--gold);}
  #endMine .mRank i{font-style:normal;font-size:8px;color:var(--dim);}
  #endMine .mKda{font-size:30px;color:var(--gold);letter-spacing:2px;line-height:1;margin-top:2px;}
  #endMine .mKda b.d{color:#ff8f8f;}
  #endMine .mKda s{text-decoration:none;color:var(--dim);font-size:20px;margin:0 3px;}
  #endMine .mKdaLbl{font-size:7px;color:var(--dim);letter-spacing:1px;}
  #endMine .mGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--edge);border:1px solid var(--edge);}
  #endMine .mCell{background:#12101f;padding:5px 4px;text-align:center;display:flex;flex-direction:column;gap:3px;}
  #endMine .mCell i{font-style:normal;font-size:7px;color:var(--dim);}
  #endMine .mCell b{font-size:12px;}
  #endMine .mTags{display:flex;flex-wrap:wrap;gap:4px;}
  #endMine .mTag{
    font-size:8px;padding:2px 6px;border:1px solid var(--edge);
    background:#12101f;color:var(--ink);letter-spacing:1px;
  }
  #endMine .mTag.mvp{background:var(--gold);color:#1a1405;border-color:var(--gold);box-shadow:2px 2px 0 #000;}
  #endMine .mLine{margin:0;font-size:8px;color:var(--dim);line-height:1.7;}

  #endChartBox{display:flex;flex-direction:column;gap:7px;max-width:96vw;}
  #endChartBox .capt{font-size:8px;color:var(--dim);letter-spacing:2px;}
  #endChart{display:block;width:620px;max-width:100%;height:auto;image-rendering:pixelated;background:#0b0a14;}
  #endLegend{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:8px;color:var(--dim);}
  #endLegend .lg{display:flex;align-items:center;gap:4px;}
  #endLegend .lg.you{color:var(--gold);}
  #endLegend .lg i{width:10px;height:8px;display:inline-block;}

  /* ---------- ações de compartilhar ---------- */
  #endActions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;}
  #endcard.show #endActions{animation:endFade .4s ease-out 1.4s both;}
  #endActions .btn:disabled{opacity:.5;cursor:default;}
  #endShareMsg{font-size:9px;min-height:12px;letter-spacing:1px;}
  @media (prefers-reduced-motion:reduce){
    #endcard.show #endBody,#endcard.show #endActions{animation:none;}
  }

  footer{font-size:9px;color:var(--dim);line-height:2;text-align:center;max-width:1100px;}
  footer b{color:var(--t0);font-weight:400;}
  kbd{background:var(--stone);border:1px solid var(--edge);padding:1px 5px;color:var(--ink);font-family:inherit;font-size:9px;}

  /* ---------- Lobby / sala ----------
     Regra de ouro desta tela: NADA de sombra difusa, blur ou canto
     arredondado. Tudo que dá "peso" aqui é feito com borda dura de 2-3px,
     anel sólido (box-shadow sem blur), degrau de 2px no hover e transição
     em steps() — o mesmo vocabulário dos painéis do HUD e da barra de
     habilidades, pra a sala parecer parte do jogo e não um site em cima
     dele. */
  #lobby{
    position:absolute;inset:0;display:flex;flex-direction:column;
    align-items:center;justify-content:safe center;
    /* varredura de CRT + brilho no topo: fundo com textura sem custar nitidez */
    background:
      repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0 1px, transparent 1px 3px),
      radial-gradient(circle at 50% 6%, rgba(58,44,104,.55) 0%, rgba(6,5,12,.97) 58%),
      rgba(6,5,12,.97);
    text-align:center;z-index:5;overflow:auto;
    /* max() e não soma: no desktop os env() são 0 e sobra o padding normal;
       no celular deitado a lateral vale 59px e é ELA que manda. */
    padding:max(12px,var(--sat)) max(16px,var(--sar)) max(12px,var(--sab)) max(16px,var(--sal));
  }
  #lobbyShell{
    width:min(1060px,100%);max-height:100%;min-height:0;
    display:flex;flex-direction:column;align-items:stretch;gap:11px;
  }
  #lobbyHead{display:flex;flex-direction:column;align-items:center;gap:5px;flex:none;}
  .lobbyFoot{margin-top:auto;min-height:16px;display:flex;justify-content:center;align-items:end;}
  .privacyLink{font-size:6px;letter-spacing:1px;color:#656178;text-decoration:none;padding:3px 8px;opacity:.78;}
  .privacyLink:hover,.privacyLink:focus-visible{color:var(--t0);outline:1px solid var(--t0);}
  #matchFlow{position:absolute;z-index:30;left:50%;top:50%;transform:translate(-50%,-50%);width:min(330px,82vw);padding:20px 16px;border:3px solid #8e7130;background:rgba(8,8,18,.96);box-shadow:0 0 0 4px rgba(0,0,0,.55),0 0 30px rgba(242,193,78,.18);display:flex;flex-direction:column;gap:9px;text-align:center;pointer-events:none;}
  #matchFlow[hidden]{display:none;}
  #matchFlowLabel{font-size:clamp(12px,2vw,16px);line-height:1.6;letter-spacing:2px;color:#c4a96a;}
  #matchFlowTitle{max-width:960px;font-size:clamp(28px,5vw,48px);line-height:1.35;letter-spacing:1.5px;color:#ffe7a0;text-wrap:balance;}
  #matchFlowDetail{font-size:clamp(13px,2vw,18px);line-height:1.6;letter-spacing:1px;color:var(--dim);}
  #matchFlowPopulation{font-size:clamp(16px,2.5vw,22px);line-height:1.6;letter-spacing:1px;color:#8fe7b0;}
  #matchFlowPopulation[hidden]{display:none;}
  #matchFlow.searching #matchFlowTitle::after{content:'...';display:inline-block;text-align:left;animation:searchDots 1s steps(4,end) infinite;}
  #matchFlow.found{border-color:#53ce80;box-shadow:0 0 0 4px rgba(0,0,0,.55),0 0 32px rgba(73,221,125,.32);}
  #matchFlow.found #matchFlowLabel,#matchFlow.found #matchFlowDetail{color:#8fe7b0;}
  #matchFlow.found #matchFlowTitle{color:#c9ffda;}
  @keyframes searchDots{0%{clip-path:inset(0 100% 0 0)}100%{clip-path:inset(0 0 0 0)}}
  #googleLogin{min-height:40px;}
  #lobby:has(#roomPane:not([hidden])) #googleLogin{display:none;}
  .btn.discord{background:#5865f2;color:#fff;border-color:#8d96ff;}
  .btn.danger{border-color:#7b3344;color:#ff9eae;}
  #lobby h2{margin:0;font-size:22px;letter-spacing:3px;color:var(--gold);text-shadow:0 3px 0 #000;}
  #lobby p.sub{margin:0;font-size:9px;color:var(--dim);line-height:1.8;}
  #accountBar{display:flex;align-items:center;gap:5px;min-height:29px;}
  .accountLabel,#accountState{font-size:7px;letter-spacing:1px;color:var(--dim);}
  #accountState{color:var(--t0);min-width:42px;}
  #combatStatus{display:flex;flex-wrap:wrap;gap:3px;margin-top:4px;max-width:260px;}
  #combatStatus[hidden]{display:none;}
  .effect{padding:3px 5px;border:1px solid #6b789a;background:#12182b;color:#e9eeff;font-size:7px;letter-spacing:.4px;text-shadow:1px 1px #000;animation:effectIn .14s ease-out;}
  .effect.stun{color:#ffe28a;border-color:#f2c14e;background:#37280d;animation:effectPulse .55s infinite alternate;}
  .effect.root{color:#a4eeb3;border-color:#66c57a;background:#133520;}.effect.silence{color:#f4b2ff;border-color:#d877e8;background:#35113e;}.effect.disarm{color:#ffb08a;border-color:#ea7c57;background:#3a1b13;}.effect.slow{color:#bfe9ff;border-color:#77bde8;background:#102b42;}.effect.immune{color:#fff5b2;border-color:#f2c14e;background:#3a3112;}.effect.haste{color:#9cf5ff;border-color:#53d6ef;background:#103440;}
  @keyframes effectIn{from{transform:translateY(-3px);opacity:0}to{transform:none;opacity:1}}@keyframes effectPulse{to{filter:brightness(1.35);}}
  #usernameInput{width:132px;padding:7px 8px;background:#080711;border:2px solid var(--edge);color:var(--ink);font:8px 'Silkscreen',ui-monospace,monospace;letter-spacing:1px;text-transform:uppercase;}
  #usernameInput:focus{outline:none;border-color:var(--t0);}
  #usernameInput::placeholder{color:#53506a;}
  #accountBar .btn{padding:7px 8px;font-size:7px;}
  /* régua tracejada em "pixels" — separador que não é uma linha lisa de site */
  .pxRule{
    height:3px;width:100%;
    background:repeating-linear-gradient(90deg,var(--edge) 0 5px,transparent 5px 11px);
  }
  /* painel com "parafusos" nos quatro cantos, feitos só de background */
  .pxpanel{
    border:2px solid var(--edge);
    background-color:rgba(10,9,16,.88);
    background-image:
      linear-gradient(var(--edge),var(--edge)),linear-gradient(var(--edge),var(--edge)),
      linear-gradient(var(--edge),var(--edge)),linear-gradient(var(--edge),var(--edge));
    background-size:4px 4px;
    background-position:0 0,100% 0,0 100%,100% 100%;
    background-repeat:no-repeat;
  }

  .btn{
    font-family:inherit;font-size:11px;padding:11px 18px;cursor:pointer;
    background:var(--stone);color:var(--ink);border:3px solid var(--edge);letter-spacing:1px;
    transition:border-color .1s steps(2),color .1s steps(2),background-color .1s steps(2),transform .08s steps(2);
  }
  .btn:hover{border-color:var(--t0);color:var(--t0);transform:translateY(-2px);}
  .btn:active{transform:translateY(1px);}
  .btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--gold);}
  .btn.primary{background:var(--gold);color:var(--hud-text-on-accent);border-color:#000;}
  .btn.primary:hover{background:var(--hud-accent-hover);color:var(--hud-text-on-accent);border-color:#000;}
  .btn:disabled{opacity:.4;cursor:not-allowed;filter:grayscale(1);transform:none;}

  /* ----- passos do menu ----- */
  .lstep{padding:12px 14px;display:flex;flex-direction:column;gap:10px;}
  .lstepHead{display:flex;align-items:center;gap:8px;}
  .lstepHead .num{
    width:17px;height:17px;line-height:17px;flex:none;
    background:var(--gold);color:#1a1400;font-size:10px;text-align:center;
  }
  .lstepHead .ttl{font-size:10px;letter-spacing:2px;color:var(--ink);}
  .lstepHead .line{
    flex:1;height:2px;
    background:repeating-linear-gradient(90deg,var(--edge) 0 4px,transparent 4px 9px);
  }
  #orbitalWar{padding:12px 16px;text-align:center;position:relative;overflow:hidden;background:linear-gradient(110deg,rgba(13,33,54,.92),rgba(20,12,39,.94));}
  #orbitalWar:before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 0,rgba(111,227,255,.18),transparent 55%);pointer-events:none;}
  .warEyebrow{position:relative;font-size:7px;color:var(--t0);letter-spacing:3px;}
  .warTitle{position:relative;margin-top:4px;font-size:18px;letter-spacing:3px;color:#fff0b0;text-shadow:2px 2px #000;}
  .warTeams{position:relative;display:flex;justify-content:center;align-items:center;gap:8px;margin:8px 0 5px;}
  .warTeams i{width:12px;height:12px;display:block;border:2px solid #000;background:var(--t0);box-shadow:0 0 8px var(--t0);}
  .warTeams i:nth-of-type(2){background:var(--t1);box-shadow:0 0 8px var(--t1);}.warTeams i:nth-of-type(3){background:var(--life);box-shadow:0 0 8px var(--life);}
  .warTeams b{font-size:7px;color:var(--dim);letter-spacing:1px;}.warTitle + .warTeams + p{position:relative;margin:0;color:var(--ink);font-size:8px;line-height:1.6;}

  #modeRow{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
  .modeCard{
    font-family:inherit;cursor:pointer;color:var(--ink);
    border:3px solid var(--edge);background:var(--stone);
    padding:9px 6px 8px;display:flex;flex-direction:column;align-items:center;gap:6px;
    transition:border-color .1s steps(2),color .1s steps(2),background-color .1s steps(2),transform .08s steps(2);
  }
  .modeCard:hover{border-color:var(--t0);color:var(--t0);transform:translateY(-2px);}
  .modeCard:focus-visible{outline:none;border-color:var(--gold);}
  .modeCard.sel{
    border-color:var(--gold);color:var(--gold);background:#231c0b;
    transform:translateY(-2px);box-shadow:0 3px 0 0 #6b551d;
  }
  .modeCard .mcName{font-size:14px;letter-spacing:1px;}
  .modeCard .mcSub{font-size:7px;color:var(--dim);letter-spacing:1px;}
  .modeCard.sel .mcSub{color:#b79a4f;}
  /* quadradinhos coloridos = quantos jogadores por time, na cor do time */
  .mcDots{display:flex;align-items:center;gap:3px;height:8px;}
  .mcDots i{width:7px;height:7px;display:block;}
  .mcDots i.vs{width:6px;height:2px;background:var(--edge);}

  #lobbyRow{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;align-items:stretch;}
  .playCard{
    border:2px solid #221f36;background:rgba(5,4,10,.55);padding:10px 9px;
    display:flex;flex-direction:column;align-items:center;gap:6px;
    transition:border-color .1s steps(2);
  }
  .playCard:hover{border-color:var(--edge);}
  .quickPlayCard{border-color:#735a1b;background:linear-gradient(135deg,rgba(50,38,10,.9),rgba(15,25,42,.94));box-shadow:inset 0 0 28px rgba(242,193,78,.08);}
  .quickPlayCard .pcTtl{color:#ffe7a0;}.quickPlayCard #btnQuickMatch{font-size:12px;padding:13px 18px;animation:quickPulse 1.8s ease-in-out infinite;}
  @keyframes quickPulse{50%{box-shadow:0 0 0 3px rgba(242,193,78,.34),0 0 18px rgba(242,193,78,.22);}}
  .pcIcon{font-size:19px;line-height:1;}
  .pcTtl{font-size:10px;letter-spacing:2px;color:var(--ink);}
  .pcSub{font-size:7px;color:var(--dim);line-height:1.7;flex:1;min-height:24px;}
  .playCard .btn{width:100%;}
  .queueState{min-height:10px;font-size:6px;line-height:1.5;text-align:center;color:var(--t0);}
  .rankBadge{display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;letter-spacing:1px;padding:5px 9px;margin:4px 0;background:linear-gradient(135deg,#171326,#0d1020);border:1px solid #7f6840;box-shadow:inset 0 0 18px #0008,0 3px 0 #05050a;}
  .rankMedal{width:40px;height:40px;display:grid;place-items:center;font-size:30px;line-height:1;background:radial-gradient(circle at 35% 30%,#7d5c2b,#21150a 70%);border:3px solid #e6ab4d;color:#fff0ae;text-shadow:2px 2px #000;clip-path:polygon(50% 0,89% 19%,100% 58%,50% 100%,0 58%,11% 19%);filter:drop-shadow(0 0 5px #d99a38);}
  .rankTier{font-size:10px;font-weight:bold;color:#ffd77f;text-shadow:0 1px #000;}
  .rankBadge.scout .rankMedal{background:#23313b;border-color:#9fc5d4;color:#e9fbff;}
  .rankBadge.scout .rankTier{color:#d8f3ff;}
  .rankBadge.ranger .rankMedal{background:#3b2f0b;border-color:#f2c14e;color:#fff3a1;box-shadow:0 0 8px #c99124;}
  .rankBadge.ranger .rankTier{color:#ffe58a;}
  .rankBadge.vanguard .rankMedal{background:#26133f;border-color:#c88cff;color:#f5c8ff;box-shadow:0 0 9px #9d4edd;}
  .rankBadge.vanguard .rankTier{color:#e5b5ff;}
  .rankBadge.commander .rankMedal{background:#082e39;border-color:#6fe3ff;color:#fff;box-shadow:0 0 11px #6fe3ff,0 0 4px #fff inset;}
  .rankBadge.commander .rankTier{color:#8ff0ff;text-shadow:0 0 6px #31cdea;}
  .rankBadge.off{opacity:.55;}
  .endRank{display:inline-flex;align-items:center;gap:5px;margin-top:4px;font-size:8px;letter-spacing:1px;}
  .endRank .rankMedal{width:20px;height:20px;font-size:16px;}
  .rankResult{display:inline-flex;align-items:center;justify-content:center;gap:7px;margin-top:5px;font-size:9px;letter-spacing:1px;}
  .rankResult.pending{color:var(--dim);}.rankResult.gain{color:#7ee787;}.rankResult.loss{color:#ff8d8d;}
  #joinBox{display:flex;width:100%;}
  #codeInput{
    font-family:inherit;font-size:12px;padding:11px 6px;min-width:0;flex:1;
    background:#05040a;color:var(--t0);border:3px solid var(--edge);border-right:none;
    text-transform:uppercase;letter-spacing:2px;text-align:center;
  }
  #codeInput:focus{outline:none;border-color:var(--t0);}
  #codeInput::placeholder{color:#40405e;}
  #joinBox .btn{width:auto;padding:11px 12px;}

  /* ----- sala ----- */
  #menuPane{display:flex;flex-direction:column;gap:11px;}
  #menuPane #btnLogout{align-self:center;width:auto;min-height:36px;padding:8px 14px;font-size:9px;}
  body.touch #menuPane #btnLogout{min-height:44px;}
  #lobby:has(#menuPane:not([hidden])){padding-bottom:calc(72px + var(--sab));}
  #patchNotes{position:fixed;right:calc(12px + var(--sar));bottom:calc(12px + var(--sab));z-index:25;width:min(360px,calc(100vw - 24px - var(--sal) - var(--sar)));text-align:left;background-color:#100e1c;color:var(--ink);box-shadow:4px 4px 0 #0008;}
  #patchNotes summary{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 10px;cursor:pointer;font-size:10px;list-style:none;}
  #patchNotes summary::-webkit-details-marker{display:none;}
  #patchNotes summary::after{content:'+';margin-left:auto;color:var(--gold);font-size:16px;}
  #patchNotes[open] summary::after{content:'−';}
  #patchNotes summary:focus-visible{outline:2px solid var(--t0);outline-offset:2px;}
  #patchNotes summary strong{color:var(--gold);white-space:nowrap;}
  #patchNotes summary img{image-rendering:pixelated;flex:none;}
  #patchNotes summary>span{font-size:9px;}
  .patchNotesBody{max-height:min(260px,calc(100dvh - 110px - var(--sat) - var(--sab)));overflow:auto;border-top:1px solid var(--edge);padding:6px 12px;}
  .patchNotesBody ul{margin:6px 0;padding-left:18px;font-size:10px;line-height:1.7;}
  .patchNotesBody li+li{margin-top:9px;}
  #roomPane{display:flex;flex-direction:column;gap:10px;min-height:0;flex:1 1 auto;}
  #roomPane[hidden],#menuPane[hidden]{display:none;}

  #roomTop{display:flex;gap:10px;align-items:stretch;justify-content:center;flex:none;flex-wrap:wrap;}
  #codeBox{display:none;flex-direction:column;gap:6px;align-items:center;padding:8px 14px;flex:none;}
  #codeBox .lbl{font-size:8px;color:var(--dim);letter-spacing:2px;}
  #codeVal{
    font-size:24px;color:var(--gold);letter-spacing:8px;text-shadow:0 3px 0 #000;
    user-select:all;background:#05040a;border:2px solid #3f3620;padding:3px 2px 3px 10px;
  }
  /* ----- links compartilháveis (host) -----
     Fica ao LADO do código, nunca no lugar dele: quem prefere ditar as 5
     letras continua com elas do mesmo tamanho de antes. */
  #shareBox{display:none;flex-direction:column;gap:5px;align-items:stretch;padding:8px 10px;flex:1 1 300px;max-width:440px;}
  .shareLine{display:flex;align-items:center;gap:6px;}
  .shareLine .lbl{font-size:7px;color:var(--dim);letter-spacing:2px;flex:0 0 74px;text-align:right;}
  .shareUrl{
    font-family:inherit;font-size:8px;padding:6px 7px;min-width:0;flex:1;
    background:#05040a;color:var(--t0);border:2px solid var(--edge);
    letter-spacing:0;text-overflow:ellipsis;
  }
  .shareUrl:focus{outline:none;border-color:var(--t0);}
  .shareLine .btn{padding:6px 9px;font-size:8px;border-width:2px;flex:none;}
  .shareHint{font-size:7px;color:var(--dim);line-height:1.7;text-align:center;}
  .shareHint.spec{color:var(--t2);}

  #roomPlayers{display:flex;align-items:stretch;gap:8px;flex-wrap:wrap;justify-content:center;}
  .pcard{
    position:relative;display:flex;flex-direction:column;gap:2px;align-items:center;
    border:2px solid var(--edge);background:rgba(10,9,16,.9);padding:7px 10px 5px;min-width:112px;
    transition:border-color .12s steps(2);
  }
  /* faixa da cor do time no topo do cartão — dá pra ler o time sem ler o texto */
  .pcard::before{content:'';position:absolute;left:-2px;right:-2px;top:-2px;height:3px;background:var(--edge);}
  .pcard.t0::before{background:var(--t0);}
  .pcard.t1::before{background:var(--t1);}
  .pcard.t2::before{background:var(--t2);}
  .pcard .who{font-size:7px;letter-spacing:2px;color:var(--dim);}
  .pcard.t0 .who{color:var(--t0);}
  .pcard.t1 .who{color:var(--t1);}
  .pcard.t2 .who{color:var(--t2);}
  .pcard .pav{font-size:17px;line-height:1.2;}
  .pcard .pick{font-size:9px;color:var(--ink);letter-spacing:1px;}
  .pcard .rdy{font-size:7px;color:var(--dim);letter-spacing:1px;}
  .pcard.me{box-shadow:0 0 0 2px var(--gold);}
  .pcard.on{border-color:var(--life);}
  .pcard.on .rdy{color:var(--life);}
  .pcard.empty{opacity:.5;}
  .pcard .sw{display:inline-block;width:7px;height:7px;margin-left:4px;vertical-align:middle;}

  /* escolha de herói: ficha fixa à esquerda, grade rolável à direita */
  /* min-height garante um chão pra área de escolha; se nem isso couber, é o
     #lobby inteiro que ganha rolagem — nunca a grade invadindo o rodapé */
  #pickWrap{display:flex;gap:10px;min-height:136px;flex:1 1 auto;text-align:left;}
  #heroDetail{
    width:238px;flex:none;padding:10px;overflow:auto;min-height:0;
    display:flex;flex-direction:column;gap:8px;
  }
  #pickMain{flex:1 1 auto;min-width:0;min-height:0;display:flex;flex-direction:column;gap:7px;}
  #pickBar{display:flex;gap:var(--hud-space-1);align-items:center;flex-wrap:wrap;flex:none;}
  #heroSearch{
    font-family:var(--hud-font-body);font-size:var(--hud-text-body);padding:var(--hud-space-2);flex:1 1 180px;min-width:100px;min-height:var(--hud-target);
    background:var(--hud-surface-inset);color:var(--hud-text);border:var(--hud-border-width) solid var(--hud-border);border-radius:var(--hud-radius);
  }
  #heroSearch:focus{outline:var(--hud-border-width) solid var(--hud-focus);outline-offset:var(--hud-space-1);}
  #heroSearch::placeholder{color:var(--hud-text-muted);}
  #heroFilters{display:flex;flex-direction:column;gap:var(--hud-space-1);flex:none;min-height:52px;max-height:55%;overflow:auto;padding:var(--hud-space-1);}
  #heroFilters>*{flex-shrink:0;}
  #roleRow,#heroRangeRow,#heroMechanicRow,.heroFilterOptions{display:flex;gap:var(--hud-space-1);align-items:center;flex-wrap:wrap;}
  #roleRow .hud-filter{display:flex;align-items:center;gap:var(--hud-space-1);flex-shrink:0;}
  #roleRow .heroPortrait{width:24px;height:24px;border-radius:var(--hud-radius);}
  #heroMechanics p{margin:var(--hud-space-1) 0;}
  #heroFilters .hud-filter{flex-shrink:0;}
  .chip{
    font-family:inherit;font-size:8px;padding:7px 8px;cursor:pointer;letter-spacing:1px;
    background:var(--stone);color:var(--dim);border:2px solid var(--edge);
    transition:border-color .1s steps(2),color .1s steps(2),background-color .1s steps(2);
  }
  .chip:hover{color:var(--t0);border-color:var(--t0);}
  .chip.on{background:#231c0b;color:var(--gold);border-color:var(--gold);}
  #pickBar .chip{min-height:40px;}
  #pickBar .chip:focus-visible{outline:2px solid var(--t0);outline-offset:2px;}
  #heroCount{font-size:var(--hud-text-xs);color:var(--hud-text-muted);margin-left:auto;}
  #heroEmpty{font:var(--hud-text-body)/var(--hud-leading) var(--hud-font-body);color:var(--hud-text-muted);padding:var(--hud-space-2);text-align:center;}

  #heroGrid{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(98px,1fr));
    gap:6px;overflow-y:auto;align-content:start;flex:1 1 auto;min-height:0;padding:2px;
  }
  .hcard{
    position:relative;font-family:inherit;cursor:pointer;color:var(--ink);
    border:2px solid var(--edge);background:rgba(10,9,16,.9);
    padding:7px 3px 6px;display:flex;flex-direction:column;align-items:center;gap:3px;
    transition:border-color .1s steps(2),background-color .1s steps(2),transform .08s steps(2);
  }
  .hcard:hover{border-color:var(--t0);background:#141227;transform:translateY(-2px);}
  .hcard:focus-visible{outline:none;border-color:var(--t0);}
  .hcard.sel{
    border-color:var(--gold);background:#241d0c;
    box-shadow:0 0 0 2px #000, inset 0 0 0 1px rgba(242,193,78,.35);
  }
  .hcard.sel .nm{color:#ffe9a8;}
  .hcard.sel::after{content:'✓';position:absolute;top:0;right:3px;font-size:9px;color:var(--gold);}
  .hcard.hide{display:none;}
  .hcard .ic{font-size:19px;line-height:1;}
  .hcard .nm{font-size:11px;color:var(--gold);letter-spacing:.5px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .hcard .rl{font-size:8px;color:var(--dim);letter-spacing:.5px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  /* quem mais já escolheu este herói, na cor do time */
  .hcard .own{position:absolute;top:2px;left:3px;display:flex;gap:2px;}
  .hcard .own i{width:5px;height:5px;display:block;}
  @keyframes pickPop{0%{transform:scale(.88);}55%{transform:scale(1.07);}100%{transform:scale(1);}}
  .hcard.pop{animation:pickPop .18s steps(4);}

  /* ficha do herói (esquerda) */
  .hdTop{display:flex;gap:8px;align-items:center;}
  .hdIcon{
    width:64px;height:64px;flex:none;
    display:flex;align-items:center;justify-content:center;
    border:2px solid var(--hud-border);background:var(--hud-surface-inset);
    background-size:contain;background-position:center;background-repeat:no-repeat;
    image-rendering:pixelated;
  }
  .hdId{display:flex;flex-direction:column;gap:1px;min-width:0;}
  .hdName{font-size:14px;color:var(--gold);letter-spacing:1px;}
  .hdTitle{font-size:9px;color:var(--dim);}
  .hdTag{font-size:9px;color:var(--t0);letter-spacing:.5px;}
  .hdBadge{
    font-size:9px;letter-spacing:1.5px;color:var(--dim);
    border:1px solid #221f36;padding:3px 5px;text-align:center;
  }
  .hdBadge.on{color:var(--gold);border-color:#5a4410;background:#1c1708;}
  .hdStats{display:flex;flex-direction:column;gap:4px;}
  .hdStat{display:flex;align-items:center;gap:5px;font-size:9px;color:var(--dim);}
  .hdStat b{width:48px;flex:none;font-weight:400;text-align:right;letter-spacing:.5px;}
  .hdStat .track{height:7px;}
  .hdStat .track i{position:absolute;left:0;top:0;bottom:0;display:block;}
  .hdStat .v{width:28px;flex:none;text-align:right;color:var(--ink);}
  .hdAbils{display:flex;flex-direction:column;gap:5px;}
  .hdAb{display:flex;gap:6px;align-items:flex-start;border-top:1px solid #221f36;padding-top:5px;}
  .hdAb .k{
    width:14px;height:14px;flex:none;background:var(--edge);color:var(--ink);
    font-size:8px;text-align:center;line-height:14px;
  }
  .hdAb .at{display:flex;flex-direction:column;gap:2px;min-width:0;}
  .hdAb .an{font-size:10px;color:var(--ink);}
  .hdAb .am{font-size:8px;color:var(--mana);letter-spacing:.5px;}
  .hdAb .ad{
    font-size:9px;color:var(--dim);line-height:1.5;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }

  /* Fixed room footer keeps BACK/READY visible. */
  #roomFoot{display:flex;gap:12px;align-items:center;justify-content:space-between;flex:none;flex-wrap:wrap;}
  #roomBtns{display:flex;gap:var(--hud-space-2);margin-left:auto;max-width:100%;}
  #roomBtns .btn{min-width:0;min-height:var(--hud-target);white-space:normal;}
  @media(max-height:400px){
    #lobby:has(#roomPane:not([hidden])) #lobbyHead{display:none;}
  }
  /* o PRONTO respira devagar enquanto ninguém apertou — puxa o olho pro
     próximo passo sem piscar feito alarme */
  @keyframes readyPulse{
    0%,100%{box-shadow:0 0 0 0 rgba(242,193,78,0);}
    50%{box-shadow:0 0 0 3px rgba(242,193,78,.4);}
  }
  #btnReady.primary:not(:disabled){animation:readyPulse 1.9s ease-in-out infinite;}

  #lobbyStatus{font-size:9px;color:var(--t0);min-height:13px;letter-spacing:1px;flex:none;}
  #lobbyStatus.err{color:var(--t1);}

  @media (prefers-reduced-motion:reduce){
    .btn,.modeCard,.hcard,.chip{transition:none;}
    .btn:hover,.modeCard:hover,.hcard:hover{transform:none;}
    .hcard.pop{animation:none;}
    #btnReady.primary:not(:disabled){animation:none;}
  }

  #itemTooltip{position:fixed;z-index:10000;pointer-events:none;box-sizing:border-box;
    width:300px;max-width:calc(100vw - 16px);max-height:calc(100vh - 16px);overflow:hidden;
    padding:12px 14px;background:rgba(8,12,22,.98);border:1px solid #66738d;border-radius:6px;
    box-shadow:0 8px 28px #000b;color:#dfe7f3;font:12px/1.5 Arial,sans-serif;}
  #itemTooltip[hidden]{display:none;}
  #itemTooltip .name{font-size:14px;font-weight:bold;color:#f2c14e;margin-bottom:6px;}
  #itemTooltip .stats{color:#8ee5a9;margin-top:7px;}
  #itemTooltip .active{color:#9fd8ff;margin-top:7px;}
  #itemTooltip .meta{color:#aab8cd;margin-top:7px;font-size:11px;}
  .itemSlot:focus-visible,.item:focus-visible{outline:2px solid #f2c14e;outline-offset:2px;}
  /* ---------- Tooltip ---------- */
  #tip{
    position:absolute;display:none;z-index:9;pointer-events:none;
    width:250px;background:rgba(6,5,12,.97);
    border:2px solid var(--edge);box-shadow:0 8px 24px rgba(0,0,0,.75);
    padding:9px 11px;font-size:9px;line-height:1.7;text-align:left;
  }
  #tip .tname{font-size:11px;color:var(--gold);letter-spacing:1px;}
  #tip .tmeta{font-size:8px;color:var(--mana);margin-top:3px;letter-spacing:1px;}
  #tip .tdesc{color:var(--ink);margin-top:5px;}
  #tip .tval{color:var(--life);margin-top:4px;}
  #tip .tlock{color:var(--t1);margin-top:5px;}
  #tip .trw{margin-top:6px;padding-top:5px;border-top:1px solid var(--edge);}
  #tip .trw b{color:var(--t0);font-weight:400;}
  #tip .trw .d{color:var(--dim);}

  #clock{
    position:absolute;top:6px;left:50%;transform:translateX(-50%);
    font-size:14px;color:var(--ink);background:rgba(10,9,16,.88);
    border:2px solid var(--edge);padding:2px 14px;letter-spacing:3px;
    pointer-events:none;z-index:3;
  }
  #btnMute{
    position:absolute;top:6px;right:8px;z-index:3;
    font-family:inherit;font-size:13px;padding:2px 8px;cursor:pointer;
    background:rgba(10,9,16,.88);color:var(--ink);border:2px solid var(--edge);
  }
  #btnMute.off{color:var(--dim);}
  #netPill{
    position:absolute;top:32px;left:50%;transform:translateX(-50%);
    font-size:8px;color:var(--dim);background:rgba(10,9,16,.85);
    border:2px solid var(--edge);padding:3px 8px;display:none;pointer-events:none;z-index:3;
  }
  #netPill b{color:var(--t0);font-weight:400;}
  #netPill.warn{border-color:var(--t1);color:var(--t1);}

  /* ---------- modo espectador ----------
     Não é uma HUD nova: é a HUD de jogador SUMINDO. Quem assiste não tem
     herói, então barra de habilidades, inventário, loja, ficha de vida/mana e
     os automáticos não têm o que mostrar — e deixá-los na tela vazios daria a
     impressão de que dá pra clicar em alguma coisa. */
  body.spectating #abilities,
  body.spectating #itemsPanel,
  body.spectating #autoBuyLabel,
  body.spectating #heroPanel,
  body.spectating #shop,
  body.spectating #stick,
  body.spectating #touchBtns{display:none !important;}
  /* ABATES/MORTES do placar é o herói local — espectador não tem um, então
     ficaria travado em 0/0 a partida inteira; as torres/Ancião por time logo
     abaixo (#teamRows) continuam, essas sim fazem sentido sem herói próprio */
  body.spectating #scoreLine{display:none !important;}
  /* na sala, o espectador também não escolhe herói nem aperta PRONTO — mas o
     rodapé fica, senão ele perde o botão VOLTAR e não tem como sair da sala */
  body.spectating #pickWrap,
  body.spectating #btnReady{display:none !important;}

  #specBar{
    display:none;position:absolute;left:50%;bottom:10px;transform:translateX(-50%);
    align-items:center;gap:8px;white-space:nowrap;z-index:4;pointer-events:none;
    background:rgba(10,9,16,.88);border:2px solid var(--t0);padding:5px 10px;
  }
  body.spectating #specBar{display:flex;}
  body.spectating.inlobby #specBar{display:none;}
  #specBar b{font-size:9px;color:var(--t0);font-weight:400;letter-spacing:2px;}
  #specBar span{font-size:9px;color:var(--gold);}
  #specBar i{font-size:7px;color:var(--dim);font-style:normal;}

  /* ---------- Controles de toque (celular) ----------
     Só aparecem com body.touch — no desktop nem ocupam espaço. Ficam
     position:fixed (e não dentro de #stage) de propósito: no retrato o palco
     tem uns 200px de altura e sobra tela embaixo, que é justamente onde o
     polegar alcança. */
  #stick,#touchBtns,#rotateHint{display:none;}
  /* Todo controle fixo soma a área segura ao próprio afastamento: sem isso o
     manche e o teclado de habilidades ficam parcialmente DENTRO da faixa de
     gesto do iPhone (arrastar pra cima ali fecha o jogo) e, deitado, embaixo
     do canto arredondado/entalhe. */
  #stick{
    position:fixed;left:calc(14px + var(--sal));bottom:calc(14px + var(--sab));
    width:124px;height:124px;z-index:8;
    border-radius:50%;background:rgba(10,9,16,.55);border:2px solid var(--edge);
    touch-action:none;user-select:none;-webkit-user-select:none;
  }
  #stickNub{
    position:absolute;left:50%;top:50%;width:52px;height:52px;border-radius:50%;
    background:rgba(46,42,69,.95);border:2px solid var(--t0);
    transform:translate(-50%,-50%);pointer-events:none;
  }
  #touchBtns{
    position:fixed;right:calc(14px + var(--sar));top:50%;transform:translateY(-50%);z-index:8;
    flex-direction:column;gap:8px;
  }
  .tbtn{
    width:48px;height:48px;font-size:20px;line-height:1;padding:0;cursor:pointer;
    background:rgba(10,9,16,.88);color:var(--ink);border:2px solid var(--edge);
    font-family:inherit;touch-action:manipulation;
  }
  /* Fica logo ABAIXO do palco, pra não brigar com o relógio nem cobrir o jogo.
     A conta repete a do #stage no celular (largura útil = viewport menos as
     laterais seguras) e ainda soma o topo seguro, porque o palco agora começa
     depois do entalhe — com o `100vw` cru de antes o aviso subia pra cima do
     mapa em qualquer aparelho com Ilha Dinâmica. */
  #rotateHint{
    position:fixed;left:50%;transform:translateX(-50%);z-index:9;
    top:calc(var(--sat) + (100vw - var(--sal) - var(--sar)) * 9 / 16 + 10px);
    font-size:9px;color:var(--gold);background:rgba(10,9,16,.9);
    border:2px solid var(--edge);padding:3px 9px;pointer-events:none;
  }
  body.touch{overscroll-behavior:none;}
  body.touch canvas{touch-action:none;}
  body.touch #stick{display:block;}
  body.touch #touchBtns{display:flex;}
  body.touch #autoBuyLabel,body.touch #autoLvlLabel{display:none;}
  body.inlobby #stick,body.inlobby #touchBtns,body.inlobby #rotateHint,
  body.touch.inlobby #abilities,body.touch.inlobby #itemsPanel{display:none;}
  /* barra de habilidades vira um teclado numérico no canto do polegar direito */
  body.touch #abilities{
    position:fixed;left:auto;transform:none;z-index:8;
    right:calc(12px + var(--sar));bottom:calc(12px + var(--sab));
    display:grid;grid-template-columns:repeat(3,auto);gap:7px;
  }
  body.touch .slot{width:54px;height:54px;font-size:21px;cursor:pointer;touch-action:manipulation;}
  /* Inventário: 34px é confortável com um mouse e pequeno demais pra um
     polegar (a recomendação de alvo de toque é 44px). Só cresce no toque, o
     desktop segue com os slots compactos de sempre. */
  body.touch #itemsPanel{
    position:fixed;left:calc(14px + var(--sal));bottom:calc(152px + var(--sab));z-index:8;
    display:grid;grid-template-columns:repeat(3,auto);gap:5px;
  }
  body.touch #touchAimPrompt{
    position:fixed;z-index:12;left:50%;bottom:calc(178px + var(--sab));
    transform:translateX(-50%);max-width:76vw;padding:8px 12px;
    color:#fff3c4;background:rgba(20,14,34,.94);border:2px solid #f2c14e;
    font:10px Silkscreen,monospace;text-align:center;pointer-events:none;
  }
  body.touch #abilities .slot{touch-action:none;}
  body.touch #abilities .slot.aiming{outline:3px solid #8deaff;}
  #touchCastCancel{position:fixed;z-index:20;right:calc(18px + var(--sar));top:calc(64px + var(--sat));width:66px;height:66px;border:2px solid #ff6b6b;border-radius:50%;display:grid;place-items:center;background:#25131fe8;color:#ffb3b3;font:9px Silkscreen,monospace;pointer-events:none;}
  #touchCastCancel[hidden]{display:none;}
  #touchCastCancel.selected{background:#b52b40;color:white;}
  #abilities .return-ready .n{z-index:3;font-size:8px;color:#8deaff;}
  #abilities .return-ready .veil{opacity:.25;}
  body.touch .itemSlot{width:44px;height:44px;font-size:19px;touch-action:manipulation;}

  /* Portrait is supported for browsing the room, but a 16:9 fight is clearer
     in landscape. Keep the preview HUD lean so it never overlaps the small
     battlefield while the rotation hint remains visible. */
  @media (max-width: 900px) and (orientation: portrait){
    /* Portrait is playable, not merely a lobby orientation. Keep the canvas
       at its natural 16:9 ratio, enlarge it to most of the physical screen,
       and crop its far left/right edges. Stretching it into portrait would
       warp movement; showing it fit-width made the battlefield only ~26% of
       a phone's height. This yields a readable, zoomed centre fight while
       leaving a dedicated thumb shelf below it. */
    body.touch:not(.inlobby) #stage{
      width:100vw;height:calc(100dvh - 150px);max-width:none;overflow:hidden;margin:0;
    }
    body.touch:not(.inlobby) #game{
      position:absolute;left:50%;top:0;width:calc((100dvh - 150px) * 16 / 9);
      height:calc(100dvh - 150px);max-width:none;transform:translateX(-50%);
    }
    body.touch:not(.inlobby) #touchBtns{
      top:auto;bottom:calc(96px + var(--sab));right:calc(12px + var(--sar));
      transform:none;flex-direction:row;gap:6px;
    }
    body.touch:not(.inlobby) #rotateHint{display:none;}
    body.touch #hudTop{max-width:100%;padding:3px;}
    body.touch #heroPanel{max-width:176px;padding:3px 4px;}
    body.touch #heroMeta{gap:3px;font-size:7px;}
    body.touch #heroMeta i:nth-child(n+4){display:none;}
    body.touch #xpTrack{height:3px;}
    body.touch #heroMeta i:nth-child(n+5){display:none;}
    body.touch #objectives{display:none;}
    body.touch #clock,body.touch #netPill{display:none !important;}
    body.touch #btnMute{top:4px;right:4px;min-height:38px;}
    /* Passive inventory is background information. Only actionable items
       earn a slot on the combat screen, and empty slots never waste map area. */
    body.touch:not(.touch-active-items) #itemsPanel{display:none;}
    body.touch.touch-active-items #itemsPanel{left:calc(12px + var(--sal));bottom:calc(142px + var(--sab));grid-template-columns:repeat(2,auto);}
    body.touch.touch-active-items #itemsPanel .itemSlot:not(.active){display:none;}
  }

  /* ---------- Telas estreitas ----------
     A condição é largura estreita OU altura baixa, não só a largura. Celular
     DEITADO é largo e baixo: um iPhone 15 Pro Max deitado dá 932x430 e passava
     batido pelo `max-width:900px`, caindo no layout de desktop — com cabeçalho,
     rodapé e o palco centralizado numa viewport de 430px de altura, o topo do
     jogo (relógio, barras de vida) ficava ACIMA da tela e a página ganhava
     barra de rolagem. 560px de altura é confortavelmente acima de qualquer
     celular deitado e abaixo de qualquer janela de desktop de verdade. */
  @media (max-width: 900px), (max-height: 560px){
    /* O padding do body é a área segura: o palco (e toda a HUD que mora dentro
       dele — barras de vida, relógio, botão de som) passa a ser diagramado
       DENTRO do retângulo visível, então nada mais fica embaixo da Ilha
       Dinâmica em pé nem atrás da barra de gesto deitado. O fundo preto do
       body continua indo até a borda física, então visualmente não aparece
       nenhuma "moldura". */
    body{padding:var(--sat) var(--sar) var(--sab) var(--sal);gap:0;justify-content:flex-start;}
    header,footer{display:none;}
    /* o palco cabe inteiro na área segura nas duas dimensões: no deitado ele
       enche a altura, no em pé enche a largura e fica no topo */
    #stage{
      width:min(calc(100vw - var(--sal) - var(--sar)), calc((100vh - var(--sat) - var(--sab)) * 16 / 9));
      width:min(calc(100vw - var(--sal) - var(--sar)), calc((100dvh - var(--sat) - var(--sab)) * 16 / 9));
      max-width:100%;border:none;
      margin-left:auto;margin-right:auto;
    }
    #hudTop{padding:4px;gap:4px;}
    /* o botão de mudo mora no canto de cima à direita e ia sentar em cima
       da tabela de times quando o painel encolhe */
    #objectives{padding-right:28px;}
    .panel{padding:4px 6px;}
    #heroPanel{min-width:0;flex:1 1 0;gap:3px;}
    .bar b{display:none;}
    .track{height:9px;}
    .track em{font-size:7px;}
    #heroMeta{font-size:8px;gap:5px;flex-wrap:wrap;}
    #objectives{min-width:0;}
    #scoreLine{font-size:8px;gap:6px;}
    .trow .tn{width:50px;}
    .trow .mini{width:40px;}
    #clock{font-size:11px;padding:1px 8px;}
    #banner{top:58px;}
    #tip{width:200px;font-size:8px;}
    /* lobby, loja e placar saem do palco e usam a viewport inteira — dentro
       de um palco de 200px de altura no retrato não caberia nada */
    #lobby,#endcard{position:fixed;inset:0;z-index:20;}
    #shop{
      position:fixed;width:94vw;z-index:21;
      max-height:calc(82vh - var(--sat) - var(--sab));
      max-height:calc(82dvh - var(--sat) - var(--sab));
    }
    /* No celular a sala vira uma coluna só e usa a viewport inteira: cabeçalho
       curto, ficha do herói deitada, grade rolando no meio e o PRONTO colado
       embaixo — nunca é preciso rolar a página pra achar o botão. */
    #lobby{
      height:100dvh;justify-content:flex-start;
      padding:max(8px,var(--sat)) max(8px,var(--sar)) max(8px,var(--sab)) max(8px,var(--sal));
    }
    #lobbyShell{width:100%;height:100%;gap:7px;}
    #lobby h2{font-size:15px;letter-spacing:2px;}
    #lobby p.sub{font-size:7px;line-height:1.7;}
    #lobbyHead{gap:3px;}
    #accountBar{min-height:25px;gap:3px;}
    #btnDeleteAccount{font-size:6px;padding:6px;}
    #googleLogin{min-height:44px;}
    .privacyLink{min-height:24px;display:inline-flex;align-items:center;}
    #usernameInput{width:112px;padding:6px;font-size:7px;}
    #accountBar .btn{padding:6px;font-size:6px;}
    .lstep{padding:9px 10px;gap:8px;}
    #orbitalWar{padding:9px 10px;}.warTitle{font-size:14px;letter-spacing:2px;}.warTeams{margin:5px 0 3px;}.warTitle + .warTeams + p{font-size:7px;}
    .lstepHead .ttl{font-size:9px;letter-spacing:1px;}
    #modeRow{grid-template-columns:repeat(4,1fr);gap:5px;}
    .modeCard{padding:7px 2px 6px;gap:4px;border-width:2px;}
    .modeCard .mcName{font-size:11px;}
    .modeCard .mcSub{display:none;}
    #lobbyRow{grid-template-columns:1fr;gap:6px;}
    .playCard{flex-direction:row;flex-wrap:wrap;align-items:center;gap:7px;padding:8px;text-align:left;}
    .pcIcon{font-size:16px;}
    .pcTtl{font-size:9px;}
    .pcSub{font-size:7px;min-height:0;flex:1 1 100px;}
    .playCard .btn{width:auto;flex:none;}
    .quickPlayCard{display:grid;grid-template-columns:auto 1fr auto;}.quickPlayCard .pcIcon{grid-row:1 / span 2;}.quickPlayCard .rankBadge{justify-content:flex-start;}.quickPlayCard .pcSub{grid-column:2 / -1;justify-content:flex-start;}.quickPlayCard #btnQuickMatch{grid-column:1 / -1;width:100%;font-size:11px;padding:12px;}.quickPlayCard .queueState{grid-column:1 / -1;text-align:center;}
    #joinBox{width:auto;flex:none;}
    #codeInput{flex:0 0 96px;font-size:11px;}
    /* com 16px (o anti-zoom do iOS) as 5 letras precisam de mais caixa */
    body.touch #codeInput{flex:0 0 118px;}

    #pickWrap{flex-direction:column;gap:var(--hud-space-2);min-height:96px;overflow:hidden;}
    #heroDetail{
      width:auto;flex:none;flex-direction:row;flex-wrap:wrap;
      align-items:center;gap:var(--hud-space-2);padding:var(--hud-space-2);overflow:auto;max-height:40%;
    }
    .hdTop{flex:1 1 150px;}
    .hdIcon{width:44px;height:44px;}
    .hdName{font-size:12px;}
    .hdBadge{flex:none;}
    .hdStats{flex:1 1 150px;display:grid;grid-template-columns:1fr 1fr;gap:3px 8px;}
    .hdStat b{width:40px;}
    .hdAbils{display:none;}
    /* min-height:0 é obrigatório: com um piso aqui a grade se recusa a
       encolher e passa POR BAIXO do rodapé no celular deitado. Quem segura o
       tamanho mínimo da área de escolha é o #pickWrap. */
    #heroGrid{grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:5px;min-height:0;}
    .hcard{padding:5px 2px;gap:2px;}
    .hcard .ic{font-size:16px;}
    .hcard .nm{font-size:9px;}
    .hcard .rl{font-size:7px;}
    #pickBar{gap:4px;}
    #heroSearch{flex:1 1 100px;font-size:var(--hud-text-body);padding:var(--hud-space-2);}
    #roleRow{flex-wrap:nowrap;overflow-x:auto;padding-bottom:var(--hud-space-1);}
    .chip{font-size:7px;padding:6px 6px;}
    #roomTop{gap:6px;}
    #codeBox{flex-direction:row;padding:5px 8px;gap:6px;}
    #codeBox .lbl{display:none;}
    #shareBox{flex:1 1 100%;padding:6px 7px;gap:4px;}
    .shareLine .lbl{flex:0 0 52px;font-size:6px;letter-spacing:1px;}
    .shareUrl{font-size:7px;padding:5px;}
    #specBar{gap:5px;padding:4px 7px;white-space:normal;max-width:94%;}
    #specBar i{display:none;}
    #roomPlayers{gap:5px;}
    .pcard{min-width:84px;padding:6px 6px 5px;}
    .pcard .pav{font-size:14px;}
    .pcard .pick{font-size:8px;}
    #roomFoot{gap:7px;justify-content:center;}
    #roomBtns{margin-left:0;}
    .btn{font-size:11px;padding:11px 14px;}
    #codeVal{font-size:18px;letter-spacing:5px;padding:2px 0 2px 6px;}
    #endcard{
      gap:10px;
      padding:max(10px,var(--sat)) max(10px,var(--sar)) max(10px,var(--sab)) max(10px,var(--sal));
    }
    #endcard h2{font-size:20px;}
    #endcard p{font-size:8px;line-height:1.7;}
    #endStatsTable{font-size:8px;max-width:98vw;}
    #endStatsTable th,#endStatsTable td{padding:3px 5px;}
    #endInner{gap:10px;padding:10px 6px;}
    #endBody{gap:10px;}
    #endMine,#endChartBox{padding:9px 10px;min-width:0;max-width:98vw;}
    #endMine .mKda{font-size:24px;}
    #endChart{width:100%;}
    .item{grid-template-columns:32px minmax(0,1fr) auto;gap:6px;padding:6px 7px;font-size:9px;}
    .item .desc{font-size:7px;}
  }
  /* Celular DEITADO: sobram ~375px de altura e um 3v3 põe 6 cartões de jogador
     mais o código na tela. Tudo do cabeçalho encolhe pro miolo (escolher o
     herói) continuar sendo a maior coisa da tela. */
  @media (max-height: 480px){
    #lobbyHead p.sub{display:none;}
    #lobby h2{font-size:13px;}
    .pxRule{display:none;}
    #codeBox{padding:3px 7px;}
    #codeVal{font-size:15px;letter-spacing:3px;padding:1px 0 1px 4px;}
    .pcard{min-width:66px;padding:5px 4px 4px;gap:0;}
    .pcard .pav{font-size:12px;}
    .pcard .who{font-size:6px;letter-spacing:1px;}
    .pcard .pick{font-size:7px;}
    .pcard .rdy{font-size:6px;}
    .hdAbils{display:none;}
    .btn{padding:9px 12px;}
  }
  /* Celular deitado CURTO (de ~375 a ~560px de altura — SE/15/Android típico
     na horizontal): o painel de código+links, sozinho, já passou a ocupar
     mais de metade da tela depois que os links de convite entraram ao lado
     do código — e como ninguém aqui encolhia, era a grade de heróis embaixo
     que pagava a conta (chegava a ~10px de altura, inutilizável). Em vez de
     deixar o #roomTop quebrar numa segunda linha (o que dobra sua altura),
     ele vira UMA linha só que encolhe pra caber — só a caixa de links tem
     flex-shrink, código e cartões de jogador mantêm o tamanho de sempre. */
  @media (max-height: 560px){
    #roomTop{flex-wrap:nowrap;gap:5px;}
    #codeBox,#roomPlayers{flex:none;}
    #shareBox{flex:1 1 auto;min-width:0;padding:4px 6px;gap:3px;}
    /* a frase explicando os links é a primeira coisa a sumir — os rótulos
       "LINK PRA JOGAR/ASSISTIR" já dizem o essencial. E os dois campos, que
       viviam empilhados em duas linhas, viram uma linha só lado a lado: no
       toque cada botão COPIAR já é forçado a 44px de altura (alvo de toque
       mínimo, ver regra geral lá embaixo) — empilhados isso sozinho passava
       de 100px só pra caixa de link, o dobro do que sobrava pra grade. */
    .shareHint:not(.spec){display:none;}
    #shareBox{flex-direction:row;flex-wrap:wrap;align-items:center;}
    /* min-width:0 nos dois de propósito: um <input> sem isso nunca encolhe
       abaixo do mínimo intrínseco do navegador (~170px), então nada aqui
       embaixo do flex:1 importava e as duas linhas voltavam a empilhar em
       telas mais estreitas (ex.: 667px de largura) mesmo com o layout em
       linha — é o campo, não a linha, que precisa saber que pode encolher. */
    .shareLine{flex:1 1 110px;min-width:0;gap:4px;}
    .shareLine .lbl{display:none;}
    .shareUrl{padding:4px 5px;font-size:6px;min-width:0;}
    .shareLine .btn{padding:4px 7px;font-size:7px;}

    /* ficha do herói selecionado: o ícone de 44px sozinho definia a altura
       da linha inteira — encolher ele é o jeito de sobrar espaço pra grade
       sem cortar nome/stats, que já eram pequenos */
    #heroDetail{padding:5px 7px;gap:6px;}
    .hdIcon{width:30px;height:30px;}
    .hdBadge{display:none;}
  }
  /* Deitado (que é como o jogo PEDE pra jogar) sobram só ~375px de altura: a
     coluna de botões centralizada na direita cai bem em cima do teclado de
     habilidades, que mora no canto do polegar direito. Com pouca altura ela
     vira uma FILEIRA logo abaixo do HUD, onde não briga com nada. */
  @media (max-height: 520px){
    /* Sem toque (janela de desktop baixa e larga) a barra de habilidades fica
       no meio de baixo e o inventário no canto de baixo à esquerda: com o
       palco estreito pela altura os dois se encontram. Sobe o inventário pra
       cima da barra. No toque não se aplica — lá cada um tem seu canto. */
    body:not(.touch) #itemsPanel{bottom:66px;}
    body.touch #touchBtns{
      top:calc(74px + var(--sat));bottom:auto;right:calc(12px + var(--sar));transform:none;
      flex-direction:row;gap:6px;
    }
    body.touch .tbtn{width:44px;height:44px;font-size:18px;}
  }
  /* Tablets in landscape have plenty of pixels but not enough *playfield*
     once the desktop objective panel and oversized thumb controls arrive.
     Treat every touch landscape below desktop width as combat-first: one thin
     vitals strip, no persistent scoreboard, and controls that stay inside the
     corners instead of covering the lane. */
  @media (max-width: 1180px) and (orientation: landscape){
    body.touch:not(.inlobby) #hudTop{right:auto;width:min(330px,48vw);padding:3px;}
    body.touch:not(.inlobby) #objectives{display:none;}
    body.touch:not(.inlobby) #heroPanel{min-width:0;width:100%;padding:3px 5px;gap:2px;}
    body.touch:not(.inlobby) .track{height:7px;}
    body.touch:not(.inlobby) .track em{font-size:6px;}
    body.touch:not(.inlobby) #xpTrack{height:2px;}
    body.touch:not(.inlobby) #heroMeta{font-size:6px;gap:4px;white-space:nowrap;}
    body.touch:not(.inlobby) #heroMeta i:nth-child(n+4),body.touch:not(.inlobby) #combatStatus{display:none!important;}
    body.touch:not(.inlobby) #clock,body.touch:not(.inlobby) #netPill{display:none!important;}
    body.touch:not(.inlobby) #stick{width:102px;height:102px;bottom:calc(9px + var(--sab));left:calc(9px + var(--sal));opacity:.78;}
    body.touch:not(.inlobby) #stickNub{width:42px;height:42px;}
    body.touch:not(.inlobby) #abilities{right:calc(8px + var(--sar));bottom:calc(8px + var(--sab));gap:5px;}
    body.touch:not(.inlobby) .slot{width:46px;height:46px;font-size:18px;}
    body.touch:not(.inlobby) #touchBtns{right:calc(8px + var(--sar));top:calc(54px + var(--sat));transform:none;gap:5px;}
    body.touch:not(.inlobby) .tbtn{width:38px;height:38px;font-size:16px;}
    body.touch:not(.inlobby) #tbFullscreen,body.touch:not(.inlobby) #tbShop{display:none!important;}
  }

  /* ---------- Alvos de toque ----------
     A recomendação de plataforma (iOS e Android) é 44px de lado mínimo. Vários
     controles da sala nasceram dimensionados pela FONTE (7-9px + padding) e
     davam 25-34px de altura — dá pra clicar com o mouse, erra o tempo todo com
     o polegar. Só cresce em `body.touch`, então o desktop segue compacto.
     Cresce só a CAIXA (min-height/padding), nunca a fonte: o visual em pixel
     art depende dos tamanhos de fonte exatos.
     CUIDADO: `min-height` só entra em quem tem UM filho de texto. Nos cartões
     que são item de grade E caixa flex em coluna (.hcard, .modeCard) um
     min-height faz a linha da grade travar nesse valor e os filhos ENCOLHEREM
     abaixo do próprio conteúdo — os nomes dos heróis saíam cortados na
     metade. Nesses dois o alvo cresce por padding, que não mexe na trilha. */
  body.touch .btn,
  body.touch .chip,
  body.touch #codeInput,
  body.touch #heroSearch,
  body.touch #btnMute,
  body.touch #again{min-height:44px;}
  body.touch .privacyLink{min-height:32px;touch-action:manipulation;}
  body.touch .btn,body.touch .chip,
  body.touch .modeCard,body.touch .hcard,
  body.touch #codeInput,body.touch #heroSearch,
  body.touch #btnMute,body.touch #again{touch-action:manipulation;}
  body.touch .chip{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
  }
  /* 43px de altura natural: 3px de padding fecham os 44 sem tocar na grade */
  body.touch .modeCard{padding-top:11px;padding-bottom:10px;}
  /* Safari do iOS dá um zoom automático ao focar um campo com fonte menor que
     16px, e depois deixa a página deslocada — o botão PRONTO some da tela e o
     jogador acha que travou. 16px no campo (só no toque) desliga esse zoom;
     o letter-spacing menor mantém o código de 5 letras dentro da caixa. */
  body.touch #codeInput{font-size:16px;letter-spacing:1px;}
  body.touch #heroSearch{font-size:16px;}
  /* Portrait now has a deliberately cropped combat view, so it no longer
     needs to tell players to rotate before they can play. */
  @media (max-width: 900px) and (orientation: portrait){
    body.touch:not(.inlobby) #rotateHint{display:none;}
  }

  /* ---------- Tutorial (js/tutorial.js) ----------
     Botão fantasma: mesma caixa/tamanho de alvo do .btn normal, só que discreto
     — usado pro link "como jogar" e pros controles pequenos da dica em jogo,
     que não podem competir visualmente com PRONTO/CRIAR SALA. */
  .btn.ghost{background:transparent;color:var(--dim);border-color:#221f36;}
  .btn.ghost:hover{color:var(--t0);border-color:var(--t0);background:transparent;}
  .btn.small{font-size:8px;padding:5px 8px;letter-spacing:.5px;}
  #btnHowToPlay{align-self:center;margin-top:2px;}

  /* Oferta grande do tutorial: convite, não modal — fica ao lado dos passos
     normais da sala, nunca em cima deles. Borda tracejada pulsando chama o
     olho de quem nunca viu esta tela sem parecer um alerta de erro. */
  #tutOffer[hidden]{display:none;}
  .tutOfferBig{
    display:flex;align-items:center;gap:12px;padding:12px 14px;
    border:3px dashed #6b551d;
  }
  @keyframes tutOfferPulse{
    0%,100%{border-color:#6b551d;box-shadow:0 0 0 0 rgba(242,193,78,0);}
    50%{border-color:var(--gold);box-shadow:0 0 14px rgba(242,193,78,.35);}
  }
  .tutOfferBig{animation:tutOfferPulse 2.6s ease-in-out infinite;}
  .toIcon{font-size:26px;flex:none;}
  .toBody{display:flex;flex-direction:column;gap:3px;flex:1;text-align:left;min-width:160px;}
  .toBody b{font-size:11px;letter-spacing:1px;color:var(--gold);}
  .toBody span{font-size:8px;color:var(--dim);line-height:1.6;}
  .tutOfferBig .btn{flex:none;white-space:nowrap;}

  /* Dica em jogo: cartão fino, fixo no topo-centro (longe da barra de
     habilidades e dos controles de toque, que moram todos embaixo). Fica
     montado a partida inteira enquanto state.tutorial for true — só o TEXTO
     troca entre "ocioso" e a dica ativa — pra o botão SAIR nunca sumir. */
  #tutBox{
    position:absolute;top:100px;left:50%;transform:translateX(-50%);
    width:min(360px,86%);padding:7px 10px;z-index:4;text-align:left;
  }
  #tutBar{height:3px;background:#000;margin-bottom:6px;}
  #tutBarFill{display:block;height:100%;width:0;background:var(--gold);transition:width .25s steps(4);}
  .tbRow{display:flex;align-items:center;gap:7px;}
  .tbIcon{font-size:14px;flex:none;line-height:1;}
  #tutText{flex:1;font-size:8px;color:var(--ink);line-height:1.6;letter-spacing:.3px;min-width:0;}
  #tutClose,#tutExit{flex:none;}
  @media (prefers-reduced-motion:reduce){
    .tutOfferBig{animation:none;}
  }
  @media (max-width: 900px), (max-height: 560px){
    .tutOfferBig{flex-direction:row;flex-wrap:wrap;padding:10px;}
    .toBody{flex:1 1 160px;}
    .tutOfferBig .btn{width:100%;}
    #tutBox{top:66px;width:min(320px,94%);}
    #tutText{font-size:7px;}
  }
  body.touch #tutClose,body.touch #tutExit,body.touch #btnHowToPlay{min-height:40px;touch-action:manipulation;}
  /* o ✕ é só um glifo — sem largura mínima o botão de fechar a dica encolhia
     pra ~29px de largura no toque, abaixo do alvo mínimo de 40px */
  body.touch #tutClose{min-width:40px;}

  /* Cover every HUD/overlay descendant, including explicit selectable styles. */
  body.touch,body.touch *{
    -webkit-user-select:none!important;user-select:none!important;-webkit-touch-callout:none;
  }
  /* Keep nickname, account and other text-entry fields editable. */
  body.touch input,body.touch textarea{
    -webkit-user-select:text!important;user-select:text!important;-webkit-touch-callout:default;
  }
  #matchFlow,#matchFlow.found,#nicknameFlow{
    position:fixed;inset:0;transform:none;width:100%;height:100dvh;margin:0;
    background:#080b17;box-shadow:none;border:0;z-index:40;
    display:flex;align-items:center;justify-content:center;flex-direction:column;
    pointer-events:auto;padding:24px;
  }
  #matchFlow[hidden],#nicknameFlow[hidden]{display:none;}
  #matchFlow{gap:clamp(12px,3vh,24px);}
  #matchFlow>*{max-width:100%;flex-shrink:0;}
  #nicknameFlow{z-index:45;overflow:auto;}
  #nicknameForm{width:min(390px,100%);display:flex;flex-direction:column;gap:14px;text-align:center;margin:auto;}
  .nicknameEmblem{font-size:54px;color:#79deff;text-shadow:0 0 30px #447dd9;}
  #nicknameForm small{color:#9aabd2;font-size:8px;letter-spacing:2px;}
  #nicknameForm h2{font-size:18px;color:#ffe7a0;margin:0;}
  #nicknameForm p{font-size:10px;color:#aebad3;line-height:1.6;}
  #nicknameForm label{font-size:9px;text-align:left;color:#79deff;}
  #nicknameInput{font-family:inherit;font-size:16px;padding:14px;color:#fff;background:#141b30;border:2px solid #4b628c;min-width:0;width:100%;}
  #nicknameInput:focus{outline:2px solid #79deff;outline-offset:3px;}
  #nicknameError{font-size:10px;color:#ff9c9c;min-height:16px;}

  /* Rank and Find Match are the primary home-screen actions. */
  #menuPane #orbitalWar,#menuPane .lstepHead,#menuPane .quickPlayCard>.pcIcon,
  #menuPane .quickPlayCard>.pcTtl{display:none;}
  #menuPane .lobbyActions{border:0;background:none;padding:0;}
  #menuPane #lobbyRow{display:flex;flex-direction:column;align-items:center;width:100%;}
  #menuPane .quickPlayCard{display:flex;flex-direction:column;width:min(420px,100%);padding:20px;gap:12px;text-align:center;}
  #menuPane #rankBadge{flex-direction:column;background:none;border:0;box-shadow:none;gap:10px;}
  #menuPane #rankBadge .rankMedal{width:76px;height:76px;font-size:48px;}
  #menuPane #rankSummary{flex:none;font:400 14px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:0;color:#b4bfd7;}
  #menuPane #queueState{font:400 14px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:0;}
  #menuPane #queueState:empty{display:none;}
  .matchHistory{width:100%;min-width:0;text-align:left;border:1px solid #34445b;background:#101925;}
  .matchHistory summary{cursor:pointer;padding:10px;font-size:9px;color:#8fe7b0;min-height:44px;box-sizing:border-box;}
  .matchHistory summary img{vertical-align:middle;margin-right:6px;image-rendering:pixelated;}
  .matchHistoryNote,.matchHistoryEmpty{margin:10px;font-size:8px;line-height:1.8;color:#b4bfd7;}
  #matchHistoryList{max-height:260px;overflow-y:auto;}
  .matchHistoryRow{display:grid;grid-template-columns:45px minmax(0,1fr) auto;gap:7px;padding:12px 10px;border-top:1px solid #34445b;font-size:8px;line-height:1.6;}
  .matchHistoryRow>span{color:#b4bfd7;overflow-wrap:anywhere;}
  .matchHistoryRow>small{grid-column:2 / -1;color:#b4bfd7;font-size:8px;}
  .matchHistoryRow.win>b,.matchHistoryRow.win>strong{color:#8fe7b0;}
  .matchHistoryRow.loss>b,.matchHistoryRow.loss>strong{color:#ef8b8b;}
  #menuPane #btnQuickMatch{width:100%;min-height:48px;font:600 17px/1.3 system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:0;text-transform:none;}
  #secondaryPlay{width:min(520px,100%);margin-top:8px;}
  #secondaryPlay summary{cursor:pointer;padding:12px;font-size:9px;color:#b4bfd7;}
  .secondaryPlayBody{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
  #secondaryPlay .playCard{min-width:0;flex-direction:column;align-items:stretch;text-align:center;}
  #secondaryPlay .pcSub{flex:none;}
  #secondaryPlay #joinBox{width:100%;min-width:0;}
  #secondaryPlay #codeInput{flex:1;min-width:0;width:0;}
  #secondaryPlay .btn{white-space:normal;}
  @media(max-width:600px){
    .secondaryPlayBody{grid-template-columns:minmax(0,1fr);}
    #secondaryPlay summary{min-height:44px;line-height:1.6;}
  }
  #menuPane #tutOffer{order:2;padding:7px;animation:none;border:0;background:none;}
  #menuPane #tutOffer .toIcon,#menuPane #tutOffer .toBody{display:none;}
  #menuPane #btnHowToPlay{align-self:center;font-size:9px;background:none;}

  /* Fixed, non-overlapping touch control zones in both orientations. */
  #mobileMinimap{display:none;}
  body.touch #shop{position:fixed;z-index:21;}
  body.touch #btnFullscreen,body.touch #tbFullscreen{display:none!important;}
  body.touch #endcard{position:fixed;z-index:20;}
  body.touch #mobileMinimap[hidden]{display:none!important;}
  body.touch:not(.inlobby) #mobileMinimap{
    display:block;position:fixed;z-index:7;pointer-events:none;
    width:96px;height:96px;max-width:none;
    left:auto;right:calc(8px + var(--sar));top:calc(60px + var(--sat));bottom:auto;transform:none;
    image-rendering:pixelated;
  }
  @media(orientation:portrait){
    body.touch:not(.inlobby) #mobileMinimap{
      left:auto;right:calc(8px + var(--sar));top:calc(110px + var(--sat));bottom:auto;
      width:96px;height:96px;transform:none;
    }
  }
  @media(max-width:360px) and (orientation:portrait){
    body.touch:not(.inlobby) #stick{width:102px;height:102px;}
    body.touch:not(.inlobby) #stickNub{width:42px;height:42px;}
  }
  @media(orientation:landscape){
    body.touch:not(.inlobby) #mobileMinimap{width:96px;height:96px;}
    body.touch:not(.inlobby) #btnMute{position:fixed;top:calc(8px + var(--sat));right:calc(8px + var(--sar));height:44px;}
  }
  @media(orientation:landscape) and (max-height:400px){
    body.touch:not(.inlobby) #mobileMinimap{width:88px;height:88px;}
  }
  body.touch:not(.inlobby) #touchBtns{top:calc(56px + var(--sat));bottom:auto;right:calc(8px + var(--sar));transform:none;flex-direction:row;gap:4px;}
  body.touch:not(.inlobby) .tbtn{width:44px;height:44px;font-size:17px;}
  body.touch:not(.inlobby) #tbShop{display:flex!important;}
  body.touch:not(.inlobby) #tbFullscreen{display:none!important;}
  body.touch:not(.inlobby) #heroPanel{flex:none;min-width:0;width:164px;max-width:42vw;padding:3px;gap:2px;}
  body.touch:not(.inlobby) #heroPanel .track{height:7px;}
  body.touch:not(.inlobby) #heroPanel .bar b{display:none;}
  body.touch:not(.inlobby) #objectives,body.touch:not(.inlobby) #netPill{display:none!important;}
  body.touch:not(.inlobby) #combatStatus{display:flex!important;}
  body.touch:not(.inlobby) #combatStatus[hidden]{display:none!important;}
  @media(orientation:landscape){
    body.touch:not(.inlobby) #touchBtns{top:calc(8px + var(--sat));right:calc(112px + var(--sar));}
  }

  @media(max-width:700px) and (max-height:700px) and (orientation:portrait){
    #lobby:has(#roomPane:not([hidden])) :is(#lobbySub,#accountBar,.lobbyFoot){display:none;}
    #heroDetail{max-height:80px;}
  }
  @media(orientation:landscape) and (max-height:600px){
    body.touch #lobby:has(#roomPane:not([hidden])) #lobbyHead,
    body.touch #lobby:has(#roomPane:not([hidden])) .lobbyFoot{display:none;}
    body.touch #lobbyShell{height:100%;min-height:0;gap:3px;}
    body.touch #roomPane{min-height:0;gap:4px;overflow:hidden;}
    body.touch #roomTop{max-height:46px;flex:none;overflow:auto;}
    body.touch #roomPlayers{display:flex;gap:4px;}
    body.touch .pcard{padding:3px 6px;min-width:72px;}
    body.touch .pcard .pav,body.touch .pcard .rdy{display:none;}
    body.touch #shareBox{display:none;}
    body.touch #pickWrap{flex-direction:row;min-height:0;flex:1;overflow:hidden;}
    body.touch #heroDetail{width:155px;flex:0 0 155px;display:block;overflow:auto;max-height:none;padding:var(--hud-space-2);}
    body.touch .hdStats,body.touch .hdTrait,body.touch .hdLore{display:none;}
    body.touch #pickMain{min-height:0;overflow:hidden;gap:4px;}
    body.touch #heroFilters{max-height:45%;}
    body.touch #pickBar{flex:none;padding-right:108px;}
    body.touch #roleRow{display:flex;}
    body.touch #heroCount{display:block;}
    body.touch #pickBar{gap:4px;}
    body.touch #pickBar .chip{min-height:36px;padding:5px;font-size:8px;}
    body.touch #heroSearch{min-height:var(--hud-target);padding:var(--hud-space-1);font-size:16px;flex:1 1 100px;}
    body.touch #heroGrid{flex:1;min-height:0;overflow-y:auto;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));align-content:start;}
    body.touch .hcard{min-height:52px;padding:4px;}
    body.touch #roomFoot{flex:none;flex-wrap:nowrap;justify-content:space-between;gap:5px;}
    body.touch #roomBtns{display:flex;gap:6px;}
    body.touch #roomBtns .btn{min-height:44px;padding:8px 18px;}
    body.touch #lobbyStatus:empty{display:none;}
    #menuPane .quickPlayCard{padding:8px;gap:5px;}
    #menuPane #rankBadge{flex-direction:row;}
    #menuPane #rankBadge .rankMedal{width:48px;height:48px;font-size:34px;}
  }
.itemArt{display:inline-block;width:32px;height:32px;flex-shrink:0;vertical-align:middle;background-image:url('../assets/world/items.png');background-size:500% 500%;background-repeat:no-repeat;image-rendering:pixelated;border-radius:4px;pointer-events:none;}
.itemSlot .itemArt{width:100%;height:100%;}
/* Generated roster art: fixed slots prevent layout shifts while images load. */
.heroPortrait{position:relative;display:inline-grid;place-items:center;width:52px;height:52px;overflow:hidden;border-radius:7px;background:#101827;vertical-align:middle;}
.heroPortrait>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;image-rendering:auto;}
.heroPortrait.artReady>img,.skillIcon.artReady>img{opacity:1;}
/* Fallback glyphs are for failed assets, never the normal loading state. */
.heroPortrait>span,.skillIcon>span{visibility:hidden;}
.heroPortrait.artFailed>span,.skillIcon.artFailed>span{visibility:visible;}
#endStatsTable .heroPortrait{width:30px;height:30px;margin-right:5px;}
#endMine .mIcon{flex-shrink:0;}
#endMine .mIcon .heroPortrait{width:100%;height:100%;border-radius:0;}
#endLegend .heroPortrait{width:23px;height:23px;border-radius:3px;}
.hcard .ic{display:block;line-height:0;}
.hcard .heroPortrait{width:54px;height:54px;}
.pcard .heroPortrait{width:28px;height:28px;border-radius:4px;}
.skillIcon{position:relative;display:inline-grid;place-items:center;width:30px;height:30px;overflow:hidden;border-radius:4px;vertical-align:middle;flex:none;}
.skillIcon>img{position:absolute;top:0;width:400%;height:100%;max-width:none;image-rendering:auto;}
.slot>.skillIcon{position:absolute;inset:2px;width:calc(100% - 4px);height:calc(100% - 4px);}
.slot .k,.slot .n,.slot .chg,.slot .rank{z-index:2;text-shadow:1px 1px 2px #000,-1px -1px 2px #000;}
.slot .veil{z-index:3;}
.rankMedal.generatedMedal{background:none!important;border:0!important;clip-path:none;box-shadow:none!important;filter:none;}
.medalSprite{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 5px #0009);}
.rankProgression{width:min(650px,100%);align-self:center;padding:12px 10px;border:1px solid #283348;background:linear-gradient(135deg,#12182b,#0b101c);border-radius:10px;text-align:center;}
.rankProgression h2{margin:0 0 6px;font-size:11px;letter-spacing:1px;color:#e1e8fa;}
.rankProgression p{margin:0 0 10px;font-size:9px;color:#a1aec7;line-height:1.5;}
#rankGallery{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;}
.rankMilestone{display:flex;flex-direction:column;align-items:center;gap:5px;padding:7px 3px;border:1px solid transparent;border-radius:7px;min-width:0;}
.rankMilestone.current{border-color:#6fe3ff66;background:#6fe3ff0c;}
.rankMilestone>.medalSprite{width:62px;height:62px;max-width:100%;}
.rankMilestone b{font-size:8px;line-height:1.5;color:#dce8ff;}
.rankMilestone span{font-size:8px;color:#a1aec7;}
.rankMilestone small{font-size:7px;color:#6fe3ff;}
@media(max-width:600px){.rankMilestone>.medalSprite{width:43px;height:43px;}.rankMilestone b,.rankMilestone span{font-size:6px;}.rankProgression{padding:8px 4px;}.hcard .heroPortrait{width:42px;height:42px;}}
@media(max-height:520px){.rankProgression{padding:6px;}.rankProgression p{margin-bottom:3px;}.rankMilestone>.medalSprite{width:34px;height:34px;}.rankMilestone{padding:3px;gap:2px;}.hcard .heroPortrait{width:32px;height:32px;}}
.menuSoundtrack{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:9px 12px;margin:0 0 12px;border:1px solid #75ddff30;background:#0b1225;color:#bed0e8}.menuSoundtrack b{display:block;font-size:8px;line-height:1.6;color:#9be4ff}.menuSoundtrack small{display:block;font-size:6px;line-height:1.8;color:#8394b4}.menuSoundtrack button{flex-shrink:0;min-height:38px;padding:8px 10px;font:8px 'Silkscreen',monospace;color:#9be4ff;background:#14223b;border:1px solid #75ddff55;cursor:pointer}.menuSoundtrack button[aria-pressed=false]{color:#8d96ae;border-color:#424a60}.menuSoundtrack button:focus-visible{outline:2px solid #f2c14e;outline-offset:3px}@media(max-width:420px){.menuSoundtrack{padding:7px;gap:7px}.menuSoundtrack b{font-size:7px}.menuSoundtrack small{font-size:5px}.menuSoundtrack button{font-size:7px;padding:7px}}@media(max-height:520px){.menuSoundtrack{margin-bottom:5px;padding:4px 8px}.menuSoundtrack small{display:none}.menuSoundtrack button{min-height:28px}}

.hudSprite{display:inline-block!important;width:20px;height:20px;flex:none;vertical-align:middle;background-repeat:no-repeat;image-rendering:pixelated;margin:0!important;}
#deathRecap{position:fixed;z-index:15;right:calc(14px + var(--sar));top:calc(92px + var(--sat));width:min(320px,calc(100vw - 28px));max-height:calc(100dvh - 190px);overflow:auto;padding:14px;background-color:rgba(10,9,16,.96);border-color:#49313f;color:var(--ink);font:10px/1.5 'Silkscreen',monospace;box-shadow:0 4px 0 #05060d,0 12px 32px #0008;scrollbar-color:#49313f #10101b;}
#deathRecap[hidden]{display:none;}
#deathRecap .recapHead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:-6px;}
.recapEyebrow{font-size:9px;letter-spacing:1px;color:#cf8795;}
#deathRecap .recapClose{width:36px;height:36px;padding:0;border:1px solid var(--edge);background:#17131f;color:var(--dim);font:24px/1 monospace;cursor:pointer;}
#deathRecap .recapClose:hover,#deathRecap .recapClose:focus-visible{color:var(--ink);border-color:var(--gold);outline:1px solid var(--gold);}
#deathRecap .recapKiller{margin:8px 0 6px;font-size:10px;font-weight:normal;}
.recapKiller span,.recapKiller strong{display:block;}
.recapKiller span{color:var(--dim);font-size:9px;}
.recapKiller strong{margin-top:3px;color:#ff858b;font-size:18px;overflow-wrap:anywhere;}
#deathRecap .recapWindow{margin:0 0 12px;font-size:8px;color:var(--dim);}
.recapTotals{display:grid;grid-template-columns:1fr 1fr;border-block:1px solid var(--edge);padding:10px 0;margin-bottom:12px;gap:10px;}
.recapStat strong,.recapStat span{display:block;}
.recapStat strong{font-size:16px;color:var(--gold);font-weight:normal;}
.recapStat:last-child strong{color:var(--t0);}
.recapStat span{margin-top:4px;font-size:7px;color:var(--dim);}
.recapSources{display:grid;gap:12px;}
.recapSource{display:grid;grid-template-columns:36px minmax(0,1fr);gap:9px;align-items:center;}
.recapPortrait{display:grid;place-items:center;width:36px;height:38px;border:1px solid var(--edge);background:#17131f;overflow:hidden;}
.recapPortrait .heroPortrait{width:34px;height:36px;margin:0;}
.recapDetail{min-width:0;}
.recapSourceLabel{display:flex;justify-content:space-between;gap:8px;font-size:9px;}
.recapSourceLabel span{overflow-wrap:anywhere;}
.recapSourceLabel strong{font-weight:normal;white-space:nowrap;}
.recapTrack{height:5px;margin:5px 0;background:#252032;}
.recapTrack i{display:block;height:100%;background:#d76b7d;}
.recapShare{font-size:7px;color:var(--dim);}
@media(max-width:600px){#deathRecap{top:calc(72px + var(--sat));max-height:calc(100dvh - 160px);}.recapClose{min-height:36px;}}
#gameOptions{width:min(650px,100%);align-self:center;margin:12px 0;border:1px solid #34445f;border-radius:10px;background:linear-gradient(135deg,#121b30,#0b101c);color:#deebff;text-align:left;overflow:hidden;}
#gameOptions summary{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;min-height:56px;padding:14px 16px;list-style:none;font:10px/1.6 'Silkscreen',monospace;color:#cbeeff;}
#gameOptions summary::-webkit-details-marker{display:none;}
#gameOptions summary::after{content:'+';font:22px/1 monospace;color:#79deff;}
#gameOptions details[open]>summary::after,#gameOptions[open]>summary::after{content:'−';}
#gameOptions summary small{display:block;margin-top:3px;font:12px/1.5 Arial,sans-serif;color:#92a5c4;}
.optionsBody{padding:0 16px 16px;}
#gameOptions .optionRow{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0;padding:18px 0;border-top:1px solid #29364d;}
#gameOptions .optionRow[hidden]{display:none;}
.optionRow>span{min-width:0;}
body.touch #gameOptions .desktopCameraHint{display:none;}
.optionRow b{display:block;font:10px/1.6 'Silkscreen',monospace;color:#e2ebfa;}
.optionRow small,.optionsReportBody p{display:block;max-width:380px;margin:6px 0 0;font:13px/1.5 Arial,sans-serif;color:#9eafca;}
#aimAssistOption{appearance:none;position:relative;flex:0 0 50px;width:50px;height:30px;margin:7px 0;border:2px solid #53617b;border-radius:16px;background:#1b263a;cursor:pointer;}
#aimAssistOption::before{content:'';position:absolute;left:4px;top:4px;width:18px;height:18px;border-radius:50%;background:#9eafca;}
#aimAssistOption:checked{background:#174456;border-color:#79deff;}
#aimAssistOption:checked::before{left:24px;background:#9eeaff;}
#gameOptions select,#gameOptions button{min-height:44px;border:1px solid #405474;border-radius:5px;background:#17243b;color:#d3e6ff;cursor:pointer;}
#gameOptions select{flex:0 0 104px;width:104px;padding:8px;font:16px Arial,sans-serif;}
#gameOptions button{padding:10px 12px;font:12px/1.5 Arial,sans-serif;text-align:left;}
#gameOptions button:hover{background:#223653;border-color:#79deff;}
#gameOptions :is(summary,button,select,input):focus-visible{outline:2px solid #f2c14e;outline-offset:-3px;}
#gameOptions .optionsReports{border:1px solid #2b3b54;border-radius:6px;background:#090f1d;}
#gameOptions .optionsReports>summary{min-height:44px;padding:10px 12px;font-size:9px;color:#9eafca;}
.optionsReportBody{padding:0 12px 12px;}
.optionsReportBody p{margin:0 0 12px;}
.optionActions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
.optionActions+.optionActions{margin-top:12px;padding-top:12px;border-top:1px solid #29364d;}
#balanceActions button:last-child{color:#f4b2b9;}
#balanceReport{overflow-wrap:anywhere;}
@media(max-width:420px){.optionsBody{padding:0 12px 12px;}#gameOptions .optionRow{gap:12px;}.optionActions{grid-template-columns:minmax(0,1fr);}}
#objectiveHint{position:fixed;top:74px;left:50%;transform:translateX(-50%);max-width:min(520px,calc(100vw - 32px));width:max-content;box-sizing:border-box;z-index:7;pointer-events:none;text-align:center;}
body.touch:not(.inlobby) #objectiveHint{top:calc(164px + var(--sat));max-width:calc(100vw - var(--sal) - var(--sar) - 16px);}
@media(orientation:portrait){body.touch:not(.inlobby) #objectiveHint{top:calc(214px + var(--sat));}}
#objectiveHint[hidden]{display:none;}
#balanceReport{max-height:280px;overflow:auto;white-space:pre-wrap;font:12px/1.5 Arial,sans-serif;}
.tbtn>.hudSprite{width:34px;height:34px;}
/* Center sprite boxes independently of native button text baselines (Safari). */
body.touch .tbtn,body.touch #btnMute{display:flex;align-items:center;justify-content:center;padding:0;line-height:1;appearance:none;-webkit-appearance:none;}
body.touch #btnMute{width:44px;height:44px;}
body.touch .tbtn[hidden]{display:none!important;}
.effect>.hudSprite{width:16px;height:16px;}
#btnMute>.hudSprite{width:24px;height:24px;}

/* Readable vitals: values stay above the fill at every resource level. */
  #heroPanel{width:390px;max-width:44vw;}
  @media(max-width:600px) and (min-height:501px){
    body:not(.touch) #hudTop{align-items:flex-start;flex-direction:column;}
    body:not(.touch) #heroPanel{width:calc(100vw - 76px);max-width:none;flex:none;}
    body:not(.touch) #objectives{align-self:flex-end;margin-right:0;}
    body:not(.touch) #autoLvlLabel{max-width:100%;white-space:normal;}
  }
#heroPanel .bar{display:flex;flex-direction:column;align-items:stretch;gap:4px;}
#heroPanel .vitalHeading{display:flex;align-items:center;justify-content:space-between;gap:6px;color:#e5efff;font:700 12px/1.25 Arial,sans-serif;font-variant-numeric:tabular-nums;}
#heroPanel .vitalHeading b{display:block;width:auto;font:inherit;color:#a5ebbc;white-space:nowrap;}
#heroPanel #resourceLabel{color:#c4d3ff;}
#heroPanel .vitalHeading em{font-style:normal;text-align:right;}
#heroPanel .track{flex:auto;height:10px;border:1px solid #45536b;background:#080d18;}
#heroPanel .track:after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(25% - 1px),#080d1870 calc(25% - 1px),#080d1870 25%);}
#healthBar.low .vitalHeading,#healthBar.low .vitalHeading b{color:#ff9d9d;}
#healthBar.low .fill.life{background:#ed5c6a;}
#heroMeta{flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:5px 10px;}
#spTxt{color:#9aa9c1;}#spTxt.unspent{color:#ffe083;}
#soulTxt{color:#ceb0ff;display:inline-flex;align-items:center;gap:3px;}
#soulTxt img,#fragmentGuide img{image-rendering:pixelated;flex:none;}
#fragmentGuide{display:flex;align-items:flex-start;gap:8px;flex:none;padding:10px;background:#1d1530;border:1px solid #594273;font:12px/1.45 Arial,sans-serif;color:#c9bddc;}
#fragmentGuide b{color:#e4ceff;}#fragmentGuide p{margin:4px 0 0;}
.purchaseOptions{display:flex;flex-direction:column;align-items:flex-end;gap:6px;}
.fragmentBuy{padding:8px;border:1px solid #b58ae8;background:#382452;color:#ead8ff;font:11px Arial,sans-serif;cursor:pointer;white-space:nowrap;}
.fragmentBuy:disabled{opacity:.45;cursor:default;}.fragmentBuy:enabled:hover{background:#563578;}.fragmentBuy:focus-visible{outline:2px solid #fff;outline-offset:2px;}
body.touch:not(.inlobby) #heroPanel{width:190px;max-width:46vw;padding:5px;gap:4px;}
body.touch:not(.inlobby) #heroPanel .vitalHeading{font-size:10px;}
body.touch:not(.inlobby) #heroPanel .bar b{display:block;}
body.touch:not(.inlobby) #heroPanel .track{height:8px;}
body.touch:not(.inlobby) #heroMeta{white-space:normal;flex-wrap:wrap;font-size:7px;}
body.touch:not(.inlobby) #heroMeta #soulTxt{display:inline-flex!important;font:9px/1.3 Arial,sans-serif;}
body.touch .fragmentBuy{min-height:44px;}
@media(max-width:600px){#fragmentGuide{padding:6px;font-size:11px;}#heroPanel .vitalHeading{font-size:10px;}}
body.touch:not(.inlobby) #heroPanel{max-width:calc(50vw - 32px);}
/* Keep metadata in one row; full descriptions remain in the shop/tooltips. */
body.touch:not(.inlobby) #heroPanel #heroMeta{gap:4px 8px;}
body.touch:not(.inlobby) #heroMeta #spTxt,
body.touch:not(.inlobby) #heroMeta #soulTxt{font-size:0;display:inline-flex;align-items:center;gap:3px;}
body.touch:not(.inlobby) #heroMeta #spTxt span,
body.touch:not(.inlobby) #heroMeta #soulTxt span{font:9px/1.3 Arial,sans-serif;}
body.touch:not(.inlobby) #heroMeta .hudSprite,
body.touch:not(.inlobby) #heroMeta #soulTxt img{width:14px;height:14px;}
@media(orientation:landscape) and (max-height:360px){
  body.touch:not(.inlobby) #heroPanel{gap:2px;}
  body.touch:not(.inlobby) #heroPanel .bar{gap:2px;}
  body.touch:not(.inlobby) #autoLvlLabel{display:none;}
  body.touch.touch-active-items #itemsPanel{bottom:auto;top:calc(114px + var(--sat));}
  body.touch.touch-active-items #itemsPanel .itemSlot{width:36px;height:36px;}
}
#fragmentGuide summary{cursor:pointer;color:#c8a7ef;padding:4px 0;}
#fragmentGuide details[open]{max-height:none;}
#shopContent{min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:10px;}
#shopContent #shopList{overflow:visible;flex:none;}
#shopList .item[hidden],#creditUpgradeTitle[hidden]{display:none;}
.shopUpgradeParts{color:var(--hud-focus);font:var(--hud-text-sm)/var(--hud-leading) var(--hud-font-body);margin-top:var(--hud-space-1);}
#shopList .combined .desc{font:var(--hud-text-sm)/var(--hud-leading) var(--hud-font-body);color:var(--hud-text-muted);}
@media(max-width:600px){
  #shopList .combined{grid-template-columns:32px minmax(0,1fr);gap:var(--hud-space-2);}
  #shopList .combined .purchaseOptions{grid-column:2;align-items:flex-start;}
}
#shopContent #fragmentGuide{background:#112631;border-color:#27647a;}
#shopContent #fragmentGuide b,#shopContent #fragmentGuide summary{color:#8decff;}
#coreProgressMeter{display:block;width:100%;height:8px;margin:6px 0;accent-color:#66e8ff;}
#coreUpgradeSection{flex:none;border:1px solid #27647a;padding:8px;color:#d8f7ff;font:12px/1.4 Arial,sans-serif;}
#coreUpgradeSection summary{cursor:pointer;padding:8px 0;color:#8decff;font-weight:bold;}
#coreStatus{margin:4px 0 8px;color:#b8cbd4;}
.coreUpgradeRow{padding:8px 0;border-top:1px solid #28414e;}
.coreItemLabel{display:flex;align-items:center;gap:8px;margin-bottom:6px;}
.coreItemLabel .itemArt{width:28px;height:28px;flex:none;}
.coreChoices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;}
.coreChoice{min-height:52px;padding:7px 4px;background:#133744;border:1px solid #5acbe1;color:#dffaff;cursor:pointer;font:12px Arial,sans-serif;touch-action:manipulation;}
.coreChoice small{display:block;font-size:10px;line-height:1.4;margin-top:4px;}
.coreChoice:disabled{opacity:.5;cursor:default;}.coreChoice:focus-visible{outline:2px solid white;outline-offset:2px;}
.coreChoice:enabled:hover{background:#245464;}.coreInstalled{color:#82e5f7;}
.coreSocket{position:absolute;right:2px;top:0;color:#66e8ff;font:12px Arial,sans-serif;text-shadow:0 1px 2px black;}
#soulTxt{color:#8decff;}.creditShopTitle{padding-top:4px;}
body:has(#shop[style*="flex"]) #tutBox{visibility:hidden;pointer-events:none;}
#btnScores{pointer-events:auto;display:flex;align-items:center;justify-content:center;gap:var(--hud-space-2);width:100%;margin:0;font-size:var(--hud-text-xs);padding:var(--hud-space-1);}
#btnScores[hidden],#matchScoreboard[hidden]{display:none;}
#btnScores img{image-rendering:pixelated;}
#matchScoreboard{position:fixed;inset:0;z-index:19;display:flex;align-items:center;justify-content:center;padding:12px;background:rgba(6,5,12,.75);}
.matchScorePanel{box-sizing:border-box;width:max-content;max-width:100%;max-height:90dvh;overflow:auto;padding:20px;border:2px solid var(--gold);background:#12101f;box-shadow:4px 4px 0 #000;}
.matchScoreHeading{display:flex;align-items:center;justify-content:space-between;gap:18px;}
.matchScoreHeading h2{margin:0;font-size:18px;color:var(--gold);}
.matchScorePanel p{font-size:9px;color:var(--dim);line-height:1.7;}
#matchStatsTable{max-width:100%;}
@media(max-width:600px){.matchScorePanel{padding:10px;}.matchScoreHeading h2{font-size:13px;}#matchStatsTable th,#matchStatsTable td{padding:5px 7px;}}

/* Keyboard shortcut badges do not describe touch controls. */
body.touch #abilities .k,body.touch #itemsPanel .k,body.touch .hdAb .k{display:none;}
body.touch #specBar i{display:none;}

.hotkeySettings{border-top:1px solid #29364d;padding:18px 0;}
.hotkeySettings summary{cursor:pointer;font:10px/1.6 Silkscreen,monospace;color:#e2ebfa;}
.hotkeySettings p{font:13px/1.5 Arial,sans-serif;color:#9eafca;}
.hotkeyGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 18px;}
.hotkeyRow{display:flex;align-items:center;justify-content:space-between;gap:8px;font:13px/1.5 Arial,sans-serif;}
.hotkeyRow button{min-width:72px;}
.hotkeyRow button[aria-pressed="true"]{outline:2px solid #67dcff;}
@media(max-width:480px){.hotkeyGrid{grid-template-columns:1fr;}}

/* Announcements share the phone screen with fixed vitals and the minimap. */
body.touch:not(.inlobby) #banner{
  position:fixed;top:calc(164px + var(--sat));
  left:calc(50% + (var(--sal) - var(--sar))/2);
  width:calc(100vw - var(--sal) - var(--sar) - 16px);max-width:520px;
  box-sizing:border-box;white-space:normal;overflow-wrap:anywhere;
  text-align:center;
}

@media(orientation:portrait){
  body.touch:not(.inlobby) #banner{top:calc(214px + var(--sat));}
}

/* Recap shares the death-camera dock instead of covering the score HUD. */
#deathCameraHud{width:min(340px,calc(100vw - 24px));max-height:calc(100dvh - 250px);overflow-y:auto;box-sizing:border-box;}#deathCameraHud #deathRecap{position:static;transform:none;width:100%;max-height:none;box-sizing:border-box;margin:10px 0 0;padding:10px;text-align:left;box-shadow:none;}#deathCameraHud #deathRecap[hidden]{display:none;}@media(max-height:500px){#deathCameraHud{left:50%;bottom:110px;transform:translateX(-50%);width:300px;max-width:calc(100vw - 320px);max-height:calc(100dvh - 220px);padding:7px;}#deathCameraHud .btn{min-height:32px;}}

@media(max-width:600px) and (min-height:501px){body.touch #deathCameraHud{bottom:calc(200px + var(--sab));max-height:calc(100dvh - 310px - var(--sat) - var(--sab));}}

.matchHistoryPlayers{grid-column:1 / -1;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:6px;min-width:0;}
.matchHistoryPlayer{display:flex;align-items:center;gap:8px;min-width:0;padding:7px;background:#172334;border:1px solid #34445b;border-radius:4px;}
.matchHistoryPlayer .heroPortrait,.matchHistoryUnknown{width:36px;height:36px;flex-shrink:0;border-radius:4px;}
.matchHistoryPlayer .heroPortrait img{image-rendering:pixelated;}
.matchHistoryPlayer>span:nth-child(2){min-width:0;flex:1;}
.matchHistoryPlayer b{display:block;overflow-wrap:anywhere;color:#e7edf7;font-size:8px;}
.matchHistoryPlayer small,.matchHistoryPlayers>small{display:block;color:#b4bfd7;font-size:8px;}
.matchHistoryWinner{color:#ffd879;font-size:16px;}
.matchHistoryUnknown{display:grid;place-items:center;background:#101827;font-size:20px;}