:root{
  --paper:#FBFBF8; --ink:#000; --soft:#E4E4DC; --tone:rgba(0,0,0,.16); --muted:#5A5A54;
  --red:#E4002B; --p1:#E4002B; --p2:#0067C5; --p3:#C98A00; --p4:#13874B; --p5:#8E3BC9; --p6:#D2541B; --p7:#0E8C99; --p8:#C2307A;
  --safe:#E3EFFA; --danger:#FBE3E8; --final:#F4F0DC; --road:#D6D6CC;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#17171C; --ink:#F2F2EC; --soft:#2A2A31; --tone:rgba(255,255,255,.14); --muted:#B4B4AA;
    --p1:#FF4D6A; --p2:#4DA3FF; --p3:#F2B632; --p4:#3CC47E; --p5:#B47CFF; --p6:#FF8A4D; --p7:#3FD0DC; --p8:#FF6FB5; --safe:#1C2A38; --danger:#3A1C24; --final:#33301F; --road:#34343C;
  }
}
:root[data-theme="dark"]{
  --paper:#17171C; --ink:#F2F2EC; --soft:#2A2A31; --tone:rgba(255,255,255,.14); --muted:#B4B4AA;
  --p1:#FF4D6A; --p2:#4DA3FF; --p3:#F2B632; --p4:#3CC47E; --p5:#B47CFF; --p6:#FF8A4D; --p7:#3FD0DC; --p8:#FF6FB5; --safe:#1C2A38; --danger:#3A1C24; --final:#33301F; --road:#34343C;
}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;min-height:100%;background:var(--paper);color:var(--ink);
  font-family:"Zen Kaku Gothic New",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:15px;line-height:1.45}
h1,h2,h3{font-family:"Dela Gothic One","Arial Black",Impact,system-ui,sans-serif;font-weight:400;margin:0;line-height:1.15}
h2{font-size:1.35rem;margin-bottom:.5rem}
h3{font-size:1rem;margin:.9rem 0 .4rem}
p{margin:.35rem 0}
button{font:inherit;color:inherit}
.muted{color:var(--muted)}
.btn{border:2.5px solid var(--ink);background:var(--paper);color:var(--ink);padding:.55em 1em;font-weight:700;cursor:pointer;
  border-radius:4px;box-shadow:3px 3px 0 var(--ink);transition:transform .08s,box-shadow .08s;text-align:left}
.btn:active:not(:disabled){transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
.btn.primary{background:var(--ink);color:var(--paper)}
.btn.sm{padding:.3em .7em;font-size:.88rem;box-shadow:2px 2px 0 var(--ink)}
.btn:disabled{opacity:.38;cursor:not-allowed;box-shadow:none}
.btn.big{font-size:1.1rem;padding:.75em 1.3em}
:focus-visible{outline:3px solid var(--red);outline-offset:2px}
input[type=text],input[type=number]{font:inherit;color:var(--ink);background:var(--paper);border:2.5px solid var(--ink);border-radius:4px;padding:.5em .6em;width:100%}

/* MENU */
#menu{max-width:760px;margin:0 auto;padding:16px 16px 40px}
.hero{position:relative;border:3px solid var(--ink);padding:34px 20px 26px;margin:8px 0 18px;overflow:hidden;
  background:repeating-conic-gradient(from 0deg at 50% 120%, var(--soft) 0 2.2deg, transparent 2.2deg 6deg)}
.logo{font-size:clamp(2.4rem,11vw,4.6rem);line-height:.95;transform:rotate(-3deg);transform-origin:left}
.logo span{display:block;-webkit-text-stroke:2px var(--ink);color:var(--paper);text-shadow:5px 5px 0 var(--red)}
.tag{margin-top:16px;font-weight:700;max-width:30ch;background:var(--paper);display:inline-block;padding:2px 6px;border:2px solid var(--ink)}
fieldset{border:3px solid var(--ink);margin:0 0 14px;padding:12px}
legend{font-family:"Dela Gothic One",system-ui,sans-serif;padding:0 6px}
.modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px}
.mode{display:grid;gap:2px;border:2px solid var(--ink);padding:10px;cursor:pointer;position:relative}
.mode input{position:absolute;opacity:0}
.mode span{font-size:.9rem;color:var(--muted)}
.mode:has(input:checked){background:var(--ink);color:var(--paper)}
.mode:has(input:checked) span{color:var(--paper)}
.mode:has(input:focus-visible){outline:3px solid var(--red);outline-offset:2px}
.names{display:grid;gap:8px}
.names label{display:flex;gap:8px;align-items:center}
.dot{display:inline-block;width:14px;height:14px;border-radius:50%;background:var(--c);border:2px solid var(--ink);flex:none}
.hint{font-size:.9rem;color:var(--muted)}

/* GAME */
#game{min-height:100%;padding-bottom:84px}
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;display:flex;align-items:center;gap:12px;padding:8px 12px;
  background:var(--paper);border-bottom:3px solid var(--ink)}
.link{background:none;border:none;text-decoration:underline;cursor:pointer;padding:4px}
#turn{flex:1;font-family:"Dela Gothic One",system-ui,sans-serif;font-size:1.05rem;display:flex;align-items:center;gap:8px;min-width:0}
#turn .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#deck{font-size:.85rem;color:var(--muted);white-space:nowrap}
.layout{display:grid;grid-template-columns:1fr;gap:14px;padding:12px;max-width:1280px;margin:0 auto}
@media (min-width:980px){.layout{grid-template-columns:minmax(0,1.7fr) minmax(300px,1fr)}.layout aside{position:sticky;top:calc(var(--hh,64px) + 10px);align-self:start;max-height:calc(100vh - var(--hh,64px) - 104px);overflow-y:auto;overscroll-behavior:contain;padding-right:4px}}
.layout>*{min-width:0}
.zoombar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.zoombar .lg{margin-left:auto;font-size:.8rem;color:var(--muted)}
#boardwrap{border:3px solid var(--ink);overflow-x:auto;overflow-y:hidden;background:var(--paper)}
#map{display:block;height:auto}
.road{fill:none;stroke:var(--road);stroke-width:46;stroke-linecap:round;stroke-linejoin:round}
.lane{fill:none;stroke:var(--ink);stroke-width:2;stroke-dasharray:10 12;opacity:.3}
.tl rect{fill:var(--paper);stroke:var(--ink);stroke-width:2.5}
.tl.safe rect{fill:var(--safe)}
.tl.danger rect{fill:var(--danger)}
.tl.final rect{fill:var(--final)}
.tl.here rect{stroke:var(--red);stroke-width:5}
.tl .num{font:700 11px "Zen Kaku Gothic New",system-ui,sans-serif;fill:var(--muted)}
.tl .ic{font-size:24px;text-anchor:middle;dominant-baseline:central}
.tl .tn{font:700 10px "Zen Kaku Gothic New",system-ui,sans-serif;fill:var(--ink);text-anchor:middle}
.arena circle.ring{fill:var(--ink);stroke:var(--ink)}
.arena text{fill:var(--paper)}
.zone{font:400 22px "Dela Gothic One","Arial Black",system-ui,sans-serif;fill:var(--ink)}
.zone.sm{font-size:16px}
.tok circle{stroke:var(--ink);stroke-width:2.5}
.tok text{font:700 12px "Zen Kaku Gothic New",system-ui,sans-serif;fill:#fff;text-anchor:middle;dominant-baseline:central}
.pcard{border:3px solid var(--ink);padding:10px;margin-bottom:10px;border-left:10px solid var(--c)}
.pcard.on{box-shadow:5px 5px 0 var(--c)}
.peek{margin-top:6px;font-size:.8rem;padding:4px 10px}
.hand .fc.back.mini{min-height:44px;justify-content:center}
.rv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;margin:6px 0 14px}
.rv{border:2.5px solid var(--ink);background:var(--paper);border-radius:4px;overflow:hidden;display:flex;flex-direction:column;font-size:.8rem}
.rv img,.rv .noimg{width:100%;height:120px;object-fit:cover;object-position:50% 18%;border-bottom:2px solid var(--ink);display:grid;place-items:center;font-size:2rem;background:var(--tone)}
.rv b{padding:4px 6px 0;line-height:1.15}.rv span{padding:0 6px 6px;color:var(--muted);font-size:.72rem}
.guess .eye{padding:0 10px}
#modal.remote{display:none}
#modal.closing{pointer-events:none}
#netwait{position:fixed;left:50%;transform:translateX(-50%);bottom:84px;z-index:30;display:flex;align-items:center;gap:12px;
  max-width:calc(100vw - 32px);padding:16px 26px;border-radius:999px;font-weight:700;font-size:1.15rem;letter-spacing:.01em;
  background:linear-gradient(180deg,#14306E,#0A1A44);color:#FFE7A8;border:2px solid #F5C46A;
  box-shadow:0 12px 34px rgba(0,0,0,.55),0 0 24px rgba(245,196,106,.35);user-select:none;pointer-events:none}
#rollfx{position:fixed;left:50%;top:calc(var(--hh,64px) + 14px);z-index:25;display:grid;justify-items:center;gap:8px;padding:14px 26px 18px;
  border-radius:20px;background:linear-gradient(180deg,#14306E,#0A1A44);border:2px solid #F5C46A;color:#FFE7A8;
  box-shadow:0 16px 40px rgba(0,0,0,.55),0 0 30px rgba(245,196,106,.35);pointer-events:none;
  opacity:0;transform:translate(-50%,-14px) scale(.9);transition:opacity .25s,transform .25s}
#rollfx.on{opacity:1;transform:translate(-50%,0) scale(1)}
#rollfx .rw{font-weight:700;font-size:.95rem}
#rollfx .rds{display:flex;gap:14px}
#rollfx .rdie{width:64px;height:64px;display:grid;place-items:center;border-radius:14px;font:400 2.2rem "Dela Gothic One",system-ui,sans-serif;
  color:#2A1A06;background:linear-gradient(180deg,#FFF6DA,#F5C46A 60%,#D48D34);box-shadow:inset 0 -4px 0 rgba(0,0,0,.18),0 6px 16px rgba(0,0,0,.4);
  animation:dieSpin .28s linear infinite}
#rollfx .rdie.land{animation:dieLand .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes dieSpin{0%{transform:rotate(-12deg) scale(.95)}50%{transform:rotate(12deg) scale(1.05)}100%{transform:rotate(-12deg) scale(.95)}}
@keyframes dieLand{0%{transform:scale(1.5)}100%{transform:none}}
#netwait::before{content:"";flex:none;width:12px;height:12px;border-radius:50%;background:#F5C46A;box-shadow:0 0 10px #F5C46A;animation:nwPulse 1.2s ease-in-out infinite}
@keyframes nwPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
@media (max-width:520px){#netwait{font-size:1rem;padding:13px 18px;bottom:78px}}
#netwait[hidden]{display:none}
/* cronômetro da vez: fica por cima de tudo (até das janelas e do duelo) */
#ttimer{position:fixed;top:10px;left:50%;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:10px;
  padding:6px 16px 6px 8px;background:#fff;color:#111;border:3px solid #111;border-radius:999px;box-shadow:4px 4px 0 #111;
  font:400 1.15rem Bangers,"Dela Gothic One",sans-serif;letter-spacing:.04em;pointer-events:none}
#ttimer[hidden]{display:none}
#ttimer .tt-ring{--p:100;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--tc,#2FA84F) calc(var(--p)*1%),#E5E5E5 0);border:2.5px solid #111}
#ttimer .tt-ring b{width:30px;height:30px;border-radius:50%;background:#fff;display:grid;place-items:center;font:400 .95rem Bangers,sans-serif}
#ttimer.warn{--tc:#E0A800}
#ttimer.crit{--tc:#E8202A;animation:ttShake .5s ease-in-out infinite}
#ttimer.crit .tt-ring{--tc:#E8202A}
#ttimer.warn .tt-ring{--tc:#E0A800}
@keyframes ttShake{0%,100%{transform:translateX(-50%)}25%{transform:translateX(calc(-50% - 3px))}75%{transform:translateX(calc(-50% + 3px))}}
.noanim #ttimer.crit{animation:none}
#modal .cardq.c1{margin:10px 0}
#modal .cardq.c1 p{margin:4px 0 0;font-size:1.05rem}
.vsbot{display:flex;gap:10px;align-items:center;margin-top:10px;padding:10px 12px;border:2px dashed currentColor;border-radius:8px;cursor:pointer}
.vsbot input{width:20px;height:20px;flex:none}
.vsbot small{display:block;opacity:.75;font-size:.8em}
.vsbot[hidden]{display:none}
.names input:disabled{opacity:.7}
.netname{display:flex;gap:8px;align-items:center;margin-bottom:8px}.netname input{flex:1;max-width:220px}
.netbtns{display:flex;gap:8px;flex-wrap:wrap}
.scr{max-width:760px;margin:0 auto;padding:16px 16px 40px}
.authbox{border:3px solid var(--ink);padding:16px;display:grid;gap:12px;max-width:420px;background:var(--paper)}
.authbox label{display:grid;gap:4px;font-weight:700}
.authbox input,#lbCode{font:inherit;padding:.6em .7em;border:2.5px solid var(--ink);background:var(--paper);color:var(--ink)}
.atabs{display:grid;grid-template-columns:1fr 1fr;border:2.5px solid var(--ink)}
.atabs button{font:inherit;font-weight:700;padding:.55em;border:0;background:var(--paper);color:var(--ink);cursor:pointer}
.atabs button.on{background:var(--ink);color:var(--paper)}
.aerr{color:var(--red);font-weight:700;min-height:1.2em}
.lbtop{display:flex;justify-content:space-between;align-items:center;border:3px solid var(--ink);padding:12px 14px;margin:8px 0 14px;box-shadow:5px 5px 0 var(--red)}
.lbtop h2{font-family:"Dela Gothic One",system-ui,sans-serif;font-size:1.6rem}
.lbgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.lbgrid fieldset{margin:0;min-width:0}
.authbox label[hidden]{display:none}
#lbCode{width:100%}
.joinrow{display:flex;gap:8px}#lbCode{flex:1;min-width:0;font-size:1.5rem;letter-spacing:.3em;text-align:center;font-weight:700}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}
.stats div{border:2px solid var(--ink);padding:8px}.stats b{display:block;font-family:"Dela Gothic One",system-ui,sans-serif;font-size:1.6rem}.stats span{font-size:.8rem;color:var(--muted)}
.hrow{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:8px 6px;border-bottom:1.5px solid var(--soft)}
.hrow .res{font-weight:700;padding:2px 8px;border:2px solid var(--ink);font-size:.8rem}
.hrow.win .res{background:var(--red);color:#fff}
@media (max-width:520px){.hrow{grid-template-columns:auto 1fr}.hrow .muted{grid-column:1/-1;font-size:.8rem}}
.wrbox{text-align:center;display:grid;gap:10px;justify-items:center;padding:24px}
.wrcode{font-family:"Dela Gothic One",system-ui,sans-serif;font-size:clamp(2.4rem,12vw,4rem);letter-spacing:.15em;border:3px solid var(--ink);padding:6px 18px;box-shadow:5px 5px 0 var(--red)}
.wrstat{font-weight:700}
.link.sm{font-size:.8rem;margin-left:6px}
#menuBack{margin:4px 0 8px}
.pcard header{display:flex;justify-content:space-between;gap:8px;align-items:baseline;flex-wrap:wrap}
.pcard h3{margin:0;font-size:1rem}
.stats{font-size:.9rem;font-weight:700}
.where{font-size:.82rem;color:var(--muted)}
.chars{list-style:none;padding:0;margin:6px 0 0;display:grid;gap:4px}
.chars li{border:1.5px solid var(--ink);padding:4px 6px;font-size:.88rem;display:flex;justify-content:space-between;gap:6px}
.chars li.blind{border-style:dashed;color:var(--muted)}
.chars .meta{color:var(--muted);font-size:.78rem;text-align:right}
.items{font-size:.82rem;color:var(--muted);margin-top:4px}
#log{border:3px solid var(--ink);padding:8px 10px;max-height:240px;overflow:auto;font-size:.86rem}
#log h3{margin:0 0 4px;font-size:.95rem}
#log ol{margin:0;padding-left:18px}
.dock{position:fixed;left:0;right:0;bottom:0;z-index:6;display:flex;gap:10px;align-items:center;justify-content:flex-end;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));background:var(--paper);border-top:3px solid var(--ink)}
#die{margin-right:auto;font-family:"Dela Gothic One",system-ui,sans-serif;font-size:1.6rem;min-width:44px;height:44px;border:3px solid var(--ink);
  display:grid;place-items:center;border-radius:6px;padding:0 6px}
#die[hidden]{display:none!important} /* o valor do dado já aparece no card de quem está na vez */
#die.pop{animation:pop .35s ease}
@keyframes pop{0%{transform:scale(.6) rotate(-25deg)}70%{transform:scale(1.15) rotate(6deg)}100%{transform:none}}

/* MODAL */
#modal .ov{position:fixed;inset:0;z-index:20;background:rgba(0,0,0,.55);display:grid;place-items:center;padding:14px;
  padding-top:calc(14px + env(safe-area-inset-top,0px));padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))}
.panel{background:var(--paper);border:3px solid var(--ink);box-shadow:8px 8px 0 var(--ink);width:min(560px,100%);max-height:100%;overflow:auto;padding:16px}
.panel.wide{width:min(860px,100%)}
.acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.acts.col{flex-direction:column}
.acts.col .btn{width:100%}
.clues{padding-left:22px;margin:10px 0}
.sckind{display:inline-block;margin:2px 0 4px;padding:3px 10px;border:2px solid #7A1F12;border-radius:999px;background:#F2D7A0;color:#7A1F12;font-size:.9rem}
.clues li{margin:6px 0;font-weight:700;font-size:1.05rem}
.clues li.locked{color:var(--muted);font-weight:400;font-size:.95rem}
.guess{display:flex;gap:8px;margin-top:10px}
.guess .btn{flex:none}
.msg{font-weight:700;color:var(--red)}
.shake{animation:shake .3s}
@keyframes shake{25%{transform:translateX(-6px)}50%{transform:translateX(6px)}75%{transform:translateX(-3px)}}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cardq{border:2px solid var(--ink);padding:8px}
.ccard{border:3px solid var(--ink);padding:10px;margin-top:8px;display:grid;gap:2px}
.ccard b{font-family:"Dela Gothic One",system-ui,sans-serif;font-weight:400;font-size:1.2rem}
.picklist{display:grid;gap:6px}
.pick{display:flex;gap:8px;align-items:flex-start;border:2px solid var(--ink);padding:8px;cursor:pointer}
.pick.used{border-style:dashed;color:var(--muted)}
.pick:has(input:checked){background:var(--ink);color:var(--paper)}
.pick:has(input:disabled){cursor:not-allowed;opacity:.5}
.bids{display:grid;gap:8px}
.bids label{display:grid;grid-template-columns:auto 1fr 90px;gap:8px;align-items:center}
table.mt{width:100%;border-collapse:collapse;font-size:.9rem}
table.mt td,table.mt th{border:1.5px solid var(--ink);padding:5px;text-align:left;vertical-align:top}
.wrap-x{overflow-x:auto}

/* VS */
.vs{position:relative;display:grid;grid-template-columns:1fr auto 1fr;border:3px solid var(--ink);overflow:hidden;
  background:repeating-conic-gradient(from 0deg at 50% 50%, var(--soft) 0 3deg, transparent 3deg 9deg)}
.vs .side{padding:10px;position:relative;z-index:1}
.vs .side.win{background:color-mix(in srgb,var(--paper) 70%,transparent)}
.vs .side h3{margin:0 0 6px;font-size:1rem}
.vs .total{font-family:"Dela Gothic One",system-ui,sans-serif;font-size:2.6rem;line-height:1}
.vs .side.win .total{color:var(--red)}
.vs .badge,.badge{display:inline-block;font-family:"Dela Gothic One",system-ui,sans-serif;background:var(--red);color:#fff;padding:2px 8px;transform:rotate(-4deg);margin-bottom:4px}
.vs .ent{border:2px solid var(--ink);background:var(--paper);padding:6px;margin-bottom:6px}
.vs .ent b{display:block}
.vs .ent ul{list-style:none;padding:0;margin:4px 0 0;font-size:.8rem}
.vs .ent li{display:flex;justify-content:space-between;gap:6px}
.vs .mark{align-self:center;transform:rotate(-8deg);z-index:2;font-family:"Dela Gothic One",system-ui,sans-serif;
  font-size:1.5rem;background:var(--ink);color:var(--paper);padding:2px 8px;margin:0 -6px;animation:slam .4s cubic-bezier(.2,1.6,.4,1)}
@keyframes slam{from{transform:scale(2.4) rotate(-8deg);opacity:0}}
.score{font-family:"Dela Gothic One",system-ui,sans-serif;text-align:center;margin-top:10px;font-size:1.1rem}
.champ{border:3px solid var(--ink);padding:24px;text-align:center;background:repeating-conic-gradient(from 0deg at 50% 50%, var(--soft) 0 3deg, transparent 3deg 9deg)}
.champ div{font-family:"Dela Gothic One",system-ui,sans-serif;font-size:2.4rem;line-height:1.1}
/* revanche: quem já topou */
.rmv{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:4px}
.rmv li{display:flex;align-items:center;gap:8px;padding:4px 8px;border:2px solid var(--ink);border-radius:4px}
.rmv li.on{background:var(--soft)}
@media (max-width:420px){.vs .total{font-size:2rem}.vs .mark{font-size:1.1rem;padding:2px 5px}.vs .side{padding:8px 6px}}
/* Animações desligadas pela opção do jogo (botão "Animações"): nada se mexe. */
html.noanim *,html.noanim *::before,html.noanim *::after{animation:none!important;transition:none!important}

.hand{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:6px;margin-top:6px}
.hand.big{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.fc{position:relative;border:2.5px solid var(--ink);background:var(--paper);padding:6px 6px 6px 36px;min-height:72px;display:flex;flex-direction:column;gap:1px;font-size:.8rem;border-radius:4px;overflow:hidden}
.fc .rb{position:absolute;left:0;top:0;bottom:0;width:29px;display:grid;place-items:center;font-family:"Dela Gothic One",system-ui,sans-serif;font-size:1.3rem;background:var(--rc,var(--ink));color:#fff;border-right:2.5px solid var(--ink)}
.fc b{font-weight:700;font-size:.9rem;line-height:1.15}
.fc .an,.fc .st{color:var(--muted);font-size:.72rem;line-height:1.15}
.deckrow{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:10px;margin-top:6px}
.deckrow .hand{margin-top:2px;grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
.deckrow .fxcol .hand{grid-template-columns:minmax(0,1fr)}
.dkl{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.fc.fxc{min-height:52px;padding-left:34px}
.fc.fxc.trap .rb{background:#B4234B}.fc.fxc.magic .rb{background:#6C4BD8}
.mis{margin-top:8px;padding:8px 10px;border-radius:10px;border:1px dashed #F5C46A;background:rgba(245,196,106,.1);font-size:.85rem;line-height:1.35}
.mis span{display:block;margin-top:2px;color:var(--muted);font-size:.78rem}
@media (max-width:420px){.deckrow{grid-template-columns:minmax(0,1fr)}}
.fc .pw{margin-top:3px;align-self:flex-start;font-size:.74rem;font-weight:700;padding:1px 7px;border-radius:999px;background:#F5C46A;color:#2A1A06}
.fc .bn{position:absolute;right:4px;top:3px;font-size:.72rem;font-weight:700;background:var(--paper);border:1.5px solid var(--ink);padding:0 3px;border-radius:3px;z-index:1}
.fc .pic{display:block;width:calc(100% + 6px);height:84px;margin:-6px -6px 4px 0;object-fit:cover;object-position:50% 18%;border-bottom:2px solid var(--ink)}
.hand.big .fc .pic{height:120px}
.ccard.has-pic{grid-template-columns:96px 1fr;gap:10px;align-items:start}
.ccard .pic{width:96px;height:132px;object-fit:cover;object-position:50% 18%;border:2px solid var(--ink)}
.ccard .txt{display:grid;gap:2px}
.vs .ent .pic{float:left;width:52px;height:70px;object-fit:cover;object-position:50% 18%;margin:0 6px 4px 0;border:2px solid var(--ink)}
.vs .ent ul{clear:both}
.pic.mini{width:38px;height:52px;object-fit:cover;object-position:50% 18%;vertical-align:middle;margin-right:6px;border:2px solid var(--ink)}
.fc.back{border-style:dashed;background-image:radial-gradient(var(--tone) 1.1px,transparent 1.3px);background-size:6px 6px}
.fc.back em{font-size:.72rem;font-style:normal;color:var(--muted);line-height:1.2}
.rk-SS{--rc:#B8860B}.rk-S\+{--rc:#7B1FA2}.rk-S{--rc:#C8102E}.rk-A{--rc:#D9480F}.rk-B{--rc:#9A7400}.rk-C{--rc:#2B8A3E}.rk-D{--rc:#1C7ED6}.rk-E{--rc:#6C757D}.rk-F{--rc:#868E96}
.ec{border:2.5px solid var(--ink);padding:6px 8px;margin-bottom:6px;border-radius:4px;display:grid;gap:2px}
.ec.trap{border-style:double;border-width:5px}
.ec .kd{font-size:.72rem;font-weight:700;color:var(--muted)}
.ec b{font-size:.95rem}
.ec .ds{font-size:.82rem;color:var(--muted)}
.fx{font-size:.82rem;color:var(--muted);margin-top:4px}

.bosses{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.bc{display:flex;flex-direction:column;gap:3px;text-align:left;padding:10px;width:100%}
.bc .bk{font-family:"Dela Gothic One",system-ui,sans-serif;font-size:2rem;line-height:1;color:var(--rc)}
.bc .ds{font-size:.78rem;color:var(--muted);font-weight:400;line-height:1.25}
@media (max-width:520px){.bosses{grid-template-columns:1fr}}

select{font:inherit;color:var(--ink);background:var(--paper);border:2px solid var(--ink);border-radius:4px;padding:.3em .4em}
textarea{font:inherit;color:var(--ink);background:var(--paper);border:2.5px solid var(--ink);border-radius:4px;padding:.5em;width:100%}
.grow{flex:1}
#editor{min-height:100%}
.edbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 12px;background:var(--paper);border-bottom:3px solid var(--ink)}
.edtitle{font-family:"Dela Gothic One",system-ui,sans-serif;font-size:1.1rem;font-weight:400}
.edtabs{display:flex;gap:6px;padding:10px 12px 0;max-width:1100px;margin:0 auto;flex-wrap:wrap}
.edtabs button{border:2.5px solid var(--ink);background:var(--paper);padding:.45em 1em;font-weight:700;cursor:pointer;border-radius:4px 4px 0 0}
.edtabs button[aria-selected="true"]{background:var(--ink);color:var(--paper)}
#edBody{padding:12px;max-width:1100px;margin:0 auto;border-top:3px solid var(--ink)}
.edtool{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px}
.edtool input[type=text]{width:220px}
#edBody table.mt td,#edBody table.mt th{vertical-align:middle}
#edBody input[type=number]{width:84px}
#edBody table.mt input[type=text]{min-width:130px}
.edform label{display:grid;gap:4px;font-weight:700;font-size:.9rem;margin-top:8px}
.edform [hidden]{display:none!important}
#modal .msg:empty{display:none}
.edform label select,.edform label input{width:100%}
.edrow{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ednote{font-size:.88rem;color:var(--muted);margin:.4rem 0 .8rem}
/* editor do tabuleiro */
.bedit{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:12px;align-items:start}
@media (max-width:820px){.bedit{grid-template-columns:1fr}}
.bpanel{position:sticky;top:70px;max-height:calc(100vh - 90px);overflow:auto;border:2.5px solid #111;border-radius:6px;background:#fff;color:#111;padding:10px 12px;box-shadow:4px 4px 0 rgba(17,17,17,.18);font-size:.9rem}
.bpanel header{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-bottom:6px}
.bpanel header b{font:400 1.35rem Bangers,"Dela Gothic One",sans-serif;letter-spacing:.04em}
.bpanel header small{color:#555;flex-basis:100%}
.bpanel .muted{color:#555!important}
.bcnt{font-weight:700;background:#111;color:#fff;border-radius:999px;padding:1px 10px;font-size:.85rem}
.bcur{margin:.3rem 0 .6rem}
.bmove{display:flex;flex-wrap:wrap;gap:6px}
.blbl{font-weight:700;margin:.8rem 0 .3rem}
.btypes{display:grid;grid-template-columns:repeat(2,1fr);gap:4px}
.btypes button{background:var(--tc);color:var(--ti);border:2px solid #111;border-radius:5px;padding:4px 6px;font-size:.8rem;font-weight:700;text-align:left;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.btypes button:hover{outline:2px solid #111;outline-offset:1px}
.btypes button.on{box-shadow:inset 0 0 0 3px #fff,0 0 0 3px #E8202A}
.bsecx{margin-top:12px;border-top:2px dashed #bbb;padding-top:8px}
.bsecx summary{cursor:pointer;font-weight:700}
.bsecx .bgrp{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:8px}
.bsecx input[type=number]{width:58px!important}
.bsecx select{max-width:150px}
.bsecx>button{margin-top:8px}
.bprev{max-height:68vh;overflow:auto;border:2.5px solid #111;border-radius:6px;background:#BFDC8E}
#bdMap{max-height:calc(100vh - 150px)}
.bprev svg{display:block;width:calc(100% * var(--z,1));height:auto}
#bdMap .tl{cursor:pointer}
#bdMap .tl:hover rect.bg,#bdMap .tl:hover circle.bg{stroke:#E8202A}
#edBody #bdMap .tl.sel rect.bg,#edBody #bdMap .tl.sel circle.bg{stroke:#E8202A;stroke-width:9}
#edBody #bdMap .tl.sel rect.sh,#edBody #bdMap .tl.sel circle.sh{fill:#E8202A}
.edform label.chk{display:flex;align-items:center;gap:8px}
.edform label.chk input{width:auto}
#edBody table.mt input[data-f=aw]{min-width:150px}
.bar{flex-wrap:wrap}
.clock{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.strip{flex-basis:100%;display:flex;gap:6px;flex-wrap:wrap;align-items:center;font-size:.82rem;padding-top:2px}
.chip{border:2px solid var(--c);border-radius:999px;padding:2px 9px;font-weight:700;display:inline-flex;gap:4px;align-items:center;background:var(--paper)}
.chip .cs{font-weight:400}
.chip.on{background:var(--c);color:#fff}
.tpick{max-height:min(52vh,520px);overflow:auto;border:2.5px solid var(--ink);padding:0 8px 8px;margin-top:8px}
.tpick section[hidden],.tpc[hidden]{display:none}
.tpgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:6px}
.tpc{display:flex;gap:6px;align-items:center;border:2px solid var(--ink);padding:4px 6px;cursor:pointer;font-size:.85rem;border-radius:4px}
.tpc input{flex:none}
.tpc .pic.mini{margin:0;width:32px;height:44px}
.tpc small{display:block;color:var(--muted);font-size:.72rem}
.lb-pool{justify-self:start;margin-top:2px;padding:0;border:0;background:none;color:#B9C6EA;font:inherit;font-size:.8rem;cursor:pointer}
.lb-pool:hover{color:var(--gold2)}
.lb-pool .poolinfo{font-weight:500}
.tpc:has(input:checked){background:var(--ink);color:var(--paper)}
.tpc:has(input:checked) small{color:var(--paper)}
.whos{display:flex;align-items:center;gap:6px;font-size:.82rem;font-weight:700;margin:-4px 0 8px;color:var(--muted)}

/* TELA PRINCIPAL — ARENA CHAMPIONS */
#auth{--gold:#F5C46A;--gold2:#FFE7A8;--ember:#FF8A2B;--glass:rgba(16,12,9,.58);--line:rgba(245,196,106,.38);
  position:relative;max-width:none;min-height:100vh;min-height:100dvh;margin:0;padding:24px 16px 32px;
  display:grid;grid-template-columns:minmax(0,1fr);place-items:center;overflow:hidden;color:#F6EFE2;isolation:isolate}
#auth[hidden]{display:none}
#auth .arena-bg{position:fixed;inset:-40px;z-index:-3;background:#120d08 url("arena-bg.jpg") center 40%/cover no-repeat;
  filter:blur(7px) brightness(.62) saturate(1.1);animation:arenaZoom 28s ease-in-out infinite alternate}
#auth .arena-rays{position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(ellipse 60% 45% at 50% 18%,rgba(255,200,110,.30),transparent 70%),
    radial-gradient(ellipse 120% 80% at 50% 50%,transparent 40%,rgba(0,0,0,.72) 100%);
  animation:raysPulse 6s ease-in-out infinite}
#auth .embers{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
#auth .embers i{position:absolute;bottom:-12px;left:var(--x);width:5px;height:5px;border-radius:50%;
  background:var(--gold2);box-shadow:0 0 8px 2px var(--ember);opacity:0;animation:ember var(--d) linear var(--t) infinite}
.auth-wrap{width:min(440px,100%);min-width:0;display:grid;grid-template-columns:minmax(0,1fr);gap:22px;justify-items:stretch}
.arena-hero{width:100%;text-align:center;margin:0;padding:30px 22px 24px;border:1px solid var(--line);border-radius:18px;
  background:linear-gradient(180deg,rgba(28,20,12,.62),rgba(10,8,6,.70));backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 0 0 1px rgba(255,255,255,.04) inset,0 20px 60px rgba(0,0,0,.55),0 0 50px rgba(245,170,70,.18);
  animation:riseIn .9s cubic-bezier(.2,.9,.3,1.2) both,heroGlow 4.5s ease-in-out 1s infinite}
.arena-hero::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,231,168,.16) 48%,transparent 66%);background-size:250% 100%;
  animation:sweep 5s ease-in-out 1.2s infinite}
#auth .kicker{margin:0 0 10px;font-size:.78rem;font-weight:700;letter-spacing:.32em;text-transform:uppercase;color:var(--gold)}
#auth .logo{transform:none;font-size:clamp(2.2rem,11vw,3.9rem);line-height:.98;letter-spacing:.02em}
#auth .logo span{-webkit-text-stroke:0;text-shadow:none;color:transparent;
  background:linear-gradient(180deg,#FFF6DA 0%,var(--gold2) 35%,var(--gold) 62%,#B9762A 100%);-webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 3px 0 rgba(90,40,0,.75)) drop-shadow(0 0 18px rgba(255,170,60,.45));
  animation:titleIn .8s cubic-bezier(.2,1.4,.4,1) both}
#auth .logo span:first-child{animation-delay:.25s}
#auth .logo span:last-child{animation-delay:.42s;font-size:.58em;letter-spacing:.08em}
#auth .tag{display:block;max-width:none;margin:14px auto 0;padding:0;border:0;background:none;color:#E9DCC4;font-weight:500;
  animation:fadeUp .7s ease .7s both}
#auth .authbox{width:100%;max-width:none;gap:14px;padding:22px;border:1px solid var(--line);border-radius:18px;
  background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 20px 60px rgba(0,0,0,.55);
  animation:riseIn .9s cubic-bezier(.2,.9,.3,1.2) .35s both}
#auth .atabs{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:rgba(0,0,0,.35);padding:4px;gap:4px}
#auth .atabs button{background:transparent;color:#E9DCC4;border-radius:9px;transition:background .25s,color .25s}
#auth .atabs button:hover{color:#fff}
#auth .atabs button.on{background:linear-gradient(180deg,var(--gold2),var(--gold));color:#2A1A06}
#auth .authbox label{color:#F1E6D2;font-size:.92rem}
#auth .authbox input{border:1px solid rgba(245,196,106,.30);border-radius:10px;background:rgba(0,0,0,.40);color:#fff;
  transition:border-color .2s,box-shadow .2s}
#auth .authbox input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(245,196,106,.25)}
#auth .btn.primary{text-align:center;border:0;border-radius:12px;color:#2A1A06;font-weight:700;letter-spacing:.04em;
  background:linear-gradient(180deg,var(--gold2),var(--gold) 55%,#D48D34);box-shadow:0 8px 24px rgba(245,160,60,.35);
  transition:transform .15s,box-shadow .2s,filter .2s}
#auth .btn.primary:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 12px 30px rgba(245,160,60,.5)}
#auth .btn.primary:active{transform:translateY(1px);box-shadow:0 4px 12px rgba(245,160,60,.35)}
#auth .aerr{color:#FF8E8E;text-align:center;margin:0}
#auth .aerr:empty{display:none}
#auth .link{color:#E9DCC4;justify-self:center;text-underline-offset:3px;transition:color .2s}
#auth .link:hover{color:var(--gold2)}
/* LOBBY — menu lateral + arte de fundo */
#lobby{--gold:#F5C46A;--gold2:#FFE7A8;--navy:#0A1A44;--glass:rgba(8,22,62,.78);--line:rgba(245,196,106,.42);
  max-width:none;margin:0;padding:0;min-height:100vh;min-height:100dvh;color:#F2F5FF;
  display:grid;grid-template-columns:300px minmax(0,1fr);background:#1450C8}
#lobby[hidden]{display:none}
.lb-side{position:sticky;top:0;height:100vh;height:100dvh;display:flex;flex-direction:column;gap:14px;padding:20px 16px;
  background:linear-gradient(180deg,#0B1D4D 0%,#081536 100%);border-right:2px solid var(--line);
  box-shadow:6px 0 30px rgba(0,0,0,.35);z-index:2;animation:sideIn .6s cubic-bezier(.2,.9,.3,1) both}
.lb-brand{font-family:"Dela Gothic One",system-ui,sans-serif;font-size:1.25rem;letter-spacing:.03em;color:#fff;padding:0 4px}
.lb-brand b{font-weight:400;color:transparent;background:linear-gradient(180deg,var(--gold2),var(--gold) 60%,#C98330);
  -webkit-background-clip:text;background-clip:text}
#lobby .lbtop{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;margin:0;padding:12px;
  border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.05);box-shadow:none}
.lb-ava{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-size:1.2rem;color:#2A1A06;
  background:linear-gradient(180deg,var(--gold2),var(--gold));box-shadow:0 0 0 3px rgba(245,196,106,.25)}
.lb-who span{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#9FB2E0}
#lobby .lbtop h2{font-size:1.15rem;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#lobby .btn{border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.06);color:#F2F5FF;box-shadow:none;text-align:center;
  transition:transform .15s,background .2s,box-shadow .2s,filter .2s}
#lobby .btn:hover{background:rgba(255,255,255,.12)}
#lobby .btn.primary{border:0;color:#2A1A06;font-weight:700;background:linear-gradient(180deg,var(--gold2),var(--gold) 55%,#D48D34);
  box-shadow:0 6px 18px rgba(245,160,60,.35)}
#lobby .btn.primary:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 10px 26px rgba(245,160,60,.5)}
#lobby .btn:active:not(:disabled){transform:translateY(1px)}
.lb-block h3{margin:0 0 8px;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;justify-content:space-between}
.lb-block h3 .link{color:#9FB2E0;text-transform:none;letter-spacing:0;font-family:"Zen Kaku Gothic New",system-ui,sans-serif}
#lobby .stats{gap:6px}
#lobby .stats div{border:1px solid rgba(255,255,255,.12);border-radius:10px;background:rgba(255,255,255,.05);padding:8px 4px}
#lobby .stats b{font-size:1.35rem;color:#fff}
#lobby .stats div:nth-child(2) b{color:var(--gold)}
#lobby .stats span{color:#9FB2E0;font-size:.72rem}
.lb-side{overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(245,196,106,.4) transparent}
.lb-side>*{flex:none}
#lbHist{max-height:200px;overflow-y:auto;margin-right:-6px;padding-right:6px;scrollbar-width:thin;scrollbar-color:rgba(245,196,106,.4) transparent}
.lb-rankbox{padding:12px 10px 8px;border:1px solid var(--line);border-radius:14px;
  background:linear-gradient(180deg,rgba(245,196,106,.10),rgba(255,255,255,.03))}
.lb-rankbox h3{margin-bottom:6px}
.rank{list-style:none;margin:0;padding:0;display:grid;gap:3px}
.rk{display:grid;grid-template-columns:26px minmax(0,1fr) auto;align-items:center;gap:8px;padding:5px 6px;border-radius:9px;
  font-size:.88rem;animation:fadeUp .4s ease both}
.rk:nth-child(2){animation-delay:.04s}.rk:nth-child(3){animation-delay:.08s}.rk:nth-child(4){animation-delay:.12s}
.rk:nth-child(5){animation-delay:.16s}.rk:nth-child(6){animation-delay:.2s}.rk:nth-child(7){animation-delay:.24s}
.rk:nth-child(8){animation-delay:.28s}.rk:nth-child(9){animation-delay:.32s}.rk:nth-child(10){animation-delay:.36s}
.rk:hover{background:rgba(255,255,255,.06)}
.rk .pos{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:.78rem;
  background:rgba(255,255,255,.08);color:#C9D3EE}
.rk.top1 .pos{background:linear-gradient(180deg,#FFF1B8,#F5C46A 60%,#C98330);color:#2A1A06;box-shadow:0 0 10px rgba(245,196,106,.6)}
.rk.top2 .pos{background:linear-gradient(180deg,#FFFFFF,#C9D1DE 60%,#8C97AA);color:#1C2333}
.rk.top3 .pos{background:linear-gradient(180deg,#FFD3A8,#D08A4E 60%,#8E5226);color:#2A1406}
.rk.top1 .nm{color:var(--gold2);font-weight:700}
.rk .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rk .nm small{color:var(--gold);font-weight:700}
.rk.me{background:rgba(245,196,106,.14);box-shadow:inset 0 0 0 1px rgba(245,196,106,.45)}
.rk .w{color:#9FB2E0;font-size:.78rem;white-space:nowrap}
.rk .w b{color:#fff;font-size:.95rem}
.rk .w small{margin-left:6px;color:#7E8DB8}
.rk-msg{color:#9FB2E0;font-size:.85rem;padding:4px 2px}
#lbLocal{margin-top:auto}
.lb-admin{padding:12px 10px 10px;border:1px dashed var(--line);border-radius:14px;background:rgba(245,196,106,.06)}
.lb-admin-btns{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.lb-admin-btns .btn{font-size:.8rem;padding:.45em .5em}
#adEditor{grid-column:1/-1}
.lb-admin-info{margin:8px 0 0;font-size:.74rem;color:#8C9CC6}
.panel.glass .ad-sum{list-style:none;padding:0;margin:10px 0;display:grid;gap:6px}
.panel.glass .ad-sum li{padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid rgba(159,178,224,.2)}
.ad-users{list-style:none;padding:0;margin:10px 0;display:grid;gap:4px;max-height:55vh;overflow:auto}
.ad-users li{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:10px;background:rgba(255,255,255,.05)}
.ad-users .dot{width:9px;height:9px;border-radius:50%;background:#6B7392;flex:none}
.ad-users li.on .dot{background:#3DDC84;box-shadow:0 0 6px #3DDC84}
.ad-users b{flex:1}
.ad-users small{opacity:.7}
.ad-pass{display:grid;gap:8px;margin:10px 0}
.panel.glass .ad-err{margin:10px 0;padding-left:20px;color:#FFB3C1;display:grid;gap:4px}
.panel.glass .aerr{color:#FF8E8E;font-weight:700}
.panel.glass .aerr:empty{display:none}
.panel.glass .btn{border:1px solid rgba(245,196,106,.42);border-radius:10px;background:rgba(255,255,255,.06);color:#F2F5FF;box-shadow:none;text-align:center}
.panel.glass .btn.primary{border:0;color:#2A1A06}
#lobby .hrow{grid-template-columns:auto minmax(0,1fr);gap:2px 8px;padding:8px 2px;border-bottom:1px solid rgba(255,255,255,.08)}
#lobby .hrow .opp{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#lobby .hrow .muted{grid-column:1/-1;color:#8C9CC6;font-size:.75rem}
#lobby .hrow .res{border:0;border-radius:6px;font-size:.72rem;background:rgba(255,255,255,.1);color:#C9D3EE}
#lobby .hrow.win .res{background:linear-gradient(180deg,var(--gold2),var(--gold));color:#2A1A06}
#lobby .muted{color:#9FB2E0}
#lbLocal{width:100%}
.lb-main{position:relative;min-height:100vh;min-height:100dvh;padding:20px 24px;display:flex;justify-content:center;align-items:flex-start;
  background:#2A6BE0 url("lobby-bg.jpg") center top/cover no-repeat}
.lb-actions{width:min(660px,100%);display:grid;gap:10px}
#lobby .lbgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.lb-card{display:grid;grid-template-rows:auto 1fr auto;grid-auto-rows:auto;gap:6px;padding:16px 18px;border:1px solid var(--line);border-radius:16px;
  background:var(--glass);box-shadow:0 14px 40px rgba(4,16,60,.45);animation:riseIn .7s cubic-bezier(.2,.9,.3,1.2) both;
  transition:transform .25s,box-shadow .25s}
.lb-card:nth-child(2){animation-delay:.12s}
.lb-card:hover{transform:translateY(-4px);box-shadow:0 20px 50px rgba(4,16,60,.55),0 0 0 1px rgba(245,196,106,.5)}
.lb-card h3{margin:0;font-size:1.1rem;color:#fff}
.lb-card .hint{margin:0;color:#B9C6EA;font-size:.85rem;line-height:1.35}
.lb-card .btn.big{font-size:1rem;padding:.65em 1em}
#lobby #lbCode{border:1px solid rgba(245,196,106,.35);border-radius:10px;background:rgba(0,0,0,.35);color:#fff;font-size:1.2rem;padding:.4em .5em;
  transition:border-color .2s,box-shadow .2s}
#lobby #lbCode:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(245,196,106,.25)}
#lobby .aerr{margin:0;text-align:center;color:#fff;background:rgba(200,20,50,.85);border-radius:10px;padding:6px 10px}
#lobby .aerr:empty{display:none}
#lobby .wrbox{justify-self:center;width:min(560px,100%);grid-template-columns:auto minmax(0,1fr);align-items:center;justify-items:stretch;gap:6px 20px;
  text-align:left;margin-top:4px;padding:12px 18px;border:1px solid var(--line);border-radius:16px;
  background:var(--glass);box-shadow:0 14px 40px rgba(4,16,60,.45),0 0 40px rgba(245,196,106,.25)}
.wrleft{display:grid;justify-items:center}
.wrright{display:grid;gap:8px}
#lobby .wrbox .wracts{justify-content:flex-start}
@media (max-width:520px){#lobby .wrbox{grid-template-columns:minmax(0,1fr);text-align:center;justify-items:center}#lobby .wrbox .wracts{justify-content:center}}
#lobby .wrbox[hidden]{display:none}
/* sala de espera com vários jogadores e escolha do modo */
#lobby .wrlist{grid-column:1/-1;width:100%;text-align:left;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-top:6px}
#lobby .wrlist[hidden]{display:none}
.wrlist .wrmode{grid-column:1/-1;margin:0;font-weight:700;font-size:.85rem}
.wrlist ul{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:3px}
.wrlist li{display:flex;align-items:center;gap:6px;font-size:.85rem;padding:3px 8px;border-radius:6px;background:rgba(127,127,127,.1)}
.wrlist li .dot{width:8px;height:8px;border-radius:50%;background:#8A8F9E;flex:none}
.wrlist li.on .dot{background:#2FBF6A;box-shadow:0 0 5px #2FBF6A}
.wrlist li.free{opacity:.5;font-style:italic}
.wrteam{padding:8px;border:1px dashed rgba(127,127,127,.45);border-radius:8px}
.wrteam.empty{opacity:.6}
.lb-modes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:4px 0 10px}
.lb-modes label{position:relative;display:grid;text-align:center;padding:6px 4px;border:2px solid rgba(127,127,127,.35);border-radius:8px;cursor:pointer;line-height:1.15}
.lb-modes input{position:absolute;opacity:0;pointer-events:none}
.lb-modes b{font-size:.95rem}.lb-modes small{font-size:.66rem;opacity:.75}
.lb-modes label:has(input:checked){border-color:#C8352B;background:rgba(200,53,43,.1);box-shadow:2px 2px 0 #C8352B}
.lb-modes label:has(input:focus-visible){outline:2px solid #C8352B;outline-offset:2px}
@media (max-width:420px){.lb-modes{grid-template-columns:repeat(2,minmax(0,1fr))}}
.lb-team .tm-name{font-size:1.15rem;font-weight:800;margin:0 0 4px}
.lb-team ul{list-style:none;margin:6px 0 8px;padding:0;display:grid;gap:3px;font-size:.85rem}
.lb-team li{display:flex;align-items:center;gap:6px}
.lb-team li span{flex:1}
.lb-team .tm-btns{display:flex;gap:6px;flex-wrap:wrap}
.lb-team .x{border:0;background:none;color:inherit;opacity:.6;cursor:pointer;font-size:.9rem}
.tm-list{list-style:none;padding:0;margin:10px 0;display:grid;gap:6px;max-height:50vh;overflow:auto}
.tm-list li{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.05)}
.tm-list li b{flex:1}
#lobby .wrbox.pop{animation:roomPop .55s cubic-bezier(.2,1.5,.4,1) both}
.wrlabel{margin:0;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
#lobby .wrcode{font-size:clamp(1.8rem,6vw,2.4rem);line-height:1.1;letter-spacing:.18em;padding:4px 6px 4px 14px;border:0;box-shadow:none;color:transparent;
  background:linear-gradient(180deg,#FFF6DA,var(--gold2) 40%,var(--gold) 70%,#C98330);-webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 2px 0 rgba(60,25,0,.7)) drop-shadow(0 0 14px rgba(255,180,70,.45))}
#lobby .wrstat{margin:0;color:#DCE4FA;font-size:.9rem}
#lobby .wrstat::before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;background:var(--gold);vertical-align:middle;
  animation:blink 1.2s ease-in-out infinite}
.wracts{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
#lobby .btn:disabled{opacity:.45;cursor:not-allowed;transform:none;filter:none}
@keyframes roomPop{from{opacity:0;transform:translateY(-10px) scale(.85)}to{opacity:1;transform:none}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
/* MENU DE PARTIDA LOCAL — mesmo visual do lobby, fundo desfocado */
#menu{--gold:#F5C46A;--gold2:#FFE7A8;--glass:rgba(8,22,62,.78);--line:rgba(245,196,106,.42);
  position:relative;max-width:none;margin:0;padding:20px 16px 40px;min-height:100vh;min-height:100dvh;color:#F2F5FF;isolation:isolate}
#menu[hidden]{display:none}
.mn-bg{position:fixed;inset:-40px;z-index:-1;background:#0B3FC0 url("lobby-bg.jpg") center/cover no-repeat;filter:blur(10px) brightness(.55) saturate(1.15)}
.mn-wrap{max-width:1080px;margin:0 auto;display:grid;gap:16px}
.mn-head{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:4px 16px;animation:fadeUp .5s ease both}
.mn-head .lb-brand{font-size:clamp(1.5rem,4vw,2.1rem);padding:0}
.mn-head p{grid-column:1/-1;margin:0;color:#C9D3EE}
#menu #menuBack{margin:0;color:#C9D3EE;font-weight:700;text-underline-offset:3px;grid-column:1/-1;justify-self:start}
#menu #menuBack:hover{color:var(--gold2)}
.mn-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:16px;align-items:start}
.mn-col{display:grid;gap:16px;min-width:0}
.mn-card{margin:0;min-width:0;padding:14px 16px 16px;border:1px solid var(--line);border-radius:16px;background:var(--glass);
  box-shadow:0 14px 40px rgba(2,8,30,.45);animation:riseIn .6s cubic-bezier(.2,.9,.3,1.1) both}
.mn-col .mn-card+.mn-card{animation-delay:.08s}
.mn-animes{animation-delay:.14s}
.mn-card legend{float:left;width:100%;padding:0;margin:0 0 10px;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.mn-card legend+*{clear:both}
#menu .modes{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
#menu .mode{border:1px solid rgba(255,255,255,.14);border-radius:12px;background:rgba(255,255,255,.04);padding:10px 12px;
  transition:border-color .2s,background .2s,transform .15s}
#menu .mode:hover{border-color:var(--line);transform:translateY(-2px)}
#menu .mode b{color:#fff}
#menu .mode span{color:#9FB2E0;font-size:.82rem}
#menu .mode:has(input:checked){background:linear-gradient(180deg,rgba(255,231,168,.22),rgba(245,196,106,.10));border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset}
#menu .mode:has(input:checked) b{color:var(--gold2)}
#menu .mode:has(input:checked) span{color:#E6ECFF}
#menu .names input{border:1px solid rgba(245,196,106,.30);border-radius:10px;background:rgba(0,0,0,.35);color:#fff}
#menu .names input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(245,196,106,.25)}
#menu .dot{border-color:#fff}
#menu .hint{color:#9FB2E0}
#menu .hint:empty{display:none}
.mn-acts{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px}
#menu .btn{border:1px solid var(--line);border-radius:12px;background:rgba(8,22,62,.7);color:#F2F5FF;box-shadow:none;text-align:center;
  transition:transform .15s,background .2s,box-shadow .2s,filter .2s}
#menu .btn:hover{background:rgba(20,40,100,.85)}
#menu .btn.primary{border:0;color:#2A1A06;font-weight:700;letter-spacing:.03em;background:linear-gradient(180deg,var(--gold2),var(--gold) 55%,#D48D34);
  box-shadow:0 8px 24px rgba(245,160,60,.4)}
#menu .btn.primary:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 12px 30px rgba(245,160,60,.55)}
.mn-hint{margin:0;color:#B9C6EA;font-size:.82rem;text-align:center;max-width:80ch;justify-self:center;text-shadow:0 1px 2px rgba(0,0,0,.6)}
@media (max-width:860px){.mn-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:480px){.mn-acts{grid-template-columns:minmax(0,1fr)}}

/* GRADE DE ANIMES (menu e modal do lobby) */
.ag-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;margin-bottom:10px}
.ag-bar .poolinfo{font-weight:700;font-size:.88rem;color:#E6ECFF}
.ag-btns{display:flex;gap:6px}
.ag-b{font:inherit;font-size:.78rem;font-weight:700;padding:.35em .8em;border-radius:999px;border:1px solid rgba(245,196,106,.42);
  background:rgba(255,255,255,.05);color:#E6ECFF;cursor:pointer;transition:background .2s,color .2s}
.ag-b:hover{background:rgba(245,196,106,.18);color:#FFE7A8}
.ag{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.anc{position:relative;display:grid;gap:8px;padding:8px;border-radius:14px;cursor:pointer;color:#F2F5FF;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);transition:transform .18s,border-color .2s,background .2s,box-shadow .2s}
.anc:hover{transform:translateY(-3px)}
.anc input{position:absolute;opacity:0;pointer-events:none}
.anc-pics{position:relative;display:block;height:96px;border-radius:10px;overflow:hidden;background:#0A1A44}
.anc-pics img{position:absolute;object-fit:cover;object-position:50% 18%;transition:filter .25s}
.anc-pics img.main{left:0;top:0;width:62%;height:100%}
.anc-pics img.sm{right:0;width:38%;height:50%;border-left:2px solid #0A1A44}
.anc-pics img.sm:nth-child(2){top:0;border-bottom:1px solid #0A1A44}
.anc-pics img.sm:nth-child(3){bottom:0;border-top:1px solid #0A1A44}
.anc-pics img.main:only-child{width:100%}
.anc-pics.cv{height:150px}
.anc-pics.cv img.bg{inset:-10px;width:calc(100% + 20px);height:calc(100% + 20px);object-position:50% 50%;filter:blur(10px) brightness(.55)}
.anc-pics.cv img.cover{left:50%;top:0;height:100%;width:auto;transform:translateX(-50%);object-fit:contain;box-shadow:0 0 12px rgba(0,0,0,.5)}
.anc:not(:has(input:checked)) .anc-pics.cv img.bg{filter:blur(10px) grayscale(1) brightness(.3)}
.anc-none{display:grid;place-items:center;height:100%;font-size:2rem;color:#5B6FA6}
.anc-txt{display:grid;line-height:1.2}
.anc-txt b{font-size:.92rem}
.anc-txt small{font-size:.74rem;color:#9FB2E0}
.anc-ok{position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:.8rem;font-weight:700;
  color:#2A1A06;background:linear-gradient(180deg,#FFE7A8,#F5C46A);box-shadow:0 2px 8px rgba(0,0,0,.4);transform:scale(0);transition:transform .2s cubic-bezier(.2,1.6,.4,1)}
.anc:has(input:checked){border-color:#F5C46A;background:rgba(245,196,106,.12);box-shadow:0 0 0 1px #F5C46A inset,0 6px 18px rgba(0,0,0,.3)}
.anc:has(input:checked) .anc-ok{transform:scale(1)}
.anc:not(:has(input:checked)) .anc-pics img{filter:grayscale(1) brightness(.45)}
.anc:not(:has(input:checked)) .anc-txt{opacity:.55}
.anc:has(input:focus-visible){outline:3px solid #F5C46A;outline-offset:2px}
.ag-err{margin:10px 0 0;color:#fff;font-weight:700;font-size:.85rem;background:rgba(200,20,50,.85);border-radius:10px;padding:6px 10px}
.ag-err:empty{display:none}

/* MODAL COM VISUAL DO LOBBY */
.panel.glass{background:linear-gradient(180deg,#0E2258,#081536);color:#F2F5FF;border:1px solid rgba(245,196,106,.42);border-radius:18px;
  box-shadow:0 30px 80px rgba(0,0,0,.6);animation:riseIn .35s cubic-bezier(.2,.9,.3,1.1) both}
.panel.glass .muted{color:#9FB2E0}
.panel.glass .btn.primary{border:0;border-radius:12px;color:#2A1A06;text-align:center;background:linear-gradient(180deg,#FFE7A8,#F5C46A 55%,#D48D34);box-shadow:0 6px 18px rgba(245,160,60,.35)}
/* TABULEIRO E EDITOR — tema azul-marinho e dourado, fundo do lobby desfocado */
#game,#editor{--paper:#10224F;--ink:#E8EEFF;--soft:#1A2D63;--tone:rgba(255,255,255,.12);--muted:#9FB2E0;
  --safe:#0E3550;--danger:#3E1430;--final:#3D3210;--road:#16295C;
  --gold:#F5C46A;--gold2:#FFE7A8;--line:rgba(245,196,106,.42);--glass:rgba(8,22,62,.84);--edge:rgba(159,178,224,.28);
  position:relative;isolation:isolate;color:#F2F5FF}
#game[hidden],#editor[hidden]{display:none}
#game::before,#editor::before{content:"";position:fixed;inset:-40px;z-index:-1;pointer-events:none;
  background:#0B3FC0 url("lobby-bg.jpg") center/cover no-repeat;filter:blur(12px) brightness(.38) saturate(1.1)}
#game .bar,#editor .edbar{background:rgba(8,20,56,.9);border-bottom:1px solid var(--line);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 6px 24px rgba(0,0,0,.35)}
#game .link,#editor .link{color:#C9D3EE;font-weight:700;text-underline-offset:3px}
#game .link:hover,#editor .link:hover{color:var(--gold2)}
#game #deck{color:var(--muted)}
#game .clock{color:var(--gold2)}
#game .chip{background:rgba(255,255,255,.05)}
#game .btn,#editor .btn{border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.06);color:#F2F5FF;box-shadow:none;text-align:center;
  transition:transform .15s,background .2s,box-shadow .2s,filter .2s}
#game .btn:hover:not(:disabled),#editor .btn:hover:not(:disabled){background:rgba(255,255,255,.12)}
#game .btn:active:not(:disabled),#editor .btn:active:not(:disabled){transform:translateY(1px);box-shadow:none}
#game .btn.primary,#editor .btn.primary{border:0;color:#2A1A06;font-weight:700;background:linear-gradient(180deg,var(--gold2),var(--gold) 55%,#D48D34);
  box-shadow:0 6px 18px rgba(245,160,60,.35)}
#game .btn.primary:hover:not(:disabled),#editor .btn.primary:hover:not(:disabled){filter:brightness(1.06);background:linear-gradient(180deg,var(--gold2),var(--gold) 55%,#D48D34)}
#game .btn:disabled{opacity:.4}
/* mapa */
#game #boardwrap{border:1px solid var(--line);border-radius:16px;
  background:radial-gradient(ellipse 90% 60% at 50% 0%,#1A3577 0%,#0C1A44 60%,#08122F 100%);box-shadow:0 14px 40px rgba(0,0,0,.45)}
#game .road{stroke:#132657}
#game .lane{stroke:var(--gold);opacity:.28}
:is(#game,.bprev) .tl rect{fill:#13275C;stroke:rgba(159,178,224,.55);stroke-width:2;filter:drop-shadow(0 0 3px rgba(120,150,230,.35))}
:is(#game,.bprev) .tl.safe rect{fill:#0E3550;stroke:#4DD0E1;filter:drop-shadow(0 0 5px rgba(77,208,225,.55))}
:is(#game,.bprev) .tl.danger rect{fill:#3E1430;stroke:#FF5C8A;filter:drop-shadow(0 0 5px rgba(255,92,138,.55))}
:is(#game,.bprev) .tl.final rect{fill:#3D3210;stroke:var(--gold);filter:drop-shadow(0 0 5px rgba(245,196,106,.55))}
:is(#game,.bprev) .tl.here rect{stroke:var(--gold2);stroke-width:5;filter:drop-shadow(0 0 6px rgba(255,231,168,.8))}
.mapbox{position:relative}
.mapbox>svg{position:relative;z-index:1}
.hereglow{position:absolute;z-index:0;aspect-ratio:1;transform:translate(-50%,-50%) scale(1.25);border-radius:22%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,231,168,.75),rgba(245,196,106,.25) 55%,transparent 72%);will-change:opacity;animation:hereGlow 1.4s ease-in-out infinite}
@keyframes hereGlow{0%,100%{opacity:.35}50%{opacity:1}}
:is(#game,.bprev) .tl .num{fill:#8C9CC6}
:is(#game,.bprev) .tl .tn{fill:#E8EEFF}
#game .arena circle.ring{fill:#2A2108;stroke:var(--gold);stroke-width:4;filter:drop-shadow(0 0 12px rgba(245,196,106,.75))}
#game .arena text{fill:var(--gold2)}
#game .zone{fill:var(--gold2);opacity:.9;paint-order:stroke;stroke:#08122F;stroke-width:4px}
#game .tok circle{stroke:#fff;stroke-width:3;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}
@keyframes tileGlow{0%,100%{filter:drop-shadow(0 0 4px rgba(255,231,168,.6))}50%{filter:drop-shadow(0 0 14px rgba(255,231,168,1))}}
/* painéis laterais, mão e rodapé */
#game .pcard{border:1px solid var(--edge);border-left:6px solid var(--c);border-radius:14px;background:var(--glass);box-shadow:0 8px 24px rgba(0,0,0,.3)}
#game .pcard.on{border-color:var(--c);box-shadow:0 0 0 1px var(--c),0 0 22px color-mix(in srgb,var(--c) 45%,transparent)}
#game .pcard .stats{color:#E6ECFF}
#game #log{border:1px solid var(--edge);border-radius:14px;background:var(--glass)}
#game #log h3{color:var(--gold)}
#game .fc{border:1px solid var(--edge);border-radius:10px;background:#13275C}
#game .fc .rb{border-right:0}
#game .fc .pic{border-bottom:1px solid var(--edge)}
#game .fc .bn{border:1px solid var(--line);background:#0A1A44;color:var(--gold2)}
#game .fc.back{border:1px dashed var(--line);background-color:#0E1F4D}
#game .chars li{border:1px solid var(--edge);border-radius:8px}
#game .dock{background:rgba(8,20,56,.92);border-top:1px solid var(--line);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 -6px 24px rgba(0,0,0,.35)}
#game #die{border:2px solid var(--gold);border-radius:12px;background:#0A1A44;color:var(--gold2);box-shadow:0 0 14px rgba(245,196,106,.35)}
/* editor */
#editor .edtitle{color:var(--gold2)}
#editor .edtabs button{border:1px solid var(--line);border-bottom:0;border-radius:10px 10px 0 0;background:rgba(8,22,62,.7);color:#C9D3EE;transition:background .2s,color .2s}
#editor .edtabs button:hover{color:#fff}
#editor .edtabs button[aria-selected="true"]{background:linear-gradient(180deg,var(--gold2),var(--gold));color:#2A1A06}
#editor #edBody{border:1px solid var(--line);border-radius:0 14px 14px 14px;background:var(--glass);margin-bottom:24px;box-shadow:0 14px 40px rgba(0,0,0,.4)}
#editor table.mt td,#editor table.mt th{border:1px solid var(--edge)}
#editor table.mt th{color:var(--gold);background:rgba(255,255,255,.04)}
#editor table.mt tr:hover td{background:rgba(255,255,255,.03)}
#editor input[type=text],#editor input[type=number],#editor select,#editor textarea{border:1px solid rgba(245,196,106,.3);border-radius:8px;background:rgba(0,0,0,.3);color:#fff}
#editor input:focus,#editor select:focus,#editor textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(245,196,106,.22)}
#editor .ednote,#editor .muted{color:var(--muted)}
@keyframes sideIn{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
@media (max-width:860px){
  #lobby{grid-template-columns:minmax(0,1fr);align-content:start;background:#081536}
  .lb-side{position:static;height:auto;order:2;border-right:0;border-top:2px solid var(--line)}
  #lbHist{max-height:320px}
  .lb-main{order:1;min-height:0;padding:20px 16px 62vw;
    background:url("lobby-bg.jpg") center bottom/150% auto no-repeat,#0B3FC0}
}
@media (max-width:520px){#lobby .lbgrid{grid-template-columns:minmax(0,1fr)}}
@keyframes arenaZoom{from{transform:scale(1.04)}to{transform:scale(1.12) translateY(-10px)}}
@keyframes raysPulse{0%,100%{opacity:.85}50%{opacity:1}}
@keyframes ember{0%{transform:translateY(0) scale(.6);opacity:0}10%{opacity:.9}80%{opacity:.6}
  100%{transform:translate(30px,-105vh) scale(1.1);opacity:0}}
@keyframes riseIn{from{opacity:0;transform:translateY(28px) scale(.97)}to{opacity:1;transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes titleIn{from{opacity:0;transform:scale(1.35);letter-spacing:.3em}to{opacity:1;transform:none}}
@keyframes heroGlow{0%,100%{box-shadow:0 0 0 1px rgba(255,255,255,.04) inset,0 20px 60px rgba(0,0,0,.55),0 0 40px rgba(245,170,70,.14)}
  50%{box-shadow:0 0 0 1px rgba(255,255,255,.04) inset,0 20px 60px rgba(0,0,0,.55),0 0 70px rgba(245,170,70,.32)}}
@keyframes sweep{0%{background-position:150% 0}60%,100%{background-position:-60% 0}}
html.noanim #auth .embers{display:none}

.deckrow.solo{grid-template-columns:minmax(0,1fr)}
#game .fc.fxc{background:linear-gradient(160deg,#2A1F5E,#13275C);border-color:rgba(155,123,255,.55)}
#game .fc.fxc.trap{background:linear-gradient(160deg,#4A1838,#13275C);border-color:rgba(255,92,138,.55)}
#game .fc.fxc.magic .rb{background:#6C4BD8}#game .fc.fxc.trap .rb{background:#B4234B}

/* PAINEL DE VEZ — um card por jogador; o da vez cresce e mostra o dado */
.turnside{display:flex;gap:10px;align-items:stretch}
.turnside[hidden]{display:none}
.tcard{--c:#F5C46A;position:relative;flex:1 1 0;min-width:0;display:grid;gap:8px;align-content:start;padding:10px 12px;border-radius:16px;
  border:1px solid rgba(159,178,224,.22);background:linear-gradient(180deg,rgba(14,30,78,.86),rgba(7,16,44,.9));overflow:hidden;
  filter:brightness(.55) saturate(.7);opacity:.85;transform:scale(.96);
  transition:flex-grow .45s cubic-bezier(.2,.9,.3,1),transform .45s cubic-bezier(.2,.9,.3,1),filter .45s,opacity .45s,box-shadow .45s,border-color .45s,padding .45s}
.tcard::before{content:"";position:absolute;inset:0 auto 0 0;width:5px;background:var(--c)}
.tcard.on{flex-grow:1.8;filter:none;opacity:1;transform:none;padding:14px 14px 16px;border-color:var(--c);
  background:radial-gradient(120% 80% at 50% 0%,color-mix(in srgb,var(--c) 30%,#14306E) 0%,#0E2258 55%,#081536 100%);
  box-shadow:0 0 0 1px var(--c),0 14px 36px rgba(0,0,0,.45),0 0 32px color-mix(in srgb,var(--c) 40%,transparent)}
.tc-head{display:flex;align-items:center;gap:10px;min-width:0}
.tc-ava{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font:400 .95rem "Dela Gothic One",system-ui,sans-serif;
  color:#fff;background:var(--c);box-shadow:0 0 0 3px rgba(255,255,255,.18);transition:width .45s,height .45s,font-size .45s}
.tcard.on .tc-ava{width:50px;height:50px;font-size:1.2rem;box-shadow:0 0 0 3px rgba(255,255,255,.3),0 0 18px var(--c)}
.tc-nm{display:grid;min-width:0;line-height:1.15}
.tc-nm small{font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#9FB2E0}
.tcard.on .tc-nm small{color:#FFE7A8}
.tc-nm b{font-family:"Dela Gothic One",system-ui,sans-serif;font-weight:400;font-size:1rem;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tcard.on .tc-nm b{font-size:1.3rem}
.tc-info{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:.78rem;color:#C9D3EE}
.tc-info b{color:#fff}
.tc-dice{display:grid;justify-items:center;gap:6px;padding:12px 8px 10px;border-radius:12px;background:rgba(0,0,0,.28);border:1px dashed rgba(245,196,106,.35);text-align:center}
.tcard:not(.on) .tc-dice{padding:4px 8px;border-style:solid;border-color:transparent;background:none;justify-items:start}
.tc-dice .tds{display:flex;gap:10px}
.tdie{width:62px;height:62px;display:grid;place-items:center;border-radius:14px;font:400 2rem "Dela Gothic One",system-ui,sans-serif;color:#2A1A06;
  background:linear-gradient(180deg,#FFF6DA,#F5C46A 60%,#D48D34);box-shadow:inset 0 -4px 0 rgba(0,0,0,.18),0 6px 16px rgba(0,0,0,.4)}
.tdie.spin{animation:dieSpin .28s linear infinite}
.tdie.land{animation:dieLand .45s cubic-bezier(.2,1.6,.4,1)}
.tdie.idle{opacity:.6;font-size:1.6rem}
.tc-dice span{font-size:.8rem;font-weight:700;color:#FFE7A8}
.tcard:not(.on) .tc-dice span{font-weight:500;color:#9FB2E0;font-size:.75rem}
@media (min-width:1180px){
  .layout{grid-template-columns:230px minmax(0,1.7fr) minmax(300px,1fr);max-width:1560px}
  .turnside{flex-direction:column;position:sticky;top:calc(var(--hh,64px) + 10px);align-self:start;max-height:calc(100vh - var(--hh,64px) - 104px)}
  .tcard{flex:0 0 auto}
  .tcard.on{flex:0 0 auto}
  #rollfx{display:none}
}
@media (min-width:980px) and (max-width:1179px){.turnside{grid-column:1/-1}}
@media (max-width:520px){.tdie{width:48px;height:48px;font-size:1.5rem}.tcard.on .tc-nm b{font-size:1.05rem}.tc-info{font-size:.72rem}}

/* JANELAS (modais) — mesmo tema azul-marinho e dourado do tabuleiro */
/* sem backdrop-filter: borrar a tela inteira atrás da janela pesa muito em GPU integrada */
#modal .ov{background:radial-gradient(ellipse at 50% 30%,rgba(8,20,56,.72),rgba(2,6,20,.9))}
/* com uma janela aberta, as animações do tabuleiro (escondido atrás) param */
body:has(#modal:not([hidden]):not(.remote)) #game *{animation-play-state:paused!important}
#modal .panel{--paper:#10224F;--ink:#E8EEFF;--soft:#1A2D63;--tone:rgba(255,255,255,.12);--muted:#9FB2E0;--red:#FF5C8A;
  --gold:#F5C46A;--gold2:#FFE7A8;--line:rgba(245,196,106,.42);--edge:rgba(159,178,224,.28);
  position:relative;color:#F2F5FF;padding:20px 20px 18px;border:1px solid var(--line);border-radius:20px;
  background:radial-gradient(120% 60% at 50% -8%,#22448F 0%,#10224F 48%,#0A1636 100%);
  box-shadow:0 30px 80px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.08),0 0 46px rgba(245,196,106,.14);
  animation:mIn .32s cubic-bezier(.2,.9,.3,1.15) both;scrollbar-width:thin;scrollbar-color:rgba(245,196,106,.4) transparent}
#modal .panel::before{content:"";position:absolute;left:24px;right:24px;top:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);pointer-events:none}
#modal .panel.shake{animation:shake .3s}
@keyframes mIn{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}
#modal .panel h2{font-size:1.45rem;margin:0;color:transparent;
  background:linear-gradient(180deg,#FFF6DA 0%,var(--gold2) 40%,var(--gold) 75%,#C98330 100%);-webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 2px 0 rgba(40,15,0,.65))}
#modal .panel h3{color:var(--gold);font-size:.82rem;letter-spacing:.12em;text-transform:uppercase}
#modal .panel p{color:#DCE4FA}
#modal .panel .muted,#modal .panel p.muted{color:var(--muted)}
#modal .panel b{color:#fff}
.mhd{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.mic{flex:none;width:52px;height:52px;border-radius:15px;display:grid;place-items:center;font-size:1.65rem;line-height:1;
  --mc:#F5C46A;background:radial-gradient(circle at 35% 25%,color-mix(in srgb,var(--mc) 70%,#fff),color-mix(in srgb,var(--mc) 35%,#0A1A44) 70%);
  border:1px solid color-mix(in srgb,var(--mc) 70%,transparent);box-shadow:0 0 18px color-mix(in srgb,var(--mc) 45%,transparent),inset 0 -3px 0 rgba(0,0,0,.25);
  animation:micPop .5s cubic-bezier(.2,1.6,.4,1) both}
.mic.t-safe{--mc:#4DD0E1}.mic.t-danger{--mc:#FF5C8A}.mic.t-magic{--mc:#9B7BFF}
@keyframes micPop{from{transform:scale(.4) rotate(-20deg);opacity:0}to{transform:none;opacity:1}}
#modal .whos{display:inline-flex;margin:0 0 12px;padding:3px 10px 3px 6px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--edge);color:#C9D3EE;font-size:.76rem}
#modal .btn{border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.06);color:#F2F5FF;box-shadow:none;text-align:center;
  transition:transform .15s,background .2s,box-shadow .2s,filter .2s,border-color .2s}
#modal .btn:hover:not(:disabled){background:rgba(245,196,106,.14);border-color:var(--gold)}
#modal .btn:active:not(:disabled){transform:translateY(1px);box-shadow:none}
#modal .btn.primary{border:0;color:#2A1A06;font-weight:700;background:linear-gradient(180deg,var(--gold2),var(--gold) 55%,#D48D34);box-shadow:0 6px 18px rgba(245,160,60,.35)}
#modal .btn.primary:hover:not(:disabled){filter:brightness(1.07);background:linear-gradient(180deg,var(--gold2),var(--gold) 55%,#D48D34);box-shadow:0 10px 24px rgba(245,160,60,.5)}
#modal .btn:disabled{opacity:.38}
#modal :focus-visible{outline:2px solid var(--gold2);outline-offset:3px}
#modal .acts.col .btn{text-align:left;padding:.65em 1em}
#modal .acts.col .btn.primary{text-align:center}
#modal input[type=text],#modal input[type=number],#modal input[type=password],#modal select,#modal textarea{border:1px solid rgba(245,196,106,.32);border-radius:12px;
  background:rgba(0,0,0,.32)!important;color:#fff!important;transition:border-color .2s,box-shadow .2s}
#modal input:focus,#modal select:focus,#modal textarea:focus{outline:none;border-color:var(--gold)!important;box-shadow:0 0 0 3px rgba(245,196,106,.22)}
#modal input::placeholder{color:#7E8DB8}
#modal option,#modal optgroup{background:#0E2258;color:#fff}
#modal .clues{list-style:none;padding:0;margin:12px 0;display:grid;gap:8px;counter-reset:cl}
#modal .clues li{counter-increment:cl;position:relative;margin:0;padding:10px 12px 10px 48px;border-radius:12px;font-size:1rem;color:#fff;
  background:linear-gradient(90deg,rgba(245,196,106,.16),rgba(255,255,255,.04));border:1px solid rgba(245,196,106,.4);animation:fadeUp .35s ease both}
#modal .clues li::before{content:counter(cl);position:absolute;left:10px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;font:400 .9rem "Dela Gothic One",system-ui,sans-serif;color:#2A1A06;background:linear-gradient(180deg,var(--gold2),var(--gold))}
#modal .clues li.locked{color:var(--muted);font-weight:400;font-size:.9rem;background:rgba(255,255,255,.03);border:1px dashed var(--edge)}
#modal .clues li.locked::before{content:"🔒";background:rgba(255,255,255,.08);font-size:.75rem}
#modal .msg{color:#FF8EAB;background:rgba(255,92,138,.12);border:1px solid rgba(255,92,138,.4);border-radius:10px;padding:6px 10px}
#modal .cardq,#modal .ccard,#modal .pick,#modal .ec,#modal .rv,#modal .tpc,#modal .bc{border:1px solid var(--edge);border-radius:14px;background:linear-gradient(180deg,rgba(26,45,99,.85),rgba(12,26,66,.85))}
#modal .cardq{padding:12px}
#modal .cardq b{color:var(--gold2)}
#modal .ccard{padding:12px;border-color:var(--line);box-shadow:0 8px 22px rgba(0,0,0,.3)}
#modal .ccard b{color:var(--gold2)}
#modal .ccard .pic,#modal .vs .ent .pic,#modal .pic.mini{border:1px solid var(--line);border-radius:10px}
#modal .ec{padding:10px 12px;margin-bottom:8px;border-left:4px solid #9B7BFF}
#modal .ec.trap{border-left:4px solid #FF5C8A;border-style:solid;border-width:1px 1px 1px 4px}
#modal .ec .kd{color:var(--gold);text-transform:uppercase;letter-spacing:.08em;font-size:.68rem}
#modal .ec .ds{color:#C9D3EE}
#modal .rv img,#modal .rv .noimg{border-bottom:1px solid var(--edge)}
#modal .pick{transition:border-color .2s,background .2s}
#modal .pick:hover{border-color:var(--gold)}
#modal .pick:has(input:checked),#modal .tpc:has(input:checked){background:linear-gradient(180deg,rgba(255,231,168,.25),rgba(245,196,106,.12));color:#fff;border-color:var(--gold)}
#modal .bids label{padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--edge)}
#modal table.mt td,#modal table.mt th{border:1px solid var(--edge)}
#modal table.mt th{color:var(--gold);background:rgba(255,255,255,.04)}
#modal .tpick{border:1px solid var(--edge);border-radius:14px}
#modal .fc{border:1px solid var(--edge);border-radius:10px;background:#13275C}
#modal .fc .rb{border-right:0}
#modal .fc .bn{border:1px solid var(--line);background:#0A1A44;color:var(--gold2)}
#modal .fc.back{border:1px dashed var(--line);background-color:#0E1F4D}
#modal .champ{border:1px solid var(--line);border-radius:16px;background:radial-gradient(circle,rgba(245,196,106,.25),transparent 70%)}
#modal .champ div{color:var(--gold2)}
#modal .vs{border:1px solid var(--line);border-radius:14px}
#modal .vs .ent{border:1px solid var(--edge);border-radius:10px;background:rgba(10,22,54,.85)}
/* LOJA ILUSTRADA — imagem loja.jpg com áreas clicáveis por cima de cada item */
#modal .panel.shopx{width:min(1180px,100%,calc((100vh - 40px)*1.5));padding:0;overflow:hidden;background:#0A1636}
.shx.soon .tip em{color:#F5C46A}
#modal .panel.shopx::before,#modal .panel.shopx .mhd,#modal .panel.shopx .whos{display:none}
#modal .shx-tav b,#modal .shx-tav small{color:#2A1A06}
#modal .shx-door b{color:#FFE7A8}
.shopx-stage{position:relative;aspect-ratio:3/2;width:100%;overflow:visible;user-select:none}
.shopx-stage>img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
.shx{position:absolute;width:10.4%;height:16.6%;padding:0;margin:0;border:0;border-radius:14px;background:transparent;cursor:pointer;
  transition:background .2s,box-shadow .2s,transform .15s}
.shx:hover,.shx:focus-visible{background:radial-gradient(circle at 50% 42%,rgba(255,231,168,.32),transparent 70%);
  box-shadow:0 0 0 2px #F5C46A,0 0 22px rgba(245,196,106,.65);outline:none;transform:translateY(-2px);z-index:3}
.shx:active{transform:translateY(1px)}
.shx.no{cursor:not-allowed}
.shx.no::after{content:"";position:absolute;inset:0;border-radius:inherit;background:rgba(6,10,28,.5)}
.shx.no:hover,.shx.no:focus-visible{box-shadow:0 0 0 2px rgba(255,92,138,.8);background:transparent}
.shx.soon{cursor:help}
.shx.soon:hover,.shx.soon:focus-visible{box-shadow:0 0 0 2px rgba(159,178,224,.6);background:transparent}
.shx .tip{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translate(-50%,6px);width:max-content;max-width:min(260px,70vw);
  display:grid;gap:3px;padding:10px 12px;border-radius:12px;text-align:left;font-size:.8rem;line-height:1.3;color:#DCE4FA;pointer-events:none;
  background:linear-gradient(180deg,#14306E,#0A1A44);border:1px solid #F5C46A;box-shadow:0 12px 30px rgba(0,0,0,.6);
  opacity:0;visibility:hidden;transition:opacity .15s,transform .15s,visibility .15s;z-index:5}
.shx.dn .tip{bottom:auto;top:calc(100% + 10px);transform:translate(-50%,-6px)}
.shx.l .tip{left:0;transform:translateY(6px)}
.shx.l.dn .tip{transform:translateY(-6px)}
.shx:hover .tip,.shx:focus-visible .tip{opacity:1;visibility:visible;transform:translate(-50%,0)}
.shx.l:hover .tip,.shx.l:focus-visible .tip{transform:none}
.shx .tip b{font-family:"Dela Gothic One",system-ui,sans-serif;font-weight:400;font-size:.95rem;color:#FFE7A8}
.shx .tip .tc{justify-self:start;font-weight:700;font-size:.78rem;padding:1px 9px;border-radius:999px;color:#2A1A06;background:linear-gradient(180deg,#FFE7A8,#F5C46A)}
.shx .tip .tc s{opacity:.6;margin-left:4px}
.shx .tip .tk{font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#9FB2E0}
.shx .tip em{font-style:normal;font-weight:700;font-size:.74rem;color:#7FE3C4}
.shx .tip em.bad{color:#FF8EAB}
.shx-tav{position:absolute;left:61.5%;top:38%;width:15%;display:grid;justify-items:center;gap:2px;padding:12px 6px;border-radius:14px;cursor:pointer;font:inherit;
  color:#2A1A06;border:2px solid #7A4A14;background:linear-gradient(180deg,#FFE7A8,#F5C46A 60%,#D48D34);box-shadow:0 8px 20px rgba(0,0,0,.45);transition:transform .15s,filter .2s}
.shx-tav:hover,.shx-tav:focus-visible{transform:translateY(-3px);filter:brightness(1.08);outline:none}
.shx-tav span{font-size:1.8rem;line-height:1}.shx-tav b{font-family:"Dela Gothic One",system-ui,sans-serif;font-weight:400;font-size:1rem}.shx-tav small{font-size:.7rem;font-weight:700}
.shx-foot{position:absolute;left:1.6%;bottom:2.4%;display:flex;align-items:center;gap:10px;z-index:4}
.shx-door{display:flex;align-items:center;gap:8px;padding:6px 14px 6px 8px;border-radius:14px;cursor:pointer;font:inherit;color:#FFE7A8;
  border:1px solid #F5C46A;background:linear-gradient(180deg,rgba(20,48,110,.95),rgba(10,26,68,.95));box-shadow:0 8px 20px rgba(0,0,0,.5);transition:transform .15s,box-shadow .2s}
.shx-door:hover,.shx-door:focus-visible{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.55),0 0 16px rgba(245,196,106,.5);outline:none}
.shx-door b{font-family:"Dela Gothic One",system-ui,sans-serif;font-weight:400;font-size:.95rem}
.shx-door .door{position:relative;width:26px;height:36px;border-radius:5px 5px 2px 2px;background:linear-gradient(90deg,#8B5A2B,#6B3F1A);border:2px solid #3E2410;perspective:80px}
.shx-door .door i{position:absolute;inset:2px;border-radius:3px 3px 1px 1px;background:linear-gradient(90deg,#A86B34,#7C4A20);transform-origin:left center;transition:transform .35s cubic-bezier(.2,.9,.3,1)}
.shx-door .door i::after{content:"";position:absolute;right:3px;top:50%;width:4px;height:4px;border-radius:50%;background:#F5C46A}
.shx-door:hover .door,.shx-door:focus-visible .door{background:#0A0A12}
.shx-door:hover .door i,.shx-door:focus-visible .door i{transform:rotateY(-62deg)}
.shx-en{display:grid;gap:1px;white-space:nowrap;padding:7px 14px;border-radius:14px;color:#F2F5FF;font-weight:700;
  background:rgba(8,20,56,.9);border:1px solid rgba(245,196,106,.5);box-shadow:0 8px 20px rgba(0,0,0,.45)}
.shx-en b{font-family:"Dela Gothic One",system-ui,sans-serif;font-weight:400;font-size:1.25rem;color:#FFE7A8}
.shx-en small{font-size:.7rem;color:#9FB2E0;font-weight:500}
.shx-ok{position:absolute;left:50%;top:2.5%;transform:translateX(-50%);padding:6px 16px;border-radius:999px;font-weight:700;color:#06301F;
  background:linear-gradient(180deg,#B6F5DE,#4DD0A0);box-shadow:0 8px 20px rgba(0,0,0,.4);animation:fadeUp .35s ease both;z-index:4;white-space:nowrap}
.shx-tag{position:absolute;right:2%;top:2.5%;padding:5px 12px;border-radius:999px;font-weight:700;font-size:.8rem;color:#fff;background:rgba(108,75,216,.92);border:1px solid #B9A4FF;z-index:4}
@media (max-width:640px){.shx-door b{display:none}.shx-door{padding:4px 6px}.shx-door .door{width:18px;height:26px}.shx-en{padding:4px 10px}.shx-en b{font-size:1rem}
  .shx-tav{padding:6px 2px}.shx-tav span{font-size:1.2rem}.shx-tav small{display:none}.shx-tav b{font-size:.75rem}.shx .tip{font-size:.72rem}}

/* Loja e Taverna em cartas clicáveis */
.shopgrid,.tvgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;margin-top:10px}
.sh{--k:#9B7BFF;position:relative;display:flex;flex-direction:column;gap:3px;text-align:left;padding:12px 12px 12px 14px;border-radius:14px;cursor:pointer;
  font:inherit;color:#F2F5FF;border:1px solid color-mix(in srgb,var(--k) 55%,transparent);
  background:linear-gradient(160deg,color-mix(in srgb,var(--k) 22%,#10224F),#0A1636 80%);box-shadow:0 6px 16px rgba(0,0,0,.3);
  transition:transform .15s,box-shadow .2s,border-color .2s}
.sh.trap{--k:#FF5C8A}
.sh::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--k)}
.sh:hover:not(:disabled){transform:translateY(-3px);border-color:var(--k);box-shadow:0 12px 26px rgba(0,0,0,.4),0 0 18px color-mix(in srgb,var(--k) 40%,transparent)}
.sh:disabled{cursor:not-allowed;opacity:.42;filter:grayscale(.5)}
.sh .sh-c{position:absolute;top:8px;right:8px;font-size:.78rem;font-weight:700;padding:1px 8px;border-radius:999px;color:#2A1A06;background:linear-gradient(180deg,#FFE7A8,#F5C46A)}
.sh .sh-k{font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:color-mix(in srgb,var(--k) 70%,#fff);padding-right:58px}
.sh b{font-size:.98rem;line-height:1.15}
.sh .sh-d{font-size:.78rem;color:#C9D3EE;line-height:1.3}
.sh .sh-i{font-size:1.4rem;line-height:1}
.tvgrid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.sh.tv{--k:#F5C46A;padding:0;overflow:hidden}
.sh.tv::before{display:none}
.sh.tv img,.sh.tv .noimg{width:100%;height:130px;object-fit:cover;object-position:50% 18%;display:grid;place-items:center;font-size:2rem;background:#0A1A44;border-bottom:1px solid var(--line)}
.sh.tv .tvb{display:grid;gap:2px;padding:8px 10px 10px}
.sh.tv .sh-k{padding-right:0}

/* ======================= TEMA ANIME =======================
   Base JAPÃO TRADICIONAL: papel washi, índigo (藍), vermelho shu (朱) e dourado, ondas seigaiha e gravuras ukiyo-e
   (Hokusai e Hiroshige, domínio público). Casas do tabuleiro com kanji e verso das cartas com carimbo hanko.
   MANGÁ SHŌNEN no card de vez, nas janelas e nos itens da loja: papel branco, tinta preta grossa, retícula, amarelo e vermelho. */
body{--p1:#C8352B;--p2:#2E4A7D;--p3:#B07A12;--p4:#4F7A3A;--p5:#6E3A8E;--p6:#C2601F;--p7:#1E7F86;--p8:#A8326A}
:root{--seig:radial-gradient(circle at 100% 150%,transparent 24%,rgba(30,35,64,.07) 24% 28%,transparent 28% 36%,rgba(30,35,64,.07) 36% 40%,transparent 40%),
  radial-gradient(circle at 0 150%,transparent 24%,rgba(30,35,64,.07) 24% 28%,transparent 28% 36%,rgba(30,35,64,.07) 36% 40%,transparent 40%);
  --seig-kin:radial-gradient(circle at 100% 150%,transparent 24%,rgba(233,196,106,.5) 24% 28%,transparent 28% 36%,rgba(233,196,106,.5) 36% 40%,transparent 40%),
  radial-gradient(circle at 0 150%,transparent 24%,rgba(233,196,106,.5) 24% 28%,transparent 28% 36%,rgba(233,196,106,.5) 36% 40%,transparent 40%);
  --tone-dots:radial-gradient(rgba(0,0,0,.16) 1px,transparent 1.3px);
  --speed:repeating-conic-gradient(from 0deg at 100% 0%,rgba(0,0,0,.05) 0 2deg,transparent 2deg 6deg)}

/* ---- partida: papel washi com o Fuji Vermelho de Hokusai bem clarinho ao fundo ---- */
#game,#editor{--paper:#FBF5E8;--ink:#1E2340;--soft:#E9DDC2;--tone:rgba(30,35,64,.1);--muted:#6B6452;--safe:#2E4A7D;--danger:#C8352B;--final:#E9C46A;--road:#E3D5B5;
  --gold:#B8862B;--gold2:#E9C46A;--line:rgba(30,35,64,.4);--glass:#FBF5E8;--edge:rgba(30,35,64,.3);color:#1E2340;
  background-color:#F1E6CF;background-image:var(--seig);background-size:56px 28px}
#game::before,#editor::before{inset:0;background:url("ukiyoe-fuji.jpg") right bottom/min(75vw,1150px) auto no-repeat;filter:sepia(.2);opacity:.17}
#game .bar,#editor .edbar,#game .dock{background:#1E2340;color:#FBF5E8;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 4px 0 rgba(30,35,64,.18)}
#game .bar,#editor .edbar{border-bottom:3px solid #C8352B}
#game .dock{border-top:3px solid #C8352B}
#game .link,#editor .link{color:#E9DDC2}
#game .link:hover,#editor .link:hover{color:#E9C46A}
#game #turn{font-family:"Shippori Mincho B1",serif;font-weight:800}
#game .chip{background:rgba(251,245,232,.08);color:#FBF5E8;border-radius:4px}
#game .chip.on{background:var(--c);color:#fff}
#game #deck{color:#C9BFA6}
#game .clock{color:#E9C46A}
#game .btn,#editor .btn{border:2px solid #1E2340;border-radius:4px;background:#FBF5E8;color:#1E2340;box-shadow:3px 3px 0 #1E2340;font-weight:700}
#game .btn:hover:not(:disabled),#editor .btn:hover:not(:disabled){background:#fff}
#game .btn:active:not(:disabled),#editor .btn:active:not(:disabled){transform:translate(2px,2px);box-shadow:1px 1px 0 #1E2340}
#game .btn.primary,#editor .btn.primary{background:#C8352B;color:#FBF5E8;border-color:#1E2340;box-shadow:3px 3px 0 #1E2340}
#game .btn.primary:hover:not(:disabled),#editor .btn.primary:hover:not(:disabled){background:#D9443A;filter:none}
#game .dock .btn{border-color:#FBF5E8;box-shadow:3px 3px 0 #0A0D1C}
#game #die{border:2px solid #E9C46A;border-radius:6px;background:#FBF5E8;color:#C8352B;box-shadow:none}
#game .zoombar .lg{color:#6B6452}
#editor .edtitle{color:#E9C46A}
#editor #edBody{background:#FBF5E8;border:2px solid #1E2340;border-radius:0 4px 4px 4px;box-shadow:6px 6px 0 rgba(30,35,64,.2)}
#editor .edtabs button{border:2px solid #1E2340;border-bottom:0;border-radius:4px 4px 0 0;background:#E9DDC2;color:#1E2340}
#editor .edtabs button[aria-selected="true"]{background:#1E2340;color:#FBF5E8}
/* aba Cartas do Editor */
.edc-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 12px}
.edc-bar input[type=search]{flex:1;min-width:180px}
.edc-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,520px),1fr));gap:12px}
.edc{display:grid;grid-template-columns:110px minmax(0,1fr);gap:10px;padding:10px;border:1.5px solid rgba(127,127,127,.45);border-radius:8px;background:rgba(127,127,127,.06)}
.edc.req{border-color:#C8352B;box-shadow:inset 3px 0 0 #C8352B}
.edc.off{opacity:.55;border-style:dashed}
.edc.off .edc-pic .ph{filter:grayscale(1)}
.edc-pic{display:flex;flex-direction:column;gap:6px;align-items:stretch}
.edc-pic .ph{aspect-ratio:5/7;border-radius:6px;overflow:hidden;display:grid;place-items:center;background:rgba(127,127,127,.18);font-size:2rem;border:1px solid rgba(127,127,127,.4)}
.edc-pic .ph img{width:100%;height:100%;object-fit:cover}
.edc-pic .btn{font-size:.75rem;padding:4px 6px}
.edc-f{display:grid;gap:6px;min-width:0}
.edc-f label{display:grid;gap:2px;font-size:.78rem;font-weight:700}
.edc-f input,.edc-f textarea{width:100%;font:inherit;font-size:.85rem;font-weight:400}
.edc-f textarea{resize:vertical}
.edc-k{font-size:.72rem;opacity:.75;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.edc-k b{font-size:.68rem;padding:1px 7px;border-radius:999px;background:rgba(127,127,127,.25)}
.edc-k b.pend{background:#C8352B;color:#fff}
.edc-orig{font-size:.72rem;opacity:.75;margin:0;line-height:1.3}
/* aba Personagens: o lutador como carta */
.edc.edf{grid-template-columns:180px minmax(0,1fr)}
.edf .edc-pic{align-self:start}
.edf-card{position:relative;aspect-ratio:5/7.2;border-radius:7px;overflow:hidden;display:flex;flex-direction:column;background:#FBF5E8;color:#1E2340;
  border:2px solid var(--rc,#8A7A4A);box-shadow:0 3px 8px rgba(0,0,0,.35);font-size:.7rem;line-height:1.15;text-align:left}
/* a imagem ocupa a carta inteira; nome, anime, estilo e habilidade ficam embaixo (.edf-info), como na carta ampliada do duelo */
.edf-card .art{position:absolute;inset:0;background:#1E2340;display:grid;place-items:center;overflow:hidden}
.edf-card .art img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.edf-card .art span{font:2rem "Dela Gothic One",system-ui,sans-serif;color:#E9C46A}
.edf-card .rkb{position:absolute;left:3px;top:3px;min-width:1.9em;height:1.9em;padding:0 2px;border-radius:999px;display:grid;place-items:center;background:var(--rc,#555);color:#fff;
  font:.75rem "Dela Gothic One",system-ui,sans-serif;border:1.5px solid #fff}
.edf-info{display:flex;flex-direction:column;margin-top:6px;padding:4px 2px;background:#FBF5E8;color:#1E2340;border-radius:6px;font-size:.7rem;line-height:1.15}
.edf-info .nm{padding:4px 6px 0;font:800 .9rem "Shippori Mincho B1",serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.edf-info .mt{padding:0 5px;color:#6B6452;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.edf-info .hb{flex:1;margin:3px 4px 4px;padding:3px 4px;background:#F3EBD3;border:1px solid var(--rc,#8A7A4A);border-radius:3px;color:#1a1a1a;overflow:auto;font-size:.68rem;line-height:1.3}
.edf-info .hb i{opacity:.6}
.edf .edc-k .grow{flex:1}
.edf-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;align-items:end}
.edf-row.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.edf-row select{width:100%;font:inherit;font-size:.85rem;font-weight:400}
.edf-f label.chk,.edc-f label.chk{display:flex;align-items:center;gap:6px;font-weight:700}
.edc-f label.chk input{width:auto}
@media (max-width:520px){.edc.edf{grid-template-columns:120px minmax(0,1fr)}.edf-row,.edf-row.three{grid-template-columns:minmax(0,1fr)}}
.edt .edt-ph{aspect-ratio:1;flex-direction:column;gap:2px;border:2.5px solid #111;box-shadow:3px 3px 0 #111}
.edt .edt-ph small{font:400 .8rem/1 Bangers,"Dela Gothic One",sans-serif;letter-spacing:.04em;text-transform:uppercase;text-align:center;padding:0 4px}
#editor table.mt th{color:#C8352B;background:#F1E6CF}
#editor input[type=text],#editor input[type=number],#editor select,#editor textarea{border:1.5px solid #1E2340;border-radius:4px;background:#fff;color:#1E2340}

/* ---- tabuleiro: mapa ilustrado por regiões de anime + casas estilo mangá com ícones desenhados ---- */
#game #boardwrap{border:4px solid #111;border-radius:6px;background:#BFDC8E;box-shadow:7px 7px 0 #111}
#game #boardwrap{width:fit-content;max-width:100%;margin:0 auto}
.mapbox>svg.mapart{position:absolute;left:0;top:0;z-index:0}
.mapbox>#map{position:relative;z-index:2;display:block}
.hereglow{z-index:1;background:radial-gradient(circle,rgba(255,212,0,.95),rgba(232,32,42,.45) 55%,transparent 72%);transform:translate(-50%,-50%) scale(1.45)}
.hereglow[hidden]{display:none}
.mapart .edge{fill:none;stroke:#111;stroke-width:5}
.mapart .trail{fill:none;stroke:#4A3520;stroke-width:9;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 19;opacity:.6}
.mapart .rib path{fill:#fff;stroke:#111;stroke-width:3.5;stroke-linejoin:round}
.mapart .rib text{font:400 22px Bangers,"Dela Gothic One",sans-serif;letter-spacing:.06em;fill:#111;text-anchor:middle}
.mapart .kjt{font:400 27px "Yuji Syuku","Shippori Mincho B1",serif;fill:#fff;text-anchor:middle}
.mapart .hdr{font:400 15px Bangers,"Dela Gothic One",sans-serif;letter-spacing:.06em;fill:#111;text-anchor:middle}
/* cada tipo de casa tem a sua cor (TILE_COL no script): --tc fundo, --ti ícone e texto */
:is(#game,.bprev) .tl{color:var(--ti,#111)}
:is(#game,.bprev) .tl rect.sh,:is(#game,.bprev) .tl circle.sh{fill:#111;stroke:none;filter:none}
:is(#game,.bprev) .tl rect.bg,:is(#game,.bprev) .tl circle.bg{fill:var(--tc,#fff);stroke:#111;stroke-width:4;filter:none}
:is(#game,.bprev) .tl.arena circle.bg{fill:#FFD400}
:is(#game,.bprev) .tl rect.dt,:is(#game,.bprev) .tl circle.dt{fill:url(#tdots);stroke:none;opacity:.13}
:is(#game,.bprev) .tl.dk rect.dt{fill:url(#wdots);opacity:.2}
:is(#game,.bprev) .tl.arena circle.dt{opacity:.16}
:is(#game,.bprev) .tl.here rect.bg{stroke-width:7}
:is(#game,.bprev) .tl.here rect.sh{fill:#E8202A}
:is(#game,.bprev) .tl .num{font:700 13px "Zen Kaku Gothic New",system-ui,sans-serif;fill:currentColor;opacity:.75}
:is(#game,.bprev) .tl .tn{font:400 15px Bangers,"Dela Gothic One",sans-serif;letter-spacing:.05em;fill:currentColor;text-anchor:middle}
:is(#game,.bprev) .tl .bdg circle{fill:#fff;stroke:#111;stroke-width:3}
:is(#game,.bprev) .tl .bdg text{font:400 15px Bangers,"Dela Gothic One",sans-serif;fill:#111;text-anchor:middle}
:is(#game,.bprev) .tl.arena .num{fill:#111}
#game .tok circle,#game .tok path{filter:none}
#game .tocc{fill:none;stroke-width:7;pointer-events:none;filter:drop-shadow(0 0 0 #111) drop-shadow(2px 2px 0 #111)}
#game .tok .ts{fill:#111;stroke:none;opacity:.55}
#game .tok .tpin{stroke:#111;stroke-width:3.5;stroke-linejoin:round}
#game .tok .tring{fill:#fff;stroke:#111;stroke-width:4}
#game .tok .tbody{stroke:#111;stroke-width:2.5}
#game .tok text{font:400 20px Bangers,"Dela Gothic One",sans-serif;letter-spacing:.04em;fill:#fff;stroke:#111;stroke-width:3.5;paint-order:stroke;text-anchor:middle;dominant-baseline:central}
#game .tok.cur .tring{fill:#FFD400}
#game .tok .tpulse{fill:none;stroke:#FFD400;stroke-width:6;transform-box:fill-box;transform-origin:center;animation:tokPulse 1.2s ease-out infinite}
@keyframes tokPulse{0%{transform:scale(.9);opacity:1}100%{transform:scale(1.7);opacity:0}}
.noanim #game .tok .tpulse{animation:none;opacity:.8}

/* ---- painéis dos jogadores (washi) e cartas da mão ---- */
#game .pcard{background:#FBF5E8;border:2px solid #1E2340;border-left:8px solid var(--c);border-radius:4px;box-shadow:4px 4px 0 rgba(30,35,64,.18);outline:1px solid rgba(30,35,64,.3);outline-offset:-6px}
#game .pcard.on{border-color:#1E2340;border-left-color:var(--c);box-shadow:5px 5px 0 var(--c)}
#game .pcard h3{font-family:"Shippori Mincho B1",serif;font-weight:800;font-size:1.15rem}
#game .pcard .stats{color:#1E2340}
#game .dkl{color:#C8352B}
#game .fc{background:#FBF5E8;border:1.5px solid #1E2340;border-radius:4px;color:#1E2340}
#game .fc .bn{background:#1E2340;color:#E9C46A;border-color:#1E2340}
#game .fc .pw{background:#1E2340;color:#E9C46A}
#game .mis{border:1.5px dashed #C8352B;background:rgba(200,53,43,.06);border-radius:4px}
/* verso das cartas (lutador oculto): ondas seigaiha e carimbo 闘 */
#game .fc.back,#modal .fc.back{border:2px solid #E9C46A;background-color:#1E2340;background-image:var(--seig-kin);background-size:22px 11px;color:#FBF5E8}
#game .fc.back b,#modal .fc.back b{color:#FBF5E8}
#game .fc.back em,#modal .fc.back em{color:#E9DDC2}
.fc.back .rb{background:#C8352B!important;font-size:0}
.fc.back .rb::after{content:"闘";font-family:"Yuji Syuku","Shippori Mincho B1",serif;font-size:1.05rem;color:#FBF5E8}
/* suas cartas especiais: estilo mangá */
#game .fc.fxc,#game .fc.fxc.magic,#game .fc.fxc.trap{background:#fff;border:2.5px solid #111;box-shadow:3px 3px 0 #111;color:#111}
#game .fc.fxc.magic .rb{background:#FFD400;color:#111}
#game .fc.fxc.trap .rb{background:#E8202A;color:#fff}
#game .fc.fxc b{font-family:Bangers,"Dela Gothic One",sans-serif;font-weight:400;font-size:1rem;letter-spacing:.03em}
#game .fc.fxc .st{color:#E8202A;font-weight:700}

/* ---- card de vez: mangá shōnen ---- */
.tcard{background:#fff;color:#111;border:3px solid #111;border-radius:6px;box-shadow:5px 5px 0 #111;filter:grayscale(.75);opacity:.62;transform:scale(.95)}
.tcard::before{display:none}
.tcard.on{filter:none;opacity:1;transform:rotate(-1.2deg);background:#fff;background-image:var(--speed);border-color:#111;box-shadow:7px 7px 0 var(--c)}
.tc-ava,.tcard.on .tc-ava{border:3px solid #111;box-shadow:none;font-family:Bangers,"Dela Gothic One",sans-serif;font-size:1.25rem;letter-spacing:.04em}
.tc-nm small{color:#555}
.tcard.on .tc-nm small{color:#E8202A}
.tc-nm b{font-family:Bangers,"Dela Gothic One",sans-serif;font-size:1.4rem;letter-spacing:.04em;color:#111}
.tcard.on .tc-nm b{font-size:1.8rem}
.tc-info{color:#333}.tc-info b{color:#111}
.tc-dice{background:#fff;border:2.5px dashed #111;border-radius:10px}
.tdie{background:#FFD400;color:#111;border:3px solid #111;border-radius:10px;box-shadow:4px 4px 0 #111;font-family:Bangers,"Dela Gothic One",sans-serif;font-size:2.3rem}
.tc-dice span{color:#111}
.tcard:not(.on) .tc-dice span{color:#555}
#rollfx{background:#fff;color:#111;border:3px solid #111;border-radius:8px;box-shadow:6px 6px 0 #111}
#rollfx .rdie{background:#FFD400;color:#111;border:3px solid #111;box-shadow:3px 3px 0 #111;font-family:Bangers,"Dela Gothic One",sans-serif}
#netwait{background:#1E2340;color:#FBF5E8;border:2px solid #E9C46A}

/* ---- janelas: mangá shōnen ---- */
#modal .ov{background-color:rgba(20,22,30,.5);background-image:var(--tone-dots);background-size:6px 6px}
#modal .panel{--paper:#fff;--ink:#111;--soft:#eee;--tone:rgba(0,0,0,.08);--muted:#555;--red:#E8202A;--gold:#E8202A;--gold2:#FFD400;--line:#111;--edge:#111;
  color:#111;background:#fff;background-image:var(--speed);border:4px solid #111;border-radius:6px;box-shadow:10px 10px 0 #111}
#modal .panel::before{display:none}
#modal .panel h2{color:#111;background:none;-webkit-background-clip:border-box;background-clip:border-box;filter:none;
  font-family:Bangers,"Dela Gothic One",sans-serif;font-weight:400;font-size:2.15rem;letter-spacing:.04em;line-height:1;text-shadow:3px 3px 0 #FFD400}
#modal .panel h3{color:#E8202A}
#modal .panel p{color:#222}
#modal .panel .muted,#modal .panel p.muted{color:#555}
#modal .panel b{color:inherit}
.mic{background:#FFD400;border:3px solid #111;border-radius:8px;box-shadow:3px 3px 0 #111;animation:none;transform:rotate(-6deg)}
.mic.t-danger{background:#E8202A}.mic.t-safe{background:#8FD3F5}.mic.t-magic{background:#fff}
#modal .whos{background:#fff;border:2px solid #111;color:#111}
#modal .btn{border:3px solid #111;border-radius:4px;background:#fff;color:#111;box-shadow:3px 3px 0 #111;font-weight:700}
#modal .btn:hover:not(:disabled){background:#FFF3A6;border-color:#111}
#modal .btn:active:not(:disabled){transform:translate(3px,3px);box-shadow:0 0 0 #111}
#modal .btn.primary{background:#E8202A;color:#fff;border:3px solid #111;box-shadow:3px 3px 0 #111}
#modal .btn.primary:hover:not(:disabled){background:#FF3B44;filter:none;box-shadow:3px 3px 0 #111}
#modal :focus-visible{outline:3px solid #1F5FBF}
#modal input[type=text],#modal input[type=number],#modal input[type=password],#modal select,#modal textarea{border:3px solid #111;border-radius:4px;background:#fff!important;color:#111!important}
#modal input:focus,#modal select:focus,#modal textarea:focus{border-color:#E8202A!important;box-shadow:3px 3px 0 #111}
#modal input::placeholder{color:#888}
#modal option,#modal optgroup{background:#fff;color:#111}
#modal .clues li{background:#fff;color:#111;border:2.5px solid #111;border-radius:22px 22px 22px 4px;box-shadow:2px 2px 0 #111}
#modal .clues li::before{background:#111;color:#fff;font-family:Bangers,"Dela Gothic One",sans-serif}
#modal .clues li.locked{background:repeating-linear-gradient(45deg,#eee 0 6px,#fff 6px 12px);border:2.5px dashed #111;color:#666;box-shadow:none}
#modal .clues li.locked::before{background:#fff;border:2px solid #111}
#modal .msg{color:#fff;background:#E8202A;border:2.5px solid #111;border-radius:4px}
#modal .cardq,#modal .ccard,#modal .pick,#modal .ec,#modal .rv,#modal .tpc,#modal .bc{background:#fff;color:#111;border:2.5px solid #111;border-radius:6px;box-shadow:3px 3px 0 #111}
#modal .cardq b,#modal .ccard b{color:#111;font-family:Bangers,"Dela Gothic One",sans-serif;font-weight:400;letter-spacing:.03em;font-size:1.3rem}
#modal .ec{border-left:7px solid #FFD400}
#modal .ec.trap{border-left:7px solid #E8202A;border-style:solid}
#modal .ec .kd{color:#E8202A}
#modal .ec .ds{color:#333}
#modal .pick:hover{border-color:#111;background:#FFF9D6}
#modal .pick:has(input:checked),#modal .tpc:has(input:checked){background:#FFD400;color:#111;border-color:#111}
#modal .tpc:has(input:checked) small{color:#333}
#modal .bids label{background:#fff;border:2px solid #111}
#modal table.mt td,#modal table.mt th{border:2px solid #111}
#modal table.mt th{color:#111;background:#FFD400}
#modal .fc{background:#fff;border:2px solid #111;color:#111}
#modal .champ{border:3px solid #111;border-radius:6px;background:repeating-conic-gradient(from 0deg at 50% 50%,#FFD400 0 4deg,#fff 4deg 12deg)}
#modal .champ div{color:#111;font-family:Bangers,"Dela Gothic One",sans-serif;text-shadow:3px 3px 0 #fff}
#modal .vs{border:3px solid #111;border-radius:6px}
#modal .vs .ent{background:#fff;border:2px solid #111}
#modal .ccard .pic,#modal .vs .ent .pic,#modal .pic.mini,#modal .rv img,#modal .rv .noimg{border-color:#111}
/* itens da loja, Taverna e dicas da prateleira: mangá */
.sh{background:#fff;color:#111;border:3px solid #111;border-radius:6px;box-shadow:4px 4px 0 #111}
.sh::before{display:none}
.sh:hover:not(:disabled){border-color:#111;transform:translate(-2px,-2px);box-shadow:6px 6px 0 #E8202A}
.sh .sh-c{background:#FFD400;color:#111;border:2px solid #111}
.sh .sh-k{color:#E8202A}
#modal .sh b{color:#111;font-family:Bangers,"Dela Gothic One",sans-serif;font-weight:400;font-size:1.3rem;letter-spacing:.03em}
.sh .sh-d{color:#333}
.sh.tv img,.sh.tv .noimg{background:#111;border-bottom:3px solid #111}
#modal .panel.shopx{border:4px solid #111;background:#111;box-shadow:10px 10px 0 #111}
.shx:hover,.shx:focus-visible{background:rgba(255,212,0,.2);box-shadow:0 0 0 3px #111,0 0 0 6px #FFD400}
.shx .tip{background:#fff;color:#111;border:3px solid #111;border-radius:6px;box-shadow:5px 5px 0 #111}
#modal .shx .tip b{color:#111;font-family:Bangers,"Dela Gothic One",sans-serif;font-size:1.25rem;letter-spacing:.03em}
.shx .tip .tc{background:#FFD400;color:#111;border:2px solid #111}
.shx .tip .tk{color:#E8202A}
.shx .tip em{color:#1E7A35}.shx .tip em.bad{color:#E8202A}.shx.soon .tip em{color:#B07A12}
.shx-door,.shx-en,.shx-ok{background:#fff;color:#111;border:3px solid #111;border-radius:6px;box-shadow:3px 3px 0 #111}
#modal .shx-door b{color:#111;font-family:Bangers,"Dela Gothic One",sans-serif;font-weight:400;letter-spacing:.04em;font-size:1.15rem}
.shx-en b{color:#E8202A;font-family:Bangers,"Dela Gothic One",sans-serif}
.shx-en small{color:#555}
.shx-tav{background:#FFD400;border:3px solid #111;border-radius:6px;box-shadow:4px 4px 0 #111}
#modal .shx-tav b{font-family:Bangers,"Dela Gothic One",sans-serif;font-size:1.3rem;letter-spacing:.04em}

/* ---- login: A Grande Onda de Hokusai, pétalas de sakura e retratos dos personagens ---- */
#auth{color:#1E2340}
#auth .arena-bg{background:#5B7FC4 url("kame-house.webp") center/cover no-repeat;filter:brightness(.92);inset:-20px}
#auth .arena-rays{background:radial-gradient(ellipse 120% 80% at 50% 50%,transparent 45%,rgba(20,26,51,.6) 100%);animation:none}
#auth .embers i{width:9px;height:7px;border-radius:70% 0 70% 0;background:#F7C5CF;box-shadow:0 0 3px rgba(247,197,207,.9)}
.arena-hero,#auth .authbox{background:#FBF5E8;border:2px solid #1E2340;border-radius:4px;outline:1px solid #1E2340;outline-offset:-7px;
  box-shadow:0 18px 40px rgba(20,26,51,.45);backdrop-filter:none;-webkit-backdrop-filter:none}
.arena-hero{animation:riseIn .9s cubic-bezier(.2,.9,.3,1.2) both}
.arena-hero::before{display:none}
#auth .kicker{color:#C8352B}
#auth .logo span{background:none;color:#1E2340;filter:none;font-family:"Shippori Mincho B1",serif;font-weight:800}
#auth .logo span:first-child{color:#C8352B}
#auth .tag{color:#4A4A5A}
#auth .atabs{border:2px solid #1E2340;border-radius:4px;background:#F1E6CF}
#auth .atabs button{color:#1E2340;border-radius:2px}
#auth .atabs button.on{background:#1E2340;color:#FBF5E8}
#auth .authbox label{color:#1E2340}
#auth .authbox input{border:2px solid #1E2340;border-radius:4px;background:#fff;color:#1E2340}
#auth .authbox input:focus{border-color:#C8352B;box-shadow:0 0 0 3px rgba(200,53,43,.2)}
#auth .btn.primary{background:#C8352B;color:#FBF5E8;border:2px solid #1E2340;border-radius:4px;box-shadow:3px 3px 0 #1E2340}
#auth .btn.primary:hover{transform:none;filter:brightness(1.08);box-shadow:3px 3px 0 #1E2340}
#auth .link{color:#2E4A7D}#auth .link:hover{color:#C8352B}
#auth .aerr{color:#C8352B}
.faces{display:flex;justify-content:center;margin-bottom:-4px}
.faces span{width:62px;height:82px;margin:0 -5px;overflow:hidden;background:#1E2340;border:3px solid #FBF5E8;outline:2px solid #1E2340;
  rotate:var(--r);box-shadow:0 6px 14px rgba(0,0,0,.35);animation:fadeUp .6s ease both}
.faces span:nth-child(2n){animation-delay:.08s}.faces span:nth-child(3n){animation-delay:.16s}
.faces img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;display:block}
@media (max-width:420px){.faces span{width:44px;height:60px}}

/* ---- lobby: barra índigo com ondas, cartões de washi; a arte de anime do lobby continua ao fundo ---- */
#lobby{--gold:#E9C46A;--gold2:#FBF5E8;--glass:#FBF5E8;--line:rgba(233,196,106,.45);background:#1E2340}
/* lateral esquerda: papel washi creme com ondas seigaiha, tinta índigo e detalhes em vermelho shu */
.lb-side{color:#1E2340;background-color:#F1E6CF;background-image:var(--seig);background-size:56px 28px;border-right:3px solid #C8352B;box-shadow:4px 0 0 rgba(30,35,64,.15);
  scrollbar-color:rgba(30,35,64,.35) transparent}
.lb-brand{font-family:"Shippori Mincho B1",serif;font-weight:800;color:#1E2340}
.lb-brand b{background:none;color:#C8352B}
#lobby .lbtop{background:#FBF5E8;border:2px solid #1E2340;border-radius:4px;outline:1px solid rgba(30,35,64,.35);outline-offset:-6px;box-shadow:3px 3px 0 rgba(30,35,64,.18)}
#lobby .lbtop h2{color:#1E2340;font-family:"Shippori Mincho B1",serif;font-weight:800}
.lb-ava{background:#C8352B;color:#FBF5E8;border-radius:4px;transform:rotate(-4deg);box-shadow:0 0 0 2px #FBF5E8,0 0 0 4px #C8352B}
.lb-who span{color:#6B6452}
#lobby .btn{border:2px solid #1E2340;border-radius:4px;background:#FBF5E8;color:#1E2340;box-shadow:2px 2px 0 rgba(30,35,64,.35)}
#lobby .btn:hover{background:#fff}
#lobby .btn.primary{background:#C8352B;color:#FBF5E8;border:2px solid #1E2340;box-shadow:3px 3px 0 #1E2340}
#lobby .btn.primary:hover{background:#C8352B;transform:translateY(-2px);filter:brightness(1.08);box-shadow:3px 5px 0 #1E2340}
.lb-block h3{color:#C8352B;font-family:"Shippori Mincho B1",serif;font-weight:800}
.lb-block h3 .link{color:#2E4A7D}
#lobby .stats div{border:2px solid #1E2340;border-radius:4px;background:#FBF5E8}
#lobby .stats b{color:#1E2340;font-family:"Shippori Mincho B1",serif;font-weight:800}
#lobby .stats div:nth-child(2) b{color:#C8352B}
#lobby .stats span,#lobby .muted,.rk .w,.rk-msg,.lb-admin-info{color:#6B6452}
#lobby .hrow{border-bottom:1px solid rgba(30,35,64,.18)}
#lobby .hrow .opp,#lobby .hrow b{color:#1E2340}
#lobby .hrow .muted{color:#6B6452}
#lobby .hrow .res{background:#E9DDC2;color:#1E2340;border-radius:3px}
#lobby .hrow.win .res{background:#C8352B;color:#FBF5E8}
.lb-rankbox,.lb-admin{border-radius:4px}
.lb-rankbox{background:#FBF5E8;border:2px solid #1E2340;outline:1px solid rgba(30,35,64,.35);outline-offset:-6px}
.lb-admin{background:rgba(200,53,43,.05);border:2px dashed rgba(30,35,64,.45)}
.rk .nm{color:#1E2340}
.rk .nm small{color:#C8352B}
.rk.top1 .nm{color:#1E2340}
.rk .w b{color:#1E2340}
.rk .w small{color:#8A8270}
.rk .pos{background:#E9DDC2;color:#1E2340}
.rk:hover{background:rgba(30,35,64,.05)}
.rk.me{background:rgba(200,53,43,.08);box-shadow:inset 0 0 0 1.5px rgba(200,53,43,.55)}
#lbHist{scrollbar-color:rgba(30,35,64,.35) transparent}
.lb-card{background:#FBF5E8;color:#1E2340;border:2px solid #1E2340;border-radius:4px;outline:1px solid #1E2340;outline-offset:-6px;box-shadow:6px 6px 0 rgba(20,26,51,.55)}
.lb-card:hover{box-shadow:8px 8px 0 #C8352B}
.lb-card h3{color:#1E2340;font-family:"Shippori Mincho B1",serif;font-weight:800;font-size:1.25rem}
.lb-card .hint{color:#6B6452}
.lb-pool{color:#2E4A7D}.lb-pool:hover{color:#C8352B}
#lobby #lbCode{border:2px solid #1E2340;border-radius:4px;background:#fff;color:#1E2340}
#lobby #lbCode:focus{border-color:#C8352B;box-shadow:0 0 0 3px rgba(200,53,43,.2)}
#lobby .wrbox{background:#FBF5E8;color:#1E2340;border:2px solid #1E2340;border-radius:4px;box-shadow:6px 6px 0 rgba(20,26,51,.55)}
.wrlabel{color:#C8352B}
#lobby .wrcode{background:none;color:#1E2340;filter:none;font-family:"Shippori Mincho B1",serif;font-weight:800}
#lobby .wrstat{color:#1E2340}
#lobby .wrstat::before{background:#C8352B}
#lobby .wrbox .btn:not(.primary){color:#1E2340;border-color:#1E2340;background:#fff}

/* ---- menu da partida local: Fuji Vermelho ao fundo, cartões de washi ---- */
#menu{--gold:#E9C46A;--glass:#FBF5E8;--line:rgba(30,35,64,.45);color:#1E2340}
.mn-bg{background:#5B7FC4 url("kame-house.webp") center/cover no-repeat;filter:brightness(.92) saturate(1);inset:-10px}
.mn-head .lb-brand,.mn-head p,#menu #menuBack,.mn-hint{color:#FBF5E8;text-shadow:0 2px 6px rgba(0,0,0,.7)}
.mn-card{background:#FBF5E8;border:2px solid #1E2340;border-radius:4px;outline:1px solid #1E2340;outline-offset:-6px;box-shadow:6px 6px 0 rgba(20,26,51,.5)}
.mn-card legend{color:#C8352B;font-family:"Shippori Mincho B1",serif;font-weight:800}
#menu .mode{border:2px solid rgba(30,35,64,.3);border-radius:4px;background:#fff}
#menu .mode:hover{border-color:#1E2340}
#menu .mode b{color:#1E2340}#menu .mode span{color:#6B6452}
#menu .mode:has(input:checked){background:#1E2340;border-color:#1E2340;box-shadow:3px 3px 0 #C8352B}
#menu .mode:has(input:checked) b{color:#E9C46A}#menu .mode:has(input:checked) span{color:#E9DDC2}
#menu .names input{border:2px solid #1E2340;border-radius:4px;background:#fff;color:#1E2340}
#menu .names input:focus{border-color:#C8352B;box-shadow:0 0 0 3px rgba(200,53,43,.2)}
#menu .dot{border-color:#1E2340}
#menu .hint{color:#6B6452}
#menu .btn{border:2px solid #1E2340;border-radius:4px;background:#FBF5E8;color:#1E2340}
#menu .btn:hover{background:#fff}
#menu .btn.primary{background:#C8352B;color:#FBF5E8;box-shadow:4px 4px 0 #1E2340}
#menu .btn.primary:hover{box-shadow:4px 6px 0 #1E2340}
/* grade de animes (menu e janela) */
.ag-bar .poolinfo{color:#1E2340}
.ag-b{border:2px solid #1E2340;border-radius:4px;background:#fff;color:#1E2340}
.ag-b:hover{background:#FFF3A6;color:#111}
.anc{color:#1E2340;border:2px solid rgba(30,35,64,.25);border-radius:6px;background:#fff}
.anc-pics{background:#1E2340;border-radius:4px}
.anc-txt small{color:#6B6452}
.anc:has(input:checked){border-color:#C8352B;background:#fff;box-shadow:3px 3px 0 #C8352B}
.anc-ok{background:#C8352B;color:#fff}
/* botão "Personagens" de cada anime: abre a lista para marcar/desmarcar um a um */
.anc-chars{font:inherit;font-size:.74rem;font-weight:700;padding:.35em .6em;border:2px solid #1E2340;border-radius:4px;background:#fff;color:#1E2340;cursor:pointer;width:100%}
.anc-chars:hover,.anc-chars:focus-visible{background:#FFF3A6;color:#111}
.anc:not(:has(input:checked)) .anc-chars{opacity:.6}
.cp-n{font-size:.9rem}

/* ---- lobby ampliado em telas grandes (equivale ao zoom do navegador: 140% em monitores bem largos) ---- */
#lobby{--lz:1;zoom:var(--lz);min-height:calc(100dvh / var(--lz))}
#lobby .lb-side{height:calc(100dvh / var(--lz))}
#lobby .lb-main{min-height:calc(100dvh / var(--lz))}
@media (min-width:1600px){#lobby{--lz:1.04}}
@media (min-width:1900px){#lobby{--lz:1.13}}
@media (min-width:2200px){#lobby{--lz:1.26}}
@media (max-width:860px){#lobby .lb-side{height:auto}#lobby .lb-main{min-height:0}}
/* cartões do lobby (Nova partida, Entrar numa sala, código da sala) 15% menores */
#lobby .lb-actions{zoom:.85}

/* ---- lutadores no painel do jogador: foto em pé (retrato) ao lado da faixa do rank, mostrando o rosto ---- */
#game .deckrow .fc:has(> .pic){padding-left:calc(29px + 66px + 7px);padding-right:5px;min-height:100px;justify-content:center}
#game .deckrow .fc:has(> .pic) .pw{white-space:nowrap;font-size:.7rem;padding:1px 6px}
#game .deckrow .fc:has(> .pic) .st{font-size:.68rem}
#game .deckrow .fc > .pic{position:absolute;left:29px;top:0;bottom:0;width:66px;height:100%;margin:0;
  object-fit:cover;object-position:50% 12%;border-bottom:0;border-right:2px solid #1E2340}
#game .deckrow .fc:has(> .pic) .bn{right:4px;top:4px}

/* ---- partida usando a largura toda da tela ---- */
.layout{max-width:none}
@media (min-width:1180px){.layout{grid-template-columns:250px minmax(0,1fr) 390px;max-width:none}}
/* em telas largas os cards de vez e os painéis dos jogadores crescem junto (sem exagero) */
@media (min-width:1600px){
  #game{--gz:1.1}
  .layout{grid-template-columns:calc(250px * var(--gz)) minmax(0,1fr) calc(390px * var(--gz))}
  #game .turnside,#game .layout>aside{zoom:var(--gz)}
  #game .turnside{top:calc((var(--hh,64px) + 10px) / var(--gz));max-height:calc((100vh - var(--hh,64px) - 104px) / var(--gz))}
  #game .layout>aside{top:calc((var(--hh,64px) + 10px) / var(--gz));max-height:calc((100vh - var(--hh,64px) - 104px) / var(--gz))}
}
@media (min-width:1900px){#game{--gz:1.2}}
@media (min-width:2200px){#game{--gz:1.3}}
#game .fc.fxc.hasi b{font-size:.86rem;line-height:1.05;overflow-wrap:normal;word-break:normal;hyphens:none}
#game .fc.fxc.hasi{padding-left:52px}
#game .fc.fxc .fxi{width:44px}
#game .deckrow:not(.solo){grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}

/* ---- janela de Dica ("Quem é?"): mangá, versão escura ---- */
#modal .panel.clue{--muted:#bdbdbd;color:#fff;background:#141414;background-image:repeating-conic-gradient(from 0deg at 100% 0%,rgba(255,255,255,.06) 0 2deg,transparent 2deg 6deg);
  border:4px solid #fff;outline:4px solid #111;box-shadow:12px 12px 0 #FFD400}
#modal .panel.clue h2{color:#fff;text-shadow:3px 3px 0 #E8202A}
#modal .panel.clue p,#modal .panel.clue .muted{color:#d4d4d4}
#modal .panel.clue p.sckind{color:#7A1F12;background:#F2D7A0;border-color:#F2D7A0;font-weight:700;box-shadow:3px 3px 0 #E8202A}
#modal .panel.clue p.sckind b{color:#7A1F12}
#modal .panel.clue .whos{background:#141414;border-color:#fff;color:#fff}
#modal .panel.clue .mic{box-shadow:3px 3px 0 #fff}
#modal .panel.clue .clues li{background:#1E1E1E;color:#fff;border-color:#fff;box-shadow:3px 3px 0 #FFD400}
#modal .panel.clue .clues li::before{background:#FFD400;color:#111}
#modal .panel.clue .clues li.locked{background:repeating-linear-gradient(45deg,#1a1a1a 0 6px,#242424 6px 12px);border-color:#777;color:#9a9a9a;box-shadow:none}
#modal .panel.clue .clues li.locked::before{background:#141414;border:2px solid #777}
#modal .panel.clue input[type=text]{background:#000!important;color:#fff!important;border-color:#fff}
#modal .panel.clue input[type=text]:focus{border-color:#FFD400!important;box-shadow:3px 3px 0 #E8202A}
#modal .panel.clue input::placeholder{color:#8a8a8a}
#modal .panel.clue .btn{background:#1E1E1E;color:#fff;border-color:#fff;box-shadow:3px 3px 0 #FFD400}
#modal .panel.clue .btn:hover:not(:disabled){background:#2c2c2c;border-color:#fff}
#modal .panel.clue .btn.primary{background:#E8202A;color:#fff;border-color:#fff}
#modal .panel.clue .btn.primary:hover:not(:disabled){background:#FF3B44}
#modal .panel.clue .msg{border-color:#fff}
#modal .panel.clue :focus-visible{outline-color:#FFD400}

/* ---- cartas especiais com o símbolo do item (recortado da imagem da Loja) ---- */
.fc.fxc.hasi{padding-left:58px;min-height:56px}
.fc.fxc .fxi{position:absolute;left:0;top:0;bottom:0;width:50px;height:100%;object-fit:cover;border-right:2.5px solid #111;background:#2a1d12}
.ec.hasi{grid-template-columns:64px minmax(0,1fr);column-gap:12px;align-items:center}
.ec.hasi .eci{grid-row:1/span 3;width:64px;height:56px;object-fit:cover;border:2.5px solid #111;border-radius:4px;background:#2a1d12}
.ec.hasi>:not(.eci){grid-column:2}

/* ---- botão de rolar o dado: no centro, logo abaixo do tabuleiro (gruda no rodapé se o mapa for alto) ---- */
#game{padding-bottom:24px}
.rollbar{position:sticky;bottom:12px;z-index:6;display:flex;justify-content:center;margin-top:14px;pointer-events:none}
.rollbar[hidden],.lb-rankbox[hidden]{display:none}
.rollbar #roll{pointer-events:auto;min-width:220px;font-size:1.15rem;padding:.7em 1.6em;box-shadow:4px 4px 0 #111}
.rollbar #roll:disabled{opacity:.55}

/* ---- cartas especiais clicáveis e ações junto do deck ---- */
#game .fc.fxc.use{cursor:pointer;outline:3px solid #FFD400;outline-offset:1px;transition:transform .12s}
#game .fc.fxc.use:hover,#game .fc.fxc.use:focus-visible{transform:translate(-1px,-2px)}
#game .fc.fxc.use::after{content:'Usar';position:absolute;right:4px;bottom:4px;font:700 .62rem/1 system-ui,sans-serif;background:#FFD400;color:#111;border:1.5px solid #111;border-radius:3px;padding:2px 4px}
.acts .askgrp{flex-basis:100%;width:100%;margin:14px 0 0;padding-bottom:4px;border-bottom:2px solid currentColor;font-size:1rem}
.acts .askgrp:first-child{margin-top:4px}
.acts .askgrp ~ .btn.primary:last-child{margin-top:12px}
.fxcol .dkl{display:block;margin-bottom:2px}.fxcol .dkl small{font-weight:500;letter-spacing:0;text-transform:none}.fxcol .dksub{margin-top:10px}
.dkhint{display:block;font-size:.68rem;color:var(--muted);margin:-2px 0 4px}
.acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.acts .btn{font-size:.8rem;padding:.4em .7em}
.acts .btn.sab{background:#E8202A;color:#fff;border-color:#111;box-shadow:3px 3px 0 #111}
.acts .btn.sab:hover:not(:disabled){background:#FF3B44}
.rk-off{font-size:.7rem;font-weight:400;color:#C8352B}
/* Muitos jogadores (3x3 e 4x4): cards menores e alinhados; o da vez continua grande e em destaque. */
.turnside.many{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:6px;align-items:start;overflow:hidden;padding:4px 10px 10px 4px}
@media (max-width:1179px){.strip.many{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;padding-bottom:4px}.strip.many>*{flex:none}}
.turnside.many .tcard{gap:2px;padding:6px 10px;border-radius:8px}
.turnside.many .tcard:not(.on){transform:none;box-shadow:3px 3px 0 rgba(17,17,17,.55)}
.turnside.many .tcard.on{grid-column:1/-1;gap:6px;padding:10px 12px}
.turnside.many .tcard:not(.on) .tc-dice{display:none}
.turnside.many .tc-head{gap:8px}
.turnside.many .tcard:not(.on) .tc-ava{width:28px;height:28px;font-size:.8rem;border-width:2px}
.turnside.many .tcard.on .tc-ava{width:40px;height:40px;font-size:1rem}
.turnside.many .tc-nm small{font-size:.58rem;letter-spacing:.1em}
.turnside.many .tcard:not(.on) .tc-nm b{font-size:1rem}
.turnside.many .tcard.on .tc-nm b{font-size:1.35rem}
.turnside.many .tcard:not(.on) .tc-info{font-size:.68rem;gap:0 8px}
.turnside.many .tcard.on .tc-dice{padding:6px}
.turnside.many .tcard.on .tdie{width:44px;height:44px;font-size:1.35rem}
/* Sem barras de rolagem visíveis em nenhuma parte do jogo (pedido do dono do jogo).
   As áreas que não couberem continuam rolando com a roda do mouse ou com o dedo. */
*{scrollbar-width:none;-ms-overflow-style:none}
*::-webkit-scrollbar{width:0;height:0;display:none}
/* aviso grande "Sua vez!" */
#toast{position:fixed;left:50%;top:22%;z-index:80;transform:translate(-50%,-50%) scale(.6);opacity:0;pointer-events:none;display:grid;justify-items:center;gap:4px;
  padding:16px 34px;background:#FFD400;color:#111;border:4px solid #111;border-radius:6px;box-shadow:7px 7px 0 #E8202A;text-align:center;transition:opacity .25s,transform .35s cubic-bezier(.2,1.6,.4,1)}
#toast b{font:400 2.4rem Bangers,"Dela Gothic One",sans-serif;letter-spacing:.05em;line-height:1}
#toast span{font-size:.95rem;font-weight:700}
#toast.show{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-2deg)}
html.noanim #toast.show{transform:translate(-50%,-50%)}
@media (max-width:520px){#toast b{font-size:1.8rem}}
/* anfitrião caiu: cobre a tela dos convidados até ele voltar */
#hostlost{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:16px;background:rgba(10,14,30,.72);backdrop-filter:blur(3px)}
#hostlost[hidden]{display:none}
#hostlost>div{max-width:420px;display:grid;justify-items:center;gap:10px;text-align:center;padding:22px 26px;background:#FBF5E8;color:#1E2340;border:3px solid #111;border-radius:6px;box-shadow:7px 7px 0 #E8202A}
#hostlost b{font-size:1.15rem}
#hostlost p{margin:0;font-size:.9rem}
.hl-spin{width:34px;height:34px;border-radius:50%;border:4px solid #E9C46A;border-top-color:#E8202A;animation:hlspin 1s linear infinite}
@keyframes hlspin{to{transform:rotate(360deg)}}
/* "Prontos: 5/8" */
.rdy{margin:8px 0 0;text-align:center;font-size:.9rem}
.rdy small{opacity:.75}
/* chat do time */
#chatBtn{position:fixed;right:16px;bottom:16px;z-index:40;padding:10px 14px;font-weight:700;background:#FFD400;color:#111;border:3px solid #111;border-radius:6px;box-shadow:4px 4px 0 #111;cursor:pointer}
#chatBtn[hidden],#chatBox[hidden]{display:none}
#chatN{display:inline-grid;place-items:center;min-width:20px;height:20px;margin-left:4px;padding:0 5px;border-radius:10px;background:#E8202A;color:#fff;font-size:.75rem;animation:nwPulse 1.2s ease-in-out infinite}
#chatN[hidden]{display:none}
#chatBox{position:fixed;right:16px;bottom:16px;z-index:40;width:min(340px,calc(100vw - 32px));height:min(420px,60vh);display:grid;grid-template-rows:auto 1fr auto;
  background:#FBF5E8;color:#1E2340;border:3px solid #111;border-radius:6px;box-shadow:6px 6px 0 #111}
#chatBox header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;background:#1E2340;color:#FBF5E8}
#chatBox header button{border:0;background:none;color:inherit;font-size:1rem;cursor:pointer}
#chatList{list-style:none;margin:0;padding:8px 10px;overflow-y:auto;display:grid;align-content:start;gap:6px;font-size:.88rem}
#chatList li{padding:5px 8px;border-radius:6px;background:#fff;border:1px solid rgba(30,35,64,.15);overflow-wrap:anywhere}
#chatList li.me{background:#FFF4C2}
#chatForm{display:flex;gap:6px;padding:8px;border-top:2px solid #1E2340}
#chatForm input{flex:1;min-width:0;padding:6px 8px;border:2px solid #1E2340;border-radius:4px;font:inherit}
@media (max-width:900px){#chatBtn{bottom:84px;padding:8px 10px}#chatBox{bottom:84px}}
#turn .rnd{margin-left:10px;font-size:.75rem;font-weight:700;opacity:.7;white-space:nowrap}
/* painel da direita com muitos jogadores: linhas compactas agrupadas por time */
.pgroups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 8px}
.pgroup h4{margin:0 0 4px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#C8352B}
.pgroup ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.prow{--c:#888;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:0 6px;padding:4px 6px;background:#FBF5E8;color:#1E2340;border:2px solid #1E2340;border-left:6px solid var(--c);border-radius:4px;box-shadow:2px 2px 0 rgba(30,35,64,.25);opacity:.8}
.prow.on{opacity:1;background:#fff;box-shadow:3px 3px 0 var(--c);border-color:#111}
.prow.me .pr-nm::after{content:" (você)";font:400 .7rem system-ui,sans-serif;opacity:.65}
.pr-ava{grid-row:span 2;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--c);color:#fff;font:700 .62rem system-ui,sans-serif;border:2px solid #111}
.pr-nm{min-width:0;font-family:Bangers,"Dela Gothic One",sans-serif;font-weight:400;font-size:.95rem;line-height:1.1;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pr-st{font-size:.62rem;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* computador (coluna da esquerda): quem espera vira uma linha só (avatar, nome e números), sem barra de rolagem */
@media (min-width:1180px){
  .turnside.many{display:flex;flex-direction:column;gap:5px;overflow:hidden;padding:4px 10px 8px 4px}
  .turnside.many .tcard:not(.on){flex:0 1 auto;min-height:0;display:flex;align-items:center;gap:8px;padding:5px 8px}
  .turnside.many .tcard:not(.on) .tc-head{flex:1;min-width:0;gap:6px}
  .turnside.many .tcard:not(.on) .tc-ava{width:24px;height:24px;font-size:.7rem}
  .turnside.many .tcard:not(.on) .tc-nm small{display:none}
  .turnside.many .tcard:not(.on) .tc-nm b{font-size:.95rem}
  .turnside.many .tcard:not(.on) .tc-info{flex:none;flex-wrap:nowrap;font-size:.64rem;gap:0 6px}
  .turnside.many .tcard.on{flex:none;padding:8px 10px}
  .turnside.many .tcard.on .tc-dice{padding:4px}
  .turnside.many .tcard.on .tdie{width:38px;height:38px;font-size:1.15rem}
}
/* Botas do Vento prontas para usar: aura dourada piscando em volta da carta */
#game .fc.fxc.use.aura{outline-color:#FFD400;animation:auraGold 1.1s ease-in-out infinite}
@keyframes auraGold{0%,100%{box-shadow:3px 3px 0 #111,0 0 4px 2px rgba(255,212,0,.35)}50%{box-shadow:3px 3px 0 #111,0 0 18px 8px rgba(255,200,0,.95)}}
@media (prefers-reduced-motion:reduce){#game .fc.fxc.use.aura{animation:none;box-shadow:3px 3px 0 #111,0 0 12px 5px rgba(255,200,0,.8)}}
/* botão de fechar/voltar das janelas principais (deck, time, animes, editor) */
#modal .panel .mx{position:sticky;top:0;float:right;z-index:5;margin:-6px -6px 0 8px;width:34px;height:34px;padding:0;display:grid;place-items:center;
  font:700 1rem/1 system-ui,sans-serif;border:3px solid #111;border-radius:4px;background:#fff;color:#111;box-shadow:3px 3px 0 #111;cursor:pointer}
#modal .panel .mx:hover{background:#FFF3A6}
#modal .panel .mx:active{transform:translate(3px,3px);box-shadow:none}

/* ---- estilo do duelo (menu e lobby): Cartas x Clássico ---- */
.dstyle{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:4px 0 10px}
.dstyle label{position:relative;display:grid;text-align:center;padding:7px 6px;border:2px solid rgba(127,127,127,.35);border-radius:8px;cursor:pointer;line-height:1.2}
.dstyle input{position:absolute;opacity:0;pointer-events:none}
.dstyle b{font-size:.95rem}.dstyle small{font-size:.68rem;opacity:.75}
.dstyle label:has(input:checked){border-color:#C8352B;background:rgba(200,53,43,.1);box-shadow:2px 2px 0 #C8352B}
.dstyle label:has(input:focus-visible){outline:2px solid #C8352B;outline-offset:2px}
.hint.dsh{margin:6px 0 0}

/* card "Edicoes do site" (so admin) ao lado de Nova partida / Entrar numa sala */
.lb-card[hidden]{display:none}
#lobby .lbgrid:has(.lb-edits:not([hidden])){grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}