/******************************************************************************
* Styles for home screen.                                                     *
*                                                                              *
* Theme-dependent custom properties (--surface, --accent-border, --dim-text,  *
* --card-glow) are pushed onto document.documentElement by home.html's React  *
* app whenever the theme changes — mirroring the pattern game.html uses for   *
* --bg / --accent / --felt via playfieldStyles.css.                          *
******************************************************************************/

.watermark {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
  font-family: 'Syne', sans-serif; font-weight: 800; font-size: 28vw;
  color: rgba(0,255,184,0.025); pointer-events: none; z-index: 0; user-select: none; line-height: 1;
  white-space: nowrap;
}
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.22); }

@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.35} }
@keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.game-card-enter { animation: fadeIn 240ms ease-out; }
@keyframes tutorial-glow {
  0%,100% { box-shadow: 0 0 0 1px rgba(232,200,112,0.3), 0 0 16px rgba(232,200,112,0.1); }
  50%     { box-shadow: 0 0 0 2px rgba(232,200,112,0.75), 0 0 28px rgba(232,200,112,0.35); }
}
.tutorial-highlight { border-radius: 8px; animation: tutorial-glow 2s ease-in-out infinite; }

/*
  Narrowing order (widest → narrowest), each stage reclaims space before the next kicks in:
    1) 900px — left Rankings sidebar collapses to a toggle
    2) 700px — Quick Play cards drop to a 2-column grid
    3) 560px — right player-info sidebar internals compress further
    4) 380px — Quick Play grid drops to a single column
*/

/* ── Main grid: left (Rankings) collapses first, right (player info) always visible but compresses ── */
.main-grid { display: grid; grid-template-columns: 210px 1fr 200px; gap: 28px; align-items: start; }
.main-grid > aside { position: sticky; top: 76px; align-self: start; }
@media (max-width: 900px) {
  .main-grid { grid-template-columns: auto 1fr minmax(120px, 200px); gap: 16px; }
}
@media (max-width: 560px) {
  .main-grid { grid-template-columns: auto 1fr minmax(92px, 160px); gap: 10px; }
}

/* ── Rankings: always visible on wide screens, collapsible toggle on narrow ── */
.leaderboard-toggle { display: none; }
.lb-content { display: block; }
@media (max-width: 900px) {
  .leaderboard-aside { position: relative; }
  .leaderboard-toggle {
    display: block; width: 100%; cursor: pointer;
    background: transparent; border: none; padding: 0;
    font-family: 'IBM Plex Mono', monospace; font-size: 10px;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim-text, rgba(232,240,239,0.6));
    white-space: nowrap;
  }
  .lb-content { display: none; }
  .lb-content.open {
    display: block; position: absolute; top: 100%; left: 0; margin-top: 8px;
    width: 260px; max-width: 80vw; padding: 14px; z-index: 150;
    border-radius: 8px;
    background: var(--surface, #060F18);
    border: 1px solid var(--accent-border, rgba(0,255,184,0.3));
    box-shadow: var(--card-glow, 0 4px 32px rgba(0,0,0,0.6));
  }
}

/* ── Player sidebar: stays visible, shrinks its internals on narrow screens ── */
@media (max-width: 700px) {
  .player-sidebar-aside .sidebar-box { padding: 10px !important; }
  .player-sidebar-aside .elo-number { font-size: 20px !important; }
}
@media (max-width: 560px) {
  .player-sidebar-aside .sidebar-box { padding: 8px !important; }
  .player-sidebar-aside .elo-number { font-size: 16px !important; }
  .player-sidebar-aside .pref-row { flex-direction: column; align-items: flex-start; gap: 1px; margin-bottom: 8px !important; }
}

/* ── Quick Play row: a real grid, so rows always drop evenly (no 3+1 split) ── */
.quick-play-row { display: flex; gap: 12px; }
.quick-play-item { flex: 1 1 0; min-width: 0; }
@media (max-width: 700px) {
  .quick-play-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
@media (max-width: 380px) {
  .quick-play-row { grid-template-columns: 1fr; }
}