:root{--bg:#17212a;--panel:#111b24;--text:#f4f6f8;--muted:#9db0bd;--accent:#f5d25b}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;background:var(--bg);font-family:Inter,system-ui;color:var(--text);overflow:hidden}
body{padding:2px}
.app{width:100vw;height:100dvh;margin:0;display:flex;flex-direction:column}
.top{display:none}
.workspace{display:flex;flex-direction:column;gap:2px;min-height:0;flex:1}
.panel{background:linear-gradient(180deg,#172531,#0f1820);border:1px solid #344b5c;border-radius:9px;box-shadow:0 8px 24px #0005}
.side{padding:3px;display:flex;align-items:center;justify-content:center;gap:3px;flex-wrap:nowrap;position:relative;z-index:100;flex:0 0 auto}
.stage{padding:0;min-height:0;flex:1;overflow:hidden}
.boardWrap{
 position:relative;
 width:min(100%,calc((100dvh - 42px)*616/736));
 height:auto;
 aspect-ratio:616/736;
 margin:0 auto;
 flex:0 0 auto
}
.grid{position:absolute;left:1.2987%;top:1.087%;width:97.4026%;height:97.826%;display:grid;grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(12,1fr);gap:0}
.cell{border:1px solid #ffffff0e;position:relative;cursor:pointer}
.cell:hover{box-shadow:inset 0 0 0 2px #f5d25baa;z-index:10}
.badge{position:absolute;right:1px;top:1px;font-size:7px;background:#14202add;padding:1px 2px;border-radius:3px;pointer-events:none}
.status{display:none}
svg{position:absolute;inset:0;width:100%;height:100%}
input[type=file]{display:none}

/* compact square toolbar */
.iconBtn,.trackMain,.trackChoice,.tool,label.file,.menuAction{
 width:34px;height:34px;min-width:34px;border:1px solid #405a6c;background:#263846;color:#fff;
 border-radius:7px;padding:3px;cursor:pointer;display:grid;place-items:center
}
.iconBtn svg,.tool svg,.menuAction svg,.groupMain svg,.trackMain>svg{width:25px;height:25px;display:block;position:static;inset:auto}
.tool.active,.trackChoice.active,.trackMain.active,.iconBtn.active{border-color:var(--accent);box-shadow:inset 0 0 0 2px #f5d25b55}
.trackGroups{display:flex;gap:3px;position:relative}
.trackGroup,.toolGroup{position:relative}
.trackMain{margin:0}
.trackPreview{display:block;width:28px;height:22px;margin:0 auto}
.trackPreview svg{width:100%;height:100%;display:block;position:static}
.trackFlyout,.toolFlyout{
 display:none;position:absolute;left:0;top:38px;z-index:200;
 grid-template-columns:repeat(4,34px);gap:3px;padding:4px;background:#111b24;
 border:1px solid #405a6c;border-radius:8px;box-shadow:0 10px 28px #0009
}
.trackGroup.open .trackFlyout,.toolGroup.open .toolFlyout,.trackGroup:focus-within .trackFlyout,.toolGroup:focus-within .toolFlyout{display:grid}
.trackGroup:nth-child(n+3) .trackFlyout,.toolGroup.end .toolFlyout{left:auto;right:0}
.trackChoice{font-size:0}
.groupMain{width:34px;height:34px;min-width:34px;border:1px solid #405a6c;background:#263846;color:#fff;border-radius:7px;padding:3px;display:grid;place-items:center;cursor:pointer}
.groupMain svg{width:25px;height:25px;position:static}
.menuFlyout{grid-template-columns:repeat(3,34px)}
.decorFlyout{grid-template-columns:repeat(5,34px)}
.stationFlyout,.trainFlyout,.destFlyout{grid-template-columns:repeat(4,34px)}
.signalMark{font-size:9px;font-weight:900;position:absolute;right:2px;bottom:1px}
.tool{position:relative}

/* no visible captions anywhere */
small,.title,.desc,h1{display:none!important}
.actions{display:contents}
.waterGlint{stroke:#ffffffaa;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-dasharray:10 18;animation:waterFlow 2.8s linear infinite}
.waterGlint.g2{animation-delay:-1.35s;opacity:.55}
@keyframes waterFlow{to{stroke-dashoffset:-56}}

@media(max-width:480px){
 body{padding:1px}
 .app{width:100vw}
 .side{padding:2px;gap:2px;border-radius:0}
 .stage{padding:0;border-radius:0}
 .iconBtn,.trackMain,.trackChoice,.tool,label.file,.menuAction,.groupMain{width:28px;height:28px;min-width:28px;border-radius:5px;padding:2px}
 .iconBtn svg,.tool svg,.menuAction svg,.groupMain svg,.trackMain>svg{width:21px;height:21px}
 .trackPreview{width:23px;height:18px}
 .trackFlyout,.toolFlyout{top:31px;grid-template-columns:repeat(4,28px);gap:2px;padding:3px}
 .decorFlyout{grid-template-columns:repeat(5,28px)}
 .stationFlyout,.trainFlyout,.destFlyout{grid-template-columns:repeat(4,28px)}
 .boardWrap{width:min(100%,calc((100dvh - 34px)*616/736));height:auto}
}

.iconBtn img,.tool img,.menuAction img,.groupMain img,.trackMain>img{
  width:25px;height:25px;display:block;object-fit:contain;pointer-events:none
}
.eraseMain>img{width:18px;height:18px}
@media(max-width:480px){
 .iconBtn img,.tool img,.menuAction img,.groupMain img,.trackMain>img{width:21px;height:21px}
 .eraseMain>img{width:17px;height:17px}
}

.playbackControls{display:flex;gap:3px;align-items:center}





.playbackControls{display:flex;gap:3px;align-items:center}




/* v6.8.2: playback buttons use EXACTLY the same shell as the rest of toolbar.
   Only their interior glyph/text uses the rail-like gray/brown tone. */
.playbackControls{display:flex;gap:3px;align-items:center}
.playbackControls .iconBtn{
  background:#263846;
  border:1px solid #405a6c;
  box-shadow:none;
}
.playbackControls .iconBtn:hover{
  background:#263846;
}
.playbackControls .iconBtn.active{
  border-color:#405a6c;
  box-shadow:none;
}
.playbackControls .iconBtn svg,
.playbackControls .iconBtn{
  color:#806f60;
}
.playbackControls .speedBtn{
  font:800 11px/1 Inter,system-ui;
  padding:0;
  letter-spacing:-.2px;
  color:#806f60;
}

/* v6.9 mobile/tablet geometry */
.grid{
  touch-action:manipulation;
}
.cell{
  min-width:0;
  min-height:0;
}
.side button,.side label{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}


/* =========================================================
   v7 RESPONSIVE SHELL
   Body is ALWAYS 10 x 14 square units:
   1 top toolbar + 12 game rows + 1 bottom toolbar.
   Header / Trailer absorb all remaining viewport space.
   ========================================================= */

html,body{
  margin:0!important;
  width:100%!important;
  height:100%!important;
  overflow:hidden!important;
}
body{padding:0!important}

.app,.workspace,.side,.stage{display:contents!important}

.appShell{
  --u:32px;
  width:100vw;
  height:100dvh;
  overflow:hidden;
  background:var(--bg);
}

.appShell.portrait{
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:minmax(0,1fr) auto minmax(0,2fr);
  justify-items:center;
}
.appShell.landscape{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,2fr);
  grid-template-rows:1fr;
  align-items:center;
}

.gameBody{
  width:calc(var(--u) * 10);
  height:calc(var(--u) * 14);
  display:grid;
  grid-template-columns:repeat(10,var(--u));
  grid-template-rows:var(--u) calc(var(--u) * 12) var(--u);
  overflow:visible;
  position:relative;
  z-index:10;
}
.appShell.portrait .gameBody{grid-column:1;grid-row:2}
.appShell.landscape .gameBody{grid-column:2;grid-row:1}

.adaptivePanel{
  min-width:0;
  min-height:0;
  overflow:hidden;
  color:var(--text);
}
.headerPanel{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(4px,1.2vmin,14px);
}
.trailerPanel{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:8px;
  padding:clamp(5px,1.4vmin,16px);
}

.appShell.portrait .headerPanel{grid-column:1;grid-row:1;width:100%}
.appShell.portrait .trailerPanel{grid-column:1;grid-row:3;width:100%}
.appShell.landscape .headerPanel{grid-column:1;grid-row:1;height:100%}
.appShell.landscape .trailerPanel{grid-column:3;grid-row:1;height:100%}

.brand{display:flex;align-items:center;justify-content:center;gap:clamp(5px,1vmin,12px)}
.brandLoco{width:clamp(30px,8vmin,82px);height:auto}
.brandText{display:flex;flex-direction:column;line-height:.95;white-space:nowrap}
.brandText strong{font-size:clamp(15px,3.3vmin,34px);letter-spacing:.03em}
.brandText span{font-size:clamp(8px,1.5vmin,15px);color:var(--muted);letter-spacing:.16em}

.objectiveBlock{display:flex;flex-direction:column;gap:5px;max-width:54ch}
.objectiveBlock strong{font-size:clamp(10px,1.5vmin,15px);color:var(--accent)}
.objectiveBlock span{font-size:clamp(9px,1.35vmin,14px);color:#d7e0e6;line-height:1.25}
.statsBlock{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:clamp(9px,1.4vmin,14px)}
.statsBlock b{color:var(--accent)}

.topToolbar{
  grid-column:1/11;
  grid-row:1;
  width:calc(var(--u) * 10);
  height:var(--u);
  display:grid!important;
  grid-template-columns:repeat(10,var(--u));
  grid-template-rows:var(--u);
  gap:0!important;
  padding:0!important;
  border-radius:0!important;
  overflow:visible;
  z-index:200;
  align-items:stretch;
  justify-items:stretch;
}
.topToolbar .trackGroups{display:contents!important}
.topToolbar .trackGroup,
.topToolbar .toolGroup{
  width:var(--u);
  height:var(--u);
  position:relative;
}
.topToolbar>.trackMain,
.topToolbar>.toolGroup,
.topToolbar>.trackGroups>.trackGroup{
  width:var(--u);
  height:var(--u);
}
.topToolbar .trackMain,
.topToolbar .groupMain,
.topToolbar>.eraseMain{
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  border-radius:0!important;
  padding:calc(var(--u) * .08)!important;
}
.topToolbar .trackMain>img,
.topToolbar .groupMain>img{
  width:72%!important;
  height:72%!important;
}
.topToolbar .trackFlyout,
.topToolbar .toolFlyout{
  top:calc(var(--u) + 2px)!important;
}

.boardSurface{
  grid-column:1/11;
  grid-row:2;
  width:calc(var(--u) * 10);
  height:calc(var(--u) * 12);
  position:relative;
  overflow:visible;
  background:#aebe72;
}
.boardSurface>svg{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  display:block;
}
.boardSurface .grid{
  position:absolute!important;
  inset:0!important;
  left:0!important;
  top:0!important;
  width:100%!important;
  height:100%!important;
  display:grid!important;
  grid-template-columns:repeat(10,1fr)!important;
  grid-template-rows:repeat(12,1fr)!important;
  gap:0!important;
}
.boardSurface .cell{
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
}

.bottomToolbar{
  grid-column:1/11;
  grid-row:3;
  width:calc(var(--u) * 10);
  height:var(--u);
  display:grid!important;
  grid-template-columns:repeat(10,var(--u));
  grid-template-rows:var(--u);
  padding:0!important;
  gap:0!important;
  border-radius:0!important;
  align-items:stretch;
}
.bottomToolbar .playbackControls{
  grid-column:1/4;
  display:contents!important;
}
.bottomToolbar .iconBtn{
  width:var(--u)!important;
  height:var(--u)!important;
  min-width:0!important;
  border-radius:0!important;
  padding:calc(var(--u) * .08)!important;
}
.bottomToolbar .iconBtn svg{width:58%!important;height:58%!important}
.bottomToolbar .speedBtn{font-size:clamp(9px,calc(var(--u)*.28),16px)!important}
.levelInfo{
  grid-column:4/11;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  padding:0 calc(var(--u)*.14);
  border:1px solid #405a6c;
  background:#263846;
  color:#dfe7eb;
  font:800 clamp(8px,calc(var(--u)*.23),15px)/1 Inter,system-ui;
  letter-spacing:.03em;
}

/* flyouts scale from the same unit, but never alter the 10x14 body geometry */
.topToolbar .trackChoice,
.topToolbar .tool{
  width:var(--u)!important;
  height:var(--u)!important;
  min-width:0!important;
}
.topToolbar .trackFlyout,
.topToolbar .toolFlyout{
  grid-template-columns:repeat(4,var(--u))!important;
  gap:2px!important;
  padding:3px!important;
}

@media (orientation:landscape){
  .appShell.landscape .headerPanel{
    justify-content:center;
  }
  .appShell.landscape .brand{
    flex-direction:column;
    text-align:center;
  }
  .appShell.landscape .trailerPanel{
    justify-content:center;
  }
}

/* On very small units, preserve geometry first; visual details scale down. */
@media (max-width:520px){
  .badge{font-size:6px!important}
  .topToolbar .trackPreview{width:80%!important;height:65%!important}
}


/* =========================================================
   v7.1 - RESPONSIVE INFORMATION PANELS
   Portrait keeps H / Body / T geometry from v7.
   Landscape changes ONLY side-space distribution to 1:1.
   ========================================================= */

.infoCard{
  background:#0b111c;
  border-radius:clamp(14px,2.2vmin,28px);
  box-sizing:border-box;
  overflow:hidden;
}

.brandCard{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.headerPanel,
.trailerPanel{
  box-sizing:border-box;
}

/* TRAILER: three distinct dark cards */
.trailerPanel{
  display:grid!important;
  gap:clamp(5px,1vmin,12px)!important;
}
.objectiveCard,
.moneyCard,
.timeCard{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  min-width:0;
  min-height:0;
}

.objectiveBlock,
.statBlock{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  box-sizing:border-box;
  padding:clamp(6px,1.4vmin,18px);
}

.objectiveBlock{
  gap:clamp(4px,.8vmin,10px);
  max-width:none!important;
}
.objectiveBlock strong,
.statBlock span{
  color:var(--accent);
  font-weight:900;
  letter-spacing:.05em;
}
.objectiveBlock span{
  color:#d7e0e6;
  line-height:1.25;
}
.statBlock{
  gap:clamp(3px,.7vmin,9px);
}
.statBlock b{
  color:#eef3f5;
  font-weight:900;
}

/* PORTRAIT:
   Existing Header / Body / Trailer proportions remain untouched.
   Trailer keeps the same available space, internally divided O / M / T. */
.appShell.portrait .headerPanel{
  padding:clamp(5px,1.2vmin,14px);
}
.appShell.portrait .brandCard{
  width:min(calc(var(--u) * 9.5),calc(100% - 8px));
  height:calc(100% - 4px);
}
.appShell.portrait .trailerPanel{
  grid-template-columns:1fr 1fr;
  grid-template-rows:minmax(0,2fr) minmax(0,1fr);
  padding:clamp(5px,1.2vmin,14px);
}
.appShell.portrait .objectiveCard{
  grid-column:1/3;
  grid-row:1;
}
.appShell.portrait .moneyCard{
  grid-column:1;
  grid-row:2;
}
.appShell.portrait .timeCard{
  grid-column:2;
  grid-row:2;
}
.appShell.portrait .objectiveBlock strong,
.appShell.portrait .statBlock span{
  font-size:clamp(11px,2.7vmin,18px);
}
.appShell.portrait .objectiveBlock span{
  font-size:clamp(10px,2.25vmin,16px);
}
.appShell.portrait .statBlock b{
  font-size:clamp(13px,3.1vmin,21px);
}

/* LANDSCAPE:
   Header and Trailer get equal shares, so the 10x14 Body is mathematically centered. */
.appShell.landscape{
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;
}
.appShell.landscape .headerPanel,
.appShell.landscape .trailerPanel{
  width:100%;
  height:100%;
  padding:clamp(8px,1.7vmin,22px);
}
.appShell.landscape .brandCard{
  width:100%;
  height:100%;
}
.appShell.landscape .brand{
  width:100%;
  height:100%;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:clamp(10px,2.1vmin,28px)!important;
  text-align:center;
}
.appShell.landscape .brandLoco{
  width:min(72%,calc(var(--u) * 4.7))!important;
  max-height:48%;
  object-fit:contain;
}
.appShell.landscape .brandText{
  width:94%;
  align-items:center;
}
.appShell.landscape .brandText strong{
  font-size:clamp(22px,3.25vw,58px)!important;
  line-height:.95;
  letter-spacing:.015em;
}
.appShell.landscape .brandText span{
  margin-top:clamp(5px,.8vmin,10px);
  font-size:clamp(10px,1.25vw,22px)!important;
  letter-spacing:.22em;
}

/* O = M + T -> 50 / 25 / 25 vertically */
.appShell.landscape .trailerPanel{
  grid-template-columns:1fr;
  grid-template-rows:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);
}
.appShell.landscape .objectiveCard{grid-column:1;grid-row:1}
.appShell.landscape .moneyCard{grid-column:1;grid-row:2}
.appShell.landscape .timeCard{grid-column:1;grid-row:3}

.appShell.landscape .objectiveBlock strong,
.appShell.landscape .statBlock span{
  font-size:clamp(15px,1.75vw,30px);
}
.appShell.landscape .objectiveBlock span{
  font-size:clamp(13px,1.35vw,24px);
  max-width:92%;
}
.appShell.landscape .statBlock b{
  font-size:clamp(20px,2.25vw,38px);
}

/* Very narrow side panels: typography follows available side width rather than overflowing. */
@media (orientation:landscape) and (max-aspect-ratio:4/3){
  .appShell.landscape .brandText strong{font-size:clamp(16px,2.2vw,30px)!important}
  .appShell.landscape .brandText span{font-size:clamp(8px,.9vw,13px)!important}
  .appShell.landscape .objectiveBlock strong,
  .appShell.landscape .statBlock span{font-size:clamp(10px,1.15vw,16px)}
  .appShell.landscape .objectiveBlock span{font-size:clamp(9px,1vw,14px)}
  .appShell.landscape .statBlock b{font-size:clamp(13px,1.5vw,22px)}
}


/* v7.1.1 - Portrait stats: one compact horizontal line */
.portraitStatLabel{display:none}

.appShell.portrait .moneyCard .statBlock,
.appShell.portrait .timeCard .statBlock{
  flex-direction:row!important;
  flex-wrap:nowrap!important;
  gap:clamp(5px,1.3vmin,12px)!important;
  padding:clamp(4px,1vmin,10px)!important;
  white-space:nowrap;
}
.appShell.portrait .moneyCard .fullStatLabel,
.appShell.portrait .timeCard .fullStatLabel{
  display:none;
}
.appShell.portrait .moneyCard .portraitStatLabel,
.appShell.portrait .timeCard .portraitStatLabel{
  display:inline;
  color:var(--accent);
  font-weight:900;
  letter-spacing:.05em;
  font-size:clamp(10px,2.45vmin,17px);
}
.appShell.portrait .moneyCard .statBlock b,
.appShell.portrait .timeCard .statBlock b{
  font-size:clamp(11px,2.65vmin,19px);
  line-height:1;
}

/* Landscape stays exactly as approved. */
.appShell.landscape .portraitStatLabel{display:none}
.appShell.landscape .fullStatLabel{display:inline}


/* v7.1.2 - H/T container background */
.headerPanel,
.trailerPanel{
  background:rgb(38,56,70)!important;
}


/* =========================================================
   v7.1.3 - NARROW LANDSCAPE TRANSITION MODE
   Physical landscape can use portrait composition when side panels
   become too narrow to preserve H/T information.
   Minimum vertical composition:
     H = 1 unit
     BODY = 14 units
     T = 2 units
   Total = 17 square units high.
   ========================================================= */

.appShell.transition{
  display:grid!important;
  grid-template-columns:1fr!important;
  grid-template-rows:var(--u) calc(var(--u) * 14) calc(var(--u) * 2)!important;
  justify-items:center!important;
  align-content:center!important;
  background:var(--bg);
}

.appShell.transition .headerPanel{
  grid-column:1!important;
  grid-row:1!important;
  width:calc(var(--u) * 10)!important;
  height:var(--u)!important;
  padding:calc(var(--u) * .06)!important;
}

.appShell.transition .gameBody{
  grid-column:1!important;
  grid-row:2!important;
}

.appShell.transition .trailerPanel{
  grid-column:1!important;
  grid-row:3!important;
  width:calc(var(--u) * 10)!important;
  height:calc(var(--u) * 2)!important;
  padding:calc(var(--u) * .06)!important;
  gap:calc(var(--u) * .06)!important;
}

/* Keep the same visual language as portrait, but make it fit the fixed
   one-row Header and two-row Trailer minimum. */
.appShell.transition .brandCard{
  width:100%!important;
  height:100%!important;
  border-radius:calc(var(--u) * .18)!important;
}
.appShell.transition .brand{
  width:100%;
  height:100%;
  flex-direction:row!important;
  gap:calc(var(--u) * .16)!important;
}
.appShell.transition .brandLoco{
  width:calc(var(--u) * 1.05)!important;
  max-height:88%;
}
.appShell.transition .brandText strong{
  font-size:calc(var(--u) * .34)!important;
}
.appShell.transition .brandText span{
  font-size:calc(var(--u) * .16)!important;
}

/* Trailer: Objective uses the upper row; Money/Time share the lower row. */
.appShell.transition .trailerPanel{
  grid-template-columns:1fr 1fr!important;
  grid-template-rows:1fr 1fr!important;
}
.appShell.transition .objectiveCard{
  grid-column:1/3!important;
  grid-row:1!important;
}
.appShell.transition .moneyCard{
  grid-column:1!important;
  grid-row:2!important;
}
.appShell.transition .timeCard{
  grid-column:2!important;
  grid-row:2!important;
}
.appShell.transition .infoCard{
  border-radius:calc(var(--u) * .16)!important;
}
.appShell.transition .objectiveBlock,
.appShell.transition .statBlock{
  padding:calc(var(--u) * .07)!important;
  gap:calc(var(--u) * .04)!important;
}
.appShell.transition .objectiveBlock strong,
.appShell.transition .statBlock span,
.appShell.transition .portraitStatLabel{
  font-size:calc(var(--u) * .17)!important;
}
.appShell.transition .objectiveBlock span{
  font-size:calc(var(--u) * .145)!important;
  line-height:1.05!important;
}
.appShell.transition .statBlock b{
  font-size:calc(var(--u) * .19)!important;
}

/* In transition, use compact portrait labels MONEY / TIME on one line. */
.appShell.transition .moneyCard .fullStatLabel,
.appShell.transition .timeCard .fullStatLabel{
  display:none!important;
}
.appShell.transition .moneyCard .portraitStatLabel,
.appShell.transition .timeCard .portraitStatLabel{
  display:inline!important;
}
.appShell.transition .moneyCard .statBlock,
.appShell.transition .timeCard .statBlock{
  flex-direction:row!important;
  white-space:nowrap!important;
}

/* Side bands are intentional in this mode. */
.appShell.transition::before,
.appShell.transition::after{
  content:none;
}


/* v7.1.4 - transition fix
   Transition is now an exclusive layout class, never ".portrait.transition". */
.appShell.transition{
  width:100vw!important;
  height:100dvh!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  grid-template-rows:var(--u) calc(var(--u) * 14) calc(var(--u) * 2)!important;
  justify-items:center!important;
  align-content:center!important;
  overflow:hidden!important;
}

.appShell.transition .headerPanel{
  display:flex!important;
  grid-column:1!important;
  grid-row:1!important;
  width:calc(var(--u) * 10)!important;
  height:var(--u)!important;
  min-height:var(--u)!important;
  overflow:visible!important;
}

.appShell.transition .gameBody{
  display:grid!important;
  grid-column:1!important;
  grid-row:2!important;
  width:calc(var(--u) * 10)!important;
  height:calc(var(--u) * 14)!important;
}

.appShell.transition .trailerPanel{
  display:grid!important;
  grid-column:1!important;
  grid-row:3!important;
  width:calc(var(--u) * 10)!important;
  height:calc(var(--u) * 2)!important;
  min-height:calc(var(--u) * 2)!important;
  overflow:visible!important;
}

/* Because transition no longer carries .portrait, explicitly retain the
   compact portrait information-card behavior. */
.appShell.transition .brandCard{
  width:100%!important;
  height:100%!important;
}
.appShell.transition .trailerPanel{
  grid-template-columns:1fr 1fr!important;
  grid-template-rows:1fr 1fr!important;
}
.appShell.transition .objectiveCard{grid-column:1/3!important;grid-row:1!important}
.appShell.transition .moneyCard{grid-column:1!important;grid-row:2!important}
.appShell.transition .timeCard{grid-column:2!important;grid-row:2!important}


/* =========================================================
   v7.1.5 - PORTRAIT MINIMUMS / TRANSITION TYPOGRAPHY
   H and T can never collapse:
     H >= 1u
     Body = 14u
     T >= 2u
   Extra portrait space still distributes 1:2.
   ========================================================= */

.appShell.portrait{
  grid-template-rows:
    minmax(var(--u),1fr)
    calc(var(--u) * 14)
    minmax(calc(var(--u) * 2),2fr)!important;
  align-content:stretch!important;
}

.appShell.portrait .headerPanel{
  min-height:var(--u)!important;
  overflow:visible!important;
}
.appShell.portrait .trailerPanel{
  min-height:calc(var(--u) * 2)!important;
  overflow:visible!important;
}

/* Transition screenshot showed we were being overly conservative.
   Increase typography while keeping it safely inside H=1 / T=2. */
.appShell.transition .brandText strong{
  font-size:calc(var(--u) * .43)!important;
}
.appShell.transition .brandText span{
  font-size:calc(var(--u) * .20)!important;
}
.appShell.transition .brandLoco{
  width:calc(var(--u) * 1.20)!important;
}

.appShell.transition .objectiveBlock strong,
.appShell.transition .statBlock span,
.appShell.transition .portraitStatLabel{
  font-size:calc(var(--u) * .23)!important;
}
.appShell.transition .objectiveBlock span{
  font-size:calc(var(--u) * .19)!important;
  line-height:1.08!important;
}
.appShell.transition .statBlock b{
  font-size:calc(var(--u) * .25)!important;
}

/* Slightly more breathing room while retaining the fixed two-row Trailer. */
.appShell.transition .objectiveBlock,
.appShell.transition .statBlock{
  padding:calc(var(--u) * .06)!important;
}


/* v7.1.6 - transition side bands use the common TrackWorld panel background */
.appShell.transition{
  background:rgb(38,56,70)!important;
}


/* =========================================================
   v7.1.7 - VERTICAL WIDTH LOCK
   Once H/B/T are stacked vertically, the three sections share the
   exact same width: 10 * --u. They scale as one piece.
   This prevents H/T from stretching back to viewport width when the
   Body becomes height-limited on narrower windows.
   ========================================================= */

.appShell.portrait,
.appShell.transition{
  justify-items:center!important;
  background:rgb(38,56,70)!important;
}

.appShell.portrait .headerPanel,
.appShell.portrait .trailerPanel,
.appShell.transition .headerPanel,
.appShell.transition .trailerPanel{
  width:calc(var(--u) * 10)!important;
  max-width:calc(var(--u) * 10)!important;
  justify-self:center!important;
}

/* Body already uses 10u; repeat explicitly so all three vertical zones
   are mathematically locked to the same width. */
.appShell.portrait .gameBody,
.appShell.transition .gameBody{
  width:calc(var(--u) * 10)!important;
  max-width:calc(var(--u) * 10)!important;
  justify-self:center!important;
}


/* =========================================================
   v7.1.8 - FINAL VERTICAL TRANSITION: LARGER DARK CARDS
   From transition onward, reduce the outer padding/gaps so the
   rounded dark cards use more of the available H/T panel area.
   Inner typography/content remains unchanged.
   ========================================================= */

.appShell.transition .headerPanel,
.appShell.portrait .headerPanel{
  padding:calc(var(--u) * .025)!important;
}

.appShell.transition .trailerPanel,
.appShell.portrait .trailerPanel{
  padding:calc(var(--u) * .025)!important;
  gap:calc(var(--u) * .025)!important;
}

/* Keep the cards themselves filling the enlarged usable area. */
.appShell.transition .brandCard,
.appShell.portrait .brandCard,
.appShell.transition .infoCard,
.appShell.portrait .infoCard{
  width:100%!important;
  height:100%!important;
}

/* Preserve all existing internal font/icon sizing. */


/* External submenu SVG migration.
   The existing .trackPreview box dimensions/layout are intentionally untouched. */
.trackPreview > img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  pointer-events:none;
}


/* Flyout sizing fix: no phantom black cells.
   Menu = exactly 3 toolbar-sized buttons.
   Signals = exactly 2 toolbar-sized buttons. */
.topToolbar .menuFlyout{
  grid-template-columns:repeat(3,var(--u))!important;
  width:calc(3 * var(--u))!important;
  min-width:calc(3 * var(--u))!important;
}
.topToolbar .menuFlyout .menuAction{
  width:var(--u)!important;
  height:var(--u)!important;
  min-width:var(--u)!important;
  min-height:var(--u)!important;
  box-sizing:border-box;
}
.topToolbar .menuFlyout .menuAction img{
  width:72%!important;
  height:72%!important;
  object-fit:contain;
}

.topToolbar .signalFlyout{
  grid-template-columns:repeat(2,var(--u))!important;
  width:calc(2 * var(--u))!important;
  min-width:calc(2 * var(--u))!important;
}
.topToolbar .signalFlyout .tool{
  width:var(--u)!important;
  height:var(--u)!important;
  min-width:var(--u)!important;
  min-height:var(--u)!important;
  box-sizing:border-box;
}


/* Tiny backing-size correction only: keep the existing buttons untouched,
   but let the dark flyout background fully wrap them. */
.topToolbar .menuFlyout{
  width:auto!important;
  min-width:calc(3 * var(--u))!important;
  box-sizing:content-box!important;
}
.topToolbar .signalFlyout{
  width:auto!important;
  min-width:calc(2 * var(--u))!important;
  box-sizing:content-box!important;
}


/* Final menu-layout pass: Rectas and 45° curves are exact 2x2 flyouts. */
.topToolbar .rectasFlyout,
.topToolbar .curvas45Flyout{
  grid-template-columns:repeat(2,var(--u))!important;
  grid-template-rows:repeat(2,var(--u))!important;
  width:auto!important;
  min-width:calc(2 * var(--u))!important;
  box-sizing:content-box!important;
}


/* 135° curves: open the 4x2 flyout to the RIGHT even in portrait/transition.
   This intentionally overrides the generic "later track groups open left" rule. */
.trackGroup:has(.bend135Flyout) .bend135Flyout{
  left:0!important;
  right:auto!important;
}


/* Playback glyphs: white for stronger visibility. */
.playbackControls .iconBtn,
.playbackControls .iconBtn svg,
.playbackControls .speedBtn{
  color:#ffffff!important;
}

/* Hamburger menu now has exactly 4 toolbar-sized actions, no unused backing. */
.topToolbar .menuFlyout{
  grid-template-columns:repeat(4,var(--u))!important;
  min-width:calc(4 * var(--u))!important;
  width:auto!important;
  box-sizing:content-box!important;
}

/* Levels modal */
.levelsModal{
  display:none;
  position:fixed;
  inset:0;
  z-index:50000;
  background:rgba(5,12,18,.62);
  align-items:center;
  justify-content:center;
  padding:16px;
}
.levelsModal.open{display:flex}
.levelsWindow{
  width:min(360px,90vw);
  background:#111b24;
  border:1px solid #405a6c;
  border-radius:12px;
  box-shadow:0 18px 55px #000b;
  padding:10px;
  color:#fff;
}
.levelsHeader{
  height:34px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 2px 8px 6px;
  font:800 14px/1 Inter,system-ui;
  letter-spacing:.08em;
}
.levelsClose{
  width:30px;
  height:30px;
  border:1px solid #405a6c;
  border-radius:7px;
  background:#263846;
  color:#fff;
  font:700 21px/1 Arial,sans-serif;
  cursor:pointer;
}
.levelsGrid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:6px;
}
.levelBtn{
  aspect-ratio:1;
  min-width:0;
  border:1px solid #405a6c;
  border-radius:8px;
  background:#263846;
  color:#fff;
  font:800 clamp(14px,4vw,22px)/1 Inter,system-ui;
  cursor:pointer;
}
.levelBtn:hover:not(:disabled){border-color:#f5d25b}
.levelBtn:disabled{
  opacity:.28;
  cursor:default;
}

/* LAB ONLY: moving trains rendered as HTML/CSS instead of inside the main SVG. */
.boardSurface{position:relative}
.trainDomLayer{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:30;
}
.trainDomWorld{
  position:absolute;
  left:0;
  top:0;
  width:600px;
  height:720px;
  transform-origin:0 0;
  pointer-events:none;
}
.domTrainPart{
  position:absolute;
  left:0;
  top:0;
  width:0;
  height:0;
  opacity:0;
  transform-origin:0 0;
  will-change:transform,opacity;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  pointer-events:none;
}
.domTrainPart img{
  position:absolute;
  display:block;
  max-width:none;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.domTrainPart.loco img{
  left:-36.5px;
  top:-54.75px;
  width:87.6px;
  height:76.65px;
}
.domTrainPart.wagon img{
  left:-29.2px;
  top:-25.55px;
  width:58.4px;
  height:47.45px;
}


/* LAB adjustment: station artwork renders ABOVE the DOM train layer,
   so locomotives/wagons visually enter and leave behind the station façade. */
.stationDomOverlay{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:40;
  pointer-events:none;
  overflow:visible;
}

.worldDepthLayer,.trainDomLayer,.uiOverlayLayer{
  position:absolute;inset:0;pointer-events:none;overflow:visible;
}
.worldDepthLayer{z-index:20}
.trainDomLayer{z-index:20}
.uiOverlayLayer{z-index:1000}
.worldDepthWorld,.trainDomWorld,.uiOverlayWorld{
  position:absolute;left:0;top:0;width:600px;height:720px;
  transform-origin:0 0;pointer-events:none;
}
.depthEntity{
  position:absolute;left:0;top:0;width:0;height:0;
  pointer-events:none;transform-origin:0 0;
}
.depthEntity img{
  position:absolute;display:block;max-width:none;pointer-events:none;
  user-select:none;-webkit-user-drag:none;
}
.domTrainPart{position:absolute;z-index:0}
.uiBadge{
  position:absolute;transform:translate(-50%,-50%);
  background:#263846;color:#fff;border:1px solid #405a6c;
  border-radius:6px;padding:2px 5px;
  font:700 10px/1.1 Arial,sans-serif;white-space:nowrap;pointer-events:none;
}


/* Depth-order correction:
   trains and world objects must participate in the SAME stacking context.
   trainDomWorld is now only a transparent coordinate container. */
.trainDomLayer{display:none!important}
.worldDepthLayer{z-index:20!important}
.trainDomWorld{
  position:absolute!important;
  left:0!important;
  top:0!important;
  width:600px!important;
  height:720px!important;
  transform:none!important;
  z-index:auto!important;
  pointer-events:none!important;
}