/* Product shell: menu surfaces only. The game board, cards, HUD and studio canvas keep their own rendering. */
body.product-shell {
  --shell-paper: #faf7f0;
  --shell-paper-raised: #fffdf9;
  --shell-ink: #31423c;
  --shell-muted: #718079;
  --shell-line: #e6e2d8;
  --shell-sage: #537b67;
  --shell-sage-dark: #426652;
  --shell-apricot: #f1c49f;
  --shell-lilac: #e9e3f2;
  --shell-shadow: 0 12px 32px rgba(49, 66, 60, .11), 0 2px 6px rgba(49, 66, 60, .06);
}

body.product-shell :is(#homeOverlay, #homeOverlay *, #shellHomePanel, #shellHomePanel *, #shellHomeTools, #shellHomeTools *, #shellSectionHeader, #shellSectionHeader *, #homeNav, #homeNav *,
  #gachaOverlay, #gachaOverlay *, #storeOverlay, #storeOverlay *, #missionsOverlay, #missionsOverlay *,
  #settingsOverlay, #settingsOverlay *, #statsOverlay, #statsOverlay *, #rankOverlay, #rankOverlay *,
  #villageDecorOverlay, #villageDecorOverlay *, #charDetailOverlay, #charDetailOverlay *, #charBuyOverlay, #charBuyOverlay *,
  #parentalSubOverlay, #communitySubOverlay, #langSubOverlay, #audioSubOverlay, #creditsOverlay,
  #privacyOverlay, #howOverlay, #charSetConfirmOverlay) {
  color: var(--shell-ink);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans KR", sans-serif;
}

body.product-shell :is(#homeOverlay, #homeOverlay *, #homeNav, #homeNav *,
  #gachaOverlay, #storeOverlay, #missionsOverlay, #settingsOverlay, #statsOverlay,
  #villageDecorOverlay, #charDetailOverlay, #charBuyOverlay, #rankOverlay,
  #parentalSubOverlay, #communitySubOverlay, #langSubOverlay, #audioSubOverlay,
  #creditsOverlay, #privacyOverlay, #howOverlay, #charSetConfirmOverlay) {
  text-shadow: none;
}

body.product-shell #homeOverlay {
  z-index: 8;
  background: transparent;
  overflow: visible;
  pointer-events: none;
  transition: none;
}
body.product-shell #homeOverlay > * { pointer-events: auto; }
body.product-shell .home-top { display: contents; }
body.product-shell #homeSettingsBtn,
body.product-shell .home-top > .combo-stat { display: none; }
body.product-shell .home-mid {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  left: max(16px, env(safe-area-inset-left));
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 10px;
  width: auto;
  padding: 0;
  text-align: left;
  transform: none;
}
body.product-shell #shellHomeTools {
  position: fixed;
  z-index: 13;
  top: max(10px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  display: flex;
  align-items: center;
  gap: 7px;
}
body.product-shell .shell-home-tools button,
body.product-shell .shell-home-tools .shell-wallet {
  display: grid;
  min-width: 44px;
  min-height: 44px;
  place-items: center;
  border: 1px solid rgba(230, 226, 216, .9);
  border-radius: 15px;
  background: rgba(250, 247, 240, .96);
  color: var(--shell-ink);
  box-shadow: 0 3px 10px rgba(49, 66, 60, .08);
}
body.product-shell .shell-home-tools .shell-wallet { display: flex; gap: 6px; padding: 0 12px; font-size: 13px; font-weight: 700; }
body.product-shell #shellWallet { min-width: 58px; }
body.product-shell #shellModes.shell-icon-button { min-width: 44px; min-height: 44px; border: 1px solid var(--shell-line); border-radius: 15px; background: rgba(250,247,240,.96); color: var(--shell-ink); box-shadow: 0 3px 10px rgba(49,66,60,.08); }
body.product-shell .shell-home-tools .shell-icon,
body.product-shell .home-nav-btn .shell-icon { display: block; width: 24px; height: 24px; flex: 0 0 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body.product-shell .home-logo,
body.product-shell .home-logo-sub { display: none; }
body.product-shell .shell-brand { display: grid; gap: 1px; color: var(--shell-ink); }
body.product-shell .shell-brand strong { font: 400 20px/1.05 "Jua", system-ui, sans-serif; letter-spacing: .1px; }
body.product-shell .shell-brand small { color: var(--shell-muted); font-size: 11px; line-height: 1.2; }

body.product-shell #shellHomePanel {
  position: fixed;
  z-index: 11;
  left: max(12px, env(safe-area-inset-left));
  right: max(12px, env(safe-area-inset-right));
  bottom: calc(var(--home-nav-h, 76px) + max(9px, env(safe-area-inset-bottom)));
  max-width: 620px;
  margin-inline: auto;
  padding: 17px 18px 15px;
  border: 1px solid rgba(230, 226, 216, .9);
  border-radius: 24px;
  background: rgba(250, 247, 240, .97);
  box-shadow: var(--shell-shadow);
  color: var(--shell-ink);
}
body.product-shell .shell-home-panel .shell-eyebrow,
body.product-shell .shell-section-header .shell-eyebrow {
  display: block;
  margin: 0 0 5px;
  color: var(--shell-sage);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1.25;
  text-transform: uppercase;
}
body.product-shell .shell-home-panel h1,
body.product-shell .shell-section-header h1 {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--shell-ink);
  font: 400 clamp(21px, 5.5vw, 27px)/1.12 "Jua", system-ui, sans-serif;
  letter-spacing: 0;
  box-shadow: none;
}
body.product-shell .shell-lead { margin: 5px 0 12px; color: var(--shell-muted); font-size: 12px; line-height: 1.4; }
body.product-shell .shell-play-row { display: grid; grid-template-columns: minmax(0, 1fr) 48px; gap: 9px; }
body.product-shell .shell-primary,
body.product-shell .shell-icon-button,
body.product-shell .shell-shortcut,
body.product-shell .shell-bottom-link {
  font: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
body.product-shell #shellPlay.shell-primary {
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 15px;
  border: 1px solid var(--shell-sage);
  border-radius: 16px;
  background: var(--shell-sage);
  color: #fff;
  box-shadow: 0 4px 10px rgba(83, 123, 103, .18);
  text-align: left;
  animation: none;
}
body.product-shell #shellPlay.shell-primary > span { font: 400 17px/1.1 "Jua", system-ui, sans-serif; }
body.product-shell #shellPlay.shell-primary small { color: rgba(255,255,255,.82); font-size: 10px; }
body.product-shell #shellModes.shell-icon-button {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--shell-line);
  border-radius: 15px;
  background: var(--shell-paper-raised);
  color: var(--shell-ink);
}
body.product-shell .shell-shortcuts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 9px; }
body.product-shell .shell-shortcut {
  display: grid;
  min-width: 0;
  min-height: 54px;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  padding: 7px 8px;
  border: 1px solid var(--shell-line);
  border-radius: 15px;
  background: var(--shell-paper-raised);
  color: var(--shell-ink);
  text-align: left;
}
body.product-shell .shell-shortcut-icon { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 9px; background: var(--shell-lilac); }
body.product-shell .shell-shortcut strong,
body.product-shell .shell-shortcut small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.product-shell .shell-shortcut strong { font-size: 10px; line-height: 1.2; }
body.product-shell .shell-shortcut small { margin-top: 2px; color: var(--shell-muted); font-size: 9px; line-height: 1.2; }
body.product-shell .shell-bottom-link { display: block; margin: 8px auto 0; padding: 5px 10px; border: 0; background: transparent; color: var(--shell-muted); font-size: 11px; }

body.product-shell #homeNav {
  z-index: 150;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(72px + env(safe-area-inset-bottom));
  min-height: 72px;
  padding: 6px max(8px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  border-top: 1px solid rgba(230, 226, 216, .9);
  background: rgba(250, 247, 240, .98);
  box-shadow: 0 -6px 22px rgba(49, 66, 60, .06);
  backdrop-filter: blur(12px);
}
body.product-shell .home-nav-btn {
  min-width: 44px;
  min-height: 44px;
  flex: 1 1 0;
  gap: 3px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: var(--shell-muted);
  font: 600 10px/1.15 system-ui, sans-serif;
  text-shadow: none;
  box-shadow: none;
  image-rendering: auto;
  transition: background-color .16s ease, color .16s ease;
}
body.product-shell .home-nav-btn:is(.active, [aria-current="page"]) { background: #e7eee8; color: var(--shell-sage-dark); }
body.product-shell .home-nav-ico,
body.product-shell .home-nav-play-ico-wrap { width: 24px; height: 24px; border-radius: 9px; background: transparent; box-shadow: none; }
body.product-shell .home-nav-btn:is(.active, [aria-current="page"]) .home-nav-ico { background: transparent; box-shadow: none; }
body.product-shell .home-nav-btn::before,
body.product-shell .home-nav-btn::after,
body.product-shell .home-nav-ico::before,
body.product-shell .home-nav-ico::after { display: none; }
body.product-shell .home-nav-play { transform: none; animation: none; }
body.product-shell .home-nav-play:is(.active, [aria-current="page"]) { transform: none; }
body.product-shell .home-nav-play-ico { width: 22px; height: 22px; transform: none; }

body.product-shell .shell-section-header:not([hidden]) {
  position: fixed;
  z-index: 72;
  top: 0;
  left: 0;
  right: 0;
  display: grid;
  min-height: calc(64px + env(safe-area-inset-top));
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 8px;
  padding: calc(env(safe-area-inset-top) + 7px) max(14px, env(safe-area-inset-right)) 7px max(14px, env(safe-area-inset-left));
  border-bottom: 1px solid rgba(230, 226, 216, .86);
  background: rgba(250, 247, 240, .97);
  color: var(--shell-ink);
}
body.product-shell #shellHomeBack,
body.product-shell #shellHeaderSettings {
  display: grid;
  min-width: 44px;
  min-height: 44px;
  place-items: center;
  border: 1px solid var(--shell-line);
  border-radius: 15px;
  background: var(--shell-paper-raised);
  color: var(--shell-ink);
}
body.product-shell .shell-section-header h1 { font-size: 19px; }
body.product-shell .shell-section-header .shell-eyebrow { margin-bottom: 1px; font-size: 9px; }

/* Menu screens share a calm, scrollable paper surface below the fixed shell header. */
body.product-shell :is(#gachaOverlay, #storeOverlay, #missionsOverlay, #settingsOverlay, #statsOverlay,
  #rankOverlay, #villageDecorOverlay, #parentalSubOverlay, #communitySubOverlay, #langSubOverlay,
  #audioSubOverlay, #creditsOverlay, #privacyOverlay, #howOverlay, #charSetConfirmOverlay) {
  z-index: 60;
  align-items: flex-start;
  justify-content: center;
  overflow-x: hidden;
  overflow-y: auto;
  padding: calc(76px + env(safe-area-inset-top)) 12px calc(20px + env(safe-area-inset-bottom));
  background: var(--shell-paper);
  color: var(--shell-ink);
  backdrop-filter: none;
  -webkit-overflow-scrolling: touch;
}
body.product-shell :is(#gachaOverlay, #storeOverlay, #missionsOverlay, #settingsOverlay, #statsOverlay,
  #rankOverlay, #villageDecorOverlay, #parentalSubOverlay, #communitySubOverlay, #langSubOverlay,
  #audioSubOverlay, #creditsOverlay, #privacyOverlay, #howOverlay, #charSetConfirmOverlay) > .dialog {
  width: min(100%, 620px);
  max-width: 620px;
  max-height: none;
  flex: 0 0 auto;
  margin: 0 auto;
  padding: 22px 18px 26px;
  overflow: visible;
  border: 1px solid var(--shell-line);
  border-radius: 24px;
  background: var(--shell-paper-raised);
  box-shadow: var(--shell-shadow);
  color: var(--shell-ink);
  image-rendering: auto;
}
body.product-shell :is(#gachaOverlay, #storeOverlay, #missionsOverlay, #settingsOverlay, #statsOverlay,
  #rankOverlay, #parentalSubOverlay, #communitySubOverlay, #langSubOverlay, #audioSubOverlay,
  #creditsOverlay, #privacyOverlay, #howOverlay, #charSetConfirmOverlay) .dialog h1 {
  margin: 0 0 16px;
  padding: 0 0 12px;
  border: 0;
  border-bottom: 1px solid var(--shell-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--shell-ink);
  font: 400 24px/1.18 "Jua", system-ui, sans-serif;
  text-align: left;
  text-shadow: none;
}
body.product-shell .shell-intro { margin: -4px 0 16px; color: var(--shell-muted); font-size: 13px; line-height: 1.5; }
body.product-shell .shell-shop-note { margin: 0 0 14px; padding: 12px 14px; border: 1px solid #eadfce; border-radius: 16px; background: #fff7ed; color: #725d4d; font-size: 12px; line-height: 1.45; }

/* Buttons and cards: replace the pixelated frame layer in menu surfaces only. */
body.product-shell :is(#gachaOverlay, #storeOverlay, #missionsOverlay, #settingsOverlay, #statsOverlay,
  #rankOverlay, #parentalSubOverlay, #communitySubOverlay, #langSubOverlay, #audioSubOverlay,
  #creditsOverlay, #privacyOverlay, #howOverlay, #charSetConfirmOverlay) :is(.diff, .icon-btn, .set-tile, .gacha-cell, .store-card, .mission-bar, .m-row-claim, .store-card-buy, .store-feat-buy) {
  border: 1px solid var(--shell-line);
  border-radius: 16px;
  background: var(--shell-paper-raised);
  color: var(--shell-ink);
  box-shadow: 0 2px 6px rgba(49,66,60,.05);
  text-shadow: none;
  image-rendering: auto;
}
body.product-shell :is(#gachaOverlay, #storeOverlay, #missionsOverlay, #settingsOverlay, #statsOverlay,
  #rankOverlay, #parentalSubOverlay, #communitySubOverlay, #langSubOverlay, #audioSubOverlay,
  #creditsOverlay, #privacyOverlay, #howOverlay, #charSetConfirmOverlay) :is(.diff, .set-tile, .gacha-cell, .store-card-buy, .store-feat-buy) { min-height: 44px; }
body.product-shell :is(#gachaOverlay, #storeOverlay, #missionsOverlay, #settingsOverlay, #statsOverlay,
  #rankOverlay, #parentalSubOverlay, #communitySubOverlay, #langSubOverlay, #audioSubOverlay,
  #creditsOverlay, #privacyOverlay, #howOverlay, #charSetConfirmOverlay) .diff.again,
body.product-shell :is(#gachaOverlay, #storeOverlay, #missionsOverlay, #settingsOverlay) .store-card-buy,
body.product-shell :is(#gachaOverlay, #storeOverlay, #missionsOverlay, #settingsOverlay) .store-feat-buy {
  border-color: var(--shell-sage);
  background: var(--shell-sage);
  color: #fff;
}
body.product-shell :is(#gachaOverlay, #storeOverlay, #missionsOverlay, #settingsOverlay, #statsOverlay) .diff.ghost { background: var(--shell-lilac); border-color: #ddd4e9; color: #514a61; }
body.product-shell :is(#gachaOverlay, #storeOverlay, #missionsOverlay, #settingsOverlay, #statsOverlay) :is(.gacha-back, .icon-btn) { min-width: 44px; min-height: 44px; }
body.product-shell :is(#gachaOverlay, #storeOverlay, #missionsOverlay, #settingsOverlay, #statsOverlay) :is(.gacha-cat-h, .mission-section-h, .set-section-h, .store-sec-h, .stats-detail-h) {
  display: block;
  margin: 18px 0 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--shell-sage-dark);
  font: 700 12px/1.3 system-ui, sans-serif;
  letter-spacing: .06em;
  text-align: left;
  text-shadow: none;
}
body.product-shell :is(#gachaOverlay, #storeOverlay, #missionsOverlay, #settingsOverlay, #statsOverlay) .set-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}
body.product-shell :is(#gachaOverlay, #storeOverlay, #missionsOverlay, #settingsOverlay, #statsOverlay) .set-section-h { grid-column: 1 / -1; }
body.product-shell :is(#gachaOverlay, #storeOverlay, #missionsOverlay, #settingsOverlay, #statsOverlay) .set-tile {
  min-height: 72px;
  padding: 10px;
  font: 600 12px/1.3 system-ui, sans-serif;
}
body.product-shell :is(#gachaOverlay, #storeOverlay, #missionsOverlay, #settingsOverlay, #statsOverlay) .set-tile.toggle-tile.on { background: #e7eee8; border-color: #bfd0c2; color: var(--shell-sage-dark); text-shadow: none; }
body.product-shell :is(#gachaOverlay, #storeOverlay, #missionsOverlay, #settingsOverlay, #statsOverlay) .set-ico { font-size: 21px; }
body.product-shell #gachaOverlay .gacha-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; align-items: stretch; }
body.product-shell #gachaOverlay .gacha-cell { min-height: 128px; padding: 10px; }
body.product-shell #gachaOverlay .gacha-cell img { image-rendering: pixelated; }
body.product-shell #storeOverlay .store-card { margin: 0 0 12px; padding: 14px; }
body.product-shell #storeOverlay .store-card-title { color: var(--shell-ink); }
body.product-shell #storeOverlay .store-card-desc { color: var(--shell-muted); opacity: 1; }
body.product-shell #storeOverlay :is(.store-flockbox, .store-pkg-scene) { border-radius: 16px; }
body.product-shell #storeOverlay .store-card-buy { min-height: 46px; }
body.product-shell #missionsOverlay .mission-bar { padding: 14px; color: var(--shell-ink); }
body.product-shell #missionsOverlay .m-row { border-bottom: 1px solid var(--shell-line); }
body.product-shell #missionsOverlay :is(.m-row-title, .m-row-progress, .m-title) { color: var(--shell-ink); }
body.product-shell #missionsOverlay :is(.m-track, .mission-bar .m-track) { height: 8px; border: 0; border-radius: 99px; background: #e8e8df; box-shadow: none; }
body.product-shell #missionsOverlay :is(.m-fill, .mission-bar .m-fill) { border-radius: inherit; background: var(--shell-sage); }
body.product-shell #gachaOverlay .gacha-grid img,
body.product-shell #gachaOverlay .gacha-grid .gacha-art { border-radius: 15px; }

/* Keep the village editor's stage/canvas untouched; only its outer room receives safe top clearance. */
body.product-shell #villageDecorOverlay { padding-top: calc(72px + env(safe-area-inset-top)); }
body.product-shell #villageDecorOverlay > .dialog.village-decor-dialog { position: relative; width: min(100%, 980px); max-width: 980px; min-height: calc(100dvh - 92px - env(safe-area-inset-top)); padding: 0; overflow: hidden; border-radius: 24px; background: var(--shell-paper); }
body.product-shell #villageDecorOverlay .village-decor-room { min-height: inherit; }
body.product-shell #villageDecorOverlay .room-studio { top: 0; padding-top: max(12px, env(safe-area-inset-top)); }

body.product-shell :is(#charDetailOverlay, #charBuyOverlay) { background: rgba(250,247,240,.96); }
body.product-shell :is(#charDetailOverlay, #charBuyOverlay) .char-detail { border: 1px solid var(--shell-line); border-radius: 22px; background: var(--shell-paper-raised); box-shadow: var(--shell-shadow); image-rendering: auto; }

body.product-shell :is(#gachaOverlay, #storeOverlay, #missionsOverlay, #settingsOverlay, #statsOverlay,
  #rankOverlay, #parentalSubOverlay, #communitySubOverlay, #langSubOverlay, #audioSubOverlay,
  #creditsOverlay, #privacyOverlay, #howOverlay, #charSetConfirmOverlay) :is(button, [role="button"]) { touch-action: manipulation; }
body.product-shell :is(#gachaOverlay, #storeOverlay, #missionsOverlay, #settingsOverlay, #statsOverlay,
  #rankOverlay, #parentalSubOverlay, #communitySubOverlay, #langSubOverlay, #audioSubOverlay,
  #creditsOverlay, #privacyOverlay, #howOverlay, #charSetConfirmOverlay) button:focus-visible,
body.product-shell #homeNav button:focus-visible,
body.product-shell #shellHomePanel button:focus-visible { outline: 3px solid rgba(83,123,103,.42); outline-offset: 2px; }

@media (min-width: 700px) {
  body.product-shell #shellHomePanel { padding: 20px 22px 17px; }
  body.product-shell .shell-shortcuts { gap: 9px; }
  body.product-shell .shell-shortcut { min-height: 62px; grid-template-columns: 32px minmax(0,1fr); }
  body.product-shell .shell-shortcut-icon { width: 32px; height: 32px; }
  body.product-shell :is(#gachaOverlay, #storeOverlay, #missionsOverlay, #settingsOverlay, #statsOverlay) .set-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-height: 640px) {
  body.product-shell #shellHomePanel { padding: 12px 14px 10px; }
  body.product-shell .shell-home-panel .shell-eyebrow { margin-bottom: 2px; }
  body.product-shell .shell-home-panel h1 { font-size: 21px; }
  body.product-shell .shell-lead { margin: 3px 0 7px; }
  body.product-shell #shellPlay.shell-primary { min-height: 46px; }
  body.product-shell .shell-shortcuts { margin-top: 6px; }
  body.product-shell .shell-shortcut { min-height: 46px; }
  body.product-shell .shell-shortcut small { display: none; }
}
@media (max-width: 360px) {
  body.product-shell .home-mid { left: max(10px, env(safe-area-inset-left)); }
  body.product-shell .shell-brand strong { font-size: 17px; }
  body.product-shell .shell-brand small { font-size: 9px; }
  body.product-shell .shell-home-tools { right: max(8px, env(safe-area-inset-right)); gap: 4px; }
  body.product-shell .shell-home-tools button { min-width: 40px; min-height: 40px; }
  body.product-shell .shell-home-tools .shell-wallet { min-width: 50px; padding-inline: 7px; font-size: 11px; }
  body.product-shell #shellHomePanel { left: 8px; right: 8px; padding: 13px 12px 11px; border-radius: 20px; }
  body.product-shell .shell-shortcuts { gap: 5px; }
  body.product-shell .shell-shortcut { grid-template-columns: 22px minmax(0,1fr); gap: 4px; padding: 6px 5px; }
  body.product-shell .shell-shortcut-icon { width: 22px; height: 22px; }
  body.product-shell .shell-shortcut strong { font-size: 9px; }
  body.product-shell #homeNav { padding-inline: 4px; }
  body.product-shell .home-nav-btn { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  body.product-shell #homeNav *, body.product-shell #shellHomePanel *, body.product-shell :is(#gachaOverlay, #storeOverlay, #missionsOverlay, #settingsOverlay, #statsOverlay) * { scroll-behavior: auto; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Integration contracts: category containers, hidden states and inherited raster frames. */
body.product-shell [hidden] { display: none !important; }
body.product-shell .shell-retired-offer,
body.product-shell .shell-purchase-unavailable { display: none !important; }
body.product-shell :is(#gachaOverlay,#storeOverlay,#missionsOverlay,#settingsOverlay,#statsOverlay,#howOverlay,#charSetConfirmOverlay) :is(.dialog,h1,.diff,.icon-btn,.gacha-cell,.store-card,.set-tile,.store-card-buy,.store-feat-buy,.gacha-cat-h,.set-section-h,.mission-section-h,.store-sec-h,.mission-bar) { border-image: none; }
body.product-shell #gachaOverlay .gacha-grid { display: flex; flex-direction: column; gap: 18px; }
body.product-shell #gachaOverlay .gacha-cat-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
body.product-shell #gachaOverlay .gacha-cell { min-width: 0; }
body.product-shell #gachaOverlay .gacha-cell img { image-rendering: auto; }
body.product-shell .shell-owned-only .gacha-cell.locked { display: none; }
body.product-shell .shell-owned-only .gacha-cat:not(:has(.gacha-cell.owned)) { display: none; }
body.product-shell .shell-collection-filter { display:flex; gap:8px; margin:12px 0; }
body.product-shell .shell-collection-filter button { min-height:44px; padding:8px 20px; border:1px solid var(--shell-line); border-radius:24px; background:var(--shell-paper); color:var(--shell-ink); font:600 13px system-ui; }
body.product-shell .shell-collection-filter button[aria-pressed="true"] { background:var(--shell-sage); color:white; border-color:var(--shell-sage); }
body.product-shell .shell-shortcut-icon .shell-icon { width:18px; height:18px; }
body.product-shell #homeNav .home-nav-ico { animation: none; transform:none; }
body.product-shell .shell-shop-free { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
body.product-shell .shell-shop-free .store-card { min-width:0; display:flex; flex-direction:column; align-items:center; }
body.product-shell .shell-shop-free .store-card-art { height:86px; }
body.product-shell .shell-shop-free .store-card-desc { font-size:12px; line-height:1.5; }
body.product-shell .shell-shop-free .btn-badge-wrap { width:100%; margin-top:auto; }
body.product-shell .shell-shop-free .store-card-buy { width:100%; font-size:12px; white-space:normal; }
body.product-shell #storeOverlay .store-card-badge { display:none; }
body.product-shell.home-active :is(#gachaOverlay,#missionsOverlay,#storeOverlay,#settingsOverlay,#statsOverlay) { padding-bottom:calc(92px + env(safe-area-inset-bottom)); }
body.product-shell.home-active :is(#gachaOverlay,#missionsOverlay,#storeOverlay,#settingsOverlay,#statsOverlay) > .dialog > h1 { display:none; }
body.product-shell .missions-currency-wrap { position:static; margin:0 0 12px; }
body.product-shell .shell-bottom-link { min-height:30px; }
body.product-shell .shell-home-tools[hidden] { display:none; }
body.product-shell #adspace { display:none; }
@media(min-width:680px){body.product-shell #gachaOverlay .gacha-cat-grid{grid-template-columns:repeat(4,minmax(0,1fr));}}
@media(max-width:350px){body.product-shell .shell-shop-free{grid-template-columns:1fr;}body.product-shell #gachaOverlay .gacha-cat-grid{gap:6px;}}
body.product-shell:not(.shell-can-purchase) :is(#charDetailBuyBtn,#charBuyBtn,#parentalAdRemove) { display:none !important; }

/* The old full-screen dialogs were fixed; use their parent's safe viewport inset. */
body.product-shell :is(#gachaOverlay,#storeOverlay,#missionsOverlay,#settingsOverlay,#statsOverlay,#rankOverlay,#parentalSubOverlay,#communitySubOverlay,#langSubOverlay,#audioSubOverlay,#creditsOverlay,#howOverlay) > .dialog { position:relative; inset:auto; height:auto; min-height:0; width:100%; align-items:stretch; }
body.product-shell #shellPlay.shell-primary > span { color:#fff; }
body.product-shell .shell-collection-filter button[aria-pressed="true"] { color:#fff; }
body.product-shell .shell-shop-free .store-card-art { margin:0 auto 10px; }
body.product-shell .shell-shop-free .store-card-title { text-align:center; }
body.product-shell #villageDecorOverlay .room-studio { background:var(--shell-paper); color:var(--shell-ink); }
body.product-shell #villageDecorOverlay :is(button,.rs-coin,.rs-item,.rs-category) { border-image:none; border:1px solid var(--shell-line); border-radius:12px; text-shadow:none; background:var(--shell-paper-raised); color:var(--shell-ink); }
body.product-shell #villageDecorOverlay :is(.rs-workbench,.rs-edit-row) { border-image:none; border:0; background:transparent; }
body.product-shell #villageDecorOverlay .rs-round-btn { width:44px; height:44px; }
body.product-shell #villageDecorOverlay .rs-stage { border:1px solid var(--shell-line); border-radius:20px; }
/* Keep the developer entry reachable from home as well as the game. */
body.product-shell.home-active .god-fab { display:flex; }

body.product-shell.home-active :is(#settingsBack,#statsBack) { display:none; }
body.product-shell #settingsOverlay .set-ico .shell-icon { width:25px; height:25px; color:var(--shell-sage); }
body.product-shell .shell-collection-filter button[aria-pressed="true"] { color:#fff !important; }
body.product-shell #gachaOverlay .set-toggle { border-image:none; border:1px solid #c2d9c9; border-radius:16px; min-height:32px; padding:5px 12px; font:600 11px system-ui; color:var(--shell-sage-dark); background:#e7eee8; }
body.product-shell #gachaOverlay .gacha-cell { display:flex; flex-direction:column; align-items:center; justify-content:center; }
body.product-shell .shell-discovery { margin-top:16px; padding-top:10px; border-top:1px solid var(--shell-line); }
body.product-shell .shell-discovery h2 { font:600 15px system-ui; margin:8px 0 12px; }
body.product-shell #shellDiscoveryFriends { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
body.product-shell .shell-friend-preview { display:flex; flex-direction:column; align-items:center; gap:8px; min-height:120px; padding:12px 5px; border:1px solid var(--shell-line); border-radius:18px; background:#f7f4ee; color:var(--shell-ink); font:500 12px system-ui; }
body.product-shell .shell-friend-preview img { width:70px; height:76px; object-fit:contain; }