/* Calsdom v11: a rack of prepaid scratch vouchers. Card stock, silver foil, perforations, stubs. */
:root{
  --counter:#E4E8F4;
  --well:#D6DCEB;
  --ink:#0E1A3A;
  --ink-2:#3A4668;
  --peri:#8DA2FF;
  --amber:#FFC247;
  --navy:#1B2A5C;
  --white:#F7F6F2;
  --coral:#FF6B57;
  --display:"Bricolage Grotesque",system-ui,sans-serif;
  --body:"Bricolage Grotesque",system-ui,sans-serif;
  --mono:"Martian Mono",ui-monospace,"Cascadia Mono",monospace;
  --r-card:22px;
  --r-win:12px;
  --r-tk:14px;
  --shadow:0 1px 0 rgba(14,26,58,.06),0 14px 24px -16px rgba(14,26,58,.42);
  --shadow-up:0 2px 0 rgba(14,26,58,.06),0 26px 40px -20px rgba(14,26,58,.5);
  --ease:cubic-bezier(.2,.8,.2,1);
  --pad:clamp(16px,4.5vw,40px);
  --max:1200px;
  --safe:env(safe-area-inset-bottom,0px);
}

/* ---------- base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--counter);color:var(--ink);-webkit-text-size-adjust:100%;scroll-behavior:smooth;scrollbar-color:#8A94B4 var(--counter);scrollbar-width:thin}
body{min-height:100vh;font-family:var(--body);font-weight:450;font-size:1.0625rem;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;padding-bottom:calc(84px + var(--safe));
  background:var(--counter) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .05 0 0 0 0 .1 0 0 0 0 .23 0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
body.no-wabar{padding-bottom:var(--safe)}
::selection{background:var(--amber);color:var(--ink)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#8A94B4;border-radius:10px;border:3px solid var(--counter)}
::-webkit-scrollbar-track{background:var(--counter)}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:8px}
a{color:inherit;text-underline-offset:4px;text-decoration-thickness:2px}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea{font:inherit;color:inherit;caret-color:var(--ink)}
img{display:block;max-width:100%}
svg{display:block}
.defs{position:absolute}
[hidden]{display:none!important}
.skip{position:absolute;left:-9999px;top:8px;z-index:300;padding:10px 14px;border-radius:10px;background:var(--ink);color:#fff;font-weight:700}
.skip:focus{left:12px}
.nojs{padding:20px var(--pad);font-size:1rem}
.ico{width:20px;height:20px;flex:none}

/* display voice: Bricolage pulled to its narrowest width */
.card__title,.deck__hd h2,.pagehd h1,.back h2,.denoms__hd h2,.counter h2,.care h2,.care__num,.sc__t,.denom__amt,.pack h2,.serieshd h1,.bigtitle,.plan em,.field__val,.mrow b,.menu__hd b,.sheet__title,.soon h2,.mtrail h3,.sent h2,.ticket b,.q,.detail h2,.others h2,.ticket__price,.cart__total b,.blank__t{font-family:var(--display);font-stretch:75%;font-weight:800;letter-spacing:-.005em}

/* ---------- top bar ---------- */
.bar{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:12px;height:62px;padding:0 max(var(--pad),calc((100% - var(--max)) / 2 + var(--pad)));background:var(--counter);box-shadow:0 1px 0 rgba(14,26,58,.1)}
.bar__brand{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--ink);text-decoration:none;font-family:var(--display);font-weight:700;font-size:1.55rem;letter-spacing:-.035em;line-height:1}
.bar__brand .mk{width:28px;height:28px;--door:var(--peri)}
.bar__right{display:flex;align-items:center;gap:8px}
.bar .bar__build{display:none}

/* ---------- tickets: every button is a stub torn off a voucher ---------- */
.tk{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:48px;padding:0 1.2rem;border-radius:var(--r-tk);font-weight:750;font-size:1rem;letter-spacing:-.01em;line-height:1.1;text-decoration:none;white-space:nowrap;transition:transform .14s var(--ease),background .14s,color .14s}
.tk:hover{transform:translateY(-1px)}
.tk:active{transform:translateY(1px)}
.tk--amber,.tk--ink{-webkit-mask:radial-gradient(circle 6px at 0 50%,#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle 6px at 100% 50%,#0000 97%,#000) right/51% 100% no-repeat;mask:radial-gradient(circle 6px at 0 50%,#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle 6px at 100% 50%,#0000 97%,#000) right/51% 100% no-repeat}
.tk--amber{background:var(--amber);color:var(--ink)}
.tk--amber:hover{background:#FFCD62}
.tk--ink{background:var(--ink);color:#F2F4FB}
.tk--ink:hover{background:#1B2A5C}
.tk--line{background:transparent;color:inherit;box-shadow:inset 0 0 0 2px currentColor}
.tk--line:hover{background:rgba(14,26,58,.07)}
.tk--lg{min-height:56px;padding:0 1.5rem;font-size:1.08rem}
.tk--block{display:flex;width:100%}
.tk[aria-disabled="true"]{opacity:.45;pointer-events:none}
.dot{position:absolute;top:-4px;right:-4px;width:13px;height:13px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 2.5px var(--counter)}
.lnk{display:inline-flex;align-items:center;gap:6px;min-height:40px;font-weight:750;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}

/* ---------- card stock (each card: two inks plus foil) ---------- */
.st-peri{--stock:var(--peri);--stock-ink:var(--ink);--g1:rgba(14,26,58,.12);--g2:rgba(255,255,255,.3);--fine:rgba(14,26,58,.84)}
.st-amber{--stock:var(--amber);--stock-ink:var(--ink);--g1:rgba(14,26,58,.1);--g2:rgba(255,255,255,.38);--fine:rgba(14,26,58,.84)}
.st-navy{--stock:var(--navy);--stock-ink:#EEF1FB;--g1:rgba(141,162,255,.18);--g2:rgba(255,255,255,.07);--fine:rgba(238,241,251,.84)}
.st-white{--stock:var(--white);--stock-ink:var(--ink);--g1:rgba(14,26,58,.07);--g2:rgba(141,162,255,.2);--fine:var(--ink-2)}
.card,.sc,.back,.denom,.pack,.counter__in,.care__card,.soon,.ticket,.detail{position:relative;isolation:isolate;background:var(--stock);color:var(--stock-ink)}
.card::before,.sc::before,.back::before,.denom::before,.pack::before,.counter__in::before,.care__card::before,.soon::before,.ticket::before,.detail::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  background-image:repeating-radial-gradient(circle at 16% 18%,var(--g1) 0 1px,transparent 1px 7px),repeating-radial-gradient(circle at 86% 82%,var(--g2) 0 1px,transparent 1px 7px)}
.card{border-radius:var(--r-card);box-shadow:var(--shadow-up);overflow:hidden}
.card__hd{display:flex;align-items:center;gap:8px;padding:16px 18px 0}
.holo{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;background:conic-gradient(from 200deg,#FFD7F1,#C8F2FF,#FFF0B5,#D4CCFF,#FFD7F1);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7),0 1px 2px rgba(14,26,58,.25)}
.holo svg{width:18px;height:18px;color:var(--ink);--door:#fff}
.card__brand{font-weight:700;font-size:1.06rem;letter-spacing:-.035em;line-height:1}
.card__no{margin-left:auto;font:600 .7rem/1.3 var(--mono);letter-spacing:.1em}
.micro{display:block;height:9px;margin:8px 18px 0;background:currentColor;opacity:.5;-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27300%27%20height%3D%279%27%3E%3Ctext%20x%3D%270%27%20y%3D%277%27%20font-family%3D%27monospace%27%20font-size%3D%276.4%27%20font-weight%3D%27700%27%20textLength%3D%27300%27%20lengthAdjust%3D%27spacing%27%3ECALSDOM%20%C2%B7%20CALSDOM%20%C2%B7%20CALSDOM%20%C2%B7%20CALSDOM%20%C2%B7%20CALSDOM%20%C2%B7%20CALSDOM%20%C2%B7%C2%A0%3C/text%3E%3C/svg%3E") repeat-x left center/300px 9px;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27300%27%20height%3D%279%27%3E%3Ctext%20x%3D%270%27%20y%3D%277%27%20font-family%3D%27monospace%27%20font-size%3D%276.4%27%20font-weight%3D%27700%27%20textLength%3D%27300%27%20lengthAdjust%3D%27spacing%27%3ECALSDOM%20%C2%B7%20CALSDOM%20%C2%B7%20CALSDOM%20%C2%B7%20CALSDOM%20%C2%B7%20CALSDOM%20%C2%B7%20CALSDOM%20%C2%B7%C2%A0%3C/text%3E%3C/svg%3E") repeat-x left center/300px 9px}
.card__title{padding:10px 18px 0;font-size:clamp(2.6rem,11.5vw,3.9rem);line-height:.88;text-wrap:balance}
.card__row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 18px 0}
.serial{font:600 .72rem/1.3 var(--mono);letter-spacing:.06em}
.card__fine{padding:10px 18px 18px;font-size:.9rem;line-height:1.35;color:var(--fine)}

/* perforation with punched notches */
.perf{position:relative;height:24px;margin-top:6px;background:radial-gradient(circle 11px at 0 50%,var(--counter) 97%,transparent),radial-gradient(circle 11px at 100% 50%,var(--counter) 97%,transparent)}
.perf::before{content:"";position:absolute;left:16px;right:16px;top:50%;border-top:2.5px dashed currentColor;opacity:.42}

/* the scratch window: a real build underneath, foil on top */
.win{position:relative;overflow:hidden;margin:14px 18px 0;border-radius:var(--r-win);background:#C9CFDD;aspect-ratio:4/5;box-shadow:inset 0 0 0 1px rgba(14,26,58,.25)}
.win--hero{aspect-ratio:5/4}
.win__art{width:100%;height:100%;object-fit:cover;object-position:top}
.win__cap{position:absolute;left:10px;right:10px;bottom:10px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:10px;background:rgba(14,26,58,.9);color:#fff;text-decoration:none;opacity:0;transform:translateY(8px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.win__cap b{font-weight:750;font-size:1rem;line-height:1.15}
.win__cap span{flex:none;display:inline-flex;align-items:center;gap:4px;font:600 .72rem/1.3 var(--mono);letter-spacing:.04em}
.win.is-open .win__cap{opacity:1;transform:none}
.win__live{position:absolute;left:8px;top:8px;padding:4px 8px;border-radius:7px;background:rgba(247,246,242,.95);color:var(--ink);font:700 .69rem/1.3 var(--mono);letter-spacing:.06em}
canvas.foil{position:absolute;inset:0;width:100%;height:100%;touch-action:pan-y;cursor:grab;border-radius:inherit}
canvas.foil:active{cursor:grabbing}
canvas.foil.gone{opacity:0;transition:opacity .45s ease}
.hint{position:absolute;left:50%;top:72%;z-index:2;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:99px;background:rgba(14,26,58,.86);color:#fff;font-weight:700;font-size:.82rem;white-space:nowrap;pointer-events:none;transform:translateX(-50%);animation:rub 1.8s ease-in-out 3}
.hint svg{width:18px;height:18px}
.win.is-started .hint,.win.is-open .hint{display:none}
@keyframes rub{0%,100%{transform:translateX(-62%)}50%{transform:translateX(-38%)}}
.flakes{position:fixed;inset:0;width:100vw;height:100vh;z-index:70;pointer-events:none}

/* ---------- home: the house build card ---------- */
.hero{display:grid;gap:22px;max-width:var(--max);margin:0 auto;padding:14px var(--pad) 8px}
.card--house{justify-self:center;width:100%;max-width:560px;transform:rotate(-1deg);animation:settle .7s var(--ease) both}
@keyframes settle{from{transform:translateY(18px) rotate(-4deg)}to{transform:rotate(-1deg)}}
.kinds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:2px 18px 0}
.kind{display:flex;align-items:center;justify-content:center;min-height:52px;padding:6px 8px;border-radius:12px;border:2px dashed currentColor;text-align:center;text-decoration:none;font-weight:750;font-size:.94rem;line-height:1.1;transition:background .15s,color .15s,border-color .15s}
.kind:hover,.kind:focus-visible{background:var(--ink);color:var(--stock);border-style:solid;border-color:var(--ink)}
.fan{display:none}

/* ---------- the deck of real builds ---------- */
.deck{padding:56px 0 20px}
.deck__hd,.pagehd{max-width:var(--max);margin:0 auto 16px;padding:0 var(--pad)}
.pagehd{padding-top:30px}
.deck__hd h2,.pagehd h1{max-width:15ch;font-size:clamp(2.3rem,8.4vw,4.3rem);line-height:.9;text-wrap:balance}
.deck__hd p,.pagehd p{max-width:46ch;margin-top:12px;color:var(--ink-2)}
.series{display:flex;gap:8px;max-width:var(--max);margin:0 auto;padding:4px 32px 18px var(--pad);overflow-x:auto;scrollbar-width:none;
  -webkit-mask:linear-gradient(90deg,#000 calc(100% - 28px),#0000);mask:linear-gradient(90deg,#000 calc(100% - 28px),#0000)}
.series::-webkit-scrollbar{display:none}
.tab{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 15px;border-radius:12px;border:2px dashed var(--ink);color:var(--ink);text-decoration:none;white-space:nowrap;font-weight:700;font-size:.93rem;transition:background .15s,color .15s}
.tab:hover{background:rgba(14,26,58,.07)}
.tab[aria-pressed="true"],.tab.is-on{background:var(--ink);color:var(--counter);border-style:solid}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px;max-width:var(--max);margin:0 auto;padding:0 var(--pad)}

.sc{display:flex;flex-direction:column;min-width:0;border-radius:18px;box-shadow:var(--shadow);overflow:hidden;transform:rotate(var(--r,0deg));transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.sc:hover{transform:rotate(0deg) translateY(-3px);box-shadow:var(--shadow-up)}
.sc__hd{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:10px 12px 0;font-weight:700;font-size:.84rem;letter-spacing:-.03em;line-height:1}
.sc__hd span{flex:none;white-space:nowrap;font:600 .69rem/1.3 var(--mono);letter-spacing:0}
.sc .win{margin:8px 10px 0}
.sc__meta{padding:10px 12px 0}
.sc__t{font-size:clamp(1.25rem,5vw,1.6rem);line-height:.92}
.sc__t a{text-decoration:none}
.sc__t a:hover{text-decoration:underline}
.sc__meta p{margin-top:5px;font-size:.82rem;line-height:1.3;color:var(--fine)}
.sc .perf{height:20px;margin-top:4px;background:radial-gradient(circle 9px at 0 50%,var(--counter) 97%,transparent),radial-gradient(circle 9px at 100% 50%,var(--counter) 97%,transparent)}
.sc__stub{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:0 12px 12px;font-weight:750;font-size:.84rem}
.sc__stub a{display:inline-flex;align-items:center;gap:4px;min-height:40px;white-space:nowrap;text-decoration:none}
.sc__stub a:hover{text-decoration:underline}
.sc__stub a .ico{width:16px;height:16px}
.sc__stub span{white-space:nowrap;font:600 .69rem/1.3 var(--mono);letter-spacing:0}
.sc__price i{font-style:normal}
/* the blank card at the end of every deck: not printed yet, so it stays dashed */
.sc--blank{--r:0deg;container-type:inline-size;border:2.5px dashed rgba(14,26,58,.5);background:transparent;box-shadow:none;text-decoration:none}
.sc--blank:hover{border-style:solid;border-color:var(--ink);background:rgba(14,26,58,.04);box-shadow:none}
.sc--blank:nth-child(2n+1){grid-column:span 2}
.blank{flex:1;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:22px 12px 10px}
.blank__t{max-width:17ch;font-size:1.5rem;line-height:.92;text-wrap:balance}
.blank p{font-size:.92rem;line-height:1.35;color:var(--ink-2)}
.sc--blank .sc__stub span{display:inline-flex;align-items:center;gap:4px;min-height:40px;font:inherit}
.sc--blank .sc__stub .ico{width:16px;height:16px}
@container (min-width:400px){
  .blank{padding:30px 26px 14px}
  .blank__t{font-size:2.7rem}
  .blank p{font-size:1.02rem}
}

/* ---------- back of the card: how it works ---------- */
.howto{max-width:var(--max);margin:0 auto;padding:34px var(--pad)}
.back{border-radius:var(--r-card);padding:26px 22px;box-shadow:var(--shadow)}
.back h2{max-width:14ch;font-size:clamp(2rem,7.4vw,3.3rem);line-height:.92}
.steps{counter-reset:s;display:grid;gap:14px;margin:20px 0 24px}
.steps li{counter-increment:s;display:grid;grid-template-columns:46px minmax(0,1fr);align-items:center;gap:14px;font-size:1.05rem;line-height:1.4}
.steps li::before{content:counter(s);display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:2px dashed currentColor;font:700 1rem/1 var(--mono)}
.steps b{font-weight:750}

/* ---------- denominations: buy a build as it is ---------- */
.denoms{padding:22px 0}
.denoms__hd{max-width:var(--max);margin:0 auto 16px;padding:0 var(--pad)}
.denoms__hd h2{font-size:clamp(2rem,7.4vw,3.3rem);line-height:.92}
.denoms__hd p{max-width:46ch;margin-top:10px;color:var(--ink-2)}
.denoms__row{display:grid;gap:14px;max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.denom{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:4px 16px;padding:20px 20px 16px;border-radius:18px;box-shadow:var(--shadow);overflow:hidden}
.denom__amt{grid-row:span 2;font-size:clamp(3.6rem,15vw,5.2rem);line-height:.82}
.denom b{align-self:end;font-weight:750;font-size:1.12rem;line-height:1.15}
.denom p{align-self:start;font-size:.92rem;line-height:1.35;color:var(--fine)}
.barcode{grid-column:1/-1;height:26px;margin-top:12px;opacity:.75;background:repeating-linear-gradient(90deg,currentColor 0 2px,transparent 2px 4px,currentColor 4px 5px,transparent 5px 8px,currentColor 8px 11px,transparent 11px 13px,currentColor 13px 14px,transparent 14px 17px)}

/* ---------- gadgets behind the counter ---------- */
.counter{position:relative;max-width:var(--max);margin:34px auto 0;padding:0 var(--pad)}
.counter__in{border-radius:var(--r-card);padding:28px 22px 24px;box-shadow:var(--shadow-up);overflow:hidden}
.counter h2{max-width:12ch;font-size:clamp(2rem,7.4vw,3.3rem);line-height:.92}
.counter p{max-width:44ch;margin:12px 0 18px;color:var(--fine)}
.stamp{display:inline-grid;place-items:center;padding:7px 14px;border:3px dashed currentColor;border-radius:10px;font:700 .8rem/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;transform:rotate(-6deg)}
.stamp--soon{position:absolute;top:-14px;right:calc(var(--pad) + 14px);z-index:2;background:var(--counter);color:var(--ink)}
.stamp--sent{color:var(--coral);border-color:var(--coral);font-size:1.5rem;padding:10px 20px;border-width:4px;background:rgba(255,107,87,.08);transform:rotate(-8deg);animation:slam .32s cubic-bezier(.16,1,.3,1) both}
@keyframes slam{from{opacity:0;transform:scale(1.9) rotate(-22deg)}to{opacity:1;transform:scale(1) rotate(-8deg)}}

/* ---------- customer care: the back strip of every voucher ---------- */
.care{max-width:var(--max);margin:0 auto;padding:44px var(--pad) 28px}
.care__card{border-radius:var(--r-card);padding:26px 22px 20px;box-shadow:var(--shadow);overflow:hidden}
.care h2{font-size:2rem;line-height:1}
.care__num{display:block;margin-top:12px;font-size:clamp(2.2rem,10.5vw,3.8rem);line-height:.95;text-decoration:none;overflow-wrap:anywhere}
.care__num:hover{text-decoration:underline}
.care__card > p{margin-top:8px;color:var(--fine)}
.care__acts{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 12px}
.care__links{display:flex;flex-wrap:wrap;gap:4px 18px}
.care__links a{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:700;text-decoration:none}
.care__links a:hover{text-decoration:underline}
.care__links svg{width:20px;height:20px}
.micro--care{margin:14px 0 0}
.care__fine{margin-top:6px;font:500 .72rem/1.4 var(--mono);color:var(--fine)}

/* ---------- the level WhatsApp bar (it never tilts) ---------- */
.wabar{position:fixed;z-index:50;left:12px;right:12px;bottom:calc(12px + var(--safe));display:flex;align-items:center;justify-content:center;gap:10px;min-height:58px;padding:0 18px;border-radius:16px;background:var(--amber);color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink);font-weight:800;font-size:1.06rem;letter-spacing:-.01em;text-decoration:none;transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;
  -webkit-mask:radial-gradient(circle 7px at 0 50%,#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle 7px at 100% 50%,#0000 97%,#000) right/51% 100% no-repeat;mask:radial-gradient(circle 7px at 0 50%,#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle 7px at 100% 50%,#0000 97%,#000) right/51% 100% no-repeat}
.wabar .ico{width:24px;height:24px}
.wabar:hover{background:#FFCD62}
body.no-wabar .wabar{display:none}
body.care-in .wabar{opacity:0;transform:translateY(14px);visibility:hidden;pointer-events:none}
.cartpill{position:fixed;z-index:51;left:50%;bottom:calc(82px + var(--safe));transform:translateX(-50%);display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:0 18px;border-radius:14px;background:var(--ink);color:#F2F4FB;font-weight:750;box-shadow:var(--shadow-up)}

/* ---------- pages: decks, trades, one build ---------- */
.empty{max-width:var(--max);margin:6px auto 0;padding:0 var(--pad)}
.empty p{margin-bottom:14px;color:var(--ink-2)}
.packs{display:grid;gap:14px;max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.pack{display:flex;flex-direction:column;gap:8px;min-height:200px;padding:20px 18px 16px;border-radius:18px;box-shadow:var(--shadow);text-decoration:none;overflow:hidden;transform:rotate(var(--r,0deg));transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.pack:hover{transform:rotate(0deg) translateY(-3px);box-shadow:var(--shadow-up)}
.pack h2{font-size:clamp(2.1rem,8vw,2.8rem);line-height:.9}
.pack p{max-width:34ch;font-size:.95rem;line-height:1.35;color:var(--fine)}
.pack__n{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:10px;border-top:2px dashed currentColor;font:600 .72rem/1.3 var(--mono);letter-spacing:.06em}
.serieshd{max-width:var(--max);margin:22px auto 26px;padding:0 var(--pad)}
.serieshd .card{padding-bottom:20px}
.serieshd h1{padding:8px 18px 0;font-size:clamp(2.8rem,12vw,5rem);line-height:.86}
.serieshd .lead{max-width:44ch;padding:12px 18px 0;font-size:1.08rem;line-height:1.4}
.serieshd .desc{max-width:52ch;padding:8px 18px 0;color:var(--fine)}
.acts{display:flex;flex-wrap:wrap;gap:10px;padding:16px 18px 0}
.others{max-width:var(--max);margin:34px auto 0;padding:0 var(--pad)}
.others h2{margin-bottom:12px;font-size:1.8rem;line-height:1}
.others .series{padding-left:0;padding-right:0;flex-wrap:wrap}

.cardview{display:grid;gap:22px;max-width:var(--max);margin:0 auto;padding:18px var(--pad) 28px}
.card--big{transform:rotate(-.6deg);animation:settle .6s var(--ease) both}
.card--big .win{aspect-ratio:auto;max-height:70vh;overflow-y:auto;overscroll-behavior:contain;background:#11182E}
.card--big .win__art{height:auto;object-fit:initial}
.card--big .win--locked{aspect-ratio:4/5;max-height:none;overflow:hidden}
.card--big .win--locked .win__art{height:100%;object-fit:cover}
.bigtitle{padding:10px 18px 0;font-size:clamp(2.6rem,10.5vw,4.6rem);line-height:.88;text-wrap:balance}
.tags{display:flex;flex-wrap:wrap;gap:8px;padding:12px 18px 18px}
.tags .tab{min-height:38px;font-size:.86rem;border-color:currentColor;color:inherit}
.detail{border-radius:var(--r-card);padding:24px 20px 20px;box-shadow:var(--shadow)}
.detail h2{font-size:1.9rem;line-height:1;margin-bottom:10px}
.detail h2 + p{color:var(--fine)}
.uses{display:grid;gap:10px;margin:14px 0 22px}
.uses li{position:relative;padding-left:26px;line-height:1.4}
.uses li::before{content:"";position:absolute;left:2px;top:.42em;width:12px;height:12px;border-radius:3px;border:2px dashed currentColor}
.plans{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0 18px}
.plan{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:14px;border-radius:14px;border:2px dashed currentColor;text-align:left;transition:background .15s,color .15s}
.plan em{font-style:normal;font-size:2.4rem;line-height:.85}
.plan b{font-weight:750;font-size:.98rem;line-height:1.15}
.plan small{font-size:.8rem;line-height:1.3;opacity:.85}
.plan[aria-checked="true"]{background:var(--ink);color:var(--white);border-style:solid;border-color:var(--ink)}
.stack{display:grid;gap:10px}
.prevnext{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:18px;padding-top:14px;border-top:2px dashed rgba(14,26,58,.3)}

/* ---------- your build card: the custom order ---------- */
.buildwrap{max-width:640px;margin:0 auto;padding:16px var(--pad) 40px}
.card--form{transform:rotate(-.6deg)}
.card--form .card__title{font-size:clamp(2.4rem,10vw,3.4rem)}
.prog{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;padding:14px 18px 0}
.prog i{height:6px;border-radius:3px;background:rgba(14,26,58,.22)}
.prog i.on{background:var(--ink)}
.fields{margin:12px 18px 0}
.field{padding:12px 0;border-top:2px dashed rgba(14,26,58,.38)}
.field__top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.field__lbl{flex:none;font:600 .72rem/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.field__val{min-width:0;font-size:1.3rem;line-height:1;text-align:right;overflow-wrap:anywhere}
.field__val--empty{opacity:.55;font-family:var(--body);font-stretch:100%;font-weight:600;font-size:.92rem}
.field__go{min-height:32px;font-weight:700;font-size:.82rem;text-decoration:underline;text-underline-offset:3px}
.q{margin-top:6px;font-size:1.65rem;line-height:1}
.hint2{margin-top:4px;font-size:.9rem;color:var(--fine)}
.opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}
.opt{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;min-height:58px;padding:10px 12px;border-radius:12px;border:2px dashed currentColor;text-align:left;transition:background .15s,color .15s}
.opt b{font-weight:750;font-size:.98rem;line-height:1.15}
.opt small{font-size:.78rem;line-height:1.25;opacity:.85}
.opt[aria-pressed="true"]{background:var(--ink);color:var(--peri);border-style:solid;border-color:var(--ink)}
.opts--chips{display:flex;flex-wrap:wrap}
.opts--chips .opt{min-height:44px;padding:8px 14px}
.bases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}
.base{display:flex;flex-direction:column;gap:6px;padding:6px;border-radius:12px;border:2px dashed currentColor;text-align:left;transition:background .15s,color .15s}
.base img,.base .blank{width:100%;aspect-ratio:4/5;border-radius:8px;object-fit:cover;object-position:top}
.base .blank{display:grid;place-items:center;padding:6px;border:2px dashed currentColor;font:700 .7rem/1.3 var(--mono);text-align:center}
.base b{font-size:.78rem;font-weight:700;line-height:1.15}
.base[aria-pressed="true"]{background:var(--ink);color:var(--peri);border-style:solid;border-color:var(--ink)}
.subq{margin-top:16px;font-weight:750}
.fld{display:grid;gap:2px;margin-top:14px}
.fld span{font:600 .72rem/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.fld input,.fld textarea{width:100%;padding:10px 2px;border:0;border-bottom:2.5px solid var(--ink);border-radius:0;background:transparent;font-size:1.1rem;font-weight:600;resize:vertical}
.fld input::placeholder,.fld textarea::placeholder{color:rgba(14,26,58,.58);font-weight:500}
.fld input:focus,.fld textarea:focus{outline:none;box-shadow:0 2.5px 0 var(--ink)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.err{margin:12px 18px 0;padding:10px 12px;border-radius:10px;background:var(--ink);color:#fff;font-weight:600}
.buildnav{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 18px 18px}
.sent{display:grid;justify-items:start;gap:12px;padding:16px 18px 20px}
.sent h2{font-size:clamp(2.4rem,10vw,3.4rem);line-height:.9}
.sent p{color:var(--fine)}
.sent .ref{font:700 1rem/1 var(--mono);letter-spacing:.08em}
.sent .stack{width:100%}

/* ---------- gadgets ---------- */
.soon{max-width:calc(var(--max) - 2 * var(--pad));margin:0 var(--pad) 22px;padding:30px 22px 24px;border-radius:var(--r-card);box-shadow:var(--shadow-up)}
.soon h2{max-width:14ch;font-size:clamp(2rem,7.4vw,3rem);line-height:.92}
.soon p{max-width:44ch;margin:12px 0 18px;color:var(--fine)}
.soon .stamp--soon{top:-14px;right:18px}
.tickets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px;max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.ticket{display:flex;flex-direction:column;border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.ticket__img{position:relative;display:grid;place-items:center;aspect-ratio:1;margin:8px 8px 0;border-radius:10px;overflow:hidden;background:var(--well)}
.ticket__img img{width:100%;height:100%;object-fit:cover}
.ticket__img svg{width:40px;height:40px;opacity:.5}
.ticket__badge{position:absolute;left:8px;top:8px;padding:4px 8px;border-radius:7px;background:var(--ink);color:#fff;font:700 .69rem/1.3 var(--mono);letter-spacing:.06em}
.ticket__body{display:flex;flex-direction:column;gap:4px;flex:1;padding:10px 12px 12px}
.ticket__group{font:600 .7rem/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.ticket b{font-size:1.25rem;line-height:.95}
.ticket p{font-size:.84rem;line-height:1.35;color:var(--fine)}
.ticket__row{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:8px;border-top:2px dashed rgba(14,26,58,.3)}
.ticket__price{font-size:1.4rem;line-height:1}
.ticket .tk{min-height:42px;padding:0 .9rem;font-size:.9rem}

/* ---------- menu: the rack ---------- */
.menu{position:fixed;inset:0;z-index:90;visibility:hidden;transition:visibility 0s .38s}
.menu.open{visibility:visible;transition:none}
.menu__scrim{position:absolute;inset:0;background:rgba(14,26,58,.42);opacity:0;transition:opacity .25s}
.menu.open .menu__scrim{opacity:1}
.menu__panel{position:absolute;top:0;right:0;bottom:0;width:min(440px,100%);overflow-y:auto;overscroll-behavior:contain;padding:12px 16px calc(28px + var(--safe));background:var(--counter);box-shadow:-24px 0 40px -24px rgba(14,26,58,.45);transform:translateX(104%);transition:transform .38s var(--ease)}
.menu.open .menu__panel{transform:none}
.menu__hd{display:flex;align-items:center;justify-content:space-between;height:50px}
.menu__hd b{font-size:2rem;line-height:1}
.xbtn{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;box-shadow:inset 0 0 0 2px var(--ink);color:var(--ink)}
.xbtn svg{width:20px;height:20px}
.xbtn:hover{background:rgba(14,26,58,.07)}
.msearch{display:flex;align-items:center;gap:10px;height:52px;margin:12px 0 16px;padding:0 14px;border-radius:14px;background:var(--white);box-shadow:inset 0 0 0 2px var(--ink)}
.msearch svg{width:20px;height:20px;flex:none}
.msearch input{flex:1;min-width:0;height:100%;border:0;background:none;font-size:1rem;font-weight:600}
.msearch input:focus{outline:none}
.msearch:focus-within{box-shadow:inset 0 0 0 3px var(--ink)}
.mresults{display:grid;gap:6px;margin:-6px 0 16px}
.mresults a{display:flex;flex-direction:column;gap:2px;padding:10px 14px;border-radius:12px;background:var(--white);text-decoration:none}
.mresults a:hover,.mresults a:focus-visible{background:#fff}
.mresults b{font-weight:750}
.mresults small{font-size:.82rem;color:var(--ink-2)}
.mresults .none{padding:10px 2px;color:var(--ink-2)}
.mnav{display:grid}
.mrow{position:relative;display:flex;flex-direction:column;justify-content:center;gap:4px;min-height:78px;margin-top:-12px;padding:14px 18px 20px;border-radius:16px 16px 0 0;background:var(--stock);color:var(--stock-ink);text-decoration:none;box-shadow:0 -10px 18px -14px rgba(14,26,58,.4);transition:transform .2s var(--ease)}
.mrow:first-child{margin-top:0}
.mrow:last-child{border-radius:16px;padding-bottom:16px}
.mrow:hover,.mrow:focus-visible{transform:translateY(-4px)}
.mrow b{font-size:1.55rem;line-height:1}
.mrow small{font-size:.86rem;color:var(--fine)}
.mrow--peri{--stock:var(--peri);--stock-ink:var(--ink);--fine:rgba(14,26,58,.84)}
.mrow--amber{--stock:var(--amber);--stock-ink:var(--ink);--fine:rgba(14,26,58,.84)}
.mrow--navy{--stock:var(--navy);--stock-ink:#EEF1FB;--fine:rgba(238,241,251,.84)}
.mrow--white{--stock:var(--white);--stock-ink:var(--ink);--fine:var(--ink-2)}
.menu__acts{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0}
.mtrail h3{margin-bottom:10px;font-size:1.4rem;line-height:1}
.trail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.trail a{display:block;border-radius:10px;overflow:hidden;box-shadow:var(--shadow)}
.trail img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:top}

/* ---------- sheet: chat and cart ---------- */
.sheet{position:fixed;inset:0;z-index:95;visibility:hidden;transition:visibility 0s .42s}
.sheet.open{visibility:visible;transition:none}
.sheet__scrim{position:absolute;inset:0;background:rgba(14,26,58,.42);opacity:0;transition:opacity .25s}
.sheet.open .sheet__scrim{opacity:1}
.sheet__panel{position:absolute;left:50%;bottom:0;display:flex;flex-direction:column;width:100%;max-width:560px;max-height:90vh;border-radius:22px 22px 0 0;background:var(--white);color:var(--ink);box-shadow:0 -24px 40px -24px rgba(14,26,58,.45);transform:translate(-50%,104%);transition:transform .42s var(--ease)}
.sheet.open .sheet__panel{transform:translate(-50%,0)}
.sheet__panel.dragging{transition:none}
.sheet__grab{flex:none;display:grid;place-items:center;height:28px;cursor:grab;touch-action:none}
.sheet__grab i{width:44px;height:5px;border-radius:5px;background:rgba(14,26,58,.25)}
.sheet__x{position:absolute;top:12px;right:12px;z-index:2}
.sheet__body{overflow-y:auto;overscroll-behavior:contain;padding:4px 20px calc(22px + var(--safe))}
.sheet__title{margin:6px 60px 10px 0;font-size:2.1rem;line-height:.95}
.sheet__desc{margin-bottom:14px;color:var(--ink-2)}
.chat__head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-right:56px}
.chat__head .sheet__title{margin-right:0}
.chat__status{display:inline-flex;align-items:center;gap:6px;flex:none;font:600 .72rem/1.3 var(--mono);letter-spacing:.04em}
.chat__status i{width:9px;height:9px;border-radius:50%;border:2px solid var(--ink)}
.chat__status.on i{background:var(--peri);border-color:var(--peri)}
.chat__ctx{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;padding:6px 6px 6px 12px;border-radius:12px;border:2px dashed var(--ink);font-size:.9rem}
.chat__ctx button{display:grid;place-items:center;width:34px;height:34px}
.chat__ctx svg{width:16px;height:16px}
.chat__list{display:flex;flex-direction:column;gap:8px;height:min(46vh,380px);margin-bottom:12px;padding:4px 2px;overflow-y:auto;overscroll-behavior:contain}
.msg{max-width:84%;padding:9px 12px;border-radius:14px;font-size:.98rem;line-height:1.4}
.msg p{white-space:pre-wrap;overflow-wrap:anywhere}
.msg span{display:block;margin-top:3px;font:500 .7rem/1.3 var(--mono);opacity:.8}
.msg--a{align-self:flex-start;background:var(--counter);border-bottom-left-radius:4px}
.msg--v{align-self:flex-end;background:var(--peri);border-bottom-right-radius:4px}
.chat__note,.chat__off{margin-bottom:12px;padding:10px 12px;border-radius:12px;border:2px dashed var(--ink);font-size:.92rem}
#chatWa{margin-bottom:12px}
.chat__row{display:flex;gap:8px}
.chat__input,.chat__name{width:100%;min-height:50px;padding:0 14px;border-radius:12px;border:0;background:#fff;box-shadow:inset 0 0 0 2px var(--ink);font-size:1rem}
.chat__name{margin-bottom:8px}
.chat__input:focus,.chat__name:focus{outline:none;box-shadow:inset 0 0 0 3px var(--ink)}
.chat__send{flex:none;display:grid;place-items:center;width:50px;height:50px;border-radius:12px;background:var(--ink);color:#fff}
.cart{display:grid;gap:8px;margin:6px 0 14px}
.cart__row{display:flex;align-items:center;gap:10px;padding:8px;border-radius:14px;border:2px dashed rgba(14,26,58,.35)}
.cart__img{display:grid;place-items:center;flex:none;width:52px;height:52px;border-radius:10px;overflow:hidden;background:var(--well)}
.cart__img img{width:100%;height:100%;object-fit:cover}
.cart__img svg{width:22px;height:22px}
.cart__txt{display:flex;flex-direction:column;flex:1;min-width:0}
.cart__txt b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.cart__txt small{font:500 .72rem/1.3 var(--mono)}
.qty{display:inline-flex;align-items:center;gap:4px;flex:none}
.qty button{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;box-shadow:inset 0 0 0 2px var(--ink);font-size:1.2rem;font-weight:700}
.qty i{min-width:1.6rem;text-align:center;font-style:normal;font:700 .9rem/1 var(--mono)}
.cart__total{display:flex;align-items:baseline;justify-content:space-between;margin:2px 0 14px;font-weight:700}
.cart__total b{font-size:2rem;line-height:1}
.center{margin-top:10px;text-align:center}

.toast{position:fixed;left:50%;bottom:calc(84px + var(--safe));z-index:130;max-width:calc(100% - 32px);padding:11px 16px;border-radius:12px;background:var(--ink);color:#fff;font-weight:650;box-shadow:var(--shadow-up);transform:translate(-50%,12px);opacity:0;pointer-events:none;transition:opacity .25s,transform .3s var(--ease)}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- views ---------- */
.view{display:none}
.view.is-active{display:block;animation:vin .28s ease both}
@keyframes vin{from{opacity:.4}to{opacity:1}}

/* ---------- wider screens ---------- */
@media (min-width:720px){
  .bar .bar__build{display:inline-flex}
  .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 20px}
  .sc--blank:nth-child(3n+1){grid-column:span 3}
  .sc--blank:nth-child(3n+2){grid-column:span 2}
  .sc--blank:nth-child(3n){grid-column:span 1}
  .series{flex-wrap:wrap;overflow:visible;padding:4px var(--pad) 18px;-webkit-mask:none;mask:none}
  .denoms__row{grid-template-columns:1fr 1fr}
  .packs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tickets{grid-template-columns:repeat(3,minmax(0,1fr))}
  .opts{grid-template-columns:repeat(3,minmax(0,1fr))}
  .bases{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:960px){
  body{padding-bottom:var(--safe)}
  .hero{grid-template-columns:minmax(0,540px) minmax(0,1fr);align-items:center;gap:40px;min-height:calc(100vh - 62px);padding-top:28px;padding-bottom:28px}
  .card--house{justify-self:start}
  .fan{display:block;position:relative;height:600px}
  .fan .sc{position:absolute;width:46%}
  .fan .sc:nth-child(1){left:0;top:24px;--r:-3deg}
  .fan .sc:nth-child(2){right:0;top:96px;--r:2.5deg}
  .win--hero{aspect-ratio:16/10}
  .card--house .card__title{font-size:clamp(2.6rem,4.2vw,3.5rem)}
  .back{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:center;gap:20px 48px;padding:44px 44px 40px}
  .back h2{grid-row:span 2}
  .steps{margin:0}
  .back .tk{justify-self:start}
  .counter__in{padding:40px 44px 36px}
  .care__card{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:4px 40px;padding:36px 40px 26px}
  .care__card > *{grid-column:1}
  .care__acts,.care__links{grid-column:2}
  .care__acts{grid-row:1 / span 2;align-self:center;margin:0}
  .care__links{grid-row:3 / span 2;align-self:start}
  .wabar{left:auto;right:24px;bottom:24px;min-height:56px;padding:0 24px}
  .cartpill{left:auto;right:24px;bottom:92px;transform:none}
  .cardview{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:start;gap:40px;padding-top:34px}
  .detail{position:sticky;top:84px}
  .packs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tickets{grid-template-columns:repeat(4,minmax(0,1fr))}
  .sheet__panel{bottom:24px;border-radius:22px}
  .toast{bottom:96px}
}
@media (min-width:1100px){
  .grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .sc--blank:nth-child(4n+1){grid-column:span 4}
  .sc--blank:nth-child(4n+2){grid-column:span 3}
  .sc--blank:nth-child(4n+3){grid-column:span 2}
  .sc--blank:nth-child(4n){grid-column:span 1}
}
@media (max-width:440px){
  .sc__price i{display:none}
  .sc__stub{font-size:.8rem}
}
@media (max-width:359px){
  .kinds{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid{gap:16px 10px}
  .bar__brand{font-size:1.35rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* scratching presses the card flat and tips it toward the finger */
.is-tilting{transform:perspective(900px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg))!important;transition:transform .12s ease!important;animation:none!important}
.win__none{position:absolute;inset:0;display:grid;place-items:center;padding:12px;text-align:center;color:#EEF1FB;font:700 .68rem/1.3 var(--mono);letter-spacing:.08em}