@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@700&family=Oswald:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');
:root{--blue:#060ce9;--blue-dark:#030886;--navy:#020533;--gold:#ffcc00;--gold-dark:#d69f4c;--white:#fff;--muted:#9aa3d9;--clue:'Libre Baskerville','ITC Korinna',Georgia,serif;--swiss:'Oswald','Swiss 911','Arial Narrow',sans-serif;--sans:'Inter',system-ui,sans-serif;--shadow:3px 3px 0 #000;--tile:linear-gradient(180deg,#0a12ff 0,var(--blue) 40%,#0409c4 100%);--bevel:inset 0 1px 0 #ffffff26,inset 0 -2px 0 #0004}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;height:100dvh;overflow:hidden;display:flex;flex-direction:column;color:var(--white);font-family:var(--sans);font-size:14px;background:radial-gradient(ellipse 90% 70% at 50% 35%,#0b1490 0,#040a5a 55%,var(--navy) 100%) fixed,var(--navy)}
/* Faint game-board grid behind everything. */
body::before{content:'';position:fixed;inset:0;pointer-events:none;background:linear-gradient(90deg,#0000 calc(100% - 6px),#0006 0) 0 0/calc(100% / 6) 100%,linear-gradient(#0000 calc(100% - 6px),#0006 0) 0 0/100% calc(100% / 6);opacity:.55;mask:radial-gradient(ellipse at 50% 40%,#000 20%,#0000 75%)}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
button:disabled,select:disabled{cursor:default;opacity:.4}
button:hover:not(:disabled),select:hover:not(:disabled){filter:brightness(1.15)}
button:active:not(:disabled){transform:translateY(1px)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}

.bar,main{position:relative;width:100%;max-width:700px;margin:0 auto}
.bar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px 10px}
.brand{display:inline-block;transform:skewX(-9deg);font-family:var(--swiss);font-size:27px;font-weight:700;line-height:1;letter-spacing:.5px;text-transform:uppercase;text-decoration:none;color:var(--white);text-shadow:1px 1px 0 #000,2px 2px 0 #000,3px 3px 0 #000,4px 4px 0 #0008}
.brand span{color:var(--gold)}
.mode-tabs{display:flex;gap:3px;padding:3px;background:#000;box-shadow:0 3px 8px #0006}
.mode{border:0;background:var(--blue-dark);padding:5px 14px;font-family:var(--swiss);font-size:14px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
.mode.active{background:var(--tile);box-shadow:var(--bevel);color:var(--gold);text-shadow:2px 2px 0 #000}
nav{display:flex;gap:6px}
.icon-button{width:34px;height:34px;display:grid;place-items:center;border:3px solid #000;background:var(--tile);box-shadow:var(--bevel);color:var(--white);font-family:var(--swiss);font-weight:700;font-size:17px;text-shadow:2px 2px 0 #000}

main{flex:1;min-height:0;padding:2px 16px 14px;display:flex;flex-direction:column;gap:10px}
/* Pick panels are positioned against the filter bar so they can span its full width. */
.filters{position:relative;z-index:5;flex:none;display:grid;grid-template-columns:1.25fr 1fr 1.15fr 1.1fr auto;gap:3px;padding:3px;background:#000}
select,.pick-button{appearance:none;width:100%;min-width:0;height:34px;border:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%239aa3d9'/%3E%3C/svg%3E") no-repeat right 9px center,var(--blue-dark);color:#dfe2ff;padding:0 24px 0 10px;font-family:var(--swiss);font-size:13px;font-weight:500;letter-spacing:1px;text-transform:uppercase;cursor:pointer;text-overflow:ellipsis;white-space:nowrap}
select.set,.pick-button.set{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23ffcc00'/%3E%3C/svg%3E"),var(--tile);color:var(--gold);font-weight:600;text-shadow:1px 1px 0 #000}
select option{background:var(--blue-dark);color:var(--white);text-transform:none}
.pick-button{display:block;text-align:left;overflow:hidden}
.pick-button[aria-expanded=true]{outline:2px solid var(--gold);outline-offset:-2px}
.pick-panel{position:absolute;top:100%;left:0;right:0;max-height:calc(100dvh - 140px);overflow-y:auto;display:grid;gap:3px;padding:3px;background:#000;box-shadow:0 14px 30px #000c}
.pick-actions{display:flex;gap:3px}
.pick-actions button,.chip span{display:grid;place-items:center;min-height:32px;padding:0 10px;border:0;background:var(--blue-dark);color:#dfe2ff;font-family:var(--swiss);font-size:13px;font-weight:500;letter-spacing:1px;text-transform:uppercase;text-align:center;line-height:1.1}
.pick-actions .done{margin-left:auto;background:linear-gradient(180deg,#ffe066,var(--gold) 55%,#e0a800);color:#000;font-weight:700}
.decades{display:flex;gap:3px}
.pick-grid{display:grid;gap:3px;grid-template-columns:repeat(4,1fr)}
#year .pick-grid{grid-template-columns:repeat(9,1fr)}
.chip{display:grid;cursor:pointer}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip input:checked+span{background:var(--tile);box-shadow:var(--bevel);color:var(--gold);font-weight:600;text-shadow:1px 1px 0 #000}
.chip input:focus-visible+span{outline:2px solid var(--gold);outline-offset:-2px}
.chip input:disabled+span{opacity:.3;cursor:default}
.toggle{display:flex;align-items:center;justify-content:center;gap:5px;height:34px;padding:0 12px;border:0;background:var(--blue-dark);color:#dfe2ff;font-family:var(--swiss);font-size:13px;font-weight:500;letter-spacing:1px;text-transform:uppercase}
.toggle svg{width:15px;height:15px;stroke-width:2;stroke-linejoin:round;color:var(--muted)}
.toggle[aria-pressed=true]{background:var(--tile);color:var(--gold);font-weight:600;text-shadow:1px 1px 0 #000}
.toggle[aria-pressed=true] svg{fill:var(--gold);color:#000}

/* The board: category and value tiles over the clue screen, separated by black gutters. */
.clue-card{flex:1;min-height:170px;display:grid;grid-template-rows:auto 1fr;gap:5px;padding:5px;background:#000;box-shadow:0 12px 34px #000a}
.board-head{display:grid;grid-template-columns:1fr auto;gap:5px}
.cat-tile,.value-tile{display:grid;place-items:center;min-height:52px;padding:6px 14px;background:var(--tile);box-shadow:var(--bevel);font-family:var(--swiss);text-transform:uppercase;text-align:center;text-shadow:2px 2px 0 #000}
.cat-tile{font-size:clamp(15px,1.2vw + 1.1vh,20px);font-weight:600;letter-spacing:1px;line-height:1.15;text-wrap:balance}
.value-tile{min-width:92px;font-size:26px;font-weight:700;color:var(--gold);letter-spacing:.5px}
.value-tile:empty{display:none}
.screen{min-height:0;display:flex;flex-direction:column;padding:14px 24px 10px;background:radial-gradient(ellipse at 50% 45%,#1d26ff 0,var(--blue) 50%,#0409b8 100%);box-shadow:inset 0 0 40px #0005}
.clue-body{flex:1;min-height:0;overflow-y:auto;display:flex;padding:6px 0 10px;scrollbar-width:thin}
h2{margin:auto;text-align:center;font-family:var(--clue);font-weight:700;text-transform:uppercase;font-size:clamp(18px,2vw + 1.7vh,31px);line-height:1.38;letter-spacing:.6px;text-shadow:var(--shadow);text-wrap:balance}
.clue-bottom{flex:none;display:flex;justify-content:space-between;gap:12px;padding-top:8px;border-top:1px solid #ffffff22;font-family:var(--swiss);font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:#b9bff7}

.status-line{flex:none;display:flex;align-items:center;gap:10px;min-height:26px}
.attempts{display:flex;gap:4px;flex:none}
.attempts span{width:26px;height:26px;border:2px solid #000;background:var(--blue-dark);box-shadow:var(--bevel);display:grid;place-items:center;font-family:var(--swiss);font-weight:700;font-size:15px}
.attempts .wrong{background:#9b1022}
.attempts .right{background:var(--gold);color:#000}
.attempts .assisted{background:var(--gold-dark);color:#000}
.guess-history{display:flex;gap:8px;overflow:hidden;min-width:0}
.guess-row{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:line-through}
.guess-row.correct{color:var(--gold);text-decoration:none;font-weight:600}
.hint-panel{flex:none;align-self:flex-start;font-family:var(--swiss);font-size:16px;letter-spacing:3px;color:var(--gold);background:var(--blue-dark);border:2px solid #000;padding:4px 12px}

/* Answer bar styled like a contestant podium screen. */
.answer-field{display:flex;gap:5px;padding:5px;background:#000;box-shadow:0 0 0 1px #ffffff1a}
.answer-field:focus-within{box-shadow:0 0 0 2px var(--gold),0 0 18px #ffcc0040}
input{flex:1;min-width:0;border:0;background:linear-gradient(180deg,#040a8c,#030770);color:var(--white);font-size:16px;font-weight:500;padding:9px 12px}
input::placeholder{color:#7f88cc}
input:focus-visible{outline:none}
#submit{border:0;background:linear-gradient(180deg,#ffe066,var(--gold) 45%,#e0a800);color:#000;padding:0 20px;font-family:var(--swiss);font-weight:700;font-size:15px;letter-spacing:1.5px;text-transform:uppercase}

.result{flex:none;padding:5px;background:#000}
.result>*{background:var(--tile)}
.result-eyebrow{padding:6px 10px 0;font-family:var(--swiss);font-size:13px;font-weight:600;letter-spacing:2px;color:var(--gold);text-transform:uppercase;text-align:center;text-shadow:2px 2px 0 #000}
.result.missed>*{background:var(--blue-dark)}
.result.missed .result-eyebrow{color:#c3c8ff}
.result h3{margin:0;padding:4px 14px 8px;font-family:var(--clue);font-weight:700;text-transform:uppercase;font-size:21px;text-align:center;text-shadow:var(--shadow)}
.result-links{display:flex;justify-content:center;gap:18px;padding:0 10px 9px}
.result a,.text-button{color:var(--white);text-decoration:underline;text-decoration-color:#ffffff66;text-underline-offset:3px;background:none;border:0;padding:0;font-size:13px}

.feedback{flex:none;margin:0;font-size:13px;color:var(--muted)}
.feedback:empty{display:none}
.feedback.error{color:#ff8a8a}
.game-actions{flex:none;display:flex;align-items:center;gap:6px}
.subtle-button,.new-button{border:3px solid #000;padding:6px 14px;font-family:var(--swiss);font-size:14px;letter-spacing:1.5px;text-transform:uppercase;box-shadow:var(--bevel)}
.subtle-button{background:var(--blue-dark);color:#dfe2ff}
.new-button{margin-left:auto;background:var(--tile);padding:6px 18px;font-weight:700;color:var(--gold);text-shadow:2px 2px 0 #000}

dialog{border:6px solid #000;background:var(--tile);color:var(--white);padding:20px;max-width:400px;width:calc(100% - 32px);box-shadow:0 20px 50px #000c}
dialog::backdrop{background:#000b}
.modal-header{display:flex;justify-content:space-between;align-items:center}
.modal-header button{border:0;background:none;font-size:26px;color:var(--white)}
.section-label{font-family:var(--swiss);font-size:17px;font-weight:600;letter-spacing:2px;color:var(--gold);text-shadow:2px 2px 0 #000}
dialog p,dialog li{font-size:14px;line-height:1.6}
dialog li+li{margin-top:4px}
dialog a{color:var(--gold)}
dialog ul{padding-left:18px;margin:12px 0}
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin:14px 0 4px;background:#000;border:4px solid #000}
.stat-grid>div{text-align:center;background:var(--blue-dark);padding:12px 4px}
.stat-grid strong{display:block;font-family:var(--swiss);font-weight:700;font-size:30px;color:var(--gold);text-shadow:2px 2px 0 #000}
.stat-grid span{font-family:var(--swiss);font-size:12px;letter-spacing:1px;text-transform:uppercase}
.modal-small{font-size:12px!important;color:#c3c8ff}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
[hidden]{display:none!important}
#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#000;color:var(--gold);border:2px solid var(--gold);padding:10px 16px;font-family:var(--swiss);letter-spacing:1px;text-transform:uppercase;font-size:14px;z-index:20;max-width:90vw}

@media(max-width:560px){.filters{grid-template-columns:1fr 1fr auto}.pick-grid{grid-template-columns:1fr 1fr}#year .pick-grid{grid-template-columns:repeat(6,1fr)}.pick-actions{flex-wrap:wrap}.decades{order:3;width:100%}.decades button{flex:1;padding:0}.toggle{grid-area:1/3/3/4;flex-direction:column;gap:2px;height:auto;padding:0 10px;font-size:11px}}
@media(max-width:420px){.bar{padding:10px 12px 8px}.brand{font-size:22px}.mode{padding:5px 9px;font-size:13px}main{padding:2px 12px 12px;gap:8px}.clue-card{gap:4px;padding:4px}.board-head{gap:4px}.cat-tile,.value-tile{min-height:44px;padding:5px 10px}.value-tile{min-width:70px;font-size:21px}.screen{padding:10px 14px 8px}select{height:32px}}
@media(max-height:620px){.cat-tile,.value-tile{min-height:40px}.screen{padding-top:8px}}
@media(prefers-reduced-motion:no-preference){.screen{animation:zoom .35s ease-out}@keyframes zoom{from{transform:scale(.9);opacity:.4}to{transform:none;opacity:1}}}