/* 7arif "الشلة" (retro/shilla.js): the group table as a match ticket on the end screen, the weekly table on the
   contents page, and the paste / help sheet. Uses the shared custom properties of web/style.css and retro/kit.css
   (--paper, --paper-clip, --ink, --yellow, --red, --navy-deep, --font-display, --font-ui), so it works on the main page
   and on every mini-game page. Logical properties only, every control >= 44 px, Lalezar >= 24 px, Arabic body >= 16 px,
   only transform/opacity animate, reduced motion = a short fade. */

.r-end__shilla { margin: 18px 0 0; }
.r-shilla { text-align: start; color: var(--ink); }
.r-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* the ticket: paper stub, hard shadow, side notches on the perforation line */
.r-shilla__ticket { position: relative; background: var(--paper-clip, #FBF7EC); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
                    padding: 0 0 6px; margin: 0 0 4px; }
.r-shilla__ticket + .r-shilla__ticket { margin-top: 16px; }
.r-shilla__head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
                  padding: 8px 14px 8px; background: var(--ink); color: var(--paper-clip, #FBF7EC); border-bottom: 2px dashed var(--paper-clip, #FBF7EC); }
.r-shilla__head::before, .r-shilla__head::after { content: ""; position: absolute; bottom: -10px; width: 16px; height: 16px; border-radius: 50%;
                  background: var(--paper, #EFE6D2); border: 2px solid var(--ink); }
.r-shilla__head::before { inset-inline-start: -10px; }
.r-shilla__head::after { inset-inline-end: -10px; }
.r-shilla h3, .r-shilla h2 { font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 1.2; margin: 0; padding-top: 4px; color: inherit; text-align: start; }
.r-shilla .r-shilla__head h3 { color: var(--yellow); }
html[lang="en"] .r-shilla h3, html[lang="en"] .r-shilla h2 { font-family: var(--font-ui); font-weight: 900; font-size: 21px; padding-top: 0; }
.r-shilla__meta { font: 800 16px/1.4 var(--font-ui); }

.r-shilla__table { width: 100%; border-collapse: collapse; margin: 8px 0 0; }
.r-shilla__table td, .r-shilla__table th { padding: 4px 10px; border-bottom: 1.5px dashed rgba(26,26,26,.35); vertical-align: middle; }
.r-shilla__table tr:last-child td { border-bottom: 0; }
.r-shilla__table th { font: 800 16px/1.4 var(--font-ui); color: var(--ink-meta, #4a3f2c); text-align: center; }
.r-shilla__rank { width: 44px; text-align: center; font-family: var(--font-display); font-size: 24px; line-height: 1; padding-top: 8px !important; }
html[lang="en"] .r-shilla__rank { font-family: var(--font-ui); font-weight: 900; font-size: 18px; padding-top: 4px !important; }
.r-shilla__name { font: 800 17px/1.35 var(--font-ui); overflow-wrap: anywhere; }
.r-shilla__name bdi { unicode-bidi: isolate; }
.r-shilla__cell { display: flex; align-items: center; gap: 4px 8px; flex-wrap: wrap; min-height: 36px; }
.r-shilla__you { display: inline-block; font: 800 13px/1.4 var(--font-ui); background: var(--ink); color: var(--yellow); padding: 0 6px; vertical-align: 2px; }
html[lang="ar"] .r-shilla__you, [lang="ar"] .r-shilla__you { font-size: 14px; }
.r-shilla__score, .r-shilla__games { width: 1%; white-space: nowrap; text-align: center; font-family: var(--font-display); font-size: 26px; line-height: 1; padding-top: 8px !important; }
.r-shilla__games { font-size: 24px; color: var(--ink-soft, #6B5D43); }
html[lang="en"] .r-shilla__score, html[lang="en"] .r-shilla__games { font-family: var(--font-ui); font-weight: 900; font-size: 19px; padding-top: 4px !important; }
.r-shilla__table tr.is-me td { background: var(--yellow); }
.r-shilla__table tr.is-me .r-shilla__rank { box-shadow: inset 4px 0 0 var(--red); }
[dir="rtl"] .r-shilla__table tr.is-me .r-shilla__rank { box-shadow: inset -4px 0 0 var(--red); }

/* the 3x3 right/wrong mask of the main grid, small squares after the name */
.r-shilla__mask { display: inline-grid; grid-template-columns: repeat(3, 7px); gap: 1.5px; margin-inline-start: auto; direction: ltr; flex: 0 0 auto; }
.r-shilla__mask i { width: 7px; height: 7px; border: 1.2px solid var(--ink); background: transparent; }
.r-shilla__mask i.on { background: var(--ink); }

.r-shilla__full, .r-shilla__invite, .r-shilla__note, .r-shilla__hint, .r-shilla__range { margin: 8px 14px 4px; font: 700 16px/1.6 var(--font-ui); color: var(--ink-meta, #4a3f2c); }
.r-shilla__full { display: inline-block; background: var(--red); color: #fff; padding: 2px 10px; transform: rotate(-1.5deg); }
.r-shilla__invite { margin-top: 10px; }
.r-shilla__acts { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin: 10px 0 0; }
.r-shilla__acts.end { justify-content: flex-end; }
.r-shilla .r-end__btn, .r-shilla-sheet .r-end__btn { font-size: 16px; min-height: 48px; }
.r-shilla .r-end__nick { margin-top: 12px; }
.r-shilla .r-end__nick label, .r-shilla .r-end__nick small { font-size: 16px; }

/* weekly table on the contents page */
.r-shilla--week { margin: 18px auto 0; max-width: 720px; }
.r-shilla__weekhead { margin: 0 0 10px; }
.r-shilla__weekhead h2 { color: var(--ink); }
.r-shilla__weekhead .r-shilla__range { margin: 2px 0 0; }
.r-shilla--week .r-shilla__note { margin-inline: 0; }

/* the sheet: a bottom sheet on phones, a centred card on desktop */
.r-shilla-lock, .r-shilla-lock body { overflow: hidden; }
.r-shilla-sheet { position: fixed; inset: 0; z-index: 60; }
.r-shilla-sheet.hidden { display: none; }
.r-shilla-sheet__back { position: absolute; inset: 0; background: rgba(8,11,38,.62); }
.r-shilla-sheet__box { position: absolute; inset-inline: 0; bottom: 0; max-height: 88svh; overflow: auto; background: var(--paper, #EFE6D2); color: var(--ink);
  padding: 24px max(16px, env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  border-top: 3px solid var(--ink); text-align: start; animation: r-shilla-up 220ms cubic-bezier(.2,.8,.2,1) both; outline: none; }
.r-shilla-sheet__box h2 { font-family: var(--font-display); font-weight: 400; font-size: 30px; line-height: 1.2; margin: 0 0 8px; padding-top: 4px; }
[lang="en"] .r-shilla-sheet__box h2 { font-family: var(--font-ui); font-weight: 900; font-size: 24px; padding-top: 0; }
.r-shilla-sheet .r-shilla__hint { margin: 0 0 10px; }
.r-shilla__paste { display: grid; gap: 6px; font: 800 16px/1.4 var(--font-ui); }
.r-shilla__paste textarea { width: 100%; min-height: 160px; padding: 10px 12px; border: 2px solid var(--ink); border-radius: 0; background: #fff; color: #1A1A1A;
  font: 600 16px/1.5 var(--font-ui); resize: vertical; box-shadow: 3px 3px 0 var(--red); box-sizing: border-box; }
.r-shilla__paste textarea:focus-visible, .r-shilla-sheet .r-end__btn:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.r-shilla__done { margin: 10px 0 0; font: 800 16px/1.6 var(--font-ui); }
.r-shilla__done:empty { display: none; }
.r-shilla__help { margin: 0; padding-inline-start: 22px; display: grid; gap: 8px; font: 700 16px/1.65 var(--font-ui); }
.r-shilla-sheet.no-anim .r-shilla-sheet__box { animation: r-shilla-fade 120ms linear both; }
@keyframes r-shilla-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes r-shilla-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .r-shilla-sheet__box { animation: r-shilla-fade 120ms linear both; } }
@media (min-width: 700px) {
  .r-shilla-sheet__box { top: 50%; bottom: auto; inset-inline: 0; margin-inline: auto; width: min(560px, calc(100vw - 48px)); max-height: min(86svh, 760px);
    transform: translateY(-50%); border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--navy-deep, #0D1238); animation-name: r-shilla-fade; }
}

/* "فيه غلط؟" (end.js REPORT_EMAIL): a quiet link at the very bottom of the back page */
.r-end__report { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 48px; margin: 14px auto 0; padding: 4px 14px;
  color: var(--ink); text-decoration: none; border: 2px dashed var(--ink); background: transparent; max-width: 320px; }
.r-end__report b { font: 900 16px/1.4 var(--font-ui); text-decoration: underline; text-underline-offset: 3px; }
.r-end__report small { font: 700 16px/1.4 var(--font-ui); color: var(--ink-meta, #4a3f2c); }
.r-end__report:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }