/* Table : barre du haut, plateaux des joueurs, pile, main, journal. */
.topbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--mat);border-bottom:1px solid var(--line);padding:.5rem .75rem;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.topbar h1{font-family:var(--serif);font-size:1.25rem;margin:0 .5rem 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40vw}
.seats{display:flex;gap:.3rem;flex-wrap:wrap;align-items:center;flex:1;min-width:0}
@media (max-width:640px){
  .topbar{gap:.4rem}
  .topbar h1{max-width:none;flex:1;font-size:1.1rem}
  .topbar .seats{order:10;flex:0 0 100%}
  .topbar .ticker{order:11}
  .topbar .phases{order:12}
}
.seat{font-size:.9rem;padding:.15rem .5rem;border-radius:999px;border:1px solid var(--line)}
.seat.on{background:var(--brass);color:#fff;border-color:transparent;font-weight:700}
.ticker{width:100%;font-size:.88rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wrap{padding:.75rem;display:grid;grid-template-columns:minmax(0,1fr);gap:.75rem;max-width:1500px;margin:0 auto}
.wrap > *{min-width:0}
.opps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:.75rem}
.opp .row.between{flex-wrap:wrap;row-gap:.3rem}
.opp{background:var(--mat2);border:1px solid var(--line);border-radius:12px;padding:.7rem;min-width:0}
.opp.turn{border-color:var(--brass);box-shadow:inset 0 0 0 1px var(--brass)}
.who{display:flex;align-items:center;gap:.45rem;font-weight:700}
.dot{width:10px;height:10px;border-radius:50%;flex:none}
.stats{display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap;margin:.3rem 0 .4rem}
.life{font-family:var(--serif);font-weight:800;font-size:2.4rem;line-height:1;color:var(--life);font-variant-numeric:lining-nums tabular-nums}
.life.big{font-size:3.4rem}
.stat{font-size:.92rem;color:var(--muted)}
.stat b{color:var(--ink);font-variant-numeric:tabular-nums}
.pois b{color:var(--poison)}
.zones{display:flex;gap:.35rem;flex-wrap:wrap;margin:.35rem 0}
.zbtn{background:transparent;border:1px solid var(--line);border-radius:6px;padding:.15rem .5rem;font-size:.88rem;min-height:30px}
.bf{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:40px}
.bf.lands{border-top:1px dashed var(--line);padding-top:6px;margin-top:6px}
.bfempty{color:var(--muted);font-size:.9rem;font-style:italic}
.me{background:var(--mat2);border:1px solid var(--line);border-radius:12px;display:grid;grid-template-columns:280px minmax(0,1fr);min-width:0}
.me.turn{border-color:var(--brass);box-shadow:inset 0 0 0 1px var(--brass)}
@media (max-width:760px){.me{grid-template-columns:1fr}}
.side{min-width:0;padding:.8rem;border-right:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1fr);gap:.7rem;align-content:start}
@media (max-width:760px){.side{border-right:0;border-bottom:1px solid var(--line)}}
.lifectl{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap}
.lifectl .btn{min-width:0;flex:1;padding:.3rem .3rem}
.cmdlist{display:grid;gap:.3rem;font-size:.9rem}
.cmdrow{display:flex;align-items:center;justify-content:space-between;gap:.3rem}
.cmdrow .n{font-variant-numeric:tabular-nums;font-weight:700;min-width:2ch;text-align:right}
.cmdrow.lethal .n{color:var(--life)}
.cmdrow span.l{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}
.zones .zbtn{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.piles{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem}
.pile{border:1px solid var(--line);border-radius:8px;background:var(--mat);padding:.45rem .3rem;text-align:center;min-height:62px}
.pile b{display:block;font-family:var(--serif);font-size:1.4rem;line-height:1.1}
.pile span{font-size:.78rem;color:var(--muted);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pile{min-width:0}
.pile.lib{background:repeating-linear-gradient(135deg,var(--mat) 0 7px,var(--mat2) 7px 14px)}
.field{padding:.8rem;min-width:0;display:flex;flex-direction:column;gap:.5rem}
.field > .bf:not(.lands){flex:0 0 auto;align-content:flex-start;align-items:flex-start;min-height:calc(118px * var(--kb,1))}
.field > .bf.lands{margin-top:0}
.mktoggle{background:transparent;border:1px dashed var(--line);border-radius:8px;padding:.3rem .6rem;text-align:left;color:var(--muted);font-size:.9rem;min-height:34px}
.tools{display:flex;gap:.4rem;flex-wrap:wrap}
.handwrap{background:var(--mat2);border:1px solid var(--line);border-radius:12px;padding:.6rem .8rem}
.hand{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;min-height:calc(106px * var(--kh,1));align-items:center}
.sechead{display:flex;justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:.4rem}
.sechead h3{font-family:var(--serif);font-size:1.1rem;margin:0}
.ms{display:inline-block;min-width:1.35em;padding:0 .25em;margin:0 .05em;border-radius:999px;background:var(--ui);border:1px solid var(--line);font-family:var(--sans);font-size:.8em;font-weight:700;text-align:center;line-height:1.4;vertical-align:.08em}
.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;border:1px solid var(--line);background:var(--ui);padding:0}
.iconbtn svg{width:18px;height:18px}
.focus{background:var(--mat2);border:2px solid var(--brass);border-radius:12px;padding:.8rem;display:grid;gap:.8rem;min-width:0}
.focus h2{font-family:var(--serif);font-size:1.5rem;margin:0}
.fzones{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.8rem}
.fzone{border:1px solid var(--line);border-radius:10px;padding:.6rem;min-width:0}
.fzone h3{font-family:var(--serif);font-size:1.05rem;margin:0 0 .4rem}
.fzone .bf{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}
.stack{background:var(--mat2);border:1px dashed var(--brass);border-radius:12px;padding:.6rem .8rem}
.stk{display:flex;flex-direction:column;align-items:center;gap:2px}
.stk .by{font-size:.78rem;font-weight:700}
.stk.top .cd{box-shadow:0 0 0 3px var(--brass)}
.phases{width:100%;display:flex;gap:.25rem;overflow-x:auto;padding-bottom:2px}
.ph{background:transparent;border:1px solid var(--line);border-radius:999px;padding:.1rem .6rem;font-size:.85rem;white-space:nowrap;min-height:28px}
.ph.on{background:var(--ink);color:var(--mat);border-color:transparent;font-weight:700}
.opp.marked,.me.marked{box-shadow:0 0 0 3px var(--mk)}
.alert{border-left:3px solid var(--life);background:var(--mat);padding:.5rem .7rem;border-radius:0 8px 8px 0;font-size:.92rem}
.alert.tgt{border-left-color:var(--mk)}
.badge{font-size:.78rem;border:1px solid var(--brass);color:var(--brass);border-radius:999px;padding:0 .45rem;font-weight:700;white-space:nowrap}
#turnbanner{position:fixed;left:50%;top:30%;transform:translate(-50%,-50%);z-index:70;background:var(--brass);color:#1f1a10;font-family:var(--serif);font-weight:800;font-size:clamp(1.6rem,5vw,2.6rem);padding:1rem 1.8rem;border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.4);text-align:center;animation:pop .35s ease-out;cursor:pointer}
#turnbanner small{display:block;font-family:var(--sans);font-size:1rem;font-weight:500}
#turnbanner[hidden]{display:none}
@keyframes pop{from{transform:translate(-50%,-50%) scale(.85);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){#turnbanner{animation:none}}
.chatrow{display:flex;gap:.4rem;margin-top:.5rem;position:sticky;bottom:0;background:var(--mat2);padding-top:.3rem}
.log p.chat{background:var(--ui);border-radius:6px;padding:.25rem .5rem}
.dotn{display:inline-block;min-width:1.3em;padding:0 .3em;border-radius:999px;background:var(--life);color:#fff;font-size:.78rem;font-weight:700;margin-left:.25rem}
.markers{display:grid;gap:.3rem;font-size:.92rem}
.markers[hidden]{display:none}
.selbar{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem;background:var(--mat);border:1px solid var(--focus);border-radius:10px;padding:.3rem .5rem;width:100%}
.selbar b{margin-right:.3rem}
.liferow{display:flex;align-items:center;gap:.6rem}
.liferow .life.big{font-size:2.8rem;min-width:2.2ch}
.liferow .lifectl{flex:1;display:grid;grid-template-columns:repeat(2,1fr);gap:.25rem}
.liferow .lifectl .btn{min-height:32px;padding:.15rem .3rem}
.fieldfoot{display:flex;flex-wrap:wrap;align-items:flex-end;gap:1rem;border-top:1px solid var(--line);padding-top:.6rem;margin-top:.2rem}
.fieldfoot .piles{flex:0 1 330px;min-width:240px}
.opptop{display:flex;gap:.7rem;align-items:flex-start;margin:.3rem 0 .4rem}
.oppinfo{flex:1;min-width:0}
.oppinfo .stats{margin-top:0}
.cmdstrip{display:flex;gap:.35rem;flex:none}
.cmdcard{display:flex;flex-direction:column;align-items:center;gap:2px}
.cmdcard .slot{--k:calc(.95 * var(--ko,1))}
.cmdcard.out .cd{filter:grayscale(.85) brightness(.75)}
.cmdtag{font-size:.74rem;font-weight:700;color:var(--brass);white-space:nowrap}
.cmdcard.out .cmdtag{color:var(--muted)}
.keyhint{font-size:.82rem;align-self:center}
@media (hover:none){.keyhint{display:none}}
.stat.mull{font-weight:700;color:var(--brass)}
.stat.mull.ok{color:var(--poison)}
.credit{font-size:.8rem;color:var(--muted);text-align:center;padding:1rem}
.log{background:var(--mat2);border:1px solid var(--line);border-radius:12px;padding:.6rem .8rem;max-height:260px;overflow:auto;font-size:.92rem}
.log p{margin:.15rem 0}
.log time{color:var(--muted);font-variant-numeric:tabular-nums;margin-right:.35rem}
