/* UI polish layer for the app (ui-polish.js is its partner). Presentation only: no markup, copy or behaviour changes.
   Linked at the END of <body> so it follows the inline body styles. Not touched on purpose: the phone tab bar (owner's
   call) and the guide's own cream/maroon palette. No illustrations in the app (owner's call). Everything that moves
   stops under prefers-reduced-motion (last block). To revert, remove the <link> and the <script> for ui-polish. */
:root{--ease-spring:cubic-bezier(.34,1.56,.64,1);--ease-soft:cubic-bezier(.22,1,.36,1)}

/* ---- Popups (report, order ticket, video): they leave as smoothly as they arrive ----
   The scrim stays laid out while closed but is invisible and untouchable (visibility + pointer-events), so nothing hidden
   can catch a tap. On phones the bottom sheet slides down on close. */
html body .scrim{display:flex;visibility:hidden;opacity:0;pointer-events:none;transition:opacity .2s ease,visibility 0s linear .22s}
html body .scrim.on{visibility:visible;opacity:1;pointer-events:auto;transition:opacity .28s ease,visibility 0s}
html body .scrim .modal{animation:none;opacity:0;transform:translateY(14px) scale(.975);transition:opacity .16s ease,transform .2s ease-in}
html body .scrim.on .modal{opacity:1;transform:none;transition:opacity .22s ease,transform .5s var(--ease-spring)}
@media(max-width:720px){
 html body .scrim .modal{transform:translateY(60px);transition:opacity .18s ease,transform .22s ease-in}
 html body .scrim.on .modal{transform:none;transition:opacity .2s ease,transform .45s cubic-bezier(.2,1.2,.4,1)}
}
/* contents rise in sequence; .mmove (the report's big figure) keeps its own pop animation */
html body .scrim.on .modal>*:not(.mmove){animation:uiRise .45s var(--ease-soft) both}
html body .scrim.on .modal>*:nth-child(2){animation-delay:.03s}
html body .scrim.on .modal>*:nth-child(3){animation-delay:.06s}
html body .scrim.on .modal>*:nth-child(4){animation-delay:.09s}
html body .scrim.on .modal>*:nth-child(n+5){animation-delay:.12s}
@keyframes uiRise{from{opacity:0;transform:translateY(8px)}}

/* ---- Buttons: springy lift, quick firm press, a light sweep on the primaries, a tap ripple ---- */
html body .play,html body .go,html body .ghostbtn,html body .bb,html body .quick button,html body .tabs2 button,html body .bar button,html body .showmore,html body .wlnewbtn,html body #rndGo{
 transition:transform .38s var(--ease-spring),box-shadow .3s var(--ease-soft),background-color .2s,border-color .2s,color .2s,filter .2s,opacity .2s}
/* the buttons that carry the sweep or the ripple hold them inside */
html body .play,html body .go,html body .ghostbtn,html body .bb,html body .quick button,html body .showmore,html body .wlnewbtn{position:relative;overflow:hidden}
html body .play,html body .go,html body .ghostbtn{isolation:isolate}
@media(hover:hover){
 html body .play:hover:not(:disabled),html body .go:hover:not(:disabled),html body .ghostbtn:hover{transform:translateY(-2px);filter:brightness(1.06)}
 html body .go:not(.sell):hover:not(:disabled){box-shadow:0 12px 30px rgba(76,195,138,.32)}
 html body .go.sell:hover:not(:disabled),html body .play:hover:not(:disabled),html body .ghostbtn:hover{box-shadow:0 14px 34px rgba(200,16,46,.34)}
 html body .play::after,html body .go::after,html body .ghostbtn::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.22) 48%,transparent 66%);transform:translateX(-120%)}
 html body .play:hover:not(:disabled)::after,html body .go:hover:not(:disabled)::after,html body .ghostbtn:hover::after{transform:translateX(120%);transition:transform .75s var(--ease-soft)}
 html body .bb:hover,html body .quick button:hover,html body .showmore:hover,html body .wlnewbtn:hover{transform:translateY(-1px)}
}
html body .play:active:not(:disabled),html body .go:active:not(:disabled),html body .ghostbtn:active,html body .bb:active,html body .quick button:active,html body .tabs2 button:active,html body .showmore:active,html body .wlnewbtn:active{
 transform:translateY(0) scale(.965);transition-duration:.08s}
/* the chosen quick amount and the Buy/Sell tab settle with a small pop */
html body .quick button.on,html body .tabs2 button.on{animation:uiPop .35s var(--ease-spring)}
@keyframes uiPop{from{transform:scale(.94)}}
/* the tap ripple (ui-polish.js adds the span) */
.ui-ripple{position:absolute;z-index:0;border-radius:50%;pointer-events:none;background:currentColor;opacity:.2;transform:scale(0);animation:uiRipple .6s var(--ease-soft) forwards}
html body .play .ui-ripple,html body .go.sell .ui-ripple,html body .ghostbtn .ui-ripple{background:#fff;opacity:.28}
@keyframes uiRipple{to{transform:scale(1);opacity:0}}
/* profile: Edit/Save are the app's red primary, Change password/Cancel the quiet secondary (they were the trading green) */
html body #pEdit,html body #pSave{background:#c8102e;color:#fff;border-color:transparent;box-shadow:0 10px 24px rgba(200,16,46,.26)}
html body #pPass,html body #pCancel{background:rgba(244,241,233,.05);border:1px solid var(--ln2);color:var(--tx)}
html:not(.dark) body #pPass,html:not(.dark) body #pCancel{background:var(--p1)}
@media(hover:hover){
 html body #pEdit:hover,html body #pSave:hover{filter:brightness(1.07);transform:translateY(-1px)}
 html body #pPass:hover,html body #pCancel:hover{border-color:var(--tx);transform:translateY(-1px)}
}

/* ---- Text fields: gold focus glow (dark theme), a hover hint, gold selection ---- */
html body .mqi,html body .nsearch input,html body #lgName,html body #lgCode,html body #wlName{transition:border-color .2s,box-shadow .25s var(--ease-soft),background-color .2s}
@media(hover:hover){html body .mqi:hover:not(:focus),html body .nsearch input:hover:not(:focus){border-color:var(--ln2)}}
html.dark body .mqi:focus,html.dark body .nsearch input:focus,html.dark body #lgName:focus,html.dark body #lgCode:focus,html.dark body #wlName:focus{
 border-color:rgba(241,191,0,.7);box-shadow:0 0 0 4px rgba(241,191,0,.14);outline:none}
html body .mqi:focus::placeholder,html body .nsearch input:focus::placeholder{opacity:.5;transition:opacity .2s}
html body #tmodal ::selection,html body .mqi::selection,html body .nsearch input::selection{background:rgba(241,191,0,.32);color:inherit}
/* the order ticket's amount: a gold underline grows under it while it has focus (it replaces the field's focus ring) */
html body .field.big .cur{position:relative;padding-bottom:6px}
html body .field.big .cur::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:#f1bf00;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease-soft)}
html body .field.big .cur:focus-within::after{transform:scaleX(1)}
html body .field.big input:focus{outline:none;box-shadow:none}

/* ---- Numbers that move (ui-polish.js): the value counts to its new figure and flashes green or red ---- */
html body #hv,html body #hc{font-variant-numeric:tabular-nums}
html body .ui-flash-up{animation:uiFlashUp 2s var(--ease-soft)}
html body .ui-flash-dn{animation:uiFlashDn 2s var(--ease-soft)}
@keyframes uiFlashUp{0%{color:#4cc38a;text-shadow:0 0 18px rgba(76,195,138,.55)}100%{text-shadow:0 0 0 transparent}}
@keyframes uiFlashDn{0%{color:#f0605d;text-shadow:0 0 18px rgba(240,96,93,.5)}100%{text-shadow:0 0 0 transparent}}

/* ---- Moving between screens (ui-polish.js): a new tab eases up, a player's page slides in ---- */
html body #main>.page.ui-enter{animation:uiPage .42s var(--ease-soft) both}
html body #main>.page.ui-enter-deep{animation:uiPageDeep .45s var(--ease-soft) both}
@keyframes uiPage{from{opacity:0;transform:translateY(10px)}}
@keyframes uiPageDeep{from{opacity:0;transform:translateX(18px)}}

/* ---- Loading (ui-polish.js): a shimmer bar instead of "Loading…" (the text stays for screen readers) ---- */
html body .ui-loading{display:inline-block;min-width:9em;border-radius:6px;color:transparent!important;
 background:linear-gradient(90deg,var(--p2) 0%,var(--p3) 45%,var(--p2) 90%);background-size:220% 100%;animation:uiShimmer 1.3s linear infinite}
@keyframes uiShimmer{from{background-position:120% 0}to{background-position:-100% 0}}

/* ---- Toast: springs up and settles; still hidden and untouchable when off ---- */
html body .toast{transition:opacity .25s ease,transform .45s var(--ease-spring),visibility 0s linear .25s}
html body .toast.on{transition:opacity .25s ease,transform .45s var(--ease-spring),visibility 0s}
html body .toast:not(.on){transform:translateY(14px) scale(.96)}

/* ---- The guide follows the app's theme since 2026-10-07 (football-journey.css): here only depth, feel and motion ---- */
#journey-card{box-shadow:0 18px 48px rgba(0,0,0,.28),0 2px 6px rgba(0,0,0,.12)}
/* no fill-mode: once in, the card hands transform/opacity back to the guide's own fade transition */
#journey-card:not([hidden]){animation:uiGuideIn .5s var(--ease-spring)}
@keyframes uiGuideIn{from{opacity:0;transform:translateY(12px) scale(.96)}}
#journey-card .jactions button{transition:transform .35s var(--ease-spring),box-shadow .25s,filter .2s,background-color .2s,border-color .2s}
#journey-card .jactions button:not(.jsecondary){background-image:none;box-shadow:none}
#journey-card .jconfidence button{transition:transform .35s var(--ease-spring),background-color .2s,border-color .2s}
#journey-card .jclose{transition:transform .35s var(--ease-spring),background-color .2s}
@media(hover:hover){
 #journey-card .jactions button:not(:disabled):hover,#journey-card .jconfidence button:hover{transform:translateY(-1px)}
 #journey-card .jactions button:not(.jsecondary):not(.jtextlink):not(:disabled):hover{filter:brightness(1.08);box-shadow:none}
 #journey-card .jactions .jsecondary:not(:disabled):hover{border-color:var(--mu);background:var(--p3)}
 #journey-card .jclose:hover{transform:rotate(90deg)}
}
#journey-card .jactions button:not(:disabled):active,#journey-card .jconfidence button:active{transform:scale(.965);transition-duration:.08s}

/* ---- Reduced motion: nothing moves; states still change ---- */
@media (prefers-reduced-motion:reduce){
 html body .scrim,html body .scrim .modal,html body .toast,html body .play,html body .go,html body .ghostbtn,html body .bb,html body .quick button,html body .tabs2 button,html body .bar button,html body .showmore,html body .wlnewbtn,html body #rndGo,
 html body .field.big .cur::after,#journey-card .jactions button,#journey-card .jconfidence button,#journey-card .jclose{transition:none!important}
 html body .scrim .modal,html body .toast:not(.on){transform:none}
 html body .scrim.on .modal>*:not(.mmove),html body .quick button.on,html body .tabs2 button.on,html body .ui-flash-up,html body .ui-flash-dn,
 html body #main>.page.ui-enter,html body #main>.page.ui-enter-deep,html body .ui-loading,#journey-card:not([hidden]){animation:none!important}
 html body .play::after,html body .go::after,html body .ghostbtn::after,.ui-ripple{display:none}
}