:root {
  --bg: #0f1115;
  --panel: #171a21;
  --text: #e8eef8;
  --muted: #9bb0c2;
  --accent: #6ac48b;
  --danger: #ff6b6b;
  --warn: #ffcc66;
  --gap: 12px;
  --radius: 10px;
  --ad-width: 0px; /* reserved space for left/right ad gutters */
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background: var(--bg);
  color: var(--text);
  padding-left: var(--ad-width);
  padding-right: var(--ad-width);
}

/* Top ad banner (728x90) */
.ad-top {
  display: flex;
  justify-content: center;
  padding: 12px 0;
}

.app-header {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  padding: 16px;
  background: var(--panel);
  position: sticky;
  top: 0;
  z-index: 10;
}
.app-title { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: .2px; align-self: center; }
.app-title .home-icon { width: 22px; height: 22px; vertical-align: -3px; margin-right: 6px; }
.stat { background: #12151c; padding: 10px 12px; border-radius: var(--radius); display:flex; flex-direction: column; gap:4px; }
.stat-label { color: var(--muted); font-size: 12px; }
.stat-value { font-weight: 700; font-size: 18px; }
/* restart button removed */
/* info button */
.info-btn { background: #2a2f3a; color: var(--text); border: 1px solid #3a4150; border-radius: 8px; cursor: pointer; }
.info-btn:hover { background: #333a48; }
.controls { display:flex; gap: 8px; align-items:center; justify-self: end; }
.controls .btn { padding: 8px 10px; }
.market-controls { display:inline-flex; gap: 6px; vertical-align: middle; margin-left: 8px; }
.market-controls .btn { padding: 4px 8px; font-size: 12px; }

.app-main { padding: 16px; display: grid; gap: 16px; }

.sections-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.section-col { background: var(--panel); padding: 10px; border-radius: var(--radius); display:flex; flex-direction: column; gap: 10px; }
.section-col h3 { margin: 0; font-size: 16px; }
.section-col h3 .section-note { color: var(--muted); font-weight: 500; font-size: 12px; margin-left: 6px; }
.cards { display: grid; gap: 10px; }

.card { background: #141820; border: 1px solid #242a36; border-radius: 10px; padding: 10px; display:flex; flex-direction: column; gap: 8px; }
.card.special { border-color: #8aa6ff; box-shadow: 0 0 0 1px rgba(138,166,255,.2) inset; }
.card.special.whitehouse { border-color: #ffd166; box-shadow: 0 0 0 2px rgba(255,209,102,.35) inset, 0 0 12px rgba(255,209,102,.25); }
.card .title { font-weight: 700; }
.card-head { display:flex; align-items:center; gap: 8px; }
.home-icon { width: 22px; height: 22px; object-fit: contain; filter: drop-shadow(0 1px 1px rgba(0,0,0,.3)); }
.meta { display:flex; gap: 8px; color: var(--muted); font-size: 12px; flex-wrap: wrap; }
.price { font-weight: 700; }
.rent { color: var(--accent); font-weight: 600; }
.danger { color: var(--danger); }
.warn { color: var(--warn); }
.pos { color: var(--accent); }
.neg { color: var(--danger); }
.card .actions { display:flex; gap: 8px; }
.btn { padding: 8px 10px; border-radius: 8px; border: 1px solid #3a4150; background: #222838; color: var(--text); cursor: pointer; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.buy { border-color: #365a44; }
.btn.sell { border-color: #5a3644; }

.owned-section, .market-section { background: var(--panel); padding: 12px; border-radius: var(--radius); }
.owned-list { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.countdown { display:inline-block; width: 120px; height: 8px; background: #10141c; border: 1px solid #2a3140; border-radius: 999px; overflow: hidden; vertical-align: middle; margin-left: 8px; font-weight: normal; }
.countdown .bar { display:block; height: 100%; background: linear-gradient(90deg, #6ac48b, #8bc7ff); width: 0%; transition: width .1s linear; }
.event-banner { margin-left: 8px; padding: 2px 8px; border-radius: 999px; border: 1px solid #3a4150; background: #1d2330; color: var(--text); }
.event-banner.hidden { display: none; }
.event-banner.bull { border-color: #2e7d54; background: rgba(46,125,84,.15); }
.event-banner.bear { border-color: #b53a3a; background: rgba(181,58,58,.15); }

@media (max-width: 1024px) {
  .sections-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-header { grid-template-columns: 1fr 1fr; grid-auto-rows: min-content; }
  .app-title { grid-column: 1 / -1; margin-bottom: 8px; }
}
@media (max-width: 640px) {
  .sections-grid { grid-template-columns: 1fr; }
  .owned-list { grid-template-columns: 1fr; }
}

.app-footer { padding: 12px; color: var(--muted); text-align: center; }

.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; z-index: 1000; }
.overlay.hidden { display: none; }
.overlay-card { background: var(--panel); border: 1px solid #2a3140; border-radius: 12px; padding: 20px; width: min(420px, 90vw); text-align: center; }
.tax-list { margin: 12px 0; text-align: left; color: var(--muted); max-height: 40vh; overflow: auto; }
.tax-list .row { display:flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-bottom: 1px dashed #2a3140; }
.tax-list .row .name { flex: 1; }
.tax-list .row .amt { white-space: nowrap; }
.final-time { color: var(--muted); }
.info-list { text-align: left; color: var(--muted); }

.toast-container { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); display:flex; flex-direction: column; gap: 8px; z-index: 20; }
.toast { background: #1d2330; color: var(--text); border: 1px solid #2e3544; padding: 10px 14px; border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.2); animation: fadein .2s ease; }
@keyframes fadein { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* Section color accents */
.card.section-poor { border-left: 4px solid #9ca3af; }
.card.section-working { border-left: 4px solid #60a5fa; }
.card.section-middle { border-left: 4px solid #f59e0b; }
.card.section-rich { border-left: 4px solid #facc15; }

.badge { padding: 2px 6px; border-radius: 999px; font-size: 11px; border: 1px solid transparent; }
.badge.section-poor { background: rgba(156,163,175,.15); border-color: rgba(156,163,175,.35); color: #cbd5e1; }
.badge.section-working { background: rgba(96,165,250,.15); border-color: rgba(96,165,250,.35); color: #cfe6ff; }
.badge.section-middle { background: rgba(245,158,11,.15); border-color: rgba(245,158,11,.35); color: #ffd79a; }
.badge.section-rich { background: rgba(250,204,21,.15); border-color: rgba(250,204,21,.35); color: #fff2a6; }