:root{--ink:#29251f;--paper:#f3e4bd;--paper-light:#fff6d9;--red:#9d3028;--gold:#b98222;--indigo:#344d68;--thread:#263e4d;--danger:#b53b2f;--shadow:#6f5a3d}
*{box-sizing:border-box}
html{min-height:100%;background:#2e302a}
body{margin:0;min-width:280px;min-height:100%;overflow-x:hidden;color:var(--ink);font-family:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif;background-color:#34332c;background-image:repeating-linear-gradient(8deg,rgba(255,255,255,.025) 0 2px,transparent 2px 8px)}
button{font:inherit}
button:focus-visible{outline:4px solid #e1a925;outline-offset:3px}
[hidden]{display:none!important}
.book-stage{width:min(100%,980px);min-height:100vh;margin:0 auto;background-color:var(--paper);background-image:linear-gradient(90deg,rgba(119,77,34,.13) 0 1px,transparent 1px),repeating-linear-gradient(0deg,rgba(88,55,25,.035) 0 2px,transparent 2px 7px);box-shadow:0 0 45px #171713}
.screen{position:relative;min-height:100vh;padding:clamp(20px,4vw,44px);overflow:hidden}
.screen:before,.screen:after{content:"";position:absolute;z-index:0;background:var(--red)}
.screen:before{width:26px;height:82px;left:14px;top:0;border-left:4px double var(--paper-light);border-right:4px double var(--paper-light)}
.screen:after{width:68px;height:10px;right:18px;bottom:18px;box-shadow:0 -14px 0 var(--ink)}
.screen>*{position:relative;z-index:1}
.start-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border:14px solid #272c29;border-left-width:22px;border-right-width:22px}
.woodcut-sun{position:absolute;z-index:0;right:-48px;top:-48px;width:230px;height:230px;border:30px solid rgba(157,48,40,.16);border-radius:50%}
.woodcut-sun i{position:absolute;inset:32px;border:8px double rgba(157,48,40,.18);border-radius:50%}
.woodcut-sun i:nth-child(2){inset:66px}.woodcut-sun i:nth-child(3){inset:94px}
.title-scroll{width:min(100%,720px);padding:22px 34px 26px;border-top:5px solid var(--ink);border-bottom:5px solid var(--ink);background:rgba(255,246,217,.62)}
.seal-line{margin:0 0 10px;color:var(--red);font-family:system-ui,sans-serif;font-size:.78rem;font-weight:900;letter-spacing:.22em;text-transform:uppercase}
h1{margin:0;font-size:clamp(2.6rem,8vw,5.7rem);line-height:.95;letter-spacing:.06em;font-weight:900}
h1 em{color:var(--red);font-style:normal;font-size:1.15em}
.lead{max-width:620px;margin:20px auto 0;font-size:clamp(1rem,2.4vw,1.25rem);line-height:1.8}
.start-board{display:grid;grid-template-columns:72px 68px 68px 68px minmax(140px,230px);align-items:center;margin:28px auto 18px;width:min(100%,650px);filter:drop-shadow(4px 6px 0 rgba(56,44,26,.16))}
.start-board .knot{display:grid;place-items:center;width:64px;height:64px;color:var(--paper-light);font-size:2rem;font-weight:900;background:var(--red);border-radius:50%;border:5px double var(--paper-light)}
.start-board i{height:58px;border-top:9px solid var(--thread);border-right:9px solid var(--thread)}
.start-board .a{border-radius:0 30px 0 0}.start-board .b{transform:rotate(180deg)}.start-board .c{border-right:0}
.start-board b{padding:12px;border:3px solid var(--thread);background:var(--paper-light);font-size:.92rem}
.start-rules{display:grid;grid-template-columns:repeat(3,1fr);gap:0;width:min(100%,760px);padding:0;margin:10px 0 24px;list-style:none;border:3px solid var(--ink)}
.start-rules li{display:grid;gap:5px;padding:14px;border-right:1px solid var(--ink);background:rgba(255,255,255,.2)}
.start-rules li:last-child{border-right:0}.start-rules b{color:var(--red);font-size:1.15rem}.start-rules span{font-size:.85rem;line-height:1.5}
.main-button,.sub-button,.sound-button{min-height:48px;border:3px solid var(--ink);cursor:pointer;font-weight:900;box-shadow:4px 4px 0 var(--shadow);transition:transform .12s,box-shadow .12s}
.main-button{padding:13px 24px;color:#fff8db;background:var(--red)}
.sub-button,.sound-button{padding:10px 16px;color:var(--ink);background:var(--paper-light)}
.main-button:hover,.sub-button:hover,.sound-button:hover{transform:translate(-1px,-1px);box-shadow:6px 6px 0 var(--shadow)}
.main-button:active,.sub-button:active,.sound-button:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--shadow)}
.main-button:disabled{cursor:not-allowed;opacity:.5;filter:grayscale(.5)}
.calm-note{margin:16px 0 0;font-family:system-ui,sans-serif;font-size:.82rem;font-weight:700}
.play-screen{padding-top:20px}
.play-header{display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:5px double var(--ink);padding-bottom:10px}
.play-header h2{margin:1px 0 0;font-size:clamp(1.45rem,4vw,2.2rem)}
.stage-count{margin:0;color:var(--red);font-family:system-ui,sans-serif;font-size:.75rem;font-weight:900;letter-spacing:.14em}
.compact-hud{display:flex;justify-content:flex-end;gap:20px;padding:8px 0;font-family:system-ui,sans-serif;font-size:.82rem;font-weight:800}
.compact-hud b{font-size:1.1rem;color:var(--red)}
.sentence-ribbon{position:relative;margin:4px 0 16px;padding:14px 24px 15px 88px;border:3px solid var(--ink);background:var(--paper-light);box-shadow:6px 6px 0 rgba(65,48,28,.18)}
.sentence-ribbon>span{position:absolute;left:12px;top:13px;font-size:.7rem;font-weight:900;writing-mode:vertical-rl;color:var(--red)}
.sentence-ribbon>strong{position:absolute;display:grid;place-items:center;left:38px;top:10px;width:44px;height:44px;color:#fff;background:var(--red);border:3px double #fff;font-size:1.2rem}
.sentence-ribbon p{margin:0;font-size:clamp(1rem,2.4vw,1.3rem);font-weight:800;line-height:1.65}
.sentence-ribbon small{display:block;margin-top:5px;font-family:system-ui,sans-serif;color:#5b4b36}.sentence-ribbon small b{color:#765111}
.weave-world{position:relative;display:grid;grid-template-columns:76px minmax(300px,1fr) minmax(120px,190px);grid-template-rows:repeat(3,92px) auto auto;gap:8px;padding:16px 14px 12px;background:#d6bd82;border:8px solid #58472d;box-shadow:inset 0 0 0 4px #8b6e3f,8px 9px 0 rgba(35,29,20,.23);touch-action:pan-y}
.weave-world:before{content:"";position:absolute;inset:8px;background-image:repeating-linear-gradient(90deg,transparent 0 38px,rgba(54,45,31,.08) 38px 40px);pointer-events:none}
.loom-label{grid-column:1;grid-row:2;align-self:center;display:grid;justify-items:center;gap:4px}.loom-label span{display:grid;place-items:center;width:62px;height:62px;border-radius:50%;background:var(--red);border:5px double var(--paper-light);color:white;font-size:2rem;font-weight:900;box-shadow:4px 4px 0 #62402d}.loom-label small{font-weight:900;font-size:.7rem}
.thread-board{grid-column:2;grid-row:1/4;display:grid;grid-template-columns:repeat(4,minmax(58px,1fr));grid-template-rows:repeat(3,84px);gap:8px;align-self:center;touch-action:pan-y}
.thread-tile{position:relative;overflow:hidden;min-width:0;border:3px solid #3f382b;background:#f7e9c5;box-shadow:3px 3px 0 rgba(58,42,22,.35);cursor:pointer;touch-action:pan-y}
.thread-tile:after{content:attr(data-mark);position:absolute;right:4px;bottom:2px;color:#8c5d1c;font-size:.62rem;font-family:system-ui,sans-serif;font-weight:900}
.thread-tile .hub{position:absolute;z-index:2;left:50%;top:50%;width:17px;height:17px;transform:translate(-50%,-50%);border-radius:50%;background:var(--thread);border:3px solid #e7c97e}
.thread-tile .arm{position:absolute;z-index:1;background:var(--thread);display:none}.thread-tile .north{display:none;left:calc(50% - 5px);top:-2px;width:10px;height:50%}.thread-tile .east{right:-2px;top:calc(50% - 5px);width:50%;height:10px}.thread-tile .south{left:calc(50% - 5px);bottom:-2px;width:10px;height:50%}.thread-tile .west{left:-2px;top:calc(50% - 5px);width:50%;height:10px}
.thread-tile.n .north,.thread-tile.e .east,.thread-tile.s .south,.thread-tile.w .west{display:block}
.thread-tile.connected{background:#fff1b8;border-color:#75500f}.thread-tile.connected .hub,.thread-tile.connected .arm{background:#9b6c13}
.thread-tile.clue{border-style:double;border-width:5px}.thread-tile.clue:before{content:"手がかり";position:absolute;left:3px;top:3px;z-index:3;padding:2px 4px;color:#251b0c;background:#e9be4c;font:700 .55rem system-ui,sans-serif}
.thread-tile.clue.connected:before{content:"金糸！";background:#fff0a8}
.thread-tile:active{transform:rotate(2deg)}
.meaning-gates{grid-column:3;grid-row:1/4;display:grid;grid-template-rows:1fr 1fr;gap:16px;padding:3px 0}
.meaning-gate{position:relative;display:flex;flex-direction:column;justify-content:center;min-width:0;padding:9px;border:4px double var(--ink);background:var(--paper-light);line-height:1.35}.meaning-gate:before{content:"";position:absolute;left:-18px;top:50%;width:15px;border-top:8px solid var(--thread)}.meaning-gate small{font:800 .62rem system-ui,sans-serif;color:var(--red)}.meaning-gate b{font-size:clamp(.78rem,1.7vw,.96rem);overflow-wrap:anywhere}.meaning-gate.connected{outline:5px solid #bd851e;outline-offset:2px}.meaning-gate.wrong{outline:5px dashed var(--danger);outline-offset:2px}
.fold-pressure{grid-column:1/4;grid-row:4;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:12px;padding-top:7px;border-top:2px dashed #7b6039;font-family:system-ui,sans-serif;font-size:.76rem;font-weight:800}.fold-pressure>div:first-child{display:flex;gap:7px}.fold-pressure b{color:var(--red)}
.fold-track{height:13px;border:2px solid var(--ink);background:var(--paper-light)}.fold-track i{display:block;height:100%;width:0;background:var(--red);transition:width .25s}
.path-status{grid-column:1/4;grid-row:5;margin:0;min-height:38px;padding:8px 12px;color:#fff;background:var(--thread);font-family:system-ui,sans-serif;font-size:.84rem;font-weight:800;text-align:center}
.weave-world.danger .paper-edge{position:absolute;z-index:3;top:0;bottom:0;width:19px;background:var(--danger);opacity:.7;animation:edgeWarn 1s steps(2,end) infinite}.weave-world.danger .paper-edge.left{left:0}.weave-world.danger .paper-edge.right{right:0}
.action-row{display:grid;grid-template-columns:minmax(150px,.7fr) minmax(210px,1.3fr);gap:12px;margin:18px 0 10px}.risk-note{margin:0;padding:10px 14px;border-left:8px solid var(--gold);background:rgba(255,246,217,.65);font-family:system-ui,sans-serif;font-size:.8rem;line-height:1.55}.risk-note span{font-weight:900;color:#76500e}
.overlay-panel{position:fixed;z-index:20;inset:50% auto auto 50%;width:min(calc(100% - 28px),560px);max-height:calc(100vh - 28px);overflow:auto;transform:translate(-50%,-50%);padding:27px;text-align:center;background:var(--paper-light);border:9px double var(--ink);box-shadow:0 0 0 9999px rgba(24,22,17,.72),12px 12px 0 var(--red)}
.overlay-panel h3{margin:6px 0;font-size:1.7rem}.overlay-panel p{line-height:1.65}.warning-stamp,.release-label{margin:0!important;color:var(--red);font:900 .76rem system-ui,sans-serif;letter-spacing:.12em}.open-fan{display:grid;place-items:center;margin:0 auto;width:76px;height:76px;color:#fff;background:var(--red);border-radius:50% 50% 8px 8px;font-size:2.2rem;font-weight:900}.clear-panel>strong{display:block;margin:12px 0 6px;color:var(--indigo);font-size:1.25rem}.clear-panel>span{display:block;color:var(--red);font:900 1.2rem system-ui,sans-serif}
.release-burst{position:absolute;z-index:5;left:50%;top:45%;width:14px;height:14px;pointer-events:none}.release-burst.go{animation:burst .65s ease-out}.release-burst.go:before,.release-burst.go:after{content:"文 意 語 開";position:absolute;color:#b97913;font-weight:900;letter-spacing:1.4em;white-space:nowrap}.release-burst.go:before{transform:translate(-50%,-50%) rotate(-18deg)}.release-burst.go:after{transform:translate(-50%,-50%) rotate(20deg)}
.quiz-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.quiet-ink{display:grid;place-items:center;width:90px;height:90px;margin-bottom:15px;color:#fff;background:var(--indigo);border:8px double var(--paper-light);font-size:2.8rem;font-weight:900;transform:rotate(-3deg)}.quiz-screen h2{margin:4px 0;font-size:clamp(1.8rem,5vw,3rem)}.no-timer{margin:3px 0 15px;font:800 .82rem system-ui,sans-serif}.quiz-count{font-weight:900;color:var(--red)}.quiz-question{width:min(100%,720px);min-height:72px;margin:5px 0 15px;padding:14px;border-top:4px solid var(--ink);border-bottom:4px solid var(--ink);font-size:clamp(1.1rem,3vw,1.45rem);font-weight:900;line-height:1.5}.quiz-choices{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:min(100%,720px)}.quiz-choice{min-height:56px;padding:11px;border:3px solid var(--ink);background:var(--paper-light);box-shadow:3px 3px 0 var(--shadow);cursor:pointer;font-weight:800}.quiz-choice.correct{border-color:#25603a;background:#e2f1d6}.quiz-choice.wrong{border-color:#9d3028;background:#f4d0c5}.quiz-feedback{width:min(100%,720px);margin-top:14px;padding:14px;border:4px double var(--ink);background:#fff4ce}.quiz-feedback strong{color:var(--red);font-size:1.2rem}.quiz-feedback p{line-height:1.6}
.result-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.finished-scroll{display:flex;align-items:center;justify-content:center;gap:5px;width:min(90%,560px);padding:16px;border:7px double var(--ink);background:#dfc886;box-shadow:8px 8px 0 #6c4f31}.finished-scroll span{display:grid;place-items:center;width:62px;height:62px;color:#fff;background:var(--red);font-size:1.8rem;font-weight:900;transform:rotate(var(--r,0deg))}.finished-scroll span:nth-child(2){--r:3deg;background:var(--indigo)}.finished-scroll span:nth-child(3){--r:-2deg}.finished-scroll span:nth-child(4){--r:2deg;background:var(--indigo)}.finished-scroll span:nth-child(5){--r:-3deg}.result-screen h2{margin:8px 0;font-size:clamp(1.65rem,5vw,3.1rem)}.final-label{margin:12px 0 0;font:800 .75rem system-ui,sans-serif}.final-score{margin:0;color:var(--red);font:900 clamp(3rem,12vw,6rem) system-ui,sans-serif}.result-facts{display:grid;grid-template-columns:repeat(3,1fr);width:min(100%,620px);margin:10px 0;border:4px double var(--ink)}.result-facts div{padding:10px;border-right:1px solid var(--ink)}.result-facts div:last-child{border:0}.result-facts dt{font:700 .72rem system-ui,sans-serif}.result-facts dd{margin:4px 0 0;font-size:1.25rem;font-weight:900}.result-message{max-width:650px;line-height:1.7}.best-line{font-family:system-ui,sans-serif}.result-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}.ranking-panel{width:min(100%,680px);max-height:55vh;overflow:auto;margin-top:18px;padding:14px;color:#20231e;background:#fff9df;border:5px double var(--ink);text-align:left}.ranking-panel button,.ranking-panel [role="tab"]{color:#20231e!important;background:#ead59f!important}.ranking-panel button[aria-selected="true"],.ranking-panel .active{color:white!important;background:#7f2d28!important}
@keyframes edgeWarn{50%{opacity:.35}}@keyframes burst{0%{opacity:0;transform:scale(.4)}45%{opacity:1}100%{opacity:0;transform:scale(3.4)}}
@media(max-width:700px){.screen{padding:18px 14px 32px}.start-screen{border-left-width:10px;border-right-width:10px}.start-board{grid-template-columns:52px 45px 45px 45px minmax(100px,1fr)}.start-board .knot{width:48px;height:48px}.start-board i{height:45px}.start-rules{grid-template-columns:1fr}.start-rules li{grid-template-columns:60px 1fr;text-align:left;border-right:0;border-bottom:1px solid var(--ink)}.start-rules li:last-child{border:0}.sentence-ribbon{padding-left:75px}.weave-world{grid-template-columns:46px minmax(212px,1fr) 92px;grid-template-rows:repeat(3,72px) auto auto;padding:10px 7px}.loom-label span{width:42px;height:42px;font-size:1.35rem}.loom-label small{font-size:.54rem}.thread-board{grid-template-columns:repeat(4,minmax(45px,1fr));grid-template-rows:repeat(3,66px);gap:5px}.meaning-gate{padding:5px;border-width:3px}.meaning-gate:before{left:-10px;width:8px;border-top-width:6px}.meaning-gate b{font-size:.68rem}.meaning-gate small{font-size:.52rem}.fold-pressure{grid-template-columns:1fr}.fold-pressure>div:first-child{justify-content:center}.path-status{font-size:.73rem}.compact-hud{justify-content:center;gap:12px}.action-row{grid-template-columns:1fr}.quiz-choices{grid-template-columns:1fr}.quiz-choice{width:100%;overflow-wrap:anywhere}.finished-scroll span{width:48px;height:48px}.result-facts{font-size:.85rem}}
@media(max-width:430px){.play-header{align-items:flex-start}.sound-button{min-height:42px;padding:7px;font-size:.72rem}.sentence-ribbon p{font-size:.91rem}.weave-world{grid-template-columns:34px minmax(0,1fr);grid-template-rows:repeat(3,60px) auto auto auto}.thread-board{grid-column:2;grid-row:1/4;grid-template-columns:repeat(4,minmax(38px,1fr));grid-template-rows:repeat(3,60px)}.meaning-gates{grid-column:1/3;grid-row:4;grid-template-columns:1fr 1fr;grid-template-rows:auto;gap:8px}.meaning-gate{min-height:66px}.meaning-gate:before{display:none}.meaning-gate b{font-size:.68rem}.meaning-gate small{display:block}.fold-pressure{grid-column:1/3;grid-row:5}.path-status{grid-column:1/3;grid-row:6}.thread-tile:after{display:none}.thread-tile.clue:before{font-size:.45rem;padding:1px}.compact-hud{font-size:.72rem}.compact-hud b{font-size:.9rem}.result-actions{display:grid;width:100%}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}.weave-world.danger .paper-edge{animation:none;opacity:.65}}