/* Demolition Block — core styles
   Aesthetic: industrial steel + amber warning lights, deep charcoal backdrops,
   IBM Plex Mono headings, Fraunces accents. Avoids purple/violet AI-slop gradients. */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,700;9..144,900&family=IBM+Plex+Mono:wght@400;500;700&family=Inter:wght@400;500;700&display=swap');

:root {
  --bg-0: #0c0d10;
  --bg-1: #14161b;
  --bg-2: #1c1f26;
  --bg-3: #262a33;
  --steel: #3a3f4a;
  --steel-2: #5a6172;
  --amber: #f5a524;
  --amber-2: #ffb747;
  --rust: #c44a26;
  --rust-2: #8b2e15;
  --concrete: #b3b0a8;
  --hazard: #ffd23f;
  --danger: #e63946;
  --green: #56a259;
  --text: #e8e6e1;
  --text-dim: #9a988f;
  --shadow: 0 12px 40px rgba(0,0,0,.55);
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .35 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: var(--bg-0); color: var(--text); font-family: 'Inter', system-ui, sans-serif; }
body { user-select: none; -webkit-user-select: none; cursor: default; }

/* Global grain overlay */
body::after {
  content: ''; position: fixed; inset: 0; background-image: var(--grain);
  opacity: .07; mix-blend-mode: overlay; pointer-events: none; z-index: 9999;
}

/* Screen system */
.screen { position: fixed; inset: 0; display: none; }
.screen.active { display: block; }
.screen.modal { display: none; align-items: center; justify-content: center; background: rgba(8,9,12,.78); backdrop-filter: blur(14px); z-index: 100; }
.screen.modal.active { display: flex; }

/* ===================== BOOT ===================== */
#boot { background: radial-gradient(ellipse at 50% 30%, #1f2128 0%, #07080a 80%); align-items: center; justify-content: center; z-index: 200; }
#boot.active { display: flex; }
.boot-inner { text-align: center; max-width: 720px; padding: 40px; }
.logo-mark {
  font-family: 'Fraunces', serif; font-weight: 900; font-size: 110px;
  letter-spacing: -6px; color: var(--amber);
  text-shadow: 0 0 60px rgba(245,165,36,.45), 0 8px 0 rgba(0,0,0,.5);
  margin-bottom: 14px;
}
.boot-title { font-family: 'IBM Plex Mono', monospace; font-size: 42px; letter-spacing: 8px; color: var(--text); margin-bottom: 6px; }
.boot-sub { font-family: 'IBM Plex Mono', monospace; font-size: 14px; letter-spacing: 6px; color: var(--text-dim); margin-bottom: 60px; font-weight: 500; }
.loading-bar { width: 520px; max-width: 90vw; height: 6px; background: var(--bg-2); border: 1px solid var(--steel); margin: 0 auto; overflow: hidden; }
.loading-fill { width: 0%; height: 100%; background: linear-gradient(90deg, var(--rust) 0%, var(--amber) 100%); transition: width .25s ease; }
.loading-text { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 4px; color: var(--text-dim); margin-top: 20px; }
.boot-credits { position: absolute; bottom: 30px; left: 0; right: 0; text-align: center; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 6px; color: var(--text-dim); }

/* ===================== MENU ===================== */
#menu { background: #050608; }
#menuBgCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.menu-overlay { position: absolute; inset: 0; background:
  linear-gradient(180deg, rgba(5,6,8,.2) 0%, rgba(5,6,8,.55) 60%, rgba(5,6,8,.9) 100%),
  linear-gradient(90deg, rgba(5,6,8,.6) 0%, rgba(5,6,8,0) 50%);
  pointer-events: none;
}
.menu-inner { position: relative; z-index: 2; width: 100%; height: 100%; padding: 60px 80px; display: flex; flex-direction: column; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 22px; }
.brand-mark {
  width: 88px; height: 88px; border: 3px solid var(--amber);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', serif; font-weight: 900; font-size: 50px; color: var(--amber);
  background: rgba(0,0,0,.55); box-shadow: var(--shadow), inset 0 0 0 2px rgba(0,0,0,.4);
}
.brand-text h1 { font-family: 'IBM Plex Mono', monospace; font-size: 56px; letter-spacing: 6px; line-height: 1; }
.brand-text p { font-family: 'IBM Plex Mono', monospace; font-size: 13px; letter-spacing: 8px; color: var(--text-dim); margin-top: 8px; }

.menu-nav { display: flex; flex-direction: column; gap: 14px; max-width: 420px; }
.menu-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: space-between;
  padding: 18px 28px; background: rgba(20,22,27,.75); color: var(--text);
  border: 1px solid var(--steel); font-family: 'IBM Plex Mono', monospace;
  font-size: 16px; letter-spacing: 4px; font-weight: 500; cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, transform .12s ease, color .18s ease;
  backdrop-filter: blur(6px);
}
.menu-btn::after { content: '›'; font-family: 'Fraunces', serif; font-size: 28px; color: var(--text-dim); transition: transform .2s ease, color .2s ease; }
.menu-btn:hover { background: rgba(40,30,15,.85); border-color: var(--amber); color: var(--amber); transform: translateX(6px); }
.menu-btn:hover::after { color: var(--amber); transform: translateX(4px); }
.menu-btn.primary { border-color: var(--amber); color: var(--amber); }
.menu-btn.primary:hover { background: var(--amber); color: var(--bg-0); }
.menu-btn.primary:hover::after { color: var(--bg-0); }
.menu-btn.danger { border-color: var(--rust-2); }
.menu-btn.danger:hover { background: var(--rust); border-color: var(--rust); color: #fff; }
.menu-btn.danger:hover::after { color: #fff; }

.menu-footer { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 5px; color: var(--text-dim); align-self: flex-end; }

/* ===================== MODAL CARDS ===================== */
.modal-card {
  background: linear-gradient(180deg, rgba(28,31,38,.96), rgba(14,16,20,.96));
  border: 1px solid var(--steel); padding: 44px 52px; max-width: 1100px; width: 92%;
  box-shadow: var(--shadow); position: relative;
}
.modal-card.small { max-width: 480px; text-align: center; }
.modal-card h2 { font-family: 'IBM Plex Mono', monospace; font-size: 28px; letter-spacing: 8px; color: var(--amber); margin-bottom: 24px; padding-bottom: 14px; border-bottom: 1px solid var(--steel); }
.modal-actions { display: flex; gap: 14px; margin-top: 28px; }
.howto-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-bottom: 30px; }
.howto-grid h3 { font-family: 'IBM Plex Mono', monospace; font-size: 13px; letter-spacing: 4px; color: var(--amber-2); margin-bottom: 10px; }
.howto-grid ul { list-style: none; }
.howto-grid li { font-size: 14px; line-height: 1.8; color: var(--text); padding-left: 14px; position: relative; }
.howto-grid li::before { content: '▸'; color: var(--rust); position: absolute; left: 0; }
.howto-grid b { color: var(--amber); font-family: 'IBM Plex Mono', monospace; }

.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 40px; margin-bottom: 10px; }
.settings-grid label { display: flex; align-items: center; justify-content: space-between; font-family: 'IBM Plex Mono', monospace; font-size: 13px; letter-spacing: 2px; color: var(--text); padding: 14px 16px; background: rgba(0,0,0,.3); border: 1px solid var(--steel); }
.settings-grid input[type=range] { width: 180px; accent-color: var(--amber); }
.settings-grid input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--amber); }

.credits-card { text-align: center; }
.credits-roll p { font-size: 15px; line-height: 2; color: var(--text); font-family: 'IBM Plex Mono', monospace; letter-spacing: 1px; }
.credits-roll p.big { font-family: 'Fraunces', serif; font-weight: 900; font-size: 38px; color: var(--amber); letter-spacing: 2px; margin: 10px 0 20px; }
.credits-roll p.thanks { color: var(--text-dim); font-style: italic; margin-top: 24px; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--steel); }
::-webkit-scrollbar-track { background: var(--bg-1); }