:root {
  --bg: #04111f;
  --panel: rgba(8, 29, 48, 0.88);
  --panel-2: rgba(12, 43, 68, 0.9);
  --text: #f4fbff;
  --muted: #a8bfd1;
  --green: #55f38a;
  --blue: #47b8ff;
  --gold: #ffd76a;
  --red: #ff6969;
  --border: rgba(255, 255, 255, 0.13);
  --shadow: 0 20px 50px rgba(0, 0, 0, 0.38);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    linear-gradient(180deg, rgba(2,10,20,.15), rgba(2,10,20,.96)),
    url("assets/silicon-valley-bg.svg"),
    radial-gradient(circle at 20% 0%, #13456e, #03101e 60%);
  background-size: cover;
  background-attachment: fixed;
}

button { font: inherit; color: inherit; cursor: pointer; }
.game-shell { max-width: 1120px; margin: 0 auto; min-height: 100vh; padding: 16px 16px 96px; }
.top-hud {
  display: flex; justify-content: space-between; gap: 14px; align-items: center;
  background: rgba(3, 15, 27, 0.72); border: 1px solid var(--border); border-radius: 24px;
  box-shadow: var(--shadow); backdrop-filter: blur(14px); padding: 14px;
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 260px; }
.brand-mark {
  width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--blue), #72ffae); color: #03111f; font-weight: 950; font-size: 22px;
}
h1 { margin: 0; font-size: clamp(22px, 4vw, 34px); line-height: 1; }
p { color: var(--muted); margin: 6px 0 0; }
.hud-stats { display: grid; grid-template-columns: repeat(4, minmax(90px, 1fr)); gap: 8px; flex: 1; }
.hud-stats div, .hero-metrics div {
  padding: 10px 12px; border-radius: 16px; border: 1px solid var(--border); background: rgba(0, 0, 0, 0.24);
}
.hud-stats span, .hero-metrics span, .meta span { display: block; color: var(--muted); font-size: 12px; }
.hud-stats strong, .hero-metrics strong { font-size: 18px; }
main { margin-top: 16px; }
.page { display: none; animation: fadeIn .22s ease-out; }
.page.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.hero-card {
  min-height: 520px; border-radius: 30px; border: 1px solid var(--border); box-shadow: var(--shadow);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 24px;
  background:
    radial-gradient(circle at center, rgba(85,243,138,.25), transparent 27%),
    linear-gradient(180deg, rgba(4,17,31,.18), rgba(4,17,31,.78));
  position: relative; overflow: hidden;
}
.hero-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent, rgba(255,255,255,.06), transparent); transform: translateX(-100%); animation: shimmer 8s infinite; }
@keyframes shimmer { 50% { transform: translateX(100%); } 100% { transform: translateX(100%); } }
.skyline-badge { z-index: 1; padding: 8px 14px; border-radius: 999px; background: rgba(0,0,0,.35); border: 1px solid var(--border); color: var(--gold); font-weight: 800; }
#click-button {
  z-index: 1; width: 280px; height: 280px; border-radius: 50%; border: 8px solid rgba(85,243,138,.8);
  background: radial-gradient(circle at 35% 25%, #294a66, #061624 62%, #02070c);
  box-shadow: 0 0 40px rgba(85,243,138,.5), inset 0 0 24px rgba(255,255,255,.12);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-transform: uppercase; font-weight: 900;
}
#click-button:active { transform: scale(.96); }
.button-domain { font-size: 62px; letter-spacing: -2px; }
.hero-metrics { z-index: 1; width: 100%; max-width: 760px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.stage-card, .event-card, .prestige-card, .page-heading, .settings-list, .settings-actions {
  margin-top: 14px; border: 1px solid var(--border); border-radius: 22px; background: var(--panel); box-shadow: var(--shadow); padding: 16px;
}
.stage-card, .event-card { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.stage-card h2, .event-card h2, .page-heading h2, .prestige-card h3 { margin: 0; }
.stage-card button, .event-card button, .settings-actions button, .prestige-row button, .buy-btn {
  border: 0; border-radius: 13px; padding: 11px 14px; background: linear-gradient(135deg, #1587ff, #3ce67e); color: #04111f; font-weight: 900;
}
.event-card.negative { border-color: rgba(255,105,105,.5); }
.event-card.positive { border-color: rgba(85,243,138,.55); }
.page-heading { margin-top: 0; }
.card-list { display: grid; gap: 12px; margin-top: 14px; }
.card-list.compact { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.game-card {
  display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center;
  border: 1px solid var(--border); border-radius: 20px; background: var(--panel-2); padding: 14px; box-shadow: 0 12px 28px rgba(0,0,0,.2);
}
.icon {
  width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; font-size: 25px;
  background: rgba(71,184,255,.15); border: 1px solid rgba(71,184,255,.25);
}
.game-card h3 { margin: 0 0 4px; }
.game-card p { margin: 0; }
.meta { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px; color: var(--muted); font-size: 13px; }
.meta b { color: var(--green); }
.progress { margin-top: 8px; height: 9px; background: rgba(0,0,0,.35); border-radius: 999px; overflow: hidden; }
.progress i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--blue), var(--green)); border-radius: inherit; }
.claimed, .locked { opacity: .63; }
.reward-pill { color: var(--gold); font-weight: 900; }
.prestige-row { display: flex; justify-content: space-between; align-items: center; margin: 10px 0; gap: 10px; }
.settings-list { display: grid; gap: 10px; }
.setting-row { display: flex; justify-content: space-between; align-items: center; padding: 12px; border: 1px solid var(--border); border-radius: 16px; background: rgba(0,0,0,.19); }
.setting-row input { width: 22px; height: 22px; accent-color: var(--green); }
.settings-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap: 10px; }
.settings-actions .danger { background: linear-gradient(135deg, #b92323, #ff6969); color: white; }
.bottom-nav {
  position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); width: min(1100px, calc(100% - 20px));
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; background: rgba(2, 10, 19, .86); border: 1px solid var(--border);
  border-radius: 24px; padding: 8px; backdrop-filter: blur(18px); z-index: 20;
}
.bottom-nav button { border: 0; border-radius: 17px; padding: 8px 6px; background: transparent; display: grid; gap: 2px; place-items: center; color: var(--muted); }
.bottom-nav button.active { background: rgba(85,243,138,.18); color: var(--text); }
.bottom-nav span { font-size: 11px; }
.toast-message {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%) translateY(-20px); opacity: 0; z-index: 40;
  background: rgba(4,17,31,.92); border: 1px solid var(--border); border-radius: 999px; padding: 10px 16px; transition: .2s;
}
.toast-message.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.float-layer { pointer-events: none; position: fixed; inset: 0; overflow: hidden; z-index: 30; }
.float-text { position: absolute; color: var(--green); font-weight: 950; animation: floatUp 900ms ease-out forwards; text-shadow: 0 2px 8px #000; }
@keyframes floatUp { to { transform: translateY(-55px); opacity: 0; } }
.rewarded-ad-modal { display: none; position: fixed; inset: 0; place-items: center; z-index: 50; background: rgba(0,0,0,.75); }
.rewarded-ad-modal.active { display: grid; }
.rewarded-ad-box { width: min(420px, 92vw); background: var(--panel); border: 1px solid var(--border); border-radius: 24px; padding: 20px; text-align: center; box-shadow: var(--shadow); }
.ad-screen { margin: 16px 0; min-height: 170px; border-radius: 20px; background: radial-gradient(circle, rgba(85,243,138,.22), rgba(71,184,255,.12)); display: grid; place-items: center; padding: 18px; }
.ad-screen strong { font-size: 52px; }
.rewarded-ad-box button { border: 0; border-radius: 14px; padding: 12px 16px; background: var(--green); color: #04111f; font-weight: 950; width: 100%; }
.rewarded-ad-box button:disabled { opacity: .55; }
@media (max-width: 760px) {
  .game-shell { padding: 10px 10px 90px; }
  .top-hud { align-items: stretch; flex-direction: column; }
  .hud-stats { grid-template-columns: repeat(2, 1fr); }
  .hero-card { min-height: 440px; }
  #click-button { width: 225px; height: 225px; }
  .button-domain { font-size: 50px; }
  .hero-metrics { grid-template-columns: repeat(2, 1fr); }
  .game-card { grid-template-columns: auto 1fr; }
  .game-card .buy-btn { grid-column: 1 / -1; width: 100%; }
  .bottom-nav { grid-template-columns: repeat(7, 1fr); }
  .bottom-nav span { display: none; }
}

.vc-dashboard {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.vc-dashboard div, .spotlight-card {
  border: 1px solid var(--border);
  border-radius: 20px;
  background: rgba(8, 29, 48, 0.9);
  box-shadow: var(--shadow);
  padding: 14px;
}
.vc-dashboard span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}
.vc-dashboard strong {
  display: block;
  margin-top: 4px;
  font-size: 20px;
}
.spotlight-card h3 { margin: 0 0 6px; }
.spotlight-card .split-actions { margin-top: 12px; }
.ipo-card { margin-top: 14px; }
.bottom-nav { grid-template-columns: repeat(9, 1fr); }
@media (max-width: 760px) {
  .vc-dashboard { grid-template-columns: 1fr; }
  .bottom-nav { grid-template-columns: repeat(9, 1fr); }
}


.branch-title { grid-column: 1 / -1; margin: 12px 0 2px; padding: 10px 14px; border-radius: 16px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); }
.branch-title h3 { margin: 0; letter-spacing: .04em; text-transform: uppercase; font-size: .88rem; color: #bfffe4; }
.game-card.warning { border-color: rgba(255, 183, 77, .45); }
.bottom-nav { overflow-x: auto; }
.bottom-nav button { min-width: 74px; }


/* Version 3.0 Silicon Valley World */
body.day-morning {
  background:
    linear-gradient(180deg, rgba(255,184,95,.12), rgba(2,10,20,.92)),
    url("assets/silicon-valley-bg.svg"),
    radial-gradient(circle at 18% 0%, #306c91, #071323 62%);
}
body.day-afternoon {
  background:
    linear-gradient(180deg, rgba(76,174,255,.10), rgba(2,10,20,.93)),
    url("assets/silicon-valley-bg.svg"),
    radial-gradient(circle at 18% 0%, #1670a8, #061423 62%);
}
body.day-evening {
  background:
    linear-gradient(180deg, rgba(255,116,93,.18), rgba(2,10,20,.95)),
    url("assets/silicon-valley-bg.svg"),
    radial-gradient(circle at 18% 0%, #62375f, #06101d 66%);
}
body.day-night {
  background:
    linear-gradient(180deg, rgba(58,103,255,.12), rgba(1,5,14,.98)),
    url("assets/silicon-valley-bg.svg"),
    radial-gradient(circle at 18% 0%, #101a4d, #010610 66%);
}
body.city-sanjose .brand-mark { background: linear-gradient(135deg, #47b8ff, #f6c85f); }
body.city-paloalto .brand-mark { background: linear-gradient(135deg, #55f38a, #f6c85f); }
body.city-mountainview .brand-mark { background: linear-gradient(135deg, #47b8ff, #9c7bff); }
body.city-menlopark .brand-mark { background: linear-gradient(135deg, #f6c85f, #55f38a); }
body.city-sanfrancisco .brand-mark { background: linear-gradient(135deg, #ff8a65, #47b8ff); }
.valley-atmosphere { pointer-events: none; position: fixed; inset: 0; overflow: hidden; z-index: -1; }
.cloud { position: absolute; width: 170px; height: 54px; border-radius: 999px; background: rgba(255,255,255,.18); filter: blur(.5px); }
.cloud::before, .cloud::after { content:""; position:absolute; background:inherit; border-radius:50%; }
.cloud::before { width:70px; height:70px; left:24px; top:-24px; }
.cloud::after { width:90px; height:90px; right:20px; top:-36px; }
.c1 { left:-200px; top:110px; }
.c2 { left:-260px; top:260px; transform:scale(.72); opacity:.55; }
.world-motion .c1 { animation: drift 90s linear infinite; }
.world-motion .c2 { animation: drift 125s linear infinite 18s; }
@keyframes drift { to { transform: translateX(calc(100vw + 420px)); } }
.office-light { position:absolute; width:5px; height:5px; border-radius:50%; background:#f6c85f; box-shadow: 0 0 14px #f6c85f; opacity:0; }
.l1 { left:18%; top:74%; } .l2 { left:78%; top:67%; }
.day-night .office-light, .day-evening .office-light { opacity:.85; }
.world-dashboard { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:14px; }
.world-dashboard div { border:1px solid var(--border); border-radius:20px; background:rgba(8,29,48,.9); box-shadow:var(--shadow); padding:14px; }
.world-dashboard span { display:block; color:var(--muted); font-size:12px; }
.world-dashboard strong { display:block; margin-top:4px; font-size:20px; }
.world-map { position:relative; min-height:310px; margin-top:14px; border:1px solid var(--border); border-radius:28px; overflow:hidden; box-shadow:var(--shadow); background: linear-gradient(180deg, rgba(71,184,255,.17), rgba(8,29,48,.92)); }
.world-map::before { content:""; position:absolute; inset:auto 0 0; height:44%; background:linear-gradient(180deg, transparent, rgba(85,243,138,.14)); }
.map-road { position:absolute; left:5%; right:5%; bottom:65px; height:28px; border-radius:999px; background:rgba(0,0,0,.34); border:1px solid rgba(255,255,255,.1); }
.map-road::after { content:""; position:absolute; left:0; right:0; top:12px; border-top:2px dashed rgba(255,255,255,.28); }
.map-car { position:absolute; bottom:75px; width:28px; height:14px; border-radius:8px 8px 4px 4px; background:#55f38a; box-shadow:0 0 12px rgba(85,243,138,.55); }
.car-one { left:8%; } .car-two { left:65%; background:#47b8ff; }
.world-motion .car-one { animation: carDrive 16s linear infinite; }
.world-motion .car-two { animation: carDrive 21s linear infinite reverse; }
@keyframes carDrive { to { transform: translateX(950px); } }
.map-plane { position:absolute; top:46px; left:12%; font-size:28px; opacity:.75; }
.world-motion .map-plane { animation: planeFly 30s linear infinite; }
@keyframes planeFly { to { transform: translateX(980px) translateY(-60px); } }
.city-node-list { position:absolute; inset:0; }
.city-node { position:absolute; left:var(--x); bottom:96px; transform:translateX(-50%); border:1px solid rgba(255,255,255,.16); border-radius:18px; padding:10px 11px; background:rgba(3,15,27,.82); box-shadow:0 12px 26px rgba(0,0,0,.25); display:grid; place-items:center; gap:2px; min-width:82px; }
.city-node span { font-size:26px; }
.city-node b { font-size:11px; }
.city-node.active { border-color:rgba(85,243,138,.9); box-shadow:0 0 28px rgba(85,243,138,.25); }
.city-node.locked { opacity:.48; }
.world-opportunity-card { margin-top:14px; }
@media (max-width: 760px) {
  .world-dashboard { grid-template-columns:1fr; }
  .world-map { min-height:360px; }
  .city-node { min-width:64px; padding:8px 6px; }
  .city-node b { display:none; }
  .map-road { bottom:54px; }
}

/* Version 3.1 polish, mobile layout, tutorial, trees, ending */
:root { --bottom-nav-space: 142px; }
html { scroll-padding-bottom: var(--bottom-nav-space); }
.game-shell { padding-bottom: calc(var(--bottom-nav-space) + env(safe-area-inset-bottom)); }
.top-hud { position: sticky; top: 0; z-index: 30; backdrop-filter: blur(18px); }
.tutorial-pill {
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,.22);
  background: linear-gradient(135deg, rgba(77,216,255,.28), rgba(157,111,255,.24));
  color: white; font-weight: 900; font-size: 1.15rem; box-shadow: var(--shadow); cursor: pointer;
}
.bottom-nav { bottom: calc(12px + env(safe-area-inset-bottom)); max-height: 82px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.bottom-nav::-webkit-scrollbar { display: none; }
.card.is-locked { opacity: .58; filter: grayscale(.25); }
.card.completed, .story-complete { border-color: rgba(95,255,171,.5); background: rgba(48,255,155,.08); }
.tree-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tree-branch {
  border: 1px solid rgba(255,255,255,.14); border-radius: 24px; padding: 16px;
  background: linear-gradient(145deg, rgba(9,20,42,.86), rgba(20,47,75,.56)); box-shadow: var(--shadow);
}
.tree-branch h3 { margin: 0 0 12px; }
.tree-node {
  display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center;
  padding: 12px; margin: 10px 0; border-radius: 18px; border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.055);
}
.tree-node strong { display: block; }
.tree-node small { color: var(--muted); }
.ending-card {
  border-radius: 26px; padding: 20px; border: 1px solid rgba(255,255,255,.16);
  background: radial-gradient(circle at top right, rgba(255,202,87,.16), transparent 35%), rgba(5,15,32,.75);
  box-shadow: var(--shadow); margin-bottom: 16px;
}
.progress-track { height: 12px; background: rgba(255,255,255,.12); border-radius: 999px; overflow: hidden; margin: 12px 0; }
.progress-fill { height: 100%; background: linear-gradient(90deg, #4dd8ff, #7cffb2, #ffcc5c); border-radius: inherit; }
.tutorial-modal { position: fixed; inset: 0; display: none; place-items: center; z-index: 100; background: rgba(2,8,22,.72); padding: 18px; }
.tutorial-modal.show { display: grid; }
.tutorial-box { position: relative; max-width: 520px; border-radius: 28px; padding: 24px; border: 1px solid rgba(255,255,255,.2); background: linear-gradient(145deg, #0b1830, #15375d); box-shadow: 0 30px 90px rgba(0,0,0,.55); }
.modal-x { position: absolute; right: 14px; top: 12px; width: 36px; height: 36px; border-radius: 50%; }
.tutorial-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.city-garage .hero-card { background-image: linear-gradient(rgba(7,16,32,.52), rgba(7,16,32,.75)), radial-gradient(circle at 20% 10%, rgba(255,204,92,.28), transparent 28%), linear-gradient(135deg, #0d1b32, #1b385e); }
.city-sanJose .hero-card { background-image: linear-gradient(rgba(7,16,32,.52), rgba(7,16,32,.75)), radial-gradient(circle at 70% 20%, rgba(124,255,178,.22), transparent 30%), linear-gradient(135deg, #10213e, #255b7a); }
.city-paloAlto .hero-card { background-image: linear-gradient(rgba(7,16,32,.52), rgba(7,16,32,.75)), radial-gradient(circle at 25% 20%, rgba(68,255,161,.25), transparent 30%), linear-gradient(135deg, #102b2a, #245b58); }
.city-mountainView .hero-card { background-image: linear-gradient(rgba(7,16,32,.52), rgba(7,16,32,.75)), radial-gradient(circle at 70% 10%, rgba(77,216,255,.3), transparent 34%), linear-gradient(135deg, #081b3a, #183f76); }
.city-menloPark .hero-card { background-image: linear-gradient(rgba(7,16,32,.52), rgba(7,16,32,.75)), radial-gradient(circle at 55% 18%, rgba(157,111,255,.3), transparent 34%), linear-gradient(135deg, #161536, #412b6c); }
.city-sanFrancisco .hero-card { background-image: linear-gradient(rgba(7,16,32,.52), rgba(7,16,32,.75)), radial-gradient(circle at 50% 10%, rgba(255,137,95,.28), transparent 34%), linear-gradient(135deg, #10213f, #6b3652); }
.float-money { animation: floatMoney 900ms ease-out forwards; }
@keyframes floatMoney { from { transform: translateY(0) scale(.9); opacity: 1; } to { transform: translateY(-48px) scale(1.1); opacity: 0; } }
#click-button:active { transform: scale(.96); }
#click-button.pulse { animation: clickPulse .35s ease; }
@keyframes clickPulse { 0% { box-shadow: 0 0 0 rgba(77,216,255,0); } 50% { box-shadow: 0 0 38px rgba(77,216,255,.55); } 100% { box-shadow: 0 0 0 rgba(77,216,255,0); } }
@media (max-width: 760px) {
  :root { --bottom-nav-space: 126px; }
  body { font-size: 15px; }
  .game-shell { width: min(100%, 100vw); padding-left: 10px; padding-right: 10px; }
  .top-hud { gap: 10px; padding: 10px; border-radius: 0 0 22px 22px; }
  .brand h1 { font-size: 1rem; }
  .brand-mark { width: 38px; height: 38px; }
  .hud-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .hud-stats div { padding: 8px; }
  .hero-card { padding: 18px; min-height: 380px; }
  #click-button { width: min(72vw, 260px); height: min(72vw, 260px); font-size: 1rem; }
  .hero-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tree-grid, .grid, .shop-grid { grid-template-columns: 1fr !important; }
  .bottom-nav { width: calc(100% - 16px); left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); display: flex; justify-content: flex-start; padding: 8px; }
  .bottom-nav button { min-width: 70px; min-height: 56px; font-size: .72rem; }
}


/* Version 3.2: drawer navigation and late-game system polish */
.game-shell { padding-bottom: 34px; }
.top-hud { position: sticky; top: 12px; z-index: 400; }
.hamburger-btn {
  width: 48px; height: 48px; border-radius: 16px; border: 1px solid rgba(255,255,255,.18);
  background: rgba(8, 14, 28, .72); color: #fff; font-size: 1.55rem; cursor: pointer;
  box-shadow: var(--shadow); backdrop-filter: blur(14px); flex: 0 0 auto;
}
.hamburger-btn:hover { transform: translateY(-1px); background: rgba(255,255,255,.12); }
.menu-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.52); z-index: 900; opacity: 0; pointer-events: none; transition: opacity .22s ease; }
.menu-backdrop.open { opacity: 1; pointer-events: auto; }
.side-menu {
  position: fixed; inset: 0 auto 0 0; width: min(340px, 88vw); transform: translateX(-105%);
  background: linear-gradient(180deg, rgba(10,18,36,.98), rgba(6,9,18,.98)); border-right: 1px solid rgba(255,255,255,.14);
  z-index: 1000; transition: transform .24s ease; overflow-y: auto; box-shadow: 30px 0 80px rgba(0,0,0,.45);
  padding-bottom: env(safe-area-inset-bottom);
}
.side-menu.open { transform: translateX(0); }
.menu-header { display:flex; align-items:center; gap:12px; padding:18px; border-bottom:1px solid rgba(255,255,255,.1); }
.menu-header small { display:block; color: var(--muted); margin-top:3px; }
.menu-close { margin-left:auto; background:transparent; border:0; color:white; font-size:2rem; cursor:pointer; }
.menu-stats { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:12px 18px; }
.menu-stats span { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:10px; color:var(--muted); font-size:.86rem; }
.menu-links { padding: 8px 12px 18px; display:grid; gap:6px; }
.menu-links button { width:100%; border:0; border-radius:14px; background:transparent; color:#f7fbff; text-align:left; padding:13px 14px; cursor:pointer; font-weight:700; }
.menu-links button:hover, .menu-links button.active { background: linear-gradient(90deg, rgba(94,234,212,.18), rgba(96,165,250,.12)); }
.bottom-nav { display:none !important; }
.system-art { min-height: 80px; border-radius: 18px; background: radial-gradient(circle at 20% 30%, rgba(94,234,212,.26), transparent 30%), radial-gradient(circle at 82% 20%, rgba(251,191,36,.2), transparent 28%), linear-gradient(135deg, rgba(30,64,175,.2), rgba(15,23,42,.75)); border: 1px solid rgba(255,255,255,.1); }
.game-card.locked, .game-card.is-locked { opacity:.62; filter:saturate(.75); }
.game-card.completed { outline: 1px solid rgba(94,234,212,.5); }
@media (max-width: 760px) {
  .top-hud { top: 6px; grid-template-columns: auto 1fr; gap: 10px; }
  .brand h1 { font-size: 1rem; }
  .brand-mark { width: 38px; height: 38px; }
  .hud-stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .hamburger-btn { width: 44px; height: 44px; border-radius: 14px; }
  .game-shell { padding-left: 10px; padding-right: 10px; }
  .game-card { grid-template-columns: 42px 1fr; }
  .game-card .buy-btn { grid-column: 1 / -1; width: 100%; }
  .vc-dashboard { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* Version 3.3: home recommendation card and buy max controls */
.recommendation-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin: 18px 0;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 24px;
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, .22), transparent 34%),
    linear-gradient(135deg, rgba(15, 23, 42, .92), rgba(20, 83, 45, .72));
  box-shadow: 0 18px 45px rgba(0, 0, 0, .28);
}

.recommendation-card h2 { margin: 0 0 8px; }
.recommendation-card p { margin: 0 0 12px; color: var(--muted); }

.recommendation-actions {
  min-width: 190px;
  display: grid;
  gap: 8px;
}

.recommendation-actions label {
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
}

.recommendation-actions select,
.buy-amount-select {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 14px;
  color: var(--text);
  background: rgba(2, 6, 23, .82);
  outline: none;
}

.recommendation-actions button {
  padding: 12px 14px;
  border: 0;
  border-radius: 14px;
  color: #061018;
  font-weight: 800;
  cursor: pointer;
  background: linear-gradient(135deg, #67e8f9, #a7f3d0);
}

.best-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  color: var(--text);
}

.game-card .buy-stack {
  display: grid;
  gap: 8px;
  min-width: 132px;
}

@media (max-width: 760px) {
  .recommendation-card {
    grid-template-columns: 1fr;
    border-radius: 20px;
    padding: 16px;
  }

  .recommendation-actions,
  .game-card .buy-stack {
    width: 100%;
    min-width: 0;
  }

  .game-card .buy-stack .buy-btn { width: 100%; }
}

/* Version 3.4 compact mobile header update */
@media (max-width: 760px) {
  .game-shell {
    padding-top: 4px;
  }

  .top-hud {
    position: sticky;
    top: 6px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border-radius: 0 0 16px 16px;
    max-height: 56px;
    overflow: hidden;
    background: rgba(8, 12, 22, 0.82);
    backdrop-filter: blur(16px);
  }

  .top-hud .brand {
    display: none;
  }

  .hamburger-btn {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    font-size: 20px;
  }

  .tutorial-pill {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 11px;
    font-size: 16px;
  }

  .hud-stats {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 6px;
    width: 100%;
    min-width: 0;
  }

  .hud-stats div {
    min-width: 0;
    padding: 4px 5px;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.06);
  }

  .hud-stats div:nth-child(2),
  .hud-stats div:nth-child(4),
  .hud-stats div:nth-child(5) {
    display: none;
  }

  .hud-stats span {
    display: none;
  }

  .hud-stats strong {
    display: block;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80px;
  }

  #cash-display::before {
    content: "💰 ";
  }

  #reputation-display::before {
    content: "⭐ ";
  }

  main {
    padding-top: 4px;
  }
}

@media (max-width: 420px) {
  .top-hud {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 6px;
    padding: 6px;
    max-height: 50px;
  }

  .hamburger-btn {
    width: 34px;
    height: 34px;
    font-size: 18px;
  }

  .tutorial-pill {
    width: 30px;
    height: 30px;
    min-width: 30px;
  }

  .hud-stats strong {
    font-size: 11px;
    max-width: 68px;
  }
}


/* Version 3.5 Store Prep: compact mobile polish, legal pages, popups, screenshots */
.side-menu { box-shadow: 24px 0 60px rgba(0,0,0,.45); }
.menu-links button { border-radius: 14px; margin: 3px 8px; width: calc(100% - 16px); }
.legal-card, .offline-box {
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(15,22,38,.94), rgba(5,8,18,.92));
  padding: 22px;
  box-shadow: var(--shadow);
  line-height: 1.6;
}
.legal-card code { color: #a7f3d0; }
.offline-modal, .reset-modal {
  position: fixed; inset: 0; z-index: 4000;
  display: none; align-items: center; justify-content: center;
  padding: 18px; background: rgba(0,0,0,.62); backdrop-filter: blur(12px);
}
.offline-modal.show, .reset-modal.show { display: flex; }
.offline-box { width: min(440px, 100%); text-align: center; position: relative; animation: modalPop .28s ease both; }
.danger-box { border-color: rgba(255, 85, 85, .45); }
.offline-total { font-size: clamp(2rem, 8vw, 3.4rem); font-weight: 900; margin: 16px 0; color: #80ffdb; text-shadow: 0 0 24px rgba(128,255,219,.4); }
#reset-confirm-input { width: 100%; padding: 14px; border-radius: 14px; border: 1px solid rgba(255,255,255,.16); color: white; background: rgba(255,255,255,.08); margin: 12px 0; }
@keyframes modalPop { from { transform: translateY(18px) scale(.96); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes shimmerSweep { 0% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.hero-card::after, .recommendation-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.08) 48%, transparent 60%);
  animation: shimmerSweep 5.2s ease-in-out infinite;
}
.hero-card, .recommendation-card { position: relative; overflow: hidden; }
.buy-btn, .recommendation-actions button, .settings-actions button { transition: transform .16s ease, filter .16s ease, box-shadow .16s ease; }
.buy-btn:active, .recommendation-actions button:active, .settings-actions button:active { transform: scale(.97); }
.page.active { animation: pageIn .22s ease both; }
@keyframes pageIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 680px) {
  .top-hud { min-height: 46px; padding: 6px 8px; gap: 6px; }
  .brand { gap: 6px; min-width: 0; }
  .brand-mark { width: 30px; height: 30px; font-size: .75rem; }
  #game-title { display: none; }
  #stage-tagline { display: none; }
  .tutorial-pill { width: 30px; height: 30px; }
  .hud-stats { display: flex; gap: 6px; overflow-x: auto; max-width: calc(100vw - 92px); scrollbar-width: none; }
  .hud-stats::-webkit-scrollbar { display:none; }
  .hud-stats div { min-width: auto; padding: 5px 7px; border-radius: 10px; }
  .hud-stats div span { display: none; }
  .hud-stats strong { font-size: .78rem; white-space: nowrap; }
  .game-shell { padding-top: 58px; }
  .hero-metrics, .vc-dashboard, .world-dashboard { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .game-card { grid-template-columns: 38px 1fr; gap: 10px; }
  .game-card .buy-btn { grid-column: 1 / -1; width: 100%; }
  .recommendation-card { grid-template-columns: 1fr; }
}


/* Tech Titan Empire 4.0 expansion polish */
.empire-chip { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; background:rgba(73,184,255,.14); border:1px solid rgba(73,184,255,.25); font-size:.78rem; }
.game-card.danger { border-color: rgba(255, 95, 95, .35); background: linear-gradient(135deg, rgba(255,75,75,.12), rgba(15,20,34,.78)); }
.game-card.legendary { border-color: rgba(255, 214, 102, .55); box-shadow: 0 0 28px rgba(255,214,102,.12); }
.leaderboard-list .game-card { grid-template-columns: auto 1fr auto; }
.rank-medal { font-size: 1.4rem; width: 42px; height:42px; display:grid; place-items:center; border-radius:14px; background:rgba(255,255,255,.08); }
.economy-bar { height:8px; border-radius:99px; background:rgba(255,255,255,.12); overflow:hidden; margin-top:8px; }
.economy-bar span { display:block; height:100%; background:linear-gradient(90deg,#51e3a4,#49b8ff,#ffd166); border-radius:99px; transition:width .3s ease; }
.top-hud .brand h1::after { content:" 4.0"; font-size:.7rem; opacity:.65; vertical-align:super; }
@media (max-width: 720px){
  .side-menu { width:min(86vw, 330px); }
  .vc-dashboard { grid-template-columns: 1fr 1fr; }
  .game-card { gap:10px; padding:13px; }
  .game-card .icon { width:38px; height:38px; font-size:1.2rem; }
}