/* CiliaGirl Choanoflagellate Challenge: 90s / 8-bit styling, scoped so the theme can't leak in */

.ciliagirl-game {
  max-width: 820px;
  margin: 1em auto;
  font-family: "VT323", "Courier New", monospace;
  font-size: 20px;
  line-height: 1.15;
  color: #fcfcfc;
  text-align: left;
  background: #000;
  border: 4px solid #000;
  box-shadow: 0 0 0 4px #fcfcfc, 0 0 0 8px #000;
  -webkit-font-smoothing: none;
}
.ciliagirl-game *,
.ciliagirl-game *::before,
.ciliagirl-game *::after { box-sizing: border-box; }
.ciliagirl-game [hidden] { display: none !important; }

.ciliagirl-game .cg-titlebar {
  background: #2038ec;
  color: #fcfcfc;
  font: 12px/1.6 "Press Start 2P", "Courier New", monospace;
  padding: 8px 10px;
  text-align: center;
  box-shadow: inset -4px -4px 0 #0000a8, inset 4px 4px 0 #6888fc;
  text-shadow: 2px 2px 0 #000;
}
.ciliagirl-game .cg-star { color: #fcd800; }

.ciliagirl-game .cg-stage {
  position: relative;
  background: #0c1f5c;
  line-height: 0;
  border-top: 4px solid #000;
  border-bottom: 4px solid #000;
}
/* CRT scanlines */
.ciliagirl-game .cg-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0.18) 2px, rgba(0, 0, 0, 0.18) 4px);
}
.ciliagirl-game .cg-canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 800 / 560;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  touch-action: none;
  cursor: crosshair;
  margin: 0;
  padding: 0;
  border: 0;
}

.ciliagirl-game .cg-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  overflow: auto;
  padding: 16px;
  background: rgba(0, 0, 0, 0.78);
  color: #fcfcfc;
  line-height: 1.15;
  text-align: center;
}
.ciliagirl-game .cg-panel { margin: auto; max-width: 560px; }
.ciliagirl-game .cg-overlay h2 {
  margin: 0 0 14px;
  padding: 0;
  font: 22px/1.4 "Press Start 2P", "Courier New", monospace;
  color: #fcd800;
  text-shadow: 3px 3px 0 #d82800;
  letter-spacing: 0;
  text-transform: none;
  border: 0;
  background: none;
}
.ciliagirl-game .cg-overlay p {
  margin: 0 0 8px;
  font-size: 22px;
  color: #fcfcfc;
}
.ciliagirl-game .cg-overlay b { color: #3cbcfc; font-weight: normal; }
.ciliagirl-game .cg-overlay ul {
  margin: 0 auto 14px;
  padding: 0;
  text-align: left;
  font-size: 20px;
  max-width: 500px;
  list-style: none;
  color: #fcfcfc;
}
.ciliagirl-game .cg-overlay li { margin: 0 0 6px; padding-left: 18px; position: relative; }
.ciliagirl-game .cg-overlay li::before { content: "\25B6"; position: absolute; left: 0; color: #fcd800; font-size: 14px; top: 3px; }
.ciliagirl-game .cg-overlay li b { color: #58d854; }
.ciliagirl-game .cg-ph {
  background: #e82000;
  color: #fcfcfc;
  padding: 0 4px;
  box-shadow: 0 0 0 2px #5c0000;
}
.ciliagirl-game .cg-blink { color: #fcd800 !important; animation: cg-blink 1s steps(2, start) infinite; margin-top: 10px !important; }

.ciliagirl-game .cg-btn {
  display: inline-block;
  margin: 6px;
  padding: 10px 16px 8px;
  font: 12px/1.4 "Press Start 2P", "Courier New", monospace;
  color: #fcfcfc;
  background: #d82800;
  border: 4px solid #000;
  border-radius: 0;
  box-shadow: inset -4px -4px 0 #881400, inset 4px 4px 0 #fc7460;
  text-shadow: 2px 2px 0 #000;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}
.ciliagirl-game .cg-btn:hover { background: #f83800; }
.ciliagirl-game .cg-btn:active { box-shadow: inset 4px 4px 0 #881400; transform: translateY(2px); }
.ciliagirl-game .cg-btn:disabled { background: #7c7c7c; box-shadow: none; cursor: default; }

.ciliagirl-game .cg-form { margin: 8px 0 4px; }
.ciliagirl-game .cg-label { display: block; margin-bottom: 6px; font: 10px/1.4 "Press Start 2P", "Courier New", monospace; color: #fcd800; }
.ciliagirl-game .cg-row { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; }
.ciliagirl-game .cg-name {
  width: 230px;
  max-width: 100%;
  margin: 6px;
  padding: 6px 8px 4px;
  font: 24px/1 "VT323", "Courier New", monospace;
  color: #58f898;
  background: #000;
  border: 4px solid #fcfcfc;
  border-radius: 0;
  box-shadow: none;
  outline: none;
}
.ciliagirl-game .cg-name:focus { border-color: #fcd800; }
.ciliagirl-game .cg-msg { min-height: 1.2em; color: #fcd800 !important; }

.ciliagirl-game .cg-box { background: #000; }
.ciliagirl-game .cg-boxhead {
  padding: 10px 10px 8px;
  font: 12px/1.6 "Press Start 2P", "Courier New", monospace;
  color: #fcd800;
  text-align: center;
  text-shadow: 2px 2px 0 #d82800;
}
.ciliagirl-game .cg-boxsub { display: block; font-size: 8px; color: #7c7c7c; text-shadow: none; }
.ciliagirl-game .cg-scroll { overflow-x: auto; }
.ciliagirl-game .cg-scores {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  border: 0;
  font: 10px/1.6 "Press Start 2P", "Courier New", monospace;
}
.ciliagirl-game .cg-scores th,
.ciliagirl-game .cg-scores td {
  padding: 6px 10px;
  border: 0;
  text-align: left;
  color: #fcfcfc;
  background: transparent;
}
.ciliagirl-game .cg-scores th { background: #2038ec; color: #fcfcfc; font-weight: normal; }
.ciliagirl-game .cg-scores tbody tr:nth-child(odd) td { background: #000; }
.ciliagirl-game .cg-scores tbody tr:nth-child(even) td { background: #0c1f5c; }
.ciliagirl-game .cg-scores tbody tr:nth-child(1) td:first-child { color: #fcd800; }
.ciliagirl-game .cg-scores tr.cg-new td { background: #fcd800; color: #000; }
.ciliagirl-game .cg-scores .cg-empty { text-align: center; color: #7c7c7c; }
.ciliagirl-game .cg-newtag { color: #d82800; animation: cg-blink 1s steps(2, start) infinite; }
@keyframes cg-blink { to { visibility: hidden; } }

@media (max-width: 600px) {
  .ciliagirl-game { font-size: 16px; }
  .ciliagirl-game .cg-titlebar { font-size: 9px; }
  .ciliagirl-game .cg-overlay { padding: 10px; }
  .ciliagirl-game .cg-overlay h2 { font-size: 13px; margin-bottom: 8px; }
  .ciliagirl-game .cg-overlay p { font-size: 17px; margin-bottom: 5px; }
  .ciliagirl-game .cg-overlay ul { font-size: 15px; margin-bottom: 6px; }
  .ciliagirl-game .cg-overlay li { margin-bottom: 3px; }
  .ciliagirl-game .cg-btn { padding: 8px 10px 6px; font-size: 10px; }
  .ciliagirl-game .cg-scores { font-size: 8px; }
  .ciliagirl-game .cg-scores th, .ciliagirl-game .cg-scores td { padding: 5px 6px; }
}