/* ============================================================
   Flying Luggage — shared styles
   Tokens and components follow the Figma file
   "Tour-Conference-game" (page: mobile).
   ============================================================ */

@font-face { font-family: "November GeL"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/NovemberGeL-Regular.otf") format("opentype"); }
@font-face { font-family: "November GeL"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/NovemberGeL-Bold.otf") format("opentype"); }
@font-face { font-family: "November GeL"; font-weight: 900; font-style: normal; font-display: swap; src: url("../fonts/NovemberGeL-Black.otf") format("opentype"); }

:root {
  --sky-1: #1B4B80;
  --sky-2: #09689F;
  --sky-3: #4B96C5;
  --sky-4: #A7C8DE;
  --sky: linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 33%, var(--sky-3) 74.5%, var(--sky-4) 100%);
  /* glass fill: white 50%->100% inside a 16% layer, top-left -> bottom-right (Figma) */
  --glass: linear-gradient(to bottom right, rgba(255,255,255,.08), rgba(255,255,255,.16));
  /* glass rim: 1px stroke, white at the top-left and bottom-right corners, transparent between (Figma) */
  --glass-rim: linear-gradient(to bottom right, #fff, rgba(255,255,255,0) 50%, #fff);
  /* button rim: dim at the top-right / bottom-left ends, bright across the middle */
  --btn-rim: linear-gradient(to bottom left, rgba(255,255,255,.1), #fff 50%, rgba(255,255,255,.1));
  --btn: #163165;
  --btn-pressed: #0E2245;
  --text: #ffffff;
  --text-soft: #C2E0F3;
  --link: #C3E8FF;
  --gold: #FFD350;
  --danger: #CC204D;
  --danger-text: #FF7577;
  --dim: rgba(22, 81, 135, .9);
  --radius: 22px;
  --radius-sm: 12px;
  --font: "November GeL", "Noto Sans Georgian", "BPG Arial", "Sylfaen", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  font-size: 16px;
  background: var(--sky-1);
  background-image: var(--sky);
  background-attachment: fixed;
  color: var(--text);
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* Georgian "Mtavruli" capitals via the November GeL "case" OpenType feature (as in Figma). Do NOT use text-transform: uppercase. */
.caps { font-feature-settings: "case" 1; }

/* ---------- page skeleton (phone, 390 wide) ---------- */
.page {
  position: relative;
  max-width: 440px;
  margin: 0 auto;
  padding: 52px 16px 16px;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.page > * { position: relative; z-index: 1; }

.logo { display: block; width: 185px; height: 27px; margin: 0 auto; z-index: 3; }
.logo img { display: block; width: 100%; height: 100%; }

/* hero: suitcase floating on a cloud (the cloud is IN FRONT of the suitcase and drifts slowly).
   The hero is a fixed-height box that scales with the viewport height (--hero-h); the suitcase and the
   cloud are sized relative to that height, so they never spill over the logo above or the card below. */
.hero { position: relative; flex: 0 0 auto; --hero-h: clamp(150px, 27dvh, 250px); height: var(--hero-h); margin: 14px 0 10px; pointer-events: none; }
.hero .suitcase { position: absolute; z-index: 1; left: 50%; top: 6%; height: 66%; width: auto; transform: translateX(-50%); animation: heroFloat 4.5s ease-in-out infinite; view-transition-name: hero-suitcase; }
.hero .cloud { position: absolute; z-index: 2; left: 50%; top: 40%; width: min(calc(var(--hero-h) * 1.5), 100%); transform: translateX(-50%); animation: cloudDrift 7s ease-in-out infinite; view-transition-name: hero-cloud; }
.hero.small { --hero-h: clamp(110px, 20dvh, 200px); }
@media (max-height: 560px) { .hero { display: none; } }
/* short phones (iPhone SE/13 mini, or Safari with its toolbars): compact the layout so the CTA stays on screen */
@media (max-height: 700px) {
  .page { padding-top: 28px; }
  .hero { --hero-h: clamp(120px, 20dvh, 250px); margin-bottom: 4px; }
  .rows li { padding: 9px 0; }
  .card h2, .card .h2 { margin-bottom: 16px; }
}
@keyframes cloudDrift { 0%, 100% { translate: 0 0; } 35% { translate: 10px 3px; } 70% { translate: -6px -2px; } }
@keyframes heroFloat { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -7px; rotate: -1.5deg; } }

/* ---------- transitions ---------- */
/* Page -> page: cross-document View Transitions (Chrome 126+, Safari 18.2+). Elements that share a
   view-transition-name (hero cloud/suitcase, card, cta) morph between pages like Figma "smart animate". */
@view-transition { navigation: auto; }
::view-transition-group(*) { animation-duration: .5s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; }
.vt-card { view-transition-name: card; }
.vt-cta { view-transition-name: cta; }
/* Fallback for browsers without View Transitions: fade the page out before leaving and in on arrival */
body.leaving { opacity: 0; transition: opacity .24s ease; pointer-events: none; }
@supports not (view-transition-name: x) { body { animation: pageIn .35s ease both; } }
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }
/* in-page section switch fallback */
section.enter { animation: sectionIn .38s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes sectionIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .hero .cloud, .hero .suitcase, section.enter, body { animation: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation-duration: .01s !important; }
}

/* decorative clouds pinned to the page corners (design: "clouds 1/2") */
.deco { position: absolute; z-index: 0; pointer-events: none; opacity: .95; }

/* ---------- glass surfaces (card, HUD pill) ---------- */
/* The 1px gradient rim is drawn by a masked ::before ring, exactly like the Figma stroke. */
.glass, .card {
  position: relative;
  background-image: var(--glass);
  border: 1px solid transparent;
  border-radius: var(--radius);
}
.glass::before, .card::before, .btn::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: var(--glass-rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.btn::before { background: var(--btn-rim); }
.card {
  padding: 18px 24px;
  color: var(--text);
}
.card h2, .card .h2 { font-size: 24px; font-weight: 700; margin: 6px 0 24px; font-feature-settings: "case" 1; line-height: 1.3; }
.card.center { text-align: center; }
.card.center h2 { text-align: center; }

/* rows with a hairline between them (rules list, winners list) */
.rows { list-style: none; margin: 0; padding: 0; }
.rows li { display: flex; gap: 17px; align-items: center; padding: 12px 0; border-top: 1px solid rgba(255,255,255,.35); font-size: 18px; line-height: 1.3; }
.rows li:last-child { border-bottom: 1px solid rgba(255,255,255,.35); }
.rows .ico { flex: none; width: 44px; height: 44px; border-radius: 11px; background: rgba(255,255,255,.36); display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 22px; }
.rows .ico svg { width: 26px; height: 26px; }
.rows .ico img { max-width: 28px; max-height: 28px; }

/* ---------- buttons ---------- */
.btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 64px;
  font: inherit; font-size: 16px; font-weight: 700; font-feature-settings: "case" 1;
  padding: 10px 20px; margin: 0;
  position: relative;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--btn);
  color: #fff;
  cursor: pointer; text-align: center; text-decoration: none;
  transition: background .12s ease, transform .08s ease;
}
.btn:active { background: var(--btn-pressed); transform: scale(.985); }
.btn:disabled { background: var(--btn-pressed); opacity: .8; cursor: default; }
.btn.ghost { background: transparent; }
.link { display: inline-block; color: var(--link); font-size: 18px; text-decoration: none; }

/* ---------- form ---------- */
.field { margin-bottom: 11px; }
.input { position: relative; height: 58px; border: 1px solid #E5E5E5; border-radius: var(--radius-sm); background: rgba(255,255,255,.2); transition: background .15s ease, border-color .15s ease; }
.input input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  padding: 27px 20px 5px; margin: 0;
  font-family: var(--font); font-size: 18px; line-height: 22px; font-weight: 400; color: #fff;
  background: transparent; border: 0; outline: none; border-radius: inherit;
  -webkit-appearance: none; appearance: none;
}
.input label {
  position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
  font-size: 18px; line-height: 22px; color: #fff; pointer-events: none; white-space: nowrap;
  transition: top .15s ease, transform .15s ease, font-size .15s ease, color .15s ease;
}
.input input:focus + label,
.input input:not(:placeholder-shown) + label { top: 10px; transform: none; font-size: 13px; line-height: 16px; color: rgba(255,255,255,.6); }
.input input:-webkit-autofill { -webkit-text-fill-color: #fff; -webkit-box-shadow: 0 0 0 100px rgba(49,49,49,.2) inset; transition: background-color 9999s; }
.input input:not(:placeholder-shown) { background: rgba(49,49,49,.2); }
.input input:focus { background: rgba(49,49,49,.2); }
.field.error .input { border-color: var(--danger); }
.field.error .input input, .field.error .input input:focus { background: rgba(204,32,77,.1); }
.field .hint { display: none; font-size: 14px; color: var(--danger-text); text-align: left; margin: 6px 0 0 20px; }
.field.error .hint { display: block; }
.field .hint:empty { display: none; }

.check { display: flex; gap: 12px; align-items: flex-start; font-size: 12px; color: #fff; line-height: 1.4; margin: 18px 0 0; cursor: pointer; }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check .box { flex: none; width: 32px; height: 32px; border-radius: 12px; border: 1px solid #E5E5E5; background: rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; }
.check .box svg { width: 20px; height: 20px; opacity: 0; transition: opacity .1s; }
.check input:checked + .box svg { opacity: 1; }
.check input:checked + .box { background: rgba(255,255,255,.3); }
.check.error .box { border-color: var(--danger); background: rgba(204,32,77,.15); }
.consent-hint { font-size: 14px; color: var(--danger-text); text-align: left; margin: 6px 0 0 44px; min-height: 0; }
.consent-hint:empty { display: none; }

/* ---------- typography helpers ---------- */
.score { font-weight: 900; color: var(--gold); font-feature-settings: "case" 1; display: inline-flex; align-items: center; gap: 6px; }
.score img { width: .95em; height: .95em; }
.muted { color: var(--text-soft); }
.center { text-align: center; }
.spacer { flex: 1; }
.hidden { display: none !important; }

/* ---------- misc ---------- */
.devbadge {
  position: fixed; left: 8px; bottom: 8px; z-index: 999;
  font-size: 11px; padding: 4px 8px; border-radius: 6px;
  background: rgba(255, 180, 0, .9); color: #000; font-weight: 700; font-family: system-ui, sans-serif;
}