*{box-sizing:border-box}.train-page{max-width:1360px;margin:auto;padding:16px;color:#164e51}.page-heading{padding:4px 4px 16px}.page-heading h1{font-size:28px;margin:0}.page-heading p{font-size:14px;margin:6px 0 0}.train-page #host{--ink:#164e51;--cream:#fffae9;display:flex;flex-direction:column;isolation:isolate;position:relative;width:100%;height:710px;min-height:590px;overflow:hidden;border:1px solid #91bcb4;border-radius:16px;background:#d8e9cf;color:var(--ink);font-family:'Zen Maru Gothic',sans-serif}.train-page #host [hidden]{display:none!important}#host button{font:inherit;font-weight:700;line-height:1.4;min-height:42px;padding:8px 14px;background:#fffae9;border:1px solid #9fac8d;border-radius:9px;color:var(--ink);cursor:pointer;touch-action:manipulation}#host button:hover{background:#fff0cc}#host button:disabled{cursor:default;opacity:.65}#host button:focus-visible,#host [tabindex]:focus-visible{outline:3px solid #e97e36;outline-offset:2px}#host button.primary{background:#ce672d;border-color:#ce672d;color:#fff9e9}#host button.primary:hover{background:#b45123}.train-top{flex:none;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 20px;background:#fffae9;border-bottom:1px dashed #8aa59b}.train-top strong{letter-spacing:.09em;font-size:17px}.train-top nav{display:flex;gap:6px}.train-top button{font-size:12px!important;padding:6px 9px!important;min-height:36px!important}#base{flex:1;min-height:0;position:relative}#cover{display:grid;grid-template-columns:1.7fr 1fr;height:100%;min-height:0;background:#b6dcd4}.cover-art{height:100%;width:100%;min-height:0;object-fit:cover;object-position:48% center}.boarding-ticket{margin:24px 24px 24px 0;padding:28px 30px;display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:18px;background:#fffae9;border:2px dashed #b7b18b;border-radius:4px;box-shadow:0 6px 12px #486f5730;text-align:center}.boarding-ticket h2{font-size:clamp(38px,4.8vw,61px);line-height:1.3;letter-spacing:.07em;margin:0}.boarding-ticket>small{font-size:11px;letter-spacing:.05em}.boarding-ticket p{font-size:15px;line-height:1.9;margin:0}.boarding-ticket .primary{font-size:21px!important;min-height:58px!important;border:3px double #f6c38d!important}.ticket-bottom{font-size:13px;border-top:1px dashed #abb594;padding-top:14px;line-height:1.8;letter-spacing:.2em}.ticket-bottom span{font-size:10px;color:#78938b}#play{height:100%;display:grid;grid-template-rows:auto minmax(170px,1.05fr) minmax(180px,1fr) auto;gap:13px;padding:16px;background:#deecd4}.counts{display:flex;gap:20px;align-items:center;background:#fffae9;border:1px dashed #a2b293;border-radius:7px;padding:7px 16px}.counts span{font-size:12px;white-space:nowrap}.counts b{font-size:25px;margin-left:4px;font-variant-numeric:tabular-nums}.counts button{margin-left:auto;font-size:11px!important;min-height:34px!important;padding:5px 9px!important}#landscape{position:relative;background:#bfe0d5 url('./assets/meadow.webp') center 60%/cover;min-height:0;border:2px solid #f7f2da;border-radius:8px;overflow:hidden;display:flex;align-items:end;padding:12px 16px}#train,#all-train{display:flex;align-items:end;gap:13px;overflow-x:auto;overflow-y:hidden;width:100%;min-height:0;padding:8px 8px 18px;scrollbar-width:thin;scrollbar-color:#567d69 #e8e4c4;overscroll-behavior:contain}#train{height:100%;justify-content:center}#host .car,#host .engine{margin:0;position:relative;min-width:0;flex:0 0 130px;background:#fff9e9;display:grid;grid-template-rows:minmax(0,1fr) auto;align-items:center;justify-items:center;border:2px dashed #c8aa6d;border-top:8px solid #dd8b40;border-radius:8px;padding:6px 9px 9px;height:min(100%,168px)}#host .car:before{content:'';position:absolute;left:15%;right:15%;bottom:-10px;height:19px;background:radial-gradient(circle at 10px 9px,#aa916d 0 3px,#354f51 4px 9px,transparent 10px),radial-gradient(circle at calc(100% - 10px) 9px,#aa916d 0 3px,#354f51 4px 9px,transparent 10px)}#host .car:after{content:'';position:absolute;left:-17px;top:80%;width:16px;height:5px;border-block:1px solid #8a7255;background:#dcc7a0}#host .car img,#host .engine img{width:100%;height:100%;min-height:0;object-fit:contain}#host .car figcaption{font-size:19px;letter-spacing:.08em;white-space:nowrap;line-height:1.6}#host .car figcaption b{font-weight:900;color:#b0582c}#host .car small{position:absolute;right:6px;top:1px;font-size:9px;color:#8b785a}#host .engine{background:#fff9ed;border:0;flex-basis:155px;border-radius:10px;padding:6px;height:min(100%,168px)}#host .engine figcaption{font-size:11px;line-height:1.8}.question-area{display:grid;grid-template-columns:180px minmax(0,1fr);gap:14px;min-height:0}#station-sign{border:3px solid #859b83;border-top:9px solid #517a70;background:#fffae9;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;padding:9px;border-radius:5px;min-height:0}#station-sign small{font-size:12px}#station-sign>b{font-size:75px;line-height:1.05}#station-sign>span{font-size:11px}#answers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;min-height:0}#answers button{display:grid;grid-template-rows:minmax(0,1fr) auto auto;align-items:center;justify-items:center;min-height:0;padding:11px 7px;border:2px dashed #b6a873;background:#fffae9;box-shadow:0 4px 0 #c9c59d}#answers img{width:100%;height:100%;min-height:0;object-fit:contain}#answers b{font-size:21px;letter-spacing:.08em;white-space:nowrap;line-height:1.7}#answers small{font-size:10px;font-weight:400;color:#7b8473}#answers button.correct{background:#eaf3cd;border-color:#547e50;opacity:1;box-shadow:0 4px 0 #80976d}#answers button.wrong{background:#f9e6cd;border-color:#b66f3b;opacity:1}.play-footer{display:flex;align-items:center;justify-content:space-between;gap:14px}#feedback{padding:8px 13px;min-height:38px;background:#fffae9;border-radius:6px;border-left:5px solid #759f83;font-size:14px;line-height:1.4;margin:0;flex:1}#feedback[data-phase=wrong]{border-left-color:#c2804d}#feedback[data-phase=correct]{border-left-color:#487f4c}.play-footer button{font-size:12px!important}#result{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;gap:15px;padding:24px 30px;background:#d8e9cf url('./assets/station.webp') center/cover}#result>header{align-self:start;justify-self:start;background:#fffae9f2;border:2px dashed #c0ae7b;padding:14px 25px;border-radius:18px}#result>header small{font-size:11px;letter-spacing:.12em}#result h2{font-size:32px;line-height:1.3;margin:5px 0}#result>header p{font-size:13px;margin:5px 0 0}#all-train{align-self:end;height:100%;justify-content:flex-start;background:#d7e8c277;border-radius:10px}#all-train .car{flex-basis:135px;height:min(100%,190px)}#all-train .engine{height:min(100%,190px)}#arrival-ticket{justify-self:center;width:80%;background:#fffae9;border:2px dashed #b5a67b;border-radius:8px;display:flex;align-items:center;justify-content:space-around;gap:24px;padding:13px 22px}#arrival-ticket>div{display:flex;flex-direction:column;gap:3px;padding-right:20px;border-right:1px dashed #b5a67b}#arrival-ticket small{font-size:12px}#arrival-ticket strong{font-size:25px;letter-spacing:.1em}#arrival-ticket p{font-size:12px;margin:0;line-height:1.6}#arrival-ticket p b{font-size:34px;margin:0 5px}#arrival-ticket p+p b{font-size:20px}#result footer{display:flex;justify-content:center;gap:13px}#result footer button{min-width:155px}#modal{position:absolute;inset:0;display:grid;place-items:center;background:#204e4380;padding:16px;z-index:10}#modal>section{width:min(540px,100%);max-height:100%;overflow-y:auto;background:#fffae9;border:2px dashed #a6b192;border-radius:15px;padding:20px;box-shadow:0 15px 60px #164e5133}#modal header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}#modal h2{font-size:21px;margin:0}#dialog-content{font-size:15px;line-height:1.9}#dialog-content>button{display:block;width:100%;margin:10px 0}#dialog-content label{display:flex;align-items:center;gap:10px;margin:12px 0;flex-wrap:wrap}#dialog-content input[type=checkbox]{width:22px;height:22px;accent-color:#28756b}#volume{width:100%;accent-color:#28756b}#storage-note{font-size:12px}#journal-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 12px;padding:5px 0 15px}#journal-list .car{width:100%;height:100px;padding:3px 5px}#journal-list .car figcaption{font-size:12px}.parent-note{padding:24px 6px;line-height:1.9;color:#557169;font-size:14px}.parent-note h2{font-size:19px}.train-page #host:fullscreen,.train-page #host.faux-fullscreen{width:100vw;height:100dvh;max-height:none;min-height:0;border:0;border-radius:0}.train-page #host.faux-fullscreen{position:fixed;inset:0;z-index:10000}
@media(max-width:760px){.train-page{padding:8px}.page-heading h1{font-size:23px}.page-heading p{font-size:12px}.train-page #host{height:800px;min-height:670px}.train-top{padding:8px;flex-wrap:wrap;gap:7px}.train-top strong{font-size:13px}.train-top nav{gap:4px}.train-top button{font-size:10px!important;min-height:34px!important;padding:5px 7px!important}#cover{grid-template-columns:1fr;grid-template-rows:42% minmax(0,1fr)}.cover-art{object-position:center 55%}.boarding-ticket{padding:16px 22px;margin:0 14px 14px;gap:11px}.boarding-ticket h2{font-size:35px;line-height:1.3}.boarding-ticket h2 br{display:none}.boarding-ticket p{font-size:12px;line-height:1.7}.boarding-ticket p br{display:none}.boarding-ticket .primary{font-size:19px!important;min-height:48px!important}.boarding-ticket>small{font-size:10px}.ticket-bottom{padding-top:8px;font-size:11px;line-height:1.5}.ticket-bottom br{display:none}.ticket-bottom span{margin-left:10px}#play{padding:10px;gap:10px;grid-template-rows:auto minmax(130px,.8fr) minmax(235px,1.2fr) auto}.counts{gap:12px;flex-wrap:wrap;padding:8px 10px}.counts span{font-size:10px}.counts b{font-size:21px;margin-left:2px}.counts button{font-size:10px!important;padding:5px!important;min-height:30px!important}#landscape{padding:6px 7px}#train{justify-content:flex-start;gap:11px;padding:5px 4px 18px}#host .car{flex-basis:94px;padding:4px 5px 7px;height:min(100%,140px);border-top-width:6px}#host .car figcaption{font-size:15px}#host .engine{flex-basis:105px;height:min(100%,140px)}#host .engine figcaption{font-size:9px}.question-area{grid-template-columns:92px minmax(0,1fr);gap:8px}#station-sign{padding:6px 3px;gap:7px;border-width:2px;border-top-width:7px}#station-sign small{font-size:10px}#station-sign>b{font-size:52px}#station-sign>span{font-size:9px;line-height:1.8;text-align:center}#answers{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 7px}#answers button{padding:5px 4px;grid-template-rows:minmax(0,1fr) auto}#answers b{font-size:16px;line-height:1.7}#answers small{display:none}.play-footer{gap:8px;flex-wrap:wrap}#feedback{font-size:12px;padding:8px;min-height:33px;flex-basis:100%}.play-footer button{font-size:11px!important;min-height:34px;margin-left:auto}#result{padding:16px 12px;gap:14px;background-position:65% center}#result>header{padding:12px 16px}#result h2{font-size:26px}#result>header small{font-size:10px}#result>header p{font-size:11px}#all-train{gap:11px;padding-bottom:20px}#all-train .car{flex-basis:117px;height:min(100%,180px)}#all-train .engine{flex-basis:128px;height:min(100%,180px)}#arrival-ticket{width:100%;padding:13px 10px;gap:9px}#arrival-ticket>div{padding-right:10px}#arrival-ticket small{font-size:10px}#arrival-ticket strong{font-size:20px}#arrival-ticket p{font-size:10px}#arrival-ticket p b{font-size:26px;margin:0 3px}#arrival-ticket p+p b{font-size:17px}#result footer button{min-width:120px;font-size:14px}#modal{padding:10px}#modal>section{padding:16px}#modal h2{font-size:18px}#dialog-content{font-size:13px}#journal-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 10px}#journal-list .car{height:95px}}
@media(max-width:360px){.train-top{justify-content:center}.train-top strong{display:none}.boarding-ticket h2{font-size:29px}.counts{gap:8px;padding:7px}.counts b{font-size:18px}.counts button{margin:0 auto}.question-area{grid-template-columns:77px minmax(0,1fr)}#station-sign>b{font-size:46px}#answers b{font-size:14px}#result h2{font-size:23px}#arrival-ticket strong{font-size:17px}#arrival-ticket p b{font-size:23px}#result footer button{min-width:105px}}
@media(max-height:520px) and (min-width:600px){.train-page #host{height:390px;min-height:360px}.train-top{padding:6px 12px}.train-top strong{font-size:13px}.train-top button{font-size:10px!important;min-height:30px!important}#cover{grid-template-columns:1.6fr 1fr;grid-template-rows:1fr}.boarding-ticket{margin:12px 12px 12px 0;padding:13px 20px;gap:9px}.boarding-ticket h2{font-size:31px;line-height:1.25}.boarding-ticket h2 br{display:none}.boarding-ticket p{font-size:11px;line-height:1.6}.boarding-ticket p br{display:none}.boarding-ticket>small{font-size:9px}.boarding-ticket .primary{min-height:42px!important;font-size:17px!important}.ticket-bottom{font-size:10px;padding-top:7px;line-height:1.5}#ready-note{display:none}#play{padding:8px 10px;gap:7px;grid-template-rows:33px minmax(90px,.8fr) minmax(100px,1fr) 30px}.counts{padding:2px 12px;gap:18px;flex-wrap:nowrap}.counts span{font-size:10px}.counts b{font-size:19px}.counts button{font-size:9px!important;min-height:25px!important;padding:3px 7px!important}#landscape{padding:3px 10px}#train{gap:10px;padding:1px 5px 13px;justify-content:center}#host .car{flex-basis:88px;height:100%;padding:2px 5px 4px;border-top-width:5px}#host .car figcaption{font-size:12px;line-height:1.35}#host .engine{flex-basis:112px;height:100%;padding:2px}#host .engine figcaption{font-size:8px;line-height:1.4}#host .car:before{height:15px;bottom:-8px;background:radial-gradient(circle at 8px 7px,#aa916d 0 2px,#354f51 3px 7px,transparent 8px),radial-gradient(circle at calc(100% - 8px) 7px,#aa916d 0 2px,#354f51 3px 7px,transparent 8px)}.question-area{grid-template-columns:115px minmax(0,1fr);gap:9px}#station-sign{padding:3px;gap:1px;border-top-width:5px}#station-sign small{font-size:9px}#station-sign>b{font-size:43px}#station-sign>span{font-size:9px}#answers{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}#answers button{padding:4px 6px;grid-template-rows:minmax(0,1fr) auto}#answers b{font-size:15px;line-height:1.5}#answers small{display:none}.play-footer{gap:8px;flex-wrap:nowrap}#feedback{min-height:28px;font-size:11px;padding:5px 8px;flex-basis:auto}.play-footer button{font-size:10px!important;min-height:28px;padding:4px 8px;margin:0}#result{padding:10px 18px;gap:8px;grid-template-columns:minmax(0,1fr) 245px;grid-template-rows:auto minmax(0,1fr) auto}#result>header{grid-column:1;grid-row:1;padding:8px 15px}#result>header small{display:none}#result h2{font-size:21px;margin:0}#result h2 br{display:none}#result>header p{font-size:10px;margin:3px 0 0}#all-train{grid-column:1/-1;grid-row:2;gap:12px}#all-train .car{flex-basis:110px;height:100%;max-height:160px;padding:4px 7px}#all-train .engine{flex-basis:130px;height:100%;max-height:160px}#arrival-ticket{grid-column:2;grid-row:1;width:100%;gap:8px;padding:7px 9px;height:100%}#arrival-ticket>div{padding-right:7px}#arrival-ticket small{font-size:8px}#arrival-ticket strong{font-size:16px}#arrival-ticket p{font-size:9px}#arrival-ticket p b{font-size:21px;margin:0 2px}#arrival-ticket p+p b{font-size:15px}#result footer{grid-column:1/-1;grid-row:3}#result footer button{min-height:30px;min-width:135px;font-size:11px;padding:5px}#modal>section{padding:12px}#modal header{margin:0}#dialog-content{font-size:12px;line-height:1.55}#dialog-content>button{margin:6px 0;min-height:32px}#dialog-content p{margin:8px 0}#dialog-content label{margin:8px 0}#journal-list{grid-template-columns:repeat(5,minmax(0,1fr));gap:20px 10px}#journal-list .car{height:93px}#journal-list .car figcaption{font-size:11px}}
@media(max-width:599px) and (max-height:700px){#play{padding:8px;gap:8px;grid-template-rows:auto minmax(95px,.7fr) minmax(190px,1.3fr) auto}}
@media(max-width:360px){.boarding-ticket h2 br{display:initial}#arrival-ticket{gap:6px}#arrival-ticket strong{font-size:15px;letter-spacing:0;white-space:nowrap}#arrival-ticket p{white-space:nowrap}}
@media(max-height:520px) and (min-width:600px){#arrival-ticket{gap:5px}#arrival-ticket strong{font-size:13px;letter-spacing:0;white-space:nowrap}#arrival-ticket p{white-space:nowrap}}
@media(max-width:360px),(max-height:520px) and (min-width:600px){#arrival-ticket{display:grid;grid-template-columns:1fr 1fr;gap:4px;min-width:0}#arrival-ticket>div{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:center;gap:8px;border-right:0;border-bottom:1px dashed #b5a67b;padding:0 0 3px}#arrival-ticket p{text-align:center}}