/*
 * Scoped for embedding inside the Tiwaz Genootschap site: every rule is
 * nested under .hnefatafl-app so nothing here leaks onto the rest of the
 * page (shared header/footer included). Panel/text/accent colors reuse the
 * site's own material palette (soot/oak/iron/bone/madder/brass, defined in
 * src/styles/globals.css) so the page feels like part of the site; the
 * board itself keeps distinct warm/pale wood tones; a real board needs
 * strong light/dark contrast that the site's deliberately muted palette
 * doesn't provide.
 */

.hnefatafl-app {
  --wood-light: #d8b877;
  --wood-dark: #a9824a;
  --wood-darker: #8a6636;
  --grid-line: rgba(0, 0, 0, 0.25);
  --highlight-move: rgba(120, 200, 130, 0.45);
  --highlight-select: rgba(255, 215, 90, 0.55);
  --highlight-capture: rgba(220, 60, 60, 0.55);

  box-sizing: border-box;
  background: radial-gradient(circle at 50% 0%, rgb(var(--oak-light)), rgb(var(--soot)) 60%);
  color: rgb(var(--bone));
  font-family: var(--font-body, 'Trebuchet MS'), 'Segoe UI', system-ui, sans-serif;
  padding: clamp(1.5rem, 5vw, 3rem) 1rem 3rem;
}

.hnefatafl-app *,
.hnefatafl-app *::before,
.hnefatafl-app *::after {
  box-sizing: border-box;
}

.hnefatafl-app .wrap {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.hnefatafl-app header {
  text-align: center;
  margin-bottom: 20px;
}

.hnefatafl-app h1 {
  font-family: var(--font-display, Georgia), serif;
  font-size: 2.2rem;
  margin: 0 0 4px;
  letter-spacing: 1px;
  color: rgb(var(--brass));
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

.hnefatafl-app h1 .sub {
  display: block;
  font-size: 0.95rem;
  color: rgb(var(--bone) / 0.75);
  font-weight: normal;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-top: 4px;
}

.hnefatafl-app .rules-hint {
  color: rgb(var(--bone) / 0.75);
  font-size: 0.9rem;
  margin: 0;
}

.hnefatafl-app .layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
}

.hnefatafl-app .board-panel {
  background: linear-gradient(160deg, #3b2a17, #241a0f);
  padding: 14px;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 0 0 2px rgb(var(--iron-dim));
}

.hnefatafl-app .board.thinking {
  opacity: 0.8;
  filter: saturate(0.85);
}

.hnefatafl-app .board {
  display: grid;
  grid-template-columns: repeat(11, minmax(28px, 52px));
  grid-template-rows: repeat(11, minmax(28px, 52px));
  border: 3px solid var(--wood-darker);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.6);
}

.hnefatafl-app .cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--wood-light);
  border: 1px solid var(--grid-line);
  cursor: default;
  transition: background 0.15s ease;
}

.hnefatafl-app .cell:nth-child(odd) {
  background: var(--wood-light);
}

.hnefatafl-app .cell.alt {
  background: var(--wood-dark);
}

.hnefatafl-app .cell.throne {
  background: rgb(var(--madder));
}

.hnefatafl-app .cell.corner {
  background: rgb(var(--madder));
}

.hnefatafl-app .cell.selectable {
  cursor: pointer;
}

.hnefatafl-app .cell.selectable:hover {
  filter: brightness(1.15);
}

.hnefatafl-app .cell.selected {
  box-shadow: inset 0 0 0 3px var(--highlight-select);
}

.hnefatafl-app .cell.move-option::after {
  content: '';
  position: absolute;
  width: 28%;
  height: 28%;
  border-radius: 50%;
  background: var(--highlight-move);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15);
}

.hnefatafl-app .cell.move-option {
  cursor: pointer;
}

.hnefatafl-app .piece {
  width: 78%;
  height: 78%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  user-select: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.15);
  transition: transform 0.12s ease;
}

.hnefatafl-app .piece.attacker {
  background: radial-gradient(circle at 35% 30%, rgb(var(--iron)), rgb(var(--soot)) 70%);
  border: 2px solid rgb(var(--ink));
}

.hnefatafl-app .piece.defender {
  background: radial-gradient(circle at 35% 30%, #ffffff, rgb(var(--bone)) 70%);
  border: 2px solid rgb(var(--iron));
}

.hnefatafl-app .piece.king {
  background: radial-gradient(circle at 35% 30%, #ffe27a, rgb(var(--brass)) 70%);
  border: 2px solid #6e5313;
  font-size: 1.3rem;
}

.hnefatafl-app .piece.king::before {
  content: '♔';
  color: #5a3f0c;
}

.hnefatafl-app .piece.pickable {
  cursor: pointer;
}

.hnefatafl-app .piece.pickable:hover {
  transform: scale(1.08);
}

.hnefatafl-app .side-panel {
  width: 260px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hnefatafl-app .status-card {
  background: rgb(var(--oak));
  border: 1px solid rgb(var(--iron-dim));
  border-radius: 8px;
  padding: 14px;
}

.hnefatafl-app .turn-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: bold;
  font-size: 1.05rem;
}

.hnefatafl-app .dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.hnefatafl-app .dot.attacker {
  background: radial-gradient(circle at 35% 30%, rgb(var(--iron)), rgb(var(--soot)) 70%);
  border: 1px solid rgb(var(--ink));
}

.hnefatafl-app .dot.defender {
  background: radial-gradient(circle at 35% 30%, #ffffff, rgb(var(--bone)) 70%);
  border: 1px solid rgb(var(--iron));
}

.hnefatafl-app .message {
  margin-top: 8px;
  color: rgb(var(--bone) / 0.75);
  font-size: 0.9rem;
  min-height: 20px;
}

.hnefatafl-app .message.win {
  color: rgb(var(--brass));
  font-weight: bold;
  font-size: 1rem;
}

.hnefatafl-app .message.thinking {
  color: rgb(var(--brass));
  font-style: italic;
}

.hnefatafl-app .players-card {
  background: rgb(var(--oak));
  border: 1px solid rgb(var(--iron-dim));
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hnefatafl-app .player-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
}

.hnefatafl-app .player-row label {
  flex: 1;
  color: rgb(var(--bone) / 0.75);
}

.hnefatafl-app .player-row select {
  background: var(--wood-dark);
  color: rgb(var(--bone));
  border: 1px solid rgb(var(--iron-dim));
  border-radius: 5px;
  padding: 5px 8px;
  font-size: 0.85rem;
  cursor: pointer;
}

.hnefatafl-app .player-row select:hover {
  background: var(--wood-darker);
}

.hnefatafl-app .scoreboard {
  background: rgb(var(--oak));
  border: 1px solid rgb(var(--iron-dim));
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hnefatafl-app .score {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
}

.hnefatafl-app .score .count {
  margin-left: auto;
  font-weight: bold;
  color: rgb(var(--brass));
}

.hnefatafl-app .btn {
  background: var(--wood-dark);
  color: rgb(var(--bone));
  border: 1px solid rgb(var(--iron-dim));
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 0.95rem;
  cursor: pointer;
  font-weight: bold;
  letter-spacing: 0.5px;
  transition: background 0.15s ease, transform 0.1s ease;
}

.hnefatafl-app .btn:hover {
  background: var(--wood-darker);
}

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

.hnefatafl-app .btn.secondary {
  background: transparent;
  color: rgb(var(--bone) / 0.75);
}

.hnefatafl-app .btn.secondary:hover {
  background: rgba(255, 255, 255, 0.05);
  color: rgb(var(--bone));
}

.hnefatafl-app .legend {
  background: rgb(var(--oak));
  border: 1px solid rgb(var(--iron-dim));
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.85rem;
  color: rgb(var(--bone) / 0.75);
}

.hnefatafl-app .legend summary {
  cursor: pointer;
  color: rgb(var(--bone));
  font-weight: bold;
}

.hnefatafl-app .legend ul {
  margin: 10px 0 0;
  padding-left: 18px;
  line-height: 1.5;
}

@media (max-width: 720px) {
  .hnefatafl-app .board {
    grid-template-columns: repeat(11, minmax(22px, 40px));
    grid-template-rows: repeat(11, minmax(22px, 40px));
  }
  .hnefatafl-app .side-panel {
    width: 100%;
    max-width: 480px;
  }
}