:root{font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif;color:#30313a;background:#f7f6f2;font-synthesis:none}*{box-sizing:border-box}body{margin:0}main{width:min(100% - 36px,760px);margin:0 auto;padding:40px 0 28px;text-align:center}h1{font-size:clamp(30px,6vw,44px);letter-spacing:.1em;margin:0;font-weight:800}h1 span{color:#4b8178}.english{font-size:12px;letter-spacing:.25em;margin:6px 0 28px;color:#72736e}.rules h2{font-size:13px;letter-spacing:.12em;margin:0 0 10px}.rules p{font-size:14px;line-height:1.9;margin:0}#progress{list-style:none;display:flex;justify-content:center;gap:12px;margin:25px 0 20px;padding:0}#progress li{width:9px;height:9px;border:1px solid #a5aaa3;border-radius:50%}#progress li.current{background:#4b8178;border-color:#4b8178}#progress li.done{background:#aabeb3;border-color:#aabeb3}.puzzle{background:#fff;border:1px solid #e5e5df;border-radius:12px;padding:10px 16px 14px}#board{width:100%;height:auto;display:block;touch-action:none;user-select:none;-webkit-user-select:none;cursor:crosshair}#ink{stroke:#4b8178;stroke-width:9}#accepted{stroke:#4b8178;stroke-width:9;fill:none;stroke-linecap:round}#art{color:#30313a}#art.correct{color:#4b8178;animation:glow .7s ease-out}#reading{height:25px;margin:0 0 10px;font-size:16px;letter-spacing:.15em;color:#4b8178}.question{display:flex;align-items:baseline;justify-content:center;gap:18px}.question h2{font-size:clamp(16px,3vw,21px);font-weight:600;margin:0}#count{font-size:15px;font-variant-numeric:tabular-nums;color:#757972}#feedback{font-size:13px;min-height:20px;margin:10px 0 0;color:#777}button{font:inherit;font-size:13px;border:0;border-bottom:1px solid #b7bab1;background:transparent;color:#767a72;padding:5px 0;margin-top:24px;cursor:pointer}button:focus-visible{outline:2px solid #4b8178;outline-offset:5px}@keyframes glow{0%{filter:drop-shadow(0 0 12px #87caba);opacity:.5}100%{filter:none;opacity:1}}@media(max-width:500px){main{padding-top:26px}.puzzle{padding:6px 4px 12px}.rules p{font-size:13px}.question{gap:10px}}@media(prefers-reduced-motion:reduce){#art.correct{animation:none}}

header{margin-bottom:28px}

#art{isolation:isolate}.answer-highlight{animation:answer-highlight 1.2s ease-out forwards}@keyframes answer-highlight{0%,30%{opacity:.3}100%{opacity:0}}@media(prefers-reduced-motion:reduce){.answer-highlight{animation:none;opacity:.15}}

#reading{font-size:clamp(23px,4.5vw,30px);height:42px;line-height:1.4;font-weight:600;margin-bottom:14px}.question h2{font-size:clamp(20px,4.1vw,28px);line-height:1.5}.question{flex-wrap:wrap;gap:8px 16px}#count{font-size:19px}

/* 読みは画像下部の余白に重ね、盤面の入力領域と座標は維持する。 */
.puzzle{position:relative;padding-bottom:8px}
#reading{position:absolute;left:12px;right:12px;bottom:clamp(20px,5vw,44px);height:42px;margin:0;pointer-events:none}
.question{margin-top:22px}
#feedback{margin-top:10px}

.outside-letter{display:inline-block;width:1em;height:1em;line-height:1;letter-spacing:0;vertical-align:baseline;position:relative;color:inherit}
h1 .outside-letter{color:inherit;margin-right:.1em}
.outside-active header,.outside-active .question{touch-action:none;user-select:none;-webkit-user-select:none}
#outside-ink{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:10;overflow:visible}
.outside-correct{animation:outside-flash 1.2s ease-out}
@keyframes outside-flash{0%,35%{color:#4b8178;text-shadow:0 0 12px #87caba}100%{color:inherit;text-shadow:none}}
@media(prefers-reduced-motion:reduce){.outside-correct{animation:none;color:#4b8178}}

html,body{min-height:100%;touch-action:none}body{user-select:none;-webkit-user-select:none}button,a,input,select,textarea{touch-action:manipulation}

/* 個数の表記を維持し、視認性のみ調整 */
#count{font-size:clamp(23px,4.5vw,27px);font-weight:700;color:#30313a}

#count{color:#4b8178}