Blame for play.css

:root{--ink:#0f1528;--soft:#4f5a6e;--muted:#8a93a3;--line:rgba(74,38,130,.085);--paper:#fcfcfd;--paper-2:#f4f6fa;
  --g:linear-gradient(90deg,#b40028,#7800f0);--up:#0f9d58;--dn:#d6304a;
  --serif:'Newsreader',Georgia,serif;--sans:'Inter',system-ui,sans-serif;--mono:'JetBrains Mono',ui-monospace,monospace;
  --ring:0 0 0 1px rgba(74,38,130,.07),0 1px 2px rgba(40,20,80,.04),0 10px 28px -18px rgba(60,30,120,.18)}
*{box-sizing:border-box}html,body{margin:0;height:100%}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(58vw 70vh at 0% 20%,rgba(180,0,40,.05),transparent 72%),radial-gradient(62vw 74vh at 100% 85%,rgba(120,0,240,.06),transparent 72%)}
button{font:inherit;cursor:pointer}
.up{color:var(--up)}.dn{color:var(--dn)}.muted{color:var(--muted)}
.app{height:100vh;min-height:680px;display:grid;grid-template-rows:60px minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);row-gap:14px;padding:0 28px 18px}

/* top bar */
.top{display:flex;align-items:center;gap:16px;border-bottom:1px solid var(--line)}
.back{font:600 .8rem var(--sans);color:#fff;text-decoration:none;padding:8px 15px;border-radius:999px;background:var(--ink);box-shadow:0 6px 16px -8px rgba(15,21,40,.6);transition:transform .2s,box-shadow .2s}
.back:hover{transform:translateX(-2px);box-shadow:0 8px 20px -8px rgba(15,21,40,.7)}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-size:1.15rem;font-weight:500;color:var(--ink);text-decoration:none}
.brand img{height:22px}.brand .sep{color:rgba(74,38,130,.25)}
.brand b{font:700 .8rem 'Cinzel','Newsreader',Georgia,serif;letter-spacing:.1em;background:var(--g);-webkit-background-clip:text;background-clip:text;color:transparent}
.title{font-family:var(--serif);font-size:1.15rem;margin-left:6px}
.title em{font-style:italic;background:var(--g);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}
.who{display:flex;align-items:center;gap:12px;margin-left:auto}
.sym-pill{font:600 .78rem var(--mono);padding:5px 11px;border-radius:999px;background:var(--paper-2)}
.sym-pill small{font:400 .72rem var(--sans);color:var(--soft);margin-left:6px}
.day{font:500 .8rem var(--mono);color:var(--soft)}.day b{color:var(--ink)}
.ghost{border:0;background:none;font-size:.78rem;color:var(--soft);padding:5px 10px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line)}
.ghost:hover{color:var(--ink)}
.newg{border:0;font:600 .78rem var(--sans);color:#6a2bc4;padding:7px 13px;border-radius:999px;background:rgba(120,0,240,.07);box-shadow:inset 0 0 0 1px rgba(120,0,240,.22);transition:background .2s,color .2s}
.newg:hover{background:rgba(120,0,240,.13);color:#5310b0}
.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--g);color:#fff;font:500 1rem var(--serif)}
.nm{display:flex;flex-direction:column;line-height:1.15}
.nm small{font-size:.62rem;color:var(--muted);letter-spacing:.1em;text-transform:uppercase}.nm b{font:500 1.05rem var(--serif)}

/* layout */
.main{display:grid;grid-template-columns:300px minmax(0,1fr) 340px;gap:18px;padding-top:2px;min-height:0}
.chartcard{background:#fff;border-radius:18px;box-shadow:var(--ring);padding:14px 16px 8px;display:flex;flex-direction:column;min-height:0}
.ch-head{display:flex;align-items:baseline;gap:12px;flex-wrap:nowrap;min-height:26px;white-space:nowrap;overflow:hidden}
.ch-head .sym{font:600 1.15rem var(--sans)}.ch-head .px{font:600 1.15rem var(--mono)}
.ch-head .chg{font:500 .85rem var(--mono)}.ch-head .ohlc{font:400 .72rem var(--mono);color:var(--muted)}.ch-head .ohlc b{color:var(--soft);font-weight:500}
.ch-head .leg{margin-left:auto;display:flex;gap:12px;font-size:.7rem;color:var(--soft)}
.ch-head .leg i{display:inline-block;width:14px;height:2px;margin-right:5px;vertical-align:3px}
.ch-head .leg i.dash{height:0;border-top:1.5px dashed var(--muted)}
#kline{display:block;width:100%;flex:1;min-height:0;cursor:crosshair}
.ax{font:400 9.5px var(--mono);fill:var(--muted)}.gl{stroke:rgba(74,38,130,.07)}
.cnew{transform-box:fill-box;transform-origin:center;animation:grow .45s cubic-bezier(.2,.8,.2,1)}
@keyframes grow{from{transform:scaleY(0);opacity:0}}
.mk{animation:pop .4s cubic-bezier(.3,1.6,.5,1)}@keyframes pop{from{opacity:0;transform:translateY(-6px)}}

.side{display:flex;flex-direction:column;gap:12px;min-height:0}
.card{background:#fff;border-radius:16px;box-shadow:var(--ring);padding:14px 16px}
.kick{font-size:.62rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between;gap:10px}
.eq{display:flex;align-items:baseline;gap:10px;margin-top:6px}
.eq b{font:500 2rem var(--serif);letter-spacing:-.02em}.eq span{font:600 .9rem var(--mono)}
.eq .vs{color:var(--muted);font-weight:400}
.kv{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.kv div{background:var(--paper-2);border-radius:10px;padding:7px 9px}
.kv small{display:block;font-size:.6rem;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}.kv b{font:600 .9rem var(--mono)}

.stand{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column}
.stand.wide{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:28px;height:206px;min-width:0}
.st-left{display:flex;flex-direction:column;min-height:0;min-width:0}
.st-right{min-width:0;border-left:1px solid var(--line);padding-left:24px}
.st-gap{font:600 .8rem var(--mono)}
.stand.wide .st-rank{font-size:1.5rem}
.st-plot{flex:1;min-height:48px;margin-top:4px;overflow:hidden}
.st-plot svg{position:relative}
.stand .tb{margin-top:4px;font-size:.74rem}.stand .tr{grid-template-columns:34px minmax(0,1fr) 64px 70px;padding:2px 6px}
.stand .nm2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-row{display:flex;justify-content:space-between;align-items:baseline}
.st-rank{font:500 1.25rem var(--serif);background:var(--g);-webkit-background-clip:text;background-clip:text;color:transparent}
.st-rank small{font:400 .72rem var(--mono);color:var(--muted);-webkit-text-fill-color:var(--muted)}
.stand svg{display:block;margin-top:2px}
.sx{font:500 8.5px var(--mono);fill:var(--muted)}.sx.you{fill:#7800f0;font-weight:600}
.st-line{display:flex;justify-content:space-between;gap:8px;font-size:.72rem;color:var(--soft);margin-top:2px}
.st-line b{color:var(--ink);font-weight:600}.st-line span:last-child{font:600 .72rem var(--mono);white-space:nowrap}
.pick{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.pick button{display:inline-flex;align-items:center;gap:6px;border:0;background:#fff;box-shadow:0 0 0 1px rgba(74,38,130,.12);font:500 .74rem var(--sans);padding:4px 10px 4px 4px;border-radius:999px;color:var(--ink);transition:background .15s,color .15s,box-shadow .15s}
.pick.m button{padding:4px 10px}
.pick button:hover{box-shadow:0 0 0 1px rgba(120,0,240,.35)}
.pick button.sel{background:var(--ink);color:#fff;box-shadow:none}
.ini{display:inline-grid;place-items:center;flex:none;width:18px;height:18px;border-radius:50%;font:600 .46rem var(--mono);color:#0f1528}
.go-row{display:flex;gap:8px;margin-top:12px}
.go{flex:1;border:0;border-radius:12px;padding:11px;font:600 .9rem var(--sans);color:#fff;background:linear-gradient(90deg,#7a1036,#4a1a8c);display:flex;justify-content:center;gap:10px;align-items:center;transition:filter .2s,transform .1s}
.go small{font-weight:400;opacity:.7}.go:hover{filter:brightness(1.15)}.go:active{transform:scale(.98)}
.go:disabled,.auto:disabled{opacity:.4;cursor:default;filter:none}
.auto{border:0;border-radius:12px;padding:0 14px;font:600 .78rem var(--sans);color:var(--ink);background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--line)}
.auto.on{background:var(--ink);color:#fff}
.reveal{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin-top:10px;padding:9px 11px;border-radius:10px;min-height:40px;font-size:.74rem;color:var(--soft);
  background:linear-gradient(90deg,rgba(180,0,40,.05),rgba(120,0,240,.06))}
.reveal b{color:var(--ink);font-size:.8rem}
.reveal.flash{animation:flash .5s}@keyframes flash{from{background:rgba(120,0,240,.18)}}
.act{font:600 .62rem var(--sans);letter-spacing:.06em;padding:2px 6px;border-radius:5px;text-align:center}
.reveal .act{font-size:.72rem;padding:3px 8px}
.act.B{color:#0b7a45;background:#e3f5eb}.act.S{color:#b4233a;background:#fdecee}.act.H{color:#4f5a6e;background:var(--paper-2)}
.logbar{padding:12px 16px 12px;min-width:0}
.tiles{display:flex;gap:6px;overflow-x:auto;margin-top:8px;padding:2px 2px 6px;scrollbar-width:thin;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent);mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent)}
.tile{flex:none;width:112px;border-radius:10px;padding:6px 8px;background:var(--paper-2);font-size:.68rem;display:grid;gap:3px;cursor:default;transition:box-shadow .15s,background .15s}
.tile:hover{background:#fff;box-shadow:0 0 0 1px rgba(120,0,240,.35)}
.tile .t1,.tile .t2{display:flex;justify-content:space-between;align-items:center}
.tile .t1{font-family:var(--mono);color:var(--muted);font-size:.62rem}
.tile .t2 span:last-child{font:600 .72rem var(--mono)}
.tile .t3{color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile.fut{background:none;outline:1px dashed rgba(74,38,130,.14);outline-offset:-1px;box-shadow:none;color:var(--muted)}
.tile.fut .t2,.tile.fut .t3{visibility:hidden}
.tile.now{outline:1.5px solid #7800f0;outline-offset:-1.5px;background:#fff}
.tile.now .t2{visibility:visible;color:#7800f0;font-weight:600}
.tile.new{animation:pop .35s}
.tile.on{background:#fff;box-shadow:0 0 0 1.5px #7800f0}
.log-body{flex:1;min-height:0;overflow:auto;margin-top:4px;scrollbar-width:thin}
.row{display:grid;grid-template-columns:42px 44px 1fr 62px;gap:8px;align-items:center;font-size:.74rem;padding:7px 0;border-top:1px solid var(--line)}
.row:first-child{border-top:0}.row.new{animation:pop .35s}
.row .d{font-family:var(--mono);color:var(--muted)}
.row .ag{color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .r{text-align:right;font-family:var(--mono)}
.log .empty{font-size:.74rem;color:var(--muted);padding:10px 0}

/* overlay (start / end) */
.ov{position:fixed;inset:0;display:grid;place-items:center;background:rgba(246,245,250,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:20;opacity:0;pointer-events:none;transition:opacity .3s}
.ov.on{opacity:1;pointer-events:auto}
.ov-card{width:min(640px,92vw);background:#fff;border-radius:22px;box-shadow:var(--ring),0 30px 80px -30px rgba(60,30,120,.35);padding:28px 30px;transform:translateY(10px);transition:transform .35s}
.ov.on .ov-card{transform:none}
.ov-card .kick{justify-content:flex-start}
.ov-card h2{font:500 2rem/1.15 var(--serif);margin:6px 0 4px;letter-spacing:-.01em}
.ov-card h2 em{font-style:italic;background:var(--g);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}
.ov-card p{margin:6px 0 0;font-size:.86rem;color:var(--soft);line-height:1.5}
.reroll{border:0;background:none;color:var(--muted);font-size:1rem;vertical-align:4px;padding:0 4px}.reroll:hover{color:#7800f0}
.stocks{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:18px}
.stock{border:0;background:#fff;border-radius:14px;box-shadow:0 0 0 1px rgba(74,38,130,.12);padding:12px 12px 8px;text-align:left;transition:box-shadow .2s,transform .2s}
.stock:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(120,0,240,.35),0 8px 20px -12px rgba(60,30,120,.3)}
.stock.sel{box-shadow:0 0 0 2px #7800f0}
.stock b{display:block;font:600 .95rem var(--mono)}.stock small{font-size:.7rem;color:var(--muted)}
.stock svg{display:block;width:100%;height:34px;margin-top:6px}
.rules{display:flex;gap:18px;margin-top:16px;font-size:.74rem;color:var(--soft)}
.rules span{display:flex;gap:6px;align-items:baseline}.rules i{font-style:normal;font:600 .7rem var(--mono);color:#7800f0}
.ov-actions{display:flex;gap:10px;margin-top:20px;align-items:center}
.ov-actions .go{flex:none;padding:11px 22px}
.ov-actions a,.ov-actions .ghost{font-size:.82rem}
.ov-actions a{color:var(--soft);text-decoration:none;padding:7px 12px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line)}
.res{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:16px}
.res div{background:var(--paper-2);border-radius:12px;padding:10px 12px}
.res small{display:block;font-size:.6rem;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.res b{font:600 1.05rem var(--mono)}.res em{display:block;font:400 .7rem var(--mono);color:var(--muted);font-style:normal;margin-top:2px}
.rankline{margin-top:14px;padding:12px 14px;border-radius:12px;font-size:.84rem;color:var(--soft);background:linear-gradient(90deg,rgba(180,0,40,.05),rgba(120,0,240,.07))}
.rankline b{color:var(--ink)}.rankline .big{font:500 1.6rem var(--serif);margin-right:6px;background:var(--g);-webkit-background-clip:text;background-clip:text;color:transparent}
.rankline .dn{color:var(--dn)}
.rk-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px}
.tb{margin-top:8px;font-size:.78rem}
.tr{display:grid;grid-template-columns:40px 1fr 72px 72px;gap:8px;align-items:center;padding:4px 6px;border-radius:8px}
.tr span:nth-child(3),.tr span:nth-child(4){text-align:right;font-family:var(--mono)}
.tr.th{font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tr .rk{font-family:var(--mono);color:var(--muted)}.tr .nm2{display:flex;align-items:center;gap:6px;color:var(--ink)}
.tr .nm2 small{color:var(--muted);font-size:.7rem}
.tr.me{background:#fff;box-shadow:0 0 0 1.5px #7800f0}.tr.me .rk{color:#7800f0;font-weight:600}.tr.me .nm2{font-weight:600}
.tr.gapr{display:block;text-align:center;color:var(--muted);padding:0;line-height:.8}
.fav{margin-top:8px;font-size:.74rem;color:var(--soft)}

.tip{position:fixed;z-index:30;pointer-events:none;background:var(--ink);color:#fff;font-size:.72rem;padding:6px 9px;border-radius:8px;opacity:0;transition:opacity .15s;white-space:nowrap}
.tip.on{opacity:1}

@media(max-width:1000px){
  .app{height:auto;padding:0 16px 20px}.title,.brand{display:none}
  .main{grid-template-columns:1fr}.chartcard{height:70vh}
  .stocks{grid-template-columns:repeat(2,1fr)}.res{grid-template-columns:repeat(2,1fr)}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.stand .st-line{margin-top:6px}
.ch-head .co{font-size:.78rem;color:var(--soft);margin-left:-8px}
.dayblk{margin-left:auto;display:flex;align-items:center;gap:10px;font:500 .78rem var(--mono);color:var(--soft)}
.dayblk b{color:var(--ink)}
.prog{display:inline-block;width:90px;height:5px;border-radius:3px;background:var(--paper-2);overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}
.prog i{display:block;height:100%;background:linear-gradient(90deg,#b40028,#7800f0);border-radius:3px;transition:width .4s}
#kline .lg text{font:500 9.5px var(--sans);fill:var(--soft)}
#kline .flag{font:600 9px var(--mono);fill:#fff}
.ch-head .ohlc{font-size:.68rem}
.dayblk{font-size:.74rem}.prog{width:70px}
.side > .card:last-child{flex:1}
/* standing as the left column */
.main > .stand{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.main > .stand .st-row{margin-top:6px}
.main > .stand .st-rank{font-size:1.6rem}
.main > .stand .st-plot{flex:none;height:150px;margin-top:4px}
.tb.full{flex:1;min-height:0;overflow:auto;margin-top:8px;scrollbar-width:thin;border-top:1px solid var(--line);padding-top:0}
.tb.full .tr{grid-template-columns:30px minmax(0,1fr) 60px;padding:3px 4px;font-size:.72rem}
.tb.full .tr.th{position:sticky;top:0;background:#fff;z-index:1;font-size:.56rem;border-radius:0;padding-top:6px;padding-bottom:5px;box-shadow:0 1px 0 var(--line)}
.tb.full .tr .nm2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb.full .tr .ini{width:16px;height:16px;font-size:.42rem}
.tb.full .gapr{display:none}
#kline .ttag .t1{font:700 10px var(--mono);fill:#fff;letter-spacing:.04em}
#kline .ttag .t1{font:600 10.5px var(--sans);fill:#fff}
#kline .ttag .t2{font:500 8.5px var(--sans);fill:rgba(255,255,255,.75);letter-spacing:.04em}
/* right column: richer reveal + P&L attribution */
.reveal{flex-direction:column;align-items:stretch;gap:6px}
.rv1{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.rv-pnl{font:600 .8rem var(--mono)}
.rv2{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:.66rem}
.rv2 .muted{margin-right:auto}
.rv-run{display:inline-flex;align-items:center;gap:3px;padding:2px 4px 2px 5px;border-radius:7px;background:#fff;opacity:.6}
.rv-run i{font:500 .6rem var(--mono);font-style:normal;color:var(--muted)}
.rv-run .act{font-size:.56rem;padding:1px 4px}
.rv-run.drawn{opacity:1;box-shadow:0 0 0 1.5px #7800f0}
.act.na{color:var(--muted);background:var(--paper-2)}
.side > .card:last-child{flex:1}
.attr{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.at-h,.at-r{display:grid;grid-template-columns:minmax(0,1.1fr) 64px minmax(0,1fr) 56px;gap:8px;align-items:center;white-space:nowrap}
.at-h{margin-top:8px;font-size:.56rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.at-h span:nth-child(2),.at-h span:last-child{text-align:right}
.at-body{flex:1;min-height:0;overflow:auto;scrollbar-width:thin}
.at-r{padding:5px 0;border-top:1px solid var(--line);font-size:.72rem}
.at-n{display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden}
.at-n .ini{width:17px;height:17px;font-size:.44rem;flex:none}
.at-d{font-family:var(--mono);color:var(--muted);text-align:right;font-size:.66rem}
.at-bar{position:relative;height:8px;background:linear-gradient(90deg,transparent calc(50% - .5px),rgba(74,38,130,.18) calc(50% - .5px),rgba(74,38,130,.18) calc(50% + .5px),transparent calc(50% + .5px))}
.at-bar i{position:absolute;top:0;bottom:0;border-radius:2px}
.at-bar i.p{left:50%;background:#0f9d58}.at-bar i.n{right:50%;background:#d6304a}
.at-v{font:600 .7rem var(--mono);text-align:right}
/* right column: roomier top two cards */
.side{gap:14px}
.side > .card:not(.attr){padding:18px 20px}
.side .eq{margin-top:10px}
.side .kv{gap:10px;margin-top:14px}
.side .kv div{padding:9px 11px}
.pk-l{margin-top:12px;font-size:.6rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.side .pick{gap:6px 6px;margin-top:6px}
.side .go-row{margin-top:16px}
.side .reveal{margin-top:12px;padding:11px 13px}

/* ---------- narrow screens (≤1000px): one column — chart, then the controls, then the standing. Desktop is untouched. ---------- */
@media (max-width:1000px){
  .app{height:auto;min-height:0;display:flex;flex-direction:column;gap:14px;padding:0 14px 20px}
  .main{display:flex;flex-direction:column;gap:14px}
  .main > .chartcard{order:1;height:62vh;min-height:380px}
  .main > .side{order:2}
  .main > .stand{order:3;max-height:420px}
  .ch-head{flex-wrap:wrap;white-space:normal;row-gap:2px}
  .ch-head .ohlc{flex-basis:100%}
  .who .nm{display:none}
  .rules{flex-wrap:wrap;row-gap:6px}
  .ov-card{padding:22px 20px;max-height:92vh;overflow:auto}
  .logbar .kick span:last-child{display:none}
}