:root {
  --bg: #1a1208;
  --bg2: #2a1c0e;
  --card: #3a2816;
  --text: #fff8ee;
  --muted: #d4c4a8;
  --accent: #c6ff3d;
  --accent2: #ff9f1c;
  --danger: #ff7a7a;
  --bowl-rim: rgba(255,255,255,.55);
  --bowl-glass: rgba(255,255,255,.12);
  --bowl-shadow: #0006;
  --tex-milk: url("textures/milk.png");
  --tex-fish: url("textures/fish.png");
  --tex-sugar: url("textures/sugar.png");
  --tex-groundnut: url("textures/groundnut.png");
  --tex-coconut: url("textures/coconut.png");
  --tex-garri: url("textures/garri-base.png");
  --tex-grain: url("textures/grain-overlay.png");
  --fallback-milk: #f3e7c4;
  --fallback-fish: #c47e35;
  --fallback-sugar: #f7f0d8;
  --fallback-groundnut: #b8844e;
  --fallback-coconut: #f5f2ea;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  font-family: system-ui, "Segoe UI", Roboto, Ubuntu, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); }
body {
  min-height: 100dvh;
  background:
    radial-gradient(120% 80% at 50% -10%, #5a3a18aa, transparent 55%),
    linear-gradient(180deg, var(--bg2), var(--bg));
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
body[data-theme="kitchen"] {
  --bg: #1a1208; --bg2: #2a1c0e; --card: #3a2816; --accent2: #ff9f1c;
}
body[data-theme="market"] {
  --bg: #1a0a12; --bg2: #3a1028; --card: #4a1838;
  --accent: #ffe566; --accent2: #ff5ca8;
  background:
    radial-gradient(100% 70% at 80% 0%, #ff5ca855, transparent 50%),
    radial-gradient(90% 60% at 10% 20%, #ffe56633, transparent 45%),
    linear-gradient(180deg, var(--bg2), var(--bg));
}
body[data-theme="sunset"] {
  --bg: #1a0e22; --bg2: #3a1840; --card: #4a2050;
  --accent: #ffb347; --accent2: #ff6b6b;
  background:
    linear-gradient(180deg, #5a2048 0%, #3a1840 35%, #1a0e22 100%);
}

#hud {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: calc(8px + var(--safe-t)) 12px 8px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #ffffff14;
}
.brand { font-weight: 800; font-size: clamp(16px, 4.5vw, 20px); letter-spacing: .2px; }
.brand b { color: var(--accent); }
.hudr { display: flex; gap: 6px; align-items: center; }
button, .ghost, .big, .mi {
  font: inherit; color: inherit; border: 0; cursor: pointer;
  background: #ffffff14; border-radius: 12px;
}
.ghost {
  min-width: 44px; min-height: 44px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid #ffffff22;
}
.ghost:active, button:active { transform: scale(.97); }
.menub { width: 44px; padding: 0; font-size: 22px; }
.big {
  width: 100%; min-height: 48px; margin-top: 10px; font-weight: 700;
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #000));
  color: #12100a;
}
.big.secondary { background: #ffffff18; color: var(--text); }
.iconbtn { width: 44px; height: 44px; font-size: 18px; background: #ffffff14; }

#app { padding: 12px 14px calc(24px + var(--safe-b)); max-width: 520px; margin: 0 auto; }

/* Home */
.home-hero { text-align: center; margin: 8px 0 16px; }
.home-hero h1 { margin: 0 0 4px; font-size: clamp(22px, 6vw, 28px); }
.home-hero p { margin: 0; color: var(--muted); font-size: 14px; }
.chapter-bar {
  display: flex; gap: 8px; align-items: center; justify-content: space-between;
  margin-bottom: 12px; flex-wrap: wrap;
}
.chapter-bar h2 { margin: 0; font-size: 16px; }
.chapter-nav { display: flex; gap: 6px; }
.level-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
}
.lv {
  aspect-ratio: 1; border-radius: 14px; font-weight: 800; font-size: 14px;
  background: var(--card); border: 1px solid #ffffff18; color: var(--text);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; position: relative;
}
.lv .tick { font-size: 11px; opacity: .9; }
.lv.locked { opacity: .4; }
.lv.current { outline: 2px solid var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
.lv.done { background: color-mix(in srgb, var(--accent) 22%, var(--card)); }

/* Play */
.play-top {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 10px;
}
.play-top h2 { margin: 0; font-size: 18px; }
.play-actions { display: flex; gap: 6px; }
.hint {
  text-align: center; color: var(--muted); font-size: 13px; margin: 0 0 12px;
}
.board {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 16px;
  padding: 12px 4px 20px; min-height: 280px; align-content: center;
}
.bowl-wrap {
  width: 72px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: transparent; border: 0; padding: 0; color: inherit;
}
.bowl-wrap.selected .bowl {
  transform: translateY(-6px) rotate(-8deg);
  filter: drop-shadow(0 10px 12px #0009);
  transform-origin: 50% 90%;
}
.bowl-label { font-size: 11px; color: var(--muted); min-height: 14px; }

.bowl {
  --cap: 4;
  position: relative; width: 64px; height: calc(28px + var(--cap) * 22px);
  transition: transform .18s ease;
}
.bowl-inner {
  position: absolute; left: 6px; right: 6px; bottom: 8px; top: 18px;
  border-radius: 0 0 28px 28px / 0 0 36px 36px;
  overflow: hidden;
  background: var(--bowl-glass);
  box-shadow: inset 0 -6px 12px #0003;
  display: flex; flex-direction: column-reverse;
}
.bowl-glass {
  position: absolute; inset: 0;
  border: 2px solid var(--bowl-rim);
  border-radius: 8px 8px 30px 30px / 10px 10px 40px 40px;
  background: linear-gradient(120deg, #ffffff22, transparent 40%, #ffffff10);
  box-shadow: 0 10px 18px var(--bowl-shadow);
  pointer-events: none;
}
.bowl-rim {
  position: absolute; left: 2px; right: 2px; top: 10px; height: 12px;
  border: 2px solid var(--bowl-rim); border-radius: 50%;
  background: linear-gradient(180deg, #ffffff33, #ffffff08);
  z-index: 2;
}
body[data-bowl="calabash"] {
  --bowl-rim: #8b5a2b;
  --bowl-glass: rgba(120, 70, 30, .18);
}
body[data-bowl="calabash"] .bowl-glass {
  background: linear-gradient(160deg, #c4894a55, #6b3a18aa 55%, #4a281088);
  border-color: #a06a35;
}
body[data-bowl="enamel"] {
  --bowl-rim: #2b6cb0;
  --bowl-glass: rgba(255,255,255,.22);
}
body[data-bowl="enamel"] .bowl-glass {
  background: linear-gradient(160deg, #ffffffcc, #f0f4f8aa 50%, #dce6f0);
  border-color: #2b6cb0;
  border-width: 3px;
}
body[data-bowl="enamel"] .bowl-rim {
  border-color: #2b6cb0; background: #fff;
}

.layer {
  height: 22px; width: 100%; position: relative;
  border-top: 1px solid #ffffff44;
  background-color: var(--fallback-milk);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  image-rendering: auto;
  box-shadow: inset 0 1px 0 #ffffff33, inset 0 -2px 3px #0002;
}
.layer.milk {
  background-color: var(--fallback-milk);
  background-image: var(--tex-milk);
}
.layer.fish {
  background-color: var(--fallback-fish);
  background-image: var(--tex-fish);
}
.layer.sugar {
  background-color: var(--fallback-sugar);
  background-image: var(--tex-sugar);
}
.layer.groundnut {
  background-color: var(--fallback-groundnut);
  background-image: var(--tex-groundnut);
}
.layer.coconut {
  background-color: var(--fallback-coconut);
  background-image: var(--tex-coconut);
}
/* shared wet-garri grain film + depth (textures already include grains) */
.layer::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  opacity: .28;
  background-image: var(--tex-grain);
  background-size: cover;
  background-position: center;
  mix-blend-mode: multiply;
}
.wet { /* water always in the mix — liquid meniscus sheen */
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, #ffffff66 0%, transparent 28%, #6ec6ff14 70%, #0001 100%);
  opacity: .45;
  mix-blend-mode: soft-light;
}

/* Menu / modal */
.menu {
  position: fixed; z-index: 200; min-width: 230px;
  background: color-mix(in srgb, var(--card) 92%, #000);
  border: 1px solid color-mix(in srgb, var(--accent) 50%, #fff3);
  border-radius: 14px; padding: 6px;
  box-shadow: 0 12px 30px #000c;
  display: flex; flex-direction: column;
}
.menu .mi {
  display: flex; align-items: center; gap: 10px;
  background: transparent; color: var(--text); text-align: left;
  padding: 10px 12px; border-radius: 10px; font-weight: 600; font-size: 15px;
  min-height: 44px; text-decoration: none; font-family: inherit;
}
.menu .mi span { width: 22px; text-align: center; }
.menu .mi:hover, .menu .mi:focus-visible { background: #ffffff18; }
.menu .mi:disabled { opacity: .4; }
.menu a.mi { line-height: 1.2; }

.modal {
  position: fixed; inset: 0; z-index: 180; background: #000a;
  display: flex; align-items: flex-end; justify-content: center;
}
.sheet {
  width: 100%; max-width: 430px;
  background: color-mix(in srgb, var(--card) 95%, #000);
  border-radius: 20px 20px 0 0;
  padding: 20px 18px calc(20px + var(--safe-b));
  border-top: 1px solid #ffffff22;
  max-height: 86vh; overflow: auto;
}
.sheet h2 { margin: 0 0 6px; }
.sheet p, .sheet .small, .sheet .sub { opacity: .85; margin: 0 0 8px; font-size: 14px; }
.picker-grid { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 12px 0; }
.picker-opt {
  display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 12px; border-radius: 14px; border: 1px solid #ffffff22;
  background: #ffffff10; color: inherit; font-weight: 600;
}
.picker-opt.sel { outline: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); }
.picker-swatch {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  border: 1px solid #ffffff33;
}
.sw-kitchen { background: linear-gradient(135deg, #2a1c0e, #ff9f1c); }
.sw-market { background: linear-gradient(135deg, #3a1028, #ffe566 50%, #ff5ca8); }
.sw-sunset { background: linear-gradient(135deg, #3a1840, #ffb347); }
.sw-glass { background: linear-gradient(160deg, #fff6, #fff2); border: 2px solid #fff8; }
.sw-calabash { background: linear-gradient(160deg, #c4894a, #6b3a18); }
.sw-enamel { background: linear-gradient(160deg, #fff, #dce6f0); border: 3px solid #2b6cb0; }

.mclist { list-style: none; margin: 8px 0 12px; padding: 0; }
.mclist li {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 7px 0; border-bottom: 1px solid #ffffff14; font-size: 14px;
}
.mclist li.now { background: #ffffff12; border-radius: 8px; }
.mclist .me { font-size: 20px; width: 26px; text-align: center; }
.mclist small { opacity: .75; font-size: 11.5px; }
.mclist a { color: #9cc0ff; }

#toast {
  position: fixed; left: 50%; bottom: calc(24px + var(--safe-b));
  transform: translateX(-50%) translateY(20px);
  background: #111c; color: #fff; padding: 10px 16px; border-radius: 999px;
  font-size: 14px; font-weight: 600; opacity: 0; pointer-events: none;
  transition: .25s ease; z-index: 300; max-width: 90vw; text-align: center;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.win-overlay .sheet { text-align: center; }
.win-overlay .emoji { font-size: 48px; margin: 8px 0; }
.pause-banner {
  text-align: center; padding: 10px; border-radius: 12px;
  background: #0006; margin-bottom: 10px; font-weight: 700;
}

.legend {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  margin: 0 0 8px; font-size: 12px; color: var(--muted);
}
.legend span { display: inline-flex; align-items: center; gap: 4px; }
.dot {
  width: 12px; height: 12px; border-radius: 3px; display: inline-block;
  border: 1px solid #ffffff44;
}
.dot.milk {
  background: var(--fallback-milk) center/cover no-repeat;
  background-image: url("textures/swatch-milk.png");
}
.dot.fish {
  background: var(--fallback-fish) center/cover no-repeat;
  background-image: url("textures/swatch-fish.png");
}
.dot.sugar {
  background: var(--fallback-sugar) center/cover no-repeat;
  background-image: url("textures/swatch-sugar.png");
}
.dot.groundnut {
  background: var(--fallback-groundnut) center/cover no-repeat;
  background-image: url("textures/swatch-groundnut.png");
}
.dot.coconut {
  background: var(--fallback-coconut) center/cover no-repeat;
  background-image: url("textures/swatch-coconut.png");
}

.credits {
  text-align: center; font-size: 12px; color: var(--muted);
  padding: 8px 14px calc(16px + var(--safe-b));
}
.credits a { color: var(--accent); }

@media (min-width: 420px) {
  .bowl-wrap { width: 84px; }
  .bowl { width: 74px; }
  .level-grid { gap: 10px; }
}