/* Hatchnight — layout replicates Lorewheel's app shell (backdrop → rounded .frame → .side | .content | .rail;
   phone: .side becomes a fixed bottom tab bar). Same token names as Lorewheel, Hatchnight's own night/egg-gold values. */
:root{
  --frame:#14152a; --panel:#1c1e38; --panel-2:#252846; --panel-3:#2f3356; --line:#363a62;
  --text:#f3f1ea; --muted:#a3a5c4; --faint:#6f7298;
  --gold:#ffc94a; --ember:#ff9f43; --moss:#4be3b0; --rose:#ff6f91;
  --grad:linear-gradient(95deg,var(--gold),var(--ember));
  --grad-btn:linear-gradient(95deg,#4b2a9c,#2d3fa8);
  --bd-1:#5a64a8; --bd-2:#8c95d0; --bd-3:#2b3170;
  --r-lg:22px; --r-md:14px; --r-sm:10px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --font:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --brand:"Fredoka",var(--font);
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:16px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before{animation:none!important;transition:none!important}}
body{margin:0;background:var(--bd-1);color:var(--text);font:17.1px/1.5 var(--font);overflow-x:hidden}
h1,h2,h3{margin:0;line-height:1.1;text-wrap:balance}
p{margin:0}
a{color:inherit}
button{font:inherit;color:inherit}
svg{display:block}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:8px}

/* backdrop + frame */
.backdrop{position:fixed;inset:0;z-index:-1;background:
  radial-gradient(900px 600px at 15% 10%,var(--bd-2),transparent 60%),
  radial-gradient(800px 700px at 90% 90%,var(--bd-3),transparent 60%),var(--bd-1)}
.frame{max-width:1440px;margin:24px auto;background:var(--frame);border-radius:var(--r-lg);
  box-shadow:0 40px 90px -30px rgba(20,24,40,.65),0 0 0 1px rgba(255,255,255,.04);
  display:grid;grid-template-columns:220px minmax(0,1fr) 320px;min-height:calc(100vh - 48px);width:calc(100% - 48px)}
.frame.collapsed{grid-template-columns:76px minmax(0,1fr) 320px}

/* sidebar */
.side{position:sticky;top:0;align-self:start;height:100vh;max-height:calc(100vh - 48px);display:flex;flex-direction:column;gap:14px;padding:26px 18px 20px;overflow-y:auto}
.logo{display:flex;align-items:center;gap:10px;padding:0 8px;text-decoration:none;font:700 1.05rem var(--brand);letter-spacing:.08em}
.nav{display:flex;flex-direction:column;gap:2px;margin-top:10px}
.nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r-sm);text-decoration:none;color:var(--muted);font-weight:600;font-size:.98rem;position:relative;transition:background .15s,color .15s}
.nav a:hover{background:var(--panel);color:var(--text)}
.nav a[aria-current="page"]{color:var(--text)}
.nav a[aria-current="page"]::before{content:"";position:absolute;left:-18px;top:10px;bottom:10px;width:3px;border-radius:3px;background:var(--grad)}
.nav svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.nav a[aria-current="page"] svg{stroke:var(--gold)}
.nav .nav-pro{color:var(--gold)}
.promo{margin-top:auto;background:var(--grad-btn);border-radius:var(--r-md);padding:16px;display:grid;gap:8px}
.promo b{font:700 1.25rem/1.1 var(--brand)}
.promo p{font-size:.88rem;color:#e3e2f5}
.promo-btn{justify-self:start;background:rgba(255,255,255,.14);padding:8px 12px;border-radius:999px;text-decoration:none;font-weight:700;font-size:.88rem}
.side-install{background:var(--panel-2);border:0;border-radius:var(--r-sm);padding:10px;font-weight:600;font-size:.85rem;cursor:pointer}
.side-legal{font-size:.75rem;color:var(--faint);padding:0 4px}
.side-legal a{color:var(--faint)}
.frame.collapsed .logo span,.frame.collapsed .nav span,.frame.collapsed .promo,.frame.collapsed .side-legal,.frame.collapsed .side-install{display:none}
.frame.collapsed .nav a{justify-content:center}

/* content + topbar */
.content{min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:12px;padding:20px 28px 10px}
.icon-btn{width:44px;height:44px;flex:none;display:grid;place-items:center;background:var(--panel);border:0;border-radius:var(--r-md);cursor:pointer;color:var(--muted);transition:background .15s,color .15s}
.icon-btn:hover{background:var(--panel-2);color:var(--text)}
.icon-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.search{flex:1;max-width:340px;position:relative}
.search input{width:100%;height:44px;background:var(--panel);border:0;border-radius:var(--r-md);padding:0 40px 0 14px;color:var(--text);font:500 .95rem var(--font)}
.search input::placeholder{color:var(--faint)}
.search svg{position:absolute;right:12px;top:12px;width:20px;height:20px;fill:none;stroke:var(--faint);stroke-width:1.8;stroke-linecap:round}
.tb-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
.tb-acct{height:40px;padding:0 14px;background:var(--panel-2);border:0;border-radius:999px;font-weight:700;font-size:.9rem;cursor:pointer}
.pro-chip{height:40px;display:inline-flex;align-items:center;padding:0 16px;border-radius:999px;background:var(--grad);color:#2a1a00;font-weight:800;font-size:.9rem;text-decoration:none;white-space:nowrap}

.main{padding:10px 28px 40px;display:flex;flex-direction:column;gap:22px}
.htitle{font-weight:800;font-size:clamp(1.7rem,3.2vw,2.4rem);letter-spacing:-.01em}
.hsub{color:#d6d5e4;font-size:.95rem;max-width:60ch;margin-top:-14px}
.ask{font-size:.95rem;font-weight:700;margin-bottom:-10px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip-f{background:var(--panel-2);color:var(--muted);border:0;border-radius:99px;padding:10px 14px;font-weight:600;font-size:.92rem;cursor:pointer}
.chip-f[aria-selected="true"]{background:var(--text);color:var(--frame)}

/* hero */
.hero{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--panel);min-height:300px;display:grid}
.hero-art{position:absolute;inset:0;transition:opacity .4s var(--ease)}
.hero-art svg{position:absolute;right:4%;bottom:0;height:92%;width:auto;max-width:55%}
.hero-body{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;padding:22px 24px;
  background:linear-gradient(90deg,rgba(20,21,42,.92) 0%,rgba(20,21,42,.6) 45%,transparent 75%)}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:auto}
.tags span{background:rgba(20,21,42,.72);padding:5px 10px;border-radius:99px;font-size:.78rem;font-weight:600}
.hero-title{font:700 2rem var(--brand)}
.hero-text{color:#e3e2f0;max-width:44ch;font-size:.95rem}
.hero-cta{display:flex;gap:10px;align-items:stretch;margin-top:4px}
.play{display:grid;text-align:left;background:var(--grad-btn);border:0;border-radius:var(--r-md);padding:10px 18px;cursor:pointer;box-shadow:0 10px 30px -10px #2d3fa8}
.play b{font-size:1.05rem}.play small{color:#cfd0f0;font-size:.8rem}
.fav{height:auto;background:rgba(255,255,255,.08)}
.dots{display:flex;gap:6px;margin-top:6px}
.dots i{width:18px;height:4px;border-radius:4px;background:rgba(255,255,255,.25)}
.dots i.on{width:32px;background:var(--text)}

/* seasonal banner */
.season{border-radius:var(--r-lg);padding:20px 22px;display:grid;gap:8px;border:1px solid #9a6a1f;
  background:linear-gradient(120deg,#3a2a1a,#2a1e3a 70%)}
.season-kick{font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.season h2{font:700 1.6rem var(--brand)}
.season p{color:#e6e2d6}
.season-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.btn-grad,.btn-dark{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:var(--r-md);border:0;font-weight:800;font-size:.95rem;text-decoration:none;cursor:pointer}
.btn-grad{background:var(--grad);color:#2a1a00}
.btn-dark{background:var(--panel-2);color:var(--text)}

/* daily strip */
.daily{display:flex;justify-content:space-between;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:14px 18px}
.daily b{font-size:1.05rem}.daily p{color:var(--muted);font-size:.9rem}
.daily-btn{background:var(--grad);color:#2a1a00;border:0;border-radius:999px;padding:10px 16px;font-weight:800;cursor:pointer;white-space:nowrap}

/* rows */
.row,.packs{display:grid;gap:12px;min-width:0}
.row-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.row-head h2{font-size:1.2rem;font-weight:800}
.row-head h2 span{font-size:.85rem;font-weight:500;color:var(--muted);margin-left:6px}
.row-arrows{display:flex;gap:6px}
.arrow{width:32px;height:32px;border-radius:50%;border:0;background:var(--panel-2);cursor:pointer;font-size:1.2rem;line-height:1}
.strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(170px,190px);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.strip > *{scroll-snap-align:start}
.bcard{background:var(--panel);border-radius:var(--r-md);overflow:hidden;display:grid;cursor:default}
.bcard-art{aspect-ratio:1/1;display:grid;place-items:center;position:relative}
.bcard-art svg{width:78%;height:78%}
.bcard-art .badge{position:absolute;left:8px;top:8px;background:rgba(20,21,42,.75);padding:4px 8px;border-radius:99px;font-size:.72rem;font-weight:700}
.bcard-body{padding:10px 12px 12px;display:grid;gap:2px}
.bcard-body h3{font-size:1rem}
.bcard-body p{font-size:.78rem;color:var(--muted)}
.bcard.found .bcard-art::after{content:"Found";position:absolute;right:8px;top:8px;background:var(--moss);color:#06261b;padding:3px 8px;border-radius:99px;font-size:.7rem;font-weight:800}
.empty{color:var(--muted);font-size:.9rem}
.tile{border-radius:var(--r-md);padding:16px;display:grid;gap:8px;align-content:start;min-height:220px;grid-auto-columns:220px}
#howRow{grid-auto-columns:minmax(210px,230px)}
.tile-tag{justify-self:start;background:rgba(20,21,42,.6);padding:4px 10px;border-radius:99px;font-size:.75rem;font-weight:700}
.tile h3{font:700 1.4rem var(--brand)}
.tile p{font-size:.88rem;color:#e7e6f2}
.t-morning{background:linear-gradient(160deg,#6b4a2a,#2b2440)}
.t-noon{background:linear-gradient(160deg,#2f6a4e,#22314a)}
.t-dusk{background:linear-gradient(160deg,#6a3a6e,#262a52)}
.t-night{background:linear-gradient(160deg,#1f2a6a,#141530)}
.t-trade{background:linear-gradient(160deg,#2a5a6e,#22264a)}

/* pack grid */
.pack-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.pack{background:var(--panel);border-radius:var(--r-md);overflow:hidden;display:grid}
.pack-art{aspect-ratio:16/8;position:relative;overflow:hidden}
.pack-art::after{content:"";position:absolute;inset:0;background-repeat:no-repeat;background-position:center;background-size:42%}
.a-web{background:radial-gradient(circle at 70% 30%,#3b4ab0,#191b3a 70%)}
.a-phone{background:radial-gradient(circle at 30% 30%,#7a3b8e,#1e1a3a 70%)}
.a-pc{background:radial-gradient(circle at 60% 40%,#2c7a6a,#16243a 70%)}
.a-tv{background:radial-gradient(circle at 40% 30%,#a0662a,#2a1a30 70%)}
.a-web::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f3f1ea' stroke-width='1.2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c3 3.5 3 14.5 0 18M12 3c-3 3.5-3 14.5 0 18'/%3E%3C/svg%3E")}
.a-phone::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f3f1ea' stroke-width='1.2'%3E%3Crect x='7' y='2.5' width='10' height='19' rx='2.5'/%3E%3Cpath d='M11 18.5h2'/%3E%3C/svg%3E")}
.a-pc::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f3f1ea' stroke-width='1.2'%3E%3Crect x='3' y='4' width='18' height='12' rx='1.5'/%3E%3Cpath d='M9 20h6M12 16v4'/%3E%3C/svg%3E")}
.a-tv::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f3f1ea' stroke-width='1.2'%3E%3Crect x='2.5' y='5' width='19' height='12' rx='1.5'/%3E%3Cpath d='M8 21h8M9 2l3 3 3-3'/%3E%3C/svg%3E")}
.pack-body{padding:14px 16px 16px;display:grid;gap:4px}
.kick{font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.pack-body h3{font-size:1.1rem;font-weight:800}
.pack-body p:not(.kick):not(.meta){font-size:.88rem;color:var(--muted)}
.meta{font-size:.85rem;font-weight:700;margin-top:4px}

/* panels */
.panel{background:var(--panel);border-radius:var(--r-lg);padding:20px 22px;display:grid;gap:12px}
.panel h2{font-size:1.2rem;font-weight:800}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.checks li{padding-left:30px;position:relative;color:var(--muted);font-size:.95rem}
.checks li b{color:var(--text)}
.checks li::before{content:"✓";position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;background:var(--moss);color:#06261b;font-size:.75rem;font-weight:800;display:grid;place-items:center}
.faq details{background:var(--panel-2);border-radius:var(--r-sm);padding:12px 14px}
.faq summary{cursor:pointer;font-weight:700}
.faq details p{margin-top:8px;color:var(--muted);font-size:.92rem}

/* right rail */
.rail{padding:20px 20px 28px 0;display:grid;gap:14px;align-content:start;position:sticky;top:0;align-self:start;max-height:100vh;overflow-y:auto}
.rail-card{background:var(--panel);border-radius:var(--r-lg);padding:18px;display:grid;gap:10px}
.rail-card h2{font-size:1.2rem;font-weight:800}
.muted{color:var(--muted);font-size:.9rem}
.join form{display:grid;gap:8px}
.join label{font-weight:700;font-size:.85rem}
.join input[type=email],.join select{font:inherit;font-size:.95rem;color:var(--text);background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 12px;width:100%}
.join .check{display:flex;gap:8px;align-items:center;font-weight:600}
.join .check input{width:18px;height:18px;accent-color:var(--gold)}
.join .btn-grad{margin-top:4px}
.form-msg{min-height:1.3em;font-weight:700;font-size:.9rem}
.form-msg.ok{color:var(--moss)}.form-msg.err{color:var(--rose)}
.fine{font-size:.78rem;color:var(--faint)}.fine a{color:var(--muted)}
.found{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.found span{aspect-ratio:1;border-radius:10px;background:var(--panel-2);display:grid;place-items:center;overflow:hidden}
.found span svg{width:90%;height:90%}
.found span:not(.on) svg{filter:brightness(0) opacity(.35)}

/* hatchery sheet */
.sheet{border:0;padding:28px 24px;border-radius:var(--r-lg);background:var(--panel);color:var(--text);width:min(420px,calc(100% - 32px));box-shadow:0 30px 80px -20px #000}
.sheet::backdrop{background:rgba(8,9,20,.7);backdrop-filter:blur(4px)}
.close{position:absolute;right:12px;top:12px;width:38px;height:38px}
.hatch-stage{display:grid;justify-items:center;gap:12px;text-align:center;min-height:330px;align-content:center}
.egg{background:none;border:0;cursor:pointer;padding:0;width:170px;filter:drop-shadow(0 18px 24px #0008)}
.egg svg{width:100%;height:auto;animation:bob 3s ease-in-out infinite}
.egg .crack{opacity:0;transition:opacity .15s}
.egg[data-taps="1"] .c1,.egg[data-taps="2"] .c1,.egg[data-taps="2"] .c2{opacity:1}
.egg.wobble svg{animation:wobble .35s ease-in-out}
@keyframes bob{50%{transform:translateY(-8px)}}
@keyframes wobble{25%{transform:rotate(-9deg)}75%{transform:rotate(9deg)}}
.hint{color:var(--muted);font-size:.92rem}
.reveal{display:grid;justify-items:center;gap:6px;animation:pop .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{from{transform:scale(.6);opacity:0}}
.beast-art{width:160px;height:160px}.beast-art svg{width:100%;height:100%}
.rarity{font-size:.75rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.beast-name{font:700 1.9rem var(--brand)}
.beast-note{color:var(--muted);max-width:30ch;margin-bottom:6px}

.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--text);color:var(--frame);padding:10px 16px;border-radius:999px;font-weight:700;font-size:.9rem;transition:.25s var(--ease);z-index:20}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ≤1280: rail drops below content (as Lorewheel) */
@media (max-width:1280px){
  .frame{grid-template-columns:220px minmax(0,1fr)}
  .frame.collapsed{grid-template-columns:76px minmax(0,1fr)}
  .rail{grid-column:2;position:static;max-height:none;padding:0 28px 32px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
}
/* ≤860: phone/tablet — sidebar becomes a fixed bottom tab bar (as Lorewheel) */
@media (max-width:860px){
  body{background:var(--frame)}
  .backdrop{display:none}
  .frame,.frame.collapsed{display:block;margin:0;width:100%;border-radius:0;box-shadow:none;min-height:100vh;padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  .side{position:fixed;left:0;right:0;bottom:0;top:auto;height:auto;max-height:none;z-index:10;flex-direction:row;padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px));
    background:rgba(20,21,42,.92);backdrop-filter:blur(14px);border-top:1px solid var(--line);overflow:visible}
  .logo,.promo,.side-install,.side-legal,.nav .desk{display:none}
  .nav{flex-direction:row;justify-content:space-around;width:100%;margin:0}
  .nav a{flex-direction:column;gap:3px;padding:6px 4px;font-size:.72rem;flex:1;text-align:center}
  .nav a[aria-current="page"]::before{left:25%;right:25%;top:-7px;bottom:auto;width:auto;height:3px}
  .frame.collapsed .nav span{display:inline}
  .lay-btn{display:none}
  .topbar{padding:16px 16px 6px}
  .search{max-width:none}
  .main{padding:8px 16px 28px}
  .rail{padding:0 16px 28px;grid-template-columns:1fr}
  .hero{min-height:420px}
  .hero-art svg{right:50%;transform:translateX(50%);top:4%;bottom:auto;height:48%;max-width:80%}
  .hero-body{background:linear-gradient(0deg,rgba(20,21,42,.95) 0%,rgba(20,21,42,.75) 45%,transparent 70%)}
  .pack-grid{grid-template-columns:1fr}
  .daily{flex-direction:column;align-items:flex-start}
  .toast{bottom:calc(90px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:420px){.pro-chip{padding:0 12px;font-size:.82rem}.tb-acct{display:none}}