/* Daily Letters - Styles */

:root {
    --primary-color: #6b5637;  /* Dark wood */
    --secondary-color: #d4a574;  /* Tile wood color */
    --success-color: #27ae60;
    --warning-color: #f39c12;
    --danger-color: #e74c3c;
    --board-bg: #8b6f47;
    --board-square: #faf6e8;  /* Lighter board squares */
    --tile-bg: #d4a574;  /* Darker wood color for tiles */
    --tile-border: #8b6347;
    --multiplier-2w: #ffb3ba;
    --multiplier-3w: #ff6b6b;
    --multiplier-2l: #bae1ff;
    --multiplier-3l: #4a90e2;
    --center-star: #ffd700;
    /* 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: #faf6e8; /* Board vanilla/cream color */
    color: #4a3c28; /* Dark brown text */
    margin: 0;
    padding: 0;
}

header {
    position: fixed;
    background: #faf6e8; /* Solid cream background - no gradient */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 4px 10px 2px 10px; /* Header ends 2px below subtitle text */
}

/* Start Over button in header */
.header-icon-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;  /* Match height of W in WikiLetters */
    height: 22px;  /* Match height of W in WikiLetters */
    border-radius: 50%;
    background: transparent;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease, opacity 0.3s ease;
    padding: 0;
}

.header-icon-btn:hover {
    background: var(--primary-color);
    color: white;
    transform: rotate(360deg);
}

.header-icon-btn svg {
    width: 12px;  /* Proportionally smaller */
    height: 12px;  /* Proportionally smaller */
}

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

a, .accent {
    color: #8b6f47; /* Wood color instead of #333344 */
    text-decoration: none;
}

#dateDisplay {
    display: flex;
    color: #4a3c28;
    justify-content: center;
    margin-top: -22px;
    text-transform: capitalize;
    letter-spacing: 1px;
    font-size: 18px;
    font-weight: bold;
}

#subtitle {
    display: flex;
    color: #6b5637;
    justify-content: center;
    text-transform: capitalize;
    letter-spacing: 1.4px;
    font-size: 10px;
    text-transform: uppercase;
    margin-top: 4px;
}

#subtitle a {
    color: inherit; /* Match parent color #6b5637 */
    text-decoration: underline;
    cursor: pointer;
}

#subtitle a:hover {
    opacity: 0.7;
}

#status {
    font-size: 13px;
    text-align: center;
    margin-top: 1px;
    margin-bottom: 1px;
    min-height: 0; /* Reduced from 20px to eliminate extra space when empty */
    color: #6b5637;
}

#status strong {
    color: #4a3c28; /* Dark brown instead of white */
}

footer {
    position: fixed;
    background: #faf6e8; /* Solid cream background - no gradient */
    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 */
}

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

main {
    padding: 50px 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: transparent;
    border-radius: 4px;
    border-left: 3px solid #d4a574;
}

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

.word-text {
    font-weight: 600;
    color: #4a3c28;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.invalid-word .word-text {
    color: #c0392b;
}

/* 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: #8b6f47;
    font-size: 14px;
    font-weight: bold;
}

.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: #4a3c28;
    font-size: 16px;
}

.total-score .value {
    color: #4a3c28;
    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;
    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 #8b6f47;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    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 #d4c5a9;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: calc(var(--actual-cell-size) * 0.4);
    font-weight: bold;
    cursor: pointer;
    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.regular-square {
    background: var(--board-square);
}

.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(0, 0, 0, 0.3);
    font-size: 20px;
}

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

/* Tiles */
.tile {
    width: 30px;
    height: 30px;
    background: var(--tile-bg);
    user-select: none;
    background-image:
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 2px,
            rgba(139, 99, 71, 0.1) 2px,
            rgba(139, 99, 71, 0.1) 4px
        ),
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 8px,
            rgba(101, 67, 33, 0.05) 8px,
            rgba(101, 67, 33, 0.05) 10px
        ),
        linear-gradient(
            180deg,
            rgba(160, 82, 45, 0.1) 0%,
            transparent 50%,
            rgba(101, 67, 33, 0.1) 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;
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.3),
        0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Only apply hover effects on devices that support hover (not touch) */
@media (hover: hover) {
    .tile:hover {
        transform: translateY(-2px);
        box-shadow:
            inset 0 1px 2px rgba(255, 255, 255, 0.3),
            0 4px 8px rgba(0, 0, 0, 0.3);
    }
}

.tile.selected {
    background: #ffd700;
    background-image:
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 2px,
            rgba(139, 99, 71, 0.15) 2px,
            rgba(139, 99, 71, 0.15) 4px
        ),
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 8px,
            rgba(101, 67, 33, 0.08) 8px,
            rgba(101, 67, 33, 0.08) 10px
        );
    border-color: #daa520;
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.5),
        0 2px 6px rgba(218, 165, 32, 0.4);
}

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

.tile .tile-score,
.tile .tile-value {
    position: absolute;
    bottom: 1px;
    right: 1px;
    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: 0;
}

/* 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;
}

/* 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 - 1x7 grid (single row) */
#tile-rack-board {
    grid-template-columns: repeat(7, var(--actual-cell-size));
    grid-template-rows: var(--actual-cell-size);
    background: transparent;
    border: none;
    box-shadow: none;
}

/* Hide borders on rack cells but add padding to match board tile sizing */
#tile-rack-board .board-cell {
    border: none;
    background: transparent;
    padding: 1px;  /* Compensate for missing border so tiles are same size as board tiles */
}

.tile-rack {
    display: grid;
    grid-template-columns: repeat(7, var(--actual-cell-size));
    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 */
            #d4c4a0 51%,        /* Start wood sharply at bottom half */
            #c8b896 58%,        /* Light wood back wall */
            #baa782 65%,        /* Transitioning forward */
            #a08560 72%,        /* Mid-tone */
            #8b6f47 80%,        /* Getting darker toward front */
            #7a5e3a 87%,        /* Front area darker */
            #6b5637 92%,        /* Front ledge shadow */
            #5c4a30 96%,        /* Deep shadow at base */
            #7a5e3a 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: rgba(255, 255, 255, 0.9);
    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;
}

.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 - Same positioning as recall button (left side) */
.exchange-btn {
    position: absolute;
    width: 36px;
    height: 36px;
    left: -40px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.9);
    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, opacity 0.3s ease;
    z-index: 10;
}

/* Only apply hover effects on devices that support hover (not touch) */
@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: 18px;
    height: 18px;
}

/* Exchange Modal - matches #game-popup styling */
#exchange-modal.modal {
    background: transparent;  /* No dark backdrop, matches game-popup */
}

.modal-content.exchange-modal-content {
    background: #f8f6f0;
    border: 2px solid #8b6f47;
    padding: 10px;
    border-radius: 8px;
    text-align: center;
    min-width: 280px;
    max-width: 90vw;
    box-shadow: 0 12px 16px rgba(0, 0, 0, 0.3);
}

.modal-content.exchange-modal-content h2 {
    color: #4a3c28;
    margin: 0 0 8px 0;
    font-size: 22px;
    font-weight: 600;
}

#exchange-instruction {
    margin: 0 0 8px 0;
    color: #6b5637;
    font-size: 12px;
}

/* Exchange rack - smaller tiles in modal */
.exchange-rack {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin: 8px 0;
    padding: 6px;
    background: rgba(139, 111, 71, 0.1);
    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-value {
    font-size: 10px;
}

/* Exchange modal button - extends .popup-btn-primary */
.exchange-modal-content .popup-btn-primary {
    width: 100%;
}

/* Tile styling in exchange mode */
.tile.selected-for-exchange {
    background: #ffd700 !important;
    background-image:
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 2px,
            rgba(139, 99, 71, 0.15) 2px,
            rgba(139, 99, 71, 0.15) 4px
        ),
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 8px,
            rgba(101, 67, 33, 0.08) 8px,
            rgba(101, 67, 33, 0.08) 10px
        ) !important;
    transform: scale(1.1);
    animation: selected-pulse 1s infinite;
}

/* 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: rgba(212, 165, 116, 0.2);
    border: 1px solid #d4a574;
    display: inline-flex;
    gap: 4px;
    align-items: center;
    font-size: 12px;
}

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

#potential-words .word-text {
    font-weight: 600;
    color: #4a3c28;
    text-transform: uppercase;
}

#potential-words .invalid-word .word-text {
    color: #c0392b;
}

#potential-words .word-score {
    color: #8b6f47;
    font-size: 11px;
}

#potential-words .total-score {
    font-weight: bold;
    color: #4a3c28;
    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 #f3f3f3;
    border-top: 5px solid var(--secondary-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: rgba(250, 246, 232, 0.9); /* Board square color with opacity */
    border-radius: 6px;
    border: 2px solid var(--secondary-color);
    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: white;
    padding: 30px;
    border-radius: 8px;
    min-width: 300px;
    text-align: center;
}

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

/* Blank Letter Selection Modal */
.blank-letter-modal-content h3 {
    color: var(--text-dark);
    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: #d4a574; /* Wood color instead of #708090 */
    border-radius: 50%;
    border: 2px solid #8b6f47; /* Wood border instead of #333344 */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    color: #4a3c28;
    position: relative;
    transition: border-color 0.3s ease;
}

.feedback-square.current-turn {
    border: 2px solid #e74c3c; /* Red outline for current turn - matches Triple Word score */
    box-shadow: 0 0 4px rgba(231, 76, 60, 0.3);
}

.feedback-square.completed {
    background-color: #f5e6d3; /* Default - will be overridden by score classes */
}

/* 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: #4a3c28;
    transition: opacity 0.3s ease;
}

.total-score-display::before {
    content: "=";
    margin-right: 8px;
    color: #8b6f47;
}

#shareIcon {
    background-color: #8b6f47; /* Wood color instead of #333344 */
    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: #f8f6f0; /* WikiLetters cream background */
    border: 2px solid #8b6f47; /* WikiLetters brown border */
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 12px 16px rgba(0, 0, 0, 0.3);
    min-width: 280px;
    text-align: center;
}

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

/* Popup content wrapper - used by game-popup and exchange modal */
.popup-content {
    position: relative;
}

/* Title - matches WikiDates h2 */
#game-popup h2 {
    margin-top: 0;
    margin-bottom: 8px;
    color: #4a3c28; /* WikiLetters dark brown */
    font-size: 22px;
    font-weight: 600;
}

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

#popup-score-label {
    color: #6b5637; /* WikiLetters medium brown */
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 6px;
}

#popup-score-value {
    color: #4a3c28; /* WikiLetters dark brown */
    font-size: 36px;
    font-weight: bold;
    margin: 3px 0;
}

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

/* Primary button - WikiLetters yellow */
.popup-btn-primary {
    background-color: #d4c5a9; /* WikiLetters tile color */
    color: #4a3c28;
    border: 1px solid #8b6f47;
    padding: 10px 20px;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.popup-btn-primary:hover:not(:disabled) {
    background-color: #c4b599;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.popup-btn-primary:disabled {
    background: #e5e0d8;
    color: #999;
    cursor: not-allowed;
}

/* Secondary button - Lighter style for Share Board */
.popup-btn-secondary {
    background-color: #f5f0e8;
    color: #6b5637;
    border: 1px solid #c4b599;
    padding: 10px 20px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: normal;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.popup-btn-secondary:hover {
    background-color: #e5e0d8;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Close button - matches WikiDates closePopup */
.popup-close-btn {
    position: absolute;
    top: -5px;
    right: -5px;
    background: transparent;
    color: #8b6f47;
    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: #8b6f47;
    background: #f9f9f9;
    transition: all 0.2s ease;
    position: relative;
    border: 1px solid #e0e0e0;
    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 #e0e0e0;
}

.game-tab-active {
    background: #d4c5a9;
    color: #4a3c28;
    font-weight: 600;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    cursor: default;
}

.game-tab:not(.game-tab-active):hover {
    background: #f0f0f0;
    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: #6b5637; /* WikiLetters medium brown - matches YOUR SCORE */
    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; }
}

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

.bag-icon-btn {
    position: absolute;
    top: 8px;
    right: 36px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    color: var(--primary-color);
    transition: color 0.2s, transform 0.2s;
    display: flex;
    align-items: center;
    height: 18px;
}

.bag-icon-btn:hover {
    color: var(--board-bg);
    transform: scale(1.1);
}

/* Bag Modal - matches exchange modal styling */
#bag-viewer-popup.modal {
    background: transparent;  /* No dark backdrop, matches game-popup */
}

.modal-content.bag-modal-content {
    background: #f8f6f0;
    border: 2px solid #8b6f47;
    padding: 10px;
    border-radius: 8px;
    text-align: center;
    max-width: 340px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
}

.modal-content.bag-modal-content h2 {
    color: #4a3c28;
    margin: 0 0 8px 0;
    font-size: 22px;
    font-weight: 600;
}

.bag-summary {
    text-align: center;
    font-size: 1.1rem;
    color: #6b5637;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #d4c5a9;
}

.bag-summary #bag-remaining {
    color: #27ae60;
    font-weight: bold;
}

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

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

.bag-toggle-btn:hover {
    background: #c4b599;
}

.bag-toggle-btn.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    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: #4a3c28;
    line-height: 1;
}

.bag-mini-tile-score {
    position: absolute;
    bottom: 1px;
    right: 2px;
    font-size: 8px;
    font-weight: bold;
    color: #4a3c28;
    opacity: 0.8;
}