/* 娱乐房（fun-rooms.js）：KTV 包厢和麻将房收在一起，点标签展开子栏，在子栏里开房。
   和下面「房间码」「创建房间」一样是右侧面板里的一段（分隔线分段，不套框）；子栏里的入口卡压平，只留说明、价格、开房那一行。 */
/* 一屏放下（2026-10-16，用户：「用各种方法把滚动条优化掉」）：三个标签一次只摊开一种，房间码收成最后一行；
   万一屏幕特别矮还放不下，栏内还能滑，但不画滚动条 */
#lobby .room-options{max-height:100%;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
#lobby .room-options::-webkit-scrollbar{display:none}
.fun-rooms{display:grid;gap:10px;padding:12px 0 14px;border-bottom:1px solid var(--line,rgba(216,176,120,.28))}
.fun-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.fun-head b{font-size:13px;font-weight:700;color:#e2c37f;letter-spacing:.5px}
.fun-head small{font-size:11px;color:var(--muted,#b8a98f)}
.fun-head .fun-tut{margin-left:auto;align-self:center;padding:4px 12px;border-radius:999px;font:inherit;font-size:12px;font-weight:700;cursor:pointer;color:#3a2306;border:1px solid #f6dc9a;background:linear-gradient(180deg,#fbe6ad,#d9a94a)}
.fun-head .fun-tut.fresh{animation:fun-tut-call 2.2s ease-in-out infinite}
@keyframes fun-tut-call{50%{box-shadow:0 0 0 3px rgba(246,220,154,.35),0 0 14px rgba(246,210,120,.55)}}
@media (prefers-reduced-motion:reduce){.fun-head .fun-tut.fresh{animation:none}}
.fun-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
#lobby .room-options .fun-tab{display:grid;gap:1px;justify-items:start;text-align:left;padding:8px 12px;min-height:0;border-radius:12px;border:1px solid var(--line,rgba(216,176,120,.28));background:transparent;color:inherit;cursor:pointer}
#lobby .room-options .fun-tab b{font-size:14px;font-weight:600}
#lobby .room-options .fun-tab small{font-size:11px;color:var(--muted,#b8a98f)}
#lobby .room-options .fun-tab:hover{border-color:rgba(226,195,127,.6)}
#lobby .room-options .fun-tab.on{border-color:#e2b65e;background:rgba(226,182,94,.12);color:#f1d08a}
.fun-panel{display:grid}
.fun-panel[hidden],.fun-panel>[hidden]{display:none!important}
/* 入口卡（ktv.js / mahjong.js 生成）在子栏里压平：不要底色、边框、标题和霓虹招牌 */
.fun-panel .ktv-entry,.fun-panel .mj-entry{display:grid;gap:5px;padding:2px 0 0;background:none;border:0;border-radius:0;box-shadow:none;color:inherit;overflow:visible}
.fun-panel .ktv-entry>b,.fun-panel .mj-entry>b,.fun-panel .ktv-neon{display:none}
.fun-panel .ktv-entry>span,.fun-panel .mj-entry>span{padding-right:0;font-size:12px;line-height:1.55;color:var(--muted,#b8a98f);opacity:1}
.fun-panel #ktvPromo,.fun-panel .mj-entry-price{color:#e2c37f;font-weight:600}
.fun-panel .ktv-entry .ktv-open-count{color:var(--muted,#b8a98f)}
.fun-panel .ktv-entry-actions:not(:has(button:not([hidden]))){display:none}
.fun-create{display:grid;grid-template-columns:minmax(0,1fr) 96px auto;gap:8px;align-items:end;margin-top:4px}
.fun-create label{display:grid;gap:3px;font-size:12px;color:var(--muted,#b8a98f)}
.fun-create button{white-space:nowrap}
.mj-entry-price:empty{display:none}
@media(max-width:700px){.fun-rooms{padding:8px 0 10px;gap:8px}.fun-create{grid-template-columns:minmax(0,1fr) 84px auto}#lobby .room-options .fun-tab{padding:7px 10px}}
/* 「自习室」那页：原来的创建房间表单搬进来，一行排开（名称 | 类型 | 时长 | 创建） */
#funPanel #createForm{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px;margin:0;padding:2px 0 0;border:0}
#funPanel #createForm>label{flex:1 1 130px;min-width:0}
#funPanel #createForm>label#hoursLabel{flex:0 1 96px}
#funPanel #createForm>button{flex:none;white-space:nowrap}
.fun-note{flex-basis:100%;margin:0;font-size:12px;line-height:1.55;color:var(--muted,#b8a98f)}
/* 房间码：最下面一行「房间码 [____] [进入]」 */
#lobby .room-options .fun-code{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;margin:0;padding:12px 0 2px;border:0}
#lobby .room-options .fun-code label{display:contents;font-size:12px;color:var(--muted,#b8a98f)}
#lobby .room-options .fun-code button{white-space:nowrap;min-width:72px}
#lobby .room-options .fun-rooms{border-bottom:1px solid var(--line,rgba(216,176,120,.28))}
/* 矮屏（手机横屏、小笔记本）：说明文字都收起来 */
@media (max-height:600px){
 .fun-head small,#lobby .room-options .fun-tab small,.fun-panel .ktv-entry>span,.fun-panel .mj-entry>span,.fun-note{display:none}
 .fun-rooms{gap:8px;padding:8px 0 10px}
 #lobby .room-options .fun-tab{padding:6px 10px}
 #lobby .room-options .fun-code{padding-top:8px}
}
/* 小手机横着拿（宽 ≤ 700、矮 ≤ 520）：大厅本来按竖屏把欢迎横幅叠在上面，右栏就挤得放不下——改成左右两栏、标题栏压矮 */
@media (max-width:700px) and (max-height:520px) and (orientation:landscape){
 body:not(.in-room)>header{height:52px!important;padding:6px 12px!important;align-items:center!important}
 body:not(.in-room)>header small{display:none}
 body:not(.in-room) main{height:calc(100dvh - 52px)!important;padding:6px 10px 8px!important}
 #lobby{grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr)!important;grid-template-rows:1fr!important;gap:8px!important;align-items:stretch!important}
 #lobby .welcome{height:auto!important;display:flex!important;flex-direction:column;justify-content:center;padding:10px 12px!important}
 #lobby .welcome h2{font-size:16px!important;margin:4px 0 8px!important;display:block!important}
 #lobby .welcome button{float:none!important;align-self:flex-start;padding:7px 14px!important;font-size:12px!important}
 #lobby .room-options{align-self:stretch!important;padding:6px 12px!important}
}