/* ---------- base ---------- */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
:root{
  --bg1:#fff7ef; --bg2:#ffeade; --card:#ffffff; --ink:#2f2a3a; --muted:#8b8296;
  --line:#efe4e9; --accent:#6c4bd8; --shadow:0 6px 0 rgba(0,0,0,.08);
  --slot: clamp(62px, 10vmin, 104px);
  --bowl: clamp(150px, 27vmin, 260px);
  --swatch: clamp(54px, 8.4vmin, 92px);
}
html,body{height:100%;margin:0;overflow:hidden;overscroll-behavior:none;}
body{
  font-family:"SF Pro Rounded","Baloo 2",ui-rounded,-apple-system,"Segoe UI Variable",system-ui,sans-serif;
  color:var(--ink); background:linear-gradient(160deg,var(--bg1),var(--bg2));
  -webkit-user-select:none; user-select:none; touch-action:manipulation;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}

/* ---------- splash ---------- */
#splash{position:fixed;inset:0;z-index:50;display:grid;place-items:center;
  background:linear-gradient(160deg,var(--bg1),var(--bg2));}
#splash.gone{opacity:0;pointer-events:none;transition:opacity .45s ease;}
.splash-card{text-align:center;padding:24px;}
.splash-card h1{font-size:clamp(34px,7vmin,64px);margin:.2em 0 .1em;letter-spacing:-.02em;}
.splash-card p{color:var(--muted);font-size:clamp(15px,2.6vmin,22px);margin:0 0 1.4em;}
.splash-blobs{display:flex;gap:14px;justify-content:center;}
.splash-blobs i{width:clamp(40px,8vmin,74px);aspect-ratio:1;border-radius:50%;background:var(--c);
  box-shadow:inset 0 -6px 12px rgba(0,0,0,.18);animation:bob 2s ease-in-out infinite;}
.splash-blobs i:nth-child(2){animation-delay:.18s} .splash-blobs i:nth-child(3){animation-delay:.36s}
@keyframes bob{50%{transform:translateY(-14px)}}
.big-btn{background:var(--accent);color:#fff;font-size:clamp(20px,3.4vmin,30px);font-weight:800;
  padding:.7em 1.5em;border-radius:999px;box-shadow:0 7px 0 #4d33a5;}
.big-btn:active{transform:translateY(4px);box-shadow:0 3px 0 #4d33a5;}

/* ---------- shell ---------- */
#app{height:100%;display:flex;flex-direction:column;min-height:0;}
header{display:flex;align-items:center;justify-content:space-between;
  padding:6px clamp(10px,2vw,22px) 2px;flex:0 0 auto;}
.brand{display:flex;align-items:center;gap:8px;font-weight:800;color:var(--muted);
  font-size:clamp(13px,2vmin,19px);letter-spacing:.01em;}
.brand .dot{width:1em;height:1em;border-radius:50%;
  background:conic-gradient(#e0202a,#ffe61a,#12a148,#1a4fdb,#7a2a91,#e0202a);}
.tools{display:flex;gap:8px;}
.tool{position:relative;width:clamp(42px,6.4vmin,58px);aspect-ratio:1;border-radius:50%;
  background:var(--card);box-shadow:var(--shadow);font-size:clamp(18px,3vmin,26px);
  display:grid;place-items:center;}
.tool:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(0,0,0,.08);}
.tool[aria-pressed="false"]{opacity:.42;}
.badge{position:absolute;top:-3px;right:-3px;background:var(--accent);color:#fff;
  font-size:11px;font-weight:800;min-width:19px;height:19px;border-radius:999px;
  display:grid;place-items:center;padding:0 5px;}

main{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:clamp(4px,1vh,12px);
  padding:0 clamp(10px,2vw,22px) clamp(8px,1.6vh,18px);}

/* ---------- stage ---------- */
.stage{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:center;}
/* the toggle pins to the top of the stage; everything else centres in what is left,
   so making the toggle bigger never pushes it into the result bubble */
.stage-center{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:clamp(6px,1.4vh,16px);}
.recipe{display:flex;align-items:center;gap:clamp(6px,1.4vmin,16px);}
.op{font-size:clamp(20px,3.4vmin,34px);font-weight:800;color:var(--muted);}
.slot{width:var(--slot);aspect-ratio:1;border-radius:50%;background:#fff;
  border:4px dashed #dfd3dc;display:grid;place-items:center;transition:transform .16s,border-color .2s;}
.slot.filled{border-style:solid;border-color:rgba(0,0,0,.14);box-shadow:inset 0 -7px 14px rgba(0,0,0,.17);}
.slot.filled::after{content:"";}
.slot:not(.filled)::after{content:"+";font-size:calc(var(--slot)*.42);color:#d2c5d0;font-weight:800;line-height:1;}
.slot.optional:not(.filled){opacity:.55;transform:scale(.86);}
.slot.pop{animation:pop .34s cubic-bezier(.3,1.6,.5,1);}
@keyframes pop{0%{transform:scale(.3)}60%{transform:scale(1.14)}100%{transform:scale(1)}}

.result{display:flex;flex-direction:column;align-items:center;gap:clamp(4px,1vh,12px);}
.bowl-wrap{position:relative;display:grid;place-items:center;}
.bowl{width:var(--bowl);aspect-ratio:1;border-radius:50%;background:#fff;
  border:6px solid rgba(0,0,0,.07);box-shadow:inset 0 -18px 34px rgba(0,0,0,.2),0 10px 26px rgba(0,0,0,.1);
  display:grid;place-items:center;transition:background-color .55s ease;}
.bowl-hint{font-size:calc(var(--bowl)*.3);color:#ddd2dc;font-weight:800;}
.bowl.swirl{animation:swirl .75s ease;}
@keyframes swirl{0%{transform:scale(.9) rotate(-8deg)}45%{transform:scale(1.07) rotate(6deg)}100%{transform:scale(1) rotate(0)}}
.sparkles{position:absolute;inset:-20%;pointer-events:none;}
.sparkles i{position:absolute;left:50%;top:50%;font-size:clamp(16px,3vmin,28px);
  animation:spark .95s ease-out forwards;}
@keyframes spark{0%{transform:translate(-50%,-50%) scale(.3);opacity:1}
  100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.15);opacity:0}}

.label{display:flex;align-items:center;gap:.4em;min-height:1.4em;}
.label .emoji{font-size:clamp(24px,4.4vmin,44px);}
.label .name{font-size:clamp(24px,4.6vmin,50px);font-weight:900;letter-spacing:-.02em;text-transform:lowercase;}
.label.empty .name{color:var(--muted);font-weight:700;font-size:clamp(16px,2.8vmin,28px);}
.label.bounce{animation:pop .45s cubic-bezier(.3,1.6,.5,1);}

.actions{display:flex;gap:10px;}
.act{background:var(--card);box-shadow:var(--shadow);border-radius:999px;font-weight:800;
  padding:.5em 1.1em;font-size:clamp(13px,2.2vmin,20px);}
.act:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(0,0,0,.08);}
.act:disabled{opacity:.4;}

/* ---------- palette ---------- */
.palette-wrap{flex:0 0 auto;}
.palette{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(5px,1.1vmin,14px);
  max-width:min(100%,900px);margin:0 auto;}
.paint{display:flex;flex-direction:column;align-items:center;gap:2px;}
.paint .chip{width:100%;max-width:var(--swatch);aspect-ratio:1;border-radius:50%;
  background:var(--c);box-shadow:inset 0 -8px 15px rgba(0,0,0,.2),0 3px 0 rgba(0,0,0,.09);
  border:3px solid rgba(255,255,255,.75);transition:transform .14s;}
.paint:active .chip{transform:scale(.88);}
.paint .nm{font-size:clamp(8px,1.5vmin,13px);font-weight:700;color:var(--muted);
  line-height:1.05;text-align:center;}
.paint.light .chip{border-color:rgba(0,0,0,.1);}

/* landscape: stage left, palette right */
@media (min-aspect-ratio: 1/1) and (min-width: 720px){
  main{flex-direction:row;align-items:stretch;gap:clamp(10px,2vw,28px);}
  .stage{flex:1 1 52%;}
  .palette-wrap{flex:1 1 48%;display:grid;place-items:center;min-width:0;}
  .palette{grid-template-columns:repeat(6,1fr);width:100%;--swatch:clamp(46px,7.6vmin,92px);}
}

/* ---------- sheet ---------- */
.sheet{position:fixed;inset:0;z-index:40;background:rgba(47,42,58,.42);
  display:grid;place-items:end center;animation:fade .2s ease;}
.sheet[hidden]{display:none;}
@keyframes fade{from{opacity:0}}
.sheet-inner{background:var(--card);width:100%;max-width:1000px;max-height:88vh;
  border-radius:26px 26px 0 0;display:flex;flex-direction:column;
  padding:14px clamp(12px,3vw,28px) calc(18px + env(safe-area-inset-bottom));
  animation:up .28s cubic-bezier(.2,.9,.3,1);}
@keyframes up{from{transform:translateY(60px)}}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.sheet-head h2{font-size:clamp(19px,3.4vmin,30px);margin:.2em 0 .4em;}
.sheet-body{overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;}

.found-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:10px;padding:4px 0 8px;}
.found{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;border-radius:14px;}
.found:active{background:var(--line);}
.found .fc{width:clamp(42px,7vmin,62px);aspect-ratio:1;border-radius:50%;background:var(--c);
  box-shadow:inset 0 -6px 12px rgba(0,0,0,.2);border:2px solid rgba(0,0,0,.08);}
.found .fn{font-size:11px;font-weight:700;text-align:center;line-height:1.1;}
.found .fr{font-size:9px;color:var(--muted);text-align:center;line-height:1.1;}
.empty-note{color:var(--muted);padding:18px 4px;font-size:15px;}

.mission-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;padding:4px 0 8px;}
.mission{display:flex;align-items:center;gap:10px;padding:10px;border-radius:16px;
  background:var(--bg1);border:2px solid var(--line);}
.mission.done{background:#e9f8ec;border-color:#bfe6c7;}
.mission .mc{width:42px;height:42px;border-radius:50%;background:var(--c);flex:0 0 auto;
  box-shadow:inset 0 -6px 12px rgba(0,0,0,.2);border:2px solid rgba(0,0,0,.08);}
.mission .mt{font-weight:800;font-size:14px;line-height:1.2;}
.mission .ms{font-size:12px;color:var(--muted);}
.mission.done .ms{color:#2e8b45;font-weight:800;}

/* ---------- flying drop ---------- */
.fly-layer{position:fixed;inset:0;pointer-events:none;z-index:30;}
.fly{position:fixed;border-radius:50%;background:var(--c);
  box-shadow:inset 0 -6px 12px rgba(0,0,0,.2);will-change:transform;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;}
}

/* ---------- 2 / 3 / 4 colour picker ---------- */
.mode-toggle{flex:0 0 auto;display:flex;justify-content:center;
  padding:clamp(2px,0.8vh,10px) 0 clamp(8px,2vh,24px);}
.mode{position:relative;display:flex;align-items:center;gap:0;background:var(--card);
  border-radius:999px;box-shadow:var(--shadow);padding:5px;isolation:isolate;}
.mode-opt{position:relative;z-index:1;width:clamp(48px,6.8vmin,66px);
  line-height:clamp(43px,6.1vmin,59px);text-align:center;font-weight:900;
  font-size:clamp(21px,3.5vmin,32px);color:var(--muted);transition:color .2s,transform .16s;}
.mode-opt:active{transform:translateY(2px);}
.mode-thumb{position:absolute;z-index:0;top:5px;left:5px;
  width:clamp(48px,6.8vmin,66px);height:clamp(43px,6.1vmin,59px);
  border-radius:999px;background:var(--accent);
  transition:transform .24s cubic-bezier(.3,1.5,.5,1);}
body[data-mode="2"] .mode-opt[data-n="2"],
body[data-mode="3"] .mode-opt[data-n="3"],
body[data-mode="4"] .mode-opt[data-n="4"]{color:#fff;}
body[data-mode="3"] .mode-thumb{transform:translateX(100%);}
body[data-mode="4"] .mode-thumb{transform:translateX(200%);}
/* fewer colours hide the slots (and plus signs) they do not use */
body[data-mode="2"] .opt3,
body[data-mode="2"] .opt4,
body[data-mode="3"] .opt4{display:none;}
/* four slots and three plus signs have to fit a phone held upright */
body[data-mode="4"]{--slot:clamp(56px,9vmin,96px);}
body[data-mode="4"] .recipe{gap:clamp(4px,1vmin,14px);}

/* ---------- build stamp ---------- */
/* Sits above the splash too, so the version is readable before tapping in.
   pointer-events:none keeps it from ever swallowing one of her taps. */
.build{position:fixed;z-index:60;right:calc(8px + env(safe-area-inset-right));
  bottom:calc(5px + env(safe-area-inset-bottom));
  font-size:10px;font-weight:600;letter-spacing:.02em;
  color:var(--muted);opacity:.45;pointer-events:none;user-select:none;}