/* «لقطات الكاميرا»: the board. A shelf of camera frames the player reorders by tapping two of them, and a viewer
   that shows one frame big, browses them in the player's order, or plays them as a film. */
:root { --accent: #4CC9F0; }

.shelf { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.slotBox { position: relative; }
.slotNo { position: absolute; top: -8px; inset-inline-start: -4px; z-index: 2; width: 24px; height: 24px; border-radius: 8px; background: var(--sun); color: var(--sunInk); display: grid; place-items: center; font: 800 .9rem/1 var(--display); box-shadow: 0 2px 0 var(--sunD); }
.frameCard { display: block; width: 100%; padding: 0; border: 3px solid var(--line); border-radius: 12px; background: #0B1A33; overflow: hidden; position: relative; }
.frameCard svg { display: block; width: 100%; height: auto; }
.frameCard .letter { position: absolute; bottom: 4px; inset-inline-end: 4px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 7px; background: rgba(0, 0, 0, .65); color: #fff; font: 800 .9rem/22px var(--display); }
.frameCard.sel { border-color: var(--sun); box-shadow: 0 0 0 3px rgba(255, 210, 63, .35); }
.frameCard.bad { border-color: var(--bad); }
.frameCard.okMark { border-color: var(--ok); }
.ctl { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* the scene */
.scene .wall { fill: #2E4468; }
.scene .floor { fill: #1B2B46; }
.scene .base { fill: #22355A; }
.scene .cam { fill: rgba(0, 0, 0, .55); }
.scene .camTxt { fill: #fff; font: 700 9px "Almarai", sans-serif; }
.scene .camDot { fill: #FF6B6B; }
.scene .wframe { fill: #9FB7D9; }
.scene .wcross { stroke: #9FB7D9; stroke-width: 2; }
.scene .door { fill: #5A4632; stroke: #3E2E1F; stroke-width: 1.5; }
.scene .knob { fill: #C9A227; }
.scene .wood { fill: #5A4632; }
.scene .woodD { fill: #4E3920; }
.scene .tabletop { fill: #6B4F2E; }
.scene .brass { fill: #C9A227; }
.scene .glass { fill: rgba(255, 255, 255, .14); stroke: #D8E3F5; stroke-width: 1; }
.scene .sand { fill: #F5B700; }
.scene .wax { fill: #FFF3C4; }
.scene .flame { fill: #FFB347; }
.scene .flameIn { fill: #FFE066; }
.scene .plate { fill: #D7DDE6; }
.scene .cake { fill: #F7A1B3; stroke: #C2185B; stroke-width: 1; }
.scene .counter { fill: #4F6A96; }
.scene .ice { fill: rgba(190, 230, 255, .85); stroke: #7EC8FF; stroke-width: 1; }
.scene .puddle { fill: rgba(126, 200, 255, .55); }
.scene .shelfW { fill: #8B6A3E; }
.scene .item { color: #FFD23F; }
.scene .item .rib { fill: #FF6B6B; }
.scene .item .face { fill: #0F1C2E; }
.scene .gone { fill: none; stroke: #FF6B6B; stroke-width: 1.5; stroke-dasharray: 3 2; }
.scene .head { fill: #F3D9C2; }
.scene .pname { fill: #fff; font: 700 10px "Almarai", sans-serif; text-anchor: middle; }
.scene .star { fill: #F3F7FF; }

/* the viewer */
.sheet.viewer { align-items: start; padding-top: max(16px, env(safe-area-inset-top, 0px)); }
.viewCard { width: min(100%, 520px); background: var(--panel); border: 1px solid var(--line); border-radius: 22px; padding: 12px; box-shadow: 0 20px 50px rgba(0, 0, 0, .5); }
.viewTop { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.viewTop #viewPos { color: var(--soft); font-weight: 700; flex: 1; }
.letterBig { width: 34px; height: 34px; border-radius: 10px; background: var(--sun); color: var(--sunInk); display: grid; place-items: center; font: 800 1.2rem/1 var(--display); }
.viewFrame { position: relative; border-radius: 14px; overflow: hidden; border: 3px solid var(--line); background: #0B1A33; }
#viewSvg { display: block; width: 100%; height: auto; }
.viewFrame.playing { border-color: var(--ok); }
.alert { position: absolute; inset: 0; background: rgba(5, 10, 20, .82); display: grid; place-content: center; text-align: center; padding: 14px; }
.alert p { margin: 0 0 6px; font: 800 1.05rem/1.5 var(--display); color: #fff; }
.alert.bad p { color: var(--bad); }
.alert .sheetBtns { margin-top: 6px; }
.alert .who { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.alert .who button { border: 2px solid #fff; border-radius: 999px; padding: 6px 14px; background: var(--c); color: #fff; font: 800 1rem/1.2 var(--display); }
.viewNav { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; }
.prog { display: flex; gap: 4px; margin-top: 8px; }
.prog i { flex: 1; height: 6px; border-radius: 3px; background: var(--panel2); }
.prog i.on { background: var(--ok); }
.prog i.bad { background: var(--bad); }