.ggp { position: fixed; inset: 0; z-index: 100002; display: none; align-items: center; justify-content: center; padding: 0; background: rgba(var(--ink-r), var(--ink-g), var(--ink-b),.94); font-family: inherit; }
.ggp.is-open { display: flex; }
.ggp * { box-sizing: border-box; }
.ggp button { background: none; border: 0; color: #fff; cursor: pointer; padding: 6px; display: inline-flex; align-items: center; justify-content: center; font: inherit; font-size: 13px; -webkit-tap-highlight-color: transparent; }
.ggp svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; }
.ggp svg.f path { fill: currentColor; }
.ggp-box { position: relative; width: 100%; height: 100%; background: #000; border-radius: 0; overflow: hidden; color: #fff; user-select: none; -webkit-user-select: none; touch-action: none; }
.ggp-box:fullscreen { width: 100%; height: 100%; max-height: none; aspect-ratio: auto; border-radius: 0; }
.ggp-box:-webkit-full-screen { width: 100%; height: 100%; max-height: none; aspect-ratio: auto; border-radius: 0; }
.ggp-box:not(.ui) { cursor: none; }
.ggp-stage { position: absolute; inset: 0; overflow: hidden; background: #000; transform-origin: 0 0; transition: transform .32s cubic-bezier(.2,.7,.2,1), border-radius .32s, box-shadow .32s; }
.ggp-box.is-tour .ggp-stage { border-radius: 14px; pointer-events: none; box-shadow: 0 0 0 2px rgba(var(--accent-hi-r), var(--accent-hi-g), var(--accent-hi-b),.28), 0 14px 40px rgba(0,0,0,.7); }
.ggp-box.is-tour .ggp-end { display: none; }
.ggp video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; will-change: transform; transform-origin: 50% 50%; }
.ggp video.zt { transition: transform .28s cubic-bezier(.2,.7,.2,1); }
.ggp-gest { position: absolute; inset: 0; touch-action: none; }

.ggp-sub { position: absolute; left: 6%; right: 6%; bottom: 8%; width: max-content; max-width: 88%; margin: 0 auto; text-align: center; white-space: pre-line; direction: rtl; font-size: calc(clamp(14px, 2.6vw, 26px) * var(--sub-s, 1)); color: var(--sub-c, #fff); font-weight: 700; line-height: 1.7; text-shadow: 0 0 4px #000, 0 2px 6px #000, 1px 1px 2px #000; pointer-events: none; transition: bottom .25s; }
.ggp-sub.mv { right: auto; bottom: auto; margin: 0; max-width: 92%; transform: translate(-50%, -50%); transition: none; }
.ggp-box.ui .ggp-sub { bottom: 20%; }
.ggp-box.ui .ggp-sub.mv { bottom: auto; }

.ggp-spin { position: absolute; top: 50%; left: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border: 4px solid rgba(255,255,255,.18); border-top-color: var(--accent-hi); border-radius: 50%; animation: ggps .8s linear infinite; opacity: 0; pointer-events: none; transition: opacity .2s; }
.is-load .ggp-spin { opacity: 1; }
@keyframes ggps { to { transform: rotate(360deg); } }

.ggp-top, .ggp-bot { position: absolute; left: 0; right: 0; opacity: 0; pointer-events: none; transition: opacity .25s; }
.ggp-top { top: 0; display: flex; align-items: center; gap: 8px; padding: 10px 12px 28px; background: linear-gradient(rgba(0,0,0,.75), transparent); }
.ggp-top b { flex: 1; min-width: 0; font-size: 14px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ggp-speed-tag { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; direction: ltr; letter-spacing: .3px; background: linear-gradient(135deg, var(--accent-hi), var(--accent-hi-d)); color: var(--ink); box-shadow: 0 4px 14px rgba(var(--accent-hi-d-r), var(--accent-hi-d-g), var(--accent-hi-d-b),.35); }
.ggp .ggp-zoom-tag { gap: 4px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; direction: ltr; background: rgba(255,255,255,.18); color: #fff; }
.ggp .ggp-zoom-tag:hover { background: rgba(255,255,255,.3); }
.ggp .ggp-zoom-tag[hidden] { display: none; }
.ggp .ggp-zoom-tag svg { width: 14px; height: 14px; }
.ggp-bot { bottom: 0; padding: 26px 12px 6px; background: linear-gradient(transparent, rgba(0,0,0,.85)); }
.ui .ggp-top, .ui .ggp-bot { opacity: 1; pointer-events: auto; }
.ggp-big { position: absolute; top: 50%; left: 50%; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 50% !important; background: linear-gradient(135deg, var(--accent-hi), var(--accent-hi-d)) !important; color: var(--ink) !important; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; box-shadow: 0 8px 28px rgba(var(--accent-hi-d-r), var(--accent-hi-d-g), var(--accent-hi-d-b),.45); }
.ggp-big svg { width: 32px; height: 32px; }
.ui:not(.is-load) .ggp-big { opacity: 1; pointer-events: auto; }
.ggp-big:hover { transform: scale(1.06); }

.ggp-bar { position: relative; height: 22px; cursor: pointer; touch-action: none; }
.ggp-bar::before { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 5px; border-radius: 5px; background: rgba(255,255,255,.25); }
.ggp-bar i { position: absolute; left: 0; top: 9px; height: 5px; border-radius: 5px; width: 0; }
.ggp-bar .b { background: rgba(255,255,255,.35); }
.ggp-bar .p { background: linear-gradient(90deg, var(--accent-hi), var(--accent-hi-d)); }
.ggp-bar u { position: absolute; top: 4px; left: 0; width: 15px; height: 15px; margin-left: -7px; border-radius: 50%; background: var(--accent-hi); box-shadow: 0 0 0 4px rgba(var(--accent-hi-r), var(--accent-hi-g), var(--accent-hi-b),.25); transition: transform .15s; }
.ggp-bar:hover u { transform: scale(1.2); }
.ggp-row { display: flex; align-items: center; gap: 2px; }
.ggp-sp { flex: 1; }
.ggp-c, .ggp-sl, .ggp-d { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; direction: ltr; }
.ggp-sl { opacity: .6; margin: 0 4px; }
.ggp .ggp-d { padding: 4px 6px; border-radius: 8px; }
.ggp .ggp-d:hover { background: rgba(255,255,255,.15); }
.ggp-vol { width: 74px; accent-color: var(--accent-hi); margin: 0 8px; }
.ggp .ggp-cc { opacity: .8; }
.ggp .ggp-cc.on { color: var(--accent-hi); opacity: 1; }
.ggp .ggp-pip { opacity: .8; }
.ggp .ggp-pip[hidden] { display: none; }
.ggp .ggp-pip:hover { opacity: 1; color: var(--accent-hi); }
.ggp .ggp-pip.on { color: var(--accent-hi); opacity: 1; }
.ggp .ggp-pip svg { width: 21px; height: 21px; }
.ggp .ggp-help { opacity: .8; }
.ggp .ggp-help svg { width: 21px; height: 21px; }
.ggp .ggp-help:hover { opacity: 1; color: var(--accent-hi); }
.ggp .ggp-cc.on svg { filter: drop-shadow(0 0 4px rgba(var(--accent-hi-r), var(--accent-hi-g), var(--accent-hi-b),.6)); }
.ggp .ggp-cc:disabled, .ggp .ggp-cc.is-disabled { opacity: .3; cursor: not-allowed; pointer-events: none; filter: grayscale(1); }
.ggp .ggp-mi:disabled, .ggp .ggp-mi.is-disabled { opacity: .35; cursor: not-allowed; pointer-events: none; }
.ggp .ggp-mi:disabled:hover, .ggp .ggp-mi.is-disabled:hover { background: transparent; }

.ggp .ggp-gear { position: relative; width: 40px; height: 40px; border-radius: 10px; transition: background .2s, transform .2s; }
.ggp .ggp-gear svg { width: 22px; height: 22px; }
.ggp .ggp-gear:hover { background: rgba(var(--accent-hi-r), var(--accent-hi-g), var(--accent-hi-b),.14); transform: rotate(30deg); }
.ggp-qw.open .ggp-gear { background: rgba(var(--accent-hi-r), var(--accent-hi-g), var(--accent-hi-b),.18); color: var(--accent-hi); }

.ggp-qw { position: relative; display: inline-flex; }

.ggp-menu {
	position: absolute; bottom: calc(100% + 8px); right: 0; z-index: 6;
	width: 172px; max-width: calc(var(--bw, 100vw) - 24px); max-height: calc(var(--bh, 100vh) - 110px); overflow: hidden;
	display: none; flex-direction: column;
	background: rgba(var(--ink-r), var(--ink-g), var(--ink-b),.97);
	border: 1px solid rgba(var(--accent-hi-r), var(--accent-hi-g), var(--accent-hi-b),.22);
	border-radius: 12px;
	box-shadow: 0 10px 28px rgba(0,0,0,.65);

	transform-origin: 100% 100%;
	animation: ggpMenuIn .16s ease-out;
}
@keyframes ggpMenuIn { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
.ggp-qw.open .ggp-menu { display: flex; }
.ggp-menu.is-sub { width: 184px; }
.ggp-menu-head { display: none; align-items: center; gap: 6px; padding: 4px 8px; border-bottom: 1px solid rgba(255,255,255,.08); direction: rtl; }
.ggp-menu.is-sub .ggp-menu-head { display: flex; }
.ggp-menu-head b { font-size: 12px; font-weight: 800; color: var(--accent-hi); }
.ggp .ggp-mi-back { padding: 3px 4px; border-radius: 7px; opacity: .8; }
.ggp .ggp-mi-back:hover { opacity: 1; background: rgba(255,255,255,.08); }
.ggp .ggp-mi-back svg { width: 15px; height: 15px; transform: scaleX(-1); }
.ggp-menu-list { display: flex; flex-direction: column; gap: 1px; padding: 4px; overflow: auto; min-height: 0; overscroll-behavior: contain; scrollbar-width: thin; touch-action: pan-y; }
.ggp-menu.is-ss { width: 214px; }
.ggp-ss { gap: 6px; padding: 8px 10px 6px; direction: rtl; }
.ggp-ss-row { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 700; }
.ggp-ss-row em { font-style: normal; color: var(--accent-hi); font-weight: 800; direction: ltr; }
.ggp-ss-size { width: 100%; margin: 2px 0 6px; accent-color: var(--accent-hi); touch-action: pan-y; }
.ggp-ss-sw { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.ggp .ggp-sc { width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 2px solid rgba(255,255,255,.3); background: var(--c); }
.ggp .ggp-sc.on { border-color: var(--accent-hi); box-shadow: 0 0 0 2px rgba(var(--accent-hi-r), var(--accent-hi-g), var(--accent-hi-b),.4); }
.ggp-ss-cu { position: relative; width: 26px; height: 26px; border-radius: 50%; overflow: hidden; cursor: pointer; border: 2px dashed rgba(255,255,255,.45); background: conic-gradient(#f03e3e, #fcc419, #51cf66, #22b8cf, #4c6ef5, #cc5de8, #f03e3e); }
.ggp-ss-cu input { position: absolute; inset: -8px; width: 42px; height: 42px; opacity: 0; cursor: pointer; }
.ggp-menu-em { font-style: normal; padding: 8px; text-align: center; font-size: 12px; color: rgba(255,255,255,.55); direction: rtl; }

.ggp .ggp-mi { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 32px; padding: 6px 9px; border-radius: 8px; direction: rtl; text-align: right; transition: background .15s; }
.ggp .ggp-mi:hover { background: rgba(var(--accent-hi-r), var(--accent-hi-g), var(--accent-hi-b),.1); }
.ggp-mi b { font-size: 12.5px; font-weight: 700; color: #fff; white-space: nowrap; }
.ggp-mi em { margin-inline-start: auto; font-style: normal; font-size: 12px; font-weight: 800; color: var(--accent-hi); direction: ltr; }
.ggp-mi-ch { color: rgba(255,255,255,.4); display: grid; place-items: center; }
.ggp .ggp-mi-ch svg { width: 12px; height: 12px; transform: scaleX(-1); }

.ggp .ggp-mi-sw b { margin-inline-end: auto; }
.ggp-sw { position: relative; flex: 0 0 auto; width: 28px; height: 16px; border-radius: 99px; background: rgba(255,255,255,.22); transition: background .18s; }
.ggp-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: transform .18s, background .18s; }
.ggp-mi[aria-checked="true"] .ggp-sw { background: linear-gradient(135deg, var(--accent-hi), var(--accent-hi-d)); }
.ggp-mi[aria-checked="true"] .ggp-sw::after { transform: translateX(12px); background: var(--ink); }

.ggp .ggp-opt { display: flex; align-items: center; justify-content: center; min-height: 28px; padding: 5px 4px; border-radius: 7px; direction: ltr; font-weight: 700; font-size: 12px; color: #f2eee6; transition: background .15s; }
.ggp .ggp-opt:hover { background: rgba(255,255,255,.07); }
.ggp .ggp-opt.on { color: var(--accent-hi); background: rgba(var(--accent-hi-r), var(--accent-hi-g), var(--accent-hi-b),.14); }
.ggp .ggp-opt .ggp-chk { display: none; }
.ggp .ggp-opt.is-hot span::after { content: "⚡"; margin-left: 2px; color: #ff7a45; }
.ggp-menu-list.ggp-menu-speeds { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; font-variant-numeric: tabular-nums; }

.ggp-end {
	position: absolute; right: 12px; top: 48%; z-index: 4; transform: translateY(-50%);
	width: 188px; max-width: calc(100% - 24px); direction: rtl;
	border-radius: 14px; overflow: hidden;
	background: rgba(var(--ink-r), var(--ink-g), var(--ink-b),.96); border: 1px solid rgba(var(--accent-hi-r), var(--accent-hi-g), var(--accent-hi-b),.38);
	box-shadow: 0 12px 34px rgba(0,0,0,.7), 0 0 24px rgba(var(--accent-hi-r), var(--accent-hi-g), var(--accent-hi-b),.1);
	animation: ggpEndIn .28s cubic-bezier(.2,.7,.2,1);
}
.ggp-end[hidden] { display: none; }
@keyframes ggpEndIn { from { opacity: 0; transform: translate(14px, -50%); } to { opacity: 1; transform: translate(0, -50%); } }
.ggp-end-th { position: relative; aspect-ratio: 16 / 9; background: var(--ink) center / cover no-repeat; cursor: pointer; overflow: hidden; }
.ggp-end-th video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s; pointer-events: none; }
.ggp-end-th.rdy video { opacity: 1; }
.ggp-end-th::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 45%, rgba(0,0,0,.45)); pointer-events: none; }
.ggp .ggp-end-go { position: absolute; z-index: 1; top: 50%; left: 50%; width: 42px; height: 42px; margin: -21px 0 0 -21px; padding: 0; border-radius: 50%; background: linear-gradient(135deg, var(--accent-hi), var(--accent-hi-d)); color: var(--ink); box-shadow: 0 5px 18px rgba(0,0,0,.55); transition: transform .15s; }
.ggp .ggp-end-th:hover .ggp-end-go, .ggp .ggp-end-go:hover { transform: scale(1.08); }
.ggp .ggp-end-go svg { width: 22px; height: 22px; }
.ggp .ggp-end-x { position: absolute; z-index: 2; top: 5px; right: 5px; width: 24px; height: 24px; padding: 0; border-radius: 50%; background: rgba(0,0,0,.6); }
.ggp .ggp-end-x:hover { background: rgba(0,0,0,.85); }
.ggp .ggp-end-x svg { width: 13px; height: 13px; }
.ggp-end-tx { display: flex; flex-direction: column; gap: 1px; padding: 7px 10px 8px; text-align: right; }
.ggp-end-t { font-size: 13.5px; font-weight: 900; color: #fff; white-space: nowrap; }
.ggp-end-s { font-size: 11px; font-weight: 700; color: rgba(255,255,255,.65); }
.ggp-end-s:empty { display: none; }
.ggp-box.is-tiny .ggp-end { right: 8px; width: 150px; }
.ggp-box.is-tiny .ggp-end-go { width: 34px; height: 34px; margin: -17px 0 0 -17px; }
.ggp-box.is-tiny .ggp-end-tx { padding: 5px 8px 6px; }

.ggp-skip { position: absolute; top: 0; bottom: 0; width: 34%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: rgba(255,255,255,.14); font-weight: 800; font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .15s; }
.ggp-skip.l { left: 0; border-radius: 0 70% 70% 0; }
.ggp-skip.r { right: 0; border-radius: 70% 0 0 70%; }
.ggp-skip.on { opacity: 1; }
.ggp-skip svg { width: 34px; height: 34px; }
.ggp-skip.l svg { transform: scaleX(-1); }
.ggp-hud { position: absolute; top: 14%; left: 50%; transform: translateX(-50%); white-space: nowrap; display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 999px; background: rgba(0,0,0,.65); opacity: 0; pointer-events: none; transition: opacity .2s; }
.ggp-hud.on { opacity: 1; }
.ggp-hud .bar { width: 90px; height: 5px; border-radius: 5px; background: rgba(255,255,255,.25); overflow: hidden; }
.ggp-hud .bar i { display: block; height: 100%; background: var(--accent-hi); }
.ggp-hud b { font-size: 13px; min-width: 34px; }
.ggp-hud small { font-size: 11px; font-weight: 800; color: #ffb08a; }
.ggp-hud.boost .bar i { background: linear-gradient(90deg, var(--accent-hi), #ff7a45); }
.ggp-hud.boost b { color: #ffb08a; }
.ggp-note { position: absolute; top: 14%; left: 50%; transform: translateX(-50%); max-width: 88%; padding: 8px 16px; border-radius: 999px; background: rgba(0,0,0,.72); font-size: 13px; font-weight: 700; direction: rtl; text-align: center; opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 2; }
.ggp-note.on { opacity: 1; }
.ggp-sl { position: absolute; top: 14%; left: 50%; transform: translate(-50%, -6px); display: flex; align-items: center; gap: 10px; max-width: 88%; padding: 9px 18px 12px; border-radius: 999px; background: rgba(0,0,0,.78); font-size: 13px; font-weight: 700; direction: rtl; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 3; overflow: hidden; }
.ggp-sl.on { opacity: 1; transform: translate(-50%, 0); }
.ggp-sl i { flex: none; width: 15px; height: 15px; border: 2.5px solid rgba(255,255,255,.22); border-top-color: var(--accent-hi); border-radius: 50%; animation: ggps .8s linear infinite; }
.ggp-sl b { color: var(--accent-hi); font-variant-numeric: tabular-nums; min-width: 2.4em; text-align: start; }
.ggp-sl b:empty { display: none; }
.ggp-sl em { position: absolute; right: 0; bottom: 0; height: 3px; width: 0; background: var(--accent-hi); border-radius: 3px; transition: width .35s ease; }
.ggp-sl.ind em { width: 38%; animation: ggpSlInd 1.2s ease-in-out infinite; transition: none; }
@keyframes ggpSlInd { 0% { right: -38%; } 100% { right: 100%; } }
.ggp-sl.min { top: 56px; left: auto; right: 14px; transform: none; gap: 0; padding: 7px; }
.ggp-sl.min span, .ggp-sl.min b, .ggp-sl.min em { display: none; }
.is-sl .ggp-note { top: calc(14% + 50px); }
@media (prefers-reduced-motion: reduce) { .ggp-sl i, .ggp-sl.ind em { animation-duration: 2.4s; } }
.ggp-msg { position: absolute; top: 50%; left: 0; right: 0; margin: 0; transform: translateY(-50%); text-align: center; padding: 0 16px; font-size: 13.5px; direction: rtl; }
.ggp-msg a { color: var(--accent-hi); font-weight: 800; }

.ggp-tour { position: absolute; inset: 0; z-index: 30; pointer-events: auto; overflow: hidden; }
.ggp-tour[hidden] { display: none; }

.ggp-tour-mask { position: absolute; inset: 0; background: transparent; }

.ggp-tour-hi {
	position: absolute; left: 50%; top: 50%; width: 0; height: 0; opacity: 0;
	background: transparent; pointer-events: none;
	box-shadow: 0 0 0 9999px rgba(0,0,0,.58), 0 0 0 3px var(--accent-hi), 0 0 26px rgba(var(--accent-hi-r), var(--accent-hi-g), var(--accent-hi-b),.65);
	transition: left .3s ease, top .3s ease, width .3s ease, height .3s ease, opacity .2s;
	animation: ggpPulse 1.8s ease-in-out infinite;
}
@keyframes ggpPulse { 0%,100% { outline: 0 solid rgba(var(--accent-hi-r), var(--accent-hi-g), var(--accent-hi-b),.0); } 50% { outline: 6px solid rgba(var(--accent-hi-r), var(--accent-hi-g), var(--accent-hi-b),.28); } }

.ggp-tour-demo { position: absolute; inset: 0; pointer-events: none; }
.ggp-tour-demo * { pointer-events: none; }
.dm-touch { position: absolute; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; background: rgba(255,255,255,.92); box-shadow: 0 0 0 3px var(--accent-hi), 0 6px 16px rgba(0,0,0,.65); opacity: 0; z-index: 3; }
.dm-ring { position: absolute; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; border: 3px solid var(--accent-hi); opacity: 0; z-index: 2; }
.dm-touch.dm-t { animation: dmTap 1.6s ease-in-out infinite; }
.dm-ring.dm-t { animation: dmRip 1.6s ease-out infinite; }
@keyframes dmTap { 0% { opacity: 0; transform: scale(1.7); } 15% { opacity: 1; transform: scale(1.05); } 30% { transform: scale(.72); } 42% { transform: scale(1.05); } 75% { opacity: 1; } 92%,100% { opacity: 0; transform: scale(1.05); } }
@keyframes dmRip { 0%,28% { opacity: 0; transform: scale(.4); } 30% { opacity: .95; transform: scale(.5); } 62% { opacity: 0; transform: scale(2.3); } 100% { opacity: 0; } }

.dm-bub { position: absolute; width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 50%; background: rgba(var(--ink-r), var(--ink-g), var(--ink-b),.9); border: 2px solid var(--accent-hi); box-shadow: 0 8px 26px rgba(0,0,0,.6); color: var(--accent-hi); z-index: 1; }
.dm-st { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.dm-st svg { width: 30px; height: 30px; } .dm-st span { font-size: 11.5px; font-weight: 800; color: #fff; }
.dm-sa { animation: dmSA 3.2s infinite; } .dm-sb { animation: dmSB 3.2s infinite; }
@keyframes dmSA { 0%,20% { opacity: 1; } 24%,70% { opacity: 0; } 74%,100% { opacity: 1; } }
@keyframes dmSB { 0%,20% { opacity: 0; } 24%,70% { opacity: 1; } 74%,100% { opacity: 0; } }

.dm-fsbox { position: absolute; border: 2px dashed var(--accent-hi); border-radius: 10px; display: grid; place-items: center; background: rgba(var(--accent-hi-r), var(--accent-hi-g), var(--accent-hi-b),.08); animation: dmFS 3.2s ease-in-out infinite; }
.dm-fsbox span { font-size: 13px; font-weight: 800; color: var(--accent-hi); }
@keyframes dmFS { 0%,20% { transform: scale(.4); opacity: .9; } 40%,66% { transform: scale(1); opacity: 1; } 90%,100% { transform: scale(.4); opacity: .9; } }
.dm-sub { position: absolute; transform: translate(-50%,-50%); padding: 3px 10px; border-radius: 6px; background: rgba(0,0,0,.55); font-size: 15px; font-weight: 800; color: #fff; text-shadow: 0 1px 4px #000; white-space: nowrap; animation: dmVis 3.2s infinite; }
@keyframes dmVis { 0%,20% { opacity: 0; } 26%,68% { opacity: 1; } 74%,100% { opacity: 0; } }
.dm-menu { position: absolute; width: 150px; padding: 6px; border-radius: 12px; background: rgba(var(--ink-r), var(--ink-g), var(--ink-b),.97); border: 1px solid rgba(var(--accent-hi-r), var(--accent-hi-g), var(--accent-hi-b),.5); box-shadow: 0 10px 30px rgba(0,0,0,.7); transform-origin: 100% 100%; animation: dmMenu 3.2s infinite; }
.dm-menu b { display: flex; justify-content: space-between; padding: 6px 8px; font-size: 12px; color: #fff; direction: rtl; } .dm-menu em { font-style: normal; color: var(--accent-hi); direction: ltr; }
@keyframes dmMenu { 0%,20% { opacity: 0; transform: scale(.85) translateY(8px); } 28%,68% { opacity: 1; transform: none; } 76%,100% { opacity: 0; transform: scale(.85) translateY(8px); } }

.dm-touch.dm-d { animation: dmDT 6s ease-in-out infinite; }
.dm-ring.dm-d { animation: dmRD 6s ease-out infinite; }
@keyframes dmDT { 0% { opacity: 0; transform: scale(1.6); } 4% { opacity: 1; transform: scale(1.05); } 8% { transform: scale(.72); } 12% { transform: scale(1.05); } 16% { transform: scale(.72); } 20% { transform: scale(1.05); } 27% { opacity: 1; } 31%,100% { opacity: 0; } }
@keyframes dmRD { 0%,6% { opacity: 0; transform: scale(.4); } 8% { opacity: .95; transform: scale(.5); } 14% { opacity: 0; transform: scale(2.2); } 16% { opacity: .95; transform: scale(.5); } 23% { opacity: 0; transform: scale(2.4); } 100% { opacity: 0; } }
.dm-hud { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; opacity: 0; color: #fff; animation: dmHud 6s ease-in-out infinite; }
.dm-hud.l { border-radius: 0 60% 60% 0; background: radial-gradient(ellipse at 0% 50%, rgba(255,255,255,.28), rgba(255,255,255,0) 75%); }
.dm-hud.r { border-radius: 60% 0 0 60%; background: radial-gradient(ellipse at 100% 50%, rgba(255,255,255,.28), rgba(255,255,255,0) 75%); }
.dm-hud b { font-size: 13px; font-weight: 800; text-shadow: 0 2px 6px #000; }
.dm-fw svg { width: 34px; height: 34px; color: var(--accent-hi); animation: dmSl .55s ease-in-out infinite; } .dm-fw.l { transform: scaleX(-1); }
@keyframes dmSl { 0%,100% { transform: translateX(-4px); } 50% { transform: translateX(8px); } }
@keyframes dmHud { 0%,17% { opacity: 0; } 22%,46% { opacity: 1; } 52%,100% { opacity: 0; } }

.dm-touch.dm-sw { animation: dmSw 3s ease-in-out infinite; }
@keyframes dmSw { 0% { opacity: 0; transform: translateY(var(--d)) scale(1.5); } 8% { opacity: 1; transform: translateY(var(--d)) scale(1); } 45%,55% { opacity: 1; transform: translateY(calc(var(--d) * -1)) scale(1); } 92% { opacity: 1; transform: translateY(var(--d)) scale(1); } 100% { opacity: 0; transform: translateY(var(--d)) scale(1); } }
.dm-track { position: absolute; width: 10px; margin-left: -5px; border-radius: 6px; background: rgba(255,255,255,.28); overflow: hidden; box-shadow: 0 0 0 1px rgba(0,0,0,.4); }
.dm-track i { position: absolute; left: 0; right: 0; bottom: 0; height: 12%; background: linear-gradient(0deg, var(--accent-hi-d), var(--accent-hi)); animation: dmFl 3s ease-in-out infinite; }
@keyframes dmFl { 0%,8% { height: 12%; } 45%,55% { height: 90%; } 92%,100% { height: 12%; } }
.dm-ico { position: absolute; width: 26px; height: 26px; margin-left: -13px; color: var(--accent-hi); } .dm-ico svg { width: 26px; height: 26px; }
.dm-pct { position: absolute; transform: translateX(-50%); font-size: 12px; font-weight: 800; color: #fff; text-shadow: 0 1px 4px #000; font-variant-numeric: tabular-nums; }
.dm-dim { position: absolute; background: #000; animation: dmDim 3s ease-in-out infinite; }
@keyframes dmDim { 0%,8% { opacity: .62; } 45%,55% { opacity: 0; } 92%,100% { opacity: .62; } }

.ggp-tour-card {
	position: absolute; left: 12px; top: 12px; width: 340px; max-height: calc(100% - 20px); overflow-y: auto;
	padding: 14px 14px 12px;
	background: linear-gradient(180deg, rgba(var(--ink-r), var(--ink-g), var(--ink-b),.98), rgba(var(--ink-r), var(--ink-g), var(--ink-b),.98));
	border: 1px solid rgba(var(--accent-hi-r), var(--accent-hi-g), var(--accent-hi-b),.4);
	border-radius: 18px;
	box-shadow: 0 18px 50px rgba(0,0,0,.75), 0 0 40px rgba(var(--accent-hi-r), var(--accent-hi-g), var(--accent-hi-b),.12);
	color: #fff; direction: rtl; text-align: right;
	transition: left .3s ease, top .3s ease;
}
.ggp-tour-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
.ggp-tour-ic {
	width: 44px; height: 44px; flex: 0 0 auto; display: grid; place-items: center;
	border-radius: 13px;
	background: linear-gradient(135deg, var(--accent-hi), var(--accent-hi-d));
	color: var(--ink);
	box-shadow: 0 6px 18px rgba(var(--accent-hi-d-r), var(--accent-hi-d-g), var(--accent-hi-d-b),.5);
}
.ggp-tour-ic svg { width: 22px; height: 22px; }
.ggp-tour-tx { flex: 1; min-width: 0; }
.ggp-tour-title { display: block; font-size: 15.5px; font-weight: 900; color: var(--accent-hi); line-height: 1.4; }
.ggp-tour-step { display: block; font-size: 11.5px; color: rgba(255,255,255,.55); margin-top: 2px; font-weight: 700; }
.ggp-tour-body {
	margin: 4px 0 8px;
	font-size: 13px; line-height: 1.75; color: rgba(255,255,255,.88);
}
.ggp-tour-dots { display: flex; gap: 5px; justify-content: center; margin: 6px 0 10px; }
.ggp-tour-dots i {
	width: 6px; height: 6px; border-radius: 50%;
	background: rgba(255,255,255,.25);
	transition: width .25s, background .25s;
}
.ggp-tour-dots i.on { width: 18px; border-radius: 3px; background: linear-gradient(90deg, var(--accent-hi), var(--accent-hi-d)); }
.ggp-tour-nav { display: flex; align-items: center; gap: 8px; }
.ggp .ggp-tour-skip {
	padding: 8px 12px; border-radius: 10px; font-size: 12.5px; font-weight: 700;
	color: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.14);
}
.ggp .ggp-tour-skip:hover { color: #fff; border-color: rgba(255,255,255,.28); }
.ggp .ggp-tour-prev {
	width: 38px; height: 38px; border-radius: 11px; border: 1px solid rgba(var(--accent-hi-r), var(--accent-hi-g), var(--accent-hi-b),.28);
	color: var(--accent-hi);
}
.ggp .ggp-tour-prev:hover { background: rgba(var(--accent-hi-r), var(--accent-hi-g), var(--accent-hi-b),.12); }
.ggp .ggp-tour-prev svg { transform: scaleX(1); }
.ggp .ggp-tour-next {
	padding: 9px 16px; border-radius: 11px; font-weight: 800; font-size: 13.5px;
	background: linear-gradient(135deg, var(--accent-hi), var(--accent-hi-d)); color: var(--ink);
	box-shadow: 0 8px 22px rgba(var(--accent-hi-d-r), var(--accent-hi-d-g), var(--accent-hi-d-b),.42);
	gap: 6px;
}
.ggp .ggp-tour-next:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(var(--accent-hi-d-r), var(--accent-hi-d-g), var(--accent-hi-d-b),.55); }
.ggp .ggp-tour-next svg { width: 18px; height: 18px; transform: scaleX(-1); }
.ggp .ggp-tour-next.is-last svg { transform: none; }

.ggp-box.is-tour .ggp-top, .ggp-box.is-tour .ggp-bot, .ggp-box.is-tour .ggp-big { opacity: 1; pointer-events: none; }

.ggp-warn {
	position: absolute; inset: 0; z-index: 40;
	display: flex; align-items: center; justify-content: center; padding: 8px; overflow: hidden;
	background: radial-gradient(circle at 50% 50%, rgba(0,0,0,.55), rgba(0,0,0,.9));

	animation: ggpFade .25s ease;
}
.ggp-warn[hidden] { display: none; }
.ggp-warn-box {
	width: min(360px, 100%); max-height: 100%; overflow-y: auto; padding: 20px;
	background: linear-gradient(180deg, rgba(var(--ink-r), var(--ink-g), var(--ink-b),.98), rgba(var(--ink-r), var(--ink-g), var(--ink-b),.98));
	border: 1px solid rgba(255,122,69,.5);
	border-radius: 18px;
	box-shadow: 0 25px 60px rgba(0,0,0,.7), 0 0 60px rgba(255,122,69,.2);
	color: #fff; direction: rtl; text-align: center;
	animation: ggpCardIn .3s cubic-bezier(.2,.7,.2,1);
}
.ggp-warn-ic {
	width: 60px; height: 60px; margin: 0 auto 12px; border-radius: 50%;
	display: grid; place-items: center;
	background: linear-gradient(135deg, #cc6237, #c8420e);
	color: #fff;
	box-shadow: 0 10px 24px rgba(217,72,15,.5);
	animation: ggpShake .5s ease-in-out 2;
}
@keyframes ggpShake { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-10deg); } 75% { transform: rotate(10deg); } }
.ggp-warn-ic svg { width: 30px; height: 30px; }
.ggp-warn-title { display: block; font-size: 16px; font-weight: 900; color: #ffb08a; margin-bottom: 6px; }
.ggp-warn-body { margin: 6px 0 16px; font-size: 13.5px; line-height: 1.8; color: rgba(255,255,255,.88); }
.ggp-warn-x { display: inline-block; padding: 2px 8px; margin: 0 2px; border-radius: 8px; background: rgba(255,122,69,.22); color: #ffd0b8; font-weight: 800; direction: ltr; }
.ggp-warn-row { display: flex; gap: 8px; }
.ggp .ggp-warn-cx {
	flex: 1; padding: 11px 12px; border-radius: 11px; font-weight: 700; font-size: 13px;
	border: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.85);
}
.ggp .ggp-warn-cx:hover { background: rgba(255,255,255,.06); }
.ggp .ggp-warn-ok {
	flex: 1; padding: 11px 12px; border-radius: 11px; font-weight: 800; font-size: 13px;
	background: linear-gradient(135deg, #cc6237, #c8420e); color: #fff;
	box-shadow: 0 8px 20px rgba(217,72,15,.45);
}
.ggp .ggp-warn-ok:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(217,72,15,.6); }

@media (pointer: coarse) { .ggp-vol { display: none; } }
@media (max-width: 560px) {
	.ggp svg { width: 22px; height: 22px; }
	.ggp-row { gap: 0; }
	.ggp-big { width: 58px; height: 58px; margin: -29px 0 0 -29px; }
	.ggp-tour-card { padding: 14px; }
	.ggp-tour-title { font-size: 14.5px; }
	.ggp-tour-body { font-size: 13px; }
}

.ggp-box.is-compact .ggp-warn { padding: 6px; }
.ggp-box.is-compact .ggp-warn-box { padding: 10px 12px; border-radius: 14px; }
.ggp-box.is-compact .ggp-warn-ic { width: 38px; height: 38px; margin-bottom: 6px; }
.ggp-box.is-compact .ggp-warn-ic svg { width: 20px; height: 20px; }
.ggp-box.is-compact .ggp-warn-title { font-size: 13.5px; margin-bottom: 2px; }
.ggp-box.is-compact .ggp-warn-body { margin: 2px 0 8px; font-size: 11.5px; line-height: 1.6; }
.ggp-box.is-compact .ggp-warn-x { padding: 0 6px; }
.ggp-box.is-compact .ggp-warn-cx, .ggp-box.is-compact .ggp-warn-ok { padding: 7px 8px !important; font-size: 11.5px !important; border-radius: 9px !important; }
.ggp-box.is-tiny .ggp-warn-ic { display: none; }

.ggp-box.is-compact .ggp-tour-card { max-width: calc(var(--bw, 100vw) - 24px); }

.ggp-auto { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; background: rgba(var(--ink-r), var(--ink-g), var(--ink-b),.78);   direction: rtl; animation: ggpAutoIn .3s ease; }
.ggp-auto[hidden] { display: none; }
@keyframes ggpAutoIn { from { opacity: 0; } to { opacity: 1; } }
.ggp-auto-in { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 86%; text-align: center; }
.ggp-auto-ring { position: relative; width: 84px; height: 84px; }
.ggp-auto-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ggp-auto-ring circle { fill: none; stroke-width: 5; }
.ggp-auto-bg { stroke: rgba(255,255,255,.16); }
.ggp-auto-fg { stroke: var(--accent-hi); stroke-linecap: round; stroke-dasharray: 219.911; stroke-dashoffset: 0; }
.ggp-auto-n { position: absolute; inset: 0; display: grid; place-items: center; font-size: 30px; font-weight: 900; color: var(--accent-hi); font-variant-numeric: tabular-nums; }
.ggp-auto-m { margin: 6px 0 0; font-size: 15px; font-weight: 800; color: #fff; line-height: 1.8; }
.ggp-auto-t { font-size: 13px; font-weight: 700; color: rgba(255,255,255,.7); }
.ggp-auto-t:empty { display: none; }
.ggp-auto-b { display: flex; gap: 10px; margin-top: 8px; }
.ggp .ggp-auto-go, .ggp .ggp-auto-x { min-height: 40px; padding: 8px 18px; border-radius: 12px; font-weight: 800; font-size: 13.5px; }
.ggp .ggp-auto-go { background: linear-gradient(135deg, var(--accent-hi), var(--accent-hi-d)); color: var(--ink); }
.ggp .ggp-auto-x { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); }
.ggp-box.is-tiny .ggp-auto-ring { width: 60px; height: 60px; }
.ggp-box.is-tiny .ggp-auto-n { font-size: 21px; }
.ggp-box.is-tiny .ggp-auto-m { font-size: 12.5px; margin-top: 2px; }
.ggp-box.is-tiny .ggp-auto-t { display: none; }
.ggp-box.is-tiny .ggp-auto-b { margin-top: 2px; }
.ggp-box.is-tiny .ggp-auto-go, .ggp-box.is-tiny .ggp-auto-x { min-height: 32px; padding: 5px 12px; font-size: 12px; }
.ggp-box.is-tour .ggp-auto { display: none; }
.ggp-box.is-auto .ggp-top { z-index: 25; }
.ggp-box.is-auto .ggp-bot, .ggp-box.is-auto .ggp-big { visibility: hidden; }

.ggp.is-mini { display: none !important; }
.ggpip { position: fixed; left: 0; top: 0; z-index: 99990; border-radius: 14px; overflow: hidden; background: #000; direction: ltr; touch-action: none; -webkit-user-select: none; user-select: none; cursor: grab; will-change: transform;
	box-shadow: 0 12px 36px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.16); animation: ggpipin .26s cubic-bezier(.2,.9,.3,1.1); -webkit-tap-highlight-color: transparent; }
.ggpip[hidden] { display: none; }
.ggpip.is-drag { cursor: grabbing; box-shadow: 0 16px 44px rgba(0,0,0,.7), 0 0 0 1px rgba(var(--accent-hi-r), var(--accent-hi-g), var(--accent-hi-b),.5); }
@keyframes ggpipin { from { opacity: 0; scale: .85; } to { opacity: 1; scale: 1; } }
.ggpip-v { position: absolute; inset: 0; }
.ggpip-v video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; pointer-events: none; }
.ggpip-sub { position: absolute; left: 4%; right: 4%; bottom: 9%; margin: 0 auto; width: max-content; max-width: 92%; text-align: center; white-space: pre-line; direction: rtl; font-size: var(--ps, 12px); font-weight: 700; line-height: 1.55; color: var(--sub-c, #fff); text-shadow: 0 0 3px #000, 0 1px 4px #000, 1px 1px 2px #000; pointer-events: none; }
.ggpip-sub[hidden] { display: none; }
.ggpip-ui { position: absolute; inset: 0; opacity: 0; transition: opacity .2s; pointer-events: none; background: linear-gradient(rgba(0,0,0,.55), transparent 36%, transparent 64%, rgba(0,0,0,.55)); }
.ggpip.ui .ggpip-ui { opacity: 1; }
.ggpip.ui .ggpip-ui button { pointer-events: auto; }
.ggpip button { position: absolute; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: rgba(0,0,0,.5); color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .15s, transform .15s; }
.ggpip button:hover, .ggpip button:focus-visible { background: rgba(0,0,0,.75); outline: 0; }
.ggpip button:active { transform: scale(.92); }
.ggpip button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; display: block; }
.ggpip button svg.f path { fill: currentColor; stroke: none; }
.ggpip-x { top: 6px; right: 6px; }
.ggpip-o { top: 6px; left: 6px; }
.ggpip .ggpip-pp { top: 50%; left: 50%; width: 42px; height: 42px; margin: -21px 0 0 -21px; background: linear-gradient(135deg, var(--accent-hi), var(--accent-hi-d)); color: var(--ink); }
.ggpip .ggpip-pp:hover, .ggpip .ggpip-pp:focus-visible { background: linear-gradient(135deg, var(--accent-hi), var(--accent-hi-d)); }
.ggpip .ggpip-pp svg { width: 20px; height: 20px; }
.ggpip-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.25); pointer-events: none; }
.ggpip-bar b { display: block; height: 100%; width: 0; background: var(--accent-hi); }
@media (prefers-reduced-motion: reduce) { .ggpip { animation: none; } }