/* ============ Triple Triad ============ */
.tt-screen {
    padding: 12px;
    min-width: 560px;
}

/* Deck-select no longer needs its own narrower width - it now sits inside
   the shared .tt-field (700x500, same as every other screen), so a
   separate min-width here would just be dead code. */

/* Three screens now (menu, deck-select, game - the result screen was
   folded into an overlay on top of the game screen, rather than being a
   fourth separate one), all sharing the same 700x500 .tt-field and this
   same tight padding for the same reason - once the board art fills
   nearly the whole screen, the shared .tt-screen padding (12px) reads as
   an unwanted grey margin around it. */
/* .window-body's own base style (98.css) applies margin:8px around this
   whole widget, on top of which this padding was adding more - between
   the two, that's what actually made up the visible grey border around
   the field. Halved here (4px -> 2px) alongside a matching override on
   .window-body's margin (see #column-window-tripletriad .window-body
   below) so the total border is roughly half what it was (12px -> 6px on
   each side), rather than only halving one of the two contributors. */
.tt-screen.tt-menu-screen,
.tt-screen.tt-deck-screen,
.tt-screen.tt-game-screen {
    padding: 2px;
}

/* See the comment above - this is the other half of that same fix. */
#column-window-tripletriad .window-body {
    margin: 4px;
}

/* Still used by the deck-select and game-over screens' own headings, even
   though the start menu itself no longer uses this (see .tt-menu-title
   below, which replaced it there specifically). */
.tt-title {
    margin: 0 0 6px 0;
    font-size: 1.3em;
}

/* Shared 700x500 "field" used by every Triple Triad screen (menu, deck
   select, game, and game over) - all four now use exactly this same
   sizing and background treatment, rather than each screen defining its
   own copy that happened to use matching numbers, so they're uniform by
   construction and transition between each other seamlessly. */
.tt-field {
    position: relative;
    width: 700px;
    height: 500px;
    margin: 0 auto;
    background-color: #808080;
    font-family: "Pixelated MS Sans Serif", Arial;
    color: #f0f0e8;
}

/* Separate layer from .tt-field itself (not just background-image on the
   field directly) specifically so the "Triple Triad" title text can sit
   behind it as a fallback (see .tt-menu-title below) - a background-image
   always paints behind its own element's content, so achieving "text
   visible until the image loads, then covered by it" needs the image on
   its own stacked layer above the text, not sharing the text's element. */
.tt-field-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: #808080;
    background-image: url('/tripletriad/board-background.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.tt-menu-title {
    /* Sits behind .tt-field-bg (z-index 1) - visible as a fallback only
       until the board-background image actually loads and covers it, not
       a permanent overlay on top of the art. */
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.4em;
    font-weight: bold;
    color: rgba(240, 230, 210, 0.9);
    text-align: center;
    pointer-events: none;
}

/* Bracket-labeled dark panels (INFO / CHOICE / STATUS) over the board art,
   styled after Triple Triad Gold's own start-menu layout rather than the
   plain white checkbox box this screen had before. */
.tt-menu-panel {
    position: absolute;
    z-index: 2;
    background: rgba(50, 46, 42, 0.85);
    border: 1px solid rgba(210, 200, 180, 0.4);
    border-radius: 3px;
    padding: 14px 16px 10px 16px;
    box-sizing: border-box;
}

.tt-menu-panel p {
    margin: 0;
    font-size: 0.85em;
    line-height: 1.4;
}

.tt-menu-panel-label {
    position: absolute;
    top: -10px;
    left: 10px;
    background: #322e2a;
    padding: 0 6px;
    font-size: 0.7em;
    font-weight: bold;
    letter-spacing: 1px;
    color: #d8d0c0;
    border: 1px solid rgba(210, 200, 180, 0.4);
    border-radius: 2px;
}

.tt-menu-info {
    top: 20px;
    left: 20px;
    width: 250px;
}

/* Narrower than its original 300px, same reasoning as .tt-menu-settings
   below it - RULES's own longest label ("Open (see the opponent's
   hand)") is noticeably shorter than what 300px was originally sized
   for, leaving dead space to its right. Not narrowed as far as
   .tt-menu-settings's 230px, since this label is still longer than any
   of that panel's - 260px comfortably fits it on one line without
   wrapping while trimming most of the leftover space. right:20px is
   unchanged, so the right edge (and alignment with .tt-menu-settings
   below, which shares the same anchor) stays exactly where it was. */
.tt-menu-choice {
    top: 20px;
    right: 20px;
    width: 260px;
}

/* Sits below .tt-menu-choice (RULES) - that panel is now a little shorter
   than before (one checkbox moved out of it into here), landing its own
   bottom edge comfortably above this top offset. Also kept below the
   "Triple Triad" logo text/art that .tt-field-bg shows through the
   middle of the field (roughly centered on the field's own vertical
   center, ~CSS y 230-270) - 250 used to clip the right-hand half of it;
   320 clears it while still leaving room above .tt-menu-status.
   Narrower than .tt-menu-choice above (230px vs its 260px) - its own two
   checkbox labels ("Show name overlay on cards", "Game/menu sounds")
   are both considerably shorter than the RULES panel's longest label, so
   300px was leaving noticeable dead space to the right of the checkboxes
   once the overlay setting's own label got shortened. right:20px (same
   as .tt-menu-choice) keeps this anchored to and flush with that panel's
   right edge regardless of width, so narrowing this pulls its left edge
   inward while its right edge stays exactly aligned with RULES above it. */
.tt-menu-settings {
    top: 320px;
    right: 20px;
    width: 230px;
}

/* Labels/checkboxes inherit the base (dark-background-unaware) 98.css
   look, so their text needs to be explicitly light here to stay readable
   against this panel's own dark background. */
.tt-menu-choice .field-row {
    margin-bottom: 4px;
}

.tt-menu-choice label {
    color: #f0f0e8;
}

.tt-menu-choice .tt-primary-btn {
    margin-top: 10px;
    width: 100%;
}

.tt-menu-status {
    left: 20px;
    right: 20px;
    bottom: 16px;
    padding: 10px 16px 8px 16px;
}

.tt-primary-btn, .tt-secondary-btn {
    min-width: unset;
    padding: 4px 12px;
    margin-right: 6px;
}

/* --- Cards --- */
.tt-card {
    position: relative;
    width: 74px;
    height: 96px;
    background-color: #e8e4d8;
    /* background-image is set inline per-card (see cardArtStyle() in
       tripletriad.js) pointing at /tripletriad/cards/{slug}.png - a
       missing file just fails silently and this background-color shows
       through instead, so nothing breaks for any card whose art hasn't
       been uploaded yet. */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* No border here anymore, on purpose - the real PS1 game shows just
       the card art itself with nothing framing it, and box-sizing:
       border-box below meant this 2px border was previously eating into
       the declared 74x96 size rather than sitting outside it, leaving a
       thin ring of the background-color fallback visible between the
       art and the border on every card, everywhere this class is used
       (hand, board, and the deck-select grid). Removing it entirely
       means the full 74x96 is available for the art with nothing left
       to peek out around its edges. border-radius stays, purely
       cosmetic corner rounding rather than a border of its own. */
    border-radius: 4px;
    box-sizing: border-box;
    padding: 4px;
    font-size: 11px;
    user-select: none;
}

.tt-card-mini {
    width: 62px;
    height: 80px;
    font-size: 9px;
    cursor: pointer;
}

.tt-card-board {
    /* height:100% + aspect-ratio (rather than width:100%;height:100%,
       the previous attempt) fills the cell as much as possible while
       actually keeping the card's real proportions - the cells
       themselves are wider than they are tall, so forcing the card to
       match that exact shape squashed it into a short, wide rectangle
       instead of a normal card shape (confirmed by measuring the
       actual rendered card: 184x101px, aspect 1.82:1, vs a real card's
       roughly 0.77:1). aspect-ratio here matches .tt-card-hand's own
       94/122 proportions, so board cards and hand cards are
       consistently shaped. */
    height: 100%;
    width: auto;
    aspect-ratio: 94 / 122;
    box-sizing: border-box;
}

/* Capture flip animation - the standard 3D flip-card technique (two
   opposite-facing faces inside a rotating container, each hidden when
   turned away from the viewer) rather than timing a content swap to
   happen partway through a CSS animation - the colour change from the
   previous owner to the new one happens naturally as the back face
   rotates into view, with no JS-side timing to get slightly wrong. */
.tt-flip-outer {
    height: 100%;
    width: auto;
    aspect-ratio: 94 / 122;
    perspective: 800px;
}

.tt-flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease-in-out;
    transform-style: preserve-3d;
}

.tt-flip-outer.tt-flipped .tt-flip-inner {
    transform: rotateY(180deg);
}

.tt-flip-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.tt-flip-face .tt-card-board {
    height: 100%;
    width: 100%;
    aspect-ratio: auto;
}

.tt-flip-face-back {
    transform: rotateY(180deg);
}


.tt-card-mini .tt-card-name {
    max-height: 16px;
}

.tt-card-hand.tt-card-selected {
    /* Slides the card out of the stack toward the play field rather than
       the previous yellow outline highlight, matching the reference
       screenshot - the player's hand is always on the right side of the
       board, so "toward the play field" means shifting left. */
    transform: translateX(-50%) translateX(-18px);
}

.tt-card-selectable {
    cursor: pointer;
}

/* .tt-owner-player/.tt-owner-ai used to tint cards blue/red by owner
   here - removed on purpose, not just emptied by accident. The real PS1
   game doesn't tint cards by owner at all, just shows each card's own
   art as-is wherever it sits, and the base .tt-card border/background
   above already provides a plain, correct frame regardless of owner. */

.tt-card-back {
    background-color: #a01a1a;
    background-image: url('/tripletriad/cardback.png');
    background-size: cover;
    background-position: center;
    /* border-color here used to tint .tt-card's own base border darker
       for the card-back state specifically - removed alongside that
       base border above, since a color alone with no border-width/style
       left to apply it to doesn't render anything on its own. */
}

/* Top-left stat cluster: N on its own row, W+E side by side below it,
   S below that - matching the real game's actual layout (numbers
   clustered in the corner, not spread across the whole card as a
   diamond, which the earlier design mistakenly did). */
.tt-card-stats {
    position: absolute;
    top: 3px;
    left: 3px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 2px;
    padding: 2px;
}

.tt-rank-mid {
    display: flex;
    gap: 2px;
}

.tt-rank {
    width: 13px;
    height: 13px;
    line-height: 13px;
    text-align: center;
    font-weight: bold;
    font-size: 0.8em;
}

.tt-card-level {
    position: absolute;
    top: 2px;
    right: 2px;
    font-weight: bold;
    font-size: 0.7em;
    /* A light backing so this stays readable once card art is added
       behind it, not just against the current plain background. */
    background: rgba(255, 255, 255, 0.8);
    padding: 0 2px;
    border-radius: 2px;
}

.tt-card-name {
    position: absolute;
    bottom: 3px;
    left: 3px;
    right: 3px;
    max-height: 20px;
    overflow: hidden;
    text-align: center;
    font-weight: bold;
    font-size: 0.72em;
    line-height: 1.1;
    /* Matches .tt-menu-panel's own dark overlay style (the start
       screen's INFO/CHOICE/STATUS panels) rather than the previous
       light background, which made the name unreadable in white-on-white
       against certain card art. */
    background: rgba(50, 46, 42, 0.85);
    border: 1px solid rgba(210, 200, 180, 0.4);
    color: #f0f0e8;
    border-radius: 2px;
}

.tt-elem-badge {
    position: absolute;
    /* Top-right corner - clear of .tt-card-name's own space at the
       bottom of the card. */
    top: 17px;
    right: 2px;
    font-size: 0.6em;
    font-weight: bold;
    padding: 1px 3px;
    border-radius: 2px;
    color: #fff;
    /* Explicit and generous - guarantees this renders above the card
       art now that both can occupy the same cell simultaneously,
       regardless of DOM order or any other stacking-context nuance. */
    z-index: 20;
}

.tt-elem-fire { background: #c0392b; }
.tt-elem-ice { background: #2980b9; }
.tt-elem-thunder { background: #b8860b; }
.tt-elem-poison { background: #6b3fa0; }
.tt-elem-earth { background: #8b5a2b; }
.tt-elem-wind { background: #2e8b57; }
.tt-elem-water { background: #1a7ca0; }
.tt-elem-holy { background: #b8a000; }

/* --- Deck select ---
   4-panel layout matching the original game's own Card List screen
   (CHOICE/INFO/CARDS/SELECTED, styled with the same transparent dark
   panels used everywhere else in Triple Triad) - browse one level's 11
   cards at a time with the left/right arrows rather than scrolling
   through all 110 cards in one long list. */

.tt-deck-choice-panel {
    top: 16px;
    left: 16px;
    width: 220px;
}

.tt-deck-level-title {
    font-weight: bold;
    font-size: 1.1em;
    margin-bottom: 4px;
}

.tt-deck-count {
    font-weight: bold;
    font-size: 0.9em;
}

.tt-deck-info-panel {
    top: 16px;
    right: 16px;
    width: 260px;
}

.tt-deck-info-content {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 6px;
}

.tt-deck-info-stats {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.tt-deck-stat {
    font-size: 1.5em;
    font-weight: bold;
    width: 24px;
    text-align: center;
}

.tt-deck-stat-mid {
    display: flex;
    gap: 12px;
}

.tt-deck-info-thumb {
    width: 84px;
    height: 108px;
    flex-shrink: 0;
    background-color: #dbe9ff;
    background-size: cover;
    background-position: center;
    /* No border here anymore either, on purpose - same reasoning as
       .tt-card above: the real PS1 game shows just the card art with
       nothing framing it. */
    border-radius: 3px;
}

.tt-deck-info-name {
    font-weight: bold;
    margin-bottom: 2px;
}

.tt-deck-info-element {
    font-size: 0.85em;
    color: #d8d0c0;
}

/* Positioned to fill the remaining space below the CHOICE panel down to
   near the field's bottom edge, with the card list itself scrolling only
   if needed (each level is exactly 11 cards, which fits without scrolling
   at this panel size - unlike the previous all-110-cards-at-once design,
   which needed scrolling by necessity). */
.tt-deck-list-panel {
    /* A little more clearance than .tt-deck-choice-panel's estimated
       content height (~76px) strictly needs, since font line-height can
       round slightly differently than a plain estimate. */
    top: 84px;
    left: 16px;
    width: 220px;
    bottom: 16px;
    display: flex;
    flex-direction: column;
}

.tt-deck-list {
    flex: 1 1 auto;
    overflow-y: auto;
    background: rgba(20, 18, 16, 0.35);
    border: 1px solid rgba(210, 200, 180, 0.3);
    border-radius: 2px;
    padding: 6px 4px;
}

.tt-deck-list-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 6px;
    border-radius: 2px;
    cursor: pointer;
}

.tt-deck-list-item:hover,
.tt-deck-list-item-active {
    background: rgba(255, 255, 255, 0.12);
}

.tt-deck-list-bullet {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border: 1px solid #d8d0c0;
    transform: rotate(45deg);
}

.tt-deck-list-item-selected .tt-deck-list-bullet {
    background: #ffd700;
    border-color: #ffd700;
}

.tt-deck-list-item-selected .tt-deck-list-name {
    color: #ffd700;
}

.tt-deck-level-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 8px;
}

.tt-deck-level-nav-label {
    font-size: 0.85em;
    min-width: 70px;
    text-align: center;
}

.tt-deck-level-nav button {
    min-width: unset;
    padding: 2px 10px;
}

.tt-deck-actions-panel {
    /* Sits below .tt-deck-info-panel (top:16px + its ~172px content
       height, plus a little extra clearance for the same line-height
       rounding reason as .tt-deck-list-panel above), mirroring how
       .tt-deck-list-panel sits below .tt-deck-choice-panel on the left
       side. */
    top: 210px;
    right: 16px;
    bottom: 16px;
    width: 260px;
    display: flex;
    flex-direction: column;
}

.tt-deck-selected-list {
    flex: 1 1 auto;
    overflow-y: auto;
    background: rgba(20, 18, 16, 0.35);
    border: 1px solid rgba(210, 200, 180, 0.3);
    border-radius: 2px;
    padding: 6px 8px;
    margin-bottom: 8px;
    font-size: 0.9em;
}

.tt-deck-selected-item {
    padding: 3px 0;
}

.tt-deck-selected-empty {
    margin: 0;
    color: #b8b0a0;
    font-size: 0.85em;
    font-style: italic;
}

.tt-deck-actions-buttons {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* --- Game board --- */
/* Small yellow down-pointing arrow over whichever hand is currently
   active, replacing the old text turn indicator - matches the reference
   screenshot's style, and sits inside the field (not overlapping its
   edges) rather than needing extra space above it the way the text line
   did. Horizontal centering matches .tt-side-ai/.tt-side-player's own
   left/right + width exactly, so it's centered over the hand precisely
   rather than approximately. */
.tt-turn-arrow {
    position: absolute;
    top: 16px;
    width: 0;
    height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-top: 14px solid #ffd700;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6));
    z-index: 5;
}

.tt-turn-arrow-ai {
    left: 13.285%;
    transform: translateX(-50%);
}

.tt-turn-arrow-player {
    left: 86.715%;
    transform: translateX(-50%);
}

.tt-score-player { color: #1a4fa0; }
.tt-score-ai { color: #a01a1a; }

/* Hands down each side, board in the middle - matches the original PS1
   layout (opponent's hand on the left, player's on the right) rather
   than the earlier top/bottom arrangement. */
/* The board-background image is now applied to this whole wrapper
   (hands + grid together), not just the grid - that's what lets it fill
   the entire play area with the 3x3 grid as a smaller centered inset and
   both hands floating directly over the same image, matching the
   original game's actual layout instead of the grid being a separate
   boxed-off graphic with the hands sitting outside it. Sized wider than
   the image's own 700x500 (7:5) to leave room for both hands - since
   that changes the overall shape, background-size:cover still preserves
   the image's own proportions with no stretching, it just means some of
   the image's edges (top/bottom, since this shape is proportionally
   wider) end up cropped rather than the whole image being visible -
   different from stretching, which distorts the image itself. */
/* Sized to exactly match the board image's own native 700x500 (7:5)
   aspect ratio - with the container's shape matching the image's shape
   precisely, background-size:contain shows the complete image with
   nothing cropped and nothing stretched (this replaces a previous
   attempt that made the field proportionally wider than the image to
   fit both hands, which meant covering it without stretching required
   cropping some of the top/bottom edges - this version doesn't need to
   crop anything, since the hands sit within the image's own bounds
   instead, at the exact positions measured below). */
/* This screen now uses the shared .tt-field/.tt-field-bg (defined near
   the top of this file) instead of its own separate field class - .tt-side
   and .tt-board below just need z-index:2 (matching .tt-menu-panel
   elsewhere) to render above .tt-field-bg's z-index:1. */

/* Grid and hand positions below are all percentages measured directly
   off the reference board image (at its native 700x500), not estimated -
   the grid sits at the actual ornate cross pattern baked into that
   artwork, and each hand at the plain flanking area to its side, so they
   scale together correctly with the image at any size rather than just
   being centered generically. */
.tt-board {
    position: absolute;
    z-index: 2;
    /* Re-measured directly against your pink corner markers this round -
       left/width were already essentially correct, but top/height were
       significantly too small (56.8% vs the 82.72% the corners actually
       indicate), which is why the grid wasn't reaching nearly far enough
       down the board art. */
    left: 25.37%;
    top: 10.16%;
    width: 49.54%;
    height: 82.72%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 4px;
}

.tt-board-cell {
    /* No background/border here anymore, on purpose - this used to draw
       a visible light-gray grid box over every cell regardless of
       whether a card was on it, which isn't how the real PS1 game looks
       (the board art's own printed grid lines are all that's there -
       nothing translucent drawn on top of them). display/alignment are
       kept since .tt-cell-clickable below still needs this to lay out
       correctly.
       position:relative added specifically so .tt-elem-badge (an
       absolutely-positioned child, now rendered whether or not a card
       also occupies this cell - see renderGame()) anchors correctly to
       this exact cell rather than falling back to whatever the nearest
       positioned ancestor further up happens to be. */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tt-cell-clickable {
    cursor: pointer;
    box-shadow: inset 0 0 0 2px #ffd700;
}

.tt-cell-clickable:hover {
    background: rgba(216, 212, 192, 0.5);
}

.tt-side {
    position: absolute;
    z-index: 2;
    /* Top/height now match .tt-board's exactly, so the hand's top and
       bottom line up with the play field precisely, as asked. */
    top: 10.16%;
    width: 16.29%;
    height: 82.72%;
}

.tt-side-ai { left: 5.14%; }
.tt-side-player { right: 5.14%; }

.tt-hand {
    position: relative;
    width: 100%;
    /* Now uses the full side height - the score no longer needs a
       reserved strip below the hand, since it overlaps the bottom card
       directly instead (see .tt-side-score below). */
    height: 100%;
}

.tt-card-hand {
    /* Overlapping rather than gapped - each card's actual top offset is
       set inline per-card in JS (see handHtml() in tripletriad.js),
       stacked closely enough to fan out like a real hand of cards while
       still keeping every card's top edge (name, level, element) visible,
       matching the reference image instead of the previous plain
       vertical list with gaps between cards. */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 94px;
    height: 122px;
    transition: transform 0.15s ease-out;
}

.tt-side-score {
    position: absolute;
    /* Overlaps the bottom card of a full 5-card hand (last card's top
       offset is now 4*73=292px, height 122px, so its bottom edge is at
       414px - this sits 24px up from there, into the card itself, the
       same overlap as before, just recalculated for the new offset)
       rather than being reserved its own separate strip below the hand.
       With fewer cards left the stack is shorter, so this just settles
       below the (now shorter) stack instead - still reads fine, just no
       longer literally overlapping once the hand has thinned out. */
    top: 390px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    /* Matches the reference screenshots precisely - checked multiple
       examples against different backgrounds (fire, wood, a blue jersey)
       and the numeral's own styling is consistent across all of them: a
       white-to-grey gradient fill (not solid colour, and not tied to
       player/opponent colour the way an earlier attempt assumed), a
       thick black outline, bold, and italicised - rather than the pixel
       font used for chrome elsewhere in daxOS, which doesn't match how
       this specifically looks in the original game. */
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2.4em;
    font-weight: 900;
    font-style: italic;
    /* No fallback colour set here (for browsers without background-clip:
       text support) - .tt-score-player/.tt-score-ai (defined earlier in
       this file) already provide blue/red for that case, and adding
       another color here would only fight with them over which one wins,
       since they're equal-specificity single-class selectors. */
    background: linear-gradient(180deg, #ffffff 0%, #eeeeee 30%, #b8b8b8 55%, #808080 80%, #666666 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 2.5px #000;
    paint-order: stroke fill;
}

/* --- Game over --- */
.tt-over-panel {
    /* Higher than .tt-board/.tt-side's z-index:2 (inherited from
       .tt-menu-panel) - this now renders over the finished board rather
       than as the only content on its own separate screen, so it needs
       to explicitly win the stacking order rather than relying on being
       last in the DOM. */
    z-index: 10;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 420px;
    text-align: center;
}

.tt-over-panel .tt-title {
    color: #f0f0e8;
}

.tt-over-panel .tt-primary-btn,
.tt-over-panel .tt-secondary-btn {
    margin-top: 8px;
}

.tt-final-score {
    font-size: 1.1em;
    font-weight: bold;
    margin-bottom: 10px;
}

.tt-trade-note {
    max-width: 420px;
    color: #d8d0c0;
}