/* بطاقات الإشارات (pages/flash.html): flip cards. Colours come from the style.css tokens; the sign
   plate reuses .plate so it stays white in dark mode, like on the sign pages. */
#F>section{display:none}
#F[data-state=intro] .intro,#F[data-state=play] .play,#F[data-state=done] .done{display:block}
/* intro */
.fmodes{margin-top:22px}
.fmodes a{min-height:44px}
.fnote{margin-top:14px;max-width:40em}
.fpv{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.fpv .plate{width:72px;height:72px}
.fpv .plate img{max-width:58px;max-height:58px}
.fpv:empty{display:none}
@media(min-width:900px){.fpv{gap:14px}.fpv .plate{width:104px;height:104px;border-radius:18px}.fpv .plate img{max-width:84px;max-height:84px}}
/* play */
.fmeter{margin:0 0 16px}
.fwrap{max-width:560px;margin:0 auto}
.fwrap.in{animation:fin .22s ease-out}
@keyframes fin{from{opacity:.4;transform:translateY(6px)}}
.fcard{display:block;width:100%;padding:0;border:0;background:none;border-radius:22px;cursor:pointer;text-align:center;
white-space:normal;user-select:none;-webkit-user-select:none;perspective:1400px}
.fcard img{pointer-events:none}
.fin{display:grid;transform-style:preserve-3d;transition:transform .45s cubic-bezier(.4,0,.2,1)}
.fcard.on .fin{transform:rotateY(180deg)}
.fcard.snap .fin{transition:none}
.fface{grid-area:1/1;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
padding:18px;min-height:300px;background:var(--raise);border:1px solid var(--line);border-radius:22px;box-shadow:var(--sh);
backface-visibility:hidden;-webkit-backface-visibility:hidden}
.fback{transform:rotateY(180deg)}
.fcard:hover .fface{border-color:var(--line2)}
.fcard .plate{width:100%;height:clamp(190px,52vw,300px);border-radius:16px}
.fcard .plate img{display:block;max-width:78%;max-height:82%}
.fcard .fback .plate{width:92px;height:92px;border-radius:14px}
.fcard .fback .plate img{max-width:74px;max-height:74px}
.fhint{color:var(--dim);font-size:.9rem}
.ftag{position:absolute;top:12px;inset-inline-start:12px;padding:1px 10px;border-radius:999px;border:1px solid var(--line);
color:var(--dim);font-size:.78rem;line-height:1.7}
.ftag:empty{display:none}
.fm{display:block;font:700 1.2rem/1.6 Kufi,Plex,sans-serif;max-width:30em}
.fg{color:var(--dim);font-size:.85rem}
.frow{display:flex;justify-content:center;margin-top:12px}
.fl-say{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 20px;border-radius:999px;border:1.5px solid var(--line2);
background:var(--raise);cursor:pointer;font-weight:600;white-space:nowrap}
.fl-say:hover,.fl-say.on{border-color:var(--ink)}
.fl-say.on{background:var(--cta);color:var(--on-cta);border-color:var(--cta)}
.fans{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:560px;margin:12px auto 0}
.fans .btn{min-height:56px;font-size:1.05rem;padding:0 10px;gap:10px}
.fans .wide{grid-column:1/-1}
.fans .no{border-color:var(--bad);color:var(--bad)}
.fans .no:hover{border-color:var(--bad);box-shadow:inset 0 0 0 1px var(--bad)}
.fans .yes{background:var(--ok);border-color:var(--ok);color:var(--on-stat)}
.fans .yes:hover{border-color:var(--ok);opacity:.9}
.fans kbd{display:none;font-size:.8rem;border-color:currentColor;opacity:.7}
@media(hover:hover) and (pointer:fine){.fans kbd{display:inline-block}}
/* done */
.fh2{margin-top:36px;font-size:1.2rem}
.fmiss{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px;max-width:760px}
.fmiss li{display:flex;gap:14px;align-items:flex-start;padding:14px;background:var(--raise);border:1px solid var(--line);border-radius:16px}
.fmiss li>div{min-width:0;flex:1}
.fmiss b{display:block;color:var(--dim);font:600 .85rem/1.5 Plex,sans-serif}
.fmiss p{line-height:1.7}
.fmiss .ml{margin-top:6px}
/* phones: focus mode while a session runs, like the exam player */
@media(max-width:900px){
body:has(#F[data-state=play]) .tabs,body:has(#F[data-state=play]) footer,body:has(#F[data-state=play]) .crumbs{display:none}
body:has(#F[data-state=play]){padding-bottom:0}
.fmeter{margin-bottom:12px}
.fface{padding:16px;min-height:280px;gap:12px}
}
@media(max-width:360px){.fans .btn{font-size:1rem;padding:0 6px}}
@media(prefers-reduced-motion:reduce){.fwrap.in{animation:none}.fin{transition:none}}