/* Compact header: identity, title and actions share one row. */
.store-header{display:grid;grid-template-columns:clamp(108px,30vw,176px) minmax(0,1fr) auto;gap:8px;padding:8px 12px;min-height:64px;margin-bottom:10px}
.store-header .brand-mark{width:100%;height:44px;object-fit:contain}
.header-game-heading{min-width:0;text-align:center}.header-title{font-family:"IBM Plex Sans Arabic",Tahoma,sans-serif;font-size:clamp(17px,4.4vw,26px);font-weight:700;line-height:1.4;white-space:nowrap;padding:0;color:#fff}.header-title span{color:#ffda32}
.header-actions{display:flex;align-items:center;gap:4px}.header-actions .icon-button{width:44px;height:44px;border-radius:14px}.header-actions .game-search-toggle{color:#fff;background:#252a2d;border:1px solid #383c3f}.header-actions .game-search-toggle[aria-expanded=true]{color:#15191b;background:var(--soft);border-color:#ffcf18}
.games-layout>.search-box{margin:0 0 10px}.preview-details{min-height:194px}.preview-art{position:relative}.preview-content{width:100%;transform-origin:50% 40%}.game-preview[aria-busy=true] .preview-art::after{content:"";position:absolute;inset:auto 12px 30px auto;width:20px;height:20px;border-radius:50%;border:2px solid #fff8;border-top-color:#fff;animation:busy-spin .7s linear infinite}
.game-tab,.package-card,.method-card,.game-preview,.button,.icon-button,.support-strip{transition:transform 170ms ease,box-shadow 170ms ease,border-color 170ms ease,background-color 170ms ease}
.game-tab::before{content:"";position:absolute;right:-2px;top:10px;width:4px;height:44%;background:#ffcb08;border-radius:5px;opacity:0;transform:scaleY(.45);transition:opacity 170ms ease,transform 170ms ease}
.game-tab[aria-pressed=true]::before{opacity:1;transform:scaleY(1)}
.preview-image,.game-thumbnail{transition:transform 210ms ease}.preview-art{overflow:hidden}.game-thumbnail{transform-origin:center}
.action-arrow{direction:ltr;unicode-bidi:isolate;transition:transform 170ms ease}
.game-tab:active,.package-card:active,.method-card:active,.button:active,.icon-button:active,.support-strip:active{transform:scale(.975)}
.game-tab:focus-visible,.package-card:focus-visible,.method-card:focus-visible,.button:focus-visible,.icon-button:focus-visible{outline:3px solid #9b7100;outline-offset:3px;box-shadow:0 0 0 5px #fff}
.package-card[aria-pressed=true]{border-color:#d5a700;background:#fff7d2;box-shadow:inset 0 0 0 1px #d5a700}
.selection-dot{transition:background-color 160ms ease,border-color 160ms ease}.selection-dot::after{transform-origin:center}.package-card[aria-pressed=true] .selection-dot::after{animation:check-in 160ms ease-out}
#method-options{margin-top:20px}.method-sheet .method-card{min-height:106px}.method-sheet .sheet-heading{padding-top:0}
#submit-phone{position:relative}#submit-phone:disabled{cursor:not-allowed;opacity:.48;box-shadow:none}#submit-phone.is-loading{cursor:wait;opacity:.85}#submit-phone.is-loading svg{display:none}#submit-phone.is-loading::after{content:"";width:19px;height:19px;flex-shrink:0;border:2px solid #fff6;border-top-color:#fff;border-radius:50%;animation:busy-spin .7s linear infinite}
@media(hover:hover) and (pointer:fine){
 .game-tab:hover,.package-card:hover,.method-card:hover{transform:translateY(-2px);box-shadow:0 5px 14px #18231c10,inset 0 0 0 1px #e4bb24}
 .game-preview:hover{transform:translateY(-2px);box-shadow:0 7px 18px #171d1810,inset 0 0 0 1px #e4bb24}.game-preview:hover .preview-image{transform:scale(1.025)}
 .game-tab:hover .game-thumbnail{transform:scale(1.025)}
 .primary-button:hover{filter:brightness(.95)}.game-action:hover .action-arrow{transform:translateX(-4px)}
 .game-tab:active,.package-card:active,.method-card:active,.button:active{transform:scale(.975)}
}
/* Override legacy hover declarations on touch-capable/coarse devices. */
@media(hover:none),(pointer:coarse){
 .game-tab:hover{background:transparent}.game-tab[aria-pressed=true]:hover{background:var(--soft)}
 .primary-button:hover{filter:none}.method-card:hover{background:var(--surface);border-color:var(--line)}
 .support-strip:hover{background:#e5f3e7}.whatsapp-button:hover{background:#12884c}#help-button:hover{background:#252a2d}
}
@keyframes busy-spin{to{transform:rotate(360deg)}}@keyframes check-in{from{opacity:.2;transform:scale(.7)}to{opacity:1;transform:scale(1)}}
@media(min-width:520px){.store-header{padding-inline:18px;margin-bottom:12px}.store-header .brand-mark{height:55px}.preview-details{min-height:240px}}
@media(max-width:370px){.store-header{gap:6px;padding-inline:10px;grid-template-columns:108px minmax(0,1fr) 92px}.header-title{font-size:17px}}
@media(prefers-reduced-motion:reduce){.preview-content,.game-tab,.package-card,.method-card,.button,.icon-button,.support-strip,.game-preview,.preview-image,.game-thumbnail,.action-arrow{animation:none!important;transition:none!important;transform:none!important}.game-preview[aria-busy=true] .preview-art::after,#submit-phone.is-loading::after{animation:none!important}}

/* Method choices remain equally weighted; each opens its own catalog packages. */
.method-sheet[data-sheet]{padding:16px 20px calc(22px + env(safe-area-inset-bottom));background:#f5efe2}
.method-sheet .sheet-heading{padding:6px 0 0;text-align:right}
.method-sheet .sheet-heading h2{font-size:24px;font-weight:700;line-height:1.5;padding-inline-end:42px;padding-left:0;outline:none}
.method-sheet .sheet-heading p{font-size:14px;margin-top:3px;color:#766b58}
.method-sheet .sheet-close{top:25px;left:16px;background:#e9e1d2;border-radius:13px;color:#3c352b;font-size:27px}
#method-options{margin-top:20px;gap:12px}
.method-sheet .method-card{grid-template-columns:46px minmax(0,1fr) 28px;gap:12px;min-height:92px;padding:15px 14px;background:#ffda30;border:1px solid #e8bd14;border-radius:17px;box-shadow:0 4px 0 #c89c1422;color:#151a1c}
.method-sheet .method-copy{min-width:0}.method-sheet .method-card h3{font-size:20px;line-height:1.45;font-weight:700;overflow-wrap:anywhere}
.method-sheet .method-card p{font-size:12px;line-height:1.6;color:#51461e;margin-top:4px}
.method-sheet .method-art{width:46px;height:50px;background:#1b2023;border-radius:12px;color:#ffdf48}.method-sheet .method-art svg{width:29px;height:29px;stroke:currentColor}
.method-sheet .method-arrow{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:#171d20;color:#ffdf48;font:27px/1 Arial;direction:ltr}
.method-sheet .help-note{padding:0;margin-top:18px;font-size:12px;color:#766b58}
.package-card{padding:14px 12px 15px;min-height:210px;text-align:center}
.package-card h3{margin:0;font-size:21px;line-height:1.5}.package-card .price{justify-content:center;margin-top:5px;font-size:23px}
.package-art{height:100px;display:grid;place-items:center;margin-bottom:7px}.package-image{width:116px;height:100px;object-fit:contain;transition:transform 180ms ease}
.game-preview[data-game=pubg] .preview-art{aspect-ratio:2/3;background:#481b00;border-radius:22px}
.game-preview[data-game=pubg] .preview-image{object-fit:contain;object-position:center}
.game-hero img[src*="pubg-approved"]{height:80px;object-fit:contain}
@media(hover:hover) and (pointer:fine){.game-preview[data-game=pubg]:hover .preview-image{transform:none}}
@media(hover:hover) and (pointer:fine){.method-sheet .method-card:hover{background:#ffe25b;border-color:#c69c0d;box-shadow:0 6px 16px #a8781420}.package-card:hover .package-image{transform:scale(1.04)}}
@media(max-width:370px){.method-sheet[data-sheet]{padding-inline:16px}.method-sheet .method-card{gap:10px;padding-inline:12px;grid-template-columns:42px minmax(0,1fr) 26px}.method-sheet .method-art{width:42px}.method-sheet .method-card h3{font-size:19px}.package-card{padding-inline:10px}.package-card h3{font-size:20px}.package-card .price{font-size:21px}}

/* The artwork carries the visible title; its action stays directly on the image. */
.game-preview{--game-cta:linear-gradient(120deg,#ffe182,#e8b431 65%,#c68c12);--game-cta-ink:#2c1903;--game-cta-border:#936006}
.game-preview[data-theme=neon]{--game-cta:linear-gradient(120deg,#84e7ff,#b7a2ff);--game-cta-ink:#152344;--game-cta-border:#6073be}
.game-preview[data-theme=sky]{--game-cta:linear-gradient(120deg,#1689eb,#0755bd);--game-cta-ink:#fff;--game-cta-border:#064695}
.game-preview[data-theme=pitch]{--game-cta:linear-gradient(120deg,#f0ed4e,#bdd42b);--game-cta-ink:#101e42;--game-cta-border:#889616}
.game-preview[data-theme=ruby]{--game-cta:linear-gradient(120deg,#dc2c3d,#a10e29);--game-cta-ink:#fff5df;--game-cta-border:#f2b668}
.game-preview[data-theme=gold]{--game-cta:linear-gradient(120deg,#ffe55d,#ffc02c);--game-cta-ink:#351257;--game-cta-border:#a67316}
.game-preview .preview-art{border-radius:22px}
.game-preview .game-action{position:absolute;z-index:1;inset:auto 8px 0;width:auto;height:44px;min-height:44px;margin:0;padding:6px 10px;gap:7px;border-radius:13px;font-size:clamp(14px,3.7vw,18px);line-height:1.4;background:var(--game-cta);color:var(--game-cta-ink);border:1px solid var(--game-cta-border);box-shadow:inset 0 1px 0 #ffffff70,0 -3px 14px #19100645}
.game-preview .game-action .action-arrow{font-size:26px;line-height:1;margin-inline:2px}
.game-preview .game-action:focus-visible{outline:3px solid #111;outline-offset:-6px;box-shadow:inset 0 0 0 3px #fff}
.game-preview[aria-busy=true] .preview-art::after{inset:12px 12px auto auto;pointer-events:none}
@media(min-width:520px){.game-preview .game-action{inset:auto 14px 10px;min-height:56px;height:56px;font-size:21px;padding-inline:16px}.game-preview .game-action .action-arrow{font-size:30px}}

/* The image determines the row height; the game list scrolls within that space. */
.game-rail-shell{display:grid;grid-template-rows:minmax(0,1fr) 44px;gap:6px;contain:size;min-width:0;min-height:0;align-self:stretch}
.game-rail{min-height:0;min-width:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;scroll-padding-block:4px;scrollbar-width:none;-ms-overflow-style:none}
.game-rail::-webkit-scrollbar{display:none}
.game-rail .game-tab{flex:0 0 auto}
.game-rail .game-tab:focus-visible{outline:2px solid #755000;outline-offset:-3px;box-shadow:inset 0 0 0 4px #fff}
.game-rail-next{justify-self:center;width:44px;height:44px;padding:11px;border-radius:14px;background:var(--soft);border:1px solid #d4bc76;color:var(--ink);transition:background-color 170ms ease,transform 170ms ease}
.game-rail-next svg{width:22px;height:22px;stroke-width:2.2}.game-rail-next:disabled{cursor:default;opacity:.35}
.game-rail-next:focus-visible{outline:2px solid #755000;outline-offset:-4px;box-shadow:inset 0 0 0 3px #fff}
@media(hover:hover) and (pointer:fine){.game-rail-next:not(:disabled):hover{background:#ffdf63}}

/* Give the artwork more of the phone width while keeping the rail readable. */
@media(max-width:519px){
 .store-shell{padding-inline:8px}
 .store-header{margin-inline:-8px}
 .side-select{grid-template-columns:clamp(70px,18vw,78px) minmax(0,1fr);gap:7px}
 .game-rail{padding-inline-end:4px;gap:7px}
 .game-tab{padding:5px 3px 6px;font-size:14px;line-height:1.4;border-radius:12px}
 .game-thumbnail{border-radius:10px}
 .game-tab-name{margin-top:4px;overflow-wrap:normal}
 .game-preview .game-action{height:48px;min-height:48px;font-size:clamp(16px,4.3vw,18px);padding-inline:10px}
}