/* PIXEL UP! · UX lane 7 · WAGER ARENA — pairs with assets/ux/arena.js
   Arcade tokens only (arcade.css): ink outlines, hard pop shadows, Inter. */

/* ── sticky section nav (sits inside #tab-arena, under the sticky header) ── */
.ar-nav{position:sticky;top:66px;z-index:30;display:flex;align-items:center;gap:10px;
  margin:6px 0 18px;padding:8px 10px;border:3px solid var(--ink);border-radius:14px;
  background:var(--ink-2);box-shadow:var(--pop-1)}
.ar-nav-in{display:flex;gap:7px;overflow-x:auto;flex:1;min-width:0;scrollbar-width:none;scroll-behavior:smooth}
.ar-nav-in::-webkit-scrollbar{display:none}
.ar-nav-chip{flex:none;padding:5px 11px;border-radius:999px;border:2.5px solid var(--line);
  background:var(--panel);color:var(--txt-2);font:800 12px/1.2 var(--font);letter-spacing:.02em;
  white-space:nowrap;text-decoration:none;transition:.12s}
.ar-nav-chip:hover{color:var(--txt);border-color:var(--cool)}
.ar-nav-chip.on{background:var(--sun);color:var(--ink);border-color:var(--ink);box-shadow:var(--pop-0)}
.ar-nav-chip:focus-visible,.ar-nav-cf:focus-visible,.ar-fold:focus-visible,.ar-btn:focus-visible,.ar-toast button:focus-visible{outline:3px solid var(--cool);outline-offset:2px}
.ar-nav-cf{flex:none;padding:5px 10px;border-radius:999px;border:2.5px solid var(--ink);
  background:var(--slime);color:var(--ink);font:800 11px/1.2 var(--font);cursor:pointer;white-space:nowrap}
.ar-nav-cf.off{background:var(--panel);color:var(--dim);border-color:var(--line)}

/* ── folds ── */
.ar-folded{display:none !important}
.ar-fold{flex:none;display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;
  border:2.5px solid var(--line);background:var(--panel);color:var(--txt-2);
  font:800 11.5px/1.2 var(--font);cursor:pointer;max-width:100%}
.ar-fold:hover{color:var(--txt);border-color:var(--cool)}
.ar-fold-ic{color:var(--sun)}
.ar-fold-sum{font:600 10.5px/1.2 var(--mono);color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ar-fold-sum:empty{display:none}
.sec-head.ar-head-folded{margin-bottom:22px;opacity:.92}

/* ── toasts (window.alert replacement) ── */
.ar-toasts{position:fixed;right:16px;bottom:16px;z-index:9990;display:flex;flex-direction:column;gap:10px;
  width:min(380px,calc(100vw - 32px));pointer-events:none}
.ar-toast{pointer-events:auto;display:flex;align-items:flex-start;gap:8px;padding:12px 12px 12px 14px;
  border:3px solid var(--ink);border-radius:14px;background:var(--panel);color:var(--txt);
  box-shadow:var(--pop-1);font:600 13px/1.45 var(--font);animation:ar-in .18s ease-out}
.ar-toast.ar-win{background:var(--slime);color:var(--ink)}
.ar-toast.ar-warn{border-left:9px solid var(--hot)}
.ar-toast.ar-info{border-left:9px solid var(--cool)}
.ar-toast-msg{flex:1;min-width:0;white-space:pre-line;overflow-wrap:anywhere}
.ar-toast-x,.ar-toast-copy{flex:none;border:2px solid var(--ink);border-radius:8px;background:var(--paper);color:var(--ink);
  font:800 11px/1 var(--font);padding:5px 7px;cursor:pointer}
.ar-toast-copy{background:var(--sun)}
.ar-toast.ar-out{opacity:0;transform:translateY(6px);transition:.18s}
@keyframes ar-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ── stake check sheet ── */
.ar-sheet-wrap{position:fixed;inset:0;z-index:9995;display:flex;align-items:center;justify-content:center;
  padding:16px;background:rgba(11,7,16,.72)}
.ar-sheet{width:min(480px,100%);max-height:calc(100vh - 32px);overflow:auto;padding:18px 18px 16px;
  border:4px solid var(--ink);border-radius:20px;background:var(--panel);color:var(--txt);
  box-shadow:var(--pop-2);font-family:var(--font);animation:ar-in .16s ease-out}
.ar-sheet-h{margin:0;font-size:22px;font-weight:900;letter-spacing:-.03em}
.ar-sheet-sub{margin:2px 0 8px;color:var(--txt-2);font-weight:700;font-size:13px}
.ar-sim{display:inline-block;margin-bottom:12px;padding:3px 9px;border:2px solid var(--ink);border-radius:999px;
  background:var(--sun);color:var(--ink);font:900 10px/1.3 var(--font);letter-spacing:.06em}
.ar-sheet-rows{display:grid;gap:6px;margin-bottom:12px}
.ar-row{display:grid;grid-template-columns:92px auto 1fr;gap:4px 10px;align-items:baseline;
  padding:7px 10px;border:2px solid var(--line);border-radius:10px;background:var(--ink-2)}
.ar-k{font:800 11px/1.2 var(--font);text-transform:uppercase;letter-spacing:.06em;color:var(--dim)}
.ar-v{font:800 14px/1.2 var(--mono);color:var(--txt)}
.ar-n{font-size:11.5px;color:var(--txt-2);text-align:right}
.ar-outs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
.ar-out{display:flex;flex-direction:column;gap:3px;padding:9px 10px;border:3px solid var(--ink);border-radius:12px;
  background:var(--panel-2);box-shadow:var(--pop-0)}
.ar-ok{font:900 11px/1.2 var(--font);text-transform:uppercase;letter-spacing:.06em}
.ar-ov{font:800 13px/1.2 var(--mono)}
.ar-od{font:700 11px/1.2 var(--mono);color:var(--txt-2)}
.ar-out.ar-up .ar-ok{color:var(--slime)}
.ar-out.ar-dn .ar-ok{color:var(--hot)}
.ar-out.ar-dim .ar-ok{color:var(--cool)}
.ar-notes{margin:0 0 10px;padding-left:18px;color:var(--txt-2);font-size:12px;line-height:1.5}
.ar-notes .ar-src{color:var(--dim);list-style:none;margin-left:-18px;font-size:11px}
.ar-skip{display:flex;gap:8px;align-items:flex-start;font-size:12px;color:var(--txt-2);margin-bottom:14px;cursor:pointer}
.ar-skip input{margin-top:2px;accent-color:var(--sun)}
.ar-sheet-btns{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.ar-btn{border:3px solid var(--ink);border-radius:12px;padding:10px 16px;font:900 13.5px/1.1 var(--font);
  cursor:pointer;box-shadow:var(--pop-0)}
.ar-btn-ghost{background:var(--panel-2);color:var(--txt)}
.ar-btn-go{background:var(--sun);color:var(--ink)}
.ar-btn:active{transform:translate(2px,2px);box-shadow:none}
@media(max-width:480px){
  .ar-row{grid-template-columns:1fr auto}
  .ar-n{grid-column:1/-1;text-align:left}
  .ar-outs{grid-template-columns:1fr}
  .ar-out{flex-direction:row;align-items:baseline;justify-content:space-between}
  .ar-sheet-btns .ar-btn{flex:1}
}

/* ── phones: dense tables become stacked cards, no sideways scroll ── */
@media(max-width:640px){
  table.ar-cards thead{display:none}
  table.ar-cards,table.ar-cards tbody{display:block;width:100%}
  table.ar-cards tr{display:grid;grid-template-columns:1fr 1fr;gap:2px 12px;padding:8px 10px;margin-bottom:8px;
    border:2.5px solid var(--ink);border-radius:10px;background:var(--paper);box-shadow:var(--pop-0)}
  table.ar-cards td{display:flex;justify-content:space-between;gap:8px;padding:2px 0;border:0;min-width:0;
    text-align:right;overflow-wrap:anywhere}
  table.ar-cards td[data-ar-l]::before{content:attr(data-ar-l);flex:none;color:rgba(42,38,32,.62);font-weight:800;
    text-transform:uppercase;font-size:9.5px;letter-spacing:.05em;text-align:left;padding-top:1px}
  table.ar-cards tr.ar-empty-row{display:block;background:none;border-style:dashed}
  table.ar-cards tr.ar-empty-row td{display:block;text-align:center}
  .ar-nav{padding:6px 7px;gap:6px;border-radius:12px;margin-bottom:14px}
  .ar-nav-cf{font-size:10px;padding:4px 8px}
  .ar-cf-long{display:none}
  .ar-fold-sum{max-width:44vw}
}
@media(max-width:640px){
  table.ar-cards,table.ar-cards tbody{background:none!important;border:0!important;box-shadow:none!important}
  table.ar-cards td{font-size:11px;background:none!important}
}
@media(max-width:330px){ table.ar-cards tr{grid-template-columns:1fr} }

/* the header on this page is wider than a 375px phone (search + XP + sign-in + menu):
   drop the arcade search here (the arena has no game list to search) and tighten gaps */
@media(max-width:440px){
  html.ar-on .top-in{gap:8px}
  html.ar-on .top-in > .search{display:none}
  html.ar-on .tj-addr{overflow-wrap:anywhere}
}
@media (prefers-reduced-motion: reduce){ .ar-toast,.ar-sheet{animation:none} .ar-nav-in{scroll-behavior:auto} }