/* ───────────────────────────────────────────────────────────────
   Brewtendo 3DS simulator — lumo.boo
   Pip on the top screen (800×480), the way to lumo.boo/nds on the
   touch screen (640×480). The colours are lumo's own, and the Dark
   theme uses lumo's dark ones.
   Nothing here uses a blur filter: glows are plain gradients, and
   everything that moves is a transform or an opacity.
   ─────────────────────────────────────────────────────────────── */

.lm-top, .lm-bottom {
  --lm-bg: #fbf3ea;
  --lm-ink: #3d2a20;
  --lm-soft: #7a5f50;
  --lm-line: rgba(61, 42, 32, 0.13);
  --lm-card: #fffaf4;
  --lm-glass: rgba(255, 251, 246, 0.78);
  --lm-glow-a: rgba(255, 214, 150, 0.62);   /* the two pools of light behind everything */
  --lm-glow-b: rgba(250, 170, 180, 0.44);
  --lm-halo: rgba(255, 127, 131, 0.46);     /* Pip's own glow */
  --lm-halo-2: rgba(255, 150, 130, 0.16);
  --lm-floor: rgba(255, 255, 255, 0.66);
  --lm-floor-edge: rgba(255, 255, 255, 0.95);
  --lm-shade: rgba(223, 113, 128, 0.36);
  --lm-speck-a: #ffad5c;
  --lm-speck-b: #ff9b8e;
  --lm-link: #a92f4d;
  --lm-link-bg: #ffe2d6;
  --lm-ring: #ee5a2e;
  --lm-light: linear-gradient(118deg, #ffd07a, #ffb27c 36%, #fb9c98 70%, #f790b2);
  overflow: hidden;
  background: var(--lm-bg);
  color: var(--lm-ink);
  letter-spacing: -0.01em;
}
.scr[data-theme="dark"] .lm-top, .scr[data-theme="dark"] .lm-bottom {
  --lm-bg: #0a0706;
  --lm-ink: #f7ece4;
  --lm-soft: #bba395;
  --lm-line: rgba(255, 236, 222, 0.16);
  --lm-card: #1d1714;
  --lm-glass: rgba(34, 27, 23, 0.86);
  --lm-glow-a: rgba(255, 150, 90, 0.24);
  --lm-glow-b: rgba(240, 110, 150, 0.18);
  --lm-halo: rgba(255, 120, 120, 0.5);
  --lm-halo-2: rgba(255, 130, 110, 0.2);
  --lm-floor: rgba(255, 236, 222, 0.07);
  --lm-floor-edge: rgba(255, 236, 222, 0.16);
  --lm-shade: rgba(255, 127, 131, 0.3);
  --lm-speck-a: #ffc68c;
  --lm-speck-b: #ffadb6;
  --lm-link: #ffb9a8;
  --lm-link-bg: rgba(255, 150, 120, 0.18);
  --lm-ring: #ff9a6b;
}

/* ── Top screen: the room Pip is in ─────────────────────────────── */
/* Each layer shifts a different amount with the 3D slider, far ones against the pointer */
.lm-sky {
  position: absolute; inset: -34px;
  background:
    radial-gradient(540px 410px at 10% 6%, var(--lm-glow-a), transparent 72%),
    radial-gradient(580px 470px at 95% 98%, var(--lm-glow-b), transparent 72%);
  transform: translate(calc(var(--px, 0) * var(--depth, 0) * -16px), calc(var(--py, 0) * var(--depth, 0) * -10px));
  transition: transform 0.2s ease-out;
}
.lm-dust {
  position: absolute; inset: 0;
  transform: translate(calc(var(--px, 0) * var(--depth, 0) * -8px), calc(var(--py, 0) * var(--depth, 0) * -5px));
  transition: transform 0.2s ease-out;
}
.lm-dust i {
  position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, var(--lm-speck-a) 0 32%, transparent 70%);
  animation: lm-rise var(--d) linear var(--w) infinite;
}
.lm-dust i:nth-child(even) { background: radial-gradient(circle, var(--lm-speck-b) 0 32%, transparent 70%); }
@keyframes lm-rise {
  0%   { opacity: 0; transform: translateY(20px) scale(0.6); }
  22%  { opacity: 0.9; }
  78%  { opacity: 0.55; }
  100% { opacity: 0; transform: translateY(-70px) scale(1); }
}
.lm-floor {
  position: absolute; left: -90px; right: -90px; top: 362px; height: 240px;
  border-radius: 50% 50% 0 0 / 74px 74px 0 0;
  background: linear-gradient(var(--lm-floor), transparent 64%);
  box-shadow: inset 0 1.5px 0 var(--lm-floor-edge);
  transform: translate(calc(var(--px, 0) * var(--depth, 0) * -4px), 0);
  transition: transform 0.2s ease-out;
}

/* ── Pip ────────────────────────────────────────────────────────── */
.lm-pip {
  position: absolute; left: 4px; top: 24px; width: 432px; height: 432px;
  transform: translate(calc(var(--px, 0) * var(--depth, 0) * 9px), calc(var(--py, 0) * var(--depth, 0) * 6px));
  transition: transform 0.2s ease-out;
}
.lm-pip.is-in { animation: lm-in 0.62s cubic-bezier(0.2, 1.45, 0.4, 1) backwards; }
@keyframes lm-in { from { opacity: 0; transform: translateY(80px) scale(0.5); } }

.lm-shadow {
  position: absolute; left: 124px; top: 344px; width: 196px; height: 32px; border-radius: 50%;
  background: radial-gradient(closest-side, var(--lm-shade), transparent);
  animation: lm-shadow 2.8s infinite;
}
.lm-bounce, .lm-sway, .lm-act { position: absolute; inset: 0; }
/* pip.svg's own bounce and sway, with the same timings. Rising slows down, falling speeds up */
.lm-bounce { animation: lm-bounce 2.8s infinite; }
.lm-sway   { animation: lm-sway 4.2s ease-in-out infinite; }
.lm-act    { transform-origin: 50% 80%; }   /* hops and talking squash from Pip's feet */
@keyframes lm-bounce {
  0%   { transform: translateY(0);     animation-timing-function: cubic-bezier(0.3, 0.7, 0.5, 1); }
  28%  { transform: translateY(-12px); animation-timing-function: cubic-bezier(0.5, 0, 0.7, 0.3); }
  52%  { transform: translateY(0);     animation-timing-function: cubic-bezier(0.3, 0.7, 0.5, 1); }
  72%  { transform: translateY(-5px);  animation-timing-function: cubic-bezier(0.5, 0, 0.7, 0.3); }
  100% { transform: translateY(0); }
}
@keyframes lm-shadow {
  0%   { transform: scaleX(1);    opacity: 1;    animation-timing-function: cubic-bezier(0.3, 0.7, 0.5, 1); }
  28%  { transform: scaleX(0.78); opacity: 0.55; animation-timing-function: cubic-bezier(0.5, 0, 0.7, 0.3); }
  52%  { transform: scaleX(1);    opacity: 1;    animation-timing-function: cubic-bezier(0.3, 0.7, 0.5, 1); }
  72%  { transform: scaleX(0.9);  opacity: 0.8;  animation-timing-function: cubic-bezier(0.5, 0, 0.7, 0.3); }
  100% { transform: scaleX(1);    opacity: 1; }
}
@keyframes lm-sway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(3deg); } }

.lm-halo {
  position: absolute; inset: -4%; border-radius: 50%;
  background: radial-gradient(closest-side, var(--lm-halo) 0 34%, var(--lm-halo-2) 66%, transparent);
  animation: lm-breathe 5.6s ease-in-out infinite alternate;
}
@keyframes lm-breathe { to { transform: scale(1.07); } }
.lm-pip svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.lm-sparks { color: var(--lm-speck-a); }
.scr[data-theme="dark"] .lm-sparks { color: #fff8ee; }

/* looks: a glance down at the touch screen, and brows up when something catches its interest */
.lm-pip.is-peek .lm-eyes  { animation: lm-peek 2.6s ease-in-out; }
.lm-pip.is-peek .lm-brows { animation: lm-peek-brows 2.6s ease-in-out; }
.lm-pip.is-keen .lm-brows { animation: lm-keen 0.7s ease-out; }
@keyframes lm-peek       { 12%, 82% { transform: translate(-2px, 10px); } }
@keyframes lm-peek-brows { 12%, 82% { transform: translate(-1px, 5px); } }
@keyframes lm-keen       { 25%, 60% { transform: translateY(-10px); } }

/* ── What Pip says ──────────────────────────────────────────────── */
.lm-bubble {
  position: absolute; left: 414px; top: 214px; max-width: 362px;
  transform: translate(calc(var(--px, 0) * var(--depth, 0) * 18px), calc(-50% + var(--py, 0) * var(--depth, 0) * 11px));
  transition: transform 0.2s ease-out;
}
.lm-says {
  position: relative; padding: 20px 28px 23px; border-radius: 34px;
  background: var(--lm-card);
  box-shadow: inset 0 0 0 1.5px var(--lm-line), 0 26px 46px -30px rgba(150, 60, 40, 0.55);
  transform-origin: 0 50%; opacity: 0; transform: scale(0.7);
}
.lm-bubble.is-on .lm-says { opacity: 1; transform: none; }
.lm-says.is-pop { animation: lm-pop 0.26s cubic-bezier(0.3, 1.5, 0.5, 1); }
@keyframes lm-pop { from { opacity: 0; transform: scale(0.82); } }
/* the tail: a corner of the bubble turned toward Pip */
.lm-says::before {
  content: ''; position: absolute; left: -12px; top: 50%; width: 26px; height: 26px; margin-top: -13px;
  background: var(--lm-card); border-radius: 0 0 0 7px;
  box-shadow: inset 1.5px -1.5px 0 var(--lm-line);
  transform: rotate(45deg);
}
.lm-line { position: relative; margin: 0; font-size: 29px; line-height: 1.36; text-wrap: balance; }
.lm-line i { font-style: normal; opacity: 0; }
.lm-line i.on { opacity: 1; }
/* an address Pip mentions: a row of its own, and a real link */
.lm-url {
  display: inline-block; margin: 6px 0 7px -6px; padding: 1px 16px 4px; border-radius: 17px;
  font-size: 36px; line-height: 1.28; letter-spacing: -0.02em; white-space: nowrap;
  color: var(--lm-link); text-decoration: none; cursor: pointer;
  background: transparent; transition: background 0.25s;
  -webkit-user-drag: none;
}
.lm-url.on { background: var(--lm-link-bg); }
.lm-url:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.lm-sr { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── The spark Pip sends down to the touch screen ───────────────── */
.lm-toss, .lm-catch { position: absolute; width: 44px; height: 44px; opacity: 0; pointer-events: none; }
.lm-toss b, .lm-catch b { position: absolute; inset: 0; }
.lm-toss b::before, .lm-catch b::before {            /* its glow */
  content: ''; position: absolute; inset: -55%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 176, 120, 0.7), rgba(255, 150, 130, 0.25) 55%, transparent);
}
.lm-toss b::after, .lm-catch b::after {              /* the spark: the same four points as the ones around Pip */
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle, #fff 0 18%, #ffd07a 44%, #ff8f8a);
  -webkit-clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
          clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}
.lm-toss { left: 332px; top: 298px; }
.lm-toss.is-go   { animation: lm-toss-x 0.64s linear both; }       /* sideways at a steady speed… */
.lm-toss.is-go b { animation: lm-toss-y 0.64s both; }              /* …while it rises, then falls off the screen */
@keyframes lm-toss-x {
  0%   { opacity: 0; transform: translateX(0); }
  10%  { opacity: 1; }
  100% { opacity: 1; transform: translateX(62px); }
}
@keyframes lm-toss-y {
  0%   { transform: translateY(0) rotate(0) scale(0.4);            animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1); }
  32%  { transform: translateY(-44px) rotate(130deg) scale(1);     animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.5); }
  100% { transform: translateY(210px) rotate(400deg) scale(1); }
}
/* the touch screen is 80px narrower on each side, so x = 336 here is under x = 416 above */
.lm-catch { left: 314px; top: -46px; }
.lm-catch.is-go { animation: lm-catch 0.24s cubic-bezier(0.5, 0, 0.9, 0.6) both; }
@keyframes lm-catch {
  0%   { opacity: 1; transform: translateY(0) rotate(0); }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(122px) rotate(170deg) scale(0.5); }
}

/* ── Touch screen ───────────────────────────────────────────────── */
.lm-bottom { display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 0 26px; }
/* Pip's light coming over the hinge, and the same pink pool as above */
.lm-bottom::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(460px 250px at 26% -70px, var(--lm-glow-a), transparent 72%),
    radial-gradient(520px 400px at 100% 104%, var(--lm-glow-b), transparent 72%);
}
.lm-item {
  --lm-edge: inset 0 0 0 1.5px var(--lm-line);
  position: relative; flex: none; display: flex; align-items: center; margin: 0; border: 0;
  color: inherit; text-decoration: none; text-align: left; outline: none; cursor: pointer;
  box-shadow: var(--lm-sel, 0 0 0 0 transparent), var(--lm-edge), var(--lm-lift, 0 0 0 0 transparent);
  transition: transform 0.12s;
  -webkit-user-drag: none;
}
.lm-item.is-sel { --lm-sel: 0 0 0 4px var(--lm-bg), 0 0 0 8px var(--lm-ring); }
.lm-item:focus-visible { --lm-sel: 0 0 0 4px var(--lm-bg), 0 0 0 8px var(--lm-ring); }   /* its own rule: older browsers drop a whole rule over :focus-visible */
.lm-item:active { transform: scale(0.985); }
.lm-item .glyph { flex: none; }

/* the way to the new simulator. It starts plain; Pip's spark lights it */
.lm-door {
  height: 138px; padding: 0 30px 0 38px; gap: 18px; border-radius: 46px; overflow: hidden; isolation: isolate;
  background: var(--lm-glass);
}
.lm-door::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--lm-light); opacity: 0; transition: opacity 0.55s ease;
}
.lm-door::after {
  content: ''; position: absolute; left: 265px; top: 50%; width: 90px; height: 90px; margin-top: -45px; z-index: -1;
  border-radius: 50%; opacity: 0; transform: scale(0);
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.55) 62%, transparent);
}
.lm-door.is-lit {
  --lm-edge: inset 0 0 0 1.5px rgba(255, 255, 255, 0.6);
  --lm-lift: 0 20px 42px -16px rgba(255, 130, 100, 0.85);
  color: #3d2a20;
}
.lm-door.is-lit::before { opacity: 1; }
.lm-door.is-rippling::after { animation: lm-ripple 0.8s ease-out; }
@keyframes lm-ripple { 0% { opacity: 1; transform: scale(0.2); } 100% { opacity: 0; transform: scale(9); } }
.lm-door-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lm-door-text small { font-size: 22px; opacity: 0.9; }
.lm-door-text b { font-weight: normal; font-size: 50px; line-height: 1.12; letter-spacing: -0.03em; white-space: nowrap; }
.lm-door .key { flex: none; visibility: hidden; }
.lm-door.is-sel .key { visibility: visible; }
.lm-door .glyph { width: 40px; height: 40px; opacity: 0.8; }

/* what's better there. Choosing one makes Pip talk about it */
.lm-perks { display: flex; flex-direction: column; gap: 8px; }
.lm-perk {
  width: 100%; height: 54px; padding: 0 24px; gap: 14px; border-radius: 27px;
  background: var(--lm-glass); font-size: 24px;
}
.lm-perk svg { flex: none; width: 20px; height: 20px; color: var(--lm-speck-b); }
.lm-perk:nth-child(odd) svg { color: var(--lm-speck-a); }
.lm-perk span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lm-perk.is-sel { background: var(--lm-card); }

.lm-site { height: 54px; padding: 0 22px 0 24px; gap: 12px; border-radius: 27px; font-size: 24px; }
.lm-site b { font-weight: normal; }
.lm-site span { flex: 1; min-width: 0; color: var(--lm-soft); font-size: 22px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lm-site .glyph { width: 26px; height: 26px; color: var(--lm-soft); }

@media (prefers-reduced-motion: reduce) {
  .lm-dust i { animation: none; opacity: 0.5; }
  .lm-bounce, .lm-sway, .lm-shadow, .lm-halo, .lm-pip.is-in, .lm-says.is-pop,
  .lm-pip.is-peek .lm-eyes, .lm-pip.is-peek .lm-brows, .lm-pip.is-keen .lm-brows { animation: none; }
  .lm-sky, .lm-dust, .lm-floor, .lm-pip, .lm-bubble, .lm-item { transition: none; }
  .lm-door::before { transition: none; }
}