/* RAVID Game Etika Flagship v2.1 Recovery
   Scope: game/adab section only. Purpose: neutralize broken v2 maze-grid look and restore premium playable layout. */

:root {
  --ravid-game-blue: #2563eb;
  --ravid-game-cyan: #13a8e8;
  --ravid-game-ink: #0f172a;
  --ravid-game-muted: #64748b;
  --ravid-game-line: rgba(37, 99, 235, 0.18);
  --ravid-game-card: rgba(255, 255, 255, 0.86);
  --ravid-game-shadow: 0 28px 70px rgba(37, 99, 235, 0.16);
}

#section-salam,
.salam-section,
.game-section,
#game-section,
[id*="salam"],
[class*="salam"] {
  overflow: visible !important;
}

/* Keep game page readable; v2 made title cramped/cut in some viewport. */
#section-salam h1,
.salam-section h1,
.game-section h1,
#game-section h1 {
  max-width: 760px !important;
  line-height: 1.08 !important;
  letter-spacing: -0.055em !important;
  color: var(--ravid-game-ink) !important;
}

/* Game shell: keep the board wide but not clipped. */
#section-salam .game-board,
#section-salam .maze-board,
#section-salam .maze,
#section-salam .maze-container,
#section-salam [class*="maze"],
.salam-section .game-board,
.salam-section .maze-board,
.salam-section [class*="maze"],
.game-section .game-board,
.game-section [class*="maze"] {
  position: relative !important;
  width: min(100%, 1280px) !important;
  min-height: 440px !important;
  border-radius: 30px !important;
  padding: 18px !important;
  overflow: hidden !important;
  border: 10px solid transparent !important;
  background:
    linear-gradient(#eff8ff, #f8fcff) padding-box,
    linear-gradient(135deg, #2563eb 0%, #1e7bff 45%, #0ea5e9 100%) border-box !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.82),
    inset 0 18px 38px rgba(255,255,255,.62),
    0 24px 64px rgba(37,99,235,.24) !important;
}

#section-salam .game-board::before,
#section-salam .maze-board::before,
#section-salam .maze::before,
#section-salam .maze-container::before,
#section-salam [class*="maze"]::before,
.salam-section [class*="maze"]::before,
.game-section [class*="maze"]::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background-image:
    linear-gradient(rgba(37,99,235,.065) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,99,235,.065) 1px, transparent 1px),
    radial-gradient(circle at 15% 12%, rgba(59,130,246,.16), transparent 24%),
    radial-gradient(circle at 84% 28%, rgba(14,165,233,.13), transparent 24%) !important;
  background-size: 48px 48px, 48px 48px, auto, auto !important;
  z-index: 0 !important;
}

/* Recovery for broken v2 square block maze. Make blocks look like connected rounded walls again. */
#section-salam .wall,
#section-salam .maze-wall,
#section-salam [class*="wall"],
#section-salam .obstacle,
#section-salam [class*="obstacle"],
.salam-section .wall,
.salam-section [class*="wall"],
.game-section .wall,
.game-section [class*="wall"] {
  position: relative !important;
  z-index: 2 !important;
  border-radius: 16px !important;
  background:
    linear-gradient(180deg, rgba(96,165,250,.95) 0%, #2563eb 48%, #1d4ed8 100%) !important;
  box-shadow:
    inset 0 4px 0 rgba(255,255,255,.34),
    inset 0 -5px 0 rgba(30,64,175,.30),
    0 8px 18px rgba(37,99,235,.28) !important;
  border: 1px solid rgba(255,255,255,.28) !important;
}

/* If v2 converted the maze into many identical square cells, avoid the overly tall empty board feeling. */
#section-salam .cell,
#section-salam .maze-cell,
#section-salam [class*="cell"],
.salam-section [class*="cell"],
.game-section [class*="cell"] {
  border-radius: 15px !important;
}

#section-salam .cell:not(.wall):not(.maze-wall):not([class*="wall"]),
#section-salam .maze-cell:not(.wall):not(.maze-wall):not([class*="wall"]),
#section-salam [class*="cell"]:not(.wall):not(.maze-wall):not([class*="wall"]) {
  background: rgba(255,255,255,.38) !important;
  border: 1px solid rgba(37,99,235,.08) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72) !important;
}

/* Avatars must not be clipped at the top/left like v2 screenshot. */
#section-salam .student,
#section-salam .teacher,
#section-salam .player,
#section-salam .guru,
#section-salam [class*="student"],
#section-salam [class*="teacher"],
#section-salam [class*="player"],
#section-salam [class*="guru"],
.salam-section [class*="student"],
.salam-section [class*="teacher"],
.salam-section [class*="player"],
.salam-section [class*="guru"] {
  z-index: 8 !important;
  overflow: visible !important;
  filter: drop-shadow(0 16px 26px rgba(37,99,235,.18)) !important;
}

#section-salam img,
.salam-section img,
.game-section img {
  max-width: 100% !important;
}

/* Premium cards around progress/coach/legend/tips/controls. */
#section-salam .card,
#section-salam [class*="card"],
#section-salam .legend,
#section-salam [class*="legend"],
#section-salam .tips,
#section-salam [class*="tips"],
.salam-section .card,
.salam-section [class*="card"] {
  border: 1px solid rgba(37,99,235,.14) !important;
  background: rgba(255,255,255,.86) !important;
  box-shadow: 0 24px 54px rgba(15,23,42,.08) !important;
  backdrop-filter: blur(16px) !important;
}

/* D-pad must stay visible and not cut off. */
#section-salam .dpad,
#section-salam .controls,
#section-salam [class*="control"],
#section-salam [class*="dpad"],
.salam-section [class*="control"],
.salam-section [class*="dpad"] {
  position: relative !important;
  z-index: 10 !important;
  margin-top: 22px !important;
}

#section-salam button,
.salam-section button,
.game-section button {
  cursor: pointer;
}

#section-salam [data-dir],
#section-salam .arrow,
#section-salam [class*="arrow"],
#section-salam [class*="btn-control"],
.salam-section [data-dir],
.salam-section [class*="arrow"] {
  border-radius: 16px !important;
  border: 1px solid rgba(37,99,235,.16) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(239,246,255,.92)) !important;
  box-shadow: 0 14px 26px rgba(15,23,42,.09) !important;
  color: #0f172a !important;
}

#section-salam [data-dir].active,
#section-salam .arrow.active,
#section-salam [class*="arrow"].active,
#section-salam [class*="btn-control"].active,
.salam-section [data-dir].active,
.salam-section [class*="arrow"].active {
  color: white !important;
  background: linear-gradient(135deg, #2563eb, #0ea5e9) !important;
  box-shadow: 0 18px 34px rgba(37,99,235,.32) !important;
}

/* Adab dialog/modal: keep the good idea, make it compact and centered. */
.ravid-adab-modal,
.ravid-game-choice-modal,
#section-salam .modal,
#section-salam [class*="modal"],
#section-salam [role="dialog"],
.salam-section [role="dialog"] {
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: min(92vw, 440px) !important;
  max-height: min(86vh, 620px) !important;
  overflow: auto !important;
  z-index: 10010 !important;
  border-radius: 28px !important;
  border: 1px solid rgba(37,99,235,.16) !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: 0 34px 90px rgba(15,23,42,.22) !important;
}

.ravid-adab-backdrop,
#section-salam .modal-backdrop,
#section-salam [class*="backdrop"],
.salam-section [class*="backdrop"] {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10000 !important;
  background: rgba(15,23,42,.42) !important;
  backdrop-filter: blur(8px) !important;
}

/* Choice buttons inside modal. */
.ravid-adab-modal button,
.ravid-game-choice-modal button,
#section-salam [role="dialog"] button,
.salam-section [role="dialog"] button {
  min-height: 56px !important;
  border-radius: 18px !important;
  font-weight: 800 !important;
}

@media (max-width: 980px) {
  #section-salam .game-board,
  #section-salam .maze-board,
  #section-salam .maze,
  #section-salam [class*="maze"],
  .salam-section [class*="maze"] {
    min-height: 360px !important;
    border-width: 8px !important;
    border-radius: 24px !important;
  }

  #section-salam h1,
  .salam-section h1,
  .game-section h1 {
    font-size: clamp(2.2rem, 8vw, 4.2rem) !important;
  }
}