:root{
  color-scheme: light dark;
  --paper:#F8F5EE; --card:#FFFDF8; --ink:#14202B; --muted:#675F52; --line:#D8CFBD;
  --signal:#D63B26; --on-signal:#FFFFFF; --good:#1B8A5A; --gold:#E9AE22; --info:#3A72E0;
  --t0:#2A9D8F; --t1:#3A72E0; --t2:#E9AE22; --t3:#EE7B30; --t4:#D63B26;
  --disp:'Big Shoulders Display','Arial Narrow','Helvetica Neue Condensed',Impact,sans-serif;
  --ui:'Instrument Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root{ --paper:#0D1620; --card:#162636; --ink:#E8EEF3; --muted:#9AABBB; --line:#2B4155; --signal:#F0573F; --good:#3BC48A; --info:#6B9BFF; }
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--ui);-webkit-font-smoothing:antialiased}
a{color:var(--info)}
.wrap{max-width:860px;margin:0 auto;padding:16px 18px 56px}
.site-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 8px;min-height:44px}
.wordmark{white-space:nowrap;display:inline-flex;align-items:baseline;gap:10px;font:900 26px/1 var(--disp);letter-spacing:.05em;text-transform:uppercase;color:var(--ink);text-decoration:none}
.wordmark .mark{display:block;width:26px;height:26px;object-fit:contain}
.nav{display:flex;gap:18px;font-size:15px;font-weight:600}
.nav a{color:var(--ink);text-decoration:none;padding:6px 0;border-bottom:3px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--signal)}
.btn{display:inline-block;appearance:none;cursor:pointer;text-decoration:none;border:2px solid var(--ink);background:var(--card);color:var(--ink);border-radius:10px;padding:12px 22px;font:700 16px var(--ui);box-shadow:0 4px 0 var(--ink);transition:transform .08s,box-shadow .08s}
.btn:hover{transform:translateY(-1px);box-shadow:0 5px 0 var(--ink)}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.btn:focus-visible,.nav a:focus-visible,.wordmark:focus-visible{outline:3px solid var(--info);outline-offset:3px}
.btn.primary{background:var(--signal);border-color:var(--signal);color:var(--on-signal);box-shadow:0 4px 0 color-mix(in srgb,var(--signal) 55%,#000)}
.btn.primary:hover{box-shadow:0 5px 0 color-mix(in srgb,var(--signal) 55%,#000)}
.btn.primary:active{box-shadow:0 1px 0 color-mix(in srgb,var(--signal) 55%,#000)}
.row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
h1,h2,h3{font-family:var(--disp);margin:0;letter-spacing:.005em}
h1{font-weight:900;line-height:.92;text-transform:uppercase}
h2{font-weight:800;font-size:32px;line-height:1}
h3{font-weight:800;font-size:22px;line-height:1.1}
.muted{color:var(--muted)}

/* ---- hub ---- */
.hero{padding:34px 0 10px}
.hero h1{font-size:clamp(64px,17vw,124px);margin:0 0 16px}
.hero p{font-size:20px;max-width:30em;margin:0}
.section-title{margin:44px 0 16px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:22px}
.card{background:var(--card);border:2px solid var(--ink);border-radius:14px;box-shadow:0 6px 0 var(--ink);padding:18px 18px 22px;display:flex;flex-direction:column;gap:12px}
.card .mini{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 4px}
.card .mini span{font:800 17px/1 var(--disp);letter-spacing:.05em;padding:9px 11px 7px;background:var(--paper);border:2px solid var(--ink);border-radius:7px}
.card .mini span.x{background:var(--signal);border-color:var(--signal);color:var(--on-signal);transform:rotate(-3deg)}
.card p{margin:0}
.chips{display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0;list-style:none}
.chips li{font-size:13px;font-weight:600;padding:2px 11px;border-radius:99px;border:2px solid var(--line);color:var(--muted)}
.card .row{margin-top:auto;padding-top:6px}
.card.soon{border-style:dashed;border-color:var(--line);box-shadow:none;background:transparent;justify-content:center;min-height:240px}
.about-blurb{max-width:36em}
.about-blurb p{margin:0 0 14px}

/* ---- text pages ---- */
.prose{max-width:40em}
.prose h1{font-size:clamp(46px,11vw,72px);margin:28px 0 16px}
.prose h2{font-size:27px;margin:34px 0 8px}
.prose h3{margin:22px 0 6px}
.prose p,.prose li{margin:0 0 14px}
.prose ul,.prose ol{padding-left:22px;margin:0 0 14px}
.todo{background:#E9AE22;color:#14202B;padding:1px 6px;border-radius:4px;font-weight:700}
.table-wrap{overflow-x:auto;margin:6px 0 18px}
table.tbl{width:100%;border-collapse:collapse;font-size:16px}
.tbl th,.tbl td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl th{font-size:13px;color:var(--muted);border-bottom:2px solid var(--ink)}
.tbl td:nth-child(n+3){font-variant-numeric:tabular-nums}
.tier-dot{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:8px;vertical-align:-1px}
.demo{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 6px}
.demo span{font:800 24px/1 var(--disp);letter-spacing:.04em;padding:14px 14px 12px;background:var(--card);border:2px solid var(--ink);border-radius:8px;box-shadow:0 4px 0 var(--ink)}
.demo span.x{background:var(--signal);border-color:var(--signal);color:var(--on-signal);box-shadow:0 4px 0 color-mix(in srgb,var(--signal) 55%,#000);transform:rotate(-3deg)}
.cap{font-size:15px;color:var(--muted);margin:0 0 18px}
.callout{border-left:5px solid var(--signal);padding:2px 0 2px 16px;margin:18px 0}
.site-foot{margin:56px 0 0;padding-top:18px;border-top:2px solid var(--ink);display:flex;flex-wrap:wrap;gap:8px 20px;font-size:14px}
.site-foot a{color:var(--muted)}
.site-foot span{color:var(--muted);margin-left:auto}
@media (prefers-reduced-motion: reduce){.btn{transition:none}}
@media (max-width:520px){.tbl th,.tbl td{padding:9px 6px;white-space:normal}.wordmark{font-size:23px}}
@media (max-width:420px){.wrap{padding:12px 14px 44px}.nav{gap:14px}.site-foot span{margin-left:0;width:100%}}

/* Overflap tile (city sky card, same buttons as Double Agent) */
.card.ofc-card{position:relative;overflow:hidden;border:0;color:#fff4e8;padding:20px 20px 22px;min-height:340px;
  background:linear-gradient(180deg,#2f2a63 0%,#9d4b85 58%,#ffa774 100%);box-shadow:0 10px 30px rgba(40,20,70,.35);font-family:"Karla",var(--ui)}
.ofc-sky{position:absolute;inset:0;width:100%;height:100%}
.ofc-text{position:relative;z-index:1;display:flex;flex-direction:column;gap:10px}
.ofc-tag{align-self:flex-start;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;background:rgba(20,12,40,.4);padding:4px 9px;border-radius:999px}
.ofc-title{font-family:"Shrikhand",Georgia,serif;font-size:38px;line-height:1;margin:2px 0 0;color:#fff4e8;text-shadow:0 3px 0 rgba(40,15,60,.45)}
.ofc-card p.ofc-sub{font-size:16px;font-weight:500;max-width:30ch;line-height:1.4;margin:0}
.ofc-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.ofc-chips li{font:800 12px/1 var(--ui);padding:7px 11px;border-radius:999px;background:rgba(20,12,40,.4);border:1px solid rgba(255,244,232,.35)}
.ofc-card .row{position:relative;z-index:1;margin-top:auto;padding-top:96px}
.ofc-card .btn.primary{background:#ffcf6e;border-color:#ffcf6e;color:#2a1840;box-shadow:0 4px 0 #c98f2e}
.ofc-card .btn.primary:hover{box-shadow:0 5px 0 #c98f2e}
.ofc-card .btn.primary:active{box-shadow:0 1px 0 #c98f2e}
.ofc-card .btn:not(.primary){background:#fff4e8;border-color:#2a1840;color:#2a1840;box-shadow:0 4px 0 #2a1840}
.ofc-bird{transform-box:fill-box;transform-origin:center;animation:ofc-bob 2.6s ease-in-out infinite}
.ofc-bird.b2{animation-delay:-.9s}.ofc-bird.b3{animation-delay:-1.7s}
@keyframes ofc-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){.ofc-bird{animation:none}}

/* World Tour tile (morning sky card, same buttons) */
.card.wt-card{position:relative;overflow:hidden;border:0;color:#10324d;padding:20px 20px 22px;min-height:340px;
  background:linear-gradient(180deg,#8fd0ff 0%,#c9ecff 55%,#fff1cf 100%);box-shadow:0 10px 30px rgba(30,90,140,.28)}
.wt-sky{position:absolute;inset:0;width:100%;height:100%}
.wt-text{position:relative;z-index:1;display:flex;flex-direction:column;gap:10px}
.wt-tag{align-self:flex-start;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;background:rgba(255,255,255,.65);padding:4px 9px;border-radius:999px}
.wt-title{font-family:"Lilita One","Arial Rounded MT Bold",Impact,sans-serif;font-size:40px;line-height:1;margin:2px 0 0;color:#0f4c81;text-shadow:0 3px 0 rgba(255,255,255,.7)}
.wt-card p.wt-sub{font-size:16px;font-weight:600;max-width:30ch;line-height:1.4;margin:0}
.wt-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.wt-chips li{font:800 12px/1 var(--ui);padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.65);border:1px solid rgba(16,50,77,.25)}
.wt-card .row{position:relative;z-index:1;margin-top:auto;padding-top:96px}
.wt-card .btn.primary{background:#ff8a3d;border-color:#10324d;color:#10324d;box-shadow:0 4px 0 #10324d}
.wt-card .btn:not(.primary){background:#fff;border-color:#10324d;color:#10324d;box-shadow:0 4px 0 #10324d}
.wt-plane{animation:wt-fly 4s ease-in-out infinite}
@keyframes wt-fly{0%,100%{transform:translate(0,0)}50%{transform:translate(8px,-6px)}}
@media (prefers-reduced-motion:reduce){.wt-plane{animation:none}}

/* Double Agent tile (scorebug look from the game, same buttons as the others) */
.card.da-card{position:relative;overflow:hidden;border:0;color:#F2F6F9;padding:20px 20px 24px;min-height:340px;
  background:linear-gradient(180deg,#1C3144 0%,#14202B 100%);box-shadow:0 10px 30px rgba(10,20,30,.4);font-family:"Instrument Sans",var(--ui)}
.card.da-card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:8px;background:linear-gradient(90deg,#2A9D8F 0 20%,#3A72E0 20% 40%,#E9AE22 40% 60%,#EE7B30 60% 80%,#D63B26 80% 100%)}
.da-top{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:10px}
.da-tag{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;background:rgba(255,255,255,.1);padding:4px 9px;border-radius:999px}
.da-pips{display:flex;gap:6px}
.da-pips i{width:20px;height:20px;border-radius:50%;background:var(--c);border:2px solid rgba(255,255,255,.25)}
.da-text{position:relative;z-index:1;display:flex;flex-direction:column;gap:12px;margin-top:10px}
.da-title{font-family:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;font-weight:900;font-size:54px;line-height:.9;text-transform:uppercase;letter-spacing:.005em;margin:0;color:#F2F6F9}
.da-tiles{display:flex;flex-wrap:wrap;gap:8px}
.da-tiles span{font:800 17px/1 "Big Shoulders Display","Arial Narrow",Impact,sans-serif;letter-spacing:.05em;padding:9px 11px 7px;background:#F8FAFC;color:#14202B;border:2px solid #14202B;border-radius:7px;box-shadow:0 3px 0 rgba(0,0,0,.45)}
.da-tiles span.x{background:#D63B26;border-color:#D63B26;color:#fff;transform:rotate(-3deg)}
.da-card p.da-sub{font-size:16px;line-height:1.4;max-width:32ch;margin:0;color:#D6E0E8}
.da-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.da-chips li{font:800 12px/1 var(--ui);padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.28)}
.da-card .row{position:relative;z-index:1;margin-top:auto;padding-top:22px}
.da-card .btn.primary{background:#D63B26;border-color:#D63B26;color:#fff;box-shadow:0 4px 0 #7d1f12}
.da-card .btn.primary:hover{box-shadow:0 5px 0 #7d1f12}
.da-card .btn.primary:active{box-shadow:0 1px 0 #7d1f12}
.da-card .btn:not(.primary){background:#F8FAFC;border-color:#14202B;color:#14202B;box-shadow:0 4px 0 rgba(0,0,0,.5)}

/* Over / Under tile (dark honeycomb, red and green) */
.card.ou-card{position:relative;overflow:hidden;border:0;color:#e7f2ef;padding:20px 20px 22px;min-height:340px;font-family:"Inter",var(--ui);
  background-color:#0c1416;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='%2337d595' stroke-opacity='.12' stroke-width='1.5'/%3E%3Cpath d='M28 0L28 34L0 50L0 84L28 100L56 84L56 50L28 34' fill='none' stroke='%2337d595' stroke-opacity='.12' stroke-width='1.5'/%3E%3C/svg%3E"),radial-gradient(70% 60% at 15% 0%,rgba(55,213,149,.16),transparent 70%),radial-gradient(70% 60% at 90% 100%,rgba(255,93,105,.18),transparent 70%);box-shadow:0 10px 30px rgba(8,16,18,.45)}
.ou-text{position:relative;z-index:1;display:flex;flex-direction:column;gap:10px}
.ou-tag{align-self:flex-start;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;background:rgba(255,255,255,.1);padding:4px 9px;border-radius:999px}
.ou-title{font-family:"Chakra Petch","Arial Narrow",Impact,sans-serif;font-weight:700;font-size:44px;line-height:1;margin:2px 0 0;text-transform:uppercase;letter-spacing:.03em}
.ou-title b{color:#ff5d69}.ou-title u{color:#37d595;text-decoration:none}
.ou-card p.ou-sub{font-size:16px;line-height:1.4;max-width:32ch;margin:0;color:#cfe0dc}
.ou-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.ou-chips li{font:800 12px/1 var(--ui);padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.28)}
.ou-art{position:relative;z-index:1;width:100%;max-width:300px;margin-top:auto;padding-top:14px}
.ou-hex{animation:ou-slide 5s ease-in-out infinite}
@keyframes ou-slide{0%,100%{transform:translateX(0)}50%{transform:translateX(-120px)}}
.ou-card .row{position:relative;z-index:1;margin-top:0;padding-top:14px}
.ou-card .btn.primary{background:linear-gradient(90deg,#ff5d69,#37d595);border-color:#0c1416;color:#0c1416;box-shadow:0 4px 0 #0c1416}
.ou-card .btn.primary:hover{box-shadow:0 5px 0 #0c1416}.ou-card .btn.primary:active{box-shadow:0 1px 0 #0c1416}
.ou-card .btn:not(.primary){background:#e7f2ef;border-color:#0c1416;color:#0c1416;box-shadow:0 4px 0 #0c1416}
@media (prefers-reduced-motion:reduce){.ou-hex{animation:none}}

/* Affix-It tile (open dictionary, parchment and ink) */
.card.af-card{position:relative;overflow:hidden;border:0;color:#2d2118;padding:20px 20px 22px;min-height:340px;font-family:"Lora",Georgia,serif;
  background:linear-gradient(180deg,#f5ebd0,#ead9ac);box-shadow:0 0 0 5px #5a2a22,0 12px 30px rgba(40,20,8,.45)}
.af-text{position:relative;z-index:1;display:flex;flex-direction:column;gap:10px}
.af-tag{align-self:flex-start;font:800 11px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;background:#a8322d;color:#fff;padding:5px 9px;border-radius:999px}
.af-title{font-family:"Playfair Display",Georgia,serif;font-weight:900;font-size:46px;line-height:1;margin:2px 0 0;color:#2d2118}
.af-card p.af-sub{font-size:16px;line-height:1.4;max-width:34ch;margin:0;color:#4a3a2b}
.af-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.af-chips li{font:800 12px/1 var(--ui);padding:7px 11px;border-radius:999px;background:rgba(45,33,24,.08);border:1px solid rgba(45,33,24,.3)}
.af-art{position:relative;z-index:1;margin-top:auto;padding:12px 0 0}
.af-head{font:900 34px/1 "Playfair Display",Georgia,serif;margin-bottom:4px}.af-head b{color:#a8322d}
.af-line{position:relative;display:flex;align-items:flex-end;gap:8px;height:34px;border-bottom:1px solid #c9b78f;font:700 26px/1 "Caveat","Segoe Script",cursive;color:#2b2f45}
.af-line span{display:inline-block;padding-right:8px}
.af-line i{font-style:normal;color:#b98211;font-size:18px;padding-bottom:4px;opacity:1}
.af-line em{position:absolute;bottom:2px;width:28px;height:28px;margin-left:-4px;background:linear-gradient(135deg,transparent 0 40%,#f3c53a 40% 70%,#4a4a4a 70%);transform:rotate(0deg);clip-path:polygon(0 100%,18% 70%,100% 0,100% 20%,30% 100%);display:none}
.af-card .row{position:relative;z-index:1;margin-top:0;padding-top:14px}
.af-card .btn.primary{background:#a8322d;border-color:#2d2118;color:#fff;box-shadow:0 4px 0 #2d2118}
.af-card .btn.primary:hover{box-shadow:0 5px 0 #2d2118}.af-card .btn.primary:active{box-shadow:0 1px 0 #2d2118}
.af-card .btn:not(.primary){background:#fffaf0;border-color:#2d2118;color:#2d2118;box-shadow:0 4px 0 #2d2118}

/* Split Second tile (carbon dashboard, hazard stripe, a stopwatch that sweeps and then goes blank) */
.card.ss-card{position:relative;overflow:hidden;border:0;color:#f3efe6;padding:30px 20px 22px;min-height:430px;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.028) 0 3px,transparent 3px 7px),radial-gradient(70% 50% at 72% 70%,rgba(255,74,61,.42),transparent 72%),linear-gradient(180deg,#161d27,#07090d);box-shadow:0 0 0 4px #2a3342,0 12px 30px rgba(0,0,0,.5)}
.card.ss-card::before{content:"";position:absolute;left:-10%;right:-10%;top:0;height:11px;background:repeating-linear-gradient(135deg,#ff4a3d 0 13px,#0b0e13 13px 26px)}
.ss-text{position:relative;z-index:1;display:flex;flex-direction:column;gap:10px}
.ss-tag{align-self:flex-start;font:800 11px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;background:#ff4a3d;color:#fff;padding:5px 9px;border-radius:3px;transform:skewX(-10deg)}
.ss-title{font-family:"Barlow Condensed","Arial Narrow",Impact,sans-serif;font-weight:800;font-style:italic;font-size:66px;line-height:.88;margin:2px 0 0;text-transform:uppercase;letter-spacing:.01em;color:#f3efe6;transform:skewX(-8deg);transform-origin:left bottom;text-shadow:4px 4px 0 #ff4a3d}
.ss-card p.ss-sub{font-size:16px;line-height:1.4;max-width:34ch;margin:0;color:#b9c2cf}
.ss-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.ss-chips li{font:800 12px/1 var(--ui);padding:7px 11px;border-radius:3px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);transform:skewX(-8deg)}
.ss-art{position:relative;z-index:1;margin-top:auto;padding:14px 0 0;height:230px}
.ss-speed{position:absolute;left:0;top:34px;width:42%;height:150px}
.ss-speed i{position:absolute;left:0;height:3px;border-radius:2px;background:linear-gradient(90deg,transparent,#ff4a3d);animation:ssLine 1.1s linear infinite}
.ss-speed i:nth-child(1){top:10px;width:90%}.ss-speed i:nth-child(2){top:40px;width:70%;animation-delay:.25s}.ss-speed i:nth-child(3){top:72px;width:100%;animation-delay:.5s}.ss-speed i:nth-child(4){top:104px;width:60%;animation-delay:.15s}.ss-speed i:nth-child(5){top:134px;width:80%;animation-delay:.7s}
@keyframes ssLine{0%{transform:translateX(-30%);opacity:0}30%{opacity:1}100%{transform:translateX(40%);opacity:0}}
.ss-watch{position:absolute;right:4px;top:0;width:196px;height:206px}
.ss-crown{position:absolute;left:50%;top:0;width:34px;height:16px;margin-left:-17px;border-radius:5px;background:linear-gradient(#e9edf2,#7d8794)}
.ss-btn{position:absolute;right:20px;top:14px;width:14px;height:20px;border-radius:4px;background:linear-gradient(#e9edf2,#7d8794);transform:rotate(38deg)}
.ss-face{position:absolute;left:0;right:0;bottom:0;height:188px;border-radius:50%;background:radial-gradient(circle at 50% 38%,#202a39,#0a0e14);box-shadow:0 0 0 9px #b9c2cf,0 0 0 12px #3b434e,0 0 40px rgba(255,74,61,.35)}
.ss-ticks{position:absolute;inset:8px;border-radius:50%;background:repeating-conic-gradient(from -1deg,#f3efe6 0 2deg,transparent 2deg 18deg);-webkit-mask:radial-gradient(circle,transparent 80%,#000 81%);mask:radial-gradient(circle,transparent 80%,#000 81%)}
.ss-hw{position:absolute;inset:0;animation:ssSweep 5s linear infinite}
.ss-hw i{position:absolute;left:50%;top:9%;width:5px;height:42%;margin-left:-2.5px;border-radius:3px;background:linear-gradient(#ff4a3d,#ff8a7d);box-shadow:0 0 10px rgba(255,74,61,.8)}
.ss-hw::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#ff4a3d;box-shadow:0 0 0 3px #0a0e14}
@keyframes ssSweep{to{transform:rotate(360deg)}}
.ss-read{position:absolute;left:0;right:0;top:56%;text-align:center}
.ss-lab{display:block;font:700 9px/1 var(--ui);letter-spacing:.22em;color:#8e98a8;margin-bottom:5px}
.ss-num{position:relative;display:block;height:32px}
.ss-num span{position:absolute;left:0;right:0;top:0;font:500 30px/32px "DM Mono",ui-monospace,Menlo,monospace;color:#f3efe6;opacity:0}
.ss-num .w1{animation:ssw1 5s steps(1) infinite}.ss-num .w2{animation:ssw2 5s steps(1) infinite}.ss-num .w3{animation:ssw3 5s steps(1) infinite;color:#8e98a8;letter-spacing:.1em}.ss-num .w4{animation:ssw4 5s steps(1) infinite;color:#34d98b}
@keyframes ssw1{0%{opacity:1}20%,100%{opacity:0}}
@keyframes ssw2{0%,19.9%{opacity:0}20%{opacity:1}40%,100%{opacity:0}}
@keyframes ssw3{0%,39.9%{opacity:0}40%{opacity:1}75%,100%{opacity:0}}
@keyframes ssw4{0%,74.9%{opacity:0}75%{opacity:1}97%,100%{opacity:0}}
.ss-sq{position:absolute;left:0;bottom:6px;display:flex;gap:6px}
.ss-sq i{width:24px;height:24px;border-radius:5px;box-shadow:inset 0 -4px 0 rgba(0,0,0,.25)}
.ss-sq i:nth-child(1),.ss-sq i:nth-child(3),.ss-sq i:nth-child(5){background:#34d98b}.ss-sq i:nth-child(2){background:#ffc83d}.ss-sq i:nth-child(4){background:#ff8a3d}
.ss-card .row{position:relative;z-index:1;margin-top:0;padding-top:14px}
.ss-card .btn.primary{background:#ff4a3d;border-color:#0b0e13;color:#fff;box-shadow:0 4px 0 #0b0e13}
.ss-card .btn.primary:hover{box-shadow:0 5px 0 #0b0e13}.ss-card .btn.primary:active{box-shadow:0 1px 0 #0b0e13}
.ss-card .btn:not(.primary){background:#f3efe6;border-color:#0b0e13;color:#0b0e13;box-shadow:0 4px 0 #0b0e13}

/* The Lineup tile (a bold timeline graph with a pulse travelling along it) */
.card.lu-card{position:relative;overflow:hidden;border:0;color:#f2efe8;padding:20px 20px 22px;min-height:430px;
  background:radial-gradient(90% 55% at 15% 0%,rgba(255,200,61,.26),transparent 70%),repeating-linear-gradient(to bottom,transparent 0 27px,rgba(242,182,50,.07) 27px 28px),repeating-linear-gradient(to right,transparent 0 39px,rgba(242,182,50,.06) 39px 40px),linear-gradient(180deg,#221b11,#120e08);box-shadow:0 0 0 4px #6b5630,0 12px 30px rgba(0,0,0,.5)}
.lu-text{position:relative;z-index:1;display:flex;flex-direction:column;gap:10px;margin-bottom:22px}
.lu-tag{align-self:flex-start;font:800 11px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;background:#f2b632;color:#201a05;padding:5px 9px;border-radius:999px}
.lu-title{font-family:"Cinzel","Barlow Condensed",Georgia,serif;font-weight:800;font-size:46px;line-height:1;margin:2px 0 0;text-transform:uppercase;letter-spacing:.03em;color:#f4ecd8;text-shadow:0 3px 0 #6b5630}
.lu-card p.lu-sub{font-size:16px;line-height:1.4;max-width:34ch;margin:0;color:#cbbfa6}
.lu-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.lu-chips li{font:800 12px/1 var(--ui);padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(242,182,50,.45)}
.lu-art{position:relative;z-index:1;margin-top:auto;height:178px}
.lu-axis{position:absolute;left:0;right:16px;top:50%;height:9px;margin-top:-4px;border-radius:5px;background:linear-gradient(90deg,#c88f12,#f2b632);box-shadow:0 0 14px rgba(242,182,50,.6)}
.lu-ticks{position:absolute;left:0;right:16px;top:50%;height:26px;margin-top:-13px;background:repeating-linear-gradient(to right,rgba(255,214,110,.9) 0 2px,transparent 2px 7.4%)}
.lu-ar{position:absolute;right:0;top:50%;margin-top:-15px;border:15px solid transparent;border-left:20px solid #f2b632;border-right:0;filter:drop-shadow(0 0 6px rgba(242,182,50,.7))}
.lu-pulse{position:absolute;top:50%;left:0;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;background:#fff6c7;box-shadow:0 0 0 5px rgba(255,246,199,.25),0 0 22px #ffd96a;animation:luPulse 4.5s ease-in-out infinite}
@keyframes luPulse{0%{left:2%}100%{left:94%}}
.lu-lab{position:absolute;top:50%;font:800 10px/1 var(--ui);letter-spacing:.2em;color:#201a05;background:#f2b632;border-radius:999px;padding:5px 8px}
.lu-lab.l{left:0;margin-top:20px}.lu-lab.r{right:6px;margin-top:20px}
.lu-n{position:absolute;top:50%;width:0;height:0}
.lu-n b{position:absolute;left:-23px;width:46px;height:46px;border-radius:9px;display:grid;place-items:center;font-size:26px;background:linear-gradient(180deg,#f4eddb,#d9ceb3);border:3px solid #f2b632;box-shadow:0 5px 0 rgba(0,0,0,.35)}
.lu-n u{position:absolute;left:-26px;width:52px;text-align:center;text-decoration:none;font:800 12px/1 "DM Mono",ui-monospace,Menlo,monospace;color:#201a05;background:#f2b632;border-radius:5px;padding:4px 0}
.lu-n::before{content:"";position:absolute;left:-1.5px;width:3px;background:#f2b632}
.lu-n.up b{top:-76px}.lu-n.up u{top:-96px}.lu-n.up::before{top:-30px;height:30px}
.lu-n.dn b{top:30px}.lu-n.dn u{top:82px}.lu-n.dn::before{top:0;height:30px}
.lu-n.up u{top:-100px}
.lu-card .row{position:relative;z-index:1;margin-top:0;padding-top:14px}
.lu-card .btn.primary{background:#f2b632;border-color:#120e08;color:#201a05;box-shadow:0 4px 0 #120e08}
.lu-card .btn.primary:hover{box-shadow:0 5px 0 #120e08}.lu-card .btn.primary:active{box-shadow:0 1px 0 #120e08}
.lu-card .btn:not(.primary){background:#f4ecd8;border-color:#120e08;color:#120e08;box-shadow:0 4px 0 #120e08}

/* The Alibi tile (rainy alley, neon sign, a case file with a stamp that lands) */
.card.al-card{position:relative;overflow:hidden;border:0;color:#ece6d6;padding:20px 20px 22px;min-height:470px;font-family:"Inter",var(--ui);
  background:linear-gradient(180deg,#0a0e15 0%,#0e1520 58%,#07090d 100%);box-shadow:0 0 0 4px #1c2533,0 12px 34px rgba(0,0,0,.6)}
.al-city{position:absolute;left:0;right:0;bottom:0;width:100%;height:82%;z-index:0}
.al-w{animation:alWin 6s steps(1) infinite}.al-w.b{animation-delay:-2s}.al-w.c{animation-delay:-4s}
@keyframes alWin{0%{opacity:1}40%{opacity:.35}43%{opacity:1}80%{opacity:1}82%{opacity:.5}84%{opacity:1}}
.al-rain{position:absolute;left:0;right:0;top:-260px;bottom:0;z-index:1;pointer-events:none;background-image:repeating-linear-gradient(104deg,transparent 0 9px,rgba(180,205,240,.24) 9px 10px,transparent 10px 29px);animation:alRain .95s linear infinite}
.al-rain::after{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(104deg,transparent 0 17px,rgba(180,205,240,.14) 17px 18px,transparent 18px 47px);animation:alRain 1.5s linear infinite}
@keyframes alRain{from{transform:translate(0,0)}to{transform:translate(-75px,260px)}}
.al-text{position:relative;z-index:2;display:flex;flex-direction:column;gap:10px}
.al-tag{align-self:flex-start;font:800 11px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;background:#ff3b4a;color:#fff;padding:5px 9px;border-radius:3px}
.al-title{font-family:"Bebas Neue","Barlow Condensed",Impact,sans-serif;font-weight:400;font-size:74px;line-height:.9;margin:2px 0 0;text-transform:uppercase;letter-spacing:.07em;color:#ffd9dc;text-shadow:0 0 6px #ff3b4a,0 0 20px #ff3b4a,0 0 42px rgba(255,59,74,.65);animation:alFlick 6s infinite}
@keyframes alFlick{0%,100%{opacity:1}46%{opacity:1}47%{opacity:.5}48%{opacity:1}50%{opacity:.72}51%{opacity:1}}
.al-card p.al-sub{font-size:16px;line-height:1.4;max-width:34ch;margin:0;color:#c9d3e0;text-shadow:0 1px 6px #07090d,0 0 14px #07090d}
.al-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.al-chips li{font:800 12px/1 var(--ui);padding:7px 11px;border-radius:3px;background:rgba(255,255,255,.06);border:1px solid rgba(255,207,110,.4);color:#ffe7a8}
.al-file{position:relative;z-index:2;margin:22px 4px 0;padding:14px 12px 12px;background:linear-gradient(180deg,#e9e0c9,#d2c4a2);color:#1d1812;border-radius:3px 8px 4px 4px;transform:rotate(-1.6deg);box-shadow:0 8px 0 rgba(0,0,0,.45),0 16px 24px rgba(0,0,0,.5);font-family:"Special Elite","Courier New",monospace}
.al-file::before{content:"CASE FILE No. 0001";position:absolute;left:0;top:-21px;height:22px;padding:0 12px;display:flex;align-items:center;border-radius:8px 8px 0 0;background:#d9c58f;font:400 13px/1 "Bebas Neue",Impact,sans-serif;letter-spacing:.12em;color:#4a3a18}
.al-l{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:14px;line-height:1.25;border-bottom:1px dashed rgba(60,45,20,.35)}
.al-l:last-of-type{border-bottom:0}
.al-l span{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:15px;background:#16110a;box-shadow:0 0 0 2px #16110a,0 0 0 3px #b9a56a;filter:grayscale(1)}
.al-l.x em{font-style:normal;text-decoration:line-through;text-decoration-color:#c4202e;text-decoration-thickness:2px}
.al-stamp{position:absolute;right:10px;bottom:10px;font:400 34px/1 "Bebas Neue",Impact,sans-serif;letter-spacing:.14em;color:#c4202e;border:4px solid #c4202e;border-radius:5px;padding:2px 10px 0;transform:rotate(-10deg);opacity:0;animation:alStamp 5.5s infinite;background:rgba(233,224,201,.5)}
@keyframes alStamp{0%,58%{opacity:0;transform:rotate(-10deg) scale(2.4)}64%{opacity:.95;transform:rotate(-10deg) scale(1)}70%{transform:rotate(-10deg) scale(1.06)}74%,92%{opacity:.95;transform:rotate(-10deg) scale(1)}100%{opacity:0;transform:rotate(-10deg) scale(1)}}
.al-card .row{position:relative;z-index:2;margin-top:0;padding-top:20px}
.al-card .btn.primary{background:#ff3b4a;border-color:#07090d;color:#fff;box-shadow:0 4px 0 #07090d,0 0 20px rgba(255,59,74,.35)}
.al-card .btn.primary:hover{box-shadow:0 5px 0 #07090d,0 0 24px rgba(255,59,74,.5)}.al-card .btn.primary:active{box-shadow:0 1px 0 #07090d}
.al-card .btn:not(.primary){background:#e9e0c9;border-color:#07090d;color:#1d1812;box-shadow:0 4px 0 #07090d}
@media (prefers-reduced-motion:reduce){.al-rain,.al-rain::after,.al-w,.al-title,.al-stamp,.ss-hw,.ss-speed i,.ss-num span,.lu-pulse{animation:none!important}.al-stamp{opacity:.95;transform:rotate(-10deg)}.ss-num .w1{opacity:1}}


/* weekly leaderboard banner on the home page */
.lb-banner{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:22px 0 4px;padding:16px 20px;border-radius:16px;border:2px solid var(--ink,#12302C);background:var(--card,#fff);color:inherit;text-decoration:none;box-shadow:0 4px 0 var(--ink,#12302C)}
.lb-banner b{display:block;font-size:19px}.lb-banner i{display:block;font-style:normal;opacity:.75;font-size:14px;margin-top:2px}
.lb-banner .go{font-weight:800;white-space:nowrap}
.lb-banner:hover{transform:translateY(-1px)}
@media (max-width:520px){.lb-banner{flex-direction:column;align-items:flex-start}}

/* four nav links: let the header wrap on narrow phones instead of overflowing */
@media (max-width:560px){.site-head{flex-wrap:wrap;row-gap:4px}.nav{flex-wrap:wrap;gap:6px 16px;font-size:14px}}

.wt-uc{align-self:flex-start;font:800 11px/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;background:#ffd84a;color:#2a2200;border:2px dashed #2a2200;padding:5px 9px;border-radius:6px}

/* ===== home layout controls (admin-driven) ===== */
.card[data-game]{position:relative}
.lvl-badge{position:absolute;top:14px;right:14px;z-index:5;font:900 11px/1 var(--ui);letter-spacing:.16em;text-transform:uppercase;padding:5px 9px;border-radius:999px;border:2px solid rgba(0,0,0,.55);box-shadow:0 2px 0 rgba(0,0,0,.35)}
.lvl-badge.easy{background:#3fd08a;color:#06301a}
.lvl-badge.medium{background:#ffc94a;color:#3a2a00}
.lvl-badge.hard{background:#ff5a47;color:#fff}
.da-top .lvl-badge{position:static;margin-left:auto}
.pick-ribbon{position:absolute;top:0;left:0;right:0;z-index:6;display:flex;align-items:center;justify-content:center;gap:8px;height:26px;background:repeating-linear-gradient(135deg,#ffd23f 0 14px,#f5b800 14px 28px);color:#2b1d00;font:900 12px/1 var(--ui);letter-spacing:.2em;text-transform:uppercase;border-bottom:2px solid rgba(0,0,0,.55)}
.card.is-pick{padding-top:50px!important;outline:3px solid #ffd23f;outline-offset:-3px}
.card.is-pick .lvl-badge{top:38px}
.card.is-pick .tagfix{margin-top:0}

/* ===== calm pass: every card keeps its look but has ONE gentle animation, like Over / Under ===== */
/* Double Agent: no dots; the odd word out gives a small wobble */
.da-pips{display:none}
.da-tiles span.x{animation:daWob 3.6s ease-in-out infinite}
@keyframes daWob{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg) translateY(-3px)}}
/* Affix-It: the gold stars gently pulse */
.af-line i{display:inline-block;animation:afStar 2.8s ease-in-out infinite}
.af-line.l3 i{animation-delay:-1.4s}
@keyframes afStar{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}
/* Split Second: smaller watch, one slow sweep, no speed lines, no flashing readout */
.card.ss-card{min-height:380px;padding:28px 20px 22px}
.ss-title{font-size:54px;text-shadow:3px 3px 0 #ff4a3d}
.ss-speed,.ss-sq{display:none}
.ss-art{height:150px;padding:0}
.ss-watch{right:50%;margin-right:-70px;width:140px;height:148px}
.ss-crown{width:26px;height:12px;margin-left:-13px}
.ss-btn{right:14px;top:10px;width:10px;height:14px}
.ss-face{height:134px;box-shadow:0 0 0 7px #b9c2cf,0 0 0 9px #3b434e,0 0 22px rgba(255,74,61,.22)}
.ss-hw{animation-duration:7s}
.ss-lab{font-size:8px;margin-bottom:3px}
.ss-num{height:24px}.ss-num span{font-size:22px;line-height:24px}
.ss-num .w1{animation:none!important;opacity:1;color:#f3efe6}
.card.ss-card{background:linear-gradient(180deg,#161d27,#07090d)}
/* The Lineup: simple timeline, five dots on a line, one pulse */
.card.lu-card{min-height:350px;background:linear-gradient(180deg,#221b11,#120e08)}
.lu-title{font-size:40px}
.lu-art{height:92px}
.lu-lab,.lu-n u,.lu-n::before,.lu-ticks{display:none}
.lu-axis{height:6px;margin-top:-3px;box-shadow:none}
.lu-ar{margin-top:-11px;border-width:11px;border-left-width:15px;filter:none}
.lu-n b,.lu-n.up b,.lu-n.dn b{top:-17px;left:-17px;width:34px;height:34px;font-size:17px;border-width:2px;box-shadow:0 3px 0 rgba(0,0,0,.35)}
.lu-n.up b{top:-50px}.lu-n.dn b{top:16px}
.lu-pulse{width:14px;height:14px;margin:-7px 0 0 -7px;box-shadow:0 0 0 4px rgba(255,246,199,.2),0 0 12px #ffd96a}
/* The Alibi: rain only, steady neon, a stamped case file */
.card.al-card{min-height:420px}
.al-w,.al-title,.al-stamp{animation:none!important}
.al-stamp{opacity:.92}
.al-title{font-size:58px;text-shadow:0 0 4px #ff3b4a,0 0 14px rgba(255,59,74,.7)}
.al-rain{opacity:.7}
.al-file .al-l:nth-of-type(3){display:none}
.al-file{margin-top:16px}
.al-stamp{bottom:8px}
@media (prefers-reduced-motion:reduce){.da-tiles span.x,.af-line i{animation:none!important}}

/* admin shortcut (only appears for admins) */
.nav a.admin-link{background:#ffd23f;color:#2b1d00;border-radius:999px;padding:3px 12px;font-weight:800}

/* no colored outline rings: cards match Over / Under */
.card.af-card{box-shadow:0 12px 30px rgba(40,20,8,.35)}
.card.ss-card{box-shadow:0 12px 30px rgba(0,0,0,.5)}
.card.lu-card{box-shadow:0 12px 30px rgba(0,0,0,.5)}

/* Double Agent: no rainbow strip. Split Second: no hazard stripe, plain white italic title */
.card.da-card::after{display:none}
.card.ss-card::before{display:none}
.card.ss-card{padding-top:20px}
.ss-title{text-shadow:none;color:#fff}

/* Define-It tile (a chalkboard where the wrong words get erased) */
.card.df-card{position:relative;overflow:hidden;border:0;color:#f3f0e6;padding:20px 20px 22px;min-height:430px;
  background:radial-gradient(ellipse at 28% 18%,rgba(255,255,255,.08),transparent 55%),radial-gradient(ellipse at 78% 72%,rgba(255,255,255,.05),transparent 50%),linear-gradient(160deg,#2a3b33,#1c2a23);box-shadow:0 10px 30px rgba(15,30,22,.45)}
.df-text{position:relative;z-index:1;display:flex;flex-direction:column;gap:10px}
.df-tag{align-self:flex-start;font:800 11px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;background:rgba(243,240,230,.14);color:#f3f0e6;padding:5px 9px;border-radius:999px}
.df-title{font-family:"Cabin Sketch","Caveat",cursive;font-weight:700;font-size:48px;line-height:1;margin:2px 0 0;color:#f3f0e6;text-shadow:0 0 8px rgba(255,255,255,.15)}
.df-card p.df-sub{font-size:16px;line-height:1.4;max-width:34ch;margin:0;color:rgba(243,240,230,.82)}
.df-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.df-chips li{font:800 12px/1 var(--ui);padding:7px 11px;border-radius:999px;background:rgba(243,240,230,.08);border:1px solid rgba(243,240,230,.35)}
.df-art{position:relative;z-index:1;margin:auto 0 0;padding:16px 0 4px}
.df-def{font:700 19px/1.1 "Caveat",cursive;color:rgba(243,240,230,.65);margin:0 0 4px 4px}
.df-w{position:relative;font:700 28px/1.15 "Caveat",cursive;color:#f3f0e6;padding:1px 4px 1px 22px;text-shadow:0 0 6px rgba(255,255,255,.14)}
.df-w::before{content:"\2013";position:absolute;left:4px;opacity:.55}
.df-w.e1{animation:dfE1 10s ease-in-out infinite}.df-w.e2{animation:dfE2 10s ease-in-out infinite}.df-w.e3{animation:dfE3 10s ease-in-out infinite}.df-w.e4{animation:dfE4 10s ease-in-out infinite}
.df-w svg{position:absolute;left:12px;top:-3px;width:calc(100% - 20px);max-width:210px;height:calc(100% + 6px);overflow:visible;pointer-events:none}
.df-w svg ellipse{fill:none;stroke:#f3f0e6;stroke-width:3;stroke-linecap:round;stroke-dasharray:300;animation:dfRing 10s ease-in-out infinite}
@keyframes dfE1{0%,18%{opacity:1;filter:none;transform:none}22%{transform:translateX(10px);filter:blur(.5px)}26%,90%{opacity:.2;filter:blur(1.6px);transform:translateX(2px)}96%,100%{opacity:1;filter:none;transform:none}}
@keyframes dfE2{0%,30%{opacity:1;filter:none;transform:none}34%{transform:translateX(10px);filter:blur(.5px)}38%,90%{opacity:.2;filter:blur(1.6px);transform:translateX(2px)}96%,100%{opacity:1;filter:none;transform:none}}
@keyframes dfE3{0%,42%{opacity:1;filter:none;transform:none}46%{transform:translateX(10px);filter:blur(.5px)}50%,90%{opacity:.2;filter:blur(1.6px);transform:translateX(2px)}96%,100%{opacity:1;filter:none;transform:none}}
@keyframes dfE4{0%,54%{opacity:1;filter:none;transform:none}58%{transform:translateX(10px);filter:blur(.5px)}62%,90%{opacity:.2;filter:blur(1.6px);transform:translateX(2px)}96%,100%{opacity:1;filter:none;transform:none}}
@keyframes dfRing{0%,64%{stroke-dashoffset:300}74%,90%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:300}}
.df-card .row{position:relative;z-index:1;margin-top:0;padding-top:16px}
.df-card .btn.primary{background:#f28c28;border-color:#14213d;color:#fff;box-shadow:0 4px 0 #14213d}
.df-card .btn.primary:hover{box-shadow:0 5px 0 #14213d}.df-card .btn.primary:active{box-shadow:0 1px 0 #14213d}
.df-card .btn:not(.primary){background:#f3f0e6;border-color:#14213d;color:#1c2a23;box-shadow:0 4px 0 #14213d}
@media (prefers-reduced-motion:reduce){.df-w.e1,.df-w.e2,.df-w.e3,.df-w.e4,.df-w svg ellipse{animation:none!important}.df-w.e1,.df-w.e2,.df-w.e3,.df-w.e4{opacity:.22;filter:blur(1.6px)}.df-w svg ellipse{stroke-dashoffset:0}}
/* v7 fixes */
.df-w.ans{display:table}
.df-w svg{left:16px;top:-5px;width:calc(100% - 10px);max-width:none;height:calc(100% + 10px)}
.df-w svg ellipse{stroke-linecap:butt;stroke-dasharray:300 400}
.ss-read{z-index:1}
.ss-hw{z-index:2}