/* Palma Linda v4 — 16-bit restyle.
   Everything is nearest-neighbour scaled so the pixels stay pixels, and the
   chrome is hard-edged retro: no rounded corners, no soft shadows. */

:root{
  --ink:#1a1035;
  --panel:#2b1d5e;
  --panel-lo:#170f3a;
  --edge:#7b6bd6;
  --cream:#fff3d6;
  --red:#e83b3b;
  --cyan:#3bbde8;
  --yellow:#ffd93b;
  --green:#5fd85f;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{
  background:#0a0620;
  font-family:ui-monospace,"Courier New",Consolas,monospace;
  color:var(--cream);
  display:flex;align-items:center;justify-content:center;
  -webkit-font-smoothing:none;
  -webkit-tap-highlight-color:transparent;
  user-select:none;-webkit-user-select:none;
}
img{image-rendering:pixelated;image-rendering:crisp-edges}

#stage{
  position:relative;
  overflow:hidden;background:#1a1035;
  image-rendering:pixelated;
  /* width/height/font-size are set by room.js from the integer scale */
}
#room{position:absolute;inset:0;image-rendering:pixelated;display:block}
.hidden{display:none !important}


/* ---------------- want item ----------------
   No box, no tail: just the garment floating at the asker's top right,
   breathing in and out so the eye lands on it. */
#bubble{
  position:absolute;z-index:6;
  width:7em;height:7em;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
}
#bubble-item{width:100%;height:100%;object-fit:contain;image-rendering:pixelated;
  filter:drop-shadow(.18em .18em 0 rgba(10,6,32,.55));
  animation:wantPulse .84s ease-in-out infinite}
@keyframes wantPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.3)}}

/* ---------------- OPTIONS over the action ---------------- */
#options{
  position:absolute;top:0;left:0;right:0;z-index:8;
  display:flex;gap:1.4em;justify-content:flex-start;align-items:flex-start;
  /* 7.8em, not 4.6: the top bar is ~5.5em tall at any scale (same em), and
     the cards were sliding 2em underneath it. */
  padding:7.8em 1em 1.6em 1.2em;
  background:linear-gradient(180deg, rgba(23,15,58,.85) 0%, rgba(23,15,58,.4) 60%, rgba(23,15,58,0) 100%);
  pointer-events:none;
}
#options.on{pointer-events:auto}
.opt{
  /* .opt is a BUTTON: buttons do not inherit font-size, they take the UA
     default (13.33px here), so every em on this card was sized against the
     wrong base. Inherit explicitly or the cards ignore the stage scale. */
  font-size:1em;
  flex:0 0 auto;width:12em;height:10em;
  background:var(--panel);border:.5em solid var(--cream);
  box-shadow:0 0 0 .4em var(--ink);
  cursor:pointer;display:flex;align-items:center;justify-content:center;padding:.7em;
  transition:transform .08s steps(2,end), background .08s;
}
.opt img{width:100%;height:100%;object-fit:contain;pointer-events:none;image-rendering:pixelated;
  animation:cardDance .84s steps(1,end) infinite}
/* two-phase bob on the shared 420ms beat; game.js phase-locks each card with
   a negative animation-delay so they land with the canvas idles */
@keyframes cardDance{0%,100%{transform:translateY(0)}50%{transform:translateY(-.2em)}}
.opt:hover{background:#3d2a86;transform:translateY(-.4em)}
.opt:active{transform:translateY(.2em)}
.opt.wrong{animation:wrongShake .3s steps(2,end) 2}
@keyframes wrongShake{0%,100%{transform:translateX(0)}50%{transform:translateX(-.9em)}}
.opt.gone{animation:optFly .35s steps(4,end) forwards}
@keyframes optFly{to{transform:translateY(60vh) scale(.3);opacity:0}}

/* ---------------- the tile jump minigame ---------------- */
#options.tiles{
  position:absolute;z-index:9;top:auto;right:auto;bottom:auto;
  transform:translateX(-50%);
  display:flex;gap:1em;padding:0;background:none;pointer-events:none;
}
.tile{
  width:13em;height:11.5em;font-size:1em;
  background:var(--panel);border:.55em solid var(--cream);
  box-shadow:0 0 0 .4em var(--ink);
  display:flex;align-items:center;justify-content:center;padding:.8em;
  opacity:.55;transition:none;
}
.tile img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
.tile.lit{
  opacity:1;border-color:var(--yellow);
  box-shadow:0 0 0 .35em var(--ink), 0 0 0 .7em var(--yellow);
  transform:translateY(-.4em);
}
.tile.bump{animation:tileBump .3s steps(3,end)}
@keyframes tileBump{40%{transform:translateY(-1.2em)}100%{transform:translateY(-.4em)}}
.flyitem{position:absolute;z-index:12;image-rendering:pixelated;pointer-events:none}

/* ------- HUD: named per-character meters, after the reference mock ------- */
#topbar{
  position:absolute;top:0;left:0;right:0;z-index:16;
  display:flex;align-items:center;gap:1.5em;
  padding:.65em 1em;
  background:#131335;border-bottom:.35em solid var(--ink);
  font-size:1.7em;font-weight:700;letter-spacing:.1em;
}
.kbar{display:flex;align-items:center;gap:.5em}
.kbar .lbl{font-size:.82em;color:#fff}
.kbar b{font-size:.82em;min-width:3.2em}
.kbar .bar{width:8.5em;height:1em;background:#060616;border:.18em solid;padding:.14em}
.kbar .bar i{display:block;height:100%;width:100%;transition:width .25s linear}
.kbar.sam    .bar{border-color:#2b6f9e}
.kbar.sam    .bar i{background:#3bbde8}
.kbar.sam    b{color:#3bbde8}
.kbar.sofia  .bar{border-color:#a34a74}
.kbar.sofia  .bar i{background:#ff5fa2}
.kbar.sofia  b{color:#ff5fa2}
.kbar.celine .bar{border-color:#a5892b}
.kbar.celine .bar i{background:var(--yellow)}
.kbar.celine b{color:var(--yellow)}
#score-val{margin-left:auto;font-size:1.15em;letter-spacing:.14em;color:#fff}
#score-val.neg{color:var(--red)}
#topbar.warn  .kbar.sam .bar i{background:var(--yellow)}
#topbar.panic .kbar.sam .bar i{background:var(--red);animation:tick .4s steps(2,end) infinite}
#topbar #mute{position:static;width:2.4em;height:2.4em;font-size:1em}
#topbar.bump #score-val{animation:scorePop .3s steps(3,end)}

/* ---------------- retro HUD ---------------- */
.hud-box{
  position:absolute;z-index:16;
  background:var(--panel-lo);border:.35em solid var(--cream);
  box-shadow:0 0 0 .3em var(--ink);
  padding:.35em .8em;font-size:2em;font-weight:700;letter-spacing:.08em;
  display:flex;gap:.5em;align-items:center;
}
#score{right:1.4em;bottom:1.6em}
#score.neg b{color:var(--red)}
#score.bump{animation:scorePop .3s steps(3,end)}
@keyframes scorePop{50%{transform:scale(1.18)}}
#timer{left:1.4em;bottom:1.6em;width:22em;padding:.5em}
#timer .bar{flex:1;height:1.2em;background:var(--ink);border:.2em solid var(--edge);padding:.15em}
#timer .bar i{display:block;height:100%;background:var(--green);transition:width .25s linear}
#timer.warn .bar i{background:var(--yellow)}
#timer.panic .bar i{background:var(--red);animation:tick .4s steps(2,end) infinite}
@keyframes tick{50%{opacity:.3}}

#mute{
  position:absolute;right:1.4em;top:1.2em;z-index:16;
  background:var(--panel-lo);border:.35em solid var(--cream);
  box-shadow:0 0 0 .3em var(--ink);
  width:3.6em;height:3.6em;font-size:1.6em;cursor:pointer;
  color:var(--cream);font-family:inherit;display:grid;place-items:center;
}

/* ---------------- chase ---------------- */
#chase{position:absolute;inset:0;z-index:15;display:block;
  background:#1a1035;cursor:pointer;image-rendering:pixelated}
/* the one jump input: a shiny 8-bit arcade dome, small enough to live in
   the floor strip below the runners so it never covers Sofia */
#jumpbtn{
  position:absolute;right:.6em;bottom:.4em;z-index:17;
  width:5.6em;height:5.6em;
  background:transparent url('../assets/img/jump-btn.png') center / 100% 100% no-repeat;
  image-rendering:pixelated;
  border:none;color:#fff;
  font-family:inherit;font-weight:700;font-size:2.4em;letter-spacing:.04em;
  text-shadow:.12em .12em 0 var(--ink);
  padding-top:1em;
  cursor:pointer;touch-action:manipulation;
  user-select:none;-webkit-user-select:none;
  filter:drop-shadow(.14em .2em 0 rgba(10,6,32,.5));
}
#jumpbtn:active{transform:translateY(.14em);filter:brightness(.88) drop-shadow(.06em .08em 0 rgba(10,6,32,.5))}

/* ---------------- title / end card ---------------- */
/* the frame art IS the panel: clothesline of shirts up top, toy shelf below,
   big navy centre for the text (assets/img/title-frame.png) */
#card{position:absolute;inset:0;z-index:20;
  background:#0a0620 url('../assets/img/title-frame.png') center / 100% 100% no-repeat;
  image-rendering:pixelated;
  display:grid;place-items:center;padding:1.2em}
.card-in{
  background:none;border:none;box-shadow:none;
  padding:4.5em 3em 3.5em;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:.6em;max-width:74%;
}
#card-title{font-size:4.4em;line-height:1;color:var(--yellow);letter-spacing:.06em}
#card-art{height:24em;object-fit:contain;image-rendering:pixelated}
#card-hint{font-size:1.9em;font-weight:700;opacity:.85}
button.big{
  background:var(--yellow);border:.4em solid var(--ink);box-shadow:0 0 0 .35em var(--cream);
  color:var(--ink);font-size:2.6em;font-family:inherit;font-weight:700;
  padding:.25em 1.1em;cursor:pointer;letter-spacing:.1em;
}
button.big:active{transform:translateY(.1em)}

#fx{position:absolute;inset:0;z-index:7;pointer-events:none;overflow:hidden}
.boom{position:absolute;inset:0;z-index:19;pointer-events:none;background:#fff;
  animation:boomFlash .95s steps(4,end) forwards}
@keyframes boomFlash{0%{opacity:1;background:#fff}30%{opacity:.85;background:var(--yellow)}
  60%{opacity:.5;background:var(--red)}100%{opacity:0}}
.star{position:absolute;font-size:3.4em;animation:starUp .9s steps(6,end) forwards}
@keyframes starUp{0%{opacity:0;transform:translateY(0)}20%{opacity:1}100%{opacity:0;transform:translateY(-8em)}}

#rotate{display:none}
@media (orientation:portrait) and (max-width:820px){
  #stage{display:none}
  #rotate{display:grid;place-items:center;height:100%;color:var(--cream);
    font-size:1rem;font-weight:700;text-align:center;padding:2rem;gap:1rem}
}