:root{
  --bg:#0b0b0c;
  --ink:#e9e6df;
  --ink-dim:#bdb9ad;
  --accent:#bb2d2d;
  --shadow: 0 10px 30px rgba(0,0,0,.55);
  --glow: 0 0 0px rgba(255,255,255,0.0);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Special Elite", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  overflow:hidden;
}

.scene{
  position:relative;
  height:100dvh;
  width:100vw;
  display:grid;
  grid-template-rows: auto 1fr auto;
}

.header, .footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 0.75rem 1rem;
  backdrop-filter: blur(2px);
  background: linear-gradient(to bottom, rgba(0,0,0,.45), transparent);
  z-index:3;
}

.footer{
  justify-content:center;
  color: var(--ink-dim);
  background: linear-gradient(to top, rgba(0,0,0,.45), transparent);
}

.title{
  margin:0;
  letter-spacing: .12em;
  text-transform: lowercase;
  font-weight: 400;
  text-shadow: 0 1px 0 rgba(0,0,0,.6);
  animation: titleFlicker 7s infinite steps(40);
}

@keyframes titleFlicker {
  0%, 4%, 8%, 100% { opacity: 1 }
  1%, 5% { opacity: .85 }
  2% { opacity: .6 }
  3%, 7% { opacity: .9 }
  6% { opacity: .7 }
}

.mute{
  display:inline-flex; align-items:center; gap:.5rem;
  font: inherit;
  color: var(--ink);
  background: transparent;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  padding: .35rem .7rem;
  cursor: pointer;
}
.mute[aria-pressed="false"] .mute__icon { filter: grayscale(1); opacity: .65; }

.table{
  position:relative;
  overflow:hidden;
  /* Dark wood background pulled remotely */
  background: #1a1a1a url('https://source.unsplash.com/1600x1000/?dark,wood,table,grain') center/cover no-repeat fixed;
  box-shadow: inset 0 0 120px rgba(0,0,0,.75);
}

.vignette{
  position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%);
  z-index:2;
}

/* Make sure this overlay doesn’t block clicks */
.grain{
  position:absolute; inset:-10%;
  background-image:
    radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    radial-gradient(rgba(0,0,0,.045) 1px, transparent 1px);
  background-size: 3px 3px, 5px 5px;
  mix-blend-mode: overlay;
  opacity:.4;
  animation: grainMove 12s linear infinite;
  z-index:2;
  pointer-events:none;
}
@keyframes grainMove {
  0% { transform: translate3d(0,0,0) }
  100% { transform: translate3d(-10%, -10%, 0) }
}

.purse{
  position:absolute;
  width:min(42vw, 640px);
  left: 4%;
  top: -6%;
  transform: rotate(-12deg);
  filter: contrast(1.05) saturate(.9) drop-shadow(0 40px 70px rgba(0,0,0,.7));
  z-index:1;
  pointer-events:none;
  user-select:none;
}

.items-layer{
  position:absolute; inset:0;
  z-index:1;
}

/* Clickable item styling */
.item{
  position:absolute;
  display:inline-block;
  transform-origin: 50% 50%;
  transition: transform .25s ease, filter .25s ease, box-shadow .25s ease;
  filter: drop-shadow(0 12px 22px rgba(0,0,0,.7)) saturate(.9);
  animation: breathe 8s ease-in-out infinite;
  cursor: pointer;
}
.item:hover, .item:focus{
  transform: translateY(-2px) rotate(var(--rot, 0deg)) scale(1.02);
  filter: drop-shadow(0 18px 30px rgba(0,0,0,.85)) saturate(1.05) contrast(1.03);
}
@keyframes breathe {
  0%, 100% { transform: rotate(var(--rot, 0deg)) translateY(0) }
  50% { transform: rotate(calc(var(--rot, 0deg) + .2deg)) translateY(-1px) }
}

.item img{
  display:block;
  width: 100%;
  height:auto;
  pointer-events:none;
  user-select:none;
  border-radius: 2px;
}

/* Fallback label if an image fails to load */
.item .fallback{
  position:absolute; inset:0;
  display:none; /* hidden unless image fails to load */
  place-items:center;
  background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(0,0,0,.2));
  color: var(--ink-dim);
  font-size: clamp(.7rem, 1.6vw, 1rem);
  text-align:center;
  padding:.5rem;
  border: 1px dashed rgba(255,255,255,.2);
  border-radius: 3px;
}

/* Clue page shared styles */
.page{
  position:relative;
  min-height:100dvh;
  background: #0a0a0a url('https://source.unsplash.com/1600x900/?dark,paper,texture') center/cover no-repeat fixed;
  display:grid;
  grid-template-rows: auto 1fr auto;
  color: var(--ink);
}

.page .topbar, .page .bottombar{
  display:flex; align-items:center; justify-content:space-between;
  padding:.75rem 1rem;
  background: linear-gradient(to bottom, rgba(0,0,0,.45), transparent);
}
.page .bottombar{
  justify-content:center;
  background: linear-gradient(to top, rgba(0,0,0,.45), transparent);
}

.clue{
  max-width: 880px;
  margin: 2rem auto;
  padding: 1.25rem 1.25rem 2.5rem;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow);
  position:relative;
}

.clue h2{
  margin-top:0;
  letter-spacing:.08em;
  font-weight:400;
}

.clue .glitch{
  position:relative; display:inline-block;
}
.clue .glitch::after, .clue .glitch::before{
  content: attr(data-text);
  position:absolute; left:0; top:0; width:100%; height:100%;
  mix-blend-mode: screen; opacity:.15;
}
.clue .glitch::before{ transform: translateX(-1px); color: #0ff; animation: g1 3s infinite; }
.clue .glitch::after{ transform: translateX( 1px); color: #f0f; animation: g2 2.8s infinite; }
@keyframes g1 { 0%,100%{opacity:.15} 50%{opacity:.25} }
@keyframes g2 { 0%,100%{opacity:.15} 50%{opacity:.22} }

.clue .body{
  line-height:1.65;
  color: var(--ink-dim);
  text-wrap: pretty;
}

.clue .item-shot{
  float:right;
  max-width: 220px;
  margin: .5rem 0 .5rem 1rem;
  filter: grayscale(.15) contrast(1.05) drop-shadow(0 10px 18px rgba(0,0,0,.55));
  transform: rotate(-1deg);
  border-radius: 3px;
}

a{
  color: var(--ink);
  text-underline-offset: .2em;
}
a:hover{ color: var(--accent); }

@media (max-width: 780px){
  .purse{ width:min(70vw, 560px); left: -6%; top: -10%; }
  .clue .item-shot{ float:none; margin: .75rem 0; max-width: 100%; }
}