/* Game hub — premium treatment.
 *
 * Loaded ONLY on game hub pages, after site.css. That is deliberate: the class
 * names here (.section, .btn, .chip, .tip, .faq-item) are the same ones the
 * rest of the estate uses, so putting these rules in site.css would half-apply
 * a new look to every page that has not been redesigned yet. Scoping by which
 * pages load the file keeps the redesign to the page it was drawn for.
 *
 * The integration block at the end reconciles the design with the markup the
 * shared header and footer actually emit (h3 not h4, a .social row, .crumbs
 * ending in a <span>), so the shared chrome renders as drawn without editing
 * chrome that every other page depends on.
 */

:root{
  --navy:#0b1d41;
  --navy-deep:#050f26;
  --navy2:#102a5b;
  --navy3:#16356f;
  --red:#e53935;
  --red-hi:#ff6b60;
  --red-dark:#c92727;
  --ink:#101b32;
  --muted:#5b6786;
  --paper:#f6f8fb;
  --line:#dfe4ec;
  --gold:#e4b42c;
  --gold-hi:#ffe38f;
  --gold-lo:#a97e0c;
  --green:#1d8a4e;
  --green-hi:#43d488;
  --glass-line:rgba(255,255,255,.14);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
h1,h2,h3,h4{font-family:'Bricolage Grotesque',sans-serif}
.lux{font-family:'Fraunces',serif;font-style:italic}
.mono{font-family:'IBM Plex Mono',monospace}

.grain{position:relative}
.grain::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}
.goldbar{
  height:4px;position:relative;overflow:hidden;
  background:linear-gradient(90deg,var(--gold-lo),var(--gold-hi) 25%,var(--gold) 50%,var(--gold-hi) 75%,var(--gold-lo));
}
.goldbar::after{
  content:"";position:absolute;top:0;bottom:0;width:130px;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.95),transparent);
  animation:sheen 3.2s ease-in-out infinite;
}
@keyframes sheen{0%{left:-140px}55%,100%{left:110%}}

/* ============ HEADER ============ */
.header{
  background:linear-gradient(115deg,#050f26 0%,#0b1d41 55%,#102a5b 100%);
  color:#fff;position:sticky;top:0;z-index:50;
  box-shadow:0 12px 36px rgba(5,15,38,.5);
}
.nav{max-width:1220px;margin:auto;padding:13px 22px;display:flex;align-items:center;gap:35px}
.logo{display:flex;flex-direction:column;line-height:1}
.logo .lg-row{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:22px;letter-spacing:-.5px;white-space:nowrap;
  display:flex;align-items:center;gap:7px;
}
.logo .lg-row span{
  background:linear-gradient(160deg,#ff6b60,var(--red) 55%,var(--red-dark));
  padding:4px 10px;border-radius:7px;position:relative;overflow:hidden;
  box-shadow:0 4px 12px rgba(229,57,53,.5), inset 0 1px 0 rgba(255,255,255,.35), 0 2px 0 var(--red-dark);
}
.logo .lg-row span::after{
  content:"";position:absolute;top:0;bottom:0;width:34px;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  animation:sheen 4s ease-in-out infinite;
}
.tag{font-size:9px;font-weight:600;letter-spacing:2px;margin-top:5px;text-transform:uppercase;
  background:linear-gradient(90deg,var(--gold-hi),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.navlinks{margin-left:auto;display:flex;gap:5px;align-items:center;font-size:13px;font-weight:700}
.navlinks a{opacity:.9;padding:9px 13px;border-radius:9px;letter-spacing:.4px;transition:background .18s,opacity .18s}
.navlinks a:hover{opacity:1;background:rgba(255,255,255,.09)}
.navlinks a.active{opacity:1;color:var(--gold-hi);background:rgba(228,180,44,.1);box-shadow:inset 0 0 0 1px rgba(228,180,44,.4)}
.nav-cta{
  margin-left:8px;position:relative;overflow:hidden;
  background:linear-gradient(160deg,#ff6b60,var(--red) 55%,var(--red-dark));
  color:#fff;font-weight:800;font-size:12.5px;letter-spacing:.6px;
  padding:11px 20px;border-radius:10px;
  box-shadow:0 6px 18px rgba(229,57,53,.5), inset 0 1px 0 rgba(255,255,255,.35), 0 2px 0 var(--red-dark);
  transition:transform .15s;
}
.nav-cta::after{content:"";position:absolute;top:0;bottom:0;width:40px;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);animation:sheen 3.6s ease-in-out infinite}
.nav-cta:hover{transform:translateY(-2px)}
@media(max-width:900px){.navlinks a:not(.active):not(.nav-cta){display:none}}

/* glossy floating tiles (hero) */
.tilefloat{
  position:absolute;z-index:2;width:62px;height:62px;border-radius:15px;
  display:grid;place-items:center;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:27px;
  animation:bob 6s ease-in-out infinite;
}
.tilefloat::before{content:"";position:absolute;inset:0;border-radius:15px;background:linear-gradient(160deg,rgba(255,255,255,.55),transparent 45%);pointer-events:none}
.tile-ivory{background:linear-gradient(165deg,#ffffff,#dfe6f2);color:var(--navy);box-shadow:0 5px 0 #b8c4d8, 0 22px 40px rgba(0,0,0,.5), inset 0 -6px 12px rgba(11,29,65,.14)}
.tile-gold{background:linear-gradient(165deg,var(--gold-hi),var(--gold) 55%,var(--gold-lo));color:#4c3703;box-shadow:0 5px 0 #7d5d07, 0 22px 40px rgba(0,0,0,.5), inset 0 -6px 12px rgba(76,55,3,.28)}
.tile-red{background:linear-gradient(165deg,#ff8078,var(--red) 55%,var(--red-dark));color:#fff;box-shadow:0 5px 0 #8f1d1a, 0 22px 40px rgba(0,0,0,.5), inset 0 -6px 12px rgba(90,10,8,.3)}
.tf1{left:6%;top:30%;transform:rotate(-9deg);animation-delay:0s}
.tf2{left:12%;top:64%;transform:rotate(7deg);animation-delay:1.4s}
.tf3{right:7%;top:26%;transform:rotate(8deg);animation-delay:.7s}
.tf4{right:13%;top:61%;transform:rotate(-7deg);animation-delay:2s}
@keyframes bob{0%,100%{margin-top:0}50%{margin-top:-15px}}
@media(max-width:1020px){.tilefloat{display:none}}

/* ============ GAME HERO ============ */
.ghero{
  position:relative;overflow:hidden;color:#fff;text-align:center;
  padding:44px 20px 96px;
  background:
    radial-gradient(900px 460px at 50% -10%,rgba(228,180,44,.17),transparent 55%),
    radial-gradient(680px 380px at 12% 110%,rgba(229,57,53,.15),transparent 60%),
    radial-gradient(760px 420px at 90% 105%,rgba(22,53,111,.75),transparent 65%),
    linear-gradient(160deg,#050f26 0%,#0b1d41 48%,#0d2450 100%);
}
.ghero .dots{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.10) 1px,transparent 1.8px) 0 0/26px 26px;
  mask-image:radial-gradient(640px 400px at 50% 34%,#000 25%,transparent 75%);
  -webkit-mask-image:radial-gradient(640px 400px at 50% 34%,#000 25%,transparent 75%);
}
.ghero-in{max-width:960px;margin:auto;position:relative;z-index:3}
.crumbs{
  display:inline-flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:center;
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:1.6px;text-transform:uppercase;font-weight:600;
  color:#8fa0c2;margin-bottom:26px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  padding:8px 18px;border-radius:99px;backdrop-filter:blur(8px);
}
.crumbs a{color:#c9d3e8;transition:color .15s}
.crumbs a:hover{color:var(--gold-hi)}
.crumbs i{color:var(--gold);font-style:normal}
.crumbs b,.crumbs span{color:#fff;font-weight:600}
.gkicker{
  display:inline-flex;align-items:center;gap:14px;margin-bottom:16px;
}
.gkicker .wing{width:48px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.gkicker .wing:last-child{background:linear-gradient(90deg,var(--gold),transparent)}
.gkicker span{
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:600;letter-spacing:3px;text-transform:uppercase;
  background:linear-gradient(90deg,var(--gold-hi),var(--gold) 60%,var(--gold-hi));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.ghero h1{
  margin:0;font-weight:800;font-size:clamp(38px,5.6vw,66px);letter-spacing:-2px;line-height:1.04;
  text-shadow:0 18px 55px rgba(0,0,0,.5);
}
.ghero h1 .lux{
  font-weight:600;letter-spacing:-1px;
  background:linear-gradient(100deg,var(--gold-hi) 10%,var(--gold) 45%,#fff2c4 70%,var(--gold-lo));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 22px rgba(228,180,44,.35));
}
.ghero .sub{font-size:16.5px;color:#aebbd8;font-weight:500;margin:16px auto 24px;max-width:560px}
.ghero .sub b{color:#fff}
.chipline{display:flex;gap:9px;justify-content:center;flex-wrap:wrap}
.chip{
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;
  color:#dfe6f4;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);
  border-radius:99px;padding:8px 16px;backdrop-filter:blur(8px);
}
.chip b{color:var(--gold-hi)}
.chip.hot{border-color:rgba(229,57,53,.6);color:#ffb3ae}
.chip.hot b{color:#ff8078}
.stagecut{position:absolute;left:0;right:0;bottom:-1px;height:56px;z-index:2}
.stagecut svg{display:block;width:100%;height:100%}

/* jewel stat cards overlapping hero */
.statband{background:#fff;padding:0 20px 6px;margin-top:-50px;position:relative;z-index:5}
.statgrid{max-width:1080px;margin:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.stat{
  position:relative;border-radius:17px;padding:2px;
  background:linear-gradient(160deg,var(--gold-hi),rgba(228,180,44,.25) 35%,rgba(11,29,65,.18) 80%);
  box-shadow:0 22px 46px rgba(5,15,38,.22);
}
.stat .in{
  background:linear-gradient(165deg,#0d2450,#0b1d41 60%,#081733);
  border-radius:15px;padding:20px 14px 17px;text-align:center;color:#fff;
  position:relative;overflow:hidden;
}
.stat .in::before{content:"";position:absolute;top:-40%;left:-20%;width:70%;height:90%;background:radial-gradient(closest-side,rgba(255,255,255,.14),transparent 70%)}
.stat b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(22px,2.8vw,34px);line-height:1.05;letter-spacing:-1px}
.stat:nth-child(1) b{background:linear-gradient(100deg,var(--gold-hi),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat:nth-child(2) b{color:#fff}
.stat:nth-child(3) b{color:var(--red-hi)}
.stat:nth-child(4) b{color:var(--green-hi)}
.stat span{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:2.2px;text-transform:uppercase;color:#8fa0c2;font-weight:600}
@media(max-width:860px){.statgrid{grid-template-columns:1fr 1fr}}

/* ============ SECTIONS ============ */
.section{padding:58px 20px}
.section.alt{background:radial-gradient(circle at 88% 8%,rgba(228,180,44,.06),transparent 40%),var(--paper)}
.container{max-width:1120px;margin:auto}
.section-head{text-align:center;margin-bottom:34px}
.section-head .eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--red);
  margin-bottom:12px;
}
.section-head .eyebrow::before,.section-head .eyebrow::after{content:"";width:26px;height:1.5px;background:linear-gradient(90deg,transparent,var(--gold))}
.section-head .eyebrow::after{background:linear-gradient(90deg,var(--gold),transparent)}
.section-head h2{font-size:clamp(27px,3.6vw,40px);margin:0;color:var(--navy);letter-spacing:-1.4px;font-weight:800;line-height:1.08}
.section-head h2 .lux{font-weight:600;background:linear-gradient(100deg,var(--red),#ff7d64);-webkit-background-clip:text;background-clip:text;color:transparent}
.section-head p{color:var(--muted);margin:11px auto 0;max-width:520px;font-weight:500}
.diamonds{display:flex;justify-content:center;gap:8px;margin-top:14px}
.diamonds i{width:8px;height:8px;transform:rotate(45deg);display:block;box-shadow:0 3px 6px rgba(11,29,65,.25)}
.diamonds i:nth-child(1){background:linear-gradient(160deg,#1d3a75,var(--navy))}
.diamonds i:nth-child(2){background:linear-gradient(160deg,#ff6b60,var(--red-dark))}
.diamonds i:nth-child(3){background:linear-gradient(160deg,var(--gold-hi),var(--gold-lo))}

/* ============ ABOUT / SEO INTRO ============ */
.intro-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:44px;align-items:start}
.intro-grid .prose p{color:#3d4a68;line-height:1.85;font-size:15.5px;font-weight:500;margin:0 0 14px}
.intro-grid .prose b{color:var(--navy);font-weight:800}
.intro-grid .prose .rd{color:var(--red);font-weight:800}
.intro-grid .prose a{color:var(--red);font-weight:700;border-bottom:2px solid rgba(229,57,53,.25);transition:border-color .15s}
.intro-grid .prose a:hover{border-color:var(--red)}
.callout{
  margin:18px 0 0;padding:16px 20px;border-radius:14px;
  background:linear-gradient(120deg,rgba(228,180,44,.1),rgba(229,57,53,.06));
  border:1.5px solid rgba(228,180,44,.45);
  font-size:14px;font-weight:600;color:var(--navy);line-height:1.65;
  display:flex;gap:12px;align-items:flex-start;
}
.callout .ic{
  flex:0 0 30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(160deg,var(--gold-hi),var(--gold-lo));color:#4c3703;font-weight:800;font-size:15px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 4px 9px rgba(169,126,12,.3);
}
.callout a{color:var(--red);font-weight:800}
.factframe{
  position:sticky;top:92px;border-radius:19px;padding:2px;
  background:linear-gradient(160deg,var(--gold-hi),rgba(228,180,44,.3) 35%,rgba(11,29,65,.35));
  box-shadow:0 24px 50px rgba(5,15,38,.22);
}
.factcard{
  background:linear-gradient(165deg,#0d2450,#0b1d41 60%,#081733);
  border-radius:17px;padding:22px 24px 18px;color:#fff;position:relative;overflow:hidden;
}
.factcard::before{content:"";position:absolute;top:-45%;right:-15%;width:65%;height:110%;background:radial-gradient(closest-side,rgba(228,180,44,.16),transparent 70%)}
.factcard .fc-k{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:2.6px;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:10px;text-align:center}
.frow{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.1);position:relative}
.frow:last-of-type{border-bottom:0}
.frow .k{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:#8fa0c2;font-weight:600;display:flex;align-items:center;gap:9px}
.frow .k::before{content:"";width:6px;height:6px;transform:rotate(45deg);flex:0 0 auto}
.frow:nth-child(odd) .k::before{background:linear-gradient(160deg,var(--gold-hi),var(--gold-lo))}
.frow:nth-child(even) .k::before{background:linear-gradient(160deg,#ff6b60,var(--red-dark))}
.frow .v{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:16px}
.frow .v.gold{background:linear-gradient(100deg,var(--gold-hi),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.frow .v.red{color:var(--red-hi)}
.frow .v.ok{color:var(--green-hi)}
@media(max-width:920px){.intro-grid{grid-template-columns:1fr;gap:30px}.factframe{position:static}}

/* ============ TODAY BAND ============ */
.today{
  position:relative;overflow:hidden;color:#fff;text-align:center;
  background:
    radial-gradient(circle at 15% 20%,rgba(255,255,255,.06) 1.2px,transparent 2.2px) 0 0/22px 22px,
    radial-gradient(760px 400px at 50% -30%,rgba(228,180,44,.2),transparent 60%),
    radial-gradient(640px 380px at 88% 130%,rgba(229,57,53,.18),transparent 60%),
    linear-gradient(115deg,#050f26,#0b1d41 60%,#0d2450);
  padding:52px 20px 56px;
}
.today .eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--gold);
  margin-bottom:12px;
}
.today .eyebrow::before,.today .eyebrow::after{content:"";width:26px;height:1.5px;background:linear-gradient(90deg,transparent,var(--gold))}
.today .eyebrow::after{background:linear-gradient(90deg,var(--gold),transparent)}
.today h2{margin:0;font-size:clamp(26px,3.6vw,38px);font-weight:800;letter-spacing:-1.2px}
.today h2 .lux{font-weight:600;background:linear-gradient(100deg,var(--gold-hi),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.today p{color:#93a4c6;font-weight:500;margin:11px auto 24px;max-width:460px}
.today .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;position:relative;z-index:2}
.btn{
  border:0;cursor:pointer;position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(160deg,#ff6b60,var(--red) 55%,var(--red-dark));
  color:#fff;font-weight:800;letter-spacing:.5px;border-radius:11px;font-size:13.5px;
  padding:15px 26px;
  box-shadow:0 8px 22px rgba(229,57,53,.5), inset 0 1px 0 rgba(255,255,255,.35), 0 3px 0 var(--red-dark);
  transition:transform .15s,filter .15s;
}
.btn::after{content:"";position:absolute;top:0;bottom:0;width:44px;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:sheen 3.4s ease-in-out infinite}
.btn:hover{transform:translateY(-2px);filter:brightness(1.07)}
.btn.ghost{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15);backdrop-filter:blur(8px);
}
.btn.ghost::after{display:none}
.btn.ghost:hover{background:rgba(255,255,255,.15)}
.btn.gold{
  background:linear-gradient(160deg,var(--gold-hi),var(--gold) 55%,var(--gold-lo));color:#4c3703;
  box-shadow:0 8px 22px rgba(169,126,12,.4), inset 0 1px 0 rgba(255,255,255,.5), 0 3px 0 var(--gold-lo);
}

/* ============ LEVEL BROWSER ============ */
.jump{
  max-width:520px;margin:0 auto 30px;border-radius:16px;padding:2px;
  background:linear-gradient(120deg,var(--gold-lo),var(--gold-hi) 30%,var(--gold) 55%,var(--gold-hi) 80%,var(--gold-lo));
  box-shadow:0 18px 40px rgba(169,126,12,.25);
}
.jump .in{
  display:flex;gap:8px;padding:7px;border-radius:14px;
  background:linear-gradient(165deg,#0d2450,#0b1d41 60%,#081733);
}
.jump input{
  flex:1;min-width:0;border:0;outline:0;background:transparent;color:#fff;
  padding:12px 16px;font-weight:700;font-size:15px;letter-spacing:.3px;
}
.jump input::placeholder{color:#8fa0c2;font-weight:600}
.jump button{
  border:0;cursor:pointer;position:relative;overflow:hidden;
  background:linear-gradient(160deg,#ff6b60,var(--red) 55%,var(--red-dark));
  color:#fff;font-weight:800;font-size:12.5px;letter-spacing:1px;border-radius:10px;padding:0 22px;
  box-shadow:0 5px 14px rgba(229,57,53,.5), inset 0 1px 0 rgba(255,255,255,.35), 0 2px 0 var(--red-dark);
  transition:transform .15s,filter .15s;
}
.jump button::after{content:"";position:absolute;top:0;bottom:0;width:34px;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);animation:sheen 3s ease-in-out infinite}
.jump button:hover{transform:translateY(-2px);filter:brightness(1.07)}
.lband{
  display:flex;align-items:center;gap:14px;margin:26px 0 12px;
}
.lband:first-of-type{margin-top:0}
.lband .bn{
  flex:0 0 auto;display:grid;place-items:center;
  min-width:34px;height:34px;border-radius:10px;padding:0 8px;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:14px;color:#fff;
  background:linear-gradient(160deg,#24478c,var(--navy));
  box-shadow:inset 0 2px 0 rgba(255,255,255,.3), inset 0 -5px 8px rgba(0,0,0,.28), 0 5px 10px rgba(11,29,65,.25);
}
.lband .bt{
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:600;letter-spacing:2.2px;text-transform:uppercase;color:var(--navy);
  white-space:nowrap;
}
.lband .hairline{flex:1;height:2px;background:linear-gradient(90deg,rgba(228,180,44,.7),rgba(11,29,65,.14))}
.lband .dm{width:7px;height:7px;transform:rotate(45deg);background:linear-gradient(160deg,var(--gold-hi),var(--gold-lo));box-shadow:0 2px 5px rgba(169,126,12,.4)}
.lvlgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px}
.lvl{
  position:relative;text-align:center;overflow:hidden;
  background:linear-gradient(170deg,#ffffff,#f2f5fa);
  border:2px solid var(--navy);border-radius:13px;
  padding:13px 8px 11px;
  box-shadow:0 4px 0 var(--navy), 0 12px 22px rgba(11,29,65,.1), inset 0 1px 0 #fff;
  transition:transform .16s,border-color .16s,box-shadow .16s;
}
.lvl::before{
  content:"";position:absolute;top:7px;right:7px;width:7px;height:7px;transform:rotate(45deg);
  box-shadow:0 2px 4px rgba(11,29,65,.25);
}
.lvl:nth-child(4n+1)::before{background:linear-gradient(160deg,#24478c,var(--navy))}
.lvl:nth-child(4n+2)::before{background:linear-gradient(160deg,#ff6b60,var(--red-dark))}
.lvl:nth-child(4n+3)::before{background:linear-gradient(160deg,var(--gold-hi),var(--gold-lo))}
.lvl:nth-child(4n)::before{background:linear-gradient(160deg,#43d488,#1d8a4e)}
.lvl::after{
  content:"";position:absolute;top:0;left:-90%;width:55%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.9),transparent);
  transform:skewX(-18deg);transition:left .45s ease;pointer-events:none;
}
.lvl:hover::after{left:140%}
.lvl b{
  display:block;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  font-size:15.5px;letter-spacing:-.3px;line-height:1.15;
}
.lvl small{
  display:block;margin-top:3px;
  font-family:'IBM Plex Mono',monospace;font-size:8.5px;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--muted);font-weight:600;
}
.lvl:nth-child(4n+1){box-shadow:0 4px 0 var(--navy), 0 12px 22px rgba(11,29,65,.1), inset 0 1px 0 #fff}
.lvl:nth-child(4n+1) b{color:var(--navy)}
.lvl:nth-child(4n+2){border-color:#d8404a;box-shadow:0 4px 0 var(--red-dark), 0 12px 22px rgba(229,57,53,.12), inset 0 1px 0 #fff}
.lvl:nth-child(4n+2) b{color:var(--red-dark)}
.lvl:nth-child(4n+3){border-color:#c99a1d;box-shadow:0 4px 0 var(--gold-lo), 0 12px 22px rgba(169,126,12,.14), inset 0 1px 0 #fff}
.lvl:nth-child(4n+3) b{color:#8a6508}
.lvl:nth-child(4n){border-color:#2aa363;box-shadow:0 4px 0 var(--green), 0 12px 22px rgba(29,138,78,.14), inset 0 1px 0 #fff}
.lvl:nth-child(4n) b{color:var(--green)}
.lvl:hover{
  transform:translateY(-5px);border-color:var(--navy)!important;
  box-shadow:0 6px 0 var(--navy), 0 20px 34px rgba(11,29,65,.22), inset 0 1px 0 #fff!important;
}
.lvl:hover b{color:var(--navy)!important}
.lvl:hover small{color:var(--navy)}
.lvl.gold-tile{
  border-color:var(--gold-lo);
  background:linear-gradient(170deg,#fff9e6,#ffedb8);
  box-shadow:0 4px 0 var(--gold-lo), 0 12px 24px rgba(169,126,12,.22), inset 0 1px 0 #fff;
}
.lvl.gold-tile b{color:#7a5a06}
.lvl.gold-tile:hover{border-color:var(--gold-lo);box-shadow:0 6px 0 var(--gold-lo), 0 20px 36px rgba(169,126,12,.32), inset 0 1px 0 #fff}
.lvl.gold-tile:hover b{color:#4c3703}
.lvl .newb{
  position:absolute;top:-9px;left:50%;transform:translateX(-50%);overflow:hidden;
  background:linear-gradient(160deg,var(--gold-hi),var(--gold-lo));
  color:#4c3703;font-size:8.5px;font-weight:800;letter-spacing:1.2px;
  border-radius:99px;padding:3px 10px;font-family:Inter,sans-serif;
  box-shadow:0 4px 10px rgba(169,126,12,.4), inset 0 1px 0 rgba(255,255,255,.6);
}
.lvl.flash{animation:flashp 1.6s ease 2}
@keyframes flashp{
  0%,100%{border-color:var(--navy);box-shadow:0 4px 0 var(--navy), 0 12px 22px rgba(11,29,65,.1)}
  50%{border-color:var(--gold);box-shadow:0 6px 0 var(--gold-lo), 0 0 0 6px rgba(228,180,44,.25), 0 20px 40px rgba(169,126,12,.35)}
}
.lvlnote{
  max-width:720px;margin:26px auto 0;text-align:center;
  font-size:13px;color:var(--muted);font-weight:600;line-height:1.7;
}
.lvlnote b{color:var(--navy)}

/* ============ HOW IT WORKS ============ */
.stepgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;position:relative}
.stepgrid::before{content:"";position:absolute;top:52px;left:14%;right:14%;height:2px;background:linear-gradient(90deg,transparent,rgba(228,180,44,.55),transparent)}
.step{
  text-align:center;padding:26px 28px;position:relative;
  background:linear-gradient(165deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  border:1px solid var(--glass-line);border-radius:17px;backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 16px 32px rgba(0,0,0,.3);
  transition:border-color .2s,transform .2s;
}
.step:hover{border-color:rgba(228,180,44,.6);transform:translateY(-4px)}
.circle{
  width:74px;height:74px;border-radius:50%;position:relative;
  display:grid;place-items:center;margin:0 auto 16px;font-size:26px;
  background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.28),transparent 55%),linear-gradient(165deg,#16356f,#0b1d41);
  color:var(--gold-hi);
}
.circle::before{content:"";position:absolute;inset:-4px;border-radius:50%;background:conic-gradient(from 210deg,var(--gold-lo),var(--gold-hi),var(--gold),var(--gold-hi),var(--gold-lo));z-index:-1;box-shadow:0 0 24px rgba(228,180,44,.35)}
.circle::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 3px 0 rgba(255,255,255,.18), inset 0 -10px 18px rgba(0,0,0,.4)}
.number{position:absolute;top:-7px;right:-7px;z-index:2;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:linear-gradient(160deg,#ff6b60,var(--red-dark));font-size:12.5px;font-weight:800;color:#fff;box-shadow:0 5px 12px rgba(229,57,53,.55), inset 0 1px 0 rgba(255,255,255,.35)}
.step h3{margin:0 0 7px;font-size:18px;font-weight:700;letter-spacing:-.3px;color:#fff}
.step p{color:#a9b7d4;font-size:13.5px;line-height:1.65;margin:0;font-weight:500}
.step p b{color:#fff}
.steps-band{
  position:relative;overflow:hidden;color:#fff;padding:54px 20px 58px;
  background:
    radial-gradient(circle at 15% 20%,rgba(255,255,255,.06) 1.2px,transparent 2.2px) 0 0/22px 22px,
    radial-gradient(760px 400px at 50% -30%,rgba(228,180,44,.18),transparent 60%),
    linear-gradient(115deg,#050f26,#0b1d41 60%,#0d2450);
}
.steps-band .section-head h2{color:#fff}
.steps-band .section-head p{color:#93a4c6}
.steps-band .section-head h2 .lux{background:linear-gradient(100deg,var(--gold-hi),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
@media(max-width:760px){.stepgrid{grid-template-columns:1fr}.stepgrid::before{display:none}}

/* ============ TIPS ============ */
.tipgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.tip{
  position:relative;border-radius:16px;padding:1.5px;
  background:linear-gradient(165deg,rgba(11,29,65,.15),rgba(11,29,65,.04));
  transition:transform .2s,background .2s,box-shadow .2s;
  box-shadow:0 10px 22px rgba(11,29,65,.06);
}
.tip:hover{transform:translateY(-5px);background:linear-gradient(165deg,var(--gold),rgba(228,180,44,.3) 45%,rgba(11,29,65,.4));box-shadow:0 20px 40px rgba(11,29,65,.15)}
.tip .in{background:linear-gradient(170deg,#ffffff,#f5f8fc);border-radius:14.5px;padding:21px 21px 19px;height:100%;position:relative}
.tipnum{
  width:40px;height:40px;border-radius:12px;position:relative;
  display:grid;place-items:center;margin-bottom:13px;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:16px;color:#4c3703;
  background:linear-gradient(160deg,var(--gold-hi),var(--gold-lo));
  box-shadow:inset 0 2px 0 rgba(255,255,255,.5), inset 0 -6px 10px rgba(76,55,3,.28), 0 6px 12px rgba(169,126,12,.3);
}
.tip:nth-child(3n+2) .tipnum{
  color:#fff;background:linear-gradient(160deg,#ff6b60,var(--red-dark));
  box-shadow:inset 0 2px 0 rgba(255,255,255,.4), inset 0 -6px 10px rgba(90,10,8,.3), 0 6px 12px rgba(229,57,53,.35);
}
.tip:nth-child(3n) .tipnum{
  color:#fff;background:linear-gradient(160deg,#24478c,var(--navy));
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35), inset 0 -6px 10px rgba(0,0,0,.3), 0 6px 12px rgba(11,29,65,.3);
}
.tip .in::before{
  content:"";position:absolute;top:12px;right:12px;width:8px;height:8px;transform:rotate(45deg);
  box-shadow:0 2px 5px rgba(11,29,65,.25);
}
.tip:nth-child(3n+1) .in::before{background:linear-gradient(160deg,var(--gold-hi),var(--gold-lo))}
.tip:nth-child(3n+2) .in::before{background:linear-gradient(160deg,#ff6b60,var(--red-dark))}
.tip:nth-child(3n) .in::before{background:linear-gradient(160deg,#43d488,var(--green))}
.tip h3{font-size:15.5px;margin:0 0 6px;font-weight:700;letter-spacing:-.3px;color:var(--navy)}
.tip p{margin:0;font-size:13px;line-height:1.68;color:var(--muted);font-weight:500}
.tip p b{color:var(--navy)}
.tip p .rd{color:var(--red);font-weight:700}
.tip a{color:var(--red);font-weight:700}
@media(max-width:900px){.tipgrid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.tipgrid{grid-template-columns:1fr}}

/* ============ STATS TABLE ============ */
.tableframe{
  max-width:760px;margin:auto;border-radius:19px;padding:2px;
  background:linear-gradient(160deg,var(--gold-hi),rgba(228,180,44,.3) 35%,rgba(11,29,65,.35));
  box-shadow:0 26px 55px rgba(5,15,38,.25);
}
.tablecard{background:linear-gradient(165deg,#0d2450,#0b1d41 60%,#081733);border-radius:17px;padding:10px 26px;color:#fff;position:relative;overflow:hidden}
.tablecard::before{content:"";position:absolute;top:-50%;right:-10%;width:55%;height:130%;background:radial-gradient(closest-side,rgba(228,180,44,.14),transparent 70%)}
.trow{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.1);position:relative}
.trow:last-child{border-bottom:0}
.trow .k{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:2px;text-transform:uppercase;color:#8fa0c2;font-weight:600;display:flex;align-items:center;gap:10px}
.trow .k::before{content:"";width:7px;height:7px;transform:rotate(45deg);flex:0 0 auto;box-shadow:0 2px 5px rgba(0,0,0,.35)}
.trow:nth-child(4n+1) .k::before{background:linear-gradient(160deg,var(--gold-hi),var(--gold-lo))}
.trow:nth-child(4n+2) .k::before{background:linear-gradient(160deg,#ff6b60,var(--red-dark))}
.trow:nth-child(4n+3) .k::before{background:linear-gradient(160deg,#43d488,var(--green))}
.trow:nth-child(4n) .k::before{background:linear-gradient(160deg,#4a6cb3,#24478c)}
.trow .v{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:18px}
.trow .v.gold{background:linear-gradient(100deg,var(--gold-hi),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.trow .v.red{color:var(--red-hi)}
.trow .v.ok{color:var(--green-hi)}

/* ============ FAQ ============ */
.faqwrap{max-width:840px;margin:auto}
.faq-item{
  position:relative;border-radius:14px;padding:1.5px;margin-bottom:11px;
  background:linear-gradient(165deg,rgba(11,29,65,.13),rgba(11,29,65,.04));
  transition:background .2s,box-shadow .2s;
}
.faq-item[open]{background:linear-gradient(165deg,var(--gold),rgba(228,180,44,.3) 45%,rgba(11,29,65,.4));box-shadow:0 16px 32px rgba(11,29,65,.12)}
.faq-item .in{background:#fff;border-radius:12.5px;overflow:hidden}
.faq-item summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:15px;padding:16px 19px;font-weight:700;font-size:15px;color:var(--navy);letter-spacing:-.2px;font-family:'Bricolage Grotesque',sans-serif}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item .qn{
  flex:0 0 32px;height:32px;border-radius:9px;display:grid;place-items:center;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:13px;color:#fff;
  background:linear-gradient(160deg,#24478c,var(--navy));
  box-shadow:inset 0 2px 0 rgba(255,255,255,.3), inset 0 -5px 8px rgba(0,0,0,.28), 0 4px 9px rgba(11,29,65,.25);
}
.faq-item:nth-of-type(4n+2) .qn{background:linear-gradient(160deg,var(--gold-hi),var(--gold-lo));color:#4c3703;box-shadow:inset 0 2px 0 rgba(255,255,255,.5), inset 0 -5px 8px rgba(76,55,3,.28), 0 4px 9px rgba(169,126,12,.3)}
.faq-item:nth-of-type(4n+3) .qn{background:linear-gradient(160deg,#43d488,var(--green));box-shadow:inset 0 2px 0 rgba(255,255,255,.4), inset 0 -5px 8px rgba(10,60,32,.3), 0 4px 9px rgba(29,138,78,.3)}
.faq-item:nth-of-type(4n) .qn{background:linear-gradient(160deg,#ff9d5c,#e0631c);box-shadow:inset 0 2px 0 rgba(255,255,255,.4), inset 0 -5px 8px rgba(120,45,5,.3), 0 4px 9px rgba(224,99,28,.3)}
.faq-item[open] .qn{background:linear-gradient(160deg,#ff6b60,var(--red-dark));box-shadow:inset 0 2px 0 rgba(255,255,255,.3), inset 0 -5px 8px rgba(90,10,8,.3), 0 4px 10px rgba(229,57,53,.35)}
.faq-item .pm{margin-left:auto;font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:16px;color:var(--red);transition:transform .2s}
.faq-item[open] .pm{transform:rotate(45deg)}
.faq-item .body{padding:0 19px 18px 66px;color:var(--muted);font-size:13.5px;line-height:1.75;font-weight:500}
.faq-item .body b{color:var(--navy)}
.faq-item .body a{color:var(--red);font-weight:700;border-bottom:2px solid rgba(229,57,53,.25)}

/* ============ METHOD PROSE ============ */
.method{max-width:840px;margin:auto}
.methodframe{
  border-radius:19px;padding:2px;
  background:linear-gradient(160deg,rgba(11,29,65,.25),rgba(228,180,44,.35) 60%,rgba(11,29,65,.2));
  box-shadow:0 20px 44px rgba(5,15,38,.12);
}
.methodcard{background:#fff;border-radius:17px;padding:30px 34px}
.methodcard h2{font-size:22px;letter-spacing:-.6px;color:var(--navy);margin:0 0 14px;font-weight:800}
.methodcard h2 .lux{font-weight:600;background:linear-gradient(100deg,var(--red),#ff7d64);-webkit-background-clip:text;background-clip:text;color:transparent}
.methodcard p{color:#3d4a68;line-height:1.85;font-size:14.5px;font-weight:500;margin:0 0 13px}
.methodcard p:last-child{margin:0}
.methodcard b{color:var(--navy);font-weight:800}
.methodcard a{color:var(--red);font-weight:700;border-bottom:2px solid rgba(229,57,53,.25)}

/* ============ MORE GAMES ============ */
.gamesgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:13px}
.gcard{
  position:relative;border-radius:15px;padding:1.5px;text-align:center;
  background:linear-gradient(165deg,rgba(11,29,65,.15),rgba(11,29,65,.05));
  transition:transform .2s,background .2s,box-shadow .2s;
  box-shadow:0 8px 18px rgba(11,29,65,.06);
}
.gcard:hover{transform:translateY(-6px);background:linear-gradient(165deg,var(--gold),rgba(228,180,44,.25) 45%,rgba(229,57,53,.5));box-shadow:0 20px 38px rgba(11,29,65,.16)}
.gcard .in{background:linear-gradient(170deg,#ffffff,#f4f7fb);border-radius:13.5px;padding:18px 10px 15px;height:100%;overflow:hidden;position:relative}
.gcard .in::after{content:"";position:absolute;top:0;left:-80%;width:55%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.85),transparent);transform:skewX(-18deg);transition:left .5s ease}
.gcard:hover .in::after{left:130%}
.gico{
  width:50px;height:50px;margin:0 auto 10px;border-radius:14px;position:relative;
  display:grid;place-items:center;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:19px;color:#fff;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.4), inset 0 -7px 12px rgba(0,0,0,.25), 0 8px 16px rgba(11,29,65,.24);
}
.gico::before{content:"";position:absolute;inset:0;border-radius:14px;background:linear-gradient(160deg,rgba(255,255,255,.45),transparent 50%)}
.gcard h3{font-size:13px;margin:0 0 2px;font-weight:700;letter-spacing:-.2px;color:var(--navy);position:relative}
.gcard small{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);font-weight:600;position:relative}
@media(max-width:900px){.gamesgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.gamesgrid{grid-template-columns:repeat(2,1fr)}}

/* ============ FOOTER ============ */
.footer{
  background:radial-gradient(700px 300px at 50% -10%,rgba(228,180,44,.08),transparent 60%),linear-gradient(160deg,#03081a,#081733);
  color:#c0cadd;padding:0 20px 22px;
}
.footer .goldbar{margin:0 -20px 48px}
.footergrid{max-width:1120px;margin:auto;display:grid;grid-template-columns:1.4fr 1fr 1.2fr 1fr;gap:38px}
.footer h3,.footer h4{color:#fff;margin:0 0 14px;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:2.8px;text-transform:uppercase;font-weight:600}
.footer .logo .lg-row{font-size:20px}
.footer p{font-size:12.5px;line-height:1.75;color:#8e9bb2;font-weight:500}
.footer a{display:block;font-size:13px;margin:9px 0;color:#bdc7d8;font-weight:600;transition:color .15s,transform .15s}
.footer a:hover{color:var(--gold-hi);transform:translateX(3px)}
.copy{max-width:1120px;margin:40px auto 0;border-top:1px solid rgba(255,255,255,.1);padding-top:18px;text-align:center;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:1.8px;color:#6f7d99;text-transform:uppercase}
@media(max-width:820px){.footergrid{grid-template-columns:1fr 1fr;gap:26px}.footergrid>div:first-child{grid-column:1/-1}}
@media(max-width:760px){.section{padding:44px 15px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ============ INTEGRATION WITH THE SHARED CHROME ============
   The design was drawn against a standalone page; the live header and footer
   are shared includes that every other page also uses. Rather than edit the
   chrome (and change 25 games' worth of pages that have not been redesigned),
   the few differences are reconciled here, where only the hub sees them. */

/* The shared footer carries a decorative social row the mockup does not have. */
.footer .social{display:none}

/* Registry icon classes are gi-*; the mockup drew them as gc-*. Same gradients. */
.gico.gi-navy{background:linear-gradient(160deg,#24478c,var(--navy))}
.gico.gi-purple{background:linear-gradient(160deg,#a678e0,#6a3fa3)}
.gico.gi-orange{background:linear-gradient(160deg,#ffa15e,#e0631c)}
.gico.gi-green{background:linear-gradient(160deg,#43d488,#1d8a4e)}
.gico.gi-gold{background:linear-gradient(160deg,var(--gold-hi),var(--gold-lo));color:#4c3703}
.gico.gi-red{background:linear-gradient(160deg,#ff8078,var(--red-dark))}
.gico.gi-teal{background:linear-gradient(160deg,#3fd0c9,#0f7d78)}
.gico.gi-all{background:linear-gradient(160deg,#ff8078,var(--red-dark))}

/* A game whose archive is complete has no daily band; the section below it then
   meets the stat band directly, so it needs the padding the band was providing. */
.section.first-after-stats{padding-top:46px}

/* Games with fewer than 100 puzzles have a single block; the band label would
   otherwise sit alone above one tile with a 1000-wide hairline. */
.lvlgrid:only-child{margin-top:4px}


/* ============ BLOCK PAGE ============
   Denser tiles than the hub: a hundred numbered cards on one screen, where the
   hub shows eighty block links. */
.pzgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(94px,1fr));gap:9px}
.pzgrid .lvl{padding:11px 6px 9px;border-radius:12px}
.pzgrid .lvl b{font-size:16.5px}
.pzgrid .lvl small{font-size:8px;letter-spacing:1.6px}
.pager{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.btn.navy{
  background:linear-gradient(160deg,#24478c,var(--navy));
  box-shadow:0 8px 22px rgba(11,29,65,.4), inset 0 1px 0 rgba(255,255,255,.25), 0 3px 0 #050f26;
}
.pager .lbl{width:100%;text-align:center;font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:2.4px;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:-2px}


/* ============ LEVEL PAGE: board + answer tiles ============
   The board is what this page has that no rival answer list does: a Sky
   Words record stores each word with x/y coordinates, so the finished grid
   can be drawn exactly as the game lays it out. Column count is set inline
   per level -- real boards run from three cells wide to more than ten. */
.boardframe{border-radius:20px;padding:2px;
  background:linear-gradient(160deg,var(--gold-hi),rgba(228,180,44,.3) 35%,rgba(11,29,65,.35));
  box-shadow:0 26px 55px rgba(5,15,38,.2);}
.boardcard{background:linear-gradient(170deg,#ffffff,#f4f7fb);border-radius:18px;padding:22px;position:relative;overflow:hidden}
.boardcard .bc-k{display:flex;justify-content:space-between;align-items:center;
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);font-weight:600;
  margin-bottom:16px;}
.boardcard .bc-k b{color:var(--red)}
.bgrid{display:grid;grid-template-columns:repeat(6,minmax(34px,52px));gap:5px;justify-content:center}
.bcell{aspect-ratio:1;border-radius:9px}
.bcell.f{display:grid;place-items:center;position:relative;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(15px,2.4vw,21px);color:#fff;
  background:linear-gradient(160deg,#24478c,var(--navy));
  box-shadow:inset 0 2px 0 rgba(255,255,255,.3), inset 0 -6px 10px rgba(0,0,0,.3), 0 5px 10px rgba(11,29,65,.28);}
.bcell.f::before{content:"";position:absolute;inset:0;border-radius:9px;background:linear-gradient(160deg,rgba(255,255,255,.4),transparent 50%)}
.bcell.f.hl{background:linear-gradient(160deg,var(--gold-hi),var(--gold-lo));color:#4c3703;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.5), inset 0 -6px 10px rgba(76,55,3,.3), 0 5px 10px rgba(169,126,12,.32);}
.boardnote{margin-top:14px;display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:12px;color:var(--muted);font-weight:600;}
.boardnote i{width:8px;height:8px;border-radius:50%;background:var(--green);font-style:normal;box-shadow:0 0 0 4px rgba(29,138,78,.16)}
.ansgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:9px;margin-top:26px}
.ans{position:relative;overflow:hidden;text-align:left;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  background:linear-gradient(170deg,#ffffff,#f2f5fa);
  border:2px solid var(--navy);border-radius:12px;
  padding:11px 13px;
  box-shadow:0 4px 0 var(--navy), 0 10px 20px rgba(11,29,65,.09), inset 0 1px 0 #fff;
  transition:transform .16s,box-shadow .16s;}
.ans b{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:15px;letter-spacing:.4px;color:var(--navy)}
.ans .cnt{flex:0 0 auto;display:grid;place-items:center;min-width:24px;height:24px;border-radius:8px;
  font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;color:#fff;
  background:linear-gradient(160deg,#24478c,var(--navy));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 3px 7px rgba(11,29,65,.25);}
.ans:nth-child(4n+2){border-color:#d8404a;box-shadow:0 4px 0 var(--red-dark), 0 10px 20px rgba(229,57,53,.1), inset 0 1px 0 #fff}
.ans:nth-child(4n+2) b{color:var(--red-dark)}
.ans:nth-child(4n+2) .cnt{background:linear-gradient(160deg,#ff6b60,var(--red-dark))}
.ans:nth-child(4n+3){border-color:#c99a1d;box-shadow:0 4px 0 var(--gold-lo), 0 10px 20px rgba(169,126,12,.12), inset 0 1px 0 #fff}
.ans:nth-child(4n+3) b{color:#8a6508}
.ans:nth-child(4n+3) .cnt{background:linear-gradient(160deg,var(--gold-hi),var(--gold-lo));color:#4c3703}
.ans:nth-child(4n){border-color:#2aa363;box-shadow:0 4px 0 var(--green), 0 10px 20px rgba(29,138,78,.12), inset 0 1px 0 #fff}
.ans:nth-child(4n) b{color:var(--green)}
.ans:nth-child(4n) .cnt{background:linear-gradient(160deg,#43d488,var(--green))}
.ans::after{content:"";position:absolute;top:0;left:-90%;width:55%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.9),transparent);transform:skewX(-18deg);transition:left .45s ease;pointer-events:none}
.ans:hover{transform:translateY(-4px)}
.ans:hover::after{left:140%}
.ans.champ{border-color:var(--gold-lo);
  background:linear-gradient(170deg,#fff9e6,#ffedb8);
  box-shadow:0 4px 0 var(--gold-lo), 0 12px 24px rgba(169,126,12,.24), inset 0 1px 0 #fff;}
.ans.champ b{color:#7a5a06}
.ans.champ .cnt{background:linear-gradient(160deg,var(--gold-hi),var(--gold-lo));color:#4c3703}
.ans.champ .crown{position:absolute;top:-9px;right:10px;background:linear-gradient(160deg,var(--gold-hi),var(--gold-lo));color:#4c3703;font-size:8px;font-weight:800;letter-spacing:1.2px;border-radius:99px;padding:3px 9px;box-shadow:0 4px 10px rgba(169,126,12,.4), inset 0 1px 0 rgba(255,255,255,.6)}
/* Board beside the fact card. The extraction that pulled these rules across
   caught only the media-query overrides, so without this the grid never
   applied above 920px and the card stacked under the board. */
.solve-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:start}
@media(max-width:920px){.solve-grid{grid-template-columns:1fr;gap:26px}}

/* Level prose: the reference carried these as inline styles on every <p>,
   which would repeat the same declarations 8,000 times across the game. */
.lvlprose{max-width:820px;margin:30px 0 0}
.lvlprose p{color:#3d4a68;line-height:1.85;font-size:15.5px;font-weight:500;margin:0 0 14px}
.lvlprose p:last-child{margin:0}
.lvlprose b{color:var(--navy);font-weight:800}
.lvlprose a{color:var(--red);font-weight:700;border-bottom:2px solid rgba(229,57,53,.25)}
.lvlprose a:hover{border-color:var(--red)}

/* Board and answers stack before the columns get too narrow to read. */
@media(max-width:920px){.solve-grid{grid-template-columns:1fr;gap:28px}}

/* ============ DAILY ARCHIVE: month nav + day tiles ============ */
.daygrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:9px}
.daygrid .lvl b{font-size:17px}
.daygrid .lvl small{font-size:8px;letter-spacing:1.4px}
.mnav{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:0 0 26px}
.mnav a{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--navy);background:#fff;border:2px solid var(--navy);border-radius:99px;
  padding:7px 15px;box-shadow:0 3px 0 var(--navy), 0 6px 14px rgba(11,29,65,.08);
  transition:transform .15s,background .15s,color .15s}
.mnav a:hover{transform:translateY(-2px);background:var(--navy);color:#fff}
.mnav a.hot{border-color:var(--gold-lo);background:linear-gradient(160deg,var(--gold-hi),var(--gold));color:#4c3703;box-shadow:0 3px 0 var(--gold-lo), 0 6px 14px rgba(169,126,12,.2)}
/* the date picker sits in the same gold jump bar as the number inputs */
.jump input[type=date]{color-scheme:dark}

/* ============ DAILY DAY: letter set tiles ============ */
.lset{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:6px}
.lset .lt{
  width:52px;height:52px;border-radius:13px;position:relative;
  display:grid;place-items:center;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:22px;color:#fff;
  background:linear-gradient(160deg,#43d488,var(--green));
  box-shadow:inset 0 2px 0 rgba(255,255,255,.4), inset 0 -7px 12px rgba(10,60,32,.3), 0 5px 0 #14663a, 0 12px 22px rgba(29,138,78,.3);
  animation:pop .5s ease backwards;
}
.lset .lt::before{content:"";position:absolute;inset:0;border-radius:13px;background:linear-gradient(160deg,rgba(255,255,255,.45),transparent 50%)}
.lset .lt:nth-child(2){animation-delay:.06s}.lset .lt:nth-child(3){animation-delay:.12s}
.lset .lt:nth-child(4){animation-delay:.18s}.lset .lt:nth-child(5){animation-delay:.24s}
.lset .lt:nth-child(6){animation-delay:.3s}.lset .lt:nth-child(7){animation-delay:.36s}
.lset .lt:nth-child(8){animation-delay:.42s}
@keyframes pop{from{transform:scale(.5) rotate(-6deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}
.lset-note{text-align:center;font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:0}

/* ============ ALL-GAMES INDEX ============ */
.gbiggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:14px}
.gbig{
  position:relative;border-radius:16px;padding:1.5px;text-align:center;
  background:linear-gradient(165deg,rgba(11,29,65,.15),rgba(11,29,65,.05));
  transition:transform .2s,background .2s,box-shadow .2s;
  box-shadow:0 10px 22px rgba(11,29,65,.07);
}
.gbig:hover{transform:translateY(-6px);background:linear-gradient(165deg,var(--gold),rgba(228,180,44,.25) 45%,rgba(229,57,53,.5));box-shadow:0 22px 42px rgba(11,29,65,.16)}
.gbig .in{background:linear-gradient(170deg,#ffffff,#f4f7fb);border-radius:14.5px;padding:22px 16px 18px;height:100%;overflow:hidden;position:relative}
.gbig .in::after{content:"";position:absolute;top:0;left:-80%;width:55%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.85),transparent);transform:skewX(-18deg);transition:left .5s ease}
.gbig:hover .in::after{left:130%}
.gbig .gico{width:56px;height:56px;margin:0 auto 12px;font-size:21px;border-radius:15px}
.gbig h3{font-size:15px;margin:0 0 5px;font-weight:700;letter-spacing:-.2px;color:var(--navy);position:relative}
.gbig p{margin:0 0 11px;font-size:12px;line-height:1.6;color:var(--muted);font-weight:500;position:relative}
.gbig .cnt{
  display:inline-block;position:relative;
  font-family:'IBM Plex Mono',monospace;font-size:9.5px;font-weight:600;letter-spacing:1px;text-transform:uppercase;
  color:var(--navy);background:#fff;border:1.5px solid var(--line);border-radius:99px;
  padding:4px 12px;box-shadow:0 2px 5px rgba(11,29,65,.07);
}
/* real logo art in the tile: the gradient and monogram shading would fight it */
.gico.glogo{background:#fff;padding:0;overflow:hidden;box-shadow:inset 0 0 0 1.5px var(--line), 0 8px 16px rgba(11,29,65,.18)}
.gico.glogo::before{display:none}
.gico.glogo img,.gico.glogo picture{display:block;width:100%;height:100%;object-fit:cover;border-radius:15px}

/* compare table */
.cmpframe{
  border-radius:19px;padding:2px;
  background:linear-gradient(160deg,var(--gold-hi),rgba(228,180,44,.3) 35%,rgba(11,29,65,.35));
  box-shadow:0 26px 55px rgba(5,15,38,.18);
  overflow:hidden;
}
.cmpwrap{background:#fff;border-radius:17px;overflow-x:auto}
table.cmp{width:100%;border-collapse:collapse;min-width:760px}
table.cmp thead th{
  background:linear-gradient(115deg,#050f26,#0d2450);color:#fff;text-align:left;
  font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:2px;text-transform:uppercase;font-weight:600;
  padding:13px 16px;white-space:nowrap;
}
table.cmp thead th.r{text-align:right}
table.cmp td{padding:11px 16px;border-bottom:1px solid var(--line);font-size:13px;vertical-align:middle}
table.cmp tbody tr:last-child td{border-bottom:0}
table.cmp tbody tr{transition:background .12s}
table.cmp tbody tr:hover{background:var(--paper)}
table.cmp .g a{font-weight:800;color:var(--red);text-decoration:none;font-size:13.5px}
table.cmp .g a:hover{text-decoration:underline}
table.cmp .c{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);font-weight:600}
table.cmp .n{font-family:'IBM Plex Mono',monospace;font-weight:600;text-align:right;color:var(--navy);white-space:nowrap}
table.cmp .n.hot{color:var(--red-dark)}
table.cmp .d{color:var(--muted);font-weight:600;font-size:12.5px;white-space:nowrap}

/* ============ TODAY: per-game daily digest ============ */
.daily-block{margin-bottom:14px}
.dhead{text-align:center;margin-bottom:22px}
.dhead .cat{display:inline-flex;align-items:center;gap:9px;
  font-family:'IBM Plex Mono',monospace;font-size:9.5px;font-weight:600;letter-spacing:2.6px;text-transform:uppercase;color:var(--red);margin-bottom:8px}
.dhead .cat::before,.dhead .cat::after{content:"";width:22px;height:1.5px;background:linear-gradient(90deg,transparent,var(--gold))}
.dhead .cat::after{background:linear-gradient(90deg,var(--gold),transparent)}
.dhead h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(24px,3.4vw,34px);color:var(--navy);letter-spacing:-1px;margin:0}
.dhead h2 .lux{font-weight:600;background:linear-gradient(100deg,var(--red),#ff7d64);-webkit-background-clip:text;background-clip:text;color:transparent}
.dhead p{color:var(--muted);font-weight:600;font-size:13.5px;margin:6px 0 0}
.dsolve{display:grid;grid-template-columns:1.15fr .85fr;gap:26px;align-items:start;margin-bottom:16px}
@media(max-width:860px){.dsolve{grid-template-columns:1fr;gap:18px}}
.dpanel{border-radius:18px;padding:2px;
  background:linear-gradient(160deg,var(--gold-hi),rgba(228,180,44,.3) 35%,rgba(11,29,65,.35));
  box-shadow:0 20px 44px rgba(5,15,38,.16)}
.dpanel .in{background:linear-gradient(170deg,#ffffff,#f4f7fb);border-radius:16px;padding:20px}
.dpanel .lset{margin-bottom:14px}
.dpanel .lset .lt{width:44px;height:44px;font-size:18px;border-radius:11px}
.minians{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:7px;margin-bottom:14px}
.minians .m{display:flex;align-items:center;justify-content:space-between;gap:6px;
  background:#fff;border:1.5px solid var(--line);border-radius:9px;padding:7px 10px}
.minians .m b{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:12.5px;color:var(--navy);letter-spacing:.3px}
.minians .m span{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--muted);font-weight:600}
.minians .m:nth-child(4n+2){border-color:#f0b7bb}.minians .m:nth-child(4n+2) b{color:var(--red-dark)}
.minians .m:nth-child(4n+3){border-color:#e8d29a}.minians .m:nth-child(4n+3) b{color:#8a6508}
.minians .m:nth-child(4n){border-color:#a9dcc0}.minians .m:nth-child(4n) b{color:var(--green)}
.moreans{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:1px;color:var(--muted);font-weight:600;margin:0 0 14px}
.dcta{display:inline-flex;align-items:center;gap:8px;position:relative;overflow:hidden;
  background:linear-gradient(160deg,#ff6b60,var(--red) 55%,var(--red-dark));
  color:#fff;font-weight:800;font-size:12px;letter-spacing:.6px;border-radius:10px;padding:12px 22px;text-decoration:none;
  box-shadow:0 6px 16px rgba(229,57,53,.45), inset 0 1px 0 rgba(255,255,255,.35), 0 2px 0 var(--red-dark);
  transition:transform .15s}
.dcta::after{content:"";position:absolute;top:0;bottom:0;width:34px;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);animation:sheen 3.2s ease-in-out infinite}
.dcta:hover{transform:translateY(-2px)}
.dcard-stat .factcard{padding:20px 22px}
.dcard-stat .fc-k{margin-bottom:12px}
.dcard-stat .factframe{position:static}
/* blossom petals */
.petals{display:grid;grid-template-columns:repeat(3,44px);grid-template-rows:repeat(3,44px);gap:5px;justify-content:center;margin-bottom:14px}
.petal{display:grid;place-items:center;border-radius:10px;position:relative;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:17px;color:#fff;
  background:linear-gradient(160deg,#7d6cff,#5a3fb8);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35), inset 0 -5px 8px rgba(0,0,0,.22), 0 4px 8px rgba(90,63,184,.3)}
.petal.center{background:linear-gradient(160deg,var(--gold-hi),var(--gold-lo));color:#4c3703;box-shadow:inset 0 2px 0 rgba(255,255,255,.5), inset 0 -5px 8px rgba(76,55,3,.28), 0 5px 10px rgba(169,126,12,.35)}
.petal.blank{background:transparent;box-shadow:none}
/* word craze: clue/answer pairs, not a letter set */
.cluelist{display:grid;gap:6px;margin-bottom:14px}
.cluelist .cl{display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:#fff;border:1.5px solid var(--line);border-radius:9px;padding:8px 12px}
.cluelist .cl .q{font-size:12.5px;color:var(--muted);font-weight:600;line-height:1.4}
.cluelist .cl b{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:13px;color:var(--navy);letter-spacing:.3px;white-space:nowrap}
.cluelist .cl:nth-child(3n+2){border-color:#f0b7bb}.cluelist .cl:nth-child(3n+2) b{color:var(--red-dark)}
.cluelist .cl:nth-child(3n){border-color:#e8d29a}.cluelist .cl:nth-child(3n) b{color:#8a6508}

/* ============ HOW IT WORKS: numbered prose steps ============ */
.howsteps{max-width:820px;margin:0 auto}
.howsteps .hslede{color:#3d4a68;line-height:1.85;font-size:16px;font-weight:500;margin:0 0 30px}
.howsteps .hslede b{color:var(--navy);font-weight:800}
.howstep{position:relative;padding:0 0 4px 0;margin:0 0 26px}
.howstep h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:19px;color:var(--navy);
  letter-spacing:-.3px;margin:0 0 8px;display:flex;align-items:center;gap:12px}
.howstep h3 .sn{flex:none;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;
  font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:600;color:#fff;
  background:linear-gradient(160deg,#0d2450,var(--navy));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 3px 0 #050f26, 0 6px 12px rgba(11,29,65,.25)}
.howstep:nth-of-type(2) h3 .sn{background:linear-gradient(160deg,#ff6b60,var(--red));box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 3px 0 var(--red-dark), 0 6px 12px rgba(229,57,53,.3)}
.howstep:nth-of-type(3) h3 .sn{background:linear-gradient(160deg,var(--gold-hi),var(--gold-lo));color:#4c3703;box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 3px 0 #a97e0c, 0 6px 12px rgba(169,126,12,.3)}
.howstep p{color:#3d4a68;line-height:1.85;font-size:15.5px;font-weight:500;margin:0;padding-left:44px}
.howstep p b{color:var(--navy);font-weight:800}
.howstep p a{color:var(--red);font-weight:700;border-bottom:2px solid rgba(229,57,53,.25)}
.howsub{max-width:820px;margin:34px auto 0;padding-top:26px;border-top:1px solid var(--line)}
.howsub h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:19px;color:var(--navy);letter-spacing:-.3px;margin:0 0 8px}
.howsub h3 .lux{font-weight:600;font-style:italic;font-family:'Fraunces',serif;background:linear-gradient(100deg,#b8892a,var(--gold),#8a6508);-webkit-background-clip:text;background-clip:text;color:transparent}
.howsub p{color:#3d4a68;line-height:1.85;font-size:15.5px;font-weight:500;margin:0}
.howsub p b{color:var(--navy);font-weight:800}
.howsub p a{color:var(--red);font-weight:700;border-bottom:2px solid rgba(229,57,53,.25)}
.gbiggrid.flat{margin-top:6px}

/* ============ METHOD: verify checklist ============ */
.vcheck{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:11px}
.vcheck li{display:flex;align-items:flex-start;gap:12px;color:#3d4a68;line-height:1.7;font-size:15px;font-weight:600}
.vcheck li .ck{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;margin-top:1px;
  background:linear-gradient(160deg,#ff6b60,var(--red));color:#fff;font-size:13px;font-weight:800;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 3px 7px rgba(229,57,53,.35)}
.vcheck li b{color:var(--navy);font-weight:800}

/* ============ CONTACT: email line ============ */
.emailrow{display:inline-flex;align-items:center;gap:11px;margin:0 0 30px;
  background:linear-gradient(170deg,#ffffff,#f4f7fb);border:1.5px solid var(--line);border-radius:12px;
  padding:12px 18px;box-shadow:0 6px 16px rgba(11,29,65,.07)}
.emailrow .lbl{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:1.8px;text-transform:uppercase;color:var(--muted);font-weight:600}
.emailrow a{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:17px;color:var(--red);text-decoration:none;letter-spacing:-.3px}
.emailrow a:hover{text-decoration:underline}

/* ============ STATIC: last-updated stamp ============ */
.updated{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted);font-weight:600;margin:0 0 28px}

/* ============ STATIC: lead paragraph ============ */
.leadp{color:#3d4a68;line-height:1.85;font-size:16px;font-weight:500;margin:0 0 30px}
.leadp b{color:var(--navy);font-weight:800}

/* ============ SEARCH ============ */
.searchform{max-width:740px;margin:8px auto 0;position:relative;z-index:3}
.searchform .box{display:flex;gap:10px;align-items:stretch;
  background:rgba(9,20,46,.55);border:1.5px solid rgba(255,255,255,.16);border-radius:16px;padding:9px;
  box-shadow:0 24px 55px rgba(3,10,28,.5), inset 0 1px 0 rgba(255,255,255,.08);backdrop-filter:blur(8px)}
.searchform input[type=text]{flex:1;min-width:0;background:transparent;border:0;outline:0;color:#fff;
  font-family:'Inter',sans-serif;font-size:17px;font-weight:600;padding:14px 16px;letter-spacing:.2px}
.searchform input[type=text]::placeholder{color:rgba(255,255,255,.45);font-weight:500}
.searchform button{flex:none;position:relative;overflow:hidden;cursor:pointer;border:0;
  background:linear-gradient(160deg,#ff6b60,var(--red) 55%,var(--red-dark));
  color:#fff;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:14px;letter-spacing:1.4px;
  border-radius:11px;padding:0 30px;
  box-shadow:0 8px 20px rgba(229,57,53,.5), inset 0 1px 0 rgba(255,255,255,.35), 0 3px 0 var(--red-dark);
  transition:transform .14s}
.searchform button::after{content:;position:absolute;top:0;bottom:0;width:38px;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:sheen 3s ease-in-out infinite}
.searchform button:hover{transform:translateY(-2px)}
.searchform .hint{text-align:center;margin:16px 0 0;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:1px;color:rgba(255,255,255,.5);font-weight:500}
.searchform .hint b{color:var(--gold-hi)}
.resgrid{max-width:760px;margin:0 auto;display:grid;gap:12px}
.rescard{display:flex;align-items:center;gap:16px;text-decoration:none;
  background:linear-gradient(170deg,#ffffff,#f6f8fb);border:1.5px solid var(--line);border-radius:16px;padding:18px 20px;
  box-shadow:0 12px 26px rgba(11,29,65,.08);transition:transform .16s,box-shadow .16s,border-color .16s;position:relative;overflow:hidden}
.rescard::after{content:;position:absolute;top:0;left:-70%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent);transform:skewX(-18deg);transition:left .5s}
.rescard:hover{transform:translateY(-3px);border-color:rgba(228,180,44,.6);box-shadow:0 20px 40px rgba(11,29,65,.14)}
.rescard:hover::after{left:130%}
.rescard .ri{flex:none;width:52px;height:52px;border-radius:13px;display:grid;place-items:center;overflow:hidden;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:20px;color:#fff;
  background:linear-gradient(160deg,#0d2450,var(--navy));
  box-shadow:inset 0 2px 0 rgba(255,255,255,.2), inset 0 -6px 10px rgba(0,0,0,.3), 0 5px 12px rgba(11,29,65,.3)}
.rescard .ri img{width:100%;height:100%;object-fit:cover;border-radius:13px;display:block}
.rescard .rt{flex:1;min-width:0}
.rescard .rt h3{margin:0 0 3px;font-size:16px;font-weight:800;color:var(--navy);letter-spacing:-.3px}
.rescard .rt small{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.6px;color:var(--muted);font-weight:600}
.rescard .rc{flex:none;color:var(--red);font-size:22px;font-weight:800;transition:transform .16s}
.rescard:hover .rc{transform:translateX(4px)}
.nores{max-width:640px;margin:0 auto;text-align:center;color:var(--muted);font-weight:600;font-size:15px;line-height:1.8}
.nores b{color:var(--navy)}
.nores a{color:var(--red);font-weight:700}

/* ============ 404 ============ */
.askedrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 4px;
  background:linear-gradient(170deg,#fff7f7,#fdeeee);border:1.5px solid rgba(229,57,53,.28);border-radius:12px;
  padding:12px 18px;box-shadow:0 6px 16px rgba(229,57,53,.07)}
.askedrow .lbl{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:1.8px;text-transform:uppercase;color:var(--red-dark);font-weight:600}
.askedrow code{font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:600;color:var(--navy);word-break:break-all}
.searchform .box.light{background:linear-gradient(170deg,#ffffff,#f4f7fb);border-color:var(--line);
  box-shadow:0 10px 26px rgba(11,29,65,.09), inset 0 1px 0 #fff}
.searchform .box.light input[type=text]{color:var(--ink)}
.searchform .box.light input[type=text]::placeholder{color:var(--muted)}

/* Puzzle cards labelled with a picture name rather than a short letter set
   need to wrap onto a second line instead of being clipped. */
.pzgrid .lvl{min-height:78px;display:flex;flex-direction:column;justify-content:center}
.pzgrid .lvl small{white-space:normal;line-height:1.25;letter-spacing:.4px;text-transform:none;font-size:9.5px}

/* ============ DRAWN PUZZLE (nonogram etc.) ============ */
.nonowrap{display:flex;justify-content:center}
.nonoframe{border-radius:20px;padding:2px;background:linear-gradient(160deg,var(--gold-hi),rgba(228,180,44,.3) 35%,rgba(11,29,65,.35));box-shadow:0 24px 52px rgba(5,15,38,.18)}
.nonoframe .in{background:linear-gradient(170deg,#ffffff,#f4f7fb);border-radius:18px;padding:26px}
.nonoframe .in svg{display:block;width:100%;max-width:280px;height:auto;margin:0 auto}
.nonocap{text-align:center;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted);font-weight:600;margin:14px 0 0}
.lvlprose{max-width:820px;margin:32px auto 0}
.lvlprose p{color:#3d4a68;line-height:1.85;font-size:15.5px;font-weight:500;margin:0 0 14px}
.lvlprose p:last-child{margin:0}
.lvlprose b{color:var(--navy);font-weight:800}
.lvlprose a{color:var(--red);font-weight:700;border-bottom:2px solid rgba(229,57,53,.25)}

/* ============ LANGUAGE BAND ============
   Sits directly under the header on pages that have another language. Same
   navy as the nav above and the hero below, so the three read as one block. */
.langband{background:linear-gradient(115deg,#050f26 0%,#0b1d41 55%,#102a5b 100%);
  padding:11px 20px;border-top:1px solid rgba(255,255,255,.07)}
.langband-in{max-width:1220px;margin:auto;display:flex;align-items:center;justify-content:center;
  gap:14px;flex-wrap:wrap}
.langband .lbl{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;
  letter-spacing:2.4px;text-transform:uppercase;
  background:linear-gradient(90deg,#ffe38f,#e4b42c);-webkit-background-clip:text;background-clip:text;color:transparent}
.langsw{display:inline-flex;align-items:center;gap:6px;padding:4px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);border-radius:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.langsw .lsw{display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:9px;
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;font-weight:600;letter-spacing:1.2px;
  text-transform:uppercase;color:#dfe6f4;opacity:.82;text-decoration:none;
  transition:background .16s,opacity .16s,transform .16s}
.langsw .lsw:hover{opacity:1;background:rgba(255,255,255,.13);transform:translateY(-1px)}
.langsw .lsw.on{opacity:1;color:#4c3703;
  background:linear-gradient(160deg,#ffe38f,#e4b42c 55%,#a97e0c);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 4px 12px rgba(169,126,12,.4)}

.langsw .cd{display:none}
@media(max-width:620px){
  .langband{padding:9px 14px}
  .langband .lbl{display:none}
  .langsw .nm{display:none}
  .langsw .cd{display:inline}
  .langsw .lsw{padding:8px 12px}
}
/* SVG flags: fixed box, slight rounding, thin edge so a white stripe still
   reads against the navy band. */
.langsw .fl{display:inline-block;width:22px;height:14px;line-height:0;flex:none;
  border-radius:2px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.35),0 1px 3px rgba(0,0,0,.4)}
.langsw .fl svg{display:block;width:100%;height:100%}
.langsw .lsw.on .fl{box-shadow:0 0 0 1px rgba(76,55,3,.45),0 1px 3px rgba(0,0,0,.3)}

/* ============ READER COMMENTS ============ */
.commentwrap{max-width:840px;margin:0 auto}
.cmsg{border-radius:12px;padding:13px 18px;margin:0 0 18px;font-size:14px;font-weight:600;line-height:1.6}
.cmsg.ok{background:linear-gradient(120deg,rgba(29,138,78,.1),rgba(67,212,136,.08));border:1.5px solid rgba(29,138,78,.4);color:#136437}
.cmsg.err{background:linear-gradient(120deg,rgba(229,57,53,.09),rgba(255,107,96,.06));border:1.5px solid rgba(229,57,53,.4);color:var(--red-dark)}
.ccount{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.ccount .badge{display:inline-flex;align-items:center;gap:9px;font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:#4c3703;background:linear-gradient(160deg,var(--gold-hi),var(--gold));border:1px solid var(--gold-lo);border-radius:99px;padding:7px 15px;box-shadow:0 4px 12px rgba(169,126,12,.25)}
.ccount .badge b{font-size:13px}
.ccount .sortnote{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.cformframe{border-radius:19px;padding:2px;background:linear-gradient(160deg,var(--gold-hi),rgba(228,180,44,.3) 35%,rgba(11,29,65,.35));box-shadow:0 20px 44px rgba(5,15,38,.16);margin-bottom:30px}
.cform{background:linear-gradient(170deg,#ffffff,#f4f7fb);border-radius:17px;padding:24px 24px 22px}
.cform h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:18px;color:var(--navy);margin:0 0 4px}
.cform .hint{font-size:13px;color:var(--muted);margin:0 0 16px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cfield{display:flex;flex-direction:column;gap:6px}
.cfield label{font-family:'IBM Plex Mono',monospace;font-size:9.5px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted)}
.cfield input,.cfield textarea{font-family:'Inter',sans-serif;font-size:14.5px;color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:11px;padding:11px 13px;outline:none;transition:border-color .15s,box-shadow .15s;width:100%}
.cfield input:focus,.cfield textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(228,180,44,.18)}
.cfield textarea{resize:vertical;min-height:96px}
.cfoot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:4px}
.cfoot .fine{font-size:11.5px;color:var(--muted);max-width:440px;line-height:1.5}
.cbtn{position:relative;overflow:hidden;border:0;cursor:pointer;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:14px;letter-spacing:.3px;color:#fff;background:linear-gradient(165deg,var(--red-hi),var(--red) 55%,var(--red-dark));border-radius:12px;padding:12px 26px;box-shadow:0 10px 22px rgba(201,39,39,.32);transition:transform .15s,box-shadow .15s}
.cbtn:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(201,39,39,.4)}
.clist{display:flex;flex-direction:column;gap:14px}
.ccard{display:flex;gap:15px;background:#fff;border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:14px;padding:17px 19px;box-shadow:0 8px 20px rgba(11,29,65,.06)}
.cavatar{flex:0 0 42px;height:42px;border-radius:50%;display:grid;place-items:center;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:17px;color:#fff;box-shadow:0 5px 12px rgba(11,29,65,.2)}
.ccard:nth-child(3n+1) .cavatar{background:linear-gradient(160deg,#1d3a75,var(--navy))}
.ccard:nth-child(3n+2) .cavatar{background:linear-gradient(160deg,var(--red-hi),var(--red-dark))}
.ccard:nth-child(3n+3) .cavatar{background:linear-gradient(160deg,var(--gold-hi),var(--gold-lo));color:#4c3703}
.cbody{flex:1;min-width:0}
.cmeta{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:5px}
.cmeta .who{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:14.5px;color:var(--navy)}
.cmeta .when{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.8px;text-transform:uppercase;color:var(--muted)}
.ctext{font-size:14.5px;line-height:1.7;color:#33405c;margin:0}
.cempty{text-align:center;font-size:14px;color:var(--muted);font-weight:600;padding:6px 0 2px}
.moderated-note{text-align:center;font-size:12px;color:var(--muted);margin-top:20px;font-family:'IBM Plex Mono',monospace;letter-spacing:.5px}

/* ============ SINGLE-TEXT SOLUTION (decoded quote, phrase) ============ */
.solutionframe{max-width:840px;margin:0 auto 30px;border-radius:20px;padding:2px;
  background:linear-gradient(160deg,var(--gold-hi),rgba(228,180,44,.3) 35%,rgba(11,29,65,.35));
  box-shadow:0 24px 52px rgba(5,15,38,.18)}
.solutioncard{background:linear-gradient(170deg,#ffffff,#f4f7fb);border-radius:18px;padding:26px 30px}
.sol-k{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:2.6px;text-transform:uppercase;color:var(--red);font-weight:600;margin-bottom:12px}
.solq{margin:0;font-family:'Fraunces',serif;font-style:italic;font-weight:600;
  font-size:clamp(20px,2.8vw,28px);line-height:1.45;color:var(--navy);letter-spacing:-.4px}
.sola{margin:14px 0 0;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted);font-weight:600}
.sola b{color:var(--red)}

/* The NEWEST badge sits at top:-9px so it overhangs its card, but .lvl carries
   overflow:hidden and was clipping it to a sliver on every game hub and daily
   hub. Scoping to cards that actually carry a badge lets that one card show it
   while every other card keeps the clip it was given. A browser without :has()
   simply behaves as it did before, so this cannot regress anything. */
.lvl:has(.newb){overflow:visible}

/* Same defect as .newb above: .ans carries overflow:hidden, so the LONGEST
   crown at top:-9px was clipped to a sliver on every level page of every game.
   Scoped to the card that actually carries a crown, so every other answer chip
   keeps its clip. */
.ans:has(.crown){overflow:visible}