/* halls-street.css — 大厅广场「SVIP 街区」(P2b;设计=design_handoff_svip_prestige 04 v3,wiki 17 L4)
   本页固定暗色(色值直取设计 tokens,不随主题);位置即等级:顶层 SSVIP → 高层 SVIP4-6 → 标准层 SVIP1-3 → 街尾新街坊。
   数据=CS 可配 halls_json(tier 字符串或 level 整数);收藏横排/三级信号 P3 房间基建就绪后接。 */

@keyframes hsFlow3 { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }
@keyframes hsSpin { to { transform: rotate(360deg); } }
@keyframes hsSheen { 0%,55% { transform: translateX(-180%) skewX(-18deg); } 85%,100% { transform: translateX(420%) skewX(-18deg); } }
@keyframes hsBreath { 0%,100% { box-shadow: 0 0 8px rgba(157,107,255,.35),0 0 22px rgba(157,107,255,.18); } 50% { box-shadow: 0 0 16px rgba(157,107,255,.65),0 0 42px rgba(157,107,255,.35); } }
@keyframes hsOnline { 0%,100% { box-shadow: 0 0 0 0 rgba(99,230,184,.5); } 60% { box-shadow: 0 0 0 6px rgba(99,230,184,0); } }

/* ---- 层级标题 ---- */
.hs-tier { display: flex; align-items: center; gap: 12px; margin: 32px 0 14px; }
.hs-tier .lb { font: 800 12px var(--mono, ui-monospace, monospace); letter-spacing: 3px; white-space: nowrap; }
.hs-tier .rule { flex: 1; height: 1.5px; }
.hs-tier .nt { font: 500 10.5px var(--cn, sans-serif); color: rgba(232,230,240,.3); }
.hs-tier--ss .lb { color: #f6d77b; } .hs-tier--ss .rule { background: linear-gradient(90deg,rgba(246,215,123,.4),transparent); }
.hs-tier--high .lb { color: #c4a8ff; } .hs-tier--high .rule { background: linear-gradient(90deg,rgba(157,107,255,.4),transparent); }
.hs-tier--std .lb { color: rgba(232,230,240,.5); } .hs-tier--std .rule { background: linear-gradient(90deg,rgba(255,255,255,.14),transparent); }
.hs-tier--plain .lb { color: rgba(232,230,240,.35); } .hs-tier--plain .rule { height: 1px; background: linear-gradient(90deg,rgba(255,255,255,.1),transparent); }

/* ---- 通用 ---- */
.hs-grid-high { display: grid; grid-template-columns: repeat(auto-fit, minmax(390px, 1fr)); gap: 18px; }
.hs-grid-std { display: grid; grid-template-columns: repeat(auto-fill, minmax(285px, 1fr)); gap: 16px; }
.hs-grid-plain { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 12px; }
.hs-card { color: inherit; text-decoration: none; }
/* 卡片=整块可点的链接,没有需要复制的正文。横向卡带用鼠标拖着滑时会顺手框选到房名,
   而房名是 background-clip:text 的渐变字 —— Chrome 对这种字的选中反白有已知渲染缺陷:
   底下糊一整块紫蓝选中底 + 字色不跟着变,看着像撞色错版(2026-07-28 用户:「有点色盲」)。
   卡带整体禁选,选中底就永远不会出现。 */
.hs-grid-ss, .hs-grid-high, .hs-grid-std, .hs-grid-plain, .hs-favrow, .hs-rafrow, .hs-viploop, .hs-minewrap, .hs-minecell { -webkit-user-select: none; user-select: none; }
/* 万一别处(搜索结果/整页 Ctrl+A)仍选到:选中底改成低饱和描边感,不再是实心撞色块 */
.hs-card ::selection, .hs-card::selection { background: rgba(157, 107, 255, .3); color: #fff; }
.hs-dot { position: absolute; right: 2px; bottom: 2px; width: 10px; height: 10px; border-radius: 50%; background: #63e6b8; border: 2px solid #14121c; animation: hsOnline 2s ease-out infinite; }
.hs-tagchip { display: inline-flex; align-items: center; height: 21px; padding: 0 10px; border-radius: 7px; font: 700 10.5px var(--cn, sans-serif); }
.hs-tag0 { background: rgba(99,230,184,.1); border: 1px solid rgba(99,230,184,.35); color: #63e6b8; }
.hs-tag1 { background: rgba(88,213,242,.1); border: 1px solid rgba(88,213,242,.35); color: #58d5f2; }
.hs-tag2 { background: rgba(255,107,211,.1); border: 1px solid rgba(255,107,211,.35); color: #ff6bd3; }
.hs-sponsor { display: inline-flex; align-items: center; gap: 5px; height: 19px; padding: 0 9px; border-radius: 6px; background: rgba(246,215,123,.07); border: 1px solid rgba(246,215,123,.35); font: 700 9.5px var(--cn, sans-serif); color: #f6d77b; white-space: nowrap; }
.hs-sponsor b { color: #efe9dc; }
.hs-sponsor--empty { background: rgba(157,107,255,.07); border: 1px dashed rgba(157,107,255,.35); color: rgba(196,168,255,.6); }
.hs-stats { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding-top: 11px; font: 500 10.5px var(--mono, ui-monospace, monospace); color: rgba(232,230,240,.4); flex-wrap: wrap; }
.hs-stats .on { color: #63e6b8; }
.hs-cta { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 15px; border-radius: 9px; font: 800 11px var(--cn, sans-serif); margin-left: auto; white-space: nowrap; }

/* ---- 顶层 SSVIP:日冕 C 位卡 ---- */
.hs-ss { position: relative; display: flex; padding: 2px; border-radius: 24px; overflow: hidden; isolation: isolate; box-shadow: 0 0 44px rgba(246,215,123,.16); transition: transform .2s ease; }
.hs-ss:hover { transform: translateY(-3px); }
.hs-ss .corona { position: absolute; inset: -40%; background: conic-gradient(#f6d77b,#9d6bff,#58d5f2,#ff6bd3,#f6d77b); animation: hsSpin 7s linear infinite; z-index: 0; }
.hs-ss .in { position: relative; z-index: 1; flex: 1; min-width: 0; border-radius: 22px; overflow: hidden; background: #0a0a10; }
.hs-ss .bn { position: relative; height: 96px; }
.hs-ss .bn.has-bn { height: 170px; }
.hs-ss .bn .sheen { position: absolute; top: 0; left: 0; width: 34%; height: 100%; background: linear-gradient(105deg,transparent,rgba(246,215,123,.08),transparent); animation: hsSheen 4.5s ease-in-out infinite; }
.hs-ss .bn .shade { position: absolute; inset: 0; background: linear-gradient(180deg,transparent 30%,rgba(10,10,16,.9)); }
.hs-ss .body { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; padding: 0 26px 22px; margin-top: -34px; position: relative; }
.hs-ss .avw { position: relative; display: inline-flex; padding: 2.5px; border-radius: 50%; overflow: hidden; isolation: isolate; flex: none; }
.hs-ss .avw i { position: absolute; inset: -60%; background: conic-gradient(#f6d77b,#9d6bff,#58d5f2,#ff6bd3,#f6d77b); animation: hsSpin 3.4s linear infinite; }
.hs-ss .av { position: relative; display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; font-size: 32px; background: linear-gradient(135deg,#3a2f52,#1d1826); }
.hs-ss .nm { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 900 24px var(--cn, sans-serif); background: linear-gradient(90deg,#f6d77b,#ff6bd3,#58d5f2,#f6d77b); background-size: 300% 100%; animation: hsFlow3 3.4s linear infinite; -webkit-background-clip: text; background-clip: text; color: transparent; }
.hs-ss .own { font: 700 13px var(--cn, sans-serif); color: rgba(239,233,220,.75); }
.hs-ss .hs-stats { border-top: none; margin-top: 4px; padding-top: 0; font-size: 11px; }
.hs-ss .cta { display: inline-flex; align-items: center; height: 44px; padding: 0 26px; border-radius: 13px; background: linear-gradient(90deg,#f6d77b,#ff6bd3,#58d5f2,#f6d77b); background-size: 300% 100%; animation: hsFlow3 4s linear infinite; color: #0c0c12; font: 800 14px var(--cn, sans-serif); margin-left: auto; }
.hs-ss .cta:hover { filter: brightness(1.1); }

/* ---- 高层 SVIP4-6:府 ---- */
.hs-high { display: flex; padding: 2px; border-radius: 20px; cursor: pointer; transition: transform .2s ease; background-size: 300% 100%; animation: hsFlow3 6s linear infinite; }
.hs-high:hover { transform: translateY(-3px); }
.hs-high--s6 { background-image: linear-gradient(120deg,#f6d77b,#9d6bff 45%,#f6d77b); }
.hs-high--s45 { background-image: linear-gradient(90deg,#58d5f2,#9d6bff,#58d5f2); animation: hsFlow3 4s linear infinite, hsBreath 2.8s ease-in-out infinite; }
.hs-high .in { position: relative; flex: 1; min-width: 0; border-radius: 18px; overflow: hidden; background: linear-gradient(160deg,#1a1626,#131020); }
.hs-high--s6 .in { background: linear-gradient(160deg,#241a30,#161122); }
.hs-high .bn { position: relative; height: 56px; }
.hs-high .bn.has-bn { height: 150px; }
.hs-std .bn { position: relative; height: 0; }
.hs-std .bn.has-bn { height: 104px; margin: -16px -18px 12px; border-radius: 16.5px 16.5px 0 0; overflow: hidden; }
.hs-std .bn .shade { position: absolute; inset: 0; background: linear-gradient(180deg,transparent 25%,rgba(20,18,28,.95)); }
.hs-high .bn .shade { position: absolute; inset: 0; background: linear-gradient(180deg,transparent 20%,rgba(19,16,32,.95)); }
.hs-high .bn .bdg { position: absolute; top: 8px; right: 12px; }
.hs-high .bn .sp { position: absolute; bottom: 6px; right: 12px; }
.hs-high .body { padding: 0 20px 16px; margin-top: -24px; position: relative; }
.hs-high .hd { display: flex; align-items: flex-end; gap: 12px; }
.hs-high .av { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; font-size: 24px; flex: none; background: #332947; border: 2px solid #c4a8ff; box-shadow: 0 0 12px rgba(157,107,255,.45); }
.hs-high--s6 .av { background: #3a2c33; border-color: #f6d77b; box-shadow: 0 0 12px rgba(246,215,123,.3); }
.hs-high .nm { font: 800 16px var(--cn, sans-serif); background: linear-gradient(90deg,#58d5f2,#c4a8ff,#9d6bff,#58d5f2); background-size: 300% 100%; animation: hsFlow3 3.6s linear infinite; -webkit-background-clip: text; background-clip: text; color: transparent; }
/* 2026-07-28 用户拍板:S6 房名的金色+发光单独款取消,跟 S4/S5 用同一条流光渐变。
   S6 的排面已经由外框金紫流光、头像金环、S6 徽章、金色 CTA 撑起来了,名字再单独描一层
   反而像被高亮糊住。要恢复:把这行改回 color:#f6d77b + text-shadow(见 git 历史)。 */
.hs-high .own { font: 700 11px var(--cn, sans-serif); color: rgba(239,233,220,.6); margin-top: 2px; }
.hs-high .tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.hs-high .hs-stats { border-top: 1px solid rgba(157,107,255,.16); }
.hs-high--s6 .hs-stats { border-top-color: rgba(246,215,123,.14); }
.hs-high .hs-cta { border: 1.5px solid rgba(157,107,255,.5); color: #c4a8ff; }
.hs-high .hs-cta:hover { background: rgba(157,107,255,.1); }
.hs-high--s6 .hs-cta { border-color: rgba(246,215,123,.45); color: #f6d77b; }
.hs-high--s6 .hs-cta:hover { background: rgba(246,215,123,.08); }

/* ---- 标准层 SVIP1-3:厅 ---- */
.hs-std { display: flex; padding: 1.5px; border-radius: 18px; cursor: pointer; transition: transform .2s ease; background-size: 300% 100%; animation: hsFlow3 5.5s linear infinite; }
.hs-std:hover { transform: translateY(-3px); }
.hs-std--s1 { background-image: linear-gradient(90deg,#9d6bff,#58d5f2,#9d6bff); }
.hs-std--s2 { background-image: linear-gradient(90deg,#9d6bff,#ff6bd3,#9d6bff); }
.hs-std--s3 { background-image: linear-gradient(90deg,#58d5f2,#9d6bff,#ff6bd3,#58d5f2); }
.hs-std .in { flex: 1; min-width: 0; overflow: hidden; border-radius: 16.5px; background: linear-gradient(170deg,#1a1826,#14121c); padding: 16px 18px; }
.hs-std .hd { display: flex; align-items: center; gap: 10px; }
.hs-std .av { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; font-size: 20px; flex: none; background: #282a44; border: 2px solid #58d5f2; }
.hs-std .nm { font: 800 14px var(--cn, sans-serif); background: linear-gradient(90deg,#58d5f2,#b18aff,#ff6bd3,#58d5f2); background-size: 300% 100%; animation: hsFlow3 4s linear infinite; -webkit-background-clip: text; background-clip: text; color: transparent; }
.hs-std .own { font: 500 10.5px var(--cn, sans-serif); color: rgba(232,230,240,.4); margin-top: 2px; }
.hs-std .tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.hs-std .hs-stats { border-top: 1px solid rgba(255,255,255,.06); }
.hs-std--ghost .av { background: #1d1c28; border-color: rgba(157,107,255,.45); }
.hs-std--ghost .nm { background: none; animation: none; -webkit-background-clip: initial; background-clip: initial; color: #b3a8d6; letter-spacing: 1px; }
.hs-std--ghost .own { color: rgba(179,168,214,.45); }

/* ---- 街尾 新街坊 + 虚位卡 ---- */
.hs-plain { display: flex; align-items: center; gap: 10px; padding: 13px 15px; border-radius: 13px; background: #14141a; border: 1px solid rgba(255,255,255,.07); transition: border-color .18s ease; }
.hs-plain:hover { border-color: rgba(255,255,255,.2); }
.hs-plain .av { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font-size: 16px; flex: none; background: #1d1c28; border: 1.5px solid rgba(255,255,255,.12); }
.hs-plain .nm { font: 700 12.5px var(--cn, sans-serif); color: rgba(232,230,240,.8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-plain .sub { font: 500 9px var(--mono, ui-monospace, monospace); color: rgba(232,230,240,.28); margin-top: 2px; }
.hs-slot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; border-radius: 13px; border: 1.5px dashed rgba(157,107,255,.3); background: rgba(157,107,255,.025); min-height: 82px; cursor: pointer; transition: border-color .2s ease, background .2s ease; }
.hs-slot:hover { border-color: rgba(157,107,255,.6); background: rgba(157,107,255,.05); }
.hs-slot .l1 { font: 700 12px var(--cn, sans-serif); color: rgba(196,168,255,.75); }
.hs-slot .l2 { font: 500 9.5px var(--mono, ui-monospace, monospace); color: rgba(232,230,240,.3); }

/* ---- 播报区头 LIVE pill ---- */
.hs-live { display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 12px; border-radius: 999px; background: rgba(255,77,109,.1); border: 1.5px solid rgba(255,77,109,.45); color: #ff8fa3; font: 800 10.5px var(--mono, ui-monospace, monospace); letter-spacing: 1px; }
.hs-live i { width: 7px; height: 7px; border-radius: 50%; background: #ff4d6d; box-shadow: 0 0 8px #ff4d6d; animation: hsLive 1.4s ease-in-out infinite; }
@keyframes hsLive { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* ---- 手机端 ---- */
@media (max-width: 768px) {
  .hs-grid-high { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
  .hs-grid-high > * { flex: 0 0 min(86vw, 360px); scroll-snap-align: start; }
  .hs-grid-std { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .hs-grid-plain { grid-template-columns: repeat(2, 1fr); }
  .hs-ss .body { padding: 0 16px 16px; gap: 12px; }
  .hs-ss .nm { font-size: 19px; }
  .hs-ss .cta { height: 38px; padding: 0 18px; font-size: 12.5px; margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hs-ss .corona, .hs-ss .avw i, .hs-ss .bn .sheen, .hs-ss .nm, .hs-ss .cta, .hs-high, .hs-high .nm, .hs-std, .hs-std .nm, .hs-live i, .hs-dot { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}
body[data-motion="off"] .hs-ss *, body[data-motion="off"] .hs-high, body[data-motion="off"] .hs-std { animation-play-state: paused !important; }

/* 本页固定暗色,不给主题切换 */
body[data-page="halls"] .theme-btn { display: none !important; }

/* ---- 低调模式房卡(2026-08-11 用户:「隐藏房间展示不好看,id 看不清」)----
   原来低调卡直接不出封面 → 和邻居卡站一排像塌了一块;现在给一块专属「神秘」封面位,
   结构与普通卡同构;「神秘人的厅」名字提亮保证可读。身份仍然完全不露。 */
.hs-ghostbn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: linear-gradient(135deg,#191531,#231c3f 55%,#1a1633); }
.hs-ghostbn .gk { font-size: 32px; filter: drop-shadow(0 0 14px rgba(157,107,255,.55)); }
.hs-ghostbn .gt { font: 700 9.5px var(--mono, ui-monospace, monospace); letter-spacing: .22em; color: rgba(196,168,255,.6); }
.hs-std--ghost .nm { color: #e4def6; }