/* ==========================================================================
   MathClash — Games tab styles (v1)
   --------------------------------------------------------------------------
   Loaded AFTER polish.css (see index.html). Adds:
     · the Games tab button itself (already styled by .mode-tab in the
       app's own CSS — we just override the indicator width so the
       sliding underline still aligns once a 6th tab exists).
     · the Games panel layout (6-card grid).
     · the fullscreen game overlay (topbar + canvas stage).
     · canvas wrapper (centers + scales the canvas to fit the stage).
     · action buttons (reset etc.).
     · body-scroll lock when a game is open.

   Pure additive — never overrides the app's own layout dimensions
   except for the indicator width (which we MUST override because React
   computes it from its own internal tab count, and we've added a 6th).
   ========================================================================== */

/* ----------------------------------------------------------------------
   1. Sliding indicator — force 1/6 width
   ----------------------------------------------------------------------
   React sets inline `width: 20%` (100 / ll.length where ll.length === 5).
   We've appended a 6th tab (Games) at the end, so the strip now holds 6
   equal-flex tabs. !important is necessary because React's inline style
   would otherwise win. translateX is left to React (it animates to
   idx * 100% of the element's own width — and 100% of 1/6 is exactly
   one tab slot, so the math still lines up). When GAMES is active we set
   translateX(500%) from JS to point at the 6th slot.
   ---------------------------------------------------------------------- */
.mode-selector-indicator {
  width: calc(100% / 6) !important;
}

/* ----------------------------------------------------------------------
   1b. Tab labels — allow wrapping so 6 tabs don't clip "Daily Challenge"
   ----------------------------------------------------------------------
   The React bundle sets `white-space: nowrap` on .mode-tab at ALL widths,
   only switching to `white-space: normal` inside `@media (max-width: 600px)`.
   With the original 5 tabs that was fine — each tab was ~105px even in
   the 881-1160px two-column band. Adding the 6th Games tab shrinks each
   to ~88px, and "Daily Challenge" (the longest label, ~110px+ with
   padding) gets `overflow: hidden`-clipped at 601-1160px.

   Fix: allow text to wrap at ALL widths now. Tabs have `min-height: 42px`
   which comfortably fits 2 lines of 0.78rem text. "Daily Challenge"
   wraps to "Daily" / "Challenge" on 2 lines — no clipping, no layout
   shift, no horizontal scroll needed. Same specificity as the bundle's
   rule (.mode-tab), loaded AFTER it, so we win the cascade without
   needing !important.
   ---------------------------------------------------------------------- */
.mode-tab {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.15;
}

/* At the narrow band where the 2-column layout squeezes the tab strip,
   tighten the padding slightly so all 6 tabs still fit comfortably. */
@media (min-width: 601px) and (max-width: 1160px) {
  .mode-tab {
    padding: 8px 5px;
    font-size: 0.72rem;
  }
}

/* ----------------------------------------------------------------------
   2. Games panel — heading + 6-card grid
   ----------------------------------------------------------------------
   NOTE: Do NOT add a `display: block !important` rule here! The previous
   version had one, which overrode the MathClash CSS rule `.mode-panel.hidden
   { display: none }` — so the Games panel was ALWAYS visible, leaking into
   every other tab section (Daily, Duels, Party, Leaderboard, Streaks).
   Now we only force `display: flex` when the panel is `.active`; when it's
   `.hidden`, the app's own `.mode-panel.hidden { display: none }` takes
   effect and properly hides the Games panel.
   ---------------------------------------------------------------------- */
.mc-games-panel.active {
  display: flex !important;
  flex-direction: column;
  gap: 18px;
  padding: 14px 4px 28px;
  animation: mc-games-in 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes mc-games-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.mc-games-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mc-games-title {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text, #e8eefc);
}
.mc-games-sub {
  margin: 0;
  font-size: 13px;
  color: var(--muted, #8294b8);
  line-height: 1.5;
}

.mc-games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  width: 100%;
}

.mc-game-card {
  --card-accent: #7ee6e0;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 16px 16px;
  text-align: left;
  cursor: pointer;
  background: linear-gradient(160deg,
    rgba(17, 26, 48, 0.92),
    rgba(13, 21, 38, 0.92));
  border: 1px solid rgba(28, 42, 74, 0.9);
  border-radius: 12px;
  color: inherit;
  font: inherit;
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.22s ease,
              box-shadow 0.22s ease;
  overflow: hidden;
  isolation: isolate;
}
.mc-game-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 100% 0%,
    color-mix(in srgb, var(--card-accent) 22%, transparent),
    transparent 60%);
  opacity: 0.6;
  z-index: -1;
  pointer-events: none;
}
.mc-game-card::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--card-accent);
  opacity: 0.85;
  border-radius: 12px 0 0 12px;
}
.mc-game-card:hover,
.mc-game-card:focus-visible {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--card-accent) 70%, #1c2a4a);
  box-shadow:
    0 12px 32px -16px color-mix(in srgb, var(--card-accent) 60%, transparent),
    0 0 0 1px color-mix(in srgb, var(--card-accent) 40%, transparent) inset;
  outline: none;
}
.mc-game-card:active {
  transform: translateY(-1px) scale(0.992);
}

.mc-game-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--card-accent) 14%, transparent);
  color: var(--card-accent);
  margin-bottom: 4px;
}
.mc-game-icon svg {
  width: 22px;
  height: 22px;
}

.mc-game-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--text, #e8eefc);
  letter-spacing: -0.005em;
}
.mc-game-blurb {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted, #8294b8);
  flex: 1;
}
.mc-game-cta {
  font-size: 12px;
  font-weight: 700;
  color: var(--card-accent);
  letter-spacing: 0.02em;
  margin-top: 4px;
}

/* ----------------------------------------------------------------------
   3. Fullscreen game overlay
   ---------------------------------------------------------------------- */
html.mc-game-locked,
html.mc-game-locked body {
  overflow: hidden !important;
  height: 100% !important;
}

.mc-game-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #070b16;
  color: var(--text, #e8eefc);
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.mc-game-overlay.open {
  opacity: 1;
}
/* Real browser fullscreen sets the element to the screen; we still
   need the stage to fill it. */
.mc-game-overlay:fullscreen,
.mc-game-overlay:-webkit-full-screen,
.mc-game-overlay:-moz-full-screen,
.mc-game-overlay:-ms-fullscreen {
  width: 100vw;
  height: 100vh;
  background: #070b16;
}

/* ----------------------------------------------------------------------
   Topbar — floating pill, CONSTANT ON TOP of the canvas (takes zero
   vertical space). The stage fills the entire overlay; the topbar
   floats over the top edge with a semi-transparent backdrop + blur so
   the game content underneath stays visible at the edges. This is the
   "constant on top" pattern: the bar never scrolls, never pushes
   content down, never takes a row.
   ---------------------------------------------------------------------- */
.mc-game-topbar {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 8px 6px 6px;
  background: rgba(13, 21, 38, 0.78);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgba(44, 65, 112, 0.6);
  border-radius: 12px;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.6),
              0 0 0 1px rgba(126, 230, 224, 0.06) inset;
  pointer-events: auto;
}
.mc-game-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: #e8eefc;
  flex: 1;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.85;
}
.mc-game-exit,
.mc-game-fs {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(28, 42, 74, 0.8);
  background: rgba(17, 26, 48, 0.9);
  color: #e8eefc;
  cursor: pointer;
  font: 600 12px "DM Sans", sans-serif;
  transition: background 0.18s ease, border-color 0.18s ease,
              transform 0.18s ease;
  padding: 0;
  flex-shrink: 0;
}
.mc-game-exit {
  width: auto;
  padding: 0 10px 0 8px;
  gap: 5px;
}
.mc-game-exit:hover,
.mc-game-fs:hover {
  background: rgba(22, 34, 62, 0.95);
  border-color: rgba(44, 65, 112, 1);
}
.mc-game-exit:active,
.mc-game-fs:active {
  transform: scale(0.94);
}
.mc-game-exit svg,
.mc-game-fs svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.mc-game-stage {
  position: absolute;
  top: 60px;          /* below the floating topbar (~56px) + 4px gap */
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #070b16;
  overflow: hidden;
  padding: 10px;
}

.mc-canvas-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.mc-canvas-wrap canvas {
  background: #070b16;
  border-radius: 10px;
  box-shadow: 0 24px 60px -30px #000000aa,
              0 0 0 1px #1c2a4a inset;
  max-width: 100%;
  max-height: 100%;
  touch-action: none;        /* pointermove drives game state */
}

.mc-game-action {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid #1c2a4a;
  background: #111a30;
  color: #e8eefc;
  cursor: pointer;
  font: 700 12px "DM Sans", sans-serif;
  transition: background 0.18s ease, border-color 0.18s ease,
              transform 0.18s ease;
  z-index: 5;
}
.mc-game-action:hover {
  background: #16223e;
  border-color: #2c4170;
}
.mc-game-action:active {
  transform: scale(0.97);
}
.mc-game-action-secondary {
  top: 12px;
  right: 12px;
}

.mc-game-error {
  color: #ff7f87;
  font: 700 16px "DM Sans", sans-serif;
  text-align: center;
  padding: 24px;
}

/* ----------------------------------------------------------------------
   4. Mobile tweaks
   ---------------------------------------------------------------------- */
@media (max-width: 560px) {
  .mc-games-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .mc-game-card {
    padding: 14px 14px 12px;
  }
  .mc-game-name { font-size: 15px; }
  .mc-game-blurb { font-size: 12px; }
  .mc-game-title { font-size: 12px; }
  /* On phones, hide the "Exit" text label and keep just the icon */
  .mc-game-exit { width: 32px; padding: 0; }
  .mc-game-exit span { display: none; }
}

/* ----------------------------------------------------------------------
   5. Reduced motion — kill the panel slide-in only (game canvases keep
      their own internal animations because they're interactive).
   ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .mc-games-panel.active { animation: none; }
  .mc-game-card { transition: border-color 0.18s ease, box-shadow 0.18s ease; }
  .mc-game-overlay { transition: none; }
}