/* Single-player hub (/single/) and game pages (/single/<game>/). Loads after guides.v1.css and reuses its tokens. */
:root {
  --paper: #f3e6cc;
  --tape: rgba(255, 226, 140, 0.82);
  --play: var(--lime);
  --play-ink: #0b0d05;
}

.single-main { padding-bottom: 56px; }
.single-intro { max-width: 720px; }
.single-intro .guide-lead { margin-bottom: 28px; }

/* Play buttons: one look everywhere on these pages */
.single-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: var(--radius);
  background: var(--play);
  color: var(--play-ink);
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}
.single-play::before {
  content: "";
  width: 0;
  height: 0;
  border-block: 7px solid transparent;
  border-inline-end: 11px solid currentColor; /* in RTL this is the left border, so the triangle points right like a media play icon */
}
.single-play:hover { background: var(--accent); color: #170b05; }
.single-play--big { min-height: 56px; padding: 0 30px; font-size: 18px; }
.single-play--quiet { background: transparent; color: var(--text); border: 1px solid var(--line-strong); }
.single-play--quiet:hover { background: var(--surface-raised); color: var(--lime); }

.play-more { color: var(--text-soft); font-size: 14px; font-weight: 700; text-decoration: none; }
.play-more:hover { color: var(--lime); }
.play-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: auto; }
.play-actions--hero { margin: 8px 0 22px; }
.play-note { color: var(--muted); font-size: 13px; }

.play-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; padding: 0; list-style: none; }
.play-facts li { margin: 0; padding: 2px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--text-soft); font-size: 13px; }
.play-facts li:first-child { border-color: rgba(201, 240, 75, 0.45); color: var(--lime); font-weight: 700; }

/* Game art: the games are paper-craft, so the art sits on a paper card with tape */
.play-art {
  position: relative;
  display: block;
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}
.play-art img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); }
.play-art::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: -10px;
  inset-inline-end: 22px;
  width: 86px;
  height: 24px;
  background: var(--tape);
  transform: rotate(4deg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.play-icon {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(11, 13, 5, 0.72);
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 180ms ease, transform 180ms ease;
}
.play-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0;
  height: 0;
  border-block: 14px solid transparent;
  border-inline-end: 22px solid var(--lime);
  transform: translateX(3px);
}
.play-art:hover .play-icon, .play-art:focus-visible .play-icon { opacity: 1; transform: none; }
.play-badge {
  position: absolute;
  z-index: 1;
  top: 12px;
  inset-inline-start: 12px;
  padding: 2px 12px;
  border-radius: 6px;
  background: var(--accent);
  color: #170b05;
  font-size: 13px;
  font-weight: 800;
  transform: rotate(-2deg);
}
html:not([data-touch]) .play-art { transition: transform 200ms ease; }
@media (hover: hover) { .play-art:hover { transform: translateY(-3px) rotate(-0.4deg); } }

/* Continue strip: shown only when this browser has saved progress */
.continue-strip {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 32px;
  padding: 12px 16px 12px 12px;
  border: 1px solid rgba(201, 240, 75, 0.4);
  border-radius: var(--radius);
  background: var(--surface-raised);
}
.continue-strip[hidden] { display: none; }
.continue-strip img { flex: none; width: 96px; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 6px; }
.continue-strip p { display: grid; flex: 1; gap: 2px; margin: 0; line-height: 1.6; }
.continue-strip span { color: var(--text-soft); font-size: 14px; }

/* Hub grid */
.single-section-title { margin-top: 0 !important; }
.single-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.play-card { display: flex; flex-direction: column; min-width: 0; gap: 18px; }
.play-card--featured { grid-column: span 2; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: 28px; padding: 20px; border: 1px solid var(--line); border-radius: calc(var(--radius) + 4px); background: var(--surface); }
.play-card:not(.play-card--featured) { padding: 20px; border: 1px solid var(--line); border-radius: calc(var(--radius) + 4px); background: var(--surface); }
.play-copy { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.play-genre { margin: 0 0 2px !important; color: var(--muted); font-size: 13px; }
.play-copy h3 { margin: 0 0 8px; font-size: 24px; line-height: 1.5; }
.play-card:not(.play-card--featured) h3 { font-size: 20px; }
/* A full-width row card under the main grid (e.g. أنا الدافور's solo mode) */
.play-card--row { grid-column: 1 / -1; display: grid; grid-template-columns: 240px minmax(0, 1fr); align-items: center; gap: 24px; }
.play-copy h3 a { color: var(--text); text-decoration: none; }
.play-copy h3 a:hover { color: var(--lime); }
.play-description { color: var(--text-soft); font-size: 15px; line-height: 1.9; }

.single-party { margin-top: 56px; padding: 22px 24px; border: 1px dashed var(--line-strong); border-radius: var(--radius); }
.single-party h2 { margin-top: 0 !important; }
.single-party p:last-child { margin-bottom: 0; }

/* FAQ */
.faq-stack { display: grid; gap: 10px; }
.faq-stack details { padding: 4px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.faq-stack summary { display: flex; align-items: center; min-height: 52px; font-weight: 800; cursor: pointer; }
.faq-stack details p { margin: 0 0 16px; color: var(--text-soft); font-size: 15px; }

/* Game page */
.game-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: 40px; margin-bottom: 16px; }
.game-hero h1 { margin-bottom: 12px !important; }
.game-hero .play-facts { margin-bottom: 0; }
.game-hero-art .play-icon { opacity: 1; transform: none; background: rgba(11, 13, 5, 0.6); }
.words-section { max-width: 820px; }
.words-stars p { margin-bottom: 0; }
.route { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 0; padding: 0 !important; list-style: none; counter-reset: stop; }
.route li { counter-increment: stop; margin: 0 !important; padding: 4px 12px; border-radius: 6px; background: var(--paper); color: #3b2a14; font-size: 14px; font-weight: 700; }
.route li:nth-child(3n+1) { transform: rotate(-1.2deg); }
.route li:nth-child(3n+2) { transform: rotate(0.8deg); }
.route li::before { content: counter(stop); margin-inline-end: 6px; color: #9a7a4a; font-size: 12px; }
/* رحلة المليون points ladder: the two safe points stand out */
.ladder-route li.safe { background: #f5b700; color: #1a1200; }
.ladder-route li.safe::before { color: #6b4a00; }
.words-devices { display: grid; grid-template-columns: minmax(0, 1fr) 220px; align-items: center; gap: 32px; max-width: 920px; }
.words-phone { width: 220px; border-radius: 26px; border: 6px solid #1d1d24; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5); transform: rotate(2deg); }
kbd { display: inline-block; padding: 0 6px; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 5px; background: var(--surface-raised); color: var(--text); font: 700 12px/1.8 ui-monospace, monospace; direction: ltr; }
.words-credit { color: var(--muted); font-size: 13px; }

@media (max-width: 900px) {
  .single-grid { grid-template-columns: 1fr; }
  .play-card--featured { grid-column: auto; grid-template-columns: 1fr; gap: 18px; }
  .game-hero { grid-template-columns: 1fr; gap: 24px; }
  .game-hero-art { order: -1; }
}
@media (max-width: 720px) {
  .play-card--featured, .play-card:not(.play-card--featured) { padding: 14px; }
  .play-copy h3 { font-size: 21px; }
  .play-card--row { grid-template-columns: 1fr; gap: 18px; }
  .single-play--big { width: 100%; }
  .play-actions--hero { gap: 8px; }
  .words-devices { grid-template-columns: 1fr; }
  .words-phone { width: 180px; margin: 0 auto; transform: none; }
  .continue-strip { flex-wrap: wrap; padding: 12px; }
  .continue-strip img { width: 72px; }
  .continue-strip .single-play { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .play-art, .play-icon { transition: none !important; }
  .play-art:hover { transform: none !important; }
}

/* Game pages (lean template, 5 Nov 2026): the game sits right under the title.
   Desktop: clicking the cover loads the game into the page (single-embed.v1.js). Phones/tablets: the same link opens it full screen. */
.game-head { max-width: 760px; margin-bottom: 18px; }
.game-head h1 { margin-bottom: 8px !important; }
.game-head .guide-lead { margin-bottom: 0; }
.game-stage { width: min(1600px, calc(100vw - 32px)); margin: 0 calc(50% - min(800px, calc(50vw - 16px))) 32px; }
/* Leave room below the frame for its controls, even on short screens. */
.game-stage-screen { position: relative; width: min(100%, calc(150svh - 192px)); aspect-ratio: 3 / 2; margin-inline: auto; overflow: hidden; scroll-margin-top: 16px;
  border: 1px solid var(--line); border-radius: calc(var(--radius) + 4px); background: #050507; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); }
.game-launch { position: absolute; inset: 0; display: block; color: var(--text); text-decoration: none; }
.game-launch img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease, filter 0.4s ease; }
.game-launch::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(5, 5, 7, 0.72), rgba(5, 5, 7, 0) 55%); }
.game-launch-cta { position: absolute; z-index: 1; inset-inline: 0; bottom: 24px; display: flex; justify-content: center; }
.game-launch-cta .single-play { min-height: 58px; padding: 0 34px; font-size: 19px; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45); }
.game-launch:hover img, .game-launch:focus-visible img { transform: scale(1.02); filter: brightness(1.06); }
.game-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #050507; }
.game-stage-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; width: min(100%, calc(150svh - 192px)); margin: 12px auto 0; }
.game-stage-bar .play-facts { margin: 0; }
.game-stage-tools { display: flex; align-items: center; gap: 16px; }
.game-fullscreen { min-height: 40px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: transparent; color: var(--text); font: inherit; font-size: 14px; cursor: pointer; }
.game-fullscreen:hover { color: var(--lime); border-color: var(--lime); }
.game-stage-screen:fullscreen { width: 100%; height: 100%; aspect-ratio: auto; border: 0; border-radius: 0; }
.game-steps { max-width: 760px; }
@media (max-width: 720px) {
  .game-stage-screen { border-radius: var(--radius); }
  .game-launch-cta { bottom: 14px; }
  .game-launch-cta .single-play { min-height: 50px; font-size: 17px; }
}

/* Coming soon (game not uploaded yet): cover without a link, a quiet «قريباً» label, no play buttons */
.soon-pill { display: inline-flex; align-items: center; min-height: 44px; padding: 0 22px; border-radius: 999px; background: rgba(9, 9, 13, 0.82);
  border: 1px solid var(--line-strong); color: var(--text); font-size: 17px; font-weight: 700; letter-spacing: 0.01em; }
.game-stage--soon .game-launch img { filter: saturate(0.75) brightness(0.8); }
.soon-note { margin: 0; color: var(--text-soft); font-size: 14px; }
.play-card--soon .play-art img { filter: saturate(0.7) brightness(0.78); }
.play-card--soon .play-badge { background: var(--surface-raised); color: var(--text); }
.play-actions .soon-pill { min-height: 40px; padding: 0 16px; font-size: 15px; background: transparent; }