/* game-board: a game's ecosystem bento */
.gb{ position:absolute; left:calc(var(--vx) + var(--fl)); right:33px; top:33px; bottom:33px; display:flex; flex-direction:column; gap:8px; font-family:"Archivo", sans-serif; }
.gb-row{ flex:1 1 0; min-height:0; display:flex; gap:8px; }
.gb-t{ margin:0; position:relative; border-radius:14px; overflow:clip; min-width:0; flex:var(--g) 1 0; outline:none;
  transition:flex-grow .7s cubic-bezier(0.32, 0.72, 0, 1); }
.gb-t.is-big{ flex-grow:calc(var(--g) * 1.9); }
.gb-t:focus-visible{ outline:1.5px solid var(--d); outline-offset:3px; }
figure.gb-t > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.gb-action{ --g:3; }
.gb-type{ --g:2; background:var(--b); color:#fff; padding:20px 22px; display:flex; flex-direction:column; justify-content:space-between; container-type:inline-size; }
.gb-close{ --g:1; }
.gb-kit{ --g:2; }
.gb-kit img{ object-position:50% 50%; }
.gb-kit figcaption{ position:absolute; left:14px; bottom:12px; font:400 10px/1 "JetBrains Mono", monospace; letter-spacing:.12em; text-transform:uppercase; color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.4); }
.gb-deep{ --g:1; background:var(--d); color:var(--l); padding:18px; display:flex; flex-direction:column; justify-content:space-between; container-type:inline-size; }
.gb-aerial{ --g:3; }
.gb-logobox{ flex:1 1 auto; min-height:0; display:flex; align-items:flex-start; justify-content:flex-start; margin-bottom:12px; }
.gb-logo{ display:block; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; filter:drop-shadow(0 8px 18px rgba(0,0,0,.25)); }
.gb-line{ margin:0; font-stretch:62%; font-weight:900; text-transform:uppercase; letter-spacing:-.01em; line-height:.8; font-size:clamp(34px, 21cqw, 120px); }
.gb-sub{ margin:0; font-stretch:62%; font-weight:900; text-transform:uppercase; letter-spacing:-.01em; line-height:.84; font-size:clamp(20px, 15cqw, 44px); }
.gb-facts{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.gb-facts li{ display:flex; flex-direction:column; border-top:1px solid color-mix(in srgb, var(--l) 40%, transparent); padding-top:6px; }
.gb-facts b{ font-stretch:62%; font-weight:900; font-size:28px; line-height:.9; }
.gb-facts span{ font:400 9px/1.3 "JetBrains Mono", monospace; letter-spacing:.1em; text-transform:uppercase; opacity:.8; }
.gb-w{ display:inline-block; }
/* the build */
.gb.is-play .gb-t{ animation:gb-rise .8s cubic-bezier(0.32, 0.72, 0, 1) both; }
.gb.is-play .gb-type{ animation-delay:.05s; } .gb.is-play .gb-close{ animation-delay:.12s; } .gb.is-play .gb-kit{ animation-delay:.18s; }
.gb.is-play .gb-deep{ animation-delay:.24s; } .gb.is-play .gb-aerial{ animation-delay:.3s; }
.gb.is-play .gb-action img, .gb.is-play .gb-aerial img{ animation:gb-push 9s cubic-bezier(.2, 0, .1, 1) both; }
.gb.is-play .gb-logo{ animation:gb-land .7s cubic-bezier(0.34, 1.4, 0.64, 1) .45s both; }
.gb.is-play .gb-line .gb-w{ animation:gb-slam .5s cubic-bezier(0.34, 1.4, 0.64, 1) calc(.75s + var(--i) * .16s) both; }
.gb.is-play .gb-w--late{ animation:gb-slam .5s cubic-bezier(0.34, 1.4, 0.64, 1) calc(1.3s + var(--i) * .12s) both; }
.gb.is-play .gb-facts li{ animation:gb-rise .6s cubic-bezier(0.32, 0.72, 0, 1) 1.6s both; }
.gb.is-play .gb-facts li:nth-child(2){ animation-delay:1.72s; } .gb.is-play .gb-facts li:nth-child(3){ animation-delay:1.84s; }
@keyframes gb-rise{ from{ opacity:0; translate:0 18px; } }
@keyframes gb-push{ from{ scale:1.1; } to{ scale:1; } }
@keyframes gb-land{ from{ opacity:0; scale:.7; rotate:-6deg; } }
@keyframes gb-slam{ from{ opacity:0; scale:1.5; } }
@media (prefers-reduced-motion: reduce){ .gb *, .gb{ animation:none !important; } }

/* phones: the board stacks */
@media (max-width: 700px){
  .gb{ position:relative; left:auto; right:auto; top:auto; bottom:auto; }
  .gb-row{ flex-direction:column; }
  .gb-t{ flex:none; min-height:220px; } .gb-type, .gb-deep{ min-height:260px; }
}