/* ===== Papa's Bakeria — modern kids UI ===== */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

:root {
  --bg-1:#EEF2FF;
  --bg-2:#FDF2F8;
  --card:#FFFFFF;
  --ink:#1F2937;
  --ink-soft:#6B7280;
  --violet:#7C3AED;
  --violet-dk:#5B21B6;
  --pink:#EC4899;
  --pink-dk:#BE185D;
  --green:#22C55E;
  --green-dk:#15803D;
  --amber:#F59E0B;
  --amber-soft:#FEF3C7;
  --red:#EF4444;
  --red-dk:#B91C1C;
  --blue:#3B82F6;
  --blue-dk:#1D4ED8;
  --shadow-card:0 10px 30px rgba(31,41,55,.10);
  --shadow-soft:0 4px 14px rgba(31,41,55,.08);
  --r-lg:24px;
  --r-md:16px;
}

html, body { height:100%; }
body {
  font-family:'Arial Rounded MT Bold','Trebuchet MS','Segoe UI',system-ui,sans-serif;
  background:
    radial-gradient(600px 400px at 85% -5%, #FCE7F3 0%, transparent 60%),
    radial-gradient(700px 500px at -10% 20%, #E0E7FF 0%, transparent 60%),
    linear-gradient(180deg, var(--bg-1), var(--bg-2));
  background-attachment:fixed;
  color:var(--ink);
  overflow-x:hidden;
  user-select:none;
  touch-action:manipulation;
}

.screen { display:none; min-height:100vh; padding:16px; position:relative; }
.screen.active { display:flex; flex-direction:column; align-items:center; justify-content:flex-start; }

/* ---------- Start screen ---------- */
#screen-start.active { justify-content:center; }
.start-card {
  background:var(--card);
  border-radius:32px;
  box-shadow:var(--shadow-card);
  padding:36px 28px 28px;
  max-width:420px; width:100%;
  text-align:center;
  position:relative; z-index:2;
}
.logo-pie {
  font-size:76px;
  display:inline-block;
  animation:bounce 2s ease-in-out infinite;
  filter:drop-shadow(0 8px 12px rgba(236,72,153,.25));
}
@keyframes bounce { 0%,100%{transform:translateY(0) rotate(-3deg)} 50%{transform:translateY(-10px) rotate(3deg)} }
.game-title {
  font-size:36px; font-weight:700;
  background:linear-gradient(90deg,var(--violet),var(--pink));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  line-height:1.15; margin:8px 0 4px;
  letter-spacing:-.5px;
}
.tagline { font-size:16px; color:var(--ink-soft); margin-bottom:18px; }
.best-row {
  background:var(--amber-soft); color:#92400E;
  border-radius:999px; padding:8px 14px;
  font-weight:600; margin-bottom:16px; font-size:15px;
  display:inline-block;
}

.big-btn {
  display:block; width:100%;
  font-family:inherit; font-size:19px; font-weight:600;
  padding:15px; margin:10px 0;
  border:none; border-radius:var(--r-md);
  cursor:pointer;
  color:#fff;
  letter-spacing:.2px;
  transition:transform .1s ease, filter .1s ease;
}
.big-btn:active { transform:translateY(3px); filter:brightness(.95); }
.play-btn { background:var(--green); box-shadow:0 4px 0 var(--green-dk), var(--shadow-soft); }
.play-btn:active { box-shadow:0 1px 0 var(--green-dk); }
.how-btn  { background:var(--blue); box-shadow:0 4px 0 var(--blue-dk), var(--shadow-soft); }
.how-btn:active { box-shadow:0 1px 0 var(--blue-dk); }
.pour-btn { background:var(--pink); box-shadow:0 4px 0 var(--pink-dk), var(--shadow-soft); font-size:18px; }
.pour-btn:active { box-shadow:0 1px 0 var(--pink-dk); }
.stop-btn { background:var(--red); box-shadow:0 4px 0 var(--red-dk), var(--shadow-soft); font-size:24px; }
.stop-btn:active { box-shadow:0 1px 0 var(--red-dk); }
.small-btn {
  font-family:inherit; font-size:15px; font-weight:600;
  background:#F3F4F6; color:var(--ink);
  border:none; border-radius:999px;
  padding:9px 18px; cursor:pointer; margin-top:6px;
  transition:background .15s ease;
}
.small-btn:active { background:#E5E7EB; }

.clouds span { position:absolute; font-size:48px; opacity:.5; animation:drift 26s linear infinite; }
.clouds span:nth-child(1){ top:8%;  animation-delay:0s; }
.clouds span:nth-child(2){ top:20%; animation-delay:-9s; font-size:36px; }
.clouds span:nth-child(3){ top:4%;  animation-delay:-17s; font-size:58px; }
@keyframes drift { from{left:-90px} to{left:105%} }

/* ---------- Panels / overlays ---------- */
.panel {
  background:var(--card); border-radius:28px;
  box-shadow:var(--shadow-card); padding:26px 24px;
  max-width:430px; width:100%;
  text-align:center;
}
.panel h2 { font-size:24px; font-weight:700; margin-bottom:12px; }
.how-list { text-align:left; font-size:16px; line-height:2; padding-left:22px; color:var(--ink); }
.how-list b { color:var(--violet-dk); }
.how-tip { margin-top:12px; font-weight:600; color:var(--green-dk); font-size:15px; }

.overlay {
  display:none; position:fixed; inset:0; z-index:50;
  background:rgba(31,41,55,.45);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  align-items:center; justify-content:center; padding:16px;
}
.overlay.active { display:flex; }
.overlay.active .panel { animation:rise .3s cubic-bezier(.34,1.4,.64,1); }
@keyframes rise { from{transform:translateY(24px) scale(.96); opacity:0} to{transform:none; opacity:1} }
.result-face { font-size:60px; }
.stars { font-size:32px; letter-spacing:6px; margin:6px 0 12px; }
.result-list { list-style:none; text-align:left; font-size:15px; line-height:2; margin:0 auto 10px; max-width:300px; color:var(--ink); }
.result-coins { font-size:26px; font-weight:700; color:var(--green-dk); }
.day-coins,.day-total { font-size:17px; margin:4px 0; color:var(--ink-soft); }
.day-coins b,.day-total b { color:var(--ink); }
.day-msg { margin:12px 0; font-weight:600; color:var(--violet-dk); }

/* ---------- Game HUD ---------- */
#screen-game { max-width:480px; margin:0 auto; width:100%; }
.hud { display:flex; gap:8px; align-items:center; width:100%; margin-bottom:12px; }
.hud-chip {
  background:var(--card); border-radius:999px;
  padding:7px 14px; font-weight:600; font-size:14px;
  box-shadow:var(--shadow-soft);
}
.hud-mute {
  margin-left:auto; font-size:17px; background:var(--card);
  border:none; border-radius:999px; padding:7px 12px; cursor:pointer;
  box-shadow:var(--shadow-soft);
}

/* ---------- Order strip ---------- */
.order-strip { display:flex; gap:10px; align-items:flex-start; width:100%; margin-bottom:10px; }
.cust-face {
  font-size:40px; background:var(--card);
  border-radius:22px; width:66px; height:66px; flex:0 0 66px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-soft);
}
.order-bubble {
  background:var(--card); border-radius:20px; border-top-left-radius:6px;
  padding:10px 14px; flex:1;
  box-shadow:var(--shadow-soft);
}
.order-bubble::before { display:none; }
.cust-name { font-size:12px; color:var(--ink-soft); font-weight:600; text-transform:uppercase; letter-spacing:.4px; }
.order-text { font-size:15px; font-weight:500; line-height:1.55; }
.order-text .tag {
  display:inline-block; background:var(--amber-soft); color:#92400E;
  border-radius:8px; padding:0 7px; margin:1px 0; font-weight:600;
}

/* ---------- Pie stage ---------- */
.pie-stage { text-align:center; margin:4px 0 10px; }
.pie { width:148px; height:148px; margin:0 auto; position:relative; }
.pie-crust {
  position:absolute; inset:0; border-radius:50%;
  background:#F2C14E; border:8px dashed #D19A2A;
  box-shadow:0 10px 24px rgba(210,154,42,.28);
  transform:scale(0);
  transition:transform .4s cubic-bezier(.34,1.56,.64,1), background .3s ease, border-color .3s ease;
}
.pie-crust.on { transform:scale(1); }
.pie-fill {
  position:absolute; inset:20px; border-radius:50%;
  background:#E24B4A; opacity:0; transform:scale(.4);
  transition:all .4s ease;
}
.pie-fill.on { transform:scale(1); }
.pie-tops {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  gap:6px; font-size:30px; flex-wrap:wrap; padding:26px;
}
.pie-face { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:34px; }
.pie.baked .pie-crust { background:#D99A34; }
.pie.burnt .pie-crust { background:#6B4A20; border-color:#3E2A10; }
.pie.raw .pie-crust   { background:#F8DFA0; }
.station-label {
  display:inline-block; margin-top:10px;
  background:linear-gradient(90deg,var(--violet),var(--pink));
  color:#fff; border-radius:999px;
  padding:6px 18px; font-weight:600; font-size:14px;
  letter-spacing:.3px;
  box-shadow:var(--shadow-soft);
}

/* ---------- Work area / stations ---------- */
.work-area { width:100%; }
.station { display:none; text-align:center; }
.station.active { display:block; animation:pop .25s ease; }
@keyframes pop { from{transform:scale(.96);opacity:0} to{transform:scale(1);opacity:1} }
.st-hint { font-size:16px; font-weight:600; margin-bottom:12px; }

.opt-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:12px; }
.opt-btn {
  font-family:inherit; background:var(--card);
  border:2px solid transparent; border-radius:20px;
  padding:12px 8px; cursor:pointer;
  box-shadow:var(--shadow-soft);
  font-size:14px; font-weight:600; color:var(--ink);
  transition:transform .1s ease, border-color .15s ease, box-shadow .15s ease;
}
.opt-btn:active { transform:scale(.96); }
.opt-btn .emo { display:block; font-size:34px; margin-bottom:2px; }
.opt-btn.sel {
  border-color:var(--violet);
  box-shadow:0 0 0 4px rgba(124,58,237,.15), var(--shadow-soft);
}

/* ---------- Meters ---------- */
.meter {
  position:relative; height:30px;
  border-radius:999px; background:#E5E7EB; overflow:hidden;
  margin:0 auto 14px; max-width:340px;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.06);
}
.meter-target {
  position:absolute; top:0; bottom:0; background:rgba(34,197,94,.35);
  border-left:3px solid var(--green); border-right:3px solid var(--green);
}
.meter-fill {
  position:absolute; left:0; top:0; bottom:0; width:0%;
  background:linear-gradient(90deg,var(--pink),var(--violet));
  border-radius:999px 0 0 999px;
  transition:width .05s linear;
}
.bake-needle {
  position:absolute; top:2px; bottom:2px; width:8px; left:0;
  background:var(--red); border-radius:6px;
  box-shadow:0 0 8px rgba(239,68,68,.5);
}

/* ---------- Oven ---------- */
.oven {
  background:var(--card); border-radius:24px;
  padding:16px; max-width:340px; margin:0 auto 14px;
  box-shadow:var(--shadow-card);
}
.oven-window {
  background:#111827; border-radius:16px;
  height:88px; display:flex; align-items:center; justify-content:center;
  margin-bottom:14px; overflow:hidden;
  box-shadow:inset 0 0 20px rgba(245,158,11,.35);
}
.oven-pie { font-size:52px; animation:cook 1s ease-in-out infinite; }
@keyframes cook { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
.bake-meter { margin-bottom:0; background:#FEE2C7; }

/* ---------- Small screens / a11y ---------- */
@media (max-width:380px) {
  .game-title { font-size:30px; }
  .pie { width:124px; height:124px; }
}
@media (prefers-reduced-motion:reduce) {
  .logo-pie,.oven-pie,.clouds span { animation:none; }
}
button:focus-visible { outline:3px solid var(--violet); outline-offset:2px; }