:root{
  --bg:#071016;
  --panel:#0d1b23;
  --panel-2:#112630;
  --line:#24404b;
  --line-soft:#17313b;
  --text:#e8f4f5;
  --muted:#78939b;
  --cyan:#24e0c2;
  --cyan-soft:#24e0c233;
  --gold:#ffc85a;
  --red:#ff566b;
  --green:#79e48e;
  --tile:#10242d;
}

*{box-sizing:border-box}

html{
  min-height:100%;
  background:var(--bg);
}

body{
  min-height:100vh;
  margin:0;
  color:var(--text);
  background:
    radial-gradient(circle at 12% -8%,#163c48 0,transparent 35%),
    radial-gradient(circle at 88% 10%,#193047 0,transparent 31%),
    linear-gradient(180deg,#08141b,#050b0f 68%);
  font-family:Inter,Manrope,"Segoe UI",Arial,sans-serif;
  overscroll-behavior:none;
}

button{font:inherit}

button:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
}

.app{
  width:min(100%,1180px);
  margin:auto;
  padding:20px 22px 44px;
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:25px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  padding:0;
  border:0;
  color:inherit;
  background:none;
  text-align:left;
  cursor:pointer;
}

.brand-mark{
  position:relative;
  display:block;
  width:42px;
  height:42px;
  border:1px solid #3b6570;
  border-radius:10px;
  background:linear-gradient(145deg,#12323b,#09171d);
  box-shadow:inset 0 0 0 4px #061016,0 8px 25px #0008;
}

.brand-mark i{
  position:absolute;
  left:9px;
  right:9px;
  height:2px;
  background:var(--cyan);
  box-shadow:0 0 8px var(--cyan);
  transform-origin:left;
}

.brand-mark i:nth-child(1){top:12px;transform:rotate(17deg)}
.brand-mark i:nth-child(2){top:20px;transform:rotate(-22deg)}
.brand-mark i:nth-child(3){top:28px;transform:rotate(11deg)}

.brand b{
  display:block;
  font-size:14px;
  line-height:1;
  letter-spacing:2.2px;
}

.brand small{
  display:block;
  margin-top:6px;
  color:var(--muted);
  font-size:7px;
  font-weight:800;
  letter-spacing:1.1px;
}

.top-actions{
  display:flex;
  align-items:center;
  gap:8px;
}

.level-chip,
.icon-button{
  min-height:36px;
  padding:8px 11px;
  border:1px solid var(--line);
  color:var(--muted);
  background:#0a171eaa;
  font-size:7px;
  font-weight:900;
  letter-spacing:1px;
}

.level-chip b{color:var(--cyan);font-size:9px}

.icon-button{cursor:pointer}
.icon-button.off{color:#4d646b;text-decoration:line-through}

.mission-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:14px;
}

.mission-head p,
.dialog-kicker{
  margin:0 0 6px;
  color:var(--cyan);
  font-size:8px;
  font-weight:900;
  letter-spacing:1.45px;
}

.mission-head h1{
  margin:0;
  font:500 clamp(28px,5vw,48px)/1.02 Georgia,"Times New Roman",serif;
  letter-spacing:-1.4px;
}

.map-button{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 13px;
  border:1px solid var(--line);
  color:#b9d0d4;
  background:#0d1d24;
  font-size:8px;
  font-weight:900;
  letter-spacing:1px;
  cursor:pointer;
}

.map-button span{color:var(--cyan);font-size:15px}

.game-shell{
  display:grid;
  grid-template-columns:minmax(0,1fr) 310px;
  gap:15px;
  align-items:start;
}

.board-column,
.control-panel{
  min-width:0;
}

.brief{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:48px;
  padding:10px 13px;
  border:1px solid var(--line);
  border-bottom:0;
  background:linear-gradient(90deg,#102933,#0b1a21);
}

.brief-pulse{
  flex:0 0 8px;
  height:8px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 0 5px #24e0c21c,0 0 14px var(--cyan);
  animation:pulse 1.8s infinite;
}

.brief b{
  flex:0 0 auto;
  color:#d9f4f2;
  font-size:8px;
  letter-spacing:1px;
}

.brief p{
  margin:0;
  color:#8cabb1;
  font-size:9px;
  font-weight:650;
  line-height:1.35;
}

.board-wrap{
  --cols:7;
  --rows:7;
  position:relative;
  width:100%;
  aspect-ratio:var(--cols)/var(--rows);
  overflow:hidden;
  border:1px solid #31525d;
  background:
    linear-gradient(90deg,#0d1d24 1px,transparent 1px),
    linear-gradient(#0d1d24 1px,transparent 1px),
    #071116;
  background-size:22px 22px;
  box-shadow:0 26px 70px #0008,inset 0 0 55px #02080b;
  touch-action:none;
  user-select:none;
}

.board-wrap:before{
  content:'';
  position:absolute;
  z-index:1;
  inset:0;
  background:linear-gradient(115deg,transparent 0 48%,#24e0c207 48.2% 48.6%,transparent 48.8%);
  pointer-events:none;
}

.turn-badge{
  position:absolute;
  z-index:9;
  top:8px;
  right:8px;
  padding:6px 8px;
  border:1px solid #31515a;
  color:#76939b;
  background:#061116dc;
  font-size:7px;
  font-weight:900;
  letter-spacing:1px;
  pointer-events:none;
}

.turn-badge b{color:var(--cyan)}

.board{
  position:absolute;
  z-index:2;
  inset:0;
  display:grid;
  grid-template-columns:repeat(var(--cols),1fr);
  grid-template-rows:repeat(var(--rows),1fr);
  gap:2px;
  padding:10px;
}

.tile{
  position:relative;
  display:grid;
  place-items:center;
  min-width:0;
  border:1px solid #193640;
  border-radius:5px;
  color:#526d75;
  background:
    radial-gradient(circle at 50% 50%,#17313a 0 1px,transparent 1.5px),
    linear-gradient(145deg,#10242c,#0c1c23);
  overflow:hidden;
}

.tile:after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,#ffffff05,transparent 45%);
  pointer-events:none;
}

.tile.wall{
  border-color:#101b20;
  background:
    repeating-linear-gradient(45deg,#0b1419 0 4px,#0e1b21 4px 8px);
  box-shadow:inset 0 0 0 1px #050a0d;
}

.tile.wall:before{
  content:'';
  position:absolute;
  inset:18%;
  border:1px solid #172a31;
}

.tile.route-tile{
  border-color:#24e0c24a;
  background:#103139;
}

.tile.patrol:before{
  content:'';
  position:absolute;
  z-index:1;
  width:5px;
  height:5px;
  border:1px solid #ff566b77;
  border-radius:50%;
  background:#ff566b22;
}

.tile.route-end{
  box-shadow:inset 0 0 0 2px #24e0c266;
}

.tile.danger{
  border-color:#7e3541;
  background:
    repeating-linear-gradient(135deg,#391d26 0 6px,#271820 6px 12px);
  animation:dangerPulse 1.2s infinite;
}

.tile.failed{
  border-color:var(--red);
  box-shadow:inset 0 0 0 2px var(--red),0 0 18px #ff566b88;
}

.tile .tile-label{
  position:absolute;
  left:4px;
  bottom:3px;
  color:#4f6870;
  font-size:5px;
  font-weight:900;
}

.special{
  position:relative;
  z-index:3;
  display:grid;
  place-items:center;
}

.vault{
  width:34%;
  aspect-ratio:1;
  color:var(--gold);
  border:2px solid var(--gold);
  transform:rotate(45deg);
  filter:drop-shadow(0 0 7px #ffc85a77);
}

.vault:after{
  content:'';
  width:32%;
  height:32%;
  border:1px solid var(--gold);
}

.tile.collected .vault{
  opacity:.22;
  filter:none;
}

.exit{
  width:42%;
  height:58%;
  border:2px solid var(--green);
  border-bottom:0;
  box-shadow:0 0 10px #79e48e44;
}

.exit:before{
  content:'';
  width:38%;
  height:2px;
  background:var(--green);
  box-shadow:7px 0 0 -1px var(--green);
}

.key{
  width:45%;
  height:2px;
  background:var(--gold);
  transform:rotate(-25deg);
  box-shadow:0 0 8px #ffc85a77;
}

.key:before{
  content:'';
  position:absolute;
  right:-3px;
  width:8px;
  height:8px;
  border:2px solid var(--gold);
  border-radius:50%;
}

.key:after{
  content:'';
  position:absolute;
  left:1px;
  width:2px;
  height:6px;
  background:var(--gold);
  box-shadow:5px 0 var(--gold);
}

.door{
  width:56%;
  height:70%;
  border:2px solid #a87d43;
  background:linear-gradient(90deg,#322719,#18160f);
  box-shadow:inset 5px 0 #ffffff08;
}

.door:after{
  content:'';
  width:3px;
  height:3px;
  border-radius:50%;
  background:var(--gold);
}

.tile.open .door{
  opacity:.35;
  transform:perspective(30px) rotateY(48deg);
  transform-origin:left;
}

.power{
  width:46%;
  aspect-ratio:1;
  border:2px solid var(--cyan);
  border-radius:50%;
  color:var(--cyan);
  box-shadow:0 0 10px #24e0c255;
}

.power:before{
  content:'';
  width:2px;
  height:45%;
  background:var(--cyan);
  transform:translateY(-24%);
}

.tile.collected .power,
.tile.collected .key{
  opacity:.25;
  filter:none;
}

.route-layer,
.actor-layer{
  position:absolute;
  z-index:5;
  inset:10px;
  width:calc(100% - 20px);
  height:calc(100% - 20px);
  overflow:visible;
  pointer-events:none;
}

.route-layer{
  z-index:4;
}

.route-layer polyline{
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}

#route-shadow{
  stroke:#011014c9;
  stroke-width:9;
}

#route-line{
  stroke:var(--cyan);
  stroke-width:4;
  filter:drop-shadow(0 0 5px #24e0c2aa);
}

.route-layer.failed #route-line{stroke:var(--red);filter:drop-shadow(0 0 5px #ff566baa)}

.actor{
  position:absolute;
  display:grid;
  place-items:center;
  width:calc(100% / var(--cols));
  height:calc(100% / var(--rows));
  left:calc(var(--c) * 100% / var(--cols));
  top:calc(var(--r) * 100% / var(--rows));
  transition:left .2s ease,top .2s ease,transform .18s ease;
}

.actor.player:before{
  content:'';
  width:34%;
  aspect-ratio:1;
  border:3px solid #051316;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 0 3px #24e0c244,0 0 16px #24e0c2bb;
}

.actor.player:after{
  content:'';
  position:absolute;
  width:9%;
  height:24%;
  border-radius:3px;
  background:#e9fffb;
  transform:translateY(-1px);
}

.actor.guard{
  transform:rotate(var(--rotation));
}

.actor.guard:before{
  content:'';
  width:42%;
  aspect-ratio:1;
  border:2px solid #ff9aa7;
  border-radius:50% 50% 42% 42%;
  background:#9f2f42;
  box-shadow:0 0 0 3px #ff566b22,0 0 13px #ff566b88;
}

.actor.guard:after{
  content:'';
  position:absolute;
  width:24%;
  height:8%;
  border-radius:10px;
  background:#13090c;
  transform:translateY(-2px);
  box-shadow:0 -7px 0 -2px #ffb3bd;
}

.actor.camera:before{
  content:'';
  width:44%;
  height:27%;
  border:2px solid #ff8796;
  border-radius:4px;
  background:#5d2330;
  box-shadow:0 0 10px #ff566b66;
}

.actor.camera{
  transform:rotate(var(--rotation));
}

.actor.camera:after{
  content:'';
  position:absolute;
  width:12%;
  aspect-ratio:1;
  border-radius:50%;
  background:var(--red);
  transform:translateX(5px);
}

.actor.camera.off{
  opacity:.35;
  filter:grayscale(1);
}

.actor.camera.powered-down{
  opacity:.16;
}

.board-flash{
  position:absolute;
  z-index:10;
  inset:0;
  background:#ff335044;
  opacity:0;
  pointer-events:none;
}

.board-flash.fail{animation:flashFail .55s ease}
.board-flash.win{background:#24e0c233;animation:flashWin .8s ease}
.board-wrap.shake{animation:shake .45s ease}

.legend{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  min-height:36px;
  padding:9px 12px;
  border:1px solid var(--line);
  border-top:0;
  color:#68858d;
  background:#09171d;
  font-size:6px;
  font-weight:900;
  letter-spacing:.8px;
}

.legend span{display:flex;align-items:center;gap:5px}
.legend i{display:grid;place-items:center;font-style:normal}
.legend-player{width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 6px var(--cyan)}
.legend-vault{color:var(--gold);font-size:10px}
.legend-exit{width:8px;height:10px;border:1px solid var(--green);border-bottom:0}
.legend-guard{width:8px;height:8px;border-radius:50%;background:var(--red)}
.legend-camera{width:10px;height:6px;border:1px solid var(--red)}
.legend-key{width:10px;height:2px;background:var(--gold)}

.control-panel{
  display:grid;
  gap:9px;
}

.objective-card{
  padding:16px;
  border:1px solid var(--line);
  background:linear-gradient(145deg,#10232b,#0b181e);
}

.objective-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
}

.objective-row span{
  color:#718c94;
  font-size:7px;
  font-weight:900;
  letter-spacing:1px;
}

.objective-row b{
  color:#dff5f3;
  font-size:11px;
}

.objective-row b i{font-style:normal}

.meter{
  height:5px;
  margin:3px 0 15px;
  overflow:hidden;
  border-radius:4px;
  background:#061116;
}

.meter i{
  display:block;
  width:0;
  height:100%;
  background:linear-gradient(90deg,var(--cyan),#76eedb);
  transition:width .2s;
}

.meter.warning i{background:linear-gradient(90deg,var(--gold),#ff875a)}
.meter.danger i{background:var(--red)}

.stars-preview{
  display:flex;
  justify-content:center;
  gap:12px;
  color:#2d4650;
  font-size:19px;
}

.stars-preview i{
  font-style:normal;
  transition:.18s;
}

.stars-preview i.active{
  color:var(--gold);
  filter:drop-shadow(0 0 5px #ffc85a77);
}

.plan-status{
  display:flex;
  align-items:center;
  gap:11px;
  min-height:65px;
  padding:12px 13px;
  border:1px solid var(--line);
  background:#0b191f;
}

.plan-status>span{
  flex:0 0 10px;
  height:10px;
  border:2px solid #526a71;
  border-radius:50%;
}

.plan-status p{
  display:grid;
  gap:4px;
  margin:0;
}

.plan-status b{
  color:#9eb1b6;
  font-size:9px;
}

.plan-status small{
  color:#5f7980;
  font-size:7px;
  line-height:1.35;
}

.plan-status.ready{
  border-color:#277867;
  background:#0d2828;
}

.plan-status.ready>span{
  border-color:var(--cyan);
  background:var(--cyan);
  box-shadow:0 0 9px var(--cyan);
}

.plan-status.ready b{color:#c8f8ef}

.tools{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:7px;
}

.tools button{
  display:grid;
  justify-items:center;
  gap:3px;
  min-width:0;
  min-height:74px;
  padding:9px 4px;
  border:1px solid var(--line);
  color:#9fb4b9;
  background:#0c1b22;
  cursor:pointer;
}

.tools button:disabled{opacity:.28;cursor:not-allowed}
.tools button:hover:not(:disabled){border-color:#3f6974;background:#11262f}
.tools span{color:var(--cyan);font-size:17px;line-height:1}
.tools b{font-size:7px;letter-spacing:.7px}
.tools small{color:#587078;font-size:6px}

.execute{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  min-height:58px;
  padding:0 18px;
  border:1px solid #3ff2d5;
  color:#061413;
  background:linear-gradient(135deg,#24e0c2,#8ff4e3);
  box-shadow:0 12px 32px #24e0c22b;
  font-size:10px;
  font-weight:1000;
  letter-spacing:1.2px;
  cursor:pointer;
}

.execute i{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:50%;
  color:var(--cyan);
  background:#06211e;
  font-size:10px;
  font-style:normal;
}

.execute:disabled{
  border-color:#2a3d43;
  color:#536a70;
  background:#122128;
  box-shadow:none;
  cursor:not-allowed;
}

.execute:disabled i{color:#536a70;background:#09151a}

.micro-tip{
  margin:1px 4px 0;
  color:#526b72;
  font-size:7px;
  line-height:1.45;
  text-align:center;
}

dialog{
  width:min(calc(100% - 24px),540px);
  max-height:min(90vh,760px);
  margin:auto;
  padding:0;
  overflow:auto;
  border:1px solid #345963;
  border-radius:12px;
  color:var(--text);
  background:linear-gradient(145deg,#10242c,#08151b);
  box-shadow:0 40px 100px #000d;
}

dialog::backdrop{
  background:#02070beb;
  backdrop-filter:blur(5px);
}

.result-dialog>div{
  padding:27px;
}

.result-icon{
  display:grid;
  place-items:center;
  width:56px;
  height:56px;
  margin-bottom:16px;
  border:1px solid currentColor;
  border-radius:50%;
  font-size:21px;
}

.result-icon.win{
  color:var(--cyan);
  background:#24e0c216;
  box-shadow:0 0 28px #24e0c233;
}

.result-icon.fail{
  color:var(--red);
  background:#ff566b12;
}

.result-dialog h2,
.level-dialog h2{
  margin:6px 0 11px;
  font:500 31px/1.05 Georgia,"Times New Roman",serif;
}

.result-dialog p{
  margin:0 0 17px;
  color:#8da5ab;
  font-size:10px;
  line-height:1.6;
}

.result-stars{
  display:flex;
  gap:13px;
  margin:20px 0;
  color:#314852;
  font-size:31px;
}

.result-stars i{font-style:normal}
.result-stars i.active{color:var(--gold);filter:drop-shadow(0 0 7px #ffc85a77)}

.result-stats{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px;
  margin-bottom:17px;
}

.result-stats span{
  display:grid;
  gap:4px;
  padding:11px;
  border:1px solid var(--line);
  color:#6c858c;
  background:#09171d;
  font-size:7px;
  font-weight:900;
}

.result-stats b{color:#d8ecee;font-size:13px}

.dialog-actions{
  display:grid;
  grid-template-columns:1fr 1.35fr;
  gap:8px;
}

.dialog-actions button{
  min-height:48px;
  padding:10px;
  border:1px solid var(--line);
  color:#a9bec2;
  background:#10232b;
  font-size:8px;
  font-weight:900;
  letter-spacing:.7px;
  cursor:pointer;
}

.dialog-actions .primary{
  border-color:var(--cyan);
  color:#051513;
  background:var(--cyan);
}

.level-dialog{
  position:relative;
  width:min(calc(100% - 24px),640px);
  padding:25px;
}

.dialog-close{
  position:absolute;
  top:10px;
  right:12px;
  width:34px;
  height:34px;
  border:0;
  color:#8ca2a8;
  background:none;
  font-size:24px;
  cursor:pointer;
}

.campaign-progress{
  height:5px;
  margin-top:18px;
  overflow:hidden;
  background:#061116;
}

.campaign-progress i{
  display:block;
  width:0;
  height:100%;
  background:linear-gradient(90deg,var(--cyan),var(--gold));
}

.campaign-copy{
  margin:8px 0 17px;
  color:#708991;
  font-size:8px;
}

.level-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}

.level-card{
  position:relative;
  display:grid;
  align-content:space-between;
  gap:15px;
  min-height:103px;
  padding:12px;
  border:1px solid var(--line);
  color:#d1e4e6;
  background:#0b1a21;
  text-align:left;
  cursor:pointer;
}

.level-card:hover:not(:disabled){border-color:#4c7881;background:#10262e}
.level-card.current{border-color:var(--cyan);box-shadow:inset 0 0 0 1px #24e0c244}
.level-card:disabled{opacity:.35;cursor:not-allowed}

.level-card>i{
  color:var(--cyan);
  font:900 9px monospace;
  font-style:normal;
}

.level-card span{display:grid;gap:5px}
.level-card b{font-size:9px}
.level-card small{color:#5e7880;font-size:6px}
.level-card em{position:absolute;right:9px;top:9px;color:var(--gold);font-size:8px;font-style:normal;letter-spacing:1px}

.toast{
  position:fixed;
  z-index:40;
  left:50%;
  bottom:22px;
  width:min(calc(100% - 24px),480px);
  padding:12px 15px;
  border:1px solid #3f6670;
  border-radius:8px;
  color:#d9ecee;
  background:#0b1d24f2;
  box-shadow:0 20px 55px #000b;
  transform:translate(-50%,16px);
  font-size:9px;
  font-weight:800;
  line-height:1.4;
  text-align:center;
  opacity:0;
  pointer-events:none;
  transition:.2s;
}

.toast.show{opacity:1;transform:translate(-50%,0)}

@keyframes pulse{
  50%{box-shadow:0 0 0 9px #24e0c20b,0 0 18px var(--cyan)}
}

@keyframes dangerPulse{
  50%{filter:brightness(1.18)}
}

@keyframes flashFail{
  0%,100%{opacity:0}
  30%{opacity:1}
}

@keyframes flashWin{
  0%,100%{opacity:0}
  35%{opacity:1}
}

@keyframes shake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-5px)}
  50%{transform:translateX(5px)}
  75%{transform:translateX(-3px)}
}

@media(max-width:850px){
  .app{padding:14px 12px 34px}
  .game-shell{grid-template-columns:1fr}
  .control-panel{grid-template-columns:1fr 1fr}
  .objective-card,.plan-status{min-height:126px}
  .tools{grid-column:1/-1}
  .execute{grid-column:1/-1}
  .micro-tip{grid-column:1/-1}
}

@media(max-width:560px){
  .app{padding:11px 8px 28px}
  .topbar{margin-bottom:18px}
  .brand-mark{width:37px;height:37px}
  .brand small{display:none}
  .brand b{font-size:11px}
  .level-chip{display:none}
  .mission-head{align-items:center;margin-bottom:10px}
  .mission-head h1{font-size:30px}
  .mission-head p{font-size:7px}
  .map-button{padding:8px 10px}
  .brief{display:grid;grid-template-columns:auto 1fr;gap:3px 9px;padding:9px 10px}
  .brief-pulse{grid-row:1/3}
  .brief b{font-size:7px}
  .brief p{font-size:8px}
  .board{padding:6px;gap:1px}
  .route-layer,.actor-layer{inset:6px;width:calc(100% - 12px);height:calc(100% - 12px)}
  .tile{border-radius:3px}
  .turn-badge{top:5px;right:5px}
  .legend{padding:8px;gap:9px}
  .game-shell{gap:9px}
  .control-panel{grid-template-columns:1fr 1fr;gap:7px}
  .objective-card,.plan-status{min-height:112px;padding:12px}
  .plan-status{align-items:flex-start}
  .tools{gap:5px}
  .tools button{min-height:63px;padding:7px 2px}
  .tools span{font-size:15px}
  .execute{min-height:54px}
  .micro-tip{font-size:6px}
  .level-dialog{padding:21px 15px}
  .level-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .result-dialog>div{padding:22px}
}

@media(max-height:700px) and (orientation:landscape){
  .app{width:min(100%,980px);padding-top:8px}
  .topbar{margin-bottom:8px}
  .mission-head{margin-bottom:7px}
  .mission-head h1{font-size:27px}
  .game-shell{grid-template-columns:minmax(0,1fr) 290px}
  .brief{min-height:40px}
  .board-wrap{max-height:70vh;width:auto;margin:auto}
}

@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}