/* ===== Neon Cyber · 霓虹粉紫 ===== */
:root{
  --bg: #f3eaf3;
  --bg-2:#efe2ee;
  --ink:#2a1a32;
  --ink-soft:#6b5871;
  --ink-mute:#9d8ba6;
  --line:#ecdcec;
  --card:#ffffff;
  --card-soft:#fbf3fb;

  --pink-1:#ff2e8e;
  --pink-2:#ff4fb3;
  --pink-3:#ff7fc8;
  --pink-soft:#ffd9ec;
  --pink-50:#fff0f8;

  --purple-1:#a93cd1;
  --purple-2:#c54ad8;
  --purple-3:#d870e3;
  --violet-soft:#efd6ee;

  --grad-hot: linear-gradient(110deg,#a13bd0 0%,#c43ad3 22%,#e23dbb 50%,#ff3d96 78%,#ff5fa9 100%);
  --grad-btn: linear-gradient(135deg,#ff3d96 0%,#d33bd3 100%);
  --grad-btn-2: linear-gradient(135deg,#c43ad3 0%,#a13bd0 100%);
  --grad-promo: linear-gradient(100deg,#ff61b6 0%,#ee52c8 45%,#cf4ad6 100%);
  --shadow-card: 0 6px 22px -10px rgba(193,55,194,.28);
  --shadow-phone: 0 60px 120px -40px rgba(120,30,140,.35), 0 28px 60px -20px rgba(180,40,150,.22);
  --neon-glow: 0 0 18px rgba(255,61,150,.55), 0 0 36px rgba(212,52,206,.35);

  --r-card: 18px;
  --r-pill: 999px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:"Noto Sans TC","Inter",system-ui,-apple-system,"PingFang TC","Microsoft JhengHei",sans-serif;font-feature-settings:"ss01" on, "cv11" on;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

/* ====== Board ====== */
html,body{min-height:100%}
.scale-wrap{
  width:100%;
  display:flex;justify-content:center;align-items:flex-start;
  overflow:hidden;
}
.scale-wrap > .board{
  transform-origin: top center;
}
@media (max-width: 1700px){
  .scale-wrap > .board{ transform: scale(var(--scale, 1)); }
}
.board{
  width:1600px;
  margin:0 auto;
  padding:60px 0 100px;
  background:
    radial-gradient(1100px 600px at 80% 0%, #f9e0f0 0%, transparent 60%),
    radial-gradient(900px 700px at 0% 30%, #efe1f5 0%, transparent 55%),
    linear-gradient(180deg,#f7eef6 0%,#f1e5f1 100%);
  position:relative;
}

.board-head{
  display:flex;justify-content:space-between;align-items:flex-start;
  padding:0 80px;
  margin-bottom:64px;
}
.board-head h1{
  margin:0;
  font-size:42px;font-weight:800;letter-spacing:.5px;
  display:flex;align-items:center;gap:14px;
  color:#2a1a32;
}
.board-head .num{font-family:"Inter",sans-serif;font-weight:800}
.board-head .dot{color:var(--ink-mute);font-weight:600}
.board-head .zh{font-weight:800}
.board-head .sub{margin:8px 0 0 0;color:var(--ink-mute);font-size:15px;letter-spacing:.4px;font-weight:500}
.meta-row{display:flex;flex-direction:column;align-items:flex-end;gap:14px}
.swatches{display:flex;gap:10px}
.swatches span{width:18px;height:18px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}
.size-pill{
  font-family:"Inter",sans-serif;font-weight:600;font-size:13px;color:var(--ink-soft);
  background:#fff;border:1px solid var(--line);padding:8px 14px;border-radius:999px;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset;
}

/* ====== Rows ====== */
.row{display:flex;justify-content:center;gap:42px;padding:0 60px}
.row-top{margin-bottom:64px}

/* ====== Phone Frame ====== */
.phone{
  width:430px;height:880px;
  background:#0f0710;
  border-radius:62px;
  padding:14px;
  position:relative;
  box-shadow: var(--shadow-phone),
    inset 0 0 0 2px #1a0e1c,
    inset 0 0 0 4px #2a1830;
}
.phone::before{
  content:"";position:absolute;inset:6px;border-radius:56px;
  background:linear-gradient(180deg,#191119 0%,#0c060d 100%);
  z-index:0;
}
.phone-screen{
  position:relative;z-index:1;
  width:100%;height:100%;
  background:#ffffff;
  border-radius:50px;
  overflow:hidden;
  display:flex;flex-direction:column;
}
/* iOS-style home indicator bar (bottom pill) */
.phone-screen::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:4px;
  transform:translateX(-50%);
  width:112px;
  height:4px;
  border-radius:999px;
  background: linear-gradient(180deg, #d6d2db 0%, #b6afbe 100%);
  z-index:5;
}

/* status bar */
.status-bar{
  position:relative;
  height:46px;
  padding:0 32px;
  display:flex;align-items:center;justify-content:space-between;
  font-family:"Inter",sans-serif;font-weight:600;font-size:15px;color:#000;
  flex-shrink:0;
}
.status-bar .time{padding-top:14px}
.status-bar .notch{
  position:absolute;left:50%;top:8px;transform:translateX(-50%);
  width:118px;height:32px;background:#0a060c;border-radius:20px;
}
.status-bar .sys-icons{display:flex;align-items:center;gap:6px;padding-top:14px;color:#000}

.screen-pad{
  flex:1;
  padding:18px 20px 0;
  overflow:hidden;
  position:relative;
}
/* Dating screen content scrolls vertically; hide native scrollbar */
.row-top .phone:first-child .screen-pad,
.row-top .phone:nth-child(2) .screen-pad,
.row-top .phone:nth-child(3) .screen-pad,
.row-bottom .phone .screen-pad{
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:none;
  padding-bottom:20px;
}
.row-top .phone:first-child .screen-pad::-webkit-scrollbar,
.row-top .phone:nth-child(2) .screen-pad::-webkit-scrollbar,
.row-top .phone:nth-child(3) .screen-pad::-webkit-scrollbar,
.row-bottom .phone .screen-pad::-webkit-scrollbar{ display:none; }

/* ====== Top tabs / topbar ====== */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:6px 2px 18px}
.topbar-tabs .tabs{display:flex;align-items:flex-end;gap:18px}
.tabs .tab{font-size:16px;color:var(--ink-mute);font-weight:500;position:relative;padding-bottom:6px;cursor:default}
.tabs .tab.active{
  font-size:22px;font-weight:800;
  background: var(--grad-btn);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.tabs .tab.active::after{
  content:"";position:absolute;left:2px;right:2px;bottom:-2px;height:3px;border-radius:3px;
  background:var(--grad-btn);
}
.top-actions{display:flex;gap:10px;align-items:center}
.icon-btn{
  width:34px;height:34px;border-radius:999px;border:none;display:grid;place-items:center;cursor:pointer;
}
.icon-btn.ghost{background:#f5e7f3;color:#7a5a82}
.icon-btn.solid{background:var(--grad-btn);color:#fff;box-shadow:0 6px 14px -4px rgba(212,52,206,.55)}

/* ====== Screen 1: promo + user cards ====== */
.promo-card{
  display:flex;align-items:center;gap:12px;
  background:var(--grad-promo);
  border-radius:16px;padding:12px 12px 12px 14px;
  margin-bottom:14px;
  text-decoration:none;color:#fff;
  box-shadow:0 10px 22px -10px rgba(220,60,170,.55);
  position:relative;overflow:hidden;
}
.promo-card::after{
  content:"";position:absolute;inset:0;background:radial-gradient(120px 60px at 80% 20%,rgba(255,255,255,.25),transparent 60%);pointer-events:none;
}
.promo-icon{width:30px;height:30px;border-radius:999px;background:rgba(255,255,255,.22);display:grid;place-items:center;flex-shrink:0}
.promo-text{flex:1;display:flex;flex-direction:column;line-height:1.2}
.promo-tag{font-size:11px;opacity:.92;letter-spacing:.5px}
.promo-title{font-size:15px;font-weight:700;margin-top:2px}
.promo-btn{font-size:12px;padding:7px 12px;border-radius:999px;background:#fff;color:#c93aa7;font-weight:700;flex-shrink:0}

/* Top-right corner icon on promo-card */
.promo-corner{
  position:absolute;
  top:6px; right:8px;
  display:inline-flex;align-items:center;gap:2px;
  padding:3px 7.5px 3px 7.5px;
  border-radius:999px;
  background:#fff;
  box-shadow:
    0 2px 8px -2px rgba(120,20,90,.35),
    0 0 0 1px rgba(255,255,255,.6) inset,
    0 0 14px rgba(255,61,150,.35);
  z-index:3;
  pointer-events:none;
}
.promo-corner .pc-text{
  font-size:10px;
  font-weight:800;
  letter-spacing:.3px;
  background: linear-gradient(135deg,#ff3d96 0%,#d348c8 55%,#a93cd1 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  line-height:1;
}
.promo-corner svg{flex-shrink:0;filter:drop-shadow(0 0 4px rgba(255,61,150,.55))}
/* user-card variant — slightly different spacing */
.card-corner{ top:8px; right:10px; }

.user-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
/* 約會介面（screen 01）: 卡片改為左側大張人像照樣式 */
.row-top .phone:first-child .tabs .tab:not(.active){ color: var(--ink-mute); }
.row-top .phone:first-child .user-list{ gap:10px; }
.row-top .phone:first-child .user-card{
  padding:10px;
  align-items:stretch;
  gap:14px;
  min-height:140px;
  position:relative;
  overflow:hidden;
}
.row-top .phone:first-child .card-corner{ top:0; left:0; right:auto; border-top-left-radius:14.84px; border-top-right-radius:0; border-bottom-right-radius:10px; border-bottom-left-radius:0; transform: scale(1.213); transform-origin: top left; }

/* 約會介面: VIP 徽章移到卡片右側 */
.row-top .phone:first-child .user-card{ position:relative; }
.row-top .phone:first-child .user-card .chip-vip{
  position:absolute;
  top:10px;
  right:10px;
  z-index:2;
  transform: scale(1.1);
  transform-origin: top right;
}
.row-top .phone:first-child .user-card .avatar{
  width:96px;
  height:auto;
  align-self:stretch;
  border-radius:12px;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.7), 0 6px 14px -6px rgba(180,80,170,.45);
}
.row-top .phone:first-child .user-card .avatar::after{
  border-radius:12px;
  background:
    radial-gradient(circle at 50% 32%, #3a1f3f 0 16%, transparent 17%),
    radial-gradient(ellipse 70% 38% at 50% 90%, #3a1f3f 0 60%, transparent 62%),
    linear-gradient(180deg, var(--av-1,#e4a7d1) 0%, var(--av-2,#a26ba2) 100%);
}
.row-top .phone:first-child .user-card .avatar .online{
  right:6px;bottom:6px;
}
.row-top .phone:first-child .user-card .user-body{
  display:flex;flex-direction:column;justify-content:center;gap:6px;
}
.row-top .phone:first-child .user-card .user-msg{
  max-width:170px;
  font-size:13px;
  color:var(--ink-soft);
}
.row-top .phone:first-child .hi-btn{
  align-self:flex-end;
}
.user-card{
  display:flex;align-items:center;gap:12px;
  background:linear-gradient(180deg,#fbf2fb 0%,#f7eaf7 100%);
  border:1px solid #f1dff1;
  border-radius:18px;padding:12px;
  box-shadow:0 4px 14px -8px rgba(170,80,180,.20);
}
.avatar{
  width:52px;height:52px;border-radius:999px;flex-shrink:0;position:relative;
  background-size:cover;background-position:center;
  box-shadow:inset 0 0 0 2px #fff, 0 4px 10px -3px rgba(180,80,170,.4);
}
.avatar::after{
  content:"";position:absolute;inset:0;border-radius:999px;
  background:
    radial-gradient(circle at 50% 38%, #3a1f3f 0 18%, transparent 19%),
    radial-gradient(ellipse 70% 50% at 50% 92%, #3a1f3f 0 60%, transparent 61%),
    linear-gradient(180deg, var(--av-1,#e4a7d1) 0%, var(--av-2,#a26ba2) 100%);
  background-repeat:no-repeat;
}
.avatar .online{
  position:absolute;right:1px;bottom:2px;width:11px;height:11px;border-radius:999px;
  background: linear-gradient(135deg,#ff3d96 0%,#d348c8 60%,#a93cd1 100%);
  box-shadow:0 0 0 2px #fff, 0 0 6px rgba(255,61,150,.7);z-index:2;
}
.avatar-a{--av-1:#f4c6e2;--av-2:#a26ba2}
.avatar-b{--av-1:#f0bdde;--av-2:#9a5fa0}
.avatar-c{--av-1:#f7cde6;--av-2:#a675a8}
.avatar-d{--av-1:#eebde0;--av-2:#9963a0}
.avatar-e{--av-1:#f2c4e0;--av-2:#9d5fa6}
.avatar-f{--av-1:#ebbade;--av-2:#a366a4}
.avatar.small.avatar-a,.avatar.small.avatar-b,.avatar.small.avatar-c,.avatar.small.avatar-d,.avatar.small.avatar-e,.avatar.small.avatar-f{}

.user-body{flex:1;min-width:0}
.user-head{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.name-zh{font-weight:800;color:#23142a;font-size:16px}
.name-en{font-family:"Inter",sans-serif;font-weight:600;color:var(--ink-soft);font-size:13px}
.chip{font-size:10px;padding:2px 7px;border-radius:999px;font-weight:700;line-height:1.4;letter-spacing:.2px}
.chip-age{background:var(--grad-btn);color:#fff;word-spacing:-2px;display:inline-flex;align-items:center;justify-content:center;text-align:center;min-width:34px;padding-left:6px;padding-right:6px}
.chip-vip{background:linear-gradient(135deg,#ffd25a,#ff8a3c);color:#5a2400;display:inline-flex;align-items:center;justify-content:center;text-align:center;min-width:30px;padding-left:9px;padding-right:5px;letter-spacing:1px}
.user-meta{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--ink-mute);margin-top:4px}
.user-meta .pin{filter:hue-rotate(-10deg)}
.user-msg{font-size:12px;color:var(--ink-soft);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px}

.user-tags{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.u-tag{
  display:inline-flex;align-items:center;justify-content:center;gap:3px;
  font-size:10px;font-weight:600;padding:4px 10px;border-radius:999px;line-height:1;
  letter-spacing:.3px;
}
.u-tag svg{flex-shrink:0}
.tag-time{
  background: rgba(255,61,150,.10);
  color:#c93aa7;
}
.tag-chat{
  background: linear-gradient(135deg, rgba(255,61,150,.12), rgba(169,60,209,.12));
  color:#a93cd1;
}
.hi-btn{
  background:var(--grad-btn);color:#fff;border:none;
  padding:8px 14px;border-radius:999px;font-weight:700;font-size:12px;cursor:pointer;
  box-shadow:0 6px 14px -6px rgba(220,60,170,.55);
  letter-spacing:.6px;
}

/* ====== Tabbar ====== */
.tabbar{
  position:relative;
  display:grid;grid-template-columns:1fr 1fr 1.1fr 1fr 1fr;align-items:center;
  height:86px;
  padding:10px 14px 15px;
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,#fff 30%);
  flex-shrink:0;
}
/* Pill-shaped background block behind tabbar items (per reference) */
.tabbar::before{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  top:10.5px;
  bottom:15.5px;
  border-radius:999px;
  background: linear-gradient(135deg, rgba(255,61,150,.14) 0%, rgba(212,52,206,.11) 50%, rgba(169,60,209,.14) 100%);
  box-shadow:
    0 12px 26px -14px rgba(220,60,170,.45),
    0 0 0 1px rgba(255,61,150,.14) inset,
    0 -1px 0 rgba(255,255,255,.85) inset,
    0 0 20px rgba(255,82,178,.22);
  z-index:0;
  pointer-events:none;
}
.tabbar > *{ position:relative; z-index:1; }
.tab-item{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  color:rgba(0,0,0,.3);font-size:11px;font-weight:600;cursor:pointer;text-decoration:none;
}
.tab-item.active{color:#ff3d96}
.tab-item.active span:last-child{
  background: var(--grad-btn);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.tab-item.active .tb-ic svg{color:#ff3d96}
.tab-item.active.txtonly{color:var(--ink)}
.tab-item .tb-ic{display:grid;place-items:center;height:22px}
.tab-center{
  position:relative;display:grid;place-items:center;cursor:pointer;
}
.tc-disc{
  width:64px;height:64px;border-radius:999px;display:grid;place-items:center;
  background:var(--grad-btn);
  box-shadow: 0 0 0 6px rgba(255,61,150,.18), 0 10px 30px -8px rgba(212,52,206,.65), 0 0 24px rgba(255,82,178,.5);
  transform:translateY(-18px);
}
.tc-disc::before{
  content:"";position:absolute;inset:-14px;border-radius:999px;
  background:radial-gradient(circle, rgba(255,82,178,.28) 0%, transparent 70%);
  z-index:-1;
}

/* ====== Screen 2: Hot ====== */
.hero-event{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  padding:18px 20px 22px;
  margin-bottom:18px;
  min-height:130px;
  color:#fff;
  isolation:isolate;
}
.hero-bg{
  position:absolute;inset:0;z-index:-2;
  background:var(--grad-hot);
}
.hero-bg::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(140px 80px at 18% 25%, rgba(255,255,255,.35), transparent 65%),
    radial-gradient(180px 110px at 85% 20%, rgba(255,210,235,.4), transparent 60%),
    radial-gradient(220px 140px at 70% 110%, rgba(120,30,160,.5), transparent 55%);
}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size:32px 32px;
  mask-image:linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
  opacity:.6;
}
.hero-stars span{
  position:absolute;width:6px;height:6px;border-radius:999px;background:#fff;
  box-shadow:0 0 8px rgba(255,255,255,.9), 0 0 16px rgba(255,200,235,.7);
  z-index:-1;
}
.hot-tag{
  background:rgba(255,255,255,.22);
  font-family:"Inter",sans-serif;font-weight:700;font-size:10px;
  padding:4px 8px;border-radius:6px;letter-spacing:.6px;
  backdrop-filter: blur(6px);
}
.hero-head{display:flex;align-items:center;gap:6px;font-size:11px;opacity:.95}
.hot-dot{opacity:.7}
.hot-sub{font-size:11px}
.hero-title{
  font-size:32px;font-weight:900;letter-spacing:.5px;margin-top:12px;
  text-shadow:0 2px 8px rgba(120,20,90,.35);
}
.hero-title .sparkle{font-size:22px;font-weight:700;color:#fff;opacity:.9;margin-left:4px;text-shadow:0 0 12px #fff}
.hero-sub{font-size:13px;margin-top:6px;opacity:.95}
.hero-sub b{font-weight:700}

.room-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.room-card{
  display:flex;align-items:center;gap:12px;
  background:linear-gradient(180deg,#fbf2fb 0%,#f7eaf7 100%);
  border:1px solid #f1dff1;
  border-radius:16px;padding:11px 14px 11px 11px;
}
.room-card .avatar{width:34px;height:34px}
.room-card .avatar-stack{
  position:relative;
  flex-shrink:0;
  width:54px;
  height:53px;
  overflow:visible;
}
.room-card .avatar-stack .avatar{
  position:absolute;
  width:28px;height:28px;
  border-radius:999px;
  box-shadow: 0 0 0 2px #fbf2fb, 0 3px 8px -3px rgba(180,80,170,.45);
}
.room-card .avatar-stack .avatar::after{ border-radius:999px; }
.room-card .avatar-stack .avatar:nth-child(1){ left:10px; top:-1px; width:32px;height:32px; z-index:3; }
.room-card .avatar-stack .avatar:nth-child(2){ left:-2px; top:25px; z-index:2; }
.room-card .avatar-stack .avatar:nth-child(3){ left:26px; top:25px; z-index:1; }
.avatar-r1{--av-1:#e6c2ee;--av-2:#7e4a92}
.avatar-r2{--av-1:#f1c1e0;--av-2:#a05498}
.avatar-r3{--av-1:#e8c3ec;--av-2:#7d4a92}
.avatar-r4{--av-1:#f0c4e2;--av-2:#9a5398}
.avatar-r5{--av-1:#eabfe6;--av-2:#854e95}
.avatar-r6{--av-1:#eec2e3;--av-2:#a05898}
.avatar-r7{--av-1:#edc2e0;--av-2:#9050a0}
.avatar-r8{--av-1:#f0c2e0;--av-2:#86489c}
.room-body{flex:1;min-width:0}
.room-head{display:flex;align-items:center;gap:6px}
.room-tag{
  font-size:10px;padding:2px 6px;border-radius:6px;font-weight:700;color:#fff;
  background:var(--grad-btn);
}
.room-tag.tag-K歌{background:linear-gradient(135deg,#d348c8,#9a3fd4)}
.room-tag.tag-占卜{background:linear-gradient(135deg,#7e4ad1,#c54ad8)}
.room-tag.tag-互動{background:var(--grad-btn)}
.online-dot{width:6px;height:6px;border-radius:999px;background: linear-gradient(135deg,#ff3d96,#a93cd1);display:inline-block;margin-left:4px;box-shadow:0 0 4px rgba(255,61,150,.7)}

/* mini animated bars used before "在線" count in 聲播 cards */
.mini-bars{
  display:inline-flex;align-items:flex-end;gap:1.5px;height:10px;margin-left:4px;vertical-align:middle;
  transform: scale(1.05);
  transform-origin: center center;
}
.mini-bars i{
  width:2px;border-radius:1px;display:block;
  background: linear-gradient(180deg,#ff3d96,#a93cd1);
  transform-origin:bottom center;
  animation: bar-eq 900ms ease-in-out infinite;
}
.mini-bars i:nth-child(1){height:40%;animation-delay:  0ms; animation-duration: 720ms}
.mini-bars i:nth-child(2){height:70%;animation-delay:120ms; animation-duration: 880ms}
.mini-bars i:nth-child(3){height:55%;animation-delay:240ms; animation-duration: 640ms}
.mini-bars i:nth-child(4){height:90%;animation-delay: 60ms; animation-duration: 960ms}
.mini-bars i:nth-child(5){height:50%;animation-delay:180ms; animation-duration: 760ms}
.online-count{font-size:11px;color:var(--ink-mute);font-family:"Inter",sans-serif}
.room-title{font-weight:700;font-size:15px;color:#23142a;margin-top:3px;display:flex;align-items:center;gap:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.room-title .emo{font-size:13px}
.room-host{font-size:11px;color:var(--ink-mute);margin-top:2px;display:inline-flex;align-items:center;gap:5px}
.lv-badge{
  display:inline-flex;align-items:center;justify-content:center;
  padding:2px 7px;
  border-radius:999px;
  background:#fff;
  box-shadow:
    0 2px 6px -2px rgba(220,60,170,.35),
    0 0 0 1px rgba(255,61,150,.35) inset,
    0 0 8px rgba(255,82,178,.25);
  line-height:1;
}
.lv-num{
  font-family:"Inter",sans-serif;font-weight:800;font-size:9px;
  letter-spacing:.3px;
  background: linear-gradient(135deg,#ff3d96 0%,#d348c8 60%,#a93cd1 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* hour rank pill on right side of room-card */
.hour-rank{
  display:inline-flex;align-items:center;gap:4px;
  padding:5px 10px 5px 8px;
  border-radius:999px;
  background: linear-gradient(135deg,#ff3d96 0%,#d348c8 60%,#a93cd1 100%);
  color:#fff;
  box-shadow:
    0 6px 14px -6px rgba(220,60,170,.55),
    0 0 14px rgba(255,82,178,.45);
  flex-shrink:0;
}
.hour-rank .hr-ic{display:grid;place-items:center;line-height:0;filter: drop-shadow(0 1px 2px rgba(120,60,0,.4)) drop-shadow(0 0 6px rgba(255,200,80,.5)); transform: scale(1.5); transform-origin: center center; margin: 0 3px;}
.hour-rank .hr-text{
  font-size:10px;font-weight:800;line-height:1;letter-spacing:.3px;
  color:#fff;
}

/* silver rank variant */
.hour-rank.rank-silver{
  position:relative;
  padding: 6px 9px 6px 8px;
  margin-left: 20px;
  border-radius:999px;
  transform: translateX(5px);
  background:
    linear-gradient(180deg,
      #ffffff 0%,
      #f0f4f8 14%,
      #b8c1cd 38%,
      #6a7380 58%,
      #c2cbd7 76%,
      #45505d 100%);
  color:#fff;
  box-shadow:
    0 10px 22px -8px rgba(40,50,65,.7),
    0 0 22px rgba(220,230,245,.6),
    0 0 0 1px rgba(255,255,255,.85) inset,
    0 1px 0 rgba(255,255,255,1) inset,
    0 -1px 0 rgba(50,60,75,.6) inset,
    0 0 0 2px rgba(255,255,255,.25);
  overflow:hidden;
}
.hour-rank.rank-silver::before{
  content:"";
  position:absolute;left:6%;right:6%;top:6%;height:40%;
  border-radius:999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,0)),
    radial-gradient(circle at 30% 50%, rgba(255,255,255,.9) 0%, transparent 60%);
  pointer-events:none;
  filter: blur(.3px);
}
.hour-rank.rank-silver::after{
  /* moving shine across pill */
  content:"";
  position:absolute;inset:0;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.7) 50%, transparent 65%);
  transform: translateX(-110%);
  animation: shine-sweep 3.4s ease-in-out infinite;
  pointer-events:none;
  mix-blend-mode: overlay;
}
@keyframes shine-sweep{
  0%, 12% { transform: translateX(-110%); }
  60%     { transform: translateX(110%); }
  100%    { transform: translateX(110%); }
}
.hour-rank.rank-silver .hr-ic,
.hour-rank.rank-silver .hr-text{ position:relative; z-index:2; }
.hour-rank.rank-silver .hr-text{
  position:relative;
  font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  font-size:11.5px;
  font-weight:900;
  letter-spacing:.6px;
  line-height:1;
  display:inline-flex;align-items:center;
  text-rendering:geometricPrecision;
  -webkit-font-smoothing:antialiased;
  /* multi-stop chrome-black gradient for metallic feel */
  background: linear-gradient(180deg,
    #6c727b 0%,
    #2b2f37 18%,
    #0a0d12 38%,
    #16191f 52%,
    #050709 70%,
    #2d3138 88%,
    #585d66 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,1))
    drop-shadow(0 -1px 0 rgba(10,15,22,.85));
}
/* subtle highlight band sliding across the text via overlay span */
.hour-rank.rank-silver .hr-text::before{ display:none; }
.hour-rank.rank-silver .hr-ic{ transform: scale(1.5); margin: 0 0 0 3px; }

/* gold rank variant — same structure as silver but warm metallic gold */
.hour-rank.rank-gold{
  position:relative;
  padding: 6px 9px 6px 8px;
  margin-left: 20px;
  border-radius:999px;
  transform: translateX(5px);
  background:
    linear-gradient(180deg,
      #fff8d0 0%,
      #fde58a 14%,
      #f3c043 38%,
      #a96e10 58%,
      #f5cc55 76%,
      #6f4407 100%);
  color:#fff;
  box-shadow:
    0 10px 22px -8px rgba(120,70,5,.65),
    0 0 22px rgba(255,210,90,.55),
    0 0 0 1px rgba(255,245,200,.85) inset,
    0 1px 0 rgba(255,255,255,1) inset,
    0 -1px 0 rgba(90,55,5,.6) inset,
    0 0 0 2px rgba(255,235,170,.35);
  overflow:hidden;
}
.hour-rank.rank-gold::before{
  content:"";
  position:absolute;left:6%;right:6%;top:6%;height:40%;
  border-radius:999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,0)),
    radial-gradient(circle at 30% 50%, rgba(255,255,255,.9) 0%, transparent 60%);
  pointer-events:none;
  filter: blur(.3px);
}
.hour-rank.rank-gold::after{
  content:"";
  position:absolute;inset:0;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.7) 50%, transparent 65%);
  transform: translateX(-110%);
  animation: shine-sweep 3.4s ease-in-out infinite;
  pointer-events:none;
  mix-blend-mode: overlay;
}
.hour-rank.rank-gold .hr-ic,
.hour-rank.rank-gold .hr-text{ position:relative; z-index:2; }
.hour-rank.rank-gold .hr-text{
  position:relative;
  font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  font-size:11.5px;
  font-weight:900;
  letter-spacing:.6px;
  line-height:1;
  display:inline-flex;align-items:center;
  text-rendering:geometricPrecision;
  -webkit-font-smoothing:antialiased;
  /* chrome-warm gradient (dark brown to gold-brown) for contrast on gold pill */
  background: linear-gradient(180deg,
    #8b5e10 0%,
    #4a2f04 18%,
    #1d1102 38%,
    #2c1a04 52%,
    #160c01 70%,
    #4b3008 88%,
    #6a4407 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  filter:
    drop-shadow(0 1px 0 rgba(255,240,180,.95))
    drop-shadow(0 -1px 0 rgba(30,20,5,.85));
}
.hour-rank.rank-gold .hr-ic{ transform: scale(1.5); margin: 0 0 0 3px;
  filter: drop-shadow(0 1px 2px rgba(120,70,5,.45)) drop-shadow(0 0 6px rgba(255,210,100,.6));
}

/* bronze rank variant */
.hour-rank.rank-bronze{
  position:relative;
  padding: 6px 9px 6px 8px;
  margin-left: 20px;
  border-radius:999px;
  transform: translateX(5px);
  background:
    linear-gradient(180deg,
      #fde2c4 0%,
      #f4b97a 14%,
      #d8854a 38%,
      #7b3e15 58%,
      #e5a06b 76%,
      #4a2406 100%);
  color:#fff;
  box-shadow:
    0 10px 22px -8px rgba(80,40,5,.65),
    0 0 22px rgba(220,140,70,.55),
    0 0 0 1px rgba(255,225,190,.8) inset,
    0 1px 0 rgba(255,240,220,1) inset,
    0 -1px 0 rgba(60,28,3,.6) inset,
    0 0 0 2px rgba(255,205,150,.3);
  overflow:hidden;
}
.hour-rank.rank-bronze::before{
  content:"";
  position:absolute;left:6%;right:6%;top:6%;height:40%;
  border-radius:999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,0)),
    radial-gradient(circle at 30% 50%, rgba(255,255,255,.9) 0%, transparent 60%);
  pointer-events:none;
  filter: blur(.3px);
}
.hour-rank.rank-bronze::after{
  content:"";
  position:absolute;inset:0;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.7) 50%, transparent 65%);
  transform: translateX(-110%);
  animation: shine-sweep 3.4s ease-in-out infinite;
  pointer-events:none;
  mix-blend-mode: overlay;
}
.hour-rank.rank-bronze .hr-ic,
.hour-rank.rank-bronze .hr-text{ position:relative; z-index:2; }
.hour-rank.rank-bronze .hr-text{
  position:relative;
  font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  font-size:11.5px;
  font-weight:900;
  letter-spacing:.6px;
  line-height:1;
  display:inline-flex;align-items:center;
  text-rendering:geometricPrecision;
  -webkit-font-smoothing:antialiased;
  background: linear-gradient(180deg,
    #6e3a10 0%,
    #3a1c04 18%,
    #170a02 38%,
    #281403 52%,
    #110700 70%,
    #3d1f05 88%,
    #5e2f08 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  filter:
    drop-shadow(0 1px 0 rgba(255,225,180,.95))
    drop-shadow(0 -1px 0 rgba(25,12,2,.85));
}
.hour-rank.rank-bronze .hr-ic{ transform: scale(1.5); margin: 0 0 0 3px;
  filter: drop-shadow(0 1px 2px rgba(80,40,5,.45)) drop-shadow(0 0 6px rgba(220,140,70,.6));
}

/* gold #2 — deeper royal gold, distinct from gold-1; white embossed text */
.hour-rank.rank-gold2{
  position:relative;
  padding: 6px 9px 6px 8px;
  margin-left: 20px;
  border-radius:999px;
  transform: translateX(5px);
  background:
    linear-gradient(180deg,
      #fff2a8 0%,
      #ffd24d 18%,
      #d99413 38%,
      #7e5304 58%,
      #f8c64a 78%,
      #5d3a02 100%);
  color:#fff;
  box-shadow:
    0 10px 22px -8px rgba(95,55,5,.7),
    0 0 22px rgba(255,200,80,.55),
    0 0 0 1px rgba(255,235,170,.85) inset,
    0 1px 0 rgba(255,250,210,1) inset,
    0 -1px 0 rgba(80,45,2,.65) inset,
    0 0 0 2px rgba(255,220,140,.35);
  overflow:hidden;
}
.hour-rank.rank-gold2::before{
  content:"";
  position:absolute;left:6%;right:6%;top:6%;height:40%;
  border-radius:999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,0)),
    radial-gradient(circle at 30% 50%, rgba(255,255,255,.9) 0%, transparent 60%);
  pointer-events:none;
  filter: blur(.3px);
}
.hour-rank.rank-gold2::after{
  content:"";
  position:absolute;inset:0;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.7) 50%, transparent 65%);
  transform: translateX(-110%);
  animation: shine-sweep 3.4s ease-in-out infinite;
  pointer-events:none;
  mix-blend-mode: overlay;
}
.hour-rank.rank-gold2 .hr-ic,
.hour-rank.rank-gold2 .hr-text{ position:relative; z-index:2; }
.hour-rank.rank-gold2 .hr-text{
  position:relative;
  font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  font-size:11.5px;
  font-weight:900;
  letter-spacing:.6px;
  line-height:1;
  display:inline-flex;align-items:center;
  text-rendering:geometricPrecision;
  -webkit-font-smoothing:antialiased;
  color:#fff;
  text-shadow:
    0 1px 0 rgba(255,235,170,.95),
    0 -1px 1px rgba(70,42,3,.85),
    0 2px 3px rgba(50,28,2,.5),
    0 0 6px rgba(255,255,255,.55);
}
.hour-rank.rank-gold2 .hr-ic{ transform: scale(1.5); margin: 0 0 0 3px;
  filter: drop-shadow(0 1px 2px rgba(100,55,5,.5)) drop-shadow(0 0 6px rgba(255,210,100,.6));
}

/* silver #2 — gunmetal / platinum, deeper than silver #1; white embossed text */
.hour-rank.rank-silver2{
  position:relative;
  padding: 6px 9px 6px 8px;
  margin-left: 20px;
  border-radius:999px;
  transform: translateX(5px);
  background:
    linear-gradient(180deg,
      #f5f8fc 0%,
      #c0c8d2 18%,
      #6e7783 38%,
      #2c343d 58%,
      #98a1ad 78%,
      #1a1f26 100%);
  color:#fff;
  box-shadow:
    0 10px 22px -8px rgba(20,28,38,.75),
    0 0 22px rgba(180,195,215,.55),
    0 0 0 1px rgba(255,255,255,.7) inset,
    0 1px 0 rgba(255,255,255,.95) inset,
    0 -1px 0 rgba(20,28,38,.7) inset,
    0 0 0 2px rgba(255,255,255,.22);
  overflow:hidden;
}
.hour-rank.rank-silver2::before{
  content:"";
  position:absolute;left:6%;right:6%;top:6%;height:40%;
  border-radius:999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,0)),
    radial-gradient(circle at 30% 50%, rgba(255,255,255,.9) 0%, transparent 60%);
  pointer-events:none;
  filter: blur(.3px);
}
.hour-rank.rank-silver2::after{
  content:"";
  position:absolute;inset:0;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.7) 50%, transparent 65%);
  transform: translateX(-110%);
  animation: shine-sweep 3.4s ease-in-out infinite;
  pointer-events:none;
  mix-blend-mode: overlay;
}
.hour-rank.rank-silver2 .hr-ic,
.hour-rank.rank-silver2 .hr-text{ position:relative; z-index:2; }
.hour-rank.rank-silver2 .hr-text{
  position:relative;
  font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  font-size:11.5px;
  font-weight:900;
  letter-spacing:.6px;
  line-height:1;
  display:inline-flex;align-items:center;
  text-rendering:geometricPrecision;
  -webkit-font-smoothing:antialiased;
  color:#fff;
  text-shadow:
    0 1px 0 rgba(255,255,255,.95),
    0 -1px 1px rgba(20,28,38,.85),
    0 2px 3px rgba(15,22,30,.55),
    0 0 6px rgba(255,255,255,.55);
}
.hour-rank.rank-silver2 .hr-ic{ transform: scale(1.5); margin: 0 0 0 3px;
  filter: drop-shadow(0 1px 2px rgba(30,40,55,.55)) drop-shadow(0 0 6px rgba(220,230,245,.6));
}
.hour-rank.rank-silver .hr-ic{
  filter: drop-shadow(0 1px 2px rgba(60,70,85,.4)) drop-shadow(0 0 6px rgba(220,230,240,.6));
}
.bars{display:flex;align-items:flex-end;gap:3px;height:22px;flex-shrink:0}
.bars i{
  width:3px;border-radius:2px;background:var(--grad-btn);
  display:block;
  transform-origin:bottom center;
  animation: bar-eq 900ms ease-in-out infinite;
}
.bars i:nth-child(1){height:40%;animation-delay:  0ms; animation-duration: 720ms}
.bars i:nth-child(2){height:70%;animation-delay:120ms; animation-duration: 880ms}
.bars i:nth-child(3){height:55%;animation-delay:240ms; animation-duration: 640ms}
.bars i:nth-child(4){height:90%;animation-delay: 60ms; animation-duration: 960ms}
.bars i:nth-child(5){height:65%;animation-delay:300ms; animation-duration: 760ms}
.bars i:nth-child(6){height:35%;animation-delay:180ms; animation-duration: 680ms}
@keyframes bar-eq{
  0%, 100% { transform: scaleY(.35); }
  50%      { transform: scaleY(1); }
}

/* ====== Screen 3: Lobby ====== */
.lobby-subtabs{display:flex;gap:18px;padding:0 2px 14px;align-items:center}
.stab{font-size:14px;color:var(--ink-mute);font-weight:600;position:relative;padding-bottom:6px}
.stab.active{color:var(--ink);font-weight:800}
.stab.active::after{content:"";position:absolute;left:2px;right:2px;bottom:-2px;height:3px;border-radius:3px;background:var(--grad-btn)}
.tabs .tab.big{
  font-size:22px;font-weight:800;
  background: var(--grad-btn);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.tabs .tab.big::after{display:none}

.live-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;
}
.live-card{
  position:relative;
  border-radius:16px;overflow:hidden;
  aspect-ratio:3/4;
  display:flex;flex-direction:column;justify-content:flex-end;
  color:#fff;text-decoration:none;
  background-size:cover;background-position:center;
}
.live-card::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 50% 36%, #2a142e 0 24%, rgba(42,20,46,.4) 33%, transparent 56%),
    radial-gradient(ellipse 75% 60% at 50% 96%, #2a142e 0 55%, transparent 75%),
    linear-gradient(180deg, var(--lc-1) 0%, var(--lc-2) 100%);
}
.live-card::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg, transparent 50%, rgba(25,8,35,.55) 100%);
}
.live-1{--lc-1:#f4b7d8;--lc-2:#7c4a8f}
.live-2{--lc-1:#f3c5d6;--lc-2:#824e90}
.live-3{--lc-1:#f0b09a;--lc-2:#8c5a78}
.live-4{--lc-1:#f6c0db;--lc-2:#864e94}
.live-5{--lc-1:#e6a3c2;--lc-2:#6c4084}
.live-6{--lc-1:#dca3da;--lc-2:#6f4488}
.live-7{--lc-1:#efb7d9;--lc-2:#854a8d}
.live-8{--lc-1:#f0c1d7;--lc-2:#7c5092}
.live-9{--lc-1:#e8b0d2;--lc-2:#823e8a}
.live-10{--lc-1:#eebada;--lc-2:#90519a}
.live-11{--lc-1:#f0bcd9;--lc-2:#7d4a8e}
.live-12{--lc-1:#e6a3c9;--lc-2:#79438c}
.live-13{--lc-1:#eebed5;--lc-2:#854692}
.live-14{--lc-1:#e3aac9;--lc-2:#6f3e84}
.live-badge{
  position:absolute;top:10px;left:10px;
  background:rgba(255,61,150,.9);
  color:#fff;font-family:"Inter",sans-serif;font-weight:700;font-size:10px;
  padding:3px 7px;border-radius:6px;display:flex;align-items:center;gap:4px;
  box-shadow:0 0 12px rgba(255,61,150,.6);
  z-index:2;
}
.lb-dot{width:5px;height:5px;border-radius:999px;background:#fff;display:inline-block;box-shadow:0 0 6px #fff}
.live-views{
  position:absolute;top:10px;right:10px;
  background:rgba(20,8,30,.4);
  color:#fff;font-family:"Inter",sans-serif;font-weight:600;font-size:10px;
  padding:3px 7px;border-radius:6px;display:flex;align-items:center;gap:3px;
  backdrop-filter: blur(4px);
  z-index:2;
}
.play-btn{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:48px;height:48px;border-radius:999px;
  background:radial-gradient(circle,#ff3d96 0%,#c33fbc 100%);
  display:grid;place-items:center;z-index:2;
  box-shadow:0 0 0 6px rgba(255,61,150,.25), 0 0 24px rgba(255,82,178,.6), 0 8px 20px -4px rgba(180,30,140,.6);
}
.play-btn svg{margin-left:2px}
.live-foot{position:relative;z-index:2;padding:10px 12px}
.live-name{font-weight:700;font-size:14px;line-height:1.2}
.live-loc{font-size:11px;opacity:.9;margin-top:3px}

/* ====== Screen 4: Messages ====== */
.pill-row{display:flex;gap:8px;padding:0 2px 14px}
.pill{
  font-size:12px;font-weight:600;color:var(--ink-soft);
  background:#f5e7f3;padding:6px 14px;border-radius:999px;
}
.pill.active{background:var(--grad-btn);color:#fff;box-shadow:0 4px 12px -4px rgba(220,60,170,.55)}

.msg-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.msg-row{
  display:flex;align-items:center;gap:12px;
  background:linear-gradient(180deg,#fbf2fb,#f7eaf7);
  border:1px solid #f1dff1;border-radius:16px;padding:11px 14px;
}
.msg-icon{
  width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex-shrink:0;
  box-shadow:0 6px 14px -6px rgba(180,60,170,.5);
}
.msg-bell{background:linear-gradient(135deg,#a13bd0,#7e4ad1)}
.msg-chat{background:linear-gradient(135deg,#3ee08a,#1cb472)}
.msg-news{background:linear-gradient(135deg,#ff3d96,#d348c8)}
.avatar.small{width:42px;height:42px;border-radius:12px}
.avatar.small::after{border-radius:12px}
.msg-body{flex:1;min-width:0}
.msg-head{display:flex;justify-content:space-between;align-items:center}
.msg-name{font-weight:700;font-size:14px;color:#23142a}
.msg-name-en{font-family:"Inter",sans-serif;color:var(--ink-soft);font-weight:500;font-size:12px;margin-left:2px}
.msg-time{font-size:11px;color:var(--ink-mute);font-family:"Inter",sans-serif}
.msg-text{font-size:12px;color:var(--ink-mute);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.badge-num{
  position:absolute;
  background:var(--grad-btn);color:#fff;font-family:"Inter",sans-serif;font-weight:700;font-size:10px;
  min-width:18px;height:18px;padding:0 5px;border-radius:999px;
  display:grid;place-items:center;
  margin-left:auto;align-self:flex-end;
  box-shadow:0 0 8px rgba(255,61,150,.6);
}
.msg-row{position:relative}
.msg-row .badge-num{position:absolute;right:14px;bottom:11px}

/* ====== Screen 5: Profile ====== */
.profile-pad{padding:0;display:flex;flex-direction:column}
.profile-hero{
  position:relative;
  padding:0 20px 80px;
  background:linear-gradient(180deg,#e7b9e1 0%,#efc9e8 40%,#f5dceb 100%);
  text-align:center;
  height:340px;
  flex-shrink:0;
}
.prof-top-actions{display:flex;justify-content:flex-end;gap:10px;padding:8px 0 14px}
.icon-btn.ghost-light{background:rgba(255,255,255,.6);color:#7a4a86}
.prof-avatar-wrap{position:relative;display:inline-block;margin-top:6px}
.prof-avatar{width:118px;height:118px;box-shadow:0 0 0 4px rgba(255,255,255,.55), 0 0 0 6px rgba(255,61,150,.55), 0 0 30px rgba(255,82,178,.55)}
.crown{
  position:absolute;right:-2px;bottom:4px;
  width:30px;height:30px;border-radius:999px;
  background:linear-gradient(135deg,#ffd25a,#ff8a3c);
  display:grid;place-items:center;font-size:14px;
  box-shadow:0 0 0 3px #fff;
}
.prof-name-row{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px}
.prof-name{font-size:24px;font-weight:800;color:#2a1a32;font-family:"Inter","Noto Sans TC",sans-serif}
.prof-vip{background:linear-gradient(135deg,#ffd25a,#ff8a3c);color:#5a2400;padding:3px 9px;font-size:11px}
.prof-id{color:var(--ink-soft);font-size:12px;margin-top:6px;display:flex;align-items:center;justify-content:center;gap:6px;font-family:"Inter","Noto Sans TC",sans-serif}
.prof-dot{color:var(--ink-mute)}
.verified{width:14px;height:14px;border-radius:999px;background:linear-gradient(135deg,#ff3d96,#a93cd1);display:inline-grid;place-items:center}

.profile-card{
  background:#fff;
  border-radius:24px 24px 0 0;
  margin-top:-50px;
  position:relative;
  padding:18px 20px 0;
  flex:1;
}
.stats-row{display:flex;justify-content:space-around;padding:6px 0 18px;border-bottom:1px solid #f3e3f3;margin-bottom:14px}
.stat{text-align:center}
.stat-num{font-family:"Inter",sans-serif;font-weight:800;font-size:20px;color:#2a1a32}
.stat-lbl{font-size:11px;color:var(--ink-mute);margin-top:2px}

.settings-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.set-row{
  display:flex;align-items:center;gap:12px;
  background:linear-gradient(180deg,#fbf2fb,#f6e8f6);
  border:1px solid #f1dff1;
  border-radius:14px;padding:12px 14px;
}
.set-ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex-shrink:0;box-shadow:0 4px 10px -4px rgba(180,60,170,.5)}
.set-1{background:linear-gradient(135deg,#ffb74d,#ff7a3c)}
.set-2{background:linear-gradient(135deg,#ffd25a,#ff8a3c)}
.set-3{background:linear-gradient(135deg,#ff3d96,#d348c8)}
.set-4{background:linear-gradient(135deg,#a93cd1,#7e4ad1)}
.set-5{background:linear-gradient(135deg,#3ee08a,#1ca36a)}
.set-6{background:linear-gradient(135deg,#5ab8ff,#4180e0)}
.set-7{background:linear-gradient(135deg,#ff6f9c,#c93aa7)}
.set-8{background:linear-gradient(135deg,#ffb74d,#ff7a3c)}
.set-9{background:linear-gradient(135deg,#7e4ad1,#3a2c80)}
.set-label{flex:1;font-weight:700;font-size:14px;color:#23142a}
.set-tag{font-size:10px;font-weight:700;padding:3px 8px;border-radius:6px}
.tag-diamond{background:#fdebd6;color:#a45a10}
.tag-perk{background:#fdebd6;color:#a45a10}
.tag-new{background:linear-gradient(135deg,#ff3d96,#d348c8);color:#fff}
.set-arrow{color:#b9a5c0;font-size:18px;line-height:1;margin-left:2px;font-family:"Inter",sans-serif}

/* profile tabbar — translucent (over white card area) */
.phone:has(.profile-pad) .tabbar{background:#fff}

/* nudge spacing */
.row-bottom{margin-top:0}
.hour-rank.rank-gold,
.hour-rank.rank-silver,
.hour-rank.rank-bronze{
  filter: saturate(.8);
}

/* ====== Side slider (右側可上下滑動的滑桿) ====== */
.side-slider{
  position:absolute;
  top:60px;
  bottom:110px;
  right:6px;
  width:9px;
  background:transparent;
  z-index:30;
  cursor:grab;
  touch-action:none;
  user-select:none;
}
.side-slider .thumb{
  position:absolute;
  left:50%;transform:translateX(-50%);
  width:9px;height:115px;
  border-radius:999px;
  background: linear-gradient(180deg,#ff4fb3 0%,#d348c8 60%,#a93cd1 100%);
  box-shadow:
    0 0 0 2px rgba(255,255,255,.9),
    0 0 0 4px rgba(255,61,150,.25),
    0 0 14px rgba(255,82,178,.7),
    0 0 28px rgba(212,52,206,.45),
    inset 0 1px 2px rgba(255,255,255,.55);
  cursor:grab;
  transition: box-shadow .2s, transform .15s;
}
.side-slider .thumb::before{
  /* center grip dots */
  content:"";
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:3px;height:32px;border-radius:2px;
  background:
    radial-gradient(circle, rgba(255,255,255,.9) 0 1px, transparent 1.4px) 0 0 / 3px 4px;
}
.side-slider .thumb:active{
  cursor:grabbing;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.95),
    0 0 0 5px rgba(255,61,150,.35),
    0 0 22px rgba(255,82,178,.85),
    0 0 42px rgba(212,52,206,.55);
}
/* ticks hidden (no track) */
.side-slider .ticks{ display:none; }

/* profile-pad slider sits above white card — keep dark enough */
.phone:has(.profile-pad) .side-slider{ z-index:30 }

/* 約會介面: 滑桿從第一張卡片高度開始 */
.row-top .phone:first-child .side-slider{ top: 200px; }
/* 聲播介面: 滑桿從第一張房間卡片高度開始 */
.row-top .phone:nth-child(2) .side-slider{ top: 288px; }
/* 大廳介面: 滑桿從第一排直播卡片上沿開始 */
.row-top .phone:nth-child(3) .side-slider{ top: 166px; }
/* 訊息介面: 滑桿從第一張訊息卡片上沿開始 */
.row-bottom .phone:first-child .side-slider{ top: 169px; }
/* 我的介面: 滑桿從個人資料卡上沿開始 */
.row-bottom .phone:nth-child(2) .side-slider{ top: 435px; }





/* ===== Card hover animations (subtle) ===== */
.user-card, .room-card, .msg-row, .set-row, .promo-card, .hero-event, .live-card {
  transition: transform .35s cubic-bezier(.2,.7,.2,1),
              box-shadow .35s ease,
              filter .35s ease;
  will-change: transform;
  cursor: pointer;
}
.user-card:hover, .room-card:hover, .msg-row:hover, .set-row:hover{
  transform: translateY(-1px) scale(1.005);
  box-shadow:
    0 7px 15px -10px rgba(220,60,170,.5), 0 0 13px rgba(255,82,178,.22);
}
.promo-card:hover{
  transform: translateY(-1px);
  box-shadow: 0 11px 22px -10px rgba(220,60,170,.55), 0 0 18px rgba(255,82,178,.24);
}
.hero-event:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
}
.live-card:hover{
  transform: translateY(-1px);
  box-shadow:
    0 9px 19px -10px rgba(40,10,50,.35), 0 0 16px rgba(255,82,178,.26);
}
.live-card .play-btn{ transition: transform .3s ease, box-shadow .3s ease; }
.live-card:hover .play-btn{
  transform: translate(-50%, -50%) scale(1.06);
}
.hi-btn{ transition: transform .2s ease, box-shadow .2s ease; }
.hi-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 7px 15px -6px rgba(220,60,170,.55);
}
.set-arrow{ transition: all .25s ease; }
.set-row:hover .set-arrow{ color:#ff3d96; transform: translateY(-1px); }
.icon-btn{ transition: transform .2s ease; }
.icon-btn:hover{ transform: scale(1.06); }


/* === In-phone toast === */
.phone-toast{
  position:absolute;
  left:50%;
  bottom:120px;
  transform:translate(-50%, 14px);
  background: rgba(20,8,30,.86);
  color:#fff;
  padding:10px 16px;
  border-radius:999px;
  font-size:13px;font-weight:600;letter-spacing:.3px;
  box-shadow:
    0 10px 24px -8px rgba(0,0,0,.45),
    0 0 0 1px rgba(255,61,150,.35),
    0 0 24px rgba(255,61,150,.4);
  opacity:0;pointer-events:none;
  backdrop-filter: blur(8px);
  transition: opacity .25s ease, transform .25s ease;
  z-index:50;
  white-space:nowrap;
}
.phone-toast.show{ opacity:1; transform:translate(-50%, 0); }

/* === Click ripple === */
.press-ripple{
  position:absolute;pointer-events:none;
  width:6px;height:6px;border-radius:999px;
  background:rgba(255,255,255,.85);
  transform:translate(-50%,-50%) scale(1);
  animation: ripple .55s ease-out forwards;
  mix-blend-mode:overlay;
  z-index:9;
}
@keyframes ripple{
  to{ width:180px;height:180px;opacity:0; }
}