/* ══════════════════════════════════════════════════════════════════════
   PIXEL UP! · CABINET UX layer — touch pad, fullscreen, phone top bar
   Same ink / pop / bevel vocabulary as arcade.css. Classes: cb-*
   ══════════════════════════════════════════════════════════════════ */

/* ── top bar: icon buttons + the ⋯ menu ── */
.cab-top .cb-ib{padding:7px 10px;min-width:38px;justify-content:center;font-size:14px;line-height:1}
.cab-top .cb-ib.cb-on{background:var(--cool);border-color:var(--ink);color:var(--ink);box-shadow:var(--pop-0)}
.cab-top .cb-ib[hidden]{display:none}
.cb-morewrap{position:relative;display:inline-flex}
.cb-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:30;min-width:250px;padding:6px;
  background:var(--panel);border:3px solid var(--ink);border-radius:14px;box-shadow:var(--bevel),var(--pop-1);
  display:flex;flex-direction:column;gap:4px}
.cb-menu[hidden]{display:none}
.cb-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:9px;
  border:2px solid transparent;background:none;color:var(--txt);font:inherit;font-weight:800;font-size:13px;
  text-align:left;cursor:pointer}
.cb-menu button:hover,.cb-menu button:focus-visible{background:var(--panel-2);border-color:var(--line)}
.cb-menu .ic{width:22px;text-align:center;flex:none}
.cb-menu .tx{flex:1}
.cb-menu .tx small{display:block;color:var(--dim);font-weight:700;font-size:10.5px;letter-spacing:.04em}
.cb-menu .st{flex:none;font-size:10.5px;font-weight:900;letter-spacing:.08em;padding:3px 8px;border-radius:999px;
  border:2px solid var(--line);color:var(--dim)}
.cb-menu .st.on{background:var(--slime);color:var(--ink);border-color:var(--ink)}
.cb-mnote{padding:9px 10px;color:var(--txt-2);font-weight:700;font-size:12px;line-height:1.35;
  border-bottom:2px dashed var(--line);margin-bottom:2px}

/* ── the pad · portrait: a control deck UNDER the canvas, never over it ── */
.cab-in{position:relative}
.cb-pad{position:relative;flex:none;padding:10px 16px 12px;background:var(--ink-2);border-top:3px solid var(--ink);
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:none}
.cb-row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.cb-digits{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:0 34px 10px}
.cb-n{width:38px;height:34px;border-radius:9px;border:2.5px solid var(--ink);background:var(--panel-2);
  color:var(--txt);font:inherit;font-family:var(--mono);font-weight:900;font-size:15px;
  box-shadow:var(--bevel),var(--pop-0);touch-action:none;cursor:pointer}

/* d-pad: one cross, 8-way, slide between directions */
.cb-dpad{position:relative;width:132px;height:132px;flex:none;touch-action:none;cursor:pointer}
.cb-dpad.h{height:64px;width:150px}
.cb-dpad.v{width:64px;height:132px}
.cb-d{position:absolute;display:flex;align-items:center;justify-content:center;width:44px;height:44px;
  background:var(--panel-2);border:3px solid var(--ink);color:var(--txt-2);font-size:15px;
  box-shadow:var(--bevel);pointer-events:none}
.cb-d-up{left:44px;top:0;border-radius:10px 10px 0 0;border-bottom:0;height:47px}
.cb-d-down{left:44px;bottom:0;border-radius:0 0 10px 10px;border-top:0;height:47px}
.cb-d-left{top:44px;left:0;border-radius:10px 0 0 10px;border-right:0;width:47px}
.cb-d-right{top:44px;right:0;border-radius:0 10px 10px 0;border-left:0;width:47px}
.cb-d-hub{position:absolute;left:44px;top:44px;width:44px;height:44px;background:var(--panel-2);
  border-top:3px solid transparent;pointer-events:none}
.cb-dpad.h .cb-d-left,.cb-dpad.h .cb-d-right{top:0;width:72px;height:64px;border:3px solid var(--ink);border-radius:12px}
.cb-dpad.h .cb-d-right{left:auto;right:0}
.cb-dpad.v .cb-d-up,.cb-dpad.v .cb-d-down{left:0;width:64px;height:62px;border:3px solid var(--ink);border-radius:12px}
.cb-dpad.h .cb-d-hub,.cb-dpad.v .cb-d-hub{display:none}
.cb-d.on{background:var(--cool);color:var(--ink)}
.cb-dpad:not(.h):not(.v)::after{content:'';position:absolute;left:44px;top:44px;width:44px;height:44px;
  background:var(--panel-2);pointer-events:none;
  background-image:radial-gradient(circle,var(--ink) 0 9px,transparent 10px)}

/* action buttons: round, arcade colours, the key + the verb the game gives it */
.cb-acts{display:grid;grid-template-columns:repeat(2,auto);gap:10px 12px;justify-content:end;align-items:center}
.cb-acts.n1{grid-template-columns:auto}
.cb-acts.n3,.cb-acts.n5,.cb-acts.n6{grid-template-columns:repeat(3,auto)}
.cb-a{width:62px;height:62px;border-radius:50%;border:3px solid var(--ink);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1px;font:inherit;cursor:pointer;touch-action:none;
  box-shadow:var(--bevel),var(--pop-1);color:var(--ink);padding:0}
.cb-acts.n1 .cb-a{width:76px;height:76px}
.cb-a b{font-weight:900;font-size:12.5px;letter-spacing:.03em;line-height:1}
.cb-a small{font-weight:800;font-size:9.5px;letter-spacing:.02em;line-height:1;opacity:.8;max-width:56px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cb-a0{background:var(--hot);color:#fff}
.cb-a1{background:var(--sun)}
.cb-a2{background:var(--cool)}
.cb-a3{background:var(--slime)}
.cb-a.on,.cb-n.on{transform:translate(3px,3px);box-shadow:var(--bevel-in)}
.cb-hide{position:absolute;top:6px;left:50%;transform:translateX(-50%);width:28px;height:28px;border-radius:8px;border:2px solid var(--line);
  background:var(--panel);color:var(--dim);font:inherit;font-weight:900;font-size:12px;cursor:pointer;line-height:1}
.cb-hide:hover{color:var(--hot);border-color:var(--hot)}

.cb-pad.cb-asleep{visibility:hidden;pointer-events:none}

/* while the pad is hidden on a touch screen: one slim strip to bring it back */
.cb-chip{flex:none;display:block;width:100%;padding:8px 12px;background:var(--ink-2);border:0;border-top:3px solid var(--ink);
  color:var(--txt-2);font:inherit;font-weight:900;font-size:12px;letter-spacing:.05em;cursor:pointer}
.cb-chip:hover{color:var(--cool)}

/* ── landscape hint (wide game, portrait phone) — never takes canvas taps ── */
.cb-rot{position:absolute;left:50%;top:14px;transform:translateX(-50%);z-index:6;display:flex;align-items:center;gap:8px;
  max-width:calc(100% - 28px);padding:7px 8px 7px 10px;border-radius:12px;background:var(--sun);color:var(--ink);
  border:2.5px solid var(--ink);box-shadow:var(--pop-1);font-weight:900;font-size:11.5px;line-height:1.25;
  pointer-events:none;flex-wrap:wrap;justify-content:center;animation:cb-rot-in .3s ease-out}
.cb-rot button{pointer-events:auto;border:2px solid var(--ink);background:var(--paper);color:var(--ink);
  border-radius:7px;font:inherit;font-weight:900;font-size:11px;padding:3px 7px;cursor:pointer}
.cb-rot .ph{width:12px;height:18px;border:2.5px solid var(--ink);border-radius:3px;flex:none;
  animation:cb-turn 1.6s ease-in-out infinite}
@keyframes cb-turn{0%,30%{transform:rotate(0)}60%,100%{transform:rotate(-90deg)}}
@keyframes cb-rot-in{from{opacity:0;transform:translate(-50%,-8px)}}

/* ── fullscreen: the cabinet becomes the whole screen ── */
.cab.cb-fs{padding:0;background:#07040c}
.cab.cb-fs .cab-in{width:100%;height:100%;max-height:none;border:0;border-radius:0}
.cab.cb-fs .cab-stage{flex:1}

/* ── phones: the top bar wraps into title+close / controls rows instead of overflowing ── */
@media (max-width:640px){
  .cab{padding:6px}
  .cab-in{border-radius:16px;border-width:3px}
  .cab-top{flex-wrap:wrap;gap:5px;row-gap:8px;padding:8px 10px}
  .cab-top h2{order:0;flex:1 1 0;min-width:0;font-size:15px}
  .cab-top .sp{display:none}
  .cab-top #btnClose{order:1}
  .cab-top::after{content:'';order:2;flex-basis:100%;height:0}
  .cab-top > :not(h2):not(#btnClose):not(.sp){order:3}
  /* .cab-btn has `transition:.14s` (all) — keep layout props out of it so the bar never animates its reflow */
  .cab-top > *{transition-property:color,background-color,border-color,box-shadow,transform}
  .cab-top .cab-btn,.cab-top .so-btn{padding:6px 7px;font-size:11.5px;gap:4px;letter-spacing:.01em}
  .cab-top .cb-ib{min-width:34px;padding:6px 7px;font-size:13px}
  /* everything the wide-only buttons do is also in the ⋯ menu */
  .cab-top .cb-wide{display:none}
  .cab-top #cbMore{margin-left:auto}
  .cb-menu{right:0;min-width:min(260px,calc(100vw - 30px))}
}
@media (max-width:360px){
  .cb-dpad{transform:scale(.88);transform-origin:left center}
  .cb-a{width:54px;height:54px}
}

/* ── landscape phones: the pad floats over the empty side margins ── */
@media (orientation:landscape) and (max-height:540px){
  .cab{padding:4px}
  .cab-top{padding:5px 10px;gap:8px}
  .cab-top h2{font-size:14px}
  .cab-top .cab-btn,.cab-top .so-btn{padding:5px 9px;font-size:11.5px}
  .cab-hud{padding:5px 12px;gap:12px}
  .cb-pad{position:absolute;left:0;right:0;bottom:var(--cb-hud-h,44px);z-index:7;background:none;border:0;
    padding:8px 14px;pointer-events:none}
  .cb-pad .cb-dpad,.cb-pad .cb-a,.cb-pad .cb-n,.cb-pad .cb-hide{pointer-events:auto}
  .cb-pad .cb-d,.cb-pad .cb-a,.cb-pad .cb-n{opacity:.82}
  .cb-pad .cb-hide{top:-30px;right:14px;left:auto;transform:none}
  .cb-digits{position:absolute;left:50%;top:-6px;transform:translate(-50%,-100%);margin:0;pointer-events:none}
  .cb-row{align-items:flex-end}
  .cb-chip{display:none}
}

@media (prefers-reduced-motion: reduce){
  .cb-rot,.cb-rot .ph{animation:none}
  .cb-a.on,.cb-n.on{transform:none}
}

/* mid widths (tablets, landscape phones): 🎮 and ⛶ live in the ⋯ menu so the title keeps its room */
@media (max-width:900px){ .cab-top .cb-wide{display:none} }