/* The fight stick (slice G3b): v0.3's cabinet plate, lever and six arcade buttons, on the lab's page. The plate is
   a physical object, so it is dark in both themes. body.stick-on shows it (coarse pointers by default; the
   "Fight stick" option forces it). On a phone held sideways the arena fills the screen and the stick floats over it. */
.deck{display:none;position:relative;height:190px;margin:var(--space-3) 0;border-radius:6px;overflow:hidden;
  background:linear-gradient(180deg,#2a2521 0,#17130f 100%),repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px);
  border-top:3px solid #3d332b;box-shadow:inset 0 10px 24px rgba(0,0,0,.6);touch-action:none;user-select:none;-webkit-user-select:none;
  font-family:ui-monospace,Menlo,Consolas,monospace}
body.stick-on .deck{display:block}
.deck::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,transparent,#F28C1E,transparent)}
.deck .plate{position:absolute;left:50%;top:10px;transform:translateX(-50%);font-size:9px;color:#6b5a4b;letter-spacing:3px;white-space:nowrap}
.deck .sys{position:absolute;left:50%;transform:translateX(-50%);top:28px;display:flex;gap:10px}
.deck .sys button{font:inherit;font-size:9px;letter-spacing:1px;color:#d8c8b0;background:#2a221d;border:1px solid #4a3d33;border-radius:10px;padding:5px 12px;min-height:28px}
.deck .sys button:active{background:#E6731A;color:#111}
#stick{position:absolute;left:22px;top:46px;width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle at 50% 45%,#1a1613 0,#0b0908 70%,#2b241f 100%);
  box-shadow:inset 0 6px 14px rgba(0,0,0,.9),0 2px 0 #3d332b;touch-action:none}
#stick .gate{position:absolute;inset:18px;border-radius:50%;border:2px solid #2f2824;
  background:repeating-conic-gradient(from 0deg,#15110e 0 22.5deg,#1c1713 22.5deg 45deg)}
#stick .shaft{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#555;box-shadow:0 0 0 3px #222}
#stick .ball{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ffd08a 0,#F28C1E 35%,#9a4d0c 100%);
  box-shadow:0 6px 10px rgba(0,0,0,.7),inset 0 -4px 8px rgba(0,0,0,.35);transition:transform .06s;pointer-events:none}
#stick.active .ball{transition:none}
#stick .lbl{position:absolute;font-size:8px;color:#8a7662;left:50%;transform:translateX(-50%);white-space:nowrap;letter-spacing:1px}
#stick .lbl.u{top:3px}#stick .lbl.d{bottom:3px}
.deck .buttons{position:absolute;right:14px;top:34px;width:220px;height:150px}
.deck .buttons button{position:absolute;width:58px;height:58px;border-radius:50%;border:0;padding:0;
  font:inherit;font-size:9px;font-weight:700;letter-spacing:0;color:#1a1208;cursor:pointer;touch-action:none;
  background:radial-gradient(circle at 50% 38%,var(--c2) 0,var(--c1) 55%,var(--c0) 100%);
  box-shadow:0 5px 0 var(--c0),0 8px 10px rgba(0,0,0,.7),inset 0 2px 3px rgba(255,255,255,.45),0 0 0 4px #1a1512,0 0 0 6px #3a2f27;
  text-shadow:0 1px 0 rgba(255,255,255,.35);transition:none}
.deck .buttons button:hover{background:radial-gradient(circle at 50% 38%,var(--c2) 0,var(--c1) 55%,var(--c0) 100%)}
.deck .buttons button:active,.deck .buttons button.pressed{transform:translateY(4px);box-shadow:0 1px 0 var(--c0),0 3px 6px rgba(0,0,0,.7),inset 0 3px 6px rgba(0,0,0,.35),0 0 0 4px #1a1512,0 0 0 6px #3a2f27}
.deck .buttons button span{display:block;font-size:7px;font-weight:400;color:rgba(0,0,0,.55);margin-top:2px}
.deck .b1{left:0;top:16px}.deck .b2{left:72px;top:4px}.deck .b3{left:144px;top:16px}
.deck .b4{left:8px;top:84px}.deck .b5{left:80px;top:72px}.deck .b6{left:152px;top:84px}
.deck .light{--c0:#7a3c0c;--c1:#F28C1E;--c2:#ffd08a}
.deck .heavy{--c0:#6e3208;--c1:#E6731A;--c2:#ffbf7a}
.deck .agni{--c0:#6a0f0f;--c1:#C8102E;--c2:#ff8a8a}
.deck .jump{--c0:#163a7a;--c1:#3B7DD8;--c2:#9cc4ff}
.deck .guard{--c0:#7a7568;--c1:#e8e2d2;--c2:#ffffff}
.deck .dodge{--c0:#1f5a2a;--c1:#3f9f4a;--c2:#a8f0a8}
@media (max-width:430px){#stick{left:10px;width:108px;height:108px;top:54px}.deck .buttons{right:6px;transform:scale(.88);transform-origin:right top}}
/* Phone held sideways: the arena fills the screen (letterboxed 16:9) and the stick floats over it. */
@media (orientation:landscape) and (max-height:520px){
  body.stick-on{overflow:hidden}
  body.stick-on .arena{position:fixed;inset:0;z-index:30;border:0;border-radius:0;aspect-ratio:auto;display:flex;align-items:center;justify-content:center;background:var(--stage)}
  body.stick-on .arena canvas{width:auto;height:100%;max-width:100%;aspect-ratio:16/9}
  body.stick-on .deck{position:fixed;inset:0;z-index:31;height:auto;margin:0;border:0;border-radius:0;background:transparent;box-shadow:none;pointer-events:none}
  body.stick-on .deck::before,body.stick-on .deck .plate{display:none}
  body.stick-on .deck>*{pointer-events:auto}
  body.stick-on #stick{left:calc(14px + env(safe-area-inset-left));top:auto;bottom:calc(14px + env(safe-area-inset-bottom));width:108px;height:108px;opacity:.9}
  body.stick-on .deck .buttons{right:calc(10px + env(safe-area-inset-right));top:auto;bottom:calc(8px + env(safe-area-inset-bottom));transform:scale(.86);transform-origin:right bottom;opacity:.92}
  body.stick-on .deck .sys{top:auto;bottom:calc(16px + env(safe-area-inset-bottom))}
  body.stick-on .stage-corner{display:none}
}