/* Trading Game terminal skin.
   The workspace and right rail deliberately mirror index.aspx's replay
   simulator hierarchy, sizing, separators, density, and responsive rules. */

body:has(.s8-game-work){display:block;height:auto;overflow:hidden}
body:has(.s8-game-work) .app{height:100dvh}
body:has(.s8-game-work) .terminal-stage{display:flex;flex:1;min-height:0;overflow:hidden}

/* Replay workspace: flexible chart column + standard production game panel. */
.s8-game-work{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) auto;background:var(--s8-bg);overflow:hidden}
.s8-game-main{display:flex;flex-direction:column;min-width:0;min-height:0}
.s8-game-main .s8-stage{flex:1;min-height:0}
.s8-game-main .s8-stage__canvas,.s8-game-chart{display:flex;flex:1;min-width:0;min-height:0}
#game-chart{width:100%;height:100%}
#game-chart .sc-chart-container,#game-chart .sc-price-chart{height:100%!important;min-height:0}
#game-chart canvas,.sc-chart-container canvas{background:var(--s8-bg)!important;cursor:crosshair!important}
/* Match index.aspx at the chart/panel junction. The stock-chart stylesheet's
   1px canvas border becomes fractional at Windows display scaling and leaves
   visible seams after GPU resampling. */
#game-chart canvas.sc-price-chart{display:block;border:0;margin-bottom:0}
#game-chart canvas.level-grab{cursor:ns-resize!important}
#game-chart canvas.level-grabbing{cursor:grabbing!important}

.s8-game-sidebar{--replay-dom-order-panel-width:360px;--s8-game-right-width:var(--replay-dom-order-panel-width);display:flex;width:var(--s8-game-right-width);min-width:var(--s8-game-right-width);max-width:var(--s8-game-right-width);flex:0 0 var(--s8-game-right-width);min-height:0;overflow:hidden}
.s8-game-sidebar .side-panels{width:var(--s8-game-right-width);min-width:var(--s8-game-right-width);max-width:var(--s8-game-right-width);flex:0 0 var(--s8-game-right-width);min-height:0;overflow:hidden;background:var(--s8-panel);border-left:1px solid var(--s8-line)}
.s8-game-sidebar .side-panels>.sim{height:100%;border-left:0}
.s8-game-work .game-sidebar{display:flex;flex-direction:column;width:auto;min-width:0;max-width:none;background:var(--s8-panel);border:0;overflow:auto}

/* Same panel grammar used by the replay simulator. */
.s8-game-work .sim__head{display:flex;align-items:center;gap:var(--s8-2);height:var(--s8-toolbar);padding:0 var(--s8-3);border-bottom:1px solid var(--s8-line);background:var(--s8-panel-2);flex:none}
.s8-game-work .sim__head>svg{width:14px;height:14px;stroke:var(--s8-up);fill:none;stroke-width:2}
.s8-game-work .sim__head .s8-label{flex:1}
.s8-game-work .game-title{margin:0;font:inherit}
.s8-game-symbol{font-family:var(--s8-mono);font-size:var(--s8-fs-xs);font-weight:600;color:var(--s8-fg-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.s8-game-work .grp{padding:var(--s8-3);border-bottom:1px solid var(--s8-line);display:flex;flex-direction:column;gap:var(--s8-2);flex:none}
.s8-game-work .two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s8-2)}
.s8-game-work .figrow{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s8-2)}
.s8-game-fill{flex:1 1 auto;min-height:var(--s8-2)}

/* The current setup instruction is a quiet inset, not a floating card. */
.s8-game-cue{display:flex;align-items:center;gap:var(--s8-3);min-height:44px;margin:0;padding:var(--s8-2) var(--s8-3);border:0;border-left:2px solid var(--s8-accent);border-radius:0;background:var(--s8-inset);box-shadow:none}
.s8-game-cue__step{display:grid;place-items:center;flex:none;width:24px;min-width:24px;height:24px;border:1px solid var(--s8-line-2);border-radius:var(--s8-r-sm);background:var(--s8-panel-2);color:var(--s8-accent-fg);font-family:var(--s8-mono);font-size:var(--s8-fs-xs);font-weight:600}
.s8-game-cue__step svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.s8-game-cue p{margin:0;color:var(--s8-fg-2);font-size:var(--s8-fs-sm);line-height:1.4}
.s8-game-cue .highlight{color:var(--s8-fg);font-weight:600}
.s8-game-cue .highlight.red{color:var(--s8-down)}

.s8-game-levels{gap:0!important;padding-top:0!important;padding-bottom:0!important}
.s8-game-level{padding-inline:var(--s8-1)}
.s8-game-level:last-child{border-bottom:0}
.s8-game-level .simulator-value{font-size:var(--s8-fs-md);font-weight:600}
.s8-game-level--entry .simulator-value:not(.pending){color:var(--s8-accent-fg)}
.s8-game-level--tp .simulator-value:not(.pending){color:var(--s8-up)}
.s8-game-level--sl .simulator-value:not(.pending){color:var(--s8-down)}
.s8-game-level .simulator-value.pending{color:var(--s8-fg-4);font-weight:400}

.direction-badge{display:inline-flex;align-items:center;height:var(--s8-h-xs);padding:0 9px;border:1px solid var(--s8-line-2);border-radius:var(--s8-r-sm);background:var(--s8-panel-2);color:var(--s8-fg-4);font-size:var(--s8-fs-micro);font-weight:700;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap}
.direction-badge.long{background:var(--s8-up-tint);border-color:var(--s8-up-line);color:var(--s8-up)}
.direction-badge.short{background:var(--s8-down-tint);border-color:var(--s8-down-line);color:var(--s8-down)}
.rr-readout{display:inline-flex;align-items:baseline;gap:6px;font-family:var(--s8-mono);font-size:var(--s8-fs-xs);font-variant-numeric:tabular-nums;color:var(--s8-fg-3)}
.rr-readout .rr-cap{font-size:var(--s8-fs-micro);font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.rr-readout .rr-val{font-weight:600;color:var(--s8-fg-2)}
.rr-readout.good .rr-val{color:var(--s8-up)}
.rr-readout.poor .rr-val{color:var(--s8-down)}

.s8-game-work .trade-buttons-row{display:flex;gap:var(--s8-2);padding:0}
.s8-game-work .trade-buttons-row.two{display:grid}
.s8-game-work .btn-game{display:inline-flex;flex:1;align-items:center;justify-content:center;gap:var(--s8-2);height:var(--s8-h-lg);padding:0 var(--s8-3);border:1px solid var(--s8-line-2);border-radius:var(--s8-r-sm);background:var(--s8-hover);color:var(--s8-fg-2);font:inherit;font-size:var(--s8-fs-sm);font-weight:600;cursor:pointer}
.s8-game-work .btn-game:hover:not(:disabled){border-color:var(--s8-line-3);background:var(--s8-active);color:#fff}
.s8-game-work .btn-start-game{border-color:var(--s8-accent);background:var(--s8-accent);color:var(--s8-on-accent)}
.s8-game-work .btn-start-game:hover:not(:disabled){border-color:var(--s8-accent-hi);background:var(--s8-accent-hi)}
.s8-game-work .btn-game:disabled{opacity:.48;cursor:not-allowed}
.s8-game-work .btn-game svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.s8-game-record{gap:0!important;border-bottom:0!important}
.s8-game-record>.figrow{height:28px}
.s8-game-work .stats-grid{display:flex;flex-direction:column;gap:0;margin:0;padding:0}
.s8-game-work .stat-item{padding:0;background:transparent;border-radius:0;box-shadow:none;text-align:left}
.s8-game-work .stat-value{color:var(--s8-fg);font-size:var(--s8-fs-sm);font-weight:600;font-variant-numeric:tabular-nums}
.s8-game-work .stat-value.positive{color:var(--s8-up);text-shadow:none}
.s8-game-work .stat-value.negative{color:var(--s8-down);text-shadow:none}
.s8-game-work .stat-label{margin:0;color:var(--s8-fg-2);font-size:var(--s8-fs-sm);letter-spacing:0;text-transform:none}
.s8-game-work .btn-reset-stats{align-self:flex-start;width:auto;height:var(--s8-h-xs);margin:var(--s8-2) 0 0;padding:0 var(--s8-2);border:1px solid transparent;border-radius:var(--s8-r-sm);background:transparent;color:var(--s8-fg-2);font:inherit;font-size:var(--s8-fs-xs)}

/* Trading Game panel v0.6 — supplied designer CSS. */
.s8-gp{display:flex;flex-direction:column;background:var(--s8-panel);border:1px solid var(--s8-line);border-left-width:1px;overflow:hidden}
.s8-gp__head{display:flex;align-items:center;gap:var(--s8-2);height:var(--s8-toolbar);padding:0 var(--s8-3);border-bottom:1px solid var(--s8-line);background:var(--s8-panel-2);flex:none}
.s8-gp__head .s8-label{flex:1;color:var(--s8-fg-2)}
.s8-gp__head>svg{width:14px;height:14px;flex:none;stroke:var(--s8-accent-fg);stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
.s8-game-work .s8-gp__head>svg{stroke:var(--s8-accent-fg)}
.s8-gp__sym{font-size:var(--s8-fs-xs);font-weight:600;color:var(--s8-fg-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.s8-gp__grp{display:flex;flex-direction:column;gap:var(--s8-3);padding:var(--s8-3);border-bottom:1px solid var(--s8-line);flex:none}
.s8-gp__grp--tight{gap:var(--s8-2)}
.s8-gp__fill{flex:1 1 auto;min-height:var(--s8-4)}
.s8-gp__two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s8-2)}
.s8-gp__hd{display:flex;align-items:center;justify-content:space-between;gap:var(--s8-2)}

.s8-gside{display:inline-flex;align-items:center;gap:6px;height:var(--s8-h-xs);padding:0 9px;border-radius:var(--s8-r-sm);border:1px solid var(--s8-line-2);background:var(--s8-panel-2);color:var(--s8-fg-4);font-size:var(--s8-fs-micro);font-weight:700;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap}
.s8-gside--long{background:var(--s8-up-tint);border-color:var(--s8-up-line);color:var(--s8-up)}
.s8-gside--short{background:var(--s8-down-tint);border-color:var(--s8-down-line);color:var(--s8-down)}
.s8-game-plan .rr-readout,.s8-game-plan .rr-readout.good,.s8-game-plan .rr-readout.poor{height:auto;padding:0;border:0;border-radius:0;background:transparent;line-height:inherit}
.s8-grr{display:flex;flex-direction:column;gap:7px}
.s8-grr__bar{display:flex;gap:2px;height:8px;border-radius:var(--s8-r-pill);overflow:hidden;background:var(--s8-active)}
.s8-grr__bar>i{display:block;height:100%}
.s8-grr__bar>i.risk{background:var(--s8-down)}
.s8-grr__bar>i.reward{background:var(--s8-up)}
.s8-grr__legend{display:flex;align-items:baseline;justify-content:space-between;font-size:var(--s8-fs-micro);color:var(--s8-fg-3);font-variant-numeric:tabular-nums}
.s8-grr__legend b{font-weight:600;color:var(--s8-fg-2)}

.s8-gtrio{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--s8-line);border-radius:var(--s8-r);background:var(--s8-inset);overflow:hidden}
.s8-gtrio>div{display:flex;flex-direction:column;gap:5px;padding:9px 10px;border-left:1px solid var(--s8-line)}
.s8-gtrio>div:first-child{border-left:0}
.s8-gtrio>div>b{overflow:hidden;font-size:var(--s8-fs-base);font-weight:600;line-height:1;color:#fff;font-variant-numeric:tabular-nums;text-overflow:ellipsis;white-space:nowrap}
.s8-gtrio>div.is-empty>b{color:var(--s8-fg-4);font-weight:400}
.s8-gtrio>div>.s8-label{font-size:10px}

.s8-game-steps-group{gap:0!important}
.s8-gsteps{display:flex;flex-direction:column}
.s8-gstep{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:var(--s8-3);padding:10px 0}
.s8-gstep+.s8-gstep{border-top:1px solid var(--s8-line)}
.s8-gstep__n{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1px solid var(--s8-line-2);background:var(--s8-inset);font-size:var(--s8-fs-xs);font-weight:700;color:var(--s8-fg-4);font-variant-numeric:tabular-nums}
.s8-gstep__n svg{width:12px;height:12px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.s8-gstep__t{font-size:var(--s8-fs-sm);color:var(--s8-fg-3);min-width:0}
.s8-gstep.is-done .s8-gstep__n{background:var(--s8-up-tint);border-color:var(--s8-up-line);color:var(--s8-up)}
.s8-gstep.is-done .s8-gstep__t{color:var(--s8-fg-2)}
.s8-gstep.is-now .s8-gstep__n{background:var(--s8-accent);border-color:var(--s8-accent-hi);color:#fff}
.s8-gstep.is-now .s8-gstep__t{color:#fff;font-weight:500}

.s8-game-setup-controls{gap:var(--s8-2)!important}
.s8-game-work .s8-game-setup-controls>.btn-start-game{flex:none;height:var(--s8-h-lg);min-height:var(--s8-h-lg);padding:0 var(--s8-4);border-color:transparent;border-radius:var(--s8-r);font-size:var(--s8-fs-md)}
.s8-game-work .s8-game-setup-controls .s8-gp__two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;padding:0}
.s8-game-work .s8-game-setup-controls .s8-gp__two>.btn-game{display:inline-flex;flex:none;width:100%;height:var(--s8-h-lg);min-height:var(--s8-h-lg);padding:0 var(--s8-3);border-color:transparent;border-radius:var(--s8-r);background:var(--s8-hover);color:var(--s8-fg);font-size:var(--s8-fs-sm);font-weight:500}
.s8-game-work .s8-game-setup-controls .s8-gp__two>.btn-game:hover{background:var(--s8-active);border-color:transparent;color:var(--s8-fg)}
.s8-grec{display:flex;flex-direction:column;gap:var(--s8-2);padding:var(--s8-3);border-bottom:1px solid var(--s8-line);flex:none}
.s8-grec .btn-reset-stats{align-self:auto;margin:0}
.s8-grec .btn-reset-stats svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.s8-gmetrics{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--s8-line);border-left:1px solid var(--s8-line);border-radius:var(--s8-r);overflow:hidden}
.s8-gmetrics>div{display:flex;flex-direction:column;gap:3px;padding:10px 12px;border-right:1px solid var(--s8-line);border-bottom:1px solid var(--s8-line)}
.s8-gmetrics>div>b{font-size:var(--s8-fs-lg);font-weight:600;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.s8-gmetrics b.positive{color:var(--s8-up)}
.s8-gmetrics b.negative{color:var(--s8-down)}

.s8-game-work .loading-overlay{display:flex;position:absolute;inset:0;z-index:100;align-items:center;justify-content:center;background:var(--s8-bg)}
.s8-game-work .loading-overlay.hidden{display:none}
.s8-game-work .loading-spinner{width:34px;height:34px;margin:auto;border:3px solid var(--s8-line-2);border-top-color:var(--s8-accent);border-radius:50%;animation:s8-game-spin 1s linear infinite}
.s8-game-work .loading-text{margin-top:var(--s8-3);color:var(--s8-fg-3);font-size:var(--s8-fs-sm)}
@keyframes s8-game-spin{to{transform:rotate(360deg)}}

/* Game result v0.7 Option A + the supplied destructive confirmation. */
.result-overlay{display:none;position:fixed;inset:0;z-index:2000;align-items:center;justify-content:center;padding:20px;background:var(--s8-scrim);-webkit-backdrop-filter:none;backdrop-filter:none}
.result-overlay.show{display:flex}
.s8-game-result-modal .s8-modal__body{gap:0}
.s8-game-last-row{border-bottom:0}
.s8-game-result-rows #resultRecordPnl{font-weight:600}
.s8-game-result-modal .s8-modal__foot .s8-btn svg{width:14px;height:14px}
.s8-game-reset-modal .s8-modal__body>div{width:100%}

@media(max-width:1240px){.s8-game-sidebar{--replay-dom-order-panel-width:340px}}
@media(max-width:860px){
 body:has(.s8-game-work) .terminal-stage{min-height:0;overflow:hidden}
 .s8-game-work{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(250px,46%)}
 .s8-game-sidebar{--replay-dom-order-panel-width:100%;--s8-game-right-width:100%;width:100%;min-width:0;max-width:none;flex-basis:auto;border-top:1px solid var(--s8-line)}
 .s8-game-sidebar .side-panels{width:100%;min-width:0;max-width:none;flex-basis:auto;border-left:0}
 .s8-game-fill{display:none}
}
@media(max-width:520px){.s8-game-work{grid-template-rows:minmax(0,1fr) minmax(270px,52%)}.s8-game-work .sim__head,.s8-game-work .grp{padding-inline:var(--s8-2)}}
@media(prefers-reduced-motion:reduce){.s8-game-work .loading-spinner{animation:none}}