/* My Games for MaGamers — v1.0 styles (port of itorrents-igruha my-games)
 * Дизайн-токени сайту: --clr-brand #ec2e1c, --r-xl 10px, Inter; dark: html[data-theme="dark"].
 * Слої: хедер (дзвіночок + My Games), панель сповіщень, тости, віджет на сторінці гри,
 * сторінка /my-games/. Скоуп-токени mgb/mgbr/mgtx/mgmut — щоб не залежати від місця вставки.
 */

/* ---------- скоуп-токени (світла/темна) ---------- */
.nt, .ntx, .ntt, .mg-pop, .mg-page, .mm-toasts {
	--mgb: #ffffff;
	--mgb2: #f4f6f7;
	--mgbr: #e3e4e6;
	--mgtx: #1f252c;
	--mgmut: #667085;
	--mgbrand: #ec2e1c;
	--mgbrand-soft: rgba(236, 46, 28, .07);
	--mgbrand-ring: rgba(236, 46, 28, .5);
	color: var(--mgtx);
}
html[data-theme="dark"] .nt,
html[data-theme="dark"] .ntx,
html[data-theme="dark"] .ntt,
html[data-theme="dark"] .mg-pop,
html[data-theme="dark"] .mg-page,
html[data-theme="dark"] .mm-toasts {
	--mgb: #1e232a;
	--mgb2: #232932;
	--mgbr: rgba(255, 255, 255, .08);
	--mgtx: #e8edf3;
	--mgmut: #9aa4b2;
	--mgbrand-soft: rgba(236, 46, 28, .14);
	--mgbrand-ring: rgba(236, 46, 28, .55);
}
html[data-theme="dark"] .ntt { box-shadow: 0 12px 32px rgba(0, 0, 0, .45); border-color: var(--mgbr); }

/* ==================== ХЕДЕР: дзвіночок + My Games ==================== */
.header-actions .nt, .header-actions .mg-top { position: relative; flex-shrink: 0; }
.nt__btn, .mg-top a {
	display: flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; padding: 0; box-sizing: border-box;
	background: transparent; border: 0; border-radius: 50%;
	color: var(--clr-heading); cursor: pointer; text-decoration: none;
	transition: color .15s, background-color .15s;
}
html[data-theme="dark"] .nt__btn, html[data-theme="dark"] .mg-top a { color: #e8edf3; }
.nt__btn svg, .mg-top a svg { width: 20px; height: 20px; pointer-events: none; }
.nt__btn:hover, .mg-top a:hover { color: var(--clr-brand); background: var(--clr-bg-light); }
html[data-theme="dark"] .nt__btn:hover, html[data-theme="dark"] .mg-top a:hover { color: var(--clr-brand); background: rgba(255, 255, 255, .07); }
.nt__btn:focus-visible, .mg-top a:focus-visible { outline: 2px solid var(--clr-brand); outline-offset: 2px; }

.nt__badge {
	position: absolute; top: 5px; right: 3px;
	min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
	display: none; align-items: center; justify-content: center;
	background: var(--clr-danger); color: #fff;
	font: 700 10px/1 Inter, sans-serif; letter-spacing: 0;
	border-radius: 999px; border: 2px solid var(--clr-bg);
	pointer-events: none;
}
html[data-theme="dark"] .nt__badge { border-color: #1e232a; }
.nt__badge:not(:empty) { display: flex; animation: mgPop .25s ease; }
@keyframes mgPop { from { transform: scale(.4); } to { transform: scale(1); } }

.nt__btn.is-ring svg { animation: mgRing 1s ease; transform-origin: 50% 12%; }
@keyframes mgRing {
	0%, 100% { transform: rotate(0); }
	12% { transform: rotate(14deg); } 28% { transform: rotate(-12deg); }
	44% { transform: rotate(9deg); } 60% { transform: rotate(-8deg); } 76% { transform: rotate(4deg); }
}
.mg-top a.mg-hit svg { animation: mgHit .7s ease; }
@keyframes mgHit {
	0% { transform: scale(1); } 35% { transform: scale(1.28); color: var(--clr-brand); } 100% { transform: scale(1); }
}

/* ==================== ПАНЕЛЬ СПОВІЩЕНЬ ==================== */
.ntx {
	position: absolute; right: -8px; top: calc(100% + 12px); z-index: 1100;
	display: none; flex-direction: column;
	width: min(420px, calc(100vw - 24px));
	max-height: min(600px, calc(100vh - 90px)); box-sizing: border-box;
	border: 1px solid var(--mgbr); border-radius: var(--r-xl, 10px);
	background: var(--mgb);
	box-shadow: 0 18px 44px rgba(16, 24, 40, .24);
	font: 400 14px/1.4 var(--font-base, Inter, sans-serif);
	text-align: left; cursor: default;
}
.nt.is-open .ntx { display: flex; animation: mgPanel .18s ease; }
@keyframes mgPanel { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.ntx-h { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--mgbr); }
.ntx-h b { font-size: 14px; font-weight: 700; color: var(--mgtx); }
.ntx-ra { background: none; border: 0; padding: 4px 6px; margin: 0; font: 600 12px Inter, sans-serif; color: var(--mgbrand); cursor: pointer; border-radius: 6px; }
.ntx-ra:hover { background: var(--mgbrand-soft); }
.ntx-ra:disabled { color: var(--mgmut); cursor: default; background: none; }

.ntx-list { flex: 1; overflow-y: auto; padding: 12px; scrollbar-width: thin; }
.ntx-grid { display: grid; grid-template-columns: repeat(auto-fill, 78px); gap: 14px 10px; justify-content: space-between; }
.ntx-tile { position: relative; display: block; text-decoration: none !important; color: var(--mgtx); }
.ntx-cov { display: block; width: 78px; height: 104px; border-radius: 8px; overflow: hidden; background: var(--mgb2); border: 1px solid var(--mgbr); box-sizing: border-box; }
.ntx-cov img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ntx-cov i { display: block; width: 100%; height: 100%; }
.ntx-tile.is-new .ntx-cov::after {
	content: ''; position: absolute; left: 5px; top: 5px; width: 8px; height: 8px;
	border-radius: 50%; background: var(--clr-success); border: 2px solid var(--mgb); box-sizing: content-box;
}
.ntx-tile small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; line-height: 1.3; font-weight: 600; margin-top: 6px; }
.ntx-tile em { display: block; font-style: normal; font-size: 11px; color: var(--mgmut); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ntx-x {
	position: absolute; right: -4px; top: -4px; width: 22px; height: 22px;
	display: none; align-items: center; justify-content: center;
	border: 0; border-radius: 50%; background: var(--mgb); color: var(--mgmut);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .25); cursor: pointer; font-size: 13px; line-height: 1;
}
.ntx-tile:hover .ntx-x { display: flex; }
.ntx-x:hover { color: var(--clr-danger); }

.ntx-f { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-top: 1px solid var(--mgbr); font-size: 13px; }
.ntx-subs { color: var(--mgbrand); font-weight: 700; text-decoration: none; }
.ntx-subs:hover { text-decoration: underline; }
.ntx-clr { background: none; border: 0; padding: 4px 6px; font: 600 12px Inter, sans-serif; color: var(--mgmut); cursor: pointer; border-radius: 6px; }
.ntx-clr:hover { color: var(--clr-danger); background: var(--surface-danger-soft, rgba(239, 68, 68, .06)); }

.ntx-empty, .ntx-empty2 { padding: 28px 14px; text-align: center; color: var(--mgmut); font-size: 13px; }
.ntx-empty2 i { display: block; width: 34px; height: 34px; margin: 0 auto 10px; border-radius: 50%; border: 2px solid var(--mgbr); box-sizing: border-box; }
.ntx-empty2 b { display: block; color: var(--mgtx); font-size: 14px; margin-bottom: 4px; }
.ntx-empty2 span { display: block; max-width: 300px; margin: 0 auto; line-height: 1.5; }

/* ==================== ТОСТИ ==================== */
.mm-toasts {
	position: fixed; right: 16px; bottom: 16px; z-index: 1200;
	display: flex; flex-direction: column; gap: 10px;
	width: min(400px, calc(100vw - 32px)); pointer-events: none;
}
.ntt {
	position: relative; pointer-events: auto;
	background: var(--mgb); border: 1px solid var(--mgbr);
	border-radius: 12px; box-shadow: 0 12px 32px rgba(16, 24, 40, .2);
	overflow: hidden; cursor: default;
	animation: nttIn .28s ease;
}
html[data-theme="dark"] .ntt { box-shadow: 0 12px 32px rgba(0, 0, 0, .5); }
.ntt.is-out { animation: nttOut .23s ease forwards; }
@keyframes nttIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes nttOut { to { opacity: 0; transform: translateY(8px); } }
.ntt-row { display: flex; gap: 10px; padding: 12px 40px 12px 12px; }
.ntt-pic { flex-shrink: 0; }
.ntt-pic img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; display: block; }
.ntt-tx b { display: block; font-size: 14px; line-height: 1.35; }
.ntt-sub { display: block; font-size: 12px; color: var(--mgmut); margin-top: 2px; }
.ntt-acts { display: flex; gap: 8px; margin-top: 8px; }
.ntt-btn {
	border: 0; border-radius: 999px; padding: 6px 14px;
	background: var(--mgbrand); color: #fff;
	font: 600 12px Inter, sans-serif; cursor: pointer; transition: background-color .15s;
}
.ntt-btn:hover { background: var(--clr-brand-hover); }
.ntt-x {
	position: absolute; top: 8px; right: 8px; width: 24px; height: 24px;
	display: flex; align-items: center; justify-content: center;
	background: none; border: 0; color: var(--mgmut); font-size: 16px; cursor: pointer; border-radius: 50%;
}
.ntt-x:hover { color: var(--mgtx); background: var(--mgb2); }
.ntt-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--mgbrand); transform-origin: left; animation: nttBar linear forwards; }
@keyframes nttBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ==================== СТОРІНКА ГРИ: закладка + віджет ==================== */
.mg-bm {
	position: absolute; top: 10px; right: 10px; z-index: 5;
	width: 36px; height: 36px; padding: 0; box-sizing: border-box;
	display: flex; align-items: center; justify-content: center;
	border: 1px solid rgba(0, 0, 0, .1); border-radius: 50%;
	background: rgba(255, 255, 255, .93); color: #1f252c;
	cursor: pointer; transition: color .15s, transform .1s;
}
html[data-theme="dark"] .mg-bm { background: rgba(35, 41, 50, .93); border-color: rgba(255, 255, 255, .12); color: #e8edf3; }
.mg-bm svg { width: 18px; height: 18px; pointer-events: none; }
.mg-bm:hover { color: var(--clr-brand); }
.mg-bm:active { transform: scale(.92); }
.mg-bm__on { display: none; }
.mg-bm.is-on { color: var(--clr-brand); border-color: var(--mgbrand-ring, rgba(236, 46, 28, .5)); }
.mg-bm.is-on .mg-bm__on { display: block; }
.mg-bm.is-on .mg-bm__off { display: none; }

.mg-sub { position: relative; margin: 10px 0 0; padding: 10px; border: 1px solid var(--mgbr); border-radius: var(--r-xl, 10px); background: var(--mgb2); }
.mg-sub__b {
	display: flex; align-items: center; justify-content: center; gap: 7px;
	width: 100%; height: 38px; margin: 0; padding: 0 12px; box-sizing: border-box;
	border: 0 !important; border-radius: 8px !important;
	background: var(--mgbrand-soft) !important;
	box-shadow: inset 0 0 0 1px var(--mgbrand-ring) !important;
	color: var(--mgbrand) !important;
	font: 600 13.5px/1 var(--font-base, Inter, sans-serif) !important;
	white-space: nowrap; cursor: pointer;
	transition: background-color .15s, box-shadow .15s, color .15s, transform .08s;
}
.mg-sub__b:active { transform: scale(.98); }
.mg-sub__b svg { width: 17px; height: 17px; flex-shrink: 0; pointer-events: none; }
.mg-sub.is-on .mg-sub__b {
	background: var(--mgb) !important;
	box-shadow: inset 0 0 0 1px var(--mgbr) !important;
	color: var(--mgtx) !important;
}
.mg-sub__i0, .mg-sub__t0 { display: flex; }
.mg-sub__i1, .mg-sub__t1 { display: none; }
.mg-sub.is-on .mg-sub__i0, .mg-sub.is-on .mg-sub__t0 { display: none; }
.mg-sub.is-on .mg-sub__i1, .mg-sub.is-on .mg-sub__t1 { display: flex; }
.mg-sub__c0, .mg-sub__c1 { margin-top: 7px; text-align: center; font-size: 12px; color: var(--mgmut); }
.mg-sub__c1 { display: none; }
.mg-sub.is-on .mg-sub__c0 { display: none; }
.mg-sub.is-on .mg-sub__c1 { display: block; }
.mg-sub__set { color: var(--mgbrand); font-weight: 600; text-decoration: none; }
.mg-sub__set:hover { text-decoration: underline; }
.mg-sub.is-flash .mg-sub__b { animation: mgFlash 1.1s ease; }
@keyframes mgFlash {
	0%, 100% { box-shadow: inset 0 0 0 1px var(--mgbrand-ring) !important; }
	30%, 60% { box-shadow: inset 0 0 0 2px var(--mgbrand) !important; }
}

/* спливаючі налаштування біля віджета */
.mg-pop {
	position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 60;
	background: var(--mgb); border: 1px solid var(--mgbr); border-radius: var(--r-xl, 10px);
	box-shadow: 0 12px 32px rgba(16, 24, 40, .2); padding: 12px 12px 10px;
	animation: mgPanel .15s ease;
}
html[data-theme="dark"] .mg-pop { box-shadow: 0 12px 32px rgba(0, 0, 0, .5); }
.mg-pop__h { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--mgmut); padding: 2px 4px 8px; }
.mg-pop__r { display: flex; align-items: center; gap: 10px; padding: 8px 4px; }
.mg-pop__r.is-lock { opacity: .8; }
.mg-pop__i { display: flex; flex-shrink: 0; color: var(--mgbrand); }
.mg-pop__i svg { width: 17px; height: 17px; }
.mg-pop__t { flex: 1; min-width: 0; }
.mg-pop__t b { display: block; font-size: 13px; }
.mg-pop__t span { display: block; font-size: 11.5px; color: var(--mgmut); margin-top: 1px; line-height: 1.35; }
.mg-sw { position: relative; flex-shrink: 0; width: 36px; height: 20px; margin: 0; padding: 0; border: 0; border-radius: 999px; background: #cdd0d3; cursor: pointer; transition: background-color .18s; }
html[data-theme="dark"] .mg-sw { background: #3a434e; }
.mg-sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .18s; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.mg-sw.is-on { background: var(--mgbrand); }
.mg-sw.is-on::after { transform: translateX(16px); }
.mg-sw:disabled { cursor: default; opacity: .9; }
.mg-pop__f { display: flex; justify-content: flex-end; gap: 8px; padding-top: 8px; }
.mg-pop__un { background: none; border: 0; padding: 6px 8px; font: 600 12px Inter, sans-serif; color: var(--mgmut); cursor: pointer; border-radius: 6px; }
.mg-pop__un:hover { color: var(--clr-danger); }
.mg-pop__ok { border: 0; border-radius: 999px; padding: 7px 14px; background: var(--mgbrand); color: #fff; font: 600 12px Inter, sans-serif; cursor: pointer; }
.mg-pop__ok:hover { background: var(--clr-brand-hover); }

.mg-fly { position: fixed; z-index: 1300; border-radius: 8px; object-fit: cover; pointer-events: none; transition: transform .55s ease, opacity .55s ease; }

/* ==================== СТОРІНКА /my-games/ ==================== */
.mg-page { font-family: var(--font-base, Inter, sans-serif); }
.mg-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.mg-hd h1 { margin: 0; font-size: 24px; font-weight: 800; line-height: 1.2; }
.mg-hd p { margin: 4px 0 0; font-size: 13px; color: var(--mgmut); }
.mg-gh {
	display: inline-flex; align-items: center; gap: 6px;
	border: 1px solid var(--mgbr); border-radius: 999px;
	background: none; padding: 8px 14px; cursor: pointer;
	font: 600 13px var(--font-base, Inter, sans-serif); color: var(--mgtx);
	transition: border-color .15s, color .15s;
}
.mg-gh svg { width: 15px; height: 15px; }
.mg-gh:hover { border-color: var(--mgbrand); color: var(--mgbrand); }
.mg-gh.is-on { border-color: var(--mgbrand); color: var(--mgbrand); }
.mg-set { flex-shrink: 0; }

.mg-gst {
	display: flex; gap: 12px; align-items: flex-start;
	margin-top: 14px; padding: 12px 14px;
	border: 1px solid var(--mgbr); border-radius: var(--r-xl, 10px); background: var(--mgb2);
}
.mg-gst > svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--mgbrand); margin-top: 2px; }
.mg-gst__t { flex: 1; }
.mg-gst__t b { display: block; font-size: 13.5px; }
.mg-gst__t span { display: block; font-size: 12.5px; color: var(--mgmut); margin-top: 2px; line-height: 1.45; }
.mg-gst__b { display: flex; gap: 8px; margin-top: 10px; }
.mg-gst__b .mg-gh { padding: 6px 12px; font-size: 12px; }

.mg-btn {
	display: inline-flex; align-items: center; gap: 6px;
	border: 0; border-radius: 999px; padding: 9px 16px;
	background: var(--mgbrand); color: #fff;
	font: 600 13px var(--font-base, Inter, sans-serif);
	text-decoration: none !important; cursor: pointer;
	transition: background-color .15s, transform .08s;
}
.mg-btn:hover { background: var(--clr-brand-hover); color: #fff; }
.mg-btn:active { transform: scale(.97); }
.mg-btn svg { width: 14px; height: 14px; }
.mg-btn.is-sm { padding: 6px 12px; font-size: 12px; }

.mg-ns { margin-top: 14px; padding: 6px 12px; border: 1px solid var(--mgbr); border-radius: var(--r-xl, 10px); background: var(--mgb2); }
.mg-ns__r { display: flex; align-items: center; gap: 10px; padding: 9px 2px; }
.mg-ns__r + .mg-ns__r { border-top: 1px solid var(--mgbr); }
.mg-ns__i { display: flex; color: var(--mgbrand); }
.mg-ns__i svg { width: 17px; height: 17px; }
.mg-ns__t { flex: 1; }
.mg-ns__t b { display: block; font-size: 13px; }
.mg-ns__t span { display: block; font-size: 11.5px; color: var(--mgmut); margin-top: 1px; }

.mg-zero { padding: 48px 16px; text-align: center; }
.mg-zero > svg { width: 42px; height: 42px; color: var(--mgmut); }
.mg-zero b { display: block; margin-top: 10px; font-size: 16px; }
.mg-zero span { display: block; max-width: 460px; margin: 6px auto 0; font-size: 13px; color: var(--mgmut); line-height: 1.5; }
.mg-zero .mg-btn { margin-top: 16px; }

.mg-tbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.mg-tabs { display: flex; gap: 2px; overflow-x: auto; border-bottom: 1px solid var(--mgbr); scrollbar-width: none; max-width: 100%; }
.mg-tabs::-webkit-scrollbar { display: none; }
.mg-tabs button {
	display: inline-flex; align-items: center; gap: 5px;
	background: none; border: 0; border-bottom: 2px solid transparent;
	padding: 9px 12px; margin: 0; white-space: nowrap; cursor: pointer;
	font: 600 13px var(--font-base, Inter, sans-serif); color: var(--mgmut);
	transition: color .15s, border-color .15s;
}
.mg-tabs button svg { width: 14px; height: 14px; }
.mg-tabs button em { font-style: normal; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--mgb2); color: var(--mgmut); }
.mg-tabs button em.mg-pc { background: var(--mgbrand); color: #fff; }
.mg-tabs button.is-on { color: var(--mgtx); border-color: var(--mgbrand); }
.mg-tools { display: flex; gap: 8px; align-items: center; }
.mg-srch { display: flex; align-items: center; gap: 8px; border: 1px solid var(--mgbr); border-radius: 999px; padding: 7px 12px; background: var(--mgb); }
.mg-srch svg { width: 14px; height: 14px; color: var(--mgmut); flex-shrink: 0; }
.mg-srch input { border: 0; background: none; outline: none; font: 400 13px var(--font-base, Inter, sans-serif); color: var(--mgtx); width: 170px; min-width: 0; }
.mg-view { display: flex; gap: 4px; }
.mg-view button { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: none; border: 1px solid var(--mgbr); border-radius: 8px; color: var(--mgmut); cursor: pointer; }
.mg-view button svg { width: 15px; height: 15px; }
.mg-view button.is-on { color: var(--mgbrand); border-color: var(--mgbrand-ring); background: var(--mgbrand-soft); }

.mg-allv { margin-top: 18px; }
.mg-sec { margin-bottom: 22px; }
.mg-sh { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.mg-sh h2 { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 15px; font-weight: 700; }
.mg-sh h2 svg { width: 16px; height: 16px; color: var(--mgbrand); }
.mg-sh h2 small { font-size: 12px; font-weight: 600; color: var(--mgmut); padding: 1px 7px; border-radius: 999px; background: var(--mgb2); }
.mg-sp { flex: 1; }
.mg-all { background: none; border: 0; padding: 4px 8px; font: 600 12px Inter, sans-serif; color: var(--mgmut); cursor: pointer; border-radius: 6px; }
.mg-all:hover { color: var(--mgbrand); }
.mg-ar { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: none; border: 1px solid var(--mgbr); border-radius: 50%; color: var(--mgmut); cursor: pointer; }
.mg-ar svg { width: 14px; height: 14px; }
.mg-ar:hover { color: var(--mgtx); border-color: var(--mgmut); }
.mg-ar:disabled { opacity: .3; cursor: default; }

.mg-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; scroll-snap-type: x proximity; }
.mg-c { flex: none; width: 128px; }
.mg-cw { position: relative; }
.mg-cv { display: block; }
.mg-cv img { width: 128px; height: 68px; object-fit: cover; border-radius: 8px; border: 1px solid var(--mgbr); box-sizing: border-box; display: block; background: var(--mgb2); }
.mg-fv, .mg-rm {
	position: absolute; top: 4px; width: 24px; height: 24px; padding: 0;
	display: flex; align-items: center; justify-content: center;
	background: rgba(255, 255, 255, .95); border: 1px solid rgba(0, 0, 0, .1); border-radius: 50%;
	color: #1f252c; cursor: pointer; opacity: 0; transition: opacity .15s, color .15s;
}
html[data-theme="dark"] .mg-fv, html[data-theme="dark"] .mg-rm { background: rgba(35, 41, 50, .95); border-color: rgba(255, 255, 255, .12); color: #e8edf3; }
.mg-fv { left: 4px; }
.mg-rm { right: 4px; }
.mg-fv svg, .mg-rm svg { width: 13px; height: 13px; pointer-events: none; }
.mg-c:hover .mg-fv, .mg-c:hover .mg-rm, .mg-cc:hover .mg-fv, .mg-cc:hover .mg-rm, .mg-fv.is-on { opacity: 1; }
.mg-fv.is-on { color: var(--mgbrand); }
.mg-rm:hover { color: var(--clr-danger); }
.mg-t { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.3; margin-top: 6px; text-decoration: none !important; color: var(--mgtx); }
.mg-t:hover { color: var(--mgbrand); }
.mg-m { font-size: 11.5px; color: var(--mgmut); margin-top: 3px; }
.mg-m.is-upd { color: var(--mgbrand); font-weight: 600; }
.mg-c .mg-btn { margin-top: 7px; }
.mg-c.is-off .mg-cv img { opacity: .85; }

.mg-rl { display: flex; flex-direction: column; gap: 8px; }
.mg-r { display: flex; gap: 12px; padding: 10px; border: 1px solid var(--mgbr); border-radius: var(--r-xl, 10px); background: var(--mgb); align-items: flex-start; }
.mg-r__cv { flex-shrink: 0; }
.mg-r__cv img { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; border: 1px solid var(--mgbr); box-sizing: border-box; display: block; background: var(--mgb2); }
.mg-r__x { flex: 1; min-width: 0; }
.mg-r .mg-t { margin-top: 0; font-size: 13.5px; }
.mg-r__m { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12px; color: var(--mgmut); margin-top: 3px; }
.mg-k.is-upd { color: var(--mgbrand); font-weight: 700; }
.mg-lnk { background: none; border: 0; padding: 0; font: 600 12px Inter, sans-serif; color: var(--mgbrand); cursor: pointer; text-decoration: underline dotted; }
.mg-more { font-size: 12px; color: var(--mgmut); line-height: 1.5; margin-top: 7px; padding: 8px 10px; background: var(--mgb2); border-radius: 8px; }
.mg-more a { color: var(--mgbrand); font-weight: 600; }
.mg-hide { flex-shrink: 0; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; background: none; border: 0; border-radius: 50%; color: var(--mgmut); cursor: pointer; }
.mg-hide svg { width: 13px; height: 13px; }
.mg-hide:hover { color: var(--clr-danger); background: var(--surface-danger-soft, rgba(239, 68, 68, .06)); }

.mg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 14px; margin-top: 4px; }
.mg-cat { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; margin-top: 4px; }
.mg-cc__cover { position: relative; }
.mg-cc__link { display: block; }
.mg-cc__link img { width: 100%; aspect-ratio: 2.14 / 1; object-fit: cover; border-radius: 10px; border: 1px solid var(--mgbr); box-sizing: border-box; display: block; background: var(--mgb2); }
.mg-cc__z { position: absolute; bottom: 6px; right: 6px; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: rgba(0, 0, 0, .6); color: #fff; }
.mg-cc .mg-fv { left: 6px; top: 6px; }
.mg-cc .mg-rm { right: 6px; top: 6px; }
.mg-cc__name a { font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--mgtx); text-decoration: none !important; }
.mg-cc__name a:hover { color: var(--mgbrand); }

.mg-empty { padding: 32px; text-align: center; color: var(--mgmut); font-size: 13px; }
.mg-tip { display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; padding: 10px 12px; border-radius: var(--r-xl, 10px); background: var(--mgb2); border: 1px solid var(--mgbr); font-size: 12.5px; color: var(--mgmut); line-height: 1.45; }
.mg-tip > svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--mgbrand); margin-top: 1px; }
.mg-tip .mg-hide { position: static; flex-shrink: 0; }
.mg-undo { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 10px 14px; border-radius: var(--r-xl, 10px); background: var(--mgbrand-soft); border: 1px solid var(--mgbrand-ring); font-size: 13px; }
.mg-undo button { background: none; border: 0; padding: 2px 6px; font: 700 13px Inter, sans-serif; color: var(--mgbrand); cursor: pointer; text-decoration: underline; }
.is-gone { display: none !important; }

/* ---------- мобільна ---------- */
@media (max-width: 640px) {
	.ntx { right: -4px; }
	.mg-hd { flex-direction: column; }
	.mg-hd .mg-set { align-self: flex-start; }
	.mg-tools { width: 100%; }
	.mg-srch { flex: 1; }
	.mg-srch input { width: 100%; }
	.mg-gst__b { flex-wrap: wrap; }
	.mm-toasts { right: 12px; bottom: 12px; }
	.mg-grid { grid-template-columns: repeat(3, 1fr); }
	.mg-cat { grid-template-columns: repeat(2, 1fr); }
	.mg-r { flex-wrap: wrap; }
	.mg-r .mg-btn { flex: 1; justify-content: center; }
}

/* ---------- доступність: зменшений рух ---------- */
@media (prefers-reduced-motion: reduce) {
	.nt__badge:not(:empty), .nt.is-open .ntx, .ntt, .ntt.is-out, .ntt-bar, .mg-fly, .nt__btn.is-ring svg, .mg-top a.mg-hit svg, .mg-sub.is-flash .mg-sub__b { animation: none !important; }
	.mg-fly { transition: none !important; }
}

/* ---------- скелетон сторінки ---------- */
.mg-sk { padding: 18px 0 6px; }
.mg-sk__bar { height: 14px; width: 180px; border-radius: 7px; background: var(--mgb2); margin-bottom: 18px; animation: mgPulse 1.1s infinite alternate ease-in-out; }
.mg-sk__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 14px; }
.mg-sk__grid i { height: 68px; border-radius: 8px; background: var(--mgb2); animation: mgPulse 1.1s infinite alternate ease-in-out; }
@keyframes mgPulse { from { opacity: .45; } to { opacity: 1; } }
.game-header__poster { position: relative; }