/* Talks: a paper telly for the one player, and a reel of ticket stubs. */

.title-bubble {
  position: relative;
  padding: 22px 30px 16px;
  font: 400 54px/1 var(--font-head);
  color: #fff;
  white-space: nowrap;
  background-color: var(--tomato);
  border-radius: 30px;
  transform: rotate(-2deg);
  filter: var(--lift);
}
.title-bubble::after {
  content: '';
  position: absolute;
  left: 46px; bottom: -24px;
  width: 36px; height: 30px;
  background: inherit;
  clip-path: polygon(0 0, 100% 0, 10% 100%);
}

/* ---- the telly ---- */
.tv-row { display: grid; grid-template-columns: 1.55fr 1fr; gap: 40px; align-items: center; margin: 104px 0 56px; }
.tv {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 84px;
  gap: 18px;
  padding: 22px;
  background-color: var(--mustard);
  border-radius: 30px;
  filter: var(--lift);
}
.tv .ant { position: absolute; bottom: 100%; left: 52%; width: 4px; height: 62px; background: var(--ink); border-radius: 2px; transform-origin: bottom center; }
.tv .ant::after { content: ''; position: absolute; top: -6px; left: -4px; width: 12px; height: 12px; border-radius: 50%; background: var(--tomato); }
.tv .a1 { transform: rotate(-30deg); }
.tv .a2 { transform: rotate(26deg); }
.tv .key { width: 104px; left: 22%; top: -92px; }
.tv .screen { background: var(--ink); border-radius: 20px; padding: 12px; }
.tv .panel { display: flex; flex-direction: column; align-items: center; gap: 16px; padding-top: 6px; }
.tv .knob { position: relative; width: 54px; height: 54px; border-radius: 50%; background-color: var(--cream); background-image: var(--grain); filter: var(--lift); }
.tv .knob::after { content: ''; position: absolute; left: 50%; top: 6px; width: 5px; height: 18px; margin-left: -2.5px; background: var(--tomato); border-radius: 3px; }
.tv .k2 { transform: rotate(70deg); }
.tv .grille { width: 58px; height: 96px; border-radius: 6px; background: repeating-linear-gradient(transparent 0 7px, rgba(0, 0, 0, .32) 7px 10px); }
.tv .foot { position: absolute; bottom: -14px; width: 34px; height: 16px; background: var(--ink); border-radius: 0 0 8px 8px; }
.tv .f1 { left: 16%; }
.tv .f2 { right: 16%; }

.now { position: relative; padding: 30px 28px 26px; background-color: var(--cream); transform: rotate(1.2deg); filter: var(--lift); }
.now .tape { left: 50%; top: -14px; transform: translateX(-50%) rotate(3deg); }
.now .kick { font: 700 12px var(--font-type); letter-spacing: 1.5px; text-transform: uppercase; color: var(--tomato-ink); }
.now h2 { margin: 8px 0 10px; font: 400 30px/1.05 var(--font-head); }
.now .ev { margin-bottom: 10px; font-weight: 800; font-size: 14px; }
.now p { font-size: 15px; line-height: 1.55; }
.now a { display: inline-block; margin-top: 12px; font-weight: 700; }

/* ---- the reel ---- */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 24px; }
.filters .lbl { margin-right: 6px; font: 700 23px var(--font-hand); color: var(--cream); }
.fb {
  padding: 7px 13px 6px;
  border: 0;
  font: 700 14px var(--font-body);
  background-color: var(--news);
  background-image: var(--grain);
  filter: var(--lift);
  cursor: pointer;
  transition: transform .15s;
}
.fb:nth-of-type(odd) { transform: rotate(-1.5deg); }
.fb:nth-of-type(even) { transform: rotate(1.5deg); }
.fb.on { background-color: var(--tomato); transform: translateY(-3px) scale(1.06); }

.tickets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 22px; }
.tk {
  position: relative;
  display: block;
  color: inherit;
  text-decoration: none;
  padding: 0;
  border: 0;
  text-align: left;
  background: none;
  cursor: pointer;
  filter: var(--lift);
  transition: transform .15s;
}
.tk[hidden] { display: none; }
.tk:nth-child(3n+1) { transform: rotate(-1deg); }
.tk:nth-child(3n+2) { transform: rotate(.8deg); }
.tk:hover, .tk:focus-visible { transform: translateY(-4px) rotate(-1.5deg); }
.ticket {
  display: grid;
  grid-template-columns: 1fr 36px;
  height: 100%;
  background-color: var(--c);
  background-image: var(--grain);
  -webkit-mask: radial-gradient(circle 9px at calc(100% - 36px) 0, #0000 97%, #000) top / 100% 51% no-repeat,
                radial-gradient(circle 9px at calc(100% - 36px) 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle 9px at calc(100% - 36px) 0, #0000 97%, #000) top / 100% 51% no-repeat,
                radial-gradient(circle 9px at calc(100% - 36px) 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
}
.ticket .main { display: block; padding: 10px 10px 12px; }
.ticket img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 3px; }
.ticket .t { display: block; margin-top: 9px; font: 800 14px/1.25 var(--font-body); }
.ticket .stub {
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 2px dashed rgba(29, 27, 25, .4);
  writing-mode: vertical-rl;
  white-space: nowrap;
  font: 700 11px var(--font-type);
  letter-spacing: 2px;
  text-transform: uppercase;
}
.onair {
  position: absolute;
  z-index: 2;
  top: -10px; left: -8px;
  display: none;
  padding: 3px 7px;
  font: 800 11px var(--font-body);
  letter-spacing: 1px;
  background: var(--tomato);
  transform: rotate(-6deg);
}
.tk.playing .onair { display: block; }

@media (max-width: 1100px) {
  .tickets { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .tv-row { grid-template-columns: 1fr; }
  .now { transform: rotate(.6deg); }
  .tickets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .title-bubble { font-size: 40px; white-space: normal; }
  .tv-row { margin-top: 92px; gap: 34px; }
  .tv { grid-template-columns: 1fr; padding: 14px; border-radius: 22px; }
  .tv .panel { display: none; }
  .tv .key { width: 86px; top: -78px; }
  .tk:nth-child(n) { transform: none; }
}
@media (max-width: 520px) {
  .tickets { grid-template-columns: 1fr; }
}