/* Krönungstag – game specific styles (shared styles: ../shared/base.css) */

:root {
  /* 9 distinguishable muted tones around the palette (Powder Blue, Dry Sage, ...) */
  --r0: #b4cded; --r1: #bfcc94; --r2: #dfe6d3; --r3: #9fb1c9; --r4: #dccbb0;
  --r5: #c9bddc; --r6: #e9d9a9; --r7: #a8cbc2; --r8: #dbbcbc;
  --edge: #0d1821;
  --conflict: #b8433f;      /* errors stay red so a broken rule is recognisable */
}
@media (prefers-color-scheme: dark) {
  :root {
    --r0: #3e5a7a; --r1: #5d6b3c; --r2: #2e4a44; --r3: #4a4f6e; --r4: #6b5a3f;
    --r5: #5a4a70; --r6: #6e6232; --r7: #2f5a63; --r8: #6b4550;
    --edge: #05090d;
    --conflict: #ef7a74;
  }
}

.board {
  display: grid;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  aspect-ratio: 1;
  border: 3px solid var(--edge);
  border-radius: 10px;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0 solid var(--edge);
  border-right-width: 1px;
  border-bottom-width: 1px;
  cursor: pointer;
  font-size: clamp(1.1rem, 5.5vw, 1.9rem);
  line-height: 1;
}
.cell.et { border-top-width: 3px; }
.cell.el { border-left-width: 3px; }
.cell.eb { border-bottom-width: 3px; }
.cell.er { border-right-width: 3px; }
.cell.x::after { content: "✕"; font-size: 0.6em; color: rgb(0 0 0 / 45%); }
@media (prefers-color-scheme: dark) { .cell.x::after { color: rgb(255 255 255 / 55%); } }
.cell.crown::after { content: "👑"; }
.cell.conflict { box-shadow: inset 0 0 0 3px var(--conflict); }
.cell.conflict::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg, transparent 0 5px, rgb(184 67 63 / 25%) 5px 8px);
}
.board.solved .cell { cursor: default; }
.board.solved .cell.crown::after { animation: pop 0.5s ease both; }
@keyframes pop { 0% { transform: scale(0.4); } 70% { transform: scale(1.25); } 100% { transform: none; } }

.result {
  margin: 16px 0 0;
  padding: 20px;
  text-align: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
}
.result h2 { font: 700 1.5rem "Outfit", system-ui, sans-serif; margin: 0 0 4px; }
.result .time { font: 700 2.6rem "Outfit", system-ui, sans-serif; color: var(--accent); }
.result .actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; }

/* Halloween look: spooky region colours (see SITE.halloween in shared/site.js) */
html.halloween {
  --r0: #3e5a7a; --r1: #5d6b3c; --r2: #2e4a44; --r3: #4a4f6e; --r4: #6b5a3f;
  --r5: #5a4a70; --r6: #6e6232; --r7: #2f5a63; --r8: #6b4550;
  --edge: #05090d;
  --conflict: #ef7a74;
}
html.halloween .cell.x::after { color: rgb(255 255 255 / 55%); }