/* Home page: an evening lounge. One dark plum room, brass for anything you
   can press or own, ivory for words, and the illustrated crocodile as the
   only loud thing on the page. Loaded by the home page only; it restyles
   what style.css draws there and changes nothing else. */
body.lounge {
  --plum: #170d2e; --velvet: #24143f; --velvet-hi: #2f1c52; --line: rgba(226, 180, 76, .28);
  --brass: #e2b44c; --brass-hi: #f3d488; --brass-deep: #8a6416; --ivory: #f6efe1; --ivory-dim: rgba(246, 239, 225, .68);
  color: var(--ivory);
  background: radial-gradient(120% 60% at 50% -10%, #3a2168 0, rgba(58, 33, 104, 0) 70%), var(--plum);
  background-size: auto;
}
html:has(body.lounge) { background: #170d2e; }

/* words are plain lettering here, not outlined game titles */
body.lounge .brand, body.lounge .hero-title, body.lounge .title, body.lounge .ribbon, body.lounge .btn,
body.lounge .badge-label, body.lounge .chip, body.lounge .game-card strong, body.lounge .game-card .price { text-shadow: none; }

/* the order of the page: games first, account after them */
body.lounge main { display: flex; flex-direction: column; padding-top: 8px; }
body.lounge #scan { order: 0; } body.lounge #phone { order: 1; } body.lounge #games { order: 2; }
body.lounge #more-games { order: 3; } body.lounge .badges { order: 4; } body.lounge #wallet { order: 5; }
body.lounge #bundles { order: 6; } body.lounge #account { order: 7; } body.lounge #album { order: 8; }

/* top bar */
body.lounge .top { background: rgba(23, 13, 46, .92); border-bottom: 1px solid var(--line); padding-bottom: 10px; }
body.lounge .brand { color: var(--brass); font-weight: 800; font-size: 1.4rem; letter-spacing: 0; }
body.lounge .wallets { gap: 10px; padding-inline-end: 0; }
body.lounge .pill { min-width: 0; height: 34px; padding: 0 12px 0 34px; gap: 6px; color: var(--ivory); font-weight: 800; font-size: 1rem;
  background: var(--velvet); box-shadow: inset 0 0 0 1px var(--line); }
body.lounge .pill img { left: 6px; width: 24px; height: 24px; filter: none; }

/* hero: the picture is the page's one loud thing; words sit at its foot */
body.lounge .hero { margin-top: 6px; aspect-ratio: 4 / 5; border-radius: 22px; text-align: start;
  box-shadow: inset 0 0 0 1px var(--line), 0 18px 40px rgba(0, 0, 0, .45); }
body.lounge .hero::before { content: ""; position: absolute; inset: 34% 0 0 0;
  background: linear-gradient(180deg, rgba(23, 13, 46, 0) 0, rgba(23, 13, 46, .78) 48%, rgba(23, 13, 46, .96) 100%); }
body.lounge .hero-croc { bottom: 47%; height: 42%; margin-left: -21%; animation: none; filter: drop-shadow(0 14px 14px rgba(0, 0, 0, .5)); }
body.lounge .hero-title { position: absolute; top: auto; bottom: 34%; left: 20px; right: 20px; color: var(--ivory);
  font-size: 2rem; font-weight: 800; line-height: 1.15; }
body.lounge .hero-cta { bottom: 20px; padding: 0 20px; }
body.lounge .chip { display: block; margin: 0 0 4px; padding: 0; border: 0; border-radius: 0; background: none;
  color: var(--brass-hi); font-weight: 700; font-size: 1rem; }
body.lounge .how-link { margin: 0 0 14px; color: var(--ivory-dim); font-weight: 600; font-size: .9rem; }
body.lounge .hero-kinds { gap: 10px; }

/* buttons: flat brass for the thing to do, a brass outline for the other choice */
body.lounge .btn { border-radius: 14px; padding: 12px 18px; font-weight: 800; font-size: 1.05rem; color: #2a1a02;
  background: linear-gradient(180deg, var(--brass-hi), var(--brass)); box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 6px 16px rgba(0, 0, 0, .35); transform: none; }
body.lounge .btn:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 2px 6px rgba(0, 0, 0, .35); }
body.lounge .btn-gold.btn-kind { color: var(--brass-hi); background: rgba(23, 13, 46, .55); box-shadow: inset 0 0 0 1.5px var(--brass); }
body.lounge .btn[disabled] { color: rgba(246, 239, 225, .45); background: var(--velvet-hi); box-shadow: inset 0 0 0 1px var(--line); }
body.lounge .btn:focus-visible, body.lounge .game-card:focus-visible, body.lounge .kind:focus-visible, body.lounge .badge:focus-visible, body.lounge .vs-door:focus-visible {
  outline: 2px solid var(--brass-hi); outline-offset: 3px; }

/* play with friends: one quiet row */
body.lounge #more-games { margin-top: 22px; }
body.lounge .vs-door { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; padding: 14px 16px;
  border-radius: 16px; text-decoration: none; color: var(--ivory); background: var(--velvet); border: 0; box-shadow: inset 0 0 0 1px var(--line); }
body.lounge .vs-door b { display: block; font-size: 1.1rem; font-weight: 800; color: var(--ivory); text-shadow: none; }
body.lounge .vs-door small { display: block; color: var(--ivory-dim); font-size: .85rem; font-weight: 500; text-shadow: none; }
body.lounge .vs-door > span { flex: none; padding: 6px 16px; border-radius: 999px; font-weight: 800; font-size: .95rem; color: #2a1a02;
  background: var(--brass); box-shadow: none; text-shadow: none; }
body.lounge .new-game { margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; text-align: start; font-weight: 700; font-size: .95rem;
  color: var(--brass-hi); background: none; box-shadow: inset 0 0 0 1px var(--line); }

/* the two shelves: plain words, a brass rule under the one you are on */
body.lounge .kinds { gap: 0; padding: 0; margin: 6px 0 16px; border-radius: 0; background: none; box-shadow: inset 0 -1px 0 var(--line); }
body.lounge .kind { padding: 10px 4px 12px; border-radius: 0; font-weight: 700; font-size: 1.05rem; color: var(--ivory-dim); }
body.lounge .kind.on { color: var(--ivory); background: none; box-shadow: inset 0 -3px 0 var(--brass); }

/* a game is a poster: its picture, its name, and where you are in it */
body.lounge .game-list { gap: 12px; }
body.lounge .game-card, body.lounge .game-card:nth-child(n) { display: flex; flex-direction: column; gap: 0; padding: 8px 8px 10px; margin-top: 0; border-radius: 18px; text-align: start;
  background: var(--velvet); box-shadow: inset 0 0 0 1px var(--line); }
body.lounge .game-card:active { transform: none; background: var(--velvet-hi); }
body.lounge .game-card img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 12px; filter: none; background: var(--velvet-hi); }
body.lounge .game-card strong { margin: 10px 4px 8px; color: var(--ivory); font-weight: 800; font-size: 1rem; line-height: 1.25; }
body.lounge .stage-badge { align-self: flex-start; margin: -6px 4px 8px; padding: 0; border-radius: 0; background: none; color: var(--brass); font-weight: 700; font-size: .82rem; }
body.lounge .game-card .price { margin: auto 0 0; margin-top: auto; padding: 7px 10px; border-radius: 10px; text-align: center; font-weight: 800; font-size: .95rem;
  color: #2a1a02; background: var(--brass); box-shadow: none; }
body.lounge .game-card.locked img { filter: grayscale(.9) brightness(.55); }
body.lounge .game-card .lock { top: calc(8px + (100% - 16px) * .22); font-size: 1.6rem; filter: none; }
body.lounge .game-card .price.unlock { color: var(--brass-hi); background: none; box-shadow: inset 0 0 0 1.5px var(--brass); font-size: .88rem; }
body.lounge .game-card .price.unlock.sure { color: #2a1a02; background: var(--brass-hi); box-shadow: none; }
body.lounge .game-card .unlock-note { margin: 4px 4px 0; color: var(--ivory-dim); font-size: .8rem; }
body.lounge .game-card .fresh { top: 14px; inset-inline-start: 14px; padding: 1px 10px 2px; transform: none; font-weight: 800; font-size: .75rem;
  color: #2a1a02; background: var(--ivory); box-shadow: none; }

/* shortcuts under the games */
body.lounge .badges { justify-content: stretch; gap: 10px; margin: 22px 0 0; }
body.lounge .badge { flex: 1; width: auto; display: flex; align-items: center; justify-items: start; gap: 10px; padding: 10px 14px; border-radius: 14px;
  background: var(--velvet); box-shadow: inset 0 0 0 1px var(--line); }
body.lounge .badge-art { width: 30px; height: 30px; border-radius: 0; background: none; box-shadow: none; }
body.lounge .badge-art img { width: 30px; height: 30px; filter: none; }
body.lounge .badge-label { margin: 0; padding: 0; background: none; box-shadow: none; color: var(--ivory); font-weight: 700; font-size: .95rem; }
body.lounge .badge:active .badge-art { transform: none; }

/* panels: account, coins, pack code, saved number */
body.lounge .frame { margin-top: 22px; padding: 18px 16px; border-radius: 18px; background: var(--velvet); box-shadow: inset 0 0 0 1px var(--line); }
body.lounge .ribbon { width: auto; max-width: none; margin: 0 0 8px; padding: 0; border-radius: 0; background: none; box-shadow: none;
  color: var(--ivory); font-size: 1.15rem; font-weight: 800; text-align: start; }
body.lounge .frame-body { padding: 0; border-radius: 0; background: none; box-shadow: none; color: var(--ivory); }
body.lounge .muted, body.lounge .muted.on-dark { color: var(--ivory-dim); margin-inline: 0; }
body.lounge .title { margin: 26px 0 10px; color: var(--ivory); font-size: 1.15rem; font-weight: 800; }
body.lounge #account .btn-account { color: #1d1330; background: var(--ivory); border: 0; box-shadow: none; border-radius: 12px; font-weight: 700; }
body.lounge #account .account-who { color: var(--brass-hi); }
body.lounge #account .btn-link { color: var(--ivory-dim); }
body.lounge .bar { background: rgba(246, 239, 225, .12); box-shadow: none; }
body.lounge .bar > div { background: var(--brass); box-shadow: none; }
body.lounge .coin-row strong { color: var(--ivory); }
body.lounge .foot { color: rgba(246, 239, 225, .45); }
body.lounge .foot-links a { color: var(--brass-hi); font-weight: 600; }

@media (min-width: 560px) { body.lounge .hero { aspect-ratio: 16 / 13; } body.lounge .game-list { grid-template-columns: repeat(3, 1fr); } }

/* ---------- the same room on the other pages ---------- */

/* reading pages: how to play, privacy */
body.lounge.page .frame-body h2 { margin: 20px 0 6px; color: var(--brass-hi); font-size: 1.05rem; font-weight: 800; }
body.lounge.page .frame-body p, body.lounge.page .frame-body li { color: var(--ivory); opacity: .9; }
body.lounge.page .frame-body a { color: var(--brass-hi); }

/* back buttons in the top bar */
body.lounge .back-home, body.lounge .top .btn { padding: 7px 14px; border-radius: 999px; font-weight: 700; font-size: .92rem; color: var(--ivory);
  background: var(--velvet); box-shadow: inset 0 0 0 1px var(--line); text-shadow: none; }

/* play with friends */
body.lounge .vs-card { margin-top: 14px; padding: 18px 16px; border-radius: 18px; color: var(--ivory); background: var(--velvet); box-shadow: inset 0 0 0 1px var(--line); }
body.lounge .vs-h { text-align: start; font-size: 1.25rem; font-weight: 800; }
body.lounge .vs-h2 { font-weight: 800; color: var(--ivory); }
body.lounge .vs-sub, body.lounge .vs-or { text-align: start; font-weight: 500; color: var(--ivory-dim); }
body.lounge .vs-or { text-align: center; }
body.lounge .vs-label { font-weight: 700; font-size: .9rem; color: var(--ivory-dim); }
body.lounge .vs-input { border-radius: 12px; font-weight: 700; color: var(--ivory); background: rgba(23, 13, 46, .6); box-shadow: inset 0 0 0 1px var(--line); }
body.lounge .vs-input:focus-visible { outline: 2px solid var(--brass-hi); }
body.lounge .vs-pick button { border-radius: 12px; color: var(--ivory); background: rgba(23, 13, 46, .6); box-shadow: inset 0 0 0 1px var(--line); }
body.lounge .vs-pick button b { font-weight: 700; }
body.lounge .vs-pick button small { color: var(--ivory-dim); font-weight: 500; }
body.lounge .vs-pick button.on { color: #2a1a02; background: var(--brass); box-shadow: none; }
body.lounge .vs-pick button.on small { color: #5a3d06; }
body.lounge .btn-wide { margin-top: 18px; font-size: 1.1rem; padding: 13px 0; border-radius: 14px; }
body.lounge .vs-note { color: var(--brass-hi); font-weight: 700; }
body.lounge .vs-tabs { gap: 0; padding: 0; border-radius: 0; background: none; box-shadow: inset 0 -1px 0 var(--line); }
body.lounge .vs-tab { padding: 10px 2px 12px; border-radius: 0; font-weight: 700; color: var(--ivory-dim); }
body.lounge .vs-tab.on { color: var(--ivory); background: none; box-shadow: inset 0 -3px 0 var(--brass); }
body.lounge .vs-code { border-radius: 14px; background: rgba(23, 13, 46, .6); box-shadow: inset 0 0 0 1px var(--line); }
body.lounge .vs-code span { color: var(--ivory-dim); font-weight: 600; }
body.lounge .vs-code strong { color: var(--brass-hi); font-weight: 800; }
body.lounge .vs-players li, body.lounge .vs-item { color: var(--ivory); background: rgba(23, 13, 46, .6); box-shadow: inset 0 0 0 1px var(--line); border-radius: 12px; }
body.lounge .vs-players li::before { color: var(--ivory); background: var(--velvet-hi); }
body.lounge .vs-players li.me { background: rgba(226, 180, 76, .12); box-shadow: inset 0 0 0 1.5px var(--brass); }
body.lounge .vs-players li.winner { background: rgba(226, 180, 76, .2); box-shadow: inset 0 0 0 1.5px var(--brass-hi); }
body.lounge .vs-players li.winner::before { background: var(--brass); color: #2a1a02; }
body.lounge .vs-players .what.wait, body.lounge .vs-players .empty, body.lounge .vs-item small { color: var(--ivory-dim); font-weight: 500; }
body.lounge .vs-item .tag { color: var(--ivory); background: var(--velvet-hi); font-weight: 700; }
body.lounge .vs-item .tag.go, body.lounge .vs-item .tag.won { color: #2a1a02; background: var(--brass); }
body.lounge .vs-link { color: var(--brass-hi); font-weight: 700; }

/* a game's start and result panel, and the boxes above the board */
body.lounge .panel-note { color: var(--brass-hi); font-weight: 700; }
body.lounge .stage-target { color: var(--ivory-dim); font-weight: 600; }
body.lounge .stage-dot { color: #2a1a02; background: var(--brass); box-shadow: none; }
body.lounge .stage-dot.done { color: var(--ivory); background: var(--velvet-hi); box-shadow: inset 0 0 0 1px var(--line); }
body.lounge .stage-dot.on { outline: 2px solid var(--brass-hi); outline-offset: 2px; }
body.lounge .stage-dot.shut { background: rgba(246, 239, 225, .08); box-shadow: none; opacity: .7; }
body.lounge .btn-big { display: block; width: 100%; padding: 14px 18px; font-size: 1.2rem; }
body.lounge .hud-box { color: var(--ivory); background: var(--velvet); box-shadow: inset 0 0 0 1px var(--line); border-radius: 12px; }
body.lounge .hud-label { color: var(--ivory-dim); font-weight: 600; }
body.lounge .top .back { border: 0; cursor: pointer; font: inherit; padding: 7px 14px; border-radius: 999px; font-weight: 700; font-size: .92rem; color: var(--ivory);
  background: var(--velvet); box-shadow: inset 0 0 0 1px var(--line); text-shadow: none; }
/* on a panel, going back is the quieter of the two choices */
body.lounge .back-btn { margin-top: 10px; padding: 11px 0; font-size: .98rem; font-weight: 700; color: var(--brass-hi); background: none; box-shadow: inset 0 0 0 1.5px var(--line); }