/* "1 von 3" (cards.js / cards-view.js) and its notice in the main menu. Tokens and parts from menu.css (docs/STYLEGUIDE.md):
   the three ideas are moons on one thin orbit, each with a dark glass column and a single lit top edge – no tiles, no soft
   shadows, no violet-blue or multi-colour gradients, no gradient text. The only gradients are fades of ONE colour, the sunlight
   (the lit edge, the focus glow) and an opacity mask that lets long text fade out. Focus = sunlight (moon ring, halo, breathing,
   a spark circling it); the chosen idea keeps it. */

/* ---------- notice in the main menu: "Deine 3 Spielideen sind da" ---------- */
#ideas {
  position: absolute;
  left: 0;
  top: calc(var(--u) * 84);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 16);
  max-width: min(60vw, calc(var(--u) * 1100));
  height: calc(var(--u) * 56);
  padding: 0 calc(var(--u) * 30) 0 calc(var(--u) * 18);
  border-radius: 999px;
  background: rgba(16, 17, 22, .74);
  cursor: pointer;
  transform-origin: left center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(calc(var(--u) * -10));
  z-index: 3;
  transition: opacity 320ms var(--ease), transform 460ms var(--spring), background var(--t-focus) var(--ease), color var(--t-focus), visibility 0s linear 420ms;
}
/* no edge stroke: new = the glyph calls in nebula light; focus = the whole pill fills with light (as every focused row) */
#ideas.on { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s, 0s, 0s, 0s, 0s; }
#ideas .ideas-glyph svg { width: calc(var(--u) * 34); height: calc(var(--u) * 34); color: var(--nebula); }
#ideas.on .ideas-glyph { animation: ideas-call 2.4s ease-in-out infinite; }
@keyframes ideas-call { 50% { filter: drop-shadow(0 0 calc(var(--u) * 8) rgba(111, 214, 255, .8)); } }
.ideas-text { display: flex; align-items: baseline; gap: calc(var(--u) * 14); min-width: 0; }
#ideas-title { flex: none; font: 600 calc(var(--u) * 24)/1.2 var(--font-display); color: var(--milk); letter-spacing: -.01em; }
#ideas-for { font-size: calc(var(--u) * 21); color: var(--milk-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ideas.is-focus { transform: scale(1.04); background: var(--milk); }
#ideas.is-focus #ideas-title { color: var(--ink); }
#ideas.is-focus #ideas-for { color: rgba(7, 8, 12, .62); }
#ideas.is-focus .ideas-glyph svg { color: var(--ink); }
#ideas.is-focus .ideas-glyph { animation: none; }

/* ---------- the screen ---------- */
body[data-screen="cards"] #cards {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 460ms var(--ease) 140ms, visibility 0s;
}
#cards { display: flex; flex-direction: column; }
.cards-head { max-width: 84vw; }
#cards .eyebrow { margin-bottom: calc(var(--u) * 14); }
#cards-title { font-size: calc(var(--u) * 46); margin-bottom: calc(var(--u) * 8); transition: color 400ms var(--ease); }
#cards[data-phase="done"] #cards-title { color: var(--aurora); }
#cards-wish { font-size: calc(var(--u) * 24); color: var(--milk-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

#cards-list {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: calc(var(--u) * 40);
  margin-top: calc(var(--u) * 64);
  flex: 1;
  min-height: 0;
}
/* the orbit through the three moons (their centres sit on the columns' top edges): a thin line that fades out at both ends
   (opacity mask, not a colour gradient); it follows the cards when a long title takes two lines */
#cards-list::before {
  content: '';
  position: absolute;
  left: -5vw; right: -5vw;
  top: -1px;
  height: 1.5px;
  background: rgba(243, 234, 216, .26);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  pointer-events: none;
}

/* one idea: a dark glass column under its moon */
.idea {
  --moon: calc(var(--u) * 92);
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  padding: calc(var(--u) * 70) calc(var(--u) * 32) calc(var(--u) * 20);
  background: rgba(14, 15, 20, .78);
  border-top: 2px solid rgba(243, 234, 216, .3);
  border-radius: 0 0 6px 6px;
  color: var(--milk-dim);
  cursor: pointer;
  transform-origin: center top;
  transition: transform var(--t-focus) var(--ease), opacity 320ms var(--ease), border-color var(--t-focus), background var(--t-focus), color var(--t-focus);
}
.idea-shot { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: calc(var(--u) * 18);
  box-shadow: 0 0 0 1px rgba(243, 234, 216, .22); background: var(--space-deep); } /* concept picture of the idea (12.10.) */
.idea-moon {
  position: absolute;
  left: calc(var(--u) * 28);
  top: calc(var(--moon) / -2);
  display: grid;
  place-items: center;
  width: var(--moon);
  height: var(--moon);
  border-radius: 50%;
  border: 2px solid rgba(243, 234, 216, .4);
  background: var(--space);
  color: var(--milk-dim);
  transition: transform var(--t-focus) var(--ease), border-color var(--t-focus), box-shadow var(--t-focus), color var(--t-focus);
}
.idea-moon svg { width: calc(var(--u) * 50); height: calc(var(--u) * 50); }
/* a tiny spark circles the focused moon (styleguide §5) */
.idea-moon::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: calc(var(--u) * 9); height: calc(var(--u) * 9);
  margin: calc(var(--u) * -4.5);
  border-radius: 50%;
  background: var(--sun);
  box-shadow: 0 0 calc(var(--u) * 10) calc(var(--u) * 2) var(--sun-glow);
  opacity: 0;
  transform: rotate(0deg) translateX(calc(var(--moon) * .66));
  transition: opacity var(--t-focus);
}
/* the confirm light wave (styleguide §6): a ring leaves the moon once when the idea is taken */
.idea-moon::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid var(--sun);
  opacity: 0;
  pointer-events: none;
}
.idea-kicker {
  position: absolute;
  left: calc(var(--u) * 28 + var(--moon) + var(--u) * 18);
  right: calc(var(--u) * 24);
  top: calc(var(--u) * 12);
  display: grid;
  gap: calc(var(--u) * 4);
}
.idea-n { font: 500 calc(var(--u) * 18)/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--milk-dim); }
.idea-fun { font: 500 calc(var(--u) * 24)/1.15 var(--font-text); color: var(--milk); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.idea-title { margin: 0 0 calc(var(--u) * 10); font: 600 calc(var(--u) * 32)/1.15 var(--font-display); letter-spacing: -.01em; color: var(--milk); }
.idea-pitch { font-size: calc(var(--u) * 25); line-height: 1.32; color: var(--milk); margin-bottom: calc(var(--u) * 16); }
.idea-facts { margin: 0; display: grid; gap: calc(var(--u) * 4); }
.idea-facts dt {
  margin-top: calc(var(--u) * 8);
  font: 500 calc(var(--u) * 17)/1.2 var(--font-display);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--nebula);
}
.idea-facts dd { margin: 0; font-size: calc(var(--u) * 23); line-height: 1.32; }
/* Every text has a line limit, so no card can ever run into the buttons (16:9, 1080p raster: the tallest focused card ends
   above the status line). The focused or chosen column shows 3 lines per part, the others 2. tools/order-cards.js
   SCREEN_BUDGET names the characters that fit uncut and warns the team about longer texts. */
.idea-title, .idea-pitch, .idea-facts dd { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.idea-title { -webkit-line-clamp: 2; }
.idea-pitch { -webkit-line-clamp: 3; }
.idea-facts dd { -webkit-line-clamp: 2; }
.idea.is-focus .idea-facts dd, .idea.is-chosen .idea-facts dd { -webkit-line-clamp: 3; }
/* After the pick the decision is made: the chosen column keeps its moon, title and pitch, the details fold away. */
#cards[data-phase="done"] .idea-facts { display: none; }
.idea-chosen {
  position: absolute;
  right: calc(var(--u) * 24);
  top: calc(var(--u) * -42);
  font: 500 calc(var(--u) * 20)/1 var(--font-display);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sun);
  opacity: 0;
  transform: translateY(calc(var(--u) * 8));
  transition: opacity 260ms var(--ease), transform 260ms var(--ease);
}

/* focus: sunlight on the edge and the moon, the column rises a little */
.idea.is-focus, .idea.is-chosen {
  color: var(--milk);
  border-top-color: var(--sun);
  background: linear-gradient(180deg, rgba(255, 199, 107, .13), rgba(255, 199, 107, 0) 34%), rgba(14, 15, 20, .84);
  transform: translateY(calc(var(--u) * -10)) scale(1.02);
}
.idea.is-focus .idea-moon, .idea.is-chosen .idea-moon {
  transform: scale(1.1);
  color: var(--sun);
  border-color: var(--sun);
  box-shadow: 0 0 0 calc(var(--u) * 8) rgba(255, 199, 107, .14), 0 0 calc(var(--u) * 40) calc(var(--u) * 6) var(--sun-glow);
  animation: breathe 2.4s ease-in-out infinite;
}
.idea.is-focus .idea-fun, .idea.is-chosen .idea-fun { color: var(--sun); }
.idea.is-focus .idea-moon::after, .idea.is-chosen .idea-moon::after { opacity: 1; animation: idea-spark 3.2s linear infinite; }
@keyframes idea-spark { to { transform: rotate(360deg) translateX(calc(var(--moon) * .66)); } }
.idea.is-chosen .idea-moon::before { animation: idea-wave 420ms var(--ease) both; }
@keyframes idea-wave { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(2.1); } }
.idea.is-chosen .idea-chosen { opacity: 1; transform: none; }
/* the other two step back once one is taken; after the pick they almost leave */
.idea.is-other { opacity: .5; transform: scale(.98); }
#cards[data-phase="done"] .idea.is-other, #cards[data-phase="sending"] .idea.is-other { opacity: .22; }
#cards[data-phase="done"] .idea.is-chosen { border-top-color: var(--aurora); }
#cards[data-phase="done"] .idea.is-chosen .idea-moon { color: var(--aurora); border-color: var(--aurora); box-shadow: 0 0 0 calc(var(--u) * 8) rgba(124, 240, 178, .14), 0 0 calc(var(--u) * 40) calc(var(--u) * 6) rgba(124, 240, 178, .4); }
#cards[data-phase="done"] .idea.is-chosen .idea-moon::after { background: var(--aurora); box-shadow: 0 0 calc(var(--u) * 10) calc(var(--u) * 2) rgba(124, 240, 178, .5); }
#cards[data-phase="done"] .idea.is-chosen .idea-chosen, #cards[data-phase="done"] .idea.is-chosen .idea-fun { color: var(--aurora); }
#cards:not([data-phase="choose"]) .idea { cursor: default; }

/* status line and the light points under the cards */
#cards-now {
  min-height: calc(var(--u) * 38);
  margin: calc(var(--u) * 18) 0 0;
  font: 500 calc(var(--u) * 28)/1.3 var(--font-text);
  color: var(--milk);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#cards-now.is-done { color: var(--milk); }
#cards-now.is-failed { color: var(--milk); padding-left: calc(var(--u) * 16); }
#cards-actions { margin-top: calc(var(--u) * 14); min-height: calc(var(--u) * 40); }
#cards[data-phase="sending"] #cards-now::after {
  content: '';
  display: inline-block;
  width: calc(var(--u) * 10); height: calc(var(--u) * 10);
  margin-left: calc(var(--u) * 14);
  border-radius: 50%;
  background: var(--sun);
  box-shadow: 0 0 calc(var(--u) * 12) var(--sun-glow);
  animation: change-breathe 1.6s var(--ease) infinite;
}

/* reduced motion: no rising, no spark, no wave – only light and fades */
body.reduced #ideas, body.reduced #ideas.is-focus { transform: none; }
body.reduced #ideas.on .ideas-glyph { animation: none; }
body.reduced .idea, body.reduced .idea-moon { transition-property: opacity, border-color, background, color, box-shadow; }
body.reduced .idea.is-focus, body.reduced .idea.is-chosen, body.reduced .idea.is-other { transform: none; }
body.reduced .idea.is-focus .idea-moon, body.reduced .idea.is-chosen .idea-moon { transform: none; animation: none; }
body.reduced .idea-moon::after, body.reduced .idea-moon::before { animation: none !important; }
body.reduced #cards-now::after { animation: none; }

/* ---------- phones (menu.css phone raster; touch.js PHONE_QUERY / PORTRAIT_QUERY) ----------
   The notice sits under the top bar; "1 von 3" scrolls (menu.css), upright the three ideas hang one below the other. */
@media (pointer: coarse) and (max-width: 600px), (pointer: coarse) and (max-height: 600px) {
  #ideas { top: 50px; }
  #ideas.is-focus { transform: none; }
  #cards-list { flex: none; }
  #cards-now { white-space: normal; }
  #cards-actions .lp { min-height: var(--tap); }
}
@media (pointer: coarse) and (max-width: 600px) and (orientation: portrait) {
  #ideas { top: 56px; left: 0; right: 0; max-width: none; height: 48px; padding: 0 16px 0 12px; z-index: 5; } /* below the top bar */
  #ideas .ideas-glyph svg { width: 22px; height: 22px; }
  #ideas-title { font-size: 15px; }
  #ideas-for { font-size: 13px; }
  #home:has(#ideas.on) #credits { top: 112px; }
  .cards-head { max-width: none; }
  #cards-title { font-size: calc(var(--u) * 40); }
  #cards-list { flex-direction: column; align-items: stretch; gap: calc(var(--u) * 46 + 28px); margin-top: calc(var(--u) * 46 + 24px); }
  #cards-list::before { display: none; } /* the orbit line belongs to the row of three */
  .idea { flex: none; }
  .idea.is-focus, .idea.is-chosen { transform: none; }
}