/* CS2list.net / Terminal Server Index — frontend style system. */
:root { --bg:#0a0d0d; --surface:#111716; --surface-2:#151c1a; --line:rgba(211,227,215,.13); --line-strong:rgba(211,227,215,.23); --text:#f0f4ed; --muted:#849188; --dim:#5e6b62; --lime:#b6f36b; --lime-dark:#0e160d; --cyan:#7dd3fc; --amber:#fbbf24; --red:#fb7185; --mono:"IBM Plex Mono",monospace; --display:"Barlow Condensed",sans-serif; --body:"Space Grotesk",sans-serif; --ease:cubic-bezier(.23,1,.32,1); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; min-width:320px; color:var(--text); background:var(--bg); font:13px var(--body); } button,input,select { font:inherit; } button,a,select,input[type=checkbox],input[type=range] { cursor:pointer; } button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible { outline:2px solid var(--lime); outline-offset:3px; } a { color:inherit; } .noise-layer { position:fixed; inset:0; z-index:100; pointer-events:none; opacity:.03; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E"); }
.topbar { position:sticky; top:0; z-index:20; border-bottom:1px solid var(--line); background:rgba(10,13,13,.91); backdrop-filter:blur(18px); } .topbar-inner { max-width:1440px; min-height:72px; display:flex; align-items:center; gap:2.7rem; padding:0 3.5rem; margin:auto; } .brand { display:inline-flex; align-items:center; gap:.68rem; text-decoration:none; flex-shrink:0; } .brand-mark { width:31px; height:31px; position:relative; display:block; border:1px solid rgba(182,243,107,.65); background:rgba(182,243,107,.08); overflow:hidden; transform:rotate(45deg); } .brand-mark::before,.brand-mark::after,.brand-mark i,.brand-mark b { content:""; position:absolute; display:block; background:var(--lime); } .brand-mark::before { width:10px; height:16px; left:9px; top:6px; clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); } .brand-mark::after { width:4px; height:12px; left:14px; top:9px; background:var(--bg); transform:rotate(45deg); } .brand-mark i { width:6px; height:2px; left:7px; top:14px; background:var(--lime); } .brand-mark b { display:none; } .brand-name { font:700 21px var(--display); letter-spacing:-.035em; } .brand-name span { color:var(--lime); } .brand-name small { color:#6d7b71; font:500 10px var(--mono); letter-spacing:0; margin-left:2px; } .primary-nav { display:flex; align-items:stretch; gap:1.45rem; height:72px; } .primary-nav a { position:relative; display:inline-flex; align-items:center; color:#8c998e; font-size:12px; text-decoration:none; transition:color .16s ease; } .primary-nav a:hover,.primary-nav a.active { color:var(--text); } .primary-nav a.active::after { content:""; position:absolute; right:0; bottom:0; left:0; height:2px; background:var(--lime); } .top-actions { display:flex; align-items:center; gap:.55rem; margin-left:auto; } .top-icon { width:34px; height:34px; display:grid; place-items:center; border:1px solid transparent; color:#a4b1a7; background:transparent; } .top-icon:hover { color:var(--lime); border-color:var(--line-strong); background:rgba(255,255,255,.03); } .refresh-icon { display:inline-block; font-size:22px; line-height:1; font-family:Arial,sans-serif; transition:transform .25s var(--ease); } .top-icon:hover .refresh-icon { transform:rotate(-45deg); } .top-cta,.outline-cta { display:inline-flex; align-items:center; justify-content:center; gap:.6rem; min-height:37px; padding:0 .9rem; color:var(--lime-dark); border:1px solid var(--lime); background:var(--lime); font-size:11px; font-weight:700; text-decoration:none; transition:transform .16s ease,background .16s ease,box-shadow .16s ease; } .top-cta:hover,.outline-cta:hover { background:#c7fd83; box-shadow:0 0 0 5px rgba(182,243,107,.08); transform:translateY(-1px); } .top-cta span,.outline-cta span { font-size:16px; line-height:0; } .mobile-only,.mobile-nav { display:none; }
.hero { position:relative; display:grid; grid-template-columns:minmax(380px,.85fr) minmax(480px,1.15fr); align-items:center; gap:5rem; max-width:1440px; min-height:530px; margin:auto; padding:5.3rem 3.5rem 5.5rem; overflow:hidden; } .hero-grid-line { position:absolute; width:570px; height:570px; top:-200px; right:-120px; border:1px solid rgba(182,243,107,.08); border-radius:50%; } .hero-grid-line::before,.hero-grid-line::after { content:""; position:absolute; inset:50px; border:1px solid rgba(182,243,107,.06); border-radius:50%; } .hero-grid-line::after { inset:120px; } .hero-copy { position:relative; z-index:1; } .eyebrow,.section-label,.filter-title,.footer-label { color:#8c9a90; font:10px var(--mono); letter-spacing:.12em; } .eyebrow { display:flex; align-items:center; gap:.45rem; margin-bottom:1.4rem; } .live-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 3px rgba(182,243,107,.12); } .hero h1 { margin:0; font:800 clamp(4.2rem,7vw,7.2rem)/.82 var(--display); letter-spacing:-.045em; text-transform:uppercase; } .hero h1 em,.signal-section h2 em,.about-strip h2 em { color:var(--lime); font-style:normal; } .hero-copy > p { max-width:405px; margin:1.55rem 0 0; color:#9aa89d; font-size:15px; line-height:1.55; } .hero-stats { display:flex; gap:1.5rem; margin-top:2.4rem; } .hero-stats div { display:flex; flex-direction:column; gap:.27rem; padding-right:1.5rem; border-right:1px solid var(--line); } .hero-stats div:last-child { border:0; padding:0; } .hero-stats strong { color:var(--text); font:600 19px var(--mono); letter-spacing:-.08em; } .hero-stats span { color:#6e7c72; font:9px var(--mono); text-transform:uppercase; } .hero-console { position:relative; min-height:355px; padding:1.1rem; border:1px solid var(--line-strong); background:linear-gradient(145deg,#111a16,#0d1111 65%); box-shadow:0 25px 75px rgba(0,0,0,.27); } .hero-console::before { content:""; position:absolute; inset:15px; border:1px solid rgba(182,243,107,.08); pointer-events:none; } .console-top,.console-footer,.console-feed { position:relative; z-index:1; display:flex; justify-content:space-between; align-items:center; font:9px var(--mono); letter-spacing:.1em; } .console-top { color:#8a998d; padding-bottom:.9rem; border-bottom:1px solid var(--line); } .console-status { display:inline-flex; align-items:center; gap:.38rem; color:var(--lime); } .console-status i { width:5px; height:5px; background:var(--lime); border-radius:50%; } .console-radar { position:absolute; top:66px; right:12%; bottom:58px; left:12%; overflow:hidden; border:1px solid rgba(182,243,107,.18); background:radial-gradient(circle at center,rgba(182,243,107,.08),transparent 49%),linear-gradient(rgba(182,243,107,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(182,243,107,.07) 1px,transparent 1px); background-size:auto,40px 40px,40px 40px; } .radar-ring { position:absolute; top:50%; left:50%; border:1px solid rgba(182,243,107,.22); border-radius:50%; transform:translate(-50%,-50%); } .r1 { width:30%; aspect-ratio:1; }.r2 { width:55%; aspect-ratio:1; }.r3 { width:82%; aspect-ratio:1; } .radar-sweep { position:absolute; top:50%; left:50%; width:48%; height:1px; transform-origin:left center; background:linear-gradient(90deg,var(--lime),transparent); animation:sweep 4s linear infinite; } .radar-sweep::after { content:""; position:absolute; right:0; top:-80px; width:90px; height:160px; background:linear-gradient(90deg,rgba(182,243,107,.13),transparent); transform:rotate(38deg); transform-origin:right center; } .radar-origin { position:absolute; top:calc(50% - 3px); left:calc(50% - 3px); width:6px; height:6px; border:1px solid var(--lime); background:var(--lime); border-radius:50%; } .radar-pip { position:absolute; width:5px; height:5px; background:var(--lime); border-radius:50%; box-shadow:0 0 11px var(--lime); }.p1 { top:24%; left:27%; }.p2 { top:28%; right:21%; }.p3 { bottom:24%; left:19%; }.p4 { right:27%; bottom:20%; background:var(--cyan); box-shadow:0 0 11px var(--cyan); } .console-feed { position:absolute; right:1.1rem; bottom:54px; left:1.1rem; padding:.65rem .85rem; color:#829187; border:1px solid rgba(182,243,107,.13); background:rgba(10,16,13,.78); } .console-feed strong { color:var(--lime); font-weight:500; }.feed-bars { display:flex; align-items:end; gap:3px; height:17px; }.feed-bars i { width:4px; background:var(--lime); opacity:.35; }.feed-bars i:nth-child(1){height:35%}.feed-bars i:nth-child(2){height:60%}.feed-bars i:nth-child(3){height:45%}.feed-bars i:nth-child(4){height:80%}.feed-bars i:nth-child(5){height:58%}.feed-bars i:nth-child(6){height:72%}.feed-bars i:nth-child(7){height:94%}.feed-bars i:nth-child(8){height:67%}.feed-bars i:nth-child(9){height:100%;opacity:1}.console-footer { position:absolute; right:1.1rem; bottom:1.1rem; left:1.1rem; padding-top:.7rem; color:#65746b; border-top:1px solid var(--line); }.console-footer b { color:#d4e1d4; font-weight:500; }
.directory { max-width:1440px; margin:auto; padding:5.5rem 3.5rem 5.8rem; border-top:1px solid var(--line); }.section-head { display:flex; justify-content:space-between; align-items:end; gap:2rem; }.section-label { margin-bottom:.8rem; color:var(--lime); }.section-head h2,.signal-section h2,.about-strip h2 { margin:0; font:700 clamp(3rem,5vw,5.25rem)/.85 var(--display); letter-spacing:-.03em; text-transform:uppercase; }.section-head h2 span { color:var(--lime); }.section-head-meta { display:flex; align-items:center; gap:.75rem; color:#647168; font:10px var(--mono); }.live-state { display:inline-flex; align-items:center; gap:.42rem; color:#9caf9f; }.slash { color:#445149; }.directory-toolbar { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-top:3.4rem; padding-bottom:1rem; border-bottom:1px solid var(--line); }.search-box { min-width:240px; max-width:440px; flex:1; display:flex; align-items:center; gap:.6rem; height:42px; padding:0 .8rem; border:1px solid var(--line); background:rgba(255,255,255,.025); color:#859287; }.search-box:focus-within { border-color:rgba(182,243,107,.62); box-shadow:0 0 0 3px rgba(182,243,107,.08); }.search-box > span { font-size:22px; line-height:0; }.search-box input { width:100%; border:0; outline:0; color:var(--text); background:transparent; font:12px var(--body); }.search-box input::placeholder { color:#657269; }.search-box kbd { padding:3px 5px; color:#66756a; border:1px solid var(--line); font:9px var(--mono); white-space:nowrap; }.toolbar-actions { display:flex; align-items:center; gap:.5rem; }.filter-button,.sort-box,.view-toggle button { display:inline-flex; align-items:center; gap:.45rem; min-height:35px; color:#909d93; border:1px solid transparent; background:transparent; font:11px var(--mono); }.filter-button { padding:0 .65rem; border-color:var(--line); }.filter-button:hover { color:var(--lime); border-color:rgba(182,243,107,.45); }.filter-button b { display:grid; place-items:center; min-width:16px; height:16px; color:var(--lime-dark); background:var(--lime); font:9px var(--mono); font-weight:600; }.filter-icon { font-size:18px; line-height:0; transform:rotate(90deg); }.sort-box { padding:0 .1rem 0 .6rem; color:#768379; }.sort-box select { appearance:none; max-width:125px; border:0; outline:0; color:#cbd7cc; background:transparent; font:11px var(--mono); }.sort-box > span:last-child { margin-left:-.7rem; pointer-events:none; }.view-toggle { display:flex; padding-left:.45rem; border-left:1px solid var(--line); }.view-toggle button { width:31px; justify-content:center; min-height:31px; font-size:17px; }.view-toggle button:hover,.view-toggle button.active { color:var(--lime); background:rgba(182,243,107,.08); }.directory-layout { display:grid; grid-template-columns:210px minmax(0,1fr); gap:2rem; margin-top:1.5rem; }.filters { padding-right:1.4rem; border-right:1px solid var(--line); }.filter-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.6rem; color:var(--lime); font:10px var(--mono); }.filter-head button { padding:0; color:#68766d; border:0; background:transparent; font:10px var(--mono); }.filter-head button:hover { color:var(--text); }.filter-block { margin-bottom:2rem; }.filter-title { display:block; margin-bottom:.75rem; color:#647168; font-size:9px; }.filter-block > select { width:100%; height:35px; padding:0 .55rem; color:#cbd7cc; border:1px solid var(--line); outline:0; background:#101614; font:11px var(--mono); }.filter-block > select:focus { border-color:rgba(182,243,107,.55); }.check-list { display:flex; flex-direction:column; gap:.28rem; }.check-list label { display:flex; align-items:center; gap:.52rem; padding:.32rem 0; color:#8d9a91; font-size:12px; }.check-list label:hover { color:var(--text); }.check-list input { position:absolute; opacity:0; }.fake-check { width:13px; height:13px; display:inline-block; border:1px solid #5c6b61; }.check-list input:checked + .fake-check { border-color:var(--lime); background:var(--lime); box-shadow:inset 0 0 0 3px #0f1610; }.check-list b { margin-left:auto; color:#5e6b62; font:10px var(--mono); font-weight:400; }.mode-pills { display:flex; flex-wrap:wrap; gap:.35rem; }.mode-pills button { padding:.38rem .45rem; color:#7f8d83; border:1px solid var(--line); background:transparent; font:9px var(--mono); }.mode-pills button:hover,.mode-pills button.active { color:var(--lime); border-color:rgba(182,243,107,.5); background:rgba(182,243,107,.06); }.player-range-row { display:flex; justify-content:space-between; color:#a5b1a6; font:10px var(--mono); }.player-range-row span:last-child { color:var(--lime); }.filter-block input[type=range] { width:100%; margin-top:.75rem; accent-color:var(--lime); }.filter-tip { display:flex; gap:.55rem; padding:.75rem; border:1px solid rgba(182,243,107,.16); background:rgba(182,243,107,.035); color:var(--lime); }.filter-tip > span { font-size:20px; }.filter-tip p { margin:0; color:#748278; font:9px/1.5 var(--mono); }.filter-tip strong { color:#d5e5d2; font-weight:500; }.results-note,.load-row { display:flex; justify-content:space-between; align-items:center; color:#718078; font:10px var(--mono); }.results-note { margin-bottom:.85rem; }.results-note > span { display:inline-flex; align-items:center; gap:.4rem; }.results-note .live-dot { width:5px; height:5px; }.results-note button { display:inline-flex; align-items:center; gap:.35rem; padding:0; color:#7b8b80; border:0; background:transparent; font:10px var(--mono); }.results-note button:hover,.results-note button.active { color:var(--lime); }.results-note button b { display:grid; place-items:center; width:15px; height:15px; color:var(--lime-dark); background:#6c7b70; font-size:8px; font-weight:500; }.results-note button.active b { background:var(--lime); }.server-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }.server-grid.list-mode { display:flex; flex-direction:column; gap:.55rem; }.server-card { position:relative; min-width:0; overflow:hidden; border:1px solid var(--line); background:var(--surface); transition:transform .18s var(--ease),border-color .18s ease,box-shadow .18s ease; }.server-card:hover { z-index:1; transform:translateY(-3px); border-color:rgba(182,243,107,.48); box-shadow:0 17px 38px rgba(0,0,0,.22); }.server-card::before { content:""; position:absolute; top:0; right:0; left:0; height:2px; background:var(--lime); transform:scaleX(0); transform-origin:left; transition:transform .18s var(--ease); }.server-card:hover::before { transform:scaleX(1); }.server-card-head { display:flex; justify-content:space-between; gap:.6rem; min-height:76px; padding:.85rem .85rem .7rem; border-bottom:1px solid var(--line); }.server-main { min-width:0; }.server-name { display:block; overflow:hidden; color:#eef4ec; font-size:13px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }.server-sub { display:flex; align-items:center; gap:.35rem; margin-top:.35rem; color:#718077; font:9px var(--mono); }.region-flag { display:inline-grid; place-items:center; min-width:20px; height:15px; padding:0 2px; color:#c9d8cc; border:1px solid var(--line); background:#1c2721; font:8px var(--mono); }.favorite-button { width:25px; height:25px; display:grid; place-items:center; flex:0 0 auto; padding:0; color:#7e8c81; border:1px solid var(--line); background:transparent; font-size:18px; line-height:1; }.favorite-button:hover,.favorite-button.active { color:var(--lime); border-color:rgba(182,243,107,.45); }.server-card-map { position:relative; min-height:86px; display:flex; align-items:end; padding:.7rem .85rem; overflow:hidden; background:linear-gradient(145deg,rgba(125,211,252,.08),transparent 65%),linear-gradient(90deg,#19241e,#101614); }.server-card-map::after { content:""; position:absolute; width:110px; height:110px; right:-20px; top:-42px; border:1px solid rgba(182,243,107,.15); transform:rotate(45deg); }.server-card-map span { position:relative; z-index:1; color:#b6c8b9; font:10px var(--mono); }.server-card-map strong { position:absolute; right:.85rem; bottom:.63rem; z-index:1; color:rgba(182,243,107,.65); font:700 20px var(--display); letter-spacing:.03em; text-transform:uppercase; }.server-card-body { padding:.8rem .85rem .85rem; }.player-line { display:flex; align-items:end; justify-content:space-between; gap:.5rem; }.player-line strong { color:#edf4ec; font:600 18px var(--mono); letter-spacing:-.08em; }.player-line strong span { color:#6c7a70; font-size:10px; letter-spacing:0; }.player-meter { display:flex; align-items:end; gap:2px; height:18px; }.player-meter i { display:block; width:4px; background:rgba(182,243,107,.27); }.player-meter i:nth-child(1){height:25%}.player-meter i:nth-child(2){height:45%}.player-meter i:nth-child(3){height:65%}.player-meter i:nth-child(4){height:78%}.player-meter i:nth-child(5){height:100%;background:var(--lime)}.server-meta { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; margin-top:.75rem; padding-top:.75rem; border-top:1px solid var(--line); }.server-meta span { display:block; color:#65746a; font:8px var(--mono); text-transform:uppercase; }.server-meta b { display:block; margin-top:.24rem; color:#bbc9bd; font:10px var(--mono); font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.server-meta b.good { color:var(--lime); }.server-actions { display:flex; gap:.45rem; margin-top:.8rem; }.join-button,.copy-button { display:inline-flex; align-items:center; justify-content:center; gap:.35rem; min-height:32px; border:1px solid var(--line); font:10px var(--mono); transition:all .16s ease; }.join-button { flex:1; color:var(--lime-dark); border-color:var(--lime); background:var(--lime); font-weight:600; }.join-button:hover { background:#c9ff87; }.copy-button { width:33px; color:#9dac9e; background:transparent; font-size:15px; }.copy-button:hover { color:var(--lime); border-color:rgba(182,243,107,.45); }.server-card.list-card { display:grid; grid-template-columns:minmax(200px,1.35fr) 100px 110px 90px 150px auto; align-items:center; gap:1rem; padding:.7rem .85rem; }.list-card .server-card-head,.list-card .server-card-map,.list-card .server-card-body { min-height:0; padding:0; border:0; background:none; }.list-card .server-card-head { display:block; }.list-card .server-card-map { display:block; }.list-card .server-card-map::after,.list-card .server-card-map span { display:none; }.list-card .server-card-map strong { position:static; color:#c1d0c2; font:11px var(--mono); }.list-card .server-card-body { display:contents; }.list-card .player-line,.list-card .server-meta,.list-card .server-actions { margin:0; padding:0; border:0; }.list-card .server-meta { display:contents; }.list-card .server-meta div { display:block; }.list-card .player-meter,.list-card .favorite-button { display:none; }.list-card .server-actions { justify-content:end; }.list-card .join-button { flex:none; padding:0 .8rem; }.list-card .copy-button { width:32px; }.empty-state { display:flex; flex-direction:column; align-items:center; gap:.45rem; padding:4rem 1rem; border:1px dashed var(--line-strong); color:#89978d; text-align:center; }.empty-state > span { color:var(--lime); font-size:28px; }.empty-state strong { color:#e8f0e8; font-weight:500; }.empty-state p { margin:.15rem 0 .5rem; color:#68756c; font:10px var(--mono); }.empty-state button { color:var(--lime); border:0; background:none; font:10px var(--mono); }.load-row { margin-top:1rem; }.load-button { display:inline-flex; align-items:center; gap:.4rem; min-height:33px; padding:0 .7rem; color:#bbc8bc; border:1px solid var(--line); background:transparent; font:10px var(--mono); }.load-button:hover { color:var(--lime); border-color:rgba(182,243,107,.5); }.load-button span { font-size:15px; }
.signal-section { display:grid; grid-template-columns:.8fr 1.2fr; align-items:center; gap:5rem; max-width:1440px; margin:auto; padding:5.4rem 3.5rem; border-top:1px solid var(--line); }.signal-section p { max-width:310px; margin:1rem 0 0; color:#829087; font-size:13px; line-height:1.55; }.map-signal-grid { display:grid; grid-template-columns:1fr 1fr; gap:.65rem; }.map-signal-card { position:relative; min-height:115px; padding:1rem; color:#87968b; border:1px solid var(--line); background:var(--surface); text-align:left; transition:all .18s var(--ease); }.map-signal-card:hover,.map-signal-card.active { color:var(--text); border-color:rgba(182,243,107,.45); background:linear-gradient(135deg,rgba(182,243,107,.08),rgba(17,23,22,.85)); transform:translateY(-2px); }.map-signal-card > span { display:block; color:#607065; font:9px var(--mono); }.map-signal-card strong { display:block; margin-top:1.2rem; color:#e9f1e8; font:600 25px var(--display); letter-spacing:.04em; text-transform:uppercase; }.map-signal-card small { display:block; margin-top:.2rem; color:#708076; font:9px var(--mono); }.map-signal-card i { position:absolute; right:1rem; top:1rem; color:var(--lime); font-style:normal; }.about-strip { display:grid; grid-template-columns:110px .85fr 1fr auto; align-items:center; gap:2.3rem; max-width:1440px; min-height:265px; margin:auto; padding:3rem 3.5rem; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.about-mark { color:var(--lime); font:700 27px/.8 var(--display); letter-spacing:.04em; }.about-mark span { color:#6d7c70; font-size:16px; }.about-strip p { max-width:330px; margin:0; color:#849188; font-size:13px; line-height:1.6; }.outline-cta { color:var(--lime); border-color:rgba(182,243,107,.45); background:transparent; white-space:nowrap; }.outline-cta:hover { color:var(--lime-dark); background:var(--lime); }
.footer { background:#080b0b; }.footer-grid { display:grid; grid-template-columns:1.35fr .65fr .75fr 1.5fr; gap:3rem; max-width:1440px; margin:auto; padding:3.3rem 3.5rem 3.7rem; }.footer-brand p { max-width:235px; margin:1rem 0; color:#718077; font-size:12px; line-height:1.5; }.system-status { display:inline-flex; align-items:center; gap:.45rem; color:#66766b; font:9px var(--mono); }.system-status .live-dot { width:5px; height:5px; }.footer-col { display:flex; flex-direction:column; align-items:start; gap:.72rem; }.footer-label { color:var(--lime); }.footer-col a { color:#849188; font-size:11px; text-decoration:none; }.footer-col a:hover { color:var(--lime); }.footer-card { padding:1rem; border:1px solid var(--line); background:rgba(255,255,255,.02); }.footer-card > span { color:var(--lime); font:9px var(--mono); }.footer-card strong { display:block; margin-top:.55rem; color:#dce6dc; font-size:12px; font-weight:500; }.footer-card p { max-width:295px; margin:.4rem 0 0; color:#6f7e73; font:9px/1.6 var(--mono); }.footer-bottom { display:flex; justify-content:space-between; max-width:1440px; min-height:55px; align-items:center; padding:0 3.5rem; color:#536158; border-top:1px solid rgba(211,227,215,.08); font:9px var(--mono); }.toast { position:fixed; right:24px; bottom:24px; z-index:50; display:flex; align-items:center; gap:.65rem; min-width:225px; padding:.75rem .85rem; border:1px solid rgba(182,243,107,.42); background:rgba(14,20,16,.95); box-shadow:0 18px 45px rgba(0,0,0,.35); opacity:0; transform:translateY(10px); pointer-events:none; transition:opacity .2s ease,transform .2s var(--ease); }.toast.visible { opacity:1; transform:translateY(0); }.toast > span { display:grid; place-items:center; width:20px; height:20px; color:var(--lime-dark); background:var(--lime); font-size:12px; }.toast strong,.toast small { display:block; }.toast strong { color:#dce9dd; font-size:11px; font-weight:500; }.toast small { margin-top:.2rem; color:#748278; font:9px var(--mono); }
@keyframes sweep { to { transform:rotate(360deg); } } @media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.001ms!important; transition-duration:.001ms!important; } }
@media (max-width:1100px) { .topbar-inner,.hero,.directory,.signal-section,.about-strip,.footer-grid,.footer-bottom { padding-left:2rem; padding-right:2rem; }.hero { gap:2.5rem; grid-template-columns:minmax(300px,.8fr) minmax(420px,1.2fr); }.server-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.footer-grid { grid-template-columns:1fr 1fr; }.footer-card { grid-column:span 2; } }
@media (max-width:760px) { .topbar-inner { min-height:64px; gap:.8rem; padding:0 1rem; }.primary-nav,.top-cta { display:none; }.top-actions { gap:.2rem; }.mobile-only { display:grid; }.mobile-nav { flex-direction:column; gap:.15rem; padding:.7rem 1rem 1rem; border-top:1px solid var(--line); background:#0d1210; }.mobile-nav:not([hidden]) { display:flex; }.mobile-nav a { padding:.65rem 0; color:#a1afa3; font:11px var(--mono); text-decoration:none; }.hero { display:flex; flex-direction:column; align-items:stretch; gap:2.7rem; min-height:0; padding:4rem 1rem 4.2rem; }.hero h1 { font-size:clamp(4.4rem,20vw,6.2rem); }.hero-copy > p { font-size:14px; }.hero-console { min-height:300px; }.console-radar { right:7%; left:7%; }.hero-stats { gap:.7rem; }.hero-stats div { padding-right:.7rem; }.hero-stats strong { font-size:16px; }.hero-stats span { font-size:8px; }.directory { padding:4.3rem 1rem 4.5rem; }.section-head { align-items:start; flex-direction:column; gap:1rem; }.section-head-meta { gap:.5rem; }.directory-toolbar { align-items:stretch; flex-direction:column; margin-top:2.4rem; }.toolbar-actions { justify-content:space-between; }.search-box { max-width:none; }.sort-box { margin-left:auto; }.directory-layout { display:block; }.filters { display:none; padding:1rem; border:1px solid var(--line); }.filters.open { display:block; margin-bottom:1rem; }.server-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; }.server-card-map { min-height:70px; }.server-card-head { min-height:70px; padding:.7rem; }.server-card-body { padding:.7rem; }.server-name { font-size:12px; }.server-sub { font-size:8px; }.player-line strong { font-size:15px; }.server-meta { gap:.35rem; }.server-meta b { font-size:9px; }.join-button { font-size:9px; }.copy-button { width:28px; }.signal-section { display:flex; flex-direction:column; align-items:stretch; gap:2rem; padding:4.2rem 1rem; }.map-signal-grid { gap:.5rem; }.map-signal-card { min-height:105px; }.about-strip { display:flex; flex-direction:column; align-items:start; gap:1.3rem; padding:2.7rem 1rem; }.about-mark { font-size:24px; }.about-strip p { font-size:12px; }.footer-grid { grid-template-columns:1fr 1fr; gap:2rem 1rem; padding:2.7rem 1rem; }.footer-card { grid-column:span 2; }.footer-bottom { flex-wrap:wrap; gap:.5rem; padding:1rem; line-height:1.5; }.footer-bottom span:last-child { width:100%; }.toast { right:14px; bottom:14px; left:14px; } }
@media (max-width:430px) { .server-grid { grid-template-columns:1fr; }.server-card-map { min-height:90px; }.toolbar-actions { gap:.1rem; }.sort-box span:first-child { display:none; }.section-head h2,.signal-section h2,.about-strip h2 { font-size:3.6rem; }.hero h1 { font-size:clamp(4.1rem,19vw,5.5rem); }.hero-stats strong { font-size:14px; }.hero-stats span { font-size:7px; }.map-signal-grid { grid-template-columns:1fr; }.map-signal-card { min-height:86px; }.map-signal-card strong { margin-top:.7rem; } }