@import url('https://fonts.googleapis.com/css2?family=Bitcount+Single:wght@400;500;600&family=Nata+Sans:wght@400;500;600;700&family=Shrikhand&display=swap');

:root{
  --design-width:1920;
  --u:calc(100vw / var(--design-width));
  --paper:#DABAEB;
  --surface:#E7D0EC;
  --card:#F3E6F5;
  --ink:#2A1530;
  --muted:#6E5475;
  --hairline:#C5A2CD;
  --accent-yellow:#F4B400;
  --accent-green:#87EC6A;
  --positive-ink:#118445;
  --error:#F35D75;
  --rule-hairline:max(1px,calc(1 * var(--u)));
  --rule-positive:max(1px,calc(2.1 * var(--u)));
  --rule-result:max(1px,calc(1.8 * var(--u)));
  --rule-result-heavy:max(1px,calc(2.3 * var(--u)));
  --rule-stack-a:max(1px,calc(3.1 * var(--u)));
  --rule-stack-column:max(1px,calc(3.6 * var(--u)));
  --rule-error:max(1px,calc(2.1 * var(--u)));
  --ease-hat:cubic-bezier(.22,.78,.22,1);
  --fast:200ms;
  --settle:320ms;
  --rise:800ms;
}

*{box-sizing:border-box}
html{min-width:320px;background:var(--paper);scroll-behavior:smooth}
body{margin:0;min-height:100vh;overflow-x:hidden;background:var(--paper);color:var(--ink);font-family:"Nata Sans",sans-serif;font-size:max(12px,calc(16 * var(--u)));line-height:1.4}
:where(button,input,select){border:0;font:inherit;color:inherit}
:where(button,a){-webkit-tap-highlight-color:transparent}
button{background:none;cursor:pointer}
a{color:inherit}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* nav — N12 segmented control */
[data-chrome="nav"]{padding:calc(24 * var(--u)) calc(42 * var(--u)) calc(22 * var(--u));position:relative;z-index:20}
.hc-nav{height:calc(64 * var(--u));display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:calc(24 * var(--u))}
.hc-brand{justify-self:start;display:flex;align-items:center;gap:calc(14 * var(--u));text-decoration:none;color:var(--ink);white-space:nowrap}
.hc-brand img{width:calc(44 * var(--u));height:calc(48 * var(--u));min-height:40px;object-fit:contain}
.hc-brand span{font:max(18px,calc(29 * var(--u)))/1 "Shrikhand",serif;letter-spacing:.01em}
.hc-seg{display:flex;align-items:center;gap:calc(4 * var(--u));height:calc(64 * var(--u));min-height:44px;padding:calc(6 * var(--u));border-radius:999px;background:var(--card);box-shadow:inset 0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(42,21,48,.06),0 calc(8 * var(--u)) calc(22 * var(--u)) rgba(42,21,48,.08)}
.hc-seg a{display:flex;align-items:center;height:100%;padding:0 calc(26 * var(--u));border-radius:999px;font-size:max(12px,calc(16 * var(--u)));font-weight:600;color:var(--muted);text-decoration:none;white-space:nowrap;transition:transform var(--fast) var(--ease-hat),background-color var(--fast) var(--ease-hat),color var(--fast) linear}
.hc-seg a:hover{color:var(--ink);transform:translateY(calc(-2 * var(--u))) rotate(-.35deg)}
.hc-seg a.is-active{background:linear-gradient(90deg,var(--accent-yellow),var(--accent-green));color:var(--ink);font-weight:700;box-shadow:0 calc(4 * var(--u)) calc(10 * var(--u)) rgba(42,21,48,.12),inset 0 1px 0 rgba(255,255,255,.55)}
.hc-coins{justify-self:end;display:flex;gap:calc(12 * var(--u))}
.hc-coin{display:grid;place-items:center;width:calc(52 * var(--u));height:calc(52 * var(--u));min-width:38px;min-height:38px;border-radius:50%;background:var(--card);color:var(--ink);text-decoration:none;box-shadow:0 calc(6 * var(--u)) calc(16 * var(--u)) rgba(42,21,48,.1);transition:transform var(--fast) var(--ease-hat)}
a.hc-coin:hover{transform:translateY(calc(-3 * var(--u))) rotate(8deg)}
.hc-coin svg{width:40%;height:40%;fill:currentColor}
[data-chrome] [data-launch][aria-disabled="true"]{opacity:.62}

.page-frame{width:calc(100% - (82 * var(--u)));margin:calc(34 * var(--u)) calc(40 * var(--u)) calc(48 * var(--u)) calc(42 * var(--u));min-height:calc(80 * var(--u));transition:transform var(--fast) var(--ease-hat),opacity var(--fast) var(--ease-hat);transform-origin:50% 0}
.page-frame.is-leaving{transform:scale(.992) rotate(-.12deg);opacity:.72}

/* footer — F10 end credits */
[data-chrome="footer"]{padding:calc(12 * var(--u)) calc(42 * var(--u)) calc(40 * var(--u));text-align:center}
.hc-curtain{display:flex;align-items:center;justify-content:center;gap:calc(14 * var(--u))}
.hc-curtain i{width:calc(10 * var(--u));height:calc(10 * var(--u));min-width:6px;min-height:6px;border-radius:50%;background:var(--hairline)}
.hc-curtain i:nth-child(4),.hc-curtain i:nth-child(6){width:calc(14 * var(--u));height:calc(14 * var(--u));background:linear-gradient(135deg,var(--accent-yellow),var(--accent-green))}
.hc-footer-mark{width:calc(52 * var(--u));height:calc(56 * var(--u));min-height:40px;object-fit:contain;margin:0 calc(10 * var(--u))}
.hc-end{margin:calc(16 * var(--u)) 0 calc(26 * var(--u));font:max(24px,calc(44 * var(--u)))/1.1 "Shrikhand",serif}
.hc-credits{display:grid;row-gap:calc(8 * var(--u));width:calc(1040 * var(--u));max-width:100%;margin:0 auto}
.hc-credits>div{display:grid;grid-template-columns:1fr calc(36 * var(--u)) 1fr;align-items:baseline}
.hc-credits>div::after{content:"·";grid-column:2;grid-row:1;color:var(--hairline);font-size:max(13px,calc(17 * var(--u)))}
.hc-credits dt{grid-column:1;text-align:right;font-size:max(12px,calc(13 * var(--u)));font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.hc-credits dd{grid-column:3;margin:0;text-align:left;font-size:max(13px,calc(17 * var(--u)))}
.hc-credits button{margin-left:calc(10 * var(--u));padding:calc(2 * var(--u)) calc(12 * var(--u));border-radius:999px;background:var(--card);color:var(--muted);font-size:max(12px,calc(13 * var(--u)));font-weight:600}
.hc-credits button:disabled{cursor:default}
.hc-social{display:flex;justify-content:center;gap:calc(12 * var(--u));margin:calc(26 * var(--u)) 0 calc(18 * var(--u))}
.hc-social [data-launch]{display:flex;align-items:center;gap:calc(10 * var(--u));height:calc(46 * var(--u));min-height:36px;padding:0 calc(20 * var(--u)) 0 calc(14 * var(--u));border-radius:999px;background:var(--card);color:var(--ink);text-decoration:none;font-size:max(12px,calc(15 * var(--u)));font-weight:600;box-shadow:0 calc(6 * var(--u)) calc(16 * var(--u)) rgba(42,21,48,.08)}
.hc-social svg{width:max(14px,calc(18 * var(--u)));height:max(14px,calc(18 * var(--u)));fill:currentColor}
.hc-bound{margin:0;font-size:max(12px,calc(15 * var(--u)));color:var(--muted)}

.rule-amount-chip-20,.rule-amount-chip-1{border:var(--rule-positive) solid var(--positive-ink);border-radius:calc(14 * var(--u))}
.rule-match-result{border:var(--rule-result) solid #CFE6DA;border-radius:calc(18 * var(--u))}
.rule-one-more-result{border:var(--rule-result-heavy) solid #D8E6E1;border-radius:calc(20 * var(--u))}
.rule-stack-cap-a,.rule-stack-cap-b{border:var(--rule-stack-a) solid #7D53A7}
.rule-stack-column-a{border:var(--rule-stack-column) solid #E0BDFA}
.rule-input-error{border:var(--rule-error) solid var(--error);border-radius:calc(14 * var(--u));box-sizing:border-box;padding:0}
.rule-input-error>:where(input,select){width:100%;height:100%;padding:0 calc(16 * var(--u));background:transparent}
.rule-panel{border:var(--rule-hairline) solid var(--hairline);border-radius:calc(24 * var(--u))}
.rule-card{border:var(--rule-hairline) solid var(--hairline);border-radius:calc(20 * var(--u))}
.rule-control{border:var(--rule-hairline) solid var(--hairline);border-radius:calc(14 * var(--u))}
.rule-pill{border:var(--rule-hairline) solid var(--hairline);border-radius:999px}
.rule-row{border-bottom:var(--rule-hairline) solid var(--hairline)}
.rule-row-top{border-top:var(--rule-hairline) solid var(--hairline)}
.frame-panel{border-radius:calc(24 * var(--u))}
.frame-card{border-radius:calc(20 * var(--u))}
.rule-panel-h{border-block:var(--rule-hairline) solid var(--hairline);border-radius:calc(24 * var(--u))}
.rule-card-h{border-block:var(--rule-hairline) solid var(--hairline);border-radius:calc(20 * var(--u))}

[data-motion="coin-pass"]{opacity:0;transform:translateX(calc(-24 * var(--u))) translateY(calc(8 * var(--u))) rotate(-5deg)}
[data-motion="coin-pass"].is-in{opacity:1;transform:translateX(0) translateY(0) rotate(0);transition:transform var(--settle) var(--ease-hat),opacity 180ms linear}
[data-motion="totaliser"]{transform:scaleY(.08);transform-origin:50% 100%;opacity:.85}
[data-motion="totaliser"].is-in{transform:scaleY(1);opacity:1;transition:transform var(--rise) var(--ease-hat),opacity 180ms linear}
[data-hover="card"]{transition:transform var(--fast) var(--ease-hat)}
[data-hover="card"]:hover{transform:translateY(calc(-4 * var(--u))) rotate(-.35deg)}
[data-press="coin"]{transition:transform 180ms var(--ease-hat)}
[data-press="coin"]:active{transform:scale(.96) rotate(.5deg)}

@media (max-width:1023px){
  :root{--u:1px}
  body{font-size:16px}
  [data-chrome="nav"]{padding:12px 14px 4px}
  .hc-nav{height:auto;grid-template-columns:1fr auto;row-gap:12px;gap:12px}
  .hc-brand img{width:36px;height:40px}
  .hc-brand span{font-size:22px}
  .hc-coin{width:42px;height:42px}
  .hc-seg{grid-column:1/-1;grid-row:2;height:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:5px;border-radius:26px}
  .hc-seg a{height:40px;justify-content:center;padding:0 6px;font-size:14px}
  .page-frame{width:auto;margin:24px 16px 40px;min-height:40px}
  [data-chrome="footer"]{padding:36px 16px 32px}
  .hc-curtain{gap:10px}
  .hc-end{font-size:26px}
  .hc-credits{width:auto;row-gap:12px}
  .hc-credits>div{display:block}
  .hc-credits>div::after{content:none}
  .hc-credits dt,.hc-credits dd{text-align:center}
  .hc-credits dd{font-size:15px;margin-top:2px}
  .hc-bound{font-size:13px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  [data-motion]{opacity:1!important;transform:none!important}
}