/* ==========================================================================
   IBHAR GAMES — PLAYER (v3)

   The game is the only thing on this page that should be bright. Every
   control around the screen is graphite, sized for the thumb, and stays out
   of the way while something is running.
   ========================================================================== */

/* width:100% matters: with auto inline margins and no width, a flex item is
   sized shrink-to-fit, so the horizontally scrolling rail below stretched the
   whole page to 1280px on a phone. */
.player-page {
  width: 100%;
  min-width: 0;
  max-width: 1280px;
  margin: var(--sp-5) auto var(--sp-8);
  padding: 0 var(--sp-5);
}

/* -------------------------- title bar -------------------------- */
.player-bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
  min-width: 0;
}

.player-ident { min-width: 0; display: flex; flex-direction: column; gap: 6px; }

.player-title {
  font-family: var(--font-display);
  font-stretch: var(--wide-sm);
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: var(--tracking-display);
  line-height: 1.1;
  color: var(--chalk);
  overflow: hidden;
  text-overflow: ellipsis;
}

[dir="rtl"] .player-title { font-family: var(--font-arabic); font-stretch: normal; letter-spacing: 0; }

.player-meta { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }

.player-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--signal);
}

[dir="rtl"] .player-live { font-family: var(--font-arabic); letter-spacing: 0; }

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--signal);
  flex-shrink: 0;
  animation: pulse-dot 2.4s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.player-actions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

/* --------------------------- the stage --------------------------- */
.player-stage {
  position: relative;
  background: #000;
  border: 1px solid var(--ink-line-2);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
}

.player-viewport {
  width: 100%;
  height: min(660px, 68vh);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: var(--ink-sunken);
}

/* Portrait games get framed rather than stretched, and the bezel beside them
   stays flat black so nothing competes with the play area. */
.player-viewport.mode-mobile .game-iframe {
  width: min(400px, 100%);
  height: 100%;
  margin: 0 auto;
  border-inline: 1px solid var(--ink-line);
}

@media (max-width: 640px) {
  .player-viewport.mode-mobile .game-iframe { width: 100%; border-inline: none; }
}

.game-iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  background: #000;
}

/* ------------------------- controls bar ------------------------- */
.player-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
  background: var(--ink-raise);
  border-top: 1px solid var(--ink-line);
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.control-group { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; min-width: 0; }

.icon-btn {
  background: transparent;
  border: 1px solid var(--ink-line);
  color: var(--chalk-dim);
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.icon-btn:hover { color: var(--brass); border-color: var(--brass-deep); background: var(--brass-wash); }
.icon-btn .icon { width: 16px; height: 16px; }

.player-score {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--chalk-mute);
}

[dir="rtl"] .player-score { font-family: var(--font-arabic); letter-spacing: 0; text-transform: none; }

.player-score strong {
  font-family: var(--font-mono);
  color: var(--brass);
  font-size: var(--fs-base);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

[dir="rtl"] .player-score strong { direction: ltr; unicode-bidi: isolate; }

/* --------------------------- info panel --------------------------- */
.player-info {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
}

.info-box {
  background: var(--ink-raise);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-md);
  padding: var(--sp-5);
}

.info-title {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--chalk-mute);
  margin-bottom: var(--sp-4);
}

[dir="rtl"] .info-title { font-family: var(--font-arabic); letter-spacing: 0.04em; }

.info-text { color: var(--chalk-dim); font-size: var(--fs-sm); line-height: var(--lh-body); margin-bottom: var(--sp-4); }

.controls-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--chalk-dim);
}

.controls-list li { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }

.kbd {
  background: var(--ink-raise-2);
  border: 1px solid var(--ink-line-2);
  border-bottom-width: 2px;
  border-radius: var(--radius-xs);
  padding: 3px 9px;
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  color: var(--chalk);
  font-weight: 600;
  direction: ltr;
  unicode-bidi: isolate;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ---------------------- more games rail ---------------------- */
.more-games { margin-top: var(--sp-8); }

.see-all {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--chalk-dim);
  transition: color var(--transition-fast);
}

.see-all:hover { color: var(--brass); }
.see-all .icon { width: 14px; height: 14px; transition: transform var(--transition-fast); }
.see-all:hover .icon { transform: translateX(3px); }
[dir="rtl"] .see-all .icon { transform: scaleX(-1); }
[dir="rtl"] .see-all:hover .icon { transform: scaleX(-1) translateX(3px); }

/* the player already ends on a rail of cards; it does not need the portal's
   full end-of-page breathing room before the footer */
.player-page + .site-footer { margin-top: var(--sp-7); }

/* Flex, not a column-flow grid: a grid's automatic minimum size is the sum
   of its columns, which pushed the whole page ~1900px wide on a phone. */
.more-rail {
  display: flex;
  gap: var(--sp-3);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding-bottom: var(--sp-3);
  min-width: 0;
  scrollbar-width: none;
}

.more-rail::-webkit-scrollbar { display: none; }

.more-card {
  display: block;
  flex: 0 0 200px;
  scroll-snap-align: start;
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--ink-raise);
  transition: border-color var(--transition-fast);
}

.more-card:hover { border-color: var(--brass-deep); }
.more-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: #000; }

.more-card span {
  display: block;
  padding: var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--chalk);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.more-card:hover span { color: var(--brass); }

/* ------------------------ ad simulator ------------------------ */
.ad-sim {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(6, 7, 10, 0.92);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-normal);
}

.ad-sim.active { opacity: 1; visibility: visible; }

.ad-sim-box {
  background: var(--ink-raise);
  border: 1px solid var(--ink-line-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 460px;
  width: 100%;
  padding: var(--sp-6);
  text-align: center;
}

.ad-progress { width: 100%; height: 4px; background: var(--ink-line); border-radius: var(--radius-full); overflow: hidden; margin: var(--sp-5) 0; }
.ad-progress-fill { height: 100%; background: var(--brass); width: 0%; transition: width 0.1s linear; }

/* -------------------------- responsive -------------------------- */
@media (max-width: 860px) {
  .player-info { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  /* the player header carries a Back button too, so the wordmark goes early */
  .site-header .brand-name { display: none; }
  .player-page { margin: var(--sp-3) auto var(--sp-6); padding: 0 var(--sp-3); }
  .player-bar { align-items: flex-start; }
  .player-stage { border-radius: var(--radius-md); }
  .player-viewport, .player-viewport.mode-mobile { height: 62vh; }
  .player-controls { padding: var(--sp-3); justify-content: center; }
  .info-box { padding: var(--sp-4); }
  .more-card { flex-basis: 158px; }
}