/* Tapp - the mobile game pass (2026-11-03).
   Loaded last. One display face (Titan One) for every label, button and number,
   the UI face for sentences, chunky 3D buttons, pills instead of boxes, and
   panels that come up from the bottom like a game sheet. Fewer words: the
   sub-lines that repeated the label are hidden, not deleted. */

#app {
  --pixel: var(--shout);
  --btn-green: linear-gradient(180deg, #7ee08a 0%, #3fbf58 100%);
  --btn-green-edge: #23803a;
  --btn-gold: linear-gradient(180deg, #ffe58a 0%, #ffc531 100%);
  --btn-gold-edge: #b9860f;
  --btn-off: linear-gradient(180deg, #ece6da 0%, #d9d1c2 100%);
  --sheet: #fffaf0;
  --line-soft: rgba(44, 36, 22, .10);
}

/* Every former pixel label: Titan One reads at any size, so no tracking needed. */
#app .adslot-cta, #app .buy-btn, #app .chip, #app .combo-badge, #app .crawl-door .label,
#app .side-btn .label, #app .mini-btn, #app .mode-copy b, #app .odds, #app .panel-h3,
#app .shop-tab, #app .tap-hint, #app .tap-float, #app .strip-metric b, #app .strip-metric em,
#app .strip-cost b, #app .gb-state em, #app .cal-day, #app .gift-day, #app .upgrade-copy .level,
#app .reboot-btn, #app .theme-card .season-tag, #app .skin-copy .meta, #app .theme-copy .meta,
#app .pin-when, #app .chest-progress, #app .reveal-tag, #app .reveal-badge, #app .hatch-go,
#app .core-bank, #app .season-wear, #app .gb-last, #app .daily-copy em {
  letter-spacing: .01em !important;
  font-weight: 400 !important;
}

/* ---------------------------------------------------------------- top bar */
#app .topbar { align-items: center !important; gap: 8px !important; }
#app .icon-btn {
  width: 40px !important; height: 40px !important; border-radius: 14px !important;
  border: 0 !important; background: #fff !important; color: var(--ink) !important;
  box-shadow: 0 4px 0 rgba(44, 36, 22, .28), inset 0 -3px 0 rgba(44, 36, 22, .08) !important;
}
#app .icon-btn:active { transform: translateY(3px) !important; box-shadow: 0 1px 0 rgba(44, 36, 22, .28) !important; }
#app .icon-btn svg { width: 20px !important; height: 20px !important; }
#app .brand { border: 0 !important; box-shadow: none !important; background: none !important; }
#app .brand-logo { filter: drop-shadow(0 3px 0 rgba(44, 36, 22, .2)) !important; }
#app .wallet { gap: 6px !important; }
#app .chip {
  height: 32px !important; min-width: 64px !important; padding: 0 12px 0 4px !important; gap: 6px !important;
  border: 0 !important; border-radius: 999px !important;
  background: rgba(30, 22, 48, .72) !important; color: #fff !important;
  font-family: var(--shout) !important; font-size: .92rem !important;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .12), 0 3px 0 rgba(0, 0, 0, .18) !important;
  backdrop-filter: blur(6px) !important;
}
#app .chip .chip-ico { width: 24px !important; height: 24px !important; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .3)) !important; }
#app .chip b { font-weight: 400 !important; text-shadow: 0 1px 0 rgba(0, 0, 0, .35) !important; }
#app .chip--premium::after { box-shadow: 0 0 0 2px rgba(30, 22, 48, .72) !important; }

/* ---------------------------------------------------------------- the ad: one slim pill */
#app .adslot {
  margin: 8px 10px 0 !important; padding: 5px 5px 5px 6px !important; gap: 8px !important;
  border: 0 !important; border-radius: 999px !important;
  box-shadow: 0 3px 0 rgba(44, 36, 22, .22), inset 0 2px 0 rgba(255, 255, 255, .45) !important;
}
#app .adslot-art { border-radius: 50% !important; }
#app .adslot-copy b { font-family: var(--shout) !important; font-weight: 400 !important; font-size: .86rem !important; line-height: 1.1 !important; }
#app .adslot-copy em { font-size: .74rem !important; opacity: .85 !important; }
#app .adslot-cta {
  padding: 7px 12px !important; border: 0 !important; border-radius: 999px !important;
  background: #fff !important; color: var(--campaign-ink) !important;
  font-family: var(--shout) !important; font-size: .74rem !important; text-transform: none !important;
  box-shadow: 0 2px 0 rgba(44, 36, 22, .2) !important;
}

/* ---------------------------------------------------------------- mode switch: a segmented toggle */
#app .modes {
  margin: 8px 10px 0 !important; padding: 4px !important; gap: 4px !important;
  border-radius: 999px !important; background: rgba(30, 22, 48, .55) !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .25) !important;
  backdrop-filter: blur(6px) !important;
}
#app .mode-btn {
  justify-content: center !important; gap: 6px !important; padding: 7px 10px !important;
  border: 0 !important; border-radius: 999px !important; background: transparent !important; box-shadow: none !important;
  color: rgba(255, 255, 255, .78) !important;
}
#app .mode-copy em { display: none !important; }
#app .mode-copy b { font-size: .9rem !important; text-transform: none !important; }
#app .mode-ico { width: 18px !important; height: 18px !important; }
#app .mode-btn.is-on {
  background: var(--btn-gold) !important; color: var(--ink) !important;
  box-shadow: 0 3px 0 var(--btn-gold-edge), inset 0 2px 0 rgba(255, 255, 255, .6) !important;
}
#app .mode-btn.is-on::after, #app .mode-btn .mode-dot { right: 10px !important; }

/* ---------------------------------------------------------------- the props: game-style name tags */
#app .crawl-door .label, #app .side-btn .label {
  padding: 3px 10px 4px !important; border: 0 !important; border-radius: 999px !important;
  background: rgba(30, 22, 48, .78) !important; color: #fff !important;
  font-family: var(--shout) !important; font-size: .72rem !important; text-transform: none !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .4) !important;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .2) !important;
  backdrop-filter: blur(4px) !important;
}
#app .tap-hint {
  padding: 6px 14px !important; border: 0 !important; border-radius: 999px !important;
  background: rgba(255, 255, 255, .92) !important; color: var(--ink) !important;
  font-family: var(--shout) !important; font-size: .78rem !important; text-transform: none !important; line-height: 1.15 !important;
  box-shadow: 0 3px 0 rgba(44, 36, 22, .2) !important;
}

/* giveaway and idle strips: a card, not a plank */
#app .giveaway-bar, #app .status-strip {
  border: 0 !important; border-radius: 20px !important;
  background: rgba(255, 252, 245, .95) !important;
  box-shadow: 0 4px 0 rgba(44, 36, 22, .22), 0 10px 24px -10px rgba(0, 0, 0, .35) !important;
}
#app .gb-state b { font-family: var(--shout) !important; font-weight: 400 !important; font-size: .95rem !important; }
#app .gb-state em { font-family: var(--ui) !important; text-transform: none !important; font-size: .74rem !important; color: var(--ink-soft) !important; }
#app .odds { border: 0 !important; border-radius: 999px !important; background: #efe6d6 !important; font-family: var(--shout) !important; text-transform: none !important; }
#app .mini-btn {
  border: 0 !important; border-radius: 999px !important; padding: 7px 14px !important;
  background: var(--btn-green) !important; color: #0f3a1a !important; font-family: var(--shout) !important; text-transform: none !important;
  box-shadow: 0 3px 0 var(--btn-green-edge), inset 0 2px 0 rgba(255, 255, 255, .5) !important;
}
#app .mini-btn:active { transform: translateY(2px) !important; box-shadow: 0 1px 0 var(--btn-green-edge) !important; }
#app .strip-metric em { font-family: var(--ui) !important; text-transform: none !important; font-size: .68rem !important; }
#app .strip-track { border-radius: 999px !important; }

/* ---------------------------------------------------------------- panels: a bottom sheet */
#app .overlay { align-items: flex-end !important; padding: 0 !important; background: rgba(18, 12, 30, .5) !important; }
#app .panel {
  max-width: 520px !important; max-height: 88% !important;
  padding: 8px 16px calc(18px + var(--safe-bottom)) !important;
  border: 0 !important; border-radius: 26px 26px 0 0 !important;
  background: var(--sheet) !important;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, .35) !important;
  transform: translateY(40px) !important; opacity: 0 !important;
}
#app .overlay.open .panel { transform: translateY(0) !important; opacity: 1 !important; }
#app .panel::before {
  content: '' !important; display: block !important; width: 44px !important; height: 5px !important; margin: 0 auto 8px !important;
  border-radius: 999px !important; background: rgba(44, 36, 22, .16) !important;
}
#app .panel-head {
  position: sticky !important; top: -8px !important; z-index: 3 !important; margin: 0 -16px 8px !important; padding: 2px 16px 10px !important;
  border-bottom: 1px solid var(--line-soft) !important; background: var(--sheet) !important;
}
#app .panel-head h2 { font-size: 1.35rem !important; }
#app .close-btn {
  width: 34px !important; height: 34px !important; border: 0 !important; border-radius: 50% !important;
  background: #efe6d6 !important; color: var(--ink) !important; font-size: .9rem !important;
  box-shadow: inset 0 -2px 0 rgba(44, 36, 22, .1) !important;
}
#app .close-btn:active { transform: scale(.92) !important; box-shadow: none !important; }
#app .panel-lead { font-size: .8rem !important; line-height: 1.45 !important; color: var(--ink-soft) !important; margin: 0 0 10px !important; }
#app .panel-tip { font-size: .76rem !important; border-radius: 14px !important; }
#app .panel-h3 { margin: 16px 0 8px !important; font-size: 1rem !important; text-transform: none !important; color: var(--ink) !important; }

/* tabs: one scrolling row of pills */
#app .shop-tabs {
  flex-wrap: nowrap !important; overflow-x: auto !important; scrollbar-width: none !important; gap: 6px !important;
  margin: 0 -16px 12px !important; padding: 2px 16px 6px !important;
}
#app .shop-tabs::-webkit-scrollbar { display: none !important; }
#app .shop-tab {
  padding: 8px 14px !important; border: 0 !important; border-radius: 999px !important;
  background: #efe6d6 !important; color: var(--ink-soft) !important;
  font-size: .82rem !important; text-transform: none !important;
}
#app .shop-tab.is-on { background: var(--ink) !important; color: #fff !important; box-shadow: 0 3px 0 rgba(0, 0, 0, .25) !important; }

/* shop rows: icon, name, one line, a fat price button */
#app .upgrade-item {
  gap: 12px !important; padding: 10px 10px 10px 10px !important; margin-bottom: 8px !important;
  border: 0 !important; border-radius: 18px !important; background: #fff !important;
  box-shadow: 0 2px 0 rgba(44, 36, 22, .08), 0 0 0 1px var(--line-soft) !important;
}
#app .upgrade-icon { width: 52px !important; height: 52px !important; border-radius: 14px !important; }
#app .upgrade-icon--art img { width: 52px !important; height: 52px !important; border-radius: 14px !important; }
#app .upgrade-copy .name { font-family: var(--shout) !important; font-weight: 400 !important; font-size: .95rem !important; line-height: 1.15 !important; }
#app .upgrade-copy .level {
  display: inline-block !important; margin-left: 4px !important; padding: 1px 7px !important; border-radius: 999px !important;
  background: #efe6d6 !important; font-family: var(--shout) !important; font-size: .7rem !important; vertical-align: 2px !important;
}
#app .upgrade-copy .desc { font-size: .78rem !important; color: #2f8a45 !important; font-weight: 700 !important; }
#app .upgrade-copy .blurb { display: none !important; }
#app .buy-btn {
  min-width: 82px !important; height: 42px !important; padding: 0 12px !important; gap: 5px !important;
  border: 0 !important; border-radius: 14px !important;
  background: var(--btn-green) !important; color: #0f3a1a !important;
  font-family: var(--shout) !important; font-size: .92rem !important; text-transform: none !important;
  box-shadow: 0 4px 0 var(--btn-green-edge), inset 0 2px 0 rgba(255, 255, 255, .5) !important;
  opacity: 1 !important;
}
#app .buy-btn:active:not(:disabled) { transform: translateY(3px) !important; box-shadow: 0 1px 0 var(--btn-green-edge) !important; }
#app .buy-btn:disabled {
  background: var(--btn-off) !important; color: #8c8273 !important; opacity: 1 !important; filter: none !important;
  box-shadow: 0 4px 0 #b9ae9b, inset 0 2px 0 rgba(255, 255, 255, .5) !important;
}
#app .buy-btn .buy-coin, #app .buy-btn .ico { width: 18px !important; height: 18px !important; }

/* the big call-to-action buttons inside sheets */
#app .floor-shop, #app .floor-link, #app .shop-floor, #app .gift-boost, #app .onboard-go, #app .boost-one, #app .boost-three, #app .reboot-btn {
  border: 0 !important; border-radius: 16px !important; font-family: var(--shout) !important; text-transform: none !important;
}
#app .shop-floor, #app .floor-link {
  display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
  width: 100% !important; padding: 12px 14px !important; margin: 0 0 12px !important;
  background: var(--btn-gold) !important; color: var(--ink) !important; font-size: .9rem !important;
  box-shadow: 0 4px 0 var(--btn-gold-edge), inset 0 2px 0 rgba(255, 255, 255, .6) !important;
}
#app .floor-shop, #app .gift-boost, #app .onboard-go, #app .boost-one, #app .boost-three {
  background: var(--btn-green) !important; color: #0f3a1a !important;
  box-shadow: 0 4px 0 var(--btn-green-edge), inset 0 2px 0 rgba(255, 255, 255, .5) !important;
}
#app .ghost-btn { border: 0 !important; border-radius: 14px !important; background: #efe6d6 !important; font-family: var(--shout) !important; }

/* menu: awards as tidy tiles, streak and themes as pills */
#app .inv-chip, #app .theme-chip {
  border: 0 !important; border-radius: 999px !important; font-family: var(--shout) !important; text-transform: none !important; letter-spacing: .01em !important;
  box-shadow: 0 0 0 1px var(--line-soft) !important;
}
#app .inv-chip.is-on { background: var(--btn-gold) !important; box-shadow: 0 3px 0 var(--btn-gold-edge) !important; }
#app .cal-day, #app .gift-day { border-radius: 12px !important; border-width: 0 !important; background: #fff !important; box-shadow: 0 0 0 1px var(--line-soft) !important; font-size: .8rem !important; }

/* toast: a floating pill */
#app .toast { border: 0 !important; border-radius: 18px !important; box-shadow: 0 10px 30px rgba(0, 0, 0, .3) !important; }

/* onboarding: the same sheet language */
#onboarding .onboard-card, #onboarding > div { border-radius: 26px !important; }

@media (prefers-reduced-motion: reduce) {
  #app .panel { transition: none !important; }
}

/* award tiles and chest pins: soft cards, no frames */
#app .aw-row { border: 0 !important; border-radius: 16px !important; background: #fff !important; box-shadow: 0 2px 0 rgba(44, 36, 22, .07), 0 0 0 1px var(--line-soft) !important; }
#app .aw-row.is-won { background: linear-gradient(180deg, #fff6d6, #fff) !important; box-shadow: 0 3px 0 var(--btn-gold-edge), 0 0 0 2px #ffc531 !important; }
#app .aw-text b { font-family: var(--shout) !important; font-weight: 400 !important; font-size: .82rem !important; }
#app .aw-bar { border: 0 !important; height: 6px !important; border-radius: 999px !important; background: #efe6d6 !important; }
#app .aw-bar i { border-radius: 999px !important; background: linear-gradient(90deg, #ffd34d, #ff9d3d) !important; }
#app .pin { border: 0 !important; border-radius: 18px !important; background: #fff !important; box-shadow: 0 2px 0 rgba(44, 36, 22, .07), 0 0 0 1px var(--line-soft) !important; }
#app .pin:not(.is-kept):not(.is-live) .pin-badge { filter: grayscale(1) brightness(.3) opacity(.22) !important; }
#app .pin.is-kept { background: radial-gradient(circle at 50% 30%, #fff6d6, #fff 70%) !important; box-shadow: 0 3px 0 var(--btn-gold-edge), 0 0 0 2px #ffc531 !important; }
#app .pin.is-kept .pin-badge { filter: drop-shadow(0 4px 6px rgba(184, 134, 15, .45)) !important; }
#app .pin.is-live { background: linear-gradient(180deg, #ffe6ef, #fff) !important; box-shadow: 0 3px 0 #d94a7e, 0 0 0 2px #ff6b9d !important; }
#app .pin-name { font-family: var(--shout) !important; font-weight: 400 !important; font-size: .8rem !important; }
#app .pin-when { display: inline-block !important; margin-top: 3px !important; padding: 2px 8px !important; border-radius: 999px !important; background: #efe6d6 !important; color: #8c8273 !important; font-size: .64rem !important; text-transform: none !important; }
#app .pin.is-live .pin-when { background: #ff6b9d !important; color: #fff !important; }
#app .pin.is-kept .pin-when { background: #ffc531 !important; color: var(--ink) !important; }
#app .chip b, #app .chip--premium b { color: #fff !important; opacity: 1 !important; }
#app .side-btn .label, #app .crawl-door .label { position: relative !important; z-index: 6 !important; }
#app .chest-btn { z-index: 6 !important; }

/* the planned giveaway, under the mode switch */
#app .gw-banner { position: relative; z-index: 5; display: flex; align-items: center; gap: 10px; margin: 8px 10px 0; padding: 7px 8px 7px 10px; border-radius: 18px; background: rgba(255, 252, 245, .95); box-shadow: 0 3px 0 rgba(44, 36, 22, .22); }
#app .gw-banner[hidden] { display: none !important; }
#app .gw-banner.is-live { background: linear-gradient(90deg, #fff1c2, #fffaf0); box-shadow: 0 3px 0 #b9860f, 0 0 0 2px #ffc531; }
#app .gw-ico { font-size: 1.3rem; line-height: 1; }
#app .gw-copy { display: grid; min-width: 0; flex: 1; }
#app .gw-copy b { font-family: var(--shout); font-weight: 400; font-size: .9rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#app .gw-copy em { font-style: normal; font-size: .72rem; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#app .gw-pill { padding: 4px 10px; border-radius: 999px; background: #ff6b9d; color: #fff; font-family: var(--shout); font-size: .7rem; animation: gw-pulse 1.6s ease-in-out infinite; }
@keyframes gw-pulse { 50% { box-shadow: 0 0 0 5px rgba(255, 107, 157, .25); } }
html.embed #app .gw-banner { margin: 4px 7px 0; padding: 4px 6px; }
html.embed #app .gw-copy em { display: none; }

/* coins mode: the owner switched the draw off, so nothing about odds is shown */
html.hub-coins #app #odds-pill, html.hub-coins #app #btn-boost, html.hub-coins #app #last-win { display: none !important; }

/* custom buttons can carry an emoji instead of a drawn mark */
#app .pin-emoji { font-size: 1.4rem; line-height: 1; }

/* the banner is a button now, with a live clock */
#app .gw-banner { cursor: pointer; }
#app .gw-banner:active { transform: translateY(2px); }
#app .gw-clock { padding: 5px 10px; border-radius: 12px; background: var(--ink); color: #ffe58a; font-family: var(--shout); font-size: .78rem; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* the giveaway sheet */
#app .gwp-hero { position: relative; padding: 16px; border-radius: 20px; text-align: center; background: radial-gradient(120% 90% at 50% 0%, #fff3c4, #ffe08a 60%, #ffc531); box-shadow: 0 4px 0 #b9860f; overflow: hidden; }
#app .gwp-hero::before { content: ''; position: absolute; inset: -40%; background: repeating-conic-gradient(rgba(255,255,255,.35) 0 10deg, transparent 10deg 20deg); animation: gwp-spin 30s linear infinite; }
#app .gwp-hero > * { position: relative; }
@keyframes gwp-spin { to { transform: rotate(360deg); } }
#app .gwp-prize-label { display: block; font-family: var(--shout); font-size: .72rem; color: #8a5a00; }
#app .gwp-prize { display: block; font-family: var(--shout); font-weight: 400; font-size: 1.5rem; line-height: 1.1; color: var(--ink); }
#app .gwp-hero p { margin: 6px 0 0; font-size: .8rem; color: #5a4310; }
#app .gwp-clock { display: inline-flex; flex-direction: column; margin-top: 10px; padding: 8px 16px; border-radius: 14px; background: var(--ink); color: #fff; }
#app .gwp-clock span { font-size: .66rem; opacity: .7; }
#app .gwp-clock b { font-family: var(--shout); font-weight: 400; font-size: 1.35rem; color: #ffe58a; font-variant-numeric: tabular-nums; }
#app .gwp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 10px 0 4px; }
#app .gwp-stats span { padding: 8px 6px; border-radius: 14px; background: #fff; text-align: center; font-size: .7rem; color: var(--ink-soft); box-shadow: 0 0 0 1px var(--line-soft); }
#app .gwp-stats b { display: block; font-family: var(--shout); font-weight: 400; font-size: 1.05rem; color: var(--ink); }
#app .gwp-next { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; margin-top: 8px; padding: 9px 12px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--line-soft); }
#app .gwp-next span { grid-row: span 2; align-self: center; padding: 3px 8px; border-radius: 999px; background: #efe6d6; font-family: var(--shout); font-size: .66rem; }
#app .gwp-next b { font-family: var(--shout); font-weight: 400; font-size: .86rem; }
#app .gwp-next em { font-style: normal; font-size: .72rem; color: var(--ink-soft); }
#app .gwp-rules { margin: 0 0 8px; padding-left: 18px; font-size: .78rem; line-height: 1.45; color: var(--ink-soft); }
#app .gwp-audit { display: inline-block; font-family: var(--shout); font-size: .8rem; color: #1d4ed8; }
#app .gwp-hist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
#app .gwp-hist li { display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--line-soft); }
#app .gwp-hist li.is-win { background: linear-gradient(90deg, #fff6d6, #fff); }
#app .gwp-hist li.is-mode { opacity: .75; }
#app .gwp-day { font-family: var(--shout); font-size: .72rem; color: var(--ink-soft); text-align: center; }
#app .gwp-hist b { display: block; font-family: var(--shout); font-weight: 400; font-size: .84rem; }
#app .gwp-hist em { font-style: normal; font-size: .7rem; color: var(--ink-soft); }
#app .gwp-cheer { display: inline-flex; align-items: center; gap: 4px; padding: 7px 11px; border: 0; border-radius: 999px; background: linear-gradient(180deg, #ffb3d1, #ff6b9d); color: #fff; font-family: var(--shout); font-size: .8rem; box-shadow: 0 3px 0 #c13d6e; cursor: pointer; }
#app .gwp-cheer:active { transform: translateY(2px); box-shadow: 0 1px 0 #c13d6e; }
#app .gwp-cheer.is-done { background: #efe6d6; color: var(--ink-soft); box-shadow: none; animation: gwp-pop .5s ease; }
@keyframes gwp-pop { 40% { transform: scale(1.25) rotate(-6deg); } }

/* sponsored Tapp: the advertiser's picture is the whole face. Tapp's disc and
   hands stay, his drawn face makes way for the ad. */
#app #tapp-btn.ad-face .rig-marks, #app #tapp-btn.ad-face .rig-tint-face, #app #tapp-btn.ad-face .tapp-art { opacity: 0 !important; }
#app #tapp-btn.ad-face .tapp-rig::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: var(--ad-size, 76%); aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; background: var(--ad-face) center / cover no-repeat, #fff;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .7), inset 0 -10px 18px rgba(0, 0, 0, .18), 0 2px 0 rgba(0, 0, 0, .15);
  z-index: 3; pointer-events: none;
}
#app #tapp-btn.ad-face .rig-hand-l, #app #tapp-btn.ad-face .rig-hand-r { z-index: 4 !important; }

/* button finishes for the owner's own pins */
#app .pin-art { width: 62%; height: 62%; object-fit: contain; }
#app .pin--shiny .pin-badge::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(135deg, rgba(255,255,255,.8) 0 20%, transparent 40%); pointer-events: none; }
#app .pin--gold .pin-badge { background: radial-gradient(circle at 35% 30%, #fff8d0, var(--pin-face) 45%, #c99a1c 100%) !important; }
#app .pin--holo .pin-badge { background: conic-gradient(from 30deg, #ffd6f5, #c7f0ff, #d9ffd6, #fff3c4, #ffd6f5) !important; animation: pin-holo 4s linear infinite; }
@keyframes pin-holo { to { filter: hue-rotate(360deg); } }
#app .pin--neon .pin-badge { background: radial-gradient(circle, var(--pin-face) 55%, #000 100%) !important; box-shadow: 0 0 0 3px var(--pin-rim), 0 0 14px 3px var(--pin-rim) !important; }
#app .pin--wood .pin-badge { background: repeating-linear-gradient(100deg, var(--pin-face) 0 6px, color-mix(in srgb, var(--pin-face) 80%, #6b4423) 6px 9px) !important; }
#app .pin--candy .pin-badge { background: repeating-linear-gradient(45deg, var(--pin-face) 0 6px, #fff 6px 12px) !important; }
#app .pin--galaxy .pin-badge { background: radial-gradient(circle at 30% 30%, #fff 0 1px, transparent 2px), radial-gradient(circle at 70% 60%, #fff 0 1px, transparent 2px), radial-gradient(circle at 50% 50%, #6d28d9, var(--pin-face) 70%) !important; }
#app .pin .pin-badge { position: relative; }
@media (prefers-reduced-motion: reduce) { #app .gwp-hero::before, #app .pin--holo .pin-badge { animation: none; } }
#app .gwp-local { margin: 6px 0 0 !important; font-size: .7rem !important; color: #5a4310 !important; }

/* chest shelves: holidays, weekly events, specials */
#app .pin-shelf { grid-column: 1 / -1 !important; display: flex !important; justify-content: space-between !important; align-items: baseline !important; margin: 10px 2px 0 !important; list-style: none !important; }
#app .pin-shelf b { font-family: var(--shout) !important; font-weight: 400 !important; font-size: 1rem !important; }
#app .pin-shelf span { font-family: var(--shout) !important; font-size: .78rem !important; color: var(--ink-soft) !important; }
#app .pin-week { grid-column: 1 / -1 !important; list-style: none !important; display: grid !important; padding: 12px 14px !important; border-radius: 18px !important; background: linear-gradient(120deg, #e0e7ff, #fce7f3) !important; box-shadow: 0 3px 0 rgba(44,36,22,.15) !important; }
#app .pin-week span { font-family: var(--shout) !important; font-size: .68rem !important; color: #6d28d9 !important; }
#app .pin-week b { font-family: var(--shout) !important; font-weight: 400 !important; font-size: 1.1rem !important; }
#app .pin-week em { font-style: normal !important; font-size: .72rem !important; color: var(--ink-soft) !important; }
#app .pin-more { grid-column: 1 / -1 !important; list-style: none !important; text-align: center !important; padding: 10px !important; border-radius: 14px !important; border: 2px dashed rgba(44,36,22,.18) !important; font-family: var(--shout) !important; font-size: .78rem !important; color: var(--ink-soft) !important; }

/* ---------------------------------------------------------- wide hero embed
   The front page now gives the game a wider frame (?embed=1&wide=1). The 325px
   squeeze rules still apply to plain embeds; this one fills the frame it gets
   and lets the props, labels and plates breathe again. */
html.embed.embed-wide { --widget-w: 100vw; --widget-h: 100vh; }
html.embed-wide .topbar { padding: 8px 12px 4px; }
html.embed-wide .brand-logo { height: 34px; }
html.embed-wide .adslot { margin: 4px 12px 0; padding: 6px 10px; }
html.embed-wide .modes { margin: 6px 12px 0 !important; }
html.embed-wide .mode-btn { padding: 6px 10px !important; }
html.embed-wide .mode-copy b { font-size: .8rem !important; }
html.embed-wide .side-btn .prop-art { width: 66px; }
html.embed-wide .shop-btn .prop-art { width: 56px; }
html.embed-wide .side-btn .label { font-size: .62rem !important; padding: 3px 9px 4px !important; }
html.embed-wide .crawl-door .prop-art { width: 40px; }
html.embed-wide .crawl-door .label { font-size: .52rem !important; padding: 2px 7px 3px !important; }
html.embed-wide .stage { padding: 34px 12px 8px; }