/* Responsive shell: one save, one engine, two considered layouts. */
:root { --nav-height: 76px; --soft-ink: #dac7ba; }
[hidden] { display: none !important; }
html { color-scheme: dark; scroll-padding-top: 120px; }
body { font-family: Heebo, sans-serif; background: #100810; }
button, input, select, textarea { font: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid #7de3ff; outline-offset: 3px;
}
#phone { min-width: 0; box-sizing: border-box; padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom)); }
.ph5 .top { gap: 8px; padding-bottom: 12px; }
.brand { text-align: center; }
.eyebrow { display: block; color: #edc78c; font: 600 11px/1.6 Heebo, sans-serif; letter-spacing: .06em; }
.brand .eyebrow { margin-bottom: 4px; }
.ph5 .ttl { font-size: 13px; letter-spacing: 2px; }
.ph5 .cur { font-size: 34px; gap: 5px; }
.ph5 .chips { flex-wrap: wrap; justify-content: center; gap: 5px; }
.ph5 .chip { font-size: 10px; padding: 2px 7px; gap: 5px; box-shadow: 2px 2px 0 #1b0711; }
.scene-title { padding: 22px 20px 4px; text-align: center; }
.scene-title h1 { font: 400 27px/1.15 'Secular One', Heebo, sans-serif; margin: 7px 0; color: #fff0ce; }
.scene-title h1 br { display: none; }
.scene-title p { font-size: 12px; color: var(--soft-ink); margin: 8px 0 12px; }
.ph5 .stage { margin: 0; min-width: 0; }
.ph5 .stage::after { display: none; }
.tap-hint { margin: 0; padding: 12px 14px; text-align: center; color: #dbc8b4; font-size: 11px; }
.scene-stats { display: grid; grid-template-columns: 1.35fr 1fr 1fr; padding: 0 12px 16px; gap: 6px; }
.scene-stats > div { padding: 10px 4px; border: 1px solid #683643; border-radius: 10px; background: #170b17; text-align: center; }
.scene-stats span { display: block; font-size: 9px; color: #baa298; }
.scene-stats bdi { display: block; margin-top: 3px; color: #f4ce89; font: 400 17px 'Secular One', Heebo, sans-serif; }
.bakery-heading { padding: 20px 14px 6px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px; }
.bakery-heading h2 { font: 400 24px 'Secular One', Heebo, sans-serif; margin: 3px 0; }
.bakery-heading p { width: 100%; margin: 6px 0 0; color: #c7aca5; font-size: 12px; }
.counter-label { color: #88dfcf; border: 1px solid #3d7770; border-radius: 20px; padding: 4px 10px; font-size: 12px; }
.buymode { padding-bottom: 8px; }
.ph5 .list { gap: 12px; padding-bottom: 16px; }
.row5 .tx { min-width: 0; flex: 1; }
.row5 .tx b { font-size: 16px; }
.row5 .tx small { white-space: normal; line-height: 1.5; font-size: 10px; }
.row5 .bar i { transition: transform .1s linear; }
.buy5 { min-width: 65px; max-width: 38%; }
.buy5 .cost { overflow-wrap: anywhere; }
.nav5 { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); padding: 7px 4px calc(7px + env(safe-area-inset-bottom)); min-height: var(--nav-height); box-sizing: border-box; background: #160c16; border-top: 2px solid #b62d41; }
.nav5 button { position: relative; color: #bda6a2; font: 600 11px Heebo, sans-serif; min-height: 58px; padding: 7px 0; border: 0; border-radius: 10px; gap: 4px; cursor: pointer; }
.nav5 button.on, .nav5 button[aria-current="page"] { color: #ffe0a0; background: #3a1c2c; }
.nav5 button.on::before { content: ''; position: absolute; top: -7px; width: 22px; height: 3px; border-radius: 4px; background: #f2b83a; }
.nav5 [data-screen="imps"], .nav5 [data-screen="market"], .nav5 [data-screen="achievements"], .nav5 [data-screen="settings"] { display: none; }
.welcome { bottom: calc(var(--nav-height) + 12px + env(safe-area-inset-bottom)); }
.platform-status { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 12px; font-size: 11px; color: #d7bfb4; }
.platform-status button { min-height: 44px; background: #39202d; color: #ffdf9c; border: 1px solid #825064; border-radius: 9px; padding: 8px 14px; cursor: pointer; }
.platform-status [role="status"] { padding: 10px; }
#features { min-width: 0; }
.shop-panel { min-width: 0; }
.feature-open .shop-panel { display: none; }
@media (max-width: 759px) {
  .brand .eyebrow, .scene-title { display: none; }
  .ph5 .stage > svg { max-height: 240px; background: #2a0a24; }
  .tap-hint { padding-block: 7px; font-size: 10px; }
  .scene-stats { padding-bottom: 4px; }
  .scene-stats > div { padding-block: 7px; }
  .bakery-heading { padding-top: 15px; }
}
.angel-event {
  position: fixed; z-index: 50; bottom: calc(var(--nav-height) + 12px + env(safe-area-inset-bottom));
  left: 50%; transform: translateX(-50%); width: min(480px,calc(100vw - 24px));
  max-height: calc(100dvh - 210px); overflow-y: auto; box-sizing: border-box; margin: 0;
}
@media (max-width: 359px) {
  .ph5 .chip { font-size: 9px; padding: 2px 5px; }
  .ph5 .list { padding-inline: 8px; }
  .row5 { gap: 7px; padding: 8px 7px; }
  .row5 .ic { width: 45px; height: 45px; }
  .row5 .tx b { font-size: 14px; }
  .scene-title h1 { font-size: 24px; }
}
@media (min-width: 760px) {
  body { background: radial-gradient(ellipse at 80% 10%, #481e39 0, transparent 52%), radial-gradient(ellipse at 5% 70%, #351b24 0, transparent 50%), #100810; }
  #app { padding: 22px 24px 40px; }
  .ph5 {
    display: grid; width: 100%; max-width: 1380px; min-height: calc(100dvh - 62px);
    grid-template-columns: minmax(280px,.95fr) minmax(340px,1.05fr);
    grid-template-rows: auto auto auto auto 1fr auto;
    grid-template-areas: 'top top' 'nav nav' 'news news' 'event event' 'scene shop' 'platform platform';
    column-gap: 28px; align-content: start; padding: 0 24px 24px;
    border: 1px solid #6a3c4b; border-radius: 24px; overflow: clip;
    background: linear-gradient(135deg,#281126,#170d16 65%); box-shadow: 0 28px 100px #0007;
  }
  #phone { padding-bottom: 24px; }
  .ph5 .top {
    grid-area: top; position: relative; display: grid; grid-template-columns: 1fr auto;
    gap: 5px 28px; align-items: center; padding: 22px 4px 18px;
    background: transparent; box-shadow: none;
  }
  .brand { grid-column: 1; grid-row: 1 / span 2; text-align: right; }
  .brand .eyebrow { margin-bottom: 7px; }
  .ph5 .ttl { display: inline-block; padding: 7px 18px; font-size: 22px; letter-spacing: 3px; }
  .ph5 .cur { justify-content: flex-end; font-size: 39px; }
  .ph5 .chips { justify-content: flex-end; }
  .ph5 .chip { font-size: 11px; padding: 3px 10px; }
  .nav5 {
    position: sticky; left: auto; transform: none; width: auto; max-width: none;
    grid-area: nav; grid-template-columns: repeat(8,minmax(0,1fr));
    top: 0; bottom: auto; margin: 0 -24px; padding: 8px 16px;
    min-height: 72px; z-index: 20; border-top: 1px solid #5a3043; border-bottom: 1px solid #5a3043;
    box-shadow: 0 6px 24px #0004;
  }
  .nav5 button { flex-direction: row; justify-content: center; gap: 8px; font-size: 12px; min-height: 48px; }
  .nav5 [data-screen="imps"], .nav5 [data-screen="market"], .nav5 [data-screen="achievements"], .nav5 [data-screen="settings"] { display: flex; }
  .nav5 .mobile-more { display: none; }
  .nav5 button.on::before { top: auto; bottom: 0; }
  .news { grid-area: news; margin: 0 -24px 6px; border-top: 0; border-bottom: 1px solid #4d2638; height: 30px; background: #180a13; }
  .news span { line-height: 30px; }
  .ph5 .stage { grid-area: scene; position: sticky; top: 86px; align-self: start; padding-top: 12px; }
  .shop-panel { grid-area: shop; align-self: start; }
  .scene-title { text-align: right; padding: 16px 14px 6px; }
  .scene-title h1 { font-size: clamp(30px,3.5vw,48px); line-height: 1.1; margin: 8px 0 12px; }
  .scene-title h1 br { display: inline; }
  .scene-title p { font-size: 13px; margin-bottom: 16px; }
  .ph5 .stage > svg { border: 1px solid #6d3946; border-radius: 160px 160px 20px 20px; overflow: hidden; }
  .scene-stats { padding-inline: 0; gap: 10px; }
  .scene-stats > div { padding: 14px 6px; }
  .scene-stats span { font-size: 11px; }
  .scene-stats bdi { font-size: 20px; }
  .tap-hint { padding: 14px 0; font-size: 12px; }
  .bakery-heading { padding: 30px 0 12px; }
  .bakery-heading h2 { font-size: 30px; }
  .bakery-heading p { font-size: 13px; line-height: 1.6; }
  .buymode { padding: 0 0 16px; gap: 10px; }
  .buymode button { box-shadow: 3px 3px 0 #0008; }
  .ph5 .list { padding: 0 0 24px; gap: 15px; }
  .row5 { padding: 14px 12px; gap: 12px; }
  .row5 .tx b { font-size: 19px; }
  .row5 .tx small { font-size: 12px; }
  .row5 .ic { width: 58px; height: 58px; }
  .buy5 { min-width: 80px; padding: 7px 12px; }
  #phone.feature-open { grid-template-areas: 'top top' 'nav nav' 'news news' 'event event' 'features features' 'platform platform'; grid-template-rows: auto auto auto auto 1fr auto; }
  #features { grid-area: features; padding: 28px; margin-top: 20px; }
  .angel-event { bottom: 24px; max-height: calc(100dvh - 100px); }
  .platform-status { grid-area: platform; margin-bottom: 0; }
  .welcome { bottom: 24px; }
}
@media (min-width: 1180px) {
  .ph5 { column-gap: 48px; padding-inline: 36px; }
  .nav5, .news { margin-inline: -36px; }
  .nav5 button { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

/* Keep continuous motion off the SVG JavaScript repaint path. */
#stage g[filter] { filter: none !important; }
#stage #imp { transform-box: view-box; transform-origin: 150px 208px; animation: bakery-breathe 3.2s ease-in-out infinite; }
@keyframes bakery-breathe { 50% { transform: translateY(-1px) scaleY(1.008); } }
.scene-paused #stage #imp, .app-hidden *, .app-hidden *::before { animation-play-state: paused !important; }
#newsT { width: max-content; right: auto; left: 0; animation: bakery-news 45s linear infinite; will-change: transform; }
@keyframes bakery-news { from { transform: translateX(-100%); } to { transform: translateX(100vw); } }
.row5 .ic svg { filter: none; }
.row5[data-tier="3"] .ic, .ph5 .ttl::after { animation: none; }
.ph5 .cur bdi { filter: none; }