/* Outmark board finish: soft tile gutters, crisp marks and a readable oldest-mark tile.
   Loaded after the legacy game CSS. Mark colors still come from each palette's --x/--o. */
/* Default palette: soft tile gutters on warm paper. */
html:not([data-outmark-palette]) .board, html[data-outmark-palette="classic"] .board {
  background: #e7dece !important;
}
.board {
  border: 2px solid #b8ab97 !important;
  border-radius: 22px !important;
  box-shadow: 0 6px 0 #ddd3c2, 0 18px 40px rgba(60, 45, 20, .10) !important;
}
html:not([data-outmark-palette]) .board .cell, html[data-outmark-palette="classic"] .board .cell {
  border-right-color: #e7dece;
  border-bottom-color: #e7dece;
  background: #fffdf7;
}
html:not([data-outmark-palette]) .board .cell:not(:disabled):hover, html[data-outmark-palette="classic"] .board .cell:not(:disabled):hover { background: #f6f1ff; }
html:not([data-outmark-palette]) .board .cell.last, html[data-outmark-palette="classic"] .board .cell.last { background: #fff6ec; }
/* Supporter palettes keep their own paper; gutters follow the palette's ink. */
html[data-outmark-palette]:not([data-outmark-palette="classic"]) .board .cell {
  border-right-color: color-mix(in srgb, var(--ink) 12%, var(--paper-2));
  border-bottom-color: color-mix(in srgb, var(--ink) 12%, var(--paper-2));
}
.board .cell { transition: background-color .15s ease; }
.board .cell.win { background: #effad6; }

/* Marks land with a small spring instead of a flat fade. */
.board .piece.enter { animation: outmarkMarkLand .26s cubic-bezier(.3, 1.5, .55, 1) both; }
@keyframes outmarkMarkLand {
  0% { opacity: 0; transform: scale(.55); }
  70% { opacity: 1; transform: scale(1.07); }
  100% { opacity: 1; transform: scale(1); }
}

/* The next mark to leave sits on a dashed tile in its own color. */
.board .cell.expiring::after {
  inset: 9% !important;
  border: 2px dashed currentColor !important;
  border-radius: 14px !important;
  background: color-mix(in srgb, currentColor 9%, transparent) !important;
  box-shadow: none !important;
  opacity: .75 !important;
}
.board .cell.expiring .piece { opacity: .55 !important; }

@media (max-width: 480px) {
  .board { border-radius: 18px !important; }
  .board .cell.expiring::after { border-radius: 10px !important; border-width: 1.5px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .board .piece.enter { animation: none; }
}

/* The player-profile dialog sizes to its content instead of a fixed 92% sheet. */
#nameDialog { height: fit-content !important; }
#nameDialog .dialog-body { height: auto !important; max-height: min(92dvh, 860px) !important; }
#nameDialog .identity-dialog-scroll { flex: 1 1 auto; }

/* Keep the hero caption on balanced lines on phones. */
.outmark-hero-board > span { text-wrap: balance; }

/* Drawn icons (assets/icons.js) sit on the text baseline wherever they appear. */
.om-icon { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -.16em; }
.reaction .om-icon { width: 24px; height: 24px; vertical-align: middle; }
.reaction-bubble .om-icon { width: 96px; height: 96px; color: var(--ink, #202024); filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .18)); }