:root{
  --night:#17162d;--deep:#242044;--ink:#302845;--paper:#fff5d8;--paper2:#f3dfb6;
  --gold:#ffc95f;--sun:#ff8b5e;--mint:#8ed8bb;--blue:#81b9d9;--rose:#ef8c9b;
  --shadow:rgba(25,17,43,.32);--fold:0%;font-family:"Hiragino Maru Gothic ProN","Yu Gothic",Meiryo,sans-serif;
}
*{box-sizing:border-box}
html{min-width:320px;background:var(--night);color:var(--ink)}
body{margin:0;min-height:100vh;overflow-x:hidden;background:
  radial-gradient(circle at 15% 8%,rgba(255,201,95,.11) 0 2px,transparent 3px),
  radial-gradient(circle at 82% 22%,rgba(255,255,255,.12) 0 1px,transparent 2px),
  #17162d;background-size:64px 64px,48px 48px}
button{font:inherit}
.paper-theater{width:min(100%,880px);min-height:100vh;margin:auto;position:relative;background:var(--paper);box-shadow:0 0 80px #05040d}
.screen{min-height:100vh;position:relative;overflow:hidden}
.hidden{display:none!important}
.eyebrow{margin:0;color:#84512f;font-weight:900;letter-spacing:.13em;font-size:.78rem}
.quiet-note{font-size:.86rem;font-weight:700;color:#695d62;text-align:center}

.start-screen{padding:clamp(32px,7vw,70px) clamp(20px,7vw,74px) 42px;text-align:center;background:
  linear-gradient(178deg,transparent 0 73%,rgba(220,181,114,.25) 73.3% 74%,transparent 74.3%),var(--paper)}
.night-canopy{height:125px;margin:-32px -74px 24px;background:#201d3d;position:relative;overflow:hidden;clip-path:polygon(0 0,100% 0,100% 72%,81% 84%,63% 69%,43% 88%,23% 72%,0 91%)}
.night-canopy i{position:absolute;width:4px;height:4px;border-radius:50%;background:#fff3bd;box-shadow:110px 24px #fff3bd,250px 42px #ffc95f,390px 20px #fff3bd,510px 54px #fff3bd,690px 28px #ffc95f}
.night-canopy i:nth-child(2){left:46px;top:34px;opacity:.55}.night-canopy i:nth-child(3){left:132px;top:10px;opacity:.8}
.moon{position:absolute;right:14%;top:24px;width:64px;height:64px;border-radius:50%;background:#ffdda0;box-shadow:0 0 24px rgba(255,221,160,.35)}
.moon:after{content:"";position:absolute;inset:7px 13px 14px 6px;border-radius:50%;background:#201d3d}
h1{margin:10px 0 12px;font-family:YuMincho,"Yu Mincho",serif;font-size:clamp(2.15rem,8vw,4rem);line-height:1.18;letter-spacing:.03em;color:#352743}
h1 span{color:#b54f43;text-decoration:underline;text-decoration-color:#e8c383;text-decoration-thickness:8px;text-underline-offset:-3px}
.opening-copy{font-size:clamp(1rem,3vw,1.22rem);font-weight:800;line-height:1.8}
.mini-lanterns{display:flex;justify-content:center;align-items:center;gap:7px;margin:22px auto;min-height:52px}
.mini-lanterns b{display:grid;place-items:center;width:42px;height:48px;background:var(--gold);border:2px solid #5a3e38;border-radius:45% 45% 40% 40%;box-shadow:inset 0 -6px rgba(176,85,56,.12),0 6px 0 rgba(80,43,36,.12);font-size:1.25rem}
.mini-lanterns em{width:16px;height:2px;background:#7e6552}
.start-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:0;margin:24px 0;list-style:none}
.start-steps li{min-height:108px;padding:14px 8px;border-top:3px solid #9b7257;border-bottom:1px dashed #9b7257;background:rgba(255,255,255,.3)}
.start-steps strong{display:block;margin:auto auto 8px;width:26px;height:26px;border-radius:50%;color:#fff;background:#a94c46;line-height:26px}
.start-steps span{font-weight:800;font-size:.86rem;line-height:1.5}
.paper-button,.ink-button{min-height:48px;border:2px solid #513949;cursor:pointer;font-weight:900;box-shadow:0 4px 0 rgba(49,28,38,.25);transition:transform .16s,filter .16s}
.paper-button:active,.ink-button:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(49,28,38,.25)}
.paper-button:focus-visible,.ink-button:focus-visible,.kana-tile:focus-visible,.quiz-choice:focus-visible{outline:4px solid #196e8d;outline-offset:3px}
.paper-button.primary{padding:12px 30px;background:#b64f45;color:#fff8dc;clip-path:polygon(4% 0,96% 2%,100% 84%,91% 100%,7% 97%,0 15%);font-size:1.05rem}
.paper-button.subtle,.paper-button.bookmark{background:#fff1c7;color:#513949;padding:9px 18px}
.paper-button.bookmark{background:#72b9a5;color:#152f32}
.paper-button:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.5)}

.play-screen{padding:18px clamp(12px,4vw,30px) 42px;background:#f8e9c7}
.story-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.story-header h2{margin:4px 0 0;font-family:YuMincho,"Yu Mincho",serif;font-size:clamp(1.45rem,5vw,2.1rem)}
.ink-button{min-width:78px;background:#302845;color:#fff5d8;border-color:#161326;box-shadow:none}
.slim-hud{display:flex;justify-content:space-around;gap:6px;margin:0 auto 12px;padding:8px 6px;border-block:2px solid #8c6a53;color:#493745;font-size:.8rem;font-weight:800}
.slim-hud span{white-space:nowrap}.slim-hud b{font-size:1.06rem;color:#a63e3e}
.story-world{--fold:0%;position:relative;min-height:520px;padding:92px 12px 22px;background:#252142;border:3px solid #5d4053;box-shadow:inset 0 0 0 7px #e6c784,0 9px 0 rgba(78,48,55,.22);overflow:hidden;touch-action:pan-y}
.story-world:before,.story-world:after{content:"";position:absolute;z-index:7;top:0;bottom:0;width:var(--fold);max-width:18%;background:linear-gradient(90deg,#ead7a4,#cda66f);transition:width .45s;opacity:.97}
.story-world:before{left:0;clip-path:polygon(0 0,100% 6%,80% 45%,100% 94%,0 100%)}
.story-world:after{right:0;transform:scaleX(-1);clip-path:polygon(0 0,100% 6%,80% 45%,100% 94%,0 100%)}
.torn-sky{position:absolute;inset:0 0 auto;height:155px;background:#19182f;clip-path:polygon(0 0,100% 0,100% 74%,88% 81%,73% 72%,58% 88%,41% 75%,26% 85%,11% 72%,0 82%)}
.scene-moon{position:absolute;width:52px;height:52px;right:11%;top:24px;border-radius:50%;background:#ffd884;box-shadow:0 0 28px rgba(255,216,132,.38)}
.cloud{position:absolute;left:12%;top:46px;width:76px;height:20px;border-radius:30px;background:#726b8c}.cloud:after,.cloud:before{content:"";position:absolute;border-radius:50%;background:inherit}.cloud:before{width:32px;height:32px;left:12px;top:-13px}.cloud:after{width:41px;height:41px;right:8px;top:-20px}.cloud.two{left:43%;top:23px;transform:scale(.65);opacity:.65}
.scene-art{position:absolute;left:5%;right:5%;top:106px;height:94px;pointer-events:none}
.scene-art:before{content:"";position:absolute;left:7%;right:7%;bottom:0;height:34px;background:#425b64;clip-path:polygon(0 80%,11% 46%,21% 67%,34% 20%,44% 58%,56% 12%,66% 67%,78% 35%,91% 73%,100% 48%,100% 100%,0 100%)}
.scene-art:after{content:"";position:absolute;left:18%;top:5px;width:8px;height:47px;border-radius:8px;background:#89b9cb;box-shadow:33px 14px #89b9cb,76px -4px #89b9cb,130px 18px #89b9cb,210px 3px #89b9cb,290px 16px #89b9cb,375px -2px #89b9cb,470px 13px #89b9cb}
.scene-cat .scene-art:after{content:"ねこ";box-shadow:none;width:92px;height:58px;top:7px;left:20%;display:grid;place-items:center;border-radius:55% 50% 35% 35%;background:#d8b18c;color:#3a2c3d;font-weight:900;font-size:1.2rem;transform:rotate(-4deg)}
.scene-flower .scene-art:after{content:"✿  ✿  ✿";box-shadow:none;width:auto;height:auto;left:18%;right:18%;top:18px;background:none;color:#ef8c9b;font-size:2.5rem;letter-spacing:.7em;white-space:nowrap}
.scene-bird .scene-art:after{content:"⌁   ⌁   ⌁";box-shadow:none;width:auto;height:auto;left:17%;top:6px;background:none;color:#f4d889;font-size:3rem;letter-spacing:.7em;transform:rotate(-8deg)}
.scene-sunrise .torn-sky{background:linear-gradient(#29234a,#8d5262,#ee9c68)}
.scene-sunrise .scene-moon{background:#ffd45f;transform:translateY(40px)}
.scene-sunrise .scene-art:after{content:"";box-shadow:none;left:0;right:0;top:44px;width:auto;height:24px;background:repeating-radial-gradient(ellipse at 50% 0,#ffc866 0 3px,transparent 4px 12px);transform:none}
.scene-clue{position:relative;z-index:2;margin:16px auto 8px;max-width:560px;text-align:center;color:#fff3d0;font-weight:900;font-size:1rem;text-shadow:0 2px #1a1629}
.word-pattern{position:relative;z-index:2;display:flex;justify-content:center;gap:11px;min-height:24px;margin:5px auto 9px}
.pattern-group{display:flex;gap:3px;padding:3px 6px;border-bottom:3px solid var(--gold)}
.pattern-dot{width:8px;height:8px;border-radius:50%;background:#fff1bd;box-shadow:0 0 8px var(--gold)}
.kana-board{position:relative;z-index:3;display:grid;gap:7px;width:min(100%,520px);margin:auto;padding:10px;background:#151428;border:2px solid #7e5c65;box-shadow:inset 0 0 24px #070611;touch-action:pan-y}
.kana-tile,.blank-cell{aspect-ratio:1;min-width:0;display:grid;place-items:center}
.kana-tile{position:relative;border:2px solid #5f3b3d;border-radius:45% 45% 38% 38%;background:linear-gradient(90deg,#ffc962,#ffe39a 47%,#f5bd54);color:#3a2739;font-size:clamp(1.25rem,7vw,2.05rem);font-weight:900;box-shadow:inset 0 -8px rgba(161,68,45,.12),0 4px 0 #5b3540,0 0 15px rgba(255,199,85,.22);cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:pan-y;transition:transform .2s,filter .2s,box-shadow .2s}
.kana-tile:before,.kana-tile:after{content:"";position:absolute;left:16%;right:16%;height:3px;background:#553648}.kana-tile:before{top:5px}.kana-tile:after{bottom:5px}
.kana-tile.correct{background:linear-gradient(90deg,#7ad1b2,#b9efd5,#68bc9f);box-shadow:inset 0 -8px rgba(25,93,77,.12),0 4px 0 #345952,0 0 18px rgba(142,216,187,.46)}
.kana-tile.hint{animation:hintPulse .9s ease-in-out 3;outline:4px solid #fff;outline-offset:-7px}
.blank-cell{border:2px dashed #6d6681;background:rgba(255,255,255,.035);color:#bdb3c6;font-size:.7rem}
.blank-cell:after{content:"あき"}
.group-end{margin-right:5px;border-right:5px double #fff0b6}
.fold-warning{position:absolute;z-index:8;left:50%;top:164px;transform:translateX(-50%);padding:5px 13px;background:#a1373a;color:#fff;border:2px solid #fff0c7;font-weight:900;opacity:0;transition:opacity .25s;pointer-events:none}
.danger .fold-warning{opacity:1}.danger .kana-board{box-shadow:inset 0 0 24px #070611,0 0 0 4px rgba(239,140,155,.42)}
.board-message{position:relative;z-index:8;margin:12px auto 0;min-height:46px;max-width:560px;padding:9px 12px;text-align:center;background:#f8e7b9;color:#3f3043;border-left:6px solid #e4a94a;font-weight:800;line-height:1.45}
.success-release{position:absolute;z-index:10;inset:0;display:grid;place-items:center;background:rgba(23,20,45,.65);opacity:0;pointer-events:none}
.success-release span{padding:18px 22px;background:#fff0b8;color:#8e3d42;font-size:clamp(1.35rem,6vw,2.3rem);font-weight:900;clip-path:polygon(5% 0,96% 8%,100% 88%,8% 100%,0 16%);transform:scale(.5)}
.released .success-release{animation:releaseFade 1.4s ease both}.released .success-release span{animation:releasePop .7s cubic-bezier(.2,1.5,.4,1) both}
.play-actions{display:flex;justify-content:center;gap:10px;margin:16px auto 7px;flex-wrap:wrap}.risk-note{margin:6px auto;max-width:620px;line-height:1.6;font-size:.82rem;color:#5d4854}

.quiz-screen,.result-screen{padding:clamp(36px,8vw,72px) clamp(18px,7vw,70px);background:#fff0ce;text-align:center}
.rest-moon{margin:0 auto 24px;width:126px;height:126px;border-radius:50%;display:grid;place-items:center;background:#242044;color:#ffe2a2;box-shadow:14px 8px 0 #e2bf77;font-weight:900}
.quiz-screen h2,.result-screen h2{font-family:YuMincho,"Yu Mincho",serif;font-size:clamp(1.7rem,6vw,2.7rem);margin:8px 0}
.quiz-count{font-weight:900;color:#a64a43}.quiz-question{min-height:64px;margin:18px auto;max-width:620px;font-size:clamp(1.15rem,4vw,1.5rem);font-weight:900;line-height:1.55}
.quiz-choices{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:660px;margin:0 auto 18px}
.quiz-choice{min-height:58px;padding:12px;border:2px solid #553b49;background:#fff9e8;color:#35293b;font-weight:900;cursor:pointer;box-shadow:4px 4px 0 #c7a36f;text-align:left}
.quiz-choice.correct{background:#bfe8cf;border-color:#347b65}.quiz-choice.wrong{background:#f4c3c4;border-color:#9d4247}
.quiz-feedback{margin:15px auto;max-width:660px;padding:15px;background:#2f294b;color:#fff1c4;line-height:1.6;text-align:left;font-weight:700}
.dawn-scroll{height:110px;display:flex;justify-content:center;align-items:center;gap:8px;background:linear-gradient(#5c4162,#ed9368,#f7cc75);clip-path:polygon(0 16%,8% 0,20% 13%,34% 2%,49% 15%,64% 0,80% 14%,92% 3%,100% 18%,100% 88%,86% 100%,68% 88%,51% 100%,35% 87%,17% 100%,0 87%)}
.dawn-scroll b{display:grid;place-items:center;width:46px;height:52px;border-radius:45%;background:#ffe099;border:2px solid #563948;font-size:1.4rem}.dawn-scroll span{position:absolute;width:58px;height:58px;border-radius:50%;background:#ffd45d;z-index:-1}
.final-label{margin:18px 0 0;color:#745049;font-weight:900}.final-score{display:block;font-size:clamp(3rem,13vw,5.2rem);color:#b54a43;font-family:Georgia,serif;line-height:1}
.result-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:560px;margin:24px auto}.result-facts div{padding:12px 4px;border-block:2px solid #98735a}.result-facts dt{font-size:.8rem;font-weight:800}.result-facts dd{margin:6px 0 0;font-size:1.35rem;font-weight:900}
.result-message{max-width:600px;margin:18px auto;line-height:1.7;font-weight:800}.result-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.ranking-panel{max-width:680px;margin:20px auto 0;padding:12px;background:#242044;color:#fff7db;text-align:left;overflow-wrap:anywhere}.ranking-panel .itc-leaderboard{color:#fff7db}.ranking-panel button{color:#221b31;background:#fff1be}.ranking-panel [aria-selected="true"]{background:#f0a660;color:#221b31}

.overlay{position:fixed;z-index:50;inset:0;display:grid;place-items:center;padding:18px;background:rgba(15,12,27,.78);overflow-y:auto}
.overlay-scroll{width:min(100%,570px);padding:28px clamp(18px,6vw,42px);background:#fff1cb;color:#392c3f;border:6px solid #b88a58;box-shadow:0 20px 70px #080611;text-align:center;clip-path:polygon(2% 0,98% 2%,100% 93%,93% 100%,5% 97%,0 8%)}
.overlay-scroll h2{margin:8px 0;font-family:YuMincho,"Yu Mincho",serif;font-size:clamp(1.65rem,6vw,2.5rem)}.overlay-scroll p{line-height:1.7;font-weight:800}
.completed-phrase{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:16px auto}.completed-phrase span{padding:7px 10px;background:#ffd77a;border-bottom:3px solid #7a4b42;font-size:1.15rem;font-weight:900}

@keyframes hintPulse{50%{transform:scale(.9);filter:brightness(1.25)}}
@keyframes releaseFade{0%{opacity:0}18%,72%{opacity:1}100%{opacity:0}}
@keyframes releasePop{to{transform:scale(1)}}
@media(max-width:720px){
  .start-screen{padding-inline:18px}.night-canopy{margin-inline:-18px}.start-steps{grid-template-columns:1fr}.start-steps li{min-height:0;display:flex;align-items:center;text-align:left;gap:12px}.start-steps strong{margin:0;flex:0 0 26px}
  .story-world{min-height:500px;padding-inline:7px}.slim-hud{font-size:.69rem}.kana-board{gap:5px;padding:7px}.kana-tile{font-size:clamp(1.16rem,8vw,1.7rem)}
  .quiz-choices{grid-template-columns:1fr}.quiz-choice{width:100%}.result-facts{grid-template-columns:1fr 1fr}.result-facts div:last-child{grid-column:1/-1}
  .ranking-panel{position:relative;z-index:60;width:100%;max-height:55vh;overflow:auto}
}
@media(max-width:390px){.slim-hud{flex-wrap:wrap}.slim-hud span{width:46%}.story-header{align-items:flex-start}.scene-art:after{transform:scale(.75);transform-origin:left center}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}}