/* Railway games: warm paper, clear numbers and controls that stay in the room. */
.rail-art { display:inline-flex; flex:none; }
.rail-art svg { width:100%; height:100%; overflow:visible; }
.game-room[data-slug="number-snake"] .stage,
.game-room[data-slug="missing-numbers"] .stage { background:#eff3e8; }
.game-room[data-slug="number-snake"] .stage-inner,
.game-room[data-slug="missing-numbers"] .stage-inner { gap:10px; min-height:0; }
.rail-carriage { position:relative; display:inline-flex; align-items:center; justify-content:center; flex:none; border:2px solid #426b63; border-radius:9px 9px 5px 5px; background:#f5c66e; color:#234b49; box-shadow:inset 0 -6px #d9a953; }
.rail-carriage::after { content:""; position:absolute; width:10px; height:4px; right:-11px; bottom:13%; background:#426b63; }
.rail-number { position:relative; z-index:1; font-weight:700; }
.rail-wheels { position:absolute; bottom:-9px; left:12%; width:15px; height:15px; border:4px solid #2e5553; background:#fff2cf; border-radius:50%; }
.rail-wheels::after { content:""; position:absolute; left:36px; top:-4px; width:15px; height:15px; border:4px solid #2e5553; background:#fff2cf; border-radius:50%; }
.rail-control { min-height:48px; border:2px solid #adc5ba; border-radius:16px; padding:8px 17px; background:#fffcf1; color:#284f4b; font:inherit; font-size:16px; font-weight:700; box-shadow:0 3px #d1ddce; cursor:pointer; touch-action:manipulation; }
.rail-control:active { transform:translateY(2px); box-shadow:0 1px #d1ddce; }
.rail-control.rail-go,.rail-control.rail-primary { background:#256a5d; border-color:#1a574b; color:#fffdf1; box-shadow:0 3px #164c43; }
.rail-control[aria-pressed="true"]:not(.rail-go) { background:#ffedb8; border-color:#a88131; color:#4b3c19; }
.rail-control:focus-visible,.rail-answer:focus-visible,.rail-slot:focus-visible { outline:3px solid #285c9a; outline-offset:3px; }

/* Driving yard */
.game-room .express-scene { display:flex; flex-direction:column; flex:1; width:100%; min-height:0; padding:12px; gap:9px; border-radius:23px; background:linear-gradient(#dceee7 0%,#f4f5dd 100%); border:1px solid #bfd6c3; overflow:hidden; }
.express-top { display:flex; align-items:center; gap:10px; min-height:28px; color:#36564c; }
.express-station-name { font-size:14px; font-weight:700; }
.express-status { flex:1; text-align:center; font-size:13px; }
.express-top .snake-count { padding:4px 10px; border-radius:12px; background:#fff9df; font-weight:700; font-size:14px; }
.express-strip { display:flex; align-items:center; justify-content:center; gap:7px; min-height:52px; padding-bottom:9px; }
.express-strip .strip-engine { width:57px; height:43px; transform:scaleX(-1); }
.express-strip .rail-carriage { width:clamp(21px,4vw,44px); height:32px; font-size:19px; }
.express-strip .rail-carriage.waiting { background:#fffdf2; border-style:dashed; box-shadow:none; color:#50695f; }
.express-strip .rail-carriage.next-carriage { outline:2px solid #bf7a20; outline-offset:2px; }
.express-strip .rail-carriage::after { width:6px; right:-8px; height:3px; }
.express-strip .rail-wheels { width:8px; height:8px; bottom:-5px; border-width:2px; left:12%; }
.express-strip .rail-wheels::after { display:none; }
.express-strip .rail-wheels { box-shadow:22px 0 0 -1px #2e5553; }
.game-room .express-yard { flex:1; position:relative; min-height:0; width:100%; display:flex; justify-content:center; align-items:center; container-type:size; }
.game-room .express-board {
  width:min(100cqw,calc(100cqh * var(--cols) / var(--rows))); height:auto; aspect-ratio:var(--cols)/var(--rows);
  max-height:100%; padding:5px; gap:2px; border:3px solid #8fab92; border-radius:15px;
  background-color:#f9f4d9; background-image:repeating-linear-gradient(0deg,transparent 0 8px,#c9cdb72b 8px 10px),repeating-linear-gradient(90deg,transparent 0 8px,#c9cdb72b 8px 10px);
  box-shadow:0 4px #78957e,0 0 0 7px #ffffff6b; touch-action:none; user-select:none;
}
.express-board .snake-cell { position:relative; background:transparent; border:0; font-size:clamp(14px,5cqh,25px); box-shadow:none; }
.express-board .snake-cell.food { color:#3b513f; background:#f5dba0; border:1.5px solid #b59960; border-radius:8px; box-shadow:0 2px #b9a779; }
.express-board .snake-cell.food.wanted { background:#fff7d9; color:#204f46; border:2px solid #28725f; box-shadow:0 0 0 3px #9fcdac; animation:none; }
.express-board .snake-cell.snake { background:#e1a466; border:2px solid #315e55; border-radius:6px; color:#244c48; box-shadow:0 3px #315e55; z-index:2; }
.express-board .snake-cell.snake::after { content:""; position:absolute; width:5px; height:5px; background:#234d4b; border-radius:50%; bottom:-4px; left:10%; box-shadow:18px 0 #234d4b; }
.express-board .snake-cell.head { background:transparent; border:0; box-shadow:none; z-index:3; }
.express-board .snake-cell.head::after { display:none; }
.express-board .head .rail-art { width:125%; height:125%; }
.express-board .head[data-facing="left"] .rail-art { transform:scaleX(-1); }
.express-board .head[data-facing="up"] .rail-art { transform:rotate(-90deg); }
.express-board .head[data-facing="down"] .rail-art { transform:rotate(90deg); }
.express-hint { position:absolute; top:8px; left:8px; padding:3px 16px; border:2px solid #315e55; background:#fff5c7; color:#244d47; border-radius:12px; font-size:36px; z-index:5; pointer-events:none; }
.game-room .express-controls { padding:0 2px 4px; width:100%; flex:none; display:flex; gap:10px; align-items:center; justify-content:center; }
.express-driving { width:min(100%,590px); display:flex; align-items:center; justify-content:center; gap:28px; }
.express-driving .snake-pad { display:grid; grid-template-columns:repeat(3,48px); grid-template-rows:repeat(2,44px); gap:5px; }
.express-driving .rail-steer { width:48px; height:44px; min-width:44px; min-height:44px; padding:0; font-size:25px; border:2px solid #a0bca9; border-radius:13px; background:#fffcf1; color:#264f48; box-shadow:0 3px #aec6b4; }
.rail-up { grid-area:1/2; }.rail-left { grid-area:2/1; }.rail-down { grid-area:2/2; }.rail-right { grid-area:2/3; }
.express-levers { display:grid; grid-template-columns:repeat(2,minmax(64px,1fr)); gap:7px; }
.express-levers .rail-control:first-child { grid-column:1/-1; }
.express-levers .rail-control { min-height:44px; padding:5px 13px; }
.express-station { position:absolute; inset:6px; z-index:4; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; border:2px solid #c2d3b6; border-radius:18px; background:#fffbedf7; color:#2d554d; text-align:center; padding:12px; }
.station-picture { position:relative; width:210px; max-height:55%; aspect-ratio:210/135; }
.station-picture>.rail-art:first-child { width:100%; height:100%; }
.station-picture .station-bear { position:absolute; width:63px; right:-13px; bottom:-4px; }
.express-station strong { font-size:clamp(21px,3vw,30px); }
.express-station>span { font-size:clamp(15px,2vw,20px); }

/* Repair platform */
.game-room .rail-repair { height:100%; min-height:0; width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; overflow:hidden; background:#fdf9e9; border:1px solid #d5dcc5; border-radius:23px; padding:18px 12px; }
.repair-heading { text-align:center; display:grid; gap:4px; flex:none; }
.rail-eyebrow { color:#697b63; font-size:12px; font-weight:700; letter-spacing:.12em; }
.rail-platform-status { color:#315b50; font-size:clamp(17px,2.5vw,25px); font-weight:700; }
.repair-landscape { width:100%; flex:1; min-height:160px; max-height:360px; position:relative; display:flex; flex-direction:column; justify-content:flex-end; padding:0 14px 30px; border-radius:16px; background:radial-gradient(ellipse at 8% 125%,#b7d8a7 0 40%,transparent 40.3%),radial-gradient(ellipse at 94% 130%,#cbdcae 0 40%,transparent 40.3%),linear-gradient(#dcefea,#edf5df); overflow:hidden; }
.repair-landscape::after { content:""; height:13px; background:repeating-linear-gradient(90deg,#ad9570 0 8px,transparent 8px 20px); position:absolute; bottom:14px; left:0; right:0; border-top:3px solid #526e61; border-bottom:3px solid #526e61; }
.rail-platform { position:relative; flex:1; min-height:0; max-height:155px; display:flex; align-items:flex-end; justify-content:center; gap:10px; }
.rail-platform>.rail-art { height:100%; width:160px; max-height:155px; }
.rail-station-label { position:absolute; bottom:4px; font-size:11px; border-radius:5px; padding:3px 10px; background:#fff9df; color:#31574d; border:1px solid #8cae99; }
.rail-signal { width:23px; height:45px; border-radius:9px; background:#345750; position:absolute; bottom:0; right:9%; border:3px solid #fff4d7; }
.rail-signal::before { content:""; position:absolute; top:6px; left:4px; width:9px; height:9px; border-radius:50%; background:#f4ba55; }
.rail-signal.green::before { background:#87e3a9; box-shadow:0 0 9px #87e3a9; }
.rail-signal::after { content:""; position:absolute; left:7px; width:4px; height:22px; top:39px; background:#345750; }
.repair-train { position:relative; z-index:1; display:flex; align-items:flex-end; gap:12px; width:min(100%,720px); margin:0 auto; flex:none; }
.repair-train>.repair-engine { width:18%; height:auto; transform:scaleX(-1); }
.rail-slot { background:none; border:0; padding:0 0 10px; color:#234b49; flex:1; min-width:0; touch-action:manipulation; cursor:pointer; }
.rail-slot .rail-carriage { width:100%; height:clamp(50px,8vw,90px); font-size:clamp(25px,4vw,44px); }
.rail-slot .rail-wheels { width:12px; height:12px; border-width:3px; }
.rail-slot .rail-wheels::after { display:none; }
.rail-slot .rail-wheels { box-shadow:35px 0 0 -1px #2e5553; }
.empty-carriage .rail-carriage { background:#fff9e9; box-shadow:none; border:2px dashed #7b967f; }
.active-gap .rail-carriage { outline:3px solid #ce9341; outline-offset:4px; background:#fff1bc; }
.rail-filled .rail-carriage { background:#b6dfac; box-shadow:inset 0 -6px #95c791; animation:rail-couple .35s ease; }
.rail-choice-label { font-size:14px; color:#62715d; flex:none; }
.repair-answers { display:flex; align-items:center; justify-content:center; gap:20px; flex:none; width:100%; padding:0 0 10px; }
.rail-answer { display:flex; justify-content:center; align-items:center; width:115px; height:103px; padding:12px; border:2px solid #d2d9c2; border-radius:20px; background:#fffdf6; box-shadow:0 4px #dadbc4; touch-action:none; cursor:pointer; }
.rail-answer .rail-carriage { width:78px; height:58px; font-size:35px; }
.rail-answer .rail-carriage::after { display:none; }
.rail-answer:disabled { opacity:.6; }
.rail-help { outline:3px solid #467c63; outline-offset:4px; }
.rail-drag-ghost { position:fixed!important; z-index:10000!important; width:80px!important; height:80px!important; pointer-events:none!important; opacity:.95; box-shadow:0 8px 20px #203c4938!important; }
.repair-train.departing { animation:rail-depart 1.1s ease-in both; }
.rail-paused * { animation-play-state:paused!important; }
@keyframes rail-couple { from { transform:translateY(-8px); } to { transform:translateY(0); } }
@keyframes rail-depart { 0%,15% { transform:translateX(0); } 100% { transform:translateX(-125%); } }

@media(max-width:600px) {
  .game-room .express-scene { padding:9px; gap:5px; border-radius:18px; }
  .express-top { gap:3px; }.express-station-name { font-size:11px; }.express-status { font-size:11px; }
  .express-strip { min-height:40px; gap:5px; }.express-strip .strip-engine { width:35px; height:30px; }
  .express-strip .rail-carriage { width:23px; height:28px; font-size:15px; }
  .express-strip .rail-wheels { box-shadow:12px 0 0 -1px #2e5553; }
  .express-driving { gap:16px; }.express-driving .snake-pad { grid-template-columns:repeat(3,44px); }.express-driving .rail-steer { width:44px; }
  .express-levers .rail-control { font-size:14px; padding:4px 10px; }
  .express-controls>.rail-control { font-size:14px; padding:6px 12px; }
  .game-room .rail-repair { padding:12px 8px; gap:10px; }
  .repair-landscape { padding:0 9px 28px; }
  .repair-train { gap:6px; }.repair-train>.repair-engine { width:16%; }
  .rail-slot .rail-carriage { height:46px; font-size:24px; }.rail-slot .rail-carriage::after { width:5px; right:-7px; }
  .rail-slot .rail-wheels { width:9px; height:9px; bottom:-6px; border-width:2px; box-shadow:23px 0 0 -1px #2e5553; }
  .repair-answers { gap:12px; }.rail-answer { width:88px; height:90px; padding:10px; }.rail-answer .rail-carriage { width:64px; height:50px; font-size:30px; }
  .rail-answer .rail-wheels::after { left:28px; }
}
@media(max-width:360px) { .express-strip { gap:3px; }.express-strip .rail-carriage { width:20px; font-size:13px; }.express-strip .strip-engine { width:25px; }.express-status { display:none; }.express-top .snake-count { margin-left:auto; }.rail-slot .rail-wheels { box-shadow:15px 0 0 -1px #2e5553; } }
@media(max-height:520px) and (min-width:600px) {
  .game-room[data-slug="number-snake"] .stage-inner { display:flex; flex-direction:row; align-items:stretch; }
  .game-room .express-controls { width:185px; flex-direction:column; }.express-driving { flex-direction:column; gap:10px; }
  .express-levers { display:flex; flex-wrap:wrap; justify-content:center; gap:5px; }.express-levers .rail-control { min-width:52px; }
  .express-status { display:none; }.express-top .snake-count { margin-left:auto; }
  .express-strip { min-height:30px; }.express-strip .rail-carriage { height:23px; font-size:14px; width:28px; }.express-strip .strip-engine { height:24px; }
  .game-room .rail-repair { display:grid; grid-template-columns:minmax(0,1fr) 100px; grid-template-rows:auto minmax(0,1fr); gap:5px 14px; padding:8px 12px; }
  .repair-heading { grid-area:1/1; }.repair-landscape { grid-area:2/1; min-height:0; height:100%; }.rail-choice-label { display:none; }.repair-answers { grid-area:1/2/3/3; flex-direction:column; gap:7px; padding:0; }
  .rail-answer { width:90px; height:55px; padding:4px 9px; }.rail-answer .rail-carriage { height:37px; width:60px; font-size:25px; }.rail-answer .rail-wheels { bottom:-6px; width:10px; height:10px; border-width:2px; }.rail-answer .rail-wheels::after { top:-2px; width:10px; height:10px; border-width:2px; }
  .rail-platform { max-height:80px; }.rail-slot .rail-carriage { height:48px; font-size:27px; }.repair-engine { max-height:64px; }
  .station-picture { max-height:40%; }.express-station { gap:3px; }.express-station strong { font-size:18px; }.express-station>span { font-size:14px; }
}
html.quiet .repair-train.departing { animation:none; opacity:.5; }
html.quiet .rail-filled .rail-carriage { animation:none; }
@media(prefers-reduced-motion:reduce) { .repair-train.departing,.rail-filled .rail-carriage { animation:none; }.repair-train.departing { opacity:.5; } }
/* Author display rules must not override the platform's hidden state. */
.express-controls [hidden],.express-yard [hidden],.express-driving[hidden],.express-controls>.rail-control[hidden] { display:none!important; }
@media(min-width:760px) {
  .game-room[data-slug="number-snake"] .stage-inner { flex-direction:row; align-items:stretch; }
  .game-room .express-controls { width:185px; flex-direction:column; }
  .express-driving { flex-direction:column; gap:18px; }
}
.game-room[data-slug="number-snake"] .game-feedback:empty { display:none; }
.express-board .snake-cell.food { border-radius:6px; }
.express-board .snake-cell.snake { font-size:clamp(15px,5cqh,25px); }
@media(max-width:600px) and (max-height:640px) {
  .game-room .rail-repair { padding:8px; gap:5px; }
  .repair-heading .rail-eyebrow { display:none; }
  .rail-platform-status { font-size:15px; line-height:1.2; }
  .repair-landscape { min-height:100px; padding:0 8px 22px; }
  .repair-landscape::after { bottom:8px; }
  .rail-platform { max-height:55px; }
  .rail-station-label { display:none; }
  .rail-slot { padding-bottom:8px; }
  .rail-slot .rail-carriage { height:36px; font-size:23px; }
  .repair-engine { max-height:44px; }
  .rail-choice-label { font-size:12px; line-height:1.1; }
  .repair-answers { padding-bottom:5px; gap:9px; }
  .rail-answer { width:80px; height:68px; padding:6px 9px; border-radius:16px; }
  .rail-answer .rail-carriage { height:39px; font-size:27px; }
  .rail-answer .rail-wheels { width:10px; height:10px; border-width:2px; bottom:-7px; }
  .rail-answer .rail-wheels::after { width:10px; height:10px; border-width:2px; top:-2px; }
}
@media(max-width:360px) {
  .game-room[data-slug="missing-numbers"] .game-room-header { flex-wrap:wrap; row-gap:4px; }
  .game-room[data-slug="missing-numbers"] .game-room-header>.game-room-title { order:2; flex:0 0 100%; }
  .game-room[data-slug="missing-numbers"] .game-room-title h1 { font-size:16px; white-space:normal; }
  .game-room[data-slug="missing-numbers"] .game-exit { margin-right:auto; }
}