/* PianoGuessr — concert-program aesthetic. Ivory paper, ebony ink, brass and piano black lacquer. */ :root { --paper: #f3ebdb; --paper-2: #fbf6ea; --paper-3: #efe5cf; --ink: #221d17; --ink-soft: #6f6350; --line: rgba(60, 48, 28, 0.18); --line-strong: rgba(60, 48, 28, 0.4); --brass: #976b1d; --brass-2: #b8862c; --felt: #8e3b3b; --good: #3c7a57; --good-bg: #e7efe4; --bad: #a04338; --bad-bg: #f3e2dc; --lacquer: #14110d; --serif: "Fraunces", "Iowan Old Style", Georgia, serif; /* surfaces promoted from former hard-coded values, so the dark theme can swap them */ --glow: #faf4e6; --selection-bg: #e6d3a8; --field: #fffdf6; --placeholder: #a09277; --on-lacquer: #f6efdd; --on-lacquer-strong: #ffffff; --line-faint: rgba(60, 48, 28, 0.08); --switch-bg: rgba(251, 246, 234, 0.82); --switch-shadow: rgba(60, 48, 28, 0.12); --overlay-text: #b3a486; --btn-primary-top: #332c24; --btn-primary-hover-top: #403830; --btn-primary-hover-bottom: #211c16; --btn-primary-border: #14110d; --danger-on: #ffffff; } /* ---------- dark theme: "Recital After Hours" — the concert hall at night ---------- The same lacquered program with the house lights down: warm near-black surfaces, ivory ink, brass lifted one step so it glows. Driven by data-theme on , set before first paint by an inline script, so the explicit toggle always beats the OS. */ html[data-theme="dark"] { --paper: #16130f; --paper-2: #211d17; --paper-3: #0f0c09; --ink: #f0e7d3; --ink-soft: #b6a888; --line: rgba(214, 196, 156, 0.16); /* 0.46 alpha keeps the input / outlined-button rim ≥ 3:1 on every dark surface (WCAG 1.4.11) */ --line-strong: rgba(214, 196, 156, 0.46); --brass: #d6a23f; --brass-2: #e3b85a; --good: #7fc89a; --good-bg: #1c2a22; --bad: #e6897a; --bad-bg: #2e1d1a; --lacquer: #0b0907; --glow: #2a2114; --selection-bg: #5c4a26; --field: #181410; --placeholder: #9c8f6e; --on-lacquer: #f4ecd8; --on-lacquer-strong: #fffaf0; --line-faint: rgba(214, 196, 156, 0.1); --switch-bg: rgba(33, 29, 23, 0.86); --switch-shadow: rgba(0, 0, 0, 0.45); --overlay-text: #c2b189; --btn-primary-top: #3a3025; --btn-primary-hover-top: #4a3d2c; --btn-primary-hover-bottom: #15110b; --btn-primary-border: rgba(214, 196, 156, 0.3); --danger-on: #1a0e0b; } /* On the now-dark page the piano-black primary button needs a luminous edge, and the warm card shadow is invisible, so depth is rebuilt with a brass rim and a deeper shadow. */ html[data-theme="dark"] .btn.primary { box-shadow: inset 0 1px 0 rgba(255, 236, 190, 0.14), 0 0 0 1px rgba(214, 196, 156, 0.1), 0 4px 14px -6px rgba(0, 0, 0, 0.8); } html[data-theme="dark"] .btn.primary:hover:not(:disabled) { border-color: rgba(227, 184, 90, 0.5); } html[data-theme="dark"] .card { box-shadow: inset 0 1px 0 rgba(255, 236, 190, 0.05), 0 16px 32px -26px rgba(0, 0, 0, 0.7); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--serif); font-size: 17px; line-height: 1.55; background: radial-gradient(120% 60% at 50% -10%, var(--glow) 0%, transparent 60%), linear-gradient(var(--paper), var(--paper-3)); background-attachment: fixed; color: var(--ink); min-height: 100vh; display: flex; flex-direction: column; } ::selection { background: var(--selection-bg); } /* ---------- header ---------- */ header { text-align: center; padding: 2.6rem 1rem 0.4rem; } .overline { margin: 0 0 0.4rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink-soft); } header h1 { margin: 0; font-size: clamp(2.6rem, 7vw, 3.6rem); font-weight: 600; font-variation-settings: "opsz" 144; letter-spacing: -0.01em; line-height: 1.05; } .ornament { display: flex; align-items: center; justify-content: center; gap: 0.8rem; margin: 0.7rem auto 0; max-width: 280px; color: var(--brass); font-size: 0.95rem; } .ornament span { flex: 1; border-top: 1px solid var(--line-strong); } .tagline { margin: 0.6rem auto 0; max-width: 34em; font-style: italic; color: var(--ink-soft); } main { flex: 1; width: 100%; max-width: 700px; margin: 0 auto; padding: 1.4rem 1rem 2rem; } /* ---------- welcome piano ---------- */ .piano-case { background: linear-gradient(#26201a, #0e0c09 70%); border-radius: 12px 12px 8px 8px; padding: 0.9rem 0.9rem 0.8rem; margin: 0.6rem auto 0; max-width: 560px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 35px -22px rgba(25, 18, 8, 0.7); } .piano-felt { height: 4px; margin: 0 2px 6px; border-radius: 2px; background: linear-gradient(#a14a4a, #7a3030); } .mini-piano { display: flex; height: 118px; touch-action: none; user-select: none; -webkit-user-select: none; } .kw { position: relative; flex: 1; } .key { border: none; padding: 0; margin: 0; cursor: pointer; font: inherit; } .key.white { position: absolute; inset: 0; background: linear-gradient(#fdfaf0 0%, #f1e9d6 85%, #e2d6bb 100%); border-right: 1px solid #b6ab94; border-radius: 0 0 4px 4px; box-shadow: inset 0 -6px 8px -6px rgba(90, 70, 40, 0.55); } .kw:first-child .key.white { border-radius: 3px 0 4px 4px; } .kw:last-child .key.white { border-right: none; border-radius: 0 3px 4px 4px; } .key.white:hover { background: linear-gradient(#fffdf6 0%, #f6efdd 85%, #e7dcc2 100%); } .key.white.down { background: linear-gradient(#efe6cf, #e0d3b4); box-shadow: inset 0 3px 6px rgba(80, 60, 30, 0.3); } .key.black { position: absolute; z-index: 2; top: 0; right: -19%; width: 38%; height: 60%; background: linear-gradient(#4a443b 0%, #15120e 25%, #060504 100%); border-radius: 0 0 3px 3px; box-shadow: 0 3px 4px rgba(0, 0, 0, 0.55), inset 0 -7px 0 -4px rgba(255, 255, 255, 0.07); } .key.black:hover { background: linear-gradient(#575045 0%, #1d1913 25%, #0a0806 100%); } .key.black.down { height: 58%; background: linear-gradient(#3a352d 0%, #100d0a 30%, #050403 100%); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); } .key:focus-visible { outline: 2px solid var(--brass-2); outline-offset: -2px; } .piano-hint { text-align: center; font-style: italic; font-size: 0.92rem; color: var(--ink-soft); margin: 0.7rem 0 1.6rem; } /* ---------- cards ---------- */ .card { background: var(--paper-2); border: 1px solid var(--line); border-radius: 10px; padding: 1.5rem 1.6rem; margin-bottom: 1.3rem; box-shadow: 0 1px 2px rgba(70, 55, 30, 0.06), 0 16px 32px -26px rgba(70, 55, 30, 0.45); } .card.center { text-align: center; } .card h2 { margin: 0 0 0.3rem; font-size: 1.45rem; font-weight: 600; font-variation-settings: "opsz" 100; } .card-sub { margin: 0 0 0.9rem; font-style: italic; font-size: 0.92rem; color: var(--ink-soft); } .card > p:first-of-type:not(.card-sub) { margin-top: 0.2rem; } /* hand-program-style list, with leader dots */ .program { list-style: none; margin: 1rem 0 1.2rem; padding: 0; } .program li { display: flex; align-items: baseline; padding: 0.3rem 0; } .program li span { display: flex; flex: 1; align-items: baseline; } .program li span::after { content: ""; flex: 1; margin: 0 0.6em; border-bottom: 2px dotted var(--line-strong); transform: translateY(-4px); } .program li b { color: var(--brass); font-weight: 600; white-space: nowrap; } /* ---------- forms ---------- */ form#start-form { display: flex; gap: 0.7rem; margin-top: 0.4rem; flex-wrap: wrap; } form#start-form input { flex: 1 1 200px; } form#start-form .btn { flex: 1 0 auto; } /* sign-in action, sat right under the #auth-note that justifies it */ .auth-actions { display: flex; } .auth-actions .btn { flex: 1; } input[type="text"], input[type="password"], input[type="url"] { padding: 0.7rem 0.9rem; border-radius: 6px; border: 1px solid var(--line-strong); background: var(--field); color: var(--ink); font: inherit; font-size: 1rem; min-width: 0; } input::placeholder { color: var(--placeholder); font-style: italic; } input:focus-visible { outline: 2px solid var(--brass-2); outline-offset: 1px; border-color: transparent; } /* ---------- buttons ---------- */ .btn { padding: 0.65rem 1.3rem; border-radius: 6px; border: 1px solid var(--line-strong); background: transparent; color: var(--ink); font: inherit; font-size: 0.98rem; font-weight: 500; letter-spacing: 0.02em; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, transform 0.06s ease; } .btn:hover:not(:disabled) { background: var(--ink); color: var(--paper-2); } .btn:active:not(:disabled) { transform: translateY(1px); } .btn:disabled { opacity: 0.4; cursor: not-allowed; } .btn:focus-visible { outline: 2px solid var(--brass-2); outline-offset: 2px; } /* piano black lacquer */ .btn.primary { background: linear-gradient(var(--btn-primary-top), var(--lacquer) 55%); border-color: var(--btn-primary-border); color: var(--on-lacquer); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 2px 4px rgba(40, 30, 15, 0.25); } .btn.primary:hover:not(:disabled) { background: linear-gradient(var(--btn-primary-hover-top), var(--btn-primary-hover-bottom) 55%); color: var(--on-lacquer-strong); } .btn.big { width: 100%; margin-top: 1.1rem; font-size: 1.08rem; padding: 0.85rem; } .error { color: var(--bad); } /* ---------- game ---------- */ .game-header { display: flex; justify-content: space-between; align-items: baseline; margin: 0.4rem 0.2rem 0.9rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft); } #score-indicator { color: var(--brass); font-size: 0.95rem; letter-spacing: 0.1em; } #score-indicator.pop { animation: score-pop 0.45s ease; } @keyframes score-pop { 0% { transform: scale(1); } 35% { transform: scale(1.25); } 100% { transform: scale(1); } } .player-box { margin-bottom: 1.4rem; } #media-container { position: relative; border-radius: 8px; overflow: hidden; background: var(--lacquer); aspect-ratio: 16 / 7; box-shadow: 0 14px 30px -20px rgba(25, 18, 8, 0.8); } /* The video stays hidden behind the layer: only the audio is heard, until the answer is locked in and the cover lifts (see "the reveal" below). */ #media-container iframe, #yt-player { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; /* No transition here on purpose: when a round resets, the cover must snap back instantly so the next clip's video never peeks through. The fade-in lives on the .revealed rule below, so it only animates in the reveal direction. */ } .listening-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.7rem; /* stage spotlight over black lacquer */ background: radial-gradient(85% 70% at 50% 12%, #322618 0%, #181208 45%, #0c0a07 100%); } .listening-overlay p { margin: 0; font-style: italic; font-size: 0.95rem; color: var(--overlay-text); letter-spacing: 0.04em; } /* keyboard edge in the dim light */ .overlay-keys { position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: repeating-linear-gradient(90deg, #efe5cf 0 16px, #4b4232 16px 17px); opacity: 0.1; } .equalizer { display: flex; gap: 6px; align-items: flex-end; height: 46px; } .equalizer span { width: 5px; border-radius: 3px; background: linear-gradient(var(--brass-2), #7c5a1a); height: 12px; animation: bounce 1s ease-in-out infinite; } .equalizer.paused span { animation-play-state: paused; height: 8px; opacity: 0.55; } .equalizer span:nth-child(1) { animation-duration: 0.9s; } .equalizer span:nth-child(2) { animation-duration: 1.15s; animation-delay: 0.12s; } .equalizer span:nth-child(3) { animation-duration: 0.8s; animation-delay: 0.25s; } .equalizer span:nth-child(4) { animation-duration: 1.25s; animation-delay: 0.05s; } .equalizer span:nth-child(5) { animation-duration: 0.95s; animation-delay: 0.3s; } .equalizer span:nth-child(6) { animation-duration: 1.1s; animation-delay: 0.18s; } .equalizer span:nth-child(7) { animation-duration: 0.85s; animation-delay: 0.4s; } @keyframes bounce { 0%, 100% { height: 9px; } 50% { height: 46px; } } /* ---------- the reveal: the cover lifts once the answer is locked in ---------- */ /* YouTube: raise the curtain clear out of frame, so the video shows underneath. Transitions live here (not on the base rules) so the cover only animates on the way up; on reset it snaps back instantly and hides the next clip at once. */ #media-container.revealed.is-youtube #yt-player, #media-container.revealed.is-youtube iframe { opacity: 1; transition: opacity 0.6s ease 0.15s; } #media-container.revealed.is-youtube .listening-overlay { transform: translateY(-100%); opacity: 0; pointer-events: none; transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s ease; } /* Audio: there is no video to show, so the listening room itself lights up — the spotlight warms, the equalizer swells and glows, and the keyboard runs a glissando of light, as if an unseen pianist's hand swept across it. */ #media-container.revealed.is-audio .listening-overlay { background: radial-gradient(95% 80% at 50% 22%, #5a4322 0%, #2a1e0e 48%, #0c0a07 100%); transition: background 0.6s ease; } /* the room is lit now, so the caption can step out of the dim and read clearly */ #media-container.revealed.is-audio .listening-overlay p { color: var(--on-lacquer); } #media-container.revealed.is-audio .equalizer { height: 64px; gap: 8px; } #media-container.revealed.is-audio .equalizer span { width: 6px; opacity: 1; background: linear-gradient(var(--brass-2), var(--brass)); box-shadow: 0 0 12px -2px rgba(216, 162, 63, 0.65); animation-name: bounce-tall; animation-play-state: running; } @keyframes bounce-tall { 0%, 100% { height: 14px; } 50% { height: 64px; } } #media-container.revealed.is-audio .overlay-keys { height: 20px; opacity: 0.5; } #media-container.revealed.is-audio .overlay-keys::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 35%, rgba(255, 246, 224, 0.9) 50%, transparent 65%); animation: glissando 1.9s ease-in-out infinite; } @keyframes glissando { 0% { transform: translateX(-115%); } 100% { transform: translateX(115%); } } .player-controls { display: flex; gap: 0.7rem; margin-top: 0.9rem; } .player-controls .btn { flex: 1; } .question h3 { margin: 1.4rem 0 0.7rem; font-size: 1.18rem; font-weight: 600; } .question small { color: var(--brass); font-weight: 500; font-size: 0.8rem; letter-spacing: 0.06em; vertical-align: 0.15em; } .options { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; counter-reset: opt; } @media (max-width: 560px) { .options { grid-template-columns: 1fr; } } /* Give the header room so the fixed top-right controls don't overlap the overline */ @media (max-width: 560px) { header { padding-top: 3.8rem; } } .option { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.75rem 0.9rem; border-radius: 6px; border: 1px solid var(--line); background: var(--field); color: var(--ink); font: inherit; font-size: 0.97rem; cursor: pointer; text-align: left; counter-increment: opt; transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease; } .option::before { content: counter(opt, upper-alpha) "."; font-style: italic; color: var(--brass); min-width: 1.1em; } .option:hover:not(:disabled) { border-color: var(--ink); background: var(--paper-2); } .option.selected { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: var(--paper-2); } .option.correct { border-color: var(--good); box-shadow: inset 0 0 0 1px var(--good); background: var(--good-bg); } .option.wrong { border-color: var(--bad); box-shadow: inset 0 0 0 1px var(--bad); background: var(--bad-bg); } .option:disabled { cursor: default; opacity: 0.85; } .option:focus-visible { outline: 2px solid var(--brass-2); outline-offset: 2px; } .round-result { margin-top: 1.3rem; padding-top: 1.1rem; border-top: 2px dotted var(--line-strong); } .round-result p { margin: 0.25rem 0; } .round-result .points { margin-top: 0.7rem; font-size: 1.35rem; font-weight: 600; color: var(--brass); } .result-good { color: var(--good); } .result-bad { color: var(--bad); } /* Source + creator credit revealed alongside the answer. */ .result-source { margin-top: 0.8rem; font-size: 0.9rem; color: var(--ink-soft); } .result-source p { margin: 0.2rem 0; } .source-label, .credit-label { font-weight: 600; } .result-source a { color: var(--brass); word-break: break-all; } .result-source a:hover { color: var(--brass-2); } /* ---------- leaderboard ---------- */ .leaderboard { list-style: none; margin: 0; padding: 0; counter-reset: rank; } .leaderboard li { display: flex; align-items: baseline; padding: 0.45rem 0.1rem; counter-increment: rank; border-bottom: 1px solid var(--line-faint); } .leaderboard li:last-child { border-bottom: none; } .leaderboard li::before { content: counter(rank, upper-roman); font-style: italic; color: var(--ink-soft); min-width: 2.4rem; } .leaderboard li:nth-child(-n+3)::before { color: var(--brass); font-weight: 600; } .leaderboard .lb-name { flex: 1; display: flex; align-items: baseline; overflow: hidden; } .leaderboard .lb-name::after { content: ""; flex: 1; margin: 0 0.7em; border-bottom: 2px dotted var(--line); transform: translateY(-4px); } .leaderboard .lb-score { font-weight: 600; color: var(--brass); white-space: nowrap; } .leaderboard .empty { justify-content: center; font-style: italic; color: var(--ink-soft); border-bottom: none; } .leaderboard .empty::before { content: ""; min-width: 0; } /* ---------- end ---------- */ .final-score { font-size: 4rem; font-weight: 600; font-variation-settings: "opsz" 144; color: var(--ink); margin: 0.3rem 0 0.1rem; line-height: 1; } .final-score small { display: block; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--brass); margin-top: 0.5rem; } #final-rank { font-style: italic; color: var(--ink-soft); } /* ---------- footer ---------- */ footer { text-align: center; padding: 1.4rem; border-top: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 0.75rem; } footer a { color: var(--ink-soft); font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; } footer a:hover { color: var(--ink); text-decoration: underline; } .top-controls { position: fixed; top: 0.9rem; right: 0.9rem; z-index: 20; display: flex; gap: 0.5rem; } .lang-switch, .theme-switch { display: flex; gap: 0.3rem; padding: 0.3rem; background: var(--switch-bg); border: 1px solid var(--line); border-radius: 6px; backdrop-filter: blur(4px); box-shadow: 0 2px 10px var(--switch-shadow); } .lang-btn, .theme-btn { background: none; border: 1px solid var(--line-strong); color: var(--ink-soft); font-family: var(--serif); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; padding: 0.28rem 0.6rem; cursor: pointer; border-radius: 3px; transition: background 0.15s, color 0.15s; } /* the theme toggle shows a glyph (☀ / ☾) rather than letters, so give it a little more room */ .theme-btn { font-size: 0.95rem; line-height: 1; padding: 0.2rem 0.55rem; } .lang-btn:hover, .theme-btn:hover { background: var(--ink); color: var(--paper-2); border-color: var(--ink); } .lang-btn.active, .theme-btn.active { background: var(--ink); color: var(--paper-2); border-color: var(--ink); } /* ---------- admin ---------- */ .admin-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; } .admin-table th, .admin-table td { padding: 0.6rem 0.5rem; text-align: left; border-bottom: 1px solid var(--line); } .admin-table th { color: var(--ink-soft); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; } .admin-table td a { color: var(--brass); word-break: break-all; } .admin-form { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 0.8rem; } .btn.danger { border-color: var(--bad); color: var(--bad); background: transparent; } .btn.danger:hover:not(:disabled) { background: var(--bad); color: var(--danger-on); } .ok { color: var(--good); } /* ---------- reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { .equalizer span { animation: none; height: 24px; } #score-indicator.pop { animation: none; } /* the reveal becomes an instant cut: no curtain slide, no glissando, no swell */ #media-container.revealed.is-youtube #yt-player, #media-container.revealed.is-youtube iframe, #media-container.revealed.is-youtube .listening-overlay, #media-container.revealed.is-audio .listening-overlay { transition: none; } #media-container.revealed.is-audio .equalizer span { animation: none; height: 40px; } #media-container.revealed.is-audio .overlay-keys::after { animation: none; } }