:root{
  --pink:#ff5a4d; --blue:#2f8bff; --ink:#3a2a1e; --sub:#7a6450;
  --bg1:#f3f8e4; --bg2:#fffdf6; --card:#ffffffea; --line:#e6d9b8;
  --cheekL:#ff5a4d; --cheekR:#2f8bff;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--ink);
  font-family:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Meiryo",sans-serif;
  font-size:16px; line-height:1.85; overflow-x:hidden;
  background:
    radial-gradient(circle at 12% 8%, #ffe0cf 0, transparent 30%),
    radial-gradient(circle at 90% 4%, #d9f0c4 0, transparent 32%),
    linear-gradient(180deg,var(--bg1),var(--bg2) 60%);
  background-attachment:fixed;
}
/* 舞い上がる土ぼこりっぽい粒（CSSのみ） */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.55;
  background-image:
    radial-gradient(circle,#fff 2px,transparent 3px),
    radial-gradient(circle,#fff 3px,transparent 4px),
    radial-gradient(circle,#f3e2b8 2px,transparent 3px);
  background-size:130px 130px,210px 210px,170px 170px;
  background-position:0 0,60px 90px,110px 30px;
  animation:dust 50s linear infinite;
}
@keyframes dust{to{background-position:400px 0,460px 90px,510px 30px}}
@media (prefers-reduced-motion:reduce){body::before{animation:none}}

.wrap{position:relative; z-index:1; max-width:860px; margin:0 auto; padding:0 16px 32px}
.site-header{padding:20px 0 8px; text-align:center}
.back{display:inline-block; font-weight:700; color:var(--blue); text-decoration:none; font-size:14px;
  background:#fff; border:2px solid var(--line); border-radius:999px; padding:4px 14px}
.back:hover{border-color:var(--blue)}
.site-title{margin:10px 0 0; font-family:"Dela Gothic One",sans-serif; font-weight:400;
  font-size:clamp(24px,7vw,44px); line-height:1.25; letter-spacing:.02em; color:var(--pink);
  text-shadow:3px 3px 0 #fff, 5px 5px 0 #ffb84a}
.site-title a{color:inherit; text-decoration:none}
h1.page-title{font-family:"Dela Gothic One",sans-serif; font-weight:400; font-size:clamp(22px,6vw,32px);
  text-align:center; margin:8px 0 20px}

section.card{background:var(--card); border:2px solid var(--line); border-radius:20px;
  padding:16px 18px; margin:0 0 18px; box-shadow:0 4px 0 #ecdfc0}
h2{font-family:"Dela Gothic One",sans-serif; font-weight:400; font-size:20px; line-height:1.4;
  margin:0 0 10px; padding-left:14px; position:relative}
h2::before{content:""; position:absolute; left:0; top:.25em; bottom:.25em; width:6px; border-radius:6px;
  background:linear-gradient(var(--pink),#ffb84a)}
h3{font-size:17px; margin:16px 0 4px; font-weight:800}
p{margin:.4em 0 .8em} ul,ol{padding-left:1.4em; margin:.4em 0 .8em} li{margin:.2em 0}
a{color:#1a6fd0; overflow-wrap:anywhere}
code,kbd{font-family:Consolas,monospace}
kbd{background:#fff; border:2px solid var(--line); border-bottom-width:3px; border-radius:6px; padding:0 6px; font-size:.9em}
.note{background:#fff3cc; border-radius:12px; padding:8px 12px; font-size:15px}
.pink{color:var(--pink); font-weight:800} .blue{color:#1a6fd0; font-weight:800}
.updated{text-align:center; color:var(--sub); margin-top:-10px}

.tbl-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
table{border-collapse:collapse; width:100%; min-width:420px; font-size:15px; line-height:1.6}
th,td{border:1px solid var(--line); padding:6px 10px; text-align:left; vertical-align:top}
th{background:#f7efd8; white-space:nowrap}

/* ステージ・要素カード（siblingの .weapons と同じ作り） */
.weapons{display:grid; grid-template-columns:1fr; gap:12px}
@media (min-width:640px){.weapons{grid-template-columns:1fr 1fr}}
.weapons.three{grid-template-columns:1fr}
@media (min-width:760px){.weapons.three{grid-template-columns:1fr 1fr 1fr}}
.weapon{border:2px solid var(--line); border-radius:16px; padding:10px 14px; background:#fff}
.weapon h3{margin-top:0; color:var(--pink); font-family:"Dela Gothic One",sans-serif; font-weight:400}
.weapon:nth-child(even) h3{color:#1a6fd0}
.weapon dl{margin:6px 0 0; display:grid; grid-template-columns:auto 1fr; gap:2px 12px; font-size:14.5px; line-height:1.6}
.weapon dt{color:var(--sub)} .weapon dd{margin:0}

/* 操作の図（HTML/CSSのみ） */
.controls{display:grid; grid-template-columns:1fr; gap:12px; margin:10px 0}
@media (min-width:700px){.controls{grid-template-columns:repeat(3,1fr)}}
.ctl{border:2px solid var(--line); border-radius:16px; padding:10px 12px 12px; background:#fff; text-align:center}
.ctl h3{margin:0 0 8px; font-size:15px; color:var(--sub)}
.ctl .cap{font-size:13.5px; line-height:1.55; margin:8px 0 0; text-align:left}
.cheek-l{color:var(--cheekL); font-weight:800} .cheek-r{color:#1a6fd0; font-weight:800}

/* マウス */
.mouse{position:relative; width:96px; height:132px; margin:0 auto; border:3px solid var(--ink);
  border-radius:48px 48px 44px 44px; background:#fff; overflow:hidden; display:flex}
.mouse .mb{flex:1; display:flex; align-items:flex-start; justify-content:center; padding-top:16px;
  font-weight:800; font-size:13px; color:#fff; line-height:1.2; height:62px}
.mouse .ml{background:var(--cheekL); border-right:2px solid var(--ink)}
.mouse .mr{background:var(--cheekR)}
.mouse::after{content:""; position:absolute; left:0; right:0; top:62px; height:3px; background:var(--ink)}
.mouse .wheel{position:absolute; left:50%; top:14px; width:10px; height:24px; margin-left:-5px;
  border-radius:6px; background:#fff; border:2px solid var(--ink); z-index:2}

/* キーボード */
.keys{display:flex; flex-direction:column; gap:6px; align-items:center}
.keyrow{display:flex; gap:6px; align-items:center; justify-content:center; flex-wrap:wrap}
.key{min-width:44px; height:44px; padding:0 8px; display:inline-flex; align-items:center; justify-content:center;
  border:2px solid var(--ink); border-bottom-width:5px; border-radius:10px; background:#fff;
  font-family:Consolas,monospace; font-weight:700; font-size:16px}
.key.l{background:var(--cheekL); color:#fff} .key.r{background:var(--cheekR); color:#fff}
.key.space{min-width:150px; background:#ffe39a}
.keylabel{font-size:12.5px; line-height:1.4; color:var(--sub); font-weight:700}

/* タッチ（画面の左右半分） */
.touch{width:180px; height:104px; margin:0 auto; border:3px solid var(--ink); border-radius:14px;
  display:flex; overflow:hidden; background:#fff}
.touch span{flex:1; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; color:#fff; line-height:1.3}
.touch .tl{background:var(--cheekL); border-right:2px dashed #fff} .touch .tr{background:var(--cheekR)}

/* お尻を後ろから見た図 */
.rear{display:flex; justify-content:center; align-items:flex-end; gap:0; margin:6px auto 0}
.rear .cheek{width:82px; height:74px; background:#c98a5a; border:3px solid var(--ink);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; color:#fff}
.rear .cheek.l{border-radius:80px 12px 44px 44px; background:var(--cheekL)}
.rear .cheek.r{border-radius:12px 80px 44px 44px; background:var(--cheekR); border-left-width:0}
.rear .cheek.l{border-right-width:3px}

/* 怒りゲージ */
.gauge{height:20px; border:3px solid var(--ink); border-radius:999px; background:#fff; overflow:hidden; margin:6px 0 4px}
.gauge i{display:block; height:100%; width:100%; background:linear-gradient(90deg,#ffd44a,#ff8a3d,#ff3d2e)}
.gauge-cap{display:flex; justify-content:space-between; font-size:12.5px; color:var(--sub); font-weight:700}

pre.license{background:#faf5e6; border:1px solid var(--line); border-radius:12px; padding:10px 12px;
  font-size:13px; line-height:1.6; white-space:pre-wrap; overflow-wrap:anywhere; font-family:Consolas,monospace}

.site-footer{position:relative; z-index:1; text-align:center; padding:16px 16px 36px; font-size:14px; color:var(--sub)}
.site-footer nav{display:flex; flex-wrap:wrap; justify-content:center; gap:8px 18px; margin-bottom:6px}
.site-footer a{font-weight:700; text-decoration:none}
.site-footer a[aria-current="page"]{color:var(--pink)}