:root{
  --bg:#0b0c10; --fg:#e5e7eb; --muted:#b8c1cc;
  --accent-red:#d12b2b; --accent-purple:#8b5cf6; --accent-green:#22c55e;
  --card:#111318; --line:#212733;
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; color:var(--fg);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans';
  background:
    linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.8)),
    url('/static/party_bg.jpg') center/cover no-repeat fixed;
}
main{ max-width:1100px; margin:0 auto; padding:24px; }
a{ color:var(--fg); text-decoration:none; }
.muted{ color:var(--muted); }
.center{ text-align:center; }
.center-block{ display:block; width:fit-content; margin-left:auto; margin-right:auto; }
.mt{ margin-top:24px; }

.cap{ text-transform:uppercase; font-weight:800; letter-spacing:.04em; }
.cap.red{ color:var(--accent-red); }
.big{ font-size:clamp(28px,6vw,64px); font-weight:800; text-align:center; }
.label-xl{ font-size:clamp(16px,2vw,22px); font-weight:800; }
.label-xxl{ font-size:clamp(20px,3.2vw,36px); font-weight:800; }

/* Floating controls */
.top-left{ position:fixed; top:16px; left:16px; z-index:20; }
.bottom-right{ position:fixed; right:16px; bottom:16px; z-index:20; }

/* Cards & forms */
.card{ background:rgba(17,19,24,.92); border:1px solid var(--line); border-radius:16px; padding:22px; }
.card.narrow{ max-width:560px; margin:0 auto; }
.form{ display:flex; flex-direction:column; gap:16px; }

/* INPUTS — admin layout preserved (no global full-width) */
input[type="text"], input[type="password"], input[type="date"], input[type="time"]{
  background:#0f1116; border:1px solid var(--line); color:var(--fg);
  padding:14px 16px; border-radius:12px; outline:none;
}
/* Only the Enter form’s name field is full width */
#enter-form input[type="text"]{ width:100%; display:block; }

.ghost-input{ font-size:14px; }
.ghost-input::placeholder{ color:#6b7280; }

/* Legacy button family (red Join, purple Admin, green Save, etc.) */
.button{
  display:inline-block; padding:12px 18px; border-radius:12px; background:transparent;
  color:var(--fg); font-weight:800; border:1px solid var(--line); cursor:pointer; text-align:center;
}
.button.red{ background:var(--accent-red); border-color:var(--accent-red); color:#121212; }
.button.purple{ background:var(--accent-purple); border-color:var(--accent-purple); color:#121212; }
.button.green{ background:var(--accent-green); border-color:var(--accent-green); color:#121212; }
.button.small{ padding:8px 12px; font-weight:700; font-size:14px; }
.button.wide{ width:100%; }
.button.xl{ padding:16px 24px; font-size:clamp(20px,3.2vw,36px); }
.button.center-block{ display:block !important; width:fit-content; margin-left:auto !important; margin-right:auto !important; }

/* Newer btn family (used on Enter); visuals unchanged */
.btn{
  display:inline-block; padding:12px 18px; border-radius:12px; background:transparent;
  color:var(--fg); font-weight:800; border:1px solid var(--line); cursor:pointer; text-align:center;
}
.btn-primary{ background:var(--accent-red); border-color:var(--accent-red); color:#121212; }
.btn-accent{ background:var(--accent-red); border-color:var(--accent-red); color:#121212; }
.btn-wide{ display:block; width:100%; }
.btn[disabled]{ opacity:.55; cursor:not-allowed; }
/* Bigger submit on Enter only */
.btn-xl{ padding:16px 22px; font-size:clamp(18px,3.6vw,24px); line-height:1.15; }

/* Enter page spacing */
.hero .countdown{ margin-top:32px; }
.enter-hero + .card.narrow{ margin-top:56px; }

/* Countdown */
.countdown{
  display:flex; gap:20px; align-items:center; justify-content:center; font-weight:800;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.25));
}
.countdown .unit{ display:flex; flex-direction:column; align-items:center; min-width:72px; }
.countdown .num{
  font-size:clamp(36px,9vw,96px); line-height:1; color:var(--accent-red);
  font-variant-numeric: tabular-nums; font-feature-settings:"tnum";
  width:4ch; display:inline-block; text-align:center;
}
.countdown .label{ font-size:12px; color:var(--muted); margin-top:6px; text-transform:uppercase; letter-spacing:.08em; }

/* Grid & tiles */
.grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; margin-top:16px; }
.tile{ background:rgba(17,19,24,.92); border:1px solid var(--line); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; }
.tile-media{ position:relative; }
.tile img{ width:100%; height:220px; object-fit:cover; display:block; cursor:zoom-in; }
.tile .photo-placeholder{ border:none; }
.tile-body{ padding:16px 14px 20px; display:flex; flex-direction:column; gap:12px; flex:1; justify-content:flex-start; text-align:center; }
.tile .name{ font-weight:700; text-align:center; margin:0; }
.tile-action{ margin-top:auto; }
.tile-action .button{ width:100%; }
.tile-body .btn-row{ margin-top:auto; }

.photo-placeholder{
  width:100%;
  height:220px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(17,19,24,.92);
  border:1px dashed rgba(255,255,255,.08);
  color:var(--muted);
  font-weight:700;
  font-size:14px;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin:0;
}

.photo-placeholder--result{
  height:auto;
  aspect-ratio:4 / 3;
  border:1px dashed var(--line);
  border-radius:16px;
  margin-bottom:0;
}

.result img{
  width:100%;
  display:block;
  border-radius:16px;
}

/* Lightbox */
.lightbox{ position:fixed; inset:0; background:rgba(0,0,0,.85); display:flex; align-items:center; justify-content:center; z-index:100; }
.lightbox.hidden{ display:none; }
.lightbox img{ max-width:92vw; max-height:88vh; border-radius:12px; }
.lightbox-close{ position:absolute; top:16px; right:16px; width:40px; height:40px; border-radius:12px; background:var(--accent-red); color:#111; border:none; font-size:22px; font-weight:900; cursor:pointer; }

/* Flash */
.flash-wrap{ position:sticky; top:0; z-index:2; }
.flash{ margin-bottom:8px; padding:10px 12px; border-radius:12px; }
.flash.success{ background:#10391f; border:1px solid #1f6d3a; }
.flash.error{ background:#3a1212; border:1px solid #712323; }
.flash.info{ background:#12313a; border:1px solid #245b69; }

/* Page header & callouts */
.page-header{ margin-bottom:12px; }
.page-header .title-main{ margin-top:0; }
.callout{
  margin:16px 0;
  padding:14px 18px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(16,57,31,.85);
  font-weight:600;
  text-align:center;
}
.callout.success{ border-color:#1f6d3a; }

/* Admin action row */
.btn-row{ display:flex; gap:8px; justify-content:center; align-items:center; flex-wrap:wrap; margin-top:8px; }

/* Upload overlay (kept for other pages) */
.upload-overlay{ position:relative; }
.upload-overlay .button{ display:block; width:100%; }
.upload-overlay .file-input{
  position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; z-index:2;
}

/* Hide the native file input used in enter.html */
.visually-hidden{
  position:absolute !important; left:-9999px !important;
  width:1px !important; height:1px !important; overflow:hidden !important;
  clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

/* Kill any pseudo “required” suffix on the upload label (defensive) */
#photo-label::after,
#photo[required] + #photo-label::after,
label[for="photo"]::after { content:none !important; }

/* Status chip (photo attached) */
.attach-status{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:700; margin-top:2px; color:#c8f5d2;
}
.attach-status::before{
  content:"✓"; display:inline-block; font-weight:900;
  width:20px; height:20px; line-height:20px; text-align:center;
  border-radius:6px; background:var(--accent-green); color:#111;
}
.attach-status.hidden{ display:none; }

/* Main title */
.title-main{ font-size: clamp(28px, 6vw, 56px); font-weight: 800; margin: 16px 0 24px; }

/* Defensive: honor EXIF orientation if present */
img { image-orientation: from-image; }

/* HOME headline: slightly smaller than previous, still pushed down */
.hero:not(.enter-hero){ padding-top: 84px; }
.hero:not(.enter-hero) .cap.red.label-xxl{
  font-size: clamp(28px, 5.2vw, 64px);
  line-height: 1.05;
}
.hero:not(.enter-hero) .countdown{ margin-top: 28px; }

/* ------- Admin: bigger, uppercase Save button (only when class save-btn present) ------- */
.button.green.save-btn,
.btn.save-btn{
  text-transform: uppercase;
  font-size: clamp(16px, 2.6vw, 22px);
  line-height: 1.1;
  padding: 14px 22px;
}

/* Results */
.results-list{ display:flex; flex-direction:column; gap:20px; margin-top:24px; }
.result{ background:rgba(17,19,24,.92); border:1px solid var(--line); border-radius:20px; padding:20px; display:flex; align-items:flex-start; gap:20px; flex-wrap:wrap; }
.result-media{ flex:0 0 260px; max-width:320px; width:100%; }
.result-media img{ width:100%; display:block; border-radius:16px; }
.result-body{ flex:1 1 240px; display:flex; flex-direction:column; gap:12px; justify-content:center; }
.result-heading{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.result .name{ font-size:clamp(18px,2.6vw,28px); font-weight:800; }
.result-badge{ background:var(--accent-green); color:#111; font-weight:800; text-transform:uppercase; letter-spacing:.08em; padding:6px 14px; border-radius:999px; font-size:12px; }
.result.winner{ border-color:var(--accent-green); box-shadow:0 0 0 2px rgba(34,197,94,.35); }

/* Responsive */
@media (max-width:1100px){ .grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:800px){ .grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){
  .grid{ grid-template-columns:repeat(1,minmax(0,1fr)); }
  .countdown{ gap:16px; }
  .countdown .unit{ min-width:60px; }
}
@media (max-width:720px){
  .result{ flex-direction:column; align-items:stretch; }
  .result-media{ max-width:none; }
}