* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #120a0d;
    background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.1));
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: #cecece;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    padding: 10px;
}

h1 {
    margin-bottom: 10px;
    color: #ffffff;
    text-shadow: -1px -1px 0 #c9a24b, 1px -1px 0 #c9a24b, -1px 1px 0 #c9a24b, 1px 1px 0 #c9a24b;
    -webkit-text-stroke: 0.5px #c9a24b;
}

#game {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin-top: 10px;
}

#timers {
    display: flex;
    gap: 40px;
}

.lobby-auth-buttons {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.lobby-auth-buttons .btn-secondary {
    flex: 1;
    background: transparent;
    border: 2px solid #f0d488;
    color: #f0d488;
    padding: 8px 10px;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    text-transform: uppercase;
    transition: 0.2s;
}

.lobby-auth-buttons .btn-secondary:hover,
.lobby-auth-buttons .btn-secondary.active {
    background: #f0d488;
    color: #000;
    box-shadow: 0 0 10px #f0d488;
}

.timer {
    font-size: 1.1em;
    padding: 6px 16px;
    border-radius: 4px;
    border: 2px solid #c9a24b;
    background-color: transparent;
    backdrop-filter: blur(4px);
    box-shadow: 0 0 15px rgba(201, 162, 75, 0.5), 0 0 30px rgba(201, 162, 75, 0.3);
}

.timer-label {
    margin-right: 8px;
    color: #fff;
}

.timer-time {
    font-weight: bold;
    font-size: 1.2em;
    color: #fff;
}

.white-turn {
    background-color: transparent;
    border-color: #c9a24b;
    box-shadow: 0 0 20px rgba(201, 162, 75, 0.7), 0 0 40px rgba(201, 162, 75, 0.4);
}

.black-turn {
    background-color: transparent;
}

#main-area {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 15px;
    width: 100%;
    max-width: 100%;
    justify-content: center;
    flex-wrap: wrap;
}

#moves-area {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 200px;
    flex-shrink: 0;
}

.panel {
    background-color: rgba(10, 10, 10, 0);
    background-image: url('backgrounds/moves4.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 2px solid #c9a24b;
    border-radius: 6px;
    padding: 10px;
    box-shadow: 0 0 20px rgba(201, 162, 75, 0.5), 0 0 40px rgba(201, 162, 75, 0.3), inset 0 0 10px rgba(201, 162, 75, 0.2);
}

.panel h3 {
    margin-bottom: 8px;
    text-align: center;
    font-size: 0.9em;
    letter-spacing: 1px;
    color: #c9a24b;
    text-transform: uppercase;
    text-shadow: 0 0 8px rgba(201, 162, 75, 0.6);
}

#black-panel {
    height: 255px;
}

#white-panel {
    height: 255px;
}

.moves-list {
    height: calc(100% - 25px);
    overflow-y: auto;
    font-size: 0.85em;
    color: #fff;
    padding-right: 4px;
}

/* Estilo dourado do scrollbar aplicado globalmente (Chrome/Edge/Safari via
   ::-webkit-scrollbar e Firefox via scrollbar-color), em vez de ficar restrito
   a .moves-list/.chat-messages. Isso garante que QUALQUER área com scroll do
   site (inclusive as do dashboard.php, que usam outras classes como
   .chat-messages-container, .history-list, .matches-list, .leaderboard-list,
   etc.) herde a mesma cor dourada, ao invés de cair no scrollbar padrão
   (cinza/vermelho) do navegador. */
* {
    scrollbar-color: #c9a24b #0a0a0a !important;
}

*::-webkit-scrollbar {
    width: 12px !important;
    height: 12px !important;
}

*::-webkit-scrollbar-track {
    background: #0a0a0a !important;
    border-radius: 3px !important;
}

*::-webkit-scrollbar-thumb {
    background: #c9a24b !important;
    border-radius: 3px !important;
    box-shadow: 0 0 10px #c9a24b, 0 0 20px #c9a24b !important;
}

*::-webkit-scrollbar-thumb:hover {
    background: #f8e2a8 !important;
    box-shadow: 0 0 15px #f8e2a8, 0 0 30px #c9a24b !important;
}

#board-chat-wrapper {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
}

/* ---------- View Controls (3D toggle + sound) ----------
   Now nested inside the #info box (the "White's turn" / "Connected" panel
   between the two player timers), placed after the status text so it
   naturally sits at the bottom of the box. #info itself uses
   flex-direction: column + justify-content: space-between (set inline in
   each page) to keep the buttons pinned to the bottom even when the status
   text is short. */
#view-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    row-gap: 8px;
    width: 100%;
}

.view-control-btn {
    padding: 5px 14px;
    background-color: transparent;
    color: #c9a24b;
    border: 2px solid #c9a24b;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.78em;
    font-weight: bold;
    letter-spacing: 0.5px;
    transition: all 0.2s;
    box-shadow: 0 0 12px rgba(201, 162, 75, 0.4);
}

.view-control-btn:hover {
    background-color: #c9a24b;
    color: #000 !important;
    box-shadow: 0 0 20px rgba(201, 162, 75, 0.8);
}

.view-control-btn.active {
    background-color: #c9a24b;
    color: #000 !important;
    box-shadow: 0 0 20px rgba(201, 162, 75, 0.9);
}

.match-action-btn {
    background: #3b2a1a;
    color: #f0d488;
    border: 1px solid #8a6f34;
    padding: 10px 24px;
    font-family: 'Cinzel', serif;
    font-weight: 600;
    letter-spacing: 1px;
    border-radius: 2px;
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.3s ease;
    min-width: 150px;
}

.match-action-btn:hover {
    background: #c9a24b;
    color: #1a0e05;
    box-shadow: 0 0 14px rgba(201, 162, 75, 0.4);
}

.match-action-btn.resign {
    border-color: #9c2b45;
    color: #d94f6b;
    background: #3b2a1a;
}

.match-action-btn.resign:hover {
    background: #9c2b45;
    color: #f5ede2;
    box-shadow: 0 0 14px rgba(156, 43, 69, 0.45);
}

#board {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 1fr);
    width: min(516px, 92vw);
    aspect-ratio: 1 / 1;
    border: 3px solid #c9a24b;
    border-radius: 6px;
    overflow: hidden;
    background-color: #000;
    box-shadow: 0 0 30px rgba(201, 162, 75, 0.7), 0 0 60px rgba(201, 162, 75, 0.4), inset 0 0 15px rgba(201, 162, 75, 0.4);
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.square {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    /* Without this, a grid item's "automatic minimum size" is based on its
       content's intrinsic size — here, the piece image's natural pixel
       dimensions — so rows/columns holding a piece get pulled taller than
       empty ones instead of staying a uniform 1/8th of the board. This is
       what makes the squares look asymmetric, especially at large sizes
       (like fullscreen) where the effect is most visible. */
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

/* 3D board view — same footprint/frame as #board, hidden by default and
   toggled by chess3d.js. Holds the three.js <canvas>. */
#board-3d {
    display: none;
    width: min(516px, 92vw);
    aspect-ratio: 1 / 1;
    border: none;
    border-radius: 0;
    overflow: hidden;
    background-color: transparent;
    box-shadow: none;
    cursor: grab;
    touch-action: none;
    transition: width 0.4s ease, height 0.4s ease;
}

/* Active 3D view keeps the exact same footprint as the normal 2D board —
   widening it here used to push the layout wider than the viewport on
   mobile and get the chat panel cut off on the right. */
#board-3d.active-3d {
    width: min(516px, 92vw);
    height: min(516px, 92vw);
}

#board-3d:active {
    cursor: grabbing;
}

#board-3d canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

/* ---------- Fullscreen game screen ----------
   Fullscreens the WHOLE match view (#game: timers, move lists, the board,
   chat, kills, resign/draw actions) rather than just the board, so nothing
   is hidden while playing fullscreen. #game normally gets "margin-top: 8rem"
   as an inline style (spacing for the fixed page header) and its display is
   set to "block" by chess.js once the match starts — both overridden here
   for the fullscreen layout; !important is needed only for margin-top,
   since that inline value is never itself !important.
   background-color here is just a fallback flash color before the image
   decodes: the Fullscreen spec only paints the fullscreened element's own
   subtree, so <body>'s background-image is invisible once #game goes
   fullscreen. Each page's own <style> block (loaded after this file, so it
   wins on equal specificity) repeats this selector with its actual
   background-image, sized "cover" so the photo always fills the screen
   edge-to-edge instead of being cropped/letterboxed. */
#game:fullscreen,
#game:-webkit-full-screen {
    margin-top: 0 !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    overflow-y: auto;
    padding: 20px 12px 30px;
    background-color: #120a0d;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#game:fullscreen::backdrop,
#game:-webkit-full-screen::backdrop {
    background-color: #120a0d;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* With the whole screen now available (instead of just a small board
   footprint), let the board itself take up more room than its normal
   516px cap — sized off viewport height since #timers/#chat/#kills/
   #match-actions also need vertical space above and below it. */
#game:fullscreen #board,
#game:fullscreen #board-3d,
#game:-webkit-full-screen #board,
#game:-webkit-full-screen #board-3d {
    width: min(62vh, 90vw);
    height: min(62vh, 90vw);
}

/* Same footprint as the normal fullscreen board — no widening for 3D. */
#game:fullscreen #board-3d.active-3d,
#game:-webkit-full-screen #board-3d.active-3d {
    width: min(62vh, 90vw);
    height: min(62vh, 90vw);
}

.square.light {
    background-image: url('table/light.png');
    background-size: cover;
    background-position: center;
}

.square.dark {
    background-image: url('table/dark.png');
    background-size: cover;
    background-position: center;
}

.square.selected {
    box-shadow: inset 0 0 12px 4px rgba(201, 162, 75, 0.9);
}

.square.selected .piece-img {
    transform: scale(1.15);
    filter: drop-shadow(0 0 8px #c9a24b);
}

.square.last-move {
    box-shadow: inset 0 0 10px 3px rgba(201, 162, 75, 1);
}

/* Pulsing glow for a king in check */
@keyframes check-pulse {
    0% { 
        background-color: rgba(217, 79, 107, 0.4) !important;
        box-shadow: inset 0 0 5px #d94f6b, 0 0 5px #d94f6b;
    }
    50% { 
        /* Fica bem intenso e opaco no meio do pulso */
        background-color: rgba(255, 30, 80, 0.95) !important; 
        box-shadow: inset 0 0 15px #ff1e50, 0 0 20px #ff1e50;
    }
    100% { 
        background-color: rgba(217, 79, 107, 0.4) !important;
        box-shadow: inset 0 0 5px #d94f6b, 0 0 5px #d94f6b;
    }
}

.square.in-check {
    /* Triggers the animation that now controls both the background and the glow */
    animation: check-pulse 0.8s infinite ease-in-out !important;
}

/* Red flash on the destination square right when a capture lands */
@keyframes capture-flash-anim {
    0% { box-shadow: inset 0 0 25px 10px rgba(255, 40, 40, 0.9); }
    100% { box-shadow: inset 0 0 0 0 rgba(255, 40, 40, 0); }
}

.square.capture-flash {
    animation: capture-flash-anim 0.4s ease-out;
}

/* Small shake on a square for a rejected/invalid move */
@keyframes shake-square {
    0%, 100% { transform: translate(0, 0); }
    20%, 60% { transform: translate(-4px, 0); }
    40%, 80% { transform: translate(4px, 0); }
}

.square.shake {
    animation: shake-square 0.3s ease-in-out;
}

/* Whole board shakes when a match ends (checkmate/stalemate/timeout) */
@keyframes board-shake-anim {
    0%, 100% { transform: translate(0, 0); }
    20%, 60% { transform: translate(-6px, 0); }
    40%, 80% { transform: translate(6px, 0); }
}

#board.board-shake {
    animation: board-shake-anim 0.4s ease-in-out;
}

.square.valid-move::after {
    content: '❤️';
    position: absolute;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.square.valid-capture::after {
    content: '⚔️';
    position: absolute;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0.2;
    transition: opacity 0.2s;
}

.square.valid-capture:hover::after {
    opacity: 1;
    transform: scale(1.15);
}

.square.valid-capture:hover .piece-img {
    filter: drop-shadow(0 0 5px rgba(255, 10, 10, 1));
    transform: scale(1.15);
    cursor: pointer;
}

.square:hover {
    opacity: 0.9;
}

.piece-img {
    width: 82%;
    height: 82%;
    object-fit: contain;
    transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}

/* Floating clone used by chess.js to slide a piece from square to square.
   Lives outside #board (appended to <body>) so it survives the innerHTML
   reset that renderBoard() does on every move. */
.piece-anim {
    position: fixed;
    transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
    pointer-events: none;
    z-index: 500;
}

.square.current-turn .piece-img {
    cursor: grab;
}

.square.current-turn:hover .piece-img {
    transform: scale(1.15);
}

/* ---------- Drag & Drop (chess.js pointerdown/pointermove/pointerup) ---------- */

/* Cursor feedback: grabbing anywhere on screen while a piece is actively
   being dragged, not just while hovering the board — the pointer can end
   up over the chat panel, timers, etc. mid-drag. */
body.piece-dragging,
body.piece-dragging * {
    cursor: grabbing !important;
}

/* Source square dims its piece while the floating ghost (below) stands in
   for it, same idea as .piece-anim hiding the real image mid-slide. */
.square.drag-source .piece-img {
    opacity: 0.25;
}

/* Live drop-target highlight, tracking whichever square is under the
   pointer. Reuses the board's gold glow language (.selected/.last-move)
   so it reads as "part of the same board", just brighter since it needs
   to update every frame and stay legible while moving. */
.square.drag-over {
    box-shadow: inset 0 0 18px 6px rgba(201, 162, 75, 1), 0 0 14px rgba(201, 162, 75, 0.8);
}

/* Swaps to the board's red/capture accent when the hovered square holds
   an enemy piece — same color language as .valid-capture:hover. */
.square.drag-over.drag-over-capture {
    box-shadow: inset 0 0 18px 6px rgba(217, 79, 107, 1), 0 0 14px rgba(217, 79, 107, 0.85);
}

/* The piece actually following the cursor/finger during a drag. Fixed +
   appended to <body> for the same reason as .piece-anim (survives
   renderBoard()'s innerHTML reset), scaled/glowing like a selected piece
   plus a drop shadow so it visibly lifts off the board. */
.piece-drag-ghost {
    position: fixed;
    pointer-events: none;
    z-index: 600;
    transform: translate(-50%, -50%) scale(1.15);
    filter: drop-shadow(0 0 8px #c9a24b) drop-shadow(0 6px 10px rgba(0, 0, 0, 0.5));
    touch-action: none;
    opacity: 0.95;
}

#chat-panel {
    width: 220px;
    height: 520px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    font-size: 0.85em;
    margin-bottom: 8px;
    color: #fff;
    text-shadow: -1px -1px 0 #c9a24b, 1px -1px 0 #c9a24b, -1px 1px 0 #c9a24b, 1px 1px 0 #c9a24b;
    -webkit-text-stroke: 0.5px #c9a24b;
    padding-right: 2px;
}

.chat-messages p {
    padding: 3px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.chat-messages .chat-you {
    color: #c9a24b;
    text-shadow: none;
    -webkit-text-stroke: 0;
}

.chat-messages .chat-system {
    color: #fff;
    text-shadow: -1px -1px 0 #c9a24b, 1px -1px 0 #c9a24b, -1px 1px 0 #c9a24b, 1px 1px 0 #c9a24b;
    -webkit-text-stroke: 0.5px #c9a24b;
    font-style: italic;
}

.status-container {
    border: 2px solid #c9a24b;
    background-color: transparent;
    box-shadow: 0 0 10px #c9a24b, inset 0 0 10px rgba(201, 162, 75, 0.2);
    border-radius: 8px;
    padding: 10px 15px;
    margin: 15px auto;
    text-align: center;
    max-width: 600px;
    color: #c9a24b;
    font-family: inherit;
}

#chat-input-area {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#chat-input {
    width: 100%;
    padding: 8px;
    border: 2px solid #c9a24b;
    border-radius: 3px;
    background-color: transparent;
    color: white;
    font-size: 0.85em;
    box-shadow: 0 0 15px rgba(201, 162, 75, 0.4), inset 0 0 5px rgba(201, 162, 75, 0.2);
}

#chat-input:focus {
    outline: none;
    border-color: #c9a24b;
    box-shadow: 0 0 25px rgba(201, 162, 75, 0.8), inset 0 0 8px rgba(201, 162, 75, 0.4);
}

#chat-send {
    width: 100%;
    padding: 6px 12px;
    background-color: transparent;
    color: #c9a24b;
    border: 2px solid #c9a24b;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.85em;
    font-weight: bold;
    transition: all 0.2s;
    box-shadow: 0 0 15px rgba(201, 162, 75, 0.4);
}

#chat-send:hover {
    background-color: #c9a24b;
    color: #000;
    box-shadow: 0 0 25px rgba(201, 162, 75, 0.9);
}

#chat-options-btn {
    width: 100%;
    margin-top: 6px;
    padding: 6px 12px;
    background-color: transparent;
    color: #c9a24b;
    border: 2px solid #c9a24b;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.85em;
    font-weight: bold;
    transition: all 0.2s;
    box-shadow: 0 0 15px rgba(201, 162, 75, 0.4);
}

#chat-options-btn:hover {
    background-color: #c9a24b;
    color: #000;
    box-shadow: 0 0 25px rgba(201, 162, 75, 0.9);
}

/* Chat Options modal (font color + size) */
.chat-options-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(2px);
}

.chat-options-overlay.active {
    display: flex;
}

.chat-options-box {
    background: transparent;
    border: 2px solid #c9a24b;
    box-shadow: 0 0 25px rgba(201, 162, 75, 0.6), inset 0 0 15px rgba(201, 162, 75, 0.2);
    border-radius: 12px;
    padding: 24px 28px;
    max-width: 320px;
    width: 90%;
    color: #cecece;
    font-family: inherit;
    animation: chat-options-pop 0.18s ease-out;
}

@keyframes chat-options-pop {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.chat-options-title {
    color: #c9a24b;
    text-shadow: 0 0 8px rgba(201, 162, 75, 0.6);
    font-size: 15px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    margin: 0 0 18px 0;
}

.chat-options-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    font-size: 0.9em;
}

.chat-options-row label {
    color: #ccc;
}

.chat-options-row input[type="color"] {
    width: 44px;
    height: 30px;
    padding: 0;
    border: 2px solid #c9a24b;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
}

.chat-options-row input[type="range"] {
    width: 130px;
    accent-color: #c9a24b;
}

.chat-options-buttons {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 6px;
}

.chat-options-close-btn {
    background: rgba(201, 162, 75, 0.1);
    color: #c9a24b;
    border: 1px solid #c9a24b;
    padding: 8px 22px;
    font-size: 13px;
    font-weight: bold;
    border-radius: 6px;
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.chat-options-close-btn:hover {
    background: #c9a24b;
    color: #000;
    box-shadow: 0 0 12px #c9a24b;
}

#info {
    text-align: center;
    font-size: 0.9em;
    margin-top: 5px;
    color: #fff;
    text-shadow: -1px -1px 0 #c9a24b, 1px -1px 0 #c9a24b, -1px 1px 0 #c9a24b, 1px 1px 0 #c9a24b;
    -webkit-text-stroke: 0.5px #c9a24b;
}

#captured {
    display: flex;
    justify-content: center;
    gap: 5px;
    flex-wrap: wrap;
    margin-top: 5px;
}

/* ============================================================
   RESPONSIVE — MOBILE / NARROW SCREENS
   The board (#board) is already fluid (grid in fr units + width: min(516px, 92vw)),
   so this block handles the rest: stacking moves/chat below the board,
   shrinking the timers header (avatar/flag are set via inline style=""
   in the PHP, hence the !important here) and avoiding horizontal overflow.
   ============================================================ */
@media (max-width: 900px) {
    body {
        padding: 6px;
    }

    #game {
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
    }

    /* Timers: allows wrapping to a new line and shrinks avatar/flag/paddings
       that come fixed via inline style="" on the game pages */
    #timers {
        flex-wrap: wrap !important;
        gap: 10px !important;
        max-width: 100% !important;
        row-gap: 10px !important;
    }

    .timer {
        padding: 8px 12px !important;
        gap: 8px !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    .player-avatar {
        width: 40px !important;
        height: 40px !important;
    }

    .player-flag {
        width: 26px !important;
        height: 18px !important;
    }

    .timer-label {
        font-size: 16px !important;
        max-width: 90px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .timer-time {
        font-size: 16px !important;
    }

    #info {
        min-width: 0 !important;
        padding: 8px 12px !important;
        flex: 1 1 100%;
        order: 3;
    }

    /* White/black moves: side by side, shorter, right below the board */
    #moves-area {
        flex-direction: row;
        width: 100%;
        max-width: min(516px, 92vw);
        order: 2;
    }

    #black-panel,
    #white-panel {
        height: 130px;
        flex: 1;
    }

    /* Chat: full board width, shorter */
    #chat-panel {
        width: 100%;
        max-width: min(516px, 92vw);
        height: 260px;
        order: 4;
    }

    #board-chat-wrapper {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    #board,
    #board-3d {
        order: 1;
    }

    /* Prevents a long chat message (with no spaces) from stretching the box
       horizontally and pushing the rest of the layout off-screen */
    .chat-messages {
        word-break: break-word;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 480px) {
    .player-avatar {
        width: 32px !important;
        height: 32px !important;
    }

    .timer-label {
        max-width: 70px;
    }

    #black-panel,
    #white-panel {
        height: 110px;
    }
}