/* Approved two-level CS2 homepage. Scoped to home; existing page modules keep r3. */
.page-home { --z-display: 'Oswald',sans-serif; --z-shell-width:1640px; font-family:'Roboto','SF Pro Display',sans-serif; font-size:15px; line-height:1.5; }
.page-home :is(button,input,select) { font-family:inherit; }
.page-home .global-container > .container-fluid { width:calc(100% - 96px); max-width:1640px; margin-inline:auto; padding:0!important; display:grid; grid-template-columns:148px minmax(0,1fr) 208px; gap:44px 32px; align-items:start; }
.page-home .container-fluid > :not(.navbar) { grid-column:2; min-width:0; }
.page-home .container-fluid > .navbar { grid-column:1/-1; grid-row:1; width:100%; margin:0; padding:0; height:112px; min-height:112px; border-bottom:2px solid #9bcb68; background:transparent!important; }
.page-home :is(.navbar_menu_left,.navbar_usermenu) { height:110px; min-height:110px; }
.page-home .logo-text { gap:14px; }
.page-home .zaraysk-brand-mark { width:54px; height:49px; flex-basis:54px; }
.page-home .zaraysk-wordmark { width:190px; height:30px; }
.page-home .navbar_usermenu > button { border:1px solid #666d60; padding:12px 18px; min-height:46px; background:transparent; color:#f0efea; font:500 14px 'Roboto',sans-serif; }
.page-home .drpdwn_menu { position:fixed; top:156px; left:max(48px,calc((100vw - 1640px)/2)); width:148px; height:auto!important; display:flex; flex-direction:column; align-items:stretch; gap:8px; border:0; z-index:30; }
.page-home .drpdwn_menu .dropdown { width:100%; }
.page-home .drpdwn_menu .dropbtn { justify-content:flex-start; font:500 23px/1.25 'Oswald',sans-serif; text-transform:uppercase; padding:0!important; min-height:44px; height:auto; width:100%; background:transparent; border:0; color:#f0efea; gap:10px; }
.page-home .drpdwn_menu .dropbtn.active_btn { color:#9bcb68; border-left:5px solid #9bcb68; padding-left:10px!important; }
.page-home .drpdwn_menu .dropbtn:hover { color:#9bcb68; }
.page-home .drpdwn_menu .dropdown_block { left:100%; top:0; font-family:'Roboto',sans-serif; }
.page-home .header_burger { display:none!important; }
.page-home .global-container::before { background-image:radial-gradient(ellipse 650px 900px at 0 38%,#9bcb6814,transparent 85%),radial-gradient(ellipse 700px 950px at 100% 75%,#9bcb680b,transparent 85%); background-size:100% 100%; animation:r5-background-settle 1.6s ease-out 1; }
.page-home #zaraysk-servers { grid-row:2; width:100%; margin:0; padding:0; }
.page-home .zaraysk-posters-section { grid-row:3; margin:0; }
.page-home .container-fluid > .zaraysk-chat { grid-column:3; grid-row:2/span 5; position:sticky; top:32px; align-self:start; margin:14px 0 0; }
.page-home .zaraysk-chat--development { padding:14px 0 0; border:0; border-top:2px solid #5aa2d7; min-height:0; background:transparent; }
.page-home .zaraysk-chat__header h2 { font:500 30px/1.2 'Oswald',sans-serif; }
.page-home .zaraysk-chat__development { display:block; min-height:0; margin-top:36px; padding-bottom:32px; border-bottom:1px solid #34382e; text-align:left; }
.page-home .zaraysk-chat__development p { color:#b6bbae; font-size:15px; }
.page-home .zaraysk-poster-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; border-top:1px solid #34382e; padding-top:24px; }
.page-home .zaraysk-nav-card { position:relative; background:transparent!important; color:#f0efea!important; border:0!important; box-shadow:none; padding:0; min-height:70px; width:100%; }
.page-home .zaraysk-nav-card :is(.zaraysk-nav-card__top,.zaraysk-nav-card__tag) { display:none; }
.page-home .zaraysk-nav-card h3 { color:#f0efea!important; font:500 24px/1.2 'Oswald',sans-serif; letter-spacing:0; max-width:none; margin:0; padding-right:24px; }
.page-home .zaraysk-nav-card::after { content:''; position:absolute; right:0; top:0; color:#9bcb68; font:22px Arial,sans-serif; }
.page-home .zaraysk-nav-card p { font:400 13px/1.5 'Roboto',sans-serif; margin:8px 0 0; color:#969c91; }
.page-home .zaraysk-nav-card:hover h3 { color:#9bcb68; }
.page-home .footer_global { width:calc(100% - 96px); max-width:1640px; margin:72px auto 0; border-top:1px solid #34382e; padding:28px 0 36px; }
.page-home .footer_global a { display:inline-flex; align-items:center; gap:12px; }
.page-home .zaraysk-footer-mark { width:35px; height:32px; }
.page-home .footer_global .zaraysk-wordmark { width:125px; height:22px; }

#zaraysk-servers [hidden] { display:none!important; }
#zaraysk-servers a:focus-visible,#zaraysk-servers button:focus-visible { outline:2px solid #5aa2d7; outline-offset:4px; }
#zaraysk-servers .r5-section-heading { padding-bottom:25px; }
#zaraysk-servers .r5-eyebrow { font:600 12px/1.5 'Roboto',sans-serif; letter-spacing:1.6px; color:#9bcb68; text-transform:uppercase; margin:0 0 4px; }
#zaraysk-servers .r5-section-heading h1 { font:600 68px/1.08 'Oswald',sans-serif; letter-spacing:-1px; margin:0; color:#f0efea; }
#zaraysk-servers .home-intro { font:400 15px/1.5 'Roboto',sans-serif; color:#b4bbae; margin:12px 0 0; }
#zaraysk-servers .mode-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
#zaraysk-servers .mode-tile { position:relative; display:block; width:100%; aspect-ratio:430/392; overflow:hidden; background:#0b0b0b; isolation:isolate; border:0; border-radius:0; animation:r5-tile-arrive .35s ease-out both; }
#zaraysk-servers .mode-tile:nth-child(2) { animation-delay:35ms; }
#zaraysk-servers .mode-tile:nth-child(3) { animation-delay:70ms; }
#zaraysk-servers .mode-tile:nth-child(n+4) { animation-delay:100ms; }
#zaraysk-servers .tile-art { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; z-index:-2; transition:filter .2s; }
#zaraysk-servers .mode-tile::before { content:''; position:absolute; inset:0; background:linear-gradient(0deg,#000f 0%,#000b 22%,#0003 55%,transparent 80%); z-index:-1; }
#zaraysk-servers .tile-copy { position:absolute; left:20px; right:20px; bottom:21px; }
#zaraysk-servers .tile-copy h2 { font:600 32px/1.15 'Oswald',sans-serif; color:#f0efea; letter-spacing:.1px; margin:0 0 8px; text-shadow:0 1px 8px #000; }
#zaraysk-servers .tile-copy p { font:400 14px/1.4 'Roboto',sans-serif; min-height:2.8em; max-width:28ch; color:#e0e4da; margin:0; text-shadow:0 1px 6px #000; }
#zaraysk-servers .tile-arrow { position:absolute; right:16px; top:10px; color:#f0efea; font:28px/1.5 'Roboto',sans-serif; text-shadow:0 1px 10px #000; opacity:0; transform:translate(-3px,3px); transition:opacity .2s,transform .2s; }
#zaraysk-servers .mode-tile:is(:hover,:focus-visible) .tile-art { filter:brightness(1.06); }
#zaraysk-servers .mode-tile:is(:hover,:focus-visible) .tile-arrow { opacity:1; transform:none; }
#zaraysk-servers .mode-tile[data-open-mode="chaos"]:is(:hover,:focus-visible) .tile-art { animation:r5-chaos-accent .3s ease-out 1; }
#zaraysk-servers .r5-screen.entering { animation:r5-screen-arrive .2s ease-out both; }
#zaraysk-servers .r5-other-link { display:inline-flex; align-items:center; color:#9bcb68; min-height:44px; margin-top:16px; font-size:14px; }
#zaraysk-servers .back-link { display:inline-flex; align-items:center; min-height:44px; color:#9bcb68; font:400 14px/1.5 'Roboto',sans-serif; margin-top:-6px; }
#zaraysk-servers .mode-switches { display:flex; flex-wrap:wrap; gap:6px; margin:14px 0 22px; }
#zaraysk-servers .mode-switch { display:inline-flex; align-items:center; justify-content:center; min-height:44px; border:1px solid #34382e; padding:9px 14px; font:600 13px/1.5 'Roboto',sans-serif; color:#f0efea; background:transparent; transition:color .15s,border-color .15s,background-color .15s; }
#zaraysk-servers .mode-switch[aria-current="page"] { background:#9bcb68; border-color:#9bcb68; color:#0b0b0b; }
#zaraysk-servers .mode-switch:hover { border-color:#9bcb68; }
#zaraysk-servers .mode-banner { position:relative; overflow:hidden; background:#10160e; min-height:236px; isolation:isolate; display:flex; align-items:center; }
#zaraysk-servers .mode-banner img { position:absolute; right:0; top:0; width:46%; height:100%; object-fit:cover; object-position:center; z-index:-2; }
#zaraysk-servers .mode-banner::before { content:''; position:absolute; inset:0; background:linear-gradient(90deg,#10160e 0%,#10160ef5 43%,#10160e70 71%,#10160e1a 100%); z-index:-1; }
#zaraysk-servers .mode-banner-copy { padding:28px; max-width:73%; position:relative; }
#zaraysk-servers .mode-banner-copy h1 { font:600 52px/1.05 'Oswald',sans-serif; margin:8px 0 16px; overflow-wrap:anywhere; color:#f0efea; }
#zaraysk-servers .mode-banner-copy > p:last-child { color:#d6dfd1; font:400 16px/1.6 'Roboto',sans-serif; max-width:40ch; margin:0; }
#zaraysk-servers .r5-list-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:30px 0 18px; }
#zaraysk-servers .r5-list-heading h2 { font:500 27px/1.2 'Oswald',sans-serif; color:#f0efea; margin:0; }
#zaraysk-servers .r5-list-actions { display:flex; align-items:center; gap:12px; color:#969c91; font-size:13px; }
#zaraysk-servers #updateservers { display:inline-flex; align-items:center; gap:8px; min-height:44px; border:1px solid #34382e; background:#151a13; padding:8px 12px; color:#f0efea; font:400 13px/1.5 'Roboto',sans-serif; }
#zaraysk-servers #updateservers svg { width:18px; height:18px; fill:currentColor; }
#zaraysk-servers .servers_wrap { display:grid; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:12px; }
#zaraysk-servers .server_block { position:relative; display:grid; gap:13px; padding:17px!important; min-width:0; min-height:0!important; height:auto!important; width:100%; aspect-ratio:auto!important; border:1px solid #343c2b!important; border-radius:0; background:#151a13!important; color:#f0efea; box-shadow:none; align-items:stretch; overflow:hidden; transform:none; }
#zaraysk-servers .concrete-server-header { display:flex; align-items:start; justify-content:space-between; gap:12px; }
#zaraysk-servers .server_block .server_name_custom { font:500 23px/1.25 'Oswald',sans-serif!important; color:#f0efea!important; max-width:100%!important; width:auto; min-width:0; margin:0; white-space:normal; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
#zaraysk-servers .r5-server-status { font-size:11px; color:#9bcb68; white-space:nowrap; padding-top:5px; }
#zaraysk-servers .is-offline .r5-server-status { color:#a7ac9f; }
#zaraysk-servers .r5-server-data { display:flex; gap:24px; margin:0; padding-top:10px; border-top:1px solid #34382e; }
#zaraysk-servers .r5-server-data dt { font:400 12px/1.5 'Roboto',sans-serif; color:#969c91; }
#zaraysk-servers .r5-server-data dd { margin:3px 0 0; font:400 15px/1.5 'Roboto',sans-serif; color:#f0efea; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
#zaraysk-servers .server_geoip { display:flex; align-items:center; gap:8px; font-size:12px; height:auto; }
#zaraysk-servers .server_geoip:has(> :empty) { min-height:0; }
#zaraysk-servers .server_geoip img { width:20px; height:14px; object-fit:contain; }
#zaraysk-servers .server_badge { max-width:100%; overflow-wrap:anywhere; font-size:12px; }
#zaraysk-servers .r5-server-actions { display:grid; grid-template-columns:minmax(0,1fr) 64px 44px; gap:8px; }
#zaraysk-servers .r5-connect { display:flex; align-items:center; justify-content:space-between; min-height:44px; padding:10px 12px; background:#5aa2d7; color:#0b0b0b; font:600 13px/1.5 'Roboto',sans-serif; border:0; }
#zaraysk-servers .r5-connect span { font:22px/1 Arial,sans-serif; color:inherit; }
#zaraysk-servers .r5-connect[aria-disabled="true"] { background:#293024; color:#929b89; cursor:not-allowed; }
#zaraysk-servers .r5-players,#zaraysk-servers .r5-copy { display:flex; align-items:center; justify-content:center; width:100%; min-width:0; min-height:44px; padding:8px!important; border:1px solid #505749; background:transparent!important; color:#f0efea!important; font:400 12px/1.5 'Roboto',sans-serif; box-shadow:none; border-radius:0; }
#zaraysk-servers .r5-copy svg { width:18px; height:18px; fill:currentColor; }
#zaraysk-servers .r5-players:disabled,#zaraysk-servers .r5-copy:disabled { opacity:.45; }
#zaraysk-servers .progress { position:absolute; bottom:0; left:0; right:0; height:2px; width:100%; background:transparent; }
#zaraysk-servers .progress-value { height:100%; background:#9bcb68; max-width:100%; }
#zaraysk-servers .empty-mode { padding:30px 22px; border:1px solid #34382e; background:#12150f; }
#zaraysk-servers .empty-mode h2 { font:500 27px/1.3 'Oswald',sans-serif; color:#f0efea; margin:0 0 10px; }
#zaraysk-servers .empty-mode p { font:400 15px/1.5 'Roboto',sans-serif; color:#aeb8a4; max-width:55ch; margin:0; }
#zaraysk-servers .r5-update-status { font-size:13px; color:#b6c1ac; margin:12px 0 0; }
@keyframes r5-tile-arrive { from{opacity:.65;transform:translateY(5px)}to{opacity:1;transform:none} }
@keyframes r5-screen-arrive { from{opacity:.7;transform:translateY(4px)}to{opacity:1;transform:none} }
@keyframes r5-chaos-accent { 0%,100%{opacity:1}35%{opacity:.92}65%{opacity:.97} }
@keyframes r5-background-settle { from{background-position:0 -6px}to{background-position:0 0} }
@media(min-width:1900px) { .page-home .global-container > .container-fluid{grid-template-columns:164px minmax(0,1fr) 240px;gap:44px 40px}.page-home .drpdwn_menu{width:164px} }
@media(max-width:1350px) { .page-home .global-container > .container-fluid{width:calc(100% - 64px);grid-template-columns:128px minmax(0,1fr) 180px;gap:44px 24px}.page-home .drpdwn_menu{left:32px;width:128px}.page-home .drpdwn_menu .dropbtn{font-size:22px}.page-home .footer_global{width:calc(100% - 64px)}#zaraysk-servers .mode-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#zaraysk-servers .r5-section-heading h1{font-size:58px}#zaraysk-servers .tile-copy h2{font-size:34px}#zaraysk-servers .mode-banner-copy h1{font-size:46px}#zaraysk-servers .mode-banner-copy{padding:24px}#zaraysk-servers .servers_wrap{grid-template-columns:minmax(0,1fr)!important}.page-home .zaraysk-poster-grid{grid-template-columns:1fr;gap:20px}.page-home .zaraysk-nav-card{border-bottom:1px solid #34382e!important;padding-bottom:18px;min-height:60px}.page-home .zaraysk-nav-card:last-child{border-bottom:0!important} }
@media(max-width:1000px) { .page-home .global-container > .container-fluid{grid-template-columns:120px minmax(0,1fr);gap:36px 28px}.page-home .drpdwn_menu{width:120px;top:148px}.page-home .container-fluid > .zaraysk-chat{grid-column:2;grid-row:4;position:static;margin:0}.page-home .footer_global{margin-top:48px} }
@media(max-width:700px) { .page-home .global-container > .container-fluid{width:calc(100% - 40px);display:flex;flex-direction:column;gap:0}.page-home .navbar{height:88px!important;min-height:88px!important;margin-bottom:30px!important}.page-home :is(.navbar_menu_left,.navbar_usermenu){height:86px;min-height:86px}.page-home .logo-text{gap:9px}.page-home .zaraysk-brand-mark{width:36px;height:34px;flex-basis:36px}.page-home .zaraysk-wordmark{width:135px;height:24px}.page-home .navbar_usermenu{margin-left:auto}.page-home .navbar_usermenu > button{font-size:0;min-width:44px;width:44px;height:44px;border:0;padding:8px}.page-home .navbar_usermenu > button svg{width:22px;height:22px}.page-home .drpdwn_menu{display:none!important}.page-home .header_burger{display:block!important;min-width:44px;min-height:44px}.page-home .online{display:none}.page-home .container-fluid > .zaraysk-chat{margin-top:38px;order:4;position:static}.page-home .zaraysk-posters-section{margin-top:30px;order:3}.page-home #zaraysk-servers{order:2}.page-home .zaraysk-nav-card h3{font-size:26px}.page-home .zaraysk-nav-card p{font-size:14px}.page-home .footer_global{width:calc(100% - 40px);margin-top:40px;padding:24px 0}.page-home .global-container::before{animation:none}#zaraysk-servers .mode-grid{grid-template-columns:1fr;gap:16px}#zaraysk-servers .mode-tile{animation-duration:.23s;animation-delay:0s!important}#zaraysk-servers .tile-copy{left:22px;right:22px;bottom:24px}#zaraysk-servers .tile-copy h2{font-size:36px}#zaraysk-servers .tile-copy p{font-size:15px;max-width:29ch}#zaraysk-servers .tile-arrow{opacity:1;transform:none;font-size:25px}#zaraysk-servers .r5-section-heading h1{font-size:54px}#zaraysk-servers .home-intro{font-size:14px}#zaraysk-servers .r5-eyebrow{font-size:11px}#zaraysk-servers .mode-switches{gap:6px;margin:14px 0 18px}#zaraysk-servers .mode-switch{font-size:12px;padding:8px 10px}#zaraysk-servers .mode-banner{min-height:224px}#zaraysk-servers .mode-banner-copy{padding:22px;max-width:100%}#zaraysk-servers .mode-banner-copy h1{font-size:44px;margin-bottom:14px}#zaraysk-servers .mode-banner-copy>p:last-child{font-size:15px;max-width:27ch}#zaraysk-servers .mode-banner img{width:100%;opacity:.42}#zaraysk-servers .mode-banner::before{background:linear-gradient(90deg,#10160ee8,#10160e80)}#zaraysk-servers .r5-list-heading{margin-top:26px;align-items:start;gap:8px}#zaraysk-servers .r5-list-heading h2{font-size:26px;max-width:180px}#zaraysk-servers .r5-list-actions{flex-direction:column;align-items:end;gap:4px}#zaraysk-servers .servers_wrap{grid-template-columns:minmax(0,1fr)!important}#zaraysk-servers .server_name_custom{font-size:24px!important}#zaraysk-servers .empty-mode{padding:24px 20px} }
@media(hover:none) { #zaraysk-servers .mode-tile:hover .tile-art{filter:none;animation:none} }
@media(prefers-reduced-motion:reduce) { .page-home *, .page-home *::before,.page-home *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important} }