/* Fredoka (SIL Open Font License 1.1), served with the game so no third-party font host is needed */
@font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(../fonts/fredoka-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(../fonts/fredoka-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --ink: #2b2118;
  --cream: #fff6e6;
  --paper: #fffdf6;
  --accent: #ff7a45;
  --accent2: #ffd43b;
  --good: #51cf66;
  --bad: #ff6b6b;
  --blue: #4dabf7;
  --shadow: 0 6px 0 rgba(0, 0, 0, 0.25);
  --font: 'Fredoka', 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden;
  background: #2b2118; color: var(--ink); font-family: var(--font);
  user-select: none; -webkit-user-select: none; touch-action: manipulation; overscroll-behavior: none;
}
canvas#game, canvas#gl { position: fixed; inset: 0; display: block; touch-action: none; }
#ui { position: fixed; inset: 0; pointer-events: none; }
#ui > * { pointer-events: auto; }
.hidden { display: none !important; }

/* ---------- screens ---------- */
.screen {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: safe center; touch-action: pan-y; -webkit-overflow-scrolling: touch; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  overflow-y: auto; animation: fadein 0.25s ease;
}
.screen.dim { background: rgba(20, 12, 6, 0.55); backdrop-filter: blur(3px); }
/* menus float over the live kitchen: a soft dark edge keeps them readable */
.screen:not(.dim) { background: radial-gradient(ellipse at center, rgba(20, 10, 0, 0) 35%, rgba(20, 10, 0, 0.38) 100%); }
@keyframes fadein { from { opacity: 0; transform: translateY(12px) scale(0.97); } to { opacity: 1; transform: none; } }

.logo { text-align: center; margin-bottom: 2vh; }
.logo h1 {
  font-size: clamp(46px, 11vw, 124px); margin: 0; line-height: 0.95; color: var(--accent2);
  -webkit-text-stroke: clamp(4px, 0.8vw, 10px) var(--ink); paint-order: stroke fill;
  text-shadow: 0 clamp(5px, 1vw, 10px) 0 var(--ink), 0 clamp(10px, 2vw, 22px) 24px rgba(0, 0, 0, 0.45);
  letter-spacing: 2px; transform: rotate(-3deg); animation: wobble 4s ease-in-out infinite;
}
.logo h1 span { color: #fff; }
@keyframes wobble { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(-1deg) scale(1.02); } }
.logo .sub {
  display: inline-block; font-size: clamp(14px, 2.2vw, 24px); color: #fff; font-weight: 700; margin-top: 14px;
  background: var(--ink); padding: 6px 18px; border-radius: 999px; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35); transform: rotate(-1.5deg);
}
.press {
  color: var(--ink); font-size: clamp(16px, 2.5vw, 26px); font-weight: 700; animation: pulse 1.4s ease-in-out infinite; margin-top: 4vh; text-align: center;
  background: var(--accent2); border: 4px solid var(--ink); border-radius: 999px; padding: 10px 26px; box-shadow: 0 6px 0 var(--ink);
}
@keyframes pulse { 50% { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .logo h1, .press { animation: none; } }

.panel {
  --pad: clamp(14px, 2.5vw, 28px);
  position: relative; background-color: #fff5e1; background-image: linear-gradient(180deg, #fffbf2 0%, #fff0d4 100%);
  border: 5px solid var(--ink); border-radius: 30px; padding: var(--pad); max-width: 980px; width: 100%;
  box-shadow: 0 9px 0 var(--ink), 0 24px 48px rgba(0, 0, 0, 0.45), inset 0 4px 0 rgba(255, 255, 255, 0.95);
}
.panel h2 { margin: 0 0 12px; font-size: clamp(24px, 3.6vw, 40px); text-align: center; }
/* the first heading becomes a striped header ribbon across the top of the panel */
.panel > h2:first-child {
  margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) 18px; padding: 12px 20px 10px; border-radius: 25px 25px 0 0; border-bottom: 5px solid var(--ink);
  background-color: #d9480f; background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.10) 0 16px, rgba(255, 255, 255, 0) 16px 32px), linear-gradient(180deg, #ffa94d, #e8590c);
  color: #fff; -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; text-shadow: 0 4px 0 var(--ink); letter-spacing: 1px;
}
.helperjobs { margin: 0 0 14px; text-align: center; }
.helperjobs h3 { margin: 0 0 8px; font-size: 18px; }
.jobgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.jobgrid .btn { min-width: 0; padding-left: 6px; padding-right: 6px; }
.jobhint { margin: 8px 0 0; font-size: 14px; opacity: .85; }
.helperjobs h3 + .lvlgrid, .jobhint + h3 { margin-top: 12px; }
.lvlgrid { grid-template-columns: repeat(2, 1fr); }
.panel h3 { margin: 10px 0 6px; }

.menu { display: flex; flex-direction: column; gap: 10px; min-width: min(360px, 90vw); }
.btn {
  --b1: #fffaf0; --b2: #ffe3b3; --bt: var(--ink);
  font-family: var(--font); font-weight: 700; font-size: clamp(16px, 2.3vw, 22px); color: var(--bt);
  background-color: var(--b1); background-image: linear-gradient(180deg, var(--b1) 0%, var(--b1) 45%, var(--b2) 100%);
  border: 4px solid var(--ink); border-radius: 18px; padding: 10px 20px;
  box-shadow: 0 5px 0 var(--ink), 0 9px 14px rgba(0, 0, 0, 0.22), inset 0 3px 0 rgba(255, 255, 255, 0.75);
  cursor: pointer; transition: transform 0.1s cubic-bezier(.3, 1.6, .5, 1), filter 0.1s; outline: none;
  position: relative; text-align: center; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
}
.btn svg { width: 1.25em; height: 1.25em; flex: none; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.25)); }
.btn:hover, .btn.focus { transform: translateY(-3px) scale(1.04) rotate(-1deg); filter: brightness(1.06) saturate(1.1); box-shadow: 0 8px 0 var(--ink), 0 14px 20px rgba(0, 0, 0, 0.28), inset 0 3px 0 rgba(255, 255, 255, 0.75), 0 0 0 4px rgba(255, 212, 59, 0.85); }
.btn.focus::before { content: ''; position: absolute; left: -30px; top: 50%; width: 0; height: 0; border: 11px solid transparent; border-left: 16px solid #fff; transform: translateY(-50%); filter: drop-shadow(0 3px 0 var(--ink)); animation: nudge 0.8s ease-in-out infinite; }
@keyframes nudge { 50% { left: -24px; } }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink), inset 0 3px 0 rgba(255, 255, 255, 0.5); }
.btn.big { font-size: clamp(22px, 3.2vw, 32px); padding: 14px 26px; border-radius: 22px; }
.btn.primary { --b1: #ffa94d; --b2: #e8590c; --bt: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35); background-color: #e8590c; }
.btn.c-blue { --b1: #74c0fc; --b2: #1c7ed6; --bt: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);  background-color: #1971c2;}
.btn.c-red { --b1: #ff8787; --b2: #e03131; --bt: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);  background-color: #c92a2a;}
.btn.c-purple { --b1: #b197fc; --b2: #7048e8; --bt: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);  background-color: #6741d9;}
.btn.c-green { --b1: #8ce99a; --b2: #2f9e44; --bt: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);  background-color: #2b8a3e;}
.btn.small { font-size: 15px; padding: 6px 14px; border-radius: 999px; border-width: 3px; box-shadow: 0 4px 0 var(--ink), inset 0 2px 0 rgba(255, 255, 255, 0.75); gap: 6px; }
.btn.small:hover, .btn.small.focus { box-shadow: 0 6px 0 var(--ink), inset 0 2px 0 rgba(255, 255, 255, 0.75), 0 0 0 3px rgba(255, 212, 59, 0.85); }
.btn.small.focus::before { left: -24px; border-width: 8px; border-left-width: 12px; }
.btn[disabled], .btn.locked { opacity: 0.45; filter: grayscale(1); }
.row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; align-items: center; }
.backhint { position: absolute; left: 16px; bottom: max(12px, env(safe-area-inset-bottom)); color: #fff; font-size: 14px; font-weight: 600; background: rgba(43, 33, 24, 0.72); padding: 5px 12px; border-radius: 999px; }
/* main menu: the big mode buttons sit on a wooden board */
.mainmenu { background-color: #9a6a3a; display: grid; gap: 12px; min-width: min(420px, 92vw); background: linear-gradient(180deg, #b07d48, #8a5a33); border: 5px solid var(--ink); border-radius: 30px; padding: 18px 20px 20px; box-shadow: 0 9px 0 var(--ink), 0 24px 48px rgba(0, 0, 0, 0.45), inset 0 4px 0 rgba(255, 255, 255, 0.25); }
.mainmenu .btn.big { width: 100%; }
.mainmenu .modes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mainmenu .modes .btn { width: 100%; }
.mainmenu .row { gap: 8px; margin-top: 2px; }

/* ---------- campaign ---------- */
.books { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; width: 100%; }
.book { min-height: 170px; display: flex; flex-direction: column; justify-content: center; gap: 8px; border-radius: 24px; }
.book .t { font-size: clamp(22px, 2.8vw, 30px); }
.book .d { font-size: 14px; font-weight: 600; opacity: 0.9; line-height: 1.35; }
.book:nth-child(1) { --b1: #ffe066; --b2: #fab005; }
.book:nth-child(2) { --b1: #b197fc; --b2: #7048e8; --bt: #fff; }
.book:nth-child(3) { --b1: #66d9e8; --b2: #1098ad; --bt: #fff; }
.book:nth-child(n+2) .t { -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; }
.worlds { display: flex; flex-direction: column; gap: 14px; width: 100%; }
.world { flex: none; --wc: #e8590c; --wc2: #9a3b08; border: 4px solid var(--ink); border-radius: 22px; padding: 0 0 12px; background: #fff; box-shadow: 0 6px 0 var(--ink), 0 12px 18px rgba(0, 0, 0, 0.18); overflow: hidden; }
.world .wh { background-color: var(--wc2); display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 14px; color: #fff; border-bottom: 4px solid var(--ink);
  background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.10) 0 12px, rgba(255, 255, 255, 0) 12px 24px), linear-gradient(180deg, var(--wc), var(--wc2)); }
.world .wn { font-size: clamp(19px, 2.5vw, 26px); font-weight: 700; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; }
.world .ws { font-size: 14px; font-weight: 700; background: rgba(0, 0, 0, 0.35); padding: 2px 10px; border-radius: 999px; }
.world .wd { font-size: 14px; font-weight: 600; opacity: 0.75; padding: 8px 14px 0; }
.levels { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; padding: 0 12px; }
.lvl { min-width: 100px; padding: 8px 10px 6px; font-size: 20px; flex-direction: column; gap: 0; border-radius: 16px; }
.lvl .stars { display: block; font-size: 17px; letter-spacing: 1px; line-height: 1.1; }
.lvl .stars b { color: #fcc419; text-shadow: 0 0 0 var(--ink), 1px 1px 0 var(--ink), -1px 1px 0 var(--ink), 1px -1px 0 var(--ink), -1px -1px 0 var(--ink); }
.lvl .stars i { font-style: normal; color: rgba(43, 33, 24, 0.18); }
.lvl .ln { display: block; font-size: 12px; font-weight: 700; opacity: 0.8; max-width: 124px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- lobby ---------- */
.slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 10px 0 14px; }
@media (max-width: 700px) { .slots { grid-template-columns: repeat(2, 1fr); } }
.slot { min-width: 0; border: 4px dashed #c9b79c; border-radius: 22px; min-height: 160px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px; text-align: center; font-size: 14px; color: #5f5240; background: rgba(255, 255, 255, 0.45); }
.slot.on { border-style: solid; border-color: var(--ink); color: var(--ink); background: radial-gradient(circle at 50% 35%, #ffffff, #ffe8c2); box-shadow: 0 6px 0 var(--ink), inset 0 3px 0 #fff; animation: slotin 0.35s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes slotin { from { transform: scale(0.85); } }
.slot canvas { width: 100px; height: 100px; }
.slot .nm { font-weight: 700; font-size: 18px; }
.slot .dev { font-size: 12px; opacity: 0.7; }
.slot .arrows { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; justify-content: center; }
.keys { font-size: 13px; line-height: 1.6; }
kbd { background: #fff; border: 2px solid var(--ink); border-bottom-width: 3px; border-radius: 6px; padding: 0 6px; font-family: var(--font); font-weight: 700; font-size: 12px; }

/* ---------- intro / results ---------- */
.recipes { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 8px 0; }
.rcard { background-color: #fffaf0; background-image: linear-gradient(180deg, #ffffff, #fff4df); border: 4px solid var(--ink); border-radius: 18px; padding: 6px; text-align: center; width: 156px; box-shadow: 0 5px 0 var(--ink); }
.rcard canvas { width: 138px; height: 110px; display: block; }
.rcard .nm { font-weight: 700; font-size: 15px; }
.tip { background: #fff3bf; border: 3px solid var(--ink); border-radius: 16px; padding: 10px 14px 10px 44px; margin: 10px auto; max-width: 640px; text-align: left; font-size: 15px; font-weight: 600; position: relative; box-shadow: 0 4px 0 var(--ink); }
.tip::before { content: '!'; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 50%; background: #fab005; border: 3px solid var(--ink); color: var(--ink); font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.targets { display: flex; gap: 12px; justify-content: center; font-weight: 700; margin: 10px 0; flex-wrap: wrap; }
.targets span { background-color: #fff5e1; background-image: linear-gradient(180deg, #fff, #ffe8c2); border: 3px solid var(--ink); border-radius: 999px; padding: 5px 14px; box-shadow: 0 4px 0 var(--ink); }
.bigstars { display: flex; justify-content: center; gap: 12px; font-size: clamp(50px, 9vw, 90px); margin: 4px 0; }
.bigstars span { color: #d9cdb8; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; text-shadow: 0 6px 0 var(--ink); transform: scale(0); animation: pop 0.45s forwards; }
.bigstars span.on { color: var(--accent2); }
@keyframes pop { 60% { transform: scale(1.3) rotate(10deg); } 100% { transform: scale(1); } }
.stats { display: grid; grid-template-columns: 1fr auto; gap: 4px 20px; max-width: 360px; margin: 10px auto; font-size: 18px; }
.stats .v { font-weight: 700; text-align: right; }
.stats { background: #fff; border: 4px solid var(--ink); border-radius: 18px; padding: 12px 18px; box-shadow: 0 5px 0 var(--ink); }
.stats .total { border-top: 3px dashed var(--ink); padding-top: 6px; font-size: 24px; }

/* ---------- settings ---------- */
.set { display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; align-items: center; max-width: 560px; margin: 0 auto; font-size: 18px; font-weight: 600; background: #fff; border: 4px solid var(--ink); border-radius: 20px; padding: 14px 18px; box-shadow: 0 5px 0 var(--ink); }
.set .val { display: flex; align-items: center; gap: 8px; }
.set .val b { min-width: 52px; text-align: center; }

.help { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; font-size: 15px; }
.help .card { background-color: #fffaf0; background-image: linear-gradient(180deg, #ffffff, #fff6e6); border: 4px solid var(--ink); border-radius: 18px; padding: 12px 14px; box-shadow: 0 5px 0 var(--ink); }
.help .card h4 { margin: 0 0 6px; font-size: 17px; }
.scroll { max-height: 64vh; overflow-y: auto; padding-right: 4px; }

/* ---------- touch controls ---------- */
#touch { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
#stickzone { position: absolute; left: 0; top: 18%; width: 50%; bottom: 0; pointer-events: auto; }
#stick { position: absolute; width: 130px; height: 130px; margin: -65px 0 0 -65px; border-radius: 50%; background: rgba(255,255,255,0.18); border: 3px solid rgba(255,255,255,0.45); display: none; pointer-events: none; }
#stick.on { display: block; }
#knob { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; border-radius: 50%; background: rgba(255,255,255,0.75); transform: translate(-50%,-50%); transition: background 0.08s, box-shadow 0.08s; }
/* the knob shows which zone you're in: pale = turning on the spot, lit = walking */
#knob.walk { background: rgba(255,255,255,0.95); box-shadow: 0 0 0 4px rgba(64,192,87,0.75); }
#tbtns { position: absolute; right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); width: 220px; height: 220px; pointer-events: none; }
.tb { pointer-events: auto; position: absolute; border-radius: 50%; border: 3px solid rgba(0,0,0,0.5); color: #fff; font-family: var(--font); font-weight: 700; font-size: 15px; line-height: 1.05; text-shadow: 0 1px 0 #000; box-shadow: 0 4px 0 rgba(0,0,0,0.35); opacity: 0.85; touch-action: none; }
.tb { transition: transform 0.12s cubic-bezier(.3,1.6,.5,1), box-shadow 0.12s, filter 0.12s; }
.tb.down { transform: translateY(3px) scale(0.9); box-shadow: 0 1px 0 rgba(0,0,0,0.35); filter: brightness(1.15); opacity: 1; transition-duration: 0.04s; }
.tb-pick { width: 92px; height: 92px; right: 0; bottom: 30px; background: #40c057; }
.tb-use { width: 80px; height: 80px; right: 100px; bottom: 0; background: #4dabf7; font-size: 13px; }
.tb-dash { width: 70px; height: 70px; right: 104px; bottom: 96px; background: #fa5252; }
.tb-swap { width: 62px; height: 62px; right: 18px; bottom: 136px; background: #fab005; }
.tb-pause { position: absolute; bottom: max(78px, calc(env(safe-area-inset-bottom) + 70px)); left: max(14px, env(safe-area-inset-left)); width: 44px; height: 44px; border-radius: 12px; background: rgba(0,0,0,0.45); font-size: 16px; }
/* camera buttons: turn and zoom the view */
#camctl { position: absolute; right: max(14px, env(safe-area-inset-right)); bottom: max(250px, calc(env(safe-area-inset-bottom) + 242px)); display: grid; grid-template-columns: 40px 40px; gap: 6px; pointer-events: none; }
#camctl .cb { pointer-events: auto; width: 40px; height: 40px; border-radius: 50%; border: 3px solid rgba(0,0,0,0.5); background: rgba(43,33,24,0.55); color: #fff; font: 700 20px var(--font); line-height: 1; box-shadow: 0 3px 0 rgba(0,0,0,0.35); touch-action: none; opacity: 0.85; }
#camctl .cb.down { transform: translateY(2px); background: rgba(43,33,24,0.85); }
body.touch-big #tbtns { transform: scale(1.2); transform-origin: bottom right; }
body.touch-small #tbtns { transform: scale(0.85); transform-origin: bottom right; }

#rotate { position: fixed; inset: 0; background: rgba(20,12,6,0.92); color: #fff; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 20px; text-align: center; padding: 30px; gap: 12px; }
#rotate div { font-size: 70px; animation: spin 2s infinite; }
@keyframes spin { 50% { transform: rotate(90deg); } }

.toast { position: fixed; left: 50%; top: 20px; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 8px 16px; border-radius: 12px; font-weight: 600; z-index: 30; animation: fadein 0.2s; pointer-events: none; }
.chefpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.chefpick .btn { padding: 6px; }
.chefpick canvas { width: 90px; height: 90px; display: block; margin: 0 auto; }

/* ---------- tutorial guide ---------- */
.guide { position: fixed; left: 50%; bottom: max(78px, calc(env(safe-area-inset-bottom) + 70px)); transform: translateX(-50%); width: min(640px, 92vw); background: var(--paper); border: 4px solid var(--ink); border-radius: 18px; box-shadow: var(--shadow); padding: 10px 16px; z-index: 6; pointer-events: none; text-align: center; }
.guide.pop { animation: guidepop 0.35s ease; }
@keyframes guidepop { 0% { transform: translateX(-50%) scale(0.85); } 70% { transform: translateX(-50%) scale(1.04); } 100% { transform: translateX(-50%) scale(1); } }
.guide .gstep { font-size: 13px; font-weight: 700; color: var(--accent); letter-spacing: 1px; text-transform: uppercase; }
.guide .gtext { font-size: clamp(15px, 2.2vw, 20px); line-height: 1.3; }
.guide b { background: #ffe8a3; padding: 0 5px; border-radius: 6px; }
body.touchplay .guide { bottom: max(6px, env(safe-area-inset-bottom)); width: min(44vw, 420px); padding: 6px 10px; }
body.touchplay .guide .gtext { font-size: 13px; }
.rsteps { font-size: 12px; line-height: 1.35; color: #555; margin-top: 4px; text-align: left; }
.book .rcard { width: 170px; }
.panel .press { color: var(--ink); text-shadow: none; }
.diff { display: block; font-size: 11px; letter-spacing: 1px; color: #bbb; }
.diff .on { color: #e8590c; display: inline; }
.diffline { text-align: center; font-weight: 700; margin: -6px 0 6px; }
.diffline .diff { display: inline; font-size: 16px; }
.help canvas.hicon { width: 100%; height: 70px; display: block; margin-bottom: 4px; background: #fff8e6; border-radius: 8px; }
.help.inside ul { margin: 4px 0 0; padding-left: 18px; line-height: 1.45; }
.help.inside li { margin-bottom: 3px; }

.scroll { touch-action: pan-y; }
#rotate small { font-size: 14px; opacity: 0.8; }
/* short landscape phones: tighter menus so every button fits or scrolls */
@media (max-height: 460px) {
  .logo h1 { font-size: 34px !important; }
  .logo { margin-bottom: 4px; }
  .menu { gap: 6px; }
  .btn { padding: 6px 14px; font-size: 16px; }
  .btn.big { font-size: 20px; padding: 8px 18px; }
  .panel { padding: 10px 14px; }
  .panel h2 { font-size: 20px; margin-bottom: 6px; }
  .slot { min-height: 110px; }
  .slot canvas { width: 70px; height: 70px; }
  .scroll { max-height: 56vh; }
  .rcard { width: 120px; }
  .rcard canvas { width: 108px; height: 80px; }
}

/* portrait phones: controls sit in a band under the kitchen */
@media (orientation: portrait) {
  body.touchplay .guide { bottom: min(39vh, 318px); width: 94vw; }
  #stickzone { top: auto; height: min(38vh, 310px); bottom: 0; }
  .tb-pause { bottom: auto; top: calc(max(12vh, 70px) + 10px); }
  #camctl { bottom: auto; top: calc(max(12vh, 70px) + 14px); right: auto; left: max(66px, calc(env(safe-area-inset-left) + 66px)); grid-template-columns: repeat(4, 36px); }
  #camctl .cb { width: 36px; height: 36px; font-size: 18px; }
  .slots { grid-template-columns: repeat(2, 1fr); }
}
html, body { width: 100%; height: 100%; height: 100dvh; }

/* patch notes */
.notes { display: flex; flex-direction: column; gap: 10px; }
.notes .card { background: #fff; border: 2px solid var(--ink); border-radius: 12px; padding: 10px 14px; }
.notes .card.latest { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.notes h4 { margin: 0; font-size: 18px; display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.notes .ndate { font-weight: 600; font-size: 14px; opacity: 0.75; font-variant-numeric: tabular-nums; }
.notes .ntitle { font-weight: 700; margin: 2px 0 4px; }
.notes h5 { margin: 6px 0 2px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.8; }
.notes ul { margin: 0; padding-left: 20px; line-height: 1.45; }

/* accessibility: visible keyboard focus, and less motion when the device asks for it */
.btn:focus-visible, .tb:focus-visible { outline: 3px solid #1c7ed6; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
time { white-space: nowrap; }

/* settings sliders: drag on touch or with a mouse, − and + for keyboards and controllers */
.set .val.slider input[type=range] { width: clamp(90px, 22vw, 170px); accent-color: #e8590c; height: 28px; touch-action: pan-x; }
.set .val.slider b { min-width: 46px; }
@media (max-width: 520px) {
  .set { grid-template-columns: 1fr; gap: 4px 0; }
  .set .val { justify-content: flex-start; margin-bottom: 8px; }
  .set .val.slider input[type=range] { width: 100%; flex: 1; }
}

/* recipe book: kitchen sections and where each dish comes from */
.book .section-about { margin: -4px 0 8px; font-size: 14px; opacity: 0.85; }
.rcard .cuisine { font-size: 12px; font-weight: 700; color: #8a5a2b; text-transform: uppercase; letter-spacing: 0.5px; margin: -2px 0 2px; }

/* accounts: Google sign-in button (Google's own colours), account line, save status */
.btn.gsi { background: #fff; color: #1f1f1f; border-color: #747775; box-shadow: 0 3px 0 #747775; font-family: Roboto, Arial, sans-serif; font-weight: 500; text-shadow: none; display: inline-flex; align-items: center; gap: 10px; }
.btn.gsi svg { width: 20px; height: 20px; flex: none; }
.btn.gsi.focus, .btn.gsi:hover { background: #f2f2f2; }
.btn.acct { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cloudsave { margin: 10px auto 0; padding: 8px 14px; border-radius: 12px; background: #4a3a2c; color: #fff8e7; font-weight: 600; text-align: center; max-width: 520px; }
.cloudsave.ok { background: #2f6b34; }
.cloudsave.bad { background: #8f1d1d; }
.fine { font-size: 14px; opacity: .9; text-align: center; margin: 8px 0 12px; }
.signhint { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; text-align: center; }