/* Raas Rang — ticket pages (success, ticket link, find my tickets). Builds on styles.css tokens. */
.success-page { align-items: start; }
.tickets-state, .tickets-view { max-width: 980px; margin: 0 auto; }
.tickets-state { padding: 40px 22px 32px; text-align: center; max-width: 620px; }
.tickets-state .logo, .tv-head .logo { width: 132px; margin: 0 auto 8px; }
.tv-head { text-align: center; }
.tv-head .lede { margin-top: 10px; }

.tv-warning {
  display: grid; gap: 4px; margin: 24px auto 0; max-width: 640px; padding: 14px 18px; border-radius: 14px; text-align: center;
  border: 1px solid rgba(224, 122, 110, .55); background: linear-gradient(180deg, rgba(122, 15, 24, .55), rgba(34, 4, 10, .7));
}
.tv-warning strong { font: 700 .72rem/1.4 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: #F6C3B9; }
.tv-warning span { color: var(--cream-2); font-size: 1rem; }
.tv-actions { display: flex; flex-direction: column; gap: 10px; justify-content: center; margin: 20px auto 6px; max-width: 640px; }
@media (min-width: 560px) { .tv-actions { flex-direction: row; } }
.tv-foot { margin: 22px auto 0; max-width: 40em; text-align: center; color: var(--cream-3); font-size: 1rem; }
.tv-foot a { color: var(--gold-hi); }
.tickets-view .success-tip { max-width: 640px; margin-left: auto; margin-right: auto; }
.tickets-view .footer-tag { text-align: center; margin-top: 22px; }

/* ---------------------------------------------------------- ticket card */
.tk-grid { display: grid; gap: 22px; margin-top: 26px; grid-template-columns: minmax(0, 1fr); justify-items: center; }
@media (min-width: 760px) { .tk-grid { grid-template-columns: repeat(2, minmax(0, 360px)); justify-content: center; } }
@media (min-width: 1100px) { .tk-grid { grid-template-columns: repeat(3, minmax(0, 320px)); } }
.tk-grid--single { grid-template-columns: minmax(0, 380px) !important; }

.tk {
  position: relative; width: 100%; max-width: 380px; padding: 18px 18px 16px; border-radius: 24px;
  border: 1px solid rgba(201, 162, 74, .7);
  background: radial-gradient(120% 60% at 50% 0%, rgba(201, 162, 74, .18), transparent 60%), linear-gradient(180deg, #7A0F18, #4E0910 46%, #22040A);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9), 0 0 60px -30px rgba(201, 162, 74, .45);
}
.tk::before { content: ""; position: absolute; inset: 6px; border-radius: 19px; border: 1px solid rgba(201, 162, 74, .25); pointer-events: none; }
.tk-head { position: relative; display: flex; align-items: center; gap: 10px; min-height: 56px; padding-bottom: 12px; margin: 0 -18px; padding-left: 18px; padding-right: 18px; border-bottom: 1px dashed rgba(201, 162, 74, .35); }
.tk-logo { width: 46px; height: auto; filter: drop-shadow(0 0 10px rgba(201, 162, 74, .35)); }
.tk-head-text { flex: 1; min-width: 0; }
.tk-brand { margin: 0; font: 600 1.05rem/1.1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--cream); }
.tk-sub { margin: 3px 0 0; font: 600 .56rem/1.3 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.tk-holder {
  flex: none; padding: 6px 10px; border-radius: 999px; background: var(--btn-grad); color: var(--ox-3);
  font: 700 .58rem/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
}
.tk-qr { position: relative; display: grid; place-items: center; margin: 22px auto 14px; padding: 12px; width: max-content; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px rgba(201, 162, 74, .6), 0 20px 40px -20px rgba(0, 0, 0, .8); }
.tk-qr canvas { display: block; image-rendering: pixelated; }
.tk-void-stamp {
  position: absolute; inset: 0; display: grid; place-items: center; transform: rotate(-18deg);
  font: 700 3rem/1 var(--f-ui); letter-spacing: .1em; color: rgba(180, 20, 28, .9); text-shadow: 0 0 2px #fff;
}
.tk--void .tk-qr canvas { opacity: .35; }
.tk-meta { margin: 6px 0 0; display: grid; gap: 0; }
.tk-meta div { display: flex; justify-content: space-between; gap: 14px; padding: 8px 2px; border-bottom: 1px solid rgba(201, 162, 74, .16); }
.tk-meta div:last-child { border-bottom: 0; }
.tk-meta dt { flex: none; font: 600 .56rem/1.8 var(--f-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.tk-meta dd { margin: 0; text-align: right; font-size: 1rem; line-height: 1.35; color: var(--cream); font-variant-numeric: lining-nums; }
.tk-used { margin: 8px 0 0; padding: 8px 10px; border-radius: 10px; background: rgba(18, 54, 52, .5); border: 1px solid rgba(90, 160, 150, .45); color: #CFE9E2; font: 600 .62rem/1.4 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; text-align: center; }
.tk-warn { margin: 10px 0 0; text-align: center; font: 600 .58rem/1.5 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: #F6C3B9; }
.tk-actions { display: grid; gap: 8px; margin-top: 14px; }
.tk-actions .btn { width: 100%; }

/* ---------------------------------------------------------- find form */
.find-card { max-width: 560px; }
.find-form { margin-top: 18px; text-align: left; display: grid; gap: 6px; }
.find-form .btn { margin-top: 12px; width: 100%; }

/* help / community box on ticket pages */
.help-box { max-width: 640px; margin: 22px auto 0; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--line); background: rgba(34, 4, 10, .55); text-align: center; }
.help-box p { margin: 0; color: var(--cream-2); font-size: 1.02rem; line-height: 1.6; }
.help-box strong { color: var(--gold-hi); font-weight: 600; }
.help-box a { color: var(--gold-hi); font-variant-numeric: lining-nums; }
.help-box .help-or { color: var(--cream-3); }
.help-box .help-community { margin-top: 12px; font: 600 .6rem/1.4 var(--f-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--cream-3); }
.community-actions--sm { margin-top: 10px; }
.success-card .help-box { text-align: left; }

/* season 5-night tracker */
.tk-tracker { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.tk-night { display: grid; justify-items: center; gap: 3px; padding: 8px 2px; border-radius: 10px; border: 1px solid rgba(201, 162, 74, .55); background: rgba(34, 4, 10, .55); color: var(--gold-hi); font: 600 .56rem/1.1 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; }
.tk-night b { font-size: 1.05rem; line-height: 1; }
.tk-night.is-used { background: linear-gradient(180deg, rgba(238, 217, 160, .95), rgba(201, 162, 74, .95)); color: var(--ox-3); border-color: var(--gold-hi); }
.tk-night.is-missed { opacity: .45; border-color: rgba(241, 228, 200, .18); color: var(--cream-3); }
.tk-night.is-tonight { outline: 2px solid var(--gold-hi); outline-offset: 1px; }

/* mobile-min-font:start (generated by scripts/mobile_fonts.py) */
@media (max-width: 767px), (pointer: coarse) and (max-height: 500px) {
  .tv-warning strong, .tk-sub, .tk-holder, .tk-meta dt, .tk-used, .tk-warn, .help-box .help-community, .tk-night { font-size: .875rem; letter-spacing: .06em; }
  small { font-size: max(.875rem, 1em); }
}
/* mobile-min-font:end */