/* LAST NIGHT AT THE BIJOU — the picture palace is drawn on a canvas; this file styles the piano console below it
   (mahogany, brass, ivory stops), the little cards that appear over the house, and the menus.
   No inline styles anywhere: the page runs under a strict Content Security Policy. */
:root {
  --serif: Didot, "Bodoni 72", "Bodoni MT", "Playfair Display", "Hoefler Text", Georgia, "Times New Roman", serif;
  --hand: "Bradley Hand", "Segoe Print", "Snell Roundhand", "Apple Chancery", "Comic Sans MS", cursive;
  --ink: #2a1a10;
  --paper: #f4ecd8;
  --gold: #c9a24e;
  --gold2: #f2d27a;
  --velvet: #7e1622;
  --mood: #c9a24e;
  color-scheme: dark; /* one look: a dark picture palace */
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #0a0506; color: var(--paper); overflow: hidden; }
body { font-family: var(--serif); -webkit-tap-highlight-color: transparent; overscroll-behavior: none; touch-action: manipulation; }
button { font-family: inherit; }
.stage { position: fixed; left: 0; top: 0; display: block; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.noscript { padding: 24px; }

/* ——— the console: an upright piano's front ——— */
.console {
  position: fixed; z-index: 3; display: flex; flex-direction: column; gap: 6px;
  background: linear-gradient(180deg, #4a2414 0%, #2e140b 40%, #1d0c06 100%);
  border-top: 2px solid var(--gold);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 220, 160, 0.15);
  padding: 7px max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
}
.dock-bottom .console { left: 0; right: 0; bottom: 0; }
.dock-right .console { top: 0; right: 0; bottom: 0; width: clamp(260px, 33vw, 380px); border-top: 0; border-left: 2px solid var(--gold);
  padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) 8px; justify-content: center; }
.wide .console { padding-left: max(16px, calc((100vw - 1040px) / 2)); padding-right: max(16px, calc((100vw - 1040px) / 2)); }
.plate { display: none; align-self: center; margin-bottom: 8px; padding: 5px 16px; font-size: 12px; font-style: italic; letter-spacing: 0.12em; color: #2a1608;
  background: linear-gradient(#f2d27a, #b68a3a); border-radius: 3px; box-shadow: inset 0 1px 0 #fff3c8, 0 2px 4px rgba(0, 0, 0, 0.5); }
.deck { width: 100%; height: 64px; display: block; border-radius: 4px; background: linear-gradient(#1a0d08, #120805); box-shadow: inset 0 0 0 1px rgba(201, 162, 78, 0.35); }
.keys { width: 100%; height: 20px; display: block; border-radius: 2px; }
.dock-right .deck { height: 70px; }

.stops { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.dock-right .stops { grid-template-columns: repeat(2, 1fr); }
.wide .stops { grid-template-columns: repeat(8, 1fr); }
.stop {
  --c: #c9a24e;
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-height: 52px; padding: 7px 4px 6px; border-radius: 9px 9px 5px 5px; cursor: pointer;
  color: #2a1a10; background: linear-gradient(180deg, #fbf4e3 0%, #ecdfc0 60%, #d6c49c 100%);
  border: 1px solid #6b4f2a; box-shadow: 0 3px 0 #5a3b1c, 0 5px 8px rgba(0, 0, 0, 0.45), inset 0 1px 0 #fff;
  transition: transform 0.06s, box-shadow 0.06s, background 0.2s;
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
.dock-right .stop { min-height: 46px; }
.stop b { font-size: 14px; letter-spacing: 0.12em; font-weight: 700; line-height: 1.05; }
.stop i { font-size: 11px; color: #6b5233; line-height: 1.1; }
.stop .num { position: absolute; left: 7px; top: 4px; font-size: 10px; color: #8a6e48; }
.stop .lamp { position: absolute; right: 7px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--c) 35%, #3a2a1a); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5); }
.stop:hover { background: linear-gradient(180deg, #fffaf0 0%, #f2e6c8 60%, #dccaa2 100%); }
.stop:focus-visible { outline: 2px solid var(--gold2); outline-offset: 2px; }
.stop.on { transform: translateY(3px); box-shadow: 0 0 0 #5a3b1c, 0 0 14px color-mix(in srgb, var(--c) 70%, transparent), inset 0 2px 4px rgba(0, 0, 0, 0.25);
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 30%, #fbf4e3) 0%, color-mix(in srgb, var(--c) 45%, #ecdfc0) 100%); border-color: color-mix(in srgb, var(--c) 60%, #6b4f2a); }
.stop.on .lamp { background: var(--c); box-shadow: 0 0 8px var(--c), 0 0 2px #fff; }
.stop.queued .lamp { animation: blink 0.25s steps(2) infinite; background: var(--c); }
@keyframes blink { 50% { opacity: 0.2; } }
.m-merry { --c: #e8b04a; } .m-hurry { --c: #e06a3a; } .m-love { --c: #e58ab0; } .m-menace { --c: #8e7bd0; }
.m-sorrow { --c: #6fa0c8; } .m-triumph { --c: #f2d27a; } .m-waltz { --c: #9fd0a0; } .m-spooky { --c: #7fc9b8; }
body:not(.played) .stop { animation: beckon 1.6s ease-in-out infinite; }
body:not(.played) .stop.m-merry { animation-delay: 0s; }
@keyframes beckon { 0%, 100% { box-shadow: 0 3px 0 #5a3b1c, 0 5px 8px rgba(0, 0, 0, 0.45), inset 0 1px 0 #fff; } 50% { box-shadow: 0 3px 0 #5a3b1c, 0 0 16px rgba(242, 210, 122, 0.75), inset 0 1px 0 #fff; } }

.bottom { display: grid; grid-template-columns: 48px 1fr 48px; gap: 8px; align-items: stretch; }
.iconbtn { display: grid; place-items: center; min-height: 46px; border-radius: 8px; cursor: pointer; color: var(--gold2);
  background: linear-gradient(#3a1d10, #24100a); border: 1px solid #8a6a2a; box-shadow: inset 0 1px 0 rgba(255, 220, 160, 0.15); }
.iconbtn svg { width: 26px; height: 26px; }
.iconbtn:hover, .iconbtn:focus-visible { border-color: var(--gold2); outline: none; color: #fff2c8; }
.jar[hidden] { display: none; }
.sting {
  display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; border-radius: 10px; cursor: pointer;
  color: #fff2dc; background: radial-gradient(ellipse at 50% 30%, #c4462f 0%, #8c2416 60%, #5e140b 100%);
  border: 2px solid var(--gold); box-shadow: 0 3px 0 #3e0c06, 0 5px 10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 200, 160, 0.35);
  touch-action: manipulation; user-select: none; -webkit-user-select: none; transition: transform 0.05s;
}
.sting b { font-size: 18px; letter-spacing: 0.18em; }
.sting small { font-size: 11px; opacity: 0.7; font-style: italic; }
.dock-bottom:not(.wide) .sting small { display: none; }
.sting:active { transform: translateY(2px); box-shadow: 0 1px 0 #3e0c06, inset 0 2px 4px rgba(0, 0, 0, 0.4); }
.sting.ready { animation: ready 0.3s ease-in-out infinite alternate; }
@keyframes ready { to { box-shadow: 0 3px 0 #3e0c06, 0 0 22px #ffcf6a, inset 0 1px 0 rgba(255, 200, 160, 0.35); border-color: #ffe9a8; } }
.sting.hit { animation: hit 0.5s ease-out; }
@keyframes hit { 0% { background: #ffe08a; color: #3e0c06; transform: scale(1.04); } 100% { } }
.sting.miss { animation: miss 0.3s; }
@keyframes miss { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }

/* ——— cards over the house ——— */
.cards { position: fixed; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: 12px 10px 12px; pointer-events: none; }
.cards[hidden] { display: none; }
.cards.center { justify-content: center; }
.card { pointer-events: auto; width: min(100%, 440px); max-height: 100%; overflow-y: auto; color: var(--ink);
  background: var(--paper); border-radius: 6px; padding: 14px 16px 12px; box-shadow: 0 10px 34px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.3);
  font-size: 15px; line-height: 1.42; transform: translateY(-14px); opacity: 0; transition: transform 0.25s ease-out, opacity 0.25s; }
.card.in { transform: none; opacity: 1; }
.card.out { opacity: 0; transform: translateY(-8px); }
.card.wide { width: min(100%, 520px); }
.card .who { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: #8a5a2a; margin-bottom: 6px; font-weight: 700; }
.card h2 { margin: 0 0 8px; font-size: 22px; line-height: 1.15; font-weight: 700; }
.card h3 { margin: 10px 0 2px; font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; color: #7e1622; }
.card p { margin: 0 0 8px; }
.card p.it { font-style: italic; }
.card p.small { font-size: 13px; color: #6b5233; }
.card ul { list-style: none; margin: 4px 0 8px; padding: 0; max-height: 46vh; overflow-y: auto; font-size: 14px; }
.card li { padding: 5px 0; border-bottom: 1px dotted #c8b48c; }
.card li.got { color: #2a1a10; font-weight: 700; }
.card li.hint { color: #7a6a52; font-style: italic; }
.card .row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.card .go, .card .ghost { flex: 1 1 auto; font: 700 15px/1.15 var(--serif); padding: 11px 14px; border-radius: 6px; cursor: pointer; text-align: center; text-decoration: none; }
.card .go { color: #fff2dc; background: linear-gradient(#8c2416, #5e140b); border: 1px solid #3e0c06; }
.card .go:hover, .card .go:focus-visible { background: linear-gradient(#a8301e, #741a0f); outline: 2px solid var(--gold); outline-offset: 1px; }
.card .ghost { color: var(--ink); background: transparent; border: 1px solid #a48c62; font-weight: 400; }
.card .ghost:hover, .card .ghost:focus-visible { border-color: var(--ink); outline: none; background: rgba(0, 0, 0, 0.04); }
/* who's talking */
.k-dot { background: #f9e4e4; border-left: 5px solid #c0485a; }
.k-penny { background: #ece4f4; border-left: 5px solid #8a6ab0; }
.k-fair { background: #f3ead2; border-left: 5px solid #8a6a2a; }
.k-can { background: repeating-linear-gradient(180deg, #fbf7ea 0, #fbf7ea 25px, #c9d6e8 26px); font-family: var(--hand); font-size: 17px; line-height: 26px; transform: rotate(-1deg) translateY(-14px); }
.k-can.in { transform: rotate(-1deg); }
.k-can .who { font-family: var(--serif); }
.k-program { background: #1b0e0a; color: var(--paper); border: 2px solid var(--gold); text-align: center; outline: 1px solid var(--gold); outline-offset: -7px; padding: 20px 20px 16px; }
.k-program h2 { color: var(--gold2); font-size: 26px; letter-spacing: 0.08em; text-transform: uppercase; }
.k-program p.small { color: #c9b58c; }
.k-program h3 { color: var(--gold2); }
.k-program li.got { color: var(--paper); }
.k-program li.hint { color: #b9a986; }
.k-program li { border-color: #5a4426; text-align: left; }
.k-program .go { background: linear-gradient(#c9a24e, #8a6a2a); color: #1b0e0a; border-color: #f2d27a; }
.k-program .ghost { color: var(--paper); border-color: #8a6a2a; }
.k-program .ghost:hover, .k-program .ghost:focus-visible { border-color: var(--gold2); background: rgba(255, 255, 255, 0.04); }
.k-bugle { background: #f2eee2; font-family: Georgia, "Times New Roman", serif; border-top: 4px double #2a1a10; border-bottom: 4px double #2a1a10; border-radius: 2px; }
.k-bugle .who { text-align: center; font-size: 15px; letter-spacing: 0.2em; color: #2a1a10; border-bottom: 1px solid #2a1a10; padding-bottom: 4px; }
.k-bugle h2 { font-size: 20px; text-align: center; }

/* the ticket stub for a happy accident */
.ticket { position: fixed; z-index: 6; transform: translate(-50%, -140%); min-width: 220px; max-width: min(92vw, 380px); padding: 8px 22px 9px; text-align: center;
  color: #3e0c06; background: #f2c860; border-radius: 4px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  -webkit-mask: radial-gradient(circle at 0 50%, transparent 8px, #000 8.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 8px, #000 8.5px) right / 51% 100% no-repeat;
  mask: radial-gradient(circle at 0 50%, transparent 8px, #000 8.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 8px, #000 8.5px) right / 51% 100% no-repeat;
  transition: transform 0.35s cubic-bezier(0.2, 1.4, 0.5, 1); pointer-events: none; }
.ticket[hidden] { display: none; }
.ticket.show { transform: translate(-50%, 0); }
.ticket .top { display: block; font-size: 11px; letter-spacing: 0.2em; font-weight: 700; }
.ticket b { display: block; font-size: 18px; line-height: 1.2; }
.ticket .sub { display: block; font-size: 12px; font-style: italic; }

.toast { position: fixed; z-index: 7; left: 50%; top: 14px; transform: translateX(-50%); padding: 10px 16px; border-radius: 6px;
  background: var(--paper); color: var(--ink); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5); font-size: 15px; pointer-events: none; }
.toast[hidden] { display: none; }

/* ——— modal panels: the menu, links, signing your performance ——— */
.layer { position: fixed; inset: 0; z-index: 8; display: flex; align-items: center; justify-content: center;
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); background: rgba(10, 4, 4, 0.72); }
.layer[hidden] { display: none; }
.form { width: min(100%, 440px); max-height: 100%; overflow-y: auto; background: #1b0e0a; color: var(--paper);
  border: 2px solid var(--gold); outline: 1px solid var(--gold); outline-offset: -7px; padding: 20px 20px 16px; border-radius: 4px; font: 15px/1.45 var(--serif); }
.form h2 { margin: 0 0 8px; font-size: 22px; color: var(--gold2); text-align: center; letter-spacing: 0.08em; text-transform: uppercase; }
.form p { margin: 0 0 12px; color: #d9c9a6; font-size: 14.5px; }
.form label { display: block; margin: 10px 0 4px; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.08em; color: #b9a986; }
.form input, .form textarea { width: 100%; font: 17px/1.4 var(--serif); color: var(--ink); background: var(--paper); border: 1px solid #8a6a2a; border-radius: 4px; padding: 9px 10px; }
.form input:focus, .form textarea:focus { outline: 2px solid var(--gold2); outline-offset: 1px; }
.form .row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.form button.go, .form a.go { flex: 1 1 auto; font: 700 15px/1.15 var(--serif); padding: 12px 14px; border-radius: 6px; cursor: pointer; text-align: center; text-decoration: none;
  background: linear-gradient(#c9a24e, #8a6a2a); color: #1b0e0a; border: 1px solid #f2d27a; }
.form button.go:hover, .form a.go:hover, .form button.go:focus-visible, .form a.go:focus-visible { background: linear-gradient(#e0bb62, #a07c34); outline: none; }
.form button.ghost { flex: 0 1 auto; font: 15px/1.15 var(--serif); padding: 12px 14px; border-radius: 6px; background: transparent; color: var(--paper); border: 1px solid #8a6a2a; cursor: pointer; }
.form button.ghost:hover, .form button.ghost:focus-visible { border-color: var(--gold2); outline: none; }
.form .link { word-break: break-all; background: #0f0705; border: 1px dashed #8a6a2a; padding: 10px; font-size: 13px; color: var(--gold2); user-select: all; -webkit-user-select: all; border-radius: 4px; }
.form .fine { font-size: 12.5px; color: #b9a986; margin: 10px 0 0; }
.form .err { color: #ff8a7a; font-size: 13px; margin: 8px 0 0; }
.form .count { text-align: right; font-size: 11.5px; color: #b9a986; }
.form h3 { margin: 14px 0 4px; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold2); }
.form ul.acc { list-style: none; margin: 4px 0 4px; padding: 0; font-size: 14px; }
.form ul.acc li { padding: 6px 0; border-bottom: 1px dotted #5a4426; }
.form ul.acc li.got { color: var(--paper); font-weight: 700; }
.form ul.acc li.hint { color: #b9a986; font-style: italic; }
.form .menu-item { display: block; width: 100%; margin: 6px 0 0; padding: 12px 14px; font: 16px/1.2 var(--serif); text-align: left; cursor: pointer;
  color: var(--paper); background: rgba(255, 255, 255, 0.03); border: 1px solid #5a4426; border-radius: 5px; }
.form .menu-item:hover, .form .menu-item:focus-visible { border-color: var(--gold2); color: #fff2c8; outline: none; background: rgba(242, 210, 122, 0.08); }

@media (min-height: 700px) {
  .dock-right .plate { display: block; }
  .dock-right .stop { min-height: 64px; }
  .dock-right .stop b { font-size: 16px; }
  .dock-right .deck { height: 80px; }
  .dock-right .keys { height: 26px; }
  .dock-right .console { gap: 10px; }
  .dock-right .sting { min-height: 58px; }
}
@media (max-height: 560px) and (orientation: landscape) {
  .dock-right .deck { height: 58px; }
  .dock-right .stop { min-height: 40px; padding: 4px; }
  .dock-right .stop i { display: none; }
  .dock-right .keys { height: 14px; }
  .dock-right .console { gap: 5px; }
  .iconbtn, .sting { min-height: 40px; }
}
@media (max-width: 370px) {
  .stop b { font-size: 12px; letter-spacing: 0.06em; }
  .stop i { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  body:not(.played) .stop, .sting.ready { animation: none; }
}