/**
(Backgrounds/button backgrounds) rgb(0, 85, 30)
Whites #fff
Header title font color rgb(255, 255, 255)
team button default: #24a00b
background image: background-chr.jpg
background image: cover 100%
button-background image: ornament_gif-url.gif
*/
@import url("main-base2.css");

:root {
  --bgs-btn-bgs: rgb(85, 0, 76);
  --bgs-btn-bgs-t: rgba(85, 0, 76, 0.255);
  --whites: #fff;
  --btn-font-color: rgb(255, 20, 212);
  --head-title-font-color: rgb(255, 255, 255);
  --team-btn-default: #a00ba0;
  --bg-img: url("/pictures/pixel-art.gif");
  --bg-size: cover;
  --button-bg-gif: url("/pictures/mod-btn-energy2.gif");
  --font: 'MyCustomFont', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  --current-player: rgb(0, 217, 255);
  --bgs-dark: rgb(69, 18, 37);
  --pointer: url("../pictures/cursors/chp.cur"), auto;
  --cursor: url("../pictures/cursors/winter.png") 0 0, auto;
  --outlines: rgb(0, 217, 255);

  /* Glass morphism tokens */
  --glass-bg:              rgba(85, 0, 76, 0.25);
  --glass-bg-heavy:        rgba(85, 0, 76, 0.677);
  --glass-bg-light:        rgba(255, 255, 255, 0.07);
  --glass-border:          rgba(255, 20, 212, 0.28);
  --glass-border-subtle:   rgba(255, 255, 255, 0.15);
  --glass-blur:            blur(14px);
  --glass-blur-sm:         blur(6px);
  --glass-shadow:          0 8px 32px rgba(0, 0, 0, 0.45);
  --glass-shadow-lg:       0 16px 48px rgba(0, 0, 0, 0.6);
  --glow-accent:           0 0 12px rgba(255, 20, 212, 0.5);
  --glow-info:             0 0 12px rgba(0, 217, 255, 0.5);
}

body {
  background-color: var(--bgs-btn-bgs);
  background-image: var(--bg-img);
  background-size: var(--bg-size);
  font-family: var(--font);
}

h1#title {
  color: var(--head-title-font-color);
  background: rgba(85, 0, 76, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-family: var(--font);
}

a#title-a {
  color: var(--whites);
}

.option-btn {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  color: var(--whites);
  font-family: var(--font);
  transition: box-shadow 0.2s, border-color 0.2s;
}

.option-btn:hover {
  border-color: var(--outlines);
  box-shadow: var(--glow-info), var(--glass-shadow);
}

.back-btn {
  color: var(--whites);
  font-family: var(--font);
}

.prefix-btn {
  color: var(--whites);
  font-family: var(--font);
}

.team-input {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  border: 1px solid var(--glass-border-subtle);
  color: var(--whites);
  font-family: var(--font);
}

.excel-sheet-switch {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  border: 1px solid var(--glass-border-subtle);
  color: var(--whites);
  font-family: var(--font);
}

h2.question-category {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border-subtle);
  box-shadow: var(--glass-shadow);
}

p.question-main {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border-subtle);
  box-shadow: var(--glass-shadow);
}

caption#scoreboard {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--whites);
}

#scoreboard-table {
  box-shadow: var(--glass-shadow-lg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(12, 186, 12, 0.25);
  background: rgba(23, 0, 0, 0.55);
  border-radius: 16px;
  overflow: hidden;
}

.question-board th {
  background: rgba(85, 0, 76, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.team-question-board th {
  padding: 1rem;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.team-question-board th, .team-question-board td, .question-board th, .question-board td {
  border: rgba(255, 255, 255, 0.2) 1px solid;
  display: table-cell;
}

.notification-area {
  box-shadow: var(--glass-shadow-lg);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: 16px 0 0 16px;
}

.team-question-board, .question-board {
  border-collapse: collapse;
  background-color: unset;
  color: var(--whites);
  border: 1px solid var(--glass-border-subtle);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: 16px;
  overflow: hidden;
}

.sheet-idx-input {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  border: 1px solid var(--glass-border-subtle);
}