:root{
  --bg:#090b0e;
  --ink:#f4ead2;
  --red:#d83b2d;
  --red-dark:#711d18;
  --blue:#2376c9;
  --blue-dark:#102f59;
  --gold:#f0b939;
  --street:#2c3035;
  --street-light:#424851;
  --panel:#11151b;
  --paper:#ecdab5;
  --green:#4ade80;
  --purple:#c7a7ff;
}

*{box-sizing:border-box}

body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(circle at top left, rgba(216,59,45,.18), transparent 35%),
    radial-gradient(circle at top right, rgba(35,118,201,.16), transparent 32%),
    linear-gradient(135deg,#08090b,#11151b 45%,#050506);
  color:var(--ink);
  font-family:Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  letter-spacing:.02em;
}

button{font:inherit;cursor:pointer;border:0}

.page-shell{
  width:min(1500px,100%);
  margin:0 auto;
  padding:18px;
}

.hero{
  display:grid;
  grid-template-columns: 1.1fr 1fr auto;
  gap:18px;
  align-items:center;
  margin-bottom:16px;
}

.burst{
  min-height:132px;
  padding:18px 20px;
  background:
    radial-gradient(circle at 12% 25%, var(--gold) 0 12%, transparent 13%),
    linear-gradient(135deg,#d93b2e 0 48%, #0b0b0d 49%);
  clip-path:polygon(0 0,92% 0,100% 20%,92% 44%,100% 70%,84% 100%,0 100%);
  border:4px solid #000;
  box-shadow:0 8px 0 #000;
}

.burst h1{
  margin:0;
  text-transform:uppercase;
  font-size:clamp(52px,7vw,112px);
  line-height:.8;
  text-shadow:5px 5px 0 #000;
}

.burst h1 span{
  color:var(--red);
  -webkit-text-stroke:2px #000;
}

.burst p{
  margin:12px 0 0;
  display:inline-block;
  padding:8px 12px;
  transform:rotate(-4deg);
  background:var(--paper);
  color:#101014;
  text-transform:uppercase;
  box-shadow:4px 4px 0 #000;
}

.tagline{
  align-self:stretch;
  padding:24px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:
    linear-gradient(90deg, rgba(0,0,0,.7), rgba(0,0,0,.15)),
    repeating-linear-gradient(-15deg, rgba(255,255,255,.045) 0 2px, transparent 2px 6px);
  border-left:8px solid var(--gold);
}

.tagline strong{
  color:var(--red);
  text-transform:uppercase;
  font-size:clamp(28px,3vw,48px);
  line-height:.95;
  text-shadow:3px 3px 0 #000;
}

.tagline span{
  color:var(--ink);
  font-family:Arial, sans-serif;
  font-weight:800;
  margin-top:10px;
}

.top-actions{display:flex;gap:10px;flex-direction:column}

.top-actions button,
#closeHowTo,
.crew-picker-actions button{
  background:var(--paper);
  color:#111;
  padding:12px 16px;
  border:3px solid #000;
  box-shadow:4px 4px 0 #000;
  text-transform:uppercase;
}

.top-actions button:hover,
#closeHowTo:hover,
.crew-picker-actions button:hover{
  transform:translate(2px,2px);
  box-shadow:2px 2px 0 #000;
}

.crew-picker{
  margin-bottom:18px;
  padding:16px;
  background:
    linear-gradient(135deg, rgba(216,59,45,.16), rgba(35,118,201,.14)),
    var(--panel);
  border:4px solid #000;
  box-shadow:8px 8px 0 rgba(0,0,0,.65);
}

.crew-picker h2{
  margin:0;
  color:var(--gold);
  text-transform:uppercase;
  font-size:30px;
}

.crew-picker p{
  margin:6px 0 14px;
  font-family:Arial,sans-serif;
  letter-spacing:0;
  color:#e8d7b2;
}

.crew-picker-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.pick-box{
  padding:12px;
  background:#090d13;
  border:3px solid #000;
}

.pick-box h3{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin:0 0 10px;
  text-transform:uppercase;
}

.red-pick h3{color:var(--red)}
.blue-pick h3{color:var(--blue)}

.pick-count{
  display:inline-block;
  padding:3px 8px;
  background:var(--paper);
  color:#111;
  border:2px solid #000;
  font-size:14px;
  box-shadow:2px 2px 0 #000;
}

.crew-options{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  max-height:390px;
  overflow:auto;
  padding-right:4px;
}

.crew-option{
  position:relative;
  min-height:160px;
  padding:7px;
  border:3px solid #000;
  background:var(--paper);
  color:#111;
  box-shadow:3px 3px 0 #000;
  text-align:left;
  overflow:hidden;
}

.crew-option input{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
  z-index:5;
}

.option-art{
  width:100%;
  height:96px;
  object-fit:contain;
  background:#070809;
  border:2px solid #000;
  display:block;
  margin-bottom:5px;
}

.option-icon{
  position:absolute;
  left:10px;
  top:10px;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  background:#111;
  color:#fff;
  border:2px solid #000;
  font-size:20px;
  z-index:2;
}

.crew-option strong{
  display:block;
  text-transform:uppercase;
  font-size:16px;
}

.crew-option span{
  display:block;
  font-family:Arial,sans-serif;
  letter-spacing:0;
  font-size:11px;
}

.crew-option:has(input:checked){
  background:var(--gold);
  outline:4px solid #fff;
  outline-offset:-6px;
  transform:translate(2px,2px);
  box-shadow:1px 1px 0 #000;
}

.crew-picker-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}

.game-layout{
  display:grid;
  grid-template-columns:280px minmax(520px,1fr) 330px;
  gap:18px;
}

.panel{
  background:
    linear-gradient(180deg,rgba(255,255,255,.05),rgba(0,0,0,.1)),
    var(--panel);
  border:3px solid #000;
  box-shadow:8px 8px 0 rgba(0,0,0,.65);
  padding:14px;
}

.panel h2,.panel h3{
  margin:0 0 10px;
  text-transform:uppercase;
}

.panel h2{
  color:var(--gold);
  font-size:26px;
}

.panel p,.panel li,.job-cards span,.selected-card span,.roster-card span{
  font-family:Arial, sans-serif;
  letter-spacing:0;
  line-height:1.25;
}

.red-title{color:var(--red)}
.blue-title{color:var(--blue)}

.roster-list{
  display:grid;
  gap:8px;
  margin-bottom:16px;
}

.roster-card{
  display:grid;
  grid-template-columns:54px 44px 1fr;
  gap:8px;
  align-items:center;
  padding:7px;
  border:2px solid currentColor;
  background:#080a0d;
}

.roster-card.red{color:var(--red)}
.roster-card.blue{color:var(--blue)}

.roster-art{
  width:54px;
  height:54px;
  object-fit:contain;
  border:2px solid currentColor;
  background:#070809;
}

.roster-icon{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border:2px solid currentColor;
  background:#111;
  font-size:24px;
}

.roster-card strong{
  display:block;
  text-transform:uppercase;
  color:var(--ink);
  font-size:17px;
}

.roster-card span{
  display:block;
  color:#d6c7a7;
  font-size:12px;
}

.board-top{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  margin-bottom:10px;
  padding:12px 16px;
  background:#0e1218;
  border:3px solid #000;
  box-shadow:6px 6px 0 rgba(0,0,0,.65);
}

.board-top h2{
  margin:0;
  color:var(--gold);
  text-transform:uppercase;
}

.board-top p{
  margin:4px 0 0;
  font-family:Arial,sans-serif;
}

.score-strip{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.score-strip span{
  padding:8px 10px;
  border:2px solid #000;
  background:var(--paper);
  color:#111;
}

.board{
  aspect-ratio:1/1;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  grid-template-rows:repeat(6,1fr);
  gap:5px;
  padding:16px;
  position:relative;
  overflow:hidden;
  border:5px solid #000;
  box-shadow:12px 12px 0 rgba(0,0,0,.7);
  background:
    linear-gradient(90deg, transparent 48%, rgba(255,255,255,.11) 49% 51%, transparent 52%),
    linear-gradient(0deg, transparent 48%, rgba(255,255,255,.11) 49% 51%, transparent 52%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 2px, transparent 2px 10px),
    var(--street);
}

.board:before{
  content:"Lucky Louie's";
  position:absolute;
  left:18px;
  top:43%;
  transform:rotate(-7deg);
  color:#f3c56a;
  font-size:24px;
  text-shadow:3px 3px 0 #000;
  opacity:.35;
  pointer-events:none;
}

.board:after{
  content:"NO SNITCHES";
  position:absolute;
  right:25px;
  bottom:64px;
  color:#ef6a35;
  font-size:25px;
  transform:rotate(-8deg);
  text-shadow:3px 3px 0 #000;
  opacity:.45;
  pointer-events:none;
}

.cell{
  position:relative;
  min-width:0;
  border:2px solid rgba(255,255,255,.14);
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.08), transparent 38%),
    var(--street-light);
  display:grid;
  place-items:center;
  isolation:isolate;
}

.cell:nth-child(odd){
  background:
    radial-gradient(circle at 60% 20%, rgba(255,255,255,.06), transparent 36%),
    #252a30;
}

.cell.roadblock{
  background:repeating-linear-gradient(45deg,#f0b939 0 10px,#161616 10px 20px);
  box-shadow:inset 0 0 0 5px #000;
}

.cell.roadblock:before{
  content:"🚧";
  position:absolute;
  font-size:clamp(20px,3vw,38px);
  z-index:1;
  filter:drop-shadow(2px 2px 0 #000);
}

.cell.safehouse{
  background:
    radial-gradient(circle at center, rgba(255,255,255,.15), transparent 35%),
    linear-gradient(135deg,#1f7a4d,#0b2d1e);
  outline:3px solid #8df0ba;
  outline-offset:-8px;
}

.cell.safehouse:before{
  content:"⌂";
  position:absolute;
  color:#b9ffd8;
  font-size:clamp(24px,3vw,42px);
  text-shadow:3px 3px 0 #000;
  opacity:.9;
}

.cell.subway{
  background:
    radial-gradient(circle at center, rgba(255,255,255,.18), transparent 38%),
    linear-gradient(135deg,#51308c,#101032);
  outline:3px solid var(--purple);
  outline-offset:-8px;
}

.cell.subway:before{
  content:"Ⓜ";
  position:absolute;
  color:#e5d7ff;
  font-size:clamp(20px,3vw,36px);
  text-shadow:3px 3px 0 #000;
}

.cell.turf{
  outline:3px dashed var(--gold);
  outline-offset:-8px;
}

.cell.turf:after{
  content:"★";
  position:absolute;
  right:5px;
  bottom:2px;
  color:var(--gold);
  text-shadow:2px 2px 0 #000;
  font-size:20px;
}

.cell.highlight{
  cursor:pointer;
  box-shadow:inset 0 0 0 5px var(--green),0 0 18px rgba(74,222,128,.5);
}

.cell.capture{
  cursor:pointer;
  box-shadow:inset 0 0 0 5px #ff4040,0 0 18px rgba(255,64,64,.6);
}

.cell.subway-move{
  cursor:pointer;
  box-shadow:inset 0 0 0 5px var(--purple),0 0 18px rgba(199,167,255,.65);
}

.tile{
  width:90%;
  height:90%;
  border-radius:8px;
  border:3px solid #000;
  box-shadow:5px 5px 0 rgba(0,0,0,.75);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:0;
  text-align:center;
  position:relative;
  z-index:2;
  overflow:hidden;
  transition:transform .14s ease, filter .14s ease;
  user-select:none;
  background:#070809;
}

.tile:hover{
  transform:translateY(-3px) rotate(-1deg);
  filter:brightness(1.12);
}

.tile.selected{
  outline:4px solid var(--gold);
  outline-offset:3px;
}

.tile.safe{
  box-shadow:5px 5px 0 rgba(0,0,0,.75),0 0 0 4px #8df0ba;
}

.tile-art{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  background:#070809;
  z-index:0;
}

.tile:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(180deg, transparent 0 65%, rgba(0,0,0,.55) 84% 100%);
  pointer-events:none;
}

.tile .name,
.tile .side,
.fallback-face{
  position:relative;
  z-index:2;
}

.tile .name{
  width:100%;
  margin-top:auto;
  background:#08090b;
  border-top:2px solid rgba(255,255,255,.55);
  padding:2px 3px;
  text-transform:uppercase;
  font-size:clamp(9px,1vw,13px);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.tile .side{
  position:absolute;
  left:-8px;
  top:-8px;
  width:24px;
  height:24px;
  border-radius:50%;
  background:var(--gold);
  color:#111;
  border:2px solid #000;
  display:grid;
  place-items:center;
  font-size:13px;
}

.fallback-face{display:none}

.tile.missing-art{
  padding:5px;
}

.tile.missing-art.red{
  background:linear-gradient(135deg,var(--red),var(--red-dark));
}

.tile.missing-art.blue{
  background:linear-gradient(135deg,var(--blue),var(--blue-dark));
}

.tile.missing-art .fallback-face{
  display:block;
  margin:auto;
  font-size:32px;
}

.tile.missing-art:after{display:none}

.selected-card{
  border:3px solid #000;
  padding:12px;
  margin:14px 0;
  background:var(--paper);
  color:#111;
  box-shadow:5px 5px 0 #000;
}

.selected-card.empty{opacity:.75}

.selected-card strong{
  display:block;
  font-size:22px;
  text-transform:uppercase;
}

.selected-art-wrap{
  margin-bottom:10px;
  border:3px solid #000;
  box-shadow:4px 4px 0 #000;
  background:#070809;
}

.selected-art{
  width:100%;
  aspect-ratio:1/1;
  object-fit:contain;
  display:block;
}

.move-grid{
  margin-top:10px;
  display:grid;
  grid-template-columns:repeat(5,22px);
  grid-template-rows:repeat(5,22px);
  gap:3px;
}

.move-dot{
  border:1px solid rgba(0,0,0,.35);
  background:rgba(0,0,0,.08);
}

.move-dot.center{background:#111}
.move-dot.active{background:var(--red)}
.move-dot.slide{background:var(--blue)}
.move-dot.jump{background:var(--gold)}

.legend{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:9px;
}

.legend li{
  display:flex;
  align-items:center;
  gap:10px;
}

.legend-box{
  width:24px;
  min-width:24px;
  height:24px;
  display:inline-block;
  border:2px solid #000;
}

.legend-box.move{background:var(--green)}
.legend-box.capture{background:#ff4040}
.legend-box.roadblock{background:repeating-linear-gradient(45deg,#f0b939 0 5px,#111 5px 10px)}
.legend-box.safehouse{background:#1f7a4d}
.legend-box.subway{background:#51308c}
.legend-box.turf{background:transparent;border:3px dashed var(--gold)}

.flip-turn-btn{
  width:100%;
  margin:0 0 14px;
  padding:12px 14px;
  background:var(--gold);
  color:#111;
  border:3px solid #000;
  box-shadow:4px 4px 0 #000;
  text-transform:uppercase;
}

.flip-turn-btn:disabled{
  opacity:.45;
  cursor:not-allowed;
  filter:grayscale(.6);
}

.flip-turn-btn:not(:disabled):hover{
  transform:translate(2px,2px);
  box-shadow:2px 2px 0 #000;
}

.job-cards{
  display:grid;
  gap:10px;
}

.job-cards article{
  min-height:82px;
  padding:10px;
  background:var(--paper);
  color:#111;
  border:3px solid #000;
  box-shadow:4px 4px 0 #000;
  transform:rotate(-1deg);
}

.job-cards article:nth-child(2){transform:rotate(1deg)}

.job-cards strong{
  display:block;
  font-size:20px;
  text-transform:uppercase;
  color:#111;
}

.street-banner{
  margin-top:12px;
  padding:14px 18px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  background:var(--paper);
  color:#111;
  border:3px solid #000;
  box-shadow:6px 6px 0 #000;
  text-transform:uppercase;
}

.street-banner span{
  font-family:Arial,sans-serif;
  font-weight:900;
}

dialog{border:0;padding:0;background:transparent}
dialog::backdrop{background:rgba(0,0,0,.75)}

.modal-card{
  width:min(620px,calc(100vw - 32px));
  background:var(--paper);
  color:#111;
  border:5px solid #000;
  box-shadow:10px 10px 0 #000;
  padding:24px;
  position:relative;
}

.modal-card h2{margin-top:0;font-size:34px}

.modal-card p,.modal-card li{
  font-family:Arial,sans-serif;
  letter-spacing:0;
  line-height:1.35;
}

.close-btn{
  position:absolute;
  top:10px;
  right:10px;
  width:40px;
  height:40px;
}

.hidden{display:none !important}

.win-splash{
  position:fixed !important;
  inset:0 !important;
  display:none !important;
  place-items:center !important;
  background:rgba(0,0,0,.78) !important;
  z-index:2147483647 !important;
  padding:24px !important;
}

.win-splash.show{display:grid !important}

.win-burst{
  width:min(760px,92vw);
  min-height:320px;
  padding:30px 26px;
  display:grid;
  place-items:center;
  text-align:center;
  background:
    radial-gradient(circle at 15% 20%, #ffeb75 0 8%, transparent 9%),
    radial-gradient(circle at 82% 30%, #ffeb75 0 7%, transparent 8%),
    linear-gradient(135deg, #ffe073 0 25%, #ef5338 26% 68%, #240707 69%);
  clip-path:polygon(8% 0,22% 7%,33% 0,45% 9%,58% 1%,71% 10%,84% 0,90% 14%,100% 18%,93% 33%,100% 47%,90% 58%,99% 74%,87% 82%,92% 100%,75% 93%,61% 100%,46% 91%,32% 100%,18% 92%,8% 100%,9% 82%,0 70%,8% 56%,0 41%,9% 28%,1% 15%);
  border:7px solid #000;
  box-shadow:14px 14px 0 #000;
  transform:rotate(-2deg);
  animation:popWin .25s ease-out both;
}

.win-splash.blue .win-burst{
  background:
    radial-gradient(circle at 15% 20%, #ffeb75 0 8%, transparent 9%),
    radial-gradient(circle at 82% 30%, #ffeb75 0 7%, transparent 8%),
    linear-gradient(135deg, #fff0a0 0 25%, #2d82e0 26% 68%, #071325 69%);
}

@keyframes popWin{
  from{transform:scale(.78) rotate(-5deg); opacity:0}
  to{transform:scale(1) rotate(-2deg); opacity:1}
}

.win-splash-text{
  color:#fff8ea;
  -webkit-text-stroke:4px #000;
  text-shadow:8px 8px 0 #000;
  font-size:clamp(54px,10vw,126px);
  line-height:.9;
  text-transform:uppercase;
}

.win-splash-sub{
  margin-top:12px;
  background:var(--paper);
  color:#111;
  border:4px solid #000;
  box-shadow:6px 6px 0 #000;
  padding:12px 18px;
  font-family:Arial,sans-serif;
  font-weight:900;
  text-transform:uppercase;
  transform:rotate(2deg);
}

.close-splash-btn{
  margin-top:18px;
  padding:14px 20px;
  background:#111;
  color:#fff;
  border:4px solid #000;
  box-shadow:6px 6px 0 #000;
  text-transform:uppercase;
}

@media (max-width:1120px){
  .game-layout,.hero,.crew-picker-grid{grid-template-columns:1fr}
  .top-actions{flex-direction:row}
  .roster-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:760px){
  .crew-options{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-shell{padding:10px}
  .board{padding:8px;gap:3px}
  .tile{width:94%;height:94%}
  .tile .name{font-size:8px}
  .roster-list{grid-template-columns:1fr}
  .street-banner{flex-direction:column}
}

@media (max-width:520px){
  .crew-options{grid-template-columns:1fr}
}


/* V4 AUDIO CONTROLS */
.hero{
  grid-template-columns: 1.1fr 1fr auto minmax(230px,280px);
}

.audio-panel{
  align-self:stretch;
  padding:12px;
  background:#0e1218;
  border:3px solid #000;
  box-shadow:6px 6px 0 rgba(0,0,0,.65);
  display:grid;
  gap:8px;
}

.audio-buttons{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.audio-panel button{
  background:var(--paper);
  color:#111;
  padding:8px 10px;
  border:3px solid #000;
  box-shadow:3px 3px 0 #000;
  text-transform:uppercase;
  font-size:13px;
}

.audio-panel button.off{
  background:#1d2026;
  color:#aaa;
}

.audio-panel label{
  display:grid;
  grid-template-columns:64px 1fr;
  align-items:center;
  gap:8px;
  font-size:14px;
  color:var(--gold);
  text-transform:uppercase;
}

.audio-panel input[type="range"]{
  width:100%;
  accent-color:var(--gold);
}

@media (max-width:1120px){
  .hero{grid-template-columns:1fr}
}


/* V5 SINGLE PLAYER AI CONTROLS */
.mode-picker{
  margin-top:14px;
  padding:12px;
  background:#090d13;
  border:3px solid #000;
}

.mode-picker h3{
  margin:0 0 10px;
  color:var(--gold);
  text-transform:uppercase;
}

.mode-buttons{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.mode-buttons button{
  background:var(--paper);
  color:#111;
  padding:10px 14px;
  border:3px solid #000;
  box-shadow:4px 4px 0 #000;
  text-transform:uppercase;
}

.mode-buttons button.mode-active{
  background:var(--gold);
  outline:3px solid #fff;
  outline-offset:-6px;
}

.mode-picker p{
  margin:10px 0 0;
  font-family:Arial,sans-serif;
  letter-spacing:0;
  color:#e8d7b2;
}

.ai-thinking{
  animation:aiPulse .75s ease-in-out infinite alternate;
}

@keyframes aiPulse{
  from{filter:brightness(1)}
  to{filter:brightness(1.25)}
}


/* V6 START SCREEN FLOW */
.hidden{display:none !important}

.start-only-note{
  margin-top:10px;
  font-family:Arial,sans-serif;
  letter-spacing:0;
  color:#e8d7b2;
}


/* V7 TRUE START SCREEN / PLAY SCREEN FLOW */
.start-screen{
  display:block;
}

.start-screen.hidden{
  display:none !important;
}

.game-layout.hidden{
  display:none !important;
}

.game-layout{
  scroll-margin-top:18px;
}

.game-screen-top{
  grid-column:1 / -1;
  display:flex;
  justify-content:flex-end;
  margin-bottom:-6px;
}

.game-screen-top button{
  background:var(--paper);
  color:#111;
  padding:12px 16px;
  border:3px solid #000;
  box-shadow:4px 4px 0 #000;
  text-transform:uppercase;
}

.game-screen-top button:hover{
  transform:translate(2px,2px);
  box-shadow:2px 2px 0 #000;
}


/* V8 CLEAN TRUE SCREENS */
.screen.hidden,
#startScreen.hidden,
#playScreen.hidden{
  display:none !important;
}

#startScreen{
  display:block !important;
}

#startScreen.hidden{
  display:none !important;
}

#playScreen{
  display:block !important;
}

#playScreen.hidden{
  display:none !important;
}

#gameLayout{
  display:grid;
}

#playScreen.hidden #gameLayout{
  display:none !important;
}

.game-screen-top{
  display:flex;
  justify-content:flex-end;
  margin:0 0 12px;
}

.game-screen-top button{
  background:var(--paper);
  color:#111;
  padding:12px 16px;
  border:3px solid #000;
  box-shadow:4px 4px 0 #000;
  text-transform:uppercase;
}

.game-screen-top button:hover{
  transform:translate(2px,2px);
  box-shadow:2px 2px 0 #000;
}


/* MULTI-MAP SELECTOR */
.map-picker{
  margin-top:14px;
  padding:12px;
  background:#090d13;
  border:3px solid #000;
}

.map-picker h3{
  margin:0 0 10px;
  color:var(--gold);
  text-transform:uppercase;
}

.map-controls{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:end;
}

.map-select-label{
  display:grid;
  gap:5px;
  min-width:min(360px,100%);
  color:var(--paper);
  font-family:Arial,sans-serif;
  font-weight:900;
}

.map-select-label span{
  color:var(--gold);
  text-transform:uppercase;
  font-family:Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  letter-spacing:.04em;
}

#mapSelect{
  min-height:44px;
  padding:8px 10px;
  background:var(--paper);
  color:#111;
  border:3px solid #000;
  box-shadow:4px 4px 0 #000;
  font:inherit;
  text-transform:uppercase;
}

#randomMapBtn{
  background:var(--paper);
  color:#111;
  padding:12px 16px;
  border:3px solid #000;
  box-shadow:4px 4px 0 #000;
  text-transform:uppercase;
}

#randomMapBtn:hover{
  transform:translate(2px,2px);
  box-shadow:2px 2px 0 #000;
}

#mapHelp{
  margin:10px 0 0;
  font-family:Arial,sans-serif;
  letter-spacing:0;
  color:#e8d7b2;
}

.map-title{
  margin:3px 0 0;
  color:var(--paper);
  font-family:Arial,sans-serif;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.04em;
  opacity:.95;
}

.board:before{content:attr(data-label-left) !important;}
.board:after{content:attr(data-label-right) !important;}

.board.map-warehouse{background:
  linear-gradient(90deg, transparent 48%, rgba(255,255,255,.10) 49% 51%, transparent 52%),
  repeating-linear-gradient(45deg, rgba(240,185,57,.05) 0 3px, transparent 3px 11px),
  #2d2821;}
.board.map-docks{background:
  linear-gradient(90deg, transparent 48%, rgba(255,255,255,.11) 49% 51%, transparent 52%),
  radial-gradient(circle at 15% 80%, rgba(35,118,201,.18), transparent 34%),
  #26313b;}
.board.map-italy{background:
  linear-gradient(90deg, transparent 48%, rgba(255,255,255,.11) 49% 51%, transparent 52%),
  radial-gradient(circle at 85% 20%, rgba(216,59,45,.16), transparent 38%),
  #302729;}
.board.map-subway{background:
  linear-gradient(90deg, transparent 48%, rgba(255,255,255,.11) 49% 51%, transparent 52%),
  radial-gradient(circle at 50% 50%, rgba(199,167,255,.14), transparent 35%),
  #222535;}
.board.map-rooftop{background:
  linear-gradient(90deg, transparent 48%, rgba(255,255,255,.12) 49% 51%, transparent 52%),
  radial-gradient(circle at 40% 0%, rgba(255,255,255,.08), transparent 42%),
  #28313a;}
.board.map-market{background:
  linear-gradient(90deg, transparent 48%, rgba(255,255,255,.10) 49% 51%, transparent 52%),
  radial-gradient(circle at 20% 20%, rgba(216,59,45,.16), transparent 24%),
  radial-gradient(circle at 80% 75%, rgba(35,118,201,.18), transparent 28%),
  #211f2d;}


/* V3 BUSINESS MAPS + SPOKEN WORD */
.spoken-panel{
  margin-top:14px;
  padding:12px;
  background:#090d13;
  border:3px solid #000;
}

.spoken-panel h3{
  margin:0 0 10px;
  color:var(--gold);
  text-transform:uppercase;
}

.spoken-controls{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:8px;
}

.spoken-panel button,
.spoken-readers button{
  background:var(--paper);
  color:#111;
  padding:10px 12px;
  border:3px solid #000;
  box-shadow:4px 4px 0 #000;
  text-transform:uppercase;
}

.spoken-panel button.on{
  background:var(--gold);
  outline:3px solid #fff;
  outline-offset:-6px;
}

.spoken-panel label{
  display:grid;
  grid-template-columns:92px 1fr;
  align-items:center;
  gap:8px;
  color:var(--gold);
  text-transform:uppercase;
  font-size:13px;
  margin:8px 0;
}

.spoken-panel input[type="range"]{
  width:100%;
  accent-color:var(--gold);
}

.spoken-panel p{
  margin:8px 0 0;
  font-family:Arial,sans-serif;
  letter-spacing:0;
  color:#e8d7b2;
}

.board{
  grid-template-columns:repeat(var(--board-size, 8),1fr) !important;
  grid-template-rows:repeat(var(--board-size, 8),1fr) !important;
}

.board.size-10 .tile .name{
  font-size:8px;
}

.cell.business{
  outline:3px dashed var(--gold);
  outline-offset:-8px;
  background:
    radial-gradient(circle at center, rgba(240,185,57,.20), transparent 40%),
    linear-gradient(135deg,#4b3212,#1b1206);
}

.cell.business:after{
  content:attr(data-business-icon);
  position:absolute;
  right:3px;
  bottom:3px;
  z-index:1;
  color:#111;
  background:var(--gold);
  border:2px solid #000;
  box-shadow:2px 2px 0 #000;
  padding:1px 4px;
  font-size:clamp(8px,1vw,12px);
  line-height:1;
}

.cell.business.owner-red{
  outline-color:var(--red);
  box-shadow:inset 0 0 0 4px rgba(216,59,45,.55);
}

.cell.business.owner-blue{
  outline-color:var(--blue);
  box-shadow:inset 0 0 0 4px rgba(35,118,201,.55);
}

.cell.business.owner-red:before,
.cell.business.owner-blue:before{
  content:attr(data-owner);
  position:absolute;
  left:3px;
  top:3px;
  z-index:1;
  color:#fff;
  border:2px solid #000;
  box-shadow:2px 2px 0 #000;
  padding:1px 4px;
  font-size:10px;
  line-height:1;
}

.cell.business.owner-red:before{background:var(--red)}
.cell.business.owner-blue:before{background:var(--blue)}

.cell .coord{
  position:absolute;
  left:3px;
  bottom:3px;
  z-index:0;
  color:rgba(255,255,255,.46);
  font-family:Arial,sans-serif;
  font-size:9px;
  pointer-events:none;
}

.cell.business .coord{
  bottom:auto;
  top:22px;
}

.legend-box.business{
  background:var(--gold);
  border:3px dashed #000;
}

.spoken-readers{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}

.spoken-readers button:hover,
.spoken-panel button:hover{
  transform:translate(2px,2px);
  box-shadow:2px 2px 0 #000;
}

@media (max-width:680px){
  .board.size-10{
    gap:2px;
    padding:5px;
  }

  .board.size-10 .tile{
    width:98%;
    height:98%;
    border-width:2px;
  }

  .board.size-10 .tile .side{
    width:19px;
    height:19px;
    font-size:10px;
  }

  .board.size-10 .tile .name{
    display:none;
  }

  .cell .coord{
    display:none;
  }

  .cell.business:after{
    font-size:7px;
    padding:1px 2px;
  }
}


/* V4 DISTINCT CITY MAP DRESSING */
.board.map-warehouse{
  background:
    linear-gradient(90deg, transparent 48%, rgba(255,210,55,.14) 49% 51%, transparent 52%),
    repeating-linear-gradient(45deg, rgba(255,230,100,.07) 0 2px, transparent 2px 10px),
    linear-gradient(135deg,#2f3030,#1a1d1f);
}

.board.map-subway{
  background:
    radial-gradient(circle at 20% 20%, rgba(145,94,255,.16), transparent 30%),
    linear-gradient(90deg, transparent 48%, rgba(255,255,255,.12) 49% 51%, transparent 52%),
    repeating-linear-gradient(0deg, rgba(199,167,255,.06) 0 2px, transparent 2px 8px),
    #242b36;
}

.board.map-italy{
  background:
    radial-gradient(circle at 30% 35%, rgba(255,220,145,.10), transparent 32%),
    linear-gradient(90deg, transparent 48%, rgba(255,255,255,.10) 49% 51%, transparent 52%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.045) 0 2px, transparent 2px 8px),
    #3b3530;
}

.board.map-market{
  background:
    radial-gradient(circle at 75% 18%, rgba(255,50,60,.14), transparent 28%),
    radial-gradient(circle at 20% 82%, rgba(240,185,57,.12), transparent 32%),
    linear-gradient(90deg, transparent 48%, rgba(255,255,255,.12) 49% 51%, transparent 52%),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.04) 0 2px, transparent 2px 9px),
    #25272b;
}

.board.map-docks{
  background:
    radial-gradient(circle at 50% 0%, rgba(70,150,200,.13), transparent 34%),
    linear-gradient(90deg, transparent 48%, rgba(255,255,255,.11) 49% 51%, transparent 52%),
    repeating-linear-gradient(90deg, rgba(130,190,220,.05) 0 3px, transparent 3px 14px),
    #263039;
}

.cell.street-mark:before{
  pointer-events:none;
}

.cell.mark-zebra:before,
.cell.mark-crosswalk-us:before,
.cell.mark-paris-crossing:before{
  content:"";
  position:absolute;
  inset:17% 8%;
  z-index:0;
  opacity:.42;
  background:repeating-linear-gradient(90deg, #fff 0 7px, transparent 7px 14px);
  border:0;
  box-shadow:none;
}

.cell.mark-crosswalk-us:before{
  transform:rotate(90deg);
  opacity:.36;
}

.cell.mark-paris-crossing:before{
  opacity:.30;
  transform:rotate(-8deg);
}

.cell.mark-yellow-box:before{
  content:"";
  position:absolute;
  inset:12%;
  z-index:0;
  opacity:.38;
  background:
    linear-gradient(45deg, transparent 45%, #ffd94a 46% 54%, transparent 55%),
    linear-gradient(-45deg, transparent 45%, #ffd94a 46% 54%, transparent 55%);
  border:2px solid #ffd94a;
  box-shadow:none;
}

.cell.mark-bus-stop:before{
  content:"BUS\\A STOP";
  white-space:pre;
  position:absolute;
  inset:auto 6px 8px 6px;
  z-index:0;
  color:#ffd94a;
  font-size:clamp(10px,1.6vw,20px);
  line-height:.9;
  text-shadow:2px 2px 0 #000;
  opacity:.58;
  border:0;
  background:none;
  box-shadow:none;
}

.cell.mark-stop:before{
  content:"STOP";
  position:absolute;
  inset:auto 6px 8px 6px;
  z-index:0;
  color:#fff;
  background:#b83228;
  border:2px solid #000;
  box-shadow:2px 2px 0 #000;
  font-size:clamp(10px,1.6vw,18px);
  line-height:1;
  padding:2px 4px;
  opacity:.72;
  transform:rotate(-5deg);
}

.cell.mark-oneway:before{
  content:"ONE WAY →";
  position:absolute;
  left:6px;
  right:6px;
  top:8px;
  z-index:0;
  color:#fff;
  border-top:3px solid rgba(255,255,255,.5);
  border-bottom:3px solid rgba(255,255,255,.5);
  font-size:clamp(8px,1.2vw,14px);
  opacity:.48;
}

.cell.mark-avenue:before{
  content:"AVE";
  position:absolute;
  inset:auto 7px 8px auto;
  z-index:0;
  color:rgba(255,255,255,.65);
  font-size:clamp(12px,1.8vw,24px);
  transform:rotate(-90deg);
  border:0;
  background:none;
  box-shadow:none;
}

.cell.mark-steam:before{
  content:"";
  position:absolute;
  width:34%;
  height:34%;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:0;
  border-radius:50%;
  opacity:.50;
  background:
    radial-gradient(circle, transparent 0 24%, #111 25% 31%, transparent 32%),
    repeating-radial-gradient(circle, rgba(255,255,255,.5) 0 2px, transparent 2px 5px);
  border:2px solid #000;
  box-shadow:0 0 16px rgba(255,255,255,.18);
}

.cell.mark-manhole:before{
  content:"";
  position:absolute;
  width:34%;
  height:34%;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:0;
  border-radius:50%;
  opacity:.45;
  background:repeating-radial-gradient(circle, #111 0 3px, #555 3px 5px, #111 5px 8px);
  border:2px solid #000;
  box-shadow:none;
}

.cell.mark-metro:before,
.cell.mark-underground:before{
  content:"M";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:0;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#fff;
  background:#5630a3;
  border:4px solid #fff;
  box-shadow:3px 3px 0 #000;
  opacity:.62;
  font-size:24px;
}

.cell.mark-underground:before{
  content:"";
  border-radius:50%;
  background:
    linear-gradient(#1b5aaa 43%, #fff 43% 57%, #1b5aaa 57%),
    radial-gradient(circle, #d92929 0 52%, transparent 53%);
}

.cell.mark-underground:after{
  content:"";
}

.cell.mark-boulevard:before{
  content:"BOULEVARD";
  position:absolute;
  left:6px;
  right:6px;
  top:50%;
  transform:translateY(-50%) rotate(-7deg);
  z-index:0;
  color:rgba(255,240,200,.62);
  font-size:clamp(9px,1.3vw,16px);
  border-top:2px solid rgba(255,240,200,.4);
  border-bottom:2px solid rgba(255,240,200,.4);
  text-align:center;
}

.cell.mark-terrace:before{
  content:"CAFÉ\\A TERRACE";
  white-space:pre;
  position:absolute;
  left:6px;
  bottom:7px;
  z-index:0;
  color:#ffe0a0;
  opacity:.54;
  font-size:clamp(8px,1.2vw,14px);
  line-height:.9;
  text-shadow:2px 2px 0 #000;
  border:0;
  background:none;
  box-shadow:none;
}

.cell.mark-rue:before{
  content:"RUE";
  position:absolute;
  right:7px;
  top:7px;
  z-index:0;
  color:rgba(255,240,200,.65);
  font-size:clamp(12px,1.7vw,22px);
  transform:rotate(5deg);
}

.cell.mark-loading:before{
  content:"LOADING";
  position:absolute;
  inset:auto 6px 8px 6px;
  z-index:0;
  color:#ffd94a;
  border:3px solid rgba(255,217,74,.65);
  font-size:clamp(9px,1.3vw,16px);
  text-align:center;
  opacity:.50;
}

.cell.mark-rail:before{
  content:"";
  position:absolute;
  inset:12% 0;
  z-index:0;
  opacity:.34;
  background:
    linear-gradient(90deg, transparent 46%, #bbb 47% 49%, transparent 50% 52%, #bbb 53% 55%, transparent 56%),
    repeating-linear-gradient(0deg, transparent 0 8px, #999 8px 11px, transparent 11px 19px);
}

.cell.mark-warehouse-line:before,
.cell.mark-industrial:before{
  content:"";
  position:absolute;
  inset:12%;
  z-index:0;
  opacity:.38;
  background:repeating-linear-gradient(45deg, #ffd94a 0 8px, transparent 8px 16px);
  border:2px solid rgba(255,217,74,.55);
}

.cell.mark-parking:before{
  content:"P";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:0;
  color:rgba(255,255,255,.68);
  font-size:clamp(24px,3vw,42px);
  border:0;
  background:none;
  box-shadow:none;
}

.cell.mark-lockup:before{
  content:"LOCK-UP";
  position:absolute;
  right:4px;
  bottom:8px;
  z-index:0;
  color:#e86d45;
  font-size:clamp(10px,1.5vw,20px);
  transform:rotate(-9deg);
  opacity:.55;
  text-shadow:2px 2px 0 #000;
  border:0;
  background:none;
  box-shadow:none;
}

.cell.mark-market:before{
  content:"MARKET";
  position:absolute;
  left:6px;
  right:6px;
  bottom:8px;
  z-index:0;
  color:#fff0a8;
  font-size:clamp(9px,1.2vw,16px);
  text-align:center;
  border-top:2px dashed rgba(255,240,168,.45);
  border-bottom:2px dashed rgba(255,240,168,.45);
  opacity:.55;
}

.cell.mark-graffiti:before{
  content:"TURF";
  position:absolute;
  right:6px;
  bottom:8px;
  z-index:0;
  color:#e86d45;
  font-size:clamp(10px,1.5vw,22px);
  transform:rotate(-13deg);
  opacity:.50;
  text-shadow:2px 2px 0 #000;
  border:0;
  background:none;
  box-shadow:none;
}

.cell.mark-alley-arrow:before{
  content:"ALLEY →";
  position:absolute;
  left:5px;
  top:8px;
  z-index:0;
  color:rgba(255,255,255,.58);
  font-size:clamp(9px,1.3vw,16px);
  border:0;
  background:none;
  box-shadow:none;
}

.cell.mark-block-number:before{
  content:"BLOCK 7";
  position:absolute;
  left:7px;
  bottom:8px;
  z-index:0;
  color:rgba(255,255,255,.42);
  font-size:clamp(8px,1.2vw,14px);
  transform:rotate(-4deg);
  border:0;
  background:none;
  box-shadow:none;
}

/* Keep road markings underneath pieces and legal highlights */
.cell .tile{
  z-index:3;
}

.cell.highlight,
.cell.capture,
.cell.subway-move{
  z-index:2;
}


/* V5 CAMPAIGN + 2.5D BUSINESS SHOPS */
.campaign-panel{
  margin-top:14px;
  padding:12px;
  background:
    linear-gradient(135deg, rgba(240,185,57,.16), rgba(216,59,45,.10)),
    #090d13;
  border:3px solid #000;
}

.campaign-panel h3{
  margin:0 0 8px;
  color:var(--gold);
  text-transform:uppercase;
}

.campaign-panel p{
  margin:8px 0;
  font-family:Arial,sans-serif;
  letter-spacing:0;
  color:#e8d7b2;
}

.campaign-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.campaign-actions button{
  background:var(--paper);
  color:#111;
  padding:10px 12px;
  border:3px solid #000;
  box-shadow:4px 4px 0 #000;
  text-transform:uppercase;
}

.campaign-actions button:first-child{
  background:var(--gold);
}

.cell.business{
  overflow:visible;
}

.shop-back{
  position:absolute;
  left:8%;
  right:8%;
  bottom:18%;
  height:58%;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(0,0,0,.28), transparent 20% 80%, rgba(0,0,0,.28)),
    linear-gradient(180deg,#8d4b25,#482211);
  border:3px solid #000;
  box-shadow:4px 4px 0 rgba(0,0,0,.65);
  clip-path:polygon(8% 0,92% 0,100% 20%,100% 100%,0 100%,0 20%);
  opacity:.96;
}

.shop-back .shop-roof{
  position:absolute;
  left:-4px;
  right:-4px;
  top:-8px;
  height:18px;
  background:repeating-linear-gradient(90deg,#d63c2c 0 10px,#f1dfb9 10px 20px);
  border:3px solid #000;
}

.shop-back .shop-sign{
  position:absolute;
  left:8%;
  right:8%;
  top:18px;
  display:block;
  text-align:center;
  color:#111;
  background:var(--paper);
  border:2px solid #000;
  box-shadow:2px 2px 0 rgba(0,0,0,.65);
  font-size:clamp(7px,1vw,13px);
  line-height:1;
  padding:2px;
  text-transform:uppercase;
}

.shop-back .shop-windows{
  position:absolute;
  left:14%;
  right:14%;
  bottom:12px;
  height:25%;
  background:
    linear-gradient(90deg,#091723 0 38%, transparent 38% 62%, #091723 62%),
    linear-gradient(#123f52,#05090d);
  border:2px solid #000;
}

.shop-front{
  position:absolute;
  left:4%;
  right:4%;
  bottom:-3px;
  min-height:18%;
  z-index:4;
  pointer-events:none;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#111;
  background:var(--paper);
  border:3px solid #000;
  box-shadow:3px 3px 0 rgba(0,0,0,.8);
  transform:perspective(80px) rotateX(10deg);
  text-align:center;
  font-size:clamp(7px,1vw,12px);
  line-height:1;
  text-transform:uppercase;
}

.shop-front span{
  display:block;
  padding:2px 4px;
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.cell.business-small .shop-back{
  height:46%;
  bottom:22%;
  left:12%;
  right:12%;
}

.cell.business-small .shop-front{
  left:10%;
  right:10%;
}

.cell.business .tile{
  z-index:3;
  width:68%;
  height:68%;
  align-self:end;
  margin-bottom:12%;
}

.cell.business .coord{
  z-index:5;
}

.cell.business.owner-red .shop-front{
  border-color:var(--red);
  box-shadow:0 0 0 3px rgba(216,59,45,.42),3px 3px 0 rgba(0,0,0,.8);
}

.cell.business.owner-blue .shop-front{
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(35,118,201,.42),3px 3px 0 rgba(0,0,0,.8);
}

.board.size-10 .shop-back .shop-sign,
.board.size-10 .shop-front{
  font-size:7px;
}

@media (max-width:680px){
  .shop-back{
    left:12%;
    right:12%;
    height:45%;
    bottom:28%;
  }

  .shop-front{
    min-height:15%;
    font-size:7px;
  }

  .cell.business .tile{
    width:74%;
    height:74%;
  }
}


/* V6 CAMPAIGN CONTINUE FIX */
.campaign-actions button:disabled{
  opacity:.45;
  filter:grayscale(.7);
  cursor:not-allowed;
  transform:none;
}

#continueCampaignBtn:not(:disabled){
  background:#9fe870;
  color:#111;
  outline:3px solid #000;
  outline-offset:-7px;
}

#campaignStatus{
  min-height:34px;
  padding:8px;
  background:#05080c;
  border:2px solid #000;
  color:#f1dfb9;
}


/* V7 CREW MARKET + BETWEEN TURF WARS DIALOGUE */
.campaign-interlude{
  margin-top:12px;
  padding:12px;
  background:
    linear-gradient(135deg, rgba(0,0,0,.22), rgba(240,185,57,.10)),
    #11151b;
  border:3px solid #000;
  box-shadow:4px 4px 0 rgba(0,0,0,.65);
}

.campaign-interlude h4,
.crew-market-panel h4,
.crew-market-panel h5{
  margin:0 0 8px;
  color:var(--gold);
  text-transform:uppercase;
}

.campaign-interlude p,
.crew-market-panel p,
.role-inspect-panel span,
.campaign-crew-card span,
.market-card span{
  font-family:Arial,sans-serif;
  letter-spacing:0;
}

.crew-market-panel{
  margin-top:12px;
  padding:12px;
  background:#080d13;
  border:3px solid #000;
  box-shadow:4px 4px 0 rgba(0,0,0,.65);
}

.crew-market-layout{
  display:grid;
  grid-template-columns:1.1fr 1fr 1fr;
  gap:12px;
  align-items:start;
}

.crew-market-list,
.campaign-crew-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  max-height:260px;
  overflow:auto;
  padding-right:4px;
}

.market-card,
.campaign-crew-card{
  display:grid;
  grid-template-columns:54px 1fr;
  gap:8px;
  align-items:center;
  min-height:76px;
  background:var(--paper);
  color:#111;
  border:3px solid #000;
  box-shadow:3px 3px 0 #000;
  text-align:left;
  padding:6px;
}

.market-card{
  cursor:pointer;
}

.market-card.selected{
  outline:4px solid var(--gold);
  outline-offset:-7px;
}

.market-card.owned{
  background:#d7f6c4;
}

.market-card img,
.campaign-crew-card img{
  width:54px;
  height:54px;
  object-fit:cover;
  background:#050505;
  border:2px solid #000;
}

.market-card strong,
.campaign-crew-card strong{
  display:block;
  text-transform:uppercase;
  font-size:16px;
}

.role-inspect-panel{
  min-height:260px;
  padding:10px;
  background:var(--paper);
  color:#111;
  border:3px solid #000;
  box-shadow:3px 3px 0 #000;
}

.role-inspect-panel strong{
  display:block;
  font-size:24px;
  text-transform:uppercase;
  margin-bottom:6px;
}

.role-inspect-panel span{
  display:block;
  margin:5px 0;
  line-height:1.2;
}

.market-move-preview{
  margin:8px 0;
}

.market-move-preview b{
  display:block;
  margin-bottom:4px;
}

.market-move-preview .move-grid{
  transform:scale(.86);
  transform-origin:left top;
  margin-bottom:-12px;
}

.crew-market-actions{
  margin-top:12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.crew-market-actions button{
  background:var(--paper);
  color:#111;
  padding:10px 12px;
  border:3px solid #000;
  box-shadow:4px 4px 0 #000;
  text-transform:uppercase;
}

.crew-market-actions button:not(:disabled):hover,
.market-card:hover{
  transform:translate(2px,2px);
  box-shadow:2px 2px 0 #000;
}

.crew-market-actions button:disabled{
  opacity:.45;
  cursor:not-allowed;
}

#buyCrewBtn:not(:disabled){
  background:var(--gold);
}

#swapCrewBtn:not(:disabled){
  background:#9fe870;
}

@media (max-width:900px){
  .crew-market-layout{
    grid-template-columns:1fr;
  }

  .crew-market-list,
  .campaign-crew-list{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:520px){
  .crew-market-list,
  .campaign-crew-list{
    grid-template-columns:1fr;
  }
}


/* V8 STREET JOBS CAMPAIGN */
.mission-choice-panel{
  margin-top:12px;
  padding:12px;
  background:#071018;
  border:3px solid #000;
  box-shadow:4px 4px 0 rgba(0,0,0,.65);
}

.mission-choice-panel h4{
  margin:0 0 8px;
  color:var(--gold);
  text-transform:uppercase;
}

.mission-choice-panel p{
  margin:6px 0 10px;
  font-family:Arial,sans-serif;
  letter-spacing:0;
  color:#e8d7b2;
}

.mission-choice-list{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}

.mission-choice-card{
  min-height:118px;
  padding:10px;
  text-align:left;
  color:#111;
  background:var(--paper);
  border:3px solid #000;
  box-shadow:4px 4px 0 #000;
  cursor:pointer;
}

.mission-choice-card strong{
  display:block;
  font-size:18px;
  text-transform:uppercase;
  margin-bottom:5px;
}

.mission-choice-card span{
  display:block;
  font-family:Arial,sans-serif;
  letter-spacing:0;
  font-size:12px;
  line-height:1.25;
  margin-top:4px;
}

.mission-choice-card.selected{
  background:var(--gold);
  outline:4px solid #fff;
  outline-offset:-8px;
}

.mission-choice-card:hover{
  transform:translate(2px,2px);
  box-shadow:2px 2px 0 #000;
}

@media (max-width:900px){
  .mission-choice-list{
    grid-template-columns:1fr;
  }
}


/* V9 CREW SLOTS + AI SKILL LEVELS */
.ai-difficulty-picker{
  margin-top:12px;
  padding:10px;
  background:#05090d;
  border:3px solid #000;
}

.ai-difficulty-picker h4{
  margin:0 0 8px;
  color:var(--gold);
  text-transform:uppercase;
}

.ai-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.ai-buttons button{
  background:var(--paper);
  color:#111;
  padding:9px 11px;
  border:3px solid #000;
  box-shadow:3px 3px 0 #000;
  text-transform:uppercase;
}

.ai-buttons button.mode-active{
  background:var(--gold);
  outline:3px solid #fff;
  outline-offset:-6px;
}

#aiHelp{
  margin:8px 0 0;
  font-family:Arial,sans-serif;
  letter-spacing:0;
  color:#e8d7b2;
}

#activeCrewSlots{
  font-family:Arial,sans-serif;
  font-size:12px;
  color:#f1dfb9;
  background:#111;
  border:2px solid #000;
  padding:2px 6px;
  margin-left:6px;
}

.campaign-crew-card.empty-slot{
  grid-template-columns:1fr;
  min-height:74px;
  background:#151515;
  color:#f1dfb9;
  border-style:dashed;
  opacity:.85;
}

.campaign-crew-card.empty-slot strong{
  color:var(--gold);
}

.market-card.owned span{
  color:#184c1d;
  font-weight:900;
}


/* V11 MAP-BASED CREW LIMIT FIX */
.pick-count{
  background:#111;
  color:var(--paper);
  border:2px solid #000;
  padding:2px 6px;
}

/* ─── Online Multiplayer — V13 ─────────────────────────────────────────────── */

.online-lobby-panel {
  background: #1a1007;
  border: 2px solid #8b4513;
  border-radius: 6px;
  padding: 1.5rem;
  margin-top: 2rem;
}

.online-lobby-panel h3 {
  font-family: var(--font-display, 'Playfair Display', serif);
  color: #e8c97a;
  margin: 0 0 0.5rem;
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.online-lobby-panel p {
  color: #bbb;
  font-size: 0.85rem;
  margin: 0 0 1rem;
}

.online-lobby-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

@media (max-width: 640px) {
  .online-lobby-grid { grid-template-columns: 1fr; }
}

.online-card {
  background: #0d0803;
  border: 1px solid #5a3010;
  border-radius: 4px;
  padding: 1rem;
}

.online-card h4 {
  font-family: var(--font-display, 'Playfair Display', serif);
  color: #e8c97a;
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
  text-transform: uppercase;
}

.online-card label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: #ccc;
  font-size: 0.8rem;
  margin-bottom: 0.6rem;
}

.online-card input[type="text"] {
  background: #1a1007;
  border: 1px solid #5a3010;
  color: #fff;
  padding: 6px 8px;
  border-radius: 3px;
  font-family: inherit;
  font-size: 0.9rem;
}

.online-card button {
  background: #8b1a1a;
  color: #fff;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 3px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9rem;
  width: 100%;
  margin-top: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: bold;
}

.online-card button:hover { background: #a52020; }

.room-code {
  display: inline-block;
  font-size: 2rem;
  letter-spacing: 0.3em;
  color: #e8c97a;
  font-family: 'Courier New', monospace;
  background: #0d0803;
  border: 2px dashed #8b4513;
  padding: 0.4rem 1rem;
  border-radius: 4px;
  margin: 0.5rem 0;
}

.online-status-msg {
  padding: 0.6rem 0.8rem;
  border-radius: 4px;
  font-size: 0.85rem;
  min-height: 2rem;
  margin-top: 0.75rem;
}

.online-status-msg.status-ok     { background: #0a2a0a; color: #6f6; border: 1px solid #3a6a3a; }
.online-status-msg.status-waiting{ background: #1a1007; color: #e8c97a; border: 1px solid #8b4513; }
.online-status-msg.status-error  { background: #2a0a0a; color: #f66; border: 1px solid #6a3a3a; }
.online-status-msg.status-info   { background: #0a1a2a; color: #8af; border: 1px solid #3a5a8a; }

.online-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.4rem 0.6rem;
  background: #0a1a2a;
  border: 1px solid #3a5a8a;
  border-radius: 4px;
  margin-top: 0.5rem;
}

.online-badge {
  color: #8af;
  font-size: 0.85rem;
  flex: 1;
}

.online-bar button {
  background: #5a1010;
  color: #fff;
  border: none;
  padding: 4px 10px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.8rem;
}

.online-bar button:hover { background: #8b1a1a; }

#onlineCodeBox {
  margin-top: 0.75rem;
  text-align: center;
}

#onlineCodeBox p { font-size: 0.8rem; color: #999; margin: 0.25rem 0; }

.hidden { display: none !important; }


/* ─── V14 Boss Campaign + Chat Wheel ─────────────────────────────────────── */

.boss-story-card {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 1rem;
  align-items: center;
  margin-top: .75rem;
  padding: .75rem;
  border: 2px solid rgba(255, 188, 75, .55);
  background: rgba(0, 0, 0, .35);
  box-shadow: 5px 5px 0 rgba(0,0,0,.45);
}

.boss-story-portrait {
  width: 110px;
  height: 110px;
  object-fit: cover;
  border: 3px solid rgba(255, 226, 171, .75);
  background: #050505;
}

.boss-story-card strong {
  display: block;
  font-size: 1.15rem;
  color: #ffd97a;
  margin-bottom: .35rem;
}

.boss-story-card span,
.boss-story-card em {
  display: block;
  line-height: 1.35;
}

.boss-story-card em {
  color: #e8d4aa;
  margin-top: .45rem;
}

.chat-wheel-panel {
  margin-top: 1rem;
  padding-top: .75rem;
  border-top: 2px solid rgba(255, 226, 171, .25);
}

.chat-wheel-btn {
  width: 100%;
  padding: .8rem;
  border: 3px solid #050505;
  background: #a11b1f;
  color: #fff0d5;
  box-shadow: 5px 5px 0 rgba(0,0,0,.75);
  text-transform: uppercase;
  font-weight: 900;
  cursor: pointer;
}

.chat-wheel-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.chat-wheel-menu {
  margin-top: .7rem;
  display: grid;
  gap: .45rem;
  padding: .65rem;
  border: 2px solid rgba(255, 188, 75, .45);
  background: rgba(0,0,0,.45);
}

.chat-wheel-menu strong {
  color: #ffd97a;
  text-transform: uppercase;
}

.chat-wheel-help {
  font-size: .85rem;
  color: #d8c59c;
}

.chat-wheel-menu button {
  text-align: left;
  padding: .55rem;
  border: 2px solid rgba(255, 226, 171, .45);
  background: rgba(255,255,255,.08);
  color: #fff0d5;
  cursor: pointer;
}

.chat-wheel-menu button:hover:not(:disabled) {
  background: rgba(255, 188, 75, .16);
}

.chat-wheel-menu button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.chat-wheel-menu button span {
  display: block;
  color: #ffd97a;
  font-size: .78rem;
  text-transform: uppercase;
  margin-bottom: .2rem;
}

.boss-speech-bubble {
  position: absolute;
  left: 50%;
  bottom: 96%;
  transform: translateX(-50%);
  z-index: 20;
  min-width: 135px;
  max-width: 210px;
  padding: .45rem .55rem;
  border: 2px solid #050505;
  background: #fff0d5;
  color: #111;
  font-size: .78rem;
  line-height: 1.15;
  font-weight: 900;
  box-shadow: 4px 4px 0 rgba(0,0,0,.65);
  pointer-events: none;
}

.boss-speech-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-top-color: #fff0d5;
}

.boss-speech-bubble.red {
  border-color: #ff3d3d;
}

.boss-speech-bubble.blue {
  border-color: #2296ff;
}

@media (max-width: 900px) {
  .boss-story-card {
    grid-template-columns: 80px 1fr;
  }
  .boss-story-portrait {
    width: 80px;
    height: 80px;
  }
  .boss-speech-bubble {
    min-width: 110px;
    font-size: .7rem;
  }
}

/* V14 hotfix: keep Boss Lines panel tidy and on-screen */
.chat-wheel-panel {
  max-width: 100%;
  margin-top: 0.75rem;
}

.chat-wheel-menu {
  max-height: 230px;
  overflow-y: auto;
  box-sizing: border-box;
}

.chat-wheel-menu button {
  width: 100%;
  box-sizing: border-box;
  font-size: 0.82rem;
  line-height: 1.2;
}

.rules-panel .chat-wheel-panel {
  position: relative;
  z-index: 30;
}

@media (max-width: 900px) {
  .chat-wheel-menu {
    max-height: 180px;
  }
}


/* ─────────────────────────────────────────────────────────────────────────────
   V15 Stream-ready landing / setup / result polish
   ───────────────────────────────────────────────────────────────────────────── */
.home-screen{
  margin-bottom:18px;
  padding:18px;
  background:
    radial-gradient(circle at 18% 20%, rgba(216,59,45,.28), transparent 28%),
    radial-gradient(circle at 82% 18%, rgba(35,118,201,.24), transparent 30%),
    linear-gradient(135deg, rgba(20,24,31,.95), rgba(7,9,12,.98));
  border:4px solid #000;
  box-shadow:8px 8px 0 rgba(0,0,0,.65);
}

.home-stage{
  min-height:430px;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:22px;
  align-items:stretch;
}

.home-copy{
  padding:28px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:
    linear-gradient(90deg, rgba(0,0,0,.62), rgba(0,0,0,.18)),
    repeating-linear-gradient(-15deg, rgba(255,255,255,.045) 0 2px, transparent 2px 7px);
  border:3px solid #000;
}

.eyebrow{
  display:inline-block;
  width:max-content;
  margin:0 0 12px;
  padding:7px 10px;
  background:var(--paper);
  color:#111;
  text-transform:uppercase;
  transform:rotate(-2deg);
  box-shadow:4px 4px 0 #000;
}

.home-copy h2{
  margin:0;
  color:var(--gold);
  font-size:clamp(38px,5vw,72px);
  line-height:.9;
  text-transform:uppercase;
  text-shadow:4px 4px 0 #000;
}

.home-copy p:not(.eyebrow){
  max-width:720px;
  font-family:Arial,sans-serif;
  font-weight:800;
  letter-spacing:0;
  font-size:18px;
  line-height:1.35;
}

.home-copy small{
  margin-top:12px;
  font-family:Arial,sans-serif;
  letter-spacing:0;
  color:#d7c49d;
}

.home-cta-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:12px;
}

.home-cta-row button,
.setup-heading button{
  background:var(--paper);
  color:#111;
  padding:14px 18px;
  border:3px solid #000;
  box-shadow:4px 4px 0 #000;
  text-transform:uppercase;
}

.home-cta-row button.primary-cta{
  background:var(--gold);
}

.home-cta-row button:hover,
.setup-heading button:hover{
  transform:translate(2px,2px);
  box-shadow:2px 2px 0 #000;
}

.home-poster{
  position:relative;
  min-height:420px;
  border:3px solid #000;
  overflow:hidden;
  background:
    linear-gradient(90deg, rgba(216,59,45,.52), transparent 47%, rgba(35,118,201,.5)),
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 5px),
    #090d13;
}

.poster-card{
  position:absolute;
  width:48%;
  min-height:72%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  padding:22px 20px 24px;
  bottom:24px;
  border:4px solid #000;
  color:var(--paper);
  text-shadow:3px 3px 0 #000;
  font-size:clamp(30px,3vw,48px);
  background-size:cover;
  box-shadow:7px 7px 0 #000;
}


.poster-boss-img{
  width:min(88%, 320px);
  max-height:70%;
  object-fit:contain;
  filter:drop-shadow(8px 10px 0 rgba(0,0,0,.72));
  transform:translateY(6px);
}

.poster-label{
  display:block;
  position:relative;
  z-index:2;
  letter-spacing:1px;
  transform:rotate(-2deg);
}

.blue-poster .poster-label{
  transform:rotate(2deg);
}

.red-poster{
  left:24px;
  transform:rotate(-3deg);
  background:
    linear-gradient(0deg, rgba(0,0,0,.82), transparent 60%),
    radial-gradient(circle at 50% 30%, rgba(216,59,45,.9), rgba(0,0,0,.2) 42%, rgba(0,0,0,.8) 70%);
}

.blue-poster{
  right:24px;
  transform:rotate(3deg);
  background:
    linear-gradient(0deg, rgba(0,0,0,.82), transparent 60%),
    radial-gradient(circle at 50% 30%, rgba(35,118,201,.9), rgba(0,0,0,.2) 42%, rgba(0,0,0,.8) 70%);
}

.poster-vs{
  position:absolute;
  inset:50% auto auto 50%;
  transform:translate(-50%,-50%) rotate(-8deg);
  z-index:3;
  background:var(--gold);
  color:#111;
  border:4px solid #000;
  padding:14px 18px;
  font-size:44px;
  box-shadow:5px 5px 0 #000;
}

.setup-heading{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  margin-bottom:14px;
}

.crew-identity-panel{
  display:grid;
  grid-template-columns:1fr 1fr auto;
  gap:12px;
  align-items:end;
  padding:14px;
  margin:0 0 16px;
  background:#080d13;
  border:3px solid #000;
}

.crew-identity-panel label{
  display:flex;
  flex-direction:column;
  gap:5px;
  color:var(--gold);
  text-transform:uppercase;
}

.crew-identity-panel input{
  width:100%;
  padding:12px;
  background:var(--paper);
  color:#111;
  border:3px solid #000;
  font:inherit;
  text-transform:uppercase;
  box-shadow:3px 3px 0 #000;
}

#crewNamePreview{
  margin:0;
  padding:12px;
  background:#111;
  border:2px solid #000;
  color:var(--ink);
  text-transform:uppercase;
  white-space:nowrap;
}

.match-status-bar{
  display:grid;
  grid-template-columns:1fr 1fr auto auto;
  gap:8px;
  align-items:center;
  margin-bottom:8px;
  padding:10px;
  background:#070a0f;
  border:3px solid #000;
  box-shadow:4px 4px 0 #000;
}

.match-status-bar span{
  display:block;
  padding:8px 10px;
  background:var(--paper);
  color:#111;
  border:2px solid #000;
  text-transform:uppercase;
  text-align:center;
}

#matchRedStatus{background:#f1c0b8;}
#matchBlueStatus{background:#b9d5f2;}
#matchTurnStatus,#matchMoveStatus{background:var(--gold);}

.move-recap-banner{
  margin-bottom:10px;
  padding:12px 14px;
  border:3px solid #000;
  background:linear-gradient(90deg, var(--gold), var(--paper));
  color:#111;
  text-transform:uppercase;
  box-shadow:4px 4px 0 #000;
}

.turn-splash{
  position:fixed;
  left:50%;
  top:18%;
  z-index:80;
  transform:translateX(-50%) rotate(-2deg);
  padding:18px 30px;
  border:5px solid #000;
  background:var(--gold);
  color:#111;
  text-transform:uppercase;
  font-size:clamp(32px,4vw,68px);
  line-height:.95;
  box-shadow:8px 8px 0 #000;
  pointer-events:none;
  animation:turnSplashPop .85s ease forwards;
}

.turn-splash.red{background:var(--red);color:var(--paper);}
.turn-splash.blue{background:var(--blue);color:var(--paper);}

@keyframes turnSplashPop{
  0%{opacity:0; transform:translateX(-50%) scale(.86) rotate(-6deg);}
  16%{opacity:1; transform:translateX(-50%) scale(1.05) rotate(-2deg);}
  80%{opacity:1;}
  100%{opacity:0; transform:translateX(-50%) scale(1) rotate(1deg);}
}

.result-kicker{
  display:none;
}

.win-splash-reason{
  max-width:780px;
  margin:12px auto;
  padding:14px;
  background:rgba(0,0,0,.72);
  color:var(--ink);
  border:3px solid #000;
  font-family:Arial,sans-serif;
  font-weight:900;
  letter-spacing:0;
  line-height:1.35;
}

.close-splash-btn{
  margin-top:12px;
}

@media (max-width:950px){
  .home-stage{grid-template-columns:1fr;}
  .home-poster{min-height:280px;}
  .crew-identity-panel{grid-template-columns:1fr;}
  #crewNamePreview{white-space:normal;}
  .match-status-bar{grid-template-columns:1fr 1fr;}
}

@media (max-width:650px){
  .setup-heading{flex-direction:column;}
  .home-copy{padding:18px;}
  .poster-card{font-size:26px;width:52%;}
  .match-status-bar{grid-template-columns:1fr;}
}


.online-lobby-focus {
  animation: onlineLobbyPulse 1.2s ease-out 1;
}

@keyframes onlineLobbyPulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 190, 70, 0.85); }
  60% { box-shadow: 0 0 0 10px rgba(255, 190, 70, 0.15); }
  100% { box-shadow: 0 0 0 0 rgba(255, 190, 70, 0); }
}


/* V15C: show the two bosses clearly on the landing screen. */
@media (max-width: 820px){
  .poster-boss-img{
    width:min(92%, 230px);
    max-height:62%;
  }
}

.win-splash .win-burst{
  border:6px solid #000;
  box-shadow:14px 14px 0 #000, 0 0 0 9999px rgba(0,0,0,.70);
}

.win-splash.red .win-burst{
  background:linear-gradient(135deg, rgba(166,28,32,.95), rgba(10,10,12,.96) 48%, rgba(248,188,74,.92));
}

.win-splash.blue .win-burst{
  background:linear-gradient(135deg, rgba(0,105,166,.95), rgba(10,10,12,.96) 48%, rgba(248,188,74,.92));
}

.win-splash-reason strong{
  display:block;
  margin-bottom:8px;
  color:var(--gold);
  text-transform:uppercase;
  font-size:clamp(22px,3vw,38px);
  line-height:.95;
  text-shadow:3px 3px 0 #000;
}

.win-splash-reason span{
  display:block;
  font-size:clamp(15px,1.4vw,20px);
}

.win-splash-explainer{
  max-width:760px;
  margin:8px auto 0;
  padding:10px 14px;
  background:var(--paper);
  color:#111;
  border:3px solid #000;
  box-shadow:4px 4px 0 #000;
  font-family:Arial,sans-serif;
  font-weight:900;
}

.close-splash-btn:disabled{
  opacity:.72;
  filter:grayscale(.35);
  cursor:not-allowed;
}

/* V15F: separate-feeling menu screens */
.mode-hero{
  display:grid;
  grid-template-columns: minmax(0,1.15fr) minmax(260px,.85fr);
  gap:22px;
  align-items:stretch;
  margin: 14px 22px 18px;
  padding:18px;
  border:4px solid #050505;
  background:linear-gradient(135deg,rgba(45,18,18,.96),rgba(9,16,22,.96));
  box-shadow:10px 10px 0 rgba(0,0,0,.42);
}
.mode-hero-copy{
  border:3px solid rgba(255,190,75,.25);
  padding:22px;
  background:repeating-linear-gradient(-10deg,rgba(255,255,255,.025),rgba(255,255,255,.025) 2px,rgba(0,0,0,.08) 2px,rgba(0,0,0,.08) 7px);
}
.mode-hero-copy h2{
  margin:8px 0 10px;
  font-family:var(--display-font, Impact, sans-serif);
  font-size:clamp(44px,6vw,88px);
  line-height:.88;
  text-transform:uppercase;
  color:#ffc04d;
  text-shadow:4px 4px 0 #000;
}
.mode-hero-copy p:not(.eyebrow){
  max-width:760px;
  font-size:20px;
  line-height:1.35;
  color:#fff6dd;
  font-weight:900;
  text-shadow:2px 2px 0 #000;
}
#modeBackBtn{
  margin-top:14px;
  padding:14px 20px;
  border:4px solid #050505;
  background:#f2ddb4;
  color:#080808;
  box-shadow:6px 6px 0 #000;
  text-transform:uppercase;
  font-weight:1000;
  cursor:pointer;
}
#modeBackBtn:hover{transform:translateY(-1px)}
.mode-character-card{
  position:relative;
  min-height:280px;
  display:flex;
  align-items:end;
  justify-content:center;
  overflow:hidden;
  border:4px solid #050505;
  background:radial-gradient(circle at 50% 30%,rgba(255,190,75,.24),transparent 42%),linear-gradient(135deg,rgba(120,20,20,.85),rgba(0,90,130,.65));
  box-shadow:8px 8px 0 rgba(0,0,0,.45);
}
.mode-character-card:before{
  content:"";
  position:absolute;inset:14px;
  border:2px solid rgba(255,255,255,.07);
  transform:rotate(-2deg);
}
.mode-character-card img{
  max-width:min(72%,320px);
  max-height:260px;
  object-fit:contain;
  filter:drop-shadow(10px 12px 0 rgba(0,0,0,.55));
  transform:rotate(-2deg) translateY(-8px);
}
.mode-character-card div{
  position:absolute;
  left:18px;right:18px;bottom:16px;
  padding:12px 14px;
  border:3px solid #050505;
  background:#f2ddb4;
  box-shadow:5px 5px 0 #000;
  transform:rotate(-1deg);
}
.mode-character-card strong{
  display:block;
  font-family:var(--display-font, Impact, sans-serif);
  font-size:24px;
  color:#080808;
  text-transform:uppercase;
}
.mode-character-card span{
  display:block;
  margin-top:3px;
  color:#1b1209;
  font-size:14px;
  font-weight:900;
}

/* Hide the old all-in-one setup header when a dedicated mode screen is open. */
.start-screen .setup-heading{display:none;}
.start-screen .crew-picker{
  margin-top:0;
}
.start-screen[data-menu-mode="campaign"] .crew-picker{
  background:linear-gradient(135deg,rgba(43,26,18,.98),rgba(16,16,20,.98));
}
.start-screen[data-menu-mode="online"] .crew-picker{
  background:linear-gradient(135deg,rgba(34,14,8,.98),rgba(8,12,16,.98));
}
.start-screen[data-menu-mode] .crew-identity-panel,
.start-screen[data-menu-mode] .crew-picker-grid,
.start-screen[data-menu-mode] .crew-picker-actions,
.start-screen[data-menu-mode] .mode-picker,
.start-screen[data-menu-mode] .map-picker,
.start-screen[data-menu-mode] .campaign-panel,
.start-screen[data-menu-mode] .spoken-panel,
.start-screen[data-menu-mode] .online-lobby-panel{
  display:none;
}
.start-screen[data-menu-mode="campaign"] .crew-identity-panel,
.start-screen[data-menu-mode="campaign"] .campaign-panel{
  display:block;
}
.start-screen[data-menu-mode="quick"] .crew-identity-panel,
.start-screen[data-menu-mode="quick"] .crew-picker-grid,
.start-screen[data-menu-mode="quick"] .crew-picker-actions,
.start-screen[data-menu-mode="quick"] .mode-picker,
.start-screen[data-menu-mode="quick"] .map-picker,
.start-screen[data-menu-mode="quick"] .spoken-panel{
  display:block;
}
.start-screen[data-menu-mode="quick"] .mode-buttons{display:none;}
.start-screen[data-menu-mode="passplay"] .crew-identity-panel,
.start-screen[data-menu-mode="passplay"] .crew-picker-grid,
.start-screen[data-menu-mode="passplay"] .crew-picker-actions,
.start-screen[data-menu-mode="passplay"] .map-picker,
.start-screen[data-menu-mode="passplay"] .spoken-panel{
  display:block;
}
.start-screen[data-menu-mode="online"] .online-lobby-panel{
  display:block;
}
.start-screen[data-menu-mode="howto"] .spoken-panel{
  display:block;
}
.start-screen[data-menu-mode="campaign"] .crew-identity-panel label:nth-child(2),
.start-screen[data-menu-mode="campaign"] #crewNamePreview{
  display:none;
}
.start-screen[data-menu-mode="campaign"] .crew-identity-panel:before{
  content:"Name your outfit before the East Side turf war begins.";
  display:block;
  margin-bottom:10px;
  color:#fff6dd;
  font-weight:900;
}
@media (max-width: 900px){
  .mode-hero{grid-template-columns:1fr;margin:10px;padding:12px;}
  .mode-character-card{min-height:220px;}
  .mode-character-card img{max-height:210px;}
}
.start-screen[data-menu-mode] .menu-howto-panel{display:none;}
.start-screen[data-menu-mode="howto"] .menu-howto-panel,
.start-screen[data-menu-mode="howto"] .spoken-panel{display:block;}
.menu-howto-panel{
  border:4px solid #050505;
  padding:16px;
  background:#0b1116;
  box-shadow:6px 6px 0 rgba(0,0,0,.42);
}
.menu-howto-panel h3{
  margin:0 0 12px;
  color:#ffc04d;
  font-family:var(--display-font, Impact, sans-serif);
  text-transform:uppercase;
  font-size:28px;
}
.howto-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.howto-grid section{
  border:2px solid rgba(255,190,75,.35);
  padding:12px;
  background:rgba(0,0,0,.34);
}
.howto-grid h4{
  margin:0 0 6px;
  color:#f2ddb4;
  text-transform:uppercase;
}
.howto-grid p{margin:0;color:#fff6dd;line-height:1.35;}
#openFullRulesBtn{
  margin-top:14px;
  padding:13px 18px;
  border:4px solid #050505;
  background:#f2ddb4;
  box-shadow:5px 5px 0 #000;
  text-transform:uppercase;
  font-weight:1000;
}
@media (max-width:800px){.howto-grid{grid-template-columns:1fr;}}