:root{
  /* 指ごとのカラー（明るく楽しい配色） */
  --lp:#ffadad; --lr:#ffd6a5; --lm:#fdffb6; --li:#caffbf;
  --ri:#9bf6ff; --rm:#a0c4ff; --rr:#bdb2ff; --rp:#ffc6ff; --thumb:#ffffff;

  --bg1:#fff6f0; --bg2:#f0fbff;
  --primary:#ff7aa2; --primary-dark:#ff4f87; --accent:#6bd9ff;
  --ok:#22c55e; --ng:#ef4444; --text:#183153;
}

*{ box-sizing:border-box; }
body{
  margin:0; font-family:"Inter","Hiragino Kaku Gothic ProN","Noto Sans JP",system-ui,-apple-system,sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,var(--bg1),var(--bg2));
  min-height:100svh;
}

header{
  display:flex; gap:12px; align-items:center; justify-content:space-between;
  padding:16px 20px; background:linear-gradient(90deg,#ffe4ee,#e9f7ff); border-bottom:2px solid #fff;
  position:sticky; top:0; z-index:50;
}
.brand{ display:flex; align-items:center; gap:12px; }

.logo{ width:44px; height:44px; display:block; border-radius:8px; object-fit:cover; }

h1{ font-size:clamp(18px,2.6vw,26px); margin:0; }

.controls{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
select, button, .pill{
  border:none; border-radius:999px; padding:10px 14px; background:#fff; box-shadow:0 3px 10px rgba(0,0,0,.08); font-weight:600;
}
button.primary{ background:var(--primary); color:#fff; }
button.primary:hover{ background:var(--primary-dark); }
button.ghost{ background:#fff; }
button.danger{ background:#ffe3e3; color:#b00020; }

main{
  max-width:1200px; margin:20px auto; padding:0 16px 40px;
  display:grid; gap:18px; grid-template-columns:1.2fr .8fr;
}
@media (max-width:980px){ main{ grid-template-columns:1fr; } }

/* 左：ゲームエリア */
.card{ background:#fff; border-radius:18px; box-shadow:0 12px 30px rgba(0,0,0,.08); padding:16px; }
.game-top{ display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; }
.stat{ display:flex; align-items:center; gap:10px; background:#f8fbff; border-radius:12px; padding:8px 12px; }

.word-box{ text-align:center; padding:20px 12px 8px; }
.jp-word{ font-size:clamp(20px,4.6vw,32px); font-weight:800; letter-spacing:.06em; }
.romaji{ margin-top:6px; font-size:clamp(16px,3.4vw,22px); letter-spacing:.06em; color:#6b7280; }

.progress{ height:10px; background:#eef2ff; border-radius:999px; overflow:hidden; margin:10px auto 0; max-width:520px; }
.progress>span{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--accent),var(--primary)); transition:width .15s ease; }

.feedback{ height:26px; text-align:center; font-weight:700; }
.feedback.ok{ color:var(--ok); } .feedback.ng{ color:var(--ng); }

/* キーボード */
.kb-wrap{ margin-top:14px; }
.kb{ display:grid; gap:6px; justify-content:center; user-select:none; }
.kb-row{ display:flex; gap:6px; justify-content:center; }
.key{
  min-width:38px; height:44px; border-radius:10px; padding:0 8px; display:flex; align-items:center; justify-content:center;
  background:#f9fafb; border:2px solid #eef2ff; font-weight:700; color:#334155; box-shadow:0 2px 0 #e2e8f0;
}
.key.wide{ min-width:64px; } .key.space{ min-width:280px; }
.key[data-finger="lp"]{background:var(--lp);} .key[data-finger="lr"]{background:var(--lr);}
.key[data-finger="lm"]{background:var(--lm);} .key[data-finger="li"]{background:var(--li);}
.key[data-finger="ri"]{background:var(--ri);} .key[data-finger="rm"]{background:var(--rm);}
.key[data-finger="rr"]{background:var(--rr);} .key[data-finger="rp"]{background:var(--rp);}
.key[data-finger="thumb"]{background:var(--thumb);}
.key.highlight{ outline:3px solid #111827; outline-offset:-3px; }

/* 指の絵 */
.hands{ display:flex; gap:24px; justify-content:center; align-items:center; margin-top:10px; filter:drop-shadow(0 4px 10px rgba(0,0,0,.08)); }
.hand{ width:210px; height:120px; }

/* 右：マイルーム */
.room{
  position:relative; height:360px; border-radius:16px; overflow:hidden;
  border:6px solid #fff0f5;
  background-image:url('room1.png'); background-size:cover; background-position:center; background-repeat:no-repeat; background-color:#eaf6ff;
}
.room .floor-line{ display:none; }
.character{
  position:absolute; left:50%; bottom:60px; transform:translateX(-50%);
  width:120px; height:120px;
  background:none; border-radius:0; box-shadow:none;
  display:flex; align-items:center; justify-content:center;
  z-index:5;
}
/* ← ぴょこぴょこアニメは削除（静止表示） */
.char-img{ width:86%; height:86%; object-fit:contain; pointer-events:none; user-select:none; }

.character .face{ display:none; }
.eye,.smile{ display:none; }
.badge{ position:absolute; top:-12px; right:-12px; background:#ffe066; color:#111; font-weight:800; padding:6px 10px; border-radius:999px; box-shadow:0 6px 14px rgba(0,0,0,.12); }

.decor{ position:absolute; cursor:grab; z-index:10; }
.decor:active{ cursor:grabbing; }
.decor-img{ display:block; pointer-events:none; user-select:none; }

/* ← 選択枠とリサイズハンドル */
.decor.selected{ outline:3px dashed #60a5fa; outline-offset:2px; }
.resize-handle{
  position:absolute; width:12px; height:12px; border:2px solid #60a5fa;
  background:#fff; border-radius:50%; box-shadow:0 2px 8px rgba(0,0,0,.1);
  display:none; user-select:none; touch-action:none;
}
.decor.selected .resize-handle{ display:block; }
.resize-handle.nw{ left:0; top:0; transform:translate(-50%,-50%); cursor:nwse-resize; }
.resize-handle.ne{ right:0; top:0; transform:translate(50%,-50%); cursor:nesw-resize; }
.resize-handle.se{ right:0; bottom:0; transform:translate(50%,50%); cursor:nwse-resize; }
.resize-handle.sw{ left:0; bottom:0; transform:translate(-50%,50%); cursor:nesw-resize; }

.shop{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:12px; }
.item{ display:flex; gap:8px; align-items:center; background:#fff7fb; border:2px dashed #ffd2e5; padding:10px; border-radius:12px; }
.item .buy{ margin-left:auto; }
.item .thumb{ width:46px; height:46px; object-fit:contain; }

.buy:active, .buy.pressed{
  transform:translateY(1px);
  box-shadow:inset 0 3px 6px rgba(0,0,0,.18);
  filter:brightness(.97);
}

.level-wrap{ display:flex; align-items:center; gap:8px; }
.xpbar{ height:12px; background:#f1f5f9; border-radius:999px; overflow:hidden; flex:1; }
.xpbar>span{ display:block; height:100%; width:0%; background:linear-gradient(90deg,#a0e9ff,#ff9ecd); transition:width .2s ease; }

.scores{ margin-top:12px; }
.scores table{ width:100%; border-collapse:collapse; }
.scores th, .scores td{ padding:8px 10px; border-bottom:1px dashed #e5e7eb; text-align:left; font-size:14px; }
.scores th{ background:#fff0; color:#64748b; font-weight:700; }

.tip{ font-size:12px; color:#6b7280; }

.skins{ margin-top:12px; }
.skins h3{ margin:6px 0 8px; font-size:16px; }
.rooms-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.room-card{ background:#fff; border:2px solid #f3e8ff; border-radius:12px; padding:8px; display:flex; flex-direction:column; gap:8px; align-items:center; }
.room-card img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:8px; }
.room-card small{ color:#64748b; }
.room-card button{ border:none; border-radius:999px; padding:6px 10px; font-weight:700; }
.btn-primary{ background:var(--primary); color:#fff; }
.btn-ghost{ background:#fff; }
.btn-disabled{ background:#e5e7eb; color:#6b7280; cursor:not-allowed; }

.level-up-overlay{
  position:absolute; inset:0; z-index:30; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
}
.level-toast{
  background:rgba(255,255,255,.92);
  padding:12px 18px; border-radius:999px; font-weight:900;
  box-shadow:0 10px 30px rgba(0,0,0,.15);
  animation: pop 900ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes pop{
  0%{ transform:scale(.6); opacity:0 }
  60%{ transform:scale(1.1); opacity:1 }
  100%{ transform:scale(1); opacity:1 }
}
.badge.levelup{ animation:pulse 1.2s ease-out 1; }
@keyframes pulse{
  0%{ transform:scale(1); box-shadow:0 0 0 0 rgba(255,224,102,.9) }
  70%{ transform:scale(1.12); box-shadow:0 0 30px 8px rgba(255,224,102,.6) }
  100%{ transform:scale(1); box-shadow:0 0 0 0 rgba(255,224,102,0) }
}
.confetti{
  position:absolute; width:8px; height:8px; opacity:0;
  animation: confetti-fall 1.2s ease-out forwards;
}
@keyframes confetti-fall{
  0%{ transform: translate(var(--x,0px), var(--y,0px)) rotate(0deg); opacity:1 }
  100%{ transform: translate(calc(var(--x,0px) + var(--dx,0px)), calc(var(--y,0px) + var(--dy,80px))) rotate(360deg); opacity:0 }
}

.share-row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:10px; }
.share-row a.pill{ text-decoration:none; display:inline-flex; align-items:center; gap:6px; }

/* ==== スプラッシュ（起動時） ==== */
@property --angle{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
#splash{
  position:fixed; inset:0; z-index:9999;
  display:grid; place-items:center; text-align:center;
  color:#111;
  --angle:0deg;
  background:
    radial-gradient(closest-side, rgba(255,255,255,.85), rgba(255,255,255,.25)),
    conic-gradient(from var(--angle),
      #ff6b6b, #ffd166, #6ee7b7, #93c5fd, #c4b5fd, #f9a8d4, #ff6b6b);
  animation:hue-spin 8s linear infinite;
}
@keyframes hue-spin{ to{ --angle:360deg; } }
#splash .splash-logo{
  width:min(22vw,120px); height:min(22vw,120px); object-fit:contain;
  display:block; margin:0 auto 10px; border-radius:20%;
  animation: boing 1.6s ease-in-out infinite; animation-delay:.05s;
}
#splash .splash-title{
  font-weight:900; letter-spacing:.06em; font-size:clamp(28px,7vw,40px);
  text-shadow:0 3px 10px rgba(255,255,255,.6);
  animation: boing 1.6s ease-in-out infinite; animation-delay:.15s;
}
#splash .splash-sub{
  margin-top:6px; font-weight:700; opacity:.85;
  animation: boing 1.6s ease-in-out infinite; animation-delay:.25s;
}
#splash .splash-sub.small{ font-size:12px; opacity:.7; }
@keyframes boing{
  0%{transform:translateY(0) scale(1)}
  30%{transform:translateY(-8px) scale(1.04,.96)}
  55%{transform:translateY(0) scale(.98,1.02)}
  75%{transform:translateY(-4px) scale(1.02,.98)}
  100%{transform:translateY(0) scale(1)}
}
#splash.hide{ opacity:0; visibility:hidden; pointer-events:none; transition:opacity .5s ease; }

/* ==== SEO: 追補セクション ==== */
.seo-section{ max-width:1200px; margin:0 auto 40px; padding:0 16px; }
.seo-grid{ display:grid; gap:16px; grid-template-columns:1fr 1fr; }
.seo-card{ background:#fff; border-radius:16px; padding:16px; box-shadow:0 10px 24px rgba(0,0,0,.06); }
.seo-card h2{ margin:0 0 8px; font-size:clamp(18px,2.2vw,22px); }
.seo-card p{ margin:0 0 8px; line-height:1.8; }
details.faq{ border:1px dashed #e5e7eb; border-radius:12px; padding:10px 12px; background:#fafafa; }
details.faq + details.faq{ margin-top:10px; }
summary{ cursor:pointer; font-weight:800; }
@media (max-width:980px){ .seo-grid{ grid-template-columns:1fr; } }