.cinema{--front: #38bdf8;--standard: #a78bfa;--premium: #fbbf24;--selected: #f472b6;display:grid;grid-template-columns:minmax(0,1fr) 18rem;align-items:start;gap:1.25rem;margin-top:2rem;color:#e2e8f0}@media(max-width:64rem){.cinema{grid-template-columns:minmax(0,1fr)}}.seat-map{padding:1.25rem;border-radius:1.5rem;background:radial-gradient(ellipse at 50% 0%,rgba(148,163,184,.22),transparent 55%),linear-gradient(180deg,#111827,#020617);box-shadow:inset 0 1px #ffffff0f,0 30px 60px -30px #000c}.screening-picker{display:flex;align-items:end;gap:.75rem;margin:0 0 1.5rem;.poster{font-size:2.2rem;line-height:1}& label{flex:1;display:grid;gap:.25rem;margin:0;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:#e2e8f099}& select{margin:0;font-size:1rem;letter-spacing:normal;text-transform:none}.show{width:auto;margin:0}}.cinema-js .screening-picker .show{display:none}.screen{margin:0 8% 2rem;padding-top:.6rem;border-top:4px solid #e2e8f0;border-radius:50% 50% 0 0/100% 100% 0 0;box-shadow:0 -10px 30px -6px #e2e8f08c;text-align:center;font-size:.7rem;letter-spacing:.6em;text-transform:uppercase;color:#e2e8f080}.rows{display:grid;gap:.4rem;overflow-x:auto;margin-top:-1rem;padding:1rem 0 .5rem}.seat-row{display:flex;justify-content:center;align-items:center;gap:.3rem;min-width:max-content;margin:0}.row-label{width:1.2rem;text-align:center;font-size:.75rem;color:#e2e8f073}.seat{--tier: var(--standard);display:inline-grid;place-items:center;width:2rem;height:1.9rem;margin:0;padding:0;border:1px solid color-mix(in srgb,var(--tier) 55%,transparent);border-radius:.55rem .55rem .3rem .3rem;background:color-mix(in srgb,var(--tier) 16%,transparent);box-shadow:inset 0 -3px color-mix(in srgb,var(--tier) 35%,transparent);color:color-mix(in srgb,var(--tier) 80%,white);font-size:.7rem;font-weight:600;line-height:1;transition:transform .15s,background .15s,box-shadow .15s;&.front{--tier: var(--front)}&.premium{--tier: var(--premium)}&.aisle{margin-left:1rem}&.free:hover,&.free:focus-visible{transform:translateY(-2px);background:color-mix(in srgb,var(--tier) 35%,transparent);box-shadow:0 0 14px -2px var(--tier)}&.selected{--tier: var(--selected);background:var(--selected);color:#1e1b2e;box-shadow:0 0 16px -2px var(--selected);animation:pop .25s ease-out}&.taken{border-color:transparent;background:#94a3b81f;box-shadow:none;color:transparent;opacity:1}&.yours{border-color:#34d399;background:repeating-linear-gradient(45deg,#34d39959 0 4px,#34d39926 4px 8px);box-shadow:none;color:#d1fae5;opacity:1}&:focus-visible{outline:2px solid #e2e8f0;outline-offset:2px}}@keyframes pop{50%{transform:scale(1.18)}}.legend{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.25rem;margin:1.25rem 0 0;padding:0;font-size:.8rem;color:#e2e8f0b3;& li{display:flex;align-items:center;gap:.4rem;margin:0;list-style:none}.seat{width:1rem;height:.9rem}}.summary{position:sticky;top:1rem;display:grid;gap:.75rem;padding:1.25rem;border:1px solid rgba(255,255,255,.08);border-radius:1.25rem;background:radial-gradient(circle at 0 62%,#020617 .7rem,transparent .75rem),radial-gradient(circle at 100% 62%,#020617 .7rem,transparent .75rem),linear-gradient(160deg,#1e1b4b,#0f172a);box-shadow:0 30px 60px -30px #000c;& h2{margin:0;font-size:1.2rem}.time{margin:-.5rem 0 0;color:#e2e8f099}.message{margin:0;padding:.6rem .8rem;border-left:3px solid var(--selected);border-radius:.5rem;background:#f472b61f;animation:pop-in .3s ease-out}.empty{margin:0;color:#e2e8f080;font-style:italic}.booked{margin:0;color:#6ee7b7;font-size:.85rem}.rendered{color:#e2e8f073;font-size:.75rem;font-variant-numeric:tabular-nums}&.browser .rendered{color:var(--selected)}}@keyframes pop-in{0%{opacity:0;transform:translateY(-4px)}}.tickets{display:grid;gap:.4rem;margin:0;padding:0;& li{display:grid;grid-template-columns:2.5rem 1fr auto;align-items:center;margin:0;padding:.45rem .7rem;border-left:3px solid var(--standard);border-radius:.5rem;background:#ffffff0d;list-style:none;animation:pop-in .25s ease-out}.front{border-left-color:var(--front)}.premium{border-left-color:var(--premium)}& span:last-child{font-variant-numeric:tabular-nums}}.total{display:flex;justify-content:space-between;align-items:baseline;margin:0;padding-top:.75rem;border-top:2px dashed rgba(255,255,255,.15);& strong{font-size:1.5rem;font-variant-numeric:tabular-nums}}.actions{display:flex;gap:.5rem;margin:0;& button{flex:1;margin:0}& button[name=book]{border:none;background:linear-gradient(135deg,var(--selected),#a855f7);color:#1e1b2e;font-weight:700;box-shadow:0 8px 20px -10px var(--selected)}}@media(prefers-reduced-motion:reduce){.seat,.summary *,.tickets li{animation:none;transition:none}}