/* Official top menu of the test rooms. Drawn by src/test-shell.js after the team check passes.
   Bar: crest | main menu "ห้องทดสอบ" (= /test/) whose submenu lists rooms 1–6 by group | › current room | account.
   Palette = royal purple/red of the admin homepage. Each room keeps its own look below the bar; only the offsets at the end adapt them. */
@font-face{font-family:RoyalThai;src:url('/assets/ui/lobby-v3/fonts/NotoSerifThai.ttf') format('truetype');font-weight:100 900;font-display:swap}
:root{--tm-h:56px}
html.test-menu body{padding-top:var(--tm-h);box-sizing:border-box}
#test-menu.tm{position:fixed;top:0;left:0;right:0;z-index:2147482000;box-sizing:border-box;height:var(--tm-h);display:flex;align-items:center;gap:14px;padding:0 20px;
  background:linear-gradient(180deg,#2a1830,#1a1022);border-bottom:1px solid #8c6a3f;box-shadow:0 1px 0 rgba(240,207,147,.12) inset,0 6px 22px rgba(0,0,0,.45);
  font-family:"Noto Sans Thai","Segoe UI",Tahoma,sans-serif;font-size:14px;line-height:1.3;color:#fff1da;text-align:left;letter-spacing:0}
#test-menu *{box-sizing:border-box}
#test-menu a{color:inherit;text-decoration:none}
#test-menu p{margin:0}
#test-menu .tm-brand{display:flex;align-items:center;gap:10px;flex:none;padding:4px 6px;border-radius:8px}
#test-menu .tm-crest{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid #d6ad70;background:radial-gradient(circle at 35% 30%,#5a2a3c,#24142c);color:#f0cf93;font-size:16px}
#test-menu .tm-words{display:flex;flex-direction:column}
#test-menu .tm-words b{font-family:RoyalThai,serif;font-size:16px;font-weight:800;color:#f0cf93}
#test-menu .tm-words small{font-size:10.5px;color:#bfa8b6;letter-spacing:.12em}
#test-menu .tm-brand:hover .tm-words b{color:#fff1da}
/* main menu */
#test-menu .tm-main{display:flex;align-items:stretch;height:100%;margin:0 0 0 10px;padding:0 0 0 14px;list-style:none;border-left:1px solid rgba(214,173,112,.22)}
#test-menu .tm-item{position:relative;display:flex;margin:0;padding:0}
#test-menu .tm-top{position:relative;display:flex;align-items:center;gap:8px;height:100%;margin:0;padding:0 16px;border:0;background:none;color:#fff1da;font:inherit;font-family:RoyalThai,serif;font-size:16px;font-weight:700;cursor:pointer}
#test-menu .tm-top::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:transparent}
#test-menu .tm-top:hover,#test-menu.tm-open .tm-top{background:rgba(214,173,112,.1)}
#test-menu .tm-top.tm-here::after,#test-menu.tm-open .tm-top::after{background:#d6ad70}
#test-menu .tm-caret{font-family:"Noto Sans Thai",sans-serif;font-size:12px;color:#d6ad70;transition:transform .15s}
#test-menu.tm-open .tm-caret{transform:rotate(180deg)}
/* submenu panel */
#test-menu .tm-sub{display:none;position:absolute;top:100%;left:0;width:760px;max-width:calc(100vw - 40px);padding:14px;border:1px solid #8c6a3f;border-top:0;border-radius:0 0 12px 12px;
  background:linear-gradient(180deg,#22142b,#1a1022);box-shadow:0 18px 40px rgba(0,0,0,.6)}
#test-menu.tm-open .tm-sub{display:block}
#test-menu .tm-all{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;margin-bottom:12px;border-radius:9px;border:1px solid rgba(214,173,112,.35);background:rgba(214,173,112,.07)}
#test-menu .tm-all-title{font-family:RoyalThai,serif;font-size:15px;font-weight:700;color:#f0cf93}
#test-menu .tm-all-url{font-family:ui-monospace,Consolas,monospace;font-size:12.5px;color:#bfa8b6}
#test-menu .tm-all:hover,#test-menu .tm-all[aria-current=page]{border-color:#d6ad70;background:rgba(214,173,112,.15)}
#test-menu .tm-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 14px}
#test-menu .tm-col{display:flex;flex-direction:column;gap:4px;min-width:0}
#test-menu .tm-group{padding:2px 10px 6px;font-size:11.5px;letter-spacing:.14em;color:#d6ad70;border-bottom:1px solid rgba(214,173,112,.2);margin-bottom:4px}
#test-menu .tm-room{position:relative;display:flex;align-items:flex-start;gap:10px;padding:9px 10px;border-radius:8px;color:#dcc8d4;transition:background .15s,color .15s}
#test-menu .tm-room:hover{background:rgba(214,173,112,.1);color:#fff1da}
#test-menu .tm-room[aria-current=page]{background:rgba(214,173,112,.16);color:#fff1da;box-shadow:inset 3px 0 0 #d6ad70}
#test-menu .tm-n{flex:none;display:grid;place-items:center;width:24px;height:24px;margin-top:1px;border-radius:50%;border:1px solid rgba(214,173,112,.6);font-size:12.5px;font-weight:700;color:#f0cf93}
#test-menu .tm-room[aria-current=page] .tm-n{background:#d6ad70;border-color:#d6ad70;color:#24142c}
#test-menu .tm-room-words{display:flex;flex-direction:column;min-width:0}
#test-menu .tm-name{font-size:14.5px;font-weight:600}
#test-menu .tm-note{font-size:12px;color:#a891a0}
/* breadcrumb + account */
#test-menu .tm-crumb{display:flex;align-items:center;gap:8px;min-width:0;color:#fff1da;white-space:nowrap}
#test-menu .tm-crumb:empty{display:none}
#test-menu .tm-sep{color:#8c6a3f;font-size:18px}
#test-menu .tm-crumb-n{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#d6ad70;color:#24142c;font-size:12.5px;font-weight:700}
#test-menu .tm-crumb-name{overflow:hidden;text-overflow:ellipsis;font-size:15px;font-weight:600}
#test-menu .tm-account{flex:none;margin-left:auto;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:5px 12px;border-radius:999px;border:1px solid rgba(214,173,112,.3);background:rgba(23,15,32,.55);font-size:13px;color:#dcc8d4}
#test-menu .tm-account::before{content:"●";margin-right:6px;font-size:9px;color:#7fcf8e;vertical-align:2px}
#test-menu a:focus-visible,#test-menu button:focus-visible{outline:2px solid #f0cf93;outline-offset:-2px}
@media (max-width:860px){
  #test-menu.tm{gap:8px;padding:0 10px}
  #test-menu .tm-words,#test-menu .tm-account{display:none}
  #test-menu .tm-main{margin:0;padding:0 0 0 8px}
  #test-menu .tm-item{position:static}
  #test-menu .tm-top{padding:0 10px;font-size:15px}
  #test-menu .tm-sub{left:0;right:0;width:auto;max-width:none;max-height:calc(100vh - var(--tm-h));overflow:auto;border-radius:0;border-left:0;border-right:0}
  #test-menu .tm-cols{grid-template-columns:1fr;gap:10px}
  #test-menu .tm-room{padding:11px 10px}
  #test-menu .tm-crumb{flex:1;gap:6px}
  #test-menu .tm-crumb-name{font-size:14px}
}
@media (prefers-reduced-motion:reduce){#test-menu *{transition:none!important}}
/* room fits: app-like rooms fill the screen below the bar instead of the whole window */
html.test-menu[data-test-room="1"] #lab,html.test-menu[data-test-room="2"] #lab{height:calc(100vh - var(--tm-h))}
@media (max-width:900px){
  html.test-menu[data-test-room="1"] #lab{height:auto;min-height:calc(100vh - var(--tm-h))}
  html.test-menu[data-test-room="2"] #lab{height:calc(100dvh - var(--tm-h))}
}
@media (max-width:600px){html.test-menu[data-test-room="2"] #lab{height:auto;min-height:calc(100dvh - var(--tm-h))}}
html.test-menu[data-test-room="4"] .sidebar{top:var(--tm-h);height:calc(100vh - 164px - var(--tm-h));min-height:0}
html.test-menu[data-test-room="5"] .stage-wrap,html.test-menu[data-test-room="6"] .builder{min-height:calc(100vh - var(--tm-h))}