/* Brasta is now an online-first product. Keep the legacy local engine dormant,
   but remove local hot-seat from the shipped UI without adding runtime JS. */
.landing.landing-wide > p{
  display:none!important;
}

/* Private-room play is the main unranked online mode. */
.online-card > h2{
  font-size:0;
}
.online-card > h2::after{
  content:"Private Match";
  font-size:24px;
}

/* The legacy second landing card used to host Local Hot-Seat. Retain the card
   as the tutorial/practice entry point, while removing local-game affordances. */
.landing-card:has([data-newmode]) > h2{
  font-size:0;
}
.landing-card:has([data-newmode]) > h2::after{
  content:"Learn Brasta";
  font-size:24px;
}
.landing-card:has([data-newmode]) > p{
  font-size:0;
}
.landing-card:has([data-newmode]) > p::after{
  content:"Learn the rules and practice the core moves before jumping into an online match.";
  font-size:15px;
  line-height:1.5;
}
.landing-card:has([data-newmode]) label:has(#local-target),
.landing-card:has([data-newmode]) .button-row:has([data-newmode]),
.landing-card:has([data-newmode]) [data-newmode]{
  display:none!important;
}

/* One ranked card, two independent ladders. The existing 1v1 and 2v2 clients
   remain separate internally; their home surfaces are mounted as tab panels. */
.ranked-tabs-shell{
  grid-column:1/-1;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:20px 22px 22px;
  border:1px solid #d4af37a8!important;
  border-radius:22px!important;
  background:
    radial-gradient(circle at 12% 110%,#2f7a5520 0 22%,transparent 48%),
    linear-gradient(145deg,#0b2b20 0%,#071d16 56%,#102619 100%)!important;
  box-shadow:
    0 22px 52px #0007,
    inset 0 1px 0 #fff2,
    inset 0 0 0 1px #d4af3712!important;
}

/* Small, dense suit wallpaper across the entire ranked card. The gold is
   intentionally subdued so this reads as woven/luxury texture rather than UI. */
.ranked-tabs-shell::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.11;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='82' height='82' viewBox='0 0 82 82'%3E%3Cg fill='%23d4af37' fill-opacity='.5' font-family='Georgia,serif'%3E%3Ctext x='7' y='19' font-size='13'%3E%26%239824;%3C/text%3E%3Ctext x='33' y='18' font-size='12'%3E%26%239830;%3C/text%3E%3Ctext x='57' y='20' font-size='13'%3E%26%239827;%3C/text%3E%3Ctext x='18' y='43' font-size='12'%3E%26%239829;%3C/text%3E%3Ctext x='45' y='44' font-size='13'%3E%26%239824;%3C/text%3E%3Ctext x='7' y='68' font-size='12'%3E%26%239827;%3C/text%3E%3Ctext x='33' y='66' font-size='13'%3E%26%239829;%3C/text x='58' y='68' font-size='12'%3E%26%239830;%3C/text%3E%3C/g%3E%3C/svg%3E");
  background-repeat:repeat;
  background-size:82px 82px;
  background-position:0 0;
}

/* Remove the old concentric-circle decoration in the upper-right. */
.ranked-tabs-shell.competitive-card::after{
  content:none!important;
  display:none!important;
  background:none!important;
  border:0!important;
  box-shadow:none!important;
}
.ranked-tabs-shell > .ranked-tab-panel{
  display:block;
  position:relative;
  z-index:1;
  margin:0;
  padding:0;
  border:0;
  background:none;
  box-shadow:none;
  overflow:visible;
}
.ranked-tabs-shell > .ranked-tab-panel[hidden]{display:none!important}

/* Mode selector: restrained, gold-trimmed and consistent with the brand board. */
.ranked-mode-tabs{
  position:relative;
  z-index:3;
  display:inline-grid;
  grid-template-columns:repeat(2,minmax(92px,1fr));
  gap:4px;
  margin:0 0 20px;
  padding:4px;
  border:1px solid #d4af3768;
  border-radius:10px;
  background:#03130ea8;
  box-shadow:inset 0 1px 0 #fff1,0 6px 18px #0003;
}
.ranked-mode-tabs button{
  min-height:34px;
  padding:7px 18px;
  border:1px solid transparent;
  border-radius:7px;
  background:transparent;
  color:#b6c6bd;
  font:inherit;
  font-size:11px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.ranked-mode-tabs button:hover{
  color:#f4e5a8;
  background:#d4af370b;
}
.ranked-mode-tabs button.active{
  border-color:#f1d97888;
  background:linear-gradient(180deg,#ead06d,#caa13b);
  color:#241b07;
  box-shadow:0 4px 13px #0005,inset 0 1px 0 #fff7;
}
.ranked-mode-tabs button:focus-visible{outline:2px solid #f2dc8d;outline-offset:2px}
.ranked-tab-loading{min-height:130px}

/* Ranked content branding. */
.ranked-tabs-shell .competitive-title-row{
  align-items:center;
  padding-bottom:4px;
}
.ranked-tabs-shell .competitive-title-row h2{
  margin:3px 0 0;
  color:#f5f1e6;
  font-family:Georgia,"Times New Roman",serif;
  font-size:30px;
  font-weight:700;
  letter-spacing:.015em;
  text-shadow:0 2px 10px #0008;
}
.ranked-tabs-shell .eyebrow{
  color:#d4af37;
  font-size:10px;
  font-weight:900;
  letter-spacing:.22em;
}
.ranked-tabs-shell .rank-badge{
  border-color:#d4af3755;
  background:linear-gradient(180deg,#ffffff12,#ffffff08);
  box-shadow:inset 0 1px 0 #fff2,0 5px 18px #0003;
}
.ranked-tabs-shell .ranked-tab-panel > p{
  max-width:720px;
  margin:7px 0 0;
  color:#c5d0ca;
  line-height:1.5;
}
.ranked-tabs-shell .competitive-statline{
  gap:10px;
  margin:19px 0 20px;
}
.ranked-tabs-shell .competitive-statline > span{
  min-width:122px;
  padding:12px 14px;
  border:1px solid #d4af3728;
  border-radius:11px;
  background:linear-gradient(180deg,#031711b5,#061b14c7);
  box-shadow:inset 0 1px 0 #ffffff0d;
}
.ranked-tabs-shell .competitive-statline small{
  color:#b79d58;
  font-size:9px;
  font-weight:800;
  letter-spacing:.13em;
}
.ranked-tabs-shell .competitive-statline b{
  margin-top:2px;
  color:#f7f2e8;
  font-size:21px;
  font-variant-numeric:tabular-nums;
}
.ranked-tabs-shell .competitive-actions{
  gap:9px;
}
.ranked-tabs-shell .competitive-actions button{
  min-height:42px;
  padding:10px 17px;
  border-color:#d4af3744;
  background:#0d2c21c7;
  color:#f3ead0;
  box-shadow:inset 0 1px 0 #ffffff0d;
  transition:transform .12s ease,background .12s ease,border-color .12s ease,box-shadow .12s ease;
}
.ranked-tabs-shell .competitive-actions button:hover{
  transform:translateY(-1px);
  border-color:#d4af3788;
  background:#17392c;
}
.ranked-tabs-shell .competitive-actions button.primary{
  border-color:#f3da7e!important;
  background:linear-gradient(180deg,#efd475,#d2aa45)!important;
  color:#241b07!important;
  box-shadow:0 7px 18px #0005,inset 0 1px 0 #fff8!important;
}
.ranked-tabs-shell .competitive-actions button.primary:hover{
  background:linear-gradient(180deg,#f5dc82,#d9b34d)!important;
  box-shadow:0 9px 22px #0006,inset 0 1px 0 #fff9!important;
}
.ranked-tabs-shell .server-note{
  margin-top:15px;
  padding-top:12px;
  border-top:1px solid #d4af371c;
  color:#82988d;
  font-size:10px;
  letter-spacing:.015em;
}

/* Practice actions belong together under Learn Brasta. */
.learn-brasta-actions{
  display:grid;
  gap:10px;
  margin-top:12px;
}
.learn-brasta-actions button.tutorial-launch{margin-top:0!important}
button.learn-bot-launch{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:11px!important;
  width:100%;
  margin:0;
  padding:11px 13px!important;
  border:1px solid #d8b75e66!important;
  border-radius:12px!important;
  background:linear-gradient(135deg,#173a2d,#0d2a20)!important;
  color:#f8f1d2!important;
  box-shadow:0 7px 18px #0003;
  text-align:left!important;
  cursor:pointer;
}
button.learn-bot-launch:hover{
  transform:translateY(-1px);
  border-color:#ead27e!important;
  background:linear-gradient(135deg,#1d4938,#103326)!important;
}
.learn-bot-icon{
  display:grid;
  place-items:center;
  flex:0 0 34px;
  width:34px;
  height:34px;
  border-radius:9px;
  background:#d8b75e;
  color:#201906;
  font-size:18px;
  box-shadow:inset 0 0 0 1px #fff4b066;
}
.learn-bot-copy{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:1px;
  line-height:1.15;
}
.learn-bot-copy b{font-size:13px;letter-spacing:.02em;color:#fff5cc}
.learn-bot-copy small{font-size:10px;font-weight:500;color:#aebfb6;letter-spacing:.01em}

@media(max-width:800px){
  .online-card > h2::after,
  .landing-card:has([data-newmode]) > h2::after{font-size:22px}
  .ranked-tabs-shell{padding:14px 14px 16px}
  .ranked-mode-tabs{display:grid;width:100%;box-sizing:border-box;margin-bottom:15px}
  .ranked-mode-tabs button{width:100%;padding:7px 10px}
  .ranked-tabs-shell .competitive-title-row h2{font-size:25px}
  .ranked-tabs-shell .competitive-statline{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
  .ranked-tabs-shell .competitive-statline > span{min-width:0;padding:10px 9px}
  .ranked-tabs-shell .competitive-statline b{font-size:18px}
  .ranked-tabs-shell .competitive-actions{display:grid;grid-template-columns:1fr}
  .ranked-tabs-shell .competitive-actions button{width:100%}
}