:root {
  --bg: #f6efe4;
  --paper: #fffaf2;
  --paper-2: #fff4e4;
  --ink: #3b2b22;
  --muted: #7d6a5e;
  --brown: #9d5d2e;
  --brown-dark: #6e3b1e;
  --gold: #dca34a;
  --green: #66884f;
  --red: #ae4d3d;
  --line: #e7d6c3;
  --shadow: 0 16px 40px rgba(92, 61, 36, .12);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: "Segoe UI", Arial, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 10% 10%, rgba(220,163,74,.12), transparent 24rem),
    linear-gradient(180deg, #fbf6ee 0%, #f3e8da 100%);
}
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
.hidden { display: none !important; }

.app-shell { width: min(1440px, 100%); margin: 0 auto; min-height: 100vh; padding: 20px clamp(16px, 2vw, 32px) 18px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-logo { width: 142px; height: 94px; object-fit: contain; display: block; }
.brand h1 { margin: 0; font-size: 25px; letter-spacing: -.5px; }
.brand p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.top-actions { display: flex; align-items: center; gap: 10px; }
.step-badge { color: var(--muted); background: rgba(255,255,255,.55); border: 1px solid var(--line); padding: 9px 13px; border-radius: 999px; font-size: 13px; }
.sound-toggle { border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 999px; padding: 9px 14px; cursor: pointer; display: flex; align-items: center; gap: 8px; box-shadow: 0 5px 15px rgba(80,50,20,.05); }
.sound-toggle:hover { transform: translateY(-1px); }

.intro-card { min-height: 650px; border: 1px solid var(--line); background: linear-gradient(135deg, #fffaf3 0%, #f5dfbf 100%); border-radius: 32px; box-shadow: var(--shadow); display: grid; grid-template-columns: 1fr 1fr; align-items: center; overflow: hidden; padding: clamp(34px, 5vw, 80px); position: relative; }
.intro-copy { max-width: 610px; z-index: 2; }
.eyebrow { display: inline-block; color: var(--brown); font-size: 12px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 10px; }
.intro-copy h2, .stage-heading h2, .result-hero h2 { margin: 0; line-height: 1; letter-spacing: -1.5px; }
.intro-copy h2 { font-size: clamp(42px, 6vw, 76px); max-width: 600px; }
.intro-copy p { color: var(--muted); line-height: 1.65; font-size: 18px; max-width: 630px; margin: 24px 0 32px; }
.primary, .secondary, .danger { border: 0; border-radius: 13px; cursor: pointer; font-weight: 750; transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease; }
.primary:hover, .secondary:hover, .danger:hover { transform: translateY(-1px); }
.primary { color: #fff; background: linear-gradient(180deg, #a96536, #8e4c25); box-shadow: 0 8px 18px rgba(111,59,30,.22); padding: 12px 18px; }
.primary.big { padding: 15px 24px; font-size: 17px; }
.primary.full, .danger.full { width: 100%; padding: 14px; }
.secondary { padding: 11px 15px; background: #f3e6d6; color: var(--ink); border: 1px solid #e4cdb1; }
.secondary.small { padding: 8px 11px; font-size: 13px; }
.secondary:disabled { opacity: .35; cursor: default; transform: none; }
.danger { background: linear-gradient(180deg, #c25f4d, #9b4033); color: white; padding: 12px 18px; box-shadow: 0 8px 18px rgba(110,37,30,.2); }

.hero-bread { height: 440px; position: relative; display: grid; place-items: center; }
.hero-loaf { width: min(500px, 90%); aspect-ratio: 1.65/1; border-radius: 50% 50% 42% 42% / 57% 57% 43% 43%; background: radial-gradient(circle at 50% 30%, #efc67e 0 15%, #cf8b43 65%, #a75c2d 100%); box-shadow: inset 0 14px 22px rgba(255,245,205,.35), inset 0 -24px 30px rgba(92,42,15,.14), 0 38px 50px rgba(102,54,25,.23); transform: rotate(-5deg); position: relative; }
.hero-loaf i { position: absolute; top: 18%; width: 12%; height: 58%; background: rgba(255,230,173,.65); border-radius: 999px; transform: rotate(24deg); box-shadow: inset -3px 0 0 rgba(117,63,30,.12); }
.hero-loaf i:nth-child(1) { left: 28%; }.hero-loaf i:nth-child(2) { left: 46%; }.hero-loaf i:nth-child(3) { left: 64%; }
.steam { position: absolute; font-size: 70px; color: rgba(120,84,62,.23); top: 0; animation: steam 2.4s ease-in-out infinite; }
.s1 { left: 34%; }.s2 { left: 50%; animation-delay: .5s; }.s3 { left: 64%; animation-delay: 1s; }
@keyframes steam { 0%,100%{transform:translateY(20px) rotate(5deg);opacity:.1}50%{transform:translateY(-12px) rotate(-5deg);opacity:.4} }

.game-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 20px; align-items: start; }
.progress-panel, .stage-card, .result-screen { border: 1px solid var(--line); background: rgba(255,250,242,.95); box-shadow: var(--shadow); }
.progress-panel { border-radius: 22px; padding: 22px 18px; position: sticky; top: 18px; }
.progress-panel h3 { margin: 0 0 16px; font-size: 17px; }
.progress-list { padding: 0; margin: 0; list-style: none; display: grid; gap: 8px; }
.progress-list li { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; padding: 10px; border-radius: 13px; color: #8b776a; transition: .2s; }
.progress-list li > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: #f1e6d8; font-size: 13px; font-weight: 800; }
.progress-list b { display: block; font-size: 14px; }.progress-list small { font-size: 11px; color: #9d8b80; }
.progress-list li.active { color: var(--ink); background: #f4dfbf; }.progress-list li.active > span { color: white; background: var(--brown); }
.progress-list li.done { color: #67805a; }.progress-list li.done > span { background: #dbe7d2; color: #48653e; }
.tip-box { margin-top: 18px; border-radius: 14px; background: #f6efe3; padding: 13px; display: flex; gap: 9px; align-items: flex-start; }
.tip-box p { margin: 0; font-size: 12px; line-height: 1.45; color: var(--muted); }

.stage-card { border-radius: 22px; overflow: hidden; min-height: 720px; }
.game-step { display: none; padding: clamp(22px, 3vw, 38px); animation: fade .25s ease; }
.game-step.active { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(6px);} to {opacity:1; transform:none;} }
.stage-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; padding-bottom: 22px; border-bottom: 1px solid var(--line); margin-bottom: 28px; }
.stage-heading h2 { font-size: clamp(28px, 3vw, 40px); }
.stage-heading p { max-width: 510px; margin: 0; color: var(--muted); line-height: 1.55; font-size: 14px; }

.ingredient-layout { display:grid; grid-template-columns:minmax(0,1fr) 230px; gap:22px; align-items:center; }
.ingredient-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; }
.ingredient-card { background: #fff; border: 1px solid var(--line); border-radius: 17px; padding: 18px 16px 14px; box-shadow: 0 8px 18px rgba(80,48,25,.05); }
.ingredient-icon { font-size: 29px; }.ingredient-card h3 { margin: 10px 0 2px; font-size: 14px; }.ingredient-card .value { font-size: 25px; font-weight: 800; margin-bottom: 13px; }
.recipe-note { position:relative; background:#fff7bd; color:#54452d; padding:35px 22px 24px; min-height:285px; transform:rotate(1.5deg); box-shadow:0 12px 22px rgba(74,51,24,.18); font-family:"Comic Sans MS","Segoe Print",cursive; }
.recipe-note:after { content:""; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(transparent 0 29px,rgba(83,116,150,.13) 30px); }
.recipe-note > * { position:relative; z-index:1; }.recipe-note b { display:block; font-size:20px; margin-bottom:7px; }.recipe-note p { margin:0 0 17px; font-size:13px; line-height:1.35; }
.pin { position:absolute; z-index:2; top:9px; left:50%; width:17px; height:17px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#ff9b89,#9d2f29 65%); box-shadow:2px 4px 5px rgba(55,30,20,.32); transform:translateX(-50%); }
.pin:after { content:""; position:absolute; width:2px; height:16px; background:#777; left:8px; top:13px; transform:rotate(18deg); transform-origin:top; }
.ratio-row { display:grid; grid-template-columns:55px 1fr; gap:8px; align-items:center; margin:10px 0; font-size:13px; }.ratio-row i { display:block; height:9px; width:var(--ratio); min-width:8px; border-radius:9px; background:#9d5d2e; box-shadow:inset 0 -2px rgba(80,40,20,.18); }.recipe-note small { display:block; margin-top:19px; }
input[type="range"] { width: 100%; accent-color: var(--brown); cursor: pointer; }
.range-label { display: flex; justify-content: space-between; color: #9c8b81; font-size: 10px; margin-top: 2px; }
.bowl-preview { width: min(380px, 70%); height: 170px; margin: 35px auto 5px; position: relative; overflow: hidden; }
.bowl-preview:before { content:""; position:absolute; left:6%; right:6%; bottom:3px; height:130px; background:linear-gradient(180deg,#d9e6e7,#a9c5c8); border-radius: 0 0 52% 52% / 0 0 85% 85%; border:4px solid #8ca9ac; border-top:0; box-shadow: inset 0 -18px 20px rgba(67,105,110,.13); }
.bowl-rim { position:absolute; left:2%; right:2%; top:26px; height:25px; border:5px solid #8ca9ac; border-radius:50%; background:#d9e6e7; z-index:2; }
.bowl-mix { position:absolute; left:10%; right:10%; top:39px; height:72px; border-radius:50%; background:#e6c98d; z-index:3; transition:.25s; }
.stage-actions { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-top: 27px; padding-top: 19px; border-top: 1px solid var(--line); }
.microcopy { color: var(--muted); font-size: 12px; }

.workbench { position: relative; border: 1px solid #d9c7b2; border-radius: 18px; overflow: hidden; background: linear-gradient(90deg, rgba(137,84,42,.04) 1px, transparent 1px), linear-gradient(#f6dfbd, #e9c99f); background-size: 48px 48px, auto; box-shadow: inset 0 9px 25px rgba(111,65,32,.08); }
.workbench canvas { width: 100%; height: auto; display:block; cursor: grab; touch-action:none; }
.workbench canvas:active { cursor: grabbing; }.workbench.compact canvas { max-height: 340px; }
.interaction-hint { position:absolute; left:50%; bottom:18px; transform:translateX(-50%); background:rgba(63,43,29,.82); color:white; padding:9px 13px; border-radius:999px; font-size:12px; pointer-events:none; transition:.2s; }
.meter-row { margin-top: 18px; display:grid; grid-template-columns: 190px 1fr 55px; gap:16px; align-items:center; }
.meter-row b, .meter-row small { display:block; }.meter-row small { color:var(--muted); margin-top:3px; font-size:11px; }
.meter { position:relative; height:13px; background:#eadccd; border-radius:999px; overflow:hidden; }
.meter > div { height:100%; width:0%; background:linear-gradient(90deg,#b4753e,#6f8e55); border-radius:inherit; transition:width .08s linear; }
.meter .sweet-zone { position:absolute; left:64%; width:22%; top:0; bottom:0; border-left:2px solid rgba(255,255,255,.85); border-right:2px solid rgba(255,255,255,.85); pointer-events:none; }

.grain-options { display:grid; grid-template-columns:repeat(5, 1fr); gap:10px; }
.grain-option { border:1px solid var(--line); background:#fff; border-radius:16px; padding:15px 8px; cursor:pointer; color:var(--ink); min-height:128px; }
.grain-option:hover { transform:translateY(-1px); }.grain-option.selected { outline:3px solid rgba(157,93,46,.23); border-color:var(--brown); background:#fff8ec; }
.grain-option b, .grain-option small { display:block; }.grain-option small { color:var(--muted); font-size:10px; margin-top:4px; }.grain-art { display:grid; place-items:center; height:48px; font-size:28px; }.grain-art.none { color:#cbb7a4; }
.grain-preview-wrap { margin-top:24px; border-radius:18px; overflow:hidden; border:1px solid var(--line); background:#f1d5aa; }
.grain-preview-wrap canvas { width:100%; display:block; }
.cut-toolbar { display:flex; justify-content:space-between; align-items:center; margin-top:14px; color:var(--muted); font-size:13px; }

.oven-layout { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(250px,.55fr); gap:20px; }
.oven { background:linear-gradient(180deg,#49443f,#272422); border-radius:20px; padding:16px; box-shadow:0 14px 30px rgba(30,24,20,.25), inset 0 2px 0 rgba(255,255,255,.12); }
.oven-top { height:38px; color:#cfc6bd; font-size:11px; letter-spacing:3px; display:flex; align-items:center; justify-content:space-between; padding:0 4px 10px; }
.oven-light { width:12px; height:12px; border-radius:50%; background:#5b5752; box-shadow:none; transition:.2s; }.oven-light.on { background:#f19d3d; box-shadow:0 0 16px #f19d3d; }
.oven-window { position:relative; background:#1c1a18; border:5px solid #161412; border-radius:11px; overflow:hidden; }.oven-window canvas { display:block; width:100%; height:auto; }
.oven-crest { display:block; width:176px; height:96px; object-fit:contain; margin:8px auto -9px; filter:drop-shadow(0 2px 2px rgba(0,0,0,.28)); }
.heat-shimmer { position:absolute; inset:0; opacity:0; background:repeating-linear-gradient(90deg,transparent 0 12px,rgba(255,190,100,.03) 12px 17px); pointer-events:none; }.heat-shimmer.on { opacity:1; animation:heat .8s linear infinite; }
@keyframes heat { from{transform:translateY(8px)}to{transform:translateY(-8px)} }
.oven-controls { display:grid; gap:12px; align-content:start; }.control-card { border:1px solid var(--line); border-radius:16px; background:#fff; padding:17px; }.control-card label, .control-card > span { display:block; color:var(--muted); font-size:12px; margin-bottom:4px; }.control-card strong { font-size:28px; display:block; margin-bottom:11px; }.time-card strong { font-variant-numeric:tabular-nums; font-size:35px; }.time-card small { color:var(--muted); }
.bake-note { background:#f6eee3; border:1px solid var(--line); border-radius:13px; padding:11px; color:var(--muted); font-size:12px; line-height:1.4; }
.oven-note { position:relative; padding:30px 16px 15px; background:#fff7bd; color:#54452d; box-shadow:0 8px 16px rgba(74,51,24,.16); transform:rotate(-1deg); font-family:"Comic Sans MS","Segoe Print",cursive; }
.oven-note b { display:block; font-size:16px; }.oven-note p { margin:7px 0 12px; font-size:12px; line-height:1.45; }.oven-note p strong { font-size:inherit; display:inline; margin:0; }.oven-note small { display:block; text-align:center; margin-top:5px; font-size:10px; }.heat-scale { height:12px; display:grid; grid-template-columns:repeat(4,1fr); overflow:hidden; border-radius:9px; border:1px solid rgba(92,57,28,.2); }.heat-scale i:nth-child(1){background:#8bbbd1}.heat-scale i:nth-child(2){background:#e5cb65}.heat-scale i:nth-child(3){background:#e68a3c}.heat-scale i:nth-child(4){background:#a83d2d}.heat-scale .target { box-shadow:inset 0 0 0 3px #fff,0 0 0 2px #69432b; z-index:1; }

.result-screen { border-radius:24px; display:grid; grid-template-columns:minmax(0,1.35fr) minmax(330px,.65fr); overflow:hidden; }
.result-hero { position:relative; min-height:720px; padding:45px; background:linear-gradient(160deg,#f5dfbe 0%,#edc995 55%,#d9a767 100%); overflow:hidden; }.result-hero h2 { font-size:clamp(42px,5vw,72px); max-width:680px; }.result-hero p { color:#705541; font-size:16px; max-width:600px; }.result-hero canvas { width:100%; height:auto; display:block; margin-top:24px; filter:drop-shadow(0 25px 28px rgba(94,51,22,.22)); }
.score-orb { position:absolute; right:35px; bottom:35px; width:120px; height:120px; border-radius:50%; background:rgba(255,250,240,.94); display:grid; place-items:center; align-content:center; box-shadow:0 12px 28px rgba(82,44,19,.16); }.score-orb span { font-size:44px; font-weight:900; line-height:1; }.score-orb small { color:var(--muted); }
.result-details { padding:40px 32px; background:#fffaf2; }.result-details h3 { margin:0 0 20px; font-size:24px; }.score-list { display:grid; gap:10px; }.score-item { display:grid; grid-template-columns:105px 1fr 44px; gap:10px; align-items:center; }.score-item span { font-size:13px; }.score-item .bar { height:9px; background:#eadccd; border-radius:99px; overflow:hidden; }.score-item .bar i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#b8723c,#7b945f); }.score-item b { text-align:right; font-size:13px; }
.bread-notes { margin:25px 0; padding:16px; border-radius:14px; background:#f5ecdf; color:#6e5c50; line-height:1.55; font-size:13px; }.bread-notes ul { margin:7px 0 0; padding-left:18px; }
footer { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; color:#9a887b; font-size:11px; padding:18px 4px 0; } footer .footer-brand { grid-column:2; white-space:nowrap; } footer nav { grid-column:3; justify-self:end; display:flex; gap:15px; } footer a { color:inherit; text-underline-offset:3px; }
.legal-shell { width:min(900px,calc(100% - 28px)); margin:28px auto; }.legal-top { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:20px; }.legal-top a { color:var(--brown-dark); font-weight:700; text-decoration:none; }.legal-card { background:rgba(255,250,242,.97); border:1px solid var(--line); border-radius:24px; box-shadow:var(--shadow); padding:clamp(25px,5vw,55px); }.legal-card h1 { margin:0 0 28px; font-size:clamp(36px,6vw,58px); }.legal-card h2 { margin:30px 0 10px; font-size:21px; }.legal-card h3 { margin:22px 0 8px; font-size:16px; }.legal-card p,.legal-card li { color:#67564b; line-height:1.65; }.legal-card ul { padding-left:20px; }.legal-card a { color:var(--brown-dark); }.legal-card address { font-style:normal; line-height:1.7; color:#67564b; }

@media (max-width: 1050px) {
  .game-layout { grid-template-columns:1fr; }.progress-panel { position:static; }.progress-list { grid-template-columns:repeat(6,1fr); }.progress-list li { grid-template-columns:1fr; text-align:center; padding:8px 3px; }.progress-list li > span { margin:auto; }.progress-list small { display:none; }.tip-box { display:none; }
  .ingredient-layout { grid-template-columns:1fr; }.recipe-note { width:min(360px,100%); justify-self:center; }.ingredient-grid { grid-template-columns:repeat(2,1fr); }.grain-options { grid-template-columns:repeat(3,1fr); }.result-screen { grid-template-columns:1fr; }.result-hero { min-height:auto; }.result-details { padding-bottom:40px; }
}
@media (max-width: 760px) {
  .app-shell { padding:12px; }.topbar { align-items:flex-start; }.step-badge { display:none; }.sound-toggle #soundLabel { display:none; }.sound-toggle { padding:10px 12px; }.intro-card { grid-template-columns:1fr; min-height:700px; padding:30px 22px; }.intro-copy h2 { font-size:48px; }.intro-copy p { font-size:15px; }.hero-bread { height:280px; }.stage-heading { display:block; }.stage-heading p { margin-top:12px; }.progress-panel { overflow:auto; }.progress-list { min-width:610px; }.ingredient-grid { grid-template-columns:1fr 1fr; }.grain-options { grid-template-columns:1fr 1fr; }.oven-layout { grid-template-columns:1fr; }.stage-actions { align-items:flex-end; }.microcopy { max-width:55%; }.meter-row { grid-template-columns:1fr; }.meter-row > span { display:none; }.result-hero, .result-details { padding:28px 20px; }.result-hero h2 { font-size:45px; }.score-orb { width:92px; height:92px; right:18px; bottom:18px; }.score-orb span { font-size:34px; }
}
@media (max-width:560px) { .brand-logo { width:112px; height:76px; } .oven-crest { width:150px; height:84px; } footer { grid-template-columns:1fr; gap:10px; text-align:center; } footer .footer-brand,footer nav { grid-column:1; justify-self:center; } }