.harbor-hs298-game{box-sizing:border-box;height:100dvh;min-height:0;display:flex;flex-direction:column;gap:7px;padding:8px;overflow:hidden;background:#183b40}
.harbor-hs298-game .topbar{flex:none;margin:0}
.hs298-viewport{position:relative;flex:1;min-height:0;overflow:hidden;border-radius:18px;background:#203d43 center/cover no-repeat}
.hs298-scene{position:absolute;left:50%;top:50%;width:1672px;height:941px;transform-origin:center;overflow:hidden;isolation:isolate;font-family:'Trebuchet MS',Arial,sans-serif;color:#fff4dc}
.hs298-scene *{box-sizing:border-box}
.hs298-yard-bg,.hs298-mainline-bg,.hs298-platform-bg{position:absolute;inset:0;background-position:center;background-size:100% 100%;z-index:-2}
.hs298-yard-bg{background-image:url('assets/train-v298/yard.png')}
.hs298-mainline-bg{background-image:url('assets/train-v298/mainline.png')}
.hs298-platform-bg{background-image:url('assets/train-v298/station-background-v2.webp')}
.hs298-platform-rail,.hs298-mainline-rail{position:absolute;left:0;right:0;height:20px;background:linear-gradient(#776858 0 12%,#e4d5b9 16%,#67513c 26%,transparent 27% 70%,#efe2c9 76%,#513e32 86%,#7b6251 100%);box-shadow:0 12px 0 #493a2d66}
.hs298-platform-rail{display:none}.hs298-mainline-rail{top:480px}
.hs298-train{position:absolute;transform-origin:0 0;filter:drop-shadow(0 7px 4px #251b1866);pointer-events:none}
.hs298-part{position:absolute;top:0}
.hs298-body,.hs298-engine{position:absolute;top:0;height:100%;object-fit:fill}
.hs298-body{left:0;width:100%;z-index:2}
.hs298-smoke{display:none;position:absolute;z-index:6;width:30px;height:18px;pointer-events:none}
.hs298-platform-train .hs298-smoke,.hs298-passing .hs298-smoke{display:block}
.hs298-smoke i{position:absolute;left:5px;bottom:0;width:24px;height:24px;border-radius:50%;background:radial-gradient(circle at 36% 34%,#fffefa 0 25%,#e4e5dfd9 55%,#c8ccc700 77%);filter:blur(1px);animation:hs298-puff 2.4s ease-out infinite}
.hs298-smoke i:nth-child(2){animation-delay:.8s}.hs298-smoke i:nth-child(3){animation-delay:1.6s}
@keyframes hs298-puff{0%{transform:translate(0,0) scale(.55);opacity:0}12%{opacity:.8}75%{opacity:.45}100%{transform:translate(25px,-105px) scale(2.9);opacity:0}}
.hs298-content{position:absolute;z-index:3;left:27.85%;top:19.19%;width:50.45%;height:42.375%;object-fit:contain;background:#fffdf5}
.hs298-empty-window{position:absolute;z-index:3;left:27.85%;top:19.19%;width:50.45%;height:42.375%;background:linear-gradient(145deg,#fffdf4,#f5e9d2);box-shadow:inset 0 0 0 2px #d3ad73,inset 0 0 13px #8b602e44}
.hs298-content.hs298-passenger{background:transparent;object-fit:contain}
.hs298-signal{position:absolute;width:20px;height:20px;border-radius:50%;background:transparent;pointer-events:none;z-index:4}
.hs298-signal.lit{background:radial-gradient(circle,#fffbe7 0 30%,#ffe276 45%,#ffd33a00 74%);box-shadow:0 0 22px 9px #ffe68a,0 0 43px 22px #ffdf7044}
.hs298-caption{position:absolute;top:calc(19px + var(--hs298-top-inset,0px));left:50%;transform:translateX(-50%);z-index:10;max-width:930px;min-height:54px;padding:9px 30px;margin:0;border:4px solid #d4a562;border-radius:17px;background:#fff1ccf2;color:#4c341e;text-align:center;font-size:29px;font-weight:800;box-shadow:0 5px 12px #3c271c55}
.hs298-scene[data-phase="arrival"] .hs298-caption,.hs298-scene[data-phase="loading"] .hs298-caption,.hs298-scene[data-phase="choose"] .hs298-caption,.hs298-scene[data-phase="review"] .hs298-caption,.hs298-scene[data-phase="boarding"] .hs298-caption{top:calc(27px + var(--hs298-top-inset,0px));right:calc(35px + var(--hs298-side-inset,0px));left:auto;transform:none;max-width:540px;min-height:48px;padding:8px 18px;font-size:25px;text-align:right}
.hs298-panel{position:absolute;z-index:12;left:50%;top:51%;transform:translate(-50%,-50%);width:760px;padding:32px 42px;border:5px solid #d7a95e;border-radius:26px;background:#173d43f0;box-shadow:0 13px 30px #17242299;text-align:center}
.hs298-panel h2{font-size:44px;margin:0 0 14px}.hs298-panel p{font-size:27px;line-height:1.35;margin:0 0 24px}
.hs298-button,.hs298-launch{min-height:70px;padding:12px 32px;border:5px solid #eac77c;border-radius:20px;background:linear-gradient(#ffefb7,#d5a361);color:#4c301d;font:800 30px 'Trebuchet MS',Arial,sans-serif;box-shadow:0 6px 9px #37271977;cursor:pointer}
.hs298-panel .hs298-button+.hs298-button{margin-left:18px}
.hs298-launch{position:absolute;left:50%;bottom:calc(44px + var(--hs298-top-inset,0px));transform:translateX(-50%);z-index:10;animation:hs298-glow 1.1s ease-in-out infinite alternate}
@keyframes hs298-glow{to{box-shadow:0 0 25px 12px #ffe790,0 6px 9px #37271977}}
.hs298-platform-world{position:absolute;inset:0;z-index:1;isolation:isolate;transform-origin:50% 54%;transition:transform 1s ease-in-out;will-change:transform}
.hs298-platform-world.hs298-camera-close{transform:translateX(-45px) scale(1.16)}
.hs298-platform-train{position:absolute;inset:0;z-index:2;pointer-events:none}
.hs298-platform-train.hs298-arriving .hs298-train{animation:hs298-enter 2.15s cubic-bezier(.25,.65,.45,1) both}
.hs298-platform-train.hs298-leave-now .hs298-train{animation:hs298-leave 1.9s ease-in both}
@keyframes hs298-enter{from{transform:translateX(-1900px)}to{transform:translateX(0)}}
@keyframes hs298-leave{from{transform:translateX(0)}to{transform:translateX(1900px)}}
.hs298-platform-child{position:absolute;z-index:5;left:1345px;bottom:125px;max-height:315px;max-width:240px;object-fit:contain;object-position:bottom;filter:drop-shadow(2px 7px 3px #31251c88)}
.hs298-platform-child.hs298-walk{animation:hs298-child-walk 1.8s ease-in forwards}
.hs298-platform-child.hs298-child-gone{display:none}
@keyframes hs298-child-walk{0%{transform:translateX(0);opacity:1}82%{transform:translateX(-1190px);opacity:1}100%{transform:translateX(-1210px);opacity:0}}
.hs298-platform-sign{position:absolute;top:calc(95px + var(--hs298-top-inset,0px));right:calc(35px + var(--hs298-side-inset,0px));z-index:10;padding:8px 16px;border:4px solid #c9944c;border-radius:12px;background:#f7e4ba;color:#47311f;font-size:22px;font-weight:800}
.hs298-repeat{position:absolute;z-index:10;top:calc(153px + var(--hs298-top-inset,0px));right:calc(35px + var(--hs298-side-inset,0px));width:52px;height:52px;border:4px solid #e4c37d;border-radius:50%;background:#206778;color:#fff;font-size:26px;cursor:pointer;box-shadow:0 5px 12px #3c271c55}
.hs298-choices{position:absolute;z-index:7;left:95px;top:588px;width:825px;height:235px;display:flex;justify-content:center;align-items:flex-end;gap:15px}
.hs298-choice{position:relative;flex:none;width:235px;height:235px;padding:0;border:0;background:transparent url('assets/train-v298/wooden-crate.png') center/contain no-repeat;filter:drop-shadow(0 7px 4px #33211555);cursor:pointer;transition:transform .2s}
.hs298-choice img{position:absolute;left:24%;top:31.25%;width:52%;height:39%;aspect-ratio:4/3;object-fit:contain;background:#fff8e9}
.hs298-caption .article-het{color:#d52218}
.hs298-choice:not(:disabled):hover{transform:translateY(-6px)}
.hs298-choice.wrong{animation:hs298-shake .4s ease-in-out}
@keyframes hs298-shake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.hs298-scene button:focus-visible{outline:5px solid #fff8b1;outline-offset:4px}
.hs298-park-arrival{animation:hs298-park 1.8s ease-out both}
@keyframes hs298-park{from{transform:translateX(-800px)}to{transform:translateX(0)}}
.hs298-passing,.hs298-depart-train{position:absolute;inset:0}
.hs298-depart-train{visibility:hidden;pointer-events:none}
.hs298-depart-train.hs298-pass-now{visibility:visible}
.hs298-depart-train.hs298-pass-now .hs298-train{animation:hs298-pass 6.8s linear both}
@keyframes hs298-pass{from{transform:translateX(0)}to{transform:translateX(3800px)}}
.hs298-counter{position:absolute;right:30px;top:24px;z-index:8;border:4px solid #d9aa64;border-radius:12px;padding:8px 20px;background:#fff0c8;color:#4d311a;font-size:26px;font-weight:800}
.hs298-finish{top:49%}
.hs298-scene[data-phase="arrival"] .hs298-platform-bg,.hs298-scene[data-phase="park"] .hs298-yard-bg,.hs298-scene[data-phase="departure"] .hs298-mainline-bg{animation:hs298-scene-in .55s ease-out both}
@keyframes hs298-scene-in{from{opacity:.25}to{opacity:1}}
@media(max-height:520px){.harbor-hs298-game{padding:3px;gap:3px}.harbor-hs298-game .topbar{max-height:50px}}
@media(prefers-reduced-motion:reduce){.hs298-platform-world,.hs298-choice{transition:none!important}.hs298-platform-train.hs298-arriving .hs298-train,.hs298-platform-train.hs298-leave-now .hs298-train,.hs298-child-walk,.hs298-park-arrival,.hs298-depart-train.hs298-pass-now .hs298-train{animation-duration:.1s!important}.hs298-smoke i{animation:none!important}}