/* Glass theme: the whole site sits on one fixed starry night sky (deep blue with a soft glow, in the style of the
   Telegram avatar), and every panel is frosted glass over it. Linked after each page's own <style>, so the rules here win at
   equal specificity; the page styles keep their layout and only lose their solid graphite fills. */
:root {
  --glass: rgba(30, 35, 46, .38);
  --glass-2: rgba(46, 52, 66, .46);
  --glass-deep: rgba(14, 17, 24, .55);
  --glass-line: rgba(205, 212, 226, .13);
  --glass-blur: blur(16px) saturate(135%);
  --glass-hi: inset 0 1px 0 rgba(255, 255, 255, .05);
  --bg: rgba(11, 13, 19, .55);
  --bg-2: rgba(14, 17, 24, .5);
  --panel: var(--glass);
  --panel-2: var(--glass-2);
  --line: var(--glass-line);
  --hair: var(--glass-line);
  --card: var(--glass);
}

/* ---------- the sky behind everything ---------- */
/* deep night blue with a soft blue glow and a field of stars, like the Telegram avatar; the stars are two big SVG
   tiles (1400x1000, so the repeat is not noticeable): a still field and brighter stars that twinkle */
html { background: #0c0f1a; }
body { background: transparent; position: relative; }
body::before, body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; }
body::before {
  background:
    radial-gradient(900px 620px at 50% 14%, rgba(72, 112, 214, .16), transparent 66%),
    radial-gradient(1100px 700px at 88% 104%, rgba(58, 82, 170, .12), transparent 64%),
    radial-gradient(800px 500px at 4% 60%, rgba(90, 110, 190, .06), transparent 70%),
    linear-gradient(180deg, #161b31 0%, #12162a 46%, #0d1020 100%);
}
body::after {
  background: url("/img/stars-tw.svg") 0 0 / 1400px 1000px, url("/img/stars.svg") 700px 500px / 1400px 1000px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, rgba(0, 0, 0, .55) 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 70%, rgba(0, 0, 0, .55) 100%);
}

/* ---------- header, menus, footer ---------- */
header.nav { background: rgba(11, 14, 20, .5); border-bottom-color: var(--glass-line); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.menu { background: rgba(22, 26, 35, .78); border-color: var(--glass-line); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
/* the "in development" tip under the Store tab: blue glass like the panels, with a little hammer striking an anvil */
nav.links .soon::after { padding-left: 34px; background: rgba(50, 56, 72, .62) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath d='M2 12.5h14.5c-.3 2-1.9 3.2-4 3.5V18h2.5v2.5H5.5V18H8v-2C5 15.6 3 14.5 2 12.5z' fill='%239fb3d6'/%3E %3Cpath d='M16.5 12.5h3.5c-.8 1.2-2.2 1.8-3.8 1.9z' fill='%239fb3d6'/%3E %3Cg%3E%3CanimateTransform attributeName='transform' type='rotate' values='30 21 10;30 21 10;0 21 10;4 21 10;30 21 10' keyTimes='0;.3;.48;.56;1' dur='1.1s' repeatCount='indefinite'/%3E %3Crect x='12' y='9' width='9.5' height='1.8' rx='.9' fill='%23c8b48a'/%3E %3Crect x='9' y='6' width='3.4' height='6.3' rx='.8' fill='%23e7ecf5'/%3E%3C/g%3E %3Cg fill='%23ffd166' opacity='0'%3E%3Canimate attributeName='opacity' values='0;0;1;0;0' keyTimes='0;.47;.5;.72;1' dur='1.1s' repeatCount='indefinite'/%3E %3Ccircle cx='7.5' cy='11' r='.8'/%3E%3Ccircle cx='6' cy='9.2' r='.6'/%3E%3Ccircle cx='14' cy='11.2' r='.7'/%3E%3Ccircle cx='15.5' cy='9.5' r='.5'/%3E%3C/g%3E %3C/svg%3E") no-repeat 9px 50% / 18px 18px; border-color: rgba(205, 212, 226, .22); color: #e7ecf5; box-shadow: 0 10px 26px rgba(4, 6, 10, .45), var(--glass-hi); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
footer.foot { background: rgba(11, 13, 19, .35); border-top-color: var(--glass-line); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.page-head { background: none; border-bottom-color: var(--glass-line); }
@media (max-width: 900px) {
  nav.links { background: #0e1118; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
}

/* ---------- frosted surfaces on every page ---------- */
.card, .feature, .contact, .table-wrap, .stat, .tile, .list, .acc, .tabs, .card-me, .note, .sec-h, .body-map,
.bans, .step, .card2, .worth .w, .load-fail, .connect, .type, .invite, .subnav,
main.scene .contact, #app .stat, #app .card, .login-card {
  background: var(--glass);
  border-color: var(--glass-line);
  box-shadow: var(--glass-hi);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.inp, .search input, input.inp, .q input, select.inp, .wipe-sel, .card2 code { background: var(--glass-deep); border-color: var(--glass-line); }
.btn-ghost, .login, .bell-btn, .user-btn { background: var(--glass-2); }
.bell-btn:hover, .user-btn:hover, .bell-btn.open, .user-btn.open { background: rgba(58, 64, 80, .55); border-color: var(--glass-line); }
th { background: rgba(46, 52, 66, .35); }
th, td { border-bottom-color: var(--glass-line); }

/* the facts bands (home, about, bans) and the tournament stats band */
.facts, #app .stats { background: rgba(14, 17, 24, .42); border-color: var(--glass-line); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
#app .stats .stat { background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* tournaments: the champagne look stays, only the graphite turns to glass; the leaders' gold tint stays on top */
#app, .login-card { --hair: var(--glass-line); --line: var(--glass-line); --panel-2: var(--glass-2); --bg-2: var(--glass-deep); }
.table-wrap { background: linear-gradient(90deg, rgba(255, 209, 102, .075), rgba(255, 209, 102, .02) 60%), var(--glass); border-color: var(--glass-line); }
.table-wrap th { background: rgba(46, 52, 66, .35); }
.table-wrap td { border-bottom-color: var(--glass-line); }
#app .invite { background: var(--glass-deep); }
.tmenu-pop, .sort-menu { background: rgba(22, 26, 35, .85); border-color: var(--glass-line); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.tmenu-pop button:hover:not(:disabled), .tmenu-btn:hover, .tmenu-btn[aria-expanded="true"] { background: rgba(70, 76, 94, .35); }
.tmenu-pop hr { border-top-color: var(--glass-line); }
.rm img.av, .rm .ph, .tmenu-pop button img, .tmenu-pop button .ph { background: var(--glass-2); }

/* the confirm / prompt dialogs (dialog.js injects its own style later, hence the extra specificity) */
body .sd-box { background: rgba(24, 28, 38, .78); border-color: var(--glass-line); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
body .sd-box input { background: var(--glass-deep); border-color: var(--glass-line); }

/* bans as cards on phones */
@media (max-width: 860px) {
  .bans { background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .bans tbody tr { background: var(--glass); border-color: var(--glass-line); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
  .bans tbody tr.msg { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* hero scenes: hairline in the glass colour */
.about-hero, .bans-hero { border-bottom-color: var(--glass-line); }