:root{--paper:#f5f3ed;--ink:#243c41;--muted:#65787a;--green:#215951;--gold:#b78736;--line:#dce1dc}*{box-sizing:border-box}html{overscroll-behavior-y:none}body{margin:0;background:var(--paper);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,'Hiragino Sans',sans-serif}body.child-screen{touch-action:pan-y;overscroll-behavior:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}body.child-screen img{pointer-events:none;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;-webkit-touch-callout:none}button,input{font:inherit}button,.file-label{cursor:pointer;touch-action:manipulation;border:1px solid var(--line);background:#fffdf8;color:var(--ink);border-radius:14px;padding:12px 20px;min-height:48px;font-weight:700}button.primary{background:var(--green);color:white;border-color:var(--green)}button:disabled{opacity:.45;cursor:default}button:focus-visible,a:focus-visible{outline:3px solid var(--gold);outline-offset:3px}[hidden]{display:none!important}a{color:var(--green)}.topbar{max-width:1080px;margin:auto;padding:22px 28px;display:flex;justify-content:space-between;align-items:center}.brand{display:flex;align-items:center;gap:12px;font-weight:800;color:var(--ink);text-decoration:none}.brand small{display:block;font-size:9px;letter-spacing:.15em;color:var(--muted);margin-top:5px}.brand-icon{display:grid;place-items:center;width:42px;height:42px;background:var(--green);color:white;border-radius:50%;font-size:23px}.topbar button{padding:10px 16px}main{max-width:1080px;margin:auto;padding:0 28px 36px}.eyebrow{font-size:12px;letter-spacing:.14em;font-weight:700}.home-bottom{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px;font-size:13px;color:var(--muted)}.text-button{background:none;border:none;font-size:13px}.button-row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}.narrow{max-width:760px;text-align:center}.narrow h1{font-size:32px}.reward-card{text-align:left;background:white;border-radius:22px;overflow:hidden;border:1px solid var(--line);box-shadow:0 14px 45px #173f4512}.reward-card img{width:100%;max-height:42vh;object-fit:contain;display:block;background:#e7eeeb}.reward-card>div{padding:22px}.reward-card h2{margin:8px 0 12px}.reward-card small{color:var(--muted)}.page-heading{display:flex;align-items:center;justify-content:space-between}.page-heading h1{margin-top:10px}.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.train-card{padding:0;overflow:hidden;text-align:left;border-radius:18px;min-height:200px}.train-card img{width:100%;height:165px;object-fit:cover;display:block}.train-card>div{padding:17px}.train-card small{display:block;color:var(--muted);font-weight:400;margin-bottom:7px}.empty-card{border:1px dashed #c4ccc6;border-radius:18px;min-height:235px;display:grid;place-content:center;text-align:center;color:#6d817d}.empty-card b{font-size:26px;opacity:.55}.empty-card span{font-size:12px;margin-top:12px}.panel,.record{border:1px solid var(--line);background:#fffdf9;border-radius:16px;padding:20px;margin:14px 0;line-height:1.8}summary{cursor:pointer;font-weight:700}.muted{color:var(--muted);line-height:1.8}.record summary{display:flex;align-items:center;gap:20px}.record .letter{font-size:32px;min-width:44px}.record .count{font-size:13px;color:var(--muted);font-weight:400}.record ul{padding-left:20px}.record li{margin:12px 0}.options{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px}.options label{padding:10px;background:var(--paper);border-radius:10px;font-size:20px}input[type=checkbox]{width:19px;height:19px;vertical-align:middle;accent-color:var(--green)}.file-label{font-size:14px;display:inline-flex;align-items:center}.file-label input{max-width:180px;margin-left:10px;font-size:12px}dialog{border:1px solid var(--line);border-radius:22px;max-width:720px;width:calc(100% - 32px);padding:24px;max-height:90dvh;overflow:auto;overscroll-behavior:contain}dialog::backdrop{background:#132e3bb0}dialog img{width:100%;max-height:45vh;object-fit:contain;display:block;margin:18px 0;background:#edf0e9}dialog p{line-height:1.85}dialog .close{display:block;margin-left:auto}#detail-credit{font-size:13px;line-height:1.8}#storage-warning{padding:12px 24px;background:#fff1c9;color:#6b4916;font-size:14px}#storage-warning button{margin:6px}
/* Writing mode owns the viewport. Only the drawing region disables touch gestures. */
html.playing,body.playing{height:100%;overflow:hidden;overscroll-behavior:none}body.playing{position:fixed;inset:0;width:100%;height:100dvh;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}body.playing .topbar{display:none}#game{width:100%;max-width:880px;padding:12px 20px;flex:1;min-height:0;display:flex;flex-direction:column;gap:8px;overflow:hidden;overscroll-behavior:none}.play-top{display:flex;align-items:center;justify-content:space-between;gap:20px;flex:none}#round-label{font-weight:800;font-size:20px}#stations{display:flex;gap:10px}#stations span{width:23px;height:7px;border-radius:8px;background:#d4dcd5}#stations .done{background:var(--green)}#stations .current{background:var(--gold)}.writing{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;border:1px solid var(--line);border-radius:24px;background:#fffefa;overflow:hidden}.writing-heading{width:100%;padding:10px 20px;display:flex;justify-content:space-between;align-items:center;font-size:14px;color:var(--muted);flex:none}.char-title-group{display:flex;align-items:center;gap:10px;min-width:0}#char-label{font-size:22px;color:var(--ink);font-weight:700}.speak-btn{display:grid;place-items:center;flex:none;width:48px;height:48px;min-height:48px;padding:0;border-radius:50%;background:#fff8e7;border-color:#d9bd83;font-size:22px;line-height:1;transition:transform .15s ease,background-color .15s ease,box-shadow .15s ease}.speak-btn:active{transform:scale(.94)}.speak-btn.speaking{background:#f6e3b7;border-color:var(--gold);box-shadow:0 0 0 5px #f0d89c66;transform:scale(1.04)}#board{display:block;flex:1;min-height:0;width:100%;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;overscroll-behavior:none}.stroke{fill:none;stroke-linejoin:round;stroke-linecap:round;stroke-width:3.7}.ghost{stroke:#d4ddd6}.finished{stroke:#243c41}.ink{stroke:#26766a}#message{min-height:46px;padding:8px 12px;flex:none;text-align:center;font-weight:700;font-size:17px}.play-tools{display:flex;gap:10px;justify-content:center;flex:none}.play-tools button{min-width:105px}#next{margin-left:auto}.photo-error{display:block;padding:10px;color:var(--muted);font-size:13px}
@media(max-width:700px){.topbar{padding:16px}.brand{font-size:14px}.brand small{font-size:8px}main{padding:0 16px 28px}.card-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.train-card img{height:135px}.train-card>div{padding:12px;font-size:14px}.empty-card{min-height:205px}#game{padding:8px 12px}.writing-heading{padding:8px 14px}.play-tools button{min-width:0;padding:11px 17px}.panel,.record{padding:15px}.home-bottom{font-size:12px}.home-bottom .text-button{padding:10px}.file-label{flex-direction:column;gap:8px}.record summary{gap:12px}#message{font-size:15px}.narrow h1{font-size:27px}}
@media(max-height:550px){#game{gap:4px;padding:6px 12px}.play-top button,.play-tools button{min-height:40px;padding:8px 14px}.writing-heading{padding:4px 14px}#message{min-height:32px;font-size:14px;padding:4px}.play-top{max-height:40px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.brand-icon{display:block;width:42px;height:42px;object-fit:cover;border-radius:12px;background:none;color:inherit;font-size:0}
button.danger{background:#fff7f5;color:#a6382e;border-color:#dca9a3}
textarea{font:inherit}.panel hr{border:0;border-top:1px solid var(--line);margin:24px 0}.panel h3{margin-bottom:10px}.backup-label{display:block;font-size:13px;color:var(--muted);margin:14px 0 6px}.backup-actions{justify-content:flex-start}#backup-text{display:block;width:100%;min-height:150px;resize:vertical;border:1px solid var(--line);border-radius:12px;padding:12px;background:white;color:var(--ink);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;line-height:1.5}#backup-text:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
#confirm-reset-album{background:#a6382e;color:white;border-color:#a6382e}
.grouped-options{display:grid;grid-template-columns:1fr 2fr;align-items:start}.option-group{display:flex;flex-wrap:wrap;gap:8px}.option-group strong{flex-basis:100%;font-size:13px;color:var(--muted)}.record-group{font-size:20px}.record-course-meta{margin-left:14px;font-size:13px;color:var(--muted);font-weight:400}.record-course[open]>summary{margin-bottom:6px}.record-course .record{margin:10px 0}
@media(max-width:700px){.grouped-options{grid-template-columns:1fr}.option-group+ .option-group{margin-top:8px}}
.char-reading{margin-left:12px;font-size:17px;color:var(--gold);font-weight:800}
.topbar-actions{display:flex;align-items:center;gap:10px}.profile-chip{display:inline-flex;align-items:center;white-space:nowrap;border-radius:999px;padding:8px 12px;font-weight:800;font-size:14px;background:#e6f3ff;color:#185887;border:2px solid #9dc9ed}body[data-profile="p2"] .profile-chip{background:#fff0f6;color:#9a3662;border-color:#f2acc9}body[data-profile="guest"] .profile-chip{background:#effaf2;color:#2c6b44;border-color:#a9d8b8}
@media(max-width:700px){.profile-chip{font-size:12px;padding:7px 9px}}
/* Shiny cards are a second collection tier; the original photos stay intact. */
.shiny-progress{margin:-8px 0 20px;color:#755013;font-weight:800}
.train-card.shiny,.reward-card.shiny,#detail.shiny{position:relative;isolation:isolate;border:3px solid #d4a52c;box-shadow:0 0 0 2px #fff3bb inset,0 8px 28px #b7873670}
.train-card.shiny::after,.reward-card.shiny::after,#detail.shiny::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background:linear-gradient(110deg,transparent 25%,#fff9c980 43%,#fff 50%,#ffe2a080 57%,transparent 75%);background-size:250% 100%;animation:shiny-sweep 4.5s ease-in-out infinite}
.shiny-stars{position:absolute;top:10px;right:10px;z-index:2;border:1px solid #fff4c8;border-radius:999px;padding:5px 12px;background:linear-gradient(135deg,#704612,#d6a72e,#fff1ab,#aa6916);color:#fff;font-size:15px;font-weight:900;text-shadow:0 1px 2px #5b350c;box-shadow:0 3px 10px #4d300d80}
#detail.shiny .shiny-stars{top:24px;right:94px}
@keyframes shiny-sweep{0%,25%{background-position:130% 0}60%,100%{background-position:-130% 0}}
@media(prefers-reduced-motion:reduce){.train-card.shiny::after,.reward-card.shiny::after,#detail.shiny::after{animation:none;background:none}}
/* Keep the reward photo area stable while Safari fetches the image. */
.reward-card>.reward-photo-frame{position:relative;height:min(42vh,420px);padding:0;background:#e7eeeb}
.reward-photo-frame img{display:block;width:100%;height:100%;max-height:none;object-fit:contain}
.reward-photo-frame.loading img{opacity:0}
.reward-photo-loading{position:absolute;inset:0;display:grid;place-content:center;color:#526c69;font-weight:700;font-size:15px}
.reward-photo-frame:not(.loading) .reward-photo-loading{display:none}
.reward-photo-frame .photo-error{position:absolute;inset:0;display:grid;place-content:center;text-align:center;background:#e7eeeb}

/* Recall keeps the learner's own ink visible; answers appear only at review. */
#writing-modes{display:flex;justify-content:center;gap:8px;flex:none}
#writing-modes button{font-size:15px;padding:9px 14px}
#writing-modes [aria-pressed="true"]{background:var(--green);color:white;border-color:var(--green)}
.writing{position:relative}
#recall-grid{fill:none;stroke:#c6d0cc;stroke-width:.5;stroke-dasharray:1.5 2}
#recall-countdown{position:absolute;top:70px;right:22px;font-size:32px;font-weight:800;color:var(--gold);pointer-events:none}
#game[data-recall] #strokes{transition:opacity .3s ease;opacity:0;pointer-events:none}
#game[data-recall="preview"] #strokes{opacity:1}
#game[data-recall="hint"] #strokes{opacity:.45}
#game[data-recall="complete"] #strokes{opacity:.65}
#game[data-recall] #strokes .stroke{stroke:#b78736;stroke-width:2.5}
#game[data-recall="complete"] .writing{box-shadow:inset 0 0 0 3px #d4a52c;animation:recall-open .6s ease}
#written .stroke{stroke:#26766a;stroke-width:2.8}
@keyframes recall-open{from{background:#fff0be}to{background:#fffefa}}
@media(max-width:450px){#writing-modes button{font-size:14px;padding:8px 12px}.play-top{gap:8px}#stations{gap:5px}#stations span{width:18px}}

/* Home: station platform. Profile colours follow the existing profile chips. */
body{--accent:#1d5f8c}
body[data-profile="p2"]{--accent:#a23a62}
body[data-profile="guest"]{--accent:#2f7d4f}
#home{max-width:860px;display:flex;flex-direction:column;min-height:100dvh;padding-bottom:0}
body.home-screen .topbar{display:none}
.hero-photo{position:relative;flex:none;height:clamp(220px,min(38vh,62vw),420px);margin:0 calc(50% - 50vw);overflow:hidden;background:#1f3336}
#hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 60%;animation:hero-pan 18s ease-in-out infinite alternate}
@keyframes hero-pan{from{transform:scale(1.08) translateX(2%)}to{transform:scale(1.08) translateX(-2%)}}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(#0a161a00 55%,#0a161a99)}
.hero-top{position:absolute;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:calc(env(safe-area-inset-top) + 16px) max(28px,calc(50vw - 480px)) 0}
.hero-brand{display:flex;align-items:center;gap:10px;padding:5px 16px 5px 5px;border-radius:999px;background:#10202473;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;font-size:18px;font-weight:800;letter-spacing:.06em;box-shadow:0 4px 14px #0000002e}
.hero-brand img{width:34px;height:34px;border-radius:50%}
.hero-caption{position:absolute;left:max(28px,calc(50vw - 480px));bottom:78px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;color:#fff}
.hero-tag{padding:4px 10px;border-radius:999px;background:var(--accent);font-size:12px;font-weight:800;letter-spacing:.1em}
.hero-name{font-size:26px;font-weight:800;text-shadow:0 2px 8px #00000080}
.departure-board{display:flex;align-items:center;gap:14px;padding:9px 16px;border-radius:8px;background:#161816;font-weight:800;box-shadow:0 6px 18px #00000059}
.departure-label{font-size:13px;color:#a3a8a3}
.departure-left{animation:departure-blink 1.6s steps(1) infinite}
@keyframes departure-blink{0%,60%{opacity:1}61%,100%{opacity:.35}}
.departure-dest{font-size:18px;letter-spacing:.1em;color:#ff9f2e}
.departure-left{font-size:15px;letter-spacing:.06em;color:#7be39a}
.station-sign{position:relative;width:min(680px,100%);margin:-58px auto 0;overflow:hidden;border-radius:14px;background:#fff;text-align:center;box-shadow:0 3px 0 #cfcbbf,0 14px 34px #1f33361a}
.station-name{margin:0;padding:18px 0 0 .14em;font-size:60px;font-weight:900;letter-spacing:.14em;line-height:1}
.station-roman{margin:6px 0 0;padding-bottom:12px;font-size:14px;font-weight:700;letter-spacing:.3em;color:#58686a}
.station-band{height:12px;background:var(--accent)}
.station-number{position:absolute;left:22px;top:20px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;width:56px;height:56px;border:5px solid var(--accent);border-radius:12px;line-height:1}
.station-number small{font-size:11px;font-weight:900;letter-spacing:.08em}
.station-number b{font-size:22px;font-weight:900}
.home-label{margin:18px 0 8px;font-size:15px;font-weight:800;color:#58686a}
.lines{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:14px}
.line-button{display:flex;align-items:center;gap:14px;min-height:92px;padding:0 18px;border:none;border-radius:12px;background:#1e2b33;color:#fff;text-align:left;box-shadow:0 4px 0 #0f171c}
.line-button:active{transform:translateY(3px);box-shadow:0 1px 0 #0f171c}
.line-number{flex:none;display:grid;place-items:center;width:56px;height:56px;border-radius:10px;background:var(--line-color);font-size:34px;font-weight:900}
.line-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.line-text small{font-size:12px;letter-spacing:.1em;color:#b9c4c8}
.line-text b{font-size:26px;letter-spacing:.04em}
.line-text .line-sub{font-size:13px;letter-spacing:0;color:#f0c132}
.resume-area{display:grid;grid-template-columns:1.6fr 1fr;gap:14px;margin-top:22px}
.resume-button.primary{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;min-height:92px;padding:0 26px;font-size:28px;background:var(--accent);border-color:var(--accent)}
.resume-button small{font-size:15px;opacity:.9}
.resume-area #restart{font-size:20px}
.tickets{display:grid;grid-template-columns:1fr 190px;gap:14px}
.profile-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.profile-buttons[data-count="1"]{grid-template-columns:minmax(0,1fr)}
.ticket{position:relative;display:flex;align-items:center;gap:14px;min-height:92px;padding:0 20px;border:3px solid #ddd6c2;border-radius:10px;text-align:left;background-color:#fbf6e4;background-image:repeating-linear-gradient(135deg,#1d5f8c0f 0 6px,transparent 6px 12px)}
.ticket[data-profile="p2"]{background-color:#fcf1ee;background-image:repeating-linear-gradient(135deg,#a23a620f 0 6px,transparent 6px 12px)}
.ticket[data-profile="guest"]{background-color:#eef7ef;background-image:repeating-linear-gradient(135deg,#2f7d4f0f 0 6px,transparent 6px 12px)}
.ticket[data-profile="p1"].selected{border-color:#1d5f8c}
.ticket[data-profile="p2"].selected{border-color:#a23a62}
.ticket[data-profile="guest"].selected{border-color:#2f7d4f}
.ticket-badge{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#1d5f8c;color:#fff;font-size:24px;font-weight:900}
.ticket[data-profile="p2"] .ticket-badge{background:#a23a62}
.ticket[data-profile="guest"] .ticket-badge{background:#2f7d4f}
.ticket-name{overflow:hidden;text-overflow:ellipsis}
.name-row{display:flex;align-items:center;gap:12px;margin:8px 0;font-weight:700}.name-row input{flex:1;min-width:0;max-width:16em;font:inherit;font-size:18px;padding:8px 10px;border:2px solid #cfc8b4;border-radius:8px}
.ticket-text{display:flex;flex-direction:column;gap:1px;min-width:0}
.ticket-name{font-size:24px;font-weight:900;white-space:nowrap}
.ticket-owned{font-size:13px;color:#4f6264}
.ticket-punch{display:none;position:absolute;right:10px;top:10px;width:22px;height:22px;border-radius:50%;background:var(--paper);box-shadow:inset 0 2px 3px #00000040}
.ticket.selected .ticket-punch{display:block}
.collection-button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:92px;border:3px solid #d8d2bf;border-radius:16px;background:#fff;font-size:21px}
.collection-text{display:flex;flex-direction:column;align-items:center;line-height:1.25}
.collection-text #owned{font-size:14px;color:var(--muted)}
.collection-thumbs{display:flex}
.collection-thumbs img,.thumb-empty{box-sizing:border-box;width:46px;height:32px;object-fit:cover;border:2px solid #fff;border-radius:6px;box-shadow:0 1px 3px #0003}
.collection-thumbs>*+*{margin-left:-14px}
.collection-thumbs>:first-child:not(:only-child){transform:rotate(-8deg)}
.collection-thumbs>:last-child:not(:only-child){transform:rotate(8deg)}
.thumb-empty{display:grid;place-items:center;background:#f1eee5;color:#a89f86;font-size:16px;font-weight:900}
#home .home-bottom{margin-top:auto;padding:10px 0 6px}
.tactile-strip{flex:none;height:46px;margin:0 calc(50% - 50vw);border-top:6px solid #fff;background-color:#f0c132;background-image:radial-gradient(circle,#d6a516 3px,transparent 3.6px);background-size:16px 16px}
@media(max-width:700px){.hero-top{padding-left:16px;padding-right:16px}
.hero-brand{font-size:0;gap:0;padding:4px}
.hero-caption{left:16px;bottom:62px}
.hero-name{font-size:19px}
.departure-board{gap:8px;padding:8px 12px}
.departure-dest{font-size:15px;letter-spacing:.04em}
.departure-left{font-size:13px}
.station-sign{margin-top:-44px}
.station-name{padding-top:14px;font-size:44px}
.station-roman{font-size:13px;padding-bottom:14px}
.station-number{left:12px;top:12px;width:46px;height:46px;border-width:4px}
.station-number small{font-size:9px}
.station-number b{font-size:17px}
.lines{grid-auto-flow:row}
.line-button{min-height:84px}
.resume-area,.tickets{grid-template-columns:1fr}
.ticket{min-height:88px;padding:0 12px;gap:10px}
.ticket-badge{width:40px;height:40px;font-size:19px}
.ticket-name{font-size:19px}
.ticket-owned{font-size:11px}
.ticket-punch{right:7px;top:7px;width:16px;height:16px}
.collection-button{flex-direction:row;min-height:72px}
}
@media(min-width:701px) and (min-height:900px){.station-name{padding-top:24px;font-size:76px}
.station-roman{padding-bottom:18px;font-size:17px}
.station-number{top:26px;width:66px;height:66px}
.station-number b{font-size:26px}
.home-label{margin-top:28px}
.line-button,.resume-button.primary,.ticket,.collection-button{min-height:132px}
}
/* Sound on/off: in the home hero (next to the brand) and in the writing screen's top row. */
.hero-left{display:flex;align-items:center;gap:10px}.sound-toggle{white-space:nowrap}.hero-sound{min-height:44px;padding:8px 14px;border:none;border-radius:999px;background:#10202473;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;font-size:16px;font-weight:800;box-shadow:0 4px 14px #0000002e}.sound-toggle[aria-pressed="false"]{opacity:.75}
@media(max-width:700px){.sound-label{display:none}}
#round-label,#rest{white-space:nowrap}@media(max-width:450px){.play-top{gap:6px}.play-top button{padding:8px 10px}#stations{gap:4px}#stations span{width:14px}}
/* The sound button narrows the departure board on phones: keep each part on one line and drop the small "つぎは" label. */
.departure-board>span{white-space:nowrap}@media(max-width:430px){.departure-label{display:none}.departure-board{padding:8px 10px}.departure-dest{font-size:14px;letter-spacing:0}.departure-left{font-size:12px;letter-spacing:0}}