/* Strategy game Diamond Shop (js/strat-shop.js): navy and bright gold, big touch targets, smooth, calm with reduced motion. */
.ss-hud{display:inline-flex;gap:6px;align-items:center;pointer-events:auto}
.ss-hudbtn,.ss-hint{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:999px;border:2px solid #FFD54F;background:linear-gradient(135deg,#132f5e,#0B1A3A 60%,#24124a);color:#FFE28A;font:700 15px/1 system-ui,-apple-system,"Segoe UI",sans-serif;cursor:pointer;box-shadow:0 0 0 1px rgba(255,213,79,.25),0 4px 16px rgba(255,199,44,.28),inset 0 1px 0 rgba(255,240,190,.3);position:relative;overflow:hidden;transition:transform .15s ease,box-shadow .2s ease}
.ss-hudbtn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,236,160,.45) 50%,transparent 70%);transform:translateX(-120%);animation:ss-sweep 3.8s ease-in-out infinite}
.ss-hudbtn:hover,.ss-hint:hover{transform:translateY(-1px) scale(1.03);box-shadow:0 0 0 1px rgba(255,213,79,.5),0 6px 22px rgba(255,199,44,.45)}
.ss-hudbtn:focus-visible,.ss-hint:focus-visible,.ss-btn:focus-visible,.ss-mini:focus-visible,.ss-x:focus-visible{outline:3px solid #9AD0F5;outline-offset:2px}
.ss-hint b{min-width:1.2em;text-align:center}.ss-hint.none{opacity:.8}
.ss-dia{filter:drop-shadow(0 0 4px rgba(150,220,255,.8))}
@keyframes ss-sweep{0%,55%{transform:translateX(-120%)}85%,100%{transform:translateX(120%)}}
html.ss-open{overflow:hidden}
.ss-modal{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(3,8,24,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .18s ease}
.ss-modal.on{opacity:1}.ss-modal[hidden]{display:none}
.ss-box{width:min(980px,100%);max-height:min(92vh,900px);overflow:auto;overscroll-behavior:contain;border-radius:24px;padding:20px 22px 24px;color:#EAF2FF;background:radial-gradient(120% 70% at 50% -10%,rgba(255,199,44,.22),transparent 60%),linear-gradient(180deg,#0E2350,#0A1836 55%,#081229);border:2px solid rgba(255,213,79,.65);box-shadow:0 0 0 1px rgba(255,236,160,.2) inset,0 30px 80px rgba(0,0,0,.6),0 0 60px rgba(255,199,44,.18);transform:translateY(14px) scale(.98);transition:transform .22s cubic-bezier(.2,.9,.3,1.2)}
.ss-modal.on .ss-box{transform:none}
.ss-hd{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ss-tt{display:flex;align-items:center;gap:12px}.ss-gico{font-size:38px;filter:drop-shadow(0 0 10px rgba(255,213,79,.6))}
.ss-hd h2{margin:0;font-size:clamp(24px,4vw,32px);letter-spacing:.02em;background:linear-gradient(180deg,#FFF3C4,#FFD54F 45%,#E0A800);-webkit-background-clip:text;background-clip:text;color:transparent}
.ss-gname{margin:2px 0 0;color:#9AD0F5;font-weight:600}
.ss-x{width:48px;height:48px;border-radius:50%;border:2px solid rgba(255,213,79,.6);background:#0B2545;color:#FFE28A;font-size:20px;cursor:pointer;flex:none}
.ss-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:14px 0 6px;padding:10px 14px;border-radius:16px;background:linear-gradient(90deg,rgba(255,199,44,.16),rgba(29,95,148,.25));border:1px solid rgba(255,213,79,.35)}
.ss-bal{margin:0;font-size:18px}.ss-bal strong{color:#FFE28A;font-size:22px}
.ss-get{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:12px;background:#132f5e;border:2px solid #9AD0F5;color:#E6F4FF;font-weight:700;text-decoration:none}
.ss-bank{margin:4px 2px 8px;color:#C9DBF5}
.ss-perks{display:flex;align-items:center;gap:10px;margin:8px 0;padding:10px 14px;border-radius:14px;background:rgba(19,47,94,.7);border:1px solid rgba(154,208,245,.35);cursor:pointer;font-weight:600}
.ss-perks input{width:26px;height:26px;accent-color:#FFC72C}
.ss-guest{margin:10px 0;padding:16px;border-radius:18px;text-align:center;background:linear-gradient(160deg,rgba(255,199,44,.18),rgba(19,47,94,.85));border:2px solid rgba(255,213,79,.6)}
.ss-guest h3{margin:4px 0;color:#FFE28A}.ss-guest p{margin:4px 0 10px;color:#DCE8FA}.ss-crown{font-size:36px}
.ss-pulse{animation:ss-pulse .8s ease 2}@keyframes ss-pulse{50%{box-shadow:0 0 0 6px rgba(255,213,79,.45)}}
.ss-sec{margin-top:18px}.ss-sh{margin:0 0 2px;font-size:20px;color:#FFD54F}.ss-note{margin:0 0 10px;color:#AFC6E6;font-size:14px}
.ss-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.ss-card{--rc:#9AD0F5;position:relative;display:flex;flex-direction:column;gap:6px;padding:14px;border-radius:18px;background:linear-gradient(170deg,rgba(29,59,102,.85),rgba(11,26,58,.95));border:1.5px solid color-mix(in srgb,var(--rc) 55%,transparent);box-shadow:0 8px 22px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.06);transition:transform .18s ease,box-shadow .2s ease;overflow:hidden}
.ss-card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.45),0 0 22px color-mix(in srgb,var(--rc) 35%,transparent)}
.ss-r-common{--rc:#9AD0F5}.ss-r-rare{--rc:#5aa9ff}.ss-r-epic{--rc:#C08CFF}.ss-r-legendary{--rc:#FFC72C}
.ss-r-legendary{background:linear-gradient(165deg,rgba(90,64,8,.55),rgba(11,26,58,.96) 55%)}
.ss-r-legendary::before{content:"";position:absolute;inset:-40%;background:conic-gradient(from 0deg,transparent 0 70%,rgba(255,226,138,.22) 80%,transparent 90%);animation:ss-spin 6s linear infinite;pointer-events:none}
@keyframes ss-spin{to{transform:rotate(1turn)}}
.ss-card>*{position:relative}
.ss-ctop{display:flex;justify-content:space-between;align-items:flex-start}
.ss-ico{font-size:34px;line-height:1;filter:drop-shadow(0 0 8px color-mix(in srgb,var(--rc) 70%,transparent))}
.ss-rar{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--rc);padding:3px 8px;border-radius:999px;border:1px solid color-mix(in srgb,var(--rc) 60%,transparent)}
.ss-card h4{margin:2px 0 0;font-size:17px;color:#FFF0C2}.ss-desc{margin:0;color:#C9DBF5;font-size:14px;flex:1}
.ss-has{margin:2px 0;padding-left:18px;color:#E6F4FF;font-size:14px}.ss-sum{margin:0;color:#9AD0F5;font-size:13px}
.ss-have{margin:0;font-weight:700;color:#7ed957}
.ss-act{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:4px}
.ss-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:48px;padding:0 18px;border-radius:14px;border:2px solid #E0A800;background:linear-gradient(180deg,#FFE28A,#FFC72C 55%,#E0A800);color:#0B2545;font:800 16px/1 system-ui,-apple-system,"Segoe UI",sans-serif;cursor:pointer;text-decoration:none;box-shadow:0 4px 14px rgba(255,199,44,.3);transition:transform .12s ease,filter .15s ease}
.ss-btn:hover{filter:brightness(1.06);transform:translateY(-1px)}.ss-btn:active{transform:scale(.97)}.ss-btn[disabled]{opacity:.6;cursor:default}
.ss-btn.alt,.ss-use,.ss-eq{background:#132f5e;color:#FFE28A;border-color:#FFD54F;box-shadow:none}
.ss-eq.on{border-color:#7ed957;color:#c9f5b1}
.ss-buy{flex:1;min-width:110px}
.ss-owned{font-weight:800;color:#7ed957;padding:0 6px}
.ss-confirm{margin-top:8px;padding:12px;border-radius:14px;background:rgba(6,14,34,.85);border:1.5px solid rgba(255,213,79,.6);animation:ss-in .18s ease}
.ss-confirm p{margin:0 0 8px;font-weight:700}.ss-small{font-weight:400!important;font-size:13px;color:#AFC6E6}.ss-err{color:#FF9DB0}
.ss-btns{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
@keyframes ss-in{from{opacity:0;transform:translateY(6px)}}
.ss-fine{margin:18px 2px 0;font-size:13px;color:#93AACB}
.ss-toast{position:fixed;left:50%;bottom:22px;z-index:9500;transform:translate(-50%,30px);opacity:0;padding:12px 18px;border-radius:14px;background:#0B2545;border:2px solid #FFD54F;color:#FFE28A;font-weight:700;box-shadow:0 10px 30px rgba(0,0,0,.5);transition:all .22s ease;pointer-events:none;max-width:92vw;text-align:center}
.ss-toast.on{opacity:1;transform:translate(-50%,0)}
.ss-burst{position:fixed;left:var(--x);top:var(--y);z-index:9600;pointer-events:none}
.ss-burst i{position:absolute;width:9px;height:9px;border-radius:2px;background:linear-gradient(135deg,#FFF3C4,#FFC72C);transform:rotate(45deg);animation:ss-pop .85s ease-out forwards}
.ss-burst i:nth-child(3n){background:linear-gradient(135deg,#E6F7FF,#7CC8FF)}
@keyframes ss-pop{to{transform:rotate(var(--a)) translateY(calc(var(--d) * -1)) rotate(45deg) scale(.3);opacity:0}}
/* strip row under the game's store strip */
.ss-strip{min-width:0;max-width:100%;box-sizing:border-box;overflow:hidden;margin-top:14px;padding:16px;border-radius:20px;background:linear-gradient(170deg,#0E2350,#091530);border:2px solid rgba(255,213,79,.55);color:#EAF2FF}
.ss-shd{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}.ss-shd h2{margin:0;font-size:22px;color:#FFD54F}
.ss-row{max-width:100%;min-width:0;display:flex;gap:10px;overflow-x:auto;padding:6px 2px 10px;scroll-snap-type:x mandatory;scrollbar-color:#FFC72C #0B2545}
.ss-mini{--rc:#9AD0F5;flex:0 0 150px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:6px;min-height:130px;padding:12px 10px;border-radius:16px;background:linear-gradient(170deg,rgba(29,59,102,.9),rgba(11,26,58,.95));border:1.5px solid color-mix(in srgb,var(--rc) 55%,transparent);color:#FFF0C2;cursor:pointer;text-align:center;font:inherit;transition:transform .15s ease}
.ss-mini:hover{transform:translateY(-3px)}.ss-mini b{font-size:14px}.ss-mini small{color:#FFE28A;font-weight:700}
@media (max-width:640px){.ss-box{padding:16px 14px 20px;border-radius:20px;max-height:94vh}.ss-modal{padding:8px;align-items:flex-end}.ss-grid{grid-template-columns:1fr 1fr;gap:10px}.ss-card{padding:12px}.ss-card h4{font-size:15px}.ss-desc{font-size:13px}.ss-hl{display:none}.ss-hudbtn{padding:0 12px}}
@media (max-width:380px){.ss-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.ss-hudbtn::after,.ss-r-legendary::before{animation:none}.ss-modal,.ss-box,.ss-card,.ss-toast{transition:none}}
/* exclusive looks: a frame and a light grade on the game stage (looks only) */
[class*="ss-th-"]{transition:box-shadow .4s ease}
[class*="ss-th-"] canvas{transition:filter .4s ease}
.ss-th-rose{box-shadow:0 0 0 3px #E8A39A,0 0 40px rgba(255,140,150,.45)!important}.ss-th-rose canvas{filter:sepia(.25) hue-rotate(-18deg) saturate(1.25)}
.ss-th-aurora{box-shadow:0 0 0 3px #46E0C8,0 0 40px rgba(70,224,200,.45)!important}.ss-th-aurora canvas{filter:hue-rotate(40deg) saturate(1.35) brightness(1.05)}
.ss-th-moon{box-shadow:0 0 0 3px #CFE3FF,0 0 40px rgba(160,190,255,.45)!important}.ss-th-moon canvas{filter:saturate(.7) brightness(.85) hue-rotate(200deg) sepia(.1)}
.ss-th-emerald{box-shadow:0 0 0 3px #2EE88A,0 0 40px rgba(46,232,138,.4)!important}.ss-th-emerald canvas{filter:hue-rotate(-25deg) saturate(1.4)}
.ss-th-noir{box-shadow:0 0 0 3px #FFC72C,0 0 40px rgba(20,40,100,.7)!important}.ss-th-noir canvas{filter:brightness(.8) contrast(1.15) saturate(1.1)}
.ss-th-sun{box-shadow:0 0 0 3px #FFB04D,0 0 40px rgba(255,176,77,.5)!important}.ss-th-sun canvas{filter:sepia(.35) saturate(1.4) hue-rotate(-10deg)}
.ss-th-gold{box-shadow:0 0 0 3px #FFD54F,0 0 44px rgba(255,213,79,.55)!important}.ss-th-gold canvas{filter:sepia(.3) saturate(1.5) brightness(1.06)}
.ss-th-night{box-shadow:0 0 0 3px #5aa9ff,0 0 44px rgba(90,169,255,.5)!important}.ss-th-night canvas{filter:brightness(.78) hue-rotate(190deg) saturate(1.2)}
.ss-th-sea{box-shadow:0 0 0 3px #4DA3FF,0 0 40px rgba(77,163,255,.5)!important}.ss-th-sea canvas{filter:hue-rotate(160deg) saturate(1.2)}
.ss-th-dusk{box-shadow:0 0 0 3px #FF4D6D,0 0 40px rgba(255,77,109,.45)!important}.ss-th-dusk canvas{filter:sepia(.3) hue-rotate(-35deg) saturate(1.5)}
.ss-th-onyx{box-shadow:0 0 0 3px #FFC72C,0 0 40px rgba(0,0,0,.8)!important}.ss-th-onyx canvas{filter:grayscale(.55) contrast(1.2) brightness(.9)}
.ss-th-ice{box-shadow:0 0 0 3px #9FF3FF,0 0 40px rgba(159,243,255,.5)!important}.ss-th-ice canvas{filter:hue-rotate(180deg) saturate(.9) brightness(1.08)}
.ss-th-ruby{box-shadow:0 0 0 3px #FF4D6D,0 0 40px rgba(155,16,48,.6)!important}.ss-th-ruby canvas{filter:sepia(.4) hue-rotate(-40deg) saturate(1.8)}
.ss-th-marble{box-shadow:0 0 0 3px #F4E7C6,0 0 40px rgba(244,231,198,.4)!important}.ss-th-marble canvas{filter:sepia(.2) brightness(1.05) contrast(1.05)}
.ss-th-sapphire{box-shadow:0 0 0 3px #4DA3FF,0 0 40px rgba(30,60,154,.6)!important}.ss-th-sapphire canvas{filter:hue-rotate(190deg) saturate(1.3)}
.ss-k-bundle .ss-desc{flex:0 0 auto}.ss-k-bundle .ss-has{flex:1}
.ss-mini{position:relative;overflow:hidden}.ss-mini>*{position:relative}.ss-strip{contain:paint}