:root{font-family:system-ui,-apple-system,"Noto Sans JP",sans-serif;color:#06427b;background:#fffdf5;line-height:1.7}*{box-sizing:border-box}body{margin:0;background:linear-gradient(125deg,#effaff,#fffdf5 65%,#f0fbf5);min-height:100vh}main{max-width:1060px;margin:auto;padding:22px 20px 40px}button,a,input{touch-action:manipulation}button{font:inherit;cursor:pointer;color:inherit;background:#fff;border:1px solid #a3cfe5;border-radius:16px;min-height:46px;padding:10px 18px;font-weight:650}button:hover{background:#edf8ff}button:disabled{cursor:default;opacity:.5}button.primary{background:linear-gradient(#03a9f4,#0074ed);color:#fff;border-color:#009afa;box-shadow:inset 0 2px 1px #ffffff70}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #a86600;outline-offset:3px}[data-focus]:focus:not(:focus-visible){outline:0}.skip-link{position:absolute;left:-9999px}.skip-link:focus{left:12px;top:8px;z-index:999;background:#fff;padding:10px}.preview-note,.muted{font-size:.82rem;color:#547c9a}.hero{position:relative;padding:32px;border-radius:28px;background:linear-gradient(120deg,#ddf5ff,#eafaf0);display:grid;grid-template-columns:1fr 220px;gap:28px;align-items:center}.eyebrow{font-size:.78rem;letter-spacing:.1em;font-weight:750;color:#087cae}.hero h1{font-size:clamp(1.8rem,4.5vw,2.7rem);line-height:1.5;margin:10px 0}.hero p{margin:8px 0}.machine-art{display:block;object-fit:contain}.hero-art .machine-art{width:100%;height:auto}.panel{background:#fff;border:1px solid #b8dcea;border-radius:24px;padding:25px;margin:22px 0;box-shadow:0 5px 16px #06427b08}.panel h2{margin:0 0 12px;font-size:1.3rem}.courses{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.course{display:flex;gap:12px;border:1px solid #b8dcea;border-radius:16px;padding:16px;background:#fff;cursor:pointer}.course:has(input:checked){border:2px solid #008cff;padding:15px;background:#eef9ff}.course input{margin:6px 0 0;width:19px;height:19px;accent-color:#0089f7}.course small{display:block;font-size:.8rem;margin-top:3px}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}.actions>*{flex:1}.actions .primary{flex:2}.topline{display:flex;align-items:center;justify-content:space-between;gap:15px}.topline p{margin:0}.journey{position:relative;padding:30px 0 0;margin:14px auto 4px;max-width:620px}.stops{display:flex;justify-content:space-between;list-style:none;margin:0;padding:0;background:linear-gradient(#badce9,#badce9) center/95% 3px no-repeat}.stops li{display:grid;place-items:center;background:#fff;border:2px solid #b8dce9;border-radius:50%;width:30px;height:30px;font-size:.76rem}.stops .done{background:#dcf6ea;border-color:#55b79d}.machine{position:absolute;left:calc(var(--journey)* (100% - 30px));top:0;width:30px;height:24px;transition:left .35s ease}.machine .machine-art{width:30px;height:24px}.progress-note{text-align:center;font-size:.72rem;color:#547c9a;margin:4px 0 18px}.prompt{margin:14px 0;font-size:1.25rem}.answers{list-style:none;padding:0;margin:14px 0;display:grid;gap:9px;grid-template-columns:repeat(3,minmax(0,1fr))}.answer-slot{min-height:90px;background:#f1faff;border:2px dashed #b4dbea;border-radius:15px;padding:8px;position:relative}.slot-number{font-size:1.05rem;font-weight:750;margin-right:5px}.empty-slot{color:#678697;font-size:.85rem;display:flex;align-items:center;min-height:64px}.card{width:100%;text-align:left;display:flex;align-items:center;gap:13px;padding:14px;background:#fffbed;box-shadow:0 3px 0 #e1dbc6;border-color:#ddd5ba;border-radius:15px}.event-art{object-fit:contain}.card .event-art{width:140px;height:110px;flex-shrink:0}.card .name{line-height:1.95;font-size:1.03rem}.choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.choices .card{flex-direction:column;text-align:center;justify-content:flex-start;min-height:156px}.chosen{padding:4px;background:transparent;border:0;box-shadow:none;display:block}.chosen .event-art{display:none}.chosen .name{font-size:.9rem}.chosen .return{font-size:.68rem;font-weight:400;display:block}.placement{font-size:.82rem;min-height:1.5em}.controls{display:flex;gap:9px;flex-wrap:wrap}.controls .primary{flex:1;min-width:180px}.hint{border-left:4px solid #e3bf56;background:#fff6d9;border-radius:12px;padding:15px;margin-top:16px}.feedback{background:#f0fbf5;border:1px solid #a4d8c8}.feedback.wrong{background:#fff8e8;border-color:#e4c777}.feedback h2{font-size:1.2rem}.timeline{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;list-style:none;margin:16px 0;padding:0}.timeline li{background:#fffdf6;border:1px solid #d6dfd6;border-radius:18px;padding:15px}.timeline .event-art{display:block;width:100%;height:160px;margin-bottom:10px}.timeline h3{font-size:1rem;line-height:1.9;margin:7px 0}.year{font-size:1.35rem;font-weight:800;color:#086dae}.period{font-size:.8rem;color:#35705d}.timeline p{font-size:.86rem;margin:10px 0 0}.person{color:#567389;font-size:.77rem!important}.explanation{background:#fff;border-radius:14px;padding:17px;font-size:.95rem}.next{width:100%;margin-bottom:18px}.score{font-size:2.7rem;font-weight:800;margin:10px 0;color:#087cc5}.score small{font-size:1rem}.breakdown{display:flex;gap:12px;flex-wrap:wrap}.breakdown span{border-radius:12px;padding:10px 14px;background:#eff8fc}.review-item{border-top:1px solid #c8dce7;padding:16px 0}.review-item summary{font-weight:650;cursor:pointer;min-height:44px}.review-item .timeline{margin-bottom:10px}.collection{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:0;list-style:none}.collection li{margin:0}.settings{margin-top:25px;font-size:.85rem}.settings input{width:19px;height:19px;vertical-align:middle;margin-right:7px;accent-color:#0789ed}.save-area{font-size:.83rem;color:#765619}.save-area p:empty{display:none}footer{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin-top:35px;font-size:.83rem}details>summary{cursor:pointer}ruby{ruby-align:center}rt{font-size:.56em;font-weight:400}p,li,h1,h2,h3{overflow-wrap:anywhere}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0)}[hidden]{display:none!important}body[data-reduce-motion="true"] .machine{transition:none}.recent-result{border-top:1px solid #dceaf1;padding:10px 0}.recent-result button{font-size:.82rem}.book-note{padding:14px 18px;background:#edf8ff;border-radius:14px}
@media(max-width:650px){main{padding:15px 13px 28px}.hero{grid-template-columns:1fr;padding:23px;gap:0}.hero-art{position:absolute;right:18px;top:17px;width:70px}.hero .eyebrow{padding-right:58px;font-size:.7rem}.hero h1{font-size:1.9rem}.hero p{font-size:.88rem}.panel{padding:16px;border-radius:20px;margin:16px 0}.courses{grid-template-columns:1fr}.course{padding:13px}.course:has(input:checked){padding:12px}.choices{grid-template-columns:1fr;gap:10px}.choices .card{flex-direction:row;text-align:left;min-height:88px}.card .event-art{width:84px;height:66px}.answers{grid-template-columns:1fr;gap:7px}.answer-slot{min-height:50px;padding:6px 11px}.empty-slot{min-height:34px}.chosen{display:flex;align-items:center;gap:9px;min-height:40px}.chosen .return{margin-left:auto;white-space:nowrap}.chosen .name{font-size:.9rem}.answer-slot:has(.chosen){display:flex;align-items:center;gap:5px;border-style:solid}.controls button{padding:9px 11px;font-size:.91rem}.controls .primary{flex-basis:100%;order:3}.timeline,.collection{grid-template-columns:1fr}.timeline li{display:grid;grid-template-columns:98px minmax(0,1fr);gap:0 12px;padding:14px}.timeline li>.event-art{grid-column:1;grid-row:1/5;width:98px;height:90px}.timeline li>*{grid-column:2}.timeline h3{margin:2px 0}.timeline p{grid-column:1/-1}.collection.timeline li{display:block}.collection.timeline .event-art{float:left;width:98px;margin-right:14px}.actions>*{flex-basis:45%}.actions .primary{flex-basis:100%}.journey{margin-top:12px}.prompt{font-size:1.12rem}.topline{font-size:.83rem}.topline button{padding:8px 12px}.score{font-size:2.3rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.machine.travel{animation:journey-step .4s ease-out}@keyframes journey-step{from{left:calc(var(--from)*(100% - 30px))}to{left:calc(var(--journey)*(100% - 30px))}}body[data-reduce-motion="true"] .machine{animation:none}

/* Keep the next action in reach while leaving explanations and observations scrollable. */
@media(max-width:700px),(max-height:500px) and (max-width:1000px){
  #game-root:has([data-action="next"]){padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  #game-root :is([data-action="next"]){position:fixed;z-index:20;left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));bottom:calc(10px + env(safe-area-inset-bottom,0px));width:auto;margin:0;min-height:52px;box-shadow:0 0 0 6px #fffdf7,0 -4px 18px #073e7d24}
}