/* あそびのもり 共通スタイル (2026-09-26) — スマホたて持ち・3〜9さい・大きく押しやすく */
:root{
  --sky1:#bfe9ff; --sky2:#fff7d6; --grass:#9ed36a; --grass2:#7cc04b; --ink:#4a3424; --ink2:#7a5c3e;
  --card:#fffdf6; --line:#eadcc4; --ok:#2e9e5b; --ng:#e8743b; --accent:#ff7a45; --gold:#ffc53d;
  --r:22px; --shadow:0 6px 0 rgba(90,60,30,.18);
  --font:"Zen Maru Gothic","Hiragino Maru Gothic ProN","BIZ UDPGothic","Yu Gothic",sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{font-family:var(--font);color:var(--ink);background:linear-gradient(180deg,var(--sky1) 0%,var(--sky2) 62%,#e9f7d2 100%);
  -webkit-user-select:none;user-select:none;overscroll-behavior:none;touch-action:manipulation}
button{font-family:inherit;color:inherit}
#app{position:relative;max-width:520px;margin:0 auto;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;
  padding:max(8px,env(safe-area-inset-top)) 12px max(10px,env(safe-area-inset-bottom));overflow:hidden}
.hills{position:fixed;left:0;right:0;bottom:0;height:22vh;pointer-events:none;z-index:0;
  background:radial-gradient(120% 90% at 20% 110%,var(--grass2) 0 55%,transparent 56%),radial-gradient(120% 90% at 85% 115%,var(--grass) 0 55%,transparent 56%)}
.scr{position:relative;z-index:1;display:none;flex:1;flex-direction:column;min-height:0}
.scr.on{display:flex;animation:scrIn .28s ease-out}
@keyframes scrIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* 上のバー */
.bar{display:flex;align-items:center;gap:8px;height:52px}
.ib{width:48px;height:48px;border-radius:16px;border:0;background:#fff;box-shadow:var(--shadow);font-size:24px;display:grid;place-items:center}
.ib:active{transform:translateY(3px);box-shadow:0 3px 0 rgba(90,60,30,.18)}
.prog{flex:1;height:18px;background:#fff;border-radius:99px;box-shadow:inset 0 2px 0 rgba(0,0,0,.06);overflow:hidden;position:relative}
.prog i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#8bd35a,#46b04a);border-radius:99px;transition:width .35s}
.prog b{position:absolute;right:8px;top:0;font-size:12px;line-height:18px;color:var(--ink2)}

/* タイトル画面 */
.hero{text-align:center;margin:6px 0 4px}
.hero .ic{width:120px;height:120px;margin:0 auto;display:block;filter:drop-shadow(0 6px 0 rgba(0,0,0,.12));animation:bob 2.4s ease-in-out infinite}
.hero h1{margin:4px 0 0;font-size:34px;letter-spacing:2px;text-shadow:0 3px 0 #fff}
.hero .sub{font-size:15px;color:var(--ink2);margin-top:2px}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.guide{display:flex;align-items:flex-start;gap:10px;margin:10px 0}
.guide .face{flex:none;width:64px;height:64px;border-radius:50%;border:4px solid #fff;box-shadow:var(--shadow);background:#fff center/cover}
.guide .bub{position:relative;flex:1;background:#fff;border-radius:18px;padding:10px 14px;font-size:17px;line-height:1.55;box-shadow:var(--shadow)}
.guide .bub:before{content:"";position:absolute;left:-10px;top:18px;border:10px solid transparent;border-right-color:#fff;border-left:0}
.lv{display:grid;gap:12px;margin:8px 0}
.lvb{display:flex;align-items:center;gap:12px;border:0;border-radius:var(--r);padding:14px 16px;min-height:78px;text-align:left;
  box-shadow:var(--shadow);color:#fff;font-size:22px;font-weight:700}
.lvb:active{transform:translateY(4px);box-shadow:0 2px 0 rgba(90,60,30,.18)}
.lvb .e{font-size:34px}
.lvb .t{flex:1;line-height:1.2}
.lvb .t small{display:block;font-size:14px;opacity:.95;font-weight:500}
.lvb .st{font-size:20px;letter-spacing:1px;text-shadow:0 1px 0 rgba(0,0,0,.2)}
.lv1{background:linear-gradient(135deg,#6cc56f,#3fa55a)} .lv2{background:linear-gradient(135deg,#4fb3ff,#2f86e0)} .lv3{background:linear-gradient(135deg,#ff9f5a,#f06c3b)}
.lv4{background:linear-gradient(135deg,#b58cff,#8a5ce6)} .lv5{background:linear-gradient(135deg,#ff7fb1,#e0508b)} .lv6{background:linear-gradient(135deg,#8d9bff,#5a67d8)}
.small{font-size:13px;color:var(--ink2);text-align:center;margin:6px 0}
.small a{color:var(--ink2)}

/* 問題 */
.q{background:#fff;border-radius:var(--r);box-shadow:var(--shadow);padding:10px 14px;margin:8px 0 6px;text-align:center;font-size:22px;font-weight:700;line-height:1.45;position:relative}
.q .say{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:0;background:#fff3e0;font-size:20px}
.q.qv{padding-right:54px}
.stage{flex:1;min-height:150px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px;position:relative;
  background:rgba(255,255,255,.72);border-radius:var(--r);padding:10px;margin:4px 0 8px;box-shadow:inset 0 0 0 3px rgba(255,255,255,.9)}
.stage img.it{width:56px;height:56px;object-fit:contain;animation:pop .35s both}
.stage .big{font-size:64px;font-weight:700;line-height:1}
@keyframes pop{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
.ch{display:grid;gap:10px;margin-bottom:8px}
.cb{border:0;border-radius:var(--r);background:#fff;box-shadow:var(--shadow);min-height:78px;padding:8px;font-size:32px;font-weight:700;
  display:flex;align-items:center;justify-content:center;gap:6px;transition:transform .08s}
.cb:active{transform:translateY(4px);box-shadow:0 2px 0 rgba(90,60,30,.18)}
.cb img{width:64px;height:64px;object-fit:contain}
.cb.ok{background:#d9f7de;box-shadow:0 6px 0 #56b86a}
.cb.ng{background:#ffe6d6;animation:shake .4s}
.cb.dim{opacity:.35}
.cb.sel{background:#fff3c4;box-shadow:0 6px 0 #f0b400}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
.hint{font-size:15px;color:var(--ink2);text-align:center;min-height:22px}

/* 子犬 */
.buddies{display:flex;justify-content:space-between;align-items:flex-end;height:86px;margin-top:auto;pointer-events:none}
.buddies img{height:86px;transition:transform .2s}
.buddies img.jump{animation:jump .6s}
@keyframes jump{0%,100%{transform:translateY(0)}40%{transform:translateY(-22px) rotate(-4deg)}}

/* 正解・まちがいの大きな印 */
.fx{position:fixed;left:50%;top:42%;transform:translate(-50%,-50%) scale(.3);opacity:0;z-index:30;pointer-events:none;font-size:170px;font-weight:700;line-height:1}
.fx.go{animation:fx .75s ease-out}
@keyframes fx{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}30%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}70%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1)}}
canvas.confetti{position:fixed;inset:0;z-index:40;pointer-events:none}

/* 結果 */
.res{text-align:center}
.stars{font-size:54px;letter-spacing:6px;margin:6px 0}
.stars span{display:inline-block;filter:grayscale(1) opacity(.35)}
.stars span.on{filter:none;animation:starIn .5s both}
@keyframes starIn{0%{transform:scale(0) rotate(-40deg)}70%{transform:scale(1.25)}100%{transform:scale(1)}}
.score{font-size:22px;font-weight:700}
.sticker{display:inline-flex;flex-direction:column;align-items:center;background:#fff;border-radius:20px;padding:10px 16px;margin:8px auto;box-shadow:var(--shadow);border:3px dashed var(--gold)}
.sticker img{width:96px;height:96px;object-fit:contain;animation:pop .5s .6s both}
.btns{display:grid;gap:10px;margin:10px 0}
.pb{border:0;border-radius:var(--r);padding:14px;font-size:22px;font-weight:700;color:#fff;box-shadow:var(--shadow);min-height:64px}
.pb:active{transform:translateY(4px);box-shadow:0 2px 0 rgba(90,60,30,.18)}
.pb.g{background:linear-gradient(135deg,#6cc56f,#3fa55a)} .pb.b{background:linear-gradient(135deg,#4fb3ff,#2f86e0)} .pb.o{background:linear-gradient(135deg,#ffb35a,#f07c3b)}
.pb.w{background:#fff;color:var(--ink)}
.song{font-size:15px;color:var(--ink2);margin:4px 0}
.parent{margin:12px auto 0;background:rgba(255,255,255,.8);border-radius:16px;padding:10px 12px;font-size:13px;color:var(--ink2);text-align:center}
.parent button{margin-top:6px;border:2px solid var(--line);background:#fff;border-radius:99px;padding:8px 14px;font-size:14px;position:relative;overflow:hidden}
.parent button i{position:absolute;left:0;top:0;bottom:0;width:0;background:#ffe0b2;z-index:-1}

/* ダイアログ */
.dlg{position:fixed;inset:0;background:rgba(40,25,10,.45);display:none;align-items:center;justify-content:center;z-index:50;padding:20px}
.dlg.on{display:flex}
.dlg .box{background:#fff;border-radius:24px;padding:18px;max-width:360px;width:100%;text-align:center;font-size:20px;font-weight:700;box-shadow:0 10px 0 rgba(0,0,0,.15)}
.dlg .row{display:flex;gap:10px;margin-top:14px}.dlg .row .pb{flex:1}

/* ゲーム別の部品 */
.tenf{display:grid;grid-template-columns:repeat(5,34px);gap:4px;padding:6px;background:#fff;border-radius:10px;border:2px solid #d7c4a8}
.tenf i{width:34px;height:34px;border-radius:8px;background:#f6efe2;display:grid;place-items:center}
.tenf i.f:after{content:"";width:24px;height:24px;border-radius:50%;background:#2f86e0}
.tenf i.g:after{content:"";width:24px;height:24px;border-radius:50%;background:#ff9f5a}
.grp{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;align-content:center;padding:6px;border-radius:18px;background:#fff;min-height:120px;width:46%;border:4px solid transparent}
.grp img{width:40px;height:40px}
.card{perspective:600px}
.mem{display:grid;gap:8px;width:100%}
.mc{aspect-ratio:3/4;border:0;padding:0;background:transparent;position:relative;transform-style:preserve-3d;transition:transform .35s}
.mc.fl{transform:rotateY(180deg)}
.mc .fa,.mc .ba{position:absolute;inset:0;border-radius:14px;backface-visibility:hidden;display:grid;place-items:center;box-shadow:0 4px 0 rgba(90,60,30,.2)}
.mc .ba{background:linear-gradient(135deg,#8bd35a,#46b04a);font-size:30px;color:#fff}
.mc .fa{background:#fff;transform:rotateY(180deg)}
.mc .fa img{width:80%;height:80%;object-fit:contain}
.mc.got .fa{background:#e7f8e9}
.holes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%}
.hole{aspect-ratio:1;border-radius:50%;background:radial-gradient(ellipse 46% 20% at 50% 80%,#2b1a0e 0 92%,transparent 96%),radial-gradient(ellipse 50% 24% at 50% 81%,#8a643c 0 94%,transparent 97%);position:relative;overflow:hidden;border:0;padding:0}
.hole .mole{position:absolute;left:14%;right:14%;bottom:-85%;height:74%;transition:bottom .16s ease-out;display:grid;place-items:center}
.hole.up .mole{bottom:18%}
.hole .mole svg{width:100%;height:100%}
.hole .mole b{position:absolute;top:0;min-width:40px;height:40px;padding:0 6px;border-radius:20px;background:#fff;color:#e8743b;font-size:26px;display:grid;place-items:center;box-shadow:0 3px 0 rgba(0,0,0,.2)}
.hole .mole b:empty{display:none}
.pads{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%}
.pad{aspect-ratio:1;border:0;border-radius:28px;box-shadow:0 8px 0 rgba(0,0,0,.18);display:grid;place-items:center;transition:filter .1s,transform .1s}
.pad img{width:70%;height:70%;object-fit:contain}
.pad.lit{filter:brightness(1.35) saturate(1.2);transform:scale(1.05)}
.scene{position:relative;width:100%;aspect-ratio:4/3;border-radius:16px;background:linear-gradient(180deg,#d8f1ff,#f3ffe0);overflow:hidden;border:3px solid #fff}
.scene img{position:absolute;object-fit:contain;transform:translate(-50%,-50%)}
.scene .mark{position:absolute;border:5px solid #e53935;border-radius:50%;transform:translate(-50%,-50%);animation:pop .3s}
.clock{width:190px;height:190px}
.seq{display:flex;gap:8px;justify-content:center;min-height:56px;flex-wrap:wrap}
.seq span{min-width:48px;height:52px;border-radius:14px;background:#fff;display:grid;place-items:center;font-size:28px;font-weight:700;box-shadow:0 4px 0 rgba(90,60,30,.15)}
.parade{height:40px;display:flex;gap:2px;overflow:hidden;align-items:flex-end}
.parade img{height:34px;animation:pop .4s}

/* ハブ(あそびのもり) */
.hub h1{font-size:30px;text-align:center;margin:6px 0 0}
.hub .grp-t{font-size:18px;font-weight:700;margin:16px 4px 8px;display:flex;align-items:center;gap:6px}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:#fff;border-radius:22px;padding:10px 6px 8px;
  text-decoration:none;color:var(--ink);box-shadow:var(--shadow);min-height:140px;position:relative}
.tile:active{transform:translateY(4px);box-shadow:0 2px 0 rgba(90,60,30,.18)}
.tile img{width:70px;height:70px;object-fit:contain}
.tile b{font-size:17px;text-align:center;line-height:1.25}
.tile small{font-size:12px;color:var(--ink2)}
.tile .st{position:absolute;top:6px;right:8px;font-size:12px;color:#f0a800}
.book{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;background:#fff;border-radius:20px;padding:10px;box-shadow:var(--shadow)}
.book .s{aspect-ratio:1;border-radius:14px;background:#f5efe4;display:grid;place-items:center;font-size:22px;color:#cdbfa6}
.book .s img{width:86%;height:86%;object-fit:contain}
.book .s.got{background:#fff8e1}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (min-width:700px){#app{padding-top:18px}}

/* ぶんすう(たてがき) */
.fr{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;line-height:1.05;margin:0 3px;font-size:.8em}
.fr i{font-style:normal;padding:0 4px}.fr i:first-child{border-bottom:3px solid currentColor}

/* ---- 追加ゲーム(2026-09-26 第2弾) ---- */
.trace{position:relative;width:min(300px,78vw);aspect-ratio:1;margin:0 auto;border-radius:22px;background:#fff;box-shadow:var(--shadow);touch-action:none}
.trace canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;border-radius:22px}
.trbtns{display:flex;gap:10px;justify-content:center;margin:10px 0 6px}
.trbtns .pb{min-height:56px;padding:8px 22px;font-size:20px}
.dots{display:inline-grid;gap:3px;margin-top:6px;vertical-align:middle}
.dots i{width:9px;height:9px;border-radius:50%;background:#ff9f5a;display:block}
.day{display:flex;flex-direction:column;align-items:center;line-height:1.1}
.day b{font-size:30px}.day small{font-size:13px;color:var(--ink2)}
.shop{display:flex;align-items:center;gap:12px;justify-content:center;flex-wrap:wrap}
.shop img{width:92px;height:92px;object-fit:contain}
.tag{background:#fff;border:3px solid #ff9f5a;border-radius:14px;padding:4px 14px;font-size:28px;font-weight:700;color:#e8743b}
.tray{min-height:84px;width:100%;background:#fff7e6;border:2px dashed #e0c9a6;border-radius:18px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center;padding:8px}

.coins{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:8px 0}
.coin{border:0;background:transparent;padding:0;line-height:0;cursor:pointer}
.coin:active{transform:scale(.92)}
.total{text-align:center;font-size:18px;font-weight:700;margin:6px 0}