/* Gifting showcase and customer surfaces share the storefront's bold print language. */
.hero { align-items:center; gap:5vw; padding-bottom:70px; }
.hero h1 { font-size:clamp(3.3rem,6.6vw,7rem); line-height:.98; letter-spacing:-.045em; }
.hero-stage { min-height:0; height:auto; aspect-ratio:auto; transform:none; padding:0; }
.hero-showcase { --gift-accent:var(--yellow); background:var(--yellow); border:3px solid #111; box-shadow:8px 8px #111; padding:14px; }
.hero[data-mood="chaos"] .hero-showcase { --gift-accent:#d4b9ff; }
.hero[data-mood="sweet"] .hero-showcase { --gift-accent:#ffb9d0; }
.hero[data-mood="soft"] .hero-showcase { --gift-accent:#c1ebff; }
.showcase-top { display:flex; justify-content:space-between; gap:16px; padding:4px 0 13px; font-size:12px; font-weight:900; line-height:1.5; }
.showcase-photo { display:block; width:100%; padding:0; position:relative; border:2px solid #111; background:var(--gift-accent); overflow:hidden; aspect-ratio:1.18; }
.showcase-photo img { width:100%; height:100%; object-fit:contain; transition:transform .3s; }
.showcase-photo:hover img { transform:scale(1.035); }
.showcase-photo > span { position:absolute; bottom:12px; right:12px; background:white; padding:9px 12px; border:2px solid #111; font-size:12px; font-weight:900; }
.showcase-caption { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 4px 5px; }
.showcase-caption h2 { font-size:clamp(1.2rem,2vw,1.9rem); line-height:1.1; max-width:65%; }
.showcase-caption .price-bubble { position:static; width:auto; height:auto; border:0; border-radius:0; background:none; color:#111; box-shadow:none; transform:none; flex-shrink:0; align-items:flex-end; }
.showcase-caption .price-bubble strong { font-size:28px; line-height:1.2; }
.showcase-caption .price-bubble small,.showcase-caption .price-bubble span { font-size:12px; }
.hero .hero-picker { position:static; margin:22px 0 12px; width:100%; padding:3px 4px 6px; background:none; border:0; box-shadow:none; transform:none; overflow-x:auto; scrollbar-width:thin; }
.hero .hero-picker button { display:flex; align-items:center; gap:9px; flex:1 0 130px; width:auto; height:auto; min-height:58px; padding:6px 9px; background:#fff; border:2px solid #111; text-align:left; font-size:14px; font-weight:800; box-shadow:none; }
.hero .hero-picker button[aria-pressed=true] { background:var(--yellow); box-shadow:3px 3px #111; }
.hero .hero-picker img { flex:0 0 38px; width:38px; height:40px; object-fit:cover; }
.hero-gift-context { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding-top:8px; }
.hero-gift-context p { font-size:16px; line-height:1.5; max-width:38ch; }
.hero-gift-context .save-text { font-size:14px; }
.detail-gallery { min-width:0; }
.gallery-canvas { background:#fff; border:2px solid #111; }
.gallery-canvas .detail-photo { width:100%; max-height:450px; aspect-ratio:1; object-fit:contain; border:0; box-shadow:none; }
.gallery-navigation { display:flex; justify-content:space-between; align-items:center; margin-top:12px; font-size:14px; font-weight:800; }
.gallery-navigation button { width:44px; height:44px; background:var(--yellow); border:2px solid #111; font-size:23px; }
.gallery-navigation button:disabled { opacity:.35; cursor:default; }
.thumbs button[aria-pressed=true] { outline:3px solid var(--blue-deep); outline-offset:2px; }
.detail-price { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:18px 0; }
.detail-price > strong { font-family:'Archivo Black',sans-serif; font-size:29px; }
.detail-price > span { flex-basis:100%; font-size:14px; }
.detail-copy .modal-title { overflow-wrap:anywhere; }
.inside-box { margin:24px 0; padding:18px; border-block:2px solid #111; }
.detail-label { font-size:14px; font-weight:900; }
.inside-box > div { display:flex; align-items:center; gap:16px; margin:14px 0; }
.inside-box b { font-family:'Archivo Black',sans-serif; font-size:42px; }
.inside-box p { line-height:1.5; }
.inside-box small { font-size:14px; }
.product-delivery { margin:18px 0; border-block:1px solid #111; }
.product-delivery summary { padding:18px 0; font-size:16px; font-weight:800; }
.product-delivery summary span { float:right; }
.product-delivery p { font-size:15px; line-height:1.6; margin-bottom:16px; }
.product-purchase-bar { display:flex; justify-content:space-between; align-items:center; gap:20px; position:sticky; z-index:3; bottom:-38px; background:var(--yellow); border:2px solid #111; padding:16px 20px; margin:28px 0 0; box-shadow:0 -8px 18px #1111; }
.product-purchase-bar > div { display:grid; gap:5px; }
.product-purchase-bar span { font-size:12px; font-weight:900; }
.product-purchase-bar strong { font-size:24px; }
.product-purchase-bar .add-button { min-height:48px; }
.finder-result .quiz-result-photo { border:0; background:none; padding:0; width:100%; }
.finder-checks { display:flex; gap:8px; flex-wrap:wrap; margin:16px 0; }
.finder-checks span { padding:7px 10px; background:var(--yellow); font-size:14px; font-weight:800; border:1px solid #111; }
.finder-alternatives { border-top:2px solid #111; margin-top:28px; padding-top:22px; }
.finder-alternatives h3 { font-size:18px; margin-bottom:14px; }
.finder-alternatives > div { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.finder-alternatives button { display:flex; gap:12px; text-align:left; padding:12px; border:2px solid #111; background:white; align-items:center; }
.finder-alternatives img { width:60px; height:70px; object-fit:cover; }
.finder-alternatives span { display:grid; gap:6px; font-size:14px; }
.reward-example { width:100%; display:grid; grid-template-columns:60px 1fr auto; align-items:center; gap:14px; padding:14px; margin:20px 0; text-align:left; background:#fff; border:2px solid #111; }
.reward-example img { width:60px; height:65px; object-fit:cover; }
.reward-example > span { display:grid; gap:6px; }
.reward-example small { font-size:14px; }
.reward-example > strong { display:grid; gap:5px; }
.reward-example s { font-size:14px; font-weight:400; }
.checkout-review { display:grid; gap:7px; padding:18px 0; margin:12px 0; border-top:2px solid #111; }
.checkout-review > span { font-size:14px; font-weight:800; }
.checkout-review > strong { font-family:'Archivo Black',sans-serif; font-size:30px; }
.checkout-review small { font-size:14px; line-height:1.5; }
.dialog-feedback { position:sticky; bottom:8px; z-index:9; padding:12px 16px; border:2px solid #111; background:var(--yellow); font-weight:700; opacity:0; pointer-events:none; height:0; overflow:hidden; }
.dialog-feedback.show { opacity:1; height:auto; margin-top:12px; }
.game-card.checking { animation:card-check .6s ease-in-out infinite alternate; background:#ffe62f; }
.showcase-enter { animation:showcase-in .3s ease-out; }
.bag-pop { animation:bag-pop .3s ease-out; }
@keyframes card-check { to { transform:scale(.92); box-shadow:1px 1px #111; } }
@keyframes showcase-in { from { opacity:.55; transform:translateY(8px); } to { opacity:1; transform:none; } }
@keyframes bag-pop { 50% { transform:translateY(-4px); } }
/* My Playmoji: a membership pass, order timeline and deliberately simple address book. */
.account-button { margin-left:auto; background:transparent; border:0; border-bottom:2px solid #111; padding:10px 0; min-height:44px; font-size:14px; font-weight:900; white-space:nowrap; }
header nav { gap:22px; }
#modal[data-view="account"] { width:1000px; }
.account-heading { display:flex; justify-content:space-between; gap:20px; align-items:start; margin-bottom:26px; }
.account-heading p { overflow-wrap:anywhere; font-size:15px; }
.account-heading .modal-title { font-size:clamp(2rem,4vw,3rem); margin-bottom:12px; }
.member-pass { padding:28px; border:3px solid #111; background:var(--blue); box-shadow:6px 6px var(--yellow); }
.member-pass .modal-title { font-size:clamp(2rem,5vw,3.5rem); }
.member-pass > p { line-height:1.6; margin:22px 0; max-width:50ch; }
.welcome-number { display:flex; align-items:center; gap:20px; font-family:'Archivo Black',sans-serif; font-size:76px; line-height:1; color:#111; }
.welcome-number > span { font-size:16px; line-height:1.4; }
.account-fine { font-size:14px; line-height:1.65; margin:16px 0; }
.account-fine a { text-decoration:underline; }
.account-perks { display:grid; grid-template-columns:1fr auto; border:2px solid #111; margin:0 0 32px; background:var(--yellow); }
.account-perks > div { padding:20px; }
.account-perks strong { font-family:'Archivo Black',sans-serif; font-size:18px; }
.account-perks p { font-size:15px; line-height:1.5; margin-top:8px; }
.account-perks button { background:#111; color:white; border:0; padding:20px; display:grid; align-content:center; gap:8px; }
.account-perks button b { font-size:28px; }
.account-perks button span { font-size:12px; font-weight:800; }
.account-columns { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:32px; }
.account-columns h3 { font-size:18px; line-height:1.3; }
.account-section-head { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.customer-order { border:2px solid #111; background:white; margin:14px 0; }
.customer-order summary { display:flex; justify-content:space-between; align-items:start; padding:16px; gap:16px; }
.customer-order summary span { display:grid; gap:7px; min-width:0; }
.customer-order summary strong { font-size:14px; overflow-wrap:anywhere; }
.customer-order summary small { font-size:14px; line-height:1.4; }
.customer-order summary span:last-child { text-align:right; flex-shrink:0; }
.customer-progress { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); list-style:none; padding:16px; margin:0; gap:6px; }
.customer-progress li { font-size:12px; line-height:1.4; border-top:3px solid #ccc; padding-top:10px; }
.customer-progress li.done { border-color:#0878ff; font-weight:800; }
.customer-progress li span { display:block; font-size:14px; margin-bottom:4px; }
.customer-order-body { padding:0 16px 16px; }
.customer-order-body > div { display:flex; justify-content:space-between; align-items:start; gap:12px; padding:9px 0; font-size:14px; }
.customer-order-body b { flex-shrink:0; }
.customer-order-body p { font-size:14px; line-height:1.6; margin:12px 0; }
.customer-order-body blockquote { padding:14px; margin:12px 0; background:#fff4a1; font-size:15px; line-height:1.6; white-space:pre-wrap; }
.account-empty { border:2px dashed #111; padding:24px; margin-top:20px; }
.account-empty p { line-height:1.6; margin:14px 0 20px; }
.account-pager { display:flex; justify-content:space-between; }
.account-address { padding:20px; background:#e2f4ff; border:2px solid #111; align-self:start; min-width:0; }
.account-address > p { font-size:15px; line-height:1.6; margin:14px 0; }
.account-address .pixel-button { width:100%; font-size:14px; }
.account-game { padding-top:22px; margin-top:24px; border-top:2px solid #111; }
.account-game p { font-size:14px; line-height:1.6; margin:10px 0; }
.checkout-account { margin:0 0 26px; padding:18px; border:2px solid #111; background:#e2f4ff; }
.checkout-account strong { font-size:14px; }
.checkout-account p { font-size:14px; line-height:1.6; margin:8px 0 12px; }
.gift-purpose { padding:0; margin:0 0 24px; border:0; min-width:0; }
.gift-purpose legend { font-size:14px; font-weight:900; padding:0 0 12px; }
.purpose-options { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.purpose-options label { display:flex; align-items:start; gap:10px; border:2px solid #111; padding:14px; cursor:pointer; background:white; }
.purpose-options label:has(input:checked) { background:var(--yellow); box-shadow:3px 3px #111; }
.purpose-options input { accent-color:#111; width:18px; height:18px; flex-shrink:0; }
.purpose-options span { display:grid; gap:7px; }
.purpose-options b { font-size:14px; }
.purpose-options small { font-size:14px; line-height:1.4; }
.gift-fields { border:2px solid #111; padding:18px; background:#fff7b7; margin:0 0 24px; min-width:0; }
.gift-fields legend { font-size:13px; font-weight:900; padding:6px; background:var(--yellow); max-width:95%; }
.gift-fields[hidden],.gift-payment-warning[hidden] { display:none; }
.gift-message-prompts { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0; }
.gift-message-prompts button { background:white; border:1px solid #111; padding:9px 10px; font-size:12px; font-weight:800; min-height:40px; }
.gift-payment-warning { padding:16px; border:2px solid #111; background:var(--yellow); margin:20px 0; }
.gift-payment-warning > p { margin:10px 0; line-height:1.6; font-size:15px; }
.gift-payment-warning label { display:flex; align-items:start; gap:12px; font-size:15px; line-height:1.5; }
.gift-payment-warning input { width:20px; height:20px; min-height:20px; flex-shrink:0; accent-color:#111; }
@media(min-width:721px){.checkout-layout .order-ticket { position:sticky; top:12px; transform:none; }.detail-layout { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }.detail-gallery { position:sticky; top:12px; }}
@media(max-width:1000px) and (min-width:721px){header { gap:15px; padding-inline:22px; }.brand { width:145px; flex-shrink:0; }header nav { gap:12px; font-size:11px; }.account-button { font-size:12px; }.hero { grid-template-columns:1fr 1fr; }.hero h1 { font-size:5.5vw; }.account-columns { gap:20px; }}
@media(max-width:720px){
 header { grid-template-columns:minmax(0,1fr) auto auto; gap:10px; }
 header .brand { grid-column:1; grid-row:1; width:135px; }
 header nav { grid-column:1 / -1; grid-row:2; }
 header .account-button { grid-row:1; grid-column:2; margin:0; font-size:12px; }
 header .cart-button { grid-row:1; grid-column:3; }
 .hero { gap:30px; padding-bottom:40px; }
 .hero h1 { font-size:clamp(2.65rem,10vw,4.2rem); line-height:1.01; }
 .hero .hero-stage { min-height:0; height:auto; aspect-ratio:auto; margin:0 5px 0 0; transform:none; }
 .hero-showcase { padding:10px; box-shadow:5px 5px #111; border-width:2px; }
 .showcase-photo { aspect-ratio:1.14; }
 .showcase-top { font-size:12px; gap:10px; }
 .showcase-caption { padding:14px 2px 3px; gap:12px; }
 .showcase-caption h2 { font-size:20px; }
 .showcase-caption .price-bubble strong { font-size:25px; }
 .hero .hero-picker { margin:18px 0 8px; gap:8px; }
 .hero .hero-picker button { flex-basis:120px; font-size:14px; }
 .hero-gift-context p { font-size:15px; }
 .hero-gift-context { gap:10px; }
 .gallery-canvas .detail-photo { max-height:340px; }
 .product-purchase-bar { bottom:-20px; gap:14px; padding:12px; margin-top:24px; }
 .product-purchase-bar .add-button { font-size:14px; padding:12px; }
 .product-purchase-bar strong { font-size:23px; }
 .product-purchase-bar span { font-size:12px; line-height:1.3; }
 .finder-alternatives > div { grid-template-columns:1fr; }
 .reward-example { grid-template-columns:48px minmax(0,1fr); padding:12px; gap:12px; }
 .reward-example img { width:48px; height:60px; }
 .reward-example > strong { grid-column:2; display:flex; align-items:center; gap:10px; }
 .reward-dock[data-earned="false"] { left:auto; right:12px; width:auto; transform:none; max-width:calc(100% - 24px); }
 .reward-dock[data-earned="false"] small { display:none; }
 .reward-dock[data-earned="false"] > button { min-height:46px; padding:10px 14px; }
 .account-heading { flex-wrap:wrap; gap:14px; }
 .account-heading .modal-title { font-size:30px; }
 .account-perks { grid-template-columns:minmax(0,1fr) 110px; margin-bottom:24px; }
 .account-perks > div,.account-perks button { padding:14px; }
 .account-perks strong { font-size:16px; }
 .account-perks p { font-size:14px; }
 .account-columns { grid-template-columns:minmax(0,1fr); gap:24px; }
 .member-pass { padding:20px; box-shadow:4px 4px var(--yellow); }
 .member-pass .pixel-button { width:100%; gap:10px; font-size:13px; }
 .welcome-number { font-size:64px; gap:14px; }
 .welcome-number > span { font-size:14px; }
 .account-address { padding:16px; }
 .customer-order summary { padding:12px; gap:10px; }
 .customer-order summary strong { font-size:13px; }
 .customer-order summary small { font-size:13px; }
 .customer-progress { padding:12px; }
 .purpose-options { gap:10px; }
 .purpose-options label { padding:12px 10px; gap:8px; }
 .purpose-options b { font-size:13px; }
 .purpose-options small { font-size:14px; }
 .gift-fields { padding:14px; }
 .checkout-account { padding:14px; }
}
@media(prefers-reduced-motion:reduce){.showcase-enter,.bag-pop,.game-card.checking { animation:none; }.showcase-photo img { transition:none; }}
.showcase-caption > div:first-child { min-width:0; flex:1; }
.showcase-caption > div:first-child > span { font-size:12px; font-weight:800; display:block; margin-bottom:6px; }
.showcase-caption h2 { max-width:none; }
.finder-photo { border:0; background:none; padding:0; width:100%; }
.finder-price { font-size:26px; font-weight:900; margin:20px 0; }
.finder-price small { font-size:14px; font-weight:400; }
.finder-reason { font-size:16px; line-height:1.6; }
.finder-result-head { display:flex; justify-content:space-between; gap:15px; margin-bottom:22px; }
.finder-alternatives > button { width:100%; margin:10px 0; }
.finder-alternatives > button span { flex:1; }
.finder-alternatives > button b { white-space:nowrap; }
@media(max-width:360px){header { padding-inline:12px; gap:8px; }header .brand { width:110px; }header .cart-button { padding-inline:8px; }header .account-button { font-size:12px; }.purpose-options { grid-template-columns:1fr; }.account-perks { grid-template-columns:1fr; }.account-perks button { grid-template-columns:auto 1fr; align-items:center; }.finder-alternatives > button { flex-wrap:wrap; }}