/* Shared landscape and two horizontal lanes. Only the inputs use two columns. */
.split {
  --race-top: calc(var(--hud-height) + var(--prompt-height) - 14px);
  --controls-height: calc(var(--answer-height) + var(--keyboard-height) + var(--power-height));
}
.team, .team-b { position: static; }
.team > .hud { grid-row: 1; z-index: 4; }
.team > .prompt { grid-row: 2; z-index: 4; }
.team > .answer-panel { grid-row: 4; z-index: 4; }
.team > .keyboard { grid-row: 5; z-index: 4; }
.team > .power-panel { grid-row: 6; z-index: 4; }
.landscape { top: var(--race-top); bottom: var(--controls-height); }
.landscape img { inset: 0; width: 100%; height: 100%; object-fit: fill; }
.landscape::after { background: linear-gradient(#08121738, transparent 25%, transparent 88%, #08121738); }
.team .world.world-art {
  position: absolute; left: 0; right: 0; top: var(--race-top); bottom: var(--controls-height);
  --baseline: var(--lane-floor, 53%); --sprite: clamp(140px, 18vh, 200px);
  overflow: visible; background: transparent; isolation: auto; z-index: auto;
}
.team-b .world.world-art { --baseline: var(--lane-floor, 18%); z-index: auto; }
.world-figure { transition: none; transform: translate(-50%,calc(10% - var(--jump-lift, 0px))); z-index: 3; }
.world-figure:before { background: #08100ac2; transform: translateY(var(--jump-lift, 0px)) scale(calc(1 - var(--airborne,0)*.4)); opacity:calc(1 - var(--airborne,0)*.55); }
.world-figure .ground-seal {transform:translateY(var(--jump-lift,0px));}
.route { left: 10%; right: 10%; opacity: .35; }
.route i { background: var(--accent); border-color: var(--accent); width: 12px; height: 3px; }
.world-portal { left: 90%; height: calc(var(--sprite)*1.08); width: calc(var(--sprite)*1.08); transform: translate(-50%,4%); z-index: 3; }
/* Native Blender modules. Hiding one reveals the actual landscape behind it. */
.bridge-lane { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.bridge-tile { position: absolute; bottom: calc(var(--baseline) - var(--tile-height)*.55); width: calc(100% / 15 + .3px); height: var(--tile-height); }
.bridge-tile img { display: block; width: 100%; height: 100%; }
.bridge-tile[data-failed='true']::before { content: ''; position: absolute; inset: 30% 0 25%; background: linear-gradient(#778177,#46584f); border-bottom: 3px solid #24352d; }
.bridge-gap { position: absolute; bottom: calc(var(--baseline) - var(--tile-height)*.55); height: var(--tile-height); width: calc(100% / 15 + .3px); transform: translateX(-50%); z-index: 2; }
.bridge-gap::after { content: ''; position: absolute; top: calc(var(--tile-height)*.45 - 6px); left: -10px; width: 11px; height: 11px; border: 2px solid #bca5ed; background: #584477; transform: rotate(45deg); box-shadow: 0 0 7px #ad75e7; }
.bridge-gap[data-state='ready']::after { background: #d6faff; box-shadow: 0 0 16px var(--accent),0 0 6px white; }
.bridge-gap[data-state='crossed']::after { opacity: .2; }
.bridge-gap i { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; background-size: 100% 100%; background-repeat: no-repeat; }
.bridge-gap i:nth-child(2) { --turn: -32deg; --fall: 88px; }
.bridge-gap i:nth-child(3) { --turn: 48deg; --fall: 70px; }
.bridge-gap[data-breaking='true'] i { opacity: calc(1 - var(--break-progress)); transform: translate(calc(var(--break-progress) * var(--scatter, 0px)),calc(var(--break-fall) * var(--fall, 96px))) rotate(calc(var(--break-progress) * var(--turn, 28deg))); }
.bridge-gap i:first-child {--scatter:-17px;transform-origin:25% 45%;}
.bridge-gap i:nth-child(2) {--scatter:4px;transform-origin:50% 45%;}
.bridge-gap i:nth-child(3) {--scatter:22px;transform-origin:75% 45%;}
.team[data-motion='reduced'] .bridge-gap i { display: none; }
/* Both spell directions share the same stacking space above both bridges. */
.hex-shot, .hex-burst, .landing-dust { position: absolute; pointer-events: none; z-index: 5; }
.hex-shot { width: 22px; height: 22px; transform: translate(-50%,-50%) rotate(45deg); border: 2px solid #eedcff; border-radius: 35% 45% 35% 20%; background: radial-gradient(#fff,#dcabff 25%,#8d3cee 65%,#6520a8); box-shadow: 0 0 12px #c48aff,0 0 30px #9852ff; }
.hex-shot::after { content: ''; position: absolute; width: 45px; height: 9px; right: 8px; top: 8px; background: linear-gradient(90deg,transparent,#bc8cf3); transform: rotate(-25deg); filter: blur(3px); }
.hex-burst { width: 90px; height: 90px; border: 5px solid #d3adfc; border-radius: 50%; transform: translate(-50%,-50%) scale(calc(.2 + var(--impact-progress)*1.6)); opacity: calc(1 - var(--impact-progress)); box-shadow: 0 0 24px #ad61ff,inset 0 0 24px #e0b9ff; background: radial-gradient(#f4dbffbb,transparent 62%); }
.hex-burst[data-blocked='true'] { border-color: #c7f5ff; box-shadow: 0 0 24px #82d7ff,inset 0 0 24px #ecfcff; background: radial-gradient(#b7edff88,transparent 62%); }
.landing-dust { bottom: calc(var(--baseline) - 7px); width: 65px; height: 16px; border-radius: 50%; background: radial-gradient(ellipse,#d2cfb299,#81978b55,transparent 70%); transform: translateX(-50%) scale(calc(.5 + var(--dust-progress)*1.8)); opacity: calc(1 - var(--dust-progress)); filter: blur(2px); }
.team .binding { border-width: 2px; }
@media(max-height:650px) { .team .world.world-art { --sprite: 100px; } }

/* Threat is announced on the still-intact plate as soon as Hex is committed. */
.bridge-gap[data-pending='true']::before { content:''; position:absolute; inset:29% 8% 28%; border:2px solid #ddb4ff; border-radius:50%; background:radial-gradient(ellipse,#b257f755,transparent 70%); box-shadow:0 0 16px #ae64f5,inset 0 0 10px #deb0ff; animation:hex-target .7s ease-in-out infinite alternate; }
.bridge-gap[data-pending='true']::after { left:calc(50% - 6px); }
@keyframes hex-target { to { opacity:.5; } }
.team[data-motion='reduced'] .bridge-gap::before { animation:none; }