:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",sans-serif;color:#17263d;background:#f5f7fb;font-size:13px}
*{box-sizing:border-box}
body{margin:0}
main{max-width:1440px;margin:auto;padding:12px}
h1{font-size:20px;margin:0}
h2{font-size:18px;margin:0 0 6px}
p{margin:6px 0}
header,.scene-heading,.tools,.chart-tools,.modes{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
header{justify-content:space-between;margin-bottom:10px}
button,select,input{font:inherit;color:inherit}
button,select{height:28px;font-size:12px;padding:0 8px;background:white;border:1px solid #b5c2d4;border-radius:3px;cursor:pointer}
button:hover{background:#edf3ff}
button[aria-pressed=true],button.active{background:#1c57a4;color:white;border-color:#1c57a4}
button:disabled{opacity:.45;cursor:default}
button:focus-visible,canvas:focus-visible,summary:focus-visible{outline:2px solid #176ee1;outline-offset:2px}
input{height:28px;border:1px solid #b5c2d4;border-radius:3px;padding:2px 6px;max-width:100%}
[hidden]{display:none!important}
#status{min-height:22px;color:#52627a}
#status.error{color:#b12239}
#game,.rules,#picker{background:#fff;border:1px solid #d7e0eb;border-radius:4px;padding:12px}
.scene-heading{justify-content:space-between;padding-bottom:9px}
.trading-desk{display:grid;grid-template-columns:minmax(0,1fr) 252px;border:1px solid #b5c2d4;background:#fff}
.chart-panel{scroll-margin-top:52px;min-width:0;padding:0 9px 6px}
.order-panel{min-width:0;padding:10px;border-left:1px solid #b5c2d4;background:#f2f5f9}
.panel-title{display:flex;align-items:center;justify-content:space-between;margin:-10px -10px 0;padding:7px 10px;background:#e3eaf3;border-bottom:1px solid #c7d2e1;font-weight:700}
.panel-title span{font-size:11px;font-weight:400;color:#52627a}
.order-group{padding:10px 0;border-top:1px solid #d1dae6}
.order-group h2{font-size:12px;margin:0 0 6px;color:#52627a}
.control-hint{font-size:11px;color:#52627a;margin:7px 0 0}
.score{display:grid;gap:9px;padding:12px 0;font-size:12px;font-variant-numeric:tabular-nums}
.score>span{display:flex;justify-content:space-between;gap:6px}
.score b{margin-left:4px;text-align:right;overflow-wrap:anywhere}
.positive{color:#b52335}
.negative{color:#1d58b0}
.chart-tools{padding:7px 0}
.legend{flex:1 1 100%;font-size:12px;color:#52627a}
#plot-wrap{position:relative}
#plot{display:block;width:100%;height:clamp(370px,calc(100dvh - 310px),560px);touch-action:none;cursor:crosshair}
#chart-readout{font-size:12px;min-height:42px;padding:5px 7px;background:#f6f8fc;border:1px solid #e3e8f1;font-variant-numeric:tabular-nums}
.pan{margin:6px 0}
#range-label{flex:1 1 240px;font-size:11px;color:#52627a;font-variant-numeric:tabular-nums}
#controls{padding:0}
.step-buttons{gap:4px}
.step-buttons button{padding:0 6px;white-space:nowrap}
.segmented{display:flex;gap:4px}
#game.is-complete #plot{height:680px}
#order-preview{color:#334b6b;font-size:12px;line-height:1.65;margin:0;padding:8px 0 12px;font-variant-numeric:tabular-nums}
#order-preview>div{display:grid;grid-template-columns:52px minmax(0,1fr);gap:8px;margin:4px 0}
#order-preview b{text-align:right;overflow-wrap:anywhere}
#order-note{display:block;font-size:11px;line-height:1.6;margin-top:6px;color:#52627a}
.advance{background:#eaf2ff;border-color:#8aaadd}
#finish{margin-top:8px;color:#a52f36}
.custom{font-size:12px;margin-top:8px}
.custom label{display:flex;align-items:center;gap:4px;margin-top:6px}
.custom input{width:74px}
summary{cursor:pointer}
.rules{margin-top:10px;color:#52627a}
.rules li{margin:7px 0}
.rules ul{padding-left:20px}
#game.is-complete .score{display:none}
#result{padding:14px 0 0}
#verdict{font-size:11px;font-weight:800;letter-spacing:.16em;color:#52627a;margin-bottom:3px}
#result[data-outcome=win] #verdict{color:#b52335}
#result h2{font-size:23px;line-height:1.3;letter-spacing:-.04em;margin:0 0 5px}
.result-tools{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:#52627a;gap:4px}
#cost-info{position:relative}
#cost-toggle{width:26px;height:26px;padding:0;font-size:16px;color:#52627a;background:transparent;border-color:transparent}
#cost-toggle:hover,#cost-toggle[aria-expanded=true]{background:#e3eaf3;border-color:#b5c2d4}
#cost-breakdown{position:absolute;top:100%;right:0;z-index:5;width:min(292px,calc(100vw - 56px));padding:10px;background:#fff;border:1px solid #b5c2d4;border-radius:4px;box-shadow:0 5px 18px #17263d24;color:#52627a;font-size:11px;line-height:1.6}
#cost-breakdown table{font-size:11px;margin:7px 0}
#cost-breakdown th,#cost-breakdown td{padding:4px;position:static}
#cost-breakdown p{margin:5px 0 0}
#comparison{display:grid;gap:0;margin:10px 0;font-variant-numeric:tabular-nums}
.contender{padding:10px;border:1px solid #cbd6e5;background:#fff;border-radius:3px;min-width:0}
.contender>div{display:flex;align-items:center;justify-content:space-between;gap:5px}
.contender b{font-size:14px}
.placing{font-size:11px;color:#63738b}
.contender.winner{border-color:#5279b0;box-shadow:inset 3px 0 #5279b0;background:#edf3ff}
.contender.winner .placing{font-weight:800;color:#1957a5}
.result-amount{display:block;font-size:26px;font-weight:800;line-height:1.4;letter-spacing:-.045em;overflow-wrap:anywhere}
.versus{justify-self:center;font-size:10px;font-weight:900;letter-spacing:.1em;color:#63738b;line-height:19px}
.result-gap{display:grid;gap:2px;padding:10px 0;border-top:1px solid #c7d2e1;border-bottom:1px solid #c7d2e1}
.result-gap span{font-size:12px;color:#52627a}
.result-gap strong{font-size:25px;font-weight:850;letter-spacing:-.04em;line-height:1.3;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
#joke{font-size:14px;line-height:1.6;margin:12px 0 3px}
#result small,#history{color:#52627a;font-size:11px}
#history{margin-top:12px}
#review-link{display:inline-block;margin-top:6px;font-size:12px}
#trades{margin-top:12px}
#trades summary{margin-bottom:7px}
.table-scroll{overflow:auto;max-height:360px}
table{width:100%;border-collapse:collapse;font-size:12px;font-variant-numeric:tabular-nums}
th,td{padding:6px 8px;text-align:right;border-bottom:1px solid #e3e8f1;white-space:nowrap}
th{position:sticky;top:0;background:#f5f7fb}
th:first-child,td:first-child{text-align:left}
tbody tr{cursor:pointer}
tbody tr.selected{background:#e5effe}
td button{border:0;padding:0;height:24px;color:#1957a5}
#picker{margin-bottom:10px}
#search{width:230px}
#scene-list{max-height:260px;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:4px;margin-top:8px}
#scene-list button{height:auto;min-height:28px;text-align:left;white-space:normal}
#coverage{color:#52627a;font-size:12px}
a{color:#1957a5}
@media(min-width:1100px){.trading-desk{grid-template-columns:minmax(0,1fr) 280px}
.legend{flex-basis:auto}
#chart-readout{min-height:34px}
}

@media(max-width:759px){.result-amount{font-size:28px}
.trading-desk{grid-template-columns:minmax(0,1fr)}
.order-panel{border-left:0;border-top:1px solid #b5c2d4}
.score{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:14px}
.score>span{display:block}
.score b{display:block;text-align:left;margin:2px 0 0}
#controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px}
.order-group{min-width:0}
#order-preview{grid-column:1/-1;min-height:0;padding:5px 0 10px}
#controls>.order-group:nth-of-type(3){grid-column:1/-1}
#finish{grid-column:1/-1;justify-self:start}
.custom{margin-top:6px}
#plot{height:360px}
}

@media(max-width:600px){main{padding:8px}
#game,#picker,.rules{padding:8px}
header{gap:8px}
h1{font-size:18px}
.scene-heading{font-size:12px}
.chart-panel{padding:0 5px 5px}
#chart-readout{min-height:58px}
.rules{font-size:12px}
.segmented{gap:3px}
.segmented button{padding:0 6px}
.order-panel{padding:8px}
.panel-title{margin:-8px -8px 0;padding:7px 8px}
#controls{column-gap:8px}
}

@media(max-width:440px){#controls{display:block}
.order-group h2{margin-bottom:5px}
.order-group{padding:8px 0}
.segmented{flex-wrap:wrap}
#order-preview{padding:4px 0 8px;min-height:0}
}

/* Scope the shared drawing controls to the compact quiz toolbar. */
#chart-tools .drawing-tools{margin-left:auto}
#chart-tools .drawing-tools .drawing-button{width:26px;height:26px;min-height:26px;padding:4px;border-radius:3px}
#chart-tools .drawing-button svg{width:16px;height:16px}
#chart-tools .drawing-menu{top:30px;width:222px;padding:7px;border-radius:4px;color:#334b6b;border-color:#b5c2d4}
#chart-tools .drawing-tools .drawing-button[aria-pressed=true]{background:#e3edfc;color:#1957a5;border-color:#8aaadd}
#chart-tools .drawing-picker{height:26px;min-height:26px;padding:2px 4px}
#chart-tools .drawing-help p{font-size:11px;padding:8px}

.legend .buy{color:#c93648}.legend .sell{color:#2563c4}

.legend .series-key{white-space:nowrap}