/* ========================================
   Custom Fonts
   ======================================== */
@font-face {
  font-family: 'CHRICI';
  src: url('assets/fonts/CHRICI__.TTF') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'TypewriterRustic';
  src: url('assets/fonts/TypewriterRusticRNH-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

/* ========================================
   CSS Variables
   ======================================== */
:root {
  --bg: #f6f8fa;
  --card: #fff;
  --accent: #b11226;
  --accent2: #1f5a6b;
  --paper: #fbf7ee;

  /* ============================================
     STAMP SIZE CONTROL
     ============================================
     Change this single value to resize ALL stamps (0-4) at once

     How it works:
     - This variable controls both width and height of stamps
     - All stamps use: width: var(--stamp-size); height: var(--stamp-size);
     - Smaller values make stamps smaller, larger values make them bigger

     Examples:
     - --stamp-size: 80px;   -> Small stamps
     - --stamp-size: 100px;  -> Medium stamps (current default)
     - --stamp-size: 120px;  -> Large stamps
     - --stamp-size: 150px;  -> Extra large stamps

     Note: This affects desktop view. Mobile sizes adjust automatically
     via media queries below (see @media sections)
  */
  --stamp-size: 120px;

  /* ============================================
     WAX SEAL SIZE CONTROL
     ============================================
     Change this single value to resize the wax seal

     How it works:
     - This variable controls both width and height of the wax seal
     - The wax seal uses: width: var(--seal-size); height: var(--seal-size);
     - Smaller values make seal smaller, larger values make it bigger

     Examples:
     - --seal-size: 60px;   -> Small seal
     - --seal-size: 80px;   -> Medium seal (current default)
     - --seal-size: 100px;  -> Large seal
     - --seal-size: 120px;  -> Extra large seal

     Note: The seal stays fixed on screen and doesn't scroll with page
  */
  --seal-size: 475px;
}

/* ========================================
   Base Styles
   ======================================== */
* {
  box-sizing: border-box;
}

html {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior-y: none; /* Prevent white space on overscroll */
}

body {
  font-family: 'TypewriterRustic', 'Roboto Slab', Georgia, serif;
  background: url('assets/images/santa.jpg') center center / cover no-repeat fixed;
  background-color: #b11226; /* Fallback color matching theme - prevents white showing */
  margin: 0;
  padding: 36px;
  min-height: 100vh; /* Changed from 100% to 100vh for better coverage */
  display: flex;
  justify-content: center;
  position: relative;
  overscroll-behavior-y: none; /* Prevent white space on overscroll */
}

/* Mobile-specific: lock background and prevent scrolling issues */
@media (max-width: 600px) {
  html {
    overflow: hidden;
    height: 100vh;
    height: 100dvh;
  }

  body {
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    background: none; /* Remove background from body on mobile */
    padding: 0;
  }

  /* Fixed background layer - stays in place while content scrolls */
  body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    background: url('assets/images/santa.jpg') center center / cover no-repeat;
    background-color: #b11226;
    background-attachment: fixed; /* Ensure background stays fixed */
    z-index: -1;
    pointer-events: none;
  }
}

/* ========================================
   Layout
   ======================================== */
/* ============================================
   TO MOVE ENTIRE PANEL DOWN FROM TOP:
   - Add/increase margin-top below (e.g., 40px, 60px, 80px, 100px)
   - This creates space between viewport top and the white panel
   - Larger number = panel sits lower on page
   ============================================ */
.wrap {
  width: 980px;
  max-width: 94%;
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 22px;
  align-items: start;
  margin-top: 40px;  /* Reduced from 80px - centers panel better with wax seal visible */
}

.panel {
  background: var(--card);
  background-image: url('assets/images/paper-overlay.jpg');
  background-size: cover;
  background-position: center;
  background-blend-mode: multiply;
  border-radius: 14px;
  padding: 16px;  /* Reduced from 22px - makes panel more compact */
  box-shadow: 0 14px 40px rgba(16, 22, 28, 0.08);
  position: relative;
}

/* ========================================
   Header
   ======================================== */
header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-left: 140px;
}

.logo {
  width: 72px;
  height: 72px;
  display: none;
  align-items: center;
  justify-content: center;
}

.logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ========================================
   Decorative Stamps
   ======================================== */

/* ============================================
   STAMP 0 - Top left corner of puzzle area
   ============================================
   This stamp is DRAGGABLE - users can click and drag to reposition

   Position Controls:
   - top: Distance from top of viewport (in pixels or %)
   - left: Distance from left of viewport (in pixels or %)

   Size Controls:
   - width/height: Uses --stamp-size variable (change at top of file)

   Visual Controls:
   - transform: rotate(-15deg) -> Makes stamp tilted (change degree to adjust angle)
   - opacity: 0.85 -> Makes stamp slightly transparent (0.0 = invisible, 1.0 = solid)

   Examples:
   - Rotate more: transform: rotate(-30deg);
   - No rotation: transform: rotate(0deg);
   - More transparent: opacity: 0.6;
   - Fully opaque: opacity: 1.0;
*/
.stamp_0 {
  position: absolute;
  top: 200px;      /* Distance from top - adjust to move up/down */
  left: 3%;        /* Distance from left - adjust to move left/right */
  width: var(--stamp-size);   /* Controlled by --stamp-size variable above */
  height: var(--stamp-size);  /* Controlled by --stamp-size variable above */
  z-index: 15;     /* Higher than seal (10) - stamps always on top */
  transform: rotate(-15deg);  /* Tilt angle - change number to rotate more/less */
  opacity: 0.85;              /* Transparency - 0.0 to 1.0 */
  cursor: move;
  user-select: none;
  touch-action: none; /* Prevent zoom and scroll when dragging on mobile */
}

.stamp_0 img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.2));
  pointer-events: none;
}

/* Stamp 1 - Adjust X and Y position here - DRAGGABLE */
.stamp_1 {
  position: absolute;
  top: 18%;        /* Adjust Y position here */
  right: 8%;       /* Adjust X position here */
  width: var(--stamp-size);
  height: var(--stamp-size);
  z-index: 15;     /* Higher than seal (10) - stamps always on top */
  transform: rotate(22deg);
  opacity: 0.85;
  cursor: move;
  user-select: none;
  touch-action: none; /* Prevent zoom and scroll when dragging on mobile */
}

.stamp_1 img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.2));
  pointer-events: none;
}

/* Stamp 2 - Adjust X and Y position here - DRAGGABLE */
.stamp_2 {
  position: absolute;
  bottom: 12%;     /* Adjust Y position here */
  left: 15%;       /* Adjust X position here */
  width: var(--stamp-size);
  height: var(--stamp-size);
  z-index: 15;     /* Higher than seal (10) - stamps always on top */
  transform: rotate(-8deg);
  opacity: 0.85;
  cursor: move;
  user-select: none;
  touch-action: none; /* Prevent zoom and scroll when dragging on mobile */
}

.stamp_2 img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.2));
  pointer-events: none;
}

/* Stamp 3 - Adjust X and Y position here - DRAGGABLE */
.stamp_3 {
  position: absolute;
  bottom: 8%;      /* Adjust Y position here */
  right: 34%;      /* Adjust X position here */
  width: var(--stamp-size);
  height: var(--stamp-size);
  z-index: 15;     /* Higher than seal (10) - stamps always on top */
  transform: rotate(18deg);
  opacity: 0.85;
  cursor: move;
  user-select: none;
  touch-action: none; /* Prevent zoom and scroll when dragging on mobile */
}

.stamp_3 img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.2));
  pointer-events: none;
}

/* Stamp 4 - Adjust X and Y position here - DRAGGABLE */
.stamp_4 {
  position: absolute;
  top: 45%;        /* Adjust Y position here */
  left: 5%;        /* Adjust X position here */
  width: var(--stamp-size);
  height: var(--stamp-size);
  z-index: 15;     /* Higher than seal (10) - stamps always on top */
  transform: rotate(-25deg);
  opacity: 0.85;
  cursor: move;
  user-select: none;
  touch-action: none; /* Prevent zoom and scroll when dragging on mobile */
}

.stamp_4 img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.2));
  pointer-events: none;
}

h1 {
  font-family: 'CHRICI', 'Roboto Slab', Georgia, serif;
  font-size: 45px;
  margin: 0;
  color: #24323a;
}

h3 {
  font-family: 'CHRICI', 'Roboto Slab', Georgia, serif;
  font-size: 30px;
  margin: 0;
  color: #24323a;
}

p, p.lead {
  font-family: 'TypewriterRustic', 'Roboto Slab', Georgia, serif;
  margin: 6px 0 16px;
  color: #42585f;
}

/* ========================================
   Puzzle Area
   ======================================== */
/* ============================================
   TO MOVE PUZZLE DOWN (give stamp_0 more space):
   - Increase margin-top below (e.g., 40px, 60px, 80px, 100px)
   - Larger number = more space above puzzle = stamp more visible
   ============================================ */
.puzzle-area {
  background: linear-gradient(180deg, #fffef8, #fbf7ee);
  border-radius: 10px;
  padding: 18px;
  border: 1px solid rgba(0, 0, 0, 0.04);
  margin-top: 20px;  /* Reduced from 60px - brings puzzle area up closer to header */
}

.lines {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  padding: 12px;
}

.line {
  display: flex;
  gap: 8px;
}

/* ========================================
   Token Tiles
   ======================================== */
.token {
  min-width: 48px;
  height: 48px;
  background: transparent;
  border-radius: 8px;
  border: 2px solid rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Roboto Slab', Georgia, serif;  /* Keep original font for tiles */
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  transition: transform .18s ease, box-shadow .18s;
  -webkit-tap-highlight-color: rgba(177, 18, 38, 0.1);
  touch-action: manipulation;
}

.token:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

.token:active {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.token.revealed {
  background: #fff;
  border: 0;
  color: #628259;
  box-shadow: 0 6px 18px rgba(31, 90, 107, 0.06);
  font-size: 18px;
}

/* ========================================
   Controls
   ======================================== */
.controls {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

button {
  padding: 10px 14px;
  border-radius: 10px;
  border: 0;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
  touch-action: manipulation;
}

button:hover {
  background: #9a0f1f;
}

button:active {
  transform: scale(0.98);
}

button.secondary {
  background: #fff;
  color: #333;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

button.secondary:hover {
  background: #f5f5f5;
}

/* ========================================
   Sidebar
   ======================================== */
.side {
  padding: 18px;
}

.decoder-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 8px;
}

.decoder-card {
  background: var(--paper);
  border-radius: 8px;
  padding: 10px;
  border: 1px solid rgba(0, 0, 0, 0.03);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Roboto Slab', Georgia, serif;  /* Keep original font for decoder */
}

.decoder-card small {
  color: #37474f;
}

/* ========================================
   Modal
   ======================================== */
.modal {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 12, 14, 0.28);
  backdrop-filter: blur(2px);
}

.modal-card {
  background: linear-gradient(180deg, #fff 0, #fffefc 100%);
  padding: 28px;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(8, 10, 12, 0.25);
  text-align: center;
  width: 92%;
  max-width: 760px;
}

.modal-card h2 {
  font-family: 'Marck Script', cursive;
  font-size: 48px;
  margin: 6px 0;
  color: var(--accent);
}

.modal-card p {
  color: #16353a;
  font-weight: 600;
}

.close-btn {
  margin-top: 18px;
  padding: 10px 16px;
  border-radius: 10px;
  border: 0;
  background: var(--accent2);
  color: #fff;
}

.close-btn:hover {
  background: #17495a;
}

/* ========================================
   Snow Effect
   ======================================== */
.snow {
  pointer-events: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 8;
}

/* ========================================
   Volume Overlay
   ======================================== */
.volume-overlay {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(177, 18, 38, 0.95);
  backdrop-filter: blur(8px);
  z-index: 10000;
  animation: fadeIn 0.5s ease;
  cursor: pointer;
}

.enter-button-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: scaleIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.volume-card {
  background: linear-gradient(135deg, #fff 0%, #fffef8 100%);
  padding: 48px 64px;
  border-radius: 20px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.4);
  text-align: center;
  position: relative;
  border: 4px solid #b11226;
  animation: scaleIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.volume-card h2 {
  font-family: 'Marck Script', cursive;
  font-size: 56px;
  margin: 16px 0;
  color: #b11226;
  text-shadow: 2px 2px 4px rgba(177, 18, 38, 0.1);
}

.volume-card p {
  font-size: 24px;
  color: #1f5a6b;
  font-weight: 600;
  margin: 0;
}

.volume-card .click-to-open {
  font-family: 'TypewriterRustic', 'Roboto Slab', Georgia, serif;
  font-size: 28px;
  color: #b11226;
  font-weight: 700;
  margin: 12px 0;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.volume-card .snowflake {
  font-size: 48px;
  animation: sparkle 1.5s ease-in-out infinite;
}

.volume-card .snowflake:first-child {
  position: absolute;
  top: -24px;
  left: -24px;
}

.volume-card .snowflake:last-child {
  position: absolute;
  bottom: -24px;
  right: -24px;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes scaleIn {
  from {
    transform: scale(0.5);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes sparkle {
  0%, 100% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1.2);
  }
}

/* ========================================
   Misc
   ======================================== */
.hint {
  font-family: 'TypewriterRustic', 'Roboto Slab', Georgia, serif;
  margin-top: 10px;
  color: #556b6f;
}

/* ============================================
   WAX SEAL - Anchored/Glued to panel corner
   ============================================
   This seal OVERLAPS the top-left corner of the panel - like a wax seal on an envelope

   Position Controls:
   - Positioned so center of seal aligns with panel corner
   - Part of seal is outside panel, part overlaps onto it
   - top: Negative value = half of seal size (centers seal on corner vertically)
   - left: Negative value = half of seal size (centers seal on corner horizontally)

   Current seal size: 500px
   - top: -250px (500px ÷ 2 = 250px) centers seal vertically on corner
   - left: -250px (500px ÷ 2 = 250px) centers seal horizontally on corner

   Size Controls:
   - width/height: Uses --seal-size variable (change at top of file)
   - When changing seal size, adjust top/left to half the new size

   Visual Controls:
   - z-index: 10 -> Appears above background, below stamps
   - pointer-events: none -> Clicks pass through to content below

   Examples to adjust overlap:
   - More inside panel: Increase top/left (e.g., top: -200px; left: -200px;)
   - More outside panel: Decrease top/left (e.g., top: -300px; left: -300px;)
   - Perfect corner overlap: top/left = -(seal-size ÷ 2)
*/
.wax-seal {
  position: absolute;           /* Anchored to panel - scrolls with content */
  top: -190px;                  /* CHANGE THIS to move seal UP/DOWN: increase = down, decrease = up */
  left: -190px;                 /* CHANGE THIS to move seal LEFT/RIGHT: increase = right, decrease = left */
  width: var(--seal-size);      /* Controlled by --seal-size variable above */
  height: var(--seal-size);     /* Controlled by --seal-size variable above */
  z-index: 10;                  /* Layer order - higher appears on top */
  pointer-events: none;         /* Can't be clicked - clicks pass through */
}

.wax-seal img {
  width: 100%;
  height: 100%;
  object-fit: contain;          /* Keeps image proportions */
}

footer {
  margin-top: 12px;
  color: #6b7d7f;
  font-size: 13px;
}

/* ========================================
   Responsive Design
   ======================================== */
@media (max-width: 860px) {
  :root {
    --stamp-size: 80px;  /* Shrink stamps for medium screens */
    --seal-size: 350px;  /* Shrink seal proportionally */
  }

  .wrap {
    grid-template-columns: 1fr;
  }

  .side {
    order: -1;
  }

  /* ============================================
     RESPONSIVE: Medium Screens (tablets, half-width windows)
     These adjustments apply when screen width ≤ 860px
     ============================================ */

  /* Stamp 0 - Reposition for medium screens to avoid puzzle overlap */
  .stamp_0 {
    top: 150px;      /* Move stamp down slightly */
    left: 2%;        /* Move stamp closer to left edge */
  }

  /* Wax Seal - Keep overlapping corner on medium screens (seal size: 350px) */
  .wax-seal {
    top: -115px;     /* Moved down 30px more */
    left: -115px;    /* Moved right 30px more */
  }

  .stamp_1 {
    top: 10%;        /* Adjust Y position here */
    right: 5%;       /* Adjust X position here */
  }

  .stamp_2 {
    bottom: 5%;      /* Adjust Y position here */
    left: 10%;       /* Adjust X position here */
  }

  .stamp_3 {
    bottom: 5%;      /* Adjust Y position here */
    right: 8%;       /* Adjust X position here */
  }

  .stamp_4 {
    top: 40%;        /* Adjust Y position here */
    left: 2%;        /* Adjust X position here */
  }
}

@media (max-width: 600px) {
  :root {
    --stamp-size: 60px;  /* Shrink stamps for small screens */
    --seal-size: 250px;  /* Shrink seal proportionally */
  }

  body {
    padding: 0;
  }

  .wrap {
    max-width: 100%;
    width: 100%;
    gap: 12px;
    margin: 0;
    padding: 12px;
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    align-content: start;
  }

  .panel {
    padding: 16px;
    border-radius: 12px;
  }

  header {
    gap: 12px;
    padding-left: 0; /* Remove left padding on mobile */
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  .logo {
    width: 56px;
    height: 56px;
  }

  h1 {
    font-size: 18px;
  }

  p.lead {
    font-size: 14px;
    margin: 4px 0 12px;
  }

  .puzzle-area {
    padding: 14px;
  }

  .lines {
    gap: 8px;
    padding: 8px;
  }

  .line {
    gap: 6px;
  }

  .token {
    min-width: 40px;
    height: 40px;
    font-size: 15px;
  }

  .token.revealed {
    font-size: 16px;
  }

  .controls {
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
  }

  button {
    padding: 9px 12px;
    font-size: 14px;
    flex: 1;
    min-width: 100px;
  }

  .hint {
    font-size: 13px;
    margin-top: 8px;
  }

  .side {
    padding: 16px;
  }

  .side h3 {
    font-size: 16px;
  }

  .side p {
    font-size: 13px;
  }

  .decoder-grid {
    gap: 6px;
  }

  .decoder-card {
    padding: 8px;
    font-size: 14px;
  }

  .modal-card {
    padding: 24px 20px;
    width: 94%;
  }

  .modal-card h2 {
    font-size: 36px;
  }

  .modal-card p {
    font-size: 16px;
  }

  .volume-card {
    padding: 32px 28px;
    border-radius: 16px;
    width: 90%;
    max-width: 400px;
  }

  .volume-card h2 {
    font-size: 40px;
  }

  .volume-card p {
    font-size: 18px;
  }

  .volume-card .snowflake {
    font-size: 36px;
  }

  .volume-card .snowflake:first-child {
    top: -18px;
    left: -18px;
  }

  .volume-card .snowflake:last-child {
    bottom: -18px;
    right: -18px;
  }

  /* ============================================
     RESPONSIVE: Small Screens (mobile phones, narrow views)
     These adjustments apply when screen width ≤ 600px
     ============================================ */

  /* Stamp 0 - Reposition for small screens */
  .stamp_0 {
    top: 120px;      /* Adjust vertical position for smaller layout */
    left: 1%;        /* Tighten to edge to save space */
  }

  /* Wax Seal - Keep overlapping corner on small screens (seal size: 250px) */
  .wax-seal {
    top: -125px;     /* Centers seal on corner (250px ÷ 2) */
    left: -125px;    /* Centers seal on corner (250px ÷ 2) */
  }

  .stamp_1 {
    top: 8%;         /* Adjust Y position here */
    right: 2%;       /* Adjust X position here */
  }

  .stamp_2 {
    bottom: 3%;      /* Adjust Y position here */
    left: 5%;        /* Adjust X position here */
  }

  .stamp_3 {
    bottom: 3%;      /* Adjust Y position here */
    right: 5%;       /* Adjust X position here */
  }

  .stamp_4 {
    top: 35%;        /* Adjust Y position here */
    left: 1%;        /* Adjust X position here */
  }
}

@media (max-width: 400px) {
  :root {
    --stamp-size: 50px;  /* Shrink stamps for extra small screens */
    --seal-size: 180px;  /* Shrink seal proportionally */
  }

  body {
    padding: 12px;
  }

  .token {
    min-width: 36px;
    height: 36px;
    font-size: 14px;
  }

  .token.revealed {
    font-size: 15px;
  }

  .line {
    gap: 5px;
  }

  h1 {
    font-size: 16px;
  }

  .volume-card {
    padding: 24px 20px;
  }

  .volume-card h2 {
    font-size: 32px;
  }

  .volume-card p {
    font-size: 16px;
  }

  /* ============================================
     RESPONSIVE: Extra Small Screens (very small phones)
     These adjustments apply when screen width ≤ 400px
     ============================================ */

  /* Stamp 0 - Reposition for extra small screens */
  .stamp_0 {
    top: 100px;      /* Move higher to fit compact layout */
    left: 1%;        /* Keep tight to edge */
  }

  /* Wax Seal - Keep overlapping corner on extra small screens (seal size: 180px) */
  .wax-seal {
    top: -90px;      /* Centers seal on corner (180px ÷ 2) */
    left: -90px;     /* Centers seal on corner (180px ÷ 2) */
  }

  .stamp_1 {
    top: 5%;         /* Adjust Y position here */
    right: 1%;       /* Adjust X position here */
  }

  .stamp_2 {
    bottom: 2%;      /* Adjust Y position here */
    left: 3%;        /* Adjust X position here */
  }

  .stamp_3 {
    bottom: 2%;      /* Adjust Y position here */
    right: 3%;       /* Adjust X position here */
  }

  .stamp_4 {
    top: 30%;        /* Adjust Y position here */
    left: 1%;        /* Adjust X position here */
  }
}