/* Spam City Games (pet-shop-sales branch): palette from the shop mockups (red #D62028, cream #FAFAF5, ink #100E14, gold #E8B33A, glass #8FD3E8) */
.sh-wrap{max-width:1100px;margin:0 auto;padding:12px}
.sh-scene{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:10px;background:repeating-linear-gradient(90deg,transparent 0 156px,#2B2730 156px 160px),#3D3640;border:4px solid #E8B33A;box-shadow:0 0 0 3px #100E14;border-bottom:8px solid #D62028}
.sh-sign{max-width:58%;image-rendering:pixelated;height:auto}
.sh-counter{display:flex;align-items:flex-end;gap:8px;flex:1;justify-content:flex-end}
.sh-keeper{width:120px;height:120px;image-rendering:pixelated}
.sh-bubble{order:-1;max-width:300px;margin:0 0 50px;background:#FAFAF5;color:#100E14;font:11px/1.6 'Press Start 2P',monospace;padding:10px;border:4px solid #D62028;box-shadow:0 0 0 3px #100E14}
.sh-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:14px 0}
.sh-btn{font:10px 'Press Start 2P',monospace;background:#D62028;color:#FAFAF5;padding:8px 12px;border:3px solid #FAFAF5;box-shadow:0 0 0 3px #100E14;cursor:pointer}
.sh-btn[disabled]{opacity:.45;cursor:not-allowed}.sh-ghost{background:#100E14}
.sh-hint{font-size:12px;opacity:.85}.sh-warn{color:#ffd166}.sh-ok{color:#5effb0}.sh-note{background:#2B2730;padding:6px}
.sh-binder{position:relative;background:#100E14;border:6px solid #D62028;box-shadow:0 0 0 2px #FAFAF5;padding:16px 14px 12px 34px}
.sh-rings{position:absolute;left:10px;top:14px;bottom:14px;width:12px;background:repeating-linear-gradient(#5A5A5A 0 12px,transparent 12px 34px)}
.sh-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 14px}
.sh-card{position:relative;background:#1b1b26;border:5px solid #9a9a9a;border-radius:6px;box-shadow:0 0 0 2px #000;font:8px/1.6 'Press Start 2P',monospace;color:#cfe;padding-bottom:6px;min-height:150px}
.sh-t1{border-color:#4fd18b}.sh-t2{border-color:#4aa3ff}.sh-t3{border-color:#E8B33A}.sh-t4{border-color:#c45eff}
/* card-shop-scene (owner 1:12 AM CT Oct 24): holo foil = Mythic-stage pets only. Rainbow sheen sweeps across, sparkles twinkle, the shine tilts on hover. */
.sh-myth{border-image:linear-gradient(45deg,#ff5ec7,#ffd84a,#5effb0,#5ec2ff,#c45eff) 1;box-shadow:0 0 14px #c45eff;overflow:hidden;transition:transform .2s}
.sh-myth::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;background:linear-gradient(115deg,transparent 20%,rgba(255,94,199,.35) 35%,rgba(255,216,74,.4) 45%,rgba(94,255,176,.35) 55%,rgba(94,194,255,.35) 65%,transparent 80%);background-size:250% 100%;mix-blend-mode:screen;animation:shHolo 3.2s linear infinite}
.sh-myth::after{content:"✦ ✧ ✦";position:absolute;top:26px;left:8px;right:8px;z-index:3;pointer-events:none;color:#fff;font-size:10px;letter-spacing:22px;text-shadow:0 0 6px #fff;animation:shTw 1.6s steps(2) infinite}
.sh-myth:hover{transform:perspective(500px) rotateY(-8deg) rotateX(4deg)}.sh-myth:hover::before{animation-duration:1.2s}
@keyframes shHolo{from{background-position:150% 0}to{background-position:-100% 0}}@keyframes shTw{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.sh-myth::before,.sh-myth::after{animation:none}.sh-myth:hover{transform:none}}
.sh-back{background:repeating-linear-gradient(45deg,#D62028 0 10px,#8F141A 10px 20px);min-height:180px}
.sh-hd{display:flex;justify-content:space-between;gap:4px;padding:4px;background:#000a;color:#fff}.sh-hd i{font-style:normal;color:#f2c14e}.sh-hd b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sh-art{height:90px;margin:3px;background:radial-gradient(#3a3a5a,#15151f);display:flex;align-items:center;justify-content:center}
.sh-art img,.sh-art canvas{height:80px;width:80px;image-rendering:pixelated}
.sh-st{padding:2px 5px}
.sh-tag{position:absolute;top:22px;right:-10px;background:#f7e7b0;color:#111;border:3px solid #000;padding:4px 5px;font-size:8px;transform:rotate(-5deg);max-width:95%}
.sh-buy{display:block;margin:6px auto 0}
.sh-pager{text-align:center;margin-top:14px;font:10px 'Press Start 2P',monospace;color:#FAFAF5}
.sh-mine{display:flex;flex-direction:column;gap:12px}.sh-row{display:flex;gap:16px;align-items:flex-start}.sh-row .sh-card{width:180px;flex:0 0 180px}.sh-rinfo{font-size:13px;line-height:1.8}
.sh-modal{position:fixed;inset:0;background:#000c;z-index:80;align-items:center;justify-content:center}
.sh-modal .box{background:#100E14;border:6px solid #D62028;box-shadow:0 0 0 3px #FAFAF5;padding:16px;max-width:760px;width:calc(100% - 24px);max-height:calc(100% - 24px);overflow:auto;color:#FAFAF5}
.sh-modal h3{font:14px 'Press Start 2P',monospace;color:#E8B33A}
.sh-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin:10px 0}.sh-pk{background:none;border:0;padding:0;cursor:pointer;text-align:left}
.sh-sellrow{display:flex;gap:18px;align-items:flex-start}.sh-sellrow>.sh-card{flex:0 0 180px}.sh-form label{display:block;margin:6px 0}.sh-form input,.sh-form select{font:inherit;padding:4px;margin-left:6px}
.sh-exact{font-size:15px}.sh-steps{padding-left:18px;font-size:13px}
.sh-soon{text-align:center;margin:20px}
.toasts{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);z-index:90}.toasts .toast{background:#100E14;border:3px solid #E8B33A;padding:8px 12px;margin-top:6px}
@media (max-width:640px){.sh-scene{flex-direction:column;align-items:center}.sh-sign{max-width:100%}.sh-bubble{margin:0 0 20px;font-size:9px}.sh-keeper{width:84px;height:84px}
 .sh-grid{gap:16px 8px}.sh-binder{padding:12px 6px 10px 22px}.sh-rings{left:5px;width:9px}.sh-card{font-size:6px}.sh-art{height:56px}.sh-art img,.sh-art canvas{width:50px;height:50px}.sh-tag{position:static;transform:none;margin:4px 3px 0;font-size:6px}
 .sh-buy{font-size:8px;padding:6px 8px}.sh-sellrow,.sh-row{flex-direction:column;align-items:stretch}.sh-sellrow>.sh-card,.sh-row .sh-card{flex:none;width:170px}}
/* Old Money badge + filter states (display only) */
.sh-om{display:inline-block;margin:4px 0 2px;background:#1d3b1f;color:#ffe08a;border:2px solid #E8B33A;padding:2px 6px;font:9px "Press Start 2P",monospace;box-shadow:2px 2px 0 #000}
.sh-deed{display:inline-block;margin:4px 0 2px 4px;background:#14324a;color:#bfe6ff;border:2px solid #5fb3e8;padding:2px 6px;font:9px "Press Start 2P",monospace;box-shadow:2px 2px 0 #000}
.sh-deed-bad{background:#4a1414;color:#ffc0c0;border-color:#e85f5f}
.sh-omline{margin:0 0 8px;font-size:13px}
.sh-later{opacity:.6}
.sh-state{display:inline-block;padding:1px 6px;border:2px solid #000;font-weight:700;font-size:12px}
.sh-s-open{background:#8fe38f}.sh-s-sold{background:#E8B33A}.sh-s-expired,.sh-s-void{background:#bbb}
/* Spam City counters: Buy / Sell / Trade / Gift (one launch) */
.sh-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 10px}
.sh-tab{font:10px "Press Start 2P",monospace;padding:9px 12px;background:#2a1d10;color:#ffe08a;border:3px solid #E8B33A;box-shadow:3px 3px 0 #000;cursor:pointer}
.sh-tab.on{background:#E8B33A;color:#1d1206}
.sh-cnt{display:inline-block;margin-left:4px;padding:1px 5px;background:#c0392b;color:#fff;border:2px solid #000;font-size:8px}
.sh-swap{align-items:center}.sh-swapx{font-size:24px;color:#ffe08a;padding:0 4px}
/* ---- card-shop-scene (branch card-shop-scene, owner 1:11 AM CT Oct 24 2026): interactive pixel card shop. js/v2-shop-scene.js adds .cs-on;
   without JS the old sign + Luke strip shows. Hotspots are real buttons with hover glow + labels; labels stay on for the big stations on touch screens. */
.cs-stage,.cs-bar{display:none}
.sh-scene.cs-on{display:block;padding:6px}.sh-scene.cs-on>.sh-sign,.sh-scene.cs-on .sh-keeper{display:none}
.cs-on .cs-stage{display:block;position:relative;line-height:0}
.cs-on #csCanvas{display:block;width:100%;height:auto;image-rendering:pixelated;aspect-ratio:320/180}
.cs-on .sh-counter{display:block;margin-top:6px}.cs-on .sh-bubble{max-width:none;margin:6px 0 0;position:relative;min-height:1.6em}
.cs-on .sh-bubble::before{content:"";position:absolute;right:16%;top:-14px;border:8px solid transparent;border-bottom-color:#D62028}
.cs-bubble.cs-pop,.cs-on .sh-bubble.cs-pop{animation:csPop .35s steps(3)}@keyframes csPop{40%{transform:scale(1.04)}}
.cs-on .cs-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:6px 0 0;font:9px/1.6 'Press Start 2P',monospace;color:#FAFAF5}
.cs-sfx{min-width:44px;min-height:36px}
.cs-hots{position:absolute;inset:0}
.cs-hot{position:absolute;padding:0;margin:0;background:transparent;border:0;cursor:pointer;border-radius:2px;line-height:1.2;-webkit-tap-highlight-color:transparent}
.cs-hot:hover,.cs-hot:focus-visible{background:rgba(255,216,74,.14);box-shadow:0 0 0 2px #ffd84a,0 0 14px #ffd84a;outline:0}
.cs-lab{position:absolute;left:50%;bottom:100%;transform:translate(-50%,-2px);white-space:nowrap;background:#100E14;color:#FAFAF5;border:2px solid #E8B33A;font:8px/1.4 'Press Start 2P',monospace;padding:3px 5px;pointer-events:none;opacity:0;transition:opacity .12s;z-index:5}
.cs-hot:hover .cs-lab,.cs-hot:focus-visible .cs-lab{opacity:1}
.cs-hot[data-cs^=cage] .cs-lab,.cs-hot[data-cs=bell] .cs-lab{bottom:auto;top:100%;transform:translate(-50%,2px)}
.cs-hot[data-cs=cat] .cs-lab,.cs-hot[data-cs=luke] .cs-lab{left:auto;right:0;transform:translate(0,-2px)}
.cs-hot[data-cs=cage0] .cs-lab,.cs-hot[data-cs=gift] .cs-lab,.cs-hot[data-cs=case0] .cs-lab{left:0;transform:translate(0,2px)}.cs-hot[data-cs=gift] .cs-lab,.cs-hot[data-cs=case0] .cs-lab{transform:translate(0,-2px)}
@media (hover:none){.cs-lab{display:none}.cs-hot:active{background:rgba(255,216,74,.25);box-shadow:0 0 0 2px #ffd84a}}
.cs-chips{display:none}@media (max-width:640px){.cs-on .cs-chips{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:6px 0 0}.cs-chips .sh-btn{min-height:44px;font-size:9px;margin:0}}
/* overlays: binder + cage chooser (own overlay, so #shModal keeps the buy/sell flows) */
.cs-ov{position:fixed;inset:0;z-index:900;display:none;align-items:flex-start;justify-content:center;overflow:auto;background:rgba(16,14,20,.82);padding:24px 8px}
.cs-ov.on{display:flex}
.cs-binder{position:relative;width:min(760px,100%);background:#D62028;border:4px solid #100E14;box-shadow:0 0 0 4px #E8B33A,0 12px 0 #8F141A;padding:14px 14px 14px 30px;color:#FAFAF5;animation:csOpen .3s ease-out}
@keyframes csOpen{from{transform:perspective(900px) rotateY(-70deg);transform-origin:left;opacity:.2}}
.cs-bhd{display:flex;justify-content:space-between;align-items:center}.cs-bhd h3{margin:0;font-family:'Press Start 2P',monospace;font-size:13px}
.cs-spine{position:absolute;left:8px;top:40px;bottom:40px;width:10px;background:repeating-linear-gradient(#cfcfcf 0 10px,transparent 10px 40px)}
.cs-page{background:#FAFAF5;border:3px solid #100E14;padding:8px;transform-origin:left center;perspective:900px}
.cs-out-r{animation:csOutR .23s ease-in forwards}.cs-in-r{animation:csInR .25s ease-out}.cs-out-l{animation:csOutL .23s ease-in forwards}.cs-in-l{animation:csInL .25s ease-out}
@keyframes csOutR{to{transform:perspective(900px) rotateY(-90deg)}}@keyframes csInR{from{transform:perspective(900px) rotateY(90deg)}}
@keyframes csOutL{to{transform:perspective(900px) rotateY(90deg)}}@keyframes csInL{from{transform:perspective(900px) rotateY(-90deg)}}
.cs-sleeves{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cs-sleeve{position:relative;min-height:230px;background:rgba(143,211,232,.25);border:2px solid #8FD3E8;padding:4px;cursor:pointer;perspective:900px}
.cs-emptys{cursor:default;opacity:.6}.cs-emptys .sh-back{min-height:220px}
.cs-flip{position:relative;height:100%;min-height:220px;transition:transform .5s;transform-style:preserve-3d}
.cs-sleeve.flipped .cs-flip{transform:rotateY(180deg)}
.cs-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}.cs-face>.sh-card{height:100%;box-sizing:border-box;margin:0}
.cs-rear{transform:rotateY(180deg)}
.cs-back{position:relative;height:100%;box-sizing:border-box;overflow:auto;background:#100E14;color:#FAFAF5;border:4px solid #E8B33A;padding:6px;font-size:11px;line-height:1.4}
.cs-back p{margin:4px 0}.cs-back a{color:#8FD3E8}.cs-back .sh-btn{position:relative;z-index:4}.cs-fam{max-height:90px;overflow:auto;font-size:10px}.cs-cost{color:#ffd84a}.cs-link{font-size:10px}
.cs-pick{width:min(520px,100%)}.cs-pickrow{display:flex;gap:12px;align-items:flex-start}.cs-pickrow>.sh-card{width:170px;flex:none}
@media (max-width:640px){.cs-sleeves{grid-template-columns:repeat(2,1fr)}.cs-binder{padding-left:22px}.cs-spine{left:5px;width:8px}.cs-pickrow{flex-direction:column}.cs-on .cs-bar{font-size:7px}}
@media (prefers-reduced-motion:reduce){.cs-binder,.cs-flip,.cs-out-r,.cs-in-r,.cs-out-l,.cs-in-l,.cs-bubble.cs-pop{animation:none;transition:none}}
.cs-on .cs-stage:has(canvas[data-mfs]){width:fit-content;margin:0 auto}
/* token-press (Oct 24 2026): the press animation canvas stays pixel art */
.tp-anim{display:block;width:100%;max-width:320px;aspect-ratio:160/112;image-rendering:pixelated;image-rendering:crisp-edges;border:3px solid #E8B33A;box-shadow:0 0 0 2px #100E14;background:#3D3640;margin:0 0 8px}
.tp-big{max-width:480px;margin:8px auto}
.sh-steps li.sh-done{opacity:.7}
.sh-link{background:none;border:0;padding:0;color:#ffd84a;text-decoration:underline;font:inherit;cursor:pointer}
/* shop-safety */
.sh-coin{color:#ffd166;white-space:nowrap}.sh-confirm{font-size:14px;margin:6px 0}.sh-amt input{width:9em}.sh-lowok{display:inline-block;margin:6px 0;font-size:13px}
.sh-openbar{background:#2B2730;border:2px solid #ffd166;padding:8px 10px;margin:0 0 10px;font-size:13px}.sh-openbar ul{margin:6px 0 0;padding-left:18px}.sh-openbar li{margin:4px 0}

/* buy-card-art: in confirm modals the amount tag sits under the art instead of over it, and the sprite fills the art box */
#shModal .sh-card .sh-tag{position:static;transform:none;margin:4px 3px 0;max-width:none;text-align:center}
#shModal .sh-art{position:relative;z-index:4}
.sh-sp{display:flex;align-items:center;justify-content:center}