, not an emoji character) got silently stacked into two rows, growing the button and reading as the icon "jumping" when the icon swapped from a text glyph to an element (2026-08-28 live report, force-a-trade in BotRosterGrid.vue). :column makes multiple grid items lay out in one row like the icon+label pairing was always meant to render. */ display: inline-grid; grid-auto-flow: column; place-content: center; border: 0; padding: 9px 18px; font-weight: 700; font-size: .9rem; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.35); clip-path: polygon(0% var(--btn-curve), var(--btn-curve) 0, 100% 0, 100% calc(100% - var(--btn-curve)), calc(100% - var(--btn-curve)) 100%, 0 100%); transition: color 200ms; } button::before, button::after{content:"";position:absolute;inset:0} button::before{background:var(--btn-border);background-size:300% 300%;z-index:-2} @media (prefers-reduced-motion:no-preference){ button::before{animation:btn-border-shift 5s ease infinite} } :root:is([data-motion="reduced"],[data-motion="off"]) button::before{animation:none} @keyframes btn-border-shift{ 0%{background-position:31% 0%} 50%{background-position:70% 100%} 100%{background-position:31% 0%} } button::after{ background: var(--btn-fill); z-index: -1; clip-path: polygon( var(--btn-border-w) calc(var(--btn-curve) + var(--btn-border-w) * .5), calc(var(--btn-curve) + var(--btn-border-w) * .5) var(--btn-border-w), calc(100% - var(--btn-border-w)) var(--btn-border-w), calc(100% - var(--btn-border-w)) calc(100% - calc(var(--btn-curve) + var(--btn-border-w) * .5)), calc(100% - calc(var(--btn-curve) + var(--btn-border-w) * .5)) calc(100% - var(--btn-border-w)), var(--btn-border-w) calc(100% - var(--btn-border-w))); transition: clip-path 400ms; } button:where(:hover,:focus-visible){color:#fff} button:where(:hover,:focus-visible)::after{ clip-path: polygon( calc(100% - var(--btn-border-w)) calc(100% - calc(var(--btn-curve) + var(--btn-border-w) * .5)), calc(100% - var(--btn-border-w)) var(--btn-border-w), calc(100% - var(--btn-border-w)) var(--btn-border-w), calc(100% - var(--btn-border-w)) calc(100% - calc(var(--btn-curve) + var(--btn-border-w) * .5)), calc(100% - calc(var(--btn-curve) + var(--btn-border-w) * .5)) calc(100% - var(--btn-border-w)), calc(100% - calc(var(--btn-curve) + var(--btn-border-w) * .5)) calc(100% - var(--btn-border-w))); } /* Every non-primary button variant opts out of the clip-path/gradient- border look entirely -- plain shape, no pseudo-elements, same as before this glow-up. .ghost/.danger are secondary/destructive actions that should read as visually quieter than a primary button; .chip is a small filter/tag pill; .tile-btn/.linklike aren't buttons visually at all (a whole clickable card, and plain link-styled text, respectively) -- none of these should inherit a neon CTA treatment. */ button.ghost,button.danger,button.chip,button.tile-btn,button.linklike{ isolation:auto;box-shadow:none;clip-path:none; } button.ghost::before,button.danger::before,button.chip::before,button.tile-btn::before,button.linklike::before, button.ghost::after,button.danger::after,button.chip::after,button.tile-btn::after,button.linklike::after{ content:none; } button.ghost,button.danger{border-radius:10px;color:var(--text)} button.ghost{background:var(--bg3);border:1px solid var(--border)} button.danger{background:#7f1d1d;color:#fff} button.ghost:hover,button.danger:hover{filter:brightness(1.15)} button.chip,button.tile-btn,button.linklike{border-radius:0} /* a.ghost (2026-08-25, BotDetail.vue's "manage his roster" router-link): a real navigation, not a button-triggered action -- Alan specifically asked for it "linked rather than nested" (Daniel's feedback: splitting bots/roster reads confusing without a way back and forth between them). button/button.ghost above are element-scoped (button{...}), so an picks up none of that reset by default -- this mirrors both onto the one link that needs to look identical to its sibling buttons in the same row, without a generic .ghost class quietly restyling every other in the app. */ a.ghost{color:var(--text);border:1px solid var(--border);border-radius:10px; padding:9px 16px;font-weight:700;font-size:.9rem;cursor:pointer; background:var(--bg3);text-decoration:none;display:inline-block} a.ghost:hover{filter:brightness(1.15)} /* .a-btn (2026-09-01, GooberDerbyPanel.vue's per-goober "small, themed" router-links to /goobers/:id, goober-derby-redesign-plan Task 4) -- same reasoning as a.ghost just above: the base button{} glow-up rule is element-scoped (button{...}), so a router-link's real tag picks up none of it by default. This mirrors the PRIMARY button{} glow-up (animated-gradient-border CTA, not the quieter .ghost look) since these ARE the primary action on this page now that stake/tune/swap moved off it -- but sized down (smaller padding/ font) per Alan's "small, maybe name only" ask, one per goober times up to 8 goobers in a wrapped row. Each link sets its own --accent-1/2/3 inline (via gooberColor()) so the gradient border reads as that goober's own color rather than the page's default accent triad. */ a.a-btn{ --btn-border: linear-gradient(-45deg, var(--accent-1), var(--accent-3), var(--accent-2)); --btn-border-w: .1em; --btn-curve: .3em; --btn-fill: color-mix(in srgb, var(--bg) 15%, #05030a 85%); color: color-mix(in srgb, var(--accent-2) 55%, white 45%); position: relative; isolation: isolate; display: inline-grid; grid-auto-flow: column; place-content: center; border: 0; padding: 6px 12px; font-weight: 700; font-size: .78rem; cursor: pointer; text-decoration: none; box-shadow: 0 4px 14px rgba(0,0,0,.35); clip-path: polygon(0% var(--btn-curve), var(--btn-curve) 0, 100% 0, 100% calc(100% - var(--btn-curve)), calc(100% - var(--btn-curve)) 100%, 0 100%); transition: color 200ms; } a.a-btn::before, a.a-btn::after{content:"";position:absolute;inset:0} a.a-btn::before{background:var(--btn-border);background-size:300% 300%;z-index:-2} @media (prefers-reduced-motion:no-preference){ a.a-btn::before{animation:btn-border-shift 5s ease infinite} } :root:is([data-motion="reduced"],[data-motion="off"]) a.a-btn::before{animation:none} a.a-btn::after{ background: var(--btn-fill); z-index: -1; clip-path: polygon( var(--btn-border-w) calc(var(--btn-curve) + var(--btn-border-w) * .5), calc(var(--btn-curve) + var(--btn-border-w) * .5) var(--btn-border-w), calc(100% - var(--btn-border-w)) var(--btn-border-w), calc(100% - var(--btn-border-w)) calc(100% - calc(var(--btn-curve) + var(--btn-border-w) * .5)), calc(100% - calc(var(--btn-curve) + var(--btn-border-w) * .5)) calc(100% - var(--btn-border-w)), var(--btn-border-w) calc(100% - var(--btn-border-w))); transition: clip-path 400ms; } a.a-btn:where(:hover,:focus-visible){color:#fff} a.a-btn:where(:hover,:focus-visible)::after{ clip-path: polygon( calc(100% - var(--btn-border-w)) calc(100% - calc(var(--btn-curve) + var(--btn-border-w) * .5)), calc(100% - var(--btn-border-w)) var(--btn-border-w), calc(100% - var(--btn-border-w)) var(--btn-border-w), calc(100% - var(--btn-border-w)) calc(100% - calc(var(--btn-curve) + var(--btn-border-w) * .5)), calc(100% - calc(var(--btn-curve) + var(--btn-border-w) * .5)) calc(100% - var(--btn-border-w)), calc(100% - calc(var(--btn-curve) + var(--btn-border-w) * .5)) calc(100% - var(--btn-border-w))); } /* "force a decision 🎲" die-key button (2026-08-26, BotDetail.vue). Reskinned from uiverse.io chintu_2484/fat-moose-56 — a physical keyboard-key press effect (dark bezel + raised inset key, 3px translateY on :active) — with the key's letter swapped for the die emoji and its literal white/grey plastic-key palette replaced with theme tokens (--bg/--bg3/--border) so the button reads correctly across all 12 themes instead of only the demo's light-grey key. The "force a decision" copy moved out of the button and into a sibling label per Alan's ask — the button is now icon-only. */ .dice-roll-wrap{display:inline-flex;align-items:center;gap:10px} .dice-roll{position:relative;width:64px;height:56px;padding:0;border:0; border-radius:10px;background:var(--bg);box-shadow:0 1px 1px 1px var(--border)} .dice-roll .key{position:absolute;inset:3px 3px 6px;display:flex;align-items:center; justify-content:center;border:0;border-bottom:2px solid var(--border); border-radius:8px;background:var(--bg3);box-shadow:0 4px 0 .2px var(--bg); font-size:22px;line-height:1;transition:box-shadow 80ms,transform 80ms} .dice-roll:active .key{box-shadow:0 0 0 0 transparent;transform:translateY(4px)} .dice-roll-label{font-weight:700;font-size:.9rem;color:var(--text)} /* DiceSpinner.vue -- "force a decision" loading state (2026-08-27 live feedback). Cube geometry + tumble keyframe lifted verbatim from uiverse.io AqFox/young-dragon-29 / bociKond/wise-bat-13 (6 flat divs folded via translate/rotate+transform-origin, no per-face translateZ) -- only the face fill changed, from a translucent color panel to a real SVG pip-face (DiceSpinner.vue's own template), themed here via --clr off the accent token so it matches every pack automatically. */ /* 2026-08-28 live report: "the die 'jumps' up about one line, where I would expect it to stay in place and spin where it is on those other style buttons ... the jumping up on the bot detail page makes it look like a hologram above the button we made, very cool, but the jumping is detrimental if not paired with that same visual button." Root cause: .dice-spinner-face is position:absolute but .dice-spinner itself never declared itself as their containing block, so the faces escaped to whatever POSITIONED ancestor was nearest up the DOM. Inside BotDetail's .dice-roll button that ancestor is .key (position:relative, sized/placed almost exactly like the die itself), so the escape happened to read as a deliberate "hologram above the button." Inside BotCard.vue/BotRosterGrid.vue's plain buttons, the button glow-up's own `button{position:relative}` (above) is the nearest positioned ancestor instead -- a much bigger, differently- padded box, so the same escape put the die noticeably out of place. position:relative here makes .dice-spinner its own faces' containing block everywhere, fixing the plain-button case; the .dice-roll override right below deliberately un-contains it again in that one context, keeping the hologram look Alan wants paired with that specific button style. */ .dice-spinner{--clr:var(--accent-1);animation:dice-spinner-tumble 1.6s infinite ease; transform-style:preserve-3d;display:inline-block;position:relative;vertical-align:middle} .dice-roll .dice-spinner{position:static} .dice-spinner-face{background:color-mix(in srgb, var(--clr) 15%, transparent); height:100%;position:absolute;width:100%;border:2px solid var(--clr);border-radius:3px} .dice-spinner-pips{width:100%;height:100%;fill:var(--clr)} /* translateZ can't take a percentage (no z-axis size to resolve it against) -- DiceSpinner.vue sets --half:(size/2)px as an inline style alongside width/height so this scales with the `size` prop instead of a fixed pixel value baked into the stylesheet. */ .dice-spinner-face.face-1{transform:translateZ(calc(var(--half) * -1)) rotateY(180deg)} .dice-spinner-face.face-2{transform:rotateY(-270deg) translateX(50%);transform-origin:top right} .dice-spinner-face.face-3{transform:rotateY(270deg) translateX(-50%);transform-origin:center left} .dice-spinner-face.face-4{transform:rotateX(90deg) translateY(-50%);transform-origin:top center} .dice-spinner-face.face-5{transform:rotateX(-90deg) translateY(50%);transform-origin:bottom center} .dice-spinner-face.face-6{transform:translateZ(var(--half))} @keyframes dice-spinner-tumble{ 0%{transform:rotate(45deg) rotateX(-25deg) rotateY(25deg)} 50%{transform:rotate(45deg) rotateX(-385deg) rotateY(25deg)} 100%{transform:rotate(45deg) rotateX(-385deg) rotateY(385deg)} } /* leaderboard sidebar nav triggers (index.html) — were bare onclick-

/, converted to real

/
, converted to real