:root { color-scheme: dark; --bg:#111318; --panel:#1b1e26; --panel-2:#242832; --ink:#f5f2e9; --muted:#9da3b3; --accent:#f4c95d; --accent-2:#75d6b1; --line:#353b48; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:radial-gradient(circle at 50% -10%,#2c3140 0,#111318 48%); font-family:Inter,"Noto Sans JP",sans-serif; }
button,input { font:inherit; }
.game-shell { width:min(100% - 32px,760px); margin:auto; padding:34px 0 50px; }
.site-header,.game-topline,.stats { display:flex; align-items:center; justify-content:space-between; }
.site-header { margin-bottom:22px; }
h1 { margin:0; font-size:clamp(1.7rem,5vw,2.6rem); letter-spacing:.08em; }
button { cursor:pointer; }
.game-panel { padding:20px; background:rgba(27,30,38,.92); border:1px solid var(--line); border-radius:24px; box-shadow:0 24px 70px #0005; }
.game-topline { color:var(--muted); font-size:.72rem; font-weight:800; letter-spacing:.14em; }
.game-topline p { margin:0; }
.stats { gap:18px; }
.stats b { margin-left:4px; color:var(--ink); font-variant-numeric:tabular-nums; }
.mine-area { width:min(100%,500px); margin:22px auto 0; }
.pixel-art { position:relative; aspect-ratio:1; overflow:hidden; background:#171a20; border:8px solid #0b0c10; }
#kanji-canvas { display:block; width:100%; height:100%; }
.pixel-cover { position:absolute; inset:0; display:grid; grid-template-columns:repeat(30,1fr); grid-template-rows:repeat(30,1fr); }
.pixel { position:relative; z-index:0; background:#303541; border:1px solid #454b58; }
.pixel.revealing { z-index:10; animation:block-impact .72s ease-out forwards; }
.pixel.uncovered { background:transparent; border-color:transparent; }
.falling-fragment { position:absolute; z-index:20; width:1.6667%; height:1.6667%; background:#69758a; border:1px solid #929caf; box-shadow:0 3px 4px #0009; opacity:1; pointer-events:none; }
.falling-fragment.falling { animation:falling-fragment 1.1s cubic-bezier(.2,.75,.3,1) forwards; }
.pickaxe { position:absolute; z-index:30; color:#f5f2e9; font-family:"Segoe UI Emoji","Segoe UI Symbol",sans-serif; font-size:clamp(18px,4vw,30px); line-height:1; opacity:0; transform-origin:78% 82%; filter:drop-shadow(2px 3px 2px #000b); pointer-events:none; }
.pickaxe.swing { animation:pickaxe-swing .72s cubic-bezier(.2,.8,.25,1) forwards; }
@keyframes block-impact { 0%,48% { transform:translate(0,0) scale(1); } 58% { transform:translate(0,2%) scale(.9,.84); } 66% { transform:translate(0,-1%) scale(1.04); } 76% { transform:translate(0,0) scale(.98); } 100% { transform:translate(0,0) scale(1); } }
@keyframes falling-fragment { 0% { opacity:1; transform:translate(0,0) rotate(0) scale(1); } 12% { opacity:1; transform:translate(0,-18%) rotate(8deg) scale(1.05); } 100% { opacity:0; transform:translate(var(--dx),var(--dy)) rotate(var(--rotation)) scale(.35); } }
@keyframes pickaxe-swing { 0% { opacity:0; transform:translate(24%,-12%) rotate(54deg); } 12% { opacity:1; transform:translate(30%,-20%) rotate(64deg); } 38% { opacity:1; transform:translate(38%,-78%) rotate(82deg); } 48% { opacity:1; transform:translate(34%,-74%) rotate(78deg); } 64% { opacity:1; transform:translate(-8%,18%) rotate(-28deg) scale(1.08); } 72% { opacity:1; transform:translate(-13%,25%) rotate(-36deg) scale(.96); } 100% { opacity:0; transform:translate(-16%,29%) rotate(-42deg) scale(.9); } }
.progress { margin:10px 0 0; color:var(--muted); font-size:.72rem; text-align:right; letter-spacing:.12em; }
.typing-area { margin-top:25px; padding:18px; background:var(--panel-2); border-radius:16px; }
.instruction { margin:0 0 10px; color:var(--muted); font-size:.82rem; }
.typing-text { min-height:2.8em; margin:0 0 13px; color:var(--ink); font-size:1.05rem; line-height:1.7; text-align:center; }
.typing-meaning { margin:0 0 5px; color:var(--ink); font-size:1rem; font-weight:700; text-align:center; }
.typing-text .typed { color:var(--accent-2); }
.typing-text .current { border-bottom:2px solid var(--accent); background:rgba(244,201,93,.08); }
.typing-text span { display:inline-block; }
.typing-input { width:100%; padding:12px 14px; color:var(--ink); background:#111318; border:1px solid var(--line); border-radius:10px; outline:none; }
.typing-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px #f4c95d22; }
.message { min-height:1.4em; margin:9px 0 0; color:var(--muted); font-size:.78rem; }
.guess-area { margin-top:20px; padding-top:18px; border-top:1px solid var(--line); }
.guess-label { margin:0 0 9px; color:var(--muted); font-size:.82rem; }
/* PCは入力式、タッチ端末は選択式。 */
.guess-row { display:flex; align-items:center; gap:9px; }
.guess-row input { flex:1; width:100%; padding:12px 14px; color:var(--ink); background:#111318; border:1px solid var(--line); border-radius:10px; outline:none; }
.guess-row input:focus { border-color:var(--accent); box-shadow:0 0 0 3px #f4c95d22; }
.primary-button { padding:11px 18px; color:#171718; background:var(--accent); border:0; border-radius:10px; font-weight:800; white-space:nowrap; }
.primary-button:hover:not(:disabled) { background:#ffdb7d; }
body.touch-mode .guess-row { display:none; }
.answer-grid { display:none; grid-template-columns:repeat(4,1fr); gap:8px; }
body.touch-mode .answer-grid { display:grid; }
.answer-button { padding:12px 0; color:var(--ink); background:var(--panel); border:1px solid var(--line); border-radius:12px; font-size:1.35rem; font-weight:800; }
.answer-button:hover:not(:disabled) { border-color:var(--accent); color:var(--accent); }
.answer-button.wrong { border-color:#e96758; color:#e96758; }
/* スマホ（タッチ端末）は かな のタップ入力。OSキーボードを出さないので絵が隠れない。 */
.choice-grid { display:none; }
body.touch-mode .choice-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:12px; }
body.touch-mode .typing-input { display:none; }
.choice-button { min-height:58px; padding:14px 0; color:var(--ink); background:#111318; border:1px solid var(--line); border-radius:12px; font-size:1.5rem; font-weight:700; }
.choice-button:active { background:#252b37; border-color:var(--accent); }
.choice-button.wrong,.answer-button.wrong { animation:shake .38s ease-in-out; }
@keyframes shake { 0%,100% { transform:translateX(0); } 25% { transform:translateX(-5px); } 75% { transform:translateX(5px); } }
.pixel.refilling { animation:refill .5s ease-out; }
@keyframes refill { 0% { opacity:.15; transform:scale(1.4); } 100% { opacity:1; transform:scale(1); } }
.success { color:var(--accent-2); }
.warning { color:var(--accent); }
button:disabled,input:disabled { cursor:default; opacity:.55; }
@media (max-width:560px) { .game-shell { width:min(100% - 20px,760px); padding-top:22px; } .game-panel { padding:14px; border-radius:18px; } .typing-area { padding:14px; } .answer-grid { gap:6px; } .answer-button { font-size:1.2rem; } }
/* タッチ端末では、絵・文章・選択肢が1画面に収まるよう詰める。 */
body.touch-mode .site-header { margin-bottom:12px; }
body.touch-mode h1 { font-size:1.4rem; }
body.touch-mode .mine-area { width:min(100%,340px); margin-top:12px; }
body.touch-mode .instruction { display:none; }
body.touch-mode .typing-area { margin-top:14px; padding:12px; }
body.touch-mode .typing-meaning { margin-bottom:3px; font-size:.92rem; }
body.touch-mode .typing-text { min-height:2.2em; margin-bottom:8px; font-size:1.1rem; line-height:1.5; }
body.touch-mode .choice-grid { gap:8px; margin-top:8px; }
body.touch-mode .choice-button { min-height:52px; padding:10px 0; }
body.touch-mode .message { margin-top:6px; }
body.touch-mode .guess-area { margin-top:12px; padding-top:10px; }
body.touch-mode .guess-label { margin-bottom:6px; font-size:.76rem; }
body.touch-mode .progress { margin-top:6px; }
/* 画面の短い端末では、絵と選択肢が同時に見えるように絵を小さくする。 */
@media (max-height:700px) { body.touch-mode .mine-area { width:min(100%,260px); } body.touch-mode .choice-button { min-height:46px; font-size:1.3rem; } }