/* Villanykörte (Akari / Light Up): dark tiles, black walls, warm light. */
.a-frame { container-type: inline-size; }
.a-board {
  --w: 7; --h: 7;
  --a-light: #ffd23f;
  --a-cellbg: #2c2c2e;
  --a-lit: #ffdf7a;
  --a-ray: rgba(255, 255, 255, .42);
  --a-cell: calc(100cqw / var(--w));
  --a-gap: clamp(2px, .7cqw, 4px);
  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: 16px;
  background: #1c1c1e;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
  overflow: hidden;
  outline: none;
  touch-action: none;
}

/* White (playable) cells */
.a-cell {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  border-radius: clamp(4px, 1.4cqw, 9px);
  background: var(--a-cellbg);
  cursor: pointer;
  overflow: hidden;
  transition: background-color .3s var(--ease-out);
}
@media (hover: hover) {
  .a-board:not(.locked) .a-cell:not(.lit):hover { background: #3a3a3c; }
}
.a-board.locked .a-cell { cursor: default; }
.a-cell.lit { background: var(--a-lit); }
.a-cell.a-glow { animation: a-glow .55s var(--ease-out) both; animation-delay: calc(var(--d, 0) * 1ms); }
@keyframes a-glow { 0% { background: var(--a-cellbg); } 40% { background: #fff6d6; } }

/* 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; }
.a-cell.lh::before { background: linear-gradient(to bottom, transparent 26%, var(--a-ray) 50%, transparent 74%); }
.a-cell.lv::after { background: linear-gradient(to right, transparent 26%, var(--a-ray) 50%, transparent 74%); }

/* Bulb cell glows. */
.a-cell[data-m="1"] {
  background:
    radial-gradient(circle at 50% 45%, #fffbea 0, rgba(255, 251, 234, 0) 72%),
    var(--a-lit);
}
.a-bulb {
  position: relative; z-index: 1;
  width: 72%; height: 72%;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(150, 90, 0, .35));
}
.a-pop { animation: a-pop .42s var(--ease-spring); }
@keyframes a-pop { from { transform: scale(.4); opacity: .2; } }
.a-halo { fill: #fff; opacity: .35; }
.a-glass { fill: #ffd02e; stroke: #e08e00; stroke-width: 1.1; stroke-linejoin: round; }
.a-fil { fill: none; stroke: #b86e00; 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: #aeaeb2; stroke: #636366; stroke-width: .8; }
.a-thread, .a-tip { stroke: #636366; 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%),
    #ffb3bf;
}
.a-cell.bad .a-glass { fill: #ff6b81; stroke: #c81e45; }
.a-cell.bad .a-fil { stroke: #8f1030; }
.a-cell.bad .a-halo { fill: var(--danger); }
.a-cell.bad .a-bulb { filter: none; }

/* "No bulb here" mark */
.a-dot {
  width: 16%; aspect-ratio: 1; border-radius: 50%;
  background: rgba(255, 255, 255, .45);
  pointer-events: none;
}
.a-cell.lit .a-dot { background: rgba(110, 70, 0, .5); }

/* Walls: black holes in the board, clue numbers in white. */
.a-wall {
  display: flex; align-items: center; justify-content: center;
  border-radius: clamp(4px, 1.4cqw, 9px);
  background: #000;
  color: #fff;
  font-weight: 600; line-height: 1; letter-spacing: -0.02em;
  font-size: clamp(12px, calc(var(--a-cell) * .42), 30px);
  transition: background-color .2s, color .2s, box-shadow .2s;
}
.a-wall.ok { color: var(--good); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--good) 45%, transparent); }
.a-wall.over { background: var(--danger); color: #fff; }

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

/* Solved: everything glows a little brighter. */
.a-board.solved .a-cell.lit { background: #ffe9a3; transition-duration: .6s; }

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

/* Server hints: the cell(s) to change pulse, the cells/walls that explain why get a dashed ring. */
.a-cell.a-hint { z-index: 1; box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 5px rgba(0, 0, 0, .35); animation: a-hint-pulse 1.1s ease-in-out infinite; }
.a-cell.a-hint-focus, .a-wall.a-hint-focus { outline: 2px dashed var(--game); outline-offset: -4px; }
@keyframes a-hint-pulse { 50% { transform: scale(.9); } }
@media (prefers-reduced-motion: reduce) { .a-cell.a-hint { animation: none; } }