/* DCAA brand palette (Brand Guideline p.17-18) */
:root {
  --navy: #1A1751;
  --maroon: #96171A;
  --red: #BE202E;
  --gold: #B8914F;
  --gold-light: #D9BC84;
  --gold-dark: #8F6B32;
  --cream: #FFF1DA;
  --cream-light: #FFF8EE;
  --gray: #D2D3D4;
  --stage-h: min(58vh, 120vw);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; }
body {
  font-family: 'Alexandria', system-ui, sans-serif;
  color: var(--navy);
  background: var(--cream-light);
  overflow: hidden;
  user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.bg {
  position: fixed; inset: 0; z-index: -1;
  background: linear-gradient(160deg, var(--cream-light) 0%, #F6E9D6 55%, #EAD7BC 100%);
  overflow: hidden;
}
.bg-ring {
  position: absolute; width: 90vmin; height: 90vmin; left: 50%; top: 42%;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(184,145,79,.14) 0%, rgba(184,145,79,.06) 60%, transparent 70%);
}

/* top bar */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(env(safe-area-inset-top) + 2.2vh) 4vw 0;
}
.topbar-logo { height: 9vh; max-height: 110px; }
.lang-toggle {
  font: 600 20px 'Alexandria', sans-serif; color: var(--navy);
  background: rgba(255,255,255,.6); border: 1.5px solid var(--gold);
  border-radius: 999px; padding: 10px 26px; cursor: pointer;
}

/* screens */
main { height: 100%; }
.screen {
  position: absolute; inset: 0; padding: 14vh 5vw 4vh;
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 3vh;
  text-align: center;
}
.screen.active { display: flex; animation: fadeIn .45s ease both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* framed theme, from the invitation */
.frame-box {
  position: relative; border: 2px solid var(--gold);
  padding: 7vh 8vw 6vh; margin-bottom: 2vh;
}
.frame-box i { position: absolute; width: 18px; height: 18px; border-radius: 50%; background: var(--gold); }
.frame-box i:nth-child(1) { top: -10px; left: -10px; }
.frame-box i:nth-child(2) { top: -10px; right: -10px; }
.frame-box i:nth-child(3) { bottom: -10px; left: -10px; }
.frame-box i:nth-child(4) { bottom: -10px; right: -10px; }
.theme-ar {
  font-family: 'Aref Ruqaa', serif; font-weight: 700; direction: rtl;
  font-size: clamp(72px, 13vw, 170px); line-height: 1.1;
  background: linear-gradient(180deg, var(--gold-light), var(--gold) 45%, var(--gold-dark));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.theme-en { font-size: clamp(22px, 3.4vw, 44px); font-weight: 300; color: var(--navy); margin-top: 1vh; }

.title { font-size: clamp(36px, 6vw, 64px); font-weight: 700; margin: 0; color: var(--navy); }
.lead { font-size: clamp(20px, 3vw, 34px); font-weight: 600; margin: 0; color: var(--maroon); }
.hint { font-size: clamp(16px, 2.2vw, 26px); font-weight: 400; margin: 0; color: var(--navy); opacity: .8; }

/* buttons */
.btn {
  font: 600 clamp(18px, 2.6vw, 30px) 'Alexandria', sans-serif;
  border-radius: 999px; padding: 1.1em 2.2em; cursor: pointer; border: 0;
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:active { transform: scale(.96); }
.btn:disabled { opacity: .5; }
.btn-gold {
  color: #fff;
  background: linear-gradient(180deg, #C9A462 0%, var(--gold) 50%, var(--gold-dark) 100%);
  box-shadow: 0 10px 30px rgba(143,107,50,.35), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-ghost { color: var(--navy); background: rgba(255,255,255,.7); border: 2px solid var(--navy); }
.btn-xl { font-size: clamp(22px, 3.4vw, 40px); }
#btnStart { animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.04); box-shadow: 0 14px 44px rgba(143,107,50,.5); } }
.actions { display: flex; gap: 3vw; align-items: center; }

/* camera stage: always 2:3, same as the 1200x1800 print */
.stage {
  position: relative; height: var(--stage-h); aspect-ratio: 2 / 3;
  background: var(--navy); overflow: hidden;
  box-shadow: 0 24px 60px rgba(26,23,81,.25); border: 6px solid #fff;
}
.stage video, .stage > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stage video.mirrored { transform: scaleX(-1); }
.stage-overlay { pointer-events: none; }
.countdown {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--stage-h) * .32); font-weight: 700; color: #fff;
  text-shadow: 0 6px 30px rgba(26,23,81,.6); pointer-events: none;
}
.countdown.tick { animation: tick 1s ease-out; }
@keyframes tick { from { transform: scale(1.6); opacity: 0; } 25% { opacity: 1; } to { transform: scale(1); opacity: .9; } }
.flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.flash.go { animation: flash .6s ease-out; }
@keyframes flash { from { opacity: 1; } to { opacity: 0; } }
.camera-error {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 10%; color: #fff; font-size: 22px; background: var(--navy);
}
.camera-error[hidden] { display: none; }

/* saving */
.spinner {
  width: 96px; height: 96px; border-radius: 50%;
  border: 8px solid rgba(184,145,79,.25); border-top-color: var(--gold);
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* QR */
.qr-card { background: #fff; padding: 22px; border-radius: 18px; border: 3px solid var(--gold); box-shadow: 0 18px 50px rgba(26,23,81,.18); }
#qrcode canvas { display: block; width: min(34vh, 60vw); height: auto; }
.timer { opacity: .75; font-weight: 400; }

.toast {
  position: fixed; left: 50%; bottom: 5vh; transform: translateX(-50%);
  background: var(--maroon); color: #fff; padding: 16px 28px; border-radius: 999px; font-size: 20px;
}
.toast[hidden] { display: none; }

/* landscape iPad: give the stage more room */
@media (orientation: landscape) {
  :root { --stage-h: 64vh; }
  .screen { padding-top: 12vh; gap: 2.4vh; }
  .frame-box { padding: 4vh 6vw; }
  .theme-ar { font-size: clamp(60px, 9vh, 130px); }
}