*{box-sizing:border-box}body{margin:0;font-family:Arial,sans-serif;background:#0b1020;color:#fff;min-height:100vh}.app-shell{max-width:850px;margin:0 auto;padding:40px 20px}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}.topbar h1{font-size:40px;margin:0}.topbar p{color:#9aa6c5;margin:6px 0 0}.topbar-actions{display:flex;align-items:center;gap:10px}.scorebox{background:#151c33;padding:14px 18px;border-radius:14px}.restart-btn{border:1px solid #34405e;background:#151c33;color:#dbe3f8;padding:13px 16px;border-radius:14px;font-weight:bold;cursor:pointer}.restart-btn:hover{background:#202a45}.game-card{background:#11182b;border:1px solid #27314d;border-radius:22px;padding:30px;box-shadow:0 20px 70px rgba(0,0,0,.35)}.progress{height:9px;background:#29314a;border-radius:20px;overflow:hidden;margin-bottom:18px}.progress:after{content:"";display:block;height:100%;width:var(--progress,5%);background:linear-gradient(90deg,#6c5cff,#c45cff);transition:.25s}.status-row{display:flex;justify-content:space-between;color:#b6c0dc;font-size:14px;margin-bottom:28px}.play-btn{display:block;width:180px;height:180px;margin:12px auto 34px;border:0;border-radius:50%;font-size:23px;font-weight:bold;color:#fff;background:linear-gradient(145deg,#6c5cff,#bd4cff);box-shadow:0 0 45px rgba(132,83,255,.35);cursor:pointer}.search-wrap{position:relative}.search-wrap input{width:100%;padding:17px 18px;font-size:17px;border-radius:13px;border:1px solid #34405e;background:#0b1120;color:#fff;outline:none}.suggestions{position:absolute;z-index:10;left:0;right:0;top:calc(100% + 6px);background:#171f36;border:1px solid #384461;border-radius:12px;max-height:300px;overflow:auto}.suggestion{padding:13px 15px;cursor:pointer;border-bottom:1px solid #27314a}.suggestion:hover{background:#242e4a}.actions{display:flex;gap:12px;margin-top:17px}.actions button,.modal button{flex:1;padding:14px 18px;border:0;border-radius:11px;background:#7259ff;color:#fff;font-weight:bold;cursor:pointer}.actions button:disabled{opacity:.45;cursor:not-allowed}.actions .secondary{background:#27314a}.message{min-height:24px;margin-top:17px;color:#ffca5c}.hidden{display:none!important}.modal{position:fixed;inset:0;background:rgba(3,5,12,.82);display:flex;align-items:center;justify-content:center;padding:20px;z-index:30}.modal-card{max-width:460px;width:100%;text-align:center;background:#121a2d;border:1px solid #33405f;border-radius:22px;padding:35px}.result-icon{font-size:70px;font-weight:bold}.modal-card h2{font-size:32px;margin:8px}.modal-card p{color:#bbc4dd;font-size:17px}@media(max-width:600px){.topbar{align-items:flex-start}.topbar-actions{flex-direction:column;align-items:stretch}.restart-btn{padding:11px 12px}.topbar h1{font-size:32px}.game-card{padding:20px}.play-btn{width:145px;height:145px}.actions{flex-direction:column}.status-row{gap:10px;flex-direction:column}}
.history-card{margin-top:22px;background:#11182b;border:1px solid #27314d;border-radius:22px;padding:24px 30px;box-shadow:0 20px 70px rgba(0,0,0,.22)}
.history-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px}.history-head h2{margin:0;font-size:22px}.history-head p{margin:5px 0 0;color:#8f9ab8;font-size:14px}.history-count{background:#202a45;color:#c9d2ec;border-radius:999px;padding:8px 12px;font-size:13px;white-space:nowrap}.history-empty{padding:22px 5px;color:#8995b5;text-align:center;border-top:1px solid #222c46}.history-table-wrap{overflow-x:auto}.history-table{width:100%;border-collapse:collapse;min-width:650px}.history-table th{text-align:left;color:#7f8baa;font-size:12px;text-transform:uppercase;letter-spacing:.05em;padding:11px 10px;border-bottom:1px solid #2a3552}.history-table td{padding:14px 10px;border-bottom:1px solid #202a43;color:#dce3f7;vertical-align:middle}.history-table tbody tr:last-child td{border-bottom:0}.history-song strong{display:block;color:#fff}.history-song span{display:block;color:#8e9ab8;font-size:13px;margin-top:3px}.result-badge{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border-radius:999px;font-weight:bold;font-size:12px;white-space:nowrap}.result-badge.good{background:rgba(61,201,143,.13);color:#70e0ae;border:1px solid rgba(61,201,143,.22)}.result-badge.bad{background:rgba(255,99,123,.12);color:#ff8699;border:1px solid rgba(255,99,123,.20)}.history-points.good{color:#70e0ae;font-weight:bold}.history-points.bad{color:#8d98b5}.history-muted{color:#96a2c0}
@media(max-width:600px){.history-card{padding:20px}.history-head{align-items:flex-start}.history-count{margin-top:2px}}
.result-panel{text-align:center;padding:18px 8px 4px}.result-panel-icon{font-size:64px;font-weight:bold;line-height:1}.result-panel h2{font-size:32px;margin:8px 0}.result-panel-answer{font-size:22px;font-weight:bold;color:#fff;margin:10px 0}.result-panel-points{font-size:18px;color:#70e0ae;font-weight:bold}.result-panel-listen{color:#aeb9d6;margin:20px 0 8px}.result-audio-status{color:#8f9ab8;font-size:14px;min-height:20px;margin-bottom:20px}.result-next-btn{min-width:230px;padding:15px 24px;border:0;border-radius:12px;background:#7259ff;color:#fff;font-weight:bold;font-size:16px;cursor:pointer}.result-next-btn:hover{filter:brightness(1.08)}

.actions .danger{background:linear-gradient(135deg,#ef4444,#b91c1c);border:1px solid #ef4444;color:#fff}.actions .danger:hover{background:linear-gradient(135deg,#f87171,#dc2626);filter:brightness(1.05)}
.site-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 8px;
}

.site-logo img {
    display: block;
    width: auto;
    height: auto;
    max-width: 300px;
    max-height: 150px;
    object-fit: contain;
}

@media (max-width: 700px) {
    .site-logo img {
        max-width: 95%;
        max-height: 110px;
    }
}
.volume-control{display:flex;align-items:center;justify-content:center;gap:10px;margin:-16px auto 28px;max-width:360px;color:#aeb9d6}.volume-control input[type=range]{width:100%;accent-color:#7a5cff;cursor:pointer}.volume-icon{font-size:18px}.volume-value{width:48px;text-align:right;font-size:13px;color:#9da8c6;font-variant-numeric:tabular-nums}

.result-volume-control { margin: 16px auto 18px; max-width: 420px; }
/* Leaderboard */
.leaderboard-panel{position:fixed;left:0;top:0;bottom:0;width:var(--leaderboard-width,300px);background:#0d1427;border-right:1px solid #27314d;z-index:20;display:flex;flex-direction:column;box-shadow:10px 0 35px rgba(0,0,0,.22);transition:transform .25s ease}.leaderboard-panel.collapsed{transform:translateX(calc(-1 * var(--leaderboard-width,300px)))}.leaderboard-toggle{position:absolute;right:-42px;top:18px;width:42px;height:46px;border:1px solid #34405e;border-left:0;border-radius:0 10px 10px 0;background:#151c33;color:#fff;font-size:28px;cursor:pointer}.leaderboard-panel.collapsed .leaderboard-toggle{font-size:0}.leaderboard-panel.collapsed .leaderboard-toggle:after{content:'🏆';font-size:19px}.leaderboard-head{padding:24px 18px 14px;border-bottom:1px solid #222c46}.leaderboard-head h2{margin:0;font-size:21px}.leaderboard-period{color:#7f8baa;font-size:12px;margin-top:5px}.leaderboard-list{overflow-y:auto;padding:10px 12px 26px;flex:1}.leader-row{display:grid;grid-template-columns:34px 1fr auto;gap:8px;align-items:center;padding:11px 8px;border-bottom:1px solid #1e2840}.leader-row.me{background:rgba(114,89,255,.13);border-radius:10px}.leader-rank{color:#8f9ab8;font-weight:bold;text-align:center}.leader-name{font-weight:bold;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.leader-meta{display:block;color:#7f8baa;font-size:11px;margin-top:3px}.leader-score{font-weight:bold;color:#70e0ae;text-align:right}.leader-loading,.leader-empty{color:#7f8baa;padding:18px 8px;text-align:center}.page-wrap{transition:padding-left .25s ease;padding-left:var(--leaderboard-width,300px)}.page-wrap.leaderboard-collapsed{padding-left:0}.player-chip,.timebox{background:#151c33;padding:14px 18px;border-radius:14px}.name-modal-card{text-align:center}.name-modal-icon{font-size:48px}.name-input{width:100%;padding:14px 16px;background:#0b1120;color:#fff;border:1px solid #34405e;border-radius:11px;font-size:17px;margin:10px 0}.name-error{min-height:22px;color:#ff8699;font-size:14px;margin-bottom:8px}.name-modal-card button{width:100%;padding:14px}.modal{z-index:100}.modal.hidden{display:none!important}
@media(max-width:1100px){.page-wrap{padding-left:0}.leaderboard-panel{width:min(var(--leaderboard-width,300px),88vw)}.leaderboard-panel.collapsed{transform:translateX(-100%)}}
@media(max-width:700px){.topbar{flex-direction:column;gap:12px}.topbar-actions{width:100%;display:grid;grid-template-columns:1fr 1fr}.restart-btn{grid-column:1/-1}.leaderboard-panel{width:min(88vw,320px)}.leaderboard-panel.collapsed{transform:translateX(-100%)}}

/* Custom confirmation modal */
.confirm-modal{backdrop-filter:blur(7px);animation:confirmFadeIn .16s ease-out}
.confirm-modal-card{position:relative;max-width:470px;padding:34px 32px 30px;border:1px solid rgba(135,112,255,.42);background:linear-gradient(180deg,#151d34 0%,#0f1629 100%);box-shadow:0 28px 90px rgba(0,0,0,.58),0 0 45px rgba(114,89,255,.12);animation:confirmPop .18s ease-out}
.confirm-modal-icon{width:68px;height:68px;margin:0 auto 16px;border-radius:22px;display:flex;align-items:center;justify-content:center;font-size:34px;background:linear-gradient(145deg,rgba(114,89,255,.24),rgba(239,68,68,.18));border:1px solid rgba(137,116,255,.34);box-shadow:inset 0 0 25px rgba(255,255,255,.025)}
.confirm-modal-card h2{margin:0 0 10px;font-size:27px}.confirm-modal-card p{margin:0 auto 25px;max-width:390px;color:#aeb9d6;line-height:1.55;font-size:15px}
.confirm-modal-actions{display:flex;gap:12px}.confirm-modal-actions button{flex:1;min-height:48px;border-radius:12px;border:1px solid transparent;font-weight:800;font-size:14px;cursor:pointer;transition:transform .12s ease,filter .12s ease,background .12s ease}
.confirm-modal-actions button:hover{transform:translateY(-1px);filter:brightness(1.07)}.confirm-modal-actions button:active{transform:translateY(0)}
.confirm-cancel-btn{background:#222c46;color:#d7def0;border-color:#34405e!important}.confirm-ok-btn{background:linear-gradient(135deg,#7259ff,#9f4fff);color:#fff}.confirm-ok-btn.danger{background:linear-gradient(135deg,#ef4444,#b91c1c);box-shadow:0 10px 28px rgba(239,68,68,.18)}
@keyframes confirmFadeIn{from{opacity:0}to{opacity:1}}@keyframes confirmPop{from{opacity:0;transform:scale(.94) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}
@media(max-width:520px){.confirm-modal-card{padding:28px 20px 22px}.confirm-modal-actions{flex-direction:column-reverse}.confirm-modal-actions button{width:100%}}

/* Extra celebration for a correct answer */
.result-panel.success-celebrate{position:relative;overflow:visible}
.result-panel.success-celebrate:before,.result-panel.success-celebrate:after{content:"✦";position:absolute;top:34px;font-size:26px;color:#ffd76a;opacity:0;pointer-events:none;animation:successSpark 1.15s ease-out .08s both}
.result-panel.success-celebrate:before{left:23%}
.result-panel.success-celebrate:after{right:23%;animation-delay:.18s}
.result-panel-icon.success-pop{color:#70e0ae;text-shadow:0 0 18px rgba(112,224,174,.55),0 0 42px rgba(112,224,174,.25);animation:successCheckPop 1.05s cubic-bezier(.2,.9,.2,1.18) both}
.result-panel.success-celebrate h2{animation:successTitlePop .65s ease-out .14s both}
@keyframes successCheckPop{0%{opacity:0;transform:scale(.15) rotate(-18deg)}45%{opacity:1;transform:scale(1.38) rotate(7deg)}67%{transform:scale(.88) rotate(-4deg)}82%{transform:scale(1.10) rotate(2deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes successTitlePop{0%{opacity:0;transform:translateY(12px) scale(.9)}70%{opacity:1;transform:translateY(-3px) scale(1.05)}100%{opacity:1;transform:none}}
@keyframes successSpark{0%{opacity:0;transform:translateY(8px) scale(.3) rotate(0)}35%{opacity:1;transform:translateY(-8px) scale(1.25) rotate(80deg)}100%{opacity:0;transform:translateY(-34px) scale(.7) rotate(180deg)}}
@media (prefers-reduced-motion:reduce){.result-panel-icon.success-pop,.result-panel.success-celebrate h2,.result-panel.success-celebrate:before,.result-panel.success-celebrate:after{animation:none}}

/* Persoonlijke sessiestatistieken */
.stats-bar{margin-top:18px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;background:#11182b;border:1px solid #27314d;border-radius:18px;padding:12px;box-shadow:0 16px 45px rgba(0,0,0,.18)}
.stat-item{min-width:0;background:#0d1427;border:1px solid #202b47;border-radius:13px;padding:11px 10px;text-align:center}
.stat-label{display:block;color:#8591b2;font-size:11px;text-transform:uppercase;letter-spacing:.035em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:5px}
.stat-item strong{display:block;color:#fff;font-size:17px;font-variant-numeric:tabular-nums}
@media(max-width:900px){.stats-bar{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.stats-bar{grid-template-columns:repeat(2,1fr);gap:8px}.stat-item{padding:10px 8px}.stat-label{font-size:10px}}

/* Extra bombarie voor een goed antwoord op 0,1 seconde */
.result-panel.quick-01-celebrate{position:relative;isolation:isolate;animation:quickPanelPulse 1.35s ease-out both}
.result-panel.quick-01-celebrate:before{content:"⚡ 0,1 SEC ⚡";position:absolute;left:50%;top:-8px;transform:translate(-50%,-100%);font-weight:900;font-size:15px;letter-spacing:.13em;color:#ffe06b;text-shadow:0 0 18px rgba(255,224,107,.65);white-space:nowrap;animation:quickBadgeDrop 1.1s cubic-bezier(.2,.9,.2,1.1) both}
.result-panel-icon.quick-01-pop{color:#8affcf;text-shadow:0 0 18px rgba(112,255,194,.9),0 0 55px rgba(114,89,255,.7),0 0 90px rgba(255,215,92,.35);animation:quickCheckExplosion 1.55s cubic-bezier(.16,.92,.22,1.15) both}
.result-panel.quick-01-celebrate h2{font-size:clamp(32px,6vw,52px);background:linear-gradient(90deg,#ffe36d,#79ffd0,#b687ff,#ffe36d);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:quickTitleBounce 1.25s ease-out both,quickTitleShimmer 2.4s linear infinite}
.result-panel.quick-01-celebrate:after{content:"✦   ⚡   ✦   ★   ✦   ⚡   ✦";position:absolute;z-index:-1;left:50%;top:80px;width:115%;transform:translateX(-50%);font-size:25px;letter-spacing:12px;color:#ffd95f;opacity:0;pointer-events:none;animation:quickConfetti 1.45s ease-out .08s both}
@keyframes quickCheckExplosion{0%{opacity:0;transform:scale(.05) rotate(-30deg)}32%{opacity:1;transform:scale(1.85) rotate(10deg)}52%{transform:scale(.72) rotate(-8deg)}68%{transform:scale(1.35) rotate(5deg)}82%{transform:scale(.92) rotate(-2deg)}100%{transform:scale(1) rotate(0)}}
@keyframes quickTitleBounce{0%{opacity:0;transform:scale(.55) translateY(18px)}55%{opacity:1;transform:scale(1.15) translateY(-7px)}75%{transform:scale(.95) translateY(2px)}100%{opacity:1;transform:none}}
@keyframes quickTitleShimmer{0%{background-position:0 0}100%{background-position:250% 0}}
@keyframes quickConfetti{0%{opacity:0;transform:translateX(-50%) scale(.4) rotate(-8deg)}30%{opacity:1;transform:translateX(-50%) scale(1.12) rotate(3deg)}100%{opacity:0;transform:translateX(-50%) translateY(-70px) scale(1.25) rotate(10deg)}}
@keyframes quickBadgeDrop{0%{opacity:0;transform:translate(-50%,-180%) scale(.7)}55%{opacity:1;transform:translate(-50%,-90%) scale(1.15)}100%{opacity:1;transform:translate(-50%,-100%) scale(1)}}
@keyframes quickPanelPulse{0%,100%{filter:none}38%{filter:drop-shadow(0 0 22px rgba(114,89,255,.25))}}
@media(prefers-reduced-motion:reduce){.result-panel.quick-01-celebrate,.result-panel.quick-01-celebrate:before,.result-panel.quick-01-celebrate:after,.result-panel-icon.quick-01-pop,.result-panel.quick-01-celebrate h2{animation:none}}

/* Beheerbaar thema - defaults worden vanuit index.php als CSS-variabelen gezet */
body{background:var(--theme-page-bg,#0b1020);color:var(--theme-text,#fff)}
.game-card,.history-card,.stats-bar{background:var(--theme-panel-bg,#11182b)}
.actions button,.modal button,.result-next-btn{background:var(--theme-primary,#7259ff)}
.actions .secondary,.confirm-cancel-btn{background:var(--theme-secondary,#27314a)}
.actions .danger,.confirm-ok-btn.danger{background:linear-gradient(135deg,var(--theme-danger,#ef4444),var(--theme-danger-end,#b91c1c));border-color:var(--theme-danger,#ef4444)}
.actions .danger:hover,.confirm-ok-btn.danger:hover{background:linear-gradient(135deg,var(--theme-danger,#ef4444),var(--theme-danger-end,#b91c1c));filter:brightness(1.08)}
.play-btn{background:linear-gradient(145deg,var(--theme-play-start,#6c5cff),var(--theme-play-end,#bd4cff))}
.page-wrap.no-leaderboard{padding-left:0!important}
body.leaderboard-disabled .leaderboard-panel{display:none!important}
.anonymous-choice{display:flex;align-items:flex-start;gap:9px;text-align:left;margin:4px 0 16px;padding:11px 13px;border:1px solid #34405e;border-radius:11px;background:#0b1120;color:var(--theme-text,#fff);cursor:pointer}
.anonymous-choice input{margin-top:3px;accent-color:var(--theme-primary,#7259ff)}
.anonymous-choice span{font-weight:700;line-height:1.35}.anonymous-choice small{display:block;color:#8f9ab8;font-weight:400;margin-top:2px}
.history-song strong,.result-panel-answer,.stat-item strong,.search-wrap input,.name-input{color:var(--theme-text,#fff)}


/* v32 admin-to-player popup */
.admin-message-modal{z-index:140;backdrop-filter:blur(8px)}
.admin-message-card{max-width:520px;position:relative;border:1px solid rgba(114,89,255,.48);background:linear-gradient(180deg,#171f38,#10172a);box-shadow:0 30px 100px rgba(0,0,0,.62),0 0 50px rgba(114,89,255,.16);animation:confirmPop .2s ease-out}
.admin-message-icon{width:82px;height:82px;margin:0 auto 18px;border-radius:25px;display:flex;align-items:center;justify-content:center;font-size:42px;background:linear-gradient(145deg,rgba(114,89,255,.25),rgba(189,76,255,.12));border:1px solid rgba(151,130,255,.38)}
.admin-message-card h2{margin:0 0 12px;font-size:29px}.admin-message-text{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.6;color:#d4dcf1!important;margin:0 0 22px!important}
.admin-message-close-btn{width:100%;min-height:48px}.admin-message-countdown,.admin-message-persistent-note{margin-top:12px;padding:10px 12px;border-radius:10px;background:#0b1120;color:#aeb9d6;font-size:13px}
.admin-message-persistent-note{border:1px solid #35415f}

.admin-message-icon.hidden{display:none}

/* v36 hints, feedback and reporting */
.hint-area{margin-top:14px;padding:12px;border:1px solid #2c3653;border-radius:12px;background:rgba(9,14,29,.5)}.hint-area.hidden{display:none}.hint-toggle{background:var(--theme-secondary);padding:9px 14px}.hint-cost{margin-left:10px;font-size:12px;color:#9aa8c6}.hint-choices{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.hint-choices.hidden{display:none}.hint-choice{background:#27314a;padding:8px 11px;font-size:13px}.hint-choice.used{opacity:.45}.hint-results{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px}.hint-result{display:flex;gap:7px;align-items:center;background:#171f35;border:1px solid #34405f;padding:8px 10px;border-radius:9px;font-size:13px}.hint-result strong{color:#a99cff}.song-feedback{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin:14px 0}.song-feedback>span{width:100%;font-size:13px;color:#aeb9d6}.feedback-btn{background:#27314a;padding:9px 12px}.feedback-btn.selected,.history-rate.selected{background:#7259ff;box-shadow:0 0 0 2px rgba(114,89,255,.25)}.feedback-btn.report{background:#3b3040}.history-feedback{display:flex;gap:4px}.history-feedback button{padding:5px 7px;min-width:34px;background:#202a42}.history-report{background:#352b38!important}.report-modal-card{max-width:500px}.report-modal-icon{font-size:38px;margin-bottom:8px}.report-modal-card select,.report-modal-card textarea{width:100%;box-sizing:border-box;margin-top:10px;padding:11px;border-radius:9px;border:1px solid #35415f;background:#0d1426;color:#fff;font:inherit}.report-modal-card textarea{resize:vertical}

/* v37 configurable feedback button colors */
.feedback-btn:not(.report),.history-rate{background:var(--theme-feedback-bg);color:var(--theme-feedback-text)}
.feedback-btn.report,.history-report{background:var(--theme-report-bg)!important;color:var(--theme-report-text)}
.feedback-btn.selected,.history-rate.selected{background:var(--theme-primary);color:var(--theme-text)}

/* v38 configurable hint button colors */
.hint-toggle,.hint-choice{background:var(--theme-hint-bg);color:var(--theme-hint-text)}
.hint-choice.used{background:var(--theme-hint-bg);color:var(--theme-hint-text);opacity:.45}

/* v41 - subtielere hints in het speelveld */
.hint-area{
    margin-top:10px;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    text-align:left;
}
.hint-toggle{
    padding:5px 9px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:7px;
    background:rgba(255,255,255,.045);
    color:rgba(255,255,255,.62);
    font-size:12px;
    font-weight:500;
    box-shadow:none;
    opacity:.82;
}
.hint-toggle:hover{
    background:rgba(255,255,255,.075);
    color:rgba(255,255,255,.82);
    opacity:1;
}
.hint-cost{
    margin-left:7px;
    font-size:11px;
    color:rgba(255,255,255,.38);
}
.hint-choices{
    margin-top:7px;
    gap:5px;
}
.hint-choice{
    padding:5px 8px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:7px;
    background:rgba(255,255,255,.045);
    color:rgba(255,255,255,.68);
    font-size:11px;
    font-weight:500;
    box-shadow:none;
}
.hint-choice:hover{
    background:rgba(255,255,255,.075);
    color:rgba(255,255,255,.88);
}
.hint-results{
    margin-top:7px;
    gap:5px;
}
.hint-result{
    display:inline-flex;
    width:auto;
    padding:5px 8px;
    gap:6px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:7px;
    background:rgba(255,255,255,.035);
    color:rgba(255,255,255,.70);
    font-size:11px;
}
.hint-result strong{
    color:rgba(255,255,255,.48);
    font-weight:500;
}

/* v42 leaderboard played count */
.leader-meta{display:block;white-space:normal;line-height:1.35}

/* v54 achievements */
.leader-badges{font-size:12px;letter-spacing:1px;white-space:nowrap}
.achievement-modal{z-index:170;background:rgba(5,8,20,.82);backdrop-filter:blur(8px)}
.achievement-card{max-width:470px;overflow:hidden;border:1px solid rgba(255,215,85,.45);background:linear-gradient(180deg,#1d2037,#11162a);box-shadow:0 30px 100px rgba(0,0,0,.65),0 0 70px rgba(255,198,55,.18);animation:achievementPop .42s cubic-bezier(.2,1.4,.4,1)}
.achievement-burst{font-size:30px}.achievement-icon{font-size:74px;margin:4px 0 8px;animation:achievementBounce 1.2s ease-in-out infinite}.achievement-kicker{font-size:12px;letter-spacing:2px;font-weight:900;color:#ffd76b}.achievement-card h2{font-size:30px;margin:8px 0 18px}.achievement-queue-text{font-size:12px;color:#9aa7c7;margin-bottom:10px}.achievement-card button{width:100%}
@keyframes achievementPop{0%{opacity:0;transform:scale(.65)}70%{transform:scale(1.06)}100%{opacity:1;transform:scale(1)}}@keyframes achievementBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px) scale(1.08)}}

/* v55 compactere persoonlijke statsbalk */
.stats-bar{
    display:grid;
    grid-template-columns:repeat(7,minmax(0,1fr));
    gap:7px;
    padding:10px;
}
.stat-item{
    min-width:0;
    padding:9px 6px;
    border-radius:10px;
}
.stat-label{
    display:block;
    font-size:10px;
    line-height:1.2;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    margin-bottom:3px;
}
.stat-item strong{
    font-size:17px;
    line-height:1.1;
}
@media(max-width:1050px){
    .stats-bar{
        grid-template-columns:repeat(4,minmax(0,1fr));
    }
}
@media(max-width:650px){
    .stats-bar{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

/* v56 lightweight achievement toast */
.achievement-toast{
  position:fixed;
  top:28px;
  left:50%;
  z-index:180;
  display:flex;
  align-items:center;
  gap:12px;
  min-width:280px;
  max-width:min(520px,calc(100vw - 30px));
  padding:12px 16px;
  border-radius:14px;
  background:rgba(17,24,43,.94);
  border:1px solid rgba(255,215,85,.32);
  box-shadow:0 14px 40px rgba(0,0,0,.34),0 0 24px rgba(255,198,55,.10);
  backdrop-filter:blur(7px);
  pointer-events:none;
}
.achievement-toast.hidden{display:none}
.achievement-toast.show{display:flex;animation:achievementToastIn .46s cubic-bezier(.16,1.2,.3,1) forwards}
.achievement-toast.hide{display:flex;animation:achievementToastOut .42s ease-in forwards}
.achievement-toast-icon{
  flex:0 0 auto;
  width:42px;
  height:42px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:26px;
  background:rgba(255,215,85,.10);
  border:1px solid rgba(255,215,85,.18);
}
.achievement-toast-copy{min-width:0;display:flex;flex-direction:column;gap:2px}
.achievement-toast-kicker{
  font-size:10px;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:1.4px;
  font-weight:800;
  color:#ffd76b;
}
.achievement-toast-copy strong{
  font-size:15px;
  line-height:1.3;
  color:#fff;
  overflow-wrap:anywhere;
}
@keyframes achievementToastIn{
  0%{opacity:0;transform:translate(-50%,-70px) scale(.92)}
  65%{opacity:1;transform:translate(-50%,5px) scale(1.02)}
  100%{opacity:1;transform:translate(-50%,0) scale(1)}
}
@keyframes achievementToastOut{
  0%{opacity:1;transform:translate(-50%,0) scale(1)}
  100%{opacity:0;transform:translate(-50%,-55px) scale(.96)}
}
@media(max-width:650px){
  .achievement-toast{top:16px;min-width:0;width:calc(100vw - 24px);box-sizing:border-box}
}
@media(prefers-reduced-motion:reduce){
  .achievement-toast.show,.achievement-toast.hide{animation-duration:.01ms}
}

/* v57 admin toast */
.admin-toast{
  position:fixed;
  top:28px;
  left:50%;
  z-index:185;
  display:flex;
  align-items:center;
  gap:10px;
  max-width:min(520px,calc(100vw - 30px));
  padding:11px 15px;
  border-radius:13px;
  background:rgba(17,24,43,.95);
  border:1px solid rgba(114,89,255,.34);
  box-shadow:0 14px 40px rgba(0,0,0,.32),0 0 24px rgba(114,89,255,.10);
  backdrop-filter:blur(7px);
  pointer-events:none;
}
.admin-toast.hidden{display:none}
.admin-toast.show{display:flex;animation:adminToastIn .42s cubic-bezier(.16,1.2,.3,1) forwards}
.admin-toast.hide{display:flex;animation:adminToastOut .38s ease-in forwards}
.admin-toast-icon{font-size:24px;line-height:1;flex:0 0 auto}
.admin-toast-icon.hidden,.admin-toast-text.hidden{display:none}
.admin-toast-text{font-size:14px;font-weight:700;line-height:1.35;color:#fff;overflow-wrap:anywhere}
@keyframes adminToastIn{0%{opacity:0;transform:translate(-50%,-65px) scale(.94)}70%{opacity:1;transform:translate(-50%,4px) scale(1.02)}100%{opacity:1;transform:translate(-50%,0) scale(1)}}
@keyframes adminToastOut{0%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-50px) scale(.97)}}
@media(max-width:650px){.admin-toast{top:16px;width:calc(100vw - 24px);box-sizing:border-box}}

/* v58 toast coordination */
.achievement-toast,.admin-toast{top:24px}

/* v62 badge tooltips */
.leader-badges{display:inline-flex;align-items:center;gap:3px;margin-left:3px}.leader-badge{display:inline-block;cursor:help;line-height:1;transform:translateY(1px)}

/* v63 compact badge overflow */
.leader-name{min-width:0}
.leader-badges{display:inline-flex;align-items:center;gap:3px;margin-left:3px;vertical-align:middle;white-space:nowrap}
.leader-badge-more{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;height:18px;padding:0 5px;border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  color:#aeb9d6;font-size:10px;font-weight:800;line-height:1;
  cursor:help;box-sizing:border-box;
}

/* v64 badge priority + popover */
.leader-badge-overflow{position:relative;display:inline-flex;align-items:center}
.leader-badge-overflow:hover .leader-badge-popover,
.leader-badge-overflow:focus-within .leader-badge-popover{display:flex}
.leader-badge-popover{
  display:none;
  position:absolute;
  left:50%;
  top:calc(100% + 8px);
  transform:translateX(-50%);
  z-index:80;
  min-width:170px;
  max-width:250px;
  flex-direction:column;
  gap:4px;
  padding:8px;
  border-radius:10px;
  background:#11182b;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 14px 34px rgba(0,0,0,.42);
}
.leader-badge-popover:before{
  content:"";
  position:absolute;
  top:-5px;left:50%;
  width:9px;height:9px;
  background:#11182b;
  border-left:1px solid rgba(255,255,255,.14);
  border-top:1px solid rgba(255,255,255,.14);
  transform:translateX(-50%) rotate(45deg);
}
.leader-badge-popover-item{
  display:flex;
  align-items:center;
  gap:8px;
  padding:5px 6px;
  border-radius:7px;
  font-size:11px;
  color:#d8deee;
  white-space:nowrap;
}
.leader-badge-popover-item:hover{background:rgba(255,255,255,.05)}
.leader-badge-popover-icon{font-size:16px;line-height:1}

/* v65 clickable badge popovers */
.leader-badge-more{cursor:pointer}
.leader-badge-overflow.open .leader-badge-popover{display:flex}

/* v66 body-level badge popover */
.floating-badge-popover{
  position:fixed;
  z-index:9999;
  min-width:170px;
  max-width:260px;
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:8px;
  border-radius:10px;
  background:#11182b;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 16px 38px rgba(0,0,0,.52);
  color:#d8deee;
}
.floating-badge-popover .leader-badge-popover-item{
  display:flex;
  align-items:center;
  gap:8px;
  padding:5px 6px;
  border-radius:7px;
  font-size:11px;
  white-space:nowrap;
}
.floating-badge-popover .leader-badge-popover-icon{font-size:16px;line-height:1}

/* v74 clearer percentage hint */
.hint-result-mask .hint-result-value{
  display:block;
  margin-top:7px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:18px;
  line-height:1.7;
  letter-spacing:0;
  white-space:normal;
  overflow-wrap:anywhere;
}
.hint-mask-char,.hint-mask-underscore{
  display:inline-block;
  min-width:.82em;
  text-align:center;
  margin-right:.08em;
}
.hint-mask-underscore{
  font-weight:800;
  transform:translateY(-1px);
}
.hint-mask-space{
  display:inline-block;
  width:1.25em;
}
.result-song-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin:12px 0}.result-song-stats>div{padding:9px 6px;border-radius:10px;background:rgba(255,255,255,.07);text-align:center}.result-song-stats strong{display:block;font-size:16px}.result-song-stats span{display:block;font-size:9px;opacity:.7;margin-top:3px}.leader-row.podium-1{box-shadow:inset 3px 0 0 #d6aa24}.leader-row.podium-2{box-shadow:inset 3px 0 0 #aab0bb}.leader-row.podium-3{box-shadow:inset 3px 0 0 #b97845}.leader-row.podium .leader-rank{font-size:18px}@media(max-width:700px){.result-song-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.result-special-labels{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;margin:9px 0}.special-label{font-size:11px;font-weight:900;padding:6px 9px;border-radius:999px;background:rgba(255,255,255,.09)}.special-label.favorite{background:rgba(255,80,120,.12)}.special-label.no-hint{background:rgba(100,210,170,.12)}

/* v79 rank toast is fully separate from admin messages */
.rank-change-toast{
 position:fixed;right:22px;top:22px;z-index:8990;
 display:flex;align-items:center;gap:9px;
 padding:11px 14px;border-radius:12px;
 background:#151c31;color:#eef2ff;
 border:1px solid rgba(255,255,255,.12);
 box-shadow:0 14px 34px rgba(0,0,0,.35);
 opacity:0;transform:translateY(-10px);pointer-events:none;
 transition:opacity .25s ease,transform .25s ease;
 font-size:12px;font-weight:700
}
.rank-change-toast.show{opacity:1;transform:translateY(0)}
.rank-change-toast.hide{opacity:0;transform:translateY(-10px)}
.rank-change-toast-icon{font-size:18px}

/* v80 random result fact */
.result-fact-card{
  margin:12px 0;
  padding:12px 14px;
  border-radius:12px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.09);
  text-align:left;
}
.result-fact-card strong{
  display:block;
  font-size:13px;
  margin-bottom:3px;
}
.result-fact-card span{
  display:block;
  font-size:11px;
  opacity:.78;
  line-height:1.45;
}

/* v81 cleaner result screen */
.result-panel{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.result-hero{
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  gap:14px;
  align-items:center;
}
.result-hero-copy h2{
  margin:0 0 4px;
}
.result-hero-copy .result-panel-answer{
  margin:0 0 3px;
}
.result-hero-copy .result-panel-points{
  margin:0;
}
.result-fact-card{
  margin:0;
  padding:12px 14px;
}
.result-special-labels{
  margin:0;
  justify-content:flex-start;
}
.result-song-stats{
  margin:0;
  gap:6px;
}
.result-song-stats>div{
  min-height:58px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.result-listen-card{
  padding:12px 14px;
  border-radius:12px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
}
.result-listen-card .result-panel-listen{
  margin:0 0 4px;
}
.result-listen-card .result-audio-status{
  margin:0 0 10px;
}
.result-volume-control{
  margin:0;
}
.result-actions-card{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  align-items:end;
}
.result-actions-card .song-feedback{
  margin:0;
}
.song-feedback-buttons{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin-top:6px;
}
.result-actions-card .result-next-btn{
  min-width:170px;
  margin:0;
}
@media(max-width:760px){
  .result-hero{grid-template-columns:48px minmax(0,1fr)}
  .result-actions-card{grid-template-columns:1fr}
  .result-actions-card .result-next-btn{width:100%;min-width:0}
  .result-song-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* v82: rank notifications are isolated from admin toasts */
.rank-change-toast{
 position:fixed;right:22px;top:22px;z-index:8990;
 display:flex;align-items:center;gap:9px;
 padding:11px 14px;border-radius:12px;
 background:#151c31;color:#eef2ff;
 border:1px solid rgba(255,255,255,.12);
 box-shadow:0 14px 34px rgba(0,0,0,.35);
 opacity:0;transform:translateY(-10px);pointer-events:none;
 transition:opacity .25s ease,transform .25s ease;
 font-size:12px;font-weight:700
}
.rank-change-toast.show{opacity:1;transform:translateY(0)}
.rank-change-toast.hide{opacity:0;transform:translateY(-10px)}
.rank-change-toast-icon{font-size:18px}

/* v84 random bonus challenge */
.challenge-banner{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:11px;align-items:center;margin:0 0 12px;padding:11px 13px;border-radius:13px;background:linear-gradient(135deg,rgba(255,194,62,.17),rgba(124,92,255,.15));border:1px solid rgba(255,205,89,.32);box-shadow:0 8px 28px rgba(0,0,0,.14)}
.challenge-icon{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:22px;background:rgba(255,255,255,.09)}
.challenge-copy{min-width:0}.challenge-copy strong{display:block;font-size:12px;letter-spacing:.055em}.challenge-copy span{display:block;margin-top:2px;font-size:10px;opacity:.75;line-height:1.35}
.challenge-reward{text-align:right}.challenge-reward small{display:block;font-size:8px;font-weight:900;letter-spacing:.12em;opacity:.58}.challenge-reward strong{display:block;margin-top:2px;font-size:13px;white-space:nowrap}
.challenge-pop{animation:challengePop .6s ease both}@keyframes challengePop{0%{opacity:0;transform:scale(.94) translateY(-6px)}60%{transform:scale(1.025)}100%{opacity:1;transform:none}}
@media(max-width:620px){.challenge-banner{grid-template-columns:38px 1fr}.challenge-reward{grid-column:2;text-align:left;margin-top:-4px}.challenge-icon{width:36px;height:36px}}

/* v85 unmistakable bonus-number notification */
.challenge-banner{
  position:relative;
  overflow:hidden;
}
.challenge-banner:before{
  content:"BONUSNUMMER";
  position:absolute;
  right:-24px;
  top:9px;
  transform:rotate(35deg);
  padding:3px 30px;
  font-size:7px;
  font-weight:1000;
  letter-spacing:.13em;
  background:rgba(255,206,70,.22);
  color:#ffeaa0;
}
.challenge-start-toast{
  position:fixed;
  left:50%;
  top:92px;
  z-index:9200;
  transform:translate(-50%,-18px) scale(.96);
  opacity:0;
  display:grid;
  grid-template-columns:48px minmax(0,1fr);
  gap:12px;
  align-items:center;
  min-width:300px;
  max-width:min(92vw,520px);
  padding:14px 16px;
  border-radius:15px;
  background:linear-gradient(135deg,#29213f,#171d32);
  color:#fff;
  border:1px solid rgba(255,207,78,.42);
  box-shadow:0 18px 50px rgba(0,0,0,.42),0 0 34px rgba(255,190,60,.10);
  pointer-events:none;
  transition:opacity .3s ease,transform .3s ease;
}
.challenge-start-toast.show{
  opacity:1;
  transform:translate(-50%,0) scale(1);
}
.challenge-start-toast.hide{
  opacity:0;
  transform:translate(-50%,-12px) scale(.98);
}
.challenge-start-toast-icon{
  width:46px;
  height:46px;
  border-radius:13px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:25px;
  background:rgba(255,255,255,.08);
}
.challenge-start-toast-copy small{
  display:block;
  margin-bottom:2px;
  font-size:8px;
  font-weight:1000;
  letter-spacing:.16em;
  color:#ffd96a;
}
.challenge-start-toast-copy strong{
  display:block;
  font-size:15px;
}
.challenge-start-toast-copy span{
  display:block;
  margin-top:3px;
  font-size:10px;
  opacity:.72;
}
@media(max-width:560px){
  .challenge-start-toast{
    top:72px;
    min-width:0;
    width:calc(100vw - 28px);
  }
}


/* v91: two real progress layers, step fill stays visible at all times */
.progress{
  position:relative;
  overflow:hidden;
  height:10px;
  border-radius:999px;
}

/* Onderste laag: normale stapvoortgang. Deze verandert NIET tijdens afspelen. */
.progress-step-fill{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:0%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--progress-step-start,#6d61e8) 0%,var(--progress-step-mid,#8a5ee9) 55%,var(--progress-step-end,#b84fe4) 100%);
  z-index:1;
}

/* Bovenste laag: alleen zichtbaar tijdens daadwerkelijk afspelen. */
.progress-playback-overlay{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:0%;
  opacity:0;
  border-radius:inherit;
  background:linear-gradient(90deg,
    var(--progress-play-start,#43dbb2) 0%,
    var(--progress-play-mid,#36d1dc) 45%,
    var(--progress-play-end,#5a9bff) 100%);
  box-shadow:0 0 12px rgba(54,209,220,.22);
  z-index:2;
  pointer-events:none;
  transition:width .035s linear,opacity .15s ease;
}

/* PLAY-knop: alleen actief tijdens echt afspelen */
.play-btn.is-playing{
  position:relative;
  overflow:hidden;
  transform:translateY(-1px) scale(1.01);
  box-shadow:
    0 10px 28px rgba(124,92,255,.26),
    0 0 25px rgba(190,76,255,.20);
  animation:playPulse 1.1s ease-in-out infinite;
}
.play-btn.is-playing::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:34%;
  left:-42%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);
  transform:skewX(-18deg);
  animation:playSweep 1.35s linear infinite;
  pointer-events:none;
}
@keyframes playPulse{
  0%,100%{filter:brightness(1);transform:translateY(-1px) scale(1.01)}
  50%{filter:brightness(1.12);transform:translateY(-1px) scale(1.018)}
}
@keyframes playSweep{
  0%{left:-42%}
  100%{left:118%}
}

/* v93 replay counter + artist streak */
.play-button-row{
  display:flex;
  align-items:center;
  gap:8px;
}
.play-button-row .play-btn{
  flex:1;
}
.replay-counter{
  flex:0 0 auto;
  min-width:34px;
  padding:5px 7px;
  border-radius:999px;
  font-size:9px;
  font-weight:800;
  text-align:center;
  opacity:.48;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  transition:opacity .2s ease,transform .2s ease,background .2s ease;
}
.replay-counter.has-replays{
  opacity:.9;
  background:rgba(255,255,255,.10);
  transform:scale(1.04);
}
.special-label.artist-streak{
  background:rgba(161,103,255,.14);
}


/* v95: replay counter beside PLAY without changing the original PLAY button size */
.play-button-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.play-button-row .play-btn{
  flex:0 0 auto;
  aspect-ratio:1 / 1;
}
.replay-counter{
  flex:0 0 auto;
}

/* v96 modern, subtle leaderboard scrollbar */
.leaderboard-panel,
.leaderboard-list{
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.16) transparent;
}

.leaderboard-panel::-webkit-scrollbar,
.leaderboard-list::-webkit-scrollbar{
  width:7px;
}

.leaderboard-panel::-webkit-scrollbar-track,
.leaderboard-list::-webkit-scrollbar-track{
  background:transparent;
}

.leaderboard-panel::-webkit-scrollbar-thumb,
.leaderboard-list::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.12);
  border-radius:999px;
  border:2px solid transparent;
  background-clip:padding-box;
}

.leaderboard-panel:hover::-webkit-scrollbar-thumb,
.leaderboard-list:hover::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.24);
  background-clip:padding-box;
}

.leaderboard-panel::-webkit-scrollbar-thumb:hover,
.leaderboard-list::-webkit-scrollbar-thumb:hover{
  background:rgba(255,255,255,.34);
  background-clip:padding-box;
}

/* v100 leaderboard names + song suggestion */
.leader-name{min-width:0;display:flex;align-items:center;gap:4px;overflow:visible}.leader-name-text{display:inline-block;min-width:0;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.leader-name-text.truncated{cursor:help;text-decoration:underline dotted rgba(255,255,255,.28);text-underline-offset:3px}.leader-name-popover{position:fixed;z-index:9500;max-width:min(360px,calc(100vw - 16px));padding:9px 11px;border-radius:10px;background:#20283d;color:#fff;border:1px solid rgba(255,255,255,.13);box-shadow:0 14px 36px rgba(0,0,0,.38);font-size:12px;font-weight:800;overflow-wrap:anywhere}.song-suggest-open{position:fixed;right:16px;bottom:14px;z-index:70;padding:7px 10px;border-radius:999px;background:var(--theme-suggest-bg,#20283d);color:var(--theme-suggest-text,#aeb9d6);border:1px solid rgba(255,255,255,.09);font-size:10px;font-weight:700;opacity:.68;box-shadow:0 7px 22px rgba(0,0,0,.18);transition:.16s ease}.song-suggest-open:hover{opacity:1;transform:translateY(-1px);filter:brightness(1.08)}.suggest-modal{backdrop-filter:blur(7px)}.suggest-modal-card{max-width:470px;text-align:center}.suggest-modal-icon{font-size:40px;margin-bottom:7px}.suggest-modal-card>input,.suggest-modal-card>textarea{display:block;width:100%;box-sizing:border-box;margin:8px 0;padding:11px 12px;border-radius:10px;border:1px solid #34405e;background:#0b1120;color:#fff;font:inherit}.suggest-modal-card>textarea{resize:vertical}.suggest-success{margin:8px 0;color:#70e0ae;font-size:12px;font-weight:700}@media(max-width:700px){.song-suggest-open{right:10px;bottom:10px}.leader-name-text{max-width:125px}}

/* v103 one consistent custom popover for leaderboard names and badges */
.leaderboard-hover-target{
  cursor:help;
}
.leader-name-text.truncated{
  text-decoration:underline dotted rgba(255,255,255,.28);
  text-underline-offset:3px;
}
.leader-unified-popover{
  position:fixed;
  z-index:9600;
  max-width:min(360px,calc(100vw - 16px));
  padding:9px 11px;
  border-radius:10px;
  background:#20283d;
  color:#fff;
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 14px 36px rgba(0,0,0,.38);
  font-size:12px;
  font-weight:800;
  line-height:1.35;
  overflow-wrap:anywhere;
  pointer-events:none;
}
.leader-unified-popover-row + .leader-unified-popover-row{
  margin-top:5px;
}
.leader-badge-more{
  cursor:help;
}
.leader-badge-popover,
.leader-name-popover{
  display:none!important;
}

/* v104 subtle public leaderboard activity toasts */
.leaderboard-activity-toast{
  position:fixed;
  left:calc(var(--leaderboard-width,300px) + 14px);
  bottom:16px;
  z-index:7200;
  display:flex;
  align-items:center;
  gap:7px;
  max-width:min(330px,calc(100vw - var(--leaderboard-width,300px) - 32px));
  padding:7px 10px;
  border-radius:10px;
  background:rgba(24,31,49,.90);
  color:rgba(255,255,255,.88);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 8px 24px rgba(0,0,0,.20);
  backdrop-filter:blur(9px);
  font-size:10px;
  font-weight:650;
  line-height:1.25;
  opacity:0;
  transform:translateY(7px);
  pointer-events:none;
  transition:opacity .22s ease,transform .22s ease;
}
.leaderboard-activity-toast.show{opacity:.88;transform:translateY(0)}
.leaderboard-activity-toast.hide{opacity:0;transform:translateY(5px)}
.leaderboard-activity-toast-icon{font-size:12px;opacity:.9}
@media(max-width:1100px){
  .leaderboard-activity-toast{
    left:12px;
    bottom:12px;
    max-width:calc(100vw - 24px);
  }
}

/* v110 compact music filters in start/name modal */
.name-modal-card{max-width:430px}
.start-filter-picker{margin:10px 0 8px;padding:9px 10px;border:1px solid rgba(255,255,255,.08);border-radius:11px;background:rgba(255,255,255,.035);text-align:left}
.start-filter-heading{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:7px}
.start-filter-heading strong{font-size:10px;color:#eef2ff}.start-filter-heading small{font-size:8px;color:#818ca8}
.start-filter-section+.start-filter-section{margin-top:7px}
.start-filter-section>span{display:block;margin-bottom:4px;font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:#7e89a5}
.start-filter-pills{display:flex;flex-wrap:wrap;gap:4px}
.start-filter-pills label{cursor:pointer}
.start-filter-pills input{position:absolute;opacity:0;pointer-events:none}
.start-filter-pills em{display:block;padding:5px 7px;border:1px solid rgba(255,255,255,.09);border-radius:999px;background:rgba(255,255,255,.045);color:#aeb7ce;font-size:9px;font-style:normal;font-weight:700;transition:.14s ease}
.start-filter-pills input:checked+em{background:rgba(117,101,232,.22);border-color:rgba(145,130,255,.55);color:#fff}
.start-filter-pills label:hover em{border-color:rgba(255,255,255,.18);color:#e9edfa}
.start-filter-pills .is-sub em{font-size:8px;opacity:.9}

/* v112 optional start filters + Alles */
.start-filter-optional-help{
  margin:-2px 0 7px;
  font-size:8px;
  color:#7f89a2;
}
.start-filter-pills{
  align-items:center;
}
.start-filter-options{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
}
.start-filter-options.hidden-by-all{
  display:none;
}
.start-filter-all em{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.14);
}
.start-filter-all input:checked+em{
  background:rgba(117,101,232,.28);
  border-color:rgba(145,130,255,.68);
  color:#fff;
}

/* v119 replay counter inside the round play button */
.play-button-row .play-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
}
.play-btn .play-btn-text{
  display:block;
  line-height:1;
}
.play-btn .replay-counter{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  min-width:0;
  padding:2px 6px;
  margin:0;
  border-radius:999px;
  font-size:8px;
  line-height:1.2;
  font-weight:800;
  text-align:center;
  opacity:.55;
  background:rgba(0,0,0,.12);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:none;
  transform:none;
  pointer-events:none;
}
.play-btn .replay-counter.has-replays{
  opacity:.95;
  background:rgba(0,0,0,.18);
  transform:none;
}

/* v121 move replay counter slightly lower inside play button */
.play-btn .replay-counter{
  position:relative;
  top:5px;
}

/* v122 center the result-screen volume control */
.result-listen-card .result-volume-control{
  display:flex;
  margin-left:auto;
  margin-right:auto;
  width:min(100%,420px);
  max-width:420px;
  box-sizing:border-box;
}

/* v126 public chat / shoutbox + compact suggestion icon */
.song-suggest-open.song-suggest-icon{right:16px;bottom:66px;width:42px;height:42px;padding:0;border-radius:50%;font-size:19px;display:flex;align-items:center;justify-content:center;opacity:.88}
.site-chat{position:fixed;right:16px;bottom:14px;z-index:85;color:var(--chat-text,#fff);font-size:12px}
.chat-toggle{height:42px;min-width:96px;border-radius:999px;padding:0 14px;background:var(--chat-header,#20283d);color:var(--chat-text,#fff);border:1px solid rgba(255,255,255,.11);box-shadow:0 10px 28px rgba(0,0,0,.28);display:flex;align-items:center;justify-content:center;gap:7px;font-weight:800}
.site-chat.open .chat-toggle{display:none}.chat-panel{display:none;width:min(360px,calc(100vw - 24px));height:min(480px,calc(100vh - 110px));background:var(--chat-bg,#11182b);border:1px solid rgba(255,255,255,.10);border-radius:16px;overflow:hidden;box-shadow:0 20px 55px rgba(0,0,0,.45)}.site-chat.open .chat-panel{display:flex;flex-direction:column}
.chat-head{height:48px;flex:0 0 48px;padding:0 12px 0 15px;background:var(--chat-header,#20283d);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.08)}.chat-head strong{font-size:13px}.chat-head button{width:31px;height:31px;padding:0;border-radius:50%;background:rgba(255,255,255,.07);color:var(--chat-text,#fff);font-size:22px;line-height:1}
.chat-messages{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:9px;scrollbar-width:thin}.chat-message{padding:9px 10px;border-radius:11px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.055)}.chat-message.is-admin{border-color:color-mix(in srgb,var(--chat-admin,#70e0ae) 42%,transparent);background:color-mix(in srgb,var(--chat-admin,#70e0ae) 10%,transparent)}
.chat-message-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px}.chat-message-meta strong{font-size:11px;color:#dce3f7}.chat-message.is-admin .chat-message-meta strong{color:var(--chat-admin,#70e0ae)}.chat-message-meta span{font-size:8px;color:#77839f;white-space:nowrap}.chat-message-text{font-size:11px;line-height:1.4;color:var(--chat-text,#fff);overflow-wrap:anywhere}.chat-empty{margin:auto;color:#7f8aa5;text-align:center;padding:30px 12px}.chat-notice{padding:8px 11px;background:rgba(255,190,70,.09);border-top:1px solid rgba(255,255,255,.07);color:#c8d0e4;font-size:10px;line-height:1.35}.chat-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;padding:10px;border-top:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.08)}.chat-form.hidden{display:none}.chat-form input{min-width:0;margin:0;padding:10px 11px;border-radius:9px;border:1px solid rgba(255,255,255,.10);background:#0b1120;color:#fff}.chat-form button{margin:0;padding:0 12px;border-radius:9px;background:var(--chat-accent,#7259ff);color:#fff;font-size:10px;font-weight:800}
@media(max-width:700px){.site-chat{right:10px;bottom:10px}.song-suggest-open.song-suggest-icon{right:10px;bottom:60px}.chat-panel{width:calc(100vw - 20px);height:min(440px,calc(100vh - 90px))}}

/* v127 realtime chat state + unread badge */
.site-chat.chat-disabled{display:none!important}
.chat-toggle{position:relative}
.chat-unread-badge{position:absolute;right:-5px;top:-7px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:#ef405c;color:#fff;border:2px solid var(--chat-bg,#11182b);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:900;line-height:1;box-sizing:border-box;box-shadow:0 3px 10px rgba(239,64,92,.35)}
.chat-unread-badge.hidden{display:none}
@keyframes chatNewShake{0%,100%{transform:translateX(0) rotate(0)}15%{transform:translateX(-3px) rotate(-3deg)}30%{transform:translateX(3px) rotate(3deg)}45%{transform:translateX(-2px) rotate(-2deg)}60%{transform:translateX(2px) rotate(2deg)}75%{transform:translateX(-1px) rotate(-1deg)}}
.chat-toggle.chat-new-shake{animation:chatNewShake .6s ease}

/* v135 configurable chat toggle icon/text */
.chat-toggle.icon-only{
  width:52px;
  min-width:52px;
  height:52px;
  padding:0;
  gap:0;
  justify-content:center;
}
.chat-toggle.icon-only .chat-toggle-text{
  display:none;
}
.chat-toggle-icon:empty{
  display:none;
}
.chat-toggle.icon-only .chat-toggle-icon:empty + .chat-toggle-text{
  display:none;
}

/* v136 align icon-only chat button with song suggestion button */
.site-chat{
  right:16px;
  bottom:14px;
}
.chat-toggle.icon-only{
  width:42px;
  min-width:42px;
  height:42px;
  padding:0;
  border-radius:50%;
  gap:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.chat-toggle.icon-only .chat-toggle-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  line-height:1;
  font-size:19px;
}
@media(max-width:700px){
  .site-chat{
    right:10px;
    bottom:10px;
  }
  .song-suggest-open.song-suggest-icon{
    right:10px;
    bottom:62px;
  }
}

/* v138 SEO content */
.seo-intro{
  max-width:900px;
  margin:18px auto;
  padding:16px 20px;
  box-sizing:border-box;
  text-align:center;
  color:var(--theme-text,#fff);
  opacity:.9;
}
.seo-intro h1{
  margin:0 0 7px;
  font-size:clamp(18px,2.1vw,25px);
  line-height:1.2;
}
.seo-intro p{
  margin:0;
  font-size:12px;
  line-height:1.65;
  opacity:.72;
}
.seo-intro-above{margin-top:0}
.seo-intro-below{margin-bottom:8px}

/* v139 SEO intro at the absolute bottom of normal page content */
.seo-intro-bottom{
  margin-top:28px;
  margin-bottom:18px;
}

/* v140 bottom SEO intro lives inside the game card */
.game-card .seo-intro-bottom{
  width:100%;
  max-width:900px;
  margin:28px auto 0;
  padding:18px 12px 2px;
  border-top:1px solid rgba(255,255,255,.08);
}

/* v141 SEO bottom position: separate row after 'Geraden nummers', inside app-shell margins */
.seo-intro-bottom-row{
  width:100%;
  max-width:none;
  box-sizing:border-box;
  margin:16px 0 0;
  padding:18px 20px;
  text-align:center;
  color:var(--theme-text,#fff);
}
.seo-intro-bottom-row h1{
  margin:0 0 7px;
  font-size:clamp(18px,2.1vw,25px);
  line-height:1.2;
}
.seo-intro-bottom-row p{
  margin:0;
  font-size:12px;
  line-height:1.65;
  opacity:.72;
}

/* v144 subtle Twitch promo shown after configurable number of completed songs */
.twitch-promo-row{
  width:100%;
  box-sizing:border-box;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  margin:12px 0 4px;
}
.twitch-promo-row.hidden{display:none!important}
.twitch-promo-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
  padding:7px 12px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  background:rgba(255,255,255,.035);
  color:var(--theme-text,#fff);
  text-decoration:none;
  font-size:12px;
  font-weight:600;
  line-height:1;
  opacity:.72;
  transition:opacity .16s ease,background .16s ease,border-color .16s ease,transform .16s ease;
}
.twitch-promo-button:hover{
  opacity:1;
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.18);
  transform:translateY(-1px);
}
@media(max-width:700px){
  .twitch-promo-row{justify-content:center}
}

/* v146 Twitch promo: understated footer-style link below the guessed-songs card */
.twitch-promo-row{
  width:100%;
  box-sizing:border-box;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  margin:7px 0 0;
  padding:0 5px;
}
.twitch-promo-row.hidden{display:none!important}
.twitch-promo-button{
  min-height:0;
  padding:3px 5px;
  border:0;
  border-radius:4px;
  background:transparent;
  color:var(--theme-text,#fff);
  text-decoration:none;
  font-size:10px;
  font-weight:500;
  line-height:1.25;
  opacity:.38;
  transition:opacity .15s ease,background .15s ease;
}
.twitch-promo-button:hover{
  opacity:.78;
  background:rgba(255,255,255,.025);
  transform:none;
}
@media(max-width:700px){
  .twitch-promo-row{
    justify-content:flex-end;
    padding-right:3px;
  }
}

/* v147 Twitch promo: vertical edge tab on the right side of the viewport */
.twitch-promo-row{
  position:fixed;
  z-index:55;
  right:0;
  top:50%;
  width:auto;
  margin:0;
  padding:0;
  display:block;
  transform:translateY(-50%);
  pointer-events:none;
}
.twitch-promo-row.hidden{display:none!important}
.twitch-promo-button{
  pointer-events:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:0;
  padding:9px 14px;
  border:1px solid rgba(255,255,255,.12);
  border-bottom:0;
  border-radius:8px 8px 0 0;
  background:rgba(17,24,43,.94);
  color:var(--theme-text,#fff);
  text-decoration:none;
  font-size:11px;
  font-weight:600;
  line-height:1;
  white-space:nowrap;
  opacity:.68;
  transform-origin:bottom right;
  transform:rotate(-90deg) translateX(100%);
  box-shadow:0 3px 14px rgba(0,0,0,.18);
  transition:opacity .15s ease,background .15s ease;
}
.twitch-promo-button:hover{
  opacity:1;
  background:rgba(32,40,61,.98);
  transform:rotate(-90deg) translateX(100%);
}
@media(max-width:700px){
  .twitch-promo-row{
    right:0;
    top:58%;
    padding:0;
  }
  .twitch-promo-button{
    padding:8px 11px;
    font-size:10px;
  }
}

/* v148 Twitch top strip + round bottom-right Twitch shortcut */
.twitch-promo-row{
  position:static;
  width:100%;
  margin:0 0 8px;
  padding:0;
  display:flex;
  justify-content:center;
  transform:none;
  pointer-events:auto;
}
.twitch-promo-row.hidden{display:none!important}
.twitch-promo-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:0;
  padding:5px 10px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:7px;
  background:rgba(255,255,255,.025);
  color:var(--theme-text,#fff);
  text-decoration:none;
  font-size:10px;
  font-weight:600;
  line-height:1.2;
  white-space:nowrap;
  opacity:.48;
  transform:none;
  box-shadow:none;
  transition:opacity .15s ease,background .15s ease,border-color .15s ease;
}
.twitch-promo-button:hover{
  opacity:.9;
  background:rgba(255,255,255,.045);
  border-color:rgba(255,255,255,.11);
  transform:none;
}
.twitch-promo-logo{
  width:14px;
  height:14px;
  object-fit:contain;
  display:block;
}

.twitch-corner-button{
  position:fixed;
  right:16px;
  bottom:118px;
  z-index:70;
  width:42px;
  height:42px;
  padding:0;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  background:var(--theme-suggest-bg,#20283d);
  color:var(--theme-suggest-text,#aeb9d6);
  border:1px solid rgba(255,255,255,.09);
  opacity:.68;
  box-shadow:0 7px 22px rgba(0,0,0,.18);
  text-decoration:none;
  transition:.16s ease;
}
.twitch-corner-button:hover{
  opacity:1;
  transform:translateY(-1px);
  filter:brightness(1.08);
}
.twitch-corner-button img{
  display:block;
  width:21px;
  height:21px;
  object-fit:contain;
}
.twitch-corner-fallback{
  font-size:16px;
  font-weight:900;
  line-height:1;
}

/* Stack: Chat at bottom, Suggest above it, Twitch above Suggest. */
.site-chat{right:16px;bottom:14px}
.song-suggest-open.song-suggest-icon{right:16px;bottom:66px}
.twitch-corner-button{right:16px;bottom:118px}

@media(max-width:700px){
  .twitch-promo-row{margin-bottom:6px}
  .twitch-promo-button{font-size:9px;padding:5px 8px}
  .site-chat{right:10px;bottom:10px}
  .song-suggest-open.song-suggest-icon{right:10px;bottom:62px}
  .twitch-corner-button{right:10px;bottom:114px}
}

/* v149 Twitch promo: polished tab fixed tightly to the top edge */
.twitch-promo-row{
  position:fixed;
  top:0;
  left:50%;
  z-index:85;
  width:auto;
  margin:0;
  padding:0;
  display:block;
  transform:translateX(-50%);
  pointer-events:none;
}
.twitch-promo-row.hidden{display:none!important}
.twitch-promo-button{
  pointer-events:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:30px;
  padding:7px 13px 8px;
  border:1px solid rgba(255,255,255,.11);
  border-top:0;
  border-radius:0 0 9px 9px;
  background:rgba(17,24,43,.96);
  color:var(--theme-text,#fff);
  text-decoration:none;
  font-size:10px;
  font-weight:650;
  line-height:1;
  white-space:nowrap;
  opacity:.72;
  box-shadow:0 5px 16px rgba(0,0,0,.22);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transform:none;
  transition:opacity .15s ease,background .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.twitch-promo-button:hover{
  opacity:1;
  background:rgba(29,37,58,.98);
  border-color:rgba(255,255,255,.16);
  box-shadow:0 7px 20px rgba(0,0,0,.28);
  transform:none;
}
.twitch-promo-logo{
  width:14px;
  height:14px;
  object-fit:contain;
  display:block;
}
@media(max-width:700px){
  .twitch-promo-row{
    left:50%;
    transform:translateX(-50%);
  }
  .twitch-promo-button{
    min-height:28px;
    padding:6px 11px 7px;
    border-radius:0 0 8px 8px;
    font-size:9px;
  }
  .twitch-promo-logo{
    width:13px;
    height:13px;
  }
}

/* v152 configurable "koekoek" PNG peeking in from the right */
.cuckoo-peek{
  position:fixed;
  z-index:64;
  right:0;
  top:34%;
  width:min(220px,24vw);
  max-width:220px;
  pointer-events:none;
  opacity:0;
  transform:translateX(115%) rotate(-9deg);
  transform-origin:100% 55%;
  transition:transform .55s cubic-bezier(.2,.9,.25,1.12),opacity .22s ease;
  will-change:transform,opacity;
}
.cuckoo-peek.show{
  opacity:1;
  transform:translateX(12%) rotate(-9deg);
  pointer-events:auto;
}
.cuckoo-peek a{
  display:block;
  pointer-events:none;
  outline:none;
}
.cuckoo-peek.show a{pointer-events:auto}
.cuckoo-peek img{
  display:block;
  width:100%;
  height:auto;
  max-height:260px;
  object-fit:contain;
  object-position:right center;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.28));
  user-select:none;
  -webkit-user-drag:none;
}
.cuckoo-peek.show a:hover img{
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.36)) brightness(1.04);
}
@media(max-width:700px){
  .cuckoo-peek{
    top:31%;
    width:min(160px,34vw);
  }
}
@media(prefers-reduced-motion:reduce){
  .cuckoo-peek{transition:opacity .15s ease;transform:translateX(115%) rotate(-9deg)}
  .cuckoo-peek.show{transform:translateX(12%) rotate(-9deg)}
}

/* v153 cuckoo positioning and dimensions configurable from admin */
.cuckoo-peek{
  top:var(--cuckoo-top,34%);
  width:var(--cuckoo-width,180px);
  max-width:none;
  transform:translateX(115%) rotate(var(--cuckoo-rotation,-9deg));
}
.cuckoo-peek.show{
  transform:translateX(calc(100% - var(--cuckoo-visible,35%))) rotate(var(--cuckoo-rotation,-9deg));
}
.cuckoo-peek img{
  max-height:var(--cuckoo-max-height,240px);
}
@media(max-width:700px){
  .cuckoo-peek{
    top:var(--cuckoo-top,34%);
    width:var(--cuckoo-width,180px);
  }
}
@media(prefers-reduced-motion:reduce){
  .cuckoo-peek{transform:translateX(115%) rotate(var(--cuckoo-rotation,-9deg))}
  .cuckoo-peek.show{transform:translateX(calc(100% - var(--cuckoo-visible,35%))) rotate(var(--cuckoo-rotation,-9deg))}
}

/* v154 Twitch corner LIVE indicator */
.twitch-corner-button{overflow:visible}
.twitch-live-tag{
  position:absolute;
  right:-7px;
  top:-5px;
  min-width:23px;
  height:13px;
  padding:0 4px;
  border-radius:4px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  background:#e91916;
  color:#fff;
  border:1px solid rgba(255,255,255,.72);
  box-shadow:0 2px 7px rgba(0,0,0,.32);
  font-size:7px;
  line-height:1;
  font-weight:900;
  letter-spacing:.35px;
  pointer-events:none;
  opacity:1;
}
.twitch-live-tag.hidden{display:none!important}
.twitch-corner-button.is-live{opacity:.92}
@media(max-width:700px){
  .twitch-live-tag{right:-6px;top:-4px}
}

/* v155 site-wide information / announcement bar */
.site-info-bar{
  position:relative;
  z-index:90;
  width:100%;
  box-sizing:border-box;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(18,25,42,.95);
  color:var(--theme-text,#f4f6fb);
  box-shadow:0 3px 12px rgba(0,0,0,.10);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.site-info-bar-inner{
  max-width:1180px;
  margin:0 auto;
  padding:8px 14px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:8px;
  box-sizing:border-box;
  font-size:11px;
  line-height:1.45;
  text-align:center;
}
.site-info-bar-icon{
  flex:0 0 auto;
  width:16px;
  height:16px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.06);
  color:#cdd5e8;
  font-size:10px;
  line-height:1;
  font-weight:800;
  font-family:Arial,sans-serif;
}
.site-info-bar-text{
  min-width:0;
  overflow-wrap:anywhere;
}
@media(max-width:700px){
  .site-info-bar-inner{
    padding:7px 10px;
    font-size:10px;
    gap:7px;
  }
  .site-info-bar-icon{
    width:15px;
    height:15px;
    font-size:9px;
  }
}

/* v156 page scrollbar: match the compact transparent leaderboard scrollbar */
html{
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.16) transparent;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar{
  width:8px;
  height:8px;
}
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track{
  background:transparent;
}
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.16);
  border-radius:999px;
  border:2px solid transparent;
  background-clip:padding-box;
}
html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover{
  background:rgba(255,255,255,.26);
  border:2px solid transparent;
  background-clip:padding-box;
}
html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner{
  background:transparent;
}

/* v157 answer input + submit button in one row; Hint takes the former submit action slot */
.guess-entry-row{
  display:flex;
  align-items:stretch;
  gap:10px;
}
.guess-entry-row .search-wrap{
  flex:1 1 auto;
  min-width:0;
}
.guess-entry-row .search-wrap input{
  box-sizing:border-box;
  height:100%;
}
.guess-submit-btn{
  flex:0 0 auto;
  min-width:112px;
  padding:0 18px;
  border:0;
  border-radius:11px;
  background:var(--theme-primary,#7259ff);
  color:var(--theme-text,#fff);
  font-weight:bold;
  cursor:pointer;
}
.guess-submit-btn:disabled{
  opacity:.45;
  cursor:not-allowed;
}
.guess-submit-btn:not(:disabled):hover{
  filter:brightness(1.08);
}
.actions .hint-action{
  flex:1;
  padding:14px 18px;
  border:0;
  border-radius:11px;
  background:var(--theme-hint-bg,#27314a);
  color:var(--theme-hint-text,#fff);
  font-weight:bold;
  cursor:pointer;
  opacity:1;
}
.actions .hint-action:hover{
  filter:brightness(1.08);
}
.hint-area{
  margin-top:10px;
}
.hint-area .hint-cost:empty{
  display:none;
}
@media(max-width:600px){
  .guess-entry-row{
    gap:8px;
  }
  .guess-submit-btn{
    min-width:88px;
    padding:0 12px;
  }
  .actions{
    flex-direction:column;
  }
}

/* v162 Twitch LIVE badge: subtle floating/pulsing attention animation */
.twitch-corner-button.is-live .twitch-live-tag{
  animation:twitch-live-float 1.8s ease-in-out infinite,
            twitch-live-pulse 1.15s ease-in-out infinite;
  transform-origin:center;
  will-change:transform,opacity,box-shadow;
}
@keyframes twitch-live-float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-3px)}
}
@keyframes twitch-live-pulse{
  0%,100%{
    opacity:1;
    box-shadow:0 2px 7px rgba(0,0,0,.32),0 0 0 0 rgba(233,25,22,0);
  }
  50%{
    opacity:.72;
    box-shadow:0 3px 9px rgba(0,0,0,.38),0 0 0 4px rgba(233,25,22,.13);
  }
}
@media(prefers-reduced-motion:reduce){
  .twitch-corner-button.is-live .twitch-live-tag{
    animation:none;
  }
}

/* v164 multiple-choice hint */
.multiple-choice-options{display:grid;grid-template-columns:1fr;gap:6px;margin-top:7px}
.multiple-choice-option{width:100%;text-align:left;padding:8px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.055);color:inherit;cursor:pointer}
.multiple-choice-option:hover{background:rgba(255,255,255,.10)}

/* v165 ending-audio hint */
.ending-audio-hint{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:6px}
.ending-audio-play{display:inline-flex;align-items:center;gap:6px;width:auto!important;padding:6px 10px!important;border-radius:999px!important;font-size:11px!important;font-weight:800}
.ending-audio-play span{font-size:10px}
.ending-audio-status{opacity:.68;font-size:9px}

/* v167 compact no-hints + rotating in-game facts above progress */
.round-info-strip{display:flex;align-items:center;gap:8px;min-height:22px;margin:0 0 7px;overflow:hidden}
.no-hints-indicator{display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;padding:3px 7px;border-radius:999px;border:1px solid rgba(120,220,180,.18);background:rgba(90,190,150,.055);font-size:8px;font-weight:850;letter-spacing:.10em;opacity:.58;white-space:nowrap}
.no-hints-indicator.hidden{display:none}
.live-fact-viewport{position:relative;display:block;flex:1;min-width:0;height:20px;overflow:hidden}
.live-fact-viewport.hidden{display:none}
.live-fact-text{position:absolute;left:0;right:0;top:0;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:3px 7px;border-radius:999px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.035);font-size:8.5px;font-weight:700;letter-spacing:.015em;opacity:.62}
.live-fact-text.fact-enter{animation:factEnterDown .38s ease both}
.live-fact-text.fact-leave{animation:factLeaveDown .24s ease both}
@keyframes factEnterDown{0%{transform:translateY(-120%);opacity:0}100%{transform:translateY(0);opacity:.62}}
@keyframes factLeaveDown{0%{transform:translateY(0);opacity:.62}100%{transform:translateY(120%);opacity:0}}
@media(max-width:620px){.round-info-strip{gap:5px}.no-hints-indicator{font-size:7px}.live-fact-text{font-size:8px}}
@media(prefers-reduced-motion:reduce){.live-fact-text.fact-enter,.live-fact-text.fact-leave{animation:none}}

/* v198 jackpot */
.jackpot-banner{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:8px 0;padding:10px 13px;border-radius:11px;border:1px solid rgba(255,201,74,.32);background:rgba(255,181,35,.11);box-shadow:0 0 24px rgba(255,181,35,.08)}
.jackpot-banner strong{font-size:12px;letter-spacing:.04em}.jackpot-banner span{font-size:10px;opacity:.82}.jackpot-banner.hidden{display:none}

/* v207 subtle fixed powered-by link */
.powered-by-footer{position:fixed;left:50%;bottom:7px;transform:translateX(-50%);z-index:8;max-width:calc(100vw - 120px);font-size:9px;line-height:1;letter-spacing:.02em;white-space:nowrap;opacity:.38;pointer-events:none}
.powered-by-footer a{color:var(--theme-text,#fff);text-decoration:none;pointer-events:auto}
.powered-by-footer:hover{opacity:.7}
.powered-by-footer a:hover{text-decoration:underline}
@media(max-width:620px){.powered-by-footer{bottom:5px;font-size:8px;max-width:calc(100vw - 90px)}}

/* Twitch identity, subtle in chat and leaderboard */
.twitch-mark{display:inline-flex;align-items:center;justify-content:center;color:#a970ff;font-size:.9em;font-weight:900;margin-left:3px;vertical-align:middle}
.twitch-login-choice{margin:12px 0;text-align:center;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.twitch-login-button{display:inline-flex;align-items:center;gap:7px;background:#6441a5;color:white!important;text-decoration:none;border-radius:9px;padding:11px 15px;font-weight:700}
.twitch-login-button .twitch-mark{color:white}
.twitch-auth-user{font-size:.92em}

.twitch-mark{display:inline-block;width:14px;height:14px;background:url('../img/twitch.svg') center/contain no-repeat;vertical-align:-2px;flex-shrink:0}.twitch-login-button .twitch-mark{filter:brightness(0) invert(1);width:17px;height:17px}

/* v215: styled Twitch sign-out action */
.twitch-logout-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 14px;border:1px solid rgba(169,112,255,.46);border-radius:10px;background:linear-gradient(145deg,rgba(100,65,165,.20),rgba(145,70,235,.12));color:#e8d9ff!important;text-decoration:none!important;font-size:.86rem;font-weight:750;line-height:1.25;box-shadow:0 3px 12px rgba(43,20,84,.13);transition:background .2s,border-color .2s,transform .2s,box-shadow .2s}
.twitch-logout-button:hover{background:linear-gradient(145deg,#6441a5,#8c4be0);border-color:#b38cff;color:#fff!important;transform:translateY(-1px);box-shadow:0 5px 16px rgba(100,65,165,.30)}
.twitch-logout-button:active{transform:translateY(0)}
.twitch-logout-button:focus-visible{outline:3px solid #c6a2ff;outline-offset:3px}
.twitch-logout-icon{font-size:1.12em;line-height:1;display:inline-block;transform:translateX(0);transition:transform .2s}
.twitch-logout-button:hover .twitch-logout-icon{transform:translateX(2px)}
@media(prefers-reduced-motion:reduce){.twitch-logout-button,.twitch-logout-icon{transition:none}}

/* v216: shared premium volume controls and result playback timeline */
.volume-control,.result-listen-card .result-volume-control{
 display:flex;align-items:center;justify-content:center;gap:13px;
 width:min(100%,440px);max-width:440px;padding:12px 17px;
 border:1px solid rgba(159,143,255,.22);border-radius:18px;
 background:linear-gradient(135deg,rgba(117,91,255,.14),rgba(28,38,69,.75));
 box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 8px 22px rgba(0,0,0,.1);
}
.volume-control{margin:-12px auto 26px;}
.result-listen-card .result-volume-control{margin:12px auto 4px;}
.volume-control .volume-icon{font-size:20px;line-height:1;flex:none;filter:drop-shadow(0 0 6px rgba(125,105,255,.3));}
.volume-control .volume-value{flex:0 0 48px;text-align:right;font-size:13px;font-weight:700;color:#e2dcff;font-variant-numeric:tabular-nums;}
.volume-control input[type=range]{
 --volume-percent:100%;-webkit-appearance:none;appearance:none;display:block;
 min-width:0;flex:1;height:8px;border-radius:999px;outline:none;border:0;cursor:pointer;
 background:linear-gradient(90deg,var(--theme-primary,#8064ff),#b98aff) 0/var(--volume-percent) 100% no-repeat,rgba(163,174,208,.22);
}
.volume-control input[type=range]::-webkit-slider-thumb{
 -webkit-appearance:none;appearance:none;width:19px;height:19px;border-radius:50%;
 background:#fff;border:4px solid var(--theme-primary,#8064ff);box-shadow:0 1px 10px rgba(115,88,255,.6);transition:transform .15s;
}
.volume-control input[type=range]::-moz-range-thumb{
 width:12px;height:12px;border-radius:50%;background:#fff;border:4px solid var(--theme-primary,#8064ff);box-shadow:0 1px 10px rgba(115,88,255,.6);
}
.volume-control input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.13)}
.volume-control input[type=range]:focus-visible{outline:2px solid #d5c9ff;outline-offset:5px}
.result-playback-progress{height:11px;overflow:hidden;border-radius:999px;position:relative;margin:16px auto 5px;max-width:440px;background:rgba(137,151,188,.22);box-shadow:inset 0 2px 5px rgba(0,0,0,.18)}
.result-playback-fill{height:100%;width:0%;border-radius:inherit;background:linear-gradient(90deg,var(--progress-play-start,#43dbb2),var(--progress-play-mid,#36d1dc),var(--progress-play-end,#5a9bff));box-shadow:0 0 15px rgba(54,209,220,.4);transition:width .07s linear}
.result-playback-time{display:flex;justify-content:space-between;max-width:440px;margin:0 auto 9px;color:#b3bfdb;font-size:12px;font-variant-numeric:tabular-nums;font-weight:600}
@media(max-width:480px){.volume-control,.result-listen-card .result-volume-control{gap:9px;padding:11px 12px}.volume-control .volume-value{flex-basis:42px}}