/* ==================================================================
   Front page. Mobile first, which is the opposite of the host screen:
   most visitors arrive on a phone holding a room code, not on a TV.
   Shares base.css for the palette, the comb and the fonts.
   ================================================================== */

.home {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

.home main {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 1.1rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 2.2rem;
}

/* ---------------- top bar ---------------- */
.topbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: calc(env(safe-area-inset-top) + 0.9rem) 1.1rem 0.9rem;
}
/* دخول sits at the start of the line, which in RTL is the right. Asked for
   top left, so it is pinned there explicitly. */
.topbar { flex-direction: row-reverse; }

.btn-login {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(255, 252, 245, 0.9);
  border: 2px solid var(--cream);
  border-radius: 999px;
  box-shadow: 2px 2px 0 var(--cream);
  padding: 0.6rem 1.3rem;
  font-family: var(--face-body);
  font-weight: 900;
  font-size: 1.45rem;
  color: #241608;
}
.btn-login:disabled {
  cursor: not-allowed;
  opacity: 0.75;
  box-shadow: 2px 2px 0 var(--cream);
  background: rgba(255, 252, 245, 0.75);
  color: #241608;
  transform: none;
}
.soon {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: var(--honey);
  color: #3A1F00;
  border-radius: 999px;
  padding: 0.1rem 0.45rem;
}

.topbar-mark {
  font-family: var(--face-logo);
  font-size: 1.5rem;
  color: var(--honey-ink);
  text-decoration: none;
  text-shadow: 1px 1px 0 var(--cream), -1px 1px 0 var(--cream),
               1px -1px 0 var(--cream), -1px -1px 0 var(--cream);
}

/* ---------------- hero ---------------- */
.hero { text-align: center; padding-top: 0.6rem; }

.home-mark {
  font-family: var(--face-logo);
  /* same treatment as the game: honey fill, dark edge, because honey alone
     measures 4.4:1 on the yellow and dissolves into the comb */
  font-size: clamp(3.4rem, 17vw, 6.5rem);
  line-height: 1.2;
  margin: 0;
  color: var(--honey-ink);
  text-shadow:
     2px  2px 0 var(--cream), -2px  2px 0 var(--cream),
     2px -2px 0 var(--cream), -2px -2px 0 var(--cream),
     0 5px 0 var(--cream);
}
.home-tag {
  font-family: var(--face-body);
  font-weight: 900;
  font-size: clamp(1.1rem, 4.4vw, 1.5rem);
  color: #241608;
  line-height: 1.45;
  margin: 0.7rem auto 0;
  max-width: 24ch;
}
.facts {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 0.5rem;
}
.facts li {
  background: rgba(255, 252, 245, 0.85);
  border: 2px solid var(--cream);
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: #241608;
}

/* ---------------- join by code ---------------- */
/* ---------------- start a room ---------------- */
.start { text-align: center; }
.btn-start {
  display: block;
  background: linear-gradient(180deg, var(--honey-lit), var(--honey));
  color: #3A1F00;
  border: 3px solid var(--cream);
  border-radius: var(--r-lg);
  box-shadow: 6px 6px 0 var(--cream);
  padding: 1rem 1.4rem;
  font-family: var(--face-loud);
  font-size: 2.2rem;
  text-decoration: none;
}
.btn-start:active { transform: translateY(3px); box-shadow: 3px 3px 0 var(--cream); }
.start-hint {
  /* pinned, because a paragraph carries 1em margins and this text is large
     enough that leaving them would open a gap the size of the button */
  margin: 0.7rem 0 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: #4A3210;
}

/* The code box is the fallback, so it reads quieter than the button above. */
.join {
  background: #FFFCF4;
  border: 3px solid var(--cream);
  border-radius: var(--r-lg);
  box-shadow: 6px 6px 0 var(--cream);
  padding: 1.3rem 1.1rem 1.1rem;
  text-align: center;
}
.join h2 {
  font-family: var(--face-loud);
  font-size: 1.25rem;
  margin: 0 0 0.8rem;
  color: var(--cream);
}
.join-form { display: flex; gap: 0.6rem; }
.code-input {
  flex: 1;
  min-width: 0;
  direction: ltr;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.35em;
  font-family: var(--face-loud);
  font-size: 1.9rem;
  padding: 0.6rem 0.5rem;
  background: #fff;
  border: 3px solid var(--cream);
  border-radius: var(--r-md);
  color: var(--honey-ink);
}
.code-input::placeholder { color: #C9B48A; letter-spacing: 0.35em; }
.btn-go {
  background: linear-gradient(180deg, var(--honey-lit), var(--honey));
  color: #3A1F00;
  border: 0;
  border-radius: var(--r-md);
  box-shadow: 0 4px 0 var(--cream);
  padding: 0 1.3rem;
  font-family: var(--face-body);
  font-weight: 900;
  font-size: 1.1rem;
}
.btn-go:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--cream); }
.join-hint {
  margin: 0.7rem 0 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--cream-dim);
}
.join-hint.bad { color: var(--rose); }

/* ---------------- the offer ---------------- */
.offer { text-align: center; }
.offer-line {
  font-family: var(--face-loud);
  font-size: clamp(1.5rem, 6vw, 2.1rem);
  color: #241608;
  margin: 0;
}
.offer-note {
  margin: 0.3rem 0 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: #4A3210;
}

/* ---------------- how to play ---------------- */
.how h2, .samples h2 {
  font-family: var(--face-loud);
  font-size: clamp(1.7rem, 6.5vw, 2.3rem);
  color: #241608;
  text-align: center;
  margin: 0 0 1rem;
}
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.step-card {
  display: flex;
  gap: 0.9rem;
  background: #FFFCF4;
  border: 3px solid var(--cream);
  border-radius: var(--r-lg);
  box-shadow: 5px 5px 0 var(--cream);
  padding: 1rem;
}
.step-num {
  flex: none;
  width: 2.4rem; height: 2.4rem;
  display: grid; place-content: center;
  background: linear-gradient(180deg, var(--honey-lit), var(--honey));
  border: 3px solid var(--cream);
  border-radius: 999px;
  font-family: var(--face-loud);
  font-size: 1.3rem;
  color: #3A1F00;
}
.step-card h3 {
  font-family: var(--face-body);
  font-weight: 900;
  font-size: 1.15rem;
  margin: 0.2rem 0 0.3rem;
  color: var(--cream);
}
.step-card p { margin: 0; font-size: 0.98rem; line-height: 1.5; color: #4A3210; font-weight: 700; }

/* Little mock ups of the real screens, built from the same palette rather
   than bitmaps, so they cannot go stale when the game changes. */
.shot {
  margin-top: 0.7rem;
  border: 2px dashed rgba(46, 29, 16, 0.25);
  border-radius: var(--r-md);
  padding: 0.7rem;
  background: rgba(255, 210, 63, 0.18);
}
.shot-code { text-align: center; }
.shot-label { display: block; font-size: 0.72rem; font-weight: 900; letter-spacing: 0.16em; color: #4A3210; }
.shot-code-text {
  display: block;
  direction: ltr;
  font-family: var(--face-loud);
  font-size: 2rem;
  letter-spacing: 0.3em;
  color: var(--honey-ink);
}
.shot-phone { background: #fff; }
.shot-q { margin: 0 0 0.5rem; font-family: var(--face-loud); font-size: 1.05rem; color: var(--cream); }
.shot-field {
  display: block;
  border: 2px solid rgba(208, 138, 6, 0.35);
  border-radius: var(--r-sm);
  padding: 0.45rem 0.6rem;
  color: #A8926C;
  font-size: 0.9rem;
}
.shot-reveal { display: flex; flex-direction: column; gap: 0.4rem; }
.shot-answer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #fff;
  border: 2px solid var(--cream);
  border-radius: var(--r-sm);
  padding: 0.4rem 0.6rem;
  font-size: 0.9rem;
  font-weight: 700;
}
.shot-answer.dim { opacity: 0.6; }
.shot-who { font-size: 0.78rem; color: var(--cream-dim); }
.shot-text { flex: 1; color: var(--cream); }
.shot-score { font-family: var(--face-loud); color: var(--honey-ink); }

/* ---------------- sample prompts ---------------- */
.sample-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.sample-list li {
  background: #FFFCF4;
  border: 3px solid var(--cream);
  border-radius: 18px;
  box-shadow: 4px 4px 0 var(--cream);
  padding: 0.8rem 1rem;
  font-family: var(--face-loud);
  font-size: 1.15rem;
  line-height: 1.4;
  color: var(--cream);
  text-align: center;
}

/* ---------------- footer ---------------- */
.home-foot {
  position: relative;
  z-index: 1;
  margin-top: auto;
  display: flex;
  justify-content: center;
  gap: 1.3rem;
  padding: 1.2rem 1rem calc(env(safe-area-inset-bottom) + 1.2rem);
  font-size: 0.95rem;
  font-weight: 700;
}
.home-foot a { color: #241608; text-decoration: none; border-bottom: 2px solid rgba(46,29,16,0.25); }
.home-foot a:hover { border-bottom-color: var(--honey-deep); }

/* ---------------- wider screens ---------------- */
@media (min-width: 720px) {
  .home main { gap: 2.8rem; padding-bottom: 3rem; }
  .steps { gap: 1.2rem; }
  .sample-list { flex-direction: row; }
  .sample-list li { flex: 1; }
}

/* ---------------- simple content pages ---------------- */
.page {
  background: #FFFCF4;
  border: 3px solid var(--cream);
  border-radius: var(--r-lg);
  box-shadow: 6px 6px 0 var(--cream);
  padding: 1.3rem 1.1rem;
}
.page h1 {
  font-family: var(--face-loud);
  font-size: clamp(1.9rem, 7vw, 2.6rem);
  margin: 0 0 0.6rem;
  color: var(--cream);
}
.page-lead { margin: 0; font-size: 1.05rem; font-weight: 700; line-height: 1.5; color: var(--cream); }
.page-note { margin: 1rem 0 0; font-size: 0.95rem; font-weight: 700; line-height: 1.6; color: #4A3210; }

.contact-card {
  margin-top: 1.1rem;
  background: rgba(255, 210, 63, 0.2);
  border: 2px dashed rgba(46, 29, 16, 0.25);
  border-radius: var(--r-md);
  padding: 0.9rem 1rem;
}
.contact-label {
  margin: 0 0 0.2rem;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  color: #4A3210;
}
.contact-value {
  direction: ltr;
  display: block;
  text-align: right;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 1.05rem;
  color: var(--honey-ink);
  word-break: break-all;
}

/* signed in / signed out slot in the top bar */
.login-slot { display: flex; align-items: center; gap: 0.6rem; }
a.btn-login { text-decoration: none; }
.offer-note.bad { color: var(--rose); }

/* Signed in the two ends split the work: the account on the left, the money
   on the right. Nothing sits in the middle. */
.topbar-right { display: flex; align-items: center; gap: 0.5rem; }
body.signed-in .topbar-right .topbar-mark { display: none; }
/* The balance pill and its badge come from base.css, shared with the big
   screen. The padding is the room the badge overhangs into, the same trick the
   big screen's corner uses, so the badge does not touch the top of the page. */
.topbar-right .games-pill { flex: none; }
body.signed-in .topbar-right { padding-top: 0.55rem; }

/* The name is the control. Clicking it drops the one thing under it. */
.account { position: relative; }
.who-in {
  position: relative;
  display: inline-flex;
  align-items: center;
  /* The name is centred in the pill, so the caret cannot take space in the
     line or it would push the name off centre. It is lifted out of the flow
     and the padding on its side (set below, after the shorthand) is what
     keeps them from touching. */
  justify-content: center;
  background: rgba(255, 252, 245, 0.9);
  border: 2px solid var(--cream);
  border-radius: 999px;
  box-shadow: 2px 2px 0 var(--cream);
  padding: 0.42rem 0.85rem;
  /* after the shorthand, or the shorthand resets it and the caret lands on
     top of the name. Equal on both sides: the name centres inside the padding
     box, so uneven padding is uneven centring. */
  padding-inline: 1.7rem;
  font-family: var(--face-body);
  font-weight: 900;
  font-size: 1.05rem;
  color: #241608;
}
/* The name truncates, the caret does not: it has to stay visible or the menu
   looks like a plain label. */
.who-name {
  max-width: 10ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.caret {
  position: absolute;
  inset-inline-end: 0.75rem;
  top: 50%;
  translate: 0 -50%;
  width: 0.72rem;
  height: 0.48rem;
  opacity: 0.85;
}
.account-menu {
  position: absolute;
  top: calc(100% + 0.4rem);
  /* In RTL inline-start is the right edge, and anchoring there sends the menu
     leftwards off the screen, which drags the whole page sideways. Anchor the
     end instead so it opens inward from the button's left edge. */
  inset-inline-end: 0;
  z-index: 5;
  background: #FFFCF4;
  border: 2px solid var(--cream);
  border-radius: var(--r-md);
  box-shadow: 3px 3px 0 var(--cream);
  padding: 0.3rem;
  min-width: 7rem;
}
.account-menu[hidden] { display: none; }
.account-menu button {
  display: block;
  width: 100%;
  background: none;
  border: 0;
  border-radius: calc(var(--r-md) - 3px);
  padding: 0.5rem 0.8rem;
  font-family: var(--face-body);
  font-weight: 900;
  font-size: 1rem;
  color: #241608;
  text-align: start;
}
.account-menu button:hover { background: var(--honey); }

/* Once you are in, "سجل و اخذ لعبة بلاش" is an advert for something you have
   already done, and the corner needs the room for the balance. The note line
   below it stays, because the buy button talks through it. */
body.signed-in .offer-mini-line { display: none; }
/* The note is a full sentence and the corners are not. Left in the flex line
   it forces a wrap that drops the balance onto a second row, so signed in it
   comes out of the line entirely and sits centred under the bar. */
body.signed-in .offer-mini {
  position: absolute;
  top: 100%;
  inset-inline: 0;
  text-align: center;
}
body.signed-in .hero { padding-top: 1.6rem; }
body.signed-in .login-slot { gap: 0.45rem; }
body.signed-in .offer-mini .offer-note { font-size: 0.82rem; }

/* ---------------- the offer, now beside دخول ---------------- */
.login-group {
  display: flex;
  /* reversed, because inside an RTL row the first child lands on the right and
     دخول is meant to be the leftmost thing on the page */
  flex-direction: row-reverse;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}
.offer-mini { display: flex; flex-direction: column; min-width: 0; }
.offer-mini-line {
  font-family: var(--face-body);
  font-weight: 900;
  font-size: 1rem;
  line-height: 1.25;
  color: #241608;
}
.offer-mini .offer-note {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
  color: #4A3210;
}

/* On a narrow phone the bar carries the button, the offer and the wordmark,
   so let it fall onto two lines rather than squeezing any of them. */
@media (max-width: 460px) {
  .topbar { flex-wrap: wrap; }
  .offer-mini-line { font-size: 0.92rem; }
  /* Signed out, دخول and the offer take the whole line. The small wordmark is
     the one thing that can go: the hero carries a large one right beneath it. */
  .topbar-mark { display: none; }
  /* Signed in, the name is the left corner and has to stay. It is the only
     way to reach طلعني, so it gives up width instead. */
  body.signed-in .who-name { max-width: 8ch; }
  body.signed-in .who-in { font-size: 0.95rem; }
  /* The pill carries a whole phrase, so a narrow phone gets a smaller one
     rather than a wrapped or clipped corner. */
  body.signed-in .games-pill {
    font-size: 0.85rem;
    padding: 0.3rem 0.7rem 0.4rem;
    padding-inline-start: 1.75rem;
  }
  body.signed-in .games-pill b { font-size: 1.1rem; }
}