/* The Brand Build Up: play layer styles (pairs with assets/js/play.js).
   Logical properties only. Everything here is inert until play.js adds its classes/layers. */
:root{
  --play-ink:var(--ink,#16181D); --play-yellow:var(--yellow,#FFEE8C); --play-card:var(--card,#FFFDF6);
  --play-border:var(--border,#E6E0CC); --play-head:var(--font-head,"Oswald","Arial Narrow",Arial,sans-serif);
}

/* ---------- 1. ticker ---------- */
.play-ticker-on{position:relative;overflow:hidden;
  display:flex;align-items:center;gap:clamp(8px,1.4vw,16px);padding-inline-end:var(--gutter,16px)}
.play-ticker__view{flex:1 1 0;min-inline-size:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.play-ticker__toggle{flex:none;display:grid;place-items:center;inline-size:30px;block-size:30px;padding:0;border:2px solid var(--play-ink);
  border-radius:9px;background:var(--play-yellow);color:var(--play-ink);cursor:pointer;
  transition:transform .25s cubic-bezier(.2,.8,.2,1),background .25s}
.play-ticker__toggle:hover{transform:translateY(-1px);background:#fff4ad}
.play-ticker__toggle:focus-visible{outline:3px solid var(--play-yellow);outline-offset:3px}
.play-ticker__icon{inline-size:10px;block-size:12px;background:linear-gradient(90deg,currentColor 0 36%,transparent 36% 64%,currentColor 64%)}
.play-ticker-on.is-paused .play-ticker__icon{background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%);inline-size:11px}
html[dir="rtl"] .play-ticker-on.is-paused .play-ticker__icon{clip-path:polygon(100% 0,0 50%,100% 100%)}
.play-ticker__track{display:flex;inline-size:max-content;will-change:transform}
.play-ticker__group{display:flex;flex:none;margin:0;padding:0;list-style:none}
.play-ticker__group>*{flex:none;display:flex;align-items:center;white-space:nowrap;
  padding-inline:clamp(18px,2.4vw,36px);transform:skewX(var(--play-skew,0deg));transform-origin:50% 100%}
.play-ticker__group>*::before{content:"";flex:none;inline-size:.5em;block-size:.5em;margin-inline-end:clamp(18px,2.4vw,36px);
  background:var(--play-bullet,var(--play-yellow))}
.play-ticker__group a{color:inherit;text-decoration:none}
.play-ticker__group a:hover,.play-ticker__group a:focus-visible{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.2em}
@media (prefers-reduced-motion:reduce){.play-ticker__group>*{transform:none}}

/* ---------- 2. season blocks ---------- */
.play-num{position:absolute;inset-block-start:12px;inset-inline-start:12px;z-index:2;pointer-events:none;
  font:700 .8125rem/1 var(--play-head);letter-spacing:.06em;padding:.4em .6em;border-radius:6px;
  background:var(--play-ink);color:var(--play-yellow);font-variant-numeric:tabular-nums}
.play-blocks{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:clamp(4px,.7vw,10px);
  margin-block-start:clamp(24px,3vw,44px);overflow:clip;pointer-events:none;direction:inherit}
.play-block{position:relative;display:block;block-size:var(--play-blocks-h,clamp(52px,6.5vw,92px));border-radius:clamp(6px,.9vw,12px);
  background:var(--play-yellow);border:2px solid var(--play-ink)}
.play-block__n{position:absolute;inset-block-end:.4em;inset-inline-start:.5em;font:700 clamp(.6875rem,1.3vw,1.0625rem)/1 var(--play-head);
  color:var(--play-ink);font-variant-numeric:tabular-nums;letter-spacing:.03em}
.play-block--last{background:var(--play-ink)}
.play-block--last .play-block__n{color:var(--play-yellow)}
.section--dark .play-block,.play-blocks--on-dark .play-block{border-color:var(--play-yellow)}

/* ---------- 3. fan ---------- */
.play-fan__card{transform-style:preserve-3d;transition:translate .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s cubic-bezier(.2,.8,.2,1)}
.play-fan__card.is-lift{translate:0 -10px;z-index:6!important;box-shadow:0 22px 40px -18px rgba(22,24,29,.35)}
@media (prefers-reduced-motion:reduce){.play-fan__card{transition:none}}

/* ---------- 4. seats ---------- */
.play-seats{--play-bg:var(--cream,#FBF8EE);display:flex;gap:clamp(5px,.9vw,12px);justify-content:center;perspective:700px;pointer-events:none;
  margin-block:clamp(36px,4vw,56px) clamp(8px,1vw,16px)}
.play-seat{--r:clamp(9px,1.6vw,18px);position:relative;flex:1 1 0;max-inline-size:76px;block-size:clamp(46px,6vw,76px);
  border-radius:var(--r) var(--r) 5px 5px;background:var(--play-ink)}
/* cushion: wider, separated from the backrest by a cut of page colour */
.play-seat::before{content:"";position:absolute;inset-inline:-7%;inset-block-end:0;block-size:36%;border-radius:7px 7px 9px 9px;
  background:inherit;box-shadow:0 -4px 0 var(--play-bg)}
.play-seat--open{background:var(--play-card);box-shadow:inset 0 0 0 2px var(--play-ink)}
.play-seat--open::before{box-shadow:0 -4px 0 var(--play-bg),inset 0 0 0 2px var(--play-ink)}
.play-seat--open::after{content:"";position:absolute;inset:-7px -11px;border-radius:calc(var(--r) + 6px);border:3px solid var(--play-yellow);opacity:0}
.play-seats.is-in .play-seat--open{background:var(--play-yellow)}
.play-seats.is-in .play-seat--open::after{opacity:1;animation:play-pulse 2.6s cubic-bezier(.3,0,.2,1) infinite}
.play-seats.is-off .play-seat--open::after{animation-play-state:paused}
@keyframes play-pulse{0%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,238,140,.8)}
  65%,100%{transform:scale(1.035);box-shadow:0 0 0 14px rgba(255,238,140,0)}}
.play-seat__label{position:absolute;inset-block-end:calc(100% + 16px);inset-inline-start:50%;translate:-50% 0;white-space:nowrap;
  font:700 .75rem/1 var(--play-head);letter-spacing:.08em;text-transform:uppercase;padding:.7em 1em;border-radius:99px;
  background:var(--play-ink);color:var(--play-yellow)}
html[dir="rtl"] .play-seat__label{translate:50% 0}
html[lang="ar"] .play-seat__label{letter-spacing:0;text-transform:none;font-size:.875rem}
@media (prefers-reduced-motion:reduce){
  .play-seat--open::after{opacity:1;animation:none}
  .play-seats .play-seat--open{background:var(--play-yellow)}}