#games-hub #crypto-panel { display:grid; grid-template-columns:minmax(0,1fr); align-content:start; gap:24px; padding:28px!important; min-width:0; }
#games-hub #crypto-panel[hidden] { display:none!important; }
#crypto-panel * { box-sizing:border-box; }
#crypto-panel .crypto-sr-only { position:absolute!important; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
#crypto-panel .crypto-board { min-width:0; }
#crypto-panel .crypto-market-heading { display:grid; grid-template-columns:48px minmax(0,1fr) 76px; align-items:center; gap:14px; min-width:0; }
#crypto-panel .crypto-coin { display:grid; place-items:center; width:48px; height:48px; border:1px solid #a5b7ff80; border-radius:50%; background:linear-gradient(145deg,#496aff,#2142fe 60%,#1730bb); box-shadow:inset 0 0 0 3px #ffffff12,0 4px 14px #2142fe30; }
#crypto-panel .crypto-coin img { display:block; width:36px; height:36px; object-fit:contain; }
#crypto-panel .crypto-identity { display:grid; gap:8px; min-width:0; }
#crypto-panel #crypto-title { color:var(--muted); font:650 16px/1.25 var(--body); letter-spacing:-.25px; }
#crypto-panel .crypto-price-line { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; min-width:0; }
#crypto-panel #crypto-price { color:var(--ink); font:700 clamp(32px,5.2cqi,44px)/1 var(--body); letter-spacing:-1.6px; font-variant-numeric:tabular-nums; }
#crypto-panel .crypto-change { padding:5px 8px; border-radius:7px; background:var(--surface); color:var(--muted); font:650 11px/1.1 var(--body); font-variant-numeric:tabular-nums; white-space:nowrap; }
#crypto-panel .crypto-change[data-trend=up] { color:#76e7bd; background:#3fd49c16; }
#crypto-panel .crypto-change[data-trend=down] { color:#ff9db4; background:#f3759416; }
#crypto-panel .crypto-countdown { position:relative; display:grid; place-items:center; width:76px; height:76px; color:var(--ink); }
#crypto-panel .crypto-time-ring { position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); fill:none; stroke-width:4; }
#crypto-panel .crypto-time-track { stroke:var(--line); }
#crypto-panel .crypto-time-progress { stroke:#7489ff; stroke-linecap:round; transition:stroke-dashoffset .1s linear,stroke .15s; }
#crypto-panel #crypto-time { font:650 19px/1 var(--body); letter-spacing:-.65px; font-variant-numeric:tabular-nums; }
#crypto-panel .crypto-countdown[data-urgent=true] { color:#ffb8a4; }
#crypto-panel .crypto-countdown[data-urgent=true] .crypto-time-progress { stroke:#ff9e7f; }
#crypto-panel .crypto-chart-wrap { margin-top:24px; min-width:0; }
#crypto-panel .crypto-chart { display:block; width:100%; height:clamp(210px,32cqi,300px); overflow:visible; }
#crypto-panel .crypto-grid { stroke:var(--line); stroke-opacity:.36; fill:none; stroke-width:1; }
#crypto-panel .crypto-axis { fill:var(--muted); font:10px var(--body); font-variant-numeric:tabular-nums; }
#crypto-panel .crypto-entry-line { stroke:var(--muted); stroke-width:1.5; stroke-dasharray:1 6; stroke-linecap:round; opacity:.85; }
#crypto-panel .crypto-deadline-line { stroke:var(--line); stroke-width:1; stroke-dasharray:3 5; }
#crypto-panel .crypto-area { fill:url(#crypto-fill); }
#crypto-panel .crypto-path { fill:none; stroke:#6ce9bc; stroke-width:2.5; stroke-linecap:butt; stroke-linejoin:miter; stroke-miterlimit:3; }
#crypto-panel .crypto-dot { fill:#8dffd3; stroke:#173e33; stroke-width:1; }
#crypto-panel .crypto-dot-glow { fill:#6ce9bc; opacity:.13; }
#crypto-panel .crypto-board[data-phase=placing] .crypto-dot-glow { animation:crypto-entry-pulse .7s ease-out infinite; transform-box:fill-box; transform-origin:center; }
#crypto-panel .crypto-board[data-phase=running] .crypto-dot-glow { animation:crypto-price-breathe 1.6s ease-in-out infinite; }
#crypto-panel .crypto-board:is([data-outcome=lose],[data-delta=down]) .crypto-path { stroke:#dc899e; }
#crypto-panel .crypto-board:is([data-outcome=lose],[data-delta=down]) .crypto-dot { fill:#efb0bf; }
#crypto-panel .crypto-board[data-delta=up] .crypto-path { stroke:#6ce9bc; }
#crypto-panel .crypto-board[data-delta=up] .crypto-dot { fill:#8dffd3; stroke:#173e33; }
#crypto-panel .crypto-receipt { display:flex; align-items:center; width:fit-content; gap:8px; margin-top:16px; padding:8px 12px; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--ink); font:650 16px/1.3 var(--body); font-variant-numeric:tabular-nums; }
#crypto-panel .crypto-receipt[hidden] { display:none; }
#crypto-panel .crypto-board:is([data-outcome=win],[data-delta=up]) .crypto-receipt { color:#7be7bd; background:#3fd49c12; border-color:#3fd49c30; }
#crypto-panel .crypto-board:is([data-outcome=lose],[data-delta=down]) .crypto-receipt { color:#ffacbf; background:#f3759412; border-color:#f3759430; }
#crypto-panel .crypto-controls { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); align-items:end; gap:16px; min-width:0; padding-top:20px; border-top:1px solid var(--line); }
#crypto-panel .crypto-wager-label { display:grid; gap:8px; color:var(--muted); font:500 11px/1.5 var(--body); }
#crypto-panel .crypto-wager-field { display:flex; align-items:center; gap:8px; min-width:0; border:1px solid var(--line); border-radius:12px; background:var(--theme-field,var(--paper)); padding-inline-end:14px; }
#crypto-panel .crypto-wager-field>span { flex:none; color:var(--muted); font-size:11px; font-weight:600; }
#crypto-panel .crypto-wager-field:focus-within { border-color:var(--accent); }
#crypto-panel .crypto-wager-field input { width:100%; min-width:0; min-height:56px; border:0; border-radius:12px; outline:none; padding:12px 14px; background:transparent; color:var(--ink); font:650 18px/1.4 var(--body); font-variant-numeric:tabular-nums; }
#crypto-panel .crypto-wager-field:has(input[aria-invalid=true]) { border-color:var(--theme-error-ink,var(--danger)); }
#crypto-panel button:disabled { cursor:not-allowed; opacity:.5; }
#crypto-panel :is(button,.crypto-help summary):focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
#crypto-panel .crypto-status { grid-column:1/-1; margin:0; color:var(--muted); font:400 12px/1.6 var(--body); }
#crypto-panel .crypto-status[hidden] { display:none; }
#crypto-panel .crypto-status.is-error { color:var(--theme-error-ink,var(--danger)); }
#crypto-panel .crypto-help { grid-column:1/-1; color:var(--muted); }
#crypto-panel .crypto-help summary { display:flex; align-items:center; gap:8px; min-height:36px; list-style:none; cursor:pointer; font:500 11px/1.5 var(--body); }
#crypto-panel .crypto-help summary::-webkit-details-marker { display:none; }
#crypto-panel .crypto-help summary>span:first-child { display:grid; place-items:center; width:17px; height:17px; border:1px solid var(--line); border-radius:50%; font-size:10px; }
#crypto-panel .crypto-help p { margin:5px 0 0; font:400 12px/1.7 var(--body); }
#crypto-panel .crypto-directions { min-width:0; margin:0; padding:0; border:0; }
#crypto-panel .crypto-direction-options { display:grid; grid-template-columns:1fr 1fr; gap:8px; min-width:0; }
#crypto-panel .crypto-up { --direction-color:#5ee6b5; --direction-selected:#11755a; }
#crypto-panel .crypto-down { --direction-color:#ff91ad; --direction-selected:#9f314f; }
#crypto-panel .crypto-direction { display:grid; grid-template-columns:26px minmax(0,1fr) 14px; align-items:center; gap:6px; min-width:0; min-height:58px; padding:10px; border:1px solid color-mix(in srgb,var(--direction-color) 60%,var(--line)); border-radius:12px; background:color-mix(in srgb,var(--direction-color) 13%,var(--theme-field,var(--paper))); color:var(--ink); font-family:var(--body); cursor:pointer; transition:background-color .12s,border-color .12s,transform .12s; }
#crypto-panel .crypto-direction-icon { display:grid; place-items:center; width:26px; height:30px; border-radius:7px; background:color-mix(in srgb,var(--direction-color) 14%,transparent); color:var(--direction-color); }
#crypto-panel .crypto-direction-icon svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:2.3; stroke-linecap:round; stroke-linejoin:round; }
#crypto-panel .crypto-direction strong { font-size:13px; font-weight:750; line-height:1.4; letter-spacing:.025em; text-align:start; }
#crypto-panel .crypto-direction-check { display:grid; place-items:center; width:14px; height:14px; border:1px solid color-mix(in srgb,var(--direction-color) 60%,transparent); border-radius:50%; }
#crypto-panel .crypto-direction-check svg { width:11px; height:11px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; opacity:0; }
#crypto-panel .crypto-direction[data-selected=true] { border-color:var(--direction-color); background:var(--direction-selected); color:#fff; box-shadow:inset 0 0 0 1px var(--direction-color); }
#crypto-panel .crypto-direction[data-selected=true] .crypto-direction-icon { background:#ffffff18; color:#fff; }
#crypto-panel .crypto-direction[data-selected=true] .crypto-direction-check { border-color:#fff; background:#fff; color:var(--direction-selected); }
#crypto-panel .crypto-direction[data-selected=true] .crypto-direction-check svg { opacity:1; }
#crypto-panel .crypto-direction:hover:not(:disabled) { border-color:var(--direction-color); }
#crypto-panel .crypto-direction:active:not(:disabled) { transform:translateY(1px); }
#crypto-panel .crypto-direction:disabled { opacity:.65; }
#crypto-panel .crypto-direction[data-selected=true]:disabled { opacity:.85; }
#crypto-panel .crypto-retry { grid-column:1/-1; min-height:44px; border:1px solid var(--line); border-radius:10px; background:var(--theme-field,var(--paper)); color:var(--ink); font:600 13px/1.5 var(--body); padding:10px 16px; cursor:pointer; }
#crypto-panel .crypto-retry[hidden] { display:none!important; }
@keyframes crypto-entry-pulse { from { opacity:.3; transform:scale(.8); } to { opacity:0; transform:scale(2); } }
@keyframes crypto-price-breathe { 50% { opacity:.24; } }
@container ncb-games (max-width:560px) {
 #games-hub #crypto-panel { padding:20px!important; gap:20px; }
 #crypto-panel .crypto-market-heading { grid-template-columns:42px minmax(0,1fr) 68px; gap:10px; }
 #crypto-panel .crypto-coin { width:42px; height:42px; }
 #crypto-panel .crypto-coin img { width:31px; height:31px; }
 #crypto-panel #crypto-title { font-size:14px; }
 #crypto-panel #crypto-price { font-size:32px; letter-spacing:-1.1px; }
 #crypto-panel .crypto-price-line { gap:6px; }
 #crypto-panel .crypto-change { padding:4px 6px; font-size:10px; }
 #crypto-panel .crypto-countdown { width:68px; height:68px; }
 #crypto-panel #crypto-time { font-size:17px; }
 #crypto-panel .crypto-controls { grid-template-columns:minmax(0,1fr); gap:14px; }
 #crypto-panel .crypto-direction { min-height:56px; grid-template-columns:30px minmax(0,1fr) 16px; padding:11px; }
 #crypto-panel .crypto-direction strong { font-size:15px; }
 #crypto-panel .crypto-axis { font-size:9px; }
}
@media(prefers-reduced-motion:reduce) { #crypto-panel .crypto-dot-glow { animation:none!important; } #crypto-panel :is(.crypto-direction,.crypto-time-progress) { transition:none; } }
:root[data-theme=light] #crypto-panel :is(.crypto-change[data-trend=up],.crypto-board:is([data-outcome=win],[data-delta=up]) .crypto-receipt) { color:var(--theme-success-ink,#166534); }
:root[data-theme=light] #crypto-panel :is(.crypto-change[data-trend=down],.crypto-board:is([data-outcome=lose],[data-delta=down]) .crypto-receipt,.crypto-countdown[data-urgent=true]) { color:var(--theme-error-ink,#9f1239); }

#crypto-panel .crypto-change[hidden] { display:none; }
#crypto-panel .crypto-receipt[data-estimated=true] { border-style:dashed; }
#crypto-panel .crypto-board[data-delta=down] .crypto-dot-glow { fill:#ef8ca6; }
#crypto-panel .crypto-board[data-delta=down] #crypto-fill stop { stop-color:#ef8ca6; }
#crypto-panel .crypto-board[data-delta=up] .crypto-dot-glow { fill:#6ce9bc; }
#crypto-panel .crypto-board[data-delta=up] #crypto-fill stop { stop-color:#6ce9bc; }

/* Active positions follow bet P/L; the idle market follows its latest move. */
#crypto-panel .crypto-board[data-chart-trend=up] .crypto-path { stroke:#6ce9bc; }
#crypto-panel .crypto-board[data-chart-trend=up] .crypto-dot { fill:#8dffd3; stroke:#173e33; }
#crypto-panel .crypto-board[data-chart-trend=up] .crypto-dot-glow { fill:#6ce9bc; }
#crypto-panel .crypto-board[data-chart-trend=up] #crypto-fill stop { stop-color:#6ce9bc; }
#crypto-panel .crypto-board[data-chart-trend=down] .crypto-path { stroke:#dc899e; }
#crypto-panel .crypto-board[data-chart-trend=down] .crypto-dot { fill:#efb0bf; stroke:#5e2839; }
#crypto-panel .crypto-board[data-chart-trend=down] .crypto-dot-glow { fill:#ef8ca6; }
#crypto-panel .crypto-board[data-chart-trend=down] #crypto-fill stop { stop-color:#ef8ca6; }
#crypto-panel .crypto-board[data-chart-trend=flat] .crypto-path { stroke:#9aa7d0; }
#crypto-panel .crypto-board[data-chart-trend=flat] .crypto-dot { fill:#bac6e8; stroke:#354366; }
#crypto-panel .crypto-board[data-chart-trend=flat] .crypto-dot-glow { fill:#9aa7d0; }
#crypto-panel .crypto-board[data-chart-trend=flat] #crypto-fill stop { stop-color:#9aa7d0; }

/* The slider edits the existing whole-cent stake; direction buttons still place the bet. */
#crypto-panel .crypto-wager-control { display:grid; gap:8px; min-width:0; }
#crypto-panel .crypto-wager-slider { display:block; width:100%; min-width:0; height:44px; min-height:44px; margin:0; padding:0; border:0; border-radius:8px; background:transparent; appearance:none; -webkit-appearance:none; direction:ltr; cursor:pointer; }
#crypto-panel .crypto-wager-slider:disabled { opacity:.45; cursor:default; }
#crypto-panel .crypto-wager-slider:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }