/* ==================================================================
   دمك عسل, shared foundation (white honeycomb)
   Palette: a clean white comb, warm cream light, honey for emphasis.
   ================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Aref+Ruqaa:wght@400;700&family=Lalezar&family=Tajawal:wght@400;500;700;900&display=swap');

:root {
  --ink-2:      #FFFFFF;
  --ink-3:      #F4E7CE;

  --honey:      #D08A06;
  --honey-lit:  #FFC94F;
  --honey-deep: #8C5300;
  --honey-ink:  #8A5200;   /* honey dark enough to set type in */

  --cream:      #2E1D10;
  --cream-dim:  #6E5940;

  --pistachio:  #3F7F2C;
  --rose:       #CE2340;

  --shadow:     rgba(120, 84, 24, 0.14);
  --hair:       rgba(46, 29, 16, 0.14);

  --face-logo: 'Aref Ruqaa', 'Tajawal', serif;
  --face-loud: 'Lalezar', 'Tajawal', system-ui, sans-serif;
  --face-body: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --edge: 2px solid rgba(208, 138, 6, 0.22);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--face-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  background-color: var(--ink);
}

/* ------------------------------------------------------------------
   Background. Two layers: hex outlines across the page, then a disc of
   the same yellow painted over the middle so the cards sit on flat
   colour. Tune with the variables below; line weight and colour are
   baked into the pattern itself.
   ------------------------------------------------------------------ */
:root {
  --ink: #FFD23F;
  --hex-tile: 96px 166px;      /* cell size */
  --spot: 24%;          /* how far the flat middle reaches */
  --fade: 38%;          /* how gradually it gives way to the pattern */
  --comb-img: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2734.641%27%20height%3D%2760%27%20viewBox%3D%270%200%2034.641%2060%27%3E%3Cpath%20d%3D%27M0.00%20-19.00L16.45%20-9.50L16.45%209.50L0.00%2019.00L-16.45%209.50L-16.45%20-9.50Z%27%20fill%3D%27none%27%20stroke%3D%27rgba%28140%2C86%2C0%2C0.55%29%27%20stroke-width%3D%272.6%27%2F%3E%3Cpath%20d%3D%27M34.64%20-19.00L51.09%20-9.50L51.09%209.50L34.64%2019.00L18.19%209.50L18.19%20-9.50Z%27%20fill%3D%27none%27%20stroke%3D%27rgba%28140%2C86%2C0%2C0.55%29%27%20stroke-width%3D%272.6%27%2F%3E%3Cpath%20d%3D%27M17.32%2011.00L33.77%2020.50L33.77%2039.50L17.32%2049.00L0.87%2039.50L0.87%2020.50Z%27%20fill%3D%27none%27%20stroke%3D%27rgba%28140%2C86%2C0%2C0.55%29%27%20stroke-width%3D%272.6%27%2F%3E%3Cpath%20d%3D%27M0.00%2041.00L16.45%2050.50L16.45%2069.50L0.00%2079.00L-16.45%2069.50L-16.45%2050.50Z%27%20fill%3D%27none%27%20stroke%3D%27rgba%28140%2C86%2C0%2C0.55%29%27%20stroke-width%3D%272.6%27%2F%3E%3Cpath%20d%3D%27M34.64%2041.00L51.09%2050.50L51.09%2069.50L34.64%2079.00L18.19%2069.50L18.19%2050.50Z%27%20fill%3D%27none%27%20stroke%3D%27rgba%28140%2C86%2C0%2C0.55%29%27%20stroke-width%3D%272.6%27%2F%3E%3C%2Fsvg%3E");
}

.comb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 47%,
    #FFD23F 0%,
    #FFD23F var(--spot),
    rgba(255, 210, 63, 0) calc(var(--spot) + var(--fade)));
}


/* ---- the signature: the comb, drifting very slowly -------------- */
.comb {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--comb-img);
  background-size: var(--hex-tile);
  animation: drift 140s linear infinite;
}

/* one full tile of travel, whatever the tile size */
@keyframes drift {
  from { background-position: 0 0; }
  to   { background-position: var(--hex-tile); }
}


/* ---- shared bits ------------------------------------------------ */
.stage { position: relative; z-index: 1; }

.eyebrow {
  font-family: var(--face-body);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  color: var(--honey-deep);
}

button { font-family: var(--face-body); font-weight: 700; cursor: pointer; border: none; }

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--honey-deep);
  outline-offset: 3px;
}

.btn {
  background: linear-gradient(180deg, var(--honey-lit), var(--honey));
  color: #3A1F00;
  border-radius: 999px;
  padding: 0.85rem 2rem;
  font-size: 1.05rem;
  box-shadow: 0 5px 0 var(--cream);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.btn:hover  { transform: translateY(-3px) rotate(-1deg); box-shadow: 0 8px 0 var(--cream); }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--cream); }
.btn:disabled {
  background: #EADCC0;
  color: #8A7455;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

.btn-ghost {
  background: transparent;
  color: var(--cream-dim);
  border: 2px solid var(--hair);
  border-radius: 999px;
  padding: 0.6rem 1.3rem;
  font-size: 0.9rem;
}
.btn-ghost:hover { color: var(--cream); border-color: var(--honey); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------------- games balance ----------------
   One definition, used by the big screen's corner and the front page's top
   bar. They looked like two different products before this. */
.games-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  /* No top margin: it would push this box down relative to anything sitting
     beside it, and the two would stop lining up. The room the badge overhangs
     into is given by whatever holds the pill. */
  margin: 0 0.55rem 0 0;
  padding: 0.4rem 1rem 0.5rem;
  /* the start corner belongs to the + badge, so the text begins after it */
  padding-inline-start: 1.9rem;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--honey-lit), var(--honey));
  border: 3px solid var(--cream);
  box-shadow: 4px 4px 0 var(--cream);
  font-family: var(--face-body);
  font-weight: 900;
  font-size: 1.05rem;
  /* near-black rather than honey, which measures 4.4:1 on the comb */
  color: #241608;
  white-space: nowrap;
}
/* Nothing left to start a game with, so it stops looking friendly. */
.games-pill.empty { background: var(--rose); color: #FFF6EC; }
.games-pill.out { background: rgba(255, 252, 245, 0.9); font-size: 0.95rem; }
.games-pill b { font-family: var(--face-loud); font-size: 1.35rem; line-height: 1; }

/* Rides the pill's start corner, which in RTL is the right. Sits clear of the
   text rather than on top of the first word. */
.games-plus {
  position: absolute;
  top: -1.05rem;
  inset-inline-start: -0.35rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--honey-ink);
  border: 3px solid var(--cream);
  color: #FFF6EC;
  text-decoration: none;
}
.games-plus svg { width: 0.95rem; height: 0.95rem; display: block; }
.games-plus:active { transform: translateY(2px); }

/* The way back. An icon in a circle, the same circle the badge uses. */
.icon-round {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: rgba(255, 252, 245, 0.9);
  border: 3px solid var(--cream);
  box-shadow: 3px 3px 0 var(--cream);
  color: #241608;
  text-decoration: none;
}
.icon-round svg { width: 1.25rem; height: 1.25rem; display: block; }
.icon-round:active { transform: translateY(2px); box-shadow: 1px 1px 0 var(--cream); }

/* Text sitting directly on yellow needs to be near-black, not honey. */
.eyebrow,
.tagline,
.lobby-note,
.join-url,
.tally,
.hostbar-hint { color: #241608; }
.wordmark { color: #241608; text-shadow: 0 5px 0 rgba(255,255,255,.85); }
/* muted text is not muted enough once it sits on yellow */
.who-note,
.who.empty .who-name,
.room-code,
.step { color: #4A3210; }