/* Champion banners (banners.js): the banner itself, art-filled seat pills, the hover banner, player cards,
   the Profile's CHAMPION BANNERS panel and the vault in Support. Banner sizes are in cqw, so one design
   scales from the profile header down to a player card on a phone. */

/* ---------- The banner ---------- */
.rb{container-type:inline-size;position:relative;width:100%;aspect-ratio:1060/236;background:#000 var(--rb-img) center/cover no-repeat;overflow:hidden;border-radius:6px;box-shadow:0 0 0 1px #ffffff14,0 10px 26px #000a;color:#fff;font-family:Inter,Arial,sans-serif;text-align:left}
.rb-shade{position:absolute;inset:0;background:linear-gradient(90deg,#000000f6 0,#000000ee 33%,#000000a6 42%,#00000000 58%),linear-gradient(0deg,#000000b0,#00000000 38%)}
.rb-shade::before{content:"";position:absolute;left:0;top:0;bottom:0;width:42%;backdrop-filter:blur(1.1cqw);-webkit-backdrop-filter:blur(1.1cqw);-webkit-mask:linear-gradient(90deg,#000 78%,transparent);mask:linear-gradient(90deg,#000 78%,transparent)}
.rb-plate{position:absolute;left:4cqw;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:2.2cqw;z-index:3}
.rb-av{width:8.6cqw;aspect-ratio:1;border-radius:50%;border:.32cqw solid var(--rb-c);box-shadow:0 0 1.4cqw var(--rb-c),inset 0 0 1cqw #000;background:radial-gradient(circle at 50% 35%,#3c3c3c,#101010);display:grid;place-items:center;font:800 3.4cqw Inter,Arial,sans-serif;flex-shrink:0;overflow:hidden}
.rb-av img{width:100%;height:100%;object-fit:cover;display:block}
.rb-txt{display:flex;flex-direction:column;gap:.6cqw;min-width:0}
.rb-orn{height:1px;width:27cqw;background:linear-gradient(90deg,transparent,var(--rb-c) 15%,var(--rb-c) 85%,transparent);position:relative}
.rb-orn::after{content:"";position:absolute;left:50%;top:50%;width:.7cqw;height:.7cqw;border:1px solid var(--rb-c);background:#000;transform:translate(-50%,-50%) rotate(45deg)}
.rb-name{display:flex;align-items:center;gap:1.2cqw;font:600 2.6cqw/1 Inter,Arial,sans-serif;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.rb-name svg{width:2.4cqw;height:auto;fill:var(--rb-c);filter:drop-shadow(0 0 .5cqw var(--rb-c));flex-shrink:0}
.rb-sub{font:600 1.05cqw/1 Inter,Arial,sans-serif;letter-spacing:.3em;color:#e9e4da;padding-left:3.6cqw;white-space:nowrap}
.rb-row{display:flex;align-items:center;gap:1.4cqw;padding-left:3.6cqw;margin-top:.35cqw}
.rb-kos{display:flex;gap:.45cqw}
.rb-kos i{width:2.3cqw;height:2.3cqw;border-radius:50%;border:.22cqw dashed #eee;background:#1d1d1d;display:grid;place-items:center;font:800 1cqw/1 Inter,Arial,sans-serif;font-style:normal;position:relative;box-shadow:0 .1cqw .3cqw #000}
.rb-kos i::after{content:"";position:absolute;left:-.25cqw;right:-.25cqw;top:50%;height:.24cqw;margin-top:-.12cqw;background:#ff3b4f;transform:rotate(-40deg);box-shadow:0 0 .35cqw #ff3b4f}
.rb-kos i.more{border-style:solid;border-color:var(--rb-c);color:var(--rb-c)}
.rb-kos i.more::after{display:none}
.rb-big{font:800 2.2cqw/1 Inter,Arial,sans-serif;color:var(--rb-c);text-shadow:0 0 .8cqw var(--rb-c)}
.rb-lab{font:700 .9cqw/1.3 Inter,Arial,sans-serif;letter-spacing:.18em;color:#d8d1c4;white-space:nowrap}
.rb-cards{display:flex;gap:.3cqw}
.rb-cards span{width:2.7cqw;height:3.7cqw;background:#fbfaf5;border-radius:.3cqw;font:800 1.25cqw/1 Inter,Arial,sans-serif;color:#111;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15cqw;box-shadow:0 .15cqw .45cqw #000}
.rb-cards span.red{color:#c3172f}
.rb-cards span i{font-style:normal;font-size:1.35cqw}
.rb-line{position:absolute;left:40%;right:1.6%;bottom:6%;height:33%;overflow:visible;filter:drop-shadow(0 0 .45cqw var(--rb-c));z-index:2}
.rb-dot{position:absolute;right:1.6%;width:1.1cqw;height:1.1cqw;margin:0 -.55cqw -.55cqw 0;border-radius:50%;background:#fff;box-shadow:0 0 0 .25cqw var(--rb-c),0 0 1.2cqw var(--rb-c);z-index:3}
.rb-end{position:absolute;right:2.6cqw;bottom:43%;font:800 1.3cqw/1 Inter,Arial,sans-serif;text-shadow:0 0 .6cqw #000,0 0 .3cqw #000;z-index:3;text-align:right}
.rb-end small{display:block;font:700 .75cqw/1.4 Inter,Arial,sans-serif;letter-spacing:.18em;color:var(--rb-c)}
.rb-cap{position:absolute;left:41%;bottom:2.2%;font:700 .78cqw/1 Inter,Arial,sans-serif;letter-spacing:.2em;color:#ffffffb0;z-index:3;text-shadow:0 0 .4cqw #000}
/* Medium banners (player cards, the profile's picker): bigger type, no small print. */
@container (min-width:421px) and (max-width:640px){
  .rb-name{font-size:3.4cqw}.rb-name svg{width:3cqw}
  .rb-sub{font-size:1.4cqw;letter-spacing:.2em}
  .rb-orn{width:33cqw}
  .rb-av{width:11cqw;font-size:4.4cqw}
  .rb-cards span{width:3.3cqw;height:4.5cqw;font-size:1.6cqw}.rb-cards span i{font-size:1.7cqw}
  .rb-kos i{width:2.9cqw;height:2.9cqw;font-size:1.3cqw}
  .rb-lab,.rb-end small,.rb-cap{display:none}
  .rb-big{font-size:3cqw}.rb-end{font-size:2cqw}
}
/* Small banners (the hover banner, phones). */
@container (max-width:420px){
  .rb-plate{left:3cqw;gap:3cqw}
  .rb-av{width:15cqw;font-size:6cqw;border-width:.7cqw}
  .rb-name{font-size:5.6cqw;gap:2cqw}.rb-name svg{width:5cqw}
  .rb-orn{width:40cqw}
  .rb-sub{font-size:2.5cqw;letter-spacing:.16em;padding-left:7cqw}
  .rb-cap,.rb-end small,.rb-lab{display:none}
  .rb-end{font-size:3.2cqw}
  .rb-shade{background:linear-gradient(90deg,#000000f2 0,#000000d8 45%,#00000000 72%)}
  .rb-line{left:55%;height:30%}
  .rb-dot{width:2.4cqw;height:2.4cqw;margin:0 -1.2cqw -1.2cqw 0}
  .rb-row{padding-left:7cqw;gap:2.2cqw;margin-top:.6cqw}
  .rb-cards{gap:.6cqw}
  .rb-cards span{width:4.4cqw;height:6cqw;font-size:2.3cqw;border-radius:.6cqw}
  .rb-cards span i{font-size:2.4cqw}
  .rb-kos{gap:.9cqw}
  .rb-kos i{width:4.2cqw;height:4.2cqw;font-size:1.9cqw;border-width:.4cqw}
  .rb-kos i:nth-child(n+5):not(.more){display:none}
  .rb-big{font-size:4.4cqw}
}

/* ---------- Seats: the pill keeps its size, filled with the player's artwork ---------- */
#roomGame .rivl-pvp-seat.rb-seat{background:linear-gradient(90deg,#000000f2 0,#000000d0 38%,#00000070 75%,#00000030),var(--rb-img) 80% 35%/260% auto no-repeat,#0a0908;border-color:var(--rb-c);cursor:pointer}
#roomGame .rivl-pvp-seat.rb-seat .avatar{border-color:var(--rb-c);box-shadow:0 0 6px var(--rb-c)}
#roomGame .rivl-pvp-seat[data-account]{cursor:pointer}
#roomGame .rivl-pvp-seat.rb-champ{box-shadow:0 0 0 2px #0a0908,0 0 0 3px var(--rb-c,#f2c46d),0 0 18px var(--rb-c,#f2c46d)}
#roomGame .rivl-pvp-seat.rb-champ .rivl-seat-label b{color:#fff2cf}
#roomGame .rivl-pvp-seat.rb-champ::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(100deg,transparent 42%,#ffffff3a 50%,transparent 58%) 0 0/300% 100% no-repeat;animation:rb-shine 4.5s ease-in-out infinite}
@keyframes rb-shine{0%{background-position:100% 0}55%,100%{background-position:0 0}}
/* The turn, the thinking ring and a fold still read over a banner. */
#roomGame .rivl-pvp-seat.rb-seat.is-turn{border-color:#fbd68b;box-shadow:0 0 16px #c89d56}
#roomGame .rivl-pvp-seat.rb-seat.is-thinking{box-shadow:0 0 0 2px #ffdc7d,0 0 12px #e5ad58}
.rb-crown{position:absolute;top:-9px;left:50%;transform:translateX(-50%) rotate(-10deg);width:15px;height:auto;fill:var(--rb-c,#f2c46d);filter:drop-shadow(0 0 3px var(--rb-c,#f2c46d)) drop-shadow(0 1px 1px #000);pointer-events:none;z-index:2}
#roomGame .rivl-pvp-seat .avatar{position:relative}
#roomGame .rivl-pvp-seat .avatar:has(.rb-crown){overflow:visible}
@media (prefers-reduced-motion:reduce){#roomGame .rivl-pvp-seat.rb-champ::before{animation:none;display:none}}

/* The Set Hands bots wear banners too (practice table seats). */
#table .seat.rb-seat{background:linear-gradient(90deg,#000000f2 0,#000000d0 38%,#00000070 75%,#00000030),var(--rb-img) 80% 35%/260% auto no-repeat,#0a0908;border-color:var(--rb-c)}
#table .seat.rb-seat .avatar{border-color:var(--rb-c);box-shadow:0 0 6px var(--rb-c)}

/* ---------- The hover banner, floating above a seat ---------- */
.rb-float{position:fixed;z-index:60;width:min(340px,80vw);pointer-events:none;transform:translate(-50%,-100%);filter:drop-shadow(0 10px 20px #000);opacity:0;transition:opacity .12s}
.rb-float.on{opacity:1}
@media (prefers-reduced-motion:reduce){.rb-float{transition:none}}

/* ---------- Player card ---------- */
.rb-card{width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:18px;border:1px solid #70522e;border-radius:14px;background:linear-gradient(180deg,#1a1510,#0e0d0c);color:#f8f4ed;box-shadow:0 24px 60px #000c}
.rb-card::backdrop{background:#000000b8;backdrop-filter:blur(2px)}
.rb-card-body{display:grid;gap:14px}
.rb-card-head{display:flex;align-items:center;gap:12px}
.rb-card-head .rb-card-av{width:56px;height:56px;border-radius:50%;border:2px solid #efbd70;background:#292018;color:#efbd70;display:grid;place-items:center;font-weight:800;font-size:22px;overflow:hidden;flex-shrink:0}
.rb-card-head .rb-card-av img{width:100%;height:100%;object-fit:cover}
.rb-card-head h2{margin:0;font-size:22px}
.rb-card-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.rb-pills{display:flex;gap:6px;flex-wrap:wrap}
.rb-pill{font-size:10px;font-weight:800;letter-spacing:.14em;padding:5px 9px;border-radius:20px;border:1px solid #70522e;color:#f7d892}
.rb-pill.champ{background:linear-gradient(90deg,#f4cb85,#a97031);color:#130d07;border-color:transparent}
.rb-elo{font-size:30px;font-weight:900;color:#f7d892;line-height:1;text-align:right}
.rb-elo small{display:block;font-size:11px;font-weight:500;color:#bfb6a8;margin-top:4px}
.rb-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.rb-tiles div{border:1px solid #3a2d20;border-radius:8px;padding:9px 10px;background:#0d0c0b;min-width:0}
.rb-tiles small{display:block;font-size:9px;font-weight:800;letter-spacing:.12em;color:#efbd70}
.rb-tiles b{font-size:19px}
.rb-card-btns{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.rb-card-status{font-size:13px;color:#bfb6a8;margin:0}
@media (max-width:520px){.rb-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.rb-elo{font-size:24px}}
.online-row [data-player],.frl-row [data-player]{cursor:pointer}
.online-row [data-player]:hover,.frl-row [data-player]:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------- Profile: CHAMPION BANNERS ---------- */
.rb-panel{display:grid;gap:16px}
.rb-panel h3{margin:0}
.rb-panel-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
.rb-label{font-size:10px;letter-spacing:.16em;color:#efbd70;font-weight:800;margin:0 0 8px}
.rb-arts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.rb-art{aspect-ratio:2.2;border-radius:6px;border:2px solid transparent;background:#000 var(--rb-img) 80% center/cover;cursor:pointer;padding:0}
.rb-art[aria-pressed="true"]{border-color:var(--rb-c);box-shadow:0 0 10px var(--rb-c)}
.rb-choices{display:flex;gap:4px;flex-wrap:wrap}
.rb-choices button{border:1px solid #70522e;background:#0d0c0b;color:#f8f4ed;font:700 11px Inter,Arial,sans-serif;letter-spacing:.06em;padding:8px 11px;border-radius:7px;cursor:pointer}
.rb-choices button[aria-pressed="true"]{background:linear-gradient(90deg,#f4cb85,#a97031);color:#130d07;border-color:transparent}
.rb-panel select{width:100%;padding:9px 10px;border-radius:7px;border:1px solid #70522e;background:#0d0c0b;color:#f8f4ed;font:500 13px Inter,Arial,sans-serif}
.rb-art:focus-visible,.rb-choices button:focus-visible,.rb-keyhole:focus-visible,.rb-dial:focus-visible{outline:2px solid #efbd70;outline-offset:2px}
.rb-note{font-size:12.5px;color:#bfb6a8;margin:0}
@media (max-width:760px){.rb-panel-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- The vault in Support ---------- */
.rb-keyhole{all:unset;cursor:pointer;padding:0 .2em;border-radius:3px;transition:color .2s,text-shadow .2s}
.rb-keyhole:hover{color:#f7d892;text-shadow:0 0 8px #efbd70}
.rb-vault{display:grid;gap:14px;overflow:hidden;position:relative;background:radial-gradient(120% 120% at 50% 0,#2a1f14,#0e0c0a 70%)}
.rb-vault h3{margin:0}
.rb-dials{display:flex;gap:10px;flex-wrap:wrap}
.rb-dial{width:58px;height:80px;border-radius:8px;border:2px solid #70522e;background:linear-gradient(180deg,#fbfaf5,#e9e4d8);color:#141414;font:800 22px/1 Inter,Arial,sans-serif;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;box-shadow:0 4px 10px #000a;transition:transform .12s}
.rb-dial i{font-style:normal;font-size:20px}
.rb-dial:active{transform:translateY(2px)}
.rb-vault.shake .rb-dials{animation:rb-shake .4s}
@keyframes rb-shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.rb-vault.open .rb-dial{border-color:#efbd70;box-shadow:0 0 14px #efbd70}
.rb-vault-open{display:grid;gap:12px}
.rb-vault-open h4{margin:0;font-size:20px;color:#f7d892;letter-spacing:.04em}
.rb-vault-arts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.rb-vault-arts span{aspect-ratio:2.2;border-radius:6px;background:#000 var(--rb-img) 80% center/cover;box-shadow:0 0 0 1px var(--rb-c),0 0 12px var(--rb-c);animation:rb-rise .5s both}
.rb-vault-arts span:nth-child(2){animation-delay:.06s}.rb-vault-arts span:nth-child(3){animation-delay:.12s}.rb-vault-arts span:nth-child(4){animation-delay:.18s}.rb-vault-arts span:nth-child(5){animation-delay:.24s}.rb-vault-arts span:nth-child(6){animation-delay:.3s}
@keyframes rb-rise{from{opacity:0;transform:translateY(10px)}}
@media (prefers-reduced-motion:reduce){.rb-vault-arts span,.rb-vault.shake .rb-dials{animation:none}}
/* Phone seats are narrow and stack the name over the chips, so the art is sized to cover and the shade is lighter. */
@media (max-width:640px){#roomGame .rivl-pvp-seat.rb-seat,#table .seat.rb-seat{background:linear-gradient(90deg,#000000d8 0,#000000a0 45%,#00000040),var(--rb-img) 70% 30%/cover no-repeat,#0a0908;border-width:1.5px}}