/* Related files: index.html, app.js, ui.js. */

/* The HTML5 `hidden` attribute normally sets display:none via the UA
   stylesheet, but a class selector with an explicit `display: flex`
   (used by .auth-gate, .admin-panel, .lightbox) overrides it. Force
   hidden to win in every case so elements with the `hidden` attribute
   stay invisible no matter what their class CSS says. */
[hidden]{display:none !important}

:root{
  /* Palette is lifted from templom_3d.html so the wrapper and the
     embedded 3D surface read as one ceremonial space. Cool blue is
     gone — everything is gold on near-black with warm taupe muted
     tones. The two "accent" variables are now both shades of the
     classic Masonic gold; semantic colors (success, warning, error,
     pending) stay where they were because the admin panel relies on
     them to signal status. */
  --bg:#07080f;
  --panel:rgba(11,12,22,.92);
  --panel-soft:rgba(15,17,28,.92);
  --border:rgba(212,175,55,.22);
  --border-strong:rgba(212,175,55,.42);
  --text:#e9e3d2;
  --muted:#9b9482;
  --accent:#d4af37;
  --accent-strong:#b48719;
  --gold-soft:#e8c66a;
  --danger:#f59e0b;
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:Inter,system-ui,sans-serif;
}

*{box-sizing:border-box}
body{
  margin:0;
  background:
    radial-gradient(ellipse at 20% -5%, rgba(212,175,55,.06), transparent 55%),
    radial-gradient(ellipse at 85% 110%, rgba(212,175,55,.04), transparent 50%),
    linear-gradient(180deg,#06060c 0%, #0a0c17 60%, #07080f 100%);
  color:var(--text);
  font:15px/1.5 var(--sans);
  -webkit-tap-highlight-color:transparent;
}

button,input,textarea{font:inherit}
button{cursor:pointer}

/* Ceremonial headings throughout the app — match the templom_3d HUD
   so the chrome and the surface feel like one work. */
h1,h2,h3{
  font-family:var(--serif);
  font-weight:600;
  letter-spacing:.01em;
}

.shell{min-height:100vh;padding:20px}
.topbar,.canvas-panel,.card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:0 18px 50px rgba(0,0,0,.5);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.topbar{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:flex-start;
  padding:18px 22px;
  margin-bottom:18px;
  /* The topbar needs its own stacking context with high z-index so the
     user-menu dropdown can paint over the canvas-panel / welcome-modal
     / sidebar below it. Without this, backdrop-filter on the panels
     creates its own context and the dropdown gets clipped. */
  position:relative;
  z-index:200;
}
.topbar-identity{min-width:0;flex:1 1 auto}
.topbar-mode-note{
  margin:6px 0 0;
  font-size:11.5px;
  color:#fbbf24;
  letter-spacing:.02em;
}

/* Icon-only ghost button — used for the Refresh ↻ so the topbar
   reads as title + a small toolbar, not a row of equal-weight
   labels. */
.ghost-button.icon-only{
  width:40px;
  min-width:40px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  line-height:1;
}

/* User menu (native <details> dropdown). The summary is the only
   "always visible" surface — name + caret. The menu items only
   appear when the user explicitly opens the menu. */
.user-menu{
  position:relative;
}
.user-menu summary{
  cursor:pointer;
  list-style:none;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px 6px 12px;
  border:1px solid var(--border-strong);
  border-radius:999px;
  background:rgba(212,175,55,.06);
  color:var(--gold-soft);
  font-family:var(--serif);
  font-size:14px;
  letter-spacing:.04em;
  transition:.15s ease;
  user-select:none;
}
.user-menu summary::-webkit-details-marker{display:none}
.user-menu summary::marker{content:""}
.user-menu summary:hover,
.user-menu summary:focus-visible{
  background:rgba(212,175,55,.14);
  outline:none;
}
.user-menu .user-badge{
  background:transparent;
  border:0;
  padding:0;
  color:inherit;
  font:inherit;
}
.user-summary-caret{
  font-size:10px;
  opacity:.7;
  transition:.15s ease;
}
.user-menu[open] .user-summary-caret{
  transform:rotate(180deg);
}
.user-menu-dropdown{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  z-index:300;
  display:flex;
  flex-direction:column;
  min-width:180px;
  padding:6px;
  border:1px solid var(--border-strong);
  border-radius:12px;
  background:rgba(11,12,22,.98);
  box-shadow:0 18px 50px rgba(0,0,0,.6);
}
.user-menu-item{
  appearance:none;
  border:0;
  background:transparent;
  text-align:left;
  padding:10px 12px;
  border-radius:8px;
  color:var(--text);
  cursor:pointer;
  font-family:var(--sans);
  font-size:13px;
  transition:.12s ease;
}
.user-menu-item:hover,
.user-menu-item:focus-visible{
  background:rgba(212,175,55,.14);
  color:var(--gold-soft);
  outline:none;
}

.eyebrow{
  margin:0 0 6px;
  color:var(--accent);
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:10.5px;
  font-family:var(--sans);
  font-weight:600;
}

h1,h2,p{margin:0}
h1{font-size:26px;color:var(--gold-soft)}
h2{font-size:18px;color:var(--text)}
h3{font-size:15px;color:var(--text)}

.topbar-actions,.comment-heading{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.comment-tools{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.layout{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(320px,.8fr);
  gap:18px;
}

.canvas-panel{padding:18px}
.panel-header{
  display:flex;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
  align-items:flex-start;
  flex-wrap:wrap;
}

/* Hangsúlyosabb jelenetcím: a panel-header első h2-je (a 3D
   templom mostani állapotának címe) most a fő vizuális horgony
   ebben a sávban. Mire az UI v2.1-re scene-timeline-t építünk,
   ez a cím lesz az "aktuális jelenet" név. */
.panel-header > div > h2{
  font-size:22px;
  color:var(--gold-soft);
  margin-bottom:4px;
  letter-spacing:.01em;
}

.panel-tools{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
}

.version-list{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

/* Mobile (<= 720px). Touch-target minimum is 44px following Apple's
   HIG and Material's recommendation, so every button the finger lands
   on grows to at least that. The canvas-panel header reflows column,
   the layout becomes a single column, and the panel-tools switches
   sit side-by-side at full width for natural thumb reach. */
@media (max-width: 720px) {
  body{font-size:14px}
  h1{font-size:22px}
  h2{font-size:17px}

  .shell{padding:12px}
  .topbar{
    flex-direction:column;
    align-items:stretch;
    gap:12px;
    padding:14px 16px;
  }
  .topbar-actions{
    flex-wrap:wrap;
    gap:8px;
  }
  .layout{
    grid-template-columns:1fr;
    gap:12px;
  }
  .sidebar{
    position:static;
  }
  .canvas-panel{padding:14px}
  .panel-header{
    flex-direction:column;
    align-items:stretch;
    gap:12px;
  }
  .panel-tools{
    flex-direction:row;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
  }
  .version-list{
    justify-content:flex-start;
  }
  .surface-mode-switch{
    flex:1 1 auto;
    min-width:0;
  }

  /* Touch-target: every interactive button reaches 44px tall. */
  .mode-toggle-button{
    flex:1 1 0;
    padding:11px 10px;
    font-size:13px;
    min-height:44px;
  }
  .primary-button,
  .ghost-button{
    min-height:44px;
    padding:11px 14px;
  }
  .help-button,
  .admin-open-button,
  .logout-button{
    min-width:44px;
    min-height:44px;
  }
  /* The Exit-fullscreen × button — bigger on mobile so it's
     reliably hittable with a thumb at the corner of the screen. */
  .fullscreen-exit-button{
    width:48px;
    height:48px;
    font-size:26px;
  }
  .welcome-close{
    width:40px;
    height:40px;
    font-size:24px;
  }

  /* Markers are touch-tapped too. Stay readable + reach a touch
     target by adding an invisible 44px tap area around the visible
     dot via pseudo-element. The dot itself stays 26px so the surface
     does not get covered by huge stickers. */
  .marker{
    position:relative;
  }
  .marker::before{
    content:"";
    position:absolute;
    inset:-11px;
    border-radius:50%;
  }

  .welcome-guide{
    padding:22px 18px;
  }
  .welcome-steps{
    grid-template-columns:1fr;
  }
  .welcome-tribute{
    padding:16px 16px;
  }
  .welcome-acknowledge{
    width:100%;
  }
}

/* Tiny screen (under 380px) — squeeze a bit more. */
@media (max-width: 380px){
  .shell{padding:8px}
  .topbar{padding:12px}
  .canvas-panel{padding:10px}
  .auth-card{padding:20px 16px}
  .mode-toggle-button{padding:11px 6px;font-size:12px}
}

.surface-mode-switch{
  display:inline-flex;
  gap:4px;
  padding:5px;
  border:1px solid var(--border);
  border-radius:12px;
  background:rgba(212,175,55,.04);
}

.mode-toggle-button{
  border:1px solid transparent;
  border-radius:9px;
  padding:9px 13px;
  background:transparent;
  color:var(--muted);
  transition:.15s ease;
  font-family:var(--sans);
  font-size:13px;
  letter-spacing:.01em;
}
.mode-toggle-button:hover{
  color:var(--gold-soft);
}

.mode-toggle-button.active{
  background:rgba(212,175,55,.08);
  border-color:var(--border-strong);
  color:var(--gold-soft);
}

/* Use Surface vs Comment Mode — different semantic. Use Surface is
   the passive default (subtle gold hairline); Comment Mode is the
   armed state (solid gold fill, dark ink so the energy reads). */
#use-surface-button.active{
  background:rgba(212,175,55,.10);
  border-color:var(--border-strong);
  color:var(--gold-soft);
}
#comment-mode-button.active{
  background:linear-gradient(180deg, var(--gold-soft), var(--accent));
  border-color:var(--accent);
  color:#1a1606;
  font-weight:600;
}
/* Viewport toggle is a binary size hint, both options use the same
   subtle gold treatment — they are not semantically different enough
   to deserve two colors. */
#desktop-view-button.active,
#mobile-view-button.active{
  background:rgba(212,175,55,.10);
  border-color:var(--border-strong);
  color:var(--gold-soft);
}

/* Fullscreen — distinct from the other ghost buttons so the gateway
   to the distraction-free view reads as its own thing. Stays in the
   gold family but uses an outlined gold treatment so it doesn't
   compete with the primary "Comment Mode" gold fill. */
#fullscreen-button{
  border-color:var(--border-strong);
  color:var(--gold-soft);
  background:rgba(212,175,55,.06);
}
#fullscreen-button:hover,
#fullscreen-button:focus-visible{
  background:rgba(212,175,55,.14);
  border-color:var(--accent);
  color:var(--gold-soft);
  outline:none;
}
#fullscreen-button.is-active{
  background:rgba(212,175,55,.22);
  border-color:var(--accent);
  color:var(--gold-soft);
}

.badge,.version-chip{
  display:inline-flex;
  align-items:center;
  border:1px solid var(--border);
  border-radius:999px;
  padding:5px 11px;
  font-size:11.5px;
  letter-spacing:.04em;
  color:var(--muted);
  background:rgba(212,175,55,.04);
  font-family:var(--sans);
}

.version-chip{
  cursor:pointer;
  transition:.15s ease;
  font-family:var(--serif);
  font-size:14px;
  letter-spacing:.05em;
}
.version-chip:hover{color:var(--gold-soft);border-color:var(--border-strong)}

.version-chip.active{
  color:var(--gold-soft);
  border-color:var(--accent);
  background:rgba(212,175,55,.14);
}

.version-badge{color:var(--gold-soft);font-family:var(--serif);font-size:13.5px}

.primary-button,.ghost-button{
  border-radius:10px;
  border:1px solid var(--border);
  padding:10px 14px;
  background:rgba(212,175,55,.04);
  color:var(--text);
  transition:.15s ease;
  font-family:var(--sans);
  font-size:13px;
}
.ghost-button:hover,
.ghost-button:focus-visible{
  border-color:var(--border-strong);
  color:var(--gold-soft);
  outline:none;
}

.primary-button{
  border-color:var(--accent);
  background:linear-gradient(180deg,var(--gold-soft),var(--accent));
  color:#1a1606;
  font-weight:600;
}
.primary-button:hover,
.primary-button:focus-visible{
  filter:brightness(1.06);
  outline:none;
}

/* Disabled (admin-only) buttons. The visual signal needs to be obvious:
   muted background, reduced opacity, and not-allowed cursor. */
.primary-button.is-disabled,
.primary-button:disabled,
.ghost-button:disabled{
  cursor:not-allowed;
  opacity:.55;
  filter:grayscale(.4);
  box-shadow:none;
}

.admin-action{
  display:inline-flex;
  flex-direction:column;
  align-items:flex-end;
  gap:4px;
}

.admin-only-tag{
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  padding:2px 8px;
  border:1px solid var(--border);
  border-radius:999px;
  background:rgba(255,255,255,.03);
}

/* Auth gate — shown while the visitor has no valid session. Layered
   over everything except the lightbox so the underlying app cannot be
   interacted with until the user is signed in. The palette here is
   intentionally different from the main app: deep midnight blue plus
   gold accents matching the hero infographic at the top, so the
   pre-login experience reads as the project's identity surface and
   the post-login app reads as the working surface. */
.auth-gate{
  position:fixed;
  inset:0;
  z-index:900;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(166,124,38,.10), transparent 60%),
    radial-gradient(ellipse at 80% 100%, rgba(166,124,38,.07), transparent 55%),
    linear-gradient(180deg, #060b18 0%, #0a1126 55%, #07101f 100%);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding:24px 24px 48px;
  gap:24px;
  overflow-y:auto;
}

/* Hero image. The infographic is dense Hungarian text — readable on
   desktop, more decorative on mobile where the viewport is too narrow
   to read the small print. We let it scale fluidly with a max-width
   that keeps it sharp on a 24" monitor and fully visible at 360px
   phone widths. */
.auth-hero{
  width:100%;
  max-width:1024px;
  margin:8px 0 0;
}
.auth-hero img{
  width:100%;
  height:auto;
  display:block;
  border-radius:16px;
  box-shadow:
    0 30px 70px rgba(0,0,0,.6),
    0 0 0 1px rgba(218,165,32,.22);
}

.auth-card{
  width:100%;
  max-width:440px;
  background:
    linear-gradient(180deg, rgba(15,22,40,.96), rgba(11,16,32,.98));
  border:1px solid rgba(218,165,32,.28);
  border-radius:18px;
  box-shadow:
    0 30px 80px rgba(0,0,0,.65),
    inset 0 0 0 1px rgba(218,165,32,.06);
  padding:28px 26px;
}
.auth-card .eyebrow{
  color:#d6b25a;
}
.auth-card h2{
  margin:4px 0 10px;
  font-size:22px;
  color:#f5e7bc;
  letter-spacing:.01em;
}
.auth-intro{
  color:#c9d2e4;
  margin:0 0 18px;
  line-height:1.5;
}
.auth-tabs{
  display:flex;
  gap:6px;
  padding:6px;
  border:1px solid rgba(218,165,32,.22);
  border-radius:12px;
  background:rgba(218,165,32,.04);
  margin:0 0 18px;
}
.auth-tab{
  flex:1 1 0;
  padding:8px 10px;
  border:1px solid transparent;
  border-radius:9px;
  background:transparent;
  color:#a7b1c5;
  cursor:pointer;
  font:inherit;
}
.auth-tab.active{
  background:linear-gradient(180deg, rgba(218,165,32,.18), rgba(180,135,25,.22));
  border-color:rgba(218,165,32,.55);
  color:#fceabf;
}
.auth-form{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.auth-message{
  margin:0;
  min-height:18px;
  color:var(--muted);
  font-size:13px;
  line-height:1.4;
}
.auth-message.is-error{color:#fca5a5}
.auth-message.is-success{color:#86efac}
.auth-submit{
  padding:12px 18px;
  border-radius:12px;
  background:linear-gradient(180deg, #e5c163, #b48719);
  color:#1a1408;
  border:1px solid rgba(218,165,32,.6);
  font-weight:700;
}
.auth-submit:hover,
.auth-submit:focus-visible{
  filter:brightness(1.07);
  outline:none;
}

/* Match the auth card field inputs to the gold-on-deep-blue palette
   so they do not stick out against the otherwise warm theme. */
.auth-card .field input{
  background:rgba(8,12,24,.8);
  border:1px solid rgba(218,165,32,.22);
  color:#f5e7bc;
}
.auth-card .field input:focus{
  outline:none;
  border-color:rgba(218,165,32,.6);
  box-shadow:0 0 0 3px rgba(218,165,32,.18);
}
.auth-card .field span{
  color:#c9d2e4;
}
.auth-field-hint{
  font-weight:400;
  color:#8b95aa;
  font-size:11px;
  display:block;
  margin-top:2px;
  letter-spacing:0;
  text-transform:none;
}

/* Email field — soft gold accent so reviewers cannot miss the "add
   your email" step on the Register tab. Hint text below the input
   spells out exactly when the address is used. */
.auth-email-field input{
  border-color:rgba(212,175,55,.45) !important;
  background:rgba(212,175,55,.05) !important;
}
.auth-email-field input:focus{
  border-color:var(--accent) !important;
  box-shadow:0 0 0 3px rgba(212,175,55,.22) !important;
}

/* Mobile tightening for the auth gate. The hero scales naturally, but
   the padding shrinks so the card has more room to breathe on a 360px
   phone viewport. */
@media (max-width: 720px){
  .auth-gate{
    padding:16px 14px 36px;
    gap:18px;
  }
  .auth-card{padding:22px 18px}
  .auth-hero img{border-radius:12px}
}
body.is-not-authed .layout,
body.is-not-authed .welcome-guide,
body.is-not-authed .topbar-actions{
  visibility:hidden;
}

/* Logged-in user controls in the topbar. */
.topbar-user{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.user-badge{
  background:rgba(212,175,55,.10);
  border-color:var(--border-strong);
  color:var(--gold-soft);
  font-family:var(--serif);
  font-size:13px;
  letter-spacing:.04em;
  font-weight:500;
}
.admin-open-button{
  background:linear-gradient(180deg, rgba(212,175,55,.16), rgba(180,135,25,.18));
  border-color:var(--accent);
  color:var(--gold-soft);
}
.admin-open-button:hover{
  background:linear-gradient(180deg, rgba(212,175,55,.26), rgba(180,135,25,.28));
  border-color:var(--gold-soft);
  color:#fceabf;
}

/* Admin panel — modal-style overlay for pending registrations. */
.admin-panel{
  position:fixed;
  inset:0;
  z-index:950;
  background:rgba(8,12,20,.78);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:40px 20px;
  overflow-y:auto;
}
.admin-card{
  width:100%;
  max-width:720px;
  background:rgba(18,26,40,.98);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  padding:26px 24px;
}
.admin-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
  margin-bottom:18px;
}
.admin-intro{
  color:var(--muted);
  margin:6px 0 0;
  font-size:13px;
}
.admin-close{position:static}
.admin-users{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.admin-user-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border:1px solid var(--border);
  border-radius:12px;
  background:rgba(8,16,28,.6);
}
.admin-user-row.pending{
  border-color:rgba(251,191,36,.45);
  background:rgba(251,191,36,.05);
}
.admin-user-row.approved{
  border-color:rgba(34,197,94,.35);
}
.admin-user-row.rejected{
  opacity:.5;
}
.admin-user-meta{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.admin-user-nick{font-weight:700}
.admin-user-stamp{font-size:12px;color:var(--muted)}
.admin-user-status{
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
}
.admin-user-status.pending{color:#fbbf24}
.admin-user-status.approved{color:#86efac}
.admin-user-status.rejected{color:#fca5a5}
.admin-user-email{font-size:12px;color:#c9d2e4}
.admin-user-email.muted{color:var(--muted);font-style:italic}
.admin-user-actions{
  display:flex;
  gap:6px;
}
.admin-user-actions button{
  padding:8px 12px;
  border-radius:10px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  color:var(--text);
  cursor:pointer;
  font:inherit;
  font-size:12px;
}
.admin-user-actions .approve{
  border-color:rgba(34,197,94,.45);
  color:#bbf7d0;
}
.admin-user-actions .approve:hover{
  background:rgba(34,197,94,.18);
  border-color:#22c55e;
}
.admin-user-actions .reject{
  border-color:rgba(239,68,68,.45);
  color:#fecaca;
}
.admin-user-actions .reject:hover{
  background:rgba(239,68,68,.18);
  border-color:#ef4444;
}

/* Nickname input is locked to the authed user once they sign in, so
   show it slightly muted so reviewers see the readonly intent. */
input.nickname-locked{
  opacity:.7;
  cursor:not-allowed;
  border-style:dashed;
}

/* Welcome guide — now a centered modal overlay. The first cut had
   the guide inline between the topbar and the layout, which pushed
   the review surface down the page and made the screen feel like a
   teaching page instead of a tool. As a modal it shows once on
   first visit, dismisses with a click on the backdrop / × / Kezdés
   button, and is reopened on demand from the ? button in the topbar.
   The ceremonial layer (intro) sits on top of the utility layer
   (the tools), but only for as long as the user wants. */
.welcome-guide{
  position:fixed;
  inset:0;
  z-index:850;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:40px 20px;
  overflow-y:auto;
}
.welcome-backdrop{
  position:fixed;
  inset:0;
  z-index:-1;
  background:rgba(5,5,10,.78);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.welcome-modal{
  position:relative;
  width:100%;
  max-width:980px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:0 30px 80px rgba(0,0,0,.65);
  padding:28px 30px;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.welcome-close{
  position:absolute;
  top:14px;
  right:14px;
  width:40px;
  height:40px;
  padding:0;
  font-size:24px;
  line-height:1;
  border:1px solid var(--border);
  border-radius:999px;
  background:rgba(8,8,15,.78);
  color:var(--muted);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1;
}
.welcome-close:hover,
.welcome-close:focus-visible{
  background:rgba(212,175,55,.18);
  color:var(--gold-soft);
  border-color:var(--accent);
  outline:none;
}

/* Tribute block — first thing inside the welcome guide. Visually
   set apart with an accent left bar and a softer background so it
   reads as "credit / source", not as another step. The download
   button uses the same gradient as primary actions so the link is
   inviting, not buried in plain text. */
.welcome-tribute{
  position:relative;
  border-left:3px solid var(--accent);
  background:rgba(96,165,250,.05);
  border-radius:0 12px 12px 0;
  padding:18px 22px;
  margin:0 0 22px;
}
.eyebrow-tribute{
  margin:0 0 8px;
  color:var(--accent);
  letter-spacing:.16em;
}
.welcome-tribute-text{
  margin:0 0 14px;
  color:var(--text);
  max-width:780px;
  line-height:1.55;
}
.welcome-tribute-actions{
  margin:0;
}
.welcome-tribute-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 16px;
  font-size:13px;
  text-decoration:none;
}
.welcome-tribute-link:hover{
  filter:brightness(1.08);
}

.welcome-header h2{
  margin:4px 0 8px;
  font-size:24px;
}
.welcome-intro{
  color:var(--muted);
  max-width:780px;
  margin:0 0 14px;
  line-height:1.55;
}
.welcome-intro-secondary{
  color:var(--muted);
  font-size:13px;
  margin-bottom:22px;
}

/* Short, glanceable bullet intro at the top of the welcome modal.
   The full how-to / "Amit jó tudni" list is collapsed into the
   `details` block below this so a first-time reviewer is not facing
   the whole wall of text. */
.welcome-bullets{
  list-style:none;
  padding:0;
  margin:0 0 18px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.welcome-bullets li{
  position:relative;
  padding:6px 0 6px 22px;
  line-height:1.5;
  color:var(--text);
}
.welcome-bullets li::before{
  content:"";
  position:absolute;
  left:4px;
  top:14px;
  width:8px;
  height:8px;
  border-radius:999px;
  background:linear-gradient(180deg, var(--gold-soft), var(--accent));
}

/* "Részletesebb tudnivalók" expandable details — wraps the 4 steps
   grid and the "Amit jó tudni" list so the welcome modal stays under
   one screen at first paint, and the full how-to is one click away. */
.welcome-details{
  margin:0 0 22px;
  border:1px solid var(--border);
  border-radius:12px;
  background:rgba(212,175,55,.03);
  overflow:hidden;
}
.welcome-details[open]{
  background:rgba(212,175,55,.05);
}
.welcome-details-summary{
  list-style:none;
  cursor:pointer;
  padding:14px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:var(--gold-soft);
  font-family:var(--serif);
  font-size:16px;
  letter-spacing:.02em;
  user-select:none;
}
.welcome-details-summary::-webkit-details-marker{display:none}
.welcome-details-summary::marker{content:""}
.welcome-details-summary:hover{
  background:rgba(212,175,55,.06);
}
.welcome-details-caret{
  font-size:14px;
  opacity:.8;
  transition:.2s ease;
}
.welcome-details[open] .welcome-details-caret{
  transform:rotate(180deg);
}
.welcome-details > .welcome-steps,
.welcome-details > .welcome-good-to-know{
  margin-top:0;
}
.welcome-details > .welcome-steps{
  padding:0 18px 4px;
}
.welcome-details > .welcome-good-to-know{
  margin:0 18px 18px;
}

/* The temple's top-down map, embedded in the welcome guide between
   the project description and the "you are a contributor" call. Lit
   with a gold hairline so it reads as a ceremonial diagram, not a
   stock screenshot. */
.welcome-map{
  margin:0 0 22px;
  padding:14px;
  border:1px solid var(--border);
  border-radius:14px;
  background:linear-gradient(180deg, rgba(212,175,55,.05), rgba(8,8,15,.6));
  box-shadow:inset 0 0 0 1px rgba(212,175,55,.04);
}
.welcome-map img{
  width:100%;
  height:auto;
  display:block;
  border-radius:10px;
  background:#08080f;
}
.welcome-map figcaption{
  margin-top:10px;
  color:var(--muted);
  font-size:12.5px;
  line-height:1.5;
  font-style:italic;
  letter-spacing:.01em;
  text-align:center;
}

/* The "you are a contributor" call-to-action block. The yellow-warm
   tone here is slightly stronger than the intro paragraph so the
   reader's eye lands on this before scrolling into the 4-step
   how-to grid. */
.welcome-mission{
  background:
    linear-gradient(180deg, rgba(212,175,55,.10), rgba(212,175,55,.04));
  border:1px solid var(--border-strong);
  border-radius:14px;
  padding:18px 22px;
  margin:0 0 22px;
}
.welcome-mission h3{
  margin:0 0 10px;
  color:var(--gold-soft);
  font-size:17px;
  font-family:var(--serif);
  font-weight:600;
}
.welcome-mission p{
  color:#d8d2c0;
  line-height:1.6;
  margin:0 0 10px;
}
.welcome-mission p:last-child{margin-bottom:0}
.welcome-mission-call{
  color:var(--gold-soft) !important;
  font-style:italic;
}

.welcome-steps{
  list-style:none;
  counter-reset:welcome-step;
  padding:0;
  margin:0 0 22px;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:16px;
}
.welcome-steps > li{
  counter-increment:welcome-step;
  position:relative;
  background:rgba(8,16,28,.65);
  border:1px solid var(--border);
  border-radius:14px;
  padding:18px 18px 16px 56px;
}
.welcome-steps > li::before{
  content:counter(welcome-step);
  position:absolute;
  top:18px;
  left:16px;
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:linear-gradient(180deg,var(--gold-soft),var(--accent));
  color:#1a1606;
  font-weight:600;
  font-family:var(--serif);
  font-size:14px;
}
.welcome-steps h3{
  margin:0 0 6px;
  font-size:15px;
}
.welcome-steps p{
  margin:0 0 6px;
  color:var(--text);
}
.welcome-why{
  color:var(--muted);
  font-size:13px;
}
.welcome-why b{color:var(--accent)}

.welcome-good-to-know{
  background:rgba(96,165,250,.06);
  border:1px solid rgba(96,165,250,.18);
  border-radius:12px;
  padding:14px 18px;
  margin-bottom:18px;
}
.welcome-good-to-know h3{
  margin:0 0 6px;
  font-size:13px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--accent);
}
.welcome-good-to-know ul{
  margin:0;
  padding:0 0 0 18px;
  color:var(--muted);
}
.welcome-good-to-know li{margin-bottom:4px}
.welcome-good-to-know li b{color:var(--text)}

.welcome-acknowledge{
  padding:12px 22px;
  border-radius:12px;
}

/* The Help (?) button in the topbar — sized to match the other ghost
   buttons but visually slightly muted so it does not compete for
   attention with the primary actions. */
.help-button{
  width:36px;
  height:36px;
  padding:0;
  font-size:16px;
  line-height:1;
  font-weight:700;
  border-radius:999px;
}

/* Keep the welcome guide out of fullscreen mode. */
body.is-fullscreen .welcome-guide{
  display:none !important;
}

/* Fullscreen mode — the review surface fills the whole viewport with NO
   app chrome on top of it. The iframe behaves as if it were opened as a
   standalone HTML page, the only thing layered on top is the floating
   close-X button in the top-right corner that returns to the commenting
   view. By design, comment markers, capture overlays, the empty-state
   message, the topbar, the sidebar, and the canvas-panel header are all
   hidden so the surface looks raw and uninstrumented. */
body.is-fullscreen{
  overflow:hidden;
  background:#000;
}
body.is-fullscreen .shell{
  padding:0;
  /* dvh follows the mobile address-bar collapse; the 100vh line is a
     fallback for older browsers that do not understand dvh yet. */
  min-height:100vh;
  min-height:100dvh;
}
body.is-fullscreen .topbar,
body.is-fullscreen .sidebar,
body.is-fullscreen .panel-header,
body.is-fullscreen .empty-state,
body.is-fullscreen #capture-layer,
body.is-fullscreen #marker-layer{
  display:none !important;
}
body.is-fullscreen .layout{
  display:block;
  margin:0;
}
body.is-fullscreen .canvas-panel{
  border-radius:0;
  border:0;
  box-shadow:none;
  background:#000;
  padding:0;
  height:100vh;
  height:100dvh;
  display:flex;
  flex-direction:column;
}
body.is-fullscreen .surface-wrap{
  flex:1;
  min-height:0;
  border:0;
  border-radius:0;
  background:#000;
  overflow:hidden;
}
body.is-fullscreen .surface{
  display:flex !important;
  padding:0;
  min-height:0;
  height:100%;
  width:100%;
}
/* Override the desktop/mobile size caps so the iframe truly fills the
   viewport. The original sizes (1280x820 / 390x844) are only meaningful
   inside the framed review view, never in fullscreen. */
body.is-fullscreen .stage,
body.is-fullscreen .stage.html-stage.desktop-stage,
body.is-fullscreen .stage.html-stage.mobile-stage{
  width:100%;
  height:100%;
  max-width:none;
  display:block;
}
body.is-fullscreen .surface iframe,
body.is-fullscreen .surface img{
  border-radius:0;
  width:100%;
  height:100%;
}

/* The exit-fullscreen button is the ONLY thing layered on top of the raw
   surface in fullscreen mode. Designed as a small round X so it reads
   as "close" instantly without taking visual real estate. */
.fullscreen-exit-button{
  display:none;
  position:fixed;
  top:14px;
  right:14px;
  z-index:1000;
  width:44px;
  height:44px;
  padding:0;
  font-size:24px;
  line-height:1;
  border-radius:999px;
  border:1px solid var(--border-strong);
  background:rgba(8,8,15,.78);
  color:var(--gold-soft);
  cursor:pointer;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:0 8px 20px rgba(0,0,0,.5);
}
body.is-fullscreen .fullscreen-exit-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.fullscreen-exit-button:hover,
.fullscreen-exit-button:focus-visible{
  background:rgba(212,175,55,.18);
  border-color:var(--accent);
  color:var(--gold-soft);
  outline:none;
}

/* When fullscreen is on, hint the toggle button visually too. */
.ghost-button.is-active{
  border-color:var(--accent);
  color:var(--accent);
}

.surface-wrap{
  position:relative;
  min-height:540px;
  border:1px solid var(--border);
  border-radius:14px;
  background:#08080f;
  overflow:auto;
  box-shadow:inset 0 0 0 1px rgba(212,175,55,.04);
}

.surface{
  position:relative;
  display:none;
  width:100%;
  min-height:540px;
  align-items:flex-start;
  justify-content:flex-start;
  padding:18px;
}

.surface.ready{display:flex}
.stage{
  position:relative;
  display:inline-block;
  line-height:0;
  max-width:100%;
}

.surface img,
.surface iframe{
  display:block;
  border-radius:14px;
  user-select:none;
}

.stage.html-stage.desktop-stage{
  width:1280px;
  height:820px;
  max-width:none;
}

.stage.html-stage.mobile-stage{
  width:390px;
  height:844px;
  max-width:none;
}

.stage.image-stage{
  max-width:100%;
}

.surface iframe{
  width:100%;
  height:100%;
  border:0;
  background:#08101c;
}

.surface img{
  max-width:min(100%,1100px);
  max-height:none;
}

#review-image,
#review-frame{
  display:none;
}

#review-image.visible,
#review-frame.visible{
  display:block;
}

#capture-layer,
#marker-layer{
  position:absolute;
  inset:0;
}

#capture-layer{
  z-index:2;
  cursor:crosshair;
  background:transparent;
}

#capture-layer.interact-mode{
  pointer-events:none;
  cursor:default;
}

#capture-layer.comment-mode{
  pointer-events:auto;
}

#marker-layer{
  z-index:3;
  pointer-events:none;
}

.marker{
  position:absolute;
  width:26px;
  height:26px;
  border:1.5px solid #1a1606;
  border-radius:999px;
  transform:translate(-50%,-50%);
  background:var(--accent);
  color:#1a1606;
  font-weight:700;
  font-family:var(--serif);
  font-size:13px;
  box-shadow:
    0 0 0 1.5px rgba(232,198,106,.55),
    0 10px 20px rgba(212,175,55,.35);
  pointer-events:auto;
  z-index:4;
  transition:.15s;
}
.marker:hover{
  background:var(--gold-soft);
  box-shadow:
    0 0 0 2px rgba(232,198,106,.75),
    0 14px 28px rgba(212,175,55,.45);
}

.marker.pending{
  background:#fde68a;
  border-color:var(--accent);
  box-shadow:
    0 0 0 2px rgba(212,175,55,.6),
    0 10px 20px rgba(212,175,55,.4);
  animation:marker-pulse 1.6s ease-in-out infinite;
}
@keyframes marker-pulse{
  0%,100%{box-shadow:0 0 0 2px rgba(212,175,55,.6),0 10px 20px rgba(212,175,55,.4)}
  50%   {box-shadow:0 0 0 6px rgba(212,175,55,.15),0 10px 20px rgba(212,175,55,.4)}
}

.empty-state{
  display:grid;
  place-items:center;
  min-height:540px;
  text-align:center;
  padding:24px;
}

.sidebar{
  display:grid;
  gap:18px;
}

.card{padding:18px}
.muted{color:var(--muted)}

.field{
  display:grid;
  gap:8px;
  margin-top:14px;
}

.field input,.field textarea{
  width:100%;
  border:1px solid var(--border);
  border-radius:10px;
  padding:11px 12px;
  background:rgba(8,8,15,.65);
  color:var(--text);
  font-family:var(--sans);
  transition:.15s ease;
}
.field input:focus,.field textarea:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(212,175,55,.18);
}
.field textarea{
  min-height:90px;
  resize:vertical;
  line-height:1.5;
}

/* Breathing room between the comment textarea and the Post Comment
   button so the action does not feel glued to the bottom of the box. */
#comment-submit{
  margin-top:14px;
}

/* Megosztott-megjegyzés transzparencia: közvetlenül a komment-input
   alatt szól, hogy bárki látni fogja, amit ír. Bizalmi UX-pillanat,
   nem szabad csak az intro guide-ba dugni. */
.comment-privacy-note{
  margin:12px 0 0;
  padding:8px 12px;
  font-size:12px;
  line-height:1.4;
  color:var(--muted);
  background:rgba(212,175,55,.04);
  border:1px dashed var(--border);
  border-radius:8px;
}

/* Comment type dropdown — sits inside the create form between the
   nickname and the comment textarea. Keep it visually close to the
   form inputs so it does not feel like a separate metadata pane. */
.comment-type-select{
  width:100%;
  border:1px solid var(--border);
  border-radius:10px;
  padding:11px 12px;
  background:rgba(8,8,15,.65);
  color:var(--text);
  font-family:var(--sans);
  appearance:none;
  -webkit-appearance:none;
  background-image:linear-gradient(45deg, transparent 50%, var(--gold-soft) 50%),
                   linear-gradient(135deg, var(--gold-soft) 50%, transparent 50%);
  background-position:calc(100% - 18px) 18px, calc(100% - 13px) 18px;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  cursor:pointer;
  transition:.15s ease;
}
.comment-type-select:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(212,175,55,.18);
}
.comment-type-select option{
  background:#08080f;
  color:var(--text);
}

/* Status filter row — small chips above the comment list, picks
   which workflow stage to show. Layout flex-wraps on mobile so all
   six chips never push the comment list off-screen. */
.comment-status-filter{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:14px 0 4px;
}
.status-chip{
  border:1px solid var(--border);
  border-radius:999px;
  padding:6px 12px;
  background:rgba(212,175,55,.03);
  color:var(--muted);
  font-family:var(--sans);
  font-size:11.5px;
  letter-spacing:.04em;
  cursor:pointer;
  transition:.15s ease;
}
.status-chip:hover{
  color:var(--gold-soft);
  border-color:var(--border-strong);
}
.status-chip.active{
  background:rgba(212,175,55,.18);
  border-color:var(--accent);
  color:var(--gold-soft);
}

/* Status + type badges on the comment cards. Each status carries its
   own semantic color (amber for open, blue for seen, violet for in
   progress, green for fixed, gold-fill for accepted). Type badges
   stay muted so they read as metadata, not workflow signal. */
.comment-badges{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:8px;
}
.comment-badge{
  display:inline-flex;
  align-items:center;
  font-size:10.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:3px 9px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.02);
  color:var(--muted);
  font-family:var(--sans);
  font-weight:600;
}
.type-badge{
  color:var(--muted);
  background:rgba(255,255,255,.04);
}
.status-badge.status-nyitott{
  border-color:rgba(251,191,36,.55);
  color:#fbbf24;
  background:rgba(251,191,36,.08);
}
.status-badge.status-megnezve{
  border-color:rgba(96,165,250,.55);
  color:#93c5fd;
  background:rgba(96,165,250,.08);
}
.status-badge.status-javitas_alatt{
  border-color:rgba(167,139,250,.55);
  color:#c4b5fd;
  background:rgba(167,139,250,.08);
}
.status-badge.status-javitva{
  border-color:rgba(34,197,94,.55);
  color:#86efac;
  background:rgba(34,197,94,.08);
}
.status-badge.status-elfogadva{
  border-color:var(--accent);
  color:#1a1606;
  background:linear-gradient(180deg, var(--gold-soft), var(--accent));
}

/* Left-edge accent on the card itself echoes the status color so a
   scrolling reviewer can spot the workflow phase without reading
   each badge. */
.comment-item.status-nyitott       { box-shadow:inset 3px 0 0 0 rgba(251,191,36,.55); }
.comment-item.status-megnezve      { box-shadow:inset 3px 0 0 0 rgba(96,165,250,.55); }
.comment-item.status-javitas_alatt { box-shadow:inset 3px 0 0 0 rgba(167,139,250,.55); }
.comment-item.status-javitva       { box-shadow:inset 3px 0 0 0 rgba(34,197,94,.55); }
.comment-item.status-elfogadva     { box-shadow:inset 3px 0 0 0 var(--accent); }

/* Admin-only status-change select on each comment card. */
.comment-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  margin-top:10px;
}
.comment-focus-button{
  margin-top:0 !important;
}
.comment-status-select{
  border:1px solid var(--border);
  border-radius:8px;
  padding:7px 10px;
  background:rgba(8,8,15,.65);
  color:var(--gold-soft);
  font-family:var(--sans);
  font-size:12px;
  cursor:pointer;
  min-height:36px;
}
.comment-status-select:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(212,175,55,.15);
}
.comment-status-select option{
  background:#08080f;
  color:var(--text);
}

.comment-list{
  display:grid;
  gap:10px;
  max-height:540px;
  overflow:auto;
  margin-top:14px;
}

.comment-item{
  position:relative;
  border:1px solid var(--border);
  border-radius:12px;
  padding:13px 14px;
  background:linear-gradient(180deg, rgba(212,175,55,.04), rgba(8,8,15,.5));
  transition:.15s ease;
}
.comment-item:hover{
  border-color:var(--border-strong);
}

.comment-item.is-dimmed{
  opacity:.45;
}

.comment-meta{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
  margin-bottom:6px;
  color:var(--muted);
  font-size:11.5px;
  letter-spacing:.02em;
}
.comment-meta strong{
  color:var(--gold-soft);
  font-family:var(--serif);
  font-weight:600;
  font-size:14px;
  letter-spacing:.02em;
}

.comment-context{
  margin-bottom:6px;
  color:var(--gold-soft);
  font-size:11.5px;
  letter-spacing:.04em;
  font-style:italic;
}

.comment-preview{
  width:140px;
  height:100px;
  object-fit:cover;
  border:1px solid var(--border);
  border-radius:8px;
  display:block;
}

.comment-item button{
  margin-top:10px;
  background:none;
  border:1px solid var(--border);
  border-radius:8px;
  padding:7px 12px;
  color:var(--gold-soft);
  font-family:var(--sans);
  font-size:12px;
  transition:.15s;
  min-height:36px;
}
.comment-item button:hover{
  border-color:var(--accent);
  background:rgba(212,175,55,.08);
}

.comment-preview-button{
  margin-top:10px;
  margin-bottom:4px;
  padding:0;
  border:none;
  background:none;
  display:inline-block;
  position:relative;
  line-height:0;
  min-height:0;
}

.comment-preview-button:hover .comment-preview{
  border-color:var(--accent);
}

.snapshot-marker{
  position:absolute;
  width:22px;
  height:22px;
  transform:translate(-50%,-50%);
  border-radius:999px;
  background:var(--accent);
  border:3px solid var(--gold-soft);
  box-shadow:0 0 0 4px rgba(212,175,55,.22);
  pointer-events:none;
}

.snapshot-marker::before,
.snapshot-marker::after{
  content:"";
  position:absolute;
  background:var(--gold-soft);
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}

.snapshot-marker::before{
  width:30px;
  height:2px;
}

.snapshot-marker::after{
  width:2px;
  height:30px;
}

.snapshot-marker.is-thumbnail{
  width:16px;
  height:16px;
  border-width:2px;
}

.snapshot-marker.is-thumbnail::before{
  width:18px;
}

.snapshot-marker.is-thumbnail::after{
  height:18px;
}

.lightbox{
  position:fixed;
  inset:0;
  z-index:60;
  display:grid;
  place-items:center;
}

.lightbox[hidden]{
  display:none;
}

.lightbox-backdrop{
  position:absolute;
  inset:0;
  border:none;
  background:rgba(5,5,10,.88);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}

.lightbox-panel{
  position:relative;
  z-index:1;
  width:min(96vw,1320px);
  max-height:94vh;
  padding:18px;
  border:1px solid var(--border-strong);
  border-radius:16px;
  background:rgba(11,12,22,.98);
  box-shadow:0 24px 80px rgba(0,0,0,.6);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.lightbox-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(260px,360px);
  gap:18px;
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
}
.lightbox-info{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:8px 4px 4px;
  min-width:0;
}
.lightbox-badges{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:6px;
}
.lightbox-author{
  margin:0;
  font-family:var(--serif);
  font-size:20px;
  color:var(--gold-soft);
  letter-spacing:.02em;
}
.lightbox-time{
  margin:0;
  font-size:12px;
  color:var(--muted);
  letter-spacing:.04em;
}
.lightbox-context{
  margin:0;
  font-size:12px;
  color:var(--gold-soft);
  font-style:italic;
}
.lightbox-body{
  margin:8px 0 0;
  line-height:1.55;
  color:var(--text);
  white-space:pre-wrap;
  word-break:break-word;
}
.lightbox-focus{
  margin-top:auto;
  align-self:flex-start;
  padding:10px 16px;
  font-size:13px;
}

@media (max-width:720px){
  .lightbox-panel{
    width:100vw;
    height:100vh;
    max-height:100vh;
    border-radius:0;
    padding:14px;
  }
  .lightbox-layout{
    grid-template-columns:1fr;
    gap:12px;
  }
  .lightbox-info{
    padding:0;
  }
  .lightbox-focus{
    width:100%;
    align-self:stretch;
  }
}

.lightbox-close{
  position:absolute;
  top:10px;
  right:10px;
  z-index:2;
  width:40px;
  height:40px;
  padding:0;
  font-size:24px;
  line-height:1;
  border:1px solid var(--border-strong);
  border-radius:999px;
  background:rgba(8,8,15,.78);
  color:var(--gold-soft);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.lightbox-close:hover,
.lightbox-close:focus-visible{
  background:rgba(212,175,55,.18);
  border-color:var(--accent);
  outline:none;
}

.lightbox-caption{
  margin-bottom:12px;
  color:var(--muted);
}

.lightbox-stage{
  position:relative;
  display:inline-block;
  max-width:100%;
  line-height:0;
}

#lightbox-image{
  display:block;
  max-width:100%;
  max-height:calc(94vh - 110px);
  border-radius:12px;
  border:1px solid var(--border);
}

@media (max-width:980px){
  .layout{grid-template-columns:1fr}
  .topbar{flex-direction:column}
}