/* Μεγάλη οθόνη: όλα τα μεγέθη σε em, ώστε το fitScreen() (tv.js) να μικραίνει όλη την οθόνη μαζί.
   Κάθε clamp() έχει πριν μια απλή τιμή για παλιούς browsers τηλεόρασης.
   «Αυτοκόλλητα»: χαρτί #fffaf0, περίγραμμα μελάνι #1a1033, σκληρή σκιά προς τα κάτω. */

.tv {
  min-height: 100vh;
  font-size: 22px;
  font-size: clamp(16px, 1.6vw, 40px);
  display: flex;
  flex-direction: column;
}
.no-anim .pop { animation: none; }

.center { text-align: center; margin-top: 40vh; font-weight: 800; }

.banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #ff5d73;
  color: #1a1033;
  border-bottom: 4px solid #1a1033;
  text-align: center;
  padding: 0.5em;
  font-weight: 800;
  z-index: 30;
}

/* ---------- κορυφή ---------- */
.top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0.7em 1.6em 0.3em;
}
.top .logo { justify-self: start; }
.logo.small { font-size: 1.55em; transform: rotate(-3deg); }
.round {
  justify-self: center;
  font-weight: 900;
  font-size: 1.1em;
  background: #fffaf0;
  color: #1a1033;
  border: 3px solid #1a1033;
  box-shadow: 0 4px 0 #1a1033;
  padding: 0.25em 1.1em;
  border-radius: 999px;
  white-space: nowrap;
}
.top-right { justify-self: end; display: flex; align-items: center; }
.top-right > * { margin-left: 0.6em; white-space: nowrap; }
.icon-btn {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.35);
  box-shadow: none;
  padding: 0.35em 0.8em;
  font-size: 0.9em;
  border-radius: 12px;
}
.icon-btn:active { transform: none; box-shadow: none; }
.icon-btn .icon { margin-right: 0.15em; }
.top-right .sound-hint, .top-right .icon-btn { font-size: 0.8em; }
.code-chip {
  background: #fffaf0;
  color: #1a1033;
  border: 3px solid #1a1033;
  padding: 0.25em 0.8em;
  border-radius: 12px;
  font-weight: 800;
  font-size: 0.9em;
  box-shadow: 0 4px 0 #1a1033;
}
.code-chip b { font-family: 'Dela Gothic One', 'Geologica', sans-serif; font-weight: 400; color: #6d3df0; letter-spacing: 0.08em; margin-left: 0.2em; }
.sound-hint {
  background: #ffcf3a;
  color: #1a1033;
  border: 2px solid #1a1033;
  box-shadow: 0 3px 0 #1a1033;
  padding: 0.35em 0.9em;
  font-size: 0.8em;
  border-radius: 12px;
  animation: wobble 1.6s ease-in-out infinite;
}

/* ---------- Lobby ----------
   Αριστερά η στήλη με λογότυπο, παίκτες, QR/κωδικό και credits. Δεξιά η «σκηνή» με τις αφίσες. */
.lobby {
  flex: 1;
  display: grid;
  grid-template-columns: 19em 1fr;
  grid-gap: 1.6em;
  padding: 1em 1.6em 1.1em;
}
.side {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: rgba(18, 8, 51, 0.55);
  border: 3px solid rgba(255, 255, 255, 0.16);
  border-radius: 28px;
  padding: 0.9em 1em 0.8em;
}
.side-brand { text-align: center; }
.brand-bubble {
  position: relative;
  display: inline-block;
  background: #fffaf0;
  border: 4px solid #1a1033;
  border-radius: 0.9em;
  box-shadow: 0 6px 0 #1a1033;
  padding: 0.05em 0.5em 0.15em 0.35em;
  transform: rotate(-3deg);
  animation: bounceIn 0.7s ease-out both;
}
.brand-bubble:after {
  content: '';
  position: absolute;
  left: 1.1em;
  bottom: -0.62em;
  width: 0.9em;
  height: 0.9em;
  background: #fffaf0;
  border-right: 4px solid #1a1033;
  border-bottom: 4px solid #1a1033;
  transform: skewX(25deg) rotate(45deg);
}
.no-anim .brand-bubble { animation: none; }
.logo.big { font-size: 2.9em; margin: 0; line-height: 1.15; }
.logo.big.long { font-size: 2em; }
.logo.big.crazy { font-size: 2.2em; }
.logo.big.pro { font-size: 1.9em; }
.brand-bubble .logo.pro { text-shadow: none; }
.brand-bubble .logo.pro .gp-a { color: #1a1033; }
.brand-bubble .logo.pro .gp-b { color: #7c3aed; }
.side-tag {
  margin-top: 0.9em;
  font-weight: 900;
  font-size: 0.85em;
  color: #ffffff;
  text-shadow: 0 2px 0 #1a1033;
}
.side-tag span { color: #ffcf3a; }
.side-title {
  display: flex;
  align-items: center;
  margin: 0.7em 0 0.45em;
  font-family: 'Dela Gothic One', 'Geologica', sans-serif;
  font-weight: 400;
  font-size: 1em;
  color: #ffcf3a;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.side-title span { margin-left: auto; color: #ffffff; }

/* Οι 8 θέσεις */
.seats { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 0.5em; }
.seat {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 2.6em;
  padding: 0.3em 0.5em;
  background: #fffaf0;
  color: #1a1033;
  border: 3px solid #1a1033;
  border-radius: 14px;
  box-shadow: 0 3px 0 #1a1033;
  font-weight: 800;
  font-size: 0.88em;
}
.seat:nth-child(4n+1), .seat:nth-child(4n+4) { transform: rotate(-1deg); }
.seat:nth-child(4n+2), .seat:nth-child(4n+3) { transform: rotate(1deg); }
.seat-av { position: relative; flex: none; margin-right: 0.45em; }
.seat .avatar { animation: bob 2.6s ease-in-out infinite; }
.seat:nth-child(2) .avatar { animation-delay: -0.6s; }
.seat:nth-child(3) .avatar { animation-delay: -1.3s; }
.seat:nth-child(4) .avatar { animation-delay: -1.9s; }
.seat:nth-child(5) .avatar { animation-delay: -0.3s; }
.seat:nth-child(6) .avatar { animation-delay: -1s; }
.seat:nth-child(7) .avatar { animation-delay: -1.6s; }
.seat:nth-child(8) .avatar { animation-delay: -2.2s; }
.seat-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crown { position: absolute; z-index: 1; top: -0.85em; left: 50%; margin-left: -0.55em; line-height: 0; }
.crown .icon { width: 1.1em; height: 1.1em; transform: rotate(-14deg); }
.seat.empty {
  justify-content: center;
  background: none;
  box-shadow: none;
  border: 3px dashed rgba(255, 255, 255, 0.45);
  color: rgba(255, 255, 255, 0.6);
}
.seat.empty.next { border-color: #ffcf3a; color: #ffcf3a; animation: breathe 1.8s ease-in-out infinite; }
.seat.arrive { animation: land 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.3) both; }
.away { opacity: 0.45; }
@keyframes bob { 50% { transform: translateY(-3px) rotate(4deg); } }
@keyframes breathe { 50% { transform: scale(1.05); } }
@keyframes land {
  0% { transform: translateY(-2.5em) scale(0.5) rotate(-12deg); opacity: 0; }
  60% { transform: translateY(0.2em) scale(1.08) rotate(3deg); opacity: 1; }
  100% { transform: translateY(0) scale(1); }
}

/* Πώς μπαίνεις: QR + διεύθυνση + κωδικός, κάτω-κάτω στη στήλη */
.join {
  margin-top: auto;
  padding: 0.6em 0.7em;
  background: #fffaf0;
  color: #1a1033;
  border: 4px solid #1a1033;
  border-radius: 20px;
  box-shadow: 0 6px 0 #1a1033, 0 18px 36px rgba(0, 0, 0, 0.3);
  font-weight: 700;
}
.join-qr {
  display: block;
  flex: none;
  width: 5.6em;
  height: 5.6em;
  margin-right: 0.7em;
  padding: 0.2em;
  background: #ffffff;
  border: 3px solid #1a1033;
  border-radius: 12px;
}
.join-row { display: flex; align-items: center; }
.join-text { flex: 1; min-width: 0; }
.code-label { margin-top: 0.45em; text-align: center; }
.step { font-weight: 800; font-size: 0.72em; color: #6b6290; }
.join .url {
  font-size: 1.05em;
  font-weight: 900;
  color: #6d3df0;
  margin: 0 0 0.25em;
  word-break: break-all;
  line-height: 1.15;
}
.join .code { display: flex; justify-content: center; margin-top: 0.2em; }
.digit {
  display: inline-block;
  width: 1.12em;
  margin-right: 0.1em;
  font-family: 'Dela Gothic One', 'Geologica', sans-serif;
  font-weight: 400;
  font-size: 2.5em;
  line-height: 1.3;
  text-align: center;
  color: #1a1033;
  border: 3px solid #1a1033;
  border-radius: 0.2em;
  box-shadow: 0 4px 0 #1a1033;
}
.digit.d0 { background: #ff9f43; transform: rotate(-4deg); }
.digit.d1 { background: #2dd4bf; transform: rotate(3deg); }
.digit.d2 { background: #cdb6ff; transform: rotate(-2deg); }
.digit.d3 { background: #c2ec3c; transform: rotate(4deg); }
.player-link { margin: 0.7em 0 0; font-size: 0.7em; color: #ffffff; font-weight: 700; }
.player-link a { color: #ffcf3a; }
.credits { font-size: 0.52em; color: rgba(255, 255, 255, 0.75); margin: 0.4em 0 0; line-height: 1.4; }

/* Η σκηνή με τις αφίσες */
.stage { display: flex; flex-direction: column; min-width: 0; }
.stage-top { display: flex; align-items: center; }
.stage-top > button { margin-left: 0.6em; }
.stage-title {
  margin: 0 auto 0 0;
  font-family: 'Dela Gothic One', 'Geologica', sans-serif;
  font-weight: 400;
  font-size: 2.1em;
  color: #ffffff;
  text-shadow: 0 4px 0 #1a1033;
  text-transform: uppercase;
  transform: rotate(-2deg);
}
.stage-status { margin: 0.35em 0 0; font-weight: 700; font-size: 1em; color: #f3eeff; }
.stage-status b { color: #ffcf3a; }
.stage-status .icon { width: 1.2em; height: 1.2em; }

.posters { flex: 1; display: flex; align-items: center; justify-content: center; padding: 1em 0 0.6em; }
.poster {
  flex: 0 1 12.5em;
  min-width: 0;
  margin: 0 0.7em;
  overflow: hidden;
  background: #fffaf0;
  color: #1a1033;
  border: 4px solid #1a1033;
  border-radius: 22px;
  box-shadow: 0 8px 0 #1a1033, 0 26px 44px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  animation: floatL 6s ease-in-out infinite;
}
.poster.tilt-r { animation-name: floatR; }
.posters.single .poster { flex-basis: 15em; }
.poster-art { line-height: 0; border-bottom: 4px solid #1a1033; }
.poster-art svg { display: block; width: 100%; height: auto; }
.poster-body { padding: 0.55em 0.8em 0.8em; text-align: center; }
.poster-title { font-family: 'Dela Gothic One', 'Geologica', sans-serif; font-weight: 400; font-size: 1.35em; line-height: 1.15; }
.poster-desc { min-height: 2.6em; margin: 0.3em 0 0.6em; font-size: 0.72em; font-weight: 700; color: #4a3f6b; line-height: 1.3; }
.poster-play {
  display: inline-block;
  padding: 0.25em 1.1em;
  background: #ffcf3a;
  border: 3px solid #1a1033;
  border-radius: 999px;
  box-shadow: 0 4px 0 #1a1033;
  font-weight: 900;
}
.poster-play .icon { color: #1a1033; }
.poster.locked { cursor: default; }
.poster.locked .poster-art { opacity: 0.55; }
.poster-need { font-size: 0.75em; font-weight: 800; color: #6b6290; }
.need-text { display: block; margin-top: 0.3em; }
.dot {
  display: inline-block;
  width: 0.95em;
  height: 0.95em;
  margin: 0 0.15em;
  border: 3px solid #1a1033;
  border-radius: 50%;
  background: #e2dcf7;
}
.dot.on { background: #22d3a6; }
@keyframes floatL {
  0%, 100% { transform: translateY(0) rotate(-2.5deg); }
  50% { transform: translateY(-0.5em) rotate(-1deg); }
}
@keyframes floatR {
  0%, 100% { transform: translateY(-0.4em) rotate(2.5deg); }
  50% { transform: translateY(0.1em) rotate(1deg); }
}

/* GlossaPlay: οι τύποι παιχνιδιού κάτω από τη μοναδική αφίσα */
.mode-chips { display: flex; flex-wrap: wrap; justify-content: center; margin-bottom: 0.4em; }
.mode-chip {
  margin: 0.2em 0.25em;
  padding: 0.15em 0.7em;
  border: 3px solid #1a1033;
  border-radius: 999px;
  color: #1a1033;
  font-weight: 800;
  font-size: 0.8em;
  box-shadow: 0 3px 0 #1a1033;
}
.mode-chip.mc0 { background: #ff9f43; transform: rotate(-2deg); }
.mode-chip.mc1 { background: #2dd4bf; transform: rotate(2deg); }
.mode-chip.mc2 { background: #cdb6ff; transform: rotate(-1deg); }
.mode-chip.mc3 { background: #c2ec3c; transform: rotate(1deg); }

/* Ο host ανοίγει ένα παιχνίδι στο κινητό: η αφίσα του «κάτω από τον προβολέα», δίπλα οι ρυθμίσεις */
.spot {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.8em 0;
  background: radial-gradient(ellipse at 32% 50%, rgba(255, 236, 170, 0.42) 0%, rgba(255, 236, 170, 0) 55%);
}
.spot-poster { flex: 0 0 14.5em; }
.spot .poster {
  margin: 0;
  animation: glow 2.2s ease-in-out infinite;
  transform: rotate(-3deg);
}
.spot.spot-in .spot-poster { animation: spotIn 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.25) both; }
.spot.spot-in .game-slide { animation: slideIn 0.5s 0.12s ease-out both; }
@keyframes glow {
  0%, 100% { box-shadow: 0 8px 0 #1a1033, 0 0 0 6px rgba(255, 207, 58, 0.35), 0 26px 44px rgba(0, 0, 0, 0.35); }
  50% { box-shadow: 0 8px 0 #1a1033, 0 0 0 14px rgba(255, 207, 58, 0.18), 0 26px 44px rgba(0, 0, 0, 0.35); }
}
@keyframes spotIn {
  0% { transform: translateY(2em) scale(0.7) rotate(-10deg); opacity: 0; }
  100% { transform: translateY(0) scale(1) rotate(0deg); opacity: 1; }
}
@keyframes slideIn {
  0% { transform: translateX(2em); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}
.game-slide {
  flex: 0 1 21em;
  min-width: 0;
  margin-left: 1.6em;
  padding: 0.8em 1em;
  background: #fffaf0;
  color: #1a1033;
  border: 4px solid #1a1033;
  border-radius: 24px;
  box-shadow: 0 7px 0 #1a1033, 0 22px 44px rgba(0, 0, 0, 0.3);
  text-align: left;
}
.gs-title { text-transform: uppercase; margin-bottom: 0.3em; font-family: 'Dela Gothic One', 'Geologica', sans-serif; font-weight: 400; font-size: 1.15em; }
.gs-rows { border-top: 3px dashed #e2dcf7; }
.gs-row { display: flex; align-items: baseline; padding: 0.3em 0; border-bottom: 3px dashed #e2dcf7; }
.gs-label { flex: 1; font-size: 0.8em; font-weight: 700; color: #6b6290; padding-right: 0.6em; }
.gs-value { font-size: 1em; font-weight: 900; text-align: right; max-width: 60%; }
.gs-value small { display: block; font-size: 0.7em; font-weight: 600; color: #6b6290; }
.gs-preview { margin-top: 0.5em; padding: 0.35em 0.6em; border-radius: 12px; font-weight: 800; font-size: 0.85em; }
.gs-preview.ok { background: #d7f7e8; color: #0f6b47; }
.gs-preview.warn { background: #fff0d6; color: #8a4b00; }
.gs-preview.bad { background: #ffe0e8; color: #b0123f; }
.gs-preview .icon { width: 1em; height: 1em; vertical-align: -0.12em; }

/* «Ενέργεια της παρέας»: η μπάρα κάτω από τις αφίσες */
.energy { padding: 0.2em 0.4em 0; }
.energy-row { display: flex; align-items: center; }
.energy-label { flex: none; margin-right: 0.7em; font-weight: 900; font-size: 0.9em; color: #ffcf3a; text-shadow: 0 2px 0 #1a1033; }
.energy-label .icon { width: 1.2em; height: 1.2em; }
.energy-bar {
  flex: 1;
  height: 1.3em;
  overflow: hidden;
  background: rgba(18, 8, 51, 0.6);
  border: 3px solid #1a1033;
  border-radius: 999px;
  box-shadow: 0 4px 0 #1a1033;
}
.energy-fill {
  height: 100%;
  width: 0;
  background-color: #22d3a6;
  background-image: linear-gradient(90deg, #22d3a6 0%, #ffcf3a 60%, #ff5d73 100%);
  background-size: 18em 100%;
  border-radius: 999px;
  -webkit-transition: width 0.12s linear;
  transition: width 0.12s linear;
}
.energy-fill.hot { animation: buzz 0.18s linear infinite; }
.energy-level {
  flex: none;
  margin-left: 0.7em;
  padding: 0.1em 0.6em;
  background: #fffaf0;
  color: #1a1033;
  border: 3px solid #1a1033;
  border-radius: 10px;
  font-family: 'Dela Gothic One', 'Geologica', sans-serif;
  font-size: 0.8em;
  transform: rotate(3deg);
}
.energy-hint { margin: 0.35em 0 0; text-align: center; font-size: 0.75em; font-weight: 700; color: #f3eeff; }
@keyframes buzz { 50% { opacity: 0.8; } }

.pump-pop { position: fixed; z-index: 44; pointer-events: none; font-size: 22px; animation: pumpUp 1s ease-out forwards; }
@keyframes pumpUp {
  0% { transform: translate(-50%, 0) scale(0.4); opacity: 0; }
  20% { transform: translate(-50%, -0.6em) scale(1.1); opacity: 1; }
  100% { transform: translate(-50%, -3.2em) scale(0.8); opacity: 0; }
}

.party {
  position: fixed;
  left: 62%;
  top: 38%;
  z-index: 46;
  padding: 0.25em 0.8em 0.35em;
  background: #ffcf3a;
  color: #1a1033;
  border: 5px solid #1a1033;
  border-radius: 24px;
  box-shadow: 0 8px 0 #1a1033, 0 24px 48px rgba(0, 0, 0, 0.4);
  text-align: center;
  font-size: 56px;
  font-size: clamp(36px, 5vw, 120px);
  pointer-events: none;
  animation: party 2.6s ease-out forwards;
}
.party b { display: block; font-family: 'Dela Gothic One', 'Geologica', sans-serif; font-weight: 400; line-height: 1.1; }
.party small { display: block; font-size: 0.35em; font-weight: 900; }
@keyframes party {
  0% { transform: translate(-50%, -50%) scale(0.3) rotate(-15deg); opacity: 0; }
  15% { transform: translate(-50%, -50%) scale(1.15) rotate(4deg); opacity: 1; }
  25% { transform: translate(-50%, -50%) scale(1) rotate(-3deg); }
  80% { transform: translate(-50%, -50%) scale(1) rotate(-3deg); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.3) rotate(-3deg); opacity: 0; }
}

/* «Μαρία – καλώς ήρθες!» (έξω από το #app, γι' αυτό με δικό του μέγεθος γραμμάτων) */
.arrival {
  position: fixed;
  left: 62%;
  z-index: 45;
  display: flex;
  align-items: center;
  padding: 0.35em 1.1em 0.35em 0.35em;
  background: #fffaf0;
  color: #1a1033;
  border: 4px solid #1a1033;
  border-radius: 999px;
  box-shadow: 0 6px 0 #1a1033, 0 20px 40px rgba(0, 0, 0, 0.35);
  font-size: 30px;
  font-size: clamp(20px, 2.3vw, 56px);
  font-weight: 900;
  white-space: nowrap;
  pointer-events: none;
  animation: arrive 2.8s ease-out forwards;
}
.arrival .avatar { margin-right: 0.45em; font-size: 1.3em; }
.arrival b { display: block; line-height: 1.1; }
.arrival small { display: block; font-size: 0.6em; font-weight: 800; color: #6d3df0; }
@keyframes arrive {
  0% { transform: translate(-50%, -1.5em) scale(0.5) rotate(-8deg); opacity: 0; }
  12% { transform: translate(-50%, 0) scale(1.1) rotate(3deg); opacity: 1; }
  20% { transform: translate(-50%, 0) scale(1) rotate(-2deg); }
  80% { transform: translate(-50%, 0) scale(1) rotate(-2deg); opacity: 1; }
  100% { transform: translate(-50%, -1em) scale(0.9) rotate(-2deg); opacity: 0; }
}

/* ---------- κοινά στοιχεία παιχνιδιού ---------- */
.center-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.6em 2.6em 1.6em;
  text-align: center;
}
.center-stage > * { margin-top: 0.55em; margin-bottom: 0.55em; }
.center-stage.tight > * { margin-top: 0.35em; margin-bottom: 0.35em; }
.headline {
  font-weight: 900;
  font-size: 2.1em;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 0;
  max-width: 30em;
  color: #ffffff;
  text-shadow: 0 4px 0 #1a1033;
}
.big-note { font-size: 1.3em; margin: 0; font-weight: 700; }

.timer {
  position: relative;
  width: 2.9em;
  height: 2.9em;
  border-radius: 50%;
  background: #ffcf3a;
  color: #1a1033;
  border: 5px solid #1a1033;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Dela Gothic One', 'Geologica', sans-serif;
  font-weight: 400;
  font-size: 2em;
  box-shadow: 0 6px 0 #1a1033;
  flex: none;
}
.timer:before {
  content: '';
  position: absolute;
  top: -0.32em;
  left: 50%;
  margin-left: -0.18em;
  width: 0.36em;
  height: 0.22em;
  background: #1a1033;
  border-radius: 0.08em;
}
.timer.urgent { background: #ff5d73; animation: beat 0.5s ease-in-out infinite alternate; box-shadow: 0 6px 0 #1a1033, 0 0 0 0.3em rgba(255, 93, 115, 0.35); }
@keyframes beat { to { transform: scale(1.1); } }
.tight .timer { font-size: 1.3em; }

.chips { display: flex; flex-wrap: wrap; justify-content: center; }
.chip {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.25);
  padding: 0.25em 0.75em 0.25em 0.25em;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.85em;
  margin: 0.25em;
}
.chip .avatar { margin-right: 0.4em; }
.chip .tick { display: inline-flex; margin-left: 0.4em; opacity: 0.6; }
.chip.done { background: #22d3a6; color: #1a1033; border-color: #1a1033; box-shadow: 0 3px 0 #1a1033; animation: pop 0.35s ease-out both; }
.chip.done .tick { opacity: 1; }
.no-anim .chip.done { animation: none; }

.vote-row { display: flex; align-items: center; justify-content: center; font-size: 1.15em; font-weight: 700; }
.vote-row > * { margin: 0 0.5em; }
.vote-row .muted { color: #ffffff; text-shadow: 0 2px 0 rgba(26, 16, 51, 0.35); }

/* ---------- Ατάκα ---------- */
.prompt {
  position: relative;
  background: #fffaf0;
  color: #1a1033;
  border: 5px solid #1a1033;
  border-radius: 26px;
  padding: 0.7em 1.2em;
  font-size: 1.9em;
  font-weight: 900;
  line-height: 1.25;
  max-width: 26em;
  box-shadow: 0 7px 0 #1a1033, 0 24px 50px rgba(0, 0, 0, 0.35);
}
.prompt:after {
  content: '';
  position: absolute;
  left: 2em;
  bottom: -0.5em;
  width: 0.8em;
  height: 0.8em;
  background: #fffaf0;
  border-right: 5px solid #1a1033;
  border-bottom: 5px solid #1a1033;
  transform: skewX(25deg) rotate(45deg);
}
.answers { display: flex; width: 100%; justify-content: center; align-items: stretch; }
.answers.grid { flex-wrap: wrap; }
.answers.grid .answer { flex: 0 1 23%; font-size: 0.72em; margin: 0.5em; padding: 0.7em; }
.answer {
  flex: 0 1 38%;
  align-self: stretch;
  position: relative;
  background: #fffaf0;
  color: #1a1033;
  border: 4px solid #1a1033;
  border-radius: 24px;
  padding: 1em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 7px 0 #1a1033, 0 20px 40px rgba(0, 0, 0, 0.3);
}
.answers.versus .answer:first-child { transform: rotate(-1.5deg); }
.answers.versus .answer:last-child { transform: rotate(1.5deg); }
.answer:nth-child(4n+2) { background: #e9f8ff; }
.answer:nth-child(4n+3) { background: #fff3cf; }
.answers.versus .answer:last-child { background: #e9f8ff; }
.answer.winner { background: #ffcf3a; box-shadow: 0 7px 0 #1a1033, 0 0 0 0.25em rgba(255, 207, 58, 0.45), 0 20px 40px rgba(0, 0, 0, 0.3); }
.answers .answer.winner { transform: scale(1.05) rotate(-1deg); }
.answer-text { font-size: 1.75em; font-weight: 900; line-height: 1.2; }
.answer-meta { display: flex; flex-direction: column; align-items: center; margin-top: 0.7em; }
.answer-meta > * { margin: 0.15em 0; }
.author { display: flex; align-items: center; font-weight: 900; }
.author .avatar { margin-right: 0.4em; }
.votes { font-weight: 800; }
.voters { font-size: 0.8em; color: #5b5382; font-weight: 600; }
.points { font-family: 'Dela Gothic One', 'Geologica', sans-serif; font-weight: 400; font-size: 1.5em; color: #6d3df0; }
.answer.winner .points { color: #1a1033; }
.sweep {
  background: #ff5d73;
  color: #1a1033;
  border: 3px solid #1a1033;
  padding: 0.15em 0.7em;
  border-radius: 10px;
  font-family: 'Dela Gothic One', 'Geologica', sans-serif;
  font-weight: 400;
  transform: rotate(-6deg);
  box-shadow: 0 4px 0 #1a1033;
  animation: bounceIn 0.6s 0.4s ease-out both;
}
.vs {
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.3em;
  height: 2.3em;
  margin: 0 0.8em;
  border-radius: 50%;
  background: #ff5d73;
  color: #fffaf0;
  border: 4px solid #1a1033;
  box-shadow: 0 5px 0 #1a1033;
  font-family: 'Dela Gothic One', 'Geologica', sans-serif;
  font-weight: 400;
  font-size: 1.6em;
  transform: rotate(-8deg);
  text-shadow: 0 2px 0 #1a1033;
}

/* ---------- βαθμολογία ---------- */
.scoreboard {
  width: 36em;
  max-width: 100%;
  background: #fffaf0;
  color: #1a1033;
  border: 4px solid #1a1033;
  border-radius: 24px;
  padding: 0.7em 1.2em;
  box-shadow: 0 7px 0 #1a1033, 0 24px 50px rgba(0, 0, 0, 0.3);
}
.score-row {
  display: grid;
  grid-template-columns: 1.6em 1.8em 7em 1fr 4em;
  grid-gap: 0.6em;
  align-items: center;
  font-weight: 800;
  font-size: 1.2em;
  text-align: left;
  padding: 0.25em 0;
}
.score-row .rank { font-family: 'Dela Gothic One', 'Geologica', sans-serif; font-weight: 400; color: #9b91c4; text-align: center; }
.score-row:first-child .rank { color: #e0a100; }
.score-row .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar { height: 0.95em; background: #ece6ff; border: 2px solid #1a1033; border-radius: 999px; overflow: hidden; }
.bar span { display: block; height: 100%; border-radius: 999px; border-right: 2px solid #1a1033; animation: grow 0.9s ease-out both; transform-origin: left; }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.no-anim .bar span { animation: none; }
.pts { text-align: right; color: #6d3df0; font-weight: 900; }

/* ---------- Trivia / English: ερωτήσεις ---------- */
.mill {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 5.5em;
  grid-gap: 1.6em;
  padding: 0.3em 1.6em 1.2em;
}
.mill-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-width: 0;
}
.mill-main > * { margin-top: 0.4em; margin-bottom: 0.4em; }
.t-tags { display: flex; align-items: center; justify-content: center; }
.t-tags > * { margin: 0 0.3em; }
.t-category, .t-level, .t-x2 {
  font-weight: 900;
  font-size: 0.8em;
  padding: 0.2em 0.9em;
  border-radius: 999px;
  border: 3px solid #1a1033;
  box-shadow: 0 3px 0 #1a1033;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #1a1033;
}
.t-category { background: #fffaf0; }
.lvl-Easy { background: #22d3a6; }
.lvl-Medium { background: #ff8a3d; }
.lvl-Hard { background: #ff5d73; }
.t-x2 { background: #ffcf3a; animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.08) rotate(-3deg); } }

.mill-question {
  width: 100%;
  background: #fffaf0;
  color: #1a1033;
  border: 4px solid #1a1033;
  border-radius: 22px;
  padding: 0.6em 1.4em;
  font-size: 1.6em;
  font-weight: 900;
  line-height: 1.25;
  box-shadow: 0 6px 0 #1a1033, 0 22px 44px rgba(0, 0, 0, 0.3);
}
.mill-question.small { font-size: 1.15em; padding: 0.45em 1.3em; box-shadow: 0 5px 0 #1a1033; }
.mill-options {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  grid-gap: 0.75em 1em;
}
.mill-option {
  display: flex;
  align-items: center;
  height: 100%;
  min-height: 2.6em;
  padding: 0.4em 0.8em 0.4em 0.45em;
  border-radius: 18px;
  border: 4px solid #1a1033;
  color: #1a1033;
  font-weight: 900;
  font-size: 1.25em;
  text-align: left;
  box-shadow: 0 6px 0 #1a1033;
}
.mill-option .t-text { flex: 1; }
.mill-option.wrong { background: #3a2c7e; color: #b3a9e0; border-color: #1a1033; }
.mill-option.wrong .letter { background: #251a5c; color: #8f84c4; border-color: #8f84c4; }
.mill-option.wrong .opt-pic { opacity: 0.5; }
.mill-option.correct {
  border-color: #1a1033;
  box-shadow: 0 6px 0 #1a1033, 0 0 0 0.25em #ffffff, 0 0 1.4em rgba(255, 255, 255, 0.6);
  animation: blink 0.45s ease-in-out 4;
}
.mill-option.correct .t-text:after {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-left: 0.3em;
  vertical-align: -0.12em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%231a1033'/%3E%3Cpath d='M6.5 12.5l3.8 3.8L17.5 8' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat;
  background-size: 100% 100%;
}
@keyframes blink { 50% { transform: scale(1.04); } }
.no-anim .mill-option.correct { animation: none; }
.pickers { display: flex; flex: none; }
.picker { margin-left: 0.2em; }
.picker .avatar { width: 1.4em; height: 1.4em; font-size: 0.75em; }

/* «Σκάλα» με τις ερωτήσεις */
.ladder {
  align-self: center;
  background: rgba(18, 8, 51, 0.55);
  border: 3px solid rgba(255, 255, 255, 0.16);
  border-radius: 18px;
  padding: 0.5em 0.4em;
}
.ladder ol { list-style: none; margin: 0; padding: 0; }
.ladder li {
  text-align: center;
  font-family: 'Dela Gothic One', 'Geologica', sans-serif;
  font-weight: 400;
  font-size: 0.75em;
  padding: 0.1em 0;
  margin: 3px 0;
  border-radius: 8px;
  color: #e7e1ff;
  border: 2px solid transparent;
}
.ladder li.milestone { color: #ffcf3a; }
.ladder li.past { color: rgba(255, 255, 255, 0.35); }
.ladder li.now { background: #ffcf3a; color: #1a1033; border-color: #1a1033; box-shadow: 0 3px 0 #1a1033; transform: scale(1.12); }

.t-columns { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 1.4em; width: 100%; text-align: left; }
.t-panel {
  background: #fffaf0;
  color: #1a1033;
  border: 4px solid #1a1033;
  border-radius: 18px;
  padding: 0.55em 1em;
  box-shadow: 0 5px 0 #1a1033;
}
.t-panel h3, .report h3, .h-cols h3 {
  margin: 0 0 0.4em;
  font-family: 'Dela Gothic One', 'Geologica', sans-serif;
  font-weight: 400;
  font-size: 0.85em;
  color: #6d3df0;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.t-result {
  display: grid;
  grid-template-columns: 1.4em 1.8em minmax(0, 1fr) 3.4em 5em;
  grid-gap: 0.5em;
  align-items: center;
  font-weight: 800;
  padding: 0.12em 0;
}
.t-result .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-result .time { color: #6b6290; font-size: 0.85em; text-align: right; }
.t-result .pts { color: #6d3df0; text-align: right; min-width: 3.5em; }
.t-result .mark { display: flex; justify-content: center; font-family: 'Dela Gothic One', 'Geologica', sans-serif; font-weight: 400; color: #9b91c4; }
.t-result.ok .mark { color: #12a67f; }
.t-result.no .mark { color: #ff5d73; }
.t-result.skip .mark { color: #9aa0b8; }
.t-result .avatar { width: 1.5em; height: 1.5em; font-size: 0.85em; }

/* ---------- History ---------- */
.overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(14, 6, 40, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 25;
}
.overlay-card {
  width: 88vw;
  max-height: 92vh;
  overflow: hidden;
  background: #fffaf0;
  color: #1a1033;
  border: 5px solid #1a1033;
  border-radius: 28px;
  padding: 1em 1.5em;
  box-shadow: 0 9px 0 #1a1033, 0 30px 80px rgba(0, 0, 0, 0.5);
}
.overlay-head { display: flex; align-items: center; }
.overlay-head h2 { margin: 0 0.8em 0 0; flex: none; font-family: 'Dela Gothic One', 'Geologica', sans-serif; font-weight: 400; }
.overlay-head button { padding: 0.35em 1em; }
.overlay-head #close-history { margin-left: auto; flex: none; }
.h-tabs { display: flex; flex-wrap: wrap; }
.h-tab {
  margin: 0.15em 0.3em;
  padding: 0.3em 0.9em;
  font-size: 0.85em;
  border-radius: 999px;
  border: 2px solid #1a1033;
  background: #fffaf0;
  color: #1a1033;
  box-shadow: 0 3px 0 #1a1033;
}
.h-tab span { color: #9b91c4; font-weight: 800; }
.h-tab.on { background: #6d3df0; color: #ffffff; }
.h-tab.on span { color: #e2dcf7; }
.h-cols { display: grid; grid-template-columns: 1fr 1.1fr; grid-gap: 2.5em; margin-top: 0.8em; }
.h-row {
  display: grid;
  grid-template-columns: 1.4em 1.8em minmax(0, 1fr) 3.8em 3.8em 3.8em 4.4em;
  grid-gap: 0.4em;
  align-items: center;
  font-weight: 800;
  padding: 0.18em 0;
}
.h-row.no-best { grid-template-columns: 1.4em 1.8em minmax(0, 1fr) 3.8em 3.8em 3.8em; }
.h-row .avatar { width: 1.6em; height: 1.6em; }
.h-row.head { color: #6b6290; font-size: 0.72em; font-weight: 900; text-transform: uppercase; }
.h-row .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-row .num { text-align: right; }
.h-row .num.strong { color: #6d3df0; font-weight: 900; }
.h-row .rank { color: #9b91c4; font-family: 'Dela Gothic One', 'Geologica', sans-serif; font-weight: 400; }
.h-game { padding: 0.4em 0; border-bottom: 2px dashed #e2dcf7; }
.h-game-head { display: flex; justify-content: space-between; align-items: baseline; }
.h-game .gname { color: #6d3df0; font-weight: 900; }
.h-game .date { color: #6b6290; font-size: 0.78em; font-weight: 700; }
.h-places { display: flex; flex-wrap: wrap; align-items: center; margin-top: 0.15em; font-weight: 700; font-size: 0.9em; }
.h-place { margin-right: 0.9em; white-space: nowrap; }
.h-place b { color: #6d3df0; }
.h-place.p1 { font-weight: 900; }
.h-more { color: #9b91c4; font-weight: 800; }
.h-pager { display: flex; align-items: center; justify-content: center; margin-top: 0.5em; font-weight: 800; }
.h-pager span { margin: 0 0.8em; color: #6b6290; }
.icon-btn.dark { background: #fffaf0; color: #1a1033; border: 2px solid #1a1033; box-shadow: 0 3px 0 #1a1033; font-size: 1.1em; padding: 0.05em 0.8em; }
.icon-btn.dark:disabled { opacity: 0.35; }
.h-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 0.6em; }
.h-foot .note { margin: 0; }
.mini-link { background: none; border: 0; box-shadow: none; color: #e23a55; font-size: 0.75em; padding: 0.3em 0.6em; text-decoration: underline; }
.empty, .note { color: #6b6290; }
.note { font-size: 0.75em; margin-bottom: 0; }

/* ---------- βάθρο ---------- */
.podium { position: relative; display: flex; align-items: flex-end; justify-content: center; margin-top: 0.4em; }
.pod { position: relative; width: 9.5em; margin: 0 0.5em; text-align: center; display: flex; flex-direction: column; align-items: center; }
.pod.empty { visibility: hidden; }
.pod.p1:before {
  content: '';
  position: absolute;
  left: 50%;
  top: -1.5em;
  width: 14em;
  height: 14em;
  margin-left: -7em;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 207, 58, 0.45) 0%, rgba(255, 207, 58, 0) 65%);
  z-index: -1;
}
.pod-crown { animation: bounceIn 0.7s 1s ease-out both; }
.pod-crown .icon { width: 2.4em; height: 2.4em; }
.pod-crown .icon.gold .f { stroke-width: 1.4; }
.no-anim .pod-crown { animation: none; }
.pod-face .avatar { width: 3.1em; height: 3.1em; font-size: 1.2em; border-width: 4px; box-shadow: 0 4px 0 #1a1033; }
.pod.p1 .pod-face .avatar { width: 3.9em; height: 3.9em; }
.pod-name { font-weight: 900; font-size: 1.15em; margin-top: 0.3em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod-score {
  font-family: 'Dela Gothic One', 'Geologica', sans-serif;
  font-weight: 400;
  color: #ffcf3a;
  margin-bottom: 0.35em;
  text-shadow: 0 2px 0 #1a1033;
}
.pod-block {
  width: 100%;
  border: 4px solid #1a1033;
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  background: #c9d6ff;
  color: #1a1033;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  font-family: 'Dela Gothic One', 'Geologica', sans-serif;
  font-weight: 400;
  font-size: 2.3em;
  padding-top: 0.15em;
  box-shadow: inset -0.25em 0 0 rgba(26, 16, 51, 0.12);
  transform-origin: bottom;
  animation: rise 0.7s ease-out both;
}
.pod.p1 .pod-block { height: 3.4em; background: #ffcf3a; }
.pod.p2 .pod-block { height: 2.5em; background: #c9d6ff; }
.pod.p3 .pod-block { height: 1.85em; background: #ffad7a; }
@keyframes rise { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.no-anim .pod-block { animation: none; }
.team-av .icon { width: 60%; height: 60%; color: #1a1033; }
.rest { display: flex; flex-wrap: wrap; justify-content: center; }
.rest-item {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  padding: 0.2em 0.8em 0.2em 0.5em;
  margin: 0.25em;
  font-weight: 800;
}
.rest-item .avatar { margin: 0 0.3em; width: 1.5em; height: 1.5em; }
.team-dot { display: inline-block; width: 1.1em; height: 1.1em; border-radius: 50%; border: 3px solid #1a1033; margin: 0 0.3em; flex: none; }
.rest-item .team-dot { border-color: #ffffff; }

/* ---------- Trivia extras ---------- */
.final-badge {
  font-family: 'Dela Gothic One', 'Geologica', sans-serif;
  font-weight: 400;
  font-size: 2.5em;
  color: #ffcf3a;
  text-transform: uppercase;
  transform: rotate(-3deg);
  text-shadow: -3px -3px 0 #1a1033, 3px -3px 0 #1a1033, -3px 3px 0 #1a1033, 3px 3px 0 #1a1033, 4px 7px 0 #ff5d73, 6px 9px 0 #1a1033;
}
.streak-tag {
  display: inline-flex;
  align-items: center;
  margin-left: 0.3em;
  font-size: 0.8em;
  color: #e86a10;
  font-weight: 900;
}
.wager-up { color: #12a67f; font-weight: 900; font-size: 0.85em; }
.wager-down { color: #e23a55; font-weight: 900; font-size: 0.85em; }

/* ---------- αντιδράσεις που «πετάνε» ---------- */
.reaction {
  position: fixed;
  bottom: -60px;
  z-index: 35;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  animation: floatUp 3s ease-out forwards;
}
.re-bubble {
  width: 3.4em;
  height: 3.4em;
  border-radius: 50%;
  border: 4px solid #1a1033;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 5px 0 #1a1033;
}
.re-name {
  font-weight: 900;
  font-size: 0.75em;
  margin-top: 0.3em;
  background: #fffaf0;
  color: #1a1033;
  border: 2px solid #1a1033;
  border-radius: 999px;
  padding: 0.05em 0.6em;
}
@keyframes floatUp {
  0% { transform: translateY(0) scale(0.6) rotate(-10deg); opacity: 0; }
  15% { opacity: 1; transform: translateY(-15vh) scale(1.15) rotate(6deg); }
  60% { transform: translateY(-50vh) scale(1) rotate(-4deg); }
  100% { transform: translateY(-75vh) scale(1) rotate(3deg); opacity: 0; }
}

/* ---------- English Junior A: εικόνες ---------- */
.pic-box {
  position: relative;
  background: #ffffff;
  border: 4px solid #1a1033;
  border-radius: 24px;
  padding: 0.7em 1.4em;
  box-shadow: 0 7px 0 #1a1033, 0 22px 44px rgba(0, 0, 0, 0.3);
  transform: rotate(-2deg);
}
.pic-box:before {
  content: '';
  position: absolute;
  top: -0.7em;
  left: 50%;
  margin-left: -2.2em;
  width: 4.4em;
  height: 1.3em;
  background: rgba(255, 207, 58, 0.85);
  border: 2px solid rgba(26, 16, 51, 0.25);
  transform: rotate(3deg);
}
.pic-box .pic { display: block; height: 9.5em; width: 9.5em; }
.pic-q { font-size: 1.4em; font-weight: 900; text-shadow: 0 3px 0 #1a1033; }
.word-reveal {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fffaf0;
  color: #1a1033;
  border: 4px solid #1a1033;
  border-radius: 999px;
  padding: 0.25em 1.4em 0.25em 0.6em;
  font-size: 1.4em;
  font-weight: 900;
  box-shadow: 0 5px 0 #1a1033;
}
.word-reveal .pic-small { height: 2.2em; width: 2.2em; margin-right: 0.5em; }
.word-reveal .w-en { color: #6d3df0; }
.word-reveal .w-eq { margin: 0 0.5em; color: #9b91c4; }

/* ---------- English Junior A: Listening ---------- */
.listen-box {
  display: flex;
  align-items: center;
  background: #fffaf0;
  color: #1a1033;
  border: 4px solid #1a1033;
  border-radius: 26px;
  padding: 0.8em 1.6em 0.8em 1em;
  text-align: left;
  box-shadow: 0 7px 0 #1a1033, 0 22px 44px rgba(0, 0, 0, 0.3);
}
.listen-ear {
  width: 4.6em;
  height: 4.6em;
  margin-right: 0.8em;
  padding: 0.7em;
  border-radius: 50%;
  background: #3ec5ff;
  border: 4px solid #1a1033;
  color: #1a1033;
  stroke-width: 2.2;
  box-shadow: 0 0 0 0.35em rgba(62, 197, 255, 0.3);
  animation: ring 1.4s ease-out infinite;
}
@keyframes ring {
  0% { box-shadow: 0 0 0 0 rgba(62, 197, 255, 0.55); }
  100% { box-shadow: 0 0 0 0.9em rgba(62, 197, 255, 0); }
}
.listen-title { font-family: 'Dela Gothic One', 'Geologica', sans-serif; font-weight: 400; font-size: 1.9em; color: #6d3df0; }
.listen-sub { font-weight: 800; margin-bottom: 0.4em; }
.listen-note { color: #6b6290; font-weight: 800; font-size: 0.9em; }
.listen-box .secondary { padding: 0.3em 1em; font-size: 0.95em; }
.mill-option.with-pic { min-height: 4.2em; }
.mill-option .opt-pic { height: 3.4em; width: 3.4em; margin-right: 0.6em; background: #ffffff; border: 3px solid #1a1033; border-radius: 14px; padding: 0.15em; }

/* ---------- English Junior A: Spelling ---------- */
.pic-box.small { padding: 0.5em 1em; }
.pic-box.small .pic { height: 5.5em; width: 5.5em; }
.slots-row { display: flex; flex-wrap: wrap; justify-content: center; }
.slot-word { display: flex; margin: 0.2em 0.6em; }
.slots-row .lt {
  display: inline-block;
  width: 1.6em;
  height: 1.85em;
  line-height: 1.75em;
  margin: 0 0.1em;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.16);
  border: 3px dashed rgba(255, 255, 255, 0.8);
  font-family: 'Dela Gothic One', 'Geologica', sans-serif;
  font-weight: 400;
  font-size: 1.55em;
  text-align: center;
}
.slots-row .lt.full { background: #fffaf0; color: #1a1033; border: 3px solid #1a1033; box-shadow: 0 4px 0 #1a1033; }
.slots-row .lt-fixed { font-family: 'Dela Gothic One', 'Geologica', sans-serif; font-size: 1.55em; line-height: 1.85em; margin: 0 0.05em; }
.t-said { font-size: 0.8em; color: #12a67f; font-weight: 900; letter-spacing: 0.05em; }
.t-said.wrong { color: #e23a55; text-decoration: line-through; }

/* ---------- English Junior A: Matching ---------- */
.match-board { display: flex; justify-content: center; width: 100%; }
.m-col { flex: 1; max-width: 22em; margin: 0 0.6em; }
.m-card {
  border-radius: 16px;
  border: 4px solid #1a1033;
  background: #8b5cf6;
  color: #ffffff;
  padding: 0.3em 1em;
  margin: 0.45em 0;
  font-weight: 900;
  font-size: 1.2em;
  box-shadow: 0 5px 0 #1a1033;
}
.m-card.m-gr { background: #fffaf0; color: #1a1033; }
.m-col:first-child .m-card:nth-child(odd) { transform: rotate(-1deg); }
.m-col:last-child .m-card:nth-child(even) { transform: rotate(1deg); }
.match-pairs { display: flex; flex-wrap: wrap; justify-content: center; width: 100%; }
.m-pair {
  width: 45%;
  margin: 0.35em 1%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #22d3a6;
  color: #1a1033;
  border: 4px solid #1a1033;
  border-radius: 16px;
  padding: 0.3em 1em;
  font-weight: 900;
  font-size: 1.15em;
  box-shadow: 0 5px 0 #1a1033;
}
.m-pair .m-eq { margin: 0 0.5em; opacity: 0.6; }

/* ---------- English Junior A: Hangman ---------- */
.hang { display: flex; align-items: center; justify-content: center; width: 100%; }
.hang-left {
  text-align: center;
  margin-right: 2em;
  background: #fffaf0;
  border: 4px solid #1a1033;
  border-radius: 22px;
  padding: 0.5em 0.9em 0.4em;
  box-shadow: 0 6px 0 #1a1033;
  transform: rotate(-2deg);
}
.gallows { display: block; width: 10em; height: 11em; fill: none; stroke: #1a1033; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.gallows .wood { stroke: #a0612b; stroke-width: 8; }
.gallows .body circle { fill: #ffcf3a; }
.gallows .ghost { stroke: #d8cfee; stroke-width: 4; stroke-dasharray: 3 5; }
.hang.small .gallows { width: 4.6em; height: 5em; }
.hang.small .hang-left { padding: 0.3em 0.5em; }
.h-lives { font-weight: 900; color: #e23a55; font-size: 0.9em; }
.hang-right { display: flex; flex-direction: column; align-items: center; }
.hang-right > * { margin: 0.35em 0; }
.h-hint {
  display: flex;
  align-items: center;
  background: #fffaf0;
  color: #1a1033;
  border: 4px solid #1a1033;
  border-radius: 999px;
  padding: 0.25em 1.2em 0.25em 0.6em;
  font-weight: 900;
  font-size: 1.3em;
  box-shadow: 0 5px 0 #1a1033;
}
.h-hint .pic-small { height: 2em; width: 2em; margin-right: 0.4em; }
.slots-row .lt.full.miss { background: #ff5d73; color: #1a1033; }
.h-used { display: flex; flex-wrap: wrap; justify-content: center; }
.h-letter {
  display: inline-block;
  min-width: 1.6em;
  margin: 0.15em;
  padding: 0.05em 0.3em;
  border-radius: 8px;
  border: 3px solid #1a1033;
  color: #1a1033;
  font-family: 'Dela Gothic One', 'Geologica', sans-serif;
  font-weight: 400;
  box-shadow: 0 3px 0 #1a1033;
}
.h-letter.ok { background: #22d3a6; }
.h-letter.no { background: #ff5d73; text-decoration: line-through; }
.h-word { display: inline-block; margin: 0.15em; padding: 0.05em 0.4em; border-radius: 8px; background: rgba(255, 93, 115, 0.22); border: 2px solid #ff5d73; color: #ffd6dd; text-decoration: line-through; font-weight: 800; }
.h-turn { display: flex; align-items: center; font-size: 1.1em; background: #fffaf0; color: #1a1033; border: 3px solid #1a1033; border-radius: 999px; padding: 0.2em 0.9em 0.2em 0.6em; box-shadow: 0 4px 0 #1a1033; }
.h-turn .avatar { margin: 0 0.3em; }

/* ---------- English Junior A: Φτιάξε την πρόταση ---------- */
.sentence-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; }
.w-slot {
  display: inline-block;
  min-width: 4em;
  height: 1.9em;
  line-height: 1.7em;
  margin: 0.25em;
  padding: 0 0.5em;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.16);
  border: 3px dashed rgba(255, 255, 255, 0.8);
  font-size: 1.4em;
  font-weight: 900;
}
.w-slot.full { background: #fffaf0; color: #1a1033; border: 3px solid #1a1033; box-shadow: 0 4px 0 #1a1033; min-width: 0; }
.w-end { font-size: 1.8em; font-weight: 900; margin-left: 0.1em; }

/* ---------- Αναφορά στο τέλος ---------- */
.end-with-report {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.6em 1.2em;
}
.end-left { flex: 1; display: flex; flex-direction: column; align-items: center; }
.end-left > * { margin: 0.4em 0; }
.report {
  width: 34vw;
  margin-left: 1.2em;
  background: #fffaf0;
  color: #1a1033;
  border: 4px solid #1a1033;
  border-radius: 22px;
  padding: 0.7em 1.1em;
  box-shadow: 0 7px 0 #1a1033, 0 22px 44px rgba(0, 0, 0, 0.3);
  transform: rotate(1deg);
}
.rep-row { display: flex; align-items: center; padding: 0.3em 0; border-bottom: 2px dashed #e2dcf7; }
.rep-row:last-of-type { border-bottom: 0; }
.rep-row[data-audio] { cursor: pointer; }
.rep-pic { width: 2.2em; height: 2.2em; flex: none; margin-right: 0.6em; }
.rep-pic.none { display: inline-block; }
.rep-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rep-text b { color: #1a1033; font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rep-text small { color: #6b6290; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rep-miss { font-weight: 900; color: #1a1033; background: #ffd0d7; border: 2px solid #1a1033; border-radius: 999px; padding: 0 0.5em; margin-left: 0.5em; font-size: 0.85em; }
.rep-play { color: #6d3df0; margin-left: 0.5em; }
.rep-note { margin: 0.5em 0 0; font-size: 0.7em; color: #6b6290; text-align: right; }

/* Η σελίδα της τηλεόρασης δεν σκρολάρει ποτέ (βλ. fitScreen στο tv.js) */
html, body { overflow: hidden; }

/* ---------- English Junior A: Κατανόηση ---------- */
.reading-box {
  display: flex;
  align-items: center;
  max-width: 90%;
  background: #fffaf0;
  color: #1a1033;
  border: 4px solid #1a1033;
  border-radius: 24px;
  padding: 0.8em 1.4em;
  box-shadow: 0 7px 0 #1a1033, 0 22px 44px rgba(0, 0, 0, 0.3);
}
.reading-box .passage { font-size: 1.45em; font-weight: 800; line-height: 1.35; text-align: left; margin-right: 0.8em; }
.reading-box .secondary { flex: none; padding: 0.3em 1em; font-size: 0.95em; }
.reading-box .listen-note { flex: none; max-width: 9em; }

/* Παύση από τον host */
.paused-banner {
  position: fixed;
  left: 50%;
  top: 40%;
  z-index: 50;
  margin-left: -4.5em;
  width: 9em;
  padding: 0.35em 0;
  text-align: center;
  background: #ffcf3a;
  color: #1a1033;
  border: 5px solid #1a1033;
  border-radius: 24px;
  font-weight: 900;
  font-size: 2.4em;
  box-shadow: 0 8px 0 #1a1033, 0 0 0 100vmax rgba(14, 6, 40, 0.45);
  transform: rotate(-3deg);
}
.paused-banner .icon { width: 0.9em; height: 0.9em; vertical-align: -0.1em; }

/* «Μάθημα»: κάρτες με τις λέξεις */
.lesson-card {
  position: relative;
  background: #fffaf0;
  color: #1a1033;
  border: 5px solid #1a1033;
  border-radius: 28px;
  padding: 1.1em 2.5em 1.2em;
  text-align: center;
  min-width: 14em;
  box-shadow: 0 9px 0 #1a1033, 0 26px 50px rgba(0, 0, 0, 0.35);
  transform: rotate(-1.5deg);
}
.lesson-card:before {
  content: '';
  position: absolute;
  top: -0.75em;
  left: 50%;
  margin-left: -2.5em;
  width: 5em;
  height: 1.4em;
  background: rgba(62, 197, 255, 0.8);
  border: 2px solid rgba(26, 16, 51, 0.25);
  transform: rotate(-3deg);
}
.lesson-pic { display: block; width: 7.5em; height: 7.5em; margin: 0 auto 0.3em; }
.lesson-en { font-family: 'Dela Gothic One', 'Geologica', sans-serif; font-weight: 400; font-size: 2.8em; color: #6d3df0; line-height: 1.15; }
.lesson-gr { font-size: 1.55em; font-weight: 800; margin: 0.2em 0 0.5em; }

@media (max-width: 800px) {
  .lobby { grid-template-columns: 1fr; }
  .posters { flex-wrap: wrap; }
  .spot { flex-direction: column; }
  .game-slide { margin: 1em 0 0; }
  .answers { flex-direction: column; align-items: center; }
  .answer, .answers.grid .answer { flex-basis: auto; width: 100%; margin: 0.5em 0; }
  .mill { grid-template-columns: 1fr; }
  .ladder { display: none; }
}

/* Κάρτες μνήμης */
.mem-board { display: flex; flex-wrap: wrap; justify-content: center; width: 100%; max-width: 40em; margin: 0.3em auto; }
.mem-card {
  display: flex; align-items: center; justify-content: center;
  width: 8.4em; height: 5.6em; margin: 0.35em; padding: 0.2em;
  background: #fffaf0; color: #1a1033; border: 4px solid #1a1033; border-radius: 16px;
  box-shadow: 0 5px 0 #1a1033; text-align: center; font-weight: 900;
}
.mem-card.en { background: #ffcf3a; }
.mem-card.back { background: #8b5cf6; color: #ffffff; }
.mem-card.back span { font-size: 2.4em; line-height: 1; text-shadow: 0 3px 0 #1a1033; }
.mem-card:nth-child(odd) { transform: rotate(-1.5deg); }
.mem-card:nth-child(even) { transform: rotate(1.2deg); }
.mem-en { font-size: 1.35em; line-height: 1.1; }
.mem-gr { font-size: 1.05em; line-height: 1.15; }
.mem-pic { width: 4.4em; height: 4.4em; }
.mem-count { margin-left: 0.4em; padding: 0 0.35em; border-radius: 8px; background: #1a1033; color: #ffffff; font-weight: 900; }
.chip.done .mem-count { background: #10966f; }
.mem-pic-small { width: 2em; height: 2em; margin-right: 0.4em; vertical-align: middle; }


/* ---------- Math Wars ---------- */
/* Η πράξη σε «πίνακα» με κιμωλία, πολύ μεγάλη για να φαίνεται από τον καναπέ */
.math-q {
  display: inline-block;
  padding: 0.25em 0.8em 0.3em;
  background: #1f5f4a;
  color: #fffaf0;
  border: 5px solid #1a1033;
  border-radius: 22px;
  box-shadow: 0 7px 0 #1a1033, 0 22px 44px rgba(0, 0, 0, 0.3);
  font-family: 'Dela Gothic One', 'Geologica', sans-serif;
  font-weight: 400;
  font-size: 3.4em;
  line-height: 1.2;
  white-space: nowrap;
}
.math-hole {
  display: inline-block;
  min-width: 1.1em;
  margin: 0 0.05em;
  padding: 0 0.15em;
  background: #ffcf3a;
  color: #1a1033;
  border: 4px solid #1a1033;
  border-radius: 0.2em;
  line-height: 1.1;
  text-align: center;
  animation: blink 1.2s ease-in-out infinite;
}
.target-board { display: inline-block; text-align: center; }
.target-label { font-weight: 900; font-size: 1em; color: #ffcf3a; text-transform: uppercase; letter-spacing: 0.08em; text-shadow: 0 2px 0 #1a1033; }
.target-big {
  display: inline-block;
  margin: 0.05em 0 0.25em;
  padding: 0 0.5em;
  background: #fffaf0;
  color: #6d3df0;
  border: 5px solid #1a1033;
  border-radius: 20px;
  box-shadow: 0 7px 0 #1a1033;
  font-family: 'Dela Gothic One', 'Geologica', sans-serif;
  font-weight: 400;
  font-size: 3.6em;
  line-height: 1.25;
  transform: rotate(-2deg);
}
.target-nums { display: flex; justify-content: center; flex-wrap: wrap; }
.target-num {
  display: inline-block;
  min-width: 1.6em;
  margin: 0.2em 0.25em;
  padding: 0 0.3em;
  color: #1a1033;
  border: 4px solid #1a1033;
  border-radius: 14px;
  box-shadow: 0 5px 0 #1a1033;
  font-family: 'Dela Gothic One', 'Geologica', sans-serif;
  font-weight: 400;
  font-size: 1.9em;
  line-height: 1.35;
}
.target-num.tn0 { background: #ff9f43; transform: rotate(-3deg); }
.target-num.tn1 { background: #2dd4bf; transform: rotate(2deg); }
.target-num.tn2 { background: #cdb6ff; transform: rotate(-1deg); }
.target-num.tn3 { background: #c2ec3c; transform: rotate(3deg); }
.k-truefalse .mill-option.opt-0:not(.wrong) { background: #22d3a6; }
.k-truefalse .mill-option.opt-1:not(.wrong) { background: #ff5d73; }
.k-compare .mill-option { font-family: 'Dela Gothic One', 'Geologica', sans-serif; font-weight: 400; }
.t-result .near { color: #e08a00; font-size: 1.2em; line-height: 1; }
.t-result .time b { font-weight: 900; color: #1a1033; }
.t-result .time small { font-size: 0.75em; margin-left: 0.15em; }
.t-result .time { white-space: nowrap; }

/* ---------- Reflex Battle ---------- */
.rx-badge {
  font-family: 'Dela Gothic One', 'Geologica', sans-serif;
  font-weight: 400;
  font-size: 1.2em;
  background: #ffcf3a;
  color: #1a1033;
  border: 4px solid #1a1033;
  border-radius: 14px;
  padding: 0.2em 0.8em;
  box-shadow: 0 5px 0 #1a1033;
  transform: rotate(-3deg);
}
.rx-badge.boss { background: #ff3b4e; color: #ffffff; font-size: 1.6em; animation: rxGrow 0.5s ease-in-out infinite alternate; }
.rx-big-title {
  font-family: 'Dela Gothic One', 'Geologica', sans-serif;
  font-weight: 400;
  font-size: 3.6em;
  line-height: 1.1;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow: 0 6px 0 #1a1033;
  margin: 0 0 0.25em;
  transform: rotate(-2deg);
}
.rx-instr.on-tv {
  font-weight: 900;
  font-size: 2.1em;
  line-height: 1.2;
  color: #ffffff;
  text-shadow: 0 4px 0 #1a1033;
  max-width: 26em;
}
.rx-instr.on-tv.tiny { font-size: 0.9em; font-weight: 700; text-shadow: none; opacity: 0.85; letter-spacing: 0.05em; }
.rx-instr.on-tv.inked { background: #1a1033; border-radius: 16px; padding: 0.2em 0.6em; text-shadow: none; }
.rx-stage.on-tv { position: relative; width: 30em; height: 15em; flex: none; }
.rx-stage.on-tv.k-nopress, .rx-stage.on-tv.k-double { width: 16em; }
.rx-stage.on-tv.k-popup { height: 17em; }
.rx-stage.on-tv .rx-push.bank { display: none; }
.rx-stage.on-tv .rx-popup { font-size: 0.95em; }
.rx-chips .chip { margin: 0.2em 0.3em; }
.rx-chips .rx-hearts { margin-left: 0.3em; font-size: 0.85em; }
.rx-chips .rx-out { opacity: 0.55; }
.rx-out-tag { margin-left: 0.4em; font-size: 0.75em; font-weight: 900; color: #ff5d73; }
.rx-banked { margin-left: 0.4em; background: #22d3a6; color: #1a1033; border-radius: 8px; padding: 0 0.35em; font-weight: 900; }
.rx-explain { font-weight: 900; font-size: 1.7em; line-height: 1.2; color: #ffffff; text-shadow: 0 4px 0 #1a1033; max-width: 28em; }
.rx-shame { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; }
.rx-shame-title {
  font-family: 'Dela Gothic One', 'Geologica', sans-serif;
  font-weight: 400;
  font-size: 1.25em;
  background: #ff3b4e;
  color: #ffffff;
  border: 4px solid #1a1033;
  border-radius: 12px;
  padding: 0.15em 0.6em;
  box-shadow: 0 4px 0 #1a1033;
  margin: 0.2em 0.5em;
  transform: rotate(-3deg);
}
.rx-shame.good .rx-shame-title { background: #22d3a6; color: #1a1033; }
.rx-fell {
  display: inline-flex;
  align-items: center;
  background: #fffaf0;
  color: #1a1033;
  border: 3px solid #1a1033;
  border-radius: 12px;
  padding: 0.15em 0.5em 0.15em 0.2em;
  margin: 0.2em 0.3em;
  box-shadow: 0 4px 0 #1a1033;
  font-weight: 900;
  animation: rxStick 0.4s ease-out both;
}
.rx-fell:nth-child(odd) { transform: rotate(3deg); }
.rx-fell:nth-child(even) { transform: rotate(-4deg); }
.rx-fell .avatar { width: 1.5em; height: 1.5em; margin-right: 0.3em; }
.rx-fell small { margin-left: 0.4em; color: #ff3b4e; font-size: 0.75em; }
.no-anim .rx-fell { animation: none; }
@keyframes rxStick { from { opacity: 0; -webkit-transform: scale(2) rotate(-12deg); transform: scale(2) rotate(-12deg); } }
.rx-tag { font-size: 0.7em; color: #ff3b4e; font-weight: 900; margin-left: 0.2em; }
.rx-tv-reveal .t-result .rx-hearts { font-size: 0.75em; margin-left: 0.2em; }
.rx-tv-reveal .t-result .time { white-space: nowrap; }

/* ---------- Ονειρόκαρτες ---------- */
.dr-teller { display: flex; align-items: center; background: #fffaf0; color: #1a1033; border: 4px solid #1a1033; border-radius: 18px; padding: 0.4em 1em 0.4em 0.5em; box-shadow: 0 5px 0 #1a1033; transform: rotate(-2deg); }
.dr-teller .avatar { width: 2.6em; height: 2.6em; font-size: 1.1em; margin-right: 0.5em; }
.dr-teller small { display: block; font-weight: 800; color: #6d3df0; text-transform: uppercase; font-size: 0.75em; }
.dr-teller b { font-size: 1.6em; font-weight: 900; }
.dr-clue { background: #fffaf0; color: #1a1033; border: 4px solid #1a1033; border-radius: 18px; padding: 0.3em 1.2em 0.4em; box-shadow: 0 5px 0 #1a1033; max-width: 30em; }
.dr-clue small { display: block; font-weight: 800; color: #6d3df0; font-size: 0.8em; }
.dr-clue b { font-size: 1.9em; font-weight: 900; line-height: 1.2; }
.dr-clue.spoken { display: flex; align-items: center; }
.dr-clue.spoken .avatar { width: 2em; height: 2em; margin-right: 0.5em; }
.dr-clue.spoken b { font-size: 1.4em; }
.dr-backs { display: flex; justify-content: center; min-height: 9em; padding-top: 0.5em; }
.dr-backs .dc { width: 5.4em; height: 8.1em; margin: 0 -0.6em; }
.dr-board { display: flex; flex-wrap: wrap; justify-content: center; max-width: 52em; }
.dr-slot { position: relative; display: flex; flex-direction: column; align-items: center; margin: 0.35em 0.45em; }
.dr-tvcard { width: 7.4em; height: 11.1em; }
.dr-board.two-rows .dr-tvcard { width: 6.2em; height: 9.3em; }
.dr-num {
  position: absolute;
  top: -0.4em;
  left: -0.4em;
  width: 1.7em;
  height: 1.7em;
  border-radius: 50%;
  background: #ffcf3a;
  color: #1a1033;
  border: 3px solid #1a1033;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Dela Gothic One', 'Geologica', sans-serif;
  font-size: 0.95em;
  z-index: 2;
}
.dr-slot.story .dc { border-color: #ffcf3a; box-shadow: 0 0 0 0.25em #ffcf3a, 0 0.35em 0 0.25em #1a1033; }
.dr-owner { display: flex; align-items: center; margin-top: 0.35em; font-weight: 900; font-size: 0.85em; white-space: nowrap; max-width: 8em; overflow: hidden; }
.dr-owner .avatar { width: 1.4em; height: 1.4em; margin: 0 0.25em; }
.dr-voters { display: flex; flex-wrap: wrap; justify-content: center; max-width: 7.5em; min-height: 1.2em; }
.dr-voters .avatar { width: 1.15em; height: 1.15em; font-size: 0.7em; margin: 0.05em; }
.dr-novote { opacity: 0.5; font-size: 0.8em; }
.dr-reveal { display: flex; align-items: flex-start; justify-content: center; width: 100%; }
.dr-reveal .dr-board { flex: 1; }
.dr-gains { width: 15em; flex: none; margin-left: 1em; text-align: left; }
.dr-tv .rx-explain { font-size: 1.3em; }
/* 6–8 κάρτες: δύο σειρές των 4 (ή 3). */
.dr-board.two-rows { max-width: 37em; }
.dr-board.two-rows .dr-slot { width: 8.2em; }
.dr-gains { width: 17em; }
.dr-gains .t-result { grid-template-columns: 1.2em 1.8em minmax(0, 1fr) 0 2.6em; }

/* ---------- Γεωγραφία: ο χάρτης του «Πού είναι;» ---------- */
.geo-q { text-align: center; margin: 0.2em 0 0.3em; }
.geo-q small { display: block; font-size: 0.85em; font-weight: 800; color: #ffd23f; text-transform: uppercase; letter-spacing: 0.04em; }
.geo-q b { display: block; font-family: 'Dela Gothic One', Geologica, sans-serif; font-weight: 400; font-size: 2.4em; line-height: 1.1; text-transform: uppercase; color: #ffffff; text-shadow: 0 0.08em 0 #1a1033; }
.geo-map { position: relative; margin: 0.3em auto; border: 0.22em solid #1a1033; border-radius: 0.8em; overflow: hidden; box-shadow: 0 0.3em 0 #1a1033; background: #3d2a85; max-width: 100%; }
.geo-map img { display: block; width: 100%; height: auto; }
.geo-layer { position: absolute; left: 0; top: 0; right: 0; bottom: 0; }
.geo-pin { position: absolute; width: 1.6em; height: 1.6em; margin: -0.8em 0 0 -0.8em; border: 0.15em solid #1a1033; border-radius: 50%; overflow: hidden; }
.geo-pin .avatar { width: 100%; height: 100%; font-size: 0.7em; border: 0; }
.geo-target { position: absolute; width: 2.2em; height: 2.2em; margin: -1.1em 0 0 -1.1em; color: #ffd23f; }
.geo-target svg { width: 100%; height: 100%; fill: #ffd23f; stroke: #1a1033; stroke-width: 1.5; }
/* «Βρες τη σημαία»: μεγαλύτερες σημαίες (4:3) στις επιλογές. */
.k-flags .mill-option .opt-pic { width: 6em; height: 4.5em; }
/* Αφίσα: μακριές λέξεις στον τίτλο (βλ. posterTitleSize στο tv.js). */
.poster-title.long { font-size: 0.85em; }
.poster-title.xlong { font-size: 0.68em; }