/* RogueLetters - Dark Roguelike Theme */

:root {
    /* Dark roguelike color palette */
    --primary-color: #dc2626;     /* Red - matches TW squares */
    --secondary-color: #8b7355;   /* Muted bronze */
    --success-color: #4ade80;     /* Bright green */
    --warning-color: #dc2626;     /* Red */
    --danger-color: #ef4444;      /* Red */

    /* Board colors */
    --board-bg: #1a1a2e;          /* Deep dark purple */
    --board-square: #252538;      /* Dark square */
    --board-border: #3d3d5c;      /* Board edge */

    /* Tile colors - classic Scrabble plastic */
    --tile-bg: #F3E5C3;           /* Cream/ivory plastic */
    --tile-bg-selected: #FFE4A0;  /* Golden/warm when selected */
    --tile-border: #D4C4A8;       /* Slightly darker tan edge */
    --tile-text: #1a1a1a;         /* Black letters */
    --tile-shadow: #C4B498;       /* Shadow for 3D effect */

    /* Multiplier colors - more vibrant for dark mode */
    --multiplier-2w: #9333ea;     /* Purple for 2x word */
    --multiplier-3w: #dc2626;     /* Red for 3x word */
    --multiplier-2l: #0891b2;     /* Cyan for 2x letter */
    --multiplier-3l: #2563eb;     /* Blue for 3x letter */
    --center-star: #dc2626;       /* Red center */

    /* Page colors */
    --bg-color: #0f0f1a;          /* Very dark background */
    --bg-secondary: #1a1a2e;      /* Slightly lighter bg */
    --text-color: #e8e8e8;        /* Light text */
    --text-muted: #9ca3af;        /* Muted text */
    --text-accent: #dc2626;       /* Red accent text */
    --accent-color: #f59e0b;      /* Warm amber for hint/highlights */

    /* Cell sizing - shared by board and rack */
    --cell-size: calc((100vw - 10px) / 9);
    --max-cell-size: 40px;
    --actual-cell-size: min(var(--cell-size), var(--max-cell-size));
}

* {
    box-sizing: border-box; /* Consistent box model */
}

html, body {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
    touch-action: none; /* Disable all touch gestures that might cause scrolling */
    overscroll-behavior: none; /* Prevent bounce effects */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS if needed */
}

body {
    font-family: Helvetica, Arial, sans-serif;
    background: var(--bg-color);
    color: var(--text-color);
    margin: 0;
    padding: 0;
}

header {
    position: fixed;
    background: var(--bg-color);
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 4px 10px 2px 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

/* Header toolbar: hint + coins/bag + gear in one row */
#header-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

/* Shared toolbar button style — pill shape, same border/bg */
#header-toolbar > button {
    height: 24px;
    padding: 0 8px;
    border-radius: 12px;
    background: var(--board-square);
    border: 1px solid var(--board-border);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

/* Coins display — plain text, not a button */
.toolbar-coins {
    color: var(--text-color);
    font-size: 14px;
    font-weight: bold;
    line-height: 1;
}

/* Settings gear button in header */
.header-icon-btn {
    color: var(--text-muted);
    padding: 0 6px;
}

@media (hover: hover) {
    .header-icon-btn:hover {
        background: var(--board-border);
        color: var(--text-color);
    }
}

.header-icon-btn svg {
    width: 14px;
    height: 14px;
}

h1 {
    margin: 0;
    font-size: 18px;
    padding: 2px;
}

a, .accent {
    color: var(--multiplier-3w); /* Red to match Triple Word squares */
    text-decoration: none;
}

/* Game Progress (legacy selectors for JS compat) */
#game-progress .progress-sep {
    color: var(--text-muted);
    font-weight: normal;
}

#progress-set,
#progress-round,
#progress-turn {
    /* Individual progress items can be styled here */
}

#target-info {
    display: flex;
    justify-content: center;
    color: var(--text-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-top: 4px;
}

#target-score {
    font-weight: bold;
    color: var(--text-color);
}

#target-score.target-met {
    color: var(--success-color);
}

#target-score.target-extra {
    color: var(--success-color);
}

#subtitle {
    width: 100%;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    margin-top: 2px;
    padding: 0 10px;
}

#subtitle .target-extra,
#subtitle .target-met {
    color: var(--success-color);
    font-weight: bold;
}

#subtitle-target,
#subtitle-turns {
    font-weight: bold;
    color: var(--text-color);
}

#status {
    width: 100%;
    font-size: 13px;
    text-align: center;
    margin-top: 1px;
    margin-bottom: 1px;
    min-height: 0;
    color: var(--text-muted);
}

#status strong {
    color: var(--text-color);
}

footer {
    position: fixed;
    background: var(--bg-color);
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    text-align: center;
    font-size: 12px;
    padding-top: 2px; /* Footer top starts 2px above feedback squares */
    color: var(--text-muted);
}

/* Hide footer (including feedback circles) when full-screen overlays are visible */
body:has(.full-screen:not(.hidden)) footer {
    display: none;
}

footer p {
    margin: 0 0 2px 0; /* Position text 2px above bottom of page */
}

/* Round/Set/Score in footer feedback row */
#footer-run-status {
    display: flex;
    align-items: center;
    font-size: 11px;
    color: var(--text-secondary);
    margin-left: 8px;
}

#footer-run-status .progress-sep {
    margin: 0 4px;
    opacity: 0.5;
}

#footer-score-progress {
    color: var(--accent-color);
    font-weight: 600;
}

#footer-score-progress.exceeded {
    color: var(--success-color);
}

#footer-score-progress.danger {
    color: var(--error-color);
}

/* Version tooltip on RogueLetters name */
.version-tooltip {
    position: relative;
    cursor: pointer;
    border-bottom: 1px dotted var(--text-muted);
}

.version-tooltip::after {
    content: attr(data-branch) " v" attr(data-version);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-secondary);
    color: var(--text-color);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s, visibility 0.15s;
    border: 1px solid var(--border);
    z-index: 1001;
    margin-bottom: 4px;
}

.version-tooltip:hover::after,
.version-tooltip.show-tooltip::after {
    opacity: 1;
    visibility: visible;
}

main {
    padding: 60px 5px 5px 5px; /* Adjusted for iOS - prevents board top being cut off */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Single Column Layout (mobile-first for all screens) */
.two-column-layout {
    display: flex;
    flex-direction: column;
    padding: 0;
    gap: 2px;
    max-width: 100%;
    margin: 0 auto;
}

/* Right Sidebar - Word Info */
#potential-words-list {
    min-height: 200px;
}


.potential-words {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.word-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    background: var(--bg-secondary);
    border-radius: 4px;
    border-left: 3px solid var(--multiplier-3w);
}

.word-item.invalid-word {
    border: 2px solid #e74c3c;
    border-radius: 4px;
    background: rgba(231, 76, 60, 0.1);
}

.word-text {
    font-weight: 600;
    color: var(--text-color);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.invalid-word .word-text {
    color: var(--danger-color);
}

/* Unvalidated words (when API fails) */
.word-item.unvalidated {
    border: 2px dashed #999;
    border-radius: 4px;
    background: rgba(150, 150, 150, 0.1);
    opacity: 0.7;
}

.unvalidated .word-text {
    color: #666;
}

.word-score {
    color: var(--tile-text);
    font-size: 14px;
    font-weight: bold;
}

.bingo-tag {
    display: inline-block;
    background: linear-gradient(135deg, #ffd700 0%, #ff8c00 100%);
    color: #000;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 6px;
    vertical-align: middle;
    animation: bingo-pulse 1s ease-in-out infinite;
}

@keyframes bingo-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.potential-words .total-score {
    margin-top: 10px;
    padding: 8px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    background: rgba(39, 174, 96, 0.2);
    border: 1px solid rgba(39, 174, 96, 0.5);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    width: 100%;
    font-family: inherit;
}

.potential-words .total-score:hover {
    background: rgba(39, 174, 96, 0.3);
}

.potential-words .total-score:active {
    transform: scale(0.98);
    background: rgba(39, 174, 96, 0.4);
}

.potential-words .total-score.disabled {
    background: rgba(231, 76, 60, 0.2);
    cursor: not-allowed;
    opacity: 0.7;
}

.potential-words .total-score.disabled:hover {
    background: rgba(231, 76, 60, 0.2);
    transform: none;
}

.potential-words .total-score.disabled .value {
    color: #c0392b;
}

.total-score .label {
    color: var(--text-color);
    font-size: 16px;
}

.total-score .value {
    color: var(--text-color);
    font-size: 18px;
}

/* Center Game Area */
#center-game-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    order: 1;
}

/* Game Board */
#board-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 3px; /* Mobile-first: minimal gap */
    position: relative;
    width: 100%;
    max-width: 100%;
    padding: 0;
}

.board {
    display: grid;
    --cell-size: calc((100vw - 10px) / 9); /* Dynamic sizing based on viewport */
    --max-cell-size: 40px; /* Maximum cell size */
    --actual-cell-size: min(var(--cell-size), var(--max-cell-size));
    grid-template-columns: repeat(9, var(--actual-cell-size));
    grid-template-rows: repeat(9, var(--actual-cell-size));
    gap: 0;
    background: var(--board-bg);
    padding: 0;
    border: 2px solid var(--board-border);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    width: fit-content;
    margin: 0 auto;
}

.board-cell {
    width: var(--actual-cell-size);
    height: var(--actual-cell-size);
    background: var(--board-square);
    border: 1px solid var(--board-bg);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: calc(var(--actual-cell-size) * 0.4);
    font-weight: bold;
    cursor: pointer;
    color: var(--text-muted);
    position: relative;
    transition: all 0.2s;
}

.board-cell:hover:not(.occupied) {
    transform: scale(1.1);
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.board-cell.occupied {
    cursor: default;
}

.board-cell.valid-placement {
    background: rgba(39, 174, 96, 0.3);
    animation: pulse 1s infinite;
}

.board-cell.invalid-placement {
    background: rgba(231, 76, 60, 0.3);
}

/* Multiplier cells */
.board-cell.double-word {
    background: var(--multiplier-2w);
}

.board-cell.triple-word {
    background: var(--multiplier-3w);
}

.board-cell.double-letter {
    background: var(--multiplier-2l);
}

.board-cell.triple-letter {
    background: var(--multiplier-3l);
}

.board-cell.center {
    background: var(--center-star);
    position: relative;
}

/* Round the outer corners of the four TW squares to match board radius */
.board-cell[data-row="0"][data-col="0"].triple-word {
    border-top-left-radius: 6px; /* Slightly less than board's 8px to account for border */
}

.board-cell[data-row="0"][data-col="8"].triple-word {
    border-top-right-radius: 6px;
}

.board-cell[data-row="8"][data-col="0"].triple-word {
    border-bottom-left-radius: 6px;
}

.board-cell[data-row="8"][data-col="8"].triple-word {
    border-bottom-right-radius: 6px;
}

.board-cell.center:not(.occupied)::after {
    content: "★";
    position: absolute;
    color: rgba(251, 191, 36, 0.6);
    font-size: 20px;
}

.board-cell:not(.occupied) .multiplier-text {
    font-size: calc(var(--actual-cell-size) * 0.3);
    position: absolute;
    bottom: 1px;
    right: 1px;
    color: var(--tile-text);
    opacity: 0.9;
}

/* Tiles - Classic Scrabble plastic */
.tile {
    width: 30px;
    height: 30px;
    background: var(--tile-bg);
    user-select: none;
    background-image:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.4) 0%,
            rgba(255, 255, 255, 0.1) 50%,
            rgba(0, 0, 0, 0.05) 100%
        );
    border: 2px solid var(--tile-border);
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-weight: bold;
    cursor: move;
    position: relative;
    transition: all 0.2s;
    color: var(--tile-text);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 2px 3px rgba(0, 0, 0, 0.3),
        0 1px 0 var(--tile-shadow);
}

@media (hover: hover) {
    .tile:hover {
        transform: translateY(-2px);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.6),
            0 4px 8px rgba(0, 0, 0, 0.3);
    }
}

.tile.selected {
    background: var(--tile-bg-selected);
    background-image:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.5) 0%,
            rgba(255, 255, 255, 0.2) 50%,
            rgba(0, 0, 0, 0.05) 100%
        );
    border-color: #DAA520;
    color: var(--tile-text);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 0 0 2px #DAA520,
        0 2px 8px rgba(218, 165, 32, 0.4);
}

.tile .tile-letter {
    font-size: 18px;
}

.tile .tile-score,
.tile .tile-value {
    position: absolute;
    bottom: 1px;
    right: 3px;  /* 2px left of edge for better visual balance */
    font-size: 8px;
    opacity: 0.7;
}

/* Ensure tiles on board maintain same appearance */
.board-cell .tile {
    width: 100%;
    height: 100%;
    font-size: 16px;
    margin: 0;
    border: 1px solid var(--tile-border);
}

.board-cell .tile .tile-letter {
    font-size: calc(var(--actual-cell-size) * 0.55);
}

.board-cell .tile .tile-value,
.board-cell .tile .tile-score {
    font-size: calc(var(--actual-cell-size) * 0.25);
    bottom: 0;
    right: 2px;  /* 2px left of edge for better visual balance */
}

/* Tile Rack Container */
#tile-rack-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-bottom: 2px; /* Mobile-first: minimal gap */
    position: relative;
}

/* Style the rack board - dynamic grid (JS sets columns based on rack size) */
#tile-rack-board {
    grid-template-columns: repeat(7, var(--actual-cell-size)); /* Default, overridden by JS */
    grid-template-rows: var(--actual-cell-size);
    background: transparent;
    border: none;
    box-shadow: none;
    max-width: 100%; /* Prevent overflow */
}

/* Hide borders on rack cells */
#tile-rack-board .board-cell {
    border: none;
    background: transparent;
    padding: 1px;  /* Creates small gap between rack tiles */
}

.tile-rack {
    display: grid;
    grid-template-columns: repeat(auto-fit, var(--actual-cell-size)); /* Dynamic columns */
    grid-template-rows: var(--actual-cell-size);
    gap: 0;  /* Same as board - no gaps */
    grid-auto-flow: column;  /* Force items to flow horizontally */
    width: fit-content;
    margin: 0 auto;
    position: relative;
    overflow: visible;  /* Allow tiles to extend visually */

    /* Wood rack background only on bottom portion */
    background:
        /* Main wood gradient - only bottom half visible */
        linear-gradient(
            to bottom,
            transparent 0%,      /* Transparent for tile tops */
            transparent 50%,     /* Keep transparent until halfway */
            #3d3d5c 51%,        /* Start stone sharply at bottom half */
            #353550 58%,        /* Dark stone back wall */
            #2d2d45 65%,        /* Transitioning forward */
            #252538 72%,        /* Mid-tone */
            #1e1e2e 80%,        /* Getting darker toward front */
            #1a1a28 87%,        /* Front area darker */
            #151520 92%,        /* Front ledge shadow */
            #101018 96%,        /* Deep shadow at base */
            #1a1a28 100%        /* Bottom edge */
        );

    /* No box-shadow on main container */
    box-shadow: none;

    border-radius: 0 0 4px 4px;  /* Only round bottom corners */
    border: none;  /* Remove all borders - will use pseudo-element */

    /* Wood grain texture overlay */
    position: relative;
    background-size: 100% 100%, 100% 100%;
}

/* Add wood grain pattern only on bottom wood portion */
.tile-rack::before {
    content: "";
    position: absolute;
    top: 50%;  /* Start at halfway point where wood begins */
    left: 0;
    right: 0;
    bottom: 0;
    background:
        /* Fine wood grain lines */
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 3px,
            rgba(0, 0, 0, 0.03) 3px,
            rgba(0, 0, 0, 0.03) 5px
        ),
        /* Subtle vertical wood texture */
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 20px,
            rgba(0, 0, 0, 0.02) 20px,
            rgba(0, 0, 0, 0.02) 21px
        );
    pointer-events: none;
    border-radius: 0 0 4px 4px;
    border: 1px solid #5c4a30;
    border-top: 1px solid #5c4a30;  /* Add dark top border to match sides */
    border-bottom-color: #3d2f1f;
    box-shadow:
        /* Only shadows on bottom wood portion */
        inset 0 -2px 4px rgba(0, 0, 0, 0.3),
        0 1px 2px rgba(0, 0, 0, 0.2);
    mix-blend-mode: multiply;
}

/* Front ledge lip */
.tile-rack::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;  /* Small ledge */
    background: linear-gradient(
        to bottom,
        #5c4a30 0%,
        #6b5637 50%,
        #5c4a30 100%
    );
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    box-shadow:
        inset 0 1px 1px rgba(0, 0, 0, 0.4),
        0 1px 1px rgba(0, 0, 0, 0.3);
}

/* Rack cells - invisible containers for tiles */
.rack-cell {
    width: var(--actual-cell-size);
    height: var(--actual-cell-size);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

/* Tiles in the rack - same as board tiles */
.tile-rack .tile {
    width: 100%;
    height: 100%;
    margin: 0;
    transition: all 0.2s ease;
}

/* Match board tile font sizes for consistent animation */
.tile-rack .tile .tile-letter,
.rack-cell .tile .tile-letter {
    font-size: calc(var(--actual-cell-size) * 0.55);
}

.tile-rack .tile .tile-value,
.tile-rack .tile .tile-score,
.rack-cell .tile .tile-value,
.rack-cell .tile .tile-score {
    font-size: calc(var(--actual-cell-size) * 0.25);
}

/* Only apply hover effects on devices that support hover (not touch) */
@media (hover: hover) {
    .tile-rack .tile:hover {
        /* Subtle hover effect */
        transform: translateY(-2px);
    }
}

/* Game over state styling */
.board.game-over {
    opacity: 0.7;
    pointer-events: none;
}

.board.game-over .tile {
    cursor: not-allowed;
}

/* Disable hover effects when game is over */
.board.game-over .tile:hover,
.tile-rack.game-over .tile:hover {
    transform: none;
    box-shadow: none;
}

/* Shuffle and Recall Buttons - matching Start Over button size */
.shuffle-btn,
.recall-btn {
    position: absolute;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    background: var(--board-square);
    color: var(--text-color);
    border: 1px solid var(--tile-border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease;
    z-index: 10;
}

.shuffle-btn svg,
.recall-btn svg {
    width: 20px;
    height: 20px;
}

.shuffle-btn {
    right: -40px;
}

.recall-btn {
    left: -40px;
}

.shuffle-btn:hover {
    background: var(--primary-color);
    color: white;
    transform: rotate(180deg);
}

.recall-btn:hover {
    background: var(--primary-color);
    color: white;
    transform: scale(1.1);
}

.shuffle-btn:active {
    transform: rotate(180deg) scale(0.95);
}

.recall-btn:active {
    transform: scale(0.95);
}

.shuffle-btn svg,
.recall-btn svg {
    width: 12px;
    height: 12px;
}

/* Exchange Tiles Button - positioned left like recall */
.exchange-btn {
    position: absolute;
    width: 36px;
    height: 36px;
    left: -40px;
    border-radius: 4px;
    background: var(--board-square);
    border: 1px solid var(--tile-border);
    color: var(--text-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease;
    z-index: 10;
}

@media (hover: hover) {
    .exchange-btn:hover {
        background: var(--primary-color);
        color: white;
        transform: scale(1.1);
    }
}

.exchange-btn:active {
    transform: scale(0.95);
}

.exchange-btn svg {
    width: 16px;
    height: 16px;
}

/* Cost badge on exchange button - top right like tile score */
.exchange-cost {
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 9px;
    font-weight: 700;
    color: var(--success-color);
    text-shadow: 0 0 2px rgba(0,0,0,0.5);
}

/* Exchange button grayed out when can't afford */
.exchange-btn.cannot-afford {
    opacity: 0.4;
    cursor: not-allowed;
}

.exchange-btn.cannot-afford:hover {
    background: var(--board-square);
    color: var(--text-color);
    transform: none;
}

.exchange-btn.cannot-afford .exchange-cost {
    color: var(--danger-color);
}

/* Hint Button - in header toolbar */
.hint-btn {
    color: var(--accent-color);
    border-color: var(--accent-color);
}

@media (hover: hover) {
    .hint-btn:hover {
        background: var(--accent-color);
        color: var(--bg-color);
    }
    .hint-btn:hover .hint-cost {
        color: var(--bg-color);
    }
}

.hint-btn:active {
    transform: scale(0.95);
}

.hint-btn svg {
    width: 14px;
    height: 14px;
}

/* Cost badge on hint button */
.hint-cost {
    font-size: 11px;
    font-weight: 700;
    color: var(--accent-color);
    line-height: 1;
}

/* Hint button grayed out when can't afford */
.hint-btn.cannot-afford {
    opacity: 0.4;
    cursor: not-allowed;
    border-color: var(--board-border);
}

.hint-btn.cannot-afford:hover {
    background: var(--board-square);
    color: var(--accent-color);
    transform: none;
}

.hint-btn.cannot-afford .hint-cost {
    color: var(--danger-color);
}

/* Hint highlight on board cells */
.hint-highlight {
    animation: hint-pulse 1s ease-in-out infinite;
    box-shadow: 0 0 12px 4px var(--accent-color) !important;
}

@keyframes hint-pulse {
    0%, 100% { box-shadow: 0 0 8px 2px var(--accent-color); }
    50% { box-shadow: 0 0 16px 6px var(--accent-color); }
}

/* Hint tile preview (ghost tile showing suggested letter) */
.hint-ghost-tile {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(var(--actual-cell-size) * 0.5);
    font-weight: bold;
    color: var(--accent-color);
    opacity: 0.7;
    pointer-events: none;
}

/* Exchange Modal - roguelike theme */
.modal-content.exchange-modal-content {
    background: var(--bg-secondary);
    border: 2px solid var(--board-border);
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    min-width: 280px;
    max-width: 90vw;
}

.modal-content.exchange-modal-content .popup-content {
    position: relative;
}

.modal-content.exchange-modal-content h2 {
    color: var(--text-color);
    margin: 0 0 8px 0;
    font-size: 22px;
    font-weight: 600;
}

#exchange-instruction {
    margin: 0 0 4px 0;
    color: var(--text-muted);
    font-size: 13px;
}

.exchange-cost-info {
    margin: 0 0 10px 0;
    color: var(--success-color);
    font-size: 14px;
    font-weight: 600;
}

/* Exchange rack - tiles in modal */
.exchange-rack {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin: 10px 0;
    padding: 8px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.exchange-rack .tile {
    width: 40px;
    height: 40px;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.exchange-rack .tile .tile-letter {
    font-size: 20px;
}

.exchange-rack .tile .tile-score {
    font-size: 10px;
}

/* Selected tile in exchange mode */
.tile.selected-for-exchange {
    background: #ffd700 !important;
    transform: scale(1.1);
    animation: selected-pulse 1s infinite;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
}

@keyframes selected-pulse {
    0%, 100% {
        transform: scale(1.05);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.9;
    }
}

/* Exchange confirm button */
.exchange-modal-content .popup-btn-primary {
    width: 100%;
    background: var(--success-color);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.exchange-modal-content .popup-btn-primary:hover:not(:disabled) {
    background: #229954;
}

.exchange-modal-content .popup-btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.exchange-modal-content .popup-buttons {
    margin-top: 12px;
}

/* Board Actions */
.board-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 15px;
}

/* Icon Button */
.icon-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 20px;
    background: #fff;
    border: 2px solid var(--danger-color);
    color: var(--danger-color);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
    font-weight: 600;
}

.icon-btn:hover {
    background: var(--danger-color);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
}

.icon-btn svg {
    width: 20px;
    height: 20px;
}

.icon-label {
    display: inline-block;
}

/* Submit Container - no longer needed, using total score as button */
.submit-container {
    display: none !important;  /* Always hidden - total score is the submit button */
}

/* Unified Potential Words Area - positioned after rack for all screen sizes */
#potential-words {
    display: none;  /* Hidden by default */
    padding: 1px 10px 5px 10px; /* Reduced top padding from 5px to 1px for tighter spacing */
    background: transparent;
    margin-bottom: 5px;
}

/* Show when tiles are placed */
#potential-words.has-tiles {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
}

#potential-words-list {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    min-height: 36px;
    flex: 1;
}

/* Horizontal word list */
#potential-words .word-item {
    padding: 4px 8px;
    border-radius: 12px;
    background: var(--board-square);
    border: 1px solid var(--board-border);
    display: inline-flex;
    gap: 4px;
    align-items: center;
    font-size: 12px;
}

#potential-words .word-item.invalid-word {
    border: 2px solid var(--danger-color);
    background: rgba(231, 76, 60, 0.15);
}

#potential-words .word-text {
    font-weight: 600;
    color: var(--text-color);
    text-transform: uppercase;
}

#potential-words .invalid-word .word-text {
    color: var(--danger-color);
}

#potential-words .word-score {
    color: var(--text-muted);
    font-size: 11px;
}

#potential-words .total-score {
    font-weight: bold;
    color: #ffffff;
    padding: 4px 8px;
    background: rgba(39, 174, 96, 0.3);
    border-radius: 12px;
    font-size: 14px;
    cursor: pointer;
    border: none;
    transition: background 0.2s, transform 0.1s;
    display: inline-block;
    line-height: normal;
    font-family: inherit;
}

#potential-words .total-score:active {
    transform: scale(0.95);
    background: rgba(39, 174, 96, 0.5);
}

#potential-words .total-score:hover {
    background: rgba(39, 174, 96, 0.4);
}

#potential-words .total-score.disabled {
    background: rgba(231, 76, 60, 0.2);
    color: #c0392b;
    cursor: not-allowed;
    opacity: 0.7;
}

#potential-words .total-score.disabled:hover {
    background: rgba(231, 76, 60, 0.2);
    transform: none;
}

/* Pulse animation for submit button when it becomes available */
@keyframes submit-pulse {
    0% {
        transform: scale(1);
        background: rgba(39, 174, 96, 0.3);
    }
    50% {
        transform: scale(1.1);
        background: rgba(39, 174, 96, 0.5);
    }
    100% {
        transform: scale(1);
        background: rgba(39, 174, 96, 0.3);
    }
}

#potential-words .total-score.pulse-once {
    animation: submit-pulse 0.6s ease-out 2;
}

/* Error message for invalid tile placement */
.placement-error {
    color: #c0392b;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 12px;
    background: rgba(231, 76, 60, 0.15);
    border: 1px solid rgba(231, 76, 60, 0.3);
    border-radius: 8px;
    text-align: center;
    margin-top: 8px;
}

/* Red letter for tiles that violate placement rules */
.board-cell.invalid-placement .tile .tile-letter {
    color: #d04436 !important;
}

.play-this-date-btn {
    font-weight: normal;
}

.btn {
    padding: 14px 28px;
    min-height: 48px; /* Ensure minimum touch target for mobile */
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-primary {
    background: var(--success-color);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.btn-primary:hover:not(:disabled) {
    background: #229954;
}

.btn-primary svg {
    display: inline-block;
    vertical-align: middle;
}

/* Icon-only button */
.btn-icon {
    width: 48px !important;
    height: 48px;
    padding: 0;
    border-radius: 50%;
    margin: 0 auto;
}

.btn-icon svg {
    margin: 0;
}

.btn-secondary {
    background: #ecf0f1;
    color: var(--primary-color);
}

.btn-secondary:hover:not(:disabled) {
    background: #bdc3c7;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* High Scores */
#high-scores-section {
    margin-top: 30px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
}

#high-scores-section h2 {
    margin-bottom: 15px;
    color: var(--primary-color);
}

.score-entry {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    margin-bottom: 8px;
    background: white;
    border-radius: 4px;
    transition: all 0.2s;
}

.score-entry:hover {
    background: #e3f2fd;
    transform: translateX(5px);
}

.score-rank {
    font-weight: bold;
    color: var(--secondary-color);
    margin-right: 15px;
}

.score-name {
    flex: 1;
}

.score-value {
    font-weight: bold;
    color: var(--primary-color);
}

/* Footer - removed duplicate, see line 89 for actual footer styles */
/* FeedbackRow and feedback-square - removed duplicates, see line 870+ for actual styles */
/* share-icon-btn - removed unused style */

/* Game Over */
#game-over-section {
    text-align: center;
    padding: 30px;
}

#game-over-section h2 {
    color: var(--primary-color);
    margin-bottom: 20px;
}

#final-score-display {
    margin-bottom: 30px;
}

.final-score-number {
    font-size: 4em;
    font-weight: bold;
    color: var(--secondary-color);
    line-height: 1;
}

.final-score-label {
    font-size: 1.2em;
    color: var(--primary-color);
    margin-top: 5px;
}

#score-submission {
    margin-bottom: 20px;
}

#player-name {
    padding: 10px;
    font-size: 16px;
    border: 2px solid #ddd;
    border-radius: 4px;
    margin-right: 10px;
    width: 200px;
}

/* Loading */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 5px solid var(--board-border);
    border-top: 5px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes pulse {
    0% { opacity: 0.6; }
    50% { opacity: 1; }
    100% { opacity: 0.6; }
}

/* Word Preview */
.word-preview {
    margin: 15px 20px;
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: 6px;
    border: 2px solid var(--board-border);
    display: none;
}

.preview-words {
    font-size: 1.1em;
    color: var(--primary-color);
    margin-bottom: 8px;
}

.preview-word {
    font-weight: 600;
    color: var(--success-color);
    margin: 0 4px;
}

.preview-score {
    font-size: 1.2em;
    font-weight: bold;
    color: var(--primary-color);
}

/* Wikipedia Info - Future Development */
/* Currently hidden - will display Wikipedia context about the starting word */
.wiki-context {
    margin: 15px 0;
    padding: 12px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    color: white;
}

.wiki-context #wiki-text {
    font-size: 0.9em;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 8px;
}

.wiki-context strong {
    color: var(--secondary-color);
}

#wiki-link {
    display: inline-block;
    margin-top: 8px;
    color: var(--secondary-color);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s;
}

#wiki-link:hover {
    color: #e5b687;
    transform: translateX(3px);
}

/* Modal */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content {
    background: var(--bg-secondary);
    padding: 30px;
    border-radius: 8px;
    min-width: 300px;
    text-align: center;
    border: 2px solid var(--board-border);
    color: var(--text-color);
}

.modal-content h3 {
    color: var(--danger-color);
    margin-bottom: 15px;
}

/* Blank Tiles - empty in rack, 70% opacity letter when assigned */
.tile.blank-tile {
    /* Same appearance as regular tile, just empty */
}

/* Letter on an assigned blank tile - 70% opacity */
.tile .tile-letter.blank-letter {
    opacity: 0.7;
}

/* Blank Letter Selection Modal */
.blank-letter-modal-content h3 {
    color: var(--text-color);
    margin-bottom: 20px;
}

.letter-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    margin-bottom: 20px;
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
}

.letter-grid button {
    width: 36px;
    height: 36px;
    font-size: 16px;
    font-weight: bold;
    color: #333;
    background: var(--tile-bg);
    border: 2px solid var(--tile-border);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
    -webkit-appearance: none;  /* Prevent iOS Safari default styling */
}

.letter-grid button:hover {
    background: #ffd700;
    border-color: #daa520;
    transform: scale(1.1);
}

.letter-grid button:active {
    transform: scale(0.95);
}


@keyframes shuffle-animation {
    0% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(180deg); }
    100% { transform: translateY(0) rotate(360deg); }
}

@keyframes recall-tile {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(20px) scale(0.9);
    }
    100% {
        opacity: 0;
        transform: translateY(40px) scale(0.8);
    }
}

/* Tile selection enhancement */

.tile.selected {
    cursor: grabbing;
    animation: selected-pulse 1s infinite;
}

.tile.recalling {
    animation: recall-tile 0.4s ease-in forwards;
    pointer-events: none;
}


/* Smooth tile pickup animation - no scaling for physical tiles */
@keyframes tile-pickup {
    0% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-2px) rotate(1deg); }
    100% { transform: translateY(-1px) rotate(0deg); }
}


/* Tile rearrangement feedback */
/* Smooth tile sliding animations - merged duplicate */


@keyframes selected-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.9; }
}

/* Pop animation for tiles when feedback squares are clicked */
@keyframes pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.tile.pop {
    animation: pop 0.6s ease-out;
}

.feedback-square.pop {
    animation: pop 0.6s ease-out;
}


/* Hidden elements */
.hidden {
    display: none !important;
}

/* Footer and Feedback Elements - Identical to WikiDates */
#feedbackFooter {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px; /* No vertical padding - footer padding-top handles spacing */
    margin-bottom: 2px; /* 2px spacing between feedback squares and copyright line */
}

#feedbackRow {
    display: flex;
    gap: 8px;
    margin: 0 auto;
}

.feedback-square {
    width: 30px;
    height: 30px;
    background-color: var(--tile-bg);
    border-radius: 50%;
    border: 2px solid var(--tile-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    color: var(--tile-text);
    position: relative;
    transition: border-color 0.3s ease;
}

.feedback-square.current-turn {
    border: 2px solid var(--multiplier-3w);
    box-shadow: 0 0 6px rgba(220, 38, 38, 0.5);
}

.feedback-square.completed {
    background-color: var(--board-square);
}

/* Score-based color coding for feedback squares */
.feedback-square.score-low {
    background-color: #1d4877; /* 1-10 points - dark blue */
    color: white;
}

.feedback-square.score-medium {
    background-color: #1b8a5a; /* 11-19 points - green */
    color: white;
}

.feedback-square.score-good {
    background-color: #fbb021; /* 20-29 points - yellow/gold */
    color: #333;
}

.feedback-square.score-great {
    background-color: #f68838; /* 30-39 points - orange */
    color: white;
}

.feedback-square.score-excellent {
    background-color: #ee3e32; /* 40-49 points - red */
    color: white;
}

.feedback-square.score-amazing {
    background-color: #9b59b6; /* 50+ points - purple */
    color: white;
}

.feedback-square.correct {
    background-color: #4caf50;
}

.feedback-square.incorrect {
    background-color: #f44336;
}

.feedback-square.completed {
    cursor: pointer;
    transition: transform 0.2s ease;
}

.feedback-square.completed:hover {
    transform: scale(1.05);
}

/* Pop animation for feedback squares and tiles */
@keyframes pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.feedback-square.pop {
    animation: pop 0.8s ease both;
}

.board-cell .tile.pop {
    animation: pop 0.8s ease both;
    z-index: 10;
}

.total-score-display {
    display: flex;
    align-items: center;
    margin-left: 8px;
    font-size: 20px;
    font-weight: bold;
    color: var(--tile-text);
    transition: opacity 0.3s ease;
}

.total-score-display::before {
    content: "=";
    margin-right: 8px;
    color: var(--primary-color);
}

#shareIcon {
    background-color: var(--primary-color);
    padding: 4px;
    border-radius: 50%;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: opacity 0.3s ease-in-out, transform 0.2s ease-in-out;
    opacity: 0.8;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-top: 1px;
}

#shareIcon:hover {
    opacity: 1;
    transform: scale(1.1);
}

#shareIcon svg {
    width: 24px;
    height: 24px;
    fill: white;
}

/* Pop animation for feedback squares */
@keyframes pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.feedback-square.pop {
    animation: pop 0.4s ease-in-out;
}

/* Game Completion Popup - Using WikiDates Structure (no backdrop) */

#game-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    background-color: var(--bg-secondary);
    border: 2px solid var(--board-border);
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.6);
    min-width: 280px;
    text-align: center;
}

#game-popup.hidden {
    display: none;
}

/* Popup content wrapper */
#game-popup .popup-content {
    position: relative;
}

/* Title */
#game-popup h2 {
    margin-top: 0;
    margin-bottom: 8px;
    color: var(--text-color);
    font-size: 22px;
    font-weight: 600;
}

/* Score section */
#popup-score-section {
    margin: 8px 0;
}

#popup-score-label {
    color: var(--text-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 6px;
}

#popup-score-value {
    color: var(--text-accent);
    font-size: 36px;
    font-weight: bold;
    margin: 3px 0;
}

/* Buttons container - matches WikiDates popup-actions */
#popup-buttons {
    margin-top: 8px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

/* Primary button - WikiLetters yellow */
/* Base popup button styles - Compact */
.popup-btn {
    display: inline-block;
    padding: 8px 16px;  /* Reduced from 12px 24px */
    border-radius: 4px;
    font-size: 14px;  /* Reduced from 16px */
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-top: 8px;  /* Reduced from 10px */
}

.popup-btn-primary {
    background-color: var(--primary-color);
    color: var(--bg-color);
    border: 1px solid var(--primary-color);
    padding: 8px 16px;  /* Reduced from 10px 20px */
    border-radius: 4px;
    font-size: 14px;  /* Reduced from 16px */
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.popup-btn-primary:hover {
    background-color: #ef4444;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.4);
}

/* Secondary button - Compact */
.popup-btn-secondary {
    background-color: var(--board-square);
    color: var(--text-color);
    border: 1px solid var(--board-border);
    padding: 8px 16px;  /* Reduced from 10px 20px */
    border-radius: 4px;
    font-size: 12px;  /* Reduced from 14px */
    font-weight: normal;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.popup-btn-secondary:hover {
    background-color: var(--board-border);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Close button */
.popup-close-btn {
    position: absolute;
    top: -5px;
    right: -5px;
    background: transparent;
    color: var(--text-muted);
    border: none;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    padding: 2px;
}

.popup-close-btn:hover {
    color: #4a3c28;
}

/* Game Navigation Tabs */
.game-tabs {
    display: flex;
    justify-content: center;
    margin-top: 12px;
    padding-top: 0;
    border-top: none;
    gap: 0;
}

.game-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 8px;
    text-decoration: none;
    color: var(--text-muted);
    background: var(--board-square);
    transition: all 0.2s ease;
    position: relative;
    border: 1px solid var(--board-border);
    border-right: none;
}

.game-tab:first-child {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.game-tab:last-child {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    border-right: 1px solid var(--board-border);
}

.game-tab-active {
    background: var(--primary-color);
    color: var(--bg-color);
    font-weight: 600;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
    cursor: default;
}

.game-tab:not(.game-tab-active):hover {
    background: var(--board-border);
    transform: translateY(-1px);
}

.tab-emoji {
    font-size: 20px;
    margin-bottom: 4px;
}

.tab-name {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* High Score Section in Popup */
#popup-high-score-section {
    margin: 6px 0;
}

.high-score-comparison {
    margin: 8px 0;
    text-align: center;
}

#high-score-label {
    color: var(--text-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.high-score-comparison a {
    color: #4CAF50;
    text-decoration: underline;
    cursor: pointer;
    font-weight: bold;
    font-size: 12px; /* Match label size */
}

.high-score-comparison a:hover {
    color: #45a049;
}

#high-score-achievement {
    background: linear-gradient(135deg, #f0f9f0 0%, #fffef8 100%); /* Subtle green-cream gradient */
    color: #4a3c28; /* WikiLetters dark brown */
    font-weight: bold;
    padding: 12px;
    margin: 10px 0;
    border-radius: 4px;
    text-align: center;
    box-shadow: inset 0 0 20px rgba(76, 175, 80, 0.15), 0 2px 8px rgba(76, 175, 80, 0.1); /* Soft green inner glow */
    animation: celebration 0.5s ease-out;
}

@keyframes celebration {
    0% { transform: scale(0.8); opacity: 0; }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); opacity: 1; }
}

/* ============================================================================
   RUN MODE STYLES
   ============================================================================ */

/* Run Info Bar */
#run-info {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 8px 16px;
    background: var(--accent);
    color: white;
    font-weight: bold;
    font-size: 14px;
}

#run-info.hidden {
    display: none;
}

#run-round, #run-target {
    display: inline-block;
}

/* Run Popup Shared Styles */
#round-complete-popup,
#run-failed-popup,
#run-victory-popup,
#start-run-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

#round-complete-popup.hidden,
#run-failed-popup.hidden,
#run-victory-popup.hidden,
#start-run-popup.hidden {
    display: none;
}

/* Run Popup Content - Compact */
#round-complete-popup .popup-content,
#run-failed-popup .popup-content,
#run-victory-popup .popup-content,
#start-run-popup .popup-content {
    background-color: var(--bg-secondary);
    border: 2px solid var(--board-border);
    border-radius: 8px;
    padding: 14px 16px;  /* Reduced from 20px 30px */
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.6);
    max-width: 340px;
    width: 90%;
    text-align: center;
    position: relative;
}

/* Run Popup Titles - Compact */
#round-complete-popup h2,
#run-failed-popup h2,
#run-victory-popup h2,
#start-run-popup h2 {
    margin-top: 0;
    margin-bottom: 8px;  /* Reduced from 12px */
    color: var(--text-color);
    font-size: 18px;  /* Reduced from 24px */
    font-weight: 600;
}

/* Run Popup Paragraph Text - Compact */
#round-complete-popup p,
#run-failed-popup p,
#run-victory-popup p,
#start-run-popup p {
    color: var(--text-muted);
    font-size: 13px;  /* Reduced from 15px */
    margin: 6px 0;  /* Reduced from 10px */
}

/* Round Result Display - Compact */
.round-result {
    margin: 12px 0;  /* Reduced from 20px */
    padding: 10px;   /* Reduced from 15px */
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    border: 1px solid var(--board-border);
}

.result-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 18px;
    color: var(--text-color);
}

.result-row.extra span:last-child {
    color: #4caf50;
    font-weight: bold;
}

.result-row.deficit span:last-child {
    color: #f44336;
    font-weight: bold;
}

/* Fail message */
.fail-message {
    color: #f44336;
    font-size: 16px;
    margin: 15px 0;
}

/* Targets Preview */
.targets-preview {
    margin: 20px 0;
    padding: 15px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    border: 1px solid var(--board-border);
    text-align: left;
}

.target-item {
    padding: 8px 0;
    font-size: 16px;
    color: var(--text-color);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

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

/* Victory summary */
#victory-rounds-summary {
    margin: 15px 0;
    font-size: 14px;
    color: var(--text-muted);
}

/* Progress bar for target */
.target-progress {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    margin-top: 10px;
    overflow: hidden;
}

.target-progress-fill {
    height: 100%;
    background: var(--accent);
    transition: width 0.3s ease;
}

.target-progress-fill.exceeded {
    background: #4caf50;
}

.target-progress-fill.danger {
    background: #f44336;
}

/* Target Progress Container */
#target-progress-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-left: 10px;
}

#target-progress-container.hidden {
    display: none;
}

#target-progress-text {
    font-size: 12px;
    color: var(--white);
    opacity: 0.9;
}

/* ============================================================================
   FULL SCREEN VIEWS (Earnings, Set Complete)
   ============================================================================ */

.full-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-primary);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1005; /* Above footer (1000) but below bottom-sheets (1100) */
    padding-top: 80px; /* Account for header */
    padding-bottom: 80px; /* Account for footer */
    box-sizing: border-box;
}

.full-screen.hidden {
    display: none;
}

.full-screen-content {
    background-color: var(--bg-secondary);
    border: 2px solid var(--board-border);
    border-radius: 12px;
    padding: 16px 20px;  /* Reduced from 30px 40px */
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.6);
    max-width: 400px;
    width: 90%;
    text-align: center;
}

.full-screen-content h2 {
    margin-top: 0;
    margin-bottom: 12px;  /* Reduced from 20px */
    color: var(--text-color);
    font-size: 18px;  /* Reduced from 28px */
    font-weight: 600;
}

.full-screen-content h3 {
    margin: 12px 0 6px;  /* Reduced from 20px 0 10px */
    color: var(--text-color);
    font-size: 14px;  /* Reduced from 18px */
    font-weight: 600;
}

/* Score Summary (Score / Target display) */
.score-summary {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin: 20px 0;
}

.score-pair {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.score-pair .score-label {
    font-size: 14px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.score-pair .score-value {
    font-size: 36px;
    font-weight: bold;
    color: var(--text-color);
}

/* Extra / Target Reached Display */
.extra-display {
    font-size: 20px;
    color: #4caf50;
    font-weight: 600;
    margin: 10px 0 20px;
}

.target-reached-display {
    font-size: 20px;
    color: var(--accent);
    font-weight: 600;
    margin: 10px 0 20px;
}

/* Earnings Breakdown - Compact */
.earnings-breakdown {
    margin: 12px 0;  /* Reduced from 20px */
    padding: 12px;   /* Reduced from 20px */
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    border: 1px solid var(--board-border);
}

.earnings-breakdown h3 {
    margin: 0 0 8px;  /* Reduced from 15px */
    font-size: 12px;  /* Reduced from 16px */
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
}

.earnings-row {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;  /* Reduced from 8px */
    font-size: 14px;  /* Reduced from 16px */
    color: var(--text-color);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.earnings-row:last-of-type {
    border-bottom: none;
}

.bonus-rate {
    font-size: 10px;  /* Reduced from 12px */
    color: var(--text-muted);
}

.earnings-row.earnings-total {
    padding-top: 10px;  /* Reduced from 12px */
    margin-top: 6px;  /* Reduced from 8px */
    border-top: 1px solid var(--board-border);
    font-weight: bold;
    font-size: 16px;  /* Reduced from 18px */
    color: #4caf50;
}

.earnings-row.earnings-boost-row {
    color: #ffd700;
    font-size: 12px;  /* Reduced from 14px */
}

.bank-update {
    margin-top: 10px;  /* Reduced from 15px */
    padding-top: 10px;  /* Reduced from 15px */
    border-top: 1px solid var(--board-border);
    font-size: 15px;  /* Reduced from 18px */
    color: var(--text-color);
}

.bank-update #bank-after {
    color: #4caf50;
    font-weight: bold;
}

/* Set Complete Screen */
.set-summary {
    margin: 20px 0;
}

.set-total {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.set-total-label {
    font-size: 14px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.set-total-value {
    font-size: 48px;
    font-weight: bold;
    color: var(--accent);
}

.rounds-summary {
    margin: 20px 0;
    padding: 15px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

.round-summary-row {
    padding: 6px 0;
    font-size: 14px;
    color: var(--text-muted);
}

.next-set-preview {
    margin: 20px 0;
    padding: 15px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    border: 1px solid var(--board-border);
}

.next-set-preview h3 {
    margin: 0 0 10px;
    color: var(--text-color);
}

.target-preview {
    padding: 6px 0;
    font-size: 14px;
    color: var(--text-muted);
}

/* Coin display in header */
#progress-coins {
    color: #4caf50;
    font-weight: 600;
}

/* ============================================================================
   SHOP SCREEN
   ============================================================================ */

.shop-subtitle {
    color: var(--text-muted);
    margin-bottom: 0.5rem;
    font-size: 14px;
}

.shop-bank {
    font-size: 1rem;
    color: #4caf50;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.shop-tiles {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 0.5rem;
}

.shop-tile-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transition: opacity 0.2s ease-out, width 0.2s ease-out;
}

/* Disable transitions when resetting shop */
.shop-tile-option.no-transition {
    transition: none !important;
}

.shop-tile-option.purchased {
    opacity: 0.3;
    pointer-events: none;
}

.shop-tile-option.purchased .shop-tile {
    filter: grayscale(100%);
}

.shop-tile-option.purchased .shop-button {
    visibility: hidden;
}

/* Shop tile - display only, not interactive */
.shop-tile {
    width: 36px;
    height: 36px;
    position: relative;
    cursor: default;
    pointer-events: none;
}

.shop-tile:hover {
    transform: none;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 2px 3px rgba(0, 0, 0, 0.3),
        0 1px 1px rgba(0, 0, 0, 0.2);
}

.shop-tile .tile-letter {
    font-size: 20px;
}

.shop-tile .tile-score {
    font-size: 9px;
}

/* Buffed tile styling - gold border */
.buffed-tile {
    border: 2px solid #ffd700 !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 2px 3px rgba(0, 0, 0, 0.3),
        0 0 0 1px #ffd700;
}

/* Coin tile styling - green border */
.coin-tile {
    border: 2px solid var(--success-color) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 2px 3px rgba(0, 0, 0, 0.3),
        0 0 0 1px var(--success-color);
}

/* Buffed tile - score in gold circle */
.buffed-tile .tile-score {
    background: #ffd700;
    color: #000;
    border-radius: 50%;
    min-width: 11px;
    height: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2px;
}

/* Coin tile indicator - green circle with $1 */
.tile-coin-indicator {
    position: absolute;
    top: 1px;
    right: 3px;  /* 2px left of edge for better visual balance */
    font-size: 7px;
    font-weight: 700;
    color: #000;  /* Black text for visibility on green */
    background: var(--success-color);
    border-radius: 50%;
    min-width: 11px;
    height: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1px;
}

/* Pink tile styling - pink border for 1.5× word multiplier */
.pink-tile {
    border: 2px solid #ff69b4 !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 2px 3px rgba(0, 0, 0, 0.3),
        0 0 0 1px #ff69b4;
}

/* Pink tile indicator - pink pill with ×1.5 */
.tile-pink-indicator {
    position: absolute;
    top: 1px;
    right: 3px;
    font-size: 6px;
    font-weight: 700;
    color: #000;  /* Black text for visibility on pink */
    background: #ff69b4;
    border-radius: 6px;
    min-width: 16px;
    height: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2px;
}

.shop-tile-buff-label {
    font-size: 10px;
    color: #ffd700;
    font-weight: 600;
    margin-top: -2px;
}

.shop-buy-buttons {
    display: flex;
    flex-direction: column;
    border-radius: 4px;
    overflow: hidden;
    width: 100%;
}

.shop-buy-btn {
    color: white;
    border: none;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 600;
    width: 100%;
    cursor: pointer;
    transition: filter 0.2s, opacity 0.2s;
    white-space: nowrap;
}

/* Both buttons start neutral */
.shop-buy-btn.shop-add-btn,
.shop-buy-btn.shop-replace-btn {
    background: var(--board-border);
    transition: background 0.15s, filter 0.15s;
}

.shop-buy-btn.shop-add-btn {
    border-radius: 4px 4px 0 0;
    border-bottom: 1px solid rgba(255,255,255,0.2);
}

.shop-buy-btn.shop-replace-btn {
    border-radius: 0 0 4px 4px;
}

/* Hover: both go gold with black text */
.shop-buy-btn:hover:not(.cannot-afford):not(:disabled) {
    background: #ffd700;
    color: #000;
}

.shop-buy-btn:active:not(.cannot-afford):not(:disabled) {
    transform: scale(0.98);
}

.shop-buy-btn.cannot-afford {
    opacity: 0.4;
    cursor: not-allowed;
}

.shop-pool-info {
    color: var(--text-muted);
    font-size: 0.8rem;
    margin: 0.25rem 0;
}

/* ============================================
   Bag Viewer
   ============================================ */

.bag-icon-btn {
    color: var(--text-muted);
    padding: 0 6px;
}

.bag-icon-btn svg {
    width: 14px;
    height: 14px;
}

@media (hover: hover) {
    .bag-icon-btn:hover {
        background: var(--board-border);
        color: var(--text-color);
    }
}

/* Bag Viewer Modal */
.modal-content.bag-modal-content {
    background: var(--bg-secondary);
    border: 2px solid var(--board-border);
    padding: 10px;
    border-radius: 8px;
    text-align: center;
    max-width: 340px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
}

.modal-content.bag-modal-content .popup-content {
    position: relative;
}

.modal-content.bag-modal-content h2 {
    color: var(--text-color);
    margin: 0 0 8px 0;
    font-size: 22px;
    font-weight: 600;
}

.bag-summary {
    text-align: center;
    font-size: 1.1rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.bag-summary #bag-remaining,
.bag-summary #bag-remaining-sheet {
    color: var(--accent);
    font-weight: bold;
}

/* Bag viewer in bottom sheet */
.bag-viewer-sheet {
    padding: 0;
}

.bag-viewer-sheet .bottom-sheet-title {
    text-align: center;
    margin-bottom: 0.5rem;
}

.bag-viewer-sheet .bag-summary {
    margin-bottom: 0.75rem;
}

.bag-viewer-sheet .bag-tiles-grid {
    max-height: 40vh;
    overflow-y: auto;
    padding: 4px;
}

.bag-toggle {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-bottom: 1rem;
}

.bag-toggle-btn {
    background: var(--tile-bg);
    border: 1px solid var(--border);
    color: var(--tile-text);
    padding: 6px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.bag-toggle-btn:hover {
    background: var(--surface);
    color: var(--text-color);
}

.bag-toggle-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

.bag-tiles-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 3px;
}

/* Mini tiles that look like actual game tiles */
.bag-mini-tile {
    width: 28px;
    height: 28px;
    background: var(--tile-bg);
    border: 1px solid var(--tile-border);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 1px 2px rgba(0, 0, 0, 0.2);
}

.bag-mini-tile-letter {
    font-size: 14px;
    font-weight: bold;
    color: var(--tile-text);
    line-height: 1;
}

.bag-mini-tile-score {
    position: absolute;
    bottom: 1px;
    right: 2px;
    font-size: 8px;
    font-weight: bold;
    color: var(--tile-text);
    opacity: 0.8;
}

/* Selectable tiles in replacement mode */
.bag-mini-tile.selectable {
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.1s;
}

.bag-mini-tile.selectable:hover {
    transform: scale(1.15);
    box-shadow: 0 0 8px rgba(220, 38, 38, 0.6);
    z-index: 1;
}

/* Buffed bag tiles - gold border */
.bag-mini-tile.buffed-tile {
    border: 1.5px solid #ffd700;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 1px 2px rgba(0, 0, 0, 0.2),
        0 0 0 0.5px #ffd700;
}

/* Coin bag tiles - green border */
.bag-mini-tile.coin-tile {
    border: 1.5px solid var(--success-color);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 1px 2px rgba(0, 0, 0, 0.2),
        0 0 0 0.5px var(--success-color);
}

/* Pink bag tiles - pink border */
.bag-mini-tile.pink-tile {
    border: 1.5px solid #ff69b4;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 1px 2px rgba(0, 0, 0, 0.2),
        0 0 0 0.5px #ff69b4;
}

/* Buffed bag tiles - score in gold circle */
.bag-mini-tile.buffed-tile .bag-mini-tile-score {
    background: #ffd700;
    color: #000;
    border-radius: 50%;
    min-width: 8px;
    height: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1px;
}

/* Coin bag tiles - green circle indicator */
.bag-mini-tile .bag-coin-indicator {
    position: absolute;
    top: -1px;
    right: 1px;  /* 2px left of edge */
    font-size: 5px;
    font-weight: 700;
    color: #000;  /* Black text for visibility on green */
    background: var(--success-color);
    border-radius: 50%;
    min-width: 8px;
    height: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1px;
}

.bag-tiles-grid.replacement-mode {
    /* Slight red tint to indicate removal mode */
    background: rgba(220, 38, 38, 0.05);
    padding: 8px;
    border-radius: 8px;
    margin: -8px;
}

/* ============================================================================
   ROGUES SYSTEM STYLES
   ============================================================================ */

/* Rogue Inventory (below rack during gameplay) */
#rogue-inventory {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 8px 0;
    margin-top: 8px;
}

#rogue-slots {
    display: flex;
    gap: 6px;
}

.rogue-slot {
    width: 36px;
    height: 46px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: 20px;
    transition: transform 0.15s, box-shadow 0.15s;
}

.rogue-slot.empty {
    background: rgba(255, 255, 255, 0.05);
    border: 2px dashed rgba(255, 255, 255, 0.2);
}

.rogue-slot.filled {
    background: linear-gradient(135deg, #3a2d5c 0%, #2a1f4c 100%);
    border: 2px solid var(--accent-color);
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.rogue-slot.filled:hover {
    transform: scale(1.1);
    box-shadow: 0 0 12px rgba(220, 38, 38, 0.4);
}

.rogue-slot.triggered {
    animation: rogue-trigger 0.6s ease-out;
}

@keyframes rogue-trigger {
    0% {
        transform: scale(1);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }
    25% {
        transform: scale(1.2);
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
        border-color: #ffd700;
    }
    50% {
        transform: scale(1.15);
        box-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        border-color: var(--accent-color);
    }
}

.rogue-slot-icon {
    pointer-events: none;
}

.rogue-slot-name {
    font-size: 7px;
    color: var(--text-secondary);
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1;
    pointer-events: none;
}

/* Shop Tile Set Upgrade Section */
.shop-upgrade-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.shop-upgrade-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, #2d4a3a 0%, #1f3a2c 100%);
    border: 2px solid var(--success-color);
    border-radius: 12px;
    padding: 12px 16px;
    gap: 12px;
}

.shop-upgrade-card.cannot-afford {
    opacity: 0.6;
}

.shop-upgrade-icon {
    font-size: 28px;
}

.shop-upgrade-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.shop-upgrade-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-color);
    margin: 0;
}

.shop-upgrade-desc {
    font-size: 11px;
    color: var(--text-secondary);
    margin: 0;
}

.shop-upgrade-status {
    font-size: 10px;
    color: var(--success-color);
    margin: 4px 0 0 0;
}

.shop-upgrade-btn {
    font-size: 14px;
    font-weight: 700;
    color: #000;
    background: var(--success-color);
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.shop-upgrade-btn:hover {
    background: #5eeb93;
    transform: scale(1.05);
}

.shop-upgrade-btn:disabled,
.shop-upgrade-btn.cannot-afford {
    background: #555;
    color: #888;
    cursor: not-allowed;
    transform: none;
}

/* Shop Rogue Section */
#shop-rogue-section {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.shop-section-header {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0 0 12px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Container for 3 rogue cards in shop */
.shop-rogue-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.shop-rogue-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, #3a2d5c 0%, #2a1f4c 100%);
    border: 2px solid var(--accent-color);
    border-radius: 12px;
    padding: 12px 16px;
    gap: 12px;
}

.shop-rogue-card.hidden {
    display: none;
}

.shop-rogue-card.empty-slot {
    justify-content: center;
    border-style: dashed;
    opacity: 0.5;
    min-height: 52px;
}

.shop-rogue-card.empty-slot .empty-slot-text {
    color: var(--text-secondary);
    font-size: 20px;
}

.shop-rogue-card.purchased {
    opacity: 0.6;
}

.shop-rogue-sold {
    font-size: 12px;
    font-weight: 700;
    color: var(--success-color, #4ade80);
    padding: 4px 10px;
    background: rgba(74, 222, 128, 0.15);
    border-radius: 4px;
    letter-spacing: 1px;
}

.rogue-card-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.rogue-icon {
    font-size: 28px;
}

.rogue-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rogue-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.rogue-desc {
    font-size: 12px;
    color: var(--text-secondary);
}

.shop-rogue-buy-btn {
    background: var(--board-border);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, opacity 0.15s;
}

.shop-rogue-buy-btn:hover:not(.cannot-afford):not(:disabled) {
    background: #ffd700;
    color: #000;
}

.shop-rogue-buy-btn.cannot-afford {
    opacity: 0.5;
    cursor: not-allowed;
}

.rogue-inventory-status {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 8px 0 0 0;
    text-align: center;
}

/* ============================================================================
   COMPACT SHOP LAYOUT (Balatro-inspired)
   ============================================================================ */

/* Shop needs minimal padding to fit content on small screens */
#shop-screen.full-screen {
    padding-top: 50px;  /* Reduced from 80px - just enough for header */
    padding-bottom: 20px; /* Reduced from 80px - footer handled separately */
    align-items: stretch; /* Allow shop-compact to fill width */
}

.shop-compact {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 12px 16px;
    box-sizing: border-box;
}

/* Tiles Row: 3 items (2 tiles + upgrade) */
.shop-tiles-row {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 16px;
}

.shop-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: background 0.15s, opacity 0.15s;
}

.shop-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.shop-item.purchased {
    opacity: 0.3;
    pointer-events: none;
}

.shop-item.cannot-afford {
    opacity: 0.5;
}

.shop-item .shop-tile {
    width: 32px;
    height: 32px;
    pointer-events: none;
}

.shop-item .shop-tile .tile-letter {
    font-size: 18px;
}

.shop-item .shop-tile .tile-score {
    font-size: 8px;
}

.shop-item-label {
    font-size: 8px;
    color: #ffd700;
    font-weight: 600;
}

.shop-upgrade-icon-box {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    background: linear-gradient(135deg, #2d4a3a 0%, #1f3a2c 100%);
    border: 2px solid var(--success-color);
    border-radius: 6px;
}

/* Rogues Row: 3 icons with prices */
.shop-rogues-row {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 16px;
}

.shop-rogue-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: background 0.15s, opacity 0.15s;
}

.shop-rogue-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.shop-rogue-item.purchased {
    opacity: 0.3;
    pointer-events: none;
}

.shop-rogue-item.cannot-afford {
    opacity: 0.5;
}

.shop-rogue-item.empty-slot {
    opacity: 0.3;
    pointer-events: none;
}

.shop-rogue-item.hidden {
    display: none;
}

.shop-rogue-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    background: linear-gradient(135deg, #3a2d5c 0%, #2a1f4c 100%);
    border: 2px solid var(--accent-color);
    border-radius: 50%;
}

.shop-rogue-item.purchased .shop-rogue-icon::after {
    content: '✓';
    position: absolute;
    font-size: 16px;
    color: var(--success-color);
}

.shop-rogue-name {
    font-size: 8px;
    color: var(--text-secondary);
    font-weight: 500;
    text-align: center;
    max-width: 60px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.2;
    min-height: 2em;
}

.shop-rogue-price {
    font-size: 10px;
    color: var(--text-secondary);
    font-weight: 600;
}

.shop-rogue-item.purchased .shop-rogue-price {
    color: var(--success-color);
}

/* Fixed Bottom Bar */
.shop-bottom-bar {
    margin-top: auto;  /* Push to bottom of flex container */
    padding-top: 16px;
    flex-shrink: 0;    /* Never shrink */
}

.shop-continue-btn {
    width: 100%;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 700;
    color: #000;
    background: var(--success-color);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.shop-continue-btn:hover {
    background: #5eeb93;
}

/* ============================================================================
   RESPONSIVE SHOP SCALING
   Scale up shop elements on larger viewports while maintaining minimum sizes
   for iPhone SE (320px). Everything is vector so scales cleanly.
   ============================================================================ */

@media (min-width: 400px) {
    .shop-item .shop-tile {
        width: clamp(32px, 10vw, 52px);
        height: clamp(32px, 10vw, 52px);
    }

    .shop-item .shop-tile .tile-letter {
        font-size: clamp(18px, 5.5vw, 28px);
    }

    .shop-item .shop-tile .tile-score {
        font-size: clamp(8px, 2.5vw, 12px);
    }

    .shop-item-label {
        font-size: clamp(8px, 2.5vw, 12px);
    }

    .shop-upgrade-icon-box {
        width: clamp(32px, 10vw, 52px);
        height: clamp(32px, 10vw, 52px);
        font-size: clamp(20px, 6vw, 32px);
    }

    .shop-tiles-row {
        gap: clamp(16px, 5vw, 28px);
        margin-bottom: clamp(16px, 4vw, 24px);
    }

    .shop-rogue-icon {
        width: clamp(36px, 11vw, 58px);
        height: clamp(36px, 11vw, 58px);
        font-size: clamp(24px, 7vw, 36px);
    }

    .shop-rogue-name {
        font-size: clamp(8px, 2.5vw, 11px);
        max-width: clamp(60px, 15vw, 80px);
    }

    .shop-rogue-price {
        font-size: clamp(10px, 3vw, 14px);
    }

    .shop-rogues-row {
        gap: clamp(16px, 5vw, 28px);
        margin-bottom: clamp(16px, 4vw, 24px);
    }

    .shop-continue-btn {
        padding: clamp(12px, 3vw, 16px) clamp(24px, 6vw, 32px);
        font-size: clamp(14px, 4vw, 18px);
    }
}

/* Rogue Details Modal */
.rogue-modal-content {
    max-width: 280px;
    text-align: center;
}

.rogue-modal-icon {
    font-size: 48px;
    margin-bottom: 8px;
}

.rogue-modal-desc {
    color: var(--text-secondary);
    margin: 8px 0 20px 0;
}

/* Rogue Discard Modal (when purchasing at max capacity) */
.rogue-discard-modal-content {
    max-width: 320px;
    text-align: center;
}

.rogue-discard-prompt {
    color: var(--text-secondary);
    margin: 0 0 16px 0;
    font-size: 14px;
}

.rogue-discard-new-card {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: linear-gradient(135deg, #3a2d5c 0%, #2a1f4c 100%);
    border: 2px solid var(--success-color);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 16px;
}

.rogue-discard-new-card .rogue-icon {
    font-size: 28px;
}

.rogue-discard-new-card .rogue-info {
    text-align: left;
}

.rogue-discard-slots {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.rogue-discard-slot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, #3a2d5c 0%, #2a1f4c 100%);
    border: 2px solid var(--accent-color);
    border-radius: 12px;
    padding: 10px 14px;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.1s;
}

.rogue-discard-slot:hover {
    border-color: #dc2626;
    transform: scale(1.02);
}

.rogue-discard-slot .rogue-card-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rogue-discard-slot .rogue-icon {
    font-size: 24px;
}

.rogue-discard-slot .rogue-name {
    font-size: 14px;
}

.rogue-discard-slot .rogue-desc {
    font-size: 11px;
}

.rogue-discard-slot .discard-label {
    font-size: 11px;
    color: #dc2626;
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.15s;
}

.rogue-discard-slot:hover .discard-label {
    opacity: 1;
}

/* Top Deck Display (shows next 3 tiles) */
#top-deck-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 12px;
    margin-top: 8px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border: 1px dashed rgba(255, 255, 255, 0.2);
}

.top-deck-label {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
}

#top-deck-tiles {
    display: flex;
    gap: 4px;
}

.top-deck-tile {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--tile-bg) 0%, #d4a574 100%);
    color: var(--tile-text);
    border: 1px solid rgba(0, 0, 0, 0.3);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.top-deck-letter {
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

.top-deck-count {
    position: absolute;
    bottom: 1px;
    right: 2px;
    font-size: 8px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.6);
}

.top-deck-tile.blank {
    background: linear-gradient(145deg, #f0e6d2 0%, #d4c4a8 100%);
}

.top-deck-tile.blank .top-deck-letter::after {
    content: '?';
    color: rgba(0, 0, 0, 0.3);
}

.btn-danger {
    background: #dc2626;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-danger:hover {
    background: #b91c1c;
}

/* Score Animation Overlay */
.score-animation-overlay {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    background: rgba(15, 15, 26, 0.95);
    border: 2px solid var(--primary-color);
    border-radius: 12px;
    padding: 20px 30px;
    box-shadow: 0 0 30px rgba(220, 38, 38, 0.3);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease-out;
}

.score-animation-overlay.visible {
    opacity: 1;
}

.score-animation-overlay.hidden {
    opacity: 0;
}

.score-animation-content {
    min-width: 200px;
}

.score-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 16px;
    gap: 20px;
}

.score-line .score-label {
    color: var(--text-muted);
}

.score-line .score-value {
    font-weight: bold;
    color: var(--text-color);
    font-family: monospace;
    font-size: 18px;
}

.score-line.score-base {
    border-bottom: 1px solid var(--board-border);
    margin-bottom: 4px;
    padding-bottom: 8px;
}

.score-line.score-base .score-label {
    color: var(--text-color);
}

.score-line.score-component .score-label {
    font-size: 14px;
}

.score-line.score-component .score-value {
    color: #fbbf24;
}

.score-line.score-total {
    border-top: 2px solid var(--primary-color);
    margin-top: 8px;
    padding-top: 10px;
}

.score-line.score-total .score-label {
    color: var(--text-color);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.score-line.score-total .score-value {
    color: var(--success-color);
    font-size: 24px;
}

/* Pop animation for score components */
.score-pop {
    animation: scorePop 0.3s ease-out;
}

@keyframes scorePop {
    0% {
        transform: scale(1.3);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Simple score flash for words without rogue bonuses */
.score-total-only {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 20px;
}

.score-total-only .score-flash {
    font-size: 32px;
    font-weight: bold;
    color: var(--success-color);
    animation: scoreFlash 0.4s ease-out;
}

@keyframes scoreFlash {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ============ BALATRO-STYLE SCORING ANIMATIONS ============ */

/* Tile scoring state - shake + glow */
.tile.scoring {
    animation: tileScoringShake 0.15s ease-out;
    box-shadow: 0 0 15px 5px rgba(34, 197, 94, 0.6) !important;
    z-index: 100;
}

@keyframes tileScoringShake {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-3px) rotate(-1deg);
    }
    75% {
        transform: translateX(3px) rotate(1deg);
    }
}

/* Floating score number above tile */
.floating-score {
    position: fixed;
    transform: translateX(-50%);
    font-size: 18px;
    font-weight: bold;
    color: var(--success-color);
    text-shadow: 0 0 8px rgba(34, 197, 94, 0.8), 0 2px 4px rgba(0, 0, 0, 0.8);
    pointer-events: none;
    z-index: 1001;
    animation: floatUp 0.4s ease-out forwards;
}

.floating-score.letter-multiplied {
    color: #60a5fa;
    text-shadow: 0 0 8px rgba(96, 165, 250, 0.8), 0 2px 4px rgba(0, 0, 0, 0.8);
}

@keyframes floatUp {
    0% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-30px);
    }
}

/* Letter multiplier flash (×2, ×3) */
.multiplier-flash {
    position: fixed;
    font-size: 14px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 4px;
    pointer-events: none;
    z-index: 1002;
    animation: multiplierPop 0.35s ease-out forwards;
}

.multiplier-flash.letter-mult {
    background: linear-gradient(135deg, #3b82f6, #60a5fa);
    color: white;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.6);
}

.multiplier-flash.word-mult {
    background: linear-gradient(135deg, #dc2626, #f87171);
    color: white;
    box-shadow: 0 0 10px rgba(220, 38, 38, 0.6);
}

@keyframes multiplierPop {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    40% {
        opacity: 1;
        transform: scale(1.2);
    }
    100% {
        opacity: 0;
        transform: scale(1);
    }
}

/* Word multiplier announcement (centered) */
.word-multiplier-announce {
    position: fixed;
    transform: translate(-50%, -50%);
    font-size: 32px;
    font-weight: bold;
    color: white;
    text-shadow: 0 0 20px rgba(220, 38, 38, 1), 0 0 40px rgba(220, 38, 38, 0.6);
    letter-spacing: 2px;
    pointer-events: none;
    z-index: 1003;
    animation: wordMultiplierAnnounce 0.5s ease-out forwards;
}

@keyframes wordMultiplierAnnounce {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }
    30% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.2);
    }
    70% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* Running total display below board */
.scoring-total-display {
    position: fixed;
    transform: translateX(-50%);
    font-size: 28px;
    font-weight: bold;
    color: var(--text-color);
    font-family: monospace;
    padding: 8px 16px;
    background: rgba(15, 15, 26, 0.9);
    border: 2px solid var(--primary-color);
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(220, 38, 38, 0.3);
    pointer-events: none;
    z-index: 1000;
    transition: transform 0.1s ease-out;
}

.scoring-total-display.pop {
    animation: totalPop 0.2s ease-out;
}

.scoring-total-display.final {
    color: var(--success-color);
    border-color: var(--success-color);
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.4);
}

@keyframes totalPop {
    0% {
        transform: translateX(-50%) scale(1);
    }
    50% {
        transform: translateX(-50%) scale(1.3);
    }
    100% {
        transform: translateX(-50%) scale(1);
    }
}

/* Rogue bonus floating from rogue slot */
.rogue-bonus-float {
    position: fixed;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    font-weight: bold;
    color: #fbbf24;
    text-shadow: 0 0 8px rgba(251, 191, 36, 0.8), 0 2px 4px rgba(0, 0, 0, 0.8);
    pointer-events: none;
    z-index: 1001;
    animation: rogueBonusFloat 0.5s ease-out forwards;
}

.rogue-bonus-float .rogue-icon {
    font-size: 18px;
}

.rogue-bonus-float .bonus-value {
    font-family: monospace;
}

@keyframes rogueBonusFloat {
    0% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-40px);
    }
}

/* Pink tile scoring state */
.tile.pink-scoring {
    animation: pinkTilePulse 0.3s ease-out;
    box-shadow: 0 0 20px 8px rgba(236, 72, 153, 0.7) !important;
    z-index: 100;
}

@keyframes pinkTilePulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

/* Pink multiplier flash */
.multiplier-flash.pink-mult {
    background: linear-gradient(135deg, #ec4899, #f472b6);
    color: white;
    box-shadow: 0 0 12px rgba(236, 72, 153, 0.7);
}

/* Pink multiplier announcement (centered) */
.pink-multiplier-announce {
    position: fixed;
    transform: translate(-50%, -50%);
    font-size: 28px;
    font-weight: bold;
    color: white;
    text-shadow: 0 0 20px rgba(236, 72, 153, 1), 0 0 40px rgba(236, 72, 153, 0.6);
    letter-spacing: 2px;
    pointer-events: none;
    z-index: 1003;
    animation: pinkMultiplierAnnounce 0.4s ease-out forwards;
}

@keyframes pinkMultiplierAnnounce {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }
    30% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.15);
    }
    70% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* Settings Modal - must be above all scoring animations */
#settings-modal {
    z-index: 9999;
}

.settings-modal-content {
    position: relative;
    max-width: 320px;
    padding: 24px;
}

.modal-close-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 24px;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
    border-radius: 4px;
    transition: color 0.15s ease, background 0.15s ease;
}

.modal-close-btn:hover {
    color: var(--text-color);
    background: rgba(255, 255, 255, 0.1);
}

.settings-modal-content h3 {
    margin: 0 0 20px 0;
    font-size: 18px;
    color: var(--text-color);
}

.settings-section {
    margin-bottom: 24px;
}

.settings-label {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.settings-speed-slider {
    padding: 10px 0;
}

.speed-track {
    position: relative;
    width: 100%;
    height: 6px;
    background: var(--board-border);
    border-radius: 3px;
    cursor: pointer;
    margin-bottom: 8px;
}

.speed-thumb {
    position: absolute;
    top: 50%;
    width: 16px;
    height: 16px;
    background: var(--primary-color);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: left 0.15s ease;
    pointer-events: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.speed-tick {
    position: absolute;
    top: 50%;
    width: 2px;
    height: 10px;
    background: var(--text-muted);
    transform: translate(-50%, -50%);
    opacity: 0.4;
    pointer-events: none;
}

.speed-labels {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.speed-labels span {
    font-size: 12px;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 2px;
    transition: color 0.15s ease;
    user-select: none;
    text-align: center;
    min-width: 30px;
}

.speed-labels span:hover {
    color: var(--text-color);
}

.speed-labels span.active {
    color: var(--primary-color);
    font-weight: 600;
}

.settings-danger-section {
    padding-top: 16px;
    border-top: 1px solid var(--board-border);
}

.btn-danger {
    background: #8b2635;
    border: 1px solid #a62c3d;
    color: white;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    width: 100%;
}

.btn-danger:hover {
    background: #a62c3d;
    border-color: #c43347;
}

.settings-hint {
    font-size: 11px;
    color: var(--text-muted);
    margin: 8px 0 0 0;
    text-align: center;
}

/* ============================================================================
   BOTTOM SHEET COMPONENT
   Reusable slide-up sheet for contextual interactions
   ============================================================================ */

.bottom-sheet {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1100;
    pointer-events: none;
}

.bottom-sheet.hidden {
    display: none;
}

.bottom-sheet.visible {
    pointer-events: auto;
}

.bottom-sheet-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity 150ms ease-out;
}

.bottom-sheet.visible .bottom-sheet-backdrop {
    opacity: 1;
}

.bottom-sheet-container {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-secondary);
    border-top: 2px solid var(--board-border);
    border-radius: 16px 16px 0 0;
    padding: 8px 16px 24px;
    max-height: 50vh;
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform 150ms ease-out;
}

.bottom-sheet.visible .bottom-sheet-container {
    transform: translateY(0);
}

.bottom-sheet-handle {
    width: 32px;
    height: 4px;
    background: var(--text-muted);
    border-radius: 2px;
    margin: 0 auto 12px;
    opacity: 0.5;
}

.bottom-sheet-close {
    position: absolute;
    top: 8px;
    right: 12px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 24px;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
    border-radius: 4px;
    transition: color 0.15s ease, background 0.15s ease;
}

.bottom-sheet-close:hover {
    color: var(--text-color);
    background: rgba(255, 255, 255, 0.1);
}

.bottom-sheet-content {
    text-align: center;
}

/* Bottom sheet header with icon + title */
.bottom-sheet-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 8px;
}

.bottom-sheet-icon {
    font-size: 28px;
    line-height: 1;
}

.bottom-sheet-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-color);
    margin: 0;
}

.bottom-sheet-desc {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0 0 12px;
    line-height: 1.4;
}

.bottom-sheet-detail {
    font-size: 11px;
    color: var(--text-muted);
    margin: 0 0 12px;
}

/* Bottom sheet action buttons */
.bottom-sheet-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 12px;
}

.bottom-sheet-btn {
    font-size: 12px;
    font-weight: 600;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    min-width: 80px;
}

.bottom-sheet-btn-primary {
    background: var(--success-color);
    color: #000;
}

.bottom-sheet-btn-primary:hover:not(:disabled) {
    background: #5eeb93;
}

.bottom-sheet-btn-secondary {
    background: var(--board-border);
    color: var(--text-color);
}

.bottom-sheet-btn-secondary:hover:not(:disabled) {
    background: #5a5a6a;
}

.bottom-sheet-btn-danger {
    background: var(--danger-color);
    color: #fff;
}

.bottom-sheet-btn-danger:hover:not(:disabled) {
    background: #ff5252;
}

.bottom-sheet-btn:disabled,
.bottom-sheet-btn.cannot-afford {
    opacity: 0.6;
    cursor: not-allowed;
    background: #555 !important;
    color: #999 !important;
}

/* Tile display in bottom sheet */
.bottom-sheet-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 0 auto 8px;
}

.bottom-sheet-tile .tile {
    width: 48px;
    height: 48px;
}

.bottom-sheet-tile .tile-letter {
    font-size: 28px;
}

.bottom-sheet-tile .tile-score {
    font-size: 11px;
}

/* Blank letter selector in bottom sheet */
.blank-letter-sheet {
    padding: 0;
}

.blank-letter-sheet .bottom-sheet-title {
    text-align: center;
    margin-bottom: 12px;
}

.blank-letter-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    max-width: 276px;
    margin: 0 auto;
}

.blank-letter-btn {
    width: 36px;
    height: 36px;
    background: var(--tile-bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--tile-text);
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.15s;
}

.blank-letter-btn:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #000;
}

.blank-letter-btn:active {
    transform: scale(0.95);
}