/* the yuri dev -- a ROOM (js/room.js): one lit canvas, buttons over the things she can use, words at the bottom.
   --s = CSS pixels per art pixel (set by the room). --u = the interface's art pixel, same meaning as in gameui.css. */
#hub.in-room > #hub-cv,#hub.in-room > .hub-labels,#hub.in-room > .hub-hud,#hub.in-room > .hub-hint,#hub.in-room > .hub-menu{display:none!important}
.rm{--s:4px;--u:3px;position:absolute;inset:0;z-index:10;overflow:hidden;background:#ffe1ec;color:#111;font:500 max(15px,calc(5.4*var(--u)))/1.35 'Pixelify Sans','Nunito',system-ui,sans-serif}
.rm *,.rm *::before,.rm *::after{box-sizing:border-box}
.rm [hidden]{display:none!important}
.rm-cv{position:absolute;left:0;top:0;image-rendering:pixelated;cursor:pointer}
.rm-labels{position:absolute;inset:0;pointer-events:none}
.rm-label{position:absolute;transform:translate(-50%,-100%);pointer-events:auto;display:grid;gap:calc(1*var(--u));justify-items:center;text-align:center;cursor:pointer;color:#111;background:none;
  padding:0 calc(1*var(--u));border-style:solid;border-color:transparent;border-width:calc(3*var(--u)) calc(3*var(--u)) calc(4*var(--u));
  border-image:url(../ui/tag_p.png) 2 2 3 2 fill/calc(3*var(--u)) calc(3*var(--u)) calc(4*var(--u)) stretch;image-rendering:pixelated;animation:rm-pop .16s steps(3) both}
.rm-label b{font:400 max(9px,calc(3*var(--u)))/1.2 'Press Start 2P',ui-monospace,monospace;white-space:nowrap}
.rm-label small{font:700 max(12px,calc(4.2*var(--u)))/1.1 'Pixelify Sans',sans-serif;color:#333;white-space:nowrap}
.rm-label.near,.rm-label:hover,.rm-label:focus-visible{border-image-source:url(../ui/tag_y.png)}
.rm-label.near::after{content:'E';position:absolute;right:calc(-5*var(--u));top:calc(-5*var(--u));font:400 max(8px,calc(2.6*var(--u)))/1 'Press Start 2P',monospace;background:#fff;border:var(--u) solid #8a6a9a;padding:calc(1*var(--u)) calc(1.4*var(--u))}
@keyframes rm-pop{from{opacity:0;margin-top:calc(2*var(--u))}to{opacity:1;margin-top:0}}
@media (hover:none){.rm-label.near::after{display:none}}
.rm-hud{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:12px;padding:12px 16px;pointer-events:none}
.rm-hud>*{pointer-events:auto}
.rm-hud .brand{background:#fff;border:3px solid #111;border-radius:4px;box-shadow:0 4px 0 #111;padding:6px 12px 6px 8px}
.rm-name{font:400 max(10px,calc(3.4*var(--u)))/1 'Press Start 2P',ui-monospace,monospace;background:rgba(255,255,255,.9);border:var(--u) solid #8a6a9a;padding:calc(2*var(--u)) calc(3*var(--u))}
.rm-me{margin-left:auto}
.rm-menu{position:absolute;right:16px;top:64px;z-index:5;display:grid;min-width:280px;background:#fff;border:3px solid #111;border-radius:4px;box-shadow:0 4px 0 #111}
.rm-menu button{all:unset;cursor:pointer;padding:13px 14px;font:800 14px/1.3 'Nunito',system-ui,sans-serif;color:#111;border-bottom:2px solid #f6dbe6}
.rm-menu button:last-child{border-bottom:0}.rm-menu button:hover,.rm-menu button:focus-visible{background:#ffd3e4}
.rm-hint{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);font:800 12px/1 'Nunito',sans-serif;color:#111;background:rgba(255,255,255,.85);padding:8px 12px;border-radius:999px;white-space:nowrap;animation:rm-hint 9s forwards;pointer-events:none}
@keyframes rm-hint{0%,80%{opacity:1}100%{opacity:0}}
.rm-say{position:absolute;left:50%;bottom:calc(8*var(--u));transform:translateX(-50%);width:min(calc(100% - 24px),calc(230*var(--u)));z-index:6;image-rendering:pixelated;
  border-style:solid;border-color:transparent;border-width:calc(8*var(--u));border-image:url(../ui/bubble.png) 8 fill/calc(8*var(--u)) stretch;display:flex;flex-direction:column;gap:calc(2.5*var(--u))}
.rm-say .who{font:400 max(9px,calc(3*var(--u)))/1 'Press Start 2P',monospace;color:#b0457a;text-transform:uppercase}
.rm-say p{margin:0;font-weight:600;min-height:2.7em}
.rm-say .btns{display:flex;flex-wrap:wrap;gap:calc(2*var(--u));justify-content:flex-end}
.rm-say .pxbtn{font-size:max(9px,calc(3*var(--u)));padding:calc(3*var(--u)) calc(4*var(--u))}
.rm-say .pxbtn.alt{background:#fff}
@media (max-width:720px){.rm-name,.rm-hint{display:none}.rm-label small{display:none}}
@media (prefers-reduced-motion:reduce){.rm-label,.rm-hint{animation:none}}

/* ---- the chalkboard: the quill's search screen (a TYD_UI screen, over the room) */
.gx-search{background:rgba(74,53,96,.5)}
.chalkwrap{position:relative;z-index:1;flex:1;min-height:0;display:flex;justify-content:center;padding:0 calc(5*var(--u)) calc(6*var(--u))}
.chalk{width:min(100%,calc(300*var(--u)));min-height:0;display:flex;flex-direction:column;gap:calc(3*var(--u));color:#fff;border-style:solid;border-color:transparent;border-width:calc(8*var(--u));
  border-image:url(../ui/chalk.png) 8 fill/calc(8*var(--u)) stretch}
.chalk-line{position:relative;display:flex;align-items:flex-end;gap:calc(3*var(--u));border-bottom:calc(1*var(--u)) solid #fff;padding:calc(2*var(--u)) calc(1*var(--u)) calc(1.5*var(--u))}
.chalk-label{flex:none;font:400 max(12px,calc(5*var(--u)))/1 'Press Start 2P',monospace}
.chalk-input{flex:1;min-width:0;background:none;border:0;outline:0;color:#fff;caret-color:#ffe85e;font:400 max(12px,calc(5*var(--u)))/1 'Press Start 2P',monospace;text-transform:uppercase;padding:0}
.chalk-measure{position:absolute;visibility:hidden;white-space:pre;font:400 max(12px,calc(5*var(--u)))/1 'Press Start 2P',monospace;text-transform:uppercase}
.chalk-quill{position:absolute;bottom:calc(1*var(--u));width:calc(14*var(--u));height:calc(20*var(--u));background:url(../ui/quill.png) 0 0/100% 100% no-repeat;pointer-events:none;transform-origin:20% 95%;transition:left .08s steps(2)}
.chalk-quill.write{animation:chalk-write .16s steps(2) infinite}
@keyframes chalk-write{50%{transform:rotate(-9deg) translateY(calc(-1*var(--u)))}}
.chalk-hint{font-weight:600;color:#eef1ff}
.chalk-tags{display:flex;flex-wrap:wrap;gap:calc(1.5*var(--u))}
.chalk-tags .chipx{color:#111}
.chalk-results{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:calc(2*var(--u));padding-right:calc(1*var(--u))}
.chalk-row{display:flex;align-items:center;gap:calc(3*var(--u));padding:calc(2*var(--u));border:calc(1*var(--u)) dashed rgba(255,255,255,.55);flex:none}
.chalk-row .item{--k:var(--us)}
.chalk-row .t{flex:1;min-width:0}.chalk-row .t b{display:block;font-weight:700;font-size:1.08em}.chalk-row .t small{color:#e4e9ff;font-weight:600}
.chalk-row .do{display:flex;flex-direction:column;gap:calc(1.5*var(--u));flex:none}
.chalk-row .gx-btn{min-height:calc(14*var(--u));font-size:max(9px,calc(3.1*var(--u)));color:#111}
.gx .chalk-input:focus-visible{outline:none}
.chalk-none{font-weight:700;padding:calc(3*var(--u)) 0}
.gx.compact .chalk-row{flex-wrap:wrap}.gx.compact .chalk-row .do{flex-direction:row;width:100%}.gx.compact .chalk-row .do .gx-btn{flex:1}