* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; -webkit-user-select:none; user-select:none; }
body { font-family:'Hiragino Maru Gothic ProN','BIZ UDPGothic',sans-serif; background:#fff7e6; color:#4a3b2a;
  width:100vw; height:100vh; overflow:hidden; }
.screen { position:fixed; inset:0; display:none; flex-direction:column; overflow-y:auto; }
.screen.active { display:flex; animation:screenIn .38s cubic-bezier(.22,1,.36,1); }
@keyframes screenIn {
  from { opacity:0; transform:translateY(26px) scale(.985); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}

/* ボタン */
.btn-big { padding:16px 48px; font-size:clamp(1.2rem,4vw,1.7rem); border:none; border-radius:50px;
  background:linear-gradient(135deg,#ffb03a,#ff7e5f); color:#fff; font-weight:bold; cursor:pointer;
  box-shadow:0 6px 0 #d95f3f; transition:transform .08s, box-shadow .08s; }
.btn-big:active { transform:translateY(4px); box-shadow:0 2px 0 #d95f3f; }
.chip-btn { padding:10px 18px; border:none; border-radius:40px; background:#fff; color:#e0722f; font-weight:bold;
  font-size:clamp(.85rem,2.5vw,1.05rem); box-shadow:0 3px 0 #f0c48a; cursor:pointer; }
.chip-btn:active { transform:translateY(2px); box-shadow:0 1px 0 #f0c48a; }
.back-btn { padding:8px 18px; border:none; border-radius:40px; background:#fff; color:#7a6a55; font-weight:bold;
  box-shadow:0 3px 0 #e5d3b3; cursor:pointer; font-size:1rem; }

/* ===== 相方えらび ===== */
#screen-pick { background:linear-gradient(160deg,#ffe0a3,#ffd6e8); align-items:center; justify-content:center; }
.pick-box { text-align:center; padding:24px; max-width:900px; }
.pick-box h1 { font-size:clamp(1.6rem,5vw,2.6rem); color:#e0722f; margin-bottom:6px; }
.pick-sub { color:#a2795a; margin-bottom:22px; font-size:clamp(.95rem,3vw,1.2rem); }
#pick-list { display:flex; flex-wrap:wrap; gap:16px; justify-content:center; }
.pick-card { width:130px; background:#fff; border-radius:20px; padding:12px; box-shadow:0 6px 14px rgba(0,0,0,.12);
  cursor:pointer; transition:transform .12s; border:4px solid transparent; }
.pick-card:active { transform:scale(.94); }
.pick-card:hover { border-color:#ffb03a; }
.pick-card img { width:100%; height:110px; object-fit:contain; }
.pick-card span { display:block; margin-top:6px; font-weight:bold; font-size:.95rem; }

/* ===== ホーム（ふしぎのしまマップ）===== */
#screen-home { background:#3ba8d8; padding:0; overflow:hidden; }
#home-top { padding:12px 14px; position:relative; z-index:20; }
#island-map { position:relative; flex:1; overflow:hidden; }
#sea-bg { position:absolute; inset:0; width:100%; height:100%; }
#sea-bg .waves { animation:waveDrift 9s linear infinite; }
@keyframes waveDrift { 0%{transform:translateX(0);} 50%{transform:translateX(3px);} 100%{transform:translateX(0);} }

/* 島 */
.island { position:absolute; width:clamp(120px,15vw,180px); transform:translate(-50%,-50%);
  cursor:pointer; text-align:center; animation:islandIn .5s backwards; transition:transform .15s; }
.island:hover { transform:translate(-50%,-50%) scale(1.06); }
.island:active { transform:translate(-50%,-50%) scale(.95); }
.island svg { width:100%; display:block; }
.is-teacher { position:absolute; left:14%; top:-38%; width:44%; height:70%; object-fit:contain;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.25)); animation:idleBob 2.4s ease-in-out infinite; }
.is-emoji { position:absolute; right:12%; top:-24%; font-size:clamp(1.4rem,2.6vw,2rem);
  background:#fff; border-radius:50%; width:1.9em; height:1.9em; display:flex; align-items:center; justify-content:center;
  box-shadow:0 3px 8px rgba(0,0,0,.2); }
.is-label { position:absolute; left:50%; bottom:14%; transform:translateX(-50%);
  background:rgba(255,255,255,.95); border-radius:20px; padding:2px 14px;
  font-weight:bold; font-size:clamp(.8rem,1.6vw,1.05rem); color:#4a3b2a; white-space:nowrap;
  box-shadow:0 2px 6px rgba(0,0,0,.15); }
.is-prog { position:absolute; left:50%; bottom:-8%; transform:translateX(-50%);
  font-size:.75rem; font-weight:bold; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.4); }
@keyframes islandIn { from{opacity:0; transform:translate(-50%,-30%) scale(.6);} to{opacity:1; transform:translate(-50%,-50%) scale(1);} }

/* 相方のふね */
#buddy-boat { position:absolute; left:44%; top:42%; width:clamp(100px,12vw,150px);
  transform:translate(-50%,-50%); animation:boatRock 3.2s ease-in-out infinite; z-index:10; pointer-events:none; }
#buddy-boat svg { width:100%; display:block; }
#boat-buddy { position:absolute; left:50%; bottom:52%; transform:translateX(-50%); width:62%;
  object-fit:contain; filter:drop-shadow(0 3px 4px rgba(0,0,0,.25)); }
@keyframes boatRock { 0%,100%{transform:translate(-50%,-50%) rotate(-2.5deg);} 50%{transform:translate(-50%,-52%) rotate(2.5deg);} }
#buddy-speech { position:absolute; left:50%; bottom:105%; transform:translateX(-50%);
  background:#fff; border-radius:14px; padding:8px 14px; font-size:clamp(.8rem,1.8vw,1rem);
  font-weight:bold; color:#4a3b2a; white-space:nowrap; box-shadow:0 3px 10px rgba(0,0,0,.15); }
#buddy-speech::after { content:""; position:absolute; bottom:-8px; left:50%; transform:translateX(-50%);
  border:8px solid transparent; border-top-color:#fff; border-bottom:0; }

/* キャラの動き */
@keyframes idleBob { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-6%);} }
#buddy-img { animation:idleBob 2.2s ease-in-out infinite; }
#play-teacher { transition:transform .2s; }
#play-teacher.cheer { animation:cheerJump .55s; }
@keyframes cheerJump {
  0%{transform:translateY(0) rotate(0);} 30%{transform:translateY(-16px) rotate(-8deg);}
  55%{transform:translateY(0) rotate(6deg);} 75%{transform:translateY(-7px) rotate(0);} 100%{transform:translateY(0);}
}
#br-buddy { animation:idleBob 2.6s ease-in-out infinite; }
#map-teacher { width:52px; height:52px; object-fit:contain; margin-left:auto; animation:idleBob 2.4s ease-in-out infinite; }

/* 旧カード（未使用でも他画面に影響しないよう残置） */
#home-top { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
#buddy-corner { display:flex; align-items:center; gap:10px; background:#fff; border-radius:50px; padding:6px 18px 6px 6px;
  box-shadow:0 4px 10px rgba(0,0,0,.1); margin-right:auto; }
#buddy-img { width:56px; height:56px; object-fit:contain; border-radius:50%; background:#fff3dc; }
#buddy-info { display:flex; flex-direction:column; }
#buddy-name { font-weight:bold; }
#buddy-level { font-size:.8rem; color:#e0722f; }
#buddy-speech { margin:14px auto 6px; max-width:640px; background:#fff; border-radius:18px; padding:14px 20px;
  position:relative; box-shadow:0 4px 10px rgba(0,0,0,.08); font-size:clamp(1rem,3vw,1.3rem); font-weight:bold; text-align:center; }
#buddy-speech::after { content:""; position:absolute; top:-10px; left:40px; border:10px solid transparent; border-bottom-color:#fff; }
.home-title { text-align:center; margin:14px 0 12px; color:#e0722f; font-size:clamp(1.2rem,4vw,1.7rem); }
#subject-list { display:flex; flex-wrap:wrap; gap:18px; justify-content:center; padding:6px 10px 30px; }
.subject-card { width:200px; background:#fff; border-radius:24px; padding:18px; text-align:center;
  box-shadow:0 8px 0 var(--sc-shadow,#f0c48a); cursor:pointer; transition:transform .1s, box-shadow .1s; }
.subject-card:active { transform:translateY(5px); box-shadow:0 3px 0 var(--sc-shadow,#f0c48a); }
.subject-card .sc-emoji { font-size:3rem; }
.subject-card .sc-title { font-size:1.4rem; font-weight:bold; margin-top:6px; }
.subject-card .sc-teacher { width:64px; height:64px; object-fit:contain; margin-top:6px; }
.subject-card .sc-prog { font-size:.85rem; color:#a2795a; margin-top:4px; }

/* ===== ステージ選択 ===== */
.map-top { display:flex; align-items:center; gap:14px; padding:14px; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.06); }
.map-top h2 { color:#e0722f; font-size:clamp(1.2rem,4vw,1.7rem); }
#screen-map { background:linear-gradient(160deg,#8fce6a,#5cb85c); }
#screen-map .map-top { background:rgba(255,255,255,.92); }

/* すごろく道 */
#stage-road { position:relative; flex:1; min-height:340px; }
#road-svg { position:absolute; inset:0; width:100%; height:100%; }
.stage-node { position:absolute; transform:translate(-50%,-50%); text-align:center; cursor:pointer;
  animation:nodeIn .45s backwards; transition:transform .12s; z-index:5; }
.stage-node:hover { transform:translate(-50%,-50%) scale(1.08); }
.stage-node:active { transform:translate(-50%,-50%) scale(.92); }
.sn-circle { width:clamp(58px,7vw,76px); height:clamp(58px,7vw,76px); border-radius:50%;
  background:#fff; border:5px solid #f2a93b; display:flex; align-items:center; justify-content:center;
  font-size:clamp(1.4rem,3vw,1.9rem); font-weight:bold; color:#e0722f; margin:0 auto;
  box-shadow:0 5px 0 #c9862a, 0 8px 16px rgba(0,0,0,.2); }
.stage-node.cleared .sn-circle { background:#fff6d8; border-color:#ffd200; box-shadow:0 5px 0 #d9ae00, 0 8px 16px rgba(0,0,0,.2); }
.sn-title { margin-top:6px; background:rgba(255,255,255,.95); border-radius:14px; padding:3px 12px;
  font-size:clamp(.72rem,1.5vw,.92rem); font-weight:bold; color:#4a3b2a; white-space:nowrap;
  box-shadow:0 2px 5px rgba(0,0,0,.12); }
.sn-stars { margin-top:2px; font-size:.85rem; min-height:1.1em; text-shadow:0 1px 2px rgba(0,0,0,.2); }
@keyframes nodeIn { from{opacity:0; transform:translate(-50%,-20%) scale(.5);} to{opacity:1; transform:translate(-50%,-50%) scale(1);} }

/* 旧スタイル（未使用） */
#stage-list { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; padding:22px; }
.stage-card { width:150px; background:#fff; border-radius:20px; padding:16px; text-align:center;
  box-shadow:0 6px 0 #f0c48a; cursor:pointer; transition:transform .1s, box-shadow .1s; }
.stage-card:active { transform:translateY(4px); box-shadow:0 2px 0 #f0c48a; }
.stage-card .st-num { font-size:1.6rem; font-weight:bold; color:#ffb03a; }
.stage-card .st-title { font-size:1.05rem; font-weight:bold; margin:4px 0; }
.stage-card .st-stars { font-size:1rem; letter-spacing:2px; }
.stage-card.cleared { background:#fff9ec; border:2px solid #ffd94a; }

/* ===== プレイ ===== */
#screen-play { background:linear-gradient(160deg,#eaf6ff,#f3ecff); }
.play-top { display:flex; align-items:center; gap:12px; padding:12px; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.06); }
#play-progress { flex:1; font-size:1.1rem; font-weight:bold; color:#5a8ac0; text-align:center; }
#play-teacher { width:52px; height:52px; object-fit:contain; }
#play-area { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px; padding:20px; }
#play-speech { text-align:center; min-height:2em; font-size:1.3rem; font-weight:bold; color:#e0722f; padding:10px; }

/* 問題文 */
.q-prompt { font-size:clamp(1.3rem,4.5vw,2rem); font-weight:bold; text-align:center; color:#3a5a7a; }
.q-big-char { font-size:clamp(5rem,22vw,10rem); font-weight:bold; color:#3a5a7a; line-height:1;
  background:#fff; border-radius:24px; padding:10px 40px; box-shadow:0 6px 16px rgba(0,0,0,.12); }
/* 選択肢 */
.choices { display:flex; flex-wrap:wrap; gap:16px; justify-content:center; }
.choice { min-width:110px; min-height:110px; padding:16px 24px; background:#fff; border-radius:20px;
  font-size:clamp(2rem,8vw,3.5rem); font-weight:bold; cursor:pointer; box-shadow:0 6px 0 #cdd8e6;
  display:flex; align-items:center; justify-content:center; transition:transform .1s, box-shadow .1s; border:4px solid transparent; }
.choice:active { transform:translateY(4px); box-shadow:0 2px 0 #cdd8e6; }
.choice.correct { border-color:#4ade80; background:#eaffef; animation:pop .3s; }
.choice.wrong { border-color:#ff8a8a; animation:shake .35s; }
.choice svg { width:80px; height:80px; }
@keyframes pop { 0%{transform:scale(1);}50%{transform:scale(1.15);}100%{transform:scale(1);} }
@keyframes shake { 0%,100%{transform:translateX(0);}25%{transform:translateX(-7px);}75%{transform:translateX(7px);} }

/* かぞえる用のアイコン並べ */
.count-field { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; max-width:560px; background:#fff;
  border-radius:20px; padding:18px; box-shadow:0 6px 16px rgba(0,0,0,.1); }
.count-field svg { width:64px; height:64px; }
.eq-row { display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:center; }
.eq-group { display:flex; gap:6px; background:#fff; border-radius:16px; padding:12px; box-shadow:0 4px 12px rgba(0,0,0,.1); }
.eq-group svg { width:48px; height:48px; }
.eq-op { font-size:2.6rem; font-weight:bold; color:#5a8ac0; }

/* なぞり書き canvas */
.trace-wrap { position:relative; background:#fff; border-radius:24px; box-shadow:0 6px 16px rgba(0,0,0,.12); touch-action:none; }
#trace-canvas { display:block; border-radius:24px; }
.trace-actions { display:flex; gap:14px; margin-top:14px; justify-content:center; }
.trace-btn { padding:12px 28px; border:none; border-radius:40px; font-size:1.1rem; font-weight:bold; cursor:pointer;
  box-shadow:0 4px 0 rgba(0,0,0,.15); }
.trace-clear { background:#fff; color:#7a6a55; box-shadow:0 4px 0 #e5d3b3; }
.trace-done { background:linear-gradient(135deg,#ffb03a,#ff7e5f); color:#fff; box-shadow:0 4px 0 #d95f3f; }

/* 単語なぞり */
.word-row { display:flex; gap:8px; justify-content:center; }
.word-char { width:56px; height:56px; display:flex; align-items:center; justify-content:center;
  font-size:2rem; font-weight:bold; background:#fff; border-radius:12px; color:#c7d2e0;
  box-shadow:0 3px 8px rgba(0,0,0,.08); border:3px solid transparent; }
.word-char.now { color:#3a5a7a; border-color:#ffb03a; animation:pop .4s; }
.word-char.done { color:#4ade80; background:#eaffef; }
/* 完成ポップアップ */
.word-popup { position:fixed; inset:0; z-index:900; background:rgba(255,244,214,.94);
  display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .3s; }
.word-popup.show { opacity:1; }
.wp-inner { text-align:center; animation:wpJump .6s; }
.wp-inner img { width:200px; height:200px; object-fit:contain; }
.wp-icon svg { width:180px; height:180px; }
.wp-bubble { margin-top:10px; background:#fff; border-radius:20px; padding:14px 26px;
  font-size:1.4rem; font-weight:bold; color:#e0722f; box-shadow:0 6px 16px rgba(0,0,0,.12); }
@keyframes wpJump { 0%{transform:scale(.3) translateY(80px);opacity:0;} 60%{transform:scale(1.15);} 100%{transform:scale(1);opacity:1;} }

/* じゅんばん */
.seq-row { background:#fff; border-radius:20px; padding:14px 18px; box-shadow:0 5px 14px rgba(0,0,0,.1); }
.seq-item { width:58px; height:58px; display:flex; align-items:center; justify-content:center; }
.seq-item svg { width:100%; height:100%; }
.seq-q { font-size:2.4rem; font-weight:bold; color:#ffb03a; background:#fff7e6; border-radius:12px; border:3px dashed #ffb03a; }

/* あたまのおと */
.head-icon { background:#fff; border-radius:24px; padding:16px; box-shadow:0 6px 16px rgba(0,0,0,.12); }
.head-icon svg { width:130px; height:130px; }

/* あなうめの？ */
.hole-q { border:4px dashed #ffb03a; color:#ffb03a; }

/* ===== ごほうび ===== */
#screen-reward { background:radial-gradient(circle at 50% 35%,#fff0b8,#ffd9b0); align-items:center; justify-content:center; }
.reward-box { text-align:center; padding:30px; animation:fadeUp .5s; display:flex; flex-direction:column; align-items:center; gap:12px; }
#reward-stars { font-size:3rem; letter-spacing:6px; }
#reward-title { font-size:clamp(2rem,6vw,3rem); color:#e0722f; }
#reward-sticker { width:150px; height:150px; background:#fff; border-radius:24px; box-shadow:0 8px 20px rgba(0,0,0,.15);
  display:flex; align-items:center; justify-content:center; animation:stampIn .5s .2s backwards; }
#reward-sticker img { width:82%; height:82%; object-fit:contain; }
#reward-comment { font-size:1.3rem; font-weight:bold; color:#a2795a; }
@keyframes stampIn { 0%{transform:scale(2) rotate(-20deg);opacity:0;}100%{transform:scale(1) rotate(0);opacity:1;} }

/* ===== シールちょう ===== */
#screen-stickers { background:#fff7e6; }
#sticker-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:14px; padding:20px; }
.sticker-slot { aspect-ratio:1; background:#fff; border-radius:20px; box-shadow:inset 0 0 0 3px #f0e0c0;
  display:flex; align-items:center; justify-content:center; }
.sticker-slot.got { box-shadow:0 5px 12px rgba(0,0,0,.12); }
.sticker-slot.got img { width:84%; height:84%; object-fit:contain; animation:pop .4s; }
.sticker-slot .locked { font-size:2rem; opacity:.3; }

/* ===== プロフィール選択 ===== */
#screen-profiles { background:linear-gradient(160deg,#ffe0a3,#ffd6e8); align-items:center; justify-content:center; }
#profile-list { display:flex; flex-wrap:wrap; gap:16px; justify-content:center; }
.profile-card small { display:block; color:#e0722f; font-size:.75rem; margin-top:2px; }
.profile-noimg { width:100%; height:110px; display:flex; align-items:center; justify-content:center; font-size:3rem; }

/* ===== なまえ入力 ===== */
.name-field { padding:14px 20px; border-radius:16px; border:3px solid #f0c48a; background:#fff; color:#4a3b2a;
  font-size:1.4rem; width:min(300px,80vw); text-align:center; margin-bottom:20px;
  font-family:inherit; }
.name-field:focus { outline:none; border-color:#ffb03a; }

/* ===== あいぼうの おへや ===== */
#screen-buddyroom { background:linear-gradient(160deg,#e7f6ff,#f6ecff); align-items:center; }
#room-wrap { position:relative; width:min(440px,92vw); aspect-ratio:4/3; margin:18px 0 8px;
  border-radius:20px; overflow:hidden; box-shadow:0 8px 20px rgba(0,0,0,.15); }
#room-svg { position:absolute; inset:0; }
#room-svg svg { display:block; }
#br-buddy { position:absolute; left:50%; bottom:4%; transform:translateX(-50%);
  height:52%; object-fit:contain; filter:drop-shadow(0 4px 6px rgba(0,0,0,.2)); }
#br-level { font-size:1.2rem; font-weight:bold; color:#e0722f; }
.br-h3 { margin:14px; color:#7a6a55; }
#br-items { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; padding:0 16px 30px; }
.br-item { width:90px; background:#fff; border-radius:16px; padding:10px; text-align:center; cursor:pointer;
  box-shadow:0 4px 0 #e5d3b3; font-size:2rem; }
.br-item small { display:block; font-size:.7rem; color:#a2795a; }
.br-item.locked { opacity:.45; }
.br-item.on { border:3px solid #ffb03a; }

@keyframes fadeUp { from{opacity:0;transform:translateY(20px);} to{opacity:1;transform:translateY(0);} }