/* The home screen, built to the round-4 mockup's HOME section.

   Loaded after majlis.css, which it deliberately overrides for the front
   door's own content — the mode cards, the stat strip, the join-code strip.
   The chrome it used to carry (mark, topbar, tabs, who-chip, .av) and the
   mockup's ground wash moved to shell.css when the shell became one
   implementation instead of the front door's private one; they were global in
   the mockup and they are global here. No other page links this file. */

.screen{display:block;animation:rise .42s cubic-bezier(.2,.75,.3,1)}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.eyebrow{
  font-size:10px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold);font-weight:500;
}
h1{
  font-family:var(--display);font-weight:900;
  font-size:clamp(34px,10vw,46px);line-height:.95;letter-spacing:-.025em;
  margin:12px 0 0;
}
h1 em{font-style:italic;font-weight:500;color:var(--gold-soft)}
.lede{color:var(--sand-dim);font-size:14.5px;line-height:1.55;margin:14px 0 0;max-width:34ch}
.rule{height:1px;background:linear-gradient(90deg,var(--line-2),transparent);margin:26px 0 20px}

.modes{display:grid;gap:13px}
.mode{
  position:relative;display:block;width:100%;text-align:left;
  font:inherit;color:inherit;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(160deg,rgba(23,74,62,.55),rgba(11,44,38,.75));
  padding:18px 18px 17px;overflow:hidden;
  transition:transform .22s cubic-bezier(.2,.8,.3,1),border-color .22s,box-shadow .22s;
}
.mode::before{
  content:"";position:absolute;inset:0;opacity:.9;pointer-events:none;
  background:radial-gradient(320px 160px at 100% 0%, var(--tint,rgba(216,165,60,.22)), transparent 70%);
}
.mode:hover{transform:translateY(-3px);border-color:var(--line-2);box-shadow:var(--shadow)}
.mode:active{transform:translateY(-1px) scale(.995)}
.mode[disabled]{opacity:.6;cursor:progress;transform:none}
.mode .top{position:relative;display:flex;align-items:center;gap:11px}
.mode .ico{
  width:38px;height:38px;flex:none;border-radius:11px;display:grid;place-items:center;
  border:1px solid var(--line-2);background:rgba(6,32,28,.5);
}
.mode .ico svg{width:20px;height:20px;display:block}
.mode h3{font-family:var(--display);font-weight:700;font-size:19px;margin:0;letter-spacing:-.01em}
.mode p{position:relative;margin:11px 0 0;font-size:13px;color:var(--sand-dim);line-height:1.5}
.mode .meta{
  position:relative;margin-top:13px;display:flex;gap:7px;flex-wrap:wrap;align-items:center;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--sand-dim);
}
.chip{
  border:1px solid var(--line);border-radius:999px;padding:3px 9px;
  background:rgba(6,32,28,.4);color:var(--sand-dim);
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
}
.chip.hot{border-color:rgba(226,86,74,.5);color:#f0a49c}
.chip.new{border-color:rgba(216,165,60,.55);color:var(--gold-soft)}
.chip.j{border-color:rgba(63,185,138,.5);color:var(--jade-soft)}
.arrow{margin-left:auto;color:var(--gold);font-size:19px;line-height:1;transition:transform .22s}
.mode:hover .arrow{transform:translateX(4px)}

/* The join strip. The mockup's Group bowl card is a single button, but this
   app has always had two ways into a room — open one, or type the four-letter
   code someone read out — and dropping the second would break the commonest
   path in. It sits under the cards in the same visual language. */
.joinstrip{
  margin-top:13px;border:1px solid var(--line);border-radius:var(--r);
  background:rgba(11,44,38,.62);padding:14px 16px 15px;
}
.joinstrip .lbl{
  display:block;font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--sand-dim);margin-bottom:11px;
}
.joinrow{display:flex;gap:8px;align-items:center}
.joincode{display:flex;gap:7px}
.joincode input{
  width:42px;height:46px;text-align:center;
  font-family:var(--display);font-weight:900;font-size:20px;
  color:var(--sand);background:rgba(6,32,28,.7);
  border:1px solid var(--line-2);border-radius:12px;
  text-transform:uppercase;caret-color:var(--gold);
}
.joincode input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(216,165,60,.16)}
.joinrow .go{
  margin-left:auto;font:inherit;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  padding:13px 16px;border-radius:12px;cursor:pointer;font-weight:600;
  color:#20180a;border:1px solid var(--gold);
  background:linear-gradient(150deg,var(--gold-soft),var(--gold) 60%,var(--gold-deep));
  box-shadow:0 10px 24px -12px rgba(216,165,60,.9);transition:.18s;
}
.joinrow .go:hover{transform:translateY(-2px)}

.stat-strip{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--line);
  margin-top:22px;
}
.stat-strip div{background:rgba(11,44,38,.75);padding:12px 10px;text-align:center}
.stat-strip b{
  display:block;font-family:var(--display);font-weight:900;font-size:20px;
  color:var(--gold-soft);font-variant-numeric:tabular-nums;
}
.stat-strip span{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--sand-dim)}

.ayah{
  margin-top:30px;text-align:center;opacity:.85;
  border:0;padding:0;background:none;display:block;
}
.ayah .ar{font-family:var(--arabic);font-size:23px;color:var(--gold-soft);line-height:1.9;direction:rtl}
.ayah .tr{font-size:11.5px;color:var(--sand-dim);letter-spacing:.06em;margin-top:5px;font-style:italic}

@media (max-width:400px){
  .joincode input{width:38px;height:44px;font-size:18px}
  .joinrow .go{padding:12px 12px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001s!important;transition-duration:.001s!important}
}