/* ==========================================================================
   Minimum Wage Mercenaries — styles
   Layout model: #stage is a 16:9 box; the canvas fills it and every HUD
   element is positioned in % of the stage, so everything scales together.
   ========================================================================== */

:root {
  --ink: #0b0d12;
  --steel: #2a3038;
  --steel-lit: #3a424d;
  --line: #10141a;
  --paper: #efe6cf;
  --cash: #5fd67a;
  --tips: #ffcf4a;
  --blood: #b8232a;
  --blood-lit: #e2464d;
  --hyg: #48c9c0;
  --warn: #ffa22b;
  --font: "Trebuchet MS", "Segoe UI", system-ui, -apple-system, sans-serif;
  --shadow: 0 6px 0 rgba(0, 0, 0, .45), 0 14px 28px rgba(0, 0, 0, .5);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #05070a;
  color: #fff;
  font-family: var(--font);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* --------------------------------------------------------------- stage ---- */

#stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* The canvas fills the stage; render.js letterboxes the 1600x900 scene inside
   it and owns the pointer mapping, so no object-fit is involved. */
#scene {
  position: absolute;
  width: 100%;
  height: 100%;
  touch-action: manipulation;
  cursor: pointer;
}

.hidden { display: none !important; }

/* ----------------------------------------------------------------- HUD ---- */

#hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  font-size: clamp(10px, 1.15vw, 17px);
}

#hud button, #hud .ticket, #hud .tray { pointer-events: auto; }

.panel {
  background: linear-gradient(#1b212a, #12161d);
  border: .12em solid var(--line);
  border-radius: .5em;
  box-shadow: inset 0 .1em 0 rgba(255, 255, 255, .07), 0 .25em .6em rgba(0, 0, 0, .5);
  padding: .35em .6em;
  display: flex;
  align-items: center;
  gap: .6em;
}

.hud-row {
  position: absolute;
  left: 1%;
  right: 1%;
  display: flex;
  gap: .5em;
  align-items: stretch;
}

.hud-top { top: 1.2%; }

.lbl {
  font-size: .72em;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #8b98a8;
  font-weight: 700;
  white-space: nowrap;
}

.panel-day { flex-direction: column; align-items: flex-start; gap: .1em; border-left: .3em solid #4b8fd6; }
.panel-day .phase { font-weight: 900; letter-spacing: .05em; font-size: 1.05em; }
.panel-day .lbl b { color: #fff; font-size: 1.15em; }

.hearts { display: flex; gap: .12em; }
.heart { font-size: .95em; filter: drop-shadow(0 1px 0 #000); }
.heart.gone { filter: grayscale(1) brightness(.4); }

.panel-clock { flex-direction: column; gap: 0; border-left: .3em solid var(--warn); }
.clock { font-variant-numeric: tabular-nums; font-size: 1.35em; font-weight: 900; letter-spacing: .04em; }
.clock.low { color: var(--blood-lit); animation: pulse .8s infinite; }

.panel-money { border-left: .3em solid var(--cash); gap: 1em; }
.money { display: flex; flex-direction: column; line-height: 1.1; }
.cash { color: var(--cash); font-size: 1.2em; font-weight: 900; }
.tips { color: var(--tips); font-size: 1.2em; font-weight: 900; }

.panel-kit { gap: .8em; border-left: .3em solid #9aa4b0; }
.kit { display: flex; align-items: center; gap: .25em; font-weight: 900; }
.kit .ico { font-size: 1.1em; filter: drop-shadow(0 1px 0 #000); }
.kit.flash { animation: flashKit .5s; }

.panel-clean { flex: 1; gap: 1em; border-left: .3em solid var(--hyg); }
.meter-wrap { display: flex; align-items: center; gap: .4em; flex: 1; }
.meter {
  flex: 1;
  height: .7em;
  min-width: 3em;
  background: #0a0d11;
  border: .1em solid #000;
  border-radius: .4em;
  overflow: hidden;
}
.bar { display: block; height: 100%; transition: width .25s ease; }
.bar-blood { background: linear-gradient(90deg, #6d1216, var(--blood-lit)); }
.bar-hyg { background: linear-gradient(90deg, #1e6e69, var(--hyg)); }
.meter-val { font-size: .75em; font-weight: 800; min-width: 3.4em; text-align: right; color: #cfd8e3; }
.meter-val.bad { color: var(--blood-lit); }

/* ------------------------------------------------------------- ticket ---- */

.ticket {
  position: absolute;
  top: 13%;
  left: 1%;
  width: 15em;
  background: var(--paper);
  color: #1a1a1a;
  border-radius: .3em;
  box-shadow: var(--shadow);
  transform: rotate(-1.1deg);
  overflow: hidden;
  transition: opacity .25s;
}
.ticket.empty { opacity: 0; }
.ticket-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: .3em .6em;
  background: #d8cbab;
  border-bottom: .12em dashed #a99d80;
}
.ticket-title { font-weight: 900; letter-spacing: .18em; text-transform: uppercase; font-size: .8em; }
.ticket-price { font-weight: 900; font-size: 1.1em; color: #1f6b34; }
.ticket-body { padding: .4em .6em .5em; }
.ticket-stack { list-style: none; margin: 0; padding: 0; }
.ticket-stack li {
  display: flex;
  align-items: center;
  gap: .35em;
  font-weight: 800;
  font-size: .85em;
  padding: .08em 0;
  border-bottom: 1px dotted #bdb094;
}
.ticket-stack li.done { color: #7d8c74; text-decoration: line-through; }
.ticket-stack li.next { background: #ffe9a8; box-shadow: -.35em 0 0 #ffe9a8, .35em 0 0 #ffe9a8; }
.ticket-stack .n { font-size: .8em; color: #8a7f68; min-width: 1.1em; }
.ticket-extras { display: flex; gap: .4em; margin-top: .35em; }
.chip {
  font-size: .74em;
  font-weight: 800;
  padding: .15em .45em;
  border-radius: .3em;
  background: #cbbd9c;
  color: #2b2b2b;
  display: flex;
  align-items: center;
  gap: .25em;
}
.chip.done { background: #9fc39a; }
.ticket-timer { height: .45em; background: #b6ab8e; }
.ticket-timer i { display: block; height: 100%; width: 100%; background: var(--cash); transition: width .3s linear, background .3s; }
.ticket-timer i.warn { background: var(--warn); }
.ticket-timer i.crit { background: var(--blood-lit); }

/* ---------------------------------------------------------- carry/tray ---- */

.tray {
  position: absolute;
  bottom: 2%;
  left: 1%;
  display: flex;
  gap: .5em;
  align-items: flex-end;
}
.tray-col {
  background: linear-gradient(#1b212a, #12161d);
  border: .12em solid var(--line);
  border-radius: .5em;
  padding: .3em .5em .4em;
  box-shadow: 0 .25em .6em rgba(0, 0, 0, .5);
  display: flex;
  flex-direction: column;
  gap: .2em;
}
.slot, #slot-carry, .slot-carry {
  width: 3.6em !important;
  height: 3.6em !important;
  max-width: 3.6em !important;
  max-height: 3.6em !important;
  display: grid !important;
  place-items: center !important;
  background: #0b0e13;
  border: .1em solid #000;
  border-radius: .35em;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
.slot img, #slot-carry img, .slot-carry img {
  width: 90% !important;
  height: 90% !important;
  max-width: 3.2em !important;
  max-height: 3.2em !important;
  object-fit: contain !important;
  image-rendering: pixelated !important;
  display: block !important;
}
.slot .empty { color: #4a545f; font-weight: 900; }
.slot.dirty, #slot-carry.dirty, .slot-carry.dirty { box-shadow: inset 0 0 0 .18em var(--blood) !important; }

.build, #build-stack, .build-stack {
  display: flex !important;
  align-items: flex-end !important;
  gap: .25em !important;
  min-height: 3.6em !important;
}
.build-layer {
  width: 2.6em !important;
  height: 2.6em !important;
  max-width: 2.6em !important;
  max-height: 2.6em !important;
  background: #0b0e13;
  border: .1em solid #000;
  border-radius: .3em;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
.build-layer img, .build img, #build-stack img {
  width: 92% !important;
  height: 92% !important;
  max-width: 2.4em !important;
  max-height: 2.4em !important;
  object-fit: contain !important;
  image-rendering: pixelated !important;
  display: block !important;
}
.build-layer.pop { animation: pop .3s; }
.build .none { color: #4a545f; font-weight: 800; font-size: .8em; align-self: center; }

/* ------------------------------------------------------------- combat ---- */

.combat {
  position: absolute;
  right: 1%;
  bottom: 2%;
  display: flex;
  gap: .5em;
}
.cbtn {
  width: 4.2em;
  height: 4.2em;
  border-radius: .7em;
  border: .14em solid #000;
  background: linear-gradient(#333c48, #1c222b);
  color: #fff;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .1em;
  box-shadow: 0 .25em 0 #000, inset 0 .12em 0 rgba(255, 255, 255, .12);
  cursor: pointer;
  transition: transform .08s, box-shadow .08s;
}
.cbtn:active { transform: translateY(.2em); box-shadow: 0 .05em 0 #000; }
.cbtn-ico { font-size: 1.6em; line-height: 1; filter: drop-shadow(0 1px 0 #000); }
.cbtn-lbl { font-size: .65em; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: #b9c4d1; }
.cbtn.active { background: linear-gradient(#7a1f24, #4a1013); border-color: #d8555c; }
.cbtn.active .cbtn-lbl { color: #ffd9db; }
.cbtn.armed { animation: pulse .6s infinite; border-color: var(--warn); }
.cbtn.spent { opacity: .45; }
.cbtn-sm { width: 2.8em; height: 2.8em; align-self: flex-end; }
.cbtn-sm .cbtn-ico { font-size: 1.1em; }

/* ------------------------------------------------------------- toasts ---- */

.toasts {
  position: absolute;
  left: 50%;
  top: 16%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25em;
  pointer-events: none;
}
.toast {
  font-weight: 900;
  font-size: 1.1em;
  letter-spacing: .04em;
  padding: .2em .7em;
  border-radius: .4em;
  background: rgba(8, 10, 14, .85);
  border: .1em solid #000;
  text-shadow: 0 .1em 0 #000;
  animation: toastUp 1.4s forwards;
}
.toast.good { color: var(--cash); }
.toast.bad { color: var(--blood-lit); }
.toast.warn { color: var(--warn); }
.toast.info { color: #8ec6ff; }
.toast.money { color: var(--tips); font-size: 1.35em; }

.hint {
  position: absolute;
  left: 50%;
  bottom: 2.2%;
  transform: translateX(-50%);
  font-size: .82em;
  font-weight: 700;
  color: #93a0b0;
  background: rgba(6, 8, 11, .7);
  padding: .25em .8em;
  border-radius: 1em;
  transition: opacity .4s;
}
.hint.gone { opacity: 0; }

/* ---------------------------------------------------------- overlays ----- */

.ov, .overlay {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  align-content: center;
  row-gap: 1vh;
  overflow: auto;
  z-index: 20;
  background: rgba(4, 6, 9, .82);
  backdrop-filter: blur(3px);
  padding: 2%;
  text-align: center;
}
.ov.show, .overlay.show, [id^="ov-"].show {
  display: grid !important;
  animation: fadeIn .28s;
}
.ov-card { background: rgba(4, 6, 9, .55); backdrop-filter: none; }
.ov-video, .ov-menu, .ov-win, .ov-shop { background: #000; backdrop-filter: none; padding: 0; }

.big-btn {
  font-family: inherit;
  font-weight: 900;
  font-size: clamp(14px, 1.5vw, 22px);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  padding: .6em 1.6em;
  border-radius: .5em;
  border: .12em solid #6ee08a;
  background: linear-gradient(#2f9b4f, #1c6d36);
  box-shadow: 0 .25em 0 #0d3a1d, 0 .5em 1em rgba(0, 0, 0, .5);
  cursor: pointer;
  transition: transform .08s, box-shadow .08s, filter .15s;
}
.big-btn:hover { filter: brightness(1.1); }
.big-btn:active { transform: translateY(.22em); box-shadow: 0 .03em 0 #0d3a1d; }
.big-btn.ghost { background: linear-gradient(#37475c, #202a36); border-color: #7f96b0; box-shadow: 0 .25em 0 #0f151d, 0 .5em 1em rgba(0, 0, 0, .5); }
.big-btn.danger { background: linear-gradient(#9b2f34, #6d1c20); border-color: #e0757b; box-shadow: 0 .25em 0 #3a0d0f, 0 .5em 1em rgba(0, 0, 0, .5); }
.big-btn:disabled { filter: grayscale(.8) brightness(.6); cursor: not-allowed; }

.txt-btn {
  background: none;
  border: none;
  color: #8b98a8;
  font-family: inherit;
  font-weight: 700;
  font-size: clamp(11px, 1.1vw, 15px);
  cursor: pointer;
  padding: .5em;
}
.txt-btn:hover { color: #fff; }

/* boot */
.ov-boot { background: radial-gradient(circle at 50% 40%, #16202c, #05070a 70%); }
.boot-logo { width: min(52vw, 620px); max-height: 40vh; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 .2em .4em #000); }
.boot-bar {
  width: min(40vw, 420px);
  height: 14px;
  margin: 4vh auto 1.2vh;
  background: #0b0f14;
  border: 2px solid #000;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .06);
}
.boot-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #b8232a, #ffcf4a); transition: width .2s; }
.boot-txt { color: #8b98a8; font-weight: 700; letter-spacing: .06em; font-size: clamp(11px, 1.2vw, 16px); min-height: 1.4em; }

/* intro video */
.ov-video video { width: 100%; height: 100%; object-fit: contain; }
.skip-btn {
  position: absolute;
  right: 3%;
  bottom: 5%;
  background: rgba(0, 0, 0, .6);
  border: 2px solid #6a7787;
  color: #fff;
  font-family: inherit;
  font-weight: 900;
  letter-spacing: .1em;
  padding: .6em 1.4em;
  border-radius: 2em;
  cursor: pointer;
}

/* menu */
.bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.menu-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2vh;
  padding: 3vh;
}
.menu-logo { width: min(56vw, 700px); max-height: 38vh; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 .3em .5em #000); }
.menu-btns { display: flex; flex-direction: column; gap: 1.4vh; min-width: min(60vw, 320px); }

/* sheets */
.sheet {
  background: linear-gradient(#1a212b, #0e1218);
  border: .2em solid #000;
  border-radius: 1em;
  box-shadow: var(--shadow);
  padding: clamp(14px, 2.4vw, 30px);
  max-width: min(92vw, 880px);
  max-height: 92vh;
  overflow: auto;
  text-align: left;
}
.sheet-sm { max-width: min(92vw, 420px); text-align: center; display: flex; flex-direction: column; gap: 1.4vh; }
.sheet h2 {
  margin: 0 0 .6em;
  font-size: clamp(18px, 2.4vw, 32px);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  color: var(--tips);
}
.how-grid { display: grid; grid-template-columns: minmax(0, 34%) 1fr; gap: clamp(10px, 1.6vw, 22px); align-items: start; }
.how-art { width: 100%; border-radius: .6em; border: .16em solid #000; image-rendering: pixelated; }
.how-list { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: .5em; }
.how-list li { font-size: clamp(11px, 1.15vw, 16px); line-height: 1.45; color: #cdd7e2; }
.how-list b { color: #fff; }
.keys { text-align: center; color: #8b98a8; font-size: clamp(10px, 1.05vw, 14px); margin: 1.2em 0; }

/* Sheets and the shop scroll internally, so their confirm button sticks to the
   bottom of the panel — otherwise a short viewport hides it below the fold. */
.sheet .big-btn { display: block; margin: 0 auto; }
.sheet > .big-btn:last-child,
.shop-inner > .big-btn:last-child {
  position: sticky;
  bottom: -.2em;
  z-index: 2;
  box-shadow: 0 .25em 0 #0d3a1d, 0 -.6em .8em .6em rgba(10, 14, 20, .92);
}

.dead { color: var(--blood-lit); font-size: clamp(24px, 3.4vw, 46px); margin: 0; letter-spacing: .1em; text-shadow: 0 .1em 0 #000; }
.dead-why { color: #cdd7e2; font-weight: 700; margin: 0; }
.stats { display: flex; flex-direction: column; gap: .3em; background: #0a0e13; border: .12em solid #000; border-radius: .5em; padding: .8em 1em; }
.stats div { display: flex; justify-content: space-between; font-size: clamp(11px, 1.1vw, 15px); }
.stats span { color: #8b98a8; font-weight: 700; }
.stats b { font-weight: 900; }

/* news bulletin */
.ov-news { background: rgba(2, 3, 5, .93); cursor: pointer; }
.news-frame { position: relative; width: min(70vw, 900px, calc(52vh * 1.37)); margin: 0 auto; }
.news-box { width: 100%; display: block; image-rendering: pixelated; }
.news-screen {
  position: absolute;
  left: 4.4%;
  top: 6.5%;
  width: 91%;
  height: 80%;
  overflow: hidden;
  background: linear-gradient(#1b2b3d, #0d1620);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.news-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(rgba(255, 255, 255, .05) 0 1px, transparent 1px 3px);
  pointer-events: none;
}
.news-anchor { height: 104%; object-fit: contain; image-rendering: pixelated; animation: anchorBob 3.5s ease-in-out infinite; }
.news-day {
  position: absolute;
  left: 3%;
  top: 5%;
  font-weight: 900;
  font-size: clamp(14px, 1.8vw, 26px);
  letter-spacing: .16em;
  color: var(--tips);
  text-shadow: 0 .12em 0 #000;
}
.news-lower { position: relative; width: min(70vw, 900px, calc(52vh * 1.37)); margin: -1.5% auto 0; }
.news-lower-box { width: 100%; display: block; image-rendering: pixelated; }
.news-headline {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0 4%;
  font-weight: 900;
  font-size: clamp(10px, 1.5vw, 21px);
  letter-spacing: .06em;
  color: #fff;
  text-transform: uppercase;
  text-shadow: 0 .1em 0 #000;
}
.news-sub { color: #9fb0c2; font-weight: 700; margin: .8vh 0; font-size: clamp(11px, 1.2vw, 16px); }

/* phase card */
.card-inner { animation: cardIn .5s cubic-bezier(.2, 1.4, .4, 1); }
.card-inner h1 {
  margin: 0;
  font-size: clamp(30px, 6vw, 92px);
  letter-spacing: .16em;
  color: var(--blood-lit);
  text-shadow: 0 .06em 0 #000, 0 .14em 0 rgba(0, 0, 0, .6);
}
.card-inner p { margin: .3em 0 0; font-weight: 800; letter-spacing: .3em; color: #cdd7e2; font-size: clamp(12px, 1.6vw, 22px); }

/* shop */
.shop-inner {
  position: relative;
  background: rgba(8, 11, 16, .88);
  border: .18em solid #000;
  border-radius: 1em;
  padding: clamp(12px, 2vw, 26px);
  width: min(94vw, 900px);
  max-height: 94vh;
  overflow: auto;
  box-shadow: var(--shadow);
}
.shop-inner h2 { color: var(--tips); margin: 0 0 .4em; font-size: clamp(18px, 2.6vw, 34px); letter-spacing: .1em; text-transform: uppercase; }
.shop-summary { display: flex; justify-content: center; flex-wrap: wrap; gap: .5em 1.4em; margin-bottom: .8em; }
.shop-summary div { font-size: clamp(10px, 1.1vw, 15px); color: #9fb0c2; font-weight: 700; }
.shop-summary b { color: #fff; }
.shop-wallet { font-weight: 800; color: #cdd7e2; margin: 0 0 1em; }
.shop-wallet b { color: var(--tips); font-size: 1.2em; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: .7em; margin-bottom: 1.2em; }
.shop-card {
  background: #131922;
  border: .12em solid #2b3543;
  border-radius: .6em;
  padding: .7em;
  display: flex;
  flex-direction: column;
  gap: .3em;
  text-align: left;
}
.shop-card h3 { margin: 0; font-size: clamp(11px, 1.2vw, 16px); color: #fff; }
.shop-card p { margin: 0; font-size: clamp(9.5px, 1.02vw, 13px); color: #93a0b0; line-height: 1.35; flex: 1; }
.shop-card .lvl { font-size: .78em; color: #6ee08a; font-weight: 800; letter-spacing: .08em; }
.shop-card button {
  font-family: inherit;
  font-weight: 900;
  border-radius: .4em;
  border: .1em solid #000;
  padding: .45em;
  cursor: pointer;
  background: linear-gradient(#e0b23c, #a97d16);
  color: #241a02;
}
.shop-card button:disabled { background: #2a323c; color: #67707c; cursor: not-allowed; }

/* victory */
.win-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .8; }
.win-inner {
  position: relative;
  background: rgba(4, 6, 10, .78);
  border: .18em solid #000;
  border-radius: 1em;
  padding: clamp(16px, 2.4vw, 30px);
  width: min(90vw, 520px);
  display: flex;
  flex-direction: column;
  gap: 1.4vh;
  box-shadow: var(--shadow);
}
.win-inner h1 { margin: 0; color: var(--tips); font-size: clamp(22px, 3.4vw, 44px); letter-spacing: .1em; }
.win-sub { margin: 0; color: #cdd7e2; font-weight: 700; font-size: clamp(11px, 1.2vw, 16px); }

/* ---------------------------------------------------------- minigames ---- */

.ov-mini { background: rgba(3, 5, 8, .72); }
.mini {
  background: linear-gradient(#1c2530, #0d1218);
  border: .2em solid #000;
  border-radius: 1em;
  box-shadow: var(--shadow);
  padding: clamp(14px, 2vw, 26px);
  width: min(92vw, 560px);
  display: flex;
  flex-direction: column;
  gap: 1.4vh;
  align-items: stretch;
  text-align: center;
}
.mini h2 { margin: 0; font-size: clamp(16px, 2.2vw, 28px); letter-spacing: .1em; text-transform: uppercase; color: var(--tips); }
.mini .sub { margin: 0; color: #93a0b0; font-weight: 700; font-size: clamp(10px, 1.1vw, 14px); }
.mini .cancel { background: none; border: none; color: #6a7787; font-family: inherit; font-weight: 700; cursor: pointer; padding: .4em; }
.mini .cancel:hover { color: #fff; }

/* generic timing bar used by grill / fryer / drinks */
.gauge {
  position: relative;
  height: 3.4em;
  background: #090c11;
  border: .16em solid #000;
  border-radius: .5em;
  overflow: hidden;
  box-shadow: inset 0 .2em .6em rgba(0, 0, 0, .7);
  font-size: clamp(10px, 1.1vw, 15px);
}
.gauge .zone { position: absolute; top: 0; bottom: 0; background: rgba(95, 214, 122, .3); border-left: .12em solid #6ee08a; border-right: .12em solid #6ee08a; }
.gauge .zone.perfect { background: rgba(255, 207, 74, .38); border-color: var(--tips); }
.gauge .needle { position: absolute; top: 0; bottom: 0; width: .28em; background: #fff; box-shadow: 0 0 .6em #fff; transform: translateX(-50%); }
.gauge .fill { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #3c6ad6, #7cc2ff); }
.gauge .fill.hot { background: linear-gradient(90deg, #d6553c, #ffb46a); }
.gauge .tick { position: absolute; top: 0; bottom: 0; width: .18em; background: var(--tips); }
.gauge-lbl { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 900; letter-spacing: .1em; text-shadow: 0 .1em 0 #000; }

.hit-btn {
  font-family: inherit;
  font-weight: 900;
  font-size: clamp(15px, 2vw, 26px);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  padding: .8em;
  border-radius: .6em;
  border: .14em solid #ff8f96;
  background: linear-gradient(#b8232a, #7d1216);
  box-shadow: 0 .28em 0 #3d080a, 0 .5em 1em rgba(0, 0, 0, .5);
  cursor: pointer;
}
.hit-btn:active { transform: translateY(.24em); box-shadow: 0 .04em 0 #3d080a; }

/* choice grid (drinks / sides) */
.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(5.4em, 1fr)); gap: .6em; }
.choice {
  background: #0d1218;
  border: .14em solid #2b3543;
  border-radius: .6em;
  padding: .5em .3em .4em;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3em;
  font-family: inherit;
  color: #cdd7e2;
  font-weight: 800;
  font-size: clamp(9px, 1vw, 13px);
}
.choice img { width: 3.4em; height: 3.4em; object-fit: contain; image-rendering: pixelated; }
.choice.want { border-color: var(--tips); box-shadow: 0 0 .8em rgba(255, 207, 74, .4); }
.choice:active { transform: translateY(.12em); }

/* chop board */
.chop {
  position: relative;
  height: 8em;
  background: #2a1c10 url("../assets/opt/Lettuce.png") center/contain no-repeat;
  border: .16em solid #000;
  border-radius: .5em;
  overflow: hidden;
  font-size: clamp(10px, 1.1vw, 15px);
}
.chop .knife {
  position: absolute;
  top: -.4em;
  font-size: 3.2em;
  transform: translateX(-50%) rotate(28deg);
  transition: top .09s;
  filter: drop-shadow(0 .1em .2em #000);
}
.chop .knife.bloody { filter: drop-shadow(0 0 .3em var(--blood)) drop-shadow(0 .1em .2em #000); }
.chop .band { position: absolute; left: 0; right: 0; bottom: 0; height: 1.1em; background: rgba(0, 0, 0, .55); }
.chop .band .zone { position: absolute; top: 0; bottom: 0; background: rgba(95, 214, 122, .55); }
.chop .cuts { position: absolute; right: .4em; top: .3em; font-weight: 900; font-size: 1.1em; text-shadow: 0 .1em 0 #000; }

/* scrub area */
.scrub {
  position: relative;
  height: 9em;
  border: .16em solid #000;
  border-radius: .5em;
  background: #0f1620 center/contain no-repeat;
  display: grid;
  place-items: center;
  touch-action: none;
  cursor: grab;
  overflow: hidden;
}
.scrub .hint-txt { font-weight: 900; letter-spacing: .1em; color: #6a7787; pointer-events: none; }
.scrub .suds { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .75); pointer-events: none; animation: sudsPop .6s forwards; }

.progress {
  height: 1.1em;
  background: #090c11;
  border: .14em solid #000;
  border-radius: .6em;
  overflow: hidden;
}
.progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #1e6e69, var(--hyg)); transition: width .12s; }

/* ------------------------------------------------------------ keyframes -- */

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes flashKit { 0% { color: var(--tips); transform: scale(1.3); } 100% { color: #fff; transform: scale(1); } }
@keyframes toastUp {
  0% { opacity: 0; transform: translateY(.6em) scale(.9); }
  15% { opacity: 1; transform: translateY(0) scale(1); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-1.4em); }
}
@keyframes pop { 0% { transform: scale(.4) translateY(-1em); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes cardIn { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
@keyframes anchorBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.2%); } }
@keyframes sudsPop { from { opacity: .9; transform: scale(.3); } to { opacity: 0; transform: scale(1.6); } }

/* --------------------------------------------------------- small screens -- */

@media (max-height: 560px) {
  .ticket { width: 12.5em; top: 15%; }
  .how-grid { grid-template-columns: 1fr; }
  .how-art { display: none; }
  .how-list li { font-size: clamp(10px, 1.05vw, 13px); line-height: 1.3; }
  .how-list { gap: .3em; }
  .keys { margin: .6em 0; }
  .sheet { padding: 10px 12px; }
  .sheet h2 { margin-bottom: .3em; }
  .shop-inner { padding: 10px 12px; }
  .shop-grid { gap: .45em; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
  .shop-card { padding: .45em; gap: .15em; }
  .shop-card p { display: none; }
  .shop-summary { margin-bottom: .3em; }
  .shop-wallet { margin-bottom: .5em; }
  .big-btn { padding: .45em 1.1em; }
  .stats { padding: .5em .7em; }
  .news-frame, .news-lower { width: min(58vw, 900px, calc(44vh * 1.37)); }
  .ov { row-gap: .4vh; padding: 1%; }
}