/* HOOFBEAT UI Guideline v1: tokens and shared components (docs/UI_FRAMEWORK.md).
   Premium Equestrian Sports UI: full-bleed scene, dark olive glass, one lime accent, neo-grotesk type.
   Every number is the guideline's px on a 390-wide phone: calc(N * var(--u)), and --u = 100cqw / 390, so the whole
   UI scales with the 9:16 frame (.home-shell / .slice-shell are the containers). Pages only lay out. */
:root{
  --u:calc(100cqw / 390);
  /* surfaces */
  --ui-glass:rgb(29 33 23 / .76);--ui-glass-2:rgb(52 55 39 / .65);--ui-glass-deep:rgb(14 17 12 / .88);
  --ui-blur:blur(18px);--ui-blur-2:blur(14px);--ui-blur-deep:blur(20px);   /* none over live 3D (stable, race) */
  --ui-edge:rgb(255 255 255 / .16);--ui-hair:rgb(255 255 255 / .1);--ui-scrim:rgb(8 10 6 / .55);
  --ui-shadow:0 calc(8 * var(--u)) calc(30 * var(--u)) rgb(0 0 0 / .22);
  /* text */
  --ui-text:#fff;--ui-text-2:#d9dcd1;--ui-muted:#9fa598;--ui-on-lime:#151810;
  /* accents: lime = active / main CTA / selected · yellow = coins, energy, warnings · green = mood, health ·
     cyan = gems · danger. One accent per state; never lime + yellow + cyan as big fills side by side. */
  --ui-lime:#d9ff4f;--ui-yellow:#ffd846;--ui-green:#6be889;--ui-cyan:#35c8f4;--ui-danger:#ff655d;
  /* radius */
  --ui-r-xs:calc(8 * var(--u));--ui-r-sm:calc(16 * var(--u));--ui-r-md:calc(24 * var(--u));--ui-r-lg:calc(32 * var(--u));--ui-r-pill:999px;
  /* spacing (8pt grid, 4 for the finest steps) */
  --ui-s1:calc(4 * var(--u));--ui-s2:calc(8 * var(--u));--ui-s3:calc(12 * var(--u));--ui-s4:calc(16 * var(--u));
  --ui-s6:calc(24 * var(--u));--ui-s8:calc(32 * var(--u));--ui-s10:calc(40 * var(--u));--ui-margin:var(--ui-s6);
  /* type */
  --ui-font:Inter,"Inter var",-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  --ui-t-hero:calc(36 * var(--u));--ui-t-page:calc(30 * var(--u));--ui-t-name:calc(28 * var(--u));--ui-t-stat:calc(32 * var(--u));
  --ui-t-section:calc(20 * var(--u));--ui-t-body:calc(16 * var(--u));--ui-t-label:calc(13 * var(--u));
  --ui-on-scene:0 calc(1 * var(--u)) calc(12 * var(--u)) rgb(0 0 0 / .35);   /* type straight on the scene */
  /* motion */
  --ui-ease:cubic-bezier(.2,.8,.2,1);
}
.ui-root{font-family:var(--ui-font);font-size:var(--ui-t-body);font-weight:400;color:var(--ui-text);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
/* base rules carry no weight (:where), so any component or page rule overrides them */
:where(.ui-root) button{font:inherit;color:inherit;cursor:pointer}
:where(.ui-root) button:disabled{cursor:default}
:where(.ui-root) :focus-visible{outline:calc(2 * var(--u)) solid var(--ui-lime);outline-offset:calc(2 * var(--u))}
:where(.ui-root) svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
:where(.ui-root) svg.fill{fill:currentColor;stroke:none}
:where(.ui-root) img{-webkit-user-drag:none}
.ui-num{font-variant-numeric:tabular-nums}

/* ---- glass surfaces: main (cards), secondary (inner info), deep (dense info, dialogs, nav) ---- */
.ui-panel{background:var(--ui-glass);border:1px solid var(--ui-edge);border-radius:var(--ui-r-lg);box-shadow:var(--ui-shadow);-webkit-backdrop-filter:var(--ui-blur);backdrop-filter:var(--ui-blur)}
.ui-panel.soft{background:var(--ui-glass-2);-webkit-backdrop-filter:var(--ui-blur-2);backdrop-filter:var(--ui-blur-2)}
.ui-panel.deep{background:var(--ui-glass-deep);-webkit-backdrop-filter:var(--ui-blur-deep);backdrop-filter:var(--ui-blur-deep)}
.ui-scrim{position:absolute;inset:0;background:var(--ui-scrim);z-index:20}.ui-scrim[hidden]{display:none}
.ui-live{--ui-blur:none;--ui-blur-2:none;--ui-blur-deep:none}   /* over a live 3D canvas: no backdrop blur (mobile GPU) */

/* ---- type ---- */
.ui-hero{margin:0;font-weight:700;font-size:var(--ui-t-hero);line-height:1.1;letter-spacing:-.01em}
.ui-page-title{margin:0;font-weight:700;font-size:var(--ui-t-page);line-height:1.15;letter-spacing:-.01em}
.ui-name{margin:0;font-weight:700;font-size:var(--ui-t-name);line-height:1.1}
.ui-section{margin:0;font-weight:600;font-size:var(--ui-t-section);line-height:1.3}
.ui-label{margin:0;font-weight:400;font-size:var(--ui-t-label);color:var(--ui-muted);line-height:1.35}
.ui-eyebrow{margin:0;font-weight:600;font-size:var(--ui-t-label);letter-spacing:.12em;text-transform:uppercase;color:var(--ui-text-2)}
.ui-stat{font-weight:700;font-size:var(--ui-t-stat);line-height:1;font-variant-numeric:tabular-nums}
.ui-sub{color:var(--ui-text-2)}.ui-muted{color:var(--ui-muted)}

/* ---- brand (the only art kept from the results sheet) ---- */
.ui-brand{display:flex;align-items:center;gap:var(--ui-s2);margin-right:auto;background:none;border:0;padding:0;filter:drop-shadow(0 calc(2 * var(--u)) calc(6 * var(--u)) rgb(0 0 0 / .4))}
.ui-brand .mark{height:calc(36 * var(--u))}.ui-brand .word{height:calc(32 * var(--u))}
.ui-wordmark{display:flex;flex-direction:column;gap:calc(6 * var(--u));margin-right:auto;background:none;border:0;padding:0;text-align:left;text-shadow:var(--ui-on-scene)}
.ui-wordmark b{font-weight:700;font-size:calc(30 * var(--u));line-height:1;letter-spacing:-.01em}
.ui-wordmark small{font-weight:600;font-size:calc(9 * var(--u));letter-spacing:.32em;color:var(--ui-text-2)}

/* ---- buttons: primary lime, secondary dark glass; pill ---- */
.ui-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--ui-s2);min-height:calc(52 * var(--u));padding:0 var(--ui-s6);box-sizing:border-box;
  border-radius:var(--ui-r-pill);border:1px solid var(--ui-edge);background:var(--ui-glass-deep);color:var(--ui-text);font-weight:600;font-size:calc(17 * var(--u));line-height:1;
  transition:transform .12s var(--ui-ease),filter .12s}
.ui-btn:active{transform:scale(.97)}
.ui-btn:disabled{opacity:.45}
.ui-btn svg{width:calc(20 * var(--u));height:calc(20 * var(--u));flex:none}
.ui-btn.primary{background:var(--ui-lime);border-color:transparent;color:var(--ui-on-lime)}
.ui-btn.danger{color:var(--ui-danger)}
.ui-btn.block{position:relative;display:flex;width:100%;min-height:calc(52 * var(--u));font-size:calc(18 * var(--u))}
.ui-btn.block>svg:last-child{position:absolute;right:var(--ui-s6);width:calc(22 * var(--u));height:calc(22 * var(--u))}   /* label centred, arrow at the edge */
.ui-btn.caps{text-transform:uppercase;letter-spacing:.02em}
.ui-btn.sm{min-height:calc(40 * var(--u));padding:0 var(--ui-s4);font-size:var(--ui-t-label)}
.ui-icon-btn{flex:none;display:grid;place-items:center;width:calc(40 * var(--u));height:calc(40 * var(--u));padding:calc(11 * var(--u));box-sizing:border-box;border-radius:50%;
  border:1px solid var(--ui-edge);background:var(--ui-glass-deep);color:var(--ui-text);-webkit-backdrop-filter:var(--ui-blur);backdrop-filter:var(--ui-blur)}
.ui-icon-btn.sm{width:calc(34 * var(--u));height:calc(34 * var(--u));padding:calc(9 * var(--u))}
.ui-icon-btn.plain{background:rgb(255 255 255 / .08);border-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.ui-icon-btn.go{width:calc(40 * var(--u));height:calc(40 * var(--u));padding:calc(11 * var(--u));background:var(--ui-lime);border-color:transparent;color:var(--ui-on-lime)}
.ui-icon-btn.go svg{stroke-width:2.6}
.ui-icon-btn:active{transform:scale(.95)}

/* ---- money: the mockups' flat yellow U coin ---- */
.ui-coin{display:inline-grid;place-items:center;flex:none;width:calc(20 * var(--u));height:calc(20 * var(--u));border-radius:50%;background:var(--ui-yellow);color:#5a3f00;
  font-style:normal;font-weight:800;font-size:calc(11 * var(--u));line-height:1}
.ui-wallet{display:flex;align-items:center;gap:var(--ui-s2);height:calc(32 * var(--u));min-width:calc(80 * var(--u));padding:0 var(--ui-s4) 0 calc(6 * var(--u));box-sizing:border-box;border-radius:var(--ui-r-pill);
  border:1px solid var(--ui-edge);background:var(--ui-glass-deep);-webkit-backdrop-filter:var(--ui-blur);backdrop-filter:var(--ui-blur);font-weight:600;font-size:var(--ui-t-body);font-variant-numeric:tabular-nums}
.ui-wallet .gem{width:calc(18 * var(--u));height:calc(18 * var(--u));color:var(--ui-cyan)}
.ui-price{display:inline-flex;align-items:center;gap:var(--ui-s2);height:calc(24 * var(--u));padding:0 var(--ui-s3) 0 calc(3 * var(--u));border-radius:var(--ui-r-pill);background:rgb(255 255 255 / .1);
  font-weight:600;font-size:calc(14 * var(--u));font-variant-numeric:tabular-nums}
.ui-price .ui-coin{width:calc(18 * var(--u));height:calc(18 * var(--u));font-size:calc(10 * var(--u))}
.ui-price.short .ui-coin{background:#8d9187;color:#3a3d35}

/* ---- headers ---- */
.ui-top{display:flex;align-items:center;gap:var(--ui-s2);padding:max(var(--ui-s4),env(safe-area-inset-top)) var(--ui-margin) var(--ui-s2)}
.ui-header{display:flex;align-items:center;gap:var(--ui-s3);padding:max(var(--ui-s4),env(safe-area-inset-top)) var(--ui-margin) var(--ui-s2)}
.ui-header h1{flex:1;margin:0 0 0 var(--ui-s2);font-weight:700;font-size:calc(28 * var(--u));line-height:1.15;letter-spacing:-.01em;text-shadow:var(--ui-on-scene);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- navigation: global bottom nav; tabs / filters in one pill; secondary rail ---- */
.ui-nav{display:grid;grid-template-columns:repeat(var(--n,5),1fr);gap:var(--ui-s1);margin:0 var(--ui-s4) max(var(--ui-s3),env(safe-area-inset-bottom));padding:calc(6 * var(--u));border-radius:var(--ui-r-lg)}
.ui-nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(3 * var(--u));height:calc(50 * var(--u));border:0;border-radius:var(--ui-r-md);background:none;
  color:var(--ui-text);font-weight:500;font-size:calc(12 * var(--u))}
.ui-nav svg{width:calc(20 * var(--u));height:calc(20 * var(--u))}
.ui-nav [aria-current]{background:var(--ui-lime);color:var(--ui-on-lime);font-weight:600}
.ui-tabs{display:grid;grid-template-columns:repeat(var(--n,3),1fr);gap:var(--ui-s1);padding:var(--ui-s1);border-radius:var(--ui-r-pill)}
.ui-tabs button{height:calc(44 * var(--u));border:0;border-radius:var(--ui-r-pill);background:none;font-weight:600;font-size:var(--ui-t-body);color:var(--ui-text-2)}
.ui-tabs [aria-selected=true]{background:var(--ui-lime);color:var(--ui-on-lime)}
.ui-rail{display:flex;flex-direction:column;gap:var(--ui-s3)}   /* a page's secondary navigation (stable) */
.ui-rail button{display:flex;flex-direction:column;align-items:center;gap:var(--ui-s1);border:0;background:none;padding:0;font-weight:500;font-size:calc(12 * var(--u));text-shadow:var(--ui-on-scene)}
.ui-rail .ui-icon-btn{pointer-events:none}
.ui-rail [aria-expanded=true] .ui-icon-btn{background:var(--ui-lime);color:var(--ui-on-lime);border-color:transparent}

/* ---- cards ---- */
.ui-card{position:relative;display:flex;flex-direction:column;gap:var(--ui-s1);min-width:0;padding:var(--ui-s3);box-sizing:border-box;text-align:left;
  border-radius:var(--ui-r-md);border:1px solid var(--ui-edge);background:var(--ui-glass);-webkit-backdrop-filter:var(--ui-blur);backdrop-filter:var(--ui-blur)}
.ui-card.small{border-radius:var(--ui-r-sm);padding:var(--ui-s2)}
.ui-card .art{display:block;border-radius:var(--ui-r-sm);overflow:hidden}
.ui-card .art>img,.ui-card .art>canvas{display:block;width:100%;height:100%;object-fit:cover}
.ui-card b{font-weight:700;font-size:calc(17 * var(--u));line-height:1.2}
.ui-card small{font-size:var(--ui-t-label);color:var(--ui-muted);line-height:1.35}
.ui-card .chev{position:absolute;right:var(--ui-s3);top:var(--ui-s3);width:calc(16 * var(--u));height:calc(16 * var(--u));color:var(--ui-text);opacity:.85}
/* selected: lime edge, a touch brighter; never scaled up in a grid */
.ui-card[aria-pressed=true],.ui-card[aria-checked=true],.ui-card.is-selected,.ui-row.is-selected{border:2px solid var(--ui-lime);background:var(--ui-glass-2);
  box-shadow:0 0 0 1px rgb(217 255 79 / .2),var(--ui-shadow);animation:ui-pick .14s var(--ui-ease)}
@keyframes ui-pick{50%{transform:scale(1.03)}}
.ui-row{display:flex;align-items:center;gap:var(--ui-s3);min-height:calc(60 * var(--u));padding:0 var(--ui-s4);box-sizing:border-box;border-radius:var(--ui-r-sm);border:1px solid transparent;background:rgb(255 255 255 / .05)}
.ui-list{margin:0;padding:var(--ui-s1) var(--ui-s4);list-style:none;border-radius:var(--ui-r-md)}
.ui-list>li{display:flex;align-items:center;gap:var(--ui-s3);min-height:calc(56 * var(--u));padding:var(--ui-s2) 0;box-sizing:border-box;font-weight:500;font-size:var(--ui-t-body)}
.ui-list>li+li{border-top:1px solid var(--ui-hair)}
.ui-list>li>svg{width:calc(22 * var(--u));height:calc(22 * var(--u));flex:none}
.ui-list>li>span{flex:1}.ui-list>li>small{color:var(--ui-muted);font-size:var(--ui-t-label)}
.ui-list>li>button.row{flex:1;align-self:stretch;display:flex;align-items:center;gap:var(--ui-s3);margin:calc(-1 * var(--ui-s2)) 0;padding:0;border:0;background:none;text-align:left;font:inherit;color:inherit}   /* a tappable row */
.ui-list .row>svg{width:calc(22 * var(--u));height:calc(22 * var(--u));flex:none}.ui-list .row>span{flex:1}.ui-list .row>small{color:var(--ui-muted);font-size:var(--ui-t-label)}
.ui-list .row.danger{color:var(--ui-danger)}
.ui-list .chev{width:calc(18 * var(--u))!important;height:calc(18 * var(--u))!important;color:var(--ui-text-2)}
.ui-list .note{display:block;margin-top:var(--ui-s1);font-size:var(--ui-t-label);font-weight:400;color:var(--ui-muted);line-height:1.45}
.ui-facts{margin:0;padding:var(--ui-s1) var(--ui-s4);border-radius:var(--ui-r-md)}
.ui-facts>div{display:flex;align-items:center;gap:var(--ui-s3);min-height:calc(48 * var(--u))}
.ui-facts>div+div{border-top:1px solid var(--ui-hair)}
.ui-facts dt{flex:1;display:flex;align-items:center;gap:var(--ui-s3);color:var(--ui-text-2)}.ui-facts dt svg{width:calc(20 * var(--u));height:calc(20 * var(--u))}
.ui-facts dd{margin:0;font-weight:600}

/* ---- small parts ---- */
.ui-chip{display:inline-flex;align-items:center;height:calc(32 * var(--u));padding:0 var(--ui-s3);box-sizing:border-box;border-radius:var(--ui-r-pill);background:var(--ui-glass-deep);
  font-weight:600;font-size:calc(12 * var(--u));letter-spacing:.1em;text-transform:uppercase}
.ui-badge{display:inline-flex;align-items:center;height:calc(22 * var(--u));padding:0 var(--ui-s2);border-radius:var(--ui-r-pill);background:var(--ui-yellow);color:var(--ui-on-lime);
  font-weight:700;font-size:calc(12 * var(--u));white-space:nowrap}
.ui-bar{position:relative;display:block;height:calc(8 * var(--u));border-radius:var(--ui-r-pill);background:rgb(255 255 255 / .18);overflow:hidden}
.ui-bar>i{position:absolute;inset:0 auto 0 0;width:calc(var(--v,0) * 1%);border-radius:inherit;background:var(--c,var(--ui-green));transition:width .5s var(--ui-ease)}
.ui-meter{display:flex;align-items:center;gap:var(--ui-s2)}.ui-meter>svg{width:calc(14 * var(--u));height:calc(14 * var(--u));flex:none;color:var(--c,var(--ui-green))}.ui-meter>.ui-bar{flex:1}
.ui-switch{appearance:none;-webkit-appearance:none;position:relative;flex:none;width:calc(48 * var(--u));height:calc(28 * var(--u));margin:0;border-radius:var(--ui-r-pill);background:rgb(255 255 255 / .2);cursor:pointer;transition:background .18s}
.ui-switch::after{content:'';position:absolute;top:calc(2 * var(--u));left:calc(2 * var(--u));width:calc(24 * var(--u));height:calc(24 * var(--u));border-radius:50%;background:#fff;transition:transform .18s var(--ui-ease)}
.ui-switch:checked{background:var(--ui-green)}.ui-switch:checked::after{transform:translateX(calc(20 * var(--u)))}
.ui-input{font:inherit;font-weight:600;color:var(--ui-text);height:calc(44 * var(--u));padding:0 var(--ui-s3);box-sizing:border-box;border-radius:var(--ui-r-xs);border:1px solid var(--ui-edge);background:rgb(0 0 0 / .25);min-width:0}
.ui-avatar{flex:none;width:calc(48 * var(--u));height:calc(48 * var(--u));border-radius:50%;object-fit:cover;background:#8fb8d6}
.ui-dots{display:flex;justify-content:center;gap:var(--ui-s2)}.ui-dots i{width:calc(6 * var(--u));height:calc(6 * var(--u));border-radius:var(--ui-r-pill);background:rgb(255 255 255 / .3);transition:width .2s var(--ui-ease)}
.ui-dots i.on{width:calc(20 * var(--u));background:var(--ui-lime)}
.ui-divider{height:1px;background:var(--ui-hair);border:0;margin:0}

/* ---- feedback: toast, dialog (fade + rise 12, 200 ms) ---- */
.ui-toast{position:absolute;left:50%;bottom:calc(200 * var(--u));transform:translate(-50%,calc(12 * var(--u)));margin:0;z-index:30;padding:var(--ui-s3) var(--ui-s4);border-radius:var(--ui-r-pill);
  background:var(--ui-glass-deep);border:1px solid var(--ui-edge);font-weight:500;font-size:var(--ui-t-label);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .2s,transform .2s var(--ui-ease)}
.ui-toast.on{opacity:1;transform:translate(-50%,0)}
.ui-modal{position:absolute;z-index:21;left:var(--ui-s4);right:var(--ui-s4);top:50%;transform:translateY(-50%);max-height:70cqh;overflow-y:auto;box-sizing:border-box;padding:var(--ui-s6);border-radius:var(--ui-r-lg);
  animation:ui-rise .2s var(--ui-ease)}
.ui-modal[hidden]{display:none}
@keyframes ui-rise{from{opacity:0;transform:translateY(calc(-50% + 12 * var(--u)))}}
.ui-modal>header{display:flex;align-items:center;gap:var(--ui-s2);margin-bottom:var(--ui-s4)}
.ui-modal>header h2{flex:1;display:flex;align-items:center;gap:var(--ui-s2);margin:0;font-weight:700;font-size:var(--ui-t-page)}
.ui-modal>header h2 svg{width:calc(24 * var(--u));height:calc(24 * var(--u))}
.ui-enter{animation:ui-enter .22s var(--ui-ease) both}
@keyframes ui-enter{from{opacity:0;transform:translateY(calc(12 * var(--u)))}}

@media (prefers-reduced-motion:reduce){.ui-root *,.ui-root *::after{animation:none!important;transition:none!important}}
.ui-brand.art{filter:drop-shadow(0 calc(2 * var(--u)) calc(4 * var(--u)) rgb(0 0 0 / .3))}.ui-brand.art .word{height:calc(37 * var(--u));margin-left:calc(-6 * var(--u))}