/*
 * The phone screens after a round – result, then ("Weiter") the call to action – and what they are built from
 * (colours, logo, fox, buttons, confetti). Shared by the controller (/c/) and the mobile edition (/m/), so both look
 * the same. Copied next to each page as screens.css (scripts/build-clients.mjs); pictures are expected in img/.
 * The page shows a screen by setting data-screen on an ancestor (result, cta).
 */
:root {
  --ink: #0b2259;
  --navy: #123a8c;
  --blue: #1f6ae0;
  --blue-light: #4b92f2;
  --muted: #9cc6ff;
  --soft: #cfe4ff;
  --orange: #ff9419;
  --orange-edge: #d9620b;
  --orange-light: #ffb54a;
  --gold: #ffc21a;
  --gold-edge: #d99a00;
  --bonus: #9fd0ff;
  /* the design (art/mobile_elements_examples.svg): the screen is one deep blue pixel panel – light blue in the
     top left corner, navy towards the bottom right – with headings in yellow, buttons orange with navy text */
  --wall: #1d3962;
  --sky: linear-gradient(135deg, #0db7e1 0%, #0890c3 4%, #0575ae 8%, #03609e 12%, #015193 17%, #00488d 22%, #00468b 32%,
    #014589 72%, #064382 84%, #0e3f76 92%, #1a3a65 99%, #1d3962 100%);
  --yellow: #fdb528;
  --cyan: #00bbe1;
  --shadow: rgba(29, 57, 98, .85);
  --orange-face: linear-gradient(135deg, #fdbc3d 0%, #ff9418 41%, #fe9218 73%, #fc8b1b 84%, #f87f1f 93%, #f36c27 100%);
  /* corners cut in two pixel steps (like every box of the design) */
  --step: 4px;
  --px-corners: polygon(0 calc(2 * var(--step)), var(--step) calc(2 * var(--step)), var(--step) var(--step), calc(2 * var(--step)) var(--step),
    calc(2 * var(--step)) 0, calc(100% - 2 * var(--step)) 0, calc(100% - 2 * var(--step)) var(--step), calc(100% - var(--step)) var(--step),
    calc(100% - var(--step)) calc(2 * var(--step)), 100% calc(2 * var(--step)), 100% calc(100% - 2 * var(--step)),
    calc(100% - var(--step)) calc(100% - 2 * var(--step)), calc(100% - var(--step)) calc(100% - var(--step)),
    calc(100% - 2 * var(--step)) calc(100% - var(--step)), calc(100% - 2 * var(--step)) 100%, calc(2 * var(--step)) 100%,
    calc(2 * var(--step)) calc(100% - var(--step)), var(--step) calc(100% - var(--step)), var(--step) calc(100% - 2 * var(--step)),
    0 calc(100% - 2 * var(--step)));
}

* { box-sizing: border-box; }

h1, h2, h3, p { margin: 0; }

/* no double-tap zoom anywhere: touch-action is not inherited into scrolling screens (call to action, waiting
   area) – the jump and START buttons keep touch-action: none (their id rules win) */
.screen, .screen * { touch-action: manipulation; }
.hidden { display: none !important; }

/* --- the logo above every screen ------------------------------------------------------ */
#brand { flex: none; display: flex; justify-content: center; padding: calc(env(safe-area-inset-top) + 40px) 20px 14px; }
#brand img { display: block; height: clamp(24px, 4.5vh, 36px); width: auto; }

.screen {
  display: none; flex: 1; min-height: 0; flex-direction: column; align-items: center;
  padding: 18px 20px calc(env(safe-area-inset-bottom) + 20px);
  text-align: center;
}
.screen > * + * { margin-top: 16px; }
[data-screen='result'] #s-result,
[data-screen='cta'] #s-cta { display: flex; }

.title { font-size: 32px; line-height: 1.1; font-weight: 900; color: #fff; text-shadow: 2px 2px 0 var(--shadow); }
.title.accent { color: var(--yellow); }
.title.gold { color: var(--gold); }

/* --- the fox (frames of 480 × 448 – keep the boxes in that ratio; spritesheet: 5 × 3 frames – row 1: run loop (4), hop; row 2: surprised, impact, joy, cheer,
       front view; row 3: reaction loop (4, game only); column n at n × 25 %, row 2 at 50 %) --- */
.fig {
  flex: none; width: 100px; height: 93px;
  background: url(img/fox-young.png) 0 0 / 500% 300% no-repeat;
}
.fig.hover { animation: fig-frames .5s steps(4) infinite, fig-bob 1.8s ease-in-out infinite; }
.fig.cheer { background-position: 75% 50%; }
.fig.front { background-position: 100% 50%; }
.fig.bob { animation: fig-bob 1.8s ease-in-out infinite; }
@keyframes fig-frames { from { background-position: 0 0; } to { background-position: 100% 0; } }
@keyframes fig-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* --- buttons: orange pixel boxes with navy text (light band top left, darker bottom right) ---------- */
.btn {
  display: block; width: 100%; max-width: 420px; text-align: center; text-decoration: none; cursor: pointer;
  font: inherit; font-size: 20px; font-weight: 900; line-height: 1.2; letter-spacing: .3px;
  border: 0; padding: 16px 18px; clip-path: var(--px-corners);
  color: var(--wall); background: var(--orange-face);
  box-shadow: inset 4px 4px 0 rgba(254, 214, 137, .5), inset -4px -4px 0 rgba(214, 92, 40, .45);
}
.btn:active { transform: translateY(2px); filter: brightness(.95); }
.btn:disabled { opacity: .4; }
.btn.ghost {
  background: rgba(29, 57, 98, .45); color: #fff; font-weight: 900; padding: 13px 16px;
  box-shadow: inset 0 0 0 2px rgba(115, 217, 238, .7);
}
.btn.ghost:active { filter: none; }

/* --- result (then "Weiter" to the call to action) ------------------------------------ */
.total { font-size: 68px; line-height: 1; font-weight: 900; color: var(--yellow); font-variant-numeric: tabular-nums; text-shadow: 4px 4px 0 var(--shadow); }
/* "Altersvorsorgedepot" above the total */
.depot-label { font-size: 24px; font-weight: 900; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin-bottom: 6px; }
/* the parts of the depot, one row each: coin, label, amount */
.split { width: 100%; max-width: 340px; margin-top: 14px; font-weight: 800; }
.split > span { display: flex; align-items: center; padding: 5px 2px; }
.split > span + span { border-top: 1px solid rgba(156, 198, 255, .25); }
.split i { flex: none; width: 22px; height: 22px; margin-right: 10px; background: url(img/coin.svg) center / 22px 19px no-repeat; }
.split i.base { background-image: url(img/coin-bonus.svg); }
.split i.starter { background: url(img/coin-starter.svg) 0 0 / 100% 100%; }
.split i.baby { background: url(img/coin-baby.svg) 0 0 / 100% 100%; }
.split em { flex: 1; font-style: normal; text-align: left; }
.split strong { font-weight: 900; font-variant-numeric: tabular-nums; }
.split .none { color: var(--muted); }
/* "Du bist im Highscore" directly below the title ("Richtig stark!") */
.rank {
  display: inline-block; margin: 2px 0 18px; font-size: 17px; font-weight: 900; color: var(--wall); background: var(--cyan); padding: 9px 16px; clip-path: var(--px-corners);
  box-shadow: inset 4px 4px 0 rgba(204, 230, 237, .5), inset -4px -4px 0 rgba(118, 171, 196, .5);
}
/* a little above the middle: starts close below the logo. Compact, so that "Weiter" fits on most phones –
   and scrollable for the rest (small iPhones, browser bars): the button must always be reachable */
#s-result {
  padding-top: clamp(4px, 2vh, 24px);
  overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
#s-result > * { flex-shrink: 0; }
#s-result > * + * { margin-top: clamp(4px, 1.4vh, 14px); }
#s-result .fig { width: clamp(60px, 10vh, 100px); height: auto; aspect-ratio: 480 / 448; }
#s-result .title { font-size: clamp(26px, 4.2vh, 32px); }
#s-result .rank { margin: clamp(10px, 2.2vh, 22px) 0 0; font-size: 19px; padding: 10px 20px; }
/* "Altersvorsorgedepot" sits right on top of its amount, with more room above (title, highscore place) */
#s-result .depot-label { font-size: clamp(19px, 3vh, 24px); line-height: 1.1; margin-top: clamp(16px, 4vh, 40px); margin-bottom: 0; }
#s-result .total { font-size: clamp(48px, 7.6vh, 68px); margin-top: 0; }
#s-result .split { margin-top: clamp(6px, 1.2vh, 14px); }
#s-result .split > span { padding: 3px 2px; }
#res-next { margin-top: clamp(12px, 2.6vh, 28px); transition: opacity .3s, filter .3s; }
/* low screens: a little less room above the logo on the result and the call to action */
@media (max-height: 760px) {
  [data-screen='result'] #brand, [data-screen='cta'] #brand { padding-top: calc(env(safe-area-inset-top) + 16px); padding-bottom: 6px; }
}
#res-next:disabled { filter: grayscale(1); }

/* --- conversion page: close to the facade mural – pixel headline, the result in a sky window with the skyline
       and the cheering fox – then clean cards and buttons; the same background as every screen ------ */
#s-cta {
  position: relative; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  padding-top: 10px;
}
#s-cta > * { position: relative; flex: none; width: 100%; max-width: 420px; }
#s-cta > * + * { margin-top: clamp(14px, 2.8vh, 26px); }

.pixel-title {
  font: 400 clamp(50px, 15vw, 66px)/.88 'Jersey 20', system-ui, sans-serif; letter-spacing: .5px; text-align: left; padding: 4px 6px 0;
}
.pixel-title span { display: block; }
.pixel-title .l1 {
  color: #eaf7ff;
  text-shadow: 2px 2px 0 #4a9be6, 4px 4px 0 #2c6fc4, 6px 6px 0 #1b4796, 6px 12px 16px rgba(5, 12, 45, .45);
}
.pixel-title .l2 {
  text-align: right; color: #ffad19;
  background: linear-gradient(180deg, #ffd844 0%, #ffb01a 55%, #ff8c12 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(2px 2px 0 #e2670c) drop-shadow(2px 2px 0 #b54905) drop-shadow(1px 4px 0 #6e2a05);
}

/* the sky window: stepped pixel corners, clouds, the skyline of the location, one cheering fox in the middle.
   Low, so that all buttons below it (down to "Freunde einladen") fit on small phones without scrolling */
.window {
  --win-h: clamp(84px, 13vh, 130px);
  overflow: hidden; height: var(--win-h);
  background: linear-gradient(180deg, #34b2e6 0%, #72cbef 55%, #b4e4f6 100%);
  clip-path: polygon(0 12px, 6px 12px, 6px 6px, 12px 6px, 12px 0, calc(100% - 12px) 0, calc(100% - 12px) 6px, calc(100% - 6px) 6px,
    calc(100% - 6px) 12px, 100% 12px, 100% calc(100% - 12px), calc(100% - 6px) calc(100% - 12px), calc(100% - 6px) calc(100% - 6px),
    calc(100% - 12px) calc(100% - 6px), calc(100% - 12px) 100%, 12px 100%, 12px calc(100% - 6px), 6px calc(100% - 6px), 6px calc(100% - 12px), 0 calc(100% - 12px));
}
.window .skyline {
  position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--win-h) * .36); opacity: .9;
  background: url(img/skyline.svg) center bottom / auto 100% repeat-x;
}
#s-cta[data-location='berlin'] .window .skyline { background-image: url(img/skyline-berlin.svg); }
.window .cloud {
  position: absolute; width: 48px; height: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' d='M5 1h4v1h2v1h2v1h2v3H1V5h1V3h2V2h1z'/%3E%3Cpath fill='%23cdeaf8' d='M1 6h14v1H1z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.window .cloud.c1 { left: 6%; top: 16%; }
.window .cloud.c2 { right: 5%; top: 34%; width: 36px; height: 18px; }
.window .cloud.c3 { left: 14%; bottom: 42%; width: 30px; height: 15px; opacity: .8; }
/* the cheering fox sits high in its frame (its middle at 41 % of the frame's height): moved so that the fox itself
   is in the middle of the window */
.window .foxes { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-41.4%); display: flex; justify-content: center; }
.window .foxes .fig { height: calc(var(--win-h) * .8); width: auto; aspect-ratio: 480 / 448; }

/* clean buttons: the call to action, inviting friends */
#s-cta .btn {
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: 19px; font-weight: 900; letter-spacing: 0; line-height: 1.2; padding: 16px 18px;
}
#s-cta .btn::after {
  content: ''; flex: none; width: 18px; height: 18px; margin-left: 10px; background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat;
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.2 4.8 20.4 12l-7.2 7.2-1.7-1.7 4.3-4.3H3.6v-2.4h12.2l-4.3-4.3z'/%3E%3C/svg%3E");
}
#s-cta .btn.light { background: #fff; }
#s-cta .btn.ghost { padding: 14px 18px; }
#s-cta .btn.ghost::after {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 16.1c-.8 0-1.5.3-2 .8l-7.1-4.1c.1-.3.1-.5.1-.8s0-.5-.1-.8l7-4.1c.5.5 1.3.8 2.1.8 1.7 0 3-1.3 3-3s-1.3-3-3-3-3 1.3-3 3c0 .3 0 .5.1.8L8 9.8C7.5 9.3 6.8 9 6 9c-1.7 0-3 1.3-3 3s1.3 3 3 3c.8 0 1.5-.3 2-.8l7.1 4.2c-.1.2-.1.4-.1.7 0 1.6 1.3 2.9 2.9 2.9s2.9-1.3 2.9-2.9-1.2-3-2.8-3z'/%3E%3C/svg%3E");
}

/* one short sentence above the call to action */
#s-cta > .lead { font-size: 20px; line-height: 1.35; font-weight: 600; text-align: center; color: #fff; }

/* --- confetti when the call to action appears ----------------------------------------- */
#confetti { position: fixed; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; pointer-events: none; z-index: 10; }
#confetti i { position: absolute; top: -20px; width: 9px; height: 14px; animation: fall-a linear forwards; }
#confetti i:nth-child(2n) { animation-name: fall-b; width: 12px; height: 8px; }
@keyframes fall-a { to { transform: translate3d(40px, 110vh, 0) rotate(720deg); } }
@keyframes fall-b { to { transform: translate3d(-50px, 110vh, 0) rotate(-540deg); } }
@media (prefers-reduced-motion: reduce) {
  .fig.hover, .fig.bob { animation: none; }
  #confetti { display: none; }
}