/* A gilded concert programme, with quiet space around the music. */
.entrance-grid { display:grid;grid-template-columns:1fr 1fr;gap:18px; }
.entrance-card { display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:14px;padding:28px;border:1px solid #dabc7560;border-radius:18px;color:var(--text);text-decoration:none;background:radial-gradient(ellipse at 100% 0,#ba8b3838,transparent 75%),#17141a;transition:transform .25s,box-shadow .25s; }
.entrance-card:hover { transform:translateY(-4px);box-shadow:0 12px 40px #0005;border-color:#e8ce91; }
.entrance-listening { background:radial-gradient(ellipse at 100% 0,#4b6b9b55,transparent 75%),#141723; }
.entrance-card .eyebrow { margin:0;text-align:left;font-size:10px; }
.entrance-card strong { font-size:24px;color:#f1dfb8; }
.entrance-card > span:not(.eyebrow):not(.entrance-symbol) { font-size:13px;line-height:1.9; }
.entrance-card .entrance-symbol { font-size:45px;line-height:1.2;color:#e8ce91; }
.entrance-card .entrance-link { margin-top:auto;padding-top:8px;color:#e8ce91; }
.text-button { width:auto;background:none;border:0;padding:8px 0;margin-bottom:18px;color:var(--gold);font-size:13px; }
@media(max-width:600px) { .entrance-grid{grid-template-columns:1fr}.entrance-card{padding:23px}.entrance-card strong{font-size:23px} }
:root { --gold: #e8ce91; --border: #b99b5b45; --radius: 24px; }
body { background: radial-gradient(ellipse at 50% 0, #55401e3b, transparent 60%), radial-gradient(ellipse at 0 65%, #43213735, transparent 55%), #09090e; }
body::before { content: ''; position: fixed; inset: 12px; border: 1px solid #dfbf6c24; pointer-events: none; z-index: 2; }
.wrap { max-width: 980px; padding-top: 28px; }
header { padding: 12px 0 8px; }
.title-container { flex-wrap: nowrap; }
.title-image-cropped { max-width: 210px; }
.title-logo { width: 58px; height: 58px; }
.eyebrow { font: 11px 'Cinzel', serif; color: var(--gold); letter-spacing: .32em; text-align: center; margin: 0 0 18px; }
.sub { letter-spacing: .12em; line-height: 1.8; }
.composer-gallery { border-color: #d7b97540; background: linear-gradient(100deg, #171218, #211b17, #171218); margin-bottom: 25px; }
.gallery-title { letter-spacing: .16em; }
.card { background: linear-gradient(135deg, #f9dfa827, #ad7d3510 45%, #e6ca8227); box-shadow: 0 24px 90px #0009, 0 0 60px #d4ac4310; }
.panel { padding: 34px; background: linear-gradient(145deg, #201c18ee, #101017f5 65%); }
.programme-heading { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin: 0 0 25px; padding-bottom: 22px; border-bottom: 1px solid var(--border); }
.programme-heading .eyebrow { text-align: left; margin-bottom: 9px; }
.programme-heading h1 { font-size: clamp(23px, 4vw, 32px); letter-spacing: .07em; }
.programme-heading p:last-child { color: var(--muted); font-size: 13px; line-height: 1.8; margin-bottom: 0; }
.programme-seal { flex: 0 0 76px; height: 76px; border: 1px solid #d9b97780; outline: 1px solid #d9b97730; outline-offset: 5px; border-radius: 50%; display: grid; place-content: center; text-align: center; color: var(--gold); font-size: 29px; background: radial-gradient(circle, #b4934630, transparent 70%); }
.programme-seal small { font: 8px 'Cinzel', serif; letter-spacing: .18em; }
.profile-section { padding: 20px; margin-bottom: 24px; border: 1px solid var(--border); border-radius: 16px; background: #e0bb6110; }
.section-label { font-size: 11px; letter-spacing: .2em; color: var(--gold); margin: 0 0 12px; }
.profile-controls { display: flex; gap: 10px; align-items: end; }
.profile-select { flex: 1; min-width: 0; }
.profile-controls button { width: auto; flex-shrink: 0; padding: 12px; font-size: 13px; }
.profile-note { font-size: 12px; color: var(--muted); line-height: 1.7; margin: 12px 0 0; }
.profile-summary { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 15px; color: var(--muted); font-size: 13px; }
.profile-summary b { color: var(--gold); font-size: 17px; margin-right: 4px; }
.profile-editor { border-top: 1px solid var(--border); padding-top: 18px; margin-top: 18px; }
.profile-editor input { width: 100%; background: #0e0c10; border: 1px solid var(--border); color: var(--text); border-radius: 10px; padding: 12px; font: inherit; }
.editor-actions { display: flex; gap: 10px; margin-top: 12px; }
.editor-actions button { width: auto; }
select { background: #141218; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23e8ce91' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
select option { background: #19151a; color: #f6f1e3; }
button:focus-visible, select:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid #f6dfa5; outline-offset: 4px; }
.btn-start { background: linear-gradient(110deg, #9d742f, #f1d79a 45%, #cba457); color: #21180d; border: 1px solid #f4dda6; box-shadow: 0 6px 28px #d8ad4330; font-weight: 700; letter-spacing: .15em; min-height: 58px; }
.session-user { color: var(--gold); text-align: center; font-size: 13px; letter-spacing: .08em; margin: 0 0 18px; overflow-wrap: anywhere; }
.quiz-progress { width: 100%; height: 3px; accent-color: #dfbd75; display: block; margin-bottom: 24px; border: 0; }
.quiz-progress::-webkit-progress-bar { background: #e8ce911c; }
.quiz-progress::-webkit-progress-value { background: linear-gradient(90deg, #92703b, #ffe6a6); transition: width .5s ease; }
.audio-container { border: 1px solid #ddbe7640; background: radial-gradient(ellipse, #aa854422, transparent 75%), #0a0910; border-radius: 18px; padding: 24px 12px; }
.choice { position: relative; min-height: 82px; border-color: #d6b87835; background: linear-gradient(130deg, #28221c, #15131b); }
.choice:hover:not(:disabled) { border-color: #e9cb89; box-shadow: inset 0 0 24px #ceaa4310, 0 5px 25px #0004; transform: translateY(-2px); }
.feedback-overlay.correct, .feedback-overlay.wrong { animation: verdictBackdrop 1.5s ease-out both; display: grid; place-items: center; }
.feedback-overlay.correct { background: radial-gradient(ellipse, #d8b56330, transparent 68%); }
.feedback-overlay.wrong { background: radial-gradient(ellipse, #9f3f6140, transparent 68%); }
.verdict-card { min-width: 210px; padding: 25px 38px; text-align: center; color: #fce8b6; border: 1px solid #e8ca87aa; border-radius: 20px; background: #17121aef; box-shadow: 0 0 80px #d5ab5340; animation: verdictEnter .45s ease-out both; }
.verdict-card strong { display: block; font: 30px 'Cinzel', serif; letter-spacing: .08em; }
.verdict-card span { display: block; margin-top: 8px; font-size: 15px; }
.verdict-card i { display: block; font-style: normal; font-size: 42px; margin-bottom: 8px; }
.wrong .verdict-card { color: #ffd3db; border-color: #d77b92; box-shadow: 0 0 70px #9c365a40; }
.confetti { position: fixed; left: var(--x); top: -24px; width: 7px; height: 15px; background: var(--foil); z-index: 999; pointer-events: none; animation: foilFall var(--duration) ease-in var(--delay) both; }
@keyframes foilFall { 0% { opacity: 0; transform: translateY(-10px) rotate(0); } 10% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--drift), 95vh) rotate(650deg); } }
@keyframes verdictEnter { from { opacity: 0; transform: translateY(15px) scale(.88); } to { opacity: 1; transform: none; } }
@keyframes verdictBackdrop { 0% { opacity: 0; } 15%, 65% { opacity: 1; } 100% { opacity: 0; } }
.welcome-content { padding: 25px; }
.welcome-btn { width: auto; }
.welcome-title { line-height: 1.3; }
#welcomeScreen { background: radial-gradient(ellipse at 50% 35%, #49362380, transparent 65%), #09080efc; }
#welcomeScreen::before { content: ''; position: absolute; inset: 22px; border: 1px solid #d9b97750; pointer-events: none; }
.result-score { text-shadow: 0 0 45px #d5ab5325; }
#status { margin: 0 0 20px; font-size: 12px; }
.storage-warning { color: #ffcfb0; font-size: 13px; line-height: 1.7; padding: 12px; border: 1px solid #d39a6560; border-radius: 10px; }
@media (max-width: 600px) {
  .title-image-cropped { max-width: 155px; }
  .title-logo { width: 36px; height: 36px; }
  .sub { font-size: 12px; letter-spacing: .04em; }
  .composer-gallery { margin: 16px 0; padding: 14px 0; }
  .gallery-title { font-size: 10px; margin-bottom: 12px; }
  .composer-frame { width: 74px; margin: 0 10px; }
  .frame-outer { padding: 4px; }
  .frame-inner { padding: 2px; }
  .frame-mat { padding: 3px; }
  .composer-name { font-size: 9px; }
  .composer-gallery::before, .composer-gallery::after { width: 25px; }
  body::before { inset: 5px; }
  .wrap { padding-top: 16px; }
  .panel { padding: 22px 18px; }
  .profile-section { padding: 15px; }
  .profile-controls { flex-wrap: wrap; }
  .profile-select { flex-basis: 100%; }
  .profile-controls button { flex: 1; }
  .programme-seal { flex-basis: 55px; height: 55px; font-size: 23px; }
  .programme-heading h1 { font-size: 23px; }
  .programme-heading p:last-child { font-size: 12px; }
  .eyebrow { font-size: 9px; letter-spacing: .2em; }
  .profile-summary { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  #floatingCanvas, .sparkle, .confetti { display: none !important; }
  .feedback-overlay.correct, .feedback-overlay.wrong { opacity: 1; }
  .gallery-track { transform: none !important; }
}
[data-performance-game][hidden]{display:none!important}

/* Salon audio and the collection invitation. */
#btnReveal[hidden]{display:none!important}
.credits-body a,.credits-body a:visited,#roundSource,#roundSource:visited,#playingSource,#playingSource:visited{color:#f1d79a;text-decoration:underline;text-underline-offset:3px}
.credits-body a:hover,.credits-body a:focus-visible{color:#fff4d4}
.salon-sound-bar{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:10px;font-size:12px;color:var(--muted);margin:16px 0}
.salon-sound-bar button{width:auto;padding:8px 14px;min-height:38px;font-size:12px}
.salon-sound-bar details{flex-basis:100%;max-width:700px;text-align:left}.salon-sound-bar summary{cursor:pointer;text-align:center;color:#e8ce91}.salon-sound-bar .credits-body{font-size:12px;overflow-wrap:anywhere}
#status.catalog-ready{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);padding:0;border:0}
.catalog-showcase{position:relative;text-align:center;padding:30px 22px;margin-bottom:28px;border:1px solid #e8ce9160;border-radius:20px;background:radial-gradient(ellipse at 50% 0,#b28b4538,transparent 75%),linear-gradient(145deg,#241c20,#13111a)}
.catalog-showcase[hidden]{display:none}.catalog-showcase .eyebrow{margin-bottom:10px}.catalog-showcase h2{margin:0;line-height:1.2}.catalog-showcase h2>span{display:block;font-family:'Cinzel',serif;font-size:clamp(64px,12vw,100px);letter-spacing:.04em;color:#ffe6ad;text-shadow:0 3px 28px #e8bd5640}.catalog-showcase h2 small{display:block;font-size:clamp(17px,3.5vw,25px);color:#f5e6c4;letter-spacing:.07em;margin-top:6px}.catalog-showcase>p{line-height:1.8;color:#ddd1bb;font-size:14px}.catalog-badges{display:flex;justify-content:center;flex-wrap:wrap;gap:8px}.catalog-badges span{border:1px solid #e8ce913a;border-radius:999px;padding:7px 13px;color:#ead3a3;font-size:12px}.catalog-showcase .catalog-note{font-size:10px;margin:14px 0 0;color:#b9ac97}

.answer-groups{display:grid;gap:22px}.answer-groups section h3{font-size:15px;color:#f1d79a;letter-spacing:.12em;margin:12px 0}.choice.is-selected{border-color:#f1d79a;box-shadow:inset 0 0 22px #d8ad4335;background:linear-gradient(130deg,#44351f,#241b20)}.btn-submit-answer{margin:22px 0 8px;min-height:54px;width:100%}.choice.answer-correct:disabled{opacity:1;border-color:#f9e3a7;color:#fff0c5;box-shadow:0 0 20px #e8ce9170,inset 0 0 20px #d8ad4330;animation:answerGlow 1.4s ease-in-out infinite alternate}.choice.answer-wrong:disabled{opacity:1;border-color:#c88091;box-shadow:none}.answer-verdict{display:block;color:#ffe7a6;font-size:12px;margin-top:6px;letter-spacing:.12em}.answer-wrong .answer-verdict{color:#ffbdcd}@keyframes answerGlow{from{box-shadow:0 0 12px #e8ce9140}to{box-shadow:0 0 24px #e8ce9190}}@media(prefers-reduced-motion:reduce){.choice.answer-correct:disabled{animation:none;box-shadow:0 0 20px #e8ce9170}}

.answer-verdict{flex-shrink:0;white-space:nowrap;min-width:3em;margin-left:8px}
.entrance-card .menu-illustration{--menu-icon-bg:#1b2232;display:grid;place-items:center;width:76px;height:76px;flex-shrink:0;border:1px solid #e8ce9140;border-radius:18px;background:radial-gradient(ellipse at 35% 20%,#e8ce911c,transparent 85%),var(--menu-icon-bg);box-shadow:inset 0 1px #fff1;color:#e8ce91}.menu-illustration svg{display:block;width:60px;height:60px}.entrance-quiz .menu-illustration{--menu-icon-bg:#2c241e}.entrance-card:hover .menu-illustration{border-color:#e8ce9180}

/* Immediate entry on small screens, with the full illustrated menu retained. */
.quick-start{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap;margin:0 0 20px;position:relative;z-index:1}
.quick-start button,.quick-start a{width:auto;min-height:44px;padding:10px 14px;font-size:14px;color:var(--gold);border:1px solid var(--border);border-radius:12px;text-decoration:none}
#quizSetup{scroll-margin-top:16px}#quizSetup .section-label{font-size:16px}
@media(max-width:600px){.quick-start{margin:0 0 12px;gap:8px}.quick-start button{flex-basis:100%}.quick-start a{flex:1}.quick-start+*{margin-top:0}}

.renewal-announcement{display:flex;align-items:center;gap:14px;max-width:700px;margin:0 auto 24px;padding:14px 18px;border:1px solid #d7b77866;border-radius:12px;background:linear-gradient(110deg,#72522a30,#2c213e40);color:#eed6a4;text-align:left;text-decoration:none}.renewal-badge{flex:none;font:11px/1.4 Georgia,serif;letter-spacing:.13em;padding:7px 9px;border:1px solid #d7b77855;border-radius:6px}.renewal-announcement strong{display:block;font-size:15px;line-height:1.6}.renewal-announcement small{display:block;margin-top:3px;font-size:12px;line-height:1.7;color:#d1c7b4}.renewal-announcement:hover{border-color:#f0d495;background-color:#d7b77812}.renewal-announcement:focus-visible{outline:3px solid #f0d495;outline-offset:4px}@media(max-width:480px){.renewal-announcement{padding:12px;gap:10px}.renewal-badge{font-size:9px;padding:6px}.renewal-announcement strong{font-size:14px}}