/* ════════════════════════════════════════════════════════════════════ Варианты оформления страницы профиля (для сравнения, только локально). Навбар остаётся как есть — меняется всё, что под ним. #neu.sk-a «Полка» — плоский тёмный, главные — обложки #neu.sk-b «Стекло» — полупрозрачные панели поверх размытого фона #neu.sk-c «Журнал» — крупная типографика, список как таблица Класс .sk стоит при любом варианте. Включает их static/skins.js. ════════════════════════════════════════════════════════════════════ */ /* ───────── общее для всех вариантов ───────── */ /* объём корпуса внутри контента выключен: тени-токены обнуляются, в шапке сайта они прежние */ #neu.sk .page, #neu.sk .gt-footer{ --neu-out-xs:0 0 0 0 transparent;--neu-out-sm:0 0 0 0 transparent; --neu-out:0 0 0 0 transparent;--neu-out-lg:0 0 0 0 transparent; --neu-in-xs:0 0 0 0 transparent;--neu-in-sm:0 0 0 0 transparent;--neu-in:0 0 0 0 transparent; --sk-key-bg:#2b2f38; --sk-key:inset 0 1px 0 rgba(255,255,255,.07), 0 8px 18px rgba(0,0,0,.42); } #neu.sk .neu-shell-toggle{display:none;} #neu.sk .ph-username, #neu.sk .ph-level-num, #neu.sk .status-tab.active{text-shadow:none;} #neu.sk .ph-avatar::after{display:none;} #neu.sk .ph-level-bar-wrap{box-shadow:none;} #neu.sk .game-row:hover, #neu.sk .film-row:hover{transform:none;} /* кнопки — тот же материал, что у шапки сайта */ #neu.sk .ph-btn{background:var(--sk-key-bg);box-shadow:var(--sk-key);} #neu.sk .ph-btn.primary{ background:linear-gradient(145deg,var(--neu-accent-2),var(--neu-accent)); box-shadow:inset 0 1px 0 rgba(255,255,255,.32), 0 10px 24px rgba(var(--neu-accent-rgb),.26); } #neu.sk .ph-btn.primary:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.32), 0 12px 30px rgba(var(--neu-accent-rgb),.42);} #neu.sk .ph-btn.primary:active{box-shadow:inset 0 3px 8px rgba(90,30,0,.5);} /* панель выбора варианта (только для просмотра) */ .sk-bar{ position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:880; display:flex;align-items:center;gap:6px;padding:7px;border-radius:999px; background:#2b2f38;box-shadow:8px 8px 20px rgba(12,14,18,.62), -8px -8px 20px rgba(255,255,255,.05); font-family:'Rubik',system-ui,sans-serif; } .sk-bar span{padding:0 8px 0 12px;font-size:12px;color:#8a92a3;white-space:nowrap;} .sk-bar button{ border:0;border-radius:999px;padding:9px 15px;cursor:pointer;white-space:nowrap; font:600 13px 'Rubik',system-ui,sans-serif;color:#b4bac8;background:transparent; transition:color .18s, box-shadow .18s; } .sk-bar button:hover{color:#e9ecf2;} .sk-bar button.on{color:#ff7a3d;box-shadow:inset 3px 3px 7px rgba(12,14,18,.62), inset -3px -3px 7px rgba(255,255,255,.07);} @media (max-width:768px){ .sk-bar{bottom:98px;gap:2px;padding:5px;max-width:calc(100vw - 20px);} .sk-bar span{display:none;} .sk-bar button{padding:8px 11px;font-size:12px;} } /* ════════════ A · «ПОЛКА» ════════════ */ #neu.sk-a body{background:#0e1013;} #neu.sk-a .page, #neu.sk-a .gt-footer{ --neu-bg:#0e1013;--neu-well:#14171c; --sk-tile:#16191e;--sk-line:rgba(255,255,255,.07); } #neu.sk-a body.has-profile-bg .content-wrap{background:rgba(14,16,19,.9);box-shadow:none;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);} #neu.sk-a .profile-header{background:none;border-radius:0;} #neu.sk-a .ph-avatar{padding:0;overflow:hidden;box-shadow:0 0 0 1px var(--sk-line), 0 18px 40px rgba(0,0,0,.5);} #neu.sk-a .ph-status{background:transparent;padding:0;font-size:12px;} #neu.sk-a .ph-stat, #neu.sk-a .ph-level-panel{background:var(--sk-tile);border:1px solid var(--sk-line);} #neu.sk-a .ph-level-bar-wrap{height:6px;background:rgba(255,255,255,.08);} #neu.sk-a .ph-level-bar{box-shadow:none;} #neu.sk-a .queue-block{background:none;} #neu.sk-a .queue-title{color:var(--neu-text);} #neu.sk-a .queue-cover-item{background:var(--sk-tile);} #neu.sk-a .queue-cover-item:hover{box-shadow:0 16px 30px rgba(0,0,0,.55);} #neu.sk-a .queue-num, #neu.sk-a .queue-edit-btn{background:rgba(14,16,19,.8);box-shadow:none;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);} #neu.sk-a .games-search input, #neu.sk-a .films-search input{background:var(--sk-tile);border:1px solid var(--sk-line);} #neu.sk-a .games-search input:focus, #neu.sk-a .films-search input:focus{border-color:var(--theme-search);box-shadow:none;} #neu.sk-a .view-mode-toggle{background:var(--sk-tile);border:1px solid var(--sk-line);} #neu.sk-a .view-mode-toggle button.active{background:var(--sk-key-bg);box-shadow:inset 0 1px 0 rgba(255,255,255,.07);} #neu.sk-a .status-tab{background:transparent;color:var(--neu-muted);} #neu.sk-a .status-tab:hover{background:rgba(255,255,255,.04);color:var(--neu-text);} #neu.sk-a .status-tab.active{background:var(--sk-key-bg);color:var(--theme-search);box-shadow:var(--sk-key);} #neu.sk-a .game-row, #neu.sk-a .film-row{background:transparent;} #neu.sk-a .game-row-cover-inner, #neu.sk-a .film-row-cover-inner{padding:0;overflow:hidden;background:var(--sk-tile);box-shadow:0 12px 26px rgba(0,0,0,.45);} #neu.sk-a .game-row-cover-inner img, #neu.sk-a .film-row-cover-inner img{box-shadow:none;} #neu.sk-a .game-row-num-inline, #neu.sk-a .film-row-num-inline{min-width:0;height:auto;padding:0;font-size:12px;color:var(--neu-dim);} #neu.sk-a .game-row-status, #neu.sk-a .film-row-status{padding:0 0 0 14px;background:transparent!important;font-size:12px;} #neu.sk-a .game-row-status::before, #neu.sk-a .film-row-status::before{left:0;box-shadow:none;} #neu.sk-a .game-row-comment-avatar, #neu.sk-a .film-row-comment-avatar{padding:0;overflow:hidden;} #neu.sk-a .game-row-comment, #neu.sk-a .film-row-comment{color:var(--neu-text-2);} #neu.sk-a .game-row-footer-tags > span[style*="background"], #neu.sk-a .film-row-footer-tags > span[style*="background"]{background:transparent!important;padding:0!important;} #neu.sk-a .game-row-genre, #neu.sk-a .film-row-genre{background:transparent;border:1px solid var(--sk-line);} #neu.sk-a .game-row-edit-btn, #neu.sk-a .film-row-edit-btn{background:var(--sk-key-bg)!important;box-shadow:var(--sk-key);} #neu.sk-a .rating-bubble{width:auto;height:auto;border-radius:0;background:none;box-shadow:none;text-shadow:none;} #neu.sk-a .game-row.trophy-platinum, #neu.sk-a .film-row.trophy-platinum{box-shadow:none;background:linear-gradient(90deg, rgba(91,159,224,.15), transparent 46%);} #neu.sk-a .game-row.trophy-hard, #neu.sk-a .film-row.trophy-hard{box-shadow:none;background:linear-gradient(90deg, rgba(200,40,40,.16), transparent 46%);} #neu.sk-a .game-row.trophy-speed, #neu.sk-a .film-row.trophy-speed{box-shadow:none;background:linear-gradient(90deg, rgba(150,90,245,.15), transparent 46%);} #neu.sk-a .game-row.trophy-nodez, #neu.sk-a .film-row.trophy-nodez{box-shadow:none;background:linear-gradient(90deg, rgba(40,170,90,.15), transparent 46%);} #neu.sk-a .games-empty{border:1px dashed var(--sk-line);} #neu.sk-a .gt-footer::before{background:var(--sk-line);box-shadow:none;} #neu.sk-a #gamesList.tiles-mode .game-tile:not(.expanded) .game-row, #neu.sk-a #filmsList.tiles-mode .film-tile:not(.expanded) .film-row{padding:0;margin:0;border-radius:14px;background:var(--sk-tile);} #neu.sk-a #gamesList.tiles-mode .game-tile:not(.expanded) .game-row:hover, #neu.sk-a #filmsList.tiles-mode .film-tile:not(.expanded) .film-row:hover{transform:translateY(-4px);box-shadow:0 18px 34px rgba(0,0,0,.55);} #neu.sk-a #gamesList.tiles-mode .game-tile:not(.expanded) .game-row-cover, #neu.sk-a #filmsList.tiles-mode .film-tile:not(.expanded) .film-row-cover{inset:0;} #neu.sk-a #gamesList.tiles-mode .game-tile:not(.expanded) .game-row-cover-inner, #neu.sk-a #filmsList.tiles-mode .film-tile:not(.expanded) .film-row-cover-inner{width:100%;height:100%;border-radius:14px;box-shadow:none;} #neu.sk-a #gamesList.tiles-mode .game-tile:not(.expanded) .game-row-content, #neu.sk-a #filmsList.tiles-mode .film-tile:not(.expanded) .film-row-content{left:0;right:0;bottom:0;border-radius:0;padding:26px 12px 12px;} #neu.sk-a #gamesList.tiles-mode .game-tile:not(.expanded) .game-row-rating, #neu.sk-a #filmsList.tiles-mode .film-tile:not(.expanded) .film-row-rating{top:8px;right:8px;background:rgba(14,16,19,.82);box-shadow:none;} #neu.sk-a #gamesList.tiles-mode .game-tile:not(.expanded) .rating-bubble, #neu.sk-a #filmsList.tiles-mode .film-tile:not(.expanded) .rating-bubble{width:36px;height:36px;} @media (min-width:769px){ #neu.sk-a .profile-header{margin:22px 0 46px;padding:0;gap:34px;align-items:flex-start;} #neu.sk-a .ph-avatar{width:132px;height:132px;} #neu.sk-a .ph-username{font-size:44px;line-height:1.05;letter-spacing:-.01em;margin:6px 0 20px;} #neu.sk-a .ph-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:10px;margin-top:0;} #neu.sk-a .ph-stat{min-width:0;padding:15px 14px 13px;border-radius:16px;} #neu.sk-a .ph-stat-val{font-size:25px;} #neu.sk-a .ph-stat-label{font-size:11.5px;margin-top:5px;white-space:nowrap;} #neu.sk-a .ph-info-right{width:290px;padding-top:8px;} #neu.sk-a .ph-level-panel{border-radius:16px;padding:17px 18px 15px;} #neu.sk-a .queue-block{padding:0;margin-bottom:42px;border-radius:0;} #neu.sk-a .queue-title{font-size:15px;} #neu.sk-a .queue-cover-item{border-radius:12px;} #neu.sk-a .games-controls, #neu.sk-a .films-controls{margin-bottom:10px;} #neu.sk-a .games-list, #neu.sk-a .films-list{gap:0;} #neu.sk-a #gamesList:not(.tiles-mode) .game-tile + .game-tile, #neu.sk-a #filmsList:not(.tiles-mode) .film-tile + .film-tile{border-top:1px solid var(--sk-line);} #neu.sk-a .game-row, #neu.sk-a .film-row{min-height:0;padding:24px 18px;margin:0 -18px;border-radius:20px;} #neu.sk-a .game-row:hover, #neu.sk-a .film-row:hover{background-color:rgba(255,255,255,.028);box-shadow:none;} #neu.sk-a .game-row-cover, #neu.sk-a .film-row-cover{padding:0;align-self:flex-start;} #neu.sk-a .game-row-cover-inner, #neu.sk-a .film-row-cover-inner{width:138px;height:184px;border-radius:12px;} #neu.sk-a .game-row-cover-inner img, #neu.sk-a .film-row-cover-inner img{border-radius:12px;} #neu.sk-a .game-row-content, #neu.sk-a .film-row-content{padding:2px 0 0 28px;} #neu.sk-a .game-row-top, #neu.sk-a .film-row-top{padding-right:120px;margin-bottom:10px;align-items:baseline;} #neu.sk-a .game-row-title, #neu.sk-a .film-row-title{font-size:21px;} #neu.sk-a .game-row-title > span, #neu.sk-a .film-row-title > span{font-size:15px!important;} #neu.sk-a .game-row-comment-wrap, #neu.sk-a .film-row-comment-wrap{padding:0!important;margin-top:16px!important;max-width:78ch;} #neu.sk-a .game-row-comment-avatar, #neu.sk-a .film-row-comment-avatar{width:26px;height:26px;} #neu.sk-a .game-row-comment, #neu.sk-a .film-row-comment{font-size:15px;} #neu.sk-a .game-row-footer-tags, #neu.sk-a .film-row-footer-tags{padding-top:18px!important;} #neu.sk-a .game-row-rating, #neu.sk-a .film-row-rating{top:22px;right:18px;} #neu.sk-a .rating-bubble{font-size:40px;} #neu.sk-a .trophy-wrap{left:-76px;bottom:-6px;} #neu.sk-a #gamesList.tiles-mode, #neu.sk-a #filmsList.tiles-mode{gap:18px;padding-top:18px;} #neu.sk-a #gamesList.tiles-mode .game-tile:not(.expanded) .rating-bubble, #neu.sk-a #filmsList.tiles-mode .film-tile:not(.expanded) .rating-bubble{font-size:13px;} } @media (max-width:768px){ #neu.sk-a .ph-avatar{padding:0;} #neu.sk-a .queue-block{padding:0 0 6px;} #neu.sk-a .game-row, #neu.sk-a .film-row{background:var(--sk-tile);border:1px solid var(--sk-line);border-radius:20px;} #neu.sk-a .game-row-cover-inner, #neu.sk-a .film-row-cover-inner{padding:0;} #neu.sk-a .rating-bubble{font-size:22px!important;} #neu.sk-a .grc-mobile-only{background:rgba(255,255,255,.03);} } /* ════════════ B · «СТЕКЛО» ════════════ */ #neu.sk-b body{background:#0a0c10;} #neu.sk-b .page, #neu.sk-b .gt-footer{ --neu-bg:rgba(255,255,255,.07);--neu-well:rgba(255,255,255,.04); --sk-edge:rgba(255,255,255,.13); --sk-glass:linear-gradient(135deg, rgba(255,255,255,.11), rgba(255,255,255,.04)); --sk-glass-shadow:0 22px 50px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.13); --sk-key-bg:rgba(255,255,255,.12); } /* фон: если своего у профиля нет — размытая обложка лучшей игры (ставит skins.js) */ #neu.sk-b body:not(.has-profile-bg) .profile-bg{ display:block;inset:-12%; background:var(--sk-backdrop, radial-gradient(60% 50% at 20% 10%, #5a3b24, transparent), radial-gradient(50% 50% at 85% 30%, #23364f, transparent)) center/cover no-repeat; filter:blur(70px) saturate(1.6) brightness(.62); } #neu.sk-b .profile-bg::after{background:linear-gradient(to bottom, rgba(10,12,16,.15), rgba(10,12,16,.6));} #neu.sk-b body.has-profile-bg .content-wrap{background:none;box-shadow:none;} #neu.sk-b .profile-header, #neu.sk-b .queue-block, #neu.sk-b .game-row, #neu.sk-b .film-row{ background:var(--sk-glass);border:1px solid var(--sk-edge);box-shadow:var(--sk-glass-shadow); backdrop-filter:blur(26px) saturate(1.5);-webkit-backdrop-filter:blur(26px) saturate(1.5); } #neu.sk-b .ph-avatar{padding:0;overflow:hidden;background:none;box-shadow:0 0 0 6px rgba(255,255,255,.09), 0 16px 34px rgba(0,0,0,.4);} #neu.sk-b .ph-status{border:1px solid rgba(255,255,255,.1);} #neu.sk-b .ph-stat, #neu.sk-b .ph-level-panel{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);} #neu.sk-b .ph-level-bar-wrap{background:rgba(0,0,0,.28);} #neu.sk-b .ph-btn{border:1px solid var(--sk-edge);box-shadow:0 10px 22px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.14);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);} #neu.sk-b .ph-btn.primary{border-color:rgba(255,255,255,.22);} #neu.sk-b .queue-cover-item{background:rgba(0,0,0,.25);box-shadow:0 8px 18px rgba(0,0,0,.35);} #neu.sk-b .queue-num, #neu.sk-b .queue-edit-btn{background:rgba(10,12,16,.6);box-shadow:none;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);} #neu.sk-b .games-search input, #neu.sk-b .view-mode-toggle, #neu.sk-b .status-tab, #neu.sk-b .films-search input{ background:rgba(255,255,255,.07);border:1px solid var(--sk-edge); backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4); } #neu.sk-b .games-search svg, #neu.sk-b .films-search svg{z-index:1;} #neu.sk-b .games-search input:focus, #neu.sk-b .films-search input:focus{border-color:rgba(255,255,255,.4);box-shadow:none;} #neu.sk-b .view-mode-toggle button.active{background:rgba(255,255,255,.18);color:#fff;} #neu.sk-b .status-tab:hover{background:rgba(255,255,255,.12);} #neu.sk-b .status-tab.active{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.34);color:#fff;} #neu.sk-b .game-row:hover, #neu.sk-b .film-row:hover{background:linear-gradient(135deg, rgba(255,255,255,.15), rgba(255,255,255,.06));} #neu.sk-b .game-row-cover-inner, #neu.sk-b .film-row-cover-inner{padding:0;overflow:hidden;background:rgba(0,0,0,.25);box-shadow:0 14px 30px rgba(0,0,0,.45);} #neu.sk-b .game-row-cover-inner img, #neu.sk-b .film-row-cover-inner img{box-shadow:none;} #neu.sk-b .game-row-comment-wrap, #neu.sk-b .film-row-comment-wrap{background:rgba(0,0,0,.2);} #neu.sk-b .game-row-comment-avatar, #neu.sk-b .film-row-comment-avatar{padding:0;overflow:hidden;} #neu.sk-b .game-row-comment, #neu.sk-b .film-row-comment{color:rgba(240,243,250,.82);} #neu.sk-b .game-row-genre, #neu.sk-b .game-row-edit-btn, #neu.sk-b .film-row-genre, #neu.sk-b .film-row-edit-btn{border:1px solid rgba(255,255,255,.1)!important;} #neu.sk-b .rating-bubble{ background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.16); box-shadow:inset 0 1px 0 rgba(255,255,255,.12); } #neu.sk-b .game-row.trophy-platinum, #neu.sk-b .film-row.trophy-platinum{box-shadow:0 0 0 1.5px rgba(91,159,224,.85), 0 0 44px rgba(64,113,164,.42), var(--sk-glass-shadow);} #neu.sk-b .game-row.trophy-hard, #neu.sk-b .film-row.trophy-hard{box-shadow:0 0 0 1.5px rgba(210,50,50,.85), 0 0 44px rgba(139,0,0,.5), var(--sk-glass-shadow);} #neu.sk-b .game-row.trophy-speed, #neu.sk-b .film-row.trophy-speed{box-shadow:0 0 0 1.5px rgba(150,90,245,.85), 0 0 44px rgba(124,58,237,.42), var(--sk-glass-shadow);} #neu.sk-b .game-row.trophy-nodez, #neu.sk-b .film-row.trophy-nodez{box-shadow:0 0 0 1.5px rgba(40,170,90,.85), 0 0 44px rgba(22,101,52,.5), var(--sk-glass-shadow);} #neu.sk-b .games-empty{background:var(--sk-glass);border:1px solid var(--sk-edge);} #neu.sk-b .gt-footer::before{background:rgba(255,255,255,.12);box-shadow:none;} #neu.sk-b .gt-footer-soc{border:1px solid rgba(255,255,255,.1);} #neu.sk-b #gamesList.tiles-mode .game-tile:not(.expanded) .game-row-rating, #neu.sk-b #filmsList.tiles-mode .film-tile:not(.expanded) .film-row-rating{background:rgba(10,12,16,.7);} #neu.sk-b #gamesList.tiles-mode .game-tile:not(.expanded) .rating-bubble, #neu.sk-b #filmsList.tiles-mode .film-tile:not(.expanded) .rating-bubble{background:none;border:0;box-shadow:none;} @media (min-width:769px){ #neu.sk-b .profile-header{border-radius:30px;} #neu.sk-b .ph-avatar{width:116px;height:116px;} #neu.sk-b .ph-username{font-size:30px;} #neu.sk-b .queue-block{border-radius:26px;} #neu.sk-b .game-row, #neu.sk-b .film-row{border-radius:26px;} #neu.sk-b .game-row-cover-inner, #neu.sk-b .film-row-cover-inner{border-radius:16px;} #neu.sk-b .game-row-cover-inner img, #neu.sk-b .film-row-cover-inner img{border-radius:16px;} } @media (max-width:768px){ #neu.sk-b .ph-avatar{padding:0;} #neu.sk-b .game-row-cover-inner, #neu.sk-b .film-row-cover-inner{padding:0;} #neu.sk-b .grc-mobile-only{background:rgba(0,0,0,.2);} } /* ════════════ C · «ЖУРНАЛ» ════════════ */ #neu.sk-c body{background:#0d0e11;} #neu.sk-c .page, #neu.sk-c .gt-footer{ --neu-bg:#0d0e11;--neu-well:#15171b; --sk-line:rgba(255,255,255,.1); } #neu.sk-c body.has-profile-bg .content-wrap{background:rgba(13,14,17,.92);box-shadow:none;} #neu.sk-c .profile-header{background:none;border-radius:0;} #neu.sk-c .ph-avatar{padding:0;overflow:hidden;box-shadow:none;} #neu.sk-c .ph-status{background:transparent;padding:0;} #neu.sk-c .ph-stat{background:none;border-radius:0;} #neu.sk-c .ph-level-panel{background:none;border-radius:0;padding:0;} #neu.sk-c .ph-level-bar-wrap{height:3px;border-radius:0;background:var(--sk-line);} #neu.sk-c .ph-level-bar{box-shadow:none;border-radius:0;} #neu.sk-c .queue-block{background:none;border-radius:0;} #neu.sk-c .queue-title{color:var(--neu-text);} #neu.sk-c .queue-cover-item{background:var(--neu-well);} #neu.sk-c .queue-num, #neu.sk-c .queue-edit-btn{background:rgba(13,14,17,.82);box-shadow:none;} #neu.sk-c .games-search input, #neu.sk-c .films-search input{background:transparent;border-radius:0;border-bottom:1px solid var(--sk-line);} #neu.sk-c .games-search input:focus, #neu.sk-c .films-search input:focus{border-bottom-color:var(--theme-search);box-shadow:none;} #neu.sk-c .view-mode-toggle{background:none;} #neu.sk-c .view-mode-toggle button.active{background:none;} #neu.sk-c .status-tab{background:none;border-radius:0;color:var(--neu-muted);border-bottom:2px solid transparent;} #neu.sk-c .status-tab:hover{background:none;color:var(--neu-text);} #neu.sk-c .status-tab.active{background:none;color:var(--neu-text);border-bottom-color:var(--theme-search);} #neu.sk-c .status-tab.active .count{color:var(--theme-search);opacity:1;} #neu.sk-c .game-row, #neu.sk-c .film-row{background:none;border-radius:0;} #neu.sk-c .game-row-cover-inner, #neu.sk-c .film-row-cover-inner{padding:0;overflow:hidden;background:var(--neu-well);} #neu.sk-c .game-row-cover-inner img, #neu.sk-c .film-row-cover-inner img{box-shadow:none;} #neu.sk-c .game-row-num-inline, #neu.sk-c .film-row-num-inline{min-width:30px;height:auto;padding:0;justify-content:flex-start;font-size:12px;color:var(--neu-dim);} #neu.sk-c .game-row-status, #neu.sk-c .film-row-status{padding:0;background:transparent!important;font-size:12px;} #neu.sk-c .game-row-status::before, #neu.sk-c .film-row-status::before{display:none;} #neu.sk-c .game-row-comment-avatar, #neu.sk-c .film-row-comment-avatar{display:none;} #neu.sk-c .game-row-comment, #neu.sk-c .film-row-comment{color:var(--neu-text-2);} #neu.sk-c .game-row-footer-tags > span[style*="background"], #neu.sk-c .film-row-footer-tags > span[style*="background"]{background:transparent!important;padding:0!important;} #neu.sk-c .game-row-genre, #neu.sk-c .film-row-genre{background:none;padding:0;} #neu.sk-c .game-row-edit-btn, #neu.sk-c .film-row-edit-btn{background:none!important;} #neu.sk-c .rating-bubble{width:auto;height:auto;border-radius:0;background:none;box-shadow:none;text-shadow:none;} #neu.sk-c .game-row[class*="trophy-"], #neu.sk-c .film-row[class*="trophy-"]{box-shadow:none;} #neu.sk-c .game-row.trophy-platinum, #neu.sk-c .film-row.trophy-platinum{--sk-trophy:rgba(91,159,224,.95);} #neu.sk-c .game-row.trophy-hard, #neu.sk-c .film-row.trophy-hard{--sk-trophy:rgba(210,50,50,.95);} #neu.sk-c .game-row.trophy-speed, #neu.sk-c .film-row.trophy-speed{--sk-trophy:rgba(150,90,245,.95);} #neu.sk-c .game-row.trophy-nodez, #neu.sk-c .film-row.trophy-nodez{--sk-trophy:rgba(40,170,90,.95);} #neu.sk-c #gamesList:not(.tiles-mode) .game-row::before, #neu.sk-c #filmsList:not(.tiles-mode) .film-row::before{ content:'';position:absolute;left:-16px;top:22px;bottom:22px;width:3px;border-radius:2px;background:var(--sk-trophy, transparent); } #neu.sk-c .games-empty{border:1px solid var(--sk-line);border-radius:0;} #neu.sk-c .gt-footer::before{background:var(--sk-line);box-shadow:none;} #neu.sk-c #gamesList.tiles-mode .game-tile:not(.expanded) .game-row, #neu.sk-c #filmsList.tiles-mode .film-tile:not(.expanded) .film-row{padding:0;border:0;border-radius:10px;box-shadow:none;} #neu.sk-c #gamesList.tiles-mode .game-tile:not(.expanded) .game-row-cover, #neu.sk-c #filmsList.tiles-mode .film-tile:not(.expanded) .film-row-cover{inset:0;} #neu.sk-c #gamesList.tiles-mode .game-tile:not(.expanded) .game-row-cover-inner, #neu.sk-c #filmsList.tiles-mode .film-tile:not(.expanded) .film-row-cover-inner{width:100%;height:100%;border-radius:10px;} #neu.sk-c #gamesList.tiles-mode .game-tile:not(.expanded) .game-row-content, #neu.sk-c #filmsList.tiles-mode .film-tile:not(.expanded) .film-row-content{left:0;right:0;bottom:0;border-radius:0;padding:26px 12px 12px;} #neu.sk-c #gamesList.tiles-mode .game-tile:not(.expanded) .game-row-rating, #neu.sk-c #filmsList.tiles-mode .film-tile:not(.expanded) .film-row-rating{top:8px;right:8px;background:rgba(13,14,17,.85);box-shadow:none;} #neu.sk-c #gamesList.tiles-mode .game-tile:not(.expanded) .rating-bubble, #neu.sk-c #filmsList.tiles-mode .film-tile:not(.expanded) .rating-bubble{width:36px;height:36px;} @media (min-width:769px){ #neu.sk-c .content-wrap{max-width:1040px;} #neu.sk-c .profile-header{margin:26px 0 0;padding:0 0 34px;gap:26px;align-items:flex-end;border-bottom:1px solid var(--sk-line);} #neu.sk-c .ph-avatar{width:92px;height:92px;} #neu.sk-c .ph-username{font-size:clamp(46px,6vw,78px);font-weight:900;line-height:.95;letter-spacing:-.025em;margin:0 0 26px;} #neu.sk-c .ph-stats{gap:0;margin-top:0;flex-wrap:nowrap;} #neu.sk-c .ph-stat{min-width:0;padding:0 22px;border-left:1px solid var(--sk-line);} #neu.sk-c .ph-stat:first-child{padding-left:0;border-left:0;} #neu.sk-c .ph-stat-val{font-size:28px;} #neu.sk-c .ph-stat-label{font-size:12px;margin-top:6px;white-space:nowrap;} #neu.sk-c .ph-info{align-items:flex-end;} #neu.sk-c .ph-info-right{width:260px;} #neu.sk-c .queue-block{padding:28px 0;margin:0;border-bottom:1px solid var(--sk-line);} #neu.sk-c .queue-covers{grid-template-columns:repeat(auto-fill, 86px);gap:12px;} #neu.sk-c .queue-cover-item{border-radius:8px;} #neu.sk-c .games-controls, #neu.sk-c .films-controls{margin:26px 0 4px;gap:22px;} #neu.sk-c .games-search input, #neu.sk-c .films-search input{padding-left:30px;} #neu.sk-c .games-search svg, #neu.sk-c .films-search svg{left:2px;} #neu.sk-c .status-tabs{gap:24px;} #neu.sk-c .status-tab{padding:9px 0;} #neu.sk-c .games-list, #neu.sk-c .films-list{gap:0;} #neu.sk-c .game-row, #neu.sk-c .film-row{min-height:0;padding:22px 0;border-bottom:1px solid var(--sk-line);} #neu.sk-c .game-row:hover .game-row-title, #neu.sk-c .film-row:hover .film-row-title{color:var(--theme-search);} #neu.sk-c .game-row-cover, #neu.sk-c .film-row-cover{padding:0;align-self:flex-start;} #neu.sk-c .game-row-cover-inner, #neu.sk-c .film-row-cover-inner{width:72px;height:96px;border-radius:8px;} #neu.sk-c .game-row-cover-inner img, #neu.sk-c .film-row-cover-inner img{border-radius:8px;} #neu.sk-c .game-row-content, #neu.sk-c .film-row-content{padding:0 0 0 24px;} #neu.sk-c .game-row-top, #neu.sk-c .film-row-top{padding-right:110px;margin-bottom:6px;align-items:baseline;gap:4px;} #neu.sk-c .game-row-title, #neu.sk-c .film-row-title{font-size:19px;transition:color .18s;} #neu.sk-c .game-row-meta, #neu.sk-c .film-row-meta{margin-bottom:0;} #neu.sk-c .game-row-comment-wrap, #neu.sk-c .film-row-comment-wrap{padding:0!important;margin-top:10px!important;max-width:70ch;} #neu.sk-c .game-row-comment, #neu.sk-c .film-row-comment{font-size:15px;} #neu.sk-c .game-row-footer-tags, #neu.sk-c .film-row-footer-tags{padding-top:12px!important;gap:16px!important;} #neu.sk-c .game-row-rating, #neu.sk-c .film-row-rating{top:20px;right:0;} #neu.sk-c .rating-bubble{font-size:34px;} #neu.sk-c .trophy-wrap{left:-88px;bottom:auto;top:10px;width:64px;} #neu.sk-c .trophy-img{width:64px;height:64px;} #neu.sk-c #gamesList.tiles-mode, #neu.sk-c #filmsList.tiles-mode{gap:16px;padding-top:22px;} #neu.sk-c #gamesList.tiles-mode .game-tile:not(.expanded) .rating-bubble, #neu.sk-c #filmsList.tiles-mode .film-tile:not(.expanded) .rating-bubble{font-size:13px;} } @media (max-width:768px){ #neu.sk-c .ph-avatar{padding:0;} #neu.sk-c .ph-stat{border:1px solid var(--sk-line);border-radius:12px;} #neu.sk-c .ph-level-panel{padding:0 4px;} #neu.sk-c .queue-block{padding:0 0 6px;} #neu.sk-c .status-tab{padding:9px 4px;} #neu.sk-c .games-list, #neu.sk-c .films-list{gap:0;} #neu.sk-c .game-row, #neu.sk-c .film-row{padding:16px 0;border-bottom:1px solid var(--sk-line);} #neu.sk-c .game-row-cover-inner, #neu.sk-c .film-row-cover-inner{padding:0;} #neu.sk-c .rating-bubble{font-size:20px!important;} #neu.sk-c .grc-mobile-only{padding:8px 0 0;} } /* ════════════ «ПОЛКА»: как показывать фон профиля ════════════ sk-a — плитка под всем контентом (фон виден только по краям) sk-a1 «Афиша» — фон крупно наверху и растворяется в тёмной странице sk-a2 «Ленты» — фон на весь экран, плитки нет, у каждой игры своя лента */ #neu.sk-a1 body.has-profile-bg .page, #neu.sk-a2 body.has-profile-bg .page{--sk-tile:rgba(14,16,19,.72);} #neu.sk-a1 body.has-profile-bg .content-wrap, #neu.sk-a2 body.has-profile-bg .content-wrap{background:none;backdrop-filter:none;-webkit-backdrop-filter:none;} #neu.sk-a1 body.has-profile-bg .ph-username, #neu.sk-a2 body.has-profile-bg .ph-username{text-shadow:0 2px 22px rgba(0,0,0,.75);} #neu.sk-a1 body.has-profile-bg .ph-status, #neu.sk-a2 body.has-profile-bg .ph-status, #neu.sk-a2 body.has-profile-bg .queue-title, #neu.sk-a2 body.has-profile-bg .queue-show-all{text-shadow:0 1px 10px rgba(0,0,0,.85);} #neu.sk-a1 body.has-profile-bg .ph-stat, #neu.sk-a1 body.has-profile-bg .ph-level-panel, #neu.sk-a2 body.has-profile-bg .ph-stat, #neu.sk-a2 body.has-profile-bg .ph-level-panel, #neu.sk-a2 body.has-profile-bg .games-search input, #neu.sk-a2 body.has-profile-bg .view-mode-toggle, #neu.sk-a2 body.has-profile-bg .films-search input{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);} /* ── Афиша ── */ #neu.sk-a1 body.has-profile-bg .profile-bg{ position:absolute;inset:0 0 auto 0;height:min(82vh,760px); -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 42%, transparent 100%); mask-image:linear-gradient(to bottom, #000 0%, #000 42%, transparent 100%); } #neu.sk-a1 body.has-profile-bg .profile-bg::after{background:linear-gradient(to bottom, rgba(14,16,19,.3) 0%, rgba(14,16,19,0) 26%, rgba(14,16,19,.55) 100%);} /* ── Ленты ── */ #neu.sk-a2 body.has-profile-bg .profile-bg::after{background:linear-gradient(to bottom, rgba(14,16,19,.3), rgba(14,16,19,.55));} #neu.sk-a2 body.has-profile-bg .status-tab:not(.active){background:rgba(14,16,19,.6);color:var(--neu-text-2);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);} #neu.sk-a2 body.has-profile-bg .game-row, #neu.sk-a2 body.has-profile-bg .film-row{ background:rgba(14,16,19,.76);border:1px solid rgba(255,255,255,.06); backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); } #neu.sk-a2 body.has-profile-bg .game-row.trophy-platinum, #neu.sk-a2 body.has-profile-bg .film-row.trophy-platinum{background:linear-gradient(90deg, rgba(91,159,224,.2), transparent 46%), rgba(14,16,19,.76);} #neu.sk-a2 body.has-profile-bg .game-row.trophy-hard, #neu.sk-a2 body.has-profile-bg .film-row.trophy-hard{background:linear-gradient(90deg, rgba(200,40,40,.2), transparent 46%), rgba(14,16,19,.76);} #neu.sk-a2 body.has-profile-bg .game-row.trophy-speed, #neu.sk-a2 body.has-profile-bg .film-row.trophy-speed{background:linear-gradient(90deg, rgba(150,90,245,.2), transparent 46%), rgba(14,16,19,.76);} #neu.sk-a2 body.has-profile-bg .game-row.trophy-nodez, #neu.sk-a2 body.has-profile-bg .film-row.trophy-nodez{background:linear-gradient(90deg, rgba(40,170,90,.2), transparent 46%), rgba(14,16,19,.76);} #neu.sk-a2 body.has-profile-bg #gamesList.tiles-mode .game-tile:not(.expanded) .game-row, #neu.sk-a2 body.has-profile-bg #filmsList.tiles-mode .film-tile:not(.expanded) .film-row{border:0;} @media (min-width:769px){ #neu.sk-a1 body.has-profile-bg .profile-header{margin-top:clamp(150px, 30vh, 300px);} #neu.sk-a2 body.has-profile-bg .games-list, #neu.sk-a2 body.has-profile-bg .films-list{gap:12px;} #neu.sk-a2 body.has-profile-bg #gamesList:not(.tiles-mode) .game-tile + .game-tile, #neu.sk-a2 body.has-profile-bg #filmsList:not(.tiles-mode) .film-tile + .film-tile{border-top:0;} #neu.sk-a2 body.has-profile-bg .game-row, #neu.sk-a2 body.has-profile-bg .film-row{margin:0;padding:22px 24px;} #neu.sk-a2 body.has-profile-bg .game-row:hover, #neu.sk-a2 body.has-profile-bg .film-row:hover{background-color:rgba(20,23,28,.86);} #neu.sk-a2 body.has-profile-bg .game-row-rating, #neu.sk-a2 body.has-profile-bg .film-row-rating{right:24px;} #neu.sk-a2 body.has-profile-bg .games-controls, #neu.sk-a2 body.has-profile-bg .films-controls{margin-bottom:22px;} #neu.sk-a2 body.has-profile-bg #gamesList.tiles-mode, #neu.sk-a2 body.has-profile-bg #filmsList.tiles-mode{padding-top:0;} #neu.sk-a2 body.has-profile-bg #gamesList.tiles-mode .game-tile:not(.expanded) .game-row, #neu.sk-a2 body.has-profile-bg #filmsList.tiles-mode .film-tile:not(.expanded) .film-row{padding:0;} } @media (max-width:768px){ #neu.sk-a1 body.has-profile-bg .profile-bg{height:64vh;} #neu.sk-a1 body.has-profile-bg .profile-header{margin-top:110px;} #neu.sk-a1 body.has-profile-bg .content-wrap, #neu.sk-a2 body.has-profile-bg .content-wrap{margin:0 0 30px;} } #neu.sk-a2 .games-search svg, #neu.sk-a2 .films-search svg{z-index:1;} /* ════════════ «ПОЛКА»: статистика и уровень в шапке ════════════ st-1 «Строка» — крупные цифры без рамок; линия под шапкой — это и есть шкала уровня st-2 «Кольцо» — уровень кольцом вокруг аватара, статистика одной тихой строкой st-3 «Планка» — одна общая пластина: ячейки статистики и уровень в ней же lv-ring — уровень кольцом на аватаре (входит в «Кольцо»; выбрано: st-1 + lv-ring) Общее для всех трёх: подписчики и друзья отделены от игровых цифр. */ .sk-lvl-badge, .sk-lvl-cap{display:none;} #neu[class*="st-"] .ph-stat, #neu[class*="st-"] .ph-level-panel{background:none;border:0;border-radius:0;backdrop-filter:none;-webkit-backdrop-filter:none;} #neu[class*="st-"] .ph-stat[onclick]:hover .ph-stat-val{color:var(--neu-accent);} #neu[class*="st-"] body.has-profile-bg .ph-stat-val, #neu[class*="st-"] body.has-profile-bg .ph-stat-label, #neu[class*="st-"] body.has-profile-bg .ph-level, #neu[class*="st-"] body.has-profile-bg .ph-level-exp-text{text-shadow:0 1px 14px rgba(0,0,0,.8);} /* ── 1 · Строка ── */ #neu.st-1 .profile-header{position:relative;} #neu.st-1 .ph-stats{display:flex;flex-wrap:wrap;align-items:flex-end;gap:0;row-gap:18px;} #neu.st-1 .ph-stats::before{content:'';flex-basis:100%;order:0;} #neu.st-1 .ph-stat{order:1;min-width:0;padding:0 26px;border-left:1px solid rgba(255,255,255,.14);text-align:left;} #neu.st-1 .ph-stat:first-child{padding-left:0;border-left:0;} #neu.st-1 .ph-stat-val{font-size:38px;line-height:1;letter-spacing:-.02em;} #neu.st-1 .ph-stat-label{font-size:13px;margin-top:8px;color:var(--neu-text-2);} #neu.st-1 .ph-stat[onclick]{order:-1;display:flex;align-items:baseline;gap:6px;padding:0 20px 0 0;border-left:0;} #neu.st-1 .ph-stat[onclick] .ph-stat-val{font-size:15px;letter-spacing:0;} #neu.st-1 .ph-stat[onclick] .ph-stat-label{font-size:14px;margin-top:0;text-transform:lowercase;} #neu.st-1 .ph-level-panel{display:flex;flex-wrap:wrap;align-items:baseline;padding:0;} #neu.st-1 .ph-level{font-size:14px;gap:7px;} #neu.st-1 .ph-level-exp-text{order:2;margin:0 0 0 auto;font-size:13px;color:var(--neu-text-2);} #neu.st-1 .ph-level-bar-wrap{order:3;flex-basis:100%;height:3px;margin-top:10px;border-radius:2px;background:rgba(255,255,255,.14);overflow:visible;} #neu.st-1 .ph-level-bar{position:relative;border-radius:2px;box-shadow:0 0 12px rgba(var(--neu-accent-rgb),.7);} #neu.st-1 .ph-level-bar::after{ content:'';position:absolute;right:-4px;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%; background:inherit;box-shadow:0 0 0 3px #0e1013, 0 0 12px rgba(var(--neu-accent-rgb),.9); } /* ── 2 · Кольцо ── */ #neu.lv-ring .ph-avatar-wrap{gap:6px;} #neu.lv-ring .ph-avatar{ padding:9px;overflow:visible;box-shadow:none; background:conic-gradient(from 180deg, var(--theme-level-bar, var(--neu-accent)) calc(var(--lvl-pct, 0) * 1%), rgba(255,255,255,.16) 0); } #neu.lv-ring .ph-avatar img, #neu.lv-ring .ph-avatar .ph-avatar-placeholder{border-radius:50%;box-shadow:0 0 0 5px #0e1013;background:#16191e;} #neu.lv-ring .sk-lvl-badge{ display:flex;align-items:center;justify-content:center;position:relative; min-width:46px;height:28px;padding:0 12px;border-radius:999px;margin-top:-24px; font-family:var(--neu-fd);font-size:14px;font-weight:800;color:var(--neu-text); background:#0e1013;box-shadow:0 0 0 2px var(--theme-level-bar, var(--neu-accent)), 0 8px 18px rgba(0,0,0,.5); } #neu.lv-ring .sk-lvl-cap{display:block;font-size:12px;color:var(--neu-muted);font-variant-numeric:tabular-nums;} #neu.lv-ring body.has-profile-bg .sk-lvl-cap{text-shadow:0 1px 10px rgba(0,0,0,.85);} #neu.lv-ring.lv-ring .ph-level-panel{display:none;} #neu.st-2 .ph-stats{display:flex;flex-wrap:wrap;gap:8px 30px;align-items:baseline;} #neu.st-2 .ph-stat{display:flex;align-items:baseline;gap:8px;min-width:0;padding:0;text-align:left;} #neu.st-2 .ph-stat-val{font-size:24px;line-height:1.1;} #neu.st-2 .ph-stat-label{font-size:14px;margin-top:0;color:var(--neu-text-2);text-transform:lowercase;white-space:nowrap;} #neu.st-2 .ph-stat[onclick] .ph-stat-val{font-size:16px;} #neu.st-2 .ph-stat[onclick] .ph-stat-label{color:var(--neu-muted);} /* ── 3 · Планка ── */ #neu.st-3 .ph-stats{ display:flex;flex-wrap:nowrap;gap:0; background:rgba(18,21,26,.74);border:1px solid rgba(255,255,255,.09);border-radius:20px; backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); } #neu.st-3 .ph-stat{flex:1 1 0;min-width:0;padding:18px 22px 16px;text-align:left;border-left:1px solid rgba(255,255,255,.08);} #neu.st-3 .ph-stat:first-child{border-left:0;} #neu.st-3 .ph-stat-val{font-size:26px;line-height:1;} #neu.st-3 .ph-stat-label{font-size:12px;margin-top:9px;white-space:nowrap;} #neu.st-3 .ph-stat[onclick] .ph-stat-val{font-size:20px;color:var(--neu-text-2);} #neu.st-3 .ph-level-panel{padding:16px 22px 0;} #neu.st-3 .ph-level{font-size:14px;justify-content:space-between;} #neu.st-3 .ph-level-num{font-size:26px;line-height:1;} #neu.st-3 .ph-level-bar-wrap{height:5px;margin-top:11px;background:rgba(255,255,255,.1);} #neu.st-3 .ph-level-bar{box-shadow:none;} #neu.st-3 .ph-level-exp-text{margin-top:7px;font-size:11.5px;} @media (min-width:769px){ /* 1 */ #neu.st-1 .profile-header{padding-bottom:54px;margin-bottom:38px;} #neu.st-1 .ph-username{margin-bottom:14px;} #neu.st-1 .ph-level-panel{position:absolute;left:0;right:0;bottom:0;width:auto;} #neu.st-1.lv-ring .profile-header{padding-bottom:0;margin-bottom:46px;} /* 2 */ #neu.lv-ring .ph-avatar{width:150px;height:150px;} #neu.st-2 .ph-username{margin-bottom:16px;} /* 3 */ #neu.st-3 .profile-header{position:relative;padding-bottom:106px;} #neu.st-3 .ph-stats{position:absolute;left:0;right:0;bottom:0;height:86px;padding-right:300px;} #neu.st-3 .ph-level-panel{position:absolute;right:0;bottom:0;width:300px;height:86px;border-left:1px solid rgba(255,255,255,.08);} #neu.st-3 .ph-username{margin-bottom:6px;} #neu.st-3 .ph-avatar{width:112px;height:112px;} } @media (max-width:768px){ #neu[class*="st-"] .ph-stats{width:100%;} /* 1 */ #neu.st-1 .ph-stats{justify-content:center;row-gap:14px;} #neu.st-1 .ph-stat{padding:0 16px;text-align:center;} #neu.st-1 .ph-stat:first-child{padding-left:16px;} #neu.st-1 .ph-stat-val{font-size:26px;} #neu.st-1 .ph-stat-label{font-size:12px;margin-top:6px;} #neu.st-1 .ph-stat[onclick]{padding:0 9px;} #neu.st-1 .ph-level-panel{width:100%;margin-top:6px;} /* 2 */ #neu.lv-ring .ph-avatar{width:124px;height:124px;padding:8px;} #neu.st-2 .ph-stats{justify-content:center;gap:8px 20px;} #neu.st-2 .ph-stat-val{font-size:20px;} /* 3 */ #neu.st-3 .ph-stats{flex-wrap:wrap;border-radius:20px 20px 0 0;border-bottom:0;} #neu.st-3 .ph-stat{flex:1 1 30%;padding:14px 10px 12px;text-align:center;} #neu.st-3 .ph-stat[onclick]{flex-basis:100%;display:flex;justify-content:center;align-items:baseline;gap:7px;border-left:0;border-top:1px solid rgba(255,255,255,.08);padding:11px 10px;} #neu.st-3 .ph-stat[onclick] .ph-stat-val{font-size:15px;} #neu.st-3 .ph-stat[onclick] .ph-stat-label{margin-top:0;font-size:13px;text-transform:lowercase;} #neu.st-3 .ph-stat-val{font-size:22px;} #neu.st-3 .ph-level-panel{ width:100%;margin-top:-14px;padding:14px 18px 14px;border-radius:0 0 20px 20px; background:rgba(18,21,26,.74);border:1px solid rgba(255,255,255,.09);border-top-color:rgba(255,255,255,.08); backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); } } /* ════════════ НАВБАР: прозрачность ════════════ nv-1 «Матовый» — тот же навбар, но на две трети плотный, фон под ним размыт nv-2 «Стекло» — почти прозрачный, сильное размытие, светлая кромка nv-3 «Острова» — общей полосы нет: слева и справа отдельные стеклянные пилюли nv-4 «Проявление» — наверху страницы навбара как плашки нет вовсе, при прокрутке проявляется матовым nv-5 — то же, но проявляется стеклом Кнопки внутри становятся полупрозрачными «чипами»; выпадающие меню остаются плотными. */ html#neu{--sk-solid:var(--neu-bg);} #neu[class*="nv-"] nav.nav, #neu[class*="nv-"] #mob-tb-left, #neu[class*="nv-"] #mob-tb-right, #neu[class*="nv-"] #mob-tabbar{ --neu-bg:rgba(255,255,255,.075); --neu-out-xs:inset 0 1px 0 rgba(255,255,255,.1), 0 2px 6px rgba(0,0,0,.2); --neu-out-sm:inset 0 1px 0 rgba(255,255,255,.1), 0 4px 12px rgba(0,0,0,.22); --neu-in-xs:inset 0 2px 5px rgba(0,0,0,.4); --neu-in-sm:inset 0 2px 7px rgba(0,0,0,.44); transition:background-color .35s var(--neu-ease), box-shadow .35s var(--neu-ease), backdrop-filter .35s var(--neu-ease); } #neu[class*="nv-"] .nav-menu, #neu[class*="nv-"] #navDrop, #neu[class*="nv-"] #desktopNotifPanel{ --neu-bg:var(--sk-solid); --neu-out-xs:2px 2px 5px rgba(12,14,18,.62), -2px -2px 5px rgba(255,255,255,.07); --neu-out-sm:4px 4px 10px rgba(12,14,18,.62), -4px -4px 10px rgba(255,255,255,.07); --neu-in-xs:inset 2px 2px 4px rgba(12,14,18,.62), inset -2px -2px 4px rgba(255,255,255,.07); --neu-in-sm:inset 3px 3px 7px rgba(12,14,18,.62), inset -3px -3px 7px rgba(255,255,255,.07); box-shadow:0 24px 50px rgba(0,0,0,.5)!important; } #neu[class*="nv-"] .nav-logo span, #neu[class*="nv-"] .nav-logo-text, #neu[class*="nv-"] .mob-tb-name{text-shadow:0 1px 10px rgba(0,0,0,.6);} /* 1 · Матовый */ #neu.nv-1 nav.nav, #neu.nv-4.nav-stuck nav.nav{ background:color-mix(in srgb, var(--sk-solid) 66%, transparent); backdrop-filter:blur(18px) saturate(1.35);-webkit-backdrop-filter:blur(18px) saturate(1.35); box-shadow:0 12px 32px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.07); } /* 2 · Стекло */ #neu.nv-2 nav.nav, #neu.nv-5.nav-stuck nav.nav{ background:color-mix(in srgb, var(--sk-solid) 24%, transparent); backdrop-filter:blur(26px) saturate(1.7);-webkit-backdrop-filter:blur(26px) saturate(1.7); box-shadow:0 14px 36px rgba(0,0,0,.26), inset 0 0 0 1px rgba(255,255,255,.12), inset 0 1px 0 rgba(255,255,255,.14); } /* 3 · Острова */ #neu.nv-3 nav.nav{background:none;box-shadow:none;pointer-events:none;} #neu.nv-3 .nav-inner{padding:0;} #neu.nv-3 .nav-inner > *{ pointer-events:auto;height:60px;padding:0 10px 0 12px;border-radius:999px; background:color-mix(in srgb, var(--sk-solid) 34%, transparent); backdrop-filter:blur(24px) saturate(1.6);-webkit-backdrop-filter:blur(24px) saturate(1.6); box-shadow:0 12px 30px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.11); } #neu.nv-3 .nav-inner > *:first-child{padding:0 12px 0 10px;} /* 4 · Проявление */ #neu.nv-4:not(.nav-stuck) nav.nav, #neu.nv-5:not(.nav-stuck) nav.nav{background:transparent;box-shadow:none;} @media (max-width:768px){ #neu[class*="nv-"] #mob-tb-left, #neu[class*="nv-"] #mob-tb-right, #neu[class*="nv-"] #mob-tabbar{ background:color-mix(in srgb, var(--sk-solid) 60%, transparent); backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4); box-shadow:0 10px 26px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.07); } #neu.nv-2 #mob-tb-left, #neu.nv-2 #mob-tb-right, #neu.nv-2 #mob-tabbar, #neu.nv-3 #mob-tb-left, #neu.nv-3 #mob-tb-right, #neu.nv-3 #mob-tabbar, #neu.nv-5 #mob-tb-left, #neu.nv-5 #mob-tb-right, #neu.nv-5 #mob-tabbar{ background:color-mix(in srgb, var(--sk-solid) 26%, transparent); backdrop-filter:blur(26px) saturate(1.7);-webkit-backdrop-filter:blur(26px) saturate(1.7); box-shadow:0 10px 26px rgba(0,0,0,.26), inset 0 0 0 1px rgba(255,255,255,.12); } } @media (max-width:768px){ .sk-bar{left:10px;right:10px;transform:none;justify-content:space-between;} .sk-bar button{padding:8px 7px;font-size:11px;} } @media (max-width:768px){ .sk-bar{overflow-x:auto;justify-content:flex-start;scrollbar-width:none;} } /* 6 · Автоскрытие — наверху без плашки; при прокрутке уезжает за край, от мыши у верхнего края возвращается стеклом */ #neu.nv-6 nav.nav{ transition:transform .42s cubic-bezier(.3,.7,.3,1), opacity .3s ease, background-color .35s var(--neu-ease), box-shadow .35s var(--neu-ease); } /* плашки нет ни наверху, ни посреди страницы: логотип и кнопки висят сами по себе. Посреди страницы под ними обложки, поэтому каждая кнопка получает свою матовую подложку. */ #neu.nv-6 nav.nav{background:transparent;box-shadow:none;pointer-events:none;} #neu.nv-6 .nav-inner > *{pointer-events:auto;} #neu.nv-6.nav-stuck nav.nav{--neu-bg:color-mix(in srgb, var(--sk-solid) 58%, transparent);} #neu.nv-6.nav-stuck .nav-logo img, #neu.nv-6.nav-stuck .nav-logo-img, #neu.nv-6.nav-stuck .nav-event-btn, #neu.nv-6.nav-stuck .gf-toggle, #neu.nv-6.nav-stuck #desktopNotifBtn, #neu.nv-6.nav-stuck .nav-avatar, #neu.nv-6.nav-stuck .nav-user{backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);} #neu.nv-6.nav-stuck .nav-logo span, #neu.nv-6.nav-stuck .nav-logo-text{text-shadow:0 1px 3px rgba(0,0,0,.95), 0 0 18px rgba(0,0,0,.9), 0 0 34px rgba(0,0,0,.7);} #neu.nv-6.nav-hidden nav.nav{transform:translateY(calc(-100% - 24px));opacity:0;pointer-events:none;} /* метка у верхнего края: навбар здесь, подведи мышь */ #neu.nv-6 .page::before{ content:'';position:fixed;top:7px;left:50%;width:46px;height:4px;margin-left:-23px;border-radius:2px;z-index:290; background:rgba(255,255,255,.26);opacity:0;transition:opacity .3s ease .2s;pointer-events:none; } #neu.nv-6.nav-hidden .page::before{opacity:1;} @media (prefers-reduced-motion:reduce){ #neu.nv-6 nav.nav{transition:opacity .2s ease;} #neu.nv-6.nav-hidden nav.nav{transform:none;} } @media (max-width:768px){ #neu.nv-6 .page::before{display:none;} #neu.nv-6 #mob-tb-left, #neu.nv-6 #mob-tb-right, #neu.nv-6 #mob-tabbar{ background:color-mix(in srgb, var(--sk-solid) 26%, transparent); backdrop-filter:blur(26px) saturate(1.7);-webkit-backdrop-filter:blur(26px) saturate(1.7); box-shadow:0 10px 26px rgba(0,0,0,.26), inset 0 0 0 1px rgba(255,255,255,.12); } } /* ════════════ «ПОЛКА»: трофеи убраны, плитка игры окрашена средним цветом обложки ════════════ Цвет считает skins.js (tint) и кладёт в строку переменные --cv-1/2/3 и класс cv-ready. Красится слой .game-row-bg: слева сам цвет, вправо он сходит в полную прозрачность. Слой плавно проявляется; пока цвет не посчитан, плитки нет вовсе. */ #neu.sk-a .trophy-wrap{display:none;} #neu.sk-a #gamesList .game-row, #neu.sk-a #gamesList .game-row[class*="trophy-"], #neu.sk-a #filmsList .film-row, #neu.sk-a #filmsList .film-row[class*="trophy-"]{background:transparent;box-shadow:none;} #neu.sk-a #gamesList .game-row-bg, #neu.sk-a #filmsList .film-row-bg{ display:block;inset:0;border-radius:inherit;filter:none;transform:none; background:linear-gradient(90deg, var(--cv-1, transparent) 0%, color-mix(in srgb, var(--cv-1, transparent) 55%, transparent) 42%, transparent 100%)!important; opacity:0;transition:opacity .6s ease, filter .25s ease; } #neu.sk-a #gamesList .game-row-bg::after, #neu.sk-a #filmsList .film-row-bg::after{display:none;} #neu.sk-a #gamesList .game-row.cv-ready .game-row-bg, #neu.sk-a #filmsList .film-row.cv-ready .film-row-bg{opacity:1;} #neu.sk-a #gamesList .game-row:hover .game-row-bg, #neu.sk-a #filmsList .film-row:hover .film-row-bg{filter:brightness(1.14);} #neu.sk-a #gamesList .game-row.cv-ready .game-row-genre, #neu.sk-a #filmsList .film-row.cv-ready .film-row-genre{border-color:rgba(255,255,255,.14);} #neu.sk-a #gamesList .game-row.cv-ready .game-row-edit-btn, #neu.sk-a #filmsList .film-row.cv-ready .film-row-edit-btn{background:rgba(255,255,255,.08)!important;box-shadow:none;} #neu.sk-a #gamesList.tiles-mode .game-tile:not(.expanded) .game-row, #neu.sk-a #filmsList.tiles-mode .film-tile:not(.expanded) .film-row{background:var(--sk-tile);} #neu.sk-a #gamesList.tiles-mode .game-tile:not(.expanded) .game-row-bg, #neu.sk-a #filmsList.tiles-mode .film-tile:not(.expanded) .film-row-bg{display:none;} @media (min-width:769px){ #neu.sk-a .content-wrap:has(.trophy-wrap){padding-left:40px;} #neu.sk-a #gamesList:not(.tiles-mode), #neu.sk-a #filmsList:not(.tiles-mode){gap:12px;} #neu.sk-a #gamesList:not(.tiles-mode) .game-tile + .game-tile, #neu.sk-a #filmsList:not(.tiles-mode) .film-tile + .film-tile{border-top:0;} #neu.sk-a #gamesList .game-row, #neu.sk-a #filmsList .film-row{margin:0;padding:20px 26px 20px 20px;border-radius:22px;} #neu.sk-a #gamesList .game-row:hover, #neu.sk-a #filmsList .film-row:hover{background-color:transparent;} #neu.sk-a #gamesList .game-row-rating, #neu.sk-a #filmsList .film-row-rating{top:18px;right:26px;} #neu.sk-a #gamesList .game-row-cover-inner, #neu.sk-a #filmsList .film-row-cover-inner{box-shadow:0 12px 26px rgba(0,0,0,.4);} #neu.sk-a .games-controls, #neu.sk-a .films-controls{margin-bottom:22px;} } @media (max-width:768px){ #neu.sk-a #gamesList .game-row, #neu.sk-a #filmsList .film-row{border:0;} #neu.sk-a #gamesList .game-row.cv-ready .grc-mobile-only, #neu.sk-a #filmsList .film-row.cv-ready .grc-mobile-only{background:rgba(0,0,0,.22);} } /* ════════════ «ПОЛКА»: панель добавления / редактирования игры ════════════ Плоская шторка справа. Выбранная игра — крупной обложкой наверху, верх панели окрашен цветом обложки (--pn-cv ставит skins.js). Порядок полей меняет skins.js (panel()): игра → категория → оценка → комментарий → свёрнутые «Подробности». */ #neu.sk-a #gp-panel, #neu.sk-a #fp-panel{ --neu-out-xs:0 0 0 0 transparent;--neu-out-sm:0 0 0 0 transparent;--neu-out:0 0 0 0 transparent;--neu-out-lg:0 0 0 0 transparent; --neu-in-xs:0 0 0 0 transparent;--neu-in-sm:0 0 0 0 transparent;--neu-in:0 0 0 0 transparent; --neu-bg:#121418;--pn-line:rgba(255,255,255,.09);--pn-field:rgba(255,255,255,.045); top:0;right:-520px;width:468px;height:100vh;border-radius:26px 0 0 26px; background:#121418;box-shadow:-30px 0 80px rgba(0,0,0,.55); } #neu.sk-a #gp-panel.open, #neu.sk-a #fp-panel.open{right:0;} #neu.sk-a #gp-overlay, #neu.sk-a #fp-overlay{background:rgba(8,9,12,.62)!important;backdrop-filter:blur(3px)!important;-webkit-backdrop-filter:blur(3px)!important;} #neu.sk-a #gp-panel::before, #neu.sk-a #fp-panel::before{ content:'';position:absolute;inset:0 0 auto 0;height:380px;border-radius:inherit;pointer-events:none; background:linear-gradient(180deg, var(--pn-cv, transparent) 0%, transparent 100%); opacity:0;transition:opacity .5s ease; } #neu.sk-a #gp-panel.has-tint::before, #neu.sk-a #fp-panel.has-tint::before{opacity:1;} #neu.sk-a #gp-panel .gp-header, #neu.sk-a #gp-panel .gp-body, #neu.sk-a #gp-panel .gp-footer, #neu.sk-a #fp-panel .fp-header, #neu.sk-a #fp-panel .fp-body, #neu.sk-a #fp-panel .fp-footer{position:relative;background:none;} #neu.sk-a #gp-panel .gp-header, #neu.sk-a #fp-panel .fp-header{padding:22px 26px 12px;} #neu.sk-a #gp-panel .gp-title, #neu.sk-a #fp-panel .fp-title{font-size:15px;text-shadow:none;} #neu.sk-a #gp-panel .gp-close, #neu.sk-a #gp-panel .gp-ap-close, #neu.sk-a #fp-panel .fp-close, #neu.sk-a #fp-panel .fp-ap-close{background:rgba(255,255,255,.07);} #neu.sk-a #gp-panel .gp-close:hover, #neu.sk-a #gp-panel .gp-ap-close:hover, #neu.sk-a #fp-panel .fp-close:hover, #neu.sk-a #fp-panel .fp-ap-close:hover{background:rgba(255,255,255,.13);color:var(--neu-text);} #neu.sk-a #gp-panel .gp-body, #neu.sk-a #fp-panel .fp-body{padding:8px 26px 26px;} #neu.sk-a #gp-panel .gp-divider, #neu.sk-a #fp-panel .fp-divider{display:none;} #neu.sk-a #gp-panel .gp-label, #neu.sk-a #fp-panel .fp-label{font-size:12.5px;font-weight:600;color:var(--neu-text-2);margin-bottom:9px;} #neu.sk-a #gp-panel .pn-sec, #neu.sk-a #fp-panel .pn-sec{margin-bottom:24px;} #neu.sk-a #gp-panel .pn-sec > :last-child, #neu.sk-a #fp-panel .pn-sec > :last-child{margin-bottom:0;} /* выбранная игра — афиша панели */ #neu.sk-a #gp-panel #gp-selected, #neu.sk-a #fp-panel #fp-selected{background:none;padding:0;margin:4px 0 26px;gap:18px;align-items:flex-end;border-radius:0;} #neu.sk-a #gp-panel #gp-sel-cover, #neu.sk-a #gp-panel #gp-sel-cover-ph, #neu.sk-a #fp-panel #fp-sel-cover, #neu.sk-a #fp-panel #fp-sel-cover-ph{width:112px;height:150px;border-radius:14px;box-shadow:0 18px 36px rgba(0,0,0,.5);} #neu.sk-a #gp-panel .gp-sel-info, #neu.sk-a #fp-panel .fp-sel-info{padding-bottom:4px;} #neu.sk-a #gp-panel .gp-sel-name, #neu.sk-a #fp-panel .fp-sel-name{ font-family:var(--neu-fd);font-size:19px;font-weight:800;line-height:1.2;white-space:normal; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-shadow:0 2px 16px rgba(0,0,0,.5); } #neu.sk-a #gp-panel .gp-sel-meta, #neu.sk-a #fp-panel .fp-sel-meta{font-size:13px;color:var(--neu-text-2);margin-top:7px;line-height:1.4;} #neu.sk-a #gp-panel .gp-sel-change, #neu.sk-a #fp-panel .fp-sel-change{font-size:13px;margin-top:10px;color:var(--neu-accent);} #neu.sk-a #gp-panel.has-game .pn-search, #neu.sk-a #fp-panel.has-game .pn-search{display:none;} /* поля */ #neu.sk-a #gp-panel #gp-search-input, #neu.sk-a #gp-panel #gp-ap-search, #neu.sk-a #gp-panel #gp-tag-search, #neu.sk-a #gp-panel .gp-input, #neu.sk-a #gp-panel .gp-textarea, #neu.sk-a #gp-panel .gp-rating-manual, #neu.sk-a #fp-panel #fp-search-input, #neu.sk-a #fp-panel #fp-ap-search, #neu.sk-a #fp-panel #fp-tag-search, #neu.sk-a #fp-panel .fp-input, #neu.sk-a #fp-panel .fp-textarea, #neu.sk-a #fp-panel .fp-rating-manual{ background:var(--pn-field);border:1px solid var(--pn-line);border-radius:12px; transition:border-color .16s ease, background-color .16s ease; } #neu.sk-a #gp-panel #gp-search-input:focus, #neu.sk-a #gp-panel #gp-ap-search:focus, #neu.sk-a #gp-panel #gp-tag-search:focus, #neu.sk-a #gp-panel .gp-input:focus, #neu.sk-a #gp-panel .gp-textarea:focus, #neu.sk-a #gp-panel .gp-rating-manual:focus, #neu.sk-a #fp-panel #fp-search-input:focus, #neu.sk-a #fp-panel #fp-ap-search:focus, #neu.sk-a #fp-panel #fp-tag-search:focus, #neu.sk-a #fp-panel .fp-input:focus, #neu.sk-a #fp-panel .fp-textarea:focus, #neu.sk-a #fp-panel .fp-rating-manual:focus{border-color:var(--neu-accent);background:rgba(255,255,255,.07);box-shadow:none;} #neu.sk-a #gp-panel #gp-search-input, #neu.sk-a #fp-panel #fp-search-input{padding-top:13px;padding-bottom:13px;font-size:15px;} #neu.sk-a #gp-panel .gp-input, #neu.sk-a #fp-panel .fp-input{margin-bottom:0;} #neu.sk-a #gp-panel .gp-textarea, #neu.sk-a #fp-panel .fp-textarea{min-height:104px;} #neu.sk-a #gp-panel .gp-platform-btn, #neu.sk-a #gp-panel #gp-platform-all-btn, #neu.sk-a #fp-panel .fp-platform-btn, #neu.sk-a #fp-panel #fp-platform-all-btn{background:var(--pn-field);border:1px solid var(--pn-line);border-radius:12px;} #neu.sk-a #gp-panel .gp-platform-btn:hover, #neu.sk-a #gp-panel .gp-platform-btn.open, #neu.sk-a #gp-panel #gp-platform-all-btn:hover, #neu.sk-a #fp-panel .fp-platform-btn:hover, #neu.sk-a #fp-panel .fp-platform-btn.open, #neu.sk-a #fp-panel #fp-platform-all-btn:hover{border-color:var(--neu-accent);} #neu.sk-a #gp-panel .gp-platform-menu, #neu.sk-a #gp-panel #gp-tag-dropdown, #neu.sk-a #gp-panel #gp-results, #neu.sk-a #gp-panel #gp-ap-modal, #neu.sk-a #fp-panel .fp-platform-menu, #neu.sk-a #fp-panel #fp-tag-dropdown, #neu.sk-a #fp-panel #fp-results, #neu.sk-a #fp-panel #fp-ap-modal{background:#1a1d23;border:1px solid var(--pn-line);box-shadow:0 22px 46px rgba(0,0,0,.55);} #neu.sk-a #gp-panel .gp-result-item:hover, #neu.sk-a #gp-panel .gp-tag-opt:hover, #neu.sk-a #gp-panel .gp-ap-item:hover, #neu.sk-a #fp-panel .fp-result-item:hover, #neu.sk-a #fp-panel .fp-tag-opt:hover, #neu.sk-a #fp-panel .fp-ap-item:hover{background:rgba(255,255,255,.06);box-shadow:none;} /* категория — шесть клавиш, у каждой цвет своего статуса */ #neu.sk-a #gp-panel .gp-cats, #neu.sk-a #fp-panel .fp-cats{display:grid;grid-template-columns:repeat(3, 1fr);gap:8px;margin-bottom:0;} #neu.sk-a #gp-panel .gp-cat, #neu.sk-a #fp-panel .fp-cat{ --c:#94a3b8;display:flex;align-items:center;gap:8px;padding:11px 12px;border-radius:12px; background:transparent;border:1px solid var(--pn-line);color:var(--neu-text-2);font-size:13px;white-space:nowrap;text-shadow:none; transition:background-color .16s ease, border-color .16s ease, color .16s ease; } #neu.sk-a #gp-panel .gp-cat::before, #neu.sk-a #fp-panel .fp-cat::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--c);flex-shrink:0;} #neu.sk-a #gp-panel .gp-cat:hover, #neu.sk-a #fp-panel .fp-cat:hover{border-color:color-mix(in srgb, var(--c) 55%, transparent);color:var(--neu-text);} #neu.sk-a #gp-panel .gp-cat.active, #neu.sk-a #fp-panel .fp-cat.active{background:color-mix(in srgb, var(--c) 15%, transparent);border-color:color-mix(in srgb, var(--c) 62%, transparent);color:var(--c);} #neu.sk-a #gp-panel .gp-cat[data-status="Пройдено"], #neu.sk-a #fp-panel .fp-cat[data-status="Пройдено"]{--c:#6BFF9E;} #neu.sk-a #gp-panel .gp-cat[data-status="Дроп"], #neu.sk-a #fp-panel .fp-cat[data-status="Дроп"]{--c:#FF6B6B;} #neu.sk-a #gp-panel .gp-cat[data-status="Бесконечная"], #neu.sk-a #fp-panel .fp-cat[data-status="Бесконечная"]{--c:#c084fc;} #neu.sk-a #gp-panel .gp-cat[data-status="На паузе"], #neu.sk-a #fp-panel .fp-cat[data-status="На паузе"]{--c:#FFD166;} #neu.sk-a #gp-panel .gp-cat[data-status="Вишлист"], #neu.sk-a #fp-panel .fp-cat[data-status="Вишлист"]{--c:#60a5fa;} #neu.sk-a #gp-panel .gp-cat[data-status="В очереди"], #neu.sk-a #fp-panel .fp-cat[data-status="В очереди"]{--c:#94a3b8;} /* пилюли: платформа, режим оценки */ #neu.sk-a #gp-panel .gp-platform-grid, #neu.sk-a #fp-panel .fp-platform-grid{gap:8px;margin-bottom:10px;} #neu.sk-a #gp-panel .gp-plat, #neu.sk-a #gp-panel .gp-rating-mode-btn, #neu.sk-a #fp-panel .fp-plat, #neu.sk-a #fp-panel .fp-rating-mode-btn{background:transparent;border:1px solid var(--pn-line);text-shadow:none;} #neu.sk-a #gp-panel .gp-plat:hover, #neu.sk-a #gp-panel .gp-rating-mode-btn:hover, #neu.sk-a #fp-panel .fp-plat:hover, #neu.sk-a #fp-panel .fp-rating-mode-btn:hover{border-color:rgba(var(--neu-accent-rgb),.5);color:var(--neu-text);} #neu.sk-a #gp-panel .gp-plat.active, #neu.sk-a #gp-panel .gp-rating-mode-btn.active, #neu.sk-a #fp-panel .fp-plat.active, #neu.sk-a #fp-panel .fp-rating-mode-btn.active{background:rgba(var(--neu-accent-rgb),.14);border-color:rgba(var(--neu-accent-rgb),.6);color:var(--neu-accent);} #neu.sk-a #gp-panel .gp-plat-custom, #neu.sk-a #fp-panel .fp-plat-custom{margin-top:0!important;} /* оценка — крупная цветная цифра, как в плитке игры */ #neu.sk-a #gp-panel .pn-row, #neu.sk-a #fp-panel .pn-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;} #neu.sk-a #gp-panel .pn-row .gp-label, #neu.sk-a #fp-panel .pn-row .fp-label{margin-bottom:0;} #neu.sk-a #gp-panel .gp-rating-mode-toggle, #neu.sk-a #fp-panel .fp-rating-mode-toggle{margin:0;padding:3px;gap:2px;border-radius:999px;background:var(--pn-field);} #neu.sk-a #gp-panel .gp-rating-mode-btn, #neu.sk-a #fp-panel .fp-rating-mode-btn{padding:6px 13px;font-size:12px;border-color:transparent;} #neu.sk-a #gp-panel .gp-rating-mode-btn:hover, #neu.sk-a #fp-panel .fp-rating-mode-btn:hover{border-color:transparent;} #neu.sk-a #gp-panel .gp-rating-mode-btn.active, #neu.sk-a #fp-panel .fp-rating-mode-btn.active{border-color:transparent;background:rgba(255,255,255,.1);color:var(--neu-text);} #neu.sk-a #gp-panel .gp-rating-wrap, #neu.sk-a #fp-panel .fp-rating-wrap{margin-bottom:0;} #neu.sk-a #gp-panel .gp-rating-top, #neu.sk-a #fp-panel .fp-rating-top{gap:14px;margin-bottom:14px;align-items:center;} #neu.sk-a #gp-panel .gp-rating-bubble, #neu.sk-a #fp-panel .fp-rating-bubble{ width:auto;height:auto;min-width:58px;border-radius:0;justify-content:flex-start; background:none!important;box-shadow:none;text-shadow:none;font-size:44px;font-weight:800;line-height:1;letter-spacing:-.02em; } #neu.sk-a #gp-panel .gp-rating-label, #neu.sk-a #fp-panel .fp-rating-label{font-size:13px;color:var(--neu-text-2);} #neu.sk-a #gp-panel .gp-rating-manual, #neu.sk-a #fp-panel .fp-rating-manual{width:74px;padding:9px 8px;font-size:15px;} #neu.sk-a #gp-panel .gp-crit-row, #neu.sk-a #fp-panel .fp-crit-row{margin-bottom:14px;} #neu.sk-a #gp-panel .gp-crit-row-top, #neu.sk-a #fp-panel .fp-crit-row-top{font-size:13px;margin-bottom:8px;} #neu.sk-a #gp-panel .gp-slider, #neu.sk-a #fp-panel .fp-slider{ height:6px;border:0;border-radius:999px;box-shadow:none; background:linear-gradient(to right, var(--gp-slider-color, var(--fp-slider-color, var(--neu-accent))) 0%, var(--gp-slider-color, var(--fp-slider-color, var(--neu-accent))) var(--gp-pct, var(--fp-pct, 0%)), rgba(255,255,255,.1) var(--gp-pct, var(--fp-pct, 0%)))!important; } #neu.sk-a #gp-panel .gp-slider::-webkit-slider-thumb, #neu.sk-a #fp-panel .fp-slider::-webkit-slider-thumb{ width:18px;height:18px;border:3px solid #121418;border-radius:50%; background:var(--gp-slider-color, var(--fp-slider-color, var(--neu-accent)));box-shadow:0 0 0 1px rgba(255,255,255,.14), 0 4px 10px rgba(0,0,0,.4); } #neu.sk-a #gp-panel .gp-slider::-moz-range-thumb, #neu.sk-a #fp-panel .fp-slider::-moz-range-thumb{ width:18px;height:18px;border:3px solid #121418;border-radius:50%; background:var(--gp-slider-color, var(--fp-slider-color, var(--neu-accent)));box-shadow:0 0 0 1px rgba(255,255,255,.14), 0 4px 10px rgba(0,0,0,.4); } /* «Подробности» — всё второстепенное, свёрнуто */ #neu.sk-a #gp-panel .pn-more, #neu.sk-a #fp-panel .pn-more{border-top:1px solid var(--pn-line);margin-top:2px;} #neu.sk-a #gp-panel .pn-more > summary, #neu.sk-a #fp-panel .pn-more > summary{ list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:16px 0; font-size:14px;font-weight:600;color:var(--neu-text); } #neu.sk-a #gp-panel .pn-more > summary::-webkit-details-marker, #neu.sk-a #fp-panel .pn-more > summary::-webkit-details-marker{display:none;} #neu.sk-a #gp-panel .pn-more > summary span, #neu.sk-a #fp-panel .pn-more > summary span{font-weight:400;font-size:12.5px;color:var(--neu-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} #neu.sk-a #gp-panel .pn-more > summary svg, #neu.sk-a #fp-panel .pn-more > summary svg{margin-left:auto;flex-shrink:0;width:16px;height:16px;stroke:var(--neu-muted);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease;} #neu.sk-a #gp-panel .pn-more[open] > summary svg, #neu.sk-a #fp-panel .pn-more[open] > summary svg{transform:rotate(180deg);} #neu.sk-a #gp-panel .pn-more[open] > summary span, #neu.sk-a #fp-panel .pn-more[open] > summary span{display:none;} #neu.sk-a #gp-panel .pn-more > summary:hover, #neu.sk-a #fp-panel .pn-more > summary:hover{color:var(--neu-accent);} #neu.sk-a #gp-panel .pn-more-body, #neu.sk-a #fp-panel .pn-more-body{padding:6px 0 4px;} #neu.sk-a #gp-panel .pn-grid2, #neu.sk-a #fp-panel .pn-grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;} #neu.sk-a #gp-panel .pn-f-time > div:not(.gp-label), #neu.sk-a #fp-panel .pn-f-time > div:not(.fp-label){margin-bottom:0!important;} #neu.sk-a #gp-panel .pn-when > .pn-sec, #neu.sk-a #fp-panel .pn-when > .pn-sec{margin-bottom:0;min-width:0;} #neu.sk-a #gp-panel .pn-when .gp-label, #neu.sk-a #fp-panel .pn-when .fp-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} #neu.sk-a #gp-panel .gp-ranks, #neu.sk-a #fp-panel .fp-ranks{margin-bottom:0;gap:8px;} #neu.sk-a #gp-panel .gp-rank-btn, #neu.sk-a #fp-panel .fp-rank-btn{background:transparent;border:1px solid var(--pn-line);border-radius:14px;} #neu.sk-a #gp-panel .gp-rank-btn.active, #neu.sk-a #fp-panel .fp-rank-btn.active{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.3);color:var(--neu-text);} #neu.sk-a #gp-panel .gp-tag-search-wrap, #neu.sk-a #fp-panel .fp-tag-search-wrap{margin-bottom:0;} /* вишлист и очередь: игра ещё не пройдена — оценка, дата и время не нужны */ #neu.sk-a #gp-panel[data-st="Вишлист"] .pn-rating, #neu.sk-a #gp-panel[data-st="В очереди"] .pn-rating, #neu.sk-a #gp-panel[data-st="Вишлист"] .pn-when, #neu.sk-a #gp-panel[data-st="В очереди"] .pn-when, #neu.sk-a #fp-panel[data-st="Вишлист"] .pn-rating, #neu.sk-a #fp-panel[data-st="В очереди"] .pn-rating, #neu.sk-a #fp-panel[data-st="Вишлист"] .pn-when, #neu.sk-a #fp-panel[data-st="В очереди"] .pn-when{display:none;} /* низ: сохранить и тихая ссылка удаления */ #neu.sk-a #gp-panel .gp-footer, #neu.sk-a #fp-panel .fp-footer{flex-direction:column;align-items:stretch;gap:4px;padding:14px 26px 16px;border-top:1px solid var(--pn-line);} #neu.sk-a #gp-panel .gp-btn-save, #neu.sk-a #fp-panel .fp-btn-save{ box-shadow:inset 0 1px 0 rgba(255,255,255,.32), 0 10px 24px rgba(var(--neu-accent-rgb),.24); } #neu.sk-a #gp-panel .gp-btn-save:hover, #neu.sk-a #fp-panel .fp-btn-save:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.32), 0 12px 30px rgba(var(--neu-accent-rgb),.4);} #neu.sk-a #gp-panel .gp-btn-delete, #neu.sk-a #fp-panel .fp-btn-delete{ width:auto;height:auto;align-self:center;gap:7px;padding:9px 12px;border-radius:10px; background:none;color:var(--neu-muted);font-family:var(--neu-fb);font-size:13px; } #neu.sk-a #gp-panel .gp-btn-delete svg, #neu.sk-a #fp-panel .fp-btn-delete svg{width:14px;height:14px;} #neu.sk-a #gp-panel .gp-btn-delete:hover, #neu.sk-a #fp-panel .fp-btn-delete:hover{background:none;color:var(--neu-bad);} @media (max-width:768px){ #neu.sk-a #gp-panel, #neu.sk-a #fp-panel{border-radius:0;} #neu.sk-a #gp-panel #gp-sel-cover, #neu.sk-a #gp-panel #gp-sel-cover-ph, #neu.sk-a #fp-panel #fp-sel-cover, #neu.sk-a #fp-panel #fp-sel-cover-ph{width:92px;height:124px;} #neu.sk-a #gp-panel .gp-sel-name, #neu.sk-a #fp-panel .fp-sel-name{font-size:17px;} #neu.sk-a #gp-panel .gp-cat, #neu.sk-a #fp-panel .fp-cat{padding:11px 9px;font-size:12px;gap:6px;} #neu.sk-a #gp-panel .gp-footer, #neu.sk-a #fp-panel .fp-footer{padding:12px 18px 14px!important;} } #neu.sk-a #gp-panel.no-rating .gp-rating-bubble, #neu.sk-a #fp-panel.no-rating .fp-rating-bubble{display:none;} #neu.sk-a #gp-panel.no-rating .gp-rating-label, #neu.sk-a #fp-panel.no-rating .fp-rating-label{font-size:14px;color:var(--neu-muted);} #neu.sk-a #gp-panel .gp-input, #neu.sk-a #fp-panel .fp-input{height:44px;box-sizing:border-box;} @media (max-width:768px){ #neu.sk-a #gp-panel, #neu.sk-a #fp-panel{max-width:100vw;} } /* достижения с профиля убраны (только визуально: сами достижения, опыт и окно в коде остаются); позже переедут в настройки — страница /dashboard/achievements уже есть */ #neu.sk-a .ph-ach-featured{display:none;} /* ════════════ «ПОЛКА»: ГЛАВНАЯ ════════════ Афиша: видео во всю ширину наверху, растворяется в тёмной странице; название — крупно слева на нём. Ниже полка библиотек стримеров и карусель ожидаемых игр. Навбар тот же, что в профиле (без плашки, с автоскрытием). */ html#neu.sk-a{--sk-solid:#1a1d23;} #neu.neu-home.sk-a body{ --neu-out-xs:0 0 0 0 transparent;--neu-out-sm:0 0 0 0 transparent;--neu-out:0 0 0 0 transparent;--neu-out-lg:0 0 0 0 transparent; --neu-in-xs:0 0 0 0 transparent;--neu-in-sm:0 0 0 0 transparent;--neu-in:0 0 0 0 transparent; --neu-bg:#0e1013;--neu-well:#14171c; --sk-tile:#16191e;--sk-line:rgba(255,255,255,.08); --sk-key-bg:#2b2f38;--sk-key:inset 0 1px 0 rgba(255,255,255,.07), 0 8px 18px rgba(0,0,0,.42); background:#0e1013; } #neu.neu-home.sk-a .neu-shell-toggle{display:none;} /* афиша */ #neu.neu-home.sk-a .hero-video-wrap{ position:absolute;top:0;left:0;right:0;max-width:none;margin:0;padding:0;height:clamp(540px, 96vh, 940px); border-radius:0;background:none;box-shadow:none; -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 48%, transparent 100%); mask-image:linear-gradient(to bottom, #000 0%, #000 48%, transparent 100%); } #neu.neu-home.sk-a .hero-video-wrap video{border-radius:0;opacity:.9;} #neu.neu-home.sk-a .hero-video-wrap::after{ inset:0;border-radius:0;box-shadow:none; background: linear-gradient(to right, rgba(14,16,19,.72) 0%, rgba(14,16,19,.2) 46%, transparent 72%), linear-gradient(to bottom, rgba(14,16,19,.42) 0%, transparent 24%, rgba(14,16,19,.5) 100%); } #neu.neu-home.sk-a .hero-video-wrap::before{inset:0;border-radius:0;} #neu.neu-home.sk-a .hero{ height:auto;min-height:clamp(380px, 66vh, 680px);padding:0;justify-content:flex-end;align-items:stretch;pointer-events:auto; } #neu.neu-home.sk-a .hero-bottom{ width:100%;max-width:1220px;margin:0 auto;padding:0 40px;align-items:flex-start;text-align:left; } #neu.neu-home.sk-a .hero-title-big{ font-size:clamp(58px, 9.6vw, 148px);line-height:.9;letter-spacing:-.025em; text-shadow:0 4px 40px rgba(0,0,0,.55); } #neu.neu-home.sk-a .hero-title-big br{display:inline;} #neu.neu-home.sk-a .hero-deck{margin-top:26px;padding:0 40px;align-items:flex-end;} #neu.neu-home.sk-a .hero-tagline{font-size:20px;text-shadow:0 2px 18px rgba(0,0,0,.6);} #neu.neu-home.sk-a .hero-sub{color:var(--neu-text-2);text-shadow:0 1px 14px rgba(0,0,0,.7);max-width:52ch;} #neu.neu-home.sk-a .neu-key{ background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);box-shadow:none; backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); } #neu.neu-home.sk-a .neu-key:hover{background:rgba(255,255,255,.16);} #neu.neu-home.sk-a .neu-key--accent{ border-color:transparent;background:linear-gradient(145deg,var(--neu-accent-2),var(--neu-accent)); box-shadow:inset 0 1px 0 rgba(255,255,255,.32), 0 10px 24px rgba(var(--neu-accent-rgb),.26); } /* при наведении акцентная кнопка остаётся своего цвета и становится ярче (общее правило .neu-key:hover выше красило её фон в серо-прозрачный, как у обычной кнопки) */ #neu.neu-home.sk-a .neu-key--accent:hover{ background:linear-gradient(145deg,var(--neu-accent-2),var(--neu-accent));filter:brightness(1.1); box-shadow:inset 0 1px 0 rgba(255,255,255,.32), 0 12px 30px rgba(var(--neu-accent-rgb),.42); } /* поиск в навбаре — отдельная матовая подложка, как у остальных кнопок */ #neu.neu-home.sk-a .nav-search-input{ background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.12); backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4); } #neu.neu-home.sk-a .nav-search-input:focus{background:rgba(255,255,255,.14);border-color:var(--neu-accent);box-shadow:none;} #neu.neu-home.sk-a .nav-search-input::placeholder{color:var(--neu-text-2);} #neu.neu-home.sk-a .search-dropdown{ --neu-bg:var(--sk-solid);background:var(--sk-solid);border:1px solid rgba(255,255,255,.09);box-shadow:0 24px 50px rgba(0,0,0,.55); } #neu.neu-home.sk-a .search-item:hover{background:rgba(255,255,255,.06);} #neu.neu-home.sk-a .search-item-add{background:rgba(255,255,255,.08);} /* секции */ #neu.neu-home.sk-a .section-wrap{padding:64px 0 0;} #neu.neu-home.sk-a .section-inner{padding:0 40px;} #neu.neu-home.sk-a .sec-head{margin-bottom:22px;align-items:baseline;} #neu.neu-home.sk-a .sec-title{font-size:22px;text-shadow:none;} #neu.neu-home.sk-a .sec-badge{background:none;padding:0 0 0 16px;font-size:13px;} #neu.neu-home.sk-a .sec-badge::before{left:0;box-shadow:none;} /* полка библиотек стримеров */ #neu.neu-home.sk-a .lib-wrap{display:block;} #neu.neu-home.sk-a .lib-count{font-family:var(--neu-fd);font-size:14px;font-weight:700;color:var(--neu-dim);} #neu.neu-home.sk-a .lib-grid{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:16px;} #neu.neu-home.sk-a .lib-card{ position:relative;display:flex;flex-direction:column;gap:18px;padding:20px;border-radius:22px;overflow:hidden; background:var(--sk-tile);color:var(--neu-text);text-decoration:none; transition:transform .22s var(--neu-ease), box-shadow .22s var(--neu-ease); } #neu.neu-home.sk-a .lib-card:hover{transform:translateY(-4px);box-shadow:0 22px 44px rgba(0,0,0,.5);} #neu.neu-home.sk-a .lib-card.lib-extra{display:none;} #neu.neu-home.sk-a .lib-grid.all .lib-card.lib-extra{display:flex;} #neu.neu-home.sk-a .lib-bg{ position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .6s ease; background:linear-gradient(135deg, var(--cv-1, transparent) 0%, transparent 78%); } #neu.neu-home.sk-a .lib-card.cv-ready .lib-bg{opacity:1;} #neu.neu-home.sk-a .lib-top, #neu.neu-home.sk-a .lib-covers{position:relative;} #neu.neu-home.sk-a .lib-top{display:flex;align-items:center;gap:14px;min-width:0;} #neu.neu-home.sk-a .lib-avatar{ width:50px;height:50px;border-radius:50%;flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center; background:rgba(255,255,255,.08); } #neu.neu-home.sk-a .lib-avatar img{width:100%;height:100%;object-fit:cover;display:block;} #neu.neu-home.sk-a .lib-avatar svg{width:22px;height:22px;fill:none;stroke:var(--neu-muted);stroke-width:1.6;stroke-linecap:round;} #neu.neu-home.sk-a .lib-avatar.live{box-shadow:0 0 0 2px var(--sk-tile), 0 0 0 4px var(--neu-bad);} #neu.neu-home.sk-a .lib-who{display:flex;flex-direction:column;gap:5px;min-width:0;} #neu.neu-home.sk-a .lib-name{font-family:var(--neu-fd);font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} #neu.neu-home.sk-a .lib-meta{font-size:13px;color:var(--neu-text-2);line-height:1.35;} #neu.neu-home.sk-a .lib-live{color:var(--neu-bad);font-weight:600;margin-right:8px;} #neu.neu-home.sk-a .lib-covers{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:9px;} #neu.neu-home.sk-a .lib-cover{aspect-ratio:3 / 4;border-radius:10px;overflow:hidden;background:rgba(255,255,255,.05);box-shadow:0 8px 18px rgba(0,0,0,.35);} #neu.neu-home.sk-a .lib-cover img{width:100%;height:100%;object-fit:cover;display:block;} #neu.neu-home.sk-a .lib-empty{grid-column:1 / -1;padding:26px 0;font-size:13px;color:var(--neu-muted);} #neu.neu-home.sk-a .lib-more{ display:block;margin:22px auto 0;padding:12px 24px;border:0;border-radius:999px;cursor:pointer; font:600 14px var(--neu-fb);color:var(--neu-text);background:var(--sk-key-bg);box-shadow:var(--sk-key); } #neu.neu-home.sk-a .lib-more:hover{color:var(--neu-accent);} /* карусель ожидаемых игр — без лотка, карточки с обычной тенью */ #neu.neu-home.sk-a .carousel-outer{padding:22px 0 14px;border-radius:0;overflow:visible;} #neu.neu-home.sk-a .c-card{padding:0;border-radius:16px;background:var(--sk-tile);box-shadow:0 14px 30px rgba(0,0,0,.45);} #neu.neu-home.sk-a .c-card .c-cover-wrap{inset:0;border-radius:inherit;} #neu.neu-home.sk-a .c-card[data-size="lg"]{box-shadow:0 26px 60px rgba(0,0,0,.6), 0 0 0 2px rgba(var(--neu-accent-rgb),.6);} #neu.neu-home.sk-a .c-card .c-yt{inset:0;width:100%;height:100%;border-radius:inherit;} #neu.neu-home.sk-a .c-info{left:0;right:0;bottom:0;border-radius:0;} #neu.neu-home.sk-a .c-close, #neu.neu-home.sk-a .card-add-btn-c{top:10px;right:10px;background:rgba(14,16,19,.82);box-shadow:none;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);} #neu.neu-home.sk-a .dots{gap:9px;margin-top:22px;} #neu.neu-home.sk-a .dot{width:8px;height:8px;background:rgba(255,255,255,.18);} #neu.neu-home.sk-a .dot.on{background:var(--neu-accent);box-shadow:none;} /* окна, низ страницы, чат */ #neu.neu-home.sk-a .game-modal-box, #neu.neu-home.sk-a .upcoming-modal-box{background:#16191e;border:1px solid var(--sk-line);border-radius:24px;box-shadow:0 30px 80px rgba(0,0,0,.6);} #neu.neu-home.sk-a .game-modal-tag, #neu.neu-home.sk-a .upcoming-modal-tag{background:transparent;border:1px solid var(--sk-line);} #neu.neu-home.sk-a .gt-footer{background:transparent!important;margin-top:80px;} #neu.neu-home.sk-a .gt-footer::before{background:var(--sk-line);box-shadow:none;} #neu.neu-home.sk-a .gt-footer-soc{background:rgba(255,255,255,.06);} @media (max-width:1020px){ #neu.neu-home.sk-a .lib-grid{grid-template-columns:repeat(2, minmax(0, 1fr));} } @media (max-width:768px){ #neu.neu-home.sk-a .hero-video-wrap{top:0;left:0;right:0;border-radius:0;height:clamp(440px, 78vh, 640px);} #neu.neu-home.sk-a .hero-video-wrap video, #neu.neu-home.sk-a .hero-video-wrap::after, #neu.neu-home.sk-a .hero-video-wrap::before{border-radius:0;} #neu.neu-home.sk-a .hero{height:auto;min-height:clamp(320px, 54vh, 460px);padding:0;} #neu.neu-home.sk-a .hero-bottom{padding:0 20px;} #neu.neu-home.sk-a .hero-title-big{font-size:clamp(46px, 15.5vw, 76px)!important;} #neu.neu-home.sk-a .hero-deck{margin-top:18px;padding:0 20px;gap:18px;} #neu.neu-home.sk-a .hero-tagline{font-size:17px;} #neu.neu-home.sk-a .hero-deck-actions{width:100%;gap:10px;} #neu.neu-home.sk-a .hero-deck-actions .neu-key{flex:1;justify-content:center;} #neu.neu-home.sk-a .section-wrap{padding:48px 0 0;} #neu.neu-home.sk-a .section-inner{padding:0 16px;} #neu.neu-home.sk-a .sec-title{font-size:18px;} #neu.neu-home.sk-a .lib-grid{grid-template-columns:1fr;gap:12px;} #neu.neu-home.sk-a .lib-card{padding:16px;gap:14px;} #neu.neu-home.sk-a .gt-footer{margin-top:56px;} } #neu.neu-home.sk-a .nav-search-ico{z-index:1;stroke:var(--neu-text-2);} #neu.neu-home.sk-a .hero-title-big{text-align:left;} @media (max-width:768px){ #neu.neu-home.sk-a .hero-bottom{align-items:flex-start;text-align:left;} #neu.neu-home.sk-a .hero-title-big{font-size:clamp(40px, 13.2vw, 66px)!important;} } @media (max-width:768px){ #neu.neu-home.sk-a .hero-title-big{text-align:left!important;margin-left:0;margin-right:0;} #neu.neu-home.sk-a .hero-bottom{margin-bottom:0;} } /* ════════════ «ПОЛКА»: календарь релизов на неделю (главная) ════════════ Семь дней плитками: день недели, число, стопка обложек и число релизов; плитка окрашена цветом обложки самой ожидаемой игры дня. Под ними — полка выбранного дня. Данные: /api/igdb-week, разметка и логика — в templates/home.html. */ #neu.neu-home.sk-a .carousel-outer, #neu.neu-home.sk-a .dots, #neu.neu-home.sk-a #secBadge{display:none;} #neu.neu-home.sk-a .wk{display:block;} #neu.neu-home.sk-a .wk.failed{display:none;} #neu.neu-home.sk-a .wk-range{display:inline;font-size:14px;color:var(--neu-muted);} #neu.neu-home.sk-a .wk-days{display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));gap:12px;} #neu.neu-home.sk-a .wk-day{ position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:186px; padding:16px 16px 14px;border:0;border-radius:20px;overflow:hidden;cursor:pointer;text-align:left; background:var(--sk-tile);color:var(--neu-text);font-family:var(--neu-fb); transition:transform .2s var(--neu-ease), box-shadow .2s var(--neu-ease); } #neu.neu-home.sk-a .wk-day-bg{ position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .6s ease; background:linear-gradient(160deg, var(--cv-1, transparent) 0%, transparent 82%); } #neu.neu-home.sk-a .wk-day.cv-ready .wk-day-bg{opacity:.75;} #neu.neu-home.sk-a .wk-day.on .wk-day-bg{opacity:1;} #neu.neu-home.sk-a .wk-day > :not(.wk-day-bg){position:relative;} #neu.neu-home.sk-a .wk-day:hover{transform:translateY(-3px);} #neu.neu-home.sk-a .wk-day.on{box-shadow:inset 0 0 0 2px var(--neu-accent), 0 18px 36px rgba(0,0,0,.45);} #neu.neu-home.sk-a .wk-day:focus-visible{outline:2px solid var(--neu-accent);outline-offset:3px;} #neu.neu-home.sk-a .wk-wd{font-size:13px;font-weight:500;color:var(--neu-text-2);} #neu.neu-home.sk-a .wk-day.today .wk-wd{color:var(--neu-accent);font-weight:600;} #neu.neu-home.sk-a .wk-num{font-family:var(--neu-fd);font-size:34px;font-weight:800;line-height:1.05;letter-spacing:-.02em;} #neu.neu-home.sk-a .wk-stack{display:flex;margin-top:auto;padding-top:14px;} #neu.neu-home.sk-a .wk-mini{ width:38px;height:51px;border-radius:7px;overflow:hidden;flex-shrink:0;background:rgba(255,255,255,.07); box-shadow:0 0 0 2px var(--sk-tile), 0 6px 12px rgba(0,0,0,.4); } #neu.neu-home.sk-a .wk-mini + .wk-mini{margin-left:-12px;} #neu.neu-home.sk-a .wk-mini img{width:100%;height:100%;object-fit:cover;display:block;} #neu.neu-home.sk-a .wk-n{margin-top:10px;font-size:12.5px;color:var(--neu-text-2);white-space:nowrap;} #neu.neu-home.sk-a .wk-day.empty{cursor:pointer;} #neu.neu-home.sk-a .wk-day.empty .wk-num{color:var(--neu-dim);} #neu.neu-home.sk-a .wk-day.empty .wk-n{color:var(--neu-dim);margin-top:auto;} #neu.neu-home.sk-a .wk-day-head{display:flex;align-items:baseline;gap:14px;margin:30px 0 18px;} #neu.neu-home.sk-a .wk-day-title{font-family:var(--neu-fd);font-size:16px;font-weight:700;} #neu.neu-home.sk-a .wk-day-count{font-size:13px;color:var(--neu-muted);} #neu.neu-home.sk-a .wk-shelf{ display:grid;grid-template-columns:repeat(8, minmax(0, 1fr));gap:16px;align-items:start; transition:opacity .14s ease, transform .14s ease; } #neu.neu-home.sk-a .wk-shelf.swap{opacity:0;transform:translateY(6px);} #neu.neu-home.sk-a .wk-game{ display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0;border:0;background:none;cursor:pointer;text-align:left; color:var(--neu-text);font-family:var(--neu-fb);min-width:0; } #neu.neu-home.sk-a .wk-cover{ position:relative;display:block;aspect-ratio:3 / 4;border-radius:12px;overflow:hidden;background:var(--sk-tile); box-shadow:0 12px 26px rgba(0,0,0,.42);transition:transform .2s var(--neu-ease), box-shadow .2s var(--neu-ease); } #neu.neu-home.sk-a .wk-cover img{width:100%;height:100%;object-fit:cover;display:block;} #neu.neu-home.sk-a .wk-game:hover .wk-cover{transform:translateY(-4px);box-shadow:0 20px 38px rgba(0,0,0,.55);} #neu.neu-home.sk-a .wk-game:focus-visible{outline:0;} #neu.neu-home.sk-a .wk-game:focus-visible .wk-cover{box-shadow:0 0 0 2px var(--neu-accent);} #neu.neu-home.sk-a .wk-trailer{ position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center; background:rgba(14,16,19,.78);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); } #neu.neu-home.sk-a .wk-trailer svg{width:11px;height:11px;fill:var(--neu-accent);margin-left:1px;} #neu.neu-home.sk-a .wk-name{ margin-top:11px;font-size:13.5px;font-weight:600;line-height:1.3; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } #neu.neu-home.sk-a .wk-game:hover .wk-name{color:var(--neu-accent);} #neu.neu-home.sk-a .wk-plat{margin-top:4px;font-size:12px;color:var(--neu-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} #neu.neu-home.sk-a .wk-empty{grid-column:1 / -1;padding:34px 0;font-size:14px;color:var(--neu-muted);} @media (max-width:1100px){ #neu.neu-home.sk-a .wk-shelf{grid-template-columns:repeat(4, minmax(0, 1fr));} #neu.neu-home.sk-a .wk-day{padding:14px 12px 12px;min-height:170px;} #neu.neu-home.sk-a .wk-num{font-size:28px;} } @media (max-width:768px){ #neu.neu-home.sk-a .wk-days{ display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;margin:0 -16px;padding:4px 16px 10px;scrollbar-width:none; } #neu.neu-home.sk-a .wk-days::-webkit-scrollbar{display:none;} #neu.neu-home.sk-a .wk-day{flex:0 0 118px;min-height:164px;scroll-snap-align:start;} #neu.neu-home.sk-a .wk-day:hover{transform:none;} #neu.neu-home.sk-a .wk-day-head{margin:20px 0 14px;flex-wrap:wrap;gap:4px 12px;} #neu.neu-home.sk-a .wk-shelf{grid-template-columns:repeat(3, minmax(0, 1fr));gap:14px 10px;} #neu.neu-home.sk-a .wk-name{font-size:12.5px;} } @media (prefers-reduced-motion:reduce){ #neu.neu-home.sk-a .wk-shelf, #neu.neu-home.sk-a .wk-day, #neu.neu-home.sk-a .wk-cover{transition:none;} } @media (max-width:768px){ #neu.neu-home.sk-a .sec-head{flex-wrap:nowrap;gap:10px;} #neu.neu-home.sk-a .sec-title{font-size:17px;white-space:nowrap;} #neu.neu-home.sk-a .wk-range{font-size:13px;white-space:nowrap;} } /* календарь: «Показать все N» — полный список релизов дня */ #neu.neu-home.sk-a .wk-all{ margin-left:auto;padding:9px 18px;border:0;border-radius:999px;cursor:pointer;white-space:nowrap; font:600 13px var(--neu-fb);color:var(--neu-text);background:var(--sk-key-bg);box-shadow:var(--sk-key); transition:color .16s ease; } #neu.neu-home.sk-a .wk-all[hidden]{display:none;} #neu.neu-home.sk-a .wk-all:hover{color:var(--neu-accent);} #neu.neu-home.sk-a .wk-all:disabled{color:var(--neu-muted);cursor:default;} #neu.neu-home.sk-a .wk-all:focus-visible{outline:2px solid var(--neu-accent);outline-offset:3px;} #neu.neu-home.sk-a .wk-shelf{row-gap:26px;} @media (max-width:768px){ #neu.neu-home.sk-a .wk-day-head{align-items:center;} #neu.neu-home.sk-a .wk-day-title{flex-basis:100%;} #neu.neu-home.sk-a .wk-all{padding:9px 14px;} #neu.neu-home.sk-a .wk-shelf{row-gap:18px;} } /* ════════════ «ПОЛКА»: НАСТРОЙКИ (dashboard) ════════════ Тот же плоский тёмный вид и навбар, что в профиле. Слева — разделы списком (текущий — клавишей), сверху аватар с кольцом уровня; справа — блоки-плитки с плоскими полями. За шапкой приглушённо стоит фон профиля. Метка страниц — класс pg-dash на . */ #neu.pg-dash.sk-a body{ --neu-out-xs:0 0 0 0 transparent;--neu-out-sm:0 0 0 0 transparent;--neu-out:0 0 0 0 transparent;--neu-out-lg:0 0 0 0 transparent; --neu-in-xs:0 0 0 0 transparent;--neu-in-sm:0 0 0 0 transparent;--neu-in:0 0 0 0 transparent; --neu-bg:#0e1013;--neu-well:#14171c; --sk-tile:#16191e;--sk-line:rgba(255,255,255,.08);--sk-field:rgba(255,255,255,.045); --sk-key-bg:#2b2f38;--sk-key:inset 0 1px 0 rgba(255,255,255,.07), 0 8px 18px rgba(0,0,0,.42); } #neu.pg-dash.sk-a .db-hero{ display:block;position:absolute;top:0;left:0;right:0;height:380px;z-index:0;pointer-events:none; background-size:cover;background-position:center;opacity:.5; -webkit-mask-image:linear-gradient(to bottom, #000 0%, rgba(0,0,0,.55) 45%, transparent 100%); mask-image:linear-gradient(to bottom, #000 0%, rgba(0,0,0,.55) 45%, transparent 100%); } #neu.pg-dash.sk-a .container:has(.db-wrap){max-width:1200px;} #neu.pg-dash.sk-a .db-wrap{position:relative;z-index:1;gap:56px;padding:14px 20px 90px;} /* ── разделы ── */ #neu.pg-dash.sk-a .db-sidebar{width:240px;padding:0;border-radius:0;background:none;top:26px;max-height:calc(100vh - 52px);} #neu.pg-dash.sk-a .db-user{padding:0 0 18px;gap:16px;align-items:center;border-radius:0;} #neu.pg-dash.sk-a .db-user-avatar{ width:66px;height:66px;padding:6px;border:0;overflow:visible; background:conic-gradient(from 180deg, var(--neu-accent) calc(var(--lvl-pct, 0) * 1%), rgba(255,255,255,.15) 0); } #neu.pg-dash.sk-a .db-user-avatar img, #neu.pg-dash.sk-a .db-user-avatar svg{border-radius:50%;box-shadow:0 0 0 3px #0e1013;background:#16191e;} #neu.pg-dash.sk-a .db-user-avatar svg{width:100%;height:100%;padding:14px;box-sizing:border-box;} #neu.pg-dash.sk-a .db-user-text{display:flex;flex-direction:column;gap:5px;} #neu.pg-dash.sk-a .db-user-name{font-size:17px;font-weight:800;text-shadow:none;} #neu.pg-dash.sk-a .db-user-sub{display:block;font-size:13px;color:var(--neu-muted);transition:color .16s ease;} #neu.pg-dash.sk-a .db-user:hover .db-user-sub{color:var(--neu-accent);} #neu.pg-dash.sk-a .db-user-stats{ display:grid;grid-template-columns:repeat(3, 1fr);gap:0;padding:14px 0;margin-bottom:6px; border-top:1px solid var(--sk-line);border-bottom:1px solid var(--sk-line); } #neu.pg-dash.sk-a .db-stat-pill{padding:0 0 0 14px;border-radius:0;text-align:left;border-left:1px solid var(--sk-line);} #neu.pg-dash.sk-a .db-stat-pill:first-child{padding-left:0;border-left:0;} #neu.pg-dash.sk-a .db-stat-pill-val{font-size:18px;font-weight:800;color:var(--neu-text);text-shadow:none;} #neu.pg-dash.sk-a .db-stat-pill-lbl{font-size:12px;margin-top:6px;} #neu.pg-dash.sk-a .db-nav-section{font-size:12px;color:var(--neu-dim);padding:18px 12px 7px;} #neu.pg-dash.sk-a .db-nav-item{padding:10px 12px;border-radius:12px;margin-bottom:2px;transition:background-color .16s ease, color .16s ease;} #neu.pg-dash.sk-a .db-nav-item:hover{background:rgba(255,255,255,.045);} #neu.pg-dash.sk-a .db-nav-item.active{background:var(--sk-key-bg);box-shadow:var(--sk-key);} #neu.pg-dash.sk-a .db-nav-item.active svg{filter:none;} #neu.pg-dash.sk-a .db-nav-item .db-nav-badge{background:rgba(255,255,255,.09);color:var(--neu-text-2);padding:2px 8px;} #neu.pg-dash.sk-a .db-logout{margin-top:14px;padding-top:12px;border-top:1px solid var(--sk-line);} #neu.pg-dash.sk-a .db-logout::before{display:none;} #neu.pg-dash.sk-a .db-logout a{padding:10px 12px;border-radius:12px;} #neu.pg-dash.sk-a .db-logout a:hover{background:rgba(255,107,107,.08);} /* ── содержимое ── */ #neu.pg-dash.sk-a .db-content{max-width:820px;} #neu.pg-dash.sk-a .db-page-title{font-size:32px;line-height:1.1;letter-spacing:-.01em;margin-bottom:10px;text-shadow:0 2px 20px rgba(0,0,0,.5);} #neu.pg-dash.sk-a .db-page-sub{font-size:15px;color:var(--neu-text-2);margin-bottom:30px;max-width:60ch;text-shadow:0 1px 12px rgba(0,0,0,.6);} #neu.pg-dash.sk-a .db-card{background:var(--sk-tile);border-radius:22px;padding:26px 28px 28px;margin-bottom:16px;} #neu.pg-dash.sk-a .db-card-title{font-size:15px;color:var(--neu-text);margin-bottom:16px;} #neu.pg-dash.sk-a .db-label{font-size:13px;margin-bottom:8px;} #neu.pg-dash.sk-a .db-input, #neu.pg-dash.sk-a .social-body input{ background:var(--sk-field);border:1px solid var(--sk-line);border-radius:12px;padding:12px 14px; transition:border-color .16s ease, background-color .16s ease; } #neu.pg-dash.sk-a .db-input:focus, #neu.pg-dash.sk-a .social-body input:focus{border-color:var(--neu-accent);background:rgba(255,255,255,.07);box-shadow:none;} #neu.pg-dash.sk-a textarea.db-input{border-radius:14px;} #neu.pg-dash.sk-a .db-actions{gap:10px;margin:6px 0 28px;} /* кнопки: главная — акцентом, остальные — клавишей как в профиле */ #neu.pg-dash.sk-a .db-btn, #neu.pg-dash.sk-a .social-save, #neu.pg-dash.sk-a .av-upload-btn, #neu.pg-dash.sk-a .av-remove-btn, #neu.pg-dash.sk-a .bg-remove, #neu.pg-dash.sk-a .av-crop-actions button{ padding:11px 22px;background:var(--sk-key-bg);box-shadow:var(--sk-key);transition:color .16s ease, box-shadow .16s ease; } #neu.pg-dash.sk-a .db-btn:hover, #neu.pg-dash.sk-a .av-crop-actions button:hover{color:var(--neu-accent);} #neu.pg-dash.sk-a .db-btn.primary, #neu.pg-dash.sk-a .social-save, #neu.pg-dash.sk-a .av-upload-btn, #neu.pg-dash.sk-a .av-crop-confirm{ background:linear-gradient(145deg,var(--neu-accent-2),var(--neu-accent));color:var(--neu-on-accent); box-shadow:inset 0 1px 0 rgba(255,255,255,.32), 0 10px 24px rgba(var(--neu-accent-rgb),.24); } #neu.pg-dash.sk-a .db-btn.primary:hover, #neu.pg-dash.sk-a .social-save:hover, #neu.pg-dash.sk-a .av-upload-btn:hover, #neu.pg-dash.sk-a .av-crop-confirm:hover{color:var(--neu-on-accent);box-shadow:inset 0 1px 0 rgba(255,255,255,.32), 0 12px 30px rgba(var(--neu-accent-rgb),.4);} #neu.pg-dash.sk-a .db-btn.primary:active, #neu.pg-dash.sk-a .social-save:active, #neu.pg-dash.sk-a .av-upload-btn:active{box-shadow:inset 0 3px 8px rgba(90,30,0,.5);} #neu.pg-dash.sk-a .db-btn.danger, #neu.pg-dash.sk-a .av-remove-btn, #neu.pg-dash.sk-a .bg-remove{background:transparent;box-shadow:inset 0 0 0 1px rgba(255,107,107,.38);color:var(--neu-bad);} #neu.pg-dash.sk-a .db-btn.danger:hover, #neu.pg-dash.sk-a .av-remove-btn:hover, #neu.pg-dash.sk-a .bg-remove:hover{background:rgba(255,107,107,.1);color:var(--neu-bad);box-shadow:inset 0 0 0 1px rgba(255,107,107,.6);} #neu.pg-dash.sk-a .db-flash{background:var(--sk-tile)!important;border:1px solid var(--sk-line)!important;border-radius:16px;} #neu.pg-dash.sk-a input[type=file]::file-selector-button{background:var(--sk-key-bg);box-shadow:var(--sk-key);} /* соцсети — строки внутри одного блока */ #neu.pg-dash.sk-a .social-item{border-radius:0;margin-bottom:0;border-bottom:1px solid var(--sk-line);} #neu.pg-dash.sk-a .social-item:last-child{border-bottom:0;} #neu.pg-dash.sk-a .social-header{padding:14px 0;border-radius:0;} #neu.pg-dash.sk-a .social-icon{background:rgba(255,255,255,.06)!important;border-radius:12px;} #neu.pg-dash.sk-a .social-status.filled{box-shadow:none;} #neu.pg-dash.sk-a .social-body{padding:0 0 18px;} /* аватар и фон */ #neu.pg-dash.sk-a .av-preview{padding:0;overflow:hidden;box-shadow:0 0 0 1px var(--sk-line);} #neu.pg-dash.sk-a .av-crop-box{background:#16191e;border:1px solid var(--sk-line);box-shadow:0 30px 80px rgba(0,0,0,.6);} #neu.pg-dash.sk-a .av-crop-area{box-shadow:0 0 0 2px var(--neu-accent);} #neu.pg-dash.sk-a .bg-drop{border:1.5px dashed rgba(255,255,255,.17);border-radius:20px;transition:border-color .16s ease, background-color .16s ease;} #neu.pg-dash.sk-a .bg-drop:hover, #neu.pg-dash.sk-a .bg-drop.drag{border-color:var(--neu-accent);background:rgba(var(--neu-accent-rgb),.05);box-shadow:none;} #neu.pg-dash.sk-a .bg-drop svg{background:rgba(255,255,255,.06);} #neu.pg-dash.sk-a .bg-current{padding:0;border-radius:16px;overflow:hidden;} /* тема: палитра — маленький «профиль» в цвете акцента */ #neu.pg-dash.sk-a .theme-grid{gap:14px;} #neu.pg-dash.sk-a .theme-item{padding:0;border-radius:16px;overflow:hidden;background:#0e1013;box-shadow:inset 0 0 0 1px var(--sk-line);} #neu.pg-dash.sk-a .theme-item.selected{box-shadow:0 0 0 2px var(--sw-accent, var(--neu-accent));} #neu.pg-dash.sk-a .theme-swatch{ height:96px;border-radius:0; background:linear-gradient(100deg, color-mix(in srgb, var(--sw-accent) 34%, #0e1013) 0%, #0e1013 82%); } #neu.pg-dash.sk-a .theme-swatch i{left:16px;top:16px;width:34px;height:34px;border-radius:50%;background:none;box-shadow:none;border:4px solid var(--sw-accent);box-sizing:border-box;} #neu.pg-dash.sk-a .theme-swatch b{left:16px;bottom:16px;width:68px;height:18px;border-radius:999px;box-shadow:none;} #neu.pg-dash.sk-a .theme-name{padding:11px 16px 12px;font-size:13px;background:rgba(255,255,255,.035);} #neu.pg-dash.sk-a .theme-check{top:12px;right:12px;background:var(--sw-accent, var(--neu-accent));box-shadow:none;} #neu.pg-dash.sk-a .ct-field input[type="color"]{border:1px solid var(--sk-line);border-radius:9px;padding:2px;background:var(--sk-field);} #neu.pg-dash.sk-a .ct-preview{background:#0e1013;border:1px solid var(--sk-line);border-radius:18px;} #neu.pg-dash.sk-a .ct-p-search{background:var(--sk-field);border:1px solid var(--sk-line);} /* достижения — плитки */ #neu.pg-dash.sk-a .ach-pin-hint, #neu.pg-dash.sk-a .ach-pin-btn, #neu.pg-dash.sk-a .ach-name span{display:none;} #neu.pg-dash.sk-a .ach-summary{display:block;font-size:14px;color:var(--neu-text-2);margin:-10px 0 20px;} #neu.pg-dash.sk-a .ach-summary b{font-family:var(--neu-fd);font-size:18px;font-weight:800;color:var(--neu-text);margin:0 2px;} #neu.pg-dash.sk-a .ach-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));gap:14px;} #neu.pg-dash.sk-a .ach-row, #neu.pg-dash.sk-a .ach-row.pinned{ flex-direction:column;align-items:flex-start;gap:18px;padding:22px;border-radius:20px;background:var(--sk-tile); } #neu.pg-dash.sk-a .ach-row:hover{background:#1a1d23;} #neu.pg-dash.sk-a .ach-icon{width:auto;height:58px;max-width:100%;filter:drop-shadow(0 6px 16px rgba(0,0,0,.5));} #neu.pg-dash.sk-a .ach-name{font-size:15px;margin-bottom:6px;} #neu.pg-dash.sk-a .ach-exp{font-size:13px;color:var(--neu-accent);} #neu.pg-dash.sk-a .ach-date{font-size:12px;margin-top:6px;} #neu.pg-dash.sk-a .ach-empty{border:1.5px dashed rgba(255,255,255,.14);border-radius:20px;} /* реакции (эмоуты канала) */ #neu.pg-dash.sk-a .emote-tab{background:transparent;box-shadow:inset 0 0 0 1px var(--sk-line);} #neu.pg-dash.sk-a .emote-tab.active{background:var(--sk-key-bg);box-shadow:var(--sk-key);} #neu.pg-dash.sk-a .emote-card{box-shadow:inset 0 0 0 1px var(--sk-line);} #neu.pg-dash.sk-a .emote-card:hover{background:rgba(255,255,255,.04);} #neu.pg-dash.sk-a .emote-card.checked{background:rgba(var(--neu-accent-rgb),.1);box-shadow:inset 0 0 0 1.5px rgba(var(--neu-accent-rgb),.65);} /* низ страницы и чат */ #neu.pg-dash.sk-a .gt-footer{background:transparent!important;} #neu.pg-dash.sk-a .gt-footer::before{background:var(--sk-line);box-shadow:none;} #neu.pg-dash.sk-a .gt-footer-soc{background:rgba(255,255,255,.06);} @media (max-width:768px){ #neu.pg-dash.sk-a .db-hero{height:260px;} #neu.pg-dash.sk-a .db-wrap{gap:22px;padding:0 0 50px;} /* разделы — лента вкладок, листается вбок */ #neu.pg-dash.sk-a .db-sidebar{ display:flex;flex-wrap:nowrap;gap:8px;width:auto;margin:0 -16px;padding:2px 16px 8px;border:0;max-height:none; overflow-x:auto;overflow-y:hidden;scrollbar-width:none;position:static; } #neu.pg-dash.sk-a .db-sidebar::-webkit-scrollbar{display:none;} #neu.pg-dash.sk-a .db-user, #neu.pg-dash.sk-a .db-user-stats, #neu.pg-dash.sk-a .db-nav-section{display:none;} #neu.pg-dash.sk-a .db-nav-item, #neu.pg-dash.sk-a .db-logout a{ flex:0 0 auto;width:auto;margin:0;padding:10px 15px;border-radius:999px;white-space:nowrap;font-size:13px; background:var(--sk-tile); } #neu.pg-dash.sk-a .db-nav-item.active{background:var(--sk-key-bg);} #neu.pg-dash.sk-a .db-logout{flex:0 0 auto;margin:0;padding:0;border:0;} #neu.pg-dash.sk-a .db-page-title{font-size:25px;} #neu.pg-dash.sk-a .db-page-sub{font-size:14px;margin-bottom:22px;} #neu.pg-dash.sk-a .db-card{padding:20px 18px 22px;border-radius:20px;} #neu.pg-dash.sk-a .theme-grid{grid-template-columns:repeat(2, 1fr);gap:12px;} #neu.pg-dash.sk-a .ach-grid{grid-template-columns:repeat(2, minmax(0, 1fr));gap:10px;} #neu.pg-dash.sk-a .ach-row, #neu.pg-dash.sk-a .ach-row.pinned{padding:16px;gap:14px;} #neu.pg-dash.sk-a .ach-icon{height:44px;} } #neu.pg-dash.sk-a .db-user-stats{grid-template-columns:1fr 1.3fr 1fr;} #neu.pg-dash.sk-a .db-stat-pill{padding-left:12px;min-width:0;} @media (max-width:768px){ /* лента вкладок не должна распирать страницу: без этого она тянет ширину по своему содержимому */ #neu.pg-dash.sk-a .db-wrap{min-width:0;max-width:100%;} #neu.pg-dash.sk-a .db-sidebar{min-width:0;max-width:calc(100% + 32px);box-sizing:border-box;} #neu.pg-dash.sk-a .db-content{min-width:0;max-width:100%;} } /* то же сообщение уже показывает всплывающее уведомление справа сверху — строку в странице не дублируем */ #neu.pg-dash.sk-a .db-flash{display:none;} /* у полей фокус показан цветной рамкой, второй контур не нужен */ #neu.pg-dash.sk-a .db-input:focus-visible, #neu.pg-dash.sk-a .social-body input:focus-visible{outline:0;} /* ════════════ «ПОЛКА»: всплывающие окна (везде, где включён новый вид) ════════════ «Что нового» — лента изменений: слева линия времени с точкой у каждой записи, самая свежая отмечена акцентом. Тем же плоским материалом — окна подписчиков/друзей и подтверждения. */ #neu.sk-a #newsOverlay, #neu.sk-a #eventBannerOverlay, #neu.sk-a #ptUserListOverlay, #neu.sk-a .neu-dialog-overlay{background:rgba(8,9,12,.66)!important;backdrop-filter:blur(5px)!important;-webkit-backdrop-filter:blur(5px)!important;} #neu.sk-a #newsModal, #neu.sk-a #eventBannerModal, #neu.sk-a #ptUserListModal > div:nth-child(2), #neu.sk-a .neu-dialog{ --neu-out-xs:0 0 0 0 transparent;--neu-out-sm:0 0 0 0 transparent;--neu-in-xs:0 0 0 0 transparent;--neu-in-sm:0 0 0 0 transparent; --neu-bg:#16191e; background:#16191e!important;border:1px solid rgba(255,255,255,.09)!important;border-radius:24px!important; box-shadow:0 30px 80px rgba(0,0,0,.6)!important; } #neu.sk-a .news-modal-close, #neu.sk-a #ptUserListModal button{background:rgba(255,255,255,.07)!important;transition:background-color .16s ease, color .16s ease;} #neu.sk-a .news-modal-close:hover, #neu.sk-a #ptUserListModal button:hover{background:rgba(255,255,255,.13)!important;color:var(--neu-text)!important;} #neu.sk-a .neu-dialog button{box-shadow:none;} #neu.sk-a #newsModal{width:500px;max-height:min(80vh, 720px);} #neu.sk-a .news-modal-head{padding:24px 26px 18px;gap:0;} #neu.sk-a .news-modal-head > svg{display:none;} #neu.sk-a .news-modal-title{font-size:20px;font-weight:800;letter-spacing:-.01em;} #neu.sk-a .news-modal-body{padding:4px 26px 26px;} #neu.sk-a .news-item{ position:relative;padding:0 0 26px 26px;margin:0;border-radius:0;border-bottom:0; } #neu.sk-a .news-item:last-child{padding-bottom:2px;} #neu.sk-a .news-item::before{ content:'';position:absolute;left:0;top:4px;width:9px;height:9px;border-radius:50%; background:#16191e;box-shadow:inset 0 0 0 2px rgba(255,255,255,.3); } #neu.sk-a .news-item::after{ content:'';position:absolute;left:4px;top:19px;bottom:-1px;width:1px;background:rgba(255,255,255,.1); } #neu.sk-a .news-item:last-child::after{display:none;} #neu.sk-a .news-item:first-child::before{background:var(--neu-accent);box-shadow:0 0 0 4px rgba(var(--neu-accent-rgb),.18);} #neu.sk-a .news-item-date{font-size:12.5px;color:var(--neu-muted);margin-bottom:7px;line-height:1.3;font-variant-numeric:tabular-nums;} #neu.sk-a .news-item:first-child .news-item-date{color:var(--neu-accent);} #neu.sk-a .news-item-title{font-size:16px;font-weight:700;line-height:1.3;margin-bottom:7px;} #neu.sk-a .news-item-body{font-size:14.5px;line-height:1.6;color:var(--neu-text-2);} #neu.sk-a .news-modal-empty{padding:34px 0 20px;font-size:14px;color:var(--neu-muted);} @media (max-width:768px){ #neu.sk-a #newsModal{width:auto;left:12px;right:12px;transform:translateY(-50%);max-width:none;border-radius:22px!important;} #neu.sk-a .news-modal-head{padding:20px 20px 14px;} #neu.sk-a .news-modal-title{font-size:18px;} #neu.sk-a .news-modal-body{padding:4px 20px 22px;} } /* ════════════ «ПОЛКА»: ФИЛЬМЫ: отличия от игр ════════════ Всё общее (шапка, фильтры, плитки, панель) приходит из правил игр: их селекторы продублированы на фильмовые скриптом python _neu_mirror.py static/skins.css (перезапускать после правок правил игр). Здесь — только то, чего у игр нет. */ #neu.sk-a .film-row-year{font-size:12px;color:var(--neu-muted);} #neu.sk-a .status-watched{color:#6BFF9E;} #neu.sk-a .status-queue{color:#94a3b8;} #neu.sk-a #filmsList .film-row .film-row-edit-btn{background:rgba(255,255,255,.08)!important;box-shadow:none;} #neu.sk-a #fp-panel .fp-cats{grid-template-columns:repeat(2, 1fr);} #neu.sk-a #fp-panel .fp-cat[data-status="Просмотрено"]{--c:#6BFF9E;} #neu.sk-a #fp-panel .fp-cat[data-status="Очередь"]{--c:#94a3b8;} #neu.sk-a #fp-panel[data-st="Очередь"] .pn-rating{display:none;} #neu.sk-a #fp-panel #fp-selected img, #neu.sk-a #fp-panel #fp-selected #fp-sel-cover-wrap > div{width:112px;height:160px;border-radius:14px;object-fit:cover;box-shadow:0 18px 36px rgba(0,0,0,.5);} #neu.sk-a #fp-panel .fp-search-wrap input{padding-top:13px;padding-bottom:13px;font-size:15px;} #neu.sk-a #fp-panel .pn-f-video{margin-bottom:0;} #neu.sk-a #filmReactionPicker{background:#1a1d23;border:1px solid rgba(255,255,255,.09);box-shadow:0 22px 46px rgba(0,0,0,.55);} @media (min-width:769px){ #neu.sk-a #filmsList .film-row .film-row-edit-btn{top:auto!important;bottom:20px!important;right:26px!important;} #neu.sk-a #filmsList .film-row-comment-wrap{padding-right:56px!important;} } @media (max-width:768px){ #neu.sk-a #fp-panel #fp-selected img, #neu.sk-a #fp-panel #fp-selected #fp-sel-cover-wrap > div{width:92px;height:132px;} } /* тумблер «игры / фильмы» в навбаре без плашки: своя матовая подложка, как у остальных кнопок */ #neu.nv-6 .nav .gf-toggle{ background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4); } #neu.nv-6 .nav .gf-end{color:var(--neu-text-2);} #neu.nv-6 .gf-toggle.games .gf-end-games, #neu.nv-6 .gf-toggle.films .gf-end-films{color:transparent;} @media (max-width:768px){ #neu.sk-a .films-controls .status-tabs{width:100%;margin:0;padding:0 0 4px;} } /* карандаш в круге по центру: у фильмов выравнивание не задано в разметке (у игр оно в inline-стиле) */ #neu.sk-a .film-row-edit-btn, #neu.sk-a .game-row-edit-btn{display:flex;align-items:center;justify-content:center;line-height:0;} /* кнопки соцсетей в футере — круг-подложка на всех страницах нового вида (в профиле его раньше давала тень) */ #neu.sk-a .gt-footer-soc{background:rgba(255,255,255,.06);transition:background-color .16s ease;} #neu.sk-a .gt-footer-soc:hover{background:rgba(255,255,255,.12);} /* номер уровня на значке — цветом темы профиля, как кольцо и остальные акценты */ #neu.lv-ring .sk-lvl-badge{color:var(--theme-level-bar, var(--neu-accent));} /* ════════════ «ПОЛКА»: плавающий чат — одинаковый на всех страницах нового вида ════════════ Кнопка и окно лежат прямо в , вне .page, поэтому в профиле и на фильмах к ним не доходило отключение объёма — чат оставался выпуклым. */ #neu.sk-a #gtChatBubble, #neu.sk-a #gtChatWindow{ --neu-out-xs:0 0 0 0 transparent;--neu-out-sm:0 0 0 0 transparent;--neu-out:0 0 0 0 transparent;--neu-out-lg:0 0 0 0 transparent; --neu-in-xs:0 0 0 0 transparent;--neu-in-sm:0 0 0 0 transparent;--neu-in:0 0 0 0 transparent; --neu-bg:#16191e; } #neu.sk-a #gtChatBubble{background:#22262d;box-shadow:0 12px 26px rgba(0,0,0,.5);transition:background-color .16s ease;} #neu.sk-a #gtChatBubble:hover{background:#2b2f38;} #neu.sk-a #gtChatBubble svg{filter:none;} #neu.sk-a #gtChatBadge{border-color:#22262d;box-shadow:none;} #neu.sk-a #gtChatWindow{background:#16191e;border:1px solid rgba(255,255,255,.09);box-shadow:0 30px 70px rgba(0,0,0,.6);} #neu.sk-a .gt-chat-back, #neu.sk-a .gt-chat-close{background:rgba(255,255,255,.07);transition:background-color .16s ease, color .16s ease;} #neu.sk-a .gt-chat-back:hover, #neu.sk-a .gt-chat-close:hover{background:rgba(255,255,255,.13);color:var(--neu-text);} #neu.sk-a .gt-chat-list-item:hover{background:rgba(255,255,255,.05);} #neu.sk-a .gt-chat-list-avatar{background:rgba(255,255,255,.08);} #neu.sk-a .gt-chat-list-unread{background:rgba(var(--neu-accent-rgb),.16);} #neu.sk-a .gt-chat-thread{background:rgba(0,0,0,.2);} #neu.sk-a .gt-msg-row:not(.mine) .gt-msg-bubble{background:#22262d;} #neu.sk-a .gt-msg-row.mine .gt-msg-bubble{box-shadow:none;} #neu.sk-a .gt-chat-input{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);transition:border-color .16s ease;} #neu.sk-a .gt-chat-input:focus{border-color:var(--neu-accent);} #neu.sk-a .gt-chat-send{box-shadow:inset 0 1px 0 rgba(255,255,255,.3);} #neu.neu-home.sk-a .neu-key{transition:background-color .16s ease, filter .16s ease, box-shadow .18s var(--neu-ease), color .18s;} /* ════════════ «ПОЛКА»: все остальные страницы (pg-flat) ════════════ Страницы без собственного набора правил (вход, чаты, ошибки, старые разделы панели, StreamerDesk) получают тот же плоский тёмный вид автоматически: объём выключен, а там, где раньше была выпуклость или вдавленность, остаётся тонкая линия-контур. Настройки, FAQ и документы (pg-dash) настроены отдельно и сюда не попадают. */ #neu.pg-flat:not(.pg-dash).sk-a body{ --neu-bg:#0e1013;--neu-well:#14171c;--neu-rise:#22262d; --neu-sh-d:rgba(0,0,0,.4);--neu-sh-l:rgba(255,255,255,0); --sk-ring:inset 0 0 0 1px rgba(255,255,255,.085); --sk-ring-in:inset 0 0 0 1px rgba(255,255,255,.12); --neu-out-xs:var(--sk-ring);--neu-out-sm:var(--sk-ring);--neu-out:var(--sk-ring);--neu-out-lg:var(--sk-ring); --neu-in-xs:var(--sk-ring-in);--neu-in-sm:var(--sk-ring-in);--neu-in:var(--sk-ring-in); --sk-tile:#16191e;--sk-line:rgba(255,255,255,.08); --sk-key-bg:#2b2f38;--sk-key:inset 0 1px 0 rgba(255,255,255,.07), 0 8px 18px rgba(0,0,0,.42); background:#0e1013; } #neu.pg-flat.sk-a .neu-shell-toggle{display:none;} #neu.pg-flat.sk-a .gt-footer{background:transparent!important;} #neu.pg-flat.sk-a .gt-footer::before{background:rgba(255,255,255,.08);box-shadow:none;} /* навбар и нижняя панель на телефоне — без контурной линии, у них свои подложки */ #neu.pg-flat.sk-a nav.nav, #neu.pg-flat.sk-a #mob-topbar, #neu.pg-flat.sk-a #mob-tabbar{--neu-out-xs:0 0 0 0 transparent;--neu-out-sm:0 0 0 0 transparent;--neu-out:0 0 0 0 transparent;--neu-in-xs:0 0 0 0 transparent;--neu-in-sm:0 0 0 0 transparent;} /* главные кнопки — как в профиле */ #neu.pg-flat:not(.pg-dash).sk-a .btn--primary, #neu.pg-flat:not(.pg-dash).sk-a .auth-btn, #neu.pg-flat:not(.pg-dash).sk-a .sd-btn.btn-open, #neu.pg-flat:not(.pg-dash).sk-a .sgt-submit:not(:disabled){ box-shadow:inset 0 1px 0 rgba(255,255,255,.32), 0 10px 24px rgba(var(--neu-accent-rgb),.24); } /* крупные блоки-карточки — плиткой, как в настройках */ #neu.pg-flat:not(.pg-dash).sk-a .card, #neu.pg-flat:not(.pg-dash).sk-a .auth-card, #neu.pg-flat:not(.pg-dash).sk-a .sd-card, #neu.pg-flat:not(.pg-dash).sk-a .sgt-access__box, #neu.pg-flat:not(.pg-dash).sk-a .modal, #neu.pg-flat:not(.pg-dash).sk-a .empty-state{background:var(--sk-tile);box-shadow:none;} #neu.pg-flat:not(.pg-dash).sk-a .error-page__code{color:#22262d;text-shadow:none;} /* ивент: у страницы свой отступ сверху под старую шапку, а base.html уже отступает под новую — не складываем */ #neu.pg-flat.sk-a .ev-page{margin-top:16px;}