:root{--blue:#287df1;--yellow:#ffd23f;--ink:#173b68;--purple:#7652e8;--pink:#ff4e92}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;font-family:Tahoma,"Noto Sans Thai",sans-serif;background:#123d74;color:white}button{font:inherit;border:0;cursor:pointer}.game{width:100vw;height:100dvh;min-height:540px;background:url('assets/train-bg.png') center/cover no-repeat;position:relative}.game:after{content:"";position:absolute;inset:0;background:linear-gradient(#123b6533,#0c2e5b22 60%,#09234c88);pointer-events:none}.hidden{display:none!important}.overlay{position:absolute;inset:0;z-index:5;display:grid;place-items:center;background:linear-gradient(90deg,#1550a4df,#1550a499 48%,transparent);padding:3vw}.intro-card{text-align:center;filter:drop-shadow(0 10px 0 #0c347b)}.train-icon,.trophy{font-size:clamp(70px,8vw,130px)}.intro-card small{background:#ff5579;border:3px solid white;border-radius:99px;padding:.35em 1em;font-weight:bold}.intro-card h1{font-size:clamp(60px,8vw,125px);line-height:.78;margin:.15em;color:white;text-shadow:0 6px 0 #16428e}.intro-card h1 span{color:var(--yellow)}.intro-card p{font-size:clamp(18px,1.8vw,30px);font-weight:bold;text-shadow:0 3px 5px #000}.primary{background:linear-gradient(#ffe76f,#ffbb24);color:#643a00;border:4px solid white;border-radius:20px;padding:.55em 1.4em;font-size:clamp(17px,1.5vw,25px);font-weight:bold;box-shadow:0 7px 0 #b26708}.primary:active{transform:translateY(4px);box-shadow:0 3px 0 #b26708}
.play{position:absolute;inset:0;z-index:2;display:grid;grid-template-columns:minmax(250px,24%) 1fr;grid-template-rows:auto 1fr auto;gap:clamp(8px,1vw,16px);padding:clamp(8px,1vw,18px)}header{grid-column:1/-1;display:grid;grid-template-columns:1fr minmax(260px,35%) 1fr;align-items:center;background:#123967e8;border:3px solid #ffffffcc;border-radius:18px;padding:7px 14px;box-shadow:0 6px 0 #092348}.brand{font-size:clamp(15px,1.4vw,24px)}.progress{text-align:center;font-weight:bold}.progress i{display:block;height:12px;background:#ffffff44;border-radius:99px;overflow:hidden}.progress b{display:block;height:100%;width:0;background:linear-gradient(90deg,#43dcff,#ff51a5);transition:.35s}.tools{text-align:right}.tools button{width:44px;height:44px;margin-left:6px;border-radius:13px;background:white;color:var(--ink);font-size:22px;box-shadow:0 4px 0 #9bb5cf}
.mission{align-self:start;background:#f8fbff;color:var(--ink);border:5px solid #6aaaff;border-radius:26px;padding:clamp(14px,1.5vw,25px);box-shadow:0 8px 0 #174c94}.mission small{display:inline-block;background:#3479e8;color:white;border-radius:12px;padding:.3em 1em}.mission h2{font-size:clamp(20px,2vw,34px);line-height:1.4;min-height:4.2em}.guide{display:grid;grid-template-columns:auto 1fr;gap:7px;background:#e7f2ff;border-radius:18px;padding:12px;align-items:center}.guide b{grid-column:1/-1;text-align:center}.guide span{grid-row:2/5;font-size:50px;color:#2589fa}.guide em{font-style:normal;font-weight:bold;border-radius:8px;background:white;padding:6px;text-align:center}
.carriage{position:relative;min-height:0}.front{position:absolute;top:1%;left:50%;transform:translateX(-50%);z-index:2;background:#198cf1;color:white;border:3px solid white;border-radius:14px;padding:.35em 1.2em;font-weight:bold;box-shadow:0 5px 0 #11539c}.seats{height:100%;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,1fr);column-gap:28%;row-gap:1%;padding:9% 8% 2%}.seat{position:relative;border:4px dashed #fff9;border-radius:26px;background:#0a3f7855;display:grid;place-items:center;min-height:80px;box-shadow:inset 0 0 20px #86e9ff44;transition:.2s}.seat:before{content:attr(data-label);position:absolute;top:5px;left:8px;background:#fff;color:var(--ink);border-radius:99px;padding:2px 8px;font-size:clamp(10px,.85vw,14px);font-weight:bold}.seat.selected{outline:7px solid var(--yellow);transform:scale(1.03)}.seat.wrong{animation:shake .4s}.occupant{width:min(11vw,150px);height:min(17vh,165px);object-fit:contain;filter:drop-shadow(0 5px 3px #0006);pointer-events:none}.fixed{filter:drop-shadow(0 0 10px #5bffcf)}
.dock{grid-column:1/-1;background:#102f5be8;border:3px solid #ffffffaa;border-radius:20px;padding:8px 15px;display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:20px}.dock small{color:#8feeff}.passengers{display:flex;gap:8px}.passenger{width:clamp(65px,6vw,100px);height:clamp(65px,8vh,95px);border:3px solid white;border-radius:18px;background:linear-gradient(#fff,#cfe8ff);position:relative}.passenger img{width:100%;height:100%;object-fit:contain;pointer-events:none}.passenger b{position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);background:#276ac6;color:white;border-radius:8px;padding:1px 6px;font-size:11px;white-space:nowrap}.passenger.selected{outline:6px solid var(--yellow);transform:translateY(-8px)}.passenger.used{opacity:.3}.dock p{font-size:clamp(12px,1vw,16px);color:#9ff7ff;max-width:300px}.dock .primary{padding:.35em 1.2em}
@keyframes shake{25%{transform:translateX(-10px)}50%{transform:translateX(10px)}75%{transform:translateX(-7px)}}@media(max-aspect-ratio:4/3){.play{grid-template-columns:1fr;grid-template-rows:auto auto 1fr auto}.mission{display:flex;align-items:center;gap:15px;padding:8px 14px}.mission h2{min-height:0;margin:0;flex:1}.guide{display:none}.carriage{min-height:260px}.dock p{display:none}.seats{padding-top:10%}.brand{display:none}header{grid-template-columns:1fr auto}}@media(max-height:650px){.play{padding:6px}.mission h2{min-height:3em;margin:.4em 0}.guide{display:none}.seats{padding-top:8%}.occupant{height:14vh}.dock{padding:4px 12px}}