/* Game History and its Replay: a modal with two faces. The list is in front; tap a game and the box flips over to its replay on the
   back. (Your Data uses the same flip.) */

/* ---- the flip: a box of two faces, one turned away ---- */
.flip-dialog { width: min(92vw, 420px); padding: 0; background: none; border: 0; box-shadow: none; overflow: visible; }
.flip { display: grid; grid-template-columns: minmax(0, 1fr); perspective: 1400px; }   /* the box keeps its width however much the face wants */
.flip-inner { display: grid; grid-template-columns: minmax(0, 1fr); transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(0.3, 0.7, 0.2, 1); }
.flip.showing-back .flip-inner { transform: rotateY(180deg); }
.face {
  grid-area: 1 / 1; position: relative; padding: 40px calc(20px + 0.75rem) 20px;
  background: var(--panel-background); border: 1px solid var(--line-color); border-radius: 14px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4), 0 4px 10px rgba(0, 0, 0, 0.25);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.face.back-face { transform: rotateY(180deg); }
.face h2 { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
/* the face turned away is hidden outright once the flip is halfway (and the face coming round shows at once) */
.flip.showing-back .face:not(.back-face), .flip:not(.showing-back) .face.back-face { visibility: hidden; transition: visibility 0s 0.3s; }

.history-dialog .face { display: flex; flex-direction: column; height: min(calc(100dvh - 90px), 760px); padding-left: 20px; padding-right: 20px; }   /* narrower sides: the four filter words and the replay buttons need the room on a phone */
.history-dialog .face .dialog-buttons { flex: none; margin-top: 18px; }
.filter-row .won-filter { --filter-color: var(--bonus-color); }
.filter-row .won-filter input:checked + span { color: var(--text-color); }

/* ---- the list ---- */
.history-empty { margin: 28px 0; text-align: center; color: var(--muted-text-color); font-size: 18px; }
.history-row { display: grid; gap: 8px; padding: 14px 0; border-bottom: 2px solid var(--line-color); text-align: left; cursor: pointer; }   /* tap a game to replay it */
.history-row:hover { background: color-mix(in srgb, var(--text-color) 5%, transparent); }
.history-row:focus-visible { outline: 2px solid var(--text-color); outline-offset: -2px; }
.history-row .row-top, .history-row .row-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.history-row .row-top { align-items: baseline; }   /* the number, the date and the tag all sit on one text baseline */
.history-row .game-number { font-size: 22px; color: var(--text-color); }
.history-row .game-date { margin-left: 10px; color: var(--muted-text-color); font-size: 15px; }
.history-row .result-tag { padding: 5px 10px; border-radius: 8px; font-size: 14px; letter-spacing: 0.4px; white-space: nowrap; }
.history-row .result-tag.won { background: var(--bonus-color); color: var(--text-color); }   /* Won: black on the star's yellow, here and on the Won filter */
.history-row .result-tag.lost { border: 2px solid var(--line-color); background: var(--page-background); color: var(--text-color); padding: 3px 8px; }
.history-row .result-tag.unfinished { color: var(--muted-text-color); padding-right: 0; }
.history-row .who { display: flex; align-items: center; gap: 7px; font-size: 18px; color: var(--text-color); }
.history-row .who .symbol { width: 24px; height: 24px; vertical-align: 0; }
.history-row .scores { display: flex; gap: 5px; }

/* a score with its symbol: in the list and in the replay; the person's own is filled with their color */
.score-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 8px; color: var(--muted-text-color); font-size: 18px; }
.score-pill .symbol { width: 16px; height: 16px; vertical-align: 0; }
.score-pill[data-player="1"] { --pill-color: var(--player-1-color); }
.score-pill[data-player="2"] { --pill-color: var(--player-2-color); }
.score-pill[data-player="3"] { --pill-color: var(--player-3-color); }
.score-pill.is-me { background: var(--pill-color); color: #fff; }
.score-pill.is-me .symbol { filter: brightness(0) invert(1); }

/* ---- the replay on the back ---- */
.replay-info { margin: 0 0 10px; min-height: 0; font-size: 15px; }
.replay-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; text-align: center; }
/* the board is dark whatever the modal is (the modal's own colors are light) */
.replay-board {
  --page-background: #161618; --panel-background: #202024; --text-color: #eeeeee; --muted-text-color: #9a9aa2; --line-color: #37373d;
  color-scheme: dark; color: var(--text-color);
  width: min(100%, max(240px, calc(100dvh - 430px))); margin: 0 auto; padding: 10px; border-radius: 12px; background: var(--page-background);
}
.replay-board .square { pointer-events: none; cursor: default; }
.replay-move { margin: 12px 0 6px; min-height: 22px; font-size: 18px; color: var(--text-color); }
.replay-move .step-count { color: var(--muted-text-color); margin-right: 8px; }
.replay-move .symbol { width: 20px; height: 20px; vertical-align: -4px; margin-right: 2px; }
.replay-scores { display: flex; justify-content: center; gap: 8px; margin-bottom: 8px; }
.replay-slider { width: 100%; margin: 6px 0 10px; accent-color: var(--button-background); }
.replay-buttons { display: flex; gap: 8px; justify-content: center; align-items: stretch; }
.replay-button { flex: 0 1 56px; min-width: 0; padding: 10px 0; display: inline-flex; align-items: center; justify-content: center; }
.replay-button svg { width: 22px; height: 22px; fill: currentColor; }
.replay-button:disabled { opacity: 0.35; cursor: default; }
.replay-speed-button { flex: 0 1 92px; min-width: 0; padding-left: 8px; padding-right: 8px; }
.replay-message { min-height: 0; }

@media (prefers-reduced-motion: reduce) { .flip-inner { transition: none; } }