/*
  Κοινό design για τηλεόραση και κινητό: «βραδινό σόου με αυτοκόλλητα».
  Σκούρα σκηνή με ακτίνες και κομφετί, πάνω της «αυτοκόλλητα» από χαρτί με
  χοντρό σκούρο περίγραμμα και σκληρή σκιά.

  Τα χρώματα γράφονται απευθείας (όχι CSS variables), γιατί πολλές smart TV
  έχουν παλιούς browsers που δεν τα υποστηρίζουν και έδειχναν λευκή σελίδα.

  Παλέτα:
    μελάνι   #1a1033 (περιγράμματα, κείμενο σε χαρτί)
    σκηνή    #6d28d9 → #7c3aed → #db2777 (διαγώνιο gradient, μωβ → ματζέντα)
    χαρτί    #fffaf0         απαλό κείμενο στη σκηνή  #f3eeff
    ήλιος    #ffcf3a (κύρια κουμπιά, έμφαση)
    κοράλλι  #ff5d73   ουρανός #3ec5ff   μέντα #22d3a6   σταφύλι #8b5cf6   μανταρίνι #ff8a3d
    Οι 4 απαντήσεις: Α πορτοκαλί #ff9f43, Β τιρκουάζ #2dd4bf, Γ λιλά #cdb6ff, Δ λάιμ #c2ec3c
  Γραμματοσειρές: Dela Gothic One (τίτλοι, νούμερα), Geologica (όλα τα άλλα). Και οι δύο έχουν ελληνικά.
*/

html {
  min-height: 100%;
  background-color: #7c3aed;
  background-image: linear-gradient(135deg, #6d28d9 0%, #7c3aed 42%, #c026d3 75%, #e0338a 100%);
  background-attachment: fixed;
}

body {
  margin: 0;
  min-height: 100vh;
  color: #ffffff;
  background: transparent;
  font-family: 'Geologica', 'Commissioner', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

* { box-sizing: border-box; }

/* Ακτίνες προβολέα (πίσω) και κομφετί-σχέδια (μπροστά), σε SVG ώστε να δουλεύουν παντού */
body:before, body:after {
  content: '';
  position: fixed;
  pointer-events: none;
  z-index: 0;
}
body:before {
  width: 160vmax;
  height: 160vmax;
  left: 50%;
  top: 38%;
  margin-left: -80vmax;
  margin-top: -80vmax;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-400 -400 800 800'%3E%3Cpath fill='%23ffffff' fill-opacity='0.07' d='M0 0L400 0L395 63zM0 0L380 124L356 182zM0 0L324 235L283 283zM0 0L235 324L182 356zM0 0L124 380L63 395zM0 0L0 400L-63 395zM0 0L-124 380L-182 356zM0 0L-235 324L-283 283zM0 0L-324 235L-356 182zM0 0L-380 124L-395 63zM0 0L-400 0L-395 -63zM0 0L-380 -124L-356 -182zM0 0L-324 -235L-283 -283zM0 0L-235 -324L-182 -356zM0 0L-124 -380L-63 -395zM0 0L0 -400L63 -395zM0 0L124 -380L182 -356zM0 0L235 -324L283 -283zM0 0L324 -235L356 -182zM0 0L380 -124L395 -63z'/%3E%3C/svg%3E") center no-repeat;
  background-size: 100% 100%;
}
body:after {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'%3E%3Cg fill='none' stroke-width='5' stroke-linecap='round' stroke-linejoin='round' opacity='0.22'%3E%3Cpath stroke='%23ffcf3a' d='M30 60q12-14 24 0t24 0'/%3E%3Ccircle stroke='%23ffffff' cx='250' cy='50' r='9'/%3E%3Cpath stroke='%23ffffff' d='M160 150l14 4-10 10z'/%3E%3Cpath stroke='%23ffffff' d='M250 230q12-14 24 0t24 0'/%3E%3Cpath stroke='%23ffcf3a' d='M70 250l4 10 10 1-8 6 3 10-9-6-9 6 3-10-8-6 10-1z'/%3E%3Ccircle stroke='%23ff8a3d' cx='130' cy='40' r='4'/%3E%3Cpath stroke='%23ffffff' d='M290 140v14M283 147h14'/%3E%3Cpath stroke='%23ffffff' d='M40 160h14M47 153v14'/%3E%3C/g%3E%3C/svg%3E");
}
body > * { position: relative; z-index: 1; }

button {
  font: inherit;
  cursor: pointer;
  border: 3px solid #1a1033;
  border-radius: 16px;
  padding: 0.75em 1.4em;
  font-weight: 800;
  background: #ffcf3a;
  color: #1a1033;
  box-shadow: 0 5px 0 #1a1033;
  transition: transform 0.06s, box-shadow 0.06s;
}
button:active { transform: translateY(4px); box-shadow: 0 1px 0 #1a1033; }
button:disabled { opacity: 0.45; cursor: default; }
button:disabled:active { transform: none; box-shadow: 0 5px 0 #1a1033; }
button.secondary { background: #fffaf0; color: #1a1033; }
button.danger { background: #ff5d73; color: #1a1033; }

a { color: #6d3df0; font-weight: 800; }

.logo {
  font-family: 'Dela Gothic One', 'Geologica', 'Commissioner', sans-serif;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: #ffcf3a;
  text-shadow: -2px -2px 0 #1a1033, 2px -2px 0 #1a1033, -2px 2px 0 #1a1033, 2px 2px 0 #1a1033, 0 2px 0 #1a1033, 0 -2px 0 #1a1033, 2px 0 0 #1a1033, -2px 0 0 #1a1033, 3px 5px 0 #ff5d73, 5px 7px 0 #1a1033;
}

.muted { color: #f3eeff; }
.small { font-size: 0.85em; }
.hidden { display: none !important; }

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8em;
  height: 1.8em;
  border-radius: 50%;
  font-weight: 900;
  color: #1a1033;
  border: 0.12em solid #1a1033;
  box-shadow: 0 0.1em 0 #1a1033;
  flex: none;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  background: #fffaf0;
  color: #1a1033;
  border: 3px solid #1a1033;
  padding: 0.8em 1.2em;
  border-radius: 16px;
  font-weight: 800;
  max-width: calc(100% - 32px);
  text-align: center;
  z-index: 50;
  box-shadow: 0 5px 0 #1a1033, 0 14px 30px rgba(0, 0, 0, 0.35);
}

@keyframes pop {
  0% { transform: scale(0.6); opacity: 0; }
  65% { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.pop { animation: pop 0.38s cubic-bezier(0.2, 0.9, 0.3, 1.3) both; }
.toast.pop { animation: none; }

@keyframes wobble {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg); }
}
@keyframes bounceIn {
  0% { transform: scale(0.2) rotate(-20deg); opacity: 0; }
  60% { transform: scale(1.15) rotate(6deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px) rotate(-4deg); }
  40% { transform: translateX(7px) rotate(3deg); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(4px); }
}

/* Κομφετί για τον νικητή */
.confetti {
  position: fixed;
  top: -20px;
  width: 10px;
  height: 14px;
  z-index: 40;
  pointer-events: none;
  border-radius: 2px;
  animation: fall linear forwards;
}
@keyframes fall {
  to { transform: translateY(110vh) rotate(720deg); }
}

/* Εικονίδια SVG */
.icon {
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.18em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.icon .f { fill: currentColor; }
.icon .k { fill: #1a1033; stroke: none; }
.icon.gold { color: #ffcf3a; }
.icon.gold .f { stroke: #1a1033; stroke-width: 1.6; }
.icon.good { color: #22d3a6; }
.icon.bad { color: #ff5d73; }

/* Avatars & αντιδράσεις: γεμάτα σχήματα σε σκούρο, με «κοψίματα» στο χρώμα του κύκλου */
.av-icon, .re-icon { width: 70%; height: 70%; fill: #1a1033; stroke: none; }
.av-icon .cut, .re-icon .cut { fill: rgba(255, 255, 255, 0.92); }
.av-icon .line, .re-icon .line { fill: none; stroke: #1a1033; stroke-width: 2.2; stroke-linecap: round; }
.av-icon .cutline, .re-icon .cutline { fill: none; stroke: rgba(255, 255, 255, 0.92); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Οι 4 απαντήσεις (ίδια σε τηλεόραση και κινητό): δικά μας χρώματα και «αυτοκόλλητο» με το ελληνικό γράμμα */
.letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.75em;
  height: 1.75em;
  margin-right: 0.6em;
  background: #1a1033;
  color: #fffaf0;
  border: 2px solid #fffaf0;
  border-radius: 0.45em 0.45em 0.45em 0.15em;
  box-shadow: 2px 3px 0 rgba(26, 16, 51, 0.45);
  transform: rotate(-6deg);
}
.letter b { font-family: 'Dela Gothic One', 'Geologica', sans-serif; font-weight: 400; font-size: 0.8em; line-height: 1; }
.opt-0 { background: #ff9f43; }
.opt-1 { background: #2dd4bf; }
.opt-2 { background: #cdb6ff; }
.opt-3 { background: #c2ec3c; }

/* Το «τρελό» λογότυπο (Tzertzelo): κάθε γράμμα αλλιώτικο, το O ματάκι, σχεδιάκια γύρω */
.logo.crazy { position: relative; display: inline-block; white-space: nowrap; letter-spacing: 0; padding-right: 0.12em; }
.logo.crazy .cl { position: relative; display: inline-block; margin: 0 -0.02em; }
.logo.crazy .eye { width: 0.9em; height: 0.9em; vertical-align: -0.06em; margin-left: 0.06em; }
.logo.crazy .eye svg { display: block; width: 100%; height: 100%; }
.logo.crazy .pupil { animation: lookAround 4s ease-in-out infinite; }
@keyframes lookAround {
  0%, 40% { transform: translate(0, 0); }
  50%, 70% { transform: translate(-5px, 2px); }
  80%, 100% { transform: translate(0, 0); }
}
.logo.crazy .deco { position: absolute; fill: none; stroke: #1a1033; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.logo.crazy .d-spark { width: 0.45em; height: 0.45em; left: -0.32em; top: -0.18em; stroke: #ff6b9d; }
.logo.crazy .d-swirl { width: 0.62em; height: 0.62em; left: 38%; top: -0.42em; stroke: #ff6b9d; stroke-width: 3; }
.logo.crazy .d-star { width: 0.38em; height: 0.38em; right: -0.3em; top: -0.12em; fill: #ffcf3a; stroke: #1a1033; stroke-width: 2; transform: rotate(12deg); }
.logo.crazy .d-zig { width: 1.1em; height: 0.33em; left: 18%; bottom: -0.2em; stroke: #2dd4bf; stroke-width: 3; }

/* Επαγγελματικό λογότυπο (GlossaPlay): σήμα «Aa» και η λέξη σε δύο χρώματα, καθαρή γραμματοσειρά */
.logo.pro { display: inline-flex; align-items: center; white-space: nowrap; font-family: 'Geologica', 'Commissioner', sans-serif; font-weight: 900; letter-spacing: -0.01em; text-shadow: 0 3px 0 #1a1033; }
.logo.pro .gp-mark { display: inline-block; width: 1.25em; height: 1.12em; margin-right: 0.18em; flex: none; }
.logo.pro .gp-mark svg { display: block; width: 100%; height: 100%; }
.logo.pro .gp-a { color: #ffffff; }
.logo.pro .gp-b { color: #ffcf3a; }

/* ---------- Reflex Battle: οι σκηνές των microgames (κοινές για τηλεόραση και κινητό) ----------
   Όλα σε em: στην τηλεόραση μεγαλώνουν με το .tv, στο κινητό με το body. Τα κουμπιά (data-rx)
   δεν ξαναφτιάχνονται όσο τρέχει ο γύρος: αλλάζουν μόνο κλάσεις και κείμενα (public/reflex.js). */
.rx-scene {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.rx-scene [data-rx] { cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

.rx-push {
  width: 9em;
  height: 9em;
  max-width: 100%;
  border-radius: 50%;
  background: #ff3b4e;
  border: 0.3em solid #1a1033;
  box-shadow: 0 0.45em 0 #1a1033, 0 0 0 0.6em rgba(255, 59, 78, 0.3);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'Dela Gothic One', 'Geologica', sans-serif;
  font-weight: 400;
  animation: rxPulse 0.8s ease-in-out infinite alternate;
}
.rx-push-label { font-size: 2em; line-height: 1.05; padding: 0 0.35em; text-shadow: 0 0.08em 0 #1a1033; }
.rx-push.long .rx-push-label { font-size: 1.05em; }
.rx-push.grow { animation: rxGrow 0.45s ease-in-out infinite alternate; background: #ff1f3d; }
.rx-push.alt { background: #ffcf3a; color: #1a1033; box-shadow: 0 0.45em 0 #1a1033, 0 0 0 0.6em rgba(255, 207, 58, 0.3); }
.rx-push.alt .rx-push-label { text-shadow: none; }
.rx-push.bank { width: 7em; height: 7em; background: #22d3a6; color: #1a1033; box-shadow: 0 0.4em 0 #1a1033; animation: none; flex: none; }
.rx-push.bank .rx-push-label { font-size: 1.05em; text-shadow: none; }
@keyframes rxPulse { to { transform: scale(1.06); } }
@keyframes rxGrow { to { transform: scale(1.22) rotate(-3deg); } }

.rx-grid { position: relative; width: 100%; flex: 1; min-height: 6em; }
.rx-sw {
  position: absolute;
  width: 48%;
  height: 47%;
  border: 0.2em solid #1a1033;
  border-radius: 0.8em;
  box-shadow: 0 0.28em 0 #1a1033;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  -webkit-transition: left 0.16s ease-out, top 0.16s ease-out;
  transition: left 0.16s ease-out, top 0.16s ease-out;
}
.rx-sw span { font-size: 1.05em; letter-spacing: 0.02em; }
.rx-p0 { left: 0; top: 0; }
.rx-p1 { left: 52%; top: 0; }
.rx-p2 { left: 0; top: 52%; }
.rx-p3 { left: 52%; top: 52%; }
.rx-shape { width: 2em; height: 2em; fill: #fffaf0; stroke: #1a1033; stroke-width: 2; stroke-linejoin: round; }
.rx-shape.ink { width: 0.7em; height: 0.7em; margin-left: 0.2em; vertical-align: middle; }

.rx-word {
  background: #1a1033;
  border-radius: 0.3em;
  padding: 0.15em 0.6em 0.2em;
  font-family: 'Dela Gothic One', 'Geologica', sans-serif;
  font-weight: 400;
  font-size: 2.4em;
  line-height: 1.2;
  margin-bottom: 0.25em;
  flex: none;
}

.rx-light {
  width: 100%;
  height: 100%;
  border-radius: 1em;
  border: 0.25em solid #1a1033;
  box-shadow: 0 0.35em 0 #1a1033;
  background: #ff3b4e;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'Dela Gothic One', 'Geologica', sans-serif;
  font-weight: 400;
}
.rx-light-label { font-size: 2.3em; padding: 0 0.3em; text-shadow: 0 0.08em 0 #1a1033; }
.rx-light.st-wait .rx-light-label { font-size: 1.4em; }
.rx-light.st-go { background: #16b85a; }
.rx-light.st-lime { background: #b8ec2c; }
.rx-light.st-teal { background: #12c2b0; }
.rx-light.st-olive { background: #7d9a1c; }
.rx-light.st-word { background: #ff3b4e; }
.rx-light.st-word .rx-light-label { color: #16b85a; text-shadow: 0 0.06em 0 #1a1033, 0 -0.04em 0 #ffffff; }
.rx-k-last .rx-light { background: #3b2a7a; }
.rx-k-last .rx-light.st-fake { background: #ffcf3a; color: #1a1033; }
.rx-k-last .rx-light.st-fake .rx-light-label { text-shadow: none; }
.rx-k-last .rx-light.st-go { background: #16b85a; }

.rx-nums { display: flex; width: 100%; height: 100%; }
.rx-num {
  flex: 1;
  margin: 0 0.25em;
  background: #fffaf0;
  color: #1a1033;
  border: 0.2em solid #1a1033;
  border-radius: 0.8em;
  box-shadow: 0 0.28em 0 #1a1033;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Dela Gothic One', 'Geologica', sans-serif;
  font-weight: 400;
  overflow: hidden;
}

.rx-cue {
  display: flex;
  align-items: center;
  background: #fffaf0;
  color: #1a1033;
  border: 0.2em solid #1a1033;
  border-radius: 0.6em;
  padding: 0.2em 0.6em;
  font-family: 'Dela Gothic One', 'Geologica', sans-serif;
  font-weight: 400;
  font-size: 1.5em;
  box-shadow: 0 0.2em 0 #1a1033;
  flex: none;
}
.rx-arrow { width: 2.6em; height: 1.3em; margin-left: 0.4em; fill: #ff5d73; stroke: #1a1033; stroke-width: 2.5; stroke-linejoin: round; }
.rx-sides { display: flex; width: 100%; flex: 1; margin-top: 0.6em; min-height: 5em; }
.rx-side {
  flex: 1;
  margin: 0 0.25em;
  border: 0.2em solid #1a1033;
  border-radius: 0.8em;
  box-shadow: 0 0.28em 0 #1a1033;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1a1033;
  font-weight: 900;
  font-size: 1.15em;
}
.rx-side.s0 { background: #3ec5ff; }
.rx-side.s1 { background: #ff9f43; }

.rx-popup {
  position: relative;
  width: 100%;
  max-width: 19em;
  background: #ffffff;
  color: #1a1033;
  border: 0.2em solid #1a1033;
  border-radius: 0.8em;
  box-shadow: 0 0.35em 0 #1a1033;
  padding: 0.9em 0.9em 0.6em;
  text-align: center;
}
.rx-pop-title { font-weight: 900; font-size: 1.25em; line-height: 1.2; }
.rx-pop-text { color: #6b6290; font-size: 0.85em; margin: 0.3em 0 0.4em; }
.rx-pop-btn { margin-top: 0.45em; border-radius: 0.5em; font-weight: 900; }
.rx-pop-btn.big { background: #16b85a; color: #ffffff; font-size: 1.25em; padding: 0.65em 0.4em; border: 0.15em solid #1a1033; box-shadow: 0 0.2em 0 #1a1033; }
.rx-pop-btn.mid { background: #ece6fb; color: #1a1033; padding: 0.55em 0.4em; border: 0.12em solid #c9bfe6; }
.rx-pop-btn.small { color: #a39cbd; font-size: 0.72em; font-weight: 700; text-decoration: underline; padding: 0.5em 0.4em; }
.rx-x {
  position: absolute;
  top: -0.8em;
  right: -0.8em;
  width: 2.1em;
  height: 2.1em;
  border-radius: 50%;
  background: #1a1033;
  border: 0.15em solid #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rx-x svg { width: 1.2em; height: 1.2em; fill: none; stroke: #ffffff; stroke-width: 3; stroke-linecap: round; }

.rx-k-chicken { justify-content: center; }
.rx-chick { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; flex: none; min-height: 0; }
.rx-balloon { width: 5em; height: 6.6em; transform-origin: 50% 100%; -webkit-transition: transform 0.12s linear; transition: transform 0.12s linear; }
.rx-balloon svg { display: block; width: 100%; height: 100%; }
.rx-value { font-family: 'Dela Gothic One', 'Geologica', sans-serif; font-weight: 400; font-size: 2.2em; line-height: 1.1; margin: 0.15em 0 0.25em; text-shadow: 0 0.08em 0 #1a1033; }
.rx-chick.boom .rx-balloon { opacity: 0; }
.rx-chick.boom .rx-value { color: #ff5d73; font-size: 3em; animation: rxGrow 0.3s ease-in-out 2 alternate; }

/* Ζωές: καρδούλες */
.rx-hearts { display: inline-flex; align-items: center; white-space: nowrap; }
.rx-hearts .icon { width: 1.05em; height: 1.05em; margin: 0 0.06em; color: #ff5d73; }
.rx-hearts .icon.on .f { stroke: #1a1033; stroke-width: 1.6; }
.rx-hearts .icon.off { color: #b9b0d6; }
.rx-hearts .icon.off .f { fill: none; }

/* ---------- Ονειρόκαρτες: η κάρτα (κοινή για τηλεόραση και κινητό) ---------- */
.dc {
  position: relative;
  overflow: hidden;
  background: #2b1b5e;
  border: 0.18em solid #1a1033;
  border-radius: 0.6em;
  box-shadow: 0 0.25em 0 #1a1033;
  flex: none;
}
.dc-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dc-pic { position: absolute; height: auto; }
/* Η πλάτη της κάρτας: ανάποδη, με σχέδιο. */
.dc.dr-back {
  background: #6d3df0;
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.14) 0, rgba(255, 255, 255, 0.14) 0.4em, transparent 0.4em, transparent 0.8em);
}