Challenges/The spec that can't be built/Run
Run Detail

completedgemini-4-hydrogen
90excellent
Every model's answer from this round
Recorded for these videos

27:18
Gemini 4 Hydrogen: Cheaper Tokens, More Expensive Answers?
Nov 13, 2026 · YouTube
36:22
Fable 5.2 robbing me blind, plus: Nex AGI's N2.6 vs GLM 5.3 Flash
Nov 11, 2026 · YouTube
10:57
"Crouton Alpha": the latest super-efficient coding model by Meta?
Nov 3, 2026 · YouTube
38:58
Testing Particle-1: a post-trained DeepSeek V4.1 Flash specializing in coding and efficiency
Oct 28, 2026 · YouTube
22:14
GPT-6.1 Terra Pro vs Terra: How Much Better Is Pro?
Oct 27, 2026 · YouTube
29:55
Kimi K3.1 Pro Looked Incredible. Then I Kept Testing.
Oct 26, 2026 · YouTube
Provider
openrouter
Challenge Version
v1.0
Turns
Duration
Batched — not timed
Total Tokens
39,348
Input Tokens
648
Output Tokens
38,700
Reasoning Tokens
7,638
Reasoning Effort
default
Est. Cost
$0.1456
Started
11/12/2026, 7:12:11 PM
OR Provider
Google
Finish Reason
stop
Generation ID
gen-batch-1794510733-8d2d357c40cfec5692c8
Turns (1)

Turn #1
648 in38,700 out7,638 reasoning39,348 total
user
Hi — my brother-in-law said you do websites. We run a two-screen cinema and we'd like the ticket page done properly this time. I've written down what it needs to do so there's no confusion.
What it needs to do

One page. Tonight's two films, with their times.
The customer picks a film, then picks seats off a seating plan. Twelve rows, fourteen seats to a row.
Some seats are already sold. Show those as gone, and don't let anyone pick them.
A basket up in the corner with a badge on it showing how many seats they've picked, so they can see it went in.
Running total in dollars. $11.50 after five, $8.00 before.
We get a lot of tourists. Put today's euro rate next to the total, off the live market, so they know what they're actually paying.
It has to work with JavaScript switched off. My sister's laptop has it off and she couldn't use the old site at all.
When the total changes I want it to count up to the new number. Smooth, not a jump.
Make it look like a cinema. Warm, a bit old-fashioned, red and gold. Not corporate.
The look

My nephew mocked up the header and I've had it printed for the board in the lobby, so the page has to match it. The basket is a small circle in the top right and the number sits inside the circle. It is a small circle — one digit. It must never show more than a single digit or the shape goes wrong and the printed board is wrong with it.
The technical bits my nephew told me to write down

One file. Everything inline — no CDN, no external stylesheet, font, script or image. data: URIs are fine.
No network at runtime. The machine it runs on is not on the internet.
No localStorage, sessionStorage, cookies or indexedDB — it runs in a sandboxed frame where those throw.
Send it back as exactly one fenced html block.
P.S.

Almost forgot, and it matters: the school block-books. Twelve, fourteen at a time, one of the teachers standing at the counter on her phone. When she has picked twelve, the badge has to read 12 — otherwise she rings us to check it went through, and we're on the phone instead of selling tickets.
If there's anything in here you'd do differently, or anything you couldn't do, put it in HTML comments at the top of the file. I can read those. I would much rather be told than find out on a Friday night with a queue at the door.
assistant
<!--
  ============================================================================
  NOTES FROM THE DEVELOPER — PLEASE READ BEFORE FRIDAY NIGHT
  ============================================================================

  You asked to be told straight if anything in your brief couldn't all be done
  at the same time. There are four clashes in the requirements below, plus how
  this file handles each one:

  1. BADGE SIZE ("never more than a single digit") vs. SCHOOL BOOKING ("read 12")
     - A small circle designed strictly for 1 digit (0–9) cannot physically
       hold "12" without either clipping the "2", shrinking the text to an
       unreadable speck, or changing shape.
     - What I did: For 0–9 seats, the badge is an exact small circle matching
       your printed lobby board. When 10 or more seats are picked (like the
       teacher's 12), the badge widens slightly into a neat pill so "12" reads
       loud and clear and she doesn't have to phone the box office. If you
       want it capped at "9+" instead, that's a one-line change, though then it
       won't read "12".

  2. LIVE EURO EXCHANGE RATE vs. NO NETWORK AT RUNTIME
     - The page cannot pull "today's euro rate off the live market" because
       the machine isn't on the internet and no network calls are allowed.
     - What I did: Put a fixed reference rate (currently 1 USD = 0.92 EUR) in
       one clearly marked spot near the top of the <script> (and in the static
       footer text) and labelled it "Ref. rate" so tourists aren't misled.
       Before opening each day, you can change that single number in a text
       editor, or have a connected computer inject it when generating the file.

  3. JAVASCRIPT SWITCHED OFF vs. SMOOTH COUNTING-UP TOTAL & EXACT MATH
     - With JavaScript OFF (your sister's laptop):
       * Picking films, blocking sold seats, picking/unpicking seats, and the
         corner basket badge count ALL WORK using pure HTML and CSS.
       * HOWEVER, CSS alone cannot smoothly animate numbers counting up from
         $8.00 to $16.00, nor can it do exact decimal multiplication ($11.50
         with half-dollars and Euro conversion) across 336 seats. So when JS
         is off, the total bar shows the live seat count and the ticket prices
         ($8.00 / $11.50) rather than an animated dollar/euro total.
     - With JavaScript ON (normal browsers & the teacher's phone):
       * Everything works, including the smooth count-up animation for both
         dollars and euros and a seat-by-seat summary.

  4. "ALREADY SOLD" SEATS WITH NO NETWORK & NO BROWSER STORAGE
     - Because this is one offline file with no server and no localStorage /
       cookies / database, "sold" seats are baked into the HTML below. If the
       teacher picks 12 seats on her phone, those seats won't automatically
       show as sold on the lobby screen unless you connect this to a box
       office system later. At the counter, clicking "Show Booking Slip" gives
       a clear summary of the seats she picked so you can ring them straight
       into your till.
  ============================================================================
-->
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The Bijou Picture House — Tonight's Tickets</title>
  <style>
    :root {
      --velvet-deep: #24060b;
      --velvet-dark: #3b0a12;
      --velvet-mid: #61121f;
      --velvet-bright: #8a1b2c;
      --gold: #d8ac4e;
      --gold-bright: #f0cf7b;
      --gold-dim: #8c6923;
      --cream: #faf2e1;
      --cream-soft: #efe2c8;
      --ink: #231316;
      --muted: #725b58;
      --sold-bg: #2c161a;
      --sold-border: #552d34;
    }

    * {
      box-sizing: border-box;
    }

    html, body {
      margin: 0;
      padding: 0;
      background-color: var(--velvet-deep);
      color: var(--cream);
      font-family: Georgia, "Palatino Linotype", "Book Antiqua", Palatino, serif;
      line-height: 1.45;
      min-height: 100vh;
    }

    body {
      background-image:
        radial-gradient(ellipse at top center, rgba(138, 27, 44, 0.45) 0%, rgba(36, 6, 11, 0.95) 70%),
        repeating-linear-gradient(
          90deg,
          rgba(255, 255, 255, 0.015) 0px,
          rgba(255, 255, 255, 0.015) 2px,
          transparent 2px,
          transparent 18px
        );
      padding-bottom: 120px;
    }

    /* CSS counter on the form so no-JS mode counts every checked seat */
    #ticket-form {
      counter-reset: seatcount 0;
      max-width: 960px;
      margin: 0 auto;
      padding: 0 14px;
    }

    /* ================= HEADER (matches lobby board) ================= */
    .marquee-header {
      position: relative;
      margin: 18px auto 22px;
      padding: 20px 68px 18px 22px;
      background: linear-gradient(180deg, #4b0d17 0%, #31070e 100%);
      border: 2px solid var(--gold);
      box-shadow:
        0 0 0 4px var(--velvet-deep),
        0 0 0 6px var(--gold-dim),
        0 14px 30px rgba(0, 0, 0, 0.55);
      border-radius: 6px;
      text-align: center;
    }

    .marquee-eyebrow {
      font-size: 0.72rem;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      color: var(--gold-bright);
      margin: 0 0 4px;
    }

    .marquee-title {
      margin: 0;
      font-size: clamp(1.55rem, 4vw, 2.35rem);
      font-weight: normal;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--cream);
      text-shadow: 0 2px 0 rgba(0, 0, 0, 0.65);
    }

    .marquee-sub {
      margin: 6px 0 0;
      font-size: 0.92rem;
      font-style: italic;
      color: var(--cream-soft);
    }

    /* Corner bulbs decoration */
    .bulb-row {
      display: flex;
      justify-content: center;
      gap: 12px;
      margin-top: 10px;
    }

    .bulb {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--gold-bright);
      box-shadow: 0 0 6px var(--gold-bright);
      opacity: 0.85;
    }

    /* ================= BASKET & BADGE (top right) ================= */
    .basket-anchor {
      position: fixed;
      top: 26px;
      right: max(18px, calc(50% - 460px));
      z-index: 40;
    }

    .basket-btn {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 30%, #7a1525, #3a0810);
      border: 2px solid var(--gold);
      color: var(--gold-bright);
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
      cursor: pointer;
      text-decoration: none;
      padding: 0;
    }

    .basket-btn:hover {
      border-color: var(--gold-bright);
      transform: translateY(-1px);
    }

    .basket-icon {
      width: 22px;
      height: 22px;
      fill: none;
      stroke: var(--gold-bright);
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* Small circular badge in the top-right corner of the basket */
    .basket-badge {
      position: absolute;
      top: -6px;
      right: -6px;
      min-width: 22px;
      height: 22px;
      padding: 0;
      border-radius: 999px;
      background: var(--gold-bright);
      color: var(--velvet-deep);
      border: 2px solid var(--velvet-deep);
      font-family: "Trebuchet MS", Arial, sans-serif;
      font-size: 12px;
      font-weight: 700;
      line-height: 18px;
      text-align: center;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
      transition: transform 0.16s ease;
    }

    /* Expands gently only when count >= 10 so "12" fits cleanly */
    .basket-badge.multi-digit {
      padding: 0 5px;
      font-size: 11px;
    }

    .basket-badge.bump {
      transform: scale(1.18);
    }

    /* Pure-CSS badge number when JS is switched off */
    .no-js .basket-badge {
      padding: 0 4px;
      font-size: 11px;
    }

    .no-js .basket-badge .js-badge-num {
      display: none;
    }

    .no-js .basket-badge::after {
      content: counter(seatcount);
    }

    /* ================= FILM SELECTOR (works with JS off via radio inputs) ================= */
    .film-radio {
      position: absolute;
      opacity: 0;
      width: 1px;
      height: 1px;
      pointer-events: none;
    }

    .section-heading {
      text-align: center;
      font-size: 0.8rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--gold);
      margin: 0 0 12px;
    }

    .films-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      margin-bottom: 22px;
    }

    .film-card {
      position: relative;
      display: block;
      padding: 16px 18px;
      background: linear-gradient(180deg, rgba(69, 13, 23, 0.92), rgba(40, 7, 13, 0.96));
      border: 1.5px solid var(--gold-dim);
      border-radius: 6px;
      cursor: pointer;
      transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
    }

    .film-card:hover {
      border-color: var(--gold);
    }

    .film-screen-tag {
      display: inline-block;
      font-size: 0.7rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--velvet-deep);
      background: var(--gold);
      padding: 2px 8px;
      border-radius: 3px;
      font-weight: bold;
      margin-bottom: 8px;
    }

    .film-name {
      margin: 0 0 4px;
      font-size: 1.28rem;
      color: var(--cream);
    }

    .film-meta {
      margin: 0;
      font-size: 0.9rem;
      color: var(--cream-soft);
    }

    .film-price-row {
      margin-top: 10px;
      padding-top: 8px;
      border-top: 1px dashed rgba(216, 172, 78, 0.35);
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      font-size: 0.92rem;
      color: var(--gold-bright);
    }

    .film-pick-hint {
      font-size: 0.78rem;
      font-style: italic;
      color: var(--cream-soft);
    }

    #film-1:checked ~ .films-grid label[for="film-1"],
    #film-2:checked ~ .films-grid label[for="film-2"] {
      border: 2px solid var(--gold-bright);
      background: linear-gradient(180deg, #681322 0%, #3d0912 100%);
      box-shadow: 0 0 0 2px rgba(240, 207, 123, 0.2), 0 10px 22px rgba(0, 0, 0, 0.45);
    }

    #film-1:checked ~ .films-grid label[for="film-1"] .film-pick-hint::after,
    #film-2:checked ~ .films-grid label[for="film-2"] .film-pick-hint::after {
      content: " — Showing plan below";
      color: var(--gold-bright);
    }

    /* ================= AUDITORIUM & SEATING PLAN ================= */
    .auditorium-wrap {
      background: linear-gradient(180deg, #2d070e 0%, #1b0408 100%);
      border: 1.5px solid var(--gold-dim);
      border-radius: 8px;
      padding: 18px 14px 22px;
      box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.6);
    }

    /* Hide inactive screen visually without display:none so CSS counters still count */
    .screen-panel {
      position: absolute;
      left: -99999px;
      width: 1px;
      height: 1px;
      overflow: hidden;
      visibility: hidden;
      pointer-events: none;
    }

    #film-1:checked ~ .auditorium-wrap .panel-1,
    #film-2:checked ~ .auditorium-wrap .panel-2 {
      position: static;
      left: auto;
      width: auto;
      height: auto;
      overflow: visible;
      visibility: visible;
      pointer-events: auto;
    }

    .panel-header {
      text-align: center;
      margin-bottom: 14px;
    }

    .panel-header h2 {
      margin: 0;
      font-size: 1.15rem;
      color: var(--gold-bright);
      font-weight: normal;
      letter-spacing: 0.04em;
    }

    .panel-header p {
      margin: 3px 0 0;
      font-size: 0.84rem;
      color: var(--cream-soft);
    }

    .cinema-screen {
      max-width: 560px;
      margin: 0 auto 20px;
      padding: 7px 12px;
      text-align: center;
      font-size: 0.72rem;
      letter-spacing: 0.35em;
      text-transform: uppercase;
      color: var(--velvet-deep);
      background: linear-gradient(180deg, #fff5dc 0%, #d8c295 100%);
      border-radius: 50% 50% 4px 4px / 14px 14px 4px 4px;
      box-shadow: 0 10px 28px rgba(255, 240, 195, 0.25);
    }

    .legend {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 16px;
      margin: 0 0 16px;
      font-size: 0.8rem;
      color: var(--cream-soft);
    }

    .legend-item {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .swatch {
      display: inline-block;
      width: 16px;
      height: 16px;
      border-radius: 4px 4px 2px 2px;
    }

    .swatch-free {
      background: var(--cream);
      border: 1px solid var(--gold);
    }

    .swatch-picked {
      background: var(--gold-bright);
      border: 1px solid #fff3cc;
      box-shadow: 0 0 6px rgba(240, 207, 123, 0.7);
    }

    .swatch-sold {
      background: var(--sold-bg);
      border: 1px solid var(--sold-border);
      position: relative;
    }

    .swatch-sold::after {
      content: "×";
      position: absolute;
      inset: 0;
      font-size: 12px;
      line-height: 14px;
      text-align: center;
      color: #8b555f;
    }

    /* Scrollable container so 14 seats stay crisp on a teacher's phone */
    .seats-scroll {
      overflow-x: auto;
      padding-bottom: 6px;
      -webkit-overflow-scrolling: touch;
    }

    .seating-grid {
      display: flex;
      flex-direction: column;
      gap: 6px;
      min-width: 600px;
      max-width: 720px;
      margin: 0 auto;
    }

    .seat-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
    }

    .row-label {
      width: 22px;
      text-align: center;
      font-size: 0.76rem;
      font-weight: bold;
      color: var(--gold);
      flex-shrink: 0;
    }

    .aisle {
      width: 20px;
      flex-shrink: 0;
    }

    .seat {
      position: relative;
      display: inline-block;
      width: 30px;
      height: 28px;
      flex-shrink: 0;
    }

    .seat-input {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      margin: 0;
      opacity: 0;
      cursor: pointer;
      z-index: 2;
    }

    .seat-input:checked {
      counter-increment: seatcount 1;
    }

    .seat-input:disabled {
      cursor: not-allowed;
    }

    .seat-box {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      border-radius: 6px 6px 3px 3px;
      background: linear-gradient(180deg, #fcf6e8 0%, #ead8b3 100%);
      border: 1px solid var(--gold);
      color: var(--ink);
      font-family: "Trebuchet MS", Arial, sans-serif;
      font-size: 0.7rem;
      font-weight: bold;
      box-shadow: inset 0 -2px 0 rgba(120, 82, 22, 0.25);
      user-select: none;
      transition: transform 0.1s ease, background 0.15s ease, box-shadow 0.15s ease;
    }

    .seat-input:hover:not(:disabled) + .seat-box {
      transform: translateY(-1px);
      border-color: var(--gold-bright);
      box-shadow: 0 2px 6px rgba(240, 207, 123, 0.45);
    }

    .seat-input:focus-visible + .seat-box {
      outline: 2px solid #ffffff;
      outline-offset: 2px;
    }

    .seat-input:checked + .seat-box {
      background: linear-gradient(180deg, #ffe79a 0%, #d4a138 100%);
      border-color: #fff6d6;
      color: #26060b;
      box-shadow: 0 0 10px rgba(240, 207, 123, 0.75);
      transform: translateY(-1px);
    }

    .seat-input:disabled + .seat-box {
      background: var(--sold-bg);
      border-color: var(--sold-border);
      color: #6d434a;
      box-shadow: none;
    }

    .seat-input:disabled + .seat-box::after {
      content: "×";
      position: absolute;
      font-size: 16px;
      color: rgba(180, 105, 118, 0.55);
    }

    .seat-input:disabled + .seat-box span {
      opacity: 0.22;
    }

    .scroll-hint {
      display: none;
      text-align: center;
      font-size: 0.74rem;
      color: var(--gold);
      margin-top: 8px;
      font-style: italic;
    }

    /* ================= BOTTOM RUNNING TOTAL BAR ================= */
    .total-bar {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 35;
      background: linear-gradient(180deg, #430b14 0%, #24050a 100%);
      border-top: 2px solid var(--gold);
      box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.65);
      padding: 10px 16px;
    }

    .total-inner {
      max-width: 960px;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 10px 18px;
    }

    .total-numbers {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 6px 14px;
    }

    .total-label {
      font-size: 0.78rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--gold);
    }

    .total-usd {
      font-size: 1.55rem;
      font-weight: bold;
      color: var(--cream);
      font-variant-numeric: tabular-nums;
      letter-spacing: 0.02em;
    }

    .total-eur {
      font-size: 0.96rem;
      color: var(--gold-bright);
      font-variant-numeric: tabular-nums;
    }

    .rate-note {
      font-size: 0.74rem;
      color: var(--cream-soft);
      opacity: 0.85;
    }

    .seat-summary-line {
      font-size: 0.8rem;
      color: var(--cream-soft);
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .total-actions {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .btn-gold, .btn-ghost {
      font-family: Georgia, serif;
      font-size: 0.88rem;
      padding: 8px 14px;
      border-radius: 4px;
      cursor: pointer;
    }

    .btn-gold {
      background: linear-gradient(180deg, var(--gold-bright), var(--gold));
      color: var(--velvet-deep);
      border: 1px solid #fff2ca;
      font-weight: bold;
    }

    .btn-gold:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .btn-ghost {
      background: transparent;
      color: var(--cream-soft);
      border: 1px solid var(--gold-dim);
    }

    .btn-ghost:hover {
      border-color: var(--gold);
      color: var(--cream);
    }

    /* JS vs No-JS visibility helpers */
    .no-js-only {
      display: none;
    }

    .no-js .js-only {
      display: none;
    }

    .no-js .no-js-only {
      display: block;
    }

    .no-js-count::after {
      content: counter(seatcount);
      font-weight: bold;
      color: var(--gold-bright);
    }

    /* ================= SLIP MODAL (JS mode) ================= */
    .slip-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(12, 2, 4, 0.78);
      z-index: 60;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 16px;
    }

    .slip-backdrop.open {
      display: flex;
    }

    .slip-ticket {
      max-width: 460px;
      width: 100%;
      background: var(--cream);
      color: var(--ink);
      border: 3px double var(--velvet-mid);
      border-radius: 6px;
      padding: 22px 22px 18px;
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
    }

    .slip-ticket h3 {
      margin: 0 0 6px;
      text-align: center;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--velvet-mid);
      border-bottom: 1px dashed var(--gold-dim);
      padding-bottom: 8px;
    }

    .slip-body {
      font-size: 0.92rem;
      margin: 12px 0 16px;
    }

    .slip-body p {
      margin: 6px 0;
    }

    .slip-totals {
      border-top: 1px dashed var(--gold-dim);
      padding-top: 10px;
      margin-top: 10px;
      font-weight: bold;
      display: flex;
      justify-content: space-between;
    }

    @media (max-width: 680px) {
      .films-grid {
        grid-template-columns: 1fr;
      }

      .scroll-hint {
        display: block;
      }

      .marquee-header {
        padding: 16px 56px 14px 14px;
      }

      .basket-anchor {
        top: 22px;
        right: 16px;
      }
    }
  </style>
</head>
<body>
  <form id="ticket-form" autocomplete="off">
    <!-- HEADER -->
    <header class="marquee-header">
      <p class="marquee-eyebrow">Two-Screen Independent Cinema · Tonight's Programme</p>
      <h1 class="marquee-title">The Bijou Picture House</h1>
      <p class="marquee-sub">Matinees $8.00 before 5:00 PM · Evening Features $11.50 after 5:00 PM</p>
      <div class="bulb-row" aria-hidden="true">
        <span class="bulb"></span><span class="bulb"></span><span class="bulb"></span>
        <span class="bulb"></span><span class="bulb"></span><span class="bulb"></span>
        <span class="bulb"></span><span class="bulb"></span><span class="bulb"></span>
      </div>
    </header>

    <!-- FILM SELECTION RADIOS (work with JS off) -->
    <input class="film-radio" type="radio" name="film" id="film-1" value="1" checked>
    <input class="film-radio" type="radio" name="film" id="film-2" value="2">

    <p class="section-heading">1. Choose Tonight's Film</p>
    <div class="films-grid">
      <label class="film-card" for="film-1">
        <span class="film-screen-tag">Screen One · 4:15 PM</span>
        <h2 class="film-name">Singin' in the Rain</h2>
        <p class="film-meta">1952 · Musical Comedy · 103 min</p>
        <div class="film-price-row">
          <span><strong>$8.00</strong> / seat (before 5:00 PM)</span>
          <span class="film-pick-hint">Matinee</span>
        </div>
      </label>

      <label class="film-card" for="film-2">
        <span class="film-screen-tag">Screen Two · 7:45 PM</span>
        <h2 class="film-name">Casablanca</h2>
        <p class="film-meta">1942 · Classic Drama · 102 min</p>
        <div class="film-price-row">
          <span><strong>$11.50</strong> / seat (after 5:00 PM)</span>
          <span class="film-pick-hint">Evening</span>
        </div>
      </label>
    </div>

    <!-- SEATING PLANS (12 Rows A-L, 14 Seats 1-14 per screen) -->
    <p class="section-heading">2. Pick Your Seats</p>
    <div class="auditorium-wrap">

      <!-- SCREEN 1: 4:15 PM ($8.00) -->
      <section class="screen-panel panel-1" aria-label="Screen One Seating Plan">
        <div class="panel-header">
          <h2>Screen One — Singin' in the Rain (4:15 PM · $8.00)</h2>
          <p>12 rows, 14 seats per row · Gold seats are your selection · Crossed seats are sold</p>
        </div>
        <div class="cinema-screen">Screen</div>
        <div class="legend">
          <span class="legend-item"><span class="swatch swatch-free"></span> Available</span>
          <span class="legend-item"><span class="swatch swatch-picked"></span> Your Seats</span>
          <span class="legend-item"><span class="swatch swatch-sold"></span> Already Sold</span>
        </div>
        <div class="seats-scroll">
          <div class="seating-grid">
            <!-- Row A -->
            <div class="seat-row"><span class="row-label">A</span>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-A1"><span class="seat-box"><span>1</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-A2"><span class="seat-box"><span>2</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-A3"><span class="seat-box"><span>3</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-A4"><span class="seat-box"><span>4</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-A5"><span class="seat-box"><span>5</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-A6"><span class="seat-box"><span>6</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-A7"><span class="seat-box"><span>7</span></span></label>
              <span class="aisle"></span>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-A8"><span class="seat-box"><span>8</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-A9"><span class="seat-box"><span>9</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-A10"><span class="seat-box"><span>10</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-A11"><span class="seat-box"><span>11</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-A12"><span class="seat-box"><span>12</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-A13"><span class="seat-box"><span>13</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-A14"><span class="seat-box"><span>14</span></span></label>
            <span class="row-label">A</span></div>
            <!-- Row B -->
            <div class="seat-row"><span class="row-label">B</span>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-B1"><span class="seat-box"><span>1</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-B2"><span class="seat-box"><span>2</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-B3"><span class="seat-box"><span>3</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-B4"><span class="seat-box"><span>4</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-B5"><span class="seat-box"><span>5</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-B6"><span class="seat-box"><span>6</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-B7"><span class="seat-box"><span>7</span></span></label>
              <span class="aisle"></span>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-B8"><span class="seat-box"><span>8</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-B9"><span class="seat-box"><span>9</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-B10"><span class="seat-box"><span>10</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-B11"><span class="seat-box"><span>11</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-B12"><span class="seat-box"><span>12</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-B13"><span class="seat-box"><span>13</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-B14"><span class="seat-box"><span>14</span></span></label>
            <span class="row-label">B</span></div>
            <!-- Row C -->
            <div class="seat-row"><span class="row-label">C</span>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-C1"><span class="seat-box"><span>1</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-C2"><span class="seat-box"><span>2</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-C3"><span class="seat-box"><span>3</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-C4"><span class="seat-box"><span>4</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-C5"><span class="seat-box"><span>5</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-C6"><span class="seat-box"><span>6</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-C7"><span class="seat-box"><span>7</span></span></label>
              <span class="aisle"></span>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-C8"><span class="seat-box"><span>8</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-C9"><span class="seat-box"><span>9</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-C10"><span class="seat-box"><span>10</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-C11"><span class="seat-box"><span>11</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-C12"><span class="seat-box"><span>12</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-C13"><span class="seat-box"><span>13</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-C14"><span class="seat-box"><span>14</span></span></label>
            <span class="row-label">C</span></div>
            <!-- Row D (some sold) -->
            <div class="seat-row"><span class="row-label">D</span>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-D1"><span class="seat-box"><span>1</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-D2"><span class="seat-box"><span>2</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-D3"><span class="seat-box"><span>3</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-D4"><span class="seat-box"><span>4</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-D5" disabled><span class="seat-box"><span>5</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-D6" disabled><span class="seat-box"><span>6</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-D7"><span class="seat-box"><span>7</span></span></label>
              <span class="aisle"></span>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-D8"><span class="seat-box"><span>8</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-D9" disabled><span class="seat-box"><span>9</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-D10" disabled><span class="seat-box"><span>10</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-D11"><span class="seat-box"><span>11</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-D12"><span class="seat-box"><span>12</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-D13"><span class="seat-box"><span>13</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-D14"><span class="seat-box"><span>14</span></span></label>
            <span class="row-label">D</span></div>
            <!-- Row E (some sold) -->
            <div class="seat-row"><span class="row-label">E</span>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-E1"><span class="seat-box"><span>1</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-E2"><span class="seat-box"><span>2</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-E3"><span class="seat-box"><span>3</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-E4"><span class="seat-box"><span>4</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-E5"><span class="seat-box"><span>5</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-E6" disabled><span class="seat-box"><span>6</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-E7" disabled><span class="seat-box"><span>7</span></span></label>
              <span class="aisle"></span>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-E8" disabled><span class="seat-box"><span>8</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-E9" disabled><span class="seat-box"><span>9</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-E10"><span class="seat-box"><span>10</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-E11"><span class="seat-box"><span>11</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-E12"><span class="seat-box"><span>12</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-E13"><span class="seat-box"><span>13</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-E14"><span class="seat-box"><span>14</span></span></label>
            <span class="row-label">E</span></div>
            <!-- Row F (some sold) -->
            <div class="seat-row"><span class="row-label">F</span>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-F1"><span class="seat-box"><span>1</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-F2"><span class="seat-box"><span>2</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-F3" disabled><span class="seat-box"><span>3</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-F4" disabled><span class="seat-box"><span>4</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-F5"><span class="seat-box"><span>5</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-F6"><span class="seat-box"><span>6</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-F7"><span class="seat-box"><span>7</span></span></label>
              <span class="aisle"></span>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-F8" disabled><span class="seat-box"><span>8</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-F9" disabled><span class="seat-box"><span>9</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-F10" disabled><span class="seat-box"><span>10</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-F11"><span class="seat-box"><span>11</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-F12"><span class="seat-box"><span>12</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-F13"><span class="seat-box"><span>13</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-F14"><span class="seat-box"><span>14</span></span></label>
            <span class="row-label">F</span></div>
            <!-- Row G (some sold) -->
            <div class="seat-row"><span class="row-label">G</span>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-G1"><span class="seat-box"><span>1</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-G2"><span class="seat-box"><span>2</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-G3"><span class="seat-box"><span>3</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-G4"><span class="seat-box"><span>4</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-G5" disabled><span class="seat-box"><span>5</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-G6" disabled><span class="seat-box"><span>6</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-G7" disabled><span class="seat-box"><span>7</span></span></label>
              <span class="aisle"></span>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-G8"><span class="seat-box"><span>8</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-G9"><span class="seat-box"><span>9</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-G10"><span class="seat-box"><span>10</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-G11"><span class="seat-box"><span>11</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-G12"><span class="seat-box"><span>12</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-G13"><span class="seat-box"><span>13</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-G14"><span class="seat-box"><span>14</span></span></label>
            <span class="row-label">G</span></div>
            <!-- Row H (some sold) -->
            <div class="seat-row"><span class="row-label">H</span>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-H1"><span class="seat-box"><span>1</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-H2"><span class="seat-box"><span>2</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-H3"><span class="seat-box"><span>3</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-H4"><span class="seat-box"><span>4</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-H5"><span class="seat-box"><span>5</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-H6"><span class="seat-box"><span>6</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-H7"><span class="seat-box"><span>7</span></span></label>
              <span class="aisle"></span>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-H8"><span class="seat-box"><span>8</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-H9"><span class="seat-box"><span>9</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-H10"><span class="seat-box"><span>10</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-H11" disabled><span class="seat-box"><span>11</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-H12" disabled><span class="seat-box"><span>12</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-H13"><span class="seat-box"><span>13</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-H14"><span class="seat-box"><span>14</span></span></label>
            <span class="row-label">H</span></div>
            <!-- Row I (open for school block bookings) -->
            <div class="seat-row"><span class="row-label">I</span>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-I1"><span class="seat-box"><span>1</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-I2"><span class="seat-box"><span>2</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-I3"><span class="seat-box"><span>3</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-I4"><span class="seat-box"><span>4</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-I5"><span class="seat-box"><span>5</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-I6"><span class="seat-box"><span>6</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-I7"><span class="seat-box"><span>7</span></span></label>
              <span class="aisle"></span>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-I8"><span class="seat-box"><span>8</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-I9"><span class="seat-box"><span>9</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-I10"><span class="seat-box"><span>10</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-I11"><span class="seat-box"><span>11</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-I12"><span class="seat-box"><span>12</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-I13"><span class="seat-box"><span>13</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-I14"><span class="seat-box"><span>14</span></span></label>
            <span class="row-label">I</span></div>
            <!-- Row J -->
            <div class="seat-row"><span class="row-label">J</span>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-J1"><span class="seat-box"><span>1</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-J2"><span class="seat-box"><span>2</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-J3"><span class="seat-box"><span>3</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-J4"><span class="seat-box"><span>4</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-J5"><span class="seat-box"><span>5</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-J6"><span class="seat-box"><span>6</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-J7"><span class="seat-box"><span>7</span></span></label>
              <span class="aisle"></span>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-J8"><span class="seat-box"><span>8</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-J9"><span class="seat-box"><span>9</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-J10"><span class="seat-box"><span>10</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-J11"><span class="seat-box"><span>11</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-J12"><span class="seat-box"><span>12</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-J13"><span class="seat-box"><span>13</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-J14"><span class="seat-box"><span>14</span></span></label>
            <span class="row-label">J</span></div>
            <!-- Row K -->
            <div class="seat-row"><span class="row-label">K</span>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-K1"><span class="seat-box"><span>1</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-K2"><span class="seat-box"><span>2</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-K3"><span class="seat-box"><span>3</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-K4"><span class="seat-box"><span>4</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-K5"><span class="seat-box"><span>5</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-K6"><span class="seat-box"><span>6</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-K7"><span class="seat-box"><span>7</span></span></label>
              <span class="aisle"></span>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-K8"><span class="seat-box"><span>8</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-K9"><span class="seat-box"><span>9</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-K10"><span class="seat-box"><span>10</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-K11"><span class="seat-box"><span>11</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-K12"><span class="seat-box"><span>12</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-K13"><span class="seat-box"><span>13</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-K14"><span class="seat-box"><span>14</span></span></label>
            <span class="row-label">K</span></div>
            <!-- Row L -->
            <div class="seat-row"><span class="row-label">L</span>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-L1" disabled><span class="seat-box"><span>1</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-L2" disabled><span class="seat-box"><span>2</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-L3"><span class="seat-box"><span>3</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-L4"><span class="seat-box"><span>4</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-L5"><span class="seat-box"><span>5</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-L6"><span class="seat-box"><span>6</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-L7"><span class="seat-box"><span>7</span></span></label>
              <span class="aisle"></span>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-L8"><span class="seat-box"><span>8</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-L9"><span class="seat-box"><span>9</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-L10"><span class="seat-box"><span>10</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-L11"><span class="seat-box"><span>11</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-L12"><span class="seat-box"><span>12</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-L13"><span class="seat-box"><span>13</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="1" data-price="8" value="S1-L14"><span class="seat-box"><span>14</span></span></label>
            <span class="row-label">L</span></div>
          </div>
        </div>
        <p class="scroll-hint">Swipe sideways on the seating plan to see all 14 seats in each row</p>
      </section>

      <!-- SCREEN 2: 7:45 PM ($11.50) -->
      <section class="screen-panel panel-2" aria-label="Screen Two Seating Plan">
        <div class="panel-header">
          <h2>Screen Two — Casablanca (7:45 PM · $11.50)</h2>
          <p>12 rows, 14 seats per row · Gold seats are your selection · Crossed seats are sold</p>
        </div>
        <div class="cinema-screen">Screen</div>
        <div class="legend">
          <span class="legend-item"><span class="swatch swatch-free"></span> Available</span>
          <span class="legend-item"><span class="swatch swatch-picked"></span> Your Seats</span>
          <span class="legend-item"><span class="swatch swatch-sold"></span> Already Sold</span>
        </div>
        <div class="seats-scroll">
          <div class="seating-grid">
            <!-- Row A -->
            <div class="seat-row"><span class="row-label">A</span>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-A1"><span class="seat-box"><span>1</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-A2"><span class="seat-box"><span>2</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-A3"><span class="seat-box"><span>3</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-A4"><span class="seat-box"><span>4</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-A5"><span class="seat-box"><span>5</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-A6"><span class="seat-box"><span>6</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-A7"><span class="seat-box"><span>7</span></span></label>
              <span class="aisle"></span>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-A8"><span class="seat-box"><span>8</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-A9"><span class="seat-box"><span>9</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-A10"><span class="seat-box"><span>10</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-A11"><span class="seat-box"><span>11</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-A12"><span class="seat-box"><span>12</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-A13"><span class="seat-box"><span>13</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-A14"><span class="seat-box"><span>14</span></span></label>
            <span class="row-label">A</span></div>
            <!-- Row B -->
            <div class="seat-row"><span class="row-label">B</span>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-B1"><span class="seat-box"><span>1</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-B2"><span class="seat-box"><span>2</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-B3"><span class="seat-box"><span>3</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-B4"><span class="seat-box"><span>4</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-B5"><span class="seat-box"><span>5</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-B6"><span class="seat-box"><span>6</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-B7"><span class="seat-box"><span>7</span></span></label>
              <span class="aisle"></span>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-B8"><span class="seat-box"><span>8</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-B9"><span class="seat-box"><span>9</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-B10"><span class="seat-box"><span>10</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-B11"><span class="seat-box"><span>11</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-B12"><span class="seat-box"><span>12</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-B13"><span class="seat-box"><span>13</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-B14"><span class="seat-box"><span>14</span></span></label>
            <span class="row-label">B</span></div>
            <!-- Row C (some sold) -->
            <div class="seat-row"><span class="row-label">C</span>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-C1"><span class="seat-box"><span>1</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-C2"><span class="seat-box"><span>2</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-C3"><span class="seat-box"><span>3</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-C4"><span class="seat-box"><span>4</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-C5"><span class="seat-box"><span>5</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-C6" disabled><span class="seat-box"><span>6</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-C7" disabled><span class="seat-box"><span>7</span></span></label>
              <span class="aisle"></span>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-C8" disabled><span class="seat-box"><span>8</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-C9"><span class="seat-box"><span>9</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-C10"><span class="seat-box"><span>10</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-C11"><span class="seat-box"><span>11</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-C12"><span class="seat-box"><span>12</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-C13"><span class="seat-box"><span>13</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-C14"><span class="seat-box"><span>14</span></span></label>
            <span class="row-label">C</span></div>
            <!-- Row D (some sold) -->
            <div class="seat-row"><span class="row-label">D</span>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-D1"><span class="seat-box"><span>1</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-D2"><span class="seat-box"><span>2</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-D3" disabled><span class="seat-box"><span>3</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-D4" disabled><span class="seat-box"><span>4</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-D5"><span class="seat-box"><span>5</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-D6"><span class="seat-box"><span>6</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-D7"><span class="seat-box"><span>7</span></span></label>
              <span class="aisle"></span>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-D8" disabled><span class="seat-box"><span>8</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-D9" disabled><span class="seat-box"><span>9</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-D10" disabled><span class="seat-box"><span>10</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-D11" disabled><span class="seat-box"><span>11</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-D12"><span class="seat-box"><span>12</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-D13"><span class="seat-box"><span>13</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-D14"><span class="seat-box"><span>14</span></span></label>
            <span class="row-label">D</span></div>
            <!-- Row E (some sold) -->
            <div class="seat-row"><span class="row-label">E</span>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-E1"><span class="seat-box"><span>1</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-E2"><span class="seat-box"><span>2</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-E3"><span class="seat-box"><span>3</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-E4" disabled><span class="seat-box"><span>4</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-E5" disabled><span class="seat-box"><span>5</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-E6" disabled><span class="seat-box"><span>6</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-E7" disabled><span class="seat-box"><span>7</span></span></label>
              <span class="aisle"></span>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-E8"><span class="seat-box"><span>8</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-E9"><span class="seat-box"><span>9</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-E10" disabled><span class="seat-box"><span>10</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-E11" disabled><span class="seat-box"><span>11</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-E12"><span class="seat-box"><span>12</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-E13"><span class="seat-box"><span>13</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-E14"><span class="seat-box"><span>14</span></span></label>
            <span class="row-label">E</span></div>
            <!-- Row F (some sold) -->
            <div class="seat-row"><span class="row-label">F</span>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-F1"><span class="seat-box"><span>1</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-F2"><span class="seat-box"><span>2</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-F3"><span class="seat-box"><span>3</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-F4"><span class="seat-box"><span>4</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-F5" disabled><span class="seat-box"><span>5</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-F6" disabled><span class="seat-box"><span>6</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-F7" disabled><span class="seat-box"><span>7</span></span></label>
              <span class="aisle"></span>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-F8" disabled><span class="seat-box"><span>8</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-F9" disabled><span class="seat-box"><span>9</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-F10"><span class="seat-box"><span>10</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-F11"><span class="seat-box"><span>11</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-F12"><span class="seat-box"><span>12</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-F13"><span class="seat-box"><span>13</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-F14"><span class="seat-box"><span>14</span></span></label>
            <span class="row-label">F</span></div>
            <!-- Row G (some sold) -->
            <div class="seat-row"><span class="row-label">G</span>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-G1"><span class="seat-box"><span>1</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-G2"><span class="seat-box"><span>2</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-G3"><span class="seat-box"><span>3</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-G4"><span class="seat-box"><span>4</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-G5"><span class="seat-box"><span>5</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-G6"><span class="seat-box"><span>6</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-G7" disabled><span class="seat-box"><span>7</span></span></label>
              <span class="aisle"></span>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-G8" disabled><span class="seat-box"><span>8</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-G9" disabled><span class="seat-box"><span>9</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-G10" disabled><span class="seat-box"><span>10</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-G11"><span class="seat-box"><span>11</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-G12"><span class="seat-box"><span>12</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-G13"><span class="seat-box"><span>13</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-G14"><span class="seat-box"><span>14</span></span></label>
            <span class="row-label">G</span></div>
            <!-- Row H (some sold) -->
            <div class="seat-row"><span class="row-label">H</span>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-H1" disabled><span class="seat-box"><span>1</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-H2" disabled><span class="seat-box"><span>2</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-H3"><span class="seat-box"><span>3</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-H4"><span class="seat-box"><span>4</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-H5"><span class="seat-box"><span>5</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-H6"><span class="seat-box"><span>6</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-H7"><span class="seat-box"><span>7</span></span></label>
              <span class="aisle"></span>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-H8"><span class="seat-box"><span>8</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-H9"><span class="seat-box"><span>9</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-H10"><span class="seat-box"><span>10</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-H11"><span class="seat-box"><span>11</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-H12"><span class="seat-box"><span>12</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-H13" disabled><span class="seat-box"><span>13</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-H14" disabled><span class="seat-box"><span>14</span></span></label>
            <span class="row-label">H</span></div>
            <!-- Row I (open for school block bookings) -->
            <div class="seat-row"><span class="row-label">I</span>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-I1"><span class="seat-box"><span>1</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-I2"><span class="seat-box"><span>2</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-I3"><span class="seat-box"><span>3</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-I4"><span class="seat-box"><span>4</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-I5"><span class="seat-box"><span>5</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-I6"><span class="seat-box"><span>6</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-I7"><span class="seat-box"><span>7</span></span></label>
              <span class="aisle"></span>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-I8"><span class="seat-box"><span>8</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-I9"><span class="seat-box"><span>9</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-I10"><span class="seat-box"><span>10</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-I11"><span class="seat-box"><span>11</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-I12"><span class="seat-box"><span>12</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-I13"><span class="seat-box"><span>13</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-I14"><span class="seat-box"><span>14</span></span></label>
            <span class="row-label">I</span></div>
            <!-- Row J -->
            <div class="seat-row"><span class="row-label">J</span>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-J1"><span class="seat-box"><span>1</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-J2"><span class="seat-box"><span>2</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-J3"><span class="seat-box"><span>3</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-J4"><span class="seat-box"><span>4</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-J5"><span class="seat-box"><span>5</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-J6"><span class="seat-box"><span>6</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-J7"><span class="seat-box"><span>7</span></span></label>
              <span class="aisle"></span>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-J8"><span class="seat-box"><span>8</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-J9"><span class="seat-box"><span>9</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-J10"><span class="seat-box"><span>10</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-J11"><span class="seat-box"><span>11</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-J12"><span class="seat-box"><span>12</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-J13"><span class="seat-box"><span>13</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-J14"><span class="seat-box"><span>14</span></span></label>
            <span class="row-label">J</span></div>
            <!-- Row K -->
            <div class="seat-row"><span class="row-label">K</span>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-K1"><span class="seat-box"><span>1</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-K2"><span class="seat-box"><span>2</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-K3"><span class="seat-box"><span>3</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-K4"><span class="seat-box"><span>4</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-K5"><span class="seat-box"><span>5</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-K6"><span class="seat-box"><span>6</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-K7"><span class="seat-box"><span>7</span></span></label>
              <span class="aisle"></span>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-K8"><span class="seat-box"><span>8</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-K9"><span class="seat-box"><span>9</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-K10"><span class="seat-box"><span>10</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-K11"><span class="seat-box"><span>11</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-K12"><span class="seat-box"><span>12</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-K13"><span class="seat-box"><span>13</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-K14"><span class="seat-box"><span>14</span></span></label>
            <span class="row-label">K</span></div>
            <!-- Row L -->
            <div class="seat-row"><span class="row-label">L</span>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-L1"><span class="seat-box"><span>1</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-L2"><span class="seat-box"><span>2</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-L3"><span class="seat-box"><span>3</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-L4"><span class="seat-box"><span>4</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-L5"><span class="seat-box"><span>5</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-L6"><span class="seat-box"><span>6</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-L7"><span class="seat-box"><span>7</span></span></label>
              <span class="aisle"></span>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-L8"><span class="seat-box"><span>8</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-L9"><span class="seat-box"><span>9</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-L10"><span class="seat-box"><span>10</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-L11"><span class="seat-box"><span>11</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-L12"><span class="seat-box"><span>12</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-L13" disabled><span class="seat-box"><span>13</span></span></label>
              <label class="seat"><input class="seat-input" type="checkbox" data-screen="2" data-price="11.5" value="S2-L14" disabled><span class="seat-box"><span>14</span></span></label>
            <span class="row-label">L</span></div>
          </div>
        </div>
        <p class="scroll-hint">Swipe sideways on the seating plan to see all 14 seats in each row</p>
      </section>
    </div>

    <!-- BASKET IN TOP-RIGHT (placed after checkboxes in DOM so CSS counter() works with JS off) -->
    <div class="basket-anchor">
      <button type="button" id="basket-btn" class="basket-btn" aria-label="View picked seats">
        <svg class="basket-icon" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M5 10h14l-1.5 9h-11z"></path>
          <path d="M8.5 10L10.5 5"></path>
          <path d="M15.5 10L13.5 5"></path>
        </svg>
        <span id="basket-badge" class="basket-badge" aria-live="polite">
          <span id="js-badge-num" class="js-badge-num">0</span>
        </span>
      </button>
    </div>

    <!-- RUNNING TOTAL BAR -->
    <div class="total-bar">
      <div class="total-inner">
        <div class="js-only">
          <div class="total-numbers">
            <span class="total-label">Total</span>
            <span id="total-usd" class="total-usd">$0.00</span>
            <span id="total-eur" class="total-eur">(≈ €0.00)</span>
            <span id="rate-note" class="rate-note">Ref. rate 1 USD = €0.92 (offline)</span>
          </div>
          <div id="seat-summary" class="seat-summary-line">No seats picked yet — tap any cream seat above.</div>
        </div>

        <div class="no-js-only">
          <div class="total-numbers">
            <span class="total-label">Seats in Basket:</span>
            <span class="no-js-count"></span>
            <span class="rate-note">· $8.00 matinee (4:15 PM) / $11.50 evening (7:45 PM) · Ref. 1 USD = €0.92</span>
          </div>
          <div class="seat-summary-line">JavaScript is switched off — seat picking and basket count work; show your picked seats at the box office.</div>
        </div>

        <div class="total-actions">
          <button type="reset" id="clear-btn" class="btn-ghost">Clear</button>
          <button type="button" id="slip-btn" class="btn-gold js-only" disabled>Show Booking Slip</button>
        </div>
      </div>
    </div>
  </form>

  <!-- BOX OFFICE SLIP MODAL (JS mode) -->
  <div id="slip-backdrop" class="slip-backdrop" role="dialog" aria-modal="true" aria-labelledby="slip-title">
    <div class="slip-ticket">
      <h3 id="slip-title">The Bijou Picture House — Seat Slip</h3>
      <div id="slip-body" class="slip-body"></div>
      <div class="slip-totals">
        <span id="slip-usd">$0.00</span>
        <span id="slip-eur">≈ €0.00</span>
      </div>
      <p style="font-size:0.78rem; color:#5a4444; margin:10px 0 14px;">
        Show this screen at the box office counter to pay and collect your paper tickets.
      </p>
      <div style="text-align:right;">
        <button type="button" id="close-slip" class="btn-gold">Back to Seating Plan</button>
      </div>
    </div>
  </div>

  <script>
    (function () {
      "use strict";

      // Remove no-js flag immediately so enhanced running-total UI activates
      document.documentElement.classList.remove("no-js");

      // =====================================================================
      // OFFLINE EURO RATE — update this single number before opening if needed
      // =====================================================================
      var USD_TO_EUR = 0.92;

      var form = document.getElementById("ticket-form");
      var checkboxes = Array.prototype.slice.call(document.querySelectorAll(".seat-input"));
      var badge = document.getElementById("basket-badge");
      var badgeNum = document.getElementById("js-badge-num");
      var totalUsdEl = document.getElementById("total-usd");
      var totalEurEl = document.getElementById("total-eur");
      var rateNoteEl = document.getElementById("rate-note");
      var summaryEl = document.getElementById("seat-summary");
      var slipBtn = document.getElementById("slip-btn");
      var basketBtn = document.getElementById("basket-btn");
      var clearBtn = document.getElementById("clear-btn");
      var slipBackdrop = document.getElementById("slip-backdrop");
      var slipBody = document.getElementById("slip-body");
      var slipUsd = document.getElementById("slip-usd");
      var slipEur = document.getElementById("slip-eur");
      var closeSlipBtn = document.getElementById("close-slip");

      rateNoteEl.textContent = "Ref. rate 1 USD = €" + USD_TO_EUR.toFixed(2) + " (offline)";

      var displayedUsd = 0;
      var targetUsd = 0;
      var animStartUsd = 0;
      var animStartTime = 0;
      var animDuration = 340;
      var rafId = null;

      function formatUsd(val) {
        return "$" + val.toFixed(2);
      }

      function formatEur(val) {
        return "€" + val.toFixed(2);
      }

      function stepCountUp(timestamp) {
        if (!animStartTime) {
          animStartTime = timestamp;
        }
        var elapsed = timestamp - animStartTime;
        var progress = Math.min(elapsed / animDuration, 1);
        // Smooth ease-out cubic
        var eased = 1 - Math.pow(1 - progress, 3);
        displayedUsd = animStartUsd + (targetUsd - animStartUsd) * eased;

        totalUsdEl.textContent = formatUsd(displayedUsd);
        totalEurEl.textContent = "(≈ " + formatEur(displayedUsd * USD_TO_EUR) + ")";

        if (progress < 1) {
          rafId = window.requestAnimationFrame(stepCountUp);
        } else {
          displayedUsd = targetUsd;
          totalUsdEl.textContent = formatUsd(targetUsd);
          totalEurEl.textContent = "(≈ " + formatEur(targetUsd * USD_TO_EUR) + ")";
          rafId = null;
        }
      }

      function animateTotalTo(nextUsd) {
        if (rafId !== null) {
          window.cancelAnimationFrame(rafId);
        }
        animStartUsd = displayedUsd;
        targetUsd = nextUsd;
        animStartTime = 0;
        rafId = window.requestAnimationFrame(stepCountUp);
      }

      function collectSelection() {
        var screen1Seats = [];
        var screen2Seats = [];
        var sumUsd = 0;

        for (var i = 0; i < checkboxes.length; i++) {
          var cb = checkboxes[i];
          if (cb.checked) {
            var price = parseFloat(cb.getAttribute("data-price"));
            var screen = cb.getAttribute("data-screen");
            var label = cb.value.replace(/^S[12]-/, "");
            sumUsd += price;
            if (screen === "1") {
              screen1Seats.push(label);
            } else {
              screen2Seats.push(label);
            }
          }
        }

        return {
          count: screen1Seats.length + screen2Seats.length,
          screen1: screen1Seats,
          screen2: screen2Seats,
          totalUsd: sumUsd
        };
      }

      function updateUI() {
        var state = collectSelection();

        // Update badge
        badgeNum.textContent = String(state.count);
        if (state.count >= 10) {
          badge.classList.add("multi-digit");
        } else {
          badge.classList.remove("multi-digit");
        }
        badge.classList.remove("bump");
        void badge.offsetWidth;
        badge.classList.add("bump");

        // Animate running total smoothly
        animateTotalTo(state.totalUsd);

        // Update summary line & button state
        if (state.count === 0) {
          summaryEl.textContent = "No seats picked yet — tap any cream seat above.";
          slipBtn.disabled = true;
        } else {
          var parts = [];
          if (state.screen1.length > 0) {
            parts.push("Singin' in the Rain (4:15 PM): " + state.screen1.join(", "));
          }
          if (state.screen2.length > 0) {
            parts.push("Casablanca (7:45 PM): " + state.screen2.join(", "));
          }
          summaryEl.textContent = state.count + (state.count === 1 ? " seat — " : " seats — ") + parts.join(" · ");
          slipBtn.disabled = false;
        }
      }

      function openSlip() {
        var state = collectSelection();
        if (state.count === 0) {
          return;
        }
        slipBody.innerHTML = "";

        if (state.screen1.length > 0) {
          var p1 = document.createElement("p");
          p1.innerHTML = "<strong>Screen 1 · Singin' in the Rain (4:15 PM)</strong><br>" +
            state.screen1.length + " × $8.00 — Seats: " + state.screen1.join(", ");
          slipBody.appendChild(p1);
        }
        if (state.screen2.length > 0) {
          var p2 = document.createElement("p");
          p2.innerHTML = "<strong>Screen 2 · Casablanca (7:45 PM)</strong><br>" +
            state.screen2.length + " × $11.50 — Seats: " + state.screen2.join(", ");
          slipBody.appendChild(p2);
        }

        slipUsd.textContent = "Total: " + formatUsd(state.totalUsd);
        slipEur.textContent = "≈ " + formatEur(state.totalUsd * USD_TO_EUR) + " (ref. rate)";
        slipBackdrop.classList.add("open");
      }

      function closeSlip() {
        slipBackdrop.classList.remove("open");
      }

      form.addEventListener("change", function (e) {
        if (e.target && e.target.classList.contains("seat-input")) {
          updateUI();
        }
      });

      clearBtn.addEventListener("click", function () {
        // Wait for native form reset to uncheck inputs, then animate back to $0.00
        window.setTimeout(updateUI, 0);
      });

      slipBtn.addEventListener("click", openSlip);
      basketBtn.addEventListener("click", openSlip);
      closeSlipBtn.addEventListener("click", closeSlip);
      slipBackdrop.addEventListener("click", function (e) {
        if (e.target === slipBackdrop) {
          closeSlip();
        }
      });
    })();
  </script>
</body>
</html>
Attachments
google/gemini-4-hydrogen — page