/* Calsdom app shell: loads after style.css and turns the page into a phone app.
   Phone-width column on every screen, bottom tab bar, flat cards, large titles, bottom sheets. */
:root{
  --bg:#F2F4FA;
  --surface:#fff;
  --line:rgba(14,26,58,.1);
  --frame:480px;
  --tabs-h:64px;
  --r-app:18px;
  --shadow:0 1px 2px rgba(14,26,58,.06),0 6px 16px -10px rgba(14,26,58,.25);
  --shadow-up:0 1px 2px rgba(14,26,58,.08),0 10px 24px -12px rgba(14,26,58,.3);
}

/* ---------- the phone frame ---------- */
html{background:#D9DEEE}
body{max-width:var(--frame);margin:0 auto;background:var(--bg);background-image:none;
  padding-bottom:calc(var(--tabs-h) + var(--safe) + 12px);
  font-size:1rem;box-shadow:0 0 0 1px rgba(14,26,58,.06),0 0 60px rgba(14,26,58,.12)}
body.no-wabar{padding-bottom:calc(var(--tabs-h) + var(--safe) + 12px)}
main{min-height:calc(100vh - 56px - var(--tabs-h))}
:root{--pad:16px}
h1,h2,h3,.card__title,.sc__t,.denom__amt,.care__num,.mrow b,.blank__t,.bigtitle,.sheet__title,.ticket b,.detail h2,.back h2,.menu__hd b,.sent h2,.soon h2,.counter h2,.care h2,.deck__hd h2,.pagehd h1,.denoms__hd h2,.pack h2,.serieshd h1,.plan em,.ticket__price,.cart__total b,.q,.others h2,.mtrail h3,.field__val{font-stretch:100%!important;font-weight:700!important;letter-spacing:-.025em!important}

/* ---------- top bar: a quiet app bar ---------- */
.bar{height:56px;padding:0 16px;background:rgba(242,244,250,.92);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);box-shadow:0 .5px 0 var(--line)}
.bar__back{display:grid;place-items:center;flex:none;width:44px;height:44px;margin:0 -2px 0 -10px;border-radius:50%;color:var(--ink)}
.bar__back svg{width:24px;height:24px;transform:scaleX(-1)}
.bar__back:active{background:rgba(14,26,58,.08)}
.bar{justify-content:flex-start}
.bar__brand{font-size:1.4rem}
.bar__brand .mk{width:26px;height:26px}

/* ---------- bottom tab bar ---------- */
.tabs{position:fixed;z-index:60;left:50%;bottom:0;transform:translateX(-50%);display:grid;grid-template-columns:repeat(5,1fr);align-items:end;width:min(100%,var(--frame));height:calc(var(--tabs-h) + var(--safe));padding:6px 6px var(--safe);background:rgba(255,255,255,.94);-webkit-backdrop-filter:saturate(1.4) blur(16px);backdrop-filter:saturate(1.4) blur(16px);box-shadow:0 -.5px 0 var(--line)}
.tabs__i,.tabs__go{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:52px;color:#6A7494;text-decoration:none;font:600 .7rem/1 var(--body);letter-spacing:0;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.tabs svg{width:24px;height:24px}
.tabs__i[aria-current="page"]{color:var(--ink)}
.tabs__i[aria-current="page"] svg{stroke-width:2.4}
.tabs__go{color:var(--ink)}
.tabs__go svg{width:46px;height:46px;margin-top:-18px;padding:11px;border-radius:50%;background:var(--ink);color:#fff;box-shadow:0 6px 14px -4px rgba(14,26,58,.5)}
.tabs__go span{margin-top:-1px}
.tabs__i:active,.tabs__go:active{opacity:.6}
.tabs .dot{top:4px;right:calc(50% - 20px);box-shadow:0 0 0 2px #fff}

/* ---------- the WhatsApp button floats above the tabs ---------- */
.wabar{left:auto;right:calc(max(0px,(100vw - var(--frame)) / 2) + 14px);bottom:calc(var(--tabs-h) + var(--safe) + 14px);width:56px;min-height:56px;height:56px;padding:0;border-radius:50%;font-size:0;gap:0;background:#25D366;color:#fff;box-shadow:0 8px 18px -6px rgba(14,26,58,.5);-webkit-mask:none;mask:none}
.wabar:hover{background:#20C05C}
.wabar .ico{width:30px;height:30px}
.cartpill{left:50%;right:auto;bottom:calc(var(--tabs-h) + var(--safe) + 14px);transform:translateX(-50%)}
.toast{bottom:calc(var(--tabs-h) + var(--safe) + 78px)}

/* ---------- tickets become plain app buttons ---------- */
.tk{min-height:50px;border-radius:14px;font-weight:700;-webkit-mask:none!important;mask:none!important}
.tk--amber{background:var(--ink);color:#fff}
.tk--amber:hover{background:#1B2A5C}
.tk--ink{background:var(--ink);color:#fff}
.tk--line{box-shadow:inset 0 0 0 1.5px var(--line);background:var(--surface);color:var(--ink)}
.tk--lg{min-height:54px}

/* ---------- chips ---------- */
.series{flex-wrap:nowrap;overflow-x:auto;padding:2px 16px 12px;-webkit-mask:linear-gradient(90deg,#000 calc(100% - 28px),#0000);mask:linear-gradient(90deg,#000 calc(100% - 28px),#0000)}
.tab,.kind,.opt,.base{border:0;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);text-decoration:none}
.tab{min-height:40px;border-radius:99px;font-weight:600}
.tab:hover{background:var(--surface)}
.tab[aria-pressed="true"],.tab.is-on{background:var(--ink);color:#fff;box-shadow:none}
.opt[aria-pressed="true"],.base[aria-pressed="true"]{background:var(--ink);color:#fff;box-shadow:none}

/* ---------- flat cards: no print, no tilt, no notches ---------- */
.card::before,.sc::before,.back::before,.denom::before,.pack::before,.counter__in::before,.care__card::before,.soon::before,.ticket::before,.detail::before,.micro,.perf,.sc__hd,.barcode{display:none!important}
.card,.sc,.back,.denom,.pack,.counter__in,.care__card,.soon,.ticket,.detail{border-radius:var(--r-app);box-shadow:var(--shadow);transform:none!important;animation:none}
.sc{background:var(--surface);color:var(--ink);--fine:var(--ink-2);overflow:hidden;transition:transform .15s}
.sc:hover{transform:none!important;box-shadow:var(--shadow)}
.sc:active{transform:scale(.98)!important}
.grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px;padding:0 16px}
.sc .win{margin:0;border-radius:0;aspect-ratio:4/3;box-shadow:none;background:#E3E7F2}
.win{margin:0;border-radius:14px}
.win__art{object-position:top}
.win__live{left:8px;top:8px;background:#fff;box-shadow:0 1px 3px rgba(14,26,58,.25)}
.sc__meta{padding:10px 12px 2px}
.sc__t{font-size:1.05rem;line-height:1.15}
.sc__meta p{font-size:.8rem;margin-top:3px}
.sc__stub{padding:2px 12px 10px}
.sc__stub a{font-weight:700;color:var(--ink)}
.sc__stub span{font:700 .78rem/1 var(--body);padding:5px 9px;border-radius:99px;background:var(--bg)}
.sc--blank{grid-column:1/-1!important;border:1.5px dashed rgba(14,26,58,.3);background:transparent;box-shadow:none;container-type:normal}
.sc--blank .blank{padding:20px 16px 8px}
.sc--blank .blank__t{font-size:1.25rem;max-width:none}
.sc--blank .sc__stub{padding:0 16px 14px}
.sc--blank .sc__stub span{background:none;padding:0;font-weight:700;font-size:.9rem}
.sc--blank .sc__hd{display:flex!important;padding:12px 16px 0;font-size:.8rem}

/* ---------- home: a start card, then the builds ---------- */
.hero{display:block;min-height:0!important;padding:14px 16px 4px}
.fan{display:none!important}
.card--house{max-width:none;transform:none!important;background:var(--surface);color:var(--ink)}
#houseCard{background:var(--ink);color:#fff;box-shadow:var(--shadow-up);overflow:hidden}
#houseCard .card__hd{padding:18px 18px 0}
#houseCard .holo{background:#fff}
#houseCard .card__no{display:none}
#houseCard .card__title{padding:14px 18px 0;font-size:clamp(2rem,9.5vw,2.6rem)!important;line-height:1.02}
#houseCard .win,#houseCard .card__row{display:none}
#houseCard .kinds{padding:18px 14px 0;gap:8px}
#houseCard .kind{min-height:54px;border-radius:14px;background:rgba(255,255,255,.12);color:#fff;box-shadow:none;font-weight:650}
#houseCard .kind:hover,#houseCard .kind:focus-visible{background:#fff;color:var(--ink)}
#houseCard .card__fine{padding:14px 18px 18px;color:rgba(255,255,255,.78)}
.deck{padding:26px 0 8px}
.deck__hd,.pagehd{padding:0 16px;margin-bottom:12px}
.deck__hd h2,.pagehd h1{max-width:none;font-size:1.7rem!important;line-height:1.1;text-wrap:balance}
.deck__hd p,.pagehd p{font-size:.95rem;margin-top:6px}
.pagehd{padding-top:18px}

/* ---------- sections as app cards ---------- */
.howto,.counter,.care{padding-left:16px;padding-right:16px}
.howto{padding-top:26px;padding-bottom:6px}
.back{background:var(--surface);color:var(--ink);padding:20px 18px}
.back h2{font-size:1.5rem!important;line-height:1.15;max-width:none;grid-row:auto}
.steps{margin:14px 0 18px}
.steps li{font-size:.98rem}
.steps li::before{border:0;background:var(--bg);width:40px;height:40px}
.steps li{grid-template-columns:40px minmax(0,1fr)}
.denoms{padding:20px 0 0}
.denoms__hd h2{font-size:1.5rem!important;line-height:1.15}
.denoms__row{grid-template-columns:1fr!important}
.denom{padding:18px}
.denom__amt{font-size:2.8rem!important;line-height:.9}
.denom.st-peri{background:var(--surface);color:var(--ink)}
.denom.st-amber{background:var(--surface);color:var(--ink)}
.counter{margin-top:20px}
.counter__in{padding:22px 18px}
.counter h2{font-size:1.5rem!important;line-height:1.15}
.stamp--soon{top:-12px;right:26px;border-width:2px;font-size:.7rem}
.care{padding-top:26px;padding-bottom:18px}
.care__card{display:block!important;background:var(--surface);color:var(--ink);padding:20px 18px}
.care h2{font-size:1.2rem!important}
.care__num{font-size:1.9rem!important;margin-top:6px}
.care__acts{margin:14px 0 8px}
.micro--care{display:none!important}

/* ---------- build detail, order, trades, shop ---------- */
.cardview{display:block;padding:12px 16px 20px}
.cardview > *{margin-bottom:14px}
.card--big{background:var(--surface);color:var(--ink)}
.card--big .card__no,.card--big .card__hd{display:none}
.card--big .bigtitle{padding:14px 16px 0;font-size:1.7rem!important;line-height:1.1}
.card--big .win,.card--big .win--locked{margin:12px 12px 0;aspect-ratio:4/3;max-height:none;overflow:hidden;background:#E3E7F2}
.card--big .win__art,.card--big .win--locked .win__art{height:100%;object-fit:cover;object-position:top}
.detail{position:static!important;background:var(--surface);color:var(--ink)}
.packs{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px;padding:0 16px}
.pack{min-height:140px;transform:none!important;padding:16px 14px}
.pack h2{font-size:1.2rem!important;line-height:1.1}
.tickets{grid-template-columns:repeat(2,minmax(0,1fr))!important;padding:0 16px;gap:12px}
.opts{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.bases{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.card--house ~ *{}
.field{border-top:1px solid var(--line)}
.buildwrap{padding-left:16px;padding-right:16px}
.serieshd{padding:0 16px}

#buildCard{background:var(--surface);color:var(--ink);--fine:var(--ink-2)}
#buildCard .card__title,#buildCard h2{color:var(--ink)}
.chat__ctx,.chat__note,.chat__off,.cart__row{border:1.5px solid var(--line)}

/* ---------- menu and sheets stay inside the phone ---------- */
.menu__panel{right:max(0px,calc((100% - var(--frame)) / 2));width:min(var(--frame),100%);background:var(--bg);box-shadow:none;transform:translateY(100%)}
.menu.open .menu__panel{transform:none}
.menu__scrim{background:rgba(14,26,58,.36)}
.menu__hd b{font-size:1.5rem!important}
.msearch{background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);border-radius:14px}
.mrow{margin-top:8px;min-height:64px;padding:12px 16px;border-radius:14px;background:var(--surface);color:var(--ink);box-shadow:none;--fine:var(--ink-2)}
.mrow:first-child{margin-top:0}
.mrow:last-child{border-radius:14px;padding-bottom:12px}
.mrow:hover,.mrow:focus-visible{transform:none;background:#fff}
.mrow b{font-size:1.1rem!important;line-height:1.2}
.xbtn{box-shadow:none;background:var(--surface)}
.sheet__panel{max-width:var(--frame);background:var(--surface);border-radius:22px 22px 0 0}
.sheet__title{font-size:1.4rem!important;line-height:1.15;margin-bottom:8px}
.chat__input,.chat__name{box-shadow:inset 0 0 0 1px var(--line);background:var(--bg)}
.chat__send{border-radius:50%}
.msg--v{background:var(--ink);color:#fff}
.msg--a{background:var(--bg)}
.fld input,.fld textarea{border-bottom-width:1.5px}

@media (min-width:1px){
  /* wide screens keep the phone column: undo the desktop layouts from style.css */
  .back{display:block}
  .care__card{grid-template-columns:none}
  .counter__in{padding:22px 18px}
  .cardview{grid-template-columns:none;padding-top:12px}
  .sheet__panel{bottom:0;border-radius:22px 22px 0 0}
  .series{padding-left:16px}
}
@media (max-width:359px){
  .grid{gap:10px}
  .tabs__i span,.tabs__go span{font-size:.64rem}
}
@media (prefers-reduced-motion:reduce){.sc:active{transform:none!important}}