/* ---------------------------------------------------------------------------
   Scarabeo — a warm, wooden-tile look sitting on the platform's dark shell.
   Everything is namespaced under .sc-* so Paroliamo is never touched.
   --------------------------------------------------------------------------- */

.sc-root {
    --sc-board-bg: #0d1729;
    --sc-square: #263a5c;
    --sc-square-line: #16233b;
    --sc-dl: #4d90bd;
    --sc-tl: #2b5f9e;
    --sc-dw: #c8705f;
    --sc-tw: #a32f38;
    --sc-tile-top: #f7e6bd;
    --sc-tile-bottom: #e2c793;
    --sc-tile-ink: #402c14;
    --sc-accent: #e8b04b;
    --sc-danger: #ff7676;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
    font-family: 'Rubik', sans-serif;
}

/* align-items:center sizes children to their content, which lets a row of
   buttons grow wider than the phone and clip instead of wrapping. */
.sc-root > * { max-width: 100%; }
.sc-controls, .sc-toggles, .sc-status { width: 100%; }

/* --- board ---------------------------------------------------------------- */

.sc-board-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
}

/* Zoom trades the fit-on-screen sizing for a fixed, finger-sized board. */
.sc-board-wrap.sc-zoomed {
    overflow: auto;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
}

.sc-board-wrap.sc-zoomed .sc-board {
    width: 640px;
    max-width: none;
    flex-shrink: 0;
}

.sc-board {
    display: grid;
    grid-template-columns: repeat(15, 1fr);
    /* Rows must be explicit too. Without them each row is sized by its tallest
       cell, so a row holding a tile or the star grows taller than one holding
       only a small "DL" label, and the board stops being a grid of squares. */
    grid-template-rows: repeat(15, 1fr);
    gap: 2px;
    /* Shrink with the viewport height so board, rack and controls stay on screen
       together, but never so far that the squares stop being usable — below the
       floor the page scrolls instead. svh tracks the visible area on phones,
       where 100vh includes the collapsing browser chrome. */
    width: min(100%, max(320px, min(560px, calc(100vh - 430px))));
    width: min(100%, max(320px, min(560px, calc(100svh - 430px))));
    aspect-ratio: 1 / 1;
    padding: 6px;
    box-sizing: border-box;
    background: var(--sc-board-bg);
    border: 2px solid #3b2c18;
    border-radius: 8px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(232, 176, 75, 0.15);
    user-select: none;
}

.sc-square {
    position: relative;
    background: var(--sc-square);
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    transition: filter 0.12s ease;
}

.sc-square:hover { filter: brightness(1.35); }

.sc-dl { background: var(--sc-dl); }
.sc-tl { background: var(--sc-tl); }
.sc-dw { background: var(--sc-dw); }
.sc-tw { background: var(--sc-tw); }

.sc-premium {
    font-size: clamp(4px, 1.05vw, 8px);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.82);
    pointer-events: none;
}

.sc-star {
    color: var(--sc-accent);
    font-size: clamp(9px, 2vw, 15px);
    pointer-events: none;
}

.sc-square-cursor {
    outline: 2px solid var(--sc-accent);
    outline-offset: -2px;
    z-index: 2;
}

.sc-cursor {
    position: absolute;
    color: var(--sc-accent);
    font-size: clamp(8px, 1.8vw, 14px);
    line-height: 1;
    pointer-events: none;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
}

.sc-square-filled { background: transparent; }

/**
 * The clamp()s above size text against the viewport, which is wrong: the same
 * phone shows a small board and a big one depending on the layout around it.
 * Where container queries exist, size everything against the square itself so a
 * tile always looks the same relative to its cell. The clamp() values stay as
 * the fallback for anything older.
 */
@supports (container-type: size) {
    .sc-square { container-type: size; }

    .sc-square .sc-premium { font-size: 22cqh; }
    .sc-square .sc-star { font-size: 58cqh; }
    .sc-square .sc-cursor { font-size: 44cqh; }
    .sc-square .sc-tile-letter { font-size: 52cqh; }
    .sc-square .sc-tile-value { font-size: 27cqh; }

    /* Under this size the DL/TP labels are illegible anyway and just add noise —
       the colour already says what the square does. */
    @container (max-height: 24px) {
        .sc-premium { display: none; }
    }
}

/* --- tiles ---------------------------------------------------------------- */

.sc-tile {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, var(--sc-tile-top), var(--sc-tile-bottom));
    color: var(--sc-tile-ink);
    border-radius: 3px;
    box-shadow: inset 0 -1px 0 rgba(120, 88, 40, 0.55), 0 1px 2px rgba(0, 0, 0, 0.5);
    font-family: Georgia, 'Times New Roman', serif;
}

.sc-tile-letter {
    font-weight: 700;
    font-size: clamp(8px, 2vw, 17px);
    line-height: 1;
}

.sc-tile-value {
    position: absolute;
    right: 1px;
    bottom: 0px;
    font-size: clamp(4px, 0.95vw, 9px);
    font-weight: 700;
    opacity: 0.75;
}

.sc-tile-blank .sc-tile-letter { color: #9a6f2e; font-style: italic; }

.sc-square-pending .sc-tile {
    box-shadow: 0 0 0 2px var(--sc-accent), 0 2px 5px rgba(0, 0, 0, 0.5);
    transform: translateY(-1px);
}

.sc-square-fresh .sc-tile { animation: scFreshTile 1.6s ease-out; }

@keyframes scFreshTile {
    0%   { box-shadow: 0 0 0 2px #fff6d8, 0 0 12px 3px rgba(232, 176, 75, 0.9); }
    100% { box-shadow: inset 0 -1px 0 rgba(120, 88, 40, 0.55), 0 1px 2px rgba(0, 0, 0, 0.5); }
}

.sc-square-highlight {
    outline: 2px solid #7ecbff;
    outline-offset: -2px;
    z-index: 3;
}

.sc-square-drop {
    outline: 2px dashed var(--sc-accent);
    outline-offset: -2px;
    filter: brightness(1.5);
    z-index: 3;
}

/* --- dragging ------------------------------------------------------------- */

.sc-drag-ghost {
    position: fixed;
    width: 42px;
    height: 46px;
    margin: -23px 0 0 -21px;   /* centre the tile on the pointer */
    pointer-events: none;
    z-index: 4000;
    opacity: 0.92;
    transform: scale(1.08);
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.55));
}

.sc-drag-ghost .sc-tile-letter { font-size: 20px; }
.sc-drag-ghost .sc-tile-value { font-size: 10px; right: 3px; bottom: 1px; }

/* Only the draggable tiles swallow touch gestures — empty squares stay scrollable
   so the page (and the zoomed board) can still be panned with a finger. */
.sc-rack-slot, .sc-square-pending { touch-action: none; }
.sc-board, .sc-rack { user-select: none; -webkit-user-select: none; }

/* --- status line ---------------------------------------------------------- */

.sc-status {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
    min-height: 22px;
    font-size: 14px;
    color: #b9c3d6;
}

.sc-status-mine { color: var(--sc-accent); font-weight: 600; }

.sc-preview {
    background: rgba(232, 176, 75, 0.12);
    border: 1px solid rgba(232, 176, 75, 0.4);
    border-radius: 999px;
    padding: 2px 12px;
    color: #f3e2c0;
    font-family: Georgia, serif;
}

.sc-points { color: #7ede9a; font-weight: 700; }
.sc-points-neg { color: var(--sc-danger); font-weight: 700; }
.sc-error { color: var(--sc-danger); }
.sc-hint { color: #8d97ab; font-style: italic; }

/* --- rack ----------------------------------------------------------------- */

.sc-rack {
    display: flex;
    gap: 6px;
    padding: 8px 10px;
    background: linear-gradient(180deg, #5a4127, #3c2a17);
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.sc-rack-slot {
    width: 40px;
    height: 44px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.25);
    cursor: pointer;
    transition: transform 0.1s ease;
}

.sc-rack-slot:hover { transform: translateY(-3px); }
.sc-rack-used, .sc-rack-empty { cursor: default; background: rgba(0, 0, 0, 0.32); }
.sc-rack-used:hover, .sc-rack-empty:hover { transform: none; }

.sc-rack-selected {
    outline: 2px solid var(--sc-accent);
    outline-offset: 2px;
    transform: translateY(-4px);
}

.sc-rack-slot .sc-tile-letter { font-size: 20px; }
.sc-rack-slot .sc-tile-value { font-size: 10px; right: 3px; bottom: 1px; }

.sc-rack-swap { box-shadow: 0 0 0 2px var(--sc-accent), 0 4px 10px rgba(0, 0, 0, 0.5); }

/* --- controls ------------------------------------------------------------- */

.sc-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.sc-btn {
    font-family: 'Rubik', sans-serif;
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    color: #f4ead6;
    background: #33456b;
    transition: filter 0.12s ease, transform 0.12s ease;
}

.sc-btn:hover:not(:disabled) { filter: brightness(1.2); }
.sc-btn:disabled { opacity: 0.4; cursor: default; transform: none; }

.sc-btn-primary { background: linear-gradient(180deg, #e8b04b, #c98c28); color: #2b1d08; }
.sc-btn-ghost { background: #2b3a5a; }
.sc-btn-warn { background: #6d3340; }

.sc-toggles {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.sc-btn-tiny {
    padding: 4px 10px;
    font-size: 12px;
    background: #22304f;
    color: #9fb0cc;
}

.sc-btn-on { background: #4a3a1c; color: var(--sc-accent); }

/* --- unseen tile tracker -------------------------------------------------- */

.sc-tracker {
    width: 100%;
    max-width: 560px;
    padding: 8px 10px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 8px;
}

.sc-tracker-head {
    font-size: 12px;
    color: #9fb0cc;
    margin-bottom: 6px;
    text-align: center;
}

.sc-tracker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
    gap: 4px;
}

.sc-tracker-cell {
    background: rgba(247, 230, 189, 0.12);
    border-radius: 4px;
    padding: 3px 0;
    text-align: center;
    font-size: 12px;
    color: #e8dcc2;
    font-family: Georgia, serif;
}

.sc-tracker-cell b { margin-right: 3px; color: var(--sc-accent); }
.sc-tracker-out { opacity: 0.28; }

/* --- turn panel (left sidebar) -------------------------------------------- */

.sc-turn-panel { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }

.sc-turn-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 4px;
    color: #c8d1e2;
}

.sc-bag { font-weight: 600; }
.sc-timer { font-variant-numeric: tabular-nums; color: var(--sc-accent, #e8b04b); }
.sc-timer-low { color: #ff7676; animation: scBlink 1s steps(2, start) infinite; }

@keyframes scBlink { 50% { opacity: 0.35; } }

.sc-player-turn { box-shadow: inset 3px 0 0 #e8b04b; }
.sc-player-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 95px; }
.sc-player-meta { display: flex; align-items: center; gap: 6px; }
.sc-rack-count { color: #e8b04b; font-size: 11px; white-space: nowrap; }
.sc-player-score { font-weight: 700; color: #f4ead6; }

/* The platform paints your own row white — keep the metrics readable on it. */
.player-card[hasAccent$="true"] .sc-player-score { color: #0f3460; }
.player-card[hasAccent$="true"] .sc-rack-count { color: #8a5a20; }

.sc-history {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 190px;
    overflow-y: auto;
    padding-right: 2px;
}

.sc-history-row {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    padding: 4px 6px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 5px;
    color: #c8d1e2;
    font-size: 11.5px;
    line-height: 1.35;
    cursor: pointer;
}

.sc-history-row:hover { background: rgba(126, 203, 255, 0.16); }
.sc-history-row:first-child { background: rgba(232, 176, 75, 0.14); }

.sc-history-player {
    font-weight: 600;
    color: #9fb0cc;
    max-width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sc-history-move { text-align: right; }

.sc-final-rack {
    display: inline-block;
    margin-left: 6px;
    font-family: Georgia, serif;
    letter-spacing: 1px;
    color: var(--sc-accent, #e8b04b);
}

.sc-final {
    padding: 6px 8px;
    background: rgba(232, 176, 75, 0.1);
    border: 1px solid rgba(232, 176, 75, 0.35);
    border-radius: 6px;
    font-size: 12px;
}

.sc-final-title { font-weight: 600; margin-bottom: 4px; color: #f3e2c0; }
.sc-final-row { display: flex; justify-content: space-between; }

/* --- blank picker --------------------------------------------------------- */

.sc-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(6, 10, 20, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
}

.sc-modal {
    background: #1b2540;
    border: 1px solid rgba(232, 176, 75, 0.4);
    border-radius: 10px;
    padding: 18px;
    max-width: min(92vw, 420px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
    text-align: center;
}

.sc-modal h4 { margin: 0 0 12px; color: #f3e2c0; font-weight: 600; }

.sc-blank-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
    gap: 6px;
    margin-bottom: 12px;
}

.sc-blank-option {
    font-family: Georgia, serif;
    font-weight: 700;
    font-size: 16px;
    margin: 0;
    padding: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background: linear-gradient(160deg, #f7e6bd, #e2c793);
    color: #402c14;
}

.sc-blank-option:hover { filter: brightness(1.1); }

/* --- lobby badge ---------------------------------------------------------- */

.tipo-badge.tipo-scrabble { background: #7a4b18; color: #f7e6bd; }
.game-badge-scrabble { background: #8a5a20; }

/* Scrabble needs the vertical room more than the platform's roomy padding. */
.main-content:has(.scrabble-container) { padding: 14px; }
.scrabble-container > h3 { margin: 2px 0 10px; }

/* --- small screens -------------------------------------------------------- */

@media (max-width: 700px) {
    /* Vertical space is the scarce resource on a phone, not horizontal: give the
       board the full width and let the page scroll. */
    .sc-board { width: 100%; }
    .sc-root { gap: 6px; }
    .sc-rack { gap: 4px; padding: 6px; }
    .sc-rack-slot { width: 11.5vw; max-width: 44px; height: 13vw; max-height: 50px; }
    .sc-rack-slot .sc-tile-letter { font-size: 5.5vw; }
    .sc-rack-slot .sc-tile-value { font-size: 2.6vw; }
    /* An even grid instead of one cramped row, with buttons big enough to hit
       with a thumb (44px is Apple's minimum tap target). */
    .sc-controls {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }
    .sc-btn { padding: 12px 6px; font-size: 14px; min-height: 44px; }
    .sc-btn-tiny { min-height: 36px; padding: 6px 12px; font-size: 12px; }

    /* Names ellipsise; the score must never be the thing that gets cut. */
    .sc-player-meta { flex-shrink: 0; }
    .sc-player-name { max-width: none; flex: 1; min-width: 0; }
    .sc-status { font-size: 13px; gap: 8px; }
    .sc-tracker { max-width: 100%; }
}