/* Zero Pickles brand system — from Kids Gaming Brand Kit */
:root{
  --zp-lime:#c8ff00;
  --zp-lime-hot:#a8ff2a;
  --zp-purple:#7c5cff;
  --zp-purple-deep:#3a2a78;
  --zp-ink:#07080d;
  --zp-panel:#12141f;
  --zp-panel-2:#1a1d2c;
  --zp-glow:0 0 40px #c8ff0044;
  --accent:#c8ff00 !important;
  --accent-ink:#10140a !important;
  --bg:#07080d !important;
  --panel:#12141f !important;
  --panel-2:#1a1d2c !important;
  --line:#2e3150 !important;
  --ink:#f5f7ea !important;
  --muted:#a9adc4 !important;
  --lavender:#b9a5ff !important;
  --display:'Trebuchet MS','Arial Rounded MT Bold','Segoe UI',sans-serif !important;
}
html,body{
  background:
    radial-gradient(900px 500px at 12% -8%, #7c5cff33, transparent 55%),
    radial-gradient(800px 420px at 92% 0%, #c8ff0022, transparent 50%),
    #07080d !important;
  color:var(--ink);
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.45;
  background-image:url('../brand/hf/bg-hero.jpg');
  background-size:cover;background-position:center top;filter:blur(0px) saturate(1.05);
  mask-image:linear-gradient(180deg,#000 0%, #000c 28%, transparent 62%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%, #000c 28%, transparent 62%);
}
.app-shell,.workspace,.main-content,.sidebar,.topbar,.mobile-nav{position:relative;z-index:1}
.sidebar{
  background:
    linear-gradient(180deg,#12131c ee,#0b0c14 70%),
    url('../brand/hf/splat-field.jpg') center bottom / cover no-repeat;
  border-right:1px solid #32355a;
  box-shadow:8px 0 40px #0008;
}
.brand img{border-radius:16px;box-shadow:0 0 0 2px #c8ff00, 0 8px 24px #c8ff0033}
.brand>span{text-shadow:0 0 18px #c8ff0055;font-weight:1000;letter-spacing:-.06em}
.rail-nav a[aria-current=page]{
  background:linear-gradient(90deg,var(--zp-lime),#e8ff6a);
  color:#10140a;box-shadow:var(--zp-glow);
}
.rail-random,.category-chip[aria-pressed=true],.button-accent,.play-pill{
  background:linear-gradient(135deg,var(--zp-lime),#eaff70) !important;
  color:#10140a !important;border:0;box-shadow:0 6px 0 #6a8f00, 0 10px 30px #c8ff0044;
  font-weight:900;
}
.category-chip{
  background:#1a1d2e;border:1px solid #3a3f66;color:#d7d9ef;
  transition:transform .15s, box-shadow .15s, background .15s;
}
.category-chip:hover{transform:translateY(-2px);border-color:var(--zp-lime)}
.topbar{
  background:linear-gradient(180deg,#0b0c12f2,#0b0c12aa);
  border-bottom:1px solid #2f3254;
  backdrop-filter:blur(16px);
}
.nerd-story{
  border:2px solid transparent;
  background:
    linear-gradient(#12141f,#12141f) padding-box,
    linear-gradient(120deg,var(--zp-lime),var(--zp-purple),#ff5fd2) border-box;
  box-shadow:0 20px 60px #0008, inset 0 0 40px #7c5cff14;
  overflow:hidden;position:relative;
}
.nerd-story::after{
  content:"";position:absolute;right:-40px;top:-40px;width:180px;height:180px;
  background:url('../brand/icon-zero-o.png') center/contain no-repeat;opacity:.18;pointer-events:none;
}
.nerd-story-art img{filter:saturate(1.15) contrast(1.05)}
.portal-feature,.portal-side-card,.game-tile .cover-wrap{
  border:1px solid #3a3f63;box-shadow:0 18px 40px #0007;
  transition:transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s;
}
.portal-feature:hover,.portal-side-card:hover,.game-tile:hover .cover-wrap{
  transform:translateY(-6px) scale(1.01);
  box-shadow:0 24px 50px #000a, 0 0 0 2px #c8ff0066;
}
.game-tile{animation:zp-rise .5s ease both}
.game-tile:nth-child(2n){animation-delay:.04s}
.game-tile:nth-child(3n){animation-delay:.08s}
.game-tile:nth-child(4n){animation-delay:.12s}
@keyframes zp-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.play-hover{
  background:linear-gradient(135deg,var(--zp-lime),#fff38a)!important;
  color:#10140a!important;box-shadow:0 0 30px #c8ff0088;
}
.favorite-toggle[aria-pressed=true]{background:var(--zp-lime)!important;color:#10140a}
.family-banner{
  background:
    linear-gradient(110deg,#151828ee,#1a1230ee),
    url('../brand/card-parents.jpg') right center / cover no-repeat;
  border:1px solid #4a3f78;overflow:hidden;
}
.family-stamp{background:#c8ff0018;border-color:var(--zp-lime);color:var(--zp-lime);outline-color:var(--zp-lime)}
.footer{
  background:url('../brand/footer-bar.png') center bottom / min(100%,1100px) no-repeat;
  padding-bottom:34px;border-top:1px solid #32355a;
}
.footer-brand{color:var(--zp-lime);text-shadow:0 0 12px #c8ff0055}
.zero-note img{filter:drop-shadow(0 10px 18px #c8ff0044) drop-shadow(0 0 20px #7c5cff55);animation:zp-float 4s ease-in-out infinite}
@keyframes zp-float{0%,100%{transform:rotate(-6deg) translateY(0)}50%{transform:rotate(-4deg) translateY(-8px)}}
.site-header-bar{background:linear-gradient(180deg,#07080df5 55%,#07080d00)}
.header-bar-title span.accent,.accent{color:var(--zp-lime)!important}
.search-box{background:#16182a;border-color:#3a3f66}
.search-box:focus-within{outline-color:var(--zp-lime)}
.player{border:1px solid #3c4168}
.button-dark{background:#1c1f33;border:1px solid #444a78}
.mobile-nav{background:#12131cf5;border-top:1px solid #34375a}
.mobile-nav a[aria-current=page]{color:var(--zp-lime);background:#c8ff0012}
.brand-promise-row{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 22px
}
.brand-promise-card{
  border-radius:18px;overflow:hidden;border:1px solid #3a3f63;min-height:160px;position:relative;
  background:#12141f;isolation:isolate
}
.brand-promise-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9}
.brand-promise-card .shade{position:absolute;inset:0;background:linear-gradient(0deg,#07080df2,#07080d33)}
.brand-promise-card .copy{position:relative;z-index:2;padding:14px;display:flex;flex-direction:column;justify-content:flex-end;height:100%;min-height:160px}
.brand-promise-card strong{font-size:16px;letter-spacing:-.03em}
.brand-promise-card small{color:#cfd2e8;font-size:11px}
@media(max-width:900px){
  .brand-promise-row{grid-template-columns:1fr;gap:10px}
  .brand-promise-card{min-height:120px}
  body::before{opacity:.28}
}
@media (prefers-reduced-motion:reduce){
  .game-tile,.zero-note img{animation:none!important}
}


/* Ambient motion + HF effects */
.zp-ambient{
  position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none;z-index:0
}
.zp-ambient video,.zp-ambient img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;filter:saturate(1.2) contrast(1.05)
}
.nerd-story .zp-ambient video{opacity:.35}
.nerd-story > *{position:relative;z-index:1}
.zp-glow-orb{
  position:fixed;width:280px;height:280px;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle, #c8ff0055, transparent 70%);
  filter:blur(40px);animation:zp-orb 12s ease-in-out infinite;
  left:8%;top:18%;opacity:.55
}
.zp-glow-orb.b{left:auto;right:5%;top:55%;background:radial-gradient(circle,#7c5cff66,transparent 70%);animation-delay:-4s}
@keyframes zp-orb{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,-30px) scale(1.15)}}
.sidebar .brand{display:flex;align-items:center;gap:12px}
.sidebar .brand img{width:48px;height:48px;object-fit:cover}
.header-avatar-wrap img{border-radius:50%;box-shadow:0 0 0 3px #c8ff00,0 0 24px #c8ff0066}
.portal-feature{position:relative;overflow:hidden}
.portal-feature::after{
  content:"";position:absolute;inset:auto -20% -30% auto;width:140px;height:140px;
  background:url('../brand/icon-zero-o.png') center/contain no-repeat;opacity:.15;pointer-events:none
}
.game-tile .cover-wrap{border-radius:18px;overflow:hidden}
.game-tile .meta strong{letter-spacing:-.03em}
.rail-cta, .grown-up-link{color:var(--zp-lime)!important}
.site-header-bar .header-bar-title{text-shadow:0 2px 24px #000a}
.brand-strip-wide{
  margin:0 0 18px;border-radius:22px;overflow:hidden;border:1px solid #3a3f63;
  min-height:120px;position:relative
}
.brand-strip-wide img{width:100%;height:140px;object-fit:cover;display:block;filter:saturate(1.1)}
.brand-strip-wide .label{
  position:absolute;left:16px;bottom:14px;z-index:2;font-weight:900;font-size:18px;
  text-shadow:0 2px 12px #000c;color:#fff
}
.brand-strip-wide .shade{position:absolute;inset:0;background:linear-gradient(90deg,#07080dee,#07080d00 55%)}
@media(max-width:900px){
  body::before{background-image:url('../brand/hf/bg-mobile.jpg')!important;opacity:.35}
  .zp-glow-orb{display:none}
  .brand-strip-wide img{height:100px}
}

.zp-ambient img{animation:zp-ken 18s ease-in-out infinite alternate}
@keyframes zp-ken{from{transform:scale(1.05) translate(0,0)}to{transform:scale(1.18) translate(-2%,1%)}}
@media (prefers-reduced-motion:reduce){.zp-ambient img{animation:none}}
.footer-mascot{width:72px;height:72px;border-radius:50%;box-shadow:0 0 0 3px #c8ff00,0 10px 30px #c8ff0044;object-fit:cover}
.sidebar .brand img,.header-avatar-wrap img,.zero-note img{border-radius:50%!important}

/* Category status under chips */
.home-cat-status-row{margin:4px 0 2px}
.home-cat-status-row .result-count{display:inline-block;font-size:12px;color:#c8ff00;font-weight:800;letter-spacing:.04em}
.header-cats .category-chip{touch-action:manipulation;cursor:pointer;position:relative;z-index:5}
.header-cat-scroll{position:relative;z-index:6}
.site-header-bar{z-index:8}

/* Promise cards: keep after games; mobile stack */
.brand-promise-row{margin:28px 0 18px}
@media(max-width:900px){
  .brand-promise-row{order:50;margin-top:28px}
  .home-board, .workspace-main, #view-home, .main-stage{display:flex;flex-direction:column}
  .nerd-story{order:1}
  .brand-strip-wide{order:2}
  .portal-hero, .compact-hero{order:3}
  .home-grid-head, #home-all-grid, .brand-promise-row{order:4}
  .brand-promise-row{order:6}
  #home-all-grid{order:5}
  .family-banner{order:7}
}

/* Ambient video */
.zp-ambient video.hero-ambient-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;
  filter:saturate(1.15) contrast(1.05);
}
.zp-ambient #hero-ambient-fallback{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1;transition:opacity .6s;
}
.nerd-story .zp-ambient video{opacity:.4}


/* ===== LAYOUT TIGHT — no ambient video ===== */
.ambient-hero,.zp-ambient,.hero-ambient-video,.hero-ambient-fallback{display:none!important}
#home-view{display:flex;flex-direction:column;gap:0}
.topbar{height:72px!important;min-height:72px!important;max-height:72px!important;flex:0 0 auto!important}
.main-content{padding-top:14px!important}
.site-header-bar{position:sticky;top:0;z-index:15;margin:0 0 12px;padding:6px 0 8px}
.nerd-story{margin-top:8px}
.brand-promise-row{margin-top:16px}
body::before{opacity:.18!important;mask-image:linear-gradient(180deg,#000 0%,transparent 40%)!important;-webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 40%)!important}
@media(max-width:900px){
  .topbar{height:58px!important;min-height:58px!important;max-height:58px!important}
  .site-header-bar{top:58px;margin-bottom:8px;padding-top:4px}
  .header-bar-title{font-size:22px!important;margin:4px 0 0!important}
  .header-bar-top{margin-bottom:8px!important;gap:10px}
  .main-content{padding:10px 12px 0!important}
  .nerd-story{padding:14px!important;margin-bottom:14px}
  .nerd-story-art img{min-height:140px!important;max-height:180px!important}
  .brand-promise-row{margin-top:14px;gap:10px}
  .game-grid{gap:10px!important}
  body::before{opacity:.12!important}
  /* order: header → games → story → promises */
  #home-view>.site-header-bar{order:1}
  #home-view>.portal-hero{order:2}
  #home-view>.home-grid-head{order:3}
  #home-view>#home-all-grid{order:4}
  #home-view>.nerd-story{order:5}
  #home-view>.brand-promise-row{order:6}
  #home-view>.family-banner{order:7}
  /* hide heavy story art on very small if needed stays readable */
}
@media(max-width:800px){.site-header-bar{top:58px}}
.footer-legal,.site-legal{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;padding:18px 12px 28px;font-size:13px}
.footer-legal a,.site-legal a{color:#c8ff00;text-decoration:underline}

/* ===== POKI-STYLE IMMERSIVE PLAYER ===== */
dialog.player{
  width:100vw !important;
  max-width:100vw !important;
  height:100dvh !important;
  max-height:100dvh !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:#070b16 !important;
  inset:0;
}
dialog.player::backdrop{background:#000e;backdrop-filter:blur(2px)}
.player-top{
  position:absolute !important;
  top:0;left:0;right:0;
  z-index:30;
  height:auto !important;
  min-height:0 !important;
  padding:10px 12px !important;
  background:linear-gradient(180deg,#000c 0%, transparent 100%) !important;
  border:0 !important;
  display:flex !important;
  align-items:center;
  gap:10px;
  pointer-events:none;
}
.player-top > *{pointer-events:auto}
.player-top .back-button{
  width:42px;height:42px;min-height:0;border-radius:999px;padding:0;
  background:#ffffff22;border:1px solid #fff3;backdrop-filter:blur(8px);
}
.player-top .back-button span{display:none}
.player-heading{
  flex:1;text-align:center;
}
.player-heading .eyebrow{display:none}
.player-heading h2{
  display:inline-block;
  margin:0;
  font-size:14px !important;
  font-weight:800;
  letter-spacing:.02em;
  padding:8px 16px;
  border-radius:999px;
  background:#ffffff22;
  border:1px solid #ffffff33;
  backdrop-filter:blur(8px);
  color:#fff;
}
.player-score{
  background:#ffffff22;border:1px solid #fff3;border-radius:14px;padding:6px 12px;
  backdrop-filter:blur(8px);min-width:64px;border-right:0 !important;
}
.player-score span{font-size:8px;color:#dfe7ff}
.player-score strong{font-size:20px;color:#caff48}
.player-buttons{gap:6px}
.player-buttons .icon-button{
  width:40px;height:40px;border-radius:999px;background:#ffffff22;border:1px solid #fff3;
  backdrop-filter:blur(8px);
}
.player-body{
  display:block !important;
  height:100dvh !important;
  padding:0 !important;
  gap:0 !important;
  max-width:none !important;
}
.player-info{display:none !important}
.play-area{
  height:100dvh !important;
  width:100% !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  justify-content:stretch !important;
  gap:0 !important;
  padding:0 !important;
}
.board-wrap{
  position:relative !important;
  flex:1 1 auto !important;
  width:100% !important;
  height:auto !important;
  max-width:none !important;
  max-height:none !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  background:#0a1020 !important;
  overflow:hidden !important;
}
.board{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.board canvas{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  image-rendering:auto !important;
  background:transparent !important;
}
.player-tip{display:none !important}
.touch-controls{
  position:absolute !important;
  left:0;right:0;bottom:18px;
  z-index:25;
  display:flex !important;
  justify-content:center;
  gap:18px;
  pointer-events:none;
  background:transparent !important;
}
.touch-controls button,
.touch-button{
  pointer-events:auto;
  width:64px !important;
  height:64px !important;
  min-width:64px !important;
  min-height:64px !important;
  border-radius:999px !important;
  background:#ffffff2a !important;
  border:2px solid #ffffff55 !important;
  backdrop-filter:blur(10px);
  box-shadow:0 8px 24px #0006 !important;
  font-size:22px !important;
  color:#fff !important;
}
.touch-button.action{width:auto !important;min-width:120px !important;padding:0 22px !important;font-size:14px !important}
.game-overlay{
  background:#070b16d8 !important;
  backdrop-filter:blur(10px) !important;
}
.overlay-card{
  background:linear-gradient(180deg,#1a2140ee,#12182cee);
  border:1px solid #ffffff22;
  border-radius:24px;
  padding:28px 22px !important;
  box-shadow:0 20px 60px #000a;
  max-width:360px;
}
.overlay-symbol{
  background:var(--accent)!important;
  border-radius:22px !important;
  transform:none !important;
}
.domgame{
  width:min(480px,100%) !important;
  max-height:100% !important;
  margin:0 auto;
  padding:18px 16px !important;
  border-radius:20px;
  background:linear-gradient(180deg,#1c2448cc,#121933ee) !important;
  border:1px solid #ffffff22;
  box-shadow:0 16px 40px #0007;
  overflow:auto;
}
.domgame h3{color:#fff !important;font-size:26px !important}
.domgame .note{color:#c9d2f0 !important}
.mem{
  background:linear-gradient(180deg,#2a335a,#1b2240)!important;
  border:2px solid #ffffff22!important;
  border-radius:16px!important;
  font-size:28px!important;
  min-height:72px!important;
  box-shadow:0 8px 18px #0005;
}
.mem.open{background:linear-gradient(180deg,#fff6d6,#ffe8a8)!important;color:#222!important}
.garden-grid button, .snack-options button{
  border-radius:16px!important;
  border:2px solid #ffffff25!important;
  background:linear-gradient(180deg,#2c365f,#1a2240)!important;
  box-shadow:0 8px 16px #0005;
}
@media(min-width:900px){
  .board canvas{max-width:min(100%, calc(100dvh * .75)); margin:0 auto}
}
@media(max-width:800px){
  .player-heading h2{font-size:12px !important;padding:7px 12px}
  .player-score strong{font-size:18px}
  .touch-button{width:58px !important;height:58px !important;min-width:58px !important;min-height:58px !important}
  .player-top{padding:8px 10px !important}
}

/* ===== POKI DOM GAMES ===== */
.poki-dom{position:relative!important;width:100%!important;max-width:100%!important;height:100%!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important}
.poki-dom-sky{position:absolute;inset:0;background:linear-gradient(180deg,#5EC8FF 0%,#9AE6FF 45%,#C8F4FF 100%);z-index:0}
.poki-dom-sky:before{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;background:linear-gradient(180deg,#3B8CFF 0%,#5AA8FF 40%,#3DB8FF 100%);clip-path:polygon(0 28%,18% 0,34% 22%,52% 4%,70% 20%,88% 2%,100% 18%,100% 100%,0 100%)}
.poki-dom-card{position:relative;z-index:1;width:min(420px,92%);margin:0 auto;padding:20px 16px 24px;border-radius:24px;background:rgba(255,255,255,.92);box-shadow:0 18px 50px rgba(0,40,80,.22);color:#1a2440}
.poki-dom-card h3{color:#1a2440!important;font-size:28px!important}
.poki-dom-card .note,.poki-dom-card .game-feedback{color:#4b5568!important}
.poki-dom-card .game-eyebrow{color:#3B8CFF!important}
.poki-mem,.poki-tile{min-height:72px!important;border-radius:18px!important;border:2px solid rgba(20,40,80,.08)!important;background:#fff!important;box-shadow:0 8px 18px rgba(20,40,80,.1)!important;font-size:28px!important;color:#1a2440!important}
.poki-mem.open{background:linear-gradient(180deg,#FFF6D6,#FFE8A8)!important}
.poki-mem.gone{opacity:.35;transform:scale(.92)}
.poki-cup{width:74px;min-height:150px;border-radius:18px;background:rgba(255,255,255,.95);display:flex;flex-direction:column-reverse;align-items:center;gap:5px;padding:10px;box-shadow:0 10px 20px rgba(20,40,80,.12)}
.poki-sip{display:block;width:54px;height:30px;border-radius:10px}
.game-button.primary{background:#7CFF4A!important;color:#143!important;border-radius:14px!important;font-weight:900!important;border:0!important;min-height:48px!important;padding:0 18px!important}

/* Full-bleed bright stage */
.board-wrap,.board{background:transparent!important}
.board canvas{background:transparent!important}
.player-tip,.hint{display:none!important}
dialog.player .player-top{
  background:linear-gradient(180deg,rgba(0,0,0,.25),transparent)!important;
}

/* HOME GRID FIX — always visible catalog */
#home-all-grid.game-grid{display:grid!important;min-height:120px}
#home-empty:not([hidden]){display:flex!important;flex-direction:column;align-items:center;gap:10px;padding:28px 16px;margin:12px 0;border-radius:18px;background:#141824;border:1px solid #2a3148}
#home-view .home-grid-head{display:flex;justify-content:space-between;align-items:center;margin:8px 2px 12px}
/* Keep brand blocks after games on mobile */
@media(max-width:800px){
  #home-view{display:flex;flex-direction:column}
  #home-view .site-header-bar{order:0}
  #home-view #home-all-grid{order:2}
  #home-view .home-grid-head{order:1}
  #home-view #home-empty{order:3}
  #home-view .brand-promise-row{order:5}
  #home-view .nerd-story, #home-view .portal-story, #home-view .portal-hero{order:4}
}