:root{color-scheme:dark;--night:#17152c;--night2:#24203f;--cloth:#2f2850;--silver:#e7e8f2;--thread:#78d6d0;--gold:#f4c66b;--rose:#f0868f;--ink:#171324;--paper:#f8f0d6}
*{box-sizing:border-box}
html{min-width:320px;background:var(--night)}
body{margin:0;min-height:100vh;color:var(--silver);font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",system-ui,sans-serif;background:radial-gradient(circle at 76% 8%,#41345a 0 8%,transparent 28%),linear-gradient(165deg,#151328,#201b38 62%,#10101f);overflow-x:hidden}
button{font:inherit;cursor:pointer}
button:focus-visible{outline:3px solid #fff;outline-offset:3px}
.is-hidden{display:none!important}
.page-shell{width:min(1100px,100%);margin:auto;min-height:100vh;border-inline:1px solid #ffffff14;background:#15132888}
.masthead{min-height:78px;display:flex;align-items:center;gap:14px;padding:14px clamp(16px,4vw,34px);border-bottom:1px solid #eee2;position:relative;z-index:3}
.masthead h1{font-family:Georgia,"Yu Mincho",serif;font-weight:600;font-size:clamp(20px,4vw,30px);letter-spacing:.08em;margin:1px 0}
.eyebrow,.chapter{margin:0;color:var(--gold);font-size:12px;letter-spacing:.18em;font-weight:800}
.brand-mark{width:46px;height:46px;border:2px solid var(--thread);border-radius:50%;position:relative;flex:none}
.brand-mark span,.brand-mark i{position:absolute;inset:7px 20px;border-radius:50%;background:var(--gold);transform:rotate(30deg)}
.brand-mark i{transform:rotate(-30deg);background:var(--thread)}
.sound-button{margin-left:auto;border:1px solid #b9b7d055;background:#17142a;color:#f7f4ff;border-radius:4px;padding:9px 12px;min-height:44px}
.screen{min-height:calc(100vh - 79px)}
.start-screen{display:grid;grid-template-columns:minmax(310px,1.1fr) minmax(300px,.9fr)}
.moon-cloth{min-height:620px;position:relative;overflow:hidden;background:linear-gradient(110deg,#1e1b37,#2d2750);clip-path:polygon(0 0,100% 0,88% 100%,0 100%)}
.moon{position:absolute;width:260px;height:260px;border-radius:50%;left:14%;top:12%;background:#f5e8b9;box-shadow:0 0 70px #f7d57e66}
.moon:after{content:"";position:absolute;width:220px;height:220px;border-radius:50%;left:54px;top:-18px;background:#272241}
.thread{position:absolute;height:8px;width:90%;border-radius:50%;border-top:3px solid var(--thread);transform:rotate(-13deg);left:-5%;top:52%}
.thread-b{top:62%;border-color:var(--gold);transform:rotate(9deg)}
.start-windows{position:absolute;left:9%;right:12%;top:40%;display:flex;gap:8px;transform:rotate(-3deg)}
.start-windows span,.finished-cloth span{width:18%;aspect-ratio:.78;display:grid;place-items:center;background:#efe7d0;color:#282039;border:5px double #44375f;box-shadow:7px 12px 0 #11101f;font:700 clamp(34px,7vw,74px)/1 Georgia,serif}
.opening-copy{padding:clamp(34px,8vw,90px) clamp(22px,5vw,58px);align-self:center}
.opening-copy h2{font:600 clamp(34px,5vw,58px)/1.25 Georgia,"Yu Mincho",serif;margin:14px 0 24px;color:#fff}
.opening-copy>p:not(.chapter,.quiet-note){line-height:1.9;color:#d3d1e1}
.micro-guide{display:flex;flex-direction:column;gap:8px;margin:26px 0}.micro-guide span{display:flex;align-items:center;gap:10px}.micro-guide b{display:grid;place-items:center;width:25px;height:25px;border:1px solid var(--thread);border-radius:50%;color:var(--thread)}
.primary-button,.secondary-button{border:0;min-height:50px;padding:13px 20px;font-weight:800;letter-spacing:.04em}
.primary-button{background:var(--gold);color:#20182e;box-shadow:5px 5px 0 #92713a}.primary-button:hover{transform:translate(-1px,-1px);box-shadow:7px 7px 0 #92713a}
.secondary-button{border:2px solid var(--thread);background:transparent;color:#fff}
.quiet-note{font-size:13px;color:#aaa7bd;margin-top:18px}
.game-screen{position:relative;padding-bottom:40px}.hud-ribbon{display:flex;justify-content:center;gap:clamp(12px,5vw,54px);padding:10px 16px;background:#0d0c19;border-bottom:1px solid #ffffff1a;position:sticky;top:0;z-index:5}.hud-ribbon span{font-size:13px;color:#bdb9cb}.hud-ribbon b{color:#fff;font-size:17px}
.loom-world{position:relative;min-height:690px;overflow:hidden;padding:36px clamp(14px,4vw,44px) 42px;touch-action:pan-y;background:linear-gradient(#24203f99,#121123cc)}
.night-sky{position:absolute;inset:0;pointer-events:none}.night-sky i{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:0 0 8px #fff}.night-sky i:nth-child(1){left:8%;top:12%}.night-sky i:nth-child(2){left:21%;top:31%}.night-sky i:nth-child(3){right:10%;top:20%}.night-sky i:nth-child(4){right:28%;top:36%}.night-sky i:nth-child(5){left:48%;top:8%}.night-sky i:nth-child(6){right:6%;top:58%}
.pattern-card{width:min(560px,94%);margin:0 auto 20px;padding:12px 22px 15px;text-align:center;color:var(--ink);background:var(--paper);clip-path:polygon(2% 0,98% 2%,100% 88%,95% 100%,3% 96%,0 10%);box-shadow:0 12px 0 #0b0a15}.pattern-card p{margin:0;color:#6c5368;font-weight:700;font-size:13px}.pattern-card>div:last-child{color:#765d6b;font-size:13px}.model-word{font:700 clamp(36px,8vw,66px)/1.1 Georgia,serif;letter-spacing:.12em;color:#29203f;margin:5px 0}
.danger-banner{display:none;width:min(720px,100%);margin:10px auto 16px;padding:10px 15px;border:2px dashed var(--rose);background:#3b1c35;color:#fff}.danger-banner.is-visible{display:flex;gap:12px;align-items:center}.danger-banner span{font-size:13px}.danger-banner strong{color:#ffd0d4;white-space:nowrap}
.loom-frame{width:min(860px,100%);margin:auto;position:relative;padding:38px clamp(12px,4vw,38px);background:#19162c;border-inline:18px solid #44334b;box-shadow:0 12px 32px #080710aa,inset 0 0 55px #0008}.beam{position:absolute;left:-25px;right:-25px;height:30px;background:repeating-linear-gradient(90deg,#6c4b43 0 18px,#513530 18px 35px);border:4px solid #2b1b20;box-shadow:0 5px 0 #100c12}.beam-top{top:0}.beam-bottom{bottom:0}.reel-row{display:flex;justify-content:center;gap:clamp(6px,1.7vw,18px);min-height:238px;align-items:center}
.reel{width:min(142px,18vw);min-width:54px;display:grid;grid-template-rows:44px 116px 44px;gap:5px;position:relative;touch-action:pan-y;user-select:none}.reel button{border:1px solid #8c829d;background:#2e2945;color:#e7e5ef;font-weight:900;min-height:44px}.reel button:hover{background:#453d61}.letter-window{display:grid;place-items:center;position:relative;background:linear-gradient(90deg,#b4aa93,#fff5da 25%,#fbefd1 75%,#a89b83);color:#211b2d;border:7px double #5f506d;box-shadow:inset 0 12px 15px #392f4b33,inset 0 -12px 15px #392f4b33,0 0 0 3px #100d19;font:700 clamp(33px,7vw,70px)/1 Georgia,serif}.letter-window:before,.letter-window:after{content:"";position:absolute;left:12%;right:12%;height:3px;background:var(--thread);opacity:.7}.letter-window:before{top:9px}.letter-window:after{bottom:9px}.reel.is-match .letter-window{box-shadow:inset 0 0 18px #78d6d088,0 0 0 3px var(--thread),0 0 22px #78d6d066}.reel.is-match:after{content:"✓";position:absolute;right:4px;top:51px;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:#14645f;color:#fff;font-weight:900}
.woven-tail{height:34px;position:absolute;left:8%;right:8%;bottom:-31px;display:flex;justify-content:space-around;overflow:hidden}.woven-tail span{width:14%;height:50px;border-inline:5px solid #746e83;background:repeating-linear-gradient(90deg,var(--thread) 0 5px,#493d63 5px 10px,var(--gold) 10px 13px);transform:skewX(-7deg)}
.thread-meter{width:min(720px,92%);height:12px;border:2px solid #8d859c;margin:54px auto 12px;background:#100e1d}.thread-fill{height:100%;width:100%;background:repeating-linear-gradient(90deg,var(--thread) 0 9px,#b1f0e9 9px 12px);transition:width .3s}.loom-world.is-danger .thread-fill{background:repeating-linear-gradient(90deg,var(--rose) 0 9px,#ffd0d4 9px 12px)}.loom-world.is-success .loom-frame{box-shadow:0 0 45px #78d6d080,inset 0 0 45px #f4c66b33}.loom-world.is-success .woven-tail span{animation:weaveRelease .7s ease both}
.coupling-text,.feedback-text,.knot-readout{text-align:center;max-width:760px;margin:10px auto}.coupling-text{color:var(--gold);font-size:13px}.feedback-text{min-height:48px;padding:10px;color:#f7f5fc}.loom-controls{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.loom-controls button{min-height:48px;border:2px solid #817990;background:#211d38;color:#fff;padding:8px 15px}.loom-controls button[aria-pressed="true"]{border-color:var(--gold);background:#4a3b31}.loom-controls small{display:block;font-size:11px;color:#c8c4d5}.loom-controls button:disabled{opacity:.45;cursor:not-allowed}.knot-readout{font-size:12px;color:#aaa6bb}
.stage-dialog{width:min(590px,calc(100% - 26px));border:4px double #625471;background:#f7efd7;color:#231b30;padding:24px;box-shadow:0 18px 60px #000b}.stage-dialog::backdrop{background:#0b0918d9}.stage-dialog h2{font:600 30px Georgia,"Yu Mincho",serif}.stage-dialog p{line-height:1.7}.stitched-word{font:700 48px Georgia,serif;letter-spacing:.1em;text-align:center;border-block:3px dashed #735b79;padding:12px;margin:16px 0;color:#352845}
.quiz-screen{padding:clamp(28px,7vw,70px) clamp(16px,5vw,52px);background:#ece4c9;color:#251d31}.quiz-screen .chapter{color:#715269}.quiz-progress{font-weight:900}.quiz-screen h2{font:600 clamp(24px,5vw,39px)/1.5 Georgia,"Yu Mincho",serif;max-width:780px}.quiz-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:850px}.quiz-choices button{min-height:66px;text-align:left;border:3px solid #463b51;background:#fffaf0;color:#241c2c;padding:12px;font-weight:700;overflow-wrap:anywhere}.quiz-choices button.correct{border-color:#14645f;background:#d6f0e9}.quiz-choices button.wrong{border-color:#a8394b;background:#f8d9de;text-decoration:line-through}.quiz-explanation{max-width:780px;min-height:74px;line-height:1.8;border-left:6px solid #6d5575;padding:10px 15px;background:#ffffff80}
.result-screen{text-align:center;padding:45px clamp(16px,5vw,50px);background:radial-gradient(circle at 50% 18%,#62546c,#1b1830 50%)}.finished-cloth{display:flex;width:min(530px,100%);margin:0 auto 35px;gap:5px}.finished-cloth span{box-shadow:4px 8px 0 #0d0b17;font-size:clamp(30px,7vw,60px)}.result-screen h2{font:600 clamp(31px,5vw,50px) Georgia,"Yu Mincho",serif;margin:10px}.result-screen>p{max-width:690px;margin:14px auto;line-height:1.8}.final-score{margin:28px auto;width:210px;height:150px;display:grid;place-items:center;border:4px double var(--gold);background:#11101f}.final-score span{font-size:13px;color:var(--gold)}.final-score strong{font-size:45px}.result-screen .primary-button,.result-screen .secondary-button{margin:8px}.leaderboard-panel{width:min(720px,100%);max-height:70vh;overflow:auto;margin:18px auto;background:#f7efd7;color:#211a2b;text-align:left;padding:14px;border:3px solid var(--gold)}.leaderboard-panel .itc-leaderboard{color:#211a2b}.leaderboard-panel button{color:#211a2b}.leaderboard-panel [aria-selected="true"],.leaderboard-panel .active{background:#352845!important;color:#fff!important}
@keyframes weaveRelease{0%{transform:translateY(-8px) skewX(-7deg)}70%{transform:translateY(7px) skewX(3deg)}100%{transform:translateY(0) skewX(-7deg)}}
@media(max-width:720px){.start-screen{display:block}.moon-cloth{min-height:355px;clip-path:polygon(0 0,100% 0,100% 91%,0 100%)}.moon{width:170px;height:170px}.moon:after{width:145px;height:145px}.opening-copy{padding-top:28px}.masthead .eyebrow{display:none}.loom-world{min-height:670px;padding-inline:10px}.loom-frame{border-inline-width:8px;padding-inline:8px}.reel-row{gap:4px}.reel{width:19%;grid-template-rows:44px 95px 44px}.letter-window{border-width:4px}.hud-ribbon{justify-content:space-between;gap:5px}.hud-ribbon span{font-size:11px}.hud-ribbon b{font-size:14px}.danger-banner.is-visible{display:block}.danger-banner strong{display:block}.quiz-choices{grid-template-columns:1fr}.quiz-choices button{width:100%}.stage-dialog{padding:18px}.model-word{letter-spacing:.06em}}
@media(max-width:390px){.masthead{padding-inline:10px}.masthead h1{font-size:18px}.brand-mark{width:38px;height:38px}.sound-button{font-size:12px;padding-inline:7px}.reel{grid-template-rows:42px 84px 42px}.letter-window{font-size:32px}.loom-controls{display:grid}.loom-controls button{width:100%}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}}