/* Layout: light sky band hero (headline left, practice round right, plane and flight path drawn behind), then operator list, tool panels, and a reading column with a sticky contents rail. Single light theme by design. */
:root{
  --bg:#F6F8FB; --surface:#FFFFFF; --ink:#0F1B2D; --muted:#55627A; --line:#DCE3EC;
  --accent:#D3222E; --accent-2:#A8131F; --accent-ink:#FFFFFF; --good:#0B8A5C; --good-bg:#E4F5EE;
  --sky:#E3EEFB; --sky-2:#F1F6FD; --chip:#EDF1F6; --warn-bg:#FFF4E0;
  --display:"Saira Condensed","Arial Narrow",Impact,sans-serif;
  --body:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:14px; --shadow:0 1px 2px rgba(15,27,45,.05),0 8px 24px -12px rgba(15,27,45,.18);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{background:var(--bg);color:var(--ink);font:400 16px/1.6 var(--body);margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.wrap{max-width:1160px;margin:0 auto;padding-inline:16px}
h1,h2,h3{text-wrap:balance;margin:0}
h1{font:700 clamp(2.3rem,6.4vw,4rem)/.95 var(--display);text-transform:uppercase}
h1 em{font-style:normal;color:var(--accent)}
h2{font:700 clamp(1.7rem,4vw,2.3rem)/1.05 var(--display);text-transform:uppercase}
h3{font:600 1.05rem/1.3 var(--body)}
p,dl,dd,ol,ul{margin:0}
.eyebrow{font:700 .75rem/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);display:inline-flex;gap:8px;align-items:center}
.eyebrow::before{content:"";width:18px;height:2px;background:var(--accent)}
.muted{color:var(--muted)} .small{font-size:.875rem} .num{font-variant-numeric:tabular-nums}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:8px;background:var(--surface);padding:8px 12px;z-index:30}
.ico{width:22px;height:22px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.strip{background:var(--ink);color:#E8EEF7;font-size:.8125rem}
.strip .wrap{display:flex;gap:14px;flex-wrap:wrap;padding-block:6px;align-items:center}
.strip b{border:1px solid currentColor;border-radius:3px;padding:0 5px}
header.site{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;gap:10px 20px;align-items:center;justify-content:space-between;padding-block:10px;flex-wrap:wrap}
.logo{font:700 1.6rem/1 var(--display);text-transform:uppercase;text-decoration:none;display:flex;align-items:center;gap:8px}
.logo svg{width:40px;height:20px}
nav.main{display:flex;gap:4px;flex-wrap:wrap;font-weight:600;font-size:.9375rem}
nav.main a{text-decoration:none;padding:6px 10px;border-radius:8px}
nav.main a:hover{background:var(--chip)}

.btn{font:700 .9375rem var(--body);border:0;border-radius:10px;padding:12px 20px;cursor:pointer;text-decoration:none;display:inline-flex;gap:8px;align-items:center;justify-content:center;background:var(--accent);color:var(--accent-ink);transition:background .15s,transform .15s}
.btn:hover{background:var(--accent-2)}
.btn:active{transform:translateY(1px)}
.btn.go{background:var(--good)}
.btn.dark{background:var(--ink)}
.btn:disabled{background:var(--chip);color:var(--muted);cursor:default}
.btn.ghost{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.btn.sm{padding:8px 12px;font-size:.8125rem;border-radius:8px}
.field{display:block;font-size:.75rem;color:var(--muted);font-weight:600}
.field input{display:block;margin-top:4px;font:600 1rem var(--body);width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink)}
.field input:focus{outline:2px solid var(--ink);outline-offset:0;background:var(--surface)}
.tag{font:700 .6875rem/1 var(--body);letter-spacing:.08em;text-transform:uppercase;background:var(--chip);color:var(--muted);padding:5px 8px;border-radius:5px}

/* hero */
.band{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--sky) 0%,var(--sky-2) 62%,var(--bg) 100%);border-bottom:1px solid var(--line)}
.band .path{position:absolute;inset:auto 0 0 0;width:100%;height:78%;pointer-events:none}
.cloud{position:absolute;background:#fff;border-radius:99px;opacity:.85;pointer-events:none}
.cloud::before,.cloud::after{content:"";position:absolute;background:#fff;border-radius:50%}
.cloud::before{width:46%;height:150%;left:14%;top:-70%}
.cloud::after{width:38%;height:120%;right:16%;top:-48%}
.c1{width:150px;height:38px;top:54px;left:44%;animation:drift 38s linear infinite alternate}
.c2{width:96px;height:26px;top:150px;left:6%;opacity:.7;animation:drift 52s linear infinite alternate-reverse}
.c3{width:120px;height:30px;top:26px;right:5%;opacity:.75;animation:drift 44s linear infinite alternate}
@keyframes drift{to{transform:translateX(46px)}}
.crumb{position:relative;display:flex;gap:8px;font-size:.8125rem;color:var(--muted);padding:14px 0 0;list-style:none}
.crumb li+li::before{content:"/";margin-right:8px}
.hero{position:relative;padding-block:16px 34px;display:grid;gap:28px;grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center}
.hero-copy{display:grid;gap:16px;min-width:0}
.hero-plane{width:min(190px,46%);height:auto;animation:bob 5s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-7px) rotate(-2deg)}}
.lead{font-size:1.0625rem;max-width:50ch}
.cta{display:flex;gap:10px;flex-wrap:wrap}
.byline{display:flex;gap:6px 14px;flex-wrap:wrap;font-size:.8125rem;color:var(--muted)}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.facts div{background:var(--surface);padding:10px 12px}
.facts dt{font-size:.6875rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.facts dd{font:700 1.5rem/1.1 var(--display)}

/* practice round */
.sim{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden;min-width:0;box-shadow:var(--shadow)}
.sim-top{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:10px 12px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.hist{display:flex;gap:6px;overflow:hidden;font:700 .8125rem var(--body)}
.hist span{background:var(--chip);padding:2px 9px;border-radius:99px;white-space:nowrap}
.hist .hi{color:var(--good);background:var(--good-bg)}
.stage{position:relative;background:linear-gradient(180deg,var(--sky),var(--sky-2));aspect-ratio:16/8.4;max-width:100%}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.mult{position:absolute;inset:0;display:grid;place-content:center;text-align:center;pointer-events:none}
.mult b{font:700 clamp(3.2rem,11vw,6rem)/1 var(--display)}
.mult.crash b{color:var(--accent)}
.mult span{font-weight:600;font-size:.875rem;color:var(--muted)}
.ctrl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.3fr);gap:10px;padding:12px;align-items:end}
.quick{display:flex;gap:6px;padding:0 12px 12px;flex-wrap:wrap}
.quick button{font:600 .75rem var(--body);border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:5px 10px;border-radius:99px;cursor:pointer}
.quick button:hover{border-color:var(--ink)}
.simstats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border-top:1px solid var(--line)}
.simstats div{background:var(--surface);padding:8px 12px;font-size:.6875rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.simstats b{display:block;font:700 1.2rem/1.2 var(--display);color:var(--ink);text-transform:none;letter-spacing:0}
.sim-note{padding:10px 12px;font-size:.75rem;color:var(--muted);border-top:1px solid var(--line);display:flex;gap:10px;justify-content:space-between;flex-wrap:wrap;align-items:center}

.ribbon{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:-18px;position:relative}
.ribbon div{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;gap:10px;align-items:center;font-weight:600;font-size:.9375rem;box-shadow:var(--shadow)}
.ribbon .ico{color:var(--accent)}

section{padding-block:40px}
.sec-head{display:grid;gap:10px;margin-bottom:18px;max-width:66ch}

/* operators */
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.chips button{font:600 .8125rem var(--body);border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:7px 14px;border-radius:99px;cursor:pointer}
.chips button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.ops{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.ops-head,.op-row{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1.8fr) minmax(0,1fr) minmax(0,1.5fr) auto;gap:14px;padding:14px 16px;align-items:center}
.ops-head{font:700 .6875rem var(--body);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);background:var(--chip);padding-block:10px}
.op{border-top:1px solid var(--line)}
.op:hover{background:var(--sky-2)}
.op-name{font-weight:700;display:flex;gap:10px;align-items:center}
.mono{width:38px;height:38px;border-radius:10px;background:var(--ink);color:#fff;display:grid;place-content:center;font:700 1rem var(--display);flex:none}
.op-sub{display:block;font-size:.75rem;color:var(--muted);font-weight:400}
.op-row [data-l]::before{content:attr(data-l);display:none;font:700 .6875rem var(--body);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.pill{display:inline-block;font:600 .75rem var(--body);background:var(--good-bg);color:var(--good);padding:2px 8px;border-radius:99px}
.op summary{list-style:none;cursor:pointer;font:600 .8125rem var(--body);color:var(--muted);padding:0 16px 12px}
.op summary::-webkit-details-marker{display:none}
.op summary::after{content:" +"}
.op details[open] summary::after{content:" –"}
.op-more{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;padding:4px 16px 16px;font-size:.875rem}
.op-more ul{padding-left:18px;color:var(--muted)}
.empty{padding:18px 16px;color:var(--muted)}
.disclose{font-size:.8125rem;color:var(--muted);margin-top:12px;max-width:80ch}

/* tools */
.tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;display:grid;gap:14px;align-content:start;min-width:0;box-shadow:var(--shadow)}
.panel h3{display:flex;gap:8px;align-items:center}
.panel h3 .ico{color:var(--accent)}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.out{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.out div{background:var(--bg);padding:9px 11px;font-size:.6875rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;min-width:0}
.out b{display:block;font:700 1.3rem/1.2 var(--display);color:var(--ink);text-transform:none;letter-spacing:0;overflow-wrap:anywhere}
.slider{width:100%;accent-color:var(--accent)}
.bars{display:grid;gap:9px}
.bar{display:grid;grid-template-columns:52px minmax(0,1fr) 56px;gap:10px;align-items:center;font-size:.875rem;font-weight:600}
.bar i{display:block;height:16px;background:var(--chip);border-radius:4px;overflow:hidden}
.bar i u{display:block;height:100%;background:var(--accent);border-radius:4px}
.bar b{text-align:right}
.run{grid-column:1/-1}
.run-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:18px;align-items:start}
.stack{display:grid;gap:10px;min-width:0}
.run canvas{width:100%;height:170px;display:block;background:var(--bg);border-radius:10px;border:1px solid var(--line)}

.layout{display:grid;grid-template-columns:210px minmax(0,1fr);gap:44px;align-items:start}
.toc{position:sticky;top:calc(env(safe-area-inset-top,0px) + 80px);display:grid;gap:2px;font-size:.875rem}
.toc b{font:700 .6875rem var(--body);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:0 0 6px 12px}
.toc a{text-decoration:none;color:var(--muted);padding:5px 12px;border-left:2px solid var(--line)}
.toc a:hover{color:var(--ink)}
.toc a[aria-current="true"]{color:var(--ink);font-weight:600;border-color:var(--accent)}
.prose{display:grid;gap:52px;min-width:0}
.prose article{display:grid;gap:14px;max-width:72ch}
.stepcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;list-style:none;padding:0;counter-reset:s}
.stepcards li{counter-increment:s;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px;display:grid;gap:6px;align-content:start;font-size:.9375rem}
.stepcards li::before{content:"Step " counter(s);font:700 .6875rem var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.stepcards svg{width:100%;height:64px;background:var(--sky-2);border-radius:8px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.cell{border-top:2px solid var(--ink);padding-top:10px;display:grid;gap:4px;align-content:start}
.cell .ico{color:var(--accent)}
.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.tbl table{border-collapse:collapse;width:100%;min-width:320px;font-size:.9375rem}
.tbl th,.tbl td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--line)}
.tbl th{font:700 .6875rem var(--body);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);background:var(--chip)}
.tbl tr:last-child td{border-bottom:0}
.chain{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;counter-reset:c}
.chain div{counter-increment:c;position:relative;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px;font-size:.875rem}
.chain b{display:block;font:700 1.15rem var(--display);text-transform:uppercase}
.chain div::before{content:counter(c);display:grid;place-content:center;width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;font:700 .75rem var(--body);margin-bottom:6px}
.myth{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden}
.myth div{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:14px;padding:13px 16px;border-bottom:1px solid var(--line);font-size:.9375rem}
.myth div:last-child{border-bottom:0}
.myth b::before{content:"Myth";display:inline-block;font:700 .625rem var(--body);letter-spacing:.08em;text-transform:uppercase;background:var(--warn-bg);color:#8A5A00;padding:2px 6px;border-radius:4px;margin-right:8px;vertical-align:2px}
.gloss{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);gap:8px 16px;font-size:.9375rem}
.gloss dt{font-weight:600}.gloss dd{color:var(--muted)}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:8px}
.faq details[open]{border-color:var(--ink)}
.faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent);font-weight:700;font-size:1.1rem;line-height:1.3}
.faq details[open] summary::after{content:"–"}
.faq details p{margin-top:8px;color:var(--muted)}
.games{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.games a{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px;text-decoration:none;display:grid;gap:2px;transition:border-color .15s,transform .15s}
.games a:hover{border-color:var(--ink);transform:translateY(-2px)}
.games span{font-size:.8125rem;color:var(--muted)}
.edit{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;display:grid;gap:8px;font-size:.9375rem}
.rg{position:relative;overflow:hidden;background:var(--ink);color:#E8EEF7;border-radius:18px;padding:26px;display:grid;gap:10px}
.rg h2{color:#fff}.rg .eyebrow{color:#FF8A92}.rg .eyebrow::before{background:#FF8A92}
.rg svg{position:absolute;right:-20px;bottom:-14px;width:220px;opacity:.16}
footer{background:var(--surface);border-top:1px solid var(--line);margin-top:44px;padding-block:28px;font-size:.8125rem;color:var(--muted)}
.foot{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:24px}
.foot h3{font:700 .6875rem var(--body);text-transform:uppercase;letter-spacing:.08em;color:var(--ink);margin-bottom:8px}
.foot ul{list-style:none;padding:0;display:grid;gap:6px}
.foot a{text-decoration:none}.foot a:hover{color:var(--ink)}
.legal{border-top:1px solid var(--line);margin-top:20px;padding-top:14px;display:grid;gap:6px}
.dock{display:none}
.top{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:15;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);cursor:pointer;display:grid;place-content:center;color:var(--ink)}

@media (max-width:900px){
  .hero,.layout,.tools,.run-grid{grid-template-columns:minmax(0,1fr)}
  .hero-plane{display:none}
  .ribbon{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:16px}
  .toc{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}
  .toc b{grid-column:1/-1}
  nav.main{order:3;width:100%;font-size:.875rem}
  .ops-head{display:none}
  .op-row{grid-template-columns:minmax(0,1fr);gap:8px}
  .op-row [data-l]::before{display:block}
  .op-row .btn{width:100%}
  .myth div,.gloss{grid-template-columns:minmax(0,1fr);gap:4px}
  .ctrl{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ctrl .btn{grid-column:1/-1}
  .simstats,.chain{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stepcards{grid-template-columns:minmax(0,1fr)}
  .foot{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dock{display:flex;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:16;background:var(--surface);border-top:1px solid var(--line);padding:8px 16px calc(8px + env(safe-area-inset-bottom,0px))}
  .dock .btn{flex:1}
  .top{bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  footer{padding-bottom:92px}
}

/* ===========================================================================
   playcrashdemo.com — layer on top of the theme's base.css
   Country picker, build-time odds bars, operator filter states, and the
   motion the theme left out. Everything that moves is wrapped so that
   prefers-reduced-motion switches it off rather than merely slowing it.
   =========================================================================== */

/* --- country picker -------------------------------------------------- */
.picker {
    margin: 26px 0 8px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: linear-gradient(180deg, #fff, #fbfcfe);
    box-shadow: 0 1px 2px rgba(15, 27, 45, .04);
}
.picker > b {
    display: block;
    font-family: "Saira Condensed", system-ui, sans-serif;
    font-size: 15px;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 10px;
}
.picker div { display: flex; flex-wrap: wrap; gap: 8px; }
.picker a {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 14px 9px 9px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    text-decoration: none;
    font-weight: 600; font-size: 14px;
    color: var(--ink);
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.picker a:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(211, 34, 46, .12); }
.picker a[aria-current="page"] { border-color: var(--accent); background: #fff5f5; }
.pk-cc {
    display: inline-grid; place-items: center;
    width: 26px; height: 26px;
    border-radius: 8px;
    background: var(--ink); color: #fff;
    font: 700 10px/1 "Saira Condensed", system-ui, sans-serif;
    letter-spacing: .5px;
}
.picker a[aria-current="page"] .pk-cc { background: var(--accent); }

/* --- operator rows --------------------------------------------------- */
.op[hidden] { display: none; }
.op-req { margin: 4px 0 0; font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.nc { color: var(--muted); font-style: italic; }
.op-more ul { margin: 6px 0 0; padding-left: 18px; }
.op-more li { font-size: 13px; line-height: 1.5; color: var(--muted); margin: 3px 0; }

/* --- odds bars: written at build time, animated on first view -------- */
.bars .bar i { display: block; position: relative; overflow: hidden; }
.bars .bar u {
    display: block; height: 100%;
    width: var(--w);
    transition: width .9s cubic-bezier(.22, 1, .36, 1);
}
.js .bars .bar u { width: 0; }
.js .bars.in .bar u { width: var(--w); }

/* --- hero motion ----------------------------------------------------- */
@keyframes pcd-float { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-9px) rotate(1deg); } }
@keyframes pcd-drift { from { transform: translateX(-8%); } to { transform: translateX(108%); } }
@keyframes pcd-dash  { to { stroke-dashoffset: -260; } }
@keyframes pcd-rise  { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.hero-plane { animation: pcd-float 6s ease-in-out infinite; transform-origin: 60% 60%; }
.band .cloud { animation: pcd-drift linear infinite; }
.band .c1 { animation-duration: 54s; }
.band .c2 { animation-duration: 72s; animation-delay: -18s; }
.band .c3 { animation-duration: 96s; animation-delay: -40s; }
.band .path path { stroke-dasharray: 3 10; animation: pcd-dash 9s linear infinite; }

.hero-copy > * { animation: pcd-rise .5s cubic-bezier(.22, 1, .36, 1) both; }
.hero-copy > :nth-child(2) { animation-delay: .04s; }
.hero-copy > :nth-child(3) { animation-delay: .08s; }
.hero-copy > :nth-child(4) { animation-delay: .12s; }
.hero-copy > :nth-child(5) { animation-delay: .16s; }
.hero-copy > :nth-child(6) { animation-delay: .20s; }

/* the multiplier pulses while a round is live and snaps red when it ends */
@keyframes pcd-tick { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
#mult.live b { animation: pcd-tick 1.1s ease-in-out infinite; }
@keyframes pcd-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
#mult.crash { animation: pcd-shake .32s ease-in-out 1; }

/* a cash-out flashes the balance so the result is visible without reading */
@keyframes pcd-pop { 0% { transform: scale(1); } 40% { transform: scale(1.12); color: var(--good); } 100% { transform: scale(1); } }
#bal.pop { animation: pcd-pop .5s ease-out 1; display: inline-block; }

/* --- reveal on scroll ------------------------------------------------ */
.reveal { transition: opacity .55s ease, transform .55s cubic-bezier(.22, 1, .36, 1); }
.js .reveal { opacity: 0; transform: translateY(16px); }
.js .reveal.in { opacity: 1; transform: none; }

/* --- buttons --------------------------------------------------------- */
.btn { position: relative; overflow: hidden; }
.btn::after {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(255, 255, 255, .35), transparent 55%);
    opacity: 0; transition: opacity .25s ease;
}
.btn:hover::after { opacity: 1; }
.btn:active { transform: translateY(1px); }

/* --- motion off ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .hero-plane, .band .cloud, .band .path path, #mult.live b, #mult.crash, #bal.pop,
    .hero-copy > * { animation: none !important; }
    .reveal, .bars .bar u { transition: none !important; }
    .js .reveal { opacity: 1; transform: none; }
    .js .bars .bar u { width: var(--w); }
    .btn::after { display: none; }
}

/* --- mobile ---------------------------------------------------------- */
@media (max-width: 760px) {
    .picker { padding: 13px 14px; border-radius: 14px; }
    .picker a { padding: 8px 12px 8px 8px; font-size: 13px; }
    .pk-cc { width: 23px; height: 23px; font-size: 9px; }
    .op-req { font-size: 11px; }
}

/* --- decoration must never widen the page ---------------------------- */
/* The drifting clouds travel to translateX(108%), which put the last one
   55px past the viewport on a 375px screen. That alone widened the scroll
   area and every full-width block inherited the extra 5px. The band clips
   its own decoration instead. */
.band { overflow: hidden; }
.band .cloud, .band .path { pointer-events: none; }

/* A long unbroken string (a URL, a licence reference) must never be able to
   widen the document; it wraps instead. */
.prose a, .prose p, .op-more li, .picker a { overflow-wrap: anywhere; }

/* ===========================================================================
   v2: flags, operator logos, long-form components, more motion
   =========================================================================== */
.u-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.strip a { color: inherit; }
.foot-p { margin-top: 8px; max-width: 38ch; }

/* --- flags ----------------------------------------------------------- */
.flag { width: 24px; height: 16px; border-radius: 3px; flex: none; box-shadow: 0 0 0 1px rgba(15, 27, 45, .14); vertical-align: -2px; }
.picker > b { display: flex; align-items: center; gap: 6px; }
.picker > b .ico { width: 16px; height: 16px; color: var(--accent); }
.picker a { padding: 9px 14px 9px 10px; }
@keyframes pcd-wave { 0%, 100% { transform: rotate(0) } 30% { transform: rotate(-8deg) } 60% { transform: rotate(6deg) } }
.picker a:hover .flag, .mk a:hover .flag { animation: pcd-wave .6s ease-in-out 1; transform-origin: 0 100%; }
.mk a { display: inline-flex; align-items: center; gap: 8px; }
.mk .flag { width: 20px; height: 13px; }

/* --- operator table -------------------------------------------------- */
.op { border-top: 1px solid var(--line); transition: background .2s ease; }
.op:first-child { border-top: 0; }
.op:hover { background: #fbfcfe; }
.op-logo { width: 96px; height: 48px; border-radius: 9px; object-fit: cover; flex: none; background: var(--ink); box-shadow: 0 1px 3px rgba(15, 27, 45, .18); transition: transform .2s ease; }
.op:hover .op-logo { transform: scale(1.04); }
.op-name { gap: 12px; }
.op-name > span { display: grid; gap: 2px; font-size: 1.02rem; }
.tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 3px; }
.tagc { font: 600 .6875rem var(--body); color: var(--muted); border: 1px solid var(--line); border-radius: 99px; padding: 1px 7px; background: #fff; }
.pill { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.pill .ico { width: 13px; height: 13px; }
.op-row [data-l="Sports welcome offer"] { font-weight: 600; }
.op-row [data-l="Sports welcome offer"] .nc, .op-req { font-weight: 400; }
@media (min-width: 901px) {
    .ops-head, .op-row { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1.7fr) minmax(0, .9fr) minmax(0, 1.4fr) auto; }
}
@media (max-width: 900px) {
    .op-row { padding: 14px; gap: 10px; }
    .op-row .btn { width: 100%; text-align: center; justify-content: center; }
    .op-logo { width: 84px; height: 42px; }
}
.more { margin-top: 14px; font-weight: 600; }

/* --- sub page hero + document pages ---------------------------------- */
.hero.sub { grid-template-columns: minmax(0, 1fr); padding-block: 14px 44px; }
.hero.sub .hero-copy { max-width: 70ch; }
.hero.sub .hero-plane { width: 120px; }
.prose.doc { max-width: 74ch; margin: 34px auto 0; gap: 14px; }
.prose.doc h2 { margin-top: 18px; }
.prose h3 { margin-top: 6px; }
code { background: var(--chip); padding: 1px 5px; border-radius: 4px; font-size: .9em; }

/* --- tables ---------------------------------------------------------- */
.tbl th[scope="row"] { background: transparent; text-transform: none; letter-spacing: 0; font: 600 .9375rem var(--body); color: var(--ink); white-space: nowrap; }
.tbl td { font-variant-numeric: tabular-nums; }
.tbl tbody tr { transition: background .15s ease; }
.tbl tbody tr:hover { background: var(--sky-2); }
.tbl.odds td:last-child { color: var(--accent); font-weight: 600; }

/* --- lists ----------------------------------------------------------- */
.checks, .links { list-style: none; padding: 0; display: grid; gap: 9px; }
.checks li { position: relative; padding-left: 28px; }
.checks li::before { content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--good-bg) url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%230B8A5C%22 stroke-width=%223%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m7 12 3.5 3.5L17 9%22/%3E%3C/svg%3E") center/12px no-repeat; }
.links li a { display: flex; gap: 10px; align-items: center; padding: 11px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); text-decoration: none; font-weight: 600; transition: border-color .18s, transform .18s; }
.links li a::after { content: "→"; margin-left: auto; color: var(--accent); transition: transform .18s; }
.links li a:hover { border-color: var(--accent); transform: translateX(2px); }
.links li a:hover::after { transform: translateX(4px); }
.parts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); overflow: hidden; font-size: .9375rem; }
.parts dt, .parts dd { padding: 12px 14px; border-bottom: 1px solid var(--line); }
.parts dt { font-weight: 700; display: flex; gap: 8px; align-items: center; }
.parts dt .ico { color: var(--accent); flex: none; }
.parts dd { color: var(--muted); }
.parts dt:last-of-type, .parts dd:last-of-type { border-bottom: 0; }

/* --- how-to timeline ------------------------------------------------- */
.timeline { list-style: none; padding: 0; counter-reset: t; display: grid; gap: 0; }
.timeline li { counter-increment: t; position: relative; padding: 0 0 22px 52px; }
.timeline li::before { content: counter(t); position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-content: center; font: 700 1rem var(--display); box-shadow: 0 0 0 5px var(--bg); z-index: 1; }
.timeline li::after { content: ""; position: absolute; left: 16px; top: 34px; bottom: 0; width: 2px; background: var(--line); }
.timeline li:last-child::after { display: none; }
.timeline h3 { margin: 4px 0 4px; }

/* --- diagram --------------------------------------------------------- */
.diagram { margin: 6px 0; }
.diagram svg { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 14px; display: block; }
.diagram figcaption { font-size: .8125rem; color: var(--muted); margin-top: 8px; }
.js .dg-line { stroke-dasharray: 720; stroke-dashoffset: 720; }
.js .dg-area { opacity: 0; }
.dg-plane { offset-path: path("M48 260C220 256 400 214 560 70"); offset-rotate: auto; offset-distance: 100%; }
.js .dg-plane { offset-distance: 0%; }
.diagram.in .dg-line { animation: pcd-draw 2.6s ease-out forwards; }
.diagram.in .dg-area { animation: pcd-fade .8s ease-out 2s forwards; }
.diagram.in .dg-plane { animation: pcd-fly 2.6s ease-out forwards; }
@keyframes pcd-draw { to { stroke-dashoffset: 0 } }
@keyframes pcd-fade { to { opacity: 1 } }
@keyframes pcd-fly { to { offset-distance: 100% } }
@supports not (offset-path: path("M0 0")) { .dg-plane { transform: translate(560px, 70px) rotate(-38deg); } }

/* --- small motion ---------------------------------------------------- */
.prop { transform-box: fill-box; transform-origin: center; animation: pcd-prop .16s linear infinite alternate; }
@keyframes pcd-prop { from { transform: scaleY(1) } to { transform: scaleY(.12) } }
@keyframes pcd-pulse { 0%, 100% { transform: scale(1) } 50% { transform: scale(1.18) } }
.ribbon .ico { animation: pcd-pulse 3.2s ease-in-out infinite; }
.ribbon div:nth-child(2) .ico { animation-delay: .8s }
.ribbon div:nth-child(3) .ico { animation-delay: 1.6s }
.ribbon div:nth-child(4) .ico { animation-delay: 2.4s }
.ribbon div { transition: transform .2s ease, box-shadow .2s ease; }
.ribbon div:hover { transform: translateY(-2px); }
.js .stepcards .draw { stroke-dasharray: 220; stroke-dashoffset: 220; }
.stepcards.in .draw { animation: pcd-draw 1.2s ease-out forwards; }
.stepcards.in li:nth-child(2) .draw { animation-delay: .25s }
.stepcards.in li:nth-child(3) .draw { animation-delay: .5s }
.stepcards li { transition: transform .2s ease, border-color .2s ease; }
.stepcards li:hover { transform: translateY(-3px); border-color: var(--accent); }
.faq details[open] summary { color: var(--accent); }
.faq details p { animation: pcd-rise .3s ease-out both; }

@media (prefers-reduced-motion: reduce) {
    .prop, .ribbon .ico, .picker a:hover .flag, .mk a:hover .flag, .faq details p,
    .diagram.in .dg-line, .diagram.in .dg-area, .diagram.in .dg-plane, .stepcards.in .draw { animation: none !important; }
    .js .dg-line, .js .stepcards .draw { stroke-dashoffset: 0; }
    .js .dg-area { opacity: 1; }
    .js .dg-plane { offset-distance: 100%; }
}
@media (max-width: 760px) {
    .parts { grid-template-columns: minmax(0, 1fr); }
    .parts dt { border-bottom: 0; padding-bottom: 2px; }
    .timeline li { padding-left: 46px; }
    .hero.sub .hero-plane { width: 96px; }
}

/* footer column labels are labels, not headings: they were h3 and broke the outline on pages with no h2 */
.foot .fh { display: block; font: 700 .6875rem var(--body); text-transform: uppercase; letter-spacing: .08em; color: var(--ink); margin-bottom: 8px; }

/* owner-supplied wordmark: scaled, never redrawn */
.logo .logo-img { display: block; height: 46px; width: auto; }
footer .logo .logo-img { height: 52px; }
@media (max-width: 760px) { .logo .logo-img { height: 46px; } }