/* The Genie Tricks Game — Salt slice.
   Interface stays out of the painting's way: paper, ink, one accent. */

:root{
  --paper:#F1ECE1;
  --ink:#1B1916;
  --ink-soft:#4A443B;
  --faint:#6E6659;
  --gold:#E0AC1E;
  --teal:#5FD9C2;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; overflow:hidden; background:#0E0C0A;
  font-family:'Iowan Old Style',Palatino,Georgia,serif;
  color:var(--ink); user-select:none; cursor:crosshair;
}
#stage{position:fixed; inset:0; width:100%; height:100%; display:block}

/* ---------- the selected human ---------- */
.card{
  position:fixed; left:clamp(1rem,3vw,2.5rem); top:clamp(1rem,3vw,2.5rem);
  width:min(22rem,calc(100vw - 2rem));
  padding:1.1rem 1.3rem 1.2rem;
  background:color-mix(in srgb, var(--paper) 94%, transparent);
  border:1px solid #D5CBB6; border-radius:3px;
  box-shadow:0 18px 46px -20px rgba(0,0,0,.7);
  opacity:0; transform:translateY(-8px); pointer-events:none;
  transition:opacity 420ms, transform 420ms cubic-bezier(.22,.61,.36,1);
}
.card.on{opacity:1; transform:none}
.card__kicker{
  margin:0 0 .5rem; font-family:ui-sans-serif,system-ui,sans-serif;
  font-size:.58rem; letter-spacing:.22em; text-transform:uppercase; color:var(--faint);
}
.card h2{margin:0 0 .5rem; font-size:1.35rem; font-weight:400; line-height:1.15}
.card p:last-child{margin:0; font-size:.98rem; line-height:1.5; color:var(--ink-soft)}

/* ---------- prompts and captions ---------- */
.prompt,.caption{
  position:fixed; left:50%; transform:translateX(-50%) translateY(8px);
  margin:0; text-align:center; opacity:0; pointer-events:none;
  transition:opacity 500ms, transform 500ms cubic-bezier(.22,.61,.36,1);
}
.prompt{
  bottom:clamp(1.4rem,5vh,3rem);
  font-family:ui-sans-serif,system-ui,sans-serif;
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:#E8DFCB; text-shadow:0 2px 14px rgba(0,0,0,.9);
}
.caption{
  bottom:clamp(4.4rem,13vh,7rem);
  width:min(38rem,calc(100vw - 3rem));
  font-size:clamp(1.05rem,2vw,1.35rem); line-height:1.4;
  color:#F4EDDD; text-shadow:0 2px 20px rgba(0,0,0,.95);
}
.prompt.on,.caption.on{opacity:1; transform:translateX(-50%)}

/* ---------- the Genie's three approved barks ---------- */
.bark{
  position:fixed; left:clamp(7rem,16vw,15rem); bottom:clamp(11rem,30vh,20rem);
  font-size:clamp(1.6rem,3.4vw,2.6rem); color:var(--gold);
  text-shadow:0 3px 18px rgba(0,0,0,.85); opacity:0; pointer-events:none;
}
.bark.on{animation:bark 1500ms cubic-bezier(.22,.61,.36,1) forwards}
@keyframes bark{
  0%{opacity:0; transform:translateY(10px) rotate(-6deg) scale(.7)}
  22%{opacity:1; transform:translateY(-6px) rotate(-3deg) scale(1.08)}
  70%{opacity:1; transform:translateY(-14px) rotate(-3deg) scale(1)}
  100%{opacity:0; transform:translateY(-34px) rotate(-2deg) scale(.96)}
}

/* ---------- ripple: ink edged with warm starlight, never a score ---------- */
.ripple{
  position:fixed; right:clamp(1rem,3vw,2.5rem); top:clamp(1rem,3vw,2.5rem);
  display:flex; align-items:center; gap:.6rem;
  font-family:ui-sans-serif,system-ui,sans-serif;
  font-size:.6rem; letter-spacing:.22em; text-transform:uppercase;
  color:#E8DFCB; text-shadow:0 2px 12px rgba(0,0,0,.8);
  opacity:0; transform:translateY(-6px);
  transition:opacity 900ms, transform 900ms;
}
.ripple.on{opacity:1; transform:none}
.ripple__ink{
  width:16px; height:16px; border-radius:50%;
  background:radial-gradient(circle at 38% 34%, #FFF0C4, #C9902B 55%, #4A3410);
  box-shadow:0 0 16px 3px rgba(240,198,78,.55);
}

/* ---------- the closing note ---------- */
.note{
  position:fixed; inset:auto 0 0 0; padding:2.2rem 1rem 2.6rem;
  display:flex; flex-direction:column; align-items:center; gap:1rem;
  background:linear-gradient(transparent,rgba(14,12,10,.92) 45%);
  opacity:0; pointer-events:none; transition:opacity 1200ms;
}
.note.on{opacity:1; pointer-events:auto}
.note p{margin:0; font-size:1.15rem; color:#F4EDDD; text-shadow:0 2px 18px rgba(0,0,0,.9)}
.note button{
  font-family:ui-sans-serif,system-ui,sans-serif;
  font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  padding:.75rem 1.6rem; cursor:pointer;
  color:#F1ECE1; background:transparent; border:1px solid #8A8071;
  transition:background 300ms,color 300ms;
}
.note button:hover{background:#F1ECE1; color:#1B1916}

.build{
  position:fixed; right:clamp(1rem,3vw,2.5rem); bottom:.9rem; margin:0;
  font-family:ui-sans-serif,system-ui,sans-serif;
  font-size:.56rem; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(232,223,203,.42); pointer-events:none;
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important}
}