/* Main Menu · Dragon Guardian statues background · 2026-09-20
   The artwork is a passive scene layer. Every interactive control stays above it. */
.dc-home-cinematic-bg{
  z-index:-4!important;
  transform:none!important;
  background:
    linear-gradient(180deg,rgba(2,6,12,.16) 0%,rgba(2,6,12,.04) 36%,rgba(2,6,12,.28) 68%,rgba(1,4,8,.66) 100%),
    linear-gradient(90deg,rgba(1,4,8,.30) 0%,rgba(1,4,8,.04) 28%,rgba(1,4,8,0) 50%,rgba(1,4,8,.04) 72%,rgba(1,4,8,.30) 100%),
    url('art/Gemini_Generated_Image_jtbedyjtbedyjtbe.jpg') center center/cover no-repeat!important;
}
.dc-home-cinematic-bg::before{
  background:radial-gradient(ellipse at 50% 54%,rgba(100,127,178,.10) 0%,rgba(100,127,178,.035) 30%,transparent 58%)!important;
}
.dc-home-architecture{display:none!important}
.dc-home::before,.dc-home::after{display:none!important}
.dc-home-atmosphere{
  z-index:-3!important;
  background:
    radial-gradient(ellipse at 50% 61%,rgba(85,95,160,.10) 0%,transparent 38%),
    linear-gradient(180deg,transparent 58%,rgba(1,4,9,.38) 100%)!important;
}
.dc-home-atmosphere::before,.dc-home-atmosphere::after{opacity:.16!important}
.dc-menu-vignette{z-index:-2!important;box-shadow:inset 0 0 125px rgba(0,0,0,.58)!important}

/* Hard layering guarantee: scenery never covers or captures the menu UI. */
.dc-home-top,.dc-home-center,.dc-home-bottom,.dc-credit,.dc-maintenance{position:relative;z-index:20!important}
.dc-home-cinematic-bg,.dc-home-atmosphere,.dc-home-architecture,.dc-menu-vignette{pointer-events:none!important}
.dc-home button,.dc-home [data-portal],.dc-home .language-inline{position:relative;z-index:21}

/* PLAY stays the focal command without becoming a portal effect. */
.dc-play-button{
  isolation:isolate;
  transition:transform .16s ease,box-shadow .18s ease,filter .18s ease,background .18s ease!important;
}
.dc-play-button::after{
  content:"";
  position:absolute;
  inset:-18px -28px;
  z-index:-1;
  pointer-events:none;
  border:1px solid rgba(232,195,108,0);
  clip-path:polygon(7% 0,93% 0,100% 23%,100% 77%,93% 100%,7% 100%,0 77%,0 23%);
  box-shadow:0 0 0 rgba(83,174,255,0),0 0 0 rgba(213,168,84,0);
  opacity:0;
  transform:scale(.96);
  transition:opacity .16s ease,transform .18s ease,border-color .16s ease,box-shadow .18s ease;
}
.dc-play-button:hover::after{
  opacity:.54;
  transform:scale(1);
  border-color:rgba(221,185,101,.28);
  box-shadow:0 0 34px rgba(78,160,232,.18),0 0 54px rgba(199,148,68,.10);
}
.dc-play-button:active{
  transform:scale(1.025);
  filter:brightness(1.22);
  background:radial-gradient(circle at 50% 50%,#3c80aa,#0d3555 62%,#07121e)!important;
  box-shadow:0 0 82px rgba(55,187,255,.72),0 0 42px rgba(236,193,91,.42),inset 0 0 72px rgba(81,191,255,.42),0 16px 42px rgba(0,0,0,.78)!important;
}
.dc-play-button:active::after{
  opacity:1;
  transform:scale(1.09);
  border-color:rgba(255,221,137,.72);
  box-shadow:0 0 55px rgba(69,183,255,.45),0 0 85px rgba(223,170,69,.28);
}

@media(max-width:760px){
  .dc-home-cinematic-bg{background-position:center center!important}
}
@media(prefers-reduced-motion:reduce){
  .dc-play-button,.dc-play-button::after{transition:none!important}
}


/* Main Menu · Basalt Sigil buttons · 2026-09-20
   Heavy carved basalt + aged bronze. No extra image assets. */
.dc-home .dc-frame-button,
.dc-home .dc-play-button{
  --sigil-bronze:#b8924f;
  --sigil-bronze-hi:#e6c77f;
  --sigil-edge:#2a2117;
  --sigil-stone-1:#17191b;
  --sigil-stone-2:#0c0f12;
  --sigil-stone-3:#050708;
  position:relative;
  overflow:visible;
  color:#eee6d6!important;
  font-family:Georgia,"Times New Roman",serif!important;
  font-weight:700!important;
  letter-spacing:.13em!important;
  text-transform:uppercase;
  border:1px solid rgba(189,148,78,.72)!important;
  border-radius:3px!important;
  background:
    radial-gradient(120% 95% at 50% 0%,rgba(255,255,255,.075),transparent 38%),
    linear-gradient(180deg,var(--sigil-stone-1) 0%,var(--sigil-stone-2) 52%,var(--sigil-stone-3) 100%)!important;
  box-shadow:
    inset 0 1px 0 rgba(242,211,144,.16),
    inset 0 -2px 0 rgba(0,0,0,.86),
    inset 8px 0 14px rgba(0,0,0,.14),
    inset -8px 0 14px rgba(0,0,0,.14),
    0 2px 0 rgba(0,0,0,.88),
    0 9px 22px rgba(0,0,0,.38)!important;
  text-shadow:0 1px 1px #000,0 0 8px rgba(231,198,127,.12);
  clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px);
  transition:transform .14s ease,filter .16s ease,box-shadow .18s ease,border-color .18s ease,color .18s ease!important;
}
.dc-home .dc-frame-button::before,
.dc-home .dc-play-button::before{
  content:"";
  position:absolute;
  inset:4px;
  pointer-events:none;
  opacity:.86;
  background:
    linear-gradient(135deg,rgba(219,177,94,.65) 0 1px,transparent 1px 12px) top left/18px 18px no-repeat,
    linear-gradient(225deg,rgba(219,177,94,.65) 0 1px,transparent 1px 12px) top right/18px 18px no-repeat,
    linear-gradient(45deg,rgba(219,177,94,.40) 0 1px,transparent 1px 12px) bottom left/18px 18px no-repeat,
    linear-gradient(315deg,rgba(219,177,94,.40) 0 1px,transparent 1px 12px) bottom right/18px 18px no-repeat;
  border-top:1px solid rgba(232,199,127,.18);
  border-bottom:1px solid rgba(82,61,31,.55);
  clip-path:polygon(9px 0,calc(100% - 9px) 0,100% 9px,100% calc(100% - 9px),calc(100% - 9px) 100%,9px 100%,0 calc(100% - 9px),0 9px);
}
.dc-home .dc-frame-button::after{
  content:"";
  position:absolute;
  left:14%;
  right:14%;
  top:-2px;
  height:3px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(223,186,107,.72) 18%,rgba(246,216,148,.95) 50%,rgba(223,186,107,.72) 82%,transparent);
  opacity:.34;
  filter:blur(.15px);
  transition:opacity .18s ease,filter .18s ease;
}
.dc-home .dc-frame-button:hover{
  color:#fff1ce!important;
  border-color:rgba(230,193,116,.96)!important;
  transform:translateY(-1px);
  filter:brightness(1.08);
  box-shadow:
    inset 0 1px 0 rgba(255,224,161,.25),
    inset 0 -2px 0 rgba(0,0,0,.9),
    inset 0 0 24px rgba(180,131,57,.09),
    0 2px 0 #000,
    0 12px 27px rgba(0,0,0,.48),
    0 0 16px rgba(183,137,62,.10)!important;
}
.dc-home .dc-frame-button:hover::after{opacity:.86;filter:brightness(1.18)}
.dc-home .dc-frame-button:active{
  transform:translateY(1px) scale(.992);
  filter:brightness(.96);
  box-shadow:inset 0 3px 12px rgba(0,0,0,.82),0 1px 0 #000!important;
}

/* PLAY is the monumental central sigil: thicker stone, bronze crown-line, carved chevrons. */
.dc-home .dc-play-button{
  min-width:clamp(230px,18vw,360px)!important;
  min-height:clamp(76px,7vw,112px)!important;
  padding:0 46px!important;
  font-size:clamp(24px,2vw,38px)!important;
  letter-spacing:.18em!important;
  border-width:2px!important;
  border-color:rgba(205,164,85,.86)!important;
  background:
    radial-gradient(90% 120% at 50% 0%,rgba(255,240,198,.10),transparent 42%),
    radial-gradient(80% 115% at 50% 100%,rgba(67,84,94,.17),transparent 48%),
    linear-gradient(180deg,#202326 0%,#111417 47%,#080a0c 100%)!important;
  box-shadow:
    inset 0 2px 0 rgba(244,214,149,.20),
    inset 0 -4px 0 rgba(0,0,0,.88),
    inset 14px 0 24px rgba(0,0,0,.22),
    inset -14px 0 24px rgba(0,0,0,.22),
    0 3px 0 #020303,
    0 18px 38px rgba(0,0,0,.52),
    0 0 0 1px rgba(64,45,23,.72)!important;
  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);
}
.dc-home .dc-play-button::before{
  inset:6px;
  border:1px solid rgba(201,159,83,.34);
  background:
    linear-gradient(135deg,transparent 0 8px,rgba(230,194,117,.72) 8px 9px,transparent 9px) top left/28px 28px no-repeat,
    linear-gradient(225deg,transparent 0 8px,rgba(230,194,117,.72) 8px 9px,transparent 9px) top right/28px 28px no-repeat,
    linear-gradient(45deg,transparent 0 8px,rgba(168,125,61,.55) 8px 9px,transparent 9px) bottom left/28px 28px no-repeat,
    linear-gradient(315deg,transparent 0 8px,rgba(168,125,61,.55) 8px 9px,transparent 9px) bottom right/28px 28px no-repeat;
  clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 14px,100% calc(100% - 14px),calc(100% - 14px) 100%,14px 100%,0 calc(100% - 14px),0 14px);
}
.dc-home .dc-play-button::after{
  inset:-14px -24px;
  border:0!important;
  clip-path:none!important;
  background:
    linear-gradient(90deg,transparent 0 8%,rgba(190,145,72,.0) 8% 16%,rgba(229,190,106,.74) 16% 17%,transparent 17% 83%,rgba(229,190,106,.74) 83% 84%,rgba(190,145,72,.0) 84% 92%,transparent 92%) center/100% 1px no-repeat,
    linear-gradient(90deg,transparent 0 21%,rgba(213,172,91,.52) 21% 22%,transparent 22% 78%,rgba(213,172,91,.52) 78% 79%,transparent 79%) center/100% 100% no-repeat;
  opacity:.32;
  box-shadow:none!important;
  transform:none!important;
}
.dc-home .dc-play-button:hover{
  color:#fff3d2!important;
  transform:translateY(-2px) scale(1.015);
  border-color:rgba(241,207,132,.98)!important;
  filter:brightness(1.10);
  box-shadow:
    inset 0 2px 0 rgba(255,229,171,.28),
    inset 0 -4px 0 rgba(0,0,0,.9),
    inset 0 0 34px rgba(191,145,69,.10),
    0 3px 0 #020303,
    0 22px 44px rgba(0,0,0,.58),
    0 0 24px rgba(193,145,65,.14)!important;
}
.dc-home .dc-play-button:hover::after{opacity:.78!important;box-shadow:none!important}
.dc-home .dc-play-button:active{
  transform:translateY(1px) scale(.998)!important;
  filter:brightness(.96)!important;
  background:
    radial-gradient(90% 120% at 50% 0%,rgba(255,240,198,.08),transparent 42%),
    linear-gradient(180deg,#16191b 0%,#0b0d0f 100%)!important;
  box-shadow:inset 0 5px 20px rgba(0,0,0,.86),0 1px 0 #000!important;
}
.dc-home .dc-play-button:active::after{opacity:.48!important;transform:none!important}

/* Keep language control visually consistent without touching its internal behavior. */
.dc-home .language-inline{
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.24));
}

@media(max-width:760px){
  .dc-home .dc-frame-button{letter-spacing:.09em!important}
  .dc-home .dc-play-button{min-width:min(78vw,310px)!important;padding-inline:34px!important}
}


/* Main Menu · White Marble Slab buttons · 2026-09-20
   Clean monumental slabs. NO hexagons, NO fantasy cut corners. */
.dc-home .dc-frame-button,
.dc-home .dc-play-button{
  position:relative;
  overflow:hidden;
  color:#111214!important;
  font-family:Georgia,"Times New Roman",serif!important;
  font-weight:700!important;
  letter-spacing:.12em!important;
  text-transform:uppercase;
  border:1px solid rgba(26,27,29,.42)!important;
  border-radius:2px!important;
  clip-path:none!important;
  background:
    linear-gradient(112deg,transparent 0 18%,rgba(70,74,80,.08) 18.5% 19.2%,transparent 19.8% 44%,rgba(110,114,120,.07) 44.4% 45%,transparent 45.6% 67%,rgba(72,76,82,.08) 67.5% 68.1%,transparent 68.8% 100%),
    linear-gradient(78deg,transparent 0 27%,rgba(125,128,134,.06) 27.4% 28%,transparent 28.6% 73%,rgba(86,90,96,.07) 73.4% 74%,transparent 74.6% 100%),
    linear-gradient(180deg,#fbfaf7 0%,#ece9e2 48%,#d9d5ce 100%)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -2px 0 rgba(75,76,78,.20),
    inset 0 0 22px rgba(77,81,87,.06),
    0 3px 0 rgba(12,13,15,.42),
    0 10px 24px rgba(0,0,0,.34)!important;
  text-shadow:0 1px 0 rgba(255,255,255,.55)!important;
  transition:transform .14s ease,filter .16s ease,box-shadow .18s ease,border-color .18s ease!important;
}
.dc-home .dc-frame-button::before,
.dc-home .dc-play-button::before{
  content:"";
  position:absolute;
  inset:4px;
  pointer-events:none;
  border:1px solid rgba(40,42,45,.13);
  background:none!important;
  clip-path:none!important;
  opacity:1!important;
}
.dc-home .dc-frame-button::after,
.dc-home .dc-play-button::after{
  content:"";
  position:absolute;
  left:10%;
  right:10%;
  top:0;
  height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent)!important;
  opacity:.72!important;
  filter:none!important;
  box-shadow:none!important;
  transform:none!important;
  border:0!important;
  clip-path:none!important;
}
.dc-home .dc-frame-button:hover,
.dc-home .dc-play-button:hover{
  color:#050607!important;
  transform:translateY(-1px)!important;
  filter:brightness(1.035)!important;
  border-color:rgba(17,18,20,.62)!important;
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -2px 0 rgba(62,64,68,.22),
    inset 0 0 26px rgba(101,105,111,.08),
    0 3px 0 rgba(7,8,9,.46),
    0 13px 29px rgba(0,0,0,.40),
    0 0 0 1px rgba(255,255,255,.22)!important;
}
.dc-home .dc-frame-button:active,
.dc-home .dc-play-button:active{
  transform:translateY(1px)!important;
  filter:brightness(.97)!important;
  background:
    linear-gradient(112deg,transparent 0 18%,rgba(70,74,80,.08) 18.5% 19.2%,transparent 19.8% 44%,rgba(110,114,120,.07) 44.4% 45%,transparent 45.6% 67%,rgba(72,76,82,.08) 67.5% 68.1%,transparent 68.8% 100%),
    linear-gradient(180deg,#e9e6df 0%,#d6d2cb 100%)!important;
  box-shadow:inset 0 3px 10px rgba(55,58,62,.18),0 1px 0 rgba(0,0,0,.44)!important;
}

/* PLAY: same marble language, larger and cleaner. */
.dc-home .dc-play-button{
  min-width:clamp(240px,18vw,360px)!important;
  min-height:clamp(74px,6.7vw,104px)!important;
  padding:0 48px!important;
  font-size:clamp(24px,2vw,38px)!important;
  letter-spacing:.18em!important;
  border-width:1px!important;
  border-radius:2px!important;
  clip-path:none!important;
  background:
    linear-gradient(115deg,transparent 0 16%,rgba(83,87,93,.10) 16.5% 17.2%,transparent 17.8% 39%,rgba(124,127,133,.07) 39.4% 40%,transparent 40.7% 64%,rgba(74,78,84,.09) 64.5% 65.1%,transparent 65.8% 100%),
    linear-gradient(78deg,transparent 0 30%,rgba(117,121,126,.07) 30.5% 31.1%,transparent 31.8% 71%,rgba(92,96,101,.07) 71.4% 72%,transparent 72.6% 100%),
    linear-gradient(180deg,#fffefa 0%,#efede7 50%,#d8d4cc 100%)!important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.98),
    inset 0 -3px 0 rgba(70,72,75,.20),
    inset 0 0 28px rgba(77,81,86,.07),
    0 4px 0 rgba(6,7,8,.48),
    0 18px 38px rgba(0,0,0,.48)!important;
}
.dc-home .dc-play-button::before{
  inset:6px;
  border:1px solid rgba(28,30,33,.16);
}
.dc-home .dc-play-button:hover{
  box-shadow:
    inset 0 2px 0 #fff,
    inset 0 -3px 0 rgba(63,65,69,.22),
    inset 0 0 32px rgba(82,86,92,.09),
    0 4px 0 rgba(6,7,8,.48),
    0 22px 44px rgba(0,0,0,.52)!important;
}

@media(max-width:760px){
  .dc-home .dc-frame-button{letter-spacing:.09em!important}
  .dc-home .dc-play-button{min-width:min(78vw,320px)!important;padding-inline:34px!important}
}


/* Extend white-marble language to language control + player identity panel. */
.dc-home .language-inline{
  margin:0!important;
  padding:7px 9px!important;
  border:1px solid rgba(26,27,29,.42)!important;
  border-radius:2px!important;
  background:
    linear-gradient(112deg,transparent 0 20%,rgba(72,76,82,.07) 20.5% 21%,transparent 21.6% 53%,rgba(105,109,114,.06) 53.4% 54%,transparent 54.6% 100%),
    linear-gradient(180deg,#faf9f5 0%,#ece9e2 50%,#d9d5ce 100%)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -2px 0 rgba(75,76,78,.18),
    0 3px 0 rgba(12,13,15,.38),
    0 9px 22px rgba(0,0,0,.30)!important;
  filter:none!important;
}
.dc-home .language-inline-label{
  color:#111214!important;
  text-shadow:0 1px 0 rgba(255,255,255,.55)!important;
}
.dc-home .language-inline .language-selector button{
  min-height:40px!important;
  color:#111214!important;
  border:1px solid rgba(35,37,40,.28)!important;
  border-radius:2px!important;
  background:linear-gradient(180deg,#fff 0%,#e8e5df 100%)!important;
  box-shadow:inset 0 1px 0 #fff,0 2px 5px rgba(0,0,0,.16)!important;
  text-shadow:none!important;
}
.dc-home .language-inline .language-selector button:hover{
  border-color:rgba(17,18,20,.56)!important;
  filter:brightness(1.02);
}
.dc-home .language-inline .language-selector button[aria-pressed=true]{
  color:#050607!important;
  border-color:rgba(17,18,20,.66)!important;
  background:linear-gradient(180deg,#f4f1eb 0%,#d7d3cb 100%)!important;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),inset 0 2px 5px rgba(0,0,0,.09)!important;
}

/* Top-left profile card becomes a matching marble identity slab. */
.dc-home .dc-player-panel{
  border:1px solid rgba(26,27,29,.44)!important;
  border-radius:2px!important;
  background:
    linear-gradient(116deg,transparent 0 16%,rgba(70,74,80,.075) 16.5% 17.2%,transparent 17.8% 41%,rgba(115,118,124,.06) 41.5% 42.1%,transparent 42.8% 70%,rgba(78,82,88,.07) 70.4% 71%,transparent 71.6% 100%),
    linear-gradient(78deg,transparent 0 33%,rgba(102,106,112,.055) 33.5% 34%,transparent 34.6% 79%,rgba(79,83,89,.055) 79.5% 80%,transparent 80.6% 100%),
    linear-gradient(180deg,#fbfaf7 0%,#ece9e2 50%,#d7d3cc 100%)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -2px 0 rgba(70,72,75,.18),
    0 3px 0 rgba(12,13,15,.40),
    0 12px 28px rgba(0,0,0,.36)!important;
}
.dc-home .dc-player-profile-hit{
  background:transparent!important;
}
.dc-home .dc-player-profile-hit:hover,
.dc-home .dc-player-profile-hit:focus-visible{
  background:linear-gradient(90deg,rgba(255,255,255,.34),rgba(117,121,127,.07) 72%,transparent)!important;
  box-shadow:inset 0 0 20px rgba(67,71,77,.06)!important;
}
.dc-home .dc-player-copy small{
  color:#555960!important;
}
.dc-home .dc-player-copy>strong{
  color:#111214!important;
  text-shadow:0 1px 0 rgba(255,255,255,.55)!important;
}
.dc-home .dc-player-copy>span{
  color:#30343a!important;
}
.dc-home .dc-player-profile-hit:hover .dc-player-copy>strong,
.dc-home .dc-player-profile-hit:focus-visible .dc-player-copy>strong{
  color:#050607!important;
  text-shadow:0 1px 0 #fff!important;
}
.dc-home .dc-player-name::after{
  background:linear-gradient(90deg,#1b1d20,transparent)!important;
}
.dc-home .dc-view-profile{
  color:#3d4147!important;
}
.dc-home .dc-player-separator{
  background:linear-gradient(180deg,transparent,rgba(47,50,54,.22) 22%,rgba(18,20,23,.38) 50%,rgba(47,50,54,.22) 78%,transparent)!important;
  box-shadow:none!important;
}
.dc-home .dc-player-rank::before{
  opacity:.34;
}
.dc-home .dc-player-rank strong{
  color:#1f3b4d!important;
  text-shadow:none!important;
}
.dc-home .dc-player-rank span{
  color:#4a3b1e!important;
}
.dc-home .dc-player-avatar{
  border-color:#4a4c50!important;
  box-shadow:0 0 0 3px rgba(255,255,255,.52),0 0 0 4px rgba(32,34,37,.28),0 5px 12px rgba(0,0,0,.20)!important;
}


/* Logout must read as an active marble control, not a disabled one. */
.dc-home .dc-logout{
  opacity:1!important;
  color:#111214!important;
  filter:none!important;
}
.dc-home .dc-logout:hover{
  color:#050607!important;
  filter:brightness(1.035)!important;
}


/* Play screen · Minimal Black Marble · 2026-09-20
   Keep the arena environment behind the UI. Remove imagery from mode cards.
   All utility/action controls use white marble with black type. */
.dc-play-screen{
  --rank-color:#d7d7d7;
  --rank-soft:rgba(215,215,215,.18);
}
.dc-play-screen.rank-quartz{--rank-color:#e1ddd4;--rank-soft:rgba(225,221,212,.18)}
.dc-play-screen.rank-sapphire{--rank-color:#53a8ff;--rank-soft:rgba(83,168,255,.20)}
.dc-play-screen.rank-ruby{--rank-color:#ef5b5b;--rank-soft:rgba(239,91,91,.20)}
.dc-play-screen.rank-obsidian{--rank-color:#9a93ad;--rank-soft:rgba(154,147,173,.20)}
.dc-play-screen.rank-black-opal{--rank-color:#b06cff;--rank-soft:rgba(176,108,255,.22)}
.dc-play-screen.rank-dragonstone{--rank-color:#58d5b0;--rank-soft:rgba(88,213,176,.20)}
.dc-play-screen.rank-ascension{--rank-color:#f2c96f;--rank-soft:rgba(242,201,111,.22)}
.dc-play-screen.rank-ascension-lord{--rank-color:#ffd987;--rank-soft:rgba(255,217,135,.24)}

/* The arena/citadel background remains untouched. */
.dc-play-screen .dc-cinematic-bg{display:block!important}

/* Minimal cards: black marble, no artwork. */
.dc-play-screen .dc-mode-card{
  overflow:hidden!important;
  border:1px solid rgba(255,255,255,.16)!important;
  border-radius:2px!important;
  background:
    linear-gradient(118deg,transparent 0 19%,rgba(255,255,255,.022) 19.4% 20%,transparent 20.6% 43%,rgba(255,255,255,.018) 43.5% 44.1%,transparent 44.8% 72%,rgba(255,255,255,.02) 72.5% 73.1%,transparent 73.8% 100%),
    linear-gradient(76deg,transparent 0 31%,rgba(255,255,255,.018) 31.5% 32.1%,transparent 32.7% 68%,rgba(255,255,255,.015) 68.5% 69.1%,transparent 69.8% 100%),
    linear-gradient(180deg,#111214 0%,#090a0c 52%,#040506 100%)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -2px 0 rgba(0,0,0,.75),
    0 14px 34px rgba(0,0,0,.40)!important;
}
.dc-play-screen .dc-mode-card::after{
  inset:7px!important;
  border:1px solid rgba(255,255,255,.06)!important;
  box-shadow:none!important;
}
.dc-play-screen .dc-mode-art,
.dc-play-screen .dc-bot-statue{
  display:none!important;
}
.dc-play-screen .dc-mode-arena,
.dc-play-screen .dc-mode-private{
  background:
    linear-gradient(118deg,transparent 0 19%,rgba(255,255,255,.022) 19.4% 20%,transparent 20.6% 43%,rgba(255,255,255,.018) 43.5% 44.1%,transparent 44.8% 72%,rgba(255,255,255,.02) 72.5% 73.1%,transparent 73.8% 100%),
    linear-gradient(180deg,#111214 0%,#090a0c 52%,#040506 100%)!important;
}
.dc-play-screen .dc-mode-right .dc-mode-copy{
  background:none!important;
  padding-top:24px!important;
}
.dc-play-screen .dc-mode-bots{
  justify-content:center;
}
.dc-play-screen .dc-mode-bots .dc-mode-copy{
  margin:auto 0;
}
.dc-play-screen .dc-mode-copy h2,
.dc-play-screen .dc-mode-ranked h2{
  color:#f6f6f6!important;
  text-shadow:none!important;
}
.dc-play-screen .dc-mode-copy p,
.dc-play-screen .dc-ranked-stats span,
.dc-play-screen .dc-play-head>div>span{
  color:#b9bcc1!important;
}
.dc-play-screen .dc-play-head>div h1,
.dc-play-screen .dc-play-head .eyebrow{
  color:#f5f5f5!important;
  text-shadow:none!important;
}

/* Ranked card: restrained, with rank-specific identity only. */
.dc-play-screen .dc-mode-ranked{
  background:
    radial-gradient(circle at 50% 24%,var(--rank-soft) 0%,transparent 34%),
    linear-gradient(118deg,transparent 0 21%,rgba(255,255,255,.022) 21.5% 22.1%,transparent 22.7% 53%,rgba(255,255,255,.016) 53.5% 54.1%,transparent 54.7% 100%),
    linear-gradient(180deg,#111214 0%,#090a0c 52%,#040506 100%)!important;
  border-color:color-mix(in srgb,var(--rank-color) 55%,transparent)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -2px 0 rgba(0,0,0,.75),
    0 14px 34px rgba(0,0,0,.44),
    0 0 26px var(--rank-soft)!important;
}
.dc-play-screen .dc-rank-aura{display:none!important}
.dc-play-screen .dc-mode-ranked .eyebrow{
  color:var(--rank-color)!important;
  letter-spacing:.18em;
}
.dc-play-screen .dc-mode-ranked h2{
  color:var(--rank-color)!important;
  font-size:clamp(32px,2.4vw,46px)!important;
  text-shadow:0 0 20px var(--rank-soft)!important;
}
.dc-play-screen .dc-ranked-rp{
  color:var(--rank-color)!important;
  text-shadow:0 0 16px var(--rank-soft)!important;
}

/* Proper crest treatment: asset sits inside a complete shield, never visually cropped. */
.dc-play-screen .dc-rank-crest{
  position:relative;
  display:grid;
  place-items:center;
  width:clamp(180px,15vw,250px);
  aspect-ratio:1/1.08;
  margin:0 auto 8px;
  isolation:isolate;
}
.dc-play-screen .dc-rank-crest::before{
  content:"";
  position:absolute;
  inset:5%;
  z-index:-2;
  clip-path:polygon(50% 0,87% 10%,100% 36%,92% 72%,50% 100%,8% 72%,0 36%,13% 10%);
  background:
    linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.02) 30%,rgba(0,0,0,.38) 78%),
    linear-gradient(180deg,#17191c,#070809);
  border:1px solid var(--rank-color);
  box-shadow:
    inset 0 0 0 4px rgba(255,255,255,.035),
    inset 0 -14px 24px rgba(0,0,0,.55),
    0 12px 22px rgba(0,0,0,.46),
    0 0 28px var(--rank-soft);
}
.dc-play-screen .dc-rank-crest::after{
  content:"";
  position:absolute;
  inset:12%;
  z-index:-1;
  clip-path:polygon(50% 0,86% 11%,98% 37%,90% 70%,50% 96%,10% 70%,2% 37%,14% 11%);
  border:1px solid color-mix(in srgb,var(--rank-color) 65%,white 10%);
  box-shadow:inset 0 0 18px rgba(0,0,0,.38);
}
.dc-play-screen .dc-ranked-emblem{
  width:72%!important;
  height:72%!important;
  max-width:none!important;
  object-fit:contain!important;
  object-position:center!important;
  filter:drop-shadow(0 7px 9px rgba(0,0,0,.45)) drop-shadow(0 0 10px var(--rank-soft))!important;
  transform:none!important;
}

/* White marble controls, black text — everywhere on this page. */
.dc-play-screen .dc-frame-button,
.dc-play-screen .dc-mode-action,
.dc-play-screen .dc-ranked-secondary,
.dc-play-screen .dc-find-match,
.dc-play-screen .language-inline,
.dc-play-screen .language-selector button{
  color:#111214!important;
  border:1px solid rgba(25,27,30,.46)!important;
  border-radius:2px!important;
  background:
    linear-gradient(114deg,transparent 0 20%,rgba(72,76,82,.07) 20.5% 21.1%,transparent 21.7% 51%,rgba(108,112,118,.06) 51.5% 52.1%,transparent 52.7% 100%),
    linear-gradient(180deg,#fffefa 0%,#efede7 52%,#d8d4cc 100%)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    inset 0 -2px 0 rgba(70,72,76,.18),
    0 3px 0 rgba(10,11,12,.34),
    0 8px 18px rgba(0,0,0,.22)!important;
  text-shadow:none!important;
  filter:none!important;
}
.dc-play-screen .dc-find-match{
  width:min(420px,100%)!important;
  min-height:68px!important;
  font:700 24px Georgia,serif!important;
  letter-spacing:.08em!important;
}
.dc-play-screen .dc-frame-button:hover,
.dc-play-screen .dc-mode-action:hover,
.dc-play-screen .dc-ranked-secondary:hover,
.dc-play-screen .dc-find-match:hover,
.dc-play-screen .language-selector button:hover{
  color:#050607!important;
  border-color:rgba(12,13,15,.72)!important;
  filter:brightness(1.03)!important;
}
.dc-play-screen .language-inline{
  padding:6px 8px!important;
}
.dc-play-screen .language-inline-label{
  color:#111214!important;
  text-shadow:none!important;
}
.dc-play-screen .language-selector button[aria-pressed=true]{
  background:linear-gradient(180deg,#ece9e3,#cbc7c0)!important;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.11)!important;
}

/* Ranked stat separators pick up only a hint of the rank color. */
.dc-play-screen .dc-ranked-stats{
  border-color:color-mix(in srgb,var(--rank-color) 34%,#3d3f42)!important;
}
.dc-play-screen .dc-ranked-stats b{
  color:#fff!important;
}

/* Mobile keeps the same minimal hierarchy. */
@media(max-width:760px){
  .dc-play-screen .dc-rank-crest{width:190px}
  .dc-play-screen .dc-mode-bots{min-height:360px!important}
}


/* Play screen background: reuse the approved Main Menu artwork exactly. */
.dc-play-screen .dc-cinematic-bg{
  z-index:-4!important;
  transform:none!important;
  background:
    linear-gradient(180deg,rgba(2,6,12,.16) 0%,rgba(2,6,12,.05) 38%,rgba(2,6,12,.24) 72%,rgba(1,4,8,.54) 100%),
    linear-gradient(90deg,rgba(1,4,8,.22) 0%,rgba(1,4,8,.03) 28%,rgba(1,4,8,0) 50%,rgba(1,4,8,.03) 72%,rgba(1,4,8,.22) 100%),
    url('art/Gemini_Generated_Image_jtbedyjtbedyjtbe.jpg') center center/cover no-repeat!important;
  pointer-events:none!important;
}


/* Play rank hero sizing: simple 1.5x scale, nothing fancy. */
.dc-play-screen .dc-rank-crest{
  width:clamp(270px,22.5vw,375px)!important;
}
@media(max-width:760px){
  .dc-play-screen .dc-rank-crest{width:285px!important}
}




/* FINAL off-match visual pass · scoped safely */
.dc-play-screen .dc-rank-crest::before,
.dc-play-screen .dc-rank-crest::after{display:none!important}
.dc-play-screen .dc-rank-crest{
  width:clamp(270px,22.5vw,375px)!important;
  aspect-ratio:1!important;
  margin-bottom:4px!important;
}
.dc-play-screen .play-rank-emblem{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  filter:drop-shadow(0 14px 14px rgba(0,0,0,.48)) drop-shadow(0 0 16px var(--rank-soft))!important;
}

/* White marble controls on off-match account UI.
   Encyclopedia is intentionally not targeted. */
.account-page button,
.account-page .profile-tabs a,
.account-gate button,
.dc-menu button,
.audio-settings button{
  color:#101113!important;
  border:1px solid rgba(25,27,30,.48)!important;
  border-radius:2px!important;
  background:
    linear-gradient(114deg,transparent 0 20%,rgba(72,76,82,.075) 20.5% 21.1%,transparent 21.7% 51%,rgba(108,112,118,.06) 51.5% 52.1%,transparent 52.7% 100%),
    linear-gradient(180deg,#fffefa 0%,#efede7 52%,#d7d3cc 100%)!important;
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -2px 0 rgba(70,72,76,.18),
    0 3px 0 rgba(8,9,10,.34),
    0 8px 18px rgba(0,0,0,.22)!important;
  text-shadow:none!important;
  filter:none!important;
}
.account-page button:hover:not(:disabled),
.account-page .profile-tabs a:hover,
.account-gate button:hover:not(:disabled),
.dc-menu button:hover:not(:disabled),
.audio-settings button:hover:not(:disabled){
  color:#000!important;
  border-color:rgba(8,9,10,.72)!important;
  filter:brightness(1.035)!important;
}
.account-page button:disabled,
.account-gate button:disabled,
.dc-menu button:disabled,
.audio-settings button:disabled{opacity:.52!important}

.account-page .language-inline,
.dc-menu .language-inline{
  color:#101113!important;
  border:1px solid rgba(25,27,30,.48)!important;
  border-radius:2px!important;
  background:linear-gradient(180deg,#fffefa,#ddd9d1)!important;
  box-shadow:inset 0 1px 0 #fff,0 3px 0 rgba(8,9,10,.28),0 8px 18px rgba(0,0,0,.18)!important;
}
.account-page .language-inline-label,
.dc-menu .language-inline-label{color:#101113!important}

/* Audio / volume */
.audio-settings{
  color:#f5f5f5!important;
  border:1px solid rgba(255,255,255,.17)!important;
  background:linear-gradient(180deg,#111214,#050607)!important;
  box-shadow:0 24px 70px rgba(0,0,0,.62)!important;
}
.audio-settings h2,
.audio-settings .audio-label,
.audio-settings output,
.audio-settings [data-audio-status]{color:#f5f5f5!important}
.audio-settings input[type="range"]{accent-color:#fff!important}
.audio-settings input[type="range"]::-webkit-slider-runnable-track{
  background:#f1f1ef!important;
  height:5px!important;
  border-radius:999px!important;
}
.audio-settings input[type="range"]::-webkit-slider-thumb{
  background:#111214!important;
  border:2px solid #fff!important;
}

/* Dragon Mastery: white marble art stage / black marble info stage */
.dragon-mastery-page .dragon-mastery-card{
  overflow:hidden!important;
  padding:0!important;
  border:1px solid rgba(255,255,255,.18)!important;
  border-radius:2px!important;
  background:#050607!important;
  box-shadow:0 12px 28px rgba(0,0,0,.38)!important;
}
.dragon-mastery-page .dragon-mastery-card>.showcase-art{
  height:230px!important;
  border:0!important;
  border-bottom:1px solid rgba(15,16,18,.28)!important;
  background:
    linear-gradient(114deg,transparent 0 23%,rgba(72,76,82,.07) 23.5% 24.1%,transparent 24.8% 58%,rgba(108,112,118,.055) 58.5% 59.1%,transparent 59.8%),
    linear-gradient(180deg,#fffefa 0%,#efede7 54%,#d7d3cc 100%)!important;
}
.dragon-mastery-page .dragon-mastery-card>.showcase-art>img{
  filter:saturate(1.04) contrast(1.03) drop-shadow(0 13px 10px rgba(0,0,0,.24))!important;
}
.dragon-mastery-page .dragon-mastery-card-copy{
  min-height:150px;
  padding:18px 16px 16px!important;
  color:#fff!important;
  background:
    linear-gradient(118deg,transparent 0 24%,rgba(255,255,255,.022) 24.4% 25%,transparent 25.7% 68%,rgba(255,255,255,.016) 68.5% 69.1%,transparent 69.8%),
    linear-gradient(180deg,#111214 0%,#070809 100%)!important;
}
.dragon-mastery-page .dragon-mastery-card-copy strong,
.dragon-mastery-page .dragon-mastery-card-copy b{
  color:#fff!important;
  text-shadow:none!important;
}
.dragon-mastery-page .dragon-mastery-card-copy span{
  color:#c7c9cc!important;
  text-shadow:none!important;
}
.dragon-mastery-page .dragon-mastery-xp{
  height:7px!important;
  border:1px solid rgba(255,255,255,.62)!important;
  background:#17191b!important;
  box-shadow:none!important;
}
.dragon-mastery-page .dragon-mastery-xp>i{
  background:#fff!important;
  box-shadow:0 0 10px rgba(255,255,255,.30)!important;
}

@media(max-width:760px){
  .dc-play-screen .dc-rank-crest{width:285px!important}
  .dragon-mastery-page .dragon-mastery-card>.showcase-art{height:205px!important}
}


/* PLAY ONLY · official cleaned rank atlas */
.dc-play-screen .play-rank-emblem{
  display:block!important;
  width:100%!important;
  height:100%!important;
  background-image:url('art/ranks/play-ranks.png')!important;
  background-repeat:no-repeat!important;
  background-size:400% 200%!important;
  object-fit:initial!important;
  filter:drop-shadow(0 14px 14px rgba(0,0,0,.48)) drop-shadow(0 0 16px var(--rank-soft))!important;
}
.dc-play-screen .play-rank-quartz{background-position:0% 0%!important}
.dc-play-screen .play-rank-sapphire{background-position:33.3333% 0%!important}
.dc-play-screen .play-rank-ruby{background-position:66.6667% 0%!important}
.dc-play-screen .play-rank-obsidian{background-position:100% 0%!important}
.dc-play-screen .play-rank-black-opal{background-position:0% 100%!important}
.dc-play-screen .play-rank-dragonstone{background-position:33.3333% 100%!important}
.dc-play-screen .play-rank-ascension{background-position:66.6667% 100%!important}
.dc-play-screen .play-rank-ascension-lord{background-position:100% 100%!important}

/* PROFILE MARBLE REWORK · 2026-09-20 */
.profile-page{
  --profile-black-1:#111214;
  --profile-black-2:#050607;
  --profile-white-1:#fffefa;
  --profile-white-2:#e8e5df;
}
.profile-page .panel{
  color:#f7f7f5!important;
  border:1px solid rgba(255,255,255,.18)!important;
  border-radius:2px!important;
  background:
    linear-gradient(118deg,transparent 0 22%,rgba(255,255,255,.025) 22.5% 23.2%,transparent 23.8% 59%,rgba(255,255,255,.018) 59.5% 60.1%,transparent 60.8%),
    linear-gradient(180deg,var(--profile-black-1) 0%,var(--profile-black-2) 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 12px 30px rgba(0,0,0,.34)!important;
}
.profile-page .profile-heading h1,
.profile-page .profile-stats h2,
.profile-page .profile-history h2,
.profile-page .profile-showcase h2,
.profile-page .profile-rank .rank-wordmark,
.profile-page .profile-ap,
.profile-page .profile-season,
.profile-page .profile-rates,
.profile-page .profile-rates b,
.profile-page .history-entry,
.profile-page .history-entry time,
.profile-page .profile-rank>p,
.profile-page .profile-rank strong,
.profile-page .profile-showcase>p,
.profile-page .profile-showcase .muted{
  color:#fff!important;
  text-shadow:none!important;
}
.profile-page .eyebrow{color:#f2f2ef!important}

/* Avatar remains a circular EXP control, never a white rectangular button. */
.profile-page .exp-avatar{
  border:0!important;
  border-radius:50%!important;
  color:inherit!important;
  background:conic-gradient(#d4acff var(--exp),#35485b 0)!important;
  box-shadow:0 0 0 1px #d1b273b3,0 0 0 5px #101b27,0 0 0 6px #88703f80,0 8px 28px #0008,0 0 24px #b990ec26!important;
  filter:none!important;
}
.profile-page .exp-avatar .profile-avatar,
.profile-page .exp-avatar .showcase-art{
  background:radial-gradient(circle at 50% 40%,#213444,#07121b 75%)!important;
}

/* Rank is the visual focal point; trim the old loose framing without touching other rank usages. */
.profile-page .profile-large-emblem{
  height:218px!important;
  width:100%!important;
  margin:15px auto 2px!important;
  object-fit:contain!important;
  transform:scale(1.12)!important;
  transform-origin:center!important;
  filter:drop-shadow(0 8px 10px rgba(0,0,0,.48))!important;
}
.profile-page .profile-rank{
  overflow:hidden!important;
}

/* Nested information tiles: white marble + black copy. */
.profile-page .profile-rank-details{
  border:0!important;
  background:transparent!important;
  gap:8px!important;
}
.profile-page .profile-rank-details>div,
.profile-page .profile-stat{
  color:#111214!important;
  border:1px solid rgba(25,27,30,.42)!important;
  border-radius:2px!important;
  background:
    linear-gradient(114deg,transparent 0 21%,rgba(72,76,82,.07) 21.5% 22.1%,transparent 22.8% 54%,rgba(108,112,118,.055) 54.5% 55.1%,transparent 55.8%),
    linear-gradient(180deg,var(--profile-white-1) 0%,var(--profile-white-2) 100%)!important;
  box-shadow:inset 0 1px 0 #fff,0 3px 0 rgba(8,9,10,.20),0 7px 15px rgba(0,0,0,.16)!important;
}
.profile-page .profile-rank-details dt,
.profile-page .profile-rank-details dd,
.profile-page .profile-stat dt,
.profile-page .profile-stat dd{
  color:#111214!important;
  text-shadow:none!important;
}
.profile-page .profile-stat dd{font-weight:700!important}

/* History remains black marble; make the rows cleaner and fully white. */
.profile-page .history-entry{
  border-top:1px solid rgba(255,255,255,.12)!important;
}
.profile-page .history-entry strong,
.profile-page .history-entry span,
.profile-page .history-entry time{
  color:#f7f7f5!important;
}

/* Most-fielded dragon: white marble art stage, black marble information stage. */
.profile-page .profile-showcase{
  padding:18px!important;
  min-height:690px!important;
  background:
    linear-gradient(118deg,transparent 0 24%,rgba(255,255,255,.022) 24.4% 25%,transparent 25.7% 68%,rgba(255,255,255,.016) 68.5% 69.1%,transparent 69.8%),
    linear-gradient(180deg,#111214 0%,#050607 100%)!important;
}
.profile-page .profile-showcase>.showcase-art{
  width:calc(100% + 36px)!important;
  height:445px!important;
  margin:-18px -18px 14px!important;
  border:0!important;
  border-bottom:1px solid rgba(15,16,18,.30)!important;
  background:
    linear-gradient(114deg,transparent 0 23%,rgba(72,76,82,.07) 23.5% 24.1%,transparent 24.8% 58%,rgba(108,112,118,.055) 58.5% 59.1%,transparent 59.8%),
    linear-gradient(180deg,var(--profile-white-1) 0%,var(--profile-white-2) 100%)!important;
}
.profile-page .profile-showcase>.showcase-art>img{
  filter:saturate(1.04) contrast(1.03) drop-shadow(0 14px 11px rgba(0,0,0,.24))!important;
}
.profile-page .profile-showcase .eyebrow{
  position:relative!important;
  z-index:2!important;
  margin:0 0 10px!important;
  color:#fff!important;
}
.profile-page .profile-showcase h2{
  color:#fff!important;
  margin-top:4px!important;
}
.profile-page .profile-showcase>p strong{color:#fff!important}

/* Preserve semantic status colors only where they communicate match delta. */
.profile-page .history-entry .positive{color:#7eebaa!important}
.profile-page .history-entry .negative{color:#ffa2a2!important}

@media(max-width:760px){
  .profile-page .profile-large-emblem{height:190px!important;transform:scale(1.10)!important}
  .profile-page .profile-showcase>.showcase-art{height:350px!important}
}

/* ASCENSION RANK GLOW · 2026-09-20 */
.rank-emblem[src*="ascension.png"],
.rank-emblem[src*="ascension-lord.png"],
.play-rank-emblem[src*="ascension.png"],
.play-rank-emblem[src*="ascension-lord.png"]{
  filter:
    drop-shadow(0 0 6px rgba(255,226,154,.34))
    drop-shadow(0 0 14px rgba(255,190,84,.22))
    drop-shadow(0 8px 10px rgba(0,0,0,.42))!important;
}
.profile-page .profile-large-emblem[src*="ascension.png"],
.profile-page .profile-large-emblem[src*="ascension-lord.png"]{
  filter:
    drop-shadow(0 0 7px rgba(255,232,170,.40))
    drop-shadow(0 0 17px rgba(255,191,74,.24))
    drop-shadow(0 9px 12px rgba(0,0,0,.46))!important;
}

/* PROFILE SHOWCASE KICKER CONTRAST FIX · 2026-09-20 */
.profile-page .profile-showcase .eyebrow{
  color:#111214!important;
  text-shadow:none!important;
}

/* LEADERBOARD MARBLE REWORK · 2026-09-20 */
.cinematic-leaderboard-page{
  --lb-black-1:#111214;
  --lb-black-2:#050607;
  --lb-white-1:#fffefa;
  --lb-white-2:#e8e5df;
}
.cinematic-leaderboard-page .cinematic-leaderboard-shell{
  color:#fff!important;
  border:1px solid rgba(255,255,255,.18)!important;
  border-radius:2px!important;
  background:
    linear-gradient(118deg,transparent 0 22%,rgba(255,255,255,.024) 22.5% 23.1%,transparent 23.8% 61%,rgba(255,255,255,.017) 61.4% 62%,transparent 62.8%),
    linear-gradient(180deg,var(--lb-black-1) 0%,var(--lb-black-2) 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 16px 36px rgba(0,0,0,.38)!important;
}
.cinematic-leaderboard-page .cinematic-leaderboard-shell>.eyebrow,
.cinematic-leaderboard-page .cinematic-leaderboard-shell>h1{
  color:#fff!important;
  text-shadow:none!important;
}
.cinematic-leaderboard-page .leaderboard-table{
  display:grid!important;
  gap:8px!important;
}
.cinematic-leaderboard-page .leaderboard-table>div{
  border:1px solid rgba(25,27,30,.42)!important;
  border-radius:2px!important;
  background:
    linear-gradient(114deg,transparent 0 21%,rgba(72,76,82,.07) 21.5% 22.1%,transparent 22.8% 54%,rgba(108,112,118,.055) 54.5% 55.1%,transparent 55.8%),
    linear-gradient(180deg,var(--lb-white-1) 0%,var(--lb-white-2) 100%)!important;
  box-shadow:inset 0 1px 0 #fff,0 3px 0 rgba(8,9,10,.18),0 7px 15px rgba(0,0,0,.14)!important;
  color:#111214!important;
}
.cinematic-leaderboard-page .leaderboard-table .leaderboard-heading{
  color:#111214!important;
  background:
    linear-gradient(114deg,transparent 0 21%,rgba(72,76,82,.07) 21.5% 22.1%,transparent 22.8% 54%,rgba(108,112,118,.055) 54.5% 55.1%,transparent 55.8%),
    linear-gradient(180deg,#fffefa 0%,#ddd9d1 100%)!important;
}
.cinematic-leaderboard-page .leaderboard-table>div>*,
.cinematic-leaderboard-page .leaderboard-table strong,
.cinematic-leaderboard-page .leaderboard-table b,
.cinematic-leaderboard-page .leaderboard-table span{
  color:#111214!important;
  text-shadow:none!important;
}
.cinematic-leaderboard-page .leaderboard-table .current-player{
  border-color:rgba(176,135,48,.82)!important;
  box-shadow:inset 4px 0 #d4a73f,inset 0 1px 0 #fff,0 3px 0 rgba(8,9,10,.18),0 7px 15px rgba(0,0,0,.14)!important;
}
.cinematic-leaderboard-page .leaderboard-table .lord-title{
  color:#7a5610!important;
}
.cinematic-leaderboard-page .leaderboard-table .rank-emblem{
  filter:drop-shadow(0 4px 5px rgba(0,0,0,.24))!important;
}
.cinematic-leaderboard-page .leaderboard-table .rank-emblem[src*="ascension.png"],
.cinematic-leaderboard-page .leaderboard-table .rank-emblem[src*="ascension-lord.png"]{
  filter:
    drop-shadow(0 0 6px rgba(255,226,154,.34))
    drop-shadow(0 0 13px rgba(255,190,84,.20))
    drop-shadow(0 4px 5px rgba(0,0,0,.24))!important;
}

/* GLOBAL OFF-MATCH WHITE MARBLE BUTTONS · 2026-09-20 */
.account-page button,
.account-gate button,
.dc-menu button,
.encyclopedia-shell button,
.dragon-mastery-page button,
.profile-page button,
.cinematic-leaderboard-page button{
  color:#101113!important;
  border:1px solid rgba(25,27,30,.48)!important;
  border-radius:2px!important;
  background:
    linear-gradient(114deg,transparent 0 20%,rgba(72,76,82,.075) 20.5% 21.1%,transparent 21.7% 51%,rgba(108,112,118,.06) 51.5% 52.1%,transparent 52.7% 100%),
    linear-gradient(180deg,#fffefa 0%,#efede7 52%,#d7d3cc 100%)!important;
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -2px 0 rgba(70,72,76,.18),
    0 3px 0 rgba(8,9,10,.28),
    0 8px 18px rgba(0,0,0,.18)!important;
  text-shadow:none!important;
}
.account-page button:hover:not(:disabled),
.account-gate button:hover:not(:disabled),
.dc-menu button:hover:not(:disabled),
.encyclopedia-shell button:hover:not(:disabled),
.dragon-mastery-page button:hover:not(:disabled),
.profile-page button:hover:not(:disabled),
.cinematic-leaderboard-page button:hover:not(:disabled){
  color:#000!important;
  border-color:rgba(8,9,10,.72)!important;
  filter:brightness(1.035)!important;
}
.account-page button:disabled,
.account-gate button:disabled,
.dc-menu button:disabled,
.encyclopedia-shell button:disabled,
.dragon-mastery-page button:disabled,
.profile-page button:disabled,
.cinematic-leaderboard-page button:disabled{
  opacity:.52!important;
}

/* Keep circular/special controls from being flattened into rectangles. */
.profile-page .exp-avatar,
.profile-page .primary-crown,
.dc-menu .primary-crown{
  border-radius:50%!important;
}

/* ENCYCLOPEDIA + MASTERY MARBLE FINAL PASS · 2026-09-20 */

/* =========================
   DRAGON MASTERY
   Primary surfaces: black marble + white copy.
   Nested stat tiles: white marble + black copy.
   ========================= */
.dragon-mastery-page .mastery-side-nav,
.dragon-mastery-page .mastery-featured,
.dragon-mastery-page .mastery-cinematic-path,
.dragon-mastery-page .mastery-roster-panel,
.dragon-mastery-page .dragon-mastery-detail{
  color:#fff!important;
  border:1px solid rgba(255,255,255,.18)!important;
  border-radius:2px!important;
  background:
    linear-gradient(118deg,transparent 0 23%,rgba(255,255,255,.024) 23.5% 24.1%,transparent 24.8% 62%,rgba(255,255,255,.017) 62.4% 63%,transparent 63.8%),
    linear-gradient(180deg,#111214 0%,#050607 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 14px 34px rgba(0,0,0,.36)!important;
}
.dragon-mastery-page .mastery-featured h1,
.dragon-mastery-page .mastery-featured h2,
.dragon-mastery-page .mastery-featured strong,
.dragon-mastery-page .mastery-featured span,
.dragon-mastery-page .mastery-featured p,
.dragon-mastery-page .mastery-cinematic-path h1,
.dragon-mastery-page .mastery-cinematic-path h2,
.dragon-mastery-page .mastery-cinematic-path strong,
.dragon-mastery-page .mastery-cinematic-path b,
.dragon-mastery-page .mastery-roster-panel h2,
.dragon-mastery-page .mastery-roster-panel p,
.dragon-mastery-page .dragon-mastery-detail h1,
.dragon-mastery-page .dragon-mastery-detail h2,
.dragon-mastery-page .dragon-mastery-detail p{
  color:#fff!important;
  text-shadow:none!important;
}

/* Hero's small stats: inverse white marble */
.dragon-mastery-page .mastery-featured-meta>div,
.dragon-mastery-page .dragon-mastery-records>article{
  color:#111214!important;
  border:1px solid rgba(25,27,30,.42)!important;
  border-radius:2px!important;
  background:
    linear-gradient(114deg,transparent 0 21%,rgba(72,76,82,.07) 21.5% 22.1%,transparent 22.8% 54%,rgba(108,112,118,.055) 54.5% 55.1%,transparent 55.8%),
    linear-gradient(180deg,#fffefa 0%,#e8e5df 100%)!important;
  box-shadow:inset 0 1px 0 #fff,0 3px 0 rgba(8,9,10,.18),0 7px 15px rgba(0,0,0,.14)!important;
}
.dragon-mastery-page .mastery-featured-meta>div *,
.dragon-mastery-page .dragon-mastery-records>article *{
  color:#111214!important;
  text-shadow:none!important;
}

/* Roster cards stay split: white marble dragon stage / black marble copy. */
.dragon-mastery-page .dragon-mastery-card{
  padding:0!important;
  overflow:hidden!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.18)!important;
  border-radius:2px!important;
  background:#050607!important;
  box-shadow:0 12px 28px rgba(0,0,0,.36)!important;
}
.dragon-mastery-page .dragon-mastery-card:hover:not(:disabled){
  border-color:rgba(255,255,255,.32)!important;
  filter:brightness(1.025)!important;
}
.dragon-mastery-page .dragon-mastery-card>.showcase-art{
  background:
    linear-gradient(114deg,transparent 0 23%,rgba(72,76,82,.07) 23.5% 24.1%,transparent 24.8% 58%,rgba(108,112,118,.055) 58.5% 59.1%,transparent 59.8%),
    linear-gradient(180deg,#fffefa 0%,#e8e5df 100%)!important;
}
.dragon-mastery-page .dragon-mastery-card-copy{
  color:#fff!important;
  background:
    linear-gradient(118deg,transparent 0 24%,rgba(255,255,255,.022) 24.4% 25%,transparent 25.7% 68%,rgba(255,255,255,.016) 68.5% 69.1%,transparent 69.8%),
    linear-gradient(180deg,#111214 0%,#050607 100%)!important;
}
.dragon-mastery-page .dragon-mastery-card-copy strong,
.dragon-mastery-page .dragon-mastery-card-copy b{color:#fff!important}
.dragon-mastery-page .dragon-mastery-card-copy span{color:#cfd1d4!important}

/* =========================
   ENCYCLOPEDIA
   Card artwork: white marble.
   Card identity/meta: black marble.
   Element traits keep their native colors on black.
   ========================= */
.encyclopedia-shell .encyclopedia-intro,
.encyclopedia-shell .catalogue-controls{
  color:#fff!important;
  border:1px solid rgba(255,255,255,.16)!important;
  border-radius:2px!important;
  background:
    linear-gradient(118deg,transparent 0 23%,rgba(255,255,255,.022) 23.5% 24.1%,transparent 24.8% 62%,rgba(255,255,255,.016) 62.4% 63%,transparent 63.8%),
    linear-gradient(180deg,#111214 0%,#050607 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 12px 28px rgba(0,0,0,.30)!important;
}
.encyclopedia-shell .encyclopedia-intro{padding:22px 24px!important}
.encyclopedia-shell .encyclopedia-intro h1,
.encyclopedia-shell .encyclopedia-intro p,
.encyclopedia-shell .encyclopedia-intro .eyebrow{
  color:#fff!important;
  text-shadow:none!important;
}
.encyclopedia-shell .catalogue-controls{padding:14px!important}
.encyclopedia-shell .catalogue-controls label,
.encyclopedia-shell .catalogue-controls p{color:#fff!important}
.encyclopedia-shell .catalogue-controls input,
.encyclopedia-shell .catalogue-controls select{
  color:#111214!important;
  border:1px solid rgba(25,27,30,.42)!important;
  border-radius:2px!important;
  background:linear-gradient(180deg,#fffefa 0%,#e8e5df 100%)!important;
  box-shadow:inset 0 1px 0 #fff!important;
}

/* Important: encyclopedia-card is a button, but it is a visual card, not a generic UI button. */
.encyclopedia-shell .encyclopedia-card{
  min-width:0!important;
  padding:0!important;
  overflow:hidden!important;
  text-align:left!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.20)!important;
  border-top:3px solid var(--el)!important;
  border-radius:2px!important;
  background:#050607!important;
  box-shadow:0 10px 24px rgba(0,0,0,.30)!important;
  filter:none!important;
}
.encyclopedia-shell .encyclopedia-card:hover:not(:disabled){
  border-color:color-mix(in srgb,var(--el) 72%,#fff)!important;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--el) 45%,transparent),0 12px 28px rgba(0,0,0,.34)!important;
  filter:brightness(1.025)!important;
}
.encyclopedia-shell .encyclopedia-card-art{
  display:block!important;
  width:100%!important;
  aspect-ratio:1!important;
  overflow:hidden!important;
  background:
    linear-gradient(114deg,transparent 0 23%,rgba(72,76,82,.07) 23.5% 24.1%,transparent 24.8% 58%,rgba(108,112,118,.055) 58.5% 59.1%,transparent 59.8%),
    linear-gradient(180deg,#fffefa 0%,#e8e5df 100%)!important;
}
.encyclopedia-shell .encyclopedia-card-art>.showcase-art{
  background:transparent!important;
}
.encyclopedia-shell .encyclopedia-card-art>.showcase-art>img{
  filter:saturate(1.04) contrast(1.03) drop-shadow(0 13px 10px rgba(0,0,0,.24))!important;
}
.encyclopedia-shell .encyclopedia-card-body{
  gap:10px!important;
  padding:15px!important;
  color:#fff!important;
  background:
    linear-gradient(118deg,transparent 0 24%,rgba(255,255,255,.022) 24.4% 25%,transparent 25.7% 68%,rgba(255,255,255,.016) 68.5% 69.1%,transparent 69.8%),
    linear-gradient(180deg,#111214 0%,#050607 100%)!important;
}
.encyclopedia-shell .encyclopedia-card-body>strong{
  color:#fff!important;
  text-shadow:none!important;
}
.encyclopedia-shell .encyclopedia-card-meta{
  color:#fff!important;
}
.encyclopedia-shell .encyclopedia-card-meta>b{
  color:#fff!important;
}

/* ENCYCLOPEDIA TRANSITION SHADOW FIX · 2026-09-20 */
.encyclopedia-shell .encyclopedia-card-art::after{
  content:none!important;
  display:none!important;
  background:none!important;
}
.encyclopedia-shell .encyclopedia-card-art{
  box-shadow:none!important;
}

/* FINAL RANK ATLAS · LIBRARY SOURCE · 2026-09-20 */
/* One canonical cleaned atlas for every rank surface in the client.
   Source: the approved white-background rank artwork from the Library. */
.rank-emblem,
.dc-play-screen .play-rank-emblem{
  display:inline-block!important;
  background-image:url('art/ranks/play-ranks.png')!important;
  background-repeat:no-repeat!important;
  background-size:400% 200%!important;
  background-color:transparent!important;
  object-fit:initial!important;
  flex:0 0 auto;
}
.rank-emblem-quartz,.dc-play-screen .play-rank-quartz{background-position:0% 0%!important}
.rank-emblem-sapphire,.dc-play-screen .play-rank-sapphire{background-position:33.3333% 0%!important}
.rank-emblem-ruby,.dc-play-screen .play-rank-ruby{background-position:66.6667% 0%!important}
.rank-emblem-obsidian,.dc-play-screen .play-rank-obsidian{background-position:100% 0%!important}
.rank-emblem-black-opal,.dc-play-screen .play-rank-black-opal{background-position:0% 100%!important}
.rank-emblem-dragonstone,.dc-play-screen .play-rank-dragonstone{background-position:33.3333% 100%!important}
.rank-emblem-ascension,.dc-play-screen .play-rank-ascension{background-position:66.6667% 100%!important}
.rank-emblem-ascension-lord,.dc-play-screen .play-rank-ascension-lord{background-position:100% 100%!important}

/* Keep the artwork itself untouched: no crop hacks, no transforms on generic rank assets. */
.rank-emblem{
  vertical-align:middle!important;
  background-origin:border-box!important;
  background-clip:border-box!important;
}

/* End-game ranks get only the subtle warm glow requested. */
.rank-emblem-ascension,
.rank-emblem-ascension-lord,
.dc-play-screen .play-rank-ascension,
.dc-play-screen .play-rank-ascension-lord{
  filter:
    drop-shadow(0 0 6px rgba(255,232,170,.38))
    drop-shadow(0 0 15px rgba(255,190,74,.22))
    drop-shadow(0 7px 9px rgba(0,0,0,.40))!important;
}

/* Profile hero: remove the old image-scale crop workaround now that the source is clean. */
.profile-page .profile-large-emblem{
  transform:none!important;
  background-size:400% 200%!important;
}

/* PROFILE RANK HERO · MATCH APPROVED PLAY CREST · 2026-09-20 */
.profile-page .profile-large-emblem{
  display:block!important;
  width:218px!important;
  height:218px!important;
  aspect-ratio:1/1!important;
  margin:18px auto 8px!important;
  background-image:url('art/ranks/play-ranks.png')!important;
  background-repeat:no-repeat!important;
  background-size:400% 200%!important;
  transform:none!important;
  object-fit:initial!important;
  filter:drop-shadow(0 12px 12px rgba(0,0,0,.46))!important;
}
.profile-page .profile-large-emblem.rank-emblem-ascension,
.profile-page .profile-large-emblem.rank-emblem-ascension-lord{
  filter:
    drop-shadow(0 0 7px rgba(255,232,170,.40))
    drop-shadow(0 0 17px rgba(255,191,74,.24))
    drop-shadow(0 10px 12px rgba(0,0,0,.46))!important;
}
@media(max-width:760px){
  .profile-page .profile-large-emblem{
    width:190px!important;
    height:190px!important;
    transform:none!important;
  }
}