:root{
  --bg:#0f1821; --panel:#111c28; --lane:#1a2740; --ink:#cfe9ff;
  --gate:#ffb02a; --slot:#7fa3c7; --shadow:0 8px 20px rgba(0,0,0,.35);
  --laneH:36px; --trackH:24px; --col-gap:10px;

  /* Desktop / default lengths (you can tune these) */
  --lane-max: 360px;  /* lanes + clean width cap */
  --entry-max: 220px; /* Entry box width cap */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--bg);color:var(--ink);
  font-family:system-ui,Segoe UI,Roboto,Arial;margin:0
}
#lot{
  max-width:100vw; /* ensure we don't exceed viewport width in embeds */
  width:100%;
  margin:0 auto;padding:6px 10px 10px;position:relative
}

/* Title */
.board-title{margin:0 0 6px}
.board-title h2{margin:0;font-size:20px;font-weight:700;letter-spacing:.2px}

/* Lanes */
.rows{display:grid;gap:8px}
.row{
  display:grid;grid-template-columns:150px 1fr;align-items:center;gap:var(--col-gap);
  min-height:var(--laneH);
}
.header{
  display:flex;align-items:center;justify-content:center;
  background:#0d1627;border:1px solid #1b2a44;border-radius:9999px;
  padding:.25em .6em;
}
.header .hline{font-weight:700;letter-spacing:.2px}

.lane{
  position:relative;background:var(--panel);
  border:1px solid #1b2a44;border-radius:12px;
  padding:6px 8px;box-shadow:var(--shadow);
  width:100%;max-width:var(--lane-max);height:100%;overflow:hidden;
}
.track{height:var(--trackH);background:var(--lane);border:1px solid #152033;border-radius:8px}

/* Hide inner lane labels */
.row .lane-name{display:none!important}

/* Clean note single line */
.row[data-lane="5"] .lane{min-height:42px}
.row[data-lane="5"] .lane-note{
  margin:2px 0 0;font-size:12px;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}

/* ===== 3-cell chase row (Exit | Slot | Entry) ===== */
.chase-row-grid-3{
  display:grid;
  grid-template-columns:150px minmax(200px, 240px) 1fr;
  gap:var(--col-gap);
  align-items:start;
  margin-top:10px;
}

/* Box styling */
.chase-wrap{
  position:relative;background:var(--panel);
  border:1px solid #1b2a44;border-radius:12px;
  padding:8px;min-height:88px;box-shadow:var(--shadow);
  width:100%;
}

/* Entry respects its own max width */
#chaseEntryWrap{max-width:var(--entry-max)}

/* Labels */
.feeder-title{font-size:12px;opacity:.8;margin-bottom:4px}

/* Gate tracks */
.feeder-track{
  position:relative;height:50px;background:#0e1726;
  border:1px solid #152033;border-radius:8px;
  box-shadow:inset 0 0 0 2px #0e1726,inset 0 6px 18px rgba(0,0,0,.35)
}
.feeder-track.right-pinned{padding-right:18px}

/* Exit arm (left hinge) */
.arm-hinge.left{position:absolute;left:12px;top:50%}
.arm.left{
  position:absolute;left:0;top:-3px;width:96px;height:6px;border-radius:4px;
  background:#eab308;border:2px solid #78350f;transform-origin:left center;z-index:3;
}

/* Entry arm (RIGHT hinge, tight to right) */
.arm-hinge.right{position:absolute;right:12px;top:50%}
.arm.right{
  position:absolute;right:0;top:-3px;width:96px;height:6px;border-radius:4px;
  background:#eab308;border:2px solid #78350f;transform-origin:right center;z-index:3;
}

/* Arm animations */
.arm.raise{animation:armUp .6s ease forwards}
.arm.lower{animation:armDown .46s ease forwards}
@keyframes armUp{from{transform:rotate(0)}to{transform:rotate(-90deg)}}
@keyframes armDown{from{transform:rotate(-90deg)}to{transform:rotate(0)}}

/* Slot (JS matches to MEL'S CHASE pill) */
.chase-slot-wrap{display:flex;align-items:center;justify-content:center}
.chase-slot{
  border:2px dashed var(--slot);border-radius:10px;opacity:.95;
  width:180px;height:38px; /* JS overrides to exact pill size */
}

/* Tokens / drivers */
.token,.driver{position:absolute;left:-99999px;top:-99999px;z-index:30}
.token{min-width:52px;height:18px;line-height:18px;padding:0 8px;border-radius:10px;background:#69aefc;color:#07213a;font-weight:800;font-size:12px;box-shadow:0 8px 20px rgba(0,0,0,.35);text-align:center}
.token.chase{background:#ffb1c8}
.driver{width:18px;height:18px;border-radius:50%;background:#ff97d1;display:flex;align-items:center;justify-content:center}

/* ========= Mobile landscape fixes ========= */
@media (orientation:landscape) and (max-width: 900px){
  /* keep 2 columns so headers don't center above lanes */
  .row{ grid-template-columns:120px 1fr; }

  /* compress vertical space so all 5 rows fit without scrolling */
  :root{
    --laneH:28px;
    --trackH:18px;
  }
  .rows{ gap:6px }
  .board-title h2{ font-size:16px }

  /* make lane length adaptive to viewport width to avoid clipping left/right */
  /* 120px header + 10px gap + ~24px padding/margins */
  :root{
    --lane-max: calc(100vw - 120px - var(--col-gap) - 24px);
  }

  /* Chase row uses same header width */
  .chase-row-grid-3{
    grid-template-columns:120px minmax(150px, 200px) 1fr;
    gap:var(--col-gap);
    margin-top:8px;
  }

  /* Entry box width aligns to adaptive lane width */
  #chaseEntryWrap{ max-width: var(--lane-max); }
}

/* Smaller-height devices in landscape (very tight screens) */
@media (orientation:landscape) and (max-height: 420px){
  .rows{ gap:5px }
  .row{ min-height:24px }
  :root{ --trackH:16px }
  .feeder-track{ height:42px }
  .board-title h2{ font-size:15px }
}