/* Ace web material system (Wow UI Standard, 2026-10-08). One world: a card table at night.
   Tokens drive every object: lacquer base, three-stop gold with a highlight, engraved double rules, guilloché, key light,
   edge vignette, device-resolution grain, spring motion. Overlays never change layout. */
:root{
  --ace-lacquer:#07070a;--ace-lacquer-2:#0e0e13;--ace-lacquer-3:#15151c;--ace-felt:#0a1a12;
  --ace-gold-hi:#fff3c4;--ace-gold:#e9c46a;--ace-gold-mid:#c99a3a;--ace-gold-lo:#8f651a;
  --ace-gold-grad:linear-gradient(160deg,var(--ace-gold-hi) 0%,var(--ace-gold) 34%,var(--ace-gold-mid) 62%,var(--ace-gold-lo) 100%);
  --ace-gold-sheen:linear-gradient(115deg,transparent 30%,rgba(255,243,196,.75) 50%,transparent 70%);
  --ace-rule:rgba(233,196,106,.55);--ace-rule-soft:rgba(233,196,106,.26);--ace-rim-light:rgba(255,243,196,.6);
  --ace-ink:#f6f3ea;--ace-ink-2:#c9c4b6;--ace-ink-3:#8d8878;
  --ace-cool:#8a8a90;
  --ace-spring:linear(0,0.009,0.035 2.1%,0.141 4.4%,0.723 12.9%,0.938 16.7%,1.017 20.6%,1.034 23.6%,1.027 27.2%,0.998 36.1%,0.993 44.8%,1);
  --ace-spring-soft:linear(0,0.013 1.3%,0.108 4.2%,0.455 9.6%,0.7 13.4%,0.85 16.9%,0.95 20.6%,1.002 24.9%,1.02 30%,1.012 38.5%,1.001 50%,1);
  --ace-ease-out:cubic-bezier(.2,.8,.2,1);
}
/* materials */
.ace-gold-text{background:var(--ace-gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.ace-lacquer{background:radial-gradient(120% 90% at 50% -10%,rgba(255,232,170,.10),transparent 55%),linear-gradient(180deg,var(--ace-lacquer-2),var(--ace-lacquer))}
.ace-engraved{position:relative;border:1px solid var(--ace-rule);box-shadow:inset 0 1px 0 var(--ace-rim-light),inset 0 0 0 6px var(--ace-lacquer),inset 0 0 0 7px var(--ace-rule-soft),0 30px 80px rgba(0,0,0,.6)}
.ace-engraved--tight{box-shadow:inset 0 1px 0 var(--ace-rim-light),inset 0 0 0 3px var(--ace-lacquer),inset 0 0 0 4px var(--ace-rule-soft),0 18px 50px rgba(0,0,0,.55)}
/* overlays (fixed, never affect layout) */
.ace-grain,.ace-vignette,.ace-keylight{position:fixed;inset:0;pointer-events:none;z-index:2147483000}
.ace-grain{opacity:.055;mix-blend-mode:overlay;background-repeat:repeat;background-size:256px 256px}
html[data-theme=light] .ace-grain{opacity:.035;mix-blend-mode:multiply}
.ace-vignette{background:radial-gradient(120% 100% at 50% 40%,transparent 55%,rgba(0,0,0,.42) 100%)}
html[data-theme=light] .ace-vignette{background:radial-gradient(120% 100% at 50% 40%,transparent 60%,rgba(20,16,0,.12) 100%)}
.ace-keylight{background:radial-gradient(60% 40% at 50% -8%,rgba(255,232,170,.11),transparent 70%)}
/* guilloché rosette: generated SVG (see wow-material.js), slow turn */
.ace-rosette{position:absolute;pointer-events:none;color:var(--ace-gold);opacity:.085;animation:ace-rosette-turn 140s linear infinite}
@keyframes ace-rosette-turn{to{transform:rotate(360deg)}}
/* glint: light passing over gold every few seconds */
.ace-glint{position:relative;overflow:hidden}
.ace-glint::after{content:"";position:absolute;inset:-40%;background:var(--ace-gold-sheen);background-size:260% 100%;background-position:130% 0;animation:ace-glint 6.5s linear infinite;mix-blend-mode:screen;pointer-events:none}
@keyframes ace-glint{0%,78%{background-position:130% 0}100%{background-position:-130% 0}}
/* motion verbs */
@keyframes ace-deal{0%{opacity:0;transform:translate3d(0,46px,0) rotate(-6deg) scale(.94)}100%{opacity:1;transform:none}}
.ace-deal{animation:ace-deal .9s var(--ace-spring) both}
@keyframes ace-flip{0%{transform:rotateY(0)}100%{transform:rotateY(180deg)}}
@keyframes ace-toss{0%{transform:rotateY(0) scale(1)}50%{transform:rotateY(270deg) scale(1.08) translateY(-6px)}100%{transform:rotateY(540deg) scale(1)}}
.ace-toss{animation:ace-toss .85s var(--ace-spring-soft)}
@keyframes ace-shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-7px)}40%,60%{transform:translateX(7px)}}
@keyframes ace-land{0%{transform:scale(1.06)}60%{transform:scale(.985)}100%{transform:scale(1)}}
/* a gold casino chip (button) */
.ace-chip{--size:58px;position:relative;width:var(--size);height:var(--size);border-radius:50%;border:0;padding:0;cursor:pointer;color:#1a1200;background:radial-gradient(circle at 50% 38%,var(--ace-gold-hi) 0%,var(--ace-gold) 32%,var(--ace-gold-mid) 58%,var(--ace-gold-lo) 100%);box-shadow:0 2px 0 var(--ace-gold-lo),0 10px 24px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.55);transform-style:preserve-3d;transition:transform .35s var(--ace-spring-soft),box-shadow .3s ease}
.ace-chip::before{content:"";position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(from 0deg,var(--ace-lacquer) 0 6deg,transparent 6deg 30deg);-webkit-mask:radial-gradient(circle,transparent 70%,#000 71%,#000 100%);mask:radial-gradient(circle,transparent 70%,#000 71%,#000 100%);opacity:.9}
.ace-chip::after{content:"";position:absolute;inset:14%;border-radius:50%;background:radial-gradient(circle at 50% 35%,var(--ace-lacquer-3),var(--ace-lacquer));box-shadow:inset 0 0 0 1.5px var(--ace-rule),inset 0 1px 0 rgba(255,243,196,.3)}
.ace-chip>*{position:relative;z-index:1}
.ace-chip:hover{transform:translateY(-2px) rotateX(8deg)}
.ace-chip:active{transform:translateY(1px) scale(.97)}
.ace-chip.is-breathing{animation:ace-breathe 2.6s ease-in-out infinite}
@keyframes ace-breathe{0%,100%{box-shadow:0 2px 0 var(--ace-gold-lo),0 10px 24px rgba(0,0,0,.55),0 0 0 0 rgba(233,196,106,.0)}50%{box-shadow:0 2px 0 var(--ace-gold-lo),0 10px 24px rgba(0,0,0,.55),0 0 0 10px rgba(233,196,106,.14)}}
/* a playing card object */
.ace-card-obj{position:relative;background:linear-gradient(180deg,var(--ace-lacquer-2),var(--ace-lacquer));color:var(--ace-ink);border-radius:18px;border:1px solid var(--ace-rule);box-shadow:inset 0 1px 0 var(--ace-rim-light),inset 0 0 0 5px var(--ace-lacquer),inset 0 0 0 6px var(--ace-rule-soft),0 22px 60px rgba(0,0,0,.55)}
.ace-card-obj .ace-idx{position:absolute;font:800 16px/1 "Manrope","DM Sans",system-ui,sans-serif;display:flex;flex-direction:column;align-items:center;gap:1px;pointer-events:none}
.ace-card-obj .ace-idx.tl{left:12px;top:10px}.ace-card-obj .ace-idx.br{right:12px;bottom:10px;transform:rotate(180deg)}
.ace-card-obj .ace-idx svg{width:12px;height:14px}
/* the four suits turning: loading */
.ace-suits{display:inline-grid;grid-template-columns:1fr 1fr;gap:3px;width:34px;height:34px;animation:ace-suits-turn 2.4s steps(4) infinite;color:var(--ace-ink-3)}
.ace-suits span{display:grid;place-items:center;font:700 15px/1 system-ui,sans-serif}
.ace-suits span:first-child{color:var(--ace-gold)}
@keyframes ace-suits-turn{to{transform:rotate(360deg)}}
.ace-thinking{display:inline-flex;align-items:center;gap:10px;font:600 13px/1 system-ui,sans-serif;color:var(--ace-ink-2)}
.ace-thinking .ace-shimmer{background:linear-gradient(90deg,var(--ace-ink-3),var(--ace-gold-hi),var(--ace-ink-3));background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:ace-shimmer 1.6s linear infinite}
@keyframes ace-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
/* the Joker: errors */
.ace-joker{position:relative;padding:18px 20px 16px 22px;border-radius:14px;background:linear-gradient(180deg,#14100a,#0a0806);border:1px solid rgba(233,196,106,.35);box-shadow:inset 0 1px 0 rgba(255,243,196,.25),0 18px 40px rgba(0,0,0,.5);color:var(--ace-ink)}
.ace-joker::before{content:"JOKER";position:absolute;left:10px;top:8px;font:800 10px/1 system-ui,sans-serif;letter-spacing:.18em;color:var(--ace-gold);writing-mode:vertical-rl;transform:rotate(180deg);opacity:.9}
.ace-joker h4{margin:0 0 6px;font:700 15px/1.25 "Manrope",system-ui,sans-serif;color:var(--ace-ink)}
.ace-joker p{margin:0 0 10px;font:400 13px/1.45 system-ui,sans-serif;color:var(--ace-ink-2)}
.ace-joker .ace-fix{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:9px;border:1px solid var(--ace-rule);background:var(--ace-gold-grad);color:#1a1200;font:700 13px/1 system-ui,sans-serif;cursor:pointer;text-decoration:none}
@media (prefers-reduced-motion:reduce){.ace-rosette,.ace-glint::after,.ace-suits,.ace-chip.is-breathing,.ace-thinking .ace-shimmer{animation:none!important}.ace-deal,.ace-toss{animation:none!important}}