/* Arcade — Match Tickets + Free-play Timer (owner: E). Arena design system: ink outline + bevel + hard drop.
   Tokens only; per-game color arrives as --g. */

.arcade { display: flex; flex-direction: column; gap: var(--s-5); }
.arcade > *, .arc-body > * { flex-shrink: 0; }
.arc-body { gap: var(--s-5); }

.arc-hint { margin: var(--s-1) 0 0; text-align: center; font-size: var(--fs-sm); font-weight: 700; color: var(--text-dim); line-height: 1.4; }
.arc-center { text-align: center; }
.arc-gt { display: inline-flex; align-items: center; gap: 3px; color: var(--gold); font-family: var(--font-display); font-weight: 400; text-shadow: var(--ts-outline-sm); white-space: nowrap; }
.arc-gt .ic { font-size: 1.15em; }

/* Colored game-icon badge (tiles, picks, log rows, ticket) */
.arc-badge {
  --g: var(--blue-btn);
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  background: linear-gradient(180deg, color-mix(in srgb, var(--g) 80%, #fff) 0%, var(--g) 50%, color-mix(in srgb, var(--g) 78%, #000) 100%);
  border: 2px solid var(--ink);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.3), inset 0 -2px 0 rgba(0, 0, 0, 0.2);
  font-size: 22px;
  line-height: 1;
}

/* ---------- Bank header (the "vault") ---------- */
.arc-bank {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-3) var(--s-4) var(--s-4);
  text-align: center;
  background: var(--grad-panel);
  border: 2px solid var(--ink);
  border-radius: var(--r-lg);
  box-shadow: var(--bevel), var(--shadow-card);
}
.arc-bank__label {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  color: var(--text-dim);
  text-shadow: var(--ts-outline-sm);
}
.arc-bank__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-width: 70%;
  padding: var(--s-1) var(--s-5) var(--s-1) var(--s-2);
  border-radius: var(--r-pill);
  background: rgba(13, 24, 56, 0.45);
  border: 2px solid var(--ink);
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.25);
}
.arc-bank__coin { display: inline-flex; font-size: 54px; margin: -6px 0 -6px -10px; }
.arc-bank__num {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(44px, 13vw, 60px);
  line-height: 1.1;
  color: var(--gold);
  text-shadow: -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 2px 2px 0 var(--ink), 0 4px 0 var(--ink);
  font-variant-numeric: tabular-nums;
}
.arc-bank__sub { font-size: var(--fs-sm); font-weight: 800; color: var(--text-dim); }
.arc-bank__num.is-bump { animation: arc-bump var(--t-slow) var(--ease-pop); }
.arc-bank__num.is-drain.is-bump { animation: arc-drain 600ms var(--ease-out); }
@keyframes arc-bump { 40% { transform: scale(1.12); } }
@keyframes arc-drain { 30% { transform: scale(0.88); color: var(--red); } }

/* Live: the header turns into a red "draining" plaque */
.arcade.is-live .arc-bank__label::after { content: ' · Live'; color: var(--red); }
.arcade.is-live .arc-bank__row { background: color-mix(in srgb, var(--red-btn-edge) 45%, rgba(13, 24, 56, 0.6)); }

/* ---------- Shelf (match tickets) ---------- */
.arc-shelf .section-title, .arc-timer .section-title, .arc-log .section-title { margin-top: 0; }
.arc-edit.btn { --btn-h: 44px; font-size: 16px; padding-left: var(--s-3); padding-right: var(--s-4); }

.arc-games { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.arc-game {
  --g: var(--blue-btn);
  --face: var(--g);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-height: 188px;
  padding: var(--s-3) var(--s-2) var(--s-2);
  border-radius: var(--r-lg);
  border: 2.5px solid var(--ink);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 42%, rgba(0, 0, 0, 0.18) 100%),
    var(--face);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.35), inset 0 -4px 0 rgba(0, 0, 0, 0.22), 0 5px 0 var(--ink-soft);
  color: #fff;
  text-align: center;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast);
}
.arc-game:active { transform: translateY(4px); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.35), inset 0 -4px 0 rgba(0, 0, 0, 0.22), 0 1px 0 var(--ink-soft); }

.arc-game__tag {
  position: absolute;
  top: 6px;
  right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 28px;
  padding: 0 7px;
  border-radius: var(--r-pill);
  background: var(--green-lo);
  border: 2px solid var(--ink);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35);
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1;
  text-shadow: var(--ts-outline-sm);
}
.arc-game__emoji {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin-top: 2px;
  border-radius: 50%;
  background: rgba(13, 24, 56, 0.28);
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.18);
  font-size: 52px;
  line-height: 1;
}
.arc-game__name {
  max-width: 100%;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  line-height: 1.1;
  text-shadow: var(--ts-outline);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 var(--s-1) 3px;
}
.arc-game__price {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  min-height: 38px;
  margin-top: auto;
  padding: 0 var(--s-2);
  border-radius: var(--r-md);
  background: rgba(13, 24, 56, 0.55);
  border: 2px solid var(--ink);
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.25);
  font-size: var(--fs-sm);
  font-weight: 800;
  color: var(--text-dim);
  white-space: nowrap;
}
.arc-game__price .ic { font-size: 22px; }
.arc-game__price b { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-lg); color: var(--gold); text-shadow: var(--ts-outline-sm); }
.arc-game__price span { overflow: hidden; text-overflow: ellipsis; }
.arc-game__afford {
  font-size: var(--fs-sm);
  font-weight: 900;
  color: #fff;
  text-shadow: var(--ts-outline-sm);
}

/* Can't afford: slate face, dimmed icon, status in a red plate */
.arc-game.is-broke { --face: color-mix(in srgb, var(--g) 22%, var(--slate-lo)); }
.arc-game.is-broke .arc-game__emoji .ic { filter: grayscale(0.85) brightness(0.85); opacity: 0.7; }
.arc-game.is-broke .arc-game__name { color: #e3e9f6; }
.arc-game.is-broke .arc-game__price b { color: #e8d9a8; }
.arc-game.is-broke .arc-game__tag { background: var(--slate-edge); min-width: 30px; padding: 0 4px; font-size: 16px; }
.arc-game.is-broke .arc-game__afford { color: #ffd2cd; }

/* Armed (first tap): yellow ring + gold "tap to punch" plate. The ONE gold thing in this state. */
.arc-game__arm {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--s-2);
  background: rgba(13, 24, 56, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-fast);
}
.arc-game__arm-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: var(--r-md);
  background: var(--grad-gold);
  border: 2.5px solid var(--ink);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5), inset 0 -4px 0 var(--yellow-edge), 0 4px 0 var(--ink-soft);
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1;
  color: #fff;
  text-shadow: var(--ts-outline-sm);
  white-space: nowrap;
  transform: scale(0.6);
  transition: transform var(--t-med) var(--ease-pop);
}
.arc-game__arm-pill .ic { font-size: 24px; }
.arc-game.is-armed { box-shadow: inset 0 0 0 3px var(--yellow), inset 0 -4px 0 rgba(0, 0, 0, 0.22), 0 5px 0 var(--ink-soft); }
.arc-game.is-armed .arc-game__arm { opacity: 1; }
.arc-game.is-armed .arc-game__arm-pill { transform: none; animation: arc-armed 0.5s 0.25s ease-in-out infinite alternate; }
@keyframes arc-armed { to { transform: scale(1.07); } }

.is-shake { animation: arc-shake 420ms cubic-bezier(.36, .07, .19, .97) both; }
@keyframes arc-shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-8px); }
  40%, 60% { transform: translateX(8px); }
}

/* ---------- Ticket punch animation (appended to body) ---------- */
.arc-ticket {
  --g: var(--blue-btn);
  position: fixed;
  z-index: var(--z-cinematic);
  display: flex;
  width: 300px;
  height: 108px;
  margin: -54px 0 0 -150px;
  border-radius: var(--r-md);
  background: var(--paper);
  border: 3px solid var(--ink);
  color: var(--paper-ink);
  box-shadow: inset 0 -5px 0 var(--paper-2), 0 8px 0 var(--ink-soft), 0 18px 30px rgba(5, 12, 35, 0.45);
  pointer-events: none;
  animation: arc-ticket-in 520ms var(--ease-pop) both;
}
.arc-ticket__stub {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 76px;
  border-radius: 9px 0 0 9px;
  border-right: 3px dashed var(--ink);
  background: var(--g);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  line-height: 1.1;
  color: #fff;
  text-shadow: var(--ts-outline-sm);
}
.arc-ticket__main { flex: 1; display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3); min-width: 0; }
.arc-ticket__emoji.arc-badge { width: 52px; height: 52px; font-size: 38px; border-radius: var(--r-md); }
.arc-ticket__txt { min-width: 0; }
.arc-ticket__name { font-family: var(--font-display); font-size: var(--fs-lg); line-height: 1.1; color: var(--paper-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arc-ticket__unit { display: flex; align-items: center; gap: 2px; font-weight: 900; font-size: var(--fs-sm); white-space: nowrap; }
.arc-ticket__unit .ic { font-size: 18px; }
.arc-ticket__hole {
  position: absolute;
  left: 61px;
  top: 50%;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  border-radius: 50%;
  background: var(--bg-2);
  border: 3px solid var(--ink);
  box-shadow: inset 0 4px 0 rgba(0, 0, 0, 0.4);
  transform: scale(0);
}
.arc-ticket.is-punched { animation: arc-ticket-punch 260ms ease-out both; }
.arc-ticket.is-punched .arc-ticket__hole { animation: arc-hole 200ms var(--ease-pop) both; }
.arc-ticket.is-out { animation: arc-ticket-out 520ms ease-in both; }
@keyframes arc-ticket-in { from { transform: translateY(60px) scale(0.3) rotate(-12deg); opacity: 0; } to { transform: translateY(-120px) rotate(-4deg); opacity: 1; } }
@keyframes arc-ticket-punch { from { transform: translateY(-120px) rotate(-4deg) scale(0.94); } to { transform: translateY(-120px) rotate(-4deg); } }
@keyframes arc-hole { to { transform: scale(1); } }
@keyframes arc-ticket-out { from { transform: translateY(-120px) rotate(-4deg); opacity: 1; } to { transform: translate(140px, -420px) rotate(24deg) scale(0.6); opacity: 0; } }

/* ---------- Free-play timer card ---------- */
.arc-timer-card { display: flex; flex-direction: column; gap: var(--s-3); }
.arc-timer-card__desc { margin: 0; font-size: var(--fs-md); font-weight: 700; color: var(--text-dim); line-height: 1.4; }
.arc-picks {
  display: flex;
  gap: var(--s-2);
  overflow-x: auto;
  margin: 0 calc(-1 * var(--s-4));
  padding: 2px var(--s-4) 6px;
  scrollbar-width: none;
}
.arc-picks::-webkit-scrollbar { display: none; }
.arc-pick {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 48px;
  padding: 0 var(--s-3) 0 6px;
  border-radius: var(--r-md);
  border: 2px solid var(--ink);
  background: rgba(13, 24, 56, 0.35);
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.2);
  color: var(--text-dim);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  text-shadow: var(--ts-outline-sm);
  white-space: nowrap;
  cursor: pointer;
}
.arc-pick .arc-badge { width: 34px; height: 34px; font-size: 24px; }
.arc-pick.is-on {
  background: var(--surface-3);
  color: #fff;
  box-shadow: inset 0 2px 0 var(--panel-hi), inset 0 0 0 3px #fff, 0 3px 0 var(--ink-soft);
}
.arc-pick:active { transform: translateY(2px); }

/* ---------- Live timer view ---------- */
.arc-live { display: flex; flex-direction: column; align-items: stretch; gap: var(--s-4); }
.arc-live__panel { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4) var(--s-4); }
.arc-live__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  max-width: 100%;
  min-height: 44px;
  padding: 4px var(--s-4) 4px var(--s-3);
  border-radius: var(--r-pill);
  background: rgba(13, 24, 56, 0.55);
  border: 2px solid var(--ink);
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.25);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  text-shadow: var(--ts-outline-sm);
}
.arc-live__dot { width: 14px; height: 14px; flex: none; border-radius: 50%; background: var(--red-btn); border: 2px solid var(--ink); animation: arc-blink 1s steps(2) infinite; }
@keyframes arc-blink { 50% { background: var(--red-btn-edge); } }
.arc-live__tag { color: var(--red); }
.arc-live__badge .arc-badge { width: 32px; height: 32px; font-size: 22px; }
.arc-live__game { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arc-live__ring { display: grid; place-items: center; padding: 6px; border-radius: 50%; background: rgba(13, 24, 56, 0.35); border: 2px solid var(--ink); box-shadow: inset 0 4px 0 rgba(0, 0, 0, 0.22); }
.arc-live__ring .ring__track { stroke: rgba(13, 24, 56, 0.6); }
.arc-live__ring .ring__sub { font-size: var(--fs-md); }
.arc-live__ring .ring__center, .arc-live__ring .fb-ring__center { font-variant-numeric: tabular-nums; }
.arc-live__played {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  color: #fff;
  text-shadow: var(--ts-outline);
  font-variant-numeric: tabular-nums;
}
.arc-live__warn {
  display: none;
  align-self: center;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: 0 var(--s-4) 0 var(--s-3);
  border-radius: var(--r-pill);
  background: var(--orange);
  border: 2px solid var(--ink);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35), 0 3px 0 var(--ink-soft);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  color: #fff;
  text-shadow: var(--ts-outline-sm);
}
.arc-live__warn .ic { font-size: 24px; }
.arc-live.is-low .arc-live__warn { display: inline-flex; }
.arc-live.is-low .arc-live__ring { animation: arc-low 1s ease-in-out infinite; }
@keyframes arc-low { 50% { transform: scale(1.03); } }

/* ---------- Time's up overlay ---------- */
.arc-timeup {
  position: fixed;
  inset: 0;
  z-index: var(--z-cinematic);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-5);
  padding: var(--s-5) var(--s-4);
  text-align: center;
  background: rgba(13, 24, 56, 0.82);
  animation: arc-fade var(--t-med) ease-out both;
}
.arc-timeup .btn--xl { width: 100%; max-width: 360px; }
.arc-timeup__panel {
  position: relative;
  width: 100%;
  max-width: 360px;
  padding: var(--s-7) var(--s-4) var(--s-5);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--red-btn) 0%, var(--red-btn-lo) 100%);
  border: 3px solid var(--ink);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.35), inset 0 -5px 0 rgba(0, 0, 0, 0.22), var(--shadow-pop);
  animation: arc-slam 520ms var(--ease-pop) both;
}
.arc-timeup__icon {
  position: absolute;
  top: -48px;
  left: 50%;
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  margin-left: -44px;
  border-radius: 50%;
  background: var(--paper);
  border: 3px solid var(--ink);
  box-shadow: inset 0 -5px 0 var(--paper-2), 0 4px 0 var(--ink-soft);
  font-size: 60px;
  animation: arc-ring 0.5s ease-in-out 6 alternate;
}
.arc-timeup__gg {
  font-family: var(--font-display);
  font-size: clamp(48px, 15vw, 64px);
  line-height: 1;
  color: #fff;
  text-shadow: -2.5px -2.5px 0 var(--ink), 2.5px -2.5px 0 var(--ink), -2.5px 2.5px 0 var(--ink), 2.5px 2.5px 0 var(--ink), 0 5px 0 var(--ink);
}
.arc-timeup__sub { margin-top: var(--s-1); font-family: var(--font-display); font-size: var(--fs-2xl); color: var(--gold); text-shadow: var(--ts-outline); }
.arc-timeup__msg { margin: var(--s-3) auto 0; max-width: 280px; color: #fff; font-size: var(--fs-md); font-weight: 800; line-height: 1.4; }
@keyframes arc-fade { from { opacity: 0; } }
@keyframes arc-slam { from { transform: scale(2.2); opacity: 0; } }
@keyframes arc-ring { from { transform: rotate(-10deg); } to { transform: rotate(10deg); } }

/* ---------- Spend log ---------- */
.arc-log__list {
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-lg);
  background: rgba(13, 24, 56, 0.35);
  border: 2px solid var(--ink);
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.2);
}
.arc-log__row { display: flex; align-items: center; gap: var(--s-3); min-height: 60px; border-bottom: 2px solid var(--line); }
.arc-log__row:last-child { border-bottom: 0; }
.arc-log__emoji.arc-badge { width: 40px; height: 40px; font-size: 28px; }
.arc-log__main { flex: 1; min-width: 0; }
.arc-log__name { font-family: var(--font-display); font-size: var(--fs-md); text-shadow: var(--ts-outline-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arc-log__meta { display: flex; align-items: center; gap: 4px; font-size: var(--fs-sm); font-weight: 700; color: var(--text-dim); }
.arc-log__meta .ic { font-size: 16px; }
.arc-log__amt { display: inline-flex; align-items: center; gap: 3px; font-family: var(--font-display); font-size: var(--fs-lg); color: #ff9c92; text-shadow: var(--ts-outline-sm); font-variant-numeric: tabular-nums; }
.arc-log__amt .ic { font-size: 22px; }

/* ---------- Shelf editor (sheet) ---------- */
.arc-editor .btn { width: 100%; }
.arc-ed { --g: var(--blue-btn); display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-3); }
.arc-ed__top { display: flex; align-items: center; gap: var(--s-2); }
.arc-ed__emoji {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border-radius: var(--r-md);
  border: 2.5px solid var(--ink);
  background: linear-gradient(180deg, color-mix(in srgb, var(--g) 80%, #fff) 0%, var(--g) 50%, color-mix(in srgb, var(--g) 78%, #000) 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35), inset 0 -3px 0 rgba(0, 0, 0, 0.22), 0 3px 0 var(--ink-soft);
  font-size: 38px;
  cursor: pointer;
}
.arc-ed__emoji:active { transform: translateY(2px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35), inset 0 -3px 0 rgba(0, 0, 0, 0.22); }
.arc-ed__emoji.is-open { box-shadow: inset 0 0 0 3px #fff, 0 3px 0 var(--ink-soft); }
.arc-ed__emoji-edit {
  position: absolute;
  right: -7px;
  bottom: -7px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--ink);
  font-size: 15px;
}
.arc-ed__name { flex: 1; min-width: 0; min-height: 48px; }
.arc-ed__del {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: var(--r-md);
  border: 2px solid var(--ink);
  background: linear-gradient(180deg, var(--red-btn) 0%, var(--red-btn-lo) 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35), inset 0 -3px 0 var(--red-btn-edge), 0 3px 0 var(--ink-soft);
  font-size: 26px;
  cursor: pointer;
}
.arc-ed__del:active { transform: translateY(2px); }
.arc-ed__emojis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-2);
  padding: var(--s-2);
  border-radius: var(--r-md);
  background: rgba(13, 24, 56, 0.35);
  border: 2px solid var(--ink);
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.2);
}
.arc-ed__emojis button {
  display: grid;
  place-items: center;
  min-height: 52px;
  padding: 0;
  border-radius: var(--r-sm);
  border: 2px solid var(--ink);
  background: var(--grad-panel);
  box-shadow: inset 0 2px 0 var(--panel-hi), inset 0 -3px 0 var(--panel-lo);
  font-size: 34px;
  cursor: pointer;
}
.arc-ed__emojis button:active { transform: translateY(2px); }
.arc-ed__emojis button.is-on { background: linear-gradient(180deg, color-mix(in srgb, var(--g) 80%, #fff) 0%, var(--g) 50%, color-mix(in srgb, var(--g) 78%, #000) 100%); box-shadow: inset 0 0 0 3px #fff; }
.arc-ed__row { display: flex; align-items: center; gap: var(--s-2); }
.arc-ed__price {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-pill);
  background: rgba(13, 24, 56, 0.45);
  border: 2px solid var(--ink);
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.22);
}
.arc-ed__price button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: linear-gradient(180deg, var(--blue-btn) 0%, var(--blue-btn-lo) 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35), inset 0 -3px 0 var(--blue-btn-edge);
  font-size: 22px;
  cursor: pointer;
}
.arc-ed__price button:active { transform: translateY(2px); }
.arc-ed__cost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 64px;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--gold);
  text-shadow: var(--ts-outline-sm);
}
.arc-ed__cost .ic { font-size: 20px; }
.arc-ed__per { font-size: var(--fs-sm); font-weight: 800; color: var(--text-dim); }
.arc-ed__unit { flex: 1; min-width: 0; min-height: 48px; }
.arc-ed__swatches { display: grid; grid-template-columns: repeat(5, 44px); justify-content: space-between; row-gap: var(--s-2); padding: 0 var(--s-1); }
.arc-ed__sw {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  border: 2.5px solid var(--ink);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.3), inset 0 -3px 0 rgba(0, 0, 0, 0.25);
  cursor: pointer;
}
.arc-ed__sw.is-on { box-shadow: inset 0 0 0 3px #fff, 0 0 0 3px var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .arcade *, .arc-ticket, .arc-timeup, .arc-timeup * { animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
}
html.reduce-motion .arcade *, html.reduce-motion .arc-ticket, html.reduce-motion .arc-timeup, html.reduce-motion .arc-timeup * {
  animation-duration: 1ms !important; animation-iteration-count: 1 !important;
}