/* Styles for the shop & competition screens (store, checkout, free coins, item shops, inventory, wallet,
   tournaments, challenges) and the table extras (emoji sheet p08, bubbles, absent-player notice p13c).
   Base components come from style.css/app.css/layout.css; markup follows docs/design p08, p11–p13d, p17–p21. */
/* ---- shared states for every area screen (shop, progression, clubs, join, events) ----
   .emp   empty / error state: <div class="emp [flat]"><span class="emp-ic">icon</span><b>title</b><span class="mu sm">…</span>[.btn]</div>
   .sk    shimmering skeleton block (join.css) — sized per screen below */
.emp{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:30px 18px 26px;border-radius:var(--r3);border:1px dashed rgba(242,193,78,.24);
  background:radial-gradient(70% 80% at 50% 0%,rgba(242,193,78,.09),rgba(242,193,78,0) 70%),rgba(255,255,255,.015)}
.emp.flat{border:0;background:none;padding:22px 10px}
.emp-ic{width:66px;height:66px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--gd);margin-bottom:4px;flex:none;
  background:radial-gradient(circle at 50% 28%,#30303A 0%,#17171C 58%,#0A0A0C 100%);border:1px solid var(--hairS);box-shadow:0 0 24px rgba(242,193,78,.16),inset 0 1px 0 rgba(255,255,255,.12),inset 0 -5px 10px rgba(0,0,0,.5)}
.emp-ic svg{filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
.emp>b{font-size:15px;line-height:1.4}
.emp>.mu{line-height:1.65;max-width:300px}
.emp>.btn{margin-top:6px;min-width:150px}
.sech .slk.mu{color:var(--mu);font-weight:600}
:is(.scr-store,.scr-checkout,.scr-free-coins,.scr-shop,.scr-inventory,.pk-sheet) .gt{border-radius:16px;background:var(--surf);border:1px solid var(--ln);box-shadow:var(--hl),var(--sh1);transition:transform .15s var(--ease),border-color .2s;padding:10px 4px;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px;position:relative;text-align:center;color:#fff;min-width:0}
:is(.scr-store,.scr-checkout,.scr-free-coins,.scr-shop,.scr-inventory,.pk-sheet) .gt.sel{border:1.5px solid var(--gd);background:radial-gradient(90% 60% at 50% 0%,rgba(242,193,78,.2),rgba(242,193,78,0) 70%),var(--surf);box-shadow:var(--glow),inset 0 1px 0 rgba(255,236,170,.15)}
:is(.scr-shop,.scr-inventory,.scr-free-coins) .gt[role=button]:active,.fc-pk:active{transform:scale(.97)}
:is(.scr-free-coins,.scr-shop,.pk-sheet) .gt.lk{opacity:.55}
.gt>b.ell,.gt>span.ell{max-width:100%}
.gt.sk,.li.sk{min-height:120px;background:linear-gradient(90deg,#141416,#1c1c20,#141416);background-size:200% 100%;animation:shm 1.2s linear infinite;border:1px solid #1E1E22}
.li.sk{min-height:66px;border-radius:12px;margin:6px 0}
@keyframes shm{to{background-position:-200% 0}}
.rib{position:absolute;top:-9px;left:50%;transform:translateX(-50%);background:var(--rd);color:#fff;font-size:10px;font-weight:700;padding:2px 8px;border-radius:8px;white-space:nowrap;z-index:1}
.rib.v{background:var(--vi)}
.scr .chip.v,.md .chip.v{background:rgba(139,92,246,.16);border-color:rgba(139,92,246,.55);color:#C4B0FF}
.chip.x{background:rgba(255,77,94,.14);border-color:rgba(255,77,94,.5);color:#FF8A95}
.it-img{border-radius:50%;object-fit:cover;flex:none;display:block}
.it-ph{display:flex;align-items:center;justify-content:center;background:var(--s3);color:var(--gd)}
.g5{grid-template-columns:repeat(5,minmax(0,1fr))}
.wave{display:flex;align-items:center;gap:2px;height:20px;direction:ltr}.wave i{width:3px;border-radius:2px;background:var(--gd)}
.cd{width:128px;height:128px;border-radius:50%;background:conic-gradient(var(--gd) var(--p,67%),#2E2E35 0);display:flex;align-items:center;justify-content:center;margin:0 auto;box-shadow:0 0 30px rgba(242,193,78,.25);transition:background .3s}
.cd>div{width:108px;height:108px;border-radius:50%;background:#0B0B0C;display:flex;flex-direction:column;align-items:center;justify-content:center}
.cd b{font:700 30px/1.1 'Poppins'}
.fc-burst{animation:pop .6s cubic-bezier(.2,1.6,.4,1) both;filter:drop-shadow(0 0 24px rgba(242,193,78,.6))}
@keyframes pop{0%{transform:scale(.2) rotate(-30deg);opacity:0}100%{transform:none;opacity:1}}

/* store (p17) */
.store-scr .tabs>*{cursor:pointer}
.st-packs{gap:10px;margin-top:6px}
.st-pk{padding:14px 4px!important;gap:6px!important}
.st-pk .st-amt{font-size:16px}
.st-pk .st-price{width:86%;margin-top:auto;font-family:'Poppins','IBM Plex Sans Arabic'}
.st-card button{cursor:pointer}
.st-secure{justify-content:center;text-align:center}
.st-empty{padding:24px}
.st-links{margin-top:auto}
.st-tix .kpi{font-size:30px}

/* checkout (p18) */
.co-sheet{gap:14px}
.co-pkg{background:#0B0B0C;border-radius:14px;padding:12px}
.co-price{font-size:17px}
.co-or .g{height:1px;background:var(--ln)}
.co-list{padding:2px 14px;background:#0B0B0C}
.co-m{cursor:pointer}
.co-list .rd{width:20px;height:20px;border-radius:10px;border:2px solid #5A5A66;flex:none;display:inline-block}
.co-list .rd.on{border:6px solid var(--gd)}
.co-plus{width:20px;text-align:center;font-size:18px;font-weight:700;color:var(--gd)}
.co-pe{padding:10px 0 12px;min-height:60px}
.co-sec{justify-content:center}
.co-off{padding:20px;color:#fff}.co-off svg{color:var(--gd)}
.co-wait,.co-done{padding:18px 0}

/* free coins (p19) */
.fc-pk{padding:12px 4px!important;gap:6px!important}
.fc-pk .fc-c{gap:3px;font-size:15px}
.fc-bar{flex:none;width:80%}.fc-bar.ok i{background:var(--ok)}
.fc-go svg{color:#241800}
.fc-rules{gap:4px}
.fc-admd{max-width:420px;width:100%;align-self:center}
.fc-screen{width:100%;aspect-ratio:16/10;border-radius:16px;background:radial-gradient(80% 90% at 50% 30%,rgba(242,193,78,.25),transparent 70%),#0B0B0C;border:1px solid var(--ln);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--gd)}
.fc-screen b{font-size:22px}
.fc-cd{width:92px;height:92px}.fc-cd>div{width:76px;height:76px}.fc-cd b{font-size:24px}

/* item shops (p20, p21) */
.sh-hero{align-items:center}
.sh-hero .it-img{box-shadow:0 0 0 3px rgba(255,255,255,.08),0 8px 22px rgba(0,0,0,.6)}
.sh-play{gap:6px;color:#fff;cursor:pointer}
.sh-it{cursor:pointer;padding:12px 4px!important;gap:5px!important}
.sh-it b{font-size:13px}
.sh-it .chip,.sh-it .btn{margin-top:2px}
.sh-buy{height:28px!important;gap:4px}
.sh-snd{position:absolute;top:8px;inset-inline-start:8px;color:var(--gd);font-style:normal}
.sk-info{border-color:rgba(242,193,78,.45);line-height:1.6}
.sk-list{padding:2px 14px}
.sk-row{cursor:pointer}
.sk-row.on b{color:var(--gd)}
.felt.mini{margin:0 6px;width:84px;height:54px;min-height:0;max-height:none;border-radius:20px;flex:none;box-shadow:0 0 0 1.5px var(--rim),0 0 0 5px #17171A,0 0 0 6px var(--rim2)}
.felt.mini:before{inset:5px;border-radius:14px}.felt.mini:after,.felt.nol:after{display:none}
.sk-pv{gap:6px}
.sk-prev{height:150px;min-height:150px;margin:24px 22px 30px;border-radius:52px;flex:none}
.sk-s{position:absolute;z-index:2}.sk-s.s2{top:-18px;left:calc(50% - 18px)}.sk-s.s1{top:calc(50% - 18px);right:-14px}.sk-s.s3{top:calc(50% - 18px);left:-14px}.sk-s.s0{bottom:-20px;left:calc(50% - 18px)}
.sk-av{width:36px!important;height:36px!important;font-size:15px!important}
.sk-av.b1{background:linear-gradient(160deg,#E0457B,#8A1F4A)}.sk-av.b2{background:linear-gradient(160deg,#35C8B0,#0F5B4A)}.sk-av.b3{background:linear-gradient(160deg,#E0A021,#7A4A12)}
.sk-card{width:40px!important;height:56px!important;font-size:14px!important;top:calc(50% - 28px);left:calc(50% - 20px);position:absolute}.sk-card b{font-size:16px}
.sk-btn .btn{width:100%}

/* wallet */
.wl-bals{gap:10px}
.wl-bal{align-items:center;gap:3px;text-align:center;position:relative;overflow:hidden;isolation:isolate;padding:16px 10px 14px}
.wl-bal.gl{background:radial-gradient(90% 70% at 50% 0%,rgba(242,193,78,.22),rgba(242,193,78,0) 70%),var(--surf)}
.wl-bal.wl-tx{border-color:rgba(46,212,190,.32);background:radial-gradient(90% 70% at 50% 0%,rgba(46,212,190,.16),rgba(46,212,190,0) 70%),var(--surf)}
.wl-bal::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--suits);opacity:.35;-webkit-mask-image:linear-gradient(180deg,#000,transparent 80%);mask-image:linear-gradient(180deg,#000,transparent 80%)}
.wl-art{height:46px;display:flex;align-items:center;filter:drop-shadow(0 6px 10px rgba(0,0,0,.55))}
.wl-bal .kpi{font-size:24px;line-height:1.2}
.wl-list{padding:2px 14px}
.wl-row{padding:12px 0}
.wl-ic{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex:none;background:radial-gradient(circle at 50% 20%,rgba(61,220,151,.26),rgba(61,220,151,.06));border:1px solid rgba(61,220,151,.28);color:var(--ok);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.wl-ic.out{background:radial-gradient(circle at 50% 20%,rgba(255,77,94,.24),rgba(255,77,94,.05));border-color:rgba(255,77,94,.28);color:#FF8A95}
.wl-amt{flex:none;font-size:15px}
.wl-more{margin:10px 0}
.li.wl-sk{min-height:52px;border-radius:12px;margin:8px 0;border-bottom:0}

/* inventory */
.inv-scr .emp{margin-top:6px}
.inv-scr .sk-list .li{padding:12px 0}

/* item shops: hint chip in the section header, skins list */
.sh-hint{gap:4px;font-size:11px}
.sh-hint svg{color:var(--gd)}
.sk-list .sk-row{padding:12px 0;transition:background .2s}
.sk-row.on{background:linear-gradient(90deg,rgba(242,193,78,.13),rgba(242,193,78,0));margin-inline:-14px;padding-inline:14px;width:calc(100% + 28px)}
.sk-info{background:radial-gradient(60% 140% at 100% 50%,rgba(242,193,78,.16),rgba(242,193,78,0) 70%),var(--surf)}
.sk-info svg{color:var(--gd);flex:none}

/* free coins */
.fc-hero{min-height:92px}
.fc-art{flex:none;filter:drop-shadow(0 8px 12px rgba(0,0,0,.55))}
.fc-ht{font-size:16px;line-height:1.35}
.fc-go{height:54px;font-size:16px}
.fc-rules{line-height:1.7}


/* tournaments (p13, p13b, p13d) */
.tour-scr h1{font-size:26px}
.tour-scr .tabs .lvn{margin-inline-start:6px}
.tr-chips{gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}.tr-chips::-webkit-scrollbar{display:none}
.tr-chips .chip{height:32px;padding:0 12px;cursor:pointer}
.tr-card{gap:10px}
.tr-empty{padding:26px}
.tr-seats{gap:12px 6px;text-align:center;font-size:11px}
.tr-seat{align-items:center;gap:4px}
.tr-other{width:52px!important;height:52px!important;color:#fff;background:linear-gradient(160deg,#4A4A55,#26262C)}
.tr-seat .es{width:52px;height:52px;border-radius:50%}
.tr-pz{justify-content:space-around;text-align:center}
.tr-btns{margin-top:auto}
.tr-wait .cd{width:150px;height:150px}.tr-wait .cd>div{width:128px;height:128px}.tr-wait .cd b{font-size:34px}
.tr-wdmd{border-color:rgba(255,77,94,.55)!important}
.tr-wd{background:#0B0B0C;border-radius:14px;padding:4px 14px}
.tr-bracket{gap:14px}
.tr-tables{gap:8px}
.tr-tb{padding:8px 10px;gap:6px;border-radius:14px}
.tr-pl{gap:6px}.tr-pl .av{border-width:1px}
.tr-pl.won{color:var(--gd);font-weight:700}.tr-pl.out{opacity:.45}.tr-pl.me .ell{text-decoration:underline;text-decoration-color:var(--gd)}
.tr-prize{justify-content:center;font-size:18px}

/* challenges (p12) */
.chals-scr h1,.chal-scr h1{font-size:24px}
.ch-card{gap:10px}
.ch-path{gap:8px 6px;padding:10px}
.st:not(.sech){width:46px;height:46px;border-radius:23px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:17px;margin:0 auto}
.st.d{background:rgba(61,220,151,.16);border:1.5px solid var(--ok);color:var(--ok)}
.st.n{background:var(--gold);color:#241800;box-shadow:0 0 0 4px rgba(242,193,78,.25),0 0 18px rgba(242,193,78,.6)}
.st.k{background:#0E0E10;border:1px solid var(--ln);color:#6E6E7A}
.st.f{background:#0E0E10;border:1.5px dashed var(--gd)}
.st.won{animation:glow 1.4s ease-in-out infinite alternate}
@keyframes glow{to{box-shadow:0 0 0 6px rgba(242,193,78,.35),0 0 30px rgba(242,193,78,.9)}}
.ch-bars{gap:5px}.ch-bars i{width:24px;height:7px;border-radius:4px;background:#2E2E35}.ch-bars i.on{background:var(--gd)}
.ch-rw{padding:2px 14px}
.ch-main{margin-top:auto;display:flex;flex-direction:column}
.ch-lock{opacity:.5}
.ch-claim .btn{flex:none}

/* emoji picker at the table (p08) */
.pk-sheet{gap:12px}
.pk-grid{gap:8px}
.pk-it{cursor:pointer;padding:10px 2px 8px!important}
.pk-it b{font-size:12px;max-width:100%}
.pk-sub{gap:3px;justify-content:center;max-width:100%}
.pk-act .btn{min-width:0}
/* bubbles + absent-player notice over the table */
.bb-layer{position:absolute;inset:0;pointer-events:none;z-index:8}
.bb{position:absolute;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 8px;border-radius:18px;background:rgba(11,11,12,.92);border:1.5px solid var(--gd);box-shadow:0 8px 22px rgba(0,0,0,.6),0 0 16px rgba(242,193,78,.35);animation:bbin .35s cubic-bezier(.2,1.6,.4,1) both;max-width:130px;transition:opacity .25s}
.bb.out{opacity:0}
.bb-sticker{background:none;border:0;box-shadow:none;padding:0}
.bb-t{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:116px}
.bb:not(.placed).bp0{bottom:200px;left:calc(50% - 50px)}.bb:not(.placed).bp2{top:120px;left:calc(50% - 50px)}
.bb:not(.placed).bp1{top:38%;right:20px}.bb:not(.placed).bp3{top:38%;left:20px}
@keyframes bbin{0%{transform:scale(.3) translateY(10px);opacity:0}100%{transform:none;opacity:1}}
.tr-away{position:absolute;top:58px;left:0;right:0;display:flex;justify-content:center;padding:0 14px}
.tr-away .chip{white-space:normal;text-align:center;font-size:12px;padding:4px 12px}
#app.land .tr-away{top:52px}

@media (min-width:900px){
  .st-packs{grid-template-columns:repeat(6,minmax(0,1fr))}
  .fc-grid,.sh-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
  .shop-skin{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px 22px;align-content:start}
  .shop-skin .sk-info{grid-column:1/-1}
  .tour-scr .tr-card{max-width:none}
  .tr-tables{grid-template-columns:repeat(4,minmax(0,1fr))}
  .tr-away{top:72px}
}