/* Shared styles for the per-duration timer pages + party pages.
   The "Choose your bomb" gallery rules are copied verbatim from the homepage so the cards match exactly. */
:root{
  --cream:oklch(0.96 0.022 85);--cream2:oklch(0.93 0.03 80);
  --blue:#2f6fd6;--navy:#16306e;--ink:oklch(0.27 0.04 265);--ink-soft:oklch(0.42 0.03 265);
  --gold:#f6c33d;--gold-deep:#e9a81e;--line-cream:oklch(0.84 0.03 80);--spark:oklch(0.72 0.20 55);
  --purple:oklch(0.42 0.17 300);--purple-deep:oklch(0.30 0.14 300);--free:oklch(0.74 0.16 150)}
*{box-sizing:border-box}html,body{margin:0}
html{scroll-behavior:smooth}
body{font-family:"Hanken Grotesk","Hanken Grotesk Fallback",system-ui,sans-serif;color:var(--ink);background:var(--cream);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}h1,h2,h3{font-family:"Baloo 2",system-ui;margin:0;letter-spacing:-.01em}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.btn{font-family:"Hanken Grotesk",inherit;font-weight:700;border-radius:13px;cursor:pointer;border:1px solid transparent;text-decoration:none;display:inline-flex;align-items:center;gap:9px;justify-content:center;padding:15px 26px;font-size:17px;transition:.15s;white-space:nowrap}
.btn-gold{background:linear-gradient(180deg,#ffe27a,var(--gold-deep));color:#2a1c05;border-color:#ffd87a;box-shadow:0 6px 18px -8px rgba(246,195,61,.7)}
.btn-gold:hover{filter:brightness(1.05);transform:translateY(-1px)}
.btn-lg{padding:16px 26px;font-size:17px}
.btn-unlock{background:linear-gradient(180deg,#56d98a,#2f9e5f);color:#06210f;border-color:#74e6a2;box-shadow:0 12px 26px -12px rgba(47,158,95,.8)}
.btn-unlock:hover{filter:brightness(1.05);transform:translateY(-1px)}
/* nav is provided by the shared header.css (loaded last) */
/* hero */
.phero{background:radial-gradient(130% 130% at 70% 30%,#5197ec,#2f6fd6 45%,#1f4ea8 100%);color:#fff;text-align:center;padding:48px 0 52px;overflow:hidden}
.phero h1{font-family:"Fredoka","Baloo 2";font-weight:700;font-size:clamp(34px,6vw,58px);line-height:1.02}
.phero p{font-size:18px;color:rgba(255,255,255,.92);max-width:54ch;margin:14px auto 0;font-weight:500;line-height:1.5}
.hero-bomb{width:190px;height:190px;margin:6px auto 0;cursor:pointer}
.phero .btn{margin-top:14px}
/* shared section head (homepage values) */
.sec-head{text-align:center;max-width:620px;margin:0 auto}
.sec-head h2{font-size:clamp(32px,5vw,52px);line-height:1;color:var(--navy)}
.sec-head p{font-size:18px;margin:12px auto 0;line-height:1.5;color:var(--ink-soft)}
/* GALLERY — copied verbatim from the homepage so cards are identical */
.gallery{background:var(--cream);padding:48px 0 60px}
.tcards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:40px}
.tc{position:relative;border-radius:20px;padding:8px;cursor:pointer;transition:transform .16s ease, box-shadow .2s;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line-cream);box-shadow:0 14px 30px -22px rgba(60,40,10,.6)}
.tc:hover{transform:translateY(-7px) rotate(-1.2deg);box-shadow:0 26px 46px -22px color-mix(in oklch, var(--tc-b) 65%, transparent), 0 16px 34px -26px rgba(60,40,10,.55)}
.tc .frame{position:relative;border-radius:15px;overflow:hidden;padding:10px;flex:1;display:flex;flex-direction:column;
  background:linear-gradient(180deg, var(--tc-a), var(--tc-b))}
.tc .pod{position:relative;width:100%;aspect-ratio:1/1;border-radius:11px;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 16%, rgba(255,255,255,.42), rgba(0,0,0,.12) 92%);box-shadow:inset 0 2px 10px rgba(0,0,0,.18)}
.tc .mountpt{position:absolute;inset:0}
.tc .ribbon{margin:9px 4px 3px;text-align:center;font-family:"Baloo 2";font-weight:800;font-size:19px;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.22);line-height:1}
.tc .blurb{margin:0 6px 6px;text-align:center;color:rgba(255,255,255,.92);font-weight:600;font-size:13px;min-height:2.4em;line-height:1.25}
.tc .badge{position:absolute;top:13px;left:13px;z-index:4;white-space:nowrap;font-family:"Baloo 2";font-weight:800;font-size:15px;letter-spacing:.03em;padding:7px 15px;border-radius:999px;color:#fff;background:#27c06a;box-shadow:0 4px 12px -3px rgba(0,0,0,.45)}
.tc .lock{position:absolute;top:12px;right:12px;z-index:5;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(8,12,28,.82);color:#fff;font-size:14px;box-shadow:0 4px 12px -3px rgba(0,0,0,.5)}
.tc .lock svg{width:15px;height:15px;display:block}
.tc.locked .frame{filter:grayscale(.95) saturate(.45) brightness(.97);transition:filter .22s ease}
.tc.locked:hover .frame{filter:none}
.tc.locked .frame::after{content:"";position:absolute;inset:0;background:rgba(18,22,42,.22);pointer-events:none;transition:opacity .22s ease;z-index:1}
.tc.locked:hover .frame::after{opacity:0}
.tc.locked .pod{filter:grayscale(.9)}
.tc.locked:hover .pod{filter:none}
/* other-length chips */
.lengths{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:14px}
.lengths a{font-family:"Baloo 2";font-weight:700;font-size:14px;color:var(--navy);background:#fff;border:1px solid var(--line-cream);border-radius:999px;padding:9px 16px;text-decoration:none}
.lengths a:hover{background:#f3f8ff}
.lengths a.cur{background:var(--gold);border-color:var(--gold-deep)}
/* prose */
.prose{max-width:760px;margin:46px auto 0}
.prose p{font-size:16.5px;line-height:1.7;color:var(--ink-soft);margin:0 0 16px}
.prose h2{font-size:24px;color:var(--navy);margin:28px 0 10px}
.prose a{color:var(--blue);font-weight:700}
.prose strong{color:var(--ink)}
/* unlock CTA */
.unlock-cta{background:#210465;color:#fff;border-radius:22px;text-align:center;padding:40px 26px;margin-top:50px}
.unlock-cta h2{font-size:28px}
.unlock-cta p{color:#ecdcff;margin:10px auto 20px;max-width:46ch;font-weight:500}
/* unlock sheet (modal) + toast — same as the homepage */
.sheet-scrim{position:fixed;inset:0;z-index:80000;background:rgba(8,10,24,.62);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;padding:22px}
.sheet-scrim.open{display:flex}
.sheet{background:linear-gradient(180deg,var(--purple),var(--purple-deep));color:#fff;border:1px solid rgba(255,255,255,.16);border-radius:24px;max-width:440px;width:100%;padding:26px;position:relative;box-shadow:0 40px 90px -30px rgba(0,0,0,.7)}
.sheet .x{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.2);color:#fff;cursor:pointer;font-size:16px}
.sheet .peek{width:195px;aspect-ratio:1;margin:6px auto 4px;position:relative}
.sheet h3{text-align:center;font-size:26px;margin:8px 0 4px}
.sheet .pp{text-align:center;color:#ecdcff;font-weight:500;margin:0 0 18px}
.sheet .acts{display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}
.sheet .acts .btn{white-space:normal}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);z-index:95000;background:#15233f;color:#fff;border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:14px 20px;font-weight:700;opacity:0;transition:.3s;display:flex;gap:10px;align-items:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast .t{width:24px;height:24px;border-radius:7px;background:var(--free);color:#06210f;display:flex;align-items:center;justify-content:center;font-weight:900}
/* footer (legacy .fin footer; scoped so it can't leak onto the shared .site-footer share/copyright links) */
footer{background:#0a142e;color:rgba(255,255,255,.72);padding:40px 0 30px;font-size:14px;margin-top:54px}
footer .fin{max-width:1180px;margin:0 auto;padding:0 28px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
footer .fin a{color:rgba(255,255,255,.82);text-decoration:none;margin-left:18px}footer .fin a:hover{color:#fff}
@media (max-width:980px){.tcards{grid-template-columns:repeat(2,1fr)}.nav-links{display:none}}
@media (max-width:560px){.wrap{padding:0 18px}.tcards{grid-template-columns:1fr}}