/* ═══════════════════════════════════════════════════════════════
   careiti-gametop.css — the shared game bar
   ═══════════════════════════════════════════════════════════════ */

.cgt-bar {
  position: sticky;
  top: 0;
  z-index: 140;
  /* 1fr auto 1fr centres the title against the BAR. space-between would
     centre it between its neighbours, which drifts the moment the two
     sides differ in width — and they always do, because the left is a
     labelled button and the right is a pill plus a toggle. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 8px clamp(10px, 2vw, 18px);
  min-height: 60px;
  background: var(--print, #FFFDF8);
  border-bottom: 1px solid var(--rule, #DFD3BE);
  font-family: var(--f-album, system-ui, sans-serif);
}
@media (min-width: 700px) { .cgt-bar { min-height: 68px; } }

.cgt-back {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 14px 8px 10px;
  border: 1px solid var(--edge, #8E7C5E);
  border-radius: var(--r-ui, 8px);
  background: var(--print, #FFFDF8);
  color: var(--ink, #221E1A);
  font-size: max(calc(14px * var(--ct-k3, 1)), var(--ct-min, 0px));
  font-weight: 700;
  text-decoration: none;
}
.cgt-back svg { width: 22px; height: 22px; flex: 0 0 auto; }

.cgt-title {
  justify-self: center;
  margin: 0;
  min-width: 0;
  text-align: center;
  font-size: max(calc(17px * var(--ct-k4, 1)), var(--ct-min, 0px));
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink, #221E1A);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cgt-right {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Energy is shared across every game now, so it belongs on every game's
   bar rather than only on /my. */
.cgt-energy {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 44px;
  padding: 6px 12px;
  border: 1px solid var(--edge, #8E7C5E);
  border-radius: 999px;
  background: var(--paper, #F6F1E7);
  color: var(--ink, #221E1A);
  font-size: max(calc(14px * var(--ct-k3, 1)), var(--ct-min, 0px));
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.cgt-energy.is-empty { border-color: var(--stamp, #B4472F); color: var(--stamp, #B4472F); }
.cgt-bolt { font-size: 1.05em; line-height: 1; }

/* The accessibility bar used to float at x=975, y=402 — right edge,
   vertically centred, on top of the game. Docked here the handle is the
   same size as everything else on the bar, and the panel opens downward
   from it instead of sideways across the play area.

   The whole bar is moved (see absorb() for why moving only the handle
   killed the button), so it is re-laid-out here rather than re-parented
   piecemeal. */
.ca11y-bar.cgt-docked {
  position: static !important;
  top: auto !important; right: auto !important;
  bottom: auto !important; left: auto !important;
  transform: none !important;
  flex-direction: row;
  gap: 6px;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
}
.ca11y-bar.cgt-docked .ca11y-handle {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  padding: 0;
  border-radius: var(--r-ui, 8px) !important;
}
/* Collapsed: only the handle. Open: the controls drop out of the bar as a
   panel rather than pushing the title off-centre. */
.ca11y-bar.cgt-docked[data-ca11y-open="0"] .ca11y-btn { display: none !important; }
/* Every positional property here needs !important, because the base
   .cgt-docked rule above pins top/right/bottom/left to `auto !important` to
   flatten the floating bar into the header. Without it the open panel's
   plain `top`/`right` lose the cascade to those !important autos, the panel
   falls back to its static position inside the zero-width .cgt-right, and
   its 190px body hangs off the right edge of the screen — measured at
   right: -180px on a 393px phone, which is exactly how much of the panel
   was unreachable. */
.ca11y-bar.cgt-docked[data-ca11y-open="1"] {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  right: clamp(10px, 2vw, 18px) !important;
  left: auto !important;
  bottom: auto !important;
  max-width: calc(100vw - 20px);
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  min-width: 190px;
  padding: 8px !important;
  border: 1px solid var(--edge, #8E7C5E) !important;
  border-radius: var(--r-ui, 8px) !important;
  background: var(--print, #FFFDF8) !important;
  box-shadow: var(--sh-lift, 0 20px 44px rgba(58, 42, 20, .22)) !important;
  z-index: 160;
}
.ca11y-bar.cgt-docked[data-ca11y-open="1"] .ca11y-handle { align-self: flex-end; }
.cgt-bar { position: sticky; }

/* Controls carried over from a page's own bar (reaction's 語音說明 is the
   one that would otherwise have been destroyed). */
.cgt-moved {
  min-width: 44px;
  min-height: 44px;
  margin: 0 !important;
  border-radius: var(--r-ui, 8px);
}

/* Replaced by the bar. Kept in the DOM so a page script that still
   references one does not throw. */
.cgt-retired { display: none !important; }

/* A sticky bar must not sit under the tutorial or a game overlay. */
.cht-root, .cgm-sheet { z-index: 300; }

@media (max-width: 420px) {
  /* On the narrowest phones the labelled back button and the energy pill
     cannot both fit beside a centred title without squeezing it. The
     word goes, the icon and the 44px target stay. */
  .cgt-back span { display: none; }
  .cgt-back { padding: 8px 10px; }
}

/* Docked into the game bar there is no edge to hug, so the side-switch and
   dismiss controls do not apply — the bar is part of the header, not a
   floating overlay, and cannot cover anything. */
.ca11y-bar.cgt-docked .ca11y-admin { display: none !important; }
.ca11y-bar.cgt-docked { opacity: 1 !important; }