.links-page { min-height:100vh; overflow-x:hidden; background:var(--bg); }
#linksMatrix { position:fixed; inset:0; z-index:-1; width:100%; height:100%; opacity:.15; }
.links-nav { position:fixed; z-index:50; top:14px; left:50%; width:min(920px,calc(100% - 28px)); height:70px; transform:translateX(-50%); display:flex; align-items:center; justify-content:space-between; padding:0 12px 0 16px; border:1px solid var(--line); border-radius:20px; background:color-mix(in srgb,var(--surface) 80%,transparent); backdrop-filter:blur(20px); box-shadow:0 16px 60px rgba(0,0,0,.18); }
.links-nav .brand img { width:140px; }.links-nav>div { display:flex; align-items:center; gap:7px; }.links-nav button,.home-link { min-height:44px; display:flex; align-items:center; gap:8px; padding:0 13px; border:1px solid var(--line); border-radius:11px; color:var(--ink); background:transparent; font:800 9px var(--mono); }.links-nav button { min-width:44px; justify-content:center; }
.links-shell { width:min(920px,calc(100% - 28px)); margin:0 auto; padding:140px 0 100px; }
.links-hero { text-align:center; }.profile-core { width:170px; height:170px; position:relative; display:grid; place-items:center; margin:0 auto 28px; border:1px solid rgba(0,220,232,.35); border-radius:50%; background:radial-gradient(circle,#123d72,#07101f 70%); box-shadow:0 0 100px rgba(0,220,232,.18); }.profile-core img { width:88px; }.profile-core>span { position:absolute; bottom:-25px; color:var(--muted); font:8px var(--mono); }.core-rings,.core-rings::before { content:""; position:absolute; inset:-14px; border:1px dashed rgba(0,220,232,.28); border-radius:50%; animation:spin 18s linear infinite; }.core-rings::before { inset:-13px; animation-direction:reverse; animation-duration:11s; }
.links-kicker { color:var(--cyan); font:800 9px var(--mono); letter-spacing:.14em; }.links-hero h1 { margin:8px 0 12px; font-size:clamp(48px,10vw,82px); letter-spacing:-.06em; }.links-hero>p:not(.links-kicker) { max-width:620px; margin:0 auto; color:var(--muted); font-size:17px; line-height:1.8; }.link-level { max-width:540px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; margin:28px auto 0; color:var(--muted); font:8px var(--mono); }.link-level i { height:5px; overflow:hidden; background:var(--surface-2); }.link-level em { display:block; width:0; height:100%; background:linear-gradient(90deg,var(--blue),var(--cyan)); transition:width .45s; box-shadow:0 0 12px var(--cyan); }.link-level b { color:var(--blue); }
.links-grid { display:grid; gap:10px; margin-top:55px; }.signal-link { min-height:88px; position:relative; overflow:hidden; display:grid; grid-template-columns:48px 1fr 38px; align-items:center; gap:14px; padding:12px 18px; border:1px solid var(--line); border-radius:17px; background:color-mix(in srgb,var(--surface) 88%,transparent); box-shadow:0 12px 40px rgba(0,0,0,.07); transition:.25s; }.signal-link::before { content:""; position:absolute; inset:0; transform:scaleX(0); transform-origin:left; background:var(--blue); transition:transform .35s; z-index:-1; }.signal-link:hover { color:#fff; transform:translateY(-3px); border-color:var(--blue); }.signal-link:hover::before { transform:scaleX(1); }.signal-link>span { color:var(--cyan); font:800 11px var(--mono); }.signal-link div { display:grid; gap:3px; }.signal-link small { color:var(--muted); font:8px var(--mono); }.signal-link:hover small { color:#bfcdf2; }.signal-link b { font-size:18px; overflow-wrap:anywhere; }.signal-link>i { font-style:normal; font-size:23px; }.signal-link>em { position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--cyan); transition:width .5s; }.signal-link:hover>em { width:100%; }
.game-panel { display:grid; grid-template-columns:.85fr 1.15fr; align-items:center; gap:45px; margin-top:95px; padding:34px; border:1px solid var(--line); border-radius:24px; background:var(--surface); box-shadow:var(--shadow); }.game-copy h2 { margin:12px 0 15px; font-size:clamp(32px,5vw,52px); line-height:1.05; letter-spacing:-.045em; }.game-copy>p:not(.links-kicker) { color:var(--muted); line-height:1.75; }.game-copy>button { min-height:46px; margin-top:20px; padding:0 16px; border:0; border-radius:10px; color:#fff; background:var(--blue); font-weight:800; }.memory-stats { display:flex; gap:10px; margin-top:20px; }.memory-stats span { min-width:80px; padding:10px; display:grid; border:1px solid var(--line); border-radius:10px; }.memory-stats b { color:#7f9dff; font:800 20px var(--mono); }.memory-stats small { color:var(--muted); font-size:9px; }
.memory-board { aspect-ratio:1; position:relative; display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:30px; border-radius:22px; background:#07101f; }.memory-board>button { border:1px solid #25405f; border-radius:20px; background:#0e1c30; transition:.15s; }.memory-board>button:nth-child(1){--pad:#225cff}.memory-board>button:nth-child(2){--pad:#00dce8}.memory-board>button:nth-child(3){--pad:#9c62ff}.memory-board>button:nth-child(4){--pad:#41f3a4}.memory-board>button.active,.memory-board>button:active { border-color:var(--pad); background:var(--pad); box-shadow:0 0 45px var(--pad); transform:scale(.96); }.memory-board>div { position:absolute; inset:50%; width:98px; height:98px; transform:translate(-50%,-50%); display:grid; place-items:center; border:8px solid #07101f; border-radius:50%; color:var(--cyan); background:#0c192b; font:800 9px var(--mono); }
.route-picks { display:flex; flex-wrap:wrap; gap:7px; margin-top:20px; }.route-picks button { min-height:44px; padding:9px 11px; border:1px solid var(--line); border-radius:8px; color:var(--muted); background:transparent; font:800 8px var(--mono); }.route-picks button.active { color:#041019; border-color:var(--cyan); background:var(--cyan); }.route-board { display:grid; gap:22px; padding:28px; border-radius:22px; color:#fff; background:#07101f; }.route { display:grid; grid-template-columns:30px 1fr 55px; align-items:center; gap:10px; font:10px var(--mono); }.route b { color:var(--cyan); }.route i { height:8px; overflow:hidden; border-radius:999px; background:#17263d; }.route em { display:block; width:0; height:100%; background:linear-gradient(90deg,var(--blue),var(--cyan)); transition:width 1.1s cubic-bezier(.2,.8,.2,1); }.route span { color:#8495ae; text-align:end; }.race-result { min-height:48px; display:grid; place-items:center; border:1px dashed #30435f; color:#91a2ba; font:9px var(--mono); }.link-toast { position:fixed; z-index:80; left:50%; bottom:-70px; transform:translateX(-50%); padding:12px 18px; border:1px solid rgba(0,220,232,.4); border-radius:12px; color:#fff; background:#07101f; font:10px var(--mono); transition:bottom .3s; }.link-toast.show { bottom:20px; }
.links-footer { width:min(920px,calc(100% - 28px)); margin:0 auto 24px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px; border:1px solid #1f2f47; border-radius:18px; color:#94a3b8; background:#050914; }.links-footer a { min-height:44px; display:flex; align-items:center; gap:10px; color:#fff; font:9px var(--mono); }.links-footer img { width:38px; height:38px; }.links-footer p { margin:0; font-size:12px; }
@media(max-width:720px){.links-nav { height:62px; }.links-nav .brand img { width:105px; }.home-link b { display:none; }.links-shell { padding-top:115px; }.game-panel { grid-template-columns:1fr; gap:28px; padding:22px; }.memory-board { max-width:430px; width:100%; margin:auto; }.links-footer { align-items:flex-start; flex-direction:column; }.signal-link { grid-template-columns:36px 1fr 28px; padding-inline:13px; }.signal-link b { font-size:15px; }}
@media(max-width:390px){.links-nav { width:calc(100% - 12px); padding:0 7px; }.links-nav .brand img { width:92px; }.links-nav button,.home-link { min-width:44px; min-height:44px; padding:0 9px; }.profile-core { width:145px; height:145px; }.links-hero h1 { font-size:50px; }.link-level { grid-template-columns:1fr auto; }.link-level>span { grid-column:1/-1; }.game-panel { padding:17px; }.memory-board { padding:20px; gap:8px; }.memory-board>div { width:78px; height:78px; }.route-board { padding:20px 14px; }}
html[data-theme="light"] .links-page .links-kicker { color:#0055b8; }
html[data-theme="light"] .links-page .memory-stats b { color:#0636e8; }