/**
 * Wordle — black / orange site-theme skin (colors / atmosphere only).
 * Do not change board, tile, or keyboard dimensions here.
 * Scoped to #wordle / .wordle-game-card.
 * Green = correct; gold/orange = present (wrong spot). No purple.
 */

#wordle.wordle-game-card {
    --wl-correct: #2fad3a;
    --wl-present: #f0b322;
    --wl-absent: #152030;
    --wl-border: rgba(255, 255, 255, 0.22);
    /* Unused keys — charcoal to match black/orange stage */
    --wl-key-bg: linear-gradient(180deg, #2a3a4e 0%, #1a2838 55%, #121c2a 100%);
    --wl-key-enter: linear-gradient(180deg, #3bc447 0%, #258d2e 100%);
    --wl-key-enter-hover: linear-gradient(180deg, #48d454 0%, #2a9e35 100%);
    --wl-key-back: linear-gradient(180deg, #c44b4b 0%, #8f2626 100%);
    --wl-key-back-hover: linear-gradient(180deg, #d85a5a 0%, #a32e2e 100%);
    --wl-sc-green: #3bc447;
    --wl-sc-green-deep: #258d2e;
    --wl-sc-gold: #f1c40f;
    overflow: hidden;
    border: 1px solid rgba(100, 116, 139, 0.24);
    border-radius: 14px;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.35);
    /* Match site --boss-black / page-bg */
    background: #060b12;
}

#wordle.wordle-game-card .game-header {
    background: linear-gradient(135deg, rgba(6, 11, 18, 0.97) 0%, rgba(15, 23, 36, 0.94) 100%);
    border-bottom: 1px solid rgba(255, 107, 0, 0.55);
}

#wordle.wordle-game-card .game-title {
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

#wordle.wordle-game-card .wordle-header-midnight .wordle-toolbar-midnight-lbl,
#wordle.wordle-game-card .wordle-clock-label,
#wordle.wordle-game-card .game-header-meta .game-score {
    color: rgba(255, 236, 170, 0.85) !important;
}

#wordle.wordle-game-card .wordle-header-midnight .wordle-toolbar-midnight-time,
#wordle.wordle-game-card .wordle-clock-value {
    color: var(--wl-sc-gold);
}

#wordle .wordle-body {
    --wl-correct: #2fad3a;
    --wl-present: #f0b322;
    --wl-absent: #152030;
    --wl-border: rgba(255, 255, 255, 0.22);
    background-color: #060b12;
    background-image:
        radial-gradient(ellipse 100% 55% at 50% 0%, rgba(255, 107, 0, 0.1), transparent 52%),
        linear-gradient(180deg, #0d1521 0%, #060b12 48%, #05080e 100%);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

#wordle .wordle-mode-context,
#wordle .wordle-toolbar-midnight-lbl,
#wordle .wordle-length-wrap label {
    color: rgba(232, 220, 200, 0.78);
}

#wordle .wordle-stats-login-hint {
    color: rgba(232, 220, 200, 0.72);
}

#wordle .wordle-stats-login-hint a {
    color: var(--wl-sc-gold);
}

/* Mode / toolbar controls — green pills like Scramble */
#wordle .wordle-toolbar .btn-game {
    border-radius: 999px;
    clip-path: none;
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.28);
}

#wordle .wordle-toolbar .btn-game.secondary:not(.wordle-mode-active) {
    border-color: rgba(255, 255, 255, 0.22);
    color: #e8eef6;
    background: rgba(13, 21, 33, 0.85);
}

#wordle .wordle-toolbar .btn-game.secondary:not(.wordle-mode-active):hover {
    border-color: rgba(255, 107, 0, 0.45);
    color: #fff;
    background: rgba(22, 34, 51, 0.92);
}

#wordle .wordle-toolbar .btn-game.secondary#wordleDailyBtn.wordle-mode-active {
    border-color: rgba(255, 107, 0, 0.55);
    color: #fff;
    background: linear-gradient(180deg, rgba(255, 107, 0, 0.42) 0%, rgba(180, 70, 0, 0.55) 100%);
    filter: none;
}

#wordle .wordle-toolbar .btn-game.secondary#wordleDailyBtn.wordle-mode-active:hover {
    background: linear-gradient(180deg, rgba(255, 107, 0, 0.55) 0%, rgba(200, 80, 0, 0.65) 100%);
}

#wordle .wordle-toolbar .btn-game.secondary#wordlePracticeBtn.wordle-mode-active {
    border-color: #1f8a28;
    background: linear-gradient(180deg, #3bc447 0%, #258d2e 100%);
    color: #fff;
    font-weight: 700;
    filter: drop-shadow(0 2px 8px rgba(43, 180, 70, 0.45));
}

#wordle .wordle-toolbar .btn-game.secondary#wordlePracticeBtn.wordle-mode-active:hover {
    background: linear-gradient(180deg, #48d454 0%, #2a9e35 100%);
    color: #fff;
    filter: drop-shadow(0 2px 10px rgba(43, 180, 70, 0.55));
}

#wordle .wordle-toolbar-actions .btn-game.secondary {
    border-color: rgba(255, 255, 255, 0.22);
    color: #e8eef6;
    background: rgba(13, 21, 33, 0.85);
}

#wordle .wordle-toolbar-actions .btn-game.secondary:hover {
    border-color: rgba(255, 107, 0, 0.45);
    background: rgba(22, 34, 51, 0.92);
}

#wordle .wordle-length-select {
    clip-path: none;
    border-radius: 999px;
    border: 2px solid var(--wl-sc-green);
    background: rgba(13, 21, 33, 0.92);
    color: #fff;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.28);
}

#wordle .wordle-length-select:hover {
    background: rgba(43, 180, 70, 0.18);
}

#wordle .wordle-length-select:focus {
    outline-color: var(--wl-sc-green);
}

/* Board tiles — same size; charcoal faces (green/gold for scored states) */
#wordle .wordle-tile {
    border-radius: 8px;
    background: rgba(13, 21, 33, 0.65);
    border-color: rgba(148, 163, 184, 0.28);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Typed (not yet scored) */
#wordle .wordle-tile[data-state="filled"] {
    background: linear-gradient(180deg, rgba(34, 48, 66, 0.95) 0%, rgba(17, 27, 40, 0.96) 100%);
    border-color: rgba(255, 107, 0, 0.4);
    color: #fff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

#wordle .wordle-tile[data-state="correct"] {
    background: linear-gradient(180deg, #3bc447 0%, #258d2e 100%);
    border-color: #1f8a28;
    color: #fff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}

#wordle .wordle-tile[data-state="present"] {
    background: linear-gradient(180deg, #ffd45c 0%, #f0b322 48%, #e09a14 100%);
    border-color: #d49212;
    color: #1a1208;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}

#wordle .wordle-tile[data-state="absent"] {
    background: linear-gradient(180deg, #243044 0%, #152030 100%);
    border-color: #0d1521;
    color: rgba(255, 255, 255, 0.72);
    text-shadow: none;
}

/* Keyboard — unused = cool slate; green/gold for scored (sizes unchanged) */
#wordle .wordle-key {
    border-radius: 8px;
    background: linear-gradient(180deg, #2a3a4e 0%, #1a2838 55%, #121c2a 100%);
    color: #fff;
    box-shadow: 0 2px 0 #080e16;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}

#wordle .wordle-key:hover {
    filter: brightness(1.08);
}

#wordle .wordle-key.correct {
    background: linear-gradient(180deg, #3bc447 0%, #258d2e 100%);
    color: #fff;
    box-shadow: 0 2px 0 #1a6f22;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}

#wordle .wordle-key.present {
    background: linear-gradient(180deg, #ffd45c 0%, #f0b322 48%, #e09a14 100%);
    color: #1a1208;
    box-shadow: 0 2px 0 #a66f0c;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}

#wordle .wordle-key.absent {
    background: rgba(6, 11, 18, 0.65);
    color: rgba(255, 255, 255, 0.22);
    box-shadow: none;
    text-shadow: none;
    opacity: 0.42;
    filter: saturate(0.35);
}

#wordle .wordle-key.absent:hover {
    filter: saturate(0.35) brightness(1.05);
}

#wordle .wordle-key[data-key="ENTER"] {
    background: linear-gradient(180deg, #3bc447 0%, #258d2e 100%);
    color: #fff;
    box-shadow: 0 2px 0 #1a6f22;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}

#wordle .wordle-key[data-key="ENTER"]:hover {
    background: linear-gradient(180deg, #48d454 0%, #2a9e35 100%);
    filter: none;
}

#wordle .wordle-key[data-key="BACK"] {
    background: linear-gradient(180deg, #c44b4b 0%, #8f2626 100%);
    color: #fff;
    box-shadow: 0 2px 0 #6b1c1c;
    text-shadow: none;
}

#wordle .wordle-key[data-key="BACK"]:hover {
    background: linear-gradient(180deg, #d85a5a 0%, #a32e2e 100%);
    filter: none;
}

#wordle .wordle-toast {
    background: linear-gradient(180deg, #3bc447 0%, #258d2e 100%);
    color: #fff;
    border-radius: 999px;
}

/* End / invite overlays */
#wordle .wordle-end-overlay,
#wordle .wordle-daily-invite-overlay {
    background: rgba(8, 8, 8, 0.88);
    backdrop-filter: blur(2px);
}

#wordle .wordle-end-overlay h4,
#wordle .wordle-daily-invite-overlay h4 {
    color: var(--wl-sc-gold);
}

#wordle .wordle-end-overlay .btn-game,
#wordle .wordle-daily-invite-actions .btn-game {
    clip-path: none;
    border-radius: 999px;
    border: none;
    background: linear-gradient(180deg, #3bc447 0%, #258d2e 100%);
    color: #fff;
    box-shadow: 0 3px 0 #1a6f22;
}

#wordle .wordle-end-overlay .btn-game.secondary,
#wordle .wordle-daily-invite-actions .btn-game.secondary {
    background: rgba(13, 21, 33, 0.95);
    border: 1px solid rgba(255, 107, 0, 0.35);
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3);
    color: #fff;
}

#wordle .wordle-word-meaning-panel {
    background: rgba(13, 21, 33, 0.96);
    border-color: rgba(241, 196, 15, 0.4);
}

#wordle .wordle-word-meaning-panel .wordle-def-pos {
    color: var(--wl-sc-gold);
}

/* Footer controls — same cool black as site surfaces */
#wordle .game-controls {
    background: linear-gradient(180deg, #0d1521 0%, #060b12 100%);
    border-top: 1px solid rgba(255, 107, 0, 0.35);
}

#wordle .wordle-new-puzzle-cap--top,
#wordle .wordle-new-puzzle-cap--bottom {
    display: none;
}

#wordle .wordle-new-puzzle-btn {
    clip-path: none;
    border-radius: 999px;
    padding: 0.55rem 2.4rem;
    background: linear-gradient(180deg, #3bc447 0%, #258d2e 100%);
    color: #fff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
    box-shadow: 0 3px 0 #1a6f22;
    letter-spacing: 0.12em;
}

#wordle .wordle-new-puzzle-btn:hover {
    background: linear-gradient(180deg, #48d454 0%, #2a9e35 100%);
    filter: none;
    color: #fff;
}

#wordle .wordle-new-puzzle-btn:focus-visible {
    outline-color: var(--wl-sc-gold);
}

#wordle .wordle-new-puzzle-instructions {
    color: rgba(232, 220, 200, 0.78);
}

/* Stats modal accents */
#wordle .wordle-stats-modal {
    background: linear-gradient(180deg, #0d1521 0%, #060b12 100%);
    border: 1px solid rgba(255, 107, 0, 0.28);
}

#wordle .wordle-stats-heading,
#wordle .wordle-stats-big {
    color: var(--wl-sc-gold);
}

#wordle .wordle-stats-share-btn {
    clip-path: none;
    border-radius: 999px;
    background: linear-gradient(180deg, #3bc447 0%, #258d2e 100%);
    border: none;
    color: #fff;
}