/* ═══════════════════════════════════════════════════════════════
   BP Word Game — Stylesheet
   Self-contained; no external dependencies.
   ═══════════════════════════════════════════════════════════════ */

/* ── Custom properties ─────────────────────────────────────────── */
#bp-word-game {
    --bpwg-green:       #3DAA6D;
    --bpwg-green-dark:  #2E855A;
    --bpwg-orange:      #F07D3A;
    --bpwg-orange-dark: #D4621F;
    --bpwg-purple:      #7B52E8;
    --bpwg-purple-dark: #5F3BC4;
    --bpwg-red:         #E84040;
    --bpwg-yellow:      #FFD43B;
    --bpwg-blue:        #3B9EE8;
    --bpwg-blue-dark:   #2278C0;

    --bpwg-bg:          #F7F3EE;
    --bpwg-card-bg:     #FFFFFF;
    --bpwg-border:      #E2DBD4;
    --bpwg-text:        #2C2C2C;
    --bpwg-text-muted:  #7A7069;

    --bpwg-radius:      16px;
    --bpwg-radius-sm:   8px;
    --bpwg-shadow:      0 4px 20px rgba(0, 0, 0, 0.08);
    --bpwg-shadow-card: 0 8px 32px rgba(0, 0, 0, 0.12);

    --bpwg-font:        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --bpwg-transition:  0.18s ease;
}

/* ── Reset inside plugin scope ──────────────────────────────────── */
#bp-word-game *,
#bp-word-game *::before,
#bp-word-game *::after {
    box-sizing: border-box;
}

/* ── Wrapper ────────────────────────────────────────────────────── */
#bp-word-game {
    font-family: var(--bpwg-font);
    background: var(--bpwg-bg);
    color: var(--bpwg-text);
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 16px 48px;
    position: relative;
}

/* ── Loading overlay ────────────────────────────────────────────── */
.bpwg-loading {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(247, 243, 238, 0.85);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--bpwg-text-muted);
    letter-spacing: 0.03em;
}
.bpwg-loading.is-visible {
    display: flex;
}

/* ── Controls bar ───────────────────────────────────────────────── */
.bpwg-controls {
    display: flex;
    flex-direction:row;
    flex-wrap: wrap;
    gap: 12px 24px;
    align-items: flex-end;
    background: var(--bpwg-card-bg);
    border: 1px solid var(--bpwg-border);
    border-radius: var(--bpwg-radius);
    padding: 16px 20px;
    margin-bottom: 20px;
    box-shadow: var(--bpwg-shadow);
}

.bpwg-control-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.bpwg-control-group > label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--bpwg-text-muted);
}

.bpwg-controls select,
.bpwg-controls input[type="number"] {
    border: 1.5px solid var(--bpwg-border);
    border-radius: var(--bpwg-radius-sm);
    padding: 7px 10px;
    font-size: 0.9rem;
    font-family: var(--bpwg-font);
    background: #fff;
    color: var(--bpwg-text);
    cursor: pointer;
    transition: border-color var(--bpwg-transition);
    outline: none;
}
.bpwg-controls select:focus,
.bpwg-controls input[type="number"]:focus {
    border-color: var(--bpwg-green);
}

.bpwg-age-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.bpwg-age-to {
    font-size: 0.85rem;
    color: var(--bpwg-text-muted);
}

.bpwg-toggle-label {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--bpwg-text);
    margin-top: 6px;
}

.bpwg-toggle-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--bpwg-green);
    cursor: pointer;
}

/* ── Game body layout ───────────────────────────────────────────── */
.bpwg-body {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 20px;
    align-items: start;
}

@media (max-width: 780px) {
    .bpwg-body {
        grid-template-columns: 1fr;
    }
}

/* ── Word card ──────────────────────────────────────────────────── */
.bpwg-card {
    background: var(--bpwg-card-bg);
    border-radius: var(--bpwg-radius);
    box-shadow: var(--bpwg-shadow-card);
    padding: 28px 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 300px;
    border: 2px solid transparent;
    transition: border-color var(--bpwg-transition);
    margin-bottom: 20px;
}

.bpwg-cat-tag {
    display: inline-block;
    background: var(--bpwg-yellow);
    color: #3a2e00;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 4px 10px;
    border-radius: 20px;
    align-self: flex-start;
    min-height: 22px;
}
.bpwg-cat-tag:empty {
    display: none;
}

.bpwg-word-display {
    font-size: clamp(2rem, 6vw, 3.2rem);
    font-weight: 900;
    line-height: 1.1;
    color: var(--bpwg-text);
    letter-spacing: -0.02em;
}

/* Taboo list */
.bpwg-taboo-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-flow: row wrap;
    gap: 6px;
}
ul#bpwg-taboo-list{
    display:flex;
    flex-flow:row wrap;
}

.bpwg-taboo-list li {
    background: #FFF0F0;
    border: 1.5px solid #FFD0D0;
    border-radius: var(--bpwg-radius-sm);
    padding: 8px 14px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--bpwg-red);
    position: relative;
    padding-left: 32px;
}

.bpwg-taboo-list li::before {
    content: "✕";
    position: absolute;
    left: 10px;
    font-size: 0.75rem;
    opacity: 0.7;
}

.bpwg-taboo-hidden .bpwg-taboo-list {
    display: none;
}

/* Hints */
.bpwg-hints-area {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bpwg-hint-item {
    background: #F0F7FF;
    border: 1.5px solid #C0DCFF;
    border-radius: var(--bpwg-radius-sm);
    padding: 8px 14px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--bpwg-blue-dark);
}

.bpwg-hint-item::before {
    content: "💡 ";
}

/* Card actions */
.bpwg-card-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: auto;
}

/* ── Timer ──────────────────────────────────────────────────────── */
.bpwg-timer {
    background: var(--bpwg-card-bg);
    border-radius: var(--bpwg-radius);
    box-shadow: var(--bpwg-shadow-card);
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

.bpwg-timer-display {
    font-size: clamp(3rem, 10vw, 5rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    color: var(--bpwg-text);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    transition: color var(--bpwg-transition);
}

.bpwg-timer-display.is-urgent {
    color: var(--bpwg-red);
    animation: bpwg-pulse 0.5s ease infinite alternate;
}

@keyframes bpwg-pulse {
    from { transform: scale(1); }
    to   { transform: scale(1.04); }
}

.bpwg-timer-config {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    color: var(--bpwg-text-muted);
}

.bpwg-timer-config input[type="number"] {
    width: 72px;
    border: 1.5px solid var(--bpwg-border);
    border-radius: var(--bpwg-radius-sm);
    padding: 6px 8px;
    font-size: 0.9rem;
    font-family: var(--bpwg-font);
    text-align: center;
    outline: none;
    background: #fff;
    color: var(--bpwg-text);
}
.bpwg-timer-config input[type="number"]:focus {
    border-color: var(--bpwg-green);
}

.bpwg-timer-btns {
    display: flex;
    gap: 8px;
}

/* ── Scoreboard ─────────────────────────────────────────────────── */
.bpwg-scoreboard {
    background: var(--bpwg-card-bg);
    border-radius: var(--bpwg-radius);
    box-shadow: var(--bpwg-shadow-card);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bpwg-scoreboard-title {
    font-size: 1.3rem;
    font-weight: 900;
    margin: 0;
    color: var(--bpwg-text);
    letter-spacing: -0.02em;
}

.bpwg-add-player {
    display: flex;
    gap: 8px;
}

.bpwg-add-player input[type="text"] {
    flex: 1;
    border: 1.5px solid var(--bpwg-border);
    border-radius: var(--bpwg-radius-sm);
    padding: 9px 12px;
    font-size: 0.9rem;
    font-family: var(--bpwg-font);
    outline: none;
    color: var(--bpwg-text);
    transition: border-color var(--bpwg-transition);
}
.bpwg-add-player input[type="text"]:focus {
    border-color: var(--bpwg-green);
}

.bpwg-player-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 40px;
}

/* Player row */
.bpwg-player-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--bpwg-radius-sm);
    border: 2px solid transparent;
    background: var(--bpwg-bg);
    transition:
        background var(--bpwg-transition),
        border-color var(--bpwg-transition),
        box-shadow var(--bpwg-transition);
}

.bpwg-player-row.is-active {
    background: #EEFAF4;
    border-color: var(--bpwg-green);
    box-shadow: 0 2px 12px rgba(61, 170, 109, 0.18);
}

.bpwg-player-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.9rem;
    color: #fff;
    flex-shrink: 0;
}

.bpwg-player-name {
    flex: 1;
    font-weight: 700;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bpwg-player-score {
    font-size: 1.2rem;
    font-weight: 900;
    min-width: 32px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.bpwg-score-btns {
    display: flex;
    gap: 4px;
}

.bpwg-btn-score-adj {
    width: 28px;
    height: 28px;
    border: 1.5px solid var(--bpwg-border);
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bpwg-text-muted);
    transition: background var(--bpwg-transition), color var(--bpwg-transition);
    padding: 0;
    line-height: 1;
}
.bpwg-btn-score-adj:hover {
    background: var(--bpwg-border);
    color: var(--bpwg-text);
}

.bpwg-btn-remove-player {
    width: 24px;
    height: 24px;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--bpwg-text-muted);
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    padding: 0;
    opacity: 0.5;
    transition: opacity var(--bpwg-transition), color var(--bpwg-transition);
}
.bpwg-btn-remove-player:hover {
    opacity: 1;
    color: var(--bpwg-red);
}

.bpwg-scoreboard-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ── Buttons ────────────────────────────────────────────────────── */
.bpwg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--bpwg-radius-sm);
    padding: 10px 18px;
    font-family: var(--bpwg-font);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition:
        background var(--bpwg-transition),
        transform 0.1s ease,
        box-shadow var(--bpwg-transition);
    text-decoration: none;
    letter-spacing: 0.01em;
    white-space: nowrap;
}
.bpwg-btn:active {
    transform: translateY(1px);
}
.bpwg-btn:disabled {
    opacity: 0.42;
    cursor: not-allowed;
    transform: none;
}

.bpwg-btn-primary {
    background: var(--bpwg-green);
    color: #fff;
    box-shadow: 0 3px 10px rgba(61, 170, 109, 0.35);
}
.bpwg-btn-primary:hover:not(:disabled) {
    background: var(--bpwg-green-dark);
    box-shadow: 0 5px 16px rgba(61, 170, 109, 0.45);
}

.bpwg-btn-skip {
    background: var(--bpwg-orange);
    color: #fff;
    box-shadow: 0 3px 10px rgba(240, 125, 58, 0.35);
}
.bpwg-btn-skip:hover:not(:disabled) {
    background: var(--bpwg-orange-dark);
    box-shadow: 0 5px 16px rgba(240, 125, 58, 0.45);
}

.bpwg-btn-hint {
    background: var(--bpwg-blue);
    color: #fff;
    box-shadow: 0 3px 10px rgba(59, 158, 232, 0.35);
}
.bpwg-btn-hint:hover:not(:disabled) {
    background: var(--bpwg-blue-dark);
}

.bpwg-btn-go {
    background: var(--bpwg-green);
    color: #fff;
    box-shadow: 0 3px 10px rgba(61, 170, 109, 0.35);
}
.bpwg-btn-go:hover:not(:disabled) {
    background: var(--bpwg-green-dark);
}

.bpwg-btn-pause {
    background: var(--bpwg-yellow);
    color: #3a2e00;
    box-shadow: 0 3px 10px rgba(255, 212, 59, 0.35);
}
.bpwg-btn-pause:hover:not(:disabled) {
    background: #e6be28;
}

.bpwg-btn-reset {
    background: var(--bpwg-bg);
    color: var(--bpwg-text-muted);
    border: 1.5px solid var(--bpwg-border);
}
.bpwg-btn-reset:hover:not(:disabled) {
    background: var(--bpwg-border);
    color: var(--bpwg-text);
}

.bpwg-btn-add {
    background: var(--bpwg-purple);
    color: #fff;
    box-shadow: 0 3px 10px rgba(123, 82, 232, 0.3);
}
.bpwg-btn-add:hover:not(:disabled) {
    background: var(--bpwg-purple-dark);
}

.bpwg-btn-award {
    background: var(--bpwg-green);
    color: #fff;
    padding: 12px 18px;
    font-size: 0.95rem;
    box-shadow: 0 3px 10px rgba(61, 170, 109, 0.35);
}
.bpwg-btn-award:hover:not(:disabled) {
    background: var(--bpwg-green-dark);
}

.bpwg-btn-danger {
    background: #fff;
    color: var(--bpwg-red);
    border: 1.5px solid #FFD0D0;
}
.bpwg-btn-danger:hover:not(:disabled) {
    background: #FFF0F0;
}

/* ── Player avatar colors (cycle through) ───────────────────────── */
.bpwg-avatar-0 { background: var(--bpwg-green); }
.bpwg-avatar-1 { background: var(--bpwg-orange); }
.bpwg-avatar-2 { background: var(--bpwg-purple); }
.bpwg-avatar-3 { background: var(--bpwg-blue); }
.bpwg-avatar-4 { background: #E8529A; }
.bpwg-avatar-5 { background: #52C4E8; }
.bpwg-avatar-6 { background: #C4A232; }
.bpwg-avatar-7 { background: #6DBF4C; }

/* ── Empty state ────────────────────────────────────────────────── */
.bpwg-empty-msg {
    font-size: 0.88rem;
    color: var(--bpwg-text-muted);
    text-align: center;
    padding: 12px;
    font-style: italic;
}

/* ── Celebration flash ──────────────────────────────────────────── */
@keyframes bpwg-flash-green {
    0%   { background: var(--bpwg-card-bg); }
    30%  { background: #CFFAE0; }
    100% { background: var(--bpwg-card-bg); }
}
.bpwg-card.flash-point {
    animation: bpwg-flash-green 0.5s ease;
}

/* ── Card player bar ────────────────────────────────────────────── */
.bpwg-card-player-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: #EEFAF4;
    border: 1.5px solid var(--bpwg-green);
    border-radius: var(--bpwg-radius-sm);
    margin-top: 4px;
}

.bpwg-card-player-info {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.bpwg-card-player-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.9rem;
    color: #fff;
    flex-shrink: 0;
}

.bpwg-card-player-name {
    font-weight: 800;
    font-size: 1rem;
    color: var(--bpwg-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

.bpwg-card-player-label {
    font-size: 0.8rem;
    color: var(--bpwg-text-muted);
    white-space: nowrap;
}

/* shrink the award button slightly so it fits neatly on the card */
.bpwg-card-player-bar .bpwg-btn-award {
    padding: 9px 14px;
    font-size: 0.85rem;
    flex-shrink: 0;
}

@media (max-width: 480px) {
    .bpwg-card-player-bar {
        flex-direction: column;
        align-items: flex-start;
    }
    .bpwg-card-player-bar .bpwg-btn-award {
        width: 100%;
    }
}

/* ── Responsive tweaks ──────────────────────────────────────────── */
@media (max-width: 600px) {
    .bpwg-controls {
        flex-direction: row;
        align-items: flex-start;
    }
    .bpwg-card-actions {
        flex-direction: column;
    }
    .bpwg-card-actions .bpwg-btn {
        width: 100%;
    }
    .bpwg-timer-btns {
        flex-wrap: wrap;
        justify-content: center;
    }
}