/* «Ξέρεις την ομάδα σου;» — G-Factor. Same look as gfg.gr: parchment, ink, gold, EB Garamond. */

@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/eb-garamond-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/eb-garamond-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;
}

/* Dark everywhere (phone and computer): gfg.gr's black and gold, the game on darkened parchment. */
:root {
  --paper: #14100b;
  --card: rgba(37, 30, 21, 0.9);
  --card-solid: #2a2218;
  --ink: #f2e7c9;
  --ink-2: #e2d3ab;
  --muted: #bba97f;
  --line: rgba(233, 217, 166, 0.22);
  --line-2: rgba(233, 217, 166, 0.12);
  --plum: #e6c36a;
  --plum-soft: rgba(233, 217, 166, 0.08);
  --plum-line: rgba(233, 217, 166, 0.26);
  --gold: #daa520;
  --gold-2: #ffb700;
  --gold-ink: #2a1a00;
  --gold-edge: #8a6410;
  --gold-soft: rgba(218, 165, 32, 0.18);
  --ok: #93d68e;
  --ok-soft: rgba(147, 214, 142, 0.14);
  --bad: #ff978a;
  --bad-soft: rgba(255, 151, 138, 0.13);
  --shadow: 0 1px 0 rgba(255, 240, 200, 0.05) inset, 0 2px 0 rgba(0, 0, 0, 0.35), 0 8px 20px rgba(0, 0, 0, 0.35);
  --emoji: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Twemoji Mozilla', sans-serif;
  --title-fill: #f2e7c9;
  --title-stroke: #000;
  --title-shadow: 0 3px 3px rgba(0, 0, 0, 0.85);
  /* the site's frame (header + footer), as on gfg.gr */
  --frame: #000;
  --frame-ink: #fff;
  --frame-gold: #daa520;
  --frame-hover: #ffd200;
  --head-h: 64px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--paper);
  background-image: linear-gradient(rgba(12, 9, 5, 0.9), rgba(12, 9, 5, 0.9)), url('bg.webp');
  background-size: auto, 760px auto;
  color: var(--ink);
  font-family: 'EB Garamond', Georgia, 'Noto Serif', 'Times New Roman', serif;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.45;
  overflow-x: hidden;
}

button, input { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
img { max-width: 100%; }
:focus-visible { outline: 3px solid var(--gold-2); outline-offset: 2px; }
[hidden] { display: none !important; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nojs { padding: 40px 20px; text-align: center; }

/* ---------- frame ---------- */
/* the game's own line under the site's header: just its name */
.top {
  max-width: 540px;
  margin: 0 auto;
  padding: 14px 16px 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.top::before, .top::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-edge)); }
.top::after { background: linear-gradient(90deg, var(--gold-edge), transparent); }
.top .ttl { flex: none; max-width: 80%; margin: 0; font-weight: 700; font-size: 1.02rem; line-height: 1.2; color: var(--frame-gold); letter-spacing: 0.03em; text-align: center; }

.wrap {
  max-width: 540px;
  margin: 0 auto;
  padding: 4px 16px 32px;
}
#app > .wrap:first-child { padding-top: 18px; }   /* the first page has no title line: some air under the header */

.status {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  justify-content: space-between;
  align-items: center;
  font-size: 0.92rem;
  color: var(--muted);
  margin: 6px 0 2px;
}
.status b { color: var(--ink); font-weight: 700; }
/* the round's point over the page: it pops up in the middle and flies to the ⭐ (see pointFx() in app.js) */
.status .star b { display: inline-block; }
.status .star b.bump { animation: pt-bump 0.5s ease-out; }
@keyframes pt-bump { 0% { transform: scale(1); } 40% { transform: scale(1.9); color: var(--gold-2); } 100% { transform: scale(1); } }
.pt-fx { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 40; pointer-events: none; display: grid; place-items: center; }
.pt-veil { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.4); animation: pt-veil 1.5s ease-out both; }
.pt-badge {
  position: relative;
  min-width: 150px; height: 150px;
  padding: 0 26px;
  border-radius: 75px;
  display: grid; place-items: center;
  font-weight: 900;
  font-size: 4.4rem;
  line-height: 1;
  animation: pt-pop 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) backwards;
  transition: transform 0.55s cubic-bezier(0.5, 0, 0.75, 0.35), opacity 0.55s ease-in;
}
.pt-fx.plus .pt-badge {
  background: radial-gradient(circle at 35% 30%, #ffe08a, var(--gold-2) 55%, var(--gold));
  color: var(--gold-ink);
  box-shadow: 0 0 0 6px rgba(255, 183, 0, 0.25), 0 0 60px rgba(255, 183, 0, 0.55);
}
.pt-fx.minus .pt-badge {
  background: radial-gradient(circle at 35% 30%, #ff9c90, #d8362a 60%, #a3211a);
  color: #fff;
  box-shadow: 0 0 0 6px rgba(216, 54, 42, 0.25), 0 0 60px rgba(216, 54, 42, 0.5);
}
@keyframes pt-pop { 0% { transform: scale(0.2); opacity: 0; } 70% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes pt-veil { 0% { opacity: 0; } 12% { opacity: 1; } 60% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- type ---------- */
h1, h2, h3 { margin: 0; font-weight: 700; line-height: 1.15; color: var(--ink); }
/* places the page moves focus to for screen readers (never reached with Tab): no frame around them */
h1:focus, h2:focus, [tabindex="-1"]:focus { outline: none; }
.title-big {
  font-size: clamp(2.15rem, 10vw, 2.9rem);
  font-weight: 800;
  line-height: 1.02;
  color: var(--title-fill);
  -webkit-text-stroke: 1px var(--title-stroke);
  paint-order: stroke fill;
  text-shadow: var(--title-shadow);
  margin: 6px 0 10px;
  text-align: center;
}
.kicker {
  margin: 14px 0 4px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--plum);
}
.lead { margin: 0 0 14px; color: var(--ink-2); font-size: 1.06rem; text-align: center; }
.q { font-size: clamp(1.5rem, 6.6vw, 1.95rem); font-weight: 700; line-height: 1.18; margin: 6px 0 10px; }
.q-small { font-size: 1.15rem; font-weight: 600; color: var(--ink-2); margin: 4px 0 12px; }
.hint { color: var(--muted); margin: 0 0 6px; font-size: 1rem; }
.small { font-size: 0.9rem; color: var(--muted); }
/* The small grey texts (notes, hints, «Χρειάζονται τουλάχιστον 2 συνδεδεμένοι παίκτες.») in the middle, everywhere
   (the owner, 2026-11-14: «όλα τα κείμενα τέτοιου τύπου να πάνε στο κέντρο») */
p.small, .hint, .watch, .vote .vote-now { text-align: center; }
.center { text-align: center; }
p { margin: 0 0 12px; }

/* ---------- surfaces ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  margin: 14px 0;
  box-shadow: var(--shadow);
}
.card > h2 { font-size: 1.15rem; margin-bottom: 10px; text-align: center; }   /* a card's title sits in the middle (the owner's choice, 1.2.2) */

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.steps li { display: flex; gap: 12px; align-items: flex-start; }
.steps .n {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gold-soft);
  border: 1.5px solid var(--gold-edge);
  font-weight: 800;
  font-size: 0.95rem;
}

/* ---------- forms & buttons ---------- */
label { display: block; font-weight: 700; margin: 0 0 6px; font-size: 1rem; }
.field {
  width: 100%;
  min-height: 54px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1.5px solid var(--line);
  background: var(--card-solid);
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0 0 12px;
}
.field::placeholder { color: var(--muted); opacity: 0.75; font-weight: 500; }
.err { color: var(--bad); font-weight: 700; margin: 4px 0 10px; }
.opt-l { font-weight: 500; font-size: 0.9rem; color: var(--muted); }

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  width: 100%;
  min-height: 54px;
  padding: 10px 18px;
  margin: 0 0 10px;
  border-radius: 12px;
  border: 1.5px solid var(--line);
  background: var(--card-solid);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--shadow);
  transition: transform 0.08s ease, filter 0.15s ease;
}
.btn:active { transform: translateY(1px); }
.btn.gold {
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  border-color: var(--gold-edge);
  color: var(--gold-ink);
  text-shadow: 0 1px 0 rgba(255, 238, 180, 0.55);
}
.btn.big { min-height: 60px; font-size: 1.25rem; }
.btn.ghost { background: transparent; box-shadow: none; }
.btn.slim { min-height: 44px; font-size: 1rem; }
.btn[disabled], .btn[aria-disabled='true'] { opacity: 0.5; cursor: not-allowed; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.row2 .btn { margin: 0; }
.linkbtn { background: none; border: 0; padding: 8px 4px; color: var(--muted); text-decoration: underline; font-size: 1rem; }

body.busy .btn, body.busy .opt.pick { pointer-events: none; }
body.busy .btn.gold { filter: saturate(0.6); }

/* ---------- the room's name ---------- */
.room-big {
  font-size: clamp(1.9rem, 9vw, 2.6rem);
  font-weight: 800;
  line-height: 1.08;
  text-align: center;
  overflow-wrap: anywhere;
  margin: 2px 0 6px;
  color: var(--title-fill);
  -webkit-text-stroke: 1px var(--title-stroke);
  paint-order: stroke fill;
  text-shadow: var(--title-shadow);
}
.room-sub { text-align: center; color: var(--muted); font-size: 0.95rem; margin: 0 0 4px; }
.lockline { text-align: center; color: var(--muted); margin: 0 0 12px; }
.lockline b { color: var(--ink); font-size: 1.12rem; letter-spacing: 0.03em; }
.status .rn { min-width: 0; max-width: 64%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- rooms list ---------- */
.back-home { margin-bottom: 14px; }                     /* "back to the first page": a button under the ranking card, clear of the text under it */
.rooms { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
.room-li { border-radius: 16px; border: 1.5px solid var(--line); background: var(--card); box-shadow: var(--shadow); overflow: hidden; }
.room-li.open { border-color: var(--gold-edge); }
.room-li.full { opacity: 0.6; }
.room {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 70px;
  padding: 10px 14px 10px 10px;
  border: 0;
  background: transparent;
  text-align: left;
}
.room:disabled { cursor: default; }
.room:active:not(:disabled) { background: var(--gold-soft); }
.room .ic {
  flex: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gold-soft);
  border: 1.5px solid var(--gold-edge);
  font-family: var(--emoji);
  font-size: 1.2rem;
}
.room .bd { flex: 1; min-width: 0; display: grid; gap: 1px; }
.room .nm { font-weight: 700; font-size: 1.16rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room .meta { font-size: 0.9rem; line-height: 1.3; color: var(--muted); }
.nw { white-space: nowrap; }
.room .meta .nw { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.st { font-weight: 700; }
.st.wait { color: var(--ok); }
.st.play { color: var(--plum); }
.room .cnt { flex: none; min-width: 48px; text-align: center; font-variant-numeric: tabular-nums; color: var(--muted); line-height: 1.05; }
.room .cnt b { font-size: 1.4rem; color: var(--ink); }
.room .cnt small { display: block; font-size: 0.72rem; letter-spacing: 0.04em; margin-top: 2px; }
.unlock { padding: 0 14px 14px; }
.pwrow { display: flex; gap: 8px; }
.pwrow .field { flex: 1; min-width: 0; margin: 0; }
.pwrow .btn { flex: none; width: auto; margin: 0; padding: 10px 20px; }
/* the account's name (up to 24 characters since 1.2.3): on a phone the field had 85 px next to the button; now it
   gets a whole line and the button goes under it whenever the two do not fit side by side */
.pwrow.namerow { flex-wrap: wrap; }
.pwrow.namerow .field { flex: 999 1 12em; }
.pwrow.namerow .btn { flex: 1 0 auto; }
.unlock .err { margin: 8px 0 0; }
.empty .big-emoji { display: block; font-family: var(--emoji); font-size: 2.2rem; margin-bottom: 4px; }
.empty p { margin: 0; }

/* ---------- players ---------- */
/* minmax(0, 1fr): the one column is as wide as the card, never as wide as the longest name in it (a long name is
   cut with "…" in its chip instead of pushing every row out of the card — and off the screen on a phone) */
.plist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.plist li {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 4px 6px 4px 10px;
  border-radius: 12px;
  background: var(--plum-soft);
}
.plist li.off { opacity: 0.6; }
.plist .grow { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* the name, the 👑 and "εσύ" in the middle of the row (the owner, 2026-11-14): the dot on the left and the ✕ on the
   right sit in two columns of the same width, so every row has its name on the same middle line */
.plist li { display: grid; grid-template-columns: minmax(min-content, 1fr) minmax(0, auto) minmax(min-content, 1fr); }
.plist li > .dot { grid-column: 1; justify-self: start; }
.plist li > .grow { grid-column: 2; justify-content: center; }
.plist li > .x { grid-column: 3; justify-self: end; }
.dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.off .dot { background: var(--muted); box-shadow: none; }
.tag { font-size: 0.85rem; color: var(--muted); font-style: italic; }
.x {
  flex: none;
  min-width: 44px;
  min-height: 40px;
  border-radius: 10px;
  border: 1.5px solid var(--line);
  background: transparent;
  font-size: 0.9rem;
  font-weight: 700;
  padding: 0 10px;
}
.x.sure { border-color: var(--bad); color: var(--bad); }

.who {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  max-width: 100%;
  padding: 0.05em 0.55em 0.05em 0.4em;
  border-radius: 999px;
  background: var(--plum-soft);
  border: 1px solid var(--plum-line);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.who i { flex: none; font-style: normal; font-family: var(--emoji); font-size: 0.9em; }
.who .wn { min-width: 0; overflow: hidden; text-overflow: ellipsis; }   /* the name: "…" when the chip has no more room */
.who.me { background: var(--gold-soft); border-color: var(--gold-edge); }
.who.lg { font-size: 1.2rem; padding: 0.15em 0.7em 0.15em 0.5em; }

/* ---------- length chooser ---------- */
.seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(50px, 1fr)); gap: 8px; }
.seg button {
  min-height: 48px;
  border-radius: 12px;
  border: 1.5px solid var(--line);
  background: var(--card-solid);
  font-weight: 700;
  font-size: 1.05rem;
}
.seg button[aria-pressed='true'] {
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  border-color: var(--gold-edge);
  color: var(--gold-ink);
}
/* the vote for the number of rounds: gold = my own vote, the small round number = the votes a choice has,
   the bright frame = what will be played as things stand */
.seg button { position: relative; }
/* (not "lead": that class is the intro paragraph's, with a bottom margin that made this one button shorter) */
.seg button.vwin { box-shadow: 0 0 0 2px var(--card-solid), 0 0 0 4px var(--gold-2); }
.seg .vb {
  position: absolute;
  top: -9px; right: -6px;
  min-width: 22px; height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  display: grid; place-items: center;
  background: var(--ink);
  color: #1a1108;
  font: 700 0.85rem/1 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.vote .seg { row-gap: 16px; }   /* a second row of choices: room for the small vote numbers that stick out on top */
.vote .vote-how { margin: 0 0 14px; }
.vote .vote-now { margin: 14px 0 4px; }
.vote .vote-count { margin: 0; }
/* everyone has voted: the count to the game's own start */
.vote .vote-auto { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--gold-edge); background: var(--gold-soft); text-align: center; font-weight: 800; font-size: 1.08rem; color: var(--ink); }
.vote .vote-auto b { color: var(--gold-2); font-size: 1.25rem; }

/* ---------- timer ---------- */
.timer { margin: 8px 0 2px; }
.timer .bar { position: relative; height: 8px; border-radius: 6px; background: var(--line-2); overflow: hidden; }
.timer .bar i {
  position: absolute; inset: 0;
  transform-origin: left center;
  transform: scaleX(var(--p, 1));
  background: linear-gradient(90deg, var(--gold), var(--gold-2));
  transition: transform 0.25s linear;
}
.timer .lbl { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--muted); margin-top: 3px; }
.timer.low .bar i { background: var(--bad); }
.timer.low .lbl [data-sec] { color: var(--bad); font-weight: 700; }

/* ---------- turn banner ---------- */
.turn {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 2px;
  font-size: 1.1rem;
  font-weight: 600;
}
.turn.mine, .turn.theirs {
  justify-content: center;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--gold-soft);
  border: 1.5px solid var(--gold-edge);
  font-size: 1.25rem;
  font-weight: 800;
}
.watch { font-size: 0.95rem; color: var(--muted); font-style: italic; }
/* In a game (the screens with the status bar): the category, the question and the lines around it in the middle
   (the owner, 2026-11-14), and so is the chip of whoever answers */
.status ~ .kicker, .status ~ .q, .status ~ .q-small, .status ~ .hint, .status ~ .watch, .status ~ .pending { text-align: center; }
.turn { justify-content: center; }

/* ---------- options ---------- */
.opts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 12px 0 14px; }
.opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 60px;
  padding: 10px 14px 10px 10px;
  text-align: left;
  border-radius: 14px;
  border: 2px solid var(--line);
  background: var(--card);
  box-shadow: var(--shadow);
  font-size: 1.14rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
}
.opt .em {
  flex: none;
  width: 42px; height: 42px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gold-soft);
  font-family: var(--emoji);
  font-size: 1.3rem;
}
.opt .tx { flex: 1; min-width: 0; }
/* an option to tap: its text in the middle of the button (the owner, 2026-11-14). The space on the right mirrors
   the round icon on the left (10 + 42 + 12 against 14), so the text is centred on the button, not on what is left of it. */
.opt.pick .tx { text-align: center; padding-right: 50px; }
.opt .chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.opt .chips .who { font-size: 0.85rem; }
.opt.static { box-shadow: none; cursor: default; }
.opt.dim { opacity: 0.78; }
.opt.chosen { border-color: var(--gold-edge); background: linear-gradient(var(--gold-soft), var(--gold-soft)), var(--card); }
.opt.ok { border-color: var(--ok); background: linear-gradient(var(--ok-soft), var(--ok-soft)), var(--card); }
.opt.bad { border-color: var(--bad); background: linear-gradient(var(--bad-soft), var(--bad-soft)), var(--card); }
.opt .mark { flex: none; font-weight: 800; font-size: 0.85rem; letter-spacing: 0.04em; text-transform: uppercase; }
/* Options that are not to tap (waiting, revealed, the one picked) have their text in the middle too, like the ones to
   tap (the owner, 2026-11-14). An empty column as wide as the icon keeps it centred on the whole option; the mark
   ("✓ answer") goes under the text and the names of those who picked it under that, all centred. Until then the mark
   sat on the right and, on phones, the names took the width under it. */
.opt.static { display: grid; grid-template-columns: 42px minmax(0, 1fr) 42px; column-gap: 12px; row-gap: 2px; align-items: center; text-align: center; }
.opt.static .em { grid-column: 1; grid-row: 1; }
.opt.static .tx { display: contents; }
.opt.static .mark { grid-column: 2; grid-row: 2; }
.opt.static .chips { grid-column: 1 / 4; grid-row: 3; justify-content: center; }
.opt.ok .mark { color: var(--ok); }
.opt.bad .mark { color: var(--bad); }
.opt.pick:active { transform: translateY(1px); }
/* Whoever answers this round has gold options, like the page's main buttons: "it is your turn, pick one" (the
   owner's choice, 1.2.3). The guessers' options stay dark. The one just tapped gets a bright frame until the
   server moves the round on. */
.opt.gold {
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  border-color: var(--gold-edge);
  color: var(--gold-ink);
  text-shadow: 0 1px 0 rgba(255, 238, 180, 0.55);
}
.opt.gold .em { background: rgba(42, 26, 0, 0.16); text-shadow: none; }
/* The others, round by round (the owner, 1.2.3: the moment the options can be pressed must be plain to see).
   locked = someone is answering, these cannot be pressed yet: flat, faded, a dashed frame.
   live = the answer is in, now you guess: a bright gold frame and a gold badge, and the options light up one after
   the other when the screen arrives. The one just tapped fills with gold. */
.opt.locked { opacity: 0.5; background: transparent; border-style: dashed; }
.opt.locked .em { background: rgba(233, 217, 166, 0.08); filter: grayscale(1); }
.opt.live {
  border-color: var(--gold-2);
  box-shadow: 0 0 0 1px rgba(255, 183, 0, 0.35), 0 0 18px rgba(255, 183, 0, 0.22), var(--shadow);
  animation: wake 0.5s ease-out backwards;
}
.opt.live .em { background: linear-gradient(180deg, var(--gold-2), var(--gold)); }
.opt.live:nth-child(2) { animation-delay: 0.07s; }
.opt.live:nth-child(3) { animation-delay: 0.14s; }
.opt.live:nth-child(4) { animation-delay: 0.21s; }
.opt.live:nth-child(5) { animation-delay: 0.28s; }
.opt.live:nth-child(6) { animation-delay: 0.35s; }
.opt.live.chosen {
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  border-color: var(--gold-ink);
  color: var(--gold-ink);
  box-shadow: 0 0 0 2px var(--card-solid), 0 0 0 4px var(--gold-2);
}
.opt.live.chosen .em { background: rgba(42, 26, 0, 0.16); }
@keyframes wake {
  0% { transform: scale(0.96); box-shadow: 0 0 0 0 rgba(255, 183, 0, 0.75), var(--shadow); }
  55% { transform: scale(1.015); box-shadow: 0 0 0 9px rgba(255, 183, 0, 0), 0 0 22px rgba(255, 183, 0, 0.35), var(--shadow); }
  100% { transform: scale(1); }
}
.opt.gold.chosen {
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  border-color: var(--gold-ink);
  box-shadow: 0 0 0 2px var(--card-solid), 0 0 0 4px var(--gold-2);
}
.opt.ok.pop { animation: pop 0.45s ease-out; }
@keyframes pop { 0% { transform: scale(0.97); } 60% { transform: scale(1.02); } 100% { transform: scale(1); } }

/* ---------- result line ---------- */
.res {
  margin: 14px 0 6px;
  padding: 10px 14px;
  border-radius: 14px;
  font-weight: 800;
  font-size: 1.2rem;
  text-align: center;
  border: 1.5px solid var(--line);
  background: var(--card);
}
.res.ok { color: var(--ok); border-color: var(--ok); background: linear-gradient(var(--ok-soft), var(--ok-soft)), var(--card); }
.res.bad { color: var(--bad); border-color: var(--bad); background: linear-gradient(var(--bad-soft), var(--bad-soft)), var(--card); }

/* ---------- waiting lists ---------- */
.waitlist { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.waitlist li { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; min-width: 0; }
.waitlist .st { flex: none; font-family: var(--emoji); font-size: 0.95rem; }
.pending { text-align: center; color: var(--muted); margin: 10px 0; }
.hourglass { display: block; font-family: var(--emoji); font-size: 2.4rem; text-align: center; margin: 14px 0 4px; animation: turn 2.4s ease-in-out infinite; }
@keyframes turn { 0%, 40% { transform: rotate(0); } 50%, 90% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } }

/* ---------- scores ---------- */
.scores { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.scores li { display: flex; align-items: center; gap: 10px; min-height: 40px; }
.scores .rk { width: 30px; text-align: center; font-family: var(--emoji); font-weight: 800; flex: none; }
.scores .nm { flex: 1; min-width: 0; }
.scores .pt { font-weight: 800; font-variant-numeric: tabular-nums; }
.scores li.me .pt { color: var(--plum); }

/* ---------- weekly ranking ---------- */
/* ---------- first page: the question of the day, the game with the team ---------- */
.dq-q { font-size: clamp(1.25rem, 5.4vw, 1.5rem); font-weight: 700; line-height: 1.2; margin: 2px 0 10px; overflow-wrap: anywhere; }
.dq-streak { margin: 0 0 8px; color: var(--plum); font-weight: 700; }
.dq-step { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 700; color: var(--plum); }
.dq-no {
  flex: none;
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gold-soft);
  border: 1.5px solid var(--gold-edge);
  color: var(--ink);
  font-weight: 800;
  font-size: 0.95rem;
}
.dq-mine { margin: 0 0 8px; color: var(--muted); overflow-wrap: anywhere; }
.dq-mine b { color: var(--ink); }
.dq-mine .linkbtn { display: inline; padding: 12px 6px; margin: -12px 0; }   /* a finger-sized target, the line no taller */
.daily .opts { margin: 8px 0 10px; }
.daily .opt { min-height: 54px; }
.daily .opt.static { margin: 0; }
.dq-lbl { margin: 10px 0 4px; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.daily .res, .daily-prev .res { font-size: 1.05rem; margin: 12px 0 8px; }
.dq-note { margin: 0 0 4px; color: var(--ink-2); font-weight: 600; }
.daily .small, .daily-prev .small { margin: 0 0 8px; }
.daily label { margin-top: 12px; }
.daily .pwrow { margin-bottom: 8px; }
.daily .err { margin: 0 0 8px; }
.dq-as { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 6px; }
.dq-as b { color: var(--ink); }
.dq-as .linkbtn { padding: 12px 8px; margin: -8px 0 -8px -8px; font-size: inherit; }
.daily > :last-child, .daily-prev > :last-child { margin-bottom: 0; }
.dq-bars { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.dq-bars li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: baseline; }
.dq-bars .lb { min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.dq-bars .lb .em { font-family: var(--emoji); }
.dq-bars .pc { font-weight: 800; font-variant-numeric: tabular-nums; }
.dq-bars .tr { grid-column: 1 / -1; height: 10px; border-radius: 5px; background: var(--plum-soft); overflow: hidden; }
.dq-bars .tr i { display: block; height: 100%; min-width: 2px; border-radius: 5px; background: var(--plum-line); }
.dq-bars li.dq-win .tr i { background: linear-gradient(90deg, var(--gold), var(--gold-2)); }
.dq-bars li.dq-win .lb, .dq-bars li.dq-win .pc { color: var(--gold-2); }
.dq-bars .tags { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.dq-bars li.dq-own { padding: 8px 10px; border: 2px solid #e5484d; border-radius: 12px; }   /* what this player answered: a red frame */
.dq-bars li.dq-own .sr { grid-column: 1 / -1; }
/* the answers' texts in the middle of the row (the owner, 2026-11-14): an empty column as wide as the percentage on
   the left keeps the text centred on the row, not on what the percentage leaves */
.dq-bars li { grid-template-columns: 3.2em minmax(0, 1fr) 3.2em; }
.dq-bars .lb { grid-column: 2; text-align: center; }
.dq-bars .pc { grid-column: 3; text-align: right; }
.dq-bars li.dq-own.dq-own-ok { border-color: var(--ok); }   /* the guess was right: a green frame */
.dq-tag { font-size: 0.8rem; line-height: 1.5; padding: 0 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-2); }
.dq-tag-win { border-color: var(--gold-edge); color: var(--gold-2); }
.hub-team > .small { margin: -4px 0 12px; }

.board { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.board li { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 4px 10px 4px 6px; border-radius: 10px; }
.board li:nth-child(odd) { background: var(--plum-soft); }
.board li.me { background: var(--gold-soft); box-shadow: inset 0 0 0 1.5px var(--gold-edge); }
.board .rk { width: 30px; flex: none; text-align: center; font-family: var(--emoji); font-weight: 800; }
.board .nm { flex: 1; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board .gm { flex: none; font-size: 0.8rem; color: var(--muted); }
.board .pt { flex: none; min-width: 34px; text-align: right; font-weight: 800; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.board.you { border-top: 1px dashed var(--line); padding-top: 6px; }
.board-card .btn { margin: 6px 0 0; }
.board-card .small { margin: 4px 0 0; }
@media (max-width: 440px) {
  /* phones: the games count goes under the name, so the name has the whole line to itself */
  .board li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; column-gap: 10px; align-items: center; align-content: center; }
  .board .rk { grid-column: 1; grid-row: 1 / span 2; }
  .board .nm { grid-column: 2; grid-row: 1; }
  .board .gm { grid-column: 2; grid-row: 2; margin-top: -4px; }
  .board .pt { grid-column: 3; grid-row: 1 / span 2; }
}

.sync { text-align: center; margin: 4px 0 6px; }
.sync .pct {
  font-size: clamp(3.4rem, 18vw, 4.6rem);
  font-weight: 800;
  line-height: 1;
  color: var(--title-fill);
  -webkit-text-stroke: 1px var(--title-stroke);
  paint-order: stroke fill;
  text-shadow: var(--title-shadow);
}
.sync .lbl { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.85rem; font-weight: 700; color: var(--plum); }
/* (was class "msg", which also picked up the chat bubble's look: off-centre, one sharp corner) */
.sync .verdict {
  margin: 12px auto 0;
  max-width: 30em;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--card-solid);
  font-size: 1.1rem;
  line-height: 1.35;
  color: var(--ink-2);
}

/* "Ποιος ξέρει ποιον": the title with the trophy and the name(s) next to it, nothing else. The trophy always stays
   next to the title. Short of room, several names first go one under the other (a name is never cut), and only
   then does the title break into two lines. */
.who-knows { display: flex; align-items: center; gap: 10px; }
.who-knows > h2 { margin: 0; flex: 0 1 auto; text-align: start; }   /* this title shares its row with the award: it stays at the start */
/* basis 0 + the automatic minimum (trophy + widest name): never narrower than that, and it takes the rest of the row */
/* max-width: what is left when the title is at its narrowest (one word a line). Up to there a name is never cut;
   a name wider than that gets "…" instead of sticking out of the card. */
.who-knows .award { flex: 1 1 0%; gap: 8px; max-width: calc(100% - 70px); }   /* 70 = the title's longest word (60) + the gap */
@media (max-width: 360px) {   /* small phones: a smaller trophy leaves the title room for two lines, not three */
  .who-knows { gap: 8px; }
  .who-knows .award { max-width: calc(100% - 68px); }
  .who-knows .award .ic { width: 38px; height: 38px; font-size: 1.15rem; }
}
@media (max-width: 340px) {   /* the narrowest phones: slightly smaller letters, so an 11-letter name still fits whole */
  .who-knows .award .who { font-size: 0.94rem; }
}
.award { display: flex; gap: 12px; align-items: center; }
.award .ic { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-soft); border: 1.5px solid var(--gold-edge); font-family: var(--emoji); font-size: 1.3rem; }
.award .bd { min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; }

.meter { margin: 6px 0 10px; }
.meter .lbl { display: flex; justify-content: space-between; gap: 10px; font-size: 1rem; }
.meter .bar { height: 8px; border-radius: 6px; background: var(--line-2); overflow: hidden; margin-top: 4px; }
.meter .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-2)); }

/* "Ταιριάζεις καλύτερα με": the player(s), the teamwork score and the category that shows it */
.match .mt-who { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.match .coop { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.match .coop .lbl { text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.85rem; font-weight: 700; color: var(--plum); }
.match .mt-none { margin: 0; }
.match .coop .pct {
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--title-fill);
  -webkit-text-stroke: 1px var(--title-stroke);
  paint-order: stroke fill;
  text-shadow: var(--title-shadow);
}
.match .meter { margin: 6px 0; }
.match .meter .bar { height: 10px; }
.match .mt-why { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--line-2); }
.match .cat { font-weight: 700; color: var(--plum); white-space: nowrap; }
.match .n { color: var(--muted); font-size: 0.9rem; }
.match .mt-whys { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
/* the name and next to it where the two match; next to a long name there is no room, the reason goes under it */
.match .mt-whys li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.match .mt-whys .who { flex: 0 1 auto; font-size: 0.92rem; }
.match .mt-whys .why { flex: 1 1 9em; min-width: 0; }


.cta { text-align: center; border: 1.5px solid var(--gold-edge); background: linear-gradient(var(--gold-soft), var(--gold-soft)), var(--card); }
.cta h2 { margin-bottom: 6px; }

.leave { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin: 18px 0 4px; }
.leave .btn { width: auto; min-height: 44px; margin: 0; font-size: 1rem; }

.privacy { font-size: 0.88rem; color: var(--muted); text-align: center; margin: 12px 0 0; }
.privacy.links { margin-top: 4px; }
.privacy .linkbtn, .privacy a { padding: 4px; font-size: inherit; color: inherit; }
.mystats { margin: 12px 0 0; text-align: center; color: var(--ink-2); font-size: 0.98rem; line-height: 1.5; }

/* ---- the account (optional): a line about who is playing, the login in two steps, the account's own page ---- */
.acc-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 6px; margin: -6px 0 14px; color: var(--muted); font-size: 0.98rem; text-align: center; }
.acc-line b { color: var(--ink); }
.ic-user { width: 1.05em; height: 1.05em; vertical-align: -0.16em; fill: var(--gold); flex: none; }
.kicker .ic-user { width: 1.7em; height: 1.7em; }
.acc-line .linkbtn { padding: 12px 8px; margin: -8px 0; font-size: 0.98rem; color: var(--plum); }   /* a finger-sized target, the line no taller */
.acc-would { margin: 0 0 12px; text-align: center; color: var(--plum); font-weight: 700; font-size: 1.05rem; }
.acc-nudge { text-align: center; border: 1.5px dashed var(--plum-line); }
.acc-nudge .acc-would { margin-bottom: 6px; }
.acc-nudge .small { margin: 0 0 12px; }
.acc-got { margin: -2px 0 12px; text-align: center; color: var(--ok); font-weight: 700; }

/* opened inside another app's browser: the hidden frame that tries to hand the page to the phone's browser (nothing is shown) */
.iab-frame { position: absolute; width: 0; height: 0; border: 0; visibility: hidden; }

/* ---------- a question a player suggests (the very bottom of the results) ---------- */
.sug textarea.field { display: block; min-height: 5.6em; resize: vertical; font: inherit; font-size: 1.05rem; font-weight: 500; line-height: 1.3; color: inherit; }
.sug .sug-ok { margin: 2px 0 4px; text-align: center; color: var(--ok); font-weight: 700; }
.acc-sent { margin: 0 0 12px; }
.acc-mail { overflow-wrap: anywhere; color: var(--ink); }
.acc-dev { margin: 0 0 12px; padding: 8px 12px; border: 1.5px dashed var(--gold-edge); border-radius: 10px; color: var(--plum); font-size: 0.95rem; }
.acc-dev b { font-size: 1.15rem; letter-spacing: 0.12em; color: var(--ink); white-space: nowrap; }
.field.acc-code { text-align: center; font-size: 1.6rem; letter-spacing: 0.3em; font-variant-numeric: tabular-nums; padding-left: 0.3em; }
.field.acc-code::placeholder { letter-spacing: normal; font-size: 1.1rem; }
.acc-help { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 8px; margin: 12px 0 0; text-align: center; }
.acc-help .linkbtn { padding: 12px 6px; font-size: inherit; }
.acc-how { margin: 12px 0 0; text-align: center; }
/* An invite: a guest picks one of two ways in. Under each button, a line that says what it means. */
.inv-how { font-weight: 700; margin: 6px 0 10px; text-align: center; }
.inv-how ~ .btn { margin-bottom: 4px; }
.inv-note { margin: 0 0 14px; text-align: center; }
.inv-note:last-child { margin-bottom: 2px; }
.room-sub + .acc-line { margin-top: 8px; }   /* an invite seen by an account: its line, a little under the room's */
.wrap > .privacy + .btn { margin-top: 14px; }   /* the login page: its small print, then "back" */
.acc-name { margin: 0 0 10px; text-align: center; font-size: 1.25rem; overflow-wrap: anywhere; }
.acc-stats { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.acc-stats li { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: 10px; background: var(--plum-soft); text-align: center; }
.acc-stats b { font-size: 1.5rem; font-variant-numeric: tabular-nums; line-height: 1.1; }
.acc-stats span { font-size: 0.85rem; color: var(--muted); }
.acc-out > p { margin: 4px 0 0; }
.acc-out .linkbtn { padding: 12px 8px; }
.board-foot .linkbtn { padding: 12px 6px; margin: -8px 0; font-size: inherit; color: var(--plum); }

/* ---------- chat ---------- */
/* Room for the bar at the end of the page, as tall as the bar really is (--dock-h, set by fitChat() in app.js: since
   1.2.7 the bar has 2-3 lines, and on the pages outside a room the general chat's title and quick emoji too). */
body.has-chat .site-foot { padding-bottom: calc(var(--dock-h, 110px) + 40px); }
body.has-chat .toast { bottom: calc(var(--dock-h, 110px) + 26px); }
body.chat-open { overflow: hidden; }

/* phone: the bar at the bottom (last line + box) */
.chat-dock {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 12;
  padding: 6px 12px calc(8px + env(safe-area-inset-bottom));
  /* the chat must stand out from the page (the owner, 1.2.3): a warmer panel, a thick gold edge, a deeper shadow */
  background: linear-gradient(180deg, #3d2e13 0%, #2f2414 55%, var(--card-solid) 100%);
  border-top: 3px solid var(--gold);
  box-shadow: 0 -10px 24px rgba(0, 0, 0, 0.55), 0 -1px 10px rgba(255, 183, 0, 0.18);
}
.chat-dock > * { max-width: 540px; margin-left: auto; margin-right: auto; }
.dock-last[hidden], .chat-top[hidden], .chat-err[hidden], .chat-name[hidden], .chat-quick[hidden] { display: none; }
.dock-last {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  padding: 4px 10px;
  border: 1px solid var(--plum-line);   /* the last messages sit in a frame of their own: plainly something to tap */
  border-radius: 10px;
  background: rgba(233, 217, 166, 0.1);
  text-align: left;
  font-size: 1.12rem;   /* (1rem until 1.2.7: the owner wants the chat's letters bigger) */
}
.dock-last:active { background: var(--gold-soft); }
.dock-last .ic { flex: none; font-family: var(--emoji); font-size: 1.1rem; }
/* the newest messages, one line each («Όνομα: κείμενο», cut with "…"): 3, or 2 on a short screen (see drawLast()) */
.dock-last .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; color: var(--ink-2); }
.dock-last .ln { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.3; }
.dock-last .txt b { color: var(--ink); }
.dock-last .hint, .dock-last .sysline { color: var(--muted); font-style: italic; }
/* the general chat (since 1.2.7): its title over the lines, a line when a message did not go, the name of a guest who
   writes for the first time, the quick emoji under the box */
.chat-top { margin: 0 auto 4px; font-size: 0.95rem; font-weight: 700; color: var(--plum); letter-spacing: 0.02em; text-align: center; }
.chat-err { margin: 6px auto 0; color: var(--bad); font-weight: 700; font-size: 0.95rem; text-align: center; }
.chat-name { margin-top: 6px; }
.chat-name label { font-size: 0.95rem; margin: 0 0 4px; text-align: center; }
.chat-name .field { margin: 0; min-height: 46px; padding: 8px 12px; font-size: 1.15rem; border-color: var(--gold-edge); }
.chat-panel .chat-err, .chat-panel .chat-name { padding: 0 16px; }
.dock-quick { padding: 6px 0 0; }
.dock-quick button { min-height: 38px; }
/* G-Factor in the general chat: the name in gold with the round gold mark (the numbered steps' look), its bubble lit */
.gf-mark {
  display: inline-grid;
  place-items: center;
  width: 1.15em; height: 1.15em;
  margin-left: 0.25em;
  border-radius: 50%;
  background: var(--gold-soft);
  border: 1.5px solid var(--gold-edge);
  color: var(--gold-2);
  font-size: 0.8em;
  font-weight: 800;
  line-height: 1;
  vertical-align: middle;
}
.dock-last b.gf, .who.gf .wn { color: var(--gold-2); }
.who.gf { background: var(--gold-soft); border-color: var(--gold-edge); }
.msg.gf { border-color: var(--gold-edge); box-shadow: 0 0 0 1px var(--gold-soft), 0 2px 10px rgba(255, 183, 0, 0.18); }
.msg.gf a { color: var(--gold-2); text-decoration: underline; overflow-wrap: anywhere; }
.dock-last .up { flex: none; color: var(--muted); font-weight: 800; font-size: 1.1rem; line-height: 1; padding-top: 6px; }
.dock-last .badge {
  flex: none;
  min-width: 22px; height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  display: grid; place-items: center;
  background: #b3261e;
  color: #fff;
  font: 700 0.78rem/1 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
.dock-last.new { animation: glow 1.6s ease-out; }
@keyframes glow {
  0% { background: var(--gold-soft); box-shadow: inset 0 0 0 2px var(--gold-edge); }
  100% { background: rgba(233, 217, 166, 0.1); box-shadow: inset 0 0 0 2px transparent; }
}
.dock-form { display: flex; gap: 8px; margin-top: 6px; }
.dock-form .field { flex: 1; min-width: 0; margin: 0; min-height: 46px; padding: 8px 12px; font-size: 1.15rem; border-color: var(--gold-edge); }
.dock-form .btn { flex: none; width: 56px; min-height: 46px; margin: 0; padding: 0; font-size: 1.2rem; }

/* the whole chat: over the game on a phone, a column next to it on a wide screen */
.chat-panel {
  position: fixed;
  left: 0; right: 0; top: 0;
  height: 100%;
  z-index: 15;
  background-color: var(--paper);
  background-image: linear-gradient(rgba(12, 9, 5, 0.94), rgba(12, 9, 5, 0.94)), url('bg.webp');
  background-size: auto, 760px auto;
}
.chat-box { max-width: 540px; height: 100%; margin: 0 auto; display: flex; flex-direction: column; }
/* the room's chat: no title, only the close button (the heading is hidden, for screen readers); the general chat shows
   its title («Συζήτηση · N online») on the left of it */
.chat-head { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: calc(10px + env(safe-area-inset-top)) 16px 10px; border-bottom: 1px solid var(--line); }
.chat-panel[data-ch='g'] .chat-head { justify-content: space-between; }
.chat-head h2 { flex: 1; min-width: 0; font-size: 1.1rem; color: var(--plum); }
.chat-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  margin: 0;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chat-empty { margin: auto 0; text-align: center; color: var(--muted); font-style: italic; padding: 0 12px; }
.chat-list .sys { align-self: center; max-width: 92%; text-align: center; font-size: 0.88rem; color: var(--muted); font-style: italic; padding: 2px 10px; border-radius: 999px; background: var(--plum-soft); }
.msg {
  align-self: flex-start;
  max-width: 86%;
  padding: 6px 10px 4px;
  border-radius: 14px 14px 14px 4px;
  background: var(--card-solid);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(40, 25, 5, 0.12);
}
/* (bigger since 1.2.7, the owner: «τα γράμματα του τσατ επίσης να είναι πιο μεγάλα»: 0.8 / 1.05 / 0.72rem before) */
.msg .who { font-size: 0.92rem; margin: 0 0 3px; }
.msg .tx { display: block; overflow-wrap: anywhere; white-space: pre-wrap; font-size: 1.2rem; line-height: 1.3; }
.msg time { display: block; text-align: right; font-size: 0.8rem; color: var(--muted); margin-top: 1px; }
/* inside a message: the name, the text and the time in the middle (the owner, 2026-11-14); the bubbles stay on
   their sides (the others' left, mine right) */
.msg { text-align: center; }
.msg time { text-align: center; }
.msg.mine {
  align-self: flex-end;
  border-radius: 14px 14px 4px 14px;
  border-color: var(--gold-edge);
  background: linear-gradient(var(--gold-soft), var(--gold-soft)), var(--card-solid);
}
.msg.mine time { color: var(--ink-2); }   /* on the gold bubble the usual grey was hard to read */
.msg.big { background: transparent; border-color: transparent; box-shadow: none; }
.msg.big .tx { font-family: var(--emoji); font-size: 2.1rem; line-height: 1.1; }
.chat-quick { display: flex; gap: 6px; padding: 8px 16px 0; overflow-x: auto; }
.chat-quick button {
  flex: none;
  min-width: 46px; min-height: 42px;
  border-radius: 10px;
  border: 1.5px solid var(--line);
  background: var(--card-solid);
  font-family: var(--emoji);
  font-size: 1.25rem;
}
.chat-form { display: flex; gap: 8px; padding: 8px 16px calc(10px + env(safe-area-inset-bottom)); }
.chat-form .field { flex: 1; min-width: 0; margin: 0; min-height: 50px; font-size: 1.15rem; }
.chat-form .btn { flex: none; width: auto; margin: 0; min-height: 50px; padding: 10px 16px; font-size: 1rem; }

/* wide screen: a column next to the game, under the site's header, that stays in view down to the footer */
@media (min-width: 980px) {
  body.chat-side .stage { display: flex; align-items: flex-start; }
  /* The game in the middle of the PAGE (under the site's logo), not of the space left of the column: an empty strip
     on the left as wide as the column (380 px), or as wide as the room allows without making the game narrower
     than its 540 px (100% = the page's width here). */
  body.chat-side #app { flex: 1; min-width: 0; padding-left: clamp(0px, calc(100% - 920px), 380px); }
  body.chat-side .chat-panel {
    position: sticky;
    top: var(--head-h);
    left: auto; right: auto;
    flex: none;
    width: 380px;
    height: calc(100vh - var(--head-h));
    height: calc(100dvh - var(--head-h));
    z-index: 5;
    border-left: 3px solid var(--gold);
    box-shadow: -10px 0 24px rgba(0, 0, 0, 0.5);
    background-image: linear-gradient(rgba(40, 30, 15, 0.96), rgba(40, 30, 15, 0.96)), url('bg.webp');   /* warmer than the page */
  }
  body.chat-side .chat-head { display: none; }   /* the column is always open: no close button, so no bar at all */
  /* ...but the general chat keeps its title on top of the column (without the close button) */
  body.chat-side .chat-panel[data-ch='g'] .chat-head { display: flex; padding-top: 10px; }
  body.chat-side .chat-head .x { display: none; }
}

/* ---------- connection + toast ---------- */
.conn {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 20;
  padding: calc(8px + env(safe-area-inset-top)) 16px 8px;
  text-align: center;
  font-weight: 700;
  font-size: 0.95rem;
  background: #b3261e;   /* a deep red: white letters on it are easy to read (the theme's light red was not) */
  color: #fff;
}
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 30;
  transform: translate(-50%, 20px);
  max-width: calc(100% - 32px);
  width: max-content;
  padding: 12px 18px;
  border-radius: 12px;
  background: #1a1108;
  color: #f6ecd0;
  font-weight: 600;
  font-size: 1rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- a story on Instagram (since 1.2.8) ---------- */
/* the lobby's «📸 Story στο Instagram», full width under the invite's row */
.row2 + .btn { margin-top: 10px; }
/* the first page's (since 1.2.9): slim, as wide as its words, in the middle under «Πώς παίζεται» */
.st-home { margin: 2px 0 0; text-align: center; }
.st-home .btn { display: inline-flex; width: auto; max-width: 100%; margin: 0; }
/* the picture's small window, when the phone cannot share a picture: over everything but the toast; the picture as
   tall as the screen allows with the line and the button under it (the window scrolls on a very short screen) */
body.st-open { overflow: hidden; }
.st-ov {
  position: fixed;
  inset: 0;
  z-index: 25;
  display: flex;
  padding: calc(12px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom));
  background: rgba(5, 4, 3, 0.84);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.st-box {
  width: 100%;
  max-width: 420px;
  margin: auto;
  padding: 8px 14px 4px;
  border-radius: 16px;
  border: 1.5px solid var(--gold-edge);
  background: var(--card-solid);
  box-shadow: var(--shadow);
  text-align: center;
}
.st-box:focus:not(:focus-visible) { outline: none; }
.st-top { display: flex; justify-content: flex-end; margin-bottom: 6px; }
.st-img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: min(70vh, calc(100vh - 270px));
  max-height: min(70dvh, calc(100dvh - 270px));
  margin: 0 auto 10px;
  border-radius: 10px;
  aspect-ratio: 9 / 16;
}
.st-txt { margin: 0 0 12px; font-size: 1rem; line-height: 1.35; color: var(--ink-2); overflow-wrap: anywhere; }

/* ---------- someone left the room (since 1.2.8): a notice fixed at the top, like the connection line ---------- */
/* Over the page (which does not move under it), under the phone's whole chat (z 15) and the story's window; never
   over the chat bar at the bottom. On a wide screen it stays over the game, left of the chat's column (380 px). */
.lf-note {
  position: fixed;
  top: calc(8px + env(safe-area-inset-top));
  left: 50%;
  z-index: 14;
  width: calc(100% - 24px);
  max-width: 516px;
  transform: translateX(-50%);
  padding: 10px 52px 12px 14px;
  border-radius: 14px;
  border: 1.5px solid var(--gold-edge);
  background: var(--card-solid);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
  text-align: center;
}
.lf-txt { margin: 0 0 8px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.lf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lf-row .btn { margin: 0; min-height: 44px; padding: 6px 8px; font-size: 1rem; }
.lf-x { position: absolute; top: 8px; right: 8px; }
@media (min-width: 980px) {
  body.chat-side .lf-note { left: calc(50% - 190px); }
}

/* ---------- gfg.gr's own mouse cursor: computers only (since 1.2.8) ---------- */
/* The site's gold dot and fading footprints (its «GOLD CURSOR BALL» and «CURSOR TRAIL»), the site's own values. The
   system cursor is hidden only under html.gfg-cursor, which app.js sets when it starts them (cursorInit()): a touch
   screen, or a page where the script did not run, keeps the normal cursor. */
html.gfg-cursor, html.gfg-cursor * { cursor: none !important; }
.cursor-wrapper {
  width: 6px;
  height: 6px;
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
  z-index: 2147483647;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, #fff 100%, #fff7b1 25%, #ffcb3c 55%, rgba(0, 0, 0, 0) 100%);
  box-shadow: 0 0 40px 20px rgba(255, 200, 60, 0.25), 0 0 90px 25px rgba(255, 190, 40, 0.18), 0 0 0px 0px rgba(0, 0, 0, 0.55);
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}
.cursor-wrapper.hovering {
  transform: translate(-50%, -50%) scale(1.8);
  box-shadow: 0 0 12px #ffe380, 0 0 22px #ffcf4d, 0 0 32px #ffc300, 0 0 55px #ffb200;
}
.footprint { position: fixed; pointer-events: none; z-index: 9999; opacity: 0.4; transition: opacity 1.2s ease; }

.loading { text-align: center; padding: 60px 0; color: var(--muted); }

@media (min-width: 600px) {
  .wrap { padding-top: 10px; }
}

/* ---------- the site's frame: gfg.gr's header and footer around the game ---------- */
/* Both languages are in the page; the game's language (html[lang]) shows one. */
html[lang="el"] .l-en, html[lang="en"] .l-el { display: none !important; }

.site-head {
  position: relative;
  z-index: 11;
  background: var(--frame);
  border-bottom: 1.5px solid var(--gold-edge);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
.sh-bar {
  max-width: 1280px;
  margin: 0 auto;
  min-height: var(--head-h);
  padding: env(safe-area-inset-top) 12px 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.sh-nav { display: none; }
.sh-logo a { display: block; border-radius: 8px; }
.sh-logo img { display: block; width: 50px; height: 50px; }
.sh-mob { display: flex; align-items: center; gap: 8px; }
.sh-quick, .sh-burger {
  min-width: 46px;
  min-height: 44px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1.5px solid rgba(218, 165, 32, 0.55);
  background: transparent;
  color: var(--frame-gold);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
}
.sh-quick:hover, .sh-burger:hover { border-color: var(--frame-gold); }
.sh-burger { display: grid; place-items: center; }
.sh-burger .bars, .sh-burger .bars::before, .sh-burger .bars::after {
  content: '';
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--frame-gold);
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.sh-burger .bars { position: relative; }
.sh-burger .bars::before, .sh-burger .bars::after { position: absolute; left: 0; }
.sh-burger .bars::before { top: -7px; }
.sh-burger .bars::after { top: 7px; }
.sh-burger[aria-expanded="true"] .bars { background: transparent; }
.sh-burger[aria-expanded="true"] .bars::before { transform: translateY(7px) rotate(45deg); }
.sh-burger[aria-expanded="true"] .bars::after { transform: translateY(-7px) rotate(-45deg); }

.sh-drawer {
  border-top: 1px solid rgba(218, 165, 32, 0.3);
  padding: 4px 16px 16px;
  max-height: calc(100vh - var(--head-h));
  max-height: calc(100dvh - var(--head-h));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.sh-drawer ul { list-style: none; margin: 0; padding: 0; }
.sh-drawer > ul > li { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.sh-drawer a { display: flex; align-items: center; min-height: 48px; color: var(--frame-ink); text-decoration: none; font-size: 1.15rem; font-weight: 600; }
.sh-drawer .sub { padding: 0 0 6px 16px; }
.sh-drawer .sub a { min-height: 42px; font-size: 1.04rem; font-weight: 500; color: #e9dfc4; }
.sh-drawer a:hover, .sh-drawer a:focus-visible { color: var(--frame-hover); }
.sh-drawer .langs { display: flex; align-items: center; gap: 10px; padding: 12px 0 2px; border-bottom: 0; }
.sh-drawer .langs .lbl { margin-right: auto; color: var(--muted); font-size: 1rem; }
[data-setlang] {
  min-height: 42px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1.5px solid rgba(218, 165, 32, 0.5);
  background: transparent;
  color: var(--frame-ink);
  font-weight: 600;
}
html[lang="el"] [data-setlang="el"], html[lang="en"] [data-setlang="en"] { background: var(--frame-gold); border-color: var(--frame-gold); color: #000; }

@media (min-width: 980px) {
  :root { --head-h: 88px; }
  .site-head { position: sticky; top: 0; }
  .sh-bar { display: grid; grid-template-columns: 1fr auto 1fr; gap: 28px; padding: 0 24px; }
  .sh-nav { display: block; }
  .sh-mob, .sh-drawer { display: none !important; }
  .sh-logo img { width: 74px; height: 74px; }
  .sh-menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 4px 26px; }
  .sh-left .sh-menu { justify-content: flex-end; }
  .sh-right .sh-menu { justify-content: flex-start; }
  .sh-menu > li { position: relative; display: flex; align-items: center; }
  .sh-menu > li > a, .sh-langbtn {
    padding: 12px 0;
    border: 0;
    background: none;
    color: var(--frame-ink);
    text-decoration: none;
    font-size: 1.14rem;
    font-weight: 600;
    white-space: nowrap;
  }
  .sh-menu > li > a:hover, .sh-langbtn:hover, .has-sub:hover > a, .has-sub.open > a, .has-sub.open > .sh-langbtn { color: var(--frame-gold); }
  .sh-tg:not(.sh-langbtn) { border: 0; background: none; color: var(--frame-gold); padding: 6px 2px 6px 5px; font-size: 0.9rem; }
  .sh-sub {
    display: none;
    position: absolute;
    top: 100%;
    left: -16px;
    z-index: 12;
    min-width: 270px;
    list-style: none;
    margin: 0;
    padding: 8px 0;
    background: #050403;
    border: 1px solid var(--gold-edge);
    border-radius: 10px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.6);
  }
  .sh-lang .sh-sub { left: auto; right: -16px; min-width: 170px; }
  .has-sub:hover > .sh-sub, .has-sub:focus-within > .sh-sub, .has-sub.open > .sh-sub { display: block; }
  .sh-sub a, .sh-sub button {
    display: block;
    width: 100%;
    min-height: 0;
    padding: 9px 18px;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--frame-ink);
    text-align: left;
    text-decoration: none;
    font-size: 1.04rem;
    font-weight: 500;
    white-space: nowrap;
  }
  .sh-sub a:hover, .sh-sub button:hover, .sh-sub a:focus-visible, .sh-sub button:focus-visible { background: rgba(218, 165, 32, 0.14); color: var(--frame-hover); }
  html[lang="el"] .sh-sub [data-setlang="el"], html[lang="en"] .sh-sub [data-setlang="en"] { background: none; color: var(--frame-gold); font-weight: 700; }
}

.site-foot {
  margin-top: 36px;
  padding: 34px 16px calc(26px + env(safe-area-inset-bottom));
  background: var(--frame);
  color: var(--frame-ink);
  border-top: 1.5px solid var(--gold-edge);
}
.sf-in { max-width: 1100px; margin: 0 auto; }
.sf-social { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.sf-social a {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--frame-gold);
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.sf-social a:hover, .sf-social a:focus-visible { background: var(--frame-hover); transform: translateY(-2px); }
.sf-social .ic { width: 22px; height: 22px; fill: #000; }
.sf-cols { display: grid; gap: 30px; justify-content: center; }
.sf-col { text-align: center; }
.sf-h { margin: 0 0 14px; color: var(--frame-gold); font-size: 1.9rem; font-weight: 600; line-height: 1.1; }
.sf-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 1.08rem; }
.sf-list li { text-align: center; }   /* phone: the icon stays next to the first line, centred with the text */
.sf-list .ic { display: inline-block; width: 18px; height: 18px; margin-right: 9px; vertical-align: -3px; fill: var(--frame-gold); }
.sf-list a { color: var(--frame-ink); text-decoration: none; overflow-wrap: anywhere; }
.sf-list a:hover, .sf-list a:focus-visible { color: var(--frame-hover); text-decoration: underline; }
.sf-hours b { font-weight: 600; white-space: nowrap; }
.sf-copy { margin: 30px 0 0; text-align: center; font-size: 0.9rem; color: rgba(255, 255, 255, 0.55); }
@media (min-width: 760px) {
  .sf-cols { grid-template-columns: repeat(2, minmax(0, 420px)); gap: 40px; }
  .sf-col { text-align: left; }
  .sf-list li { display: flex; align-items: baseline; text-align: left; }
  .sf-list .ic { flex: none; align-self: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}