/* Layout: jogo em tela cheia; cena 3D ao fundo, HUD ancorado nas bordas (topo: placar; base: barra do campeão; canto: minimapa) */
:root{
  --night:#0a0f14; --slate:#111a22; --slate-2:#182531; --line:#2a3b4a;
  --ink:#e9eff1; --dim:#8ea3ad; --brass:#d3ab5d; --brass-dim:#7d6436;
  --arcane:#5fe6d8; --ally:#4f9dff; --enemy:#ff4d61; --self:#86dc52; --mana:#3f7dff; --xp:#b48cff; --gold:#f2c94c;
  --font-display:'Marcellus SC','Trajan Pro',Georgia,serif;
  --font-ui:'Barlow Semi Condensed','Arial Narrow','Roboto Condensed',system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--night);color:var(--ink);font-family:var(--font-ui);font-size:14px;overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:none}
[hidden]{display:none!important}
button,input{font-family:inherit;color:inherit}
button:focus-visible,input:focus-visible{outline:2px solid var(--arcane);outline-offset:2px}
html{background:var(--night)}
/* lvh: altura máxima da tela, para o jogo cobrir também a área atrás das barras do navegador no celular */
#app{position:fixed;left:0;top:0;width:100vw;height:100vh;height:100lvh}
.iostip{margin:0;font-size:13px;line-height:1.4;color:#c5d2d8;padding:8px 10px;border:1px dashed var(--brass-dim);border-radius:4px}
.iostip b{color:var(--brass)}
#app canvas{display:block;width:100%;height:100%}
#app.dead canvas{filter:grayscale(.85) brightness(.7)}
#app.attack canvas{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M3 3 L19 19' stroke='%23200' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M3 3 L19 19' stroke='%23ff4d61' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M15 22 L22 15 M20 20 L25 25' stroke='%23d3ab5d' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") 3 3,crosshair}
#bars,#floaters{position:fixed;inset:0;pointer-events:none;overflow:hidden}

.panel{background:linear-gradient(180deg,rgba(24,37,49,.95),rgba(11,17,23,.95));border:1px solid var(--line);box-shadow:0 6px 24px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.04)}
.panel.brass{border-color:var(--brass-dim)}

/* barras sobre as unidades */
.ubar{position:absolute;left:0;top:0;will-change:transform;display:flex;align-items:center;gap:3px}
.ubar .track{position:relative;height:6px;background:#06090c;border:1px solid #000;overflow:hidden}
.ubar .track i,.ubar .mtrack i{position:absolute;inset:0;transform-origin:left center;display:block}
.ubar.enemy .hp{background:linear-gradient(#ff7383,#c3253a)}
.ubar.ally .hp{background:linear-gradient(#7db8ff,#2c6bd1)}
.ubar.self .hp{background:linear-gradient(#a6ee6e,#4c9e22)}
.ubar.k-melee .track,.ubar.k-caster .track{width:42px;height:5px}
.ubar.k-tower .track{width:84px;height:8px}
.ubar.k-nexus .track{width:112px;height:9px}
.ubar.locked{opacity:.5}
.ubar.locked::after{content:'';width:9px;height:9px;border:2px solid var(--ink);border-radius:2px}
.ubar.k-champ .stack{display:grid;gap:1px}
.ubar.k-champ .track{width:92px;height:9px}
.ubar.k-champ .track::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(var(--seg,10px) - 1px),rgba(0,0,0,.6) calc(var(--seg,10px) - 1px) var(--seg,10px))}
.ubar .mtrack{position:relative;width:92px;height:3px;background:#06090c;border:1px solid #000;border-top:0;overflow:hidden}
.ubar .mp{background:var(--mana)}
.ubar .lv{font:700 11px/1 var(--font-ui);background:#0b1218;border:1px solid var(--brass-dim);color:var(--brass);min-width:18px;height:18px;display:grid;place-items:center;border-radius:2px}
.ubar.enemy .lv{border-color:#7a2a35;color:#ff9aa6}

/* textos flutuantes */
.ft{position:absolute;left:0;top:0;will-change:transform}
.ft span{display:block;transform:translate(-50%,-50%);font:700 15px var(--font-ui);text-shadow:0 1px 0 #000,0 0 6px rgba(0,0,0,.8);animation:rise .9s ease-out forwards;white-space:nowrap}
.ft.phys span{color:#fff}
.ft.magic span{color:#c9a3ff}
.ft.crit span{color:#ffb347;font-size:20px}
.ft.hurt span{color:var(--enemy)}
.ft.heal span{color:#9cf07a}
.ft.gold span{color:var(--gold);font-size:13px}
.ft.lvl span{color:var(--arcane);font-family:var(--font-display);font-size:20px}
.ft.info span{color:var(--dim);font-size:12px}
@keyframes rise{0%{opacity:0;margin-top:0}12%{opacity:1}100%{opacity:0;margin-top:-34px}}

/* topo */
#top{position:fixed;top:calc(8px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:18px;padding:6px 18px;border-radius:4px;font-variant-numeric:tabular-nums;white-space:nowrap}
#top .clock{font-family:var(--font-display);font-size:20px;letter-spacing:.04em;color:var(--brass)}
#top .side{display:flex;align-items:center;gap:6px;font-weight:600;font-size:15px}
#top .side svg{width:14px;height:16px}
#top .blue{color:var(--ally)} #top .red{color:var(--enemy)}
#top .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--dim);font-weight:600}
#top .kills b{font-size:16px}

#stats{position:fixed;top:calc(8px + env(safe-area-inset-top,0px));left:16px;display:grid;grid-template-columns:auto auto;gap:3px 10px;padding:8px 12px;border-radius:4px;font-variant-numeric:tabular-nums;margin:0}
#stats dt{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);font-weight:600}
#stats dd{margin:0;text-align:right;font-weight:700}

#tools{position:fixed;top:calc(8px + env(safe-area-inset-top,0px));right:16px;display:flex;gap:6px;z-index:45}
.tbtn{background:var(--slate);border:1px solid var(--line);border-radius:4px;padding:6px 10px;font-weight:600;font-size:13px;cursor:pointer;display:flex;gap:6px;align-items:center}
.tbtn:hover{border-color:var(--brass-dim)}
.tbtn kbd{font:600 11px var(--font-ui);color:var(--brass);border:1px solid var(--brass-dim);border-radius:2px;padding:0 4px}
.tbtn.on{border-color:var(--arcane);color:var(--arcane)}
#netBadge{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:6px 10px;border-radius:4px;border:1px solid var(--line);background:var(--slate);color:var(--dim)}
#netBadge.red{color:var(--enemy);border-color:#5c2430}
#netBadge.blue{color:var(--ally);border-color:#24406a}

#announce{position:fixed;top:calc(64px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);text-align:center;pointer-events:none;width:min(560px,calc(100vw - 32px))}
#announce .a{animation:ann 3s ease forwards}
#announce h2{margin:0;font:400 28px/1.1 var(--font-display);color:var(--brass);text-shadow:0 2px 12px rgba(0,0,0,.9);text-wrap:balance}
#announce p{margin:4px 0 0;font-weight:600;color:var(--ink);text-shadow:0 1px 6px #000}
@keyframes ann{0%{opacity:0;transform:translateY(-6px)}10%{opacity:1;transform:none}80%{opacity:1}100%{opacity:0}}

/* HUD inferior */
#hud{position:fixed;left:50%;bottom:calc(10px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:6px;max-width:calc(100vw - 32px);--abc:var(--arcane)}
.pwrap{position:relative;flex:none}
.portrait{width:74px;height:74px;border:2px solid var(--brass);border-radius:50%;overflow:hidden;background:radial-gradient(circle at 50% 35%,#27507d,#0a131d);display:block;padding:0;cursor:help}
.portrait.red{background:radial-gradient(circle at 50% 35%,#6e2333,#1a0a0f)}
.portrait svg{width:100%;height:100%;display:block}
.plvl{position:absolute;right:-4px;bottom:-2px;min-width:24px;height:24px;border-radius:50%;background:#0b1218;border:2px solid var(--brass);display:grid;place-items:center;font:700 13px var(--font-ui);color:var(--ink);pointer-events:none}
.core{display:flex;flex-direction:column;gap:5px;min-width:0}
.abilities{display:flex;gap:7px}
.ab{width:54px;height:54px;position:relative;border:1px solid var(--brass-dim);background:radial-gradient(circle at 50% 40%,#16303a,#0b141b);border-radius:4px;color:var(--abc);padding:0;cursor:pointer;display:grid;place-items:center;overflow:hidden;flex:none}
.ab .ic{display:grid;place-items:center}
.ab svg{width:32px;height:32px}
.ab .key{position:absolute;left:3px;top:1px;font:700 11px var(--font-ui);color:var(--ink);text-shadow:0 1px 2px #000}
.ab .cost{position:absolute;right:3px;bottom:1px;font:600 10px var(--font-ui);color:#9cbcff;text-shadow:0 1px 2px #000}
.ab .mask{position:absolute;inset:0;background:conic-gradient(transparent calc((1 - var(--p,0)) * 360deg),rgba(4,7,10,.8) 0);pointer-events:none}
.ab .cdt{position:absolute;inset:0;display:grid;place-items:center;font:700 18px var(--font-ui);color:#fff;text-shadow:0 1px 3px #000;pointer-events:none;font-variant-numeric:tabular-nums}
.ab.nomana{color:#4d6c9a;border-color:#2b4570}
.ab.locked{filter:grayscale(1);opacity:.45}
.ab.ready{box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.ab:hover{border-color:var(--brass)}
.bar{position:relative;height:15px;background:#060c11;border:1px solid #213040;border-radius:2px;overflow:hidden}
.bar i{position:absolute;inset:0;transform-origin:left center;background:linear-gradient(#7fdd4d,#3d8f1f);display:block}
.bar.mp i{background:linear-gradient(#5d97ff,#2550c2)}
.bar.xp{height:4px;border-color:#1c2733}
.bar.xp i{background:var(--xp)}
.bar span{position:relative;display:block;text-align:center;font:600 12px/15px var(--font-ui);font-variant-numeric:tabular-nums;text-shadow:0 1px 2px #000}
.side2{display:flex;flex-direction:column;gap:6px;flex:none}
.inv{display:grid;grid-template-columns:repeat(3,32px);grid-auto-rows:32px;gap:4px}
.slot{border:1px solid var(--line);background:#0a1218;border-radius:3px;display:grid;place-items:center}
.slot svg{width:22px;height:22px}
.goldrow{display:flex;gap:6px;align-items:center;justify-content:space-between}
.goldv{font-weight:700;color:var(--gold);font-variant-numeric:tabular-nums;font-size:15px;display:flex;align-items:center;gap:4px}
.goldv::before{content:'';width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff3b0,#c99a1c);display:inline-block}
.shopbtn{background:#1d1a10;border:1px solid var(--brass-dim);color:var(--brass);border-radius:3px;font-weight:700;font-size:12px;padding:3px 8px;cursor:pointer;letter-spacing:.04em}
.shopbtn:hover{border-color:var(--brass)}

#minimap{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));width:280px;height:66px;border:1px solid var(--brass-dim);border-radius:3px;background:#0f1c14;cursor:pointer;box-shadow:0 6px 24px rgba(0,0,0,.5)}

#toast{position:fixed;left:50%;bottom:calc(122px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);pointer-events:none;font-weight:600;color:#ffd0d6;text-shadow:0 1px 4px #000;font-size:15px;white-space:nowrap}
#toast .t{animation:toast 1.6s ease forwards}
@keyframes toast{0%{opacity:0}10%{opacity:1}75%{opacity:1}100%{opacity:0}}
#recall{position:fixed;left:50%;bottom:calc(128px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:220px;padding:6px 10px;border-radius:4px;text-align:center;font-weight:600;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--arcane)}
#recall .bar{margin-top:4px;height:6px}
#recall .bar i{background:var(--arcane)}
#death{position:fixed;left:50%;top:40%;transform:translate(-50%,-50%);text-align:center;pointer-events:none}
#death h2{margin:0;font:400 34px var(--font-display);color:var(--ink);text-shadow:0 2px 14px #000}
#death p{margin:6px 0 0;font-size:16px;font-weight:600;color:var(--dim);text-shadow:0 1px 6px #000}

#tip{position:fixed;max-width:290px;padding:10px 12px;border-radius:4px;pointer-events:none;z-index:30}
#tip h4{margin:0 0 2px;font:400 16px var(--font-display);color:var(--brass)}
#tip h4 small{color:var(--dim);font-family:var(--font-ui);font-size:13px}
#tip .meta{font-size:12px;color:#9cbcff;font-weight:600;margin-bottom:6px}
#tip p{margin:0;line-height:1.35;color:var(--ink)}
#tip b{color:#ffd28a}

#shop{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(680px,calc(100vw - 32px));max-height:calc(100% - 180px);overflow:auto;border-radius:6px;padding:14px 16px;z-index:20}
#shop header{display:flex;align-items:center;gap:12px;margin-bottom:4px}
#shop h3{margin:0;font:400 22px var(--font-display);color:var(--brass);flex:1}
.shopgold{font-weight:700;color:var(--gold);font-size:17px;font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:5px}
.shopgold::before{content:'';width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff3b0,#c99a1c)}
#shop .where{font-size:13px;font-weight:600}
#shop .where.ok{color:var(--self)} #shop .where.no{color:var(--enemy)}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.tab{background:#0d161e;border:1px solid var(--line);border-radius:4px;padding:6px 12px;font-weight:700;font-size:13px;cursor:pointer;color:var(--dim);display:flex;align-items:center;gap:6px}
.tab::before{content:'';width:8px;height:8px;border-radius:2px;background:var(--cc)}
.tab[aria-selected="true"]{color:var(--ink);border-color:var(--cc);background:rgba(255,255,255,.04)}
.cathint{margin:8px 0 0;font-size:13px;color:var(--dim)}
.items{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:6px;margin-top:8px}
.item{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:10px;align-items:center;padding:6px 8px;border:1px solid var(--line);border-radius:4px;background:rgba(0,0,0,.2)}
.item.owned{border-color:var(--brass-dim)}
.tierhead{grid-column:1/-1;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--brass);margin-top:6px;padding-bottom:2px;border-bottom:1px solid rgba(125,100,54,.35)}
.recipe{display:flex;align-items:center;gap:3px;margin-top:4px}
.recipe .comp{width:20px;height:20px;border:1px solid var(--line);border-radius:2px;display:grid;place-items:center;background:#0a1218;opacity:.55}
.recipe .comp svg{width:14px;height:14px}
.recipe .comp.got{opacity:1;border-color:var(--self);box-shadow:0 0 0 1px rgba(134,220,82,.35)}
.recipe .plus{font-size:11px;color:var(--dim);font-weight:700;margin-left:3px;font-variant-numeric:tabular-nums}
.buy.discount{color:var(--self);border-color:#3d6b2a}
.item .ic,.sell .ic{width:38px;height:38px;border:1px solid var(--brass-dim);border-radius:3px;display:grid;place-items:center;background:#0a1218}
.item .ic svg,.sell .ic svg{width:26px;height:26px}
.item h5{margin:0;font-size:15px;font-weight:700}
.item p{margin:1px 0 0;font-size:12.5px;color:var(--dim);line-height:1.3}
.invsec{margin-top:14px;padding-top:10px;border-top:1px solid var(--line)}
.invhead{font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--dim);display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.invhead .hint{letter-spacing:0;text-transform:none;font-weight:600}
.sellgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:6px;margin-top:8px}
.sell{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:8px;align-items:center;padding:5px 6px;border:1px solid var(--line);border-radius:4px}
.sell span{font-size:13px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sell.empty{opacity:.4;grid-template-columns:38px 1fr}
.sellbtn{background:#1a1013;border:1px solid #5c2430;color:#ff9aa6;border-radius:3px;padding:4px 8px;font-weight:700;font-size:12px;cursor:pointer;font-variant-numeric:tabular-nums}
.sellbtn:disabled{opacity:.4;cursor:not-allowed}
.buy{background:#1d1a10;border:1px solid var(--brass-dim);color:var(--gold);border-radius:3px;padding:6px 10px;font-weight:700;cursor:pointer;min-width:68px;font-variant-numeric:tabular-nums}
.buy:disabled{opacity:.4;cursor:not-allowed}
.buy:not(:disabled):hover{border-color:var(--brass)}
.x{background:none;border:1px solid var(--line);border-radius:3px;cursor:pointer;padding:2px 8px;font-weight:700}

/* telas de início, ajuda e fim */
.overlay{position:fixed;inset:0;z-index:40;overflow:auto;background:radial-gradient(ellipse at 30% 40%,rgba(10,15,20,.5),rgba(6,9,12,.93) 70%);display:flex;align-items:center;justify-content:center;padding:24px 16px}
.ov-inner{width:min(1040px,100%);display:grid;grid-template-columns:1.1fr 1fr;gap:28px;align-items:start;margin:auto}
.eyebrow{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--arcane);font-weight:700}
.ov-title{margin:6px 0 10px;font:400 clamp(44px,8vw,84px)/.95 var(--font-display);color:var(--ink);letter-spacing:.01em;text-wrap:balance}
.ov-title em{font-style:normal;color:var(--brass)}
.lead{font-size:17px;line-height:1.45;color:#c5d2d8;max-width:48ch;margin:0 0 16px}
.picker{display:grid;gap:10px}
.pick-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pick{display:grid;justify-items:center;gap:5px;padding:10px 6px;border:1px solid var(--line);border-radius:6px;background:rgba(10,16,22,.85);cursor:pointer;text-align:center;--abc:var(--arcane)}
.pick .pp{width:60px;height:60px;border-radius:50%;overflow:hidden;border:2px solid var(--brass-dim);background:radial-gradient(circle at 50% 35%,#27507d,#0a131d)}
.pick .pp svg{width:100%;height:100%;display:block}
.pick strong{font-size:16px}
.pick span{font-size:12px;color:var(--dim);font-weight:600;line-height:1.2}
.pick:hover{border-color:var(--brass-dim)}
.pick[aria-pressed="true"]{border-color:var(--brass);box-shadow:0 0 0 1px var(--brass),0 0 24px rgba(211,171,93,.22);background:rgba(38,31,16,.7)}
.pick[aria-pressed="true"] .pp{border-color:var(--brass)}
.champ{padding:14px 16px;border-radius:6px;--abc:var(--arcane)}
.champ h3{margin:0;font:400 22px var(--font-display);color:var(--brass)}
.champ .role{font-size:13px;color:var(--dim);font-weight:600;margin-bottom:10px}
.kit{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.kit li{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:start}
.kit .k{width:30px;height:30px;border:1px solid var(--brass-dim);border-radius:3px;display:grid;place-items:center;color:var(--abc);font-weight:700;background:#0b141b}
.kit strong{display:block;font-size:15px}
.kit span{font-size:13px;color:var(--dim);line-height:1.35}
.rcol{display:grid;gap:14px}
.play{padding:16px;border-radius:6px;display:grid;gap:12px}
.play h3,.controls h3{margin:0;font:400 20px var(--font-display);color:var(--brass)}
.online{display:grid;gap:10px;padding-top:12px;border-top:1px solid var(--line)}
.online .lbl{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);font-weight:700}
.joinrow{display:flex;gap:8px;flex-wrap:wrap}
.joinrow input{flex:1;min-width:120px;background:#070c10;border:1px solid var(--line);border-radius:4px;padding:10px 12px;font:700 18px var(--font-ui);letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.joinrow input::placeholder{letter-spacing:.05em;font-weight:500;color:#5d717c;text-transform:none}
.btn{background:linear-gradient(180deg,#e2bd6e,#b48a3b);color:#1a1307;border:0;border-radius:4px;padding:12px 22px;font:700 15px var(--font-ui);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;box-shadow:0 4px 18px rgba(211,171,93,.2)}
.btn:hover{filter:brightness(1.08)}
.btn.alt{background:#132029;color:var(--ink);border:1px solid var(--brass-dim);box-shadow:none}
.btn.alt:hover{border-color:var(--brass)}
.msg{margin:0;font-size:14px;font-weight:600;color:var(--dim);min-height:1.2em}
.msg.bad{color:#ff8a98}
.roomcode{font:400 54px/1 var(--font-display);letter-spacing:.14em;color:var(--brass);user-select:text;-webkit-user-select:text}
.linkrow{display:flex;gap:8px}
.linkrow input{flex:1;min-width:0;background:#070c10;border:1px solid var(--line);border-radius:4px;padding:8px 10px;font-size:13px;color:#c5d2d8;user-select:text;-webkit-user-select:text}
.waiting{display:flex;gap:10px;align-items:center;font-weight:600;color:var(--ink)}
.waiting::before{content:'';flex:none;width:10px;height:10px;border-radius:50%;background:var(--arcane);box-shadow:0 0 0 0 rgba(95,230,216,.6);animation:pulse 1.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(95,230,216,.6)}100%{box-shadow:0 0 0 12px rgba(95,230,216,0)}}
.controls{padding:14px 16px;border-radius:6px}
.controls table{width:100%;border-collapse:collapse;font-size:14px;margin-top:8px}
.controls td{padding:5px 0;border-bottom:1px solid rgba(42,59,74,.6);vertical-align:top}
.controls td:first-child{width:40%;color:var(--ink);font-weight:700;padding-right:10px}
.controls td:last-child{color:#c5d2d8}
.help-card{width:min(560px,100%);margin:auto}
.help-card .cta{margin-top:14px}
.hint{font-size:13px;color:var(--dim)}
.end-card{width:min(460px,100%);text-align:center;padding:28px 24px;border-radius:8px;margin:auto}
.end-card h2{margin:6px 0 0;font:400 64px/1 var(--font-display)}
.end-card.win h2{color:var(--brass)} .end-card.lose h2{color:var(--enemy)} .end-card.gone h2{color:var(--ink);font-size:44px}
.end-card dl{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;margin:20px 0;text-align:left;font-variant-numeric:tabular-nums}
.end-card dt{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);font-weight:600}
.end-card dd{margin:0;font-size:20px;font-weight:700}
.end-card .cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
/* celular deitado (paisagem): tudo mais compacto para sobrar espaço para o jogo */
@media (max-height:520px) and (orientation:landscape){
  #stats{display:none}
  #top{top:calc(4px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);padding:3px 10px;gap:10px}
  #top .clock{font-size:16px}
  #top .side{font-size:13px}
  #top .lbl{display:none}
  #tools{top:calc(4px + env(safe-area-inset-top,0px));right:calc(8px + env(safe-area-inset-right,0px));gap:4px}
  .tbtn{padding:4px 7px;font-size:12px}
  #tools .tl,#netBadge{display:none}
  #minimap{top:calc(38px + env(safe-area-inset-top,0px));bottom:auto;right:calc(8px + env(safe-area-inset-right,0px));width:170px;height:40px}
  #hud{bottom:calc(4px + env(safe-area-inset-bottom,0px));padding:5px 8px;gap:8px}
  .portrait{width:44px;height:44px}
  .plvl{min-width:20px;height:20px;font-size:11px}
  .abilities{gap:5px}
  .ab{width:46px;height:46px}
  .ab svg{width:26px;height:26px}
  .core{gap:3px}
  .bar{height:12px}
  .bar span{font-size:10px;line-height:12px}
  .bar.xp{height:3px}
  .inv{grid-template-columns:repeat(6,22px);grid-auto-rows:22px;gap:3px}
  .slot svg{width:15px;height:15px}
  .side2{gap:4px}
  .goldv{font-size:13px}
  .shopbtn{font-size:11px;padding:2px 6px}
  #announce{top:calc(40px + env(safe-area-inset-top,0px))}
  #announce h2{font-size:19px}
  #announce p{font-size:12px}
  #toast,#recall{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  #death h2{font-size:24px}
  #shop{max-height:calc(100% - 12px);padding:10px 12px}
  .items{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
  .overlay{align-items:flex-start;padding:10px calc(12px + env(safe-area-inset-right,0px)) 10px calc(12px + env(safe-area-inset-left,0px))}
  .ov-inner{grid-template-columns:1.1fr 1fr;gap:14px}
  .ov-title{font-size:38px;margin:2px 0 6px}
  .lead{font-size:14px;margin-bottom:8px}
  .end-card{padding:14px 16px}
  .end-card h2{font-size:40px}
  .end-card dl{margin:10px 0;gap:6px 12px}
  .end-card dd{font-size:16px}
}
@media (max-width:620px) and (orientation:portrait){
  #tools{right:8px;gap:4px}
  .tbtn{padding:5px 7px;font-size:12px}
  #top{top:calc(46px + env(safe-area-inset-top,0px));left:8px;transform:none}
  #minimap{top:calc(46px + env(safe-area-inset-top,0px));right:8px;width:150px;height:36px}
  #announce{top:calc(92px + env(safe-area-inset-top,0px))}
  body #rotateHint{top:calc(92px + env(safe-area-inset-top,0px))}
}
#rotateHint{display:none;position:fixed;left:16px;right:16px;top:calc(56px + env(safe-area-inset-top,0px));z-index:35;padding:10px 12px;border-radius:6px;align-items:center;gap:10px;font-weight:600}
#rotateHint svg{flex:none;color:var(--arcane)}
#rotateHint span{flex:1}
@media (orientation:portrait) and (pointer:coarse){ body.playing:not(.hint-off) #rotateHint{display:flex} }
#btnFull{display:none}
@media (pointer:coarse){ body.can-full #btnFull{display:flex} }
body.inmenu #stats,body.inmenu #hud,body.inmenu #top,body.inmenu #minimap{visibility:hidden}
/* conta e ranking */
.acct{padding:14px 16px;border-radius:6px;display:grid;gap:10px}
.acct h3{margin:0;font:400 20px var(--font-display);color:var(--brass)}
.acct-tabs{display:flex;gap:6px}
.acct-tabs button{flex:1;background:#0d161e;border:1px solid var(--line);border-radius:4px;padding:7px;font-weight:700;cursor:pointer;color:var(--dim)}
.acct-tabs button[aria-selected="true"]{color:var(--ink);border-color:var(--brass)}
.acct-form{display:grid;grid-template-columns:1fr 1fr auto;gap:8px}
.acct-form input{min-width:0;background:#070c10;border:1px solid var(--line);border-radius:4px;padding:9px 10px;font:600 15px var(--font-ui);color:var(--ink)}
.acct-form input::placeholder{color:#5d717c}
.acct .hint{margin:0}
.acct-card{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--lc);border-radius:6px;background:linear-gradient(90deg,color-mix(in srgb,var(--lc) 14%,transparent),transparent 70%)}
.acct-card .badge{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:#0a1218;border:2px solid var(--lc)}
.acct-card .who{display:grid;min-width:0}
.acct-card .who strong{font-size:18px;overflow:hidden;text-overflow:ellipsis}
.acct-card .who span{font-size:13px;color:var(--lc);font-weight:700}
.acct-card .tro{display:flex;align-items:center;gap:5px;font-size:22px;font-weight:700;color:var(--gold);font-variant-numeric:tabular-nums}
.acct-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.acct-row .rec{font-size:13px;color:var(--dim);font-weight:600}
.acct-row .sp{flex:1}
.rank-card{width:min(560px,100%);margin:auto;padding:16px 18px;border-radius:8px;display:grid;gap:10px}
.rank-card header{display:flex;justify-content:space-between;align-items:center;gap:12px}
.rank-card h3{margin:0;font:400 24px var(--font-display);color:var(--brass)}
.rank-card .hint{margin:0}
.rank-list{display:grid;gap:4px;max-height:min(60vh,520px);overflow:auto}
.rrow{display:grid;grid-template-columns:34px 26px minmax(0,1fr) auto 76px;gap:8px;align-items:center;padding:6px 10px;border:1px solid var(--line);border-radius:4px;background:rgba(0,0,0,.2);font-variant-numeric:tabular-nums}
.rrow .pos{font-weight:700;color:var(--dim);text-align:right}
.rrow.top1 .pos{color:#f2c94c} .rrow.top2 .pos{color:#c7d0d9} .rrow.top3 .pos{color:#c98b5a}
.rrow .lg{display:grid;place-items:center}
.rrow .nm{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rrow .wl{font-size:12px;color:var(--dim);font-weight:600}
.rrow .tr{display:flex;gap:4px;align-items:center;justify-content:flex-end;color:var(--gold);font-weight:700}
.rrow.mine{border-color:var(--arcane);background:rgba(95,230,216,.08)}
.rank-foot{margin:0;font-weight:600;color:var(--ink)}
.trophyres{margin:-6px 0 14px;font-weight:700;font-size:16px;color:var(--ink)}
.trophyres.up{color:var(--self)} .trophyres.down{color:var(--enemy)} .trophyres.bad{color:#ff8a98} .trophyres.muted{color:var(--dim);font-size:14px}
@media (max-width:520px){ .acct-form{grid-template-columns:1fr} .rrow{grid-template-columns:28px 22px minmax(0,1fr) 64px} .rrow .wl{display:none} }
#err{position:fixed;inset:0;display:grid;place-items:center;padding:16px;text-align:center;font-size:16px;z-index:60;background:var(--night)}

@media (max-width:1180px){
  #tools .tl{display:none}
  #netBadge{display:none}
}
@media (max-width:860px){
  #stats{display:none}
  #minimap{top:calc(52px + env(safe-area-inset-top,0px));bottom:auto;width:190px;height:45px}
  #top{left:16px;transform:none;gap:12px;padding:5px 12px}
  #tools .tl,#netBadge{display:none}
  .ov-inner{grid-template-columns:1fr}
}
@media (max-width:620px){
  #hud{gap:8px;padding:8px;bottom:calc(6px + env(safe-area-inset-bottom,0px))}
  .portrait{width:52px;height:52px}
  .ab{width:48px;height:48px}
  .inv{display:none}
  .core{flex:1}
  #top .lbl{display:none}
  #toast,#recall{bottom:calc(110px + env(safe-area-inset-bottom,0px))}
  .roomcode{font-size:42px}
  .pick .pp{width:48px;height:48px}
}
@media (prefers-reduced-motion:reduce){
  #announce .a,#toast .t{animation-duration:.01s}
  .ft span,.waiting::before{animation:none}
}