/* Mesa de jogo escura (um só visual, de propósito): a IA em cima, você embaixo, painel de decisões à direita */
:root{color-scheme:dark;--display:"IM Fell English SC",Georgia,serif;--body:"Alegreya Sans","Segoe UI",system-ui,sans-serif;--bg:#0f0b0d;--panel:#1a1316;--panel2:#221a1e;--line:#3a2a30;--text:#ecdfe2;--dim:#a8939a;--accent:#c9364a;--accent2:#e2b04a;--ok:#5fb88a;--blue:#6aa3d8}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.45 var(--body);padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.setup-box h1,.side header b,#prompt h3,.phase{font-family:var(--display);font-weight:400}
h1,h2,h3,h4{margin:0}
.btn{background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:7px;padding:8px 12px;font:inherit;cursor:pointer;text-align:left}
.btn:focus-visible,.opt:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}
.btn:hover{border-color:var(--accent);background:#2c2026}
.btn.pass{color:var(--dim);border-style:dashed}
.btn.big{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700;font-size:17px;padding:12px 22px;margin-top:18px}
/* setup */
#setup{display:flex;align-items:flex-start;justify-content:center;padding-block:32px}
.setup-box{max-width:720px;width:100%}
.setup-box h1{font-size:30px;letter-spacing:.02em;color:var(--accent2)}
.setup-box h2{font-size:15px;text-transform:uppercase;letter-spacing:.08em;color:var(--dim);margin:22px 0 8px}
.sub{color:var(--dim);margin:6px 0 0}
.pick{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pick.small{grid-template-columns:repeat(3,auto);justify-content:start}
.opt{background:var(--panel);border:1px solid var(--line);color:var(--text);border-radius:9px;padding:12px;text-align:left;cursor:pointer;font:inherit}
.opt b{display:block;font-size:17px}
.opt span{color:var(--dim);font-size:13px}
.opt.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.note{color:var(--dim);font-size:13px}
.chk{display:block;margin:6px 0;color:var(--text)}
.chk select{background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:5px;padding:3px 6px;margin-left:6px}
.rules{margin-top:20px;color:var(--dim);font-size:14px}
.rules summary{cursor:pointer;color:var(--text)}
/* jogo */
#game{display:grid;grid-template-columns:minmax(0,1fr) 250px 380px;grid-template-areas:'board play side';align-items:start;gap:12px;padding-block:10px}
#board{grid-area:board}#playcol{grid-area:play}#side{grid-area:side}
#board{display:flex;flex-direction:column;gap:8px;min-width:0}
.side{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px}
.side.active{border-color:var(--accent)}
.side header{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:6px}
.side header .deck{color:var(--dim);font-size:13px}
.stat{background:var(--panel2);border:1px solid var(--line);border-radius:5px;padding:2px 7px;font-size:13px;color:var(--dim)}
.stat.pool{color:var(--text)} .stat.pool b{color:var(--accent2);font-size:16px}
.stat.edge{background:var(--accent2);color:#1a1316;font-weight:700}
.stat.tr{color:var(--blue)}
.zone h4{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--dim);margin:6px 0 4px}
.vrow,.hrow{display:flex;flex-wrap:wrap;gap:8px}
.empty{color:var(--dim);font-size:13px}
.vc{position:relative;width:118px;max-width:100%;min-height:150px;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:6px;cursor:pointer;overflow:hidden;transition:transform .15s}
.vc.small{width:92px;min-height:118px}
.vc.locked{transform:rotate(90deg);opacity:.85;margin:0 17px}
.vc.small.locked{margin:0 14px}
.vc.torpor{filter:grayscale(.7)}
.vc.back{background:repeating-linear-gradient(45deg,#2a1d22,#2a1d22 6px,#241820 6px,#241820 12px);cursor:default}
.vc-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.vc>*:not(img){position:relative}
.vc-name{font-weight:700;font-size:12.5px;line-height:1.2;text-shadow:0 1px 2px #000}
.vc-info,.vc-disc{font-size:11px;color:var(--dim);text-shadow:0 1px 2px #000}
.vc-disc .sup{color:var(--accent2);font-weight:700}
.vc-blood{position:absolute !important;right:6px;bottom:6px;background:var(--accent);color:#fff;border-radius:12px;padding:1px 8px;font-weight:700;font-size:13px}
.vc-tag{display:inline-block;font-size:10px;background:#000a;border-radius:4px;padding:0 4px;margin-top:3px;color:var(--dim)}
.vc-tag.tor{color:#f6a}
.vc-att{display:flex;flex-direction:column;gap:2px;margin-top:4px}
.vc-att span{font-size:10.5px;background:#000b;border:1px solid var(--accent2);color:var(--accent2);border-radius:4px;padding:0 4px}
.mid{display:flex;gap:10px;align-items:center;justify-content:center;padding:2px}
.phase{font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:13px;color:var(--accent2)}
.combat{background:var(--accent);color:#fff;border-radius:5px;padding:2px 8px;font-size:13px}
.hand{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px}
.hand h4{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--dim);margin-bottom:6px}
.hc{position:relative;width:112px;min-height:76px;background:var(--panel2);border:1px solid var(--line);border-radius:7px;padding:6px;cursor:pointer;overflow:hidden}
.hc-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.4}
.hc>*:not(img){position:relative}
.hc-name{font-weight:700;font-size:12px;text-shadow:0 1px 2px #000}
.hc-type{font-size:10.5px;color:var(--dim);text-shadow:0 1px 2px #000}
.chip{display:inline-block;background:var(--panel2);border:1px solid var(--line);border-radius:5px;padding:2px 7px;font-size:12.5px;cursor:pointer}
.chip.locked{opacity:.6}
.cnt{background:var(--accent2);color:#111;border-radius:8px;padding:0 6px;font-size:11px;margin-left:3px}
#side{display:flex;flex-direction:column;gap:6px;position:sticky;top:10px;max-height:calc(100vh - 20px);overflow:auto}
#side h4{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--dim);margin-top:4px}
#prompt{background:var(--panel);border:1px solid var(--accent);border-radius:10px;padding:10px;max-height:46vh;overflow:auto;flex:none}
#prompt.flash{box-shadow:0 0 0 3px #c9364a66}
#prompt h3{font-size:16px;color:var(--accent2);margin-bottom:4px}
#prompt p{margin:0 0 8px;color:var(--text);font-size:14px}
#prompt .wait{color:var(--dim)}
.opts{display:flex;flex-direction:column;gap:5px}
.opts .grp{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--dim);margin-top:6px}
#revealed{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px;max-height:84px;overflow:auto}
#log{list-style:none;margin:0;padding:8px 10px;background:var(--panel);border:1px solid var(--line);border-radius:8px;flex:1 1 auto;overflow:auto;font-size:14px;line-height:1.5;min-height:42vh}
#log li{padding:2px 0}
.loghead{display:flex;align-items:center;justify-content:space-between;margin-top:4px}
.mini{background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:5px;padding:2px 9px;font:inherit;font-size:12.5px;cursor:pointer}
.mini:hover{border-color:var(--accent)}
body.log-big #log{position:fixed;inset:5vh max(16px,env(safe-area-inset-right,0px)) 5vh max(16px,env(safe-area-inset-left,0px));z-index:40;min-height:0;font-size:15.5px;box-shadow:0 10px 40px #000c;border-color:var(--accent)}
body.log-big #logBig{position:fixed;z-index:41;right:calc(max(16px,env(safe-area-inset-right,0px)) + 12px);top:calc(5vh + 10px)}
#log li{color:var(--dim)}
#log li.l-turn{color:var(--accent2);font-weight:700;margin-top:6px}
#log li.l-card{color:var(--text)} #log li.l-combat{color:#f0a0aa} #log li.l-pool{color:#e8c37a} #log li.l-bleed{color:#ff8b8b}
#log li.l-block{color:var(--blue)} #log li.l-torpor,#log li.l-burn{color:#f6a} #log li.l-win{color:var(--ok);font-weight:700} #log li.l-err{color:#f55}
.modal{position:fixed;inset:0;background:#000a;display:none;align-items:center;justify-content:center;z-index:50;padding:16px}
.modal .box{background:var(--panel);border:1px solid var(--accent);border-radius:12px;padding:16px;max-width:680px;width:100%;max-height:90vh;overflow:auto;position:relative}
#ident .box h3{color:var(--accent2)}
#viewer .box{max-width:860px}
#viewer .vw-t h3{font:400 24px var(--display);color:var(--accent2)}
#viewer .vw-t .txt{font-size:16.5px;line-height:1.5}
#ident input{width:100%;margin:8px 0;padding:8px;background:var(--panel2);border:1px solid var(--line);color:var(--text);border-radius:6px;font:inherit}
.ilist{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:6px;margin-bottom:10px}
.ilist small{color:var(--dim)}
.x{position:absolute;right:10px;top:8px;background:none;border:0;color:var(--text);font-size:24px;cursor:pointer}
.vw{display:flex;gap:16px;flex-wrap:wrap}
.vw-img{width:360px;max-width:100%;max-height:78vh;object-fit:contain;border-radius:12px}
.vw-t{flex:1;min-width:220px}
.vw-t .meta{color:var(--dim);font-size:13px;margin:4px 0}
.vw-t .meta .sup{color:var(--accent2);font-weight:700}
.vw-t .txt{white-space:normal}
#ver{position:fixed;left:calc(8px + env(safe-area-inset-left,0px));bottom:calc(6px + env(safe-area-inset-bottom,0px));font-size:11px;color:var(--dim);opacity:.7}
@media (max-width:1300px){#game{grid-template-columns:minmax(0,1fr) 380px;grid-template-areas:'board play' 'board side'}#playcol{position:static}#side{top:10px}}
@media (max-width:900px){#game{grid-template-columns:1fr;grid-template-areas:'play' 'side' 'board'}#side{position:static;max-height:none}.pick{grid-template-columns:1fr}}

.btn.off{opacity:.55;cursor:help;border-style:dotted;font-size:13.5px}

.credit{margin-top:16px;color:var(--dim);font-size:14px}
.credit b{color:var(--text)}
.credit a{color:var(--accent2);user-select:all}



/* coluna da carta jogada: entre a mesa e o painel de decisões */
#playcol{position:sticky;top:10px;display:flex;flex-direction:column;gap:6px;min-width:0;max-height:calc(100vh - 20px);overflow:auto}
#playcol h4{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--dim)}
.spot{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:9px;text-align:center;transition:border-color .2s,box-shadow .2s}
.spot.idle{opacity:.82}
.spot.wait{border:2px solid var(--accent);box-shadow:0 0 0 4px #c9364a33,0 10px 30px #000a}
.spot.wait.me{border-color:var(--accent2)}
.spot.pop{animation:spPop .28s ease-out}
@keyframes spPop{from{transform:scale(.94);opacity:.4}to{transform:none;opacity:1}}
.sp-empty{color:var(--dim);font-size:14px;margin:30px 6px}
.sp-who{font-size:13px;color:var(--dim);margin-bottom:6px;line-height:1.3}
.spot.ai .sp-who{color:#ff9aa8}.spot.me .sp-who{color:var(--accent2)}
.sp-who b{background:var(--accent2);color:#1a1316;border-radius:4px;padding:0 5px;font-size:11px;text-transform:uppercase;letter-spacing:.04em}
.sp-card{position:relative;border-radius:9px;overflow:hidden;background:var(--panel2);cursor:zoom-in}
.sp-img{display:block;width:100%;height:auto;max-height:52vh;object-fit:contain;margin:0 auto;border-radius:9px}
.sp-txt{display:flex;flex-direction:column;gap:4px;padding:10px;text-align:left;min-height:150px}
.sp-txt b{font:400 19px var(--display);color:var(--accent2)}
.sp-txt i{color:var(--dim);font-size:12.5px;font-style:normal}
.sp-txt p{margin:4px 0 0;font-size:13.5px}
.sp-card.has-img .sp-txt{display:none}
.sp-name{font:400 18px var(--display);color:var(--text);margin-top:6px}
.sp-card:not(.has-img) + .sp-name{display:none}
.sp-go{width:100%;margin-top:9px !important;text-align:center}
#recent{list-style:none;margin:0;padding:0 0 6px;display:flex;flex-wrap:wrap;gap:6px}
.rc{position:relative;flex:none;width:56px;height:78px;border-radius:6px;overflow:hidden;background:var(--panel2);border:1px solid var(--accent);cursor:pointer;display:flex;flex-direction:column;justify-content:flex-end;padding:3px}
.rc.me{border-color:var(--accent2)}
.rc-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rc-n,.rc-w{position:relative;font-size:9.5px;line-height:1.1;text-shadow:0 1px 2px #000,0 0 3px #000}
.rc-w{color:#ff9aa8;font-weight:700}.rc.me .rc-w{color:var(--accent2)}
.rc.has-img .rc-n{display:none}
@media (max-width:1300px){#playcol .spot{display:grid;grid-template-columns:150px 1fr;gap:10px;align-items:start;text-align:left}#playcol .sp-who{grid-column:1/-1;margin:0}#playcol .sp-go{grid-column:1/-1}#playcol .sp-card:not(.has-img){grid-column:1/-1}.sp-name{display:none}.sp-card.has-img + .sp-name{display:block;margin:0}}
@media (prefers-reduced-motion:reduce){.spot.pop{animation:none}}
.startrow{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.startrow .fsBtn{margin-top:18px;padding:12px 16px}
#playcol .loghead{margin-top:0}
.licline{margin:6px 0 0;color:var(--accent2);font-size:13.5px}

/* pool em destaque */
.poolbox{display:inline-flex;align-items:center;gap:7px;background:linear-gradient(180deg,#3a1018,#24090f);border:1px solid #7a2232;border-radius:10px;padding:3px 12px 3px 8px;box-shadow:inset 0 1px 0 #ffffff12;transition:box-shadow .3s,border-color .3s}
.poolbox .plab{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#e8b3bb}
.poolbox b{font:700 26px/1.1 var(--body);color:#fff;min-width:1.6ch;text-align:right;font-variant-numeric:tabular-nums}
.pdrop{width:14px;height:14px;background:var(--accent);border-radius:50% 0 50% 50%;transform:rotate(-45deg);box-shadow:0 0 6px #c9364a99}
.side.me .poolbox{border-color:#b98a2f}
.poolbox.up{border-color:var(--ok);box-shadow:0 0 0 3px #5fb88a55,0 0 18px #5fb88a66}
.poolbox.down{border-color:#ff5a6e;box-shadow:0 0 0 3px #ff5a6e55,0 0 18px #ff5a6e66}
.vc.up{border-color:var(--ok);box-shadow:0 0 0 2px #5fb88a88,0 0 14px #5fb88a66}
.vc.down{border-color:#ff5a6e;box-shadow:0 0 0 2px #ff5a6e88,0 0 14px #ff5a6e66}
.vc.up .vc-blood{background:var(--ok);color:#0f1a12}
.vc.down .vc-blood{background:#ff5a6e}
/* números flutuando e gota viajando */
#fx{position:fixed;inset:0;pointer-events:none;z-index:45}
.fxb{position:fixed;transform:translate(-50%,0);background:#0f0b0dee;border:1px solid;border-radius:9px;padding:3px 10px;font-size:13px;text-align:center;white-space:nowrap;box-shadow:0 6px 18px #000a;opacity:0;animation:fxUp 2.4s ease-out forwards}
.fxb b{font-size:20px;font-variant-numeric:tabular-nums}
.fxb small{display:block;font-size:12px;color:var(--text);max-width:300px;white-space:normal;line-height:1.25;margin-top:1px}
.fxb.up{border-color:var(--ok);color:#8fe0b0}
.fxb.down{border-color:#ff5a6e;color:#ff9aa8}
@keyframes fxUp{0%{opacity:0;transform:translate(-50%,6px) scale(.85)}12%{opacity:1;transform:translate(-50%,0) scale(1.06)}20%{transform:translate(-50%,0) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-22px)}}
.fxdrop{position:fixed;width:16px;height:16px;margin:-8px 0 0 -8px;background:var(--accent);border-radius:50% 0 50% 50%;box-shadow:0 0 10px #ff5a6e;opacity:0;animation:fxFly .9s cubic-bezier(.4,0,.3,1) forwards}
@keyframes fxFly{0%{opacity:0;transform:translate(0,0) rotate(-45deg) scale(.6)}15%{opacity:1;transform:translate(0,0) rotate(-45deg) scale(1.1)}85%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(-45deg) scale(.8)}}
@media (prefers-reduced-motion:reduce){.fxb{animation-duration:2.4s;animation-name:fxFade}.fxdrop{display:none}}
@keyframes fxFade{0%,85%{opacity:1}100%{opacity:0}}

/* tutorial */
.tutchk{background:#1d2a22;border:1px solid #2f5a40;border-radius:8px;padding:8px 10px}
.tuhead{display:flex;align-items:center;justify-content:space-between;margin-top:6px}
.tu-tog{color:var(--dim)}
.tu-tog.on{background:var(--ok);border-color:var(--ok);color:#0f1a12;font-weight:700}
.tutor{background:#14201a;border:1px solid #2f5a40;border-radius:12px;padding:10px;font-size:14px;line-height:1.45}
.tutor span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:#8fd8a8;margin-bottom:4px}
.tu-now{background:#1d2a22;border-left:3px solid var(--ok);border-radius:6px;padding:7px 9px;margin-bottom:9px}
.tu-now p{margin:0}
.tu-what ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.tu-what li{border-left:2px solid #2f5a40;padding-left:8px}
.tu-what li.ph{border-left-color:var(--accent2)}
.tu-h{display:block;color:var(--text);font-size:13px}
.tu-h[data-card]{cursor:pointer;text-decoration:underline dotted}
.tu-what p{margin:2px 0 0;color:#cfe3d6}
.tu-what p b{color:#fff}
.tu-what.dim{opacity:.6}
.tu-empty{color:var(--dim);margin:0}
.tu-go{width:100%;margin-top:10px !important;text-align:center;background:var(--ok) !important;border-color:var(--ok) !important;color:#0f1a12 !important}

/* com o tutorial ligado: explicação no topo da coluna do meio e carta mais compacta */
body.tu-on #game{grid-template-columns:minmax(0,1fr) 300px 370px}
body.tu-on .tuhead{order:-3;margin-top:0}
body.tu-on #tutor{order:-2}
body.tu-on #playcol .spot .sp-img{max-height:34vh;width:auto;max-width:100%}
body.tu-on #playcol .sp-txt{min-height:0;max-height:24vh;overflow:auto}
@media (max-width:1300px){body.tu-on #game{grid-template-columns:minmax(0,1fr) 380px}}
@media (max-width:900px){body.tu-on #game{grid-template-columns:1fr}}
.tutor.wait{border-color:var(--ok);box-shadow:0 0 0 3px #5fb88a44}

/* aviso: ação não bloqueada */
.spot.notice{text-align:left;border-color:var(--blue)}
.spot.notice.wait{border:2px solid var(--blue);box-shadow:0 0 0 4px #6aa3d833,0 10px 30px #000a}
.nt-icon{width:34px;height:34px;border-radius:50%;background:var(--blue);color:#0d1520;font-weight:700;font-size:20px;display:flex;align-items:center;justify-content:center;margin:2px auto 6px}
.nt-title{font:400 21px var(--display);color:var(--blue);text-align:center;margin-bottom:8px}
.nt-act{background:var(--panel2);border-radius:8px;padding:8px 10px;font-size:14px}
.nt-act b{color:var(--text)}
.nt-why{margin:8px 0 0;font-size:14px;line-height:1.45}
.nt-why span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--blue);margin-bottom:2px}

/* disciplinas por extenso no visualizador */
.dfull{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:8px 0 10px}
.dlab{width:100%;font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--dim)}
.dchip{display:inline-flex;flex-direction:column;align-items:flex-start;border-radius:8px;padding:4px 10px;line-height:1.2;border:1px solid var(--line);background:var(--panel2)}
.dchip b{font-size:15px;font-weight:500;color:var(--text)}
.dchip small{font-size:11px;color:var(--dim)}
.dchip.sup{background:#3a2a10;border-color:var(--accent2)}
.dchip.sup b{color:var(--accent2);font-weight:700;letter-spacing:.03em}
.dchip.sup small{color:#e8c37a}

.vc-tag.cor{color:#c9a0ff;border:1px solid #6c4aa0}
#log li.l-vote{color:#c9a0ff}
.opt em.new{font-style:normal;background:var(--ok);color:#0f1a12;border-radius:4px;padding:0 5px;font-size:11px;font-weight:700;margin-left:4px}
.pick{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.pick.small{grid-template-columns:repeat(4,auto)}
@media (max-width:560px){.pick.small{grid-template-columns:repeat(2,auto)}}

/* prévia da carta ao passar o mouse */
#hoverCard{position:fixed;z-index:60;width:300px;pointer-events:none;opacity:0;transform:scale(.96);transition:opacity .12s,transform .12s}
#hoverCard.show{opacity:1;transform:none}
.hv-card{position:relative;background:var(--panel);border:1px solid var(--accent2);border-radius:14px;box-shadow:0 18px 50px #000d;overflow:hidden}
.hv-img{display:block;width:100%;height:auto;max-height:430px;object-fit:contain}
.hv-txt{padding:12px 14px;font-size:14px;line-height:1.45}
.hv-txt b{display:block;font:400 20px var(--display);color:var(--accent2)}
.hv-txt i{display:block;font-style:normal;color:var(--dim);font-size:12.5px;margin:2px 0 4px}
.hv-txt p{margin:6px 0 0}
.hv-card.has-img .hv-txt{display:none}
@media (hover:none){#hoverCard{display:none}}
@media (prefers-reduced-motion:reduce){#hoverCard{transition:none}}

/* mesa: mestre em jogo e aliados */
.zone.table{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px;padding-top:8px;border-top:1px dashed var(--line)}
.tz{background:#150f12;border:1px solid var(--line);border-radius:9px;padding:6px 8px;min-height:64px}
.tz:has(.tc){min-height:126px}
.tz h4{display:flex;align-items:center;gap:6px;margin:0 0 6px}
.zc{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:0 6px;font-size:10.5px;color:var(--text)}
.trow{display:flex;flex-wrap:wrap;gap:7px}
.tempty{color:var(--dim);font-size:12.5px;line-height:1.35;padding:6px 2px}
.tc{position:relative;width:78px;height:96px;border-radius:7px;overflow:hidden;background:var(--panel2);border:1px solid #6b5a2a;cursor:pointer;display:flex;flex-direction:column;justify-content:flex-end;padding:4px}
.tc.ally{border-color:#2f5a40}
.tc.locked{transform:rotate(90deg);opacity:.8;margin:0 10px}
.tc-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.6}
.tc>*:not(img){position:relative}
.tc-name{font-weight:700;font-size:11px;line-height:1.15;text-shadow:0 1px 2px #000,0 0 3px #000}
.tc-type{font-size:9.5px;color:var(--dim);text-shadow:0 1px 2px #000}
.tc-cnt{position:absolute !important;top:4px;right:4px;background:var(--accent2);color:#111;border-radius:9px;padding:0 6px;font-size:11px;font-weight:700}
.tc-life{position:absolute !important;top:4px;left:4px;background:var(--ok);color:#0f1a12;border-radius:9px;padding:0 6px;font-size:11px;font-weight:700}
@media (max-width:640px){.zone.table{grid-template-columns:1fr}}

/* créditos e direitos autorais */
.legal{margin-top:16px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:#140f11;color:var(--dim);font-size:13.5px;line-height:1.5}
.legal p{margin:0 0 8px}
.legal .fan{color:var(--text)}
.legal a{color:var(--accent2)}
.legal summary{cursor:pointer;color:var(--text)}
.legal ul{margin:8px 0 0;padding-left:18px}
.legal li{margin-bottom:5px}
#setup{padding-bottom:40px}
.legal{overflow:hidden}
.legal .dpack{float:left;width:88px;height:88px;margin:0 14px 6px 0;border-radius:50%}
@media (max-width:480px){.legal .dpack{width:64px;height:64px}}

/* cartas em disputa */
.tz.cont{grid-column:1/-1;border-color:#6c4aa0;background:#17121d}
.tc.contested{border-color:#c9a0ff;filter:grayscale(.6) brightness(.8)}
.tc.contested::after{content:"em disputa";position:absolute;top:4px;left:4px;font-size:9px;background:#6c4aa0;color:#fff;border-radius:4px;padding:0 4px}
#log li.l-contest{color:#c9a0ff}

.pick.small{display:flex;flex-wrap:wrap;gap:10px}

/* barra de fase */
.mid.pbar{flex-direction:column;align-items:stretch;gap:5px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:7px 10px}
.prow{display:flex;flex-wrap:wrap;align-items:center;gap:5px;justify-content:center}
.pturn{font:400 15px var(--display);color:var(--accent2);margin-right:8px}
.pturn.ai{color:#ff9aa8}
.pchip{font-size:12.5px;padding:2px 9px;border-radius:12px;border:1px solid var(--line);color:var(--dim);background:var(--panel2)}
.pchip.done{opacity:.55}
.pchip.cur{background:var(--accent2);border-color:var(--accent2);color:#1a1316;font-weight:700}
.parr{color:var(--dim);font-size:12px}
.pstep{text-align:center;font-size:13.5px;color:var(--text);background:#14201a;border:1px solid #2f5a40;border-radius:7px;padding:3px 8px}
.pstep.combat{background:#3a1018;border-color:var(--accent);color:#ffd7dc}
.sp-use{text-align:left;font-size:13.5px;line-height:1.35;color:var(--text);background:#2a2030;border:1px solid var(--accent2);border-radius:8px;padding:6px 9px;margin:0 0 8px}
.sp-use span{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--accent2);margin-bottom:2px}
@media (max-width:1300px){#playcol .sp-use{grid-column:1/-1;margin:0}}
.sp-use table{border-collapse:collapse;width:100%}
.sp-use th{text-align:left;vertical-align:top;font-weight:600;color:var(--dim);font-size:12px;padding:2px 8px 2px 0;white-space:nowrap}
.sp-use td{font-size:13.5px;padding:2px 0;color:var(--text)}
.spot.ann .sp-use{margin-top:4px}

/* tela de abertura */
#intro{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding-block:28px;background:radial-gradient(ellipse at 50% 30%,#3a101a 0%,#0f0b0d 62%)}
.intro-box{max-width:640px;width:100%;text-align:center}
.intro-seal{width:132px;height:132px;border-radius:50%;box-shadow:0 10px 40px #000c;display:block;margin:0 auto 14px}
#intro h1{font:400 40px/1.1 var(--display);color:var(--accent2);letter-spacing:.02em}
.intro-lead{color:var(--text);font-size:17px;line-height:1.5;margin:12px auto 22px;max-width:560px}
.intro-opts{display:grid;gap:12px;text-align:left}
.intro-opt{display:block;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 18px;color:var(--text);text-decoration:none;font:inherit;cursor:pointer;width:100%;transition:border-color .15s,transform .15s}
.intro-opt:hover,.intro-opt:focus-visible{border-color:var(--accent2);transform:translateY(-1px);outline:none}
.intro-opt b{display:block;font:400 22px var(--display);color:var(--accent2);margin-bottom:4px}
.intro-opt span{display:block;color:var(--dim);font-size:14.5px;line-height:1.45}
.intro-opt em{display:inline-block;margin-top:8px;font-style:normal;font-size:13px;color:var(--blue,#7fb2ff)}
.intro-opt.main{background:linear-gradient(180deg,#4a1220,#2a0c14);border-color:var(--accent)}
.intro-opt.main b{color:#fff}
.intro-opt.main span{color:#f0d6da}
.intro-fan{color:var(--dim);font-size:13px;margin:20px auto 4px;max-width:520px}
.intro-by{color:var(--dim);font-size:13px;margin:0}
.intro-by b{color:var(--text)} .intro-by a{color:var(--accent2)}
.intro-back{margin-bottom:12px}
@media (max-width:520px){#intro h1{font-size:31px}.intro-seal{width:104px;height:104px}.intro-lead{font-size:15.5px}.intro-opt b{font-size:20px}}
.intro-pdx{margin-top:6px;font-size:12px}.intro-pdx a{color:var(--accent2)}
.intro-dpack{display:block;width:76px;height:76px;border-radius:50%;margin:24px auto 0}
.intro-dpack + .intro-fan{margin-top:10px}