:root{
  --bg:#0b1016;
  --bg2:#101821;
  --surface:#121b24;
  --surface-2:#17222d;
  --surface-3:#1d2a36;
  --surface-4:#223343;
  --line:#2a3d4f;
  --line-soft:#31475b;
  --text:#eef4f7;
  --muted:#9ab0be;
  --muted-2:#7e94a2;
  --orange:#df2b0b;
  --orange-2:#ff744c;
  --cyan:#68dbe1;
  --cyan-2:#2db9c0;
  --green:#7fe2ac;
  --green-2:#46bd87;
  --gold:#f0be6a;
  --danger:#ff6e63;
  --radius:5px;
  --panel-shadow:0 18px 40px rgba(0,0,0,.28);
  --soft-shadow:0 10px 22px rgba(0,0,0,.16);
  color-scheme:dark;
  font-family:Inter,"Segoe UI",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(50vw 40vh at 10% 0%, rgba(56,96,123,.32), transparent 60%),
    radial-gradient(45vw 45vh at 100% 100%, rgba(18,82,75,.26), transparent 62%),
    linear-gradient(180deg, #0d141c 0%, #0a1016 100%);
}
a{color:inherit}
button{font:inherit;cursor:pointer}
button:focus-visible,article:focus-visible,[role="button"]:focus-visible{outline:2px solid var(--orange-2);outline-offset:3px}
button:disabled{opacity:.5;cursor:not-allowed}
img{display:block;max-width:100%}
kbd{font:inherit;background:#0a1016;border:1px solid #324657;border-radius:4px;padding:1px 5px}
.hidden{display:none!important}

.app-shell{
  height:100dvh;
  max-width:1920px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
main{flex:1;min-height:0;display:flex;overflow:hidden}
.screen{flex:1;min-height:0}

.topbar{
  height:74px;
  flex:0 0 74px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:0 22px;
  border-bottom:1px solid rgba(97,124,145,.24);
  background:linear-gradient(180deg, rgba(15,23,31,.94), rgba(13,19,26,.94));
  backdrop-filter:blur(8px);
  box-shadow:0 8px 30px rgba(0,0,0,.25);
}
.brand{display:flex;align-items:center;gap:14px;min-width:0}
.brand-mark{
  width:44px;height:44px;border-radius:5px;display:grid;place-items:center;
  background:linear-gradient(180deg,var(--orange-2),var(--orange));
  box-shadow:0 0 0 1px rgba(255,255,255,.06) inset,0 0 30px rgba(223,43,11,.28);
  font-weight:900;font-size:19px;transform:rotate(-8deg)
}
.brand-mark span{color:#ffd0c1;font-size:14px;margin-left:-3px}
.brand strong{display:block;font-size:18px;letter-spacing:1.35px;white-space:nowrap}
.brand-accent{color:var(--orange-2)}
.brand small{display:block;margin-top:3px;font-size:9px;letter-spacing:2.2px;color:var(--muted)}
.topbar-right{display:flex;align-items:center;gap:12px;min-width:0}
.top-tag,.version{
  border:1px solid rgba(121,146,162,.28);
  background:rgba(18,29,39,.9);
  padding:8px 11px;
  border-radius:999px;
  font-size:12px;
  color:var(--muted);
  white-space:nowrap;
}
.top-tag{color:#ffd0c7;border-color:rgba(223,43,11,.35);background:rgba(64,18,12,.45)}
.icon-button{
  width:38px;height:38px;border:1px solid rgba(121,146,162,.28);border-radius:5px;
  background:linear-gradient(180deg,#1a2530,#131b24);color:var(--text);
}

.button{
  appearance:none;border:1px solid transparent;border-radius:5px;padding:12px 16px;
  font-weight:700;letter-spacing:.3px;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.button:hover:not(:disabled){transform:translateY(-1px)}
.button-primary{
  color:white;
  background:linear-gradient(180deg,var(--orange-2),var(--orange));
  box-shadow:0 12px 26px rgba(223,43,11,.22), 0 0 0 1px rgba(255,255,255,.06) inset;
}
.button-ghost,.button-quiet,.button-outline{
  color:var(--text);
  border-color:rgba(121,146,162,.28);
  background:linear-gradient(180deg,#1a2530,#131b24);
}
.button-outline{background:linear-gradient(180deg,#1d2b38,#17222d)}
.button.full{width:100%}

.eyebrow{
  margin:0 0 10px;
  color:#e8baa6;
  font-size:12px;
  font-weight:800;
  letter-spacing:2px;
  text-transform:uppercase;
}
.bullet{opacity:.66;margin:0 8px}
.dot{width:10px;height:10px;border-radius:999px;background:var(--green);box-shadow:0 0 12px rgba(127,226,172,.6)}
.tiny-muted{margin:0;color:var(--muted);font-size:12px;line-height:1.45}
.info-copy{color:var(--text);line-height:1.55;font-size:14px}

/* Setup */
.setup-screen{
  display:flex;
  flex-direction:column;
  gap:18px;
  padding:18px 20px 16px;
  overflow:auto;
  scrollbar-gutter:stable;
}
.hero{
  display:grid;
  grid-template-columns:minmax(320px,1.3fr) minmax(260px,.9fr);
  gap:20px;
  min-height:240px;
}
.hero-copy,.hero-map-art,.panel,.end-card,.footer,.roster-card,.setup-footer,.setup-heading,.mission-strip,.canvas-frame,.team-member,.help-dialog{
  border:1px solid rgba(103,127,145,.25);
  background:linear-gradient(180deg, rgba(20,29,38,.94), rgba(15,22,30,.96));
  box-shadow:var(--panel-shadow);
}
.hero-copy{
  border-radius:5px;
  padding:26px 28px;
  position:relative;
  overflow:hidden;
}
.hero-copy::before,
.hero-map-art::before,
.panel::before,
.canvas-frame::before,
.end-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(135deg, rgba(255,255,255,.06), transparent 24%, transparent 76%, rgba(255,255,255,.03));
}
.hero-copy::after{
  content:"";position:absolute;right:-80px;bottom:-80px;width:240px;height:240px;border-radius:50%;
  background:radial-gradient(circle, rgba(104,219,225,.12), transparent 65%);
}
.hero-copy h1{margin:0 0 12px;font-size:clamp(32px,4vw,48px);line-height:1.02;letter-spacing:-1px}
.hero-copy p:not(.eyebrow){margin:0 0 18px;color:#d8e2ea;max-width:72ch;line-height:1.6}
.hero-metrics{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.hero-metrics span{
  padding:10px 13px;border-radius:999px;background:rgba(13,21,29,.7);border:1px solid rgba(91,116,136,.25);
  color:var(--muted);font-size:13px
}
.hero-metrics b{color:var(--text)}
.hero-map-art{
  border-radius:5px;position:relative;overflow:hidden;min-height:240px;
  background:
    radial-gradient(circle at 20% 20%, rgba(92,144,179,.26), transparent 28%),
    radial-gradient(circle at 80% 78%, rgba(82,182,147,.18), transparent 26%),
    linear-gradient(160deg, rgba(22,34,44,.96), rgba(14,21,28,.98));
}
.hero-core{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-54%);
  width:112px;height:112px;border-radius:22px;display:grid;place-items:center;
  background:linear-gradient(180deg, #2f4558, #16202b);border:1px solid rgba(152,180,198,.25);
  font-size:34px;font-weight:900;letter-spacing:2px;color:#fff;
  box-shadow:0 25px 50px rgba(0,0,0,.3), 0 0 40px rgba(45,185,192,.15);
}
.hero-orbit{position:absolute;left:50%;top:50%;transform:translate(-50%,74px);font-size:11px;letter-spacing:3px;color:var(--muted)}
.hero-diamond{position:absolute;width:120px;height:60px;border:1px solid rgba(104,219,225,.24);transform:rotate(-28deg) skewX(-30deg);border-radius:12px;opacity:.7}
.d1{left:18%;top:18%}.d2{left:60%;top:14%}.d3{left:68%;top:46%}.d4{left:20%;top:56%}.d5{left:45%;top:72%}
.floating-card{
  position:absolute;display:grid;gap:4px;min-width:130px;padding:12px 14px;border-radius:5px;
  background:rgba(10,16,22,.76);border:1px solid rgba(128,160,179,.22);backdrop-filter:blur(5px);
}
.floating-card span{font-size:11px;font-weight:800;color:#ffd3c7;letter-spacing:1.5px}
.floating-card b{font-size:14px}.floating-card small{color:var(--muted)}
.floating-card.one{left:24px;bottom:22px}.floating-card.two{right:24px;top:24px}

.setup-heading,.setup-footer{
  border-radius:5px;padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:16px
}
.setup-heading h2{margin:0 0 6px;font-size:26px}.setup-heading p:last-child{margin:0;color:var(--muted);line-height:1.55}
.squad-pill{
  display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:999px;background:rgba(10,16,22,.66);
  border:1px solid rgba(121,146,162,.25);white-space:nowrap;font-weight:700
}
.roster{
  display:grid;grid-template-columns:repeat(5,minmax(220px,1fr));gap:16px;
}
.roster-card{
  border-radius:5px;padding:0;display:flex;flex-direction:column;overflow:hidden;text-align:left;
  min-height:100%;position:relative;transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.roster-card:hover{transform:translateY(-2px);border-color:rgba(104,219,225,.35)}
.roster-card.selected{border-color:rgba(223,43,11,.55);box-shadow:0 20px 42px rgba(0,0,0,.3),0 0 0 1px rgba(223,43,11,.28) inset}
.roster-cover{position:relative;padding:16px 16px 0}
.roster-cover img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:5px;border:1px solid rgba(121,146,162,.18);background:#0d141a}
.roster-index,.roster-check{
  position:absolute;top:28px;display:grid;place-items:center;min-width:40px;height:28px;padding:0 10px;
  border-radius:999px;font-size:12px;font-weight:900;letter-spacing:1px
}
.roster-index{left:28px;background:rgba(10,16,22,.84);border:1px solid rgba(121,146,162,.22);color:var(--muted)}
.roster-check{right:28px;background:linear-gradient(180deg,var(--orange-2),var(--orange));color:#fff}
.roster-data{display:flex;flex-direction:column;gap:8px;padding:14px 16px 16px;flex:1}
.roster-data strong{font-size:19px}
.roster-role{font-size:14px;color:#d9e7ee}.roster-tag{font-size:11px;letter-spacing:1.5px;color:#ffc8b9;text-transform:uppercase}
.roster-skills{display:grid;gap:7px;margin-top:4px}
.skill-line{display:grid;grid-template-columns:1fr 72px 28px;gap:10px;align-items:center;font-size:12px;color:var(--muted)}
.skill-track,.ability-track,.task-progress,.mini-progress,.unit-ap-bar{height:7px;background:#0c1319;border-radius:999px;overflow:hidden;border:1px solid rgba(78,100,119,.32)}
.skill-fill,.ability-track div,.task-progress div,.mini-progress div,.unit-ap-bar div{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--orange-2),#ffb17e)}
.skill-value{justify-self:end;color:#fff}
.roster-special{margin-top:auto;padding-top:8px;border-top:1px solid rgba(116,144,162,.15);color:#fff2c8;font-size:13px}
.roster-bottom{padding:13px 16px;border-top:1px solid rgba(116,144,162,.15);background:rgba(9,14,19,.6);font-weight:800;letter-spacing:.5px;color:#d8e4ea}
.roster-card.selected .roster-bottom{background:linear-gradient(180deg,rgba(99,32,20,.62),rgba(63,20,12,.7));color:#fff5f1}
.setup-footer .hint{display:flex;align-items:flex-start;gap:12px;color:var(--muted);line-height:1.5;max-width:70ch}
.hint-icon{width:22px;height:22px;border-radius:999px;background:#10202a;border:1px solid rgba(121,146,162,.25);display:grid;place-items:center;color:#c8e3ef;font-weight:800;font-size:12px;flex:0 0 auto}
.setup-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}

/* Game */
.game-screen{
  display:flex;
  flex-direction:column;
  padding:14px 16px 12px;
  gap:14px;
  overflow:hidden;
}
.mission-strip{
  position:relative;
  border-radius:5px;
  padding:14px 16px;
  display:grid;
  grid-template-columns:minmax(260px,1.1fr) minmax(160px,.6fr) auto;
  gap:14px;align-items:center;overflow:hidden;
}
.mission-strip::after{
  content:"";position:absolute;inset:0;background:linear-gradient(90deg, rgba(255,255,255,.02), transparent 22%, transparent 78%, rgba(255,255,255,.03));pointer-events:none;
}
.mission-strip-title{display:flex;align-items:center;gap:12px;min-width:0}
.mission-strip-title strong{display:block;font-size:15px;letter-spacing:.9px}.mission-strip-title small{color:var(--muted);display:block;margin-top:2px}
.mission-dot{width:12px;height:12px;border-radius:999px;background:var(--green);box-shadow:0 0 14px rgba(127,226,172,.7)}
.strip-progress{display:flex;align-items:center;gap:10px;justify-content:center;min-width:0}
.strip-progress>span{font-size:12px;letter-spacing:1px;color:var(--muted);white-space:nowrap}
.mini-progress{flex:1;min-width:120px;height:9px}.mini-progress div{background:linear-gradient(90deg,var(--cyan),var(--green))}
#globalProgressLabel{font-size:18px}
.strip-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.time-count{padding:10px 12px;border-radius:999px;background:rgba(9,14,19,.7);border:1px solid rgba(121,146,162,.22);font-weight:900;letter-spacing:.6px}

.game-layout{flex:1;min-height:0;display:grid;grid-template-columns:320px minmax(0,1fr) 320px;gap:14px;overflow:hidden}
.sidebar,.board-column{min-height:0;display:flex;flex-direction:column;gap:14px}
.panel{
  position:relative;border-radius:5px;padding:15px;display:flex;flex-direction:column;gap:12px;min-height:0;overflow:hidden;
}
.panel-kicker{margin:0;color:#ffcdbd;font-size:11px;font-weight:900;letter-spacing:2.1px;text-transform:uppercase}
.panel-title-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.panel-title-row span{font-size:12px;color:var(--muted);white-space:nowrap}
.slim-panel{margin-top:auto}
.sidebar .panel:first-child{min-height:240px}
.log-panel{flex:1}

.active-photo{display:grid;grid-template-columns:74px 1fr;gap:14px;align-items:center}
.active-photo img{width:74px;height:74px;border-radius:5px;object-fit:cover;border:1px solid rgba(116,144,162,.22)}
.active-photo strong{display:block;font-size:20px;margin-bottom:4px}
.active-photo small{display:block;color:#d8e4ea;font-size:14px}
.active-role{margin-top:6px;color:#ffcbb8;font-size:11px;letter-spacing:1.2px;font-weight:800}
.ap-summary{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13px;color:var(--muted)}
.ap-summary strong{font-size:18px;color:#fff}
.ap-pips{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.ap-pips span{height:10px;border-radius:999px;background:#0d141a;border:1px solid rgba(81,103,121,.35)}
.ap-pips span.filled{background:linear-gradient(90deg,var(--cyan),var(--cyan-2));border-color:rgba(104,219,225,.55);box-shadow:0 0 12px rgba(104,219,225,.2)}
.abilities{display:grid;gap:10px;overflow:auto;padding-right:4px}
.ability-item{display:grid;grid-template-columns:minmax(0,1fr) 24px;gap:6px 10px;align-items:center;font-size:13px;color:var(--muted)}
.ability-item b{justify-self:end;color:#fff}.ability-track{grid-column:1/-1}
.ability-track div{background:linear-gradient(90deg,#f2c469,var(--orange-2))}

.map-topline{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:0 4px;color:var(--muted);font-size:12px;letter-spacing:1.2px;text-transform:uppercase
}
.map-topline > div{display:flex;align-items:center;gap:8px}.live-dot{width:9px;height:9px;border-radius:999px;background:var(--cyan);box-shadow:0 0 12px rgba(104,219,225,.6)}
#mapStatus{color:#e6edf2;text-transform:none;letter-spacing:0;font-size:13px;text-align:right}
.canvas-frame{
  position:relative;border-radius:5px;padding:48px 12px 58px;display:flex;align-items:center;justify-content:center;min-height:0;flex:1;overflow:hidden;
  background:
    radial-gradient(circle at 18% 18%, rgba(68,132,167,.18), transparent 24%),
    radial-gradient(circle at 82% 78%, rgba(64,140,116,.14), transparent 26%),
    linear-gradient(180deg, rgba(16,24,31,.96), rgba(11,17,22,.98));
}
#mapCanvas{
  width:100%;max-width:100%;height:auto;aspect-ratio:1100 / 640;border-radius:5px;display:block;
  background:#101921;border:1px solid rgba(94,120,138,.2);box-shadow:0 20px 44px rgba(0,0,0,.26);
}
.map-zoom-controls{
  position:absolute;top:12px;right:12px;display:flex;gap:8px;z-index:2
}
.map-zoom-controls button{
  min-width:44px;height:40px;border-radius:5px;border:1px solid rgba(121,146,162,.24);
  background:linear-gradient(180deg,rgba(23,35,46,.92),rgba(13,20,27,.95));color:#fff;font-weight:800
}
.canvas-key{
  position:absolute;left:12px;right:12px;bottom:12px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:11px 13px;border-radius:5px;background:rgba(9,14,19,.78);border:1px solid rgba(121,146,162,.18);color:var(--muted);font-size:12px
}
.canvas-key span{display:flex;align-items:center;gap:8px}
.canvas-key i{width:14px;height:14px;border-radius:4px;display:inline-block}
.key-move{background:rgba(104,219,225,.35);border:1px solid rgba(104,219,225,.75)}
.key-goal{background:rgba(240,190,106,.35);border:1px solid rgba(240,190,106,.75)}
.key-unit{background:rgba(223,43,11,.35);border:1px solid rgba(223,43,11,.7)}

.team-bar{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px
}
.team-member{
  border-radius:5px;padding:12px;display:grid;grid-template-columns:58px 1fr;gap:12px;align-items:center;text-align:left;
}
.team-member img{width:58px;height:58px;border-radius:5px;object-fit:cover;border:1px solid rgba(116,144,162,.2)}
.team-detail{min-width:0}.team-detail strong{display:block;font-size:15px;margin-bottom:4px}.team-detail small{display:block;color:var(--muted);margin-bottom:7px}
.unit-ap-bar div{background:linear-gradient(90deg,var(--green),var(--cyan))}
.team-member.selected{border-color:rgba(223,43,11,.5);box-shadow:0 18px 35px rgba(0,0,0,.26),0 0 0 1px rgba(223,43,11,.3) inset;background:linear-gradient(180deg, rgba(50,23,21,.96), rgba(25,20,23,.96))}

.task-list,.event-log{display:flex;flex-direction:column;gap:10px;overflow:auto;padding-right:4px;min-height:0}
.task-entry{
  text-align:left;border:1px solid rgba(121,146,162,.22);border-radius:5px;background:linear-gradient(180deg,#182430,#131c25);
  display:grid;grid-template-columns:44px 1fr;gap:12px;padding:12px;align-items:center
}
.task-entry:hover{border-color:rgba(104,219,225,.38)}
.task-entry.focused{border-color:rgba(223,43,11,.45);box-shadow:0 0 0 1px rgba(223,43,11,.18) inset}
.task-entry.done{border-color:rgba(127,226,172,.34)}
.task-entry.surprise{background:linear-gradient(180deg, rgba(56,29,24,.94), rgba(28,19,22,.97))}
.task-symbol{
  width:44px;height:44px;border-radius:5px;display:grid;place-items:center;font-weight:900;font-size:19px;
  background:#0d141a;border:1px solid rgba(121,146,162,.2)
}
.task-entry.done .task-symbol{background:rgba(25,66,51,.68);border-color:rgba(127,226,172,.34);color:#abffd2}
.task-entry.surprise .task-symbol{background:rgba(96,36,24,.48);border-color:rgba(255,116,76,.34);color:#ffd1c2}
.task-body{display:flex;flex-direction:column;gap:6px;min-width:0}
.task-body strong{font-size:14px}.task-body small{color:var(--muted);line-height:1.4}.task-progress div{background:linear-gradient(90deg,var(--green),#c0ffd5)}
.task-entry.surprise .task-progress div{background:linear-gradient(90deg,var(--orange-2),#ffc18f)}
.log-item{
  padding:11px 12px;border-radius:5px;background:#101922;border:1px solid rgba(121,146,162,.14);color:#dce6ec;font-size:13px;line-height:1.45
}
.log-item strong{display:block;margin-bottom:4px;color:#ffcbbd;font-size:11px;letter-spacing:1.1px}
.log-item.important{background:linear-gradient(180deg, rgba(43,72,57,.72), rgba(18,35,29,.9));border-color:rgba(127,226,172,.22)}

/* End */
.end-screen{display:grid;place-items:center;padding:26px}
.end-card{position:relative;max-width:680px;width:min(100%,680px);border-radius:5px;padding:32px;text-align:center;overflow:hidden}
.end-symbol{width:100px;height:100px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;font-size:44px;font-weight:900;background:linear-gradient(180deg,var(--green),var(--cyan));color:#05211d}
.end-card h1{margin:0 0 10px;font-size:38px}.end-card p{color:var(--muted);line-height:1.6}
.end-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:24px 0}.end-stats>div{padding:16px 12px;border-radius:5px;background:#0f171f;border:1px solid rgba(121,146,162,.16)}
.end-stats b{display:block;font-size:22px;margin-bottom:5px}.end-stats span{font-size:12px;color:var(--muted)}

.footer{
  margin:0 16px 12px;padding:12px 14px;border-radius:5px;display:flex;align-items:center;justify-content:space-between;gap:12px;
  color:var(--muted);font-size:11px;letter-spacing:1px;text-transform:uppercase
}

.help-dialog{
  width:min(680px,calc(100vw - 28px));
  padding:0;border-radius:5px;color:var(--text)
}
.help-dialog::backdrop{background:rgba(2,7,12,.72);backdrop-filter:blur(4px)}
.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px;border-bottom:1px solid rgba(121,146,162,.18)}
.dialog-head h2{margin:0;font-size:24px}.help-dialog p,.help-dialog ol{padding:0 20px}.help-dialog p{color:#dce6ec;line-height:1.6}.help-dialog ol{margin:0 0 14px 18px;color:#e7eef3;line-height:1.6}.help-dialog .button{margin:0 20px 20px}

.toast-holder{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:10px;z-index:1000;pointer-events:none}
.toast{max-width:360px;padding:12px 14px;border-radius:5px;background:rgba(10,16,22,.94);border:1px solid rgba(104,219,225,.25);box-shadow:var(--soft-shadow);font-weight:700;color:#fff}

/* Scrollbars only in dedicated containers */
.setup-screen::-webkit-scrollbar,.abilities::-webkit-scrollbar,.task-list::-webkit-scrollbar,.event-log::-webkit-scrollbar{width:10px}
.setup-screen::-webkit-scrollbar-thumb,.abilities::-webkit-scrollbar-thumb,.task-list::-webkit-scrollbar-thumb,.event-log::-webkit-scrollbar-thumb{background:#2b3b49;border-radius:999px;border:2px solid transparent;background-clip:padding-box}
.setup-screen::-webkit-scrollbar-track,.abilities::-webkit-scrollbar-track,.task-list::-webkit-scrollbar-track,.event-log::-webkit-scrollbar-track{background:transparent}

@media (max-width: 1500px){
  .roster{grid-template-columns:repeat(4,minmax(220px,1fr))}
  .game-layout{grid-template-columns:290px minmax(0,1fr) 290px}
}
@media (max-width: 1280px){
  .mission-strip{grid-template-columns:1fr;align-items:start}
  .strip-progress{justify-content:flex-start}
  .game-layout{grid-template-columns:260px minmax(0,1fr) 280px}
  .roster{grid-template-columns:repeat(3,minmax(220px,1fr))}
}
@media (max-width: 1120px){
  html,body{overflow:auto}
  .app-shell{height:auto;min-height:100dvh;overflow:visible}
  main{display:block;overflow:visible}
  .screen{min-height:auto}
  .setup-screen,.game-screen{overflow:visible}
  .hero{grid-template-columns:1fr}
  .game-layout{grid-template-columns:1fr}
  .sidebar,.board-column{min-height:auto}
  .canvas-frame{min-height:unset}
  .team-bar{grid-template-columns:1fr}
  .end-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer{flex-direction:column;align-items:flex-start}
}
@media (max-width: 860px){
  .topbar{height:auto;flex-wrap:wrap;padding:14px 16px}
  .topbar-right{width:100%;justify-content:flex-end;flex-wrap:wrap}
  .setup-screen{padding:14px}
  .mission-strip{padding:14px}
  .roster{grid-template-columns:repeat(2,minmax(0,1fr))}
  .setup-heading,.setup-footer{flex-direction:column;align-items:flex-start}
}
@media (max-width: 580px){
  .roster{grid-template-columns:1fr}
  .hero-copy,.hero-map-art,.panel,.mission-strip,.setup-heading,.setup-footer,.footer,.end-card{padding-inline:14px}
  .canvas-key{font-size:11px}
  .end-stats{grid-template-columns:1fr}
}