:root{color-scheme:dark;--bg:#101923;--panel:#17232f;--line:#2e4050;--text:#eff4f8;--muted:#a6b8c8;--green:#8be4b0;font-family:Inter,"Segoe UI",sans-serif;font-size:14px}
body.classroom-join #entry{max-width:560px;grid-template-columns:1fr}body.classroom-join #entry>section:has(#hostForm){display:none}body.classroom-join #entry>.panel{padding:24px;gap:16px}
body.classroom-setup #entry{max-width:680px;grid-template-columns:1fr;margin:16px auto;flex:1;align-content:start}body.classroom-setup #entry>section:first-child{display:none}body.classroom-setup #entry>.panel{padding:24px;gap:18px}body.classroom-setup #entry h2{font-size:26px}body.classroom-setup #entry p{line-height:1.6}body.classroom-setup #hostForm{gap:12px}body.classroom-setup #message{max-width:680px;width:100%;margin:4px auto}
*{box-sizing:border-box}body{margin:0;height:100dvh;padding:12px;display:flex;flex-direction:column;gap:10px;background:var(--bg);color:var(--text);overflow:hidden}h1,h2,p{margin:0}h1{font-size:20px}h1 small{font-size:12px;color:var(--muted);display:block}h2{font-size:17px}button,input,select{font:inherit}button,a,input,select{touch-action:manipulation}button,a{cursor:pointer}button,input,select{border:1px solid var(--line);border-radius:6px;background:#1c2a38;color:var(--text);padding:8px 12px;min-height:36px}button:disabled{opacity:.45;cursor:not-allowed}input,select{width:100%;min-width:0}.primary{background:var(--green);color:#10251a;font-weight:700}a{color:var(--green)}:focus-visible{outline:2px solid #f5ca81;outline-offset:2px}[hidden]{display:none!important}.topbar,.brand,.actions,.room-bar,.room-bar>div{display:flex;align-items:center;gap:12px}.topbar,.room-bar{justify-content:space-between}.brand{min-width:0}.panel{padding:16px;background:var(--panel);border:1px solid var(--line);border-radius:10px;min-width:0;min-height:0}.muted{color:var(--muted);font-size:12px}#message{font-size:13px;min-height:18px;color:#f5ca81;flex-shrink:0}#entry{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:880px;width:100%;margin:auto;overflow:auto}#entry section{display:flex;flex-direction:column;gap:12px}form{display:grid;gap:8px}#room{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px}.room-bar{padding:10px 16px}.room-bar>div{flex-wrap:wrap;gap:4px 12px}#code{letter-spacing:.12em;font-size:23px;color:var(--green)}#phase{font-size:12px}#clock{font-size:26px;font-variant-numeric:tabular-nums}#hostControls{display:flex;flex-wrap:wrap;gap:8px}.news{display:flex;align-items:center;gap:10px;min-height:40px}.news p{font-size:12px}.room-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;flex:1;min-height:0}.room-grid>.panel{display:flex;flex-direction:column;gap:10px}.scroll{overflow:auto;min-height:0;flex:1;overscroll-behavior:contain}.stock-row,.leader-row,.position-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 8px;border-bottom:1px solid var(--line);width:100%;text-align:left}.stock-row{border-radius:0;background:none}.stock-row[aria-pressed=true]{background:#294458}.stock-row small{display:block;color:var(--muted)}.leader-row.mine{background:#294458}.leader-row small{display:block;color:var(--muted)}.leader-row button{font-size:11px;padding:4px 6px;min-height:28px}#chart{width:100%;height:100px;flex-shrink:1;min-height:40px}#price{font-size:24px}#balance,#position,#tradeStatus{font-size:12px}#tradeForm .actions button{flex:1}#positions{font-size:12px}.tabs{display:none}dialog{padding:0;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--text);width:min(520px,calc(100% - 24px));max-height:90dvh}dialog::backdrop{background:#060e19dd}.dialog-content{padding:24px;display:grid;gap:16px}.dialog-content p{line-height:1.5}.actions{flex-wrap:wrap}
@media(max-width:850px){body{padding:8px;gap:8px}.tabs{display:flex;gap:6px}.tabs button{flex:1;padding:6px}.tabs button[aria-pressed=true]{background:#294458}.room-grid{display:block}.room-grid>[data-panel]{display:none;height:100%}.room-grid[data-view=market]>[data-panel=market],.room-grid[data-view=trade]>[data-panel=trade],.room-grid[data-view=leaderboard]>[data-panel=leaderboard]{display:flex}.room-bar{gap:8px;padding:8px}.room-bar>div{gap:2px 8px}#code{font-size:19px}#roomMenu{font-size:11px;padding:6px}#clock{font-size:23px}#roomNote{font-size:11px}#hostControls button{font-size:11px;min-height:30px;padding:5px 8px}#entry{grid-template-columns:1fr}input,select{font-size:16px}#chart{height:64px}.room-grid>.panel{padding:12px;gap:8px}}
@media(max-height:600px){body{gap:5px}.topbar h1{font-size:16px}.topbar h1 small{display:none}#room{gap:5px}#roomNote{display:none}.news{min-height:28px}.news p{font-size:11px}.room-bar{padding:5px 8px}.panel{padding:10px}#chart{height:40px;min-height:20px}.ticket{overflow:auto}.room-grid>.panel{gap:5px}}
#roomTour { inset:0; margin:0; width:100vw; max-width:none; height:100dvh; max-height:none; border:0; background:transparent; overflow:hidden; }
#roomTour::backdrop { background:#060e19b8; }
#roomTourHighlight { position:fixed; border:2px solid #8be4b0; border-radius:8px; pointer-events:none; }
#roomTourCard { position:fixed; width:min(420px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); overflow:auto; border:1px solid var(--line); border-radius:12px; padding:20px; background:var(--panel); display:grid; gap:14px; }
#roomTourCard p { line-height:1.5; margin-top:8px; }
#roomTourCard .actions { justify-content:space-between; }
@media(max-width:450px) { .topbar .actions { gap:6px; } .topbar button,.topbar a { font-size:11px; } .topbar h1 { font-size:16px; } }
.topbar { flex-wrap:wrap; }
.topbar .actions { flex-wrap:wrap; }
@media(max-width:600px) { .topbar .actions { gap:8px; } .room-bar { flex-wrap:wrap; } #copyInvite { font-size:11px; padding:6px; } }
/* Keep consent checkboxes compact beside their explanatory label. */
input[type="checkbox"], input[type="radio"] { width: 1.1rem; height: 1.1rem; min-height: 0; margin: 0 0.5rem 0 0; vertical-align: middle; }

.room-bar.panel{display:flex;flex-direction:column;align-items:stretch;gap:12px;padding:16px;flex-shrink:0}.room-bar .room-overview{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}.room-bar .room-identity,.room-bar .room-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.room-bar #clock{font-size:18px;border-left:1px solid var(--line);padding-left:14px;margin-left:4px}.room-bar #hostControls{border-top:1px solid var(--line);padding-top:12px;gap:8px}.room-bar #roomNote{line-height:1.5}.room-bar #phase{color:var(--muted)}
@media(max-width:850px){.room-bar.panel{padding:12px;gap:8px}.room-bar .room-identity,.room-bar .room-actions{gap:8px}.room-bar #clock{font-size:16px;padding-left:8px}.room-bar #hostControls{padding-top:8px}.room-bar #hostControls button{min-height:34px}.room-bar .room-actions{margin-left:auto}}
@media(max-height:600px){.room-bar.panel{padding:8px;gap:6px}.room-bar #hostControls{padding-top:6px}}

/* Shared-market dashboard: same account/quote/ticket hierarchy as solo play. */
.account-summary{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;flex-shrink:0}.account-summary>div{border:1px solid var(--line);border-radius:10px;background:var(--panel);padding:12px 16px;display:grid;gap:6px;min-width:0}.account-summary span{font-size:11px;color:var(--muted)}.account-summary strong{font-size:clamp(17px,1.4vw,25px);font-variant-numeric:tabular-nums}.dashboard-eyebrow{font-size:10px;font-weight:700;letter-spacing:.12em;color:#8be4b0}.room-grid{grid-template-columns:minmax(220px,.85fr) minmax(350px,1.8fr) minmax(260px,1fr);grid-template-rows:minmax(240px,1.5fr) minmax(150px,1fr);grid-template-areas:"market chart trade" "market holdings ranks"}.room-grid .market{grid-area:market}.room-grid .research{grid-area:chart}.room-grid .ticket{grid-area:trade;overflow:auto}.room-grid .holdings{grid-area:holdings}.room-grid .board{grid-area:ranks}.stock-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.stock-heading>div{display:grid;gap:6px}.stock-symbol{padding:6px 10px;border:1px solid var(--line);border-radius:6px;color:#aebfcf;font-size:12px}.stock-quote{display:flex;align-items:baseline;gap:14px}.room-grid #price{font-size:clamp(28px,2.4vw,42px)}#stockChange{font-size:13px}.room-chart{margin:0;min-height:70px;flex:1;display:flex;flex-direction:column;gap:8px}.room-grid #chart{height:100%;width:100%;min-height:50px;flex:1;overflow:visible}.room-chart figcaption{display:flex;justify-content:space-between;gap:12px;font-size:11px;color:var(--muted)}.room-grid .panel{padding:18px}.room-grid #balance{padding:10px 0;border-bottom:1px solid var(--line);line-height:1.6}.room-grid #tradeForm{gap:9px}.room-grid #tradeForm small{color:var(--muted);line-height:1.5}.room-grid #tradeForm button{min-height:40px}.room-grid #positions:empty::after{content:"No positions yet. Your shares will appear here after a trade.";display:block;padding:12px 0;color:var(--muted);font-size:13px;line-height:1.5}.room-grid #playerOrders:empty::after{content:"No orders yet.";display:block;color:var(--muted);font-size:12px}.room-grid .stock-row{padding:14px 10px;min-height:54px}.room-grid .stock-row small{margin-top:4px}.room-grid h3{font-size:13px;margin:16px 0 10px}.room-grid .position-row{font-size:13px;line-height:1.5}.room-grid #marketState{line-height:1.4}.value-up{color:#8be4b0}.value-down{color:#ff9292}
@media(min-width:1800px){.room-grid{grid-template-columns:minmax(280px,.8fr) minmax(600px,2.2fr) minmax(320px,1fr)}.room-grid .panel{padding:24px}.room-grid .stock-row{font-size:16px;min-height:64px}.room-grid h2{font-size:21px}}
@media(max-width:1000px){.room-grid{display:block}.tabs{display:flex;gap:4px}.tabs button{flex:1;min-width:0;padding:7px 4px;font-size:12px}.tabs button[aria-pressed=true]{background:#294458}.room-grid>[data-panel]{display:none;height:100%}.room-grid[data-view=market]>[data-panel=market],.room-grid[data-view=chart]>[data-panel=chart],.room-grid[data-view=trade]>[data-panel=trade],.room-grid[data-view=holdings]>[data-panel=holdings],.room-grid[data-view=leaderboard]>[data-panel=leaderboard]{display:flex}.account-summary{gap:6px;grid-template-columns:repeat(5,minmax(0,1fr))}.account-summary>div{padding:8px}.account-summary span{font-size:10px}.account-summary strong{font-size:14px}.room-grid .panel{padding:14px}.room-grid .research{overflow:auto}.room-grid #chart{min-height:80px}}
@media(max-width:500px){.account-summary{grid-template-columns:repeat(3,minmax(0,1fr))}.account-summary>div:nth-child(4),.account-summary>div:nth-child(5){display:none}.room-grid #price{font-size:28px}}
@media(max-height:700px){.account-summary>div{padding:7px 10px}.account-summary strong{font-size:16px}.room-grid{grid-template-rows:minmax(170px,1.5fr) minmax(90px,1fr)}.room-grid .panel{padding:12px;gap:7px}.room-bar.panel{padding:8px;gap:6px}.room-bar #roomNote{display:none}.room-grid #price{font-size:28px}}

.room-chart{position:relative}.chart-scale{position:absolute;left:0;top:5px;bottom:30px;display:flex;flex-direction:column;justify-content:space-between;font-size:11px;color:var(--muted);pointer-events:none}
@media(min-width:1001px) and (min-height:701px){.room-grid{grid-template-rows:minmax(280px,2fr) minmax(120px,1fr)}body:has(#room:not([hidden])) .site-header-inner{min-height:68px;padding:8px 0}.room-bar.panel{padding:12px;gap:8px}}
@media(max-height:500px) and (min-width:600px){body:has(#room:not([hidden])) .site-header-inner{display:flex;min-height:48px;padding:4px 0;gap:16px}body:has(#room:not([hidden])) .site-menu-toggle{margin-left:auto}#accountSummary{display:none}.room-bar.panel{padding:6px;gap:4px}}

#newSession{display:inline-flex;align-items:center;padding:8px 12px;min-height:36px;border:1px solid var(--green);border-radius:6px;text-decoration:none;font-weight:700}

/* Traders follow the solo layout; instructors supervise the shared room. */
.room-grid .market-wire{grid-area:news;display:flex;flex-direction:column;align-items:stretch;position:relative;overflow:auto;min-height:0}
.market-wire .reporter-portrait{align-self:flex-end;flex-shrink:0}.market-wire #headline{font-size:14px;line-height:1.6}
.quick-shares{display:flex;flex-wrap:wrap;gap:6px}.quick-shares button{flex:1;font-size:11px;padding:6px}
#monitorSummary{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(min-width:1001px){
 #room[data-role=trader] .room-grid{grid-template-columns:minmax(230px,1fr) minmax(360px,1.25fr) minmax(280px,1fr);grid-template-rows:minmax(130px,1fr) minmax(100px,.7fr) minmax(240px,1fr);grid-template-areas:"market chart holdings" "market chart news" "market trade ranks"}
 #room[data-role=trader] .research{border-bottom-left-radius:0;border-bottom-right-radius:0}
 #room[data-role=trader] .ticket{border-top-left-radius:0;border-top-right-radius:0}
 #room[data-role=monitor] .room-grid{grid-template-columns:minmax(200px,.7fr) minmax(350px,1.3fr) minmax(320px,1.1fr);grid-template-rows:minmax(180px,1fr) minmax(150px,.7fr);grid-template-areas:"market chart ranks" "market news ranks"}
 #room[data-role=monitor] .market-wire .reporter-portrait{position:absolute;right:16px;top:12px}#room[data-role=monitor] .market-wire #headline{margin-right:100px}
}
@media(max-width:1000px){.room-grid .market-wire{display:none}.room-grid[data-view=news]>[data-panel=news]{display:flex;height:100%}}
@media(max-height:700px) and (min-width:1001px){#room[data-role=trader] .room-grid{grid-template-rows:minmax(65px,1fr) minmax(60px,.6fr) minmax(160px,1fr)}}

@media(min-width:1001px){
 #room[data-role=trader] .room-grid{grid-template-rows:minmax(100px,1fr) minmax(150px,1fr) minmax(270px,1.5fr)}
 #room[data-role=trader] .ticket>.dashboard-eyebrow,#room[data-role=trader] #ticketTitle,#room[data-role=trader] #balance{display:none}
 #room[data-role=trader] .ticket{padding:12px;gap:6px}#room[data-role=trader] #tradeForm{gap:5px}
 #room[data-role=trader] #tradeForm small{font-size:11px}#room[data-role=trader] #tradeForm button{min-height:32px}
 .market-wire .reporter-portrait{position:absolute;right:12px;top:12px}.market-wire h2{padding-right:75px}.market-wire #headline{margin-right:75px;margin-top:10px;flex-shrink:0}.market-wire>p:last-child{display:none}
}
@media(max-height:700px) and (min-width:1001px){#room[data-role=trader] .room-grid{grid-template-rows:minmax(65px,1fr) minmax(80px,1fr) minmax(180px,1.6fr)}}
.site-editions a[aria-disabled=true]{cursor:default}

.speed-controls{display:grid;grid-template-columns:minmax(0,1fr) 90px;gap:12px;align-items:center}.speed-controls input[type=range]{accent-color:var(--green);padding:0;min-height:44px}#speedReadout{color:var(--green);font-weight:700}

.chart-inspection{position:absolute;top:0;right:0;z-index:2;background:#10212e;border:1px solid #f5ca81;border-radius:6px;padding:7px 10px;font-size:12px;pointer-events:none}#chart{cursor:crosshair}

#leaderGraphPanel{flex:0 1 auto;min-height:0;overflow:auto}#leaderGraph{display:block;width:100%;max-height:240px}#leaderGraphLegend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:11px;max-height:72px;overflow:auto}#room[data-role=monitor] .board #leaderboard{min-height:90px}

.portfolio-stock{flex:1;min-width:0;text-align:left;background:transparent;border:0;padding:4px;line-height:1.5}.portfolio-actions{display:flex;gap:6px;flex-wrap:wrap}.portfolio-actions button{padding:6px 9px;min-height:32px}.portfolio-actions [data-side=buy]{color:var(--green)}.portfolio-actions [data-side=sell]{color:#ff9292}

.trade-preview{display:grid;gap:5px;padding:10px 12px;border:1px solid var(--line);border-radius:6px;margin:8px 0;font-size:12px;line-height:1.5}.trade-preview p{margin:0}.trade-preview small{color:var(--muted)}

details.advanced-options { border:1px solid #344350; border-radius:10px; padding:12px; margin:12px 0; }
details.advanced-options summary { cursor:pointer; font-weight:600; }
#roomReadiness { border-top:1px solid #344350; margin-top:12px; }
#readinessPlayers { display:flex; flex-wrap:wrap; gap:8px 24px; padding-left:20px; }
#classroomRecap { margin:16px; }

#rejoinCodes{display:grid;gap:20px;margin:8px 0 24px}#rejoinCodes section{display:grid;gap:10px;padding:16px;border:1px solid var(--line);border-radius:10px;min-width:0}#rejoinCodes .actions{display:flex;flex-wrap:wrap;gap:10px}#rejoinCodes input{width:100%;min-width:0}#rejoinDialog .dialog-content{gap:16px}.room-menu-tabs{display:flex;gap:10px;margin-bottom:18px;border-bottom:1px solid var(--line);padding-bottom:12px}.room-menu-tabs [aria-selected="true"]{background:#294458;border-color:var(--green)}#roomSettingsPanel p{line-height:1.6}#roomSettingsForm{display:grid;gap:10px}

.order-options{display:grid;gap:10px}.order-type-picker{display:grid;gap:8px}.order-type-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.order-type-buttons button{min-width:0;min-height:40px;padding:8px 10px}.order-type-buttons button[aria-pressed="true"]{background:#8be4b0;color:#10251d;border-color:#8be4b0;font-weight:700}.order-type-buttons button:focus-visible{outline:2px solid #f5ca81;outline-offset:2px}

/* Consistent menu spacing, independent of the compact trading dashboard. */
:root { --menu-padding: 28px; --menu-gap: 16px; }
dialog:not(#roomTour) { max-height:calc(100dvh - 32px); overflow:auto; }
dialog .dialog-content { padding:var(--menu-padding); gap:var(--menu-gap); line-height:1.55; }
dialog .dialog-content > h2:first-child { margin-top:0; }
dialog .dialog-content :is(input,select,textarea) { max-width:100%; }
dialog :is(.actions,.dialog-actions) { gap:12px; flex-wrap:wrap; }
dialog :is(.actions,.dialog-actions) button { min-height:40px; }
dialog :is(form,fieldset) { min-width:0; }
dialog label { line-height:1.5; }
dialog label[for] { display:block; margin-bottom:6px; }
dialog :is(input,select,textarea) + label[for] { margin-top:10px; }
dialog details[open] > summary { margin-bottom:16px; }
dialog details > summary { padding:8px 0; }
dialog :is(p,small) { line-height:1.6; }
@media(max-width:600px) {
  :root { --menu-padding:20px; --menu-gap:14px; }
  dialog:not(#roomTour) { width:calc(100% - 24px); max-height:calc(100dvh - 24px); }
  dialog :is(.actions,.dialog-actions) { gap:10px; }
}

/* Setup forms and nested menu sections need their own layout gaps. */
body #entry > .panel { padding:var(--menu-padding); gap:20px; flex-shrink:0; }
#entry :is(#hostForm,#joinForm) { gap:12px; }
#entry label[for], .instructor-main label[for] { display:block; line-height:1.5; }
#entry :is(input,select) + label[for] { margin-top:8px; }
#entry :is(#instructorMode,.advanced-options), #roomInfoPanel, #roomSettingsPanel, #publicInvite { display:grid; gap:12px; min-width:0; }
#entry details.advanced-options { display:block; padding:16px; margin:8px 0; }
#entry details.advanced-options > summary { line-height:1.5; cursor:pointer; }
#entry details.advanced-options[open] > summary { margin-bottom:20px; }
#entry details.advanced-options > label { display:block; margin:18px 0 8px; }
#entry details.advanced-options > :is(p,output) { display:block; margin-top:10px; line-height:1.6; }
#entry #instructorMode > p { margin-top:4px; line-height:1.6; }
#entry label:has(input[type=radio]), .instructor-main label:has(input[type=checkbox]) { display:flex; align-items:flex-start; gap:10px; padding:6px 0; line-height:1.6; }
#entry label input[type=radio], .instructor-main label input[type=checkbox] { flex:0 0 16px; width:16px; height:16px; min-height:16px; margin:3px 0 0; }
#entry .actions { margin-top:8px; gap:12px; }
.instructor-main .panel { padding:var(--menu-padding); gap:20px; }
.instructor-main form { gap:12px; }
.instructor-main details[open] > summary { margin-bottom:16px; }
#roomInfoPanel > :is(button,.actions), #roomSettingsPanel > form { margin-top:4px; }
.room-menu-tabs { flex-wrap:wrap; }
#roomTourCard { padding:var(--menu-padding); gap:16px; }

/* Finished-session reflections must not shrink over the dashboard below. */
#classroomRecap { margin:0; flex:0 0 auto; max-height:28dvh; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; padding:20px; line-height:1.6; }
#classroomRecap > * { margin:0 0 12px; }
#classroomRecap > :last-child { margin-bottom:0; }
#classroomRecap ol { padding-left:24px; }
#classroomRecap li + li { margin-top:10px; }
@media(max-width:1000px), (max-height:650px) {
  #room { overflow-y:auto; }
  #room > :is(.room-bar,.account-summary,.tabs,.news) { flex-shrink:0; }
  #room > .room-grid { flex:1 0 320px; min-height:320px; }
  #classroomRecap { max-height:240px; max-height:min(240px,32dvh); }
}