.rhythmRailway{
  --rail-ink:#172033;
  --rail-muted:rgba(23,32,51,.68);
  --rail-line:rgba(23,32,51,.15);
  --rail-sky:#dff4ff;
  --rail-grass:#dff6d9;
  --rail-sun:#ffd45a;
  --rail-red:#ee5a46;
  --rail-green:#46a96d;
  --rail-blue:#2e87d8;
  --rail-plum:#7652a8;
  display:grid;
  grid-template-rows:minmax(0, 1fr);
  padding:8px;
  padding-top:calc(8px + env(safe-area-inset-top));
  padding-bottom:calc(8px + env(safe-area-inset-bottom));
  background:
    linear-gradient(180deg, #e9f8ff 0%, #f9fff2 58%, #fff7e0 100%);
  color:var(--rail-ink);
}

.railGameArea{
  min-height:0;
  display:grid;
  grid-template-rows:auto minmax(210px, 1fr) auto auto;
  gap:8px;
}

.railTop,
.railControls,
.buildPanel{
  border-radius:8px;
  border:1px solid var(--rail-line);
  background:rgba(255,255,255,.90);
  box-shadow:0 14px 32px rgba(23,32,51,.13);
}

.railTop{
  display:grid;
  grid-template-columns:minmax(260px, .95fr) minmax(0, 1.05fr);
  gap:12px;
  align-items:center;
  padding:10px 14px;
}

#appRoot:fullscreen .railTop,
#appRoot:-webkit-full-screen .railTop{
  padding-left:max(14px, min(190px, 28vw));
}

.railPrompt{
  display:grid;
  gap:4px;
  min-width:0;
}

.rhythmRailway .levelLabel,
.rhythmRailway .meterLabel{
  width:max-content;
  max-width:100%;
  min-height:30px;
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(46,135,216,.24);
  background:rgba(46,135,216,.12);
  color:#163e70;
  font-size:13px;
  font-weight:1000;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:0;
}

.rhythmRailway .mainPrompt{
  color:var(--rail-ink);
  font-size:clamp(29px, 4.5vw, 58px);
  line-height:1.02;
  font-weight:1100;
  text-wrap:balance;
}

.rhythmRailway .feedbackLine{
  min-height:25px;
  color:var(--rail-muted);
  font-size:clamp(15px, 1.45vw, 21px);
  line-height:1.2;
  font-weight:900;
}

.rhythmRailway .feedbackLine.good{ color:#1f8650; }
.rhythmRailway .feedbackLine.bad{ color:#bd3328; }
.rhythmRailway .feedbackLine.ready{ color:#9c6a00; }

.railTarget{
  min-width:0;
  display:grid;
  gap:8px;
  padding:10px;
  border-radius:8px;
  border:1px solid rgba(23,32,51,.13);
  background:linear-gradient(180deg, rgba(255,255,255,.88), rgba(239,250,255,.86));
}

.targetHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.routeText{
  color:var(--rail-muted);
  font-size:16px;
  font-weight:1000;
  white-space:nowrap;
}

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

.targetRhythm[data-beats="3"],
.beatSlots[data-beats="3"]{
  grid-template-columns:repeat(3, minmax(0, 1fr));
}

.rhythmChip,
.beatSlot{
  min-height:58px;
  display:grid;
  grid-template-rows:auto 1fr;
  place-items:center;
  gap:3px;
  padding:7px 6px;
  border-radius:8px;
  border:2px solid rgba(23,32,51,.12);
  background:#ffffff;
  color:var(--rail-ink);
  box-shadow:0 8px 18px rgba(23,32,51,.10);
}

.rhythmChip .beat,
.beatSlot .beat{
  color:rgba(23,32,51,.58);
  font-size:12px;
  line-height:1;
  font-weight:1000;
}

.rhythmChip .sound,
.beatSlot .sound{
  color:var(--rail-ink);
  font-size:clamp(17px, 1.8vw, 24px);
  line-height:1;
  font-weight:1100;
}

.rhythmChip.rest .sound,
.beatSlot.rest .sound{ color:#617084; }

.rhythmChip.titi,
.beatSlot.titi{
  border-color:rgba(70,169,109,.36);
  background:#effbf2;
}

.rhythmChip.rest,
.beatSlot.rest{
  background:#f3f5f8;
}

.progressTrack{
  height:15px;
  overflow:hidden;
  border-radius:999px;
  border:1px solid rgba(23,32,51,.10);
  background:rgba(23,32,51,.08);
}

.progressFill{
  width:0%;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg, var(--rail-blue), var(--rail-green), var(--rail-sun));
  transition:width .25s ease;
}

.railPlayWrap{
  min-height:0;
  position:relative;
  border-radius:8px;
  border:1px solid var(--rail-line);
  background:#dff4ff;
  overflow:hidden;
  box-shadow:0 18px 38px rgba(23,32,51,.16);
}

.railCanvas{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  touch-action:none;
}

.stationRibbon{
  position:absolute;
  left:14px;
  right:14px;
  bottom:12px;
  z-index:5;
  display:grid;
  grid-template-columns:repeat(6, minmax(0, 1fr));
  gap:7px;
  pointer-events:none;
}

.stationTag{
  min-height:34px;
  display:grid;
  place-items:center;
  padding:5px 6px;
  border-radius:8px;
  border:1px solid rgba(23,32,51,.16);
  background:rgba(255,255,255,.82);
  color:rgba(23,32,51,.64);
  font-size:12px;
  line-height:1.05;
  font-weight:1000;
  text-align:center;
}

.stationTag.complete{
  border-color:rgba(70,169,109,.30);
  background:rgba(223,246,217,.92);
  color:#20633d;
}

.stationTag.active{
  border-color:rgba(238,90,70,.34);
  background:rgba(255,236,209,.94);
  color:#8b3d22;
  box-shadow:0 8px 18px rgba(238,90,70,.16);
}

.runCallout{
  position:absolute;
  inset:0;
  z-index:8;
  display:grid;
  place-items:center;
  pointer-events:none;
  color:var(--rail-ink);
  font-size:clamp(42px, 8vw, 106px);
  line-height:1;
  font-weight:1100;
  text-align:center;
  text-shadow:0 6px 22px rgba(255,255,255,.85), 0 8px 28px rgba(23,32,51,.20);
  animation:rail-callout-pop .42s ease-out;
}

.runCallout.good{ color:#1e8a50; }
.runCallout.bad{ color:#bd3328; }
.runCallout.ready{ color:#9c6a00; }

@keyframes rail-callout-pop{
  0%{ opacity:0; transform:scale(.78); }
  60%{ opacity:1; transform:scale(1.05); }
  100%{ opacity:1; transform:scale(1); }
}

.buildPanel{
  display:grid;
  gap:8px;
  padding:10px;
}

.slotHeader{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.slotTitle{
  display:inline-block;
  margin-right:10px;
  color:var(--rail-ink);
  font-size:18px;
  font-weight:1100;
}

.selectedCardText{
  color:var(--rail-muted);
  font-size:15px;
  font-weight:1000;
}

.compactBtn{
  min-height:38px;
  padding:8px 11px;
  border-radius:8px;
  font-size:14px;
}

.beatSlot{
  min-height:76px;
  cursor:pointer;
  user-select:none;
  touch-action:manipulation;
}

.beatSlot.empty{
  border-style:dashed;
  background:rgba(255,255,255,.62);
}

.beatSlot.empty .sound{
  color:rgba(23,32,51,.34);
  font-size:clamp(15px, 1.5vw, 20px);
}

.beatSlot.check{
  border-color:rgba(238,90,70,.78);
  box-shadow:0 0 0 4px rgba(238,90,70,.18), 0 8px 18px rgba(23,32,51,.10);
}

.beatSlot.recent{
  border-color:rgba(46,135,216,.60);
  box-shadow:0 0 0 4px rgba(46,135,216,.13), 0 8px 18px rgba(23,32,51,.10);
}

.cardTray{
  display:grid;
  grid-template-columns:repeat(4, minmax(110px, 1fr));
  gap:8px;
}

.rhythmCardChoice{
  min-height:70px;
  display:grid;
  grid-template-columns:auto minmax(0, 1fr);
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:8px 10px;
  border-radius:8px;
  border:2px solid rgba(23,32,51,.14);
  background:#ffffff;
  color:var(--rail-ink);
  box-shadow:0 8px 18px rgba(23,32,51,.10);
  cursor:pointer;
  user-select:none;
  touch-action:manipulation;
}

.rhythmCardChoice .cardIcon{
  min-width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:rgba(46,135,216,.12);
  color:#163e70;
  font-size:20px;
  line-height:1;
  font-weight:1100;
}

.rhythmCardChoice .cardName{
  min-width:0;
  color:var(--rail-ink);
  font-size:20px;
  line-height:1.05;
  font-weight:1100;
  text-align:left;
}

.rhythmCardChoice.rest .cardIcon{ background:rgba(97,112,132,.13); color:#4f5f73; }
.rhythmCardChoice.titi .cardIcon{ background:rgba(70,169,109,.16); color:#20633d; }
.rhythmCardChoice.clear .cardIcon{ background:rgba(238,90,70,.14); color:#97372c; }

.rhythmCardChoice.active{
  border-color:rgba(46,135,216,.58);
  box-shadow:0 0 0 4px rgba(46,135,216,.14), 0 8px 18px rgba(23,32,51,.10);
}

.railControls{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(320px, .85fr) auto;
  gap:10px;
  align-items:center;
  padding:10px;
}

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

.rhythmRailway .pill{
  background:rgba(255,255,255,.82);
  border-color:rgba(23,32,51,.12);
  box-shadow:0 8px 20px rgba(23,32,51,.10);
}

.rhythmRailway .pill .label{ color:var(--rail-muted); }
.rhythmRailway .pill .value{ color:var(--rail-ink); }

.rhythmRailway .btn{
  border-radius:8px;
  color:var(--rail-ink);
  background:rgba(255,255,255,.82);
  border-color:rgba(23,32,51,.14);
  box-shadow:0 8px 20px rgba(23,32,51,.10);
}

.rhythmRailway .btn.primary{
  color:#123963;
  background:rgba(46,135,216,.16);
  border-color:rgba(46,135,216,.40);
}

.rhythmRailway .btn.ghost{
  background:rgba(255,255,255,.68);
}

.stationSelectGrid{
  width:min(1040px, 98%);
  margin:12px auto 4px;
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:9px;
  text-align:left;
}

.stationChoice{
  min-height:132px;
  display:grid;
  align-content:start;
  gap:7px;
  padding:12px;
  border-radius:8px;
  border:2px solid rgba(23,32,51,.14);
  background:#ffffff;
  color:var(--rail-ink);
  box-shadow:0 10px 24px rgba(23,32,51,.12);
  cursor:pointer;
  text-align:left;
}

.stationChoice strong{
  display:block;
  font-size:18px;
  line-height:1.08;
}

.stationChoice span{
  color:rgba(23,32,51,.70);
  font-size:13px;
  font-weight:900;
  line-height:1.25;
}

.stationChoice small{
  width:max-content;
  max-width:100%;
  display:inline-flex;
  align-items:center;
  padding:5px 8px;
  border-radius:999px;
  background:rgba(46,135,216,.12);
  color:#163e70;
  font-size:12px;
  font-weight:1000;
}

.stationChoice.active{
  border-color:rgba(46,135,216,.58);
  box-shadow:0 0 0 4px rgba(46,135,216,.13), 0 10px 24px rgba(23,32,51,.12);
}

.stationChoice.locked{
  opacity:.48;
  cursor:not-allowed;
}

.finishPattern{
  width:min(980px, 98%);
  margin:12px auto 4px;
  display:grid;
  gap:10px;
  text-align:left;
}

.finishStation{
  display:grid;
  grid-template-columns:minmax(120px, .28fr) minmax(0, 1fr);
  gap:8px;
  align-items:center;
  padding:9px;
  border-radius:8px;
  border:1px solid rgba(23,32,51,.12);
  background:rgba(23,32,51,.03);
}

.finishStationTitle{
  color:var(--rail-ink);
  font-size:15px;
  font-weight:1100;
}

.finishStation .targetRhythm{
  gap:6px;
}

.finishStation .rhythmChip{
  min-height:48px;
}

@media (max-width:1120px){
  .railControls{
    grid-template-columns:1fr;
  }
  .railControls .hudLeft,
  .railControls .hudRight{
    justify-content:center;
  }
}

@media (max-width:920px){
  .railTop{
    grid-template-columns:1fr;
  }
  .cardTray{
    grid-template-columns:repeat(2, minmax(120px, 1fr));
  }
  .stationSelectGrid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:680px){
  .rhythmRailway{
    padding:6px;
  }
  .railGameArea{
    grid-template-rows:auto minmax(180px, 1fr) auto auto;
  }
  .targetRhythm,
  .beatSlots,
  .targetRhythm[data-beats="3"],
  .beatSlots[data-beats="3"]{
    gap:6px;
  }
  .rhythmChip,
  .beatSlot{
    min-height:58px;
    padding:6px 4px;
  }
  .cardTray,
  .routeControls{
    grid-template-columns:1fr;
  }
  .stationRibbon{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
  .stationSelectGrid{
    grid-template-columns:1fr;
  }
  .finishStation{
    grid-template-columns:1fr;
  }
}

@media (max-height:720px){
  .rhythmRailway .mainPrompt{
    font-size:clamp(25px, 4vw, 46px);
  }
  .railGameArea{
    gap:6px;
  }
  .beatSlot,
  .rhythmCardChoice{
    min-height:58px;
  }
  .rhythmCardChoice .cardName{
    font-size:18px;
  }
}