/* ======================================================================
   UPGRADE UI v21 · 24.08.2026
   Layout/readability fixes for profile surfaces, mobile navigation and
   giveaway presentation. Loaded after v20 and legacy styles intentionally.
   ====================================================================== */

:root{
  --v21-orange:#ff6a22;
  --v21-orange-soft:#ff9b62;
  --v21-line:rgba(255,255,255,.09);
  --v21-panel:#0d0e12;
}

/* ----------------------------------------------------------------------
   Mobile navigation: keep the drawer itself perfectly sharp.
   The old backdrop-filter could blur the fixed menu on some iOS/WebKit
   combinations because the sticky topbar creates its own compositing layer.
   ---------------------------------------------------------------------- */
@media(max-width:1180px){
  .public-surface .public-topbar-v4{
    isolation:isolate!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  .public-surface .public-topbar-v4 .topbar-shell{
    position:relative!important;
    z-index:1340!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    filter:none!important;
  }
  .public-surface .public-topbar-v4 .topbar-nav{
    z-index:1360!important;
    filter:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    background:
      radial-gradient(540px 330px at 100% 0,rgba(255,102,31,.16),transparent 68%),
      linear-gradient(180deg,#0b0b0d 0%,#070708 100%)!important;
    box-shadow:-28px 0 90px rgba(0,0,0,.72)!important;
  }
  .public-surface .public-topbar-v4 .topbar-nav *,
  .public-surface .public-topbar-v4.nav-open .topbar-nav *{
    filter:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  .public-surface .public-topbar-v4 .topbar-backdrop{
    z-index:1320!important;
    background:rgba(0,0,0,.78)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  body.public-surface.menu-lock>main,
  body.public-surface.menu-lock>.site-atmosphere,
  body.public-surface.menu-lock>.site-footer{
    filter:none!important;
  }
}

@media(max-width:760px){
  .public-surface .public-topbar-v4 .topbar-nav{
    width:min(342px,91vw)!important;
    padding:calc(14px + env(safe-area-inset-top)) 14px calc(16px + env(safe-area-inset-bottom))!important;
  }
  .public-surface .public-topbar-v4 .topbar-link{
    min-height:48px!important;
    font-size:13px!important;
  }
}

/* ----------------------------------------------------------------------
   Profile cabinet: more room, no overlapping nickname/badge/ID, readable
   metrics and bonus workflow on desktop and mobile.
   ---------------------------------------------------------------------- */
@media(min-width:1051px){
  .public-surface .identity-app-shell{
    width:min(1280px,calc(100% - 36px))!important;
    grid-template-columns:238px minmax(0,1fr)!important;
    gap:18px!important;
  }
}
.public-surface .identity-content{min-width:0!important}
.public-surface .identity-page-head{min-width:0!important}
.public-surface .identity-page-head>div{min-width:0!important}
.public-surface .identity-page-head h1{overflow-wrap:anywhere!important}

.public-surface .profile-feature-launcher{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
}
.public-surface .profile-feature-launcher>a{
  min-width:0!important;
  min-height:132px!important;
  padding:16px!important;
  overflow:hidden!important;
}
.public-surface .profile-feature-launcher b,
.public-surface .profile-feature-launcher small,
.public-surface .profile-feature-launcher em{
  min-width:0!important;
  overflow-wrap:anywhere!important;
}

.public-surface .identity-pass-card{
  min-width:0!important;
  min-height:288px!important;
  padding:26px!important;
}
.public-surface .identity-pass-main{
  min-width:0!important;
  display:grid!important;
  grid-template-columns:92px minmax(0,1fr)!important;
  align-items:center!important;
  gap:20px!important;
  margin:42px 0!important;
}
.public-surface .identity-pass-main>div:last-child{
  min-width:0!important;
  display:grid!important;
  justify-items:start!important;
  align-content:center!important;
}
.public-surface .identity-pass-main .unique-name-line{
  width:100%!important;
  min-width:0!important;
  flex-wrap:wrap!important;
  align-items:center!important;
}
.public-surface .identity-pass-main .unique-name-line h2{
  max-width:100%!important;
  min-width:0!important;
  margin:7px 0 5px!important;
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
}
.public-surface .identity-pass-main .unique-badge{
  position:static!important;
  inset:auto!important;
  margin:2px 0 0!important;
  max-width:100%!important;
}
.public-surface .identity-pass-main strong{
  display:block!important;
  margin-top:9px!important;
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.public-surface .identity-pass-bottom{
  position:relative!important;
  z-index:2!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:10px!important;
}
.public-surface .identity-pass-bottom span{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}

.public-surface .identity-metrics{
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:10px!important;
}
.public-surface .identity-metrics>article,
.public-surface .identity-metrics>a{
  min-width:0!important;
  min-height:116px!important;
  padding:16px!important;
  display:block!important;
  overflow:hidden!important;
  border:1px solid var(--uid-line)!important;
  border-radius:20px!important;
  background:rgba(15,17,23,.84)!important;
  color:inherit!important;
  text-decoration:none!important;
  box-shadow:0 18px 45px rgba(0,0,0,.16)!important;
}
.public-surface .identity-metrics>a.identity-bonus-metric{
  border-color:rgba(255,116,44,.24)!important;
  background:radial-gradient(circle at 100% 0,rgba(255,111,35,.13),transparent 55%),linear-gradient(145deg,rgba(255,112,39,.09),rgba(255,255,255,.018))!important;
}
.public-surface .identity-metrics b{
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  font-size:23px!important;
}
.public-surface .identity-metrics small{
  font-size:10px!important;
  line-height:1.45!important;
  overflow-wrap:anywhere!important;
}

/* Bonus page. */
.public-surface .bonus-workspace{
  grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr)!important;
  gap:12px!important;
}
.public-surface .bonus-request-card{
  min-width:0!important;
  padding:22px!important;
}
.public-surface .bonus-request-card .identity-panel-head{
  min-width:0!important;
  padding-right:72px!important;
}
.public-surface .bonus-request-mark{
  right:18px!important;
  top:18px!important;
  width:48px!important;
  height:48px!important;
  border-radius:15px!important;
}
.public-surface .bonus-request-form{
  grid-template-columns:minmax(150px,.8fr) minmax(220px,1.15fr) auto!important;
  gap:10px!important;
  margin-top:22px!important;
}
.public-surface .bonus-request-form label>span{
  font-size:10px!important;
  line-height:1.35!important;
}
.public-surface .bonus-request-form input{
  min-width:0!important;
  min-height:48px!important;
  padding:12px 13px!important;
  font-size:13px!important;
}
.public-surface .bonus-request-form .btn{
  min-height:48px!important;
  white-space:nowrap!important;
}
.public-surface .bonus-request-note{
  font-size:10px!important;
  line-height:1.5!important;
}
.public-surface .bonus-flow li{
  padding:14px!important;
}
.public-surface .bonus-flow strong{font-size:11px!important}
.public-surface .bonus-flow small{font-size:9px!important}
.public-surface .bonus-history-panel{padding:20px!important}
.public-surface .bonus-history-list>article{
  min-width:0!important;
  grid-template-columns:auto minmax(0,1fr) auto!important;
  padding:14px!important;
}
.public-surface .bonus-history-list article b{font-size:12px!important}
.public-surface .bonus-history-list article small,
.public-surface .bonus-history-list article p{font-size:10px!important;line-height:1.45!important}
.public-surface .bonus-status,
.public-surface .bonus-next-step{font-size:9px!important}

@media(max-width:1180px){
  .public-surface .profile-feature-launcher{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .public-surface .identity-metrics{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .public-surface .bonus-workspace{grid-template-columns:1fr!important}
}
@media(max-width:760px){
  .public-surface .identity-app-shell{
    width:calc(100% - 16px)!important;
    margin:12px auto 44px!important;
  }
  .public-surface .identity-sidebar{margin-bottom:10px!important;padding:10px!important}
  .public-surface .identity-mini-card{display:flex!important}
  .public-surface .identity-side-nav{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:5px!important;
  }
  .public-surface .identity-side-nav a{
    min-width:0!important;
    min-height:48px!important;
    padding:10px!important;
    font-size:11px!important;
  }
  .public-surface .identity-side-nav a b{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
  .public-surface .identity-admin-link,.public-surface .identity-logout-link{font-size:11px!important}
  .public-surface .identity-page-head{margin:12px 0 16px!important}
  .public-surface .identity-page-head h1{font-size:31px!important;line-height:1.02!important}
  .public-surface .identity-page-head p{font-size:12px!important;line-height:1.5!important}
  .public-surface .profile-feature-launcher{grid-template-columns:1fr!important;gap:7px!important}
  .public-surface .profile-feature-launcher>a{min-height:105px!important}
  .public-surface .identity-pass-card{min-height:0!important;padding:18px!important;border-radius:21px!important}
  .public-surface .identity-pass-main{
    grid-template-columns:70px minmax(0,1fr)!important;
    gap:13px!important;
    margin:30px 0!important;
  }
  .public-surface .identity-pass-avatar{width:70px!important;height:70px!important;border-radius:21px!important}
  .public-surface .identity-pass-main h2{font-size:clamp(22px,8vw,31px)!important}
  .public-surface .identity-pass-main strong{font-size:11px!important}
  .public-surface .identity-pass-bottom{grid-template-columns:1fr!important;padding-top:14px!important}
  .public-surface .identity-pass-bottom span{white-space:normal!important;font-size:9px!important}
  .public-surface .identity-metrics{grid-template-columns:1fr 1fr!important;gap:7px!important}
  .public-surface .identity-metrics>article,.public-surface .identity-metrics>a{min-height:102px!important;padding:13px!important}
  .public-surface .identity-metrics b{font-size:20px!important}
  .public-surface .identity-dashboard-grid{grid-template-columns:1fr!important}
  .public-surface .identity-panel{padding:16px!important;border-radius:18px!important}
  .public-surface .identity-panel-head{gap:10px!important;flex-wrap:wrap!important}
  .public-surface .identity-panel-head h2{font-size:17px!important}
  .public-surface .bonus-request-card{padding:16px!important}
  .public-surface .bonus-request-card .identity-panel-head{padding-right:58px!important}
  .public-surface .bonus-request-mark{width:42px!important;height:42px!important;right:13px!important;top:13px!important}
  .public-surface .bonus-request-form{grid-template-columns:1fr!important;margin-top:17px!important}
  .public-surface .bonus-request-form input{font-size:16px!important}
  .public-surface .bonus-history-list>article{grid-template-columns:1fr!important;gap:9px!important}
}
@media(max-width:420px){
  .public-surface .identity-side-nav{grid-template-columns:1fr!important}
  .public-surface .identity-metrics{grid-template-columns:1fr 1fr!important}
}

/* ----------------------------------------------------------------------
   Public player directory: remove floating role artefacts and make cards
   deterministic on desktop/mobile.
   ---------------------------------------------------------------------- */
.public-surface .profiles-lab-v4 .profiles-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:14px!important;
}
.public-surface .profiles-lab-v4 .profile-directory-card{
  min-width:0!important;
  min-height:420px!important;
  display:flex!important;
  flex-direction:column!important;
}
.public-surface .profiles-lab-v4 .profile-directory-cover,
.public-surface .profiles-lab-v4 .profile-directory-cover:before{
  height:126px!important;
}
.public-surface .profiles-lab-v4 .profile-directory-cover{flex:0 0 126px!important}
.public-surface .profiles-lab-v4 .profile-directory-avatar{
  top:82px!important;
  width:82px!important;
  height:82px!important;
}
.public-surface .profiles-lab-v4 .profile-directory-copy{
  min-width:0!important;
  padding:49px 18px 14px!important;
  display:flex!important;
  flex:1!important;
  flex-direction:column!important;
}
.public-surface .profiles-lab-v4 .profile-online-row{
  min-width:0!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:8px!important;
}
.public-surface .profiles-lab-v4 .profile-online-row>span,
.public-surface .profiles-lab-v4 .profile-online-row>small{
  position:static!important;
  inset:auto!important;
  transform:none!important;
  min-width:0!important;
}
.public-surface .profiles-lab-v4 .profile-online-row>span{
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.public-surface .profiles-lab-v4 .profile-online-row>small{
  max-width:120px!important;
  padding:5px 7px!important;
  border:1px solid rgba(255,255,255,.07)!important;
  border-radius:8px!important;
  background:rgba(255,255,255,.025)!important;
  color:#858c97!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  text-transform:uppercase!important;
}
.public-surface .profiles-lab-v4 .unique-name-line{
  width:100%!important;
  min-width:0!important;
}
.public-surface .profiles-lab-v4 .unique-name-line h2{
  min-width:0!important;
  max-width:100%!important;
  font-size:25px!important;
  overflow-wrap:anywhere!important;
}
.public-surface .profiles-lab-v4 .profile-directory-copy>p{
  min-height:0!important;
  flex:1!important;
}
.public-surface .profiles-lab-v4 .profile-directory-actions{
  margin-top:auto!important;
}
@media(max-width:1180px){
  .public-surface .profiles-lab-v4 .profiles-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:760px){
  .public-surface .profiles-lab-v4 .profiles-grid{grid-template-columns:1fr!important}
  .public-surface .profiles-lab-v4 .profile-directory-card{min-height:0!important}
  .public-surface .profiles-lab-v4 .profile-directory-actions{display:grid!important;grid-template-columns:1fr 1fr!important}
}
@media(max-width:420px){
  .public-surface .profiles-lab-v4 .profile-directory-actions{grid-template-columns:1fr!important}
  .public-surface .profiles-lab-v4 .profile-online-row{grid-template-columns:1fr!important}
  .public-surface .profiles-lab-v4 .profile-online-row>small{max-width:100%!important;width:max-content!important}
}

/* ----------------------------------------------------------------------
   Giveaways: clear automatic ticket flow, visible bank and only active
   trigger conditions. Roulette track is animated by the v21 page JS.
   ---------------------------------------------------------------------- */
.public-surface .ticket-live-card>h2{margin-bottom:6px!important}
.public-surface .giveaway-auto-note{
  margin:0 0 15px!important;
  color:#a6abb3!important;
  font-size:13px!important;
  line-height:1.55!important;
}
.public-surface .ticket-explain-strip{
  grid-template-columns:150px minmax(0,1fr) auto!important;
  padding:15px 16px!important;
  border-color:rgba(255,118,45,.22)!important;
  background:linear-gradient(90deg,rgba(255,111,33,.085),rgba(255,255,255,.018))!important;
}
.public-surface .ticket-explain-strip b{font-size:10px!important}
.public-surface .ticket-explain-strip span{font-size:11px!important;line-height:1.55!important}

.public-surface .giveaway-roulette{
  position:relative!important;
  min-height:148px!important;
  background:
    radial-gradient(circle at 50% 50%,rgba(255,103,27,.11),transparent 48%),
    #08090c!important;
}
.public-surface .giveaway-roulette:before,
.public-surface .giveaway-roulette:after{
  content:""!important;
  position:absolute!important;
  z-index:3!important;
  top:0!important;
  bottom:0!important;
  width:70px!important;
  pointer-events:none!important;
}
.public-surface .giveaway-roulette:before{left:0!important;background:linear-gradient(90deg,#08090c,transparent)!important}
.public-surface .giveaway-roulette:after{right:0!important;background:linear-gradient(-90deg,#08090c,transparent)!important}
.public-surface .giveaway-roulette-track{
  width:max-content!important;
  min-width:100%!important;
  overflow:visible!important;
  scroll-behavior:auto!important;
  will-change:transform!important;
}
.public-surface .giveaway-roulette-track.is-rolling{
  animation:giveaway-v21-roll var(--roulette-duration,18s) linear infinite!important;
}
.public-surface .giveaway-roulette:hover .giveaway-roulette-track.is-rolling{animation-play-state:paused!important}
@keyframes giveaway-v21-roll{
  to{transform:translate3d(calc(-1 * var(--roulette-shift,0px)),0,0)}
}

.public-surface .giveaway-live-stats.ticket-live-stats{
  grid-template-columns:minmax(0,.7fr) minmax(0,.7fr) minmax(220px,1.35fr)!important;
  align-items:stretch!important;
}
.public-surface .giveaway-live-stats.ticket-live-stats>div{
  min-width:0!important;
  border:1px solid rgba(255,255,255,.07)!important;
  border-radius:16px!important;
  background:rgba(255,255,255,.022)!important;
}
.public-surface .giveaway-live-stats .prize-pool-card{
  position:relative!important;
  overflow:hidden!important;
  padding:15px 17px!important;
  border-color:rgba(255,114,38,.34)!important;
  background:
    radial-gradient(circle at 100% 0,rgba(255,119,34,.24),transparent 55%),
    linear-gradient(135deg,rgba(255,96,22,.14),rgba(255,255,255,.025))!important;
  box-shadow:0 18px 42px rgba(255,86,17,.08),inset 0 1px rgba(255,255,255,.04)!important;
}
.public-surface .giveaway-live-stats .prize-pool-card:after{
  content:"+"!important;
  position:absolute!important;
  right:14px!important;
  bottom:-22px!important;
  color:rgba(255,133,68,.09)!important;
  font:900 92px/1 'Unbounded',sans-serif!important;
}
.public-surface .giveaway-live-stats .prize-pool-card small{color:#ff9b62!important}
.public-surface .giveaway-live-stats .prize-pool-card b{
  position:relative!important;
  z-index:1!important;
  margin-top:5px!important;
  color:#fff!important;
  font-size:31px!important;
}
.public-surface .giveaway-live-stats .prize-pool-card span{
  position:relative!important;
  z-index:1!important;
  display:block!important;
  margin-top:2px!important;
  color:#ff9c64!important;
  font-size:9px!important;
  font-weight:800!important;
}

.public-surface .ticket-trigger-grid{
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr))!important;
}
.public-surface .ticket-trigger-grid:empty{display:none!important}
.public-surface .ticket-trigger-grid>div{
  min-width:0!important;
}
.public-surface .ticket-trigger-grid>div.date-trigger{
  border-color:rgba(116,95,255,.16)!important;
  background:rgba(105,80,222,.045)!important;
}

@media(max-width:760px){
  .public-surface .giveaway-auto-note{font-size:12px!important}
  .public-surface .ticket-explain-strip{grid-template-columns:1fr!important}
  .public-surface .giveaway-live-stats.ticket-live-stats{grid-template-columns:1fr 1fr!important}
  .public-surface .giveaway-live-stats .prize-pool-card{grid-column:1/-1!important}
  .public-surface .giveaway-live-stats .prize-pool-card b{font-size:29px!important}
  .public-surface .ticket-trigger-grid{grid-template-columns:1fr!important}
  .public-surface .giveaway-roulette{min-height:132px!important}
}

@media(prefers-reduced-motion:reduce){
  .public-surface .giveaway-roulette-track.is-rolling{animation:none!important;transform:none!important}
}

/* ----------------------------------------------------------------------
   Rich article blocks produced by the v21 publication editor.
   ---------------------------------------------------------------------- */
.public-surface .article-content [style*="text-align: center"],.public-surface .article-content [style*="text-align:center"]{text-align:center!important}
.public-surface .article-content [style*="text-align: right"],.public-surface .article-content [style*="text-align:right"]{text-align:right!important}
.public-surface .article-content [style*="text-align: justify"],.public-surface .article-content [style*="text-align:justify"]{text-align:justify!important}
.public-surface .article-content [style*="text-align: left"],.public-surface .article-content [style*="text-align:left"]{text-align:left!important}
.public-surface .article-content .article-highlight-card{margin:28px 0;padding:25px 27px;border:1px solid rgba(255,123,51,.22);border-radius:21px;background:radial-gradient(circle at 100% 0,rgba(255,119,42,.16),transparent 48%),rgba(255,255,255,.028)}
.public-surface .article-content .article-highlight-card small{display:block;color:#ff9250;font-size:10px;font-weight:900;letter-spacing:.12em}.public-surface .article-content .article-highlight-card strong{display:block;margin:6px 0 7px;color:#fff;font:800 clamp(30px,5vw,42px)/1.05 'Montserrat',sans-serif}.public-surface .article-content .article-highlight-card p{margin:0!important;color:#aab0b8!important}
.public-surface .article-content .article-spoiler{margin:24px 0;overflow:hidden;border:1px solid rgba(255,255,255,.09);border-radius:19px;background:rgba(255,255,255,.025)}
.public-surface .article-content .article-spoiler summary{padding:17px 19px;display:flex;justify-content:space-between;gap:12px;cursor:pointer;color:#fff;font-weight:800}.public-surface .article-content .article-spoiler>div{padding:0 19px 18px;color:#adb2ba}
.public-surface .article-content .article-telegram-card{margin:26px 0;padding:19px;border:1px solid rgba(64,161,255,.19);border-radius:20px;background:linear-gradient(135deg,rgba(45,145,232,.09),rgba(255,112,38,.035));display:grid;grid-template-columns:minmax(0,1fr) auto;gap:17px;align-items:center}
.public-surface .article-content .article-telegram-card>div{display:flex;gap:13px;align-items:flex-start}.public-surface .article-content .article-telegram-card>div>span{width:39px;height:39px;display:grid;place-items:center;flex:0 0 auto;border-radius:12px;background:#229ed9;color:#fff}.public-surface .article-content .article-telegram-card small,.public-surface .article-content .article-telegram-card strong,.public-surface .article-content .article-telegram-card p{display:block}.public-surface .article-content .article-telegram-card small{color:#6dbfff;font-size:9px;font-weight:900}.public-surface .article-content .article-telegram-card strong{margin:3px 0;font-size:16px}.public-surface .article-content .article-telegram-card p{margin:0!important;color:#8f97a3;font-size:12px}.public-surface .article-content .article-telegram-card>a{padding:11px 13px;border-radius:11px;background:#229ed9;color:#fff!important;text-decoration:none;font-size:11px;font-weight:900;white-space:nowrap}
.public-surface .article-content .article-divider{margin:32px 0;display:grid;grid-template-columns:1fr auto 1fr;gap:13px;align-items:center;color:#ff8b48;font-size:9px;font-weight:900;letter-spacing:.14em}.public-surface .article-content .article-divider i{height:1px;background:linear-gradient(90deg,transparent,rgba(255,128,56,.36))}.public-surface .article-content .article-divider i:last-child{background:linear-gradient(90deg,rgba(255,128,56,.36),transparent)}
.public-surface .article-content .article-accent{padding:.08em .28em;border-radius:.38em;background:rgba(255,119,39,.15);color:#ffac78;font-weight:800}
.public-surface .article-content .article-inline-code{padding:.12em .4em;border:1px solid rgba(255,255,255,.08);border-radius:.42em;background:#17191f;color:#ffb183;font:700 .88em/1.5 ui-monospace,SFMono-Regular,Menlo,monospace}
@media(max-width:760px){.public-surface .article-content .article-telegram-card{grid-template-columns:1fr}.public-surface .article-content .article-telegram-card>a{text-align:center}}