/* 7arif end screen (retro/end.js): the back page. Uses the shared custom properties of web/style.css and
   games/retro/kit.css (--paper, --ink, --red, --yellow, --lime, --blue, --font-display, --font-ui ...), so it works on
   the main page and in every mini-game. No blur, only transform/opacity animate, every control >= 44 px, logical
   properties only. Sequence <= 1.2 s (7 steps x 120 ms + 260 ms), tap skips (.is-skip), reduced motion = opacity. */

.r-end { position: relative; text-align: center; color: var(--ink); }
.r-end h3 { font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 1.2; margin: 0 0 8px; padding-top: 3px; color: var(--ink); text-align: start; }
.r-end h4 { font: 800 12px/1.4 var(--font-ui); margin: 10px 0 6px; color: var(--ink-meta, #4a3f2c); text-align: start; }
html[lang="en"] .r-end h3 { font-family: var(--font-ui); font-weight: 900; font-size: 20px; }

.r-end__kicker { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.r-end__tag { display: inline-block; font: 800 12px/1.5 var(--font-ui); background: var(--ink); color: var(--paper-clip, #FBF7EC); padding: 1px 10px; }
.r-end__issue { font: 800 12px/1.5 var(--font-ui); color: var(--red-ink, #AE1C23); border: 2px solid currentColor; padding: 0 6px; transform: rotate(-3deg); }

/* score + streak sticker */
.r-end__head { position: relative; display: flex; align-items: center; justify-content: center; min-height: 96px; margin: 6px 0 0; }
.r-end__score { display: inline-block; font-family: var(--font-display); font-weight: 400; font-size: 72px; line-height: 1; padding-top: 10px;
                color: var(--yellow); -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; text-shadow: 4px 4px 0 var(--ink); transform: rotate(-3deg);
                direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
.r-end.is-win .r-end__score { color: var(--lime); }
.r-end__sticker { position: absolute; inset-inline-end: 0; top: 2px; display: grid; place-items: center; align-content: center; width: 74px; aspect-ratio: 1; border-radius: 50%;
                  background: var(--yellow); border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); transform: rotate(-8deg); line-height: 1; }
.r-end__sticker b { font-family: var(--font-display); font-weight: 400; font-size: 30px; padding-top: 4px; display: block; }
.r-end__sticker small { font: 800 10.5px/1.1 var(--font-ui); display: block; margin-top: 1px; }
.r-end__verdict { font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 1.25; margin: 4px 0 2px; padding-top: 3px; }
html[lang="en"] .r-end__verdict { font-family: var(--font-ui); font-weight: 900; font-size: 22px; }
.r-end__calm { margin: 0 0 4px; font-size: 14px; font-weight: 700; line-height: 1.6; color: var(--ink-meta, #4a3f2c); }
.r-end__vs { display: inline-block; margin: 8px 0 2px; background: var(--yellow); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); padding: 4px 12px;
             font: 800 15px/1.5 var(--font-ui); transform: rotate(-1.5deg); }
.r-end__note { margin: 10px 0 0; padding: 8px 10px; border: 2px dashed var(--ink); background: var(--paper-clip, #FBF7EC); font-size: 13px; font-weight: 700; line-height: 1.6; text-align: start; }

/* share: the primary action */
.r-end__actions { margin: 16px 0 0; }
.r-end__share { display: flex; width: 100%; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 4px 18px 0;
                font-family: var(--font-display); font-size: 24px; line-height: 1.1; color: #fff; background: var(--red); border: 2px solid var(--ink);
                box-shadow: 3px 3px 0 var(--navy-deep, #0D1238); border-radius: 0; cursor: pointer; transition: transform 80ms; }
.r-end__share svg { width: 22px; height: 22px; margin-top: -4px; flex: 0 0 auto; }
.r-end__share:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--navy-deep, #0D1238); }
html[lang="en"] .r-end__share { font-family: var(--font-ui); font-weight: 900; font-size: 19px; padding-top: 0; }
html[lang="en"] .r-end__share svg { margin-top: 0; }
.r-end__out { margin: 14px 0 0; background: var(--paper-clip, #FBF7EC); border: 1.5px dashed var(--ink); padding: 10px 12px; white-space: pre-wrap; overflow-wrap: anywhere;
              font: 700 14px/1.6 var(--font-ui); text-align: start; unicode-bidi: plaintext; transition: opacity 300ms; }
.r-end__out.flash { background: #fff6c2; }

/* small buttons (nickname, install, reminder) */
.r-end__row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.r-end__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; min-width: 48px; padding: 0 16px; border: 2px solid var(--ink); border-radius: 0;
              background: var(--red); color: #fff; font: 800 15px/1.2 var(--font-ui); box-shadow: 2px 2px 0 var(--ink); cursor: pointer; transition: transform 80ms; }
.r-end__btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }
.r-end__btn.paper { background: var(--paper-clip, #FBF7EC); color: var(--ink); }
.r-end__btn.sm { min-height: 44px; padding: 0 12px; font-size: 14px; }
.r-end__btn svg { width: 20px; height: 20px; flex: 0 0 auto; }

/* nickname (asked once) */
.r-end__nick { margin: 14px 0 0; padding: 10px 12px 12px; background: var(--paper-clip, #FBF7EC); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); text-align: start; }
.r-end__nick label { display: grid; gap: 6px; font: 800 14px/1.4 var(--font-ui); }
.r-end__nick input { min-height: 48px; padding: 0 12px; border: 2px solid var(--ink); border-radius: 0; background: #fff; color: #1A1A1A; font: 700 17px var(--font-ui); width: 100%; }
.r-end__nick small { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 700; line-height: 1.5; color: var(--ink-meta, #4a3f2c); }
.r-end__nick .r-end__row { justify-content: flex-start; }
.r-end__nickis { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 0; font-size: 13px; font-weight: 800; color: var(--ink-meta, #4a3f2c); }

/* the reveal: missed answers as greyed clippings */
.r-end__reveal { margin: 22px 0 0; text-align: start; }
.r-end__reveal ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.r-end__reveal li { display: grid; gap: 1px; padding: 8px 10px; background: var(--paper-2, #E6DAC0); border: 2px dashed rgba(26,26,26,.45); }
.r-end__q { font-size: 12.5px; font-weight: 800; color: var(--ink-meta, #4a3f2c); line-height: 1.45; }
.r-end__a { font-family: var(--font-display); font-weight: 400; font-size: 20px; line-height: 1.3; color: var(--ink-soft, #6B5D43); padding-top: 2px; }
.r-end__a small { font: 800 11.5px/1 var(--font-ui); color: var(--ink-meta, #4a3f2c); }
html[lang="en"] .r-end__a { font-family: var(--font-ui); font-weight: 800; font-size: 17px; }
.r-end__n { justify-self: start; font: 800 11.5px/1.5 var(--font-ui); background: var(--yellow); color: var(--ink); padding: 0 6px; }

/* stats + distribution */
.r-end__stats { margin: 22px 0 0; text-align: start; }
.r-end__tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.r-end__tile { text-align: center; border: 2px solid var(--ink); background: var(--paper-clip, #FBF7EC); padding: 4px 2px 3px; }
.r-end__tile b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 26px; line-height: 1.1; padding-top: 3px; }
.r-end__tile span { display: block; font-size: 11px; font-weight: 800; line-height: 1.3; }
.r-end__dist { display: grid; gap: 4px; }
.r-end__bar { display: grid; grid-template-columns: 22px 1fr; align-items: center; gap: 6px; font: 800 12px/1 var(--font-ui); }
.r-end__bar > span { text-align: center; }
.r-end__bar i { display: flex; justify-content: flex-end; width: max(var(--w), 22px); min-height: 20px; background: var(--ink-soft, #6B5D43); color: #fff; font-style: normal; padding: 0 6px; }
.r-end__bar i b { font-size: 11.5px; line-height: 20px; }
.r-end__bar.is-now i { background: var(--red); }
.r-end__bar i.is-zero { width: auto; background: transparent; color: var(--ink-meta, #4a3f2c); justify-content: flex-start; padding: 0 2px; border-inline-start: 2px solid var(--ink-soft, #6B5D43); }
.r-end__reads { margin: 10px 0 0; font-size: 13px; font-weight: 800; color: var(--ink-meta, #4a3f2c); }

/* countdown + the next page */
.r-end__count { margin: 22px -4px 0; padding: 8px 10px 6px; background: var(--ink); color: var(--paper-clip, #FBF7EC); font: 800 14px/1.5 var(--font-ui); }
.r-end__count bdi { font-family: var(--font-display); font-weight: 400; font-size: 24px; color: var(--yellow); margin-inline-start: 6px; vertical-align: -2px; }
html[lang="en"] .r-end__count bdi { font-family: var(--font-ui); font-weight: 900; font-size: 20px; font-variant-numeric: tabular-nums; }
.r-end__link { color: var(--yellow); font-weight: 800; display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; }
.r-end__next { display: flex; align-items: center; gap: 12px; min-height: 72px; margin: 14px 0 0; padding: 10px 12px; background: var(--blue); color: #fff; text-decoration: none; text-align: start;
               border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); transform: rotate(-1deg); transition: transform 80ms; }
.r-end__next:active { transform: rotate(-1deg) translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.r-end__pg { flex: 0 0 auto; display: grid; place-items: center; align-content: center; width: 56px; aspect-ratio: 1; border-radius: 50%; background: var(--yellow); color: var(--ink);
             border: 2.5px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); font-family: var(--font-display); font-size: 24px; line-height: 1; padding-top: 4px; transform: rotate(-8deg); }
.r-end__pg small { font: 800 10px/1 var(--font-ui); display: block; margin-bottom: 1px; }
.r-end__pg.is-done { background: var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23141821' stroke-width='3.4' stroke-linecap='square'/%3E%3C/svg%3E") center / 60% no-repeat; }
.r-end__nt { display: grid; gap: 1px; min-width: 0; }
.r-end__nt small { font: 800 12px/1.3 var(--font-ui); opacity: .9; }
.r-end__nt b { font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 1.2; color: var(--yellow); padding-top: 2px; }
html[lang="en"] .r-end__nt b { font-family: var(--font-ui); font-weight: 900; font-size: 20px; }
.r-end__nt em { font-style: normal; font-size: 12.5px; font-weight: 700; line-height: 1.45; }

/* install offer + reminder */
.r-end__extra { margin: 18px 0 0; display: grid; gap: 10px; justify-items: center; }
.r-end__install { width: 100%; padding: 10px 12px 12px; background: var(--paper-clip, #FBF7EC); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.r-end__install b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 21px; line-height: 1.25; padding-top: 2px; }
html[lang="en"] .r-end__install b { font-family: var(--font-ui); font-weight: 900; font-size: 17px; }
.r-end__install small { display: block; font-size: 12.5px; font-weight: 700; line-height: 1.55; color: var(--ink-meta, #4a3f2c); margin-top: 4px; }
.r-end__ios { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 8px 0 2px; }
.r-end__key { display: grid; place-items: center; width: 48px; height: 48px; border: 2px solid var(--ink); background: #fff; color: var(--blue); box-shadow: 2px 2px 0 var(--ink); }
.r-end__key svg { width: 26px; height: 26px; }
.r-end__arrow { width: 28px; height: 3px; background: var(--ink); position: relative; }
.r-end__arrow::after { content: ""; position: absolute; inset-inline-end: -2px; top: -5px; width: 10px; height: 10px; border-top: 3px solid var(--ink); border-inline-end: 3px solid var(--ink); transform: rotate(45deg); }
html[dir="rtl"] .r-end__arrow::after { transform: rotate(-45deg); }
.r-end__remind-note { margin: 0; font-size: 12.5px; font-weight: 700; line-height: 1.55; color: var(--ink-meta, #4a3f2c); }

/* the sequence (<= 1.2 s): each block fades and rises in turn; the score lands like a stamp */
@keyframes r-end-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes r-end-stamp { 0% { opacity: 0; transform: scale(1.35) rotate(-8deg); } 100% { opacity: 1; transform: scale(1) rotate(-3deg); } }
@keyframes r-end-fade { from { opacity: 0; } to { opacity: 1; } }
.r-end.is-play .e-in { animation: r-end-in 260ms cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 120ms); }
.r-end.is-play .r-end__score { animation: r-end-stamp 260ms cubic-bezier(.3,1.4,.5,1) 120ms both; }
.r-end.is-skip .e-in, .r-end.is-skip .r-end__score { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .r-end.is-play .e-in { animation: r-end-fade 150ms linear both !important; animation-delay: 0ms !important; }
  .r-end.is-play .r-end__score { animation: none !important; }
  .r-end__share, .r-end__btn, .r-end__next, .r-end__out { transition: none; }
}
@media (hover: hover) and (pointer: fine) {
  .r-end__share:hover, .r-end__btn:hover { transform: translate(-1px, -1px); }
  .r-end__next:hover { transform: rotate(-1deg) translate(-1px, -2px); box-shadow: 4px 5px 0 var(--ink); }
}
@media (max-width: 359px) { .r-end__score { font-size: 60px; } .r-end__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .r-end__score { font-size: 84px; -webkit-text-stroke-width: 7px; } }
@media (forced-colors: active) { .r-end__share, .r-end__btn, .r-end__next, .r-end__tile { border: 1px solid CanvasText; } }

/* lead, 2026-11-09: global rule 12 (Arabic body text >= 16 px, line-height >= 1.6; Lalezar only >= 24 px) */
html[lang="ar"] .r-end__calm, html[lang="ar"] .r-end__note, html[lang="ar"] .r-end__nick small, html[lang="ar"] .r-end__nickis,
html[lang="ar"] .r-end__q, html[lang="ar"] .r-end__reads, html[lang="ar"] .r-end__count, html[lang="ar"] .r-end__nick label { font-size: 16px; line-height: 1.6; }
html[lang="ar"] .r-end__a { font-family: var(--font-ui); font-weight: 800; font-size: 18px; }
/* lead: contrast (AA) for the stats heading and distribution numbers */
.r-end h4 { color: var(--ink); }
.r-end__bar i { background: var(--ink); } .r-end__bar i b { color: #fff; }
.r-end__bar i.is-zero b { color: var(--ink-meta, #4a3f2c); }   /* a zero count sits on the paper, not on an ink bar */