@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Playfair Display';
  src: url('fonts/PlayfairDisplay-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Pacifico';
  src: url('fonts/Pacifico-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Alegreya';
  src: url('fonts/Alegreya-VariableFont_wght.ttf') format('truetype');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Jacques Francois Shadow';
  src: url('fonts/JacquesFrancoisShadow-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Kumar One';
  src: url('fonts/KumarOne-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Oldenburg';
  src: url('fonts/Oldenburg-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Special Elite';
  src: url('fonts/SpecialElite-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Tektur';
  src: url('fonts/Tektur-VariableFont_wdth,wght.ttf') format('truetype');
  font-weight: 400 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Wellfleet';
  src: url('fonts/Wellfleet-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
}

#bg-video,
#bg-fallback {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
}

#bg-video {
  object-fit: cover;
  pointer-events: none;
}

#bg-video::-webkit-media-controls,
#bg-video::-webkit-media-controls-enclosure {
  display: none !important;
}

#bg-fallback {
  background: #00b300;
}

/* Position/size are set via JS as left/top/width/height (top-left anchor,
   so the corner-resize handle has a fixed corner to grow/shrink from).
   No snap-to-center here — free dragging only, per CLAUDE.md (that
   behavior is text-block-only). */
.qr-wrapper {
  position: fixed;
  /* Above the editor panel (z-index 999) — otherwise a QR image dragged
     into the panel's screen region (or sitting there by default, like
     QR2's bottom-right spot) would end up underneath it, unreachable for
     further dragging/resizing while the editor is open. Also above the
     text blocks (1001) — QR codes are a smaller, fiddlier target to grab,
     so they win if a QR ends up dragged on top of a text block. */
  z-index: 1002;
}

.qr-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
  padding: 8px;
  box-sizing: border-box;
  -webkit-user-drag: none;
  user-select: none;
}

body.editor-open .qr-image {
  cursor: move;
}

.qr-resize-handle {
  display: none;
  position: absolute;
  right: -8px;
  bottom: -8px;
  width: 16px;
  height: 16px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  cursor: nwse-resize;
}

body.editor-open .qr-resize-handle {
  display: block;
}

/* The wrapper is what gets positioned/dragged (left/top set via JS,
   representing the wrapper's CENTER point, hence the translate anchor).
   The contenteditable box inside stays plain flow so dragging never
   interferes with text editing/selection.
   `width: max-content` matters here: a `position: fixed` box with only
   `left` set (no `right`) and the default `width: auto` gets its
   shrink-to-fit width constrained to "available space from left to the
   viewport's right edge" per the CSS spec — so dragging it rightward
   would otherwise squeeze it into a narrower and narrower column the
   further right it goes. `max-content` sizes it to its content's actual
   preferred width instead, independent of where `left` lands. */
.menu-text-wrapper {
  position: fixed;
  width: max-content;
  transform: translate(-50%, -50%);
  /* Same reasoning as .qr-wrapper above — stay reachable even if dragged
     under the editor panel's screen region. */
  z-index: 1001;
}

.menu-text {
  min-width: 200px;
  min-height: 1.5em;
  max-width: 80vw;
  padding: 16px 24px;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: var(--primary-size, 24px);
  text-align: center;
  outline: none;
  cursor: text;
  paint-order: stroke fill;
}

/* A separate, non-editable button (not a descendant's concern for
   normalizeLines()) so grabbing it never touches text content. Only
   shown while the editor panel is open — dragging is a layout-editing
   action, same gating as the other editor controls. */
.drag-handle {
  display: none;
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 20px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.5);
  cursor: grab;
}

.drag-handle::before {
  content: '\22EF\22EF';
  color: #fff;
  font-size: 14px;
  letter-spacing: 1px;
}

body.editor-open .drag-handle {
  display: block;
}

.drag-handle:active {
  cursor: grabbing;
}

/* Alternation by position SINCE THE LAST BLANK LINE (classes computed in
   normalizeLines() in app.js, since "reset on blank" isn't expressible
   with pure structural CSS selectors). Stacked lines with no gap strictly
   alternate; a blank line resets the count for whatever follows. */
.menu-line--primary {
  font-size: var(--primary-size, 24px);
}

.menu-line--secondary {
  font-size: var(--secondary-size, var(--primary-size, 24px));
}

.menu-strike {
  text-decoration-line: line-through;
  text-decoration-color: var(--strike-color, red);
}

#editor-toggle {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 1000;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  opacity: 0.35;
  transition: opacity 0.15s ease;
}

#editor-toggle:hover,
#editor-toggle:focus {
  opacity: 1;
}

#editor-panel {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 999;
  width: 280px;
  height: 100%;
  box-sizing: border-box;
  padding: 60px 16px 16px;
  background: rgba(20, 20, 20, 0.92);
  color: #fff;
  font-family: sans-serif;
  font-size: 14px;
  overflow-y: auto;
}

.editor-field {
  display: block;
  margin-bottom: 20px;
}

.editor-field > select,
.editor-field > input {
  display: block;
  width: 100%;
  margin-top: 6px;
}

.editor-field > input[type="color"] {
  width: 100%;
  height: 32px;
  padding: 0;
  border: none;
  background: none;
}

.editor-field > input[type="checkbox"] {
  display: inline;
  width: auto;
  margin-top: 0;
  margin-right: 6px;
}

#editor-panel hr {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  margin: 20px 0;
}

#strike-toggle-btn {
  display: block;
  width: 100%;
  padding: 8px;
  font-size: 14px;
  cursor: pointer;
}

#reset-all-btn {
  display: block;
  width: 100%;
  padding: 8px;
  font-size: 14px;
  cursor: pointer;
  background: #a33;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px;
}