:root{
  --bg: #efe7ff; /* softened violet background */
  --card-radius: 8px;
  --gutter: 18px;
  --poster-width: 360px;
  --text-color: #111;
  --muted: #6b6b6b;
  --accent: #b71c1c;
  --shadow: 0 20px 40px rgba(10,10,10,0.18);
  --safe-padding: 18px;
  --elite-font: "Cinzel", serif;
  --stencil: "Stardos Stencil", serif;
}

/* general reset */
*{box-sizing:border-box}
html,body,#app{height:100%}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.00)),
    url('/'); /* keep simple: warm paper base color */
  background-color:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:18px;
}

/* add a subtle paper texture and vignette for warmth */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:
    radial-gradient(1200px 600px at 10% 10%, rgba(255,250,255,0.06), transparent 10%),
    radial-gradient(1000px 700px at 90% 90%, rgba(100,80,140,0.03), transparent 20%),
    linear-gradient(180deg, rgba(250,240,255,0.03), rgba(230,220,255,0.02));
  pointer-events:none;
  mix-blend-mode:overlay;
  z-index:0;
  opacity:0.95;
}

/* WANTED banner at top */
#wanted-banner{
  width:100%;
  max-width:980px;
  margin-bottom:12px;
  display:flex;
  justify-content:center;
  z-index:1;
}
#wanted-banner .banner-inner{
  width:100%;
  background:linear-gradient(180deg,#fff8f6,#f7efe8);
  border:4px solid rgba(0,0,0,0.06);
  box-shadow: 0 18px 50px rgba(0,0,0,0.14);
  border-radius:10px;
  padding:10px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  transform:translateY(-4px);
}
.wanted-title{
  font-family: var(--stencil);
  font-size:48px;
  letter-spacing:4px;
  color:var(--accent);
  font-weight:900;
  text-transform:uppercase;
  padding-left:12px;
  text-shadow: 0 2px 0 rgba(255,255,255,0.6);
}
.wanted-sub{
  font-size:12px;
  color:#3b3936;
  font-weight:800;
  text-transform:uppercase;
  padding-right:12px;
  opacity:0.98;
}

/* page title above banner */
#page-title{
  font-family: var(--stencil);
  font-size:20px;
  margin:6px 0 8px;
  text-align:center;
  color:var(--accent);
  letter-spacing:1.6px;
  text-transform:uppercase;
  font-weight:900;
  background:linear-gradient(180deg, rgba(183,28,28,0.04), transparent);
  padding:8px 12px;
  border-radius:10px;
  max-width:980px;
  align-self:center;
  box-shadow:0 8px 20px rgba(0,0,0,0.06);
}

/* Instruction banner (made much larger and attention-grabbing) */
#instruction{
  margin:8px auto 6px;
  max-width:980px;
  font-family: var(--stencil);
  font-weight:900;
  color: #fff;
  background: linear-gradient(180deg, #ff4f99, #e61e63);
  padding: 18px 20px;
  border-radius: 12px;
  text-align: center;
  font-size: 28px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  box-shadow: 0 20px 60px rgba(230,30,100,0.22), 0 6px 18px rgba(0,0,0,0.12);
  border: 2px solid rgba(255,255,255,0.08);
  transform: translateY(-4px);
  z-index: 2;
}

/* extra pop on smaller screens and print-safe adjustments */
@media (max-width:560px){
  #instruction{ font-size:22px; padding:14px 12px; letter-spacing:1.2px; }
}
@media print{
  #instruction{ color:#111 !important; background: none !important; box-shadow:none !important; border:none !important; font-size:18px; text-transform:none; }
}

/* app layout */
#app{
  width:100%;
  max-width:980px;
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:stretch;
  position:relative;
  z-index:1;
}

/* Controls row */
#controls{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  align-items:center;
}
#controls button{
  background:linear-gradient(180deg,#222,#121212);
  color:white;
  border:none;
  padding:10px 14px;
  border-radius:12px;
  font-weight:700;
  font-size:14px;
  min-height:44px;
  min-width:44px;
  box-shadow:0 12px 30px rgba(0,0,0,0.28);
  touch-action:manipulation;
  transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease;
  opacity:0.96;
}
#controls button:hover{ transform:translateY(-2px); box-shadow:0 18px 40px rgba(0,0,0,0.32); }
#controls button[disabled]{ opacity:0.6; transform:none; box-shadow:none; cursor:default; }
#controls button:active{transform:translateY(0)}

/* Gallery: responsive grid */
#gallery{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(var(--poster-width),1fr));
  gap:var(--gutter);
  width:100%;
  align-content:start;
  padding-bottom:8px;
}

/* Poster card styled like a pinned mugshot photo */
.poster{
  background:linear-gradient(180deg,#fdf8f5,#f7efe8);
  border-radius:10px;
  min-height:360px;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:center;
  padding:var(--safe-padding);
  box-shadow:var(--shadow);
  position:relative;
  overflow:visible;
  border:1px solid rgba(0,0,0,0.06);
  transform-origin:center;
  transition:transform .24s cubic-bezier(.2,.9,.2,1), box-shadow .18s ease, filter .12s ease;
  will-change:transform,box-shadow;
  opacity:0;
  transform: translateY(14px) rotate(0deg) scale(0.99);
}

/* slight tilt for variety */
.poster:nth-child(odd){ transform: rotate(-1.5deg) translateY(12px); }
.poster:nth-child(even){ transform: rotate(1.2deg) translateY(12px); }

/* entrance animation state (added dynamically) */
.poster.pop-in{
  opacity:1;
  transform: translateY(0) rotate(0deg) scale(1);
}

/* hover polish */
.poster:hover{
  transform: translateY(-8px) rotate(0deg) scale(1.02);
  box-shadow: 0 36px 80px rgba(0,0,0,0.28);
  z-index:3;
  filter:contrast(1.03) saturate(1.02);
}

/* faux pin element */
.pin{
  position:absolute;
  top:-12px;
  left:50%;
  transform:translateX(-50%);
  width:26px;
  height:26px;
  background:radial-gradient(circle at 40% 30%, #ffdede 0%, #f4bcbc 30%, #b73535 60%);
  border-radius:50%;
  box-shadow:0 8px 18px rgba(0,0,0,0.28);
  z-index:6;
  border:2px solid rgba(255,255,255,0.6);
}

/* hint label (WANTED) */
.hint{
  position:absolute;
  top:18px;
  left:12px;
  background:transparent;
  padding:6px 8px;
  border-radius:4px;
  font-size:13px;
  color:var(--accent);
  font-weight:900;
  font-family:var(--stencil);
  text-transform:uppercase;
  letter-spacing:1px;
  z-index:3;
  text-shadow:0 1px 0 rgba(255,255,255,0.5);
}

/* statement area looks like a photo caption / mugshot */
.statement{
  font-weight:900;
  color:var(--text-color);
  font-size:32px; /* increased for better readability */
  line-height:1.06;
  text-align:center;
  letter-spacing:0.6px;
  display:block;
  padding: 8px 4px;
  transform: translateY(2px);
  font-family: var(--elite-font);
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
  padding-top:36px;
  z-index:2;
  word-wrap:break-word;
}

/* tagline under statement */
.poster .tagline{
  margin-top:14px;
  font-size:13px;
  color:#3b3936;
  text-align:center;
  font-weight:800;
  letter-spacing:0.6px;
  text-transform:uppercase;
}

/* footer area with touch-friendly buttons */
.poster-foot{
  margin-top:18px;
  display:flex;
  gap:10px;
  justify-content:center;
  align-items:center;
  z-index:2;
}

.btn{
  background:transparent;
  border:1px solid rgba(0,0,0,0.08);
  padding:8px 10px;
  border-radius:10px;
  font-size:13px;
  min-height:40px;
  min-width:40px;
  cursor:pointer;
  touch-action:manipulation;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(0,0,0,0.12); }
.btn:active{transform:translateY(0)}

/* Color variations (blue hues for posters) */
.bg-1{background:linear-gradient(180deg,#e8f4ff,#d5ecff);} /* soft sky blue */
.bg-2{background:linear-gradient(180deg,#dff3ff,#c8e9ff);} /* pale aqua */
.bg-3{background:linear-gradient(180deg,#e6f0ff,#cfe2ff);} /* light periwinkle */
.bg-4{background:linear-gradient(180deg,#dbeeff,#bcdcff);} /* gentle cornflower */
.bg-5{background:linear-gradient(180deg,#eaf6ff,#cfeaff);} /* icy blue highlight */

/* lightbox refinements for attractivity */
.lightbox-pane{
  max-width:900px;
  width:94%;
  background:linear-gradient(180deg,#fff,#f7f3f1);
  border-radius:14px;
  padding:34px;
  box-shadow:0 36px 120px rgba(0,0,0,0.45);
  transform-origin:center;
  animation:popIn .18s ease both;
}
@keyframes popIn{
  from{ transform:translateY(12px) scale(.98); opacity:0 }
  to{ transform:translateY(0) scale(1); opacity:1 }
}

/* Small addition: ensure poster-foot and controls remain hidden when printing main page */
@media print{
  #controls, .btn, header, #page-title, #wanted-banner { display: none !important; }
  body{background: none !important}
  #gallery{grid-template-columns:repeat(2,1fr); gap:12px}
  .poster{box-shadow:none; border:1px dashed rgba(0,0,0,0.12); transform:none; page-break-inside:avoid}
  .statement{font-size:18px}
}

/* Top lottery styling (larger and prominent) */
#top-lottery{ display:flex; gap:14px; justify-content:flex-end; align-items:center; margin-bottom:8px; }
#lottery{ background:linear-gradient(180deg,#b71c1c,#8f1919); color:white; border:none; padding:18px 22px; border-radius:18px; font-weight:900; font-size:22px; min-height:86px; min-width:180px; box-shadow:0 22px 56px rgba(0,0,0,0.25); }
#lottery:active{ transform:translateY(0) }

#lottery-display{ display:flex; gap:18px; align-items:center; min-height:110px; margin-left:8px; }
.lottery-ball{ width:140px; height:140px; border-radius:50%; background:radial-gradient(circle at 30% 25%, #ffffff, #ffdede 20%, #f4bcbc 60%, #b73535 100%); color:white; display:flex; align-items:center; justify-content:center; font-family: "Cinzel", serif; font-weight:900; font-size:56px; box-shadow:0 22px 56px rgba(0,0,0,0.28); transform:translateY(0); transition:transform .18s cubic-bezier(.2,.9,.2,1), opacity .2s ease; }
.lottery-ball.pop{ transform:translateY(-14px) scale(1.06); }
.lottery-status{ font-size:16px; color:#3b3936; font-weight:900; text-transform:uppercase; margin-right:8px; font-family:var(--stencil); }
@media(print){ #top-lottery, #lottery-display{ display:none } }

/* responsive tweaks */
@media(min-width:560px){
  .statement{font-size:48px} /* bumped up on larger screens */
  .poster{min-height:380px}
  #gallery{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));}
}

/* Create and show a printable worksheet in-page (placed below the posters) */
function openWorksheetInPage(list){
  const container = document.getElementById('worksheet-container');
  if(!container) return;
  // simple responsive two-column grid that prints nicely
  const style = `
    <style>
      /* brighter pink palette for worksheet */
      :root{ --card-bg:#ffeef8; --accent:#ff2d7f; --text:#111; --paper:#ffe6f3; }
      #worksheet-container{ background:var(--paper); padding:12px; border-radius:10px; box-shadow:0 12px 40px rgba(0,0,0,0.06); }
      .ws-header{display:flex; justify-content:space-between; align-items:center; margin:6px 0 12px; font-family: "Cinzel", serif;}
      .ws-title{font-weight:900; color:var(--accent); letter-spacing:1px;}
      .ws-guides{font-size:13px; color:#444}
      .ws-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px;}
      .cut{background:linear-gradient(180deg,var(--card-bg),#fff); border:2px dashed rgba(214,51,108,0.18); border-radius:8px; padding:18px; min-height:96px; display:flex; align-items:center; justify-content:center; text-align:center; box-shadow:0 8px 24px rgba(0,0,0,0.04); word-break:break-word; font-size:16px; color:var(--text); font-weight:700; line-height:1.08; font-family: "Cinzel", serif;}
      @media print{
        body{ -webkit-print-color-adjust:exact; }
        #controls, header, #page-title { display:none !important; }
        #worksheet-container{ box-shadow:none; background:transparent; padding:0; }
        .ws-grid{ gap:8px; grid-template-columns:repeat(2,1fr); }
        .cut{ border-style:solid; box-shadow:none; font-size:18px }
      }
    </style>
  `;
  // ... existing code ...