@charset "UTF-8";

/* A separate, neutral black night theme. The white and Heartsteel palettes stay intact. */
html:has(body[data-theme=night]){color-scheme:dark;background:#121212;scrollbar-color:#676767 #121212}
body[data-theme=night]{
  color-scheme:dark;
  --bg:#101010;
  --panel:#1c1c1c;
  --panel-2:#252525;
  --text:#ededed;
  --muted:#b0b0b0;
  --line:#3d3d3d;
  --accent:#dedede;
  --accent-soft:#303030;
  --accent-text:#151515;
  --danger:#ffaaa8;
  --shadow:0 10px 30px #00000024;
  --radius:16px;
  background-color:var(--bg);
  background-image:none;
  scrollbar-color:#676767 var(--bg);
}

/* Theme cards deliberately preview their own palette in all three themes. */
.skin-option.night-skin{
  background:linear-gradient(130deg,#2b2b2b,#161616);
  color:#ededed;
  border-color:#494949;
}
.night-skin>span{font-size:11px;margin-bottom:auto;color:#cecece}
.night-skin small{color:#c5c5c5}
.skin-option.night-skin.selected{border-color:#c2c2c2;box-shadow:inset 0 0 0 1px #c2c2c2}

body[data-theme=night] ::selection{background:#4e4e4e;color:#fff}
body[data-theme=night] .sidebar{background:#181818;border-color:var(--line)}
body[data-theme=night] .topbar,
body[data-theme=night] .mobile-nav{background:#1a1a1a;border-color:var(--line)}
body[data-theme=night] .nav-item.active{background:var(--accent-soft);color:#d6d6d6}
body[data-theme=night] .nav-item:hover{background:#282828}
body[data-theme=night] .nav-item.active:hover{background:#363636}
body[data-theme=night] .side-foot img{filter:brightness(.85) saturate(.75)}
body[data-theme=night] .connection.online:before{background:#76c7aa}

body[data-theme=night] .lobby-hero{
  background:radial-gradient(ellipse at 95% 0,#30303088,transparent 65%),var(--panel);
  border-color:#424242;
  box-shadow:var(--shadow);
}
body[data-theme=night] .hero-copy h1{color:var(--text)}
body[data-theme=night] .hero-board-slide{color:var(--text)}
body[data-theme=night] .room-card,
body[data-theme=night] .event-card,
body[data-theme=night] .event-team-card{background:var(--panel);box-shadow:var(--shadow)}
body[data-theme=night] .room-card:hover,
body[data-theme=night] .event-card:hover,
body[data-theme=night] .event-team-card:hover{border-color:#c2c2c2}
body[data-theme=night] .simulation-panel{background:#222222;border-color:#414141;border-left-color:var(--accent)}
body[data-theme=night] .sample-avatar{background:hsl(var(--avatar-hue) 24% 27%);color:hsl(var(--avatar-hue) 47% 86%)}
body[data-theme=night] .match-panel.is-queued{box-shadow:0 0 0 1px #c2c2c233,var(--shadow)}
body[data-theme=night] .match-scope button[aria-pressed=true]{background:#343434;box-shadow:0 1px 6px #0003}

/* Inputs and interactive states remain visible against the dark cards. */
body[data-theme=night] input:not([type=range]):not([type=file]),
body[data-theme=night] textarea,
body[data-theme=night] select{background:#181818;border-color:#434343;color:var(--text)}
body[data-theme=night] input::placeholder,
body[data-theme=night] textarea::placeholder{color:#acacac;opacity:1}
body[data-theme=night] input:-webkit-autofill{box-shadow:0 0 0 1000px #181818 inset;-webkit-text-fill-color:var(--text);caret-color:var(--text)}
body[data-theme=night] input:disabled,
body[data-theme=night] textarea:disabled,
body[data-theme=night] select:disabled{background:var(--panel-2);color:var(--muted);opacity:.8}
body[data-theme=night] input[type=checkbox],
body[data-theme=night] input[type=radio]{accent-color:var(--accent)}
body[data-theme=night] input[type=file]::file-selector-button{
  font:inherit;color:var(--text);background:var(--panel-2);border:1px solid #666666;
  border-radius:6px;padding:7px 10px;margin-right:10px;cursor:pointer;
}
body[data-theme=night] .primary{background:var(--accent);border-color:var(--accent);color:var(--accent-text)}
body[data-theme=night] .secondary:hover:not(:disabled),
body[data-theme=night] .icon-button:hover:not(:disabled){background:#2d2d2d;filter:none}
body[data-theme=night] .quiet:hover:not(:disabled){background:#2a2a2a;color:var(--text);filter:none}
body[data-theme=night] .primary:hover:not(:disabled){background:#d1d1d1;border-color:#d1d1d1;filter:none}
body[data-theme=night] button:focus-visible,
body[data-theme=night] a:focus-visible,
body[data-theme=night] summary:focus-visible{outline:3px solid #cfcfcf;outline-offset:3px}
body[data-theme=night] input:focus,
body[data-theme=night] select:focus,
body[data-theme=night] textarea:focus{outline-color:#cfcfcf;border-color:#cfcfcf}
body[data-theme=night] button:disabled{opacity:.55}
body[data-theme=night] .match-mode:disabled{opacity:.8}
body[data-theme=night] .switch-control{background:#515151}
body[data-theme=night] .switch-control>span{background:#ededed}
body[data-theme=night] .switch-control[aria-checked=true]{background:var(--accent)}
body[data-theme=night] .switch-control[aria-checked=true]>span{background:#222222}

/* Room voices, messages and overlays use the same restrained black and grey tones. */
body[data-theme=night] .room-host-strip{background:#212121}
body[data-theme=night] .mic-stage{background:var(--panel)}
body[data-theme=night] .occupied-seat{background:#242424;border-color:#3b3b3b}
body[data-theme=night] .host-seat{background:#303030;border-color:#acacac}
body[data-theme=night] .empty-seat{border-color:#414141}
body[data-theme=night] .empty-mic{background:#282828;color:#c8c8c8}
body[data-theme=night] .voice-controls-drawer{background:var(--panel)}
body[data-theme=night] .chat-log{background:#181818}
body[data-theme=night] .bubble{background:#272727;border-color:#3c3c3c}
body[data-theme=night] .mine .bubble{background:#3b3b3b;border-color:#505050}
body[data-theme=night] .chat-compose{background:var(--panel)}
body[data-theme=night] .seat-room-layout .chat-compose{box-shadow:0 -5px 22px #0003}
body[data-theme=night] dialog{box-shadow:0 24px 90px #0009;border-color:#515151}
body[data-theme=night] dialog::backdrop{background:#0a0a0ab8}
body[data-theme=night] .tour-shade{background:#0a0a0ab8}
body[data-theme=night] .tour-card{box-shadow:0 24px 90px #0009;border-color:#515151}
body[data-theme=night] .notification-popcard{box-shadow:0 18px 55px #0008;border-color:#515151;border-top-color:var(--accent)}
body[data-theme=night] .notification-count{background:#c74355;color:#fff}
body[data-theme=night] #toast{background:#3b3b3b;color:#f7f7f7;border:1px solid #939393;box-shadow:0 8px 28px #0006}

/* Covers without an uploaded image get soft, distinct night colours. */
body[data-theme=night] .event-cover{background:linear-gradient(130deg,#373737,#242424);color:#c4c4c4}
body[data-theme=night] .event-1{background:linear-gradient(130deg,#393939,#252525);color:#cccccc}
body[data-theme=night] .event-2{background:linear-gradient(130deg,#534448,#252525);color:#dcc2c4}
body[data-theme=night] .event-3{background:linear-gradient(130deg,#393939,#232323);color:#cacaca}
body[data-theme=night] .event-cover>img{box-shadow:0 0 0 7px #c7c7c71c}
body[data-theme=night] .community-event-card .event-cover small{background:#1d1d1ded;color:#e4e4e4;border:1px solid #515151}
body[data-theme=night] .event-prize{background:#2c2c2c;border-color:#4e4e4e}
body[data-theme=night] .registration-state{background:#2c2c2c;border-color:#939393}
body[data-theme=night] .event-invitations>article{background:#2c2c2c;border-color:#939393}
body[data-theme=night] .feedback-reply{background:#2d2d2d}
body[data-theme=night] .image-upload-field{border-color:#6c6c6c}
body[data-theme=night] .image-upload-preview img{background:#151515}
body[data-theme=night] .admin-feedback-list form{background:#232323}
body[data-theme=night] .tutorial-steps>section{background:#232323}
body[data-theme=night] .auth-intro{background:radial-gradient(ellipse at 10% 0,#3c3c3c77,transparent 65%),#1d1d1d}

@media(max-width:600px){
  body[data-theme=night] .topbar{box-shadow:0 4px 20px #0002}
  body[data-theme=night] .mobile-nav{box-shadow:0 -4px 24px #0003}
  body[data-theme=night] .occupied-seat{background:#222222}
  body[data-theme=night] .host-seat{background:#303030}
  body[data-theme=night] .seat-voice-toggle{background:#242424}
}