/* Коробка игры — автономная копия сайта для макетов. Размер задаёт --box-w/-h/-d. */
.gbox{--box-w:220px;--box-h:312px;--box-d:78px;position:relative;
  width:var(--box-w);height:var(--box-h);transform-style:preserve-3d;
  transform:rotateX(3deg) rotateY(34deg);transition:transform .6s cubic-bezier(.22,.7,.28,1)}
.gbox .f{position:absolute;top:50%;left:50%;overflow:hidden;background:#090c12;backface-visibility:hidden}
.gbox .f img,.gbox .f video{max-width:none}
.gbox .fr{width:var(--box-w);height:var(--box-h);transform:translate(-50%,-50%) translateZ(calc(var(--box-d)/2));border:1px solid rgba(255,255,255,.08)}
.gbox .bk{width:var(--box-w);height:var(--box-h);transform:translate(-50%,-50%) rotateY(180deg) translateZ(calc(var(--box-d)/2));background:#05070b}
.gbox .sd{width:var(--box-d);height:var(--box-h);transform:translate(-50%,-50%) rotateY(-90deg) translateZ(calc(var(--box-w)/2));
  background:linear-gradient(90deg,#060709 0%,#2a2d33 45%,#121418 100%);box-shadow:inset -1px 0 0 rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center}
.gbox .sf{width:var(--box-d);height:var(--box-h);transform:translate(-50%,-50%) rotateY(90deg) translateZ(calc(var(--box-w)/2));background:#030405}
.gbox .tp{width:var(--box-w);height:var(--box-d);transform:translate(-50%,-50%) rotateX(90deg) translateZ(calc(var(--box-h)/2));
  background:linear-gradient(180deg,#26292f,#0b0c0f);box-shadow:inset 0 -1px 0 rgba(255,255,255,.14)}
.gbox .bt{width:var(--box-w);height:var(--box-d);transform:translate(-50%,-50%) rotateX(-90deg) translateZ(calc(var(--box-h)/2));background:#000}
.gbox .spine{writing-mode:vertical-rl;transform:rotate(180deg);font:700 calc(var(--box-d)*.22)/1 var(--sans);
  letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.9);white-space:nowrap}
.gbox .gb-bg{position:absolute;inset:0;background:center/cover no-repeat;opacity:.5;filter:grayscale(1) contrast(1.1)}
.gbox .gb-hero{position:absolute;left:50%;bottom:64px;width:106%;height:68%;transform:translateX(-50%);
  object-fit:contain;object-position:bottom center;filter:grayscale(1) contrast(1.08) drop-shadow(0 18px 30px rgba(0,0,0,.8));
  transition:filter .5s}
.gbox .gb-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);transition:filter .5s}
.gbox .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,transparent 26%,rgba(0,0,0,.2) 52%,rgba(0,0,0,.9) 88%)}
.gbox .gb-name{position:absolute;left:0;right:0;bottom:30px;text-align:center;padding:0 10px;
  font:800 calc(var(--box-w)*.115)/.95 var(--sans);letter-spacing:-.02em;text-transform:uppercase;
  color:#fff;text-shadow:0 3px 18px rgba(0,0,0,.8)}
.gbox .gb-meta{position:absolute;left:0;right:0;bottom:12px;text-align:center;
  font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.gbox .gb-meta b{color:#fff}
.gbox .gl{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,.03) 20%,transparent 44%),
    linear-gradient(to left,rgba(255,255,255,.3),rgba(255,255,255,.08) 3%,transparent 13%);
  box-shadow:inset -1px 0 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(255,255,255,.3)}
/* цвет возвращается при наведении: монохром — состояние покоя */
.gbox.is-hot .gb-hero,.gbox.is-hot .gb-art{filter:grayscale(0) contrast(1.05) drop-shadow(0 18px 30px rgba(0,0,0,.8))}

/* ролик лежит поверх картинки и проявляется, только когда пошёл — без вспышки пустоты */
.gbox .gb-live{opacity:0;transition:opacity .25s linear}
.gbox.is-live .gb-live{opacity:1}
.gbox.is-live .gb-hero:not(.gb-live){opacity:0}

/* ═════ крышка с названием из воронов (opts.flock) ═════ */
.gbox .gb-cover{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(110% 80% at 50% 30%,#1b1b1f 0%,#0b0b0d 60%,#050506 100%);
  transition:opacity .55s ease .05s}
.gbox .gb-cover::after{content:"";position:absolute;inset:10px;border:1px solid rgba(255,255,255,.08)}
.gbox .gb-flock{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.gbox.has-cover .gb-name{opacity:0;transition:opacity .4s ease}
.gbox.has-cover .gb-meta,.gbox.has-cover .gb-name{z-index:3}
.gbox.has-cover.is-hot .gb-cover{opacity:0;transition-delay:.12s}
.gbox.has-cover.is-hot .gb-name{opacity:1;transition-delay:.3s}