:root{--paper:#f2e9d7;--ink:#171714;--red:#b92d25;--grey:#a39a8b;--white:#fffdf5;--line:#c9bfac;--serif:'Yu Mincho','Hiragino Mincho ProN','Noto Serif JP',serif;--ui:'Hiragino Kaku Gothic ProN','Noto Sans JP',sans-serif;color-scheme:light}
/* タイトルはロゴから選択と抜刀へ。補助設定はひとつの入口にまとめる。 */
#app[data-phase=title] .masthead{display:none}
.title-menu .mode-picker{margin-top:0}
.title-menu .settings-link{margin-top:12px}
.settings-options{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;padding-block:8px;border-bottom:1px solid var(--line)}
.settings-options .hint-switch{margin:0;min-height:44px}
.settings-options #motionBtn{min-height:44px;padding:8px 12px;border:1px solid var(--line);font-size:12px;white-space:nowrap}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--ui);font-size:14px}body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:20;opacity:.11;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%2378684c' filter='url(%23n)' opacity='.5' d='M0 0h160v160H0z'/%3E%3C/svg%3E")}
button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;border:0;border-radius:0;background:none;touch-action:manipulation}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--red);outline-offset:5px}button:disabled{cursor:default}a{color:inherit}button:hover{filter:brightness(.94)}button:active{transform:translateY(1px)}[hidden]{display:none!important}fieldset{min-width:0;margin:0;padding:0;border:0}h1,h2,h3,p{margin:0}h2,h3{font-family:var(--serif)}
#app{max-width:1440px;min-height:100dvh;margin:auto;display:flex;flex-direction:column;padding:env(safe-area-inset-top,0px) max(24px,env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px) max(24px,env(safe-area-inset-left,0px))}main{flex:1;display:flex;flex-direction:column}.masthead{display:flex;justify-content:space-between;align-items:center;min-height:76px;border-bottom:1px solid var(--ink);z-index:2}.masthead>a{font-family:var(--serif);font-weight:900;font-size:23px;text-decoration:none;letter-spacing:.08em}.masthead>a>span{font-family:var(--ui);font-size:9px;margin-left:15px;letter-spacing:.2em}.utility{display:flex;gap:12px}.utility button{font-size:11px;min-height:44px;padding:5px 7px}.screen{flex:1}.title-screen{display:grid;grid-template-columns:1.2fr 1fr;min-height:650px}.title-art{position:relative;overflow:hidden;min-height:630px;border-right:1px solid var(--line)}.topline{position:absolute;top:9%;left:12%;letter-spacing:.3em;font-size:12px;font-weight:700}.red-sun{position:absolute;width:290px;height:290px;border-radius:50%;background:var(--red);top:16%;left:27%;opacity:.94;box-shadow:inset -10px 5px 0 #aa2822}.title-art h1{position:absolute;top:12%;left:12%;margin:0;z-index:2;font-family:var(--serif);font-weight:900;line-height:.93;letter-spacing:-.08em;transform:rotate(-5deg);text-shadow:1px 1px 0 var(--ink),-1px -1px 0 var(--ink)}.title-art h1>span{display:block;font-size:clamp(96px,10.5vw,151px)}.title-art h1>em{display:block;font-size:clamp(160px,17vw,232px);font-style:normal;margin-left:18px;line-height:.96}.title-cut{position:absolute;background:var(--paper);height:10px;width:76%;left:2%;top:51%;transform:rotate(-25deg);clip-path:polygon(0 70%,100% 0,97% 55%,0 100%);z-index:3}.tagline{position:absolute;right:12%;top:23%;writing-mode:vertical-rl;font-family:var(--serif);font-size:31px;font-weight:900;letter-spacing:.28em}.tagline span{padding-top:22px}.seal{position:absolute;top:16%;right:11%;font-family:var(--serif);border:2px solid var(--red);color:var(--red);font-size:13px;line-height:1.25;padding:5px;transform:rotate(6deg)}.samurai-scene{position:absolute;bottom:27px;left:0;right:0;height:200px;opacity:.96}.samurai-scene svg{width:100%;height:100%}.art-caption{position:absolute;bottom:23px;left:12%;font-size:11px;letter-spacing:.25em}.title-menu{align-self:center;max-width:425px;width:100%;margin:30px auto;padding:0 20px}.eyebrow{color:var(--red);font-size:11px;letter-spacing:.18em;font-weight:700}.title-menu h2{font-size:34px;line-height:1.5;letter-spacing:.06em;margin:14px 0}.intro{line-height:1.9;font-size:13px;color:#625c50}.mode-picker{display:flex;gap:10px;margin:26px 0 17px}.mode-picker legend{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden}.mode-picker button{width:50%;border:1px solid var(--line);padding:14px 5px;text-align:center;font-weight:700;font-size:14px}.mode-picker button small{display:block;margin-top:5px;font-size:10px;font-weight:400;opacity:.72}.mode-picker .selected{background:var(--ink);border-color:var(--ink);color:var(--paper)}.setting-row{display:flex;align-items:center;justify-content:space-between;font-size:12px;margin-bottom:20px}.segments{display:flex;border-bottom:1px solid var(--line)}.segments button{min-width:57px;padding:10px 13px}.segments .selected{color:var(--red);box-shadow:0 2px var(--red);font-weight:700}.hint-switch{display:flex;align-items:center;gap:13px;cursor:pointer;margin-bottom:25px;font-size:12px}.hint-switch small{display:block;color:#726859;font-size:10px;margin-top:5px}.hint-switch input{position:absolute;opacity:0;width:36px;height:26px}.switch{width:36px;height:21px;background:#918b80;display:block;position:relative;border-radius:15px}.switch::after{content:'';position:absolute;width:15px;height:15px;background:var(--paper);top:3px;left:3px;border-radius:50%;transition:transform .15s}.hint-switch input:checked+.switch{background:var(--red)}.hint-switch input:checked+.switch::after{transform:translateX(15px)}.hint-switch input:focus-visible+.switch{outline:3px solid var(--ink);outline-offset:4px}.primary{background:var(--red);color:var(--white);width:100%;min-height:62px;padding:15px 25px;text-align:left;font-family:var(--serif);font-size:23px;letter-spacing:.12em;font-weight:900;display:flex;align-items:center;justify-content:space-between;box-shadow:3px 3px 0 var(--ink)}.primary span{font-family:serif;font-size:30px}.below-start{display:flex;justify-content:space-between;align-items:center;margin-top:9px;font-size:10px;color:#635e54}.below-start button{min-height:44px;text-decoration:underline;text-underline-offset:5px;font-size:12px}.cpu-note{font-size:10px;line-height:1.8;color:#776d5e;margin-top:5px}footer{border-top:1px solid var(--ink);min-height:52px;display:flex;align-items:center;justify-content:space-between;font-size:9px;letter-spacing:.08em;color:#756d60}footer>div{display:flex;align-items:center;gap:20px}footer button{font-size:10px;min-height:44px}
.play-screen{width:min(100%,700px);margin:0 auto;padding:14px 0 20px}.play-top{display:flex;justify-content:space-between;align-items:center;gap:20px}.play-top small{display:block;font-size:10px;letter-spacing:.12em;font-weight:400}.time strong{font:60px/.98 var(--serif);font-weight:900;font-variant-numeric:tabular-nums}.time>span{font-size:12px;margin-left:5px}.score{margin-left:auto;text-align:right}.score strong{font:900 33px var(--serif);font-variant-numeric:tabular-nums}.play-top>button{border:1px solid var(--line);height:44px;width:44px;font-size:22px}.time-track{height:3px;background:#d7cdbb;margin-top:12px}.time-track div{height:100%;background:var(--red);transform-origin:left}.rival{display:flex;gap:15px;align-items:center;padding:12px 0;font-size:11px;border-bottom:1px solid var(--line)}.rival b{font-size:15px;margin-left:7px;font-variant-numeric:tabular-nums}.battle-track{height:5px;background:#48453e;flex:1}.battle-track i{display:block;height:100%;width:50%;background:var(--red)}.arena{height:min(43vh,335px);min-height:255px;position:relative;margin:12px 0 4px;overflow:hidden}.arena-grid{position:absolute;inset:30px 20%;border:1px solid #d2c8b644;background:linear-gradient(90deg,transparent 49.8%,#b1a49125 50%,transparent 50.2%),linear-gradient(transparent 49.8%,#b1a49125 50%,transparent 50.2%)}.word-label{position:absolute;top:14px;left:0;display:flex;flex-direction:column;gap:8px;z-index:2}.word-label>span{font-family:var(--serif);writing-mode:vertical-rl;font-size:17px;letter-spacing:.25em}.word-label small{font-size:10px;margin-top:15px}.word{position:absolute;inset:12px 13% 28px;display:flex;align-items:center;justify-content:center}.word svg,.ghost-word svg{height:100%;max-width:100%;overflow:visible}.kanji-svg path{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:6.4}.kanji-svg .pending{stroke:#c6bcab}.kanji-svg .done{stroke:var(--sumi)}.kanji-svg .next{stroke:var(--red)}.kanji-svg .start-point{fill:var(--white);stroke:var(--red);stroke-width:1}.ghost-word{position:absolute;inset:12px 13% 28px;pointer-events:none;display:flex;justify-content:center;align-items:center}.ghost-half{position:absolute;inset:0;text-align:center}.ghost-half svg{width:100%}.ghost-half.a{clip-path:polygon(0 0,100% 0,100% 27%,0 79%);animation:splitA .44s ease-out forwards}.ghost-half.b{clip-path:polygon(0 80%,100% 28%,100% 100%,0 100%);animation:splitB .44s ease-out forwards}@keyframes splitA{to{transform:translate(-55px,-18px) rotate(-9deg);opacity:0}}@keyframes splitB{to{transform:translate(55px,24px) rotate(12deg);opacity:0}}.combo{position:absolute;right:0;top:14px;z-index:2;text-align:right;min-width:80px}.combo strong{font:900 42px/.95 var(--serif);display:block}.combo span{font-size:12px;letter-spacing:.2em}.combo small{display:block;color:var(--red);font-weight:700;font-size:13px;margin-top:9px}.combo.hot strong{color:var(--red)}.arena-footer{position:absolute;bottom:1px;left:0;right:0;display:flex;justify-content:space-between;font-size:10px;color:#6a6154;letter-spacing:.08em}#effects{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.kill-label{position:absolute;right:0;bottom:25px;color:var(--red);font:900 25px var(--serif);letter-spacing:.08em;pointer-events:none;opacity:0}.kill-label.show{animation:stamp .5s both}@keyframes stamp{0%{opacity:0;transform:scale(1.3) rotate(-8deg)}20%,65%{opacity:1;transform:scale(1) rotate(-8deg)}100%{opacity:0;transform:scale(.97) rotate(-8deg)}}.cue-line{display:flex;justify-content:center;align-items:center;gap:12px;min-height:33px;font-size:11px}.cue-line strong{color:var(--red);font:900 27px var(--ui)}#cueExtra{font-size:10px;color:#746956}.sequence{height:32px;display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:8px}.sequence span{font:700 16px var(--ui);color:#a79d8e;min-width:18px;text-align:center}.sequence span.active{background:var(--red);color:var(--white);padding:2px 5px}.sequence span.past{color:var(--ink)}.controls{display:grid;grid-template-columns:1fr 1fr;gap:9px}[data-dir]{height:73px;border:1px solid #81786a;display:flex;align-items:center;justify-content:center;gap:15px;position:relative;background:#ece1ce;touch-action:none;user-select:none;-webkit-user-select:none}[data-dir] strong{font:700 35px/1 var(--ui)}[data-dir]>span{font-size:12px}[data-dir] kbd{position:absolute;right:9px;bottom:7px;font-size:10px;opacity:.45}[data-dir].target{background:var(--red);color:var(--white);border-color:var(--red);box-shadow:2px 2px var(--ink)}[data-dir].pressed{background:var(--ink);color:var(--paper)}#playHint{text-align:center;font-size:10px;color:#716655;margin-top:11px}.arena.miss{animation:miss .17s linear}@keyframes miss{30%{transform:translateX(-3px)}70%{transform:translateX(3px)}}
.result-screen{width:min(100%,450px);margin:0 auto;padding:34px 0 25px;text-align:center}.result-stamp{font:900 72px/1.2 var(--serif);color:var(--red);transform:rotate(-8deg);margin:12px 0 16px}.result-screen h2{font-size:24px;letter-spacing:.05em}.result-screen>p{font-size:11px;color:#6a6254;line-height:1.8;margin-top:10px}.result-score{margin:23px 0}.result-score>span{display:block;font-size:11px}.result-score strong{font:900 clamp(48px,11vw,76px)/1.2 var(--serif);font-variant-numeric:tabular-nums}.result-stats{display:flex;justify-content:space-around;padding:20px 0;border-block:1px solid var(--line)}.result-stats div{display:flex;flex-direction:column;gap:5px}.result-stats b{font:900 29px var(--serif)}.result-stats span{font-size:10px}.result-screen .result-tip{margin:17px 0 22px;color:var(--ink);font-size:12px}.result-screen .text-button{margin-top:12px}.text-button{min-height:44px;text-decoration:underline;text-underline-offset:5px;font-size:12px}dialog{background:var(--paper);color:var(--ink);border:1px solid var(--ink);padding:30px;width:min(90vw,480px);max-height:85dvh;overflow:auto;box-shadow:8px 8px 0 #17171466}dialog::backdrop{background:#171714aa;backdrop-filter:blur(3px)}dialog h2{font-size:30px;margin:10px 0 18px}dialog h3{margin:20px 0 7px}dialog p{font-size:13px;line-height:1.9}dialog .primary{margin-top:24px;font-size:20px}dialog .text-button{display:block;margin:16px auto 0}.close-dialog{float:right;font-size:26px;width:44px;height:44px}.source-note{font-size:10px!important;margin-top:25px}#bootError{position:fixed;bottom:20px;left:10%;width:80%;background:var(--ink);color:var(--paper);padding:20px;z-index:100}#bootError button{text-decoration:underline}body.reduced *,body.reduced *::before,body.reduced *::after{animation:none!important;transition:none!important}body.reduced .ghost-word{display:none}body.reduced .kill-label.show{opacity:1}
@media(min-width:900px){#app[data-phase=playing] .play-screen{display:grid;grid-template-columns:1.1fr 1fr;column-gap:50px;width:min(100%,1060px);align-content:center;padding:35px 0;position:relative}.play-top{grid-column:1/-1}.time-track{grid-column:1/-1}.rival{grid-column:1/-1}.arena{height:380px;min-height:0;margin:30px 0}.input-area{align-self:center}[data-dir]{height:87px}.cue-line{margin-bottom:12px}.sequence{margin-bottom:18px}.play-screen .arena-grid{inset:20px 10%}.play-screen .word{inset:15px 10% 30px}}
@media(max-width:700px){#app{padding-right:max(20px,env(safe-area-inset-right,0px));padding-left:max(20px,env(safe-area-inset-left,0px))}.masthead{min-height:56px}.masthead>a{font-size:18px}.masthead>a>span{font-size:7px;margin-left:7px}.utility{gap:2px}.utility button{font-size:9px;padding:4px}.title-screen{display:block;min-height:0}.title-art{min-height:0;height:285px;border-right:0;border-bottom:1px solid var(--line)}.topline{top:15px;left:5%;font-size:9px}.red-sun{width:158px;height:158px;top:44px;left:32%}.title-art h1{top:43px;left:8%;line-height:1;transform:rotate(-5deg)}.title-art h1>span{font-size:83px;display:inline}.title-art h1>em{font-size:116px;display:inline;margin-left:0}.title-cut{width:90%;left:0;top:53%;height:7px;transform:rotate(-12deg)}.tagline{font-size:17px;right:7%;top:36px;letter-spacing:.17em}.tagline span{padding-top:10px}.seal{top:177px;right:8%;font-size:10px;padding:3px}.samurai-scene{height:100px;bottom:12px;left:25%;right:0}.art-caption{bottom:19px;left:5%;font-size:8px;writing-mode:vertical-rl}.title-menu{padding:0;margin:20px auto 17px;max-width:none}.title-menu>.eyebrow{font-size:9px}.title-menu h2{font-size:22px;margin:9px 0 6px;display:inline;line-height:1.5}.title-menu h2 br{display:none}.intro{font-size:11px;line-height:1.65;margin-top:8px}.intro br{display:none}.mode-picker{margin:15px 0 12px}.mode-picker button{padding:11px 3px;font-size:12px}.mode-picker button small{font-size:9px}.setting-row{margin-bottom:13px}.segments button{padding:8px 12px;min-width:54px;min-height:44px}.hint-switch{margin-bottom:17px}.primary{min-height:58px;font-size:22px}.cpu-note{font-size:9px}.below-start{margin-top:5px}.play-screen{padding-top:10px}.arena{height:clamp(240px,35dvh,340px);min-height:230px;margin-top:6px}.play-top{gap:12px}.time strong{font-size:48px}.score strong{font-size:28px}.time-track{margin-top:8px}.word{inset:14px 14% 28px}.combo strong{font-size:31px}.combo{min-width:50px}.combo span{font-size:10px}.word-label>span{font-size:14px}.word-label small{font-size:9px}[data-dir]{height:68px;gap:10px}[data-dir] kbd{display:none}[data-dir]>span{font-size:11px}[data-dir] strong{font-size:33px}.cue-line{gap:8px}.cue-line strong{font-size:25px}.sequence{gap:5px;height:29px;margin-bottom:6px}.sequence span{font-size:14px;min-width:15px}#playHint{font-size:9px}footer{min-height:43px;font-size:7px}footer>div{gap:9px}footer button{font-size:8px}.result-screen{padding-top:22px}.result-stamp{font-size:60px}.result-screen h2{font-size:22px}.result-score{margin:17px 0}.result-stats{padding:15px 0}}
.switch{pointer-events:none}
@media(min-width:701px){.samurai-scene{bottom:54px}.art-caption{bottom:20px}}
@media(min-width:701px) and (max-width:899px){.title-screen{align-content:center;min-height:760px}.title-art{height:760px;min-height:760px;align-self:center}.title-art h1{top:14%}.title-art .red-sun{width:230px;height:230px;left:27%;top:20%}.title-art .title-cut{top:43%}.title-art .tagline{right:9%}.title-art .samurai-scene{bottom:63px}.title-art .art-caption{bottom:28px}.title-menu{padding:0 22px}.title-menu h2{font-size:27px}.title-menu .intro{font-size:12px}}
@media(max-width:380px){.title-art{height:260px}.title-art h1>span{font-size:71px}.title-art h1>em{font-size:100px}.tagline{right:3%;font-size:15px}.red-sun{width:140px;height:140px}.arena{height:220px;min-height:210px}[data-dir]{height:59px}.sequence{gap:3px}.sequence span{min-width:12px}.cue-line{font-size:10px}#cueExtra{font-size:9px}.masthead>a>span{display:none}}
@media(max-height:730px) and (max-width:700px){.arena{height:215px;min-height:200px}[data-dir]{height:58px}.play-screen{padding-bottom:9px}.result-stamp{font-size:48px;margin:8px 0}.result-screen{padding-top:16px}.result-score{margin:10px 0}}

/* 問題の右下に→、下段に↙↓↘。入力面は演出でも動かさない。 */
#app[data-phase] .play-screen{display:flex;flex-direction:column;width:min(100%,620px);padding:12px 0 18px;gap:0}
.input-area{display:contents}.cue-line{order:3;margin:10px 0 0}.sequence{order:4;min-height:32px;height:auto;flex-wrap:wrap;gap:4px;margin:3px 0 0}
.play-top{order:0}.time-track{order:1}.rival{order:2}
#app .play-screen .arena{order:5;width:100%;height:clamp(235px,35dvh,350px);min-height:0;margin:0 0 9px;overflow:hidden}
#app .play-screen .word,#app .play-screen .ghost-word{inset:12px 25% 29px 6%}
#app .play-screen .arena-grid{inset:20px 27% 29px 7%}
.word-label{top:18px}.word-label>span{font-size:13px}.word-label small{margin-top:6px;white-space:nowrap}
.combo{top:18px;right:4px}.combo strong{font-size:35px}.combo small{margin-top:5px}

.controls{order:6;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}

[data-dir]{height:72px;gap:5px;flex-direction:column}[data-dir] strong{font-size:32px}[data-dir]>span{font-size:10px}
#playHint{order:7;margin-top:10px}.arena-footer{right:calc((100% - 18px)/3 + 9px);bottom:3px}
.kill-label{right:26%;bottom:30px}#effects{width:75%}.arena.miss{animation:none}.arena.miss .word{animation:miss .17s linear}
.sequence .stroke-group{display:inline-flex;gap:1px;border:1px solid var(--line);border-radius:3px;padding:2px;min-width:20px}
.stroke-group b{display:inline-block;font-size:15px;line-height:21px;min-width:17px;font-weight:700;color:#a79d8e}
.stroke-group b.active{background:var(--red);color:var(--white)}.stroke-group b.past{color:var(--ink)}
.kanji-svg path.direction-guide{stroke:var(--white);stroke-width:1;fill:none}.kanji-svg path.direction-tip{stroke:var(--white);stroke-width:.65;fill:none}
@media(max-height:730px) and (max-width:700px){#app .play-screen .arena{height:190px}.cue-line{margin-top:5px}[data-dir]{height:60px}.sequence{min-height:29px}}
@media(min-width:701px){[data-dir]{height:78px}.word-label>span{font-size:17px}.combo strong{font-size:45px}}
/* 成長と奥義。正解の方向は漢字の外へ出さない。 */
.growth{margin:16px 0 18px;padding-top:12px;border-top:1px solid var(--line)}.growth>div:first-child{display:flex;justify-content:space-between;align-items:center}.growth strong{font:900 19px var(--serif)}.growth span{font-size:10px}.xp-track{height:4px;margin:8px 0;background:#d5c9b7}.xp-track i{height:100%;display:block;background:var(--red)}.growth>button{width:100%;min-height:44px;display:flex;justify-content:space-between;align-items:center;padding:0}.growth>button span{font-size:13px;font-weight:700}.growth>button b{font-size:11px;color:var(--red)}.growth>small{font-size:9px;color:#776d5e}
#cueArrow{display:none}.sequence .stroke-number{width:22px;min-width:22px;height:22px;line-height:20px;font:11px/20px var(--ui);border:1px solid var(--line);border-radius:50%;color:#948878}.sequence .stroke-number.current{border:2px solid var(--ink);line-height:18px;color:var(--ink);font-weight:700}.sequence .stroke-number.past{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.kanji-svg .auto-done{stroke:#687a82;stroke-dasharray:1 0}.kanji-svg .start-point{stroke-width:1.4}
.art-button{order:7;position:relative;isolation:isolate;overflow:hidden;margin-top:10px;display:flex;align-items:center;justify-content:space-between;width:100%;height:65px;padding:8px 20px;color:var(--paper);background:#302d28;border:1px solid var(--ink);text-align:left}.art-button>i{position:absolute;inset:0 auto 0 0;background:#79271f;z-index:-1;transition:width .12s}.art-button>span>small{display:block;font-size:9px;letter-spacing:.2em}.art-button strong{display:block;font:900 27px var(--serif);letter-spacing:.1em}.art-button>b{font-size:12px}.art-button kbd{font-size:8px;opacity:.6;margin-left:8px}.art-button.ready{box-shadow:3px 3px 0 var(--ink);border-color:var(--red)}.art-button.ready>i{background:var(--red)}.art-button.ready::after{content:'';position:absolute;inset:-80px 50%;width:15px;background:#fff8dc44;transform:rotate(25deg);animation:blade-glint 2.8s ease-in-out infinite;pointer-events:none}@keyframes blade-glint{0%,45%{translate:-450px 0}85%,100%{translate:450px 0}}
.art-mode{order:8;text-align:center;font-size:10px;min-height:18px;margin-top:9px;color:var(--red)}#playHint{order:9;margin-top:0;font-size:9px}.art-active .arena-grid{border-color:#b92d2566;background:repeating-conic-gradient(from 12deg at 50% 50%,transparent 0deg 14deg,#b92d2515 15deg 16deg),radial-gradient(ellipse,transparent 35%,#b92d2525)}.art-active .combo strong{color:var(--red)}.art-active .art-button{border-color:var(--red);box-shadow:inset 4px 0 var(--red)}
.art-banner{position:absolute;right:0;top:45%;z-index:3;color:var(--red);font:900 clamp(28px,7vw,64px)/1 var(--serif);letter-spacing:-.12em;writing-mode:vertical-rl;text-shadow:2px 2px var(--paper);opacity:0;pointer-events:none;transform:rotate(-9deg)}.art-banner.show{animation:art-name .85s both}@keyframes art-name{0%{opacity:0;transform:translateY(35px) rotate(-18deg) scale(1.4)}15%,65%{opacity:1;transform:translateY(0) rotate(-9deg) scale(1)}100%{opacity:0;transform:translateY(-12px) rotate(-9deg)}}.kill-label{font-size:33px;letter-spacing:-.1em;text-shadow:1px 1px var(--paper)}
.reward-panel{padding:14px 0;margin-bottom:17px;border-block:1px solid var(--line);display:flex;flex-direction:column;gap:8px}.reward-panel>strong{font:900 20px var(--serif);color:var(--red)}.reward-panel>span{font-size:11px}.reward-panel>button{min-height:44px;text-decoration:underline;text-underline-offset:5px;font-size:12px}
.dojo-dialog{width:min(94vw,700px);padding:25px}.dojo-dialog h2{font-size:36px}.dojo-help{font-size:11px!important;color:#756657;margin-top:12px}.art-card{padding:16px 0;border-bottom:1px solid var(--line)}.art-heading{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}.art-heading>span{font-size:10px;color:var(--red);border:1px solid var(--red);padding:2px 5px}.art-heading>h3{font-size:30px;margin:0}.art-heading>small{font-size:10px}.art-card>p{font-size:12px;margin:7px 0;line-height:1.7}.art-stat{font-size:12px;font-weight:700}.art-actions{display:flex;gap:8px;margin-top:10px}.art-actions button{min-height:44px;padding:7px 12px;border:1px solid var(--ink);font-size:11px;flex:1}.art-actions button[aria-pressed=true]{background:var(--ink);color:var(--paper)}.art-actions button[data-train]:not(:disabled){color:var(--red);border-color:var(--red);font-weight:700}.art-actions button:disabled{opacity:.4}.art-card.equipped .art-heading>h3{color:var(--red)}
body.reduced .art-banner.show{opacity:0}body.reduced .art-button.ready::after{display:none}body.reduced .art-active .arena-grid{background:none}

.art-banner{writing-mode:horizontal-tb;white-space:nowrap;top:auto;bottom:82px;right:2%;font-size:clamp(25px,7vw,48px);letter-spacing:-.05em}
.word{z-index:2;pointer-events:none}.ghost-word,#effects,.kill-label,.art-banner{z-index:1}
.double-cut-words{position:absolute;inset:12px 25% 29px 6%;pointer-events:none;z-index:1}.word-cut{position:absolute;inset:0}
.cut-half{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.cut-half svg{height:100%;max-width:100%;overflow:visible}.cut-half.a{clip-path:polygon(0 0,100% 0,100% 26%,0 79%);animation:doubleA .26s ease-out both}.cut-half.b{clip-path:polygon(0 80%,100% 27%,100% 100%,0 100%);animation:doubleB .26s ease-out both}
.cut-flash{position:absolute;left:0;top:52%;width:100%;height:3px;background:var(--red);transform:rotate(-27deg);animation:cutFlash .22s both}
@keyframes doubleA{0%{transform:translate(0);opacity:1}35%{transform:translate(-15px,-8px) rotate(-5deg);opacity:1}100%{transform:translate(-65px,-24px) rotate(-16deg);opacity:0}}
@keyframes doubleB{0%{transform:translate(0);opacity:1}35%{transform:translate(15px,8px) rotate(5deg);opacity:1}100%{transform:translate(65px,24px) rotate(16deg);opacity:0}}
@keyframes cutFlash{0%{opacity:1;scale:.2 1}20%{opacity:1;scale:1 1}100%{opacity:0;scale:1.2 1}}
.double-cut .word{visibility:hidden}.double-cut .art-banner{display:none}.double-cut .kill-label{right:2%;bottom:30px;font-size:25px}.double-cut #effects{opacity:.5}.paused .cut-half,.paused .cut-flash{animation-play-state:paused}
.play-screen:has(.double-cut) .cue-line,.play-screen:has(.double-cut) .sequence{visibility:hidden}
body.reduced .cut-half.a{transform:translate(-4px,-3px)}body.reduced .cut-half.b{transform:translate(4px,3px)}body.reduced .cut-flash{display:none}
@media(max-width:700px){.art-button{height:60px;padding:7px 15px}.art-button strong{font-size:26px}.art-button kbd{display:none}.dojo-dialog{padding:20px}.art-heading>h3{font-size:26px}.art-actions button{padding:6px;font-size:10px}#app .play-screen .arena{height:clamp(205px,29dvh,290px)}.growth{margin:12px 0}}
@media(max-height:730px) and (max-width:700px){#app .play-screen .arena{height:165px}.art-button{height:52px}.art-mode{margin-top:6px}.art-button strong{font-size:23px}}
/* 添付の段違い配置を初期値にし、設定で既存の二配置へ切り替える。 */
#app[data-layout=spread] .controls{grid-template-columns:repeat(4,minmax(0,1fr))}




#app[data-layout=grid] .controls{grid-template-columns:repeat(2,minmax(0,1fr))}




#app[data-layout=spread] .play-screen .word,#app[data-layout=spread] .play-screen .ghost-word,#app[data-layout=spread] .double-cut-words,#app[data-layout=grid] .play-screen .word,#app[data-layout=grid] .play-screen .ghost-word,#app[data-layout=grid] .double-cut-words{inset:12px 13% 29px}
#app[data-layout=spread] .play-screen .arena-grid,#app[data-layout=grid] .play-screen .arena-grid{inset:20px 15% 29px}
#app[data-layout=spread] #effects,#app[data-layout=grid] #effects{width:100%}
#app[data-layout=spread] .arena-footer,#app[data-layout=grid] .arena-footer{right:0}
#app[data-layout=spread] .kill-label,#app[data-layout=grid] .kill-label{right:0;bottom:20px}
#app[data-layout=spread] .art-banner,#app[data-layout=grid] .art-banner{bottom:20px;right:0}
.settings-link{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;border-block:1px solid var(--line);padding:8px 0;margin-bottom:8px;text-align:left;font-size:12px}.settings-link small{margin-left:auto;font-size:10px;color:#746956}.settings-link b{color:var(--red)}
.layout-picker legend{font-weight:700;font-size:13px;margin-bottom:10px}.layout-choice{display:flex;align-items:center;gap:12px;min-height:115px;border:0;padding:12px;margin:9px 0;cursor:pointer}.layout-choice:has(input:checked){color:var(--red)}.layout-choice input{accent-color:var(--red);flex:none;margin:0;width:18px;height:18px}.layout-choice>span:last-child{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}.layout-choice strong{font:900 20px var(--serif)}.layout-choice small{font-size:10px;line-height:1.7;color:#736757}.layout-choice em{font-size:10px;font-style:normal;color:var(--red)}
.layout-preview{position:relative;flex:none;width:92px;height:85px;display:block}.preview-word{position:absolute;top:0;left:22px;right:22px;border:0;text-align:center;font:900 27px/34px var(--serif);font-style:normal}.layout-preview b{position:absolute;width:21px;height:19px;border:0;font:700 17px/17px var(--ui);text-align:center}.layout-preview.spread .d{top:42px;left:26px}.layout-preview.spread .r{top:42px;left:50px}.layout-preview.spread .l{bottom:0;left:0}.layout-preview.spread .f{bottom:0;right:0}.layout-preview.arena-layout .preview-word{left:0;right:25px}.layout-preview.arena-layout .r{top:42px;right:0}.layout-preview.arena-layout .d{bottom:0;left:35px}.layout-preview.arena-layout .l{bottom:0;left:0}.layout-preview.arena-layout .f{bottom:0;right:0}.layout-preview.grid .d{top:42px;left:20px}.layout-preview.grid .r{top:42px;right:20px}.layout-preview.grid .l{bottom:0;left:20px}.layout-preview.grid .f{bottom:0;right:20px}.settings-note{font-size:11px;color:#736757}#settingsDialog .primary{font-size:18px;margin-top:16px}
@media(max-width:700px){#app[data-layout=spread] .play-screen .arena,#app[data-layout=grid] .play-screen .arena{height:clamp(170px,24dvh,240px)}#app[data-layout=spread] [data-dir]>span{font-size:9px}}
@media(max-height:730px) and (max-width:700px){#app[data-layout=spread] .play-screen .arena,#app[data-layout=grid] .play-screen .arena{height:135px}#settingsDialog{padding:20px}.layout-choice{padding:9px;gap:9px}.layout-preview{width:86px}.double-cut .kill-label{display:none}}
@media(max-width:700px){.title-menu{margin-top:16px}}
/* ロゴ → ステータスと設定 → モードと人数 → 抜刀。 */
.title-menu .mode-picker{grid-template-columns:repeat(2,minmax(0,1fr))}
.title-menu .mode-picker button{min-width:0}
.title-status{padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:8px}
.status-top{display:flex;align-items:center;gap:12px;min-height:44px}
.status-top>strong{font:900 22px var(--serif)}.status-top>span{margin-left:auto;font-size:12px;white-space:nowrap}
.settings-icon{display:flex;align-items:center;justify-content:center;gap:7px;min-width:74px;min-height:44px;margin-left:4px;border:0;font-size:12px}
.title-menu svg{width:21px;height:21px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.status-progress{display:flex;align-items:center;gap:12px;margin:4px 0}.status-progress .xp-track{flex:1;margin:0;height:4px}.status-progress>span{font-size:10px;color:#746956;white-space:nowrap}
.equipped-button{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;text-align:left}.equipped-button small{font-size:11px;color:#746956}.equipped-button strong{font:900 18px var(--serif)}.equipped-button>span{margin-left:auto;color:var(--red);font-size:24px}
#saveStatus{display:block;color:var(--red);font-size:11px;line-height:1.6}
.menu-label-row{display:flex;align-items:center;justify-content:space-between;font-size:12px;min-height:44px}.menu-label-row button{min-height:44px;min-width:44px;font-size:12px;text-decoration:underline;text-underline-offset:4px}
.title-menu .mode-picker{margin:0 0 14px;gap:8px}.title-menu .mode-picker button{display:flex;align-items:center;justify-content:center;gap:5px;min-height:58px;font-size:12px;padding:8px 4px}.title-menu .mode-picker svg{width:17px;height:17px}
.title-menu .setting-row{margin-bottom:22px}.title-menu .segments button{min-height:44px}
.title-menu #startBtn{font-size:26px;justify-content:center;position:relative}.title-menu #startBtn>span{position:absolute;right:24px}
@media(max-width:700px){.title-menu{margin:12px auto 20px}.title-status{padding-bottom:8px;margin-bottom:0}.title-menu .setting-row{margin-bottom:16px}.title-menu #startBtn{min-height:58px}}
@media(max-height:730px) and (max-width:700px){.title-art{height:190px}.title-art h1{top:20px}.title-art h1>span{font-size:67px}.title-art h1>em{font-size:94px}.title-art .red-sun{width:130px;height:130px;top:22px}.title-art .samurai-scene{height:72px;bottom:8px}.title-art .title-cut{top:53%}.title-menu{margin-top:8px;margin-bottom:12px}.title-menu .mode-picker{margin-bottom:5px}.title-menu .mode-picker button{min-height:48px}.title-menu .setting-row{margin-bottom:10px}.title-menu .status-top>strong{font-size:20px}}

/* 漢字と人数を主役にし、入力面は位置を固定する。 */
.guide-summary{font-size:11px;color:#746956;text-align:right;margin:-8px 0 16px}.guide-note{font-size:12px;color:var(--red);margin:8px 0}
#app[data-phase=playing] .masthead{min-height:44px}
#app[data-phase=playing] footer{display:none}
.play-top{align-items:center;gap:15px}.cut-counter{display:flex;align-items:baseline;gap:5px;margin-right:auto;white-space:nowrap}.cut-counter>strong{font:900 clamp(40px,10vw,58px)/1 var(--serif);font-variant-numeric:tabular-nums}.cut-counter>span{font-size:13px;color:#746956}.cut-counter b{font-weight:400}
.play-top .time{display:flex;align-items:baseline;gap:4px;white-space:nowrap}.play-top .time small{font-size:10px}.play-top .time strong{font:700 19px var(--ui);font-variant-numeric:tabular-nums}.play-top .time>span{font-size:10px}.time-track{height:3px;background:var(--line)}
#app .play-screen .arena{height:clamp(265px,38dvh,350px)}
#app[data-layout=spread] .play-screen .arena,#app[data-layout=grid] .play-screen .arena{height:clamp(265px,38dvh,350px)}
.cue-line{display:none}.sequence{min-height:27px;margin-top:5px}.arena-footer{font-size:9px}.combo{top:14px}.combo strong{font-size:28px}.combo span{font-size:9px}
.art-mode,#playHint:empty{display:none}
.ghost-word{opacity:.3}.ghost-half.a,.ghost-half.b{animation-duration:.18s}
.word-cut.light .cut-flash{height:2px}.word-cut.heavy .cut-flash{height:7px;background:var(--ink);box-shadow:0 2px var(--red)}.word-cut.heavy .cut-half.a{animation-name:heavyA}.word-cut.heavy .cut-half.b{animation-name:heavyB}
@keyframes heavyA{0%{transform:translate(0);opacity:1}30%{transform:translate(-21px,-13px) rotate(-7deg);opacity:1}100%{transform:translate(-80px,-35px) rotate(-19deg);opacity:0}}
@keyframes heavyB{0%{transform:translate(0);opacity:1}30%{transform:translate(21px,13px) rotate(7deg);opacity:1}100%{transform:translate(80px,35px) rotate(19deg);opacity:0}}
.result-screen .result-score{display:flex;align-items:baseline;justify-content:center;gap:9px;margin:13px 0}.result-screen .result-score>strong{font:900 clamp(66px,20vw,110px)/1 var(--serif)}.result-screen .result-score>span{font:900 22px var(--serif)}.result-stamp{font-size:25px;margin:8px 0}.result-screen h2{font-size:20px}.result-stats{padding:12px 0}.result-stats b{font-size:24px}.reward-panel{padding:9px 0;margin-bottom:12px;gap:5px}.reward-panel>strong{font-size:15px}.reward-panel>span{font-size:10px}.result-tip{font-size:11px}.result-screen .primary{margin-top:6px}
@media(max-width:700px){#app .play-screen .arena,#app[data-layout=spread] .play-screen .arena,#app[data-layout=grid] .play-screen .arena{height:clamp(235px,31dvh,290px)}[data-dir]{height:60px}.art-button{height:55px}.art-button strong{font-size:24px}.cut-counter>strong{font-size:43px}.cut-counter>span{font-size:11px}.play-top .time strong{font-size:17px}.play-top .time small{display:none}}
@media(max-height:730px) and (max-width:700px){#app[data-phase=playing] .masthead{min-height:30px}.masthead>a{font-size:16px}#app .play-screen{padding:6px 0 8px}#app .play-screen .arena,#app[data-layout=spread] .play-screen .arena,#app[data-layout=grid] .play-screen .arena{height:230px}.cut-counter>strong{font-size:36px}.cut-counter>span{font-size:10px}.time-track{margin-top:4px}.sequence{min-height:23px;margin-top:2px}[data-dir]{height:48px}[data-dir] strong{font-size:27px}[data-dir]>span{font-size:8px}.art-button{height:46px;margin-top:7px}.art-button strong{font-size:22px}.art-button>b{font-size:10px}.result-stamp{font-size:22px}.result-screen .result-score>strong{font-size:68px}.result-screen h2{font-size:16px}.result-tip{display:none}.reward-panel>span{font-size:9px}}

/* 四つの型：漢字は常に中央。方向を入れ替えても位置は動かさない。 */
:root{--sumi:#3b4543}
#app .play-screen .word,#app .play-screen .ghost-word,#app .double-cut-words{inset:12px 13% 29px}
#app .play-screen .arena-grid{inset:20px 14% 29px}
#app #effects{width:100%}#app .arena-footer{right:0}#app .kill-label{right:0;bottom:20px}#app .art-banner{right:0;bottom:20px}
#app .controls{grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
#app[data-layout=spread] [data-slot="0"]{grid-column:2;grid-row:1}#app[data-layout=spread] [data-slot="1"]{grid-column:3;grid-row:1}#app[data-layout=spread] [data-slot="2"]{grid-column:1;grid-row:2}#app[data-layout=spread] [data-slot="3"]{grid-column:4;grid-row:2}
#app[data-layout=grid] .controls{grid-template-columns:repeat(2,minmax(0,1fr))}#app[data-layout=grid] [data-slot="0"]{grid-column:1;grid-row:1}#app[data-layout=grid] [data-slot="1"]{grid-column:2;grid-row:1}#app[data-layout=grid] [data-slot="2"]{grid-column:1;grid-row:2}#app[data-layout=grid] [data-slot="3"]{grid-column:2;grid-row:2}
#app[data-layout=row] [data-slot="0"]{grid-column:1;grid-row:1}#app[data-layout=row] [data-slot="1"]{grid-column:2;grid-row:1}#app[data-layout=row] [data-slot="2"]{grid-column:3;grid-row:1}#app[data-layout=row] [data-slot="3"]{grid-column:4;grid-row:1}
#app[data-layout=trident] .controls{grid-template-columns:repeat(3,minmax(0,1fr))}#app[data-layout=trident] [data-slot="0"]{grid-column:3;grid-row:1}#app[data-layout=trident] [data-slot="1"]{grid-column:1;grid-row:2}#app[data-layout=trident] [data-slot="2"]{grid-column:2;grid-row:2}#app[data-layout=trident] [data-slot="3"]{grid-column:3;grid-row:2}
.status-top>strong{flex:1;min-width:0;font-size:21px}.status-top>strong small{font:700 13px var(--ui);white-space:nowrap}.settings-icon{margin-left:auto}
.equipped-button #guideSummary{font:10px var(--ui);margin-left:0;white-space:nowrap}.best-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:-7px 0 14px}.best-pair>div{display:flex;justify-content:space-between;align-items:baseline;gap:5px}.best-pair small{font-size:10px;color:#746956;white-space:nowrap}.best-pair strong{font-size:12px;white-space:nowrap;font-variant-numeric:tabular-nums}
.layout-picker{display:grid;grid-template-columns:1fr 1fr;gap:8px}.layout-picker legend{margin-bottom:4px}.layout-choice{display:flex;min-height:120px;margin:0;padding:8px;gap:5px;flex-wrap:wrap;justify-content:center}.layout-choice strong{font-size:16px;width:100%;text-align:center}.layout-choice input{width:15px;height:15px}.layout-preview{width:92px;height:82px}
.layout-preview.row .d{top:51px;left:0}.layout-preview.row .r{top:51px;left:24px}.layout-preview.row .l{top:51px;left:48px}.layout-preview.row .f{top:51px;left:72px}
.layout-preview.trident .d{top:39px;right:0}.layout-preview.trident .r{bottom:0;left:0}.layout-preview.trident .l{bottom:0;left:35px}.layout-preview.trident .f{bottom:0;right:0}
.assignment-picker{margin-top:15px}.assignment-picker legend{font-size:12px;font-weight:700;margin-bottom:7px}#slotAssignments{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}#slotAssignments label{min-width:0}#slotAssignments small{font-size:10px;display:block;margin-bottom:4px}#slotAssignments select{width:100%;min-height:44px;border:1px solid var(--line);background:var(--paper);font:12px var(--ui);color:var(--ink)}.assignment-picker>small,.keyboard-settings>small{font-size:10px;color:#746956;line-height:1.6;display:block;margin-top:6px}
.keyboard-settings{margin-top:8px}.keyboard-settings summary{min-height:44px;line-height:44px;font-size:12px;cursor:pointer}#keyAssignments{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}#keyAssignments button{border:1px solid var(--line);min-height:44px}#keyAssignments span{font-size:20px;margin-right:6px}#keyAssignments kbd{font-size:12px}.settings-bottom{display:flex;justify-content:space-between;align-items:center;gap:8px}.settings-bottom button{min-height:44px;font-size:11px}.dojo-guide{display:flex;align-items:center;justify-content:space-between;border-block:1px solid var(--line);gap:8px;margin:12px 0}.dojo-guide .hint-switch{margin:0;min-height:44px}.dojo-guide>small{font-size:10px;color:var(--red)}.score-bonuses{font-size:10px;color:#746956;margin:0 0 12px}
@media(max-height:730px) and (max-width:700px){.title-menu .setting-row{margin-bottom:12px}.best-pair{margin-bottom:10px;gap:9px}.best-pair>div{gap:3px}.best-pair strong{font-size:11px}.status-top>strong{font-size:18px}.status-top>strong small{font-size:12px}.score-bonuses{font-size:9px;margin-bottom:7px}.layout-choice{min-height:112px}#app .play-screen .arena{height:230px}}

/* 漢字の色・線・配置を変えず、透明Canvasだけを上に重ねる。 */
.stroke-effects{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}

/* 読込前の見かけだけ押せる状態をなくし、完了した時だけ操作を開く。 */
#app[data-boot=loading] .title-menu button{opacity:.45;cursor:wait}
#app[data-boot=loading] #startBtn{opacity:1;font-size:20px;box-shadow:none}
#bootError p{font-size:13px;line-height:1.6;margin-bottom:8px}

/* 枠を増やさず、難易度は一行で選ぶ。 */
.difficulty-row{margin-bottom:8px}.difficulty-picker{grid-template-columns:repeat(4,minmax(0,1fr))}.difficulty-picker button{min-width:0;white-space:nowrap;font-size:14px;padding:0 4px;min-height:44px}.title-status{padding-bottom:10px}.title-menu .mode-picker{margin-bottom:8px}
@media(max-height:730px) and (max-width:700px){.title-art{height:170px}.title-menu .setting-row{margin-bottom:5px}.title-status{padding-bottom:6px}.title-menu .mode-picker{margin-bottom:4px}.difficulty-picker button{font-size:13px}}