/* Ọlá Store on the website: the same flat window as the in-game store (tcrp_store), in its own gold. */
.store .ph .to-basket em{font-style:normal;min-width:20px;height:20px;padding:0 6px;border-radius:99px;display:inline-grid;place-items:center;background:var(--s3);font-size:11.5px;font-weight:600}
.store .ph .to-basket.has em{background:var(--acc);color:var(--acc-ink)}
@media (min-width:901px){.store .ph .to-basket{display:none}}
.store-bar{margin:clamp(26px,4vw,40px) 0 16px;display:flex}
.store-cols{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px;align-items:start;min-height:420px}
@media (max-width:900px){.store-cols{grid-template-columns:1fr}}
.store .box,.store .card{background:var(--win);border-color:var(--line2)}
.store .line{background:var(--s1)}
.strip{display:flex;align-items:center;gap:10px;padding:11px 16px;margin-bottom:16px;border-radius:12px;font-size:12.5px;color:var(--ink2);background:var(--win);border:1px solid var(--line)}
.strip .i{font-size:14px;color:var(--acc)}
.strip.ok{color:var(--ink);background:rgba(var(--ok-rgb),.08)}
.strip.ok .i{color:var(--ok)}
.cat-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:2px 2px 12px}
.cat-head p{font-size:13px;color:var(--ink2);max-width:60ch}
.cat-head p b{color:var(--ink);font-weight:600}
.pk{position:relative}
.pk .name{text-align:left;font-size:14px;font-weight:600;line-height:1.35}
.pk .name:hover{text-decoration:underline;text-underline-offset:3px}
.pk .amt{font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1.2;font-variant-numeric:tabular-nums;text-align:left}
.pk .amt small{display:block;font-size:12px;font-weight:400;letter-spacing:0;color:var(--ink2)}
.pk p{flex:1}
.pk .buy{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;padding-top:10px;border-top:1px solid var(--line)}
.pk .price b{display:block;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.3}
.pk .price small{display:block;font-size:11px;color:var(--ink3)}
.pk .price s{font-size:11.5px;color:var(--ink3);margin-left:6px}
.add{position:relative;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--acc);color:var(--acc-ink);font-size:17px;flex:none;transition:filter .15s,transform .15s}
.add:hover{filter:brightness(1.08)}
.add:active{transform:scale(.94)}
.add.in{background:rgba(var(--ok-rgb),.14);color:var(--ok);border:1px solid rgba(var(--ok-rgb),.3)}
.pk.sel{border-color:rgba(var(--acc-rgb),.45)}
.empty{padding:36px 16px;text-align:center;border-radius:10px;background:var(--s1);border:1px solid var(--line);display:grid;gap:6px;justify-items:center}
.empty b{font-size:14px;font-weight:600}
.empty p{font-size:12.5px;color:var(--ink2);max-width:44ch}
.loading{display:flex;align-items:center;gap:12px;padding:30px 4px;color:var(--ink3);font-size:12.5px}
.loading span{width:54px;height:4px;border-radius:99px;background:var(--s2);position:relative;overflow:hidden}
.loading span::after{content:"";position:absolute;inset:0;border-radius:99px;background:var(--acc);transform:translateX(-100%);animation:load 1.2s ease-in-out infinite}
@keyframes load{to{transform:translateX(100%)}}

/* side panel */
.side .box h3{display:flex;align-items:center;justify-content:space-between;gap:8px}
.side .box h3 em{font-style:normal;font-size:11.5px;font-weight:500;color:var(--ink3);font-variant-numeric:tabular-nums}
.acct{display:flex;align-items:center;gap:10px}
.acct .who{min-width:0;flex:1}
.acct small{display:block;font-size:11px;color:var(--ink3);line-height:1.3}
.acct b{display:block;font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct .out{font-size:11.5px;color:var(--ink3);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.acct .out:hover{color:var(--ink)}
.accts{display:grid;gap:12px}
.accts .btn{margin-top:-2px}
.accts .acct+.acct,.accts .btn+.acct{padding-top:12px;border-top:1px solid var(--line)}
.side .why{margin-top:12px;font-size:11.5px;color:var(--ink3);line-height:1.5}
.modal .btn .i{font-size:19px}
.accts .btn .i{font-size:18px}
.lines{display:grid;gap:8px}
.line{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:9px 10px;border-radius:9px;background:var(--s2);border:1px solid var(--line)}
.line .ic{width:30px;height:30px;font-size:13px;border-radius:8px}
.line b{display:block;font-size:12.5px;font-weight:600;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.line small{display:block;font-size:11px;color:var(--ink3)}
.line .lp{font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.line .rm{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:11px;color:var(--ink3);background:var(--s3)}
.line .rm:hover{color:var(--bad)}
.none{font-size:12.5px;color:var(--ink3)}
.coupon{display:flex;gap:6px;margin-top:10px}
.coupon input{flex:1;min-width:0;height:34px;padding:0 12px;border-radius:99px;background:var(--s2);border:1px solid var(--line);font-size:12.5px;outline:none}
.coupon input::placeholder{color:var(--ink3)}
.coupon input:focus{border-color:rgba(var(--acc-rgb),.5)}
.coupon button{height:34px;padding:0 14px;border-radius:99px;background:var(--s3);font-size:12.5px;font-weight:500}
.coupon button:hover{color:var(--acc)}
.codes{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.codes button{font-size:11.5px}
.sum .total span{color:var(--ink)}
.sum .total b{font-size:16px;color:var(--acc)}
.sum b small{display:block;margin-top:2px;font-size:11px;font-weight:400;color:var(--ink3);white-space:nowrap}
.sum .total b small{font-size:11.5px}
.side .fine{font-size:11.5px;color:var(--ink3);line-height:1.5;padding:0 4px}
.side .fine a{text-decoration:underline;text-underline-offset:3px}
@media (min-width:901px){.side{position:sticky;top:96px}}

/* modal + toast */
.modal{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:16px}
.modal .scrim{position:absolute;inset:0;background:rgba(6,8,10,.62)}
.modal .win{position:relative;width:min(480px,100%);max-height:calc(100svh - 32px);display:flex;flex-direction:column;animation:winIn .2s ease-out}
.modal .bd{overflow-y:auto;display:grid;gap:12px}
.modal .desc{font-size:13.5px;color:var(--ink2)}
.modal .desc p+p{margin-top:8px}
.modal .desc img{border-radius:8px;margin:8px 0}
.modal .desc a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.modal .ask{text-align:center;display:grid;gap:8px;justify-items:center;padding:8px 4px 4px}
.modal .ask b{font-size:15px;font-weight:600}
.modal .ask p{font-size:13px;color:var(--ink2);max-width:40ch}
.x{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:var(--ink2);background:var(--s1);border:1px solid var(--line);font-size:13px;flex:none}
.x:hover{color:var(--ink);background:var(--s2)}
@keyframes winIn{from{opacity:0;transform:translateY(8px)}}
@media (prefers-reduced-motion:reduce){.modal .win{animation:none}}
.toast{position:fixed;left:50%;bottom:24px;z-index:90;transform:translate(-50%,16px);opacity:0;pointer-events:none;display:flex;align-items:center;gap:8px;padding:11px 16px;border-radius:12px;background:var(--s2);border:1px solid var(--line2);color:var(--ink);font-size:13px;font-weight:500;box-shadow:0 14px 40px rgba(0,0,0,.5);transition:opacity .2s,transform .2s;max-width:calc(100% - 32px)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.err{border-color:rgba(255,122,112,.45)}

@media (max-width:820px){.line .rm{width:32px;height:32px}.acct .out{padding:10px 0 10px 10px}.coupon input,.coupon button{height:40px}}