@import url('../global.css');

:root {
  --title-color: var(--color-lightsout);
  --lightsout-panel: #24313c;
  --lightsout-panel-hi: #354753;
  --lightsout-panel-lo: #111a22;
  --lightsout-frame: #60717c;
  --lightsout-frame-dark: #101820;
  --lightsout-grid-line: rgb(103 232 249 / 12%);
  --lightsout-light: #ffe66d;
  --lightsout-light-core: #fffbe0;
}

.lightsout-board[data-visual-theme='arcade'] {
  --lightsout-panel: #3a1230;
  --lightsout-panel-hi: #5c1c4c;
  --lightsout-panel-lo: #170718;
  --lightsout-frame: #ff4fd8;
  --lightsout-frame-dark: #1a0616;
  --lightsout-grid-line: rgb(255 79 216 / 16%);
}

.lightsout-board[data-visual-theme='midnight'] {
  --lightsout-panel: #16283c;
  --lightsout-panel-hi: #1f3a56;
  --lightsout-panel-lo: #060e18;
  --lightsout-frame: #38bdf8;
  --lightsout-frame-dark: #071019;
  --lightsout-grid-line: rgb(56 189 248 / 16%);
}

.lightsout-board[data-visual-theme='daylight'] {
  --lightsout-panel: #efe9fb;
  --lightsout-panel-hi: #ffffff;
  --lightsout-panel-lo: #cabdf0;
  --lightsout-frame: #7c3aed;
  --lightsout-frame-dark: #4c1d95;
  --lightsout-grid-line: rgb(124 58 237 / 14%);
}

.lightsout-board[data-visual-theme='amber'] {
  --lightsout-panel: #3a2506;
  --lightsout-panel-hi: #55380c;
  --lightsout-panel-lo: #170e02;
  --lightsout-frame: #fbbf24;
  --lightsout-frame-dark: #1c1103;
  --lightsout-grid-line: rgb(251 191 36 / 16%);
}

.lightsout-board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--lightsout-size, 5), 1fr);
  gap: clamp(0.35rem, 1.1vw, 0.75rem);
  padding: clamp(0.75rem, 2vw, 1.35rem);
  background:
    repeating-linear-gradient(0deg, transparent 0 9.4%, var(--lightsout-grid-line) 9.6% 9.9%),
    repeating-linear-gradient(90deg, transparent 0 9.4%, var(--lightsout-grid-line) 9.6% 9.9%),
    radial-gradient(
      circle at 50% 35%,
      var(--lightsout-panel-hi),
      var(--lightsout-panel) 56%,
      var(--lightsout-panel-lo)
    );
  border: 0.35rem solid var(--lightsout-frame);
  border-radius: var(--border-radius-lg);
  box-shadow:
    inset 0 0 0 0.2rem var(--lightsout-frame-dark),
    inset 0 0 2rem rgb(0 0 0 / 42%),
    0 1.2rem 2.5rem rgb(0 0 0 / 28%);
}

.lightsout-cell {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: 10%;
  border: 0.18rem solid #152128;
  border-radius: 18%;
  background: linear-gradient(145deg, #53636c, #26343c 58%, #172229);
  box-shadow:
    inset 0 0 0 0.12rem rgb(255 255 255 / 8%),
    0 0.3rem 0.45rem rgb(0 0 0 / 45%);
  cursor: pointer;
  transition:
    background 0.12s ease,
    box-shadow 0.12s ease,
    transform 0.08s ease;
}

.lightsout-lens {
  position: relative;
  display: grid;
  place-items: center;
  width: 78%;
  aspect-ratio: 1;
  background: radial-gradient(circle at 44% 40%, #39505a, #263941 60%, #122129);
  border: 0.22rem solid #0c151a;
  border-radius: 50%;
  box-shadow:
    inset 0 0.25rem 0.4rem rgb(255 255 255 / 8%),
    0 0.2rem 0.3rem rgb(0 0 0 / 48%);
}

.lightsout-filament {
  width: 34%;
  aspect-ratio: 1;
  border: 0.12rem solid rgb(148 163 184 / 28%);
  border-top-color: transparent;
  border-radius: 50%;
  transform: rotate(45deg);
}

.lightsout-glint {
  position: absolute;
  top: 18%;
  left: 24%;
  width: 20%;
  height: 10%;
  background: rgb(255 255 255 / 18%);
  border-radius: 50%;
  transform: rotate(-28deg);
}

.lightsout-cell:hover {
  transform: scale(0.96);
}

.lightsout-cell.is-lit {
  box-shadow:
    inset 0 0 0 0.12rem rgb(255 255 255 / 14%),
    0 0.3rem 0.45rem rgb(0 0 0 / 45%),
    0 0 1rem rgb(255 230 109 / 22%);
}

.lightsout-cell.is-lit .lightsout-lens {
  background: radial-gradient(
    circle at 45% 42%,
    var(--lightsout-light-core),
    var(--lightsout-light) 34%,
    #f59e0b 72%,
    #713f12
  );
  box-shadow:
    inset 0 0.25rem 0.4rem rgb(255 255 255 / 48%),
    0 0 0.55rem var(--lightsout-light),
    0 0 1.35rem rgb(255 230 109 / 65%);
}

.lightsout-cell.is-lit .lightsout-filament {
  border-color: rgb(255 255 255 / 78%);
  border-top-color: transparent;
  filter: drop-shadow(0 0 0.2rem white);
}

.lightsout-cell:focus-visible {
  outline: 0.2rem solid var(--lightsout-light-core);
  outline-offset: 0.12rem;
}