/* =========================================================================
   Magic Ebook — home page
   Pixel-art retro fantasy title screen.
   Sections: 1) Tokens  2) Reset  3) Layout/frame  4) Title  5) Wizard
             6) Panel  7) Cauldron button  8) Keyframes  9) Reduced motion
   ========================================================================= */

/* ------------------------------------------------------------------ */
/* 1) Design tokens — tweak these to retheme or retune                 */
/* ------------------------------------------------------------------ */
@font-face {
  font-family: "Magic Ebook Arcade";
  src: url("assets/font-packs/MagicEbookArcade/MagicEbookArcade-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Magic Ebook Pixel";
  src: url("assets/font-packs/MagicEbookPixel/MagicEbookPixel-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* palette (sampled from the art) */
  --navy-900: #1a204b;
  --navy-800: #f5edd8;          /* light frame center */
  --navy-700: #7f75c5;
  --panel-bg: rgba(255, 247, 219, 0.88);
  --gold:     #f0d27a;
  --gold-dim: #b8862f;
  --cyan:     #5fe3ec;
  --cyan-soft:#8af0f4;
  --purple:   #775ed0;
  --purple-deep:#362862;
  --cream:    #312747;
  --ink:      #06060f;

  /* type */
  --font-display: "Magic Ebook Arcade", monospace;  /* headings / buttons */
  --font-body:    "Magic Ebook Pixel", monospace;   /* prose / inputs    */

  /* layout / safe area inside the forest frame */
  --content-max: 380px;
  --safe-top:    calc(clamp(42px, 7vh, 82px) + env(safe-area-inset-top));
  --safe-bottom: calc(clamp(30px, 5vh, 68px)  + env(safe-area-inset-bottom));
  --safe-side:   8%;
  --stack-gap:   clamp(10px, 2.2vh, 18px);

  /* component sizes */
  --title-w:    min(84%, 326px);
  --wizard-h:   clamp(112px, 18.5vh, 168px);
  --cauldron-w: clamp(150px, 45%, 186px);

  /* ---- animation tuning (speed/intensity) ---- */
  --wiz-bob-dist:   7px;     /* how far the wizard floats up   */
  --wiz-bob-speed:  3.4s;    /* float cycle                    */
  --wiz-sway-deg:   1.3deg;  /* hat / staff sway angle         */
  --wiz-sway-speed: 5.4s;    /* sway cycle (longer = calmer)   */
  --wiz-glow-speed: 3.4s;
  --spark-speed:    2.6s;    /* staff sparkle twinkle          */
  --blink-every:    6.2s;    /* time between blinks            */
  --bubble-speed:   2.4s;    /* cauldron bubbling              */
  --fire-speed:     1.6s;

  /* blink overlay — nudge these to sit the eyelid on the wizard's eyes */
  --blink-x: 46%;  --blink-y: 39.5%;
  --blink-w: 16%;  --blink-h: 3.2%;
  --blink-color: #efd9b0;
}

/* ------------------------------------------------------------------ */
/* 2) Reset                                                            */
/* ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--navy-900);
  color: var(--cream);
  font-family: var(--font-body);
  -webkit-font-smoothing: none;
  overflow: hidden;                 /* the .screen handles its own scroll */
}
img { display: block; max-width: 100%; }

/* crisp pixel-art scaling everywhere */
.pixel {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------------ */
/* 3) Layout + forest-frame background                                 */
/* ------------------------------------------------------------------ */
.app { min-height: 100%; }

.screen {
  position: relative;
  height: 100dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: safe center;     /* centre when it fits, scroll when it doesn't */
  padding: var(--safe-top) var(--safe-side) var(--safe-bottom);

  background-color: var(--navy-800);
  background-image: url("assets/forest-frame-light.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  image-rendering: pixelated;
}

.safe {
  width: min(var(--content-max), 88vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--stack-gap);
}

/* gentle staggered entrance (disabled under reduced motion) */
.brand, .wizard, .panel, .cauldron {
  animation: rise-in .6s both ease-out;
}
.wizard   { animation-delay: .08s; }
.panel    { animation-delay: .16s; }
.cauldron { animation-delay: .24s; }

/* ------------------------------------------------------------------ */
/* 4) Title                                                            */
/* ------------------------------------------------------------------ */
.brand { margin: 0; width: var(--title-w); }
.title {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 4px 0 rgba(54, 40, 98, .55));
}

/* ------------------------------------------------------------------ */
/* 5) Wizard mascot + simulated motion                                 */
/* ------------------------------------------------------------------ */
.wizard {
  position: relative;
  height: var(--wizard-h);
  /* sway pivots near the feet so the hat tip + staff swing like a wave */
  transform-origin: 50% 96%;
  animation: wiz-sway var(--wiz-sway-speed) ease-in-out infinite;
  will-change: transform;
}
.wizard__sprite {
  height: 100%;
  width: auto;
  transform-origin: 50% 100%;
  animation: wiz-bob var(--wiz-bob-speed) ease-in-out infinite;
  will-change: transform;
}

/* soft cyan halo behind the staff orb (top-left of the sprite) */
.wizard__glow {
  position: absolute;
  left: -6%; top: 0%;
  width: 38%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(95,227,236,.65), rgba(95,227,236,0) 68%);
  filter: none;
  opacity: .55;
  animation: wiz-glow var(--wiz-glow-speed) ease-in-out infinite;
  pointer-events: none;
}

/* blink overlay — a tiny eyelid-coloured bar flicked over the eyes */
.wizard__blink {
  position: absolute;
  left: var(--blink-x); top: var(--blink-y);
  width: var(--blink-w); height: var(--blink-h);
  background: var(--blink-color);
  opacity: 0;
  animation: wiz-blink var(--blink-every) steps(1, end) infinite;
  pointer-events: none;
}

/* pixel sparkles near the staff orb */
.wizard__sparkles { position: absolute; inset: 0; pointer-events: none; }
.spark {
  position: absolute;
  width: 6px; height: 6px;
  background: var(--cyan-soft);
  opacity: 0;
  animation: spark-twinkle var(--spark-speed) ease-in-out infinite;
}
.spark::before {            /* makes a 4-point pixel star */
  content: ""; position: absolute; inset: 0;
  background: inherit;
  transform: rotate(45deg);
}
.spark--cyan   { left: 8%;  top: 6%;  }
.spark--gold   { left: 20%; top: 1%;  background: var(--gold);  width: 5px; height: 5px; animation-delay: .8s; }
.spark--white  { left: 2%;  top: 16%; background: #fff;         width: 4px; height: 4px; animation-delay: 1.5s; }
.spark--cyan-sm{ left: 16%; top: 13%; width: 4px; height: 4px;  animation-delay: 2.0s; }

/* ------------------------------------------------------------------ */
/* 6) Upload / input panel                                             */
/* ------------------------------------------------------------------ */
.panel {
  width: 100%;
  background: var(--panel-bg);
  border: 3px solid var(--gold);
  border-radius: 8px;
  /* stacked rings = chunky pixel frame */
  box-shadow:
    0 0 0 3px var(--purple-deep),
    0 0 0 5px rgba(0,0,0,.55),
    0 8px 0 5px rgba(0,0,0,.35);
  padding: clamp(12px, 3vw, 18px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.panel__prompt {
  margin: 0 0 2px;
  font-family: var(--font-body);
  font-size: clamp(1.15rem, 4.4vw, 1.45rem);
  line-height: 1.05;
  color: var(--cream);
  text-align: center;
  text-shadow: 0 1px 0 rgba(255,255,255,.65);
}

.field__input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1.35rem;
  color: var(--purple-deep);
  background: rgba(255, 252, 238, .82);
  border: 2px solid var(--purple);
  border-radius: 5px;
  padding: 9px 12px;
  outline: none;
}
.field__input::placeholder { color: rgba(54, 40, 98, .55); }
.field__input:hover { border-color: var(--cyan); }
.field__input:focus-visible {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(240,210,122,.35);
}

.divider {
  display: flex; align-items: center; gap: 10px;
  color: var(--gold);
  font-family: var(--font-display);
  font-size: .62rem;
  letter-spacing: 1px;
}
.divider::before, .divider::after {
  content: ""; flex: 1; height: 2px;
  background: linear-gradient(90deg, transparent, var(--purple), transparent);
}

.drop {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 10px;
  text-align: center;
  padding: 10px 12px;
  border: 2px dashed rgba(138,240,244,.45);
  border-radius: 6px;
  background: rgba(255, 252, 238, .52);
  transition: border-color .15s, background .15s;
}
.drop.is-drag {                     /* active drag-over state */
  border-color: var(--cyan);
  background: rgba(95,227,236,.12);
}
.drop__icon { width: 34px; height: auto; }
.drop__text {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.15rem;
  color: rgba(54, 40, 98, .82);
}
.drop__file {
  flex-basis: 100%;        /* filename drops to its own line when present */
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--cyan-soft);
}

.btn-file {
  font-family: var(--font-display);
  font-size: .58rem;
  letter-spacing: .5px;
  color: var(--ink);
  background: var(--gold);
  border: 0;
  border-radius: 4px;
  padding: 9px 14px;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--gold-dim);
  transition: transform .1s, box-shadow .1s, filter .1s;
}
.btn-file:hover { filter: brightness(1.06); }
.btn-file:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--gold-dim); }
.btn-file:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }

/* ------------------------------------------------------------------ */
/* 7) Cauldron action button                                           */
/* ------------------------------------------------------------------ */
.cauldron {
  position: relative;
  width: var(--cauldron-w);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  transform-origin: 50% 62%;        /* scale around the pot, not the gems */
  transition: transform .12s ease, filter .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.cauldron__img { width: 100%; height: auto; }
.cauldron:hover  { transform: scale(1.05); filter: brightness(1.05); }
.cauldron:active { transform: scale(.97); }
.cauldron:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 6px;
  border-radius: 10px;
}

/* word overlaid on the cauldron belly */
.cauldron__label {
  position: absolute;
  left: 0; right: 0; top: 58%;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(.62rem, 2.6vw, .8rem);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  text-shadow:
     2px 0 0 var(--ink), -2px 0 0 var(--ink),
     0 2px 0 var(--ink), 0 -2px 0 var(--ink),
     0 3px 4px rgba(0,0,0,.6);
  pointer-events: none;
}

/* warm fire flicker under the pot */
.cauldron__fire {
  position: absolute;
  left: 50%; bottom: 2%;
  width: 46%; height: 22%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 80%, rgba(255,176,58,.85), rgba(255,120,30,0) 70%);
  mix-blend-mode: screen;
  opacity: .5;
  animation: fire-flicker var(--fire-speed) ease-in-out infinite;
  pointer-events: none;
}

/* rising bubbles + twinkles over the potion */
.cauldron__fx { position: absolute; inset: 0; pointer-events: none; }
.bub {
  position: absolute;
  width: 6px; height: 6px;
  background: var(--cyan-soft);
  border-radius: 1px;
  opacity: 0;
  animation: bubble-rise var(--bubble-speed) ease-in infinite;
}
.bub--1 { left: 42%; bottom: 56%; }
.bub--2 { left: 54%; bottom: 58%; width: 5px; height: 5px; animation-delay: .8s; }
.bub--3 { left: 48%; bottom: 55%; width: 4px; height: 4px; animation-delay: 1.5s; }
.cstar {
  position: absolute;
  width: 6px; height: 6px;
  opacity: 0;
  animation: spark-twinkle calc(var(--bubble-speed) * 1.1) ease-in-out infinite;
}
.cstar::before { content:""; position:absolute; inset:0; background: inherit; transform: rotate(45deg); }
.cstar--gold { left: 30%; top: 8%;  background: var(--gold); animation-delay: .4s; }
.cstar--cyan { left: 64%; top: 12%; background: var(--cyan-soft); animation-delay: 1.2s; }

/* extra burst while "casting" (toggled briefly from JS) */
.cauldron.is-casting { animation: cast-pop .5s ease; }
.cauldron.is-casting .bub,
.cauldron.is-casting .cstar { animation-duration: .9s; }

.status {
  margin: 2px 0 0;
  min-height: 1.2em;
  font-family: var(--font-body);
  font-size: 1.15rem;
  text-align: center;
  color: #126f9b;
  text-shadow: 0 1px 0 rgba(255,255,255,.7);
}
.status.is-error { color: #ffb4b4; }

/* ------------------------------------------------------------------ */
/* 8) Keyframes                                                        */
/* ------------------------------------------------------------------ */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes wiz-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(calc(var(--wiz-bob-dist) * -1)); }
}
@keyframes wiz-sway {
  0%, 100% { transform: rotate(calc(var(--wiz-sway-deg) * -1)); }
  50%      { transform: rotate(var(--wiz-sway-deg)); }
}
@keyframes wiz-glow {
  0%, 100% { opacity: .42; transform: scale(.94); }
  50%      { opacity: .8;  transform: scale(1.06); }
}
/* quick double-blink near the end of each cycle */
@keyframes wiz-blink {
  0%, 92%      { opacity: 0; }
  93%, 95%     { opacity: .92; }
  96%          { opacity: 0; }
  97%, 98.5%   { opacity: .92; }
  99%, 100%    { opacity: 0; }
}
@keyframes spark-twinkle {
  0%   { opacity: 0; transform: scale(.4)  translateY(0); }
  45%  { opacity: 1; transform: scale(1)   translateY(-3px); }
  100% { opacity: 0; transform: scale(.35) translateY(-9px); }
}
@keyframes bubble-rise {
  0%   { opacity: 0; transform: translateY(2px)  scale(.6); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-16px) scale(1); }
}
@keyframes fire-flicker {
  0%, 100% { opacity: .42; transform: translateX(-50%) scaleY(.92); }
  50%      { opacity: .68; transform: translateX(-50%) scaleY(1.08); }
}
@keyframes cast-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* ------------------------------------------------------------------ */
/* 9) Responsive — phone-framed presentation on larger screens         */
/* ------------------------------------------------------------------ */
@media (min-width: 760px) {
  .app {
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
      radial-gradient(120% 90% at 50% 0%, #12183f 0%, var(--navy-900) 60%);
  }
  .screen {
    height: min(94dvh, 900px);
    aspect-ratio: 864 / 1821;        /* keep the frame's true proportions */
    width: auto;
    max-width: 440px;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 0 2px rgba(0,0,0,.4);
  }
  body { overflow: auto; }
}

/* ------------------------------------------------------------------ */
/* 10) Respect reduced-motion                                          */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .brand, .wizard, .wizard__sprite, .wizard__glow, .wizard__blink,
  .spark, .panel, .cauldron, .cauldron__fire, .bub, .cstar {
    animation: none !important;
  }
  .wizard__glow { opacity: .55; }          /* hold a static gentle glow */
  .cauldron:hover  { transform: none; filter: brightness(1.08); }
  .cauldron:active { transform: none; }
}