:root{
  --bg:#0d0b0c; --panel:#161213; --line:#2a2325; --text:#e8dfd6; --dim:#8a7c78;
  --blood:#b3252a; --gold:#d9a441; --ok:#5f9e5f;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:15px/1.5 var(--mono);
  background-image:radial-gradient(circle at 50% -10%,#1d1517 0%,var(--bg) 55%);
  min-height:100vh;
}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:.06em}

/* Todos los iconos son trazo, heredan el color del contenedor y se alinean
   con el texto. La UI no usa palabras salvo los nombres de logros de Steam. */
.ic{
  width:1.05em;height:1.05em;flex:0 0 auto;
  fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
  vertical-align:-.16em;
}
.ic.gem{color:var(--gold)}
/* El craneo va relleno y no de trazo. Se pinta desde el <svg> porque fill y stroke
   son heredables: un selector al path de adentro del <symbol> no llega, el <use>
   lo clona en un shadow tree que el CSS de afuera no alcanza. */
.ic.skull{fill:currentColor;stroke:none}
.ic.nolock{color:var(--dim)}

.top{max-width:960px;margin:0 auto;padding:44px 20px 20px;text-align:center}
.sub{color:var(--dim);margin:12px auto 0;max-width:56ch;font-size:14px}
.top h1{font-size:clamp(28px,6vw,44px);color:var(--blood)}
.top h1 span{color:var(--text)}

.stats{display:flex;gap:26px;justify-content:center;list-style:none;margin:22px 0 0;padding:0}
.stats li{display:flex;align-items:center;gap:7px;color:var(--dim);cursor:help;font-size:13px}
.stats b{font-size:20px;color:var(--gold);font-weight:700}


.add{max-width:640px;margin:26px auto 0;padding:0 20px}
.add label{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.12em;
  color:var(--dim);margin-bottom:8px}
.add-row{display:flex;gap:10px;align-items:stretch}
textarea{
  flex:1;background:var(--panel);color:var(--text);border:1px solid var(--line);
  border-radius:6px;padding:11px 12px;font:14px/1.6 var(--mono);resize:vertical;min-height:70px;
}
textarea::placeholder{color:#5c5150}
textarea:focus{outline:none;border-color:var(--blood)}
button{
  background:var(--blood);color:#fff;border:0;border-radius:6px;
  padding:0 20px;font:600 14px var(--mono);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
}
button .ic{width:18px;height:18px;stroke-width:2.2;margin-right:7px}
button:hover{filter:brightness(1.15)}
button:disabled{opacity:.45;cursor:wait}

.hint{margin:10px 0 0;color:var(--dim);font-size:12px;line-height:1.6}
.hint b{color:var(--text);font-weight:600}
.hint code{background:#241d1f;border:1px solid var(--line);border-radius:3px;
  padding:0 4px;color:var(--text);font-size:11px}

.feedback{margin-top:14px;display:flex;flex-direction:column;gap:6px}
.msg{display:flex;align-items:center;gap:9px;padding:8px 12px;border-radius:5px;
  font-size:13px;border-left:3px solid var(--line);background:var(--panel);cursor:help}
.msg.ok{border-color:var(--ok);color:var(--ok)}
.msg.warn{border-color:var(--gold);color:var(--gold)}
.msg.bad{border-color:var(--blood);color:#e0666a}
.msg b{color:var(--text);font-weight:600;overflow-wrap:anywhere}
.msg span{color:var(--dim)}
.msg .num{margin-left:auto;color:var(--dim);font-variant-numeric:tabular-nums}

main{max-width:960px;margin:30px auto 0;padding:0 20px}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:8px;background:var(--panel)}
table{width:100%;border-collapse:collapse;min-width:660px}
thead th{
  text-align:left;color:var(--dim);padding:12px 14px;white-space:nowrap;
  border-bottom:1px solid var(--line);font-weight:600;font-size:13px;
}
thead th[title]{cursor:help}
/* Flecha de orden en las dos columnas que definen el ranking: la 1 manda,
   la 2 desempata. Reemplaza a cualquier frase que lo explique. */
.sort{margin-left:5px;color:var(--gold);font-size:12px}
.sort sup{font-size:9px;margin-left:1px}
td{padding:10px 14px;border-bottom:1px solid #1e1819}
tbody tr:last-child td{border-bottom:0}
tbody tr[data-id]{cursor:pointer}
tbody tr[data-id]:hover{background:#1d1719}
.c-rank{width:56px;text-align:right}
.c-num{text-align:right;width:150px}
.c-when{width:126px;color:var(--dim);font-size:13px}
th.c-num,th.c-when{text-align:right}
td.c-rank{text-align:right;color:var(--dim);font-variant-numeric:tabular-nums}
td.c-num{text-align:right;font-variant-numeric:tabular-nums}
.tot{color:var(--dim)}
.empty td{color:var(--dim);text-align:center;padding:30px}
.empty .ic{width:20px;height:20px;margin:0 3px}

tr.complete td.c-rank{color:var(--gold);font-weight:700}
tr.complete{background:linear-gradient(90deg,rgba(217,164,65,.09),transparent 60%)}

.who{display:flex;align-items:center;gap:10px}
.who img,.ph{width:28px;height:28px;border-radius:4px;background:#000;flex:0 0 auto}
.ph{display:inline-block;background:#241d1f;border:1px solid var(--line)}
.who b{font-weight:600}
.who > div{min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.who .bar{flex:1 0 100%}
.tag{
  display:inline-flex;align-items:center;font-size:10px;letter-spacing:.08em;
  border:1px solid var(--gold);color:var(--gold);border-radius:3px;padding:1px 5px;
  vertical-align:1px;
}
.tag .ic{width:12px;height:12px;stroke-width:2}
/* Dead God es el logro del juego; el numero es tener todo en Steam. No son lo mismo. */
.tag.full{border-color:var(--blood);color:#e0666a;font-variant-numeric:tabular-nums}
.tag.fake{border-color:var(--dim);color:var(--dim)}
.bar{height:4px;background:#241d1f;border-radius:2px;margin-top:5px;overflow:hidden;max-width:180px}
.bar i{display:block;height:100%;background:var(--blood)}

.more{display:block;margin:18px auto 0;background:transparent;
  border:1px solid var(--line);color:var(--dim);padding:8px 26px;font-size:16px}
.more[hidden]{display:none} /* display:block le gana al hidden del navegador */
.more:hover{color:var(--text);border-color:var(--blood)}

dialog{
  background:var(--panel);color:var(--text);border:1px solid var(--line);
  border-radius:10px;padding:24px;max-width:620px;width:calc(100% - 32px);
}
dialog::backdrop{background:rgba(0,0,0,.75)}
.close{position:absolute;top:12px;right:12px;background:transparent;
  border:1px solid var(--line);color:var(--dim);padding:5px 8px}
.close:hover{color:var(--text)}
.who.big{gap:14px}
.who.big h2{font-size:18px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.nums{display:flex;gap:18px;margin-top:5px;color:var(--dim);font-size:14px;
  font-variant-numeric:tabular-nums}
.nums span{display:inline-flex;align-items:center;gap:6px;cursor:help}
.ext{margin-left:auto;color:var(--dim);align-self:flex-start;font-size:12px;
  text-decoration:none;display:inline-flex;align-items:center;gap:5px}
.ext:hover{color:var(--blood)}
.ext .ic{width:18px;height:18px}
.fechas{display:flex;align-items:center;gap:16px;margin:16px 0 0;
  color:var(--dim);font-size:12px;font-variant-numeric:tabular-nums;flex-wrap:wrap}
.fechas b{color:var(--text);font-weight:600}
.fechas .dg{display:inline-flex;align-items:center;gap:5px;color:var(--gold);
  border:1px solid var(--gold);border-radius:3px;padding:1px 7px}
#detail-body h3{margin:22px 0 0;color:var(--dim);font-size:12px;
  text-transform:uppercase;letter-spacing:.1em;display:flex;align-items:center;gap:7px}
#detail-body h3 .ic{width:17px;height:17px}
.rare-list{list-style:none;padding:0;margin:10px 0 0;display:flex;flex-direction:column;gap:8px}
.rare-list li{display:flex;align-items:center;gap:10px;font-size:13px}
.rare-list em{margin-left:auto;color:var(--gold);font-style:normal;font-variant-numeric:tabular-nums}
.rare-list small{display:block;color:var(--dim);font-size:11px}

/* Bloque de texto explicativo del final. Sobrio a proposito: informa a quien
   llega por primera vez y le da algo que indexar a los buscadores, sin pelearle
   protagonismo a la tabla. */
.explica{max-width:760px;margin:56px auto 0;padding:0 20px;color:var(--dim);font-size:13px;line-height:1.75}
.explica h2{font-size:12px;text-transform:uppercase;letter-spacing:.12em;
  color:var(--text);margin:28px 0 8px}
.explica h2:first-child{margin-top:0}
.explica p{margin:0}
.explica b{color:var(--text);font-weight:600}
.explica code{background:#241d1f;border:1px solid var(--line);border-radius:3px;
  padding:0 4px;color:var(--text);font-size:12px}

footer{max-width:960px;margin:44px auto;padding:0 20px;color:var(--dim);
  font-size:11px;text-align:center;letter-spacing:.04em}

/* Solo aparece cuando el sitio corre sin Supabase, contra web/demo.json */
.banner b{color:#f0c76a}
.banner{
  background:#2a1d10;border-bottom:1px solid var(--gold);color:var(--gold);
  padding:8px 16px;text-align:center;font-size:12px;
}

/* Dos escalones. Primero se cae la palabra del encabezado y se aprietan los
   numeros, que es lo que hace aparecer scroll horizontal. Recien despues, en
   pantallas de verdad chicas, se cae la fecha de Dead God. Lo que nunca se cae
   es cantidad y rareza: eso es el ranking. */
@media (max-width:760px){
  table{min-width:0}
  th,td{padding:10px 8px}
  thead th{font-size:0}                 /* queda el icono y la flecha */
  thead th .ic{font-size:13px;width:16px;height:16px}
  thead th .sort{font-size:11px}
  .c-rank{width:30px;font-size:13px}
  .c-num{width:auto;white-space:nowrap}
  .c-num .tot{font-size:11px}
  .c-when{width:96px;font-size:12px}
  .bar{max-width:130px}
}

@media (max-width:560px){
  .stats{gap:14px;flex-wrap:wrap}
  .c-when{display:none}
  td{font-size:13px}
  .who{gap:7px}
  .who img,.ph{width:22px;height:22px}
  .who b{font-size:13px;overflow-wrap:anywhere}
  .who > div{gap:4px}
  .tag{padding:1px 4px;font-size:9px}
  .tag .ic{width:10px;height:10px}
  tr.complete .bar{display:none}
  .add-row{flex-direction:column}
  button{padding:11px 20px}
}