:root{color-scheme:light;font-family:system-ui,-apple-system,"Noto Sans JP",sans-serif;color:#26403d;background:#f3f1e8}*{box-sizing:border-box}body{margin:0}main{max-width:1160px;margin:auto;padding:25px 28px 35px}header{display:flex;justify-content:space-between;align-items:center;font-size:12px}a{color:#355e54;text-decoration:none}.tag,.eyebrow{font-size:10px;letter-spacing:.18em;font-weight:700;color:#718079}.intro{display:flex;justify-content:space-between;align-items:end;gap:24px;margin:28px 0 20px}.eyebrow{margin:0 0 7px}h1{font-size:32px;letter-spacing:.06em;margin:0;font-weight:700}h1 span{font-size:14px;font-weight:400}.intro>p{font-size:12px;line-height:1.9;margin:0;color:#66756c}.frame{position:relative;overflow:hidden;border:1px solid #a0b6a4;border-radius:18px;background:#142d32;box-shadow:0 18px 45px #25403918}#stage{height:clamp(330px,55vh,650px);outline-offset:-5px}canvas{display:block;max-width:100%}.scene-label,.hud{position:absolute;top:18px;color:#f4f3de;pointer-events:none;font-size:12px}.scene-label{left:22px;display:flex;align-items:center;gap:9px}.dot{width:6px;height:6px;border-radius:50%;background:#e2c386;box-shadow:0 0 12px #e2c386}.hud{right:20px;display:flex;gap:8px}.hud span{background:#102824b8;border:1px solid #dce8d332;padding:6px 12px;border-radius:30px}#status{position:absolute;bottom:12px;left:20px;color:#e0e5ce;font-size:11px;background:#142d32ae;padding:7px 12px;border-radius:6px;pointer-events:none}#error{position:absolute;inset:60px 24px;background:#142d32ed;color:#fff;padding:24px;line-height:1.8;border-radius:12px}.controls{display:flex;align-items:center;flex-wrap:wrap;gap:13px;margin-top:16px;font-size:12px}.control-group{display:flex;gap:5px;align-items:center}.control-group>span{margin-right:6px}button,select{font:inherit;font-size:12px;background:#f9f8f2;color:#38574c;border:1px solid #bac5b5;border-radius:8px;padding:8px 13px;cursor:pointer}button[aria-pressed=true]{background:#416b5a;color:white;border-color:#416b5a}button:hover{border-color:#416b5a}button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #cd974a;outline-offset:3px}label{display:flex;gap:6px;align-items:center}.touch-controls{display:flex;justify-content:center;gap:8px;margin-top:16px}.touch-controls button{min-width:46px;min-height:46px;font-size:20px;touch-action:none;user-select:none;-webkit-user-select:none;-moz-user-select:none;-webkit-touch-callout:none}.touch-controls .attack{font-size:12px;min-width:115px;background:#e4d7b9}.touch-controls button[data-held=true]{background:#416b5a;color:white}footer{font-size:11px;color:#718079;line-height:1.8;margin-top:18px}footer p{margin:5px 0}kbd{display:inline-block;min-width:20px;text-align:center;padding:1px 4px;border:1px solid #cbd1c3;border-radius:4px;background:#faf9f4;font:inherit}@media(max-width:650px){main{padding:18px 14px}.intro{display:block;margin:22px 0 15px}.intro>p{margin-top:12px;font-size:11px}h1{font-size:26px}#stage{height:54vh;min-height:320px}.scene-label{left:12px;top:14px;font-size:11px}.hud{right:10px;top:38px}.hud span{padding:4px 9px}.controls{gap:10px}.tag{font-size:8px}.touch-controls{gap:5px}.touch-controls button{padding:7px 10px}#status{left:10px;bottom:8px;right:10px;font-size:10px}}
:root .site-nav{display:flex;gap:15px;align-items:center}
#stage,#stage *{user-select:none;-webkit-user-select:none;-moz-user-select:none;-webkit-touch-callout:none}
#stage{touch-action:none}
.gesture-help{font-size:12px;line-height:1.7;color:#526b60;margin:12px 0 0}
.hud .danger{background:#6b2d26;color:#fff1ce}
.hud { display:grid; grid-template-columns:1.1fr .8fr .8fr 1.4fr; width:min(430px,calc(100% - 40px)); max-width:none; gap:8px; }
.hud > span { min-width:0; white-space:nowrap; text-align:center; padding:6px 8px; font-variant-numeric:tabular-nums; }
#health { grid-column:1; grid-row:1; }
#enemies { grid-column:2; grid-row:1; }
#weapon { grid-column:3; grid-row:1; }
#stance { grid-column:4; grid-row:1; }
#fairy { grid-column:4; grid-row:2; justify-content:center; }
@media(max-width:650px){.hud{width:calc(100% - 20px);max-width:none;gap:4px;top:40px}.hud>span{font-size:10px;padding:4px 6px}}
.dialogue { position:fixed; z-index:20; inset:50% auto auto 50%; transform:translate(-50%,-50%); width:min(32rem,calc(100% - 2rem)); padding:1.5rem; border:1px solid #a7c8b5; border-radius:1rem; background:#203c3d; color:#f1f6e9; box-shadow:0 0 0 100vmax #102b32c9; }
.dialogue[hidden] { display:none; }
.dialogue h2 { margin:0 0 1rem; font-size:1.2rem; }
.dialogue p { line-height:1.9; margin-bottom:1.5rem; }
#fairy:not([hidden]) { display:inline-flex; align-items:center; gap:5px; color:#d5ffea; }
.save-status { font-size:12px; line-height:1.7; color:#526b60; }
.save-error { color:#953e2c; }
button:disabled { opacity:.5; cursor:not-allowed; }
.dialogue button { margin:4px 8px 4px 0; }
.boss-state { position:absolute; top:102px; right:20px; margin:0; padding:6px 12px; border-radius:8px; background:#4a2f2cdb; color:#ffe8bd; font-size:12px; pointer-events:none; }
@media(max-width:650px){.boss-state{top:112px;right:10px;font-size:11px}}
header { flex-wrap:wrap; gap:10px; }
:root .site-nav { flex-shrink:0; white-space:nowrap; }
.tag { white-space:nowrap; }
.ending { position:fixed; inset:0; z-index:40; overflow:hidden; background:radial-gradient(ellipse at 50% 70%,#183d3d,#08191f 75%); color:#f5eed8; text-align:center; }
.ending[hidden], .ending [hidden] { display:none; }
.ending-roll { position:absolute; width:100%; padding:0 20px; animation:ending-roll 18s linear both; }
.ending-roll p { margin:0 0 80px; line-height:2.4; font-size:clamp(14px,2.5vw,18px); }
.ending-roll h2 { margin:0 0 100px; font-size:clamp(28px,5vw,48px); letter-spacing:.18em; }
.ending-roll .ending-kicker { color:#a7c8b5; letter-spacing:.4em; margin-bottom:28px; }
.ending-roll .ending-thanks { margin-top:110px; }
.ending-fin { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; padding:24px; outline:none; }
.ending-fin h2 { font-family:Georgia,serif; font-style:italic; font-weight:400; font-size:clamp(72px,15vw,120px); margin:0 0 14px; }
.ending-fin p { font-size:13px; margin:0; line-height:1.8; }
.ending-fin a { color:#c8ddd0; text-decoration:underline; font-size:13px; }
@keyframes ending-roll { from { transform:translateY(100vh); } to { transform:translateY(-100%); } }
@media(prefers-reduced-motion:reduce){.ending-roll{animation:none;position:relative;max-height:100vh;overflow:auto;padding:40px 20px}.ending-roll p{margin-bottom:24px}.ending-roll h2{margin-bottom:30px}.ending-roll .ending-thanks{margin-top:30px}}