:root{
  --green:#01a484; --yellow:#eac548; --orange:#d93900;
  --red:#ff5252; --tile:#1d2428; --panel-mobile:#16201f;
}
/* Reusable diagonal-striped animated fill. Set --bar-color per use. */
.striped-bar{
  background-image:repeating-linear-gradient(45deg,
    var(--bar-color,var(--green)) 0, var(--bar-color,var(--green)) 8px,
    color-mix(in srgb, var(--bar-color,var(--green)) 70%, #000) 8px,
    color-mix(in srgb, var(--bar-color,var(--green)) 70%, #000) 16px);
  background-size:22px 22px;
  animation:stripe-scroll 0.6s linear infinite;
}
@keyframes stripe-scroll{from{background-position:0 0}to{background-position:22px 0}}
@media (prefers-reduced-motion: reduce){ .striped-bar{animation:none} }

/* Timer color state (Task 5): applied to .game-screen, colors the time text
   and feeds --bar-color to both striped timer bars via descendant selectors. */
.t-green{--bar-color:var(--green)}
.t-green .time-left{color:var(--green)}
.t-yellow{--bar-color:var(--yellow)}
.t-yellow .time-left{color:var(--yellow)}
.t-red{--bar-color:var(--red)}
.t-red .time-left{color:var(--red)}

/* @font-face declarations */
@font-face {
    font-family: 'Google Sans';
    src: url('fonts/google-sans/GoogleSans-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Google Sans';
    src: url('fonts/google-sans/GoogleSans-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Google Sans';
    src: url('fonts/google-sans/GoogleSans-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Google Sans';
    src: url('fonts/google-sans/GoogleSans-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Material Symbols Subset';
    src: url('fonts/material-symbols-subset.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
/* Material Symbols codepoints (use as HTML entities, e.g. ):
   backspace e14a · check e668 · shuffle e043 · keyboard e312 ·
   menu_book ea19 · trending_up e8e5 · timer e425 · leaderboard f20c ·
   spellcheck e8ce · scoreboard ebd0 · straighten e41c · emoji_events ea23 */
.msym{
  /* !important so contextual bare-span rules (e.g. `.column h2 span` sets
     Arial Narrow) can't hijack the icon font and render tofu. */
  font-family:'Material Symbols Subset' !important;
  font-size:1.1em !important;               /* scale with surrounding text, win over 10px span rules */
  font-weight:normal; font-style:normal;
  line-height:1; vertical-align:-0.15em;    /* sit on the text baseline */
  color:var(--green) !important;            /* green icons; !important beats `.column h2 span` color */
  margin-right:6px;                          /* space between icon and its label */
  -webkit-font-smoothing:antialiased;
  letter-spacing: normal; text-transform: none; white-space: nowrap; font-feature-settings: 'liga';
}
/* Button icons stay legible on their colored fills (green-on-green would vanish).
   Also !important + higher specificity so it wins the tie against .msym above. */
.buttons .msym{ color:inherit !important; }

/* Long dynamic strings (player names, found words): fitText() shrinks the
   font to fit one line; this class guarantees no wrap even below the 60%
   shrink floor. */
.fit-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* graceful tail if the 60% shrink floor still overflows */
    display: block;
    max-width: 100%;
    min-width: 0;
}

/* General Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Google Sans', Arial, sans-serif;
}

/* Opponent word notification animations */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

/* Mobile portrait layout is handled exclusively below in the DEVVIT-AWARE section
   using aspect-ratio detection — no max-width breakpoints needed */

/* Fix desktop resize reversion */
/* Fix desktop resize reversion */
html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #1d2428;
    color: #fff;
}

/* Base container — responsive scaling on desktop, fills available height up to 860px */
.container {
    width: 100%;
    max-width: 1280px;
    height: min(calc(100vh - 24px), 860px);
    min-height: 480px;
    background-color: rgba(29, 36, 40, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
    padding: 12px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    z-index: 10;
}

/* ========================================
   ANIMATED BACKGROUND
   ======================================== */
.animated-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
    /* Behind container */
}

.circles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.circles li {
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
    /* Round from the start so the keyframes only touch transform + opacity —
       both GPU-compositable, so the drift costs no repaints. Animating
       border-radius (the old behavior) forced a full repaint every frame. */
    border-radius: 50%;
    will-change: transform, opacity;
    animation: animate 25s linear infinite;
    bottom: -150px;
}

/* Paused by game.js when the tab/webview is hidden (phone asleep, scrolled away). */
.motion-paused .circles li {
    animation-play-state: paused;
}

/* Removed entirely on the game screen (body.in-game): display:none releases the
   compositor layers, unlike pause which would leave frozen dots showing through
   the translucent game columns. Retained on lobby/end for ambiance. */
.in-game .circles {
    display: none;
}

/* Respect the OS "reduce motion" setting and give a manual kill switch. */
@media (prefers-reduced-motion: reduce) {
    .circles {
        display: none;
    }
}

.circles li:nth-child(1) {
    left: 25%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}

.circles li:nth-child(2) {
    left: 10%;
    width: 20px;
    height: 20px;
    animation-delay: 2s;
    animation-duration: 12s;
}

.circles li:nth-child(3) {
    left: 70%;
    width: 20px;
    height: 20px;
    animation-delay: 4s;
}

.circles li:nth-child(4) {
    left: 40%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 18s;
}

.circles li:nth-child(5) {
    left: 65%;
    width: 20px;
    height: 20px;
    animation-delay: 0s;
}

.circles li:nth-child(6) {
    left: 75%;
    width: 110px;
    height: 110px;
    animation-delay: 3s;
}

/* Cap at 6 drifting circles — enough for the effect, lighter on weak GPUs. */
.circles li:nth-child(n+7) {
    display: none;
}

.circles li:nth-child(7) {
    left: 35%;
    width: 150px;
    height: 150px;
    animation-delay: 7s;
}

.circles li:nth-child(8) {
    left: 50%;
    width: 25px;
    height: 25px;
    animation-delay: 15s;
    animation-duration: 45s;
}

.circles li:nth-child(9) {
    left: 20%;
    width: 15px;
    height: 15px;
    animation-delay: 2s;
    animation-duration: 35s;
}

.circles li:nth-child(10) {
    left: 85%;
    width: 150px;
    height: 150px;
    animation-delay: 0s;
    animation-duration: 11s;
}

@keyframes animate {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }

    100% {
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
    }
}

/* Screen Management */
.screen {
    display: none;
    flex-direction: column; /* applies when JS flips display to flex */
    width: 100%;
    height: 100%;
    min-height: 0;
}

.screen.active {
    display: flex;
    flex-direction: column;
}

/* Game Screen Layout */
.game-screen {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Header Area */
.header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    flex-shrink: 0;
    /* Don't shrink header */
    /* Don't shrink header */
    padding: 0 4px;
}

.header-column {
    flex: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Header Center Controls (Name + Audio) */
.center-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: -8px;
    /* Tighter spacing */
    margin-bottom: 2px;
}

.center-controls .player-name-display {
    font-size: 14px;
    color: #ffd700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
    /* Limit width to prevent overflow */
    text-align: center;
}

/* Sound Toggle: Move to absolute top-right */
.center-controls .sound-toggle {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    /* Slightly larger for touch */
    color: rgba(255, 255, 255, 0.7);
    padding: 8px;
    /* Larger hit area */
    transition: color 0.2s;
    z-index: 20;
}

.center-controls .sound-toggle:hover {
    color: #fff;
}

/* Header Columns Alignment */
.header-column.header-left,
.header-column.header-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* Center everything horizontally */
    text-align: center;
    gap: 3px;
}

.header-column.header-left .score-group,
.header-column.header-right .score-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

/* Ensure text inside is centered */
.header-column.header-left p,
.header-column.header-right p {
    margin: 0;
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.header-column.header-left span,
.header-column.header-right span {
    font-size: 20px;
    font-weight: bold;
    color: #fff;
    line-height: 1;
}

/* Remove old specific alignments */
.header-column:first-child {
    align-items: center;
    /* Override previous left-align */
    text-align: center;
}

.header-column:last-child {
    align-items: center;
    /* Override previous right-align */
    text-align: center;
}

.header-column p {
    font-size: 12px;
    color: #aaa;
    margin: 0;
    line-height: 1.2;
}

.header-column span {
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    line-height: 1.2;
}

/* Clean up old header-right specific styles */
/* .header-column.header-right rules removed */
/* .player-name-display rules removed (now in .center-controls) */
/* .header-controls rules removed (now in .center-controls) */

/* Clean up sound toggle absolute positioning */
/* .header-column.header-right positioning removed */
/* .header-controls positioning removed */

.header-column.title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

/* Logo handles tile via img tag now */

/* Game Logo in Header */
.game-logo {
    height: 48px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    display: block;
}

.header-column.title .time-left {
    font-size: 14px;
    color: #eac548;
    font-weight: bold;
}

/* Remove progress bar styles */
.progress-container {
    display: none;
}

/* Game Columns Layout */
.game-columns {
    display: flex;
    gap: 8px;
    flex: 1;
    min-height: 0;
    width: 100%;
}

/* Column Styling */
.column {
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 5px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.column:first-child,
.column:last-child {
    flex: 1;
}

.column.center {
    flex: 2;
}

/* Player-moment message banner: lobby/end only, collapses to nothing when
   there's no message (empty = no gap, per spec). Theme-aware: dark bg by
   default (matches the game's permanent dark canvas), lighter overrides for
   a light OS/host theme. */
.player-message {
    min-height: 36px;
    margin-bottom: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #f0f0f0;
    font-size: 14px;
    line-height: 1.3;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.player-message[hidden] {
    display: none;
}

.player-message.pm-champion {
    background-color: rgba(234, 197, 72, 0.16);
    border-color: rgba(234, 197, 72, 0.5);
    color: #eac548;
}

.player-message.pm-win,
.player-message.pm-best {
    background-color: rgba(1, 164, 132, 0.16);
    border-color: rgba(1, 164, 132, 0.5);
    color: #01e0b6;
}

.player-message.pm-info {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
}

.player-message.pm-nudge {
    background-color: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
    color: #a8a8a8;
}

@media (prefers-color-scheme: light) {
    .player-message {
        background-color: rgba(0, 0, 0, 0.05);
        border-color: rgba(0, 0, 0, 0.1);
        color: #222;
    }
    .player-message.pm-nudge {
        color: #555;
    }
}

/* Section Headers — Barlow Condensed for column headings */
.column h2 {
    font-family: 'Barlow Condensed', Arial, sans-serif;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    /* Move counts below title */
    align-items: flex-start;
    justify-content: center;
    margin-bottom: 10px;
    line-height: 1.2;
}

.game-screen .column:first-child h2,
.game-screen .column:last-child h2 {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: flex-start; /* keep title hugging its left icon */
    gap: 2px 4px;
    text-align: left;
}
/* Tighten the icon↔title gap (the global .msym margin-right made it too wide
   on top of the flex gap). */
.game-screen .column:first-child h2 .msym,
.game-screen .column:last-child h2 .msym {
    margin-right: 0;
}
/* Count ("| N Players" / "| N Words") wraps to its own line under the headline
   (was inline-right, which clipped) and is centered across the panel. */
.game-screen .column:first-child h2 span:not(.msym),
.game-screen .column:last-child h2 span:not(.msym) {
    flex-basis: 100%;
    text-align: center;
}

.column h2 span {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 0;
    /* Remove padding as it's own line now */
    background-color: transparent;
    /* Remove background */
    border-radius: 0;
    color: #888;
    font-family: 'Arial Narrow', Arial, sans-serif;
    margin-top: 2px;
}

/* Game Area - uses all available height in center column */
.game-area {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.word-display {
    position: relative;
    background-color: #333;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    border-radius: 5px;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.word-display.feedback[data-type="error"] {
    animation: shake 0.5s ease-in-out;
    background-color: rgba(255, 82, 82, 0.2);
    color: #ff5252;
}

.word-display.feedback[data-type="warning"] {
    background-color: rgba(234, 197, 72, 0.2);
    color: #d93900;
}

.word-display.feedback[data-type="success"] {
    background-color: rgba(123, 170, 111, 0.2);
    color: #01a484;
}

@keyframes valid-pop {
    0% { transform: scale(1); }
    40% { transform: scale(1.08); }
    100% { transform: scale(1); }
}

.word-display.valid {
    animation: valid-pop 0.35s ease;
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    20%,
    60% {
        transform: translateX(-5px);
    }

    40%,
    80% {
        transform: translateX(5px);
    }
}

.grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 4px;
    margin: 4px 0;
    min-height: 0;
    /* Critical: allows grid to shrink within flex */
}

.tile {
    position: relative;
    background-color: #1d2428;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    font-family: 'Arial Narrow', Arial, sans-serif;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s ease;
    user-select: none;
    min-height: 0;
    /* Allow grid rows to size them */
}

.tile .points {
    position: absolute;
    bottom: 2px;
    right: 4px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.7);
}

/* Change hover state to only apply while being pressed */
.tile:active {
    background-color: #1d2428;
}

.tile.active {
    background-color: var(--green);
}

.tile.clicked {
    animation: tileClick 0.2s ease;
}

@keyframes tileClick {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(0.9);
    }

    100% {
        transform: scale(1);
    }
}

/* Buttons */
.buttons {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-shrink: 0;
    padding: 6px 0;
}

.buttons button {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 14px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    background-color: #1a2327;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.buttons button:hover {
    background-color: #2c373d;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.buttons button:active {
    transform: translateY(0) scale(0.97);
    box-shadow: none;
}

/* Specific button colors */
.buttons .submit {
    background-color: #01a484;
}

.buttons .submit:hover {
    background-color: #02c29c;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(1, 164, 132, 0.4);
}

.buttons .clear {
    background-color: #d93900;
}

.buttons .clear:hover {
    background-color: #ff4400;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(217, 57, 0, 0.4);
}

.buttons .shuffle {
    background-color: #eac548;
    color: #0e1113;
}

.buttons .shuffle:hover {
    background-color: #ffd700;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(234, 197, 72, 0.4);
}

/* Words List */
.words-list {
    height: calc(100% - 40px);
    /* No scroll — fitListNoScroll() clips to fit and shows "+N more words"
       (Devvit featuring prohibits inline-webview scrolling). */
    overflow: hidden;
    padding-right: 5px;
}

.word-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 8px;
    margin-bottom: 4px;
    background-color: #1e1e1e;
    border-radius: 4px;
    font-size: 14px;
}

/* New Words-Found rows rise up from below (B.9); scoped to .new so re-sorting
   existing rows doesn't re-animate them. */
@keyframes word-rise {
    from { transform: translateY(12px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
.word-item.new {
    animation: word-rise 0.3s ease;
}

.word-item .word {
    color: #fff;
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
}

/* Small "who found it" subtext under the word (see game.js addWordToList /
   addOpponentWordToList), styled like the "Score:" subtext on the standings. */
.finder-label {
    font-size: 10px;
    color: #8a949b;
    font-style: normal;
    font-weight: 500;
}

.word-item.opponent-word .finder-label {
    color: #eac548;
}

.word-item .score {
    color: #01a484;
    font-weight: bold;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Opponent word styling in Words Found column */
.word-item.opponent-word {
    background-color: #1a1a2e;
    border-left: 2px solid #eac548;
}

.word-item.opponent-word .word {
    font-style: italic;
    color: #ccc;
}

.word-item.opponent-word .score {
    color: #eac548;
}

.opponent-label {
    font-size: 10px;
    color: #eac548;
    font-style: normal;
    font-weight: 600;
}

/* Scrollbar styling */
.words-list::-webkit-scrollbar {
    width: 6px;
}

.words-list::-webkit-scrollbar-track {
    background: #1e1e1e;
    border-radius: 3px;
}

.words-list::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 3px;
}

.words-list::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Leaderboard Styles */
/* Leaderboard Styles */
.leaderboard-table {
    margin-top: 5px;
}

.table-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #191f22;
}

.player-info {
    display: flex;
    flex-direction: row;
    /* Put name and score on same line */
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.player-name {
    font-family: 'Arial Narrow', Arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
}

/* Rank Icons: Remove skew */
.rank-icon {
    display: inline-block;
    width: 16px;
    text-align: center;
    margin-right: 4px;
    font-weight: bold;
    font-style: normal;
    /* Fix skew */
}

/* Remove colored score on right */
.score-right {
    display: none;
}

.score {
    font-family: 'Arial Narrow', Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #01a484;
    /* Use green color for bottom score */
}

/* Progress Bar Animation */
@keyframes countdown {
    from {
        width: 100%;
        background: linear-gradient(to right, #01a484, #01a484);
    }

    to {
        width: 0%;
        background: linear-gradient(to right, #d93900, #d93900);
    }
}

.progress-bar {
    animation: countdown 50s linear forwards;
}

/* Word Display Area */
.word-display {
    background-color: #333;
    height: 53px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    border-radius: 5px;
    margin-bottom: 0px;
}

/* Tile Active State */
.tile.active {
    background-color: var(--green);
    transform: scale(0.95);
}

.tile:hover {
    background-color: var(--green);
}

/* Animation Styles */
@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    75% {
        transform: translateX(5px);
    }
}

.tile.shake {
    animation: shake 0.2s ease-in-out;
}

.tile {
    transition: all 0.2s ease;
}

.tile.active {
    background-color: var(--green);
    transform: scale(0.95);
}

/* Word Addition Animation */
@keyframes slideIn {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.word {
    animation: slideIn 0.3s ease-out;
}

/* Game Message Animation */
@keyframes fadeInOut {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    20% {
        opacity: 1;
        transform: translateY(0);
    }

    80% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(-20px);
    }
}

.game-message {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    animation: fadeInOut 1.5s ease-in-out forwards;
    z-index: 100;
}

/* Word Score Display */
.word-score {
    color: #01a484;
    font-size: 10px;
    margin-left: 4px;
}

/* Game Area Position Context */
.game-area {
    position: relative;
}

/* Improved Word Display */
.word-display {
    position: relative;
    overflow: hidden;
}

.word-display::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: #01a484;
    transform-origin: left;
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.word-display:not(:empty)::after {
    transform: scaleX(1);
}

/* Word Display Feedback Styling */
.word-display {
    position: relative;
    background-color: #333;
    height: 53px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    border-radius: 5px;
    margin-bottom: 0px;
    transition: all 0.3s ease;
}

.word-display.feedback {
    background-color: #2c2c2c;
    color: #01a484;
    /* Success color */
}

/* Different colors for different feedback types */
.word-display.feedback[data-type="error"] {
    color: #ff5252;
    /* Error color */
}

.word-display.feedback[data-type="success"] {
    color: #01a484;
    /* Success color */
}

.word-display.feedback[data-type="warning"] {
    color: #d93900;
    /* Warning color */
}

/* Lobby & End Screen Header */
.screen-header {
    text-align: center;
    margin-bottom: 15px;
}

.screen-header h1 {
    font-size: 32px;
    font-weight: bold;
}

/* Lobby & End Screen Content */
.screen-content {
    display: flex;
    gap: 10px;
    height: calc(100% - 60px);
}

/* Column Styling (shared with game screen) */
/* Column Styling (shared with game screen) */
.lobby-screen .column:nth-child(1),
.end-screen .column:nth-child(1),
.lobby-screen .column:nth-child(3),
.end-screen .column:nth-child(3) {
    flex: 3;
    /* 30% */
}

.lobby-screen .column:nth-child(2),
.end-screen .column:nth-child(2) {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 4;
    /* 40% */
}

.lobby-screen .radial-progress {
    width: 120px;
    height: 120px;
    margin: 0 auto;
    position: relative;
    background: conic-gradient(#01a484 var(--progress), #444 0deg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.lobby-screen .column h2 span {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    background-color: #191f22;
    border-radius: 3px;
    color: #ddd;
    font-family: 'Arial Narrow', Arial, sans-serif;
}

/* Lobby Screen Specific */
/* Lobby Screen Specific */
.joining-list {
    margin-top: 10px;
}

.joining-player {
    display: flex;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #191f22;
    /* Long names shrink via fitText() — never wrap or break mid-word. */
}

.countdown-timer {
    text-align: center;
    margin: 20px 0;
}

.radial-progress {
    width: 120px;
    height: 120px;
    margin: 0 auto;
    position: relative;
    background: conic-gradient(#01a484 var(--progress), #444 0deg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

/* End Screen Specific */
.final-standings {
    margin-top: 10px;
}

.game-stats {
    margin-top: 10px;
}

.top-words {
    margin-top: 10px;
}

.top-word-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #444;
}

/* Countdown Timer */
.countdown-timer {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
}

.radial-progress {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: conic-gradient(#01a484 var(--progress, 360deg), #444 0deg);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32px;
}

/* Instructions */
.instructions {
    margin-top: 20px;
}

.instructions p {
    margin: 10px 0;
    font-size: 14px;
}

/* Multipliers */
.multipliers {
    margin-top: 20px;
}

.multipliers p {
    margin: 10px 0;
    font-size: 14px;
}

/* Score Animation */
.score-popup {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #d93900;
    font-size: 24px;
    font-weight: bold;
    animation: scorePopup 1s ease-out forwards;
    pointer-events: none;
}

@keyframes scorePopup {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -150%);
    }
}

/* Center column alignment for lobby and end screens */
.lobby-screen .column:nth-child(2),
.end-screen .column:nth-child(2) {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Countdown timer container */
.countdown-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px 0;
}

/* How to play section */
.how-to-play {
    width: 100%;
    text-align: center;
}

.how-to-play h2 {
    margin-bottom: 15px;
}

.how-to-play p {
    margin: 8px 0;
}

/* Game statistics section */
/* Game statistics section */
.game-statistics {
    width: 100%;
    text-align: center;
    flex: 1;
    /* Allow auto width expansion */
}

.game-statistics h2 {
    margin-bottom: 15px;
}

/* Next game countdown */
.next-game {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px 0;
}

.next-game h3 {
    margin-bottom: 10px;
}

/* Radial progress container */
.radial-progress {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 15px 0;
}

@keyframes flash {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.word-display.flash {
    animation: flash 0.5s ease-in-out infinite;
}

/* Overflow marker appended by fitListNoScroll() when a list is clipped to fit
   the panel without scrolling — e.g. "+7 more playing". */
.more-row {
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: #9aa4a8;
    /* Thin — it must cost almost no vertical space so it doesn't crowd out the
       rows it's summarizing (mobile panels are short). */
    padding: 2px 4px 0;
    line-height: 1.35;
    flex: 0 0 auto;
}

/* Lobby Screen - Players Joining List */
.joining-list {
    margin-top: 10px;
    height: calc(100% - 40px);
    /* No scroll — fitListNoScroll() clips to fit and shows "+N more" (featuring). */
    overflow: hidden;
}

.joining-player {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    margin-bottom: 4px;
    background-color: #191f22;
    border-radius: 4px;
    font-size: 14px;
}

.joining-player .player-name {
    color: #fff;
    font-weight: 600;
    flex: 1;
    min-width: 0;
    margin-right: 8px;
}

.joining-player .status {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 3px;
    flex-shrink: 0;
    white-space: nowrap;
}

.joining-player .status:matches([status="ready"]) {
    color: #01a484;
    background-color: rgba(123, 170, 111, 0.2);
}

.joining-player .status:matches([status="joining"]) {
    color: #d93900;
    background-color: rgba(234, 197, 72, 0.2);
}

/* Main Game Screen - Leaderboard */
.leaderboard-table {
    margin-top: 5px;
    height: calc(100% - 40px);
    overflow-y: auto;
}

.table-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 8px;
    margin-bottom: 4px;
    background-color: #191f22;
    border-radius: 4px;
    font-size: 14px;
}

.table-row .player-name {
    flex: 2;
    color: #fff;
    font-weight: 600;
}

.table-row .word-count {
    flex: 1;
    text-align: center;
    color: #888;
}

.table-row .score {
    flex: 1;
    text-align: right;
    color: #01a484;
    font-weight: bold;
}

/* End Screen - Final Standings */
.final-standings {
    margin-top: 10px;
    height: calc(100% - 40px);
    /* No scroll — fitListNoScroll() clips to fit and shows "+N more" (featuring). */
    overflow: hidden;
}

.standings-row {
    display: flex;
    align-items: flex-start;
    padding: 8px 10px;
    margin-bottom: 6px;
    background-color: #191f22;
    border-radius: 4px;
}

.standings-row .rank {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #191f22;
    border-radius: 50%;
    color: #fff;
    font-weight: bold;
    margin-right: 8px;
}

.standings-row .player-content {
    flex: 1;
    display: flex;
    justify-content: space-between;
}

/* Modified to include name and words found */
.standings-row .player-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.standings-row .player-name {
    color: #fff;
    font-weight: 600;
    font-size: 12px;
}

.standings-row .words-found {
    display: block;
    color: #888;
    font-size: 10px;
}

/* Score now stands alone on the right */
.standings-row .final-score {
    color: #01a484;
    font-weight: bold;
    font-size: 14px;
    align-self: center;
}

/* Top 3 Rankings Special Styling */
.standings-row:nth-child(1) .rank {
    background-color: #ffd700;
    /* Gold */
    color: #333;
}

.standings-row:nth-child(2) .rank {
    background-color: #c0c0c0;
    /* Silver */
    color: #333;
}

.standings-row:nth-child(3) .rank {
    background-color: #cd7f32;
    /* Bronze */
    color: #333;
}

/* Scrollbar styling for all lists */
.joining-list::-webkit-scrollbar,
.leaderboard-table::-webkit-scrollbar,
.final-standings::-webkit-scrollbar {
    width: 6px;
}

.joining-list::-webkit-scrollbar-track,
.leaderboard-table::-webkit-scrollbar-track,
.final-standings::-webkit-scrollbar-track {
    background: #1e1e1e;
    border-radius: 3px;
}

.joining-list::-webkit-scrollbar-thumb,
.leaderboard-table::-webkit-scrollbar-thumb,
.final-standings::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 3px;
}

.joining-list::-webkit-scrollbar-thumb:hover,
.leaderboard-table::-webkit-scrollbar-thumb:hover,
.final-standings::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Header countdown timer and progress */
.header-column.title .time-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    width: 100%;
    max-width: 120px;
}

.header-column.title .mini-progress {
    width: 100%;
    height: 3px;
    background-color: #191f22;
    border-radius: 2px;
    overflow: hidden;
}

.header-column.title .mini-progress-bar {
    height: 100%;
    width: 100%;
    background-color: #eac548;
    border-radius: 2px;
    transition: width 1s linear;
}

.header-column.title .mini-progress-bar.warning {
    background-color: #d93900;
}

/* End Screen Stats */
.player-stats {
    margin: 0px 0;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #2c373d;
}

.top-words {
    margin-top: 15px;
}

.word-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}

.word-row .word {
    color: #eac548;
    font-weight: bold;
}

.word-row .points {
    color: #01a484;
    font-weight: bold;
}

/* Finder attribution shown between the word and its score in Top Words. */
.word-row .finder {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    color: #8a949a;
    font-size: 11px;
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 6px;
}

/* Username header above the end-screen stats (replaces "Your …" framing). */
.stats-username {
    text-align: center;
    font-weight: bold;
    color: #eac548;
    font-size: 14px;
    margin-bottom: 8px;
}

/* Small muted tag under the name when the card shows the round's top scorer
   (you watched instead of played). */
.stats-subtitle {
    text-align: center;
    font-size: 11px;
    letter-spacing: 0.04em;
    color: #9aa0a6;
    margin-top: -4px;
    margin-bottom: 8px;
}

/* End Screen Stats */
.game-stats {
    margin: 20px 0;
    padding: 15px;
    border-radius: 5px;
}

.stat-item {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: baseline;
    padding: 6px 0;
    border-bottom: 1px solid #2c373d;
    gap: 10px;
    /* Guaranteed gap so a long value (e.g. "MAILED") can't collide with its
       label the way space-between with a 2px gap allowed. */
}

.stat-item:last-child {
    border-bottom: none;
}

.stat-label {
    color: #888;
    font-size: 13px;
    white-space: nowrap;
    flex: 0 0 auto;
}

.stat-value {
    color: #fff;
    font-weight: bold;
    font-size: 13px;
    text-align: right;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Final Standings Rows */
.standings-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    border-bottom: 1px solid #2c373d;
    background-color: rgba(0, 0, 0, 0.2);
    margin-bottom: 4px;
    border-radius: 4px;
}

.instructions {
    margin-top: 0px;
    font-size: 0.9em;
    color: #ccc;
    background: rgba(0, 0, 0, 0.2);
    padding: 10px;
    border-radius: 8px;
}

.standings-row .rank {
    font-size: 16px;
    font-weight: bold;
    color: #eac548;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}

.standings-row .player-content {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    /* Ensure text wraps */
}

.standings-row .player-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

.standings-row .player-name {
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    /* Long names shrink via fitText() — never wrap. */
}

.standings-row .words-found {
    font-size: 11px;
    color: #888;
}

.standings-row .final-score {
    font-size: 18px;
    font-weight: bold;
    color: #01a484;
    margin-left: 10px;
    flex-shrink: 0;
}

.top-words {
    margin-top: 20px;
    padding: 15px;
    background-color: #1d2428;
    border-radius: 5px;
}

.top-words h3 {
    color: #eac548;
    font-size: 16px;
    margin-bottom: 10px;
}

.word-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #2c373d;
}

.word-row:last-child {
    border-bottom: none;
}

.word-row .word {
    color: #01a484;
    font-weight: bold;
}

.word-row .points {
    color: #eac548;
    font-size: 14px;
}

/* Next Game Section */
.next-game {
    text-align: center;
    margin: 20px 0;
    padding: 15px;
    background-color: #1d2428;
    border-radius: 5px;
}

.next-game h3 {
    color: #eac548;
    font-size: 16px;
    margin-bottom: 10px;
}

.next-game .countdown {
    color: #01a484;
    font-size: 24px;
    font-weight: bold;
}

/* Highlight special stats */
.stat-item .stat-value.highlight {
    color: #01a484;
}

/* Animation for countdown */
@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

.next-game .countdown {
    animation: pulse 1s infinite;
}

/* Responsive adjustments */
@media (max-width: 768px) {

    .game-stats,
    .top-words,
    .next-game {
        margin: 10px 0;
        padding: 10px;
    }

    .stat-item,
    .word-row {
        padding: 6px 0;
    }

    .stat-label,
    .stat-value {
        font-size: 12px;
    }

    .next-game .countdown {
        font-size: 20px;
    }
}

/* End Screen Layout Adjustments */
.end-screen .game-stats {
    margin: 15px 0;
    padding: 12px;
    border-radius: 5px;
}

.end-screen .next-game {
    margin: 15px 0;
    padding: 12px;
}

.end-screen .column h2 {
    margin-bottom: 10px;
    font-size: 14px;
    color: #fff;
}

.end-screen .top-words {
    height: calc(100% - 40px);
    overflow-y: auto;
    margin-top: 0;
    padding: 0;
    background-color: transparent;
}

.end-screen .word-row {
    padding: 8px;
    margin-bottom: 4px;
    background-color: #1d2428;
    border-radius: 4px;
    border: none;
}

/* Common Screen Styles */
.screen h1 {
    font-size: 20px;
    color: #fff;
    font-weight: bold;
}

.screen h2 {
    font-family: 'Barlow Condensed', Arial, sans-serif;
    font-size: 14px;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.screen h3 {
    font-size: 14px;
    color: #eac548;
    margin-bottom: 10px;
}

/* Column Headers with Player Count */
.column h2 span {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    background-color: #191f22;
    border-radius: 3px;
    color: #ddd;
    font-family: 'Arial Narrow', Arial, sans-serif;
}

/* Countdown Timer Styles */
.countdown-timer,
.next-game {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px 0;
}

.radial-progress {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: #01a484;
    font-weight: bold;
    background: #1d2428;
    position: relative;
    margin: 10px 0;
}

.radial-progress::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(#01a484 var(--progress), transparent 0deg);
    mask: radial-gradient(transparent 55%, white 56%);
    -webkit-mask: radial-gradient(transparent 55%, white 56%);
}

/* Instructions and Multipliers */
.instructions p,
.multipliers p {
    font-size: 14px;
    color: #888;
    margin: 8px 0;
}

/* How To Play bullets: left-aligned icon+text on web too (the .column.center
   wrapper is center-aligned; override here). Mirrors the mobile chip layout. */
.lobby-screen .instructions p {
    display: flex;
    align-items: center;
    text-align: left;
}

/* Game Stats Standardization */
.game-stats .stat-item {
    padding: 6px 0;
}

.game-stats .stat-label {
    font-size: 13px;
    color: #888;
}

.game-stats .stat-value {
    font-size: 13px;
    color: #fff;
    font-weight: bold;
}

/* Words List Standardization */
.words-list .word-item,
.top-words .word-row,
.joining-list .joining-player {
    padding: 8px;
    margin-bottom: 4px;
    background-color: #1d2428;
    border-radius: 4px;
    font-size: 14px;
}

/* Score and Points Colors */
.score,
.points {
    color: #01a484;
    font-weight: bold;
}

/* Status Colors */
.status[status="ready"] {
    color: #01a484;
}

.status[status="joining"] {
    color: #eac548;
}

/* Next Game Section with Radial Progress */
.next-game {
    text-align: center;
    padding: 15px;
    background-color: #1d2428;
    border-radius: 5px;
}

.next-game h3 {
    color: #eac548;
    font-size: 14px;
    margin-bottom: 10px;
}

.next-game .countdown {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: #01a484;
    font-weight: bold;
    background: #191f22;
    position: relative;
}

.next-game .countdown::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(#01a484 var(--progress), transparent 0deg);
    mask: radial-gradient(transparent 55%, white 56%);
    -webkit-mask: radial-gradient(transparent 55%, white 56%);
}

/* Animation for Countdown */
@keyframes countdown-progress {
    from {
        --progress: 360deg;
    }

    to {
        --progress: 0deg;
    }
}

.next-game .countdown::before {
    animation: countdown-progress 10s linear forwards;
}

/* Consistent Container Backgrounds */
.column {
    background-color: rgba(0, 0, 0, 0.4);
}

.game-stats,
.top-words,
.next-game,
.joining-list,
.leaderboard-table,
.final-standings {
    background-color: #1d2428;
    border-radius: 5px;
}

.icon {
    display: none;
    /* Move from link rel="icon" */
}

/* Add any other inline styles found */

/* Unified Radial Progress Styling */
.radial-progress-container {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 10px auto;
    padding: 10px;
    background-color: #1d2428;
    border-radius: 5px;
    width: 100%;
}

.radial-progress {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: #fff;
    font-weight: bold;
    background: #191f22;
    position: relative;
    margin: 10px auto;
    z-index: 1;
}

.radial-progress::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(#01a484 var(--progress), transparent 0deg);
    mask: radial-gradient(transparent 55%, white 56%);
    -webkit-mask: radial-gradient(transparent 55%, white 56%);
    z-index: 0;
}

/* Remove specific screen styles since we want them to look the same */
.lobby-screen .radial-progress::before,
.end-screen .radial-progress::before {
    background: conic-gradient(#01a484 var(--progress), transparent 0deg);
}

/* Unified heading styles for both screens */
.radial-progress-container h2,
.radial-progress-container h3 {
    color: #eac548;
    font-size: 14px;
    margin-bottom: 10px;
}

/* ========================================
   SPLASH / LOADING SCREEN
   ======================================== */
.splash-screen {
    position: fixed;
    inset: 0;
    background: #090b0d;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.splash-screen.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Container for adaptive backgrounds */
.splash-backgrounds {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
}

/* Individual Background Image - Stretch/Cover */
.splash-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Fill screen, crop edges if ratio mismatch */
    display: none;
    /* Toggled by media queries */
}

.splash-content {
    text-align: center;
    position: relative;
    /* Ensure z-index works locally if needed, but absolute is used later */
    z-index: 99999;
}

.splash-title {
    font-family: 'Google Sans', Arial, sans-serif;
    font-size: 36px;
    font-weight: bold;
    color: #fff;
    letter-spacing: 4px;
    margin-bottom: 8px;
}

.splash-subtitle {
    color: #888;
    font-size: 14px;
    margin-bottom: 24px;
    letter-spacing: 2px;
}

.splash-loader {
    width: 200px;
    height: 3px;
    background: #1d2428;
    border-radius: 3px;
    overflow: hidden;
    margin: 0 auto 12px;
}

.loader-bar {
    width: 30%;
    height: 100%;
    background: linear-gradient(90deg, #01a484, #eac548);
    border-radius: 3px;
    animation: loaderSlide 1.2s ease-in-out infinite;
}

@keyframes loaderSlide {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(400%);
    }
}

.splash-status {
    color: #666;
    font-size: 12px;
}

/* Custom first-screen CTA, revealed when loading finishes. Green, prominent,
   sits in the same bottom-center splash pill the loader used (clear of the
   WORD MAESTRO art). No `display` here — so the [hidden] attribute still hides
   it until JS reveals it. Click also unlocks webview audio (global gesture). */
.auth-card {
    background: rgba(22, 32, 31, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 18px 24px;
    margin: 16px auto;
    max-width: 320px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.auth-card[hidden] {
    display: none !important;
}

.auth-identity {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.auth-badge-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #888;
}

.auth-player-name {
    font-size: 16px;
    font-weight: 700;
    color: #eac548;
}

.auth-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.auth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 10px 16px;
    border-radius: 8px;
    border: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.google-auth-btn {
    background: #ffffff;
    color: #3c4043;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}

.google-auth-btn:hover {
    background: #f8f9fa;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transform: translateY(-1px);
}

.guest-auth-btn {
    background: rgba(255, 255, 255, 0.08);
    color: #d1d5db;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.guest-auth-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

.splash-play {
    font-family: 'Google Sans', Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #fff;
    background: #01a484;
    border: none;
    border-radius: 8px;
    padding: 14px 44px;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(1, 164, 132, 0.5);
    transition: transform 0.12s ease, background 0.15s ease;
    animation: playPulse 1.6s ease-in-out infinite;
}
.splash-play:hover { background: #01c39c; }
.splash-play:active { transform: scale(0.96); }
@keyframes playPulse {
    0%, 100% { box-shadow: 0 4px 16px rgba(1, 164, 132, 0.45); }
    50%      { box-shadow: 0 4px 28px rgba(1, 164, 132, 0.9); }
}
@media (prefers-reduced-motion: reduce) {
    .splash-play { animation: none; }
}

/* ========================================
   PLAYER NAME & SOUND TOGGLE
   ======================================== */
.header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.player-name-display {
    font-size: 10px;
    color: #eac548;
    font-weight: 600;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#player-name {
    color: var(--green);
}

.header-controls {
    display: flex;
    gap: 4px;
    margin-bottom: 2px;
}

.sound-toggle {
    background: none;
    border: 1px solid #333;
    border-radius: 4px;
    color: #fff;
    font-size: 12px;
    padding: 2px 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1;
}

.sound-toggle:hover {
    background: #1d2428;
    border-color: #eac548;
}

.sound-toggle.muted {
    opacity: 0.4;
}

/* ========================================
   BUTTONS TRANSITION BASE
   ======================================== */
.buttons button {
    transition: all 0.15s ease;
}

/* ========================================
   LOBBY SCREEN FILL-TO-BOTTOM (A.W.2)
   ======================================== */
.lobby-screen .game-columns {
    align-items: stretch;
}

.lobby-screen .joining-list,
.lobby-screen .multipliers,
.lobby-screen .instructions,
.lobby-screen .radial-progress-container {
    flex: 1 1 auto;
    min-height: 0;
}

.lobby-screen .multipliers {
    padding-left: 8%;
}

/* ========================================
   UNIFIED RESPONSIVE LAYOUT (ASPECT-RATIO BASED)
   PORTRAIT: < 1:1 (Taller than square) -> Mobile Layout
   LANDSCAPE: >= 1:1 (Square or wider) -> Desktop/Table Layout
   ======================================== */

/* PORTRAIT MODE (Mobile / Narrow) */
@media (max-aspect-ratio: 99/100) {

    /* --- GLOBAL CONTAINER FIT --- */
    body {
        padding: 0;
        align-items: flex-start;
    }

    .container {
        width: 100%;
        height: 100%;
        max-height: 100vh;
        border-radius: 0;
        padding: 6px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    /* --- HIDE SOUND ICON (User Request) --- */
    .center-controls .sound-toggle {
        display: none !important;
    }

    /* --- HEADER COMPACTION --- */
    .header {
        flex-wrap: nowrap;
        margin-bottom: 4px;
        gap: 2px;
    }

    .header-column {
        min-width: 50px;
        flex: 1;
    }

    .header-column.title {
        flex: 2;
    }

    .header-column.title h1 {
        font-size: 13px;
        white-space: nowrap;
    }

    .header-column p {
        font-size: 9px;
    }

    .header-column span {
        font-size: 13px;
    }

    .game-logo {
        height: 36px;
    }

    /* --- MAIN COLUMN STACKING --- */
    .game-columns {
        flex-direction: column;
        gap: 4px;
        overflow: hidden;
        flex: 1;
        min-height: 0;
    }

    .column {
        width: 100%;
        flex: none;
        min-height: auto;
        margin-bottom: 0;
        /* Reset margin */
        background-color: rgba(0, 0, 0, 0.4);
    }

    /* --- GAME SCREEN LAYOUT --- */
    /* Words-found stays hidden during play (secondary on a small frame). */
    .game-screen .column:last-child {
        display: none !important;
    }

    /* Leaderboard: surfaced as a slim, horizontally-scrolling bar above the
       board so the live competition (issue #2's "essential info") is visible
       during play. The grid shrinks to make room. */
    .game-screen .column:first-child {
        display: block !important;
        order: -1;
        flex: 0 0 auto;
        background: transparent;
        padding: 0;
        margin: 0 0 3px;
        min-height: 0;
    }

    .game-screen .column:first-child > h2 {
        display: none;
    }

    .game-screen .leaderboard-table {
        height: auto;
        margin: 0;
        display: flex;
        flex-direction: row;
        gap: 4px;
        /* No horizontal scroll — inline-webview scrolling is prohibited, and the
           top-3 cap (below) makes the three rows fit the width outright. */
        overflow: hidden;
        padding-bottom: 2px;
    }

    /* Only the top 3 competitors on the in-game bar — many tiny, unreadable
       names scrolling sideways became three legible ones that split the width. */
    .game-screen .leaderboard-table .table-row:nth-child(n+4) {
        display: none;
    }

    .game-screen .leaderboard-table .table-row {
        flex: 1 1 0;
        min-width: 0;
        background: #1d2428;
        border-radius: 4px;
        padding: 4px 8px;
    }

    .game-screen .leaderboard-table .player-info {
        flex-direction: row;
        align-items: center;
        gap: 6px;
    }

    .game-screen .leaderboard-table .player-name {
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
        flex: 1 1 auto;
    }

    .game-screen .leaderboard-table .score {
        font-size: 14px;
        font-weight: bold;
        color: #eac548;
        flex: 0 0 auto;
    }

    .game-screen .column.center {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
    }

    .game-area {
        width: 100%;
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    .word-display {
        height: 40px;
        min-height: 40px;
        font-size: 20px;
        flex-shrink: 0;
        margin-bottom: 4px;
    }

    .grid {
        /* The webview is height-capped (~512px inline). Size the whole grid as
           a centered square derived from the remaining flex height, so the 4x4
           always fits and can never push the buttons off the frame. */
        flex: 1;
        min-height: 0;
        aspect-ratio: 1 / 1;
        width: auto;
        max-width: 100%;
        margin: 2px auto;
        gap: 3px;
        align-content: stretch;
    }

    .tile {
        font-size: 18px;
        min-height: 0;
        flex-shrink: 1;
        width: auto;
        /* No per-tile aspect-ratio: the grid is already square, so the 1fr
           rows/columns make each cell square without fighting the row sizing. */
    }

    .tile .points {
        font-size: 8px;
        right: 2px;
        bottom: 1px;
    }

    .buttons {
        flex-shrink: 0;
        padding: 4px 0;
        gap: 6px;
    }

    .buttons button {
        padding: 10px 14px;
        font-size: 13px;
    }

    /* --- LOBBY SCREEN LAYOUT (Q3d) ---
       Row 1: countdown (full width)
       Row 2: How To Play title + instructions as two standout columns
       Row 3: Players Joining | Scoring, side by side.
       .column.center uses display:contents so its countdown/title/instructions
       become direct grid items placeable independently. */
    .lobby-screen .game-columns {
        display: grid;
        grid-template-columns: 1fr 1fr;
        /* "message" row first: the lobby player-message MUST have a grid slot or
           it auto-flows to a bottom corner on mobile (the bug where "Back for
           more…" showed bottom-right). Collapses to 0 when the banner is hidden. */
        grid-template-areas:
            "message   message"
            "countdown countdown"
            "howtitle  howtitle"
            "howto     howto"
            "joining   scoring";
        grid-auto-rows: min-content;
        gap: 6px;
        overflow-y: auto;
        align-content: start;
    }

    .lobby-screen .column.center {
        display: contents;
    }

    .lobby-screen .player-message { grid-area: message; }

    .lobby-screen .column.center .radial-progress-container {
        grid-area: countdown;
    }

    .lobby-screen .column.center > h2 {
        grid-area: howtitle;
    }

    .lobby-screen .instructions {
        grid-area: howto;
    }

    .lobby-screen .column:first-child {
        grid-area: joining;
    }

    .lobby-screen .column:last-child {
        grid-area: scoring;
    }

    /* Countdown: compact full-width bar (label + ring on one line). */
    .lobby-screen .radial-progress-container {
        width: 100%;
        margin: 0;
        padding: 6px;
        background-color: #1d2428;
        border-radius: 5px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 12px;
        transform: none;
    }

    .lobby-screen .radial-progress-container h2 {
        font-size: 12px;
        margin: 0;
    }

    /* How To Play: two columns, each bullet a standout chip. */
    .lobby-screen .instructions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        padding: 6px;
        border-radius: 4px;
    }

    .lobby-screen .instructions p {
        margin: 0;
        padding: 6px 8px;
        font-size: 11px;
        border-radius: 4px;
        display: flex;
        align-items: center;
        gap: 8px;
        text-align: left;
    }

    .lobby-screen .joining-list,
    .lobby-screen .multipliers {
        max-height: 30vh;
        overflow-y: auto;
    }

    /* A.M.4: dark tile background on each joining-player row. Compact on mobile
       (short panel) so several players show instead of one + a "+N more". */
    .lobby-screen .joining-player {
        background-color: var(--tile);
        padding: 4px 8px;
        margin-bottom: 3px;
        font-size: 12px;
    }

    .lobby-screen h2 {
        font-size: 13px;
        margin: 4px 0;
    }

    .lobby-screen .multipliers p {
        font-size: 14px;
        margin: 0;
        padding: 2px 0;
    }

    /* --- END SCREEN LAYOUT (Q3 a–c) ---
       Row 1: countdown (full width, compact)
       Row 2: stats (full width — username on top, then two columns)
       Row 3: Final Standings | Top Words, side by side.
       .column.center uses display:contents so its stats/countdown wrappers
       become direct grid items placeable independently. */
    .end-screen .game-columns {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "message   message"
            "countdown countdown"
            "stats     stats"
            "standings topwords";
        grid-auto-rows: min-content;
        gap: 6px;
        overflow-y: auto;
        align-content: start;
    }

    .end-screen .column.center {
        display: contents;
    }

    .end-screen .player-message { grid-area: message; }
    .end-screen .next-game-wrapper { grid-area: countdown; }
    .end-screen .stats-wrapper { grid-area: stats; }
    .end-screen .column:first-child { grid-area: standings; }
    .end-screen .column:last-child { grid-area: topwords; }

    .end-screen .stats-wrapper,
    .end-screen .next-game-wrapper {
        width: 100%;
        min-width: 0;
        display: block;
    }

    /* Countdown: compact full-width bar (title + ring on one line). */
    .end-screen .next-game-wrapper .radial-progress-container {
        width: 100%;
        margin: 0;
        padding: 6px;
        background-color: #1d2428;
        border-radius: 5px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 12px;
    }

    .end-screen .next-game-wrapper h3 {
        font-size: 12px;
        margin: 0;
        text-align: center;
    }

    .radial-progress {
        width: 56px;
        height: 56px;
        font-size: 18px;
        margin: 0;
    }

    /* Stats: full width; username centered on top, two columns below
       (Total + Words left, Longest + Best right via column auto-flow). */
    .end-screen .game-stats {
        width: 100%;
        margin: 0;
        padding: 8px;
        background-color: rgba(0, 0, 0, 0.4);
        border-radius: 5px;
    }

    .end-screen .stats-username {
        font-size: 13px;
        margin-bottom: 6px;
    }

    .end-screen .stats-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-auto-flow: column;
        grid-template-rows: auto auto;
        column-gap: 14px;
        row-gap: 2px;
    }

    .end-screen .stats-grid .stat-item {
        border-bottom: none;
        padding: 3px 0;
    }

    .end-screen .stat-label { font-size: 11px; }
    .end-screen .stat-value { font-size: 12px; }

    /* Final Standings | Top Words side by side, each scrollable. */
    .end-screen .final-standings,
    .end-screen .top-words {
        max-height: 34vh;
        overflow-y: auto;
    }

    .end-screen .top-words .word-row {
        gap: 4px;
        padding: 5px 0;
        font-size: 12px;
    }

    .end-screen .top-words .finder {
        font-size: 10px;
        padding: 0 4px;
    }

}

/* ========================================
   SPLASH SCREEN (Reverted to v0.0.12 Logic)
   ======================================== */

/* Default: Square (fallback for near-square screens) */
.splash-bg.square {
    display: block !important;
}

.splash-bg.portrait,
.splash-bg.landscape {
    display: none !important;
}

/* Mobile Portrait (Tall) - Covers 9:16 and similar */
@media (max-aspect-ratio: 9/11) {
    .splash-bg.square {
        display: none !important;
    }

    .splash-bg.landscape {
        display: none !important;
    }

    .splash-bg.portrait {
        display: block !important;
    }
}

/* Landscape (Wide) - Covers 16:9 and similar */
@media (min-aspect-ratio: 11/9) {
    .splash-bg.square {
        display: none !important;
    }

    .splash-bg.portrait {
        display: none !important;
    }

    .splash-bg.landscape {
        display: block !important;
    }
}

.splash-content {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: #fff;
    z-index: 99999 !important;
    /* Force on top */
    background: rgba(0, 0, 0, 0.4);
    padding: 10px 20px;
    border-radius: 12px;
    backdrop-filter: blur(4px);
    width: auto;
    max-width: 90%;
}

/* LANDSCAPE MODE (Default / Desktop) - Implicitly handled by default styles,
   but we ensure splash screen logic matches. */

/* ==================================================================
   Countdown as a filling bar (lobby + end) — replaces the radial ring.
   The seconds number sits above; the bar fills left→right (empty at the
   start of the 10s phase → full at 0). --progress (0–100) is set on the
   container by setCountdownBar(). Scoped + specific enough to beat the
   earlier duplicate radial/container rules. Applies on desktop and mobile.
   ================================================================== */
.lobby-screen .radial-progress-container,
.end-screen .radial-progress-container,
.end-screen .next-game-wrapper .radial-progress-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    width: 100%;
    height: auto;
    padding: 6px 0;
    margin: 0;
    transform: none;
    background: none;
}

.lobby-screen .radial-progress,
.end-screen .radial-progress {
    width: auto;
    height: auto;
    border-radius: 0;
    background: none;
    display: block;
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    color: #eac548;
    margin: 0;
}

.lobby-screen .radial-progress::before,
.end-screen .radial-progress::before {
    display: none;
}

.lobby-screen .cd-bar,
.end-screen .cd-bar {
    width: 78%;
    max-width: 320px;
    height: 8px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 4px;
    overflow: hidden;
    margin: 2px auto 0;
}

.lobby-screen .cd-bar-fill,
.end-screen .cd-bar-fill {
    height: 100%;
    width: calc(var(--progress, 0) * 1%);
    /* No solid background: the .striped-bar class supplies the animated green
       stripes. These bars live outside .game-screen, so they never pick up the
       green→red timer classes — they stay green by design. */
    border-radius: 4px;
    transition: width 0.95s linear;
}

/* ==================================================================
   Polish pass (mobile/app portrait + square only): standardized font
   scale, taller bottom panels using the space freed by the radial
   removal, and subtle per-zone colour with accent top-borders.
   ================================================================== */
@media (max-aspect-ratio: 99/100) {
    /* Portrait: pack rows to the top. Do NOT force height:100% here — it clips the
       bottom panels out of the mobile/app frame. The empty-panel fill fix belongs
       to the landscape/web layout only.

       The grid has 4 area-rows (message/countdown/stats/standings for end,
       countdown/howtitle/howto/joining|scoring for lobby). Fixed rows stay
       min-content; ONLY the last row (the scrollable panels) is flexible.

       The whole screen must fit inside the inline webview with NO frame scroll
       (Devvit featuring prohibits scrolling inside inline webviews). So:
       - override the base portrait rule's `overflow-y:auto` on .game-columns to
         `hidden` — the grid itself must never scroll;
       - make the last row `minmax(0, 1fr)`, NOT plain `1fr`. Plain 1fr is
         `minmax(auto, 1fr)`, whose auto-minimum refuses to shrink below the panel's
         content height — so with many rows (7+ players in the lobby, a long
         standings list at end) the row grew past the frame and the grid scrolled.
         The 0 minimum lets the row shrink and hands overflow to each panel's own
         `overflow-y:auto` (set below), so the list scrolls IN PLACE and the frame
         stays put. */
    .lobby-screen .game-columns,
    .end-screen .game-columns {
        overflow: hidden;
    }
    /* End: message / countdown / stats / (standings|topwords). */
    .end-screen .game-columns {
        grid-template-rows: min-content min-content min-content minmax(0, 1fr);
    }
    /* Lobby: message / countdown / howtitle / howto / (joining|scoring). */
    .lobby-screen .game-columns {
        grid-template-rows: min-content min-content min-content min-content minmax(0, 1fr);
    }

    .lobby-screen .column:first-child,
    .lobby-screen .column:last-child,
    .end-screen .column:first-child,
    .end-screen .column:last-child {
        height: 100%;
        min-height: 0;
        display: flex;
        flex-direction: column;
        padding: 8px 8px 12px;
        border-radius: 6px;
    }

    .lobby-screen .joining-list,
    .lobby-screen .multipliers,
    .end-screen .final-standings,
    .end-screen .top-words {
        max-height: none;
        flex: 1 1 auto;
        min-height: 0;
        /* No scroll — fitListNoScroll() clips to fit and appends "+N more"
           (Devvit featuring prohibits inline-webview scrolling). */
        overflow: hidden;
        padding-bottom: 8px;
    }

    /* ---- Font scale (tier 1 titles / tier 2 body / tier 3 subtext) ---- */
    .lobby-screen h2,
    .end-screen h2 {
        font-size: 16px;
    }
    .end-screen .radial-progress-container h3,
    .lobby-screen .radial-progress-container h2 {
        font-size: 14px;
    }
    /* Emphasis panel: How To Play (lobby) — title + bullets larger. */
    .lobby-screen .column.center > h2 {
        font-size: 18px;
    }
    .lobby-screen .instructions p {
        font-size: 14px;
        padding: 8px 10px;
    }
    /* Emphasis panel: Game Stats (end) — username + rows larger. */
    .end-screen .stats-username {
        font-size: 16px;
    }
    .end-screen .stat-label {
        font-size: 14px;
    }
    .end-screen .stat-value {
        font-size: 15px;
    }
    /* Standard tier for the two bottom panels on each screen. */
    .lobby-screen .joining-list,
    .lobby-screen .multipliers,
    .end-screen .final-standings,
    .end-screen .top-words {
        font-size: 13px;
    }
    .end-screen .top-words .finder {
        font-size: 11px;
    }

    /* Panels match the web version (uniform translucent dark) for cross-layout
       consistency — no per-zone tint. */
    .lobby-screen .column:first-child,
    .lobby-screen .column:last-child,
    .end-screen .column:first-child,
    .end-screen .column:last-child {
        background-color: rgba(0, 0, 0, 0.4);
    }

    /* --- Reclaim vertical space for the bottom panels on short / near-square
       frames. The countdown ("Next round in"), the round message, and the
       "+N more" marker are secondary; shrinking them hands more height to
       Players Joining / Final Standings / Top Words so several more rows show
       before fitListNoScroll clips. Only these three shrink — How To Play and
       Game Stats keep their emphasis sizing. --- */
    .lobby-screen .radial-progress-container,
    .end-screen .next-game-wrapper .radial-progress-container {
        padding: 2px 8px;
        gap: 4px;
    }
    .end-screen .next-game-wrapper .radial-progress-container h3,
    .lobby-screen .radial-progress-container h2 {
        font-size: 12px;
    }
    .radial-progress {
        width: 34px;
        height: 34px;
        font-size: 14px;
    }
    .lobby-screen .player-message,
    .end-screen .player-message {
        min-height: 0;
        margin-bottom: 0;
        padding: 4px 10px;
        font-size: 12px;
        line-height: 1.2;
    }
    .more-row {
        font-size: 10px;
        padding: 0 4px;
        line-height: 1.1;
    }

}
/* splash screen logic matches */
/* Streak edge-glow overlay (B.12). Fixed, click-through, pulses via OPACITY only
   (GPU-friendly — no box-shadow animation). --sg intensity is set by JS and ramps
   with streak length; respects reduced-motion. */
.streak-glow {
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    box-shadow: inset 0 0 60px 12px var(--green);
    transition: opacity 0.4s ease;
    z-index: 50;
}
.streak-glow.on {
    animation: streak-pulse 1s ease-in-out infinite;
}
@keyframes streak-pulse {
    0%, 100% { opacity: var(--sg, 0.35); }
    50%      { opacity: calc(var(--sg, 0.35) * 1.6); }
}
@media (prefers-reduced-motion: reduce) {
    .streak-glow.on { animation: none; opacity: var(--sg, 0.35); }
}

/* ---- End screen web polish (C.W.2-5) ---- */
/* C.W.2: Top Words — finder name stacked UNDER the word to save horizontal space */
.top-words .word-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.top-words .word-row .word-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.top-words .word-row .finder {
    font-size: 11px;
    opacity: 0.6;
}
/* C.W.4: constrain center-column contents so they stop leaving big side gaps */
.end-screen .column.center .game-stats,
.end-screen .column.center .next-game-wrapper {
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}
/* C.W.5 (revised): long values shrink via fitText() instead of wrapping */
.end-screen .game-stats .stat-value {
    min-width: 0;
}
/* C.W.3: end columns fill vertical space to the bottom (safe flex, never height:100%) */
.end-screen .game-columns {
    align-items: stretch;
}
.end-screen .column > .final-standings,
.end-screen .column > .top-words,
.end-screen .column.center > .stats-wrapper {
    flex: 1 1 auto;
    min-height: 0;
}

/* C.M.2: end-screen stat-item icons — icon+label grouped left, value pushed right.
   Applied globally (icon markup is shared) so desktop stat rows also stay aligned. */
.game-stats .stat-item {
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
}
.game-stats .stat-item .stat-value {
    margin-left: auto;
}

/* ALL.1: background floaters become rounded squares (game-tile look) in the three
   brand colors at the original 0.2 opacity. border-radius + background are STATIC —
   only transform+opacity animate — so there is no per-frame repaint / perf change. */
.circles li { border-radius: 4px; }
.circles li:nth-child(3n+1) { background: rgba(1, 164, 132, 0.4); }  /* green  1,4,7,10 */
.circles li:nth-child(3n+2) { background: rgba(234, 197, 72, 0.4); } /* yellow 2,5,8 */
.circles li:nth-child(3n)   { background: rgba(217, 57, 0, 0.4); }   /* orange 3,6,9 */

/* ==================================================================
   Portrait list-fit overrides — LAST in the file and .column-scoped so
   they win over the end-of-file web-polish rules above. Portrait-only
   (max-aspect-ratio:99/100), so the landscape / desktop layout is never
   matched and stays byte-for-byte unchanged. Goal: 5+ Final Standings,
   6+ Top Words, 5+ Players Joining show before the "+N more" clip.
   ================================================================== */
@media (max-aspect-ratio: 99/100) {
    /* Final Standings: one line per row (name + words-found inline, score
       right). The default stacks name over "Words found: N", and the squeezed
       player-content wrapped that subtext to ~4 lines (71px rows → only 3 fit
       in the 296px panel). Single-line rows are ~26px → 5+ fit. */
    .end-screen .column .standings-row {
        padding: 2px 8px;
        margin-bottom: 1px;
        align-items: center;
    }
    .end-screen .column .standings-row .player-content {
        flex: 1;
        min-width: 0;
        align-items: baseline;
    }
    .end-screen .column .standings-row .player-info {
        flex: 1 1 auto;
        flex-direction: row;
        align-items: baseline;
        gap: 6px;
        min-width: 0;
        overflow: hidden;
    }
    .end-screen .column .standings-row .player-name {
        flex: 0 1 auto;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .end-screen .column .standings-row .words-found {
        flex: 0 0 auto;
        font-size: 9px;
        line-height: 1.1;
        white-space: nowrap;
    }
    /* Tighten Players-Joining and Top-Words rows so more fit per panel. */
    .lobby-screen .column .joining-player {
        padding: 3px 10px;
        margin-bottom: 2px;
    }
    .end-screen .column .top-words .word-row {
        padding: 0;
        line-height: 1.1;
    }
    .end-screen .column .top-words .word-row .word {
        font-size: 12px;
    }
    /* Top Words rows: put finder INLINE with the word (default stacks it under,
       ~2 lines/34px) so 6+ single-line rows (~24px) fit the panel. */
    .end-screen .column .top-words .word-row .word-main {
        flex-direction: row;
        align-items: baseline;
        gap: 6px;
        overflow: hidden;
    }
    .end-screen .column .top-words .word-row .word-main .word {
        flex: 0 0 auto;
    }
    .end-screen .column .top-words .word-row .word-main .finder {
        flex: 0 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    /* Reclaim fixed-content height so the bottom panels (Standings / Top Words)
       get enough room for 5-6 rows. The Game Statistics card's default
       `margin: 20px 0` (40px!) is the biggest offender; the countdown is
       secondary. Matches the web-polish rule's specificity (.column.center) and
       wins by source order. */
    .end-screen .column.center .game-stats {
        margin: 3px auto;
        padding: 6px 12px;
    }
    .end-screen .column.center .game-stats h2 {
        margin-bottom: 3px;
    }
    .end-screen .column.center .game-stats .stat-item {
        padding: 2px 0;
    }
    /* Trim the "Next round in" countdown a little more so both bottom panels
       clear 6 rows. */
    .end-screen .column.center .next-game-wrapper .radial-progress-container {
        padding: 2px 8px;
        gap: 2px;
    }
    .end-screen .column.center .next-game-wrapper .radial-progress {
        width: 30px;
        height: 30px;
        font-size: 13px;
    }
    .end-screen .column.center .next-game-wrapper h3 {
        margin: 0;
    }
    /* Lobby: reclaim from the How-To-Play card + countdown so Players Joining
       clears 5 rows, mirroring the end-screen reclaim above. */
    .lobby-screen .column.center > h2 {
        margin: 3px 0;
    }
    .lobby-screen .column.center .instructions p {
        padding: 4px 8px;
    }
    .lobby-screen .column.center .radial-progress-container {
        padding: 2px 8px;
        gap: 2px;
    }
    .lobby-screen .column.center .radial-progress {
        width: 30px;
        height: 30px;
        font-size: 13px;
    }
    /* Gameplay: a little more room below the board so the action buttons aren't
       flush against the frame edge. The grid is flex:1 and shrinks to absorb
       this, so nothing is pushed off-frame. */
    .game-screen .game-area .grid {
        margin-bottom: 8px;
    }
}