/* Chat Detective — Liquid Glass throughout the gameplay and clip studio.
   One continuous video/control surface, plus a viewport-bound home mist. */

/* The mist used to overhang its hero by 108px and create phantom scrolling.
   Fixed positioning retains the full-screen image without document overflow. */
body[data-view="home"] .cde-mist-atmosphere{
  position:fixed;
  inset:0;
  left:0;
  width:100vw;
  height:100dvh;
  transform:none;
  pointer-events:none;
}

/* Reusable material colors; opaque enough for text, translucent at edges. */
body.cdh-dark[data-view]:not([data-view="home"]){
  --cd-liquid-edge:rgba(218,185,229,.34);
  --cd-liquid-highlight:rgba(255,248,255,.16);
  --cd-liquid-panel:linear-gradient(132deg,rgba(34,34,62,.76),rgba(24,27,52,.77) 55%,rgba(91,35,76,.52));
  --cd-liquid-input:linear-gradient(122deg,rgba(66,65,99,.37),rgba(32,43,70,.46) 66%,rgba(98,48,84,.28));
  --cd-liquid-glow:0 0 0 1px rgba(247,176,216,.08),0 15px 34px rgba(3,4,20,.21);
}

/* Gameplay: all the large surfaces share one tint and reflective edge. */
body.cdh-dark[data-view="what-next"] .game-main :is(.game-head,.question-sheet,.video-paper,.rating-section,.stars-block){
  border:1px solid var(--cd-liquid-edge);
  border-bottom-color:rgba(249,124,180,.42);
  border-radius:16px;
  background:var(--cd-liquid-panel);
  box-shadow:inset 0 1px var(--cd-liquid-highlight),var(--cd-liquid-glow);
}
body.cdh-dark[data-view="what-next"] .game-main .game-head{
  padding-inline:18px;
  -webkit-backdrop-filter:blur(14px) saturate(125%);
  backdrop-filter:blur(14px) saturate(125%);
}
body.cdh-dark[data-view="what-next"] .game-main .video-paper{
  overflow:hidden;
  padding:8px;
  /* No backdrop blur on the container holding an actively decoding video. */
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
/* A clean, square video bottom: the controls are part of the same player. */
body.cdh-dark[data-view="what-next"] .game-main .video-paper:not(:fullscreen):not(.cd-player-viewport-fullscreen) .player-stage{
  border-radius:10px 10px 0 0;
  overflow:hidden;
  box-shadow:none;
}
body.cdh-dark[data-view="what-next"] .game-main .video-paper .player-stage video{
  border-radius:0;
  display:block;
}
body.cdh-dark[data-view="what-next"] .game-main .video-paper .player-controls{
  min-height:50px;
  margin:0;
  padding:6px 9px;
  border:0;
  border-top:1px solid rgba(204,192,226,.14);
  border-radius:0;
  background:linear-gradient(115deg,#181b32,#1b1c35 55%,#261a37);
  color:#e8e9f3;
  box-shadow:inset 0 1px rgba(255,255,255,.035);
}
body.cdh-dark[data-view="what-next"] .game-main .video-paper .time-legend{
  margin:0;
  border:0;
  border-top:1px solid rgba(194,172,218,.12);
  border-radius:0 0 10px 10px;
  background:linear-gradient(115deg,#181b32,#1b1c35 55%,#261a37);
  color:#bec4d8;
  box-shadow:inset 0 -1px rgba(244,157,210,.15);
}
body.cdh-dark[data-view="what-next"] .game-main .video-paper .player-icon-button{
  border:1px solid transparent;
  border-radius:9px;
  color:#c6cce0;
  transition:background .22s ease,border-color .22s ease,color .22s ease,transform .22s ease;
}
body.cdh-dark[data-view="what-next"] .game-main .video-paper .player-icon-button:is(:hover,:focus-visible):not(:disabled){
  transform:translateY(-1px);
  background:rgba(234,154,214,.15);
  border-color:rgba(255,215,243,.33);
  color:#fff;
}
body.cdh-dark[data-view="what-next"] .game-main .player-track{
  background:rgba(146,159,199,.28);
  box-shadow:inset 0 1px rgba(0,0,0,.2);
}
body.cdh-dark[data-view="what-next"] .game-main .player-buffer-fill{background:rgba(168,169,202,.35)}
body.cdh-dark[data-view="what-next"] .game-main .player-track-fill{
  background:linear-gradient(90deg,#e9306c,#fc6fa5);
  box-shadow:0 0 8px rgba(251,63,135,.22);
}
body.cdh-dark[data-view="what-next"] .game-main .player-progress-dot{
  background:#ff79ad;
  border-color:#ffe7f3;
  box-shadow:0 0 9px rgba(255,80,146,.42);
}
body.cdh-dark[data-view="what-next"] .game-main .player-volume-popover{
  border:1px solid rgba(229,192,232,.37);
  border-radius:12px;
  background:rgba(28,28,52,.94);
  -webkit-backdrop-filter:blur(15px);
  backdrop-filter:blur(15px);
  box-shadow:0 16px 36px rgba(0,0,0,.32),inset 0 1px rgba(255,255,255,.12);
}
/* Fullscreen and native fullscreen must never inherit card corner radii. */
body[data-view="what-next"] .game-main .video-paper:is(:fullscreen,.cd-player-viewport-fullscreen),
body[data-view="what-next"] .game-main .video-paper:is(:fullscreen,.cd-player-viewport-fullscreen) .player-stage,
body[data-view="what-next"] .game-main .video-paper:is(:fullscreen,.cd-player-viewport-fullscreen) .time-legend{
  border-radius:0;
}

/* Answers, progress and modes use the same softly raised controls. */
body.cdh-dark[data-view="what-next"] .game-main .question-sheet{
  -webkit-backdrop-filter:blur(12px) saturate(120%);
  backdrop-filter:blur(12px) saturate(120%);
}
body.cdh-dark[data-view="what-next"] .game-main .answer{
  border:1px solid rgba(182,179,219,.27);
  border-radius:11px;
  background:var(--cd-liquid-input);
  box-shadow:inset 0 1px rgba(255,255,255,.06);
  transition:background .24s ease,border-color .24s ease,box-shadow .24s ease,transform .24s ease;
}
body.cdh-dark[data-view="what-next"] .game-main .answer:not(:disabled):hover{
  transform:translateY(-1px);
  border-color:rgba(255,182,225,.61);
  background:linear-gradient(122deg,rgba(120,67,119,.36),rgba(73,57,106,.39));
  box-shadow:inset 0 1px rgba(255,255,255,.12),0 6px 19px rgba(7,5,22,.15);
}
body.cdh-dark[data-view="what-next"] .game-main .answer.is-selected{
  border-color:#fb6fa4;
  background:linear-gradient(117deg,rgba(170,45,93,.44),rgba(90,42,81,.42));
  box-shadow:inset 0 1px rgba(255,203,230,.2),0 0 13px rgba(237,70,132,.15);
}
body.cdh-dark[data-view="what-next"] .game-main .answer.is-selected .answer-letter{
  background:linear-gradient(135deg,#ec3973,#fa6aa1);
  color:#fff;
}
body.cdh-dark[data-view="what-next"] .game-main .answer:is(.is-correct,.is-right){
  border-color:rgba(81,209,148,.77);
  background:rgba(38,111,79,.28);
}
body.cdh-dark[data-view="what-next"] .game-main .answer:is(.is-wrong,.is-incorrect){
  border-color:rgba(250,100,116,.75);
  background:rgba(140,36,60,.31);
}
body.cdh-dark[data-view="what-next"] .game-main .cd-game-mode-trigger,
body.cdh-dark[data-view="what-next"] .game-main .round-back{
  border:1px solid rgba(217,176,224,.38);
  background:var(--cd-liquid-input);
  box-shadow:inset 0 1px rgba(255,255,255,.11);
  border-radius:10px;
  transition:background .23s ease,border-color .23s ease,transform .23s ease;
}
body.cdh-dark[data-view="what-next"] .game-main .cd-game-mode-trigger:hover,
body.cdh-dark[data-view="what-next"] .game-main .round-back:hover{
  border-color:rgba(255,207,235,.72);
  background:linear-gradient(110deg,rgba(232,139,207,.22),rgba(91,43,89,.33));
  transform:translateY(-1px);
}
body.cdh-dark[data-view="what-next"] .game-main .cd-game-mode-menu{
  border:1px solid rgba(229,195,230,.43);
  border-radius:12px;
  background:rgba(24,27,51,.94);
  -webkit-backdrop-filter:blur(20px);
  backdrop-filter:blur(20px);
  box-shadow:0 19px 46px rgba(2,5,20,.42),inset 0 1px rgba(255,255,255,.14);
}
body.cdh-dark[data-view="what-next"] .game-main .decision-action:not(:disabled),
body.cdh-dark[data-view="what-next"] .game-main .game-demo-action:not(:disabled){
  border-color:rgba(255,171,205,.54);
  border-radius:10px;
  background:linear-gradient(115deg,#da366e,#f34d80 60%,#e74178);
  box-shadow:inset 0 1px rgba(255,248,255,.25),0 6px 18px rgba(197,38,91,.17);
  transition:filter .22s ease,transform .22s ease,box-shadow .22s ease;
}
body.cdh-dark[data-view="what-next"] .game-main :is(.decision-action,.game-demo-action):hover:not(:disabled){
  filter:brightness(1.08);
  transform:translateY(-1px);
  box-shadow:inset 0 1px rgba(255,255,255,.33),0 9px 24px rgba(222,54,111,.22);
}

/* Clip studio: make the three editor columns feel like one visual system. */
body.cdh-dark[data-view="submit"] #clip-form>.community-sheet{
  border:1px solid var(--cd-liquid-edge);
  border-bottom-color:rgba(243,124,177,.38);
  border-radius:16px;
  background:var(--cd-liquid-panel);
  box-shadow:inset 0 1px var(--cd-liquid-highlight),var(--cd-liquid-glow);
}
body.cdh-dark[data-view="submit"] #clip-form>.community-sheet:not(.cd-studio-video){
  -webkit-backdrop-filter:blur(13px) saturate(120%);
  backdrop-filter:blur(13px) saturate(120%);
}
body.cdh-dark[data-view="submit"] #clip-form .cd-ref-pane-heading .cd-ref-pane-symbol{
  border:1px solid rgba(223,181,216,.26);
  background:rgba(240,110,178,.12);
  border-radius:9px;
  color:#fbb0cc;
}
/* Finder group and URL surfaces; listboxes are owned by the shared UI system. */
body.cdh-dark[data-view="submit"] #clip-form :is(.cd-ref-url-control,.cd-auto-scope-tabs){
  border:1px solid rgba(200,190,227,.36);
  border-radius:10px;
  background:var(--cd-liquid-input);
  box-shadow:inset 0 1px rgba(255,255,255,.10),0 4px 12px rgba(4,7,25,.10);
  color:#f2f0fa;
  transition:background .24s ease,border-color .24s ease,box-shadow .24s ease;
}
body.cdh-dark[data-view="submit"] #clip-form .cd-auto-scope-tab{
  border-radius:8px;
  transition:background .22s ease,border-color .22s ease,color .22s ease;
}
body.cdh-dark[data-view="submit"] #clip-form .cd-auto-scope-tab.is-active{
  border-color:rgba(255,175,208,.56);
  background:linear-gradient(115deg,rgba(184,43,91,.90),rgba(229,67,124,.88));
  color:#fff;
  box-shadow:inset 0 1px rgba(255,255,255,.18);
}
body.cdh-dark[data-view="submit"] #clip-form .cd-auto-scope-tab:hover:not(.is-active){
  background:rgba(237,142,203,.15);
  color:#fff;
}
body.cdh-dark[data-view="submit"] #clip-form :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),textarea){
  border:1px solid rgba(175,177,211,.31);
  border-radius:9px;
  background:linear-gradient(115deg,rgba(28,35,57,.63),rgba(43,37,67,.5));
  box-shadow:inset 0 1px rgba(255,255,255,.055);
  color:#f2f1fb;
  transition:background .22s ease,border-color .22s ease,box-shadow .22s ease;
}
body.cdh-dark[data-view="submit"] #clip-form :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),textarea):focus{
  border-color:rgba(255,171,221,.82);
  background:linear-gradient(115deg,rgba(50,44,77,.7),rgba(65,41,78,.54));
  box-shadow:0 0 0 2px rgba(231,91,166,.12),inset 0 1px rgba(255,255,255,.09);
}
body.cdh-dark[data-view="submit"] #clip-form .answer-editor-row{
  border:1px solid rgba(184,176,216,.29);
  border-radius:10px;
  background:linear-gradient(120deg,rgba(32,40,66,.44),rgba(53,35,66,.38));
  box-shadow:inset 0 1px rgba(255,255,255,.05);
  transition:border-color .23s ease,background .23s ease;
}
body.cdh-dark[data-view="submit"] #clip-form .answer-editor-row:hover{
  border-color:rgba(255,186,225,.52);
  background:linear-gradient(120deg,rgba(66,50,91,.5),rgba(62,40,77,.4));
}
body.cdh-dark[data-view="submit"] #clip-form .answer-editor-row:has(input[type="radio"]:checked){
  border-color:rgba(255,115,170,.62);
  background:linear-gradient(120deg,rgba(117,45,86,.40),rgba(52,39,80,.42));
}
body.cdh-dark[data-view="submit"] #clip-form :is(.cd-studio-toggle,.workshop-lock,.submit-guide-open,.cd-auto-channel-all){
  border:1px solid rgba(195,181,221,.33);
  border-radius:9px;
  background:linear-gradient(120deg,rgba(50,52,80,.37),rgba(31,39,64,.48));
  color:#d7d4e7;
  box-shadow:inset 0 1px rgba(255,255,255,.09);
}
body.cdh-dark[data-view="submit"] #clip-form :is(.cd-studio-toggle,.workshop-lock,.submit-guide-open,.cd-auto-channel-all):hover:not(:disabled){
  border-color:rgba(255,183,222,.66);
  background:rgba(164,75,134,.25);
  color:#fff;
}
body.cdh-dark[data-view="submit"] #clip-form :is(.community-submit-action,.clip-search-button,.cd-ref-primary-action){
  border:1px solid rgba(255,182,219,.47);
  border-radius:10px;
  background:linear-gradient(117deg,#d73570,#f04a7e);
  color:#fff;
  box-shadow:inset 0 1px rgba(255,255,255,.21),0 7px 19px rgba(200,37,96,.17);
  transition:filter .22s ease,transform .22s ease,box-shadow .22s ease;
}
body.cdh-dark[data-view="submit"] #clip-form :is(.community-submit-action,.clip-search-button,.cd-ref-primary-action):hover:not(:disabled){
  filter:brightness(1.08);
  transform:translateY(-1px);
  box-shadow:0 9px 23px rgba(226,52,112,.22),inset 0 1px rgba(255,255,255,.3);
}
/* Editor preview also has a flat video bottom and attached transport. */
body.cdh-dark[data-view="submit"] #clip-form .submit-player-shell{
  overflow:visible;
  border-radius:12px;
}
body.cdh-dark[data-view="submit"] #clip-form .clip-inspector{
  border-radius:10px 10px 0 0;
  overflow:hidden;
}
body.cdh-dark[data-view="submit"] #clip-form .submit-player-panel{
  margin:0;
  border:1px solid rgba(201,185,225,.2);
  border-top:0;
  border-radius:0 0 10px 10px;
  background:linear-gradient(115deg,#181b32,#251b39);
  box-shadow:inset 0 -1px rgba(250,159,211,.13);
}
body.cdh-dark[data-view="submit"] #clip-form .submit-player-controls,
body.cdh-dark[data-view="submit"] #clip-form .cd-time-editor{
  border-color:rgba(212,188,224,.14);
  background:transparent;
  color:#e4deef;
}
body.cdh-dark[data-view="submit"] #clip-form .submit-player-controls .player-icon-button:hover:not(:disabled){
  border-color:rgba(248,193,226,.38);
  background:rgba(218,108,179,.17);
  color:#fff;
}
body.cdh-dark[data-view="submit"] #clip-form .submit-player-controls .player-track{
  background:rgba(147,157,199,.28);
}
body.cdh-dark[data-view="submit"] #clip-form .submit-player-controls .player-track-fill{
  background:linear-gradient(90deg,#e9306c,#fc6fa5);
}
body.cdh-dark[data-view="submit"] #clip-form .cd-ref-extra,
body.cdh-dark[data-view="submit"] #clip-form .ai-event-tools{
  border-color:rgba(203,178,214,.22);
  border-radius:10px;
  background:rgba(28,27,51,.25);
}

/* Shared lesser-used views: moderation and detective receive the same skin. */
body.cdh-dark[data-view="moderation"] :is(.mod-tile,.mod-dialog-shell,.mod-filters),
body.cdh-dark[data-view="detective"] :is(.detective-visual,.d-chat-audit,.d-evidence-review){
  border:1px solid var(--cd-liquid-edge);
  border-radius:14px;
  background:var(--cd-liquid-panel);
  box-shadow:inset 0 1px var(--cd-liquid-highlight),var(--cd-liquid-glow);
}

@media(max-width:780px){
  body.cdh-dark[data-view="what-next"] .game-main .game-head{padding-inline:12px}
  body.cdh-dark[data-view="what-next"] .game-main .video-paper{padding:6px}
  body.cdh-dark[data-view="what-next"] .game-main .video-paper .player-controls{padding-inline:5px;gap:4px}
  body.cdh-dark[data-view="submit"] #clip-form>.community-sheet{border-radius:12px}
}
@media(prefers-reduced-motion:reduce){
  body.cdh-dark[data-view="what-next"] .game-main :is(.answer,.player-icon-button,.decision-action,.game-demo-action),
  body.cdh-dark[data-view="submit"] #clip-form :is(.cd-menu-trigger,.cd-menu-option,.cd-auto-scope-tab,.answer-editor-row,.workshop-lock){
    transition:none!important;
    transform:none!important;
  }
}