/* 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 + 360px production side 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 canvas,.sc-chart-container canvas{background:var(--s8-bg)!important;cursor:crosshair!important}
#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:calc(var(--replay-dom-order-panel-width) + var(--s8-rail));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-panel-2);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-hover);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)}

.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)}}

/* Existing result/reset behavior, reskinned with terminal tokens. */
.result-overlay{display:none;position:fixed;inset:0;z-index:2000;align-items:center;justify-content:center;padding:20px;background:rgba(2,4,8,.86);backdrop-filter:blur(5px)}
.result-overlay.show{display:flex}
.result-card,.grm{position:relative;width:min(420px,100%);overflow:hidden;border:1px solid var(--s8-line-2);border-radius:var(--s8-r-lg);background:var(--s8-panel);box-shadow:var(--s8-pop-lg);color:var(--s8-fg)}
.result-header{position:relative;min-height:42px}
.result-close-btn,.grm-close{position:absolute;z-index:3;top:10px;right:10px;display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:var(--s8-r-sm);background:transparent;color:var(--s8-fg-3);cursor:pointer}
.result-close-btn:hover,.grm-close:hover{background:var(--s8-hover);color:#fff}
.result-body,.grm-body{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:var(--s8-3);padding:30px 26px 24px;text-align:center}
.s8-game-reset-icon{display:grid;place-items:center;width:48px;height:48px;border:1px solid var(--s8-gold-line);border-radius:50%;background:var(--s8-gold-tint);color:var(--s8-gold-fg)}
.s8-game-reset-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.grm-stripe{position:absolute;inset:0 0 auto;height:3px;background:var(--s8-up)}
.grm.loss .grm-stripe{background:var(--s8-down)}
.grm-bloom{display:none}
.grm-close svg{width:15px;height:15px}
.grm-badge{display:grid;place-items:center;width:58px;height:58px;border:1px solid var(--s8-up-line);border-radius:50%;background:var(--s8-up-tint);color:var(--s8-up)}
.grm.loss .grm-badge{border-color:var(--s8-down-line);background:var(--s8-down-tint);color:var(--s8-down)}
.grm-badge svg{width:26px;height:26px}
.grm-col{display:flex;flex-direction:column;align-items:center;gap:7px}
.grm-status{color:var(--s8-up);font-size:var(--s8-fs-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.grm.loss .grm-status{color:var(--s8-down)}
.grm-hero{color:var(--s8-up);font-size:clamp(40px,8vw,56px);font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.grm.loss .grm-hero{color:var(--s8-down)}
.grm-stats{display:grid;grid-template-columns:repeat(3,1fr);width:100%;overflow:hidden;border:1px solid var(--s8-line);border-radius:var(--s8-r);background:var(--s8-inset)}
.grm-stat{padding:12px 8px}.grm-stat+.grm-stat{border-left:1px solid var(--s8-line)}
.grm-stat .k{color:var(--s8-fg-3);font-size:var(--s8-fs-micro);font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.grm-stat .v{margin-top:5px;color:var(--s8-fg);font-size:var(--s8-fs-md);font-weight:600}
.grm-stat .v.long{color:var(--s8-up)}.grm-stat .v.short{color:var(--s8-down)}
.grm-actions{width:100%;margin-top:var(--s8-1)}
.grm-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s8-2);width:100%;height:var(--s8-h-lg);border:1px solid var(--s8-accent);border-radius:var(--s8-r-sm);background:var(--s8-accent);color:var(--s8-on-accent);font:inherit;font-weight:600;cursor:pointer}
.grm-btn:hover{background:var(--s8-accent-hi)}.grm-btn svg{width:16px;height:16px}

@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}}