/*MC 2026-10-10 shop split. The Dojo Shop is two halls: Spend Koban (the Forge) and Get Koban (the Mint).
  Loaded on the play page only, after style.css. Everything here is new markup from shop.js; the older shop rules
  in style.css still style the cards, packs and offers inside each hall. */

/* the hall switch under the header */
.sh-sides{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:2px 22px 12px}
.sh-side{position:relative;display:flex;align-items:center;gap:12px;min-width:0;padding:10px 14px;border-radius:18px;border:1px solid var(--line);background:rgba(255,255,255,.035);color:var(--muted);text-align:start;cursor:pointer;font:inherit;transition:background .2s,border-color .2s,box-shadow .2s,color .2s}
.sh-side:hover{border-color:var(--line-2);background:rgba(255,255,255,.06)}
.sh-side:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.ss-seal{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:10px;font:900 20px/1 serif;transform:rotate(-4deg);transition:transform .25s var(--ease)}
.ss-spend .ss-seal{background:rgba(224,69,58,.22);color:#ffb0a6;box-shadow:inset 0 0 0 1.5px rgba(224,69,58,.55)}
.ss-get .ss-seal{background:rgba(242,195,91,.16);color:#ffe29a;box-shadow:inset 0 0 0 1.5px rgba(242,195,91,.5)}
.ss-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.ss-t b{font:800 17px/1.15 "Bricolage Grotesque",sans-serif;color:var(--text)}
.ss-t small{font-size:12px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ss-t em{font-style:normal;font-weight:800;letter-spacing:.06em;text-transform:uppercase;font-size:10.5px}
.ss-spend em{color:#ff9d90}.ss-get em{color:var(--gold)}
.sh-side .sh-dot{position:absolute;top:-6px;right:-4px}
.sh-side.on{color:rgba(255,255,255,.78)}
.sh-side.on .ss-seal{transform:rotate(-4deg) scale(1.06);color:#fff6e6}
.ss-spend.on{border-color:rgba(255,107,93,.75);background:linear-gradient(120deg,rgba(224,69,58,.32),rgba(224,69,58,.08) 70%);box-shadow:0 14px 36px -22px rgba(224,69,58,.9),inset 0 1px 0 rgba(255,255,255,.08)}
.ss-spend.on .ss-seal{background:var(--vermilion);box-shadow:inset 0 0 0 3px rgba(255,240,220,.35)}
.ss-get.on{border-color:rgba(242,195,91,.8);background:linear-gradient(120deg,rgba(242,195,91,.26),rgba(242,195,91,.06) 70%);box-shadow:0 14px 36px -22px rgba(242,195,91,.9),inset 0 1px 0 rgba(255,255,255,.08)}
.ss-get.on .ss-seal{background:var(--gold-grad);color:#3a2108;box-shadow:inset 0 0 0 3px rgba(255,250,230,.35)}

/* each hall tints the panel and its active tab */
.sh-panel.side-spend{background:radial-gradient(120% 60% at 0% 0%,rgba(224,69,58,.22),transparent 60%),radial-gradient(90% 60% at 100% 0%,rgba(242,195,91,.08),transparent 60%),linear-gradient(170deg,var(--lacquer-2),var(--lacquer))}
.sh-panel.side-get{background:radial-gradient(120% 60% at 100% 0%,rgba(242,195,91,.2),transparent 60%),radial-gradient(90% 60% at 0% 0%,rgba(224,69,58,.1),transparent 60%),linear-gradient(170deg,var(--lacquer-2),var(--lacquer))}
.side-spend .sh-tabs button.on{background:linear-gradient(135deg,#ff7a6b,#e0453a 60%,#b8281f);color:#fff;border-color:transparent;box-shadow:0 8px 22px -12px rgba(224,69,58,.9)}
.side-spend .sh-tabs button.on .sh-dot{background:#fff;color:var(--vermilion)}
.sh-tabs-hist{align-items:baseline;gap:10px}
.sh-hist-t{font:800 16px "Bricolage Grotesque",sans-serif;color:var(--text)}
.sh-tabs-hist small{color:var(--muted);font-size:12.5px}

/* history button in the header */
.sh-hist{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:50%;border:1px solid var(--line-2);background:rgba(255,255,255,.06);color:rgba(255,255,255,.85);cursor:pointer}
.sh-hist svg{width:19px;height:19px}
.sh-hist:hover{background:rgba(255,255,255,.12)}
.sh-hist.on{background:var(--gold-grad);color:#2d1806;border-color:transparent}

/* the heading at the top of each tab */
.hall-hd{margin:4px 0 14px}
.hall-hd h3{font:800 24px/1.15 "Bricolage Grotesque",sans-serif;margin:4px 0 4px;color:var(--text)}
.hall-hd p{color:var(--muted);font-size:13.5px;line-height:1.5;max-width:72ch;margin:0}
.side-spend .hall-hd .of-k{color:#ff9d90}

/* one-line links: the waiting gift on Today, and Get Koban at the bottom of Today */
.sh-nudge,.sh-cross{display:flex;align-items:center;gap:14px;width:100%;padding:12px 16px;border-radius:18px;text-align:start;cursor:pointer;font:inherit;color:var(--text);transition:border-color .2s,transform .2s}
.sh-nudge{margin:0 0 16px;background:linear-gradient(120deg,rgba(46,240,176,.16),rgba(76,201,240,.06));border:1px solid rgba(46,240,176,.5)}
.sh-cross{margin:18px 0 4px;background:linear-gradient(120deg,rgba(242,195,91,.12),rgba(255,255,255,.02));border:1px dashed rgba(242,195,91,.5)}
.sh-nudge:hover,.sh-cross:hover{transform:translateY(-1px)}
.sh-cross:hover{border-style:solid}
.sn-t{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.sh-nudge b{font-size:15px}
.sh-cross>span:first-child{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.sh-cross b{font-size:15px}.sh-cross small{color:var(--muted);font-size:12.5px}
.sn-go{flex:none;font:800 13px "Inter",sans-serif;color:var(--gold);white-space:nowrap}
.sh-nudge .sn-go{color:var(--mint)}
.gift-box.sm{width:34px;height:30px;border-radius:6px}
.gift-box.sm::before{height:10px;top:-3px;left:-3px;right:-3px;border-radius:4px}
.gift-box.sm i{width:6px;top:-4px}

/* Free Koban */
.free-gift .gift{padding:18px 20px;margin-bottom:6px}
.free-gift .gift-t h3{font-size:21px}
.earn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px;margin:16px 0 4px}
.earn{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.045);border:1px solid var(--line);color:var(--text);text-align:start;cursor:pointer;font:inherit;text-decoration:none;transition:border-color .2s,background .2s,transform .2s}
.earn:hover{border-color:rgba(242,195,91,.55);background:rgba(255,255,255,.07);transform:translateY(-1px)}
.earn-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:linear-gradient(160deg,var(--lacquer-2),#0f0816);box-shadow:inset 0 0 0 1.5px rgba(242,195,91,.45);color:#ffe29a;font:900 19px/1 serif}
.earn-ic .xt-ic{width:40px;height:40px;border-radius:12px}
.e-streak .earn-ic{color:#ffb35c;box-shadow:inset 0 0 0 1.5px rgba(255,122,61,.6)}
.e-league .earn-ic{color:#7ff7cf;box-shadow:inset 0 0 0 1.5px rgba(46,240,176,.5)}
.earn-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.earn-t b{font-size:14.5px;line-height:1.25}
.earn-t small{color:var(--muted);font-size:12.5px;line-height:1.3}
.earn-v{font-size:14px;color:var(--gold)}
.earn-go{color:var(--muted);font-size:22px;line-height:1}
.earn.ready{border-color:rgba(46,240,176,.55);background:linear-gradient(120deg,rgba(46,240,176,.12),rgba(255,255,255,.03))}
.earn.ready .earn-t small{color:var(--mint);font-weight:700}
.earn.done .earn-t small{color:var(--mint)}
.earn.done .earn-ic{opacity:.6}
.earn-grid+.holder-card{margin-top:18px}

/* Buy Koban */
.sh-need{display:flex;align-items:center;gap:14px;margin:0 0 16px;padding:12px 16px;border-radius:18px;background:linear-gradient(120deg,rgba(224,69,58,.22),rgba(224,69,58,.06));border:1px solid rgba(255,107,93,.6)}
.sh-need>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sh-need b{font-size:15px}.sh-need small{color:var(--muted);font-size:12.5px}
.sh-need-ic{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--vermilion);color:#fff;font:900 16px/1 "Inter",sans-serif}
.side-get .sh-grid.packs+.sh-hd{margin-top:8px}
.side-get .offer.big+.offer.big{margin-top:12px}
.mint-foot{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px;align-items:stretch}
.kb-about{display:flex;flex-direction:column;justify-content:space-between;gap:8px}
.kb-about .kb-why{margin:0;flex:1}
.kb-about .sh-lead{margin:0}

/* Koban prices the player can't cover yet: quiet, but still tappable (the server says how many are missing) */
#shop .btn.kb-short{background:rgba(255,255,255,.06);color:rgba(255,255,255,.75);border:1px solid rgba(242,195,91,.32);box-shadow:none}
#shop .btn.kb-short::after{display:none}
#shop .btn.kb-short .kb-coin{filter:saturate(.45) brightness(.85)}
#shop .btn.kb-short:hover{border-color:var(--gold);transform:translateY(-1px)}
#shop .btn.kb-short .was{color:rgba(255,255,255,.4)}

/* pack prices stack ($SHY over dollars), so six packs fit in a row on desktop and two on a phone without spilling */
.pack .btn{flex-direction:column;gap:0;padding:8px 10px;line-height:1.15;white-space:normal;min-width:0}
.pack .btn small.usd{margin:0;display:block}
.sh-grid.packs{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.sh-grid.packs .pack{min-width:0}
.hall-hd p{max-width:96ch}
.sh-sides{padding-top:12px}

@media (max-width:640px){
  .sh-sides{padding:0 14px 10px;gap:8px}
  .sh-side{gap:9px;padding:8px 10px;border-radius:15px}
  .ss-seal{width:30px;height:30px;font-size:16px;border-radius:8px}
  .ss-t b{font-size:15px}
  .ss-t small span{display:none}
  .ss-t em{font-size:9.5px}
  .sh-head .sh-brand b{font-size:19px;white-space:nowrap}
  .sh-grid.packs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sh-sides{padding-top:10px}
  .sh-hist{width:36px;height:36px}.sh-hist svg{width:17px;height:17px}
  .sh-head .sh-bal{gap:6px}
  .sh-head .sh-disc{display:none}
  .hall-hd{margin:2px 0 12px}.hall-hd h3{font-size:21px}.hall-hd p{font-size:13px}
  .earn-grid{grid-template-columns:1fr}
  .mint-foot{grid-template-columns:1fr}
  .sh-nudge,.sh-cross,.sh-need{padding:11px 12px;gap:10px}
  .sh-need{flex-wrap:wrap}.sh-need .btn{flex:1 1 100%}
}
@media (max-width:430px){
  .sh-head .sh-seal{display:none}
  .sh-head .sh-balb{padding:6px 8px 6px 11px}
  .sh-head .kb.big{font-size:18px}
}
@media (max-width:370px){
  .sh-head .sh-brand b{font-size:17px}
  .ss-t em{display:none}
}

/*MC 2026-10-10 the tab row scrolls sideways, which clipped the top of the selected tab's focus ring. A little room inside the row fixes it*/
.sh-tabs{padding-top:4px}