.srp-layer {
  --ink: #5a351d;
  --brown: #97531f;
  --brown-dark: #713812;
  --cream: #fff4ce;
  --paper: #f9dfa0;
  --gold: #e4a631;
  --green: #4ecb2d;
  width: min(100%, 430px);
  color: var(--ink);
  font-family: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
}

.demo-page { min-height: 100%; margin: 0; background: #284424; }
.demo-page *, .srp-layer * { box-sizing: border-box; }
.srp-layer button { font: inherit; -webkit-tap-highlight-color: transparent; }

.demo-backdrop {
  position: relative;
  display: grid;
  min-height: 100svh;
  place-items: center;
  overflow: hidden auto;
  padding: max(48px, env(safe-area-inset-top)) 10px max(22px, env(safe-area-inset-bottom));
  isolation: isolate;
}

.demo-backdrop::before {
  position: fixed;
  z-index: -2;
  inset: -18px;
  content: "";
  background: url("assets/ranch-backdrop.png") center/cover;
  filter: saturate(.82) brightness(.48) blur(2px);
  transform: scale(1.04);
}

.demo-backdrop::after {
  position: fixed;
  z-index: -1;
  inset: 0;
  content: "";
  background: radial-gradient(circle at 50% 45%, rgba(255,229,141,.1), transparent 42%), rgba(12,24,13,.24);
  pointer-events: none;
}

/* Language is driven by the global site picker, not this panel. */
.srp-locales {
  display: none;
}

.srp-locales button {
  min-width: 46px;
  height: 33px;
  padding: 0 10px;
  border: 2px solid rgba(255,240,193,.86);
  border-radius: 12px;
  color: #fff9dc;
  background: rgba(77,48,24,.78);
  box-shadow: 0 3px 8px rgba(0,0,0,.24);
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
}

.srp-locales button.is-active { border-color: #fff6ca; color: #603515; background: linear-gradient(180deg,#fff4c7,#f4ca77); }

.srp-popup {
  position: relative;
  width: 100%;
  padding: 82px 22px 20px;
  border: 6px solid var(--brown);
  border-radius: 34px;
  background:
    radial-gradient(circle at 50% 4%, rgba(255,255,255,.7), transparent 26%),
    linear-gradient(180deg, #fff2c7 0%, #f8d88f 100%);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.4), 0 12px 0 rgba(89,43,15,.48), 0 24px 36px rgba(0,0,0,.36);
}

.srp-popup::after {
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(255,255,255,.36);
  border-radius: 24px;
  content: "";
  pointer-events: none;
}

.srp-ribbon {
  position: absolute;
  z-index: 4;
  top: 18px;
  left: -10px;
  min-width: 100px;
  padding: 9px 18px 10px 16px;
  border: 2px solid #b63624;
  border-left: 0;
  border-radius: 0 18px 18px 0;
  color: white;
  background: linear-gradient(180deg,#ff6b4c,#e43d2e);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.32), 0 5px 0 #a02d22, 0 8px 10px rgba(83,40,19,.2);
  font-size: 13px;
  font-weight: 950;
  text-align: center;
  text-shadow: 0 2px 0 rgba(135,40,28,.5);
}

.srp-farmer {
  position: absolute;
  z-index: 3;
  top: -69px;
  left: 50%;
  width: 156px;
  height: 156px;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 8px 7px rgba(91,45,16,.32));
  transform: translateX(-50%);
}

.srp-header { position: relative; z-index: 1; text-align: center; }
.srp-header h1 { margin: 0 0 9px; color: #5b361e; font-size: clamp(25px, 7.3vw, 32px); line-height: 1.08; letter-spacing: -.04em; text-shadow: 0 2px 0 #fff1c6; }
.srp-header p { margin: 0 auto 16px; max-width: 360px; color: #745035; font-size: 13px; font-weight: 700; line-height: 1.55; }

.srp-list { position: relative; z-index: 1; display: grid; gap: 13px; }

.srp-tray {
  position: relative;
  display: grid;
  min-height: 154px;
  align-items: center;
  grid-template-columns: 145px minmax(0, 1fr);
  overflow: visible;
  border: 3px solid #d39a42;
  border-radius: 22px;
  background: linear-gradient(145deg,#fffdf0 0%,#fff3c9 65%,#f1c983 100%);
  box-shadow:
    inset 0 4px 0 rgba(255,255,255,.94),
    inset 0 -5px 0 rgba(203,133,45,.18),
    0 7px 0 #b36d29,
    0 12px 16px rgba(104,59,20,.28);
}

.srp-tray::before {
  position: absolute;
  inset: 5px;
  border: 2px solid rgba(225,173,82,.52);
  border-radius: 15px;
  content: "";
  pointer-events: none;
}

.srp-visual { position: relative; align-self: stretch; min-width: 0; }
.srp-visual img { position: absolute; z-index: 2; top: 50%; left: 50%; width: 148px; height: 148px; object-fit: contain; filter: drop-shadow(0 10px 7px rgba(93,51,19,.25)); transform: translate(-50%,-50%); }

.srp-aura { position: absolute; z-index: 0; top: 50%; left: 50%; width: 112px; height: 112px; border-radius: 50%; transform: translate(-50%,-50%); }
.srp-tray--gold .srp-aura { background: radial-gradient(circle,rgba(255,238,116,.9) 0%,rgba(255,199,48,.34) 46%,transparent 72%); box-shadow: 0 0 26px rgba(255,190,27,.38); }
.srp-tray--mint .srp-aura { background: radial-gradient(circle,rgba(211,255,170,.92) 0%,rgba(111,217,82,.34) 47%,transparent 73%); box-shadow: 0 0 25px rgba(97,196,64,.34); }

.srp-spark { position: absolute; z-index: 3; color: #ffca36; font-size: 18px; line-height: 1; text-shadow: 0 2px 0 #b96618,0 0 7px rgba(255,228,91,.8); animation: srp-sparkle 1.8s ease-in-out infinite; }
.srp-spark--one { top: 17px; left: 20px; }
.srp-spark--two { top: 28px; right: 11px; animation-delay: -.55s; }
.srp-spark--three { right: 25px; bottom: 18px; animation-delay: -1.1s; }

.srp-quantity {
  position: absolute;
  z-index: 4;
  right: 1px;
  bottom: 5px;
  min-width: 57px;
  padding: 5px 10px 7px;
  border: 3px solid #ffe1a0;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(180deg,#ed4d31,#bd241b);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.25), 0 4px 0 #7e281a, 0 6px 8px rgba(95,39,17,.24);
  font-size: 17px;
  font-weight: 950;
  line-height: 1;
  text-align: center;
  text-shadow: 0 2px 0 #8f281f;
}

.srp-copy { position: relative; z-index: 2; min-width: 0; padding: 17px 17px 17px 6px; }
.srp-copy h2 { margin: 0 0 8px; color: #593319; font-size: clamp(18px,5.2vw,22px); line-height: 1.2; }
.srp-copy p { margin: 0; color: #78533a; font-size: 12px; font-weight: 700; line-height: 1.55; }

.srp-claim {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 61px;
  margin-top: 20px;
  border: 5px solid #24782a;
  border-radius: 25px;
  color: white;
  background: linear-gradient(180deg,#79e348 0%,#45c52e 52%,#2b9d28 100%);
  box-shadow: inset 0 4px 0 rgba(255,255,255,.45), inset 0 -4px 0 rgba(25,122,37,.32), 0 7px 0 #175d24, 0 13px 17px rgba(86,57,21,.28);
  cursor: pointer;
  font-size: 20px;
  font-weight: 950;
  text-shadow: 0 3px 0 #258f29;
  transition: transform .14s ease, filter .14s ease;
}
.srp-claim:active { transform: translateY(5px); box-shadow: inset 0 3px 0 rgba(255,255,255,.38),0 2px 0 #175d24,0 7px 10px rgba(86,57,21,.24); }
.srp-claim.is-claimed { border-color: #769044; background: linear-gradient(180deg,#bedf7d,#82b852); box-shadow: inset 0 3px 0 rgba(255,255,255,.36),0 5px 0 #557e3d; cursor: default; text-shadow: 0 2px 0 #5c873f; }

.srp-feedback { position: relative; z-index: 1; min-height: 17px; margin: 10px 0 -4px; color: #397b2d; font-size: 12px; font-weight: 850; text-align: center; opacity: 0; }
.srp-feedback.is-visible { opacity: 1; }

.srp-popup--loading { min-height: 650px; overflow: hidden; }
.srp-loading-shimmer { position: absolute; inset: 0; background: linear-gradient(105deg,transparent 20%,rgba(255,255,255,.34) 42%,transparent 64%); animation: srp-loading 1.4s linear infinite; transform: translateX(-100%); }

@keyframes srp-sparkle { 0%,100%{opacity:.45;transform:scale(.72) rotate(-8deg)}50%{opacity:1;transform:scale(1.13) rotate(7deg)} }
@keyframes srp-loading { to{transform:translateX(100%)} }

@media (max-width: 390px) {
  .demo-backdrop { padding-right: 7px; padding-left: 7px; }
  .srp-popup { padding-right: 15px; padding-left: 15px; border-width: 5px; }
  .srp-tray { grid-template-columns: 126px minmax(0,1fr); }
  .srp-visual img { width: 132px; height: 132px; }
  .srp-copy { padding-right: 12px; padding-left: 4px; }
}

@media (max-width: 340px) {
  .srp-tray { grid-template-columns: 111px minmax(0,1fr); }
  .srp-visual img { width: 116px; height: 116px; }
  .srp-quantity { right: -2px; font-size: 14px; }
  .srp-copy p { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .srp-layer *, .srp-layer *::before, .srp-layer *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}

/* Embedded inside Happy Ranch: locked 340×640 board, uniform --srp-panel-scale (same fit as backpack). */
#gameScreen #giftOverlay.gift-overlay {
  --srp-panel-scale: 1;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 52px 8px 12px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  background: #102027bb !important;
}
#gameScreen #giftOverlay.gift-overlay.is-hidden {
  display: none !important;
  pointer-events: none !important;
}
#gameScreen #giftOverlay #starter-reward-popup.srp-fit,
#gameScreen #giftOverlay #starter-reward-popup {
  position: relative !important;
  flex: none !important;
  width: calc(340px * var(--srp-panel-scale, 1)) !important;
  height: calc(640px * var(--srp-panel-scale, 1)) !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  overflow: visible !important;
  pointer-events: auto !important;
}
#gameScreen #giftOverlay .srp-locales { display: none !important; }
#gameScreen #giftOverlay .srp-layer {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 340px !important;
  height: 640px !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 340px !important;
  min-height: 640px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  transform: translate(-50%, -50%) scale(var(--srp-panel-scale, 1)) !important;
  transform-origin: center center !important;
}
#gameScreen #giftOverlay .srp-popup {
  width: 100% !important;
  margin: 86px 0 0 !important;
  padding: 62px 16px 16px !important;
  overflow: visible !important;
  border-width: 5px !important;
  border-radius: 22px !important;
  box-sizing: border-box !important;
}
#gameScreen #giftOverlay .srp-popup--loading { min-height: 0 !important; }
#gameScreen #giftOverlay .srp-ribbon { z-index: 4; }
#gameScreen #giftOverlay .srp-farmer {
  left: 50% !important;
  top: -86px !important;
  width: 148px !important;
  height: 148px !important;
  z-index: 5 !important;
  object-fit: contain !important;
  object-position: center top !important;
  transform: translateX(-50%) !important;
  filter: drop-shadow(0 4px 4px #0004);
}
#gameScreen #giftOverlay .srp-header { text-align: center; }
#gameScreen #giftOverlay .srp-header h1 { font-size: 20px !important; }
#gameScreen #giftOverlay .srp-header p { margin: 0 auto 12px !important; font-size: 11px !important; }
#gameScreen #giftOverlay .srp-list { gap: 10px; }
#gameScreen #giftOverlay .srp-tray {
  min-height: 108px;
  grid-template-columns: 104px minmax(0, 1fr);
}
#gameScreen #giftOverlay .srp-visual img { width: 108px; height: 108px; }
#gameScreen #giftOverlay .srp-copy { padding: 12px 12px 12px 4px; }
#gameScreen #giftOverlay .srp-copy h2 { font-size: 16px; }
#gameScreen #giftOverlay .srp-claim {
  min-height: 48px;
  margin-top: 12px;
  font-size: 16px;
}
#gameScreen #giftOverlay .srp-feedback { display: none; }
.srp-legacy-claim {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}