*{box-sizing:border-box}body{margin:0;font-family:Impact,'Arial Narrow',Arial,sans-serif}.overlay{background:transparent;overflow:hidden}.canvas{width:1920px;height:1080px;transform-origin:top left;position:absolute}.scoreboard{position:absolute;top:8px;left:32px;right:32px;height:110px;display:flex;align-items:flex-start;transition:opacity .3s,transform .3s}.hidden{opacity:0;transform:translateY(-130px)}.side{position:relative;width:780px;height:94px;background:linear-gradient(100deg,#100c10,#290b15);display:flex;align-items:center;border-top:2px solid #fa5667;border-bottom:2px solid #7e2635;clip-path:polygon(0 0,94% 0,100% 100%,0 100%)}.right{background:linear-gradient(100deg,#07172c,#0b0d18);border-color:#52aaff;clip-path:polygon(6% 0,100% 0,100% 100%,0 100%);flex-direction:row-reverse}.photo{width:125px;height:94px;object-fit:contain;object-position:bottom;flex-shrink:0}.photo:not([src]){visibility:hidden}.info{flex:1;min-width:0;display:flex;align-items:center;gap:15px;padding:0 15px;color:white}.right .info{flex-direction:row-reverse;text-align:right}.name{font-size:31px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.4px}.meta{font:700 16px Arial;color:#c5c6d0;margin-top:4px}.flag{font-family:Arial;font-size:27px}.points{width:100px;height:94px;display:grid;place-items:center;font-size:54px;color:white;background:linear-gradient(130deg,#f32849,#a00020);flex-shrink:0;padding-right:15px}.right .points{background:linear-gradient(130deg,#0086ed,#005ba1);padding:0 0 0 15px}.center{width:296px;color:white;text-align:center;flex-shrink:0;padding-top:2px}.round{background:#101017;border-bottom:2px solid #74747e;padding:5px;font:700 18px Arial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;clip-path:polygon(0 0,100% 0,92% 100%,8% 100%)}.ft{display:inline-block;background:#11121beF;padding:4px 24px;font-size:27px;clip-path:polygon(8% 0,92% 0,100% 100%,0 100%)}
.control{background:#0b0e16;color:#eff2fc;font:16px Arial;padding:22px;max-width:1100px;margin:auto}h1{font-size:26px;margin-bottom:6px}.note{color:#aeb7ce;line-height:1.5}.status{color:#60e8b1}.cards{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}.card{background:#171d2c;padding:20px;border-radius:15px;border-top:4px solid #f32849}.card.blue{border-color:#138ced}label{display:block;margin:14px 0 6px;font-size:14px;color:#b7c1d9}input,select{width:100%;padding:12px;background:#0c1220;border:1px solid #37415a;color:white;border-radius:8px;font-size:17px}button{padding:13px 18px;border:0;border-radius:8px;background:#313e5b;color:white;font-size:16px;cursor:pointer;touch-action:manipulation}button:disabled{opacity:.4}.counter{display:flex;align-items:center;gap:16px;margin:18px 0}.counter strong{font-size:40px;flex:1;text-align:center}.counter button{font-size:25px;background:#b11e37}.blue .counter button{background:#086bbe}.actions{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0}.primary{background:#146de0}img.preview{width:90px;height:90px;object-fit:contain;display:block;margin:12px auto}a{color:#85b7ff}.topfields{display:grid;grid-template-columns:1fr 2fr;gap:15px}@media(max-width:650px){.control{padding:14px}.cards{grid-template-columns:1fr}.topfields{grid-template-columns:1fr}}

/* Reserva interior para la diagonal y los puntos de dos cifras. */
.points{width:120px;min-width:120px;flex-basis:120px;padding:0 48px 0 0;font-family:Arial,sans-serif;font-weight:800;font-size:54px;font-variant-numeric:tabular-nums;line-height:1;overflow:hidden}
.right .points{padding:0 0 0 48px}
.points.two-digits{font-size:46px;letter-spacing:-1px}

.flag{font-size:38px;line-height:1;flex-shrink:0}

/* Extremos transparentes: retratos nativos arriba, jugadores debajo. */
.side,.side.right{background:none;border:0;clip-path:none;isolation:isolate}
.side::before{content:"";position:absolute;inset:0 0 0 145px;z-index:-1;background:linear-gradient(100deg,#100c10,#290b15);border-top:2px solid #fa5667;border-bottom:2px solid #7e2635;clip-path:polygon(0 0,calc(100% - 47px) 0,100% 100%,0 100%)}
.side.right::before{inset:0 145px 0 0;background:linear-gradient(100deg,#07172c,#0b0d18);border-color:#52aaff;clip-path:polygon(47px 0,100% 0,100% 100%,0 100%)}
.side .info{margin-left:145px;padding-left:8px}
.side.right .info{margin-left:0;margin-right:145px;padding-left:15px;padding-right:8px}
.points{clip-path:polygon(0 0,calc(100% - 47px) 0,100% 100%,0 100%)}
.right .points{clip-path:polygon(47px 0,100% 0,100% 100%,0 100%)}
.photo{position:absolute;top:155px;width:145px;height:180px;object-fit:contain;object-position:top center;pointer-events:none}
.player-photo-0{left:0}.player-photo-1{right:0}
.flag{display:flex;align-items:center;justify-content:center;min-width:54px;height:38px}
.flag img{display:block;width:54px;height:38px;object-fit:contain}
.hidden{transform:translateY(-360px)}

/* Referencia SF6: retratos nativos en x=0/1740, terminan cerca de y=100. */
.photo{top:96px;width:180px;height:180px;object-position:top center}
.player-photo-0{left:-32px}.player-photo-1{right:-32px}

.character{position:absolute;top:0;width:180px;height:94px;object-fit:cover;object-position:center;background:#10131a;pointer-events:none}
.character-0{left:-32px}.character-1{right:-32px}
.character:not([src]){display:none}

/* PNG transparentes: difuminado únicamente en el borde inferior. */
.character{width:180px;height:94px;object-fit:contain;object-position:top center;background:transparent}
.character-0{left:-32px}.character-1{right:-32px}
.photo{width:180px;height:140px;object-fit:contain;object-position:top center}
.character,.photo{-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 78%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 78%,transparent 100%)}

/* Marcador compacto sobre las barras de vida (y=8..62). */
.overlay{font-family:Arial,sans-serif}
.side,.side.right{height:54px}
.points{height:54px;font-size:46px}
.points.two-digits{font-size:46px}
.name{font-family:Arial,sans-serif;font-weight:800;font-size:26px;line-height:30px;letter-spacing:.2px}
.meta{font-size:12px;line-height:14px;margin-top:0}
.center{padding-top:0}
.round{font:700 14px/16px Arial;padding:1px 5px}
.ft{font:800 22px/24px Arial;padding:0 20px}

/* Imágenes ampliadas, con proporciones originales y sin bordes laterales. */
.character{width:240px;height:150px}
.photo{top:150px;width:240px;height:180px}
.side::before{left:210px}.side.right::before{left:0;right:210px}
.side .info{margin-left:210px}.side.right .info{margin-left:0;margin-right:210px}

/* El retrato llena el extremo hasta el borde del lienzo. */
.character{width:250px;height:150px;object-fit:cover;object-position:center 20%}
.character-0{left:-32px}.character-1{right:-32px}
.photo{top:150px;width:250px;height:180px}
.side::before{left:218px}.side.right::before{left:0;right:218px}
.side .info{margin-left:218px}.side.right .info{margin-left:0;margin-right:218px}
.database{margin-top:22px;padding:20px;background:#171d2c;border-radius:15px}
.database h2{margin-top:0}.database input{margin-bottom:12px}
.saved-player{padding:16px 0;border-top:1px solid #37415a;display:flex;gap:16px;align-items:center;justify-content:space-between}
.profile-actions{display:flex;gap:8px;flex-wrap:wrap}.profile-actions button{font-size:14px;padding:10px}.save-profile{background:#146de0;width:100%;margin-top:20px}
@media(max-width:650px){.saved-player{align-items:stretch;flex-direction:column}}

.character-frame{position:absolute;top:0;width:250px;height:150px;overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 78%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 78%,transparent 100%)}
.character-frame-0{left:-32px}.character-frame-1{right:-32px}
.character-frame .character{position:absolute;top:0;left:0;right:auto;width:250px;height:150px;max-width:none;object-fit:cover;transform:none;-webkit-mask-image:none;mask-image:none}

/* Fade completo, reversible desde cualquier punto de la transición. */
.scoreboard{opacity:1;transform:none;transition:opacity 400ms ease-in-out}
.scoreboard.hidden{opacity:0;transform:none;pointer-events:none}
.visibility-controls{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:16px;background:#171d2c;border-radius:12px;margin:18px 0}
.visibility-controls button{min-width:190px;font-weight:700}.visibility-controls .note{font-size:14px}

/* Personajes un 10% mayores; espacio reservado para conservar la legibilidad. */
.character-frame{width:275px;height:165px}
.character-frame .character{width:275px;height:165px}
.photo{top:165px}
.side::before{left:243px}.side.right::before{left:0;right:243px}
.side .info{margin-left:243px}.side.right .info{margin-left:0;margin-right:243px}

/* Localidades legibles y modalidad junto a la bandera. */
.meta{font-size:20px;line-height:22px;font-weight:800;color:#fff;text-shadow:0 1px 3px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.identity{min-width:0;flex:1}.side .info,.side.right .info{gap:8px}
.mode{font:800 24px/28px Arial,sans-serif;color:white;flex-shrink:0;min-width:28px;text-align:center;text-shadow:0 1px 3px #000}





/* Personajes más cerca de las banderas; etiquetas por encima de la imagen. */
.character-frame{width:315px;height:175px}.character-frame .character{width:315px;height:175px}
.photo{top:175px}
.side,.side.right{z-index:2}.mode{width:38px;min-width:38px;height:42px;display:flex;align-items:center;justify-content:center}.mode img{width:38px;height:42px;object-fit:contain;display:block}
.flag-picker{background:#0c1220;border:1px solid #37415a;border-radius:8px;padding:10px}
.flag-picker summary{display:flex;align-items:center;gap:12px;cursor:pointer;min-height:36px}.flag-picker summary img{width:44px;height:32px;object-fit:contain}.flag-picker summary img:not([src]){display:none}
.flag-picker input{margin-top:12px}.flag-options{max-height:260px;overflow:auto;display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:10px}.flag-option{display:flex;align-items:center;gap:8px;padding:8px;background:#1b2840;text-align:left;font-size:13px}.flag-option img{width:36px;height:27px;object-fit:contain;flex-shrink:0}

.db-flag{width:24px;height:18px;object-fit:contain;vertical-align:middle;margin-right:8px}