#shelf,#panel,#challenge-dialog {
  --ticket-ink:#19353d;
  --ticket-cream:#fff7dc;
  --ticket-red:#b43f28;
  --ticket-gold:#e4b449;
  --ticket-rule:#8b8972;
}
#shelf {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,2vw,30px);
  color:var(--ticket-ink);
}
.program-ticket {
  display:grid;
  grid-template-columns: minmax(0,.88fr) minmax(0,1.12fr);
  min-width:0;
  padding:7px;
  border:1.5px solid var(--ticket-ink);
  background:#f8efd7;
  box-shadow:3px 4px 0 #253a3a;
}
.program-ticket:nth-child(even) {background:#f4e4b5}
@media (prefers-reduced-motion: no-preference) {
  #shelf[data-filter] > * { animation: program-seat .22s cubic-bezier(.2,.78,.3,1) both; }
  #shelf[data-filter] > :nth-child(2) { animation-delay: .035s; }
  @keyframes program-seat {
    from { opacity:.8; transform:translateY(5px) rotate(-.25deg); }
    to { opacity:1; transform:none; }
  }
}
.program-picture {
  display:block;position:relative;align-self:stretch;overflow:hidden;
  border:0;padding:0;background:var(--ticket-ink);cursor:pointer;min-height:176px;
}
.program-picture img {
  display:block;width:100%;height:100%;position:absolute;inset:0;object-fit:cover;
  transition:transform .3s ease;
}
.program-picture:hover img,.program-picture:focus-visible img {transform:scale(1.05)}
.program-body {
  position:relative;display:flex;flex-direction:column;justify-content:center;
  margin-left:7px;padding:12px clamp(10px,1.25vw,22px);border-left:1px dashed var(--ticket-rule);
}
.program-kind,.ticket-type,.ticket-facts {
  margin:0;color:#5a5747;font-size:12px;font-weight:650;line-height:1.4;letter-spacing:.045em;
}
.program-body h3 {
  margin:5px 0 7px;font-family:"STSong","SimSun","Songti SC",serif;font-size:clamp(23px,2.1vw,33px);
  font-weight:900;line-height:1.15;letter-spacing:-.035em;color:var(--ticket-ink);
}
.program-description {
  margin:0;color:#454a40;font-size:13px;line-height:1.65;
}
.program-actions,.code-actions {
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:13px;
}
.program-play,.program-details,.ticket-flip,.ticket-enter {
  display:inline-flex;align-items:center;justify-content:center;gap:.45em;
  font:inherit;font-weight:720;font-size:13px;text-decoration:none;cursor:pointer;
}
.program-play {
  min-height:32px;padding:5px 10px;border:1px solid var(--ticket-ink);background:var(--ticket-ink);color:#fff4ce;
}
.program-play:hover {background:#34524c}
.program-details,.ticket-flip {
  border:0;background:transparent;color:var(--ticket-ink);padding:4px 0;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;
}
.program-details:hover,.ticket-flip:hover {color:var(--ticket-red)}
.program-empty {
  grid-column:1/-1;padding:30px 24px;border-block:1px dashed var(--ticket-rule);
}
.program-empty h3 {margin:0 0 8px;font-size:21px}

#panel,#challenge-dialog {
  color:var(--ticket-ink);border:0;border-radius:0;isolation:isolate;
  width:min(560px,calc(100% - 28px));max-height:calc(100dvh - 28px);
  padding:0;background:var(--ticket-cream);
  box-shadow:6px 8px 0 #131e20a6,0 15px 65px #0005;overscroll-behavior:contain;
}
#panel::backdrop,#challenge-dialog::backdrop {background:#152722ba;backdrop-filter:blur(3px)}
body:has(#panel[open],#challenge-dialog[open]) {overflow:hidden}
#panel #close-panel,#challenge-dialog #close-challenge {
  position:absolute;z-index:2;right:10px;top:7px;width:34px;height:34px;display:grid;place-items:center;
  margin:0;padding:0;border:1px solid #83785d;border-radius:50%;cursor:pointer;font:600 21px/1 sans-serif;
  background:#f9eed1;color:#21363d;
}
#close-panel svg,#close-challenge svg {width:17px;height:17px}
#panel #close-panel:hover,#challenge-dialog #close-challenge:hover {background:#edcc82}
.issued-ticket {
  position:relative;overflow:hidden;background:repeating-linear-gradient(8deg,#efe1b800 0 3px,#a8803910 3px 4px),var(--ticket-cream);
}
.ticket-band {
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:49px;padding:0 57px 0 22px;border-bottom:2px solid var(--ticket-ink);
  color:var(--ticket-ink);font-size:12px;font-weight:750;letter-spacing:.05em;
}
.ticket-band [lang=en] {font:700 10px/1.2 Consolas,monospace;letter-spacing:.15em}
.ticket-paper {padding:16px 20px 18px;transform-origin:50% 5%;animation:ticket-turn .28s ease-out}
@keyframes ticket-turn{from{transform:perspective(600px) rotateX(-9deg);opacity:.7}to{transform:perspective(600px) rotateX(0);opacity:1}}
.ticket-plate {position:relative;background:var(--ticket-ink);border:1px solid var(--ticket-ink)}
.ticket-cover {display:block;width:100%;height:auto;aspect-ratio:2.5;object-fit:cover}
.ticket-stamp {
  position:absolute;right:12px;bottom:-13px;display:grid;place-items:center;
  border:3px double #a93925;background:#f6eacdf5;color:#a93925;transform:rotate(-11deg);
  padding:1px 7px;font:900 clamp(17px,2vw,23px)/1.35 "STSong","SimSun",serif;letter-spacing:3px;
  box-shadow:inset 0 0 0 1px #a93925;animation:ticket-stamp .32s cubic-bezier(.15,.8,.2,1.12) .09s both;
}
@keyframes ticket-stamp {from{opacity:0;transform:translateY(-18px) rotate(-17deg) scale(1.6)}to{opacity:1;transform:rotate(-11deg)}}
.ticket-info {padding-top:16px}
#panel h2 {
  margin:6px 0 8px;font:900 clamp(27px,4.4vw,40px)/1.1 "STSong","SimSun","Songti SC",serif;letter-spacing:-.035em;color:var(--ticket-ink);
}
.ticket-description {margin:0;color:#39403b;font-size:14px;line-height:1.7}
.ticket-tear {
  position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 20px;border-top:2px dashed #a99a75;background:#e9d6a52b;
}
.ticket-tear::before,.ticket-tear::after {
  content:"";position:absolute;top:-7px;width:12px;height:12px;border-radius:50%;background:#48514a;
}
.ticket-tear::before {left:-7px}.ticket-tear::after {right:-7px}
.ticket-enter {
  min-height:41px;padding:8px 18px;border:1.5px solid #802e21;color:#fff8de;
  background:var(--ticket-red);box-shadow:2px 2px 0 #71392e;
}
.ticket-enter:hover {background:#9d3323}.ticket-enter:active {box-shadow:none;transform:translate(2px,2px)}
.ticket-reverse {min-height:230px;padding:4px}
.ticket-reverse h2 {margin-bottom:14px!important}
.ticket-stills {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:13px 0}
.ticket-stills figure {padding:4px;margin:0;border:1px solid #b9a780;background:#fbf4de}
.ticket-stills img {display:block;aspect-ratio:1.25;width:100%;object-fit:cover}
.ticket-stills figcaption {margin:3px 0 0;font-size:11px;color:#555447;line-height:1.5}
.ticket-facts {margin-top:10px}
.ticket-keymap {display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin:18px 0;color:var(--ticket-ink)}
.ticket-keymap span {display:grid;place-items:center;padding:12px 0;background:#e7c871;border:1px solid var(--ticket-ink);font:700 17px/1.1 monospace}
.ticket-keymap span:nth-child(2){background:#a7bba2}.ticket-keymap span:nth-child(3){background:#d99573}.ticket-keymap span:nth-child(4){background:#9faaae}
.ticket-code {padding:26px 26px 22px}
.ticket-code>p {font-size:14px}
.ticket-code>img {display:block;width:min(190px,100%);margin:15px auto}
#shelf :focus-visible,#panel :focus-visible,#challenge-dialog :focus-visible {outline:3px solid #be492c;outline-offset:3px}
@media (max-width:1020px) {
  .program-ticket {grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr)}
  .program-actions {gap:8px}
}
@media (max-width:790px) {
  #shelf {grid-template-columns:minmax(0,1fr)}
  .program-ticket {grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
  .program-picture {min-height:150px}
  .program-body {padding:12px 16px}
}
@media (max-width:460px) {
  .program-ticket {grid-template-columns:minmax(0,.66fr) minmax(0,1.34fr);padding:5px}
  .program-body {margin-left:5px;padding:9px 8px}
  .program-picture {min-height:142px}
  .program-body h3 {font-size:24px;margin:4px 0}
  .program-kind {font-size:10px}
  .program-description {font-size:12px;line-height:1.55}
  .program-actions {margin-top:8px}
  .program-details,.program-play {font-size:12px}
  .ticket-band {padding-left:14px;font-size:11px}
  .ticket-band [lang=en] {font-size:9px}
  .ticket-paper {padding:12px}
  .ticket-tear {padding:11px 14px}
}
@media (prefers-reduced-motion:reduce) {
  .ticket-paper,.ticket-stamp {animation:none}
  .program-picture img {transition:none}
}