/* The AIpocalypse hall of fame: the colleague's leaderboard.html stylesheet,
   moved out of the page. skilder.ai additions are marked below. */
:root{ --ink:#e8dfc8; --dim:#9c9481; --panel:#161a22; --edge:#2c3444; --blue:#1fa0f0; color-scheme:dark; }
*{box-sizing:border-box}
body{margin:0; padding:clamp(16px,4vw,48px); background:#0b0e14; color:var(--ink);
     font-family:"IBM Plex Mono",monospace; display:flex; flex-direction:column;
     align-items:center; gap:clamp(14px,3vw,28px); min-height:100dvh}
h1{font-family:"Press Start 2P",monospace; font-size:clamp(13px,3vw,26px); color:var(--blue);
   margin:0; text-align:center; line-height:1.6; text-shadow:3px 3px 0 #000}
table{border-collapse:collapse; width:100%; max-width:900px; font-size:clamp(12px,1.6vw,16px)}
th{font-family:"Press Start 2P",monospace; font-size:clamp(7px,1.1vw,9px); color:var(--dim);
   text-align:left; padding:0 10px 10px; letter-spacing:1px; font-weight:400}
td{padding:11px 10px; border-top:1px solid var(--edge)}
td.rank{font-family:"Press Start 2P",monospace; font-size:clamp(9px,1.3vw,12px); color:var(--blue); width:1%}
td.time{font-variant-numeric:tabular-nums; color:var(--blue)}
td.score{font-variant-numeric:tabular-nums; text-align:right}
tr.fresh{animation:pop 1.4s ease-out}
@keyframes pop{ from{background:rgba(31,160,240,.30)} to{background:transparent} }
@media (prefers-reduced-motion:reduce){ tr.fresh{animation:none} }
.foot{color:var(--dim); font-size:12px; text-align:center}
.dot{display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--blue);
     margin-right:7px; vertical-align:middle; animation:blink 2.4s ease-in-out infinite}
@keyframes blink{ 50%{opacity:.25} }

/* ==== skilder.ai additions ================================================ */
body{padding-left:max(clamp(16px,4vw,48px), env(safe-area-inset-left,0px));
     padding-right:max(clamp(16px,4vw,48px), env(safe-area-inset-right,0px))}
/* R5: the table fits a 360px phone. The company is the only free-length
   column, so it is the one that truncates. */
td.company{max-width:14em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--dim)}
td.name{overflow-wrap:anywhere}
@media (max-width:520px){
  th{padding:0 5px 8px}
  td{padding:10px 5px}
  td.company{max-width:7em}
}
.play{font-family:"Press Start 2P",monospace; font-size:11px; letter-spacing:1px; background:var(--blue);
      color:#04121c; text-decoration:none; padding:14px 18px; min-height:44px;
      display:inline-flex; align-items:center; box-shadow:0 0 0 2px #000, 0 6px 0 0 #000}
.play:hover{background:#6ac4fa}
.play:focus-visible{outline:2px solid var(--blue); outline-offset:3px}