body{font-family:Arial,sans-serif;color:#000;background:#c9dcf0;margin:0;padding:0;font-size:15px}
.wrap{max-width:940px;margin:0 auto;padding:14px 16px 60px}
.wrap.narrow{max-width:700px}
.hidden{display:none !important}
.card{border:1px solid #000;background:#fff;padding:12px;margin-bottom:12px}
.card.t{background:#f2f2f2}
.cardhead{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.ctrls{display:flex;gap:5px;align-items:center;margin-left:auto;flex-wrap:wrap}
h1{font-size:22px;margin:0}h2{font-size:16px;margin:0}
h3{font-size:14px;margin:18px 0 6px;border-bottom:1px solid #ccc;padding-bottom:3px}
h4{font-size:13px;margin:12px 0 5px}
button{font-family:Arial,sans-serif;font-size:13px;padding:4px 9px;border:1px solid #000;background:#fff;cursor:pointer}
button:hover{background:#f2f2f2}
button.act{background:#d4e4f7}button.del{background:#f7d6d3}button.edit{background:#d6ecd8}
button.assign{background:#faeec2}button.fun{background:#fdf3cf}button.close{background:#000;color:#fff}
button.out{background:#e2e2e2}button.login{background:#1565d8;color:#fff;font-weight:bold}
button.submit{background:#cfe4fa;color:#000}
button.twoline{white-space:pre-line;line-height:1.35;padding:8px 11px;text-align:center}
button:disabled{background:#e8e8e8;color:#999;border-color:#aaa;cursor:not-allowed}
input,select,textarea{font-family:Arial,sans-serif;font-size:13px;padding:4px;border:1px solid #000;box-sizing:border-box;width:100%;background:#fff}
input[type=checkbox],input[type=radio]{width:auto}
.muted{color:#666;font-size:12px}
table{border-collapse:collapse;width:100%;font-size:13px;background:#fff}
th,td{border:1px solid #000;padding:4px 7px;text-align:left;vertical-align:top}
td.mid,th.mid{vertical-align:middle}
th{background:#eee}
.sitetitle{font-size:24px;font-weight:bold;-webkit-text-stroke:3px #fff;paint-order:stroke fill}
.siteicon{width:34px;height:34px;border:1px solid #000;background:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:10px;color:#888}
.avatar{width:38px;height:38px;border:1px solid #000;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:16px;background:#fff;object-fit:cover;overflow:hidden}
img.avatar{padding:0}
.chip{border:1px solid #000;padding:1px 8px;font-weight:bold;font-size:13px;background:#fff;white-space:nowrap}
.cnt{font-size:15px;font-weight:bold;white-space:nowrap;margin-right:10px}
.tag{display:inline-block;border:1px solid #000;background:#eee;padding:1px 8px;font-size:12px;margin-right:4px;cursor:pointer}
.tag.on{background:#000;color:#fff}
.row{border:1px solid #000;background:#fff;padding:8px 11px;margin-bottom:8px;display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.wsrow{border:1px solid #000;background:#fff;padding:9px 11px;margin-bottom:6px;display:flex;align-items:center;gap:10px;cursor:pointer}
.wsrow:hover{background:#f4f4f4}
.wsrow.open{background:#eef3fb;border-width:2px}
.box{width:28px;height:28px;border:2px solid #000;display:inline-flex;align-items:center;justify-content:center;font-size:18px;background:#fff;flex:none}
.box.on{background:#0a7d1b;color:#fff}
.num{font-weight:bold;flex:none}.wstitle{flex:1}
.tabs{display:flex;border-bottom:2px solid #000;margin:14px 0 16px;flex-wrap:wrap}
.tab{padding:7px 11px;border:1px solid #000;border-bottom:none;background:#fff;margin-right:3px;font-size:13px;cursor:pointer}
.tab.on{background:#000;color:#fff;font-weight:bold}
.pan{display:none}.pan.on{display:block}
.fxrow{display:flex;gap:4px;align-items:center;margin-top:3px;flex-wrap:wrap}
.fxrow select{flex:1;width:auto;min-width:90px}.fxrow input[type=number]{width:70px}
.lab{font-size:11px;color:#666;margin:6px 0 2px;font-weight:bold}
.tb{border:1px solid #000;border-bottom:none;background:#eee;padding:2px 5px}
.tb button{font-size:12px;padding:1px 7px}
.rich{border:1px solid #000;padding:6px;min-height:50px;background:#fff}
.rich:empty:before{content:attr(data-ph);color:#999}
.word{border:2px solid #000;background:#fdf3cf;padding:1px 8px;font-weight:bold}
.banner{border:2px solid #1565d8;background:#eaf2fd;padding:8px 11px;font-size:13px;margin-bottom:10px}
.err{border:2px solid #c0261a;background:#fdf0ef;padding:8px 11px;font-size:13px;margin-bottom:10px}
.ok{border:2px solid #0a7d1b;background:#eef6ef;padding:8px 11px;font-size:13px;margin-bottom:10px}
.frame{border:1px solid #000;background:#fafafa;margin:6px 0}
.frame iframe{width:100%;height:280px;border:0;display:block}
.frameh{background:#eee;padding:3px 8px;font-size:12px;display:flex;justify-content:space-between;align-items:center}
/* ---- game ---- */
.hdrbtn{border:1px solid #000;background:#d6e6f7;font-size:14px;font-weight:bold;padding:0 10px;height:30px;display:inline-flex;align-items:center;cursor:pointer}
.hdrbtn.bag{font-size:19px;padding:0 9px}
.daychip{border:1px solid #000;background:#eee;font-size:14px;font-weight:bold;padding:0 10px;height:30px;display:inline-flex;align-items:center;margin-left:8px;cursor:pointer}
.daychip:hover{background:#ddd}
.ib{border:1px solid #000;background:#fff;padding:0;cursor:pointer;display:flex;flex-direction:column;width:100%;font-family:Arial}
.ib:hover{background:#f4f4f4}
.ib .pic{background:#e8e8e8;border-bottom:1px solid #000;display:flex;align-items:center;justify-content:center;color:#888;font-size:11px;height:74px;overflow:hidden}
.ib .pic img{width:100%;height:100%;object-fit:cover}
.ib .lbl{padding:5px 4px;font-size:12px;font-weight:bold;text-align:center}
.ib .eff{display:block;font-weight:normal;font-size:11px;color:#333;margin-top:2px}
.ib.big .pic{height:118px}
.ib.back{background:#e2e2e2}.ib.back .pic{background:#dcdcdc}.ib.back .lbl{font-size:17px}
.ib.locked{cursor:not-allowed}.ib.locked .pic{background:#111;color:#111}.ib.locked .lbl{color:#999}
.ib.again{background:#d4e4f7}.ib.again .pic{background:#c2d8f2}
/* The framed "where you are" box owns column 1; buttons fill 2 and 3,
   down one column then the other. */
.p3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;align-items:start}
.p3 .side{grid-column:1}
.p3 .btns{grid-column:2 / span 2;display:grid;grid-template-columns:1fr 1fr;gap:8px;
  grid-auto-flow:row}   /* left to right, then the next row — the pool's order */
.grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;align-items:start}
.grid .mid{grid-row:1 / span 2}
/* "you are here" — the framed centre slot */
.ib.here{border:4px solid #7a4a1e;background:#fdf6ef;cursor:default}
.ib.here:hover{background:#fdf6ef}
.ib.here .pic{background:#efe2d4;border-bottom-color:#7a4a1e}
.ib.here .lbl{color:#4a2c0c}
.titlebox{border:1px solid #000;background:#fff;margin-top:6px;padding:4px 6px}
.titlebox .t{font-size:12px;font-weight:bold;text-align:center;color:#4a2c0c}
/* Back sits below the framed centre, with room above it */
.backbtn{width:100%;margin-top:16px;padding:9px 0;font-size:16px;font-weight:bold;
  background:#d8d8d8;border:1px solid #000;cursor:pointer;font-family:Arial}
.backbtn:hover{background:#cbcbcb}
.detbtn{width:100%;margin-top:16px;padding:9px 0;font-size:16px;font-weight:bold;
  background:#d4e4f7;border:1px solid #000;cursor:pointer;font-family:Arial}
.detbtn.on{background:#000;color:#fff}
/* narrative text starts under the centre column */
.narr{border-top:1px solid #ccc;margin-top:12px;padding-top:10px;
  margin-left:calc(33.33% + 3px)}
/* counter + market bits */
.qty{display:flex;gap:5px;align-items:center;flex-wrap:wrap}
.qty input{width:66px}
button.go{background:#cbe8cf;font-weight:bold}
.gR{border-right:3px solid #000}
.ctr{text-align:center}
.tick{font-weight:bold;font-size:14px;letter-spacing:.5px}
.up{color:#0a7d1b;font-weight:bold}.down{color:#c0261a;font-weight:bold}
.chartwrap{border:1px solid #000;background:#fff;padding:10px;margin-top:10px}
.plot{display:flex;gap:10px}
.yaxis{display:flex;flex-direction:column;justify-content:space-between;font-size:10px;
  text-align:right;width:38px;height:110px;color:#444}
.bars{display:flex;align-items:flex-end;gap:3px;height:110px;flex:1;
  border-left:1px solid #000;border-bottom:1px solid #000;padding-left:4px}
.bcol{flex:1;display:flex;flex-direction:column;justify-content:flex-end;cursor:pointer}
.bar{width:100%;border:1px solid #000;min-height:1px}
.xaxis{display:flex;gap:3px;margin-left:48px;font-size:9px;color:#444;text-align:center}
.xaxis div{flex:1}
.ylab{font-size:11px;font-weight:bold;color:#444;margin-bottom:4px}
.p2{display:grid;grid-template-columns:1fr 2fr;gap:8px;align-items:start}
.p2 .content{display:grid;grid-template-rows:1fr 1fr;gap:8px;min-height:280px}
.p2 .txt{border:1px solid #000;padding:10px;background:#fff;overflow:auto}
.p2 .imgs{border:1px solid #000;padding:8px;background:#fff}
.imgrow{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.imgbox{background:#e8e8e8;border:1px solid #000;height:60px;display:flex;align-items:center;justify-content:center;color:#888;font-size:11px;overflow:hidden}
.imgbox img{width:100%;height:100%;object-fit:cover}
.nested{border:3px double #000;background:#f7f9fc;padding:10px;margin-top:10px}
.pager{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:8px}
.inv{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.islot{border:1px solid #000;background:#fafafa;display:flex;flex-direction:column;cursor:pointer}
.islot .p{background:#e8e8e8;height:50px;display:flex;align-items:center;justify-content:center;color:#888;font-size:11px;border-bottom:1px solid #000;overflow:hidden}
.islot .p img{width:100%;height:100%;object-fit:cover}
.islot .l{font-size:11px;text-align:center;padding:3px 2px;font-weight:bold}
.islot.empty{cursor:default}.islot.empty .p{background:#eee}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;z-index:200;padding:16px}
.modal.on{display:flex}
.modalbox{background:#fff;border:3px solid #000;padding:18px;max-width:460px;max-height:90vh;overflow:auto}
@media(max-width:620px){
 .p2{grid-template-columns:1fr}
 .grid{grid-template-columns:1fr 1fr}
 .grid .mid{grid-row:auto;grid-column:1 / span 2}
 .p3{grid-template-columns:1fr}
 .p3 .side,.p3 .btns{grid-column:1}
 .p3 .btns{grid-auto-flow:row}
 .narr{margin-left:0}
 .xaxis{margin-left:0}
}

/* ---- media sets ---- */
.media{border:1px solid #000;background:#fafafa;padding:6px;margin-top:6px;min-height:40px;
  display:flex;align-items:center;justify-content:center}
.media.frame{padding:0;display:block}
.media.err{display:block;border:2px solid #c0261a;background:#fdf0ef;font-size:13px;padding:8px 11px}
.mediacap{font-size:12px;color:#666;margin:4px 0 8px;text-align:center}
.thumb{border:1px solid #000;background:#e8e8e8;width:54px;height:40px;display:inline-flex;
  align-items:center;justify-content:center;color:#888;font-size:10px;overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.mcqpic{border:1px solid #000;padding:5px;text-align:center;cursor:pointer;background:#fff}
.mcqpic:hover{background:#f4f4f4}
.mcqpic.on{background:#eef3fb;border-width:2px}
.mcqpic img{width:100%;height:96px;object-fit:cover;display:block}
.mcqgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:8px}
@media(max-width:620px){ .mcqgrid{grid-template-columns:1fr 1fr} }

/* ---- pass 2: panels open below, not instead of, the page ---- */
.subbox{border:2px solid #000;background:#eef3fb;padding:11px;margin-top:12px}
.ib.open{border-width:3px;background:#eef3fb}
.ib.open .pic{background:#dde8f5}

/* ---- worksheet feedback ---- */
.fb{border:2px solid #000;background:#fdf3cf;padding:9px 11px;margin:10px 0;position:relative}
.fb .lab{margin-top:0;font-size:11px;color:#666;font-weight:bold;margin-bottom:4px}
button.fbx{position:absolute;top:5px;right:6px;border:1px solid #000;background:#fff;
  font-size:12px;line-height:1;padding:2px 7px;cursor:pointer}
.fblink{color:#666;font-size:12px;margin:8px 0 0;cursor:pointer;text-decoration:underline}
.fblink:hover{color:#000}

/* ---- parent view ---- */
.statbox{border:1px solid #000;padding:9px;text-align:center}
.statbox .n{font-size:22px;font-weight:bold}
table.shared4{table-layout:fixed}
table.shared4 th,table.shared4 td{overflow-wrap:break-word}
table.shared4 th:nth-child(1),table.shared4 td:nth-child(1){width:12.5%}
table.shared4 th:nth-child(2),table.shared4 td:nth-child(2){width:12.5%}
table.shared4 th:nth-child(3),table.shared4 td:nth-child(3){width:50%}
table.shared4 th:nth-child(4),table.shared4 td:nth-child(4){width:25%}
.pfb{border-left:3px solid #000;padding-left:8px;margin-top:7px;font-size:13px}

button.daybtn{font-size:14px;padding:9px 11px;font-weight:bold;line-height:1.3}
button.grey{background:#d8d8d8;color:#000}

/* ---- a button you can see but can not use ---- */
.ib.grey{background:#ededed;color:#999;cursor:not-allowed}
.ib.grey .pic{background:#e0e0e0;filter:grayscale(1);opacity:.5;color:#aaa}
.ib.grey .lbl{color:#999}
.ib.grey .eff{color:#aaa}

/* ---- worksheet sets ---- */
.sets{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
button.set{border:1px solid #000;background:#fff;padding:7px 14px;font-size:13px;
  cursor:pointer;font-family:Arial;text-align:center;min-width:74px}
button.set:hover{background:#f2f2f2}
button.set.on{background:#000;color:#fff;font-weight:bold}
.essaypick{display:inline-flex;align-items:center;margin-left:10px}
.essaypick select{width:auto;min-width:150px;font-weight:bold}
@media(max-width:620px){ button.set{flex:1 1 30%;min-width:0;padding:7px 4px} }

.slotnote{font-size:11px;color:#666;margin:3px 0 0}
.slotnote strong{color:#000}

.savefail{color:#c0261a;font-size:12px;font-weight:bold}

/* ---- word cards ---- */
.board{border:1px solid #000;background:#fafafa;padding:10px;min-height:64px;
  display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start;margin-top:6px}
.wc{border:1px solid #000;background:#fff;padding:6px 11px;font-size:15px;cursor:grab;
  box-shadow:2px 2px 0 #ccc;user-select:none}
.wc.held{background:#fdf3cf;box-shadow:3px 3px 0 #999;cursor:grabbing}

/* ---- stats behind the gear ---- */
table.gearbox{background:rgba(120,120,120,.13);margin-top:7px}
table.gearbox td{border-color:#999;color:#444}
button.gearbtn{border:1px solid #999;background:transparent;color:#777;font-size:13px;
  padding:1px 7px;margin-top:6px;cursor:pointer}

/* ---- resizable answer boxes ---- */
.rich{overflow:auto}
.grip{height:9px;border:1px solid #000;border-top:none;background:#e8e8e8;
  cursor:ns-resize;position:relative}
.grip:after{content:"";position:absolute;left:50%;top:3px;width:26px;height:3px;
  margin-left:-13px;border-top:1px solid #888;border-bottom:1px solid #888}
.grip:hover{background:#dcdcdc}

.sharedtag{display:inline-block;border:1px solid #000;background:#fdf3cf;
  padding:0 6px;font-size:10px;font-weight:bold;margin-left:6px;vertical-align:middle}

.prewrap{white-space:pre-wrap}

/* ---- pinboard ---- */
.pin{border:1px solid #000;background:#fafafa;position:relative;overflow:hidden;margin-top:9px;
  background-image:linear-gradient(#ececec 1px,transparent 1px),
    linear-gradient(90deg,#ececec 1px,transparent 1px);background-size:22px 22px;touch-action:none}
.pin .wc{position:absolute;border:1px solid #000;background:#fff;padding:4px 9px;font-size:13px;
  box-shadow:2px 2px 0 #ccc;user-select:none;white-space:nowrap;cursor:grab}
.pin .wc.sm{font-size:12px;padding:3px 7px}
.pin .wc.held{background:#fdf3cf;box-shadow:3px 3px 0 #999;z-index:5;cursor:grabbing}
.paste{display:flex;gap:6px;align-items:stretch;margin-top:10px}
.paste textarea{min-height:40px;font-size:14px;resize:none}

.catsub{text-align:center;margin:8px 0 0;font-size:13px;color:#444}
.catbar{display:flex;justify-content:center;align-items:center;gap:12px;margin:8px 0 2px}
.catname{font-weight:bold;font-size:15px}

/* ---- the band at the bottom ---- */
.sitefoot{border-top:1px solid #000;background:#e6e6e6;color:#333;padding:11px 14px;
  font-size:13px;text-align:center;margin-top:20px}
.sitefoot a{color:#000}

.panel{border:2px solid #000;background:#eef6ef;padding:11px;margin-top:10px}
.panel.blue{background:#eef3fb}

/* ---- reading an ending back ---- */
.endrow{border:1px solid #000;background:#fff;padding:8px 11px;margin-bottom:6px;
  display:flex;gap:10px;align-items:center}
.endrow.on{background:#eef3fb;border-width:2px}
.endicon{font-size:19px;flex:none;width:24px;text-align:center}
.endbox{border:2px solid #000;background:#fdf6ef;padding:12px;margin:0 0 8px}
.endbody{display:flex;gap:12px;margin-top:10px;flex-wrap:wrap}
.endpics{flex:0 0 160px;display:flex;flex-direction:column;gap:8px}
.endpics img{width:100%;border:1px solid #000;display:block}
.endtext{flex:1;min-width:220px}
@media(max-width:600px){ .endpics{flex:1 1 100%} }

.frameh{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.edittag{display:inline-block;border:1px solid #000;background:#fff;padding:0 5px;
  font-size:10px;font-weight:bold;margin-left:6px;vertical-align:middle}

/* ---- the editing toolbar ---- */
.tb{border:1px solid #000;border-bottom:none;background:#eee;padding:3px 5px;
  display:flex;gap:3px;flex-wrap:wrap;align-items:center}
.tb button{font-size:12px;padding:1px 7px}
.swmenu{display:flex;gap:3px;align-items:center;flex-wrap:wrap;background:#fff;
  border:1px solid #000;padding:3px;margin-left:4px}
.swmenu button.sw{border:1px solid #000}

.pill{display:inline-flex;align-items:center;gap:4px;border:1px solid #000;background:#eef3fb;
  padding:2px 4px 2px 8px;font-size:13px;margin:2px 4px 2px 0}
.pill button{border:none;background:none;padding:0 2px;cursor:pointer;font-size:13px}
.sug{border:1px solid #000;background:#fff;margin-top:2px;max-width:240px}
.sug div{padding:5px 8px;border-bottom:1px solid #eee;cursor:pointer}
.sug div:hover{background:#eef3fb}

/* a card you can throw away on its own */
.wc{position:relative}

.set{white-space:nowrap}

/* dots on a practice row */
.dots{display:flex;gap:5px;align-items:center;margin-right:10px}
.dot{width:15px;height:15px;border:2px solid #000;border-radius:50%;background:#fff;flex:none}
.dot.on{background:#000}
.dot.fade{background:#999;border-color:#999}
.box.tickable{cursor:pointer}
.box.tickable:hover{background:#eaf2fc}
.box.on.tickable:hover{background:#0a6b17}

/* a square whose work has been submitted for this piece */
button.set.done{background:#d9d9d9;color:#000}
button.set.on{background:#000;color:#fff;font-weight:bold}

/* the press counter, under a button's effects */
.ib .eff.lim{color:#777}

/* ---- the shop, as cards ---- */
.shopgrid{display:grid;gap:7px;margin-top:9px}
.shopcard{border:1px solid #000;background:#fff;display:flex;flex-direction:column}
.shoptop{display:flex;border-bottom:1px solid #000;height:66px}
.shoppic{flex:2;background:#e8e8e8;display:flex;align-items:center;justify-content:center;
  font-size:26px;overflow:hidden}
.shoppic img{max-width:100%;max-height:100%;object-fit:contain}
.shopnum{flex:1;display:flex;flex-direction:column;border-left:1px solid #000;min-width:32px}
.shopnum button{flex:1;border:none;background:#fff;font-size:11px;padding:0;min-height:0}
.shopn{flex:1;display:flex;align-items:center;justify-content:center;font-weight:bold;
  font-size:14px;border-top:1px solid #000;border-bottom:1px solid #000}
.shopname{padding:5px;font-size:12px;font-weight:bold;text-align:center;line-height:1.2;
  border-bottom:1px solid #000;flex:1}
button.shopgo{width:100%;background:#d4e4f7;font-weight:bold;font-size:12px;border:none;padding:6px 3px}
.shopcard.off button.shopgo{background:#ededed;color:#777}
.shopcard.off .shoppic{filter:grayscale(1);opacity:.55}
@media(max-width:620px){ .shopgrid{grid-template-columns:repeat(2,1fr) !important} }

/* =================== the console look (rounds 44–46) ===================
   Only you see the console, so it's built to be read: 16px, bold, everywhere —
   except anything showing a student's page or a student's own data, which
   keeps its normal look (.keep). Colours mean one thing each:
     grey = the person · purple = switches · green = the game
     blue = worksheets & archives · yellow = editing · orange = needs you  */
body.teacher .wrap, .con{font-size:16px}
body.teacher .wrap *, .con *{font-weight:bold}
body.teacher .wrap input, body.teacher .wrap select, body.teacher .wrap textarea,
body.teacher .wrap button, body.teacher .wrap table, body.teacher .wrap td, body.teacher .wrap th,
.con input, .con select, .con textarea, .con button, .con table, .con td, .con th{font-size:16px}
body.teacher .wrap .muted, .con .muted{font-size:14px;color:#444}
body.teacher .wrap h2, .con h2{font-size:19px}
body.teacher .wrap .keep, body.teacher .wrap .keep *, .con .keep, .con .keep *{font-weight:normal;font-size:revert}
/* stripes on long tables, so your eye doesn't slip a row */
body.teacher .wrap table tr:nth-child(even) > td, .con table tr:nth-child(even) > td{background:#f3f3ee}
/* bands */
.band{border:2px solid #000;padding:12px;margin-top:12px}
.band > h3{margin:0 0 10px;border:none;font-size:17px}
.b-who{background:#ececec} .b-sw{background:#efe6f8}
.b-game{background:#e3f3e3} .b-ws{background:#e3edfb}
.band table tr:nth-child(even) > td{background:rgba(0,0,0,.035)}
/* the student buttons, and the row of people waiting for you */
.who{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.who button{min-width:120px;padding:12px 14px;background:#fff6c2;text-align:left}
.who button small{display:block;font-size:12px;color:#555;margin-top:2px}
.waitrow{border:3px solid #000;background:#ffe3c4;padding:10px;margin-top:12px}
.waitrow h3{margin:0 0 8px;border:none;font-size:17px;letter-spacing:.3px}

/* =================== game: gains and losses, darker (round 46) =================== */
.ib .eff.up{color:#006064}
.ib .eff.dn{color:#8e0000}
.ib.grey .eff.up, .ib.grey .eff.dn{opacity:.55}

/* =================== the worksheet editor (rounds 44–46) =================== */
.wsinline{border:3px solid #000;margin:6px 0 14px;background:#fff}
.wsprevwrap{background:#c9dcf0;border-bottom:2px solid #000;position:relative}
.wsprevtag{position:absolute;top:5px;right:9px;font-size:10px !important;font-weight:bold !important;
  color:#456;letter-spacing:.5px;z-index:2}
iframe.wsprev{display:block;width:100%;height:420px;border:0;background:#c9dcf0}
.wsnav{display:flex;align-items:center;gap:8px;background:#ffef9e;padding:7px 10px;border-bottom:1px solid #000}
.wsnavmid{flex:1;text-align:center}
.wsdots{display:flex;gap:5px;justify-content:center;margin-top:4px}
.wsdots i{width:10px;height:10px;border-radius:50%;border:1px solid #000;background:#fff;display:inline-block;cursor:pointer}
.wsdots i.on{background:#000}
.wspane{background:#ffef9e;padding:12px 14px;min-height:240px}
.wspane .card{background:#fffdf2}
.wspin{position:sticky;bottom:0;z-index:40;background:#fff;border-top:3px solid #000;padding:9px 12px;
  display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.wspin .wspintitle{flex:1;min-width:160px}
.wspin .wsdirty{color:#9a6a00}
.b-list{background:#e3f3e3;border:2px solid #000;padding:8px;margin-top:8px}
input.titlein{border:1px solid transparent;background:transparent;width:100%;padding:4px 6px}
input.titlein:hover{border-color:#999;background:#fff}
input.titlein:focus{border-color:#000;background:#fff;outline:none}

/* =================== Sources: an EE spreadsheet =================== */
.sheetwrap{max-height:430px;overflow:auto;border:2px solid #000;margin-top:8px;background:#fff}
table.sheetgrid{border-collapse:collapse;width:auto}
table.sheetgrid th, table.sheetgrid td{border:1px solid #9a9a9a;padding:0;height:28px}
table.sheetgrid th{background:#e9e9e9;position:sticky;top:0;z-index:1}
table.sheetgrid .rn{background:#eee;color:#666;text-align:center;width:42px;font-size:12px}
table.sheetgrid input{border:none;width:100%;min-width:150px;height:27px;padding:2px 6px;background:transparent}
table.sheetgrid th input{font-weight:bold;background:#e9e9e9}
table.sheetgrid td input:focus, table.sheetgrid th input:focus{outline:2px solid #1565d8;background:#fff}
table.sheetgrid tr:nth-child(even) > td{background:#f6f6f1}

/* shop card: the number box first, then the picture (round 47) */
.shoptop .shopnum{order:-1;border-left:none;border-right:1px solid #000}

/* ---- the editor's one bar: under the preview, always in reach ---- */
.wsnav{position:sticky;top:0;z-index:30}
.wsacts{display:flex;gap:6px;align-items:center;margin-left:10px}
.wsacts .wsdirty{color:#9a6a00}

/* ---- inside a question: collapsed and colour-coded ----
   green = Help · blue = Check · purple = Embed */
details.qpanel{border:2px solid #000;margin:8px 0;padding:0}
details.qpanel > summary{cursor:pointer;padding:7px 10px;font-weight:bold;list-style:none}
details.qpanel > summary::before{content:"▸ ";}
details.qpanel[open] > summary::before{content:"▾ ";}
details.qpanel[open]{padding-bottom:8px}
details.qpanel > *:not(summary){margin-left:10px;margin-right:10px}
details.q-help{background:#e3f3e3}
details.q-check{background:#e3edfb}
details.q-embed{background:#efe6f8}

/* =================== the game editor, like the worksheet editor =================== */
.gepicker{background:#e3f3e3;border:2px solid #000;padding:8px 10px;display:block}
.gepicker .gerow{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:4px 0}
.gepicker .gelab{width:110px;flex:none}
.gepicker button.on{background:#000;color:#fff}
.geprevwrap{position:relative;border:2px solid #000;border-top:none;background:#c9dcf0}
.geprevtag{position:absolute;top:5px;right:9px;font-size:10px !important;font-weight:bold !important;
  color:#456;letter-spacing:.5px;z-index:2}
iframe.geprev{display:block;width:100%;height:460px;border:0;background:#c9dcf0}
.genav{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:#ffef9e;border:2px solid #000;
  border-top:none;padding:7px 10px;position:sticky;top:0;z-index:30}
.genavmid{flex:1;text-align:center;min-width:200px}
.gedots{display:flex;gap:5px;justify-content:center;margin-top:4px}
.gedots i{width:10px;height:10px;border-radius:50%;border:1px solid #000;background:#fff;display:inline-block;cursor:pointer}
.gedots i.on{background:#000}
.gewith{display:flex;gap:6px;align-items:center;flex-wrap:wrap;width:100%;border-top:1px solid #000;padding-top:6px}
#panels.gepane, #gPanels.gepane{background:#ffef9e;border:2px solid #000;border-top:none;padding:12px}

/* ---- the game editor: screen map, button slides ---- */
.gemaprow{align-items:flex-start}
.gemap{position:relative;flex:1;min-width:280px;background:#fff;border:1px solid #000}
.gemaplines{position:absolute;left:0;top:0;pointer-events:none}
.genode{position:absolute;transform:translate(-50%,-50%);width:78px;height:78px;border-radius:50%;
  border:2px solid #000;background:#fff;display:flex;align-items:center;justify-content:center;
  text-align:center;font-size:12px !important;line-height:1.15;padding:5px;cursor:pointer;overflow:hidden;z-index:1}
.genode.top{border-width:4px}
.genode.on{background:#000;color:#fff}
.genode.float{border-style:dashed}
.btop{display:grid;grid-template-columns:150px 1fr;gap:6px 10px;align-items:center;margin-bottom:10px}
.btop .lab{margin:0}
details.bfold{border:2px solid #000;margin:8px 0}
details.bfold > summary{cursor:pointer;padding:7px 10px;font-weight:bold;list-style:none}
details.bfold > summary::before{content:"▸ ";}
details.bfold[open] > summary::before{content:"▾ ";}
details.bfold > *:not(summary){margin:0 10px 8px}
details.bf-when{background:#efe6f8}
details.bf-what{background:#fffdf2}
details.bf-then{background:#e3edfb}
.blimit{border:2px solid #000;background:#fff;padding:8px 10px;margin-top:8px}
.fxup{color:#006064;font-weight:bold}
.fxdn{color:#8e0000;font-weight:bold}

/* store: the other pages beside "Buy Food"; arrows beside the number */
.shoptabs{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 2px}
.shoptabs button{font-weight:normal}
.shoptop .shopnum{flex:1;display:flex;flex-direction:row;align-items:stretch}
.shoptop .shoparrows{display:flex;flex-direction:column;border-right:1px solid #000}
.shoptop .shoparrows button{flex:1;border:none;background:#fff;font-size:11px;padding:0 6px}
.shoptop .shoparrows button + button{border-top:1px solid #000}
.shoptop .shopn{flex:1;border:none !important;font-size:16px}

/* screen map as boxes, opening to the right */
.gemill{padding:14px;overflow:auto;min-height:220px}
.millrow{display:flex;gap:14px;align-items:flex-start}
.millcol{display:flex;flex-direction:column;gap:8px}
.millcol.sub{border:2px solid #000;background:#fff;padding:8px}
.millcol.float{border:2px dashed #000;background:#fff;padding:8px;margin-top:14px;display:inline-flex}
.millhead{font-size:13px;font-weight:bold}
.millbox{display:flex;align-items:center;gap:6px;border:2px solid #000;background:#fff;padding:6px 8px;min-width:170px}
.millbox.on{background:#000;color:#fff}
.millbox .millname{flex:1;cursor:pointer;font-weight:bold}
.millbox .millmore{font-weight:bold}
.millbox button{padding:2px 8px}

/* stock market: cards, three to a row */
.stockgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.stockcard{border:1px solid #000;background:#fff;display:flex;flex-direction:column}
.stockpic{height:70px;background:#e8e8e8;border-bottom:1px solid #000;display:flex;align-items:center;justify-content:center;overflow:hidden}
.stockpic img{max-width:100%;max-height:100%;object-fit:contain}
.stockname{padding:6px;font-weight:bold;font-size:13px;border-bottom:1px solid #000}
.stockline{display:flex;gap:4px;padding:5px 6px;border-bottom:1px solid #ddd;align-items:center}
.stockline input{width:52px;flex:none}
.stockline button{flex:1;font-size:12px}
.stockown{padding:6px;font-size:12px;color:#333}
img.stockthumb{width:24px;height:24px;object-fit:cover;vertical-align:middle;border:1px solid #000}
@media(max-width:620px){ .stockgrid{grid-template-columns:repeat(2,1fr)} }

/* store card: the number, then ▲▼ to its right, then the picture */
.shoptop .shopnum .shopn{order:0}
.shoptop .shopnum .shoparrows{order:1;border-right:none;border-left:1px solid #000}

/* console → worksheets, as boxes */
.wsboxes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.wsbox{border:2px solid #000;background:#fff;padding:10px;display:flex;flex-direction:column;gap:8px}
.wsbox.open{background:#fffbe0}
.wsboxap{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.wsboxap input{width:64px}
.wsboxacts{display:flex;gap:6px;flex-wrap:wrap}
.wsboxcat{color:#444;font-size:14px;min-height:1em}
.wsboxes > .wsinline{grid-column:1 / -1}
@media(max-width:820px){ .wsboxes{grid-template-columns:repeat(2,1fr)} }
@media(max-width:520px){ .wsboxes{grid-template-columns:1fr} }

/* the demo's clock */
.democlock{border:1px solid #fff;padding:2px 8px;font-weight:bold;color:#fff}
.democlock.moved{background:#fdf3cf;color:#000}

/* the spreadsheet is only as wide as its columns */
.sheetwrap{display:inline-block;max-width:100%;vertical-align:top}
details.q-word{background:#f4f4ef}

/* View as: the student's own page, in a big box */
.viewasbox{border:3px solid #000;background:#fff;margin-top:12px}
.viewasbox .cardhead{padding:8px 10px;border-bottom:2px solid #000;background:#ececec}
iframe.viewasframe{display:block;width:100%;height:680px;border:0;background:#c9dcf0}

/* ---- student dash: labels bold, as big as the questions ---- */
#profileCard, #practiceCard, #settingsCard, #exerciseCard .cardhead { font-weight:bold }
#profileCard button, #practiceCard button, #settingsCard button, #exerciseCard .cardhead button,
#profileCard .muted, #practiceCard .muted, #settingsCard .muted, #settingsCard h3, #settingsCard label,
#exerciseCard .cardhead .muted { font-size:16px !important; font-weight:bold !important }
.avatar.big{width:76px;height:76px;font-size:32px}
.bigname{font-size:32px !important;outline:none;border-bottom:1px dashed transparent;cursor:text}
.bigname:hover,.bigname:focus{border-bottom-color:#999}
.chip.bigap{font-size:32px !important;padding:2px 10px}
.setnav{display:flex;align-items:center;gap:8px;margin:6px 0 10px;border:1px solid #000;padding:6px 8px;background:#fff}
.setnavmid{flex:1;text-align:center}
.who button small.gmail{color:#555;font-weight:normal}

/* endings not found yet: grey, not blacked out */
.ib.locked.grey .pic{background:#d6d6d6;color:#d6d6d6}
.ib.locked.grey{background:#ececec}
.ib.locked.grey .lbl{color:#555}
/* convert, inside the You panel */
.convbox{margin-top:10px}

/* ---- drawing ---- */
.drawpad{margin-top:8px}
.drawbar{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:6px}
.drawbar .swatch{width:28px;height:28px;padding:0;border:2px solid #000;cursor:pointer}
.drawbar .swatch.on{outline:3px solid #000;outline-offset:2px}
.drawcanvas{display:block;width:100%;max-width:100%;border:1px solid #000;background:#fff;touch-action:none;cursor:crosshair}
img.drawthumb{max-width:220px;max-height:120px;border:1px solid #000;background:#fff;display:block}
/* the pinboard with a drawing behind the cards */
.bdbar{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:6px}
.bdbar .drawbar{margin:0}
.bdwrap{position:relative;background:#fafafa;margin-top:9px;overflow:hidden;border:1px solid #000}
.bdwrap > .pin{background:transparent;margin-top:0;border:none;position:relative;z-index:1}
.bdwrap > canvas.drawcanvas{position:absolute;left:0;top:0;width:1400px !important;max-width:none;height:900px;
  border:none;background:transparent;z-index:0;pointer-events:none}
.bdwrap.drawing > canvas.drawcanvas{pointer-events:auto}
.bdwrap.drawing > .pin{pointer-events:none}

/* "My own list" */
.mylist{border:2px solid #000;background:#fff;padding:8px;margin:8px 0}
.mylist .cardhead{margin-bottom:6px}
.mylist table.sheetgrid input{width:150px}

/* Settings → Look: clear labels */
.lookrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0}
.lookrow .looklab{font-weight:bold;font-size:16px;min-width:200px}

/* spreadsheets: cells selected by dragging */
table.sheetgrid td.selcell{background:#bcd8ff}
table.sheetgrid td.selcell input{background:#bcd8ff}
/* your character's name under its picture, editable in place */
.mehold{display:flex;flex-direction:column;align-items:center;gap:4px}
.mename{font-weight:bold;font-size:18px;outline:none;border-bottom:1px dashed transparent;cursor:text;text-align:center;min-width:60px}
.mename:hover,.mename:focus{border-bottom-color:#999}
.gearbox .lookrow .looklab{min-width:260px}