:root {
  --lav: #B9A4F4;
  --lav-l: #EEE6FF;
  --lav-d: #8C6FD6;
  --pink: #F6B7D2;
  --pink-d: #E07AA8;
  --mint: #BFEBDD;
  --mint-d: #6FC3A8;
  --cream: #FFF9F0;
  --ink: #493B6B;
  --yellow: #FFE28A;
  --blue: #BCD4FA;
  --blue-d: #6F98E2;
  --frame: #D9CBF7;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--cream); color: var(--ink); }
body {
  font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Yu Gothic", system-ui, sans-serif;
  font-weight: 800;
  -webkit-user-select: none; user-select: none; touch-action: manipulation;
  overscroll-behavior: none;
}
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; touch-action: manipulation; }
svg { display: block; }
#app { position: fixed; inset: 0; overflow: hidden; }
.screen {
  position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden;
  animation: screenIn .55s cubic-bezier(.6, 0, .3, 1);
  background: linear-gradient(#FFF3F9, #FFF9F0);
}
@keyframes screenIn { from { clip-path: circle(0% at 50% 55%); } to { clip-path: circle(150% at 50% 55%); } }
#app { background: radial-gradient(circle at 50% 55%, #FFF6FA 0%, #F3D9F2 45%, #C9B5F5 100%); }
#ambient { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; }
.panel, .palette, .fr-bar, .acts-bar, .foundbar, .tools { position: relative; z-index: 4; }
.fx-flash { position: fixed; inset: 0; z-index: 90; pointer-events: none; }
.fx-banner { position: fixed; left: 0; right: 0; top: 38%; z-index: 95; text-align: center; font-size: clamp(36px, 11vw, 64px); color: #fff; pointer-events: none;
  text-shadow: 0 4px 0 #E07AA8, 0 0 24px #FFB8D6, 0 0 48px #FFE59A; animation: bannerIn 1.6s cubic-bezier(.2, 1.4, .4, 1) forwards; letter-spacing: .04em; }
.fx-banner.gold { text-shadow: 0 4px 0 #C99234, 0 0 24px #FFE59A, 0 0 48px #FFB8D6; }
@keyframes bannerIn { 0% { transform: scale(2.4) rotate(-6deg); opacity: 0; } 18% { transform: scale(.92) rotate(2deg); opacity: 1; } 28% { transform: scale(1.04) rotate(0); } 80% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.1) translateY(-30px); } }

/* ---- うえの バー ---- */
.topbar {
  position: relative; z-index: 5; display: flex; align-items: center; gap: 8px;
  padding: calc(8px + var(--safe-t)) 10px 6px; min-height: 72px; pointer-events: none;
}
.topbar > * { pointer-events: auto; }
.topbar .title {
  flex: 1; text-align: center; font-size: clamp(18px, 5vw, 26px); color: var(--ink);
  text-shadow: 0 2px 0 #fff, 2px 0 0 #fff, -2px 0 0 #fff, 0 -2px 0 #fff;
  pointer-events: none;
}
.rbtn {
  width: 58px; height: 58px; flex: none; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0%, #fff 55%, #F3ECFF 100%);
  border: 3px solid var(--frame); box-shadow: 0 4px 0 #CDBDF0, 0 6px 14px rgba(120, 90, 190, .18);
  display: grid; place-items: center; transition: transform .12s;
}
.rbtn:active { transform: translateY(3px) scale(.96); box-shadow: 0 1px 0 #CDBDF0; }
.rbtn .ico { width: 70%; height: 70%; }
.rbtn.on { border-color: var(--pink-d); }

/* ---- おおきな いりぐち ---- */
.entry-row {
  position: relative; z-index: 4; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(6px, 2vw, 14px);
  padding: 10px clamp(8px, 3vw, 20px) calc(14px + var(--safe-b)); max-width: 760px; width: 100%; margin: 0 auto;
}
.entry {
  position: relative; aspect-ratio: 1 / 1.08; border-radius: 26px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 4px solid #fff; box-shadow: 0 5px 0 rgba(140, 111, 214, .35), 0 10px 22px rgba(120, 90, 190, .22);
  transition: transform .12s; min-height: 72px;
}
.entry:active { transform: translateY(4px) scale(.97); }
.entry .ico { width: 62%; height: 58%; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .08)); }
.entry span {
  font-size: clamp(12px, 3.3vw, 19px); color: #fff; letter-spacing: .02em; line-height: 1.1; margin-top: 2px;
  text-shadow: 0 2px 0 rgba(90, 60, 150, .45), 0 0 6px rgba(90, 60, 150, .25);
}
.entry.e1 { background: linear-gradient(160deg, #FFD3E6, #F29CC2); }
.entry.e2 { background: linear-gradient(160deg, #D6E6FF, #8FB2EE); }
.entry.e3 { background: linear-gradient(160deg, #E6DBFF, #A88FEA); }
.entry.e4 { background: linear-gradient(160deg, #FFF0C2, #F5C55C); }
.badge {
  position: absolute; top: -8px; right: -6px; width: 34px; height: 34px; pointer-events: none;
  animation: twinkle 1.6s ease-in-out infinite;
}
@keyframes twinkle { 0%, 100% { transform: scale(.85) rotate(0); opacity: .8; } 50% { transform: scale(1.1) rotate(20deg); opacity: 1; } }

/* ---- ホーム ---- */
.home .scene { position: absolute; inset: 0; }
.home .scene svg { width: 100%; height: 100%; }
.logo-wrap { position: absolute; z-index: 5; left: 50%; transform: translateX(-50%); top: calc(8px + var(--safe-t)); width: min(calc(100vw - 150px), 460px); pointer-events: none; display: flex; flex-direction: column; align-items: center; animation: logoIn .9s cubic-bezier(.2, 1.5, .4, 1) both; }
.logo { width: 100%; filter: drop-shadow(0 3px 6px rgba(140, 111, 214, .3)); animation: logoFloat 4s ease-in-out infinite; }
@keyframes logoIn { from { transform: translate(-50%, -40px) scale(.6); opacity: 0; } }
@keyframes logoFloat { 50% { transform: translateY(4px); } }
.lvwrap { margin-top: -4px; }
.home .topbar { position: absolute; left: 0; right: 0; top: 0; justify-content: space-between; }
.home .entry-row { position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; }
.tapable { cursor: pointer; }

/* キャラクターの うごき */
.bounce { animation: bounce .55s cubic-bezier(.3, 1.6, .5, 1); transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes bounce { 0% { transform: scale(1, 1); } 30% { transform: scale(1.04, .95) translateY(0); } 60% { transform: scale(.97, 1.04) translateY(-4%); } 100% { transform: none; } }
.hop { animation: hop .6s ease-out; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes hop { 0%, 100% { transform: none; } 40% { transform: translateY(-18%) scale(.96, 1.04); } 70% { transform: translateY(0) scale(1.05, .95); } }
.wiggle { animation: wiggle .5s ease-in-out; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes wiggle { 0%, 100% { transform: none; } 25% { transform: rotate(-4deg); } 50% { transform: rotate(3deg); } 75% { transform: rotate(-2deg); } }
.breathe { animation: breathe 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes breathe { 0%, 100% { transform: none; } 50% { transform: scale(1.006, .994); } }
.floaty { animation: floaty 3s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3%); } }

/* ふきだし・こうか */
#fx { position: fixed; inset: 0; pointer-events: none; z-index: 50; overflow: hidden; }
.bubble {
  position: absolute; transform: translate(-50%, -100%); background: #fff; border: 3px solid var(--frame);
  border-radius: 22px; padding: 6px 12px; display: flex; gap: 4px; align-items: center; white-space: nowrap;
  box-shadow: 0 6px 14px rgba(120, 90, 190, .2); animation: bubbleIn 1.8s ease forwards; font-size: 18px; color: var(--ink);
}
.bubble::after { content: ""; position: absolute; left: 50%; bottom: -12px; margin-left: -8px; border: 8px solid transparent; border-top-color: #fff; border-bottom: 0; }
.bubble .ico { width: 30px; height: 30px; }
@keyframes bubbleIn { 0% { opacity: 0; transform: translate(-50%, -80%) scale(.6); } 12% { opacity: 1; transform: translate(-50%, -100%) scale(1.06); } 20% { transform: translate(-50%, -100%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -115%); } }
.pfx { position: absolute; width: 28px; height: 28px; margin: -14px 0 0 -14px; animation: pfx 1.1s ease-out forwards; }
.pfx svg { width: 100%; height: 100%; }
@keyframes pfx { 0% { opacity: 0; transform: translate(0, 0) scale(.3); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1) rotate(var(--rot)); } }
.fly { position: absolute; width: 40px; height: 40px; margin: -20px; animation: fly 2.4s ease-in forwards; }
.fly svg { width: 100%; height: 100%; }
@keyframes fly { 0% { opacity: 0; transform: translate(0, 0); } 10% { opacity: 1; } 30% { transform: translate(calc(var(--dx) * .3), calc(var(--dy) * .2)) rotate(10deg); } 60% { transform: translate(calc(var(--dx) * .6), calc(var(--dy) * .6)) rotate(-10deg); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)); } }

/* ---- きせかえ ---- */
.dress { background: linear-gradient(180deg, #F6F0FF 0%, #FFF4FA 60%, #FFF9F0 100%); }
.dress-main { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.preview { position: relative; flex: 1 1 52%; min-height: 0; }
.preview .bg { position: absolute; inset: 0; }
.preview .bg svg { width: 100%; height: 100%; }
.preview .char { position: absolute; inset: 2% 18% 0 18%; display: flex; justify-content: center; }
.preview .char svg { height: 100%; width: auto; max-width: 100%; overflow: visible; }
.preview .who { position: absolute; left: 8px; top: 4px; z-index: 3; display: flex; flex-direction: column; gap: 6px; }
.wface { width: 56px; height: 56px; border-radius: 50%; background: #fff; border: 3px solid #EDE5FB; overflow: hidden; box-shadow: 0 3px 0 #E2D6F6; }
.wface svg { width: 100%; height: 100%; }
.wface.sel { border-color: var(--pink-d); box-shadow: 0 0 0 3px #FFE3EF; transform: scale(1.08); }
.preview .pal { position: absolute; left: 2%; bottom: 2%; width: 22%; max-width: 120px; }
.preview .side { position: absolute; right: 8px; top: 4px; display: flex; flex-direction: column; gap: 8px; z-index: 3; }
.sbtn { display: flex; flex-direction: column; align-items: center; gap: 0; font-size: 11px; color: var(--ink); }
.sbtn .rbtn { width: 56px; height: 56px; }
.henshin-btn {
  position: absolute; right: 10px; bottom: 10px; z-index: 3; height: 64px; padding: 0 22px 0 14px; border-radius: 40px;
  background: linear-gradient(135deg, #FFB8D6, #B89CF4); color: #fff; font-size: 22px; display: flex; align-items: center; gap: 4px;
  border: 4px solid #fff; box-shadow: 0 5px 0 #9A7FDB, 0 10px 20px rgba(120, 90, 190, .3); text-shadow: 0 2px 0 rgba(90, 60, 150, .4);
  animation: glow 2.2s ease-in-out infinite;
}
.henshin-btn .ico { width: 44px; height: 44px; }
.henshin-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 #9A7FDB; }
@keyframes glow { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.08) drop-shadow(0 0 10px rgba(255, 230, 140, .9)); } }
.panel {
  flex: 1 1 48%; min-height: 0; display: flex; flex-direction: column; background: #fff; border-radius: 28px 28px 0 0;
  border: 3px solid var(--frame); border-bottom: 0; box-shadow: 0 -6px 18px rgba(120, 90, 190, .12); padding-bottom: var(--safe-b);
}
.tabs { display: flex; gap: 6px; padding: 10px 10px 6px; overflow-x: auto; scrollbar-width: none; flex: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: none; width: 60px; height: 60px; border-radius: 18px; background: var(--lav-l); border: 3px solid transparent;
  display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 9.5px; color: var(--lav-d); position: relative;
}
.tab svg { width: 38px; height: 34px; }
.tab.sel { background: #fff; border-color: var(--lav); box-shadow: 0 3px 0 var(--frame); color: var(--ink); }
.tab .dot { position: absolute; top: 2px; right: 2px; width: 12px; height: 12px; border-radius: 50%; background: #FF8FB8; border: 2px solid #fff; }
.grid {
  flex: 1; overflow-y: auto; padding: 6px 10px 14px; display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); align-content: start; -webkit-overflow-scrolling: touch;
}
.grid-h { grid-column: 1 / -1; font-size: 15px; color: var(--lav-d); margin: 2px 4px -4px; }
.cell {
  position: relative; aspect-ratio: 1; border-radius: 20px; background: linear-gradient(180deg, #FFFFFF, #F7F2FF);
  border: 3px solid #EDE5FB; display: grid; place-items: center; transition: transform .15s, border-color .15s;
}
.cell svg { width: 86%; height: 86%; }
.cell.sel { border-color: var(--pink-d); transform: scale(1.06); box-shadow: 0 0 0 4px #FFE3EF, 0 6px 14px rgba(224, 122, 168, .25); background: linear-gradient(180deg, #FFF6FA, #FFE9F2); }
.cell.sel::after { content: ""; position: absolute; right: -6px; top: -6px; width: 26px; height: 26px; border-radius: 50%; background: var(--pink-d) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M24,52 L42,70 L78,32' fill='none' stroke='white' stroke-width='14' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat; border: 2px solid #fff; }
.cell:active { transform: scale(.95); }
.cell .new { position: absolute; left: -4px; top: -6px; background: #FF8FB8; color: #fff; font-size: 11px; padding: 1px 6px; border-radius: 10px; border: 2px solid #fff; }
.cell.empty svg { opacity: .5; }

/* ---- へんしん ---- */
.henshin-stage { background: radial-gradient(ellipse at 50% 55%, #FFFFFF 0%, #FFE3EF 25%, #E58FBE 60%, #8E5BB8 100%); }
.henshin-stage .stagebg { position: absolute; inset: 0; }
.henshin-stage .stagebg svg { width: 100%; height: 100%; }
.hs-char { position: absolute; left: 50%; top: 7%; height: 70%; transform: translateX(-50%); aspect-ratio: 400 / 680; max-width: 92vw; }
.hs-char svg { width: 100%; height: 100%; overflow: visible; }
.hs-char .silhouette { filter: brightness(0) invert(1) drop-shadow(0 0 18px #fff); }
.hs-ring { position: absolute; left: 50%; top: 45%; width: min(90vw, 70vh); aspect-ratio: 1; transform: translate(-50%, -50%); animation: spin 2.2s linear infinite; pointer-events: none; }
.hs-ring svg { width: 100%; height: 100%; }
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.hs-flash { position: absolute; inset: 0; background: radial-gradient(circle, #fff 30%, rgba(255, 255, 255, 0) 75%); opacity: 0; pointer-events: none; }
.hs-flash.go { animation: flash 1s ease-out forwards; }
@keyframes flash { 0% { opacity: 0; } 30% { opacity: .95; } 100% { opacity: 0; } }
.hs-title { position: absolute; left: 0; right: 0; top: calc(12px + var(--safe-t)); text-align: center; font-size: clamp(26px, 8vw, 46px); color: #fff; text-shadow: 0 3px 0 #9A7FDB, 0 0 18px #F6B7D2; opacity: 0; transition: opacity .4s, transform .4s; transform: scale(.8); }
.hs-title.show { opacity: 1; transform: none; }
.hs-bunny { position: absolute; left: 4%; bottom: 20%; width: 24%; max-width: 150px; opacity: 0; transition: opacity .4s; }
.hs-bunny.show { opacity: 1; }
.hs-actions { position: absolute; left: 0; right: 0; bottom: calc(12px + var(--safe-b)); display: flex; justify-content: center; gap: 6px; padding: 0 10px; opacity: 0; transition: opacity .4s; pointer-events: none; }
.hs-actions.show { opacity: 1; pointer-events: auto; }
.pill {
  height: 62px; padding: 0 14px; white-space: nowrap; border-radius: 34px; background: #fff; border: 4px solid var(--frame); color: var(--ink);
  font-size: clamp(14px, 4vw, 19px); display: flex; align-items: center; gap: 6px; box-shadow: 0 4px 0 #CDBDF0;
}
.pill .ico { width: 34px; height: 34px; }
.pill:active { transform: translateY(3px); box-shadow: 0 1px 0 #CDBDF0; }
.pill.main { background: linear-gradient(135deg, #FFB8D6, #B89CF4); color: #fff; border-color: #fff; text-shadow: 0 2px 0 rgba(90, 60, 150, .4); }
.hs-actions .pill { padding: 0 10px; font-size: clamp(13px, 3.6vw, 19px); }
.hs-actions .pill .ico { width: 28px; height: 28px; }
.skiphint { position: absolute; right: 12px; bottom: calc(12px + var(--safe-b)); color: #fff; font-size: 14px; opacity: .8; }

/* ---- たんけん ---- */
.explore { background: linear-gradient(#DDEEFF, #E3F6EA); }
.explore.house { background: linear-gradient(#F3ECFF, #F5E3D2); }
.stage { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.stage > svg { width: 100%; height: 100%; }
.spot { cursor: pointer; }
.spot:active { filter: brightness(1.05); }
.areas { margin-left: auto; display: flex; gap: 6px; background: #fff; padding: 4px; border-radius: 40px; border: 3px solid var(--frame); }
.areas .ico { width: 28px; height: 28px; }
.areas button { height: 50px; padding: 0 12px; white-space: nowrap; border-radius: 30px; font-size: 16px; color: var(--lav-d); display: flex; align-items: center; gap: 4px; }
.areas button.sel { background: linear-gradient(135deg, #FFD3E6, #C9B5F5); color: #fff; text-shadow: 0 1px 0 rgba(90, 60, 150, .4); }
.foundbar {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px calc(10px + var(--safe-b)); background: rgba(255, 255, 255, .85); border-top: 3px solid var(--frame);
  overflow-x: auto; scrollbar-width: none; flex: none; min-height: 76px;
}
.foundbar .slot { flex: none; width: 54px; height: 54px; border-radius: 16px; background: #fff; border: 3px dashed #E2D6F6; display: grid; place-items: center; }
.foundbar .slot.got { border: 3px solid var(--yellow); background: #FFFBEA; }
.foundbar .slot svg { width: 86%; height: 86%; }
.pyon { position: absolute; width: 18%; max-width: 110px; cursor: pointer; }

/* みつけた！ */
.modal { position: fixed; inset: 0; z-index: 40; display: flex; overflow-y: auto; -webkit-overflow-scrolling: touch; background: rgba(73, 59, 107, .35); animation: fadeIn .2s; padding: 52px 16px 16px; }
.modal > .card { margin: auto; flex: none; }
.card.two .stampbig { width: 34% !important; margin: 0 auto; }
.card.two .nm { margin-bottom: 8px; }
.prizes { display: flex; gap: 8px; justify-content: center; }
.prizes .prize { flex: 1 1 0; min-width: 0; }
.prizes .prize .ptitle { font-size: 15px; }
.prizes .prize .pimg { width: 80px; height: 80px; }
@keyframes fadeIn { from { opacity: 0; } }
.card {
  position: relative; width: min(92vw, 420px); background: linear-gradient(180deg, #FFFFFF, #FFF6FB); border-radius: 32px; border: 4px solid var(--frame);
  padding: 22px 18px 18px; text-align: center; box-shadow: 0 16px 40px rgba(73, 59, 107, .3); animation: pop .45s cubic-bezier(.3, 1.6, .5, 1);
}
@keyframes pop { from { transform: scale(.5); opacity: 0; } }
.card h2 { margin: 0; font-size: 30px; color: var(--pink-d); text-shadow: 0 2px 0 #FFE3EF; }
.card .big { position: relative; isolation: isolate; width: 62%; margin: 6px auto; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, #FFFBEA 0%, #FFF0B8 55%, rgba(255, 240, 184, 0) 72%); animation: floaty 2.4s ease-in-out infinite; }
.card .big svg { width: 82%; height: 82%; }
.card .nm { font-size: 22px; margin: 2px 0 12px; }
.card .acts { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.card .pyon-mini { position: absolute; left: -16px; top: -44px; width: 92px; }
.rays { position: absolute; inset: -25%; z-index: -1; background: repeating-conic-gradient(from 0deg, rgba(255, 226, 138, .35) 0 10deg, rgba(255, 226, 138, 0) 10deg 20deg); border-radius: 50%; animation: spin2 12s linear infinite; mask: radial-gradient(circle, #000 30%, transparent 70%); -webkit-mask: radial-gradient(circle, #000 30%, transparent 70%); }
@keyframes spin2 { to { transform: rotate(360deg); } }

/* ---- おへやづくり ---- */
.roommk { background: linear-gradient(#F6F0FF, #FFF9F0); }
.roomwrap { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 6px; }
.roomwrap > svg { width: 100%; height: 100%; touch-action: none; }
.roomwrap.placing > svg { cursor: crosshair; }
.fitem { cursor: grab; }
.fitem.sel .selbox { display: inline; }
.selbox { display: none; }
.tools { display: flex; gap: 8px; justify-content: center; padding: 6px 8px; flex: none; flex-wrap: wrap; min-height: 74px; align-items: center; }
.tools .lbl { font-size: 15px; color: var(--lav-d); }
.tbtn { display: flex; flex-direction: column; align-items: center; font-size: 11px; gap: 0; }
.tbtn .rbtn { width: 56px; height: 56px; }
.choices { display: flex; gap: 8px; overflow-x: auto; padding: 6px 10px; scrollbar-width: none; }
.choice { flex: none; width: 64px; height: 64px; border-radius: 18px; border: 3px solid #EDE5FB; overflow: hidden; background: #fff; }
.choice.sel { border-color: var(--pink-d); box-shadow: 0 0 0 3px #FFE3EF; }
.choice svg { width: 100%; height: 100%; }
.palette { display: flex; gap: 10px; overflow-x: auto; padding: 8px 10px calc(12px + var(--safe-b)); background: #fff; border-top: 3px solid var(--frame); flex: none; scrollbar-width: thin; }
.fcell { position: relative; flex: none; width: 84px; height: 84px; border-radius: 20px; border: 3px solid #EDE5FB; background: linear-gradient(#fff, #F7F2FF); display: grid; place-items: center; }
.fcell svg { width: 84%; height: 84%; }
.fcell.sel { border-color: var(--pink-d); transform: scale(1.05); box-shadow: 0 0 0 4px #FFE3EF; }
.fcell .new { position: absolute; left: -4px; top: -6px; background: #FF8FB8; color: #fff; font-size: 11px; padding: 1px 6px; border-radius: 10px; border: 2px solid #fff; }
.roomwrap > .hint, .screen > .hint { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); background: #fff; border: 3px solid var(--pink); border-radius: 30px; padding: 6px 14px; font-size: 16px; display: flex; align-items: center; gap: 6px; pointer-events: none; animation: bob 1.2s ease-in-out infinite; white-space: nowrap; z-index: 3; }
.roomwrap > .hint .ico, .screen > .hint .ico { width: 28px; height: 28px; }
@keyframes bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 4px); } }

/* ---- なかま ---- */
.friends { background: linear-gradient(#FFF0F6, #FFF9F0); }
.fr-bar { display: flex; gap: 8px; padding: 8px 10px; overflow-x: auto; flex: none; background: #fff; border-top: 3px solid var(--frame); scrollbar-width: none; align-items: center; }
.fr-face { position: relative; flex: none; width: 66px; height: 66px; border-radius: 50%; border: 3px solid #EDE5FB; background: #FFF6FA; overflow: hidden; }
.fr-face svg { width: 100%; height: 100%; }
.fr-face.in { border-color: var(--mint-d); box-shadow: 0 0 0 3px #DDF5EC; }
.fr-face.locked { opacity: .55; }
.fr-face .tag { position: absolute; right: 0; bottom: 0; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 2px solid #EDE5FB; }
.fr-face .tag svg { width: 100%; height: 100%; }
.acts-bar { display: flex; gap: 8px; padding: 8px 10px calc(10px + var(--safe-b)); justify-content: center; flex: none; background: #fff; flex-wrap: wrap; }
.acts-bar .pill { height: 56px; }
.acts-bar .pill.sel { border-color: var(--pink-d); background: #FFF0F6; }
.chr { cursor: grab; }
.shutter { position: fixed; inset: 0; background: #fff; z-index: 60; pointer-events: none; animation: shutter .5s ease-out forwards; }
@keyframes shutter { 0% { opacity: .95; } 100% { opacity: 0; } }
.spot-light { pointer-events: none; }

/* ---- アルバム ---- */
.album { background: linear-gradient(#F6F0FF, #FFF9F0); }
.album-body { flex: 1; overflow-y: auto; padding: 0 12px calc(20px + var(--safe-b)); }
.sec-h { display: flex; align-items: center; gap: 6px; font-size: 18px; margin: 14px 4px 8px; color: var(--ink); }
.sec-h .ico { width: 30px; height: 30px; }
.agrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.photo { position: relative; background: #fff; border-radius: 18px; padding: 8px 8px 6px; border: 3px solid #EDE5FB; box-shadow: 0 4px 10px rgba(120, 90, 190, .12); }
.photo .pic { aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; background: #F6F0FF; }
.photo .pic svg { width: 100%; height: 100%; }
.photo .cap { font-size: 12px; text-align: center; color: var(--lav-d); margin-top: 4px; }
.photo .del { position: absolute; right: -8px; top: -8px; width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 3px solid #EDE5FB; display: grid; place-items: center; }
.photo .del svg { width: 70%; height: 70%; }
.photo:nth-child(4n+1) { transform: rotate(-1.5deg); }
.photo:nth-child(4n+3) { transform: rotate(1.2deg); }
.cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 8px; }
.cgrid .slot { aspect-ratio: 1; border-radius: 16px; background: #fff; border: 3px solid #EDE5FB; display: grid; place-items: center; }
.cgrid .slot.got { border-color: var(--yellow); background: #FFFBEA; }
.cgrid .slot svg { width: 84%; height: 84%; }
.empty-msg { text-align: center; color: #A897C8; font-size: 15px; padding: 18px; background: rgba(255, 255, 255, .7); border-radius: 18px; border: 3px dashed #E2D6F6; }
.viewer { position: fixed; inset: 0; z-index: 45; background: rgba(73, 59, 107, .55); display: grid; place-items: center; padding: 16px; animation: fadeIn .2s; }
.viewer .pic { width: min(92vw, 70vh); aspect-ratio: 4 / 5; background: #fff; border-radius: 24px; border: 6px solid #fff; overflow: hidden; box-shadow: 0 20px 50px rgba(0, 0, 0, .3); }
.viewer .pic svg { width: 100%; height: 100%; }

#note { position: fixed; left: 8px; bottom: 8px; z-index: 70; font: 500 11px system-ui, sans-serif; color: #8a7aa8; background: rgba(255, 255, 255, .9); border-radius: 8px; padding: 4px 8px; }

/* よこむき（タブレット） */
@media (min-aspect-ratio: 1/1) {
  .dress-main { flex-direction: row; }
  .preview { flex: 1 1 50%; }
  .panel { flex: 1 1 50%; border-radius: 28px 0 0 0; border-right: 0; }
  .entry-row { max-width: 640px; }
  .entry { aspect-ratio: 1.15 / 1; }
  .logo-wrap { left: 82px; transform: none; width: min(34vw, 330px); animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* ---- なかまと あそぶ ---- */
.play { background: linear-gradient(#FFF0F6, #F6F0FF); }
.play-body { flex: 1; overflow-y: auto; padding: 0 12px calc(16px + var(--safe-b)); }
.mates { display: flex; justify-content: center; gap: 6px; margin: 0 0 10px; flex-wrap: wrap; }
.mate { width: 54px; height: 54px; border-radius: 50%; background: #fff; border: 3px solid #EDE5FB; overflow: hidden; }
.mate svg { width: 100%; height: 100%; }
.mate.hop { animation: hop .6s ease-out; }
.gcards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; max-width: 640px; margin: 0 auto; }
.gcard { position: relative; border-radius: 26px; padding: 12px 8px 12px; display: flex; flex-direction: column; align-items: center; color: #fff; border: 4px solid #fff; box-shadow: 0 5px 0 rgba(140, 111, 214, .3), 0 10px 20px rgba(120, 90, 190, .18); text-shadow: 0 2px 0 rgba(90, 60, 150, .4); min-height: 150px; justify-content: center; }
.gcard:active { transform: translateY(4px) scale(.98); }
.gcard .gi { width: 70px; height: 70px; }
.gcard .gi svg { width: 100%; height: 100%; }
.gcard .gn { font-size: 20px; margin-top: 2px; }
.gcard .gs { font-size: 12px; opacity: .95; }
.gcard.g1 { background: linear-gradient(160deg, #D6E6FF, #8FB2EE); }
.gcard.g2 { background: linear-gradient(160deg, #FFD3E6, #F29CC2); }
.gcard.g3 { background: linear-gradient(160deg, #CFF2E5, #6FC3A8); }
.gcard.g4 { background: linear-gradient(160deg, #FFF0C2, #F5C55C); }
.stampcard { max-width: 640px; margin: 16px auto 0; background: #fff; border-radius: 24px; border: 3px solid var(--frame); padding: 10px 12px 14px; }
.sc-h { display: flex; align-items: center; gap: 6px; font-size: 17px; margin-bottom: 8px; }
.sc-h .ico { width: 28px; height: 28px; }
.sc-n { margin-left: auto; color: var(--pink-d); }
.sc-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; }
.sc-grid .st { aspect-ratio: 1; border-radius: 50%; border: 3px dashed #E2D6F6; display: grid; place-items: center; color: #C9B8E6; font-size: 18px; background: #FBF8FF; }
.sc-grid .st svg { width: 86%; height: 86%; }
.sc-grid .st.gift { border-color: #FFD772; background: #FFFBEA; }
.sc-grid .st.gift:not(.got) svg { opacity: .55; filter: grayscale(.3); }
.sc-grid .st.got { border: 3px solid #F6B7D2; background: #FFF0F6; }
.prize { background: #FFFBEA; border: 3px solid #FFE28A; border-radius: 20px; padding: 6px; margin: 0 0 12px; }
.prize .ptitle { display: flex; align-items: center; justify-content: center; gap: 4px; color: #D29A3A; font-size: 18px; }
.prize .ptitle .ico { width: 26px; height: 26px; }
.prize .pimg { width: 96px; height: 96px; margin: 0 auto; }
.prize .pimg svg { width: 100%; height: 100%; }
.prize .pname { font-size: 16px; }
.nexthint { font-size: 14px; color: var(--lav-d); margin: -6px 0 12px; }
.stampbig { width: 46% !important; }
.fb-l { flex: none; font-size: 14px; color: var(--lav-d); }
.hider.peek { animation: peek 2.4s ease-in-out infinite; transform-box: fill-box; }
@keyframes peek { 0%, 70%, 100% { translate: 0 0; } 80% { translate: 0 -6px; } 90% { translate: 0 2px; } }

.mem-top { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 10px 6px; flex: none; }
.mem-top .mates { margin: 0; }
.mem-top .mate { width: 46px; height: 46px; }
.pairs { display: flex; gap: 4px; }
.pp { width: 30px; height: 30px; }
.pp svg { width: 100%; height: 100%; }
.mem-wrap { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 6px 12px calc(14px + var(--safe-b)); }
.mem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: min(100%, calc((100dvh - 230px) * .62)); }
.mcard { position: relative; aspect-ratio: 100 / 130; perspective: 600px; }
.mcard .face, .mcard .back { position: absolute; inset: 0; border-radius: 16px; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .35s; display: grid; place-items: center; }
.mcard .face { background: #fff; border: 4px solid #EDE5FB; transform: rotateY(180deg); }
.mcard .face svg { width: 84%; height: 84%; }
.mcard .back svg { width: 100%; height: 100%; }
.mcard.open .face { transform: rotateY(0); }
.mcard.open .back { transform: rotateY(-180deg); }
.mcard.done .face { border-color: #FFD772; background: #FFFBEA; box-shadow: 0 0 0 3px #FFF0B8; }
@media (min-aspect-ratio: 1/1) { .mem-grid { grid-template-columns: repeat(4, 1fr); width: min(100%, calc((100dvh - 210px) * 1.05)); } }

.bal-meter { display: flex; align-items: center; gap: 10px; padding: 0 16px 8px; flex: none; font-size: 18px; }
.bm-bar { flex: 1; height: 22px; border-radius: 12px; background: #fff; border: 3px solid var(--frame); overflow: hidden; }
.bm-fill { height: 100%; width: 0; background: linear-gradient(90deg, #FFB8D6, #FFE28A); transition: width .3s; }
.bal-stage { position: relative; flex: 1; overflow: hidden; background: linear-gradient(#CFE6FF, #FFF0F6 70%, #E3F6EA); }
.bln { position: absolute; bottom: -160px; animation: rise linear forwards; z-index: 2; touch-action: none; }
.bln svg { width: 100%; height: 100%; pointer-events: none; }
.bln.gold { filter: drop-shadow(0 0 10px #FFE28A); }
@keyframes rise { 0% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(calc(-50dvh - 80px)) rotate(3deg); } 100% { transform: translateY(calc(-100dvh - 220px)) rotate(-3deg); } }
.bal-mates { position: absolute; left: 0; right: 0; bottom: calc(4px + var(--safe-b)); display: flex; justify-content: center; align-items: flex-end; gap: 2px; pointer-events: none; z-index: 1; }
.bal-mates .bm { width: 22%; max-width: 120px; aspect-ratio: 400 / 680; }
.bal-mates .bm:last-child { width: 15%; max-width: 80px; aspect-ratio: 200 / 250; }
.bal-mates .bm svg { width: 100%; height: 100%; }
.bal-mates .bm.hop { animation: hop .6s ease-out; }

.cake-stage { flex: 1; min-height: 0; display: flex; justify-content: center; padding: 0 8px; }
.cake-stage svg { width: 100%; height: 100%; }
.cake-steps { display: flex; gap: 6px; padding: 6px 10px; flex: none; justify-content: center; flex-wrap: wrap; }
.cstep { height: 52px; padding: 0 12px; border-radius: 28px; background: #fff; border: 3px solid #EDE5FB; font-size: 15px; display: flex; align-items: center; gap: 4px; color: var(--lav-d); }
.cstep b { width: 26px; height: 26px; border-radius: 50%; background: var(--lav-l); display: grid; place-items: center; font-size: 14px; }
.cstep.sel { border-color: var(--pink-d); color: var(--ink); background: #FFF0F6; }
.cstep.sel b { background: var(--pink-d); color: #fff; }
.cdone { height: 52px; }
.cake-opts { display: flex; gap: 10px; overflow-x: auto; padding: 8px 10px calc(12px + var(--safe-b)); background: #fff; border-top: 3px solid var(--frame); flex: none; justify-content: safe center; }
.copt { flex: none; width: 84px; height: 84px; border-radius: 20px; border: 3px solid #EDE5FB; background: linear-gradient(#fff, #F7F2FF); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 11px; color: var(--lav-d); }
.copt svg { width: 80%; height: 70%; }
.copt .ico { width: 50%; height: 50%; }
.copt.sel { border-color: var(--pink-d); box-shadow: 0 0 0 3px #FFE3EF; }
.copt:active { transform: scale(.94); }
.flame { animation: flick .5s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes flick { to { transform: scale(.9, 1.1); } }

.bal-bg { position: absolute; inset: 0; opacity: .9; }
.bal-bg svg { width: 100%; height: 100%; }
.explore.hill { background: linear-gradient(#3A3D7C, #A9D8CC); }
.quest { display: flex; align-items: center; gap: 8px; padding: 0 10px 6px; flex: none; position: relative; z-index: 4; }
.pieces { display: flex; gap: 2px; background: rgba(255, 255, 255, .85); border: 3px solid var(--frame); border-radius: 30px; padding: 4px 8px; }
.pieces .pc { width: 28px; height: 28px; }
.pieces .pc svg { width: 100%; height: 100%; }
.pieces .pc.on { animation: pop .4s cubic-bezier(.3, 1.6, .5, 1); }
.mission { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; background: #fff; border: 3px solid #F6B7D2; border-radius: 30px; padding: 3px 8px 3px 3px; font-size: 13px; }
.mission .mface { width: 40px; height: 40px; flex: none; border-radius: 50%; overflow: hidden; background: #FFF0F6; }
.mission .mface svg { width: 100%; height: 100%; }
.mission .mtxt { flex: 1; min-width: 0; line-height: 1.2; }
.mission .mitem { position: relative; width: 42px; height: 42px; flex: none; border-radius: 12px; background: #FFFBEA; border: 2px dashed #FFD772; }
.mission .mitem svg { width: 100%; height: 100%; }
.mission .mitem.done { border-style: solid; }
.mission .mitem i { position: absolute; right: -8px; bottom: -8px; width: 26px; height: 26px; background: #fff; border-radius: 50%; }
.mission .mitem i .ico { width: 100%; height: 100%; }
.bubble .radar { display: flex; gap: 0; }
.bubble .radar .ico { width: 24px; height: 24px; }
.thanks { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 16px; color: var(--pink-d); margin: -6px 0 12px; }
.thanks .mface { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: #FFF0F6; }
.thanks .mface svg { width: 100%; height: 100%; }
.chest { cursor: pointer; }
.areas button { padding: 0 9px; font-size: 15px; }

/* ---- おはなし ---- */
.stories { background: linear-gradient(#FFF0F6, #F6F0FF); }
.story-list { flex: 1; overflow-y: auto; padding: 4px 14px calc(16px + var(--safe-b)); display: grid; gap: 14px; align-content: start; max-width: 680px; width: 100%; margin: 0 auto; }
.story-card { position: relative; display: flex; align-items: center; gap: 10px; min-height: 150px; border-radius: 28px; border: 4px solid #fff; padding: 8px 14px 8px 6px; color: #fff; text-align: left; box-shadow: 0 5px 0 rgba(140, 111, 214, .3), 0 10px 22px rgba(120, 90, 190, .2); overflow: hidden; }
.story-card:active { transform: translateY(4px); }
.story-card.s1 { background: linear-gradient(135deg, #FFB8D6, #B89CF4); }
.story-card.s2 { background: linear-gradient(135deg, #FFD3A8, #F29CC2); }
.story-card.s3 { background: linear-gradient(135deg, #BDEBDC, #8FB2EE); }
.story-card .sc-art { flex: none; width: 120px; height: 150px; }
.story-card .sc-art svg { width: 100%; height: 100%; }
.story-card .sc-txt { display: flex; flex-direction: column; gap: 4px; text-shadow: 0 2px 0 rgba(90, 60, 150, .35); }
.story-card b { font-size: clamp(19px, 5.4vw, 26px); line-height: 1.2; }
.story-card small { font-size: 13px; opacity: .95; }
.story-card .sc-medal { display: inline-flex; align-items: center; gap: 2px; align-self: flex-start; background: rgba(255, 255, 255, .9); color: #C2548A; text-shadow: none; border-radius: 20px; padding: 2px 10px; font-size: 14px; }
.story-card .sc-medal .ico { width: 22px; height: 22px; }

.story { background: #2E2458; }
.st-stage { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.st-bg { position: absolute; inset: 0; }
.st-bg svg { width: 100%; height: 100%; }
.st-actors { position: absolute; inset: 0; }
.st-actor { position: absolute; aspect-ratio: 400 / 680; transition: left .6s ease, bottom .6s ease, height .6s ease; pointer-events: none; }
.st-actor[data-a=pyonta] { aspect-ratio: 200 / 250; }
.st-actor[data-a=doctor], .st-actor[data-a=keeper], .st-actor[data-a=pat], .st-actor[data-a=stylist], .st-actor[data-a=host] { aspect-ratio: 240 / 330; }
.st-actor[data-a=dish] { aspect-ratio: 300 / 190; }
.st-actor .st-in { width: 100%; height: 100%; transform-origin: 50% 100%; }
.st-actor svg { width: 100%; height: 100%; overflow: visible; }
.st-actor.enter { animation: actIn .45s ease-out; }
.st-actor.leave { opacity: 0; transition: opacity .3s; }
@keyframes actIn { from { opacity: 0; translate: 0 8%; } }
.st-in.walk { animation: walk .45s ease-in-out infinite alternate; }
@keyframes walk { from { transform: translateY(0) rotate(-1.5deg); } to { transform: translateY(-3%) rotate(1.5deg); } }
.st-in.bounce { animation: bounce .55s cubic-bezier(.3, 1.6, .5, 1); }
.st-top { position: absolute; left: 0; right: 0; top: 0; justify-content: space-between; }
.st-top .title { flex: 1; display: flex; justify-content: center; }
.st-title { background: rgba(255, 255, 255, .9); border: 3px solid var(--frame); border-radius: 30px; padding: 4px 14px; font-size: clamp(14px, 4vw, 19px); text-shadow: none; }
.st-dialog { position: absolute; left: 10px; right: 10px; bottom: calc(10px + var(--safe-b)); z-index: 20; display: flex; gap: 10px; align-items: flex-start; background: rgba(255, 255, 255, .96); border: 4px solid #F6B7D2; border-radius: 26px; padding: 10px 12px 12px; min-height: 120px; box-shadow: 0 10px 26px rgba(73, 59, 107, .25); max-width: 720px; margin: 0 auto; animation: pop .3s ease-out; }
.st-face { flex: none; width: 76px; height: 76px; border-radius: 50%; background: #FFF0F6; border: 3px solid #F6B7D2; overflow: hidden; }
.st-face svg { width: 100%; height: 100%; }
.st-body { flex: 1; min-width: 0; }
.st-name { font-size: 14px; color: var(--pink-d); margin-bottom: 2px; }
.st-text { font-size: clamp(18px, 5vw, 24px); line-height: 1.45; color: var(--ink); min-height: 2.9em; }
.st-next { position: absolute; right: 12px; bottom: 8px; width: 26px; height: 26px; transform: rotate(-90deg); animation: bob2 1s ease-in-out infinite; }
.st-next .ico { width: 100%; height: 100%; }
@keyframes bob2 { 50% { translate: 0 4px; } }
.st-panel { position: absolute; z-index: 25; }
.st-panel.bottom { left: 0; right: 0; bottom: 0; padding: 12px 10px calc(14px + var(--safe-b)); background: rgba(255, 255, 255, .95); border-top: 4px solid var(--frame); border-radius: 26px 26px 0 0; display: flex; flex-direction: column; align-items: center; gap: 10px; animation: slideUp .3s ease-out; }
@keyframes slideUp { from { transform: translateY(40%); opacity: 0; } }
.st-panel.top { left: 0; right: 0; top: 80px; display: flex; justify-content: center; }
.st-panel.center { inset: 0; display: grid; place-items: center; background: rgba(46, 36, 88, .45); padding: 16px; }
.st-panel.full { inset: 0; display: flex; flex-direction: column; align-items: center; background: linear-gradient(#FFF6FA, #F6F0FF); padding: calc(80px + var(--safe-t)) 10px calc(12px + var(--safe-b)); gap: 8px; }
.st-panel.runway { left: 0; right: 0; bottom: 0; top: 0; pointer-events: none; }
.st-panel.runway > * { pointer-events: auto; }
.st-prompt { font-size: clamp(17px, 4.6vw, 22px); color: var(--ink); text-align: center; }
.st-choices { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.st-choice { min-width: 100px; padding: 8px 12px; border-radius: 22px; background: #fff; border: 4px solid var(--frame); box-shadow: 0 4px 0 #CDBDF0; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 17px; }
.st-choice .ci { width: 64px; height: 64px; }
.st-choice .ci svg { width: 100%; height: 100%; }
.st-choice:active { transform: translateY(3px); }
.st-card { position: relative; width: min(92vw, 440px); background: #fff; border-radius: 30px; border: 4px solid #F6B7D2; padding: 18px; text-align: center; box-shadow: 0 16px 40px rgba(0, 0, 0, .25); }
.st-card.pop { animation: pop .45s cubic-bezier(.3, 1.6, .5, 1); }
.st-card > svg { width: 100%; height: auto; }
.st-cap { font-size: clamp(18px, 5vw, 23px); margin-top: 8px; color: var(--ink); line-height: 1.4; }
.st-tapnext { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 13px; color: var(--pink-d); margin-top: 6px; }
.st-tapnext .ico { width: 20px; height: 20px; transform: rotate(180deg); }
.award { font-size: 36px; color: #E07AA8; text-shadow: 0 3px 0 #FFE3EF; }
.st-panel.pick { max-height: 52%; }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; width: 100%; max-width: 640px; overflow-y: auto; padding: 6px 4px; }
.pick-grid .cell { position: relative; }
.tstar { position: absolute; left: -4px; top: -6px; width: 28px; height: 28px; }
.tstar .ico { width: 100%; height: 100%; }
.st-ok { flex: none; }
.pill.big { height: 72px; font-size: 24px; padding: 0 26px; }
.pill.big .ico { width: 44px; height: 44px; }

.makeup { justify-content: space-between; }
.mk-face { width: min(80vw, 46vh); aspect-ratio: 192 / 196; border-radius: 50%; overflow: hidden; border: 10px solid #fff; box-shadow: 0 0 0 5px #FFD772, 0 10px 30px rgba(224, 122, 168, .35); background: #FFF0F6; }
.mk-face svg { width: 100%; height: 100%; }
.mk-tools, .tools { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.mk-tool { position: relative; width: 66px; height: 74px; border-radius: 18px; background: #fff; border: 3px solid #EDE5FB; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 10.5px; color: var(--lav-d); }
.mk-tool svg { width: 44px; height: 44px; }
.mk-tool.sel { border-color: var(--pink-d); box-shadow: 0 0 0 3px #FFE3EF; color: var(--ink); }
.mk-tool i { position: absolute; right: 4px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: #FF8FB8; }
.mk-tool.nexttool { animation: hintb 1s ease-in-out infinite; border-color: #FFD772; }
.mk-tool { touch-action: none; }
.mouth { touch-action: none; }
.tool-ghost { position: fixed; z-index: 80; width: 76px; height: 76px; margin: -38px 0 0 -38px; pointer-events: none; filter: drop-shadow(0 6px 10px rgba(73, 59, 107, .3)); }
.tool-ghost svg { width: 100%; height: 100%; }
@keyframes hintb { 50% { transform: translateY(-6px); box-shadow: 0 0 0 5px #FFF0B8; } }
.mk-opts { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.mk-opt { width: 58px; height: 58px; border-radius: 50%; background: #fff; border: 3px solid #EDE5FB; display: grid; place-items: center; }
.mk-opt svg { width: 80%; height: 80%; }
.mk-opt.sel { border-color: var(--pink-d); box-shadow: 0 0 0 3px #FFE3EF; }

.rw-lane { position: absolute; left: 10px; right: 10px; bottom: calc(110px + var(--safe-b)); height: 84px; border-radius: 44px; background: rgba(255, 255, 255, .22); border: 3px solid rgba(255, 255, 255, .6); overflow: hidden; }
.rw-target { position: absolute; left: 18%; top: 50%; width: 70px; height: 70px; margin: -35px; border-radius: 50%; border: 5px solid #FFE28A; box-shadow: 0 0 16px #FFE28A, inset 0 0 12px rgba(255, 226, 138, .6); }
.rw-note { position: absolute; top: 50%; width: 56px; height: 56px; margin: -28px; filter: drop-shadow(0 0 6px #fff); }
.rw-note .ico { width: 100%; height: 100%; }
.rw-note.hit { animation: noteHit .35s ease-out forwards; }
.rw-note.miss { opacity: .35; }
@keyframes noteHit { to { transform: scale(1.8); opacity: 0; } }
.rw-tap { position: absolute; left: 50%; bottom: calc(14px + var(--safe-b)); transform: translateX(-50%); width: min(80vw, 360px); height: 84px; border-radius: 44px; background: linear-gradient(135deg, #FFB8D6, #B89CF4); color: #fff; font-size: 28px; border: 5px solid #fff; display: flex; align-items: center; justify-content: center; gap: 6px; box-shadow: 0 6px 0 #9A7FDB; touch-action: none; text-shadow: 0 2px 0 rgba(90, 60, 150, .4); }
.rw-tap .ico { width: 46px; height: 46px; }
.rw-tap.pressed { animation: press .18s ease-out; }
@keyframes press { 50% { transform: translateX(-50%) scale(.94); } }
.rw-msg { position: absolute; left: 0; right: 0; bottom: calc(210px + var(--safe-b)); text-align: center; font-size: 34px; color: #fff; opacity: 0; transition: opacity .1s; text-shadow: 0 3px 0 #9A7FDB, 0 0 14px #F6B7D2; }
.rw-msg.show { opacity: 1; animation: pop .3s; }
.rw-msg.pf { color: #FFE28A; }
.rw-msg.ms { color: #E6DBFF; }
.rw-hits { position: absolute; left: 0; right: 0; top: calc(80px + var(--safe-t)); display: flex; justify-content: center; gap: 4px; }
.rw-hits i { width: 14px; height: 14px; border-radius: 50%; background: rgba(255, 255, 255, .3); }
.rw-hits i.on { background: #FFE28A; box-shadow: 0 0 8px #FFE28A; }
.judges { display: flex; gap: 10px; }
.judge { background: #fff; border-radius: 20px; border: 3px solid #F6B7D2; padding: 6px; display: flex; flex-direction: column; align-items: center; animation: pop .5s both; }
.jface { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: #FFF0F6; }
.jface svg { width: 100%; height: 100%; }
.jboard { display: flex; }
.jboard .ico { width: 18px; height: 18px; }

.memo-card { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.memo-title { display: flex; align-items: center; gap: 6px; font-size: 20px; }
.memo-title .ico { width: 30px; height: 30px; }
.memo { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.mm { position: relative; width: 62px; height: 62px; border-radius: 16px; background: #FFFBEA; border: 3px dashed #FFD772; padding: 4px; }
.mm svg { width: 100%; height: 100%; }
.mm.got { border-style: solid; background: #F2FBF7; border-color: #9EDDC8; }
.mm i { position: absolute; right: -8px; bottom: -8px; width: 28px; height: 28px; background: #fff; border-radius: 50%; }
.mm i .ico { width: 100%; height: 100%; }
.memo-dish { width: 60%; }
.memo-dish svg { width: 100%; height: auto; }
.st-panel.shop { max-height: 60%; }
.shop .shelf { grid-template-columns: repeat(4, 1fr); }
.shop .sitem { max-width: 84px; }
.basket { position: absolute; left: 10px; top: -78px; width: 96px; }
.shop-memo { background: #fff; border-radius: 20px; padding: 6px; border: 3px solid var(--frame); }
.shelf { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: 100%; max-width: 520px; margin-top: 6px; }
.sitem { aspect-ratio: 1; border-radius: 20px; background: #fff; border: 3px solid #EDE5FB; padding: 8px; box-shadow: 0 4px 0 #E2D6F6; }
.sitem svg { width: 100%; height: 100%; }
.sitem.taken { opacity: .25; }
.sitem.wiggle { animation: wiggleX .4s; }
@keyframes wiggleX { 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }
.basket svg { width: 100%; height: auto; }
.tray { display: flex; gap: 8px; padding: 10px 14px; background: #F5DEC8; border-radius: 20px; border: 3px solid #D9AE8C; }
.tray .slot { width: 52px; height: 52px; border-radius: 50%; border: 3px dashed #B5835E; }
.tray .slot.on { border: 0; animation: pop .3s; }
.tray .slot svg { width: 100%; height: 100%; }
.purse { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.coinb { width: 64px; height: 64px; }
.coinb svg { width: 100%; height: 100%; }
.coinb.used { visibility: hidden; }
.cross { display: flex; gap: 16px; align-items: center; }
.cross .sig { width: 80px; height: 80px; }
.cross .sig svg { width: 100%; height: 100%; }
.cookp { justify-content: space-around; }
.cook { width: min(84vw, 420px); }
.cook svg { width: 100%; height: auto; }
.cook.pop { animation: pop .6s cubic-bezier(.3, 1.6, .5, 1); }
.ings { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.ings .sitem { width: 84px; }
.mouthp { justify-content: space-between; background: linear-gradient(#E9FBF4, #F3ECFF); }
.mouth { width: min(94vw, 58vh); aspect-ratio: 1; border-radius: 30px; overflow: hidden; border: 6px solid #fff; box-shadow: 0 10px 30px rgba(73, 59, 107, .2); }
.mouth svg { width: 100%; height: 100%; }
.germ { cursor: pointer; }
.germ .wob { animation: wob .8s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes wob { from { transform: rotate(-8deg) scale(.95); } to { transform: rotate(8deg) scale(1.05); } }

/* かきかた きょうしつ */
.story-card.s4 { background: linear-gradient(135deg, #FFE59A, #9EDDC8); }
.w-pic { width: 46%; margin: 0 auto; aspect-ratio: 1; }
.w-pic svg { width: 100%; height: 100%; }
.w-word { font-family: 'Klee One', 'M PLUS Rounded 1c', sans-serif; font-weight: 600; font-size: 64px; letter-spacing: .12em; color: var(--ink); }
.w-ink { width: 100%; border-radius: 14px; border: 3px solid #F6B7D2; margin-top: 6px; }
.trace { justify-content: space-between; background: linear-gradient(#FFF8EC, #FFF0F6); }
.tr-head { display: flex; align-items: center; gap: 10px; }
.tr-pic { width: 64px; height: 64px; }
.tr-pic svg { width: 100%; height: 100%; }
.tr-word { display: flex; gap: 6px; font-family: 'Klee One', 'M PLUS Rounded 1c', sans-serif; font-weight: 600; font-size: 40px; color: #C9B8E6; }
.tr-word span { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 12px; border: 3px solid #EDE5FB; background: #fff; }
.tr-word span.cur { color: #E0559A; border-color: #E0559A; transform: scale(1.1); }
.tr-word span.done { color: var(--ink); border-color: #FFD772; background: #FFFBEA; }
.tr-box { position: relative; width: min(86vw, 48vh, 460px); aspect-ratio: 1; border-radius: 22px; overflow: hidden; border: 6px solid #fff; box-shadow: 0 0 0 4px #F6B7D2, 0 10px 26px rgba(224, 122, 168, .25); background: #FFFDF8; }
.tr-box canvas { position: absolute; left: 0; top: 0; }
#trCur { touch-action: none; cursor: crosshair; }
.tr-guide, .tr-anim { position: absolute; inset: 0; pointer-events: none; }
.tr-guide svg, .tr-anim svg { width: 100%; height: 100%; }
.tr-anim .flow { animation: flow 1s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -10; } }
.tr-anim .startdot { animation: dotPulse 1s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes dotPulse { 50% { transform: scale(1.35); } }
@keyframes drawStroke { to { stroke-dashoffset: 0; } }
.tr-strokes { display: flex; gap: 6px; }
.tr-strokes span { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 3px solid #EDE5FB; color: #C9B8E6; font-size: 16px; }
.tr-strokes span.now { border-color: #E9B44C; background: #FFE28A; color: #8A5A10; transform: scale(1.12); }
.tr-strokes span.ok { border-color: #F29CC2; background: #FFE3EF; color: #E0559A; }
.tr-maru { position: absolute; inset: 8%; opacity: 0; transform: scale(.4) rotate(-40deg); transition: all .5s cubic-bezier(.3, 1.6, .5, 1); pointer-events: none; }
.tr-maru.show { opacity: .92; transform: none; }
.tr-maru svg { width: 100%; height: 100%; }
.tr-acts { display: flex; gap: 8px; }
.tr-acts .pill { height: 56px; }

/* おつかいの ついか */
.memo-shops { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.memo-shops span { background: #F2FBF7; border: 2px solid #9EDDC8; border-radius: 14px; padding: 2px 10px; font-size: 14px; }
.mm b { position: absolute; left: -6px; top: -8px; background: #E0559A; color: #fff; font-size: 12px; border-radius: 10px; padding: 0 6px; border: 2px solid #fff; }
.pd-lane { position: relative; width: 100%; max-width: 520px; height: 130px; background: linear-gradient(#E3F6EA, #C8EFC0); border-radius: 24px; overflow: hidden; border: 3px solid #9EDDC8; }
.pd-me { position: absolute; left: 12%; bottom: 6px; height: 112px; aspect-ratio: 400 / 680; z-index: 2; }
.pd-me svg { width: 100%; height: 100%; }
.pd-me.jump { animation: jumpUp .65s cubic-bezier(.3, .8, .5, 1); }
@keyframes jumpUp { 40% { transform: translateY(-60px); } 100% { transform: none; } }
.pd-puddle { position: absolute; bottom: 6px; width: 110px; height: 50px; margin-left: -55px; }
.pd-puddle svg { width: 100%; height: 100%; }
.bushes { display: flex; gap: 10px; }
.bush { position: relative; width: 100px; height: 70px; }
.bush svg { width: 100%; height: 100%; }
.bush.opened > svg { opacity: .55; }
.bush .ball { position: absolute; left: 50%; top: -20px; width: 54px; height: 54px; margin-left: -27px; animation: pop .5s cubic-bezier(.3, 1.6, .5, 1); }
.cook.flip { animation: flipPan .5s ease-in-out; }
@keyframes flipPan { 50% { transform: translateY(-30px) rotateX(180deg); } }
.cook.oven { filter: sepia(.4) saturate(1.4) brightness(1.05); animation: ovenGlow .9s ease-in-out infinite alternate; }
@keyframes ovenGlow { to { filter: sepia(.6) saturate(1.6) brightness(1.1) drop-shadow(0 0 16px #FFB347); } }
.cook.pz { display: flex; justify-content: center; }
.cook.pz canvas { touch-action: none; }
.wob.big { animation-name: wobBig !important; }
@keyframes wobBig { from { transform: rotate(-10deg); } to { transform: rotate(10deg); } }
.mobj { cursor: pointer; }
.mobj .wob { transform-box: fill-box; transform-origin: 50% 50%; animation: wob .8s ease-in-out infinite alternate; }

/* おえかき きょうしつ */
.story-card.s5 { background: linear-gradient(135deg, #FFD3A8, #C9B5F5); }
.paintp { justify-content: space-between; background: linear-gradient(#FFF6EC, #FFF0F6); }
.paint-wrap { position: relative; width: min(92vw, 52vh, 520px); aspect-ratio: 1; }
.paint-area { width: 100%; height: 100%; background: #fff; border-radius: 22px; border: 6px solid #fff; box-shadow: 0 0 0 4px #F6B7D2, 0 10px 26px rgba(224, 122, 168, .2); overflow: hidden; padding: 6px; }
.paint-area svg { width: 100%; height: 100%; }
.region { cursor: pointer; transition: fill .2s; }
.region.pop2 { animation: regionPop .3s ease-out; transform-box: fill-box; transform-origin: center; }
@keyframes regionPop { 50% { transform: scale(1.04); } }
.paint-sample { position: absolute; right: -6px; top: -6px; width: 32%; aspect-ratio: 1; background: #fff; border-radius: 14px; border: 3px solid #FFD772; padding: 4px; box-shadow: 0 6px 14px rgba(0, 0, 0, .15); }
.paint-sample svg { width: 100%; height: 100%; }
.palette2 { display: flex; gap: 6px; overflow-x: auto; max-width: 100%; padding: 6px 4px; scrollbar-width: none; }
.pcol { flex: none; width: 48px; height: 48px; border-radius: 50%; background: #fff; border: 3px solid #EDE5FB; display: grid; place-items: center; }
.pcol.sel { border-color: #E0559A; transform: scale(1.15); box-shadow: 0 0 0 3px #FFE3EF; }
.sw { width: 34px; height: 34px; border-radius: 50%; display: block; border: 2px solid rgba(0, 0, 0, .08); }
.sw svg { width: 100%; height: 100%; }
.sw.rainbow { background: linear-gradient(90deg, #FF8FB8, #FFE07A, #9EDC9A, #9DCDF4, #C9B5F5); }
.sw.dots { background: radial-gradient(circle, #fff 30%, transparent 32%) 0 0 / 10px 10px, #FFD3E6; }
.sw.kira { border: 0; }
.paint-frame { background: #fff; border: 10px solid #E6C08A; border-radius: 10px; box-shadow: inset 0 0 0 4px #F6E1B8; aspect-ratio: 1; padding: 6px; }
.paint-frame svg { width: 100%; height: 100%; }
.paint-gallery { display: flex; gap: 10px; justify-content: center; }
.paint-gallery .paint-frame { width: 46%; }
.paint-album { width: 100%; height: 100%; background: #fff; padding: 6px; border: 6px solid #E6C08A; }
.paint-album svg { width: 100%; height: 100%; }
.st-choice .ci svg { overflow: visible; }

/* ---- いきている キャラクター ---- */
.kp-eyes, .bn-eyes, .an-eyes { transform-box: fill-box; transform-origin: 50% 55%; animation: blink 4.6s infinite; }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 94.5% { transform: scaleY(.08); } }
.kp-hairback { transform-box: view-box; transform-origin: 200px 110px; animation: hairSway 3.8s ease-in-out infinite alternate; }
@keyframes hairSway { from { transform: rotate(-1.3deg); } to { transform: rotate(1.3deg); } }
.kp-locks { transform-box: fill-box; transform-origin: 50% 0; animation: lockSway 3.2s ease-in-out infinite alternate; }
.kp-locks.r { animation-delay: -1.4s; }
@keyframes lockSway { from { transform: rotate(-2.2deg); } to { transform: rotate(2.2deg); } }
.kp-skirt, .kp-dress { transform-box: fill-box; transform-origin: 50% 0; animation: skirtSway 2.6s ease-in-out infinite alternate; }
.kp-dress { animation-name: dressSway; }
@keyframes skirtSway { from { transform: skewX(-2.4deg); } to { transform: skewX(2.4deg); } }
@keyframes dressSway { from { transform: skewX(-1deg); } to { transform: skewX(1deg); } }
.bn-ear { transform-box: fill-box; transform-origin: 50% 100%; animation: earTw 5.2s infinite; }
.bn-ear.r { animation-delay: -2.1s; }
@keyframes earTw { 0%, 88%, 100% { transform: none; } 91% { transform: rotate(-9deg); } 94% { transform: rotate(5deg); } 97% { transform: rotate(-2deg); } }
/* ちいさな アイコンでは うごかさない */
:is(.cell, .tab, .photo, .fr-face, .wface, .mate, .st-choice, .sc-art, .fcell, .jface, .pick-grid, .paint-area, .paint-frame, .paint-sample, .paint-album, .tr-pic) :is(.kp-eyes, .bn-eyes, .an-eyes, .kp-hairback, .kp-locks, .kp-skirt, .kp-dress, .bn-ear) { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .kp-hairback, .kp-locks, .kp-skirt, .kp-dress, .bn-ear { animation: none; } }

/* ---- きらめきレベル ---- */
.lvhud { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 30px; background: rgba(255, 255, 255, .88); border: 3px solid #FFD772; box-shadow: 0 4px 12px rgba(201, 146, 52, .25); font-size: 12px; color: var(--ink); }
.lvhud .lvn { background: linear-gradient(135deg, #FFE59A, #F2B94A); color: #fff; border-radius: 20px; padding: 2px 8px; font-size: 13px; text-shadow: 0 1px 0 #C99234; }
.lvhud .lvbar { width: 64px; height: 8px; border-radius: 6px; background: #F3ECFF; overflow: hidden; }
.lvhud .lvbar i { display: block; height: 100%; background: linear-gradient(90deg, #FFB8D6, #FFD772); }
.exp-pop { position: fixed; z-index: 96; transform: translate(-50%, 0); font-size: 22px; color: #FFD772; text-shadow: 0 2px 0 #C99234, 0 0 10px #fff; pointer-events: none; animation: expUp 1.4s ease-out forwards; }
@keyframes expUp { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.6); } 20% { opacity: 1; transform: translate(-50%, 0) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -60px) scale(1); } }
.lvcard .lvbig { font-size: 72px; line-height: 1; color: #F2B94A; text-shadow: 0 4px 0 #C99234, 0 0 24px #FFE59A; animation: pop .6s cubic-bezier(.3, 1.6, .5, 1); }
.lvcard .lvbig span { font-size: 30px; }
.lvtitle { display: inline-block; font-size: 24px; padding: 4px 18px; margin-bottom: 12px; border-radius: 30px; color: #fff; background: linear-gradient(135deg, #FFB8D6, #B89CF4); text-shadow: 0 2px 0 rgba(90, 60, 150, .4); }

/* ---- ホームの うごき ---- */
.beam { animation: beam 5s ease-in-out infinite alternate; }
@keyframes beam { from { opacity: .55; } to { opacity: 1; } }
.walker { transition: transform 1.4s cubic-bezier(.45, 0, .3, 1); }
.walkbob { animation: walkbob .35s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes walkbob { from { transform: translateY(0) rotate(-1.5deg); } to { transform: translateY(-2%) rotate(1.5deg); } }
.twirl { animation: twirl .9s ease-in-out; transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes twirl { 0% { transform: scaleX(1); } 25% { transform: scaleX(-1) translateY(-3%); } 50% { transform: scaleX(1) translateY(-5%); } 75% { transform: scaleX(-1) translateY(-3%); } 100% { transform: scaleX(1); } }
.hopwalk { animation: hopwalk .32s ease-in-out 4 alternate; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes hopwalk { to { transform: translateY(-14%) scale(.96, 1.04); } }
.entry { overflow: hidden; animation: entryFloat 3.4s ease-in-out infinite; }
.entry:nth-child(2) { animation-delay: -.8s; } .entry:nth-child(3) { animation-delay: -1.6s; } .entry:nth-child(4) { animation-delay: -2.4s; }
@keyframes entryFloat { 50% { transform: translateY(-5px); } }
.entry::before { content: ""; position: absolute; left: 6%; right: 6%; top: 4%; height: 38%; border-radius: 20px 20px 50% 50%; background: linear-gradient(rgba(255, 255, 255, .55), rgba(255, 255, 255, 0)); pointer-events: none; }
.entry::after { content: ""; position: absolute; top: -50%; left: -60%; width: 40%; height: 200%; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0)); transform: rotate(20deg); animation: shine 4.5s ease-in-out infinite; pointer-events: none; }
.entry:nth-child(2)::after { animation-delay: .5s; } .entry:nth-child(3)::after { animation-delay: 1s; } .entry:nth-child(4)::after { animation-delay: 1.5s; }
@keyframes shine { 0%, 70% { left: -60%; } 100% { left: 130%; } }
.entry .ico { animation: icoWig 3.4s ease-in-out infinite; }
@keyframes icoWig { 0%, 80%, 100% { transform: none; } 85% { transform: rotate(-8deg) scale(1.08); } 92% { transform: rotate(6deg) scale(1.08); } }
.rbtn { position: relative; overflow: hidden; }
.rbtn::after { content: ""; position: absolute; left: 18%; top: 10%; width: 40%; height: 26%; border-radius: 50%; background: rgba(255, 255, 255, .7); pointer-events: none; }

/* ---- へんしん ---- */
.hs-ribbons { position: absolute; left: 50%; top: 4%; height: 78%; aspect-ratio: 1; transform: translateX(-50%); pointer-events: none; z-index: 2; animation: rbSpin 3.1s linear forwards; }
.hs-ribbons svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 6px #fff); }
.hs-ribbons path { stroke-dasharray: 600; stroke-dashoffset: 600; animation: rbDraw 2.6s ease-in-out forwards; }
.hs-ribbons .rb2 { animation-delay: .25s; }
.hs-ribbons .rb3 { stroke-dasharray: 2 10; animation: rbDots 3s linear infinite; }
@keyframes rbDraw { 60% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: -600; opacity: 0; } }
@keyframes rbDots { to { stroke-dashoffset: -120; } }
@keyframes rbSpin { from { transform: translateX(-50%) rotateY(0); } to { transform: translateX(-50%) rotateY(720deg); } }
.hs-char { z-index: 3; animation: hsZoom 3.1s ease-out forwards; }
@keyframes hsZoom { from { transform: translateX(-50%) scale(.82) translateY(4%); } to { transform: translateX(-50%) scale(1); } }
.partpop { animation: partPop .4s cubic-bezier(.3, 1.6, .5, 1); transform-box: fill-box; transform-origin: 50% 60%; filter: drop-shadow(0 0 12px #fff); }
@keyframes partPop { from { transform: scale(1.06); filter: brightness(1.8) drop-shadow(0 0 20px #fff); } }
.henshin-stage .stagebg svg { animation: bgSpin 40s linear infinite; transform-origin: 50% 52%; }
@keyframes bgSpin { to { transform: rotate(360deg) scale(1.4); } }
.henshin-stage.final .hs-char { animation: hsFinal .7s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes hsFinal { from { transform: translateX(-50%) scale(1.15); } to { transform: translateX(-50%) scale(1); } }
.henshin-stage.final .hs-ribbons { display: none; }
.hs-title.show { animation: titleSlam .7s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes titleSlam { from { transform: scale(2.6) rotate(-8deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---- おはなしの カメラ・きもちマーク・セリフわく ---- */
.st-stage { transition: transform .7s cubic-bezier(.3, .8, .3, 1); }
.st-bg { transition: filter .6s; }
.st-stage.talking .st-bg { filter: blur(1.6px) saturate(1.05); }
.st-actor { transition: left .6s ease, bottom .6s ease, height .6s ease, filter .4s; }
.st-actor.dim { filter: brightness(.82) saturate(.85); }
.st-actor.speaking { filter: drop-shadow(0 0 14px rgba(255, 255, 255, .9)); }
.emote { position: absolute; left: 62%; top: -4%; width: 34%; max-width: 70px; aspect-ratio: 1; animation: emoteIn 1.5s cubic-bezier(.2, 1.6, .4, 1) forwards; pointer-events: none; z-index: 5; }
.emote svg { width: 100%; height: 100%; }
.emote b { display: block; font-size: 48px; line-height: 1; color: #FF5A8A; text-shadow: 0 3px 0 #fff, 0 0 10px #fff; }
@keyframes emoteIn { 0% { transform: scale(0) translateY(20px); opacity: 0; } 20% { transform: scale(1.2); opacity: 1; } 35% { transform: scale(1); } 80% { opacity: 1; transform: translateY(-6px); } 100% { opacity: 0; transform: translateY(-16px); } }
.st-dialog { border: 0; background: linear-gradient(#FFFFFF, #FFF6FA); box-shadow: 0 0 0 4px #FFD3E6, 0 0 0 7px #fff, 0 14px 30px rgba(73, 59, 107, .3); padding-top: 18px; }
.st-dialog::before { content: ""; position: absolute; inset: 6px; border-radius: 20px; border: 2px dashed #FFE3EF; pointer-events: none; }
.st-name { position: absolute; left: 100px; top: -16px; background: linear-gradient(135deg, #FF8FB8, #B89CF4); color: #fff; padding: 3px 14px; border-radius: 16px; font-size: 14px; box-shadow: 0 3px 0 rgba(140, 111, 214, .35); text-shadow: 0 1px 0 rgba(90, 60, 150, .4); }
.st-face { width: 84px; height: 84px; margin-top: -30px; border: 4px solid #fff; box-shadow: 0 0 0 3px #FFB8D6, 0 6px 14px rgba(224, 122, 168, .3); background: radial-gradient(circle at 50% 40%, #fff, #FFE3EF); }

.starrow { display: flex; justify-content: center; gap: 4px; margin: -4px 0 4px; }
.bigstar { width: 54px; height: 54px; opacity: 0; animation: starIn .5s cubic-bezier(.2, 1.8, .4, 1) forwards; }
.bigstar:nth-child(2) { width: 66px; height: 66px; margin-top: -10px; }
.bigstar svg { width: 100%; height: 100%; }
.bigstar.on svg { filter: drop-shadow(0 0 8px #FFE59A); }
@keyframes starIn { from { opacity: 0; transform: scale(3) rotate(-90deg); } to { opacity: 1; transform: none; } }
.newbest { display: inline-block; font-size: 15px; color: #fff; background: linear-gradient(135deg, #FF8FB8, #FFB347); border-radius: 14px; padding: 2px 12px; margin-bottom: 4px; animation: pop .5s 1.4s both; }
.sc-stars { display: inline-flex; margin-right: 4px; }
.sc-stars svg { width: 20px; height: 20px; }

/* ---- ランウェイ ---- */
.rw-hud { position: absolute; left: 0; right: 0; top: calc(98px + var(--safe-t)); display: flex; flex-direction: column; align-items: center; gap: 2px; pointer-events: none; }
.rw-score { font-size: 15px; color: #fff; letter-spacing: .08em; text-shadow: 0 2px 0 #6A4FB0; }
.rw-score b { font-size: 26px; color: #FFE59A; }
.rw-combo { font-size: 16px; color: #fff; text-shadow: 0 2px 0 #E07AA8, 0 0 10px #FFB8D6; }
.rw-combo b { font-size: 40px; }
.rw-combo.bump { animation: pop .25s ease-out; }
.rw-hits { top: calc(82px + var(--safe-t)); }
.rw-note.star { width: 70px; height: 70px; margin: -35px; filter: drop-shadow(0 0 10px #FFE59A); }
.rw-note.star svg { width: 100%; height: 100%; animation: spinSlow 1.2s linear infinite; }
@keyframes spinSlow { to { transform: rotate(360deg); } }
.rw-ring { position: absolute; left: 18%; top: 50%; width: 70px; height: 70px; margin: -35px; border-radius: 50%; border: 5px solid #FFB8D6; animation: ringOut .45s ease-out forwards; pointer-events: none; }
.rw-ring.pf { border-color: #FFE28A; }
@keyframes ringOut { to { transform: scale(2.4); opacity: 0; } }
.rw-msg { letter-spacing: .06em; }
.glow { position: absolute; bottom: calc(200px + var(--safe-b)); display: flex; gap: 6px; opacity: .35; transition: opacity .4s; pointer-events: none; }
.glow.l { left: 8px; } .glow.r { right: 8px; }
.glow i { display: block; width: 8px; height: 46px; border-radius: 6px; box-shadow: 0 0 12px currentColor, 0 0 4px #fff; transform-origin: 50% 100%; animation: stick .45s ease-in-out infinite alternate; }
@keyframes stick { from { transform: rotate(-22deg); } to { transform: rotate(22deg); } }
.runway.fever .glow { opacity: 1; }
.rw-fever { position: absolute; inset: 0; opacity: 0; transition: opacity .4s; pointer-events: none; background: conic-gradient(from 0deg at 50% 0%, rgba(255, 143, 184, .35), rgba(255, 224, 122, .3), rgba(157, 205, 244, .35), rgba(201, 181, 245, .35), rgba(255, 143, 184, .35)); mix-blend-mode: screen; animation: feverSpin 3s linear infinite; }
.runway.fever .rw-fever { opacity: 1; }
@keyframes feverSpin { 50% { filter: hue-rotate(90deg); } }
.polaroid { position: fixed; left: 50%; top: 46%; z-index: 92; width: min(72vw, 330px); background: #fff; padding: 12px 12px 44px; border-radius: 6px; box-shadow: 0 20px 50px rgba(0, 0, 0, .35); transform: translate(-50%, -50%) rotate(-6deg); animation: polIn .6s cubic-bezier(.2, 1.4, .4, 1); }
.polaroid .pol-pic { aspect-ratio: 11 / 12; overflow: hidden; background: #2E2458; animation: develop 1.4s ease-out; }
.polaroid .pol-pic svg { width: 100%; height: 100%; }
.polaroid .pol-cap { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; font-size: 14px; color: #8C6FD6; }
.polaroid.out { transition: all .5s; opacity: 0; transform: translate(-50%, -80%) rotate(8deg) scale(.7); }
@keyframes polIn { from { transform: translate(-50%, 40%) rotate(14deg) scale(.6); opacity: 0; } }
@keyframes develop { from { filter: brightness(2.2) saturate(0); } }

.scrub-combo { position: absolute; left: 50%; top: calc(118px + var(--safe-t)); transform: translateX(-50%); font-size: 16px; color: #fff; background: linear-gradient(135deg, #6FC3A8, #6F98E2); padding: 2px 14px; border-radius: 20px; text-shadow: 0 1px 0 rgba(0, 0, 0, .2); pointer-events: none; z-index: 3; }
.scrub-combo b { font-size: 22px; }
.scrub-combo.bump { animation: pop .25s ease-out; }
.mouth { position: relative; }
.germ.boss .wob { animation-duration: .5s; }

/* ---- おくゆき・ひかり ---- */
.fw.drop { animation: dropIn .7s cubic-bezier(.3, 1.5, .5, 1); transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes dropIn { 0% { transform: translateY(-60%) scale(.9, 1.1); opacity: 0; } 55% { transform: translateY(0) scale(1.12, .86); opacity: 1; } 75% { transform: scale(.95, 1.05); } 100% { transform: none; } }
.preview .turntable { position: absolute; left: 50%; bottom: 1%; width: min(70%, 320px); transform: translateX(-50%); z-index: 0; }
.preview .turntable svg { width: 100%; height: auto; display: block; }
.tt-ring { animation: ttSpin 6s linear infinite; }
@keyframes ttSpin { to { stroke-dashoffset: -160; } }
.preview .spot-cone { position: absolute; left: 50%; top: -10%; width: 90%; height: 112%; transform: translateX(-50%); background: conic-gradient(from 180deg at 50% 0%, transparent 155deg, rgba(255, 255, 255, .55) 168deg, rgba(255, 246, 207, .65) 180deg, rgba(255, 255, 255, .55) 192deg, transparent 205deg); pointer-events: none; animation: cone 4s ease-in-out infinite alternate; }
@keyframes cone { from { opacity: .6; } to { opacity: 1; } }
.preview .char { z-index: 1; }
.story-card { animation: cardIn .6s cubic-bezier(.2, 1.4, .4, 1) both; transition: transform .15s; }
.story-card:nth-child(2) { animation-delay: .08s; } .story-card:nth-child(3) { animation-delay: .16s; } .story-card:nth-child(4) { animation-delay: .24s; } .story-card:nth-child(5) { animation-delay: .32s; }
@keyframes cardIn { from { transform: translateX(40%) rotate(4deg); opacity: 0; } }
.story-card .sc-art svg { animation: artFloat 3s ease-in-out infinite; }
@keyframes artFloat { 50% { transform: translateY(-5px) rotate(-1.5deg); } }
.story-card::after { content: ""; position: absolute; top: -50%; left: -60%; width: 30%; height: 200%; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5), rgba(255, 255, 255, 0)); transform: rotate(20deg); animation: shine 5s ease-in-out infinite; pointer-events: none; }
.gcard { animation: cardIn .6s cubic-bezier(.2, 1.4, .4, 1) both; }
.gcard:nth-child(2) { animation-delay: .08s; } .gcard:nth-child(3) { animation-delay: .16s; } .gcard:nth-child(4) { animation-delay: .24s; }
.cell { transition: transform .15s, border-color .15s, box-shadow .15s; }
.cell:hover { transform: translateY(-2px); }
.modal .card { animation: cardPop .55s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes cardPop { 0% { transform: scale(.4) rotate(-6deg); opacity: 0; } 60% { transform: scale(1.04) rotate(1deg); opacity: 1; } 100% { transform: none; } }

/* ---- タイトル ---- */
.title-scr { background: linear-gradient(#5A4AA8, #B98AD8 45%, #FFC2DC 80%, #FFE9F2); align-items: center; justify-content: center; cursor: pointer; }
.title-scr .tbg { position: absolute; inset: 0; }
.title-scr .tbg svg { width: 100%; height: 100%; }
.title-scr .t-cloud { animation: cloudDrift 18s linear infinite; }
.title-scr .t-cloud.b { animation-duration: 26s; animation-delay: -9s; }
@keyframes cloudDrift { from { transform: translateX(-30%); } to { transform: translateX(130%); } }
.title-scr .t-chars { position: absolute; left: 50%; bottom: 11%; width: min(98vw, 62vh); aspect-ratio: 1.1; transform: translateX(-50%); animation: tCharsIn 1.4s cubic-bezier(.2, 1.3, .4, 1) .4s both; }
.title-scr .t-chars svg { width: 100%; height: 100%; overflow: visible; }
@keyframes tCharsIn { from { transform: translate(-50%, 60%) scale(.7); opacity: 0; } }
.title-scr .t-logo { position: absolute; top: calc(8% + var(--safe-t)); left: 50%; width: min(90vw, 520px); transform: translateX(-50%); animation: tLogo 1.1s cubic-bezier(.2, 1.6, .4, 1) .9s both; filter: drop-shadow(0 6px 18px rgba(90, 60, 150, .45)); }
@keyframes tLogo { from { transform: translateX(-50%) scale(2.2) rotate(-8deg); opacity: 0; } }
.title-scr .t-start { position: absolute; bottom: calc(5% + var(--safe-b)); left: 0; right: 0; text-align: center; color: #fff; font-size: clamp(20px, 6vw, 28px); text-shadow: 0 3px 0 #C2548A, 0 0 16px #FFB8D6; animation: tStart 1.4s ease-in-out infinite, fadeIn .6s 1.8s both; }
@keyframes tStart { 50% { transform: scale(1.08); opacity: .75; } }
.title-scr .t-float { animation: logoFloat 3s ease-in-out infinite; }