@font-face {
  font-family: 'TeleNeo';
  src: url('fonts/TeleNeoWeb-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'TeleNeo';
  src: url('fonts/TeleNeoWeb-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'TeleNeo';
  src: url('fonts/TeleNeoWeb-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'TeleNeo';
  src: url('fonts/TeleNeoWeb-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: 'TeleNeoOriginal';
  src: url('fonts/TeleNeo-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: 'TeleNeoOriginal';
  src: url('fonts/TeleNeo-Thin.woff2') format('woff2');
  font-weight: 100;
  font-display: swap;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

:root {
  --magenta: #E6007E;
  --magenta-dark: #B80066;
  --white: #FFFFFF;
  --black: #000000;
  --gray-text: rgba(255,255,255,0.75);
  --gray-input: #D9D9D9;
  --green: #00C853;
  --red: #FF1744;
  --font-heading: 'TeleNeoOriginal', 'TeleNeo', sans-serif;
  --font-body: 'TeleNeoOriginal', 'TeleNeo', sans-serif;
}

/* Real device viewport - fills whatever the tablet reports, in either
   orientation. The actual layout canvas is #app, a fixed-size surface
   (1920x1200 landscape, or 1200x1920 portrait) that gets scaled+centered
   into this viewport by fitCanvas() in index.html whenever the tablet is
   rotated. Background here matches the canvas so any letterbox edge is
   invisible. */
html, body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  font-family: var(--font-body);
  font-weight: 400;
  background: var(--magenta);
  color: var(--white);
  -webkit-font-smoothing: antialiased;
}

#app {
  width: 1920px;
  height: 1200px;
  position: fixed;
  top: 0;
  left: 0;
  transform-origin: top left;
  overflow: hidden;
  background: var(--magenta);
}

html.orientation-portrait #app {
  width: 1200px;
  height: 1920px;
}

.screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  background: var(--magenta);
}

.screen.active {
  display: flex;
  opacity: 1;
}

.screen-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 240px 210px 200px;
}

/* ===== T LOGO (fixed, all screens except welcome) ===== */
.t-logo-fixed {
  position: absolute;
  top: 56px;
  right: 64px;
  width: 90px;
  height: auto;
  z-index: 100;
  pointer-events: none;
  opacity: 0.85;
  transition: opacity 0.3s ease;
}
.t-logo-hidden {
  opacity: 0 !important;
}

/* ===== SETUP SCREEN (first launch only) ===== */
.setup-content {
  align-items: center;
  gap: 44px;
}

.setup-title {
  font-family: var(--font-heading);
  font-size: 64px;
  font-weight: 800;
  text-align: center;
}

.setup-hint {
  font-size: 32px;
  opacity: 0.8;
  text-align: center;
}

.setup-input {
  width: 100%;
  max-width: 900px;
  padding: 34px 44px;
  font-size: 34px;
  font-family: var(--font-heading);
  font-weight: 800;
  border-radius: 50px;
  border: none;
  color: var(--black);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ===== WELCOME SCREEN =====
   Text + TV image treated as one centered composition (not edge-anchored):
   both are fixed-width flex children, centered as a pair with a shared gap,
   so the whole group reads as a single balanced unit on screen. */
.welcome-content {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  max-width: none;
  padding-left: 100px;
  padding-right: 100px;
  gap: 100px;
}

.welcome-text {
  display: flex;
  flex-direction: column;
  gap: 56px;
  max-width: 780px;
  flex-shrink: 0;
}

.welcome-intro-text {
  display: flex;
  flex-direction: column;
  gap: 56px;
}

/* "Magnetic motion" entrance: heading flies in first, subtitle follows -
   replays every time the welcome screen becomes active again (app.js's
   showScreen() forces a reflow between removing/re-adding .active, which
   restarts these animations from the start each time). */
@keyframes fly-in-settle {
  0%   { opacity: 0; transform: translateY(-90px); }
  70%  { opacity: 1; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}

.welcome-heading {
  font-family: var(--font-heading);
  font-size: 92px;
  font-weight: 800;
  line-height: 1.05;
}

/* Scoped to .screen.active (not just .welcome-heading) so the animation
   actually restarts each time the welcome screen re-activates - a bare
   .welcome-heading rule would only ever play once, on first page load. */
.screen.active .welcome-heading {
  animation: fly-in-settle 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.welcome-subtitle {
  /* 'TeleNeoOriginal' (var(--font-body)) only has Thin(100)/ExtraBold(800)
     faces, so weight 400 was silently rendering as Thin - looked too light.
     'TeleNeo' has a real Regular/Medium/Bold face, so use it directly here. */
  font-family: 'TeleNeo', sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.35;
  color: rgba(255,255,255,0.95);
  max-width: 780px;
}

.screen.active .welcome-subtitle {
  animation: fly-in-settle 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.45s;
}

.welcome-tv-carousel {
  position: relative;
  width: 820px;
  max-width: 42vw;
  height: 520px;
  flex-shrink: 0;
}

.tv-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.6s ease;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.35));
}

.tv-slide.active {
  opacity: 1;
  animation: tv-bounce-in 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* "Grows, overshoots, settles back" - the TV pops in on each carousel
   change (and on first load) instead of just crossfading in flat. */
@keyframes tv-bounce-in {
  0%   { transform: scale(0.82); }
  55%  { transform: scale(1.08); }
  78%  { transform: scale(0.97); }
  100% { transform: scale(1); }
}

.welcome-buttons {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
}

/* Anti-burn-in: SUDJELUJ / VISE INFORMACIJA periodically trade places (see
   app.js) - exact pixel offset is computed at runtime since the two buttons
   are different widths. */
.btn-primary.btn-swap,
.btn-outline.btn-swap {
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.welcome-buttons .btn-primary,
.welcome-buttons .btn-outline {
  align-self: auto;
}

/* ===== BUTTONS (pill, white on magenta) =====
   Text-transform:uppercase here (not hardcoded caps in the HTML) is what
   keeps every CTA - regardless of how its label is typed - visually
   consistent, so labels don't drift between caps and sentence case again. */
.btn-primary {
  align-self: flex-start;
  padding: 30px 48px;
  background: var(--white);
  color: var(--magenta);
  border: none;
  border-radius: 100px;
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 800;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  letter-spacing: 0.3px;
}

.btn-primary:active {
  transform: scale(0.97);
}

.btn-primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn-outline {
  /* outline (not border) so the 5px ring is drawn without adding to the
     box's rendered size - keeps this pill EXACTLY the same height/width
     as .btn-primary for the same text length, instead of the border
     making it a few px larger on every side. */
  align-self: flex-start;
  padding: 30px 48px;
  background: transparent;
  color: var(--white);
  border: none;
  outline: 5px solid var(--white);
  outline-offset: -5px;
  border-radius: 100px;
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 800;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: transform 0.15s ease;
  letter-spacing: 0.3px;
}

.btn-outline:active {
  transform: scale(0.97);
}

.btn-bottom-right {
  position: absolute;
  right: 150px;
  bottom: 235px;
}

/* ===== REGISTRATION SCREEN ===== */
.registration-content {
  justify-content: center;
  gap: 60px;
  max-width: 1400px;
}

.reg-field {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.reg-label {
  font-family: var(--font-heading);
  font-size: 56px;
  font-weight: 800;
}

.reg-input {
  width: 100%;
  max-width: 1200px;
  background: transparent;
  border: none;
  border-bottom: 3px solid rgba(255,255,255,0.7);
  padding: 8px 4px 22px;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 40px;
  font-weight: 400;
  outline: none;
  caret-color: var(--white);
}

.reg-input::placeholder {
  color: rgba(255,255,255,0.45);
}

.reg-input:focus {
  border-bottom-color: var(--white);
}

/* ===== GDPR CONSENT ===== */
.gdpr-row {
  display: flex;
  align-items: flex-start;
  gap: 100px;
  margin-top: 20px;
}

.gdpr-consent {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 22px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  max-width: 1150px;
}

.gdpr-checkbox {
  width: 46px;
  height: 46px;
  min-width: 46px;
  border-radius: 8px;
  border: 3px solid rgba(255,255,255,0.8);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  margin-top: 4px;
}

.gdpr-checkbox.checked {
  background: var(--white);
  border-color: var(--white);
}

.gdpr-checkbox.checked::after {
  content: '\2713';
  color: var(--magenta);
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
}

.gdpr-text {
  /* Same 'TeleNeoOriginal' Thin/ExtraBold-only pitfall as .welcome-subtitle -
     weight 400 on var(--font-body) silently rendered as the Thin(100) face
     and read as too light. 'TeleNeo' has a real Medium face. */
  font-family: 'TeleNeo', sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.45;
  color: rgba(255,255,255,0.9);
}

/* ===== QUESTION SCREENS (survey) ===== */
.question-content {
  justify-content: center;
  gap: 64px;
  max-width: 1500px;
}

.question-title {
  font-family: var(--font-heading);
  font-size: 76px;
  font-weight: 800;
  line-height: 1.15;
}

.options-list {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.option-row {
  display: flex;
  align-items: center;
  gap: 32px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.option-radio {
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 50%;
  border: 4px solid var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.option-radio::after {
  content: '';
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--white);
  opacity: 0;
  transform: scale(0.4);
  transition: all 0.15s ease;
}

.option-row.selected .option-radio::after {
  opacity: 1;
  transform: scale(1);
}

.option-label {
  font-family: var(--font-heading);
  font-size: 48px;
  font-weight: 800;
}

/* ===== THANK YOU SCREEN ===== */
.thankyou-content {
  justify-content: center;
  max-width: 1300px;
}

.thankyou-title {
  font-family: var(--font-heading);
  font-size: 76px;
  font-weight: 800;
  line-height: 1.2;
}

/* Flies in once (fly-in-settle), then - once landed - keeps gently
   hopping in place for as long as this screen is shown, instead of
   sitting still or re-triggering the whole entrance over and over. */
.screen.active .thankyou-title {
  animation: fly-in-settle 0.8s cubic-bezier(0.16, 1, 0.3, 1) both,
             text-hop 2.2s ease-in-out 0.8s infinite;
}

@keyframes text-hop {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-22px); }
  65% { transform: translateY(-9px); }
}

/* ===== RULES SCREEN (pravila nagradnog natjecaja) ===== */
.rules-content {
  padding: 140px 150px 100px 210px;
  gap: 36px;
}

.rules-title {
  font-family: var(--font-heading);
  font-size: 52px;
  font-weight: 800;
  line-height: 1.2;
}

.rules-text {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  font-family: var(--font-body);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.55;
  padding-right: 40px;
}

.rules-text p {
  margin-bottom: 22px;
}

.rules-text strong {
  font-weight: 800;
}

/* ===== CUSTOM KEYBOARD ===== */
.keyboard {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #2C2C2E;
  padding: 14px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1000;
  transition: transform 0.3s ease;
  border-radius: 24px 24px 0 0;
  transform: translateY(100%);
}

.keyboard.visible {
  transform: translateY(0);
}

.keyboard-row {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.kb-key {
  height: 72px;
  border-radius: 12px;
  border: none;
  font-family: var(--font-body);
  font-size: 30px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.08s ease, transform 0.08s ease;
  color: var(--white);
  background: #636366;
  flex: 1;
  max-width: 84px;
  position: relative;
}

/* .kb-pressed is toggled explicitly in app.js (not just relying on native
   :active) so the "this key registered" feedback is guaranteed even inside
   the custom touchstart/touchend-driven keyboard. Pops UP/grows rather than
   shrinking, so it reads clearly as "pressed" rather than "disabled". */
.kb-key:active,
.kb-key.kb-pressed {
  background: var(--magenta);
  transform: scale(1.15);
  z-index: 5;
}

.kb-key-space {
  flex: 4;
  max-width: 460px;
  font-size: 26px;
}

.kb-key-action {
  background: #48484A;
  flex: 1.5;
  max-width: 130px;
  font-size: 24px;
}

.kb-key-done {
  background: var(--magenta);
  flex: 1.5;
  max-width: 130px;
  font-size: 24px;
  font-weight: 800;
}

.kb-key-done:active {
  background: var(--magenta-dark);
}

.kb-key-backspace {
  background: #48484A;
  flex: 1.5;
  max-width: 130px;
  font-size: 28px;
}

.kb-key-shift {
  background: #48484A;
  flex: 1.5;
  max-width: 110px;
  font-size: 26px;
}

.kb-key-shift.active {
  background: var(--white);
  color: var(--black);
}

/* ===== DIACRITIC POPUP ===== */
.kb-diacritic-popup {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  background: #1C1C1E;
  padding: 8px;
  border-radius: 16px;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.5);
  z-index: 1100;
  margin-bottom: 8px;
}

.kb-diacritic-option {
  width: 76px;
  height: 76px;
  border-radius: 12px;
  border: none;
  background: #636366;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 30px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.kb-diacritic-option:active {
  background: var(--magenta);
}

/* ===== EXIT / ADMIN OVERLAY ===== */
.exit-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: #000;
  z-index: 9999;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 0 60px;
}

.exit-overlay-title {
  position: absolute;
  top: 90px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 46px;
  font-weight: 800;
}

.exit-btn {
  padding: 32px 52px;
  width: 420px;
  background: #333;
  color: #fff;
  border: none;
  border-radius: 100px;
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 800;
  cursor: pointer;
}

.exit-btn-primary {
  background: var(--magenta);
}

.exit-btn-light {
  background: #fff;
  color: #000;
}

/* ============================================================
   PORTRAIT ORIENTATION (tablet rotated) - canvas is 1200x1920.
   Same screens, same brand language, reflowed for a narrower,
   taller surface. Toggled automatically by fitCanvas() in
   index.html whenever the device orientation changes.
   ============================================================ */

.orientation-portrait .screen-content {
  padding: 110px 80px;
}

.orientation-portrait .t-logo-fixed {
  top: 48px;
  right: 48px;
  width: 72px;
}

/* Welcome */
.orientation-portrait .welcome-content {
  flex-direction: column;
  justify-content: center;
  gap: 90px;
  max-width: none;
}

.orientation-portrait .welcome-text {
  gap: 48px;
  max-width: none;
}

.orientation-portrait .welcome-intro-text {
  gap: 48px;
}

.orientation-portrait .welcome-heading {
  font-size: 80px;
}

.orientation-portrait .welcome-tv-carousel {
  width: 640px;
  height: 405px;
  max-width: 82vw;
}

.orientation-portrait .welcome-subtitle {
  font-size: 40px;
  max-width: 900px;
}

/* Buttons */
.orientation-portrait .btn-primary,
.orientation-portrait .btn-outline {
  padding: 26px 40px;
  font-size: 24px;
}

.orientation-portrait .btn-bottom-right {
  right: 80px;
  bottom: 90px;
}

/* Registration */
.orientation-portrait .registration-content {
  gap: 56px;
  max-width: none;
}

.orientation-portrait .reg-label {
  font-size: 40px;
}

.orientation-portrait .reg-input {
  font-size: 32px;
  max-width: none;
}

.orientation-portrait .gdpr-row {
  flex-direction: column;
  align-items: stretch;
  gap: 40px;
}

.orientation-portrait .gdpr-consent {
  max-width: none;
}

.orientation-portrait .gdpr-text {
  font-size: 22px;
}

.orientation-portrait #btn-reg-next {
  align-self: flex-start;
}

/* Survey questions */
.orientation-portrait .question-content {
  gap: 56px;
  max-width: none;
}

.orientation-portrait .question-title {
  font-size: 52px;
}

.orientation-portrait .options-list {
  gap: 40px;
}

.orientation-portrait .option-radio {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-width: 3px;
}

.orientation-portrait .option-radio::after {
  width: 22px;
  height: 22px;
}

.orientation-portrait .option-label {
  font-size: 36px;
}

/* Rules */
.orientation-portrait .rules-content {
  padding: 110px 80px 60px;
  gap: 24px;
}

.orientation-portrait .rules-title {
  font-size: 40px;
}

.orientation-portrait .rules-text {
  font-size: 22px;
  padding-right: 20px;
}

/* Thank you */
.orientation-portrait .thankyou-content {
  max-width: none;
}

.orientation-portrait .thankyou-title {
  font-size: 56px;
}

/* Keyboard - slightly shorter keys so it takes up less of the tall canvas */
.orientation-portrait .kb-key {
  height: 62px;
}

/* Admin/exit overlay - stack buttons instead of a row (too narrow otherwise) */
.orientation-portrait .exit-overlay {
  flex-direction: column;
  gap: 24px;
}

.orientation-portrait .exit-overlay-title {
  top: 140px;
}

.orientation-portrait .exit-btn {
  width: 700px;
}