@import url('../global.css');
.quarto-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(13rem, 18rem);
  grid-template-rows: minmax(0, 1fr);
  gap: 1rem;
  align-items: stretch;
}
.quarto-board {
  --quarto-frame: #4a2c14;
  --quarto-carcass-a: #d6a967;
  --quarto-carcass-b: #80502a;
  --quarto-cell-a: #f0ce97;
  --quarto-cell-b: #c59054;
  --quarto-cell-hover-a: #ffe4b5;
  --quarto-cell-hover-b: #dfa15d;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.45rem;
  /* Height-driven square felt: fill the shell height, aspect-ratio derives the
     width. No 72vh cap — it shrank the board and left a bottom gap. */
  height: 100%;
  max-height: 100%;
  aspect-ratio: 1;
  margin: auto;
  padding: 0.55rem;
  /* Dark walnut carcass framing the lighter inlaid cells, like a turned-wood
     games table rather than a flat gold border. */
  border: 0.32rem solid var(--quarto-frame);
  border-radius: var(--border-radius-lg);
  background:
    repeating-linear-gradient(
      90deg,
      color-mix(in srgb, var(--color-quarto) 11%, transparent) 0 0.12rem,
      transparent 0.12rem 0.55rem
    ),
    linear-gradient(135deg, var(--quarto-carcass-a), var(--quarto-carcass-b));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 3px 8px rgba(0, 0, 0, 0.3),
    var(--shadow);
}
.quarto-board[data-visual-theme='arcade'] {
  --quarto-frame: #3a0f2e;
  --quarto-carcass-a: #ff8fe0;
  --quarto-carcass-b: #a6157e;
  --quarto-cell-a: #ffd4f4;
  --quarto-cell-b: #e662c2;
  --quarto-cell-hover-a: #ffe9fa;
  --quarto-cell-hover-b: #ff8fe0;
}
.quarto-board[data-visual-theme='midnight'] {
  --quarto-frame: #0c1a2c;
  --quarto-carcass-a: #6fb8e8;
  --quarto-carcass-b: #1c4d73;
  --quarto-cell-a: #cfe9fb;
  --quarto-cell-b: #4c8fbd;
  --quarto-cell-hover-a: #e6f4fc;
  --quarto-cell-hover-b: #6fb8e8;
}
.quarto-board[data-visual-theme='daylight'] {
  --quarto-frame: #4c2c73;
  --quarto-carcass-a: #c9a8f2;
  --quarto-carcass-b: #7c3aed;
  --quarto-cell-a: #f2e9fd;
  --quarto-cell-b: #b389e8;
  --quarto-cell-hover-a: #faf5ff;
  --quarto-cell-hover-b: #c9a8f2;
}
.quarto-board[data-visual-theme='amber'] {
  --quarto-frame: #3a2306;
  --quarto-carcass-a: #f0b94a;
  --quarto-carcass-b: #8c5a12;
  --quarto-cell-a: #fbe2ab;
  --quarto-cell-b: #d99a2e;
  --quarto-cell-hover-a: #fff0d1;
  --quarto-cell-hover-b: #f0b94a;
}
.quarto-cell {
  display: grid;
  place-items: center;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--color-quarto) 50%, transparent);
  border-radius: 0.6rem;
  background:
    repeating-linear-gradient(100deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 6px),
    linear-gradient(145deg, var(--quarto-cell-a), var(--quarto-cell-b));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  transition:
    transform 150ms ease,
    background 150ms ease,
    box-shadow 150ms ease;
}
.quarto-cell:not(:disabled):hover {
  background: linear-gradient(145deg, var(--quarto-cell-hover-a), var(--quarto-cell-hover-b));
  box-shadow: inset 0 0 0 0.14rem color-mix(in srgb, white 70%, transparent);
  transform: scale(1.035);
}
.quarto-cell:disabled {
  cursor: default;
}
.quarto-piece {
  width: 80%;
  height: 80%;
  filter: drop-shadow(0 0.22rem 0.14rem color-mix(in srgb, black 40%, transparent));
}
.quarto-piece-tray {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.45rem;
}
.quarto-held-piece {
  display: grid;
  width: min(100%, 9rem);
  aspect-ratio: 1;
  place-items: center;
  margin: 0 auto var(--spacing-sm);
  border: 0.18rem solid color-mix(in srgb, var(--color-quarto) 75%, white);
  border-radius: var(--border-radius-lg);
  background: linear-gradient(145deg, #fff1d3, #dca56a);
  box-shadow: 0 0 1.4rem color-mix(in srgb, var(--color-quarto) 35%, transparent);
  animation: quarto-held-arrive 280ms cubic-bezier(0.16, 0.9, 0.3, 1);
}
.quarto-held-piece .quarto-piece {
  width: 72%;
  height: 72%;
}
.quarto-piece-button {
  aspect-ratio: 1;
  padding: 0.2rem;
  border: 1px solid color-mix(in srgb, var(--color-quarto) 50%, transparent);
  border-radius: 0.4rem;
  background: linear-gradient(145deg, #f3d8ac, #ba7b43);
  cursor: pointer;
  transition:
    transform 150ms ease,
    box-shadow 150ms ease,
    border-color 150ms ease;
}
.quarto-piece-button:not(:disabled):hover {
  border-color: color-mix(in srgb, var(--color-quarto) 80%, white);
  box-shadow: 0 0 1rem color-mix(in srgb, var(--color-quarto) 30%, transparent);
  transform: translateY(-0.16rem);
}

@keyframes quarto-held-arrive {
  from {
    opacity: 0;
    transform: translateY(-0.45rem) scale(0.78);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.quarto-piece-button[hidden] {
  display: none;
}
.quarto-piece-button svg {
  width: 100%;
  height: 100%;
}
@media (max-width: 700px) {
  .quarto-layout {
    grid-template-columns: 1fr;
  }
  .quarto-tray {
    order: 2;
  }
}

/* Keep the board + piece tray composition centred in the shell footprint. */
.quarto-layout {
  flex: 1 1 auto;
  min-height: 0;
  align-content: center;
}