:root{
    --bg:#0b0f0f;
    --panel:#141817;
    --panel2:#1c211f;
    --panel3:#252a27;
    --cream:#f3eadf;
    --muted:#b5ada3;
    --copper:#c9753a;
    --amber:#e1a15e;
    --rust:#7b3f25;
    --line:rgba(225,161,94,.20);
    --good:#a7d7a0;
    --bad:#ee9b91;
}
*{box-sizing:border-box}
html{
    background:#000;
}
.sr-only{
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    padding:0!important;
    margin:-1px!important;
    overflow:hidden!important;
    clip:rect(0,0,0,0)!important;
    white-space:nowrap!important;
    border:0!important;
}

body{
    margin:0;
    min-height:100vh;
    background:
        radial-gradient(circle at 15% 5%,rgba(123,63,37,.18),transparent 28%),
        linear-gradient(180deg,#0a0e0e 0%,#0f1312 55%,#090c0c 100%);
    color:var(--cream);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}
.app{width:min(100%,620px);margin:auto;padding:14px 14px 44px}
.hero{
    position:relative;
    min-height:220px;
    margin-bottom:14px;
    border-radius:24px;
    overflow:hidden;
    background-image:url('../assets/record-player.jpg');
    background-size:cover;
    background-position:center bottom;
    box-shadow:0 18px 48px rgba(0,0,0,.34);
    border:1px solid rgba(225,161,94,.12);
}
.brand{
    position:absolute;
    left:18px;
    bottom:16px;
    right:18px;
    top:auto;
}
h1{
    margin:0;
    color:#fff8ef;
    font-family:inherit;
    font-size:clamp(20px,5vw,28px);
    line-height:1;
    letter-spacing:.045em;
    font-weight:800;
    font-style:normal;
    text-shadow:0 2px 18px rgba(0,0,0,.72);
}
h1 .dropper{margin-left:.16em}
.brand-mark{
    width:48px;
    height:3px;
    margin-top:9px;
    border-radius:999px;
    background:linear-gradient(90deg,var(--amber),var(--copper));
    box-shadow:0 2px 12px rgba(201,117,58,.45);
}
.card{
    background:linear-gradient(180deg,rgba(24,29,27,.97),rgba(17,21,20,.97));
    border:1px solid var(--line);
    border-radius:20px;
    padding:18px;
    margin-bottom:16px;
    box-shadow:0 18px 44px rgba(0,0,0,.24);
}
.play-picker{
    margin-bottom:16px;
}
.play-picker-copy{
    margin:0 2px 12px;
}
.play-picker-copy h2,
.setup-heading h2{
    margin:0;
    color:#fff8ef;
    font-size:clamp(23px,6vw,30px);
    line-height:1.08;
    letter-spacing:-.02em;
}
.play-picker-copy p:not(.label),
.setup-heading p:not(.label){
    margin:8px 0 0;
    color:var(--muted);
    font-size:14px;
    line-height:1.5;
}
.play-mode-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}
.play-mode-card{
    position:relative;
    display:flex;
    min-height:220px;
    flex-direction:column;
    padding:18px;
    border-radius:18px;
    border:1px solid rgba(225,161,94,.20);
    background:linear-gradient(180deg,rgba(31,36,34,.98),rgba(18,22,21,.98));
    color:var(--cream);
    text-decoration:none;
    box-shadow:0 14px 34px rgba(0,0,0,.22);
    overflow:hidden;
    transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.play-mode-card::after{
    content:'';
    position:absolute;
    inset:auto -45px -70px auto;
    width:150px;
    height:150px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(225,161,94,.13),rgba(225,161,94,0) 70%);
    pointer-events:none;
}
.play-mode-card:hover,
.play-mode-card:focus-visible{
    transform:translateY(-2px);
    border-color:rgba(225,161,94,.58);
    box-shadow:0 18px 42px rgba(0,0,0,.30);
    outline:none;
}
.party-play-card{
    background:linear-gradient(155deg,rgba(52,38,29,.98),rgba(22,25,23,.98) 72%);
}
.solo-play-card{
    background:linear-gradient(155deg,rgba(30,34,32,.98),rgba(31,23,19,.98) 100%);
}
.play-mode-kicker{
    display:inline-flex;
    align-self:flex-start;
    padding:5px 8px;
    border-radius:999px;
    border:1px solid rgba(225,161,94,.26);
    background:rgba(201,117,58,.10);
    color:var(--amber);
    font-size:10px;
    font-weight:900;
    letter-spacing:1.15px;
    text-transform:uppercase;
}
.play-mode-card strong{
    display:block;
    margin-top:14px;
    color:#fff8ef;
    font-size:22px;
    line-height:1.08;
}
.play-mode-description{
    display:block;
    margin-top:9px;
    color:var(--muted);
    font-size:13px;
    line-height:1.48;
}
.play-mode-action{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin-top:auto;
    padding-top:18px;
    color:var(--amber);
    font-size:13px;
    font-weight:900;
}
.party-setup{
    scroll-margin-top:14px;
}
.setup-heading{
    padding-bottom:16px;
    margin-bottom:16px;
    border-bottom:1px solid rgba(225,161,94,.12);
}
.filter-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.filter-section{margin:2px 0 16px}
.filter-section+.filter-section{margin-top:4px}
.checkbox-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.filter-choice{
    display:flex;
    align-items:center;
    gap:8px;
    min-height:46px;
    background:var(--panel3);
    border:1px solid rgba(243,234,223,.07);
    border-radius:12px;
    padding:10px 11px;
    color:var(--cream);
    font-size:14px;
    font-weight:800;
    cursor:pointer;
    user-select:none;
}
.filter-choice input{width:18px;height:18px;margin:0;accent-color:var(--copper);flex:0 0 auto}
.filter-choice input:checked+span{color:var(--amber)}
.filter-choice.disabled{opacity:.38;cursor:default}
.filter-choice .choice-count{font-size:11px;color:var(--muted);font-weight:700}
.label{
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:1.25px;
    color:var(--amber);
    margin:0 0 7px;
    font-weight:800;
}
select{
    width:100%;
    height:50px;
    background:var(--panel3);
    color:var(--cream);
    border:1px solid rgba(243,234,223,.07);
    border-radius:12px;
    padding:0 12px;
    font-size:16px;
    margin-bottom:16px;
    outline:none;
}
select:focus{border-color:rgba(225,161,94,.65);box-shadow:0 0 0 3px rgba(201,117,58,.12)}
.modes{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.duration-modes{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.mode{position:relative}
.mode input{position:absolute;opacity:0}
.mode label{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:58px;
    background:var(--panel3);
    border:1px solid rgba(243,234,223,.07);
    border-radius:13px;
    font-weight:850;
    text-align:center;
    color:var(--cream);
    transition:.16s ease;
}
.duration-modes .mode label{min-height:46px;padding:0 5px}
.mode input:checked+label{
    border-color:var(--amber);
    background:linear-gradient(180deg,#34261d,#2a211b);
    box-shadow:inset 0 0 0 1px rgba(225,161,94,.18);
}
.progressive-mode{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    width:max-content;
    max-width:100%;
    margin:9px auto 2px;
    padding:7px 10px;
    border-radius:12px;
    color:var(--cream);
    cursor:pointer;
    user-select:none;
}
.progressive-mode>input{position:absolute;opacity:0;pointer-events:none}
.progressive-switch{
    width:38px;
    height:22px;
    padding:3px;
    border-radius:999px;
    background:rgba(243,234,223,.12);
    border:1px solid rgba(243,234,223,.12);
    transition:.16s ease;
    flex:0 0 auto;
}
.progressive-switch span{
    display:block;
    width:14px;
    height:14px;
    border-radius:50%;
    background:var(--cream);
    transition:.16s ease;
}
.progressive-mode>input:checked+.progressive-switch{
    background:rgba(225,161,94,.28);
    border-color:var(--amber);
}
.progressive-mode>input:checked+.progressive-switch span{transform:translateX(16px);background:var(--amber)}
.progressive-copy{display:flex;align-items:baseline;gap:7px;min-width:0}
.progressive-copy strong{font-size:13px}
.progressive-copy small{font-size:11px;color:var(--muted);white-space:nowrap}

.progressive-mode.is-disabled{
    opacity:.38;
    cursor:not-allowed;
}
.progressive-mode.is-disabled .progressive-switch{
    border-color:rgba(243,234,223,.08);
}

@media(max-width:480px){
    .duration-modes{gap:6px}
    .duration-modes .mode label{min-height:42px;font-size:13px}
    .progressive-mode{margin-top:7px}
    .progressive-copy{gap:5px}
    .progressive-copy small{font-size:10px}
}
button{
    width:100%;
    border:0;
    border-radius:14px;
    padding:16px;
    margin-top:10px;
    font-size:17px;
    font-weight:950;
    cursor:pointer;
}
button:disabled{opacity:.45;cursor:default}
.primary{
    background:linear-gradient(180deg,var(--amber),var(--copper));
    color:#1a110b;
    box-shadow:0 8px 22px rgba(201,117,58,.22);
}
.secondary{background:#292d2a;color:var(--cream);border:1px solid rgba(225,161,94,.18)}
.danger{background:#35231e;color:#f4c4b4;border:1px solid rgba(201,117,58,.14)}
.game{display:none}
.round{text-align:center;color:var(--amber);font-weight:900;letter-spacing:.08em;margin-bottom:12px}
.player{position:relative;background:#000;border-radius:14px;overflow:hidden;min-height:220px;border:1px solid rgba(225,161,94,.12)}
#player,#player iframe{width:100%!important;height:220px!important;display:block}
.idle-visual{position:absolute;inset:0;z-index:3;background:#0f1110;display:flex;align-items:center;justify-content:center;opacity:1;visibility:visible;transition:opacity .18s ease}
.idle-visual.hidden{opacity:0;visibility:hidden;pointer-events:none}
.idle-visual video{width:100%;height:100%;object-fit:cover;display:block}
.idle-visual::after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(225,161,94,.05);pointer-events:none}
.listen{text-align:center;font-size:29px;font-weight:950;margin:20px 0 4px}
.status{text-align:center;color:var(--muted);min-height:42px;line-height:1.4;margin-top:10px;}
.status.error{color:var(--bad)}
.status.success{color:var(--good)}
.answer{
    display:none;
    background:linear-gradient(180deg,#262a27,#1e221f);
    border:1px solid rgba(225,161,94,.15);
    border-radius:16px;
    padding:22px 14px;
    margin-top:14px;
    text-align:center;
}
.answer h2{font-size:clamp(29px,8vw,40px);margin:0 0 8px;color:#fff8ef}
.artist{font-size:22px;font-weight:850;color:var(--amber)}
.year{font-size:28px;font-weight:950;margin-top:5px}
.chartnote{font-size:13px;color:var(--muted);margin-top:8px}
.score{font-size:14px;color:var(--muted);margin-top:14px}
#progressive{display:none}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tiny{color:var(--muted);font-size:13px;line-height:1.45;margin:14px 2px 0}
.nav{text-align:center;margin-top:18px}
.nav a{color:var(--amber);text-decoration:none;font-weight:800}
@media(max-width:620px){
    .checkbox-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:460px){
    .hero{min-height:220px;background-position:center bottom}
    .play-mode-grid{grid-template-columns:1fr}
    .play-mode-card{min-height:184px;padding:17px}
    .play-mode-card strong{font-size:21px}
    .filter-grid{grid-template-columns:1fr}
    .checkbox-grid{grid-template-columns:1fr 1fr}
    h1{font-size:clamp(20px,6vw,26px)}
}

/* Home game-mode tabs */
.play-tabs-shell{
    margin-bottom:16px;
}
.play-tabs{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px;
    padding:6px;
    border:1px solid rgba(225,161,94,.16);
    border-radius:16px;
    background:rgba(20,24,22,.94);
    box-shadow:0 12px 30px rgba(0,0,0,.18);
}
.play-tab{
    width:100%;
    margin:0;
    padding:13px 12px;
    border-radius:11px;
    background:transparent;
    color:var(--muted);
    box-shadow:none;
    font-size:15px;
    font-weight:900;
    transition:background .16s ease,color .16s ease,box-shadow .16s ease;
}
.play-tab:hover,
.play-tab:focus-visible{
    color:var(--cream);
    outline:none;
}
.play-tab.is-active{
    background:linear-gradient(180deg,var(--amber),var(--copper));
    color:#1a110b;
    box-shadow:0 5px 16px rgba(201,117,58,.20);
}
.solo-home-panel{
    margin-top:10px;
    padding:20px 18px 18px;
    border:1px solid rgba(225,161,94,.16);
    border-radius:18px;
    background:linear-gradient(180deg,rgba(31,36,34,.98),rgba(18,22,21,.98));
    box-shadow:0 14px 34px rgba(0,0,0,.20);
}
.solo-home-panel h2{
    margin:0;
    color:#fff8ef;
    font-size:clamp(24px,6vw,31px);
    line-height:1.08;
    letter-spacing:-.02em;
}
.solo-home-panel>p:not(.label){
    margin:10px 0 0;
    color:var(--muted);
    font-size:14px;
    line-height:1.5;
}
.solo-home-rules{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px;
    margin:17px 0 8px;
}
.solo-home-rules>div{
    display:flex;
    min-height:66px;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    padding:8px 5px;
    border:1px solid rgba(243,234,223,.07);
    border-radius:12px;
    background:var(--panel3);
    text-align:center;
}
.solo-home-rules strong{
    color:var(--amber);
    font-size:18px;
    line-height:1;
}
.solo-home-rules span{
    color:var(--muted);
    font-size:10px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.04em;
}
.party-setup[hidden],
.solo-home-panel[hidden]{
    display:none !important;
}
@media(max-width:460px){
    .play-tabs{gap:5px;padding:5px}
    .play-tab{padding:12px 8px;font-size:14px}
    .solo-home-panel{padding:18px 15px 16px}
    .solo-home-rules{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* Solo game choices */
.solo-mode-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
    margin:17px 0 6px;
}
.solo-mode-choice{
    position:relative;
    display:block;
    cursor:pointer;
}
.solo-mode-choice input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}
.solo-mode-choice span{
    display:flex;
    min-height:88px;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    padding:13px 12px;
    border:1px solid rgba(225,161,94,.15);
    border-radius:13px;
    background:var(--panel3);
    transition:border-color .15s ease,background .15s ease,box-shadow .15s ease,transform .08s ease;
}
.solo-mode-choice strong{
    color:#fff8ef;
    font-size:15px;
    line-height:1.15;
}
.solo-mode-choice small{
    color:var(--muted);
    font-size:11px;
    line-height:1.35;
}
.solo-mode-choice input:checked+span{
    border-color:rgba(225,161,94,.72);
    background:linear-gradient(180deg,rgba(82,53,32,.96),rgba(48,35,27,.98));
    box-shadow:inset 0 0 0 1px rgba(225,161,94,.18),0 6px 18px rgba(0,0,0,.16);
}
.solo-mode-choice input:checked+span strong{color:var(--amber)}
.solo-mode-choice input:focus-visible+span{
    outline:2px solid var(--amber);
    outline-offset:2px;
}
.solo-mode-choice:active span{transform:scale(.99)}
@media(max-width:460px){
    .solo-mode-grid{grid-template-columns:1fr;gap:7px}
    .solo-mode-choice span{min-height:70px}
}

/* Party Play YouTube metadata mask.
   Matches the Solo mask used for title/artist questions so the embedded
   video's title/channel metadata cannot give away the answer. */
/* Party Play YouTube metadata mask */
.game .player.party-youtube-meta-mask::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;

    /* Give the feather a little more room */
    height:68px;

    z-index:2;
    pointer-events:none;

    background:
        linear-gradient(
            180deg,
            rgba(6,8,8,.20) 0%,
            rgba(7,9,9,.15) 42%,
            rgba(9,11,10,.10) 70%,
            rgba(9,11,10,.05) 91%,
            rgba(9,11,10,0) 100%
        );

    -webkit-backdrop-filter:blur(12px) saturate(100%);
    backdrop-filter:blur(9px) saturate(100%);

    /* Feather the entire mask + blur at the bottom */
    -webkit-mask-image:linear-gradient(
        to bottom,
        #000 0%,
        #000 65%,
        rgba(0,0,0,.85) 75%,
        rgba(0,0,0,.50) 86%,
        rgba(0,0,0,.20) 94%,
        transparent 100%
    );

    mask-image:linear-gradient(
        to bottom,
        #000 0%,
        #000 65%,
        rgba(0,0,0,.85) 75%,
        rgba(0,0,0,.50) 86%,
        rgba(0,0,0,.20) 94%,
        transparent 100%
    );

    box-shadow:inset 0 1px 0 rgba(225,161,94,.10);
}