/* ==========================================================================
   IBHAR GAMES — PORTAL & CATALOG (v3)

   The hero is the signature: a cabinet in attract mode. Idle arcade machines
   cycle their own demo footage to pull you across the room, so the page opens
   by cycling the real featured game art, with a mono readout and a tick bar
   you can drive yourself. Everything below it stays deliberately quiet.

   Logical properties throughout, so RTL mirrors with no special cases.
   ========================================================================== */

/* ============================== Hero ============================== */
.hero { padding: var(--sp-7) 0 var(--sp-8); }

/* ------- the readout rail above the screen ------- */
.attract-rail {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding-bottom: var(--sp-3);
}

.attract-ticks {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 1;
  min-width: 0;
}

.attract-tick {
  flex: 1 1 0;
  max-width: 54px;
  height: 3px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--ink-line-2);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.attract-tick:hover { background: var(--chalk-mute); }
.attract-tick[aria-selected="true"] { background: var(--brass-deep); }

/* The live tick fills across the dwell time — the page's only clock. It
   pauses with the cycle when someone hovers, so the bar never lies about
   when the next game arrives. */
.attract-tick[aria-selected="true"]::after {
  content: "";
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--brass);
  animation: tick-fill 6s linear forwards;
}

.attract:hover .attract-tick::after,
.attract:focus-within .attract-tick::after { animation-play-state: paused; }

@keyframes tick-fill { to { width: 100%; } }

@media (prefers-reduced-motion: reduce) {
  .attract-tick[aria-selected="true"]::after { width: 100%; }
}

.attract-pos { flex-shrink: 0; letter-spacing: 0.1em; }
.attract-pos #attract-pos-now { color: var(--chalk); }

/* ------- the screen -------
   The key art is 16:9 and carries its own composition, so it is framed at
   its native ratio rather than cropped to fit a banner slot. A blurred copy
   of the same art lights the stage behind it: every featured game brings its
   own colour to the page, and the interface itself stays grey. */
.attract-stage {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.12fr;
  align-items: center;
  gap: var(--sp-7);
  padding: var(--sp-7);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ink-sunken);
  border: 1px solid var(--ink-line-2);
  box-shadow: var(--shadow-lg);
}

.attract-amb {
  position: absolute;
  inset: -12%;
  z-index: 0;
  pointer-events: none;
}

.attract-amb .attract-art {
  filter: blur(72px) saturate(180%);
  opacity: 0;
  transform: scale(1.1);
}

.attract-amb .attract-art.is-live { opacity: 0.58; }

/* holds the ambient light back from the text so the copy keeps its contrast */
.attract-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to right, rgba(8, 9, 12, 0.88) 0%, rgba(8, 9, 12, 0.6) 44%, rgba(8, 9, 12, 0.34) 100%);
}

[dir="rtl"] .attract-stage::before {
  background:
    linear-gradient(to left, rgba(8, 9, 12, 0.88) 0%, rgba(8, 9, 12, 0.6) 44%, rgba(8, 9, 12, 0.34) 100%);
}

.attract-screen {
  position: relative;
  z-index: 2;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}

.attract-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--transition-slow);
}

.attract-art.is-live { opacity: 1; }

.attract-info {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
  min-width: 0;
}

.attract-genre { color: var(--brass); }

.attract-title {
  font-family: var(--font-display);
  font-stretch: var(--wide);
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--chalk);
  text-wrap: balance;
}

/* "Cyber Surge: Neon Rush" is a name and a subtitle. Setting the second half
   lighter and smaller lets the name land without the colon breaking the line. */
.attract-title .sub {
  display: block;
  font-size: 0.5em;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--chalk-dim);
  margin-top: 0.35em;
}

[dir="rtl"] .attract-title { font-family: var(--font-arabic); text-transform: none; }

.attract-desc {
  color: var(--chalk-dim);
  font-size: var(--fs-lg);
  line-height: var(--lh-body);
  max-width: 42ch;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.attract-foot {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  flex-wrap: wrap;
  margin-top: var(--sp-2);
}

/* the Play control is a span inside the stage link, so it reads as a button
   without nesting an <a> in an <a> */
.attract-play {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 14px 28px;
  background: var(--brass);
  color: var(--on-brass);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-stretch: var(--wide-sm);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  transition: background var(--transition-fast);
}

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

.attract-stage:hover .attract-play { background: var(--brass-lit); }
.attract-play .icon { width: 13px; height: 13px; }

/* mono spec strip: the numbers the player actually wants */
.specs { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }

.spec { display: flex; flex-direction: column; gap: 4px; }

.spec-val {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--chalk);
  line-height: 1;
}

.spec-key {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--chalk-mute);
  line-height: 1;
}

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

/* ------- one honest line of information, in place of a stat template ------- */
.hero-facts {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: var(--sp-5);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--chalk-mute);
}

[dir="rtl"] .hero-facts { font-family: var(--font-arabic); letter-spacing: 0; font-size: var(--fs-xs); }

.hero-facts b { color: var(--chalk); font-weight: 600; }
.hero-facts .sep { color: var(--ink-line-2); }

/* ============================ Catalog ============================ */
.catalog { padding-bottom: var(--sp-8); scroll-margin-top: 90px; }

.catalog-count { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--chalk-mute); letter-spacing: 0.06em; }
.catalog-count b { color: var(--brass); font-weight: 600; }
[dir="rtl"] .catalog-count { font-family: var(--font-arabic); letter-spacing: 0; }

.catalog-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
  flex-wrap: wrap;
}

.search-field { position: relative; flex: 0 1 300px; min-width: 210px; }

.search-field .icon {
  position: absolute;
  inset-inline-start: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  color: var(--chalk-mute);
  pointer-events: none;
}

.search-input {
  width: 100%;
  background: var(--ink-raise);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  padding-inline-start: 36px;
  color: var(--chalk);
  font-family: inherit;
  font-size: var(--fs-sm);
  transition: border-color var(--transition-fast);
}

.search-input::placeholder { color: var(--chalk-mute); }
.search-input:focus { outline: none; border-color: var(--brass); }

/* ------- filters: a quiet strip carrying real counts ------- */
.filters {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  min-width: 0;
}

.filter-btn {
  background: transparent;
  border: 1px solid var(--ink-line);
  color: var(--chalk-dim);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: all var(--transition-fast);
}

.filter-btn:hover { color: var(--chalk); border-color: var(--ink-line-2); }

.filter-btn .n {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  font-weight: 500;
  color: var(--chalk-mute);
}

.filter-btn.active {
  background: var(--brass);
  border-color: var(--brass);
  color: var(--on-brass);
  font-weight: 600;
}

.filter-btn.active .n { color: rgba(26, 18, 6, 0.62); }

/* ------------------------- game cards ------------------------- */
.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--sp-4);
}

/* The whole card is the link. A separate "Play" button inside a card that is
   already entirely clickable is one control too many. */
.game-card {
  display: flex;
  flex-direction: column;
  background: var(--ink-raise);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--transition-fast), background var(--transition-fast),
              transform var(--transition-fast);
}

.game-card:hover {
  border-color: var(--brass-deep);
  background: var(--ink-raise-2);
  transform: translateY(-2px);
}

.card-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ink-sunken); flex-shrink: 0; }

.card-img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); }
.game-card:hover .card-img { transform: scale(1.05); }

.card-new {
  position: absolute;
  top: var(--sp-3);
  inset-inline-start: var(--sp-3);
  z-index: 2;
}

/* rating rides the artwork, right-aligned, on its own small scrim */
.card-rating {
  position: absolute;
  top: var(--sp-3);
  inset-inline-end: var(--sp-3);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  border-radius: var(--radius-xs);
  background: rgba(8, 9, 12, 0.74);
  backdrop-filter: blur(4px);
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  font-weight: 600;
  color: var(--chalk);
}

.card-rating .icon { width: 10px; height: 10px; color: var(--brass); }

.card-body { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4); flex: 1; }

.card-title {
  font-family: var(--font-display);
  font-stretch: var(--wide-sm);
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--chalk);
  transition: color var(--transition-fast);
}

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

.game-card:hover .card-title { color: var(--brass); }

.card-desc {
  color: var(--chalk-dim);
  font-size: var(--fs-xs);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

.card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--ink-line);
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--chalk-mute);
  min-width: 0;
}

[dir="rtl"] .card-foot { font-family: var(--font-arabic); letter-spacing: 0; text-transform: none; font-size: var(--fs-2xs); }

.card-genre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-plays { flex-shrink: 0; color: var(--chalk-dim); }

.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--sp-9) var(--sp-4);
  color: var(--chalk-dim);
  border: 1px dashed var(--ink-line-2);
  border-radius: var(--radius-md);
}

.empty-state h3 {
  font-family: var(--font-display);
  font-stretch: var(--wide-sm);
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--chalk);
  margin-bottom: var(--sp-2);
}

[dir="rtl"] .empty-state h3 { font-family: var(--font-arabic); font-stretch: normal; }

/* ==================== About / legal pages ==================== */
.page-head { padding: var(--sp-8) 0 var(--sp-6); border-bottom: 1px solid var(--ink-line); margin-bottom: var(--sp-7); }

.page-title {
  font-family: var(--font-display);
  font-stretch: var(--wide);
  font-size: var(--fs-h1);
  font-weight: 800;
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--chalk);
  margin: var(--sp-3) 0;
}

[dir="rtl"] .page-title { font-family: var(--font-arabic); text-transform: none; }

.page-lede { color: var(--chalk-dim); font-size: var(--fs-lg); max-width: 62ch; line-height: var(--lh-body); }

.about-section { padding-bottom: var(--sp-7); }
.about-section .prose { padding-bottom: 0; }

.about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-7);
}

.about-card {
  background: var(--ink-raise);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-md);
  padding: var(--sp-5);
  transition: border-color var(--transition-fast);
}

.about-card:hover { border-color: var(--ink-line-2); }

.about-card h3 {
  font-family: var(--font-display);
  font-stretch: var(--wide-sm);
  font-size: var(--fs-h3);
  font-weight: 700;
  margin: var(--sp-3) 0 var(--sp-2);
  color: var(--chalk);
  line-height: var(--lh-heading);
}

[dir="rtl"] .about-card h3 { font-family: var(--font-arabic); font-stretch: normal; }

.about-card p { color: var(--chalk-dim); font-size: var(--fs-sm); line-height: var(--lh-body); }
.about-card .icon { width: 20px; height: 20px; color: var(--brass); }

.prose { max-width: 68ch; color: var(--chalk-dim); font-size: var(--fs-base); line-height: var(--lh-body); padding-bottom: var(--sp-8); }

.prose h2 {
  font-family: var(--font-display);
  font-stretch: var(--wide-sm);
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--chalk);
  margin: var(--sp-7) 0 var(--sp-3);
  line-height: var(--lh-heading);
}

.prose h3 {
  font-family: var(--font-display);
  font-stretch: var(--wide-sm);
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--chalk);
  margin: var(--sp-5) 0 var(--sp-2);
  line-height: var(--lh-heading);
}

[dir="rtl"] .prose h2, [dir="rtl"] .prose h3 { font-family: var(--font-arabic); font-stretch: normal; }

.prose a { color: var(--brass); text-decoration: underline; text-underline-offset: 3px; }
.prose p, .prose li { margin-bottom: var(--sp-3); }
.prose ul, .prose ol { padding-inline-start: var(--sp-5); margin-bottom: var(--sp-4); }
.prose strong { color: var(--chalk); font-weight: 600; }

/* ========================== Responsive ========================== */
@media (max-width: 1080px) {
  .attract-stage { gap: var(--sp-5); padding: var(--sp-5); }
  .attract-desc { -webkit-line-clamp: 2; font-size: var(--fs-base); }
}

@media (max-width: 760px) {
  .hero { padding: var(--sp-5) 0 var(--sp-7); }

  /* stack: screen first, the way a cabinet reads — glass, then the plate */
  .attract-stage { grid-template-columns: 1fr; gap: var(--sp-5); padding: var(--sp-4); }
  .attract-screen { order: -1; }
  .attract-stage::before { background: rgba(8, 9, 12, 0.66); }
  [dir="rtl"] .attract-stage::before { background: rgba(8, 9, 12, 0.66); }
  .attract-info { gap: var(--sp-3); }
  .attract-foot { gap: var(--sp-4); width: 100%; }
  .specs { gap: var(--sp-4); }

  .catalog-controls { gap: var(--sp-3); }
  .search-field { flex: 1 1 100%; }

  /* 12 filters would wrap to four rows on a phone: make it a swipe strip */
  .filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: var(--sp-2);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .filters::-webkit-scrollbar { display: none; }

  .games-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-3); }
  .card-body { padding: var(--sp-3); gap: 6px; }
  .card-desc { display: none; }
}

@media (max-width: 420px) {
  .games-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
}

/* ---------------------- Studio contact ----------------------
   One address, stated plainly. A form that posts nowhere is worse than a
   mailto that works. */
.contact-block {
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-lg);
  background: var(--ink-raise);
  padding: var(--sp-7);
  max-width: 68ch;
}

.contact-title {
  font-family: var(--font-display);
  font-stretch: var(--wide-sm);
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-display);
  color: var(--chalk);
  margin: var(--sp-3) 0 var(--sp-3);
}

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

.contact-note { color: var(--chalk-dim); font-size: var(--fs-base); line-height: var(--lh-body); margin-bottom: var(--sp-5); }

.contact-mail {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 14px 20px;
  border: 1px solid var(--brass-deep);
  border-radius: var(--radius-sm);
  background: var(--brass-wash);
  color: var(--brass);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: all var(--transition-fast);
}

.contact-mail:hover { background: var(--brass); color: var(--on-brass); border-color: var(--brass); }
.contact-mail .icon { width: 16px; height: 16px; flex-shrink: 0; }
.contact-mail .arrow { transition: transform var(--transition-fast); }
.contact-mail:hover .arrow { transform: translateX(3px); }
[dir="rtl"] .contact-mail .arrow { transform: scaleX(-1); }
[dir="rtl"] .contact-mail:hover .arrow { transform: scaleX(-1) translateX(3px); }

.legal-date {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  color: var(--chalk-mute);
}

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

@media (max-width: 640px) {
  .contact-block { padding: var(--sp-5); }
  .contact-mail { width: 100%; justify-content: space-between; font-size: var(--fs-xs); }
}