:root {
  --ink: #3b2f45;
  --ink-soft: #776a82;
  --bg: #f3eef6;
  --paper: #ffffff;
  --line: #e6ddeb;
  --main: #7c5cc4;
  --main-dark: #5a3f9c;
  --gold: #f2b33d;
  --good: #4f9a6a;
  --font: "Zen Maru Gothic", system-ui, sans-serif;
  --hand: "Kiwi Maru", "Zen Maru Gothic", serif;
  --sky: #cfe9ff;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-weight: 500; line-height: 1.7; line-break: strict; transition: background 0.6s; }
body[data-slot="m"] { --sky: #ffe7c4; --bg: #f8f1ec; }
body[data-slot="d"] { --sky: #cde8ff; --bg: #f1f0f8; }
body[data-slot="n"] { --sky: #f0b896; --bg: #efe9f2; }
body[data-slot="z"] { --sky: #3a3f78; --bg: #e4e1ee; }
[hidden] { display: none !important; }
button { font-family: var(--font); }

.g-head { display: flex; align-items: center; gap: 10px; padding: 10px 16px; max-width: 560px; margin: 0 auto; font-size: 13px; font-weight: 900; }
.g-brand { color: var(--ink-soft); text-decoration: none; white-space: nowrap; }
.g-title { flex: 1; text-align: center; min-width: 0; }
.g-head [data-mg-account] a { color: var(--main-dark); text-decoration: none; }
main { max-width: 560px; margin: 0 auto; padding: 0 12px 24px; }
.card { background: var(--paper); border-radius: 18px; padding: 12px 14px; box-shadow: 0 6px 18px rgba(59, 47, 69, 0.07); }

/* 名札 */
.top { border-top: 6px solid var(--sky); }
.top-row { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.name-btn { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; text-align: left; }
.name-btn b { font: 500 22px/1.3 var(--hand); letter-spacing: 0.04em; overflow-wrap: anywhere; }
.name-btn .pen { color: var(--ink-soft); display: inline-flex; }
.name-btn:disabled { cursor: default; }
.who-sub { flex: 1; min-width: 0; margin: 0; font-size: 13px; font-weight: 700; color: var(--ink-soft); line-height: 1.5; }
.who-sub span { display: inline-block; }
.who-sub span + span::before { content: "・"; }
.who-sub span:empty::before { content: none; }
.slot-badge { flex: none; display: flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: var(--sky); font-size: 13px; font-weight: 900; color: #4a3a2a; white-space: nowrap; }
body[data-slot="z"] .slot-badge { color: #fff; }
.slot-badge span { display: inline-flex; }
.pet-id { margin: 2px 0 0; font-size: 11px; color: var(--ink-soft); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }

/* 部屋 */
.room { position: relative; margin-top: 10px; height: 300px; border-radius: 20px; overflow: hidden; box-shadow: 0 6px 18px rgba(59, 47, 69, 0.1); }
.room-bg-wrap, .room-bg-wrap svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pet { position: absolute; left: 50%; bottom: 4px; width: 240px; height: 240px; margin-left: -120px; padding: 0; border: 0; background: none; cursor: pointer; touch-action: manipulation; }
.pet svg { width: 100%; height: 100%; display: block; overflow: visible; }
.pet:focus-visible { outline: 3px solid var(--main); outline-offset: -6px; border-radius: 24px; }
.pet.bounce svg .ik-fig { animation: ik-bounce 0.5s ease-out; }
@keyframes ik-bounce { 30% { transform: scale(1.06, 0.92); } 60% { transform: scale(0.96, 1.06) translateY(-8px); } }
.say { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); max-width: calc(100% - 24px); margin: 0; padding: 4px 14px; border-radius: 16px; background: rgba(255, 255, 255, 0.92); font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); }
.say:empty { display: none; }
.poops { position: absolute; inset: 0; pointer-events: none; }
.poop { position: absolute; bottom: 14px; width: 42px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; }
.poop svg { width: 100%; height: 100%; }
.poop.p0 { left: 8%; } .poop.p1 { right: 8%; bottom: 22px; } .poop.p2 { left: 20%; bottom: 4px; }
.fx { position: absolute; inset: 0; pointer-events: none; }
.heart { position: absolute; top: 34%; width: 26px; height: 26px; color: #f07a9a; animation: ik-heart 1.4s ease-out forwards; }
@keyframes ik-heart { 0% { transform: translateY(10px) scale(0.4); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-70px) scale(1.1); opacity: 0; } }
.fx-food, .fx-toy { position: absolute; left: 50%; top: 40%; width: 54px; height: 54px; margin-left: 50px; animation: ik-pop 1.6s ease-out forwards; }
.fx-food svg, .fx-toy svg { width: 100%; height: 100%; }
@keyframes ik-pop { 0% { transform: scale(0.3); opacity: 0; } 20% { transform: scale(1.1); opacity: 1; } 70% { transform: translate(-30px, 20px) scale(0.9); opacity: 1; } 100% { transform: translate(-60px, 40px) scale(0.2); opacity: 0; } }
.fx-bath i { position: absolute; bottom: 30%; width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(120, 180, 230, 0.9); background: rgba(255, 255, 255, 0.6); animation: ik-bub 1.6s ease-out forwards; }
.fx-bath i:nth-child(1) { left: 34%; } .fx-bath i:nth-child(2) { left: 46%; animation-delay: 0.15s; width: 14px; height: 14px; } .fx-bath i:nth-child(3) { left: 58%; animation-delay: 0.3s; } .fx-bath i:nth-child(4) { left: 40%; animation-delay: 0.45s; width: 16px; height: 16px; } .fx-bath i:nth-child(5) { left: 62%; animation-delay: 0.6s; width: 12px; height: 12px; }
@keyframes ik-bub { 0% { transform: translateY(0) scale(0.4); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-120px) scale(1.1); opacity: 0; } }

/* 生き物の動き（呼吸・まばたき・ときどき跳ねる） */
.ik-anim .ik-fig { animation: ik-breathe 3.2s ease-in-out infinite; }
.ik-anim.ik-float .ik-lift { animation: ik-floaty 3.6s ease-in-out infinite; }
.ik-anim.ik-float .ik-shadow { animation: ik-shadow 3.6s ease-in-out infinite; transform-origin: 100px 181px; }
.ik-anim .ik-eyes { animation: ik-blink 5.2s infinite; }
.ik-anim.ik-m-happy .ik-lift { animation: ik-hop 6s ease-in-out infinite; }
.ik-anim.ik-m-sleep .ik-fig { animation-duration: 5s; }
.ik-anim .ik-z { animation: ik-zz 2.6s ease-in-out infinite; }
.ik-anim .ik-sulk { animation: ik-wob 2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.ik-egg.ik-anim.ik-crack .ik-fig { animation: ik-rock 1.4s ease-in-out infinite; }
@keyframes ik-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.02, 0.975); } }
@keyframes ik-floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes ik-shadow { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.88); } }
@keyframes ik-blink { 0%, 93%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.1); } }
@keyframes ik-hop { 0%, 82%, 100% { transform: translateY(0); } 86% { transform: translateY(-14px); } 90% { transform: translateY(0); } 93% { transform: translateY(-6px); } 96% { transform: translateY(0); } }
@keyframes ik-zz { 0%, 100% { transform: translateY(0); opacity: 0.5; } 50% { transform: translateY(-5px); opacity: 1; } }
@keyframes ik-wob { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes ik-rock { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-5deg); } 75% { transform: rotate(5deg); } }
@media (prefers-reduced-motion: reduce) {
  .ik-anim .ik-fig, .ik-anim .ik-lift, .ik-anim .ik-shadow, .ik-anim .ik-eyes, .ik-anim .ik-z, .ik-anim .ik-sulk, .pet.bounce svg .ik-fig, .heart, .fx-food, .fx-toy, .fx-bath i { animation: none !important; }
  .heart, .fx-food, .fx-toy, .fx-bath { display: none; }
}

/* メーター */
.meters { display: grid; gap: 4px; margin-top: 10px; padding: 10px 14px; background: var(--paper); border-radius: 16px; }
.meter { display: grid; grid-template-columns: 4.6em 1fr 2.2em; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; }
.m-bar { height: 10px; background: var(--line); border-radius: 999px; overflow: hidden; }
.m-bar span { display: block; height: 100%; border-radius: 999px; background: var(--good); transition: width 0.5s; }
.m-bar span.mid { background: var(--gold); }
.m-bar span.low { background: #e0707a; }
.m-num { font-size: 11px; color: var(--ink-soft); text-align: right; font-variant-numeric: tabular-nums; }
.next { margin: 10px 4px 0; font-size: 13px; font-weight: 900; color: var(--main-dark); text-align: center; text-wrap: balance; }

/* お世話のボタン */
.care { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 10px; }
.care-btn { display: flex; flex-direction: column; align-items: center; gap: 0; min-height: 76px; padding: 8px 2px 6px; border: 0; border-radius: 16px; background: var(--paper); color: var(--main-dark); cursor: pointer; box-shadow: inset 0 -4px 0 var(--line); }
.care-btn .ci { display: inline-flex; }
.care-btn .ci svg { width: 26px; height: 26px; }
.care-btn .cl { font-size: 14px; font-weight: 900; color: var(--ink); white-space: nowrap; }
.care-btn .cs { min-height: 1.4em; font-size: 10.5px; font-weight: 700; color: var(--good); white-space: nowrap; }
.care-btn.off { color: #b6aabd; }
.care-btn.off .cl { color: var(--ink-soft); }
.care-btn.off .cs { color: var(--ink-soft); }
.care-btn:not(.off):active { transform: translateY(2px); box-shadow: inset 0 -2px 0 var(--line); }
.hint { margin: 6px 2px 0; font-size: 12px; color: var(--ink-soft); text-align: center; }
.hint:empty { display: none; }

/* 今日のこと */
.today { margin-top: 12px; }
.today-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.today-h b { font-size: 15px; }
.today-h span { font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.today-foods { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; }
.tf-lbl { font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.tf { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 700; }
.tf svg { width: 30px; height: 30px; }
.ev { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
.ev p { margin: 0; font-size: 13px; line-height: 1.6; }
.ev-art { flex: none; width: 64px; height: 64px; }
.ev-art svg { width: 100%; height: 100%; }

.open-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 12px; }
.open-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 2px; border: 0; border-radius: 14px; background: var(--paper); color: var(--ink); font-size: 13px; font-weight: 900; cursor: pointer; white-space: nowrap; }
.open-btn span { display: inline-flex; color: var(--main); }
.open-btn b { font-size: 11px; color: var(--ink-soft); }
.travel { margin-top: 12px; border: 2px solid #e7d6ff; }
.travel p { margin: 0 0 6px; font-size: 13px; }
.travel .btn { display: inline-flex; align-items: center; gap: 6px; }

/* ボタン */
.btn { display: block; width: 100%; margin: 8px 0 0; padding: 12px 10px; border: 0; border-radius: 14px; background: var(--main); color: #fff; font: 900 15px/1.2 var(--font); cursor: pointer; box-shadow: 0 3px 0 var(--main-dark); }
.btn.small { width: auto; display: inline-block; padding: 9px 16px; font-size: 14px; margin: 0; }
.btn.ghost { background: transparent; border: 2px solid var(--line); color: var(--ink-soft); box-shadow: none; }
.records { margin: 14px 2px 0; font-size: 12px; color: var(--ink-soft); text-align: center; }
.records span { display: inline-block; margin: 0 4px; }
.panel { margin-top: 12px; display: grid; gap: 10px; }
.panel .mg-box { background: var(--paper); border-color: transparent; }
.dev { margin-top: 12px; padding: 8px 10px; border: 2px dashed #c9a; border-radius: 12px; font-size: 12px; }
.dev button { margin: 4px 4px 0 0; padding: 4px 8px; font-size: 12px; }

/* 小窓 */
.dlg { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(40, 30, 55, 0.55); }
.dlg-in { width: 100%; max-width: 400px; max-height: 86vh; overflow: auto; background: var(--paper); border-radius: 18px; padding: 20px 16px 16px; }
.dlg h2 { margin: 0 0 10px; font-size: 19px; font-weight: 900; text-align: center; text-wrap: balance; }
.dlg p { margin: 0 0 10px; font-size: 14px; }
.dlg p.small { font-size: 12px; color: var(--ink-soft); }
.sheet-wrap { place-items: end center; padding: 0; }
.sheet { max-width: 560px; max-height: 88vh; border-radius: 20px 20px 0 0; padding: 14px 14px 22px; }
.sheet-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.sheet-top h2 { flex: 1; margin: 0; text-align: left; font-size: 16px; }
.x-btn { flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--bg); color: var(--ink); cursor: pointer; display: grid; place-items: center; }
.x-btn span { display: inline-flex; }
.sheet-note { font-size: 12px !important; color: var(--ink-soft); }
.sheet-empty { color: var(--ink-soft); }
.sub-h { margin: 14px 2px 6px; font-size: 15px; font-weight: 900; }
.pick { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pick button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px 8px 6px; border: 1px solid var(--line); border-radius: 14px; background: #fcfaff; font: 700 15px/1.35 var(--font); color: var(--ink); text-align: left; cursor: pointer; }
.pick svg { width: 44px; height: 44px; flex: none; }
.pick small { display: block; font-size: 12px; color: var(--ink-soft); font-weight: 500; }
.pick em { margin-left: 6px; padding: 0 8px; border-radius: 999px; background: #ffe3ec; color: #b2406a; font-size: 11px; font-style: normal; font-weight: 900; }
.name-in { width: 100%; padding: 10px 12px; border: 2px solid var(--line); border-radius: 12px; font: 700 18px var(--font); color: var(--ink); }
.cands { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.cand { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: #fcfaff; font-size: 14px; font-weight: 700; color: var(--ink); cursor: pointer; }
.rec-top { display: flex; gap: 10px; align-items: center; }
.rec-art { flex: none; width: 120px; height: 120px; background: #f6f2fa; border-radius: 16px; }
.rec-art svg { width: 100%; height: 100%; }
.rec-top b { font: 500 19px/1.3 var(--hand); overflow-wrap: anywhere; }
.rec-top p { margin: 4px 0 0; font-size: 12px; line-height: 1.6; color: var(--ink-soft); }
.radar { display: block; width: 100%; max-width: 260px; margin: 0 auto; }
.days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.dd i { display: block; height: 22px; border-radius: 6px; background: var(--line); }
.dd i.c1 { background: #d6c9f0; } .dd i.c2 { background: #a58ee0; } .dd i.c3 { background: var(--main); }
.dd small { font-size: 11px; color: var(--ink-soft); }
.evo-list { margin: 0; padding-left: 1.2em; font-size: 13px; }
.dex-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.dex { display: flex; flex-direction: column; align-items: center; padding: 6px 4px 8px; border-radius: 14px; background: #f6f2fa; text-align: center; }
.dex.got { background: #fff6e6; }
.dex-art { width: 76px; height: 76px; display: grid; place-items: center; }
.dex-art svg { width: 100%; height: 100%; }
.dex-q { font: 900 34px var(--font); color: #c9c3cf; }
.dex b { font-size: 13px; line-height: 1.3; }
.dex small { font-size: 10.5px; line-height: 1.4; color: var(--ink-soft); }
.dex.got small { color: #b07a1c; font-weight: 700; }
.mem { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mem li { display: flex; gap: 10px; align-items: center; padding: 6px 10px 6px 6px; border-radius: 14px; background: #f6f2fa; }
.mem-art { flex: none; width: 72px; height: 72px; }
.mem-art svg { width: 100%; height: 100%; }
.mem b { font: 500 16px/1.3 var(--hand); }
.mem small { display: block; font-size: 11px; line-height: 1.55; color: var(--ink-soft); }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60; width: max-content; max-width: calc(100% - 32px); padding: 10px 18px; border-radius: 16px; background: rgba(90, 63, 156, 0.95); color: #fff; font-weight: 900; font-size: 14px; text-align: center; pointer-events: none; text-wrap: balance; }

/* 進化の演出 */
.evo { background: rgba(28, 22, 48, 0.96); }
.evo-in { width: 100%; max-width: 380px; text-align: center; color: #fff; }
.evo-in h2 { color: #fff; min-height: 1.5em; }
.evo-in p { min-height: 3em; font-size: 14px; }
.evo-stage { position: relative; width: 240px; height: 240px; margin: 0 auto 6px; }
.evo-stage > div { position: absolute; inset: 0; }
.evo-stage svg { width: 100%; height: 100%; }
.evo-glow { border-radius: 50%; background: radial-gradient(circle, rgba(255, 246, 200, 0.85) 0%, rgba(255, 220, 255, 0.35) 40%, transparent 70%); opacity: 0; }
.evo-flash { background: radial-gradient(circle, #fff 0%, rgba(255, 255, 255, 0.9) 45%, transparent 72%); opacity: 0; }
.evo-new { opacity: 0; }
.evo.run .evo-glow { animation: evo-glow 3.4s ease-in-out forwards; }
.evo.run .evo-old { animation: evo-old 2.6s ease-in forwards; }
.evo.run .evo-flash { animation: evo-flash 1.2s 2.3s ease-out forwards; }
.evo.run .evo-new { animation: evo-new 1s 2.6s ease-out forwards; }
.evo.secret .evo-glow { background: radial-gradient(circle, rgba(200, 230, 255, 0.95) 0%, rgba(255, 200, 240, 0.5) 40%, transparent 72%); }
@keyframes evo-glow { 0% { opacity: 0; transform: scale(0.6); } 60% { opacity: 1; transform: scale(1.1); } 100% { opacity: 0.6; transform: scale(1); } }
@keyframes evo-old { 0% { filter: brightness(1); transform: scale(1); } 20% { transform: scale(1.04, 0.96); } 35% { transform: scale(0.97, 1.04); } 50% { filter: brightness(1.6); transform: scale(1.05, 0.95); } 65% { transform: scale(0.95, 1.06); } 85% { filter: brightness(6) saturate(0); transform: scale(1.02); opacity: 1; } 100% { filter: brightness(8) saturate(0); transform: scale(0.9); opacity: 0; } }
@keyframes evo-flash { 0% { opacity: 0; transform: scale(0.4); } 30% { opacity: 1; transform: scale(1.2); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes evo-new { 0% { opacity: 0; transform: scale(0.6); } 60% { opacity: 1; transform: scale(1.08); } 100% { opacity: 1; transform: scale(1); } }
.evo.done .evo-new { opacity: 1; }
.evo.done .evo-old { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .evo.run .evo-glow, .evo.run .evo-old, .evo.run .evo-flash, .evo.run .evo-new { animation: none !important; }
  .evo.run .evo-old { opacity: 0; }
  .evo.run .evo-new { opacity: 1; }
}

/* 下の解説（ポータルと同じ決まり） */
.guide { margin-top: 28px; background: var(--paper); border-radius: 18px; padding: 22px 20px 12px; font-size: 15px; line-height: 1.85; }
.guide p { margin: 0 0 1em; }
.guide h2 { font-size: 19px; margin: 32px 0 12px; padding-left: 10px; border-left: 5px solid var(--main); line-height: 1.4; }
.guide h2:first-child { margin-top: 0; }
.guide h3 { font-size: 16px; margin: 22px 0 6px; line-height: 1.5; }
.guide .steps { list-style: none; padding: 0; margin: 0 0 1em; }
.guide .steps li { display: flex; align-items: baseline; gap: 6px; margin: 6px 0; }
.guide .steps .num { flex: none; font-weight: 900; color: var(--main); }
.guide details { border-top: 1px solid var(--line); padding: 12px 0; }
.guide details p { margin: 8px 0 4px; }
.guide summary { font-weight: 900; cursor: pointer; }
.reset-row { text-align: center; margin-top: 16px !important; }
.g-foot { max-width: 560px; margin: 0 auto; padding: 14px 16px 28px; font-size: 12px; text-align: center; }
.g-foot a { color: var(--ink-soft); }
@media (max-width: 359px) {
  .g-head { gap: 6px; padding: 10px 12px; font-size: 12px; }
  .care-btn .cl { font-size: 13px; }
  .room { height: 270px; }
  .pet { width: 214px; height: 214px; margin-left: -107px; }
  .dex-art { width: 64px; height: 64px; }
}