*{box-sizing:border-box}html{color-scheme:dark}body{margin:0;color:#fff8e8;font-family:var(--sans);font-size:16px;line-height:1.45}button,input,select{font:inherit}a{color:inherit}main{width:min(1500px,calc(100% - 32px));margin:0 auto;padding:34px 0 60px}.hero{display:flex;justify-content:space-between;gap:28px;align-items:end;padding:30px 0 26px;border-bottom:1px solid #020a12}.eyebrow{display:inline-block;color:#071a2d;background:#ffd43b;padding:5px 9px;border:2px solid #ffd43b;border-radius:8px 5px 9px 5px;font-weight:900;letter-spacing:.07em;font-size:1rem}.hero h1{font-size:clamp(2.2rem,5vw,4.4rem);line-height:.98;margin:15px 0 13px;letter-spacing:-.045em;max-width:760px}.hero p{max-width:810px;color:#c2d0db;font-size:1.08rem;margin:0}.hero-facts{display:flex;gap:10px}.hero-facts div{min-width:116px;padding:14px 15px;background:#172a40;border:3px solid #020a12;border-radius:16px 10px 17px 11px;box-shadow:6px 6px 0 #020b14}.hero-facts strong{display:block;color:#ffd43b;font-size:1.75rem;line-height:1}.hero-facts span{display:block;color:#c2d0db;margin-top:7px;font-weight:650}.deck-note{margin:22px 0;display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;background:#172a40;border:2px solid #2f9bf4;border-radius:13px;padding:13px 16px}.deck-symbol{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#2f9bf4;color:#17324d;font-weight:950;font-size:1.3rem}.deck-note strong,.deck-note span{display:block}.deck-note span{color:#c2d0db}.deck-note a{color:#ffd43b;font-weight:800;text-decoration:none}.toolbar{position:sticky;top:68px;z-index:20;background:rgba(7,26,45,.96);backdrop-filter:blur(12px);padding:14px 0 12px;border-bottom:1px solid #020a12;display:grid;grid-template-columns:minmax(260px,1.15fr) 2fr auto;gap:10px;align-items:center}.search{height:46px;background:#fff8e8;color:#17324d;border:3px solid #020a12;border-radius:12px;display:flex;align-items:center;box-shadow:4px 4px 0 #2f9bf4}.search span{font-size:1.4rem;padding-left:12px}.search input{width:100%;height:100%;border:0;background:transparent;color:#17324d;outline:0;padding:0 12px;font-weight:650}.filters,.organize{display:flex;gap:8px;min-width:0}.toolbar select{height:46px;min-width:0;background:#203852;border:2px solid #020a12;color:#fff8e8;border-radius:10px;padding:0 32px 0 11px;font-weight:720}.filters select{flex:1}.view-switch{display:flex;border:2px solid #020a12;border-radius:10px;overflow:hidden;height:46px}.view-switch button{width:43px;border:0;border-right:1px solid #020a12;background:#203852;color:#fff8e8;cursor:pointer;font-size:1.2rem}.view-switch button:last-child{border-right:0}.view-switch button.active{background:#ffd43b;color:#071a2d;font-weight:900}.result-line{display:flex;gap:6px;align-items:center;color:#c2d0db;padding:18px 1px 14px}.result-line strong{color:#fff8e8;font-size:1.15rem}.result-line #activeHint{margin-left:auto}.catalog{min-height:340px}.game-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:26px 18px}.game-card{min-width:0;cursor:pointer;position:relative}.poster-wrap{position:relative;aspect-ratio:2/3;background:#06172a;border:2px solid #020a12;border-radius:14px 9px 14px 10px;overflow:hidden;box-shadow:6px 6px 0 #020b14;transition:transform .13s ease,border-color .13s ease}.game-card:hover .poster-wrap{transform:translate(-2px,-2px);border-color:#ffd43b}.poster{display:block;width:100%;height:100%;object-fit:cover;background:linear-gradient(145deg,#294660,#06172a)}.poster-fallback{position:absolute;inset:0;display:grid;place-items:center;padding:16px;text-align:center;background:linear-gradient(145deg,#294660,#06172a);font-weight:900;color:#ffd43b}.top-badges{position:absolute;left:8px;right:8px;top:8px;display:flex;justify-content:space-between;gap:6px;align-items:flex-start}.mini-badge{font-size:1rem;line-height:1;padding:7px 8px;border-radius:8px;border:2px solid rgba(5,16,27,.75);font-weight:900;box-shadow:2px 2px 0 rgba(0,0,0,.45);white-space:nowrap}.ally-tested{background:#ffd43b;color:#17324d}.ally-approved{background:#89e694;color:#071a2d}.ally-candidate{background:#ffb160;color:#17324d}.deck-verified{background:#2f9bf4;color:#071a2d}.deck-playable{background:#ffb160;color:#17324d}.deck-unsupported{background:#ff9a9a;color:#fff8e8}.deck-unknown{background:#294660;color:#fff8e8}.controller-mark{position:absolute;right:8px;bottom:8px;width:34px;height:34px;display:grid;place-items:center;background:#071a2dcc;border:2px solid #294660;border-radius:50%;font-size:1rem}.card-info{padding:11px 3px 0}.game-title{font-weight:850;font-size:1.04rem;line-height:1.2;margin:0;color:#fff8e8;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.meta{margin-top:7px;display:flex;align-items:center;gap:7px;color:#c2d0db;font-size:1rem}.dot{width:4px;height:4px;background:#294660;border-radius:50%}.genre-line{margin-top:5px;color:#c2d0db;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.group{margin:22px 0 40px}.group-head{display:flex;align-items:center;gap:12px;margin:0 0 16px}.group-head h2{font-size:1.5rem;margin:0}.group-head span{background:#ffd43b;color:#071a2d;border-radius:999px;padding:2px 9px;font-weight:900}.list-row{display:grid;grid-template-columns:72px minmax(200px,1.8fr) minmax(150px,1fr) auto auto;gap:14px;align-items:center;padding:10px;border-bottom:1px solid #294660;cursor:pointer}.list-row:hover{background:#0a2743}.list-cover{width:58px;height:82px;object-fit:cover;border-radius:7px;border:1px solid #020a12}.list-title{font-weight:850}.list-sub{color:#c2d0db;font-size:1rem}.pill{display:inline-flex;align-items:center;border-radius:999px;padding:5px 8px;font-size:1rem;font-weight:900;white-space:nowrap}.table-wrap{overflow:auto;border:2px solid #020a12;border-radius:12px}.games-table{width:100%;border-collapse:collapse;background:#172a40}.games-table th{text-align:left;position:sticky;top:0;background:#203852;color:#ffd43b;padding:12px;border-bottom:2px solid #020a12}.games-table td{padding:10px 12px;border-bottom:1px solid #294660;vertical-align:middle}.games-table tr{cursor:pointer}.games-table tbody tr:hover{background:#203852}.table-cover{width:42px;height:58px;object-fit:cover;border-radius:5px}.empty{padding:60px 20px;text-align:center;border:2px dashed #020a12;border-radius:14px;color:#c2d0db}.details-dialog{width:min(980px,calc(100% - 24px));max-height:calc(100vh - 30px);padding:0;background:#06172a;color:#fff8e8;border:3px solid #ffd43b;border-radius:17px 10px 18px 11px;box-shadow:10px 10px 0 #020b14;overflow:auto}.details-dialog::backdrop{background:rgba(2,10,17,.78);backdrop-filter:blur(3px)}.modal-close{position:sticky;z-index:4;top:12px;float:right;margin:12px 12px 0 0;width:42px;height:42px;border-radius:50%;border:2px solid #020a12;background:#071a2d;color:white;font-size:1.5rem;cursor:pointer}.detail-layout{display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:28px;padding:24px}.detail-poster{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:12px;border:2px solid #020a12;box-shadow:7px 7px 0 #020b14;background:#172a40}.detail-kicker{color:#2f9bf4;font-weight:900;text-transform:uppercase;letter-spacing:.06em}.detail-layout h2{font-size:clamp(2rem,4vw,3.3rem);line-height:1.02;margin:8px 0 12px;letter-spacing:-.03em}.detail-desc{color:#c2d0db;font-size:1.05rem}.detail-badges{display:flex;gap:7px;flex-wrap:wrap;margin:17px 0}.tech-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:18px}.tech{background:#172a40;border:1px solid #020a12;border-radius:10px;padding:11px}.tech span{display:block;color:#c2d0db;font-size:1rem;text-transform:uppercase;letter-spacing:.05em}.tech strong{display:block;margin-top:4px}.evidence{margin-top:16px;border-left:4px solid #ffd43b;padding:10px 12px;background:#172a40;color:#c2d0db}.detail-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px}.detail-actions a,.detail-actions button{text-decoration:none;border:2px solid #020a12;border-radius:10px;padding:10px 13px;font-weight:850;background:#172a40;color:#fff8e8}.detail-actions a.primary{background:#ffd43b;color:#071a2d;border-color:#ffd43b}.steam-freshness{font-size:1rem;color:#c2d0db;margin-top:10px}footer{border-top:3px solid #294660;background:#06172a;padding:30px max(18px,calc((100vw - 1500px)/2));color:#c2d0db}footer>div:first-child{display:flex;gap:12px;align-items:baseline}footer strong{color:#fff8e8;font-size:1.25rem}footer .legend{display:flex;gap:7px;flex-wrap:wrap;margin:16px 0}footer p{max-width:900px;margin:0}.admin-bar{position:fixed;bottom:12px;left:50%;transform:translateX(-50%);z-index:80;background:#ffd43b;color:#071a2d;border:3px solid #020a12;border-radius:12px;padding:8px;display:flex;gap:7px;align-items:center;box-shadow:6px 6px 0 #020b14}.admin-bar[hidden]{display:none}.admin-bar button,.admin-bar label{border:2px solid #020a12;background:#fff8e8;color:#071a2d;border-radius:8px;padding:7px 10px;font-weight:850;cursor:pointer}@media(max-width:1200px){.game-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.toolbar{grid-template-columns:1fr 2fr}.organize{grid-column:1/-1;justify-content:flex-end}}@media(max-width:900px){.hero{display:block}.hero-facts{margin-top:22px}.toolbar{position:static;display:flex;flex-direction:column;align-items:stretch}.filters,.organize{display:grid;grid-template-columns:1fr 1fr}.game-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.detail-layout{grid-template-columns:210px 1fr}.list-row{grid-template-columns:60px 1fr auto}.list-row .hide-mobile{display:none}}@media(max-width:650px){main{width:min(100% - 20px,1500px);padding-top:20px}.hero h1{font-size:2.7rem}.hero p{font-size:1rem}.hero-facts{display:grid;grid-template-columns:repeat(3,1fr)}.hero-facts div{min-width:0;padding:11px 8px}.hero-facts strong{font-size:1.35rem}.hero-facts span{font-size:1rem}.deck-note{grid-template-columns:auto 1fr}.deck-note a{grid-column:2}.filters,.organize{grid-template-columns:1fr}.view-switch{justify-self:stretch}.view-switch button{flex:1}.game-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}.poster-wrap{box-shadow:4px 4px 0 #020b14}.game-title{font-size:1rem}.detail-layout{display:block;padding:18px}.detail-poster{width:min(68%,270px);display:block;margin:0 auto 22px}.tech-grid{grid-template-columns:1fr}.result-line #activeHint{display:none}.list-row{grid-template-columns:50px 1fr}.list-cover{width:46px;height:65px}.list-row .pill,.list-row .hide-mobile{display:none}}\n.edit-form{padding:24px;display:grid;gap:14px}.edit-form h2{margin:0 0 8px;font-size:2rem}.edit-form label{display:grid;gap:6px;color:#c2d0db;font-weight:800}.edit-form input,.edit-form textarea,.edit-form select{width:100%;background:#071a2d;color:#fff8e8;border:2px solid #020a12;border-radius:9px;padding:10px}.edit-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}.save-edit{justify-self:start;background:#ffd43b;color:#071a2d;border:2px solid #020a12;border-radius:9px;padding:10px 18px;font-weight:900}@media(max-width:650px){.edit-row{grid-template-columns:1fr}}

/* === Ajuste de integracion con MichaelMontes.us: pills de estado ===
   El portal usa fondo claro + texto oscuro + borde grueso. Se conservan los
   cuatro estados oficiales de Valve y la semantica ROG Ally. */
.pill,.ally-tested,.ally-approved,.ally-candidate,.deck-verified,.deck-playable,.deck-unsupported,.deck-unknown{
  font-weight:900;border:3px solid #020a12;border-radius:10px 7px 11px 8px;box-shadow:3px 3px 0 #020b14;
  padding:5px 9px;color:#17324d;
}
.ally-tested{background:#ffd43b}
.ally-approved{background:#89e694}
.ally-candidate{background:#ffb160}
.deck-verified{background:#89e694}
.deck-playable{background:#7bc5ff}
.deck-unsupported{background:#ff9a9a}
.deck-unknown{background:#c9d4de}

/* === Orden de capas dentro de la tarjeta ===
   La v2 original tenia .poster-fallback (position:absolute) tapando la portada.
   Al dar capa propia a la portada, las insignias quedaban debajo: se corrige
   el orden completo.   fallback(0) < portada(1) < insignias y mando(2) */
.poster,.list-cover,.table-cover,.detail-poster{position:relative;z-index:1}
.top-badges,.controller-mark{z-index:2}

/* === Endurecimiento de anchos (proteccion, no ocultacion) === */
html,body{width:100%;max-width:100%;overflow-x:clip}
main,.hero,.hero>*,.hero-facts,.hero-facts>*,.deck-note,.deck-note>*,
.toolbar,.filters,.organize,.search,.catalog,.game-grid,.game-card,.poster-wrap{
  min-width:0;max-width:100%;
}
.hero h1{max-width:100%;overflow-wrap:anywhere}

@media (max-width:650px){
  /* Las 3 estadisticas pasan a 2 columnas y la tercera ocupa la fila completa */
  .hero-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-facts>div{min-width:0;width:100%}
  .hero-facts>div:last-child{grid-column:1/-1}
  .hero-facts span,.hero-facts strong{overflow-wrap:anywhere}

  .hero h1{font-size:clamp(2rem,10vw,2.7rem);line-height:1.02}

  .toolbar,.filters,.organize,.search{width:100%}
  .toolbar select,.search input{width:100%;min-width:0;max-width:100%}

  /* Las dos insignias no caben a lo ancho de la tarjeta movil: se permite que
     envuelvan en lugar de quedar recortadas por overflow:hidden. */
  .top-badges{flex-wrap:wrap;justify-content:flex-start;row-gap:5px}
}

@media (max-width:380px){
  .hero-facts{grid-template-columns:1fr}
  .hero-facts>div:last-child{grid-column:auto}
}

/* ===== Coherencia tipografica con el portal: nada visible por debajo de 16 px =====
   Los tamanos se normalizaron a 1rem EN SU ORIGEN (no aqui), para que no queden
   valores antiguos sueltos por el fichero. Este bloque conserva solo los ajustes
   de disposicion que hacen falta al subir la tipografia:
   las insignias pueden partir su texto y ocupar dos filas, que es preferible a
   sacrificar legibilidad para mantenerlas en una sola linea. */
.mini-badge{line-height:1.05;padding:.18rem .35rem;max-width:100%;white-space:normal;text-align:center}
.top-badges{gap:.3rem;row-gap:.3rem;flex-wrap:wrap;justify-content:flex-start}
.meta{flex-wrap:wrap}

@media (max-width:650px){
  .top-badges{justify-content:flex-start}
}