@import url('./forest-train-prologue.css?v=manual-06');
/* Quiet interface over the carriage. The travelers themselves are the choices. */
.train-entry-pending .stage{visibility:hidden}
.train-entry-pending:after{content:'';position:fixed;inset:0;background:#080908;z-index:60}
.train-entry{position:fixed;inset:0;z-index:50;isolation:isolate;color:#f5e6c2;overflow:hidden;touch-action:manipulation;background:#142124;--traveler-color:#d8bd7d;outline:none}
.train-entry *{box-sizing:border-box}
.train-entry[data-phase='prologue'] :is(.train-heading,.train-seats,.train-departure),.train-entry[data-phase='revealing'] :is(.train-heading,.train-seats,.train-departure),.train-entry[data-phase='conductor'] :is(.train-heading,.train-seats,.train-departure){opacity:0;visibility:hidden;pointer-events:none}
.train-entry[data-phase='choosing'] .train-heading,.train-entry[data-phase='choosing'] .train-departure{animation:train-choices-appear .6s ease both}
@keyframes train-choices-appear{from{opacity:0}to{opacity:1}}
.train-visual,.train-seats{position:absolute;inset:0;transition:opacity .7s ease}
.train-visual canvas{display:block;width:100%;height:100%;image-rendering:pixelated;touch-action:manipulation}
.train-visual:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(#07101165,transparent 20%,transparent 80%,#08131585)}
.train-heading{position:absolute;left:clamp(20px,3.3vw,58px);top:max(25px,env(safe-area-inset-top));z-index:3;pointer-events:none;text-shadow:0 2px 2px #111b1d}
.train-line-id{color:#bcaa80;margin-bottom:12px;--letter-pixel:1px}
.train-heading h1{display:flex;flex-direction:column;gap:3px;color:#e8d4a7;margin:0;line-height:0}
.train-next-stop{display:block;color:#b8bda8;--letter-pixel:1px}
.train-destination{display:block;--letter-pixel:4px}
.train-seats{z-index:2;pointer-events:none}
.train-seat{position:absolute;margin:0;padding:0;appearance:none;border:0;background:none;box-shadow:none;cursor:pointer;pointer-events:auto;min-width:44px;min-height:44px;touch-action:manipulation;border-radius:6px;outline-offset:5px}
.train-seat:hover{background:none}
.train-seat:focus-visible{outline:none}
.train-seat:focus-visible .train-seat-label,.train-seat:hover .train-seat-label{color:#ffe4a2;outline:none}
.train-seat-label{position:absolute;display:block;width:max-content;transform:translate(-50%,-50%);padding:0;color:#c9c4a9;background:none;border:0;border-radius:0;box-shadow:none;line-height:0;pointer-events:auto;--letter-pixel:3px}
.train-pixel-word{display:block;width:calc(var(--glyph-width)*var(--letter-pixel,2px));height:calc(var(--glyph-height)*var(--letter-pixel,2px));overflow:visible;image-rendering:pixelated}
.train-seat[aria-pressed='true'] .train-seat-label{color:#f2d18c}
.train-seat:focus-visible .train-seat-label:after{content:'';position:absolute;bottom:-2px;left:50%;width:9px;height:2px;transform:translateX(-50%);background:#f2d18c;box-shadow:1px 1px #15231e}
.train-seat-marker{position:absolute;display:none;transform:translate(-50%,-100%);padding:0;color:#fff08a;background:none;border:0;box-shadow:none;line-height:0;pointer-events:none}
.train-pixel-pointer{display:block;width:56px;height:88px;image-rendering:pixelated;overflow:visible;filter:drop-shadow(0 3px 0 #08130f)}
.train-seat[aria-pressed='true']{z-index:1}
.train-seat[aria-pressed='true'] .train-seat-marker{display:block}
.train-entry[data-phase='choosing'] .train-seat[aria-pressed='true'] .train-pixel-pointer{animation:train-selection-bob 1.2s steps(6,end) infinite}
@keyframes train-selection-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.train-departure{position:absolute;z-index:4;left:50%;bottom:max(19px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:12px;width:max-content;max-width:calc(100% - 24px)}
.train-arrive,.train-skip{appearance:none;position:relative;color:#eed49c;background:#253b32;border:3px solid #a99563;border-radius:0;box-shadow:inset 3px 3px #4c6050,inset -3px -3px #10241e;clip-path:polygon(6px 0,calc(100% - 6px) 0,calc(100% - 6px) 3px,100% 3px,100% calc(100% - 6px),calc(100% - 3px) calc(100% - 6px),calc(100% - 3px) 100%,3px 100%,3px calc(100% - 3px),0 calc(100% - 3px),0 6px,6px 6px);--letter-pixel:2px;line-height:0;cursor:pointer}
.train-arrive{--arrival-lift:-12px;flex-shrink:0;min-height:48px;padding:8px 17px;white-space:nowrap;transform:translateY(var(--arrival-lift)) scale(1.2);transform-origin:center}
.train-arrive:hover,.train-arrive:focus-visible,.train-skip:hover,.train-skip:focus-visible{background:#3e5643;border-color:#efd28a;color:#ffe6ae;outline:none}.train-arrive:active{transform:translateY(calc(var(--arrival-lift) + 2px)) scale(1.2);box-shadow:inset 3px 3px #10241e}.train-skip:active{transform:translateY(2px);box-shadow:inset 3px 3px #10241e}.train-arrive:disabled{cursor:default;opacity:.6}
.train-key-hint{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;max-width:100%;margin:0;color:#ded4b9;font:14px/1.5 system-ui;text-align:center;text-shadow:1px 2px #101b17}
.train-key-hint>span{white-space:nowrap}
.train-key-hint kbd{font:inherit;color:#f0ddb3;border:1px solid #b9aa7e55;border-radius:0;padding:0 3px;background:#192b23aa}
.train-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.train-arrival-status{position:absolute;z-index:5;left:50%;bottom:max(32px,env(safe-area-inset-bottom));transform:translateX(-50%);margin:0;padding:10px 16px;color:#f2dfb4;background:#172b25da;border:1px solid #a89b7166;font:13px/1.5 system-ui;letter-spacing:.08em;text-align:center;white-space:nowrap}
.train-skip{position:absolute;z-index:5;right:20px;bottom:20px;min-height:38px;padding:7px 13px}
.train-entry[data-phase='arriving']{background:transparent}
.train-entry[data-phase='arriving'].reveal-town :is(.train-visual,.train-seats,.train-heading){opacity:0;pointer-events:none}
.train-entry[data-phase='arriving'] .train-departure{visibility:hidden}
.traveler-badge{position:absolute;z-index:5;left:max(20px,env(safe-area-inset-left));top:76px;display:flex;gap:8px;align-items:center;padding:5px 8px;color:#eee0bf;background:#1b302ce8;border:1px solid var(--traveler-color,#a99c77);border-radius:3px;box-shadow:2px 2px #10202466;max-width:180px;--letter-pixel:2px}
.traveler-badge:hover{background:#314b3b}
.stage.is-conversing .traveler-badge,.stage.is-fatal .traveler-badge{visibility:hidden}
@media(max-width:700px){
 .train-heading{top:max(23px,env(safe-area-inset-top));left:20px;right:20px}.train-destination{--letter-pixel:3px}.train-line-id{margin-bottom:8px}
 .train-seat-label{padding:0;--letter-pixel:2px}
 .train-pixel-pointer{width:42px;height:66px}
 .train-departure{bottom:max(26px,env(safe-area-inset-bottom));gap:14px}.train-arrive{--arrival-lift:-8px;padding:7px 15px;min-height:46px}.train-key-hint{gap:6px 12px;font-size:13px}
 .train-skip{bottom:auto;top:24px;right:16px;font-size:11px}.traveler-badge{left:auto;right:12px;top:34px;padding:4px 7px;font-size:11px;max-width:calc(100% - 153px)}
}
@media(max-height:570px) and (min-width:701px){
 .train-heading{top:14px;left:18px}.train-destination{--letter-pixel:3px}.train-line-id{margin-bottom:6px}
 .train-departure{bottom:10px;gap:10px}.train-arrive{--arrival-lift:-6px;min-height:40px;padding:5px 13px}.train-key-hint{font-size:12px;gap:5px 12px}.train-seat-label{padding:0;--letter-pixel:2px}
 .train-pixel-pointer{width:42px;height:66px}
 .train-skip{bottom:auto;top:16px}.traveler-badge{top:74px}.train-arrival-status{bottom:18px}
}
@media(max-height:650px) and (max-width:700px){
 .train-heading{top:16px}.train-departure{bottom:17px}
}
@media(max-width:360px){.train-destination{--letter-pixel:2px}}
@media(prefers-reduced-motion:reduce){.train-visual,.train-seats,.train-heading,.train-seat-label{transition:none}.train-entry[data-phase='choosing'] .train-heading,.train-entry[data-phase='choosing'] .train-departure,.train-entry[data-phase='choosing'] .train-seat[aria-pressed='true'] .train-pixel-pointer{animation:none}}