/* What the website's pages and the game's own page (index.html) share: the font, the colors (the
   app's, theme/colors.ts), and the header, which is the same on every page so it stays still when
   you go from one to another. Light unless the app is set to dark: each page reads the app's saved
   setting and sets data-theme (make-site.py; WebShell in the app keeps it in step). In a browser
   it's the game's navigation too, on a phone as on a computer; the installed apps have their tabs. */

@font-face { font-family: Nunito; font-weight: 600; font-display: swap; src: url('/fonts/Nunito_600SemiBold.ttf') format('truetype'); }
@font-face { font-family: Nunito; font-weight: 700; font-display: swap; src: url('/fonts/Nunito_700Bold.ttf') format('truetype'); }
@font-face { font-family: Nunito; font-weight: 800; font-display: swap; src: url('/fonts/Nunito_800ExtraBold.ttf') format('truetype'); }

:root {
  --bg: #e9edf4;
  --surface: #ffffff;
  --surface-alt: #f2f5fa;
  --text: #1e2b45;
  --muted: #5f6f8e;
  --line: #d6dde8;
  --primary: #3b6fe0;
  --primary-soft: #e3ebfc;
  --orange: #ff8a3d;
  --shadow: 0 1px 3px rgba(30, 43, 69, 0.08), 0 8px 24px rgba(30, 43, 69, 0.06);
  /* The board pictures, in the app's board colors. */
  --board: #ffffff;
  --line-thin: #c9d3e3;
  --line-thick: #344561;
  --tint: #e5edfd;
  --tint2: #fce5d4;
  --tint3: #ddf3e8;
  --tint-strong: #b7cef4;
  --answer: #d6e3f8;
  --danger: #e5484d;
  --danger-soft: #fde4e5;
  --link: #8a56d6;
  color-scheme: light;
}
:root[data-theme='dark'] {
  --bg: #0f141d;
  --surface: #182030;
  --surface-alt: #1e283a;
  --text: #e7ecf5;
  --muted: #9aa6bd;
  --line: #2a3548;
  --primary: #5b8bf5;
  --primary-soft: #1d2a45;
  --shadow: none;
  --board: #161e2b;
  --line-thin: #2c384d;
  --line-thick: #8c9dbd;
  --tint: #1e2d4c;
  --tint2: #3a2b20;
  --tint3: #173a2b;
  --tint-strong: #294068;
  --answer: #1d2941;
  --danger: #ff6b6e;
  --danger-soft: #44232a;
  --link: #b38cf7;
  color-scheme: dark;
}

.top, .top * { box-sizing: border-box; }
/* 72 px tall on a computer (WEB_HEADER in components/web.tsx): 16 above and below the 40 px bell and links. */
.top { padding: 16px 0; font-family: Nunito, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-weight: 600; line-height: 1.6; color: var(--text); }
.top .wrap { width: 100%; max-width: 1040px; margin: 0 auto; padding: 0 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.top a { text-decoration: none; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 800; font-size: 20px; margin-right: auto; }
.brand b { white-space: nowrap; }
.brand span { color: var(--primary); }
.logo { width: 34px; height: 34px; flex: none; display: block; }
.nav { display: flex; gap: 2px; }
.nav a { font-size: 16px; line-height: 24px; font-weight: 700; color: var(--text); padding: 8px 12px; border-radius: 10px; white-space: nowrap; }
.nav a:hover, .nav a[aria-current='page'] { background: var(--primary-soft); }
.nav a[aria-current='page'] { color: var(--primary); }
/* A small computer window: six links, the language and the bell still fit on one line (in Turkish too). */
@media (min-width: 960px) and (max-width: 1099px) {
  .top .wrap { gap: 8px; }
  .nav a { padding: 8px 8px; }
}
.lang { font-size: 16px; line-height: 24px; font-weight: 700; color: var(--primary); padding: 8px 10px; border-radius: 10px; }
.lang:hover { background: var(--primary-soft); }
/* The bell: your notifications, with how many the game last counted (localStorage inbox-count). */
.bell { position: relative; width: 40px; height: 40px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); background: var(--surface); color: var(--muted); }
.bell:hover { background: var(--surface-alt); }
.bell svg { width: 18px; height: 18px; fill: currentColor; }
.bell.on { color: var(--text); }
.badge { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 10px; border: 2px solid var(--bg); background: var(--orange); color: #161b26; font-size: 11px; line-height: 16px; font-weight: 800; text-align: center; }
.badge[hidden] { display: none; }
/* The menu: narrower than a computer, the header is this button, the logo and the bell, and the
   links and the other language are in the menu, over the whole page. A details element, so it
   opens without scripts; the button stays above the menu and closes it. */
.menu { display: none; }
.menu summary { list-style: none; cursor: pointer; position: relative; z-index: 61; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--text); }
.menu summary::-webkit-details-marker { display: none; }
.menu summary:hover { background: var(--primary-soft); }
.menu summary svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.menu .i-close, .menu[open] .i-open { display: none; }
.menu[open] .i-close { display: block; }
.menu-panel { position: fixed; inset: 0; z-index: 60; overflow-y: auto; background: var(--bg); padding: 88px 24px 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.menu-panel a { font-size: 18px; font-weight: 700; color: var(--muted); padding: 10px 18px; border-radius: 12px; }
.menu-panel a:hover, .menu-panel a[aria-current='page'] { color: var(--text); background: var(--primary-soft); }
.menu-panel .button { display: inline-flex; align-items: center; justify-content: center; min-width: 220px; min-height: 50px; margin-bottom: 12px; border-radius: 14px; background: var(--primary); color: #fff; font-size: 17px; font-weight: 800; }
.menu-panel .button:hover, .menu-panel .button[aria-current='page'] { background: var(--primary); color: #fff; }
.menu-panel .button:hover { filter: brightness(1.06); }
.menu-lang { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.menu-lang svg { width: 20px; height: 20px; fill: currentColor; }
html:has(.menu[open]) { overflow: hidden; }
@media (max-width: 959px) {
  .menu { display: block; order: -1; }
  .nav, .top .lang { display: none; }
  .top .wrap { gap: 8px; }
}
@media (max-width: 360px) {
  .brand { font-size: 17px; gap: 8px; }
  .logo { width: 30px; height: 30px; }
}
/* In the game (index.html) on a phone, a game itself (the solo game, a room) keeps the whole screen
   for the board: no header (WebShell, and a script before it, set data-screen). */
@media (max-width: 959px) {
  html[data-screen='game'] .shell .top { display: none; }
}