:root {
  color-scheme: dark;
  font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", system-ui, sans-serif;
  --ink: #fff9ff;
  --muted: #c9b8d3;
  --panel: rgba(36, 22, 45, 0.92);
  --pink: #ff3e9d;
  --pink2: #ff78bd;
  --purple: #8b5cf6;
  --gold: #ffd76a;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100dvh;
  background: radial-gradient(circle at 50% 10%, #4b1744 0, #17101e 42%, #09070c 100%);
  color: var(--ink);
  overscroll-behavior: none;
}
button { font: inherit; }
.app-shell {
  width: min(100%, 520px);
  min-height: 100dvh;
  margin: 0 auto;
  padding: max(12px, env(safe-area-inset-top)) 14px calc(74px + env(safe-area-inset-bottom));
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 22px 22px;
}
.topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.brand-lockup { min-width:0; flex:1; position:relative; }
.eyebrow { margin: 0; color: var(--pink2); font-size: 9px; font-weight: 900; letter-spacing: .16em; }
.game-logo-heading { margin:-5px 0 -7px; line-height:0; }
.game-logo-image { display:block; width:min(100%,290px); height:auto; object-fit:contain; object-position:left center; filter:drop-shadow(0 5px 5px #0009); }
.test-badge { display:inline-block; margin-top:5px; padding:3px 7px; border:1px solid #75f4e0; border-radius:999px; background:#113e3bcc; color:#bafff5; font-size:9px; font-weight:900; letter-spacing:.04em; }
.test-badge[hidden] { display:none; }
.coin-pill {
  border: 1px solid rgba(255,215,106,.6); background: #2b2130; color: white;
  border-radius: 999px; padding: 8px 10px; display: flex; gap: 5px; align-items: center;
  box-shadow: 0 4px 12px #0007; cursor: pointer;
}
.coin-pill strong { color: var(--gold); font-size: 17px; }
.plus { color: var(--pink2); font-weight: 900; }
.progress-panel {
  margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr auto; gap: 9px;
  align-items: end; padding: 9px; border-radius: 14px; background: var(--panel);
  border: 1px solid rgba(255,255,255,.1); box-shadow: 0 6px 20px #0005;
}
.status-strip { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px; margin-top:7px; }
.title-chip,.roster-button { border:1px solid #ffffff20; border-radius:999px; background:#271a30; color:white; padding:6px 9px; font-size:10px; font-weight:900; cursor:pointer; white-space:nowrap; }
.title-chip { color:#ffe7a8; border-color:#ffd76a55; }
.mood-meter { display:flex; align-items:center; gap:4px; font-size:11px; }
.mood-meter div { flex:1; height:8px; border-radius:99px; position:relative; background:linear-gradient(90deg,#eb314e,#49344f 49%,#ff65af); }
.mood-meter i { position:absolute; top:50%; left:50%; width:13px; height:13px; transform:translate(-50%,-50%); border-radius:50%; background:white; border:2px solid #351829; box-shadow:0 2px 6px #0008; transition:left .35s ease; }
.level-title { display: flex; justify-content: space-between; font-size: 11px; font-weight: 900; }
.bar { height: 7px; background: #100b14; border-radius: 999px; overflow: hidden; margin-top: 5px; }
.bar i { display:block; width:0; height:100%; background: linear-gradient(90deg, #7c3aed, #ff3e9d); transition: width .35s ease; }
.bar.love i { background: linear-gradient(90deg, #ff3e9d, #ff9ece); }
.visit-count { font-size: 10px; color: var(--muted); white-space: nowrap; }
.visit-count strong { color: white; font-size: 14px; }
.stage {
  height: min(47dvh, 430px); min-height: 300px; margin-top: 10px; position: relative;
  border-radius: 28px; overflow: hidden; isolation: isolate;
  background: radial-gradient(circle at 50% 32%, #714063 0, #32223d 52%, #17101d 100%);
  border: 2px solid rgba(255,120,189,.28); box-shadow: inset 0 -30px 70px #0006, 0 10px 32px #0007;
}
.stage::before { content:""; position:absolute; inset:0; background: radial-gradient(circle, #fff3 1px, transparent 2px); background-size: 28px 28px; opacity:.3; z-index:-1; }
.stage-backdrop { position:absolute; z-index:0; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .35s ease; }
.stage-backdrop.show { opacity:.9; }
.stage-flower-overlay { position:absolute; z-index:1; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1); transform-origin:50% 65%; transition:opacity .45s ease, transform .55s ease, filter .55s ease; pointer-events:none; }
.stage-flower-overlay.show { opacity:1; }
.stage.universe-mode .stage-backdrop.show { opacity:1; filter:saturate(1.18) brightness(1.07); }
.stage.universe-mode .stage-flower-overlay.show { opacity:.8; transform:scale(1.12) translateY(5%); filter:saturate(.95) brightness(1); }
.universe-vfx { position:absolute; z-index:3; inset:-18%; pointer-events:none; opacity:0; background:radial-gradient(circle at 50% 43%,transparent 0 15%,#fff8 16%,#ff74d866 18%,transparent 31%),conic-gradient(from 10deg at 50% 43%,transparent 0 8%,#fff7 9%,transparent 11% 22%,#ff7cd877 23%,transparent 25% 42%,#fff8 43%,transparent 45% 63%,#c66cff66 64%,transparent 67% 84%,#fff8 85%,transparent 87%); mix-blend-mode:screen; }
.stage.universe-reveal { animation:universe-impact 3.4s ease-out; }
.stage.universe-reveal::after { content:""; position:absolute; z-index:6; inset:0; pointer-events:none; background:white; opacity:0; animation:universe-flash 3.4s ease-out; }
.stage.universe-reveal .stage-backdrop { animation:universe-arrival 3.4s cubic-bezier(.16,.75,.22,1); }
.stage.universe-reveal .stage-flower-overlay.show { animation:flowers-make-way 3.4s ease-in-out; }
.stage.universe-reveal .universe-vfx { animation:universe-ring 3.4s ease-out; }
@keyframes universe-flash { 0%{opacity:.95} 7%{opacity:0} 15%{opacity:.55} 24%,100%{opacity:0} }
@keyframes universe-arrival { 0%{opacity:0;transform:scale(1.38);filter:brightness(2.1) saturate(1.45)} 10%{opacity:1} 35%{transform:scale(1.08);filter:brightness(1.35) saturate(1.35)} 100%{transform:scale(1);filter:brightness(1.07) saturate(1.18)} }
@keyframes flowers-make-way { 0%{opacity:1;transform:scale(1)} 10%,58%{opacity:.05;transform:scale(1.18) translateY(13%);filter:brightness(.45)} 100%{opacity:.8;transform:scale(1.12) translateY(5%);filter:saturate(.95) brightness(1)} }
@keyframes universe-ring { 0%{opacity:0;transform:scale(.2) rotate(-20deg)} 9%{opacity:1} 42%{opacity:.72;transform:scale(1.08) rotate(8deg)} 100%{opacity:0;transform:scale(1.55) rotate(18deg)} }
@keyframes universe-impact { 0%,6%,12%,18%{transform:translate(0)} 3%,15%{transform:translate(-2px,1px)} 9%{transform:translate(2px,-1px)} 24%,100%{transform:translate(0)} }
.character { position:absolute; z-index:2; height:98%; width:auto; max-width:96%; bottom:-1%; left:50%; transform:translateX(-50%); object-fit:contain; filter:drop-shadow(0 12px 10px #0008); transition:filter .2s; }
.character.react { animation: react .45s cubic-bezier(.2,.9,.25,1.3); }
.character.annoyed { filter: drop-shadow(0 0 13px #9f7aea) saturate(.95); }
.character.happy { filter: drop-shadow(0 0 18px #ff79ba) saturate(1.15); }
.character.pleased { filter: drop-shadow(0 0 14px #ff9ece) saturate(1.08); }
.character.angry { filter: drop-shadow(0 0 16px #e53656) saturate(1.2); }
.character.gagging { filter:drop-shadow(0 0 18px #a6e56d) saturate(.9); }
.character.react.devastated { filter:drop-shadow(0 0 25px #ff304f) saturate(1.35); animation:devastated .7s cubic-bezier(.2,.9,.25,1.3); transform-origin:50% 100%; }
.character.react.spicy { filter:drop-shadow(0 0 28px #ff261d) saturate(1.5) contrast(1.05); animation:spicy-panic .42s linear infinite; transform-origin:50% 100%; }
.character.react.ecstatic { filter:drop-shadow(0 0 24px #ffd76a) saturate(1.25); animation:ecstatic .9s cubic-bezier(.2,.9,.25,1.3); transform-origin:50% 100%; }
@keyframes react { 0%{transform:translateX(-50%) scale(1)} 25%{transform:translateX(-53%) rotate(-2deg) scale(1.04)} 55%{transform:translateX(-47%) rotate(2deg) scale(.98)} 100%{transform:translateX(-50%) scale(1)} }
@keyframes ecstatic { 0%{transform:translateX(-50%) scale(.98)} 28%{transform:translateX(-50%) scale(1.025)} 52%{transform:translateX(-50%) scale(.99)} 76%{transform:translateX(-50%) scale(1.015)} 100%{transform:translateX(-50%) scale(1)} }
@keyframes devastated { 0%{transform:translateX(-50%) rotate(0) scale(.98)} 18%{transform:translateX(-55%) rotate(-3deg) scale(1.04)} 36%{transform:translateX(-45%) rotate(3deg)} 54%{transform:translateX(-54%) rotate(-2deg)} 72%{transform:translateX(-46%) rotate(2deg)} 100%{transform:translateX(-50%) rotate(0) scale(1)} }
@keyframes spicy-panic { 0%,100%{transform:translateX(-50%) rotate(-.7deg) scale(1.01)} 25%{transform:translateX(calc(-50% - 3px)) rotate(.8deg) scale(1.015)} 50%{transform:translateX(calc(-50% + 3px)) rotate(-.5deg) scale(1.01)} 75%{transform:translateX(calc(-50% - 2px)) rotate(.6deg) scale(1.015)} }
.speech {
  position:absolute; z-index:4; top:auto; bottom:12px; left:12px; max-width:78%; padding:9px 12px;
  border-radius:16px 16px 16px 4px; background:#fff; color:#2c1831; font-size:13px; font-weight:900;
  box-shadow:0 5px 15px #0005;
}
.reaction-label { position:absolute; z-index:4; right:10px; top:9px; padding:5px 9px; border-radius:99px; background:#160e1dcc; font-size:10px; font-weight:900; }
.burst { position:absolute; z-index:5; inset:0; display:grid; place-items:center; font-size:70px; pointer-events:none; opacity:0; }
.burst.show { animation: burst .75s ease-out; }
@keyframes burst { 0%{opacity:0;transform:scale(.2) rotate(-12deg)} 25%{opacity:1;transform:scale(1.15)} 100%{opacity:0;transform:scale(1.8) rotate(8deg)} }
.controls { margin-top:10px; }
.tabs { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.tab { border:1px solid #ffffff1f; border-radius:14px; background:#25182d; color:#cdbbd7; padding:9px; font-weight:900; cursor:pointer; }
.tab.active { color:white; background:linear-gradient(135deg,#6d28d9,#d8237d); border-color:#ff78bd; box-shadow:0 4px 14px #9c1e7566; }
.item-grid { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(72px,1fr); overflow-x:auto; gap:6px; margin-top:8px; padding-bottom:3px; scrollbar-width:none; }
.item-grid::-webkit-scrollbar{display:none}
.item-card { border:1px solid #ffffff1f; border-radius:13px; padding:8px 3px 7px; color:white; background:#281b30; text-align:center; min-width:0; cursor:pointer; position:relative; }
.item-count { position:absolute; z-index:2; right:4px; top:4px; min-width:20px; padding:2px 4px; border-radius:99px; background:#ff3e9d; color:white; font-size:9px; font-weight:900; box-shadow:0 2px 5px #0007; }
.item-card:active { transform:scale(.95); }
.item-card.locked { opacity:.5; filter:grayscale(.4); }
.item-icon { display:block; font-size:25px; line-height:1.1; }
.item-name { display:block; margin-top:4px; font-size:10px; font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.item-cost { display:block; color:var(--gold); font-size:10px; font-weight:900; margin-top:2px; }
.lock-note { position:absolute; inset:0; display:grid; place-items:center; border-radius:13px; background:#120d16bb; font-size:9px; font-weight:900; }
.daily-button { width:100%; margin-top:8px; border:1px solid #ffd76a99; border-radius:12px; padding:8px; color:#ffe7a8; background:#3b2d20; font-size:10px; font-weight:900; cursor:pointer; }
.daily-button:disabled { opacity:.45; }
.ad-footer { position:fixed; z-index:10; bottom:0; left:50%; transform:translateX(-50%); width:min(100%,520px); height:calc(58px + env(safe-area-inset-bottom)); padding:7px 12px calc(7px + env(safe-area-inset-bottom)); display:flex; align-items:center; justify-content:space-between; gap:8px; background:#eee; color:#333; border-top:1px solid #bbb; }
.ad-footer div { display:flex; gap:7px; align-items:center; font-size:11px; }
.ad-footer small { background:#777; color:white; padding:2px 4px; border-radius:3px; }
.ad-footer button { border:0; border-radius:999px; background:#26202a; color:#fff; padding:6px 9px; font-size:10px; font-weight:900; cursor:pointer; }
.feedback-fab { position:fixed; z-index:12; right:max(12px,calc((100vw - 520px)/2 + 12px)); bottom:calc(66px + env(safe-area-inset-bottom)); border:1px solid #ff91c8; border-radius:999px; padding:7px 10px; background:linear-gradient(135deg,#61245f,#b82277); color:#fff; box-shadow:0 5px 16px #0009; font-size:10px; font-weight:900; cursor:pointer; }
dialog { width:min(92%,460px); border:0; border-radius:24px; padding:0; color:white; background:#211629; box-shadow:0 20px 70px #000c; }
dialog::backdrop { background:#07040aaf; backdrop-filter:blur(5px); }
.shop-card { padding:20px; position:relative; }
.shop-card h2 { margin:2px 0 14px; font-size:27px; }
.close { position:absolute; right:13px; top:10px; border:0; background:transparent; color:white; font-size:30px; cursor:pointer; }
.vip-card { padding:13px; border-radius:17px; background:linear-gradient(135deg,#4f2262,#9b246c); border:1px solid #ff91c8; }
.vip-card div { display:flex; align-items:center; gap:7px; }.vip-card h3{margin:0}.vip-card p{font-size:11px;margin:8px 0}
.vip-badge { background:#ffd76a; color:#472a00; padding:3px 6px; border-radius:99px; font-size:9px; font-weight:900; }
.buy-button { width:100%; border:0; border-radius:10px; background:white; color:#6e1d52; padding:9px; font-weight:900; cursor:pointer; }
.buy-button:disabled { opacity:.5; cursor:wait; }
.account-card { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; padding:10px; border:1px solid #ffffff22; border-radius:13px; background:#17101d; }
.account-card div { min-width:0; }
.account-card strong,.account-card span { display:block; }
.account-card strong { font-size:11px; }
.account-card span { margin-top:2px; color:var(--muted); font-size:9px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.account-card button,.billing-button { border:1px solid #ff91c8; border-radius:10px; padding:7px 9px; background:#482040; color:#fff; font-size:9px; font-weight:900; cursor:pointer; }
.billing-button { width:100%; margin-top:9px; }
.coin-packs { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:11px; }
.pack { border:1px solid #ffffff22; background:#30203a; color:white; border-radius:12px; padding:10px; cursor:pointer; }
.pack strong { display:block; color:var(--gold); }.pack span{font-size:10px;color:var(--muted)}
.prototype-note { margin:11px 0 0; color:var(--muted); font-size:9px; text-align:center; }
.purchase-note { margin:11px 0 0; color:#dbcfe2; font-size:9px; line-height:1.55; text-align:left; }
.purchase-note a { color:#ff9ece; }
.legal-links { width:min(100%,520px); margin:10px auto 70px; display:flex; justify-content:center; gap:14px; font-size:10px; }
.legal-links a { color:#bdaac8; }
.record-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.record { padding:10px; border-radius:12px; background:#30203a; border:1px solid #ffffff1f; }
.record strong { display:block; color:var(--gold); font-size:20px; }.record span{font-size:10px;color:var(--muted)}
.subheading{font-size:13px;margin:15px 0 7px}.achievement-list{display:grid;gap:6px}
.achievement { display:flex; justify-content:space-between; gap:8px; padding:9px 10px; border-radius:11px; background:#2d2034; font-size:11px; }
.achievement.locked{opacity:.45}.achievement strong{color:#ff97c9}
.roster-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.roster-card { min-height:95px; padding:10px; display:flex; flex-direction:column; justify-content:flex-end; border-radius:14px; border:1px solid #ffffff22; background:radial-gradient(circle at 50% 20%,#754463,#271a30 62%); }
.roster-card .avatar{font-size:34px}.roster-card strong{font-size:12px}.roster-card span{font-size:9px;color:var(--muted)}
.roster-card.active{border-color:#ff78bd;box-shadow:inset 0 0 18px #ff3e9d44}.roster-card.locked{filter:grayscale(.7);opacity:.6}
.feedback-form h2{margin-bottom:10px}.feedback-kinds{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:0;padding:0;border:0}.feedback-kinds legend{grid-column:1/-1;margin-bottom:5px;color:var(--muted);font-size:10px;font-weight:900}.feedback-kinds input{position:absolute;opacity:0}.feedback-kinds span{display:grid;min-height:52px;place-items:center;padding:8px;border:1px solid #ffffff22;border-radius:12px;background:#30203a;text-align:center;font-size:10px;font-weight:900;cursor:pointer}.feedback-kinds input:checked+span{border-color:#ff78bd;background:linear-gradient(135deg,#542259,#9b246c);box-shadow:inset 0 0 15px #ff5faf44}.feedback-message{display:block;margin-top:12px}.feedback-message>span{display:block;margin-bottom:6px;font-size:11px;font-weight:900}.feedback-message textarea{width:100%;min-height:130px;resize:vertical;border:1px solid #ffffff2b;border-radius:13px;padding:11px;background:#160f1c;color:#fff;font:inherit;font-size:12px;line-height:1.55;outline:none}.feedback-message textarea:focus{border-color:#ff78bd;box-shadow:0 0 0 3px #ff3e9d25}.feedback-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}.feedback-status{min-height:18px;margin:8px 0 4px;color:#ffd76a;font-size:10px;font-weight:900}.feedback-submit{width:100%;border:0;border-radius:12px;padding:11px;background:linear-gradient(135deg,#ff3e9d,#9b39ef);color:#fff;font-weight:900;cursor:pointer}.feedback-submit:disabled{opacity:.55;cursor:wait}
.feedback-replies{margin-top:14px;padding-top:12px;border-top:1px solid #ffffff1f}.feedback-replies h3{margin:0 0 8px;font-size:12px}.feedback-empty{margin:0;color:var(--muted);font-size:10px}.feedback-reply{margin-top:7px;padding:9px;border:1px solid #ffffff1f;border-radius:11px;background:#211528}.feedback-reply-head{display:flex;justify-content:space-between;gap:8px;margin-bottom:5px;font-size:9px;color:var(--muted)}.feedback-reply-message{margin:0;font-size:10px;line-height:1.45}.feedback-reply-answer{margin:7px 0 0;padding:8px;border-radius:9px;background:#ff5cab18;color:#fff;font-size:11px;line-height:1.5}.feedback-compensation{margin:6px 0 0;color:#ffd76a;font-size:10px;font-weight:900}
.toast { position:fixed; z-index:30; left:50%; top:18%; transform:translate(-50%,-10px); padding:10px 16px; border-radius:99px; background:#fff; color:#35142b; font-weight:900; font-size:12px; box-shadow:0 8px 30px #0009; opacity:0; pointer-events:none; transition:.22s; white-space:nowrap; }
.toast.show { opacity:1; transform:translate(-50%,0); }
@media (max-height:730px) { .stage{height:39dvh;min-height:245px}.item-icon{font-size:21px}.item-card{padding-top:6px}.progress-panel{margin-top:6px}.controls{margin-top:6px} }