/* ============================================================
   The Coding Cabana Game Jam — site styles
   Palette sampled from the club badge: night navy, cabana gold,
   cream, palm green, wave blue. Chunky offset shadows + pixel
   accents echo the pixel-art logo.
   ============================================================ */

/* ---------- tokens ---------- */
html[data-theme="dark"]{
  --bg:#101D36; --bg-deep:#0B1528; --surface:#182A47; --surface-2:#213555;
  --ink:#F2ECDC; --body:#B9C4D6; --muted:#8DA0BB;
  --gold:#D8A850; --gold-deep:#A87828; --green:#88C0B0; --waveblue:#9EC7DB;
  --line:rgba(242,236,220,.14); --line-strong:rgba(242,236,220,.30);
  --hard:#070F1F; --card-shadow:8px 8px 0 rgba(7,15,31,.62);
  --nav-bg:rgba(11,21,40,.92); --scrim:rgba(7,15,31,.82);
  --link:#E4BC6C;
}
html[data-theme="light"]{
  --bg:#F3EBD7; --bg-deep:#EADFC2; --surface:#FBF6E9; --surface-2:#F0E6CC;
  --ink:#1B2B45; --body:#48566E; --muted:#6E7B93;
  --gold:#B8871F; --gold-deep:#8F6812; --green:#2F7A5F; --waveblue:#2E6E8E;
  --line:rgba(27,43,69,.18); --line-strong:rgba(27,43,69,.38);
  --hard:#C9B78D; --card-shadow:8px 8px 0 #DFD2AC;
  --nav-bg:rgba(243,235,215,.92); --scrim:rgba(27,43,69,.46);
  --link:#8F6812;
}
:root{
  --btn-gold:#D8A850; --btn-ink:#14233F;
  --font-d:"Passion One",Impact,sans-serif;
  --font-b:"Nunito Sans",system-ui,sans-serif;
  --font-px:"Silkscreen",monospace;
  --navh:72px;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html:focus-within{scroll-behavior:smooth}
body{background:var(--bg);color:var(--body);font:400 16.5px/1.66 var(--font-b);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
::selection{background:rgba(216,168,80,.35)}
:focus-visible{outline:3px solid var(--green);outline-offset:2px;border-radius:4px}
a{color:var(--link);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{color:var(--ink)}
strong{color:var(--ink);font-weight:800}
.container{max-width:1140px;margin:0 auto;padding:0 24px}
.skip{position:fixed;left:16px;top:-70px;z-index:200;background:var(--btn-gold);color:var(--btn-ink);
  padding:12px 20px;border-radius:10px;font-weight:800;text-decoration:none;box-shadow:0 4px 0 var(--hard);transition:top .15s}
.skip:focus{top:14px}

/* ---------- type ---------- */
.d-hero,.d-xl,.d-l,.d-m{font-family:var(--font-d);font-weight:700;text-transform:uppercase;
  color:var(--ink);line-height:.96;letter-spacing:.5px}
.d-hero{font-size:clamp(2.7rem,6.6vw,4.7rem)}
.d-xl{font-size:clamp(2.1rem,4.6vw,3.2rem)}
.d-l{font-size:clamp(1.55rem,3vw,2.15rem)}
.d-m{font-size:1.3rem;letter-spacing:.8px}
.eyebrow{font:400 11px/1.6 var(--font-px);letter-spacing:2.5px;text-transform:uppercase;color:var(--gold)}
.lead{font-size:1.13rem;max-width:62ch}
.kicker{font:800 12px/1 var(--font-b);letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
.pxdate{font:400 10px/1.6 var(--font-px);letter-spacing:1px;color:var(--gold)}

/* ---------- buttons & chips ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:48px;padding:0 22px;
  border-radius:11px;font:800 13px/1 var(--font-b);letter-spacing:.7px;text-transform:uppercase;
  text-decoration:none;cursor:pointer;border:2px solid transparent;
  transition:transform .07s ease,box-shadow .07s ease,background .15s,color .15s}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--hard)!important}
.btn-primary{background:var(--btn-gold);color:var(--btn-ink);box-shadow:0 4px 0 var(--hard)}
.btn-primary:hover{background:#E4B95E;color:var(--btn-ink)}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--ink);box-shadow:0 4px 0 var(--hard)}
.btn-outline:hover{background:var(--ink);color:var(--bg)}
.btn-sm{height:40px;padding:0 16px;font-size:12px;border-radius:9px}
.btn svg{width:18px;height:18px;flex:none}
.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border-radius:999px;border:2px solid;
  font:400 9px/1 var(--font-px);letter-spacing:1.6px;text-transform:uppercase;white-space:nowrap}
.chip::before{content:"";width:7px;height:7px;background:currentColor;flex:none}
.chip-done{color:var(--green);border-color:var(--green)}
.chip-soon{color:var(--gold);border-color:var(--gold)}
.chip-plain{color:var(--muted);border-color:var(--line-strong)}
.chip-plain::before{display:none}
.linkline{font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:.6px}

/* ---------- sections & waves ---------- */
.sec{padding:88px 0}
.sec-head{max-width:720px;margin-bottom:44px}
.sec-head .d-xl{margin:10px 0 14px}
.wave{display:block;width:100%;height:22px;line-height:0}
.wave svg,.wave-svg{width:100%;height:100%;display:block}
.wave.flip{transform:scaleY(-1)}
.band{background:var(--surface)}
.band-deep{background:var(--bg-deep)}
.c-bg{color:var(--bg)}.c-surface{color:var(--surface)}.c-deep{color:var(--bg-deep)}

/* ---------- pixel sprites ---------- */
.px{image-rendering:pixelated}
.sprite-stage{position:relative;display:grid;place-items:center;min-height:340px}
.sprite-main{width:clamp(210px,24vw,300px);height:auto;
  filter:drop-shadow(12px 14px 0 rgba(7,15,31,.5))}
html[data-theme="light"] .sprite-main{filter:drop-shadow(12px 14px 0 rgba(143,104,18,.28))}
.sprite-side{position:absolute;width:64px;height:auto;opacity:.9;
  filter:drop-shadow(6px 7px 0 rgba(7,15,31,.45))}
html[data-theme="light"] .sprite-side{filter:drop-shadow(6px 7px 0 rgba(143,104,18,.25))}
.sprite-side.s1{left:4%;bottom:10%}
.card-ico{width:38px;height:auto;filter:drop-shadow(4px 4px 0 rgba(7,15,31,.4))}
html[data-theme="light"] .card-ico{filter:drop-shadow(4px 4px 0 rgba(143,104,18,.25))}

/* ---------- announcement banner ---------- */
.banner{background:var(--bg-deep);border-bottom:2px solid var(--line)}
.banner-bar{display:flex;align-items:center;gap:14px;padding:10px 0}
.banner-bar .pxdate{flex:none}
.banner-msg{font-size:13.5px;color:var(--body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.banner-toggle{margin-left:auto;flex:none;background:none;border:none;cursor:pointer;
  font:800 11px/1 var(--font-b);letter-spacing:1px;text-transform:uppercase;color:var(--gold);
  padding:8px 10px;border-radius:8px}
.banner-toggle:hover{color:var(--ink)}
.banner-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.banner-panel.open{grid-template-rows:1fr}
.banner-panel>div{overflow:hidden}
.banner-list{list-style:none;padding:6px 0 18px;display:flex;flex-direction:column;gap:12px}
.banner-list li{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:baseline}
.banner-list p{font-size:14px}
@media (max-width:640px){
  .banner-msg{white-space:normal;font-size:13px}
  .banner-list li{grid-template-columns:1fr;gap:2px}
}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:80;background:var(--nav-bg);backdrop-filter:blur(10px);
  border-bottom:2px solid var(--line)}
.nav-in{height:var(--navh);display:flex;align-items:center;gap:26px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.brand:hover{color:inherit}
.brand img{width:46px;height:auto}
.brand-tx{display:flex;flex-direction:column;line-height:1}
.brand-top{font:700 19px/1 var(--font-d);letter-spacing:1px;color:var(--ink);text-transform:uppercase}
.brand-sub{font:400 8px/1 var(--font-px);letter-spacing:4.5px;color:var(--gold);margin-top:4px;text-transform:uppercase}
.nav-links{display:flex;gap:4px;margin-left:auto}
.nav-links a{font:800 14px/1 var(--font-b);color:var(--body);text-decoration:none;
  padding:12px 13px;border-radius:9px}
.nav-links a:hover{color:var(--ink);background:var(--line)}
.nav-links a.active{color:var(--ink);box-shadow:inset 0 -3px 0 var(--gold);border-radius:9px 9px 0 0}
.nav-cta{flex:none}
.iconbtn{width:42px;height:42px;flex:none;border:2px solid transparent;background:transparent;color:var(--body);
  border-radius:10px;cursor:pointer;display:grid;place-items:center}
.iconbtn:hover{color:var(--gold);border-color:var(--line)}
html[data-theme="dark"] .ic-moon{display:none}
html[data-theme="light"] .ic-sun{display:none}
#menuBtn{display:none}
@media (max-width:1020px){
  :root{--navh:62px}
  .nav-links,.nav-cta{display:none}
  #menuBtn{display:grid}
  .brand img{width:38px}
  .brand-top{font-size:15.5px}
  .brand-sub{font-size:6.5px;letter-spacing:3.4px;margin-top:3px}
  .nav-in{gap:12px}
}

/* ---------- drawer ---------- */
.drawer-bg{position:fixed;inset:0;background:var(--scrim);z-index:90;opacity:0;pointer-events:none;transition:opacity .25s}
.drawer-bg.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(320px,86vw);background:var(--surface);z-index:95;
  transform:translateX(102%);transition:transform .28s ease;border-left:2px solid var(--line-strong);
  padding:18px;display:flex;flex-direction:column;gap:6px}
.drawer.open{transform:none}
.drawer-top{display:flex;justify-content:flex-end;margin-bottom:6px}
.drawer nav{display:flex;flex-direction:column}
.drawer nav a{font:800 16px/1 var(--font-b);color:var(--body);text-decoration:none;
  padding:15px 12px;border-radius:10px;border-left:4px solid transparent}
.drawer nav a:hover{color:var(--ink);background:var(--line)}
.drawer nav a.active{color:var(--ink);border-left-color:var(--gold);background:var(--line)}
.drawer .btn{margin-top:14px}

/* ---------- hero / carousel ---------- */
.hero{position:relative;background:linear-gradient(180deg,var(--bg-deep) 0%,#0D1A31 100%);overflow:hidden}
html[data-theme="light"] .hero{background:linear-gradient(180deg,#CFE4E4 0%,var(--bg-deep) 100%)}
.stars{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(242,236,220,.55),rgba(242,236,220,.55)),linear-gradient(rgba(242,236,220,.85),rgba(242,236,220,.85)),linear-gradient(rgba(242,236,220,.55),rgba(242,236,220,.55)),linear-gradient(rgba(242,236,220,.85),rgba(242,236,220,.85)),linear-gradient(rgba(242,236,220,.55),rgba(242,236,220,.55)),linear-gradient(rgba(216,168,80,.75),rgba(216,168,80,.75)),linear-gradient(rgba(242,236,220,.85),rgba(242,236,220,.85)),linear-gradient(rgba(216,168,80,.75),rgba(216,168,80,.75)),linear-gradient(rgba(242,236,220,.55),rgba(242,236,220,.55)),linear-gradient(rgba(216,168,80,.75),rgba(216,168,80,.75)),linear-gradient(rgba(242,236,220,.85),rgba(242,236,220,.85)),linear-gradient(rgba(242,236,220,.55),rgba(242,236,220,.55)),linear-gradient(rgba(242,236,220,.85),rgba(242,236,220,.85)),linear-gradient(rgba(242,236,220,.85),rgba(242,236,220,.85)),linear-gradient(rgba(216,168,80,.75),rgba(216,168,80,.75)),linear-gradient(rgba(216,168,80,.75),rgba(216,168,80,.75)),linear-gradient(rgba(242,236,220,.55),rgba(242,236,220,.55)),linear-gradient(rgba(242,236,220,.55),rgba(242,236,220,.55)),linear-gradient(rgba(242,236,220,.85),rgba(242,236,220,.85)),linear-gradient(rgba(242,236,220,.55),rgba(242,236,220,.55)),linear-gradient(rgba(216,168,80,.75),rgba(216,168,80,.75)),linear-gradient(rgba(242,236,220,.85),rgba(242,236,220,.85)),linear-gradient(rgba(242,236,220,.85),rgba(242,236,220,.85)),linear-gradient(rgba(242,236,220,.55),rgba(242,236,220,.55)),linear-gradient(rgba(216,168,80,.75),rgba(216,168,80,.75)),linear-gradient(rgba(216,168,80,.75),rgba(216,168,80,.75));background-position:51% 85%,69% 14%,8% 66%,12% 57%,31% 13%,8% 74%,81% 82%,74% 76%,29% 7%,38% 55%,16% 75%,88% 25%,74% 83%,13% 72%,73% 9%,64% 70%,60% 76%,39% 33%,11% 75%,64% 45%,37% 79%,66% 55%,20% 64%,86% 11%,41% 45%,77% 65%;background-size:2px 2px,2px 2px,4px 4px,2px 2px,2px 2px,3px 3px,2px 2px,2px 2px,2px 2px,2px 2px,4px 4px,4px 4px,4px 4px,3px 3px,2px 2px,2px 2px,3px 3px,3px 3px,2px 2px,4px 4px,3px 3px,2px 2px,3px 3px,2px 2px,4px 4px,3px 3px;background-repeat:no-repeat;}
html[data-theme="light"] .stars{display:none}
.sun{position:absolute;top:64px;right:9%;width:26px;height:26px;background:#D8A850;pointer-events:none;
  box-shadow:0 -36px 0 -7px #D8A850,0 36px 0 -7px #D8A850,-36px 0 0 -7px #D8A850,36px 0 0 -7px #D8A850,
  26px -26px 0 -9px #D8A850,-26px 26px 0 -9px #D8A850,26px 26px 0 -9px #D8A850,-26px -26px 0 -9px #D8A850}
html[data-theme="dark"] .sun{display:none}
.carousel{position:relative}
.track{display:flex;transition:transform .5s cubic-bezier(.22,.9,.3,1)}
.slide{min-width:100%}
.slide-in{display:grid;grid-template-columns:1.08fr .92fr;gap:44px;align-items:center;
  padding:78px 0 118px;min-height:520px}
.slide-copy .d-hero{margin:14px 0 18px}
.slide-copy .lead{margin-bottom:22px}
.chiprow{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:26px}
.btnrow{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.car-btn{position:absolute;top:44%;z-index:5;width:46px;height:46px;border-radius:12px;cursor:pointer;
  background:var(--surface);color:var(--ink);border:2px solid var(--line-strong);box-shadow:0 4px 0 var(--hard);
  display:grid;place-items:center;transition:transform .07s,box-shadow .07s,color .15s,border-color .15s}
.car-btn:hover{color:var(--gold);border-color:var(--gold)}
.car-btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--hard)}
.car-btn.prev{left:14px}.car-btn.next{right:14px}
.dots{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);display:flex;gap:12px;z-index:5}
.dots button{width:13px;height:13px;border-radius:2px;background:transparent;border:2px solid var(--line-strong);
  cursor:pointer;padding:0}
.dots button.on{background:var(--gold);border-color:var(--gold)}
.hero .wave{position:absolute;left:0;right:0;bottom:-1px}
@media (max-width:900px){
  .slide-in{grid-template-columns:1fr;padding:52px 0 118px;gap:20px;min-height:0}
  .sprite-stage{min-height:210px;order:-1}
  .sprite-main{width:170px;filter:drop-shadow(8px 9px 0 rgba(7,15,31,.5))}
  .sprite-side{display:none}
  .car-btn{width:40px;height:40px;top:auto;bottom:26px}
  .car-btn.prev{left:auto;right:74px}
}

/* ---------- cards ---------- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.grid2-uneven{display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center}
@media (max-width:900px){.grid2,.grid2-uneven{grid-template-columns:1fr;gap:26px}}
.card{background:var(--surface);border:2px solid var(--line-strong);border-radius:18px;
  box-shadow:var(--card-shadow);padding:28px;transition:transform .12s ease,box-shadow .12s ease}
.band .card{background:var(--surface-2)}
a.card{text-decoration:none;color:inherit;display:block}
.card:hover{transform:translate(-2px,-2px);box-shadow:10px 10px 0 rgba(7,15,31,.62)}
html[data-theme="light"] .card:hover{box-shadow:10px 10px 0 #DFD2AC}
.card-top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px}
.card .d-m{margin-bottom:4px}
.card .pxdate{display:block;margin-bottom:14px}
.card p{font-size:15.5px}
.card .btnrow{margin-top:20px}

/* ---------- timeline ---------- */
.tl{list-style:none;border-left:3px solid var(--line-strong);margin-left:8px;padding-left:30px;
  display:flex;flex-direction:column;gap:30px}
.tl li{position:relative}
.tl li::before{content:"";position:absolute;left:-40px;top:5px;width:15px;height:15px;background:var(--gold);
  box-shadow:3px 3px 0 var(--hard)}
.tl h3{font:800 15px/1.3 var(--font-b);letter-spacing:1px;text-transform:uppercase;color:var(--ink);margin:4px 0 6px}
.tl p{font-size:15.5px;max-width:66ch}

/* ---------- page hero & subnav ---------- */
.page-hero{position:relative;background:linear-gradient(180deg,var(--bg-deep) 0%,#0D1A31 100%);overflow:hidden;
  padding:72px 0 96px}
html[data-theme="light"] .page-hero{background:linear-gradient(180deg,#CFE4E4 0%,var(--bg-deep) 100%)}
.page-hero .d-hero{margin:14px 0 16px}
.page-hero .chiprow{margin:22px 0 0}
.page-hero .wave{position:absolute;left:0;right:0;bottom:-1px}
.subnav{position:sticky;top:var(--navh);z-index:60;background:var(--nav-bg);backdrop-filter:blur(10px);
  border-bottom:2px solid var(--line)}
.subnav-in{display:flex;gap:8px;padding:12px 0;overflow-x:auto;scrollbar-width:none}
.subnav-in::-webkit-scrollbar{display:none}
.subnav a{flex:none;font:800 12px/1 var(--font-b);letter-spacing:.8px;text-transform:uppercase;text-decoration:none;
  color:var(--muted);padding:10px 14px;border:2px solid transparent;border-radius:999px}
.subnav a:hover{color:var(--ink)}
.subnav a.on{color:var(--gold);border-color:var(--gold)}

/* ---------- doc / prose pages ---------- */
.doc{max-width:760px}
.doc h2{font:700 1.5rem/1.15 var(--font-d);letter-spacing:.8px;text-transform:uppercase;color:var(--ink);
  margin:52px 0 16px;display:flex;align-items:center;gap:12px}
.doc h2::before{content:"";width:12px;height:12px;background:var(--gold);flex:none;box-shadow:3px 3px 0 var(--hard)}
.doc h2:first-of-type{margin-top:8px}
.doc p{margin:0 0 16px;max-width:70ch}
.doc ul{list-style:none;display:flex;flex-direction:column;gap:13px;margin:0 0 18px}
.doc ul li{position:relative;padding-left:26px;max-width:70ch}
.doc ul li::before{content:"";position:absolute;left:2px;top:.56em;width:9px;height:9px;background:var(--gold)}
.doc .fine{font-size:13.5px;color:var(--muted)}
.effective{font:400 10px/1.8 var(--font-px);letter-spacing:1.5px;color:var(--muted);text-transform:uppercase}

/* ---------- aside "at a glance" ---------- */
.split{display:grid;grid-template-columns:1.5fr .9fr;gap:44px;align-items:start}
@media (max-width:900px){.split{grid-template-columns:1fr}}
.glance{background:var(--surface);border:2px solid var(--line-strong);border-radius:18px;
  box-shadow:var(--card-shadow);padding:24px;position:sticky;top:calc(var(--navh) + 72px)}
@media (max-width:900px){.glance{position:static}}
.glance h3{font:400 11px/1 var(--font-px);letter-spacing:2px;color:var(--gold);text-transform:uppercase;margin-bottom:16px}
.glance dl{display:grid;grid-template-columns:auto 1fr;gap:10px 16px;font-size:14px}
.glance dt{font-weight:800;color:var(--ink);text-transform:uppercase;font-size:11.5px;letter-spacing:1px;padding-top:2px}
.glance .btnrow{margin-top:20px;flex-direction:column;align-items:stretch}
.glance .btn{width:100%}

/* ---------- scaffold box ---------- */
.soon-box{border:3px dashed var(--line-strong);border-radius:18px;padding:44px 28px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:12px}
.soon-box .eyebrow{font-size:12px}
.soon-box p{max-width:44ch;font-size:15px}

/* ---------- CTA ---------- */
.cta{position:relative;background:var(--bg-deep);text-align:center;padding:0 0 96px}
.cta .d-xl{margin:12px 0 16px}
.cta p{max-width:52ch;margin:0 auto 30px}
.cta .btnrow{justify-content:center}

/* ---------- footer ---------- */
.foot{background:var(--bg-deep);border-top:2px solid var(--line)}
.foot-grid{display:grid;grid-template-columns:1.3fr .8fr .8fr .8fr;gap:34px;padding:56px 0 44px}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr;padding:40px 0 32px}}
@media (max-width:560px){.foot-grid{grid-template-columns:1fr}}
.foot-brand img{width:86px;margin-bottom:14px}
.foot-brand p{font-size:14px;max-width:30ch}
.fh{font:400 10px/1 var(--font-px);letter-spacing:2.5px;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.foot ul a{color:var(--body);text-decoration:none;font-size:14.5px;font-weight:600}
.foot ul a:hover{color:var(--gold)}
.foot-bottom{border-top:2px solid var(--line);padding:18px 0 26px;display:flex;flex-wrap:wrap;gap:12px;
  align-items:center;justify-content:space-between;font-size:13px;color:var(--muted)}
.foot-bottom .pxdate{color:var(--muted)}

/* ---------- toast (centered) ---------- */
.toast-wrap{position:fixed;inset:0;display:grid;place-items:center;pointer-events:none;z-index:150}
.toast{background:var(--surface);color:var(--ink);border:2px solid var(--line-strong);border-radius:16px;
  box-shadow:10px 10px 0 rgba(7,15,31,.55);padding:20px 28px;font:700 15px/1.5 var(--font-b);
  max-width:min(430px,86vw);text-align:center;opacity:0;transform:translateY(10px) scale(.97);
  transition:opacity .2s,transform .2s}
html[data-theme="light"] .toast{box-shadow:10px 10px 0 #DFD2AC}
.toast.show{opacity:1;transform:none}

/* ---------- popup ---------- */
.pop-bg{position:fixed;inset:0;background:var(--scrim);z-index:110;opacity:0;pointer-events:none;transition:opacity .25s}
.pop-bg.open{opacity:1;pointer-events:auto}
.pop{position:fixed;left:50%;top:50%;transform:translate(-50%,-48%) scale(.97);opacity:0;pointer-events:none;
  z-index:115;width:min(460px,92vw);background:var(--surface);border:2px solid var(--line-strong);
  border-radius:20px;box-shadow:12px 12px 0 rgba(7,15,31,.55);padding:34px 30px 30px;
  transition:opacity .22s,transform .22s}
html[data-theme="light"] .pop{box-shadow:12px 12px 0 #DFD2AC}
.pop.open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%)}
.pop .d-l{margin:10px 0 12px}
.pop p{font-size:15.5px;margin-bottom:22px}
.pop-x{position:absolute;top:12px;right:12px}

/* ---------- logo showcase ---------- */
.logo-hero{width:min(300px,68%);margin:0 auto;
  filter:drop-shadow(0 12px 0 rgba(7,15,31,.5))}
html[data-theme="light"] .logo-hero{filter:drop-shadow(0 12px 0 rgba(143,104,18,.28))}

/* ---------- misc ---------- */
.mt-0{margin-top:0}.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}
.mt-32{margin-top:32px}.mt-44{margin-top:44px}.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}
.center{text-align:center}
.notefine{font-size:13.5px;color:var(--muted)}

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

/* =========================
   TABLE LAYOUT
   ========================= */

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 18px;
}

/* =========================
   CARD (NOW FULLY CLICKABLE)
   ========================= */

.custom-game-card {
    background: var(--surface);
    border-radius: 14px;
    overflow: hidden;
    vertical-align: top;
    box-shadow: 0 6px 18px rgba(0,0,0,0.35);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    font-family: var(--sans);
}

/* make entire card behave like a button */
.custom-game-card a {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* hover lift */
.custom-game-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 34px rgba(0,0,0,0.55);
}

/* image */
.custom-img-container {
    min-width: 200px;
    overflow: hidden;
}

.custom-img-container img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.35s ease;
}

/* zoom image on hover */
.custom-game-card:hover img {
    transform: scale(1.06);
}

/* =========================
   INFO
   ========================= */

.custom-game-info {
    padding: 14px;
    color: var(--text);
}

.custom-game-info strong {
    font-size: 16px;
    display: block;
    margin-bottom: 4px;
}

.custom-game-info span {
    color: var(--muted);
    font-size: 13px;
    display: block;
    margin-bottom: 8px;
}

.custom-game-info p {
    font-size: 14px;
    color: var(--muted);
    margin: 0;
}

/* =========================
   RESULTS MOBILE LAYOUT
   ========================= */

@media (max-width:768px) {

    #results .sec-head {
        text-align:center;
    }

    #results .lead {
        font-size:15px;
        line-height:1.5;
        padding:0 12px;
    }

    #results .btnrow {
        justify-content:center;
    }

    #results .btn {
        width:100%;
        max-width:320px;
        box-sizing:border-box;
    }

    #results .soon-box {
        padding:1.25rem .5rem;
        margin-top:2rem;
    }

    #results table,
    #results tbody,
    #results tr,
    #results td {
        display:block !important;
        width:100% !important;
    }

    #results table {
        border-spacing:0;
    }

    #results td.custom-game-card {
        width:calc(100% - 24px) !important;
        max-width:380px;
        margin:0 auto 18px;
    }

    #results .custom-game-info {
        padding:12px;
    }

    #results .custom-game-info strong {
        font-size:17px;
    }

    #results .custom-game-info p {
        font-size:13px;
    }

}