/* BRILLIANCY — Review · the Ledger · How To Play · Collection & Stats · Options + pause · Credits */
body.noanim *,body.noanim *::before,body.noanim *::after{animation:none!important;transition:none!important}
body.paused #frame,body.paused #console,body.paused #meta,body.paused #eq,body.paused #info,body.paused #sheet,body.paused #drills,body.paused #acts,body.paused #rail,body.paused #tabs{filter:blur(9px) brightness(.55)}
#metaRoom{z-index:90;background:var(--wp) repeat,var(--night);background-size:640px 640px,auto}
#metaRoom.esc{background:rgb(var(--night-rgb) / .62)}
.meta .ey{font-family:var(--sc);font-weight:600;letter-spacing:.03em;color:var(--dim);}
.meta h1{font-family:var(--serif);font-weight:700;color:var(--ivory);line-height:1.05}
.meta .go,.meta .mi,.meta .back{font-family:var(--sc);font-weight:600;letter-spacing:.03em;border-radius:5px;cursor:pointer;white-space:nowrap}
.meta .go{color:var(--paper-ink);border:1.5px solid var(--brass-lo);background:linear-gradient(180deg,var(--brass-hi),var(--brass));box-shadow:inset 0 1px 0 rgb(var(--brass-hi-rgb) / .5),0 6px 16px rgba(0,0,0,.5)}
.meta .mi{color:var(--brass-hi);border:1.5px solid var(--brass);background:rgb(var(--night-rgb) / .7)}
.meta .mi.warn{color:#e0604c;border-color:var(--carmine)} .meta .mi.q{color:var(--dim);border-color:var(--rule)} .meta .mi.off{opacity:.45;cursor:default}
.meta .back{color:var(--brass-hi);border:1.5px solid var(--brass);background:rgb(var(--night-rgb) / .85)}
.meta .lbl{font-family:var(--sc);font-weight:600;letter-spacing:.03em;color:var(--dim);}
.meta .bare{font-style:italic;color:var(--faint)}
.meta .tag{font-family:var(--sc);font-weight:600;letter-spacing:.03em;border-radius:4px;color:var(--paper-ink)}
.pnl{background:linear-gradient(180deg,rgb(var(--panel-rgb) / .94),rgb(var(--panel-lo-rgb) / .94));border:1px solid var(--rule);border-radius:6px;box-shadow:inset 0 1px 0 rgb(var(--brass-hi-rgb) / .07),0 8px 22px rgba(0,0,0,.35)}

/* ---------------- the pause menu ---------------- */
.escBox{background:linear-gradient(180deg,var(--panel),var(--panel-lo));border:2px solid var(--brass);border-radius:8px;box-shadow:0 20px 50px rgba(0,0,0,.7);display:flex;flex-direction:column;text-align:center}
.escBox .sub{font-style:italic;color:var(--dim)}
/* ---------------- Options ---------------- */
.otabs{display:flex;flex-direction:column} .otab{font-family:var(--sc);font-weight:600;letter-spacing:.03em;color:var(--dim);border:1.5px solid var(--rule);border-radius:5px;background:rgb(var(--night-rgb) / .6);text-align:left;cursor:pointer}
.otab.on{color:var(--paper-ink);background:linear-gradient(180deg,var(--brass-hi),var(--brass));border-color:var(--brass-lo)}
.opanel{background:linear-gradient(180deg,rgb(var(--panel-rgb) / .94),rgb(var(--panel-lo-rgb) / .94));border:1px solid var(--rule);border-radius:6px}
.orow{display:flex;justify-content:space-between;align-items:center;gap:20px;border-bottom:1px solid var(--rule)} .orow:last-child{border-bottom:0}
.orow.sub .olab{padding-left:34px} .orow.dead{opacity:.45}
.onm{color:var(--ivory)} .orow.sub .onm{color:var(--dim)} .ods{font-style:italic;color:var(--dim)}
.otg{display:inline-flex;border:1.5px solid var(--brass-lo);border-radius:5px;overflow:hidden;flex:none;cursor:pointer;background:none;padding:0}
.otg span,.otg.multi button{font-family:var(--sc);font-weight:600;letter-spacing:.03em;color:var(--brass-hi);background:rgb(var(--night-rgb) / .6);border:0;cursor:pointer}
.otg span.on,.otg.multi button.on{background:linear-gradient(180deg,var(--brass-hi),var(--brass));color:var(--paper-ink)}
.ohd{font-family:var(--sc);font-weight:600;letter-spacing:.03em;color:var(--brass-hi);border-bottom:1px solid var(--rule)}
.onote{font-style:italic;color:var(--faint)}
.rrow{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid var(--rule)} .rrow span{color:var(--dim)} .rrow b{font-weight:400;color:var(--ivory);text-align:right}
.orun{display:flex;align-items:center;gap:14px;justify-content:flex-end}
.orun .lbl{margin-right:auto}
/* ---------------- How To Play ---------------- */
.rmenu{display:flex;flex-direction:column}
.rent{display:flex;flex-direction:column;align-items:flex-start;text-align:left;border-radius:6px;cursor:pointer;border:0;border-left:5px solid rgb(var(--brass-hi-rgb) / .5);color:var(--ivory);box-shadow:0 8px 20px rgba(0,0,0,.35);transition:transform var(--d-xs)}
.rent b{font-family:var(--sc);font-weight:600;letter-spacing:.03em;color:var(--paper)} .rent i{color:rgba(242,226,184,.8)}
.rent.rom{background:linear-gradient(135deg,#6e241a,#8a3222)} .rent.pos{background:linear-gradient(135deg,#2f5040,#4a7a5c)} .rent.hyp{background:linear-gradient(135deg,#3e3a66,#5a5690)} .rent.cof{background:linear-gradient(135deg,#6a4a22,var(--brass-lo))}
.rent.on{outline:2px solid var(--brass-hi);transform:translateX(12px)}
.rpage{background:linear-gradient(180deg,#f6e8c2,var(--paper) 30%,#ecd9a8);color:var(--paper-ink);border-radius:4px;box-shadow:0 20px 50px rgba(0,0,0,.6);overflow-y:auto;scrollbar-width:thin}
.rpage h2{font-family:var(--serif);font-weight:700;color:var(--paper-ink)}
.qa .qt{font-family:var(--sc);font-weight:600;letter-spacing:.03em;color:#6e241a} .qa .qb{line-height:1.55}
.qa .qb b{font-weight:700}

.gfind{width:100%;border:1.5px solid rgba(107,77,34,.45);border-radius:5px;background:rgba(255,250,235,.7);font-family:var(--serif);color:var(--paper-ink);font-style:italic}
.gl2{display:block;column-count:2}   /* (Chris 10/8) two columns that fill: an entry no longer waits for its neighbor's row */
.gl2 .gt{display:block;break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid}
.gt b{display:block;font-family:var(--sc);font-weight:600;letter-spacing:.03em;color:var(--paper-ink)} .gt span{line-height:1.45}
/* ---------------- Credits ---------------- */
.csheet{background:linear-gradient(180deg,#f6e8c2,var(--paper) 30%,#ecd9a8);color:var(--paper-ink);box-shadow:0 22px 60px rgba(0,0,0,.7)}
.cin{border:1px solid rgba(107,77,34,.45);height:100%}
.cin h1{color:var(--paper-ink);text-align:center}
.cmark{display:flex;justify-content:center;gap:14px} .cmark svg{width:28px;height:28px}
.crow{display:grid;grid-template-columns:200px 1fr;gap:30px;align-items:baseline}
.crow .cl{font-family:var(--sc);font-weight:600;letter-spacing:.03em;color:var(--paper-ink-2);text-align:right}
.crow .cn{border-bottom:1px solid rgba(107,77,34,.3)} .crow .cn i{color:var(--paper-ink-2)}
/* ---------------- Collection & Stats ---------------- */
.atabs{display:flex;flex-wrap:wrap}
.atab{font-family:var(--sc);font-weight:600;letter-spacing:.03em;color:var(--dim);border:1.5px solid var(--rule);border-radius:5px;background:rgb(var(--night-rgb) / .6);cursor:pointer;white-space:nowrap}
.atab.on{color:var(--paper-ink);background:linear-gradient(180deg,var(--brass-hi),var(--brass));border-color:var(--brass-lo)}
.chips{display:flex;flex-wrap:wrap}
.chip2{display:inline-flex;align-items:center;gap:8px;font-family:var(--sc);font-weight:600;letter-spacing:.03em;color:var(--ivory);border:1.5px solid var(--rule);border-radius:16px;background:rgb(var(--night-rgb) / .6);cursor:pointer;white-space:nowrap}
.chip2 i{width:10px;height:10px;border-radius:50%} .chip2.on{border-color:var(--brass-hi);color:var(--brass-hi)}
.agrid{display:flex;flex-wrap:wrap;align-content:flex-start;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--brass-lo) transparent}
.card.locked .art{display:flex;align-items:center;justify-content:center} .card.locked .q{font-family:var(--serif);font-weight:700;font-size:80px;color:var(--paper-2)}
.card.locked .nm{color:var(--paper-ink-2)}
.pcell{display:flex;flex-direction:column;align-items:center;text-align:center} .pcell .pd{color:var(--dim);line-height:1.35}
.adet{background:linear-gradient(180deg,var(--panel-lo),var(--panel-lo));border:2px solid var(--brass-lo);border-radius:8px}
.adet .dt{font-family:var(--sc);font-weight:600;letter-spacing:.04em;color:var(--brass-hi);line-height:1.1} .adet .dtags{display:flex;gap:8px;flex-wrap:wrap}
.adet .dd{color:var(--ivory);line-height:1.45} .adet .drow{display:flex;justify-content:space-between;border-bottom:1px solid var(--rule);color:var(--dim)} .adet .drow b{color:var(--brass-hi)}
.adet .dnote{color:var(--dim);font-style:italic;line-height:1.5} .adet .dnote b{color:var(--brass-hi);font-style:normal}
.acount{font-family:var(--sc);font-weight:600;letter-spacing:.03em;color:var(--dim)}
/* a card whose condition was met in the Run being played: it opens when that Run ends (Chris 10/9) */
.adet .dd.met{color:var(--brass-hi);margin-top:.6em} .pcell .pd .met{color:var(--brass-hi)}
/* on the phone a tapped card's words are brought clear of the Back button, which is fixed at the foot of the screen
   (they came to rest under it, so a locked card's condition could not be read without scrolling on) */
body.port .adet{scroll-margin-bottom:86px}
.rtabs{display:grid;grid-template-columns:1fr 1fr}
.rpanel{background:linear-gradient(180deg,rgb(var(--panel-rgb) / .94),rgb(var(--panel-lo-rgb) / .94));border:1px solid var(--rule);border-radius:6px}
.rpanel .ph{font-family:var(--sc);font-weight:600;letter-spacing:.03em;color:var(--brass-hi);} .rpanel .ph i{font-family:var(--serif);font-style:italic;text-transform:none;letter-spacing:0;color:var(--dim);font-weight:400}
.rtab{width:100%;border-collapse:collapse} .rtab th{font-family:var(--sc);font-weight:600;letter-spacing:.03em;color:var(--dim);text-align:right;border-bottom:1px solid var(--brass-lo)}
.rtab th:first-child,.rtab td:first-child{text-align:left} .rtab td{text-align:right;border-bottom:1px solid var(--rule);color:var(--ivory)}
.rtab td b{color:var(--brass-hi)} .rtab td small{display:block;color:var(--faint)} .rtab .dash{color:var(--faint)} .rtab .won{color:var(--best);font-family:var(--sc);font-weight:600}
.pname{display:inline-flex;align-items:center;gap:8px;color:var(--ivory);cursor:pointer;border:0;border-bottom:1px dotted var(--brass);background:none;font:inherit} .pname svg{width:24px;height:24px} .pname i{color:var(--brass-hi)}
/* ---------------- the Ledger (an open book) ---------------- */
.book{display:grid;grid-template-columns:1fr 1fr;background:linear-gradient(90deg,#efdcae,var(--paper) 46%,#d9c28e 50%,var(--paper) 54%,#efdcae);color:var(--paper-ink);border-radius:4px;box-shadow:0 22px 60px rgba(0,0,0,.7)}
.book .pg{position:relative;background:repeating-linear-gradient(180deg,transparent 0,transparent 43px,rgba(107,77,34,.12) 43px,rgba(107,77,34,.12) 44px)}
.book .pg.l::before{content:'';position:absolute;top:0;bottom:0;left:52px;width:1px;background:rgba(192,58,40,.5)}
.book .ey{color:var(--paper-ink-2)} .book h1{color:var(--paper-ink)}
.lbig b{font-family:var(--serif);font-weight:700;color:var(--brass-lo)} .lsub{font-style:italic;color:var(--paper-ink-2)} .lsub.it{margin-top:4px}
.lnote{font-style:italic;color:var(--paper-ink-2);line-height:1.5}
.lh{font-family:var(--sc);font-weight:600;letter-spacing:.03em;color:var(--paper-ink-2);} .lh i{font-family:var(--serif);font-style:italic;text-transform:none;letter-spacing:0}
.lbar{display:grid;grid-template-columns:34px 90px 1fr 50px;align-items:center;gap:10px} .lbar .pi svg{width:30px;height:30px}
.lbar .lbb{height:14px;border-radius:3px;background:rgba(107,77,34,.15)} .lbar .lbb i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--brass-lo),var(--brass-hi))} .lbar b{text-align:right;font-weight:700}
.army{display:flex;flex-wrap:wrap}
.achip{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(107,77,34,.45);border-radius:4px;background:rgba(255,250,235,.4);color:var(--paper-ink-2);cursor:pointer;font:inherit}
.achip svg{width:20px;height:20px} .achip.in{color:var(--paper-ink);font-weight:700;border-color:var(--paper-ink-2)} .achip.gilded{background:linear-gradient(180deg,#f6d98a,var(--gold-hi));color:var(--paper-ink)} .achip.fallen{opacity:.55} .achip i{font-style:normal;color:var(--wax)}
.doss{display:grid;grid-template-columns:1fr 1fr}
.dos{position:relative;text-align:left;border:1px solid rgba(107,77,34,.45);border-radius:4px;background:rgba(255,250,235,.55);box-shadow:0 3px 8px rgba(0,0,0,.12);font:inherit;color:var(--paper-ink)}
.dos.sealed{background:linear-gradient(180deg,#e8d4a2,#dcc38c);cursor:pointer} .dos.sealed.cant{cursor:default;filter:saturate(.6)}
.dos .dn{font-family:var(--sc);font-weight:600;letter-spacing:.03em;} .dos .dd{font-style:italic;color:var(--paper-ink-2)}
.dos .dp{display:inline-flex;align-items:center;border-radius:14px;background:linear-gradient(180deg,var(--brass-hi),var(--brass));border:1px solid var(--brass-lo);font-weight:700}
.dos .wax{position:absolute;border-radius:50%;background:radial-gradient(circle at 40% 35%,var(--wax-hi),var(--wax) 60%,#4e1c14);box-shadow:inset 0 2px 5px rgba(255,190,170,.35),0 3px 6px rgba(0,0,0,.35)}
.dos .dv{display:flex;flex-wrap:wrap} .dos .dv b{font-weight:700;color:var(--brass-lo)}
.dos.tiernote{border-style:dashed;background:transparent;box-shadow:none}
.next5{display:grid;grid-template-columns:repeat(6,1fr)} .n5{display:flex;flex-direction:column;align-items:center;border:1px solid rgba(107,77,34,.35);border-radius:4px;background:rgba(255,250,235,.45)} .n5 svg{width:34px;height:34px} .n5 b{font-weight:700;color:var(--brass-lo)}

/* ---------------- REVIEW ---------------- */
body.reviewingUI #console,body.reviewingUI #meta,body.reviewingUI #eq,body.reviewingUI #drills,body.reviewingUI #acts,body.reviewingUI #sheet,
body.reviewingUI #np,body.reviewingUI #tabs,body.reviewingUI #info{visibility:hidden}
#rvHead{z-index:20;display:flex;align-items:center;justify-content:space-between}
.rvTurn{display:flex;align-items:center;gap:12px;font-family:var(--sc);font-weight:600;letter-spacing:.03em;color:var(--ivory);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rvTurn .stm{width:14px;height:14px;border-radius:50%;background:var(--ivory);border:1.5px solid var(--faint);flex:none} .rvTurn .stm.b{background:var(--night);border-color:var(--dim)}
.rvDone{font-family:var(--sc);font-weight:600;letter-spacing:.03em;color:var(--brass-hi);border:1.5px solid var(--brass);border-radius:5px;background:rgb(var(--night-rgb) / .8);cursor:pointer;white-space:nowrap}
#review{z-index:20}
.rvp{background:linear-gradient(180deg,rgb(var(--panel-rgb) / .94),rgb(var(--panel-lo-rgb) / .94));border:1px solid var(--rule);border-radius:6px;box-shadow:inset 0 1px 0 rgb(var(--brass-hi-rgb) / .07),0 8px 22px rgba(0,0,0,.35)}
.rvp .lbl{display:flex;justify-content:space-between;align-items:baseline} .rvp .lbl small{font-size:.8em;color:var(--faint)}
.bts{display:grid;grid-template-columns:repeat(4,1fr)}
.bt{display:flex;flex-direction:column;align-items:center;text-align:center;border:1.5px solid var(--rule);border-radius:5px;background:rgb(var(--night-rgb) / .5);color:var(--ivory);cursor:pointer;font:inherit}
.bt.on{border-color:var(--brass-hi);background:rgb(var(--brass-hi-rgb) / .1)} .bt.off{opacity:.4;cursor:default}
.bt .bn{font-family:var(--sc);font-weight:600;letter-spacing:.03em;color:var(--dim);line-height:1.2} .bt b{font-weight:700} .bt i{font-style:normal;color:var(--brill)}
.chd{display:flex;align-items:center;gap:14px}
.cg{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;font-style:normal;font-family:var(--serif);font-weight:700;flex:none;background:var(--panel-hi);color:var(--ivory);border:2px solid var(--rule)}
.cg.brill{background:var(--night);color:var(--brill);border-color:var(--brill);box-shadow:0 0 10px rgba(45,212,191,.4)} .cg.best{background:var(--best);color:#10220f;border-color:transparent}
.cg.bad{background:var(--caution);color:var(--brass-lo);border-color:transparent} .cg.blunder{background:var(--carmine);color:#fff3ea;border-color:transparent} .cg.mate{background:var(--paper-ink);color:var(--paper);border-color:var(--paper-2)} .cg.ex{color:var(--brass-hi)}
.cw{font-family:var(--sc);font-weight:600;letter-spacing:.03em;color:var(--dim)} .cw.brill{color:var(--brill)} .cw.best{color:var(--best)} .cw.bad{color:var(--caution)} .cw.blunder{color:var(--carmine)} .cw.mate{color:var(--gold-hi)}
.cs{font-weight:700;color:var(--ivory)}
.rvCoach p{line-height:1.5;color:var(--ivory)} .rvCoach p b{color:var(--brass-hi);font-weight:600}
.cbest{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--rule)} .cbest b{color:var(--best)}
.tbs{display:flex;flex-wrap:wrap} .tbi{display:inline-flex;align-items:center;gap:8px;color:var(--ivory)}
.rvEval{position:absolute;background:var(--panel-lo);border:1px solid var(--brass-lo);border-radius:3px;overflow:hidden}
.rvEval i{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(0deg,#f4ecd8,#e2d6b6);transition:height var(--d-l) var(--e-enter)}
.rvEval.flip i{bottom:auto;top:0}
.rvEval span{position:absolute;left:0;right:0;bottom:4px;text-align:center;font-family:var(--serif);font-weight:700;color:var(--paper-ink);mix-blend-mode:difference;filter:invert(1)}
.rvEng .esub{font-style:italic;color:var(--dim)}
.erow{display:flex;align-items:flex-start;gap:12px;border-radius:5px} .erow.mine{background:rgb(var(--brass-hi-rgb) / .12);outline:1.5px solid var(--brass-lo)}
.ebox{flex:none;display:inline-flex;align-items:center;justify-content:center;border-radius:3px;font-family:var(--serif);font-weight:700}
.ebox.wb{background:#f4ecd8;color:var(--night)} .ebox.bb{background:var(--night);color:#f4ecd8;border:1px solid var(--rule)}
.eln{color:var(--ivory);line-height:1.35} .eln b{color:var(--brass-hi)} .eln em{display:block;font-style:normal;font-family:var(--sc);font-weight:600;letter-spacing:.03em;color:var(--brass);}
.ethink{font-style:italic;color:var(--faint)}
.mlist{overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--brass-lo) transparent}
.mrow{display:grid;grid-template-columns:34px 1fr 1fr;align-items:center;border-bottom:1px solid var(--rule)}
.mn{color:var(--faint)}
.mm,.mr{text-align:left;border:1.5px solid transparent;border-radius:4px;background:none;color:var(--ivory);cursor:pointer;font:inherit;font-weight:600}
.mr{color:var(--dim);font-weight:400} .mr:disabled{cursor:default}
.mm.on,.mr.on{border-color:var(--brass-hi);background:rgb(var(--brass-hi-rgb) / .1)}
.mm i{font-style:normal;font-weight:700} .mm i.brill{color:var(--brill)} .mm i.best{color:var(--best)} .mm i.bad{color:var(--caution)} .mm i.blunder{color:var(--carmine)} .mm i.mate{color:var(--gold-hi)}
.rvNav{display:grid;grid-template-columns:repeat(4,1fr)} .rvNav button{border:1.5px solid var(--brass);border-radius:5px;background:rgb(var(--night-rgb) / .6);color:var(--brass-hi);cursor:pointer;font-family:var(--serif);font-weight:700}

/* =================== DESK =================== */
body.desk #metaRoom{left:0;top:0;width:1600px;height:1000px}
body.desk #metaRoom.withBand{top:142px!important;height:858px!important}
body.desk .meta .ey{font-size:17px} body.desk .meta h1{font-size:64px;margin-top:6px}
body.desk .meta .go{font-size:24px;padding:14px 36px} body.desk .meta .mi{font-size:20px;padding:12px 24px} body.desk .meta .back{font-size:24px;padding:12px 30px}
body.desk .mback{position:absolute;left:60px;bottom:28px}
body.desk .meta.withBand .mback{bottom:20px}
body.desk .meta:not(.esc):not(.ledg):not(.cred){padding:40px 60px}
body.desk .meta.withBand:not(.esc):not(.ledg):not(.cred){padding-top:24px}
body.desk #metaRoom.esc{display:flex;align-items:center;justify-content:center}
body.desk .escBox{width:480px;padding:36px 40px;gap:12px} body.desk .escBox h1{font-size:60px;margin:0} body.desk .escBox .sub{font-size:20px;margin-bottom:10px}
body.desk .meta.opts .otabs{position:absolute;left:60px;top:230px;width:300px;gap:12px} body.desk .otab{font-size:22px;padding:18px 24px}
body.desk .meta.opts.withBand .otabs{top:170px}
body.desk .opanel{position:absolute;left:400px;top:120px;width:1140px;padding:10px 34px}
body.desk .meta.opts.withBand .opanel{top:30px}
/* a long tab (Sound, with the music added 10/1) scrolls inside the panel rather than running under the run's buttons */
body.desk .meta.opts .opanel{max-height:calc(100% - 250px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--brass-lo) transparent} body.desk .meta.opts.withBand .opanel{max-height:calc(100% - 140px)}
body.desk .orow{padding:20px 0} body.desk .onm{font-size:26px} body.desk .ods{font-size:18px;margin-top:4px}
body.desk .otg span,body.desk .otg.multi button{font-size:17px;padding:10px 20px}
body.desk .ohd{font-size:17px;padding:22px 0 10px} body.desk .onote{font-size:17px;padding:18px 0} body.desk .rrow{font-size:20px;padding:12px 0}
body.desk .orun{position:absolute;left:400px;right:60px;bottom:30px} body.desk .meta.opts .mback{bottom:30px}
body.desk .meta.opts.withBand .orun{bottom:20px}
body.desk .meta.read .rmenu{position:absolute;left:60px;top:190px;width:380px;gap:16px}
body.desk .rent{padding:24px 26px;gap:8px} body.desk .rent b{font-size:24px} body.desk .rent i{font-size:18px}
body.desk .rpage{position:absolute;left:500px;top:170px;width:1040px;height:720px;padding:40px 46px}
body.desk .meta.read.withBand .rpage{top:30px;height:700px} body.desk .meta.read.withBand .rmenu{top:160px}
body.desk .rpage h2{font-size:52px;margin-bottom:18px} body.desk .qa{margin-top:22px} body.desk .qa .qt{font-size:20px} body.desk .qa .qb{font-size:20px;margin-top:6px}
body.desk .gfind{font-size:20px;padding:14px 18px;margin-bottom:22px} body.desk .gl2{column-gap:46px} body.desk .gl2 .gt{margin-bottom:18px} body.desk .gt b{font-size:19px} body.desk .gt span{font-size:19px}
body.desk #metaRoom.cred{display:flex;justify-content:center;padding-top:120px}
body.desk .csheet{width:1100px;height:770px;padding:14px} body.desk .cin{padding:40px 80px} body.desk .cin h1{font-size:64px}
body.desk .cmark{margin:16px 0 26px} body.desk .crow{padding:12px 0} body.desk .crow .cl{font-size:18px} body.desk .crow .cn{font-size:21px;padding-bottom:12px}
body.desk .atabs{gap:12px;margin:28px 0 22px} body.desk .atab{font-size:20px;padding:14px 22px}
body.desk .chips{gap:10px;margin-bottom:20px;max-width:1100px} body.desk .chip2{font-size:15px;padding:7px 14px}
body.desk .abody.tutors .agrid{position:absolute;left:60px;top:330px;width:1100px;height:560px;gap:16px}
body.desk .abody.tutors .card{zoom:.9}
body.desk .adet{position:absolute;left:1190px;top:330px;width:350px;min-height:300px;padding:24px 26px}
body.desk .adet .dt{font-size:30px} body.desk .adet .dtags{margin:10px 0 14px} body.desk .adet .tag{font-size:14px;padding:2px 9px} body.desk .adet .dd{font-size:19px} body.desk .adet .drow{font-size:19px;padding:12px 0} body.desk .adet .dnote{font-size:19px}
body.desk .abody.preps .agrid{position:absolute;left:60px;top:300px;width:1480px;height:590px;gap:26px 30px}
/* opened in a Run (from the pause menu, 10/8) the room begins under the band, 142 pixels down, so the two grids are
   made shorter by as much: their last row was cut off by the foot of the stage (the bot, 10/9) */
body.desk .meta.withBand .abody.tutors .agrid{height:500px} body.desk .meta.withBand .abody.preps .agrid{height:540px}
/* and the Back button stands over their foot there, so each list ends with room enough to scroll its last row clear of it
   (bug sweep 11/9, V10) */
body.desk .meta.withBand .abody.tutors .agrid,body.desk .meta.withBand .abody.preps .agrid{padding-bottom:72px}
body.desk .pcell{width:210px} body.desk .pcell .card{zoom:.85} body.desk .pcell .pd{font-size:16px;margin-top:8px}
body.desk .acount{font-size:16px;margin-bottom:14px}
body.desk .rtabs{gap:26px} body.desk .rpanel{padding:24px 26px} body.desk .rpanel .ph{font-size:18px;margin-bottom:12px}
body.desk .rtab th{font-size:14px;padding:10px 10px} body.desk .rtab td{font-size:20px;padding:12px 10px} body.desk .rtab td small{font-size:14px}
body.desk .rpanel.full{max-height:560px;overflow-y:auto}
body.desk #metaRoom.ledg{display:flex;flex-direction:column;align-items:center;padding:14px 35px 0}
body.desk .book{width:1530px;height:735px}
body.desk .book .pg{padding:40px 50px 30px 70px;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(107,77,34,.45) transparent}   /* a long army scrolls inside its page rather than being cut off (Chris 10/2) */ body.desk .book .pg.r{padding-left:56px}
body.desk .book h1{font-size:52px} body.desk .lbig{font-size:26px;margin-top:22px} body.desk .lbig b{font-size:64px;margin-right:12px} body.desk .lsub{font-size:17px}
body.desk .lnote{font-size:20px;margin-top:22px}
body.desk .lh{font-size:15px;margin:24px 0 10px} body.desk .lh i{font-size:16px}
body.desk .lbar{font-size:20px;margin:2px 0} body.desk .army{gap:8px} body.desk .achip{font-size:16px;padding:5px 10px}
body.desk .doss{gap:16px;margin-top:18px} body.desk .dos{padding:16px 18px;min-height:112px} body.desk .dos .dn{font-size:18px} body.desk .dos .dd{font-size:16px;margin-top:6px}
body.desk .dos .dp{font-size:18px;padding:2px 12px;margin-top:10px} body.desk .dos .wax{right:14px;bottom:14px;width:48px;height:48px} body.desk .dos .dv{gap:6px 16px;font-size:18px;margin-top:8px}
body.desk .next5{gap:12px} body.desk .n5{padding:12px 0} body.desk .n5 b{font-size:26px;margin-top:6px}
body.desk .mback2{margin-top:16px}
/* review, desk: the board stays where it plays; the panels take the columns */
body.desk #rvHead{position:absolute;left:425px;top:156px;width:750px;height:46px;padding:0 4px}
body.desk .rvTurn{font-size:24px} body.desk .rvDone{font-size:16px;padding:9px 16px}
body.desk #review{position:absolute;inset:0;pointer-events:none} body.desk #review>*{pointer-events:auto;position:absolute}
body.desk .rvp{padding:18px 22px} body.desk .rvp .lbl{font-size:17px;margin-bottom:12px}
body.desk .rvBoards{left:35px;top:156px;width:360px} body.desk .bts{gap:8px} body.desk .bt{padding:10px 4px;gap:4px} body.desk .bt .bn{font-size:13px} body.desk .bt b{font-size:19px} body.desk .bt i{font-size:14px}
body.desk .rvCoach{left:35px;top:360px;width:360px;height:440px;display:flex;flex-direction:column}
body.desk .cg{width:46px;height:46px;font-size:20px} body.desk .cg.sm{width:26px;height:26px;font-size:12px} body.desk .cw{font-size:15px} body.desk .cs{font-size:30px}
body.desk .rvCoach p{font-size:20px;margin-top:18px} body.desk .cbest{margin-top:auto;padding-top:14px;font-size:20px} body.desk .cbest .lbl{margin:0}
body.desk .rvThis{left:35px;top:816px;width:360px;height:110px} body.desk .tbs{gap:10px 18px;font-size:18px}
body.desk .rvEval{left:408px;top:210px;width:26px;height:716px} body.desk .rvEval span{font-size:13px}
body.desk .rvEng{left:1205px;top:156px;width:360px;height:320px;overflow-y:auto;scrollbar-width:thin} body.desk .esub{font-size:18px;margin:-4px 0 12px}
body.desk .erow{padding:8px;margin-bottom:6px} body.desk .ebox{min-width:62px;height:30px;font-size:16px;padding:0 6px} body.desk .eln{font-size:17px} body.desk .eln em{font-size:13px;margin-top:3px}
body.desk .rvMoves{left:1205px;top:490px;width:360px;height:320px;display:flex;flex-direction:column} body.desk .mlist{flex:1;min-height:0}
body.desk .mrow{padding:4px 0} body.desk .mn{font-size:18px} body.desk .mm,body.desk .mr{font-size:21px;padding:6px 8px}
body.desk .rvNav{left:1205px;top:824px;width:360px;height:102px;padding:22px;gap:10px} body.desk .rvNav button{font-size:22px}

/* =================== PORT (phone) =================== */
body.port #metaRoom{position:absolute;left:0;right:0;top:0;bottom:0;overflow-y:auto;padding:18px 14px 90px}
body.port #metaRoom.withBand{top:64px}
body.port .meta .ey{font-size:12px} body.port .meta h1{font-size:34px;margin-top:4px}
body.port .meta .go{font-size:17px;padding:13px 20px} body.port .meta .mi{font-size:16px;padding:12px} body.port .meta .back{font-size:16px;padding:12px 18px}
body.port .mback{position:fixed;left:14px;bottom:14px;z-index:5}
body.port #metaRoom.esc{display:flex;align-items:center;justify-content:center;padding:14px}
body.port .escBox{width:100%;max-width:380px;padding:24px 20px;gap:10px} body.port .escBox h1{font-size:40px;margin:0} body.port .escBox .sub{font-size:15px;margin-bottom:6px}
body.port .otabs{flex-direction:row;flex-wrap:wrap;gap:6px;margin:14px 0} body.port .otab{font-size:13px;padding:10px 12px}
body.port .opanel{padding:4px 14px} body.port .orow{padding:12px 0;gap:10px} body.port .orow.sub .olab{padding-left:14px}
body.port .onm{font-size:17px} body.port .ods{font-size:13px} body.port .otg span,body.port .otg.multi button{font-size:12px;padding:8px 10px}
body.port .ohd{font-size:13px;padding:14px 0 8px} body.port .onote{font-size:14px;padding:12px 0} body.port .rrow{font-size:14px;padding:9px 0}
body.port .orun{flex-direction:column;align-items:stretch;margin-top:16px;gap:8px}
body.port .rmenu{gap:8px;margin:14px 0} body.port .rent{padding:12px 14px;gap:4px} body.port .rent b{font-size:16px} body.port .rent i{font-size:13px} body.port .rent.on{transform:none}
body.port .rpage{padding:20px 18px} body.port .rpage h2{font-size:30px} body.port .qa{margin-top:14px} body.port .qa .qt{font-size:15px} body.port .qa .qb{font-size:15px;margin-top:4px}
body.port .gfind{font-size:16px;padding:10px 12px;margin-bottom:14px} body.port .gl2{column-count:1} body.port .gl2 .gt{margin-bottom:12px} body.port .gt b{font-size:15px} body.port .gt span{font-size:15px}
body.port .csheet{padding:8px} body.port .cin{padding:20px 16px} body.port .cin h1{font-size:40px} body.port .cmark{margin:10px 0 16px}
body.port .crow{grid-template-columns:1fr;gap:2px;padding:8px 0} body.port .crow .cl{text-align:left;font-size:12px} body.port .crow .cn{font-size:15px;padding-bottom:8px}
body.port .atabs{gap:6px;margin:14px 0} body.port .atab{font-size:12px;padding:9px 10px}
body.port .chips{gap:6px;margin-bottom:12px} body.port .chip2{font-size:11px;padding:5px 9px}
body.port .agrid{gap:8px} body.port .agrid .card{zoom:.55} body.port .adet{margin-top:14px;padding:16px}
body.port .adet .dt{font-size:22px} body.port .adet .dtags{margin:8px 0} body.port .adet .tag{font-size:12px;padding:2px 8px} body.port .adet .dd{font-size:15px} body.port .adet .drow{font-size:15px;padding:8px 0} body.port .adet .dnote{font-size:15px}
body.port .pcell{width:calc(50% - 4px)} body.port .pcell .card{zoom:.6} body.port .pcell .pd{font-size:13px;margin-top:6px}
body.port .acount{font-size:12px;margin-bottom:10px}
body.port .rtabs{grid-template-columns:1fr;gap:12px} body.port .rpanel{padding:14px} body.port .rpanel .ph{font-size:13px;margin-bottom:8px}
body.port .rtab th{font-size:10.5px;padding:6px 4px} body.port .rtab td{font-size:13px;padding:8px 4px} body.port .rtab td small{font-size:10.5px}
body.port .pname svg{width:18px;height:18px}
body.port #metaRoom.ledg{padding:10px 8px 90px}
body.port .book{grid-template-columns:1fr;background:var(--paper)} body.port .book .pg{padding:18px 16px 18px 30px} body.port .book .pg.l::before{left:16px}
body.port .book h1{font-size:32px} body.port .lbig{font-size:17px;margin-top:10px} body.port .lbig b{font-size:40px;margin-right:8px} body.port .lsub{font-size:13px} body.port .lnote{font-size:15px}
body.port .lh{font-size:12px;margin:16px 0 8px} body.port .lh i{font-size:12px}
body.port .lbar{grid-template-columns:26px 64px 1fr 36px;font-size:15px;gap:6px;margin:4px 0} body.port .lbar .pi svg{width:24px;height:24px}
body.port .army{gap:5px} body.port .achip{font-size:13px;padding:4px 7px} body.port .achip svg{width:16px;height:16px}
body.port .doss{grid-template-columns:1fr;gap:10px;margin-top:12px} body.port .dos{padding:12px 14px} body.port .dos .dn{font-size:14px} body.port .dos .dd{font-size:13px}
body.port .dos .dp{font-size:15px;padding:2px 10px;margin-top:6px} body.port .dos .wax{right:12px;bottom:12px;width:36px;height:36px} body.port .dos .dv{gap:4px 12px;font-size:14px;margin-top:6px}
body.port .next5{gap:6px} body.port .n5{padding:8px 0} body.port .n5 svg{width:24px;height:24px} body.port .n5 b{font-size:18px}
body.port .mback2{position:fixed;left:14px;right:14px;bottom:14px}
/* review, phone: the header over the board, the panels scroll beneath it */
body.port.reviewingUI #stage{overflow-y:auto}
body.port #rvHead{order:1;margin:6px 10px;gap:8px;flex:none}
body.port #frame{order:2}
body.port #review{order:3;display:flex;flex-direction:column;gap:10px;padding:10px 10px 30px;flex:none}
body.port .rvTurn{font-size:15px;gap:8px} body.port .rvTurn .stm{width:11px;height:11px} body.port .rvDone{font-size:12px;padding:8px 10px} body.port .rvDone .rvTail{display:none}
body.port .rvp{padding:12px 14px} body.port .rvp .lbl{font-size:12px;margin-bottom:8px}
body.port .rvNav{order:0;padding:8px;gap:8px} body.port .rvNav button{font-size:18px;padding:8px 0}
body.port .rvEng{order:1} body.port .rvCoach{order:2} body.port .rvMoves{order:3} body.port .rvThis{order:4} body.port .rvBoards{order:5}
body.port .rvEval{position:relative;order:0;height:12px;border-radius:6px} body.port .rvEval i{top:0;bottom:0;left:0;right:auto;height:auto!important;background:#f4ecd8}
body.port .rvEval span{display:none}
body.port .bts{gap:6px} body.port .bt{padding:8px 2px;gap:2px} body.port .bt .bn{font-size:10px} body.port .bt b{font-size:14px}
body.port .cg{width:36px;height:36px;font-size:16px} body.port .cg.sm{width:22px;height:22px;font-size:11px} body.port .cw{font-size:12px} body.port .cs{font-size:22px}
body.port .rvCoach p{font-size:15px;margin-top:10px} body.port .cbest{margin-top:10px;padding-top:10px;font-size:15px} body.port .cbest .lbl{margin:0}
body.port .tbs{gap:6px 12px;font-size:14px}
body.port .esub{font-size:14px;margin:-2px 0 8px} body.port .erow{padding:6px;margin-bottom:4px} body.port .ebox{min-width:50px;height:26px;font-size:13px;padding:0 4px} body.port .eln{font-size:14px} body.port .eln em{font-size:11px}
body.port .mlist{max-height:220px} body.port .mrow{padding:2px 0} body.port .mn{font-size:14px} body.port .mm,body.port .mr{font-size:16px;padding:5px 6px}
body.port.reviewingUI #console,body.port.reviewingUI #meta,body.port.reviewingUI #info,body.port.reviewingUI #eq,body.port.reviewingUI #tabs,
body.port.reviewingUI #sheet,body.port.reviewingUI #drills,body.port.reviewingUI #acts,body.port.reviewingUI #rail{display:none}
.front.title .cont{position:absolute;left:0;right:0;display:flex;justify-content:center}
.front.title .cont .mi i{font-family:var(--serif);font-style:italic;text-transform:none;letter-spacing:0;font-weight:400;margin-left:10px;opacity:.8}
body.desk .front.title .cont{top:806px} body.desk .front.title .cont .mi{font-size:24px;padding:14px 30px}
body.port .front.title .cont{bottom:330px;padding:0 30px} body.port .front.title .cont .mi{width:100%;max-width:340px;font-size:16px;padding:12px;white-space:normal}

body.desk .rvEval i{width:100%!important}
body.port .rvEval i{height:100%!important}
body.port .mback{background:rgb(var(--night-rgb) / .97);box-shadow:0 -8px 20px rgba(0,0,0,.6)}

/* the tooltip (ui/words.js): an ⓘ after a sentence, or a glossary term — hover on a desk, tap on a phone */
.tipi{display:inline-grid;place-items:center;width:1.05em;height:1.05em;margin-left:.15em;padding:0;vertical-align:.12em;border-radius:50%;border:1.5px solid currentColor;background:none;color:var(--brass-2,var(--brass-hi));font:italic 700 .7em/1 Spectral,Georgia,serif;cursor:help;opacity:.85}
.tipi:hover{opacity:1}
.gloss{border-bottom:1px dotted currentColor;cursor:help}
#tipPop{position:fixed;z-index:9999;padding:10px 14px;border-radius:8px;background:var(--panel-lo);border:1px solid var(--brass-lo);box-shadow:0 10px 30px rgba(0,0,0,.55);color:#efe3c8;font:400 15px/1.45 Spectral,Georgia,serif;pointer-events:none}
#tipPop b{display:block;margin-bottom:2px;color:var(--brass-hi);font-variant:small-caps;letter-spacing:.04em}
/* How To Play: the Brilliancy!! page wears the Brilliancy's teal; Chess takes the red (Chris 9/30) */
.rent.brill{background:linear-gradient(135deg,#0f4a44,#17756a)}
/* the chess diagrams (ui/reading_chess.js): a printed board beside the words, below them on a phone */
.qa.dg{display:flex;gap:26px;align-items:flex-start} .qa.dg .qtx{flex:1;min-width:0}
.qa .dia{flex:none;border-radius:3px;box-shadow:0 3px 10px rgba(43,29,16,.35);background:#2b1d10;padding:5px}
.qa .dia svg{display:block}
.qa .dcap{font-style:italic;font-size:.8em;color:#6b4d22;text-align:center;margin-top:5px}
.qa .dias{display:flex;gap:14px;flex:none}
body.desk .qa .dia svg{width:224px;height:224px}
body.port .qa.dg{flex-direction:column;gap:10px} body.port .qa .dia svg{width:100%;height:auto;max-width:300px} body.port .qa .dias{flex-direction:column}
.qa .schl{list-style:none;padding:0;margin:10px 0 0} .qa .schl li{position:relative;padding-left:20px;margin:6px 0}
.qa .schl li i{position:absolute;left:0;top:.35em;width:9px;height:.9em;border-radius:2px}
body.desk .qa.dg>div:last-child:not(.dias),body.desk .qa .dias>div{width:234px;flex:none}
body.desk .qa .dcap{font-size:15px;line-height:1.3}

/* the music volume slider (Chris 10/1: 0 to 100%, starting at half) */
.ovol{display:flex;align-items:center;gap:14px;flex:none}
.ovol input{-webkit-appearance:none;appearance:none;width:240px;height:6px;border-radius:3px;cursor:pointer;
  background:linear-gradient(90deg,var(--brass) 0,var(--brass) var(--p,50%),var(--rule) var(--p,50%));outline:none}
.ovol input::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--brass-hi);border:2px solid var(--brass-lo);box-shadow:0 2px 6px rgba(0,0,0,.5)}
.ovol input::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--brass-hi);border:2px solid var(--brass-lo)}
.ovol b{min-width:48px;text-align:right;font-family:var(--serif);font-weight:700;color:var(--ivory)}
body.desk .ovol b{font-size:22px} body.port .ovol input{width:130px} body.port .ovol b{font-size:16px}

/* a Life is not an ending: its button wears a rose of its own, apart from Abandon's red (Chris 10/2) */
.meta .mi.life{color:#f2a3b3;border-color:#c25a73;background:rgba(80,20,36,.35)}
.meta .mi.life:hover{background:rgba(120,30,54,.45)}
.escBox .mi{white-space:normal}   /* a long label wraps inside its button rather than running out of it */

/* the Ledger's list of owned Books and Run Upgrades */
.ochip{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(107,77,34,.45);border-radius:4px;background:rgba(255,250,235,.4);color:var(--paper-ink)}
.ochip i{font-style:normal} .ochip b{font-family:var(--sc);font-weight:600;color:var(--paper-ink-2)}
body.desk .ochip{font-size:16px;padding:5px 10px} body.port .ochip{font-size:13px;padding:4px 7px}
.lh.first{margin-top:0!important} .lgap{height:22px}

/* the Study Queue (Collection & Stats): the Boards that hurt you, each with its position and its line */
.qgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.qcard{display:flex;gap:16px;background:linear-gradient(180deg,rgb(var(--panel-rgb) / .94),rgb(var(--panel-lo-rgb) / .94));border:1px solid var(--rule);border-radius:6px;padding:14px}
.qcard .qb{flex:none;width:168px;height:168px;border:2px solid var(--brass-lo);border-radius:3px;overflow:hidden}
.qcard .qt{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.qcard .qn{font-family:var(--serif);font-size:22px;color:var(--ivory)}
.qcard .qs{font-family:var(--sc);font-weight:600;letter-spacing:.03em;font-size:15px;color:var(--dim)}
.qcard .qshow{margin-top:6px;font-family:var(--sc);font-weight:600;letter-spacing:.03em;font-size:15px;padding:7px 14px;border-radius:5px;border:1.5px solid var(--brass-lo);background:linear-gradient(180deg,var(--panel-hi),var(--panel));color:var(--ivory);cursor:pointer}
.qcard .qshow:hover{border-color:var(--brass-hi)}
.qcard .ql{font-family:var(--body);font-size:18px;line-height:1.4;color:var(--ivory)}
body.port .qgrid{grid-template-columns:1fr;gap:10px}
body.port .qcard{gap:10px;padding:10px} body.port .qcard .qb{width:112px;height:112px} body.port .qcard .qn{font-size:17px} body.port .qcard .qs{font-size:12px} body.port .qcard .qshow{font-size:13px;padding:6px 10px} body.port .qcard .ql{font-size:15px}
body.desk .abody.queue .qgrid{max-height:480px;overflow-y:auto;padding-right:6px;scrollbar-width:thin}

/* ---------------- the playtest bot's faults (10/5): meta ---------------- */
/* THE REVIEW'S EVALUATION BAR holds its own label (fault 21: "+3.9" showed as "+3." in a bar 26 pixels wide) */
body.desk .rvEval{left:400px;width:36px} body.desk .rvEval span{font-size:12.5px;letter-spacing:-.02em}
/* THE REVIEW'S ENGINE PANEL (fault 21: it scrolled by 9 to 32 pixels). The cause was a shared class name: an
   evaluation in Black's favor wears the class "bb", which is also the band's buttons' class, and on the desk it took
   their width of 150 pixels. The line beside it was left 136 pixels and wrapped to three rows. The box keeps its own
   width now, and the rows sit a little closer, so three lines of two rows each fit without a scrollbar. */
body.desk .ebox.bb{width:auto;gap:0} .ebox{box-shadow:none;white-space:nowrap}
body.desk .erow{padding:6px 8px;margin-bottom:5px}
/* FIVE BOARDS (The Sore Loser; fault 18) keep to one row in the Review's list: a second row lay under the coach */
.bts.many{grid-template-columns:repeat(5,minmax(0,1fr))}
body.desk .bts.many{gap:5px} body.desk .bts.many .bt{padding:8px 2px} body.desk .bts.many .bt .bn{font-size:11.5px;letter-spacing:0} body.desk .bts.many .bt b{font-size:15px}
body.port .bts.many{gap:4px} body.port .bts.many .bt .bn{font-size:9px;letter-spacing:0} body.port .bts.many .bt b{font-size:12px}
.bt{min-width:0} .bt b{white-space:nowrap}
/* CREDITS (fault 21: the last row was cut off at the foot of the sheet): the rows sit closer, and the sheet is as
   tall as its rows need */
body.desk .csheet{height:auto;min-height:750px;align-self:flex-start} body.desk .cin{height:auto;min-height:722px}
/* in a Run the band is above the sheet, so the sheet starts just under it and its foot stays on the stage */
body.desk #metaRoom.cred.withBand{padding-top:16px}
body.desk .cmark{margin:12px 0 18px} body.desk .crow{padding:9px 0} body.desk .crow .cn{padding-bottom:9px}
/* THE LEDGER'S PAGES fit their page (fault 21: the left page scrolled by 14 to 17 pixels and the right by 31, a
   scrollbar for almost nothing, and "The next five boards" was cut at the foot). A long army still scrolls. */
body.desk .book .pg{padding-top:28px;padding-bottom:18px}
body.desk .lh{margin:18px 0 8px}
body.desk .doss{gap:12px;margin-top:12px} body.desk .dos{padding:12px 18px;min-height:104px}
/* on the phone the Back button of a reading room was as wide as the stage and began 14 pixels in, so its right end
   ran off the screen; it keeps both margins now */
body.port .mback{right:14px;width:auto}

/* the Keys tab of Options (ui/keys.js): a key's button, and the fixed keys */
.kbtn,.kfix{flex:none;min-width:92px;text-align:center;font-family:var(--sc);font-weight:600;letter-spacing:.03em;border-radius:5px;border:1.5px solid var(--brass-lo);color:var(--ivory)}
.kbtn{background:linear-gradient(180deg,var(--panel-hi),var(--panel));cursor:pointer} .kbtn:hover{border-color:var(--brass-hi)}
.kbtn.on{background:linear-gradient(180deg,var(--brass-hi),var(--brass));color:var(--night);border-color:var(--brass-lo)}
.kfix{border-style:dashed;color:var(--dim)}
body.desk .kbtn,body.desk .kfix{font-size:17px;padding:8px 14px} body.port .kbtn,body.port .kfix{font-size:13px;padding:6px 10px;min-width:70px}

/* the Review's "Report this grade" (Chris 10/6) */
.rvRep{align-self:flex-start;cursor:pointer;border:1px solid var(--rule);border-radius:4px;background:var(--panel-hi);color:var(--dim);font-family:var(--sc);font-weight:600;letter-spacing:.03em;white-space:nowrap}
.rvRep:hover{color:var(--ivory);border-color:var(--brass-lo)}
body.desk .rvRep{font-size:15px;padding:5px 12px;margin-top:10px} body.port .rvRep{font-size:12px;padding:4px 9px;margin-top:8px}

/* ---------------- a Board from the Study Queue, in the Review (Chris 10/8) ---------------- */
/* the two buttons of a queued Board: "Review the puzzle" opens the Review, "Show the line" writes the line out */
.qcard .qbtns{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px} .qcard .qbtns .qshow{margin-top:0}
.qcard .qgo{font-family:var(--sc);font-weight:600;letter-spacing:.03em;font-size:15px;padding:7px 14px;border-radius:5px;cursor:pointer;color:var(--paper-ink);border:1.5px solid var(--brass-lo);background:linear-gradient(180deg,var(--brass-hi),var(--brass))}
.qcard .qgo:hover{filter:brightness(1.08)} .qcard .qgo:disabled{opacity:.6;cursor:default}
body.port .qcard .qbtns{gap:6px} body.port .qcard .qgo{font-size:13px;padding:6px 10px}
/* WHILE IT IS OPEN, the screens behind it are hidden and are not changed: the menu it was opened from keeps its
   place (and its scroll), and the title, the Study or the Verdict under the menu is as it was when this class comes
   off. The Run's band is hidden too, since the Board on the table is not the Run's. The Board itself shows, whatever
   was hiding it (a screen over it, or the pause menu's blur). */
body.queueRev #metaRoom{visibility:hidden;pointer-events:none}
body.queueRev #front,body.queueRev #study,body.queueRev #verdict,body.queueRev #handoff,body.queueRev #report,body.queueRev #tutorPick,body.queueRev #curtain,
body.queueRev #scrim,body.queueRev #cardBlurb,body.queueRev #shopScrim,body.queueRev #shopBlurb,body.queueRev #tnote,body.queueRev #tring,body.queueRev #stage>.schoolNote{display:none!important}
body.queueRev #band,body.queueRev #sub,body.queueRev #rail{visibility:hidden!important}
body.queueRev #frame{visibility:visible;filter:none}
/* the header names the Board, and says where it comes from on a second, smaller line */
.rvq{display:flex;flex-direction:column;min-width:0;line-height:1.12} .rvq b{font-weight:600;overflow:hidden;text-overflow:ellipsis}
.rvq small{font-size:.62em;color:var(--dim);overflow:hidden;text-overflow:ellipsis} .rvq small i{font-style:normal}
/* on a phone the two halves of the second line stand one under the other, beside the button */
body.port .rvq small{display:flex;flex-direction:column;font-size:11px;line-height:1.2;margin-top:1px} body.port .rvq small i{display:none}
body.port.queueRev #rvHead{align-items:flex-start}
/* the Board's own panel stands where the Set's Boards stand, and the coach takes the rest of the column */
.rvQ .qn{font-family:var(--serif);color:var(--ivory)} .rvQ .qs{font-family:var(--sc);font-weight:600;letter-spacing:.03em;color:var(--dim)}
body.desk .rvQ{left:35px;top:156px;width:360px;height:126px} body.desk .rvQ .qn{font-size:26px} body.desk .rvQ .qs{font-size:16px;margin-top:4px}
body.desk.queueRev .rvCoach{top:296px;height:630px}
body.port .rvQ{order:5} body.port .rvQ .qn{font-size:18px} body.port .rvQ .qs{font-size:12px;margin-top:2px}
.rpage h2.h2b{margin-top:34px}   /* the Tips heading under the FAQ (Chris 10/9) */

/* ---------------- the 11/9 sweep's scrollbars (Chris: "fix the scrollbars") ---------------- */
/* the Review's move list scrolled by 8px on a Board of five moves: the rows sit 2px closer */
body.desk .mrow{padding:3px 0}

/* ---------------- the name box (Chris 11/9: renaming a piece did nothing in the Steam build) ---------------- */
.nameOv{position:absolute;inset:0;z-index:450;display:flex;align-items:center;justify-content:center;background:rgb(var(--night-rgb) / .62)}
.nameBox{background:linear-gradient(180deg,#f6e8c2,var(--paper) 30%,#ecd9a8);color:var(--paper-ink);box-shadow:0 22px 60px rgba(0,0,0,.7);
  border:1px solid rgba(107,77,34,.45);padding:26px 30px 22px;width:420px;max-width:calc(100% - 32px);box-sizing:border-box;display:flex;flex-direction:column;gap:16px}
.nameBox .nh{font-family:'Young Serif',serif;font-size:24px}
.nameBox .nin{font:inherit;font-size:20px;padding:10px 12px;border:1px solid rgba(107,77,34,.55);background:rgba(255,250,235,.8);color:var(--paper-ink);outline:none}
.nameBox .nin:focus{border-color:var(--brass,#b08a3e);box-shadow:0 0 0 2px rgba(176,138,62,.35)}
.nameBox .nb{display:flex;gap:10px;justify-content:flex-end}
.nameBox .nbt{font-family:var(--sc);font-weight:600;letter-spacing:.03em;font-size:17px;padding:9px 20px;border:1.5px solid var(--paper-ink-2);border-radius:5px;color:var(--paper-ink);background:var(--paper-2);cursor:pointer}
.nameBox .nbt.pri{background:linear-gradient(180deg,var(--brass-hi),var(--brass));border-color:var(--brass-lo)}