:root {
  --red: #c8102e; --red-d: #8f0b21; --blue: #1f3a93; --blue-d: #14265f; --navy: #0c1430;
  --gold: #f5c518; --gold-d: #c99a00; --cream: #fff7e6; --ink: #0d1226;
  --panel: rgba(12, 20, 48, 0.92); --panel-2: rgba(22, 34, 76, 0.95);
  --card: #f8f3e6; --card-edge: #d8ccae; --text: #1b1f33; --muted: #5d6480;
  --green: #2fb34a; --green-d: #1f7f33; --accent: #c8102e;
  --radius: 14px;
  font-family: "Trebuchet MS", "Avenir Next", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #050814; color: #fff; }
button { font: inherit; cursor: pointer; border: 0; }
button:disabled { cursor: default; }

/* ---------- Background ---------- */
#bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; }
#bg-img { position: absolute; inset: -4%; background-size: cover; background-position: center; animation: kenburns 60s ease-in-out infinite alternate; transition: opacity 1s; }
#bg-shade { position: absolute; inset: 0; background: radial-gradient(ellipse at 60% 40%, rgba(5, 8, 20, 0.25), rgba(5, 8, 20, 0.8)); }
#bg-stars { position: absolute; inset: -600px 0 0 -300px; will-change: transform, opacity; background-image:
  radial-gradient(1.5px 1.5px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 70% 80%, #fff, transparent),
  radial-gradient(1.5px 1.5px at 40% 70%, #cfe3ff, transparent), radial-gradient(1px 1px at 85% 20%, #fff, transparent),
  radial-gradient(1px 1px at 10% 90%, #fff, transparent), radial-gradient(1.5px 1.5px at 55% 15%, #fff2cc, transparent);
  background-size: 300px 300px; animation: twinkle 4s ease-in-out infinite alternate, drift 120s linear infinite; opacity: 0.7; }
@keyframes kenburns { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.08) translate(-2%, 1%); } }
@keyframes twinkle { from { opacity: 0.35; } to { opacity: 0.85; } }
/* Drift by moving the (oversized) layer instead of its background, so it stays on the GPU (no full-screen repaints). */
@keyframes drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(300px, 600px, 0); } }

/* ---------- Layout ---------- */
#app { position: relative; z-index: 1; display: grid; grid-template-columns: 230px 1fr; height: 100vh; }
#sidebar { background: linear-gradient(180deg, rgba(20, 38, 95, 0.95), rgba(10, 16, 40, 0.95)); border-right: 3px solid var(--gold); display: flex; flex-direction: column; padding: 14px 12px; gap: 12px; overflow-y: auto; }
#world-badge { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--radius); background: rgba(255, 255, 255, 0.06); cursor: pointer; }
#world-planet { width: 58px; height: 58px; border-radius: 50%; background-size: 220%; background-position: 70% 40%; flex: none; box-shadow: 0 0 0 3px var(--gold), 0 0 18px rgba(245, 197, 24, 0.5); animation: spin 40s linear infinite; }
@keyframes spin { from { background-position: 0% 40%; } to { background-position: 200% 40%; } }
#world-name { font-weight: 800; font-size: 18px; letter-spacing: 0.5px; }
#world-title { font-size: 11.5px; color: #ffd98a; }
#menu { display: flex; flex-direction: column; gap: 6px; }
#menu button { position: relative; display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.07); color: #fff; text-align: left; font-weight: 700; font-size: 14.5px; transition: background 0.15s, transform 0.1s; }
#menu button:hover { background: rgba(255, 255, 255, 0.16); }
#menu button:active { transform: scale(0.97); }
.mi { font-size: 20px; width: 26px; text-align: center; }
.badge { margin-left: auto; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--red); font-size: 12px; display: none; align-items: center; justify-content: center; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8); animation: pulse 1.4s ease-in-out infinite; }
.badge.show { display: inline-flex; }
.badge.gold { background: var(--gold); color: var(--ink); animation: none; }
@keyframes pulse { 50% { transform: scale(1.12); } }
#speech-btn { margin-top: auto; padding: 12px; border-radius: 14px; background: linear-gradient(180deg, #ff4a5f, var(--red-d)); color: #fff; box-shadow: 0 4px 0 #5a0715, 0 0 0 2px var(--gold) inset; display: flex; flex-direction: column; align-items: center; gap: 2px; }
#speech-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #5a0715, 0 0 0 2px var(--gold) inset; }
.sb-top { font-weight: 800; font-size: 16px; }
.sb-sub { font-size: 12px; opacity: 0.9; }

#main { display: flex; flex-direction: column; min-width: 0; height: 100vh; }
#topbar { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px 10px; background: linear-gradient(180deg, rgba(5, 8, 20, 0.85), rgba(5, 8, 20, 0.35)); gap: 12px; }
#cash { font-size: 34px; font-weight: 900; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.5); letter-spacing: 0.5px; white-space: nowrap; }
#cash-word { font-size: 22px; color: var(--gold); }
#income { font-size: 14px; color: #bfe6c5; font-weight: 700; }
#top-right { display: flex; align-items: center; gap: 12px; }
#boosts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.boost { padding: 4px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.25); white-space: nowrap; }
.boost.speech { background: rgba(200, 16, 46, 0.5); }
.boost.rally { background: rgba(245, 197, 24, 0.55); color: #231a00; }
.boost.perm { background: rgba(31, 58, 147, 0.7); }
#lb-box { display: flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: rgba(245, 197, 24, 0.16); border: 2px solid var(--gold); font-weight: 900; font-size: 17px; cursor: pointer; }
.lb-icon { color: var(--gold); font-size: 18px; }
#buy-mode { width: 72px; height: 56px; border-radius: 14px; background: linear-gradient(180deg, #ffe066, var(--gold-d)); color: var(--ink); font-weight: 700; font-size: 12px; line-height: 1.15; box-shadow: 0 4px 0 #7a5d00; }
#buy-mode b { font-size: 19px; }
#buy-mode:active { transform: translateY(3px); box-shadow: 0 1px 0 #7a5d00; }

#ticker { overflow: hidden; white-space: nowrap; background: var(--red); border-top: 2px solid #fff; border-bottom: 2px solid #fff; font-weight: 800; font-size: 13px; height: 28px; line-height: 24px; position: relative; }
#ticker::before { content: 'BREAKING'; position: absolute; left: 0; top: 0; bottom: 0; z-index: 2; background: var(--blue); padding: 0 12px; letter-spacing: 1px; }
#ticker-inner { display: inline-block; padding-left: 100%; animation: ticker 70s linear infinite; }
#ticker-inner span { margin-right: 60px; }
#ticker-inner span::before { content: '★ '; color: var(--gold); }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-100%); } }

#businesses { flex: 1; overflow-y: auto; padding: 16px 20px 40px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; align-content: start; }

/* ---------- Business card ---------- */
.biz { position: relative; display: grid; grid-template-columns: 96px 1fr; gap: 10px; align-items: center; }
.biz-icon { position: relative; width: 96px; height: 96px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #fff, #e3dccb); box-shadow: 0 0 0 4px var(--gold), 0 6px 0 4px rgba(0, 0, 0, 0.35); cursor: pointer; transition: transform 0.1s; user-select: none; }
.biz-icon:active { transform: scale(0.93); }
.biz-icon img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; transition: transform 0.2s; }
.biz.running .biz-icon img { animation: bob 0.6s ease-in-out infinite alternate; }
@keyframes bob { from { transform: translateY(0) rotate(-2deg); } to { transform: translateY(-4px) rotate(2deg); } }
.biz-ring { position: absolute; left: -14px; top: -14px; width: calc(100% + 28px); height: calc(100% + 28px); pointer-events: none; overflow: visible; }
.biz-ring circle { fill: none; stroke-width: 4; }
.biz-ring .track { stroke: rgba(255, 255, 255, 0.12); }
.biz-ring .fill { stroke: #6fe07f; stroke-linecap: round; transition: stroke-dashoffset 0.3s; }
.biz-owned { position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); min-width: 44px; padding: 2px 8px; border-radius: 999px; background: var(--blue); color: #fff; font-weight: 900; font-size: 14px; text-align: center; box-shadow: 0 0 0 2px #fff; }
.biz-mgr { position: absolute; top: -8px; right: -8px; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2px var(--gold); display: none; }
.biz-mgr svg { width: 100%; height: 100%; }
.biz.managed .biz-mgr { display: block; }
.biz-tap-hint { position: absolute; left: 50%; top: -34px; transform: translateX(-50%); background: var(--gold); color: var(--ink); font-weight: 900; font-size: 12px; padding: 4px 10px; border-radius: 10px; white-space: nowrap; animation: hint 0.8s ease-in-out infinite alternate; pointer-events: none; z-index: 3; }
.biz-tap-hint::after { content: ''; position: absolute; left: 50%; bottom: -6px; margin-left: -6px; border: 6px solid transparent; border-bottom: 0; border-top-color: var(--gold); }
@keyframes hint { to { transform: translateX(-50%) translateY(-5px); } }

.biz-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.biz-bar { position: relative; height: 38px; border-radius: 12px; background: #2a1e10; box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.5), 0 0 0 2px #7a5a2b; overflow: hidden; }
.biz-bar-fill { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: linear-gradient(180deg, #8ff29c, var(--green) 55%, var(--green-d)); }
.biz.fast .biz-bar-fill { transform: scaleX(1) !important; background: var(--green); overflow: hidden; }
/* Moving stripes via transform (composited) rather than background-position (repaints every frame). */
.biz.fast .biz-bar-fill::after { content: ''; position: absolute; top: 0; bottom: 0; left: -40px; right: 0; background: repeating-linear-gradient(-45deg, #8ff29c 0 14px, var(--green) 14px 28px); background-size: 40px 40px; animation: stripes 0.5s linear infinite; will-change: transform; }
@keyframes stripes { to { transform: translate3d(40px, 0, 0); } }
.biz-rev { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 17px; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.6); white-space: nowrap; overflow: hidden; padding: 0 8px; }
.biz-name { position: absolute; left: 10px; top: 1px; font-size: 10.5px; font-weight: 800; color: rgba(255, 255, 255, 0.75); text-transform: uppercase; letter-spacing: 0.5px; }
.biz-row { display: flex; gap: 8px; }
.biz-buy { flex: 1; min-width: 0; height: 48px; border-radius: 12px; background: linear-gradient(180deg, #ffb24a, #e07a00); color: #fff; box-shadow: 0 4px 0 #8a4a00; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; gap: 8px; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); }
.biz-buy:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 #8a4a00; }
.biz-buy:disabled { background: linear-gradient(180deg, #8a8f9e, #5d6275); box-shadow: 0 4px 0 #3a3e4a; opacity: 0.9; }
.biz-buy .q { font-weight: 800; font-size: 13px; white-space: nowrap; }
.biz-buy .c { font-weight: 900; font-size: 15px; text-align: right; line-height: 1.05; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.biz-buy .c small { display: block; font-size: 11px; font-weight: 700; opacity: 0.9; }
.biz-timer { width: 92px; height: 48px; border-radius: 12px; background: #1b2240; box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6), 0 0 0 2px #3b4674; display: flex; align-items: center; justify-content: center; font-weight: 800; font-family: "Menlo", "Consolas", monospace; font-size: 14px; color: #cfe3ff; }

.biz.locked .biz-icon { filter: grayscale(1) brightness(0.7); }
.biz.locked .biz-bar, .biz.locked .biz-timer { display: none; }
.biz.locked .biz-body { justify-content: center; }
.biz.locked .biz-buy { height: 62px; background: linear-gradient(180deg, #4d5a8a, #2c3563); box-shadow: 0 4px 0 #171d38; }
.biz.locked.can .biz-buy { background: linear-gradient(180deg, #ffb24a, #e07a00); box-shadow: 0 4px 0 #8a4a00; }
.biz.hidden { opacity: 0.35; filter: blur(1px); pointer-events: none; }
.biz.hidden .biz-icon img { filter: brightness(0); }

.biz-milestone { font-size: 11px; font-weight: 700; color: #cfd8ff; padding-left: 4px; margin-top: -2px; }

/* ---------- Modals / panels ---------- */
#modal-root { position: fixed; inset: 0; z-index: 50; pointer-events: none; }
.modal-wrap { position: absolute; inset: 0; background: rgba(3, 6, 16, 0.6); display: flex; align-items: center; justify-content: center; pointer-events: auto; animation: fadein 0.18s ease-out; padding: 16px; }
@keyframes fadein { from { opacity: 0; } }
.modal { width: min(820px, 100%); max-height: min(88vh, 900px); display: flex; flex-direction: column; border-radius: 20px; background: var(--card); color: var(--text); box-shadow: 0 0 0 4px var(--gold), 0 20px 60px rgba(0, 0, 0, 0.6); overflow: hidden; animation: pop 0.22s cubic-bezier(0.2, 1.4, 0.4, 1); }
.modal.small { width: min(480px, 100%); }
@keyframes pop { from { transform: scale(0.85); opacity: 0; } }
.modal-head { position: relative; padding: 16px 56px 14px 20px; background: linear-gradient(180deg, var(--blue), var(--blue-d)); color: #fff; }
.modal-head::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 6px; background: repeating-linear-gradient(90deg, var(--red) 0 20px, #fff 20px 40px); }
.modal-head h2 { margin: 0; font-size: 24px; font-weight: 900; letter-spacing: 0.5px; }
.modal-head p { margin: 4px 0 0; font-size: 13px; color: #d7e1ff; }
.modal-close { position: absolute; right: 12px; top: 12px; width: 36px; height: 36px; border-radius: 50%; background: var(--red); color: #fff; font-size: 20px; font-weight: 900; box-shadow: 0 0 0 2px #fff; }
.modal-body { padding: 18px 20px 20px; overflow-y: auto; }
.modal-tabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.modal-tabs button { padding: 8px 14px; border-radius: 999px; background: #e7dfcb; color: var(--text); font-weight: 800; font-size: 13px; }
.modal-tabs button.on { background: var(--blue); color: #fff; }

.row { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; padding: 10px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 2px var(--card-edge); margin-bottom: 10px; }
.row.done { opacity: 0.6; }
.row-icon { width: 64px; height: 64px; border-radius: 50%; background: #f1ead8; display: flex; align-items: center; justify-content: center; overflow: hidden; font-size: 30px; }
.row-icon img, .row-icon svg { width: 100%; height: 100%; object-fit: contain; }
.row-title { font-weight: 900; font-size: 16px; }
.row-sub { font-size: 13px; color: var(--muted); margin-top: 2px; }
.row-sub b { color: var(--text); }
.btn { padding: 10px 16px; border-radius: 12px; font-weight: 900; font-size: 14px; color: #fff; background: linear-gradient(180deg, #3fd35c, var(--green-d)); box-shadow: 0 3px 0 #135020; white-space: nowrap; text-align: center; }
.btn small { display: block; font-size: 11.5px; font-weight: 700; opacity: 0.95; }
.btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 #135020; }
.btn:disabled { background: linear-gradient(180deg, #a3a8b8, #737a90); box-shadow: 0 3px 0 #4a4f5e; }
.btn.red { background: linear-gradient(180deg, #ff4a5f, var(--red-d)); box-shadow: 0 3px 0 #5a0715; }
.btn.gold { background: linear-gradient(180deg, #ffe066, var(--gold-d)); color: var(--ink); box-shadow: 0 3px 0 #7a5d00; }
.btn.blue { background: linear-gradient(180deg, #4a6fe0, var(--blue-d)); box-shadow: 0 3px 0 #0a1640; }
.btn.big { padding: 14px 24px; font-size: 18px; }
.panel-note { font-size: 13px; color: var(--muted); margin: 0 0 12px; }
.bar { height: 14px; border-radius: 7px; background: #e1d8c2; overflow: hidden; margin-top: 6px; }
.bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--green), #8ff29c); border-radius: 7px; }
.toolbar { display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 12px; flex-wrap: wrap; }

.hero { display: flex; gap: 18px; align-items: center; padding: 16px; border-radius: 16px; background: linear-gradient(135deg, #fff, #f1e7cc); box-shadow: 0 0 0 2px var(--card-edge); margin-bottom: 14px; }
.hero .big-num { font-size: 30px; font-weight: 900; color: var(--blue); line-height: 1.1; }
.hero .lbl { font-size: 12px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.6px; }
.hero-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; flex: 1; }

.grid-ach { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.ach { padding: 10px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 2px var(--card-edge); font-size: 12px; }
.ach b { display: block; font-size: 13px; margin-bottom: 2px; }
.ach.got { background: linear-gradient(135deg, #fff6c9, #ffe27a); box-shadow: 0 0 0 2px var(--gold-d); }
.ach .rw { font-weight: 900; color: var(--gold-d); }

.worlds-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.world-card { border-radius: 16px; overflow: hidden; background: #0c1430; color: #fff; box-shadow: 0 0 0 3px var(--card-edge); display: flex; flex-direction: column; }
.world-card.current { box-shadow: 0 0 0 4px var(--gold), 0 0 24px rgba(245, 197, 24, 0.6); }
.world-card .wimg { height: 110px; background-size: cover; background-position: center; position: relative; }
.world-card.locked .wimg { filter: grayscale(1) brightness(0.4); }
.world-card .wimg .lock { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 40px; }
.world-card .winfo { padding: 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.world-card .winfo h3 { margin: 0; font-size: 17px; }
.world-card .winfo p { margin: 0; font-size: 12px; color: #c9d4ff; }
.world-card .btn { margin-top: auto; }

.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.setting { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 2px var(--card-edge); font-weight: 800; }
.toggle { width: 56px; height: 30px; border-radius: 15px; background: #b9bfd0; position: relative; transition: background 0.2s; }
.toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: left 0.2s; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }
.toggle.on { background: var(--green); }
.toggle.on::after { left: 29px; }
.stats-list { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; font-size: 14px; }
.stats-list div:nth-child(odd) { color: var(--muted); font-weight: 700; }
.stats-list div:nth-child(even) { font-weight: 900; text-align: right; }
textarea.save { width: 100%; height: 90px; font: 11px monospace; border-radius: 10px; border: 2px solid var(--card-edge); padding: 8px; }

/* Dialog w/ advisor */
.advisor { display: flex; gap: 16px; align-items: flex-start; }
.advisor .face { width: 110px; height: 110px; flex: none; }
.advisor .face svg { width: 100%; height: 100%; }
.bubble { position: relative; background: #fff; border-radius: 16px; padding: 14px 16px; box-shadow: 0 0 0 2px var(--card-edge); font-size: 16px; line-height: 1.45; flex: 1; }
.bubble::before { content: ''; position: absolute; left: -12px; top: 30px; border: 10px solid transparent; border-right-color: #fff; border-left: 0; }
.bubble .who { font-weight: 900; color: var(--red); font-size: 13px; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
.dialog-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; }
.gain-list { margin: 12px 0 0; padding: 0; list-style: none; }
.gain-list li { display: flex; justify-content: space-between; padding: 8px 12px; border-radius: 10px; background: #fff; margin-bottom: 6px; box-shadow: 0 0 0 2px var(--card-edge); font-weight: 800; }

/* ---------- FX ---------- */
#fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 40; overflow: hidden; }
.float-cash { position: absolute; font-weight: 900; font-size: 18px; color: #8ff29c; text-shadow: 0 2px 0 #0a3a14, 0 0 8px rgba(0, 0, 0, 0.6); animation: floatup 1.1s ease-out forwards; white-space: nowrap; }
@keyframes floatup { from { transform: translate(-50%, 0) scale(0.8); opacity: 0; } 15% { opacity: 1; transform: translate(-50%, -8px) scale(1.1); } to { transform: translate(-50%, -70px) scale(1); opacity: 0; } }
.coin { position: absolute; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff6b0, var(--gold) 50%, var(--gold-d)); box-shadow: 0 0 0 1.5px #9a7400; }
.confetti { position: absolute; width: 9px; height: 14px; }
.catcher { position: absolute; pointer-events: auto; cursor: pointer; width: 110px; height: 80px; z-index: 45; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.5)); }
.catcher svg { width: 100%; height: 100%; }
.catcher .wing { transform-origin: 55px 40px; animation: flap 0.35s ease-in-out infinite alternate; }
.catcher .wing.r { animation-delay: 0.05s; }
@keyframes flap { from { transform: scaleY(1); } to { transform: scaleY(-0.6); } }
.catcher .spin { transform-origin: 55px 40px; animation: rot 2s linear infinite; }
@keyframes rot { to { transform: rotate(360deg); } }
.catcher .glow { animation: glowp 0.6s ease-in-out infinite alternate; }
@keyframes glowp { to { opacity: 0.4; } }

#toasts { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
.toast { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 14px; background: var(--panel); border: 2px solid var(--gold); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5); font-size: 14px; max-width: 340px; animation: toastin 0.35s cubic-bezier(0.2, 1.4, 0.4, 1), toastout 0.4s ease-in 3.6s forwards; }
.toast .ti { font-size: 26px; }
.toast b { display: block; color: var(--gold); }
@keyframes toastin { from { transform: translateX(120%); } }
@keyframes toastout { to { transform: translateX(120%); opacity: 0; } }

/* Cinematics */
#cinematic { position: fixed; inset: 0; z-index: 80; pointer-events: none; }
.cine { position: absolute; inset: 0; pointer-events: auto; overflow: hidden; background: #02030a; animation: fadein 0.5s; }
.cine .sky { position: absolute; inset: 0; background: linear-gradient(180deg, #02030a, #0c1a4a 60%, #3b5bb5); transition: opacity 2s; }
.cine .streaks { position: absolute; inset: 0; background-image: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.8) 50%, transparent); background-size: 2px 120px; opacity: 0; }
.cine.go .streaks { animation: streak 0.4s linear infinite; opacity: 0.25; background-image: repeating-linear-gradient(90deg, transparent 0 60px, rgba(255, 255, 255, 0.6) 60px 61px, transparent 61px 137px); }
@keyframes streak { from { background-position: 0 0; } to { background-position: 0 400px; } }
.cine .ground { position: absolute; left: 0; right: 0; bottom: 0; height: 18%; background: linear-gradient(180deg, #2e7d32, #1b4d1e); transition: transform 3s ease-in; }
.cine.go .ground { transform: translateY(120%); }
.cine .rocket { position: absolute; left: 50%; bottom: 12%; width: 160px; margin-left: -80px; transition: transform 4s cubic-bezier(0.6, 0, 0.9, 0.6); }
.cine.go .rocket { transform: translateY(-40vh); animation: shake 0.08s linear infinite; }
@keyframes shake { 50% { margin-left: -82px; } }
.cine .smoke { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.95), rgba(200, 200, 210, 0.2)); animation: smoke 1.6s ease-out forwards; }
@keyframes smoke { from { transform: scale(0.3); opacity: 1; } to { transform: scale(2.6) translateY(40px); opacity: 0; } }
.cine .cine-text { position: absolute; left: 0; right: 0; top: 16%; text-align: center; font-size: 44px; font-weight: 900; letter-spacing: 2px; text-shadow: 0 4px 0 rgba(0, 0, 0, 0.6); opacity: 0; transition: opacity 0.8s; padding: 0 16px; }
.cine .cine-text small { display: block; font-size: 20px; color: var(--gold); letter-spacing: 1px; }
.cine .cine-text.show { opacity: 1; }
.cine .countdown { position: absolute; left: 0; right: 0; top: 40%; text-align: center; font-size: 120px; font-weight: 900; color: var(--gold); text-shadow: 0 6px 0 var(--red-d); }
.cine .flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.cine .flash.on { animation: flash 1.2s ease-out forwards; }
@keyframes flash { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } }

/* Speech */
.speech-stage { position: relative; height: 330px; border-radius: 16px; overflow: hidden; background: linear-gradient(180deg, #0c1a4a, #1f3a93 70%); }
.speech-stage .flagwall { position: absolute; inset: 0 0 35% 0; background: repeating-linear-gradient(180deg, var(--red) 0 22px, #fff 22px 44px); opacity: 0.25; animation: wave 3s ease-in-out infinite alternate; }
@keyframes wave { to { transform: skewY(2deg) translateY(4px); } }
.speech-stage .podium { position: absolute; left: 50%; bottom: 58px; width: 150px; height: 110px; margin-left: -75px; background: linear-gradient(180deg, #7a4a1f, #4a2c14); border-radius: 10px 10px 0 0; box-shadow: 0 0 0 3px var(--gold); display: flex; align-items: center; justify-content: center; }
.speech-stage .podium::after { content: '★'; font-size: 44px; color: var(--gold); }
.speech-stage .speaker { position: absolute; left: 50%; bottom: 150px; width: 112px; height: 112px; margin-left: -56px; animation: sway 1.2s ease-in-out infinite alternate; }
@keyframes sway { from { transform: rotate(-3deg); } to { transform: rotate(3deg) translateY(-3px); } }
.speech-stage .speaker svg { width: 100%; height: 100%; }
.speech-stage .crowd { position: absolute; left: 0; right: 0; bottom: 0; height: 80px; display: flex; justify-content: space-around; align-items: flex-end; }
.speech-stage .person { position: relative; width: 40px; height: 66px; animation: cheer 0.5s ease-in-out infinite alternate; }
.speech-stage .person i { position: absolute; left: 8px; top: 0; width: 24px; height: 24px; border-radius: 50%; }
.speech-stage .person b { position: absolute; left: 0; top: 22px; width: 40px; height: 44px; border-radius: 16px 16px 4px 4px; }
.speech-stage .person.arm b::after { content: ''; position: absolute; right: -4px; top: -14px; width: 8px; height: 24px; border-radius: 4px; background: inherit; transform: rotate(18deg); }
@keyframes cheer { to { transform: translateY(-10px); } }
.speech-stage .sign { position: absolute; top: -30px; left: -10px; z-index: 1; width: 60px; height: 24px; background: #fff; color: var(--red); font-size: 10px; font-weight: 900; text-align: center; line-height: 24px; border-radius: 3px; }
.speech-bubble { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); background: #fff; color: var(--text); padding: 8px 14px; border-radius: 16px; font-weight: 800; font-size: 14px; width: 86%; text-align: center; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2); z-index: 2; }
.speech-bubble::after { content: ''; position: absolute; left: 50%; bottom: -9px; margin-left: -9px; border: 9px solid transparent; border-bottom: 0; border-top-color: #fff; }
.portrait.talking .mouth-talk { animation: talk 0.18s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes talk { from { transform: scaleY(0.3); } to { transform: scaleY(1.1); } }
.blink { animation: blink 3s infinite; }
@keyframes blink { 0%, 92%, 100% { opacity: 1; } 95% { opacity: 0.1; } }

/* Dev panel */
#dev { position: fixed; left: 240px; bottom: 10px; z-index: 70; background: rgba(0, 0, 0, 0.8); padding: 8px; border-radius: 10px; display: flex; gap: 6px; flex-wrap: wrap; max-width: 520px; font-size: 12px; }
#dev button { padding: 5px 8px; border-radius: 6px; background: #333; color: #0f0; font-family: monospace; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  #businesses { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  #app { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  #sidebar { order: 2; flex-direction: row; padding: 6px; gap: 6px; border-right: 0; border-top: 3px solid var(--gold); overflow-x: auto; overflow-y: hidden; }
  #world-badge { display: none; }
  #menu { flex-direction: row; gap: 4px; }
  #menu button { flex-direction: column; gap: 2px; padding: 6px 8px; font-size: 10px; min-width: 64px; }
  .mi { font-size: 20px; }
  .ml { white-space: nowrap; }
  .badge { position: absolute; top: 0; right: 0; margin: 0; }
  #speech-btn { margin: 0; padding: 6px 10px; min-width: 90px; }
  .sb-top { font-size: 12px; } .sb-sub { font-size: 10px; }
  #main { height: auto; min-height: 0; }
  #app { height: 100dvh; }
  #topbar { padding: 8px 12px; }
  #cash { font-size: 24px; } #cash-word { font-size: 16px; }
  #buy-mode { width: 60px; height: 48px; }
  #boosts { display: none; }
  #businesses { padding: 12px 12px 24px; }
  .biz { grid-template-columns: 76px 1fr; }
  .biz-icon { width: 76px; height: 76px; }
  .biz-timer { width: 76px; font-size: 12px; }
  .settings-grid { grid-template-columns: 1fr; }
  .row { grid-template-columns: 48px 1fr; }
  .row-icon { width: 48px; height: 48px; }
  .row .btn { grid-column: 1 / -1; }
  #dev { left: 10px; bottom: 90px; }
  #toasts { top: 8px; bottom: auto; right: 8px; left: 8px; align-items: stretch; }
  .toast { max-width: none; animation: toastdown 0.35s cubic-bezier(0.2, 1.4, 0.4, 1), toastup 0.4s ease-in 3.6s forwards; }
  .advisor { flex-direction: column; align-items: center; }
  .advisor .face { width: 84px; height: 84px; }
  .bubble { font-size: 15px; }
  .bubble::before { left: 50%; top: -12px; margin-left: -10px; border: 10px solid transparent; border-top: 0; border-bottom-color: #fff; }
  .modal-wrap { padding: 8px; }
  .modal-head h2 { font-size: 20px; }
  .speech-stage .speaker { bottom: 160px; }
}
@keyframes toastdown { from { transform: translateY(-140%); } }
@keyframes toastup { to { transform: translateY(-140%); opacity: 0; } }

/* =====================================================================
   v1.0 additions: mechanics, tutorial, tiers, a11y, safe areas, iPad
   ===================================================================== */
button#world-badge { width: 100%; border: 0; color: inherit; text-align: left; font: inherit; }
#world-mini { display: none; }
.nav-more { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; touch-action: manipulation; }
textarea, input { -webkit-user-select: text; user-select: text; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* Safe areas (notch / home indicator) */
#sidebar { padding-top: max(14px, env(safe-area-inset-top)); padding-left: max(12px, env(safe-area-inset-left)); padding-bottom: max(14px, env(safe-area-inset-bottom)); }
#topbar { padding-top: max(12px, env(safe-area-inset-top)); padding-right: max(20px, env(safe-area-inset-right)); }
#businesses { padding-right: max(20px, env(safe-area-inset-right)); padding-bottom: max(40px, env(safe-area-inset-bottom)); }
#toasts { right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); }

/* Mechanic bar */
#mechanic-bar { display: none; align-items: center; gap: 10px; padding: 7px 20px; background: rgba(12, 20, 48, 0.85); border-bottom: 2px solid rgba(245, 197, 24, 0.5); font-size: 13.5px; min-height: 42px; }
#mechanic-bar.show { display: flex; }
.mech-ic { font-size: 20px; }
.mech-txt { flex: 1; min-width: 0; line-height: 1.3; }
.mech-txt b { color: var(--gold); }
.btn.sm { padding: 6px 12px; font-size: 13px; }
.btn.ghost { opacity: 0.75; }
.mech-chip { color: var(--gold) !important; font-weight: 800; }
.mech-intro { margin: 10px 0 0; padding: 10px; border-radius: 10px; background: #fff6d6; font-size: 14px; }

/* Solar flare on a card */
.biz-flare { position: absolute; top: -10px; left: -10px; width: 36px; height: 36px; border-radius: 50%; display: none; align-items: center; justify-content: center;
  font-size: 24px; background: radial-gradient(circle, #fff3a0, #ff9a1f 70%); color: #7a2a00; box-shadow: 0 0 18px #ff9a1f; cursor: pointer; animation: pulse 0.8s infinite; z-index: 2; }
.biz.flared .biz-flare { display: flex; }
.biz.flare-ext .biz-flare { animation: none; opacity: 0.8; }
.biz.flared .biz-icon { box-shadow: 0 0 0 4px #ff9a1f, 0 0 26px 6px rgba(255, 154, 31, 0.8), 0 6px 0 4px rgba(0, 0, 0, 0.35); }
.biz.flared .biz-bar-fill { background: linear-gradient(180deg, #ffe08a, #ff9a1f 55%, #c25a00); }

/* Icon frame tiers */
.biz-icon.tier-bronze { box-shadow: 0 0 0 4px #cd7f32, 0 6px 0 4px rgba(0, 0, 0, 0.35); }
.biz-icon.tier-silver { box-shadow: 0 0 0 4px #d7dde6, 0 0 0 7px #8a93a3, 0 6px 0 7px rgba(0, 0, 0, 0.35); }
.biz-icon.tier-gold { box-shadow: 0 0 0 4px var(--gold), 0 0 0 7px #a67c00, 0 0 16px 4px rgba(245, 197, 24, 0.5), 0 6px 0 7px rgba(0, 0, 0, 0.35); }
.biz-icon.tier-platinum { box-shadow: 0 0 0 4px #e5f4ff, 0 0 0 7px #7fb8e6, 0 0 20px 6px rgba(127, 184, 230, 0.6), 0 6px 0 7px rgba(0, 0, 0, 0.35); }
.biz-icon.tier-diamond { box-shadow: 0 0 0 4px #fff, 0 0 0 7px #b69cff, 0 0 26px 8px rgba(182, 156, 255, 0.8), 0 6px 0 7px rgba(0, 0, 0, 0.35); animation: shimmer 3s linear infinite; }
@keyframes shimmer { 50% { filter: brightness(1.15) saturate(1.2); } }

/* Tutorial */
#tutorial-layer { position: fixed; inset: 0; z-index: 55; pointer-events: none; display: none; }
#tutorial-layer.show { display: block; }
.tut-spot { position: fixed; border-radius: 18px; box-shadow: 0 0 0 4px var(--gold), 0 0 22px 6px rgba(245, 197, 24, 0.55); transition: all 0.25s ease; animation: tutpulse 1.2s ease-in-out infinite; }
@keyframes tutpulse { 50% { box-shadow: 0 0 0 7px var(--gold), 0 0 30px 10px rgba(245, 197, 24, 0.75); } }
.tut-bubble { position: fixed; background: #fff; color: var(--text); border-radius: 16px; padding: 14px 16px 10px; font-weight: 800; font-size: 16px; line-height: 1.35; box-shadow: 0 0 0 3px var(--gold), 0 10px 30px rgba(0, 0, 0, 0.5); pointer-events: auto; }
.tut-bubble.pop { animation: pop 0.3s cubic-bezier(0.2, 1.4, 0.4, 1); }
.tut-actions { text-align: right; margin-top: 6px; }
.tut-skip { background: none; color: var(--muted); font-weight: 700; font-size: 12.5px; text-decoration: underline; padding: 4px; }

/* Panels: misc */
.hero-ic { width: 84px !important; height: 84px !important; font-size: 46px !important; }
.hero-ic.gold { color: var(--gold-d); }
.big-num.good { color: var(--green-d); }
.small-strong { font-size: 13px; font-weight: 700; }
.center-cta { text-align: center; margin: 8px 0 18px; }
.center { text-align: center; }
.h3-sub { font-size: 13px; color: var(--muted); font-weight: 600; }
.panel-note.small, .small { font-size: 12px; }
.bar.big { height: 18px; }
.bar.speech-prog { height: 18px; margin-top: 12px; }
.bar.speech-prog i { width: 0; transition: width 0.2s linear; }
.row.featured { box-shadow: 0 0 0 3px var(--gold), 0 0 18px rgba(245, 197, 24, 0.35); background: linear-gradient(135deg, #fffbea, #fff); }
.dialog-actions.left { justify-content: flex-start; }
b.inline { display: inline !important; }
.modal-body h3 { margin: 18px 0 8px; }
.seg { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.seg button { padding: 6px 10px; border-radius: 8px; background: #e7dfcb; color: var(--text); font-weight: 800; font-size: 13px; }
.seg button.on { background: var(--blue); color: #fff; }
.setting { gap: 10px; }
.privacy-frame { width: 100%; height: 65vh; border: 0; border-radius: 12px; background: #fff; }
.treaty-btn { flex: 1 1 200px; white-space: normal; }
.ad-sim { font-size: 64px; animation: pulse 0.8s infinite; }
.modal-body.center { text-align: center; }

.daily-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin: 10px 0 16px; }
.day { border-radius: 12px; background: #fff; box-shadow: 0 0 0 2px var(--card-edge); padding: 8px 4px; text-align: center; font-weight: 800; }
.day .dn { font-size: 11px; color: var(--muted); }
.day .di { font-size: 26px; margin: 4px 0; }
.day .dr { font-size: 12px; }
.day.got { background: linear-gradient(135deg, #e3f7e6, #c5ecc9); box-shadow: 0 0 0 2px var(--green); opacity: 0.8; }
.day.today { background: linear-gradient(135deg, #fff6c9, #ffe27a); box-shadow: 0 0 0 3px var(--gold-d); animation: pulse 1.4s infinite; }

.more-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.more-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 10px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 2px var(--card-edge); font-weight: 900; color: var(--text); font-size: 15px; }
.more-item .mi { font-size: 34px; width: auto; }
.more-item .badge { position: absolute; top: 8px; right: 8px; }

#busy { position: fixed; inset: 0; z-index: 90; background: rgba(3, 6, 16, 0.5); display: flex; align-items: center; justify-content: center; }
.spinner { width: 56px; height: 56px; border-radius: 50%; border: 6px solid rgba(255, 255, 255, 0.25); border-top-color: var(--gold); animation: rot 0.8s linear infinite; }
button.catcher { background: none; border: 0; padding: 0; }
.boost.tribute { background: rgba(245, 197, 24, 0.25); }

/* Dev panel */
#dev { color: #0f0; font-family: monospace; }

/* ---------- Accessibility modes ---------- */
html.text-s { font-size: 14px; }
html.text-l .biz-rev { font-size: 19px; } html.text-l .row-title { font-size: 18px; } html.text-l .row-sub, html.text-l .panel-note { font-size: 15px; }
html.text-l .bubble, html.text-l .tut-bubble { font-size: 18px; } html.text-l #menu button { font-size: 16px; } html.text-l .biz-milestone { font-size: 13px; }
html.text-xl .biz-rev { font-size: 21px; } html.text-xl .row-title { font-size: 20px; } html.text-xl .row-sub, html.text-xl .panel-note { font-size: 17px; }
html.text-xl .bubble, html.text-xl .tut-bubble { font-size: 20px; } html.text-xl #menu button { font-size: 17px; } html.text-xl .biz-milestone { font-size: 14px; } html.text-xl .biz-buy .c { font-size: 17px; }
html.text-s .biz-rev { font-size: 15px; } html.text-s .row-sub { font-size: 12px; }
/* Color-blind friendly: blue/orange instead of green/red, plus patterns */
html.cb .biz-bar-fill { background: repeating-linear-gradient(45deg, #5aa9ff 0 10px, #2f7fe0 10px 20px); }
html.cb .biz-ring .fill { stroke: #5aa9ff; }
html.cb .btn:not(.red):not(.gold):not(.blue) { background: linear-gradient(180deg, #5aa9ff, #1f5fb8); box-shadow: 0 3px 0 #0f3470; }
html.cb .bar > i { background: repeating-linear-gradient(45deg, #5aa9ff 0 8px, #2f7fe0 8px 16px); }
html.cb .btn.red { background: linear-gradient(180deg, #ffb24a, #d06a00); box-shadow: 0 3px 0 #7a3a00; }
html.cb #income { color: #cfe3ff; }
/* Reduce motion */
html.reduce-motion *, html.reduce-motion *::before, html.reduce-motion *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
html.reduce-motion #ticker-inner { animation: none !important; padding-left: 110px; }
html.reduce-motion #bg-img { animation: none !important; }

/* ---------- iPad / tablet ---------- */
@media (min-width: 761px) and (max-width: 1100px) {
  #app { grid-template-columns: 200px 1fr; }
  #businesses { grid-template-columns: 1fr; }
  .ml { font-size: 13.5px; }
}
@media (min-width: 900px) and (max-width: 1100px) and (orientation: landscape) {
  #businesses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .biz { grid-template-columns: 80px 1fr; } .biz-icon { width: 80px; height: 80px; }
}

/* ---------- Phone ---------- */
@media (max-width: 760px) {
  #sidebar { padding: 6px max(6px, env(safe-area-inset-left)) max(6px, env(safe-area-inset-bottom)); }
  #menu { flex: 1; justify-content: space-between; }
  #menu button { flex: 1; min-width: 0; padding: 6px 2px; font-size: 10px; }
  #menu .nav-secondary { display: none; }
  .nav-more { display: flex !important; }
  .mi { font-size: 21px; }
  .ml { font-size: 10px; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  #speech-btn { min-width: 76px; }
  #world-mini { display: block; flex: none; width: 40px; height: 40px; border-radius: 50%; background-size: 220%; background-position: 70% 40%; box-shadow: 0 0 0 2px var(--gold); margin-right: 8px; }
  #topbar { padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left)); justify-content: flex-start; }
  #cash-box { flex: 1; min-width: 0; }
  #cash { font-size: 22px; overflow: hidden; text-overflow: ellipsis; }
  #lb-box { padding: 5px 9px; font-size: 14px; }
  #mechanic-bar { padding: 6px 12px; font-size: 12px; }
  .daily-grid { grid-template-columns: repeat(4, 1fr); }
  .tut-bubble { font-size: 15px; }
  #businesses { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
}
/* Phone landscape: compact vertical space */
@media (max-height: 500px) and (orientation: landscape) {
  #app { grid-template-columns: 170px 1fr; grid-template-rows: none; }
  #sidebar { order: 0; flex-direction: column; border-top: 0; border-right: 3px solid var(--gold); overflow-y: auto; padding: max(6px, env(safe-area-inset-top)) 6px 6px max(6px, env(safe-area-inset-left)); }
  #world-badge { display: none; }
  #menu { flex-direction: column; gap: 3px; }
  #menu button { flex-direction: row; font-size: 12px; padding: 5px 8px; }
  #menu .nav-secondary { display: flex; }
  .nav-more { display: none !important; }
  #topbar { padding: 6px 12px; } #cash { font-size: 20px; }
  #ticker { display: none; }
  #businesses { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
  .biz { grid-template-columns: 64px 1fr; } .biz-icon { width: 64px; height: 64px; }
  .biz-bar { height: 30px; } .biz-buy, .biz-timer { height: 38px; } .biz-milestone { display: none; }
  .modal { max-height: 94vh; }
}
/* Milestone ring sits 14px outside the icon: keep it clear of the screen edge */
.biz-icon { margin: 6px 0 6px 8px; }
.biz { grid-template-columns: 104px 1fr; }
@media (max-width: 760px) { .biz { grid-template-columns: 90px 1fr; } }
@media (max-height: 500px) and (orientation: landscape) { .biz { grid-template-columns: 78px 1fr; } }
@media (min-width: 900px) and (max-width: 1100px) and (orientation: landscape) { .biz { grid-template-columns: 94px 1fr; } }
/* Phone top bar: number word wraps under the amount instead of truncating */
@media (max-width: 760px) {
  #cash { white-space: normal; line-height: 1.05; overflow: visible; }
  #cash-word { display: block; font-size: 14px; letter-spacing: 0.3px; }
  #income { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* Notifications: compact, queued, tap to dismiss; on phones they sit above the bottom nav */
.toast { pointer-events: auto; cursor: pointer; animation: toastin 0.3s cubic-bezier(0.2, 1.4, 0.4, 1) !important; transition: opacity 0.25s, transform 0.25s; }
.toast.out { opacity: 0; transform: translateY(12px); }
.toast.minor { padding: 6px 12px; font-size: 13px; border-width: 1px; }
.toast.minor .ti { font-size: 18px; }
.toast.minor b { display: inline; margin-right: 6px; }
@media (max-width: 760px) {
  #toasts { top: auto; bottom: 100px; left: max(10px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right)); align-items: center; }
  .toast { max-width: 100%; animation: toastrise 0.3s cubic-bezier(0.2, 1.4, 0.4, 1) !important; }
}
@keyframes toastrise { from { transform: translateY(24px); opacity: 0; } }

/* =====================================================================
   Live-ops: hub chips, Liberty Pass, Space Race, Executive Orders,
   Presidential Library, Style store, offers, themes & frames
   ===================================================================== */
#hub { display: none; gap: 8px; padding: 7px max(20px, env(safe-area-inset-right)) 7px 20px; overflow-x: auto; scrollbar-width: none; background: rgba(5, 8, 20, 0.55); }
#hub::-webkit-scrollbar { display: none; }
#hub.show { display: flex; }
.hub-chip { position: relative; flex: none; display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); color: #fff; font-weight: 800; font-size: 13px; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.25) inset; white-space: nowrap; }
.hub-chip span { font-size: 15px; }
.hub-chip.dot::after { content: ''; position: absolute; top: -2px; right: -2px; width: 10px; height: 10px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px #fff; animation: pulse 1.4s ease-in-out infinite; }
.hub-chip.offer { background: linear-gradient(180deg, #ff4a5f, var(--red-d)); box-shadow: 0 0 0 2px var(--gold) inset; }
.hub-chip.gift { background: linear-gradient(180deg, #4a6fe0, var(--blue-d)); box-shadow: 0 0 0 2px var(--gold) inset; animation: pulse 1.8s ease-in-out infinite; }
.hub-chip.good { box-shadow: 0 0 0 1.5px #6fe07f inset; }
.hub-chip.bad { box-shadow: 0 0 0 1.5px #ff8a8a inset; }
@media (max-width: 760px) { #hub { padding: 6px max(12px, env(safe-area-inset-right)) 6px max(12px, env(safe-area-inset-left)); } .hub-chip { font-size: 12px; padding: 5px 10px; } }

.btn-stack { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
@media (max-width: 760px) { .row .btn-stack { grid-column: 1 / -1; flex-direction: row; } .row .btn-stack .btn { flex: 1; } }

/* Liberty Pass */
.pass-upsell { padding: 14px; border-radius: 16px; background: linear-gradient(135deg, #fff3c4, #ffe08a); box-shadow: 0 0 0 2px var(--gold-d); margin-bottom: 14px; display: grid; gap: 10px; }
.pass-upsell .warn { font-size: 12.5px; font-weight: 800; color: var(--red-d); }
.pass-upsell .btn { justify-self: center; }
.pass-track { border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 2px var(--card-edge); }
.pt-head, .pt-row { display: grid; grid-template-columns: 48px 1fr 1fr; gap: 6px; align-items: stretch; padding: 5px 8px; }
.pt-head { background: var(--blue); color: #fff; font-weight: 900; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
.pt-row { background: #fff; border-top: 1px solid #eee3c8; }
.pt-row.reached { background: #fbf6e6; }
.pt-n { display: flex; align-items: center; justify-content: center; font-weight: 900; color: var(--blue); }
.pt-cell { padding: 7px 9px; border-radius: 10px; background: #f1ead8; font-size: 12.5px; font-weight: 700; color: var(--text); }
.pt-cell.prem { background: #fff1c2; }
.pt-cell.ready { background: #d8f7dc; box-shadow: 0 0 0 2px var(--green) inset; }
.pt-cell.got { opacity: 0.55; text-decoration: line-through; }
.pt-cell.locked { opacity: 0.55; }
.pt-cell.locked::before { content: '🔒 '; }

/* Space Race */
.rival-face { overflow: hidden; border-radius: 50%; }
.rival-face svg { width: 100%; height: 100%; }
.race-track { position: relative; padding: 14px 12px 8px; border-radius: 16px; background: linear-gradient(180deg, #0c1430, #1b2a5a); color: #fff; margin-bottom: 10px; }
.race-track .st { position: absolute; top: 8px; bottom: 26px; width: 0; border-left: 1px dashed rgba(255, 255, 255, 0.18); margin-left: 12px; }
.lane { position: relative; height: 44px; margin: 4px 24px 4px 0; border-radius: 10px; background: rgba(255, 255, 255, 0.06); }
.lane-lbl { position: absolute; left: 10px; top: 4px; font-size: 11.5px; font-weight: 800; opacity: 0.85; }
.lane .rocket { position: absolute; bottom: 2px; font-size: 24px; transform: translateX(-4px); transition: left 0.6s ease; }
.lane.you .rocket { filter: drop-shadow(0 0 6px rgba(111, 224, 127, 0.8)); }
.lane.rival .rocket { filter: drop-shadow(0 0 6px rgba(255, 90, 90, 0.8)); }
.race-stations { display: flex; justify-content: space-between; font-size: 11px; opacity: 0.7; margin-top: 4px; }
.rp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 6px; }
.rp-grid > div { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1.5px var(--card-edge); font-size: 13px; }
.rp-grid b { color: var(--green-d); }
.race-result { text-align: center; padding: 16px; border-radius: 16px; margin-bottom: 14px; color: #fff; }
.race-result.won { background: linear-gradient(135deg, #1f7f33, #2fb34a); }
.race-result.lost { background: linear-gradient(135deg, #3b4674, #1b2240); }
.rr-title { font-size: 26px; font-weight: 900; }

/* Executive Orders */
.syn-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 4px; }
.syn { padding: 5px 10px; border-radius: 999px; background: #e7dfcb; font-weight: 800; font-size: 12.5px; }
.syn.on { background: var(--gold); }
.syn-total { margin-left: auto; font-weight: 900; color: var(--green-d); }
.order-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.order-card { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 14px; background: #fffdf5; box-shadow: 0 0 0 2px var(--card-edge); min-height: 120px; }
.order-card.rare { box-shadow: 0 0 0 2.5px #4a6fe0; background: #f3f6ff; }
.order-card.legendary { box-shadow: 0 0 0 3px var(--gold), 0 0 14px rgba(245, 197, 24, 0.55); background: linear-gradient(135deg, #fffaf0, #fff0c2); }
.order-card.empty { align-items: center; justify-content: center; color: var(--muted); font-weight: 800; border: 2px dashed var(--card-edge); box-shadow: none; background: transparent; }
.order-card.pickable { outline: 2px dashed var(--red); outline-offset: 2px; }
.order-card.picked { outline: 3px solid var(--green); outline-offset: 2px; }
.order-card .btn { margin-top: auto; }
.oc-top { display: flex; justify-content: space-between; font-size: 11.5px; font-weight: 800; color: var(--muted); }
.oc-rar { text-transform: uppercase; letter-spacing: 0.5px; }
.order-card.legendary .oc-rar { color: var(--gold-d); }
.order-card.rare .oc-rar { color: #2e4fb8; }
.oc-name { font-weight: 900; font-size: 15px; color: var(--blue); }
.oc-fx { font-size: 13px; color: var(--text); }

/* Presidential Library */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 8px; margin-bottom: 8px; }
.lib-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 2px var(--gold); text-align: center; }
.lib-card svg { width: 60px; height: 60px; }
.lib-card.missing { background: #ece5d3; box-shadow: 0 0 0 2px var(--card-edge); }
.lc-emoji { font-size: 40px; line-height: 60px; }
.lc-q { width: 60px; height: 60px; border-radius: 50%; background: #d8ccae; color: #fff; font-size: 30px; font-weight: 900; line-height: 60px; }
.lc-name { font-size: 11px; font-weight: 800; line-height: 1.15; color: var(--text); }

/* Style store */
.style-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.style-item { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 2px var(--card-edge); text-align: center; }
.style-item.on { box-shadow: 0 0 0 3px var(--green); }
.st-name { font-weight: 900; font-size: 13.5px; }
.sw { display: flex; width: 90px; height: 54px; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.15); }
.sw i { flex: 1; }
.fr-prev .fr-ic, .fr-ic { position: relative; width: 58px; height: 58px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #fff, #e3dccb); box-shadow: 0 0 0 3px var(--gold); }
.fr-ic img { width: 100%; height: 100%; object-fit: contain; }
.lk-prev svg { width: 64px; height: 64px; }
.btn.excl { background: #8a8fa6; box-shadow: none; font-size: 12px; white-space: normal; }

/* Offers */
.offer-hero { padding: 18px; border-radius: 18px; background: radial-gradient(circle at 50% 20%, #fff7d1, #ffd966); box-shadow: 0 0 0 3px var(--gold-d); margin-bottom: 12px; }
.offer-value { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--red); color: #fff; font-weight: 900; font-size: 13px; }
.offer-lb { font-size: 44px; font-weight: 900; color: var(--blue); margin-top: 8px; }
.offer-extra { margin-top: 8px; font-weight: 800; }

/* Cosmetic icon frames: a decorative ring just inside each business icon */
#businesses[data-frame]:not([data-frame=""]) .biz-icon::before { content: ''; position: absolute; inset: -5px; border-radius: 50%; pointer-events: none; z-index: -1;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4.5px)); }
/* The frame replaces the icon's gold edge: drawn under the artwork and badges, never on top of them */
#businesses[data-frame]:not([data-frame=""]) .biz-icon { isolation: isolate; }
[data-frame=laurel] .biz-icon::before, .fr-prev[data-frame=laurel] .fr-ic::before { background: repeating-conic-gradient(#2f7d32 0 9deg, #8fd16a 9deg 13deg, #f5c518 13deg 15deg); }
[data-frame=stars] .biz-icon::before, .fr-prev[data-frame=stars] .fr-ic::before { background: repeating-conic-gradient(#c8102e 0 10deg, #fff 10deg 20deg, #1f3a93 20deg 30deg); }
[data-frame=holo] .biz-icon::before, .fr-prev[data-frame=holo] .fr-ic::before { background: conic-gradient(#ff5fd2, #27e0ff, #7cff6b, #ffe066, #ff5fd2); animation: holo 4s linear infinite; }
[data-frame=apollo] .biz-icon::before, .fr-prev[data-frame=apollo] .fr-ic::before { background: conic-gradient(#f4f7fb, #9aa6b5, #ffffff, #7d8793, #f4f7fb); }
[data-frame=liberty] .biz-icon::before, .fr-prev[data-frame=liberty] .fr-ic::before { background: repeating-conic-gradient(#5fb898 0 14deg, #2f7d6a 14deg 22deg, #f5c518 22deg 24deg); }
[data-frame=founders] .biz-icon::before, .fr-prev[data-frame=founders] .fr-ic::before { background: repeating-conic-gradient(#14265f 0 8deg, #f5c518 8deg 11deg); }
.fr-prev .fr-ic { isolation: isolate; }
.fr-prev .fr-ic::before { content: ''; position: absolute; inset: -4px; border-radius: 50%; z-index: -1; -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px)); }
@keyframes holo { to { filter: hue-rotate(360deg); } }

/* Themes (cosmetic). Classic uses the base tokens. */
html[data-skin=parchment] { --blue: #5a3b1f; --blue-d: #3b2410; --red: #8f0b21; --red-d: #5a0715; --gold: #d9a441; --gold-d: #a8741a; --card: #f3e6c4; --card-edge: #cdb17a; }
html[data-skin=parchment] #sidebar { background: linear-gradient(180deg, rgba(90, 59, 31, 0.96), rgba(40, 24, 10, 0.96)); }
html[data-skin=gilded] { --blue: #2a2214; --blue-d: #16120a; --red: #7a1f1f; --red-d: #4a0f0f; --gold: #d4af37; --gold-d: #9c7c1c; --card: #fff8e1; --card-edge: #d4af37; }
html[data-skin=gilded] #sidebar { background: linear-gradient(180deg, rgba(34, 28, 16, 0.97), rgba(10, 8, 4, 0.97)); }
html[data-skin=gilded] #ticker { background: #16120a; color: var(--gold); border-color: var(--gold); }
html[data-skin=apollo] { --blue: #1b2a4a; --blue-d: #0f1a30; --gold: #dfe6ef; --gold-d: #9aa6b5; --card: #f4f7fb; --card-edge: #c9d3df; }
html[data-skin=apollo] #sidebar { background: linear-gradient(180deg, rgba(60, 74, 100, 0.96), rgba(21, 31, 51, 0.96)); }
html[data-skin=apollo] #ticker { background: #1b2a4a; }
html[data-skin=synth] { --blue: #3a0f6b; --blue-d: #22074a; --red: #ff3fa4; --red-d: #a01c6a; --gold: #27e0ff; --gold-d: #0e9ab5; --card: #f3ecff; --card-edge: #c7b3f0; }
html[data-skin=synth] #sidebar { background: linear-gradient(180deg, rgba(90, 20, 120, 0.96), rgba(30, 6, 60, 0.96)); }
html[data-skin=synth] #ticker { background: linear-gradient(90deg, #ff3fa4, #7a2cff); }
html[data-skin=patriot] { --blue: #0a2a6b; --blue-d: #061a45; --red: #e8323c; --red-d: #9c141c; --gold: #ffd84a; --card: #f7f9ff; --card-edge: #b9c6e8; }
html[data-skin=patriot] #sidebar { background: linear-gradient(180deg, rgba(10, 42, 107, 0.97), rgba(6, 20, 60, 0.97)); }
html[data-skin=nebula] { --blue: #2a1a5e; --blue-d: #140a33; --red: #b64cff; --red-d: #6a1fa0; --gold: #5ef0c8; --gold-d: #1fa888; --card: #f1ecff; --card-edge: #c9b8f5; }
html[data-skin=nebula] #sidebar { background: linear-gradient(180deg, rgba(50, 26, 110, 0.96), rgba(16, 8, 40, 0.96)); }
html[data-skin=nebula] #ticker { background: linear-gradient(90deg, #6a1fa0, #1fa888); }
html[data-skin=frontier] { --blue: #0b3b33; --blue-d: #06231f; --red: #d64545; --red-d: #8a2323; --gold: #3fe0a0; --gold-d: #1a9a6a; --card: #eefaf5; --card-edge: #a8d8c4; }
html[data-skin=frontier] #sidebar { background: linear-gradient(180deg, rgba(11, 59, 51, 0.96), rgba(4, 22, 19, 0.96)); }
html[data-skin=frontier] #ticker { background: #0b3b33; }

/* Gold buttons follow the theme's gold */
:root { --gold-l: #ffe066; }
html[data-skin] .btn.gold, html[data-skin] #buy-mode { background: linear-gradient(180deg, var(--gold-l), var(--gold-d)); }
html[data-skin] .btn.gold:disabled { background: linear-gradient(180deg, #a3a8b8, #737a90); box-shadow: 0 3px 0 #4a4f5e; color: #fff; }
html[data-skin=parchment] { --gold-l: #f0cf85; }
html[data-skin=gilded] { --gold-l: #f3dc85; }
html[data-skin=apollo] { --gold-l: #ffffff; }
html[data-skin=synth] { --gold-l: #9ff3ff; }
html[data-skin=patriot] { --gold-l: #fff1a8; }
html[data-skin=nebula] { --gold-l: #b8fbe8; }
html[data-skin=frontier] { --gold-l: #a8f5d2; }
.biz-icon .biz-owned, .biz-icon .biz-mgr, .biz-icon .biz-flare { z-index: 2; }
.order-card.empty { min-height: 48px; padding: 8px; }

/* Phone bottom bar: fixed-width speech button so every menu label fits on any iPhone width */
@media (max-width: 760px) and (orientation: portrait), (max-width: 500px) {
  #speech-btn { flex: 0 0 auto; width: 78px; min-width: 0; padding: 5px 6px; text-align: center; }
  #speech-btn .sb-top { font-size: 11px; line-height: 1.15; white-space: normal; }
  #speech-btn .sb-sub { font-size: 9px; line-height: 1.15; white-space: normal; }
  #menu { gap: 2px; }
  #menu button { padding: 6px 0; }
  .ml { font-size: clamp(9px, 2.55vw, 11px); letter-spacing: -0.2px; text-overflow: clip; }
}
@media (max-width: 340px) { #speech-btn { width: 70px; } .ml { letter-spacing: -0.4px; } }
@media (max-width: 360px) {
  .biz-buy { flex-direction: column; justify-content: center; align-items: stretch; gap: 0; padding: 2px 8px; }
  .biz-buy .q { font-size: 10.5px; text-align: left; }
  .biz-buy .c { font-size: 12.5px; text-align: right; }
  .biz-timer { width: 62px; font-size: 11px; }
}

/* ---------- Rotating events ---------- */
.biz-emoji { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 54px; line-height: 1; pointer-events: none; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.35)); transition: transform 0.2s; }
.biz.running .biz-icon .biz-emoji { animation: bob 0.6s ease-in-out infinite alternate; }
.biz.hidden .biz-icon .biz-emoji { filter: brightness(0); }
.row-icon .biz-emoji { font-size: 28px; filter: none; }
.biz-emoji.sm { font-size: 30px; }
.hero-ic.ev-hero { font-size: 40px; }
@media (max-width: 760px), (max-height: 500px) and (orientation: landscape) { .biz-emoji { font-size: 44px; } }
@media (max-width: 360px) { .biz-emoji { font-size: 38px; } }
.catch-emoji { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 58px; animation: glowp 0.8s ease-in-out infinite alternate; }

/* ================= v1.1 features ================= */
/* Best buy (#1) */
.biz.best .biz-buy { box-shadow: 0 4px 0 #8a4a00, 0 0 0 3px #fff, 0 0 18px 4px rgba(245, 197, 24, 0.85); }
.biz.best .biz-icon::after { content: '★'; position: absolute; top: -10px; left: -6px; z-index: 3; width: 28px; height: 28px; border-radius: 50%; background: var(--gold); color: var(--ink); font-weight: 900; font-size: 16px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px #fff; animation: pulse 1.6s ease-in-out infinite; }
.biz.flared.best .biz-icon::after { left: auto; right: 28px; }
#menu button.best-nav .mi { position: relative; }
#menu button.best-nav .mi::after { content: '★'; position: absolute; right: -8px; top: -8px; font-size: 12px; color: var(--ink); background: var(--gold); border-radius: 50%; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 1.5px #fff; }
.best-tag { display: inline-block; padding: 1px 7px; border-radius: 999px; background: var(--gold); color: var(--ink); font-size: 11px; font-weight: 900; vertical-align: 2px; }
.row.best-row { box-shadow: 0 0 0 3px var(--gold); }

/* Election payoff (#6) and preview (#15) */
#menu button.pulse-nav { animation: navpulse 1.6s ease-in-out infinite; }
@keyframes navpulse { 50% { box-shadow: inset 0 0 0 2px var(--gold), 0 0 16px rgba(245, 197, 24, 0.6); } }
.payoff { margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; background: #eef1fb; box-shadow: 0 0 0 2px #c9d3f0; font-size: 14px; color: var(--text); }
.payoff.good { background: #e7f8ea; box-shadow: 0 0 0 2px #8fd8a0; }
.bubble .payoff { margin: 10px 0 4px; font-size: 13px; }
.preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.pv { padding: 8px 10px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 2px var(--card-edge); font-size: 12.5px; }
.pv h4 { margin: 0 0 4px; font-size: 13px; }
.pv ul { margin: 0; padding: 0; list-style: none; }
.pv li { display: flex; justify-content: space-between; gap: 6px; padding: 1px 0; }
.pv.lose { box-shadow: 0 0 0 2px #f0b3bb; }
.pv.keep { box-shadow: 0 0 0 2px #9fd8ab; }
.dont-ask { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; color: var(--muted); font-weight: 700; }
.dont-ask input { width: 18px; height: 18px; }
@media (max-width: 420px) { .preview-grid { grid-template-columns: 1fr; } }

/* Upgrade filters (#4) and auto switches (#17) */
.filter-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.filter-chips button { padding: 6px 12px; border-radius: 999px; background: #e7dfcb; color: var(--text); font-weight: 800; font-size: 12.5px; }
.filter-chips button.on { background: var(--blue); color: #fff; }
.filter-chips select, .setting select { padding: 6px 10px; border-radius: 10px; border: 2px solid var(--card-edge); background: #fff; color: var(--text); font: inherit; font-weight: 700; font-size: 13px; max-width: 220px; }
.auto-row { margin-bottom: 12px; }
.setting-sub { display: block; font-size: 12px; font-weight: 700; color: var(--muted); margin-top: 2px; }
.dot-btn { position: relative; }
.dot-btn::after { content: ''; position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px #fff; }

/* Comeback boost */
.boost.comeback { background: rgba(47, 179, 74, 0.6); }

/* Juice (#50) */
#app.shake { animation: appshake 0.45s ease-out; }
#app.shake-big { animation: appshake 0.65s ease-out; }
@keyframes appshake { 10% { transform: translate(-6px, 2px); } 25% { transform: translate(6px, -3px); } 40% { transform: translate(-5px, 3px); } 55% { transform: translate(4px, -2px); } 70% { transform: translate(-2px, 1px); } 100% { transform: none; } }
.pulse-btn { animation: pulse 1.4s ease-in-out infinite; }

/* Reality Anchor */
.biz.anchored .biz-icon { box-shadow: 0 0 0 4px #ff5fd2, 0 0 22px 5px rgba(255, 95, 210, 0.7), 0 6px 0 4px rgba(0, 0, 0, 0.35); }
.biz.anchored .biz-name::after { content: ' ⚓'; }
.anchor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; width: 100%; }
.anchor-btn { display: flex; align-items: center; gap: 8px; text-align: left; white-space: normal; padding: 8px 10px; font-size: 13px; }
.anchor-btn img, .anchor-btn .biz-emoji { width: 34px; height: 34px; flex: none; font-size: 26px; }

/* Town Hall decisions (#26) */
.decide-btn { white-space: normal; flex: 1 1 200px; }
.decide-btn small { margin-top: 4px; }

/* Hub chips */
.hub-chip.boss { background: linear-gradient(180deg, #7a1f8a, #3a0f4a); box-shadow: 0 0 0 2px #ff5fd2 inset; }

/* Welcome-back summary (#5) */
.wb-head { margin: 12px 0 6px; font-size: 14px; }
.wb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.wb-list li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1.5px var(--card-edge); font-size: 13px; }
.wb-list .wi { font-size: 18px; width: 24px; text-align: center; }
.wb-list .wt { flex: 1; }
.gain-list li.note { opacity: 0.8; font-size: 12px; }

/* Debates & Showdown */
.debate-hero .rival-face { background: #5a1f2a; }
.bar.big { height: 20px; border-radius: 10px; }
.boss-stage { position: relative; text-align: center; padding: 18px 12px 14px; border-radius: 18px; margin-bottom: 14px; color: #fff;
  background: radial-gradient(ellipse at 50% 30%, #6a2a8a, #1a0a2a 70%); box-shadow: 0 0 0 3px #ff5fd2 inset; }
.boss-emoji { font-size: 96px; line-height: 1; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.5)); animation: bossbob 2.4s ease-in-out infinite; }
.boss-stage.down .boss-emoji { filter: grayscale(1) brightness(0.7); animation: none; transform: rotate(-12deg); }
@keyframes bossbob { 50% { transform: translateY(-8px) scale(1.04); } }
.boss-name { font-size: 22px; font-weight: 900; margin-top: 6px; }
.boss-line { font-size: 13px; opacity: 0.85; font-style: italic; }
.boss-hp { position: relative; height: 24px; border-radius: 12px; background: #2a0f1a; margin: 12px auto 0; max-width: 420px; overflow: hidden; box-shadow: 0 0 0 2px #fff; }
.boss-hp i { display: block; height: 100%; background: linear-gradient(90deg, #ff3b3b, #ff9a1f); transition: width 0.4s; }
.boss-hp span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 13px; text-shadow: 0 1px 2px #000; }

/* Leaderboards (#32) */
.league-list { list-style: none; margin: 0 0 12px; padding: 0; border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 2px var(--card-edge); }
.league-list li { display: grid; grid-template-columns: 40px 1fr auto; gap: 8px; align-items: center; padding: 7px 12px; background: #fff; font-size: 13px; }
.league-list li:nth-child(even) { background: #faf6ea; }
.league-list li.me { background: #fff4c2; font-weight: 800; box-shadow: inset 4px 0 0 var(--gold); }
.league-list .lr { font-weight: 900; color: var(--muted); text-align: center; }
.league-list li.top1 .lr { color: #c99a00; } .league-list li.top2 .lr { color: #8a95a8; } .league-list li.top3 .lr { color: #b06a2a; }
.league-list .ln { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.league-list .ls { font-weight: 800; white-space: nowrap; }
.league-list .ai { font-style: normal; font-size: 12px; opacity: 0.8; }

/* Bill of Rights (#21) */
.pips { display: inline-flex; gap: 3px; vertical-align: middle; margin-left: 4px; }
.pips i { width: 10px; height: 10px; border-radius: 50%; background: #d8ccae; }
.pips i.on { background: var(--gold); box-shadow: 0 0 0 1.5px #a37d00; }
.row-sub .next { color: var(--blue); font-weight: 700; }

/* Seniority (#23) */
.sen-tier { margin-bottom: 12px; }
.sen-tier.locked { opacity: 0.6; }
.sen-head { font-size: 13px; margin-bottom: 6px; color: var(--text); }
.sen-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sen-opt { display: flex; flex-direction: column; gap: 3px; padding: 10px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 2px var(--card-edge); color: var(--text); text-align: left; font-size: 12.5px; }
.sen-opt b { font-size: 14px; }
.sen-opt:not(:disabled):hover { box-shadow: 0 0 0 3px var(--gold); }
.sen-opt.chosen { box-shadow: 0 0 0 3px var(--green); background: #effbf1; }
.sen-opt em { font-style: normal; color: var(--green-d); font-weight: 900; }
.sen-opt:disabled:not(.chosen) { opacity: 0.55; }

/* Codex (#33) */
.codex-world { position: relative; border-radius: 16px; overflow: hidden; background-size: cover; background-position: center; margin-bottom: 12px; min-height: 120px; display: flex; align-items: flex-end; }
.codex-world > div { width: 100%; padding: 12px 14px; background: linear-gradient(180deg, transparent, rgba(5, 8, 20, 0.9)); color: #fff; }
.codex-world h3 { margin: 0 0 4px; color: #fff; }
.codex-world p { margin: 0; font-size: 13px; }

/* Library museum (#30) */
.museum { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
.hall { flex: 0 0 min(88%, 560px); scroll-snap-align: start; border-radius: 18px; padding: 14px; background-size: cover; background-position: center; position: relative; color: #fff; min-height: 260px; box-shadow: 0 0 0 3px #7a5a2b inset; }
.hall::before { content: ''; position: absolute; inset: 0; border-radius: 18px; background: linear-gradient(180deg, rgba(20, 12, 4, 0.55), rgba(20, 12, 4, 0.85)); }
.hall > * { position: relative; }
.hall h4 { margin: 0 0 10px; font-size: 16px; display: flex; justify-content: space-between; }
.hall h4 span { color: var(--gold); }
.hall.complete { box-shadow: 0 0 0 3px var(--gold) inset, 0 0 18px rgba(245, 197, 24, 0.5); }
.hall.event-wing { background: radial-gradient(ellipse at 50% 0%, #3a2a5a, #140a24); }
.frames { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; }
.frame { margin: 0; padding: 6px 6px 4px; background: #f6ecd2; border-radius: 4px; box-shadow: 0 0 0 4px #8a6a2b, 0 6px 12px rgba(0, 0, 0, 0.5); text-align: center; color: #3a2a10; }
.frame svg { width: 64px; height: 64px; }
.frame .lc-emoji { font-size: 44px; line-height: 64px; }
.frame.empty { background: rgba(255, 255, 255, 0.12); box-shadow: 0 0 0 3px rgba(138, 106, 43, 0.6); color: rgba(255, 255, 255, 0.6); }
.frame .lc-q { font-size: 40px; line-height: 64px; }
.frame figcaption { font-size: 10.5px; font-weight: 800; line-height: 1.2; min-height: 26px; }
.frame.trophy { background: linear-gradient(180deg, #fff3c4, #e8c45a); }

/* Backups (#48) */
.sub-h { margin: 14px 0 4px; font-size: 14px; color: var(--text); }
.backup-list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.backup-list li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1.5px var(--card-edge); font-weight: 800; font-size: 13px; color: var(--text); }
.backup-list small { display: block; font-weight: 600; color: var(--muted); }
.dialog-actions.left { justify-content: flex-start; }

/* Event theme skin (#35): colors are set inline from the event palette. */
html[data-skin=event] #sidebar { background: linear-gradient(180deg, var(--blue), var(--blue-d)); opacity: 0.97; }
html[data-skin=event] #ticker { background: linear-gradient(90deg, var(--blue-d), var(--red)); }

/* Campaign HQ (js/campaign.js) */
.campaign-race { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 10px; }
.campaign-race .cand { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 12px 8px; background: #fff; border-radius: 14px; box-shadow: 0 0 0 2px var(--card-edge); }
.campaign-race .cand.mine { box-shadow: 0 0 0 3px #f5c518; }
.campaign-race .cand.won { background: #fff8d6; }
.campaign-race .cand-name { font-weight: 800; font-size: 14px; line-height: 1.15; }
.campaign-race .cand-line { font-size: 12px; font-style: italic; opacity: .8; min-height: 2.6em; }
.campaign-race .bar { width: 100%; height: 8px; border-radius: 4px; background: rgba(0,0,0,.1); overflow: hidden; }
.campaign-race .bar .fill { height: 100%; background: linear-gradient(90deg, #c8102e, #1f3a93); }
.campaign-race .btn { width: 100%; margin-top: 4px; }
.invite-code { font-family: ui-monospace, Menlo, monospace; letter-spacing: 2px; font-size: 15px; }
.code-input { display: block; width: 100%; box-sizing: border-box; margin: 4px 0 12px; padding: 12px; font: 700 24px ui-monospace, Menlo, monospace; letter-spacing: 6px; text-align: center; text-transform: uppercase; border-radius: 12px; border: 2px solid var(--card-edge); }

/* Browser demo (js/demo.js) */
.demo-banner { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom, 0px) + 74px); z-index: 50; padding: 8px 16px; border-radius: 999px; background: #c8102e; color: #fff; font-weight: 800; font-size: 13px; text-decoration: none; white-space: nowrap; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.demo-cta { margin: 12px 0; padding: 14px; border-radius: 14px; background: #fff8d6; text-align: center; }
.demo-cta .btn { display: inline-block; text-decoration: none; margin-top: 6px; }
.goal-bar { height: 16px; margin: 6px 0 4px; }
.goal-bar > i { background: linear-gradient(90deg, #c8102e, #f5c518, #1f3a93); }

/* ---------------- Browser build ads (js/web-ads.js) ---------------- */
html.has-rail #app { margin-right: 332px; }
html.has-rail #toasts { right: 348px; }
#ad-rail { position: fixed; z-index: 2; top: 0; right: 0; bottom: 0; width: 332px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: linear-gradient(180deg, rgba(20, 38, 95, 0.95), rgba(10, 16, 40, 0.97)); border-left: 3px solid var(--gold); }
#ad-rail > small { color: #9aa6c8; font-size: 11px; letter-spacing: .4px; }
.wa-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; color: var(--text); background: var(--card); border: 3px solid var(--card-edge); border-radius: 18px; padding: 18px 18px 20px; max-width: 340px; box-shadow: 0 18px 40px rgba(0, 0, 0, .45); }
.wa-card > small { color: var(--muted); font-size: 12px; }
.wa-card img { width: 96px; height: 96px; border-radius: 22px; }
.wa-card b { font-size: 20px; line-height: 1.2; }
.wa-card p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.4; }
.wa-rail-card { width: 300px; min-height: 420px; justify-content: center; }
.wa-cta { display: inline-block; margin-top: 4px; padding: 10px 18px; border-radius: 999px; background: var(--blue); color: #fff; font-weight: 800; text-decoration: none; }
.wa-house { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(3, 6, 16, 0.8); animation: fadein .2s ease-out; }
.wa-claim { margin-top: 10px; min-width: 190px; padding: 12px 20px; border: 0; border-radius: 999px; font: inherit; font-weight: 900; font-size: 17px; cursor: pointer; background: var(--gold); color: #1b1f33; }
.wa-claim:disabled { background: #d8d2c0; color: #6b6f80; cursor: default; }
.wa-claim:focus-visible, .wa-cta:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }