/* av-ui.css — VirtuAce v2 shared design tokens and components.
   Source of truth: DESIGN_DECISIONS.md. Visual reference: docs/design-previews/.
   Everything is prefixed (--av-*, .av-*) so it cannot collide with the inline
   styles that existing pages still carry. Pages adopt it gradually. */

:root{
  /* surfaces (dark only) */
  --av-bg:#0F1923; --av-panel:#182532; --av-raised:#213140; --av-line:#2B3D50;
  --av-scrim:rgba(5,10,16,.62);
  /* text */
  --av-white:#F2F5F9; --av-text:#A3B1C6; --av-muted:#6F8197;
  /* action and state. Violet = primary action. Green = win/claim only. */
  --av-accent:#8B5CF6; --av-accent-hi:#9D75F8; --av-accent-lo:#7747E0; --av-accent-soft:#B79CFB;
  --av-win:#34D399; --av-loss:#F0616D;
  --av-win-bg:rgba(52,211,153,.15); --av-loss-bg:rgba(240,97,109,.15); --av-accent-bg:rgba(139,92,246,.18);
  /* tiers (color) */
  --av-tier-unranked:#6F8197; --av-tier-bronze:#C7803F; --av-tier-silver:#B8C2CF; --av-tier-gold:#E5B84B;
  --av-tier-platinum:#A9D6E5; --av-tier-diamond:#5EC8FF; --av-tier-legend:#C084FC;
  /* shape */
  --av-r:8px; --av-rc:12px; --av-r-modal:16px;
  /* type */
  --av-font:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  /* sizing */
  --av-h:40px; --av-h-main:48px; --av-touch:44px;
  /* motion */
  --av-dur:150ms; --av-ease:cubic-bezier(.22,1,.36,1);
}

/* One font everywhere: every page, game, panel, rule and number is set in the shell font. Page stylesheets still name
   their old fonts (--mono, --sans, DM Mono, JetBrains Mono, Plus Jakarta); this wins over all of them. Canvas text is set in JS. */
html body, html body *, html body *::before, html body *::after { font-family: var(--av-font) !important; }
html body { font-variant-numeric: tabular-nums; }

/* numbers always align */
.av-num,.av-btn,.av-input,.av-pill,.av-badge{font-variant-numeric:tabular-nums}

/* ── Buttons (40px; main action 48px) ── */
.av-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:var(--av-h);padding:0 18px;border:0;border-radius:var(--av-r);
  background:var(--av-accent);color:#fff;font:600 13px/1 var(--av-font);white-space:nowrap;cursor:pointer;text-decoration:none;
  transition:background var(--av-dur) var(--av-ease),transform var(--av-dur) var(--av-ease)}
.av-btn:hover{background:var(--av-accent-hi)}
.av-btn:active{background:var(--av-accent-lo);transform:scale(.98)}
.av-btn:focus-visible{outline:2px solid var(--av-accent-soft);outline-offset:2px}
.av-btn--main{min-height:var(--av-h-main);font-size:14px}
.av-btn--block{display:flex;width:100%}
.av-btn--secondary{background:var(--av-raised);color:var(--av-white)}
.av-btn--secondary:hover{background:var(--av-line)}.av-btn--secondary:active{background:var(--av-line)}
.av-btn--ghost{background:transparent;color:var(--av-text)}
.av-btn--ghost:hover{background:var(--av-panel);color:var(--av-white)}.av-btn--ghost:active{background:var(--av-raised)}
.av-btn--danger{background:var(--av-loss-bg);color:var(--av-loss)}
.av-btn--danger:hover{background:rgba(240,97,109,.25)}.av-btn--danger:active{background:rgba(240,97,109,.32)}
.av-btn--claim{background:var(--av-win-bg);color:var(--av-win)}
.av-btn--claim:hover{background:rgba(52,211,153,.25)}.av-btn--claim:active{background:rgba(52,211,153,.32)}
/* disabled and loading keep their width so layouts do not jump */
.av-btn:disabled,.av-btn[aria-disabled="true"]{background:var(--av-raised);color:var(--av-muted);cursor:not-allowed;transform:none}
.av-btn.is-loading{pointer-events:none}
.av-btn.is-loading::before{content:"";width:14px;height:14px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:av-spin .7s linear infinite}
@keyframes av-spin{to{transform:rotate(360deg)}}

/* ── Inputs ── */
.av-input{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:var(--av-h);padding:0 12px;border:0;border-radius:var(--av-r);
  background:var(--av-raised);color:var(--av-white);font:600 14px var(--av-font);width:100%}
.av-input::placeholder{color:var(--av-muted);font-weight:400}
.av-input:focus-visible,.av-input:focus-within{outline:2px solid var(--av-accent);outline-offset:0}
.av-quick{display:flex;gap:4px}
.av-quick button{border:0;background:var(--av-line);color:var(--av-white);border-radius:6px;padding:4px 8px;font:600 11px var(--av-font);cursor:pointer;min-height:26px}
.av-quick button:hover{background:#355068}

/* ── Balance pill, badges, chips ── */
.av-pill{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 12px;border-radius:var(--av-rc);background:var(--av-raised);color:var(--av-white);font:600 13px var(--av-font)}
.av-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:var(--av-r);background:var(--av-line);color:var(--av-white);font:600 11px var(--av-font)}
.av-badge--win{background:var(--av-win-bg);color:var(--av-win)}
.av-badge--accent{background:var(--av-accent-bg);color:var(--av-accent-soft)}
.av-chip{display:inline-flex;align-items:center;padding:5px 12px;border-radius:var(--av-r);background:var(--av-panel);color:var(--av-text);font:500 12px var(--av-font);cursor:pointer;border:0}
.av-chip.is-on{background:var(--av-raised);color:var(--av-white);font-weight:600}

/* ── Segmented control (Manual / Auto bet, Single / Parlay) and toggle ── */
.av-seg{display:flex;padding:3px;border-radius:9px;background:var(--av-bg)}
.av-seg>*{flex:1;text-align:center;padding:7px 12px;border:0;border-radius:7px;background:transparent;color:var(--av-text);font:500 13px var(--av-font);cursor:pointer}
.av-seg>.is-on{background:var(--av-line);color:var(--av-white);font-weight:600}
.av-toggle{position:relative;width:36px;height:20px;border-radius:10px;background:var(--av-line);border:0;cursor:pointer;padding:0}
.av-toggle::after{content:"";position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:var(--av-text);transition:transform var(--av-dur) var(--av-ease)}
.av-toggle[aria-checked="true"]{background:var(--av-accent)}.av-toggle[aria-checked="true"]::after{transform:translateX(16px);background:#fff}

/* ── Cards and progress ── */
.av-card{background:var(--av-panel);border-radius:var(--av-rc);color:var(--av-text)}
.av-card--pad{padding:12px}
.av-bar{height:5px;border-radius:3px;background:var(--av-raised);position:relative;overflow:hidden}
.av-bar>i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:var(--av-accent)}

/* ── Overlays: toast (bottom-right), modal (centered), menu (under the pill) ── */
.av-toast-stack{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:8px;z-index:900;max-width:min(360px,calc(100vw - 32px))}
.av-toast{display:flex;gap:10px;align-items:center;background:var(--av-panel);color:var(--av-text);border-radius:var(--av-rc);padding:12px 14px;font:400 13px var(--av-font);box-shadow:0 6px 20px rgba(0,0,0,.35)}
.av-toast b{color:var(--av-white);font-weight:600}
.av-scrim{position:fixed;inset:0;background:var(--av-scrim);z-index:800}
.av-modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(400px,calc(100vw - 32px));background:var(--av-panel);border-radius:var(--av-r-modal);padding:20px;z-index:810;color:var(--av-text);font:400 14px var(--av-font)}
.av-menu{background:var(--av-raised);border-radius:var(--av-rc);padding:8px 12px;min-width:220px;color:var(--av-text);font:400 13px var(--av-font);box-shadow:0 8px 24px rgba(0,0,0,.4)}
.av-menu hr{border:0;height:1px;background:var(--av-line);margin:6px 0}
@media (max-width:720px){
  .av-modal{top:auto;bottom:0;left:0;transform:none;width:100%;border-radius:var(--av-r-modal) var(--av-r-modal) 0 0}
  .av-menu--sheet{position:fixed;left:0;right:0;bottom:0;border-radius:var(--av-r-modal) var(--av-r-modal) 0 0;z-index:810}
  .av-toast-stack{left:16px;right:16px;bottom:72px;max-width:none}
}

/* ── States ── */
.av-skeleton{background:var(--av-raised);border-radius:var(--av-r);animation:av-pulse 1.4s ease-in-out infinite}
@keyframes av-pulse{0%,100%{opacity:.45}50%{opacity:.9}}
.av-win{color:var(--av-win)}.av-loss{color:var(--av-loss)}.av-muted{color:var(--av-muted)}

/* ── Respect reduced motion ── */
@media (prefers-reduced-motion:reduce){
  .av-btn,.av-toggle::after{transition:none}
  .av-btn.is-loading::before,.av-skeleton{animation:none}
}

/* Card back: every card game shows the VirtuAce mark centered on the back of a face-down card. Add the class to the card;
   --av-spade-url is published by shared-nav.js. Size follows the card. */
.av-card-back{position:relative;background:linear-gradient(145deg,#4A3499,#2A1B63)!important;color:transparent!important}
.av-card-back>*{visibility:hidden}
.av-card-back::before{content:"";position:absolute;inset:6%;border:1.5px solid rgba(255,255,255,.16);border-radius:inherit;pointer-events:none}
/* the spade artwork sits 2% left and 1.6% high inside its own box (measured), so the box is nudged to put the artwork itself in the exact middle */
.av-card-back::after{content:"";position:absolute;inset:0;margin:auto;width:52%;height:52%;background:var(--av-spade-url) center/contain no-repeat;transform:translate(2%,1.6%);pointer-events:none}