/* Layout and component styles. Colors live in theme.css; this file only uses variables. */

.app-loading {
  display: flex;
  justify-content: center;
  padding: 4rem 1rem;
}

/* Blazor focuses the page heading after navigation so screen readers announce the new page.
   The heading isn't interactive, so it doesn't need a visible focus frame. */
h1:focus {
  outline: none;
}

/* ZuidCore mark in the header (Story #276): the light copy by default, the dark copy in dark mode. */
.ttt-logo {
  display: block;
  width: 2rem;
  height: 2rem;
}

.ttt-logo-dark,
[data-coreui-theme="dark"] .ttt-logo-light {
  display: none;
}

[data-coreui-theme="dark"] .ttt-logo-dark {
  display: block;
}

#blazor-error-ui {
  display: none;
  position: fixed;
  inset: auto 0 0 0;
  z-index: 1080;
}

/* Board: always square, three equal rows and columns (spike #181 finding). */
.ttt-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: .5rem;
  width: min(100%, 22rem);
  aspect-ratio: 1;
}

.ttt-cell {
  min-height: 0;
  padding: 0;
  font-size: clamp(2.25rem, 12vw, 4rem);
  font-weight: 700;
  line-height: 1;
  border: 2px solid var(--cui-border-color);
  /* The card surface (white / charcoal), so the board stands out from the warm page. */
  background-color: var(--ttt-surface);
}

.ttt-cell[aria-disabled="true"] {
  cursor: default;
}

.ttt-cell[data-mark="X"] { color: var(--ttt-mark-x); }
.ttt-cell[data-mark="O"] { color: var(--ttt-mark-o); }

.ttt-mark-label[data-mark="X"] { color: var(--ttt-mark-x); }
.ttt-mark-label[data-mark="O"] { color: var(--ttt-mark-o); }

.ttt-cell-win {
  border-color: var(--ttt-win-border);
  background-color: var(--ttt-win-bg);
}

/* Icons (D-016): one SVG per icon from @coreui/icons, drawn in currentColor via a mask. */
.ttt-icon {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  vertical-align: -0.2em;
  background-color: currentColor;
  mask: var(--ttt-icon) center / contain no-repeat;
}

.ttt-icon-sun { --ttt-icon: url("../lib/coreui-icons/svg/free/cil-sun.svg"); }
.ttt-icon-moon { --ttt-icon: url("../lib/coreui-icons/svg/free/cil-moon.svg"); }
.ttt-icon-contrast { --ttt-icon: url("../lib/coreui-icons/svg/free/cil-contrast.svg"); }
.ttt-icon-warning { --ttt-icon: url("../lib/coreui-icons/svg/free/cil-warning.svg"); }
.ttt-icon-reload { --ttt-icon: url("../lib/coreui-icons/svg/free/cil-reload.svg"); }
.ttt-icon-home { --ttt-icon: url("../lib/coreui-icons/svg/free/cil-home.svg"); }
.ttt-icon-share { --ttt-icon: url("../lib/coreui-icons/svg/free/cil-share-alt.svg"); }
.ttt-icon-copy { --ttt-icon: url("../lib/coreui-icons/svg/free/cil-copy.svg"); }
.ttt-icon-people { --ttt-icon: url("../lib/coreui-icons/svg/free/cil-people.svg"); }