/* LUMO — design tokens, type, buttons, icons. Shared by the big screen and the phone. */
:root {
  --ink: #2b1d45;
  --ink-2: #6a5c86;
  --paper: #fffaf1;
  --card: #ffffff;
  --line: rgba(43, 29, 69, 0.1);
  --sun: #ffb020;
  --coral: #ff7a59;
  --leaf: #5cc84a;
  --sky: #3aa0ff;
  --rose: #ff5fa2;
  --violet: #8b6cff;
  --good: #2fbf71;
  --bad: #ff6b6b;
  --zone: #ffb020;
  --r: 1.6rem;
  --r-s: 1rem;
  --lift: 0 0.35rem 0 rgba(43, 29, 69, 0.1), 0 0.9rem 2.2rem rgba(43, 29, 69, 0.14);
  --lift-s: 0 0.2rem 0 rgba(43, 29, 69, 0.1), 0 0.5rem 1.2rem rgba(43, 29, 69, 0.12);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  font-size: clamp(14px, 1.15vmin + 7px, 27px);
  color-scheme: light;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  font-family: 'Nunito', system-ui, sans-serif; font-weight: 700; color: var(--ink);
  background: var(--paper); overflow: hidden; user-select: none; -webkit-user-select: none;
  touch-action: manipulation;
}
h1, h2, h3, h4, .h, .btn, .logo, .card, .fred { font-family: 'Fredoka', 'Nunito', system-ui, sans-serif; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
input, select { font: inherit; color: var(--ink); }
[hidden] { display: none !important; }

/* ------------------------------------------------------------- buttons --- */
.btn {
  --b: var(--card); --t: var(--ink); --edge: rgba(43, 29, 69, 0.14);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 3.2rem; padding: 0.6rem 1.6rem; border-radius: 999px;
  background: var(--b); color: var(--t); font-weight: 600; font-size: 1.2rem; letter-spacing: 0.01em;
  box-shadow: 0 0.3rem 0 var(--edge), 0 0.7rem 1.4rem rgba(43, 29, 69, 0.14);
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease), filter 0.2s;
}
.btn:hover { filter: brightness(1.04); transform: translateY(-2px); }
.btn:active, .btn.pressed { transform: translateY(0.25rem); box-shadow: 0 0.05rem 0 var(--edge), 0 0.3rem 0.6rem rgba(43, 29, 69, 0.14); }
.btn-primary { --b: linear-gradient(180deg, #ffcf4a, #ffa21a); --t: #4a2a00; --edge: #d9810a; }
.btn-ghost { --b: rgba(255, 255, 255, 0.85); }
.btn.small { min-height: 2.4rem; font-size: 0.9rem; padding: 0.3rem 1rem; }

/* --------------------------------------------------------------- icons --- */
.i { display: inline-block; width: 1.5rem; height: 1.5rem; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.i-home { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 11.2 12 3.5l9 7.7V20a1.5 1.5 0 0 1-1.5 1.5H15v-6H9v6H4.5A1.5 1.5 0 0 1 3 20z'/%3E%3C/svg%3E"); }
.i-ear { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 9v6h4l5 4.5v-15L8 9zm12.5 3a4.5 4.5 0 0 0-2.5-4v8a4.5 4.5 0 0 0 2.5-4zM14 3.2v2.1a7 7 0 0 1 0 13.4v2.1a9 9 0 0 0 0-17.6z'/%3E%3C/svg%3E"); }
.i-sound { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 18V6l10-2v12'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='16' cy='16' r='3'/%3E%3Cpath d='M9 6l10-2v3L9 9z'/%3E%3C/svg%3E"); }
.i-phone { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h10a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm0 3v13h10V5zm5 14.2a1.1 1.1 0 1 0 0 .01z'/%3E%3C/svg%3E"); }
.i-lock { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2h-1V7a5 5 0 0 0-5-5zm-3 8V7a3 3 0 0 1 6 0v3z'/%3E%3C/svg%3E"); }
.i-album { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3h12a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm7 4.2-1.3 2.7-3 .4 2.2 2.1-.5 3 2.6-1.4 2.7 1.4-.5-3 2.2-2.1-3-.4z'/%3E%3C/svg%3E"); }

/* ------------------------------------------------------------ art + fx --- */
.art { display: block; width: 100%; height: auto; object-fit: contain; pointer-events: none; filter: drop-shadow(0 0.35rem 0.4rem rgba(43, 29, 69, 0.18)); }
svg.art { height: 100%; overflow: visible; }
.art-missing { display: grid; place-items: center; font-size: 2rem; color: var(--ink-2); }

@keyframes popIn { from { opacity: 0; transform: scale(0.6) translateY(1rem); } to { opacity: 1; transform: none; } }
.pop-in { animation: popIn 0.5s var(--spring) both; }
@keyframes shake { 10%, 90% { transform: translateX(-3px); } 20%, 80% { transform: translateX(6px); } 30%, 50%, 70% { transform: translateX(-10px); } 40%, 60% { transform: translateX(10px); } }
.shake { animation: shake 0.5s both; }
@keyframes wiggle { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
.wiggle { animation: wiggle 0.9s ease-in-out infinite; }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12%); } }
.bounce { animation: bounce 0.9s var(--ease) infinite; }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.pulse { animation: pulse 1.4s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}