/* GTA VI hub: hero, Watch / Creators / Guide tabs */
#gts { background: #0a0610; }
#gts .g7-nb { background: rgba(10,6,16,.82); }
#gts .g7 { --pad: 16px; padding: 0 var(--pad) calc(var(--sab, 0px) + 40px); }
#gts .gh { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.g7-hero { position: relative; overflow: hidden; margin: 4px calc(var(--pad) * -1) 0; padding: 26px 20px 20px; display: flex; flex-direction: column; align-items: center; text-align: center; isolation: isolate; }
.g7-sky { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, #1b0b33 0%, #4a1259 28%, #b8326e 55%, #f2785c 74%, #ffb36b 86%, #1a0b24 86.5%, #12081d 100%); }
.g7-sun { position: absolute; left: 50%; top: 62%; width: 220px; height: 220px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, #ffe6a3 0%, #ffb25c 45%, #ff6f61 75%, transparent 76%); -webkit-mask: repeating-linear-gradient(180deg, #000 0 11px, transparent 11px 15px); mask: repeating-linear-gradient(180deg, #000 0 11px, transparent 11px 15px); opacity: .85; }
.g7-sea { position: absolute; left: 0; right: 0; top: 86%; bottom: 0; background: repeating-linear-gradient(180deg, rgba(255,140,120,.18) 0 2px, transparent 2px 9px); }
.g7-palm { position: absolute; bottom: 14%; width: 120px; height: 200px; background: radial-gradient(ellipse 60% 22% at 50% 12%, #12061c 60%, transparent 62%), linear-gradient(90deg, transparent 47%, #12061c 47% 53%, transparent 53%); opacity: .9; }
.g7-palm.p1 { left: -30px; transform: rotate(-8deg); } .g7-palm.p2 { right: -34px; height: 240px; transform: rotate(7deg) scaleX(-1); }
.g7-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 55%, rgba(10,6,16,.65) 85%, #0a0610); }
.g7-logo { width: min(64vw, 250px); height: auto; filter: drop-shadow(0 10px 30px rgba(20,4,30,.65)) drop-shadow(0 0 40px rgba(255,105,180,.35)); animation: g7Float 6s ease-in-out infinite; }
@keyframes g7Float { 50% { transform: translateY(-5px) rotate(-.6deg); } }
.g7-date { margin: 10px 0 0; color: #fff; font-size: 17px; font-weight: 800; letter-spacing: -.01em; text-shadow: 0 2px 10px rgba(0,0,0,.4); display: flex; flex-direction: column; gap: 3px; }
.g7-date span { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,230,240,.8); }
.g7-cd { width: 100%; max-width: 380px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 16px; }
.g7-cd > div { display: flex; flex-direction: column; align-items: center; padding: 11px 0 9px; border-radius: 16px; background: rgba(18,6,28,.55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255,180,220,.22); }
.g7-cd b { color: #fff; font-size: 28px; font-weight: 850; letter-spacing: -.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.g7-cd small { color: rgba(255,220,235,.7); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.g7-pre { width: 100%; max-width: 380px; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding: 8px 8px 8px 14px; border-radius: 14px; background: rgba(18,6,28,.55); border: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.7); font-size: 13px; text-align: left; }
.g7-pre b { color: #fff; }
.g7-prebtn { flex: none; }
.g7-tabs { position: sticky; top: 0; z-index: 4; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 14px; background: rgba(22,12,32,.9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.08); }
.g7-tabs button { all: unset; cursor: pointer; text-align: center; padding: 10px 0; border-radius: 11px; font-size: 14px; font-weight: 700; color: rgba(255,255,255,.55); }
.g7-tabs button.on { color: #1a0614; background: linear-gradient(90deg, #ffb36b, #ff5fa2); }
.g7-body { display: flex; flex-direction: column; gap: 12px; }
.g7-player { margin: 0; }
.g7-sh { display: flex; justify-content: space-between; align-items: baseline; margin: 8px 2px -2px; }
.g7-sh b { color: #fff; font-size: 17px; font-weight: 750; } .g7-sh span { color: rgba(255,255,255,.45); font-size: 12.5px; }
.g7-sub { margin: 0 2px; color: rgba(255,255,255,.55); font-size: 13px; line-height: 1.45; }
.g7-rail { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--pad) * -1); padding: 2px var(--pad) 4px; scroll-snap-type: x mandatory; }
.g7-rail::-webkit-scrollbar { display: none; }
.g7-rail .g7-v { flex: none; width: 224px; scroll-snap-align: start; } .g7-rail.sm .g7-v { width: 178px; }
.g7-v { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.g7-th { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: linear-gradient(135deg, #4a1259, #f2785c); border: 1px solid rgba(255,255,255,.08); display: grid; place-items: center; }
.g7-th .yt-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.g7-th .yt-fb { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; text-align: center; padding: 8px; }
.g7-th .yt-img + .yt-fb { display: none; }
.g7-th > i { position: relative; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; opacity: .9; }
.g7-th > i svg { width: 16px; height: 16px; margin-left: 2px; }
.g7-th em { position: absolute; right: 7px; bottom: 7px; padding: 2px 6px; border-radius: 6px; background: rgba(0,0,0,.75); color: #fff; font-style: normal; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.g7-th em.tag { left: 7px; right: auto; top: 7px; bottom: auto; background: rgba(255,95,162,.9); }
.g7-v.on .g7-th { box-shadow: 0 0 0 2px #ff5fa2; }
.g7-v b { color: #fff; font-size: 14px; font-weight: 650; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.g7-v small { color: rgba(255,255,255,.45); font-size: 12px; }
.g7-crs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.g7-cr { all: unset; cursor: pointer; flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.g7-cr.on { border-color: #ff5fa2; background: rgba(255,95,162,.12); }
.g7-cav { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #ffb36b, #ff5fa2); color: #1a0614; font-weight: 900; font-size: 11px; text-transform: uppercase; }
.g7-cr b { display: block; color: #fff; font-size: 14px; } .g7-cr small { color: rgba(255,255,255,.5); font-size: 12px; }
.g7-chd { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 2px; }
.g7-chd b { display: block; color: #fff; font-size: 18px; } .g7-chd small { color: rgba(255,255,255,.55); font-size: 13px; }
.g7-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
@media (min-width: 560px) { .g7-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.g7-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.g7-facts > div { display: flex; flex-direction: column; gap: 3px; padding: 14px; border-radius: 16px; background: radial-gradient(120% 120% at 0% 0%, rgba(255,95,162,.12), transparent 60%), rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); min-width: 0; }
.g7-facts small { color: #ff8fc0; font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.g7-facts b { color: #fff; font-size: 16px; font-weight: 750; line-height: 1.25; }
.g7-facts span { color: rgba(255,255,255,.5); font-size: 12px; line-height: 1.4; }
.g7-note { margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { .g7-logo { animation: none; } }
.g7-tabs { background: #160c20; }
.g7-th .yt-fb small { display: none; }
.g7-th .yt-fb b { position: absolute; left: 10px; bottom: 8px; font-size: 13px; opacity: .85; }

.g7-tabs.stuck { box-shadow: 0 8px 18px #0a0610; }