/* Lock and Lay — the supporter card (#1138): client/js/supcard.js draws it for the desktop's pop-up and Settings →
   Support and for the phone. Loaded after style.css (whose older .spc rules still sit underneath) on both pages.
   The perks are pictures of the real things; the price, the buttons and a supporter's Cancel stay plain.
   The look ("Rosette stage", Drew's pick of two): the Gem Store's and the Level page's family in the supporter's green:
   a stage with the python-skin pattern, the emblem (rosette, egg, python) on rays, the chunky display face, tiles framed
   in each perk's colour, slab buttons. The same on either theme, like the Gem Store.
   Only transform and opacity move; with reduced motion nothing does. */

/* ---- the host and the shared shape ---- */
#modalBox2.spc-host:has(> .sp2) { width: min(780px, 94vw); border-radius: 20px; }
.spc.sp2 { --gmf2: var(--gmf, 'Lilita One', 'Arial Rounded MT Bold', 'Trebuchet MS', sans-serif); container: sp2 / inline-size; border-radius: 20px; }
.sp2 .sp2-ros { width: 1em; height: 1em; flex: none; vertical-align: -.14em; }
.sp2 .spc-x { z-index: 6; }
/* the hero */
.sp2 .sp2-hero { position: relative; isolation: isolate; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 22px; padding: 22px 64px 22px 26px; background: none; color: inherit; border: 0; }
.sp2 .sp2-hart { grid-row: 1; grid-column: 1; }
.sp2 .sp2-htxt { grid-row: 1; grid-column: 2; min-width: 0; }
.sp2 .sp2-hero h3 { margin: 6px 0 6px; font: 400 32px/1.02 var(--gmf2); letter-spacing: .01em; text-transform: uppercase; }
.sp2 .sp2-hero p { margin: 0; font-size: 14px; line-height: 1.5; opacity: 1; max-width: 46ch; }
.sp2 .spc-kicker { font: 700 11px/1 var(--sans); letter-spacing: .14em; opacity: 1; }
.sp2 .sp2-hart { position: relative; width: 150px; height: 176px; }
.sp2 .sp2-medal { position: relative; z-index: 1; width: 150px; height: auto; filter: drop-shadow(0 8px 0 rgba(0, 0, 0, .25)); animation: sp2-drop .7s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes sp2-drop { from { transform: translateY(-26px) scale(.6) rotate(-14deg); opacity: 0; } to { transform: none; opacity: 1; } }
/* the emblem's own colours: the rosette's greens, a cream egg (the python keeps prestige.css's) */
.sp2-medal { --mb: #74d98e; --md: #17592f; --ms: #fff3d6; --mr: #ffd84a; --mk: #0b2e17; }
.sp2-medal .m-star, .sp2-medal .m-facet { display: none; }
.sp2-medal .sm-tails path { fill: #2f7f48; stroke: #0b2e17; stroke-width: 3; stroke-linejoin: round; }
.sp2-medal .sm-tails path + path { fill: #3f9a5a; }
.sp2-medal .sm-band path { fill: #ffd84a; stroke: #6b4300; stroke-width: 2.6; stroke-linejoin: round; }
.sp2-medal .sm-band text { fill: #4a2d00; font: 400 12.5px/1 var(--gmf, 'Lilita One', sans-serif); letter-spacing: .06em; text-anchor: middle; }
/* the section heading and the tiles */
.sp2 .sp2-sec { margin: 6px 22px 0; }
.sp2 .sp2-sec h4 { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 7px 18px 6px; font: 400 18px/1 var(--gmf2); letter-spacing: .04em; text-transform: uppercase; }
.sp2 .sp2-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 12px 22px 0; }
@container sp2 (min-width: 560px) { .sp2 .sp2-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sp2 .sp2-tile.wide { grid-column: 1 / -1; }
  .sp2 .k-season .sp2-pic { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
  .sp2 .k-season .sp2-season canvas { height: 100%; object-fit: cover; }
  .sp2 .k-season .sp2-decor { grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: center; }
  .sp2 .k-season .sp2-decor canvas { aspect-ratio: 200 / 118; object-fit: cover; } }
.sp2 .sp2-tile { position: relative; display: flex; flex-direction: column; min-width: 0; margin: 0; border-radius: 16px; overflow: clip; }
.sp2 .sp2-pic { position: relative; display: grid; place-items: center; min-height: 128px; overflow: hidden; }
.sp2 .sp2-tile figcaption { display: flex; flex-direction: column; gap: 3px; padding: 11px 14px 13px; }
.sp2 .sp2-tile figcaption b { font: 400 18px/1.1 var(--gmf2); letter-spacing: .02em; }
.sp2 .sp2-tile figcaption small { font-size: 12.5px; line-height: 1.4; }
/* the season: your snake in costume, its decor in a strip */
.sp2 .k-season .sp2-pic { display: block; place-items: normal; min-height: 0; }
.sp2 .sp2-season { position: relative; }
.sp2 .sp2-season canvas { display: block; width: 100%; height: auto; }
.sp2 .sp2-tag { position: absolute; left: 12px; top: 12px; padding: 4px 10px 3px; border-radius: 8px; background: #ff8a2a; color: #2a1200; font: 400 13px/1 var(--gmf2); letter-spacing: .05em; text-transform: uppercase; box-shadow: 0 3px 0 #9c4005; transform: rotate(-3deg); }
.sp2 .sp2-decor { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; background: radial-gradient(ellipse at 50% 35%, #2c2033, #160c1c 80%); }
.sp2 .sp2-decor span { display: flex; flex-direction: column; align-items: center; min-width: 0; padding-bottom: 7px; }
.sp2 .sp2-decor canvas { display: block; width: 100%; height: auto; }
.sp2 .sp2-decor i { max-width: 100%; padding: 0 6px; font: 600 11.5px/1.2 var(--sans); font-style: normal; color: rgba(255, 244, 228, .85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* your rosette: a chat line and the Breeders board, with your own name */
.sp2 .sp2-chat { display: flex; flex-direction: column; gap: 10px; width: 100%; padding: 16px; box-sizing: border-box; }
.sp2 .sp2-say { display: flex; align-items: flex-start; gap: 10px; }
.sp2 .sp2-av { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(180deg, #7ad08f, #2f7f48); color: #06260f; font: 400 17px/1 var(--gmf2); box-shadow: 0 0 0 2px #fff3d6, 0 2px 0 rgba(0, 0, 0, .35); }
.sp2 .sp2-say > div { min-width: 0; padding: 7px 12px 8px; border-radius: 4px 14px 14px 14px; }
.sp2 .sp2-say b, .sp2 .sp2-seller b { display: flex; align-items: center; gap: 4px; min-width: 0; font: 700 14px/1.2 var(--sans); }
.sp2 .sp2-nm { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp2 .sp2-say b .sp2-ros, .sp2 .sp2-seller b .sp2-ros { width: 17px; height: 17px; }
.sp2 .sp2-say > div > span:not(.sp2-nm) { display: block; margin-top: 2px; font-size: 13px; line-height: 1.35; }
.sp2 .sp2-seller { display: flex; align-items: center; gap: 10px; min-width: 0; margin-left: 44px; padding: 7px 12px; border-radius: 10px; }
.sp2 .sp2-seller small { flex: none; font: 700 10px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
/* the signs: the marquee with your name on it, from the room's own builder */
.sp2 .k-signs .sp2-pic canvas { display: block; width: 100%; height: auto; aspect-ratio: 520 / 260; object-fit: cover; }
.sp2 .sp2-count { position: absolute; right: 10px; bottom: 10px; padding: 4px 9px 3px; border-radius: 8px; font: 400 13px/1 var(--gmf2); letter-spacing: .04em; text-transform: uppercase; }
/* the Expo Hall: three of the supporter themes as little booths with your booth's name on the header */
.sp2 .sp2-booths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; padding: 14px 14px 12px; box-sizing: border-box; }
.sp2 .sp2-booth { position: relative; display: flex; flex-direction: column; align-items: stretch; min-width: 0; height: 104px; border-radius: 8px 8px 4px 4px; background: linear-gradient(90deg, rgba(0, 0, 0, .25), transparent 18%, rgba(255, 255, 255, .06) 50%, transparent 82%, rgba(0, 0, 0, .25)), repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 3px, transparent 3px 9px), var(--dr); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 3px 0 rgba(0, 0, 0, .35); }
.sp2 .sp2-booth i { margin: 7px 6px 0; padding: 4px 4px 3px; border-radius: 3px; background: rgba(0, 0, 0, .45); color: var(--fg); font: 400 11px/1 var(--gmf2); font-style: normal; letter-spacing: .05em; text-transform: uppercase; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 0 6px var(--fg); box-shadow: 0 0 0 1px var(--fg); }
.sp2 .sp2-booth em { position: absolute; left: 10%; right: 10%; bottom: 20px; height: 22px; border-radius: 3px 3px 0 0; background: var(--cl); box-shadow: inset 0 3px 0 var(--ru), 0 0 0 1px rgba(255, 255, 255, .1); }
.sp2 .sp2-booth small { position: absolute; left: 0; right: 0; bottom: 3px; font: 700 10px/1 var(--sans); color: rgba(255, 255, 255, .85); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the Gems: the store's gem, the number, every week */
.sp2 .sp2-gems { display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 12px; padding: 14px; }
.sp2 .sp2-gems .sp2-gem { grid-row: 1 / span 2; width: 78px; height: 65px; transform: rotate(-10deg); filter: drop-shadow(0 5px 0 rgba(0, 0, 0, .3)); }
.sp2 .sp2-gems b { font: 400 44px/1 var(--gmf2); letter-spacing: .01em; }
.sp2 .sp2-gems small { font: 400 15px/1 var(--gmf2); letter-spacing: .05em; text-transform: uppercase; }
.sp2 .sp2-soon { display: flex; gap: 10px; } .sp2 .sp2-soon i { width: 34px; height: 44px; border-radius: 50% 50% 48% 48% / 60% 60% 40% 40%; background: #fff3d6; box-shadow: inset -5px -6px 0 rgba(0, 0, 0, .12), 0 3px 0 rgba(0, 0, 0, .3); }
/* the crowd and the foot */
.sp2 .sp2-crowd { margin: 16px 22px 0; padding: 0 0 18px; font-size: 13.5px; }
.sp2 .sp2-crowd > span:not(.spc-avs) { font-weight: 700; }
.sp2 .sp2-crowd small { flex-basis: 100%; font-size: 12.5px; }
.sp2 .spc-avs span { width: 28px; height: 28px; margin-left: -7px; font: 400 13px/1 var(--gmf2); }
.sp2 .sp2-foot { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 14px 22px 16px; border: 0; }
.sp2 .sp2-foot .spc-price { margin-right: auto; }
.sp2 .sp2-foot .spc-price b { font: 400 40px/1 var(--gmf2); }
.sp2 .sp2-foot .spc-price span { font-size: 12.5px; line-height: 1.3; font-weight: 600; }
.sp2 .sp2-acts { display: flex; flex-wrap: wrap; gap: 12px; }
.sp2 .sp2-foot.thanks { justify-content: flex-end; }
:root .sp2 .spc-foot .btn.sp2-slab { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; height: auto; padding: 0 24px; border: 0; border-radius: 14px; font: 400 19px/1 var(--gmf2); letter-spacing: .04em; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform .08s, box-shadow .08s, filter .12s; }
:root .sp2 .spc-foot .btn.sp2-slab:hover { filter: brightness(1.07); transform: translateY(-1px); }
:root .sp2 .spc-foot .btn.sp2-slab:active { transform: translateY(4px); }
.sp2 .sp2-foot .spc-small { flex-basis: 100%; text-align: right; font-size: 12.5px; }
/* the membership panel (supcheckout.js draws it), right under the hero for a supporter */
.sp2 .sp2-manage { margin: 0 22px 8px; padding: 14px 16px 14px; border-radius: 16px; }
.sp2 .sp2-manage .spc-lbl { font: 400 15px/1 var(--gmf2); letter-spacing: .05em; margin-bottom: 10px; }
.sp2 .sp2-manage .spc-mrow { padding: 12px 14px; border: 0; border-radius: 12px; }
.sp2 .sp2-manage .spc-mrow b { font: 400 22px/1 var(--gmf2); letter-spacing: .02em; }
.sp2 .sp2-manage .spc-mstate { padding: 6px 12px 5px; border-radius: 99px; font: 700 13px/1.2 var(--sans); }
:root .sp2 .sp2-manage .spc-macts .btn { min-height: 42px; padding: 0 18px; border: 0; border-radius: 12px; font: 700 14px/1 var(--sans); cursor: pointer; transition: transform .08s, box-shadow .08s, filter .12s; }
:root .sp2 .sp2-manage .spc-macts .btn:active { transform: translateY(3px); }
.sp2 .sp2-manage .spc-confirm { border-radius: 12px; }
/* the checkout, the gift form and the thanks: the hero folds down to a strip */
.sp2:has(> .spc-pay) .sp2-hero { padding-top: 16px; padding-bottom: 16px; }
.sp2:has(> .spc-pay) .sp2-hart { width: 64px; height: 76px; } .sp2:has(> .spc-pay) .sp2-medal { width: 64px; }

.sp2:has(> .spc-pay) .sp2-hero h3 { font-size: 22px; } .sp2:has(> .spc-pay) .sp2-hero p { display: none; }
.sp2:has(> .spc-pay) .sp2-rays { display: none; }
.sp2 .spc-pay { padding: 16px 22px 22px; }
.sp2 .spc-pay-head { font-size: 14px; }
.sp2 .spc-pay-head b { font: 400 18px/1 var(--gmf2); }
.sp2 .spc-checkout { border-radius: 14px; }
.sp2 .spc-done { padding: 22px 6px 12px; }
.sp2 .spc-done::before { content: ''; display: block; width: 92px; height: 92px; margin: 0 auto 10px; background: url(/img/supporter.png) center / contain no-repeat; animation: sp2-drop .7s cubic-bezier(.2, 1.4, .4, 1) both; }
.sp2 .spc-done h3 { margin: 0 0 8px; font: 400 34px/1 var(--gmf2); letter-spacing: .02em; text-transform: uppercase; }
.sp2 .spc-done p { max-width: 44ch; margin: 0 auto; font-size: 15px; line-height: 1.5; }
.sp2 .spc-gift h3 { font: 400 26px/1.05 var(--gmf2); letter-spacing: .02em; text-transform: uppercase; }
:root .sp2 .spc-gift .btn.primary { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border: 0; border-radius: 14px; font: 400 18px/1 var(--gmf2); letter-spacing: .04em; text-transform: uppercase; }

/* ---- the rosette stage ---- */
.spc.sp2.look-a { --sa-ink: #fff; --sa-ink2: rgba(255, 255, 255, .84); --sa-ink3: rgba(255, 255, 255, .64); --sa-deep: #062a15; --sa-plate: rgba(3, 26, 13, .55);
  color: var(--sa-ink); border: 2px solid #5fc27b; box-shadow: 0 30px 70px rgba(0, 0, 0, .55), 0 5px 0 #0a3a1d;
  background-color: #0b3a1f; background-image: radial-gradient(90% 420px at 30% 0, #3fae5f 0%, rgba(63, 174, 95, 0) 100%), url(/img/prestige/skin.webp), linear-gradient(180deg, #14552e, #0a301a 900px); background-size: auto, 136px 76px, auto; background-repeat: no-repeat, repeat, no-repeat; }
.sp2.look-a :focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.sp2.look-a .spc-x { border: 0; background: rgba(0, 0, 0, .35); color: #fff; box-shadow: 0 0 0 2px rgba(255, 255, 255, .5); }
.sp2.look-a .sp2-hero { min-height: 196px; } .sp2.look-a:has(> .spc-pay) .sp2-hero { min-height: 0; }
.sp2.look-a .sp2-rays { position: absolute; left: 50%; top: 46%; z-index: 0; width: 460px; height: 460px; margin: -230px 0 0 -230px; background: url(/img/gems/rays.png) center / 100% 100% no-repeat; opacity: .5; pointer-events: none; animation: sp2-fade .9s ease both; }
@keyframes sp2-fade { from { opacity: 0; transform: scale(.7); } }
.sp2.look-a .sp2-hart::after { content: ''; position: absolute; left: -8px; top: 12px; width: 14px; height: 14px; background: #fff; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); box-shadow: 150px 30px 0 #fff; opacity: .9; z-index: 2; }
.sp2.look-a .sp2-hero h3 { color: #fff; text-shadow: 0 3px 0 rgba(0, 0, 0, .35); }
.sp2.look-a .sp2-hero p { color: var(--sa-ink2); }
.sp2.look-a .spc-kicker { color: #ffd84a; }
.sp2.look-a .sp2-sec h4 { color: #3d2600; background: linear-gradient(180deg, #ffe763, #ffbd1c); border-radius: 10px; transform: skewX(-9deg); box-shadow: 0 3px 0 #b56a00; }
.sp2.look-a .sp2-sec h4 { --x: 1; } .sp2.look-a .sp2-sec h4::first-line { }
.sp2.look-a .sp2-tile { --tc: #6be39b; --tcd: #1f7a3e; background: var(--sa-plate); border: 3px solid var(--tc); box-shadow: 0 5px 0 rgba(0, 0, 0, .35), 0 18px 26px -16px var(--tc); }
.sp2.look-a .k-season { --tc: #ff9a3c; --tcd: #8a3a06; } .sp2.look-a .k-signs { --tc: #ffcb2e; --tcd: #7c4a04; } .sp2.look-a .k-hall { --tc: #c49bff; --tcd: #4a248f; } .sp2.look-a .k-gems { --tc: #6ec6ff; --tcd: #0b3f94; } .sp2.look-a .k-rosette { --tc: #6be39b; --tcd: #1f7a3e; }
.sp2.look-a .sp2-pic { background: radial-gradient(90% 120% at 50% 15%, #3c9a5a, #0d3a1e); }
.sp2.look-a .k-signs .sp2-pic { background: radial-gradient(90% 120% at 50% 20%, #5a3a24, #1d120b); } .sp2.look-a .k-hall .sp2-pic { background: radial-gradient(90% 120% at 50% 15%, #4b2d86, #170c33); } .sp2.look-a .k-gems .sp2-pic { background: radial-gradient(90% 120% at 50% 15%, #2d6fd0, #0b2357); }
.sp2.look-a .k-season .sp2-pic { background: #160c1c; }
.sp2.look-a .sp2-tile figcaption b { color: #fff; text-transform: uppercase; text-shadow: 0 2px 0 rgba(0, 0, 0, .3); }
.sp2.look-a .sp2-tile figcaption small { color: var(--sa-ink2); }
.sp2.look-a .sp2-say > div { background: rgba(255, 255, 255, .95); color: #1e1a15; box-shadow: 0 3px 0 rgba(0, 0, 0, .3); }
.sp2.look-a .sp2-say b { color: #2f7f48; } .sp2.look-a .sp2-say span { color: #3d372f; }
.sp2.look-a .sp2-seller { background: rgba(0, 0, 0, .3); color: #fff; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .35); }
.sp2.look-a .sp2-count { background: #ffcb2e; color: #3d2600; box-shadow: 0 3px 0 #b56a00; }
.sp2.look-a .sp2-gems b { color: #fff; text-shadow: 0 3px 0 rgba(0, 0, 0, .35); } .sp2.look-a .sp2-gems small { color: #bfe4ff; }
.sp2.look-a .sp2-crowd { color: var(--sa-ink2); } .sp2.look-a .sp2-crowd small { color: var(--sa-ink3); }
.sp2.look-a .spc-avs span { background: linear-gradient(180deg, #7ad08f, #2f7f48); color: #06260f; border: 2px solid #fff3d6; }
.sp2.look-a .sp2-foot { background: linear-gradient(180deg, #0f4626, #082a16); box-shadow: 0 -4px 0 rgba(0, 0, 0, .25), inset 0 2px 0 rgba(255, 255, 255, .08); }
.sp2.look-a .sp2-foot .spc-price b { color: #fff; text-shadow: 0 3px 0 rgba(0, 0, 0, .35); } .sp2.look-a .sp2-foot .spc-price span { color: var(--sa-ink2); }
:root .sp2.look-a .spc-foot .btn.sp2-slab { background: linear-gradient(180deg, #ffe763, #ffbd1c); color: #3d2600; box-shadow: 0 5px 0 #b56a00, 0 12px 16px -8px rgba(0, 0, 0, .55), inset 0 2px 0 rgba(255, 255, 255, .6); }
:root .sp2.look-a .spc-foot .btn.sp2-slab:active { box-shadow: 0 1px 0 #b56a00, inset 0 2px 0 rgba(255, 255, 255, .6); }
:root .sp2.look-a .spc-foot .btn.sp2-slab.alt { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: 0 5px 0 rgba(0, 0, 0, .35), inset 0 0 0 2px rgba(255, 255, 255, .45); }
.sp2.look-a .sp2-foot .spc-small, .sp2.look-a .sp2-foot .spc-small.linkish { color: var(--sa-ink2); }
.sp2.look-a .sp2-manage { background: var(--sa-plate); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .18); }
.sp2.look-a .sp2-manage .spc-lbl { color: #ffd84a; }
.sp2.look-a .sp2-manage .spc-mrow { background: rgba(0, 0, 0, .32); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .4); }
.sp2.look-a .sp2-manage .spc-mrow b { color: #fff; } .sp2.look-a .sp2-manage .spc-mrow span { color: var(--sa-ink2); }
.sp2.look-a .sp2-manage .spc-mstate { background: #6be39b; color: #06260f; } .sp2.look-a .sp2-manage .spc-mstate.ending { background: #ffcb2e; color: #3d2600; } .sp2.look-a .sp2-manage .spc-mstate.failed { background: #ff7a66; color: #3a0800; }
:root .sp2.look-a .sp2-manage .spc-macts .btn { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: 0 4px 0 rgba(0, 0, 0, .35), inset 0 0 0 2px rgba(255, 255, 255, .4); }
:root .sp2.look-a .sp2-manage .spc-macts .btn.primary { background: linear-gradient(180deg, #ffe763, #ffbd1c); color: #3d2600; box-shadow: 0 4px 0 #b56a00, inset 0 2px 0 rgba(255, 255, 255, .6); }
:root .sp2.look-a .sp2-manage .spc-macts .btn.danger { background: linear-gradient(180deg, #ff7a66, #e0402a); color: #fff; box-shadow: 0 4px 0 #8f2617, inset 0 2px 0 rgba(255, 255, 255, .3); }
.sp2.look-a .sp2-manage .spc-confirm { border: 0; background: rgba(255, 122, 102, .16); box-shadow: inset 0 0 0 2px rgba(255, 122, 102, .6); } .sp2.look-a .sp2-manage .spc-confirm p { color: #fff; }
.sp2.look-a .sp2-manage .spc-merr { color: #ffb3a6; } .sp2.look-a .sp2-manage .meta { color: var(--sa-ink2); }
.sp2.look-a .spc-pay-head { color: var(--sa-ink2); } .sp2.look-a .spc-pay-head b { color: #fff; } .sp2.look-a .spc-pay-head .linkish { color: #fff; }
.sp2.look-a .spc-secure { color: var(--sa-ink3); }
.sp2.look-a .spc-done h3 { color: #fff; text-shadow: 0 3px 0 rgba(0, 0, 0, .35); } .sp2.look-a .spc-done p { color: var(--sa-ink2); }
.sp2.look-a .spc-gift h3 { color: #fff; } .sp2.look-a .spc-gift > .meta { color: var(--sa-ink2); } .sp2.look-a .spc-gl { color: #ffd84a; }
.sp2.look-a .spc-gl input[name=to] { background: rgba(0, 0, 0, .35); color: #fff; border: 2px solid rgba(255, 255, 255, .35); }
.sp2.look-a .spc-glens span { background: rgba(0, 0, 0, .25); border: 2px solid rgba(255, 255, 255, .3); } .sp2.look-a .spc-glens b { color: #fff; } .sp2.look-a .spc-glens small { color: #ffd84a; }
.sp2.look-a .spc-glens input:checked + span { border-color: #ffd84a; background: rgba(255, 216, 74, .16); box-shadow: none; }
:root .sp2.look-a .spc-gift .btn.primary { background: linear-gradient(180deg, #ffe763, #ffbd1c); color: #3d2600; box-shadow: 0 5px 0 #b56a00, inset 0 2px 0 rgba(255, 255, 255, .6); }

/* ---- Settings → Support: the card sits in the page, no shadow of its own ---- */
#settings .spc.sp2 { box-shadow: 0 4px 0 rgba(0, 0, 0, .25); }

/* ---- the phone ---- */
body.mobile #modalBox.spc-host:has(> .sp2) { border-radius: 20px; }
.spc.sp2.m, body.mobile .spc.sp2.m { border-radius: 20px; overflow: clip; } /* clip, not hidden (mobile.css): hidden would make the card its own scroller and the price bar would not stick */
.sp2.m .sp2-hero { grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; padding: 18px 52px 16px 16px; }
.sp2.m .sp2-hart { width: 92px; height: 112px; } .sp2.m .sp2-medal { width: 92px; }
.sp2.m.look-a .sp2-rays { width: 300px; height: 300px; margin: -150px 0 0 -150px; left: 22%; }
.sp2.m .sp2-hero h3 { font-size: 23px; }
.sp2.m .sp2-hero p { font-size: 13px; }
.sp2.m.look-a .sp2-hero p { grid-column: 1 / -1; }
.sp2.m .sp2-sec, .sp2.m .sp2-grid, .sp2.m .sp2-manage { margin-left: 14px; margin-right: 14px; }
.sp2.m .sp2-crowd { margin: 14px 16px 0; }
.sp2.m .sp2-foot { padding: 12px 14px calc(14px + env(safe-area-inset-bottom, 0px)); }
.sp2.m .sp2-acts { flex: 1 1 100%; } :root .sp2.m .spc-foot .btn.sp2-slab { flex: 1 1 100%; min-height: 54px; font-size: 20px; }
.sp2.m .sp2-booth { height: 92px; }
.sp2.m .sp2-decor i { font-size: 10.5px; white-space: normal; text-align: center; line-height: 1.15; }
.sp2.m .spc-pay { padding: 14px 14px 18px; }

@media (prefers-reduced-motion: reduce) { .sp2 .sp2-medal, .sp2 .sp2-rays, .sp2 .spc-done::before { animation: none; } :root .sp2 .spc-foot .btn.sp2-slab { transition: none; } }

@media (hover: hover) { .sp2 .sp2-tile { transition: transform .16s cubic-bezier(.2, .8, .3, 1.3); } .sp2 .sp2-tile:hover { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .sp2 .sp2-tile, .sp2 .sp2-tile:hover { transition: none; transform: none; } }
.sp2.look-a .spc-done::before { width: 110px; height: 110px; filter: drop-shadow(0 0 2px #fff3d6) drop-shadow(0 0 2px #fff3d6) drop-shadow(0 5px 0 rgba(0, 0, 0, .3)); } /* the rosette stands off the green stage */