:root{
  --bar:82px;
  --shell-panel:#0e130f;
  --shell-panel-raised:#121813;
  --shell-border:rgba(205,255,132,.115)
}

.app-bar{
  gap:22px;
  padding-inline:clamp(16px,2.4vw,36px);
  background:rgba(8,12,9,.94);
  border-color:var(--shell-border)
}

.app-bar-leading{
  flex:1
}

.topbar-home{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  padding:5px;
  border:1px solid var(--shell-border);
  border-radius:11px;
  background:linear-gradient(145deg,rgba(183,255,56,.14),rgba(183,255,56,.025));
  cursor:pointer
}

.topbar-home img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:7px
}

.app-view-heading{
  padding-left:15px;
  border-left:1px solid var(--shell-border)
}

.app-actions{
  min-width:0;
  gap:7px
}

.workspace-view{
  scroll-margin-top:calc(var(--bar) + 12px)
}

.nav-value,.nav-profile{
  min-height:46px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:6px 11px;
  border:1px solid var(--shell-border);
  border-radius:11px;
  background:linear-gradient(145deg,#121713,#0c110d);
  color:#eef2ec;
  text-align:left;
  cursor:pointer;
  transition:border-color .2s ease,background .2s ease,transform .2s ease
}

.nav-value:hover,.nav-profile:hover,.nav-value:focus-visible,.nav-profile:focus-visible,.topbar-home:hover,.topbar-home:focus-visible{
  border-color:rgba(183,255,56,.38);
  background:#151c16;
  outline:0
}

.nav-value:hover,.nav-profile:hover{
  transform:translateY(-1px)
}

.nav-value>span:last-child,.nav-profile>span:last-child{
  min-width:0;
  display:grid;
  gap:2px
}

.nav-value small,.nav-profile small{
  color:#687269;
  font:700 7px monospace;
  letter-spacing:.06em;
  text-transform:uppercase;
  white-space:nowrap
}

.nav-value strong,.nav-profile strong{
  overflow:hidden;
  max-width:106px;
  color:#edf1eb;
  font-size:10px;
  line-height:1.2;
  text-overflow:ellipsis;
  white-space:nowrap
}

.nav-value-icon{
  position:relative;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border-radius:8px;
  background:rgba(183,255,56,.09);
  color:var(--green)
}

.wallet-glyph:before{
  width:14px;
  height:10px;
  border:1.5px solid currentColor;
  border-radius:3px;
  content:""
}

.wallet-glyph:after{
  position:absolute;
  right:6px;
  width:5px;
  height:4px;
  border:1.5px solid currentColor;
  border-radius:2px;
  background:#121713;
  content:""
}

.points-glyph{
  font-size:16px
}

.nav-profile{
  padding-right:13px
}

.nav-profile-avatar{
  width:32px;
  height:32px;
  border-radius:9px;
  font-size:13px
}

.chat-toggle{
  gap:7px
}

.chat-glyph{
  position:relative;
  width:14px;
  height:11px;
  display:block;
  border:1.5px solid currentColor;
  border-radius:4px
}

.chat-glyph:after{
  position:absolute;
  left:2px;
  bottom:-4px;
  width:4px;
  height:4px;
  border-left:1.5px solid currentColor;
  transform:skew(-24deg);
  content:""
}

.decorated-head{
  position:relative;
  min-height:142px;
  align-items:center;
  padding:24px 28px;
  overflow:hidden;
  border:1px solid var(--shell-border);
  border-radius:16px;
  background:radial-gradient(circle at 88% 42%,rgba(183,255,56,.075),transparent 24%),var(--shell-panel)
}

.decorated-head>*{
  position:relative;
  z-index:2
}

.decorated-head:before,.decorated-head:after{
  position:absolute;
  z-index:0;
  right:clamp(160px,22vw,330px);
  width:74px;
  aspect-ratio:1011/1427;
  border-radius:6px;
  background:url('/images/hoodpack.png') center/contain no-repeat;
  filter:drop-shadow(0 18px 18px rgba(0,0,0,.55));
  opacity:.13;
  pointer-events:none;
  content:""
}

.decorated-head:before{
  bottom:-33px;
  transform:rotate(-13deg)
}

.decorated-head:after{
  right:clamp(105px,16vw,245px);
  top:-38px;
  transform:rotate(13deg)
}

.battle-intro{
  background:radial-gradient(circle at 14% 45%,rgba(183,255,56,.1),transparent 34%),var(--shell-panel)
}

.battle-intro:after{
  display:none!important;
  content:""!important
}

.battle-floaters{
  position:absolute!important;
  z-index:0!important;
  inset:0 40% 0 auto;
  width:240px;
  pointer-events:none
}

.battle-floaters img{
  position:absolute;
  width:84px;
  height:auto;
  opacity:.14;
  filter:drop-shadow(0 20px 18px rgba(0,0,0,.6));
  animation:battleCardFloat 5.5s ease-in-out infinite
}

.battle-floaters img:nth-child(1){
  left:21px;
  top:36px;
  transform:rotate(-16deg)
}

.battle-floaters img:nth-child(2){
  left:88px;
  top:8px;
  opacity:.19;
  transform:rotate(2deg);
  animation-delay:-1.6s
}

.battle-floaters img:nth-child(3){
  right:5px;
  top:43px;
  transform:rotate(16deg);
  animation-delay:-3.2s
}

.battle-arena-brand span{
  display:none
}

.battle-arena-brand img{
  opacity:.72
}

.quick-guide,.pack-collection,.showcase-pool,.showcase-machine,.inventory-summary article,.activity-feed,.profile-grid>article,.battle-create,.battle-lobby-panel,.battle-guard,.battle-detail-actions,.battle-result{
  background:linear-gradient(145deg,var(--shell-panel-raised),var(--shell-panel));
  border-color:var(--shell-border)
}

.own-profile-stats{
  grid-template-columns:repeat(4,minmax(0,1fr))
}

.rewards-card{
  position:relative;
  grid-column:1/-1;
  overflow:hidden
}

.rewards-card:after{
  position:absolute;
  right:-28px;
  bottom:-35px;
  width:112px;
  aspect-ratio:1011/1427;
  background:url('/images/hoodpack.png') center/contain no-repeat;
  opacity:.08;
  transform:rotate(13deg);
  content:"";
  pointer-events:none
}

.rewards-card h3{
  margin:14px 0 8px;
  font-size:18px
}

.rewards-card h3 strong{
  color:var(--green);
  font-size:28px
}

.rewards-card p{
  margin:0 0 15px;
  color:#858d86;
  font-size:11px;
  line-height:1.6
}

.reward-lane{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:11px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)
}

.reward-lane span,.rewards-card>small{
  color:#687169;
  font:650 8px/1.45 monospace
}

.reward-lane strong{
  color:#dfe5dc;
  font-size:9px
}

.rewards-card>small{
  position:relative;
  z-index:1;
  display:block;
  margin-top:12px
}

@keyframes battleCardFloat{
  50%{margin-top:-8px}
}

@media(max-width:1380px){
  .nav-points{display:none}
  .battle-floaters{right:35%}
}

@media(max-width:1120px){
  .app-actions [data-auth]{display:none}
  .nav-profile>span:last-child{display:none}
  .nav-profile{padding:6px}
  .nav-balance .nav-value-icon{display:none}
}

@media(max-width:900px){
  .decorated-head:before,.decorated-head:after{right:48px;opacity:.08}
  .decorated-head:after{right:94px}
  .battle-floaters{right:7%;opacity:.7}
  .own-profile-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:820px){
  :root{--bar:70px}
  .app-bar{padding-inline:12px}
  .app-bar-leading{flex:0 1 auto}
  .topbar-home{width:36px;height:36px}
  .app-view-heading{padding-left:10px}
  .app-view-heading h1{font-size:17px}
  .nav-balance{min-height:40px;padding:5px 9px}
  .nav-balance strong{max-width:84px}
  .nav-profile{min-height:40px}
  .nav-profile-avatar{width:28px;height:28px}
  .app-actions .chat-toggle{display:none}
  .app-actions [data-connect]{min-height:40px}
  .decorated-head{min-height:130px;padding:21px}
  .decorated-head>div:first-child{max-width:72%}
  .battle-page-head>div:first-child{max-width:100%}
  .battle-floaters{right:-8%;opacity:.42}
}

@media(max-width:620px){
  .app-bar-leading{min-width:0}
  .app-view-heading{border-left:0;padding-left:7px}
  .topbar-home{border-color:transparent;background:transparent;padding:3px}
  .app-actions{position:static!important;top:auto!important;right:auto!important}
  .app-actions .nav-balance{display:none}
  .wallet-connected .app-actions [data-connect]{display:none}
  .app-actions .nav-profile{display:flex}
  .app-actions .button{font-size:10px;padding:10px 12px}
  .app-actions [data-connect]::after{content:none}
  .decorated-head{align-items:flex-start;padding:20px}
  .decorated-head>div:first-child{max-width:82%}
  .decorated-head:before{right:13px}
  .decorated-head:after{display:none}
  .decorated-head>.button,.decorated-head>.status{align-self:flex-start}
  .battle-page-head>div:first-child{max-width:100%}
  .battle-page-head:before{display:none}
  .battle-floaters{display:none}
  .own-profile-stats{grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){
  .battle-floaters img{animation:none}
}

.workspace{
  container:workspace/inline-size
}

@container workspace (max-width:980px){
  .packs-hero{grid-template-columns:minmax(0,1fr) minmax(0,.8fr)}
  .live-stack{display:none}
}

@container workspace (max-width:900px){
  .social-profile-layout{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
  .own-profile-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .profile-side-stack .profile-grid{grid-template-columns:1fr}
}

@container workspace (max-width:680px){
  .social-profile-layout{grid-template-columns:1fr}
}