/* BRILLIANCY — THE STUDY, THE ARMORY, THE HALL (mocks/rooms.html A–C) + THE CARD FAMILY (§4.5). */
body.inStudy #sub{visibility:visible}
#study{z-index:40}
/* ---------------- the card: 5:7, name + price on the face, rarity = the metal frame ---------------- */
.card{position:relative;flex:none;width:210px;height:294px;border:11px solid transparent;border-radius:10px;cursor:pointer;padding:0;
  background:linear-gradient(var(--paper),var(--paper)) padding-box,linear-gradient(160deg,#7a5634,#4a3219) border-box;
  box-shadow:0 6px 16px rgba(0,0,0,.5);transition:transform var(--d-xs) var(--e-enter),box-shadow var(--d-xs) var(--e-enter);font:inherit;color:var(--paper-ink);overflow:hidden}
.card.u{background:linear-gradient(var(--paper),var(--paper)) padding-box,linear-gradient(135deg,#fbfbf8,#a4a49e 45%,#e9e9e4 70%,#8f8f89) border-box}
.card.r{background:linear-gradient(var(--paper),var(--paper)) padding-box,linear-gradient(135deg,#f6d98a,#d9a441 45%,#f6d98a 70%,#8a6414) border-box;box-shadow:0 0 14px rgba(236,190,80,.45),0 6px 16px rgba(0,0,0,.5)}
.card.l{background:linear-gradient(var(--paper),var(--paper)) padding-box,linear-gradient(135deg,#f6d98a,#f3a9a1 30%,#c9a3e8 55%,#f6d98a 80%,#f3a9a1) border-box;box-shadow:0 0 22px rgba(201,163,232,.55),0 6px 16px rgba(0,0,0,.5)}
.card:hover{transform:translateY(-4px)}
.card.sel{transform:translateY(-8px);box-shadow:0 0 0 3px var(--brass-hi),0 14px 26px rgba(0,0,0,.6)}
.card .cb{position:absolute;left:0;right:0;top:0;height:9px}
.card .art{position:absolute;left:6px;right:6px;top:18px;height:150px;border-radius:3px;overflow:hidden;border:1px solid var(--paper-2);
  background:var(--paper) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><path d='M-2 2l4-4M0 8l8-8M6 10l4-4' stroke='%23e2cf9f' stroke-width='1.1'/></svg>");display:flex;align-items:center;justify-content:center}
.card .art svg{width:100%;height:100%;display:block}
.card .nm{position:absolute;left:8px;right:8px;top:172px;height:62px;display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:var(--sc);font-weight:600;font-size:22px;letter-spacing:.04em;line-height:1.08;color:var(--paper-ink)}
.card .nm.long{font-size:18px}
.card .nm .lv{color:var(--brass-lo);margin-left:4px}
.card .pr{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 14px;white-space:nowrap;
  border-radius:16px;background:linear-gradient(180deg,var(--gold-hi),var(--gold));border:1px solid var(--gold-lo);font-family:var(--serif);font-weight:700;font-size:20px;color:var(--paper-ink)}
.card .pr.blk{font-family:var(--sc);font-size:14px;letter-spacing:.03em;background:var(--paper-2);border-color:var(--paper-2);color:var(--paper-ink-2)}
.card.cant .pr{background:var(--paper-2);color:var(--paper-ink-2);border-color:var(--paper-2)}
i.gc{display:inline-block;width:.9em;height:.9em;border-radius:50%;vertical-align:-.1em;margin-left:.25em;
  background:radial-gradient(circle at 38% 32%,#ffe7a0,var(--gold) 60%,var(--gold-lo));box-shadow:inset 0 0 0 1px rgb(var(--gold-lo-rgb) / .8)}
.rr{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) / .75);white-space:nowrap;cursor:pointer}
.rr:disabled{opacity:.4;cursor:default} .rr.done{color:var(--faint);border-color:var(--rule)} .rr.q{color:var(--dim);border-color:var(--rule)}
.plate{font-family:var(--sc);font-weight:600;letter-spacing:.03em;color:var(--brass-hi);border:1.5px solid var(--brass-lo);border-radius:4px;
  background:linear-gradient(180deg,var(--panel),var(--panel-lo));box-shadow:inset 0 1px 0 rgb(var(--brass-hi-rgb) / .15);white-space:nowrap}
.bare{font-style:italic;color:var(--faint)}
.buy{font-family:var(--sc);font-weight:600;letter-spacing:.03em;color:var(--paper-ink);border:1.5px solid var(--brass-lo);border-radius:5px;background:linear-gradient(180deg,var(--brass-hi),var(--brass));cursor:pointer;white-space:nowrap}
.buy.cant{background:var(--paper-2);color:var(--paper-ink-2);border-color:var(--paper-2)}
.back{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}

/* ---------------- the blurb (buy / sell) ---------------- */
#shopBlurb{position:absolute;z-index:70;background:linear-gradient(180deg,var(--panel-lo),var(--panel-lo));border:2px solid var(--brass);box-shadow:0 14px 30px rgba(0,0,0,.65);border-radius:8px}
#shopBlurb .t{font-family:var(--sc);font-weight:600;letter-spacing:.04em;color:var(--brass-hi);line-height:1.1}
#shopBlurb .tags{display:flex;gap:8px;flex-wrap:wrap}
#shopBlurb .tag{font-family:var(--sc);font-weight:600;letter-spacing:.03em;border-radius:4px;color:var(--paper-ink)}
#shopBlurb .d{line-height:1.4;color:var(--ivory)}
#shopBlurb .foot{display:flex;align-items:center;justify-content:space-between;gap:12px}
#shopBlurb .hint{font-style:italic;color:var(--dim)} #shopBlurb .blk{font-family:var(--sc);font-weight:600;letter-spacing:.03em;color:var(--dim)}
#shopBlurb .grab,#shopBlurb .close{display:none}
#shopBlurb .tlist{display:flex;flex-direction:column;gap:8px}
#shopScrim{position:absolute;inset:0;z-index:69;background:rgb(var(--night-rgb) / .55)}
#tutorPick{position:absolute;inset:0;z-index:75;display:flex;align-items:center;justify-content:center;background:rgb(var(--night-rgb) / .72)}
#tutorPick .tp{background:linear-gradient(180deg,var(--panel),var(--panel-lo));border:2px solid var(--brass);border-radius:8px;text-align:center}
#tutorPick .ey{font-family:var(--sc);font-weight:600;letter-spacing:.03em;color:var(--dim);}
#tutorPick h2{font-family:var(--sc);font-weight:600;letter-spacing:.03em;color:var(--brass-hi)}
#tutorPick .cards{display:flex;flex-wrap:wrap;justify-content:center}

/* =================== DESK =================== */
body.desk #study{left:0;top:0;width:1600px;height:1000px}
body.desk .rr{font-size:16px;padding:8px 14px} body.desk .plate{font-size:20px;padding:6px 18px;letter-spacing:.1em}
body.desk .bare{font-size:20px;padding:30px}
body.desk .buy{font-size:18px;padding:10px 20px} body.desk .back{font-size:24px;padding:12px 40px}
body.desk #shopBlurb{width:420px;padding:18px 20px 16px} body.desk #shopBlurb .t{font-size:30px} body.desk #shopBlurb .tags{margin:8px 0 10px}
body.desk #shopBlurb .tag{font-size:15px;padding:2px 9px} body.desk #shopBlurb .d{font-size:20px} body.desk #shopBlurb .foot{margin-top:14px} body.desk #shopBlurb .hint{font-size:15px}
body.desk #tutorPick .tp{padding:30px 40px;max-width:1400px} body.desk #tutorPick .ey{font-size:15px} body.desk #tutorPick h2{font-size:40px;margin:6px 0 24px}
body.desk #tutorPick .cards{gap:18px;margin-bottom:24px}
/* the Study: two doors, three shelves, the Proceed bar (mock A) */
body.desk .room.study .door{position:absolute;top:160px;width:150px;height:760px;border-radius:75px 75px 6px 6px;cursor:pointer;
  background:linear-gradient(90deg,#1c150d,#2b2116 20%,#3b2c1b 50%,#2b2116 80%,#1c150d);border:2px solid var(--brass-lo);
  box-shadow:inset 0 0 0 8px rgba(0,0,0,.25),inset 0 0 0 10px rgba(201,162,74,.25),0 10px 26px rgba(0,0,0,.5);display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:34px;font:inherit}
body.desk .room.study .door::before{content:'';position:absolute;left:24px;right:24px;top:70px;bottom:120px;border-radius:50px 50px 3px 3px;
  background:linear-gradient(90deg,#123833,#0c2622);border:2px solid rgba(201,162,74,.3);box-shadow:inset 0 0 30px rgba(0,0,0,.6)}
body.desk .room.study .door::after{content:'';position:absolute;left:69px;top:360px;width:10px;height:52px;border-radius:5px;background:linear-gradient(90deg,var(--brass-lo),var(--brass-hi),var(--brass-lo))}
body.desk .room.study .door.arm::before{background:linear-gradient(90deg,#3b2a14,#2a1e0f)}
body.desk .room.study .door.closed{opacity:.55;cursor:default}
body.desk .room.study .door.closed::before{background:linear-gradient(90deg,#161310,#0e0c09)}
body.desk .room.study .door.hall{left:35px} body.desk .room.study .door.arm{left:1415px}
body.desk .room.study .door .dl{position:relative;max-width:128px;font-family:var(--sc);font-weight:600;font-size:15px;letter-spacing:.04em;color:var(--brass-hi);text-align:center;line-height:1.15}
body.desk .room.study .door .ds{position:relative;font-family:var(--sc);font-weight:600;font-size:15px;letter-spacing:.03em;color:var(--best);margin-top:10px;}
body.desk .room.study .door.closed .ds{color:var(--faint)}
body.desk .room.study .shelf{position:absolute;background:linear-gradient(180deg,rgb(var(--panel-rgb) / .92),rgb(var(--panel-lo-rgb) / .92));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)}
body.desk .room.study .shelf.tutors{left:205px;top:158px;width:1190px;height:370px}
body.desk .room.study .shelf.books{left:205px;top:546px;width:585px;height:365px}
body.desk .room.study .shelf.table{left:810px;top:546px;width:585px;height:365px}
body.desk .room.study .sh{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px 0}
body.desk .room.study .sh .rr:first-of-type{margin-left:auto}
body.desk .room.study .cards{display:flex;justify-content:center;gap:22px;padding-top:14px}
body.desk .room.study .proceed{position:absolute;left:205px;top:926px;width:1190px;height:48px;border-radius:4px;cursor:pointer;
  background:linear-gradient(180deg,var(--brass-hi),var(--brass));border:1.5px solid var(--brass-lo);font-family:var(--sc);font-weight:600;font-size:24px;letter-spacing:.03em;color:var(--paper-ink)}
body.desk .room.study .proceed i{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:0;font-size:20px;color:var(--paper-ink-2);margin-left:10px}
/* the Armory: three stations (mock B) */
body.desk .room.armory .station{position:absolute;top:158px;width:488px;height:742px;display:flex;flex-direction:column;align-items:center;text-align:center;padding:20px 26px;
  background:linear-gradient(180deg,rgba(43,36,26,.92),rgba(31,24,16,.92));border:1px solid var(--rule);border-radius:6px;box-shadow:0 8px 22px rgba(0,0,0,.35)}
body.desk .room.armory .station:nth-child(1){left:35px} body.desk .room.armory .station:nth-child(2){left:556px} body.desk .room.armory .station:nth-child(3){left:1077px}
body.desk .room.armory .pane{margin-top:16px;width:330px;height:238px;border-radius:6px;display:flex;align-items:center;justify-content:center;gap:4px;
  background:var(--paper) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><path d='M-2 2l4-4M0 8l8-8M6 10l4-4' stroke='%23e2cf9f' stroke-width='1.1'/></svg>");border:1px solid var(--paper-2);box-shadow:0 4px 12px rgba(0,0,0,.4)}
body.desk .room.armory .pane>svg{width:150px;height:150px} body.desk .room.armory .pane>svg:nth-child(n+2){margin-left:-40px}
body.desk .room.armory .pane.board{width:224px;height:224px;background:#1f1810;border-color:var(--brass-lo);padding:8px} body.desk .room.armory .pane.board svg{width:100%;height:100%}
body.desk .room.armory h3{font-family:var(--sc);font-weight:600;font-size:32px;letter-spacing:.03em;color:var(--brass-hi);margin-top:26px}
body.desk .room.armory p{font-size:20px;line-height:1.4;color:var(--ivory);margin-top:10px} body.desk .room.armory p.who{font-size:17px;color:var(--dim);margin-top:4px}
body.desk .room.armory p.lvl{color:var(--dim);margin-top:6px} body.desk .room.armory p.geo{color:var(--dim);margin-top:14px} body.desk .room.armory p.geo b{color:var(--brass-hi);font-family:var(--sc)}
body.desk .room.armory .dots{display:flex;gap:6px;justify-content:center;margin-top:18px} .room.armory .dots i{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--brass)} .room.armory .dots i.on{background:var(--brass)}
body.desk .room.armory .buy{margin-top:auto} body.desk .room.armory .rr{margin-top:16px}
body.desk .room.armory .sashes{display:flex;gap:14px;margin-top:16px}
.sash{position:relative;display:flex;flex-direction:column;align-items:center;cursor:pointer;color:var(--paper-ink);border:0;font:inherit;clip-path:polygon(0 0,100% 0,100% 88%,50% 100%,0 88%)}
.sash.t1{background:linear-gradient(180deg,#d3935d,#a8683a)} .sash.t2{background:linear-gradient(180deg,#f0f0ea,#b9b9b2)} .sash.t3{background:linear-gradient(180deg,#f6d98a,#d9ab45 55%,#b8862c)}   /* gold is a metal, the same in every room (Chris 10/2) */
.sash.cant{filter:saturate(.4) brightness(.8)}
.sash .n{font-family:var(--sc);font-weight:600;letter-spacing:.03em;} .sash .e{line-height:1.35} .sash .p{font-weight:700;margin-top:auto}
body.desk .sash{width:136px;height:292px;padding:20px 10px 44px} body.desk .sash .n{font-size:20px} body.desk .sash .e{font-size:15px;margin-top:12px} body.desk .sash .p{font-size:20px}
body.desk .room.armory .back{position:absolute;left:50%;transform:translateX(-50%);top:918px;white-space:nowrap}
/* the Hall (mock C) */
body.desk .room.hall .side{position:absolute;top:180px;width:390px;height:600px;padding:28px 26px;background:linear-gradient(180deg,rgba(43,36,26,.92),rgba(31,24,16,.92));border:1px solid var(--rule);border-radius:6px}
body.desk .room.hall .side.l{left:35px} body.desk .room.hall .side.r{left:1175px}
.room.hall .ph{font-family:var(--sc);font-weight:600;letter-spacing:.03em;color:var(--brass-hi);}
.room.hall .hl{display:flex;justify-content:space-between;align-items:baseline;gap:10px;border-bottom:1px solid var(--rule);color:var(--ivory)}
.room.hall .hl b{color:var(--brass-hi);white-space:nowrap} .room.hall .hl i{color:var(--dim)}
.room.hall .hp{color:var(--dim);line-height:1.5} .room.hall .hp i{color:var(--ivory)}
body.desk .room.hall .ph{font-size:20px;margin-bottom:14px} body.desk .room.hall .hl{font-size:20px;padding:14px 0} body.desk .room.hall .hp{font-size:20px;margin-top:22px}
.room.hall .manu{position:absolute;background:repeating-linear-gradient(180deg,transparent 0,transparent 35px,rgba(107,77,34,.18) 35px,rgba(107,77,34,.18) 36px),linear-gradient(180deg,#f6e8c2,var(--paper) 40%,#ecd9a8);
  color:var(--paper-ink);box-shadow:0 18px 44px rgba(0,0,0,.65)}
.room.hall .manu::after{content:'';position:absolute;right:0;top:0;border-style:solid;border-color:#1a140d #1a140d transparent transparent}
.room.hall .ms-ey{font-style:italic;color:var(--paper-ink-2)} .room.hall .ms-yr{position:absolute;font-style:italic;color:var(--paper-ink-2)}
.room.hall h1{font-style:italic;font-weight:600;line-height:1}
.room.hall .ms-task{font-weight:600}
.room.hall .ms-board{line-height:0;border:3px solid #3b2c1b;box-shadow:0 3px 8px rgba(0,0,0,.3)} .room.hall .ms-board svg{width:100%;height:auto}
.room.hall .ms-foot{position:absolute;font-style:italic;color:var(--paper-ink-2)}
.room.hall .wax{position:absolute;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;color:#f3dcc6;
  background:radial-gradient(circle at 40% 35%,var(--wax-hi),var(--wax) 58%,#4e1c14);box-shadow:inset 0 2px 6px rgba(255,190,170,.35),0 6px 14px rgba(0,0,0,.45)}
body.desk .room.hall .manu{left:470px;top:180px;width:660px;height:600px;padding:40px 50px}
body.desk .room.hall .manu::after{border-width:0 40px 40px 0}
body.desk .room.hall .ms-ey{font-size:20px} body.desk .room.hall .ms-yr{right:48px;top:44px;font-size:24px}
body.desk .room.hall h1{font-size:52px;margin:10px 0 14px} body.desk .room.hall .ms-task{font-size:24px}
body.desk .room.hall .ms-board{position:absolute;left:50px;top:230px;width:280px}
body.desk .room.hall .ms-foot{left:370px;top:440px;font-size:20px;max-width:230px}
body.desk .room.hall .wax{right:42px;bottom:36px;width:86px;height:86px;font-size:40px}
.room.hall .accept{position:absolute;cursor:pointer;border:1.5px solid var(--brass-lo);border-radius:4px;background:linear-gradient(180deg,var(--brass-hi),var(--brass));font-family:var(--sc);font-weight:600;letter-spacing:.03em;color:var(--paper-ink)}
.room.hall .accept.cant{background:var(--paper-2);color:var(--paper-ink-2)}
body.desk .room.hall .accept{left:470px;top:806px;width:660px;height:64px;font-size:26px}
body.desk .room.hall .back{position:absolute;left:620px;top:888px;width:360px;font-size:22px}

/* =================== PORT (phone): the room scrolls beneath the band =================== */
body.port #study{position:absolute;left:0;right:0;top:64px;bottom:0;overflow-y:auto;padding:10px 10px 90px;scrollbar-width:thin}
body.port .card{zoom:.6}
body.port .rr{font-size:13px;padding:6px 10px} body.port .plate{font-size:14px;padding:4px 12px}
body.port .bare{font-size:15px;padding:14px}
body.port .buy{font-size:15px;padding:10px 16px} body.port .back{font-size:16px;padding:12px;width:100%;margin-top:12px}
body.port .room.study{display:flex;flex-direction:column;gap:12px}
body.port .room.study .door{order:0;width:100%;height:54px;border-radius:6px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;cursor:pointer;
  background:linear-gradient(180deg,#2b2116,#1c150d);border:1.5px solid var(--brass-lo);font:inherit}
body.port .room.study .door.closed{opacity:.5}
body.port .room.study .door .dl{font-family:var(--sc);font-weight:600;font-size:15px;letter-spacing:.03em;color:var(--brass-hi)} body.port .room.study .door .dl br{display:none}
body.port .room.study .door .ds{font-family:var(--sc);font-weight:600;font-size:12px;letter-spacing:.03em;color:var(--best);} body.port .room.study .door.closed .ds{color:var(--faint)}
body.port .room.study .shelf{order:1;background:linear-gradient(180deg,rgb(var(--panel-rgb) / .92),rgb(var(--panel-lo-rgb) / .92));border:1px solid var(--rule);border-radius:6px;padding-bottom:10px}
body.port .room.study .sh{display:flex;align-items:center;gap:8px;padding:10px 10px 0;flex-wrap:wrap} body.port .room.study .sh .rr:first-of-type{margin-left:auto}
body.port .room.study .cards{display:flex;gap:10px;overflow-x:auto;padding:12px 10px 4px;scrollbar-width:none}
body.port .room.study .proceed{position:fixed;left:auto;bottom:0;order:9}
body.port .room.study .proceed{position:sticky;bottom:-80px;margin-top:6px;height:52px;border-radius:5px;cursor:pointer;background:linear-gradient(180deg,var(--brass-hi),var(--brass));border:1.5px solid var(--brass-lo);
  font-family:var(--sc);font-weight:600;font-size:16px;letter-spacing:.03em;color:var(--paper-ink)}
body.port .room.study .proceed i{display:none}
body.port #shopBlurb{position:absolute;left:0!important;right:0;bottom:0;top:auto!important;border-radius:14px 14px 0 0;border-width:2px 0 0;padding:10px 16px 18px}
body.port #shopBlurb .grab{display:block;width:44px;height:5px;border-radius:3px;background:var(--faint);margin:0 auto 12px}
body.port #shopBlurb .t{font-size:24px} body.port #shopBlurb .tags{margin:8px 0 10px} body.port #shopBlurb .tag{font-size:12px;padding:2px 8px} body.port #shopBlurb .d{font-size:16px}
body.port #shopBlurb .foot{margin-top:14px} body.port #shopBlurb .close{display:inline-block;font-family:var(--sc);font-weight:600;font-size:14px;color:var(--brass-hi);border:1.5px solid var(--brass);border-radius:6px;padding:10px 18px;background:none}
body.port #shopScrim{position:absolute} body.port #shopBlurb{position:absolute} body.port #tutorPick{position:absolute}
body.port #tutorPick .tp{margin:10px;padding:18px} body.port #tutorPick h2{font-size:24px;margin:4px 0 14px} body.port #tutorPick .cards{gap:8px;margin-bottom:14px}
body.port .room.armory{display:flex;flex-direction:column;gap:12px}
body.port .room.armory .station{display:flex;flex-direction:column;align-items:center;text-align:center;padding:14px;background:linear-gradient(180deg,rgba(43,36,26,.92),rgba(31,24,16,.92));border:1px solid var(--rule);border-radius:6px}
body.port .room.armory .pane{margin-top:10px;width:200px;height:140px;border-radius:6px;display:flex;align-items:center;justify-content:center;background:var(--paper);border:1px solid var(--paper-2)}
body.port .room.armory .pane>svg{width:96px;height:96px} body.port .room.armory .pane>svg:nth-child(n+2){margin-left:-28px}
body.port .room.armory .pane.board{width:170px;height:170px;background:#1f1810;padding:6px} body.port .room.armory .pane.board svg{width:100%;height:100%}
body.port .room.armory h3{font-family:var(--sc);font-weight:600;font-size:22px;color:var(--brass-hi);margin-top:12px}
body.port .room.armory p{font-size:15px;line-height:1.4;color:var(--ivory);margin-top:6px} body.port .room.armory p.geo,body.port .room.armory p.lvl,body.port .room.armory p.who{color:var(--dim)}
body.port .room.armory .dots{margin-top:10px} body.port .room.armory .buy{margin-top:12px} body.port .room.armory .rr{margin-top:10px}
body.port .room.armory .sashes{display:flex;gap:8px;margin-top:10px}
body.port .sash{width:108px;height:210px;padding:12px 6px 30px} body.port .sash .n{font-size:14px} body.port .sash .e{font-size:11.5px;margin-top:6px} body.port .sash .p{font-size:16px}
body.port .room.hall{display:flex;flex-direction:column;gap:12px}
body.port .room.hall .side{padding:14px;background:linear-gradient(180deg,rgba(43,36,26,.92),rgba(31,24,16,.92));border:1px solid var(--rule);border-radius:6px}
body.port .room.hall .side.r{order:3} body.port .room.hall .manu{order:1;position:relative;padding:22px 20px 110px}
body.port .room.hall .ph{font-size:14px;margin-bottom:8px} body.port .room.hall .hl{font-size:15px;padding:8px 0} body.port .room.hall .hp{font-size:15px;margin-top:10px}
body.port .room.hall .manu::after{border-width:0 26px 26px 0}
body.port .room.hall .ms-ey{font-size:15px} body.port .room.hall .ms-yr{right:34px;top:22px;font-size:17px}
body.port .room.hall h1{font-size:30px;margin:6px 0 8px} body.port .room.hall .ms-task{font-size:17px;margin-bottom:12px}
body.port .room.hall .ms-board{width:62%}
body.port .room.hall .ms-foot{left:20px;bottom:24px;font-size:15px} body.port .room.hall .wax{right:18px;bottom:18px;width:60px;height:60px;font-size:28px}
body.port .room.hall .accept{order:2;position:relative;height:52px;font-size:17px;width:100%} body.port .room.hall .back{order:4}
body.port.inStudy #rail{visibility:visible} body.port.inStudy #study{top:140px}
/* with Books, Run Upgrades or a Repertoire held, their row stands under the Tutors and the room begins below it (Chris 10/8; ui/play.css) */
body.port.inStudy.hasShelf #study{top:186px}
/* drag to buy (Chris 9/29): the lifted card follows the pointer; the top bar lights as the drop */
.dragCard{position:fixed;left:0;top:0;z-index:999;pointer-events:none;transform-origin:50% 50%;opacity:.95;box-shadow:0 20px 40px rgba(0,0,0,.6)!important}
.card.lifted{opacity:.35}
body.port .room.study .card{touch-action:pan-x}
body.dragBuy #band,body.dragBuy.inStudy #rail{box-shadow:inset 0 0 0 2px rgb(var(--brass-hi-rgb) / .35),0 0 24px rgb(var(--brass-hi-rgb) / .25)}
body.dragHot #band,body.dragHot.inStudy #rail{box-shadow:inset 0 0 0 3px var(--brass-hi),0 0 34px rgb(var(--brass-hi-rgb) / .6)}
body.dragBuy .seat.empty{border-color:var(--brass-hi)}
#tutorPick .tpd{color:var(--ivory);font-style:italic;min-height:1.5em}
body.desk #tutorPick .tpd{font-size:19px;margin-bottom:18px} body.port #tutorPick .tpd{font-size:14px;margin-bottom:10px}

/* the doors (Chris 9/30): "Dark tonight" keeps inside the door; an open door shimmers so it reads as open */
body.desk .room.study .door .ds{max-width:120px;text-align:center;line-height:1.25;letter-spacing:.1em;font-size:14px}
.room.study .door:not(.closed){animation:doorGlow 2.8s ease-in-out infinite}
@keyframes doorGlow{0%,100%{border-color:var(--brass-lo)}50%{border-color:var(--brass-hi);filter:brightness(1.12)}}
.room.study .door .glint{position:absolute;overflow:hidden;pointer-events:none;z-index:1}
body.desk .room.study .door .glint{left:26px;right:26px;top:72px;bottom:122px;border-radius:48px 48px 2px 2px}
body.port .room.study .door{position:relative;overflow:hidden} body.port .room.study .door .glint{inset:0}
.room.study .door .glint::after{content:'';position:absolute;top:-20%;bottom:-20%;left:-60%;width:45%;transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,236,190,.05) 30%,rgba(255,236,190,.28) 50%,rgba(255,236,190,.05) 70%,transparent);animation:doorGlint 3.6s ease-in-out infinite}
.room.study .door.arm .glint::after{animation-delay:1.8s}
@keyframes doorGlint{0%{left:-60%}45%,100%{left:130%}}
.room.study .door:not(.closed) .ds{text-shadow:0 0 10px rgba(92,200,170,.55)}
body.noanim .room.study .door, body.noanim .room.study .door .glint::after{animation:none}

/* THE DOORS, drawn (ui/art/doors.js; Chris 9/30 "use those in the game") — the pill shapes, their glint and
   pulse retire; the name sits on an engraved brass plate, and open is shown by light */
.room.study .door{background:none !important;border:none !important;box-shadow:none !important;animation:none !important;overflow:hidden}
.room.study .door::before,.room.study .door::after{display:none !important}
.room.study .door svg{position:absolute;inset:0;display:block;pointer-events:none}
.room.study .door.closed{opacity:1 !important;cursor:default}
.room.study .door:not(.closed):hover{filter:brightness(1.1)}
.room.study .door .dl{z-index:1;background:linear-gradient(180deg,#e9c46a 0,#c9a24a 40%,#a8842f 100%);border:1.5px solid #4a340c;border-radius:3px;color:#3a2708 !important;
  text-shadow:0 1px 0 rgba(255,240,200,.6);box-shadow:inset 0 1px 0 rgba(255,244,210,.7),0 3px 6px rgba(0,0,0,.55)}
.room.study .door .ds{z-index:1;text-shadow:0 1px 2px #000,0 0 6px #000 !important}
.room.study .door.closed .ds{color:#b9a88a !important}
body.desk .room.study .door{border-radius:0 !important}
body.desk .room.study .door .dthumb{display:none}
body.desk .room.study .door .dl{position:absolute;left:50%;top:318px;transform:translateX(-50%);width:112px;max-width:none;padding:7px 4px 6px;font-size:13px;letter-spacing:.08em;line-height:1.15}
body.desk .room.study .door .dl br{display:none}
body.desk .room.study .door .ds{position:absolute;left:50%;top:372px;transform:translateX(-50%);width:130px;margin:0;font-size:12px;letter-spacing:.12em;line-height:1.3}
/* the phone's door bar: the door's head at the left, the plate and the state beside it, on dark wood */
body.port .room.study .door{position:relative;flex:none;padding-left:62px !important;background:linear-gradient(180deg,#2b2116,#1c150d) !important;border:1.5px solid var(--brass-lo) !important;border-radius:6px !important}
body.port .room.study .door .dfull{display:none}
body.port .room.study .door .dthumb{left:4px;top:3px;bottom:3px;right:auto;width:48px;height:calc(100% - 6px);border-radius:3px}
body.port .room.study .door .dl{padding:4px 10px;font-size:13px}

/* the school notice (Chris 9/30): a brass plate that says when a school's bonus starts, grows or stops */
.schoolNote{position:absolute;left:50%;transform:translateX(-50%);z-index:420;display:grid;grid-template-columns:auto 1fr;column-gap:14px;row-gap:3px;align-items:center;
  background:linear-gradient(180deg,var(--panel),var(--panel-lo));border:1.5px solid var(--brass);border-radius:6px;box-shadow:0 14px 34px rgba(0,0,0,.65);pointer-events:none;
  animation:schIn 360ms var(--e-enter,ease-out) both;transition:opacity 500ms,transform 500ms}
.schoolNote i{grid-row:1 / span 2;width:8px;align-self:stretch;border-radius:3px}
.schoolNote b{font-family:var(--sc);font-weight:600;letter-spacing:.03em;color:var(--brass-hi)} .schoolNote span{color:var(--ivory);line-height:1.35}
.schoolNote.out{opacity:0;transform:translate(-50%,-10px)}
@keyframes schIn{from{opacity:0;transform:translate(-50%,-14px)}to{opacity:1;transform:translate(-50%,0)}}
body.desk .schoolNote{top:128px;width:760px;padding:14px 20px} body.desk .schoolNote b{font-size:20px} body.desk .schoolNote span{font-size:18px}
body.port .schoolNote{top:92px;width:400px;padding:10px 14px} body.port .schoolNote b{font-size:14px} body.port .schoolNote span{font-size:13px}
/* the top bar stays above the Study's rooms on the desk (Chris 9/30: the Act Map, the Ledger, the seats and the
   tokens could not be clicked while the Study was open — the room, a full-stage layer, sat over the band) */
body.desk.inStudy #band,body.desk.inStudy #sub{z-index:45}
.room.armory .geo.mine{color:var(--brass-hi);margin-top:-4px}
.room.armory .geo.mine{color:var(--brass-hi);margin-top:-4px}

/* THE POP-UPS (Chris 10/9; ui/unlocks.js U.modal): the Unlocked pop-up over the title (#unlockReveal) and what a
   Preparation gave (#prepGrant, ui/front.js). The stage dims and a large brass panel shows up to 3 cards at a time,
   each with its words; with more than 3 there are a previous and a next button and a count. On the desk the cards
   stand side by side; on the phone they are a list, each card beside its words. */
.ulOv{position:absolute;inset:0;z-index:600;display:flex;align-items:center;justify-content:center;background:rgb(var(--night-rgb) / .84)}
.ulOv .ulBox{display:flex;flex-direction:column;align-items:center;text-align:center;box-sizing:border-box;max-height:100%;overflow-y:auto;
  background:linear-gradient(180deg,var(--panel),var(--panel-lo));border:2px solid var(--brass);border-radius:10px;
  box-shadow:0 0 60px rgb(var(--brass-hi-rgb) / .25),0 24px 60px rgba(0,0,0,.7);color:var(--ivory)}
.ulOv .ulBox.in{animation:ulIn 520ms var(--e-enter,ease-out) both}
@keyframes ulIn{from{opacity:0;transform:translateY(18px) scale(.94)}to{opacity:1;transform:none}}
.ulOv .ulEy{font-family:var(--sc);font-weight:600;letter-spacing:.03em;color:var(--brass)}
.ulOv h2{font-family:var(--serif);font-weight:700;color:var(--ivory);margin:0}
.ulOv .ulRow{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center}
.ulOv .ulItems{display:flex;flex:none;justify-content:center;align-items:flex-start}
.ulOv .ulItem{display:flex;flex-direction:column;align-items:center}
.ulOv .ulCard{display:flex;align-items:flex-end;justify-content:center;flex:none}
.ulOv .ulCard .card{pointer-events:none} .ulOv .ulCard .pr{visibility:hidden} .ulOv .ulCard .held{font-size:19px;padding:3px 11px;border-radius:14px}
.ulOv .ulCard .card.sh-coin{height:222px} .ulOv .ulCard .card.sh-coin .nm{font-size:25px}
.ulOv .ulNm{font-family:var(--sc);font-weight:600;letter-spacing:.03em;color:var(--brass-hi);line-height:1.15}
.ulOv .ulTags{display:flex;gap:8px;flex-wrap:wrap}
.ulOv .ulTags .tag{font-family:var(--sc);font-weight:600;letter-spacing:.03em;border-radius:4px;color:var(--paper-ink)}
.ulOv .ulDs{color:var(--ivory);line-height:1.4;opacity:.92;margin:0}
.ulOv .ulArr{flex:none;display:flex;align-items:center;justify-content:center;padding:0 0 .12em;line-height:1;font-family:var(--serif);font-weight:700;color:var(--brass-hi);
  border:1.5px solid var(--brass);border-radius:50%;background:rgb(var(--night-rgb) / .75);cursor:pointer}
.ulOv .ulArr:disabled{opacity:.3;cursor:default}
.ulOv .ulCount{font-family:var(--sc);font-weight:600;letter-spacing:.03em;color:var(--dim)}
.ulOv .ulGo{flex:none;font-family:var(--sc);font-weight:600;letter-spacing:.03em;color:var(--paper-ink);background:linear-gradient(180deg,var(--brass-hi),var(--brass));border:1.5px solid var(--brass-lo);border-radius:6px;cursor:pointer}
/* a page that keeps the cards' words back (what a Preparation gave): closer cards, and the line the words are read in.
   Every description of the page lies in the same place, only the one in use showing, so the line is as tall as the
   longest from the start: nothing moves and nothing is cut off when a card is opened. */
.ulOv .ulItem.tip{cursor:pointer;outline:none}
.ulOv .ulItem.tip:focus-visible .card{box-shadow:0 0 0 3px var(--brass-hi),0 14px 26px rgba(0,0,0,.6)}
.ulOv .ulNote{color:var(--ivory);line-height:1.35;opacity:.92;margin:0}
.ulOv .ulTip{display:grid;width:100%;box-sizing:border-box;justify-items:center;align-items:center;text-align:center;border-top:1px solid var(--rule)}
.ulOv .ulTip>*{grid-area:1 / 1;visibility:hidden;margin:0;min-width:0}
.ulOv .ulTip>.on{visibility:visible}
.ulOv .ulHint{font-style:italic;color:var(--dim)}
.ulOv .ulTipTxt{color:var(--ivory);line-height:1.4}
.ulOv .ulTipTxt b{display:block;font-family:var(--sc);font-weight:600;letter-spacing:.03em;color:var(--brass-hi)}
body.desk .ulOv .ulBox{padding:28px 44px 30px;gap:12px;min-width:560px}
body.desk .ulOv .brief .ulItems{gap:24px} body.desk .ulOv .brief .ulItem{width:240px}
body.desk .ulOv .brief.n1{width:560px} body.desk .ulOv .brief.n2{width:640px} body.desk .ulOv .brief.n3{width:880px}
body.desk .ulOv .ulBox.brief.many{width:1110px} body.desk .ulOv .brief.many .ulItems{width:768px}
body.desk .ulOv .brief .ulCard{height:302px;padding-top:8px;box-sizing:border-box} body.desk .ulOv .brief.many .ulTxt{min-height:0}
body.desk .ulOv .ulNote{font-size:18px;margin-top:10px}
body.desk .ulOv .ulTip{padding-top:12px;margin-top:4px;font-size:18px} body.desk .ulOv .ulTipTxt b{font-size:19px;margin-bottom:2px}
body.port .ulOv .brief .ulItems{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:12px 6px}
body.port .ulOv .brief .ulItem{flex-direction:column;align-items:center;gap:0;width:126px;text-align:center}
body.port .ulOv .brief .ulCard{align-items:flex-end;justify-content:center;height:182px;padding-top:6px;box-sizing:border-box}
body.port .ulOv .brief .ulNm{display:none} body.port .ulOv .brief .ulTags{justify-content:center;margin-top:8px}
body.port .ulOv .ulNote{font-size:14px;margin-top:6px}
body.port .ulOv .ulTip{padding-top:10px;margin-top:2px;font-size:14px;line-height:1.35} body.port .ulOv .ulTipTxt b{font-size:15px}
body.desk .ulOv .ulBox.many{width:1350px}
body.desk .ulOv .ulEy{font-size:18px} body.desk .ulOv h2{font-size:46px;line-height:1.1}
body.desk .ulOv .ulRow{margin-top:10px}
body.desk .ulOv .ulItems{gap:30px} body.desk .ulOv .many .ulItems{width:1020px}
body.desk .ulOv .ulItem{width:320px} body.desk .ulOv .ulCard{height:294px}
body.desk .ulOv .ulNm{display:none}
body.desk .ulOv .ulTags{justify-content:center;margin-top:20px} body.desk .ulOv .ulTags .tag{font-size:15px;padding:2px 9px}
body.desk .ulOv .ulDs{font-size:18px;margin-top:10px} body.desk .ulOv .many .ulTxt{min-height:170px}
body.desk .ulOv .ulArr{width:64px;height:64px;font-size:44px;margin:115px 26px 0}
body.desk .ulOv .ulCount{flex-basis:100%;font-size:18px;margin-top:6px}
body.desk .ulOv .ulGo{font-size:22px;padding:13px 46px;margin-top:6px}
body.port .ulOv .ulBox{width:418px;padding:16px 14px 18px;gap:8px}
body.port .ulOv .ulEy{font-size:12px} body.port .ulOv h2{font-size:27px;line-height:1.1}
body.port .ulOv .ulRow{width:100%;align-items:center;justify-content:space-between;margin-top:4px}
body.port .ulOv .ulItems{order:0;flex:none;width:100%;flex-direction:column;align-items:stretch;gap:16px}
body.port .ulOv .ulItem{flex-direction:row;align-items:flex-start;gap:12px;text-align:left}
body.port .ulOv .ulCard{width:126px;align-items:flex-start}
body.port .ulOv .ulTxt{flex:1 1 auto;min-width:0}
body.port .ulOv .ulNm{font-size:18px} body.port .ulOv .ulTags{margin-top:5px;gap:6px} body.port .ulOv .ulTags .tag{font-size:12px;padding:1px 7px}
body.port .ulOv .ulDs{font-size:14px;line-height:1.35;margin-top:6px}
body.port .ulOv .ulArr{order:1;width:44px;height:44px;font-size:30px;margin-top:10px} body.port .ulOv #ulNext{order:3}
body.port .ulOv .ulCount{order:2;flex:1 1 auto;font-size:14px;margin-top:10px}
body.port .ulOv .ulGo{font-size:17px;padding:11px 30px;margin-top:6px;min-width:60%}

/* OPEN AND SHUT, unmistakable (Chris 10/2: "serious illumination, maybe a little shimmer, when it's open, and a
   clear darkness obscuring when it's closed"). An open door breathes warm light around its edge, a sheen
   crosses its face, and light spills from under it; a shut door sinks into shadow behind a dark veil. */
.room.study .door .lite{position:absolute;inset:0;pointer-events:none;z-index:0}
.room.study .door:not(.closed) svg{animation:doorBreathe 3.2s ease-in-out infinite}
@keyframes doorBreathe{0%,100%{filter:drop-shadow(0 0 6px rgba(255,206,120,.35))}50%{filter:drop-shadow(0 0 22px rgba(255,206,120,.75)) brightness(1.08)}}
.room.study .door:not(.closed) .lite{
  background:radial-gradient(60% 9% at 50% 99%,rgba(255,214,140,.65),transparent 70%),
    linear-gradient(105deg,transparent 35%,rgba(255,240,205,.32) 48%,rgba(255,240,205,.08) 56%,transparent 64%);
  background-size:100% 100%,260% 100%;background-repeat:no-repeat;animation:doorSheen 4.2s ease-in-out infinite;mix-blend-mode:screen}
.room.study .door.arm:not(.closed) .lite{animation-delay:2.1s}
@keyframes doorSheen{0%{background-position:0 0,130% 0}55%,100%{background-position:0 0,-130% 0}}
body.desk .room.study .door .lite{clip-path:inset(60px 10px 22px 10px round 64px 64px 0 0)}
.room.study .door:not(.closed) .ds{color:#9ff0c8 !important;text-shadow:0 0 10px rgba(120,230,170,.9),0 1px 2px #000 !important}
.room.study .door.closed svg{filter:grayscale(.7) brightness(.42)}
.room.study .door.closed .lite{background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.6));clip-path:none}
.room.study .door.closed .dl{filter:grayscale(.6) brightness(.6)}
body.port .room.study .door:not(.closed){box-shadow:0 0 14px rgba(255,206,120,.45) !important;border-color:#e6bd5c !important}
body.port .room.study .door.closed{filter:brightness(.6)}
body.noanim .room.study .door svg,body.noanim .room.study .door .lite{animation:none}

/* Rarity is a meaning, not chrome: the Rare and Legendary frames stay gold in every room (Chris 10/2) */

/* "HEY, CLICK ME" (Chris 10/2, after Balatro; research in design/SHOP-RESEARCH-2026-10-02.md): the Tutors on offer
   sway very slightly, each out of step with the next, and hold still while hovered. Only the Tutors move, so the
   motion keeps its meaning. Off with Animations, and for players who ask their system for reduced motion. */
.room.study .shelf.tutors .card{animation:cardSway 6.2s ease-in-out infinite}
.room.study .shelf.tutors .card:nth-child(2){animation-delay:-1.3s} .room.study .shelf.tutors .card:nth-child(3){animation-delay:-2.9s}
.room.study .shelf.tutors .card:nth-child(4){animation-delay:-4.1s} .room.study .shelf.tutors .card:nth-child(5){animation-delay:-5.4s}
.room.study .shelf.tutors .card:hover,.room.study .shelf.tutors .card.sel{animation-play-state:paused}
@keyframes cardSway{0%,100%{rotate:-.7deg;translate:0 0}25%{rotate:0deg;translate:0 -2px}50%{rotate:.7deg;translate:0 0}75%{rotate:0deg;translate:0 1px}}
body.noanim .room.study .shelf.tutors .card{animation:none}
@media (prefers-reduced-motion:reduce){ .room.study .shelf.tutors .card{animation:none} }

/* ================= THE THREE SHAPES (Chris 10/2: "everything is the same size, so you don't tell Tutors,
   Books and Consumables apart"; design/SHOP-RESEARCH-2026-10-02.md). Tutors stay full cards and alone sway.
   A Book is a bound volume standing on a plank; a token is a coin; a Run Upgrade is a ticket. ================= */

/* --- the Book: leather boards, a spine with raised bands, page edges, a ribbon; it slides up off the shelf --- */
.card.sh-vol{width:192px;height:268px;border:0;border-radius:3px 9px 9px 3px;overflow:visible;
  background:linear-gradient(90deg,rgba(0,0,0,.35) 0,rgba(0,0,0,0) 26px,rgba(255,255,255,.06) 27px,rgba(0,0,0,0) 30px),
    radial-gradient(120% 80% at 70% 20%,#8a3a2e,#5e221a 70%);
  box-shadow:3px 3px 0 #efe3c4,5px 5px 0 #cdb98d,6px 6px 0 #8c7650,0 12px 20px rgba(0,0,0,.55)}
.card.sh-vol.sh-rep{background:linear-gradient(90deg,rgba(0,0,0,.35) 0,rgba(0,0,0,0) 26px,rgba(255,255,255,.06) 27px,rgba(0,0,0,0) 30px),
    radial-gradient(120% 80% at 70% 20%,#3d6150,#213a2f 70%)}
.card.sh-vol::before{content:'';position:absolute;left:0;top:0;bottom:0;width:26px;border-radius:3px 0 0 3px;pointer-events:none;
  background:repeating-linear-gradient(180deg,transparent 0 34px,rgba(236,190,80,.55) 34px 36px,rgba(0,0,0,.35) 36px 38px,transparent 38px 62px)}
.card.sh-vol::after{content:'';position:absolute;right:30px;bottom:-16px;width:14px;height:30px;background:#b8352a;pointer-events:none;
  clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%)}
.card.sh-vol.sh-rep::after{background:#c9a24a}
.card.sh-vol .cb{display:none}
.card.sh-vol .art{left:40px;right:14px;top:18px;height:132px;border:1px solid rgba(236,190,80,.6);border-radius:2px;box-shadow:0 0 0 3px rgba(0,0,0,.25)}
.card.sh-vol .nm{left:34px;right:10px;top:158px;height:58px;color:#f2e2b8;text-shadow:0 1px 1px rgba(0,0,0,.6);font-size:20px}
.card.sh-vol .nm.long{font-size:17px}
.card.sh-vol .pr{left:calc(50% + 14px)}
.card.sh-vol:hover{transform:translateY(-12px)}
.card.sh-vol.sel{transform:translateY(-16px);box-shadow:3px 3px 0 #efe3c4,5px 5px 0 #cdb98d,6px 6px 0 #8c7650,0 0 0 3px var(--brass-hi),0 18px 26px rgba(0,0,0,.6)}
/* the plank the books stand on */
body.desk .room.study .shelf.books .cards{align-items:flex-end;height:268px;position:relative;padding-top:0;gap:30px}
body.desk .room.study .shelf.books .cards::after{content:'';position:absolute;left:24px;right:24px;bottom:-14px;height:12px;border-radius:2px;pointer-events:none;
  background:linear-gradient(180deg,#7a5634,#4a3219);box-shadow:0 6px 10px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,220,170,.25)}

/* --- the coin: a one-use token, smaller, round, its name on a plate beneath --- */
.card.sh-coin{width:162px;height:262px;border:0;background:none;box-shadow:none;overflow:visible}
.card.sh-coin .cb{display:none}
.card.sh-coin .art{left:6px;right:6px;top:8px;height:150px;border-radius:50%;border:5px solid #b98a3a;
  box-shadow:inset 0 0 0 2px rgba(255,236,190,.6),0 8px 16px rgba(0,0,0,.55)}
.card.sh-coin.u .art{border-color:#bdbdb6} .card.sh-coin.r .art{border-color:#e6bd5c;box-shadow:inset 0 0 0 2px rgba(255,236,190,.7),0 0 14px rgba(236,190,80,.5),0 8px 16px rgba(0,0,0,.55)}
.card.sh-coin .nm{top:168px;height:48px;color:var(--ivory);font-size:19px}
.card.sh-coin .nm.long{font-size:16px}
.card.sh-coin:hover{transform:translateY(-6px) rotate(-3deg)}
.card.sh-coin.sel{transform:translateY(-8px);box-shadow:none} .card.sh-coin.sel .art{box-shadow:0 0 0 4px var(--brass-hi),0 12px 22px rgba(0,0,0,.6)}

/* --- the ticket: a Run Upgrade, kept for the run; notched sides and a torn-off line above the price --- */
.card.sh-tkt{width:204px;height:262px;border-width:8px;border-radius:8px;
  -webkit-mask:radial-gradient(circle 13px at 0 74%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 13px at 100% 74%,#0000 98%,#000) right/51% 100% no-repeat;
          mask:radial-gradient(circle 13px at 0 74%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 13px at 100% 74%,#0000 98%,#000) right/51% 100% no-repeat}
.card.sh-tkt .cb{display:none}
.card.sh-tkt::before{content:'';position:absolute;left:16px;right:16px;top:calc(74% - 9px);border-top:2px dashed rgba(107,77,34,.45);pointer-events:none}
.card.sh-tkt .art{top:10px;height:118px}
.card.sh-tkt .nm{top:132px;height:50px;font-size:19px}
.card.sh-tkt .nm.long{font-size:16px}
/* how many you hold of a card that can be bought again (Sponsorship): a small plate at the card's corner */
.card .held{position:absolute;right:6px;top:6px;z-index:2;padding:2px 8px;border-radius:10px;font-family:var(--sc);font-weight:600;font-size:14px;letter-spacing:.03em;line-height:1.2;
  white-space:nowrap;background:var(--paper-ink);color:var(--paper);box-shadow:0 1px 3px rgba(0,0,0,.35)}
.card.sh-tkt.sel{box-shadow:none;filter:drop-shadow(0 0 4px var(--brass-hi)) drop-shadow(0 12px 14px rgba(0,0,0,.55))}

/* the price tab says "can't afford" with a hatch, not only a color (Chris 10/2) */
.card.cant .pr{background:repeating-linear-gradient(135deg,var(--paper-2) 0 4px,#cdb98d 4px 8px)}

/* sizes (Chris 10/2): the swaying Tutors a touch smaller so they never seem to touch, and the books shorter so
   they and their plank sit inside the shelf */
body.desk .room.study .shelf.tutors .card{zoom:.9}
body.desk .room.study .shelf.tutors .cards{gap:30px;padding-top:18px}
body.desk .room.study .card.sh-vol{zoom:.86}

/* ---------------- the playtest bot's faults (10/5): study ---------------- */
/* A NOTICE NEVER TAKES ROOM IN THE PHONE'S COLUMN (fault 10). The phone stage is a column, and play.css sets every
   child of the stage in it ("body.port #stage>*", which outranks the two rules above). A School notice or an
   "Unlocked for future runs" notice that was still up when a Board was dealt took its own height out of the column:
   the Board was pushed down by 43 to 110 pixels and Hint, Undo, Reroll and Menu fell off the bottom of the screen.
   The unlock card at a Run's end had the same fault. All three lie over the stage, as they do on the desk. */
body.port #stage>.schoolNote,body.port #stage>.ulOv{position:absolute}
/* a notice sits just under the band and the rail, clear of the Board's top ranks, and a second one stacks under the first */
body.port #stage>.schoolNote{top:146px}
body.port #stage>.schoolNote~.schoolNote{top:206px}
body.port.inStudy #stage>.schoolNote{top:70px} body.port.inStudy #stage>.schoolNote~.schoolNote{top:130px}
/* THE STRIPE RACK WITH STRIPES OF YOUR OWN (fault 17): the "Yours" lines took the room the reroll needed, and it slid
   behind "Return to the Study". The rack's board is drawn smaller and the list is set smaller, so the whole column
   stays inside its panel however many Stripes are listed. */
body.desk .room.armory .station.owns .pane.board{width:176px;height:176px;padding:6px;margin-top:12px}
body.desk .room.armory .station.owns p.geo{margin-top:10px}
body.desk .room.armory .station.owns p.geo.mine{font-size:16px;line-height:1.3;margin-top:2px;max-height:63px;overflow:hidden}
body.desk .room.armory .station.owns .sashes{margin-top:12px}
body.desk .room.armory .station.owns .rr{margin-top:12px}

/* THE COMPOSITION'S ENTRY (Chris 10/6: the wax letter is gone, and the sheet "looks a little simplistic") */
.room.hall .manu .vorn{justify-content:flex-start} .room.hall .manu .vorn i{flex-basis:120px} .room.hall .manu .vorn i:first-child{display:none}
.room.hall .ms-board{border:3px solid #3b2c1b;box-shadow:0 0 0 5px #caa24c,0 0 0 6.5px #3b2c1b,0 12px 22px rgba(40,25,5,.35)}
.room.hall .ms-terms{color:var(--paper-ink)} .room.hall .ms-terms p{margin:0;line-height:1.3;color:var(--paper-ink)}
.room.hall .mt-h{font-family:var(--sc);font-weight:600;letter-spacing:.03em;color:#7a2a1c}
.room.hall .hdoor{display:flex;flex-direction:column;align-items:center;margin-top:26px} .room.hall .hdoor svg{display:block;height:auto;filter:drop-shadow(0 8px 14px rgba(0,0,0,.5))}
.room.hall .hdoor span{font-family:var(--sc);font-weight:600;letter-spacing:.03em;color:var(--brass-hi);margin-top:12px} .room.hall .hdoor.shut span{color:var(--dim)} .room.hall .hdoor.shut svg{opacity:.8}
body.desk .room.hall .manu .vorn{margin:14px 0 0} body.desk .room.hall h1{margin:8px 0 12px}
body.desk .room.hall .ms-board{left:56px;top:250px;width:290px}
body.desk .room.hall .ms-terms{position:absolute;left:386px;top:244px;width:226px;font-size:17.5px} body.desk .room.hall .mt-h{font-size:16px;margin:0 0 3px} body.desk .room.hall .ms-terms p{margin-bottom:16px}
body.desk .room.hall .hdoor svg{width:78px} body.desk .room.hall .hdoor span{font-size:18px}
body.port .room.hall .manu{padding-bottom:22px} body.port .room.hall .manu .vorn{margin:8px 0 10px} body.port .room.hall .ms-terms{margin-top:16px;font-size:15px} body.port .room.hall .mt-h{font-size:13px;margin-bottom:2px} body.port .room.hall .ms-terms p{margin-bottom:10px}
body.port .room.hall .hdoor{margin-top:12px} body.port .room.hall .hdoor svg{width:44px} body.port .room.hall .hdoor span{font-size:14px}

.room.hall .hp.hsub{font-style:italic;margin-top:0}