/* Villanykörte (Akari / Light Up) */
.a-frame { container-type: inline-size; }
.a-board {
  --w: 7; --h: 7;
  --a-wall: #221e52;
  --a-light: #ffcb2f;
  --a-lit: color-mix(in srgb, var(--a-light) 26%, var(--surface));
  --a-ray: color-mix(in srgb, var(--a-light) 42%, transparent);
  --a-cell: calc(100cqw / var(--w));
  --a-gap: clamp(1.5px, .45cqw, 3px);
  position: relative;
  width: 100%;
  aspect-ratio: var(--w) / var(--h);
  display: grid;
  grid-template-columns: repeat(var(--w), 1fr);
  grid-template-rows: repeat(var(--h), 1fr);
  gap: var(--a-gap);
  padding: var(--a-gap);
  border-radius: 14px;
  background: color-mix(in srgb, var(--a-wall) 22%, var(--surface));
  border: 2px solid var(--a-wall);
  overflow: hidden;
  outline: none;
  touch-action: none;
}
@media (prefers-color-scheme: dark) {
  .a-board {
    --a-wall: #0c0a24;
    --a-light: #ffc935;
    --a-lit: color-mix(in srgb, var(--a-light) 22%, var(--surface));
    --a-ray: color-mix(in srgb, var(--a-light) 30%, transparent);
    background: color-mix(in srgb, #000 35%, var(--surface));
  }
}

/* White cells */
.a-cell {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  border-radius: clamp(2px, .8cqw, 5px);
  background: var(--surface);
  cursor: pointer;
  overflow: hidden;
  transition: background-color .25s;
}
@media (hover: hover) {
  .a-board:not(.locked) .a-cell:not(.lit):hover { background: color-mix(in srgb, var(--surface) 90%, var(--a-light)); }
}
.a-board.locked .a-cell { cursor: default; }
.a-cell.lit { background: var(--a-lit); }

/* Light rays: a soft band along the direction the light travels. */
.a-cell.lh::before,
.a-cell.lv::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  animation: a-fade .3s ease-out;
}
.a-cell.lh::before { background: linear-gradient(to bottom, transparent 24%, var(--a-ray) 50%, transparent 76%); }
.a-cell.lv::after { background: linear-gradient(to right, transparent 24%, var(--a-ray) 50%, transparent 76%); }
@keyframes a-fade { from { opacity: 0; } }

/* Bulb cell glows. */
.a-cell[data-m="1"] {
  background:
    radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--a-light) 75%, transparent) 0, transparent 68%),
    var(--a-lit);
}
.a-bulb {
  position: relative; z-index: 1;
  width: 74%; height: 74%;
  pointer-events: none;
  filter: drop-shadow(0 0 calc(var(--a-cell) * .08) color-mix(in srgb, var(--a-light) 80%, transparent));
  animation: a-pop .18s ease-out;
}
@keyframes a-pop { from { transform: scale(.55); opacity: .3; } }
.a-halo { fill: var(--a-light); opacity: .28; }
.a-glass { fill: #ffd84a; stroke: #e39a00; stroke-width: 1.2; stroke-linejoin: round; }
.a-fil { fill: none; stroke: #b4670a; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.a-shine { fill: none; stroke: #fffbe6; stroke-width: 1.4; stroke-linecap: round; opacity: .9; }
.a-base { fill: #9aa0bd; stroke: #5f6585; stroke-width: .8; }
.a-thread, .a-tip { stroke: #5f6585; stroke-linecap: round; fill: none; }
.a-thread { stroke-width: .9; }
.a-tip { stroke-width: 1.5; }

/* Bulbs that light each other. */
.a-cell.bad[data-m="1"] {
  background:
    radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--danger) 45%, transparent) 0, transparent 70%),
    color-mix(in srgb, var(--danger) 14%, var(--surface));
}
.a-cell.bad .a-glass { fill: #ff7d96; stroke: #c81e45; }
.a-cell.bad .a-fil { stroke: #8f1030; }
.a-cell.bad .a-halo { fill: var(--danger); }
.a-cell.bad .a-bulb { filter: none; animation: a-shake .3s ease-in-out; }
@keyframes a-shake { 25% { transform: rotate(-10deg); } 75% { transform: rotate(10deg); } }

/* "No bulb here" mark */
.a-dot {
  width: 18%; aspect-ratio: 1; border-radius: 50%;
  background: color-mix(in srgb, var(--text) 50%, transparent);
  pointer-events: none;
}
.a-cell.lit .a-dot { background: color-mix(in srgb, #8a5a00 55%, transparent); }

/* Walls */
.a-wall {
  display: flex; align-items: center; justify-content: center;
  border-radius: clamp(2px, .8cqw, 5px);
  background: var(--a-wall);
  color: #fff;
  font-family: var(--display); font-weight: 700; line-height: 1;
  font-size: clamp(11px, calc(var(--a-cell) * .42), 30px);
  font-variant-numeric: tabular-nums;
  transition: background-color .2s, color .2s, box-shadow .2s;
}
.a-wall.ok { color: #5ff0b0; box-shadow: inset 0 0 0 2px color-mix(in srgb, #5ff0b0 55%, transparent); }
.a-wall.over { background: var(--danger); color: #fff; }

/* Keyboard focus ring (only after keyboard use). */
.a-board.kb:focus .a-cell.focus { box-shadow: inset 0 0 0 3px var(--accent); z-index: 2; }

/* Solved: everything glows a little brighter. */
.a-board.solved .a-cell.lit { background: color-mix(in srgb, var(--a-light) 38%, var(--surface)); transition-duration: .6s; }

.a-msg {
  min-height: 1.5em; margin: 10px 0 0; text-align: center;
  color: var(--danger); font-size: .92rem; font-weight: 600;
}
.a-msg:empty::before { content: "\00a0"; }

@media (prefers-reduced-motion: reduce) {
  .a-bulb, .a-cell.lh::before, .a-cell.lv::after, .a-cell.bad .a-bulb { animation: none; }
}