/* Θέμα "riso collage": τυπωμένο σε σκούρο χαρτί με δύο μελάνια (κρεμ + κεχριμπάρι),
   κομμένα-στο-χέρι γράμματα, χαρτάκια-εισιτήρια, κουκκίδες αντί για λάμψεις. */
:root {
  --bg: #10141c;
  --bg-2: #161c28;
  --card: #e9dfc6; /* χαρτί */
  --card-2: #d9cdae;
  --line: #3a4152;
  --text: #efe6d0; /* κρεμ μελάνι */
  --muted: #9a917a;
  --brass: #f2a900; /* κεχριμπάρι μελάνι (όνομα από παλιότερο θέμα) */
  --brass-dim: rgba(242, 169, 0, 0.45);
  --brass-soft: rgba(242, 169, 0, 0.1);
  --ink: #171a22; /* σκούρο κείμενο πάνω σε χαρτί */
  --ink-soft: #6b5f45;
  --navy: #313c58;
  --good: #9fd1a8;
  --bad: #e8795f; /* κόκκινο πάνω σε σκούρο */
  --bad-ink: #b02a16; /* κόκκινο πάνω σε χαρτί */
  --warn: #f2a900;
  --shadow: 5px 6px 0 #05070a;
  /* Fira Sans Extra Condensed: έχει ελληνικά. Roboto Mono για τις μικρές ετικέτες. */
  --display: "Fira Sans Extra Condensed", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  --mono: "Roboto Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
/* κόκκος τυπωμένου χαρτιού πάνω απ' όλα */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 70; pointer-events: none; opacity: 0.2;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='4'/><feColorMatrix type='matrix' values='0 0 0 0 .95  0 0 0 0 .92  0 0 0 0 .84  1.9 0 0 0 -.78'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
/* δέσμη από κουκκίδες (halftone) πίσω από το περιεχόμενο */
body::before {
  content: ""; position: fixed; z-index: -2; pointer-events: none; top: 0; left: 36%; width: 70%; height: 66vh; opacity: 0.4;
  background: radial-gradient(circle at 3.5px 3.5px, var(--text) 1.7px, transparent 2px) 0 0 / 7px 7px;
  clip-path: polygon(0 0, 100% 0, 88% 100%, 14% 100%);
  -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent);
}
button, input { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

#app { max-width: 520px; margin: 0 auto; padding: 12px 16px 40px; }
.view { display: flex; flex-direction: column; gap: 16px; }
.view.enter > * { animation: rise 0.28s ease both; }
.view.enter > *:nth-child(2) { animation-delay: 0.04s; }
.view.enter > *:nth-child(3) { animation-delay: 0.08s; }
.view.enter > *:nth-child(4) { animation-delay: 0.12s; }
/* translate (όχι transform) ώστε να μη σβήνει η κλίση των χαρτιών */
@keyframes rise { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }

/* ── κολάζ γράμματα ── */
.rn { display: flex; flex-wrap: wrap; align-items: flex-end; filter: drop-shadow(2px 3px 0 #05070a); }
.rn-w { display: inline-flex; align-items: flex-end; white-space: nowrap; }
.rn-c {
  display: inline-block; margin: 0 -1px; line-height: 1; font-family: var(--display); font-weight: 800;
  clip-path: polygon(0 3%, 5% 0, 95% 2%, 100% 0, 99% 96%, 93% 100%, 4% 98%, 0 100%);
}
.rn.center { justify-content: center; }

/* ── top bar ── */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; }
.topbar .round { flex: 1; display: flex; justify-content: center; }
.topbar .round .rn, .topbar .round .rn-w { flex-wrap: nowrap; }
.tools { display: flex; gap: 6px; }
.icon-btn, .chip {
  background: transparent; border: 1.5px solid currentColor; border-radius: 0; padding: 8px 12px; cursor: pointer; color: var(--text);
}
.icon-btn { width: 42px; height: 42px; padding: 0; font-size: 18px; }
.chip { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; transform: rotate(-1.5deg); }
.chip b { letter-spacing: 3px; margin-left: 4px; color: var(--brass); }
.card .icon-btn { color: var(--ink); }

/* ── κάρτες: χαρτάκια-εισιτήρια ── */
.card {
  position: relative;
  background: var(--card); color: var(--ink);
  border: 0; border-radius: 0; padding: 18px 18px 20px;
  box-shadow: var(--shadow);
}
.view > .card:nth-child(3n + 1) { transform: rotate(-0.5deg); }
.view > .card:nth-child(3n + 2) { transform: rotate(0.5deg); }
.card::before, .card::after { /* οπές διάτρησης */
  content: ""; position: absolute; top: 44px; width: 14px; height: 14px; border-radius: 50%; background: var(--bg);
}
.card::before { left: -7px; }
.card::after { right: -7px; }
.card.center { text-align: center; }
.eyebrow { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.14em; font-size: 11px; color: var(--brass); font-weight: 700; }
.card .eyebrow, .card h3, .card label { color: var(--ink-soft); }
.muted { color: var(--muted); }
.card .muted, .card .hint { color: var(--ink-soft); }
.small { font-size: 14px; }
.question { font-family: var(--display); font-size: 40px; line-height: 0.98; margin: 8px 0 16px; font-weight: 800; text-transform: uppercase; }
.question.big { font-size: 48px; }
h2 { font-family: var(--display); font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; }
h3 { font-family: var(--mono); font-size: 11px; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--brass); }

/* ── αρχική: νυχτερινή πόλη με κουκκίδες ── */
.hero-wrap { position: relative; margin: -12px -16px 0; }
.hero-wrap .lang-switch { position: absolute; top: calc(12px + env(safe-area-inset-top)); right: 16px; margin: 0; z-index: 2; }
.hero { -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.hero svg { display: block; width: 100%; height: auto; overflow: visible; }
/* οι δέσμες σαρώνουν αριστερά-δεξιά από τη βάση τους */
.hero .beam { transform-origin: -10px 336px; animation: sweep 7s ease-in-out infinite alternate; }
.hero .beam-b { animation-duration: 9s; animation-delay: -3s; animation-direction: alternate-reverse; }
.hero .lamp-cone { animation: lamp 5s ease-in-out infinite alternate; }
@keyframes sweep { from { transform: rotate(-5deg); } to { transform: rotate(7deg); } }
@keyframes lamp { from { opacity: 0.6; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hero .beam, .hero .lamp-cone, .blink { animation: none; } }
.hero-text { margin-top: -30px; display: flex; flex-direction: column; gap: 10px; position: relative; }
.hero-text .eyebrow { align-self: flex-start; background: #e9dcb4; color: var(--ink); padding: 3px 9px; transform: rotate(-3deg); letter-spacing: 0.06em; font-size: 11px; }
.hero-text h1 { margin: 6px 0 0 -2px; }
.hero-text .tagline { color: var(--muted); max-width: 330px; }

/* ── buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 2px solid var(--text); border-radius: 0; padding: 12px 18px; cursor: pointer; color: var(--text);
  background: transparent; font-family: var(--display); font-weight: 800; font-size: 21px; letter-spacing: 0.08em; text-transform: uppercase;
  transition: transform 0.06s, filter 0.15s;
}
.card .btn { border-color: var(--ink); color: var(--ink); }
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translate(2px, 2px); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; filter: none; }
.btn.primary { background: var(--brass); border-color: var(--brass); color: var(--ink); box-shadow: 4px 4px 0 var(--text); }
.card .btn.primary { border-color: var(--brass); box-shadow: 3px 3px 0 var(--ink); }
.btn.ghost { background: transparent; }
.btn.danger { background: var(--bad-ink); border-color: var(--bad-ink); color: var(--text); }
.card .btn.danger { color: var(--text); }
.btn.block { width: 100%; }
.btn.sm { padding: 7px 12px; font-size: 16px; letter-spacing: 0.06em; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; gap: 10px; align-items: center; }
.row.between { justify-content: space-between; }

/* ── inputs: υπογραμμισμένα πεδία ── */
label { display: block; font-family: var(--mono); font-size: 10px; color: var(--brass); margin-bottom: 2px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; }
input[type="text"], input[type="tel"], input[type="search"] {
  width: 100%; background: transparent; color: var(--ink); border: 0; border-bottom: 2px solid var(--ink); border-radius: 0;
  padding: 4px 0 6px; outline: none; font-family: var(--display); font-weight: 700; font-size: 26px;
}
input::placeholder { color: var(--ink-soft); opacity: 0.7; }
input:focus { box-shadow: 0 3px 0 var(--brass); }
.code-input { letter-spacing: 9px; font-size: 30px; font-weight: 800; }
/* ── γλώσσα ── */
.lang-switch { display: flex; gap: 6px; justify-content: center; margin-top: 4px; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 7px; background: rgba(16, 20, 28, 0.7); color: var(--text); border: 1.5px solid var(--text);
  border-radius: 0; padding: 4px 9px; cursor: pointer; font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
}
.lang-btn:nth-child(odd) { transform: rotate(-2deg); }
.lang-btn:nth-child(even) { transform: rotate(1.5deg); }
.lang-btn.on { background: var(--brass); border-color: var(--brass); color: var(--ink); }
.flag { width: 20px; height: 14px; object-fit: cover; vertical-align: -2px; box-shadow: 0 0 0 1px rgba(23, 26, 34, 0.35); }
.divider { display: flex; align-items: center; gap: 10px; color: var(--ink-soft); font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.divider::before, .divider::after { content: ""; flex: 1; border-top: 1.5px dashed #8d8160; }
.error { color: var(--bad-ink); font-size: 14px; font-weight: 600; }

details.rules { color: var(--ink-soft); font-size: 14px; }
details.rules summary { cursor: pointer; font-weight: 700; color: var(--ink); }
details.rules ol { padding-left: 20px; margin: 10px 0 0; display: flex; flex-direction: column; gap: 6px; }

/* ── avatars & lists: γράμματα-κολάζ ── */
.avatar {
  flex: none; width: 38px; height: 44px; display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 24px;
  clip-path: polygon(0 3%, 5% 0, 95% 2%, 100% 0, 99% 96%, 93% 100%, 4% 98%, 0 100%);
}
.avatar.big { width: 80px; height: 92px; font-size: 52px; margin: 0 auto 10px; }
/* Τα πορτρέτα είναι ήδη τέλεια κυκλικά με δικό τους περίγραμμα — μένουν κύκλος, όχι η οδοντωτή φόρμα εισιτηρίου. */
.avatar.icon { padding: 0; overflow: hidden; background: #e9dcb4; clip-path: circle(50%); }
.avatar.icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-btn { all: unset; cursor: pointer; position: relative; display: inline-block; }
.avatar-btn::after {
  content: "🎭"; position: absolute; right: -2px; bottom: 6px; font-size: 11px; line-height: 1; width: 18px; height: 18px;
  border-radius: 50%; background: var(--brass); display: grid; place-items: center; box-shadow: 0 0 0 2px var(--bg-2);
}
.item .avatar-btn::after { width: 14px; height: 14px; font-size: 8px; right: -3px; bottom: -2px; box-shadow: 0 0 0 2px var(--card); }
.list { display: flex; flex-direction: column; gap: 8px; }
.item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; background: rgba(23, 26, 34, 0.07); border-bottom: 1.5px dashed rgba(107, 95, 69, 0.55); }
.sheet .item { background: rgba(239, 230, 208, 0.06); border-bottom-color: var(--line); }
.item .grow { flex: 1; min-width: 0; }
.item .name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item.off { opacity: 0.5; }
.tag { font-family: var(--mono); font-size: 10px; font-weight: 700; padding: 1px 6px; border: 1px solid currentColor; margin-left: 6px; vertical-align: middle; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); }
.tag.admin { background: var(--brass); color: var(--ink); border-color: var(--brass); }
.tag.me { background: var(--ink); color: var(--text); border-color: var(--ink); }
.sheet .tag { color: var(--muted); }
.sheet .tag.me { background: var(--text); color: var(--ink); border-color: var(--text); }

.code-display {
  display: flex; justify-content: center; width: 100%; background: transparent; border: 0; border-bottom: 2px dashed var(--ink-soft); padding: 8px 0 12px; cursor: pointer; color: inherit;
}

.stepper { display: flex; align-items: center; justify-content: center; gap: 18px; }
.stepper b { font-family: var(--display); font-size: 56px; min-width: 56px; text-align: center; color: var(--ink); line-height: 1; }
.stepper .icon-btn { width: 48px; height: 48px; font-size: 24px; }

/* ── timer: τυπωμένη μπάρα ── */
.timer { position: relative; height: 34px; margin-bottom: 4px; border: 1.5px solid var(--text); overflow: hidden; }
.timer-fill {
  position: absolute; inset: 4px auto 4px 4px; transition: width 0.12s linear;
  background: repeating-linear-gradient(90deg, var(--brass) 0 20px, transparent 20px 24px);
}
.timer.low .timer-fill { background: repeating-linear-gradient(90deg, var(--bad) 0 20px, transparent 20px 24px); }
.timer span {
  position: absolute; right: 6px; top: 50%; translate: 0 -50%; transform: rotate(-2deg); background: var(--bg); padding: 0 8px;
  font-family: var(--display); font-weight: 800; font-size: 26px; line-height: 1.1; color: var(--brass);
}
.timer.low span { color: var(--bad); }

/* ── game views ── */
.qbar { display: flex; gap: 10px; align-items: flex-start; background: var(--brass-soft); border: 1.5px dashed var(--brass); padding: 10px 12px; }
.qbar .grow { flex: 1; font-family: var(--display); font-size: 22px; font-weight: 800; text-transform: uppercase; line-height: 1.05; }
.qbar .eyebrow { font-family: var(--mono); }

.banner-card { padding: 14px 16px; margin-top: 4px; text-align: left; }
.banner-card.impostor { background: var(--bad-ink); color: var(--text); }
.banner-card.innocent { background: var(--navy); color: var(--text); }
.banner-card b { display: block; font-family: var(--display); font-size: 24px; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 4px; }

/* Κράτα-πατημένο για τον ρόλο: η οθόνη δεν αποκαλύπτει τίποτα όσο δεν πατάς. */
.peek {
  margin-top: 14px; padding: 13px 16px; border: 1.5px dashed var(--muted); text-align: center;
  color: var(--text); font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; cursor: pointer;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none;
}
.card .peek { color: var(--ink-soft); border-color: var(--ink-soft); }
.peek.compact { margin-top: 0; padding: 10px 12px; font-size: 11px; }
.peek .peek-role { display: none; margin: 0; color: var(--text); font-family: system-ui, sans-serif; font-size: 16px; letter-spacing: 0; text-transform: none; font-weight: 500; }
.peek.held { padding: 0; border: 0; }
.peek.held .peek-idle { display: none; }
.peek.held .peek-role { display: block; }
.peek.compact.held .peek-role { text-align: center; }
.peek.compact .peek-role b { margin: 0; }

.spotlight { text-align: center; }
.spotlight.me { box-shadow: 0 0 0 3px var(--brass), var(--shadow); }
.spotlight .rn { justify-content: center; margin: 4px 0 8px; }
.answer { margin: 14px 0; font-family: var(--display); font-size: 36px; line-height: 1.05; font-weight: 800; text-transform: uppercase; padding: 14px; background: #f6efdc; border: 2px solid var(--ink); word-break: break-word; }
.answer.none { font-family: inherit; font-size: 16px; text-transform: none; color: var(--ink-soft); font-weight: 500; }

.order { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.order li { font-family: var(--mono); font-size: 12px; padding: 5px 10px; border: 1px solid var(--line); color: var(--muted); }
.order li.done { color: var(--good); border-color: rgba(159, 209, 168, 0.4); }
.order li.now { background: var(--brass); border-color: var(--brass); color: var(--ink); font-weight: 700; }

.answers .item .a { font-family: var(--display); font-weight: 700; font-size: 22px; line-height: 1.1; }
.answers .item.imp { background: rgba(176, 42, 22, 0.14); }

/* Αποτελέσματα: κάθε γραμμή + από κάτω οι "φυσαλίδες" όσων τον ψήφισαν. Το διαχωριστικό περίγραμμα
   μετακινείται στην εξωτερική σειρά (result-row), ώστε να εμφανίζεται ΜΕΤΑ τις φυσαλίδες, όχι ανάμεσα. */
.result-row { border-bottom: 1.5px dashed rgba(107, 95, 69, 0.55); padding-bottom: 4px; }
.result-row:last-child { border-bottom: 0; }
.result-row .item { border-bottom: 0; }
.result-row.imp { border-bottom-color: var(--bad-ink); }
.voters-row { display: flex; flex-wrap: wrap; gap: 10px; padding: 6px 10px 8px 50px; }
.voter-bubble { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 46px; }
.voter-bubble .avatar.tiny { width: 36px; height: 36px; font-size: 14px; }
.voter-bubble .voter-name { font-size: 10px; font-weight: 700; color: var(--ink-soft); text-align: center; line-height: 1.15; max-width: 46px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pick { cursor: pointer; border: 2px solid transparent; }
.pick.sel { background: var(--brass); border-color: var(--ink); color: var(--ink); }
.pick .check { margin-left: auto; font-size: 20px; }

.verdict { font-family: var(--display); font-weight: 800; font-size: 24px; letter-spacing: 0.04em; text-transform: uppercase; padding: 6px 16px; display: inline-block; transform: rotate(-1deg); }
.verdict.good { background: var(--ink); color: var(--brass); }
.verdict.bad { background: var(--bad-ink); color: var(--text); }
.qpair { text-align: left; display: flex; flex-direction: column; gap: 8px; margin: 14px 0; font-size: 14px; }
.qpair div { padding: 10px 12px; background: rgba(23, 26, 34, 0.07); font-size: 15px; }
.qpair div + div { border-top: 1.5px dashed rgba(107, 95, 69, 0.55); }
.qpair .lbl { display: block; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-soft); font-weight: 700; margin-bottom: 2px; }
.qpair div:last-child .lbl { color: var(--bad-ink); }
.delta { font-family: var(--mono); font-weight: 700; color: #1f6b3a; }
.sheet .delta { color: var(--good); }
.rank { width: 30px; text-align: center; font-family: var(--display); font-weight: 800; color: var(--ink-soft); font-size: 26px; }
.score { font-family: var(--display); font-weight: 800; font-size: 32px; color: var(--ink); min-width: 30px; text-align: right; }
.sheet .score { color: var(--brass); }
.sheet .rank { color: var(--muted); }

.podium { display: flex; align-items: flex-end; justify-content: center; gap: 10px; margin: 6px 0 18px; }
.podium .step { flex: 1; text-align: center; padding: 10px 6px; background: var(--card-2); color: var(--ink); box-shadow: 4px 4px 0 #05070a; }
.podium .step .avatar { margin: 0 auto 6px; }
.podium .step.p1 { min-height: 160px; background: var(--brass); }
.podium .step.p2 { min-height: 128px; }
.podium .step.p3 { min-height: 104px; }
.podium .medal { font-size: 26px; }
.podium .pname { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium .score { text-align: center; }

/* ── πλέγμα επιλογής χαρακτήρα: μόνο τα στρογγυλά πορτρέτα, χωρίς κάρτα/ετικέτα ── */
/* Ίδιες 4 στήλες σε κινητό και desktop· το sheet φαρδαίνει στο desktop, άρα οι κύκλοι μεγαλώνουν μαζί του. */
.sheet:has(.icon-grid) { max-width: 520px; }
@media (min-width: 640px) { .sheet:has(.icon-grid) { max-width: 620px; } }
@media (min-width: 900px) { .sheet:has(.icon-grid) { max-width: 760px; } }
.icon-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (min-width: 900px) { .icon-grid { gap: 22px; } }
.icon-tile {
  all: unset; display: block; aspect-ratio: 1; cursor: pointer; border-radius: 50%;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: none;
}
.icon-tile img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; background: #e9dcb4; pointer-events: none; }
.icon-tile.mine { box-shadow: 0 0 0 3px var(--brass); }
.icon-tile.taken { opacity: 0.35; cursor: not-allowed; }

/* Μεγέθυνση χαρακτήρα με κράτημα (κινητό: κράτα με τον αντίχειρα· desktop: κράτα πατημένο το κλικ). */
.icon-zoom { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: rgba(5, 7, 10, 0.88); pointer-events: none; animation: fade 0.1s ease; }
.icon-zoom[hidden] { display: none; }
.icon-zoom img { width: min(80vw, 480px); height: min(80vw, 480px); object-fit: cover; border-radius: 50%; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6), 0 0 0 4px rgba(214, 168, 79, 0.6); }

/* ── overlay / modal ── */
.overlay { position: fixed; inset: 0; z-index: 20; background: rgba(5, 7, 10, 0.85); display: flex; align-items: flex-end; justify-content: center; animation: fade 0.15s ease; }
.overlay.full { align-items: stretch; background: var(--bg); overflow-y: auto; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.sheet { width: 100%; max-width: 520px; max-height: 88vh; overflow-y: auto; background: var(--bg-2); border-top: 3px solid var(--brass); padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); animation: rise 0.22s ease; }
.overlay.full .sheet { max-height: none; border: 0; margin: 0 auto; min-height: 100%; background: transparent; }
@media (min-width: 560px) { .overlay { align-items: center; } .sheet { border: 3px solid var(--brass); } }
.sheet .head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.sheet .head h2 { font-size: 28px; }

/* ── misc ── */
.banner { position: fixed; top: 0; left: 0; right: 0; z-index: 80; background: var(--warn); color: var(--ink); text-align: center; padding: 8px; font-weight: 700; font-size: 14px; }
.banner[hidden] { display: none; }
.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); z-index: 90; max-width: 90vw;
  background: var(--text); color: var(--ink); padding: 12px 18px; font-weight: 700; box-shadow: 4px 4px 0 #05070a;
  opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.hint { text-align: center; color: var(--muted); font-size: 14px; padding: 4px 8px; }
.pulse { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.55; } }

/* η πόλη στο φόντο: κομμένο χαρτί, πολύ διακριτική */
.city {
  position: fixed; left: 0; right: 0; bottom: 0; height: 80vh; z-index: -1; pointer-events: none; opacity: 0.4;
  -webkit-mask-image: linear-gradient(transparent 0, #000 30%); mask-image: linear-gradient(transparent 0, #000 30%);
}
.city svg { display: block; width: 100%; height: 100%; }
.blink { animation: blink 7s ease-in-out infinite; }
@keyframes blink { 0%, 38%, 100% { opacity: 1; } 42%, 70% { opacity: 0.08; } 74% { opacity: 1; } }

/* στενά κινητά: η ετικέτα γύρου περνά σε δική της γραμμή αντί να σπρώχνει τα κουμπιά έξω */
@media (max-width: 440px) {
  .topbar { flex-wrap: wrap; row-gap: 10px; }
  .topbar .round { order: 3; flex-basis: 100%; justify-content: flex-start; }
  .icon-btn { width: 38px; height: 38px; }
}