/* play.css - the WHIP game (play.html): the arena and WHIP in CSS 3D, the HUD and the pad.
   Colours: style.css's (colour_scheme.xml). */
.play-main { padding: 20px 0 48px; }
.play-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; margin-bottom: 14px; }
.play-head h1 { margin: 0; font: 700 28px var(--mono); letter-spacing: 4px; color: var(--accent); }
.play-head p { margin: 0; color: var(--sub); font-size: 14px; }

.game { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; }
.game > * { min-width: 0; }
@media (max-width: 820px) { .game { grid-template-columns: minmax(0, 1fr); } }

/* ---- the stage ---- */
.stage {
  position: relative; height: min(68vh, 560px); min-height: 340px;
  border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 35%, #141a33 0%, var(--bg) 75%);
  perspective: 1100px; perspective-origin: 50% 30%;
  cursor: grab; touch-action: none; user-select: none;
}
.stage:active { cursor: grabbing; }
.world, .floor, .bot { position: absolute; left: 50%; top: 58%; width: 0; height: 0; transform-style: preserve-3d; }
.world { will-change: transform; }

.floor {
  left: 0; top: 0;
}
.floor::before {   /* the arena floor: 2400 mm, a 200 mm grid */
  content: ""; position: absolute; left: -1200px; top: -1200px; width: 2400px; height: 2400px;
  background:
    linear-gradient(rgba(var(--glow2), .22) 2px, transparent 2px) 0 0 / 200px 200px,
    linear-gradient(90deg, rgba(var(--glow2), .22) 2px, transparent 2px) 0 0 / 200px 200px,
    radial-gradient(circle at 50% 50%, #12172c, #0a0d19);
  border: 6px solid rgba(var(--glow), .55);
  box-shadow: 0 0 60px rgba(var(--glow), .25);
}

.bot { left: 0; top: 0; }

/* a leg segment: a bar from its joint out along x, plus a face at right angles */
.seg {
  position: absolute; left: 0; top: 0; transform-origin: 0 50%; transform-style: preserve-3d;
  border-radius: 7px; backface-visibility: visible;
}
.seg i { position: absolute; inset: 0; border-radius: inherit; background: inherit; transform: rotateX(90deg); filter: brightness(.75); }
.seg.coxa  { background: linear-gradient(#2b3152, #161a2e); border: 1px solid #39406a; }
.seg.femur { background: linear-gradient(90deg, #22273f, #3a2030); border: 1px solid #4a2b3c; }
.seg.tibia { background: linear-gradient(90deg, #3a2030, var(--accent)); border: 1px solid rgba(var(--glow), .9);
             box-shadow: 0 0 10px rgba(var(--glow), .45); }

/* his body: two hexagon plates (clip-path through his hips), the sonar's eyes at the front */
.plate {
  position: absolute; left: -84px; top: -74px; width: 168px; height: 148px;
  clip-path: polygon(94% 24%, 50% 0%, 6% 24%, 6% 76%, 50% 100%, 94% 76%);
  background: linear-gradient(135deg, #1d2240, #0e1120 60%, #241426);
}
.plate.lower { transform: translateZ(-14px); filter: brightness(.6); }
.plate.upper { transform: translateZ(10px); }
.plate.upper::after {   /* his LED grid */
  content: ""; position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px;
  background: radial-gradient(circle, rgba(var(--glow), .95) 2px, transparent 3px) 0 0 / 9px 9px;
  filter: drop-shadow(0 0 6px rgba(var(--glow), .9));
}
.eyes { position: absolute; left: 74px; top: -22px; width: 26px; height: 44px; transform: translateZ(18px) rotateY(90deg); transform-origin: 0 50%; }
.eyes::before, .eyes::after {
  content: ""; position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: radial-gradient(circle, #8fd2ff 20%, #1A7BD9 45%, #0b1730 70%); border: 2px solid #2b3152;
}
.eyes::before { top: 0; } .eyes::after { bottom: 0; }
.body-shadow {
  position: absolute; left: 0; top: 0; margin: -100px 0 0 -120px; width: 240px; height: 200px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .55), transparent); transform: translateZ(1px);
}
.foot-shadow {
  position: absolute; left: -14px; top: -14px; width: 28px; height: 28px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .75), transparent);
}

/* pillars and orbs, standing on the floor */
.pillar { position: absolute; left: 0; top: 0; transform-style: preserve-3d; }
.pillar i {   /* a side: 220 mm tall (its x, turned upright), 180 mm wide */
  position: absolute; left: -110px; top: -90px; width: 220px; height: 180px; transform-origin: 50% 50%;
  background: linear-gradient(90deg, #262c4c, #161a2e); border: 1px solid #39406a; backface-visibility: visible;
}
.pillar b {
  position: absolute; left: -90px; top: -90px; width: 180px; height: 180px; transform: translateZ(220px);
  background: #2b3152; border: 1px solid rgba(var(--glow2), .6); box-shadow: 0 0 30px rgba(var(--glow2), .35);
}
.orb { position: absolute; left: 0; top: 0; transform-style: preserve-3d; }
.orb i {   /* its glow on the floor */
  position: absolute; left: -60px; top: -60px; width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 255, 136, .55), transparent); animation: orb-pulse 1.4s ease-in-out infinite;
}
.orb b {   /* the orb, upright and bobbing */
  position: absolute; left: -26px; top: -26px; width: 52px; height: 52px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #d9ffee, var(--green) 45%, #00552d);
  box-shadow: 0 0 30px var(--green); transform: translateZ(90px) rotateX(-90deg);
  animation: orb-bob 1.4s ease-in-out infinite;
}
@keyframes orb-pulse { 50% { opacity: .5; } }
@keyframes orb-bob { 50% { transform: translateZ(115px) rotateX(-90deg); } }
@media (prefers-reduced-motion: reduce) { .orb i, .orb b { animation: none; } }

/* ---- HUD over the stage ---- */
.hud {
  position: absolute; left: 12px; top: 12px; display: grid; grid-template-columns: auto auto; gap: 2px 12px;
  padding: 10px 14px; border-radius: 10px; background: rgba(8, 10, 18, .72); border: 1px solid var(--border);
  font: 13px var(--mono); pointer-events: none;
}
.hud span { color: var(--sub); }
.hud b { color: var(--text); font-weight: 600; }
.hud .score { color: var(--green); }
.toast {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%) translateY(10px); opacity: 0;
  padding: 8px 18px; border-radius: 999px; background: rgba(14, 17, 32, .92); border: 1px solid rgba(var(--glow), .6);
  font: 14px var(--mono); color: var(--text); transition: opacity .25s, transform .25s; pointer-events: none; white-space: nowrap;
}
.toast.on { opacity: 1; transform: translateX(-50%); }
.servos {
  position: absolute; right: 12px; top: 12px; margin: 0; padding: 8px 12px; border-radius: 10px;
  background: rgba(8, 10, 18, .72); border: 1px solid var(--border); font: 11px/1.45 var(--mono); color: var(--sub);
  pointer-events: none; white-space: pre;
}
.servos::before { content: "joint pulses, us (no trims)\A"; color: var(--accent); white-space: pre; }
@media (max-width: 560px) { .servos { display: none; } }

/* ---- the controller beside it ---- */
.pad-panel { display: flex; flex-direction: column; gap: 14px; }
.box { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 14px; }
.box h2 { margin: 0 0 10px; font: 700 12px var(--mono); letter-spacing: 3px; text-transform: uppercase; color: var(--accent); }
.dpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pbtn {
  appearance: none; border: 1px solid var(--border); border-radius: 10px; background: #12162a; color: var(--text);
  font: 600 14px var(--mono); padding: 14px 0; cursor: pointer; touch-action: none; user-select: none;
  transition: background .1s, border-color .1s, box-shadow .1s;
}
.pbtn:hover { border-color: rgba(var(--glow), .7); }
.pbtn.on, .pbtn:active { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 0 18px rgba(var(--glow), .55); }
.pbtn.wide { grid-column: span 3; }
.pbtn.half { padding: 10px 0; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gaits { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.gaits .pbtn { padding: 8px 0; font-size: 11px; letter-spacing: 1px; }
.gaits .pbtn.on { background: var(--accent2); border-color: var(--accent2); box-shadow: 0 0 14px rgba(var(--glow2), .5); }
.stepper { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; font: 13px var(--mono); color: var(--sub); }
.stepper .pbtn { width: 44px; padding: 6px 0; }
.keys { margin: 0; padding: 0; list-style: none; font: 12px/1.9 var(--mono); color: var(--sub); }
.keys kbd { display: inline-block; min-width: 22px; padding: 0 5px; margin-right: 4px; border: 1px solid var(--border); border-radius: 4px; background: #12162a; color: var(--text); text-align: center; font: inherit; }
.note { color: var(--sub); font-size: 14px; margin: 18px 0 0; }
.pbtn.wide { width: 100%; margin-top: 8px; }