@font-face{font-family:"Kanji Card JP";src:url('./fonts/kanji-card-jp.woff2?v=20261008-1') format('woff2');font-style:normal;font-weight:700;font-display:block}
:root{--ink:#432c19;--green:#32653a;--cream:#fff8e6;--card:url('./images/03-card-blank.webp');--complete:url('./images/04-card-complete-blank.webp');--gap:14px}
*{box-sizing:border-box}body[data-dm-site-theme="game"]{margin:0;color:var(--ink);background:#d6a268 url('./images/01-background.webp') center/cover fixed;font-family:"Hiragino Maru Gothic ProN","Yu Gothic",Meiryo,sans-serif;font-weight:700}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}button:disabled{cursor:wait}button:focus-visible,a:focus-visible{outline:3px solid #114da0;outline-offset:4px}button:active:not(:disabled){filter:brightness(.96)}[hidden]{display:none!important}.letter{font-family:"Kanji Card JP",sans-serif;font-weight:700;font-style:normal}h1,h2,p{margin:0}.kanji-app{max-width:1400px;margin:auto;min-height:calc(100svh - var(--dm-common-header-height,58px));padding:10px 24px 12px}.title-screen{min-height:calc(100svh - var(--dm-common-header-height,58px) - 24px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center}.title-logo{display:block;width:min(650px,79vw);height:auto}.tagline{padding:12px 26px;background:#ffefcfeb;border-radius:40px;box-shadow:0 3px 5px #7444153b;font-size:clamp(15px,2.4vw,25px)}.title-example{display:flex;align-items:center;gap:clamp(6px,1.8vw,24px);margin:9px 0}.paper-card{display:inline-flex;align-items:center;justify-content:center;background:var(--card) center/100% 100% no-repeat;aspect-ratio:1;color:#302318;font-weight:700;padding-bottom:4%;line-height:1}.title-example .paper-card{width:clamp(62px,17vw,170px);font-size:clamp(42px,10.6vw,110px)}.paper-card.complete{background-image:var(--complete)}.title-example .complete{width:clamp(74px,19vw,184px);font-size:clamp(50px,12vw,122px)}.example-arrow{width:clamp(26px,6vw,70px);height:auto}.title-actions{display:flex;flex-direction:column;align-items:center;gap:7px}.wood-button{border:0;background:transparent center/100% 100% no-repeat;padding:0 20px 4px;min-height:44px;line-height:1.25;display:inline-flex;justify-content:center;align-items:center;white-space:nowrap;transition:filter .12s}.wood-button.green{background-image:url('./images/05-button-green-blank.webp');color:#fffbea;text-shadow:0 1px 2px #234026}.wood-button.cream{background-image:url('./images/06-button-cream-blank.webp')}.title-actions .green{width:clamp(250px,34vw,390px);aspect-ratio:3.56;font-size:clamp(25px,3.2vw,36px)}.title-actions .cream{width:clamp(200px,27vw,290px);aspect-ratio:3.38;font-size:clamp(19px,2.2vw,26px)}.title-bottom{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;font-size:14px}.utility{border:1px solid #ae8246;border-radius:16px;min-height:42px;padding:7px 15px;background:#fff8e8f2;box-shadow:0 2px 2px #63320e24;font-size:14px}.sound{width:100px;flex-shrink:0;font-variant-numeric:tabular-nums}.sound[aria-pressed=true]{border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green),0 2px 2px #63320e24}.notice:not(:empty){background:#fff9eaf5;border-radius:12px;margin:8px auto;padding:10px;max-width:650px;font-size:14px}.notice:empty{display:none}.credits-link{font-size:12px;color:#48301b;text-underline-offset:3px;margin-top:2px}.play-screen{--tile:min(140px,calc((100vw - 126px)/6),calc((100svh - var(--dm-common-header-height,58px) - 298px)/2));display:flex;align-items:center;flex-direction:column;gap:10px;min-height:calc(100svh - var(--dm-common-header-height,58px) - 22px)}.play-header{width:100%;display:grid;grid-template-columns:minmax(90px,.75fr) minmax(280px,1.4fr) minmax(110px,.6fr);align-items:center;gap:16px}.mini-logo{width:100%;max-width:245px}.question-panel{background:url('./images/07-panel-wide-blank.webp') center/100% 100% no-repeat;min-height:90px;padding:8px 16px 14px;display:flex;align-items:center;justify-content:center;white-space:nowrap;font-size:clamp(20px,2.2vw,33px)}.question-panel .letter{font-size:1.7em;color:var(--green);line-height:1.1}.progress-panel{background:url('./images/08-panel-small-blank.webp') center/100% 100% no-repeat;min-height:64px;display:flex;align-items:center;justify-content:center;gap:6px;font-size:clamp(16px,1.8vw,25px);padding:0 15px 6px}.progress-panel strong{font-size:1.65em;color:var(--green)}.merge-space{height:clamp(82px,16vh,138px);width:100%;position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0}.guide{font-size:16px;min-height:28px;padding:6px 18px;border-radius:22px;background:#fff5ddbd;text-align:center}.board{display:grid;grid-template-columns:repeat(6,var(--tile));gap:var(--gap);justify-content:center}.part-card{position:relative;width:var(--tile);aspect-ratio:1;border:0;background:var(--card) center/100% 100% no-repeat;padding:0 0 4%;font-size:calc(var(--tile)*.59);line-height:1;isolation:isolate}.part-card:before{content:"";position:absolute;inset:4% 4% 7%;border:3px solid transparent;border-radius:12%;pointer-events:none}.part-card[aria-pressed=true]{transform:translateY(-4px)}.part-card[aria-pressed=true]:before{border-color:var(--green);box-shadow:0 0 0 3px #fffbe9}.part-card[aria-pressed=true]:after{content:"✓";position:absolute;top:5%;right:6%;font:700 15px/1 sans-serif;background:var(--green);color:white;border-radius:50%;padding:2px}.part-card[data-transferred=true]{background:none;transform:none}.part-card[data-transferred=true] .glyph{visibility:hidden}.part-card[data-transferred=true]:before{border:2px dashed #895b37a3;box-shadow:none}.part-card[data-transferred=true]:after{display:none}.part-card.wrong{animation:gentle-shake .18s ease-in-out}.collection-row{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:2px}.collection-label{font-size:17px;background:#fff3d7e6;border-radius:16px;padding:10px 15px}.mobile-break{display:none}.collection{display:flex;list-style:none;gap:8px;margin:0;padding:0}.collection li{width:58px;height:58px;border:2px dashed #80563480;border-radius:10px;display:flex;align-items:center;justify-content:center}.collection li.filled{border:0}.collection .paper-card{width:100%;height:100%;font-size:34px}.play-controls{display:flex;align-items:center;justify-content:center;gap:16px;min-height:44px;margin-top:auto}.hint-button{width:146px;height:46px;font-size:19px}.hint-panel{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:14px;border-radius:16px;background:#fff9e8f5;box-shadow:0 2px 7px #6d3d1533}.hint-panel .mini-assembly{font-size:28px;width:70px;height:65px}.hint-panel .hint-answer{font-size:54px}.hint-text{font-size:14px;line-height:1.7}.hint-panel button{position:absolute;right:5px;top:3px;border:0;background:transparent;min-width:36px;min-height:36px;font-size:24px}.mini-assembly{display:grid;place-items:center;flex-shrink:0;font-family:"Kanji Card JP",sans-serif;font-weight:700;line-height:1}.mini-assembly span{white-space:nowrap}.mini-assembly span:first-child{color:#275e32}.mini-assembly span:last-child{color:#975011}.mini-assembly.vertical{grid-template-rows:repeat(2,minmax(0,1fr))}.mini-assembly.horizontal{grid-template-columns:repeat(2,minmax(0,1fr))}.word-flash{position:absolute;left:calc(50% + 82px);top:8px;text-align:center;white-space:nowrap}.word-flash img{display:block;width:116px;margin:auto}.word-flash .word-reading{font-size:20px;background:#fff6dfdd;border-radius:12px;padding:4px 12px;color:var(--ink)}ruby rt{font-size:.54em;letter-spacing:.04em}.animation-layer{position:fixed;inset:0;z-index:20;pointer-events:none;overflow:hidden}.flying-card,.merged-card{position:absolute;display:flex;align-items:center;justify-content:center;transform-origin:center;line-height:1}.flying-card:before,.merged-card:before{content:"";position:absolute;inset:0;background:var(--card) center/100% 100% no-repeat;z-index:-1}.merged-card:before{background-image:var(--complete)}.flying-card .letter,.merged-card .letter{padding-bottom:5%}.flying-card.tight:before{opacity:0;transition:opacity .16s}.result-screen{min-height:calc(100svh - var(--dm-common-header-height,58px) - 24px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;text-align:center}.result-logo{width:min(370px,70vw)}.result-screen h2{font-size:clamp(26px,4vw,44px);color:var(--green);padding:12px 30px;border-radius:30px;background:#fff7e6ed}.result-screen p{background:#fff7e6ba;padding:6px 12px;border-radius:15px}.result-cards{display:grid;grid-template-columns:repeat(5, minmax(0,140px));gap:12px;margin:10px 0}.result-cards button{width:100%;border:0;font-size:clamp(48px,7vw,85px);transition:transform .15s}.result-cards button:hover{transform:translateY(-4px)}.result-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.result-actions .wood-button{width:225px;min-height:67px;font-size:23px}dialog{color:var(--ink);border:3px solid #c09458;border-radius:24px;background:#fff9e9;max-width:min(94vw,590px);max-height:90svh;padding:25px;text-align:center;box-shadow:0 10px 60px #39220e69;font-weight:700}dialog::backdrop{background:#30261773}dialog h2{color:var(--green);font-size:26px;margin-bottom:14px}dialog p{line-height:1.8;margin:12px 0;font-size:15px}dialog .wood-button{width:190px;min-height:58px;font-size:20px}dialog form{margin-top:14px}.help-steps{list-style:none;margin:0;padding:0;display:flex;gap:12px}.help-steps li{flex:1;display:flex;align-items:center;flex-direction:column;gap:12px;font-size:14px}.help-steps li strong{font-size:15px}.help-parts{font-size:23px;white-space:nowrap}.help-complete{width:64px;font-size:40px}.dialog-actions{display:flex;justify-content:center;gap:10px}.review-assembly{display:flex;align-items:center;justify-content:center;gap:20px}.review-assembly .mini-assembly{--assembly-size:110px;width:var(--assembly-size);height:var(--assembly-size);padding:calc(var(--assembly-size)*.12);font-size:calc(var(--assembly-size)*.36);background:var(--card) center/100% 100% no-repeat}.review-assembly .complete{width:140px;font-size:90px}.review-word{font-size:36px;margin:24px auto 14px}.review-layout{font-size:16px}.dm-completion-status{background:#fff9e8;border-radius:12px;padding:12px;margin:8px auto;max-width:650px}.dm-completion-status button{min-height:44px}@keyframes gentle-shake{25%{translate:-3px}75%{translate:3px}}
@media(min-width:1100px) and (min-height:850px){.title-screen{gap:17px}.title-example .paper-card{width:185px;font-size:122px}.title-example .complete{width:202px;font-size:133px}.play-screen{gap:16px;justify-content:center}.play-controls{margin-top:2px}}
@media(max-width:680px){.kanji-app{padding:7px 10px 9px}.title-screen{gap:12px}.title-logo{width:92vw;max-width:530px}.tagline{font-size:clamp(13px,3.6vw,20px);padding:10px 14px}.title-example{margin:12px 0}.title-actions .green{width:270px;min-height:77px;font-size:28px}.title-actions .cream{width:220px;min-height:65px;font-size:23px}.title-bottom{gap:8px;font-size:12px}.play-screen{--gap:7px;--tile:clamp(48px,min(calc((100vw - 54px)/3),calc((100svh - var(--dm-common-header-height,50px) - 258px)/4)),98px);gap:7px;min-height:calc(100svh - var(--dm-common-header-height,50px) - 16px)}.play-header{grid-template-columns:1fr auto;gap:5px}.mini-logo{display:none}.question-panel{min-height:53px;font-size:clamp(17px,4.4vw,25px);padding:4px 7px 9px}.progress-panel{min-height:43px;font-size:14px;padding:2px 10px 5px;gap:1px}.merge-space{height:57px}.guide{font-size:13px;padding:5px 10px}.board{grid-template-columns:repeat(3,var(--tile))}.part-card[aria-pressed=true]{transform:translateY(-2px)}.part-card[aria-pressed=true]:before{border-width:2px;box-shadow:0 0 0 2px #fffbe9}.part-card[aria-pressed=true]:after{font-size:12px}.collection-row{gap:9px}.collection-label{font-size:12px;padding:7px 8px;line-height:1.4}.collection{gap:5px}.collection li{width:39px;height:40px;border-radius:7px}.collection .paper-card{font-size:26px}.mobile-break{display:block}.play-controls{gap:8px;min-height:42px;width:100%}.play-controls .utility{font-size:12px;padding:6px 9px;min-height:38px}.play-controls .sound{width:80px}.hint-button{width:116px;height:40px;font-size:17px}.hint-panel{gap:8px}.hint-panel .mini-assembly{width:44px;height:48px;font-size:20px}.hint-panel .hint-answer{font-size:34px}.hint-text{font-size:11px;margin-right:20px}.hint-panel button{min-height:32px;min-width:30px;font-size:20px}.word-flash{left:calc(50% + 47px);top:0}.word-flash img{width:67px}.word-flash .word-reading{font-size:14px;padding:2px 7px}.result-cards{grid-template-columns:repeat(3,minmax(0,105px));gap:8px;max-width:100%;margin:3px 0}.result-cards button{font-size:60px}.result-cards button:nth-child(4){grid-column:1}.result-actions .wood-button{width:180px;min-height:53px;font-size:20px}.result-screen{gap:11px}.result-screen p{font-size:13px}.result-logo{width:265px}dialog{padding:18px 12px}dialog h2{font-size:23px}.help-steps{flex-direction:column;gap:12px}.help-steps li{flex-direction:row;justify-content:space-between;gap:10px;text-align:left}.help-steps li strong{max-width:180px}.dialog-actions{flex-wrap:wrap}.review-assembly{gap:13px}.review-assembly .mini-assembly{--assembly-size:85px}.review-assembly .complete{width:110px;font-size:73px}.review-word{font-size:30px}}
@media(max-height:650px) and (min-width:681px){.title-logo{width:390px}.title-screen{gap:5px}.title-example{margin:3px 0}.title-example .paper-card{width:104px;font-size:70px}.title-example .complete{width:117px;font-size:80px}.title-actions .green{width:255px;font-size:27px}.title-actions .cream{width:210px;font-size:20px}.tagline{font-size:17px;padding:6px 20px}.play-screen{--tile:clamp(48px,min(calc((100vw - 120px)/6),calc((100svh - var(--dm-common-header-height,58px) - 241px)/2)),100px);gap:6px}.question-panel{min-height:65px;font-size:21px}.mini-logo{max-width:170px}.merge-space{height:66px}.collection li{width:42px;height:42px}.collection .paper-card{font-size:28px}.collection-label{font-size:14px;padding:8px}.play-controls{margin-top:0}.word-flash img{width:70px}.word-flash .word-reading{font-size:14px}.progress-panel{min-height:52px}.title-bottom{font-size:12px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.part-card[aria-pressed=true]{transform:none}.result-cards button:hover{transform:none}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(max-width:680px) and (max-height:700px){.result-screen{gap:6px}.result-logo{width:150px}.result-screen h2{font-size:26px;line-height:1.3;padding:6px 18px}.result-screen p{font-size:12px;line-height:1.5;padding:3px 8px}.result-cards{grid-template-columns:repeat(3,72px);gap:8px;margin:3px 0}.result-cards button{font-size:48px}.result-actions{flex-wrap:nowrap;gap:8px}.result-actions .wood-button{width:134px;min-height:44px;font-size:17px;padding:0 10px 4px}}
.utility{white-space:nowrap;min-height:44px}
@media(min-width:681px) and (min-height:651px){.play-screen{--tile:min(140px,calc((100vw - 126px)/6),calc((100svh - var(--dm-common-header-height,58px) - 398px)/2))}}
@media(max-height:850px){.title-screen{gap:7px}.title-logo{width:min(560px,88vw,calc((100svh - var(--dm-common-header-height,58px))*.7))}.title-example{margin:3px 0}.title-example .paper-card{width:clamp(58px,calc((100svh - var(--dm-common-header-height,58px))*.16),140px);font-size:clamp(39px,calc((100svh - var(--dm-common-header-height,58px))*.106),92px)}.title-example .complete{width:clamp(65px,calc((100svh - var(--dm-common-header-height,58px))*.18),154px);font-size:clamp(44px,calc((100svh - var(--dm-common-header-height,58px))*.12),102px)}.tagline{font-size:clamp(13px,2vw,20px);padding:8px 16px}.title-actions .green{width:clamp(230px,calc((100svh - var(--dm-common-header-height,58px))*.46),350px);min-height:65px;font-size:28px}.title-actions .cream{width:clamp(190px,calc((100svh - var(--dm-common-header-height,58px))*.36),265px);min-height:54px;font-size:22px}}
@media(max-width:680px){.play-screen{--tile:clamp(48px,min(calc((100vw - 54px)/3),calc((100svh - var(--dm-common-header-height,50px) - 276px)/4)),98px)}.play-controls .utility{min-height:44px;padding:6px 8px;flex-shrink:0}.play-controls .hint-button{width:105px;min-width:90px;min-height:44px;padding:0 12px 4px}.collection-label{padding:5px 8px}.hint-panel button{min-width:44px;min-height:44px;top:0}.hint-text{margin-right:35px}.title-bottom{max-width:100%}}
@media(max-height:480px) and (min-width:681px){.play-screen{--gap:7px;--tile:clamp(48px,calc((100svh - var(--dm-common-header-height,58px) - 220px)/2),82px);gap:4px}.question-panel{min-height:44px;font-size:17px;padding:2px 10px 7px}.mini-logo{max-width:130px}.progress-panel{min-height:38px;font-size:15px}.merge-space{height:40px}.guide{font-size:12px;padding:3px 12px}.collection li{width:32px;height:32px}.collection .paper-card{font-size:22px}.collection-label{font-size:12px;padding:4px 10px}.word-flash{top:-3px;left:calc(50% + 45px)}.word-flash img{display:none}.word-flash .word-reading{font-size:12px}}
.title-example{--demo:min(180px,calc((100vw - 120px)/3),calc((100svh - var(--dm-common-header-height,58px))*.16))}
.title-example .paper-card{width:var(--demo);font-size:calc(var(--demo)*.66);flex:none}
.title-example .complete{width:calc(var(--demo)*1.1);font-size:calc(var(--demo)*.73)}

.word-reading{white-space:nowrap}.word-reading ruby{ruby-align:center}