:root {
  --navy:#17324a; --ink:#213847; --paper:#f5e7bd; --paper-dark:#d5bc7c;
  --sea:#177f9c; --sea-deep:#0e5878; --foam:#d7f1e8; --coral:#e75b4e;
  --gold:#efb94c; --green:#378b72; --white:#fffdf2;
}
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; overflow-x:hidden; }
body { color:var(--ink); background:var(--paper); font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif; }
button { font:inherit; }
button:focus-visible { outline:4px solid #fff; outline-offset:3px; }
[hidden] { display:none !important; }
.screen { min-height:100dvh; position:relative; overflow:hidden; }
.eyebrow { margin:0 0 10px; font-weight:900; letter-spacing:.14em; color:var(--coral); }

/* Start: a chart becomes the world instead of a card floating over a background. */
.start-screen { display:grid; grid-template-columns:minmax(280px, 42%) 1fr; grid-template-rows:1fr auto; background:var(--paper); isolation:isolate; }
.chart-sky { position:absolute; inset:0 0 42% 0; background:#82c6d2; border-bottom:5px solid var(--navy); z-index:-3; }
.chart-sky::before { content:""; position:absolute; inset:0; opacity:.25; background-image:linear-gradient(90deg, transparent 49%, var(--navy) 50%, transparent 51%),linear-gradient(transparent 49%, var(--navy) 50%, transparent 51%); background-size:84px 84px; }
.sun-disc { position:absolute; right:12%; top:10%; width:120px; aspect-ratio:1; border:6px solid var(--navy); border-radius:50%; background:var(--gold); box-shadow:12px 12px 0 rgba(23,50,74,.16); }
.gull { position:absolute; color:var(--navy); font:bold 48px Georgia; transform:rotate(-8deg); }
.gull-a { right:34%; top:18%; }.gull-b { right:25%; top:30%; font-size:32px; }
.hero-route { position:absolute; right:6%; top:23%; width:46%; height:42%; transform:rotate(-8deg); border-bottom:5px dashed rgba(23,50,74,.65); }
.hero-route i { position:absolute; bottom:-12px; width:20px; height:20px; border:4px solid var(--navy); background:var(--white); transform:rotate(45deg); }
.hero-route i:nth-child(1){left:4%}.hero-route i:nth-child(2){left:22%}.hero-route i:nth-child(3){left:42%}.hero-route i:nth-child(4){left:62%}.hero-route i:nth-child(5){left:82%}.hero-route i:nth-child(6){left:98%}
.hero-copy { align-self:center; padding:7vw 4vw 2vw 7vw; position:relative; z-index:4; }
h1 { margin:0; font-family:Georgia,"Yu Mincho",serif; font-size:clamp(2.8rem,6.3vw,6.6rem); line-height:.94; letter-spacing:-.05em; color:var(--navy); text-shadow:3px 3px 0 var(--white); }
h1 strong { color:var(--coral); font-weight:inherit; }
.lead { max-width:610px; margin:26px 0 24px; font-size:clamp(1rem,1.7vw,1.35rem); line-height:1.8; font-weight:800; }
.quick-help { font-size:.83rem; font-weight:700; }
.rope-button { border:3px solid var(--navy); color:var(--navy); padding:13px 22px; font-weight:900; cursor:pointer; clip-path:polygon(7px 0,calc(100% - 7px) 0,100% 50%,calc(100% - 7px) 100%,7px 100%,0 50%); transition:transform .16s ease, filter .16s ease; }
.rope-button:hover { transform:translateY(-2px); filter:brightness(1.05); }.rope-button:active { transform:translateY(2px); }
.rope-button.primary { background:var(--gold); box-shadow:7px 7px 0 var(--navy); }.rope-button.secondary { background:var(--white); }
.hero-sea { grid-column:1 / -1; align-self:end; height:43vh; min-height:290px; position:relative; background:var(--sea); border-top:7px solid var(--foam); overflow:hidden; }
.hero-sea::before,.ocean-world::before { content:""; position:absolute; inset:0; background-image:radial-gradient(ellipse at center,transparent 58%,rgba(255,255,255,.18) 60%,transparent 63%); background-size:130px 48px; opacity:.7; }
.hero-island { position:absolute; bottom:0; background:#4b9b6f; border:5px solid var(--navy); border-bottom:0; }
.island-left { left:-6%; width:30%; height:24%; clip-path:polygon(0 100%,10% 46%,35% 35%,48% 5%,66% 40%,91% 52%,100% 100%); }
.island-right { right:-5%; width:27%; height:33%; clip-path:polygon(0 100%,8% 55%,28% 42%,42% 3%,58% 48%,83% 32%,100% 100%); }
.island-right i,.island-right b { position:absolute; width:15px; height:52px; background:var(--navy); bottom:18%; }.island-right i{left:49%}.island-right b{left:72%;height:38px}
.wave-line { position:absolute; height:20px; left:-5%; width:110%; border-top:5px dashed rgba(215,241,232,.8); transform:skewX(-16deg); }.wave-one{bottom:24%}.wave-two{bottom:8%;left:-1%}
.sailboat { position:absolute; width:260px; height:240px; }
.hero-boat { right:28%; bottom:13%; animation:boatBob 2.7s ease-in-out infinite; }
.mast { position:absolute; left:50%; bottom:60px; width:8px; height:170px; background:var(--navy); transform:translateX(-50%); }
.sail { position:absolute; bottom:88px; border:5px solid var(--navy); background:var(--white); }
.main-sail { left:50%; width:105px; height:125px; clip-path:polygon(0 0,100% 100%,0 100%); background:var(--coral); }
.jib { right:50%; width:75px; height:98px; clip-path:polygon(100% 0,100% 100%,0 100%); background:var(--gold); }
.hull { position:absolute; left:18%; right:6%; bottom:34px; height:56px; border:6px solid var(--navy); background:#bb6642; clip-path:polygon(0 0,100% 0,82% 100%,20% 100%); }
.wake { position:absolute; left:5%; right:-5%; bottom:12px; border-top:7px solid var(--foam); transform:skewX(-30deg); }
.start-key { grid-column:1/-1; position:absolute; right:3vw; bottom:2.8vh; z-index:5; display:flex; border:4px solid var(--navy); background:var(--white); box-shadow:8px 8px 0 rgba(23,50,74,.8); }
.start-key span { padding:10px 14px; font-size:.8rem; border-right:2px solid var(--navy); }.start-key span:last-child{border:0}.start-key b{display:block;color:var(--coral);font-size:1rem}

/* Play */
.play-screen { display:grid; grid-template-rows:auto minmax(390px,1fr) auto; background:var(--sea-deep); }
.rope-hud { min-height:62px; background:var(--navy); color:var(--white); display:flex; align-items:stretch; gap:0; border-bottom:6px double var(--gold); z-index:8; }
.rope-hud > div { min-width:96px; padding:8px 18px; border-right:2px dashed rgba(255,255,255,.28); }.rope-hud small{display:block;opacity:.75;font-size:.68rem;font-weight:800}.rope-hud strong{font-size:1.18rem}.sound-button{margin:auto 12px auto auto;border:2px solid var(--white);background:transparent;color:var(--white);padding:8px 12px;cursor:pointer;font-weight:900}
.ocean-world { position:relative; overflow:hidden; min-height:390px; background:var(--sea); border-bottom:8px solid var(--navy); }
.ocean-world::after { content:""; position:absolute; left:-4%; right:-4%; bottom:0; height:21%; background:var(--sea-deep); clip-path:polygon(0 48%,7% 15%,15% 56%,24% 8%,33% 58%,43% 20%,53% 64%,62% 12%,72% 53%,82% 19%,91% 62%,100% 22%,100% 100%,0 100%); z-index:0; }
.map-lines { position:absolute; inset:0; opacity:.15; background-image:linear-gradient(90deg,transparent 49%,var(--navy) 50%,transparent 51%),linear-gradient(transparent 49%,var(--navy) 50%,transparent 51%);background-size:70px 70px; }
.route-map { position:absolute; left:3%; right:3%; top:18px; height:42px; display:flex; justify-content:space-between; border-top:4px dashed rgba(255,255,255,.62); z-index:3; }
.route-node { transform:translateY(-14px) rotate(45deg); width:24px; height:24px; border:4px solid var(--navy); background:var(--white); display:flex; align-items:center; justify-content:center; color:var(--navy); font-size:.55rem; font-weight:900; transition:background .2s,transform .2s; }
.route-node.done { background:var(--gold); transform:translateY(-14px) rotate(135deg) scale(1.15); }.route-node.current { background:var(--coral); box-shadow:0 0 0 6px rgba(255,255,255,.5); }
.mission-flag { position:absolute; top:65px; left:3%; width:min(34vw,420px); z-index:4; background:var(--paper); border:5px solid var(--navy); padding:14px 18px 16px; clip-path:polygon(0 0,100% 0,calc(100% - 22px) 50%,100% 100%,0 100%); box-shadow:8px 8px 0 rgba(23,50,74,.35); }
.mission-flag p{margin:0}.mission-flag>p:first-child{font-size:.78rem;font-weight:900;color:var(--coral)}.mission-flag h2{font:900 clamp(1.08rem,2vw,1.55rem) Georgia,"Yu Mincho",serif;margin:5px 0;color:var(--navy)}.mission-flag #missionPurpose{font-weight:800;line-height:1.55}
.voyage-boat { right:9%; bottom:13%; width:min(48vw,520px); height:330px; z-index:3; transition:transform .55s cubic-bezier(.2,.9,.25,1.25); }
.voyage-boat.surge { transform:translateX(34px) rotate(-1deg); }.voyage-boat.oops { animation:boatOops .35s ease; }
.voyage-boat .mast { height:250px; bottom:54px; left:48%; }
.voyage-boat .hull { left:9%; right:2%; bottom:25px; height:70px; box-shadow:0 10px 0 rgba(23,50,74,.25); }.voyage-boat .hull i,.voyage-boat .hull b{position:absolute;top:16px;width:18px;height:18px;border:4px solid var(--navy);border-radius:50%;background:var(--gold)}.voyage-boat .hull i{left:38%}.voyage-boat .hull b{left:56%}
.sail-board { position:absolute; left:7%; right:2%; top:20px; height:230px; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:5px; transform:skewY(-2deg); }
.sail-slot { position:relative; border:5px solid var(--navy); color:var(--navy); background:rgba(255,253,242,.35); padding:12px; cursor:default; font-weight:900; text-align:left; overflow:hidden; transition:background .25s,transform .25s; clip-path:polygon(0 0,100% 8%,94% 100%,8% 93%); }
.sail-slot small{display:block;color:var(--coral);font-size:.66rem;letter-spacing:.1em}.sail-slot span{display:block;font-size:clamp(.75rem,1.35vw,1rem);line-height:1.38}.claim-slot{grid-row:1/3;background:rgba(239,185,76,.22)}.reason-slot{background:rgba(255,253,242,.3)}.example-slot{background:rgba(215,241,232,.25)}
.sail-slot.active { background:var(--gold); animation:sailPulse 1.2s ease-in-out infinite; }.sail-slot.filled { background:var(--white); transform:scale(1.015); }.sail-slot.filled::after{content:"✓";position:absolute;right:8px;top:4px;color:var(--green);font-size:1.25rem}
.feedback { position:absolute; z-index:5; left:3%; bottom:24px; max-width:42%; margin:0; color:var(--navy); background:var(--foam); border:4px solid var(--navy); padding:10px 16px; font-weight:900; line-height:1.45; box-shadow:6px 6px 0 rgba(23,50,74,.4); }
.feedback.good{background:var(--gold)}.feedback.try{background:#ffd8cf}.success-burst{position:absolute;right:25%;top:35%;z-index:6}.success-burst i{position:absolute;width:12px;height:48px;background:var(--gold);transform-origin:6px 70px;opacity:0}.success-burst.show i{animation:ray .65s ease-out}.success-burst i:nth-child(2){transform:rotate(72deg)}.success-burst i:nth-child(3){transform:rotate(144deg)}.success-burst i:nth-child(4){transform:rotate(216deg)}.success-burst i:nth-child(5){transform:rotate(288deg)}
.current-tray { position:relative; z-index:5; background:var(--paper); padding:12px 3% max(15px,env(safe-area-inset-bottom)); border-top:5px solid var(--paper-dark); }
.current-heading { display:flex; justify-content:space-between; align-items:end; gap:10px; margin-bottom:8px; }.current-heading p{margin:0}.current-heading span{display:inline-block;background:var(--coral);color:#fff;padding:3px 8px;margin-right:8px;font-weight:900}.current-heading strong{font-size:1rem}.current-heading small{font-weight:800;opacity:.72}
.candidate-stream { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.word-strip { position:relative; min-height:92px; border:4px solid var(--navy); color:var(--navy); background:var(--white); padding:13px 14px 17px; font-weight:900; line-height:1.45; cursor:pointer; clip-path:polygon(0 7px,7px 0,calc(100% - 14px) 0,100% 14px,calc(100% - 6px) calc(100% - 8px),calc(100% - 20px) 100%,6px calc(100% - 5px)); box-shadow:5px 5px 0 var(--sea-deep); touch-action:none; user-select:none; animation:stripFloat 2.4s ease-in-out infinite; }
.word-strip:nth-child(2){animation-delay:-.8s}.word-strip:nth-child(3){animation-delay:-1.6s}.word-strip::before{content:attr(data-key);position:absolute;left:5px;top:4px;width:21px;height:21px;display:grid;place-items:center;background:var(--navy);color:#fff;font-size:.7rem}.word-strip:hover{background:#fff4c7}.word-strip.swiping{transform:translateY(-10px);background:var(--gold)}

/* Quiz and result */
.quiz-overlay { position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:16px; background:rgba(23,50,74,.88); }
.quiz-sheet { width:min(720px,100%); max-height:94dvh; overflow:auto; background:var(--paper); border:6px double var(--navy); padding:clamp(18px,4vw,34px); box-shadow:14px 14px 0 rgba(0,0,0,.28); transform:rotate(-.4deg); }
.quiz-kicker{color:var(--coral);font-weight:900}.quiz-sheet h2{font:900 clamp(1.25rem,3vw,1.8rem) Georgia,"Yu Mincho",serif}.quiz-choices{display:grid;gap:9px}.quiz-choice{border:3px solid var(--navy);background:var(--white);color:var(--navy);padding:13px;text-align:left;font-weight:800;cursor:pointer}.quiz-choice.correct{background:#bfe6bd}.quiz-choice.incorrect{background:#ffd0c7}.quiz-explanation{margin:14px 0;padding:12px;border-left:7px solid var(--gold);background:var(--white);font-weight:700;line-height:1.65}
.result-screen { display:grid; place-content:center; justify-items:center; padding:32px 16px; background:var(--paper); text-align:center; }
.result-chart { width:min(680px,90vw);height:105px;position:relative;border-bottom:5px dashed var(--sea);margin-bottom:15px}.result-chart span{position:absolute;left:3%;bottom:-14px;width:24px;height:24px;background:var(--coral);border:4px solid var(--navy);transform:rotate(45deg)}.result-chart i{position:absolute;left:48%;bottom:-14px;width:24px;height:24px;background:var(--gold);border:4px solid var(--navy);transform:rotate(45deg)}.result-chart b{position:absolute;right:2%;bottom:-20px;width:80px;height:60px;background:var(--green);border:4px solid var(--navy);clip-path:polygon(0 100%,12% 38%,43% 48%,60% 0,75% 45%,100% 100%)}
.result-screen h2{margin:4px 0 12px;font:900 clamp(1.6rem,4vw,2.5rem) Georgia,"Yu Mincho",serif;color:var(--navy)}.result-score-label{margin:0;font-weight:900}.final-score{font:900 clamp(3.4rem,8vw,6.5rem) Georgia,serif;color:var(--coral);line-height:1}.result-stats{display:flex;gap:0;margin:18px 0;border:4px solid var(--navy)}.result-stats div{padding:9px 18px;border-right:3px dashed var(--navy)}.result-stats div:last-child{border:0}.result-stats dt{font-size:.72rem;font-weight:800}.result-stats dd{margin:0;font-size:1.25rem;font-weight:900}.record-message{min-height:1.5em;font-weight:900}.result-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.ranking-panel{width:min(720px,94vw);margin-top:18px;text-align:left;border:4px solid var(--navy);background:var(--white);padding:14px}
@keyframes boatBob{50%{transform:translateY(-8px) rotate(1deg)}}@keyframes boatOops{25%{transform:translateX(-12px) rotate(-2deg)}75%{transform:translateX(8px) rotate(2deg)}}@keyframes stripFloat{50%{transform:translateY(-5px) rotate(.3deg)}}@keyframes sailPulse{50%{filter:brightness(1.16)}}@keyframes ray{0%{opacity:1;transform:translateY(0) rotate(var(--r,0deg))}100%{opacity:0;transform:translateY(-50px) rotate(var(--r,0deg))}}

@media(max-width:760px){
  .start-screen{display:block;padding-bottom:300px}.chart-sky{bottom:300px}.hero-copy{padding:42px 20px 12px}.lead{font-size:.98rem;margin:17px 0}.hero-sea{position:absolute;bottom:0;width:100%;height:300px;min-height:0}.hero-boat{right:18%;transform:scale(.76);transform-origin:bottom}.start-key{display:none}.sun-disc{width:78px;right:8%}.hero-route{display:none}
  .play-screen{grid-template-rows:auto minmax(430px,1fr) auto}.rope-hud>div{min-width:0;flex:1;padding:7px 5px;text-align:center}.rope-hud strong{font-size:.95rem}.sound-button{margin:7px 6px;padding:5px;font-size:.72rem}
  .mission-flag{top:58px;left:4%;width:92%;padding:10px 14px}.voyage-boat{width:92vw;right:-2vw;bottom:8%;height:290px}.voyage-boat .mast{height:210px}.sail-board{height:195px;top:46px}.sail-slot{padding:8px;border-width:4px}.sail-slot span{font-size:.7rem}.feedback{left:4%;bottom:12px;max-width:92%;font-size:.82rem;padding:8px 10px}.route-map{top:17px}.route-node{width:20px;height:20px}
  .current-heading small{display:none}.candidate-stream{grid-template-columns:1fr;gap:7px}.word-strip{min-height:59px;padding:10px 10px 10px 36px;font-size:.84rem;animation:none}.current-tray{padding-top:9px}.current-heading{margin-bottom:6px}
  .result-stats{width:100%;}.result-stats div{padding:8px 7px;flex:1}.result-screen{justify-content:start;padding-top:24px}.result-chart{height:64px}
}
@media(max-width:420px){h1{font-size:2.8rem}.quick-help{font-size:.75rem}.voyage-boat{transform:scale(.9);transform-origin:bottom right;right:-8vw}.mission-flag #missionPurpose{font-size:.82rem}.rope-hud small{font-size:.58rem}.rope-hud strong{font-size:.82rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}}