/* Homepage finishing layer: embossed game frames, account chip and visible Metrika informer. */
.hub-account{min-width:0}
.hub-user{min-width:168px!important;justify-content:flex-start!important;padding-inline:15px!important;gap:10px!important}
.hub-user .hub-icon{width:18px;height:18px;flex:none}
.hub-user-copy{display:grid;min-width:0;line-height:1.05;text-align:left}
.hub-user-copy b{display:block;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:800;color:#f6fbff;text-shadow:0 0 9px #8bdfff55}
.hub-user-copy small{display:block;margin-top:4px;font-size:10px;font-weight:700;color:#ffb24a;text-shadow:0 0 8px #ff9b2877;font-variant-numeric:tabular-nums}

/* Thick layered frame: dark metal body + light bevel + glowing accent trace. */
.hub-game::before{
  inset:3px;
  clip-path:polygon(18px 0,calc(100% - 18px) 0,100% 18px,100% calc(100% - 18px),calc(100% - 18px) 100%,18px 100%,0 calc(100% - 18px),0 18px);
  background:
    linear-gradient(180deg,rgba(255,255,255,.09),transparent 11%),
    linear-gradient(135deg,#152432 0,#071019 27%,#02070d 56%,#0a1824 100%);
  box-shadow:inset 0 0 0 2px #000,inset 0 0 0 3px #ffffff14,inset 0 9px 16px #ffffff08,inset 0 -16px 22px #000a;
  filter:drop-shadow(0 2px 0 #000) drop-shadow(0 7px 14px #0009);
}
.hub-game>.hub-frame{filter:drop-shadow(0 2px 0 #000) drop-shadow(0 0 5px var(--hub-glow));overflow:visible}
.hub-game>.hub-frame .hub-frame-base{stroke:#314656;stroke-width:5.4;opacity:1;filter:drop-shadow(0 1px 0 #05090d)}
.hub-game>.hub-frame .hub-frame-inner{stroke:#9db2bf;stroke-width:1.5;opacity:.34}
.hub-game>.hub-frame .hub-frame-hot{stroke:var(--hub-accent);stroke-width:3.2;opacity:1;filter:drop-shadow(0 0 4px var(--hub-accent)) drop-shadow(0 0 10px var(--hub-glow))}
.hub-game>.hub-frame .hub-frame-trace{stroke:#d7e4ec;stroke-width:1.3;opacity:.55;filter:drop-shadow(0 0 4px var(--hub-accent))}

.hub-game-cover{inset:8px 8px auto;height:174px;clip-path:polygon(15px 0,calc(100% - 15px) 0,100% 15px,100% 100%,0 100%,0 15px)}
.hub-game-cover::after{background:linear-gradient(0deg,#030911 0,#030911d9 11%,#03091144 42%,transparent 70%),linear-gradient(90deg,#0003,transparent 35%,#0002)}

/* A raised title plate inspired by the supplied metallic frame reference. */
.hub-game h3{
  position:relative;z-index:6;justify-content:center;align-items:center;text-align:center;
  min-height:43px;margin:-2px -2px 8px;padding:8px 10px 7px;
  font-family:var(--hub-display);font-size:11.5px!important;font-weight:800;line-height:1.18!important;letter-spacing:.02em;
  color:#f9fbff;text-shadow:0 2px 2px #000,0 0 8px #000,0 0 12px var(--hub-glow);
  clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 10px);
  background:linear-gradient(180deg,#26323c 0,#121a22 22%,#070b10 55%,#161d24 100%);
  box-shadow:inset 0 2px 0 #ffffff28,inset 0 -2px 0 #000,inset 0 0 0 1px #526574;
}
.hub-game h3::before{content:"";position:absolute;top:0;left:10%;right:10%;height:2px;background:linear-gradient(90deg,transparent,var(--hub-accent),#fff8,var(--hub-accent),transparent);box-shadow:0 0 6px var(--hub-accent),0 0 13px var(--hub-glow);pointer-events:none}
.hub-game h3::after{content:"";position:absolute;left:8px;right:8px;bottom:0;height:1px;background:linear-gradient(90deg,transparent,#98a8b4aa,transparent);pointer-events:none}
.hub-game-link{position:relative;z-index:2}

/* Do not draw a rectangular hover shadow around cut corners. Glow follows the SVG frame instead. */
@media(hover:hover) and (pointer:fine){
  .hub-game:hover{box-shadow:none!important;filter:brightness(1.11) saturate(1.14) drop-shadow(0 20px 23px #000b)}
  .hub-game:hover::before{filter:drop-shadow(0 3px 0 #000) drop-shadow(0 13px 22px #000b)}
  .hub-game:hover::after{inset:7px;clip-path:polygon(15px 0,calc(100% - 15px) 0,100% 15px,100% calc(100% - 15px),calc(100% - 15px) 100%,15px 100%,0 calc(100% - 15px),0 15px)}
  .hub-game:hover>.hub-frame{filter:drop-shadow(0 3px 0 #000) drop-shadow(0 0 8px var(--hub-accent)) drop-shadow(0 0 18px var(--hub-glow))}
  .hub-game:hover>.hub-frame .hub-frame-base{stroke-width:6;stroke:#405766}
  .hub-game:hover>.hub-frame .hub-frame-hot{stroke-width:4.1;filter:drop-shadow(0 0 6px var(--hub-accent)) drop-shadow(0 0 15px var(--hub-accent)) drop-shadow(0 0 26px var(--hub-glow))}
  .hub-game:hover h3{transform:translateZ(24px);background:linear-gradient(180deg,#34424e 0,#171f27 24%,#080c11 57%,#1c252e 100%)}
}

.hub-metrika{display:inline-flex;align-items:center;justify-content:center;min-width:96px;min-height:37px;padding:3px 4px;background:#06131d;border:1px solid #21485f;clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);box-shadow:inset 0 0 0 1px #ffffff09,0 0 12px #0bbaff22}
.hub-metrika img{display:block;width:88px;height:31px;border:0;filter:saturate(.9) contrast(1.05)}
.hub-metrika:hover{border-color:#ff9d28;box-shadow:0 0 14px #ff9d2844}

@media(max-width:1100px){.hub-user{min-width:145px!important;padding-inline:11px!important}.hub-user-copy b{max-width:116px;font-size:11px}.hub-user-copy small{font-size:9px}}
@media(max-width:800px){.hub-user{min-width:132px!important}.hub-user-copy b{max-width:102px}}
@media(max-width:620px){.hub-user{min-width:104px!important;padding-inline:9px!important}.hub-user>.hub-icon{display:none}.hub-user-copy b{max-width:92px;font-size:10px}.hub-user-copy small{font-size:9px}.hub-footer{gap:15px}.hub-metrika{order:4}}
@media(max-width:420px){.hub-user{min-width:92px!important}.hub-user-copy b{max-width:82px}.hub-game h3{font-size:12.5px!important}}
@media(forced-colors:active){.hub-game::before,.hub-game h3{filter:none;box-shadow:none}.hub-metrika{border:1px solid ButtonText}}