.harbor-hs227-game{height:100dvh;padding:8px;gap:8px;display:flex;flex-direction:column;background:#173d43;overflow:hidden}
.harbor-hs227-game .topbar{flex:none;margin:0}
.hs227-viewport{position:relative;flex:1;min-height:0;border-radius:18px;overflow:hidden;background:#183b40}
.hs227-scene{position:absolute;width:1672px;height:941px;left:50%;top:50%;transform-origin:center;isolation:isolate;overflow:hidden;font-family:'Trebuchet MS',Arial,sans-serif;color:#264b4c}
.hs227-background{position:absolute;inset:0;z-index:-2;background:url('assets/harbor-station/station.webp') center/100% 100%}
.hs227-message{position:absolute;left:535px;top:24px;width:1040px;min-height:58px;margin:0;padding:10px 22px;border:4px ridge #c69b54;border-radius:20px;background:linear-gradient(105deg,#e3bf80,#fff0c3,#cda05d);box-shadow:0 5px 9px #59391266;text-align:center;font-size:30px;font-weight:bold}
.hs227-train{position:absolute;left:380px;top:0;width:1250px;height:625px;filter:drop-shadow(0 9px 4px #33251d88);will-change:transform}
.hs227-train-art{position:absolute;inset:0;width:100%;height:100%}
.hs227-window{position:absolute;top:32.8%;height:20.2%;width:13.65%;border-radius:7%;overflow:hidden;display:grid;place-items:center;background:transparent}
.hs227-window.window-0{left:6.64%}.hs227-window.window-1{left:24.05%}.hs227-window.window-2{left:41.39%}
.hs227-window img{width:100%;height:100%;object-fit:contain;padding:3px;background:#fffdfa;box-shadow:inset 0 0 7px #44281255}
.hs227-cargo-tick{position:absolute;right:5px;top:5px;width:25px;height:25px;border:2px solid #ddbc6f;border-radius:50%;color:white;background:#417d47;text-align:center;line-height:20px;font-size:20px}
.hs227-filler-window img{padding:7px;background:linear-gradient(#fffdf5,#f7e9c8);filter:saturate(.92)}
.hs227-filler-star{position:absolute;right:5px;top:5px;width:25px;height:25px;border:2px solid #dfbd69;border-radius:50%;color:#7d531d;background:#ffe59a;text-align:center;line-height:21px;font-size:17px;box-shadow:0 0 8px #ffd765}
.hs227-train.departing{animation:hs227-depart 4s cubic-bezier(.45,0,.8,.6) forwards}
.hs227-train.arriving{animation:hs227-arrive 1.6s ease-out both}
.hs227-train.gone{transform:translateX(1800px);visibility:hidden}
@keyframes hs227-depart{0%{transform:translateX(0)}100%{transform:translateX(1800px)}}
@keyframes hs227-arrive{from{transform:translateX(-1800px)}to{transform:translateX(0)}}
.hs227-steam{position:absolute;left:87%;top:16%;width:64px;height:46px;border-radius:50%;background:radial-gradient(ellipse,#fff9,transparent 70%);opacity:0;pointer-events:none}
.departing .hs227-steam,.arriving .hs227-steam{animation:hs227-steam 1.5s ease-out infinite}.hs227-steam.steam-two{animation-delay:.7s}
@keyframes hs227-steam{from{opacity:.6;transform:scale(.4)}to{opacity:0;transform:translate(-120px,-100px) scale(2)}}
.hs227-sign{position:absolute;left:72px;top:235px;width:248px;height:280px;display:flex;flex-direction:column;align-items:center;justify-content:space-around;text-align:center;gap:8px}
.hs227-sign p{font-size:30px;font-weight:bold;line-height:1.1;margin:0}
.hs227-speaker{flex:none;width:104px;height:104px;border:7px ridge #d6b56c;border-radius:50%;padding:17px;background:radial-gradient(at 35% 25%,#486d6d,#123c40);box-shadow:0 6px 8px #67442077;color:#fff4d7;cursor:pointer}
.hs227-speaker svg{width:100%;height:100%;fill:currentColor}
.hs227-target{width:100%;font-size:29px;font-weight:bold;line-height:1.15;min-height:50px;display:flex;flex-direction:column;justify-content:center}
.hs227-word-line{display:block;width:100%;white-space:nowrap;word-break:normal;overflow-wrap:normal}
.hs227-scene .article-het{color:#c51d19}
.hs227-choices{position:absolute;left:409px;top:612px;width:1130px;height:228px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;align-items:stretch}
.hs227-card{position:relative;display:block;min-width:0;min-height:0;height:100%;padding:0 7px 16px;border:0;border-radius:11px;background:transparent;cursor:pointer;transition:transform .2s;box-shadow:none}
.hs227-photo{position:absolute;inset:0 7px 15px;display:block;overflow:hidden;border:5px ridge #c89b51;border-radius:10px;background:#fffdf5;box-shadow:0 8px 14px #41281466}
.hs227-photo img{width:100%;height:100%;display:block;object-fit:contain;padding:8px;background:#fffdf5}
.hs227-stand{position:absolute;bottom:0;left:0;right:0;height:23px;border:3px ridge #be8a48;border-radius:4px;background:linear-gradient(#cf9754,#855225 43%,#6c401e 65%,#a06a32);box-shadow:0 6px 8px #42261088}
.hs227-card:not(:disabled):hover{transform:translateY(-5px)}
.hs227-card:disabled{opacity:1;cursor:default;filter:none}
.hs227-card.correct .hs227-photo{border-color:#7faa4c;box-shadow:0 0 24px #d9f29abb,0 8px 12px #41281466}
.hs227-card.wrong{animation:hs227-wrong .45s ease-in-out}
@keyframes hs227-wrong{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.hs227-check{position:absolute;right:0;top:-16px;width:52px;height:52px;border:4px ridge #e3c17e;border-radius:50%;background:#43834b;color:#fff8d3;font-size:38px;line-height:45px;box-shadow:0 2px 5px #0006}
.hs227-continue{position:absolute;left:410px;right:135px;top:867px;display:flex;justify-content:center}
.hs227-button{min-height:64px;border:5px ridge #c99a52;border-radius:18px;background:linear-gradient(#ffedb7,#d5a361);padding:10px 27px;color:#4d321d;font:bold 29px 'Trebuchet MS',Arial,sans-serif;box-shadow:0 5px 9px #47291666;cursor:pointer}
.hs227-button.teal{color:#fff2cf;background:linear-gradient(#487574,#1a4c4e)}
.hs227-button:disabled{opacity:.7;cursor:default}
.hs227-button:not(:disabled):hover,.hs227-speaker:not(:disabled):hover{filter:brightness(1.08)}
.hs227-scene button:focus-visible{outline:5px solid #fff5ba;outline-offset:5px}
.hs227-speaker:disabled{opacity:.65;cursor:default}
.hs227-welcome{position:absolute;left:430px;top:630px;width:1100px;display:flex;align-items:center;justify-content:center;gap:40px;padding:28px;border:5px ridge #b08040;border-radius:22px;background:linear-gradient(120deg,#fff3d2,#e8c791);box-shadow:0 8px 15px #57351966}
.hs227-welcome>span{width:150px}.hs227-welcome svg,.hs227-ticket-icon svg{width:100%;fill:#23555a}
.hs227-welcome p{font-size:31px;line-height:1.45;margin:0}
.hs227-flying-photo{position:fixed;z-index:10000;object-fit:contain;background:#fffdf5;border:3px solid #e9c783;transform-origin:top left;border-radius:4px;pointer-events:none;box-shadow:0 0 25px #ffe7a3}
.hs227-depart-message{position:absolute;left:500px;top:670px;width:950px;text-align:center;font-size:45px;color:#fff7de;text-shadow:0 2px 5px #412514,0 0 15px #412514}
.hs227-finale{position:absolute;left:430px;top:583px;width:1130px}
.hs227-ticket{display:flex;align-items:center;justify-content:center;gap:36px;padding:22px 35px;border:5px ridge #c59a51;border-radius:25px;background:linear-gradient(120deg,#fff2c8,#e3bd7c);box-shadow:0 5px 12px #42251677;text-align:center}
.hs227-ticket-icon{width:170px;padding-right:25px;border-right:3px dashed #b08749}
.hs227-ticket h2{font-size:41px;margin:3px 0}.hs227-ticket p{font-size:28px;margin:7px 0}.hs227-ticket-stars{font-size:42px;color:#edac13;text-shadow:0 2px 1px #966218}
.hs227-final-actions{display:flex;justify-content:center;gap:35px;margin-top:25px}.hs227-final-actions .hs227-button{min-width:370px}
@media(prefers-reduced-motion:reduce){.hs227-train.departing{animation-duration:.4s}.hs227-train.arriving{animation-duration:.1s}.hs227-steam{display:none}.hs227-card.wrong{animation:none}}