/* Up or Down and Spread WARs modes (#updown and #spread screens in the main app; spread.css adds the Spread-only bits). Uses the site's theme tokens from style.css, so every look applies here too. */
:is(#updown,#spread){color:var(--text-primary); font:20px/1.25 'VT323',ui-monospace,monospace; padding-bottom:60px;}
:is(#updown,#spread) *{box-sizing:border-box;}
:is(#updown,#spread) [hidden]{display:none !important;}
:is(#updown,#spread) button, :is(#updown,#spread) input{font-family:inherit; font-size:inherit; color:inherit;}
:is(#updown,#spread) button{cursor:pointer;}
:is(#updown,#spread) button:disabled{opacity:.45; cursor:not-allowed;}
:is(#updown,#spread) button:focus-visible, :is(#updown,#spread) input:focus-visible, :is(#updown,#spread) a:focus-visible{outline:2px solid var(--accent-cyan, var(--text-primary)); outline-offset:2px;}
:is(#updown,#spread) a{color:var(--accent-amber);}
:is(#updown,#spread) .num{font-variant-numeric:tabular-nums;}
:is(#updown,#spread) .muted{color:var(--text-muted);}
:is(#updown,#spread) .small{font-size:17px;}
:is(#updown,#spread) .up{color:var(--success);} :is(#updown,#spread) .down{color:var(--danger);}
:is(#updown,#spread) h3{font-family:'Press Start 2P',monospace; font-weight:400; font-size:10px; margin:0; line-height:1.5; color:var(--text-muted); letter-spacing:.04em;}
:is(#updown,#spread) p{margin:0; max-width:70ch;}
.ud-wrap{max-width:1080px; margin:0 auto; display:flex; flex-direction:column; gap:16px;}
.ud-lede{color:var(--text-muted);}
.ud-banner{border:2px dashed var(--border); padding:10px 14px; color:var(--text-muted);}

.ud-bar{display:flex; gap:8px; flex-wrap:wrap;}
:is(#updown,#spread) .ud-seg{background:var(--bg-panel-alt); border:2px solid var(--border); color:var(--text-muted); padding:5px 14px; font-size:20px;}
:is(#updown,#spread) .ud-seg.on{color:var(--bg); background:var(--text-primary); border-color:var(--text-primary);}

.ud-rail{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px;}
.ud-rc{background:var(--bg-panel); border:2px solid var(--border); padding:10px 12px; display:flex; flex-direction:column; gap:4px; min-width:0;}
.ud-rc .k{font-family:'Press Start 2P',monospace; font-size:8px; color:var(--text-muted); letter-spacing:1px; display:flex; justify-content:space-between; gap:6px; line-height:1.6;}
.ud-rc .v{font-size:26px; overflow-wrap:anywhere;}
.ud-rc.live{border-color:var(--accent-amber); box-shadow:0 0 0 2px var(--bg), 0 0 16px color-mix(in srgb, var(--accent-amber) 30%, transparent);}
.ud-rc.next, .ud-rc.later{border-style:dashed;}
.ud-tag{font-family:'Press Start 2P',monospace; font-size:8px; padding:3px 5px; border:1px solid currentColor; line-height:1.4; white-space:nowrap;}
.ud-tag.up{color:var(--success);} .ud-tag.down{color:var(--danger);} .ud-tag.flat{color:var(--text-muted);} .ud-tag.open{color:var(--accent-amber);}

.ud-main{display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:14px; align-items:start;}
.ud-panel{background:var(--bg-panel); border:2px solid var(--border); padding:14px; display:flex; flex-direction:column; gap:10px; min-width:0;}
.ud-ph{display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap;}
.ud-price{font-size:42px; line-height:1;}
.ud-delta{font-size:22px;}
#udChart{width:100%; height:240px; display:block; background:var(--bg); border:1px solid var(--border);}
.ud-clock{display:flex; align-items:center; gap:10px;}
.ud-meter{flex:1; height:10px; background:var(--bg-panel-alt); border:1px solid var(--border); position:relative; overflow:hidden;}
.ud-meter i{position:absolute; inset:0 auto 0 0; background:var(--accent-amber); width:0; transition:width .25s linear;}
.ud-clock b{font-family:'Press Start 2P',monospace; font-weight:400; font-size:12px; min-width:56px; text-align:right;}
.ud-hist{display:flex; gap:6px; flex-wrap:wrap; min-height:30px;}
.ud-chip{font-family:'Press Start 2P',monospace; font-size:9px; padding:6px 7px; border:1px solid currentColor;}
.ud-chip.up{color:var(--success);} .ud-chip.down{color:var(--danger);} .ud-chip.flat{color:var(--text-muted);}

.ud-pools{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.ud-pool{border:2px solid var(--border); padding:8px; display:flex; flex-direction:column; gap:2px; min-width:0;}
.ud-pool .n{font-family:'Press Start 2P',monospace; font-size:9px;}
.ud-pool .x{font-size:28px;}
.ud-pool small{color:var(--text-muted); font-size:17px; overflow-wrap:anywhere;}
.ud-pool.up{border-color:color-mix(in srgb, var(--success) 55%, var(--border));} .ud-pool.up .n{color:var(--success);}
.ud-pool.down{border-color:color-mix(in srgb, var(--danger) 55%, var(--border));} .ud-pool.down .n{color:var(--danger);}
.ud-form{display:flex; flex-direction:column; gap:8px;}
.ud-amt{display:flex; gap:6px; align-items:stretch;}
.ud-amt input{flex:1; min-width:0; font-size:24px !important; background:var(--bg); border:2px solid var(--border); padding:4px 8px;}
.ud-tokens{display:flex;} .ud-tokens .ud-seg{padding:4px 10px !important; font-size:18px !important;}
.ud-sym{align-self:center; color:var(--text-muted);}
.ud-chips{display:flex; gap:6px; flex-wrap:wrap;}
:is(#updown,#spread) .ud-chipbtn{background:var(--bg-panel-alt); border:1px solid var(--border); padding:2px 10px; font-size:18px;}
.ud-go{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
:is(#updown,#spread) .ud-go button{font-family:'Press Start 2P',monospace; font-size:12px; padding:14px 8px; border:0; letter-spacing:1px; color:#120808; box-shadow:0 4px 0 #000;}
:is(#updown,#spread) .ud-go button:active:not(:disabled){transform:translateY(3px); box-shadow:0 1px 0 #000;}
:is(#updown,#spread) .ud-go .ud-up{background:var(--success);} :is(#updown,#spread) .ud-go .ud-down{background:var(--danger);}
#spread .sp-openr{display:grid; gap:6px;} #spread .sp-openr .btn{font-family:'Press Start 2P',monospace; font-size:12px; padding:14px 8px; width:100%;} #spread .sp-openr p{margin:0;}
.ud-done{border:2px dashed currentColor; padding:8px 10px;}
.ud-mine{border-top:1px dashed var(--border); padding-top:10px; display:flex; flex-direction:column; gap:6px;}
.ud-rows{display:flex; flex-direction:column; gap:4px;}
.ud-row{display:grid; grid-template-columns:auto 1fr auto; gap:8px; align-items:center; font-size:18px;}
.ud-st.lost{color:var(--text-muted);} .ud-st.live, .ud-st.waiting{color:var(--accent-amber);} .ud-st.claimed{color:var(--text-muted);}
.ud-st.won{color:var(--success, #33C17A);} .ud-st.refund, .ud-st.settling{color:var(--text-muted);}
:is(#updown,#spread) .ud-claim{background:var(--accent-amber); color:var(--on-accent, #170B0A); border:0; padding:2px 10px; font-size:18px; box-shadow:2px 2px 0 var(--border);}
.ud-how{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:6px;}
.ud-how li{max-width:70ch;}
.ud-foot{color:var(--text-muted); font-size:17px;}

.ud-hosted{display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
.ud-hl{font-family:'Press Start 2P',monospace; font-size:8px; color:var(--text-muted); letter-spacing:1px; margin-right:4px;}
:is(#updown,#spread) .ud-hosted .ud-seg{border-style:dashed;}
.ud-host{display:flex; flex-direction:column; gap:18px;}
.ud-invite,.ud-request{display:flex; flex-direction:column; gap:8px;}
.ud-request{border-top:1px dashed var(--border); padding-top:14px;}
.ud-link{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.ud-link input{flex:1 1 260px; min-width:0; max-width:560px; background:var(--bg-panel-alt); border:2px solid var(--border); padding:5px 10px; font-size:16px;}
.ud-you{color:var(--accent-amber);}
.ud-hform{display:grid; grid-template-columns:110px minmax(0,1fr); gap:10px 14px; align-items:center;}
.ud-hform input[type=text]{width:100%; max-width:360px; background:var(--bg-panel-alt); border:2px solid var(--border); padding:5px 10px;}
.ud-coins{display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 4px; max-height:150px; overflow:auto;}
:is(#updown,#spread) .ud-coin{background:var(--bg-panel-alt); border:2px solid var(--border); padding:3px 9px; display:flex; gap:6px; align-items:baseline;}
:is(#updown,#spread) .ud-coin small{color:var(--text-muted); font-size:16px;}
:is(#updown,#spread) .ud-coin.on{border-color:var(--accent-amber); color:var(--accent-amber);}
.ud-share{display:flex; gap:12px; align-items:center; flex-wrap:wrap;}
.ud-share input[type=range]{width:220px; max-width:100%; accent-color:var(--accent-amber);}
.ud-byhost{color:var(--text-muted);}
@media (max-width:860px){ .ud-main{grid-template-columns:1fr;} .ud-hform{grid-template-columns:1fr; gap:4px;} .ud-rail{grid-template-columns:repeat(2,minmax(0,1fr));} .ud-price{font-size:34px;} }
@media (prefers-reduced-motion:reduce){ .ud-rc.live{box-shadow:none;} .ud-meter i{transition:none;} }
:root.no-motion .ud-meter i{transition:none;}
/* chart range switch: LIVE (the round in play) / 1H (the last hour) */
.ud-range{display:inline-flex; border:1px solid var(--border); margin-left:auto;}
.ud-range button{font-family:'Press Start 2P',monospace; font-size:9px; letter-spacing:.06em; padding:6px 10px; background:transparent; color:var(--text-muted); border:0; cursor:pointer;}
.ud-range button.on{background:var(--accent-amber); color:var(--on-accent, #1a0d00);}
.ud-range button:focus-visible{outline:2px solid var(--text-primary); outline-offset:2px;}
/* Invite friends: the tier ladder */
.ud-gold{color:var(--accent-gold, #F5C542);}
.ud-pitch{margin:0;}
.ud-pitch b{color:var(--accent-gold, #F5C542); font-weight:inherit;}
.ud-ladder{display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:10px; margin-top:6px;}
.ud-step{position:relative; display:flex; flex-direction:column; gap:3px; padding:12px; border:2px solid var(--border); border-radius:10px; background:var(--bg-panel-alt); min-width:0;}
.ud-step .ud-medal{font-size:24px; line-height:1;}
.ud-step .ud-tn{font-family:'Press Start 2P',monospace; font-size:9px; line-height:1.6; overflow-wrap:anywhere;}
.ud-step .ud-pct{font-family:'Press Start 2P',monospace; font-size:18px; line-height:1.4; color:var(--accent-gold, #F5C542);}
.ud-step.none .ud-pct{color:var(--text-muted);}
.ud-step.you{border-color:var(--success, #33C17A); box-shadow:inset 0 0 0 1px var(--success, #33C17A);}
.ud-step.next{border-color:var(--accent-gold, #F5C542);}
.ud-badge{position:absolute; top:-10px; right:10px; font-family:'Press Start 2P',monospace; font-size:7px; padding:4px 6px; border-radius:5px; background:var(--accent-gold, #F5C542); color:#2A1A00;}
.ud-step.you .ud-badge{background:var(--success, #33C17A); color:#04210F;}
.ud-status{display:flex; flex-direction:column; gap:8px; padding:12px 14px; border-radius:10px; border:2px solid color-mix(in srgb, var(--accent-gold, #F5C542) 45%, var(--border)); background:color-mix(in srgb, var(--accent-gold, #F5C542) 8%, var(--bg-panel-alt));}
.ud-status p{margin:0;}
.ud-status b,.ud-calc b{color:var(--accent-gold, #F5C542); font-weight:inherit;}
.ud-prog{height:12px; border-radius:6px; background:var(--bg); border:1px solid var(--border); overflow:hidden;}
.ud-prog i{display:block; height:100%; background:linear-gradient(90deg, var(--accent-amber), var(--accent-gold, #F5C542)); transition:width .4s;}
.ud-srow{display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap;}
.ud-calc{margin:0; color:var(--text-muted);}
a.ud-chipbtn{text-decoration:none; display:inline-flex; align-items:center;}
.ud-buy{border-color:var(--accent-gold, #F5C542) !important; color:var(--accent-gold, #F5C542) !important;}
.ud-howbox h3{margin-top:0;}

/* Up or Down: a market, tile or tab with players in its live or next round glows (a soft pulse; a steady glow with Motion off) */
@keyframes hotGlow{0%,100%{box-shadow:0 0 0 1px color-mix(in srgb, var(--hot) 70%, transparent), 0 0 6px color-mix(in srgb, var(--hot) 35%, transparent);}50%{box-shadow:0 0 0 1px var(--hot), 0 0 16px color-mix(in srgb, var(--hot) 70%, transparent);}}
.mode-tile.hot, .mode-tab.hot, :is(#updown,#spread) .ud-seg.hot{--hot:var(--c, var(--success, #33C17A)); animation:hotGlow 2s ease-in-out infinite;}
:is(#updown,#spread) .ud-seg.hot{--hot:var(--success, #33C17A); position:relative;}
.ud-hot{margin-left:8px; font-size:16px; color:var(--success, #33C17A);}
:is(#updown,#spread) .ud-seg.on .ud-hot{color:inherit;}
.mode-tab-new.hot{background:var(--success, #33C17A); color:#04170c;}
.no-motion .mode-tile.hot, .no-motion .mode-tab.hot, .no-motion :is(#updown,#spread) .ud-seg.hot{animation:none; box-shadow:0 0 0 1px var(--hot), 0 0 10px color-mix(in srgb, var(--hot) 55%, transparent);}
@media (prefers-reduced-motion: reduce){ .mode-tile.hot, .mode-tab.hot, :is(#updown,#spread) .ud-seg.hot{animation:none; box-shadow:0 0 0 1px var(--hot), 0 0 10px color-mix(in srgb, var(--hot) 55%, transparent);} }

/* favourites: the ☆ beside each market chip, and the popup when someone calls a starred market */
.ud-favw{display:inline-flex; align-items:stretch;}
:is(#updown,#spread) .ud-favw .ud-seg{border-right:none;}
.ud-star{font-family:system-ui,'Segoe UI Symbol',sans-serif; background:var(--bg-panel-alt); border:2px solid var(--border); border-left:1px dashed var(--border); color:var(--text-muted); padding:0 8px; font-size:18px; line-height:1; cursor:pointer;}
.ud-star:hover, .ud-star:focus-visible{color:var(--accent-amber);}
.ud-star.on{color:var(--accent-amber);}
.ud-pop{position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); z-index:70; width:min(calc(100vw - 32px), 320px); background:var(--bg-panel); border:2px solid var(--accent-amber); box-shadow:0 0 18px color-mix(in srgb, var(--accent-amber) 40%, transparent); padding:12px 14px; font-family:'VT323',monospace; font-size:18px; color:var(--text-primary);}
.ud-pop p{margin:6px 0;}
.ud-pop-k{font-family:'Press Start 2P',monospace; font-size:8px; letter-spacing:1px; color:var(--accent-amber);}
.ud-pop-cd{color:var(--text-muted); margin-bottom:8px;}
.ud-pop-x{position:absolute; top:4px; right:6px; background:none; border:none; color:var(--text-muted); font-size:22px; cursor:pointer; line-height:1;}

/* Layout C: markets on the left, the market in the middle, the call panel docked on the right; phones show the list, then one market */
.ud-c{display:grid; grid-template-columns:250px minmax(0,1fr) 320px; grid-template-areas:"list live dock" "list mine dock"; grid-template-rows:auto 1fr; gap:14px; align-items:start;}
.ud-list{grid-area:list;} .ud-c .ud-live{grid-area:live;} .ud-dock{grid-area:dock;} .ud-minep{grid-area:mine;}
.ud-minep .ud-mine{border-top:0; padding-top:0;}
.ud-c .ud-panel{border-radius:14px; box-shadow:0 5px 0 color-mix(in srgb, var(--bg) 70%, #000), inset 0 1px 0 color-mix(in srgb, var(--text-primary) 8%, transparent);}
.ud-list{display:flex; flex-direction:column; gap:10px; min-width:0;}
.ud-mk{position:relative;}
:is(#updown,#spread) .ud-mkgo{width:100%; display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:2px 10px; align-items:center; text-align:left; padding:10px 12px 8px; border-radius:14px;
  background:linear-gradient(180deg, var(--bg-panel-alt), var(--bg-panel)); border:2px solid var(--border); box-shadow:0 5px 0 color-mix(in srgb, var(--bg) 70%, #000); transition:transform .12s, box-shadow .12s, border-color .12s;}
:is(#updown,#spread) .ud-mkgo:hover{transform:translateY(-2px);}
:is(#updown,#spread) .ud-mkgo:active{transform:translateY(3px); box-shadow:0 2px 0 color-mix(in srgb, var(--bg) 70%, #000);}
.ud-mk.on .ud-mkgo{border-color:var(--accent-gold, #F5C542); box-shadow:0 5px 0 color-mix(in srgb, var(--accent-gold, #F5C542) 35%, #000), 0 0 18px color-mix(in srgb, var(--accent-gold, #F5C542) 35%, transparent);}
.ud-mk.hot .ud-mkgo{--hot:var(--success, #33C17A); animation:hotGlow 2s ease-in-out infinite;}
.ud-mk.hosted .ud-mkgo{border-style:dashed;}
.ud-coinb{grid-row:span 2; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-family:'Press Start 2P',monospace; font-size:9px; color:#000; background:var(--cc); box-shadow:inset 0 -3px 0 rgba(0,0,0,.3), 0 0 10px color-mix(in srgb, var(--cc) 45%, transparent);}
.ud-mkn{font-family:"Press Start 2P",monospace; font-size:8px; line-height:1.6; min-width:0; overflow-wrap:anywhere;}
.ud-mkp{font-size:19px; text-align:right; white-space:nowrap; grid-column:3; grid-row:1;}
.ud-mkc{font-size:16px; color:var(--text-muted); white-space:nowrap;}
.ud-mkh{font-size:16px; color:var(--text-muted); text-align:right; white-space:nowrap;}
.ud-mkh.on{color:var(--success);}
.ud-spark{grid-column:1/-1; width:100%; height:30px; display:block;}
:is(#updown,#spread) .ud-mk .ud-star{position:absolute; top:-8px; right:-6px; width:26px; height:26px; border-radius:50%; border:2px solid var(--border); background:var(--bg-panel); padding:0; font-size:13px; display:grid; place-items:center; z-index:1;}
:is(#updown,#spread) .ud-mk .ud-star.on{border-color:var(--accent-amber);}
.ud-mk .ud-mkn{padding-right:0;}
.ud-backm{display:none; align-self:flex-start;}
.ud-live .ud-price{font-size:34px; line-height:1.2;}
#udChart{width:100%; height:250px; display:block; background:color-mix(in srgb, var(--bg) 85%, #000); border:1px solid var(--border); border-radius:10px;}
.ud-running{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:8px 12px; border-radius:10px; border:1px dashed color-mix(in srgb, var(--accent-amber) 55%, transparent); background:color-mix(in srgb, var(--accent-amber) 6%, transparent); font-size:18px;}
.ud-running b{font-weight:400;}
.ud-running .ud-clock{margin-left:auto; min-width:160px; flex:1 1 160px; max-width:260px;}
.ud-running .ud-clock b{font-size:10px; min-width:44px;}
.ud-dot{width:9px; height:9px; border-radius:50%; background:var(--accent-amber); box-shadow:0 0 10px var(--accent-amber); animation:udBlink 1s steps(2) infinite;}
@keyframes udBlink{50%{opacity:.25}}
.ud-hist .ud-chip{border-radius:6px; min-width:26px; text-align:center;}
.ud-hist .ud-chip.up{background:var(--success); color:#000; border-color:var(--success);} .ud-hist .ud-chip.down{background:var(--danger); color:#000; border-color:var(--danger);}
.ud-mtabs{display:flex; gap:14px; border-bottom:1px solid var(--border); padding-bottom:6px;}
:is(#updown,#spread) .ud-mtab{background:none; border:0; padding:0 0 5px; font-family:'Press Start 2P',monospace; font-size:8px; color:var(--text-muted); border-bottom:3px solid transparent;}
:is(#updown,#spread) .ud-mtab.on{color:var(--text-primary); border-bottom-color:var(--accent-gold, #F5C542);}
.ud-dock{border-top:3px solid var(--accent-gold, #F5C542) !important; position:sticky; top:calc(env(safe-area-inset-top, 0px) + 12px);}
.ud-q{display:grid; grid-template-columns:78px minmax(0,1fr); gap:12px; align-items:center;}
.ud-q p{font-family:'Press Start 2P',monospace; font-size:10px; line-height:1.8;}
.ud-q b{font-weight:400;} .ud-qs{color:var(--accent-gold, #F5C542);}
.ud-ring{position:relative; width:78px; height:78px; display:block;}
.ud-ring svg{width:100%; height:100%; transform:rotate(-90deg); display:block;}
.ud-ring circle{fill:none; stroke-width:10;}
.ud-ring .bg{stroke:var(--bg-panel-alt);}
.ud-ring .fg{stroke:var(--accent-amber); stroke-linecap:round; filter:drop-shadow(0 0 5px var(--accent-amber)); transition:stroke-dashoffset .25s linear;}
.ud-ring .fg.late{stroke:var(--danger); filter:drop-shadow(0 0 5px var(--danger));}
.ud-ring b{position:absolute; inset:0; display:grid; place-items:center; font-family:'Press Start 2P',monospace; font-weight:400; font-size:12px; color:var(--accent-amber);}
.ud-ring small{position:absolute; left:0; right:0; bottom:15px; text-align:center; font-family:'Press Start 2P',monospace; font-size:5px; color:var(--text-muted);}
.ud-dock .k{font-family:'Press Start 2P',monospace; font-size:8px; color:var(--text-muted); letter-spacing:1px;}
.ud-dock .ud-amt{border:2px solid var(--border); border-radius:12px; overflow:hidden; background:var(--bg);}
.ud-dock .ud-amt:focus-within{border-color:var(--accent-amber);}
.ud-dock .ud-amt input{border:0 !important; background:transparent !important; font-size:28px !important; padding:6px 12px;}
.ud-dock .ud-amt input:focus-visible{outline:none;}
.ud-dock .ud-sym{padding:0 12px;}
.ud-dock .ud-tokens .ud-seg{border:0 !important; border-left:1px solid var(--border) !important;}
.ud-amthint{font-size:16px; color:var(--text-muted);}
.ud-dock .ud-chips{display:grid; grid-template-columns:repeat(auto-fit, minmax(44px,1fr)); gap:6px;}
:is(#updown,#spread) .ud-dock .ud-chipbtn{border-radius:9px; border-width:2px; padding:5px 0; font-size:20px; box-shadow:0 4px 0 color-mix(in srgb, var(--bg) 70%, #000);}
:is(#updown,#spread) .ud-dock .ud-chipbtn.on{border-color:var(--accent-amber); color:var(--accent-amber);}
:is(#updown,#spread) .ud-dock .ud-chipbtn:active{transform:translateY(3px); box-shadow:0 1px 0 #000;}
.ud-dock .ud-go{gap:10px;}
:is(#updown,#spread) .ud-dock .ud-go button{display:flex; flex-direction:column; align-items:center; gap:6px; border-radius:14px; padding:14px 8px 12px; position:relative; overflow:hidden; letter-spacing:0;}
:is(#updown,#spread) .ud-dock .ud-go .n{font-size:13px;}
:is(#updown,#spread) .ud-dock .ud-go .x{font-family:'Press Start 2P',monospace; font-size:16px;}
:is(#updown,#spread) .ud-dock .ud-go small{font-family:'VT323',monospace; font-size:17px; line-height:1.05; text-align:center;}
:is(#updown,#spread) .ud-dock .ud-go .ud-up{background:linear-gradient(180deg, color-mix(in srgb, var(--success) 55%, #fff), var(--success) 50%); box-shadow:0 6px 0 color-mix(in srgb, var(--success) 50%, #000), 0 0 22px color-mix(in srgb, var(--success) 35%, transparent);}
:is(#updown,#spread) .ud-dock .ud-go .ud-down{background:linear-gradient(180deg, color-mix(in srgb, var(--danger) 55%, #fff), var(--danger) 50%); box-shadow:0 6px 0 color-mix(in srgb, var(--danger) 50%, #000), 0 0 22px color-mix(in srgb, var(--danger) 35%, transparent);}
:is(#updown,#spread) .ud-dock .ud-go button:active:not(:disabled){transform:translateY(5px); box-shadow:0 1px 0 #000;}
:is(#updown,#spread) .ud-dock .ud-go button::before{content:''; position:absolute; top:-60%; left:-40%; width:36%; height:220%; background:linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); transform:rotate(20deg); animation:udShine 3.4s ease-in-out infinite;}
:is(#updown,#spread) .ud-dock .ud-go .ud-down::before{animation-delay:1.7s;}
@keyframes udShine{0%,60%{left:-40%}100%{left:130%}}
.ud-tug{display:flex; flex-direction:column; gap:4px;}
.ud-tugbar{height:18px; border-radius:9px; overflow:hidden; display:flex; background:var(--danger); border:2px solid var(--border);}
.ud-tugbar .u{display:block; width:50%; background:var(--success); box-shadow:0 0 12px var(--success); transition:width .6s cubic-bezier(.2,.9,.3,1.2);}
.ud-tug.empty .ud-tugbar{background:var(--bg-panel-alt);} .ud-tug.empty .ud-tugbar .u{width:0 !important; box-shadow:none;}
.ud-tugl{display:flex; justify-content:space-between; gap:8px; font-size:17px;}
.ud-prtag{align-self:flex-start;}
:root.no-motion .ud-mk.hot .ud-mkgo, :root.no-motion .ud-dot, :root.no-motion :is(#updown,#spread) .ud-dock .ud-go button::before{animation:none;}
@media (prefers-reduced-motion:reduce){ .ud-mk.hot .ud-mkgo, .ud-dot, :is(#updown,#spread) .ud-dock .ud-go button::before{animation:none;} .ud-tugbar .u, .ud-ring .fg{transition:none;} }
@media (max-width:1000px){ .ud-c{grid-template-columns:220px minmax(0,1fr); grid-template-areas:"list live" "list dock" "list mine"; grid-template-rows:auto;} .ud-dock{position:static;} }
@media (max-width:760px){
  .ud-c{grid-template-columns:1fr; grid-template-areas:"list" "live" "dock" "mine";}
  .ud-c[data-phone=list] .ud-live, .ud-c[data-phone=list] .ud-dock, .ud-c[data-phone=list] .ud-minep{display:none;}
  .ud-c[data-phone=market] .ud-list{display:none;}
  .ud-backm{display:inline-flex;}
  .ud-dock{border-radius:22px 22px 14px 14px !important;}
  #udChart{height:180px;}
  .ud-live .ud-price{font-size:26px;}
}
/* coin badges with logos (coinlogo.js): the letter shows until the logo loads */
.ud-coinb{position:relative; overflow:hidden; flex-shrink:0;}
.ud-coinb img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; transition:opacity .2s;}
.ud-coinb.has-logo{background:color-mix(in srgb, var(--cc) 18%, var(--bg-panel)); color:transparent; box-shadow:0 0 10px color-mix(in srgb, var(--cc) 40%, transparent);}
.ud-coinb.has-logo img{opacity:1;}
.ud-small{border:2px solid var(--accent-amber,#f5c542); color:var(--ink,#fbeae6); background:rgba(245,197,66,.08); padding:8px 10px; border-radius:6px; margin:8px 0;}
.ud-small b{color:var(--accent-amber,#f5c542); font-weight:normal;}
.ud-small[hidden]{display:none;}

/* an open call's Add and Cancel (fifth version): two small buttons where the state would be */
.ud-open{display:inline-flex; gap:6px; justify-self:end;}
:is(#updown,#spread) .ud-open .ud-claim{padding:4px 8px; font-size:12px;}
:is(#updown,#spread) .ud-open .ud-cxl{background:var(--bg-panel-alt); color:var(--text-muted); border-color:var(--border);}

/* the slip after a call: change your mind here (add on the same side, or cancel) until calls close */
:is(#updown,#spread) .ud-adjust{margin-top:10px; display:flex; flex-direction:column; gap:8px; color:var(--text-primary);}
:is(#updown,#spread) .ud-adjust .ud-open .ud-claim{padding:6px 12px; font-size:15px;}
:is(#updown,#spread) .ud-adjust .ud-open{justify-content:flex-start;}