/* ui.css: estilos da interface (dono: dev UI). Tokens em base.css. Visual: ferro escuro, pergaminho gasto, filetes de ouro velho */
#ui{--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px);
  --iron:#151110;--iron2:#211a17;--iron3:#2c2420;--edge:#4b3f37;--edge2:#6b5a4c;--silver:#b9b3a8;--parch:#d9c8a0;--parch2:#b49c6e;--inkd:#2b1c12;
  --glass:#100b0ad9;--fill:linear-gradient(180deg,#1e1715f2,#120d0cf2);
  font-family:var(--f-body);color:var(--ink);line-height:1.2}

/* o que é só informação deixa o clique passar pro canvas (joystick) */
#ui .hud,#ui .hud *,#ui .banners,#ui .banners *,#ui .death,#ui .death *,#ui .cards-wrap,#ui .cards-wrap .cards-head,#ui .cards-wrap .cards-head *,#ui .cards,#ui .card *,#ui .lobby-fog,#ui .lobby-fog *{pointer-events:none}
#ui .hud button,#ui .cards .card{pointer-events:auto}
#ui button{touch-action:manipulation}
#ui .act,#ui .card{touch-action:none;-webkit-touch-callout:none}
#ui canvas,#ui img{image-rendering:pixelated}
#ui button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* painel de ferro com cantoneiras douradas */
.panel{background:var(--fill);border:1px solid var(--edge);box-shadow:0 0 0 1px #000c,0 12px 34px #000b,inset 0 1px 0 #ffffff0d,inset 0 0 24px #0008}
.orn{--oc:var(--gold);--os:12px;position:relative}
.orn::before{content:"";position:absolute;inset:-1px;pointer-events:none;background:
  linear-gradient(var(--oc),var(--oc)) left top/var(--os) 2px,linear-gradient(var(--oc),var(--oc)) left top/2px var(--os),
  linear-gradient(var(--oc),var(--oc)) right top/var(--os) 2px,linear-gradient(var(--oc),var(--oc)) right top/2px var(--os),
  linear-gradient(var(--oc),var(--oc)) left bottom/var(--os) 2px,linear-gradient(var(--oc),var(--oc)) left bottom/2px var(--os),
  linear-gradient(var(--oc),var(--oc)) right bottom/var(--os) 2px,linear-gradient(var(--oc),var(--oc)) right bottom/2px var(--os);
  background-repeat:no-repeat}

/* ============================================================ LOBBY */
.lobby{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;overflow-y:auto;overflow-x:hidden;
  padding:calc(12px + var(--sat)) calc(16px + var(--sar)) calc(12px + var(--sab)) calc(16px + var(--sal));
  background:radial-gradient(ellipse 75% 65% at 50% 40%,#0b080933 0%,#0b0809b8 60%,#070505f2 100%);
  --me:var(--blood);transition:opacity .5s ease,transform .5s ease}
.lobby.leaving{opacity:0;transform:scale(1.04);pointer-events:none}
.lobby-fog{position:fixed;inset:0;overflow:hidden;background:
  radial-gradient(ellipse 70% 30% at 50% 108%,#ff5a1a26,transparent 70%),
  radial-gradient(ellipse 40% 26% at 10% 100%,#b8202a1f,transparent 70%),
  radial-gradient(ellipse 40% 26% at 90% 100%,#b8202a1f,transparent 70%)}
.ember{position:absolute;left:var(--x);bottom:-10px;width:var(--s);height:var(--s);background:#ff8a3a;box-shadow:0 0 6px 1px #ff6a1acc;opacity:0;
  animation:ember var(--d) linear infinite;animation-delay:var(--w)}
@keyframes ember{0%{transform:translate(0,0);opacity:0}10%{opacity:.9}70%{opacity:.6}100%{transform:translate(30px,-95vh);opacity:0}}
.lobby-inner{position:relative;width:min(960px,100%);margin:auto;display:flex;flex-direction:column;align-items:center;gap:6px}

.logo{margin:0;text-align:center;font-family:var(--f-deco);font-weight:900;font-size:clamp(40px,10.5vw,104px);line-height:1.08;letter-spacing:.04em;white-space:nowrap;padding:0 .1em;
  color:transparent;background:linear-gradient(180deg,#fff1cf 0%,#f2c46c 30%,#ff8a3a 62%,#b8202a 100%);-webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 2px 0 #2a0a06) drop-shadow(0 0 18px #ff6a1a88) drop-shadow(0 0 42px #b8202a66);animation:embers 3.2s ease-in-out infinite}
@keyframes embers{0%,100%{filter:drop-shadow(0 2px 0 #2a0a06) drop-shadow(0 0 16px #ff6a1a77) drop-shadow(0 0 40px #b8202a55)}
  45%{filter:drop-shadow(0 2px 0 #2a0a06) drop-shadow(0 0 24px #ff7a2aaa) drop-shadow(0 0 60px #b8202a88)}
  55%{filter:drop-shadow(0 2px 0 #2a0a06) drop-shadow(0 0 12px #ff6a1a66) drop-shadow(0 0 34px #b8202a44)}}
.tagline{margin:2px 0 6px;font-family:var(--f-display);font-weight:500;font-size:clamp(12px,2.1vw,17px);letter-spacing:.22em;text-transform:uppercase;color:var(--muted);text-align:center;text-shadow:0 2px 6px #000}
.tagline::before,.tagline::after{content:"";display:inline-block;width:clamp(18px,6vw,60px);height:1px;margin:0 .8em;vertical-align:middle;background:linear-gradient(90deg,transparent,var(--gold))}
.tagline::after{background:linear-gradient(90deg,var(--gold),transparent)}

.lobby-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:14px;width:100%;align-items:start}
.panel.join,.panel.how{padding:16px 16px 14px}
.join{display:flex;flex-direction:column;gap:7px}
.field-label{font-family:var(--f-display);font-weight:600;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
#dg-nick{width:100%;min-width:0;font:700 19px var(--f-body);color:var(--bone);background:#0a0706;border:1px solid var(--edge);border-radius:0;
  padding:8px 12px;outline:none;user-select:text;-webkit-user-select:text;box-shadow:inset 0 2px 8px #000c;transition:border-color .15s,box-shadow .15s}
#dg-nick::placeholder{color:#a8998a66}
#dg-nick:focus{border-color:var(--gold);box-shadow:inset 0 2px 8px #000c,0 0 0 1px #d4a24c55}

/* seleção de classe */
/* 4 + 3 no desktop (a última fileira centralizada); carrossel horizontal no celular */
.cls-wrap{position:relative;display:flex;align-items:stretch;gap:4px}
.classes{flex:1;min-width:0;display:flex;flex-wrap:wrap;justify-content:center;gap:7px 6px}
.classes .cls{flex:0 0 calc(25% - 4.5px)}
.cls-arrow{display:none;flex:none;width:22px;font-family:var(--f-display);font-weight:800;font-size:22px;line-height:1;color:var(--gold);background:#0d0908;border:1px solid var(--edge)}
.cls-arrow:disabled{opacity:.3;cursor:default}
.cls{position:relative;display:flex;flex-direction:column;align-items:center;gap:1px;padding:4px 3px 6px;background:linear-gradient(180deg,#1b1513,#0e0a09);
  border:1px solid var(--edge);box-shadow:inset 0 0 14px #000a;transition:border-color .15s,transform .15s,background .15s}
.cls:hover{border-color:var(--edge2);transform:translateY(-2px)}
.cls.on{border-color:var(--gold);background:linear-gradient(180deg,#2a1a12,#120c0a);box-shadow:inset 0 0 18px #000a,0 0 16px #ff6a1a33}
.cls.on::after{content:"";position:absolute;left:50%;bottom:-5px;width:8px;height:8px;background:var(--gold);transform:translateX(-50%) rotate(45deg);box-shadow:0 0 6px #ff7a2a}
.cls-cv{width:100%;aspect-ratio:1;max-width:84px;display:block}
.cls-name{font-family:var(--f-display);font-weight:800;font-size:13px;letter-spacing:.04em;color:var(--bone)}
.cls.on .cls-name{color:#ffd99a}
.cls-title{font-family:var(--f-body);font-style:italic;font-size:11.5px;color:var(--muted);text-align:center;line-height:1.05}
.cls-info{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;min-height:20px;padding:4px 2px 0;border-top:1px solid #e8c7a01a}
.cls-info-t{font-family:var(--f-display);font-weight:600;font-size:12.5px;color:var(--gold)}
.cls-info-d{font-size:14px;color:#d8ccb8}

.colors{display:flex;flex-wrap:wrap;gap:7px}
.swatch{--c:#fff;position:relative;width:30px;height:30px;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 85%,#fff 15%),color-mix(in srgb,var(--c) 70%,#000 30%));
  border:1px solid #000;box-shadow:0 0 0 1px var(--edge),inset 0 -6px 0 #0004;clip-path:polygon(0 0,100% 0,100% 78%,50% 100%,0 78%);transition:transform .15s}
.swatch:hover{transform:translateY(-2px)}
.swatch[aria-checked="true"]{transform:translateY(-3px) scale(1.1);box-shadow:0 0 0 2px var(--gold)}
.swatch[aria-checked="true"]::after{content:"";position:absolute;left:50%;top:7px;width:6px;height:6px;margin-left:-3px;background:#fff8;transform:rotate(45deg)}

.play{position:relative;margin-top:6px;display:flex;align-items:center;justify-content:center;width:100%;overflow:hidden;
  font-family:var(--f-display);font-weight:800;font-size:clamp(17px,3vw,23px);letter-spacing:.12em;padding:13px 12px 12px;
  color:#fff0d6;background:linear-gradient(180deg,#a3242a 0%,#6e1218 55%,#3e080c 100%);border:1px solid var(--gold);
  box-shadow:0 0 0 1px #000,inset 0 1px 0 #ffb08055,inset 0 -3px 0 #0006,0 8px 24px #000a,0 0 26px #b8202a55;text-shadow:0 2px 0 #2a0406,0 0 12px #ff7a2a88;transition:transform .08s,filter .2s}
.play::before{content:"";position:absolute;inset:3px;border:1px solid #d4a24c55;pointer-events:none}
.play::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,#ffcf9a33 48%,transparent 60%);background-size:260% 100%;animation:shine 3.4s linear infinite}
.play:hover{filter:brightness(1.15)}
.play:active{transform:translateY(2px)}
@keyframes shine{0%{background-position:150% 0}100%{background-position:-100% 0}}
.status-row{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.room-status{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--muted)}
.room-status::before{content:"";flex:none;width:7px;height:7px;transform:rotate(45deg);background:#6b5a4c}
.room-status[data-s="on"]{color:#cfc2ad} .room-status[data-s="on"]::before{background:var(--poison);box-shadow:0 0 6px var(--poison)}
.room-status[data-s="wait"]::before{background:var(--gold)}
.invite{font-family:var(--f-display);font-weight:600;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;padding:5px 11px;background:#0d0908;border:1px solid var(--edge);color:var(--bone)}
.invite:hover{border-color:var(--gold);color:#ffd99a}

.how{display:flex;flex-direction:column;gap:8px}
.how-title,.circle-title{font-family:var(--f-display);font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.how ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.how li{position:relative;padding-left:14px;font-size:14.5px;color:#d8ccb8;line-height:1.3}
.how li::before{content:"";position:absolute;left:1px;top:.5em;width:5px;height:5px;background:var(--edge2);transform:rotate(45deg)}
.how kbd{display:inline-block;min-width:20px;margin:0 1px;padding:0 5px;text-align:center;font:600 11px/18px var(--f-display);color:#ffd99a;
  background:#0b0807;border:1px solid var(--edge);border-bottom-width:2px;vertical-align:1px}
.circle-box{margin-top:2px;padding:10px 12px;background:linear-gradient(90deg,#3a0a0e99,#1a080900);border-left:2px solid var(--blood);box-shadow:inset 0 0 0 1px #b8202a33}
.circle-title{color:#e86a5a;text-shadow:0 0 10px #b8202a88}
.circle-txt{font-size:13.5px;color:#d8c4b4;margin-top:3px;line-height:1.3}

.mute{width:38px;height:38px;display:grid;place-items:center;background:#0f0b0acc;border:1px solid var(--edge);box-shadow:0 0 0 1px #000a}
.mute svg{width:60%;height:60%;fill:none;stroke:var(--bone);stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.mute .spk{fill:var(--bone)} .mute .x{display:none;stroke:var(--blood);stroke-width:2.4}
.mute.muted .wave{display:none} .mute.muted .x{display:block} .mute.muted .spk{fill:var(--muted)}
.mute:hover{border-color:var(--gold)}
.lobby-mute{position:fixed;top:calc(10px + var(--sat));right:calc(10px + var(--sar))}

@media (max-width:760px){
  .lobby-grid{grid-template-columns:minmax(0,1fr);gap:10px}
  .panel.join,.panel.how{padding:12px 12px 11px}
  .cls-title{display:none}
  .cls-name{font-size:10.5px;letter-spacing:0}
  .classes{flex-wrap:nowrap;justify-content:flex-start;gap:5px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:6px;overscroll-behavior-x:contain}
  .classes::-webkit-scrollbar{display:none}
  .classes .cls{flex:0 0 calc((100% - 15px)/4);scroll-snap-align:start}
  .cls-wrap.scrolls .cls-arrow{display:block}
  .how{gap:6px} .how ul{gap:5px}
  .how li{font-size:12.5px;line-height:1.25}
  .status-row{flex-wrap:nowrap}
  .room-status{min-width:0;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .invite{flex:none;padding:4px 8px}
  .circle-txt{font-size:12.5px}
}
@media (max-width:760px) and (max-height:900px){
  .lobby{align-items:flex-start}
  .how ul li:nth-child(4){display:none}
  .lobby-inner{gap:4px}
}
@media (max-width:760px) and (max-height:760px){
  .how-title{display:none} .how ul li:nth-child(3){display:none}
  .circle-txt{font-size:12px}
  .join{gap:5px}
  .play{padding:10px 10px 9px}
  .swatch{width:26px;height:26px}
  #dg-nick{font-size:17px;padding:6px 10px}
  .logo{font-size:clamp(36px,11vw,56px)}
}
@media (max-width:760px) and (max-height:680px){
  .how{display:none}
  .tagline{font-size:11px}
}
/* desktop baixo: retratos menores pra caber as duas fileiras */
@media (min-width:761px) and (max-height:820px){
  .cls-cv{max-width:64px} .cls-title{font-size:10.5px} .how li{font-size:13.5px} .panel.join,.panel.how{padding:13px 14px 11px} .join{gap:5px}
}
@media (min-width:761px) and (max-height:700px){
  .tagline{display:none} .logo{font-size:clamp(36px,8vw,64px)} .cls-cv{max-width:52px} .cls-title{display:none} .cls-info{min-height:0}
}
@media (max-height:540px){ /* celular deitado */
  .lobby{align-items:flex-start}
  .tagline,.how-title,.cls-title{display:none}
  .logo{font-size:clamp(30px,9vh,54px)}
  .lobby-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
  .how li{font-size:12px} .circle-txt{font-size:12px}
  .cls-cv{max-width:64px}
  .play{padding:8px}
}

/* ============================================================ HUD */
.hud{position:fixed;inset:0}
.lowhp-vignette{position:absolute;inset:0;opacity:0;transition:opacity .3s;background:radial-gradient(ellipse at center,transparent 50%,#8a0a1488 100%)}
.hud.lowhp .lowhp-vignette{opacity:1;animation:heartbeat 1s ease-in-out infinite}
@keyframes heartbeat{0%,100%{opacity:1}50%{opacity:.45}}

/* Dopamina (XP) */
.xp{position:absolute;top:calc(6px + var(--sat));left:calc(8px + var(--sal));right:calc(8px + var(--sar));display:flex;align-items:center;gap:8px}
.xp-name{flex:none;font-family:var(--f-display);font-weight:800;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);text-shadow:0 1px 0 #000,0 0 8px #000}
.xp-lv{flex:none;font-family:var(--f-display);font-weight:800;font-size:13px;letter-spacing:.08em;color:#ffd99a;text-shadow:0 1px 0 #000,0 0 8px #000;min-width:66px;text-align:right}
.xp-bar{position:relative;flex:1;height:14px;background:#0a0606e6;border:1px solid var(--edge);box-shadow:0 0 0 1px #000,inset 0 2px 5px #000c,0 3px 10px #0008;overflow:hidden}
.xp-bar::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),#000a calc(10% - 1px) 10%);pointer-events:none}
.xp-fill{position:absolute;inset:0;transform-origin:left center;transform:scaleX(0);transition:transform .2s ease-out;
  background:linear-gradient(90deg,#6e1218,var(--blood) 35%,#e0602a 70%,var(--gold));box-shadow:inset 0 2px 0 #ffd99a44,inset 0 -3px 0 #0005}
.xp-num{position:absolute;inset:0;z-index:1;display:grid;place-items:center;font-family:var(--f-display);font-weight:600;font-size:10px;letter-spacing:.06em;color:#f3e6c8;text-shadow:0 1px 0 #000,0 0 4px #000}
.xp.near .xp-bar{border-color:var(--gold);animation:xpnear .5s ease-in-out infinite alternate}
@keyframes xpnear{to{box-shadow:0 0 0 1px #000,0 0 16px #ff7a2acc}}
.xp.flash .xp-bar{animation:xpflash .6s ease-out}
@keyframes xpflash{0%{filter:brightness(2.4);box-shadow:0 0 0 1px #000,0 0 30px #ffb060}100%{}}

/* topo esquerdo: vida, chips, feed */
.tl{position:absolute;top:calc(30px + var(--sat));left:calc(8px + var(--sal));width:min(300px,46vw);display:flex;flex-direction:column;gap:6px}
.hp{position:relative;display:flex;align-items:center;height:26px}
.heart{position:relative;z-index:1;flex:none;width:30px;height:30px;margin-right:-6px;filter:drop-shadow(0 1px 0 #000) drop-shadow(0 0 4px #000)}
.hp-bar{position:relative;flex:1;height:18px;background:#0a0606e6;border:1px solid var(--edge);box-shadow:0 0 0 1px #000,inset 0 2px 5px #000c,0 3px 10px #0008;overflow:hidden}
.hp-fill{position:absolute;inset:0;transform-origin:left;background:linear-gradient(180deg,#d8424a,var(--blood) 50%,#6e1218);transition:transform .15s;box-shadow:inset 0 2px 0 #ff9a9a44}
.hp-txt{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--f-display);font-weight:800;font-size:12px;letter-spacing:.04em;color:#f6ead2;text-shadow:0 1px 0 #000,0 0 4px #000}
.hp.low .hp-bar{border-color:#e0303a;animation:lowhp .5s ease-in-out infinite alternate}
@keyframes lowhp{to{box-shadow:0 0 0 1px #000,0 0 14px #e0303acc}}
.hp.hit{animation:hpHit .3s}
@keyframes hpHit{0%{transform:translateX(-4px)}25%{transform:translateX(4px)}50%{transform:translateX(-2px)}100%{}}
.chips{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.chip{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 8px;background:var(--glass);border:1px solid var(--edge);box-shadow:0 0 0 1px #000a;white-space:nowrap}
.chip-ico{width:16px;height:16px}
.chip-lbl{font-family:var(--f-display);font-weight:600;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.chip-val{font-family:var(--f-display);font-weight:800;font-size:13px;color:var(--bone)}
.chip.streak .chip-val{color:var(--muted)}
.chip.streak.on{border-color:#ff7a2a88} .chip.streak.on .chip-val{color:#ffb070}
.chip.streak.hot{background:linear-gradient(90deg,#5a0e12e6,#2a0a08e6);border-color:var(--ember);animation:hot .4s ease-in-out infinite alternate}
.chip.streak.hot .chip-val{color:#ffe0b0}
@keyframes hot{to{box-shadow:0 0 0 1px #000a,0 0 14px #ff7a2a99}}
.chip.pop{animation:streakpop .45s cubic-bezier(.2,1.8,.4,1)}
@keyframes streakpop{from{transform:scale(1.6);filter:brightness(2)}}
.chip-btn{width:26px;height:26px}
.feed{display:flex;flex-direction:column;gap:3px;margin-top:2px}
.feed-item{align-self:flex-start;max-width:100%;font-weight:700;font-size:13px;padding:3px 10px 3px 9px;background:linear-gradient(90deg,#0f0a09e6,#0f0a0999);border-left:2px solid var(--edge2);
  color:#d8ccb8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 0 #000;animation:feedin .3s ease-out both;transition:opacity .4s,transform .4s}
.f-nick{font-weight:800}
.feed-item.out{opacity:0;transform:translateX(-14px)}
.f-mine{border-left-color:var(--gold);background:linear-gradient(90deg,#3a2a0ee6,#0f0a0999)}
.f-me{border-left-color:var(--blood);background:linear-gradient(90deg,#3a0a0ee6,#0f0a0999)}
.f-join{border-left-color:var(--poison)} .f-leave{color:var(--muted)}
@keyframes feedin{from{opacity:0;transform:translateX(-16px)}}

/* topo direito: minimapa e placar */
.tr{position:absolute;top:calc(30px + var(--sat));right:calc(8px + var(--sar));display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.mini-frame{--os:10px;padding:3px;background:linear-gradient(180deg,#3a302a,#1a1412);border:1px solid #000;box-shadow:0 0 0 1px var(--edge),0 6px 16px #000a}
.minimap{display:block;width:var(--mm,150px);height:var(--mm,150px);border:1px solid #000;background:#120c0c}
.board{width:var(--bw,206px);padding:5px 5px 4px}
.board-head{font-family:var(--f-display);font-weight:600;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);padding:0 4px 4px;border-bottom:1px solid #e8c7a01a;margin-bottom:3px}
.board-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
.board .row{display:flex;align-items:center;gap:5px;font-weight:700;font-size:13px;padding:2px 4px;color:#d8ccb8}
.board .row.me{background:#d4a24c14;box-shadow:inset 2px 0 0 var(--gold);color:var(--bone)}
.board .row.lead .pos{color:#ffd99a}
.board .row.lead .nm{color:#ffd99a}
.board .row.dead{opacity:.45}
.board .pos{width:13px;text-align:right;font-family:var(--f-display);font-weight:800;font-size:10.5px;color:var(--muted)}
.board .dot{flex:none;width:8px;height:8px;transform:rotate(45deg);box-shadow:0 0 0 1px #000}
.board .nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.board .pv{flex:none;width:7px;height:7px;border:1.5px solid #e0303a;transform:rotate(45deg);box-shadow:0 0 5px #e0303a}
.board .lv{font-family:var(--f-display);font-size:10.5px;color:var(--muted)}
.board .k{display:inline-flex;align-items:center;justify-content:flex-end;gap:2px;font-family:var(--f-display);font-weight:800;font-size:12px;min-width:38px}
.k-ico{width:13px;height:13px;opacity:.85}

/* selo do Círculo de Sangue */
.pvp-badge{position:absolute;top:calc(30px + var(--sat));left:50%;transform:translateX(-50%);font-family:var(--f-display);font-weight:800;font-size:13px;letter-spacing:.18em;
  padding:6px 18px 5px;color:#ffd6c8;background:linear-gradient(90deg,transparent,#5a0a10f0 18%,#5a0a10f0 82%,transparent);border-top:1px solid #e0303a;border-bottom:1px solid #e0303a;
  text-shadow:0 1px 0 #000,0 0 10px #e0303a;white-space:nowrap;animation:pvpin .4s ease-out both,pvppulse 1.4s ease-in-out .4s infinite}
.pvp-badge::before,.pvp-badge::after{content:"";display:inline-block;width:6px;height:6px;margin:0 10px;vertical-align:2px;background:#e0303a;transform:rotate(45deg)}
.pvp-short{display:none}
@keyframes pvpin{from{transform:translateX(-50%) scaleX(.2);opacity:0}}
@keyframes pvppulse{50%{text-shadow:0 1px 0 #000,0 0 18px #ff4040;filter:brightness(1.15)}}

/* ações: molduras quadradas de ferro com cooldown radial */
.actions{position:absolute;left:50%;bottom:calc(10px + var(--sab));transform:translateX(-50%);display:flex;gap:12px;align-items:flex-end}
.bar-box{display:flex;gap:6px;padding:6px;background:linear-gradient(180deg,#1a1412e6,#0c0908e6);border:1px solid var(--edge);box-shadow:0 0 0 1px #000,0 8px 20px #000a}
.act{--sz:60px;--cd:0;position:relative;width:var(--sz);height:var(--sz);display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(circle at 50% 40%,#2e2521,#130e0d 75%);border:1px solid #000;
  box-shadow:inset 0 0 0 1px var(--edge2),inset 0 0 0 3px #0d0a09,inset 0 0 0 4px #3a302a,inset 0 0 14px #000;transition:transform .08s,filter .2s}
.act .ico{position:absolute;inset:15%;width:70%;height:70%;filter:drop-shadow(0 2px 0 #000a)}
.act .cd{position:absolute;inset:4px;background:conic-gradient(#000000c4 0 calc(var(--cd)*1turn),transparent 0)}
.act .cdt{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--f-display);font-weight:800;font-size:calc(var(--sz)*.3);color:var(--bone);text-shadow:0 2px 0 #000,0 0 6px #000}
.act .key{position:absolute;left:5px;top:4px;font-family:var(--f-display);font-weight:800;font-size:10.5px;color:var(--gold);text-shadow:0 1px 0 #000,0 0 3px #000}
.act.p-dash{--sz:48px;align-self:flex-end}
.act.p-dash .key{font-size:7px;top:5px;letter-spacing:.04em}
.act.na .ico{filter:grayscale(1) brightness(.45)}
.powers{align-items:flex-end}
.act:hover{filter:brightness(1.12)}
.act.press{animation:press .16s ease-out}
@keyframes press{50%{transform:scale(.9)}}
.act.cooling .ico{filter:grayscale(.75) brightness(.7)}
.act.ready-flash{animation:readyflash .45s ease-out}
@keyframes readyflash{0%{box-shadow:inset 0 0 0 2px #ffd99a,inset 0 0 22px #ff7a2a;transform:scale(1.08)}100%{}}
.act.p-ult{--sz:70px;background:radial-gradient(circle at 50% 40%,#4a1418,#160909 75%);box-shadow:inset 0 0 0 1px #8a2a24,inset 0 0 0 3px #0d0a09,inset 0 0 0 4px #5a1a18,inset 0 0 14px #000}
.act.p-ult .cdt{font-size:15px;align-items:end;padding-bottom:6px}
.act.p-ult.charged{box-shadow:inset 0 0 0 1px var(--gold),inset 0 0 0 3px #0d0a09,inset 0 0 0 4px var(--ember),inset 0 0 18px #ff5a1a;animation:ultglow .7s ease-in-out infinite alternate}
@keyframes ultglow{to{box-shadow:inset 0 0 0 1px #ffe0a0,inset 0 0 0 3px #0d0a09,inset 0 0 0 4px #ffb060,inset 0 0 30px #ff7a2a,0 0 18px #ff5a1a99;filter:brightness(1.2)}}
.slot{--sz:56px}
.slot .portrait{position:absolute;inset:5px;width:calc(100% - 10px);height:calc(100% - 10px)}
.slot.empty{background:#0d0a09;box-shadow:inset 0 0 0 1px #2c2420,inset 0 0 12px #000}
.slot .slv{position:absolute;right:5px;bottom:4px;font-family:var(--f-display);font-weight:800;font-size:9.5px;color:#d8ccff;text-shadow:0 1px 0 #000,0 0 3px #000}
.slot .sstate{position:absolute;left:0;right:0;top:50%;text-align:center;font-family:var(--f-display);font-weight:800;font-size:8px;letter-spacing:.06em;color:var(--bone);text-shadow:0 1px 0 #000,0 0 4px #000;transform:translateY(-50%)}
.slot.ready:not(.empty){box-shadow:inset 0 0 0 1px #8a7ad0,inset 0 0 0 3px #0d0a09,inset 0 0 0 4px #3a302a,inset 0 0 14px #000}
.slot.out{background:radial-gradient(circle at 50% 40%,#2a2246,#100c18 75%);box-shadow:inset 0 0 0 1px var(--arcane),inset 0 0 0 3px #0d0a09,inset 0 0 0 4px #4a3a8a,inset 0 0 16px #7a5cff66}
.slot .sxp{position:absolute;left:5px;bottom:4px;height:2px;width:calc(var(--xp,0)*(100% - 10px));background:var(--arcane);opacity:.9}
.slot.empty .sxp{display:none}
.slot.out::after{content:"";position:absolute;left:5px;top:5px;height:3px;width:calc(var(--life,0)*(100% - 10px));background:#a890ff;box-shadow:0 0 4px #7a5cff}
.hud.dead .actions{opacity:.35;filter:grayscale(1)}

/* ============================================================ CARTAS (tarô de pergaminho, moldura = raridade) */
.cards-wrap{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(96px + var(--sab));width:min(600px,calc(100vw - 16px));z-index:3;display:flex;flex-direction:column;gap:6px}
.cards-head{display:flex;align-items:center;justify-content:center;gap:10px;font-family:var(--f-display);font-weight:800;font-size:14px;letter-spacing:.16em;color:#ffd99a;text-shadow:0 0 12px #ff7a2a99,0 2px 0 #000}
.cards-head::before,.cards-head::after{content:"";width:40px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.cards-head::after{order:9;background:linear-gradient(90deg,var(--gold),transparent)}
.cards-wrap.show .cards-head{animation:headpop .4s ease-out both}
@keyframes headpop{from{transform:translateY(8px);opacity:0}}
.cards-hint{font-size:10px;letter-spacing:.12em;color:var(--muted);text-shadow:0 1px 0 #000}
.cards-more{font-size:11px;color:#fff0d6;background:var(--blood);border:1px solid var(--gold);padding:2px 7px 1px;letter-spacing:.04em}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;perspective:900px}
.card{--rc:#5a5048;--rc2:#2a2420;position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;padding:12px 9px 9px;min-height:156px;
  color:var(--inkd);background:radial-gradient(ellipse at 50% 30%,#e6d6b0 0%,var(--parch) 45%,var(--parch2) 100%);
  border:3px solid var(--rc);outline:1px solid #000;box-shadow:inset 0 0 0 1px var(--rc2),inset 0 0 0 4px #e6d6b0,inset 0 0 0 5px color-mix(in srgb,var(--rc) 70%,transparent),inset 0 0 26px #6a4a2266,0 8px 18px #000c;
  animation:flip .5s cubic-bezier(.2,1.2,.4,1) both;animation-delay:var(--d,0ms);transition:transform .12s,box-shadow .12s,filter .12s;overflow:hidden}
.card:hover{transform:translateY(-6px);filter:brightness(1.06)}
.card:active{transform:translateY(-2px) scale(.98)}
@keyframes flip{0%{transform:rotateY(90deg) translateY(24px) scale(.8);opacity:0;filter:brightness(2)}60%{opacity:1}}
.card.r-silver{--rc:#a8a39a;--rc2:#4a4640}
.card.r-epic{--rc:#9a8ad8;--rc2:#3a2e6a}
.card.r-gold{--rc:var(--gold);--rc2:#6a4a10;box-shadow:inset 0 0 0 1px var(--rc2),inset 0 0 0 4px #e6d6b0,inset 0 0 0 5px #d4a24cbb,inset 0 0 26px #8a5a1a77,0 8px 18px #000c,0 0 22px #ff9a3a66}
.card.r-gold::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,#fff6 48%,transparent 60%);background-size:260% 100%;animation:shine 2.4s linear infinite}
.card-key{position:absolute;left:6px;top:5px;min-width:16px;font-family:var(--f-display);font-weight:800;font-size:10.5px;line-height:16px;color:var(--parch);background:var(--inkd);border:1px solid var(--rc)}
.card-num{position:absolute;right:8px;top:5px;font-family:var(--f-display);font-weight:800;font-size:10.5px;color:#6a4a2a}
.card-tag{position:absolute;left:0;right:0;top:0;font-family:var(--f-display);font-weight:800;font-size:8.5px;letter-spacing:.18em;padding:2px 0 1px;background:linear-gradient(90deg,#6a4a10,#d4a24c,#6a4a10);color:#2a1606}
.card.r-gold .card-key{top:16px} .card.r-gold .card-num{top:16px}
.card.r-gold{padding-top:20px}
.card-plate{display:grid;place-items:center;width:50px;height:50px;margin-bottom:1px;background:radial-gradient(circle,#2a1e18,#120c0a 70%);border:1px solid var(--rc);transform:rotate(45deg);box-shadow:0 0 0 2px #e6d6b0,0 0 0 3px var(--rc2)}
.card-ico{width:42px;height:42px;transform:rotate(-45deg)}
.card-name{margin-top:5px;font-family:var(--f-display);font-weight:800;font-size:13px;line-height:1.1;color:var(--inkd)}
.card-lv{font-family:var(--f-display);font-weight:600;font-size:10.5px;letter-spacing:.06em;color:#7a2a18;border-top:1px solid #6a4a2a55;border-bottom:1px solid #6a4a2a55;padding:0 8px}
.card-desc{font-weight:500;font-size:12.5px;line-height:1.18;color:#3a2a1c;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card.chosen{animation:chosen .32s ease-out forwards}
.card.gone{animation:gone .25s ease-in forwards}
@keyframes chosen{40%{transform:scale(1.08);filter:brightness(1.4)}100%{transform:translateY(-30px) scale(.9);opacity:0}}
@keyframes gone{to{transform:translateY(30px) scale(.85);opacity:0}}

/* ============================================================ BANNERS e MORTE */
.banners{position:fixed;left:0;right:0;top:21%;display:flex;justify-content:center;padding:0 8px;z-index:4}
#ui.is-dead .banners{top:calc(8px + var(--sat) + 6%)}
.banner{--bc:var(--gold);display:flex;flex-direction:column;align-items:center;max-width:min(94vw,860px);text-align:center;padding:9px 40px 8px;
  background:linear-gradient(90deg,transparent,#0c0807e6 16%,#0c0807e6 84%,transparent);border-top:1px solid var(--bc);border-bottom:1px solid var(--bc);
  animation:bin .5s ease-out both;transition:opacity .3s,transform .3s}
.b-main{font-family:var(--f-display);font-weight:800;font-size:clamp(17px,3.4vw,36px);letter-spacing:.1em;line-height:1.1;color:var(--bone);text-shadow:0 2px 0 #000,0 0 16px color-mix(in srgb,var(--bc) 70%,transparent)}
.b-sub{margin-top:3px;font-style:italic;font-size:clamp(12.5px,2.1vw,16px);color:#cfc2ad;text-shadow:0 1px 0 #000}
.banner.out{opacity:0;transform:translateY(-8px)}
@keyframes bin{0%{transform:scale(1.25);opacity:0;filter:blur(4px)}60%{opacity:1;filter:none}}
.b-boss{--bc:#e0303a} .b-boss .b-main{font-family:var(--f-deco);font-weight:900;color:#ffd6c8;animation:bossshake .12s linear 6}
@keyframes bossshake{25%{transform:translate(-2px,1px)}75%{transform:translate(2px,-1px)}}
.b-elite{--bc:var(--gold)} .b-elite .b-main{color:#ffd99a}
.b-capture{--bc:var(--arcane)} .b-capture .b-main{color:#e2dbff}
.b-kill{--bc:var(--gold)} .b-kill .b-main{color:#ffd99a}
.b-killed{--bc:#e0303a} .b-killed .b-main{color:#ffb4a8}
.b-streak{--bc:var(--ember)} .b-streak .b-main{color:#ffd0a0}
.b-join{--bc:var(--edge2)} .b-join .b-main{font-size:clamp(14px,2.6vw,22px);letter-spacing:.06em}

.death{position:fixed;inset:0;display:grid;place-items:center;z-index:2;background:radial-gradient(circle at 50% 45%,#3a060c66,#0b0809e0 75%);animation:fadein .6s both}
@keyframes fadein{from{opacity:0}}
.death-box{text-align:center;padding:0 16px}
.death-title{font-family:var(--f-deco);font-weight:900;font-size:clamp(34px,9vw,80px);letter-spacing:.04em;color:#c8242e;text-shadow:0 3px 0 #2a0406,0 0 34px #b8202aaa;animation:bin .8s ease-out both}
.death-sub{margin-top:4px;font-style:italic;font-size:clamp(15px,3vw,22px);color:var(--bone);text-shadow:0 2px 0 #000}
.death-rule{width:min(320px,70vw);height:1px;margin:14px auto 10px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.death-label{font-family:var(--f-display);font-weight:600;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.death-count{font-family:var(--f-display);font-weight:800;font-size:clamp(56px,15vw,120px);line-height:1;color:var(--gold);text-shadow:0 4px 0 #3a2008,0 0 34px #ff7a2a77}
.death-count.tick{animation:tick .5s ease-out}
@keyframes tick{from{transform:scale(1.4);opacity:.3}}
.death-stats{margin-top:8px;font-family:var(--f-display);font-weight:600;font-size:13px;letter-spacing:.08em;color:var(--muted)}

/* ============================================================ CELULAR / TELA PEQUENA */
@media (max-width:760px){
  .pvp-long{display:none} .pvp-short{display:inline}
  .pvp-badge{font-size:10.5px;letter-spacing:.12em;padding:4px 14px 3px;top:auto;bottom:calc(192px + var(--sab));left:auto;right:calc(4px + var(--sar));transform:none;animation:pvppulse 1.4s ease-in-out infinite}
  .pvp-badge::before,.pvp-badge::after{margin:0 6px}
  .xp-name{display:none}
  .tr{--mm:92px;--bw:146px}
  .bh-x{display:none}
  .board .row{font-size:11.5px;gap:4px;padding:1px 3px} .board .lv{display:none} .board .k{min-width:28px;font-size:11px}
  .tl{width:min(200px,42vw)}
  .chip{height:22px;padding:0 6px} .chip-lbl{display:none} .chip-val{font-size:12px}
  .chip-btn{width:24px;height:24px}
  .feed-item{font-size:11.5px}
}
/* .touch: ponteiro grosso OU tela estreita (o ui.js liga a classe) */
#ui.touch .actions{left:auto;right:calc(8px + var(--sar));transform:none;gap:8px;align-items:flex-end}
#ui.touch .slots{display:grid;grid-template-columns:repeat(2,auto);gap:5px;padding:5px}
/* celular: Q W E R em arco em volta do rolamento grande */
#ui.touch .powers{position:relative;display:block;width:176px;height:176px;padding:0;background:none;border:0;box-shadow:none}
#ui.touch .act.power{position:absolute;--sz:54px}
#ui.touch .act.p-power1{right:120px;bottom:10px}
#ui.touch .act.p-power2{right:105px;bottom:65px}
#ui.touch .act.p-power3{right:65px;bottom:105px}
#ui.touch .act.p-ult{right:10px;bottom:120px;--sz:56px}
#ui.touch .act.p-dash{right:0;bottom:0;--sz:76px}
#ui.touch .act.p-dash .key{font-size:8px;top:7px;left:7px}
#ui.touch .slot{--sz:48px}
#ui.touch .act .key{font-size:9px}
#ui.touch .cards-wrap{bottom:calc(190px + var(--sab))}
#ui.touch .card{min-height:130px;padding:10px 5px 7px}
#ui.touch .card.r-gold{padding-top:18px}
#ui.touch .card-plate{width:40px;height:40px}
#ui.touch .card-ico{width:34px;height:34px}
#ui.touch .card-name{font-size:11.5px}
#ui.touch .card-desc{font-size:11px}
#ui.touch .card-lv{font-size:9.5px}
#ui.touch .cards-hint{display:none}
#ui.touch .cards-head{font-size:12px;letter-spacing:.1em;white-space:nowrap}
#ui.touch .cards-head::before,#ui.touch .cards-head::after{width:16px}
@media (max-width:420px){
  .banners{top:24%}
  .cards{gap:5px}
  .card-num{display:none}
}
/* tela baixa no desktop: cartas mais compactas */
@media (max-height:700px){
  .cards-wrap{bottom:calc(90px + var(--sab))}
  .card{min-height:120px;padding:9px 6px 7px}
  .card-plate{width:38px;height:38px} .card-ico{width:32px;height:32px}
  .card-desc{-webkit-line-clamp:2;font-size:11.5px}
  .banners{top:17%}
}
/* celular deitado: cartas à esquerda dos botões */
@media (max-height:540px){
  #ui .cards-wrap{left:calc(8px + var(--sal));transform:none;bottom:calc(8px + var(--sab));width:min(520px,calc(100vw - 300px))}
  #ui .card{min-height:112px}
  .banners{top:16%}
  .tr{--mm:80px}
  .board .row:nth-child(n+4){display:none}
}

/* ============================================================ movimento reduzido */
@media (prefers-reduced-motion: reduce){
  #ui *,#ui *::before,#ui *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;animation-delay:0ms!important;transition-duration:.001ms!important}
  .ember{display:none}
}