/* AivanCrate — «Угадай уровень» (Style V2) */
.gs-game { padding: 1rem; margin: 0 auto 1rem; max-width: 62rem !important; }
.gs-hud { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .7rem 1.4rem; margin-bottom: .9rem; }
.gs-hud-item { display: flex; flex-direction: column; align-items: center; min-width: 4.5rem; }
.gs-hud-item span { font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--av2-sky); }
.gs-hud-item b { font-size: 1.7rem; line-height: 1.1; color: #fff; }
.gs-sound { display: inline-flex; gap: .3rem; align-items: center; margin: 0; cursor: pointer; color: var(--av2-muted); }
.gs-sound input { accent-color: #3b49ff; }
.gs-timer { --p: 100%; position: relative; display: grid; place-items: center; width: 4.4rem; height: 4.4rem; border-radius: 50%;
    background: conic-gradient(var(--av2-sky) var(--p), rgba(255, 255, 255, .08) 0); box-shadow: 0 0 0 3px #000; }
.gs-timer::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: #070a33; }
.gs-timer em { position: relative; font-style: normal; font-family: "Oxygene1", "PusabGD", sans-serif; font-size: 1.4rem; color: #fff; text-shadow: 0 2px 0 #000; }
.gs-timer.is-low { background: conic-gradient(#ff5a5a var(--p), rgba(255, 255, 255, .08) 0); animation: gsShake .3s ease infinite alternate; }
@keyframes gsShake { to { transform: rotate(4deg) scale(1.04); } }

.gs-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 1rem; overflow: hidden; background: radial-gradient(circle, #1d27c9, #03041a 70%); box-shadow: 0 0 0 3px #000, 0 20px 50px -20px rgba(59, 73, 255, .8); }
.gs-frame > #gs-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .25s, filter .25s; }
.gs-frame.is-loading > #gs-img { opacity: .15; filter: blur(8px); }
.gs-frame.is-in > #gs-img { animation: gsZoom .5s ease; }
@keyframes gsZoom { from { transform: scale(1.15); filter: blur(6px); } }
.gs-frame.is-right { box-shadow: 0 0 0 3px #000, 0 0 0 7px #4ade80, 0 0 50px rgba(74, 222, 128, .6); }
.gs-frame.is-wrong { box-shadow: 0 0 0 3px #000, 0 0 0 7px #ef4444, 0 0 50px rgba(239, 68, 68, .6); animation: gsHit .45s ease; }
@keyframes gsHit { 20% { transform: translateX(-10px); } 40% { transform: translateX(9px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(3px); } }
.gs-source { position: absolute; left: .6rem; top: .6rem; z-index: 2; padding: .2rem .6rem; border-radius: 999px; font-size: .74rem; font-weight: 800; color: #fff; background: rgba(0, 0, 0, .7); box-shadow: 0 0 0 1px #000; }
.gs-reveal { position: absolute; left: .6rem; right: .6rem; bottom: .6rem; z-index: 3; display: flex; align-items: center; gap: .7rem; padding: .55rem .7rem; border-radius: .8rem;
    background: rgba(3, 4, 26, .92); border: 1px solid var(--av2-line); box-shadow: 0 0 0 1px #000; animation: gsUp .3s ease; }
@keyframes gsUp { from { transform: translateY(16px); opacity: 0; } }
.gs-reveal img { width: 7rem; aspect-ratio: 16 / 9; object-fit: cover; border-radius: .45rem; box-shadow: 0 0 0 1px #000; }
.gs-reveal div { display: flex; flex-direction: column; min-width: 0; }
.gs-reveal small { font-size: .72rem; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; color: var(--av2-gold); }
.gs-reveal b { font-size: 1.2rem; color: #fff; }
.gs-reveal span { font-size: .8rem; color: var(--av2-muted); }
.gs-start, .gs-over { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; padding: 1rem; text-align: center;
    background: radial-gradient(circle at 50% 40%, rgba(59, 73, 255, .45), rgba(3, 4, 26, .94) 70%); }
.gs-start img { width: 84px; height: 84px; border-radius: 12px; box-shadow: 0 0 0 3px #000; animation: gsBob 2s ease-in-out infinite; }
@keyframes gsBob { 50% { transform: translateY(-8px) rotate(-6deg); } }
.gs-start b, .gs-over b { font-size: clamp(1.6rem, 4vw, 2.6rem); color: #fff; }
.gs-start p, .gs-over p { max-width: 32rem; margin: 0; color: #dbe2ff; font-weight: 600; }
.gs-play { padding: .7rem 1.8rem; font-size: 1.05rem; }
.gs-pop { position: absolute; left: 50%; top: 42%; z-index: 5; font-size: 2.6rem; color: #4ade80; text-shadow: 0 3px 0 #000; transform: translateX(-50%); animation: gsPop 1.1s ease forwards; pointer-events: none; }
@keyframes gsPop { from { opacity: 0; transform: translate(-50%, 20px) scale(.6); } 25% { opacity: 1; transform: translate(-50%, 0) scale(1.15); } to { opacity: 0; transform: translate(-50%, -50px) scale(1); } }

.gs-options { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: .9rem; min-height: 3.6rem; }
.gs-opt {
    display: flex; align-items: center; gap: .6rem; padding: .7rem .8rem; text-align: left; cursor: pointer; color: var(--av2-ink);
    border-radius: .9rem; background: rgba(2, 3, 20, .75); border: 1px solid var(--av2-line); box-shadow: 0 0 0 1px #000;
    transition: transform .15s, background .15s, border-color .15s; animation: gsOpt .3s ease both; animation-delay: calc(var(--i) * 60ms);
}
@keyframes gsOpt { from { opacity: 0; transform: translateY(8px); } }
.gs-opt:hover:not(:disabled) { transform: translateY(-3px); background: rgba(59, 73, 255, .3); border-color: var(--av2-sky); }
.gs-opt kbd { display: grid; place-items: center; flex: none; width: 1.8rem; height: 1.8rem; border-radius: .5rem; font-family: "Oxygene1", "PusabGD", sans-serif; font-size: .95rem; color: #fff; background: var(--av2-blue); box-shadow: 0 0 0 2px #000; }
.gs-opt span { display: flex; flex-direction: column; min-width: 0; }
.gs-opt b { font-size: 1rem; color: #fff; overflow-wrap: anywhere; }
.gs-opt small { font-size: .76rem; color: var(--av2-muted); }
.gs-opt:disabled { cursor: default; }
.gs-opt.is-picked { border-color: var(--av2-gold); }
.gs-opt.is-right { background: linear-gradient(180deg, #22c55e, #15803d); border-color: #000; animation: gsWin .5s ease; }
.gs-opt.is-right small, .gs-opt.is-wrong small { color: #fff; }
.gs-opt.is-wrong { background: linear-gradient(180deg, #ef4444, #991b1b); border-color: #000; }
.gs-opt.is-cut { opacity: .25; filter: grayscale(1); text-decoration: line-through; }
@keyframes gsWin { 50% { transform: scale(1.04); } }
.gs-tools { display: flex; justify-content: space-between; align-items: center; gap: .6rem; margin-top: .7rem; }
.gs-keys { font-size: .76rem; color: var(--av2-muted); }
.gs-log-box { padding: .8rem; margin: 0 auto; max-width: 62rem !important; }
.gs-log-head { margin-bottom: .5rem; }
.gs-log { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .5rem; }
.gs-log:empty::before { content: "—"; color: var(--av2-muted); }
.gs-log li { display: flex; flex-direction: column; gap: .3rem; padding: .4rem; border-radius: .7rem; background: rgba(2, 3, 20, .55); border: 1px solid var(--av2-line); }
.gs-log li.is-right { border-color: rgba(74, 222, 128, .5); }
.gs-log li.is-wrong { border-color: rgba(239, 68, 68, .5); }
.gs-log img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: .45rem; }
.gs-log span { font-size: .8rem; font-weight: 700; }
.gs-log a { color: #fff !important; text-decoration: none; }
@media (max-width: 575.98px) { .gs-options { grid-template-columns: 1fr; } .gs-reveal img { width: 4.5rem; } .gs-keys { display: none; } }
/* Кадр не выше ~55% экрана — чтобы варианты ответа были видны без прокрутки */
.gs-game .gs-stage, .gs-game .gs-options, .gs-game .gs-tools { width: min(100%, calc(48vh * 16 / 9)); margin-left: auto; margin-right: auto; }
/* Переключатель источника: все видео / только Айвана */
.gs-src-wrap { display: flex; flex-direction: column; align-items: center; gap: .35rem; margin-top: .9rem; }
.gs-src button { display: inline-flex; align-items: center; gap: .4rem; }
.gs-src img { width: 18px; height: 18px; border-radius: 3px; box-shadow: 0 0 0 1px #000; }
.gs-src-hint { color: var(--av2-muted); font-size: .76rem; text-align: center; }