*{box-sizing:border-box;margin:0;padding:0}

body{
    background:
        radial-gradient(circle at top, rgba(24, 47, 105, 0.65), transparent 20%),
        linear-gradient(180deg, #0d1734 0%, #0a1023 100%);
    color:#f7f2c9;
    font-family: "Trebuchet MS", Arial, sans-serif;
    width:100vw;
    height:100vh;
    overflow:hidden;
    display:flex;
    flex-direction:column;
}

/* ── TOP BAR ── */
.topbar{
    background:linear-gradient(90deg, #13295d 0%, #1d3b7a 50%, #13295d 100%);
    text-align:center;
    padding:8px 0 6px;
    border-bottom:2px solid #f4c542;
    flex-shrink:0;
    box-shadow:0 0 18px rgba(244,197,66,.15);
}
.topbar h1{
    color:#f7d65d;
    font-size:clamp(16px,2.2vw,28px);
    letter-spacing:4px;
    text-shadow:0 0 10px rgba(247,214,93,.45);
}

/* ── MAIN ROW ── */
.row{
    flex:1;
    display:flex;
    overflow:hidden;
}

/* ── SIDEBAR ── */
.sidebar{
    width:clamp(210px,18vw,300px);
    background:linear-gradient(180deg, #13295d 0%, #0f1f46 100%);
    padding:12px;
    overflow-y:auto;
    border-right:2px solid #213978;
    flex-shrink:0;
}
.sidebar h2{
    font-size:13px;
    color:#f7d65d;
    text-transform:uppercase;
    letter-spacing:1.5px;
    margin-bottom:10px;
    text-align:center;
}
.team{
    background:linear-gradient(180deg, #1c3478 0%, #14224b 100%);
    margin-bottom:10px;
    padding:10px;
    border-radius:10px;
    border-left:5px solid var(--tc);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
}
.team--champions{
    background:linear-gradient(180deg, #46330a 0%, #2c2000 100%);
    border-left-color:#f4c542;
    box-shadow:0 0 12px rgba(244,197,66,.18), inset 0 0 0 1px rgba(255,215,0,.08);
}
.team.is-eliminated{
    opacity:0.45;
    filter:grayscale(1);
    transform:scale(.98);
}
.team-header{display:flex;align-items:center;gap:6px;margin-bottom:4px}
.crown{font-size:14px;line-height:1}
.black-box-icon{
    font-size:16px;
    line-height:1;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:22px;
    height:22px;
    border-radius:999px;
    background:linear-gradient(135deg, rgba(107,92,255,.95), rgba(58,46,214,.9));
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.18),
        0 0 0 2px rgba(255,255,255,.06),
        0 0 10px rgba(107,92,255,.6);
    filter:drop-shadow(0 0 6px rgba(107,92,255,.55));
}
.team h3{font-size:13px;color:#fff7c0}
.players{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0}
.player{
    background:rgba(255,255,255,.08);
    border-radius:999px;
    padding:2px 8px;
    font-size:11px;
    color:#dfe7ff;
}
.team--champions .player{color:#ffe87a}
.money{font-size:18px;color:#f7d65d;margin:5px 0 8px;font-weight:bold}
.btnrow{display:flex;gap:4px;flex-wrap:wrap}

button{
    cursor:pointer;border:none;
    padding:5px 8px;border-radius:6px;
    font-weight:bold;font-size:12px;
    transition:opacity .15s ease, filter .15s ease, transform .1s ease;
}
button:disabled{
    cursor:not-allowed;
    opacity:.32;
    filter:grayscale(1) brightness(.75) contrast(.85);
    transform:none;
    box-shadow:none;
    text-shadow:none;
}
.plus{background:#1f7a2a;color:white}
.plus:hover{background:#2e9a3d}
.minus{background:#a01818;color:white}
.minus:hover{background:#d01f1f}

.modal-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.72);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:999;
}
.modal-overlay.visible{display:flex}
.modal-card{
    background:linear-gradient(180deg, #1d3a7a 0%, #10204d 100%);
    color:#fff;
    width:min(420px, 90vw);
    border-radius:12px;
    border:1px solid #f4c542;
    box-shadow:0 0 24px rgba(244,197,66,.2);
    padding:18px;
    text-align:center;
}

/* ── SPIN MODAL ── */
.spin-overlay{
    position:fixed;
    inset:0;
    background:
        radial-gradient(circle at center, rgba(11,22,48,.2), rgba(3,8,20,.82)),
        linear-gradient(180deg, rgba(5,10,25,.88), rgba(1,4,16,.94));
    display:none;
    align-items:center;
    justify-content:center;
    z-index:998;
    backdrop-filter:blur(6px);
    animation:spinOverlayFade .25s ease;
}
.spin-overlay.visible{
    display:flex;
}
.spin-overlay.visible .spin-modal{
    animation:spinModalZoom .3s ease;
}
.spin-modal{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:14px;
    padding:24px 18px;
}
.spin-modal-title{
    color:#fff7a8;
    font-size:clamp(18px,2.1vw,26px);
    font-weight:900;
    letter-spacing:2px;
    text-transform:uppercase;
    text-shadow:0 0 12px rgba(247,214,93,.35);
}
.spin-overlay-hint{
    color:#eef3ff;
    font-size:12px;
    letter-spacing:1px;
    text-transform:uppercase;
    opacity:.9;
}
.spin-wheel-wrap{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:transform .15s ease;
}
.spin-wheel-wrap:hover{
    transform:scale(1.02);
}
.spinButton--overlay{
    min-width:220px;
}
.spin-overlay-close{
    position:absolute;
    top:18px;
    right:18px;
    width:44px;
    height:44px;
    border-radius:999px;
    background:rgba(255,255,255,.08);
    color:#fff;
    font-size:28px;
    line-height:1;
    cursor:pointer;
    border:1px solid rgba(255,255,255,.12);
}
.spin-overlay-close:hover{
    background:rgba(255,255,255,.16);
}
@keyframes spinOverlayFade {
    from { opacity:0; }
    to { opacity:1; }
}
@keyframes spinModalZoom {
    from { transform:scale(.92); opacity:.7; }
    to { transform:scale(1); opacity:1; }
}
.spin-pointer{
    position:absolute;
    top:-10px;
    left:50%;
    transform:translateX(-50%);
    z-index:12;
}
.spin-wheel-svg{
    width:min(78vw, 520px);
    height:min(78vw, 520px);
    transition:transform 4s cubic-bezier(.17,.67,.12,1);
    filter:drop-shadow(0 0 24px rgba(244,197,66,.5));
}
.modal-card h3{
    color:#f7d65d;
    margin-bottom:8px;
    font-size:18px;
}
.modal-card p{
    color:#eef3ff;
    font-size:14px;
    margin-bottom:12px;
    line-height:1.4;
}
.modal-card button{
    background:linear-gradient(135deg,#f7d65d,#e2a600);
    color:#201400;
    padding:8px 16px;
}

/* ── CENTER ── */
.center{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:10px 12px;
    gap:10px;
    overflow:hidden;
}

/* ── WHEEL AREA ── */
.wheel-area{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    flex-shrink:0;
}
.pointer-wrap{
    width:0;height:0;
    border-left:14px solid transparent;
    border-right:14px solid transparent;
    border-top:28px solid #ff3b3b;
    filter:drop-shadow(0 0 6px rgba(255,59,59,.8));
    z-index:10;
}
#wheelSvg{
    width:clamp(180px,28vh,300px);
    height:clamp(180px,28vh,300px);
    transition:transform 4s cubic-bezier(.17,.67,.12,1);
    filter:drop-shadow(0 0 18px rgba(244,197,66,.35));
}
.wheel-segment.selected{
    stroke:#fffef0;
    stroke-width:8;
    filter:drop-shadow(0 0 14px rgba(255,245,140,.95)) drop-shadow(0 0 22px rgba(255,255,255,.35));
}

/* ── SPIN BUTTON ── */
.spinButton{
    background:linear-gradient(135deg,#f7d65d,#e2a600);
    color:#201400;
    font-size:clamp(13px,1.5vw,18px);
    padding:8px 22px;
    border-radius:999px;
    letter-spacing:1px;
    box-shadow:0 3px 16px rgba(242,192,0,.45);
    transition:transform .1s,box-shadow .1s;
}
.spinButton:hover{transform:scale(1.04);box-shadow:0 5px 20px rgba(242,192,0,.62)}
.spinButton:active{transform:scale(.97)}

/* ── QUESTION BOX ── */
.questionBox{
    background:linear-gradient(180deg, #1d3a7a 0%, #142555 100%);
    width:100%;
    max-width:680px;
    padding:10px 16px;
    border-radius:12px;
    border:1px solid #2f4d96;
    text-align:center;
    flex-shrink:0;
}
#categoryName{
    font-size:clamp(14px,1.8vw,20px);
    color:#fff7a8;
    font-weight:900;
    letter-spacing:1.2px;
    text-shadow:0 0 8px rgba(255,240,140,.45), 0 0 16px rgba(255,210,0,.2);
    margin-bottom:4px;
}

/* ── POT PANEL ── */
.potPanel{
    width:100%;
    max-width:680px;
    background:linear-gradient(180deg, #20336f 0%, #16265a 100%);
    border:1px solid #3a58a8;
    border-radius:12px;
    padding:10px 12px;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
}
.potHeader{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:8px;
}
.potHeader h2{
    font-size:13px;
    color:#f7d65d;
    text-transform:uppercase;
    letter-spacing:1.4px;
}
#potAmount{
    color:#fff7c0;
    font-size:16px;
    font-weight:bold;
}
.potControls{
    display:flex;
    gap:8px;
    align-items:center;
    flex-wrap:wrap;
}
.bidSelect{
    background:#0e1d3a;
    color:#eef3ff;
    border:1px solid #3a58a8;
    border-radius:8px;
    padding:6px 8px;
    font-size:12px;
    outline:none;
}
.bidButton{
    background:linear-gradient(135deg,#f7d65d,#e2a600);
    color:#201400;
    border-radius:8px;
    padding:6px 12px;
    font-size:12px;
}
.bidButton:hover{filter:brightness(1.05)}
.startButton{background:linear-gradient(135deg,#43b581,#1f8a52); color:#fff}
.blackBoxButton{background:linear-gradient(135deg,#6b5cff,#3a2ed6); color:#fff}
.vabankButton{background:linear-gradient(135deg,#ff5c5c,#c62828); color:#fff}
.answerControls{
    display:flex;
    gap:8px;
    margin-top:8px;
}
.answerButton{
    border-radius:8px;
    padding:6px 10px;
    font-size:12px;
    color:#fff;
}
.answerButton.correct{background:#1f8a52}
.answerButton.wrong{background:#8b1e1e}

/* ── HISTORY ── */
.history{
    width:100%;
    max-width:680px;
    background:linear-gradient(180deg, #101f49 0%, #0d1734 100%);
    padding:8px 14px;
    border-radius:12px;
    text-align:left;
    flex:1;
    overflow:hidden;
    min-height:0;
    display:flex;
    flex-direction:column;
}
.history h2{
    font-size:12px;
    color:#b9c5ff;
    text-transform:uppercase;
    letter-spacing:1px;
    margin-bottom:5px;
    flex-shrink:0;
}
#history{
    overflow-y:auto;
    font-size:12px;
    color:#dde6ff;
    flex:1;
}
#history div{
    padding:3px 0;
    border-bottom:1px solid #1f346e;
}

/* ── RIGHT PANEL (legenda) ── */
.rightpanel{
    width:clamp(140px,14vw,220px);
    background:linear-gradient(180deg, #101f49 0%, #0a1023 100%);
    padding:10px;
    border-left:2px solid #213978;
    flex-shrink:0;
    display:flex;
    flex-direction:column;
    gap:6px;
    overflow:hidden;
}
.rightpanel h2{
    font-size:12px;
    color:#f7d65d;
    text-transform:uppercase;
    letter-spacing:1px;
    text-align:center;
    margin-bottom:4px;
}
.category-history-panel{
    margin-top:6px;
    padding-top:8px;
    border-top:1px solid #213978;
    display:flex;
    flex-direction:column;
    gap:4px;
    min-height:0;
}
.category-history-panel h3{
    font-size:11px;
    color:#b9c5ff;
    text-transform:uppercase;
    letter-spacing:1px;
    text-align:center;
}
#categoryHistory{
    display:flex;
    flex-direction:column;
    gap:4px;
    overflow-y:auto;
    max-height:240px;
}
.category-history-item{
    background:rgba(255,255,255,.06);
    border-radius:6px;
    padding:4px 6px;
    font-size:11px;
    color:#eef3ff;
    display:flex;
    flex-direction:column;
    gap:2px;
}
.category-history-number{
    color:#f7d65d;
    font-weight:bold;
}
.cat-legend{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:12px;
    color:#eef3ff;
}
.cat-swatch{
    width:16px;height:16px;border-radius:4px;flex-shrink:0;
}