.live-bar { display:flex; align-items:center; gap:.55rem; flex-wrap:wrap; margin:0 0 .8rem }
.live-error { color:var(--danger,#f3a28e); padding:.35rem 0 }
.live-panel { display:grid; gap:.65rem }
.live-panel h3 { margin:.7rem 0 0 }
.live-panel p { margin:0 }
.live-invite-row { display:grid; grid-template-columns:minmax(8rem,1fr) auto auto; align-items:center; gap:.5rem; padding:.5rem 0; border-bottom:1px solid var(--line) }
.live-link { padding:.65rem; border:1px solid var(--line); border-radius:.5rem }
.live-player { width:min(1440px,100%); margin:auto; padding:0 clamp(.85rem,3vw,2rem) 1rem }
.live-player-head { display:flex; align-items:center; gap:.65rem; min-height:4.1rem; border-bottom:1px solid var(--line) }
.live-player-head img { width:2.15rem; height:2.15rem }
.live-player-head > div { flex:1; min-width:0; display:grid }
.live-player-head small { color:var(--muted) }
.live-player-head strong { overflow-wrap:anywhere }
.live-tabs { display:flex; gap:.4rem; padding:.65rem 0; flex-wrap:wrap }
.live-content { min-width:0 }
.live-content .dd-review { min-width:0 }
.live-page-head h1 { margin:0 }
.live-page-head p { color:var(--muted); margin:.35rem 0 .85rem }
.live-battle { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(17rem,1fr); gap:.9rem; align-items:start }
.live-battle > div { min-width:0 }
.live-controls { display:grid; gap:.65rem }
.live-action-card { padding:.8rem; margin:0 0 .55rem }
.live-action-card h2 { font-size:1.02rem; margin:0 0 .4rem }
.live-action-card p { margin:.35rem 0 }
.live-board { overflow:hidden; margin-bottom:.65rem }
.live-board-head { padding:.7rem .8rem }
.live-board-head h2,.live-board-head p { margin:0 }
.live-board-head p { color:var(--muted); font-size:.86rem }
.live-map { position:relative; width:100%; isolation:isolate; overflow:hidden; background:var(--panel2); user-select:none }
.live-map-image,.live-grid { position:absolute; inset:0; width:100%; height:100%; pointer-events:none }
.live-token { position:absolute; display:grid; place-items:center; z-index:1; transform:translate(-50%,-50%); width:calc(var(--cell) * var(--span) * var(--scale)); min-width:1rem; aspect-ratio:1; border:2px solid #88b496; border-radius:50%; background:var(--panel); padding:0; overflow:visible; color:var(--text); pointer-events:none }
.live-token.enemy { border-color:#dd7950 }
.live-token.own { z-index:2; cursor:grab; touch-action:none; pointer-events:auto }
.live-token.selected { outline:2px solid #f0c577; outline-offset:1px }
.live-token img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:50%; pointer-events:none }
.live-token small,.live-token-name { position:absolute; border-radius:.2rem; color:#fff; background:#111d; white-space:nowrap; padding:.05rem .2rem; font-size:clamp(.57rem,1.2vw,.75rem); pointer-events:none }
.live-token small { top:-.7rem; right:-.35rem }
.live-token-name { bottom:-.7rem }
.live-roster { list-style:none; margin:0; padding:0 }
.live-roster li { display:flex; justify-content:space-between; padding:.35rem; gap:.5rem; border-bottom:1px solid var(--line) }
.live-roster li.active { background:var(--panel2); font-weight:700 }
.live-fold summary { cursor:pointer; padding:.75rem; font-weight:650 }
.live-fold > div { display:grid; gap:.55rem; padding:0 .75rem .75rem }
.live-form { display:grid; gap:.5rem; min-width:0 }
.live-form + .live-form { padding-top:.65rem; border-top:1px solid var(--line) }
.live-form .field { min-width:0; margin:0 }
.live-form select,.live-form input { max-width:100% }
.live-targets { display:grid; gap:.3rem; border:1px solid var(--line); border-radius:.45rem; margin:0; min-width:0 }
.live-targets label { overflow-wrap:anywhere }
.live-checks,.live-action-buttons { display:flex; flex-wrap:wrap; gap:.4rem }
.live-result { border-left:3px solid #88b496; margin:.6rem 0; background:var(--panel2); padding:.65rem }
.live-spell-description { color:var(--muted); margin:.2rem 0 }
@media(max-width:800px) {
  .live-battle { grid-template-columns:minmax(0,1fr) }
  .live-invite-row { grid-template-columns:1fr 1fr }
  .live-invite-row strong { grid-column:1/-1 }
}
.live-entry{width:min(90vw,32rem);margin:12vh auto;padding:2rem;background:var(--surface,#162630);border:1px solid var(--line,#334850);border-radius:1rem;text-align:center}
.live-entry img{width:4.5rem;height:4.5rem}
.live-entry p{margin:1rem 0 1.5rem}