/* ============================================================
   The arcade: the shell around the running minigame (engine/arcade.js owns
   the canvas). Its phone rules live here, not in responsive.css: one
   component, one file, and responsive.css still loads later.
   ============================================================ */

/* Above the panel and the call, below the report: a minigame is optional and
   the end of the shift is not. */
#arcade{position:absolute;inset:0;z-index:27;display:none;align-items:center;justify-content:center;
  background:rgba(6,9,14,.92);backdrop-filter:blur(3px);padding:14px}
#arcade.on{display:flex;animation:fadeIn .2s ease}

/* The height is declared (up to a ceiling, against the overlay not the
   viewport), so the stage gets what the four fixed rows leave. Auto height
   gave the canvas almost nothing, since a canvas has no content height. */
.mg{width:min(560px,100%);height:min(720px,100%);max-height:100%;
  display:flex;flex-direction:column;overflow:hidden}

/* The bar of live numbers. Two cells, so a long left-hand string can never
   push the score off the right edge. */
.mg-hud{display:flex;justify-content:space-between;gap:10px;padding:7px 14px;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--dim);
  border-bottom:1px solid var(--line);background:rgba(0,0,0,.2)}
.mg-hud span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#mgHudR{color:var(--hold);flex:0 0 auto}

/* The canvas takes the rest; `min-height:0` lets it shrink so the pads stay
   on screen. */
.mg-stage{position:relative;flex:1 1 auto;min-height:0;background:var(--ink)}
#mgView{display:block;width:100%;height:100%;touch-action:none}

/* The card before and after a round, over the board rather than instead of it:
   what you are about to play, and what you just played, are the same picture. */
.mg-card{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;
  justify-content:center;gap:8px;padding:18px;text-align:center;
  background:linear-gradient(180deg,rgba(13,17,23,.86),rgba(13,17,23,.96));
  overflow-y:auto;overscroll-behavior:contain}
.mg-card.on{display:flex;animation:fadeIn .18s ease}
.mg-card .mg-k{font-size:34px;line-height:1}
.mg-card h3{font-size:19px;letter-spacing:.02em}
.mg-blurb{font-size:13px;color:var(--dim);max-width:38ch}
.mg-goal{font-size:13px;color:var(--text);max-width:38ch}
.mg-help{list-style:none;font-family:var(--mono);font-size:11px;color:var(--dim);
  display:flex;flex-direction:column;gap:3px}
.mg-meta{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--hold)}
.mg-score{font-family:var(--mono);font-size:32px;color:var(--hold);line-height:1.1}
.mg-score small{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-top:4px}
/* The breakdown on the card after a round. A grid rather than a list, so four
   short facts read as four facts and not as a paragraph. */
.mg-sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(76px,1fr));gap:6px 10px;
  width:min(340px,100%);margin-top:2px}
.mg-sum div{border:1px solid var(--line);border-radius:6px;padding:5px 6px;background:rgba(0,0,0,.24)}
.mg-sum dt{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.mg-sum dd{font-family:var(--mono);font-size:14px;color:var(--text);margin-top:2px}

.mg-btns{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:4px}

/* The touch half of the key contract: a pad press is the key press. Hidden on
   a fine pointer. */
.mg-pads{display:none;gap:6px;padding:8px;border-top:1px solid var(--line);background:rgba(0,0,0,.22)}
.mg-pads.none{display:none!important}
.mg-pads button{flex:1 1 0;min-width:0;min-height:52px;
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--line);border-radius:8px;font-size:13px;font-weight:600;
  letter-spacing:.02em;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  transition:transform .07s,border-color .12s,background .12s}
/* The glass has no press of its own, so the button has to have one — the same
   confirmation the E button and the d-pad get. */
.mg-pads button.down{transform:scale(.94);border-color:var(--brand);background:var(--panel2)}
/* The joystick (def.stick): a base, and a knob that follows the thumb inside
   it. On the left, where the walking stick is; on the right for a southpaw. */
.mg-stick{flex:0 0 auto;position:relative;width:88px;height:88px;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.06),rgba(0,0,0,.28) 70%);
  border:1px solid var(--line);touch-action:none;align-self:center}
.mg-stick i{position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;
  background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);
  box-shadow:0 2px 6px rgba(0,0,0,.4);pointer-events:none}
.mg-stick.down{border-color:var(--brand)}
.mg-stick.down i{border-color:var(--brand)}
body.southpaw .mg-stick{order:9}
.mg-pads:has(.mg-stick){align-items:center}
@media (pointer:coarse){ .mg-pads{display:flex} }
@media (prefers-reduced-motion:reduce){ .mg-pads button.down{transform:none} }

.mg-foot{display:flex;align-items:center;gap:10px;padding:8px 12px;
  border-top:1px solid var(--line);background:rgba(0,0,0,.2)}
.mg-hint{flex:1 1 auto;min-width:0;font-family:var(--mono);font-size:10px;color:var(--dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mg-foot .btn{flex:0 0 auto}

/* ---- phones ----
   Every row above the canvas costs canvas. The hint line goes first; the pads
   restate it. */
@media (max-width:820px),(max-height:520px){
  #arcade{padding:8px}
  .mg{width:100%}
  .mg-hud{padding:5px 10px;font-size:10px}
  .mg-hint{display:none}
  .mg-foot{padding:6px 8px;justify-content:flex-end}
  .mg-card h3{font-size:17px}
  .mg-card .mg-k{font-size:28px}
  .mg-score{font-size:26px}
}
/* Landscape spends width to buy height back, exactly as the HUD bar does: the
   card lays out in a row so a 342px-high screen is not all chrome. */
/* Landscape: the fixed rows trimmed from about 162px to 100 of the ~374
   available. */
@media (max-height:460px) and (orientation:landscape){
  #arcade{padding:5px}
  .mg .sign-title{padding:5px 10px;font-size:10px}
  .mg-hud{padding:3px 10px}
  .mg-card{flex-direction:row;flex-wrap:wrap;gap:6px 16px;padding:10px}
  .mg-card .mg-k{font-size:22px}
  .mg-help{display:none}
  .mg-sum{width:auto;flex:1 1 240px;grid-template-columns:repeat(4,1fr)}
  .mg-pads{padding:5px;gap:5px}
  .mg-pads button{min-height:40px;font-size:12px}
  .mg-stick{width:66px;height:66px}
  .mg-stick i{width:30px;height:30px;margin:-15px 0 0 -15px}
  .mg-foot{padding:4px 8px}
  .mg-foot .btn{padding:4px 9px;font-size:11px}
}

/* ---- full screen (def.full) ----
   No frame, no title, no live bar and no footer: a game that draws its own
   HUD gets every pixel, and leaving is one small round button in the corner
   (or Esc). The notch and the home bar are kept clear. */
#arcade.full{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background:var(--ink)!important;backdrop-filter:none;-webkit-backdrop-filter:none}
#arcade.full .mg{width:100%;height:100%;max-height:none;border:0;border-radius:0;box-shadow:none;
  background:var(--ink);position:relative}
#arcade.full .mg::before,#arcade.full .mg::after{display:none}
#arcade.full .sign-title,#arcade.full .mg-hud,#arcade.full .mg-pads,#arcade.full .mg-hint{display:none!important}
#arcade.full .mg-foot{position:absolute;top:10px;right:10px;z-index:3;padding:0;border:0;background:none}
#arcade.full #mgQuit{width:38px;height:38px;padding:0;border-radius:50%;font-size:16px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  background:rgba(10,16,24,.72);border:1px solid rgba(255,255,255,.18);box-shadow:none}
#arcade.full .mg-card{background:radial-gradient(70% 70% at 50% 50%,rgba(13,17,23,.92),rgba(13,17,23,.78))}

/* ---- Matches against friends (engine/versus.js) ---- */
/* Everybody's score along the bottom while the round plays. */
#vsBoard{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);z-index:3;display:none;gap:6px;flex-wrap:wrap;
  justify-content:center;max-width:calc(100% - 24px);pointer-events:none}
#vsBoard.on{display:flex}
#vsBoard span{padding:4px 10px;border-radius:999px;background:rgba(13,17,23,.78);color:#dfe6f2;font:600 12px ui-monospace,Consolas,monospace;
  border:1px solid rgba(255,207,107,.35)}
#vsBoard span.me{border-color:rgba(77,163,255,.7)}
#vsBoard span.gone{opacity:.45}
#vsBoard b{color:#ffcf6b}
/* The invite: over the island and over a game, never in the way of the HUD's corners. */
#vsInvite{position:fixed;left:50%;top:calc(14px + env(safe-area-inset-top));transform:translate(-50%,-140%);z-index:60;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;max-width:calc(100vw - 32px);
  padding:10px 14px;border-radius:14px;background:rgba(27,34,48,.97);border:1px solid rgba(255,207,107,.5);
  box-shadow:0 10px 30px rgba(0,0,0,.45);color:#dfe6f2;transition:transform .25s ease;visibility:hidden}
#vsInvite.on{transform:translate(-50%,0);visibility:visible}
#vsInvite .vs-k{font-size:26px}
#vsInvite .vs-b{display:flex;gap:6px}
/* The lobby and the standings, on the game's cards. */
.vs-lobby,.vs-stand{margin:10px auto;max-width:320px;text-align:left}
.vs-h{font-weight:700;color:#ffcf6b;margin-bottom:4px}
.vs-lobby ul{margin:0;padding-left:18px}
.vs-count{font:800 56px ui-monospace,Consolas,monospace;text-align:center;color:#ffcf6b;margin:6px 0}
.vs-row{display:flex;justify-content:space-between;padding:3px 8px;border-radius:6px}
.vs-row.me{background:rgba(77,163,255,.14)}