/* ---------- мини-игры: вертикальный кадр 9:16 ---------- */
.mg{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;background:radial-gradient(80% 60% at 50% 40%,#1a1426,#07060a);touch-action:none;user-select:none;-webkit-user-select:none}
.mg-top{flex:none;display:flex;align-items:center;gap:10px;height:44px;padding:0 10px}
.mg-title{flex:1;min-width:0;font-family:var(--px);font-size:10px;line-height:1.4;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mg-score{font-family:var(--px);font-size:11px;color:var(--yellow);white-space:nowrap}
.mg-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;gap:24px;padding:4px}
.mg-frame{position:relative;flex:none;background:#000;box-shadow:0 0 0 3px var(--edge),0 0 0 6px #0d0b12,0 20px 60px rgba(0,0,0,.6)}
#mg-canvas{display:block;width:100%;height:100%;image-rendering:pixelated}
.mg-dom{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.mg-dom .on{pointer-events:auto}
.mg-side{width:220px;flex:none;font-size:13.5px;line-height:1.5;color:var(--muted)}
.mg-side h4{margin:0 0 8px;font-family:var(--px);font-size:9px;font-weight:400;color:var(--text-2);line-height:1.5}
.mg-side .blk{padding:12px;margin-bottom:10px;background:rgba(20,17,27,.8);box-shadow:inset 0 0 0 2px var(--edge)}
.mg-side b{color:var(--text)}
.mg-touch{flex:none;display:none;gap:8px;padding:6px 10px calc(10px + var(--safe-b))}
.mg-touch.on{display:grid}
.tbtn{display:grid;place-items:center;min-height:62px;font-family:var(--px);font-size:11px;color:var(--text);background:#1d1828;border:0;box-shadow:inset 0 0 0 2px var(--edge),inset 0 -5px 0 #120f18;touch-action:none;user-select:none;-webkit-user-select:none}
.tbtn.down,.tbtn:active{background:#2c2540;box-shadow:inset 0 0 0 2px var(--yellow)}
.tbtn.acc{background:var(--yellow);color:#1a1300;box-shadow:inset 0 -5px 0 var(--yellow-d)}
.tbtn.acc.down{background:#ffe27a}
.tbtn small{display:block;font-family:var(--body);font-size:10px;color:var(--muted);margin-top:2px}

/* текстовые варианты внутри кадра (квиз, хуки, комменты) */
.mg-q{position:absolute;left:4%;right:4%;padding:8px 10px;font-size:13px;line-height:1.4;color:var(--text);background:rgba(13,11,18,.92);box-shadow:inset 0 0 0 2px var(--edge)}
.mg-opts{position:absolute;left:4%;right:4%;display:grid;gap:6px}
.mg-opt{padding:9px 10px;font-size:12.5px;line-height:1.35;text-align:left;color:var(--text);background:#1d1828;border:0;box-shadow:inset 0 0 0 2px var(--edge);cursor:pointer;pointer-events:auto;display:flex;gap:8px;align-items:flex-start}
.mg-opt kbd{flex:none;font-family:var(--px);font-size:8px;color:var(--muted);padding-top:2px}
.mg-opt:hover{box-shadow:inset 0 0 0 2px var(--edge-2)}
.mg-opt.good{box-shadow:inset 0 0 0 2px var(--green);background:#16301f}
.mg-opt.bad{box-shadow:inset 0 0 0 2px var(--red);background:#341416}
.mg-opt.mid{box-shadow:inset 0 0 0 2px var(--yellow);background:#2e2610}
.mg-expl{position:absolute;left:4%;right:4%;padding:8px 10px;font-size:12px;line-height:1.45;color:#d9f5e2;background:rgba(13,30,20,.95);box-shadow:inset 0 0 0 2px #2f6b47}
.mg-expl.bad{color:#ffd9d6;background:rgba(40,12,14,.95);box-shadow:inset 0 0 0 2px #7a2a26}
.mg-sub{position:absolute;left:5%;right:5%;text-align:center;font-size:12px;line-height:1.35;color:#fff;text-shadow:0 1px 0 #000,0 0 6px #000}
.mg-tag{position:absolute;font-family:var(--px);font-size:7px;line-height:1.4;padding:3px 5px;background:rgba(0,0,0,.7);color:var(--text-2)}

/* карточки интро / паузы / результатов */
.mg-card{position:absolute;inset:0;z-index:5;display:grid;place-items:center;padding:16px;background:rgba(6,4,10,.72);animation:fadeIn .2s}
.mg-card-in{width:min(440px,100%);max-height:100%;display:flex}
.mg-card-in>.pi{flex:1;overflow-y:auto;padding:18px}
.mg-card h3{margin:0 0 6px;font-family:var(--px);font-size:13px;font-weight:400;line-height:1.4}
.mg-card .mg-stagename{font-family:var(--px);font-size:8px;color:var(--yellow);margin-bottom:10px}
.mg-card p{margin:0 0 12px;font-size:14.5px;line-height:1.5;color:var(--text-2)}
.mg-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.mg-chip{padding:5px 8px;font-size:12px;background:#1f2a1f;color:#bff0cd;box-shadow:inset 0 0 0 1px #2f6b47}
.mg-chip.off{background:#221d2f;color:var(--muted);box-shadow:inset 0 0 0 1px var(--edge)}
.mg-btns{display:grid;gap:8px;margin-top:6px}
.mg-grade{display:flex;align-items:center;gap:14px;margin:4px 0 12px}
.mg-grade b{display:grid;place-items:center;width:64px;height:64px;font-family:var(--px);font-size:30px;font-weight:400;background:var(--c);color:#14111b}
.mg-grade div{font-family:var(--px);font-size:22px;line-height:1.3}
.mg-grade small{display:block;font-family:var(--body);font-size:13px;color:var(--muted)}
.mg-break{display:grid;gap:5px;margin-bottom:12px}
.mg-break div{display:grid;grid-template-columns:1fr auto;font-size:13px;color:var(--text-2)}
.mg-break em{font-style:normal;font-family:var(--px);font-size:9px;color:var(--green)}
.mg-rew{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:12px;font-family:var(--px);font-size:10px}
.mg-rew span{display:inline-flex;align-items:center;gap:6px}
.mg-tip{padding:10px 12px;margin-bottom:12px;font-size:13px;line-height:1.5;color:var(--text-2);background:#1a1624;box-shadow:inset 3px 0 0 var(--yellow)}
.mg-tip b{display:block;font-family:var(--px);font-size:8px;color:var(--yellow);margin-bottom:4px}
.mg-clap{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--px);font-size:42px;color:var(--yellow);text-shadow:4px 4px 0 #000;pointer-events:none;animation:clap .9s ease-out forwards}
@keyframes clap{0%{transform:scale(1.8);opacity:0}25%{transform:scale(1);opacity:1}80%{opacity:1}100%{opacity:0}}
.mg-rot{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);padding:6px 10px;font-size:12px;background:rgba(0,0,0,.7);color:var(--muted);white-space:nowrap}

@media (max-width:900px){ .mg-side{display:none} }