/* Статья «Можно или нельзя: за что штрафуют в ОАЭ». */

.art-alarm.is-violet{background:#f3ebfc;color:#7a35c2}
.art-alarm.is-violet i{background:#9b50df;box-shadow:0 0 0 0 rgba(155,80,223,.5)}

/* ---------- обложка: весы между «можно» и «нельзя» ---------- */

.mn-hero{position:relative;display:grid;place-items:center;min-height:360px;border-radius:34px;background:linear-gradient(160deg,#f3ebfc,#f7f8fa)}
.mn-stage{position:relative;width:min(250px,100%);height:250px}
.mn-main{position:absolute;inset:40px;display:grid;place-items:center;border-radius:50%;background:#1D1D1F;color:#fff;font-size:84px;box-shadow:0 0 0 12px #fff,0 26px 50px rgba(29,29,31,.25)}
.mn-main i{animation:mn-tilt 4.8s ease-in-out infinite;transform-origin:50% 30%}
@keyframes mn-tilt{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg)}}
.mn-sat{position:absolute;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#fff;font-size:28px;box-shadow:0 10px 22px rgba(33,44,62,.14);animation:mn-float 5s ease-in-out infinite}
.mn-sat.is-a{left:0;top:34px;color:#1782e8}
.mn-sat.is-b{right:4px;bottom:14px;color:#9b50df;animation-delay:-2.5s}
@keyframes mn-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.mn-chip{position:absolute;display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:999px;background:#fff;box-shadow:0 12px 28px rgba(33,44,62,.12);font-size:15px;font-weight:750}
.mn-chip i{font-size:19px}
.mn-chip.is-yes{left:7%;bottom:16%;color:#15754b}
.mn-chip.is-yes i{color:#1f9b64}
.mn-chip.is-no{right:6%;top:16%;color:#c4262c}
.mn-chip.is-no i{color:#e5484d}

/* ---------- счёт ---------- */

.mn-score{position:sticky;top:calc(max(14px,env(safe-area-inset-top)) + 70px);z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:22px 0 14px;padding:12px 12px 12px 20px;border-radius:22px;background:#1D1D1F;color:#fff;box-shadow:0 16px 36px rgba(29,29,31,.2)}
.mn-score strong{display:block;font-size:17px;font-variant-numeric:tabular-nums}
.mn-score small{color:rgba(255,255,255,.7);font-size:13px;font-variant-numeric:tabular-nums}
.mn-reveal{flex:none;min-height:42px;padding:0 16px;border:0;border-radius:999px;background:rgba(255,255,255,.14);color:#fff;font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.mn-reveal:hover{background:rgba(255,255,255,.22)}
.mn-reveal:focus-visible{outline:2px solid #9ccfff;outline-offset:2px}
.mn-score:not(.is-live){display:none}

/* ---------- карточки ---------- */

.mn-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:12px}
.mn-card{display:flex;flex-direction:column;gap:12px;padding:20px;border-radius:26px;background:var(--surface);transition:background .35s ease,transform .5s var(--ease)}
.mn-card__icon{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#fff;font-size:26px}
.mn-card__icon.is-red{color:#e5484d}
.mn-card__icon.is-green{color:#1f9b64}
.mn-card__text{margin:0;font-size:17px;font-weight:650;line-height:1.4;letter-spacing:-.01em}
.mn-card__buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:auto}
.mn-card__buttons button{min-height:48px;padding:0 12px;border:2px solid #d8dde5;border-radius:999px;background:#fff;color:var(--ink);font:inherit;font-size:16px;font-weight:700;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .3s var(--ease)}
.mn-card__buttons button:hover{border-color:#1f7ff2;color:var(--blue-ink);transform:translateY(-1px)}
.mn-card__buttons button:focus-visible{outline:2px solid #0071E3;outline-offset:3px}
.mn-card__buttons button:disabled{cursor:default;transform:none}
.mn-card__buttons button.is-picked{background:#1D1D1F;border-color:#1D1D1F;color:#fff}
.mn-card__answer{display:grid;gap:8px}
.mn-card__answer p{margin:0;font-size:15px;line-height:1.5}
.mn-card__answer small{color:var(--muted);font-size:12.5px;line-height:1.4}
.mn-card__verdict{display:inline-flex;align-items:center;gap:8px;font-size:18px!important;font-weight:800;letter-spacing:-.01em}
.mn-card__verdict::before{content:'';width:10px;height:10px;border-radius:50%;background:currentColor}
.mn-card__verdict.is-no{color:#c4262c}
.mn-card__verdict.is-yes{color:#15754b}
.mn-card__fine{display:flex;gap:9px;align-items:flex-start;padding:11px 13px;border-radius:14px;background:#fff;font-weight:650}
.mn-card__fine i{flex:none;margin-top:2px;color:#e5484d;font-size:18px}

/* Без скрипта ответы видны сразу; в игре — после выбора. */
.mn-game .mn-card__answer{display:none}
.mn-game .mn-card.is-done .mn-card__answer{display:grid;animation:mn-open .45s var(--ease) both}
@keyframes mn-open{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.mn-card.is-done.is-right{background:#e6f6ee}
.mn-card.is-done.is-wrong{background:#fff0f0}
.mn-card.is-shown-only{background:var(--surface)}
:not(.mn-game)>.mn-cards .mn-card__buttons{display:none}

.mn-result{margin:16px 0 0;padding:18px 20px;border-radius:22px;background:#f3ebfc;color:#4b1f7a;font-size:17px;font-weight:700;line-height:1.45}
.mn-result[hidden]{display:none}

/* ---------- шкала штрафов ---------- */

.mn-scale{margin-top:clamp(64px,8vw,112px);padding:clamp(28px,5vw,56px);border-radius:40px;background:var(--surface)}
.mn-bars{display:grid;gap:10px;margin:24px 0 0;padding:0;list-style:none}
.mn-bars li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:6px 14px;padding:14px 16px;border-radius:18px;background:#fff}
.mn-bars span{font-size:15px;font-weight:650;line-height:1.35}
.mn-bars strong{font-size:17px;font-variant-numeric:tabular-nums;white-space:nowrap}
.mn-bars small{color:var(--muted);font-size:12px;font-weight:600}
.mn-bars i{grid-column:1/-1;height:8px;border-radius:999px;background:linear-gradient(90deg,#ffd9d9,#e5484d) 0 0/var(--w) 100% no-repeat,#f1f2f5;transition:background-size 1.1s var(--ease)}
.mn-bars li.is-armed i{background-size:0 100%,auto}

/* ---------- три правила ---------- */

.mn-rules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:22px}
.mn-rules article{display:flex;flex-direction:column;gap:10px;padding:22px;border-radius:26px;background:var(--surface)}
.mn-rules span{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;font-size:25px}
.mn-rules span.is-violet{background:#f3ebfc;color:#9b50df}
.mn-rules span.is-red{background:#fff0f0;color:#e5484d}
.mn-rules strong{font-size:18px;line-height:1.3;letter-spacing:-.015em}
.mn-rules p{margin:0;color:var(--muted);font-size:15px;line-height:1.5}

@media (max-width:900px){
  .mn-rules{grid-template-columns:1fr}
}
@media (max-width:700px){
  .mn-score{top:calc(max(14px,env(safe-area-inset-top)) + 64px)}
}
@media (max-width:560px){
  .mn-hero{min-height:300px}
  .mn-stage{transform:scale(.85)}
  .mn-chip{font-size:14px}
  .mn-scale{border-radius:30px;margin-left:-4px;margin-right:-4px}
  .mn-score{padding-left:16px}
  .mn-reveal{padding:0 12px;font-size:13px}
}
@media (max-width:360px){
  .mn-score{flex-direction:column;align-items:stretch}
}
@media (prefers-reduced-motion:reduce){
  .mn-main i,.mn-sat{animation:none}
  .mn-card,.mn-bars i{transition:none}
  .mn-game .mn-card.is-done .mn-card__answer{animation:none}
}