/* Confidence — neon party casino */

:root {
    --bg: #070a10;
    --bg-card: #101722;
    --bg-card-hover: #16202e;
    --neon: #00ff41;
    --neon-dim: rgba(0, 255, 65, 0.5);
    --cyan: #00d4aa;
    --gold: #ffd166;
    --text: #c5d1de;
    --text-muted: #5c6a7a;
    --border: #1e2836;
    --danger: #ff5370;
}

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

body {
    font-family: 'Courier New', monospace;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    background-image:
        radial-gradient(ellipse at 50% -10%, rgba(0, 212, 170, 0.08), transparent 60%),
        radial-gradient(ellipse at 50% 110%, rgba(0, 255, 65, 0.05), transparent 60%);
    background-attachment: fixed;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: repeating-linear-gradient(0deg,
        transparent 0px, transparent 3px,
        rgba(0, 255, 65, 0.012) 3px, rgba(0, 255, 65, 0.012) 4px);
    pointer-events: none;
    z-index: 0;
}

#app { position: relative; z-index: 1; }

.container { max-width: 960px; margin: 0 auto; padding: 1rem; }

h1 {
    font-size: 2.6rem;
    margin-bottom: .5rem;
    color: var(--neon);
    text-shadow: 0 0 18px var(--neon-dim), 0 0 40px rgba(0, 255, 65, .25);
    letter-spacing: .08em;
    animation: title-flicker 4s infinite;
}
h2 { font-size: 1.25rem; margin-bottom: .75rem; color: var(--cyan); }
h3 { font-size: 1.1rem; margin-bottom: .5rem; color: var(--cyan); text-transform: uppercase; letter-spacing: .1em; }

@keyframes title-flicker {
    0%, 100% { opacity: 1; }
    92% { opacity: 1; }
    93% { opacity: .6; }
    94% { opacity: 1; }
    96% { opacity: .8; }
    97% { opacity: 1; }
}

.muted { color: var(--text-muted); }
.subtitle { color: var(--text-muted); margin-bottom: 1.5rem; letter-spacing: .15em; text-transform: uppercase; font-size: .8rem; }

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .75rem 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.5rem;
}

.room-code {
    font-size: 1.4rem;
    color: var(--neon);
    text-shadow: 0 0 8px var(--neon-dim);
    letter-spacing: .15em;
}

.badge {
    padding: .2rem .6rem;
    border-radius: 4px;
    font-size: .75rem;
    font-weight: 600;
    border: 1px solid var(--border);
}
.badge-admin { background: rgba(0, 212, 170, .15); color: var(--cyan); border-color: var(--cyan); }
.badge-player { background: rgba(0, 255, 65, .12); color: var(--neon); border-color: var(--neon-dim); }

.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 1.25rem;
    margin-bottom: 1rem;
    position: relative;
    animation: card-in .35s ease-out both;
}
@keyframes card-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
.card::before {
    content: '';
    position: absolute;
    top: -1px; left: -1px;
    width: 14px; height: 14px;
    border-top: 2px solid var(--neon);
    border-left: 2px solid var(--neon);
}
.card::after {
    content: '';
    position: absolute;
    bottom: -1px; right: -1px;
    width: 14px; height: 14px;
    border-bottom: 2px solid var(--neon);
    border-right: 2px solid var(--neon);
}

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
@media (max-width: 700px) { .grid { grid-template-columns: 1fr; } }

.players, .questions { list-style: none; padding: 0; }
.players li, .questions li {
    padding: .5rem .75rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
}
.players li:last-child, .questions li:last-child { border-bottom: none; }

button {
    background: var(--bg-card);
    color: var(--neon);
    border: 1px solid var(--neon-dim);
    padding: .6rem 1.2rem;
    font-family: 'Courier New', monospace;
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .15s;
    border-radius: 4px;
}
button:hover {
    background: rgba(0, 255, 65, .1);
    box-shadow: 0 0 16px var(--neon-dim);
    border-color: var(--neon);
    transform: translateY(-1px);
}
button:active { transform: translateY(1px); }
button:disabled { opacity: .4; cursor: not-allowed; transform: none; }

input, textarea, select {
    background: #0d1117;
    border: 1px solid var(--border);
    color: var(--text);
    padding: .5rem;
    font-family: 'Courier New', monospace;
    font-size: .9rem;
    width: 100%;
    border-radius: 4px;
}
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--neon);
    box-shadow: 0 0 8px var(--neon-dim);
}
input::placeholder, textarea::placeholder { color: var(--text-muted); }

label { display: block; margin-bottom: .5rem; font-size: .85rem; color: var(--text-muted); }

.opt-row { display: flex; gap: 1rem; margin: .75rem 0; }
.opt-row label { flex: 1; margin: 0; }
.opt-row input { width: auto; margin-right: .5rem; }

.qtype-row { display: flex; gap: 1.5rem; margin-bottom: 1rem; }
.qtype-row label { display: flex; align-items: center; gap: .5rem; cursor: pointer; }

.form-hint {
    color: var(--text-muted);
    font-size: .8rem;
    margin: .25rem 0 .9rem;
    line-height: 1.4;
}

/* question-type toggle */
.qtype-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .6rem;
    margin-bottom: 1rem;
}
.qtype-card {
    position: relative;
    display: flex;
    margin: 0;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .8rem 1rem;
    background: var(--bg-card-hover);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    transition: all .15s;
    font-size: .95rem;
    font-weight: 700;
    color: var(--text);
}
.qtype-card input { position: absolute; opacity: 0; pointer-events: none; }
.qtype-card:hover {
    border-color: var(--cyan);
    transform: translateY(-1px);
    box-shadow: 0 0 12px rgba(0, 212, 170, .2);
}
.qtype-card:has(input:checked) {
    border-color: var(--neon);
    background: rgba(0, 255, 65, .08);
    box-shadow: 0 0 18px var(--neon-dim);
    color: #fff;
}

/* MC option inputs */
.mc-opts { display: grid; gap: .6rem; margin-bottom: .5rem; }
.opt-input {
    display: flex;
    margin: 0;
    align-items: center;
    gap: .75rem;
    padding: .75rem .9rem;
    background: var(--bg-card-hover);
    border: 1px solid var(--border);
    border-radius: 6px;
    animation: card-in .3s ease-out both;
}
.opt-input:nth-child(1) { animation-delay: .05s; }
.opt-input:nth-child(2) { animation-delay: .1s; }
.opt-input:nth-child(3) { animation-delay: .15s; }
.opt-input .opt-letter { flex-shrink: 0; }
.opt-input input { border: none; background: transparent; box-shadow: none; }
.opt-input input:focus { box-shadow: none; }
.opt-input:has(input:focus) {
    border-color: var(--neon);
    box-shadow: 0 0 14px var(--neon-dim);
    background: rgba(0, 255, 65, .05);
}
.opt-input.optional .opt-letter {
    border-style: dashed;
    opacity: .6;
}
.opt-input.optional { border-style: dashed; }

#msg, #home-msg { margin-top: 1rem; min-height: 1.5rem; }
.error { color: var(--danger); }
.ok { color: var(--neon); }

.players li strong, .questions li strong { color: var(--text); }

ul { list-style: none; padding: 0; margin: 0; }
li { padding: .5rem 0; border-bottom: 1px solid var(--border); }
li:last-child { border-bottom: none; }

/* ============ BETTING — player view ============ */

.question-display {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.4;
    margin: 1rem 0 1.25rem;
    padding: 1rem;
    background: rgba(0, 212, 170, .05);
    border: 1px solid rgba(0, 212, 170, .25);
    border-radius: 6px;
    animation: card-in .4s ease-out both;
    text-shadow: 0 0 20px rgba(0, 212, 170, .3);
}

.bet-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .8rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.balance strong { color: var(--gold); font-size: 1rem; text-shadow: 0 0 10px rgba(255, 209, 102, .4); }

.options { display: grid; gap: .6rem; margin-bottom: 1.25rem; }

.opt-card {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .9rem 1rem;
    background: var(--bg-card-hover);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    transition: all .15s;
    animation: card-in .35s ease-out both;
    font-size: 1rem;
    color: var(--text);
}
.opt-card:nth-child(1) { animation-delay: .05s; }
.opt-card:nth-child(2) { animation-delay: .1s; }
.opt-card:nth-child(3) { animation-delay: .15s; }
.opt-card:nth-child(4) { animation-delay: .2s; }
.opt-card:hover {
    border-color: var(--cyan);
    transform: translateX(4px);
    box-shadow: 0 0 12px rgba(0, 212, 170, .2);
}
.opt-card input { position: absolute; opacity: 0; pointer-events: none; }
.opt-card:has(input:checked) {
    border-color: var(--neon);
    background: rgba(0, 255, 65, .08);
    box-shadow: 0 0 18px var(--neon-dim), inset 0 0 24px rgba(0, 255, 65, .06);
    color: #fff;
}
.opt-letter {
    flex-shrink: 0;
    width: 2rem; height: 2rem;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--cyan);
    border-radius: 4px;
    color: var(--cyan);
    font-weight: 700;
    font-size: 1rem;
    transition: all .15s;
}
.opt-card:has(input:checked) .opt-letter {
    background: var(--neon);
    color: #04140a;
    border-color: var(--neon);
    box-shadow: 0 0 12px var(--neon-dim);
}
.opt-text { flex: 1; }

.bet-panel {
    padding: 1rem;
    border: 1px dashed var(--border);
    border-radius: 6px;
    margin-bottom: 1.25rem;
    background: rgba(255, 209, 102, .02);
}

.bet-display {
    font-size: 2.6rem;
    font-weight: 700;
    color: var(--gold);
    text-align: center;
    text-shadow: 0 0 20px rgba(255, 209, 102, .5);
    margin-bottom: .75rem;
    font-variant-numeric: tabular-nums;
}

input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    padding: 0;
    border: none;
    box-shadow: none;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--gold);
    border: 2px solid #04140a;
    box-shadow: 0 0 14px rgba(255, 209, 102, .7);
    cursor: grab;
}
input[type="range"]::-moz-range-thumb {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--gold);
    border: 2px solid #04140a;
    box-shadow: 0 0 14px rgba(255, 209, 102, .7);
    cursor: grab;
}

.quick-btns { display: flex; gap: .5rem; margin-top: .9rem; }
.quick-btns button {
    flex: 1;
    padding: .5rem;
    font-size: .8rem;
    background: var(--bg-card);
    border: 1px solid var(--neon-dim);
    color: var(--neon);
    cursor: pointer;
    border-radius: 4px;
}
.quick-btns button:hover { background: rgba(0,255,65,.15); }
.quick-btns button:last-child { border-color: var(--gold); color: var(--gold); }
.quick-btns button:last-child:hover { background: rgba(255,209,102,.15); box-shadow: 0 0 12px rgba(255,209,102,.4); }

.btn-lock {
    width: 100%;
    font-size: 1.1rem;
    padding: .9rem;
    animation: lock-pulse 2s infinite;
}
@keyframes lock-pulse {
    0%, 100% { box-shadow: 0 0 6px var(--neon-dim); }
    50% { box-shadow: 0 0 22px var(--neon-dim); }
}

/* locked-in */
.card.locked-in { border-color: var(--neon); box-shadow: 0 0 24px rgba(0, 255, 65, .15); }
.stamp {
    display: inline-block;
    color: var(--neon);
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: .15em;
    border: 3px solid var(--neon);
    border-radius: 6px;
    padding: .3rem 1rem;
    margin-bottom: .75rem;
    transform: rotate(-4deg);
    text-shadow: 0 0 12px var(--neon-dim);
    box-shadow: 0 0 18px rgba(0, 255, 65, .3), inset 0 0 14px rgba(0, 255, 65, .1);
    animation: stamp-in .3s cubic-bezier(.2, 2.2, .4, 1) both;
}
@keyframes stamp-in {
    from { transform: rotate(-4deg) scale(2.4); opacity: 0; }
    to { transform: rotate(-4deg) scale(1); opacity: 1; }
}
.locked-line { font-size: 1.05rem; margin-top: .5rem; }
.locked-line strong { color: var(--gold); }

/* ============ CLOSED — suspense ============ */

.suspense {
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: .2em;
    color: var(--gold);
    text-align: center;
    text-shadow: 0 0 20px rgba(255, 209, 102, .5);
    animation: suspense-pulse 1.2s ease-in-out infinite;
}
@keyframes suspense-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .55; transform: scale(1.02); }
}
.waiting {
    text-align: center;
    color: var(--text-muted);
    margin: .75rem 0 1.25rem;
    font-size: .9rem;
    letter-spacing: .1em;
}
.dots span { animation: dot-blink 1.2s infinite; }
.dots span:nth-child(2) { animation-delay: .2s; }
.dots span:nth-child(3) { animation-delay: .4s; }
@keyframes dot-blink {
    0%, 100% { opacity: .2; }
    50% { opacity: 1; }
}

.totals { display: grid; gap: .5rem; }
.total-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: .85rem;
}
.total-opt { flex: 0 0 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.total-bar {
    flex: 1;
    height: 10px;
    background: var(--border);
    border-radius: 5px;
    overflow: hidden;
}
.total-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--cyan), var(--neon));
    box-shadow: 0 0 10px var(--neon-dim);
    border-radius: 5px;
    animation: bar-grow .8s ease-out both;
    transform-origin: left;
}
@keyframes bar-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.total-amt { flex: 0 0 3.5rem; text-align: right; color: var(--gold); font-weight: 700; }

/* admin locked progress */
.locked-progress {
    height: 8px;
    background: var(--border);
    border-radius: 4px;
    overflow: hidden;
    margin: .5rem 0;
}
.locked-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--cyan), var(--neon));
    transition: width .4s ease-out;
    box-shadow: 0 0 10px var(--neon-dim);
}

/* ============ REVEAL ============ */

.reveal-card {
    border-color: var(--neon);
    box-shadow: 0 0 30px rgba(0, 255, 65, .12);
}
.reveal-label {
    text-align: center;
    font-size: .8rem;
    letter-spacing: .35em;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: .4rem;
}
.reveal-answer {
    text-align: center;
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--neon);
    text-shadow: 0 0 24px var(--neon-dim);
    margin-bottom: 1.25rem;
    animation: reveal-pop .5s cubic-bezier(.2, 2.4, .4, 1) both;
}
@keyframes reveal-pop {
    from { transform: scale(.3); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.scoreboard li {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem .75rem;
    border-bottom: 1px solid var(--border);
    animation: row-in .4s ease-out both;
}
.scoreboard li:nth-child(1) { animation-delay: .15s; }
.scoreboard li:nth-child(2) { animation-delay: .3s; }
.scoreboard li:nth-child(3) { animation-delay: .45s; }
.scoreboard li:nth-child(4) { animation-delay: .6s; }
.scoreboard li:nth-child(5) { animation-delay: .75s; }
.scoreboard li:last-child { border-bottom: none; }
@keyframes row-in {
    from { opacity: 0; transform: translateX(-16px); }
    to { opacity: 1; transform: translateX(0); }
}
.scoreboard li.hit { background: rgba(0, 255, 65, .05); }
.scoreboard li.miss { background: rgba(255, 83, 112, .05); }

.rank { flex: 0 0 1.8rem; font-size: 1.1rem; text-align: center; }
.s-nick { flex: 0 0 30%; font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-ans { flex: 1; font-size: .8rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scoreboard li.hit .s-ans { color: var(--neon); }
.scoreboard li.miss .s-ans { color: var(--danger); }
.s-score { flex: 0 0 4rem; text-align: right; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.delta {
    flex: 0 0 4.5rem;
    text-align: right;
    font-weight: 700;
    font-size: .85rem;
    font-variant-numeric: tabular-nums;
    animation: delta-pop .5s .9s ease-out both;
}
@keyframes delta-pop {
    from { transform: scale(.4); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
.delta.win { color: var(--neon); text-shadow: 0 0 8px var(--neon-dim); }
.delta.loss { color: var(--danger); text-shadow: 0 0 8px rgba(255, 83, 112, .4); }
.delta.zero { color: var(--text-muted); }

@media (max-width: 600px) {
    .s-ans { display: none; }
    .s-nick { flex: 1; }
}

/* ============ GAME OVER ============ */

.winner-banner {
    text-align: center;
    font-size: 2rem;
    font-weight: 700;
    color: var(--gold);
    text-shadow: 0 0 24px rgba(255, 209, 102, .6);
    margin-bottom: 1rem;
    animation: reveal-pop .6s cubic-bezier(.2, 2.4, .4, 1) both;
}
.podium {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: .75rem;
    margin: 1.25rem 0;
}
.podium-col {
    flex: 1;
    text-align: center;
    border: 1px solid var(--border);
    border-radius: 6px 6px 0 0;
    padding: .75rem .5rem;
    background: var(--bg-card-hover);
    animation: row-in .5s ease-out both;
}
.podium-col .p-nick { font-weight: 700; color: #fff; word-break: break-word; }
.podium-col .p-score { color: var(--gold); font-weight: 700; margin-top: .25rem; }
.podium-col.first { height: 120px; border-color: var(--gold); box-shadow: 0 0 24px rgba(255, 209, 102, .3); animation-delay: .1s; }
.podium-col.second { height: 90px; border-color: #b0bec5; animation-delay: .25s; }
.podium-col.third { height: 70px; border-color: #a07850; animation-delay: .4s; }
.podium-medal { font-size: 1.6rem; display: block; margin-bottom: .35rem; }

/* ============ screen fx ============ */

.screen-flash {
    position: fixed;
    inset: 0;
    z-index: 998;
    opacity: .22;
    pointer-events: none;
    animation: flash-fade .6s ease-out forwards;
}
@keyframes flash-fade { to { opacity: 0; } }

.confetti-piece {
    position: fixed;
    top: -24px;
    width: 9px;
    height: 15px;
    z-index: 999;
    pointer-events: none;
    border-radius: 2px;
    animation: confetti-fall linear forwards;
}
@keyframes confetti-fall {
    0% { transform: translateY(0) rotate(0deg); }
    100% { transform: translateY(110vh) rotate(720deg); }
}

/* ============ lobby list ✕ buttons ============ */

#players-list,
#pool-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
#players-list li,
#pool-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .45rem .6rem;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}
#players-list li:last-child,
#pool-list li:last-child {
    border-bottom: none;
}

.btn-kick,
.btn-del-q {
    background: transparent;
    border: 1px solid rgba(255, 83, 112, .35);
    color: #ff5370;
    border-radius: 6px;
    width: 26px;
    height: 26px;
    line-height: 1;
    font-size: .8rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: all .15s ease;
}
.btn-kick:hover,
.btn-del-q:hover {
    background: rgba(255, 83, 112, .15);
    border-color: #ff5370;
}

/* ============ footer (tales + copyright) ============ */

#page-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: rgba(10, 14, 26, .92);
    backdrop-filter: blur(8px);
    border-top: 1px solid rgba(0, 255, 65, .18);
    padding: .55rem 1rem;
    text-align: center;
    font-size: .72rem;
    line-height: 1.35;
    color: rgba(255, 255, 255, .55);
    pointer-events: none;
}

.footer-tale {
    font-style: italic;
    color: rgba(0, 255, 65, .75);
    margin-bottom: .2rem;
}

.footer-copy {
    font-size: .62rem;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .35);
}