/* ============================================================
   БИЛЕТ НА ИГРУ — ticket.css
   ============================================================ */

/* ---------- БИЛЕТ ---------- */
.ticket {
  position: relative;
  aspect-ratio: 1000 / 340;
  display: flex;
  color: #111;
  font-family: "Arial Black", "Impact", sans-serif;
  container-type: inline-size;
  margin-bottom: 1rem;

  background: #f5d76e;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(150,110,20,.14) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 60%, rgba(150,110,20,.12) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 45% 80%, rgba(150,110,20,.10) 0 2px, transparent 3px),
    radial-gradient(circle at 85% 25%, rgba(150,110,20,.10) 0 1.5px, transparent 2.5px),
    linear-gradient(135deg, #fbe38a 0%, #ecc94b 100%);
  box-shadow: 0 20px 50px rgba(0,0,0,.55);

  /* маска: скруглённые углы + мелкие рваные левый и правый края.
     Радиус угловых вырезов — 3cqw (3% от ширины билета). */
  -webkit-mask:
    radial-gradient(circle 3cqw at 0 0,       transparent 98%, #000 100%),
    radial-gradient(circle 3cqw at 100% 0,    transparent 98%, #000 100%),
    radial-gradient(circle 3cqw at 0 100%,    transparent 98%, #000 100%),
    radial-gradient(circle 3cqw at 100% 100%, transparent 98%, #000 100%),
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 340' preserveAspectRatio='none'>\
<path fill='black' d='\
  M 4 0 \
  L 6 6 L 3 12 L 7 18 L 3 24 L 6 30 L 2 36 L 7 42 L 3 48 L 6 54 \
  L 2 60 L 7 66 L 3 72 L 6 78 L 2 84 L 7 90 L 3 96 L 6 102 L 2 108 L 7 114 \
  L 3 120 L 6 126 L 2 132 L 7 138 L 3 144 L 6 150 L 2 156 L 7 162 L 3 168 L 6 174 \
  L 2 180 L 7 186 L 3 192 L 6 198 L 2 204 L 7 210 L 3 216 L 6 222 L 2 228 L 7 234 \
  L 3 240 L 6 246 L 2 252 L 7 258 L 3 264 L 6 270 L 2 276 L 7 282 L 3 288 L 6 294 \
  L 2 300 L 7 306 L 3 312 L 6 318 L 2 324 L 7 330 L 3 336 L 5 340 \
  L 995 340 \
  L 993 336 L 997 330 L 994 324 L 998 318 L 993 312 L 997 306 L 994 300 L 998 294 \
  L 993 288 L 997 282 L 994 276 L 998 270 L 993 264 L 997 258 L 994 252 L 998 246 \
  L 993 240 L 997 234 L 994 228 L 998 222 L 993 216 L 997 210 L 994 204 L 998 198 \
  L 993 192 L 997 186 L 994 180 L 998 174 L 993 168 L 997 162 L 994 156 L 998 150 \
  L 993 144 L 997 138 L 994 132 L 998 126 L 993 120 L 997 114 L 994 108 L 998 102 \
  L 993 96 L 997 90 L 994 84 L 998 78 L 993 72 L 997 66 L 994 60 L 998 54 \
  L 993 48 L 997 42 L 994 36 L 998 30 L 993 24 L 997 18 L 994 12 L 998 6 L 996 0 \
  Z'/>\
</svg>");
  mask:
    radial-gradient(circle 3cqw at 0 0,       transparent 98%, #000 100%),
    radial-gradient(circle 3cqw at 100% 0,    transparent 98%, #000 100%),
    radial-gradient(circle 3cqw at 0 100%,    transparent 98%, #000 100%),
    radial-gradient(circle 3cqw at 100% 100%, transparent 98%, #000 100%),
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 340' preserveAspectRatio='none'>\
<path fill='black' d='\
  M 4 0 \
  L 6 6 L 3 12 L 7 18 L 3 24 L 6 30 L 2 36 L 7 42 L 3 48 L 6 54 \
  L 2 60 L 7 66 L 3 72 L 6 78 L 2 84 L 7 90 L 3 96 L 6 102 L 2 108 L 7 114 \
  L 3 120 L 6 126 L 2 132 L 7 138 L 3 144 L 6 150 L 2 156 L 7 162 L 3 168 L 6 174 \
  L 2 180 L 7 186 L 3 192 L 6 198 L 2 204 L 7 210 L 3 216 L 6 222 L 2 228 L 7 234 \
  L 3 240 L 6 246 L 2 252 L 7 258 L 3 264 L 6 270 L 2 276 L 7 282 L 3 288 L 6 294 \
  L 2 300 L 7 306 L 3 312 L 6 318 L 2 324 L 7 330 L 3 336 L 5 340 \
  L 995 340 \
  L 993 336 L 997 330 L 994 324 L 998 318 L 993 312 L 997 306 L 994 300 L 998 294 \
  L 993 288 L 997 282 L 994 276 L 998 270 L 993 264 L 997 258 L 994 252 L 998 246 \
  L 993 240 L 997 234 L 994 228 L 998 222 L 993 216 L 997 210 L 994 204 L 998 198 \
  L 993 192 L 997 186 L 994 180 L 998 174 L 993 168 L 997 162 L 994 156 L 998 150 \
  L 993 144 L 997 138 L 994 132 L 998 126 L 993 120 L 997 114 L 994 108 L 998 102 \
  L 993 96 L 997 90 L 994 84 L 998 78 L 993 72 L 997 66 L 994 60 L 998 54 \
  L 993 48 L 997 42 L 994 36 L 998 30 L 993 24 L 997 18 L 994 12 L 998 6 L 996 0 \
  Z'/>\
</svg>");
  -webkit-mask-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  mask-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* ---------- ЦЕЛЬНАЯ ЖИРНАЯ ОБВОДКА ---------- */
.ticket-inner-border {
  position: absolute;
  inset: 6.47%;
  border: 1cqw solid #111;
  border-radius: 2cqw;
  pointer-events: none;
  z-index: 3;
}

/* ---------- ВНУТРЕННЯЯ ОБЛАСТЬ ---------- */
.ticket-inner {
  position: absolute;
  inset: 6.47%;
  display: flex;
  border-radius: 2cqw;
  overflow: hidden;
  z-index: 2;
}

/* ---------- БОКОВЫЕ ПОЛЯ ---------- */
.ticket-side-wrap {
  width: 9%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.ticket-side-wrap.ticket-left::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 1cqw;
  background: #111;
}

.ticket-side-wrap.ticket-right::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1cqw;
  background: #111;
}

.ticket-side {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.6cqw;
  font-weight: 900;
  letter-spacing: 0.3cqw;
  text-transform: uppercase;
  white-space: nowrap;
  color: #111;
}

.ticket-side.ticket-left  { transform: rotate(-90deg); }
.ticket-side.ticket-right { transform: rotate(90deg); }

/* ---------- ЦЕНТР ---------- */
.ticket-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.6cqw 1cqw;
  gap: 0.4cqw;
  z-index: 2;
}

.ticket-line1 {
  font-size: 6.2cqw;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.15cqw;
  text-transform: uppercase;
}

.ticket-line2 {
  font-size: 4cqw;
  font-weight: 800;
  line-height: 1.05;
}

.ticket-line3 {
  font-size: 3.4cqw;
  font-weight: 700;
  line-height: 1.05;
}

.ticket-line4 {
  font-size: 3cqw;
  font-weight: 700;
  line-height: 1.05;
  text-decoration: underline;
  text-underline-offset: 0.6cqw;
  cursor: pointer;
}

.ticket-line4:hover { color: #111; }