/* The Trade app (ui/trade-ui.js: a dark exchange) and the Casino app (ui/casino-ui.js), inside the phone. */
#phone .view:has(.tr), #phone .view:has(.cz) { background: #0b0e11; color: #eaecef; }
#phone .view:has(.tr) .vh strong, #phone .view:has(.cz) .vh strong, #phone .view:has(.tr) .sb, #phone .view:has(.cz) .sb { color: #eaecef; }
#phone .view:has(.tr) .vh button, #phone .view:has(.cz) .vh button { color: #f0b90b; }
.tr, .cz { --up: #0ecb81; --down: #f6465d; --gold: #f0b90b; --mute: #848e9c; --line: #1e2329; --card: #161a1e; font-family: var(--ui); }
.tr .up { color: var(--up); } .tr .down { color: var(--down); } .tr .mute { color: var(--mute); }
.tr button { font-family: var(--ui); cursor: pointer; }
.tr-card { background: var(--card); border-radius: 16px; padding: 14px; margin-bottom: 12px; }
.tr-port span { color: var(--mute); font: 600 12px var(--ui); } .tr-port b { display: block; font: 800 26px var(--ui); margin: 4px 0 2px; letter-spacing: -.5px; }
.tr-port small { font: 700 12px var(--ui); }
.tr-h { display: flex; justify-content: space-between; color: var(--mute); font: 700 11px var(--ui); text-transform: uppercase; letter-spacing: .06em; margin: 14px 2px 8px; }
.tr-row { display: grid; grid-template-columns: 34px 1fr 64px auto; align-items: center; gap: 10px; width: 100%; padding: 10px 6px; border: 0; border-bottom: 1px solid var(--line); background: none; color: inherit; text-align: left; }
.tr-ic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 800 16px var(--ui); color: #0b0e11; }
.tr-row strong { font: 800 15px var(--ui); display: block; } .tr-row em { font: 600 11.5px var(--ui); color: var(--mute); font-style: normal; }
.tr-row canvas { width: 64px; height: 28px; display: block; }
.tr-px { text-align: right; } .tr-px b { display: block; font: 700 14px var(--ui); }
.tr-chg { display: inline-block; min-width: 64px; text-align: center; border-radius: 6px; padding: 4px 6px; font: 800 12px var(--ui); color: #fff; margin-top: 3px; }
.tr-chg.up { background: var(--up); color: #fff; } .tr-chg.down { background: var(--down); color: #fff; }
.tr-top { display: flex; align-items: center; gap: 10px; margin: 2px 0 6px; } .tr-top strong { font: 800 17px var(--ui); } .tr-top em { color: var(--mute); font: 600 12px var(--ui); font-style: normal; }
.tr-big { font: 800 30px var(--ui); letter-spacing: -.5px; transition: color .25s; }
.tr-big.flash-up { color: var(--up); } .tr-big.flash-down { color: var(--down); }
.tr-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 8px 0 10px; } .tr-stats div { font: 600 10.5px var(--ui); color: var(--mute); } .tr-stats b { display: block; color: #eaecef; font: 700 12px var(--ui); }
.tr-tfs { display: flex; gap: 4px; margin-bottom: 6px; } .tr-tfs button { flex: 1; border: 0; background: none; color: var(--mute); font: 700 12px var(--ui); padding: 6px 0; border-radius: 6px; }
.tr-tfs button.on { background: var(--line); color: #eaecef; }
.tr-chart { position: relative; margin: 0 -16px; } .tr-chart canvas { width: 100%; height: 250px; display: block; touch-action: pan-y; }
.tr-tip { position: absolute; top: 4px; left: 8px; font: 700 10.5px var(--ui); color: var(--mute); pointer-events: none; }
.tr-pos { display: flex; justify-content: space-between; align-items: center; } .tr-pos span { font: 600 12px var(--ui); color: var(--mute); } .tr-pos b { font: 800 15px var(--ui); display: block; }
.tr-book { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tr-book table, .tr-tape { width: 100%; border-collapse: collapse; font: 600 11px var(--ui); }
.tr-book td, .tr-tape td { padding: 2.5px 0; position: relative; } .tr-book td:last-child, .tr-tape td:last-child { text-align: right; color: #c7cbd1; }
.tr-book .bar { position: absolute; top: 1px; bottom: 1px; right: 0; opacity: .14; border-radius: 2px; }
.tr-mid { text-align: center; font: 800 15px var(--ui); margin: 6px 0; }
.tr-act { position: sticky; bottom: -16px; display: flex; gap: 10px; padding: 12px 0 16px; background: linear-gradient(transparent, #0b0e11 30%); }
.tr-act button { flex: 1; border: 0; border-radius: 12px; padding: 14px 0; font: 800 16px var(--ui); color: #fff; }
.tr-buy { background: var(--up) !important; } .tr-sell { background: var(--down) !important; }
.tr-sheet { background: var(--card); border-radius: 18px; padding: 14px; margin-bottom: 12px; border: 1px solid #2b3139; }
.tr-side { display: flex; background: #0b0e11; border-radius: 10px; padding: 3px; margin-bottom: 12px; }
.tr-side button { flex: 1; border: 0; background: none; color: var(--mute); padding: 9px 0; border-radius: 8px; font: 800 14px var(--ui); }
.tr-side button.on.b { background: var(--up); color: #fff; } .tr-side button.on.s { background: var(--down); color: #fff; }
.tr-in { display: flex; align-items: center; background: #0b0e11; border: 1px solid #2b3139; border-radius: 10px; padding: 0 12px; }
.tr-in input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: #eaecef; font: 800 20px var(--ui); padding: 12px 0; } .tr-in span { color: var(--mute); font: 700 13px var(--ui); }
.tr-chips { display: flex; gap: 6px; margin: 10px 0; } .tr-chips button { flex: 1; border: 1px solid #2b3139; background: none; color: #eaecef; border-radius: 8px; padding: 7px 0; font: 700 12px var(--ui); }
.tr-est { display: flex; justify-content: space-between; color: var(--mute); font: 600 12px var(--ui); margin: 4px 2px; } .tr-est b { color: #eaecef; }
.tr-go { width: 100%; border: 0; border-radius: 12px; padding: 14px 0; font: 800 16px var(--ui); color: #fff; margin-top: 10px; }
.tr-go:disabled { opacity: .5; }
.tr-trade { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); font: 600 12px var(--ui); }
.tr-trade b { font: 800 12px var(--ui); } .tr-trade span { color: var(--mute); }
.tr-empty { color: var(--mute); text-align: center; font: 600 13px var(--ui); padding: 18px 0; }

/* ---------- the casino ---------- */
.cz { background: radial-gradient(120% 60% at 50% 0%, #1a3a2a 0%, #0b0e11 70%); }
.cz button { font-family: var(--ui); cursor: pointer; }
.cz-bal { text-align: center; margin: 4px 0 12px; } .cz-bal span { color: var(--mute); font: 700 11px var(--ui); text-transform: uppercase; letter-spacing: .08em; } .cz-bal b { display: block; font: 800 24px var(--ui); color: var(--gold); }
.cz-game { width: 100%; border: 0; border-radius: 20px; padding: 18px; margin-bottom: 12px; display: flex; align-items: center; gap: 14px; color: #fff; text-align: left; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.cz-game i { font-size: 44px; font-style: normal; } .cz-game strong { font: 800 19px var(--ui); display: block; } .cz-game span { font: 600 12px var(--ui); opacity: .85; }
.cz-game.rl { background: linear-gradient(135deg, #7b1020, #2a0a10); } .cz-game.sl { background: linear-gradient(135deg, #6b4a00, #241800); }
.cz-h { color: var(--mute); font: 700 11px var(--ui); text-transform: uppercase; letter-spacing: .06em; margin: 14px 2px 8px; }
.cz-round { display: flex; justify-content: space-between; padding: 8px 2px; border-bottom: 1px solid var(--line); font: 600 12px var(--ui); } .cz-round b.w { color: var(--up); } .cz-round b.l { color: var(--mute); }
.cz-wheel { position: relative; width: 250px; height: 250px; margin: 0 auto 8px; } .cz-wheel canvas { width: 250px; height: 250px; display: block; }
.cz-msg { text-align: center; min-height: 26px; font: 800 17px var(--ui); margin-bottom: 8px; } .cz-msg.win { color: var(--gold); animation: czpop .5s ease-out; } .cz-msg.lose { color: var(--mute); }
@keyframes czpop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } }
.cz-chips { display: flex; gap: 5px; overflow-x: auto; padding: 4px 0 8px; scrollbar-width: none; } .cz-chips::-webkit-scrollbar { display: none; }
.cz-chip { flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; border: 3px dashed rgba(255,255,255,.75); color: #fff; font: 800 10.5px var(--ui); box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.cz-chip.on { outline: 3px solid var(--gold); outline-offset: 2px; }
.cz-board { display: grid; grid-template-columns: 26px repeat(12, 1fr); gap: 2px; margin-bottom: 4px; }
.cz-cell { position: relative; border: 0; border-radius: 4px; color: #fff; font: 800 10.5px var(--ui); padding: 7px 0; min-width: 0; }
.cz-cell.r { background: #c0262d; } .cz-cell.k { background: #1c1f24; } .cz-cell.g { background: #0d8a3f; grid-row: span 3; }
.cz-cell.hit { box-shadow: 0 0 0 2px var(--gold), 0 0 12px var(--gold); }
.cz-out { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin-bottom: 3px; } .cz-out.six { grid-template-columns: repeat(6, 1fr); }
.cz-out .cz-cell { background: #10331f; border: 1px solid #1f5a37; padding: 8px 0; }
.cz-out .cz-cell.r { background: #c0262d; } .cz-out .cz-cell.k { background: #1c1f24; }
.cz-cell u { position: absolute; top: -6px; right: -4px; background: var(--gold); color: #111; border-radius: 999px; font: 800 8.5px var(--ui); padding: 1px 4px; text-decoration: none; z-index: 1; }
.cz-bar { display: flex; gap: 8px; align-items: center; margin-top: 10px; } .cz-bar span { flex: 1; color: var(--mute); font: 700 12px var(--ui); } .cz-bar span b { color: #eaecef; }
.cz-bar button { border: 0; border-radius: 12px; padding: 12px 16px; font: 800 14px var(--ui); color: #fff; background: #2b3139; }
.cz-bar .spin { background: linear-gradient(135deg, #f0b90b, #c98a00); color: #111; padding: 12px 26px; }
.cz-bar button:disabled { opacity: .45; }
.cz-slot { background: linear-gradient(#3a2600, #120c00); border: 3px solid #d4a017; border-radius: 22px; padding: 14px 12px; box-shadow: inset 0 0 30px rgba(0,0,0,.7), 0 0 24px rgba(240,185,11,.25); margin-bottom: 10px; }
.cz-reels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; position: relative; }
.cz-reels::after { content: ''; position: absolute; left: -4px; right: -4px; top: 50%; height: 2px; background: rgba(240,185,11,.55); transform: translateY(-1px); pointer-events: none; }
.cz-reel { height: 198px; overflow: hidden; background: linear-gradient(#fdf6e3, #fff 30%, #fff 70%, #e9dfc4); border-radius: 12px; position: relative; box-shadow: inset 0 10px 14px rgba(0,0,0,.35), inset 0 -10px 14px rgba(0,0,0,.35); }
.cz-strip { position: absolute; left: 0; right: 0; top: 0; will-change: transform; }
.cz-strip div { height: 66px; display: grid; place-items: center; font-size: 40px; }
.cz-reel.win { box-shadow: inset 0 0 0 3px var(--gold), 0 0 18px var(--gold); }
.cz-lever { width: 100%; border: 0; border-radius: 16px; padding: 16px 0; font: 900 20px var(--ui); color: #111; background: linear-gradient(135deg, #ffd54a, #e0a000); box-shadow: 0 6px 0 #8a6200; margin-top: 10px; }
.cz-lever:active { transform: translateY(4px); box-shadow: 0 2px 0 #8a6200; } .cz-lever:disabled { opacity: .55; }
.cz-pay { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 12px; font: 600 12px var(--ui); color: #c7cbd1; } .cz-pay b { color: var(--gold); }
.cz-burst { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 5; }
.cz-burst i { position: absolute; top: 40%; left: 50%; font-size: 22px; font-style: normal; animation: czfly 1.4s ease-out forwards; }
@keyframes czfly { 0% { transform: translate(-50%, 0) scale(.4); opacity: 1; } 100% { transform: translate(calc(-50% + var(--dx)), var(--dy)) rotate(var(--r)) scale(1); opacity: 0; } }