/* CHORISO · personajes, posiciones y rivalidades.
   Presentación sobre los datos y controles existentes; sin reglas de progreso. */
:is(#gira, #rankingBanner, #amigosBanner) {
  --tr-superficie: #201713;
  --tr-cuero: #2b1b16;
  --tr-cuero: #582d00;
  --tr-oro: #e0b66c;
  --tr-texto: #fff3d7;
  --tr-suave: #d7c3a1;
}

/* La ruta enumera los rivales que la pantalla ya presenta. */
#gira[data-prov] .girapanel { gap: 20px; }
#gira .tr-ruta {
  width: 100%; grid-column: 1 / -1; box-sizing: border-box;
  padding: 11px 14px; border: 1px solid #bd945a7a;
  border-radius: 12px; background: linear-gradient(145deg,#3a2520f5,#201713f7);
  box-shadow: inset 0 1px #ffe6b327,0 7px 18px #14080555;
}
#gira .tr-ruta-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 3px 9px; margin-bottom: 7px; }
#gira .tr-ruta-title { color: var(--tr-texto); font: 400 16px/1.35 var(--ui-display,'Trocchi',Georgia,serif); }
#gira .tr-ruta-cuenta { color: var(--tr-suave); font: 400 12px/1.4 var(--ui-font,'Alegreya',Georgia,serif); }
#gira .tr-ruta-lista { display: grid; grid-template-columns: repeat(var(--tr-paradas,10),minmax(0,1fr)); gap: 4px; padding: 0; margin: 0; list-style: none; }
#gira .tr-ruta-lista li { position: relative; display: grid; place-items: center; min-width: 0; min-height: 23px; border: 1px solid #a68c685c; border-radius: 5px; color: #b9ab8a; background: #141414; font: 400 11px/1 'Trocchi',Georgia,serif; font-variant-numeric: tabular-nums; }
#gira .tr-ruta-lista li.tr-abierto { color: #f3d297; border-color: #c49b59; background: #513421; }
#gira .tr-ruta-lista li.tr-actual { color: #2a180a; border-color: #f3d297; background: linear-gradient(#f7dda8,#c49b59); box-shadow: inset 0 1px #fff3d790; }
#gira[data-prov] .gregla {
  grid-column: 1 / -1; margin: 0; padding: 12px 16px;
  border: 1px solid #b28a4d55; border-radius: 10px;
  color: var(--tr-suave); background: #201713ec;
  font-size: 15px; line-height: 1.5;
}
#gira[data-prov] .gregla b { color: #f3d297; white-space: nowrap; }
#gira[data-prov] .tr-ruta > .gregla {
  margin: 8px 0 0; padding: 7px 0 0; border: 0; border-top: 1px solid #b28a4d3d;
  border-radius: 0; background: none; font-size: 13px; line-height: 1.4;
}

/* Una ficha de colección: retrato completo, voz del personaje y resultado. */
#gira[data-prov] .grival[data-rival] {
  grid-template-columns: 108px minmax(0,1fr); column-gap: 19px; row-gap: 7px;
  padding: 22px !important; min-width: 0; min-height: 0; height: auto;
  border: 1px solid #bd945a !important; border-radius: 18px !important;
  background: radial-gradient(ellipse at 8% 0%,#a8763d2e,transparent 58%),linear-gradient(145deg,#30211af7,#201713fa) !important;
  box-shadow: inset 0 1px #ffeac338,inset 0 0 0 5px #14080535,0 9px 24px #09040280 !important;
  overflow: visible; scroll-margin-block: 22px;
}
#gira[data-prov] .grival[data-rival]::before { inset: 7px; border-radius: 12px; border-color: #d1aa6030; pointer-events: none; }
#gira[data-prov] .grival[data-rival].actual {
  background: radial-gradient(ellipse at 10% 0%,#d2a25824,transparent 65%),linear-gradient(145deg,#653a10f7,#362313fb 70%) !important;
  border-color: #e6ca87 !important;
  box-shadow: inset 0 1px #fff0ca50,inset 0 0 0 5px #ffe39a0b,0 10px 28px #0904028c !important;
}
#gira[data-prov] .grival[data-rival] .gava {
  width: 108px; height: 108px; grid-row: 1 / 4;
  border: 1px solid #e6ca87; border-radius: 12px;
  background: #201713; box-shadow: 0 0 0 3px #160c09,0 0 0 4px #b28a4d73,0 6px 14px #090402a1;
}
#gira[data-prov] .grival[data-rival] .gava > :is(img,svg) {
  width: 100%; height: 100%; object-fit: contain; object-position: center;
  border-radius: 11px;
}
#gira[data-prov] .grival[data-rival] .gorden {
  color: #c7b38e !important; font-size: 11px; line-height: 1.45; letter-spacing: .075em !important;
}
#gira[data-prov] .grival[data-rival] .gname {
  font-size: clamp(21px,5.7vw,28px) !important; line-height: 1.15 !important;
  color: var(--tr-texto) !important; margin: 0; align-self: center;
}
#gira[data-prov] .grival[data-rival] .goficio {
  color: var(--tr-oro) !important; font-size: 13px; line-height: 1.4;
  align-self: start; overflow-wrap: anywhere;
}
#gira[data-prov] .grival[data-rival] .gdesc {
  margin: 13px 0 0; padding: 12px 0 0; border-top: 1px solid #d8ad643b !important;
  color: #f3d297 !important; font: italic 400 18px/1.4 var(--ui-font,'Alegreya',Georgia,serif) !important;
}
#gira[data-prov] .grival[data-rival] .ghist {
  font-size: 15px !important; line-height: 1.48 !important;
  color: #dfcfb6 !important; margin: 0 0 7px;
}
#gira[data-prov] .grival[data-rival] .gcuenta {
  padding: 0; margin: 0; color: #d0bda1 !important; font-size: 14px;
}
#gira[data-prov] .grival[data-rival] .gcuenta b { color: #efcf8c !important; font-variant-numeric: tabular-nums; }
#gira[data-prov] .grival[data-rival] .gstars { grid-column: 1; margin-top: 10px; gap: 3px; flex-wrap: wrap; }
#gira[data-prov] .grival[data-rival] .gstars :is(svg,.pieza-oro) { width: 23px; height: 23px; }
#gira[data-prov] .grival[data-rival]:is(.actual,.gentrando)::after {
  min-height: 46px; margin-top: 10px; padding: 10px 12px;
  border-radius: 10px; font-size: 14px; letter-spacing: .025em;
  background: linear-gradient(180deg,#f3df9e,#d8ad64 65%,#ba904a);
  border-color: #f3d297; box-shadow: inset 0 1px #fff3d790,0 3px 0 #70441d,0 6px 10px #14080559;
}
#gira[data-prov] .grival[data-rival].bloqueado {
  border-color: #8e7960 !important; background: linear-gradient(145deg,#302922f7,#211b17fa) !important;
  box-shadow: inset 0 1px #f1dfb71c,0 6px 18px #14080555 !important;
}
#gira[data-prov] .grival[data-rival].bloqueado .gava { border-color: #b39f7f; }
#gira[data-prov] .grival[data-rival].bloqueado .gava > :is(img,svg) { filter: grayscale(1) brightness(.65); }
#gira[data-prov] .grival[data-rival] .grequisito {
  margin-top: 9px; padding-top: 11px; border-top: 1px solid #b39b7240;
  color: #d9cfc0; font-size: 15px; line-height: 1.45;
}
#gira .gcandado { width: 36px; height: 40px; border-color: #c7b38e; background: #211b17f2; border-radius: 9px; }
#gira .gcandado svg { width: 23px !important; height: 23px !important; }

/* El ranking conserva exactamente el orden y los datos recibidos. */
#rankingBanner .rlista { gap: 10px; }
#rankingBanner .tr-ranking-lead {
  margin: 0 0 17px; padding: 0 0 13px; border-bottom: 1px solid #c49b5957;
  color: #d7c3a1; font: 400 16px/1.45 var(--ui-font,'Alegreya',Georgia,serif);
}
#rankingBanner .rfila {
  display: grid; grid-template-columns: 48px minmax(0,1fr); grid-template-rows: auto auto;
  gap: 1px 13px; padding: 15px 16px; min-width: 0;
  border: 1px solid #b28a4d57 !important; border-radius: 12px !important;
  background: linear-gradient(135deg,#34241bf0,#201713f5) !important;
  box-shadow: inset 0 1px #ffe6b320,0 4px 12px #0b04052b !important;
}
#rankingBanner .rfila[data-tr-puesto="1"] {
  min-height: 92px; border-color: #daba75 !important;
  background: radial-gradient(ellipse at 0% 0%,#c49b5938,transparent 80%),linear-gradient(145deg,#503127,#2b1b16) !important;
  box-shadow: inset 0 1px #ffeac350,inset 0 0 0 4px #d8ad640d,0 6px 18px #0b040552 !important;
}
#rankingBanner .rfila[data-tr-puesto="2"] { border-color: #b9b09a70 !important; }
#rankingBanner .rfila[data-tr-puesto="3"] { border-color: #b788657d !important; }
#rankingBanner .rfila.rsoy {
  border-color: #e5bf78 !important; border-left: 3px solid #e5bf78 !important;
  background: linear-gradient(135deg,#653a10,#3a210a) !important;
}
#rankingBanner .rmed { grid-column: 1; grid-row: 1 / 3; display: grid; place-items: center; width: 48px; align-self: center; }
#rankingBanner .rmed .tr-medalla { display: block; width: 48px; height: 57px; overflow: visible; color: #e7c678; }
#rankingBanner .tr-medalla .tr-cinta { fill: #733900; stroke: #c49b59; stroke-width: 1; }
#rankingBanner .tr-medalla .tr-medalla-cuerpo { fill: #d8ad64; stroke: #fff0ba; stroke-width: 1.4; }
#rankingBanner .tr-medalla .tr-medalla-centro { fill: #51391d; stroke: #f3d795; stroke-width: 1; }
#rankingBanner .tr-medalla .tr-medalla-reflejo { fill: none; stroke: #fff3c4; stroke-width: 1.5; stroke-linecap: round; opacity: .8; }
#rankingBanner .tr-medalla text { fill: #fff0ca; font: 400 18px 'Trocchi',Georgia,serif; text-anchor: middle; }
#rankingBanner [data-tr-puesto="2"] .tr-medalla-cuerpo { fill: #aaa998; stroke: #efe6cf; }
#rankingBanner [data-tr-puesto="2"] .tr-medalla-centro { fill: #43433d; stroke: #e6ddc9; }
#rankingBanner [data-tr-puesto="3"] .tr-medalla-cuerpo { fill: #b57c50; stroke: #e0b48c; }
#rankingBanner [data-tr-puesto="3"] .tr-medalla-centro { fill: #513421; stroke: #dbaa7f; }
#rankingBanner .rpos { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #b28a4d57; border-radius: 50%; color: #cdbf98 !important; background: #201713; font-size: 15px; }
#rankingBanner .rnom {
  grid-column: 2; grid-row: 1; align-self: end; color: var(--tr-texto) !important;
  font-size: 19px; line-height: 1.3; white-space: normal; overflow-wrap: anywhere;
  overflow: visible; text-overflow: clip;
}
#rankingBanner .rdato { grid-column: 2; grid-row: 2; align-self: start; font-size: 15px; line-height: 1.5; color: #d9c9a0 !important; }
#rankingBanner .tr-posicion {
  margin: 0 0 18px; padding: 13px 16px; border: 1px solid #daba757a;
  border-radius: 10px; background: linear-gradient(135deg,#582d00d9,#2b1c0ff2);
  color: #e9dcb8 !important; text-align: left; font-size: 17px;
}
#rankingBanner .tr-posicion b { color: #f3d795; font-size: 21px; }

/* La libreta: nombre y balance siempre visibles; el historial sigue al lado
   del mismo nodo que abre el handler original. */
#amigosBanner #amigosBody { padding: 0; border: 0; background: none; }
#amigosBanner #amigosBody > :first-child:not([data-rival]):not(.tr-duelo-historia) {
  padding: 0 0 16px !important; margin: 0 !important; border: 0 !important;
  color: #d7c3a1 !important; font-size: 16px !important; line-height: 1.5;
  border-radius: 0 !important; background: none !important; box-shadow: none !important;
}
#amigosBanner #amigosBody > .tr-duelo {
  display: block !important; margin-top: 12px; padding: 17px !important;
  border: 1px solid #bd945a87 !important; border-radius: 14px !important;
  background: radial-gradient(ellipse at 0% 0%,#b7874024,transparent 65%),linear-gradient(145deg,#3a2520f5,#201713fa) !important;
  box-shadow: inset 0 1px #f7dda830,0 5px 15px #10070242 !important;
}
#amigosBanner .tr-duelo-toggle {
  display: grid; grid-template-columns: 40px minmax(0,1fr) 18px; align-items: center; gap: 12px;
  width: 100%; min-height: 44px; padding: 0 !important; margin: 0 0 10px;
  border: 0 !important; border-radius: 8px; background: none !important;
  box-shadow: none !important; color: var(--tr-texto); text-align: left;
}
#amigosBanner .tr-duelo-toggle > b { color: var(--tr-texto) !important; font: 400 20px/1.25 var(--ui-display,'Trocchi',Georgia,serif); overflow-wrap: anywhere; }
#amigosBanner .tr-duelo-sello {
  display: grid; place-items: center; width: 40px; height: 40px; box-sizing: border-box;
  border: 1px solid #d8b47a; border-radius: 12px;
  background: linear-gradient(145deg,#744b27,#3d2510); box-shadow: inset 0 1px #ffe6b326;
  color: #f1d9a0; font: 400 14px/1 'Trocchi',Georgia,serif;
}
#amigosBanner .tr-duelo-toggle > svg { width: 18px; height: 18px; stroke: #daba75; fill: none; stroke-width: 1.8; transition: transform 160ms ease; }
#amigosBanner .tr-duelo-toggle[aria-expanded="true"] > svg { transform: rotate(180deg); }
#amigosBanner .tr-duelo-datos { display: flex !important; gap: 10px; flex-wrap: wrap; justify-content: space-between; align-items: center; padding-top: 11px; border-top: 1px solid #d8ad6430; }
#amigosBanner .tr-duelo-balance { flex: 1 1 160px; color: #d9c9ad; font: 400 16px/1.6 var(--ui-font,'Alegreya',Georgia,serif); }
#amigosBanner .tr-duelo .revancha {
  min-height: 44px; margin: 0 !important; padding: 9px 14px !important;
  color: #fff3d7 !important; border: 1px solid #d7b56e8c !important; border-radius: 9px !important;
  background: linear-gradient(145deg,#653a10,#3d2510) !important;
  box-shadow: inset 0 1px #ffe6b32b,0 3px 7px #13040240 !important;
  font: 400 15px/1.4 var(--ui-font,'Alegreya',Georgia,serif) !important; letter-spacing: 0 !important; text-transform: none;
}
#amigosBanner #amigosBody > .tr-duelo-historia {
  min-width: 0; overflow-wrap: anywhere;
  margin: -1px 5px 14px; padding: 13px 14px !important; border: 1px solid #a180515c;
  border-top: 0; border-radius: 0 0 12px 12px !important;
  color: #dfcfb6; background: #1b130fef !important; box-shadow: none !important;
}
#amigosBanner .tr-duelo-historia > div { gap: 7px 12px; flex-wrap: wrap; padding: 7px 0 !important; font-size: 14px !important; line-height: 1.5; border-bottom: 1px solid #c49b5924; }
#amigosBanner .tr-duelo-historia > div:last-child { border-bottom: 0; }
#amigosBanner #amigosBody > .tr-duelo-vacio { padding: 4px 4px 16px !important; text-align: center; }
#amigosBanner .tr-duelo-vacio > div { font-size: 17px !important; line-height: 1.5; color: #d9c9ad !important; }
#amigosBanner .tr-duelo-vacio > div:first-of-type { font: 400 22px/1.3 var(--ui-display,'Trocchi',Georgia,serif); color: var(--tr-texto) !important; margin-bottom: 12px !important; }
#amigosBanner .tr-duelo-vacio > svg { display: block; width: 108px; height: 104px; margin: 0 auto 19px; }
.tr-sololectura { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip-path: inset(50%); white-space: nowrap !important; border: 0 !important; }
:is(#gira,#amigosBanner) :is(.grival,.tr-duelo-toggle,.revancha):focus-visible { outline: 2px solid #ffe0a3; outline-offset: 4px; }

@media (max-width:359px) {
  #gira[data-prov] { padding-inline: 16px; }
  #gira[data-prov] .grival[data-rival] { grid-template-columns: 88px minmax(0,1fr); gap: 6px 14px; padding: 18px !important; }
  #gira[data-prov] .grival[data-rival] .gava { width: 88px; height: 88px; }
  #gira[data-prov] .grival[data-rival] .gname { font-size: 21px !important; }
  #gira[data-prov] .grival[data-rival] .gorden { font-size: 10px; }
  #gira[data-prov] .grival[data-rival] .goficio { font-size: 12px; }
  #gira[data-prov] .grival[data-rival] .gstars :is(svg,.pieza-oro) { width: 21px; height: 21px; }
  #gira[data-prov] .grival[data-rival]:is(.actual,.gentrando)::after { font-size: 13px; padding-inline: 8px; }
  #rankingBanner .rfila { padding: 13px 12px; gap: 1px 9px; grid-template-columns: 42px minmax(0,1fr); }
  #rankingBanner .rmed { width: 42px; }
  #rankingBanner .rmed .tr-medalla { width: 42px; height: 50px; }
  #rankingBanner .rnom { font-size: 18px; }
  #amigosBanner #amigosBody > .tr-duelo { padding: 14px !important; }
  #amigosBanner .tr-duelo-toggle { gap: 9px; }
}
@media (min-width:960px) {
  #gira[data-prov].show { grid-template-columns: minmax(300px,360px) minmax(0,560px); column-gap: 56px; }
  #gira[data-prov] .girapanel { width: 100%; }
  #gira[data-prov] .grival[data-rival] { grid-template-columns: 116px minmax(0,1fr); padding: 25px !important; column-gap: 22px; }
  #gira[data-prov] .grival[data-rival] .gava { width: 116px; height: 116px; }
  #gira[data-prov] .grival[data-rival] .ghist { font-size: 16px !important; }
}
@media (hover:hover) and (pointer:fine) {
  #gira[data-prov] .grival[data-gira]:not(.gentrando):hover { border-color: #efcf8c !important; transform: translateY(-2px); }
  #amigosBanner .tr-duelo-toggle:hover > b { color: #f7dda8 !important; }
}
@media (forced-colors:active) {
  #gira .tr-ruta, #gira .tr-ruta-lista li, #gira[data-prov] .grival[data-rival],
  #rankingBanner .rfila, #rankingBanner .tr-posicion, #rankingBanner .rpos,
  #amigosBanner #amigosBody > :is(.tr-duelo,.tr-duelo-historia), #amigosBanner .tr-duelo-sello {
    color: CanvasText !important; background: Canvas !important; border-color: CanvasText !important; box-shadow: none !important;
  }
  #gira .tr-ruta-lista li.tr-actual { border-width: 3px; }
  #rankingBanner .tr-medalla :is(path,circle) { fill: Canvas; stroke: CanvasText; }
  #rankingBanner .tr-medalla text { fill: CanvasText; }
  #gira .tr-ruta :is(.tr-ruta-title,.tr-ruta-cuenta), #rankingBanner :is(.rnom,.rdato,.tr-ranking-lead),
  #amigosBanner .tr-duelo-toggle > b, #amigosBanner .tr-duelo-balance { color: CanvasText !important; }
}