/* Akari — dual theme via data-theme on #akari-root */

#akari-root {
  --ak-bg: #1c1c1e;
  --ak-grid-line: #3a3a3c;
  --ak-cell-white: #2c2c2e;
  --ak-cell-black: #0a0a0a;
  --ak-beam: rgba(212, 160, 23, 0.2);
  --ak-bulb: #d4a017;
  --ak-conflict: rgba(230, 57, 70, 0.35);
  --ak-satisfied: #4a7c59;
  --ak-unsatisfied: #e63946;
  --ak-text: #f5f0e8;
  --ak-ui-bg: #2c2c2e;
  --ak-marker: #9ca3af;

  box-sizing: border-box;
  max-width: 32rem;
  margin: 0 auto;
  padding: 0.75rem;
  background: var(--ak-bg);
  color: var(--ak-text);
  font-family: "Noto Sans JP", system-ui, sans-serif;
  border-radius: 0.75rem;
}

#akari-root[data-theme="light"] {
  --ak-bg: #f5f0e8;
  --ak-grid-line: #c4b49a;
  --ak-cell-white: #faf7f0;
  --ak-cell-black: #2c2416;
  --ak-beam: rgba(255, 200, 80, 0.35);
  --ak-bulb: #ffb300;
  --ak-conflict: rgba(230, 57, 70, 0.25);
  --ak-satisfied: #52b788;
  --ak-unsatisfied: #e63946;
  --ak-text: #1a1a18;
  --ak-ui-bg: #ebe4d6;
  --ak-marker: #8b7355;
}

#akari-root *,
#akari-root *::before,
#akari-root *::after {
  box-sizing: border-box;
}

.akari-topbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: var(--ak-ui-bg);
  border-radius: 0.5rem;
  font-size: 0.875rem;
}

.akari-topbar-title {
  flex: 1;
  font-weight: 600;
  line-height: 1.3;
}

.akari-topbar-meta {
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}

.akari-timer--stopped {
  color: var(--ak-satisfied);
  font-weight: 600;
  opacity: 1;
}

.akari-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.akari-btn {
  min-height: 2.25rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--ak-grid-line);
  border-radius: 0.5rem;
  background: var(--ak-ui-bg);
  color: var(--ak-text);
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
}

.akari-btn:hover {
  filter: brightness(1.05);
}

.akari-btn:active {
  transform: scale(0.98);
}

.akari-btn[aria-pressed="true"] {
  outline: 2px solid var(--ak-bulb);
  outline-offset: 1px;
}

.akari-btn--primary {
  border-color: var(--ak-bulb);
  background: color-mix(in srgb, var(--ak-ui-bg) 65%, var(--ak-bulb));
  font-weight: 600;
}

.akari-controls--disabled {
  opacity: 0.55;
  pointer-events: none;
}

.akari-grid {
  display: grid;
  gap: 1px;
  width: 100%;
  aspect-ratio: 1;
  background: var(--ak-grid-line);
  border: 1px solid var(--ak-grid-line);
  border-radius: 0.375rem;
  overflow: hidden;
  touch-action: manipulation;
  user-select: none;
}

.akari-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: none;
  background: var(--ak-cell-white);
  color: var(--ak-text);
  font: inherit;
  font-size: clamp(0.65rem, 3.5vw, 1rem);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.akari-cell:focus-visible {
  outline: 2px solid var(--ak-bulb);
  outline-offset: -2px;
  z-index: 1;
}

.akari-cell--black {
  background: var(--ak-cell-black);
  color: #f5f0e8;
  cursor: default;
  font-family: "Noto Serif JP", serif;
}

#akari-root[data-theme="dark"] .akari-cell--black {
  font-family: inherit;
}

.akari-cell--lit {
  background: color-mix(in srgb, var(--ak-cell-white) 55%, var(--ak-beam));
}

.akari-cell--bulb {
  background: color-mix(in srgb, var(--ak-cell-white) 40%, var(--ak-bulb));
}

.akari-cell--bulb.akari-cell--lit {
  background: color-mix(in srgb, var(--ak-bulb) 75%, var(--ak-beam));
}

.akari-cell--conflict {
  box-shadow: inset 0 0 0 999px var(--ak-conflict);
}

.akari-cell--marker {
  color: var(--ak-marker);
  font-size: 1.1em;
}

.akari-cell--satisfied {
  box-shadow: inset 0 0 0 2px var(--ak-satisfied);
}

.akari-cell--unsatisfied {
  box-shadow: inset 0 0 0 2px var(--ak-unsatisfied);
}

.akari-cell--bulb::after {
  content: "💡";
  font-size: clamp(0.75rem, 4vw, 1.125rem);
  line-height: 1;
}

.akari-status {
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  text-align: center;
  opacity: 0.85;
}

.akari-flavor {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  text-align: center;
  font-style: italic;
  opacity: 0.75;
}

#akari-root.akari--solved .akari-grid {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ak-bulb) 55%, transparent);
}

#akari-root.akari--solved .akari-cell:not(.akari-cell--black) {
  cursor: default;
}

.akari-win {
  margin-top: 1rem;
  padding: 1.25rem 1rem;
  text-align: center;
  background: var(--ak-ui-bg);
  border: 1px solid color-mix(in srgb, var(--ak-bulb) 35%, var(--ak-grid-line));
  border-radius: 0.75rem;
  box-shadow: 0 0.5rem 1.25rem color-mix(in srgb, var(--ak-bulb) 12%, transparent);
}

.akari-win[hidden] {
  display: none;
}

.akari-win-emoji {
  margin: 0 0 0.35rem;
  font-size: 2rem;
  line-height: 1;
}

.akari-win h2 {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  font-weight: 700;
}

.akari-win-time,
.akari-win-note,
.akari-win-streak,
.akari-win-countdown {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
}

.akari-win-streak {
  font-weight: 600;
  color: color-mix(in srgb, var(--ak-bulb) 80%, var(--ak-text));
}

.akari-win-countdown {
  opacity: 0.8;
}

.akari-win-note {
  opacity: 0.85;
}

.akari-win--reveal .akari-win {
  animation: akari-win-reveal 0.55s ease;
}

.akari-win--reveal .akari-grid {
  animation: akari-win-pulse 0.7s ease;
}

@keyframes akari-win-reveal {
  0% {
    opacity: 0;
    transform: translateY(0.35rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes akari-win-pulse {
  0%,
  100% {
    opacity: 1;
    filter: brightness(1);
  }
  50% {
    opacity: 0.92;
    filter: brightness(1.08);
  }
}

.akari-loading,
.akari-error {
  padding: 2rem 1rem;
  text-align: center;
  font-size: 0.875rem;
}

.akari-error {
  color: var(--ak-unsatisfied);
}