/* KulliQ — «المحقق»: a night city and a detective's desk. Paper cards on navy, a desk lamp's yellow, red ink for the
   clues' numbers. Text is Almarai, big and plain (the owner, 2026-10-31: «خل الخط اوضح»); titles are Changa. A seat, a
   time or a place in a race is a 3D tile, so a number in a clue never looks like the text around it. */
:root {
  --night: #0A1527; --night2: #12233D; --night3: #1B3052; --paper: #FFF9EC; --paper2: #F5EAD2; --line: #E9DDC2;
  --manila: #F2DFB2; --manila2: #DEC283; --lamp: #FFC845; --lamp2: #F5A818; --red: #D43F3F; --ink: #18202E; --muted: #6B6456; --mute2: #A3AFC4;
  --p0: #C2372D; --p1: #1C68CF; --p2: #0F7F59; --p3: #A85F08; --p4: #7640C2;
  --disp: "Changa", "Almarai", sans-serif; --text: "Almarai", "IBM Plex Sans Arabic", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; font-family: var(--text); color: #fff; background: radial-gradient(120% 60% at 50% 0%, #16294A 0%, var(--night) 62%) fixed, var(--night);
  -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }
.pic { display: inline-block; flex: none; background-repeat: no-repeat; }
.home, .case, .reveal { max-width: 560px; margin: 0 auto; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }

/* ---- what clues are made of ---- */
/* inline (not inline boxes), so a full stop after a tile or a thing stays on its line */
.k3 { display: inline; white-space: nowrap; padding: .16em .46em .12em; margin: 0 .12em; border-radius: .45em;
  font: 800 .95em/1 var(--disp); color: #1B2A55; background: linear-gradient(180deg, #FFFFFF 0%, #E3ECFC 100%); border: 1px solid #B6C5E6;
  box-shadow: 0 .15em 0 #7F91C2, 0 .26em .45em rgba(16, 26, 56, .25), inset 0 1px 0 #fff; }
.k3.t { color: #5C3A00; background: linear-gradient(180deg, #FFF8DE 0%, #FFE39B 100%); border-color: #E8BF55; box-shadow: 0 .15em 0 #C8961F, 0 .26em .45em rgba(60, 40, 0, .25), inset 0 1px 0 #fff; }
.vv { display: inline; white-space: nowrap; padding: .12em .42em .12em .34em; margin: 0 .06em; border-radius: .5em; background: #F1E3C4; font-weight: 800; color: #3A2C12;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.vv .pic { width: 1.35em; height: 1.35em; vertical-align: -.32em; margin-inline-end: .2em; }
.nm { color: var(--pc); font-weight: 800; }

/* ---- the case files ---- */
.dhead { position: relative; padding: 10px 16px 12px; padding-top: calc(10px + env(safe-area-inset-top)); overflow: hidden; }
.sky { position: absolute; left: 0; right: 0; bottom: 30px; width: 100%; height: 86px; }
.moon { position: absolute; left: 34%; top: calc(56px + env(safe-area-inset-top)); width: 28px; height: 28px; filter: drop-shadow(0 0 12px rgba(255, 220, 120, .75)); }
.goBack { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 99px; background: rgba(255, 255, 255, .1);
  color: #fff; text-decoration: none; font-weight: 700; font-size: 14px; }
.logo { position: relative; display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.badge { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: end center; overflow: hidden;
  background: radial-gradient(circle at 50% 32%, #FFE7A6, #F2B63C 70%); box-shadow: 0 0 0 1px rgba(255, 255, 255, .12) inset, 0 10px 20px -10px #000; }
.badge .kid { width: 47px; margin-bottom: -6px; }
.logo h1 { margin: 0; font: 800 32px/1 var(--disp); letter-spacing: 0; }
.logo small { display: block; margin-top: 6px; color: var(--lamp); font-size: 14px; font-weight: 700; }
.score { margin-inline-start: auto; display: flex; align-items: center; gap: 5px; padding: 7px 13px; border-radius: 99px; background: rgba(255, 255, 255, .1);
  font: 800 17px/1 var(--disp); color: var(--lamp); }
/* Firas peeks over the rank card from in front of the city: his lower half is behind it */
.rankWrap { position: relative; margin-top: 96px; }
.heroKid { position: absolute; z-index: 1; left: 6px; bottom: calc(100% - 36px); width: 116px; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .45)); }
.rank { position: relative; z-index: 2; padding: 11px 14px; border-radius: 16px; background: #0A1424; border: 1px solid rgba(255, 255, 255, .1); }
.rank .row { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 14px; color: var(--mute2); }
.rank b { color: #fff; font-size: 15.5px; }
.rank b i { font-style: normal; color: var(--lamp); }
.bar { height: 7px; margin-top: 9px; border-radius: 4px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(270deg, var(--lamp), var(--lamp2)); transition: width .6s; }
.boss { display: flex; gap: 12px; align-items: flex-start; margin: 4px 14px 18px; padding: 12px 14px; border-radius: 18px; background: var(--paper); color: var(--ink);
  box-shadow: 0 12px 24px -14px #000; }
.boss > .pic { width: 54px; height: 54px; }
.boss b { display: block; font-size: 15px; }
.boss p { margin: 3px 0 0; font-size: 15.5px; line-height: 1.7; }
.go { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 11px 20px; border: 0; border-radius: 14px; background: var(--lamp); color: #2A1B00;
  font: 800 16.5px/1 var(--disp); box-shadow: 0 4px 0 #C8961F; }
.go:active { transform: translateY(2px); box-shadow: 0 2px 0 #C8961F; }
.chapters { padding: 0 14px; }
.chap { margin-bottom: 20px; }
.chap h3 { display: flex; align-items: center; gap: 9px; margin: 0 2px 12px; font: 800 18px/1.2 var(--disp); }
.chap h3 .n { width: 27px; height: 27px; border-radius: 8px; display: grid; place-items: center; background: var(--lamp); color: var(--night); font-size: 15px; }
.chap h3 em { font: 700 12.5px/1 var(--text); font-style: normal; color: var(--mute2); padding: 5px 9px; border-radius: 99px; background: rgba(255, 255, 255, .08); }
.chap.locked h3 .n { background: rgba(255, 255, 255, .12); color: var(--mute2); }
.chap .what { margin: -6px 2px 10px; color: var(--mute2); font-size: 13.5px; }
.mags { margin-inline-start: auto; display: flex; gap: 2px; }
.mags svg { width: 14px; height: 14px; color: var(--lamp); }
.mags svg.d { color: rgba(255, 255, 255, .16); }
.files { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 10px; }
.file { position: relative; min-height: 112px; padding: 20px 6px 26px; border: 0; border-radius: 4px 14px 14px 14px; text-align: center; color: var(--ink);
  background: linear-gradient(170deg, var(--manila), var(--manila2)); box-shadow: 0 9px 16px -11px #000; }
.file::before { content: ""; position: absolute; top: -8px; right: 0; width: 50px; height: 13px; border-radius: 7px 7px 0 0; background: var(--manila); }
.file .pic { width: 40px; height: 40px; display: block; margin: 0 auto 5px; }
.file .t { display: block; font-size: 13px; font-weight: 800; line-height: 1.35; }
.file .no { position: absolute; top: 6px; right: 9px; font: 800 13px/1 var(--disp); color: #87672A; }
.file .st { position: absolute; bottom: 7px; right: 9px; font-size: 12px; letter-spacing: 1px; color: #B07A00; }
.file .st .off { opacity: .28; }
.stamp { position: absolute; bottom: 6px; left: 5px; padding: 2px 5px; border: 2px solid var(--red); border-radius: 6px; transform: rotate(-12deg);
  color: var(--red); font: 800 11px/1.1 var(--disp); opacity: .88; }
.file.now { background: linear-gradient(170deg, #FFEBB3, #F4C460); box-shadow: 0 0 0 2.5px var(--lamp), 0 0 26px rgba(255, 200, 69, .55); }
.file.now::before { background: #FFEBB3; }
.file.now .goTag { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); padding: 3px 12px 4px; border-radius: 99px; background: var(--night);
  color: var(--lamp); font: 800 12px/1 var(--disp); white-space: nowrap; }
.file.lock { background: linear-gradient(170deg, #22385A, #192B47); color: var(--mute2); cursor: default; }
.file.lock::before { background: #22385A; }
.file.lock .pic { opacity: .3; filter: grayscale(1); }
.file.lock .no { color: var(--mute2); }
.file .lk { position: absolute; bottom: 8px; left: 50%; width: 16px; height: 16px; margin-left: -8px; color: var(--mute2); }
.moreBtn { display: flex; align-items: center; gap: 6px; margin: 6px auto 12px; padding: 10px 18px; border: 0; border-radius: 99px; background: rgba(255, 255, 255, .1);
  font-weight: 800; font-size: 15px; }
.moreBtn[aria-expanded="true"] svg { transform: rotate(180deg); }
.more { padding: 0 14px; }
.more .card { margin: 0 0 12px; }
.about h2 { margin: 0 0 8px; font: 800 19px/1.2 var(--disp); }
.about ul { margin: 0; padding: 0 18px 0 0; display: grid; gap: 8px; font-size: 15px; line-height: 1.75; }
.mk { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; font-weight: 800; font-size: 14px; vertical-align: -3px; }
.mk.x { color: var(--red); background: #FBE3DF; }
.mk.ok { color: #2A1B00; background: var(--lamp); }
.setRow { display: flex; align-items: center; gap: 12px; }
.setRow b { display: block; font-size: 16px; }
.setRow span { display: block; color: var(--muted); font-size: 13.5px; }
.switch { margin-inline-start: auto; position: relative; width: 56px; height: 32px; border: 0; border-radius: 99px; background: #C9C1AE; flex: none; }
.switch span { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: right .2s; }
.switch[aria-checked="true"] { background: #2E9E6B; }
.switch[aria-checked="true"] span { right: 28px; }
.plBtn { display: block; width: 100%; margin: 0 0 12px; padding: 13px; border: 0; border-radius: 14px; background: var(--lamp); color: #2A1B00; font: 800 16px/1 var(--disp); }
.also { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 4px 0 10px; }
.also a { padding: 8px 14px; border-radius: 99px; background: rgba(255, 255, 255, .09); color: #fff; text-decoration: none; font-size: 14px; font-weight: 700; }
.credits { text-align: center; color: var(--mute2); font-size: 12.5px; }
.credits a { color: var(--mute2); }

/* ---- cards (paper) ---- */
.card { margin: 0 12px 12px; padding: 13px 14px; border-radius: 18px; background: var(--paper); color: var(--ink); box-shadow: 0 12px 24px -16px #000; }
.card h3 { display: flex; align-items: center; gap: 7px; margin: 0 0 10px; font: 800 18px/1.2 var(--disp); }
.card h3 > .pic { width: 22px; height: 22px; }
.card h3 small { margin-inline-start: auto; font: 700 12.5px/1.2 var(--text); color: var(--muted); text-align: start; }

/* ---- a case ---- */
.cbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 10px; padding: 10px 12px; padding-top: calc(10px + env(safe-area-inset-top));
  background: rgba(10, 21, 39, .92); backdrop-filter: blur(8px); }
.rb { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border: 0; border-radius: 13px; background: rgba(255, 255, 255, .1); }
.ct { min-width: 0; }
.ct small { display: block; color: var(--lamp); font-size: 13px; font-weight: 800; }
.ct h2 { margin: 0; font: 800 20px/1.2 var(--disp); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stars { margin-inline-start: auto; color: var(--lamp); font-size: 17px; letter-spacing: 1px; white-space: nowrap; }
.stars .off { opacity: .25; }
.story { margin-top: 6px; }
/* Firas in the story's corner, watching over the case; the story's lines go round him */
.story .kidPeek { float: left; width: 84px; margin: -6px -4px 4px 8px; }
.story .ev { clear: both; }
.story p { margin: 0; font-size: 16.5px; line-height: 1.95; }
.story p .ask { display: block; margin-top: 4px; color: var(--red); font: 800 18px/1.5 var(--disp); }
.ev { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 10px; }
.pol { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: 12px; background: #fff; box-shadow: 0 3px 9px -4px rgba(0, 0, 0, .35);
  font-size: 14.5px; font-weight: 800; line-height: 1.3; transform: rotate(-1.2deg); }
.pol + .pol { transform: rotate(1deg); }
.pol .pic { width: 32px; height: 32px; }
.pol small { display: block; color: var(--muted); font-size: 12px; font-weight: 700; }
.jump { display: flex; gap: 8px; margin: 0 12px 14px; }
.jump a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px; padding: 9px; border-radius: 12px; background: rgba(255, 255, 255, .08);
  color: #fff; text-decoration: none; font-weight: 800; font-size: 14.5px; }
.sec { display: flex; align-items: baseline; gap: 8px; margin: 0 16px 9px; font: 800 18px/1.2 var(--disp); }
.sec small { margin-inline-start: auto; font: 700 12.5px/1 var(--text); color: var(--mute2); }
.sus { display: grid; grid-template-columns: repeat(auto-fit, minmax(62px, 1fr)); gap: 7px; margin: 0 12px 14px; }
.s { position: relative; padding: 8px 2px 7px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 15px; background: rgba(255, 255, 255, .06); text-align: center; }
.ph { width: 52px; height: 52px; margin: 0 auto 5px; border-radius: 50%; overflow: hidden; display: grid; place-items: end center;
  background: radial-gradient(circle at 50% 35%, #33548A, #172A47); box-shadow: 0 0 0 2.5px var(--pc); }
.ph .pic { width: 50px; height: 50px; margin-bottom: -3px; }
.s b { display: block; font-size: 15px; }
.s small { display: block; margin-top: 1px; color: var(--mute2); font-size: 12px; line-height: 1.3; }
.s.out .ph { filter: grayscale(1) brightness(.7); }
.s.out b, .s.out small { opacity: .5; }
.s.out::after { content: "✗"; position: absolute; top: 4px; left: 8px; color: #FF8A80; font-weight: 800; font-size: 20px; }
.rule { margin: -2px 0 10px; padding: 9px 12px; border-radius: 12px; background: #FDE8E4; color: #8E2318; font-weight: 800; font-size: 15px; line-height: 1.6; }
.clues ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.clues li { display: flex; align-items: flex-start; gap: 9px; padding: 7px 8px; border-radius: 12px; font-size: 16px; line-height: 1.95; cursor: pointer; }
.clues li .no { flex: none; width: 27px; height: 27px; margin-top: 3px; border-radius: 50%; border: 2px solid var(--red); display: grid; place-items: center;
  color: var(--red); font: 800 14px/1 var(--disp); }
.clues li.says { background: #F7EFE0; }
.clues li .spk { flex: none; width: 34px; height: 34px; margin-top: 1px; border-radius: 50%; overflow: hidden; display: grid; place-items: end center;
  background: radial-gradient(circle at 50% 35%, #33548A, #172A47); box-shadow: 0 0 0 2px var(--pc); }
.clues li .spk .pic { width: 32px; height: 32px; margin-bottom: -2px; }
.clues li.used { color: #A49A88; }
.clues li.used .no { border-color: #D3C9B3; color: #BEB29A; }
.clues li.used .k3, .clues li.used .vv, .clues li.used .pic, .clues li.used .nm { opacity: .55; }
.clues li.used::after { content: "✓"; flex: none; margin-top: 3px; margin-inline-start: auto; color: #3E9A6E; font-weight: 800; }
.clues li.hl { background: #FFF0C2; box-shadow: 0 0 0 2px var(--lamp2) inset; }
.how { margin: -4px 0 10px; color: var(--muted); font-size: 14px; }
.undo { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border: 0; border-radius: 10px; background: #EFE3C9;
  font: 800 13.5px/1 var(--text); color: var(--ink); }
.undo:disabled { opacity: .45; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 0 0 12px; padding: 9px 10px; border-radius: 12px; background: #F6ECD7; font-size: 13.5px; line-height: 1.6; }
.legend b { font-weight: 800; }
.legend .lg { display: inline-flex; align-items: center; gap: 3px; }
.legend .pic { width: 20px; height: 20px; }
.nb { display: grid; gap: 10px; }
.nbp { display: grid; grid-template-columns: 62px 1fr; gap: 8px; align-items: start; padding: 9px 8px; border-radius: 14px; background: #fff; border: 1px solid var(--line); }
.nbp .who { text-align: center; font-weight: 800; font-size: 14px; line-height: 1.25; color: var(--pc); }
.nbp .who .ph { width: 40px; height: 40px; margin-bottom: 3px; box-shadow: 0 0 0 2px var(--pc); }
.nbp .who .ph .pic { width: 38px; height: 38px; }
.lines { display: grid; gap: 7px; }
.ln { display: flex; flex-wrap: wrap; gap: 6px; }
.ln + .ln { padding-top: 7px; border-top: 1px dashed #E6D9BC; }
.c { position: relative; min-width: 36px; height: 36px; padding: 0 5px; border-radius: 10px; display: grid; place-items: center;
  border: 1.5px solid #D6C9AA; background: #FFFDF8; font: 800 16px/1 var(--disp); color: #1B2A55; box-shadow: 0 2px 0 #D6C9AA; }
.c .pic { width: 25px; height: 25px; }
.c.k { background: linear-gradient(180deg, #FFFFFF, #E5EDFC); border-color: #B6C5E6; box-shadow: 0 2px 0 #8C9DCB; }
.c.k.t { color: #5C3A00; background: linear-gradient(180deg, #FFF8DE, #FFE5A3); border-color: #E8BF55; box-shadow: 0 2px 0 #C8961F; font-size: 14.5px; }
.c.x { opacity: .34; box-shadow: none; transform: translateY(2px); }
.c.x::after { content: ""; position: absolute; left: 3px; right: 3px; top: 50%; height: 2.5px; border-radius: 2px; background: var(--red); transform: rotate(-38deg); }
.c.ok { background: var(--lamp); border-color: #DE9F00; box-shadow: 0 2px 0 #B98200, 0 0 0 3px rgba(255, 200, 69, .35); color: #2A1B00; }
.c.ok::before { content: "✓"; position: absolute; top: -8px; left: -7px; width: 17px; height: 17px; border-radius: 50%; background: #2E9E6B; color: #fff;
  font: 800 11px/17px var(--text); text-align: center; }
.c.bad { animation: shake .45s; box-shadow: 0 0 0 3px #FF8A80; }
.nbp.bad { box-shadow: 0 0 0 3px #FF8A80; }
@keyframes shake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.act { position: sticky; bottom: 0; z-index: 9; display: flex; gap: 10px; padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(10, 21, 39, 0), var(--night) 32%); }
.act button { height: 54px; border: 0; border-radius: 16px; display: flex; align-items: center; justify-content: center; gap: 8px; font: 800 18px/1 var(--disp); }
.act .pic { width: 26px; height: 26px; }
.hb { flex: 1; background: rgba(255, 255, 255, .12); }
.ab { flex: 1.5; background: linear-gradient(180deg, #E8554C, #C3372F); box-shadow: 0 10px 22px -10px #E8554C; }
.tip { position: sticky; bottom: 84px; z-index: 9; display: flex; gap: 10px; align-items: flex-start; margin: 0 12px 10px; padding: 12px 12px 12px 10px;
  border-radius: 16px; background: var(--paper); color: var(--ink); box-shadow: 0 16px 30px -12px rgba(0, 0, 0, .7), 0 0 0 2px var(--lamp2); }
.tipKid { flex: none; width: 50px; text-align: center; }
.tipKid .fc { width: 46px; height: 46px; }
.tipKid small { display: block; margin-top: 4px; font: 800 12.5px/1 var(--disp); color: #0C6559; }
.tip.pop { animation: tipIn .35s ease-out; }
@keyframes tipIn { from { opacity: 0; transform: translateY(16px) scale(.97); } }
.tip p { margin: 0; flex: 1; font-size: 15.5px; line-height: 1.85; }
.tip button { flex: none; width: 30px; height: 30px; border: 0; border-radius: 9px; background: #EFE3C9; color: var(--ink); font-weight: 800; }

/* ---- «اتّهم» ---- */
.sheetWrap { position: fixed; inset: 0; z-index: 30; display: flex; align-items: flex-end; justify-content: center; background: rgba(4, 9, 18, .6); }
.sheet { width: 100%; max-width: 560px; padding: 18px 16px calc(16px + env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0; background: var(--paper); color: var(--ink); }
.sheet h3 { margin: 0; font: 800 21px/1.3 var(--disp); text-align: center; }
.sheet .sub { margin: 4px 0 14px; text-align: center; color: var(--muted); font-size: 14.5px; }
.accList { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 10px; }
.accList button { padding: 10px 6px; border: 2px solid var(--line); border-radius: 16px; background: #fff; font-weight: 800; font-size: 15.5px; }
.accList button .ph { width: 58px; height: 58px; }
.accList button .ph .pic { width: 56px; height: 56px; }
.accList button.out { opacity: .4; }
.cancel { display: block; width: 100%; margin-top: 14px; padding: 13px; border: 0; border-radius: 14px; background: #EFE3C9; font-weight: 800; font-size: 16px; color: var(--ink); }

/* ---- the truth ---- */
.reveal { position: fixed; inset: 0; z-index: 40; overflow-y: auto; max-width: none; background: radial-gradient(120% 60% at 50% 0%, #1A2E52 0%, #070E1B 70%); }
.rin { max-width: 560px; margin: 0 auto; }
.rtop { margin: 0; padding: calc(16px + env(safe-area-inset-top)) 16px 0; text-align: center; color: var(--mute2); font-size: 14px; font-weight: 700; }
.stage { position: relative; height: 210px; display: grid; place-items: center; overflow: hidden; }
.rays { position: absolute; inset: -90px; background: repeating-conic-gradient(from 0deg at 50% 52%, rgba(255, 200, 69, .14) 0 5deg, rgba(255, 200, 69, 0) 5deg 13deg);
  -webkit-mask-image: radial-gradient(circle at 50% 52%, #000 0 22%, transparent 62%); mask-image: radial-gradient(circle at 50% 52%, #000 0 22%, transparent 62%); }
.spot { position: absolute; top: 0; left: 50%; width: 340px; height: 210px; transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(255, 230, 160, .02), rgba(255, 230, 160, .26)); clip-path: polygon(44% 0, 56% 0, 92% 100%, 8% 100%); }
.culprit { position: relative; width: 136px; height: 136px; border-radius: 50%; overflow: hidden; display: grid; place-items: end center;
  background: radial-gradient(circle at 50% 35%, #FFEBB3, #F0B53A); box-shadow: 0 0 0 4px var(--lamp), 0 0 50px rgba(255, 200, 69, .65); }
.culprit .pic { width: 130px; height: 130px; margin-bottom: -6px; }
.stage .stamp { top: 34px; bottom: auto; left: calc(50% - 150px); font-size: 15px; padding: 5px 9px; border-width: 2.5px; background: rgba(10, 21, 39, .6); opacity: 0;
  transform: rotate(-14deg) scale(2.2); }
.reveal.on .stage .stamp { animation: stamp .45s .5s forwards; }
@keyframes stamp { to { opacity: .95; transform: rotate(-14deg) scale(1); } }
.verdict { text-align: center; padding: 0 16px; }
.verdict h2 { margin: 0; font: 800 31px/1.2 var(--disp); color: var(--lamp); text-shadow: 0 0 22px rgba(255, 200, 69, .45); }
.verdict p { margin: 6px 0 0; font-size: 18px; font-weight: 800; }
.conf { position: relative; margin: 14px 20px 14px; padding: 11px 14px; border-radius: 16px; background: rgba(255, 255, 255, .09); color: #E3E9F3; font-size: 16px; line-height: 1.7; text-align: center; }
.explain ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.explain li { display: flex; gap: 9px; align-items: flex-start; padding: 9px 10px; border-radius: 13px; background: #fff; border: 1px solid var(--line); font-size: 15.5px; line-height: 1.95; }
.explain li .sn { flex: none; width: 25px; height: 25px; margin-top: 4px; border-radius: 50%; display: grid; place-items: center; background: var(--night2); color: var(--lamp);
  font: 800 13px/1 var(--disp); }
.explain li .cks { display: inline-flex; flex-wrap: wrap; gap: 3px; margin-inline-end: 6px; vertical-align: -2px; }
.explain li .ck { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 3px; border-radius: 11px; border: 1.8px solid var(--red); color: var(--red);
  font: 800 12px/1 var(--disp); }
.explain li .ck.el { border-color: #3E9A6E; color: #2C7A54; font-family: var(--text); padding: 0 7px; }
.explain li .ck.ev { border-color: var(--night2); background: var(--night2); }
.explain li .ck.ev .pic { width: 15px; height: 15px; }
.explain li.guess { background: #F3F7FF; border-color: #CFDCF5; }
.explain li.fin { background: #FFF0C2; border-color: var(--lamp2); font-weight: 800; }
.rAll { display: block; width: 100%; margin-top: 10px; padding: 11px; border: 0; border-radius: 12px; background: #EFE3C9; color: var(--ink); font-weight: 800; font-size: 15px; }
.explain h3 .fc { width: 30px; height: 30px; box-shadow: 0 0 0 2px var(--lamp2); }
/* Firas comes in from the side and points at the culprit; his glasses flash as the stamp lands */
.rKid { position: absolute; z-index: 2; right: max(-8px, calc(50% - 222px)); bottom: -2px; width: 152px; opacity: 0; }
.reveal.on .rKid { animation: kidIn .5s .3s ease-out forwards; }
.reveal.on .rKid .kid::after { animation: spark .9s 1.05s ease-out; }
@keyframes kidIn { from { opacity: 0; transform: translateX(44px); } to { opacity: 1; transform: none; } }
.boss.mini { margin: 4px 12px 14px; align-items: center; }
.boss.mini > .pic { width: 46px; height: 46px; }
.boss.mini p { margin: 0; }
.boss.mini span { display: block; }
.finRow { display: flex; align-items: center; gap: 12px; padding: 0 16px; }
.stars.big { margin: 0; font-size: 30px; letter-spacing: 3px; text-shadow: 0 0 12px rgba(255, 200, 69, .55); }
.finRow .go { margin: 0 0 0 0; margin-inline-start: auto; padding: 14px 22px; font-size: 18px; }
.again { display: block; margin: 14px auto calc(26px + env(safe-area-inset-bottom)); padding: 10px 18px; border: 0; border-radius: 99px; background: rgba(255, 255, 255, .1);
  font-weight: 800; font-size: 15px; }

/* ---- «فراس» (his pictures: firas-hold, -point and -face.webp): a sparkle flashes on his glasses (.shine) when he
   speaks; over the rank card it flashes every few seconds ---- */
.kid { position: relative; display: block; }
.kid img { display: block; width: 100%; height: auto; -webkit-user-drag: none; user-select: none; }
.kid::after { content: ""; position: absolute; left: var(--gx); top: var(--gy); width: 24%; aspect-ratio: 1; opacity: 0; pointer-events: none;
  background: #fff; clip-path: polygon(50% 0, 59% 41%, 100% 50%, 59% 59%, 50% 100%, 41% 59%, 0 50%, 41% 41%); transform: translate(-50%, -50%) scale(0); }
.kid.hold { --gx: 70%; --gy: 31%; }
.kid.point { --gx: 74%; --gy: 30%; }
.kid.face { --gx: 74%; --gy: 40%; }
.kid.shine::after { animation: spark .9s ease-out; }
.heroKid .kid::after { animation: sparkLoop 8s 1.4s infinite; }
@keyframes spark { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0) rotate(0deg); } 35% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(45deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(90deg); } }
@keyframes sparkLoop { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0) rotate(0deg); } 4% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(45deg); }
  11%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(90deg); } }
/* his face in a lamp's light, round: the hint, the explanation */
.fc { display: inline-block; flex: none; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 32%, #FFE7A6, #F2B63C 70%);
  box-shadow: 0 0 0 2.5px var(--lamp2); }
.fc .kid, .fc .kid img { width: 100%; height: 100%; }
.fc .kid img { object-fit: cover; object-position: 50% 10%; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bar i { transition: none; }
  .reveal.on .stage .stamp { animation: none; opacity: .95; transform: rotate(-14deg); }
  .c.bad { animation: none; }
  .kid::after, .heroKid .kid::after, .reveal.on .rKid .kid::after, .tip.pop { animation: none; }
  .reveal.on .rKid { animation: none; opacity: 1; }
}