/* Chat Detective — shared Midnight Glass surfaces and true sticky footer.
   The homepage shader and game mechanics are deliberately untouched. */

/* Fill a short viewport, but let long pages grow and scroll normally. */
body[data-view] .page-shell{
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
}
body[data-view] .page-shell > #app{
  flex:1 0 auto;
  min-height:0;
}
body[data-view] .page-shell > .site-footer{
  flex:0 0 auto;
  margin-top:auto;
}
/* The old hero reserved 100svh - 110px, ignoring the 68px header,
   52px footer and 36px shell gutters. Avoid phantom scrolling on desktops. */
body[data-view="home"] .cde-home{
  min-height:max(0px,calc(100dvh - 156px));
}

/* Extend the navy/red ambient palette from the homepage to other views.
   Static gradients keep the video/gameplay screens inexpensive to render. */
body.cdh-dark[data-view]:not([data-view="home"]){
  background:#090d1a;
  color:#eff0f8;
}
body.cdh-dark[data-view]:not([data-view="home"]) .scene{
  background:
    radial-gradient(ellipse 48% 39% at 94% 9%,rgba(154,20,75,.29),transparent 76%),
    radial-gradient(ellipse 62% 48% at 4% 74%,rgba(116,22,74,.19),transparent 80%),
    radial-gradient(ellipse 57% 39% at 60% 51%,rgba(32,35,79,.34),transparent 82%),
    linear-gradient(143deg,#0b1023 0%,#0a0d1c 48%,#140b20 100%);
  background-size:cover;
  background-position:center;
  filter:none;
  opacity:1;
}
body.cdh-dark[data-view]:not([data-view="home"]) .scene::before{
  background:
    radial-gradient(ellipse 32% 27% at 77% 22%,rgba(225,46,103,.12),transparent 82%),
    radial-gradient(ellipse 36% 33% at 17% 81%,rgba(194,33,91,.09),transparent 85%);
  opacity:1;
}
body.cdh-dark[data-view]:not([data-view="home"]) .grain{
  opacity:.025;
}

/* One header system across all routes, with the homepage's glass hover feel. */
body.cdh-dark[data-view]:not([data-view="home"]) .site-header{
  width:min(100%,1280px);
  max-width:1280px;
  height:68px;
  padding:0 18px;
  gap:18px;
  border:0;
  border-bottom:1px solid rgba(179,187,222,.23);
  border-radius:0;
  background:rgba(11,15,33,.22);
  -webkit-backdrop-filter:blur(18px) saturate(130%);
  backdrop-filter:blur(18px) saturate(130%);
  box-shadow:0 1px 0 rgba(4,5,17,.14);
}
body.cdh-dark[data-view]:not([data-view="home"]) .desktop-nav{
  gap:clamp(22px,2.2vw,32px);
}
body.cdh-dark[data-view]:not([data-view="home"]) .site-header .brand svg{
  transition:transform .34s ease,filter .34s ease;
}
body.cdh-dark[data-view]:not([data-view="home"]) .site-header .brand:hover svg{
  transform:translateY(-2px) rotate(-7deg);
  filter:drop-shadow(0 2px 8px rgba(255,77,133,.4));
}
body.cdh-dark[data-view]:not([data-view="home"]) .site-header .brand span{
  color:#f5f1fb;
  transition:color .26s ease,text-shadow .26s ease;
}
body.cdh-dark[data-view]:not([data-view="home"]) .site-header .brand:hover span{
  color:#fff;
  text-shadow:0 0 15px rgba(250,126,181,.25);
}
body.cdh-dark[data-view]:not([data-view="home"]) .desktop-nav .nav-link{
  isolation:isolate;
  padding-inline:12px;
  margin-inline:-12px;
  transition:color .24s ease,transform .28s ease,text-shadow .25s ease;
}
body.cdh-dark[data-view]:not([data-view="home"]) .desktop-nav .nav-link::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:9px 2px 11px;
  border-radius:12px;
  background:radial-gradient(ellipse at center,rgba(247,65,123,.2),transparent 75%);
  opacity:0;
  transform:scale(.8);
  transition:opacity .3s ease,transform .34s ease;
}
body.cdh-dark[data-view]:not([data-view="home"]) .desktop-nav .nav-link::after{
  content:"";
  position:absolute;
  left:20%;right:20%;bottom:9px;
  height:2px;
  background:linear-gradient(90deg,transparent,#ff94bb,#fb447f,#ff94bb,transparent);
  box-shadow:0 0 10px rgba(255,64,129,.42);
  border-radius:99px;
  opacity:0;
  transform:scaleX(0);
  transition:opacity .23s ease,transform .3s ease;
}
body.cdh-dark[data-view]:not([data-view="home"]) .desktop-nav .nav-link:hover{
  transform:translateY(-1px);
  color:#fff;
  text-shadow:0 0 11px rgba(255,169,206,.3);
}
body.cdh-dark[data-view]:not([data-view="home"]) .desktop-nav .nav-link:hover::before,
body.cdh-dark[data-view]:not([data-view="home"]) .desktop-nav .nav-link.active::before{
  opacity:1;
  transform:scale(1);
}
body.cdh-dark[data-view]:not([data-view="home"]) .desktop-nav .nav-link:hover::after,
body.cdh-dark[data-view]:not([data-view="home"]) .desktop-nav .nav-link.active::after{
  opacity:1;
  transform:scaleX(1);
}
body.cdh-dark[data-view]:not([data-view="home"]) .desktop-nav .nav-link.active::before{opacity:.48}
body.cdh-dark[data-view]:not([data-view="home"]) .mobile-nav{
  border:1px solid rgba(210,188,226,.3);
  border-top:0;
  background:rgba(18,20,42,.85);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
  border-radius:0 0 13px 13px;
}
body.cdh-dark[data-view]:not([data-view="home"]) .mobile-nav a:hover{
  background:rgba(248,87,149,.15);
  color:#fff;
}

/* Bring explanatory and submission cards into the same glass family. */
body.cdh-dark[data-view]:not([data-view="home"]) .view-intro .game-overline,
body.cdh-dark[data-view="submit"] .cd-sm-kicker{
  color:#f98cad;
}
body.cdh-dark[data-view="about"] .about-list article,
body.cdh-dark[data-view="submit"] .cd-sm-card,
body.cdh-dark[data-view="submit"] .submit-auth-gate{
  border:1px solid rgba(214,180,223,.25);
  border-bottom-color:rgba(246,138,182,.34);
  border-radius:16px;
  background:
    radial-gradient(ellipse 100% 72% at 12% 0%,rgba(220,149,217,.10),transparent 78%),
    linear-gradient(140deg,rgba(27,31,57,.74),rgba(23,23,46,.64) 60%,rgba(96,28,66,.33));
  box-shadow:inset 0 1px rgba(255,251,255,.12),0 16px 38px rgba(3,5,20,.2);
  transition:border-color .3s ease,box-shadow .3s ease,transform .3s ease;
}
body.cdh-dark[data-view="about"] .about-list article:hover,
body.cdh-dark[data-view="submit"] .cd-sm-card:not(:disabled):hover{
  transform:translateY(-3px);
  border-color:rgba(255,199,231,.57);
  box-shadow:inset 0 1px rgba(255,253,255,.2),0 22px 46px rgba(4,6,24,.3),0 0 22px rgba(226,64,126,.12);
}
body.cdh-dark[data-view="about"] .about-list article>span{
  color:#fb9ab8;
}
body.cdh-dark[data-view="about"] .about-list h2{
  color:#fff4fc;
}
body.cdh-dark[data-view="about"] .about-list a{
  color:#ffacc9;
  border-bottom-color:rgba(255,134,181,.44);
}
body.cdh-dark[data-view="submit"] .cd-sm-card--detective:disabled{
  opacity:.65;
  cursor:not-allowed;
}
body.cdh-dark[data-view="submit"] .cd-sm-card-info{
  background:transparent;
}
body.cdh-dark[data-view="submit"] .paper-form.community-sheet,
body.cdh-dark[data-view="submit"] #submit-auth-gate{
  border-radius:16px;
  border-color:rgba(197,176,224,.3);
  background:linear-gradient(138deg,rgba(25,29,54,.8),rgba(40,23,50,.73));
  box-shadow:inset 0 1px rgba(255,255,255,.12),0 18px 48px rgba(2,4,16,.25);
}
body.cdh-dark[data-view="submit"] .form-action,
body.cdh-dark[data-view="submit"] .cd-sm-card-arrow{
  border:1px solid rgba(255,169,207,.54);
  border-radius:9px;
  background:linear-gradient(130deg,#b82c5c,#ea477e);
  color:#fff;
  box-shadow:inset 0 1px rgba(255,255,255,.21);
  transition:transform .24s ease,filter .24s ease,box-shadow .24s ease;
}
body.cdh-dark[data-view="submit"] .form-action:hover,
body.cdh-dark[data-view="submit"] .cd-sm-card:not(:disabled):hover .cd-sm-card-arrow{
  transform:translateY(-2px);
  filter:brightness(1.11);
  box-shadow:0 7px 19px rgba(241,65,121,.25);
}

/* On the video page avoid full-card backdrop-blur while a clip is running. */
body.cdh-dark[data-view="what-next"] .game-main .game-head,
body.cdh-dark[data-view="what-next"] .game-main .video-paper,
body.cdh-dark[data-view="what-next"] .game-main .question-sheet{
  border:1px solid rgba(195,177,223,.26);
  border-bottom-color:rgba(252,128,176,.35);
  border-radius:14px;
  background:linear-gradient(135deg,rgba(25,29,53,.83),rgba(24,23,47,.82) 64%,rgba(80,27,60,.53));
  box-shadow:inset 0 1px rgba(255,248,255,.1),0 14px 38px rgba(4,5,22,.24);
}
body.cdh-dark[data-view="what-next"] .game-main .round-back{
  border-color:rgba(223,177,216,.42);
  background:rgba(113,49,98,.22);
  border-radius:10px;
}
body.cdh-dark[data-view="what-next"] .game-main .round-back:hover{
  background:rgba(193,54,111,.3);
  border-color:rgba(255,191,220,.76);
}

/* Footer matches the home frame, and rests at the screen edge on short pages. */
body.cdh-dark[data-view] .site-footer{
  width:100%;
  max-width:1280px;
  min-height:52px;
  padding:13px 4px 3px;
  border-top:1px solid rgba(169,161,195,.18);
  background:transparent;
  color:#999eb6;
  font-size:11px;
}
body.cdh-dark[data-view] .site-footer a:hover,
body.cdh-dark[data-view] .site-footer button:hover{color:#ff97b6}

@media(max-width:780px){
  body[data-view="home"] .cde-home{min-height:0}
  body.cdh-dark[data-view]:not([data-view="home"]) .site-header{
    height:58px;
    padding:0 10px;
  }
  body.cdh-dark[data-view]:not([data-view="home"]) .desktop-nav{display:none}
  body.cdh-dark[data-view]:not([data-view="home"]) .mobile-menu-toggle{display:inline-flex}
}
@media(max-width:520px){
  body.cdh-dark[data-view]:not([data-view="home"]) .site-header{padding:0 5px}
  body.cdh-dark[data-view="about"] .about-list article{border-radius:12px}
  body.cdh-dark[data-view] .site-footer{font-size:10px;gap:9px;flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){
  body.cdh-dark[data-view]:not([data-view="home"]) .site-header *,
  body.cdh-dark[data-view]:not([data-view="home"]) .about-list article,
  body.cdh-dark[data-view="submit"] .cd-sm-card{
    transition:none!important;
  }
}