/* The brewing chamber: a smaller, rounder room off the grotto.
   Tokens come from room.css, which loads first. */

#potions {
  position: fixed; inset: 0; z-index: 20;
  display: grid; grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
  background: linear-gradient(180deg, var(--rock-far) 0%, var(--ink) 100%);
  animation: potions-in 0.3s ease;
}
@keyframes potions-in { from { opacity: 0; transform: scale(1.04); } }

/* ---------------------------------------------------------------- the room */

.chamber { position: relative; min-height: 0; overflow: hidden; }
.chamber .room {
  position: absolute; inset: 0;
  width: 100%; height: 100%; display: block;
  pointer-events: none;
}
.room-back  { z-index: 1; }
.room-peds  { z-index: 2; }
.room-frame { z-index: 4; }

/* Everything that has to land on a drawn feature lives in here, and fit.js keeps
   it exactly over the scene's own letterboxed box. */
.scene-frame { position: absolute; z-index: 3; pointer-events: none; }

.chamber-back {
  position: absolute; z-index: 6;
  left: 12px; top: calc(10px + env(safe-area-inset-top, 0px));
}

.rock-far   { fill: var(--rock-far); }
.rock-near  { fill: var(--rock-lit); }
.rock-frame { fill: var(--rock-fore); }

.arch-mouth { fill: var(--ink); }
.arch-rim   { fill: none; stroke: var(--rock-edge); stroke-width: 14; stroke-linecap: round; }

.dais     { fill: var(--rock-far); }
.dais-top { fill: var(--rock-lit); }
.dais-glow {
  fill: var(--magic); opacity: 0.12;
  filter: blur(18px);
}

.ped-shaft { fill: var(--rock-edge); }
.ped-cap   { fill: var(--rock-lit); }
.pedestal  { filter: drop-shadow(0 -6px 14px rgba(111, 227, 174, 0.18)); }
.ped-groove { fill: none; stroke: var(--rock-far); stroke-width: 7; stroke-linecap: round; }
.ped-groove-dot { fill: var(--rock-far); }

/* ------------------------------------------------------------ the creature */

/* Anchored on the creature's drawn feet, not the bottom of its canvas: the
   compositor leaves the lower 29% of the canvas empty, which hung the creature in
   mid air above the dais. */
.creature-slot {
  position: absolute; transform: translate(-50%, calc(-1 * var(--feet, 100%)));
  width: 31%; pointer-events: auto;
  border-radius: 24px;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.creature-slot.over {
  background: rgba(201, 166, 255, 0.14);
  box-shadow: inset 0 0 0 3px rgba(201, 166, 255, 0.65);
}
#p-creature {
  width: 100%; height: auto; display: block;
  filter: drop-shadow(0 10px 14px rgba(7, 4, 15, 0.7));
  animation: breathe 4.6s ease-in-out infinite;
  transform-origin: 50% 100%;
}
#p-creature.cheer { animation: cheer 0.8s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes cheer {
  0%   { transform: scale(1.18, 0.86); }
  40%  { transform: scale(0.94, 1.1) translateY(-22px); }
  70%  { transform: scale(1.06, 0.95); }
  100% { transform: none; }
}

/* ------------------------------------------------------------------ poof */

.poof, .poof-bits { position: absolute; inset: 0; pointer-events: none; }
.poof {
  border-radius: 50%;
  background: radial-gradient(circle, var(--c, #fff) 0%, transparent 66%);
  opacity: 0; transform: scale(0.3);
}
.poof.go { animation: poof 0.7s ease-out; }
@keyframes poof {
  0%   { opacity: 0;    transform: scale(0.25); }
  22%  { opacity: 0.95; }
  100% { opacity: 0;    transform: scale(2.3); }
}
.poof-bits i {
  position: absolute; left: 50%; top: 50%;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--c, #fff);
  box-shadow: 0 0 12px var(--c, #fff);
  animation: poof-bit 0.8s ease-out forwards;
}
@keyframes poof-bit {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.3); }
}

/* --------------------------------------------------------------- the vials */

.vial {
  position: absolute; transform: translate(-50%, -100%);
  width: 11%; pointer-events: auto; cursor: grab;
  transition: filter 0.25s ease;
  filter: drop-shadow(0 6px 10px rgba(7, 4, 15, 0.6));
}
.vial svg { width: 100%; height: auto; display: block; overflow: visible; }
.vial.ready {
  filter: drop-shadow(0 0 16px var(--c)) drop-shadow(0 6px 10px rgba(7, 4, 15, 0.6));
  animation: vial-bob 2.8s ease-in-out infinite;
}
@keyframes vial-bob {
  50% { transform: translate(-50%, calc(-100% - 7px)); }
}
.vial.lifted { opacity: 0.22; }
.vial.fizz svg { animation: fizz 0.45s cubic-bezier(.34, 1.5, .5, 1); }
@keyframes fizz { 35% { transform: scale(1.14, 0.9); } 70% { transform: scale(0.96, 1.05); } }

.vessel-cork  { fill: #c08f5c; }
.vessel-glass { fill: rgba(255, 255, 255, 0.08); }
.vessel-edge  { fill: none; stroke: rgba(255, 255, 255, 0.4); stroke-width: 5; stroke-linejoin: round; }
.vessel-shine { fill: none; stroke: rgba(255, 255, 255, 0.45); stroke-width: 6; stroke-linecap: round; }
.vessel-fill  { fill: var(--c, transparent); transition: y 0.4s cubic-bezier(.3, .9, .3, 1), fill 0.35s ease; }
.vessel-mark  { transition: opacity 0.3s ease; }

.vial-ghost {
  position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none;
  filter: drop-shadow(0 0 18px var(--c));
}
.vial-ghost svg { width: 100%; height: auto; display: block; }

/* -------------------------------------------------------------- the benches */

/* Two sides, one job each. Colour lives down the left edge next to the left
   pedestal, features down the right edge next to the right one, so each bench
   sits beside the vial it fills. They were one row along the bottom, and nothing
   said which half went where.

   The chamber spans the whole screen underneath and the benches float over its
   outer rock, which is only framing. The pedestals were moved in to clear them. */
#potions {
  --bench-w: 226px;
  grid-template-columns: var(--bench-w) minmax(0, 1fr) var(--bench-w);
  grid-template-rows: minmax(0, 1fr);
}
.chamber { grid-column: 1 / -1; grid-row: 1; }
.benches { display: contents; }

.bench {
  grid-row: 1; align-self: center; z-index: 5;
  min-width: 0; max-height: calc(100% - 24px); overflow-y: auto;
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(50, 33, 95, 0.9), rgba(24, 15, 48, 0.92));
  box-shadow: 0 12px 30px rgba(7, 4, 15, 0.55), inset 0 0 0 2px var(--bench-edge);
  scrollbar-width: none;
}
.bench-colour {
  grid-column: 1; margin-left: 10px;
  margin-left: calc(10px + env(safe-area-inset-left, 0px));
  /* a warm rim for the colour side, a violet one for the magic side */
  --bench-edge: rgba(255, 196, 107, 0.4);
}
.bench-effect {
  grid-column: 3; margin-right: 10px;
  margin-right: calc(10px + env(safe-area-inset-right, 0px));
  --bench-edge: rgba(201, 166, 255, 0.45);
}

.bench-head {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 30px;
}
.recipe { display: flex; align-items: center; gap: 6px; }
.drop {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--c, transparent);
  border: 2px dashed rgba(255, 255, 255, 0.22);
}
.drop.filled { border-style: solid; border-color: rgba(255, 255, 255, 0.45); box-shadow: 0 0 10px var(--c); }
.recipe .plus { color: var(--muted); font-style: normal; font-size: 0.8rem; }
.clear {
  width: 30px; height: 30px; border-radius: 10px; font-size: 0.9rem; line-height: 1;
  color: var(--parchment); background: rgba(50, 33, 95, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.clear[hidden] { display: none; }

.rack {
  display: grid; gap: 4px 3px; justify-items: center;
  grid-template-columns: repeat(4, 1fr);
}
.jar {
  width: 48px; height: 64px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  touch-action: none; transition: transform 0.14s ease;
}
.jar:active { transform: translateY(-5px); }
.jar .cork {
  width: 16px; height: 8px; border-radius: 4px 4px 2px 2px;
  background: linear-gradient(180deg, #c08f5c, #92663c);
  margin-bottom: -2px; position: relative; z-index: 2;
}
.jar .glass {
  position: relative; overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.26);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04));
  box-shadow: 0 0 14px -2px var(--c), inset 0 -3px 8px rgba(0, 0, 0, 0.3);
}
.jar .fluid {
  position: absolute; left: 0; right: 0; bottom: 0; height: 70%;
  background: var(--c); border-radius: 40% 40% 0 0 / 14px 14px 0 0;
}
.jar .shine {
  position: absolute; left: 20%; top: 14%; width: 4px; height: 42%;
  border-radius: 3px; background: rgba(255, 255, 255, 0.55); transform: rotate(9deg);
}
.jar.shape-vial  .glass { width: 23px; height: 46px; border-radius: 7px 7px 11px 11px; }
.jar.shape-flask .glass { width: 35px; height: 40px; border-radius: 14px 14px 18px 18px; }
.jar.shape-pot   .glass { width: 37px; height: 33px; border-radius: 9px 9px 13px 13px; }

/* Effects read as a different kind of thing: square plaques, not glassware.
   Grouped, so which features clash is visible before she taps one: everything in
   a group shares a slot and replaces its neighbours. */
.effects { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.effect-group {
  display: grid; grid-template-columns: repeat(3, auto); gap: 5px;
  padding-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.effect-group-reset { border-bottom: 0; padding-bottom: 0; grid-template-columns: auto; }

/* The way back sits at the foot of both benches. */
.bench-foot { display: flex; justify-content: center; }
.reset-glyph { font-size: 1.5rem; color: var(--lamp); line-height: 1; position: relative; }
.effect-reset .effect-face { border-color: rgba(255,196,107,.5); }
.effect-reset.chosen .effect-face { border-color: var(--lamp); box-shadow: 0 0 16px -2px var(--lamp); }
.vial.is-reset { filter: drop-shadow(0 0 16px var(--lamp)) drop-shadow(0 6px 10px rgba(7,4,15,.6)); }

/* The first-colour button: the starting colour, with the way-back arrow on it. */
.colour-reset .effect-face { position: relative; }
.colour-reset .first-drop {
  position: absolute; inset: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, rgba(255,255,255,.5), transparent 45%), var(--c);
  box-shadow: 0 0 12px -2px var(--c);
}
.colour-reset .reset-glyph { color: #1b1233; font-weight: 700; }

.effect { padding: 0; touch-action: none; transition: transform 0.14s ease; }
.effect:active { transform: translateY(-4px); }
.effect-face {
  display: grid; place-items: center; overflow: hidden;
  width: 52px; height: 50px; border-radius: 10px;
  background: linear-gradient(180deg, #3b2a66, #241847);
  border: 2px solid rgba(201, 166, 255, 0.45);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.effect-face img { width: 80%; height: 80%; object-fit: contain; display: block; }
.effect.chosen .effect-face {
  border-color: var(--magic);
  background: linear-gradient(180deg, #4a3a7c, #2e2059);
  box-shadow: 0 0 16px -2px var(--magic);
}

/* ------------------------------------------------------------------ narrow */

/* Smaller iPads in landscape: at 226px the benches reached over the vials. */
@media (max-width: 1100px), (max-height: 560px) {
  #potions { --bench-w: 196px; }
  .jar { width: 40px; height: 56px; }
  .jar.shape-vial  .glass { width: 20px; height: 40px; }
  .jar.shape-flask .glass { width: 30px; height: 35px; }
  .jar.shape-pot   .glass { width: 32px; height: 29px; }
  .effect-face { width: 46px; height: 44px; }
  .bench { padding: 9px; gap: 6px; }
}

/* A phone on its side. Six rows of jars do not fit in 390px, so the jars get
   smaller and go five across, and the back button moves off the colour bench to
   the middle of the ceiling. Nothing she needs may be scrolled out of sight. */
@media (max-height: 560px) and (min-aspect-ratio: 5/6) {
  #potions { --bench-w: 212px; }
  .rack { grid-template-columns: repeat(5, 1fr); gap: 2px; }
  .jar { width: 36px; height: 48px; }
  .jar.shape-vial  .glass { width: 17px; height: 34px; }
  .jar.shape-flask .glass { width: 26px; height: 30px; }
  .jar.shape-pot   .glass { width: 28px; height: 25px; }
  .effect-face { width: 42px; height: 40px; }
  .bench { max-height: calc(100% - 16px); }
  .chamber-back { left: 50%; transform: translateX(-50%); }
}

/* Tall and narrow: the chamber on top, and the two benches side by side beneath
   it, still colour on the left and features on the right. */
@media (max-aspect-ratio: 5/6) {
  #potions {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
  }
  .chamber { grid-column: 1 / -1; grid-row: 1; }
  .bench {
    grid-row: 2; align-self: stretch; max-height: none;
    margin: 0 0 calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .bench-colour { grid-column: 1; margin-left: 10px; }
  .bench-effect { grid-column: 2; margin-right: 10px; margin-left: 8px; }
  .rack { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); }
  /* Bigger than in landscape, but not so big the vials on the moved-in
     pedestals run into the creature. */
  .creature-slot { width: 34%; }
  .vial { width: 13%; }
}