@font-face {
  font-family: 'Rye';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/Rye-Regular.woff2') format('woff2'),
       url('assets/fonts/Rye-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('assets/fonts/cinzel-900-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;
}
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('assets/fonts/cinzel-900-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cinzel Decorative';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/cinzel-decorative-400-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;
}
@font-face {
  font-family: 'Cinzel Decorative';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/cinzel-decorative-700-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 {
  color-scheme: light;
  --ink: #1d2433;
  --muted: #697386;
  --paper: #f7f4ed;
  --panel: #fffdf8;
  --line: #d8cebd;
  --gold: #d99a23;
  --green: #4a8f55;
  --red: #aa4d38;
  --blue: #3d718f;
  --shadow: 0 16px 50px rgba(50, 43, 31, 0.14);
}

* {
  box-sizing: border-box;
}

/* ── Mobile / Touch baseline ─────────────────────────────────────────────── */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  height: -webkit-fill-available;
}

img {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
  -webkit-user-drag: none;
}

body {
  -webkit-tap-highlight-color: transparent;
  min-height: -webkit-fill-available;
}

button {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

body {
  margin: 0;
  min-height: 100vh;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(247, 244, 237, 0.95)),
    repeating-linear-gradient(90deg, rgba(95, 82, 58, 0.05) 0 1px, transparent 1px 28px),
    var(--paper);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button {
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.shell {
  width: min(1536px, calc(100vw - 24px));
  margin: 0 auto;
  padding: 18px 0 28px;
}

.topbar,
.stats,
.game-stage,
.log {
  border: 1px solid var(--line);
  background: rgba(255, 253, 248, 0.92);
  box-shadow: var(--shadow);
}

.topbar {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 18px;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
}

.header-art {
  display: contents;
}

.header-skin {
  display: none;
}

.topbar.playing {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(188px, 224px);
  align-items: stretch;
  gap: 10px;
  row-gap: 0;
  padding: 8px;
  border-color: rgba(39, 20, 14, 0.34);
  background: linear-gradient(135deg, #2a1710, #120b08);
  box-shadow: var(--shadow);
  overflow: visible;
}

.topbar.playing .header-art {
  position: relative;
  display: block;
  min-width: 0;
  min-height: clamp(158px, 23vw, 292px);
  aspect-ratio: 1480 / 500;
  overflow: hidden;
  border-radius: 0;
  background: #24120d;
}

.topbar.playing .header-skin {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.brand-sign {
  position: relative;
  z-index: 1;
  min-height: 92px;
  display: grid;
  align-items: center;
  padding: 18px 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.88);
  color: var(--ink);
}

.topbar.playing .brand-sign {
  position: absolute;
  left: 20%;
  top: 37%;
  width: 60%;
  height: 28%;
  min-height: 0;
  padding: 0 2%;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}

.brand-copy {
  position: relative;
  z-index: 1;
  text-align: center;
  min-width: 0;
}

.topbar.playing .brand-copy,
.topbar.playing .brand-sign .brand-copy {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.brand-sign .eyebrow {
  color: var(--muted);
  letter-spacing: 0.14em;
}

.topbar.playing .brand-sign .eyebrow,
.topbar.playing .brand-sign .owner-line,
.topbar.playing .owner-line {
  display: none;
}

.brand-sign h1 {
  color: var(--ink);
  letter-spacing: 0;
}

.topbar.playing .brand-sign h1 {
  display: block;
  width: 100%;
  max-height: 100%;
  margin: 0;
  color: #f2efe6;
  font-family: "Rye", Georgia, serif;
  font-size: clamp(13px, 4vw, 18px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 1px;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  overflow-wrap: anywhere;
  white-space: normal;
}

.owner-line {
  margin: 0;
  color: var(--muted);
  font-weight: 700;
}

.owner-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 8px;
}

.text-button {
  min-height: 30px;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffdf8;
  color: var(--blue);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 900;
}

.text-button.hidden {
  display: none;
}

.dev-button {
  color: var(--red);
}

.game-ui.hidden {
  display: none;
}

.character-picker {
  display: grid;
  grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1.2fr);
  gap: 18px;
  align-items: stretch;
  padding: 18px;
  border: 1px solid var(--line);
  border-top: 0;
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 236, 159, 0.75), transparent 28%),
    linear-gradient(135deg, #fff8e7, #ecf5ee);
  box-shadow: var(--shadow);
}

/* ─── Splash Screen ─── */
.splash-screen {
  position: fixed;
  inset: 0;
  background: #0d0a04;
  z-index: 9999;
  transition: opacity 0.6s ease;
  overflow: hidden;
}

.splash-screen.splash-fade {
  opacity: 0;
  pointer-events: none;
}

.splash-screen.splash-resume .splash-bar {
  animation-duration: 0.35s;
}

.splash-screen.splash-resume .splash-loading-text {
  display: none;
}

.splash-img {
  position: absolute;
  top: env(safe-area-inset-top, 0px);
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: calc(100% - env(safe-area-inset-top, 0px));
  object-fit: contain;
  object-position: top center;
}

.splash-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-bottom: 14px;
}

.splash-bar-new-only {
  width: min(360px, 80vw);
}

.splash-start-btn {
  display: none;
  width: calc(100% - 48px);
  margin: 20px 24px 0;
  padding: 18px 0;
  background: linear-gradient(160deg, #e8b830 0%, #c8920a 60%, #a87008 100%);
  border: 2px solid rgba(255,220,100,0.7);
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(200,146,10,0.55), 0 1px 0 rgba(255,240,160,0.3) inset;
  font-family: 'Cinzel', serif;
  font-weight: 900;
  font-size: clamp(1.2rem, 5.5vw, 1.5rem);
  letter-spacing: 0.1em;
  color: #3a1f00;
  text-shadow: 0 1px 2px rgba(255,200,80,0.4);
  cursor: pointer;
  text-transform: uppercase;
}

.splash-bar-wrap {
  width: 100%;
  height: 5px;
  background: rgba(255,255,255,0.15);
  border-radius: 3px;
  overflow: hidden;
}

.splash-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #d99a23, #f5c842);
  border-radius: 3px;
  animation: splashLoad 2.6s cubic-bezier(0.15, 0.5, 0.6, 1.0) forwards;
}

@keyframes splashLoad {
  0%   { width: 0%; }
  30%  { width: 28%; }
  65%  { width: 62%; }
  90%  { width: 88%; }
  100% { width: 100%; }
}

.splash-loading-text {
  color: rgba(255,255,255,0.4);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0;
}

/* ─── Welcome / Intro Step ─── */
.character-picker.intro-step {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 0;
  align-items: stretch;
  padding: 0;
  overflow: hidden;
  min-height: 420px;
}

.character-picker.intro-step .opening-menu {
  padding: 32px 28px;
  background: linear-gradient(135deg, #f7f4ed 0%, #fffdf8 100%);
}

/* Left column — typographic visual */
.welcome-visual {
  background:
    radial-gradient(ellipse at 20% 80%, rgba(100,60,10,0.6) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 10%, rgba(30,80,50,0.5) 0%, transparent 50%),
    linear-gradient(160deg, #0f1f16 0%, #1a3020 60%, #0d1a10 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 28px;
  padding: 36px 32px;
  position: relative;
  overflow: hidden;
}

.welcome-visual::before {
  content: "BREW";
  position: absolute;
  top: -16px;
  left: -12px;
  font-size: 9rem;
  font-weight: 900;
  color: rgba(255,255,255,0.03);
  letter-spacing: -0.04em;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.welcome-tagline-eyebrow {
  color: rgba(245,233,200,0.45);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
}

.welcome-big-copy {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.welcome-big-line {
  color: #f5e9c8;
  font-size: 2.4rem;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.welcome-big-line.accent {
  color: #f5c842;
}

.welcome-milestones {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 20px;
}

.welcome-milestone {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.wm-num {
  color: #f5c842;
  font-size: 1.3rem;
  font-weight: 900;
  line-height: 1;
  min-width: 28px;
}

.wm-label {
  color: rgba(245,233,200,0.5);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.3;
}

/* Right column — start menu */
.welcome-headline {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
}

.welcome-headline h2 {
  font-size: 1.25rem;
  line-height: 1.25;
  margin: 0;
  font-weight: 900;
}

.welcome-headline p {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.5;
  margin: 0;
}

.welcome-cta {
  min-height: auto !important;
  padding: 20px !important;
}

.welcome-cta strong {
  display: block;
  font-size: 1.05rem;
  font-weight: 900;
  margin-bottom: 4px;
}

.welcome-cta span {
  font-size: 0.82rem !important;
  line-height: 1.4;
}


#walletBar.hidden {
  display: none;
}

.character-picker.hidden {
  display: none;
}

.intro-copy {
  display: grid;
  align-content: center;
  gap: 8px;
}

.intro-copy p:last-child {
  margin: 0;
  color: var(--muted);
  font-weight: 700;
  line-height: 1.45;
}

.character-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.opening-menu,
.character-picker.confirm-step {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  border: 1px solid #3a2c18;
  border-radius: 10px;
  min-height: min(100dvh, 100vh);
  overflow: hidden;
  background: url('assets/backgrounds/brick_bg.webp') center center / cover no-repeat;
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(213, 174, 90, 0.18);
}
.character-picker.confirm-step .intro-copy {
  display: block;
  padding: 26px 24px 20px;
  position: relative;
  background: rgba(0,0,0,0.35);
}
.character-picker.confirm-step .intro-copy::after {
  content: "";
  position: absolute;
  left: 24px; right: 24px; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(213,174,90,0.55), transparent);
}
.confirm-step-head { text-align: center; }
.confirm-step-sub {
  font-size: 0.95rem;
  color: rgba(246,239,221,0.65);
  margin: 4px 0 0;
  font-style: italic;
}
.opening-confirm {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px 22px 36px;
  flex: 1;
}
.confirm-actions {
  margin-top: auto;
}
.confirm-brewer-row {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(20,10,5,0.55);
  border: 1px solid rgba(213,174,90,0.3);
  border-radius: 12px;
  padding: 14px 16px;
}
.confirm-avatar-img {
  width: 90px;
  height: 110px;
  flex-shrink: 0;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5));
}
.confirm-grand-opening-img {
  width: 100%;
  height: auto;
  flex: none;
  display: block;
  border-radius: 10px;
  opacity: 0.92;
  filter: drop-shadow(0 2px 12px rgba(0,0,0,0.4));
}
.confirm-brewer-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.confirm-brewer-name {
  font-size: 1.15rem;
  font-weight: 900;
  color: #f6efdd;
  font-family: Georgia, serif;
}
.confirm-brewer-role {
  font-size: 0.8rem;
  color: #d8b05a;
  font-style: italic;
  font-weight: 700;
}
.confirm-brewer-perk {
  font-size: 0.78rem;
  color: rgba(246,239,221,0.6);
  line-height: 1.4;
}
.confirm-name-field {
  display: grid;
  gap: 8px;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
.confirm-name-label {
  font-size: 1.35rem !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #f6efdd !important;
  font-weight: 900;
  font-family: Georgia, serif;
  text-align: center;
}
.confirm-name-field input {
  text-align: center;
}
.confirm-name-field input,
.confirm-name-field input:not(:focus) {
  width: 100%;
  min-height: 56px;
  padding: 12px 16px;
  border: 2px solid rgba(213,174,90,0.4) !important;
  border-radius: 10px !important;
  background: rgba(10,5,2,0.6) !important;
  color: #f6efdd !important;
  font-size: 1.15rem;
  font-weight: 800;
  font-family: Georgia, serif;
  letter-spacing: 0.02em;
}
.confirm-name-field input::placeholder { color: rgba(246,239,221,0.4); font-style: italic; font-weight: 600; }
.confirm-name-field input:focus {
  outline: none !important;
  border-color: #d8b05a !important;
  background: rgba(0,0,0,0.35) !important;
  box-shadow: 0 0 0 3px rgba(216,176,90,0.25) !important;
}
.confirm-actions {
  margin-top: auto;
  grid-template-columns: 1fr 1.6fr !important;
}
.confirm-back-btn {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  color: rgba(246,239,221,0.7) !important;
}
.confirm-open-btn {
  background: linear-gradient(180deg, #f6c75d 0%, #d98b22 54%, #9f5515 100%) !important;
  color: #fff6dc !important;
  font-family: 'Cinzel Decorative', Georgia, serif !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-shadow: 0 1px 1px rgba(55,24,0,0.75) !important;
  box-shadow: inset 0 1px 0 rgba(255,248,210,0.55), 0 4px 0 #6e3510, 0 7px 18px rgba(0,0,0,0.45) !important;
  border: 1px solid #f0c36b !important;
  border-radius: 10px !important;
}
.confirm-open-btn:active { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255,248,210,0.35), 0 1px 0 #6e3510 !important; }

.menu-card {
  display: grid;
  gap: 7px;
  min-height: 110px;
  padding: 16px;
  border: 1px solid #b7a98e;
  border-radius: 8px;
  background:
    radial-gradient(circle at 16% 18%, rgba(255, 236, 159, 0.68), transparent 30%),
    #fffdf8;
  color: inherit;
  text-align: left;
  font: inherit;
  font-weight: 900;
}

button.menu-card {
  cursor: pointer;
}

.menu-card span {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 750;
  line-height: 1.4;
}

.primary-menu {
  border-color: rgba(47, 85, 59, 0.72);
  background:
    radial-gradient(circle at 16% 18%, rgba(188, 229, 154, 0.58), transparent 30%),
    #f7fff1;
}

.opening-actions {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 10px;
  align-items: center;
}

.brewery-name-field {
  display: grid;
  gap: 7px;
  padding: 12px;
  border: 1px solid #b7a98e;
  border-radius: 8px;
  background: #fffdf8;
  font-weight: 900;
}

.brewery-name-field span {
  color: var(--muted);
  font-size: 0.9rem;
  text-transform: uppercase;
}

.brewery-name-field input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #b7a98e;
  border-radius: 8px;
  background: #fff8e7;
  color: var(--ink);
  font: inherit;
  font-weight: 850;
}

.brewery-name-field input:focus {
  outline: 3px solid rgba(217, 154, 35, 0.28);
  border-color: var(--gold);
}

.opening-actions.full-width {
  grid-column: 1 / -1;
}

.opening-actions .text-button {
  justify-self: center;
}

.character-card {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 7px;
  min-height: 218px;
  padding: 12px 10px;
  border: 1px solid #b7a98e;
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 246, 209, 0.9), transparent 42%),
    linear-gradient(180deg, #fffdf8, #f4ecda);
  cursor: pointer;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(50, 43, 31, 0.12);
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

/* .character-card:hover — moved to @media (hover: hover) */

.character-card.active {
  outline: 3px solid rgba(217, 154, 35, 0.45);
  background: #fff2cb;
}

.character-card small {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.25;
}

.character-tagline {
  color: var(--red);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.82rem;
  font-style: italic;
  font-weight: 800;
  letter-spacing: 0;
}

.eyebrow {
  margin: 0 0 4px;
  color: var(--red);
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
}

h1,
h2 {
  margin: 0;
  line-height: 1.05;
}

h1 {
  font-size: clamp(1.8rem, 5vw, 3rem);
}

h2 {
  font-size: 1.18rem;
}

.wallet {
  display: grid;
  gap: 3px;
  min-width: 142px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 246, 223, 0.95);
  text-align: right;
}

.wallet span,
.stats span,
.small-stat span,
.upgrade-card span,
.batch-box span,
.research-card span {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
}

.wallet strong {
  color: var(--green);
  font-size: 1.45rem;
}

.stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 0;
  box-shadow: none;
}

.stats article {
  min-width: 0;
  padding: 13px 14px;
  border-right: 1px solid var(--line);
}

.stats article:last-child {
  border-right: 0;
}

.stats strong {
  display: block;
  margin-top: 3px;
  font-size: 1.25rem;
}

.tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0;
}

.tab,
.secondary,
.action {
  min-height: 44px;
  border: 1px solid #b7a98e;
  border-radius: 8px;
  background: #fffdf8;
  cursor: pointer;
  font-weight: 800;
  transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

/* hover effects moved to @media (hover: hover) block — see Touch/Mobile section */

.tab.active {
  background: var(--ink);
  color: #fffdf8;
}

.game-stage {
  overflow: visible;
  border-radius: 8px;
}

.scene {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10.8;
  overflow: hidden;
  background: #1a0e08; /* dark fallback while photo loads; illustrated-scene handles everything */
}

/* No ::after grass strip — illustrated-scene suppresses pseudo-elements and photo covers the scene */

.scene-brew {
  background:
    radial-gradient(circle at 76% 18%, rgba(255, 231, 143, 0.5), transparent 16%),
    linear-gradient(180deg, #7aa6bc 0%, #9fc8d3 44%, #b88955 45%, #7b5637 100%);
}

.scene-pub {
  background:
    radial-gradient(circle at 24% 24%, rgba(255, 221, 106, 0.5), transparent 18%),
    radial-gradient(circle at 74% 22%, rgba(255, 167, 118, 0.35), transparent 18%),
    linear-gradient(180deg, #314056 0%, #576d7f 42%, #c79b55 43%, #875c34 100%);
}

.scene-distribution {
  background:
    radial-gradient(circle at 18% 14%, rgba(255, 238, 151, 0.65), transparent 14%),
    linear-gradient(180deg, #8cc8dd 0%, #d0eef2 48%, #838f86 49%, #636f66 100%);
}

.skyline {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, transparent 0 8%, rgba(71, 77, 72, 0.16) 8% 14%, transparent 14% 24%, rgba(71, 77, 72, 0.13) 24% 31%, transparent 31% 100%);
  opacity: 0.5;
}

.cloud,
.rolling-hills,
.scene-path,
.warm-window,
.brew-shelves,
.pub-shelves {
  position: absolute;
  pointer-events: none;
}

.cloud {
  z-index: 1;
  width: 92px;
  height: 28px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  filter: drop-shadow(0 5px 0 rgba(126, 173, 187, 0.18));
  animation: cloudDrift 12s ease-in-out infinite;
}

.cloud::before,
.cloud::after {
  content: "";
  position: absolute;
  bottom: 8px;
  border-radius: 50%;
  background: inherit;
}

.cloud::before {
  left: 13px;
  width: 34px;
  height: 34px;
}

.cloud::after {
  right: 15px;
  width: 42px;
  height: 42px;
}

.cloud-one {
  left: 9%;
  top: 32px;
}

.cloud-two {
  right: 10%;
  top: 58px;
  transform: scale(0.78);
  animation-delay: -5s;
}

.rolling-hills {
  z-index: 1;
  left: -6%;
  right: -6%;
  bottom: 74px;
  height: 72px;
  background:
    radial-gradient(ellipse at 14% 100%, #6da65e 0 34%, transparent 35%),
    radial-gradient(ellipse at 50% 100%, #83bc67 0 38%, transparent 39%),
    radial-gradient(ellipse at 86% 100%, #5f9857 0 36%, transparent 37%);
  opacity: 0.85;
}

.scene-path {
  z-index: 2;
  left: 8%;
  right: 10%;
  bottom: 6px;
  height: 74px;
  border-radius: 50% 50% 0 0;
  background: radial-gradient(ellipse at 50% 100%, rgba(226, 184, 112, 0.84) 0 45%, transparent 46%);
}

.warm-window {
  z-index: 1;
  top: 32px;
  width: 86px;
  height: 112px;
  border: 5px solid rgba(76, 51, 35, 0.65);
  border-radius: 20px 20px 8px 8px;
  background:
    linear-gradient(90deg, transparent 46%, rgba(76, 51, 35, 0.4) 47% 53%, transparent 54%),
    linear-gradient(180deg, transparent 44%, rgba(76, 51, 35, 0.35) 45% 52%, transparent 53%),
    radial-gradient(circle at 50% 42%, rgba(255, 238, 145, 0.95), #d8914b 72%);
  box-shadow: 0 0 30px rgba(255, 193, 89, 0.35);
}

.window-one {
  left: 8%;
}

.window-two {
  right: 9%;
  animation: windowGlow 2.2s ease-in-out infinite;
}

.brew-shelves,
.pub-shelves {
  z-index: 1;
  left: 28%;
  right: 26%;
  top: 42px;
  height: 78px;
  border-top: 8px solid rgba(78, 48, 29, 0.62);
  border-bottom: 8px solid rgba(78, 48, 29, 0.62);
  background:
    radial-gradient(circle at 12% 28%, #6ac0d6 0 8px, transparent 9px),
    radial-gradient(circle at 34% 72%, #e1b24d 0 8px, transparent 9px),
    radial-gradient(circle at 60% 30%, #8fc96d 0 8px, transparent 9px),
    radial-gradient(circle at 82% 72%, #d67454 0 8px, transparent 9px);
}

.pub-shelves {
  left: 44%;
  right: 8%;
  top: 88px;
}

.building {
  position: absolute;
  bottom: 48px;
  border: 3px solid rgba(60, 46, 33, 0.7);
  border-radius: 5px 5px 1px 1px;
}

.farm-building {
  left: 6%;
  width: 160px;
  height: 74px;
  background: #c96f38;
}

.farm-building::before {
  content: "";
  position: absolute;
  left: -16px;
  top: -38px;
  width: 190px;
  height: 48px;
  background: #7c4931;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.brew-building {
  left: 39%;
  width: 170px;
  height: 112px;
  background: #b8a083;
}

.brew-building::before,
.brew-building::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 28px;
  height: 142px;
  border-radius: 16px 16px 4px 4px;
  background: #6e7b82;
}

.brew-building::before {
  left: 24px;
}

.brew-building::after {
  right: 24px;
}

.pub-building {
  right: 8%;
  width: 180px;
  height: 92px;
  background: #d9b65e;
}

.pub-building::before {
  content: "BREW PUB";
  position: absolute;
  left: 28px;
  top: 18px;
  padding: 5px 10px;
  border: 2px solid #593a26;
  background: #fff8df;
  font-size: 0.72rem;
  font-weight: 900;
}

.truck {
  position: absolute;
  right: 18%;
  bottom: 26px;
  width: 78px;
  height: 34px;
  border-radius: 5px;
  background: var(--blue);
  animation: truckMove 9s ease-in-out infinite;
}

.truck::before {
  content: "";
  position: absolute;
  right: -24px;
  bottom: 0;
  width: 30px;
  height: 26px;
  border-radius: 4px 4px 2px 2px;
  background: #526a79;
}

.truck::after {
  content: "";
  position: absolute;
  left: 10px;
  bottom: -8px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #1c2429;
  box-shadow: 52px 0 #1c2429, 84px 0 #1c2429;
}

.worker {
  position: absolute;
  bottom: 31px;
  width: 18px;
  height: 25px;
  border-radius: 9px 9px 4px 4px;
  background: #2f5f72;
  animation: workerWalk 5.5s linear infinite;
}

.worker::before {
  content: "";
  position: absolute;
  left: 4px;
  top: -10px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #c58b62;
}

.worker::after {
  content: "";
  position: absolute;
  left: 2px;
  bottom: -6px;
  width: 5px;
  height: 8px;
  background: #2a2521;
  box-shadow: 9px 0 #2a2521;
}

.worker-one {
  left: 12%;
}

.worker-two {
  left: 48%;
  animation-delay: -2s;
  background: #7c4a80;
}

.worker-three {
  left: 72%;
  animation-delay: -3.5s;
  background: #9b5e35;
}

.steam {
  position: absolute;
  bottom: 164px;
  left: 46%;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.68);
  animation: steamRise 3.4s ease-in infinite;
}

.steam-two {
  left: 52%;
  animation-delay: -1.8s;
}

.tap-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.tap-button {
  position: relative;
  min-height: 92px;
  padding: 12px 8px;
  overflow: hidden;
  border: 1px solid #b7a98e;
  border-radius: 8px;
  background: #fff8e7;
  cursor: pointer;
  font-weight: 900;
}

.tap-button strong,
.tap-button span {
  display: block;
}

.tap-button .tap-icon {
  font-size: 1.8rem;
  line-height: 1;
  margin-bottom: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.tap-button .tap-icon .tap-svg-icon {
  width: 1.8rem;
  height: 1.8rem;
  display: block;
}
.tap-ingredient-img {
  width: 2.2rem;
  height: 2.2rem;
  object-fit: contain;
  display: block;
}

.tap-button .tap-amount {
  color: var(--green);
  font-size: 0.9rem;
  text-transform: uppercase;
}

.tap-button.pop {
  animation: buttonPop 240ms ease;
}

.tap-button.pop::after {
  content: attr(data-pop);
  position: absolute;
  right: 10px;
  top: 9px;
  color: var(--green);
  font-weight: 900;
  animation: floatUp 650ms ease forwards;
}

.research-lab {
  margin: 0 0 0;
  padding: 12px;
  border: 1px solid rgba(183, 169, 142, 0.78);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 248, 231, 0.92), rgba(235, 246, 239, 0.92));
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.section-heading h3 {
  margin: 0;
  font-size: 1.05rem;
}

.section-heading > span {
  max-width: 260px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
  text-align: right;
}

.research-rates {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.research-rate-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(183,169,142,0.5);
  border-radius: 10px;
  padding: 8px 6px 6px;
  flex: 1;
}
.research-rate-icon {
  line-height: 1;
}
.research-rate-icon img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}
.research-rate-val {
  font-weight: 800;
  font-size: 0.78rem;
  color: #2a1f0a;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.research-rate-label {
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(42,31,10,0.5);
}

.unlock-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.5);
  border: 1px solid rgba(183,169,142,0.4);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
  text-align: center;
}
.unlock-banner-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(42,31,10,0.5);
  white-space: nowrap;
  line-height: 1;
}
.unlock-banner-beer {
  font-size: 0.85rem;
  font-weight: 800;
  color: #2a1f0a;
  flex: 1;
  min-width: 100px;
  line-height: 1;
  margin-top: -4px;
}
.unlock-track-pills {
  display: flex;
  gap: 6px;
  flex: 1;
  justify-content: space-evenly;
}
.unlock-track-pill {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 20px;
  color: #2a1f0a;
}
.unlock-track-pill img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}
.unlock-track-pill.met {
  background: rgba(60,140,60,0.15);
  color: #1a5c1a;
}
.unlock-track-pill.unmet {
  background: rgba(42,31,10,0.08);
  color: rgba(42,31,10,0.6);
}

.research-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  align-items: stretch;
}

.research-card {
  display: grid;
  grid-template-rows: auto minmax(42px, auto) auto auto 48px;
  gap: 9px;
  min-height: 224px;
  min-width: 0;
  padding: 12px;
  border: 1px solid #b7a98e;
  border-radius: 8px;
  background:
    radial-gradient(circle at 16% 14%, rgba(255, 238, 170, 0.74), transparent 28%),
    #fffdf8;
  box-shadow: 0 10px 22px rgba(50, 43, 31, 0.1);
}

.research-card button.action {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 48px;
  min-height: unset;
}
.research-card.ready {
  border-color: rgba(74, 143, 85, 0.82);
  background:
    radial-gradient(circle at 18% 12%, rgba(181, 231, 152, 0.58), transparent 30%),
    #fffdf8;
}

.research-card header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 8px;
}

.research-card h4 {
  margin: 0 0 4px;
  font-size: 0.96rem;
  overflow-wrap: anywhere;
}

.research-card header strong {
  flex: 0 0 auto;
  padding: 5px 7px;
  border-radius: 8px;
  background: rgba(74, 143, 85, 0.13);
  color: var(--green);
  font-size: 0.85rem;
}

.research-card p {
  min-height: 40px;
  margin: 0;
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 750;
  line-height: 1.35;
}

.research-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.research-meta span {
  padding: 4px 6px;
  border: 1px solid rgba(183, 169, 142, 0.72);
  border-radius: 8px;
  background: #fff8e7;
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: center;
  line-height: 1.2;
}

.research-meta.active-study span:last-child {
  grid-column: 1 / -1;
}

.research-progress {
  height: 8px;
}

.brewer-avatar {
  --shirt: #2f5f72;
  --apron: #f6eee0;
  --hair: #5b3926;
  --skin: #c58b62;
  --pants: #2c3f4e;
  position: relative;
  display: block;
  width: 54px;
  height: 92px;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 10px 5px rgba(35, 31, 27, 0.32));
}

.character-preview {
  width: 74px;
  height: 112px;
  margin: 6px 0 2px;
}

.brewer-avatar span {
  position: absolute;
  display: block;
}

.brewer-shadow {
  left: 9px;
  right: 9px;
  bottom: -6px;
  height: 8px;
  border-radius: 50%;
  background: rgba(30, 28, 25, 0.28);
}

.brewer-ears {
  left: 8px;
  top: 25px;
  width: 8px;
  height: 13px;
  border-radius: 55% 32% 55% 40%;
  background: var(--skin);
  box-shadow: 32px 0 0 -1px var(--skin);
}

.brewer-neck {
  left: 24px;
  top: 41px;
  width: 12px;
  height: 12px;
  border-radius: 0 0 7px 7px;
  background: linear-gradient(180deg, var(--skin), #b87452);
}

.brewer-body {
  left: 12px;
  bottom: 6px;
  width: 33px;
  height: 45px;
  border-radius: 7px 7px 6px 6px;
  background:
    linear-gradient(90deg, transparent 0 8px, var(--pants) 8px 13px, transparent 13px 20px, var(--pants) 20px 25px, transparent 25px),
    linear-gradient(160deg, rgba(255, 255, 255, 0.28) 0 18%, transparent 19%),
    linear-gradient(135deg, var(--shirt), var(--shirt)),
    linear-gradient(135deg, color-mix(in srgb, var(--shirt), white 16%), var(--shirt));
  box-shadow: inset -6px -7px rgba(0, 0, 0, 0.16), inset 4px 5px rgba(255, 255, 255, 0.1);
}

.brewer-apron {
  left: 22px;
  bottom: 6px;
  width: 14px;
  height: 35px;
  border-radius: 3px 3px 5px 5px;
  background:
    linear-gradient(90deg, transparent 0 3px, rgba(87, 78, 65, 0.18) 3px 5px, transparent 5px 10px, rgba(87, 78, 65, 0.18) 10px 12px, transparent 12px),
    linear-gradient(180deg, #fffdf8, var(--apron));
  box-shadow: inset 0 -5px rgba(0, 0, 0, 0.06);
}

.brewer-avatar .brewer-hat {
  display: none;
}

.brewer-head {
  left: 13px;
  top: 10px;
  width: 33px;
  height: 35px;
  border-radius: 38% 44% 46% 40%;
  background:
    linear-gradient(145deg, rgba(255, 235, 204, 0.82) 0 22%, transparent 23%),
    linear-gradient(135deg, #e8b184, var(--skin));
  box-shadow: inset -5px -5px rgba(83, 45, 31, 0.16), inset 4px 5px rgba(255, 240, 212, 0.16);
}

.brewer-hair {
  left: 9px;
  top: 3px;
  z-index: 7;
  width: 42px;
  height: 24px;
  border-radius: 5px 14px 9px 5px;
  background:
    linear-gradient(135deg, transparent 0 14%, var(--hair) 15% 35%, transparent 36%),
    linear-gradient(135deg, transparent 0 14%, color-mix(in srgb, var(--hair), white 14%) 15% 35%, transparent 36%),
    conic-gradient(from 225deg at 28% 90%, var(--hair) 0 68deg, transparent 69deg),
    conic-gradient(from 215deg at 55% 82%, var(--hair) 0 72deg, transparent 73deg),
    conic-gradient(from 210deg at 82% 82%, var(--hair) 0 68deg, transparent 69deg),
    var(--hair);
  clip-path: polygon(0 62%, 10% 28%, 27% 44%, 41% 8%, 55% 42%, 73% 12%, 84% 48%, 100% 36%, 86% 100%, 14% 100%);
  box-shadow: inset 4px 5px rgba(255, 255, 255, 0.08), inset -5px -4px rgba(0, 0, 0, 0.18);
}

.outfit-farm {
  --shirt: #e7c66b;
  --apron: #477b56;
  --pants: #476f4b;
}

.outfit-farm .brewer-hat {
  display: block;
  left: 8px;
  top: 5px;
  z-index: 7;
  width: 45px;
  height: 16px;
  border-radius: 4px 14px 6px 14px;
  background:
    linear-gradient(90deg, rgba(121, 82, 28, 0.18) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, #f5d46f, #c18b32);
  box-shadow: inset -4px -3px rgba(94, 57, 17, 0.14);
}

.outfit-farm .brewer-hat::before {
  content: "";
  position: absolute;
  left: 11px;
  top: -10px;
  width: 24px;
  height: 19px;
  border-radius: 6px 10px 4px 4px;
  background:
    linear-gradient(90deg, rgba(121, 82, 28, 0.18) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, #f9df86, #d4a341);
}

.outfit-farm .brewer-apron {
  background:
    linear-gradient(90deg, transparent 0 3px, rgba(255, 255, 255, 0.22) 3px 5px, transparent 5px 10px, rgba(255, 255, 255, 0.22) 10px 12px, transparent 12px),
    linear-gradient(180deg, #5f9463, #335c3e);
}

.outfit-brew {
  --shirt: #f4f7f4;
  --apron: #e8ece9;
  --pants: #d9dedb;
}

.outfit-brew .brewer-body {
  border: 1px solid rgba(86, 102, 101, 0.24);
  background:
    linear-gradient(90deg, transparent 0 9px, #d8ddda 9px 14px, transparent 14px 20px, #d8ddda 20px 25px, transparent 25px),
    linear-gradient(180deg, rgba(80, 97, 96, 0.14) 0 3px, transparent 3px 12px, rgba(80, 97, 96, 0.1) 12px 15px, transparent 15px),
    radial-gradient(circle at 32% 18%, rgba(255, 255, 255, 0.86), transparent 18%),
    linear-gradient(135deg, #ffffff, #e3e8e4);
}

.outfit-brew .brewer-apron {
  background:
    linear-gradient(90deg, transparent 0 3px, rgba(92, 105, 104, 0.18) 3px 5px, transparent 5px 10px, rgba(92, 105, 104, 0.18) 10px 12px, transparent 12px),
    linear-gradient(180deg, #ffffff, #dfe5e1);
}

.outfit-pub {
  --shirt: #232833;
  --apron: #f5ead7;
  --pants: #1f2530;
}

.outfit-pub .brewer-body {
  background:
    linear-gradient(90deg, #202532 0 12px, #f5ead7 12px 22px, #202532 22px 34px),
    radial-gradient(circle at 32% 18%, rgba(255, 255, 255, 0.18), transparent 17%);
}

.outfit-pub .brewer-apron {
  left: 25px;
  width: 10px;
  background:
    linear-gradient(180deg, #f8efe1 0 18px, #ba7f42 19px 23px, #f8efe1 24px);
  clip-path: polygon(50% 0, 100% 28%, 76% 100%, 24% 100%, 0 28%);
}

.outfit-distribution {
  --shirt: #8a5a35;
  --apron: #6b4329;
  --pants: #5a3924;
}

.outfit-distribution .brewer-hat {
  display: block;
  left: 13px;
  top: 7px;
  z-index: 7;
  width: 35px;
  height: 14px;
  border-radius: 12px 12px 5px 5px;
  background: linear-gradient(180deg, #9e6a42, #5d3a24);
  box-shadow: 8px 5px 0 -4px #4b2d1c;
}

.outfit-distribution .brewer-hat::after {
  content: "";
  position: absolute;
  right: -10px;
  bottom: 1px;
  width: 15px;
  height: 6px;
  border-radius: 0 10px 10px 0;
  background: #5d3a24;
}

.outfit-distribution .brewer-apron {
  background:
    linear-gradient(90deg, transparent 0 3px, rgba(255, 229, 194, 0.16) 3px 5px, transparent 5px 10px, rgba(255, 229, 194, 0.16) 10px 12px, transparent 12px),
    linear-gradient(180deg, #7b4f31, #4b2d1c);
}

.brewer-brows {
  left: 18px;
  top: 26px;
  z-index: 6;
  width: 9px;
  height: 4px;
  border-radius: 999px;
  background: var(--hair);
  background: color-mix(in srgb, var(--hair), black 28%);
  box-shadow: 15px 2px var(--hair);
  box-shadow: 15px 2px color-mix(in srgb, var(--hair), black 28%);
  transform: rotate(-15deg);
}

.brewer-eyes {
  left: 18px;
  top: 30px;
  z-index: 6;
  width: 9px;
  height: 7px;
  border-radius: 7px 7px 5px 5px;
  background:
    radial-gradient(circle at 64% 46%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 54% 58%, #101621 0 3px, transparent 4px),
    #fff7ef;
  box-shadow: 16px 0 0 #fff7ef, 0 0 0 1px rgba(30, 24, 21, 0.18), 16px 0 0 1px rgba(30, 24, 21, 0.18);
  animation: blink 4.4s ease-in-out infinite;
  transform: skewX(-8deg);
}

.brewer-eyes::after {
  content: "";
  position: absolute;
  left: 16px;
  top: 0;
  width: 9px;
  height: 7px;
  border-radius: 7px 7px 5px 5px;
  background:
    radial-gradient(circle at 64% 46%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 54% 58%, #101621 0 3px, transparent 4px);
}

.brewer-nose {
  left: 26px;
  top: 35px;
  z-index: 8;
  width: 8px;
  height: 8px;
  border-radius: 42% 46% 58% 48%;
  background:
    radial-gradient(circle at 38% 28%, rgba(255, 222, 196, 0.95), transparent 24%),
    linear-gradient(135deg, #e99b6d, #cb674f);
  box-shadow: inset -2px -2px rgba(127, 55, 45, 0.14);
}

.brewer-cheeks {
  left: 17px;
  top: 38px;
  z-index: 5;
  width: 4px;
  height: 3px;
  border-radius: 50%;
  background: rgba(206, 95, 83, 0.08);
  box-shadow: 24px 0 rgba(206, 95, 83, 0.08);
}

.brewer-smile {
  left: 26px;
  top: 42px;
  z-index: 10;
  width: 11px;
  height: 5px;
  border-bottom: 2px solid rgba(55, 31, 25, 0.72);
  border-radius: 0 0 10px 4px;
  transform: rotate(-8deg);
}

.brewer-arm {
  top: 52px;
  width: 8px;
  height: 32px;
  border-radius: 7px;
  background: linear-gradient(180deg, var(--skin), #a96f4c);
  transform-origin: top center;
}

.brewer-arm-left {
  left: 8px;
  transform: rotate(13deg);
}

.brewer-arm-right {
  right: 8px;
  transform: rotate(-20deg);
  animation: workArm 1.05s cubic-bezier(0.2, 0.9, 0.2, 1) infinite;
}

.character-preview .brewer-body {
  left: 17px;
  bottom: 9px;
  width: 42px;
  height: 52px;
}

.character-preview .brewer-apron {
  left: 30px;
  bottom: 9px;
  width: 18px;
  height: 41px;
}

.character-preview .brewer-ears {
  left: 10px;
  top: 28px;
  width: 12px;
  height: 18px;
  box-shadow: 46px 0 0 -1px var(--skin);
}

.character-preview .brewer-neck {
  left: 31px;
  top: 50px;
  width: 15px;
  height: 15px;
}

.character-preview .brewer-head {
  left: 19px;
  top: 13px;
  width: 40px;
  height: 43px;
}

.character-preview .brewer-hair {
  left: 13px;
  top: 5px;
  width: 52px;
  height: 30px;
}

.character-preview .brewer-brows {
  left: 24px;
  top: 32px;
  width: 10px;
  height: 4px;
  box-shadow: 20px 2px var(--hair);
  box-shadow: 20px 2px color-mix(in srgb, var(--hair), black 28%);
}

.character-preview .brewer-eyes {
  left: 24px;
  top: 39px;
  width: 11px;
  height: 8px;
  box-shadow: 21px 0 0 #fff7ef, 0 0 0 1px rgba(30, 24, 21, 0.18), 21px 0 0 1px rgba(30, 24, 21, 0.18);
}

.character-preview .brewer-eyes::after {
  left: 21px;
  width: 11px;
  height: 8px;
}

.character-preview .brewer-nose {
  left: 35px;
  top: 45px;
  width: 10px;
  height: 10px;
}

.character-preview .brewer-cheeks {
  left: 21px;
  top: 48px;
  width: 5px;
  height: 3px;
  box-shadow: 31px 0 rgba(206, 95, 83, 0.08);
}

.character-preview .brewer-smile {
  left: 35px;
  top: 55px;
}

.character-preview .brewer-arm {
  top: 64px;
  height: 36px;
}

.player {
  position: absolute;
  left: 15%;
  bottom: 34px;
  z-index: 5;
}

.action-farm {
  animation: farmWork 1.55s ease-in-out infinite;
}

.action-brew {
  left: 42%;
  animation: brewWork 1.25s ease-in-out infinite;
}

.action-pub {
  left: 34%;
  animation: pubServe 1.8s ease-in-out infinite;
}

.action-distribution {
  left: 58%;
  animation: carryBox 1.45s ease-in-out infinite;
}

.skin-chemist {
  --shirt: #2f6f83;
  --apron: #eef9fb;
  --hair: #3e2a1d;
}

.skin-salesman {
  --shirt: #8d4c78;
  --apron: #fff1c8;
  --hair: #2d2532;
}

.skin-founder {
  --shirt: #4a8f55;
  --apron: #f7eee4;
  --hair: #70401f;
}

.brewer-avatar.outfit-farm {
  --shirt: #e7c66b;
  --apron: #477b56;
  --pants: #476f4b;
}

.brewer-avatar.outfit-brew {
  --shirt: #f4f7f4;
  --apron: #e8ece9;
  --pants: #d9dedb;
}

.brewer-avatar.outfit-pub {
  --shirt: #232833;
  --apron: #f5ead7;
  --pants: #1f2530;
}

.brewer-avatar.outfit-distribution {
  --shirt: #8a5a35;
  --apron: #6b4329;
  --pants: #5a3924;
}

.hop-field,
.water-tank,
.malt-shed,
.yeast-lab,
.kettle,
.fermenter,
.pub-bar,
.stage-light,
.warehouse,
.crate-stack {
  position: absolute;
  z-index: 2;
  border: 3px solid rgba(60, 46, 33, 0.65);
}

.hop-field {
  left: 4%;
  bottom: 48px;
  width: 214px;
  height: 100px;
  border-color: transparent;
  background:
    linear-gradient(180deg, transparent 0 14px, rgba(80, 56, 34, 0.38) 15px 18px, transparent 19px),
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(44, 96, 45, 0.78) 18px 24px);
}

.hop-field::before {
  content: "";
  position: absolute;
  inset: 6px 2px;
  background:
    radial-gradient(circle at 20% 20%, #a4e56a 0 6px, transparent 7px),
    radial-gradient(circle at 68% 38%, #7ed457 0 7px, transparent 8px),
    radial-gradient(circle at 38% 70%, #b3ec75 0 6px, transparent 7px),
    radial-gradient(circle at 84% 64%, #7bcf58 0 6px, transparent 7px);
  animation: leafWiggle 1.7s ease-in-out infinite;
}

.water-tank {
  left: 27%;
  bottom: 56px;
  width: 82px;
  height: 110px;
  border-radius: 28px 28px 10px 10px;
  background:
    radial-gradient(circle at 35% 22%, rgba(255, 255, 255, 0.78), transparent 14%),
    linear-gradient(180deg, #d6f3ff, #4f9fc2);
  box-shadow: inset -9px -12px rgba(29, 97, 124, 0.18), 0 10px 0 rgba(57, 81, 69, 0.16);
  animation: tankSlosh 2.2s ease-in-out infinite;
}

.water-tank::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  top: 43px;
  height: 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.56);
}

.malt-shed {
  right: 24%;
  bottom: 52px;
  width: 118px;
  height: 82px;
  border-radius: 5px;
  background:
    linear-gradient(90deg, rgba(95, 57, 29, 0.18) 0 7px, transparent 7px 22px),
    linear-gradient(180deg, #dfaa5f, #bd793b);
  box-shadow: inset -7px -7px rgba(78, 45, 24, 0.18), 0 9px 0 rgba(57, 81, 69, 0.12);
}

.malt-shed::before {
  content: "";
  position: absolute;
  left: -10px;
  top: -34px;
  width: 120px;
  height: 42px;
  background: linear-gradient(180deg, #895839, #5e3928);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.yeast-lab {
  right: 6%;
  bottom: 52px;
  width: 92px;
  height: 108px;
  border-radius: 14px 14px 5px 5px;
  background:
    radial-gradient(circle at 38% 18%, rgba(255, 255, 255, 0.75), transparent 16%),
    linear-gradient(180deg, #e8fff8, #98d7c6);
  box-shadow: inset -8px -8px rgba(53, 118, 102, 0.14), 0 10px 0 rgba(57, 81, 69, 0.14);
}

.yeast-lab::before {
  content: "";
  position: absolute;
  inset: 12px 18px;
  border-radius: 50%;
  background: #94d06f;
  box-shadow: 16px 22px #77bf83, -8px 36px #65b2a4;
  animation: bubblePulse 1.8s ease-in-out infinite;
}

.kettle {
  left: 15%;
  bottom: 47px;
  width: 174px;
  height: 126px;
  border-radius: 26px 26px 42px 42px;
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.34), transparent 16%),
    linear-gradient(90deg, #a95e33, #f0bd6b 48%, #95512c);
  box-shadow: inset -13px -14px rgba(93, 48, 25, 0.18), 0 12px 0 rgba(76, 47, 30, 0.18);
}

.kettle::after {
  content: "";
  position: absolute;
  inset: 20px 24px auto;
  height: 30px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 18% 48%, #fff4b7 0 7px, transparent 8px),
    radial-gradient(circle at 52% 42%, #fff1a8 0 8px, transparent 9px),
    #ffdc76;
  animation: brewBubbles 1.2s ease-in-out infinite;
}

.fermenter {
  right: 16%;
  bottom: 48px;
  width: 144px;
  height: 146px;
  border-radius: 42px 42px 14px 14px;
  background:
    radial-gradient(circle at 34% 20%, rgba(255, 255, 255, 0.92), transparent 13%),
    linear-gradient(90deg, #aebac0, #f8fbfb 42%, #82939a);
  box-shadow: inset -12px -12px rgba(84, 101, 108, 0.18), 0 12px 0 rgba(76, 47, 30, 0.14);
}

.fermenter::before {
  content: "";
  position: absolute;
  left: 36px;
  top: -28px;
  width: 48px;
  height: 40px;
  border-radius: 50% 50% 0 0;
  background: #c8d0d2;
}

.pub-bar {
  left: 18%;
  bottom: 48px;
  width: 286px;
  height: 94px;
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(255, 225, 156, 0.13) 0 12px, transparent 12px 32px),
    linear-gradient(180deg, #9c6338, #62391f);
  box-shadow: inset -8px -12px rgba(44, 24, 12, 0.24), 0 12px 0 rgba(40, 23, 13, 0.18);
}

.pub-bar::before {
  content: "BREW PUB";
  position: absolute;
  left: 58px;
  top: -50px;
  padding: 10px 22px;
  border: 3px solid #51301e;
  border-radius: 8px;
  background: #ffe8a3;
  font-weight: 900;
}

.stage-light {
  top: 26px;
  width: 78px;
  height: 78px;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 219, 112, 0.65), transparent 68%);
  animation: lightSweep 2.8s ease-in-out infinite;
}

.stage-light-left {
  left: 8%;
}

.stage-light-right {
  right: 8%;
  animation-delay: -1.4s;
}

.warehouse {
  left: 8%;
  bottom: 48px;
  width: 210px;
  height: 108px;
  border-radius: 6px 6px 0 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.12) 0 10px, transparent 10px 28px),
    linear-gradient(180deg, #b2a48f, #817461);
  box-shadow: inset -10px -10px rgba(58, 50, 41, 0.18), 0 12px 0 rgba(45, 43, 38, 0.16);
}

.warehouse::before {
  content: "";
  position: absolute;
  left: -14px;
  top: -42px;
  width: 236px;
  height: 52px;
  background: #555f64;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.crate-stack {
  right: 12%;
  bottom: 48px;
  width: 136px;
  height: 82px;
  border: 0;
  background: linear-gradient(#b27635 0 0) left bottom / 42px 38px no-repeat,
    linear-gradient(#c98c44 0 0) 46px bottom / 42px 38px no-repeat,
    linear-gradient(#a96932 0 0) 92px bottom / 42px 38px no-repeat,
    linear-gradient(#d59a4f 0 0) 24px 4px / 42px 38px no-repeat,
    linear-gradient(#b27635 0 0) 70px 4px / 42px 38px no-repeat;
  animation: crateBob 1.8s ease-in-out infinite;
}

.scene-truck {
  position: absolute;
  right: 18%;
  bottom: 30px;
  width: 86px;
  height: 38px;
  border-radius: 5px;
  background: var(--blue);
  z-index: 3;
  animation: truckMove 7s ease-in-out infinite;
}

.scene-truck::before {
  content: "";
  position: absolute;
  right: -26px;
  bottom: 0;
  width: 32px;
  height: 29px;
  border-radius: 4px;
  background: #526a79;
}

.scene-truck::after {
  content: "";
  position: absolute;
  left: 10px;
  bottom: -8px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #1c2429;
  box-shadow: 58px 0 #1c2429, 92px 0 #1c2429;
}

.sparkle {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff2a8;
  animation: sparkle 1.6s ease-in-out infinite;
}

.sparkle-one {
  left: 24%;
  top: 46px;
}

.sparkle-two {
  right: 31%;
  top: 76px;
  animation-delay: -0.7s;
}

.panel {
  display: none;
  padding: 18px 18px 9px;
}

.checklist { padding: 12px 14px; background: var(--surface); }
.checklist.hidden { display: none; }

.checklist-card {
  background: linear-gradient(135deg, #2d1a08 0%, #1a3320 100%);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.08);
  position: relative;
  overflow: hidden;
}
.checklist-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

.checklist-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.checklist-title-block { flex: 1; }
.checklist-badge {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #f0c060;
  background: rgba(240,192,96,0.15);
  border: 1px solid rgba(240,192,96,0.35);
  border-radius: 4px;
  padding: 2px 6px;
  margin-bottom: 5px;
}
.checklist-title {
  margin: 0 0 4px;
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
}
.checklist-sub {
  margin: 0;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.4;
}

/* Progress ring */
.checklist-progress-ring { position: relative; flex-shrink: 0; width: 48px; height: 48px; }
.checklist-ring-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.checklist-ring-bg { fill: none; stroke: rgba(255,255,255,0.1); stroke-width: 4; }
.checklist-ring-fill {
  fill: none;
  stroke: #f0c060;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 113.1;
  transition: stroke-dashoffset 0.6s ease;
}
.checklist-ring-count {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 900;
  color: #f0c060;
}

/* Steps */
.checklist-steps {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: grid;
  gap: 8px;
}
.checklist-step {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 9px 12px;
  transition: background 0.2s;
}
.checklist-step.done {
  background: rgba(60,160,80,0.15);
  border-color: rgba(60,160,80,0.3);
}
.checklist-step-num {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 900;
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.5);
}
.checklist-step.done .checklist-step-num { background: #3ca050; }
.checklist-checkmark { color: #fff; font-size: 0.75rem; }
.checklist-num { color: rgba(255,255,255,0.6); }
.checklist-step-emoji { font-size: 1.1rem; flex-shrink: 0; }
.checklist-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  line-height: 1.3;
}
.checklist-step.done .checklist-label {
  color: rgba(255,255,255,0.4);
  text-decoration: line-through;
}

/* Congrats state */
.checklist-congrats {
  text-align: center;
  padding: 20px 16px;
  background: linear-gradient(135deg, #1a3a20 0%, #2d1a08 100%);
}
.checklist-congrats-icon { font-size: 2.4rem; margin-bottom: 8px; animation: checklist-pop 0.4s ease; }
@keyframes checklist-pop { 0%{transform:scale(0.5);opacity:0} 70%{transform:scale(1.2)} 100%{transform:scale(1);opacity:1} }
.checklist-congrats-title { margin: 0 0 6px; font-size: 1.05rem; font-weight: 900; color: #fff; }
.checklist-congrats-sub { margin: 0 0 16px; font-size: 0.8rem; color: rgba(255,255,255,0.6); line-height: 1.4; }
.checklist-congrats-btn { width: 100%; font-size: 1rem; font-weight: 900; letter-spacing: 0.02em; }

.checklist-dismiss {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.3);
  cursor: pointer;
  display: block;
  width: 100%;
  text-align: center;
  letter-spacing: 0.04em;
}
.checklist-dismiss:hover { color: rgba(255,255,255,0.6); }

.panel.active {
  display: block;
}

.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.upgrade-grid,
.beer-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.brew-upgrades {
  margin-top: 14px;
}

.beer-list {
  grid-template-columns: minmax(220px, 0.8fr) minmax(320px, 1.35fr);
  align-items: start;
  margin-bottom: 14px;
}

.beer-menu {
  display: grid;
  gap: 8px;
  max-height: 520px;
  overflow: auto;
  padding-right: 4px;
}

.beer-menu-item {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 9px 10px;
  border: 1px solid rgba(183, 169, 142, 0.82);
  border-radius: 8px;
  background: #fffaf0;
  color: var(--ink);
  text-align: left;
  box-shadow: 0 8px 18px rgba(49, 39, 25, 0.06);
}

.beer-menu-item.active {
  border-color: #2f553b;
  background: #edf5e8;
  box-shadow: inset 0 0 0 2px rgba(47, 85, 59, 0.18), 0 10px 18px rgba(49, 39, 25, 0.08);
}

.beer-menu-item.locked {
  color: rgba(35, 39, 52, 0.62);
  background:
    repeating-linear-gradient(135deg, rgba(105, 115, 134, 0.05) 0 8px, transparent 8px 18px),
    #f6f1e8;
}

.beer-number {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #2f553b;
  color: #fffdf8;
  font-size: 0.82rem;
  font-weight: 900;
}

.beer-menu-item.locked .beer-number {
  background: #8b8172;
}

.beer-menu-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.beer-menu-copy strong,
.beer-menu-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.beer-menu-copy small,
.beer-menu-status {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 800;
}

.beer-menu-status {
  text-align: right;
}

.upgrade-card,
.recipe-card,
.batch-box {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffaf0;
  padding: 14px;
}

.upgrade-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.upgrade-card > button,
.upgrade-card > a {
  margin-top: auto;
}

.upgrade-card header,
.recipe-card header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.recipe-card header div {
  display: grid;
  gap: 2px;
}

.recipe-card header span {
  color: var(--muted);
  font-weight: 900;
}

.upgrade-card p,
.recipe-card p,
.note {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.upgrade-next-name { font-size: 0.8rem; color: var(--muted); margin: 2px 0 6px; }
.upgrade-status {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 5px 8px;
  border: 1px solid rgba(183, 169, 142, 0.72);
  border-radius: 8px;
  background: #fff8e7;
  color: var(--ink);
  text-transform: none;
}
.stat-pill {
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 20px;
  padding: 3px 9px;
  white-space: nowrap;
}
.stat-pill-now {
  background: rgba(80,80,80,0.1);
  color: #555;
}
.stat-pill-next {
  background: rgba(45,106,31,0.12);
  color: #2d6a1f;
}
.stat-pill-max {
  background: rgba(180,130,0,0.12);
  color: #7a5010;
}
.stat-pill-arrow {
  font-size: 0.75rem;
  color: #aaa;
}

.action {
  width: 100%;
  background: #2f553b;
  color: #fffdf8;
}

.action:disabled,
.secondary:disabled {
  cursor: not-allowed;
  opacity: 0.48;
  transform: none;
  box-shadow: none;
}

.recipe-card {
  display: grid;
  gap: 12px;
}

.recipe-detail {
  min-height: 360px;
  align-content: start;
}

.beer-description {
  font-size: 0.98rem;
}

.recipe-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.recipe-stats span {
  display: grid;
  gap: 3px;
  min-height: 64px;
  padding: 10px;
  border: 1px solid rgba(183, 169, 142, 0.62);
  border-radius: 8px;
  background: #fff8e7;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.25;
}

.recipe-stats strong {
  color: var(--ink);
  font-size: 0.95rem;
}

.recipe-card.locked {
  background:
    repeating-linear-gradient(135deg, rgba(105, 115, 134, 0.06) 0 8px, transparent 8px 18px),
    #f6f1e8;
}

.upgrade-card.locked {
  background:
    repeating-linear-gradient(135deg, rgba(105, 115, 134, 0.05) 0 8px, transparent 8px 18px),
    #f6f1e8;
}

.locked-copy {
  padding: 8px 10px;
  border: 1px dashed #b7a98e;
  border-radius: 8px;
  background: rgba(255, 248, 231, 0.7);
  color: var(--red);
  font-size: 0.86rem;
  font-weight: 800;
}

.locked-copy ul {
  margin: 6px 0 0;
  padding-left: 18px;
}

.locked-copy li + li {
  margin-top: 3px;
}

.batch-box {
  margin-bottom: 14px;
}

.brew-recipe-list {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
  overflow: hidden; /* prevent auto-column from expanding past container */
}

.brew-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  padding: 12px 14px 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffaf0;
}

.brew-row.locked {
  background:
    repeating-linear-gradient(135deg, rgba(105,115,134,0.05) 0 8px, transparent 8px 18px),
    #f6f1e8;
  color: rgba(35,39,52,0.62);
}

.brew-row.brewing {
  border-color: rgba(74,143,85,0.55);
  background: linear-gradient(135deg, rgba(181,231,152,0.12), #fffaf0);
}

.brew-row-main {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.brew-row-info {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.brew-row-info strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.96rem;
}

.brew-row-meta {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.brew-row-ingredients {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 700;
}

.brew-row-lock {
  color: var(--red);
  font-size: 0.9rem;
  font-weight: 800;
}

.brew-row-action {
  flex: 0 0 auto;
}

.brew-row-btn {
  min-width: 108px;
  min-height: 38px;
  padding: 7px 14px;
  font-size: 0.88rem;
  white-space: nowrap;
}

.brew-row-progress {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  min-width: 120px;
}

.brew-progress-bar {
  width: 120px;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #e5dccb;
}

.brew-row-timer {
  color: var(--green);
  font-size: 0.9rem;
  font-weight: 800;
}

.ad-harvest-btn {
  font-size: 0.78rem;
  font-weight: 800;
  color: #7a5010;
  background: #f5e0b0;
  border: 1.5px solid #d4a840;
  border-radius: 20px;
  padding: 6px 16px;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.ad-harvest-btn:disabled {
  opacity: 0.6;
  cursor: default;
}
.ad-harvest-btn:active:not(:disabled) { opacity: 0.75; }

.research-skip-ad-btn {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.68rem;
  font-weight: 700;
  color: #7a5010;
  background: #f5e0b0;
  border: 1px solid #d4a840;
  border-radius: 20px;
  padding: 3px 12px;
  cursor: pointer;
}
.research-skip-ad-btn:active { opacity: 0.75; }

.brew-skip-ad-btn {
  font-size: 0.68rem;
  font-weight: 700;
  color: #7a5010;
  background: #f5e0b0;
  border: 1px solid #d4a840;
  border-radius: 20px;
  padding: 3px 10px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.brew-skip-ad-btn:active { opacity: 0.75; }

.brew-row-locked-icon {
  color: var(--muted);
  font-size: 1.1rem;
}

.brew-auto-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 7px;
  border-radius: 99px;
  background: rgba(74,143,85,0.15);
  color: var(--green);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  white-space: nowrap;
  flex-shrink: 0;
}
.brew-auto-hint {
  font-size: 0.72rem;
  color: var(--muted);
  padding: 0 0 6px 32px;
  opacity: 0.75;
}

.batch-slot {
  display: grid;
  gap: 8px;
}

.batch-slot + .batch-slot {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(183, 169, 142, 0.55);
}

.batch-slot > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}



/* ── Distribution Routes ─────────────────────────────────────────────────── */

.routes-board {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 4px;
}

.route-grid,
.route-active-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.route-card {
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.route-card.route-ready {
  border-color: var(--green);
  background: #f5fbf3;
}

.route-card.route-locked {
  opacity: 0.72;
  background: #f7f2e9;
}

.route-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.route-header > div {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.route-header strong {
  color: var(--ink);
  font-size: 0.95rem;
}

.route-header small,
.route-requirements,
.route-footer span,
.route-preview span {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.35;
}

.route-icon {
  font-size: 1.55rem;
  line-height: 1;
  flex-shrink: 0;
}

.route-status {
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--green);
  background: rgba(47, 85, 59, 0.12);
  border-radius: 999px;
  padding: 4px 8px;
}

.route-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.route-metrics span,
.route-preview {
  background: rgba(0,0,0,0.035);
  border-radius: 6px;
  padding: 8px;
  color: var(--muted);
  font-size: 0.74rem;
}

.route-metrics b,
.route-preview strong {
  display: block;
  color: var(--ink);
  font-size: 0.88rem;
}

.route-preview small {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.35;
  margin-top: 3px;
}

.route-gates {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.route-gates span {
  display: inline-flex;
  width: 100%;
  border: 1px solid rgba(183, 169, 142, 0.72);
  border-radius: 6px;
  padding: 7px 8px;
  color: var(--muted);
  background: rgba(255,255,255,0.48);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.25;
}

.route-requirements {
  margin: 0;
}

.route-action-row,
.route-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.route-footer {
  justify-content: space-between;
}

.route-footer strong {
  color: var(--green);
  font-size: 0.86rem;
}

.route-footer .action,
.route-action-row .action {
  width: 100%;
}


/* ── Special Orders ───────────────────────────────────────────────────────── */

.orders-board {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 4px;
}

.orders-intro {
  font-size: 0.82rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}

.order-card {
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.order-card.order-rush {
  border-color: #c0882a;
  background: #fffbf3;
}

.order-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.order-buyer-icon {
  font-size: 1.6rem;
  line-height: 1;
  flex-shrink: 0;
}

.order-buyer-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.order-buyer-info strong {
  font-size: 0.95rem;
  color: var(--ink);
}

.order-buyer-info small {
  font-size: 0.75rem;
  color: var(--muted);
}

.order-rush-badge {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #c0882a;
  color: #fff;
  border-radius: 4px;
  padding: 2px 7px;
  flex-shrink: 0;
}

.order-flavor {
  font-size: 0.8rem;
  color: var(--muted);
  font-style: italic;
  margin: 0;
  line-height: 1.45;
}

.order-details {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(0,0,0,0.03);
  border-radius: 6px;
  padding: 10px 12px;
}

.order-need, .order-payout {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.order-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  width: 38px;
  flex-shrink: 0;
}

.order-need strong {
  font-size: 0.9rem;
  color: var(--ink);
}

.order-payout strong {
  font-size: 0.95rem;
  color: var(--green);
}

.order-payout small {
  font-size: 0.75rem;
  color: var(--muted);
}

.order-stock-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.order-stock-row .brew-progress-bar {
  flex: 1;
}

.order-stock-label {
  font-size: 0.9rem;
  color: var(--muted);
  white-space: nowrap;
}

.order-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.order-fulfill-btn {
  margin-left: auto;
}

.order-timer {
  font-size: 0.8rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.order-timer-urgent {
  color: var(--red);
  font-weight: 700;
}

.order-fulfill-btn {
  flex-shrink: 0;
}

.orders-empty-state {
  text-align: center;
  padding: 24px 16px;
  color: var(--muted);
  font-size: 0.85rem;
  border: 1.5px dashed var(--line);
  border-radius: 10px;
}

.orders-next-label {
  font-size: 0.9rem;
  color: var(--muted);
  text-align: center;
  margin: 0;
}

.orders-locked {
  padding: 20px 0;
  color: var(--muted);
}

.orders-locked h3 {
  margin: 4px 0 8px;
  color: var(--ink);
}

.orders-locked p {
  font-size: 0.85rem;
  line-height: 1.5;
  margin: 0;
}

.orders-recent {
  border-top: 1px solid var(--line);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.orders-recent h4 {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 0 0 6px;
}

.order-recent-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--ink);
  padding: 4px 0;
}

.order-recent-row strong {
  color: var(--green);
}

.order-expired-row {
  opacity: 0.55;
}

.order-expired-row strong {
  color: var(--muted);
}

.batch-slot.empty strong {
  color: var(--muted);
}

.progress-track {
  height: 14px;
  overflow: hidden;
  border-radius: 999px;
  background: #e5dccb;
}

.progress-fill {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold), var(--green));
  transition: width 250ms ease;
}

.small-stat {
  display: grid;
  gap: 3px;
  text-align: right;
}
#marketingCampaign {
  margin-bottom: 16px;
}
.campaign-btn {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 14px;
  border: none;
  background: linear-gradient(160deg, #c8852a 0%, #a05e10 100%);
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(160,90,10,0.35);
  letter-spacing: 0.01em;
}
.campaign-btn .campaign-sub {
  font-size: 0.72rem;
  font-weight: 600;
  opacity: 0.85;
  letter-spacing: 0.03em;
}
.campaign-btn.campaign-active {
  background: linear-gradient(160deg, #2a7c45 0%, #1a5230 100%);
  box-shadow: 0 3px 10px rgba(30,100,60,0.35);
  cursor: default;
  animation: campaign-pulse 2s ease-in-out infinite;
}
.campaign-btn.campaign-cooldown {
  background: rgba(40,25,8,0.08);
  color: rgba(40,25,8,0.4);
  box-shadow: none;
  border: 1px solid rgba(40,25,8,0.12);
  cursor: default;
}
@keyframes campaign-pulse {
  0%,100% { opacity: 1; }
  50% { opacity: 0.82; }
}

/* ─── Campaign Modal ─── */
.campaign-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10,5,0,0.75);
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.campaign-modal {
  background: url('assets/backgrounds/brick_bg.webp') center center / cover no-repeat;
  position: relative;
  border-radius: 24px 24px 0 0;
  padding: 0 0 40px;
  width: 100%;
  max-width: 430px;
  max-height: 92vh;
  overflow-y: auto;
  border-top: 1px solid rgba(200,150,60,0.2);
}
.campaign-modal-img-wrap {
  position: relative;
  width: 100%;
  border-radius: 24px 24px 0 0;
  overflow: hidden;
}
.campaign-modal-img {
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
  display: block;
}
.campaign-modal-close-img {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0,0,0,0.45);
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 0.85rem;
  cursor: pointer;
  color: rgba(255,255,255,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.campaign-modal-img-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: rgba(220,180,100,0.75);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  padding: 10px 14px 4px;
  white-space: nowrap;
}
.campaign-choices {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px 0;
}
.campaign-choice-card {
  background: linear-gradient(145deg, #fdf6e8, #f5ecd6);
  border: 1.5px solid rgba(200,170,100,0.35);
  border-radius: 16px;
  padding: 16px;
  text-align: left;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
  transition: transform 0.12s, box-shadow 0.12s;
  box-shadow: 0 2px 12px rgba(0,0,0,0.25);
}
.campaign-choice-card:active {
  transform: scale(0.97);
  box-shadow: 0 1px 6px rgba(0,0,0,0.2);
}
.campaign-choice-icon {
  font-size: 2rem;
  margin-bottom: 8px;
  display: block;
}
.campaign-choice-name {
  font-size: 1.05rem;
  font-weight: 900;
  color: #1a1008;
  margin-bottom: 4px;
  letter-spacing: -0.2px;
}
.campaign-choice-desc {
  font-size: 0.75rem;
  color: #7a6040;
  margin-bottom: 12px;
  line-height: 1.4;
}
.campaign-choice-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.campaign-risk-badge {
  font-size: 0.65rem;
  font-weight: 800;
  color: #fff;
  border-radius: 20px;
  padding: 3px 9px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.campaign-odds {
  font-size: 0.75rem;
  font-weight: 700;
  color: #5a7a50;
}
.campaign-choice-reward {
  font-size: 0.82rem;
  font-weight: 800;
  color: #2a6e1a;
}
.campaign-choice-consolation {
  font-size: 0.82rem;
  font-weight: 700;
  color: #a06010;
  margin-top: 3px;
}

/* Extension modal */
.campaign-extend-modal { border-radius: 20px 20px 0 0; }
/* Campaign result sheet */
.campaign-result-sheet {
  background: url('assets/backgrounds/brick_bg.webp') center center / cover no-repeat;
  border-radius: 24px 24px 0 0;
  padding: 48px 24px 44px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 60vh;
  position: relative;
}
.campaign-result-sheet::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 24px 24px 0 0;
  background: linear-gradient(180deg, rgba(10,4,2,0.55) 0%, rgba(20,6,4,0.72) 100%);
  pointer-events: none;
}
.campaign-result-sheet > * { position: relative; z-index: 1; }
.campaign-result-icon {
  font-size: 5rem;
  line-height: 1;
  margin-bottom: 16px;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5));
}
.campaign-result-headline {
  font-size: 2rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.5px;
  margin-bottom: 10px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.campaign-result-subline {
  font-size: 0.88rem;
  color: rgba(255,220,160,0.8);
  margin-bottom: 28px;
  max-width: 280px;
  line-height: 1.5;
}
.campaign-result-boost-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,200,80,0.25);
  border-radius: 16px;
  padding: 16px 20px;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 24px;
  justify-content: center;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.campaign-result-boost-badge {
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 6px 12px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}
.campaign-result-boost-num {
  font-size: 1.15rem;
  font-weight: 900;
  color: #fff;
  white-space: nowrap;
}
.campaign-result-boost-dur {
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255,210,130,0.8);
  white-space: nowrap;
}
.campaign-result-ad-row {
  width: 100%;
  margin-bottom: 12px;
}
.campaign-result-ad-label {
  font-size: 0.75rem;
  color: rgba(255,200,130,0.65);
  margin-bottom: 10px;
}
.campaign-result-ad-btn {
  width: 100%;
  padding: 16px;
  border-radius: 14px;
  border: 1.5px solid rgba(212,168,64,0.7);
  background: rgba(245,224,176,0.15);
  font-size: 0.95rem;
  font-weight: 800;
  color: #f5d980;
  cursor: pointer;
  letter-spacing: -0.2px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.campaign-result-dismiss {
  width: 100%;
  padding: 15px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.15);
  background: transparent;
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(255,255,255,0.45);
  cursor: pointer;
}

.campaign-extend-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.campaign-extend-skip {
  flex: 1;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid rgba(40,25,8,0.15);
  background: transparent;
  font-size: 0.85rem;
  font-weight: 600;
  color: #7a6040;
  cursor: pointer;
}
.campaign-extend-btn {
  flex: 2;
  padding: 12px;
  border-radius: 10px;
  border: 1.5px solid #d4a840;
  background: #f5e0b0;
  font-size: 0.85rem;
  font-weight: 800;
  color: #7a5010;
  cursor: pointer;
}
.marketing-upgrade-group {
  margin-bottom: 20px;
}
.marketing-group-label {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin: 0 0 8px 2px;
}
.marketing-grid-2x2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  overflow: hidden;
  margin-bottom: 24px;
}
.marketing-grid-2x2 .upgrade-card {
  margin: 0;
  font-size: 0.78rem;
  padding: 12px 10px 10px;
  display: flex;
  flex-direction: column;
  min-height: 224px;
  gap: 7px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.48), rgba(255,250,240,0.9)),
    #fffaf0;
}
.marketing-grid-2x2 .upgrade-card.locked {
  opacity: 1;
  background:
    repeating-linear-gradient(135deg, rgba(213,174,90,0.08) 0 12px, rgba(255,255,255,0.18) 12px 24px),
    linear-gradient(180deg, #fffaf0, #f4ecd9);
}
.marketing-grid-2x2 .upgrade-card header {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.marketing-grid-2x2 .upgrade-card header h3 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.84rem;
  line-height: 1.15;
  white-space: nowrap;
}
.marketing-card-icon {
  width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 20px;
  border-radius: 6px;
  background: rgba(213,174,90,0.18);
  font-size: 0.78rem;
}
.marketing-grid-2x2 .upgrade-card header strong {
  font-size: 0.68rem;
  color: var(--muted);
  font-weight: 500;
  padding-top: 0;
  text-align: left;
  min-width: unset;
  line-height: 1.08;
  white-space: normal;
}
.marketing-grid-2x2 .upgrade-card .upgrade-title {
  font-size: 0.82rem;
  line-height: 1.2;
}
.marketing-grid-2x2 .upgrade-card .upgrade-level {
  font-size: 0.72rem;
  white-space: nowrap;
}
.marketing-grid-2x2 .upgrade-card .upgrade-copy,
.marketing-grid-2x2 .upgrade-card .upgrade-copy-short {
  color: #233047;
  font-size: 0.86rem;
  font-weight: 900;
  line-height: 1.08;
  min-height: 28px;
  display: flex;
  align-items: flex-start;
}
.marketing-grid-2x2 .upgrade-copy-detail {
  min-height: 34px;
  color: #6b7489;
  font-size: 0.61rem;
  font-weight: 750;
  line-height: 1.2;
}
.marketing-grid-2x2 .upgrade-card .upgrade-next,
.marketing-grid-2x2 .upgrade-card .upgrade-next-name {
  font-size: 0.68rem;
  line-height: 1.2;
  min-height: 28px;
  margin: 0;
}
.marketing-grid-2x2 .upgrade-card .upgrade-btn {
  font-size: 0.78rem;
  padding: 9px 8px;
}
.marketing-grid-2x2 .upgrade-status {
  font-size: 0.58rem;
  padding: 4px 6px;
  flex-wrap: nowrap;
  gap: 4px;
  overflow: hidden;
  margin-top: 0;
}
.marketing-grid-2x2 .locked-copy {
  min-height: 30px;
  padding: 5px 8px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.56rem;
  line-height: 1.15;
  text-align: center;
  border-style: solid;
}
.marketing-grid-2x2 .locked-copy strong {
  font-size: 0.56rem;
}
.marketing-grid-2x2 .locked-copy-placeholder {
  visibility: hidden;
}
.marketing-grid-2x2 .upgrade-card .action {
  margin-top: auto;
  height: 46px;
  min-height: 46px;
  padding: 7px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  line-height: 1.12;
  border-radius: 8px;
  text-align: center;
  white-space: normal;
}
.marketing-grid-2x2 .stat-pill {
  font-size: 0.52rem;
  padding: 2px 4px;
  white-space: nowrap;
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.marketing-grid-2x2 .stat-pill-arrow { display: none; }
.marketing-grid-2x2 .stat-pill-now::after { content: ' →'; }
.revenue-group-label { color: #7a5c1a; }
.rep-group-label { color: #3a5a2a; }
#marketing .panel-heading {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
.marketing-header-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.marketing-header-stats .small-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: rgba(40,25,8,0.07);
  border: 1px solid rgba(40,25,8,0.1);
  border-radius: 10px;
  padding: 10px 14px;
  text-align: center;
}
.marketing-header-stats .small-stat span {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(40,25,8,0.45);
}
.marketing-header-stats .small-stat strong {
  font-size: 0.95rem;
  font-weight: 800;
  color: #3a2500;
}

.log {
  margin-top: 14px;
  padding: 16px 18px;
  border-radius: 8px;
}

.log h2 {
  margin-bottom: 10px;
}

.log ul {
  display: grid;
  gap: 6px;
  max-height: 142px;
  overflow: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

.log li {
  color: var(--muted);
  font-size: 0.92rem;
}

@keyframes workerWalk {
  0% {
    transform: translateX(-18px);
  }
  50% {
    transform: translateX(74px);
  }
  100% {
    transform: translateX(-18px);
  }
}

@keyframes blink {
  0%,
  92%,
  100% {
    transform: scaleY(1);
  }
  95% {
    transform: scaleY(0.12);
  }
}

@keyframes workArm {
  0%,
  100% {
    transform: rotate(-14deg);
  }
  50% {
    transform: rotate(-58deg) translateY(-1px);
  }
}

@keyframes truckMove {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-180px);
  }
}

@keyframes steamRise {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.7);
  }
  35% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
    transform: translateY(-62px) scale(1.6);
  }
}

@keyframes bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-7px);
  }
}

@keyframes farmWork {
  0%,
  100% {
    transform: translateY(0) rotate(-2deg) skewX(-2deg);
  }
  50% {
    transform: translateY(4px) rotate(5deg) skewX(4deg);
  }
}

@keyframes brewWork {
  0%,
  100% {
    transform: translateY(0) rotate(-5deg);
  }
  50% {
    transform: translateY(-3px) rotate(7deg);
  }
}

@keyframes pubServe {
  0%,
  100% {
    transform: translateX(0) translateY(0) rotate(-3deg);
  }
  50% {
    transform: translateX(20px) translateY(-3px) rotate(4deg);
  }
}

@keyframes carryBox {
  0%,
  100% {
    transform: translateX(-20px) translateY(0) skewX(-3deg);
  }
  50% {
    transform: translateX(24px) translateY(-2px) skewX(3deg);
  }
}

@keyframes cloudDrift {
  0%,
  100% {
    transform: translateX(0) scale(1);
  }
  50% {
    transform: translateX(26px) scale(1.04);
  }
}

@keyframes windowGlow {
  0%,
  100% {
    opacity: 0.76;
    filter: saturate(1);
  }
  50% {
    opacity: 1;
    filter: saturate(1.3);
  }
}

@keyframes buttonPop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.04);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes floatUp {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  25% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-24px);
  }
}

@keyframes leafWiggle {
  0%,
  100% {
    transform: skewX(-2deg);
  }
  50% {
    transform: skewX(5deg) translateY(-2px);
  }
}

@keyframes tankSlosh {
  0%,
  100% {
    filter: saturate(1);
    transform: translateY(0);
  }
  50% {
    filter: saturate(1.3);
    transform: translateY(-3px);
  }
}

@keyframes bubblePulse {
  0%,
  100% {
    transform: scale(0.9);
  }
  50% {
    transform: scale(1.08);
  }
}

@keyframes brewBubbles {
  0%,
  100% {
    box-shadow: 12px -2px #fff1a8, 46px 3px #fff1a8, 76px -4px #fff1a8;
  }
  50% {
    box-shadow: 14px -12px #fff1a8, 44px -8px #fff1a8, 78px -15px #fff1a8;
  }
}

@keyframes lightSweep {
  0%,
  100% {
    transform: translateX(-10px) scale(0.95);
  }
  50% {
    transform: translateX(18px) scale(1.12);
  }
}

@keyframes crateBob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

@keyframes sparkle {
  0%,
  100% {
    opacity: 0.25;
    transform: scale(0.7);
  }
  50% {
    opacity: 1;
    transform: scale(1.4);
  }
}

@media (max-width: 760px) {
  .topbar.playing {
    grid-template-columns: minmax(0, 1fr);
    padding: 72px 12px 12px;
  }

  .topbar .wallet {
    grid-column: 1 / -1;
  }

  .brand-sign {
    min-height: 90px;
    padding: 14px 16px;
  }

  .panel-heading,
  .character-picker {
    align-items: stretch;
    flex-direction: column;
  }

  .character-picker {
    display: flex;
  }

  .character-picker.hidden {
    display: none;
  }

  .character-options {
    grid-template-columns: 1fr;
  }

  .opening-actions {
    grid-template-columns: 1fr;
  }

  .character-card {
    min-height: 154px;
    grid-template-columns: 86px minmax(0, 1fr);
    grid-template-areas:
      "avatar name"
      "avatar role"
      "avatar perk";
    align-items: center;
    justify-items: start;
    text-align: left;
  }

  .character-card .character-preview {
    grid-area: avatar;
  }

  .character-card strong {
    grid-area: name;
  }

  .character-card .character-tagline {
    grid-area: role;
  }

  .character-card small {
    grid-area: perk;
  }

  .wallet,
  .small-stat {
    text-align: left;
  }

  .stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .stats article {
    border-bottom: 1px solid var(--line);
  }

  .tabs {
    grid-template-columns: repeat(2, 1fr);
  }

  .tap-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .farm-building {
    left: 4%;
    width: 112px;
  }

  .brew-building {
    left: 35%;
    width: 116px;
  }

  .pub-building {
    right: 3%;
    width: 126px;
  }

  .pub-building::before {
    left: 16px;
    font-size: 0.62rem;
  }

  .upgrade-grid,
  .beer-list {
    grid-template-columns: 1fr;
  }

  .tutorial-coach {
    display: grid;
    gap: 12px;
  }

  .tutorial-actions {
    justify-items: stretch;
    min-width: 0;
  }

  .tutorial-progress {
    justify-content: start;
    grid-template-columns: repeat(7, minmax(16px, 1fr));
  }

  .beer-menu {
    max-height: none;
    padding-right: 0;
  }

  .recipe-stats {
    grid-template-columns: 1fr;
  }

  .tap-list {
    grid-template-columns: 1fr;
  }

  .tap-card {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .tap-card em {
    grid-column: 1 / -1;
  }

  .hop-field {
    left: 1%;
    width: 126px;
  }

  .water-tank {
    left: 35%;
  }

  .malt-shed {
    right: 22%;
    width: 74px;
  }

  .yeast-lab {
    right: 2%;
    width: 62px;
  }

  .kettle {
    left: 4%;
    width: 118px;
  }

  .fermenter {
    right: 4%;
    width: 102px;
  }

  .pub-bar,
  .warehouse {
    left: 4%;
    width: 190px;
  }

  .crate-stack {
    right: 2%;
  }
}

/* Old comic art pass removed — backgrounds are now photo-based via illustrated-scene. */

.scene-farm {
  background:
    radial-gradient(circle at 14% 16%, rgba(255, 232, 118, 0.5), transparent 13%),
    linear-gradient(180deg, #7bb7ce 0 26%, #dfb373 26% 29%, #7d4c27 29% 43%, #5e8f4f 43% 100%);
}

.scene-brew {
  background:
    radial-gradient(circle at 17% 20%, rgba(255, 222, 117, 0.48), transparent 14%),
    linear-gradient(180deg, #5b4535 0 31%, #2d2320 31% 35%, #886141 35% 100%);
}

.scene-pub {
  background:
    radial-gradient(circle at 14% 18%, rgba(255, 228, 121, 0.5), transparent 14%),
    radial-gradient(circle at 86% 20%, rgba(255, 169, 84, 0.32), transparent 18%),
    linear-gradient(180deg, #4f321f 0 33%, #251b17 33% 38%, #8c5930 38% 100%);
}

.scene-distribution {
  background:
    radial-gradient(circle at 14% 18%, rgba(255, 230, 126, 0.42), transparent 13%),
    linear-gradient(180deg, #6b8790 0 30%, #40352c 30% 34%, #76614c 34% 100%);
}

.skyline,
.rolling-hills,
.scene-path {
  opacity: 0.42;
}

.warm-window {
  border: 5px solid #22150d;
  border-radius: 8px;
  box-shadow: 0 0 26px rgba(255, 184, 78, 0.5), 5px 5px 0 rgba(28, 16, 9, 0.35);
}

.ceiling-duct,
.comic-sign,
.chalkboard,
.tap-towers,
.comic-crowd {
  position: absolute;
  z-index: 4;
  pointer-events: none;
}

.ceiling-duct {
  left: 30%;
  right: 12%;
  top: 18px;
  height: 28px;
  border: 3px solid #20130b;
  border-radius: 999px;
  background:
    repeating-linear-gradient(90deg, rgba(34, 23, 16, 0.38) 0 6px, rgba(255, 255, 255, 0.22) 6px 13px),
    linear-gradient(180deg, #c4c6c2, #697278);
  box-shadow: 6px 7px 0 rgba(30, 17, 9, 0.26);
}

.comic-sign {
  right: 5%;
  top: 54px;
  min-width: 230px;
  padding: 11px 18px 10px;
  border: 4px solid #20130b;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 244, 204, 0.92), rgba(221, 153, 77, 0.92)),
    repeating-linear-gradient(0deg, transparent 0 8px, rgba(92, 50, 22, 0.12) 8px 10px);
  color: #17100b;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.28rem;
  font-weight: 900;
  letter-spacing: 1px;
  text-align: center;
  text-shadow: 1px 1px #fff2bd;
  box-shadow: 7px 8px 0 rgba(30, 17, 9, 0.3);
  transform: rotate(-1deg);
}

.chalkboard {
  left: 5%;
  top: 72px;
  width: 142px;
  padding: 12px 10px;
  border: 4px solid #2a170d;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 22%),
    #26332b;
  color: #f5f0dc;
  font-size: 0.74rem;
  font-weight: 900;
  line-height: 1.18;
  box-shadow: 6px 7px 0 rgba(30, 17, 9, 0.28);
}

.chalkboard b {
  color: #ffd85d;
  font-size: 0.86rem;
}

.tap-towers {
  right: 9%;
  bottom: 78px;
  display: flex;
  gap: 10px;
  align-items: end;
}

.tap-towers span {
  width: 18px;
  height: 56px;
  border: 3px solid #20130b;
  border-radius: 9px 9px 4px 4px;
  background:
    radial-gradient(circle at 50% 16%, #fff3c7 0 5px, transparent 6px),
    linear-gradient(180deg, #c88b43, #4a2b16);
  box-shadow: 4px 5px 0 rgba(30, 17, 9, 0.25);
}

.tap-towers span:nth-child(2) {
  height: 68px;
  background:
    radial-gradient(circle at 50% 14%, #e8f2ff 0 5px, transparent 6px),
    linear-gradient(180deg, #8d9ba3, #3b4347);
}

.tap-towers span:nth-child(3) {
  height: 62px;
  background:
    radial-gradient(circle at 50% 14%, #e8ffd1 0 5px, transparent 6px),
    linear-gradient(180deg, #93aa56, #3b481f);
}

.comic-crowd {
  left: 21%;
  right: 20%;
  bottom: 68px;
  display: flex;
  justify-content: center;
  gap: 18px;
  opacity: 0.88;
}

.comic-crowd span {
  position: relative;
  width: 28px;
  height: 42px;
  border: 3px solid #20130b;
  border-radius: 16px 16px 7px 7px;
  background: #2f6f83;
  box-shadow: 5px 6px 0 rgba(30, 17, 9, 0.24);
  animation: bob 1.7s ease-in-out infinite;
}

.comic-crowd span::before {
  content: "";
  position: absolute;
  left: 5px;
  top: -18px;
  width: 16px;
  height: 18px;
  border: 3px solid #20130b;
  border-radius: 50%;
  background: #c9875c;
}

.comic-crowd span:nth-child(2) {
  background: #7c4f86;
  animation-delay: -0.3s;
}

.comic-crowd span:nth-child(3) {
  background: #4f8447;
  animation-delay: -0.65s;
}

.comic-crowd span:nth-child(4) {
  background: #a06a36;
  animation-delay: -0.95s;
}

.brew-shelves,
.pub-shelves {
  z-index: 3;
  border-top: 8px solid #26170d;
  border-bottom: 8px solid #26170d;
  background:
    radial-gradient(circle at 10% 55%, #f0d29d 0 7px, #21140d 8px 10px, transparent 11px),
    radial-gradient(circle at 28% 47%, #d7e2e2 0 7px, #21140d 8px 10px, transparent 11px),
    radial-gradient(circle at 48% 56%, #f0d29d 0 7px, #21140d 8px 10px, transparent 11px),
    radial-gradient(circle at 68% 48%, #d7e2e2 0 7px, #21140d 8px 10px, transparent 11px),
    radial-gradient(circle at 86% 55%, #f0d29d 0 7px, #21140d 8px 10px, transparent 11px),
    linear-gradient(180deg, rgba(132, 82, 41, 0.72), rgba(61, 34, 19, 0.86));
  box-shadow: 0 7px 0 rgba(30, 17, 9, 0.35);
}

.brewer-avatar {
  --shirt: #222c36;
  --apron: #f2e2c0;
  --hair: #3b2417;
  --skin: #c9875c;
  --pants: #1d2630;
  width: 76px;
  height: 128px;
  filter: drop-shadow(6px 10px 0 rgba(28, 17, 10, 0.38));
}

.character-preview {
  width: 96px;
  height: 142px;
}

.brewer-shadow {
  left: 10px;
  right: 9px;
  bottom: -4px;
  height: 11px;
  background: rgba(24, 15, 10, 0.42);
}

.brewer-ears {
  left: 11px;
  top: 34px;
  z-index: 5;
  width: 11px;
  height: 18px;
  border: 2px solid #2a170d;
  box-shadow: 43px 0 0 -1px var(--skin), 43px 0 0 1px #2a170d;
}

.brewer-neck {
  left: 32px;
  top: 58px;
  width: 15px;
  height: 18px;
  border: 2px solid #2a170d;
  background: linear-gradient(180deg, #d99b72, #a75f43);
}

.brewer-body {
  left: 16px;
  bottom: 7px;
  width: 46px;
  height: 64px;
  border: 3px solid #24150d;
  border-radius: 12px 12px 8px 8px;
  background:
    linear-gradient(90deg, transparent 0 11px, var(--pants) 11px 18px, transparent 18px 27px, var(--pants) 27px 34px, transparent 34px),
    linear-gradient(105deg, rgba(255, 255, 255, 0.25) 0 16%, transparent 17%),
    linear-gradient(135deg, var(--shirt), var(--shirt)),
    linear-gradient(135deg, color-mix(in srgb, var(--shirt), white 13%), var(--shirt));
  box-shadow: inset -7px -9px rgba(0, 0, 0, 0.24), inset 4px 5px rgba(255, 255, 255, 0.13);
}

.brewer-apron {
  left: 29px;
  bottom: 8px;
  width: 18px;
  height: 50px;
  border: 2px solid #24150d;
  border-radius: 4px 4px 7px 7px;
  background:
    linear-gradient(90deg, transparent 0 4px, rgba(55, 35, 21, 0.28) 4px 6px, transparent 6px 12px, rgba(55, 35, 21, 0.22) 12px 14px, transparent 14px),
    linear-gradient(180deg, #fff4da, var(--apron));
}

.brewer-head {
  left: 18px;
  top: 16px;
  z-index: 4;
  width: 43px;
  height: 48px;
  border: 3px solid #24150d;
  border-radius: 38% 44% 48% 40%;
  background:
    radial-gradient(circle at 35% 27%, rgba(255, 226, 190, 0.9), transparent 20%),
    linear-gradient(145deg, #e5a779, var(--skin));
  box-shadow: inset -6px -7px rgba(102, 48, 30, 0.18);
}

.brewer-hair {
  left: 11px;
  top: 3px;
  z-index: 8;
  width: 58px;
  height: 36px;
  border: 3px solid #24150d;
  border-radius: 9px 19px 10px 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0 12%, transparent 13%),
    conic-gradient(from 220deg at 20% 92%, var(--hair) 0 68deg, transparent 69deg),
    conic-gradient(from 215deg at 45% 84%, var(--hair) 0 72deg, transparent 73deg),
    conic-gradient(from 210deg at 70% 82%, var(--hair) 0 68deg, transparent 69deg),
    var(--hair);
  clip-path: polygon(0 64%, 8% 22%, 24% 42%, 36% 7%, 51% 37%, 66% 10%, 82% 45%, 100% 33%, 88% 100%, 12% 100%);
}

.brewer-brows {
  left: 24px;
  top: 35px;
  z-index: 9;
  width: 12px;
  height: 5px;
  background: #1f130c;
  box-shadow: 20px 2px #1f130c;
  transform: rotate(-18deg);
}

.brewer-eyes {
  left: 23px;
  top: 41px;
  z-index: 8;
  width: 12px;
  height: 10px;
  border: 2px solid #24150d;
  border-radius: 55% 45% 55% 45%;
  background:
    radial-gradient(circle at 60% 52%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 50% 58%, #0d1720 0 4px, transparent 5px),
    #fff7ec;
  box-shadow: 21px 0 0 #fff7ec, 21px 0 0 2px #24150d;
}

.brewer-eyes::after {
  left: 21px;
  width: 12px;
  height: 10px;
  border-radius: inherit;
  background:
    radial-gradient(circle at 60% 52%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 50% 58%, #0d1720 0 4px, transparent 5px);
}

.brewer-nose {
  left: 34px;
  top: 49px;
  z-index: 10;
  width: 11px;
  height: 13px;
  border: 2px solid rgba(36, 21, 13, 0.75);
  background: linear-gradient(135deg, #e8a173, #bf6048);
}

.brewer-cheeks {
  left: 23px;
  top: 53px;
  width: 5px;
  height: 4px;
  background: rgba(183, 76, 62, 0.24);
  box-shadow: 30px 0 rgba(183, 76, 62, 0.18);
}

.brewer-smile {
  left: 35px;
  top: 62px;
  z-index: 11;
  width: 17px;
  height: 7px;
  border-bottom: 3px solid #24150d;
  border-radius: 0 0 16px 8px;
  transform: rotate(-8deg);
}

.brewer-arm {
  top: 72px;
  width: 10px;
  height: 42px;
  border: 2px solid #24150d;
  background: linear-gradient(180deg, #d59468, #9b573a);
}

.brewer-arm-left {
  left: 10px;
}

.brewer-arm-right {
  right: 9px;
}

.character-preview .brewer-body {
  left: 20px;
  width: 54px;
  height: 72px;
}

.character-preview .brewer-apron {
  left: 37px;
  width: 22px;
  height: 57px;
}

.character-preview .brewer-head {
  left: 24px;
  width: 50px;
  height: 56px;
}

.character-preview .brewer-hair {
  left: 16px;
  width: 66px;
  height: 42px;
}

.character-preview .brewer-ears {
  left: 15px;
  top: 38px;
  box-shadow: 51px 0 0 -1px var(--skin), 51px 0 0 1px #2a170d;
}

.character-preview .brewer-neck {
  left: 39px;
  top: 66px;
}

.character-preview .brewer-brows {
  left: 31px;
  top: 42px;
  box-shadow: 24px 2px #1f130c;
}

.character-preview .brewer-eyes {
  left: 31px;
  top: 50px;
  box-shadow: 25px 0 0 #fff7ec, 25px 0 0 2px #24150d;
}

.character-preview .brewer-eyes::after {
  left: 25px;
}

.character-preview .brewer-nose {
  left: 43px;
  top: 59px;
}

.character-preview .brewer-cheeks {
  left: 31px;
  top: 63px;
  box-shadow: 36px 0 rgba(183, 76, 62, 0.18);
}

.character-preview .brewer-smile {
  left: 44px;
  top: 72px;
}

.character-preview .brewer-arm {
  top: 83px;
}

.player {
  left: 14%;
  bottom: 52px;
  z-index: 8;
}

.action-brew {
  left: 43%;
}

.action-pub {
  left: 36%;
}

.action-distribution {
  left: 58%;
}

.outfit-farm .brewer-hat,
.outfit-distribution .brewer-hat {
  border: 2px solid #24150d;
}

.outfit-pub .brewer-body {
  background:
    linear-gradient(90deg, #1c2029 0 17px, #f7e5c8 17px 31px, #1c2029 31px 46px),
    radial-gradient(circle at 31% 18%, rgba(255, 255, 255, 0.18), transparent 17%);
}

.hop-field,
.water-tank,
.malt-shed,
.yeast-lab,
.kettle,
.fermenter,
.pub-bar,
.warehouse,
.crate-stack {
  z-index: 5;
  border: 4px solid #24150d;
  filter: drop-shadow(7px 8px 0 rgba(33, 19, 10, 0.28));
}

.hop-field {
  bottom: 70px;
  height: 126px;
  background:
    linear-gradient(90deg, transparent 0 20px, rgba(35, 21, 13, 0.8) 20px 24px, transparent 24px 46px),
    repeating-linear-gradient(90deg, transparent 0 22px, rgba(49, 111, 55, 0.9) 22px 31px),
    linear-gradient(180deg, transparent 0 16px, rgba(35, 21, 13, 0.72) 17px 22px, transparent 23px);
}

.water-tank,
.yeast-lab,
.fermenter {
  border-color: #22150d;
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.86), transparent 14%),
    repeating-linear-gradient(180deg, rgba(31, 21, 15, 0.18) 0 4px, transparent 4px 22px),
    linear-gradient(90deg, #6c8186, #f0f1e7 48%, #47646a);
}

.malt-shed,
.warehouse {
  background:
    repeating-linear-gradient(90deg, rgba(39, 22, 12, 0.24) 0 4px, transparent 4px 24px),
    linear-gradient(180deg, #c99052, #70421f);
}

.kettle {
  bottom: 64px;
  border-radius: 28px 28px 48px 48px;
  background:
    radial-gradient(circle at 33% 22%, rgba(255, 255, 255, 0.45), transparent 15%),
    repeating-linear-gradient(90deg, rgba(51, 28, 15, 0.2) 0 4px, transparent 4px 26px),
    linear-gradient(90deg, #87431f, #f3bd69 48%, #703318);
}

.fermenter {
  bottom: 62px;
}

.pub-bar {
  bottom: 66px;
  width: 340px;
  height: 112px;
  background:
    radial-gradient(circle at 18% 20%, #f2ca78 0 8px, transparent 9px),
    radial-gradient(circle at 34% 20%, #d9e0dc 0 8px, transparent 9px),
    radial-gradient(circle at 50% 20%, #f2ca78 0 8px, transparent 9px),
    radial-gradient(circle at 66% 20%, #d9e0dc 0 8px, transparent 9px),
    repeating-linear-gradient(90deg, rgba(255, 210, 123, 0.14) 0 9px, transparent 9px 34px),
    linear-gradient(180deg, #a46636, #4d2a16);
}

.pub-bar::before {
  content: "BREW PUB";
  left: 70px;
  top: -62px;
  border: 4px solid #22150d;
  background:
    linear-gradient(180deg, #ffedba, #d79b4e);
  color: #1c120b;
  box-shadow: 6px 7px 0 rgba(31, 18, 10, 0.35);
  letter-spacing: 1px;
  text-shadow: 1px 1px #fff3ca;
}

.crate-stack {
  border: 0;
  filter: drop-shadow(6px 7px 0 rgba(31, 18, 10, 0.32));
}

.crate-stack::before,
.crate-stack::after {
  content: "";
  position: absolute;
  inset: 2px;
  background:
    linear-gradient(90deg, transparent 0 31%, #25150c 32% 35%, transparent 36% 65%, #25150c 66% 69%, transparent 70%),
    linear-gradient(180deg, transparent 0 45%, #25150c 46% 50%, transparent 51%);
  opacity: 0.42;
}

.scene-truck {
  z-index: 6;
  border: 4px solid #24150d;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 34%),
    #765132;
  box-shadow: 6px 7px 0 rgba(31, 18, 10, 0.3);
}

.scene-truck::before {
  border: 4px solid #24150d;
  background: #a46a3f;
}

.sparkle {
  display: none;
}

.illustrated-scene {
  height: 360px;
  background: #2a1a10;
  border-bottom: none;
}

.illustrated-scene::before,
.illustrated-scene::after {
  display: none;
}

.stage-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transform: scale(1.03);
  animation: paintedSceneDrift 12s ease-in-out infinite;
}

.scene-farm .stage-bg {
  object-position: center center;
}

.scene-brew .stage-bg {
  object-position: center center;
}

.scene-pub .stage-bg {
  object-position: center center;
  /* Brew Pub: show the FULL image (no crop) so every upgrade prop fits in frame */
  object-fit: contain;
  transform: none;
  animation: none;
}


.scene-distribution .stage-bg {
  object-position: center center;
}

.stage-vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 26% 68%, transparent 0 22%, rgba(18, 10, 6, 0.1) 42%, rgba(18, 10, 6, 0.42) 100%),
    linear-gradient(180deg, rgba(255, 210, 129, 0.08), rgba(20, 11, 6, 0.18));
}

.stage-label {
  position: absolute;
  right: 22px;
  top: 20px;
  z-index: 3;
  padding: 9px 14px;
  border: 3px solid #1f130b;
  border-radius: 8px;
  background: rgba(255, 229, 173, 0.92);
  color: #1b110a;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0.5px;
  box-shadow: 5px 6px 0 rgba(23, 12, 6, 0.35);
}

.illustrated-scene .brewer-avatar.player {
  position: absolute;
  left: 10%;
  bottom: -8px;
  z-index: 4;
  width: min(196px, 26.35vw);
  height: auto;
  max-height: 96%;
  object-fit: contain;
  filter: drop-shadow(10px 16px 8px rgba(17, 9, 5, 0.42));
  transform-origin: 50% 100%;
  animation: illustratedBrewerIdle 3.6s ease-in-out infinite alternate;
  transition: left 4s ease-in-out;
}
.illustrated-scene .brewer-avatar.player.facing-left {
  scale: -1 1;
}

.illustrated-scene.scene-brew .brewer-avatar.player {
  left: 34%;
  width: min(187px, 24.65vw);
  animation-name: illustratedBrewerBrew;
  animation-duration: 2.9s;
}

.illustrated-scene.scene-pub .brewer-avatar.player {
  left: 17%;
  width: auto;
  height: 162px;
  max-height: 80%;
  animation-name: illustratedBrewerServe;
  animation-duration: 4.1s;
}

.illustrated-scene.scene-distribution .brewer-avatar.player {
  left: 62%;
  width: min(174px, 22.95vw);
  animation-name: illustratedBrewerCarry;
  animation-duration: 3.3s;
}

.character-card .brewer-avatar.character-preview {
  width: 86px;
  height: 122px;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 9px 4px rgba(35, 31, 27, 0.28));
}

@keyframes paintedSceneDrift {
  0%,
  100% {
    transform: scale(1.03) translateX(0);
  }
  50% {
    transform: scale(1.055) translateX(-8px);
  }
}

@keyframes illustratedBrewerIdle {
  0%   { transform: translateY(0)    rotate(-0.4deg); }
  40%  { transform: translateY(-5px) rotate(0.3deg); }
  100% { transform: translateY(-9px) rotate(0.8deg); }
}

@keyframes illustratedBrewerBrew {
  0%   { transform: translateY(0)    rotate(-1.2deg); }
  35%  { transform: translateY(-3px) rotate(0.6deg); }
  100% { transform: translateY(-7px) rotate(1.8deg); }
}

@keyframes illustratedBrewerServe {
  0%   { transform: translateY(0)    rotate(-0.6deg); }
  45%  { transform: translateY(-4px) rotate(0.4deg); }
  100% { transform: translateY(-8px) rotate(1.1deg); }
}

@keyframes illustratedBrewerCarry {
  0%   { transform: translateY(0)    rotate(-0.8deg); }
  30%  { transform: translateY(-3px) rotate(0.5deg); }
  100% { transform: translateY(-10px) rotate(1.4deg); }
}

.brewer-avatar svg,
.brewer-avatar * {
  vector-effect: non-scaling-stroke;
}

svg.brewer-avatar {
  overflow: visible;
}

.avatar-shadow {
  fill: rgba(24, 15, 10, 0.34);
}

.avatar-person {
  transform-origin: 50px 142px;
}

.avatar-line {
  stroke: #20130b;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.avatar-skin {
  fill: var(--skin);
}

.avatar-hand {
  fill: #e0a174;
}

.avatar-body-fill {
  fill: var(--shirt);
}

.avatar-shirt-light {
  fill: rgba(255, 255, 255, 0.18);
}

.avatar-apron {
  fill: var(--apron);
}

.avatar-apron-line {
  fill: none;
  stroke: rgba(32, 19, 11, 0.32);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.avatar-neck {
  fill: #c77c55;
}

.avatar-head {
  fill: var(--skin);
}

.avatar-face-light {
  fill: rgba(255, 224, 185, 0.52);
}

.avatar-hair {
  fill: var(--hair);
}

.avatar-hat {
  display: none;
}

.avatar-hat-crown,
.avatar-hat-brim {
  fill: #d7a13e;
}

.avatar-brow {
  fill: none;
  stroke-width: 5;
}

.avatar-eye {
  fill: #fff7ec;
}

.avatar-pupil {
  fill: #101820;
}

.avatar-eye-shine {
  fill: #ffffff;
}

.avatar-nose {
  fill: #dc835e;
}

.avatar-smile {
  fill: none;
  stroke-width: 3.5;
}

.avatar-cheek {
  fill: rgba(186, 82, 62, 0.2);
}

.outfit-farm .avatar-hat,
.outfit-distribution .avatar-hat {
  display: block;
}

.outfit-farm .avatar-hat-crown,
.outfit-farm .avatar-hat-brim {
  fill: #d7ad4f;
}

.outfit-brew .avatar-hair {
  transform: translateY(2px) scaleY(0.82);
  transform-origin: 50px 30px;
}

.outfit-brew .avatar-hat {
  display: block;
}

.outfit-brew .avatar-hat-crown,
.outfit-brew .avatar-hat-brim {
  fill: #f6f1e7;
}

.outfit-pub .avatar-apron {
  fill: #f2dfbd;
}

.outfit-distribution .avatar-hat-crown,
.outfit-distribution .avatar-hat-brim {
  fill: #7a5032;
}

.action-farm .avatar-arm-right {
  transform-origin: 70px 78px;
  animation: avatarFarmArm 1.05s ease-in-out infinite;
}

.action-brew .avatar-arm-left,
.action-brew .avatar-arm-right {
  transform-origin: 50px 88px;
  animation: avatarStir 0.9s ease-in-out infinite;
}

.action-pub .avatar-arm-right {
  transform-origin: 70px 78px;
  animation: avatarServeArm 1.4s ease-in-out infinite;
}

.action-distribution .avatar-person {
  animation: avatarCarryBounce 0.8s ease-in-out infinite;
}

@keyframes avatarFarmArm {
  0%,
  100% {
    transform: rotate(6deg);
  }
  50% {
    transform: rotate(-28deg) translateY(-3px);
  }
}

@keyframes avatarStir {
  0%,
  100% {
    transform: rotate(-6deg);
  }
  50% {
    transform: rotate(9deg) translateY(2px);
  }
}

@keyframes avatarServeArm {
  0%,
  100% {
    transform: rotate(-6deg);
  }
  50% {
    transform: rotate(-36deg) translateY(-5px);
  }
}

@keyframes avatarCarryBounce {
  0%,
  100% {
    transform: translateY(0) rotate(-1deg);
  }
  50% {
    transform: translateY(-4px) rotate(2deg);
  }
}

@media (max-width: 760px) {
  .scene {
    height: 375px;
  }

  .illustrated-scene {
    height: 405px;
  }

  .brewer-avatar {
    width: 76px;
    height: 128px;
  }

  .character-preview {
    width: 86px;
    height: 132px;
  }

  .player {
    bottom: 48px;
  }

  .illustrated-scene .brewer-avatar.player,
  .illustrated-scene.scene-brew .brewer-avatar.player,
  .illustrated-scene.scene-pub .brewer-avatar.player,
  .illustrated-scene.scene-distribution .brewer-avatar.player {
    left: 5%;
    bottom: -4px;
    width: min(128px, 32.3vw);
    max-height: 94%;
  }

  .pub-bar {
    width: 214px;
  }

  .pub-bar::before {
    left: 34px;
    top: -56px;
  }

  .ceiling-duct {
    left: 31%;
    right: 3%;
    top: 16px;
  }

  .comic-sign {
    right: 4%;
    top: 58px;
    min-width: 170px;
    padding: 8px 10px;
    font-size: 0.92rem;
  }

  .chalkboard {
    left: 4%;
    top: 66px;
    width: 92px;
    font-size: 0.58rem;
  }

  .tap-towers {
    right: 4%;
    bottom: 73px;
    gap: 6px;
  }

  .comic-crowd {
    left: 20%;
    right: 18%;
    bottom: 70px;
    gap: 9px;
  }

  .comic-crowd span {
    width: 20px;
    height: 30px;
  }

  .comic-crowd span::before {
    left: 2px;
    top: -15px;
    width: 13px;
    height: 14px;
  }
}

/* Claude gameplay UI additions: reputation celebrations, daily streak, random events. */
#celebrationLayer {
  position: fixed; top: max(18px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  z-index: 999; display: flex; flex-direction: column; gap: 8px;
  pointer-events: none; width: min(420px, calc(100vw - 32px));
}
.celebration-toast {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: 10px;
  border: 2px solid #1f130b;
  background: linear-gradient(135deg, #fff3c4, #ffe9a8);
  box-shadow: 0 10px 28px rgba(31,19,11,0.35);
  font-weight: 900; color: #1b110a;
  animation: celebrationIn 320ms cubic-bezier(0.2,0.9,0.3,1.4) forwards, celebrationOut 420ms ease forwards 3.2s;
}
.celebration-toast .celebration-icon { font-size: 1.4rem; line-height: 1; flex-shrink: 0; }
.celebration-toast .celebration-text { display: flex; flex-direction: column; gap: 1px; }
.celebration-toast .celebration-title { font-size: 0.92rem; }
.celebration-toast .celebration-sub { font-size: 0.74rem; font-weight: 750; color: #6b5a2f; }
@keyframes celebrationIn { 0%{opacity:0;transform:translateY(-18px) scale(0.9);} 100%{opacity:1;transform:translateY(0) scale(1);} }
@keyframes celebrationOut { 0%{opacity:1;transform:translateY(0);} 100%{opacity:0;transform:translateY(-12px);} }

#streakBanner {
  width: min(1180px, calc(100vw - 24px));
  margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-radius: 8px;
  border: 1px solid var(--gold);
  background: linear-gradient(135deg, #fff3c4, #fff8e7);
  box-shadow: var(--shadow);
  cursor: pointer;
  font-weight: 900;
}
#streakBanner.hidden { display: none; }
#streakBanner .streak-copy { display: flex; flex-direction: column; gap: 2px; }
#streakBanner .streak-copy strong { font-size: 0.96rem; }
#streakBanner .streak-copy span { font-size: 0.78rem; color: var(--muted); font-weight: 750; }
#streakBanner .streak-claim { background: var(--ink); color: #fffdf8; padding: 8px 16px; border-radius: 8px; border: none; font-weight: 900; }

/* Brew Pub visual upgrade prop layer */
.scene {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  width: 100%;
}

.scene-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.scene-prop {
  position: absolute;
  height: auto;
  pointer-events: none;
  user-select: none;
  transform-origin: 50% 100%;
  filter: drop-shadow(5px 8px 5px rgba(20, 11, 6, 0.28));
}

@keyframes propPop {
  0% { transform: scale(0.6); opacity: 0; }
  65% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.scene-prop.just-unlocked {
  animation: propPop 420ms ease-out;
}

.illustrated-scene.scene-pub .brewer-avatar.player {
  z-index: 4;
}


.scene-prop.full-scene {
  inset: 0 auto auto 0;
  max-width: none;
  filter: none;
  transform-origin: 50% 50%;
}

.scene-prop.full-scene.just-unlocked {
  animation: none;
}



/* Opening brewer portrait selection */
.avatar-gender-toggle {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
}

.avatar-gender-toggle button {
  flex: 1;
  padding: 8px 0;
  border-radius: 8px;
  border: 2px solid rgba(216,176,90,0.3);
  background: rgba(255,255,255,0.06);
  color: rgba(255,246,222,0.55);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s;
}

.avatar-gender-toggle button.active {
  background: rgba(216,176,90,0.18);
  border-color: rgba(216,176,90,0.7);
  color: #f6cf76;
}

.avatar-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.avatar-card {
  display: grid;
  place-items: center;
  min-height: 176px;
  padding: 8px;
  border: 1px solid #b7a98e;
  border-radius: 8px;
  background: radial-gradient(circle at 50% 24%, rgba(255, 246, 209, 0.94), transparent 48%), #fffdf8;
  cursor: pointer;
  overflow: hidden;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

/* .avatar-card:hover — moved to @media (hover: hover) */

.avatar-card.active {
  outline: 3px solid rgba(217, 154, 35, 0.45);
  background: #fff2cb;
}

.brewer-avatar.avatar-preview {
  width: min(126px, 18vw);
  height: 168px;
  object-fit: contain;
  object-position: center center;
  filter: drop-shadow(0 10px 5px rgba(35, 31, 27, 0.24));
}

.selected-avatar-confirm {
  display: grid;
  place-items: end center;
  min-height: 168px;
  padding: 8px 8px 0;
  border: 1px solid #b7a98e;
  border-radius: 8px;
  background: radial-gradient(circle at 50% 24%, rgba(255, 246, 209, 0.94), transparent 48%), #fffdf8;
  overflow: hidden;
}

.brewer-avatar.avatar-confirm {
  width: min(132px, 22vw);
  height: 180px;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 10px 5px rgba(35, 31, 27, 0.24));
}

.character-card .brewer-avatar.character-preview {
  width: 86px;
  height: 122px;
  object-fit: contain;
  object-position: center bottom;
}

@media (max-width: 760px) {
  .avatar-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brewer-avatar.avatar-preview { width: min(116px, 34vw); }
}


.boost-status {
  display: grid;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(33, 24, 18, 0.14);
  text-align: left;
}

.boost-status.hidden {
  display: none;
}

.boost-status-title {
  color: var(--red);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.boost-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 6px;
  align-items: baseline;
  padding: 5px 6px;
  border-radius: 6px;
  background: rgba(47, 85, 59, 0.08);
}

.boost-row strong {
  color: var(--green);
  font-size: 0.88rem;
  line-height: 1;
}

.boost-row span {
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 850;
  text-transform: none;
}

.boost-row em {
  color: var(--muted);
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 850;
}


/* Correct visual centering for portrait PNGs with right-side tools */
.avatar-card {
  place-items: center;
}

.brewer-avatar.avatar-preview,
.brewer-avatar.avatar-confirm,
.character-card .brewer-avatar.character-preview {
  transform: translateX(-9%);
  object-position: center center;
}

.selected-avatar-confirm {
  place-items: center;
}

/* Clear locked recipe requirements */
.brew-row-requirements {
  display: grid;
  gap: 6px;
  margin-top: 4px;
}

.brew-row-requirements b {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.brew-row-requirements div {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.brew-row-requirements span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  border: 1px solid rgba(143, 55, 45, 0.26);
  border-radius: 999px;
  background: rgba(143, 55, 45, 0.08);
  color: #713126;
  font-size: 0.73rem;
  font-weight: 850;
  line-height: 1.15;
  text-transform: none;
}

.pub-inventory {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffaf0;
}

.pub-inventory-heading {
  margin-bottom: 0;
}

.pub-auto-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--green);
  background: rgba(74, 143, 85, 0.1);
  border: 1px solid rgba(74, 143, 85, 0.3);
  border-radius: 20px;
  padding: 3px 10px;
  margin: 8px 0 4px;
}

.pub-auto-off {
  color: var(--muted);
  background: rgba(0,0,0,0.04);
  border-color: var(--line);
}

.tap-summary,
.empty-taps {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(183, 169, 142, 0.62);
  border-radius: 8px;
  background: #fff8e7;
}

.tap-summary strong,
.empty-taps strong {
  color: var(--ink);
  font-size: 0.98rem;
}

.tap-summary span,
.empty-taps span {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 800;
}

.tap-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.tap-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(183, 169, 142, 0.72);
  border-radius: 8px;
  background: #fffdf8;
}

.tap-card div:first-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.tap-card strong,
.tap-card span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tap-card span,
.tap-card small {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
}

.tap-card b {
  display: block;
  color: var(--blue);
  font-size: 1rem;
  text-align: right;
}

.tap-card em {
  color: var(--green);
  font-size: 0.86rem;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}


@media (max-width: 760px) {
  .tap-list {
    grid-template-columns: 1fr;
  }

  .tap-card {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .tap-card em {
    grid-column: 1 / -1;
  }

  .tap-summary,
  .empty-taps {
    align-items: flex-start;
    flex-direction: column;
  }
}

.brew-house-switch {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 4px;
  margin-bottom: 12px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f6f1e8;
}

.brew-house-switch button {
  min-height: 38px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-weight: 900;
  cursor: pointer;
}

.brew-house-switch button.active {
  background: #2f553b;
  color: #fffdf8;
  box-shadow: 0 8px 16px rgba(49, 39, 25, 0.12);
}

#beerRecipes.hidden,
#beerCompetitions.hidden,
#brewUpgrades.hidden,
#distributionRoutes.hidden,
#distributionUpgrades.hidden,
#distributionNote.hidden,
#distroOrders.hidden,
#gameMenuOverlay.hidden,
#howToPlayOverlay.hidden,
#gameMenuPanel.hidden,
#gameMenuConfirm.hidden,
#prestigeOverlay.hidden {
  display: none;
}

/* ─── Game Menu Button ─── */
.game-menu-btn {
  position: absolute;
  top: 8px;
  left: 18px;
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: rgba(18, 11, 8, 0.86);
  border: 1px solid rgba(255, 246, 217, 0.34);
  color: #fff7dc;
  font-size: 1.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background 0.15s, transform 0.15s;
  flex-shrink: 0;
}

.topbar-icon {
  width: 25px;
  height: 25px;
  display: block;
  fill: currentColor;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.55));
}

.menu-icon {
  color: #fff7dc;
}

.trophy-icon {
  color: #fff7dc;
}

/* .game-menu-btn:hover — moved to @media (hover: hover) */

.game-menu-btn.hidden,
.prestige-btn.hidden,
.gm-item.hidden {
  display: none;
}

/* ─── Prestige Button ─── */
.prestige-btn {
  position: absolute;
  top: 8px;
  right: 18px;
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(18, 11, 8, 0.86);
  border: 1px solid rgba(255, 246, 217, 0.34);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, transform 0.15s;
  flex-shrink: 0;
}

/* .prestige-btn:hover — moved to @media (hover: hover) */

.topbar.playing .prestige-btn {
  top: 8%;
  right: 1.4%;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 246, 217, 0.34);
  background: rgba(18, 11, 8, 0.86);
}

/* ─── Prestige Panel ─── */
.prestige-panel {
  display: flex;
  flex-direction: column;
  max-height: 88vh;
}

.prestige-tabs {
  display: flex;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.prestige-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 12px 4px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: clamp(0.7rem, 3.4vw, 0.84rem);
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  letter-spacing: 0.01em;
  white-space: nowrap;
  line-height: 1;
}
.prestige-tab.active {
  color: var(--ink);
  border-bottom-color: var(--gold);
}
/* .prestige-tab:hover — moved to @media (hover: hover) */

#prestigeTabContent {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  padding: 0 16px 16px;
}

.prestige-current {
  padding: 20px 20px 0;
}

.prestige-current-badge {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(227,180,76,0.12), rgba(159,107,22,0.08));
  border: 1px solid rgba(227,180,76,0.28);
  border-radius: 10px;
  margin-bottom: 4px;
}

.prestige-crown {
  font-size: 2rem;
  line-height: 1;
  flex-shrink: 0;
}

.prestige-current-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.prestige-current-text strong {
  font-size: 1rem;
  font-weight: 900;
  color: var(--ink);
  line-height: 1.2;
}

.prestige-current-text span {
  font-size: 0.75rem;
  color: var(--muted);
  font-weight: 600;
}

.prestige-tiers-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 16px 20px;
}

.prestige-tier-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.prestige-tier-row:last-child {
  border-bottom: none;
}

.prestige-tier-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.prestige-tier-info strong {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--ink);
}

.prestige-owned .prestige-tier-info strong {
  color: var(--muted);
}

.prestige-locked .prestige-tier-info strong {
  color: var(--muted);
}

.prestige-tier-info span {
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 600;
}

.prestige-tier-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.prestige-check {
  font-size: 1.1rem;
  color: #5a9e6f;
  font-weight: 900;
}

.prestige-price {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--muted);
  white-space: nowrap;
}

.prestige-next .prestige-price {
  color: var(--ink);
}

.prestige-tier-row .action {
  font-size: 0.78rem;
  padding: 7px 12px;
  white-space: nowrap;
}

/* ─── Fame Progress Bar ─── */
.prestige-progress-bar { height: 6px; background: rgba(200,168,80,0.15); border-radius: 4px; margin: 8px 20px 0; }
.prestige-progress-fill { height: 100%; background: #c8a850; border-radius: 4px; transition: width 0.4s ease; }

/* ─── Legacy Panel ─── */
.ach-claimed-inline { color: #6ab04c; font-style: normal; font-weight: 600; }
.mast-bonus { color: #6ab04c; font-weight: 600; font-size: 0.8em; }
.ach-mastery-legend { margin-bottom: 10px; }
.ach-legend-stars { display: flex; gap: 8px; flex-wrap: wrap; }
.ach-legend-stars span { font-size: 0.75rem; color: #c8a850; background: rgba(200,168,80,0.1); border: 1px solid rgba(200,168,80,0.2); border-radius: 6px; padding: 3px 8px; white-space: nowrap; }
.ach-mast-unbrewed { opacity: 0.4; }

/* ─── Legacy Collection Shelf ─── */
.legacy-city-section { margin-bottom: 28px; }
.legacy-city-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0 8px;
  border-bottom: 1px solid rgba(200,168,80,0.2);
  margin-bottom: 12px;
}
.legacy-city-name { font-size: 0.95rem; font-weight: 800; color: #1a1208; letter-spacing: 0.04em; text-transform: uppercase; }
.legacy-city-label { font-size: 0.65rem; color: rgba(80,60,20,0.55); font-weight: 500; margin-top: 1px; }
.legacy-city-count { font-size: 0.7rem; font-weight: 700; color: rgba(80,60,20,0.45); letter-spacing: 0.06em; }

.legacy-item-card {
  display: flex; gap: 12px; align-items: flex-start;
  background: linear-gradient(160deg, #1e1a12 0%, #2a2318 100%);
  border: 1px solid rgba(200,168,80,0.2);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 10px;
  position: relative; overflow: hidden;
}
.legacy-item-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200,168,80,0.4), transparent);
}
.legacy-item-owned {
  border-color: rgba(144,200,96,0.35);
  background: linear-gradient(160deg, #141a10 0%, #1a2214 100%);
  box-shadow: 0 0 12px rgba(144,200,96,0.08);
}
.legacy-item-owned::before { background: linear-gradient(90deg, transparent, rgba(144,200,96,0.45), transparent); }

.legacy-item-img-wrap {
  position: relative; flex-shrink: 0;
  width: 80px; height: 80px;
  border-radius: 8px; overflow: hidden;
  border: 1px solid rgba(200,168,80,0.2);
}
.legacy-item-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.legacy-item-img-placeholder { width: 100%; height: 100%; background: #1a1512; }
.legacy-item-locked .legacy-item-img { filter: grayscale(1) brightness(0.4); }
.legacy-item-lock-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; background: rgba(0,0,0,0.3);
}

.legacy-item-body { flex: 1; min-width: 0; }
.legacy-item-name { font-size: 0.88rem; font-weight: 700; color: #e8d090; margin-bottom: 4px; line-height: 1.2; }
.legacy-item-flavor { font-size: 0.68rem; color: rgba(200,168,80,0.45); line-height: 1.45; font-style: italic; margin-bottom: 8px; }
.legacy-item-effect-pill {
  display: inline-block;
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.05em;
  color: #90c860; background: rgba(144,200,96,0.12);
  border: 1px solid rgba(144,200,96,0.25);
  border-radius: 20px; padding: 3px 10px;
  margin-bottom: 8px;
}
.legacy-item-btn {
  display: block; width: 100%;
  padding: 9px;
  background: linear-gradient(135deg, #4a7c3f, #3a6030);
  color: #fff; font-weight: 700; font-size: 0.78rem;
  border: none; border-radius: 7px; cursor: pointer;
  letter-spacing: 0.03em;
}
.legacy-item-btn-disabled { background: #222; color: #555; cursor: not-allowed; }
.legacy-item-owned-bar { font-size: 0.7rem; font-weight: 600; color: #90c860; }
.legacy-progress-header { font-size: 0.72rem; font-weight: 600; color: rgba(80,60,20,0.5); text-align: center; padding: 10px 0 14px; }
.legacy-cards-list { display: flex; flex-direction: column; padding-bottom: 20px; }
.legacy-item-future { opacity: 0.45; pointer-events: none; }
.legacy-item-future-img { background: #111; }
.legacy-item-future-name { color: rgba(244,227,184,0.3); letter-spacing: 0.1em; }
.legacy-item-future-flavor { font-size: 0.68rem; color: rgba(200,168,80,0.3); font-style: italic; }

/* ─── Legacy Unlock Reveal Modal ─── */
.legacy-reveal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  animation: legacyFadeIn 0.25s ease;
}
@keyframes legacyFadeIn { from { opacity:0 } to { opacity:1 } }
.legacy-reveal-card {
  background: linear-gradient(160deg, #1e1a12 0%, #2a2318 100%);
  border: 1px solid rgba(200,168,80,0.4);
  border-radius: 18px; overflow: hidden;
  width: 320px; max-width: 90vw;
  box-shadow: 0 0 60px rgba(200,168,80,0.2);
  animation: legacySlideUp 0.3s cubic-bezier(0.22,1,0.36,1);
}
@keyframes legacySlideUp { from { transform: translateY(40px); opacity:0 } to { transform: translateY(0); opacity:1 } }
.legacy-reveal-img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.legacy-reveal-img-placeholder { width: 100%; aspect-ratio: 1 / 1; background: #1a1512; }
.legacy-reveal-body { padding: 20px 20px 24px; text-align: center; }
.legacy-reveal-eyebrow { font-size: 0.65rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #c8a850; margin-bottom: 8px; }
.legacy-reveal-name { font-size: 1.25rem; font-weight: 900; color: #f4e3b8; line-height: 1.2; margin-bottom: 10px; }
.legacy-reveal-flavor { font-size: 0.75rem; color: rgba(200,168,80,0.55); font-style: italic; line-height: 1.5; margin-bottom: 14px; }
.legacy-reveal-effect { display: inline-block; font-size: 0.72rem; font-weight: 700; color: #90c860; background: rgba(144,200,96,0.12); border: 1px solid rgba(144,200,96,0.3); border-radius: 20px; padding: 5px 14px; margin-bottom: 20px; }
.legacy-reveal-btn { display: block; width: 100%; padding: 13px; background: linear-gradient(135deg, #c8a850, #a07830); color: #1a1208; font-weight: 800; font-size: 0.9rem; border: none; border-radius: 10px; cursor: pointer; letter-spacing: 0.03em; }

/* ─── Game Menu Overlay ─── */
.gm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,20,12,0.55);
  z-index: 2000;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.gm-panel {
  width: min(320px, 90vw);
  background: var(--panel);
  border-left: 1px solid var(--line);
  /* Panel starts below the notch — blurred game shows above it */
  margin-top: calc(env(safe-area-inset-top, 0px) + 10px);
  height: calc(100% - env(safe-area-inset-top, 0px) - 10px);
  border-radius: 18px 0 0 0;
  box-shadow: 0 -6px 24px rgba(0,0,0,0.28);
  display: flex;
  flex-direction: column;
  animation: slideInRight 0.2s ease;
  overflow-y: auto;
}

/* Game menu mirrors from the left (hamburger is top-left) */
#gameMenuOverlay { justify-content: flex-start; }
#gameMenuOverlay .gm-panel {
  border-left: none;
  border-right: 1px solid var(--line);
  border-radius: 0 18px 0 0;
  animation: slideInLeft 0.2s ease;
}

@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

@keyframes slideInLeft {
  from { transform: translateX(-100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

.gm-panel-htp {
  width: min(480px, 100vw);
}

.gm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--panel);
  z-index: 1;
}

.gm-title {
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.gm-close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(0,0,0,0.06);
  border: none;
  font-size: 0.9rem;
  cursor: pointer;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* .gm-close:hover — moved to @media (hover: hover) */

.gm-back {
  background: none;
  border: none;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 0;
}

/* .gm-back:hover — moved to @media (hover: hover) */

.gm-nav {
  display: flex;
  flex-direction: column;
  padding: 12px 12px;
  gap: 2px;
  flex: 1;
}

.gm-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 12px;
  border-radius: 10px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--ink);
  transition: background 0.12s;
}

/* .gm-item:hover — moved to @media (hover: hover) */

.gm-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  flex-shrink: 0;
  position: relative;
  background: var(--line);
}

/* CSS-drawn icons */
.gm-icon-resume {
  background: rgba(74,143,85,0.15);
}
.gm-icon-resume::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 11px;
  border-color: transparent transparent transparent var(--green);
  transform: translateX(2px);
}

.gm-icon-help {
  background: rgba(61,113,143,0.15);
}
.gm-icon-help::after {
  content: "?";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 900;
  color: var(--blue);
}

.gm-icon-brewer {
  background: rgba(61,113,143,0.12);
  border: 1px solid rgba(61,113,143,0.12);
}

.gm-icon-brewer::before {
  content: "↻";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  font-size: 1.45rem;
  font-weight: 900;
  line-height: 1;
}

.gm-icon-restart {
  background: rgba(170,77,56,0.12);
}
.gm-icon-restart::after {
  content: "↺";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--red);
}

.gm-icon-dev {
  background: rgba(100,100,100,0.1);
}
.gm-icon-dev::after {
  content: "⚙";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  color: var(--muted);
}

.gm-item-text strong {
  display: block;
  font-size: 0.9rem;
  font-weight: 800;
}

/* ─── Achievement Panel ─── */
.ach-section {
  padding: 16px 0 12px;
  border-bottom: 1px solid var(--line);
}
.ach-rank-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 6px 0 10px;
  padding: 12px 14px;
  border: 1px solid rgba(213, 174, 90, 0.45);
  border-radius: 10px;
  background:
    radial-gradient(circle at 16% 20%, rgba(255, 239, 192, 0.18), transparent 40%),
    linear-gradient(180deg, rgba(54, 36, 22, 0.96), rgba(26, 16, 10, 0.96));
}
.ach-rank-star {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f4d68a, #c89a3a);
  color: #2a1a08;
  font-size: 1.3rem;
}
.ach-rank-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ach-rank-text strong {
  font-size: 1.05rem;
  font-weight: 900;
  color: #f4e3b8;
  letter-spacing: 0.01em;
}
.ach-rank-text span {
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(244, 227, 184, 0.66);
}
.ach-standing-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}
.ach-standing-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  background: radial-gradient(circle at 20% 15%, rgba(255,239,192,0.14), transparent 50%),
              linear-gradient(160deg, rgba(54,36,22,0.97), rgba(26,16,10,0.97));
  border: 1px solid rgba(213,174,90,0.35);
  border-radius: 12px;
  padding: 14px 14px 12px;
}
.ach-stat-icon {
  font-size: 1.3rem;
  margin-bottom: 4px;
}
.ach-stat-value {
  font-size: 1.25rem;
  font-weight: 900;
  color: #f4e3b8;
  line-height: 1;
  margin-bottom: 2px;
}
.ach-stat-label {
  font-size: 0.72rem;
  font-weight: 800;
  color: #c8a850;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ach-stat-sub {
  font-size: 0.65rem;
  color: rgba(244,227,184,0.45);
  font-weight: 500;
  margin-top: 1px;
}
.ach-section:last-child { border-bottom: none; }
.ach-section h4 {
  font-family: 'Rye', serif;
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 4px;
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ach-count {
  font-family: system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted);
  background: var(--line);
  padding: 1px 7px;
  border-radius: 20px;
}
.ach-sub {
  font-size: 0.76rem;
  color: var(--muted);
  margin: 0 0 10px;
  line-height: 1.4;
}

/* Weekly challenge goals */
.ach-goals { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.ach-goal {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
}
.ach-goal-done {
  border-color: var(--green);
  background: rgba(74,143,85,0.06);
}
.ach-goal-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 6px;
}
.ach-goal-label { font-size: 0.82rem; font-weight: 600; color: var(--ink); line-height: 1.3; }
.ach-goal-check { font-size: 1rem; color: var(--green); font-weight: 800; flex-shrink: 0; }
.ach-bar {
  height: 5px;
  background: var(--line);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 4px;
}
.ach-bar-fill {
  height: 100%;
  background: var(--green);
  border-radius: 3px;
  transition: width 0.3s;
}
.ach-goal-count { font-size: 0.72rem; color: var(--muted); }
.ach-claim-btn {
  width: 100%;
  margin-top: 6px;
  padding: 10px;
  font-size: 0.88rem;
}
.ach-claimed {
  text-align: center;
  padding: 8px;
  font-size: 0.78rem;
  color: var(--green);
  font-weight: 700;
  margin-top: 6px;
}

/* Medal tracker */
.ach-medals {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}
.ach-medal {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 6px 8px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--paper);
}
.ach-medal-n {
  font-size: 1.6rem;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 2px;
}
.ach-medal-l {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.ach-gold { background: rgba(217,154,35,0.1); border-color: rgba(217,154,35,0.4); }
.ach-gold .ach-medal-n { color: #b8820f; }
.ach-silver { background: rgba(160,160,175,0.1); border-color: rgba(160,160,175,0.4); }
.ach-silver .ach-medal-n { color: #8a8aa0; }
.ach-bronze { background: rgba(180,115,60,0.1); border-color: rgba(180,115,60,0.4); }
.ach-bronze .ach-medal-n { color: #a0602a; }

/* Medal milestones list */
.ach-milestones { display: flex; flex-direction: column; gap: 4px; }
.ach-ms {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 10px;
  border-radius: 7px;
  font-size: 0.8rem;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--muted);
}
.ach-ms-earned {
  background: rgba(74,143,85,0.07);
  border-color: rgba(74,143,85,0.3);
  color: var(--ink);
}
.ach-ms-label { font-weight: 600; }
.ach-ms-right { font-size: 0.76rem; }
.ach-ms-check { color: var(--green); font-weight: 800; font-size: 0.9rem; }

/* Tap list grid */
.ach-taplist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 8px;
}
.ach-tap {
  padding: 7px 10px;
  border-radius: 7px;
  border: 1px solid var(--line);
  font-size: 0.78rem;
  color: var(--muted);
  background: var(--paper);
}
.ach-tap-done {
  border-color: rgba(74,143,85,0.4);
  background: rgba(74,143,85,0.07);
  color: var(--ink);
  font-weight: 600;
}
.ach-tap-done::before { content: "✓ "; color: var(--green); }

/* Recipe mastery */
.ach-mastery { display: flex; flex-direction: column; gap: 5px; }
.ach-mast-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 7px;
  background: var(--paper);
  border: 1px solid var(--line);
}
.ach-mast-name { flex: 1; font-size: 0.8rem; font-weight: 600; color: var(--ink); }
.ach-mast-stars { font-size: 0.85rem; color: var(--gold); letter-spacing: -1px; flex-shrink: 0; }
.ach-mast-cnt { font-size: 0.72rem; color: var(--muted); flex-shrink: 0; min-width: 52px; text-align: right; }

.gm-item-text small {
  font-size: 0.75rem;
  color: var(--muted);
  font-weight: 500;
}

.gm-item-danger .gm-item-text strong { color: var(--red); }

.gm-item-ad {
  background: rgba(80, 160, 60, 0.08);
  border: 1px solid rgba(80, 160, 60, 0.2);
  border-radius: 14px;
  margin-bottom: 4px;
}
.gm-item-ad .gm-item-text strong { color: var(--text); }
.gm-item-ad .gm-item-text small { color: var(--muted); }
.gm-ad-badge {
  margin-left: auto;
  background: rgba(80, 160, 60, 0.15);
  color: #5a9e40;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 7px;
  border-radius: 20px;
  border: 1px solid rgba(80, 160, 60, 0.3);
  white-space: nowrap;
  flex-shrink: 0;
}

.gm-item-dev {
  opacity: 0.75;
}
/* .gm-item-dev:hover — moved to @media (hover: hover) */

.gm-divider {
  height: 1px;
  background: var(--line);
  margin: 8px 0;
}

.gm-divider-label {
  height: auto;
  background: none;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  padding: 4px 12px 0;
  margin: 4px 0 0;
}

.gm-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--line);
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* New Game confirm pane */
.gm-confirm {
  position: fixed;
  inset: 0;
  background: rgba(15,20,12,0.55);
  z-index: 2100;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  backdrop-filter: blur(2px);
}

.gm-confirm-body {
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
}

.gm-confirm-body p {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.55;
  margin: 0;
}

.gm-confirm-actions {
  display: flex;
  gap: 10px;
}

.danger-action {
  background: var(--red);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  font: inherit;
  font-weight: 800;
  font-size: 0.88rem;
  cursor: pointer;
}

/* .danger-action:hover — moved to @media (hover: hover) */

/* ─── How to Play content ─── */
.gm-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow-y: auto;
}

.htp-section h4 {
  font-size: 0.9rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold);
  margin: 0 0 6px;
}

.htp-section p {
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}

.htp-tips ul {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.htp-tips li {
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--muted);
}

.competition-lock,
.competition-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffaf0;
}

.competition-lock {
  min-height: 150px;
  place-content: center;
  text-align: center;
}

.competition-lock strong {
  color: var(--ink);
  font-size: 1.08rem;
}

.competition-lock span,
.competition-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.judge-clues {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.judge-clues span,
.competition-entry em {
  width: fit-content;
  max-width: 100%;
  padding: 6px 8px;
  border: 1px solid rgba(183, 169, 142, 0.72);
  border-radius: 8px;
  background: #fff8e7;
  color: var(--ink);
  font-size: 0.8rem;
  font-style: normal;
  font-weight: 900;
}

.competition-list {
  display: grid;
  gap: 8px;
}

.competition-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 160px;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(183, 169, 142, 0.72);
  border-radius: 8px;
  background: #fffdf8;
}

.competition-entry div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.competition-entry strong,
.competition-entry span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.competition-entry span {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 800;
}

.competition-entry.strong em {
  border-color: rgba(47, 85, 59, 0.42);
  background: #edf5e8;
  color: #2f553b;
}

.competition-entry.good em {
  border-color: rgba(182, 138, 45, 0.42);
  background: #fff3d8;
  color: #7a5415;
}

.competition-entry.weak em {
  color: #8b8172;
}

.competition-card.active .progress-track {
  height: 10px;
}

@media (max-width: 760px) {
  .brew-house-switch {
    display: grid;
  }

  .competition-entry {
    grid-template-columns: 1fr;
  }
}

.competition-entry.risky em {
  border-color: rgba(126, 57, 28, 0.42);
  background: #ffe7d1;
  color: #7e391c;
}

.competition-result-modal.hidden {
  display: none;
}

.competition-result-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top, 0px)) 18px max(18px, env(safe-area-inset-bottom, 0px));
  background: rgba(22, 18, 12, 0.62);
  backdrop-filter: blur(3px);
}

.competition-result-card {
  width: min(520px, 100%);
  max-height: 100%;
  overflow-y: auto;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 10px;
  padding: 20px 24px;
  border: 1px solid rgba(255, 246, 217, 0.72);
  border-radius: 8px;
  background: #fffaf0;
  box-shadow: 0 28px 80px rgba(22, 18, 12, 0.38);
  text-align: center;
}

.competition-result-card h2,
.competition-result-card p {
  margin: 0;
}

.competition-result-card h2 {
  color: var(--ink);
  font-size: 1.85rem;
}

.competition-result-card p:not(.eyebrow) {
  color: var(--muted);
  line-height: 1.45;
}

.medallion {
  width: 136px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 16px 24px rgba(49, 39, 25, 0.26));
}

.medallion img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.medallion.best {
  transform: scale(1.06);
}

.medallion.none {
  filter: drop-shadow(0 14px 20px rgba(49, 39, 25, 0.18));
}

.result-rewards {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.result-rewards span {
  display: grid;
  gap: 2px;
  padding: 10px;
  border: 1px solid rgba(183, 169, 142, 0.72);
  border-radius: 8px;
  background: #fff8e7;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 800;
  text-transform: uppercase;
}

.result-rewards strong {
  color: var(--green);
  font-size: 1.08rem;
  text-transform: none;
}

.competition-unlock-card {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% -18%, rgba(255,226,139,0.52), transparent 38%),
    linear-gradient(180deg,#fff9e8 0%,#fffaf0 100%);
}

.competition-unlock-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 0 32%, rgba(255,255,255,0.55) 44%, transparent 56% 100%);
  opacity: 0.42;
}

.competition-unlock-card > * {
  position: relative;
}

.competition-unlock-badge {
  width: 112px;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 38% 30%, #fff8ca 0 18%, #e6b44c 44%, #9d6122 100%);
  border: 5px solid #f8e3a0;
  box-shadow: 0 18px 34px rgba(99,67,26,0.26);
}

.competition-unlock-badge span {
  color: #41240e;
  font-weight: 950;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.competition-unlock-art {
  width: 136px;
  aspect-ratio: 1;
  object-fit: contain;
  filter: drop-shadow(0 18px 28px rgba(99,67,26,0.28));
}

.competition-unlock-rewards strong {
  color: #2f6142;
}

.competition-unlock-proof {
  max-width: 360px;
  font-weight: 800;
  color: #6e5837 !important;
}

@media (max-width: 560px) {
  .result-rewards {
    grid-template-columns: 1fr;
  }

  .competition-result-card {
    padding: 16px 18px;
    gap: 8px;
  }

  .competition-result-card h2 {
    font-size: 1.5rem;
  }

  .competition-unlock-badge {
    width: 80px;
  }

  .competition-unlock-art {
    width: 92px;
  }

  .result-rewards span {
    padding: 8px;
    font-size: 0.82rem;
  }
}

.competition-entry small {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.35;
}

.competition-tools {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

.odds-reveal {
  width: fit-content;
  max-width: 100%;
}

.odds-scout {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  padding: 7px 10px;
  border: 1px solid rgba(47, 85, 59, 0.35);
  border-radius: 8px;
  background: #edf5e8;
  color: #2f553b;
  font-size: 0.8rem;
  font-weight: 900;
  text-transform: uppercase;
}

.prize-guide {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.prize-guide span {
  display: grid;
  gap: 2px;
  padding: 9px;
  border: 1px solid rgba(183, 169, 142, 0.72);
  border-radius: 8px;
  background: #fff8e7;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
}

.prize-guide strong {
  color: var(--ink);
  font-size: 0.88rem;
  text-transform: none;
}

@media (max-width: 760px) {
  .prize-guide {
    grid-template-columns: 1fr;
  }
}

.brew-row-buttons {
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr);
  gap: 8px;
  align-items: center;
}

.rename-beer {
  min-height: 36px;
  padding-inline: 10px;
  border: 1px solid rgba(183, 169, 142, 0.72);
  border-radius: 8px;
  background: #fff8e7;
}

@media (max-width: 760px) {
  .brew-row-buttons {
    grid-template-columns: 1fr;
  }
}

.beer-rename-modal.hidden {
  display: none;
}

.beer-rename-modal {
  position: fixed;
  inset: 0;
  z-index: 82;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(22, 18, 12, 0.52);
  backdrop-filter: blur(3px);
}

.beer-rename-card {
  width: min(420px, 100%);
  display: grid;
  gap: 10px;
  padding: 20px;
  border: 1px solid rgba(255, 246, 217, 0.72);
  border-radius: 8px;
  background: #fffaf0;
  box-shadow: 0 24px 68px rgba(22, 18, 12, 0.34);
}

.beer-rename-card h2,
.beer-rename-card p {
  margin: 0;
}

.beer-rename-card label {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 900;
  text-transform: uppercase;
}

.beer-rename-card input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid rgba(183, 169, 142, 0.9);
  border-radius: 8px;
  background: #fffdf8;
  color: var(--ink);
  font: inherit;
  font-weight: 800;
}

.beer-rename-card small {
  color: var(--muted);
  line-height: 1.35;
}

.rename-actions {
  display: grid;
  grid-template-columns: auto minmax(140px, 1fr);
  gap: 8px;
  align-items: center;
}

.research-card {
  grid-template-rows: auto auto auto auto auto;
  min-height: 0;
}

.research-phase,
.research-next {
  display: grid;
  gap: 3px;
  padding: 8px;
  border: 1px solid rgba(183, 169, 142, 0.72);
  border-radius: 8px;
  background: #fff8e7;
}

.research-phase b,
.research-next strong {
  color: var(--ink);
  font-size: 0.92rem;
}

.research-phase span,
.research-next span,
.research-next small {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1.25;
  text-transform: uppercase;
}

.research-next.complete {
  background: #edf5e8;
  border-color: rgba(47, 85, 59, 0.35);
}

.research-card > p {
  display: none;
}

/* Static brewery header skin plus live stat tile */
.topbar.playing .wallet {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: stretch;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 7px 10px;
  min-width: 0;
  padding: 16px 15px;
  border: 1px solid rgba(242, 239, 230, 0.2);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(44, 29, 20, 0.96), rgba(19, 12, 9, 0.98)),
    radial-gradient(circle at 28% 14%, rgba(255, 230, 180, 0.12), transparent 34%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 10px 24px rgba(0, 0, 0, 0.18);
  text-align: left;
}

.topbar.playing .wallet span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: rgba(242, 239, 230, 0.72);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.075em;
  align-self: end;
}


.topbar.playing .wallet-label::before {
  display: inline-grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  background: rgba(242, 239, 230, 0.13);
  color: #f2efe6;
  font-size: 0.9rem;
  line-height: 1;
}

.topbar.playing .cash-label::before {
  content: "$";
  background: linear-gradient(180deg, #e3b44c, #9f6b16);
  color: #21140a;
}

.topbar.playing .reputation-label::before {
  content: "★";
  background: linear-gradient(180deg, #f4efe0, #b6a36d);
  color: #2b2010;
}

.topbar.playing .wallet strong {
  color: #f2efe6 !important;
  font-family: "Avenir Next Condensed", "DIN Condensed", "Roboto Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  justify-self: end;
  align-self: start;
  font-size: clamp(1.4rem, 2vw, 1.9rem) !important;
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: 0.03em;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.45);
  white-space: nowrap;
}

.topbar.playing #reputationTitle {
  color: rgba(242, 239, 230, 0.58) !important;
  grid-column: 1 / -1;
  justify-self: end;
  margin-top: -4px;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  line-height: 1.1;
  text-transform: none !important;
}

.topbar.playing .boost-status {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 5px 10px;
  border: none;
  border-radius: 0;
  background: rgba(30, 55, 38, 0.95);
  color: #f2efe6;
  text-align: left;
}
.boost-status-line {
  font-size: 0.72rem;
  font-weight: 600;
  color: #a8d4a8;
  width: 100%;
  line-height: 1.5;
}
.boost-status-line em {
  font-style: normal;
  font-weight: 700;
  color: rgba(168, 212, 168, 0.65);
  margin-left: 4px;
}

.topbar.playing .boost-status.hidden {
  display: none;
}

.topbar.playing .boost-status-title {
  color: #f2efe6;
  white-space: nowrap;
}

.topbar.playing .game-menu-btn {
  top: 8%;
  left: 1.4%;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 246, 217, 0.34);
  border-radius: 50%;
  background: rgba(18, 11, 8, 0.86);
  box-shadow: none;
  color: #fff7dc;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* .topbar.playing .game-menu-btn:hover — moved to @media (hover: hover) */

.topbar.playing .game-menu-btn:focus-visible {
  outline: 2px solid rgba(242, 239, 230, 0.8);
  outline-offset: -2px;
}


.topbar.playing .boost-row {
  grid-column: 2;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  padding: 0;
  background: transparent;
}

.topbar.playing .boost-row strong,
.topbar.playing .boost-row span,
.topbar.playing .boost-row em {
  color: #f2efe6;
}

.topbar.playing .boost-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar.playing .boost-row em {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 760px) {
  .topbar.playing {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
    row-gap: 0;
    padding: 0;
  }

  .topbar.playing .header-art {
    min-height: clamp(144px, 46vw, 220px);
  }


  .topbar.playing .wallet {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    align-items: start;
    gap: 4px 0;
    padding: 10px 16px;
  }

  .topbar.playing .wallet .cash-label {
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    font-size: 0.68rem !important;
  }

  .topbar.playing .wallet #cash {
    grid-column: 1;
    grid-row: 2;
    justify-self: center;
    font-size: 1.5rem !important;
    text-align: center;
  }

  .topbar.playing .wallet .reputation-label {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    font-size: 0.68rem !important;
    border-left: 1px solid rgba(242, 239, 230, 0.15);
    padding-left: 12px;
  }

  .topbar.playing .wallet #reputation {
    grid-column: 2;
    grid-row: 2;
    justify-self: center;
    font-size: 1.5rem !important;
    text-align: center;
    border-left: 1px solid rgba(242, 239, 230, 0.15);
    padding-left: 12px;
  }

  .topbar.playing #reputationTitle {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-self: center;
    font-size: 0.62rem !important;
    margin-top: 2px;
  }

  .topbar.playing .boost-status {
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
    gap: 5px;
    padding: 8px 10px;
  }

  .topbar.playing .boost-row {
    grid-column: 1;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
  }
}

/* ── Touch / Mobile Optimizations ────────────────────────────────────────── */

/* Scope lift/shadow hover effects to pointer devices only — prevents
   sticky hover states on iOS/Android after a tap */
@media (hover: hover) {
  .tab:hover, .secondary:hover, .action:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(50, 43, 31, 0.14);
  }
  .character-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 32px rgba(50, 43, 31, 0.16);
  }
  .avatar-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(50, 43, 31, 0.15);
  }
  .game-menu-btn:hover { background: rgba(18,11,8,0.98); transform: translateY(-1px); }
  .topbar.playing .game-menu-btn:hover { background: rgba(255,255,255,0.06); transform: none; }
  .prestige-btn:hover { background: rgba(18,11,8,0.98); transform: translateY(-1px); }
  .prestige-tab:hover { color: var(--ink); }
  .gm-close:hover { background: rgba(0,0,0,0.12); color: var(--ink); }
  .gm-back:hover { color: var(--ink); }
  .gm-item:hover { background: rgba(0,0,0,0.05); }
  .gm-item-dev:hover { opacity: 1; }
  .danger-action:hover { filter: brightness(1.1); }
}

/* Remove hover transforms on touch — belt-and-suspenders reset */
@media (hover: none) {
  .tab, .secondary, .action,
  .character-card, .avatar-card,
  .game-menu-btn, .prestige-btn {
    transition: background 160ms ease, opacity 160ms ease;
  }
}

/* :active press feedback for touch */
.tab:active:not(:disabled),
.secondary:active:not(:disabled),
.action:active:not(:disabled) {
  transform: scale(0.97);
  opacity: 0.88;
}
.character-card:active { transform: scale(0.98); }
.avatar-card:active { transform: scale(0.96); }
.gm-item:active { background: rgba(0,0,0,0.07); }
.gm-close:active { background: rgba(0,0,0,0.14); }
.prestige-tab:active { opacity: 0.75; }
.game-menu-btn:active { background: rgba(255,255,255,0.08) !important; }
.prestige-btn:active { background: rgba(18,11,8,0.98) !important; }

/* Momentum scrolling on all overflow containers */
.beer-menu,
.log ul,
.gm-content,
#prestigeTabContent,
.panel,
.gm-nav {

}

/* Minimum readable font sizes — functional UI elements */
.splash-loading-text { font-size: 0.81rem; }
.boost-status-title  { font-size: 0.81rem; }

/* Pipe hint / reward text — bump from 0.72rem */
.pipe-hint,
.pipe-reward-amounts { font-size: 0.78rem; }

/* Safe-area insets for notch / home-indicator devices */
.shell {
  padding-bottom: max(28px, env(safe-area-inset-bottom));
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
#gameMenuOverlay,
#howToPlayOverlay,
#prestigeOverlay {
  padding-bottom: env(safe-area-inset-bottom);
}
.gm-panel {
  padding-bottom: max(0px, env(safe-area-inset-bottom));
}

/* In-game wallet labels — bump from 0.68rem */
@media (max-width: 600px) {
  .topbar.playing .wallet .cash-label,
  .topbar.playing .wallet .reputation-label { font-size: 0.78rem !important; }
  .topbar.playing #reputationTitle          { font-size: 0.70rem !important; }
}

/* ── Pipe Puzzle ──────────────────────────────────────────────────────────── */
#pipeGameSection {
  margin: 12px 0 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(245, 235, 210, 0.18);
  overflow: hidden;
}
.pipe-idle {
  padding: 14px 16px;
}
.pipe-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.pipe-header-row h4 {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--ink);
}
.pipe-desc {
  font-size: 0.78rem;
  color: var(--muted);
  margin: 0 0 12px;
  line-height: 1.45;
}
.pipe-cooldown {
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 600;
}
.pipe-start-btn {
  width: 100%;
}
.pipe-active {
  padding: 12px 14px 14px;
}
.pipe-timer-bar {
  height: 5px;
  background: rgba(0,0,0,0.08);
  border-radius: 3px;
  margin: 8px 0 10px;
  overflow: hidden;
}
.pipe-timer-fill {
  height: 100%;
  background: var(--blue);
  border-radius: 3px;
  transition: width 0.95s linear, background 0.3s;
}
.pipe-timer-fill.pipe-urgent {
  background: var(--red);
}
.pipe-secs {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--blue);
}
.pipe-secs.pipe-urgent {
  color: var(--red);
}
.pipe-grid {
  display: grid;
  gap: 3px;
  width: 100%;
}
.pipe-tile {
  aspect-ratio: 1;
  cursor: pointer;
  border-radius: 5px;
  border: 1px solid rgba(180, 140, 80, 0.22);
  background: rgba(250, 242, 225, 0.3);
  transition: transform 0.1s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  touch-action: manipulation;
}
.pipe-tile:active:not(.pipe-fixed) {
  transform: scale(0.88);
}
.pipe-tile.pipe-on {
  border-color: rgba(61, 113, 143, 0.45);
  background: rgba(61, 113, 143, 0.07);
}
.pipe-tile.pipe-fixed {
  cursor: default;
  background: rgba(200, 235, 215, 0.35);
  border-color: rgba(74, 143, 85, 0.4);
}
.pipe-hint {
  font-size: 0.72rem;
  color: var(--muted);
  text-align: center;
  margin: 8px 0 0;
}
.pipe-reward-preview {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 8px 0 12px;
  border-radius: 7px;
  overflow: hidden;
}
.pipe-reward-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 5px 10px;
  border-radius: 6px;
}
.pipe-reward-row.pipe-reward-3 { background: rgba(74,143,85,0.12); }
.pipe-reward-row.pipe-reward-2 { background: rgba(217,154,35,0.10); }
.pipe-reward-row.pipe-reward-1 { background: rgba(0,0,0,0.04); }
.pipe-reward-label {
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
  flex-shrink: 0;
}
.pipe-reward-3 .pipe-reward-label { color: var(--green); }
.pipe-reward-2 .pipe-reward-label { color: var(--gold); }
.pipe-reward-1 .pipe-reward-label { color: var(--muted); }
.pipe-reward-amounts {
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.4;
}
.pipe-reward-live {
  font-size: 0.74rem;
  color: var(--muted);
  text-align: center;
  margin: 7px 0 0;
  line-height: 1.5;
}
.pipe-reward-live strong {
  color: var(--ink);
}

/* HUD stat tiles: cash and reputation as separate sticky game counters */
.topbar.playing .wallet {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.topbar.playing .wallet-tile {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  align-items: center;
  gap: 3px 10px;
  min-height: 92px;
  padding: 13px 14px 12px;
  border: 1px solid rgba(255, 230, 175, 0.36);
  border-radius: 8px;
  background:
    radial-gradient(circle at 18% 15%, rgba(255, 239, 192, 0.22), transparent 30%),
    linear-gradient(180deg, rgba(54, 36, 22, 0.98), rgba(20, 12, 8, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -10px 18px rgba(0, 0, 0, 0.18),
    0 10px 22px rgba(0, 0, 0, 0.22);
  overflow: hidden;
}

.topbar.playing .wallet-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.22);
}

.topbar.playing .wallet-tile .wallet-label {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(242, 239, 230, 0.78);
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.topbar.playing .wallet-tile .wallet-label::before {
  display: inline-grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border-radius: 50%;
  font-size: 1rem;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.34), 0 2px 6px rgba(0,0,0,0.28);
}

.topbar.playing .cash-label::before {
  content: "$";
  background: linear-gradient(180deg, #f4c95d, #b67613);
  color: #221307;
}

.topbar.playing .reputation-label::before {
  content: "★";
  background: linear-gradient(180deg, #fff6d8, #c0a558);
  color: #241808;
}

.topbar.playing .wallet-tile strong {
  grid-column: 1 / -1;
  justify-self: stretch;
  align-self: center;
  color: #f2efe6 !important;
  font-family: "Avenir Next Condensed", "DIN Condensed", "Roboto Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(1.9rem, 3.25vw, 2.65rem) !important;
  font-weight: 950;
  line-height: 0.9;
  letter-spacing: 0.02em;
  text-align: right;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.56);
  white-space: nowrap;
}

.topbar.playing .reputation-tile {
  background:
    radial-gradient(circle at 18% 15%, rgba(255, 248, 210, 0.22), transparent 30%),
    linear-gradient(180deg, rgba(48, 37, 25, 0.98), rgba(18, 13, 9, 0.98));
}

.topbar.playing .reputation-tile #reputationTitle {
  grid-column: 1 / -1;
  justify-self: end;
  margin-top: -2px;
  color: rgba(242, 239, 230, 0.62) !important;
  font-size: 0.72rem !important;
  font-weight: 850 !important;
  line-height: 1.05;
  text-align: right;
  text-transform: none !important;
}

@media (max-width: 760px) {
  .topbar.playing .wallet {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 0 3px;
  }

  .topbar.playing .wallet-tile {
    min-height: 78px;
    padding: 10px 11px;
  }

  .topbar.playing .wallet-tile .wallet-label {
    justify-self: start;
    font-size: 0.7rem !important;
  }

  .topbar.playing .wallet-tile .wallet-label::before {
    width: 22px;
    height: 22px;
    font-size: 0.9rem;
  }

  .topbar.playing .wallet-tile strong {
    justify-self: end;
    font-size: clamp(1.35rem, 7vw, 2rem) !important;
  }

  .topbar.playing .reputation-tile #reputationTitle {
    font-size: 0.64rem !important;
  }
}

/* Opening Day first-five-minute flow */
.tutorial-coach {
  border-color: rgba(217, 154, 35, 0.48);
  background:
    linear-gradient(180deg, rgba(255, 251, 235, 0.98), rgba(255, 244, 214, 0.96));
}

.tutorial-copy .eyebrow {
  color: #9a6415;
}

.tab.tab-teaser {
  opacity: 0.52;
  filter: grayscale(0.35);
  cursor: not-allowed;
}

.opening-reward-modal.hidden {
  display: none;
}

.opening-reward-modal {
  position: fixed;
  inset: 0;
  z-index: 92;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(22, 14, 8, 0.62);
  backdrop-filter: blur(4px);
}

.opening-reward-card {
  width: min(430px, 100%);
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 22px;
  border: 1px solid rgba(255, 230, 175, 0.7);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 230, 160, 0.28), transparent 34%),
    linear-gradient(180deg, #fff9ea, #f0dfb7);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
  text-align: center;
}

.opening-reward-icon {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(180deg, #f8c95b, #b87516);
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.35), 0 10px 22px rgba(88, 52, 9, 0.28);
  font-size: 2rem;
}

.recipe-reward-card .opening-reward-icon {
  width: 200px;
  height: 200px;
  background: none;
  box-shadow: none;
  overflow: visible;
}

.opening-reward-beer-art {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 8px 24px rgba(88,52,9,0.3));
}

.opening-reward-card h2,
.opening-reward-card p {
  margin: 0;
}

.opening-reward-card h2 {
  font-size: clamp(1rem, 4vw, 1.25rem);
  font-weight: 600;
  color: #7a5c2e;
  letter-spacing: 0.02em;
}

.opening-reward-beer-name {
  margin: 0;
  font-family: 'Cinzel', serif;
  font-size: clamp(1.3rem, 5.5vw, 1.7rem);
  font-weight: 900;
  color: #2a1a06;
  line-height: 1.2;
}

.opening-reward-style {
  margin-top: -2px;
  color: #9a6a21;
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.opening-reward-card p:not(.eyebrow) {
  color: #5f4e36;
  font-weight: 750;
  line-height: 1.35;
}

.recipe-reward-card p:not(.eyebrow):not(.opening-reward-beer-name) {
  font-size: 0.88rem;
  max-width: 34ch;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.recipe-reward-card .opening-reward-grid {
  gap: 6px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  justify-items: stretch;
}

.recipe-reward-card .opening-reward-grid span {
  padding: 7px 10px;
  font-size: 0.7rem;
  text-align: center;
}

.recipe-reward-card .opening-reward-grid strong {
  font-size: 1.05rem;
}

.opening-reward-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.opening-reward-grid span {
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid rgba(183, 137, 45, 0.34);
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.72);
  color: #7a642e;
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.opening-reward-grid strong {
  color: #2f553b;
  font-size: 1.28rem;
  text-transform: none;
}

.opening-next-step {
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(74, 143, 85, 0.1);
}

@media (max-width: 560px) {
  .opening-reward-card {
    padding: 18px;
  }

  .opening-reward-grid {
    grid-template-columns: 1fr;
  }
}

/* Make Opening Day guidance obvious and followable */
.tutorial-why {
  display: inline-block;
  margin-top: 4px !important;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(217, 154, 35, 0.12);
  color: #5f4516 !important;
}

.tutorial-primary-action {
  position: relative;
  display: grid;
  justify-items: start;
  gap: 2px;
  min-width: 220px;
  padding: 11px 14px 11px 42px;
  border-color: rgba(217, 154, 35, 0.72) !important;
  background: linear-gradient(180deg, #f7c85b, #d99a23) !important;
  color: #251708 !important;
  box-shadow: 0 10px 22px rgba(137, 88, 16, 0.24), inset 0 1px 0 rgba(255,255,255,0.34);
  text-align: left;
}

.tutorial-primary-action::before {
  content: "➜";
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2rem;
  font-weight: 950;
}

.tutorial-primary-action span {
  font-size: 0.96rem;
  font-weight: 950;
  line-height: 1.05;
}

.tutorial-primary-action small {
  color: rgba(37, 23, 8, 0.72);
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1.15;
}

.tutorial-highlight {
  animation: tutorialPulse 1.2s ease-in-out infinite;
}

@keyframes tutorialPulse {
  0%, 100% { box-shadow: 0 0 0 7px rgba(217, 154, 35, 0.16), 0 8px 22px rgba(50, 43, 31, 0.14); }
  50% { box-shadow: 0 0 0 11px rgba(217, 154, 35, 0.28), 0 12px 28px rgba(50, 43, 31, 0.2); }
}

@media (max-width: 760px) {
  .tutorial-primary-action {
    width: 100%;
    min-width: 0;
  }
}


/* Required opening tutorial overlay */
.tutorial-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: radial-gradient(circle at 50% 18%, rgba(255, 225, 150, 0.08), transparent 28%), rgba(19, 12, 8, 0.32);
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
  pointer-events: none;
}

.tutorial-backdrop.hidden {
  display: none;
}

@keyframes tutorialSlideUp {
  from { transform: translateX(-50%) translateY(24px); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0);   opacity: 1; }
}

.tutorial-coach.spotlight {
  position: fixed;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 600;
  width: min(560px, calc(100vw - 24px));
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  padding: 17px;
  border: 1px solid rgba(246, 211, 141, 0.86);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 250, 235, 0.98), rgba(244, 224, 185, 0.98));
  box-shadow: 0 24px 76px rgba(0, 0, 0, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.62);
  transform: translateX(-50%);
  animation: tutorialSlideUp 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.tutorial-coach.spotlight.complete {
  text-align: center;
}

.tutorial-coach.spotlight .tutorial-copy h2 {
  margin: 2px 0 6px;
  color: #2d1d0f;
  font-size: clamp(1.2rem, 5vw, 1.65rem);
  line-height: 1.06;
}

.tutorial-coach.spotlight .tutorial-copy p {
  margin: 0;
  color: #604d32;
  font-weight: 800;
  line-height: 1.35;
}

.tutorial-coach.spotlight .tutorial-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
  min-width: 0;
}

.tutorial-coach.spotlight .tutorial-progress {
  justify-content: center;
  margin-bottom: 0;
}

.tutorial-coach.spotlight .tutorial-primary-action {
  width: 100%;
  min-width: 0;
}

.tutorial-coach.spotlight .text-button {
  justify-self: center;
  padding: 6px 10px;
  color: #7a4b16;
  font-weight: 950;
}

.tutorial-coach.spotlight.nudge {
  animation: tutorialCardNudge 260ms ease-out;
}

.tutorial-highlight {
  position: relative;
  z-index: 106 !important;
  outline: 3px solid rgba(255, 210, 94, 0.96) !important;
  outline-offset: 4px;
}

.tutorial-target-nudge {
  animation: tutorialTargetNudge 320ms ease-out, tutorialPulse 1.2s ease-in-out infinite;
}

@keyframes tutorialCardNudge {
  0%, 100% { transform: translateX(-50%) translateY(0) scale(1); }
  35% { transform: translateX(-50%) translateY(0) scale(1.025); }
  70% { transform: translateX(-50%) translateY(0) scale(0.992); }
}

@keyframes tutorialTargetNudge {
  0% { transform: translateY(0) scale(1); filter: brightness(1); }
  30% { transform: translateY(-4px) scale(1.035); filter: brightness(1.16); }
  65% { transform: translateY(2px) scale(0.99); filter: brightness(1.05); }
  100% { transform: translateY(0) scale(1); filter: brightness(1); }
}

@media (min-width: 720px) {
  .tutorial-coach.spotlight:not(.complete) {
    grid-template-columns: minmax(0, 1.15fr) minmax(220px, 0.85fr);
    align-items: center;
  }
}

@media (max-width: 520px) {
  .tutorial-coach.spotlight {
    bottom: max(10px, env(safe-area-inset-bottom));
    width: calc(100vw - 18px);
    padding: 14px;
  }

  .tutorial-coach.spotlight .tutorial-copy h2 {
    font-size: 1.18rem;
  }

  .tutorial-coach.spotlight .tutorial-copy p {
    font-size: 0.86rem;
  }
}


/* Persistent tutorial action targets */
[data-tutorial-target="true"] {
  position: relative;
  z-index: 106 !important;
  outline: 4px solid rgba(255, 214, 92, 0.98) !important;
  outline-offset: 5px;
  box-shadow:
    0 0 0 10px rgba(217, 154, 35, 0.24),
    0 12px 30px rgba(68, 44, 9, 0.28) !important;
  animation: tutorialPulse 1.05s ease-in-out infinite;
}

button[data-tutorial-target="true"],
.action[data-tutorial-target="true"],
.tap-button[data-tutorial-target="true"] {
  border-color: rgba(255, 224, 120, 0.95) !important;
  background: linear-gradient(180deg, #ffd86e, #d99a23) !important;
  color: #241608 !important;
}

.tutorial-context-highlight {
  position: relative;
  z-index: 105 !important;
  box-shadow: 0 0 0 3px rgba(255, 214, 92, 0.34), 0 14px 36px rgba(40, 24, 8, 0.18) !important;
}


/* Research cards as beer unlock tracks */
.research-card {
  grid-template-rows: auto auto auto auto auto !important;
  gap: 9px !important;
  padding: 12px !important;
}

.research-card header h4 { font-size: 0.98rem !important; }
.research-card header span { font-size: 0.72rem !important; }
.research-card header strong { font-size: 1rem !important; }

.research-goal {
  display: grid;
  gap: 2px;
  padding: 9px 10px;
  border-radius: 8px;
  background: linear-gradient(180deg, #fff8e7, #f3e4c7);
  border: 1px solid rgba(183, 137, 45, 0.28);
}

.research-goal b {
  color: #2f553b;
  font-size: 0.92rem;
  line-height: 1.1;
}

.research-goal span {
  color: #745f40;
  font-size: 0.76rem !important;
  font-weight: 850;
  text-transform: none !important;
}

.research-track {
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(62, 45, 24, 0.16);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.18);
}
.research-track.empty {
  background: transparent;
  box-shadow: none;
  height: 4px;
}

.research-track div {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #4a8f55, #d99a23);
  transition: width 240ms ease;
}

.research-next.compact,
.research-next.complete {
  padding: 8px 9px !important;
}

.research-next.compact span,
.research-next.compact small,
.research-next.complete span,
.research-next.complete small {
  font-size: 0.7rem !important;
}

.research-next.compact strong,
.research-next.complete strong {
  font-size: 0.9rem !important;
}

.research-meta,
.research-phase {
  display: none !important;
}



/* Center wallet values inside cash/reputation tiles */
.topbar.playing .wallet-tile strong {
  justify-self: center !important;
  text-align: center !important;
}

.topbar.playing .reputation-tile #reputationTitle {
  justify-self: center !important;
  text-align: center !important;
}

.pub-earnings-card {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 10px;
  padding: 10px;
  border: 1px solid rgba(183, 137, 45, 0.34);
  border-radius: 8px;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 218, 132, 0.28), transparent 34%),
    linear-gradient(180deg, #fff8e7, #eedbb0);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55);
}

.pub-earnings-card > span {
  grid-column: 1 / -1;
  color: #654415;
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pub-earnings-card div {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 8px 6px;
  border-radius: 8px;
  background: rgba(255,255,255,0.48);
  text-align: center;
}

.pub-earnings-card strong {
  overflow: hidden;
  color: #2f553b;
  font-size: clamp(0.9rem, 3.4vw, 1.12rem);
  line-height: 1.02;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pub-earnings-card small {
  color: #765f3d;
  font-size: 0.63rem;
  font-weight: 900;
  text-transform: uppercase;
}

.brew-house-switch button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.distribution-tab-locked .action {
  margin-top: 10px;
}

.distribution-lock-progress {
  display: grid;
  gap: 7px;
  margin: 12px 0 4px;
  padding: 10px;
  border: 1px solid rgba(183, 137, 45, 0.28);
  border-radius: 8px;
  background: rgba(255,255,255,0.42);
}

.distribution-lock-progress span {
  color: #654415;
  font-size: 0.76rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
@media (max-width: 430px) {
  .pub-earnings-card {
    gap: 6px;
    padding: 8px;
  }

  .pub-earnings-card div {
    padding: 7px 4px;
  }

  .pub-earnings-card small {
    font-size: 0.58rem;
  }
}


/* Research lab 2x2 square board */
.research-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.research-card {
  aspect-ratio: auto !important;
  min-height: 0 !important;
  align-content: start;
  overflow: visible;
}

.research-card header,
.research-goal,
.research-next.compact,
.research-next.complete {
  min-width: 0;
}

.research-track {
  display: block !important;
  width: 100% !important;
  min-height: 12px;
}

.research-track.active div {
  background: linear-gradient(90deg, #d99a23, #4a8f55) !important;
}

@media (max-width: 430px) {
  .research-grid {
    gap: 8px !important;
  }

  .research-card {
    padding: 9px !important;
    gap: 7px !important;
  }

  .research-goal {
    padding: 7px 8px !important;
  }

  .research-goal b,
  .research-next.compact strong,
  .research-next.complete strong {
    font-size: 0.78rem !important;
  }

  .research-goal span,
  .research-next.compact small,
  .research-next.complete small {
    font-size: 0.64rem !important;
  }

  .research-card .action {
    min-height: 34px;
    padding: 8px 6px;
    font-size: 0.72rem;
  }
}


/* Manual brew-start dopamine card */
.brew-start-modal.hidden { display: none; }

.brew-start-modal {
  position: fixed;
  inset: 0;
  z-index: 96;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(18, 11, 8, 0.58);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.brew-start-card {
  width: min(440px, 100%);
  display: grid;
  justify-items: center;
  gap: 9px;
  padding: 22px;
  border: 1px solid rgba(255, 223, 153, 0.72);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 218, 132, 0.34), transparent 36%),
    linear-gradient(180deg, #fff8e8, #ead3a5);
  box-shadow: 0 24px 72px rgba(0,0,0,0.38);
  color: #2f2418;
  text-align: center;
}

.brew-start-icon {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(180deg, #f8d06b, #b97617);
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.35), 0 10px 22px rgba(88,52,9,0.26);
  font-size: 2rem;
}

.brew-start-card h2,
.brew-start-card p,
.brew-start-card strong,
.brew-start-card small {
  margin: 0;
}

.brew-start-card h2 {
  color: #21170e;
  font-size: clamp(1.45rem, 6vw, 2.05rem);
  line-height: 1.02;
}

.brew-start-card > strong {
  color: #2f553b;
  font-size: 0.9rem;
  text-transform: uppercase;
}

.brew-start-card p:not(.eyebrow) {
  color: #654f32;
  font-weight: 800;
  line-height: 1.34;
}

.brew-start-stats {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.brew-start-stats span {
  display: grid;
  gap: 2px;
  padding: 8px 6px;
  border: 1px solid rgba(183, 137, 45, 0.32);
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.68);
  color: #7a642e;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.brew-start-stats b {
  color: #2f553b;
  font-size: 1rem;
}

.brew-start-card small {
  color: #765f3d;
  font-weight: 850;
}

@media (max-width: 430px) {
  .brew-start-card { padding: 18px; }
  .brew-start-stats { grid-template-columns: 1fr; }
}


/* Brew Pub buildout timed visual upgrades */
.brewpub-buildout {
  margin: 12px 0 14px;
}

.brewpub-buildout-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid rgba(216, 176, 90, 0.22);
  background: #1c1008;
  box-shadow: 0 2px 12px rgba(0,0,0,0.35);
}

.brewpub-buildout-card.active {
  border-color: rgba(255, 211, 95, 0.45);
}

.buildout-main {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.buildout-main .eyebrow {
  color: #c47e3a;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0;
}

.buildout-main strong {
  display: block;
  color: #fff7df;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.2;
}

.buildout-main p {
  margin: 0;
  color: rgba(255, 246, 222, 0.65);
  font-size: 0.82rem;
  line-height: 1.4;
}

.buildout-bonus-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: rgba(216,176,90,0.15);
  border: 1px solid rgba(216,176,90,0.35);
  border-radius: 20px;
  color: #e8c46a;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  width: fit-content;
  max-width: 100%;
}

.buildout-next-bonus {
  color: rgba(255,246,222,0.42) !important;
  font-size: 0.76rem !important;
  font-style: italic;
}

.buildout-progress {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.buildout-progress .brew-progress-bar {
  height: 8px;
  background: rgba(255,255,255,0.08);
  border-radius: 4px;
  overflow: hidden;
}

.buildout-progress span {
  color: rgba(255, 246, 222, 0.6);
  font-size: 0.78rem;
}

.brewpub-buildout-card .action {
  width: 100%;
  margin-top: 2px;
}

.brewpub-buildout-card.complete {
  border-color: rgba(216,176,90,0.35);
}

.brewpub-buildout-card.ready {
  border-color: rgba(122, 219, 134, 0.55);
  background: #0e1f0d;
}

.brewpub-buildout-card.ready .action {
  background: linear-gradient(180deg, #ffe18a, #d89525);
  color: #2b1808;
  box-shadow: 0 0 0 3px rgba(255, 217, 109, 0.18), 0 10px 22px rgba(42, 25, 6, 0.28);
}

/* ── Negative Event Modal ─────────────────────────────────────────────────── */

.negative-event-modal.hidden { display: none; }

/* Offline reward modal */
.offline-reward-overlay {
  position: fixed; inset: 0; z-index: 950;
  background: rgba(10,6,2,0.75);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  backdrop-filter: blur(4px);
  overflow-y: auto;
}
.offline-reward-overlay:empty { display: none; }
.offline-reward-card {
  background: linear-gradient(160deg, #1e3a28 0%, #2d1a08 100%);
  border-radius: 20px;
  padding: 28px 22px 22px;
  max-width: 340px; width: 100%;
  box-shadow: 0 12px 48px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  text-align: center;
}
.offline-reward-eyebrow {
  font-size: 0.68rem; font-weight: 900; text-transform: uppercase;
  letter-spacing: 0.12em; color: #f0c060; margin: 0;
}
.offline-reward-title {
  margin: 0; font-size: 1.2rem; font-weight: 900; color: #fff; line-height: 1.25;
}
.offline-reward-earned {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px; padding: 14px 18px; width: 100%;
}
.offline-reward-label { font-size: 0.72rem; font-weight: 700; color: rgba(255,255,255,0.5); margin: 0 0 8px; text-transform: uppercase; letter-spacing: 0.06em; }
.offline-reward-amount { font-size: 2rem; font-weight: 900; color: #f0c060; margin: 0; }
.offline-reward-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.offline-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.offline-stat-divider {
  width: 1px;
  height: 36px;
  background: rgba(255,255,255,0.15);
}
.offline-stat-value {
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
}
.offline-stat-cash .offline-stat-value { color: #f0c060; }
.offline-stat-fame .offline-stat-value { font-size: 1.5rem; color: #e8dcb8; }
.offline-stat-name {
  font-size: 0.7rem;
  font-weight: 700;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.offline-reward-details {
  width: 100%; display: grid; gap: 6px;
}
.offline-detail-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.8rem; color: rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.05); border-radius: 8px; padding: 6px 12px;
}
.offline-reward-bonus {
  background: rgba(240,192,96,0.12);
  border: 1px solid rgba(240,192,96,0.3);
  border-radius: 12px; padding: 12px 16px; width: 100%;
}
.offline-bonus-label { margin: 0 0 3px; font-size: 0.95rem; font-weight: 900; color: #f0c060; }
.offline-bonus-sub { margin: 0; font-size: 0.75rem; color: rgba(255,255,255,0.5); }
.offline-bonus-btn { width: 100%; font-size: 0.95rem; font-weight: 900; }
.offline-skip-btn {
  width: 100%;
  font-size: 0.9rem;
  font-weight: 800;
  color: rgba(255,255,255,0.85) !important;
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  padding: 12px 16px;
  border-radius: 10px;
}
.offline-skip-btn:hover { background: rgba(255,255,255,0.14) !important; }
.offline-skip-btn:hover { color: rgba(255,255,255,0.85) !important; }

#lockedTabOverlay { display: none; position: fixed; inset: 0; z-index: 900; background: rgba(0,0,0,0.55); align-items: center; justify-content: center; padding: 24px; }
#lockedTabOverlay.active { display: flex; }
.locked-tab-modal { background: var(--card-bg, #fffdf8); border-radius: 20px; padding: 32px 24px; max-width: 340px; width: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; box-shadow: 0 8px 40px rgba(0,0,0,0.35); }
.locked-tab-icon { font-size: 2.5rem; }
.locked-tab-modal h2 { font-size: 1.25rem; font-weight: 900; margin: 0; color: var(--ink, #232734); }
.locked-tab-modal p { font-size: 0.9rem; line-height: 1.5; color: var(--muted, #6b7280); margin: 0; }
.locked-tab-modal .action { width: 100%; margin-top: 4px; }

.negative-event-modal {
  position: fixed;
  inset: 0;
  z-index: 82;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(22, 12, 8, 0.65);
  backdrop-filter: blur(3px);
}

.negative-event-card {
  width: min(480px, 100%);
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 28px 24px 22px;
  border: 1px solid rgba(220, 100, 60, 0.38);
  border-radius: 10px;
  background: #1e1008;
  box-shadow: 0 28px 80px rgba(22, 8, 4, 0.55);
  text-align: center;
}

.negative-event-icon {
  font-size: 2.4rem;
  line-height: 1;
}

.negative-event-card h2 {
  margin: 0;
  color: #ffe9c8;
  font-size: 1.35rem;
}

.negative-event-card .eyebrow {
  margin: 0;
  color: rgba(220, 100, 60, 0.85);
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.negative-event-sub {
  margin: 0;
  color: rgba(255, 230, 190, 0.65);
  font-size: 0.88rem;
}

.negative-event-consequence {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(220, 100, 60, 0.32);
  border-radius: 6px;
  background: rgba(180, 60, 20, 0.15);
  display: grid;
  gap: 4px;
  text-align: left;
}

.negative-event-consequence strong {
  color: #f4a07a;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.negative-event-consequence span {
  color: #ffd8ae;
  font-size: 0.9rem;
}

.negative-event-consequence.mitigated {
  border-color: rgba(100, 200, 100, 0.38);
  background: rgba(30, 90, 30, 0.22);
}

.negative-event-consequence.mitigated strong {
  color: #7bda8a;
}

.negative-event-consequence.mitigated span {
  color: #c8f0c8;
}

.negative-event-ad-btn {
  width: 100%;
  background: linear-gradient(180deg, #ffe18a, #d89525);
  color: #2b1808;
}

.negative-event-ad-note {
  margin: -4px 0 0;
  color: rgba(255, 230, 190, 0.5);
  font-size: 0.78rem;
}

.negative-event-accept {
  background: rgba(120, 70, 30, 0.55);
  border-color: rgba(160, 100, 50, 0.4);
  color: rgba(255, 220, 160, 0.7);
  font-size: 0.88rem;
  font-weight: 600;
  width: 100%;
  min-height: 44px;
  padding: 10px 16px;
}

.positive-event-modal {
  background: rgba(10, 28, 16, 0.62);
}

.positive-event-card {
  border-color: rgba(100, 190, 90, 0.42);
  background: #0e1f0d;
  box-shadow: 0 28px 80px rgba(4, 22, 8, 0.55);
}

.positive-event-card .eyebrow {
  color: rgba(144, 232, 96, 0.9);
}

.positive-event-reward {
  border-color: rgba(100, 200, 100, 0.38);
  background: rgba(30, 90, 30, 0.22);
}

.positive-event-reward strong {
  color: #90e860;
}

.positive-event-reward span {
  color: #d8ffd0;
}

.positive-event-ad-btn {
  background: linear-gradient(180deg, #b8ef7a, #4caa46);
  color: #082008;
}

.positive-event-accept {
  background: rgba(40, 110, 40, 0.55);
  border-color: rgba(100, 200, 100, 0.35);
  color: rgba(220, 255, 210, 0.82);
}

/* ─── High-Stakes Event Styles ─── */
.high-stakes-modal { background: rgba(10,4,4,0.88); }
.high-stakes-card {
  border-color: rgba(220,40,40,0.6);
  background: #160404;
  box-shadow: 0 0 60px rgba(200,20,20,0.25), 0 28px 80px rgba(22,4,4,0.7);
  animation: highStakesPulse 2s ease-in-out infinite;
}
@keyframes highStakesPulse {
  0%,100% { box-shadow: 0 0 40px rgba(200,20,20,0.2), 0 28px 80px rgba(22,4,4,0.7); }
  50% { box-shadow: 0 0 70px rgba(220,40,40,0.4), 0 28px 80px rgba(22,4,4,0.7); }
}
.high-stakes-banner {
  width: 100%; padding: 6px;
  background: #c01010; color: #fff;
  font-size: 0.7rem; font-weight: 900; letter-spacing: 0.15em;
  border-radius: 4px; text-align: center;
}
.high-stakes-card .eyebrow { color: rgba(255,80,80,0.9); }
.high-stakes-card h2 { font-size: 1.45rem; }
.high-stakes-consequence {
  border-color: rgba(220,40,40,0.4);
  background: rgba(180,20,20,0.2);
}
.high-stakes-ad-btn {
  background: linear-gradient(135deg, #2a6e2a, #1a4e1a) !important;
  color: #90e860 !important;
  font-size: 1rem !important;
  padding: 14px !important;
  border: 1px solid rgba(100,200,60,0.4) !important;
  box-shadow: 0 0 20px rgba(80,180,40,0.15);
}

/* ─── Newspaper Headline Modal ─── */
.newspaper-backdrop {
  position: fixed; inset: 0; z-index: 9100;
  background: rgba(0,0,0,0.75);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: legacyFadeIn 0.3s ease;
}
.newspaper-card {
  background: #f5f0e4;
  border: 3px solid #1a1208;
  border-radius: 4px;
  width: min(360px, 100%);
  padding: 24px 22px 20px;
  text-align: center;
  box-shadow: 6px 6px 0 #1a1208;
  animation: legacySlideUp 0.35s cubic-bezier(0.22,1,0.36,1);
}
.newspaper-masthead {
  font-size: 0.65rem; font-weight: 900; letter-spacing: 0.25em;
  color: #1a1208; text-transform: uppercase; margin-bottom: 8px;
}
.newspaper-rule { height: 2px; background: #1a1208; margin: 8px 0; }
.newspaper-headline {
  font-size: 1.2rem; font-weight: 900; color: #1a1208;
  line-height: 1.25; margin: 12px 0 10px;
  font-family: Georgia, 'Times New Roman', serif;
}
.newspaper-sub {
  font-size: 0.75rem; color: #3a2e1a; line-height: 1.5;
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic; margin-bottom: 10px;
}
.newspaper-dismiss {
  margin-top: 14px; padding: 9px 24px;
  background: #1a1208; color: #f5f0e4;
  border: none; border-radius: 3px;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.05em;
  cursor: pointer;
}

/* ── Event Browser ────────────────────────────────────────────────────────── */

.event-browser-overlay.hidden { display: none; }

.event-browser-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 16px;
  background: rgba(14, 8, 4, 0.72);
  backdrop-filter: blur(4px);
  overflow-y: auto;
}

.event-browser-panel {
  width: min(580px, 100%);
  margin: auto;
  border-radius: 10px;
  background: #1a1008;
  border: 1px solid rgba(255, 220, 140, 0.18);
  box-shadow: 0 28px 80px rgba(10, 5, 2, 0.6);
  overflow: hidden;
}

.eb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 220, 140, 0.12);
}

.eb-title {
  color: #ffe9c8;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.eb-body {
  padding: 16px 20px 24px;
  display: grid;
  gap: 6px;
}

.eb-section-label {
  margin: 12px 0 6px;
  color: rgba(255, 200, 100, 0.55);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  display: flex;
  align-items: center;
  gap: 8px;
}

.eb-section-label:first-child { margin-top: 0; }

.eb-section-neg { color: rgba(220, 100, 60, 0.6); }

.eb-count {
  background: rgba(255, 220, 140, 0.12);
  border-radius: 10px;
  padding: 1px 7px;
  font-size: 0.68rem;
  color: rgba(255, 220, 140, 0.5);
}

.eb-list {
  display: grid;
  gap: 6px;
}

.eb-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 7px;
  background: rgba(255, 220, 140, 0.05);
  border: 1px solid rgba(255, 220, 140, 0.08);
}

.eb-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  width: 32px;
  text-align: center;
}

.eb-info {
  flex: 1;
  display: grid;
  gap: 2px;
  min-width: 0;
}

.eb-info strong {
  color: #ffe9c8;
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.eb-info span {
  color: rgba(255, 220, 170, 0.5);
  font-size: 0.75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.eb-effect {
  color: rgba(100, 200, 120, 0.7);
  font-size: 0.72rem;
}

.eb-effect-bad {
  color: rgba(220, 120, 80, 0.75);
}

.eb-preview-btn {
  flex-shrink: 0;
  font-size: 0.78rem;
  padding: 5px 11px;
  min-height: 30px;
}

.eb-neg-btns {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .eb-row { flex-wrap: wrap; }
  .eb-neg-btns { flex-direction: row; }
}

/* ── Regional Championship competition card ──────────────────────────────── */

.competition-elite {
  border: 1px solid rgba(255, 200, 80, 0.35);
  background: linear-gradient(135deg, rgba(60, 42, 10, 0.6), rgba(40, 28, 6, 0.8));
  margin-top: 16px;
}

.competition-elite .eyebrow {
  color: #e0a020;
}

#beerRecipes.hidden,
#beerCompetitions.hidden,
#brewUpgrades.hidden { display: none; }

/* ─── Opening Day full-poster intro ─── */
.character-picker.intro-poster {
  display: block;
  grid-template-columns: none;
  padding: 0;
  border: 0;
  background: #0d0a04;
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 200;
  box-shadow: var(--shadow);
}
.character-picker.intro-poster .opening-menu.hidden { display: none; }
.character-picker.intro-poster .intro-copy {
  position: relative;
  display: block;
  padding: 0;
  margin: 0;
  height: 100%;
}
.opening-poster-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  user-select: none;
  -webkit-user-drag: none;
}
.opening-poster-cta {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 4%;
  height: 10%;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #f5edd8 0%, #e8d4a8 100%);
  border: 0;
  border-radius: 8px;
  padding: 0 20px;
  cursor: pointer;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  box-shadow:
    0 4px 0 #8a6a30,
    0 6px 20px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,255,255,0.6);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.opening-poster-cta:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #8a6a30, 0 2px 8px rgba(0,0,0,0.5);
}
.opcta-eyebrow,
.opcta-sub { display: none; }
.opcta-title {
  font-family: 'Cinzel Decorative', Georgia, serif;
  font-size: clamp(1.05rem, 4.8vw, 1.35rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #2a1400;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}

.topbar.hidden { display: none !important; }

/* ─── Switch Brewer intro / ad gate ─── */
.character-picker.switch-intro-step {
  border-radius: 10px;
  overflow: hidden;
  padding: 32px 24px 28px;
  background:
    radial-gradient(ellipse at 18% 0%, rgba(70, 110, 80, 0.28) 0%, transparent 52%),
    linear-gradient(165deg, #14241a 0%, #1c2f20 55%, #0f1c13 100%);
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(213, 174, 90, 0.18);
  border: 1px solid #3a2c18;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.character-picker.switch-intro-step .intro-copy { display: block; }
.character-picker.switch-intro-step .opening-actions {
  grid-template-columns: 1fr 1.6fr;
  gap: 12px;
  padding: 0;
}
.character-picker.switch-intro-step .opening-actions .secondary {
  background: transparent;
  color: #e8dcb8;
  border: 1px solid rgba(216, 176, 90, 0.55);
  font-size: 0.88rem;
  font-weight: 850;
  white-space: nowrap;
}
.character-picker.switch-intro-step .opening-actions .action {
  background: linear-gradient(180deg, #e7c878 0%, #cf9f3c 100%);
  color: #1a0e00;
  font-size: 0.88rem;
  font-weight: 850;
  white-space: nowrap;
}

/* ─── Choose Your Brewer (avatar step) — themed ─── */
.character-picker.avatar-step {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  border: 1px solid #3a2c18;
  border-radius: 10px;
  overflow: hidden;
  background: url('assets/backgrounds/brick_bg.webp') center center / cover no-repeat;
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(213, 174, 90, 0.18);
}
.character-picker.avatar-step .intro-copy {
  display: block;
  padding: 26px 24px 16px;
  position: relative;
  background: rgba(0,0,0,0.4);
}
.character-picker.avatar-step .intro-copy::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(213, 174, 90, 0.55), transparent);
}
.avatar-step-head { text-align: center; }
.avatar-step-eyebrow {
  display: inline-block;
  font-size: 0.85rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #d8b05a;
  font-weight: 800;
  margin-bottom: 6px;
}
.avatar-step-title {
  font-family: "Georgia", "Cormorant Garamond", serif;
  font-size: clamp(1.7rem, 6vw, 2.4rem);
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #f6efdd;
  line-height: 1.02;
  margin: 0 0 8px;
  text-shadow: 0 2px 0 rgba(0,0,0,0.35);
}
.avatar-step-sub {
  margin: 0 auto;
  max-width: 460px;
  color: rgba(232, 224, 200, 0.72);
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.5;
}
.avatar-step-sub em { color: #e7c878; font-style: italic; }

.character-picker.avatar-step .avatar-options {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 20px 24px 8px;
}
.character-picker.avatar-step .avatar-card {
  position: relative;
  height: 240px;
  padding: 0 0 8px;
  border: 1px solid rgba(213, 174, 90, 0.40);
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 22%, rgba(255, 248, 224, 0.96), rgba(244, 232, 200, 0.92) 60%, #ecdcb0 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 252, 235, 0.7),
    0 6px 16px rgba(0, 0, 0, 0.38);
  overflow: hidden;
}
.character-picker.avatar-step .avatar-card .brewer-avatar.avatar-preview {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}

.character-picker.avatar-step .avatar-card.active {
  outline: none;
  border-color: #4a8c5c;
  box-shadow:
    inset 0 0 0 2px rgba(74, 140, 92, 0.9),
    0 0 0 3px rgba(50, 110, 70, 0.55),
    0 8px 22px rgba(0, 0, 0, 0.45);
  transform: translateY(-2px);
}
.character-picker.avatar-step .avatar-card.active::after {
  content: "\2713";
  position: absolute;
  top: 7px;
  right: 7px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(180deg, #5aab70, #2e7a48);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 900;
  box-shadow: 0 2px 5px rgba(0,0,0,0.4);
}

.character-picker.avatar-step .opening-actions {
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 12px 24px 22px;
}
.character-picker.avatar-step .opening-actions .secondary {
  background: transparent;
  color: #e8dcb8;
  border: 1px solid rgba(216, 176, 90, 0.55);
}
.character-picker.avatar-step .opening-actions .secondary:hover {
  background: rgba(216, 176, 90, 0.12);
}
.character-picker.avatar-step .opening-actions .action {
  background: linear-gradient(180deg, #e7c878 0%, #cf9f3c 100%);
  color: #1a2a1c;
  border: 1px solid #b3852c;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 4px 12px rgba(0,0,0,0.35);
}
.character-picker.avatar-step .opening-actions .action:disabled {
  background: rgba(120, 110, 80, 0.4);
  color: rgba(255,255,255,0.4);
  border-color: rgba(120,110,80,0.5);
  box-shadow: none;
}

@media (max-width: 760px) {
  .character-picker.avatar-step .avatar-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ─── Pick Your Perk (choose step) — themed, phone-first ─── */
.character-picker.perk-step {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  border: 1px solid #3a2c18;
  border-radius: 10px;
  overflow: hidden;
  background: url('assets/backgrounds/brick_bg.webp') center center / cover no-repeat;
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(213, 174, 90, 0.18);
}
.character-picker.perk-step .intro-copy {
  display: block;
  padding: 26px 24px 16px;
  position: relative;
}
.character-picker.perk-step .intro-copy::after {
  content: "";
  position: absolute;
  left: 24px; right: 24px; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(213, 174, 90, 0.55), transparent);
}

.perk-options {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px 24px 4px;
}
.perk-card {
  display: grid;
  grid-template-columns: 56px 1fr 28px;
  align-items: center;
  gap: 14px;
  width: 100%;
  height: 126px;
  flex-shrink: 0;
  padding: 14px 16px;
  box-sizing: border-box;
  overflow: hidden;
  text-align: left;
  cursor: pointer;
  font: inherit;
  border: 1px solid rgba(213, 174, 90, 0.40);
  border-radius: 12px;
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 248, 224, 0.96), rgba(244, 232, 200, 0.92) 60%, #ecdcb0 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 252, 235, 0.7),
    0 5px 14px rgba(0, 0, 0, 0.34);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.perk-card-icon {
  width: 62px;
  height: 62px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: transparent;
  overflow: hidden;
}
.perk-card-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.perk-card-body { display: grid; gap: 3px; min-width: 0; }
.perk-card-name {
  font-family: "Georgia", "Cormorant Garamond", serif;
  font-size: 1.18rem;
  font-weight: 900;
  letter-spacing: 0.01em;
  color: #1c2c1e;
  line-height: 1.05;
}
.perk-card-points {
  list-style: none;
  margin: 2px 0 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.perk-card-points li {
  font-size: 0.82rem;
  font-weight: 800;
  color: #7a4a12;
  line-height: 1.3;
  padding-left: 0;
}
.perk-card-points li::before { display: none; }
.perk-card-role {
  font-size: 0.78rem;
  font-weight: 600;
  font-style: italic;
  color: rgba(50, 40, 24, 0.62);
  line-height: 1.2;
}
.perk-card-check {
  justify-self: center;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 0.85rem;
  font-weight: 900;
  color: transparent;
  background: rgba(120, 100, 60, 0.16);
  box-shadow: inset 0 0 0 1px rgba(120, 100, 60, 0.28);
  transition: all 160ms ease;
}
.perk-card.active {
  border-color: #4a8c5c;
  transform: translateY(-1px);
  box-shadow:
    inset 0 0 0 2px rgba(74, 140, 92, 0.9),
    0 0 0 3px rgba(50, 110, 70, 0.5),
    0 8px 20px rgba(0, 0, 0, 0.42);
}
.perk-card.active .perk-card-check {
  color: #fff;
  background: linear-gradient(180deg, #5aab70, #2e7a48);
  box-shadow: 0 2px 5px rgba(0,0,0,0.35);
}

.character-picker.perk-step .opening-actions {
  grid-template-columns: 1fr 1.6fr;
  gap: 12px;
  padding: 16px 24px 36px;
}
.character-picker.perk-step .opening-actions .secondary {
  background: transparent;
  color: #e8dcb8;
  border: 1px solid rgba(216, 176, 90, 0.55);
}
.character-picker.perk-step .opening-actions .secondary:hover {
  background: rgba(216, 176, 90, 0.12);
}
.character-picker.perk-step .opening-actions .action {
  background: linear-gradient(180deg, #e7c878 0%, #cf9f3c 100%);
  color: #1a2a1c;
  border: 1px solid #b3852c;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 4px 12px rgba(0,0,0,0.35);
}
.character-picker.perk-step .opening-actions .action:disabled {
  background: rgba(120, 110, 80, 0.4);
  color: rgba(255,255,255,0.4);
  border-color: rgba(120,110,80,0.5);
  box-shadow: none;
}

/* ─── Pipe game win overlay ─── */
.pipe-win-modal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 28px 20px;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(90, 179, 232, 0.18), transparent 60%),
    linear-gradient(160deg, #14241a, #1c3224);
  border: 1px solid rgba(90, 179, 232, 0.45);
  border-radius: 12px;
  text-align: center;
  animation: pipeWinPop 0.3s cubic-bezier(0.22, 1.2, 0.36, 1) both;
}
@keyframes pipeWinPop {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}
.pipe-win-icon { font-size: 2.6rem; line-height: 1; }
.pipe-win-title {
  margin: 0;
  font-family: "Georgia", serif;
  font-size: 1.4rem;
  font-weight: 900;
  color: #5ab3e8;
  letter-spacing: 0.02em;
}
.pipe-win-speed {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #e7c878;
}
.pipe-win-rewards {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.pipe-win-rewards li {
  padding: 5px 12px;
  background: rgba(90, 179, 232, 0.14);
  border: 1px solid rgba(90, 179, 232, 0.35);
  border-radius: 20px;
  font-size: 0.88rem;
  font-weight: 800;
  color: #d4edf8;
}

/* ─── Mobile bottom nav bar ─────────────────────────────────
   To REVERT: delete everything in this block.
   The existing .tabs/.tab markup and all JS are unchanged.
   ─────────────────────────────────────────────────────────── */
@media (max-width: 600px) {

  /* Pin the nav to the bottom of the viewport */
  .tabs {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 200;
    margin: 0;
    gap: 0;
    padding: 0 0 env(safe-area-inset-bottom, 0px);
    background: #1a1208;
    border-top: 1px solid rgba(213, 174, 90, 0.30);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.45);
  }

  /* Full-bleed shell — no side margins, no top padding */
  .shell {
    width: 100%;
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
    /* Tab bar height (~76px) + iPhone home-indicator safe area + a visible breathing-room gap */
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px) + 24px);
  }

  /* During onboarding (no tab bar), remove tab-bar padding and fill screen */
  body.onboarding {
    background: #1a0f08;
  }
  body.onboarding .shell {
    padding-bottom: 0;
  }
  .character-picker.avatar-step,
  .character-picker.perk-step {
    min-height: 100dvh;
    border: 0;
    border-radius: 0;
  }
  /* Keep onboarding headers clear of the iPhone status bar */
  .character-picker.avatar-step .intro-copy,
  .character-picker.perk-step .intro-copy {
    padding-top: calc(26px + env(safe-area-inset-top, 0px));
  }

  /* Topbar image bleeds to top edge; push UI below the status bar */
  .topbar.playing {
    padding-top: env(safe-area-inset-top, 0px);
    border-left: 0;
    border-right: 0;
    border-top: 0;
    border-radius: 0;
  }

  /* Each tab fills equal width */
  .tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 64px;
    padding: 8px 2px 6px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: rgba(232, 220, 180, 0.52);
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: center;
    transition: color 150ms ease, background 150ms ease;
  }

  /* Icon above the label */
  .tab::before {
    content: "";
    display: block;
    width: 2rem;
    height: 2rem;
    margin: 0 auto 2px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.6;
    transition: opacity 150ms ease;
  }
  .tab.active::before { opacity: 1; }
  [data-tab="farm"]::before         { background-image: url("assets/icons/farm.webp"); }
  [data-tab="brew"]::before         { background-image: url("assets/icons/brew.webp"); }
  [data-tab="pub"]::before          { background-image: url("assets/icons/pub.webp"); }
  [data-tab="distribution"]::before { background-image: url("assets/icons/distro.webp"); }
  [data-tab="marketing"]::before    { background-image: url("assets/icons/market.webp"); }

  .tab.active {
    background: rgba(213, 174, 90, 0.12);
    color: #e7c878;
  }

  /* Active indicator pip */
  .tab.active::after {
    content: "";
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 3px;
    border-radius: 2px;
    background: #e7c878;
  }
  .tab { position: relative; }
  .campaign-live-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 0.45rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    color: #fff;
    background: #c0392b;
    border-radius: 4px;
    padding: 1px 3px;
    line-height: 1.4;
    animation: campaign-pulse 1.5s ease-in-out infinite;
  }
  .campaign-live-badge::before { content: "LIVE"; }

  /* Teaser tabs (locked) stay muted */
  .tab.tab-teaser { opacity: 0.38; }
}

/* ─── Mobile resource grid (2×2) ─── */
@media (max-width: 600px) {
  .stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 8px 12px;
    background: #1a1208;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 1px solid rgba(213,174,90,0.2);
  }

  .stats article {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 12px;
    background: rgba(213,174,90,0.10);
    border: 1px solid rgba(213,174,90,0.22);
    border-radius: 20px;
  }

  /* Hide Total Kegs pill on mobile */
  .stats .stat-kegs { display: none; }

  .stats span {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: rgba(232,220,180,0.55);
    text-transform: uppercase;
  }
  .stats strong {
    font-size: 0.95rem;
    font-weight: 900;
    color: #e7c878;
    margin-top: 0;
    margin-left: 2px;
  }
}

/* ═══ MOBILE COMPACT WALLET ════════════════════════════════════════════
   Single-row bar: [icon] VALUE  ·  [icon] VALUE
   No stacked tiles, no label text — just icon + number inline.
   >>> EASY REVERT: delete this entire block. <<<
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* Single horizontal row, no grid */
  .topbar.playing .wallet {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 11px;
    background: transparent;
    border: none;
    box-shadow: none;
  }

  /* Each tile: icon + value side by side */
  .topbar.playing .wallet-tile {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 8px 0;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(213,174,90,0.2);
    border-radius: 10px;
    margin: 6px 0;
    min-height: 0;
  }

  .topbar.playing .wallet-tile .wallet-label {
    display: flex;
    align-items: center;
    gap: 4px;
    border-left: 0;
    padding-left: 0;
    font-size: 0.62rem !important;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: rgba(242,239,230,0.5) !important;
    font-weight: 700;
  }

  /* Icon circle — slightly smaller */
  .topbar.playing .wallet-tile .wallet-label::before {
    width: 22px !important;
    height: 22px !important;
    font-size: 0.7rem !important;
    flex-shrink: 0;
  }

  /* Value: large and bold */
  .topbar.playing .wallet #cash,
  .topbar.playing .wallet #reputation {
    font-size: 1.25rem !important;
    font-weight: 900;
    text-align: left;
    border-left: 0;
    line-height: 1;
    margin: 0;
    padding: 0;
    color: #e7c878;
  }

  /* Rank hidden */
  .topbar.playing #reputationTitle { display: none !important; }
}
/* ═══ END MOBILE COMPACT WALLET ═════════════════════════════════════ */

/* ─── Flush topbar → stats: remove gap between boost card and ingredient pills ─── */
@media (max-width: 600px) {
  .topbar.playing { padding-bottom: 0; }
  .topbar.playing .boost-status:not(.hidden) {
    border-radius: 8px 8px 0 0;
    margin-bottom: 0;
  }
  .stats { padding-top: 6px !important; padding-bottom: 6px !important; margin-top: 0; }
}

/* ─── Mobile: shorter brewery sign (saves ~38px above the fold) ───
   Crops brick headroom + bottom shelf, keeps the nameplate + name intact.
   To REVERT: delete this block. */
@media (max-width: 600px) {
  .topbar.playing .header-art {
    aspect-ratio: 1774 / 720;
    min-height: 0;
  }
  .topbar.playing .header-skin {
    object-position: center 40%;
  }
  .topbar.playing .brand-sign {
    top: 33%;
    height: 38%;
  }
}

/* ═══ RESEARCH CARD: BOTTOM-ANCHORED BUTTON ═══════════════════════════
   Makes every "Start Research" button align on the same line regardless of
   how many lines the NEXT item name takes. Extra space sits ABOVE the button.

   >>> EASY REVERT: delete this entire block (between the ═══ banners). <<<
   Alternative we discussed instead of this: cap research item names to a
   fixed character count so all cards are naturally the same height.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .research-card {
    display: flex !important;
    flex-direction: column;
    gap: 9px;
  }
  .research-card .action {
    margin-top: auto;
  }
}
/* ═══ END RESEARCH CARD BOTTOM-ANCHORED BUTTON ════════════════════════ */

/* ═══ COMPACT SCENE HERO BAND (mobile) ════════════════════════════════
   Caps the per-tab scene art to a short banner so the first action peeks
   above the fold on load. Brew Pub is EXEMPT (.scene-pub) because its art
   shows live 15-state bar progression and earns the full height.

   >>> EASY REVERT: delete this entire block (between the ═══ banners). <<<
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .scene:not(.scene-pub) {
    aspect-ratio: auto;
    height: 40vw;
    max-height: 190px;
    min-height: 130px;
  }

  .scene:not(.scene-pub) .stage-bg {
    object-position: center 20%;
  }

  /* Brew Pub: size the box to the image's own aspect ratio (1672x941) so the
     FULL bar art fills it with no letterbox, and upgrade props align 1:1. */
  .scene-pub.illustrated-scene {
    height: auto;
    aspect-ratio: 1672 / 941;
  }
}
/* ═══ END COMPACT SCENE HERO BAND ═════════════════════════════════════ */

/* ═══ HOP FARM: COMPACT TAP AREA (mobile) ═════════════════════════════
   Moves the Watch-Ad/Rush button to the right of the heading (no longer its
   own row) and shrinks the 4 ingredient tap buttons so the Research Lab peeks
   above the fold. Tap buttons kept ~72px for thumbs.

   >>> EASY REVERT: delete this entire block (between the ═══ banners). <<<
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* Keep the farm heading on one row so the Watch Ad / Rush button sits
     compact to the RIGHT of the title instead of getting its own full row */
  #farm .panel-heading {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
  }
  #farm .panel-heading .secondary {
    flex: 0 0 auto;
    width: auto;
    min-height: 0;
    padding: 9px 13px;
    font-size: 0.8rem;
    line-height: 1.15;
    max-width: 46%;
    white-space: normal;
    text-align: center;
  }
  /* Shorter ingredient tap buttons (centered vertical, no wrap risk) */
  .tap-button {
    min-height: 72px;
    padding: 9px 6px;
  }
  .tap-button .tap-icon {
    font-size: 1.4rem;
    margin-bottom: 2px;
  }
  .tap-button strong { font-size: 0.92rem; }
  .tap-button .tap-amount { font-size: 0.78rem; }
  .tap-grid {
    gap: 8px;
    margin-bottom: 10px;
  }
}
/* ═══ END HOP FARM COMPACT TAP AREA ═══════════════════════════════════ */

/* ═══ HIDE TAPROOM LOG ON MOBILE ══════════════════════════════════════
   Remove this block to restore the log on small screens.
══════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .log { display: none !important; }
}
/* ═══ END HIDE TAPROOM LOG ═══════════════════════════════════════════ */

/* ═══ HIDE RESOURCE GRID ON PUB / DISTRIBUTION / MARKETING (mobile) ══
   Ingredients aren't relevant on these tabs — hides ~80px of dead space.
   >>> EASY REVERT: delete this block. <<<
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .game-stage > .boost-status {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 7px 12px;
    border: 0;
    border-top: 1px solid rgba(255, 246, 217, 0.12);
    border-bottom: 1px solid rgba(255, 246, 217, 0.12);
    border-radius: 0;
    background: rgba(18, 11, 8, 0.94);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    color: #f2efe6;
    text-align: left;
  }

  .game-stage > .boost-status.hidden {
    display: none !important;
  }

  .game-stage > .boost-status .boost-status-line {
    width: 100%;
    color: #b7dbb0;
    font-size: 0.72rem;
    font-weight: 750;
    line-height: 1.35;
  }

  .game-stage > .boost-status .boost-status-line em {
    color: rgba(183, 219, 176, 0.72);
    font-style: normal;
    font-weight: 850;
    margin-left: 4px;
  }

  /* on pub: hide ingredient pills, show pub earnings pills */
  .shell[data-active-tab="pub"] .stat-ingredient { display: none !important; }
  /* on non-pub tabs: hide pub earnings pills */
  .shell:not([data-active-tab="pub"]) .stat-pub { display: none !important; }
  /* hide distro-specific pills everywhere (replaced by global pills) */
  .stat-distro { display: none !important; }
  /* global $/min + fame/min pills: show only on distro and marketing tabs */
  .shell:not([data-active-tab="distribution"]):not([data-active-tab="marketing"]) .stat-global { display: none !important; }
  /* on distro+marketing: hide ingredients */
  .shell[data-active-tab="distribution"] .stat-ingredient,
  .shell[data-active-tab="marketing"] .stat-ingredient { display: none !important; }
}

/* ═══ DISTRO CHANNELS ═══════════════════════════════════════════════════════ */
.distro-truck-card {
  background: #2a1f0e;
  border: 1.5px solid rgba(213,174,90,0.25);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 4px;
}
.distro-truck-row { display: flex; align-items: center; gap: 8px; }
.distro-truck-row > span:first-child { font-size: 1.2rem; flex-shrink: 0; }
.distro-truck-row > div { flex: 1; }
.distro-truck-row strong { display: block; font-size: 0.88rem; font-weight: 800; color: #f0d080; }
.distro-truck-row small { font-size: 0.7rem; opacity: 0.6; color: #d5ae5a; }
.distro-truck-row .distro-channel-rate { color: #d5ae5a; font-size: 0.8rem; }
.distro-channels-board { padding: 0 0 24px; }
.distro-header-row {
  align-items: center;
  margin-bottom: 6px;
}
.distro-header-row .eyebrow {
  margin: 0;
}
.distro-intro {
  margin: 2px 0 14px;
  padding: 8px 12px;
  border: 1px solid rgba(126, 92, 28, 0.16);
  border-radius: 10px;
  background: rgba(255, 250, 240, 0.72);
  color: rgba(60, 42, 16, 0.68);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
}
.distro-total-pill {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: #fffaf0;
  border: 1px solid rgba(40,25,8,0.1);
  border-radius: 10px;
  padding: 8px 16px;
  text-align: center;
}
.distro-total-pill span {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(40,25,8,0.45);
}
.distro-total-pill strong {
  font-size: 1rem;
  font-weight: 800;
  color: #3a2500;
}
.distro-channel-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.distro-channel-card {
  background: var(--card-bg, #fff);
  border: 1.5px solid rgba(40,30,10,0.1);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
  height: 172px;
  min-height: 172px;
  justify-content: space-between;
  overflow: hidden;
}
.distro-channel-card.distro-channel-active { border-color: rgba(91,140,65,0.35); background: rgba(91,140,65,0.04); }
.distro-channel-card.distro-channel-locked { opacity: 0.5; }
.distro-channel-header { display: flex; align-items: center; gap: 10px; }
.distro-channel-icon { font-size: 1.5rem; line-height: 1; flex-shrink: 0; }
.distro-channel-header > div { flex: 1; min-width: 0; }
.distro-channel-header strong { display: block; font-size: 0.95rem; font-weight: 800; }
.distro-channel-header small {
  display: -webkit-box;
  min-height: 2.3em;
  max-height: 2.3em;
  overflow: hidden;
  font-size: 0.74rem;
  line-height: 1.15;
  opacity: 0.6;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.distro-channel-rate { font-size: 0.82rem; font-weight: 700; color: #5b8c41; white-space: nowrap; }
.distro-channel-lock { font-size: 0.74rem; opacity: 0.55; white-space: nowrap; }
.distro-channel-meta { display: flex; gap: 12px; font-size: 0.74rem; opacity: 0.6; }
.distro-upgrade-btn { width: 100%; }
.distro-upgrade-gain { font-size: 0.72rem; color: #8ab870; text-align: center; margin: 4px 0 0; }
.distro-channel-gain { color: #888; font-size: 0.72rem; }
.distro-maxed { font-size: 0.78rem; opacity: 0.45; text-align: center; margin: 0; }
/* ═══ END DISTRO CHANNELS ═══════════════════════════════════════════════════ */
/* ═══ END HIDE RESOURCE GRID ON NON-INGREDIENT TABS ════════════════ */

/* ═══ MOBILE: PANEL ACTION BUTTONS — CENTERED WITH INSET ══════════════
   Full-bleed buttons feel like system UI. A centered inset makes them
   feel more like game actions. Applies to top-level .secondary buttons
   directly inside .panel (Serve Beers, Quick Sell Cases, etc.)
   >>> EASY REVERT: delete this block. <<<
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  #shipBeer {
    display: block;
    width: calc(100% - 32px);
    margin-left: auto;
    margin-right: auto;
  }
}
/* ═══ END PANEL ACTION BUTTONS ══════════════════════════════════════ */

/* ═══ RECIPE CARD — INGREDIENT PILLS + ORIG NAME ════════════════════ */
.brew-row-ingredients { display: flex; flex-wrap: nowrap; gap: 4px; width: 100%; padding-bottom: 10px; overflow: hidden; }
.ing-pill {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.02em;
  padding: 2px 5px; border-radius: 8px; white-space: nowrap;
  background: rgba(213,174,90,0.12); border: 1px solid rgba(213,174,90,0.28);
  color: rgba(120,90,30,0.85);
}
.brew-row-orig {
  display: inline-block; margin-left: 6px;
  font-size: 0.65rem; font-weight: 500; color: rgba(180,160,100,0.55);
  font-style: italic;
}
/* ═══ END RECIPE CARD ════════════════════════════════════════════════ */

.pub-auto-inline {
  font-size: 0.65rem; font-weight: 600; color: rgba(90,140,90,0.8);
  margin: 2px 0 0; padding: 0 4px;
}
.pub-tap-summary {
  font-size: 0.8rem; font-weight: 600; color: rgba(40,30,10,0.7);
  margin: 0; padding: 0 4px;
}
.pub-tap-empty {
  color: rgba(40,30,10,0.4); font-weight: 500; font-style: italic;
}
#pubStatStockPill.stock-low strong { color: #c8890a; }
#pubStatStockPill.stock-critical strong { color: #c0392b; }
.hire-bartender-btn { width: 100%; margin-bottom: 4px; }
.hire-bartender-sub { font-size: 0.72rem; color: rgba(40,30,10,0.5); text-align: center; margin: 0 0 12px; }
.pub-serve-status { background: #2a1f0e; border: 1.5px solid rgba(213,174,90,0.25); border-radius: 12px; padding: 10px 14px; margin-bottom: 12px; }
.pub-serve-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.pub-serve-label { font-size: 0.85rem; font-weight: 600; color: var(--gold); }
.pub-serve-stats { font-size: 0.78rem; color: var(--text); opacity: 0.85; white-space: nowrap; }
.pub-serve-track { height: 7px; background: rgba(213,174,90,0.15); border-radius: 4px; overflow: hidden; margin-bottom: 5px; }
.pub-serve-fill { height: 100%; border-radius: 4px; transition: width 0.9s linear; }
.pub-serve-sub { font-size: 0.72rem; color: var(--muted); }
.pub-pills {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.pub-pill {
  background: #f5f0e8;
  border: 1px solid rgba(40,30,10,0.1);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pub-pill span {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(40,30,10,0.5);
}
.pub-pill strong {
  font-size: 1.05rem;
  font-weight: 800;
  color: #1a1208;
}
.pub-pill.pub-pill-low strong { color: #c8890a; }
.pub-pill.pub-pill-critical strong { color: #c0392b; }

/* ═══ PUB UPGRADES — COMPACT 2×2 GRID (MOBILE) ══════════════════════
   Only applies to the 4 core pub upgrades (#pubUpgrades inside #pub).
   Hides verbose copy so each card is just name + level + button.
   >>> EASY REVERT: delete this block <<<
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  #pub #pubUpgrades {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    padding: 12px 0 16px;
  }
  #pub #pubUpgrades .upgrade-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 14px;
    border-radius: 14px;
  }
  /* Hide milestone flavor text and requirement copy; keep the effect line (what this upgrade does) */
  #pub #pubUpgrades .upgrade-card .locked-copy,
  #pub #pubUpgrades .upgrade-card > span { display: none; }
  #pub #pubUpgrades .upgrade-card header {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  #pub #pubUpgrades .upgrade-card header h3 {
    font-size: 1rem;
    font-weight: 800;
    margin: 0;
    line-height: 1.2;
  }
  #pub #pubUpgrades .upgrade-card header strong {
    font-size: 0.75rem;
    font-weight: 600;
    opacity: 0.6;
  }
  #pub #pubUpgrades .upgrade-card p {
    font-size: 0.78rem;
    line-height: 1.45;
    margin: 0;
    color: #4a4237;
    opacity: 1;
    overflow: hidden;
  }
  #pub #pubUpgrades .upgrade-card .upgrade-copy-short {
    height: 1.45em;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 800;
    color: #1d2433;
  }
  #pub #pubUpgrades .upgrade-card .upgrade-status {
    display: inline-block;
    width: fit-content;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: none;
    color: #7a4a12;
    background: #fbe9c8;
    border: 1px solid rgba(180, 130, 40, 0.4);
    border-radius: 20px;
    padding: 3px 10px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  #pub #pubUpgrades .upgrade-card .upgrade-next-name {
    height: auto;
    font-size: 0.7rem;
    font-weight: 500;
    color: #9a938a;
  }
  #pub #pubUpgrades .upgrade-card button {
    font-size: clamp(0.6rem, 3.2vw, 0.82rem);
    padding: 12px 4px;
    margin-top: auto;
    white-space: nowrap;
    overflow: hidden;
  }
}
/* ═══ END PUB UPGRADES 2×2 ══════════════════════════════════════════ */

/* ═══ BREWPUB REVEAL OVERLAY ═════════════════════════════════════════
   Appears over the pub scene image when a buildout is ready to claim.
   Player taps the image itself to trigger the reveal + image change.
   >>> EASY REVERT: delete this block <<<
   ════════════════════════════════════════════════════════════════════ */
.pub-scene-tap {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding-bottom: 12px;
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 40%);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.pub-tap-silent { position: absolute; inset: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pub-scene-tap.has-beer { pointer-events: auto; }
.pub-scene-tap.no-beer { pointer-events: none; }
.pub-tap-icon { font-size: 1.5rem; }
.pub-scene-tap.has-beer .pub-tap-icon { animation: pub-tap-pulse 1.8s ease-in-out infinite; }
.pub-tap-label { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.6); }
.pub-scene-tap.no-beer .pub-tap-label { opacity: 0.5; }
@keyframes pub-tap-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.18); }
}
.pub-beer-float {
  position: absolute;
  pointer-events: none;
  font-size: 1.6rem;
  transform: translateY(0);
  animation: pubBeerFloat 0.85s ease-out forwards;
  z-index: 99;
}
@keyframes pubBeerFloat {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  60%  { opacity: 1; transform: translateY(-55px) scale(1.15); }
  100% { opacity: 0; transform: translateY(-90px) scale(0.9); }
}
.pub-empty-hint {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.62);
  color: #fff;
  font-size: 0.78rem;
  padding: 8px 14px;
  border-radius: 20px;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
}
.pub-empty-hint strong { color: #f5c842; }
/* ─── Pub patron layer — sibling to #scene, never wiped by innerHTML ─── */
#pubPatronLayer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  display: none;
  z-index: 4;
}
#pubPatronLayer.active { display: block; }
.pub-patron {
  position: absolute;
  bottom: 6%;
  height: 135px;
  width: auto;
  pointer-events: none;
  opacity: 1;
  filter: drop-shadow(1px 3px 6px rgba(0,0,0,0.5));
}

.pub-reveal-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(10, 6, 0, 0.52);
  animation: pub-reveal-pulse 2.4s ease-in-out infinite;
  z-index: 10;
}
@keyframes pub-reveal-pulse {
  0%, 100% { background: rgba(10,6,0,0.48); }
  50%       { background: rgba(30,18,0,0.62); }
}
.pub-reveal-label {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #e7c878;
  opacity: 0.8;
  margin: 0;
}
.pub-reveal-name {
  font-size: 1.1rem;
  font-weight: 900;
  color: #fff;
  text-align: center;
  padding: 0 20px;
  line-height: 1.2;
}
.pub-reveal-btn {
  margin-top: 8px;
  padding: 12px 28px;
  background: #e7c878;
  color: #1a0f00;
  font-size: 0.9rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  box-shadow: 0 0 24px rgba(231,200,120,0.5);
  animation: pub-btn-glow 2.4s ease-in-out infinite;
}
@keyframes pub-btn-glow {
  0%, 100% { box-shadow: 0 0 16px rgba(231,200,120,0.4); }
  50%       { box-shadow: 0 0 36px rgba(231,200,120,0.75); }
}
/* ═══ END BREWPUB REVEAL OVERLAY ════════════════════════════════════ */

/* ═══ MOBILE SCENE FLUSH ════════════════════════════════════════════ */
/* Remove the desktop card border/bg from game-stage so scenes are    */
/* flush edge-to-edge with no beige line between stats bar and scene. */
@media (max-width: 600px) {
  .game-stage {
    border: none;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
  }
}
/* ═══ END MOBILE SCENE FLUSH ════════════════════════════════════════ */

/* ═══ COMPACT BREW ROW ══════════════════════════════════════════════
   Two-row card: [num] Name [actions] on top, meta + pills below.
   Removes stacked button column and pill-only bottom row.
   >>> EASY REVERT: delete this block. <<<
   ════════════════════════════════════════════════════════════════════ */
.brew-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 4px;
  padding: 10px 12px;
  flex-wrap: nowrap;
  min-width: 0; /* grid item: don't expand column beyond available space */
}

/* Top row: number + name + actions */
.brew-row-top {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.brew-row-top .beer-number {
  width: 24px;
  height: 24px;
  font-size: 0.75rem;
  flex-shrink: 0;
}

.brew-row.locked .brew-row-top .beer-number {
  background: #8b8172;
}

.brew-row-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.95rem;
}

.brew-row-acts {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Small pill rename button */
.brew-rename-link {
  background: rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.13);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  line-height: 1;
}
.brew-rename-link:hover { background: rgba(0,0,0,0.08); color: var(--fg); }

/* Compact Brew button */
.brew-row-acts .brew-row-btn {
  min-width: 60px;
  min-height: 28px;
  padding: 4px 10px;
  font-size: 0.8rem;
}

/* Bottom row: meta + pills */
.brew-row-bottom {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-left: 32px; /* indent past number badge */
}

.brew-row-bottom .brew-row-meta {
  font-size: 0.72rem;
  white-space: nowrap;
  flex-basis: 100%;
}

.brew-row-bottom .brew-row-pills {
  display: flex;
  gap: 4px;
  flex-wrap: nowrap;
}

.brew-row-bottom .brew-row-needs {
  font-size: 0.68rem;
  color: var(--muted);
  font-weight: 700;
}

/* Progress bar — full width below both rows */
.brew-row .brew-row-progress {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding-left: 32px;
  min-width: 0;
}

.brew-row .brew-progress-bar {
  flex: 1;
  width: auto;
  height: 8px;
}

.brew-row .brew-row-timer {
  font-size: 0.78rem;
  flex-shrink: 0;
}

/* Hide old layout elements that no longer exist */
.brew-row-main, .brew-row-info, .brew-row-action,
.brew-row-buttons, .brew-row-ingredients { display: none !important; }
/* ═══ END COMPACT BREW ROW ══════════════════════════════════════════ */

/* ═══ BREW TILES (FERMENTERS + ASSISTANTS) ═══════════════════════════
   Two square cards side by side above recipe list.
   >>> EASY REVERT: delete this block. <<<
   ════════════════════════════════════════════════════════════════════ */
.brew-tiles-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
.brew-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 12px 10px 10px;
  border-radius: 12px;
  border: 1px solid rgba(213,174,90,0.25);
  background: rgba(213,174,90,0.06);
  text-align: center;
}
.brew-tile-icons { width: 100%; }
.brew-icon-grid { display: flex; flex-direction: column; gap: 3px; align-items: center; }
.brew-icon-row { display: flex; gap: 3px; justify-content: center; }
.brew-tank-dot {
  font-size: 1.25rem;
  opacity: 0.15;
  line-height: 1;
  filter: grayscale(1);
  transition: opacity 0.2s, filter 0.2s;
}
.brew-tank-dot.owned { opacity: 1; filter: none; }
.brew-tank-dot.active { opacity: 1; filter: none drop-shadow(0 0 4px rgba(213,174,90,0.9)); }
.brew-tile-empty {
  font-size: 0.68rem;
  color: var(--muted);
  font-style: italic;
}
.brew-tile-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.brew-tile-level {
  font-size: 0.82rem;
  font-weight: 900;
  color: var(--fg);
  line-height: 1;
}
.brew-tile-hint {
  font-size: 0.67rem;
  font-weight: 700;
  color: var(--green);
  line-height: 1.3;
  opacity: 0.85;
}
.brew-tile-btn {
  margin-top: auto;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(213,174,90,0.15);
  border: 1px solid rgba(213,174,90,0.4);
  color: #7a5a10;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.3;
}
.brew-tile-btn:disabled { opacity: 0.4; cursor: default; }
.brew-tile-btn:not(:disabled):hover { background: rgba(213,174,90,0.28); }
.brew-tile-maxed {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--muted);
  margin-top: 2px;
}
/* ═══ END BREW TILES ═════════════════════════════════════════════════ */

/* ═══ COMPETITION REDESIGN ════════════════════════════════════════════ */
.comp-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  overflow-x: auto;

  scrollbar-width: none;
  padding-bottom: 2px;
}
.comp-tabs::-webkit-scrollbar { display: none; }
.comp-tab {
  flex: 0 0 auto;
  min-width: 90px;
  padding: 9px 10px;
  border-radius: 10px;
  border: 1.5px solid rgba(120,100,60,0.18);
  background: rgba(120,100,60,0.05);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  text-align: center;
  line-height: 1.2;
  transition: background 0.15s, color 0.15s;
}
.comp-tab.active {
  background: var(--accent, #d5ae5a);
  color: #3a2a00;
  border-color: var(--accent, #d5ae5a);
}
.comp-tab.locked {
  opacity: 0.5;
  cursor: default;
}
.comp-card {
  background: var(--card-bg, #fff);
  border-radius: 14px;
  border: 1px solid rgba(120,100,60,0.12);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.comp-card-header {}
.comp-prizes {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.comp-prizes span {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--fg);
  background: rgba(120,100,60,0.08);
  border-radius: 999px;
  padding: 3px 10px;
}
.comp-reward-ladder {
  border: 1px solid rgba(120,100,60,0.12);
  border-radius: 12px;
  background: rgba(255,248,228,0.58);
  padding: 10px;
}
.comp-reward-ladder p {
  margin: 0 0 7px;
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.comp-reward-ladder div {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 7px;
}
.comp-reward {
  min-height: 38px;
  border-radius: 10px;
  display: grid;
  grid-template-columns: minmax(48px,0.8fr) minmax(72px,1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 6px;
  row-gap: 1px;
  padding: 8px 10px;
  font-size: 0.72rem;
  font-weight: 800;
  color: #5a4630;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(120,100,60,0.12);
  text-align: left;
}
.comp-reward strong {
  grid-row: 1 / 3;
  color: #3f301f;
  font-size: 0.83rem;
  line-height: 1;
}
.comp-reward span,
.comp-reward em {
  display: block;
  font-style: normal;
  line-height: 1.05;
  text-align: center;
  white-space: nowrap;
}
.comp-reward span {
  font-size: 0.86rem;
  color: #5b4128;
}
.comp-reward em {
  font-size: 0.75rem;
  color: #6d5c45;
}
.comp-reward.gold { background: linear-gradient(135deg,rgba(255,231,154,0.88),rgba(255,247,219,0.78)); }
.comp-reward.silver { background: linear-gradient(135deg,rgba(226,231,235,0.9),rgba(255,255,255,0.76)); }
.comp-reward.bronze { background: linear-gradient(135deg,rgba(221,168,104,0.74),rgba(255,242,222,0.72)); }
.comp-reward.none { color: var(--muted); }
.comp-clues-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 6px;
}
.comp-clues-row {}
.comp-scout-row {}
.comp-scout-btn {
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(213,174,90,0.12);
  border: 1.5px solid rgba(213,174,90,0.4);
  color: #7a5a10;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
}
.comp-scout-btn:hover { background: rgba(213,174,90,0.22); }
.scout-active {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  color: #3a7a3a;
  background: rgba(60,160,60,0.08);
  border: 1px solid rgba(60,160,60,0.25);
  border-radius: 8px;
  padding: 8px 12px;
  text-align: center;
}
.comp-entry-info { display: flex; flex-direction: column; gap: 1px; }
.comp-entry-info strong { font-size: 0.88rem; }
.comp-entry-info span { font-size: 0.72rem; color: var(--muted); }
.comp-entry-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}
.comp-odds {
  font-size: 0.72rem;
  font-weight: 700;
  color: #3a7a3a;
  background: rgba(60,160,60,0.1);
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.comp-entry-fee {
  font-size: 0.72rem;
  color: var(--muted);
  white-space: nowrap;
}
.comp-submit-btn {
  font-size: 0.75rem;
  padding: 7px 14px;
  white-space: nowrap;
}
.comp-judging {
  position: relative;
  overflow: hidden;
  background: url("assets/backgrounds/competitions/comp-judging.webp");
  background-size: cover;
  background-position: center;
  border-radius: 14px;
  border: 1px solid rgba(227, 180, 76, 0.28);
  padding: 26px 16px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  text-align: center;
  box-shadow: inset 0 0 40px rgba(0,0,0,0.35);
}
.comp-judging::before {
  content: "";
  position: absolute;
  top: -30%;
  left: 50%;
  width: 220px;
  height: 220px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(255, 214, 130, 0.5), transparent 68%);
  animation: judgingSpotlightPulse 2.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes judgingSpotlightPulse {
  0%, 100% { opacity: 0.55; transform: translateX(-50%) scale(1); }
  50%      { opacity: 0.9;  transform: translateX(-50%) scale(1.12); }
}
.comp-judging .eyebrow {
  position: relative;
  color: #5c3d0e;
  letter-spacing: 0.08em;
  text-shadow: 0 0 6px #fff8e6, 0 0 12px #fff8e6, 0 1px 0 #fff8e6;
  white-space: nowrap;
  line-height: 1.4;
}
.comp-judging-beer {
  position: relative;
  font-size: 1.1rem;
  font-weight: 900;
  color: #241a10;
  text-shadow: 0 0 6px #fff8e6, 0 0 12px #fff8e6, 0 1px 0 #fff8e6;
}
.comp-judging-status {
  position: relative;
  font-size: 0.82rem;
  color: #3b2a17;
  font-style: italic;
  font-weight: 700;
  text-shadow: 0 0 6px #fff8e6, 0 0 12px #fff8e6, 0 1px 0 #fff8e6;
}
.comp-judging .progress-track {
  position: relative;
  width: 100%;
  background: rgba(255,255,255,0.1);
}
.comp-judging .progress-fill {
  background: linear-gradient(90deg, #e3b44c, #f7dfa0);
  box-shadow: 0 0 10px rgba(255, 214, 130, 0.55);
}
.comp-judging .action {
  position: relative;
}
/* ═══ END COMPETITION REDESIGN ════════════════════════════════════════ */

/* ═══ COMPETITION ADVANCE BANNER ═════════════════════════════════════ */
.comp-advance-banner {
  background: linear-gradient(135deg, rgba(213,174,90,0.15), rgba(213,174,90,0.05));
  border: 1.5px solid rgba(213,174,90,0.5);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.comp-advance-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.comp-advance-text strong {
  font-size: 0.95rem;
  color: #5a3a00;
}
.comp-advance-text span {
  font-size: 0.78rem;
  color: var(--muted);
}
.comp-advance-btn {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  background: var(--accent, #d5ae5a);
  border: none;
  color: #3a2a00;
  font-size: 0.9rem;
  font-weight: 800;
  cursor: pointer;
  letter-spacing: 0.01em;
}
.comp-advance-btn:hover { filter: brightness(1.08); }
.comp-advance-locked {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.12);
  opacity: 0.75;
}
.comp-advance-locked .comp-advance-text strong {
  color: var(--muted);
}
.comp-name {
  font-size: 1.05rem;
  font-weight: 900;
  margin: 2px 0 6px;
}
/* ═══ END COMPETITION ADVANCE BANNER ═════════════════════════════════ */

/* ═══ DISTRO TRUCK FLEET TILE ════════════════════════════════════════ */
.truck-fleet-card {
  background: linear-gradient(135deg, #2a1f0e, #33250f);
  border: 1.5px solid rgba(213,174,90,0.28);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 4px 0 16px;
  box-shadow: 0 8px 18px rgba(40, 24, 5, 0.12);
}
.truck-fleet-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.truck-fleet-icons { display: flex; gap: 4px; min-width: 0; }
.fleet-dot-owned { font-size: 1.25rem; line-height: 1; }
.fleet-dot-empty { font-size: 1.25rem; line-height: 1; opacity: 0.22; filter: grayscale(1); }
.truck-fleet-count {
  background: rgba(255, 250, 240, 0.08);
  border: 1px solid rgba(213,174,90,0.18);
  border-radius: 999px;
  color: #f1d990;
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
  padding: 7px 10px;
}
.distro-truck-cta {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0 0 18px;
}
.distro-truck-btn {
  width: 100%;
  min-height: 46px;
}
.distro-truck-sub {
  margin: 0;
  padding: 0 10px;
  color: rgba(60, 42, 16, 0.58);
  font-size: 0.74rem;
  font-weight: 750;
  line-height: 1.3;
  text-align: center;
}
.distro-truck-sub span {
  color: rgba(60, 42, 16, 0.42);
  font-weight: 900;
  white-space: nowrap;
}
/* ═══ END DISTRO TRUCK FLEET TILE ═══════════════════════════════════ */

/* ═══ SPECIAL ORDER RESERVE MECHANIC ════════════════════════════════ */
.order-need-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.order-need-row .order-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); flex-shrink: 0; }
.order-need-row strong { font-size: 0.9rem; color: var(--ink); }
.order-math-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.order-math-net { background: rgba(0,0,0,0.04); border-radius: 8px; padding: 10px 12px; }
.order-math-cell { background: rgba(0,0,0,0.04); border-radius: 8px; padding: 10px 12px; }
.order-math-lbl { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 4px; }
.order-math-val { font-size: 1.05rem; font-weight: 800; }
.order-math-sub { font-size: 0.68rem; color: var(--muted); margin-top: 2px; }
.order-math-loss { color: var(--red); }
.order-math-gain { color: var(--green); }
.order-commit-btn { flex-shrink: 0; margin-left: auto; }
.order-collecting-badge { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; background: rgba(74,143,85,0.15); color: var(--green); border-radius: 4px; padding: 2px 7px; flex-shrink: 0; }
.order-on-hold { font-size: 0.75rem; color: #8a6a1a; background: rgba(192,136,42,0.12); border-radius: 6px; padding: 7px 10px; }
.order-collected-label { font-size: 0.78rem; color: var(--muted); margin-bottom: 6px; }
.order-collected-ready { color: var(--green); font-weight: 700; }
.order-fulfill-ready { background: var(--green) !important; color: #fff !important; border-color: transparent !important; }
/* ═══ END SPECIAL ORDER RESERVE MECHANIC ════════════════════════════ */

/* ═══ CITY EXPANSION ════════════════════════════════════════════════ */
.city-expand-banner {
  background: linear-gradient(135deg, #181818, #222);
  border: 1px solid rgba(200,168,80,0.2);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.city-expand-banner.city-expand-ready {
  background: linear-gradient(135deg, #1a2a0a, #2a3a14);
  border-color: rgba(144,200,96,0.5);
}
.city-expand-top { margin-bottom: 2px; }
.city-expand-title { font-size: 0.95rem; font-weight: 700; color: #e8d090; }
.city-expand-tagline { font-size: 0.75rem; color: #888; margin-bottom: 10px; }
.city-expand-reqs { display: flex; gap: 12px; margin-bottom: 12px; }
.city-req-met { font-size: 0.78rem; color: #90c860; font-weight: 600; }
.city-req-unmet { font-size: 0.78rem; color: #888; }
.city-expand-btn { display: block; width: 100%; padding: 10px; font-size: 0.85rem; font-weight: 700; text-align: center; }

/* ═══ CITY SIGN CANVAS ══════════════════════════════════════════════ */
.city-sign-canvas {
  position: absolute;
  top: 0; left: 0;
  pointer-events: none;
  display: block;
}

/* ═══ CITY EXPAND TEASER ═════════════════════════════════════════════ */
.city-expand-teaser {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(200,168,80,0.25);
  margin: 12px 0 8px;
  cursor: pointer;
  height: 145px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.city-expand-teaser:hover { border-color: rgba(200,168,80,0.5); box-shadow: 0 6px 24px rgba(0,0,0,0.4); }
.city-expand-teaser.city-expand-ready { border-color: rgba(144,200,96,0.5); }
.city-expand-teaser-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.city-expand-teaser-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.4) 55%, rgba(0,0,0,0.05) 100%);
  padding: 16px 48px 18px 18px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.city-expand-teaser-label { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.14em; color: #c8a850; margin-bottom: 4px; }
.city-expand-teaser-name { font-size: 1.5rem; font-weight: 900; color: #fff; margin-bottom: 8px; line-height: 1; }
.city-expand-teaser-reqs { display: flex; gap: 10px; flex-wrap: wrap; }
.city-expand-teaser-reqs span { font-size: 0.75rem; }
.city-req-met-light { color: #90e860; font-weight: 600; }
.city-req-unmet-light { color: rgba(255,255,255,0.65); }
.city-expand-teaser-chevron { position: absolute; right: 16px; bottom: 18px; font-size: 2rem; color: rgba(255,255,255,0.8); }
.denver-endgame-teaser.city-expand-ready { border-color: rgba(200,168,80,0.7); box-shadow: 0 0 18px rgba(200,168,80,0.25); cursor: pointer; }
.denver-endgame-teaser:not(.city-expand-ready) { cursor: default; }
.denver-complete-thanks { text-align: center; font-size: 0.8rem; font-weight: 700; color: #c8a850; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 14px; opacity: 0.8; }

/* ═══ CITY EXPAND MODAL ══════════════════════════════════════════════ */
#cityExpandModal {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: flex;
  align-items: flex-end;
}
#cityExpandModal.hidden { display: none; }
.city-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.7);
}
.city-modal-sheet {
  position: relative;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  background: #161210;
  border-radius: 20px 20px 0 0;
  z-index: 1;
}
.city-modal-sheet.fullscreen {
  max-height: 100vh;
  border-radius: 0;
  min-height: 100vh;
}
.city-modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 2;
  background: rgba(0,0,0,0.5);
  border: none;
  color: #fff;
  font-size: 1rem;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.city-modal-photo-wrap {
  position: relative;
  width: 100%;
  height: 175px;
  overflow: hidden;
  border-radius: 20px 20px 0 0;
}
.city-modal-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.city-modal-photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.1) 60%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 18px 20px;
}
.city-modal-eyebrow { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.12em; color: #c8a850; margin-bottom: 4px; }
.city-modal-city-name { font-size: 1.6rem; font-weight: 800; color: #fff; line-height: 1.1; }
.city-modal-tagline { font-size: 0.8rem; color: rgba(255,255,255,0.7); margin-top: 3px; }
.city-modal-body { padding: 20px; }
.city-modal-description { font-size: 0.88rem; color: #c8bfb0; line-height: 1.55; margin-bottom: 16px; }
.city-modal-description p { margin: 0 0 10px; }
.city-modal-description p:last-child { margin-bottom: 0; }
.city-modal-multipliers { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.city-modal-mult-pill {
  background: rgba(200,168,80,0.12);
  border: 1px solid rgba(200,168,80,0.25);
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #c8a850;
}
.city-modal-reqs { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.city-modal-req-label { display: flex; justify-content: space-between; font-size: 0.78rem; color: #aaa; margin-bottom: 5px; }
.city-modal-req-bar { height: 6px; background: rgba(255,255,255,0.1); border-radius: 3px; overflow: hidden; }
.city-modal-req-fill { height: 100%; background: #555; border-radius: 3px; transition: width 0.4s; }
.city-modal-req-fill.req-fill-met { background: #90c860; }
.city-modal-btn {
  display: block;
  width: 100%;
  padding: 14px;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  border: none;
}
.city-modal-btn.action { background: linear-gradient(135deg, #c8a850, #a07830); color: #1a1000; }
.city-modal-btn:disabled { background: rgba(255,255,255,0.08); color: #555; cursor: default; }

/* ═══ BREWERY NAMEPLATE ══════════════════════════════════════════════ */
.brewery-placard {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  background: none;
  border: none;
  padding: 0;
  font-family: 'Cinzel Decorative', serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #f0d898;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 0 12px rgba(0,0,0,0.6);
  white-space: nowrap;
  pointer-events: none;
}

/* ═══ BUYER LOYALTY SYSTEM ═══════════════════════════════════════════ */
.buyer-accounts-section { margin: 12px 0 16px; }
.buyer-accounts-section > .eyebrow { margin: 0 0 8px; }
.buyer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.buyer-card {
  background: var(--card-bg, #fff);
  border: 1.5px solid rgba(40,30,10,0.1);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.buyer-card.buyer-cooled {
  border-color: rgba(60,90,180,0.25);
  background: rgba(60,90,180,0.04);
}
.buyer-card-header { display: flex; align-items: center; gap: 5px; margin-bottom: 2px; }
.buyer-card-icon { font-size: 1rem; line-height: 1; }
.buyer-card-name { font-size: 0.7rem; font-weight: 700; color: #1a1000; line-height: 1.2; }
.loyalty-pips { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.loyalty-pip { font-size: 0.62rem; color: rgba(0,0,0,0.18); }
.loyalty-pip-filled { color: #a07018; }
.loyalty-pip-sm { font-size: 0.54rem; }
.loyalty-pips-row { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.order-tier-name { font-size: 0.6rem; color: #888; }
.buyer-tier-name { font-size: 0.63rem; font-weight: 700; color: #7a5010; margin-left: 2px; }
.buyer-next-line { font-size: 0.6rem; color: #888; line-height: 1.3; }
.buyer-perk-pill {
  font-size: 0.6rem;
  background: rgba(160,112,24,0.1);
  border: 1px solid rgba(160,112,24,0.25);
  border-radius: 8px;
  padding: 2px 6px;
  color: #7a5010;
  font-weight: 700;
  margin-top: 2px;
  width: fit-content;
}
.buyer-contract-pill {
  font-size: 0.6rem;
  background: rgba(60,140,60,0.08);
  border: 1px solid rgba(60,140,60,0.2);
  border-radius: 8px;
  padding: 2px 6px;
  color: #2d7a2d;
  font-weight: 700;
  margin-top: 2px;
  width: fit-content;
}
.buyer-cooled-line { font-size: 0.58rem; color: #5060b0; margin-top: 2px; }
.loyalty-bonus-label { font-size: 0.7rem; color: #c8a850; font-weight: 600; }
.order-tierup-banner {
  background: #7a4f10;
  border: 1px solid #a06818;
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #ffe9a0;
  margin-bottom: 6px;
}
.order-truck-locked { opacity: 0.75; border-style: dashed !important; }
.order-locked-badge {
  font-size: 0.7rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 2px 8px;
  color: #888;
  font-weight: 600;
  margin-left: auto;
}
.order-truck-btn {
  flex: 1;
  font-size: 0.78rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  color: #bbb;
  font-weight: 600;
  cursor: pointer;
  padding: 8px 12px;
}
.order-whale { border-color: rgba(200,168,80,0.5) !important; background: rgba(200,168,80,0.06) !important; }
.order-whale-banner {
  font-size: 0.72rem;
  font-weight: 700;
  color: #c8a850;
  background: rgba(200,168,80,0.10);
  border-radius: 8px;
  padding: 5px 9px;
  margin-bottom: 6px;
  line-height: 1.4;
}
.order-ship-ready { border-color: rgba(80,180,100,0.5) !important; background: rgba(80,180,100,0.04) !important; }
.order-ship-badge { background: rgba(80,180,100,0.15) !important; color: #3a9a50 !important; }
.order-ship-note { color: #3a7a50; font-weight: 600; }
.order-shipped-result {
  border-color: rgba(183,137,45,0.36);
  background:
    radial-gradient(circle at 50% 0%, rgba(255,230,160,0.28), transparent 40%),
    linear-gradient(180deg, #fff9ea, #f0dfb7);
}
.order-reveal-hero {
  margin-top: 10px;
  padding: 14px 12px;
  border-radius: 10px;
  border: 1px solid rgba(183,137,45,0.34);
  background: rgba(255,253,248,0.72);
  text-align: center;
}
.order-reveal-label {
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9a6a21;
}
.order-reveal-mult {
  margin: 3px 0;
  font-size: 2.25rem;
  line-height: 1;
  font-weight: 950;
  color: #2f553b;
}
.order-reveal-copy {
  font-size: 0.76rem;
  line-height: 1.35;
  color: #5f4e36;
  font-weight: 750;
}
.order-profit-reveal {
  border: 1px solid rgba(183,137,45,0.34);
  background: rgba(255,253,248,0.72);
}
.order-ad-btn {
  width: 100%;
  margin-top: 10px;
  background: #2f553b;
  color: #fffdf8;
  border: none;
  border-radius: 10px;
  padding: 13px 14px;
  font-size: 0.95rem;
  font-weight: 900;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 2px 6px rgba(47,85,59,0.18);
}
.order-skip-ad-btn {
  width: 100%;
  margin-top: 6px;
  font-size: 0.78rem;
  background: transparent;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 8px;
  color: #888;
  padding: 7px;
  cursor: pointer;
}
.disabled-btn { opacity: 0.45; cursor: not-allowed; }

/* ═══ LOYALTY PERKS (peek button + locked buff pill) ═══ */
.order-peek-btn { width: 100%; margin: 8px 0 2px; font-size: 0.82rem; }
.buyer-perk-locked { opacity: 0.55; }
/* ═══ END ═══ */

/* ═══ TAP COOLDOWN (Batch 3) ═══ */
.tap-button.tap-cooldown { opacity: 0.55; transition: opacity 0.2s; }
/* ═══ END ═══ */

/* ═══ RESEARCH CONSULTANT RUSH (Batch 6) ═══ */
.research-rush-btn {
  display: inline-block;
  margin-top: 6px;
  margin-left: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  background: #2e6da4;
  border: 1px solid #4a90c8;
  border-radius: 20px;
  padding: 4px 14px;
  cursor: pointer;
}
.research-rush-btn:active { opacity: 0.75; }
/* ═══ END ═══ */

/* ═══ ORDER KEG STOCK INDICATOR ═══ */
.order-stock { font-size: 0.7rem; font-weight: 700; padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
.order-stock-ok { color: #2d6a1f; background: #e2f0d9; }
.order-stock-short { color: #8a1010; background: #f6dede; }

/* ═══ CITY MOVE EXPLAINER ═══ */
.city-move-brief {
  margin: 14px 0 4px;
  padding: 14px 16px;
  border: 1px solid rgba(216, 176, 90, 0.4);
  border-radius: 12px;
  background: rgba(216, 176, 90, 0.08);
}
.city-move-brief-title {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #d8b05a;
  margin-bottom: 10px;
}
.city-move-brief ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.city-move-brief li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.86rem;
  line-height: 1.45;
  color: rgba(240, 230, 210, 0.85);
}
.city-move-brief li span { flex-shrink: 0; }
.city-move-brief li strong { color: #f3e9d2; }

/* ═══ CITY FRANCHISE CARDS ═══ */
.distro-franchise-card {
  border-color: rgba(200, 150, 60, 0.55);
  background: linear-gradient(135deg, #fdf6e3, #f7ecd2);
}
.distro-franchise-card .distro-channel-rate { color: #8a6a1a; }

/* ═══ STICKY MINI-WALLET ═══ */
#stickyWallet {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  display: flex;
  justify-content: center;
  gap: 22px;
  padding: calc(env(safe-area-inset-top, 0px) + 6px) 16px 7px;
  background: rgba(24, 14, 6, 0.94);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(213, 174, 90, 0.45);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.35);
  font-size: 0.92rem;
  color: #f3e9d2;
  transform: translateY(-100%);
  transition: transform 0.22s ease;
  pointer-events: none;
}
#stickyWallet.visible { transform: translateY(0); }
#stickyWallet strong { font-weight: 900; color: #ffd76a; }
#stickyWallet .sw-fame strong { color: #f3e9d2; }
/* ═══ END ═══ */