.characters-container{margin-top:7em;.characters-header{display:flex;align-items:center;gap:30px;text-align:center;margin-inline:3em;&:before,&:after{content:"";flex:1;transform:translateY(13px);height:1px;display:block;background:linear-gradient(90deg,transparent,var(--title-color),transparent)}& h2{margin-top:1em;color:var(--title-color);font-family:var(--font-title);font-size:1.8em;flex-shrink:0;white-space:nowrap}}.characters-list{display:flex;flex-wrap:wrap;justify-content:center;gap:2em 1em;margin:4em 2em;.card-wrap{width:250px;flex-shrink:0;user-select:none;perspective:1000px;height:300px;border-radius:10px;transition:outline .25s ease,transform .15s ease,box-shadow .1s ease;outline:2px solid transparent;&:hover{box-shadow:0 0 25px #000;transform:scale(1.02) translateY(-3px);outline-color:var(--title-color)}&.flipped{& article{transform:rotateY(180deg)}}& article{display:flex;flex-direction:column;align-items:start;justify-content:end;width:min(250px,100%);height:300px;border:1px solid color-mix(in srgb,var(--title-color) 20%,transparent);border-radius:10px;transition:all .2s;position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.4,0,.2,1);.card-front,.card-back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:inherit;overflow:hidden}.card-front{overflow:hidden;border-radius:10px;& img{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:center top;display:block}.character-text{position:absolute;bottom:0;text-align:left;padding:1em;z-index:1;& p{margin:0;font-family:GTAArtDeco}& span{font-size:.85em;color:color-mix(in srgb,var(--title-color) 70%,var(--block-text) 100%)}}&:before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.95) 0%,rgba(0,0,0,.6) 40%,transparent 70%);z-index:1}}.card-back{background:#1a1a2e;transform:rotateY(180deg);display:flex;flex-direction:column;padding:14px;gap:12px;& p{display:flex;align-items:center;justify-content:space-between;margin:0 0 2px;font-size:18px;font-weight:600;color:#c8a0ff;border-bottom:1px solid rgba(200,160,255,.25);padding-bottom:8px;line-height:1.3;.char-flags{display:flex;gap:4px;align-items:center;& img{width:20px;height:auto;object-fit:cover}}}.back-row{display:flex;justify-content:space-between;align-items:center;.back-label{text-align:left;text-wrap:balance;max-width:10ch;font-size:11px;color:#888;text-transform:uppercase;letter-spacing:.5px}.back-value{text-align:end;font-size:12px;color:#e8e8e8}.status-main{color:#11e65f;font-weight:800}.status-ally{color:#5dca85}.status-enemy{color:#ca5d5d}.status-neutral{color:#cac35d}}.back-quote{margin-top:auto;padding-top:8px;border-top:1px solid rgba(255,255,255,.08);font-size:11px;color:#9a9a9a;font-style:italic;line-height:1.4}}}}}}@media(max-width:600px){.characters-container{width:100%;margin-top:0;display:flex;flex-direction:column;justify-content:center;.characters-header{gap:6px;margin-inline:.5em}.characters-list{margin:2em auto 3em;align-content:center;gap:2em .5em;grid-template-columns:repeat(2,auto);width:95%;& article{.character-text{display:flex;flex-direction:column;padding:.6em;gap:.4em;& p{line-height:1.1;font-size:1.1em}& span{font-size:.8em}}}}}}@media(min-width:661px)and (max-width:900px){.characters-list{grid-template-columns:repeat(2,auto)}}.ficha-tecnica{border:3px solid;border-radius:0 16px 16px 0;max-width:740px;width:100%;border-color:color-mix(in srgb,var(--title-color) 10%,var(--accent-color) 90%);background-color:color-mix(in srgb,var(--title-color),transparent 60%);& table{max-width:500px;width:100%;font-size:15px;border-spacing:0;border-collapse:collapse;margin:0 auto;& tr{border:1px solid;border-color:var(--accent-color);&:last-of-type{border:none}}& img{border-radius:10px;filter:drop-shadow(0 10px 5px #0000004d);margin:0 auto 10px}& ul{list-style:none}& td{font-size:17px;padding:1em;.platform-entry{display:flex;align-items:start;flex-direction:column;gap:4px;margin-bottom:1em;line-height:1.2;&:last-child{margin-bottom:0}}& span{text-align:start}.platform{font-family:var(--font-title);font-size:21px;font-weight:700;color:var(--title-color)}}& th{max-width:20ch;font-size:19px;text-wrap:pretty;text-align:center;text-transform:uppercase;font-family:var(--font-title);padding-inline:1.3em;& img{width:80%;height:auto;display:block}}& abbr{font-size:12px;color:color-mix(in srgb,var(--title-color) 40%,var(--block-text));text-shadow:1px 1px 1px #000;font-family:var(--font-title)}}}@media(max-width:600px){.ficha-tecnica{margin:0 auto;display:flex;border-radius:25px;justify-content:center;width:100%;max-width:400px;& table{& th{font-size:1em}& td{padding:.8em;text-align:left;font-size:1em;.table-platforms{font-size:1.2em}}}}}