/* Elysium X1 — mesa da partida (só em paisagem) */
:root{color-scheme:dark;--display:"IM Fell English SC",Georgia,serif;--body:"Alegreya Sans","Segoe UI",system-ui,sans-serif;--bg:#0b0809;--panel:#1a1316;--panel2:#221a1e;--line:#33262c;--text:#ecdfe2;--dim:#a8939a;--red:#c9364a;--gold:#e2b04a;--blue:#6aa3d8;
  --vw:118px;--vh:165px;--ovw:104px;--ovh:146px;--hw:132px;--hh:184px;--uw:84px;--uh:118px}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font:15px/1.4 var(--body)}
button{font:inherit;color:inherit}
.disp{font-family:var(--display);font-weight:400}
.lbl{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--dim)}
[hidden]{display:none !important}
body.ingame #sndBtn{display:none}

/* ---------------- lobby ---------------- */
#lobby{min-height:100%;display:flex;align-items:flex-start;justify-content:center;padding:28px 16px;background:radial-gradient(ellipse at 50% 0%,#2a1018 0%,#0b0809 60%)}
.lb{width:100%;max-width:880px;display:flex;flex-direction:column;gap:16px}
.lb h1{font-family:var(--display);font-weight:400;color:var(--gold);font-size:40px;margin:0;text-align:center}
.lb .sub{text-align:center;color:var(--dim);margin:-8px 0 4px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px}
.card h2{font-family:var(--display);font-weight:400;font-size:21px;margin:0 0 10px;color:var(--gold)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.in{background:#0f0b0d;border:1px solid #4a3a40;color:var(--text);border-radius:9px;padding:10px 12px;font:inherit;min-width:0}
.in:focus{outline:2px solid var(--gold);outline-offset:1px}
.btn{background:var(--panel2);border:1px solid #4a3a40;border-radius:10px;padding:10px 16px;cursor:pointer;font-weight:700}
.btn:hover{border-color:var(--gold)}
.btn.go{background:var(--red);border-color:var(--red);color:#fff}
.btn.go:hover{background:#dd3f55}
.btn:disabled{opacity:.45;cursor:default}
.decks{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.deck{text-align:left;background:#150f12;border:1px solid var(--line);border-radius:10px;padding:10px;cursor:pointer;display:flex;flex-direction:column;gap:2px}
.deck b{font-family:var(--display);font-weight:400;font-size:17px}
.deck small{color:var(--dim);font-size:12px;line-height:1.3}
.deck.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.mode{display:flex;flex-direction:column;gap:8px}
.code{font:700 34px/1 ui-monospace,Consolas,monospace;letter-spacing:.18em;color:var(--gold)}
.note{font-size:13px;color:var(--dim)}
.pl{display:flex;justify-content:space-between;gap:8px;padding:8px 10px;background:#150f12;border:1px solid var(--line);border-radius:9px}
.err{color:#ff8a98;font-weight:700}
.back{background:none;border:0;color:var(--dim);cursor:pointer;padding:0;text-decoration:underline}

/* ---------------- mesa ---------------- */
#table{position:fixed;inset:0;display:flex;background:var(--bg);overflow:hidden}
.pcol{width:206px;flex:none;padding:8px;display:flex;flex-direction:column;gap:8px;background:#120d10;border-right:1px solid #2a1f24;min-height:0}
.pinfo{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;gap:5px}
.pinfo.turn{border-color:var(--gold)}
.pinfo .nm{display:flex;justify-content:space-between;align-items:baseline;gap:6px}
.pinfo .nm b{font-family:var(--display);font-weight:400;font-size:15.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pool{font-size:42px;line-height:1;font-weight:700;color:#ff8a98;display:flex;align-items:baseline;gap:8px}
.pool small{font-size:11px;color:var(--dim);font-weight:400}
.edge{font-size:11px;font-weight:700;color:#1a1013;background:var(--gold);border-radius:999px;padding:1px 7px}
.ctr{display:flex;gap:4px}
.ctr span{flex:1;text-align:center;background:#24476b;border-radius:5px;padding:2px 0;font-size:12px;font-weight:700;color:#e6f0fa}
.ctr span small{display:block;font-size:9px;font-weight:400;opacity:.85}
.prompt{flex:1;min-height:0;background:#e9e0d3;color:#1f1418;border-radius:10px;padding:9px;display:flex;flex-direction:column;gap:6px;overflow-y:auto}
.prompt .pt{font-family:var(--display);font-size:17px;color:#7d1e2c;line-height:1.15}
.prompt .pb{font-size:13.5px;line-height:1.35}
.prompt .step{font-size:12px;color:#5a4650}
.prompt.wait{background:#cfc6ba}
.pbtn{display:flex;justify-content:space-between;align-items:baseline;gap:6px;width:100%;background:#fff;border:1px solid #bfae9c;border-radius:7px;padding:6px 8px;cursor:pointer;text-align:left;color:#1f1418;font-size:13.5px}
.pbtn:hover{border-color:#7d1e2c}
.pbtn.on{background:#f6e3b8;border-color:#b07a2a}
.pbtn.grp{font-weight:700}
.pbtn small{font-size:11px;color:#6b5560;font-weight:400}
.pbtn:disabled{opacity:.55;cursor:default}
.ok{margin-top:auto;background:var(--red);color:#fff;border:0;border-radius:9px;padding:9px 8px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:1px;box-shadow:0 4px 12px #c9364a55}
.ok b{font-size:18px}
.ok span{font-size:11.5px;opacity:.92;text-align:center;line-height:1.2}
.ok:hover{background:#dd3f55}
.ok:disabled{opacity:.4;cursor:default;box-shadow:none}
.nums{display:flex;gap:6px;justify-content:space-around;background:#fff;border-radius:7px;padding:4px}
.nums div{text-align:center}.nums small{display:block;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:#6b5560}
.nums b{font-size:21px}
.icons{display:flex;gap:6px}
.icon{flex:1;height:34px;border-radius:8px;background:var(--panel2);border:1px solid #3a2a30;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#d8c6cc;font-size:12px;gap:4px}
.icon.on{border-color:var(--gold);color:var(--gold)}
.dot{width:8px;height:8px;border-radius:50%;background:#5fb88a;display:inline-block}
.dot.off{background:#c9364a}

.pvcol{width:178px;flex:none;padding:8px;display:flex;flex-direction:column;justify-content:space-between;gap:8px;background:#120d10;border-right:1px solid #2a1f24;overflow:hidden}
.pv{display:flex;flex-direction:column;gap:4px;min-height:0}
.big{width:100%;aspect-ratio:5/7;border-radius:9px;background:#1d1519;border:1px solid #47343c;overflow:hidden;position:relative;flex:none}
.big img{width:100%;height:100%;object-fit:cover;display:block}
.big.empty{border-style:dashed;display:flex;align-items:center;justify-content:center;color:#6b5a60;font-size:12px;text-align:center;padding:10px}
.rows{font-size:11.5px;line-height:1.3;display:flex;flex-direction:column;gap:2px;max-height:150px;overflow-y:auto}
.rows div{display:flex;gap:5px}.rows b{color:var(--dim);font-weight:400;flex:none;width:58px}

main.field{flex:1;min-width:0;display:flex;flex-direction:column;position:relative}
.half{flex:1;min-height:0;position:relative;display:flex;align-items:center;gap:10px;padding:10px 12px 14px;overflow:hidden}
.half.top{background:#1c171b}
.half.bot{background:#231920}
.zones{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;height:100%}
.zone{display:flex;flex-direction:column;gap:3px;align-items:center}
.zone .lbl{font-size:9.5px}
.vrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center}
.side-z{flex:none;display:flex;flex-direction:column;gap:6px;align-items:center;max-height:100%;overflow-y:auto;padding:0 2px}
/* cartas */
.slot{width:var(--vw);height:var(--vh);flex:none;display:flex;align-items:center;justify-content:center;transition:width .25s}
.slot.locked{width:var(--vh)}
.top .slot{width:var(--ovw);height:var(--ovh)}.top .slot.locked{width:var(--ovh)}
.vc{width:var(--vw);height:var(--vh);border-radius:8px;background:#2a1d24;border:1px solid #4d3842;padding:0;position:relative;cursor:pointer;overflow:hidden;transition:transform .25s,box-shadow .2s;box-shadow:0 3px 10px #0008;text-align:left;flex:none}
.top .vc{width:var(--ovw);height:var(--ovh)}
.slot.locked .vc{transform:rotate(90deg)}
.vc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vc .fb{position:absolute;inset:0;padding:6px;display:flex;flex-direction:column;gap:2px}
.vc .fb b{font-family:var(--display);font-weight:400;font-size:13px;line-height:1.1;color:#f3e6c8}
.vc .fb small{font-size:10px;color:#b9a3ab}
.vc.has-img .fb{display:none}
.vc .bl{position:absolute;left:4px;bottom:4px;min-width:26px;height:26px;padding:0 5px;border-radius:13px;background:#8f2233;color:#fff;font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px #0009}
.vc .bl small{font-size:10px;opacity:.85;margin-left:1px}
.vc .tags{position:absolute;right:3px;bottom:4px;display:flex;flex-direction:column;align-items:flex-end;gap:2px;max-width:70%}
.vc .tag{font-size:9.5px;font-weight:700;padding:1px 5px;border-radius:4px;background:#000c;color:#f3e6c8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.vc .tag.cor{background:#5a2a6b}.vc .tag.att{background:#1d3a5a}
.vc.pick{box-shadow:0 0 0 3px var(--gold),0 0 22px #e2b04a80}
.vc.act{box-shadow:0 0 0 3px var(--red),0 0 18px #c9364a80}
.vc.blk{box-shadow:0 0 0 3px var(--blue),0 0 18px #6aa3d880}
.vc.chg{animation:chg 1s}
@keyframes chg{0%{filter:brightness(1.8)}100%{filter:none}}
.vc.back{background:repeating-linear-gradient(45deg,#3a1720 0 6px,#2c1119 6px 12px);cursor:default}
.vc.small{width:var(--uw);height:var(--uh)}
.slot.small{width:var(--uw);height:var(--uh)}
.vc.small .bl{min-width:20px;height:20px;font-size:12px;left:3px;bottom:3px}
.vc.torpor{filter:grayscale(.7) brightness(.8)}
.mini-c{display:flex;flex-direction:column;align-items:center;gap:2px}
.mc{width:64px;height:90px;border-radius:6px;background:#1d1519;border:1px solid #47343c;overflow:hidden;position:relative;cursor:pointer;padding:0}
.mc img{width:100%;height:100%;object-fit:cover}
.mc .fb{position:absolute;inset:0;padding:4px;font-size:9.5px;line-height:1.15}
.mc.has-img .fb{display:none}
.mc .cnt{position:absolute;right:3px;bottom:3px;background:#000c;border-radius:4px;font-size:10px;font-weight:700;padding:0 4px}
/* ação em curso: na divisa das metades */
.strip{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);z-index:5;display:flex;gap:6px;align-items:center;background:#120d10f2;border:1px solid #8f2233;border-radius:999px;padding:5px 12px;max-width:94%;flex-wrap:wrap;justify-content:center;box-shadow:0 6px 20px #000a;font-size:12.5px}
.strip b{color:var(--gold)}
.strip .sep{opacity:.4}
/* fases */
.phbar{display:flex;align-items:stretch;background:#120d10;border-top:1px solid #2a1f24;border-bottom:1px solid #2a1f24;flex:none}
.phbar .tn{padding:0 12px;display:flex;align-items:center;font-weight:700;font-size:13px;color:var(--gold);border-right:1px solid #2a1f24;white-space:nowrap;max-width:240px;overflow:hidden;text-overflow:ellipsis}
.ph{flex:1;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--dim);border-right:1px solid #2a1f24;white-space:nowrap;padding:7px 4px}
.ph.on{background:var(--gold);color:#1a1013;font-weight:700;font-size:16px}
.ph.past{color:#6b5a60}
/* mão */
.hand{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;padding:10px 12px 8px;align-items:flex-end;background:#0f0b0d;flex:none;min-height:calc(var(--hh) + 20px)}
.hc{width:var(--hw);height:var(--hh);flex:none;border-radius:9px;background:#1d1519;border:1px solid #47343c;overflow:hidden;position:relative;padding:0;cursor:pointer;transition:transform .15s,box-shadow .15s;text-align:left}
.hc:hover,.hc:focus-visible{transform:translateY(-10px)}
.hc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hc .fb{position:absolute;inset:0;display:flex;flex-direction:column}
.hc.has-img .fb{display:none}
.hc.play{box-shadow:0 0 0 3px var(--gold),0 8px 22px #e2b04a55}
.hc.sel{transform:translateY(-14px);box-shadow:0 0 0 3px #fff,0 8px 22px #fff5}
.tb{padding:4px 8px;font-size:10px;letter-spacing:.07em;text-transform:uppercase;font-weight:700;color:#fff;background:#4a3a40}
.t-act{background:#7d1e2c}.t-mod{background:#24476b}.t-react{background:#1d5a49}.t-combat{background:#7a4a16}.t-master{background:#5a4a1a}.t-pol{background:#4a2a6b}.t-ally{background:#2a5a2a}
.hn{font-family:var(--display);font-size:14px;line-height:1.1;color:#f3e6c8;padding:6px 8px 2px}
.hr{font-size:10.5px;color:#c7b0b8;padding:0 8px 3px}
.ht{font-size:10.5px;line-height:1.25;color:#e3d5d9;padding:3px 8px;white-space:pre-line;border-top:1px solid #33262c;overflow:hidden}
.empty-hand{color:#6b5a60;font-size:13px;padding:0 6px;align-self:center}
/* janelas */
.ov{position:fixed;inset:0;background:#0000008c;display:flex;align-items:center;justify-content:center;z-index:40;padding:12px}
.dlg{width:440px;max-width:100%;max-height:100%;overflow-y:auto;background:var(--panel);border:1px solid var(--gold);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:8px}
.dlg.err{border-color:var(--red)}
.dlg h3{font-family:var(--display);font-weight:400;font-size:20px;margin:0;color:var(--gold)}
.dlg.err h3{color:#ff8a98}
.dlg p{margin:0;font-size:14.5px;line-height:1.45;white-space:pre-line}
.opt{width:100%;text-align:left;background:var(--panel2);border:1px solid #4a3a40;border-radius:9px;padding:9px 12px;cursor:pointer;font-size:14px}
.opt:hover{border-color:var(--gold)}
.opt:disabled{cursor:default;opacity:.6}
.opt:disabled:hover{border-color:#4a3a40}
.mini{background:var(--panel2);border:1px solid #3a2a30;border-radius:7px;padding:6px 12px;font-size:13px;cursor:pointer;align-self:flex-end}
.drawer{position:absolute;left:0;top:0;bottom:0;width:340px;max-width:85%;z-index:30;background:#120d10f7;border-right:1px solid #3a2a30;display:flex;flex-direction:column;box-shadow:10px 0 30px #000a}
.drawer header{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-bottom:1px solid #2a1f24}
.drawer ol{list-style:none;margin:0;padding:8px 12px;overflow-y:auto;flex:1;font-size:13px;line-height:1.4;display:flex;flex-direction:column;gap:4px}
.drawer li{color:#d8c6cc}
/* linhas do registro: prefixo lg- para não herdar estilos de outras partes da mesa (.pool, .card, .edge…) */
.drawer li.lg{font-size:13px;line-height:1.4;font-weight:400;padding:0;margin:0;background:none;border:0;border-radius:0}
.drawer li.lg-turn{color:var(--gold);font-weight:700;margin-top:6px}
.drawer li.lg-combat{color:#ffb38a}.drawer li.lg-bleed{color:#ff8a98}.drawer li.lg-card{color:#e8d7a8}.drawer li.lg-win{color:var(--gold);font-weight:700}
.drawer li.lg-pool{color:#e9b8c0}.drawer li.lg-vote{color:#d9c27a}.drawer li.lg-block{color:#9cc3ea}.drawer li.lg-err{color:#ff6b6b}
.toast{position:fixed;left:50%;top:10px;transform:translateX(-50%);z-index:35;background:#2a2030;border:1px solid var(--gold);border-radius:10px;padding:8px 14px;max-width:min(560px,90vw);font-size:13.5px;box-shadow:0 8px 30px #000c;pointer-events:none}
.toast b{color:var(--gold)}
#rot{display:none;position:fixed;inset:0;z-index:60;background:#0f0b0d;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;text-align:center}
@media (orientation:portrait){body.ingame #rot{display:flex}}
/* telas baixas (celular deitado) */
@media (max-height:620px){
  :root{--vw:84px;--vh:118px;--ovw:74px;--ovh:104px;--hw:92px;--hh:128px;--uw:58px;--uh:81px}
  .pcol{width:168px;padding:6px;gap:6px}.pvcol{display:none}
  .pool{font-size:28px}.pinfo{padding:5px 7px;gap:3px}.ctr span{font-size:11px}
  .prompt{padding:6px;gap:4px}.prompt .pt{font-size:14.5px}.prompt .pb{font-size:12px}
  .pbtn{padding:4px 6px;font-size:12.5px}.pbtn small{display:none}.ok{padding:5px}.ok b{font-size:15px}.ok span{font-size:10.5px}
  .half{padding:6px 8px 9px}.zones{gap:10px}
  .ph{font-size:11.5px;padding:4px 2px}.ph.on{font-size:13px}.phbar .tn{font-size:11px;padding:0 6px;max-width:130px}
  .hand{padding:6px 8px 5px}
  .vc .bl{min-width:20px;height:20px;font-size:12px}.vc .tag{font-size:8.5px}
  .mc{width:46px;height:64px}
  .icon{height:28px}
}
.big .fb{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden}
.big.has-img .fb{display:none}
.big .hn{font-size:16px}.big .ht{font-size:12px}
#strip{position:absolute;left:0;right:0;height:0;z-index:6;pointer-events:none}
#strip .strip{pointer-events:auto}

/* lado direito de cada metade: mesa aberta (torpor, aliados, mestres) + região não controlada */
.side-area{flex:none;display:flex;gap:10px;height:100%;padding-left:10px;border-left:1px dashed #3a2a30}
.scol{display:flex;flex-direction:column;gap:8px;overflow-y:auto;overflow-x:hidden;max-height:100%;padding:2px 2px 6px}
.sec{display:flex;flex-direction:column;gap:3px}
.sgrid{display:grid;grid-template-columns:repeat(2,var(--uw));gap:6px;align-items:center;justify-items:center}
.sgrid.ms{grid-template-columns:repeat(2,64px)}
.none{font-size:11px;color:#5a4a50;grid-column:1/-1;justify-self:start}
.slot.small.locked{width:var(--uh);grid-column:span 2}
.vc.small .tags{display:none}
.mc .cnt{max-width:90%}
/* microfone e quem está falando */
.icon.off{color:#ff8a98;border-color:#7a2a36}
.pinfo.talk{box-shadow:0 0 0 2px #5fb88a,0 0 14px #5fb88a88}
/* carta grande no centro */
.bigview{display:flex;gap:16px;max-width:min(980px,96vw);max-height:94vh;background:var(--panel);border:1px solid var(--gold);border-radius:14px;padding:14px;box-shadow:0 20px 60px #000c}
.bigview .bvimg{height:min(80vh,600px);width:auto;aspect-ratio:5/7;flex:none}
.bvinfo{flex:1;min-width:250px;max-width:420px;overflow-y:auto;display:flex;flex-direction:column;gap:7px}
.bvinfo h3{font-family:var(--display);font-weight:400;font-size:26px;margin:0;color:var(--gold);line-height:1.1}
.bvt .tb{display:inline-block;border-radius:5px}
.t-vamp{background:#5a1a26}
.bvr{display:flex;gap:8px;font-size:14px}.bvr b{color:var(--dim);font-weight:400;width:88px;flex:none}
.bvd{display:flex;flex-wrap:wrap;gap:5px}
.dchip{display:flex;flex-direction:column;align-items:center;font-size:12.5px;font-weight:700;padding:3px 8px;border-radius:6px;border:1px solid #6b5560}
.dchip small{font-size:9.5px;font-weight:400;color:var(--dim)}
.dchip.sup{background:var(--gold);color:#1a1013;border-color:var(--gold)}.dchip.sup small{color:#3a2a10}
.bvtext{margin:0;font-size:14px;line-height:1.45;white-space:pre-line;background:#120d10;border:1px solid var(--line);border-radius:9px;padding:9px 11px}
.bvstate{font-size:13.5px;background:#1d2a36;border:1px solid #2f5f8c;border-radius:9px;padding:8px 10px;line-height:1.5}
.bvwhy{font-size:14px;background:#2a1418;border:1px solid var(--red);border-radius:9px;padding:9px 11px;color:#ffc2ca;line-height:1.45}
.bvwhy b{color:#ff8a98}
.bvhint{font-size:14px;background:#2a2210;border:1px solid #8a6a3a;border-radius:9px;padding:9px 11px;line-height:1.45}
.lnk{background:none;border:0;padding:0;color:var(--gold);text-decoration:underline;cursor:pointer;font-size:inherit}
.pv .big[data-name]{cursor:zoom-in}
@media (max-height:620px){
  .empty-sec{display:none}
  .side-area{gap:6px;padding-left:6px}
  .sgrid.ms{grid-template-columns:repeat(2,46px)}
  .bigview{padding:8px;gap:10px}.bigview .bvimg{height:86vh}
  .bvinfo h3{font-size:19px}.bvtext{font-size:12.5px}.bvr{font-size:12.5px}
}
@media (max-height:620px){
  .strip{font-size:11px;padding:2px 9px;flex-wrap:nowrap;white-space:nowrap;max-width:62%;overflow:hidden;gap:4px}
  .strip span{overflow:hidden;text-overflow:ellipsis}
  .toast{font-size:12px;padding:5px 10px;top:4px;max-width:60vw}
}
@media (max-height:620px){
  :root{--vw:69px;--vh:96px;--ovw:60px;--ovh:84px;--hw:76px;--hh:106px;--uw:46px;--uh:64px}
  .pinfo .nm .lbl{display:none}.pool{font-size:23px}.pool small{display:none}
  .ctr span{padding:1px 0;font-size:10.5px}.ctr span small{display:none}
  .ok{position:sticky;bottom:0}
  .hand{min-height:calc(var(--hh) + 12px)}
  .half{padding:4px 6px 6px}
  .vc .bl{min-width:18px;height:18px;font-size:11px;left:2px;bottom:2px}
  .lbl{font-size:9px}
}
/* áudio: microfone, saída de som e medidor (lobby e painel da mesa) */
.audio,.micpanel{display:flex;flex-direction:column;gap:6px}
.audio{max-width:520px}
.audio select,.micpanel select{width:100%}
.meterbox{display:flex;gap:8px;align-items:center}
.meter{flex:1;height:10px;background:#0f0b0d;border:1px solid #4a3a40;border-radius:6px;overflow:hidden}
.meter i{display:block;height:100%;width:0;background:#5fb88a;transition:width .08s linear}
.micpanel{position:fixed;left:8px;bottom:52px;z-index:46;width:300px;max-width:calc(100vw - 16px);max-height:calc(100vh - 70px);overflow-y:auto;background:var(--panel);border:1px solid var(--gold);border-radius:12px;padding:12px;box-shadow:0 12px 40px #000c}
.micpanel .btn{padding:6px 12px}
@media (max-height:620px){.micpanel{bottom:40px;width:270px;padding:9px;gap:4px}}
/* fase de influência clicável e janela grande da região não controlada */
.ph.phb{background:none;border:0;border-right:1px solid #2a1f24;cursor:pointer;font:inherit;color:inherit}
.ph.phb.on{background:var(--gold);color:#1a1013}
.ph.phb:hover{text-decoration:underline}
.lblbtn{font-size:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--gold);text-decoration:none}
.lblbtn:hover{text-decoration:underline}
.inflp{width:min(1100px,96vw);max-height:94vh;display:flex;flex-direction:column;gap:10px;background:var(--panel);border:1px solid var(--gold);border-radius:14px;padding:12px 14px;box-shadow:0 20px 60px #000c}
.inflp header{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.inflp header .ittl{font-size:22px;color:var(--gold);display:block}
.inflp header small b{color:var(--gold)}
.inflp header small{font-size:13.5px;color:#d8c6cc}
.igrid{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;overflow-y:auto;padding:4px;flex:1;min-height:0}
.ivc{height:min(52vh,320px);aspect-ratio:5/7;position:relative;border-radius:10px;overflow:hidden;background:#2a1d24;border:1px solid #4d3842;padding:0;cursor:pointer;flex:none;text-align:left}
.ivc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ivc .fb{position:absolute;inset:0;padding:8px;display:flex;flex-direction:column;gap:3px}
.ivc .fb b{font-family:var(--display);font-weight:400;font-size:17px;color:#f3e6c8}
.ivc .fb small{font-size:12px;color:#b9a3ab}
.ivc.has-img .fb{display:none}
.ivc.pick{box-shadow:0 0 0 3px var(--gold),0 0 22px #e2b04a80}
.ivc:active{transform:scale(.97)}
.ibl{position:absolute;left:6px;bottom:6px;min-width:44px;height:36px;padding:0 8px;border-radius:18px;background:#8f2233;color:#fff;font-weight:700;font-size:20px;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px #000a}
.ibl small{font-size:13px;opacity:.85;margin-left:1px}
.iready{position:absolute;left:6px;right:6px;top:6px;background:#1d3326;border:1px solid #5fb88a;color:#bff0d3;border-radius:6px;font-size:12px;font-weight:700;padding:3px 6px;text-align:center}
.ifoot{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
/* cartas jogadas: miniatura no canto (celular) e aba no registro */
#lastChip{position:absolute;left:8px;top:6px;z-index:7;display:none}
.lastchip{display:flex;gap:6px;align-items:center;background:#120d10e6;border:1px solid #4a3a40;border-radius:9px;padding:3px 8px 3px 3px;cursor:pointer;max-width:210px;text-align:left}
.lastchip .mc{width:34px;height:47px;flex:none;cursor:pointer}
.lastchip .mc .fb{font-size:7px}
.lct{display:flex;flex-direction:column;min-width:0;line-height:1.15}
.lct b{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lct small{font-size:10px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dtabs{display:flex;gap:4px}
.dtabs button{background:var(--panel2);border:1px solid #3a2a30;border-radius:7px;padding:5px 10px;font-size:13px;cursor:pointer}
.dtabs button.on{border-color:var(--gold);color:var(--gold)}
.hitem{display:flex;gap:8px;align-items:flex-start;padding:4px 0;border-bottom:1px solid #2a1f24}
.hitem.mine .hinfo b{color:#9fd0ff}
.hitem .mc{width:48px;height:67px;flex:none}
.hinfo{display:flex;flex-direction:column;gap:1px;min-width:0}
.hinfo b{font-size:13.5px;color:#f3e6c8}
.hinfo small{font-size:11.5px;color:#b9a3ab}
@media (max-height:620px){
  #lastChip{display:block}
  .inflp{padding:8px 10px;gap:6px}
  .inflp header .ittl{font-size:17px}.inflp header small{font-size:12px}
  .ivc{height:min(48vh,200px)}
  .ifoot .btn{padding:6px 10px;font-size:13px}
  .inflp{max-height:96vh}
  .ibl{min-width:38px;height:30px;font-size:17px}
  .drawer{width:300px}
}

/* ---------------- mesa de 3: lobby (lugares) ---------------- */
.seg{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.sb{background:#221a1e;border:1px solid #4a3a40;border-radius:9px;padding:7px 12px;cursor:pointer;font-size:14px}
.sb.on{border-color:var(--gold);color:var(--gold);background:#2a2016}
.seatrow{display:flex;flex-direction:column;gap:5px;background:#150f12;border:1px solid var(--line);border-radius:10px;padding:8px 10px;margin-bottom:8px}
.seatrow .seg{margin:0}
.seatrow b{font-size:13.5px}
.mode select.in{width:100%}

/* ---------------- mesa de 3: barra de jogadores ---------------- */
.pbar{flex:none;display:flex;gap:8px;padding:6px 8px;background:#120d10;border-bottom:1px solid #2a1f24;z-index:20}
.pbar:empty{display:none}
.chipw{position:relative;flex:1;min-width:0;max-width:480px}
.chip{width:100%;display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:5px 8px;cursor:pointer;text-align:left}
.chip:hover,.chip:focus-visible{border-color:#7a5a66;outline:none}
.chip.main{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.chip.turn .cn b::after{content:" ◆";color:var(--gold);font-size:10px}
.chip.out{opacity:.55}
.chip.talk{box-shadow:0 0 0 2px #3fbf6f}
.role{font-size:10px;font-weight:700;letter-spacing:.06em;padding:2px 6px;border-radius:5px;white-space:nowrap;flex:none}
.role.prey{background:#8f2233;color:#fff}
.role.pred{background:#2f5f8c;color:#fff}
.role.you{background:var(--gold);color:#1a1013}
.cn{display:flex;flex-direction:column;min-width:0;line-height:1.15}
.cn b{font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cn small{font-size:11px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sts{margin-left:auto;display:flex;gap:8px;align-items:center;flex:none}
.st{display:flex;flex-direction:column;align-items:center;line-height:1;min-width:28px}
.st b{font-size:16px}.st b.pl{color:#ff8a98;padding:0;background:none;border:0;border-radius:0;display:inline}.st b.vt{color:var(--gold)}
.st small{font-size:9px;color:var(--dim);text-transform:uppercase;letter-spacing:.05em;margin-top:2px}
.ibtn{flex:none;width:22px;height:22px;border-radius:50%;border:1px solid #6b5560;background:none;color:#d8c6cc;font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.pop{display:none;position:absolute;top:calc(100% + 6px);left:0;width:min(420px,80vw);z-index:40;background:var(--panel);border:1px solid var(--gold);border-radius:12px;padding:12px;box-shadow:0 16px 40px #000c;flex-direction:column;gap:7px;cursor:default}
.chipw:last-child .pop{left:auto;right:0}
.chipw:hover .pop,.chipw.pin .pop{display:flex}
.pophd{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.pophd b{font-size:20px;color:var(--gold)}.pophd small{font-size:12px;color:var(--dim)}
.poprel{font-size:12.5px;color:#d8c6cc}
.mv{display:flex;align-items:center;gap:6px;font-size:12.5px;padding:3px 6px;background:var(--panel2);border-radius:6px}
.mv b{flex:1;font-weight:500}.mv small{font-size:11px;color:var(--dim)}
.mv .bl{background:#8f2233;color:#fff;border-radius:9px;padding:0 6px;font-weight:700;font-size:12px}
.tagv{font-size:10.5px;border:1px solid #6b5560;border-radius:4px;padding:0 4px;color:var(--gold)}
.popg{display:grid;grid-template-columns:1fr 1fr;gap:6px;font-size:12.5px}
.popl{display:flex;gap:5px;flex-wrap:wrap}.popl span{font-size:12px;background:var(--panel2);border:1px solid #3a2a30;border-radius:6px;padding:2px 7px}
.ribbon{position:absolute;left:0;right:0;top:0;height:22px;display:flex;align-items:center;gap:10px;padding:0 12px;font-size:12px;z-index:2;pointer-events:none}
.ribbon b{font-weight:700;letter-spacing:.04em}.ribbon span{opacity:.85}
.ribbon .rhint{margin-left:auto;opacity:.7}
.ribbon.prey{background:#8f223333;color:#ffb3bd}.ribbon.pred{background:#2f5f8c33;color:#a9cdf0}.ribbon.other{background:#ffffff10;color:#d8c6cc}.ribbon.you{background:#e2b04a22;color:var(--gold)}
#table.mp .half{padding-top:26px}
.edge.out{background:#555;color:#eee}
.stand{list-style:none;margin:6px 0 10px;padding:0;display:flex;flex-direction:column;gap:4px}
.stand li{display:flex;justify-content:space-between;gap:12px;background:var(--panel2);border-radius:8px;padding:5px 10px}
.stand li.me{border:1px solid var(--gold)}
@media (max-height:620px){
  .pbar{padding:3px 6px;gap:5px}
  .chip{padding:3px 6px;gap:5px}
  .cn b{font-size:12.5px}.cn small{display:none}
  .st{min-width:22px}.st b{font-size:13px}.st small{font-size:8px}
  .st:nth-child(3){display:none}
  .role{font-size:9px;padding:1px 4px}
  .chipw:hover .pop{display:none}.chipw.pin .pop{display:flex}
  .pop{width:min(360px,70vw);max-height:70vh;overflow:auto;padding:9px;gap:5px}
  .ribbon{height:18px;font-size:10.5px}.ribbon .rhint{display:none}
  #table.mp .half{padding-top:20px}
}
#table.mp ~ #x1toast{top:64px}
@media (max-height:620px){#table.mp ~ #x1toast{top:46px}}
.dgrp{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.dtag{align-self:flex-start;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;border-radius:5px;padding:1px 6px;margin-bottom:3px}
.dtag.x1{background:#2f5f8c;color:#fff}.dtag.m3{background:#8f2233;color:#fff}
.dwarn{margin:4px 0 8px;font-size:13px}
/* botão do registro das ações, no alto da mesa */
.logtop{position:absolute;top:6px;right:8px;z-index:25;display:flex;align-items:center;gap:5px;background:#1a1316e6;border:1px solid var(--gold);color:var(--gold);border-radius:999px;padding:4px 11px 4px 9px;font-size:12.5px;font-weight:700;cursor:pointer;box-shadow:0 4px 14px #0008}
.logtop:hover,.logtop.on{background:var(--gold);color:#1a1013}
#table.mp .pbar{padding-right:116px}
#table:not(.mp) .ribbon .rhint{display:none}
@media (max-height:620px){.logtop{top:4px;right:6px;padding:3px 8px;font-size:11px}.logtop svg{width:14px;height:14px}#table.mp .pbar{padding-right:92px}}
#table:not(.mp) .half.top{padding-top:36px}
@media (max-height:620px){#table:not(.mp) .half.top{padding-top:26px}}
/* celular: o sangue dos vampiros em jogo fica no canto superior direito (embaixo a carta fica coberta pelo layout) */
@media (max-height:620px){
  .vc .bl,.vc.small .bl{top:2px;right:2px;left:auto;bottom:auto}
  /* vampiro travado está girado 90°: o canto superior esquerdo da carta vira o superior direito na tela */
  .slot.locked .vc .bl{left:2px;right:auto}
}
/* coluna das cartas jogadas: pode ser fechada */
.pvcol{position:relative;transition:width .2s}
.pvtog{position:absolute;top:4px;right:4px;z-index:3;width:22px;height:22px;border-radius:6px;border:1px solid #4a3a40;background:#1a1316;color:var(--gold);font-size:15px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.pvtog:hover{border-color:var(--gold)}
.pvcol.closed{width:30px;padding:4px;cursor:pointer}
.pvcol.closed .pv{display:none}
.pvcol.closed .pvtog{right:3px}
.pvcol.closed::after{content:"cartas jogadas";position:absolute;top:40px;left:50%;transform:translateX(-50%) rotate(180deg);writing-mode:vertical-rl;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
html[lang="en"] .pvcol.closed::after{content:"played cards"}
/* menu do botão direito (ampliar / voltar jogadas) */
.ctxmenu{position:fixed;z-index:60;min-width:230px;max-width:320px;background:var(--panel);border:1px solid var(--gold);border-radius:10px;padding:5px;box-shadow:0 12px 34px #000c;display:flex;flex-direction:column;gap:2px}
.ctxmenu button{display:flex;flex-direction:column;align-items:flex-start;gap:1px;text-align:left;background:none;border:0;border-radius:7px;padding:7px 10px;cursor:pointer;font-size:13.5px;color:var(--text)}
.ctxmenu button:hover:not(:disabled){background:var(--panel2);color:var(--gold)}
.ctxmenu button:disabled{opacity:.45;cursor:default}
.ctxmenu button small{font-size:11px;color:var(--dim);max-width:290px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ctxmenu .note{margin:4px 10px 6px;font-size:11.5px;color:var(--dim)}
.drawer .dlrow{display:flex;align-items:center;gap:8px;padding:6px 12px;border-bottom:1px solid #2a1f24}
.drawer .dlrow small{color:var(--dim);font-size:11px}
.drawer .mini.dl{border-color:var(--gold);color:var(--gold)}
.drawer li.lg-undo{color:#9fd4a8;font-weight:700}

/* ---------------- cartão da ação em curso (etapas) ---------------- */
#actCard{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:20;width:min(640px,76%);pointer-events:none}
#actCard:empty{display:none}
.acard{pointer-events:auto;background:#140e11f2;border:1px solid var(--gold);border-radius:14px;box-shadow:0 18px 50px #000d;display:flex;flex-direction:column;overflow:hidden;max-height:min(420px,70vh)}
.acard .ahead{display:grid;grid-template-columns:1fr auto auto;grid-template-areas:"l r m" "b r m" "w w w";column-gap:10px;align-items:center;padding:10px 12px 8px;border-bottom:1px solid #3a2a30}
.acard .ahead .lbl{grid-area:l}
.acard .ahead b{grid-area:b;font-family:var(--display);font-weight:400;font-size:18px;color:var(--gold);line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acard .awhat{grid-area:w;font-size:13px;color:var(--text);margin-top:2px}
.acard .res{grid-area:r}
.acard .amin{grid-area:m;background:none;border:1px solid #4d3842;border-radius:6px;width:26px;height:26px;cursor:pointer;color:var(--dim)}
.acard.min .ahead{border-bottom:0}.acard.min .awhat{display:none}
.res{font-size:11px;font-weight:700;letter-spacing:.06em;border-radius:999px;padding:3px 9px;white-space:nowrap;flex:none}
.res.r-ok{background:#2e6b3e;color:#e6ffe9}.res.r-no{background:#7a2232;color:#ffe3e8}.res.r-pend{background:#3a2e1a;color:var(--gold);border:1px solid #6b5426}
.asteps{display:flex;gap:4px;padding:8px 10px 0;overflow-x:auto}
.ast{flex:1;min-width:0;background:#1f171b;border:1px solid #3a2a30;border-radius:8px;padding:4px 6px;cursor:pointer;text-align:left;display:flex;flex-direction:column}
.ast b{font-size:12.5px;font-weight:700;color:var(--dim)}.ast span{font-size:10px;color:#7d6a71;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ast.done b{color:var(--text)}
.ast.on{border-color:var(--gold);background:#2a2116}.ast.on b{color:var(--gold)}
.abody{padding:8px 12px;overflow-y:auto;display:flex;flex-direction:column;gap:5px;min-height:46px}
.aline{display:flex;gap:8px;font-size:13.5px;line-height:1.35}.aline .ic{flex:none;width:18px;text-align:center}
.aline.note{color:var(--dim)}.aline.you{color:var(--gold)}
.awhy{margin-top:4px;background:#1d1a24;border:1px solid #3a3550;border-radius:8px;padding:6px 9px;font-size:12.5px;color:#cfc6e0}
.awhy b{display:block;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#a99ad8;margin-bottom:2px}
.afoot{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:7px 10px;border-top:1px solid #3a2a30;background:#100b0d}
.apace{display:flex;gap:4px;align-items:center;flex-wrap:wrap;margin-right:auto}.apace .lbl{margin-right:2px}
.sb{background:#1f171b;border:1px solid #4d3842;border-radius:999px;padding:3px 10px;font-size:12px;cursor:pointer;color:var(--dim)}
.sb.on{border-color:var(--gold);color:var(--gold)}
.afoot .go{background:var(--gold);color:#1a1013;border:0;border-radius:8px;padding:6px 14px;font-weight:700;cursor:pointer}
.slot{position:relative}
.dlt{position:absolute;top:-6px;left:50%;transform:translateX(-50%);z-index:4;background:#7a2232;color:#fff;font-weight:800;font-size:15px;border-radius:999px;padding:1px 9px;box-shadow:0 3px 10px #000a;animation:dltIn .45s ease-out;pointer-events:none}
.dlt.pos{background:#2e6b3e}
@keyframes dltIn{from{transform:translate(-50%,8px);opacity:0}to{transform:translate(-50%,0);opacity:1}}
.drawer li.aitem{display:flex;gap:8px;align-items:flex-start;cursor:pointer;padding:6px 4px;border-bottom:1px solid #2a1f24;font-size:13px}
.drawer li.aitem:hover{background:#1f171b}
.drawer li.aitem small{display:block;color:var(--dim);font-size:11.5px}
.drawer li.aitem .res{font-size:9.5px;padding:2px 6px;margin-top:1px}
@media (max-height:620px){
  #actCard{width:min(440px,78%)}
  .acard{max-height:76vh}
  .acard .ahead{padding:6px 9px 5px}.acard .ahead b{font-size:15px}.acard .awhat{font-size:12px}
  .ast{padding:2px 5px}.ast span{display:none}.ast b{font-size:11.5px}
  .abody{padding:5px 9px;gap:3px}.aline{font-size:12.5px}
  .afoot{padding:4px 8px;gap:4px}.sb{padding:2px 8px;font-size:11px}.apace .lbl{display:none}
  .dlt{font-size:12px;padding:0 6px}
}
@media (prefers-reduced-motion:reduce){.dlt{animation:none}}
#actCard.withdrawer{left:calc(50% + 170px);width:min(600px,calc(100% - 360px))}
/* carta em evidência no cartão da ação */
.acard .amid{display:flex;gap:10px;min-height:0;flex:1;overflow:hidden;padding-left:12px}
.acard .amid .abody{flex:1;min-width:0;padding-left:0}
.aev{flex:none;width:118px;padding:8px 0;display:flex;flex-direction:column;gap:6px;align-items:flex-start;position:relative}
.aev .big{width:118px;cursor:zoom-in;box-shadow:0 6px 18px #000a}
.aev .big.sm{width:62px;position:absolute;right:-8px;bottom:2px;border-color:var(--red)}
.acard{max-height:min(460px,74vh)}
.acard.min .afoot{border-top:0;justify-content:flex-end;padding-top:0}
/* carta ampliada ao passar o mouse */
#hoverZoom{position:fixed;z-index:60;width:280px;pointer-events:none;filter:drop-shadow(0 16px 40px #000d)}
#hoverZoom .big{border-color:var(--gold)}
#hoverZoom .big .hn{font-size:20px}#hoverZoom .big .ht{font-size:14px}
@media (max-height:620px){.aev{width:70px;padding:5px 0}.aev .big{width:70px}.aev .big.sm{width:38px;right:-6px}.acard .amid{padding-left:9px;gap:8px}}
@media (max-height:760px){#hoverZoom{width:230px}}
/* mesa de 4 e 5: chips mais compactos na barra de cima */
.pbar.many .st:nth-child(3){display:none}
.pbar.many .chip{gap:6px;padding:5px 7px}
.pbar.many .sts{gap:6px}
.pbar.lots .role{display:none}
@media (max-height:620px){
  .pbar.many .chip{gap:4px;padding:3px 5px}
  .pbar.many .st small{display:none}
  .pbar.lots .role{max-width:44px;overflow:hidden;text-overflow:ellipsis}
  .pbar.lots .ibtn{width:18px;height:18px;font-size:10px}
  .pbar.lots .cn b{font-size:11.5px}
}
.pbar.lots .chip.r-prey{border-left:4px solid #c9364a}.pbar.lots .chip.r-pred{border-left:4px solid #4f8fcc}
@media (max-height:620px){.pbar.lots .cn small{display:none}}
@media (max-height:620px){.pbar.lots .sts{gap:2px}.pbar.lots .st{min-width:16px}.pbar.lots .st b{font-size:12px}.pbar.lots .chip{gap:3px;padding:3px 4px}}
/* cartão da ação: arrastar pela faixa de cima */
.acard .ahead{cursor:grab;touch-action:none;user-select:none}
.acard .ahead:active{cursor:grabbing}
.acard .ahead::before{content:"⠿";position:absolute;left:50%;top:1px;transform:translateX(-50%);font-size:10px;color:#6b5a60;letter-spacing:2px}
.acard .ahead{position:relative}
/* cartas no vampiro: atrás da carta, deslocadas para a esquerda e para baixo */
.slot{--ao:16px}
.slot.hasatt{margin-left:calc(var(--na) * var(--ao));margin-bottom:calc(var(--na) * var(--ao))}
.slot > .vc{z-index:2}
.attc{position:absolute;left:calc(50% - var(--vw) / 2 - (var(--k) + 1) * var(--ao));top:calc(50% - var(--vh) / 2 + (var(--k) + 1) * var(--ao));width:var(--vw);height:var(--vh);z-index:1;padding:0;border-radius:8px;border:1px solid #8a6d7a;background:#2a2030;overflow:hidden;cursor:zoom-in;box-shadow:0 3px 10px #000a;text-align:left}
.attc:hover,.attc:focus-visible{border-color:var(--gold);outline:none;z-index:3}
.attc img{width:100%;height:100%;object-fit:cover;display:block}
.attc .fb{position:absolute;inset:0;display:flex;flex-direction:column;padding:4px 5px;font-size:10px;gap:2px;overflow:hidden}
.attc .fb .hn{font-size:11px;font-family:var(--display)}.attc .fb .ht{display:none}
.attc.has-img .fb{display:none}
.top .attc{left:calc(50% - var(--ovw) / 2 - (var(--k) + 1) * var(--ao));top:calc(50% - var(--ovh) / 2 + (var(--k) + 1) * var(--ao));width:var(--ovw);height:var(--ovh)}
.slot.small .attc{left:calc(50% - var(--uw) / 2 - (var(--k) + 1) * var(--ao));top:calc(50% - var(--uh) / 2 + (var(--k) + 1) * var(--ao));width:var(--uw);height:var(--uh)}
.slot.small{--ao:10px}
.vc .tag.att{display:none}
@media (max-height:620px){.slot{--ao:11px}.slot.small{--ao:7px}}