@import url('https://fonts.googleapis.com/css?family=Raleway:900&display=swap');

html, body {
  font-size: 16px;
  margin: 0;
  padding: 0;
  font-family: Mandali, Arial, sans-serif;
  background: #000;
  color: #fff;
}

canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}

#hud {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 10;
  pointer-events: none;
  font-family: sans-serif;
}

#hud > div {
  margin-top: 5px;
}

#applyFiltersButton {
  display: block;
  width: 100%;
  padding: 8px 12px;
  margin-top: 10px;
  font-family: sans-serif;
  font-size: 1rem;
  font-weight: bold;
  color: #eee;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
  transition: background 0.2s, transform 0.1s, box-shadow 0.1s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

#applyFiltersButton:hover {
  background: rgba(255, 255, 255, 0.2);
}

#applyFiltersButton:active {
  transform: translateY(1px);
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

#helpPanel {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 350px;
  color: white;
  font-family: sans-serif;
  font-size: 14px;
  line-height: 1.5;
  border-radius: 6px;
  background: rgba(255,255,255,0.1);
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  padding: 0;
  overflow: visible;
  z-index: 9;
}

#helpContent {
  display: none;
  padding: 10px;
}

#helpToggle {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: none;
  background: rgba(255,255,255,0.2);
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  color: white;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10;
}

#helpPanel.expanded #helpToggle {
  top: 10px;
  right: 10px;
  bottom: auto;
  background: rgba(255,255,255,0.1);
}

#helpPanel.expanded #helpContent {
  display: block;
}

#loadingScreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 1);
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  z-index: 99999;
  pointer-events: all;
  gap: 20px;
}

.loader {
  font-family: monospace;
  font-weight: bold;
  font-size: 30px;
  color: white;
}

.progressBar {
  width: 200px;
  height: 24px;
  border-radius: 12px;
  border: 2px solid white;
  background-color: rgba(255,255,255,0.1);
  overflow: hidden;
  position: relative;
}

.progressFill {
  width: 0%;
  height: 100%;
  background-color: white;
  transition: width 0.1s linear;
}

.hud-panel {
  position: absolute;
  top: 170px;
  left: 20px;
  width: 270px;
  background: rgba(255,255,255,0.1);
  color: #eee;
  font-family: sans-serif;
  line-height: 1.5;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  overflow: hidden;
  z-index: 2000;
}

.folder-header {
  padding: 8px;
  cursor: pointer;
  font-weight: bold;
  background: rgba(255,255,255,0.1);
}

.folder-header:hover {
  background: rgba(255, 255, 255, 0.2);
}

.folder-content {
  padding: 8px;
  display: none;
}

.hud-panel.open > .folder-content,
.folder-content.open {
  display: block;
}

.hud-panel label {
  display: flex;
  justify-content: space-between;
  margin: 6px 0;
}

.depth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.depth-row input[type="range"] {
  width: 50%;
}

#board, #filter-board {
  display: grid;
  gap: 5%;
  position: relative;
}

#board {
  width: 20vmin;
  height: 20vmin;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 999;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

#filter-board {
  width: 100%;
  max-width: 200px;
  margin-bottom: 10px;
  margin-left: auto;
  margin-right: auto;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

#board .tile, #filter-board .tile {
  position: relative;
  width: 100%;
  padding-bottom: 100%;
}

#board .tile div,
#board .tile label,
#filter-board .tile div,
#filter-board .tile label {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  font-family: Raleway, Courier, 'Courier New', Sans, sans-serif;
  font-weight: bolder;
  background: rgba(255,255,255,0.3);
  user-select: none;
  text-shadow: 0 1px 6px rgba(0,0,0,0.85);
}

#filter-board .tile div:hover {
  cursor: pointer;
  opacity: 0.5;
}

#tile-0 label, #tile-0 div { border-radius: 10% 0 0 0; }
#tile-2 label, #tile-2 div { border-radius: 0 10% 0 0; }
#tile-6 label, #tile-6 div { border-radius: 0 0 0 10%; }
#tile-8 label, #tile-8 div { border-radius: 0 0 10% 0; }

.X { color: white !important; }
.O { color: white !important; }
.red { color: rgb(196, 28, 28) !important; }
.red-bg { background-color: rgba(255, 0, 0, 0.3) !important; }
.green-bg { background-color: rgba(0, 255, 0, 0.3) !important; }

#board, 
#board .tile, 
#board .tile div, 
#board .tile label,
#board .tile::before,
#board .tile div::before {
  pointer-events: none;
}