/* beindie tool — Steam game comparison */

/* This tool's internals are translated, so the shared "controls are in English"
   notice is wrong on this page. Hidden here only. */

#cmpRoot .panel{min-width:0}

.cmp-slots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:900px){.cmp-slots{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.cmp-slots{grid-template-columns:1fr}}

#cmpCatNote:empty{display:none}

.cmp-indet{width:35%;background:var(--accent);animation:cmp-slide 1.1s ease-in-out infinite}
@keyframes cmp-slide{0%{margin-left:0}50%{margin-left:65%}100%{margin-left:0}}
@media (prefers-reduced-motion:reduce){.cmp-indet{animation:none;width:100%}}

/* ---------- the table ---------- */

table.cmp-table{min-width:720px;table-layout:fixed}
.cmp-table .cmp-corner{width:150px;border-bottom:1px solid var(--line-strong);background:var(--paper-2)}
.cmp-table thead th{
  vertical-align:bottom;text-align:left;padding:12px 14px;
  border-bottom:1px solid var(--line-strong);border-left:1px solid var(--line);
  background:var(--paper-2);text-transform:none;letter-spacing:0;
}
.cmp-col__art{display:block;width:100%;height:auto;border:1px solid var(--line);margin-bottom:9px}
.cmp-col__name{
  font-family:var(--display);font-weight:800;font-size:1rem;letter-spacing:-.02em;
  line-height:1.2;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-strong);
}
.cmp-col__name:hover{border-bottom-color:var(--ink)}
.cmp-col--err{background:rgba(255,45,45,.06)}
.cmp-badge{background:var(--red);color:#141414;border:1px solid var(--ink)}
.cmp-badge::before{display:none}
.cmp-col__id{display:block;font-family:var(--pixel);font-size:9px;color:var(--muted);margin-top:8px;letter-spacing:.05em}
.cmp-col__note{display:block;font-size:12.5px;color:var(--muted);margin-top:6px;line-height:1.4;font-weight:400}

.cmp-table tbody th[scope="row"]{
  text-align:left;width:150px;white-space:normal;
  font-family:var(--pixel);font-size:9px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);background:var(--paper-2);vertical-align:top;
  border-bottom:1px solid var(--line);padding:13px 14px;line-height:1.6;
}
.cmp-table td{border-left:1px solid var(--line);vertical-align:top;font-size:14.5px;line-height:1.5}
.cmp-table td.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.cmp-table td.is-dead{color:var(--muted)}
.cmp-table tbody tr:hover{background:transparent}

.cmp-row--head td{
  font-family:var(--display);font-weight:800;font-size:1rem;letter-spacing:-.02em;color:var(--ink);
}

/* One mark, on the cell that leads the row, and only on rows where leading
   means something. It used to paint the maximum of every numeric row green,
   which put the badge on the most expensive game in the table. Rows with no
   direction — genres, platforms, release — carry no mark at all. */
.cmp-table td.is-lead{box-shadow:inset 3px 0 0 var(--green);font-weight:700}

.cmp-legend{display:flex;gap:18px;flex-wrap:wrap}
.cmp-key{
  font-family:var(--pixel);font-size:9px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);display:flex;align-items:center;gap:8px;
}
.cmp-key::before{content:"";width:10px;height:10px;flex:none;border:1px solid var(--ink)}
.cmp-key--lead::before{background:var(--green)}

@media (max-width:620px){
  .cmp-table .cmp-corner,.cmp-table tbody th[scope="row"]{width:112px}
  table.cmp-table{min-width:640px}
}

@media print{
  .btn-row,#cmpExamples,#cmpCat{display:none}
  .table-wrap{overflow:visible}
  table.cmp-table{min-width:0}
}

#cmpAsOf:empty{display:none}
/* Copy as Markdown is dead until there is a table to copy; it used to hand out
   the last one that worked. */
#cmpCopyMd[disabled]{opacity:.45;cursor:not-allowed}