/* البوابة / (v5 s1، المرحلة ١٣): الشعار الثلاثي وهالته ونقاطه، والعبارة، وشريط الحالة، والبوابتان — قياسات v5 بـ rem فتطابق
   اللقطة على 390×844. المسافات بين العبارة والشريط، والشريط والبوابتين، والبوابتين وأسفل الشاشة متساوية (هوامش auto) */
.home .wrap{display:flex;flex-direction:column;gap:.75rem;min-height:100vh;min-height:100svh;padding:0 1rem var(--safe);text-align:center}
.home .wrap::after{content:"";height:0}
.alert.resume{align-self:center;width:max-content;max-width:100%;margin:.75rem 0 0;padding:.375rem .875rem;border-radius:999px;font-size:.8125rem}
.lgw{position:relative;flex:none;display:grid;place-items:center;height:16.375rem;margin-top:.625rem;overflow:hidden;overflow:clip}
.halo{position:absolute;left:50%;top:50%;width:13.875rem;height:13.25rem;margin:-7.4375rem 0 0 -6.9375rem;animation:turn 16s linear infinite}
.jw{position:absolute;inset:3% 2%;animation:wob 3.4s ease-in-out infinite alternate}
.j1,.j2,.dr{position:absolute;border-radius:50%}
.j1{inset:0;border-radius:47% 53% 61% 39%/44% 38% 62% 56%;background:radial-gradient(circle at 30% 24%,#FFFBE0 0 7%,#FFEC94 15%,#FFD84A 38%,#FFBF16 64%,#F0A200 100%);box-shadow:inset .8125rem 1rem 1.375rem #fffce1bf,inset -1rem -1.3125rem 1.75rem #aa690057,0 1rem 1.75rem -.875rem #ffb4008c}
.j1::before,.j1::after{content:"";position:absolute;border-radius:50%;transform:rotate(-28deg);background:radial-gradient(closest-side,#ffffffcc,#ffffff00)}
.j1::before{width:30%;height:16%;top:13%;left:20%}
.j1::after{width:12%;height:7%;bottom:18%;right:18%;opacity:.7}
.j2{inset:-2%;border-radius:58% 42% 44% 56%/50% 60% 40% 50%;border:.3125rem solid #ffffff8c;border-left-color:#ffffff26;border-bottom-color:#5cc3ff59;animation:turn 9s linear infinite reverse}
.d1{width:1.3125rem;height:1.3125rem;top:-2px;left:54%;background:radial-gradient(circle at 34% 30%,#FFC08F,#EA7317 70%);box-shadow:inset 3px 3px 5px #ffdebeb3,inset -3px -4px 6px #78280059,0 6px 10px -3px #ea731780}
.d2{width:.9375rem;height:.9375rem;bottom:1rem;right:.625rem;background:radial-gradient(circle at 34% 30%,#C6ECFF,#28AFFA 70%);box-shadow:inset 2px 2px 4px #dcf5ffb3,inset -2px -3px 5px #003c784d,0 6px 10px -3px #28affa80}
.d3{width:.75rem;height:.75rem;bottom:2.5rem;left:2px;background:radial-gradient(circle at 34% 30%,#FFF2A8,#FFBA08 70%);box-shadow:inset 2px 2px 4px #fffad7cc,inset -2px -3px 4px #a064004d}
.d4{width:.5rem;height:.5rem;top:2.875rem;right:-4px;background:radial-gradient(circle at 34% 30%,#FFC08F,#EA7317 70%)}
.lg3,.lg-up{position:relative}
.lg3{width:10.5rem;height:auto;margin-top:-1.125rem;filter:drop-shadow(0 1rem .875rem #13192a4d);animation:bob 4.2s ease-in-out infinite}
.lg-up{display:grid;place-items:center;width:7.5rem;height:7.5rem;border-radius:1.75rem;object-fit:cover;background:#fff;box-shadow:var(--clay-w);font:700 3rem var(--name);color:var(--orange)}
@keyframes turn{to{transform:rotate(360deg)}}
@keyframes wob{from{transform:scale(1.035,.965)}to{transform:scale(.965,1.035)}}
@keyframes bob{50%{transform:translateY(-5px)}}
.home .slg{margin-top:-.625rem}
.status{display:flex;flex-direction:column;align-items:center;gap:1px;margin:auto -1rem 0;padding:.5rem;border-block:1px solid #13192a1a;color:var(--ok)}
.status b{font:700 .9375rem/1.3 var(--ar)}
.status small{font-size:.6875rem;font-weight:500;color:var(--muted);white-space:nowrap}
.pbt{display:grid;gap:.75rem;margin-block:auto}
.pb{display:flex;align-items:center;gap:.75rem;min-height:5.5rem;padding:.75rem .875rem .75rem .75rem;border-radius:1.625rem;text-align:start;color:#fff;background:linear-gradient(150deg,#FF9F55,#EA7317 72%);box-shadow:var(--clay-o);transition:transform var(--t)}
.pb.dine{color:var(--navy);background:linear-gradient(150deg,#FFF,#FFF1D6);box-shadow:var(--clay-w)}
.pb:active{transform:translateY(1px) scale(.985)}
.pi{flex:none;display:grid;place-items:center;width:3.875rem;height:3.875rem;border-radius:1.25rem;background:#ffffff33;box-shadow:inset .1875rem .25rem .4375rem #ffffff73,inset -.1875rem -.3125rem .5625rem #78280038}
.dine .pi{background:#FFE7C2;box-shadow:inset .1875rem .25rem .4375rem #ffffffd9,inset -.1875rem -.3125rem .5625rem #aa641433}
.pi svg{width:3.375rem;height:3.375rem;overflow:visible}
.pt{flex:1;min-width:0}
.pt b{display:block;font:700 1.125rem/1.25 var(--ar)}
.pt small{display:block;margin-top:.1875rem;font-size:.71875rem;font-weight:500;line-height:1.55;opacity:.95}
.dine small{color:var(--muted)}
.go{flex:none;display:grid;place-items:center;width:2.125rem;height:2.125rem;border-radius:50%;font:800 1.0625rem var(--ar);color:var(--navy);background:var(--g-yellow);box-shadow:var(--clay-y)}
.dine .go{color:var(--yellow);background:var(--g-navy);box-shadow:var(--clay-n)}
.ic-bob{animation:pinbob 1.8s ease-in-out infinite}
.ic-rip{transform-box:fill-box;transform-origin:center;animation:prip 1.8s ease-out infinite}
.ic-scan{animation:scan 2.2s ease-in-out infinite alternate}
@keyframes pinbob{50%{transform:translateY(-3px)}}
@keyframes prip{from{transform:scale(.5);opacity:.9}to{transform:scale(1.4);opacity:0}}
@keyframes scan{to{transform:translateY(24px)}}
@media (min-width:600px){.home .wrap{max-width:30rem;margin:0 auto}.status{margin-inline:0}}
@media (min-width:1024px){
.home .wrap{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr auto auto auto 1fr;column-gap:3rem;max-width:1000px;align-items:center}
.home .wrap::after{display:none}
.alert.resume{grid-column:1/-1;grid-row:1;align-self:end}
.lgw,.home .slg,.status{grid-column:1}
.lgw{grid-row:2;height:20rem}
.home .slg{grid-row:3}
.status{grid-row:4;margin:.75rem 0 0;border-radius:1rem}
.pbt{grid-column:2;grid-row:2/5;margin:0}
.halo{width:17rem;height:16.25rem;margin:-8.75rem 0 0 -8.5rem}
.lg3{width:13rem}
}