/* ===================== Dailyd decade themes =====================
   Each theme restyles the WHOLE UI (page, header band, logo, labels, fields, buttons, thumbnails, badges, strips).
   Era palettes are fixed (they ignore OS dark mode except 2020s) and every input keeps high-contrast text. */

/* ---------- shared hooks (driven by variables) ---------- */
:root{
  --page:var(--bg); --page-size:auto; --card:#fff; --ink:#15171a; --muted:#5e646d; --line:#d9dce1;
  --hdr-bg:transparent; --hdr-ink:var(--ink); --hdr-border:1px solid var(--line);
  --logo-font:'Space Grotesk',system-ui,sans-serif; --logo2-font:var(--logo-font); --logo-size:1.45rem; --logo2-size:1em;
  --label-font:var(--font-body); --label-ink:var(--muted); --label-size:.82rem; --label-tt:none; --label-ls:.02em;
  --field-bg:#fff; --field-ink:#15171a; --field-bd:#c9ced6; --field-bw:1.5px; --field-r:10px; --field-font:var(--font-body); --field-shadow:none; --ph:#7b828c;
  --btn-bg:var(--accent); --btn-ink:#fff; --btn-font:var(--font-body); --btn-bd:0; --btn-shadow:0 2px 0 rgba(0,0,0,.25); --btn-ts:none; --btn-tt:none; --btn-ls:0; --btn-size:1.05rem;
  --thumb-bd:transparent; --thumb-on:var(--accent);
  --badge-bg:color-mix(in srgb,var(--accent) 16%,#fff); --badge-ink:#15171a; --badge-bd:1px solid color-mix(in srgb,var(--accent) 45%,transparent); --badge-font:var(--font-body);
  --strip:none; --strip-h:0px; --panel:#fff; --panel-ink:var(--ink); --panel-bd:1px solid var(--line);
}
body{background:var(--page);background-attachment:scroll;color:var(--ink);min-height:100vh}
header.top{background:var(--hdr-bg);color:var(--hdr-ink);border-bottom:var(--hdr-border);margin:0 -14px 12px;padding:10px 14px}
header.top .icon-btn{color:var(--hdr-ink)}
header.top .logo{color:var(--hdr-ink)}
header.top .logo small{color:inherit;opacity:.8}
.logo-mark{font-family:var(--logo-font);font-size:var(--logo-size);line-height:1;font-weight:400}
.logo-mark .lm2{font-family:var(--logo2-font);font-size:var(--logo2-size)}
#splash .big-logo{font-size:clamp(2.6rem,10vw,3.8rem)}
#splash{color:var(--ink)}
.daybar{color:var(--muted)} .daybar b{font-family:var(--logo-font);color:var(--ink)}
.field label{font-family:var(--label-font);color:var(--label-ink);font-size:var(--label-size);text-transform:var(--label-tt);letter-spacing:var(--label-ls);font-weight:400}
.field input{background:var(--field-bg);color:var(--field-ink);border:var(--field-bw) solid var(--field-bd);border-radius:var(--field-r);font-family:var(--field-font);box-shadow:var(--field-shadow);font-weight:600}
.field input::placeholder{color:var(--ph);font-weight:400}
.field .toggle{color:var(--field-ink)}
.listbox{background:#fff;color:#15171a}
.btn{background:var(--btn-bg);color:var(--btn-ink);font-family:var(--btn-font);border:var(--btn-bd);box-shadow:var(--btn-shadow);text-shadow:var(--btn-ts);text-transform:var(--btn-tt);letter-spacing:var(--btn-ls);font-size:var(--btn-size);font-weight:400}
.btn:disabled{background:var(--btn-bg);color:var(--btn-ink);box-shadow:var(--btn-shadow);opacity:.5;filter:saturate(.75);cursor:not-allowed}
.btn.secondary{background:var(--panel);color:var(--panel-ink);border:var(--panel-bd);box-shadow:none;text-shadow:none}
.photo-dots button{border-color:var(--thumb-bd);opacity:.75}
.photo-dots button[aria-pressed="true"]{border-color:var(--thumb-on);opacity:1}
.badge-tt,.mode-pill,.archive-pill{background:var(--badge-bg);color:var(--badge-ink);border:var(--badge-bd);font-family:var(--badge-font)}
.era-strip{height:var(--strip-h);background:var(--strip);border-radius:6px;margin:0 0 10px}
.era-strip-b{margin:10px 0 0}
.results,.ended,.you,.points-box div,.share pre,.modal .sheet{background:var(--panel);color:var(--panel-ink);border:var(--panel-bd)}
.results .caption,.row .k,.row .v small,.points-box span,.attrib,.next,.hint,.photo-credit{color:var(--muted)}
.score,.modal h2,.ended h2{font-family:var(--logo-font)}
.hint,.photo-credit,.next{color:var(--muted)}
footer.foot,footer.foot a{color:var(--muted)}
@media (min-width:1000px){
  #game.wrap{background:var(--card);background-image:var(--card-img,none);border-radius:22px;box-shadow:0 30px 80px rgba(0,0,0,.35);overflow:hidden}
  header.top{margin:0 -34px 18px;padding:14px 34px}
}

/* ===================== 1950s — chrome diner ===================== */
[data-theme="1950s"]{
  --accent:#d62839; --ink:#2b1d1f; --muted:#6b4f50; --line:#e6c9c4;
  --page:conic-gradient(#2b2b2b 25%,#f4ecdc 0 50%,#2b2b2b 0 75%,#f4ecdc 0) 0 0/144px 144px;   /* 72px diner-floor squares (48px on phones) */
  --card:#fbf3e4; --card-img:radial-gradient(circle,#f3d9d4 1.5px,transparent 2px) 0 0/18px 18px;
  --hdr-bg:linear-gradient(#5fd0c5,#3fb5aa); --hdr-ink:#fff; --hdr-border:4px solid #c9ced3;
  --logo-font:'Pacifico',cursive; --logo-size:1.6rem;
  --label-font:'Alfa Slab One',serif; --label-ink:#d62839; --label-size:.9rem; --label-ls:.04em;
  --field-bg:#fffdf7; --field-ink:#2b1d1f; --field-bd:#9aa3a8; --field-bw:3px; --field-r:14px; --field-shadow:inset 0 2px 0 #e9ecee,0 2px 0 #c9ced3;
  --btn-bg:linear-gradient(#ff5a67,#d62839 60%,#a51c2b); --btn-ink:#fff; --btn-font:'Alfa Slab One',serif; --btn-bd:3px solid #e9ecee; --btn-shadow:0 0 0 3px #9aa3a8,0 5px 0 #7a1420; --btn-ts:0 2px 0 #7a1420; --btn-ls:.04em;
  --thumb-bd:#c9ced3; --thumb-on:#d62839;
  --badge-bg:#5fd0c5; --badge-ink:#13403c; --badge-bd:2px solid #fff; --badge-font:'Alfa Slab One',serif;
  --strip:conic-gradient(#d62839 25%,#fff 0 50%,#d62839 0 75%,#fff 0) 0 0/16px 16px; --strip-h:16px;
  --panel:#fffaf0; --panel-ink:#2b1d1f; --panel-bd:3px solid #c9ced3;
}
[data-theme="1950s"] .logo-mark{color:#fff;text-shadow:0 2px 0 #d62839,0 3px 0 #a51c2b,0 6px 10px rgba(0,0,0,.25)}
[data-theme="1950s"] #splash .logo-mark{color:#d62839;text-shadow:3px 3px 0 #fff,6px 6px 0 #5fd0c5}
[data-theme="1950s"] #splash{background:radial-gradient(ellipse at center,#fbf3e4 0 45%,transparent 46%)}
@media (max-width:999px){ [data-theme="1950s"]{--page:conic-gradient(#2b2b2b 25%,#f4ecdc 0 50%,#2b2b2b 0 75%,#f4ecdc 0) 0 0/96px 96px} }

/* ===================== 1960s — mod / op-art ===================== */
[data-theme="1960s"]{
  --accent:#e85d04; --ink:#1d2b2a; --muted:#4f5d4a; --line:#d7cfb5;
  --page:repeating-radial-gradient(circle at 0 0,#e85d04 0 18px,#f6e7c1 18px 36px,#2a9d8f 36px 54px,#f6e7c1 54px 72px,#e9c46a 72px 90px,#f6e7c1 90px 108px);
  --card:#fff6e0; --card-img:none;
  --hdr-bg:linear-gradient(90deg,#e85d04 0 25%,#e9c46a 25% 50%,#2a9d8f 50% 75%,#264653 75%); --hdr-ink:#fff; --hdr-border:4px solid #264653;
  --logo-font:'Righteous',sans-serif; --logo-size:1.6rem;
  --label-font:'Josefin Sans',sans-serif; --label-ink:#264653; --label-size:.9rem; --label-tt:uppercase; --label-ls:.18em;
  --field-bg:#fff; --field-ink:#1d2b2a; --field-bd:#264653; --field-bw:3px; --field-r:999px;
  --btn-bg:#e85d04; --btn-ink:#fff; --btn-font:'Righteous',sans-serif; --btn-bd:3px solid #264653; --btn-shadow:6px 6px 0 #2a9d8f; --btn-ls:.06em;
  --thumb-bd:#264653; --thumb-on:#e85d04;
  --badge-bg:#e9c46a; --badge-ink:#264653; --badge-bd:2px solid #264653; --badge-font:'Josefin Sans',sans-serif;
  --strip:radial-gradient(circle,#e85d04 0 6px,#fff6e0 6px 9px,#2a9d8f 9px 12px,transparent 12px) 0 50%/26px 26px; --strip-h:26px;
  --panel:#fff; --panel-ink:#1d2b2a; --panel-bd:3px solid #264653;
}
[data-theme="1960s"] header.top .logo-mark{text-shadow:3px 3px 0 #264653}
[data-theme="1960s"] #splash .logo-mark{color:#e85d04;text-shadow:4px 4px 0 #2a9d8f,8px 8px 0 #264653}
[data-theme="1960s"] #splash{background:radial-gradient(circle at center,#fff6e0 0 38%,transparent 38.5%)}

/* ===================== 1970s — groovy stripes ===================== */
[data-theme="1970s"]{
  --accent:#d9772b; --ink:#3b2314; --muted:#6d4a2f; --line:#d9b98f;
  --page:linear-gradient(180deg,#4a2a17 0 30%,#e9a23b 30% 40%,#d9772b 40% 50%,#a8461b 50% 60%,#6b3a1f 60% 70%,#4a2a17 70%);
  --card:#f6e3bf; --card-img:repeating-linear-gradient(90deg,rgba(107,58,31,.05) 0 2px,transparent 2px 9px);
  --hdr-bg:linear-gradient(180deg,#e9a23b 0 25%,#d9772b 25% 50%,#a8461b 50% 75%,#6b3a1f 75%); --hdr-ink:#fff4dc; --hdr-border:0;
  --logo-font:'Shrikhand',serif; --logo-size:1.6rem;
  --label-font:'Fredoka',sans-serif; --label-ink:#a8461b; --label-size:.98rem; --label-ls:.01em;
  --field-bg:#fff8ea; --field-ink:#3b2314; --field-bd:#6b3a1f; --field-bw:3px; --field-r:18px; --field-font:'Fredoka',sans-serif;
  --btn-bg:#d9772b; --btn-ink:#fff8ea; --btn-font:'Shrikhand',serif; --btn-bd:3px solid #6b3a1f; --btn-shadow:0 5px 0 #a8461b,0 10px 0 #6b3a1f; --btn-size:1.15rem;
  --thumb-bd:#6b3a1f; --thumb-on:#e9a23b;
  --badge-bg:#e9a23b; --badge-ink:#3b2314; --badge-bd:2px solid #6b3a1f; --badge-font:'Fredoka',sans-serif;
  --strip:linear-gradient(180deg,#e9a23b 0 25%,#d9772b 25% 50%,#a8461b 50% 75%,#6b3a1f 75%); --strip-h:20px;
  --panel:#fff3dc; --panel-ink:#3b2314; --panel-bd:3px solid #6b3a1f;
}
[data-theme="1970s"] .logo-mark{color:#ffd166;text-shadow:2px 2px 0 #d9772b,4px 4px 0 #a8461b,6px 6px 0 #4a2a17}
[data-theme="1970s"] #splash .big-logo{color:#ffd166}
[data-theme="1970s"] #splash{background:radial-gradient(ellipse at center,#f6e3bf 0 42%,transparent 42.5%)}
[data-theme="1970s"] .field label{font-weight:700}

/* ===================== 1980s — synthwave ===================== */
[data-theme="1980s"]{
  --accent:#ff2e88; --ink:#f3e9ff; --muted:#c9b6ef; --line:#5a3a8f;
  --page:repeating-linear-gradient(90deg,rgba(255,46,136,.55) 0 2px,transparent 2px 60px) 0 100%/100% 34% no-repeat,repeating-linear-gradient(0deg,rgba(255,46,136,.55) 0 2px,transparent 2px 28px) 0 100%/100% 34% no-repeat,radial-gradient(circle at 50% 66%,#ffd35a 0 70px,#ff7a59 70px 110px,transparent 111px),linear-gradient(#0b0626 0%,#241052 40%,#7b1f7a 62%,#14062e 66%);
  --card:#140a33; --card-img:linear-gradient(rgba(255,46,136,.08) 1px,transparent 1px) 0 0/100% 26px;
  --hdr-bg:linear-gradient(#1b0d44,#2b1060); --hdr-ink:#f3e9ff; --hdr-border:2px solid #ff2e88;
  --logo-font:'Orbitron',sans-serif; --logo2-font:'Mr Dafoe',cursive; --logo-size:1.35rem; --logo2-size:1.75em;
  --label-font:'Mr Dafoe',cursive; --label-ink:#e0157a; --label-size:1.55rem; --label-ls:0;
  --field-bg:#fffaf0; --field-ink:#1d1236; --field-bd:#d8cdb4; --field-bw:1px; --field-r:3px; --field-font:'Orbitron',sans-serif; --ph:#8a8070;
  --btn-bg:linear-gradient(#ff5fa8,#ff2e88 55%,#c2107a); --btn-ink:#fff; --btn-font:'Orbitron',sans-serif; --btn-bd:2px solid #ffb3da; --btn-shadow:0 0 12px #ff2e88,0 0 30px rgba(255,46,136,.7),inset 0 0 8px rgba(255,255,255,.5); --btn-ts:0 0 8px #fff; --btn-tt:uppercase; --btn-ls:.12em;
  --thumb-bd:#4b2c86; --thumb-on:#20e3ff;
  --badge-bg:#20e3ff; --badge-ink:#14062e; --badge-bd:0; --badge-font:'Orbitron',sans-serif;
  --strip:linear-gradient(90deg,#20e3ff,#ff2e88,#ffd35a); --strip-h:6px;
  --panel:#1d1046; --panel-ink:#f3e9ff; --panel-bd:1px solid #ff2e88;
}
[data-theme="1980s"] .logo-mark .lm1{font-weight:900;font-style:italic;background:linear-gradient(180deg,#ffffff 0%,#bfe8ff 38%,#3a4d8f 50%,#ffffff 52%,#ffc7f0 80%,#ffffff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 6px rgba(32,227,255,.7));letter-spacing:.03em}
[data-theme="1980s"] .logo-mark .lm2{color:#ff2e88;text-shadow:0 0 6px #ff2e88,0 0 18px #ff2e88;margin-left:-.1em;vertical-align:-.12em;display:inline-block;transform:rotate(-6deg)}
[data-theme="1980s"] .field{background:#fbf3df;padding:10px 12px 12px;border-radius:2px;box-shadow:0 6px 14px rgba(0,0,0,.45);position:relative;transform:rotate(-.4deg)}
[data-theme="1980s"] .field:nth-child(even){transform:rotate(.5deg)}
[data-theme="1980s"] .field::before{content:"";position:absolute;top:-9px;left:50%;width:84px;height:20px;margin-left:-42px;background:rgba(255,230,140,.75);transform:rotate(-3deg);box-shadow:0 1px 2px rgba(0,0,0,.2)}
[data-theme="1980s"] .field label{line-height:1;margin-bottom:2px}
[data-theme="1980s"] .field input{border:0;border-bottom:2px solid #c8bfa6;border-radius:0;background:transparent}
[data-theme="1980s"] form.guess{gap:18px;padding-top:6px}
[data-theme="1980s"] .hint{color:#f3c7ff}
[data-theme="1980s"] #splash .big-logo{font-size:clamp(2.2rem,9vw,3.4rem)}

/* ===================== 1990s — jazz squiggle / windbreaker ===================== */
[data-theme="1990s"]{
  --accent:#e6007e; --ink:#1b1464; --muted:#4a3f8f; --line:#b9a8e6;
  --jazz:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='360' viewBox='0 0 520 360'%3E%3Cpath d='M-10 230 C 60 150 140 300 230 210 S 380 120 540 190' fill='none' stroke='%2300b3b3' stroke-width='46' stroke-linecap='round' opacity='.9'/%3E%3Cpath d='M-10 250 C 60 175 140 320 230 232' fill='none' stroke='%23007f86' stroke-width='10' stroke-linecap='round' opacity='.5'/%3E%3Cpath d='M20 90 q 25 -40 50 0 t 50 0 t 50 0 t 50 0 t 50 0 t 50 0 t 50 0 t 50 0 t 50 0' fill='none' stroke='%237a2ea8' stroke-width='9' stroke-linecap='round'/%3E%3Cpath d='M300 320 l 22 -36 l 22 36 z' fill='%23e6007e'/%3E%3Cpath d='M70 320 l 16 -26 l 16 26 z' fill='%23ffd23f'/%3E%3Ccircle cx='450' cy='60' r='14' fill='none' stroke='%23e6007e' stroke-width='6'/%3E%3Cpath d='M400 300 l 40 0' stroke='%231b1464' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E");
  --page:var(--jazz) 0 0/520px 360px,#f4fbfb;
  --card:#ffffff; --card-img:var(--jazz) 0 0/520px 360px;
  --hdr-bg:linear-gradient(135deg,#7a2ea8 0 22%,transparent 22%) 0 0/50% 100% no-repeat,linear-gradient(225deg,#7a2ea8 0 22%,transparent 22%) 100% 0/50% 100% no-repeat,linear-gradient(135deg,#1b1464 0 34%,#00b3b3 34% 52%,#e6007e 52% 70%,#1b1464 70%) 0 0/50% 100% no-repeat,linear-gradient(225deg,#1b1464 0 34%,#00b3b3 34% 52%,#e6007e 52% 70%,#1b1464 70%) 100% 0/50% 100% no-repeat;
  --hdr-ink:#fff; --hdr-border:4px solid #ffd23f;
  --logo-font:'Bowlby One',sans-serif; --logo-size:1.45rem;
  --label-font:'Archivo Black',sans-serif; --label-ink:#00a0a0; --label-size:.92rem; --label-tt:uppercase; --label-ls:.06em;
  --field-bg:#fff; --field-ink:#1b1464; --field-bd:#7a2ea8; --field-bw:3px; --field-r:6px; --field-shadow:4px 4px 0 #00b3b3;
  --btn-bg:linear-gradient(180deg,#ffc2e6 0%,#ff6ec7 46%,#e6007e 54%,#ff4fb3 100%); --btn-ink:#fff; --btn-font:'Bowlby One',sans-serif; --btn-bd:3px solid #fff; --btn-shadow:0 0 0 3px #7a2ea8,0 6px 0 3px #4a1670,inset 0 8px 10px rgba(255,255,255,.55); --btn-ts:2px 2px 0 #7a2ea8; --btn-tt:uppercase; --btn-ls:.03em;
  --thumb-bd:#00b3b3; --thumb-on:#e6007e;
  --badge-bg:#ffd23f; --badge-ink:#1b1464; --badge-bd:2px solid #1b1464; --badge-font:'Archivo Black',sans-serif;
  --strip:linear-gradient(135deg,#7a2ea8 25%,transparent 25%) -14px 0/28px 28px,linear-gradient(225deg,#e6007e 25%,transparent 25%) -14px 0/28px 28px,linear-gradient(315deg,#00b3b3 25%,transparent 25%) 0 0/28px 28px,linear-gradient(45deg,#1b1464 25%,#ffd23f 25%) 0 0/28px 28px; --strip-h:18px;
  --panel:#fff; --panel-ink:#1b1464; --panel-bd:3px solid #7a2ea8;
}
[data-theme="1990s"] .logo-mark{font-style:italic;display:inline-block;transform:skewX(-12deg);color:#fff;-webkit-text-stroke:1.5px #1b1464;text-shadow:3px 3px 0 #e6007e,5px 5px 0 #1b1464;letter-spacing:.02em}
[data-theme="1990s"] #splash .logo-mark{color:#00e0e0;-webkit-text-stroke:2.5px #1b1464;text-shadow:5px 5px 0 #e6007e,9px 9px 0 #1b1464}
[data-theme="1990s"] .field label,[data-theme="1990s"] .btn{font-style:italic}
[data-theme="1990s"] .field label{display:inline-block;transform:skewX(-8deg);background:#1b1464;color:#fff;padding:2px 8px;font-size:.78rem}
[data-theme="1990s"] #splash{background:radial-gradient(ellipse at center,rgba(255,255,255,.92) 0 40%,transparent 41%)}

/* 2000s — base section near the end; the live look is "FINAL 2000s — Sky Aero" at the very end */

/* ===================== 2010s — flat design ===================== */
[data-theme="2010s"]{
  --accent:#e74c3c; --ink:#2c3e50; --muted:#5d6d7e; --line:#d5dbdf;
  --page:linear-gradient(135deg,#1abc9c 0 25%,transparent 25%) 0 0/160px 160px,linear-gradient(225deg,#3498db 0 25%,transparent 25%) 0 0/160px 160px,linear-gradient(315deg,#f1c40f 0 25%,transparent 25%) 0 0/160px 160px,linear-gradient(45deg,#e74c3c 0 25%,#2c3e50 25%) 0 0/160px 160px;
  --card:#ffffff;
  --hdr-bg:#1abc9c; --hdr-ink:#fff; --hdr-border:0;
  --logo-font:'Montserrat',sans-serif; --logo-size:1.4rem;
  --label-font:'Montserrat',sans-serif; --label-ink:#2c3e50; --label-size:.78rem; --label-tt:uppercase; --label-ls:.14em;
  --field-bg:#ecf0f1; --field-ink:#2c3e50; --field-bd:#ecf0f1; --field-bw:0 0 3px 0; --field-r:0; --field-font:'Montserrat',sans-serif;
  --btn-bg:#e74c3c; --btn-ink:#fff; --btn-font:'Montserrat',sans-serif; --btn-bd:0; --btn-shadow:0 4px 0 #c0392b; --btn-tt:uppercase; --btn-ls:.12em; --btn-size:1rem;
  --thumb-bd:#ecf0f1; --thumb-on:#1abc9c;
  --badge-bg:#f1c40f; --badge-ink:#2c3e50; --badge-bd:0; --badge-font:'Montserrat',sans-serif;
  --strip:linear-gradient(90deg,#1abc9c 0 25%,#3498db 25% 50%,#f1c40f 50% 75%,#e74c3c 75%); --strip-h:8px;
  --panel:#fff; --panel-ink:#2c3e50; --panel-bd:0;
}
[data-theme="2010s"] .field input{border:0;border-bottom:3px solid #1abc9c;font-weight:600}
[data-theme="2010s"] .field label,[data-theme="2010s"] .logo-mark,[data-theme="2010s"] .btn{font-weight:800}
[data-theme="2010s"] .logo-mark{text-transform:uppercase;letter-spacing:.06em;text-shadow:1px 1px 0 #16a085,2px 2px 0 #16a085,3px 3px 0 #16a085,4px 4px 0 #16a085,5px 5px 0 #16a085,6px 6px 0 #16a085}
[data-theme="2010s"] #splash .logo-mark{color:#fff}
[data-theme="2010s"] #splash{background:linear-gradient(#1abc9c,#1abc9c) center/min(560px,92vw) min(620px,92vh) no-repeat;color:#fff}
[data-theme="2010s"] #splash .tag,[data-theme="2010s"] #splash .meta span,[data-theme="2010s"] .splash-links button,[data-theme="2010s"] .mode-note{color:#eafff9}
[data-theme="2010s"] .results,[data-theme="2010s"] .modal .sheet{box-shadow:0 2px 0 #d5dbdf}
[data-theme="2010s"] .btn,[data-theme="2010s"] .photo-dots button{border-radius:2px}

/* 2020s — see "2020s — Liquid Glass" section at the end of this file */
/* mobile: themed page shows around a slim content area */
@media (max-width:999px){
  #game.wrap{padding:0 12px 30px}
  header.top{margin:0 -12px 12px;padding:10px 12px}
  .puzzle-grid>#play{background:var(--card);background-image:var(--card-img,none);border-radius:16px;padding:12px;margin-top:12px;box-shadow:0 8px 24px rgba(0,0,0,.25)}
  .daybar{background:var(--card);border-radius:10px;padding:6px 10px}
  .photo-credit{background:var(--card);border-radius:8px;padding:4px 8px}
  footer.foot{background:var(--card);border-radius:12px;padding:10px}
}
/* open dropdowns must sit above later fields/buttons even when a theme transforms .field (new stacking context) */
.field{position:relative}
.field:focus-within{z-index:30}
.field input,.inline-form input,#play,.results{box-sizing:border-box}

/* ===================== Stand-out edges (Jordan: "black or white border around the text boxes and picture") =====================
   --edge: solid high-contrast outline for the photo frame, every input/combobox and the form panel.
   Black on light themes, white on dark ones. --form-bg is a SOLID backing (no pattern) behind labels + fields. */
:root{--edge:#111;--edge-w:3px;--edge-shadow:4px 4px 0 rgba(0,0,0,.28);--form-bg:#fff;--form-ink:var(--ink)}
[data-theme="1950s"]{--form-bg:#fffaf0}
[data-theme="1960s"]{--form-bg:#fffdf6}
[data-theme="1970s"]{--form-bg:#fff6e4}
[data-theme="1980s"]{--edge:#fff;--edge-shadow:4px 4px 0 #ff2e88;--form-bg:#1d1046;--form-ink:#f3e9ff}
[data-theme="1990s"]{--form-bg:#fff}
[data-theme="2010s"]{--form-bg:#fff}
@media (max-width:999px){ :root{--edge-w:2px;--edge-shadow:3px 3px 0 rgba(0,0,0,.28)} [data-theme="1980s"]{--edge-shadow:3px 3px 0 #ff2e88} }

/* photo frame */
.viewer{border:var(--edge-w) solid var(--edge);box-shadow:var(--edge-shadow)}
.photo-dots button{border-width:2px;border-style:solid;border-color:var(--edge)}
.photo-dots button[aria-pressed="true"]{outline:3px solid var(--thumb-on);outline-offset:1px}
.photo-credit{background:var(--form-bg);color:var(--form-ink);border:1.5px solid var(--edge);border-radius:8px;padding:4px 8px}

/* solid form panel: labels + fields never sit directly on a busy pattern */
form.guess{background:var(--form-bg);color:var(--form-ink);border:var(--edge-w) solid var(--edge);border-radius:var(--panel-r,14px);padding:14px 16px 16px;box-shadow:var(--edge-shadow)}
form.guess .hint{color:var(--form-ink);opacity:.85}
.results{border:var(--edge-w) solid var(--edge) !important;box-shadow:var(--edge-shadow)}
.daybar{background:var(--form-bg);color:var(--form-ink);border:1.5px solid var(--edge);border-radius:10px;padding:6px 10px}
.daybar b{color:var(--form-ink)}

/* every input/combobox: solid high-contrast outline + subtle offset shadow; focus = thicker accent ring */
.field input{border:var(--edge-w) solid var(--edge) !important;box-shadow:3px 3px 0 rgba(0,0,0,.18)}
.field input:focus,.field input:focus-visible{outline:none;border-color:var(--edge) !important;box-shadow:0 0 0 3px var(--accent),0 0 0 6px color-mix(in srgb,var(--accent) 35%,transparent)}
.inline-form input{border:2px solid var(--edge)}
.inline-form input:focus{outline:none;box-shadow:0 0 0 3px var(--accent)}
.btn:focus-visible{outline:3px solid var(--edge);outline-offset:3px}

/* 1980s: sticky-note fields keep their look, but each note gets the white edge; inputs on the cream note get a dark edge */
[data-theme="1980s"] .field{border:2px solid #fff}
[data-theme="1980s"] .field input{border:2px solid #1d1236 !important;border-radius:3px;background:#fffef8;box-shadow:none}
[data-theme="1980s"] .field input:focus{box-shadow:0 0 0 3px #ff2e88,0 0 0 6px rgba(32,227,255,.6)}
/* 2010s flat inputs: keep the flat fill, add the full edge */
[data-theme="2010s"] .field input{border:var(--edge-w) solid var(--edge) !important;border-bottom-width:calc(var(--edge-w) + 2px) !important}

/* mobile: the play column becomes a solid (pattern-free) card */
@media (max-width:999px){
  .puzzle-grid>#play{background:var(--form-bg);background-image:none;padding:0;box-shadow:none;border-radius:0}
  form.guess{margin-top:12px}
  footer.foot{border:1.5px solid var(--edge)}
}
[data-theme="1960s"]{--panel-r:26px} [data-theme="2010s"]{--panel-r:2px} [data-theme="1980s"]{--panel-r:6px} [data-theme="1990s"]{--panel-r:6px}
/* photo: double ring (edge + opposite colour) so it pops on any backdrop, incl. phone layouts where it sits on the page pattern */
:root{--edge-alt:#fff} [data-theme="1980s"]{--edge-alt:#111}
.viewer{box-shadow:0 0 0 2px var(--edge-alt),var(--edge-shadow)}
@media (max-width:999px){ .photo-dots button{box-shadow:0 0 0 1.5px var(--edge-alt)} }
@media (max-width:440px){ [data-theme="2010s"] .logo-mark{letter-spacing:.01em;font-size:1rem} }
@media (max-width:999px){ .puzzle-grid>#play{background:transparent} }

/* ===================== 2000s — silhouette color-block =====================
   Flat saturated poster panels with ORIGINAL generic car silhouettes + thin white accents (pinstripes, headlight glints, speed lines) (public/img/2000s/*.svg, drawn for
   this project — no third-party artwork, devices, logos or product names). Black card like a poster background; bold
   humanist sans (Source Sans 3, OFL) everywhere. Edges: white on the black card, black inside the white form panel. */
[data-theme="2000s"]{
  --accent:#ff2d8a; --ink:#fff; --muted:#d9d9d9; --line:#3a3a3a;
  --font-body:'Source Sans 3',system-ui,sans-serif;
  --page:url(../img/2000s/grid.svg) 0 0/720px 576px,#000;
  --card:#000; --card-img:none;
  --hdr-bg:linear-gradient(90deg,#ff2d8a 0 20%,#8fd400 20% 40%,#00aeef 40% 60%,#ffd200 60% 80%,#ff7a00 80%); --hdr-ink:#000; --hdr-border:0;
  --logo-font:'Source Sans 3',sans-serif; --logo-size:1.75rem;
  --label-font:'Source Sans 3',sans-serif; --label-ink:#000; --label-size:.92rem; --label-ls:0; --label-tt:lowercase;
  --field-bg:#fff; --field-ink:#000; --field-bd:#000; --field-r:10px; --field-font:'Source Sans 3',sans-serif; --ph:#6d6d6d;
  --btn-bg:#000; --btn-ink:#fff; --btn-font:'Source Sans 3',sans-serif; --btn-bd:0; --btn-shadow:4px 4px 0 #ff2d8a; --btn-tt:lowercase; --btn-ls:-.01em; --btn-size:1.2rem;
  --thumb-bd:#fff; --thumb-on:#8fd400;
  --badge-bg:#8fd400; --badge-ink:#000; --badge-bd:0; --badge-font:'Source Sans 3',sans-serif;
  --strip:url(../img/2000s/grid.svg) 0 0/auto 200% repeat-x; --strip-h:64px;
  --panel:#fff; --panel-ink:#000; --panel-bd:3px solid #fff;
  --edge:#fff; --edge-alt:#000; --edge-shadow:5px 5px 0 #ff2d8a; --form-bg:#fff; --form-ink:#000; --panel-r:14px;
}
[data-theme="2000s"] body{font-family:var(--font-body)}
[data-theme="2000s"] .logo-mark{font-weight:900;letter-spacing:-.045em;text-transform:lowercase;color:#000}
[data-theme="2000s"] .logo-mark .lm2{color:#fff;-webkit-text-stroke:0;text-shadow:none;background:#000;padding:0 .2em .06em;border-radius:.2em;margin-left:.05em}
[data-theme="2000s"] header.top .logo small{font-family:var(--font-body);font-weight:700;opacity:1}
[data-theme="2000s"] #splash .logo-mark{color:#fff}
[data-theme="2000s"] #splash .logo-mark .lm2{background:#ff2d8a;color:#000}
[data-theme="2000s"] #splash{background:linear-gradient(#000,#000) center/min(540px,94vw) min(660px,94vh) no-repeat;color:#fff}
[data-theme="2000s"] #splash .tag,[data-theme="2000s"] #splash .meta,[data-theme="2000s"] .splash-links button,[data-theme="2000s"] .mode-note{color:#f0f0f0}
[data-theme="2000s"] .field label,[data-theme="2000s"] .btn,[data-theme="2000s"] .badge-tt,[data-theme="2000s"] .mode-pill,[data-theme="2000s"] .score,[data-theme="2000s"] .modal h2{font-weight:900}
[data-theme="2000s"] .field label{display:inline-block;padding:1px 12px 2px;border-radius:999px;background:#ff2d8a;margin-bottom:4px}
[data-theme="2000s"] .field:nth-child(2) label{background:#8fd400}
[data-theme="2000s"] .field:nth-child(3) label{background:#00aeef}
[data-theme="2000s"] .field:nth-child(4) label{background:#ffd200}
[data-theme="2000s"] .field input{border:3px solid #000 !important;box-shadow:none;font-weight:700}
[data-theme="2000s"] .field input:focus{box-shadow:0 0 0 3px #fff,0 0 0 6px #ff2d8a}
[data-theme="2000s"] .btn{border-radius:999px}
[data-theme="2000s"] .btn.secondary{background:#fff;color:#000;border:3px solid #000}
[data-theme="2000s"] .era-strip{border-radius:8px;border:2px solid #fff}
[data-theme="2000s"] .viewer{border-radius:14px}
[data-theme="2000s"] .daybar,[data-theme="2000s"] .photo-credit{border:2px solid #fff}
[data-theme="2000s"] footer.foot,[data-theme="2000s"] footer.foot a{color:#e6e6e6}
@media (max-width:999px){
  [data-theme="2000s"]{--page:url(../img/2000s/grid-tall.svg) 0 0/360px 648px,#000; --edge-shadow:3px 3px 0 #ff2d8a; --strip-h:48px; --logo-size:1.45rem}
  [data-theme="2000s"] .field input{border-width:2px !important}
  [data-theme="2000s"] footer.foot{border:2px solid #fff}
}

[data-theme="2000s"] #splash .btn{background:#ff2d8a;color:#000;box-shadow:4px 4px 0 #8fd400}

/* white panels on the black card: switch secondary text back to dark grey */
[data-theme="2000s"] .results,[data-theme="2000s"] .ended,[data-theme="2000s"] .modal .sheet,[data-theme="2000s"] form.guess,[data-theme="2000s"] .daybar,[data-theme="2000s"] .photo-credit{--muted:#454545;--ink:#000}

/* ===================== 2020s — Liquid Glass =====================
   Frosted translucent panels (backdrop blur + saturate) over vivid soft colour blobs, specular top/left edge highlights,
   big radii, pill buttons, floating glass controls. Inter (OFL) throughout. For this theme the heavy black outline is
   replaced by a crisp light edge + a dark outer hairline; panel opacity keeps text contrast; opaque fallback without
   backdrop-filter; dark-mode variant. */
[data-theme="2020s"]{
  --accent:#0a6cff; --ink:#0b0b14; --muted:#3a3d4a; --line:rgba(255,255,255,.6);
  --font-body:'Inter',system-ui,sans-serif;
  --page:radial-gradient(38vmax 38vmax at 12% 18%,#ff5f8f,transparent 70%),radial-gradient(40vmax 40vmax at 88% 12%,#5b7cff,transparent 70%),
         radial-gradient(42vmax 42vmax at 78% 86%,#00d6b0,transparent 70%),radial-gradient(36vmax 36vmax at 18% 88%,#ffb340,transparent 70%),
         radial-gradient(30vmax 30vmax at 50% 50%,#b66dff,transparent 72%),#e8ebff;
  --glass:rgba(255,255,255,.58); --glass-strong:rgba(255,255,255,.74); --glass-blur:blur(26px) saturate(185%);
  --glass-edge:rgba(255,255,255,.9); --glass-hair:rgba(10,12,30,.22); --glass-spec:rgba(255,255,255,.95);
  --glass-shadow:inset 1px 1px 0 var(--glass-spec),inset -1px -1px 0 rgba(255,255,255,.25),0 0 0 1px var(--glass-hair),0 14px 36px rgba(20,24,60,.18);
  --sheen:linear-gradient(135deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.12) 38%,rgba(255,255,255,0) 60%);
  --card:transparent; --card-img:none;
  --hdr-bg:transparent; --hdr-ink:var(--ink); --hdr-border:0;
  --logo-font:'Inter',sans-serif; --logo-size:1.45rem;
  --label-font:'Inter',sans-serif; --label-ink:var(--ink); --label-size:.86rem; --label-ls:-.005em;
  --field-bg:rgba(255,255,255,.8); --field-ink:#0b0b14; --field-r:16px; --field-font:'Inter',sans-serif; --ph:#5d6070;
  --btn-bg:linear-gradient(180deg,rgba(255,255,255,.38),rgba(255,255,255,0) 55%),#0a6cff; --btn-ink:#fff; --btn-font:'Inter',sans-serif;
  --btn-bd:1px solid rgba(255,255,255,.75); --btn-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 0 0 1px rgba(0,30,90,.25),0 10px 24px rgba(10,108,255,.35);
  --thumb-bd:rgba(255,255,255,.85); --thumb-on:#0a6cff;
  --badge-bg:rgba(255,255,255,.7); --badge-ink:#0b0b14; --badge-bd:1px solid rgba(255,255,255,.95); --badge-font:'Inter',sans-serif;
  --strip:none; --strip-h:0px;
  --panel:var(--glass-strong); --panel-ink:#0b0b14; --panel-bd:1px solid var(--glass-edge);
  --edge:var(--glass-edge); --edge-w:1.5px; --edge-alt:var(--glass-hair); --edge-shadow:0 14px 36px rgba(20,24,60,.18);
  --form-bg:var(--glass); --form-ink:#0b0b14; --panel-r:30px;
}
[data-theme="2020s"] body{font-family:var(--font-body);background-attachment:fixed}
/* every glass surface */
[data-theme="2020s"] header.top,[data-theme="2020s"] .daybar,[data-theme="2020s"] .photo-credit,[data-theme="2020s"] form.guess,
[data-theme="2020s"] .results,[data-theme="2020s"] .ended,[data-theme="2020s"] .modal .sheet,[data-theme="2020s"] footer.foot,
[data-theme="2020s"] .mode-toggle,[data-theme="2020s"] .zoom-ctl button,[data-theme="2020s"] .badge-tt,[data-theme="2020s"] .mode-pill,[data-theme="2020s"] .archive-pill,
[data-theme="2020s"] .points-box div,[data-theme="2020s"] .share pre{
  background:var(--sheen),var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-edge) !important;box-shadow:var(--glass-shadow);color:var(--form-ink)}
[data-theme="2020s"] .results,[data-theme="2020s"] .modal .sheet,[data-theme="2020s"] form.guess{background:var(--sheen),var(--glass-strong)}
[data-theme="2020s"] form.guess,[data-theme="2020s"] .results,[data-theme="2020s"] .modal .sheet,[data-theme="2020s"] .ended{border-radius:30px}
[data-theme="2020s"] .daybar,[data-theme="2020s"] .photo-credit,[data-theme="2020s"] footer.foot{border-radius:20px}
[data-theme="2020s"] header.top{margin:12px 0 16px;padding:10px 16px;border-radius:26px}
[data-theme="2020s"] .logo-mark{font-weight:800;letter-spacing:-.035em}
[data-theme="2020s"] .logo-mark .lm2{background:linear-gradient(90deg,#ff3d7f,#7a5cff 50%,#00b894);-webkit-background-clip:text;background-clip:text;color:transparent}
[data-theme="2020s"] .field label,[data-theme="2020s"] .btn,[data-theme="2020s"] .score,[data-theme="2020s"] .modal h2,[data-theme="2020s"] .daybar b{font-weight:700}
[data-theme="2020s"] .field input{border:1.5px solid rgba(255,255,255,.95) !important;border-radius:16px;
  -webkit-backdrop-filter:blur(12px) saturate(160%);backdrop-filter:blur(12px) saturate(160%);
  box-shadow:inset 1px 1px 0 #fff,inset 0 -1px 0 rgba(255,255,255,.4),0 0 0 1px rgba(10,12,30,.28),0 4px 12px rgba(20,24,60,.10);font-weight:600}
[data-theme="2020s"] .field input:focus{box-shadow:inset 1px 1px 0 #fff,0 0 0 1px rgba(10,12,30,.3),0 0 0 4px #0a6cff,0 0 0 8px rgba(10,108,255,.28)}
[data-theme="2020s"] .btn{border-radius:999px;letter-spacing:-.01em}
[data-theme="2020s"] .btn:focus-visible{outline:3px solid #0a6cff;outline-offset:3px}
[data-theme="2020s"] .btn.secondary{background:var(--sheen),var(--glass-strong);color:#0b0b14}
[data-theme="2020s"] .viewer{border-radius:30px;border:1.5px solid rgba(255,255,255,.9);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),0 0 0 1px var(--glass-hair),0 18px 44px rgba(20,24,60,.28)}
[data-theme="2020s"] .zoom-ctl button{border-radius:999px;color:#0b0b14}
[data-theme="2020s"] .photo-dots button{border:1.5px solid rgba(255,255,255,.95);border-radius:16px;box-shadow:0 0 0 1px var(--glass-hair),0 6px 14px rgba(20,24,60,.15)}
[data-theme="2020s"] .photo-dots button[aria-pressed="true"]{outline:3px solid #0a6cff;outline-offset:2px}
[data-theme="2020s"] .photo-dots button img{border-radius:14px}
[data-theme="2020s"] .badge-tt,[data-theme="2020s"] .mode-pill{border-radius:999px}
[data-theme="2020s"] #splash{background:none}
[data-theme="2020s"] #splash>*{position:relative}
@media (min-width:1000px){
  [data-theme="2020s"] #game.wrap{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.55);box-shadow:inset 1px 1px 0 rgba(255,255,255,.7),0 0 0 1px rgba(10,12,30,.10),0 30px 80px rgba(20,24,60,.18);border-radius:40px;overflow:visible}
  [data-theme="2020s"] header.top{margin:16px -14px 20px;padding:12px 22px}
}
@media (max-width:999px){
  [data-theme="2020s"] header.top{margin:8px 0 12px;padding:8px 12px;border-radius:22px}
  [data-theme="2020s"] .viewer{border-radius:24px}
  [data-theme="2020s"] form.guess,[data-theme="2020s"] .results{border-radius:26px}
}
/* no backdrop-filter: make glass nearly opaque so text keeps contrast */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  [data-theme="2020s"]{--glass:rgba(255,255,255,.9);--glass-strong:rgba(255,255,255,.95)}
}
/* dark-mode Liquid Glass */
@media (prefers-color-scheme:dark){
  [data-theme="2020s"]{
    --ink:#f5f5f7; --muted:#c3c6d2; --credit-ink:#eef0f6;
    --page:radial-gradient(38vmax 38vmax at 12% 18%,#c2185b,transparent 70%),radial-gradient(40vmax 40vmax at 88% 12%,#3046d6,transparent 70%),
           radial-gradient(42vmax 42vmax at 78% 86%,#00897b,transparent 70%),radial-gradient(36vmax 36vmax at 18% 88%,#c77700,transparent 70%),
           radial-gradient(30vmax 30vmax at 50% 50%,#6a2ccc,transparent 72%),#07080f;
    --glass:rgba(22,22,30,.58); --glass-strong:rgba(22,22,30,.72); --glass-edge:rgba(255,255,255,.34); --glass-hair:rgba(0,0,0,.6); --glass-spec:rgba(255,255,255,.45);
    --sheen:linear-gradient(135deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.04) 38%,rgba(255,255,255,0) 60%);
    --field-bg:rgba(10,10,16,.62); --field-ink:#fff; --ph:#a6a9b8; --form-ink:#f5f5f7; --panel-ink:#f5f5f7;
    --badge-bg:rgba(30,30,40,.7); --badge-ink:#f5f5f7; --badge-bd:1px solid rgba(255,255,255,.35); --thumb-bd:rgba(255,255,255,.4); --accent:#3b8bff; --thumb-on:#3b8bff;
  }
  [data-theme="2020s"] .field input{border-color:rgba(255,255,255,.38) !important;box-shadow:inset 1px 1px 0 rgba(255,255,255,.3),0 0 0 1px rgba(0,0,0,.65)}
  [data-theme="2020s"] .field input:focus{box-shadow:0 0 0 1px rgba(0,0,0,.6),0 0 0 4px #3b8bff,0 0 0 8px rgba(59,139,255,.3)}
  [data-theme="2020s"] .zoom-ctl button,[data-theme="2020s"] .btn.secondary{color:#f5f5f7}
  [data-theme="2020s"] #game.wrap{background:rgba(255,255,255,.04)}
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ [data-theme="2020s"]{--glass:rgba(22,22,30,.92);--glass-strong:rgba(22,22,30,.95)} }
}

/* =====================================================================================================================
   FINAL DECADE THEMES (Jordan's picks, Oct 20 2026). These blocks sit on top of the base sections above and win.
   Each selector is html[data-theme="<decade>"]:not(:where([data-preview])) — same specificity as a preview file, but
   switched OFF while ?preview=<decade>-<slug> is active, so every option in themes/options/ still previews exactly as
   designed. Art: public/img/<decade>/ (original). Fonts: OFL, self-hosted in public/fonts/.
   ===================================================================================================================== */
@font-face{font-family:'Oswald';font-weight:400 700;font-display:swap;src:url(../fonts/Oswald-var.woff2) format('woff2')}
@font-face{font-family:'Racing Sans One';font-weight:400;font-display:swap;src:url(../fonts/RacingSansOne-400.woff2) format('woff2')}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:400 900;font-display:swap;src:url(../fonts/NunitoSans-var.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/Poppins-500.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/Poppins-700.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800 900;font-display:swap;src:url(../fonts/Poppins-800.woff2) format('woff2')}

/* ---------- FINAL 1950s — Diner Checkerboard (refined) ---------- */
/* 1950s option 1 — Diner Checkerboard (refined current look)
   Inspiration: chrome-trimmed roadside diners, black/white floor tile, turquoise vinyl booths, cherry-red counter stools.
   Fonts: Pacifico (logo), Alfa Slab One (labels/buttons), Oswald (body) — all OFL, self-hosted. */
html[data-theme="1950s"]:not(:where([data-preview])){
  --font-body:'Oswald',system-ui,sans-serif; --font-display:'Alfa Slab One',serif;
  --accent:#d62839; --ink:#1f1a1b; --muted:#5a4a4b;
  --page:conic-gradient(#161616 25%,#f6f0e2 0 50%,#161616 0 75%,#f6f0e2 0) 0 0/200px 200px;   /* 100px floor tiles */
  --card:#fbf5e8; --card-img:none;
  --hdr-bg:linear-gradient(#5fd0c5,#36b0a5); --hdr-ink:#fff; --hdr-border:0;
  --logo-font:'Pacifico',cursive; --logo-size:1.7rem;
  --label-font:'Alfa Slab One',serif; --label-ink:#d62839; --label-size:.92rem; --label-ls:.05em; --label-tt:uppercase;
  --field-bg:#fff; --field-ink:#1f1a1b; --field-font:'Oswald',sans-serif; --field-r:12px;
  --btn-bg:linear-gradient(#ff4d5c,#d62839 55%,#a51c2b); --btn-ink:#fff; --btn-font:'Alfa Slab One',serif; --btn-bd:3px solid #111;
  --btn-shadow:0 5px 0 #111; --btn-ts:0 2px 0 #7a1420; --btn-ls:.06em; --btn-tt:uppercase;
  --thumb-bd:#111; --thumb-on:#d62839;
  --badge-bg:#5fd0c5; --badge-ink:#0d2f2c; --badge-bd:2px solid #111; --badge-font:'Alfa Slab One',serif;
  --strip:linear-gradient(#111 0 3px,transparent 3px calc(100% - 3px),#111 0),linear-gradient(90deg,#d62839 0 50%,#fff 0) 0 0/24px 100%; --strip-h:14px;
  --panel:#fff; --panel-ink:#1f1a1b; --panel-bd:3px solid #111;
  --edge:#111; --edge-alt:#fff; --edge-shadow:5px 5px 0 #d62839; --form-bg:#fff; --panel-r:16px;
}
html[data-theme="1950s"]:not(:where([data-preview])) body{font-family:var(--font-body)}
/* header: turquoise booth with a chrome rail underneath */
html[data-theme="1950s"]:not(:where([data-preview])) header.top{box-shadow:inset 0 -6px 0 #d8dee2,inset 0 -9px 0 #8d979e,inset 0 -10px 0 #111;padding-bottom:20px}
html[data-theme="1950s"]:not(:where([data-preview])) .logo-mark{color:#fff;text-shadow:2px 2px 0 #d62839,4px 4px 0 #111}
html[data-theme="1950s"]:not(:where([data-preview])) header.top .logo small{font-family:'Oswald',sans-serif;letter-spacing:.14em;text-transform:uppercase;opacity:1;font-weight:600}
html[data-theme="1950s"]:not(:where([data-preview])) #splash .logo-mark{color:#d62839;text-shadow:3px 3px 0 #fff,6px 6px 0 #111}
html[data-theme="1950s"]:not(:where([data-preview])) #splash{background:radial-gradient(ellipse at center,#fbf5e8 0 44%,#111 44.3% 45%,transparent 45.3%)}
html[data-theme="1950s"]:not(:where([data-preview])) .daybar,html[data-theme="1950s"]:not(:where([data-preview])) .daybar b{font-family:'Alfa Slab One',serif}
html[data-theme="1950s"]:not(:where([data-preview])) .field label{letter-spacing:.06em}
html[data-theme="1950s"]:not(:where([data-preview])) .field input{font-size:17px;font-weight:500}
html[data-theme="1950s"]:not(:where([data-preview])) .btn.secondary{background:#fff;color:#111;border:3px solid #111;font-family:'Alfa Slab One',serif}
html[data-theme="1950s"]:not(:where([data-preview])) .mult-now,html[data-theme="1950s"]:not(:where([data-preview])) .hint{font-family:'Oswald',sans-serif}
html[data-theme="1950s"]:not(:where([data-preview])) .era-strip{border-radius:0}
@media (min-width:1000px){ html[data-theme="1950s"]:not(:where([data-preview])) #game.wrap{border:4px solid #111;box-shadow:0 0 0 8px #d8dee2,0 0 0 11px #111,0 30px 80px rgba(0,0,0,.45)} }
@media (max-width:999px){ html[data-theme="1950s"]:not(:where([data-preview])){--page:conic-gradient(#161616 25%,#f6f0e2 0 50%,#161616 0 75%,#f6f0e2 0) 0 0/130px 130px; --edge-shadow:3px 3px 0 #d62839} }
/* splash: solid panel (readable over the busy backdrop) */
html[data-theme="1950s"]:not(:where([data-preview])) #splash{background:linear-gradient(#fbf5e8,#fbf5e8) center/calc(min(400px,92vw) - 8px) calc(min(640px,92vh) - 8px) no-repeat,linear-gradient(#111,#111) center/min(400px,92vw) min(640px,92vh) no-repeat}

/* ---------- FINAL 1960s — Groovy Swirls: fewer daisies + peace signs ---------- */
/* 1960s option 1 — Groovy Swirls (refined current look)
   Inspiration: late-60s flower-power graphics: wavy "groovy" bands, daisies, pill-shaped forms, orange/teal/mustard print palettes.
   Palette: tangerine #e85d04, teal #2a9d8f, mustard #e9c46a, apricot #f4a261, deep teal #264653, cream #fff6e0.
   Fonts: Righteous (logo/buttons), Josefin Sans (labels/body) — OFL. Art: public/img/preview/1960s-groovy/ (original SVG). */
html[data-theme="1960s"]:not(:where([data-preview])){
  --font-body:'Josefin Sans',system-ui,sans-serif; --font-display:'Righteous',sans-serif;
  --accent:#e85d04; --ink:#1d2b2a; --muted:#3f4d4a;
  --page:url(../img/1960s/waves.svg) 0 0/1200px 840px,#fff6e0;
  --card:#fff6e0; --card-img:none;
  --hdr-bg:#264653; --hdr-ink:#fff6e0; --hdr-border:0;
  --logo-font:'Righteous',sans-serif; --logo-size:1.7rem;
  --label-font:'Josefin Sans',sans-serif; --label-ink:#264653; --label-size:.95rem; --label-tt:uppercase; --label-ls:.18em;
  --field-bg:#fff; --field-ink:#1d2b2a; --field-font:'Josefin Sans',sans-serif; --field-r:999px;
  --btn-bg:#e85d04; --btn-ink:#fff; --btn-font:'Righteous',sans-serif; --btn-bd:3px solid #111; --btn-shadow:5px 5px 0 #2a9d8f,5px 5px 0 3px #111; --btn-ls:.06em; --btn-size:1.15rem;
  --thumb-bd:#111; --thumb-on:#e85d04;
  --badge-bg:#e9c46a; --badge-ink:#111; --badge-bd:2px solid #111; --badge-font:'Josefin Sans',sans-serif;
  --strip:linear-gradient(#111 0 2px,transparent 2px calc(100% - 2px),#111 0),linear-gradient(90deg,#e85d04 0 20%,#f4a261 0 40%,#e9c46a 0 60%,#2a9d8f 0 80%,#264653 0); --strip-h:14px;
  --panel:#fff; --panel-ink:#1d2b2a; --panel-bd:3px solid #111;
  --edge:#111; --edge-alt:#fff; --edge-shadow:6px 6px 0 #e85d04; --form-bg:#fff; --panel-r:30px;
}
html[data-theme="1960s"]:not(:where([data-preview])) body{font-family:var(--font-body)}
html[data-theme="1960s"]:not(:where([data-preview])) header.top{border-bottom:0;box-shadow:inset 0 -6px 0 #e85d04,inset 0 -12px 0 #e9c46a,inset 0 -18px 0 #2a9d8f;padding-bottom:26px;
  background:url(../img/1960s/peace.svg) left 330px center/46px 46px no-repeat,#264653}
html[data-theme="1960s"]:not(:where([data-preview])) header.top .logo-mark{color:#e9c46a;text-shadow:3px 3px 0 #e85d04}
html[data-theme="1960s"]:not(:where([data-preview])) header.top .logo small{font-family:'Josefin Sans',sans-serif;text-transform:uppercase;letter-spacing:.2em;opacity:1;font-weight:700}
html[data-theme="1960s"]:not(:where([data-preview])) #splash .logo-mark{color:#e85d04;text-shadow:4px 4px 0 #e9c46a,8px 8px 0 #264653}
html[data-theme="1960s"]:not(:where([data-preview])) #splash{background:radial-gradient(circle at center,#fff6e0 0 38%,#111 38.3% 39%,transparent 39.3%)}
html[data-theme="1960s"]:not(:where([data-preview])) .daybar{border-radius:999px;padding:6px 16px}
html[data-theme="1960s"]:not(:where([data-preview])) .daybar b{font-family:'Righteous',sans-serif}
html[data-theme="1960s"]:not(:where([data-preview])) .field label{font-weight:700}
html[data-theme="1960s"]:not(:where([data-preview])) .field input{padding-left:20px;font-size:17px}
html[data-theme="1960s"]:not(:where([data-preview])) .btn{border-radius:999px}
html[data-theme="1960s"]:not(:where([data-preview])) .btn.secondary{background:#e9c46a;color:#111;border:3px solid #111;box-shadow:4px 4px 0 #111;font-family:'Righteous',sans-serif}
html[data-theme="1960s"]:not(:where([data-preview])) .viewer{border-radius:30px}
html[data-theme="1960s"]:not(:where([data-preview])) .era-strip{border-radius:999px;border:0}
html[data-theme="1960s"]:not(:where([data-preview])) .photo-credit{border-radius:999px;padding:4px 12px}
@media (min-width:1000px){ html[data-theme="1960s"]:not(:where([data-preview])) #game.wrap{border:4px solid #111;border-radius:44px;box-shadow:12px 12px 0 #2a9d8f,12px 12px 0 4px #111,0 30px 80px rgba(0,0,0,.3)} }
@media (max-width:999px){
  html[data-theme="1960s"]:not(:where([data-preview])){--edge-shadow:4px 4px 0 #e85d04;--page:url(../img/1960s/waves.svg) 0 0/840px 588px,#fff6e0}
  html[data-theme="1960s"]:not(:where([data-preview])) header.top{background:#264653}
  html[data-theme="1960s"]:not(:where([data-preview])) footer.foot{border-radius:24px}
}
/* splash: solid panel (readable over the busy backdrop) */
html[data-theme="1960s"]:not(:where([data-preview])) #splash{background:linear-gradient(#fff6e0,#fff6e0) center/calc(min(400px,92vw) - 8px) calc(min(640px,92vh) - 8px) no-repeat,linear-gradient(#111,#111) center/min(400px,92vw) min(640px,92vh) no-repeat}

/* ---------- FINAL 1970s — Muscle-Car Ad ---------- */
/* 1970s option 4 — Muscle-Car Ad
   Inspiration: early-70s muscle-car print ads and dealer posters: high-impact paint colours, twin racing stripes, graduated
   "strobe" side stripes, checkered flags, heavy italic condensed headlines.
   Palette: high-impact orange #ff6a13, gloss black #111, white #fff, track yellow #ffd23f.
   Fonts: Racing Sans One (logo/buttons/labels), Oswald (body) — OFL. Art: CSS stripes only (original). */
html[data-theme="1970s"]:not(:where([data-preview])){
  --font-body:'Oswald',system-ui,sans-serif; --font-display:'Racing Sans One',sans-serif;
  --accent:#ff6a13; --ink:#111; --muted:#333;
  --strobe:linear-gradient(90deg,#111 0 46%,transparent 0 50%,#111 0 66%,transparent 0 70%,#111 0 79%,transparent 0 83%,#111 0 88%,transparent 0 91%,#111 0 94%,transparent 0);
  --page:var(--strobe) 0 180px/42% 34px no-repeat,var(--strobe) 0 226px/36% 14px no-repeat,
         linear-gradient(90deg,transparent calc(50% - 150px),#111 0 calc(50% - 30px),transparent 0 calc(50% + 30px),#111 0 calc(50% + 150px),transparent 0),#ff6a13;
  --card:#fff; --card-img:none;
  --hdr-bg:linear-gradient(90deg,transparent calc(50% - 120px),#fff 0 calc(50% - 112px),#111 0 calc(50% - 22px),#fff 0 calc(50% - 14px),transparent 0 calc(50% + 14px),#fff 0 calc(50% + 22px),#111 0 calc(50% + 112px),#fff 0 calc(50% + 120px),transparent 0),#ff6a13;
  --hdr-ink:#111; --hdr-border:0;
  --logo-font:'Racing Sans One',sans-serif; --logo-size:1.9rem;
  --label-font:'Racing Sans One',sans-serif; --label-ink:#111; --label-size:1.1rem; --label-tt:uppercase; --label-ls:.04em;
  --field-bg:#fff; --field-ink:#111; --field-font:'Oswald',sans-serif; --field-r:2px;
  --btn-bg:#ff6a13; --btn-ink:#fff; --btn-font:'Racing Sans One',sans-serif; --btn-bd:3px solid #111; --btn-shadow:6px 6px 0 #111; --btn-ts:2px 2px 0 #111; --btn-tt:uppercase; --btn-ls:.06em; --btn-size:1.4rem;
  --thumb-bd:#111; --thumb-on:#ff6a13;
  --badge-bg:#ffd23f; --badge-ink:#111; --badge-bd:2px solid #111; --badge-font:'Oswald',sans-serif;
  --strip:conic-gradient(#111 25%,#fff 0 50%,#111 0 75%,#fff 0) 0 0/14px 14px; --strip-h:14px;
  --panel:#fff; --panel-ink:#111; --panel-bd:3px solid #111;
  --edge:#111; --edge-alt:#fff; --edge-shadow:6px 6px 0 #111; --form-bg:#fff; --panel-r:2px;
}
html[data-theme="1970s"]:not(:where([data-preview])) body{font-family:var(--font-body)}
html[data-theme="1970s"]:not(:where([data-preview])) header.top{border-bottom:5px solid #111}
html[data-theme="1970s"]:not(:where([data-preview])) .logo-mark{color:#fff;text-shadow:3px 3px 0 #111;font-style:italic;letter-spacing:.01em}
html[data-theme="1970s"]:not(:where([data-preview])) .logo-mark .lm2{color:#ffd23f}
html[data-theme="1970s"]:not(:where([data-preview])) header.top .logo small{font-family:'Oswald',sans-serif;opacity:1;text-transform:uppercase;letter-spacing:.2em;font-weight:700;color:#111}
html[data-theme="1970s"]:not(:where([data-preview])) #splash .big-logo{color:#ff6a13;text-shadow:4px 4px 0 #111}
html[data-theme="1970s"]:not(:where([data-preview])) #splash .logo-mark .lm2{color:#111;text-shadow:4px 4px 0 #ffd23f}
html[data-theme="1970s"]:not(:where([data-preview])) #splash{background:linear-gradient(#fff,#fff) center/min(520px,92vw) min(640px,92vh) no-repeat}
html[data-theme="1970s"]:not(:where([data-preview])) .daybar{border-width:3px;border-radius:2px;text-transform:uppercase;letter-spacing:.1em;font-weight:600}
html[data-theme="1970s"]:not(:where([data-preview])) .daybar b{font-family:'Racing Sans One',sans-serif;font-size:1.3rem}
html[data-theme="1970s"]:not(:where([data-preview])) .field label{font-weight:400;font-style:italic}
html[data-theme="1970s"]:not(:where([data-preview])) .field input{font-size:17px;font-weight:600}
/* twin stripes down the form panel */
html[data-theme="1970s"]:not(:where([data-preview])) form.guess{border-width:3px;border-top-width:16px;border-top-color:#111 !important;position:relative}
html[data-theme="1970s"]:not(:where([data-preview])) form.guess::before{content:"";position:absolute;top:-16px;left:0;right:0;height:16px;background:linear-gradient(90deg,transparent calc(50% - 60px),#ff6a13 0 calc(50% - 10px),transparent 0 calc(50% + 10px),#ff6a13 0 calc(50% + 60px),transparent 0)}
html[data-theme="1970s"]:not(:where([data-preview])) .btn{border-radius:2px;font-style:italic}
html[data-theme="1970s"]:not(:where([data-preview])) .btn.secondary{background:#ffd23f;color:#111;border:3px solid #111;box-shadow:4px 4px 0 #111;font-family:'Racing Sans One',sans-serif;font-size:1.1rem}
html[data-theme="1970s"]:not(:where([data-preview])) .viewer{border-radius:2px;border-width:4px}
html[data-theme="1970s"]:not(:where([data-preview])) .photo-dots button{border-radius:2px}
html[data-theme="1970s"]:not(:where([data-preview])) .mult-now b{border:2px solid #111;border-radius:2px}
html[data-theme="1970s"]:not(:where([data-preview])) .era-strip{border-radius:0;border:2px solid #111}
@media (min-width:1000px){ html[data-theme="1970s"]:not(:where([data-preview])) #game.wrap{border:5px solid #111;border-radius:6px;box-shadow:14px 14px 0 #111} }
@media (max-width:999px){
  html[data-theme="1970s"]:not(:where([data-preview])){--edge-shadow:4px 4px 0 #111;--page:linear-gradient(90deg,transparent calc(50% - 110px),#111 0 calc(50% - 20px),transparent 0 calc(50% + 20px),#111 0 calc(50% + 110px),transparent 0),#ff6a13}
  html[data-theme="1970s"]:not(:where([data-preview])){--hdr-bg:#ff6a13}
  html[data-theme="1970s"]:not(:where([data-preview])) footer.foot{border-radius:2px;border:3px solid #111}
}

/* ---------- FINAL 1980s — Synthwave Grid (refined) ---------- */
/* 1980s option 1 — Synthwave Grid (refined current look)
   Inspiration: 80s outrun/synth album art and VHS-era title cards: striped setting sun, wireframe mountains, magenta
   perspective grid, chrome italic logos, neon script; plus the neon Post-it notes stuck on every 80s fridge and locker.
   Palette: midnight #0b0626, violet #2a0f5c, hot pink #ff2e88, cyan #20e3ff, sun gold #ffe45a; notes in neon yellow/pink/cyan/green.
   Fonts: Orbitron (logo/buttons/inputs), Mr Dafoe (neon script, labels) — OFL. Art: public/img/preview/1980s-synthwave/scene.svg (original). */
html[data-theme="1980s"]:not(:where([data-preview])){
  --page:url(../img/1980s/scene.svg) center top/max(1600px,100%) auto no-repeat,#14062e;
  --card:#140a33; --card-img:linear-gradient(rgba(32,227,255,.07) 1px,transparent 1px) 0 0/100% 24px,linear-gradient(90deg,rgba(32,227,255,.07) 1px,transparent 1px) 0 0/24px 100%;
  --hdr-bg:linear-gradient(#1b0d44,#2b1060); --hdr-border:0;
  --label-ink:#c2006a; --label-size:1.7rem;
  --font-body:'Orbitron',system-ui,sans-serif;
  --edge:#fff; --edge-alt:#111; --edge-shadow:0 0 0 0 transparent,0 0 18px rgba(255,46,136,.75); --form-bg:#1d1046; --panel-r:6px;
}
html[data-theme="1980s"]:not(:where([data-preview])) body{font-family:var(--font-body)}
html[data-theme="1980s"]:not(:where([data-preview])) header.top{border-bottom:3px solid #ff2e88;box-shadow:0 3px 0 #20e3ff,0 0 24px rgba(255,46,136,.6)}
html[data-theme="1980s"]:not(:where([data-preview])) .daybar{font-size:.78rem}
html[data-theme="1980s"]:not(:where([data-preview])) .daybar b{font-family:'Orbitron',sans-serif;color:#20e3ff;text-shadow:0 0 8px rgba(32,227,255,.8)}
/* neon Post-it notes, one colour per field, each with a white edge and a strip of tape */
html[data-theme="1980s"]:not(:where([data-preview])) .field{background:#fff27a;border:2px solid #fff;box-shadow:0 0 0 2px #111,0 8px 16px rgba(0,0,0,.5)}
html[data-theme="1980s"]:not(:where([data-preview])) .field:nth-child(2){background:#ffa3d6}
html[data-theme="1980s"]:not(:where([data-preview])) .field:nth-child(3){background:#9ff3ff}
html[data-theme="1980s"]:not(:where([data-preview])) .field:nth-child(4){background:#c8ff8f}
html[data-theme="1980s"]:not(:where([data-preview])) .field::before{background:rgba(255,255,255,.55);border-left:1px dashed rgba(0,0,0,.15);border-right:1px dashed rgba(0,0,0,.15)}
html[data-theme="1980s"]:not(:where([data-preview])) .field label{color:#1d1236;text-shadow:none}
html[data-theme="1980s"]:not(:where([data-preview])) .field input{border:2px solid #1d1236 !important;background:#fff;font-size:15px}
html[data-theme="1980s"]:not(:where([data-preview])) .field input:focus{box-shadow:0 0 0 3px #ff2e88,0 0 0 6px rgba(32,227,255,.7)}
html[data-theme="1980s"]:not(:where([data-preview])) .btn.secondary{background:#1d1046;color:#f3e9ff;border:2px solid #fff;box-shadow:0 0 12px rgba(32,227,255,.7);font-family:'Orbitron',sans-serif;font-size:.85rem;letter-spacing:.06em}
html[data-theme="1980s"]:not(:where([data-preview])) .reveal-btn .drop{background:#ff2e88;color:#fff}
html[data-theme="1980s"]:not(:where([data-preview])) .viewer{box-shadow:0 0 0 2px #111,0 0 22px rgba(32,227,255,.7)}
html[data-theme="1980s"]:not(:where([data-preview])) .mult-now,html[data-theme="1980s"]:not(:where([data-preview])) .hint{font-size:.8rem}
@media (min-width:1000px){ html[data-theme="1980s"]:not(:where([data-preview])) #game.wrap{border:2px solid #fff;box-shadow:0 0 0 4px #ff2e88,0 0 40px rgba(255,46,136,.6),0 30px 80px rgba(0,0,0,.6)} }
@media (max-width:999px){
  html[data-theme="1980s"]:not(:where([data-preview])){--page:url(../img/1980s/scene.svg) 50% top/auto 820px no-repeat,#14062e}
  html[data-theme="1980s"]:not(:where([data-preview])) footer.foot{background:#1d1046}
}
/* splash: solid panel (readable over the busy backdrop) */
html[data-theme="1980s"]:not(:where([data-preview])) #splash{background:linear-gradient(#140a33,#140a33) center/calc(min(400px,92vw) - 8px) calc(min(640px,92vh) - 8px) no-repeat,linear-gradient(#fff,#fff) center/min(400px,92vw) min(640px,92vh) no-repeat}

/* ---------- FINAL 1990s — Jazz Cup (refined) + extra 90s confetti ---------- */
html[data-theme="1990s"]:not(:where([data-preview])){
  --page:url(../img/1990s/swoosh.svg) center/cover fixed,#f4fbfb;
  --card:#fff; --card-img:none;
  --hdr-bg:radial-gradient(120% 140% at 100% 120%,#00b3b3 0 28%,transparent 28.5%),#1b1464; --hdr-border:4px solid #e6007e;
  --strip:linear-gradient(90deg,#00b3b3 0 33%,#e6007e 33% 66%,#7a2ea8 66%); --strip-h:8px;
  --field-shadow:none; --edge-shadow:5px 5px 0 #00b3b3;
}
html[data-theme="1990s"]:not(:where([data-preview])) .field input{box-shadow:none}
html[data-theme="1990s"]:not(:where([data-preview])) .field input:focus{box-shadow:0 0 0 3px #e6007e,0 0 0 6px rgba(0,179,179,.5)}
html[data-theme="1990s"]:not(:where([data-preview])) form.guess{box-shadow:6px 6px 0 #7a2ea8}
@media (max-width:999px){ html[data-theme="1990s"]:not(:where([data-preview])){--page:url(../img/1990s/swoosh.svg) 30% center/auto 100%,#f4fbfb;--edge-shadow:3px 3px 0 #00b3b3} }

/* ---------- FINAL 2000s — Sky Aero ---------- */
html[data-theme="2000s"]:not(:where([data-preview])) body{font-family:var(--font-body)}
html[data-theme="2000s"]:not(:where([data-preview])) .logo-mark,html[data-theme="2000s"]:not(:where([data-preview])) #splash .logo-mark{text-transform:none;letter-spacing:normal;color:inherit;font-weight:400}
html[data-theme="2000s"]:not(:where([data-preview])) .logo-mark .lm2,html[data-theme="2000s"]:not(:where([data-preview])) #splash .logo-mark .lm2{background:none;padding:0;border-radius:0;margin:0;color:inherit}
html[data-theme="2000s"]:not(:where([data-preview])) header.top .logo small{font-family:var(--font-body)}
html[data-theme="2000s"]:not(:where([data-preview])) .field label,html[data-theme="2000s"]:not(:where([data-preview])) .field:nth-child(n) label{display:block;padding:0;border-radius:0;background:none;margin-bottom:4px}
html[data-theme="2000s"]:not(:where([data-preview])) .field label,html[data-theme="2000s"]:not(:where([data-preview])) .btn,html[data-theme="2000s"]:not(:where([data-preview])) .badge-tt,html[data-theme="2000s"]:not(:where([data-preview])) .mode-pill,html[data-theme="2000s"]:not(:where([data-preview])) .score,html[data-theme="2000s"]:not(:where([data-preview])) .modal h2{font-weight:700}
html[data-theme="2000s"]:not(:where([data-preview])) .btn,html[data-theme="2000s"]:not(:where([data-preview])) .photo-dots button{border-radius:var(--btn-r,8px)}
html[data-theme="2000s"]:not(:where([data-preview])) .btn.secondary{background:var(--panel);color:var(--panel-ink);border:var(--panel-bd)}
html[data-theme="2000s"]:not(:where([data-preview])) #splash .btn{background:var(--btn-bg);color:var(--btn-ink);box-shadow:var(--btn-shadow)}
html[data-theme="2000s"]:not(:where([data-preview])) .era-strip{border:0;border-radius:6px}
html[data-theme="2000s"]:not(:where([data-preview])) .viewer{border-radius:var(--radius,12px)}
html[data-theme="2000s"]:not(:where([data-preview])) .daybar,html[data-theme="2000s"]:not(:where([data-preview])) .photo-credit{border:1.5px solid var(--edge)}
html[data-theme="2000s"]:not(:where([data-preview])) #splash{background:none;color:var(--ink)}
html[data-theme="2000s"]:not(:where([data-preview])) #splash .tag,html[data-theme="2000s"]:not(:where([data-preview])) #splash .meta,html[data-theme="2000s"]:not(:where([data-preview])) .splash-links button,html[data-theme="2000s"]:not(:where([data-preview])) .mode-note{color:var(--muted)}
html[data-theme="2000s"]:not(:where([data-preview])) footer.foot,html[data-theme="2000s"]:not(:where([data-preview])) footer.foot a{color:var(--muted)}
html[data-theme="2000s"]:not(:where([data-preview])) .field input{border:var(--edge-w) solid var(--in-edge,var(--edge)) !important;border-radius:var(--field-r);font-weight:600}
html[data-theme="2000s"]:not(:where([data-preview])) .field input:focus,html[data-theme="2000s"]:not(:where([data-preview])) .field input:focus-visible{border-color:var(--in-edge,var(--edge)) !important;box-shadow:0 0 0 3px var(--focus,var(--accent)),0 0 0 6px color-mix(in srgb,var(--focus,var(--accent)) 35%,transparent)}
html[data-theme="2000s"]:not(:where([data-preview])) .results,html[data-theme="2000s"]:not(:where([data-preview])) .ended,html[data-theme="2000s"]:not(:where([data-preview])) .modal .sheet,html[data-theme="2000s"]:not(:where([data-preview])) form.guess,html[data-theme="2000s"]:not(:where([data-preview])) .daybar,html[data-theme="2000s"]:not(:where([data-preview])) .photo-credit{--muted:var(--form-muted,#454545);--ink:var(--form-ink)}
@media (max-width:999px){ html[data-theme="2000s"]:not(:where([data-preview])) footer.foot{border:1.5px solid var(--edge)} html[data-theme="2000s"]:not(:where([data-preview])) .field input{border-width:var(--edge-w) !important} }
html[data-theme="2000s"]:not(:where([data-preview])){
  --accent:#0a84d6; --ink:#0f2a3d; --muted:#3c566a; --line:#cfe6f5; --font-body:'Nunito Sans',system-ui,sans-serif;
  --page:url(../img/2000s/aero.svg) center/cover fixed,#8fd3ff;
  --card:rgba(255,255,255,.88); --card-img:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,0) 30%);
  --hdr-bg:linear-gradient(#ffffff 0,#e6f4ff 50%,#cfe9fb 51%,#e9f6ff 100%); --hdr-ink:#0f2a3d; --hdr-border:2px solid #0f2a3d;
  --logo-font:'Nunito Sans',sans-serif; --logo-size:1.7rem;
  --label-font:'Nunito Sans',sans-serif; --label-ink:#0a6aad; --label-size:.92rem; --label-tt:none; --label-ls:0;
  --field-bg:#fff; --field-ink:#0f2a3d; --field-r:12px; --field-font:'Nunito Sans',sans-serif; --ph:#5c7385;
  --btn-bg:linear-gradient(#8fe0ff 0,#22a6f0 48%,#0a84d6 52%,#3fb4f2 100%); --btn-ink:#fff; --btn-font:'Nunito Sans',sans-serif; --btn-bd:2px solid #064f82; --btn-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 4px 10px rgba(10,132,214,.35); --btn-tt:none; --btn-ls:0; --btn-size:1.12rem; --btn-r:999px;
  --thumb-bd:#0f2a3d; --thumb-on:#5cc23a;
  --badge-bg:linear-gradient(#b7f08f,#5cc23a); --badge-ink:#0f2a3d; --badge-bd:1px solid #2f7d1c; --badge-font:'Nunito Sans',sans-serif;
  --strip:none; --strip-h:0px;
  --panel:#fff; --panel-ink:#0f2a3d; --panel-bd:2px solid #0f2a3d;
  --edge:#0f2a3d; --edge-alt:#fff; --edge-shadow:0 8px 22px rgba(10,60,110,.25); --form-bg:#fff; --form-ink:#0f2a3d; --panel-r:18px; --focus:#5cc23a; --form-muted:#3c566a;
}
html[data-theme="2000s"]:not(:where([data-preview])) .logo-mark{font-weight:900;color:#0a6aad;letter-spacing:-.02em}
html[data-theme="2000s"]:not(:where([data-preview])) .logo-mark .lm2{color:#3fa82a}
html[data-theme="2000s"]:not(:where([data-preview])) .field label,html[data-theme="2000s"]:not(:where([data-preview])) .btn{font-weight:800}
html[data-theme="2000s"]:not(:where([data-preview])) .btn{text-shadow:0 1px 1px rgba(0,50,90,.5)}
html[data-theme="2000s"]:not(:where([data-preview])) .btn.secondary{background:linear-gradient(#fff 0,#f1f8fd 50%,#e2f1fb 51%,#f4faff 100%);color:#0a6aad;border:2px solid #0f2a3d;text-shadow:none}
html[data-theme="2000s"]:not(:where([data-preview])) .reveal-btn .drop{background:linear-gradient(#b7f08f,#5cc23a);color:#0f2a3d}
html[data-theme="2000s"]:not(:where([data-preview])) .viewer{border-radius:16px}
html[data-theme="2000s"]:not(:where([data-preview])) .daybar,html[data-theme="2000s"]:not(:where([data-preview])) .photo-credit{border-radius:12px;background:#fff}
html[data-theme="2000s"]:not(:where([data-preview])) header.top{box-shadow:inset 0 1px 0 #fff}
html[data-theme="2000s"]:not(:where([data-preview])) #splash{background:radial-gradient(ellipse at center,rgba(255,255,255,.95) 0 40%,transparent 41%)}
@media (min-width:1000px){ html[data-theme="2000s"]:not(:where([data-preview])) #game.wrap{border-radius:22px;box-shadow:0 0 0 2px #0f2a3d,0 0 0 6px rgba(255,255,255,.6),0 24px 60px rgba(10,60,110,.35)} }
@media (max-width:999px){ html[data-theme="2000s"]:not(:where([data-preview])){--page:url(../img/2000s/aero.svg) center/cover,#8fd3ff;--logo-size:1.4rem} html[data-theme="2000s"]:not(:where([data-preview])) footer.foot{background:#fff;border:2px solid #0f2a3d;border-radius:16px} }

/* ---------- FINAL 2010s — Sunset Gradient ---------- */
html[data-theme="2010s"]:not(:where([data-preview])) body{font-family:var(--font-body)}
html[data-theme="2010s"]:not(:where([data-preview])) .logo-mark{text-shadow:none;text-transform:none;letter-spacing:normal}
html[data-theme="2010s"]:not(:where([data-preview])) #splash{background:none;color:var(--ink)}
html[data-theme="2010s"]:not(:where([data-preview])) #splash .logo-mark{color:inherit}
html[data-theme="2010s"]:not(:where([data-preview])) #splash .tag,html[data-theme="2010s"]:not(:where([data-preview])) #splash .meta span,html[data-theme="2010s"]:not(:where([data-preview])) .splash-links button,html[data-theme="2010s"]:not(:where([data-preview])) .mode-note{color:var(--muted)}
html[data-theme="2010s"]:not(:where([data-preview])) .results,html[data-theme="2010s"]:not(:where([data-preview])) .modal .sheet{box-shadow:var(--edge-shadow)}
html[data-theme="2010s"]:not(:where([data-preview])) .btn,html[data-theme="2010s"]:not(:where([data-preview])) .photo-dots button{border-radius:var(--btn-r,8px)}
/* inputs: full solid edge (dark ink on the solid form panel) */
html[data-theme="2010s"]:not(:where([data-preview])) .field input{border:var(--edge-w) solid var(--in-edge,var(--edge)) !important;border-radius:var(--field-r)}
html[data-theme="2010s"]:not(:where([data-preview])) .field input:focus,html[data-theme="2010s"]:not(:where([data-preview])) .field input:focus-visible{border-color:var(--in-edge,var(--edge)) !important;box-shadow:0 0 0 3px var(--focus,var(--accent)),0 0 0 6px color-mix(in srgb,var(--focus,var(--accent)) 35%,transparent)}
html[data-theme="2010s"]:not(:where([data-preview])) form.guess,html[data-theme="2010s"]:not(:where([data-preview])) .daybar,html[data-theme="2010s"]:not(:where([data-preview])) .photo-credit,html[data-theme="2010s"]:not(:where([data-preview])) .results,html[data-theme="2010s"]:not(:where([data-preview])) .modal .sheet{--muted:var(--form-muted,#454545)}
html[data-theme="2010s"]:not(:where([data-preview])){
  --grad:linear-gradient(45deg,#ffb347 0%,#f5574a 30%,#d42e7b 58%,#8a2fc4 80%,#4b3fd8 100%);
  --accent:#d42e7b; --ink:#1e1e24; --muted:#5b5b66; --line:#ececf1; --font-body:'Poppins',system-ui,sans-serif;
  --page:url(../img/2010s/gradient-shapes.svg) 0 0/640px 640px,var(--grad) fixed;
  --card:#fff; --card-img:none;
  --hdr-bg:#fff; --hdr-ink:#1e1e24; --hdr-border:0;
  --logo-font:'Poppins',sans-serif; --logo-size:1.55rem;
  --label-font:'Poppins',sans-serif; --label-ink:#1e1e24; --label-size:.86rem; --label-tt:none; --label-ls:0;
  --field-bg:#fff; --field-ink:#1e1e24; --field-r:14px; --field-font:'Poppins',sans-serif; --ph:#777783;
  --btn-bg:linear-gradient(90deg,#f5574a,#d42e7b 50%,#8a2fc4); --btn-ink:#fff; --btn-font:'Poppins',sans-serif; --btn-bd:0; --btn-shadow:0 8px 20px rgba(212,46,123,.35); --btn-tt:none; --btn-ls:0; --btn-size:1.05rem; --btn-r:999px;
  --thumb-bd:#111; --thumb-on:#d42e7b;
  --badge-bg:linear-gradient(90deg,#f5574a,#d42e7b); --badge-ink:#fff; --badge-bd:0; --badge-font:'Poppins',sans-serif;
  --strip:var(--grad); --strip-h:6px;
  --panel:#fff; --panel-ink:#1e1e24; --panel-bd:2.5px solid #111;
  --edge:#111; --edge-alt:#fff; --edge-shadow:0 12px 30px rgba(110,30,120,.28); --form-bg:#fff; --form-ink:#1e1e24; --panel-r:24px; --focus:#8a2fc4;
}
html[data-theme="2010s"]:not(:where([data-preview])) .logo-mark{font-weight:800;letter-spacing:-.02em}
html[data-theme="2010s"]:not(:where([data-preview])) .logo-mark .lm2{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-theme="2010s"]:not(:where([data-preview])) header.top .logo small{font-weight:500}
html[data-theme="2010s"]:not(:where([data-preview])) .field label{font-weight:700}
html[data-theme="2010s"]:not(:where([data-preview])) .btn{font-weight:700}
html[data-theme="2010s"]:not(:where([data-preview])) .btn.secondary{background:#fff;color:#1e1e24;border:2.5px solid #111;box-shadow:none}
html[data-theme="2010s"]:not(:where([data-preview])) .reveal-btn .drop{background:var(--grad);color:#fff}
html[data-theme="2010s"]:not(:where([data-preview])) .viewer{border-radius:22px}
html[data-theme="2010s"]:not(:where([data-preview])) .photo-dots button{border-radius:12px}
html[data-theme="2010s"]:not(:where([data-preview])) .photo-dots button img{border-radius:10px}
html[data-theme="2010s"]:not(:where([data-preview])) .era-strip{border-radius:99px}
html[data-theme="2010s"]:not(:where([data-preview])) .daybar,html[data-theme="2010s"]:not(:where([data-preview])) .photo-credit{border-radius:14px}
html[data-theme="2010s"]:not(:where([data-preview])) .logo svg{filter:hue-rotate(0)}
html[data-theme="2010s"]:not(:where([data-preview])) #splash{background:linear-gradient(#fff,#fff) center/min(540px,92vw) min(640px,92vh) no-repeat}
@media (min-width:1000px){ html[data-theme="2010s"]:not(:where([data-preview])) #game.wrap{border-radius:32px} }
@media (max-width:999px){ html[data-theme="2010s"]:not(:where([data-preview])){--page:url(../img/2010s/gradient-shapes.svg) 0 0/420px 420px,var(--grad)}
  html[data-theme="2010s"]:not(:where([data-preview])) header.top{margin:0 -12px 12px} html[data-theme="2010s"]:not(:where([data-preview])) footer.foot{background:#fff;border:2px solid #111;border-radius:18px} }

/* ---------- FINAL 2020s — Liquid Glass (refined) ---------- */
html[data-theme="2020s"]:not(:where([data-preview])){
  --page:radial-gradient(46vmax 46vmax at 10% 14%,#ff6f9b,transparent 70%),radial-gradient(50vmax 50vmax at 92% 20%,#6a7dff,transparent 70%),
         radial-gradient(50vmax 50vmax at 60% 100%,#25d3b4,transparent 70%),#eef0ff;
  --glass:rgba(255,255,255,.68); --glass-strong:rgba(255,255,255,.84); --glass-hair:rgba(10,12,30,.32);
  --logo-size:1.6rem;
}
html[data-theme="2020s"]:not(:where([data-preview])) .logo-mark{font-weight:900;letter-spacing:-.045em}
html[data-theme="2020s"]:not(:where([data-preview])) .field input{border:1.5px solid #fff !important;box-shadow:inset 1px 1px 0 #fff,0 0 0 1.5px rgba(10,12,30,.7),0 4px 12px rgba(20,24,60,.10)}
html[data-theme="2020s"]:not(:where([data-preview])) .field input:focus{box-shadow:inset 1px 1px 0 #fff,0 0 0 1.5px rgba(10,12,30,.7),0 0 0 4px #0a6cff,0 0 0 8px rgba(10,108,255,.28)}
html[data-theme="2020s"]:not(:where([data-preview])) .viewer{border:2px solid #fff;box-shadow:0 0 0 1.5px rgba(10,12,30,.7),0 18px 44px rgba(20,24,60,.28)}
html[data-theme="2020s"]:not(:where([data-preview])) .field label{font-weight:800}
html[data-theme="2020s"]:not(:where([data-preview])) .daybar b{font-weight:900}
/* FINAL 2020s — no backdrop-filter: near-opaque glass so text keeps contrast (dark fallback below wins in dark mode) */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html[data-theme="2020s"]:not(:where([data-preview])){--glass:rgba(255,255,255,.9);--glass-strong:rgba(255,255,255,.95)}
}
/* FINAL 2020s — dark-mode Liquid Glass for the refined version (the refined light values above out-rank the older dark block) */
@media (prefers-color-scheme:dark){
  html[data-theme="2020s"]:not(:where([data-preview])){
    --page:radial-gradient(46vmax 46vmax at 10% 14%,#b0174f,transparent 70%),radial-gradient(50vmax 50vmax at 92% 20%,#3046d6,transparent 70%),
           radial-gradient(50vmax 50vmax at 60% 100%,#00806e,transparent 70%),#07080f;
    --glass:rgba(22,22,30,.66); --glass-strong:rgba(22,22,30,.8); --glass-hair:rgba(0,0,0,.7);
  }
  html[data-theme="2020s"]:not(:where([data-preview])) .field input{border:1.5px solid rgba(255,255,255,.85) !important;box-shadow:inset 1px 1px 0 rgba(255,255,255,.25),0 0 0 1.5px rgba(0,0,0,.75),0 4px 12px rgba(0,0,0,.25)}
  html[data-theme="2020s"]:not(:where([data-preview])) .field input:focus{box-shadow:0 0 0 1.5px rgba(0,0,0,.75),0 0 0 4px #3b8bff,0 0 0 8px rgba(59,139,255,.3)}
  html[data-theme="2020s"]:not(:where([data-preview])) .viewer{border:2px solid rgba(255,255,255,.9);box-shadow:0 0 0 1.5px rgba(0,0,0,.8),0 18px 44px rgba(0,0,0,.45)}
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ html[data-theme="2020s"]:not(:where([data-preview])){--glass:rgba(22,22,30,.92);--glass-strong:rgba(22,22,30,.95)} }
}

/* ---------- FINAL splash panels: a real box that GROWS with its content ----------
   The era splash panels used to be painted as fixed-size backgrounds (e.g. 400x640), so extra content such as the Monday
   recap card pushed the links below the panel (seen on 1980s mobile). Now #splash itself is the panel: at least the old
   size, vertically centred when it fits, and taller when it needs to be. 2020s (glass) and the ellipse themes (1990s, 2000s)
   keep their own look; their backdrops scale with the box already. */
html[data-theme="1950s"]:not(:where([data-preview])) #splash,html[data-theme="1960s"]:not(:where([data-preview])) #splash,
html[data-theme="1970s"]:not(:where([data-preview])) #splash,html[data-theme="1980s"]:not(:where([data-preview])) #splash,
html[data-theme="2010s"]:not(:where([data-preview])) #splash{
  --sp-w:400px; --sp-h:640px;
  box-sizing:border-box;width:min(var(--sp-w),92vw);min-height:min(var(--sp-h),calc(100vh - 32px));min-height:min(var(--sp-h),calc(100dvh - 32px));
  margin:max(16px,calc((100vh - var(--sp-h)) / 2)) auto 16px;margin-top:max(16px,calc((100dvh - var(--sp-h)) / 2));
  padding:24px 20px;background:var(--sp-bg);border:4px solid var(--sp-bd);border-radius:var(--sp-r,0)}
html[data-theme="1950s"]:not(:where([data-preview])) #splash{--sp-bg:#fbf5e8;--sp-bd:#111}
html[data-theme="1960s"]:not(:where([data-preview])) #splash{--sp-bg:#fff6e0;--sp-bd:#111;--sp-r:28px}
html[data-theme="1970s"]:not(:where([data-preview])) #splash{--sp-w:520px;--sp-bg:#fff;--sp-bd:#111;--sp-r:2px;box-shadow:10px 10px 0 #111}
html[data-theme="1980s"]:not(:where([data-preview])) #splash{--sp-bg:#140a33;--sp-bd:#fff;--sp-r:6px;box-shadow:0 0 24px rgba(255,46,136,.55)}
html[data-theme="2010s"]:not(:where([data-preview])) #splash{--sp-w:540px;--sp-bg:#fff;--sp-bd:#111;--sp-r:24px;border-width:2.5px;box-shadow:0 12px 30px rgba(110,30,120,.28)}
/* 2000s Sky Aero: glossy white splash panel (replaces the ellipse) */
html[data-theme="2000s"]:not(:where([data-preview])) #splash{
  --sp-w:440px; --sp-h:640px; box-sizing:border-box;width:min(var(--sp-w),92vw);min-height:min(var(--sp-h),calc(100vh - 32px));min-height:min(var(--sp-h),calc(100dvh - 32px));
  margin:max(16px,calc((100vh - var(--sp-h)) / 2)) auto 16px;margin-top:max(16px,calc((100dvh - var(--sp-h)) / 2));padding:24px 20px;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(240,248,255,.95));border:2px solid #0f2a3d;border-radius:22px;
  box-shadow:inset 0 1px 0 #fff,0 0 0 5px rgba(255,255,255,.55),0 24px 60px rgba(10,60,110,.35)}

/* ---------- FINAL feature UI (recap card, medal toast, medals view, install hint, update bar, offline pill) per era ----------
   features.css already themes these from the shared variables; these only replace leftovers from the retired 2000s colour-block
   and 2010s flat looks and add a touch of each final era. */
html[data-theme="2000s"]:not(:where([data-preview])) :is(.recap,.save-note,.install-hint,.medal-toast,.update-bar,.offline-pill){--edge:#0f2a3d;border-radius:16px;box-shadow:inset 0 1px 0 #fff,0 8px 22px rgba(10,60,110,.25)}
html[data-theme="2000s"]:not(:where([data-preview])) :is(.recap h2,.medal-toast b){font-weight:800;color:#0a6aad}
html[data-theme="2000s"]:not(:where([data-preview])) .recap-grid div:nth-child(n){background:linear-gradient(#fff 0,#eef7fd 50%,#dff0fb 51%,#f3faff 100%);border-color:#0f2a3d;border-radius:12px}
html[data-theme="2000s"]:not(:where([data-preview])) .recap-grid b{color:#0a6aad}
html[data-theme="2000s"]:not(:where([data-preview])) :is(.modal .sheet .medal-row,.modal .sheet .medal-tile,.modal .sheet .stamp,.medals-btn){border-color:#0f2a3d;border-radius:14px}
html[data-theme="2000s"]:not(:where([data-preview])) .medal-row .bar i{background:linear-gradient(90deg,#22a6f0,#5cc23a)}
html[data-theme="2000s"]:not(:where([data-preview])) :is(.update-bar,.offline-pill,.medal-toast,.install-hint){border-radius:999px}
html[data-theme="2010s"]:not(:where([data-preview])) :is(.recap,.medal-toast,.recap-grid div,.medal-row,.medal-tile,.medals-btn,.stamp){border-radius:14px}
html[data-theme="2010s"]:not(:where([data-preview])) :is(.medal-toast,.update-bar,.offline-pill,.install-hint,.save-note){border-radius:999px}
html[data-theme="2010s"]:not(:where([data-preview])) .recap h2{font-weight:800}
html[data-theme="2010s"]:not(:where([data-preview])) .recap-grid b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}
html[data-theme="2010s"]:not(:where([data-preview])) .medal-row .bar i{background:var(--grad)}
html[data-theme="1970s"]:not(:where([data-preview])) :is(.recap,.medal-toast,.recap-grid div,.medal-row,.medal-tile,.medals-btn,.stamp,.install-hint,.update-bar,.offline-pill,.save-note){border-radius:2px}
html[data-theme="1970s"]:not(:where([data-preview])) .recap h2{font-style:italic;text-transform:uppercase}
html[data-theme="1970s"]:not(:where([data-preview])) .recap-grid div:first-child{background:#ffd23f}
html[data-theme="1970s"]:not(:where([data-preview])) .medal-row .bar i{background:#ff6a13}
html[data-theme="1950s"]:not(:where([data-preview])) .recap h2{color:#d62839}
html[data-theme="1950s"]:not(:where([data-preview])) .recap-grid div:first-child{background:#5fd0c5}
html[data-theme="1960s"]:not(:where([data-preview])) :is(.medal-toast,.install-hint,.update-bar,.offline-pill,.save-note){border-radius:999px}
html[data-theme="1960s"]:not(:where([data-preview])) .recap{border-radius:26px}
html[data-theme="1960s"]:not(:where([data-preview])) .recap h2{color:#e85d04}
html[data-theme="1990s"]:not(:where([data-preview])) .recap h2{font-style:italic;color:#e6007e}
html[data-theme="1990s"]:not(:where([data-preview])) .recap-grid div:nth-child(1){background:#e0fafa} html[data-theme="1990s"]:not(:where([data-preview])) .recap-grid div:nth-child(2){background:#ffe3f3}
html[data-theme="1990s"]:not(:where([data-preview])) .recap-grid div:nth-child(3){background:#f1e6fa} html[data-theme="1990s"]:not(:where([data-preview])) .recap-grid div:nth-child(4){background:#fff6cc}