/* pixelwar.fr before the live opens: the cover, alive, in a phone's column.
   Colours and letters are the game's own (web/screen.css) and its cover's (brand/). */
:root {
  --u: min(1vw, 4.6px);              /* a hundredth of the column: 3.75 px on a 375 px phone */
  --ink: #f4f6ff;
  --soft: rgba(214, 224, 255, 0.78);
  --panel: rgba(13, 19, 46, 0.82);
  --line: rgba(160, 185, 255, 0.24);
  --gold: #ffd54a;
  --font: "Avenir Next", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: #0a0c27; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; color: var(--ink); font-family: var(--font);
  -webkit-tap-highlight-color: transparent;
  /* The cover's night: the dark in the middle, a violet glow at the top and at the bottom. */
  background:
    radial-gradient(95% 48% at 50% 46%, rgba(8, 12, 40, 0.97) 0%, rgba(8, 12, 40, 0.72) 55%, transparent 100%),
    linear-gradient(180deg, #25115a 0%, #110c36 24%, #0a0c27 58%, #210f4e 100%) #0a0c27;
  background-attachment: fixed;
}
/* Stars: five sheets of dots whose sizes never line up, so that no pattern shows. */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; opacity: 0.85;
  background-image:
    radial-gradient(circle at 20px 30px, rgba(255, 255, 255, 0.78) 0 1px, transparent 1.7px),
    radial-gradient(circle at 150px 90px, rgba(190, 210, 255, 0.62) 0 1px, transparent 1.7px),
    radial-gradient(circle at 90px 170px, rgba(255, 255, 255, 0.46) 0 0.8px, transparent 1.5px),
    radial-gradient(circle at 210px 220px, rgba(255, 200, 255, 0.52) 0 1px, transparent 1.7px),
    radial-gradient(circle at 60px 250px, rgba(255, 255, 255, 0.36) 0 0.8px, transparent 1.5px);
  background-size: 263px 293px, 311px 271px, 233px 331px, 373px 313px, 293px 353px;
}

#stage {
  position: relative; width: min(100vw, 460px); min-height: 100vh; min-height: 100dvh; margin: 0 auto;
  display: flex; flex-direction: column;
  padding: calc(env(safe-area-inset-top, 0px) + var(--u) * 4.5) calc(var(--u) * 5) calc(env(safe-area-inset-bottom, 0px) + var(--u) * 4.5);
}

/* The name, and the word that was "EN LIVE" on the cover. */
#top { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 3); }
#brand { display: flex; flex-direction: column; line-height: 1; }
#brand b {
  font-size: calc(var(--u) * 6.6); font-weight: 900; letter-spacing: 0.02em; white-space: nowrap;
  background: linear-gradient(92deg, #ffffff, #9fd0ff 55%, #ff9ad5); -webkit-background-clip: text; background-clip: text; color: transparent;
}
#brand span { margin-top: calc(var(--u) * 1.3); font-size: calc(var(--u) * 2.45); font-weight: 700; letter-spacing: 0.3em; color: var(--soft); white-space: nowrap; }
#soon {
  display: inline-flex; align-items: center; gap: calc(var(--u) * 1.7); padding: calc(var(--u) * 2.1) calc(var(--u) * 3.6);
  border-radius: 99px; font-size: calc(var(--u) * 3.5); font-weight: 900; letter-spacing: 0.03em; white-space: nowrap; color: #fff;
  background: linear-gradient(180deg, #ff5a78, #e32250);
  box-shadow: 0 0 calc(var(--u) * 5) rgba(255, 61, 94, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.26);
}
#soon i { width: calc(var(--u) * 2.1); height: calc(var(--u) * 2.1); border-radius: 50%; background: #fff; animation: blink 1.4s ease-in-out infinite; }
@keyframes blink { 50% { opacity: 0.25; } }

#title { margin: calc(var(--u) * 5.5) 0 0; text-align: center; line-height: 1; font-weight: 900; text-transform: uppercase; }
#title span {
  display: block; white-space: nowrap; font-size: calc(var(--u) * 9.6); color: #fff;
  -webkit-text-stroke: calc(var(--u) * 1.1) #0b1336; paint-order: stroke fill;
  filter: drop-shadow(0 0 calc(var(--u) * 3) rgba(110, 160, 255, 0.4));
}
#title .blue { margin-top: calc(var(--u) * 0.6); font-size: calc(var(--u) * 11.6); color: #a9d3ff; }

/* The map takes what the screen has left, and goes nearly from edge to edge. */
#mapbox { position: relative; flex: 1 1 auto; min-height: calc(var(--u) * 64); margin: calc(var(--u) * 1.5) calc(var(--u) * -3.5) 0; }
#map { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* The door: the offer, the field, the gold button of the cover. */
#door {
  position: relative; margin-top: calc(var(--u) * 1.5); padding: calc(var(--u) * 4.4) calc(var(--u) * 4.4) calc(var(--u) * 3.4);
  border-radius: calc(var(--u) * 6.5); background: var(--panel); border: 1.5px solid var(--line);
  box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 9) rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
#door p { margin: 0; }
#offer { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 2.2); }
/* The jeton's picture has a dark square around the coin: only the coin is shown. */
#offer img { width: calc(var(--u) * 13); height: calc(var(--u) * 13); margin: calc(var(--u) * -1.9); clip-path: circle(36.5%); }
#offer b {
  font-size: calc(var(--u) * 6.7); font-weight: 900; letter-spacing: 0.01em; white-space: nowrap;
  background: linear-gradient(180deg, #fff3b0, #ffd54a 55%, #f7b500); -webkit-background-clip: text; background-clip: text; color: transparent;
}
#pitch { margin: calc(var(--u) * 2.2) 0 calc(var(--u) * 3.4) !important; text-align: center; font-size: calc(var(--u) * 3.95); line-height: 1.32; font-weight: 600; color: var(--soft); }

input {
  display: block; width: 100%; height: calc(var(--u) * 13.5); min-height: 48px; padding: 0 calc(var(--u) * 4.5);
  border-radius: calc(var(--u) * 4.2); border: 2px solid rgba(160, 185, 255, 0.4); outline: none;
  background: rgba(6, 9, 28, 0.9); color: #fff; font: 700 max(16px, calc(var(--u) * 4.5)) var(--font);   /* under 16 px an iPhone zooms on the field */
  -webkit-appearance: none; appearance: none;
}
input::placeholder { color: rgba(200, 212, 255, 0.5); font-weight: 600; }
input:focus { border-color: var(--gold); box-shadow: 0 0 0 calc(var(--u) * 1) rgba(255, 213, 74, 0.22); }
input.bad { border-color: #ff6b81; }

button { font-family: var(--font); cursor: pointer; -webkit-appearance: none; appearance: none; }
#go, #light {
  display: block; width: 100%; height: calc(var(--u) * 15.5); min-height: 52px; margin-top: calc(var(--u) * 3);
  border-radius: 99px; border: calc(var(--u) * 0.7) solid #fff7d6; color: #17120a;
  font-size: calc(var(--u) * 4.9); font-weight: 900; letter-spacing: 0.02em; white-space: nowrap;
  background: linear-gradient(180deg, #ffe98a 0%, #ffd54a 52%, #f6bb1f 100%);
  box-shadow: 0 0 calc(var(--u) * 7) rgba(255, 213, 74, 0.5), 0 calc(var(--u) * 1) 0 rgba(120, 80, 0, 0.5);
}
#go { animation: breathe 2.2s ease-in-out infinite; }
#go:active, #light:active { transform: scale(0.98); }
#go[disabled], #light[disabled] { opacity: 0.7; animation: none; }
@keyframes breathe { 50% { transform: scale(1.022); box-shadow: 0 0 calc(var(--u) * 10) rgba(255, 213, 74, 0.7), 0 calc(var(--u) * 1) 0 rgba(120, 80, 0, 0.5); } }

#say, #pick-say { min-height: 1.3em; margin-top: calc(var(--u) * 2.2) !important; text-align: center; font-size: calc(var(--u) * 3.6); line-height: 1.3; font-weight: 700; color: #ffb3bf; }
#say:empty, #pick-say:empty { display: none; }
#small, #foot { margin-top: calc(var(--u) * 2.6) !important; text-align: center; font-size: calc(var(--u) * 3); line-height: 1.35; color: rgba(214, 224, 255, 0.6); }
#small a, #foot a, #other { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
#nojs { margin-top: calc(var(--u) * 2) !important; text-align: center; font-size: calc(var(--u) * 3.4); color: #ffb3bf; }

/* "Tu voulais dire … ?": a slip in the address is caught before it costs them their jetons. */
#fix { margin-top: calc(var(--u) * 2.4) !important; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: calc(var(--u) * 1.8); font-size: calc(var(--u) * 3.6); font-weight: 700; color: var(--ink); }
#fix-words { flex-basis: 100%; text-align: center; overflow-wrap: anywhere; }
#fix button, #corse button, #invite {
  min-height: 44px; padding: 0 calc(var(--u) * 4); border-radius: 99px; border: 1.5px solid rgba(255, 213, 74, 0.75);
  background: rgba(255, 213, 74, 0.1); color: #ffe38a; font-size: calc(var(--u) * 3.6); font-weight: 800;
}
#fix #fix-no { border-color: var(--line); background: none; color: var(--soft); }

/* After the e-mail. */
#done-title { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 2.4); }
#done-title i {
  display: grid; place-items: center; width: calc(var(--u) * 8.4); height: calc(var(--u) * 8.4); border-radius: 50%;
  font-style: normal; font-size: calc(var(--u) * 5.4); font-weight: 900; color: #17120a;
  background: linear-gradient(180deg, #ffe98a, #f6bb1f); box-shadow: 0 0 calc(var(--u) * 5) rgba(255, 213, 74, 0.55);
}
#done-title b {
  font-size: calc(var(--u) * 6.7); font-weight: 900; white-space: nowrap;
  background: linear-gradient(180deg, #fff3b0, #ffd54a 55%, #f7b500); -webkit-background-clip: text; background-clip: text; color: transparent;
}
#done-line { margin-top: calc(var(--u) * 2) !important; text-align: center; font-size: calc(var(--u) * 3.95); line-height: 1.32; font-weight: 600; color: var(--soft); }
#pick { margin-top: calc(var(--u) * 3.4); }
#pick label { display: block; margin-bottom: calc(var(--u) * 1.8); text-align: center; font-size: calc(var(--u) * 4.3); font-weight: 900; color: var(--ink); }
#pick-row { display: flex; gap: calc(var(--u) * 2.4); }
#pick-row input { flex: 1 1 0; min-width: 0; text-align: center; letter-spacing: 0.04em; }
#pick-row #light { flex: 0 0 auto; width: auto; height: calc(var(--u) * 13.5); min-height: 48px; margin-top: 0; padding: 0 calc(var(--u) * 6); font-size: calc(var(--u) * 4.5); }
#corse { display: flex; gap: calc(var(--u) * 2); margin-top: calc(var(--u) * 2.4); }
#corse button { flex: 1 1 0; padding: 0 calc(var(--u) * 2); }
#mine { margin-top: calc(var(--u) * 3) !important; text-align: center; font-size: calc(var(--u) * 4.1); line-height: 1.32; font-weight: 800; color: #ffe38a; }
#invite { display: block; width: 100%; height: calc(var(--u) * 13.5); min-height: 48px; margin-top: calc(var(--u) * 3); font-size: calc(var(--u) * 4.3); letter-spacing: 0.02em; }
#other { padding: 0; border: 0; background: none; font: inherit; }
#again { padding: 0 0 0 calc(var(--u) * 1); border: 0; background: none; font: 600 calc(var(--u) * 3.2) var(--font); color: rgba(214, 224, 255, 0.6); text-decoration: underline; text-underline-offset: 2px; }

/* The same column on a computer, with room around it. */
@media (min-width: 620px) {
  #stage { padding-top: 28px; padding-bottom: 28px; }
}
/* A short screen (TikTok's own browser on a small phone): the map gives way first. */
@media (max-height: 640px) {
  #title { margin-top: calc(var(--u) * 3.5); }
  #mapbox { min-height: calc(var(--u) * 52); }
}
@media (prefers-reduced-motion: reduce) {
  #go, #soon i { animation: none; }
}

/* The second page: who keeps the e-mail, and the way out of the list. Its stars are dimmed: they sat on the words. */
body.paper::before { opacity: 0.3; }
#paper { max-width: 640px; margin: 0 auto; padding: calc(env(safe-area-inset-top, 0px) + 24px) 22px calc(env(safe-area-inset-bottom, 0px) + 40px); position: relative; }
#paper .back { display: inline-block; margin-bottom: 18px; color: var(--soft); font-weight: 700; font-size: 15px; text-decoration: none; }
#paper h1 { margin: 0 0 6px; font-size: 26px; font-weight: 900; line-height: 1.15; }
#paper h2 { margin: 26px 0 8px; font-size: 17px; font-weight: 900; color: #ffe38a; }
#paper p, #paper li { font-size: 15.5px; line-height: 1.5; color: var(--soft); }
#paper p { margin: 0 0 10px; }
#paper ul { margin: 0 0 10px; padding-left: 20px; }
#paper a { color: #cfe0ff; }
#paper form { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 6px; }
#paper form input { flex: 1 1 220px; height: 48px; padding: 0 16px; border-radius: 14px; font-size: 16px; }
#paper form button { flex: 0 0 auto; height: 48px; padding: 0 20px; border-radius: 99px; border: 1.5px solid var(--line); background: rgba(160, 185, 255, 0.1); color: var(--ink); font-size: 15px; font-weight: 800; }
#paper #left-say { min-height: 1.4em; font-weight: 700; color: #ffe38a; }