/* Makrūh / Shurūq full-screen notice — same design as the analogue Salah Clock.
   Sizes use --u (set by companion-makrooh.js with the analogue clock's own sizing rule). */
#mkOverlay{
  position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;
  display:none;-webkit-box-align:center;-webkit-align-items:center;align-items:center;
  -webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;
  text-align:center;color:#eef3fb;font-family:"Roboto",Helvetica,Arial,sans-serif;--u:10px;
  -webkit-animation:mkfade .8s ease;animation:mkfade .8s ease;
}
#mkOverlay.show{display:-webkit-box;display:-webkit-flex;display:flex;}
#mkOverlay.makrooh{background:radial-gradient(ellipse at 50% 42%,#7a1414 0%,#4d0d0d 62%,#2c0707 100%);}
#mkOverlay.shuruq{background:radial-gradient(ellipse at 50% 42%,#0e5c3f 0%,#073a29 62%,#06281c 100%);}
#mkOverlay .m-inner{max-width:90vw;padding:calc(4 * var(--u));}
#mkOverlay .m-icon{font-size:calc(11 * var(--u));line-height:1;}
#mkOverlay .m-title{font-family:"Roboto Slab",Georgia,serif;font-weight:700;font-size:calc(7.5 * var(--u));margin-top:calc(2 * var(--u));color:#f3d98b;}
#mkOverlay.makrooh .m-title{color:#ffd9a8;}
#mkOverlay.shuruq .m-title{color:#c9f5d8;}
#mkOverlay .m-en{font-size:calc(3.2 * var(--u));margin-top:calc(2.5 * var(--u));max-width:calc(110 * var(--u));margin-left:auto;margin-right:auto;}
#mkOverlay .m-foot{display:-webkit-inline-box;display:-webkit-inline-flex;display:inline-flex;-webkit-box-align:baseline;-webkit-align-items:baseline;align-items:baseline;
  margin-top:calc(3 * var(--u));padding-top:calc(2 * var(--u));border-top:2px solid #d4af5a;}
#mkOverlay .m-foot-lbl{margin-right:calc(2 * var(--u));font-size:calc(3 * var(--u));color:#d4af5a;font-weight:600;letter-spacing:.06em;}
#mkOverlay .m-foot-val{font-family:"Roboto Slab",Georgia,serif;font-size:calc(5.4 * var(--u));font-weight:700;color:#fff;font-variant-numeric:tabular-nums;}
#mkOverlay .m-clock{position:absolute;top:calc(3 * var(--u));right:calc(4 * var(--u));
  top:calc(3 * var(--u) + env(safe-area-inset-top,0px));right:calc(4 * var(--u) + env(safe-area-inset-right,0px));
  font-family:"Roboto Slab",Georgia,serif;font-weight:700;font-size:calc(4.4 * var(--u));color:rgba(255,255,255,.92);font-variant-numeric:tabular-nums;}
#mkOverlay .sunico{display:inline-block;width:1em;height:1em;color:#ffd9a8;}
#mkOverlay .sunico.huge{width:1.6em;height:1.6em;margin:0;color:#ffd9a8;-webkit-filter:drop-shadow(0 0 2vh rgba(245,185,74,.35));filter:drop-shadow(0 0 2vh rgba(245,185,74,.35));}
@-webkit-keyframes mkfade{from{opacity:0}to{opacity:1}}
@keyframes mkfade{from{opacity:0}to{opacity:1}}