:root {
--navy: #1f3f77;
--blue: #3b7dd8;
--blue-l: #e3f0ff;
--line: #d6e6f8;
--bg: #eaf5ff;
--white: #ffffff;
--green: #3fb36b;
--orange: #ff9a3d;
--purple: #9b6fd6;
--pink: #ff6f91;
--shadow: 0 4px 0 rgba(31, 63, 119, .12), 0 8px 18px rgba(31, 63, 119, .12);
--font: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Kosugi Maru", "Yu Gothic", system-ui, sans-serif;
color-scheme: light;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--navy); font-family: var(--font); overscroll-behavior: none; }
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: none; }
button { font-family: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
#app { position: fixed; inset: 0; }
.screen { position: absolute; inset: 0; display: none; overflow: hidden; }
.screen.on { display: block; }
.hidden { display: none !important; }
/* ---------- アイコン（SVGマスク） ---------- */
.ico { display: inline-block; width: 1em; height: 1em; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; flex: none; }
.ico-back { --m: url('data:image/svg+xml;utf8,'); }
.ico-reset { --m: url('data:image/svg+xml;utf8,'); }
.ico-sound { --m: url('data:image/svg+xml;utf8,'); }
.ico-mute { --m: url('data:image/svg+xml;utf8,'); }
.ico-music { --m: url('data:image/svg+xml;utf8,'); }
.ico-musicoff { --m: url('data:image/svg+xml;utf8,'); }
.ico-parent { --m: url('data:image/svg+xml;utf8,'); }
.ico-album { --m: url('data:image/svg+xml;utf8,'); }
.ico-globe { --m: url('data:image/svg+xml;utf8,'); }
.ico-star { --m: url('data:image/svg+xml;utf8,'); }
.ico-q { --m: url('data:image/svg+xml;utf8,'); }
.ico-book { --m: url('data:image/svg+xml;utf8,'); }
.ico-map { --m: url('data:image/svg+xml;utf8,'); }
.ico-close { --m: url('data:image/svg+xml;utf8,'); }
.ico-ok { --m: url('data:image/svg+xml;utf8,'); }
.ico-next { --m: url('data:image/svg+xml;utf8,'); }
.ico-trash { --m: url('data:image/svg+xml;utf8,'); }
.ico-play { --m: url('data:image/svg+xml;utf8,'); }
.ico-rotate { --m: url('data:image/svg+xml;utf8,'); }
.ico-lock { --m: url('data:image/svg+xml;utf8,'); }
/* ---------- 共通ボタン ---------- */
.round-btn { width: 52px; height: 52px; border-radius: 50%; background: var(--white); box-shadow: var(--shadow); display: grid; place-items: center; color: var(--navy); font-size: 26px; border: 3px solid var(--line); transition: transform .1s; }
.round-btn.big { width: 60px; height: 60px; font-size: 28px; }
.round-btn:active, .sq-btn:active, .btn-pill:active, .btn-big:active, .mode-card:active, .stage-card:active, .item:active { transform: scale(.94); }
.sq-btn { position: relative; width: 52px; height: 52px; border-radius: 16px; background: var(--white); box-shadow: var(--shadow); display: grid; place-items: center; color: var(--blue); font-size: 26px; border: 3px solid var(--line); transition: transform .1s; }
.sq-btn.off { color: #a8b6cc; }
.btn-pill { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 999px; background: var(--white); color: var(--navy); font-weight: 800; font-size: 17px; box-shadow: var(--shadow); border: 3px solid var(--line); }
.btn-pill.warn { color: #d2384c; border-color: #ffd0d6; }
.btn-big { display: inline-flex; align-items: center; gap: 12px; padding: 14px 46px 16px; border-radius: 999px; font-weight: 900; font-size: 34px; color: #fff; background: linear-gradient(#ffb04a, #ff8a1f); box-shadow: 0 6px 0 #d96a10, 0 12px 24px rgba(255, 138, 31, .35); border: 4px solid #fff; letter-spacing: .1em; }
.btn-big .ico { font-size: 28px; }
.hold-ring { position: absolute; inset: -6px; border-radius: inherit; border: 4px solid transparent; pointer-events: none; }
.holding .hold-ring { border-color: var(--orange); animation: hold 1.2s linear forwards; clip-path: inset(0 100% 0 0); }
@keyframes hold { to { clip-path: inset(0 0 0 0); } }
/* ---------- タイトル ---------- */
#scr-title { background: #9fd8ff; }
.title-cv { position: absolute; inset: 0; width: 100%; height: 100%; }
.title-wrap { position: absolute; left: 0; right: 0; top: 4%; display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; }
.title-wrap > * { pointer-events: auto; }
.logo { position: relative; margin: 0; display: flex; flex-direction: column; align-items: center; line-height: .95; font-weight: 900; transform: rotate(-3deg); }
.logo b { display: inline-block; font-weight: 900; -webkit-text-stroke: 10px #fff; paint-order: stroke fill; text-shadow: 0 5px 0 rgba(31, 63, 119, .25), 0 10px 18px rgba(31, 63, 119, .2); animation: bob 2.6s ease-in-out infinite; }
.logo-l1 { font-size: clamp(38px, 8vw, 84px); }
.logo-l2 { font-size: clamp(50px, 11vw, 116px); margin-top: -4px; }
.logo-l1 b:nth-child(odd) { animation-delay: -.6s; }
.logo-l2 b:nth-child(2n) { animation-delay: -1.1s; }
.logo-l2 b:nth-child(3n) { animation-delay: -1.7s; }
@keyframes bob { 50% { transform: translateY(-5px) rotate(2deg); } }
.c1 { color: #3b7dd8; } .c2 { color: #ff8a3d; } .c3 { color: #3b7dd8; } .c4 { color: #ff8a3d; } .c5 { color: #ff5d78; }
.c6 { color: #3b7dd8; } .c7 { color: #3fb36b; } .c8 { color: #9b6fd6; } .c9 { color: #ff8a3d; } .c10 { color: #f5b82e; } .c11 { color: #3fb36b; }
.logo-roof { position: absolute; width: clamp(40px, 7vw, 76px); right: -6%; top: -10%; transform: rotate(12deg); }
.ribbon { margin: 2px 0 8px; padding: 8px 26px; background: #fff; border-radius: 999px; font-weight: 800; font-size: clamp(14px, 2.3vw, 22px); color: var(--navy); box-shadow: var(--shadow); border: 3px solid #ffe08a; }
.title-sub { display: flex; gap: 12px; margin-top: 6px; }
.title-foot { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); padding: 8px 26px; border-radius: 999px; background: rgba(59, 125, 216, .92); color: #fff; font-weight: 800; font-size: clamp(13px, 2vw, 18px); white-space: nowrap; box-shadow: var(--shadow); }
.title-foot .spark { color: #ffe36a; }
.corner-parent { position: absolute; right: 12px; bottom: 12px; width: 44px; height: 44px; border-radius: 14px; background: rgba(255, 255, 255, .75); color: #8aa0c4; font-size: 22px; display: grid; place-items: center; }
/* ---------- 共通見出し ---------- */
.sky-bg { position: absolute; inset: 0; background: linear-gradient(#bfe6ff, #eef8ff 60%, #f5fbff); }
.sky-bg::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; background: radial-gradient(120px 60px at 10% 100%, #a8dc8f 98%, transparent), radial-gradient(160px 70px at 40% 100%, #b5e3a2 98%, transparent), radial-gradient(140px 60px at 75% 100%, #a8dc8f 98%, transparent), radial-gradient(160px 70px at 100% 100%, #b5e3a2 98%, transparent); }
.head { position: relative; display: grid; grid-template-columns: 52px 1fr 52px; align-items: center; gap: 12px; padding: max(12px, env(safe-area-inset-top)) 16px 8px; }
.head-title { margin: 0; justify-self: center; display: inline-flex; align-items: center; gap: 10px; padding: 8px 26px; background: var(--white); border-radius: 999px; box-shadow: var(--shadow); font-size: clamp(18px, 3vw, 26px); font-weight: 900; border: 3px solid var(--line); }
.head-title .ico { color: var(--blue); }
.mode-chip { font-style: normal; font-size: .65em; padding: 2px 12px; border-radius: 999px; color: #fff; background: var(--green); }
.mode-chip.odai { background: var(--orange); } .mode-chip.story { background: var(--purple); }
/* ---------- モード ---------- */
.modes { position: relative; display: flex; gap: 18px; justify-content: center; align-items: stretch; padding: 3vh 20px; flex-wrap: wrap; height: calc(100% - 80px); align-content: center; }
.mode-card { width: min(300px, 30vw); min-width: 220px; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 22px 18px; border-radius: 28px; background: #fff; box-shadow: var(--shadow); border: 4px solid; text-align: center; transition: transform .1s; }
.mode-badge { width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 52px; border: 5px solid #fff; box-shadow: 0 4px 0 rgba(0, 0, 0, .1); }
.mode-txt b { display: block; font-size: 24px; font-weight: 900; margin-bottom: 6px; }
.mode-txt small { font-size: 15px; font-weight: 700; color: #5a6f96; line-height: 1.5; }
.mode-free { border-color: #bfe8c8; background: linear-gradient(#f2fbf3, #fff); } .mode-free .mode-badge { background: var(--green); } .mode-free b { color: #2e8a50; }
.mode-odai { border-color: #ffd8b0; background: linear-gradient(#fff6ec, #fff); } .mode-odai .mode-badge { background: var(--orange); } .mode-odai b { color: #d96a10; }
.mode-story { border-color: #e2d4f6; background: linear-gradient(#f7f1fe, #fff); } .mode-story .mode-badge { background: var(--purple); } .mode-story b { color: #7a4fc4; }
/* ---------- マップ ---------- */
.map-grid { position: relative; display: grid; grid-auto-rows: max-content; align-content: start; grid-template-columns: repeat(auto-fill, minmax(min(46%, 200px), 1fr)); gap: 14px; padding: 6px 16px 24px; overflow-y: auto; height: calc(100% - 76px); -webkit-overflow-scrolling: touch; touch-action: pan-y; }
.stage-card { position: relative; flex: none; display: flex; flex-direction: column; background: #fff; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow); border: 3px solid var(--line); text-align: left; transition: transform .1s; }
.stage-card canvas { display: block; width: 100%; aspect-ratio: 16/9; height: auto; }
.stage-card .sc-name { display: flex; align-items: center; gap: 8px; padding: 8px 10px 10px; font-weight: 900; font-size: 16px; }
.sc-num { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 14px; font-weight: 900; }
.sc-stamp { position: absolute; top: 8px; right: 8px; width: 46px; height: 46px; border-radius: 50%; background: #fff; border: 3px dashed #ff8a65; color: #ff6f61; display: grid; place-items: center; font-size: 12px; font-weight: 900; transform: rotate(12deg); box-shadow: 0 3px 8px rgba(0, 0, 0, .15); }
.sc-found { position: absolute; left: 8px; top: 8px; padding: 2px 10px; border-radius: 999px; background: rgba(255, 255, 255, .9); font-size: 12px; font-weight: 800; color: var(--blue); }
/* ---------- 遊び画面 ---------- */
#game { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.topbar { position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; align-items: center; padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left)); pointer-events: none; }
.topbar > * { pointer-events: auto; }
.tb-left, .tb-right { display: flex; gap: 10px; align-items: center; }
.stage-pill { display: inline-flex; align-items: center; gap: 10px; padding: 6px 20px 6px 8px; background: #fff; border-radius: 999px; box-shadow: var(--shadow); font-weight: 900; font-size: clamp(16px, 2.4vw, 22px); border: 3px solid var(--line); }
.stage-icon { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; }
.stage-icon canvas { width: 36px; height: 36px; }
.side-btns { position: absolute; right: max(14px, env(safe-area-inset-right)); bottom: calc(var(--panel-h, 170px) + 12px); display: flex; gap: 12px; align-items: flex-end; }
.hint-btn { width: 72px; height: 72px; border-radius: 50%; color: #fff; font-size: 38px; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #7ec4ff, #2f7fe0); border: 5px solid #fff; box-shadow: var(--shadow); }
.hint-btn.pulse, .round-btn.pulse { animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.12); } }
.panel { position: absolute; left: 0; right: 0; bottom: 0; height: var(--panel-h, 170px); padding: 8px max(12px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); background: rgba(255, 255, 255, .92); border-top: 3px solid var(--line); border-radius: 26px 26px 0 0; box-shadow: 0 -6px 20px rgba(31, 63, 119, .12); display: flex; flex-direction: column; gap: 6px; }
.tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; flex: none; touch-action: pan-x; }
.subtabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; flex: none; touch-action: pan-x; min-height: 28px; }
.subtabs.empty { visibility: hidden; }
.subtabs::-webkit-scrollbar, .tabs::-webkit-scrollbar, .items::-webkit-scrollbar { display: none; }
.tab { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 5px 16px; border-radius: 999px; background: var(--blue-l); color: var(--navy); font-weight: 800; font-size: 16px; border: 2px solid transparent; }
.tab.on { background: var(--blue); color: #fff; box-shadow: 0 3px 0 #2a5fae; }
.tab canvas { width: 26px; height: 26px; }
.subtab { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 2px 12px 2px 6px; border-radius: 999px; background: #fff; color: var(--navy); font-weight: 800; font-size: 14px; border: 2px solid var(--line); }
.subtab.on { background: #ffd23f; border-color: #e0a92a; color: #5a3a00; }
.subtab canvas { width: 22px; height: 22px; }
.items { flex: 1; display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden; align-items: center; padding: 2px 2px 4px; touch-action: pan-x; scrollbar-width: none; }
.item { position: relative; flex: none; height: calc(100% - 4px); aspect-ratio: 1; max-height: 104px; min-height: 64px; border-radius: 20px; background: #fff; border: 3px solid var(--line); box-shadow: 0 3px 0 rgba(31, 63, 119, .1); display: grid; place-items: center; touch-action: pan-x; transition: transform .1s; }
.item canvas { width: 86%; height: 86%; pointer-events: none; }
.item.present::after { content: "✓"; position: absolute; right: 4px; top: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--green); color: #fff; font-size: 14px; font-weight: 900; display: grid; place-items: center; }
.item.hintme { border-color: #ffb04a; animation: pulse .9s ease-in-out infinite; box-shadow: 0 0 0 5px rgba(255, 176, 74, .35); }
.item.new::before { content: "NEW"; position: absolute; left: -4px; top: -6px; padding: 0 6px; border-radius: 8px; background: var(--pink); color: #fff; font-size: 11px; font-weight: 900; }
.trash { position: absolute; left: 50%; top: -74px; transform: translateX(-50%) scale(.6); opacity: 0; width: 140px; height: 64px; border-radius: 22px; background: #fff; border: 3px dashed #9fb3cf; color: #6a7f9f; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 26px; font-weight: 800; transition: .15s; pointer-events: none; box-shadow: var(--shadow); }
.trash small { font-size: 15px; }
.panel.dragging .trash { opacity: 1; transform: translateX(-50%) scale(1); }
.panel.over .trash { background: #ffe9ec; border-color: #ff6f91; color: #ff6f91; transform: translateX(-50%) scale(1.1); }
.panel.dragging .items, .panel.dragging .tabs { opacity: .55; }
.drag-ghost { position: fixed; left: 0; top: 0; width: 110px; height: 110px; pointer-events: none; z-index: 50; filter: drop-shadow(0 10px 10px rgba(31, 63, 119, .3)); }
.drag-ghost canvas { width: 100%; height: 100%; }
.task-card { position: absolute; left: 50%; top: max(70px, calc(env(safe-area-inset-top) + 64px)); transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 8px; max-width: min(640px, 92vw); background: #fff; border-radius: 22px; box-shadow: var(--shadow); border: 3px solid #ffd8b0; animation: drop .4s cubic-bezier(.3, 1.6, .5, 1); }
.task-card.story { border-color: #e2d4f6; }
.task-card.done { border-color: #9fe0b2; background: #f2fff5; }
@keyframes drop { from { transform: translate(-50%, -30px); opacity: 0; } }
.tc-icon { flex: none; width: 56px; height: 56px; border-radius: 16px; background: #fff6ec; display: grid; place-items: center; }
.task-card.story .tc-icon { background: #f7f1fe; }
.tc-icon canvas { width: 50px; height: 50px; }
.tc-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tc-body small { font-size: 12px; font-weight: 800; color: var(--orange); }
.task-card.story small { color: var(--purple); }
.tc-body b { font-size: clamp(15px, 2.2vw, 20px); font-weight: 900; line-height: 1.3; }
.tc-dots { display: flex; gap: 5px; }
.tc-dots i { width: 10px; height: 10px; border-radius: 50%; background: #e2d4f6; }
.tc-dots i.on { background: var(--purple); }
.tc-btn { flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--blue-l); color: var(--blue); font-size: 20px; display: grid; place-items: center; }
.tutorial { position: absolute; left: 0; right: 0; bottom: calc(var(--panel-h, 170px) - 10px); height: 230px; pointer-events: none; }
.tut-bubble { position: absolute; right: 18%; bottom: 120px; padding: 10px 18px; background: #fff; border-radius: 20px; font-weight: 900; font-size: 18px; box-shadow: var(--shadow); border: 3px solid var(--line); line-height: 1.4; }
.tut-hand { position: absolute; left: 14%; bottom: 0; width: 60px; height: 70px; background: url('data:image/svg+xml;utf8,') center/contain no-repeat; animation: tut 2.6s ease-in-out infinite; }
@keyframes tut { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: 1; } 60% { transform: translate(28vw, -140px); opacity: 1; } 80%, 100% { transform: translate(28vw, -140px); opacity: 0; } }
.toast-area { position: absolute; right: 14px; top: 76px; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 10px; padding: 8px 18px 8px 8px; border-radius: 22px; background: #fff; box-shadow: var(--shadow); border: 3px solid #ffe08a; animation: toastIn .5s cubic-bezier(.3, 1.6, .5, 1), toastOut .5s ease 3.6s forwards; max-width: min(380px, 70vw); }
.toast.reward { border-color: #ffb3c8; }
.toast .t-ic { display: flex; flex: none; }
.toast .t-ic canvas { width: 44px; height: 44px; margin-left: -10px; }
.toast .t-ic canvas:first-child { margin-left: 0; }
.toast small { display: block; color: #ff8a1f; font-weight: 900; font-size: 12px; }
.toast.reward small { color: var(--pink); }
.toast b { font-size: 16px; font-weight: 900; }
@keyframes toastIn { from { transform: translateX(120%); } }
@keyframes toastOut { to { transform: translateX(130%); opacity: 0; } }
/* ---------- オーバーレイ ---------- */
.overlay { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(31, 63, 119, .35); z-index: 20; padding: 12px; }
.overlay.on { display: flex; }
.sheet { position: relative; background: #fff; border-radius: 28px; box-shadow: 0 20px 50px rgba(31, 63, 119, .3); border: 4px solid var(--line); width: min(980px, 100%); max-height: 100%; display: flex; flex-direction: column; overflow: hidden; animation: pop .3s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes pop { from { transform: scale(.85); opacity: 0; } }
.sheet-head { display: grid; grid-template-columns: 1fr auto 52px; align-items: center; gap: 12px; padding: 12px 14px 8px 20px; }
.sheet-head h3 { margin: 0; display: flex; align-items: center; gap: 10px; font-size: clamp(18px, 2.8vw, 24px); font-weight: 900; }
.sheet-head h3 .ico { color: var(--blue); }
.count { font-weight: 800; color: var(--blue); background: var(--blue-l); padding: 4px 14px; border-radius: 999px; }
.stamps { display: flex; gap: 8px; padding: 0 18px 8px; overflow-x: auto; flex: none; touch-action: pan-x; scrollbar-width: none; }
.stamp { flex: none; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 900; border: 3px dashed #d6e2f2; color: #b8c6dc; background: #f8fbff; text-align: center; line-height: 1.1; }
.stamp.on { border-color: #ff8a65; color: #fff; background: radial-gradient(circle, #ffb08a, #ff6f61); border-style: solid; transform: rotate(-8deg); }
.album-tabs { display: flex; gap: 6px; padding: 0 18px 8px; overflow-x: auto; flex: none; touch-action: pan-x; scrollbar-width: none; }
.album-tabs .tab { font-size: 14px; padding: 4px 12px; }
.album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; padding: 4px 18px 18px; overflow-y: auto; touch-action: pan-y; }
.acard { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 8px; border-radius: 18px; background: #fff; border: 3px solid var(--line); box-shadow: 0 3px 0 rgba(31, 63, 119, .08); text-align: center; }
.acard .a-ic { display: flex; height: 58px; align-items: center; }
.acard .a-ic canvas { width: 54px; height: 54px; margin-left: -12px; }
.acard .a-ic canvas:first-child { margin-left: 0; }
.acard b { font-size: 14px; font-weight: 900; line-height: 1.3; }
.acard small { font-size: 11px; color: #7a8fb0; font-weight: 700; }
.acard.unk { background: #f6f9fd; border-style: dashed; color: #b8c6dc; }
.acard.unk .q { font-size: 34px; font-weight: 900; height: 58px; display: grid; place-items: center; }
.detail { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(31, 63, 119, .25); }
.detail .dbox { background: #fff; border-radius: 28px; padding: 22px 26px; max-width: 460px; width: 90%; text-align: center; border: 4px solid #ffe08a; box-shadow: var(--shadow); animation: pop .3s cubic-bezier(.3, 1.6, .5, 1); }
.dbox .d-ic { display: flex; justify-content: center; }
.dbox .d-ic canvas { width: 100px; height: 100px; margin-left: -18px; }
.dbox .d-ic canvas:first-child { margin-left: 0; }
.dbox h4 { margin: 8px 0 4px; font-size: 24px; font-weight: 900; }
.dbox p { margin: 0 0 12px; font-weight: 700; line-height: 1.6; color: #4a5f86; }
.dbox small { display: block; margin-bottom: 12px; color: var(--blue); font-weight: 800; }
.parent { width: min(560px, 100%); }
.parent-body { padding: 4px 20px 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; touch-action: pan-y; }
.parent-body .row { display: flex; align-items: center; gap: 12px; font-weight: 800; font-size: 16px; flex-wrap: wrap; }
.parent-body input[type=range] { flex: 1; min-width: 160px; accent-color: var(--blue); }
.parent-body input[type=checkbox] { width: 26px; height: 26px; accent-color: var(--blue); }
.parent-body .note { margin: 0; font-size: 13px; color: #6a7f9f; line-height: 1.6; font-weight: 600; }
.confirm { width: min(420px, 100%); align-items: center; padding: 22px; gap: 10px; text-align: center; }
.confirm p { margin: 0; font-size: 20px; font-weight: 900; line-height: 1.5; }
.confirm-icon canvas { width: 90px; height: 90px; }
.confirm-btns { display: flex; gap: 22px; margin-top: 8px; }
.confirm-btns button { width: 86px; height: 86px; border-radius: 50%; font-size: 46px; color: #fff; display: grid; place-items: center; border: 5px solid #fff; box-shadow: var(--shadow); }
.confirm-btns .yes { background: var(--green); }
.confirm-btns .no { background: #ff7a7a; }
.rotate { position: fixed; inset: 0; z-index: 60; display: none; align-items: center; justify-content: center; background: rgba(234, 245, 255, .97); text-align: center; font-weight: 900; font-size: 20px; }
.rotate .ico { font-size: 80px; color: var(--blue); animation: rot 2s ease-in-out infinite; }
@keyframes rot { 50% { transform: rotate(-90deg); } }
@media (orientation: portrait) and (max-width: 700px) { .rotate.show { display: flex; } }
/* 小さい画面（スマホ横） */
@media (max-height: 460px) {
.subtab { font-size: 12px; padding: 1px 10px 1px 4px; }
.subtab canvas { width: 18px; height: 18px; }
.subtabs { min-height: 24px; }
.panel { gap: 4px; padding-top: 6px; }
.panel .tab { padding: 2px 12px; }
.panel .tab canvas { width: 22px; height: 22px; }
.item { min-height: 52px; }
.round-btn, .sq-btn { width: 44px; height: 44px; font-size: 22px; }
.round-btn.big { width: 50px; height: 50px; }
.hint-btn { width: 58px; height: 58px; font-size: 30px; }
.stage-pill { padding: 4px 14px 4px 6px; }
.stage-icon, .stage-icon canvas { width: 30px; height: 30px; }
.tab { font-size: 14px; padding: 3px 12px; }
.task-card { top: max(8px, env(safe-area-inset-top)); left: calc(50% - 40px); max-width: calc(100vw - 440px); min-width: 230px; padding: 4px 6px 4px 4px; gap: 6px; }
.tc-body b { font-size: 13px; }
.tc-body small { font-size: 10px; }
.tc-dots i { width: 7px; height: 7px; }
#scr-play.has-card .stage-pill #stage-name { display: none; }
#scr-play.has-card .stage-pill { padding-right: 6px; }
.tc-icon { width: 44px; height: 44px; } .tc-icon canvas { width: 40px; height: 40px; }
.tc-btn { width: 36px; height: 36px; }
.toast-area { top: 60px; }
.modes { gap: 10px; padding: 8px; }
.mode-card { padding: 12px; gap: 8px; min-width: 190px; }
.mode-badge { width: 64px; height: 64px; font-size: 36px; }
.mode-txt b { font-size: 20px; } .mode-txt small { font-size: 13px; }
.btn-big { font-size: 26px; padding: 10px 36px 12px; }
.logo-l1 { font-size: 40px; } .logo-l2 { font-size: 58px; }
.ribbon { margin-bottom: 2px; }
}
@media (max-width: 560px) {
.tb-right { gap: 6px; }
.stage-pill #stage-name { font-size: 14px; }
.mode-card { width: 100%; min-width: 0; flex-direction: row; text-align: left; }
}
/* ---------- みんなで あそぶ ボタン（ダンス・てんき）／かくれた ほし ---------- */
.fun-btn { position: relative; width: 64px; height: 64px; border-radius: 22px; display: grid; place-items: center; align-content: center; gap: 0; border: 4px solid #fff; box-shadow: var(--shadow); transition: transform .1s, background .3s; }
.fun-btn:active { transform: scale(.92); }
.fun-btn small { position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); padding: 0 7px; border-radius: 999px; background: #fff; font-size: 11px; font-weight: 900; line-height: 16px; white-space: nowrap; box-shadow: 0 2px 0 rgba(31, 63, 119, .12); }
.fico { display: block; width: 40px; height: 40px; background: center / contain no-repeat; pointer-events: none; }
.fun-dance { background: radial-gradient(circle at 35% 30%, #ffd0e2, #ff7aa6); }
.fun-dance small { color: #e0457a; }
.fun-dance.on { animation: funbop .47s ease-in-out infinite; }
@keyframes funbop { 50% { transform: translateY(-6px) rotate(-6deg) scale(1.06); } }
.fun-weather { background: radial-gradient(circle at 35% 30%, #fff6c8, #ffc93c); }
.fun-weather small { color: #2f6fc0; }
.fun-weather[data-w="rain"] { background: radial-gradient(circle at 35% 30%, #d8ecff, #6fb2ee); }
.fun-weather[data-w="snow"] { background: radial-gradient(circle at 35% 30%, #ffffff, #b9daf6); }
.fun-weather[data-w="night"] { background: radial-gradient(circle at 35% 30%, #5a62b8, #262a66); }
.fun-weather[data-w="rainbow"] { background: radial-gradient(circle at 35% 30%, #ffffff, #e2d4f6); }
.fun-weather.pop { animation: funpop .35s ease-out; }
@keyframes funpop { 40% { transform: scale(1.18) rotate(8deg); } }
.fico-dance { background-image: url("data:image/svg+xml;utf8,"); }
.fico-w-sun { background-image: url("data:image/svg+xml;utf8,"); }
.fico-w-rain { background-image: url("data:image/svg+xml;utf8,"); }
.fico-w-snow { background-image: url("data:image/svg+xml;utf8,"); }
.fico-w-night { background-image: url("data:image/svg+xml;utf8,"); }
.fico-w-rainbow { background-image: url("data:image/svg+xml;utf8,"); }
.sc-hstar { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 2px; padding: 1px 8px 1px 4px; border-radius: 999px; background: #fff4c2; color: #c98a00; font-size: 13px; font-weight: 900; }
.sc-hstar i { display: block; width: 16px; height: 16px; background: url("data:image/svg+xml;utf8,") center / contain no-repeat; }
@media (max-height: 460px) {
.fun-btn { width: 52px; height: 52px; border-radius: 18px; border-width: 3px; }
.fico { width: 32px; height: 32px; }
.fun-btn small { font-size: 10px; line-height: 14px; bottom: -8px; }
}
@media (max-width: 560px) {
.side-btns { gap: 8px; }
}