.bus-page{max-width:1240px;margin:22px auto;padding:0 16px;color:#263d3b;font-family:'Zen Maru Gothic',sans-serif}.page-heading{padding:8px 4px 18px}.page-heading h1{font-size:34px;margin:0 0 6px}.page-heading p{margin:0}.parent-note{max-width:920px;margin:30px auto;padding:25px;background:#fff4d9;line-height:1.9}.parent-note h2{font-size:22px}#progress-storage{font-size:12px;text-align:center}
#host{--ink:#263d3b;--paper:#fff6df;position:relative;isolation:isolate;container-type:size;container-name:game;height:740px;max-width:1200px;margin:auto;overflow:hidden;background:#d9c4a1;border:3px solid #286d6a;border-radius:10px;color:var(--ink);font-family:'Zen Maru Gothic',sans-serif}#host *{box-sizing:border-box}#host [hidden]{display:none!important}#host button{font:800 15px/1.4 'Zen Maru Gothic',sans-serif;min-width:0;min-height:43px;border:2px solid #9d8257;border-radius:9px;background:var(--paper);color:var(--ink);padding:8px 14px;cursor:pointer;touch-action:manipulation;box-shadow:0 3px 0 #b8a07e}#host button:disabled{cursor:default;opacity:.4}#host button:focus-visible,#host input:focus-visible{outline:3px solid #c44f34;outline-offset:3px}#host button:hover:enabled{filter:brightness(1.04)}#host button.primary{background:#26736b;border-color:#195a56;color:#fff9df}#host input{accent-color:#26736b;font:inherit}#host .bus-top{height:55px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 18px;background:#26736b;color:#fff6df}#host .bus-top strong{font-size:17px;white-space:nowrap}#host nav{display:flex;gap:7px}#host nav button{font-size:12px;min-height:31px;padding:5px 10px;border-width:1px;border-radius:5px;box-shadow:none}#base{height:calc(100% - 55px)}
#cover{height:100%;display:grid;grid-template-columns:1.4fr 1fr;background:#fff6df}.cover-art{height:100%;width:100%;object-fit:cover;object-position:46% center;min-height:0;min-width:0}.departure{padding:30px;display:flex;flex-direction:column;justify-content:center;gap:22px;border-left:3px dashed #b9975d}.departure>small{font-size:11px}.departure h2{font-size:clamp(27px,3.6cqw,44px);line-height:1.5;margin:0;letter-spacing:.02em}.departure h2 span{font-size:1.4em;color:#b84c32}.departure p{font-size:14px;line-height:1.9;margin:0}.ticket-numbers{display:flex;gap:20px;justify-content:center;border-block:2px dotted #c1a06b;padding:18px 0}.ticket-numbers span{display:flex;flex-direction:column;align-items:center;font-size:11px;gap:8px}.ticket-numbers b{font:700 43px/1 'Fredoka',sans-serif;color:#b44d32}#host #start{font-size:20px;min-height:55px}#ready-note{text-align:center;font-size:9px}
#play{height:100%;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,.8fr);gap:22px;padding:20px}.board-area{min-width:0;min-height:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:13px;padding-right:22px}#board-frame{width:min(100%,calc(100cqh - 126px));aspect-ratio:1;position:relative;background:url('./assets/board.webp') center/100% 100%;padding:7.6%;max-height:100%}#board{position:absolute;inset:8.6%;background:repeating-linear-gradient(0deg,transparent 0 calc(16.666666% - 1px),#9b886644 calc(16.666666% - 1px) 16.666666%),repeating-linear-gradient(90deg,transparent 0 calc(16.666666% - 1px),#9b886644 calc(16.666666% - 1px) 16.666666%)}.board-area>small{font-size:11px}#host .car{position:absolute;min-height:0;padding:4px;border:2px solid transparent;border-radius:8px;box-shadow:none;background:transparent;transition:left .12s,top .12s;overflow:hidden;display:grid;place-items:center}#host .car img{width:100%;height:100%;object-fit:fill;border-radius:7px}#host .car[data-axis=h]:not([data-target=true]) img{position:absolute;width:calc(50% - 4px);height:calc(200% - 8px);transform:rotate(90deg)}#host .car span{position:absolute;right:5px;bottom:5px;padding:2px 5px;background:#fff8e8eb;border-radius:4px;color:#244e47;font-size:12px;line-height:1.2}#host .car[aria-pressed=true]{border-color:#bb4e32;background:#e6b956;outline:2px solid #fff6da;z-index:2}.exit{position:absolute;right:-19px;top:36.2%;height:13.9%;width:17%;display:grid;place-items:center;background:#387b56;color:#fff8dc;font-size:12px;clip-path:polygon(0 0,78% 0,100% 50%,78% 100%,0 100%);z-index:0;pointer-events:none;transform:translateX(55%)}#control-ticket{background:#fff5db;border:2px dashed #b59863;border-radius:12px;padding:20px;display:grid;grid-template-rows:54px 85px minmax(100px,1fr) 69px 95px 22px;gap:11px;min-height:0}#control-ticket>header{display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:2px dotted #bc9b62;padding-bottom:10px;font-size:11px}#control-ticket header b{font:700 28px/1 'Fredoka',sans-serif;color:#b84c32}#control-ticket header small{font-size:13px}#control-ticket header>span:last-child{display:flex;flex-direction:column;align-items:center;gap:4px}#selected-car{display:flex;align-items:center;justify-content:center;gap:15px;background:#efe1c5;border-radius:7px;padding:8px}#selected-image{width:77px;height:65px;object-fit:contain;flex-shrink:0}#selected-car>div{display:flex;flex-direction:column;gap:5px}#selected-car small,#axis-label{font-size:10px}#selected-name{font-size:15px}#arrows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:10px;min-height:0;max-width:260px;width:100%;justify-self:center;align-self:center;height:100%;max-height:146px}#host #arrows button{font:700 33px/1 sans-serif;padding:2px;min-height:0;border:2px solid #bb945d;background:#eec995;box-shadow:0 3px 0 #ac804e}#arrows [data-d=up]{grid-column:2}#arrows [data-d=left]{grid-column:1;grid-row:2}#arrows [data-d=down]{grid-column:2;grid-row:2}#arrows [data-d=right]{grid-column:3;grid-row:2}#host #arrows .suggested{background:#b2d6bb;outline:3px solid #37775b}#feedback{font-size:13px;line-height:1.8;margin:0;display:flex;align-items:center;padding:10px;background:#f8ebcb;border-left:4px solid #d5a557}#feedback.hint{background:#dfebd6;border-color:#4d8360}.actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}#host .actions button{font-size:12px;min-height:0;padding:4px}#control-ticket>footer{font-size:10px;text-align:center;line-height:1.6}
#result{height:100%;display:grid;grid-template-columns:1.3fr 1fr;background:#fff5dd}.arrival-art{height:100%;width:100%;object-fit:cover;object-position:40% center;min-height:0;min-width:0}.arrival-ticket{display:flex;flex-direction:column;justify-content:center;gap:19px;padding:28px;border-left:3px dashed #b9975d}.arrival-ticket h2{font-size:40px;line-height:1.4;margin:0;color:#bb4f33}.arrival-ticket h2 span{color:#247468}.arrival-ticket>small{font-size:12px}.arrival-ticket>p{margin:0;font-size:15px}.arrival-ticket dl{margin:0;border-block:2px dotted #c1a06b;padding:12px 0}.arrival-ticket dl>div{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0}.arrival-ticket dt{font-size:13px}.arrival-ticket dd{font:700 30px/1 'Fredoka',sans-serif;margin:0;color:#263d3b}.arrival-ticket dd small{font-size:13px}.arrival-ticket>div{display:flex;gap:12px}.arrival-ticket>div>button{flex:1}#host #result-next{font-size:17px;min-height:53px}
#modal{position:absolute;inset:0;z-index:50;background:#1d3c3bc9;display:grid;place-items:center;padding:16px}#modal>section{max-height:100%;overflow:auto;width:min(620px,100%);background:#fff5de;border:3px dashed #ad8c58;border-radius:12px;padding:25px}#modal header{display:flex;align-items:center;justify-content:space-between;gap:10px}#modal h2{font-size:23px;margin:0}#dialog-content{font-size:15px;line-height:1.9}#dialog-content>button{display:block;width:100%;margin-top:12px}#dialog-content label{display:flex;align-items:center;gap:12px;margin:17px 0}#dialog-content input[type=checkbox]{width:25px;height:25px}#dialog-content label:has(input[type=range]){display:block}#dialog-content input[type=range]{display:block;width:100%;height:34px}#storage-note{font-size:12px}#host:fullscreen,#host.faux-fullscreen{width:100vw;height:100dvh;max-width:none;margin:0;border:0;border-radius:0}#host.faux-fullscreen{position:fixed;inset:0;z-index:99999}
@media(max-width:700px){.bus-page{padding:0 8px}#host{height:850px}.page-heading h1{font-size:27px}.parent-note{padding:16px}}@media(max-height:520px) and (min-width:621px){#host{height:390px}}
@container game (max-width:620px){#host .bus-top{height:77px;display:grid;justify-content:stretch;gap:6px;padding:7px 8px;text-align:center}#host .bus-top strong{font-size:14px}#host nav{gap:5px}#host nav button{flex:1;white-space:nowrap;font-size:10px;padding:7px 3px;min-height:31px}#base{height:calc(100% - 77px)}#cover{grid-template-columns:1fr;grid-template-rows:minmax(145px,1fr) auto}.cover-art{object-position:center 43%}.departure{border-left:0;border-top:3px dashed #b9975d;padding:18px 20px;gap:12px;text-align:center}.departure h2{font-size:29px;line-height:1.4}.departure h2 br{display:none}.departure h2 span{font-size:1.2em}.departure p{font-size:12px;line-height:1.7}.departure>small{font-size:9px}.ticket-numbers{padding:9px 0;gap:36px}.ticket-numbers b{font-size:30px}.ticket-numbers span{font-size:9px;gap:4px}#host #start{font-size:16px;min-height:43px}#play{grid-template-columns:1fr;grid-template-rows:minmax(215px,1fr) 263px;gap:10px;padding:12px}.board-area{padding:0 25px 0 0;gap:5px}#board-frame{width:min(100%,44cqh,calc(100cqh - 380px));padding:0}.board-area>small{font-size:8px}.exit{font-size:9px;right:-10px}#host .car{padding:2px;border-width:1px;border-radius:5px}#host .car span{font-size:8px;right:3px;bottom:3px;padding:1px 3px}#control-ticket{padding:10px 12px;grid-template-columns:1fr 1fr;grid-template-rows:40px 87px 44px 33px 15px;gap:5px 12px;border-radius:9px}#control-ticket>header{grid-column:1/3;padding-bottom:5px;font-size:10px}#control-ticket header b{font-size:23px}#control-ticket header>span:last-child{flex-direction:row;font-size:9px}#control-ticket header small{font-size:10px}#selected-car{gap:7px;padding:5px;grid-row:2;grid-column:1}#selected-image{width:51px;height:54px}#selected-car small,#axis-label{font-size:8px}#selected-name{font-size:10px}#arrows{grid-row:2;grid-column:2;gap:6px;max-height:none}#host #arrows button{font-size:24px;border-width:1px}#feedback{grid-column:1/3;font-size:10px;padding:6px 9px;line-height:1.65}.actions{grid-column:1/3;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}#host .actions button{font-size:9px;padding:3px 2px;min-height:29px}#control-ticket>footer{grid-column:1/3;font-size:8px}#result{grid-template-columns:1fr;grid-template-rows:minmax(120px,1fr) auto}.arrival-art{object-position:center 43%}.arrival-ticket{padding:17px 23px;gap:12px;border-left:0;border-top:3px dashed #b9975d;text-align:center}.arrival-ticket h2{font-size:29px}.arrival-ticket h2 br{display:none}.arrival-ticket>small{font-size:10px}.arrival-ticket>p{font-size:12px}.arrival-ticket dl{padding:6px 0}.arrival-ticket dl>div{padding:6px 0}.arrival-ticket dt{font-size:11px}.arrival-ticket dd{font-size:25px}.arrival-ticket dd small{font-size:10px}#host #result-next{font-size:14px;min-height:42px}.arrival-ticket>div{gap:9px}#host .arrival-ticket>div>button{font-size:11px;min-height:35px}#modal>section{padding:18px}#modal h2{font-size:19px}#dialog-content{font-size:13px}}
@container game (max-height:520px) and (min-width:621px){#host .bus-top{height:38px;padding:4px 12px}#host .bus-top strong{font-size:12px}#host nav button{min-height:27px;font-size:10px;padding:4px 8px}#base{height:calc(100% - 38px)}.departure{padding:14px 22px;gap:9px}.departure h2{font-size:25px;line-height:1.3}.departure h2 br{display:none}.departure h2 span{font-size:1.15em}.departure p{font-size:10px;line-height:1.6}.departure>small{font-size:9px}.ticket-numbers{padding:8px 0;gap:33px}.ticket-numbers span{font-size:8px;gap:3px}.ticket-numbers b{font-size:25px}#host #start{font-size:14px;min-height:35px}#ready-note{font-size:8px}#play{grid-template-columns:1.1fr 1fr;padding:10px 22px;gap:25px}.board-area{gap:5px;padding-right:20px}#board-frame{width:min(100%,calc(100cqh - 82px));padding:0}.board-area>small{font-size:8px}.exit{font-size:9px;right:-10px}#host .car{padding:2px;border-width:1px;border-radius:5px}#host .car span{font-size:8px;padding:1px 3px;right:3px;bottom:3px}#control-ticket{padding:9px 13px;grid-template-columns:1fr 1fr;grid-template-rows:39px minmax(60px,1fr) 42px 32px 15px;gap:6px 15px}#control-ticket>header{grid-column:1/3;padding-bottom:4px;font-size:11px}#control-ticket header b{font-size:22px}#control-ticket header>span:last-child{flex-direction:row;font-size:9px}#control-ticket header small{font-size:10px}#selected-car{grid-row:2;grid-column:1;gap:8px;padding:5px}#selected-image{width:54px;height:65px}#selected-car small,#axis-label{font-size:8px}#selected-name{font-size:11px}#arrows{grid-row:2;grid-column:2;gap:7px;max-height:105px}#host #arrows button{font-size:26px;border-width:1px}#feedback{grid-column:1/3;font-size:10px;line-height:1.6;padding:5px 9px}.actions{grid-column:1/3;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}#host .actions button{font-size:9px;min-height:28px;padding:3px 2px}#control-ticket>footer{grid-column:1/3;font-size:8px}.arrival-ticket{padding:14px 24px;gap:9px}.arrival-ticket h2{font-size:29px;line-height:1.25}.arrival-ticket h2 br{display:none}.arrival-ticket>small{font-size:9px}.arrival-ticket>p{font-size:10px}.arrival-ticket dl{padding:5px 0}.arrival-ticket dl>div{padding:5px 0}.arrival-ticket dt{font-size:10px}.arrival-ticket dd{font-size:22px}.arrival-ticket dd small{font-size:10px}#host #result-next{font-size:13px;min-height:35px}#host .arrival-ticket>div>button{min-height:30px;font-size:10px;padding:4px}.arrival-ticket>div{gap:9px}#modal>section{padding:13px 22px}#modal h2{font-size:19px}#dialog-content{font-size:12px;line-height:1.6}#dialog-content p{margin:9px 0}#dialog-content label{margin:8px 0}}
@container game (max-width:350px){#play{padding:8px;gap:7px;grid-template-rows:minmax(180px,1fr) 252px}#control-ticket{padding:9px;gap:4px 8px;grid-template-rows:37px 85px 42px 32px 14px}#selected-image{width:41px;height:50px}#selected-name{font-size:9px}#selected-car small,#axis-label{font-size:7px}#host .actions button{font-size:8px}#feedback{font-size:9px}.departure{padding:13px 16px;gap:9px}.departure h2{font-size:23px}.departure p{font-size:10px}.arrival-ticket{padding:13px 17px;gap:9px}.arrival-ticket h2{font-size:23px}#host #result-next{font-size:12px;min-height:37px}}
@media(prefers-reduced-motion:reduce){#host *{transition:none!important;animation:none!important}}

.exit{right:0;width:11%;transform:translateX(30%)}
@container game (max-width:620px){.exit{right:0}}
@container game (max-height:520px) and (min-width:621px){.exit{right:0}}