/* The app shell — the one chrome every screen mounts inside.

   This is the round-4 mockup's global ground (`body`, its two wash layers) and
   its chrome (`.topbar`, `.mark`, `.tabs`, `.who-chip`, `.av`, `.stage`),
   transcribed from the mockup and owned here rather than by any one page. The
   mockup is a single-file SPA where all of this is simply global; the app is
   several HTML pages, so "global" has to be a file every page loads. This is
   that file, and `shell.js` is its markup and behaviour.

   Load it LAST on every page, after majlis.css and after the page's own sheet.
   majlis.css carries an older chrome (`.topbar .brand`, its own `.tab`, its own
   `.av`) that the in-room host and player screens still use; those rules stay
   where they are so those screens keep working, and this file simply wins on
   the pages that mount the shell. When host and player are rebuilt onto the
   shell, the majlis.css chrome goes with them.

   Deliberately NOT here: `.screen`. Its display rule differs per page — home is
   always visible, solo swaps between four — so it belongs to the page. */

@import url("/tokens.css");

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--sand);
  font-family:var(--body);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(880px 620px at 10% -12%, rgba(216,165,60,.20), transparent 62%),
    radial-gradient(760px 700px at 96% 4%, rgba(63,185,138,.13), transparent 64%),
    radial-gradient(1100px 820px at 50% 118%, rgba(226,86,74,.11), transparent 62%);
}
body::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.55;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><g fill='none' stroke='%23f4ead7' stroke-opacity='0.085' stroke-width='1'><path d='M60 6 L74 32 L102 32 L88 60 L102 88 L74 88 L60 114 L46 88 L18 88 L32 60 L18 32 L46 32 Z'/><rect x='30' y='30' width='60' height='60' transform='rotate(45 60 60)'/><rect x='30' y='30' width='60' height='60'/><circle cx='60' cy='60' r='13'/><path d='M0 0 L120 120 M120 0 L0 120' stroke-opacity='0.04'/></g></svg>");
  background-size:172px 172px;
}
#app{position:relative;z-index:1}
::selection{background:var(--gold);color:#1b1305}

/* ---------- chrome ---------- */
.topbar{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:10px 14px;
  background:#08251f;
  border-bottom:1px solid var(--line);
  box-shadow:0 10px 30px -18px rgba(0,0,0,.9);
}
.mark{display:flex;align-items:center;gap:9px;margin-right:auto;text-decoration:none}
.mark .glyph{
  width:30px;height:30px;flex:none;border-radius:9px;
  background:linear-gradient(150deg,var(--gold-soft),var(--gold) 45%,var(--gold-deep));
  display:grid;place-items:center;box-shadow:0 6px 18px -6px rgba(216,165,60,.8);
}
.mark .glyph svg{width:19px;height:19px;display:block}
.mark b{
  font-family:var(--display);font-weight:900;font-size:17px;letter-spacing:-.01em;
  color:var(--sand);line-height:1;display:block;
}
.mark b i{font-style:normal;color:var(--gold)}
.mark small{
  display:block;font-size:8.5px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--sand-dim);margin-top:3px;
}

.tabs{display:flex;gap:5px;flex-wrap:wrap;order:3;width:100%}
.tab{
  font:inherit;font-size:12px;letter-spacing:.045em;
  padding:7px 13px;border-radius:999px;cursor:pointer;text-decoration:none;
  background:transparent;color:var(--sand-dim);
  border:1px solid var(--line);transition:.18s ease;
}
.tab:hover{color:var(--sand);border-color:var(--line-2);background:rgba(244,234,215,.04)}
.tab[aria-selected="true"]{
  background:var(--gold);color:#20180a;border-color:var(--gold);font-weight:600;
  box-shadow:0 6px 20px -8px rgba(216,165,60,.9);
}

.who-chip{
  display:flex;align-items:center;gap:8px;cursor:pointer;font:inherit;
  border:1px solid var(--line);background:rgba(6,32,28,.5);
  border-radius:999px;padding:4px 12px 4px 4px;color:var(--sand);transition:.18s;
  text-decoration:none;
}
.who-chip:hover{border-color:var(--line-2);background:rgba(244,234,215,.05)}
.who-chip.out{padding:6px 14px}
.who-chip .nm{font-size:12px;letter-spacing:.03em}

.av{
  width:26px;height:26px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-family:var(--display);font-weight:900;font-size:11px;letter-spacing:.02em;color:#20180a;
  background:linear-gradient(150deg,var(--gold-soft),var(--gold) 55%,var(--gold-deep));
  box-shadow:0 4px 12px -4px rgba(216,165,60,.9);
}
.av.j{background:linear-gradient(150deg,var(--jade-soft),var(--jade) 60%,#1d6b4d);box-shadow:none}
.av.c{background:linear-gradient(150deg,#f2a79f,var(--clay) 60%,var(--clay-deep));box-shadow:none;color:#fff2ef}
.av.n{background:linear-gradient(150deg,#cfd8d2,#93a49b 60%,#4e625a);box-shadow:none;color:#0b2c26}
.av.sm{width:22px;height:22px;font-size:9.5px}
.av.lg{width:44px;height:44px;font-size:16px;border-radius:14px}

/* The account menu behind the who-chip.
   The mockup's chip opens the settings sheet; that sheet is out of scope for
   this build (nothing persists settings yet), so rather than ship a chip that
   does nothing, it opens the one account action that is real today. */
.whowrap{position:relative;display:flex}
.whomenu{
  position:absolute;top:calc(100% + 8px);right:0;z-index:70;min-width:168px;
  border:1px solid var(--line-2);border-radius:14px;padding:6px;
  background:#0b2c26;box-shadow:var(--shadow);
}
.whomenu .nm{
  display:block;padding:7px 10px 8px;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sand-dim);
  border-bottom:1px solid var(--line);margin-bottom:5px;
}
.whomenu button{
  display:block;width:100%;text-align:left;font:inherit;font-size:13px;
  padding:8px 10px;border-radius:9px;border:0;background:transparent;
  color:var(--sand);cursor:pointer;transition:.15s;
}
.whomenu button:hover{background:rgba(244,234,215,.07);color:var(--gold-soft)}

/* ---------- layout ---------- */
.stage{max-width:440px;margin:0 auto;padding:26px 18px 130px}
.stage.wide{max-width:520px}

@media (prefers-reduced-motion:reduce){
  .tab,.who-chip,.whomenu button{transition-duration:.001s}
}