/* Main screen. A logical canvas 1080 px tall (width = 1080 × aspect ratio, 16:9 until
   the venue survey) scaled to the output. All sizes below are canvas pixels. */
html, body.screen { height: 100%; overflow: hidden; background: #000; cursor: none; }
body.screen.cursor { cursor: default; }
#frame { position: fixed; inset: 0; overflow: hidden; background: #000; }
#stage { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; overflow: hidden; background: var(--ink); }

/* ---- living background (the AW26 plate + light) ---------------------------------- */
.bg, .bg > * { position: absolute; inset: 0; }
.plate { width: 100%; height: 100%; object-fit: cover; animation: breathe 28s ease-in-out infinite alternate; transform-origin: 50% 62%; }
@keyframes breathe { from { transform: scale(1); } to { transform: scale(1.04); } }
.slit {
  left: 50%; right: auto; width: 360px; transform: translateX(-50%);
  background: radial-gradient(ellipse 40% 60% at 50% 58%, rgba(210, 230, 255, 0.5), rgba(80, 140, 255, 0.16) 45%, transparent 72%);
  mix-blend-mode: screen; animation: slit 6.5s ease-in-out infinite;
}
@keyframes slit { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.95; } }
#stage.spinning .slit { animation-duration: 0.9s; }
.sweep { overflow: hidden; }
.sweep::before {
  content: ''; position: absolute; top: 0; bottom: 0; width: 34%; left: 0;
  background: linear-gradient(90deg, transparent, rgba(120, 170, 255, 0.14) 45%, rgba(190, 215, 255, 0.2) 50%, rgba(120, 170, 255, 0.14) 55%, transparent);
  mix-blend-mode: screen; animation: sweep 17s linear infinite;
}
@keyframes sweep { from { transform: translateX(-110%); } to { transform: translateX(310%); } }
.dust { width: 100%; height: 100%; pointer-events: none; }
.vignette { background: radial-gradient(ellipse 75% 70% at 50% 45%, transparent 55%, rgba(0, 4, 24, 0.55) 100%); }

/* ---- logos (same positions as the AW26 film overlay) ------------------------------- */
.logo { position: absolute; z-index: 5; transition: opacity 0.8s ease; }
.logo-god { left: 54px; top: 25px; height: 130px; }
.logo-dcaa { right: 54px; top: 47px; height: 88px; }
#stage.own-logos .logo { opacity: 0; }
#stage.no-logos .logo { opacity: 0; }

.proto-tag {
  position: absolute; z-index: 6; left: 50%; bottom: 18px; transform: translateX(-50%);
  font-size: 15px; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(207, 225, 255, 0.5);
  padding: 6px 16px; border: 1px solid rgba(207, 225, 255, 0.18); border-radius: 99px;
}
body.clean .proto-tag { display: none; }
.blackout { position: absolute; inset: 0; z-index: 20; background: #000; opacity: 0; pointer-events: none; transition: opacity 0.9s ease; }
#stage.black .blackout { opacity: 1; }

/* ---- scene transitions: the new scene opens out of the light slit ------------------------- */
#scenes { position: absolute; inset: 0; z-index: 3; }
.scene { position: absolute; inset: 0; }
.scene.enter { animation: open-from-slit 1.15s cubic-bezier(0.72, 0, 0.18, 1) both; }
.scene.leave { animation: fade-out 0.9s ease both; pointer-events: none; }
@keyframes open-from-slit {
  from { clip-path: inset(0 49.6% 0 49.6%); filter: brightness(1.8); }
  to { clip-path: inset(0 0 0 0); filter: brightness(1); }
}
@keyframes fade-out { to { opacity: 0; } }
.beam {
  position: absolute; z-index: 8; top: 0; bottom: 0; left: 50%; width: 900px; transform: translateX(-50%) scaleX(0.02);
  opacity: 0; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(90deg, transparent 0%, rgba(190, 32, 46, 0.0) 30%, rgba(190, 32, 46, 0.55) 46%, rgba(255, 255, 255, 0.95) 49.4%, #fff 50%, rgba(255, 255, 255, 0.95) 50.6%, rgba(90, 150, 255, 0.7) 54%, transparent 70%);
}
.beam.flash { animation: beam 1.15s cubic-bezier(0.72, 0, 0.18, 1); }
@keyframes beam {
  0% { opacity: 0; transform: translateX(-50%) scaleX(0.02); }
  25% { opacity: 1; transform: translateX(-50%) scaleX(0.35); }
  100% { opacity: 0; transform: translateX(-50%) scaleX(2.6); }
}

/* ---- typography ------------------------------------------------------------------------- */
.lockup { position: absolute; left: 0; right: 0; top: 53%; transform: translateY(-50%); text-align: center; }
.lockup .ar-title { direction: rtl; font-weight: 700; font-size: 104px; line-height: 128px; text-shadow: 0 0 40px rgba(120, 170, 255, 0.35); }
.lockup .rule { width: 132px; height: 2px; margin: 34px auto 30px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85), transparent); }
.lockup .en-title { font-weight: 500; font-size: 50px; letter-spacing: 0.02em; color: #f2f6ff; }
.lockup .note { margin-top: 38px; font-size: 22px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(207, 225, 255, 0.55); }
.lockup .kicker { font-size: 24px; margin-bottom: 26px; }
.rise { animation: rise 1.1s cubic-bezier(0.2, 0.7, 0.1, 1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(26px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }

/* ---- film / image scenes ----------------------------------------------------------------- */
.media-full { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.film-layer { position: absolute; inset: 0; transition: opacity 1.4s ease; }
.film-layer.off { opacity: 0; }
.standin { position: absolute; z-index: 4; right: 60px; bottom: 26px; font-size: 15px; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }

/* ---- QR panels -------------------------------------------------------------------------------- */
.qr-card {
  position: relative; background: #fff; border-radius: 34px; padding: 34px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6), 0 0 90px rgba(120, 175, 255, 0.55), 0 40px 90px rgba(0, 8, 40, 0.6);
}
.qr-card img { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.qr-rim { position: absolute; inset: -18px; border-radius: 48px; padding: 2px; pointer-events: none;
  background: conic-gradient(from var(--a, 0deg), transparent 0deg, rgba(160, 200, 255, 0.95) 40deg, transparent 90deg, transparent 180deg, rgba(190, 32, 46, 0.7) 215deg, transparent 260deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: rim 6s linear infinite; }
@property --a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes rim { to { --a: 360deg; } }
.qr-url { margin-top: 30px; text-align: center; font-size: 26px; letter-spacing: 0.06em; color: var(--ice); }

/* vote scene: English left of the light, QR on the light, Arabic right */
.vote-scene { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 640px 1fr; align-items: center; padding: 150px 110px 90px; gap: 70px; }
.vote-scene .side { display: flex; flex-direction: column; gap: 26px; }
.vote-scene .side.en { align-items: flex-start; text-align: left; }
.vote-scene .side.ar { align-items: flex-end; text-align: right; direction: rtl; }
.vote-scene h1 { margin: 0; font-size: 78px; line-height: 1.08; font-weight: 600; }
.vote-scene .side.ar h1 { font-weight: 700; line-height: 1.25; }
.vote-scene p { margin: 0; font-size: 32px; line-height: 1.4; color: var(--mist); }
.vote-scene .kicker { font-size: 22px; }
.vote-scene .side.ar .kicker { letter-spacing: 0; font-size: 26px; }
.vote-centre { display: flex; flex-direction: column; align-items: center; }
.vote-centre .qr-card { width: 560px; height: 560px; }
.meter { display: flex; gap: 18px; margin-top: 44px; }
.meter .pill { padding: 16px 26px; border-radius: 22px; text-align: center; min-width: 230px; }
.meter .big { font-size: 54px; font-weight: 600; line-height: 1; }
.meter .small { margin-top: 10px; font-size: 18px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mist); }

/* welcome check-in panel */
.checkin { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 520px 1fr; align-items: center; padding: 160px 120px 90px; gap: 80px; transition: opacity 1.2s ease; }
.checkin.off { opacity: 0; }
.checkin .qr-card { width: 480px; height: 480px; }
.checkin h1 { margin: 0; font-size: 72px; font-weight: 600; line-height: 1.1; }
.checkin p { margin: 18px 0 0; font-size: 30px; color: var(--mist); line-height: 1.4; }
.checkin .ar { text-align: right; }
.checkin .ar h1 { font-weight: 700; line-height: 1.3; }

/* ---- voting results ------------------------------------------------------------------------- */
.results { position: absolute; inset: 0; padding: 190px 170px 120px; display: flex; flex-direction: column; }
.results .head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 40px; }
.results .head .en { font-size: 58px; font-weight: 600; }
.results .head .ar { font-size: 62px; font-weight: 700; }
.rows { flex: 1; display: flex; flex-direction: column; gap: 22px; }
.row { position: relative; flex: 1; display: grid; grid-template-columns: 150px 1fr 1fr; align-items: center; padding: 0 48px 0 0; border-radius: 30px; overflow: hidden; }
.row .rank { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 76px; font-weight: 300; border-right: 1px solid rgba(255, 255, 255, 0.16); color: #fff; }
.row .rank small { font-size: 15px; letter-spacing: 0.22em; color: var(--ice); font-weight: 500; text-transform: uppercase; margin-top: 4px; }
.row .en { padding-left: 48px; font-size: 52px; font-weight: 600; }
.row .ar { text-align: right; font-size: 56px; font-weight: 700; }
.row .share { position: absolute; left: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, var(--red), #fff 40%, var(--blue-2)); }
.row.empty { opacity: 0.55; }
.row.empty .en, .row.empty .ar { color: transparent; }
.row.empty::after { content: ''; position: absolute; left: 200px; right: 48px; top: 50%; height: 2px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.0), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.0)); }
.row.first { border-color: rgba(255, 255, 255, 0.5); box-shadow: var(--glass-shadow), 0 0 80px rgba(110, 165, 255, 0.45); }
.row.show { animation: row-in 1.2s cubic-bezier(0.2, 0.7, 0.1, 1) both; }
.row.show::before { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%); transform: translateX(-100%); animation: row-sweep 1.3s 0.15s ease-out both; pointer-events: none; }
@keyframes row-in { from { opacity: 0; transform: translateY(24px) scale(0.985); filter: brightness(2.2) blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes row-sweep { to { transform: translateX(100%); } }

/* ---- raffle -------------------------------------------------------------------------------------- */
.raffle { position: absolute; inset: 0; }
.raffle .title { position: absolute; top: 150px; left: 0; right: 0; text-align: center; }
.raffle .title .en { font-size: 30px; letter-spacing: 0.42em; text-transform: uppercase; font-weight: 500; color: var(--ice); }
.raffle .title .ar { font-size: 44px; font-weight: 700; margin-top: 6px; }
.raffle .prize { display: inline-flex; gap: 18px; margin-top: 22px; padding: 12px 30px; border-radius: 99px; font-size: 24px; letter-spacing: 0.12em; text-transform: uppercase; }
.raffle .prize .ar { font-size: 26px; letter-spacing: 0; margin: 0; font-weight: 500; }
.reel { position: absolute; left: 50%; top: 382px; width: 760px; height: 330px; transform: translateX(-50%); border-radius: 46px; overflow: hidden; }
.reel .win { position: absolute; left: 0; right: 0; top: 50%; height: 200px; transform: translateY(-50%); border-top: 1px solid rgba(255, 255, 255, 0.28); border-bottom: 1px solid rgba(255, 255, 255, 0.28); background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.04)); }
.reel .strip { position: absolute; inset: 0; -webkit-mask: linear-gradient(180deg, transparent, #000 32%, #000 68%, transparent); mask: linear-gradient(180deg, transparent, #000 32%, #000 68%, transparent); }
.reel .num { position: absolute; left: 0; right: 0; height: 200px; display: flex; align-items: center; justify-content: center; font-size: 190px; font-weight: 600; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; color: #fff; text-shadow: 0 0 30px rgba(130, 180, 255, 0.6); will-change: transform; }
.reel.idle .num { color: rgba(255, 255, 255, 0.14); text-shadow: none; }
.reel.landed .num:not(.centre) { opacity: 0; transition: opacity 0.5s ease; }
.reel.landed { box-shadow: var(--glass-shadow), 0 0 140px rgba(150, 195, 255, 0.85); border-color: rgba(255, 255, 255, 0.7); }
.reel.landed .num.centre { animation: pop 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes pop { 0% { transform: translateY(var(--y)) scale(1); } 40% { transform: translateY(var(--y)) scale(1.14); text-shadow: 0 0 80px #fff; } 100% { transform: translateY(var(--y)) scale(1.06); } }
.ring { position: absolute; left: 50%; top: 547px; width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.9); opacity: 0; pointer-events: none; }
.ring.burst { animation: burst 1.3s cubic-bezier(0.1, 0.7, 0.2, 1) both; }
@keyframes burst { 0% { opacity: 0.95; transform: scale(0.4); } 100% { opacity: 0; transform: scale(5.5); border-width: 1px; } }
.winner { position: absolute; left: 0; right: 0; top: 748px; text-align: center; }
.winner .label { font-size: 22px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--ice); }
.winner .label [dir='rtl'] { letter-spacing: 0; font-size: 26px; }
.winner .name { margin-top: 12px; font-size: 76px; font-weight: 600; white-space: nowrap; }
.winner .dept { margin-top: 6px; font-size: 28px; color: var(--mist); }
.winner .sub { font-size: 30px; color: var(--mist); }
.chips { position: absolute; left: 0; right: 0; bottom: 64px; display: flex; justify-content: center; gap: 16px; }
.chip { width: 118px; height: 66px; border-radius: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 30px; font-weight: 600; font-variant-numeric: tabular-nums; }
.chip small { font-size: 12px; letter-spacing: 0.2em; color: var(--mist); font-weight: 500; }
.chip.empty { opacity: 0.4; font-weight: 300; }
.chip.now { border-color: rgba(255, 255, 255, 0.85); box-shadow: var(--glass-shadow), 0 0 40px rgba(130, 180, 255, 0.6); }
.summary { position: absolute; left: 120px; right: 120px; top: 350px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; }
.summary .card { border-radius: 26px; padding: 26px 20px; text-align: center; animation: rise 0.9s both; }
.summary .card .slot { font-size: 16px; letter-spacing: 0.24em; color: var(--ice); text-transform: uppercase; }
.summary .card .no { font-size: 78px; font-weight: 600; line-height: 1.1; margin-top: 8px; }
.summary .card .nm { font-size: 24px; margin-top: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* placeholder card (awards sequences live in the awards project) */
.placeholder { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -46%); width: 1120px; padding: 60px 70px; border-radius: 40px; text-align: center; }
.placeholder h2 { margin: 18px 0 14px; font-size: 56px; font-weight: 600; }
.placeholder p { margin: 0; font-size: 28px; color: var(--mist); line-height: 1.5; }
.placeholder .steps { display: flex; justify-content: center; gap: 14px; margin-top: 36px; flex-wrap: wrap; }
.placeholder .steps span { padding: 12px 22px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, 0.25); font-size: 22px; }

#sound-gate { position: fixed; z-index: 50; left: 50%; bottom: 24px; transform: translateX(-50%); padding: 12px 22px; border-radius: 12px; border: 0; background: #fff; color: #000; cursor: pointer; }

/* voting QR when voting is already closed: never invite votes that will be refused */
.qr-wrap { position: relative; }
.qr-closed { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 10px; border-radius: 34px; background: rgba(4, 10, 38, 0.86); font-size: 52px; font-weight: 600; }
.qr-closed [dir='rtl'] { font-weight: 700; }
.vote-scene.closed .qr-closed { display: flex; }

/* ---- AW26 awards loop: clean plate + live overlay layers (drawn in % of the loop frame) ---- */
.loop-scene { background: #000; }
.loop-box { position: absolute; overflow: hidden; }
.loop-plate { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.loop-layers { position: absolute; inset: 0; }
.ov-el { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transform-origin: 50% 50%; pointer-events: none; will-change: transform, opacity; }
.ov-el img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.loop-layers.editing .ov-el { pointer-events: auto; cursor: move; }
.loop-layers.editing .ov-el::after { content: ''; position: absolute; inset: -6px; border: 2px dashed rgba(140, 190, 255, 0.6); border-radius: 6px; pointer-events: none; }
.loop-layers.editing .ov-el.sel::after { border: 4px solid #4da3ff; }
.loop-layers.editing .ov-el.ghost { opacity: 0.35 !important; }