:root {
  --cream: #FFF3E2;
  --ink: #5B4A4A;
  --font: ui-rounded, "SF Pro Rounded", "Nunito", "Quicksand", system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: var(--cream);
  font-family: var(--font); color: var(--ink);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  overscroll-behavior: none;
}
body { position: fixed; inset: 0; touch-action: none; }
#app { position: absolute; inset: 0; transition: opacity .25s ease; }
#app.fade { opacity: 0; }
svg { display: block; }
svg.stage { width: 100%; height: 100%; overflow: visible; touch-action: none; }

/* ---------- κουμπιά πάνω ---------- */
.round {
  position: fixed; z-index: 10; width: 68px; height: 68px; border-radius: 50%;
  border: 0; padding: 0; display: grid; place-items: center; cursor: pointer;
  background: rgba(255,255,255,.92); box-shadow: 0 6px 16px rgba(120,80,60,.18), inset 0 -3px 0 rgba(0,0,0,.06);
  transition: transform .15s ease;
}
.round:active { transform: scale(.9); }
.round svg { width: 36px; height: 36px; }
#back { top: calc(18px + env(safe-area-inset-top)); left: calc(18px + env(safe-area-inset-left)); }
#mute { top: calc(18px + env(safe-area-inset-top)); right: calc(18px + env(safe-area-inset-right)); }
#back[hidden] { display: none; }
#mute .off { display: none; }
#mute.is-off .on { display: none; }
#mute.is-off .off { display: block; }

/* ---------- αρχική ---------- */
.home {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(24px + env(safe-area-inset-top)) 28px calc(24px + env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 12% 18%, #FFE3C4 0, transparent 38%),
    radial-gradient(circle at 88% 82%, #D8ECFA 0, transparent 40%),
    radial-gradient(circle at 80% 12%, #F6DDF0 0, transparent 32%),
    var(--cream);
  overflow: hidden;
}
.home .bubble {
  position: absolute; border-radius: 50%; opacity: .5; animation: drift 14s ease-in-out infinite;
}
.logo { display: flex; align-items: center; gap: 18px; margin-bottom: clamp(14px, 4vh, 40px); }
.logo svg { width: clamp(64px, 10vmin, 96px); height: auto; filter: drop-shadow(0 6px 10px rgba(150,100,70,.2)); }
.logo h1 { margin: 0; font-size: clamp(54px, 9vmin, 88px); font-weight: 900; letter-spacing: 1px; color: #F08A7C; text-shadow: 0 4px 0 #fff, 0 8px 14px rgba(150,100,70,.18); }
.grid {
  display: grid; gap: clamp(14px, 2.6vmin, 28px); width: min(100%, 980px, calc((100vh - 230px) / .64));
  width: min(100%, 980px, calc((100dvh - 230px) / .64));
  grid-template-columns: repeat(3, 1fr);
}
@media (orientation: portrait) {
  .grid { grid-template-columns: repeat(2, 1fr); width: min(100%, 640px, calc((100vh - 250px) / 1.4)); width: min(100%, 640px, calc((100dvh - 250px) / 1.4)); }
}
.card {
  position: relative; border: 0; padding: 0; cursor: pointer; font: inherit; color: var(--ink);
  border-radius: 38px; aspect-ratio: 1 / 0.92; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  box-shadow: 0 10px 0 rgba(0,0,0,.07), 0 18px 28px rgba(120,80,60,.16);
  transition: transform .15s ease, box-shadow .15s ease;
  animation: cardIn .6s both cubic-bezier(.3,1.5,.5,1);
}
.card:active { transform: translateY(6px) scale(.97); box-shadow: 0 4px 0 rgba(0,0,0,.07), 0 8px 14px rgba(120,80,60,.14); }
.card svg { width: 58%; height: auto; }
.card span { font-size: clamp(20px, 3.4vmin, 30px); font-weight: 900; }

/* ---------- σκηνές ---------- */
.item { cursor: grab; }
.item.held { cursor: grabbing; }
.item .inner { transform-box: fill-box; transform-origin: center; transition: transform .15s ease; }
.item.held .inner { transform: scale(1.14) rotate(-5deg); filter: drop-shadow(0 12px 10px rgba(0,0,0,.18)); }
.item.snap { transition: transform .45s cubic-bezier(.3,1.5,.5,1); }
.press { animation: press .3s ease; transform-box: fill-box; transform-origin: center; }
.bounce { animation: bounce .6s ease; transform-box: fill-box; transform-origin: 50% 100%; }
.particle { animation: pfly 1.2s cubic-bezier(.2,.7,.3,1) forwards; }
.pop-in { animation: popin .5s cubic-bezier(.3,1.8,.5,1); transform-box: fill-box; transform-origin: center; }
.sway { animation: sway 4s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.breathe { animation: breathe 3.6s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.float { animation: float 3.2s ease-in-out infinite; }
.twinkle { animation: twinkle 2.4s ease-in-out infinite; }
.zzz { animation: zzz 3.2s ease-in-out infinite; opacity: 0; }

@keyframes cardIn { from { transform: translateY(40px) scale(.8); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes drift { 0%,100% { transform: translate(0,0); } 50% { transform: translate(24px,-30px); } }
@keyframes press { 0% { transform: scale(1); } 40% { transform: scale(.88); } 100% { transform: scale(1); } }
@keyframes bounce { 0%,100% { transform: scale(1,1); } 30% { transform: scale(1.04,.95); } 60% { transform: scale(.98,1.04); } }
@keyframes pfly { 0% { transform: translate(0,0) scale(.3) rotate(0); opacity: 1; } 100% { transform: translate(var(--dx),var(--dy)) scale(1) rotate(var(--rot)); opacity: 0; } }
@keyframes popin { 0% { transform: scale(.2); } 100% { transform: scale(1); } }
@keyframes sway { 0%,100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
@keyframes breathe { 0%,100% { transform: scale(1,1); } 50% { transform: scale(1.015,1.025); } }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes twinkle { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes zzz { 0% { transform: translate(0,0) scale(.6); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(40px,-90px) scale(1.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .float, .twinkle, .sway, .breathe { animation: none; } }