/* Big Cheese: the readout on top, the crowd in the middle, the price and the snack menu below.
   The game fills one screen; How to play and the FAQ sit underneath. */

.bc { max-width: 820px; margin: 0 auto; padding: 0 16px; }
.bc-top { gap: 8px; }
.bc-top::after { order: 1; }
.bc-icon {
  order: 2; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--chrome); box-shadow: 0 1px 0 var(--hi) inset, 0 1px 2px var(--lo);
}
.bc-icon svg { width: 20px; height: 20px; }
#sound .wave { display: none; }
#sound[aria-pressed="true"] .wave { display: inline; }
#sound[aria-pressed="true"] .mute { display: none; }

.bc-game {
  display: flex; flex-direction: column; gap: 10px;
  height: calc(100svh - 56px - env(safe-area-inset-top)); min-height: 520px; max-height: 980px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}

/* ---------- readout ---------- */
.bc-lcd { position: relative; height: 58px; margin: 0; justify-content: space-between; padding: 0 14px; }
.bc-money { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.bc-money b { font: 400 24px/1 var(--pixel); letter-spacing: .02em; white-space: nowrap; }
.bc-money span, .bc-side span { font-size: 12px; opacity: .8; white-space: nowrap; }
.bc-side { display: grid; justify-items: end; gap: 6px; }
.bc-goal { position: absolute; left: 14px; right: 14px; bottom: 7px; height: 3px; background: var(--lcd-dim); border-radius: 2px; overflow: hidden; }
.bc-goal i { display: block; height: 100%; width: 0; background: var(--lcd-ink); box-shadow: 0 0 6px var(--lcd-ink); }

/* ---------- the room ---------- */
.bc-stage {
  position: relative; flex: 1; min-height: 0; border-radius: 22px; overflow: hidden;
  background: #F3E3CC; box-shadow: 0 0 0 1px var(--line), 0 2px 10px rgba(0,0,0,.18) inset;
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.bc-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; }
.bc-crowd {
  position: absolute; left: 10px; top: 10px; margin: 0; padding: 6px 9px; border-radius: 9px;
  background: rgba(11,21,16,.82); color: var(--lcd-ink); font: 400 11px/1.25 var(--pixel); text-transform: uppercase; letter-spacing: .05em;
  pointer-events: none;
}
.bc-crowd em { font-style: normal; color: #FFD23F; }
.bc-walkout {
  position: absolute; left: 50%; top: 10px; transform: translateX(-50%); width: min(260px, 70%);
  display: grid; gap: 6px; padding: 8px 10px; border-radius: 12px; background: rgba(209,45,45,.92); color: #fff;
  font: 400 11px/1 var(--pixel); text-transform: uppercase; letter-spacing: .05em; text-align: center; pointer-events: none;
  animation: bc-throb .6s ease-in-out infinite alternate;
}
.bc-walkout > i { height: 5px; border-radius: 3px; background: rgba(255,255,255,.3); overflow: hidden; }
.bc-walkout > i i { display: block; height: 100%; width: 0; background: #fff; }
@keyframes bc-throb { to { transform: translateX(-50%) scale(1.04); } }
.bc-toast {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); margin: 0; padding: 7px 12px; border-radius: 10px;
  background: rgba(11,21,16,.86); color: var(--lcd-ink); font: 400 11px/1 var(--pixel); text-transform: uppercase; letter-spacing: .05em;
  opacity: 0; transition: opacity .2s; pointer-events: none; white-space: nowrap;
}
.bc-toast.on { opacity: 1; }

/* ---------- cards over the room ---------- */
.bc-card {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(360px, calc(100% - 28px));
  display: grid; gap: 10px; padding: 22px; border-radius: 22px; text-align: left;
  background: var(--panel); box-shadow: var(--shadow); border: 1px solid var(--line);
}
.bc-card h1, .bc-card h2 { margin: 0; font: 800 30px/1.02 var(--display); letter-spacing: -.035em; }
.bc-card h1 { font-size: 40px; }
.bc-card p { margin: 0 0 6px; }
.bc-card .btn { width: 100%; }
.bc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bc-step, .bc-best { margin: 0; font: 400 11px/1 var(--pixel); text-transform: uppercase; letter-spacing: .06em; color: var(--soft); }
.bc-best:empty { display: none; }
.bc-lit { position: relative; z-index: 3; outline: 3px solid #FFD23F; outline-offset: 3px; border-radius: 14px; }

/* ---------- price and menu ---------- */
.bc-controls { display: grid; gap: 10px; }
.bc-price {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; gap: 10px; align-items: center;
  padding: 8px; border-radius: 18px; background: var(--chrome); border: 1px solid var(--line); box-shadow: 0 1px 0 var(--hi) inset, 0 1px 2px var(--lo);
}
.bc-step-btn {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line);
  background: var(--card); box-shadow: 0 1px 0 var(--hi) inset, 0 2px 4px var(--lo);
}
.bc-step-btn:active { transform: scale(.94); }
.bc-step-btn svg { width: 22px; height: 22px; }
.bc-gauge { display: grid; gap: 7px; min-width: 0; }
.bc-gauge p { margin: 0; display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.bc-gauge p span { font: 400 11px/1 var(--pixel); text-transform: uppercase; letter-spacing: .05em; color: var(--soft); white-space: nowrap; }
.bc-gauge p span:last-child { margin-left: auto; overflow: hidden; text-overflow: ellipsis; }
.bc-gauge b { font: 800 20px/1 var(--display); letter-spacing: -.02em; }
.bc-bar { position: relative; height: 10px; border-radius: 6px; background: var(--lcd); box-shadow: 0 1px 3px rgba(0,0,0,.4) inset; }
.bc-bar #price-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 6px; background: var(--lcd-ink); transition: width .15s, background .15s; }
.bc-bar #price-bar.over { background: #FF4D4D; }
.bc-red { position: absolute; left: 50%; top: -4px; bottom: -4px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: #FF4D4D; }

.bc-menu { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.bc-menu button {
  position: relative; width: 100%; height: 74px; padding: 6px 4px 7px; border-radius: 14px; display: grid; justify-items: center; align-content: end; gap: 4px;
  border: 1px solid var(--line); background: var(--card); box-shadow: 0 1px 0 var(--hi) inset, 0 2px 4px var(--lo);
}
.bc-menu button canvas { width: 30px; height: 30px; }
.bc-menu button b { font: 600 11px/1.1 var(--body); text-align: center; }
.bc-menu button span { font: 400 10px/1 var(--pixel); color: var(--soft); white-space: nowrap; }
.bc-menu button kbd { position: absolute; left: 6px; top: 5px; font: 400 9px/1 var(--pixel); color: var(--soft); }
.bc-menu button[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent), 0 4px 12px rgba(255,90,31,.25); }
.bc-menu button.broke span { color: var(--oops); }
.bc-menu button:disabled { opacity: .35; cursor: default; }
.bc-menu button:disabled b { visibility: hidden; }
.bc-menu button:disabled::after { content: "Opens at"; position: absolute; bottom: 22px; font: 400 9px/1 var(--pixel); text-transform: uppercase; color: var(--soft); }

.bc-guide { margin-top: 24px; }
.bc-guide h2:first-child { margin-top: 12px; }
.bc-snack-list { margin: 0 0 14px; padding: 0; list-style: none; display: grid; gap: 10px; }
.bc-snack-list b { display: block; font: 700 16px/1.3 var(--display); letter-spacing: -.01em; }

@media (max-width: 420px) {
  .bc-menu button { height: 66px; }
  .bc-menu button b { font-size: 10px; }
  .bc-money b { font-size: 20px; }
}
@media (min-width: 700px) {
  .bc-controls { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: stretch; }
  .bc-menu button { height: 66px; }
}
.bc-gauge p .bc-line { color: #E5484D; }
.bc-gauge p .bc-line::before { content: ""; display: inline-block; width: 3px; height: 9px; margin-right: 5px; border-radius: 1px; background: #FF4D4D; vertical-align: -1px; }