/* ==========================================================================
   Crazy Eights practice page: the parts of the board the shared stylesheet
   (brand.css) does not have. Loaded after it, on this page only.

   Colors come from the site's variables, so the dark and light themes both
   work; nothing here sets a color of its own except where a card face does.
   ========================================================================== */

/* The table: West on the left, the two piles in the middle, East on the right.
   (The shared .h-table is a compass layout for four seats; this one has a
   single row.) */
.ce-table {
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "w c e";
  gap: 6px 14px;
  padding: 10px 12px;
  margin: 4px 0 12px;
  align-items: start;
}
.ce-table .h-seat--w { grid-area: w; }
.ce-table .h-seat--e { grid-area: e; }
.ce-center { grid-area: c; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ce-piles { display: flex; gap: 16px; align-items: flex-start; }
.ce-pile { display: flex; flex-direction: column; align-items: center; gap: 3px; }
/* The two piles are read all the time, so they are a little larger than the cards of the players' hands. */
.ce-table .ce-pile .gcard { width: 46px; height: 64px; }
.ce-pile-lbl { margin: 0; font-size: 12px; color: var(--muted); white-space: nowrap; }
/* The suit that must be played: after an 8 it is not the suit of the top card, so it gets a line of its own. */
.ce-suitnow {
  margin: 0; padding: 3px 12px; border-radius: 999px; white-space: nowrap;
  border: 1.5px solid var(--line-firm); background: var(--surface); color: var(--text);
  font-size: 13.5px; font-weight: 700;
}

/* A player's hand, face down: a short overlapping row. The number beside the name says exactly how many. */
.ce-seat-count { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 7px; margin-left: 4px;
                 border-radius: 999px; border: 1.5px solid var(--line-firm); color: var(--muted); }
.ce-backs { display: flex; align-items: center; justify-content: center; max-width: 100%; min-height: 50px; }
.ce-table .ce-backs .gcard { width: 30px; height: 42px; margin-left: -18px; }
.ce-table .ce-backs .gcard:first-child { margin-left: 0; }
/* At the end of the deal the cards turn face up, so the points can be counted. */
.ce-backs--up { flex-wrap: wrap; gap: 4px 0; }
.ce-table .ce-backs--up .gcard { width: 36px; height: 50px; margin-left: -14px; }
.ce-table .ce-backs--up .gcard:first-child { margin-left: 0; }

/* Your hand. With many cards (after a long run of drawing) the cards overlap so the hand stays on one row where it can;
   --ce-lap is how many pixels each card is pulled over the one before it (set by the script). The padding on the left
   makes up for the first card's pull, so every row starts at the edge. */
.ce-hand { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; min-height: 64px; }
.ce-hand--lap { flex-wrap: nowrap; gap: 0; padding-left: var(--ce-lap); }
.ce-hand--lap .gcard { margin-left: calc(-1 * var(--ce-lap)); box-shadow: -2px 0 3px rgba(18, 20, 26, .12); }
.ce-hand--lap.ce-hand--rows { flex-wrap: wrap; row-gap: 8px; }

/* The cards you just drew. Which cards are new decides what to play, so they carry a ring and a small NEW tag, inside
   the card under the suit so it never overlaps the row above. */
.gcard.gcard--fresh { position: relative; box-shadow: 0 0 0 3px var(--accent); }
.gcard.gcard--fresh::after {
  content: "NEW"; position: absolute; left: 50%; bottom: 3px; transform: translateX(-50%);
  font-size: 9px; font-weight: 700; letter-spacing: .08em; line-height: 1;
  padding: 2px 4px; border-radius: 999px; background: var(--accent); color: var(--on-accent);
}
@media (forced-colors: active) {
  .gcard.gcard--fresh { outline: 3px solid Highlight; }
  .gcard.gcard--fresh::after { border: 1px solid CanvasText; background: Canvas; color: CanvasText; }
}

/* The buttons under the hand. The four suit buttons take the place of Draw and Pass, which are never needed at the
   same time, so the row does not grow when they appear. */
.ce-suits { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.ce-suits[hidden] { display: none; }
.g-controls .ce-suits .btn { padding: 9px 13px; }
.g-controls .ce-new { margin-left: auto; }
/* The red hearts and diamonds in a suit button turn light with the button when it is hovered or focused, so they stay readable. */
.ce-suit:hover .suit--red, .ce-suit:focus-visible .suit--red { color: inherit; }

/* A phone: the board has to stay short, so the status line is smaller, the numbers along the top lose their long labels,
   the four suit buttons share one full-width row (above Hint and the last button), and the cards turned face up at the end
   of a deal are smaller. */
@media (max-width: 560px) {
  #crazy-eights-trainer .pr-status { font-size: 14.5px; line-height: 1.4; padding: 7px 10px; margin-bottom: 10px; }
  #crazy-eights-trainer .h-stats { gap: 2px 14px; padding-bottom: 6px; margin-bottom: 8px; }
  #crazy-eights-trainer .h-stats .g-stat { font-size: 12px; }
  #crazy-eights-trainer .h-stats .g-stat b { font-size: 16px; margin-left: 4px; }
  .ce-long { display: none; }
  .ce-table { gap: 4px 6px; padding: 8px 6px; margin-bottom: 8px; }
  .ce-piles { gap: 10px; }
  .ce-table .ce-pile .gcard { width: 40px; height: 57px; }
  .ce-table .ce-backs .gcard { width: 26px; height: 36px; margin-left: -16px; }
  .ce-table .ce-backs .gcard:first-child { margin-left: 0; }
  .ce-table .ce-backs--up .gcard { width: 28px; height: 40px; margin-left: -12px; }
  .ce-table .ce-backs--up .gcard:first-child { margin-left: 0; }
  .ce-backs { min-height: 36px; }
  .ce-suits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; order: -1; width: 100%; }
  .ce-suits[hidden] { display: none; }
  .g-controls .ce-suits .btn { display: flex; flex-direction: column; align-items: center; padding: 5px 2px; line-height: 1.15; border-radius: 12px; }
  .ce-suit .ce-sym { font-size: 19px; }
  .ce-suit .ce-name { font-size: 11.5px; }
  .g-controls .ce-new { margin-left: 0; }
}

/* ==========================================================================
   Watch a narrated deal (crazy-eights-watch.js)

   Every hand is face up. West and East sit at the sides with the two piles between them, South is
   below, and one line under the table says what the gold edge, the red and the fading mean. The cards,
   the narration and the controls are the shared .wv-* rules in brand.css; only the table is new.
   ========================================================================== */
#crazyeights-watch .wv-stage { container: wvstage / inline-size; margin-bottom: 6px; padding-top: 6px; }
#crazyeights-watch .wv-head { margin-bottom: 4px; }
/* the panel stays about one laptop screen tall (700px at 1366x768, with the step that has the longest list of choices open) */
#crazyeights-watch { padding-top: 12px; padding-bottom: 10px; }
#crazyeights-watch .wv-text { line-height: 1.45; }
/* the tag "not allowed" is wider than the shared 74px column, so it fell on two lines (above 560px: below it the tags are not shown) */
@media (min-width: 561px) {
  #crazyeights-watch .wv-opt { grid-template-columns: minmax(34px, auto) 88px 1fr; }
  #crazyeights-watch .wv-opt-tag { white-space: nowrap; }
}
#crazyeights-watch .ce-wtable {
  display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: "w c e" "s s s";
  gap: 8px 10px; align-items: start; justify-items: center;
}
#crazyeights-watch .ce-wseat--w { grid-area: w; }
#crazyeights-watch .ce-wseat--e { grid-area: e; }
#crazyeights-watch .ce-wseat--s { grid-area: s; }
#crazyeights-watch .ce-wseat { min-height: 62px; justify-content: flex-start; }
#crazyeights-watch .ce-wcenter { grid-area: c; display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 176px; }
#crazyeights-watch .ce-wpiles { display: flex; gap: 14px; align-items: flex-start; }
#crazyeights-watch .ce-wpile { display: flex; flex-direction: column; align-items: center; gap: 2px; }
#crazyeights-watch .ce-wpile .wv-cards { min-height: 0; }
/* the two piles are read all the time, so their cards are a little larger than the cards in the hands */
#crazyeights-watch .ce-wpile .gcard { width: 36px; height: 50px; }
#crazyeights-watch .ce-wpile .gcard .gr { font-size: 13px; }
#crazyeights-watch .ce-wpile .gcard .gs { font-size: 12px; }
#crazyeights-watch .ce-wpile .wv-caption { white-space: nowrap; }
/* the suit to play: after an 8 it is not the suit of the top card, so it gets a line of its own (the line keeps its height when it is empty) */
#crazyeights-watch .ce-wsuit {
  margin: 0; padding: 2px 12px; min-height: 1.7em; border-radius: 999px; white-space: nowrap;
  border: 1.5px solid var(--line-firm); background: var(--surface); color: var(--text); font-size: 13px; font-weight: 700;
}
#crazyeights-watch .wv-legend { margin: 6px 0 0; font-size: 12px; line-height: 1.3; color: var(--muted); text-align: center; }
/* the controls fit on one row beside the Coach (about 620px): the Jump-to menu is as wide as its longest name would make it, which is
   most of a row by itself, so it is held to about 11 characters and its list still shows each chapter name in full */
#crazyeights-watch .wv-jump { max-width: 11.5em; }
/* A faded card (one the player to move may not play) is faded by a veil of the table's own color laid over its face, not by opacity.
   A card with opacity is painted above the cards beside it whatever their order, so a faded card laid its see-through edge over the
   first digit of the 10 after it and left pale strips on the cards before it. Every card is positioned instead, so the cards of a hand
   overlap in the order they are dealt, and the veil stays inside its own card. */
#crazyeights-watch .wv-cards .gcard { position: relative; }
#crazyeights-watch .wv-cards .gcard.wv-dim { opacity: 1; }
#crazyeights-watch .wv-cards .gcard.wv-dim::after { content: ""; position: absolute; inset: -1.2px; border-radius: inherit; background: var(--surface-2); opacity: .55; pointer-events: none; }
/* A card that has just moved is raised above its neighbors (brand.css), so it would lie over the "1" of a 10 right after it: that 10 is
   moved over until only the card's edge is covered. (The card after a 10 is already moved over by the shared wv-after-ten rule.) */
#crazyeights-watch .wv-cards:not(.wv-cards--loose) .gcard.wv-fresh + .gcard[data-k^="10"] { margin-left: -3px; }
/* a gold edge marks an 8, as it does in the playable game; the plain wv-cards border is too thin to see on a small card */
#crazyeights-watch .gcard--meld { border-width: 2px; }
@media (forced-colors: active) {
  #crazyeights-watch .gcard--meld { border-width: 3px; }
}
/* The table needs about 500px: two hands of up to 7 cards (a hand of more than 7 is drawn in two rows) with the two piles between them. On a
   narrower board (a phone, a small window, the Coach beside the board on a screen under about 950px wide) the piles go on top, West and
   East sit side by side and South is below, and the cards are a little smaller. A card still shows its whole rank and suit: each card
   is covered by the next one only down to 19px of its 28 (22px for a 10, which is wider), the way a 30px card is covered down to 20px.
   The container query asks the question directly; the media queries say about the same for browsers that do not have it. */
@container wvstage (max-width: 490px) {
  #crazyeights-watch .ce-wtable { grid-template-columns: 1fr 1fr; grid-template-areas: "c c" "w e" "s s"; }
  #crazyeights-watch .ce-wseat .wv-cards .gcard { width: 28px; height: 40px; }
  #crazyeights-watch .ce-wseat .wv-cards .gcard + .gcard { margin-left: -9px; }
  #crazyeights-watch .ce-wseat .wv-cards:not(.wv-cards--loose) .gcard.wv-after-ten { margin-left: -6px; }
}
/* On a very small phone (under about 350px) there is no room for two hands side by side: every hand gets a row of its own. */
@container wvstage (max-width: 270px) {
  #crazyeights-watch .ce-wtable { grid-template-columns: 1fr; grid-template-areas: "c" "w" "e" "s"; }
}
@supports not (container-type: inline-size) {
  @media (max-width: 599px), (min-width: 900px) and (max-width: 949px) {
    #crazyeights-watch .ce-wtable { grid-template-columns: 1fr 1fr; grid-template-areas: "c c" "w e" "s s"; }
    #crazyeights-watch .ce-wseat .wv-cards .gcard { width: 28px; height: 40px; }
    #crazyeights-watch .ce-wseat .wv-cards .gcard + .gcard { margin-left: -9px; }
    #crazyeights-watch .ce-wseat .wv-cards:not(.wv-cards--loose) .gcard.wv-after-ten { margin-left: -6px; }
  }
  @media (max-width: 349px) {
    #crazyeights-watch .ce-wtable { grid-template-columns: 1fr; grid-template-areas: "c" "w" "e" "s"; }
  }
}

/* ==========================================================================
   Fixed-board layout (.pr-fixed, see docs/fixed-board-rollout.md). The board is a size container; the shared
   rules make the table take the height that is left, and everything here is sized from the table's own room
   (cq units inside the table) or the board's (cq units on the hand), so the page never scrolls.
   ========================================================================== */
.pr-fixed #crazy-eights-trainer { --hw: min(calc((100cqw - 30px) / 9), 62px, 12cqh); }
.pr-fixed #crazy-eights-trainer:has(.ce-hand--lap) { --hw: min(calc((100cqw - 30px) / 11), 50px, 10cqh); }
.pr-fixed #crazy-eights-trainer:has(.ce-hand--rows) { --hw: min(calc((100cqw - 30px) / 14), 40px, 8cqh); }
.pr-fixed #crazy-eights-trainer > .ce-table {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "w c e";
  align-content: center; align-items: center; gap: 4px 12px; margin-bottom: 1.5cqh; padding: 1cqh 10px;
  --pc: clamp(36px, min(calc(100cqh - 56px), calc((42cqw - 16px) / 1.42)), 90px);
  --bk: clamp(26px, min(calc(100cqh - 56px), 9cqw), 64px);
}
.pr-fixed .ce-table .ce-pile .gcard { width: calc(var(--pc) * .71); height: var(--pc); }
.pr-fixed .ce-table .ce-pile .gcard .gr { font-size: max(13px, calc(var(--pc) * .28)); }
.pr-fixed .ce-table .ce-pile .gcard .gs { font-size: max(12px, calc(var(--pc) * .26)); }
.pr-fixed .ce-table .ce-backs { min-height: 0; min-width: 0; }
.pr-fixed .ce-table .ce-backs .gcard { width: calc(var(--bk) * .71); height: var(--bk); flex: 0 1 auto; min-width: 7px; margin-left: calc(var(--bk) * -.46); }
.pr-fixed .ce-table .ce-backs .gcard:first-child { margin-left: 0; }
.pr-fixed .ce-table .ce-backs--up .gcard { margin-left: calc(var(--bk) * -.3); }
.pr-fixed .ce-table .ce-backs--up .gcard:first-child { margin-left: 0; }
.pr-fixed .ce-center { gap: 3px; min-width: 0; }
.pr-fixed .ce-piles { gap: 10px; }
.pr-fixed .ce-seat-count { white-space: nowrap; }
.pr-fixed #crazy-eights-trainer .h-handlbl { margin: 0 0 4px; }
.pr-fixed .ce-hand, .pr-fixed .ce-hand--lap, .pr-fixed .ce-hand--lap.ce-hand--rows {
  flex-wrap: wrap; gap: 0; row-gap: 4px; margin: 0; min-height: 0; padding-left: calc(var(--hw) * .22);
}
.pr-fixed .ce-hand .gcard, .pr-fixed .ce-hand--lap .gcard {
  width: var(--hw); height: calc(var(--hw) * 1.4); margin-left: calc(var(--hw) * -.22); flex: 0 0 auto;
  box-shadow: -2px 0 3px rgba(18, 20, 26, .14);
}
.pr-fixed .ce-hand .gcard .gr { font-size: max(13px, calc(var(--hw) * .33)); }
.pr-fixed .ce-hand .gcard .gs { font-size: max(12px, calc(var(--hw) * .3)); }
.pr-fixed .gcard.gcard--fresh { box-shadow: 0 0 0 3px var(--accent); }
/* the buttons in the rail's dock: a flexible row, the four suit buttons on a row of their own above */
.pr-fixed .pr-dock .ce-controls { display: flex; flex-wrap: wrap; gap: 8px; }
.pr-fixed .pr-dock .ce-controls > .btn { flex: 1 1 0; min-width: 0; width: auto; margin: 0; }
.pr-fixed .pr-dock .ce-controls .ce-new { margin-left: 0; }
.pr-fixed .pr-dock .ce-controls .ce-suits:not([hidden]) { flex: 1 1 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; order: -1; }
.pr-fixed .pr-dock .ce-controls .ce-suits .btn { display: flex; flex-direction: column; align-items: center; padding: 6px 2px; line-height: 1.15; border-radius: 12px; width: 100%; }
.pr-fixed .pr-dock .ce-controls .ce-suit .ce-sym { font-size: 19px; }
.pr-fixed .pr-dock .ce-controls .ce-suit .ce-name { font-size: 12px; }
@container board (max-height: 470px) {
  .pr-fixed #crazy-eights-trainer .h-stats { display: none; }
}
@media (max-width: 899px) {
  .pr-fixed .pr-dock .ce-controls > .btn { padding: 9px 8px; font-size: 14px; }
}

/* The narrated table, on a board wide enough for it: its cards grow with the board. */
@container board (min-width: 521px) {
  .pr-fixed #crazyeights-watch .ce-wtable { --wc: clamp(30px, min(7cqw, 7.5cqh), 52px); }
  .pr-fixed #crazyeights-watch .ce-wseat .wv-cards .gcard { width: var(--wc); height: calc(var(--wc) * 1.4); margin-left: calc(var(--wc) * -.4); }
  .pr-fixed #crazyeights-watch .ce-wseat .wv-cards .gcard:first-child { margin-left: 0; }
  .pr-fixed #crazyeights-watch .ce-wseat .wv-cards:not(.wv-cards--loose) .gcard.wv-after-ten { margin-left: calc(var(--wc) * -.3); }
  .pr-fixed #crazyeights-watch .ce-wseat .wv-cards .gcard .gr { font-size: max(12px, calc(var(--wc) * .3)); }
  .pr-fixed #crazyeights-watch .ce-wseat .wv-cards .gcard .gs { font-size: max(11px, calc(var(--wc) * .27)); }
  .pr-fixed #crazyeights-watch .ce-wpile .gcard { width: calc(var(--wc) * 1.2); height: calc(var(--wc) * 1.68); margin-left: 0; }
  .pr-fixed #crazyeights-watch .ce-wpile .gcard .gr { font-size: max(13px, calc(var(--wc) * .36)); }
  .pr-fixed #crazyeights-watch .ce-wpile .gcard .gs { font-size: max(12px, calc(var(--wc) * .32)); }
}