/* X-WORLD home page: blocks "video, music, games, books", account menu by the photo, window with all services.
   Same look as the rest of x-world.plus: white panels, soft shadows, purple #a371d9, blue #6990f0, Tektur. */

/* ---------- search: a magnifier instead of the purple square ---------- */
.search__icon{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E") center/contain no-repeat!important;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E") center/contain no-repeat!important;
  background-color:#a371d9!important;background-image:none!important}

/* ---------- the four blocks ---------- */
.portal-main-column.xh-column{gap:24px}
.xh-sec.portal-main-panel{height:auto!important;min-height:0!important;padding:18px 18px 20px;display:flex;flex-direction:column;gap:14px;overflow:hidden;box-sizing:border-box}
.xh-head{display:flex;align-items:center;gap:12px;padding-bottom:10px;border-bottom:1px solid #eeeef3;min-width:0}
.xh-title{margin:0!important;font:600 15px/1.3 Tektur,sans-serif!important;color:#a371d9;text-transform:uppercase;letter-spacing:.02em}
.xh-site{font:11px Tektur,sans-serif;color:#7a7f8c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xh-all{margin-left:auto;font:12px Tektur,sans-serif;color:#a371d9!important;text-decoration:none!important;white-space:nowrap}
.xh-all:hover{color:#8051b7!important}
.xh-sub{display:flex;align-items:center;gap:8px;margin:2px 0 0!important;font:500 12px Tektur,sans-serif!important;color:#6990f0;text-transform:uppercase;letter-spacing:.03em}
.xh-sub-top{margin-top:6px!important}.xh-sub-top svg{color:#fcb707}
.xh-dot{width:8px;height:8px;border-radius:50%;background:#74a753;flex:none}
.xh-empty{margin:0!important;padding:14px;border-radius:12px;background:#f7f6fb;color:#7a7f8c;font:12px Tektur,sans-serif}
.xh-card{display:flex;flex-direction:column;gap:6px;min-width:0;text-decoration:none!important;color:#363544!important}
.xh-name{font:500 13px/1.3 Tektur,sans-serif;color:#a371d9;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.xh-meta{font:11px/1.3 Tektur,sans-serif;color:#6990f0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xh-card:hover .xh-name{color:#8051b7}
.xh-rank{position:absolute;left:8px;top:8px;z-index:2;min-width:26px;height:26px;padding:0 6px;box-sizing:border-box;border-radius:8px;display:grid;place-items:center;
  font:700 13px Tektur,sans-serif;color:#a371d9;background:#fff;box-shadow:3px 4px 9px rgba(60,50,90,.18)}

/* video: two rows; 4 per row on a wide screen (8), then 3 (6), 2 (4), 1 on a phone (2) */
.xh-list-video{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto auto;grid-auto-rows:0;column-gap:16px;row-gap:0;overflow:hidden}
.xh-list-video>.xh-vcard{padding-bottom:16px;min-height:0;overflow:hidden}
.xh-list-video>.xh-empty{grid-column:1/-1}
@media (max-width:1180px){.xh-list-video{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.xh-list-video{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:440px){.xh-list-video{grid-template-columns:minmax(0,1fr)}}
.xh-thumb{position:relative;display:block;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#ece6f7}
.xh-thumb>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.xh-thumb>.xh-gif{z-index:1}
.xh-playbtn{position:absolute;left:50%;top:50%;z-index:2;width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.92);color:#a371d9;box-shadow:3px 5px 12px rgba(40,30,70,.25);transition:opacity .2s,transform .2s}
.xh-vcard:hover .xh-playbtn{opacity:0;transform:scale(.85)}
.xh-dur{position:absolute;right:7px;bottom:7px;z-index:2;padding:1px 6px;border-radius:6px;font:500 11px Roboto,sans-serif;color:#fff;background:rgba(20,20,28,.72)}
.xh-vcard .xh-meta{margin-top:-2px}

/* music: two columns, rows with cover, title, artist, length */
.xh-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:12px 30px}
.xh-col{display:flex;flex-direction:column;gap:10px;min-width:0}
.xh-list-music{display:flex;flex-direction:column}
.xh-track{display:flex;align-items:center;gap:12px;min-height:56px;padding:5px 4px;border-bottom:1px solid #f0eff5;text-decoration:none!important;color:#363544!important;border-radius:8px}
.xh-track:hover{background:#f7f3fc}
.xh-track .xh-rank{position:static;flex:none;min-width:22px;height:auto;padding:0;background:none;box-shadow:none;font-size:15px}
.xh-cover{position:relative;width:46px;height:46px;flex:none;border-radius:8px;overflow:hidden;background:linear-gradient(135deg,hsl(var(--h1,270) 60% 72%),hsl(var(--h2,200) 60% 62%))}
.xh-cover img{width:100%;height:100%;object-fit:cover;display:block}
.xh-tcopy{display:flex;flex-direction:column;min-width:0;flex:1}
.xh-tcopy .xh-name{-webkit-line-clamp:1}
.xh-tdur{font:11px Tektur,sans-serif;color:#7a7f8c;flex:none}
.xh-listen{width:36px;height:36px;flex:none;border-radius:50%;display:grid;place-items:center;color:#a371d9;background:#fff;border:1px solid #e5e7eb;box-shadow:3px 4px 9px #d9dce4}

/* games */
.xh-list-games{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:16px}
.xh-gcover{position:relative;display:grid;place-items:center;aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:#f4f4fa;color:#74a753}
.xh-gcover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.xh-list-games>.xh-empty,.xh-list-books>.xh-empty{grid-column:1/-1}

/* books: covers as in the old block, a picture when the catalog gives one */
.xh-list-books{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:14px}
.xh-bcover{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:2/3;box-sizing:border-box;padding:10px 8px;border-radius:8px;border-left:6px solid #a371d9;
  background:linear-gradient(135deg,#eef2ff,#f5f0fc);color:#7650ab;text-align:center;overflow:hidden}
.xh-bcover.has-img{padding:0;border-left:0}
.xh-bcover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.xh-btitle{font:500 12px/1.25 Tektur,sans-serif;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.xh-bcover .xh-rank{left:4px;top:4px;min-width:22px;height:22px;font-size:11px;border-radius:7px}

@media (max-width:600px){
  .xh-sec.portal-main-panel{padding:14px 12px 16px;gap:12px}
  .xh-site{display:none}
  .xh-list-games{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .xh-list-books{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
}

/* ---------- account menu by the photo (as on X-Music / X-Video) ---------- */
.header .account.xga-open{box-shadow:inset 3px 3px 7px #d2d6df,inset -2px -2px 5px #fff!important;border-color:#a371d9!important}
.header .account.xga-open .account__content{display:none!important}
.xga-pop{position:fixed;z-index:2000;width:340px;max-width:calc(100vw - 20px);max-height:calc(100vh - 120px);overflow-y:auto;overscroll-behavior:contain;box-sizing:border-box;
  padding:10px;display:flex;flex-direction:column;gap:2px;background:#fff;border:1px solid #e5e7eb;border-radius:18px;box-shadow:0 14px 34px rgba(80,60,130,.18),5px 7px 13px #d2d6df;font-family:Roboto,sans-serif}
.xga-pop[hidden]{display:none}
.xga-head{display:flex;align-items:center;gap:12px;padding:8px 8px 12px;margin-bottom:6px;border-bottom:1px solid #eeeef3}
.xga-ava{width:48px;height:48px;flex:none;border-radius:50%;object-fit:cover;background:#ece6f7}
.xga-head>div{display:grid;gap:2px;min-width:0}
.xga-head b{font-size:16px;color:#a371d9;overflow-wrap:anywhere}
.xga-head small{font-size:13px;color:#6b6b74;overflow-wrap:anywhere}
.xga-tag{justify-self:start;margin-top:4px;padding:1px 9px;border-radius:20px;font:normal 12px Roboto,sans-serif;background:#efe6fa;color:#8051b7}
.xga-cap{margin:4px 8px!important;color:#6b6b74;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em}
.xga-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.xga-pop a{display:flex;align-items:center;gap:10px;min-width:0;min-height:40px;padding:9px 10px;box-sizing:border-box;border-radius:8px;color:#333!important;text-decoration:none!important;font:500 14px Roboto,sans-serif}
.xga-pop a svg{flex:none;color:#a371d9}
.xga-pop a>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.xga-grid a{border:1px solid #e5e7eb;background:#f8f7fc;border-radius:10px}
.xga-grid a:hover{border-color:#a371d9}
.xga-row:hover{background:#f3eef9}
.xga-pop hr{border:0;border-top:1px solid #eeeef3;margin:6px 0;width:100%}
.xga-pop a.xga-out,.xga-pop a.xga-out svg{color:#c2415b!important}
@media (max-width:600px){.xga-pop{left:10px;right:10px!important;width:auto}}

/* ---------- window with all services (menu button at the top left) ---------- */
.header .menu__hamburger-label{cursor:pointer}
html.xh-lock{overflow:hidden}
.xh-svc{position:fixed;inset:0;z-index:2100;display:flex;align-items:flex-start;justify-content:center;padding:110px 15px 20px;box-sizing:border-box}
.xh-svc[hidden]{display:none}
.xh-svc-back{position:absolute;inset:0;background:rgba(40,36,60,.22)}
.xh-svc-win{position:relative;width:min(1110px,100%);max-height:100%;overflow-y:auto;box-sizing:border-box;padding:24px;border:1px solid #e5e7eb;border-radius:18px;background:#fff;
  box-shadow:8px 12px 30px rgba(120,110,160,.25),-2px -2px 5px #fff;display:flex;flex-direction:column;gap:18px}
.xh-svc-head{display:flex;align-items:center;gap:14px;padding-bottom:12px;border-bottom:1px solid #eeeef3}
.xh-svc-head h2{margin:0!important;font:600 18px Tektur,sans-serif!important;color:#a371d9;text-transform:uppercase}
.xh-svc-page{margin-left:auto;font:12px Tektur,sans-serif;color:#a371d9!important;text-decoration:none!important;white-space:nowrap}
.xh-svc-close{width:44px;height:44px;flex:none;border:1px solid #e5e7eb;border-radius:12px;background:#fff;box-shadow:5px 7px 13px #d2d6df,-2px -2px 5px #fff;display:grid;place-items:center;color:#7a7f8c;cursor:pointer}
.xh-svc-close:hover{box-shadow:inset 3px 3px 7px #d2d6df,inset -2px -2px 5px #fff}
.xh-svc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:15px}
.xh-svc-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:96px;padding:12px 6px;box-sizing:border-box;border:1px solid #e5e7eb;border-radius:14px;background:#fff;
  box-shadow:5px 7px 13px #d2d6df,-2px -2px 5px #fff;text-decoration:none!important;text-align:center}
.xh-svc-item:hover{box-shadow:inset 3px 4px 8px #d9dce4,inset -2px -2px 4px #fff}
.xh-svc-ic{width:32px;height:32px;display:grid;place-items:center}
.xh-svc-ic img{max-width:100%;max-height:100%;object-fit:contain}
.xh-svc-t{font:500 12px/1.25 Tektur,sans-serif;color:#a371d9;text-transform:uppercase;overflow-wrap:anywhere}
@media (max-width:600px){.xh-svc{padding:70px 10px 10px}.xh-svc-win{padding:16px}.xh-svc-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.xh-svc-page{display:none}}
.xh-svc-item.is-soon{position:relative;cursor:default;opacity:.62;box-shadow:inset 2px 3px 6px #e1e3eb,inset -2px -2px 4px #fff}
.xh-svc-soon{position:absolute;top:6px;right:6px;padding:1px 7px;border-radius:20px;background:#efe6fa;color:#7650ab;font:500 10px Tektur,sans-serif}