/* ===================================================
   FOOFIE TRIVIA — Public Game Styles
   Bring Back The Magic Podcast
   =================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Nunito:ital,wght@0,600;0,700;0,800;1,700&display=swap');

:root {
    --ft-navy:    #0e2a4a;
    --ft-blue:    #1a3a6e;
    --ft-mid:     #1e4d8c;
    --ft-btn:     #16396b;
    --ft-orange:  #f7941d;
    --ft-gold:    #ffd700;
    --ft-white:   #ffffff;
    --ft-correct: #22c55e;
    --ft-wrong:   #ef4444;
    --ft-radius:  14px;
    --ft-shadow:  0 4px 20px rgba(0,0,0,.45);
    --ft-glow-o:  0 0 18px rgba(247,148,29,.6);
}

.ft-game-root * { box-sizing: border-box; }

.ft-game-root {
    font-family: 'Nunito', sans-serif;
    background: var(--ft-navy);
    color: var(--ft-white);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    min-height: 580px;
    max-width: 900px;
    margin: 0 auto;
    box-shadow: var(--ft-shadow);
    background-image:
        radial-gradient(ellipse at 10% 10%, rgba(26,58,110,.7) 0%, transparent 60%),
        radial-gradient(ellipse at 90% 90%, rgba(14,42,74,.8) 0%, transparent 60%);
}

/* SCREENS */
.ft-screen { display: none; padding: 24px; animation: ftFadeIn .35s ease; }
.ft-screen-active { display: block; }
@keyframes ftFadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

.ft-hidden { display: none !important; }

/* ======= SETUP ======= */
.ft-setup-header { text-align: center; padding-bottom: 20px; }
.ft-logo-title {
    font-family: 'Bangers', cursive;
    font-size: clamp(42px, 8vw, 72px);
    color: var(--ft-white);
    -webkit-text-stroke: 3px var(--ft-orange);
    text-shadow: 3px 3px 0 var(--ft-orange), 5px 5px 0 rgba(0,0,0,.4);
    letter-spacing: 3px;
    line-height: 1;
}
.ft-tagline { color: rgba(255,255,255,.65); font-size: 13px; margin: 4px 0 0; }

.ft-setup-body { max-width: 560px; margin: 0 auto; }
.ft-setup-section { margin-bottom: 22px; }
.ft-setup-label { display: block; font-size: 15px; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; color: var(--ft-orange); margin-bottom: 10px; }

.ft-player-count-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.ft-count-btn {
    width: 60px; height: 60px;
    border-radius: 12px;
    border: 3px solid rgba(255,255,255,.2);
    background: var(--ft-btn);
    color: var(--ft-white);
    font-family: 'Bangers', cursive;
    font-size: 28px;
    cursor: pointer;
    transition: all .18s;
}
.ft-count-btn:hover { border-color: var(--ft-orange); transform: scale(1.08); }
.ft-count-btn.ft-count-selected { border-color: var(--ft-orange); background: var(--ft-orange); color: var(--ft-navy); box-shadow: var(--ft-glow-o); }

.ft-name-row {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 10px;
}
.ft-player-color {
    width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
}
.ft-player-color.p1 { background: #f7941d; }
.ft-player-color.p2 { background: #22c55e; }
.ft-player-color.p3 { background: #a78bfa; }
.ft-player-color.p4 { background: #f472b6; }

.ft-name-input {
    flex: 1;
    background: rgba(255,255,255,.1);
    border: 2px solid rgba(255,255,255,.2);
    border-radius: 8px;
    color: #fff;
    font-family: 'Nunito', sans-serif;
    font-size: 15px;
    font-weight: 700;
    padding: 9px 14px;
    transition: border .18s;
}
.ft-name-input:focus { outline: none; border-color: var(--ft-orange); }
.ft-name-input::placeholder { color: rgba(255,255,255,.35); }

.ft-big-btn {
    display: block; width: 100%; max-width: 320px; margin: 0 auto;
    padding: 16px 0;
    font-family: 'Bangers', cursive;
    font-size: 26px; letter-spacing: 2px;
    background: var(--ft-orange);
    color: var(--ft-navy);
    border: none; border-radius: 50px;
    cursor: pointer;
    box-shadow: var(--ft-glow-o), 0 4px 0 #b35e00;
    transition: transform .15s, box-shadow .15s;
    margin-top: 10px;
}
.ft-big-btn:hover { transform: translateY(-2px); box-shadow: var(--ft-glow-o), 0 6px 0 #b35e00; }
.ft-big-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #b35e00; }

/* ======= ANNOUNCE ======= */
#ft-screen-announce {
    display: none;
    text-align: center;
    padding: 50px 24px;
}
.ft-announce-round {
    font-family: 'Bangers', cursive;
    font-size: 22px; letter-spacing: 3px;
    color: var(--ft-orange);
    margin-bottom: 8px;
}
.ft-announce-text {
    font-size: 14px; text-transform: uppercase; letter-spacing: 2px;
    color: rgba(255,255,255,.6); margin-bottom: 12px;
}
.ft-announce-name {
    font-family: 'Bangers', cursive;
    font-size: clamp(44px, 10vw, 80px);
    color: var(--ft-gold);
    text-shadow: 0 0 30px rgba(255,215,0,.6);
    line-height: 1;
    animation: ftPulse 1.2s ease-in-out infinite;
}
.ft-announce-sub {
    font-size: 18px; font-weight: 900; text-transform: uppercase; letter-spacing: 2px;
    color: rgba(255,255,255,.75); margin-bottom: 30px;
}
@keyframes ftPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.04)} }

/* ======= GAME SCREEN ======= */
.ft-top-bar {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px;
    background: rgba(0,0,0,.25);
    border-radius: 10px; padding: 8px 16px;
}
.ft-turn-indicator { font-weight: 900; font-size: 15px; color: var(--ft-orange); }
.ft-progress-text  { font-size: 13px; color: rgba(255,255,255,.65); }
.ft-round-badge    { font-size: 12px; font-weight: 900; text-transform: uppercase; color: var(--ft-gold); }

.ft-score-row {
    display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px;
}
.ft-score-chip {
    padding: 5px 14px; border-radius: 20px;
    font-size: 13px; font-weight: 900;
    border: 2px solid rgba(255,255,255,.15);
    background: rgba(255,255,255,.08);
    transition: all .3s;
}
.ft-score-chip.active-player { border-color: var(--ft-orange); background: rgba(247,148,29,.18); color: var(--ft-orange); }
.ft-score-chip .chip-name { margin-right: 6px; }
.ft-score-chip .chip-score { font-family: 'Bangers', cursive; font-size: 16px; }

.ft-meta-row {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px;
}
.ft-category-badge, .ft-diff-badge {
    font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: 1px;
    padding: 3px 10px; border-radius: 20px;
}
.ft-category-badge { background: rgba(255,255,255,.12); }
.ft-diff-badge { background: rgba(247,148,29,.2); color: var(--ft-orange); }
.ft-diff-badge.hard { background: rgba(239,68,68,.2); color: #f87171; }
.ft-diff-badge.easy { background: rgba(34,197,94,.2); color: #4ade80; }

/* Timer */
.ft-timer-wrap { position: relative; width: 50px; height: 50px; flex-shrink: 0; }
.ft-timer-ring { width: 50px; height: 50px; transform: rotate(-90deg); }
.ft-ring-bg   { fill: none; stroke: rgba(255,255,255,.12); stroke-width: 3.5; }
.ft-ring-fill { fill: none; stroke: var(--ft-orange); stroke-width: 3.5; stroke-linecap: round;
    stroke-dasharray: 113; stroke-dashoffset: 0; transition: stroke-dashoffset 1s linear, stroke .3s; }
.ft-ring-fill.danger { stroke: var(--ft-wrong); }
.ft-timer-num {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    font-family: 'Bangers', cursive; font-size: 20px; color: var(--ft-white);
}

/* Game layout */
.ft-game-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: stretch;
}
@media (max-width: 600px) {
    .ft-game-layout { grid-template-columns: 1fr; }
}

.ft-question-box {
    background: var(--ft-btn);
    border: 3px solid rgba(255,255,255,.15);
    border-radius: var(--ft-radius);
    padding: 24px 20px;
    display: flex; align-items: center; justify-content: center;
    min-height: 160px;
    font-family: 'Nunito', sans-serif;
    font-size: clamp(16px, 2.6vw, 22px);
    font-weight: 800;
    line-height: 1.5;
    text-align: center;
    letter-spacing: 0;
}

.ft-answers-col { display: flex; flex-direction: column; gap: 10px; }

.ft-answer-btn {
    display: flex; align-items: center; gap: 14px;
    background: var(--ft-btn);
    border: 3px solid rgba(255,255,255,.15);
    border-radius: var(--ft-radius);
    color: var(--ft-white);
    font-family: 'Nunito', sans-serif;
    font-size: clamp(14px, 2.2vw, 17px);
    font-weight: 700;
    letter-spacing: 0;
    padding: 12px 16px;
    cursor: pointer;
    text-align: left;
    transition: border-color .18s, background .18s, transform .12s;
    flex: 1;
    width: 100%;
}
.ft-answer-btn:hover:not(:disabled) {
    border-color: var(--ft-orange);
    background: rgba(247,148,29,.15);
    transform: translateX(3px);
}
.ft-answer-btn:disabled { cursor: default; }

.ft-ans-letter {
    background: rgba(255,255,255,.15);
    border-radius: 6px; width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 16px; flex-shrink: 0;
}
.ft-ans-text { flex: 1; }

/* Answer states */
.ft-answer-btn.correct {
    border-color: var(--ft-correct) !important;
    background: rgba(34,197,94,.22) !important;
    color: #86efac !important;
    animation: ftCorrectPop .3s ease;
}
.ft-answer-btn.wrong {
    border-color: var(--ft-wrong) !important;
    background: rgba(239,68,68,.18) !important;
    color: #fca5a5 !important;
    animation: ftShake .4s ease;
}
.ft-answer-btn.reveal-correct {
    border-color: var(--ft-correct) !important;
    background: rgba(34,197,94,.1) !important;
}

@keyframes ftCorrectPop { 0%{transform:scale(1)} 40%{transform:scale(1.04)} 100%{transform:scale(1)} }
@keyframes ftShake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-5px)} 40%{transform:translateX(5px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} }

/* Result banner */
.ft-result-banner {
    display: none;
    text-align: center;
    padding: 14px 0 4px;
    font-family: 'Bangers', cursive;
    font-size: clamp(36px, 7vw, 56px);
    letter-spacing: 4px;
    animation: ftResultPop .35s cubic-bezier(.34,1.56,.64,1);
}
.ft-result-banner.show { display: block; }
.ft-result-banner.correct { color: var(--ft-correct); text-shadow: 0 0 24px rgba(34,197,94,.7); }
.ft-result-banner.wrong   { color: var(--ft-wrong);   text-shadow: 0 0 24px rgba(239,68,68,.7); }
@keyframes ftResultPop { from{transform:scale(.6);opacity:0} to{transform:scale(1);opacity:1} }

/* Streak toast */
.ft-streak-toast {
    text-align: center;
    font-family: 'Bangers', cursive;
    font-size: 22px; letter-spacing: 2px;
    color: var(--ft-gold);
    min-height: 30px;
    margin-top: 4px;
    animation: ftFadeIn .3s ease;
}

/* ======= END SCREEN ======= */
#ft-screen-end { text-align: center; padding: 30px 24px; }
.ft-end-title {
    font-family: 'Bangers', cursive;
    font-size: clamp(50px, 10vw, 80px);
    color: var(--ft-gold);
    text-shadow: 0 0 30px rgba(255,215,0,.5);
    line-height: 1;
}
.ft-end-subtitle { font-size: 18px; font-weight: 900; color: rgba(255,255,255,.65); margin: 6px 0 20px; text-transform: uppercase; }

.ft-final-scores { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-bottom: 24px; }
.ft-final-chip {
    background: var(--ft-btn);
    border: 3px solid rgba(255,255,255,.15);
    border-radius: 14px; padding: 16px 22px; text-align: center;
    min-width: 130px;
}
.ft-final-chip.winner { border-color: var(--ft-gold); background: rgba(255,215,0,.1); }
.ft-final-name { font-weight: 900; font-size: 15px; margin-bottom: 4px; }
.ft-final-score-num { font-family: 'Bangers', cursive; font-size: 42px; color: var(--ft-orange); line-height: 1; }
.ft-final-detail { font-size: 11px; color: rgba(255,255,255,.5); margin-top: 2px; }
.ft-winner-crown { font-size: 24px; margin-bottom: 4px; display: block; }

.ft-lb-title { font-family: 'Bangers', cursive; font-size: 28px; letter-spacing: 2px; color: var(--ft-gold); margin-bottom: 12px; }
.ft-lb-list { max-width: 500px; margin: 0 auto; }
.ft-lb-row {
    display: flex; align-items: center; gap: 12px;
    background: rgba(255,255,255,.06); border-radius: 8px;
    padding: 8px 14px; margin-bottom: 6px;
}
.ft-lb-row:first-child { background: rgba(255,215,0,.12); border: 1px solid rgba(255,215,0,.25); }
.ft-lb-pos { font-family: 'Bangers', cursive; font-size: 20px; color: rgba(255,255,255,.5); width: 30px; text-align: center; }
.ft-lb-pname { flex: 1; font-weight: 900; text-align: left; }
.ft-lb-pts { font-family: 'Bangers', cursive; font-size: 22px; color: var(--ft-orange); }

/* ==========================================
   NEW v2 ADDITIONS
========================================== */

/* Category / Difficulty filter row */
.ft-filter-row {
    display: flex; gap: 10px; flex-wrap: wrap;
}
.ft-select {
    flex: 1; min-width: 160px;
    background: rgba(255,255,255,.1);
    border: 2px solid rgba(255,255,255,.2);
    border-radius: 8px;
    color: #fff;
    font-family: 'Nunito', sans-serif;
    font-size: 14px; font-weight: 700;
    padding: 9px 12px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23f7941d' stroke-width='2' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}
.ft-select:focus { outline: none; border-color: var(--ft-orange); }
.ft-select option { background: #1a3a6e; color: #fff; }

/* Spectator link */
.ft-spectator-link {
    color: rgba(255,255,255,.5);
    font-size: 13px;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,.15);
    padding: 6px 14px; border-radius: 20px;
    transition: all .2s;
    display: inline-block;
}
.ft-spectator-link:hover { color: var(--ft-orange); border-color: var(--ft-orange); }

/* Announce screen scores */
.ft-announce-scores {
    display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 14px 0 22px;
}
.ft-announce-score-chip {
    padding: 5px 14px; border-radius: 20px; font-size: 13px;
    border: 2px solid rgba(255,255,255,.2);
    background: rgba(255,255,255,.06);
}
.ft-announce-score-chip.ft-announce-score-active {
    border-color: var(--ft-orange); color: var(--ft-orange);
}

/* Bottom row (streak + points pop) */
.ft-bottom-row {
    display: flex; justify-content: space-between; align-items: center;
    min-height: 34px; margin-top: 4px;
}
.ft-streak-toast {
    font-family: 'Bangers', cursive; font-size: 20px; letter-spacing: 1px;
    color: var(--ft-gold); animation: ftFadeIn .3s ease;
}
.ft-points-pop {
    font-family: 'Bangers', cursive; font-size: 22px; color: var(--ft-correct);
    letter-spacing: 1px; transition: opacity .6s ease;
}

/* ==========================================
   SPECTATOR / AUDIENCE MODE
========================================== */
.ft-spectator-root {
    font-family: 'Nunito', sans-serif;
    background: var(--ft-navy);
    color: #fff;
    min-height: 100vh;
    padding: 0;
    background-image:
        radial-gradient(ellipse at 15% 15%, rgba(26,58,110,.6) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 85%, rgba(14,42,74,.8) 0%, transparent 55%);
}

.ft-spec-header {
    text-align: center; padding: 28px 20px 16px;
    border-bottom: 2px solid rgba(247,148,29,.25);
}
.ft-spec-logo {
    font-family: 'Bangers', cursive;
    font-size: clamp(48px, 8vw, 80px);
    color: #fff;
    -webkit-text-stroke: 3px var(--ft-orange);
    text-shadow: 3px 3px 0 var(--ft-orange), 6px 6px 0 rgba(0,0,0,.35);
    letter-spacing: 3px; line-height: 1;
}
.ft-spec-sub { color: rgba(255,255,255,.5); font-size: 14px; margin-top: 4px; }

.ft-spec-panel { padding: 30px 40px 40px; }
@media(max-width:700px){ .ft-spec-panel { padding: 20px 16px; } }

/* Waiting */
#ft-spec-waiting { text-align: center; padding-top: 80px; }
.ft-spec-wait-icon { font-size: 72px; animation: ftPulse 1.5s ease-in-out infinite; }
.ft-spec-wait-text { font-family: 'Bangers', cursive; font-size: clamp(28px,5vw,48px); letter-spacing: 3px; color: var(--ft-orange); margin: 16px 0 8px; }
.ft-spec-wait-hint { color: rgba(255,255,255,.4); font-size: 15px; }

/* Live panel */
.ft-spec-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 12px; }
.ft-spec-scores { display: flex; gap: 10px; flex-wrap: wrap; }
.ft-spec-score-chip {
    background: rgba(255,255,255,.08); border: 2px solid;
    border-radius: 10px; padding: 8px 16px;
    display: flex; flex-direction: column; align-items: center; min-width: 90px;
    font-size: 13px; font-weight: 700;
}
.ft-spec-score-chip strong { font-family: 'Bangers', cursive; font-size: 24px; color: var(--ft-orange); }
.ft-spec-round { font-family: 'Bangers', cursive; font-size: 22px; letter-spacing: 2px; color: var(--ft-gold); }

.ft-spec-meta {
    display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px;
}
.ft-spec-cat, .ft-spec-diff {
    font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: 1px;
    padding: 4px 12px; border-radius: 20px;
}
.ft-spec-cat  { background: rgba(255,255,255,.12); }
.ft-spec-diff { background: rgba(247,148,29,.2); color: var(--ft-orange); }
.ft-spec-diff.hard { background: rgba(239,68,68,.2); color: #f87171; }
.ft-spec-diff.easy { background: rgba(34,197,94,.2); color: #4ade80; }

/* Spectator timer */
.ft-spec-timer-wrap { position:relative; width:68px; height:68px; flex-shrink:0; }
.ft-spec-timer-ring { width:68px; height:68px; transform: rotate(-90deg); }
.ft-spec-timer-ring .ft-ring-bg   { fill:none; stroke:rgba(255,255,255,.1); stroke-width:4; }
.ft-spec-timer-ring .ft-ring-fill { fill:none; stroke:var(--ft-orange); stroke-width:4; stroke-linecap:round;
    stroke-dasharray: 150.8; stroke-dashoffset:0; transition: stroke-dashoffset 1s linear, stroke .3s; }
.ft-spec-timer-ring .ft-ring-fill.danger { stroke: var(--ft-wrong); }
.ft-spec-timer-num { position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); font-family:'Bangers',cursive; font-size:26px; }

/* Spectator question */
.ft-spec-question {
    background: var(--ft-btn);
    border: 3px solid rgba(255,255,255,.12);
    border-radius: 16px;
    padding: 28px 32px;
    font-family: 'Nunito', sans-serif;
    font-size: clamp(20px, 3.5vw, 32px);
    font-weight: 800;
    letter-spacing: 0; line-height: 1.5;
    text-align: center; margin-bottom: 20px;
}

/* Spectator answers */
.ft-spec-answers {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px;
}
@media(max-width:600px){ .ft-spec-answers { grid-template-columns:1fr; } }

.ft-spec-ans {
    background: var(--ft-btn);
    border: 3px solid rgba(255,255,255,.12);
    border-radius: 14px; padding: 16px 20px;
    display: flex; align-items: center; gap: 14px;
    font-family: 'Nunito', sans-serif;
    font-size: clamp(14px, 2.2vw, 18px);
    font-weight: 700;
    letter-spacing: 0;
    transition: border-color .3s, background .3s;
}
.ft-spec-ans.correct { border-color: var(--ft-correct); background: rgba(34,197,94,.18); color: #86efac; }
.ft-spec-ans.wrong   { border-color: var(--ft-wrong);   background: rgba(239,68,68,.15);  color: #fca5a5; }
.ft-spec-ans.reveal-correct { border-color: var(--ft-correct); background: rgba(34,197,94,.08); }
.ft-spec-letter {
    background: rgba(255,255,255,.15); border-radius: 8px;
    width: 36px; height: 36px; flex-shrink:0;
    display:inline-flex; align-items:center; justify-content:center; font-size:18px;
}

/* Spectator result */
.ft-spec-result {
    text-align:center;
    font-family:'Bangers',cursive;
    font-size: clamp(36px, 6vw, 56px);
    letter-spacing:3px; min-height:60px;
    transition: color .3s;
}
.ft-spec-result.correct { color: var(--ft-correct); text-shadow: 0 0 24px rgba(34,197,94,.6); }
.ft-spec-result.wrong   { color: var(--ft-wrong);   text-shadow: 0 0 24px rgba(239,68,68,.6); }

/* Game over spectator */
#ft-spec-gameover { text-align:center; padding-top: 60px; }
.ft-spec-go-title { font-family:'Bangers',cursive; font-size:clamp(52px,9vw,88px); color:var(--ft-gold); text-shadow:0 0 30px rgba(255,215,0,.5); margin-bottom:24px; }
.ft-spec-go-row { font-size:clamp(18px,3vw,26px); font-weight:700; margin:8px 0; }