@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root { --bg:#0c1019; --surface:#151b27; --surface2:#1c2433; --line:rgba(255,255,255,.10); --text:#f8f8f4; --muted:#8e97a8; --acid:#d9ff3f; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; color:var(--text); background:radial-gradient(circle at 18% 0%,#26324a 0,transparent 28rem),var(--bg); font-family:Manrope,Arial,sans-serif; }
button,input { font:inherit; }
button { color:inherit; }
.header { height:76px; max-width:1400px; margin:auto; padding:0 32px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { color:var(--text); text-decoration:none; font-weight:800; letter-spacing:-1px; font-size:20px; display:flex; align-items:center; gap:9px; }
.brand-mark { width:29px; height:29px; display:grid; place-items:center; border-radius:8px; background:var(--acid); color:#0c1019; font-family:"DM Mono"; font-weight:500; transform:rotate(-8deg); }
.header-note,.eyebrow,.lineup-count,.choice-hint { font:500 11px "DM Mono",monospace; color:var(--muted); text-transform:uppercase; letter-spacing:.12em; }
.header-note { color:#abb4c3; }
main { max-width:1400px; margin:auto; padding:0 32px 80px; }
.hero { padding:20px 0 16px; max-width:1050px; }
.eyebrow { margin:0 0 13px; color:var(--acid); }
.hero h1 { margin:0; font-size:clamp(48px,5.5vw,78px); letter-spacing:-.075em; line-height:.94; font-weight:800; }
.hero h1 em { color:var(--acid); font-style:normal; }
.hero-copy { display:none; }
.catalog { padding-top:16px; border-top:1px solid var(--line); }
.map-tabs { display:flex; gap:8px; overflow:auto; padding-bottom:15px; scrollbar-width:none; }
.map-tabs::-webkit-scrollbar { display:none; }
.map-tab { flex:none; cursor:pointer; padding:10px 17px; background:transparent; border:1px solid var(--line); border-radius:99px; font-weight:700; font-size:13px; transition:.2s; }
.map-tab:hover,.map-tab.active { background:var(--acid); border-color:var(--acid); color:#10150e; }
.catalog-heading,.lineup-toolbar { display:flex; justify-content:space-between; align-items:end; margin-bottom:13px; }
.catalog-heading .eyebrow,.lineup-toolbar .eyebrow { margin-bottom:5px; }
.catalog h2,.lineup-dialog h2 { margin:0; font-size:clamp(28px,3.2vw,40px); letter-spacing:-.055em; }
.choice-hint,.lineup-count { margin-bottom:7px; }
.grenade-types { height:calc(100vh - 360px); min-height:300px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:minmax(300px,1fr); gap:12px; }
.grenade-type { position:relative; min-height:150px; overflow:hidden; border:1px solid var(--line); border-radius:16px; padding:18px; color:var(--type-color); background:linear-gradient(135deg,color-mix(in srgb,var(--type-color) 12%,#151b27),#111722 70%); text-align:left; cursor:pointer; isolation:isolate; animation:appear .45s ease both; animation-delay:calc(var(--type-index) * .07s); transition:transform .25s,border-color .25s,box-shadow .25s; }
.grenade-type::before { content:""; position:absolute; width:280px; height:280px; right:-70px; top:-90px; border-radius:50%; background:var(--type-color); opacity:.06; filter:blur(3px); }
.grenade-type:hover { transform:translateY(-4px); border-color:color-mix(in srgb,var(--type-color) 70%,transparent); box-shadow:0 20px 50px rgba(0,0,0,.28); }
.type-meta { position:absolute; z-index:2; left:18px; right:18px; top:16px; display:flex; justify-content:space-between; color:color-mix(in srgb,var(--type-color) 75%,white); font:500 9px "DM Mono",monospace; text-transform:uppercase; letter-spacing:.1em; }
.grenade-illustration { position:absolute; z-index:1; width:min(38%,190px); height:72%; right:9%; top:10%; display:grid; place-items:center; color:var(--type-color); transition:transform .35s ease; }
.grenade-illustration svg { width:100%; height:100%; filter:drop-shadow(0 18px 28px rgba(0,0,0,.28)); }
.grenade-type:hover .grenade-illustration { transform:scale(1.06) rotate(-2deg); }
.type-label { position:absolute; z-index:2; left:18px; bottom:17px; display:grid; gap:3px; }
.type-label strong { color:var(--text); font-size:clamp(25px,2.5vw,36px); line-height:1; letter-spacing:-.06em; }
.type-label small { color:color-mix(in srgb,var(--type-color) 65%,#aab4c5); font-size:13px; font-weight:600; }
.type-arrow { position:absolute; z-index:2; right:18px; bottom:17px; width:38px; height:38px; display:grid; place-items:center; border-radius:50%; background:var(--type-color); color:#10151d; font-size:18px; transition:transform .25s; }
.grenade-type:hover .type-arrow { transform:translateX(4px); }
.back-button { margin:3px 0 28px; padding:0; color:#b3bdcc; background:none; border:0; cursor:pointer; font-size:13px; font-weight:700; }
.back-button:hover { color:var(--acid); }
.search { height:54px; max-width:460px; margin-bottom:24px; display:flex; align-items:center; gap:10px; padding:0 17px; border:1px solid var(--line); border-radius:12px; background:rgba(12,16,25,.7); color:var(--muted); }
.search:focus-within { border-color:var(--acid); }
.search span { font:30px/1 Arial; transform:rotate(-15deg); }
.search input { width:100%; background:transparent; border:0; outline:0; color:var(--text); }
.search input::placeholder { color:#727c8d; }
.lineups { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.lineup-card { position:relative; overflow:hidden; min-height:315px; border:0; padding:0; border-radius:14px; background:var(--surface); text-align:left; cursor:pointer; isolation:isolate; animation:appear .45s ease both; animation-delay:calc(var(--card-index) * .08s); }
.lineup-card img { width:100%; height:100%; min-height:315px; object-fit:cover; display:block; transition:transform .5s ease; filter:saturate(.8); }
.lineup-card:hover img { transform:scale(1.06); }
.card-scrim { position:absolute; inset:0; background:linear-gradient(180deg,rgba(5,8,13,.07) 20%,rgba(5,8,13,.86)); z-index:1; }
.card-number { position:absolute; top:18px; left:19px; z-index:2; font:12px "DM Mono"; color:var(--acid); }
.card-info { position:absolute; left:19px; bottom:18px; z-index:2; display:grid; gap:4px; }
.card-info strong { font-size:19px; letter-spacing:-.04em; }
.card-info small { color:#c1c8d1; font:11px "DM Mono"; text-transform:uppercase; letter-spacing:.08em; }
.arrow { position:absolute; z-index:2; right:18px; bottom:18px; width:37px; height:37px; display:grid; place-items:center; border-radius:50%; background:var(--acid); color:#11170e; font-size:19px; transition:transform .2s; }
.lineup-card:hover .arrow { transform:rotate(45deg); }
.empty { grid-column:1/-1; padding:50px; color:var(--muted); border:1px dashed var(--line); border-radius:14px; text-align:center; }
.empty p { color:var(--text); margin:0 0 6px; }
.empty span { font-size:14px; }
.lineup-dialog { width:min(1080px,calc(100% - 32px)); max-height:90vh; padding:35px; border:1px solid var(--line); border-radius:18px; color:var(--text); background:#121823; box-shadow:0 24px 80px #000a; }
.lineup-dialog::backdrop { background:rgba(0,0,0,.72); backdrop-filter:blur(5px); }
.lineup-dialog .eyebrow { margin-bottom:8px; }
.close { position:absolute; top:15px; right:17px; cursor:pointer; width:36px; height:36px; padding:0; border:1px solid var(--line); border-radius:50%; background:#202938; font-size:25px; line-height:1; }
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:27px; }
.steps figure { position:relative; margin:0; overflow:hidden; border-radius:12px; background:#0b1018; border:1px solid var(--line); }
.steps img,.steps video { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.steps figcaption { padding:12px 14px; color:#dce0e7; font-size:14px; font-weight:700; }
.step-number { position:absolute; z-index:1; top:10px; left:10px; width:26px; height:26px; display:grid; place-items:center; background:var(--acid); border-radius:50%; color:#11160d; font:12px "DM Mono"; }
.source-link { display:inline-flex; margin-top:15px; color:var(--acid); font:500 12px "DM Mono",monospace; text-decoration:none; letter-spacing:.04em; }
.source-link:hover { text-decoration:underline; }
@keyframes appear { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:800px) {
  .header,main { padding-left:18px; padding-right:18px; }
  .header { height:64px; }
  .header-note,.choice-hint { display:none; }
  .hero { padding:30px 0 24px; }
  .hero h1 { font-size:clamp(47px,14vw,72px); }
  .grenade-types { height:auto; min-height:0; grid-template-columns:1fr; grid-template-rows:none; }
  .grenade-type { min-height:220px; }
  .grenade-illustration { width:45%; right:5%; }
  .lineups,.steps { grid-template-columns:1fr; }
  .lineup-card,.lineup-card img { min-height:255px; }
  .lineup-dialog { padding:28px 16px 16px; }
  .lineup-toolbar { align-items:center; }
  .lineup-count { font-size:9px; }
}