/* «خمّن العلامة» v2 — واجهة متجر بالليل (٢٠٢٦/١٠/١٦ بطلب المالك: «تصميم غير لازم»).
   شكل فقط: مظلّة مخطّطة فوق واجهة نيون، لافتة التشويه نيون، ٤ لمبات بنقاط كلّ مرحلة.
   النسخة القديمة: scratchpad/brands.pre-show.css */
.xg-br .xg{--neon:#ff4fa3;--neon2:#43e3ff;
  background:radial-gradient(70% 60% at 50% 35%,#2b1150 0%,#140a2e 55%,#07051a 100%);position:relative;overflow:hidden}
.xg-br .xg::before{content:'';position:absolute;left:0;right:0;bottom:0;height:22%;pointer-events:none;
  background:linear-gradient(0deg,rgba(67,227,255,.12),transparent),repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 2px,transparent 2px 9cqw)}
.xg-br .xg > *{position:relative;z-index:1}
.xg-br .xg-title b{font-size:max(28px,7.4cqh);color:#fff;text-shadow:0 0 .35em var(--neon),0 .1em 0 #5a0d3a}
.xg-br .xg-title small{color:#c8f6ff;font-weight:900;font-size:max(14px,2.4cqh)}
.xg-br .xg-chip{border-color:rgba(67,227,255,.5);box-shadow:0 0 2cqh rgba(67,227,255,.25)}
.xg-br .xg-clock{background:conic-gradient(var(--neon2) calc(var(--p) * 360deg),rgba(255,255,255,.1) 0)}

.br-stage{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) clamp(220px,24cqw,360px);gap:2cqw}
.br-board{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.2cqh;min-height:0}

/* لافتة التشويه — نيون وردي */
.br-mode{font-weight:900;font-size:max(18px,3.8cqh);color:#fff;padding:.5cqh 2.6cqw;border-radius:1.6cqh;border:3px solid var(--neon);
  text-shadow:0 0 .4em var(--neon);box-shadow:0 0 2.4cqh rgba(255,79,163,.55),inset 0 0 2cqh rgba(255,79,163,.35);background:rgba(20,6,30,.6)}

/* واجهة المحلّ: مظلّة مخطّطة + إطار نيون */
.br-shop{position:relative;display:flex;flex-direction:column;align-items:center}
.br-awn{display:block;width:calc(min(54cqh,40cqw) + 6cqh);height:7cqh;margin-bottom:-1.2cqh;z-index:2;position:relative;
  background:repeating-linear-gradient(90deg,#ff4f6e 0 4.5cqh,#fff4f6 4.5cqh 9cqh);border-radius:1cqh 1cqh 0 0;
  clip-path:polygon(0 0,100% 0,100% 70%,97% 100%,92% 70%,87% 100%,82% 70%,77% 100%,72% 70%,67% 100%,62% 70%,57% 100%,52% 70%,47% 100%,42% 70%,37% 100%,32% 70%,27% 100%,22% 70%,17% 100%,12% 70%,7% 100%,3% 70%,0 100%);
  filter:drop-shadow(0 .8cqh .6cqh rgba(0,0,0,.45))}
.br-frame{position:relative;width:min(54cqh,40cqw);aspect-ratio:1;border-radius:2.4cqh;background:#fff;overflow:hidden;
  box-shadow:0 0 0 .7cqh #fff,0 0 0 1.3cqh var(--neon2),0 0 5cqh rgba(67,227,255,.55),0 3cqh 6cqh rgba(0,0,0,.6)}
.br-frame::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(125deg,rgba(255,255,255,.35) 0 18%,transparent 34%)}
.br-pic{position:absolute;inset:0;display:grid;place-items:center;transition:filter .9s ease,transform .9s cubic-bezier(.3,1,.4,1),opacity .4s}
.br-pic img{width:86%;height:86%;object-fit:contain}
.br-px{position:absolute;inset:7%;width:86%;height:86%;image-rendering:pixelated}
.br-px[hidden]{display:none}

/* ٤ لمبات بالنقاط — الحاليّة ذهبيّة كبيرة، اللي راحت باهتة */
.br-steps{display:flex;align-items:center;gap:1.2cqw;padding:.8cqh 1.6cqw;border-radius:999px;background:rgba(10,6,26,.7);border:2px solid rgba(255,255,255,.12)}
.br-steps > span{font-weight:900;font-size:max(14px,2.4cqh);color:#c8f6ff}
.br-steps i{display:grid;place-items:center;min-width:max(44px,7.4cqh);height:max(34px,5.4cqh);padding:0 .6em;border-radius:999px;font-style:normal;
  background:rgba(255,255,255,.1);color:rgba(255,255,255,.75);transition:transform .3s,background .3s}
.br-steps i b{font-size:max(15px,2.8cqh);font-weight:900;direction:ltr}
.br-steps i.on{background:rgba(255,255,255,.05);color:rgba(255,255,255,.3);text-decoration:line-through}
.br-steps i.cur{background:linear-gradient(180deg,#fff1b8,#ffc94a);color:#2a1600;text-decoration:none;transform:scale(1.18);box-shadow:0 0 2.4cqh rgba(255,201,74,.7)}

.br-answer{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);padding:2cqh 4cqw;background:#120826;border:.5cqh solid var(--neon2);border-radius:2cqh;text-align:center;
  box-shadow:0 0 5cqh rgba(67,227,255,.6),0 2cqh 5cqh rgba(0,0,0,.6);animation:xgPop .45s}
.br-answer[hidden]{display:none}
.br-answer small{display:block;color:#c8f6ff;font-weight:900;font-size:max(14px,2.6cqh)}
.br-answer b{font-size:max(40px,10cqh);line-height:1.1;font-weight:900;color:#fff;text-shadow:0 0 .3em var(--neon)}

/* عرفوها — زجاج غامق بنيون */
.xg-br .br-side{transform:none;background:rgba(12,6,30,.75);border:2px solid rgba(67,227,255,.4);border-radius:2.4cqh;backdrop-filter:blur(6px);color:#fff;box-shadow:0 0 3cqh rgba(67,227,255,.15)}
.xg-br .br-side h3{color:var(--neon2);font-size:max(18px,3.4cqh);font-weight:900;text-shadow:0 0 .4em rgba(67,227,255,.6)}
.xg-br .br-side li{background:rgba(255,255,255,.07);color:#fff;font-weight:900;font-size:max(14px,2.6cqh)}
.xg-br .br-side li.lead{background:linear-gradient(90deg,rgba(255,201,74,.3),rgba(255,201,74,.08));border:1.5px solid #ffc94a}
.xg-br .br-side li b{color:#ffc94a}
.xg-br .br-side li.empty{background:none;color:#c8f6ff;text-align:center;justify-content:center}
@media(max-aspect-ratio:1/1){.br-stage{grid-template-columns:1fr}.br-side{display:none}.br-frame{width:min(60cqw,46cqh)}.br-awn{width:calc(min(60cqw,46cqh) + 6cqh)}}