/* Deal Estate shared styles */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Share+Tech+Mono&display=swap');

:root {
  --bg: #0b0f1a;
  --panel-bg: #10182a;
  --bg-raised: #162033;
  --border: #38546f;
  --border-dim: #2a3e54;
  --dim: #556984;
  --gold: #ffd84a;
  --gold-light: #fff0a3;
  --gold-dim: #d4b44b;
  --cream: #fff3d6;
  --muted: #9fb0c4;
  --green: #4dff8c;
  --orange: #ff9f3f;
  --red: #ff5c6c;
  --purple: #b87cff;
  --blue: #58c8ff;
  --font-display: 'Press Start 2P', monospace;
  --font-body: 'Share Tech Mono', monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background:
    radial-gradient(circle at 50% 12%, rgba(88, 200, 255, 0.18), transparent 22%),
    linear-gradient(180deg, #24384f 0%, #1c2d41 100%);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  min-height: 100vh;
  overflow-x: hidden;
}

.bg-cards { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.bg-card {
  position: absolute;
  width: 90px;
  height: 120px;
  border: 2px solid;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  opacity: 0.18;
  font-family: var(--font-display);
}
.bg-card-name { font-size: 7px; text-align: center; line-height: 1.6; padding: 0 6px; }
.bg-card-type { font-size: 5px; letter-spacing: 0.1em; opacity: 0.8; }
.bg-card-score { font-size: 14px; margin-top: 2px; }
.bg-card-cross { font-size: 22px; opacity: 0.7; }
.bg-card:nth-child(1) { top: 8%; left: 2%; transform: rotate(-18deg); border-color: var(--purple); color: var(--purple); background: rgba(184, 124, 255, 0.10); }
.bg-card:nth-child(2) { top: 30%; left: 0%; transform: rotate(8deg); border-color: var(--green); color: var(--green); background: rgba(77, 255, 140, 0.10); }
.bg-card:nth-child(3) { top: 55%; left: 3%; transform: rotate(-12deg); border-color: var(--red); color: var(--red); background: rgba(255, 92, 108, 0.10); }
.bg-card:nth-child(4) { top: 76%; left: -1%; transform: rotate(15deg); border-color: var(--gold); color: var(--gold); background: rgba(255, 216, 74, 0.10); }
.bg-card:nth-child(5) { top: 5%; right: 1%; transform: rotate(14deg); border-color: var(--gold); color: var(--gold); background: rgba(255, 216, 74, 0.10); }
.bg-card:nth-child(6) { top: 32%; right: 0%; transform: rotate(-10deg); border-color: var(--gold-dim); color: var(--gold-light); background: rgba(255, 240, 163, 0.08); }
.bg-card:nth-child(7) { top: 60%; right: 2%; transform: rotate(20deg); border-color: var(--blue); color: var(--blue); background: rgba(88, 200, 255, 0.10); }
.bg-card:nth-child(8) { top: 80%; right: -1%; transform: rotate(-8deg); border-color: var(--border-dim); color: var(--muted); background: rgba(16, 24, 42, 0.68); }

.rule-top, .rule-bottom {
  position: fixed;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 10;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--gold-dim) 20%, var(--gold-dim) 80%, transparent);
}
.rule-top { top: 0; }
.rule-bottom { bottom: 0; }

.corner { position: fixed; width: 40px; height: 40px; z-index: 10; pointer-events: none; }
.corner::before, .corner::after { content: ''; position: absolute; background: var(--gold-dim); }
.corner::before { width: 100%; height: 2px; top: 0; left: 0; }
.corner::after { width: 2px; height: 100%; top: 0; left: 0; }
.corner.tl { top: 12px; left: 12px; }
.corner.tr { top: 12px; right: 12px; transform: scaleX(-1); }
.corner.bl { bottom: 12px; left: 12px; transform: scaleY(-1); }
.corner.br { bottom: 12px; right: 12px; transform: scale(-1); }

.site-wrapper { position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 100vh; }
.wrap { max-width: 860px; margin: 0 auto; padding: 0 28px; }
.page-content { padding: 52px 0 80px; }
.page-header { text-align: center; margin-bottom: 48px; }
.eyebrow {
  font-family: var(--font-display);
  font-size: 7px;
  color: var(--gold);
  letter-spacing: 0.2em;
  margin-bottom: 16px;
}
.page-header h1 {
  font-family: var(--font-display);
  font-size: clamp(16px, 3vw, 24px);
  color: var(--cream);
  line-height: 1.7;
  margin-bottom: 16px;
}
.gold-rule {
  width: 48px;
  height: 1px;
  background: var(--gold-dim);
  margin: 16px auto 20px;
}
.subtitle {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--muted);
  line-height: 1.7;
  margin: 0 auto;
}

nav { border-bottom: 1px solid rgba(88, 200, 255, 0.16); padding: 18px 0; background: rgba(54, 77, 104, 0.52); backdrop-filter: blur(8px); }
.nav-inner { max-width: 860px; margin: 0 auto; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.nav-logo { font-family: var(--font-display); color: var(--gold); font-size: 14px; letter-spacing: 0.05em; text-decoration: none; }
.nav-links { list-style: none; display: flex; gap: 28px; }
.nav-links a { font-family: var(--font-display); font-size: 9px; color: var(--muted); letter-spacing: 0.1em; text-decoration: none; }
.nav-links a:hover, .nav-links a.active { color: var(--cream); }
.nav-links a.active { border-bottom: 1px solid var(--gold); padding-bottom: 2px; }

.btn {
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 0.12em;
  padding: 16px 24px;
  border: 2px solid;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  display: block;
  transition: background 0.1s;
}
.btn-green { background: rgba(88, 200, 255, 0.10); border-color: rgba(88, 200, 255, 0.56); color: var(--cream); }
.btn-green:hover { background: rgba(88, 200, 255, 0.16); text-decoration: none; }
.btn-gold { background: rgba(255, 216, 74, 0.08); border-color: rgba(255, 216, 74, 0.68); color: var(--gold); }
.btn-gold:hover { background: rgba(255, 216, 74, 0.14); text-decoration: none; }
.btn-dim { background: rgba(255, 255, 255, 0.03); border-color: rgba(88, 200, 255, 0.30); color: var(--muted); }
.btn-dim:hover { border-color: var(--cream); color: var(--cream); text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--font-display); }
h2 { font-size: 14px; color: var(--cream); line-height: 1.7; margin-bottom: 24px; }
h3 { font-size: 10px; color: var(--gold); line-height: 1.7; margin-bottom: 10px; }
p { font-family: var(--font-body); font-size: 16px; color: var(--muted); line-height: 1.7; margin-bottom: 14px; }
p:last-child { margin-bottom: 0; }
a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-light); }

.section-label { font-family: var(--font-display); font-size: 7px; color: var(--gold-dim); letter-spacing: 0.2em; margin-bottom: 18px; }
.panel-divider { border: none; border-top: 1px solid var(--dim); margin: 22px 0; }
.tag {
  font-family: var(--font-display);
  font-size: 6px;
  letter-spacing: 0.1em;
  padding: 4px 8px;
  border: 1px solid var(--dim);
  color: var(--muted);
}
.tag.gold { border-color: var(--gold-dim); color: var(--gold); }

.panel-gold {
  border: 2px solid rgba(88, 200, 255, 0.26);
  background: linear-gradient(180deg, rgba(92, 120, 154, 0.42), rgba(54, 77, 104, 0.48));
  box-shadow: 0 0 48px rgba(88, 200, 255, 0.08), inset 0 0 70px rgba(255, 255, 255, 0.05);
}

footer { border-top: 1px solid rgba(88, 200, 255, 0.14); padding: 24px 28px; background: rgba(54, 77, 104, 0.50); backdrop-filter: blur(8px); }
.footer-inner { max-width: 860px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; }
footer span { font-family: var(--font-body); font-size: 16px; color: var(--dim); }
.footer-links { list-style: none; display: flex; gap: 24px; }
.footer-links a { font-family: var(--font-body); font-size: 16px; color: var(--muted); text-decoration: none; }
.footer-links a:hover { color: var(--cream); }

@media (max-width: 600px) {
  .nav-links { display: none; }
  .bg-card:nth-child(n + 3) { display: none; }
}