/* DUDAS JUMP's arcade page — only the parts style.css has no opinion about.
   The game itself is a separate document at /dudasjump/play and brings its own
   stylesheet, so nothing here reaches it and nothing it does reaches out. */

/* The screen. Portrait because the game is, and driven from the viewport HEIGHT
   rather than the column width: a 9:16 screen sized by width would be taller
   than any laptop, and a machine you have to scroll to see the whole of is not
   a machine. Capped by the column on a phone, where width is the scarcer axis. */
.dj-screen{
  /* Two ceilings. 72vh keeps the machine from filling a laptop; the second is
     what leaves room for the tab bar, which is fixed at the bottom of the
     viewport on phones and would otherwise sit on the PLAY button. */
  --dj-max-h:min(72vh, calc(100dvh - 84px));
  width:min(100%, calc(var(--dj-max-h) * 9 / 16));
  aspect-ratio:9 / 16;
  margin:0 auto;
  background:#05070a;
  /* For any scroll a PLAYER starts — an anchor, a keyboard, the browser
     restoring a position. dudasjump-cab.js measures the sticky header for its
     own one-off reveal rather than trusting this, because the header's height
     is not the same on a phone as on a laptop. */
  scroll-margin-top:80px;
}
/* The still fills the opening the way a canvas does on every other cabinet,
   and the button sits over it. Cover rather than contain: the image is cut from
   the game at this exact ratio, so there is nothing to letterbox, and cover is
   what keeps it flush to the bezel if the two ever drift by a pixel. */
#dj-still{ display:block; width:100%; height:100%; object-fit:cover; }
#dj-play{
  position:absolute; left:50%; bottom:7%; transform:translateX(-50%);
  z-index:3; white-space:nowrap;
}

/* The same look as .cab-say, under a different name. claimstest requires every
   page carrying .cab-say to state what a cleared stage is worth on the daily
   board, which is a claim this game cannot truthfully make — so it does not
   wear the class that makes it. Copied rather than shared, and worth the two
   lines: the alternative is weakening a compliance check to fit one page. */
.dj-say{ color:var(--dim); font-size:14px; line-height:1.5; margin-top:calc(var(--s2) * -1); }

.dj-tag-toad{ color:#8dff2f; border-color:rgba(141,255,47,.35); }

.dj-howto{ margin:0; padding:0 0 0 2px; list-style:none; display:grid; gap:10px; }
.dj-howto li{ font-size:14px; line-height:1.5; color:var(--dim); }
.dj-howto b{ color:var(--text); }

/* The board, shaped like the site's other score lists rather than like the
   game's own — this is a sidebar panel and should read as one. */
.dj-rows{ display:flex; flex-direction:column; gap:8px; }
.dj-row{ display:grid; grid-template-columns:20px 1fr auto; gap:10px; align-items:baseline;
  font-size:13px; }
.dj-row .r{ color:var(--dim); font-size:11px; text-align:right; }
.dj-row .n{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dj-row .s{ font-variant-numeric:tabular-nums; color:var(--text); }
.dj-row .t{ grid-column:2 / -1; font-size:11px; color:var(--dim); }
.dj-fine{ margin:12px 0 0; font-size:11px; line-height:1.5; color:var(--dim); }

/* ---------- the two periods ----------
   TODAY and THIS WEEK are the same table over two spans, so they are tabs
   rather than two panels: a phone sidebar has room for one at a time, and
   stacking them would put the weekly board below the fold on the page where it
   matters most. aria-selected is the only state — the stylesheet reads the same
   attribute a screen reader does, so the look and the announcement cannot
   disagree. */
.dj-tabs{ display:flex; gap:6px; margin:0 0 10px; }
.dj-tab{
  flex:1; padding:7px 6px; cursor:pointer;
  font-family:var(--mono, inherit); font-size:10px; font-weight:700; letter-spacing:.14em;
  color:var(--dim); background:transparent;
  border:1px solid rgba(255,255,255,.12); border-radius:8px;
  transition:color .15s ease, border-color .15s ease, background .15s ease;
}
.dj-tab:hover{ color:var(--text); }
.dj-tab[aria-selected="true"]{
  color:#8dff2f; border-color:rgba(141,255,47,.45); background:rgba(141,255,47,.07);
}
.dj-tab:focus-visible{ outline:2px solid #8dff2f; outline-offset:2px; }

/* When the board being shown closes. Quiet: it is context for a decision, not
   a countdown the game is applying pressure with. */
.dj-closes{ margin:0 0 10px; font-size:11px; color:var(--dim); font-variant-numeric:tabular-nums; }
/* Drawn rows versus rows held. The archive has the rest, and a sponsor reading
   this should know the board did not stop at ten. */
.dj-count{ margin:10px 0 0; font-size:10.5px; color:var(--dim); }

.dj-stats{ display:flex; flex-direction:column; gap:8px; }
.dj-stat{ display:flex; justify-content:space-between; gap:12px; font-size:13px; }
.dj-stat span{ color:var(--dim); }
.dj-stat b{ font-variant-numeric:tabular-nums; }