/* Shared styles for the account and store pop-ups (used by every page) */
#arcade-overlay { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 12px;
  padding-top: max(12px, env(safe-area-inset-top)); padding-bottom: max(12px, env(safe-area-inset-bottom));
  background: rgba(6, 3, 10, 0.66); backdrop-filter: blur(2px); }
#arcade-overlay[hidden] { display: none; }
.ax-panel { width: min(620px, 100%); max-height: 100%; overflow: auto; overscroll-behavior: contain; background: #1a120c; color: #f3e6c8;
  border: 3px solid #5b3f29; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #7a5638, 0 20px 60px rgba(0,0,0,.6);
  font-family: 'Pixelify Sans', 'Trebuchet MS', system-ui, sans-serif; font-size: 16px; line-height: 1.4; }
.ax-head { position: sticky; top: 0; z-index: 1; background: #6b4a2f; padding: 14px 52px 12px 20px; border-bottom: 3px solid rgba(0,0,0,.4);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.18); }
.ax-head.crystal { background: linear-gradient(135deg, #1f8f8a, #2b5fa8); }
.ax-head h2 { margin: 0; font-size: 26px; color: #fff; text-shadow: 2px 2px 0 rgba(0,0,0,.45); display: flex; align-items: center; gap: 8px; }
.ax-head p { margin: 2px 0 0; color: rgba(255,255,255,.88); }
.ax-x { position: absolute; right: 10px; top: 10px; width: 40px; height: 40px; font: inherit; font-size: 28px; line-height: 1; color: #fff;
  background: rgba(0,0,0,.25); border: 2px solid rgba(255,255,255,.3); cursor: pointer; }
.ax-body { padding: 16px 20px 18px; }
.ax-body h3 { margin: 18px 0 8px; font-size: 15px; color: #a8977f; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.gem { width: 1em; height: 1em; vertical-align: -0.12em; flex: none; }
.ax-bal { margin: 0 0 12px; font-size: 18px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ax-bal b { color: #7fe7ff; }
.ax-packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.ax-pack { position: relative; display: grid; justify-items: center; gap: 2px; padding: 16px 10px 12px; font: inherit; color: #f3e6c8; cursor: pointer;
  background: linear-gradient(180deg, #213244, #172230); border: 2px solid #2f5f7a; box-shadow: inset 0 0 0 1px #4b88a8; text-align: center; }
.ax-pack:hover:not(:disabled), .ax-pack:focus-visible { border-color: #7fe7ff; outline: none; transform: translateY(-1px); }
.ax-pack:disabled { opacity: .55; cursor: default; }
.ax-pack.busy { opacity: .6; }
.ax-pack.starter { grid-column: 1 / -1; background: linear-gradient(135deg, #4a3410, #2a1d0c); border-color: #e8b04a; box-shadow: inset 0 0 0 1px #ffd972; }
.ax-pack-gems { font-size: 26px; display: flex; gap: 2px; }
.ax-pack b { font-size: 28px; color: #7fe7ff; line-height: 1.1; }
.ax-pack.starter b { color: #ffd972; }
.ax-pack small { color: #a8c3d4; font-size: 13px; }
.ax-pack.starter small { color: #e9d3a3; }
.ax-price { margin-top: 6px; padding: 5px 16px; background: #e8b04a; color: #1a120c; font-weight: 700; font-size: 17px; }
.ax-tag { position: absolute; top: -9px; right: 8px; padding: 1px 8px; font-size: 12px; font-weight: 700; background: #ff6a55; color: #fff; }
.ax-fine { color: #8d7f6c; font-size: 13px; margin: 14px 0 0; }
.ax-fine a, .ax-foot a { color: #c9b48f; }
.ax-warn { background: #3a2a10; border: 2px solid #7a5a1a; padding: 8px 12px; color: #ffd27a; }
.ax-note { background: #2a2014; border-left: 4px solid #e8b04a; padding: 10px 12px; margin-bottom: 10px; color: #e9d9b8; font-size: 15px; }
.ax-err { color: #ff8a7a; min-height: 1.2em; margin: 10px 0 0; }
.ax-label { display: block; color: #a8977f; font-size: 14px; margin-bottom: 4px; }
.ax-inline { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.ax-inline input { flex: 1 1 180px; min-width: 0; font: inherit; font-size: 16px; padding: 9px 10px; color: #f3e6c8; background: #0d0906; border: 2px solid #3b2a1c; }
.ax-inline input:focus { outline: none; border-color: #e8b04a; }
.ax-body button:not(.ax-pack):not(.ax-x):not(.ax-link):not(.ax-row) { font: inherit; font-size: 16px; padding: 9px 14px; color: #1a120c; background: #e8b04a; border: 0; cursor: pointer; font-weight: 600; }
.ax-body button:disabled { opacity: .6; }
.ax-link { font: inherit; font-size: 14px; color: #e8b04a; background: none; border: 0; padding: 4px 0; cursor: pointer; text-decoration: underline; }
.ax-link.danger { color: #e0705f; }
.ax-row { display: flex; align-items: center; gap: 10px; width: 100%; font: inherit; color: #f3e6c8; text-align: left; background: #241910; border: 2px solid #3b2a1c; padding: 10px 12px; margin-bottom: 8px; }
button.ax-row { cursor: pointer; }
button.ax-row:hover { border-color: #e8b04a; }
.ax-row span { flex: 1; }
.ax-row small { display: block; color: #a8977f; font-size: 13px; }
.ax-row b { color: #7fe7ff; font-size: 18px; }
.ax-row .gem { font-size: 22px; }
.ax-row.muted { opacity: .8; }
.ax-daily { border-color: #2f5f7a; background: #172230; }
.ax-code { font-size: 20px; letter-spacing: .12em; color: #7fe7ff; }
.ax-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; padding-top: 10px; border-top: 2px solid #3b2a1c; font-size: 13px; }
#arcade-toasts { position: fixed; left: 50%; top: max(12px, env(safe-area-inset-top)); transform: translateX(-50%); z-index: 120; display: grid; gap: 6px; pointer-events: none; width: min(92vw, 460px); }
.ax-toast { background: #1a120c; color: #f3e6c8; border: 2px solid #5b3f29; padding: 10px 14px; box-shadow: 0 8px 24px rgba(0,0,0,.5);
  font-family: 'Pixelify Sans', 'Trebuchet MS', system-ui, sans-serif; font-size: 16px; transition: opacity .5s, transform .5s; display: flex; align-items: center; gap: 6px; }
.ax-toast.good { border-color: #2f8f6a; }
.ax-toast.good b { color: #7fe7ff; }
.ax-toast.bad { border-color: #a33; }
.ax-toast.out { opacity: 0; transform: translateY(-8px); }
@media (max-width: 480px) {
  .ax-packs { grid-template-columns: 1fr 1fr; }
  .ax-pack b { font-size: 22px; }
  .ax-head h2 { font-size: 22px; }
}