:root{
  --bg:#0f1113;
  --accent:#ff6b6b;
  --muted:rgba(255,255,255,0.85);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body,#stage{height:100%}
body{
  /* use the uploaded Venice Carnival photo as a full-page background with a dark overlay */
  background:
    linear-gradient(rgba(8,9,11,0.62), rgba(8,9,11,0.62)),
    url("/venice-carnival-mask-and-costume-183.jpg") center / cover no-repeat fixed;
  color:#fff;
  /* keep a clean UI font for body, but headings will use the decorative font below */
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  -webkit-font-smoothing:antialiased;
}
#stage{
  position:relative;
  width:100%;
  max-width:980px;
  height:100%;
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:center;
  justify-content:center;
}
.page-title{
  /* make title part of normal flow so it does not cover images */
  position:relative;
  width:calc(100% - 32px);
  max-width:900px;
  text-align:center;
  color:#fff;
  /* larger, decorative title */
  font-family: 'Cinzel Decorative', serif;
  font-size:84px;
  font-weight:900;
  margin:0 0 16px 0;
  line-height:1.02;
  padding:12px;
  text-transform:uppercase;
  letter-spacing:1px;
  text-shadow:0 6px 22px rgba(0,0,0,0.65);
}

/* photo container: larger, fixed-size block so images do not resize when quiz is added */
.photo-wrap{
  position:relative;
  width:100%;
  height:85vh; /* larger visual area */
  min-height:680px; /* ensure the full photo has room */
  flex: 0 0 auto; /* prevent flex resizing */
  background:linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.35));
  border-radius:12px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 30px rgba(0,0,0,0.6);
}

/* ensure the uploaded photos show fully (no cropping) while staying same displayed size */
/* base rule: position images absolutely and center them so their displayed size stays fixed */
.photo-wrap img{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  max-width:none;
  max-height:100%;
  width:auto;
  height:100%;
  object-fit:contain; /* show whole image without clipping */
  transition: transform .25s ease, opacity .35s ease, clip-path .35s ease;
  transform-origin:center center;
  display:block;
}

/* keep Bad Bunny image fixed in size and unaffected by overlay/controls */
#badbunny{
  z-index:1;
  pointer-events:none;
}

/* overlay mask placed above the base photo and sized to match the fixed photo */
#mask{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) scale(1);
  transform-origin:center center;
  width:auto;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2;
  pointer-events:auto;
  transition:transform .45s ease, opacity .45s ease, clip-path .45s ease;
  /* start fully covered; reveals happen by shrinking the mask (scale) */
  clip-path: inset(0 0 0 0);
}

/* quiz UI */
.quiz{
  width:100%;
  max-width:980px;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius:12px;
  padding:12px;
  box-shadow:0 6px 20px rgba(0,0,0,0.6);
}
.progress{font-size:16px;color:var(--muted);margin-bottom:10px}
.quiz-form .q{
  font-family: 'Cinzel Decorative', serif;
  font-weight:700;
  margin-bottom:12px;
  /* larger question text */
  font-size:28px;
  line-height:1.2;
}
.choices{display:flex;flex-direction:column;gap:12px}
.choice{
  display:flex;
  align-items:center;
  gap:14px;
  background:rgba(255,255,255,0.02);
  padding:14px;
  border-radius:12px;
  cursor:pointer;
  /* larger, decorative choice text */
  font-family: 'Cinzel Decorative', serif;
  font-size:22px;
}
.choice input{width:26px;height:26px}
.answered{margin-top:10px;padding:8px;border-radius:8px;font-weight:600}
.answered.correct{background:rgba(40,180,110,0.12);color:#9fe6c5}
.answered.incorrect{background:rgba(220,80,80,0.08);color:#ffb3b3}

.quiz-controls{display:flex;gap:8px;justify-content:center;margin-top:10px}
.btn{background:transparent;border:1px solid rgba(255,255,255,0.08);color:#fff;padding:12px 18px;border-radius:10px;min-width:110px;cursor:pointer;font-weight:700;font-size:16px}
.btn:disabled{opacity:.4;cursor:not-allowed}
/* distinct styling for restart button */
.btn.restart{
  border-color: rgba(255,255,255,0.12);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  min-width:90px;
  color:var(--muted);
  font-weight:800;
}
.result{margin-top:10px;text-align:center;font-weight:700}

.result.correct{color:#9fe6c5}
.result.incorrect{color:#ffb3b3}
.result.final{color:var(--muted)}

/* responsiveness */
@media (min-width:1200px){
  #stage{max-width:1300px}
  .photo-wrap{height:62vh}
  .quiz{padding:16px}
}