/* Variables, reset and type. House style of Koonsultancy (light theme of the site): sand, slate and gold;
   no SAP colours. Fonts are served with the game itself (no external fonts). */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(../fonts/inter-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(../fonts/inter-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 500 600; font-display: swap; src: url(../fonts/playfairdisplay-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 500 600; font-display: swap; src: url(../fonts/playfairdisplay-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600 700; font-display: swap; src: url(../fonts/montserrat-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600 700; font-display: swap; src: url(../fonts/montserrat-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --c-bg: #ede8e1;          /* sand: desktop and screens */
  --c-surface: #ffffff;
  --c-surface-2: #f6f3ee;
  --c-card: #e3ddd2;
  --c-border: #d6cfc0;
  --c-border-strong: #9c9381;
  --c-grid: #ddd6c9;        /* cell lines of a matrix */
  --c-text: #2f3a44;        /* slate */
  --c-text-muted: #6e6656;
  --c-primary: #7d5f37;     /* gold (light theme of the site) */
  --c-primary-dark: #634a2a;
  --c-primary-soft: #f1eadf;
  --c-accent: #c79b63;      /* gold on slate */
  --c-accent-soft: #f6eedf;
  --c-gold-gradient: linear-gradient(135deg, #a88d6a, #7d5f37 45%, #5a4428);
  --c-bar: #e3ddd2;         /* top bars: light, set off by a gold line */
  --c-bar-2: #d6cfc0;
  --c-bar-text: #2f3a44;
  --c-bar-accent: #7d5f37;
  /* window title bars (active / inactive); the line under the active one */
  --c-title: #e3ddd2; --c-title-text: #2f3a44; --c-title-line: #c79b63; --c-title-border: #b9af9c;
  --c-title-inactive: #ede8e1; --c-title-inactive-text: #6e6656;
  --c-input: #ffffff;       /* fields the player fills in */
  --c-input-border: #b9af9c;
  --c-chrome: #2f3a44;
  --c-chrome-2: #3a4652;
  --c-chrome-3: #55636f;
  --c-chrome-text: #ede8e1;
  --c-find: #fbf1d9;
  --c-readonly: #f1eee9;
  --c-ok: #2f7d4f;
  --c-ok-soft: #e1f2e7;
  --c-info: #2f5f8f;
  --c-info-soft: #e2ecf6;
  --c-error: #b23a3a;
  --c-error-soft: #f8e3e3;
  --c-focus: #c79b63;
  --c-overlay: rgba(47, 58, 68, 0.38);
  --c-line: rgba(47, 58, 68, 0.15); /* the thin line of the site (header, menu, rounds) */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-serif: "Playfair Display", Georgia, serif;
  --font-ui: "Montserrat", Arial, sans-serif; /* header buttons, menu and labels, as on the site */
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --text-scale: 1;
  --fs: calc(13px * var(--text-scale));
  --fs-small: calc(12px * var(--text-scale));
  --radius: 4px;
  --touch: 40px;
  --field-h: calc(26px * var(--text-scale));
  --shadow: 0 6px 24px rgba(47, 58, 68, 0.22);
  --c-on-primary: #ffffff;
  color-scheme: light;
}

/* Dark theme, only when the player chose it (theme.js; the default is light, like the site). These are the
   colours of the client; the page screens take the dark of the site below. */
:root[data-theme="dark"] { 
    --c-bg: #1d242b; --c-surface: #2a333c; --c-surface-2: #252e36; --c-card: #343e48;
    --c-border: #46525e; --c-border-strong: #7a8792; --c-grid: #3d4853;
    --c-text: #ede8e1; --c-text-muted: #a7a08f;
    --c-primary: #c79b63; --c-primary-dark: #dcc4a3; --c-primary-soft: #4d4638;
    --c-accent: #c79b63; --c-accent-soft: #4d4638;
    --c-chrome: #151b20; --c-chrome-2: #1f272e; --c-chrome-3: #2f3943; --c-chrome-text: #ede8e1;
    --c-find: #5a4f33; 
    --c-ok: #7cc79a; --c-ok-soft: #284437; --c-info: #8fb6dd; --c-info-soft: #26394b;
    --c-error: #e48a8a; --c-error-soft: #4a2c2c; --c-focus: #dcc4a3;
    --c-overlay: rgba(0, 0, 0, 0.5); --c-line: rgba(237, 232, 225, 0.14); --shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
    --c-on-primary: #2f3a44;
    --c-gold-gradient: linear-gradient(135deg, #dcc4a3, #c79b63 45%, #8b6d45);
    --c-bar: #151b20; --c-bar-2: #1f272e; --c-bar-text: #ede8e1; --c-bar-accent: #c79b63;
    --c-title: #151b20; --c-title-text: #ede8e1; --c-title-line: #c79b63; --c-title-border: #151b20;
    --c-title-inactive: #2f3943; --c-title-inactive-text: #ede8e1;
    --c-input: #141a1f; --c-input-border: #8a96a0; --c-readonly: #303a44;
    color-scheme: dark;
   }
/* The page screens (everything outside the client, with their cards and toasts): the dark of the site, slate
   #2F3A44 with panel #3A4652 and card #46535F (Koonsultancy css/style.css). */
:root[data-theme="dark"]:has(.page) {
    --c-bg: #2f3a44; --c-surface: #3a4652; --c-surface-2: #35414c; --c-card: #46535f;
    --c-border: #535d66; --c-border-strong: #8a96a0; --c-grid: #4a5560;
    --c-text: #ede8e1; --c-text-muted: #a7a08f;
    --c-input: #2f3a44; --c-input-border: #6f7b86; --c-readonly: #3f4a55;
    --c-overlay: rgba(20, 26, 31, 0.6);
   }


*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font);
  font-size: var(--fs);
  color: var(--c-text);
  background: var(--c-bg);
  overflow: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: 0.45; }
:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 1px; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }

#app { height: 100%; }
/* 404.html (ErrorDocument of public/.htaccess): only the code and a link to the game, no text to translate. */
.not-found main { max-width: 520px; margin: 80px auto; padding: 0 16px; text-align: center; }
.not-found a { color: var(--c-primary); }

/* Round buttons in the top bars (theme, text size, language, account) and what they fold out: the
   header buttons of the site (32 px rounds with a line; the account a filled gold round with a pass;
   languages fold out as a column of rounds, the account as a panel in capitals). */
.theme-btn, .round-btn {
  display: inline-grid;
  place-items: center;
  flex: none;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--c-bar-text) 15%, transparent);
  border-radius: 50%;
  background: none;
  color: var(--c-bar-text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
}
.theme-btn { color: var(--c-bar-accent); }
.theme-btn svg, .round-btn svg { display: block; }
.theme-btn:hover, .round-btn:hover, .round-btn[aria-expanded="true"] { border-color: var(--c-bar-accent); color: var(--c-bar-accent); }
/* the account: a round with the pass, gold when logged in, the text colour on hover (site .auth-badge) */
.round-btn.account-menu-btn { transition: background 0.15s, color 0.15s, border-color 0.15s; }
.round-btn.account-menu-btn.signed-in { border-color: var(--c-bar-accent); background: var(--c-bar-accent); color: var(--c-bar); }
.round-btn.account-menu-btn:hover, .round-btn.account-menu-btn[aria-expanded="true"] { border-color: var(--c-bar-text); background: var(--c-bar-text); color: var(--c-bar); }
.popup-wrap { position: relative; display: inline-flex; flex: none; }
.popup-menu { z-index: 40000; }
.popup-menu.bubbles {
  position: absolute;
  left: 50%;
  top: calc(100% + 10px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.popup-menu.bubbles .popup-item {
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--c-text) 15%, transparent);
  border-radius: 50%;
  background: var(--c-surface);
  color: var(--c-text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  animation: round-in 0.18s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.popup-menu.bubbles .popup-item:nth-child(2) { animation-delay: 0.025s; }
.popup-menu.bubbles .popup-item:nth-child(3) { animation-delay: 0.05s; }
.popup-menu.bubbles .popup-item:nth-child(4) { animation-delay: 0.075s; }
.popup-menu.bubbles .popup-item:nth-child(5) { animation-delay: 0.1s; }
.popup-menu.bubbles .popup-item:hover, .popup-menu.bubbles .popup-item:focus-visible,
.popup-menu.bubbles .popup-item[aria-checked="true"] { border-color: var(--c-primary); color: var(--c-primary); outline: none; }
@keyframes round-in { from { opacity: 0; transform: translateY(-22px) scale(0.7); } to { opacity: 1; transform: none; } }
/* The panel hangs under the header, right-aligned with its content, not under the button: the menu panel
   of the site (.main-nav: 300 px, 240 px up to 720 px and then 16 px from the edges; lines of 52 px). */
.popup-wrap.panel { position: static; }
.popup-menu.panel {
  position: absolute;
  right: max(24px, calc((100% - 1180px) / 2));
  top: calc(78px + env(safe-area-inset-top));
  width: 300px;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  color: var(--c-text);
  border: 1px solid var(--c-line);
  line-height: 1.4;
  animation: unfold 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.popup-info { margin: 0; padding: 16px 6px 14px; border-bottom: 1px solid var(--c-line); color: var(--c-text-muted); font: 600 10px/1.4 var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; }
.popup-info strong { display: block; margin-top: 4px; color: var(--c-primary); font-size: 13px; letter-spacing: 0.06em; overflow-wrap: anywhere; }
.popup-menu.panel .popup-item {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100%;
  height: 52px;
  padding: 0 6px;
  border: 0;
  border-bottom: 1px solid var(--c-line);
  background: none;
  color: var(--c-text);
  opacity: 0.82;
  font: 600 11px/1 var(--font-ui);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: left;
  text-decoration: none;
}
.popup-menu.panel .popup-item:last-child { border-bottom: 0; }
.popup-menu.panel .popup-item:hover, .popup-menu.panel .popup-item:focus-visible { color: var(--c-primary); opacity: 1; outline: none; }
@media (max-width: 720px) {
  .popup-menu.panel { left: 16px; right: 16px; width: auto; }
  .popup-menu.panel .popup-item, .popup-info { padding-left: 8px; padding-right: 8px; }
}
@keyframes unfold { from { clip-path: inset(0 0 100% 0); opacity: 0.3; transform: translateY(-4px); } to { clip-path: inset(0 0 0 0); opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .popup-menu.bubbles .popup-item, .popup-menu.panel { animation: none; } }
/* larger rounds on touch in the client; the page header keeps the 32 px of the site (game.css) */
@media (pointer: coarse) { .theme-btn, .round-btn, .popup-menu.bubbles .popup-item { width: 38px; height: 38px; } }