/* Fast tape (/trading/fast/): reuses ../trading.css; this file only adds the game layout */
html,body.ft-body{height:100%;overflow:hidden;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#fbg{position:fixed;inset:0;z-index:0;background:#04060a url(../art/tape-m.webp?v=20261020ft1) center/cover no-repeat;opacity:.85;transition:opacity .6s}
@media (min-aspect-ratio:1/1){#fbg{background-image:url(../art/tape.webp?v=20261020ft1)}}
#fshade{position:fixed;inset:0;z-index:1;background:linear-gradient(rgba(3,4,7,.25),rgba(3,4,7,.55) 50%,rgba(3,4,7,.92))}
body[data-mode="live"] #fbg{opacity:.1}
.ft-body #hud{z-index:8}
.htitle{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:#8d8a82}
#ft{position:fixed;z-index:5;inset:0;display:flex;flex-direction:column;max-width:640px;margin:0 auto;padding:calc(44px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) calc(30px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left))}
#ft *{touch-action:manipulation}
#ft h2:focus{outline:none}
/* start */
#ft.start .intro{margin-top:auto;padding:0 6px 18px;animation:rise .6s cubic-bezier(.2,.7,.2,1) both}
#ft.start h2{font-size:clamp(48px,14vw,76px)}
.bestl{font-size:13px;color:#b8b2a5;margin:12px 0 0}.bestl b{font-weight:600}
/* live */
.ftbar{display:flex;align-items:baseline;justify-content:space-between;padding:4px 4px 0}
.tm{font:700 34px/1 var(--sans);font-variant-numeric:tabular-nums;color:#f4efe5;letter-spacing:.01em}
.tm.late{color:var(--amber)}
.rt{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#9a978e}
.rt b{display:inline-block;margin-left:6px;font:700 22px/1 var(--sans);letter-spacing:0;text-transform:none;font-variant-numeric:tabular-nums}
.px{display:flex;align-items:baseline;gap:10px;padding:10px 4px 0}
.px b{font:700 clamp(40px,12vw,58px)/1 var(--sans);font-variant-numeric:tabular-nums;color:#fff;letter-spacing:-.01em}
.px small{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#8d8a82}
.ftpl{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;min-height:46px;padding:6px 4px 4px;font-variant-numeric:tabular-nums}
.ftpl .ftbig{font:800 clamp(34px,10vw,46px)/1 var(--sans)}
.ftpl .pp{font:600 18px/1 var(--sans)}
.ftpl small{flex-basis:100%;font-size:12px;color:#9a978e;margin-top:2px}
.ftpl .flat{font:500 17px/1.6 var(--sans);color:#8d8a82}
.pos{color:var(--g)}.neg{color:var(--r)}.flat{color:#cfc8b8}
.ftpl .pos,.ftpl .neg{text-shadow:none}
.cw{position:relative;flex:1 1 auto;min-height:200px;margin:4px -6px 0;border-radius:14px;background:rgba(6,9,13,.82);border:1px solid rgba(236,232,222,.08);overflow:hidden}
#cv{position:absolute;inset:0;width:100%;height:100%;display:block}
#toast{position:absolute;left:50%;top:12px;transform:translate(-50%,-6px);padding:6px 14px;border-radius:999px;background:rgba(10,12,16,.88);border:1px solid rgba(236,232,222,.2);font:600 14px var(--sans);color:#f4efe5;max-width:calc(100% - 20px);text-align:center;line-height:1.3;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
#toast.on{opacity:1;transform:translate(-50%,0)}#toast.pos{color:var(--g)}#toast.neg{color:var(--r)}
.act{padding:10px 0 6px}
/* side picker: two small segmented toggles, chosen before each entry, locked while a spread is open */
.pick{display:flex;justify-content:center;gap:10px;margin:0 0 9px}
.seg{display:flex;border:1px solid rgba(236,232,222,.22);border-radius:999px;overflow:hidden;background:rgba(8,10,14,.7)}
.seg button{appearance:none;border:0;background:transparent;color:#bdb7aa;font:600 15px var(--sans);letter-spacing:.03em;min-width:78px;min-height:42px;padding:0 14px;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background .15s,color .15s}
.seg button+button{border-left:1px solid rgba(236,232,222,.14)}
.seg button[aria-pressed="true"]{background:rgba(30,90,60,.75);color:#fff}
.seg button:focus-visible{outline:2px solid var(--g);outline-offset:-2px}
.pick.lock{opacity:.45}.pick.lock button{cursor:default}
.trade{appearance:none;display:block;width:100%;height:clamp(76px,11vh,96px);border-radius:24px;border:0;font:800 34px/1 var(--sans);letter-spacing:.04em;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform .08s,background .15s}
.trade.buy{background:#2fbf74;color:#03140b;box-shadow:0 0 28px rgba(79,209,139,.35)}
.trade.sell{background:#ff5f57;color:#1d0403;box-shadow:0 0 28px rgba(255,95,87,.35)}
.trade:active{transform:scale(.98)}
.trade:focus-visible{outline:3px solid #fff;outline-offset:3px}
/* end */
#ft.end{overflow-y:auto;-webkit-overflow-scrolling:touch;-webkit-user-select:text;user-select:text}
.endv{margin:auto 0 0;padding:0 6px 12px;animation:rise .5s cubic-bezier(.2,.7,.2,1) both}
.endv h2{font-size:clamp(30px,8.6vw,44px);margin-top:2px}
.dayl{font:italic 18px/1.3 var(--serif);color:#cfc6b4;margin:4px 0 8px}
.tot{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;font-variant-numeric:tabular-nums}
.tot b{font:800 clamp(46px,14vw,64px)/1 var(--sans)}
.tot>span{font:600 18px var(--sans)}.tot>small{flex-basis:100%;display:block}
.note2{font-size:14px;color:#b8b2a5;margin:6px 0 10px}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0}
.st{padding:9px 12px;border-radius:12px;background:rgba(8,10,14,.7);border:1px solid rgba(236,232,222,.12)}
.st small{display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#8d8a82}
.st b{display:block;margin-top:2px;font:700 20px/1.2 var(--sans);font-variant-numeric:tabular-nums;color:#f0ebe0}
.st b.pos{color:var(--g)}.st b.neg{color:var(--r)}
#mini{display:block;width:100%;height:130px;margin:8px 0 2px;border-radius:12px;background:rgba(6,9,13,.8);border:1px solid rgba(236,232,222,.08)}
.leg{font-size:12px;color:#9a978e;margin:2px 0 12px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.leg i{display:inline-block;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent}
.leg .lb{border-bottom:9px solid var(--g)}.leg .ls{border-top:9px solid var(--amber);margin-left:8px}
@media (max-height:700px){.tm{font-size:28px}.px b{font-size:38px}.ftpl .ftbig{font-size:32px}.cw{min-height:150px}}
@media (prefers-reduced-motion:reduce){.endv,#ft.start .intro{animation:none}}
/* centered start and end screens */
#ft.start .intro,.endv{text-align:center}
#ft .row,#ft .lnks,.tot,.leg{justify-content:center}
#ft .btn.xl{margin-left:auto;margin-right:auto}
/* centered in-game readouts and end stats; the chart and the top bar keep their layout */
.px,.ftpl{justify-content:center;text-align:center}
.stats,.st{text-align:center}
.m{white-space:nowrap}
/* end: per-trade labels and the quality read */
.read{margin:8px 0;padding:10px 12px;border-radius:12px;background:rgba(8,10,14,.7);border:1px solid rgba(236,232,222,.12);text-align:center}
.read small{display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#8d8a82;margin-bottom:4px}
.read p{margin:3px 0;font-size:14px;color:#ddd7ca}
.tlist{list-style:none;padding:0;margin:8px 0;font-size:14px;color:#cfc8b8;text-align:center}
.tlist li{padding:4px 0;border-top:1px solid rgba(236,232,222,.07)}.tlist li:first-child{border-top:0}
.tlist b{font-weight:600;margin-left:6px;font-variant-numeric:tabular-nums}.tlist small{color:#8d8a82;font-size:11.5px;margin-left:4px}
.endv details.why>summary{justify-content:center;display:flex}
.leg .lr{border-top:9px solid #ff8a84;margin-left:8px}.leg .lc{width:9px;height:9px;border:0;border-radius:50%;background:var(--amber);margin-left:8px}
.read small.xr{margin-top:10px;padding-top:8px;border-top:1px solid rgba(236,232,222,.1)}
.ftpl small .fee{color:#8d8a82}
.tmw{display:flex;align-items:baseline;gap:8px}.rl{font-size:12px;letter-spacing:.08em;color:#9a978e;font-variant-numeric:tabular-nums}
.modes{flex-direction:column;align-items:center;gap:10px}
.btn.xl.real{border-color:rgba(169,199,216,.8);background:rgba(20,40,60,.55);box-shadow:0 0 24px rgba(169,199,216,.14)}
.endv .src{font-size:11.5px;line-height:1.4;color:#8d8a82;margin:2px auto 10px;max-width:420px}

/* end screens: the fixed disclaimer is hidden and shown inline at the bottom instead, so it never covers content */
body[data-mode="end"] #foot{display:none}
.endv .endfoot{margin:22px auto 0;max-width:420px;font-size:10.5px;letter-spacing:.06em;line-height:1.5;color:#8e8a80;text-align:center}