/* ============================================
   杂志拼贴风 · Collage 
   适配单人卡「阮今夕 & 陆鱼」+ 房屋布局 + 直播弹幕
   ============================================ */

/* ===== 外层容器 scene ===== */
scene {
  display: block;
  max-width: 880px;
  margin: 20px auto;
  padding: clamp(18px, 4vw, 30px);
  background:
    linear-gradient(135deg, rgba(30,91,168,0.06) 0%, transparent 30%),
    linear-gradient(-135deg, rgba(214,51,132,0.06) 0%, transparent 30%),
    #FAF7F2;
  border-radius: 8px;
  box-shadow: 0 8px 26px rgba(42,42,40,0.13);
  position: relative;
  color: #2A2A2A;
  font-family: "Helvetica Neue", "PingFang SC", sans-serif;
}
scene::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 8px;
  width: 60px;
  height: 60px;
  background: conic-gradient(#1E5BA8 0deg 90deg, #D63384 90deg 180deg, #7952B3 180deg 270deg, #1E5BA8 270deg 360deg);
  border-radius: 50%;
  opacity: 0.15;
  pointer-events: none;
  z-index: 0;
}

/* ===== 顶栏 loc ===== */
loc {
  display: block;
  margin-bottom: 22px;
  padding: 14px 16px;
  background: #2A2A2A;
  color: #FAF7F2;
  font-family: "Arial Black", "PingFang SC", sans-serif;
  font-size: clamp(13px, 2.4vw, 16px);
  font-weight: 800;
  letter-spacing: 0.5px;
  border-radius: 6px;
  position: relative;
  transform: rotate(-0.6deg);
  box-shadow: 4px 4px 0 rgba(214,51,132,0.5);
  line-height: 1.7;
  z-index: 1;
}
loc::after {
  content: 'ISSUE';
  position: absolute;
  top: -8px;
  right: 12px;
  background: #D63384;
  color: #FAF7F2;
  font-size: 9px;
  padding: 2px 7px;
  border-radius: 3px;
  letter-spacing: 1px;
  transform: rotate(3deg);
}

/* ===== 正文 text ===== */
text {
  display: block;
  line-height: 1.85;
  color: #2A2A2A;
  margin-bottom: 18px;
  font-size: clamp(14px, 2.5vw, 16px);
  position: relative;
  z-index: 1;
}
text p { margin: 0 0 13px 0; }
text p:last-child { margin-bottom: 0; }

/* ===== 三色台词标签 ===== */
utalk, wtalk, ltalk {
  display: inline-block;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 4px;
  color: #FAF7F2;
  box-shadow: 2px 2px 0 rgba(42,42,42,0.2);
  transition: transform 0.2s ease;
  margin: 2px 0;
  transform: rotate(-0.5deg);
}
utalk { background: #1E5BA8; }
wtalk { background: #D63384; }
ltalk { background: #7952B3; }
utalk:hover, wtalk:hover, ltalk:hover { transform: rotate(0.5deg) scale(1.02); }

/* ===== 手机消息 phone ===== */
phone {
  display: block;
  margin: 8px 0;
  padding: 8px 12px 8px 32px;
  background: #FFFFFF;
  border: 1.5px dashed #2A2A2A;
  border-radius: 6px;
  font-size: clamp(12px, 2.2vw, 13px);
  color: #2A2A2A;
  position: relative;
  font-family: "Courier New", "PingFang SC", monospace;
}
phone::before {
  content: '📱';
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
}

/* ===== 折叠状态栏 details 通用 ===== */
scene details {
  background: #FFFFFF;
  border: 2px solid #2A2A2A;
  border-radius: 6px;
  margin-bottom: 12px;
  padding: 0 16px;
  box-shadow: 3px 3px 0 rgba(121,82,179,0.25);
  position: relative;
  z-index: 1;
}
scene details[open] { padding-bottom: 12px; }
scene details > summary {
  margin: 0 -16px;
  padding: 11px 16px 11px 38px;
  cursor: pointer;
  font-family: "Arial Black", "PingFang SC", sans-serif;
  font-weight: 800;
  color: #2A2A2A;
  font-size: clamp(13px, 2.3vw, 15px);
  letter-spacing: 0.5px;
  user-select: none;
  list-style: none;
  position: relative;
}
scene details > summary::-webkit-details-marker { display: none; }
scene details > summary::before {
  content: '+';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  line-height: 17px;
  text-align: center;
  background: #1E5BA8;
  color: #FAF7F2;
  border-radius: 4px;
  font-size: 14px;
  font-family: "Arial Black", sans-serif;
  transition: background 0.25s ease;
}
scene details[open] > summary::before { content: '−'; background: #D63384; }
scene details[open] > summary { margin-bottom: 12px; border-bottom: 2px solid #2A2A2A; }

/* ===== 状态栏文本换行 · 保留源码换行符 ===== */
scene details { white-space: pre-line; }
scene details > summary { white-space: normal; }
/* 房屋布局/弹幕面板用HTML标签结构，需要重置回 normal */
scene .house-panel, scene .house-panel *,
scene .danmu-panel, scene .danmu-panel * { white-space: normal; }

/* 嵌套 details（隐私信息、记忆档案子项）视觉层次 */
scene details details {
  margin: 8px 0;
  border-width: 1.5px;
  box-shadow: 2px 2px 0 rgba(121,82,179,0.2);
  background: rgba(250,247,242,0.7);
}

/* ============================================
   🏠 房屋布局
   ============================================ */
.house-info {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 14px 0;
}
.house-info span {
  display: inline-block;
  padding: 4px 10px;
  background: #FFFFFF;
  border: 2px solid #2A2A2A;
  border-radius: 20px;
  font-size: clamp(11px, 2vw, 12px);
  font-weight: 700;
  box-shadow: 2px 2px 0 rgba(30,91,168,0.3);
}
.house-info span:nth-child(odd) { transform: rotate(-0.8deg); }
.house-info span:nth-child(even) { transform: rotate(0.6deg); }

/* 平面图 5x4 桌面网格 */
.floorplan {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(4, minmax(66px, auto));
  grid-template-areas:
    "entry  living  living  dining  kitchen"
    "closet living  living  dining  kitchen"
    "closet master  master  esports bath"
    "mbath  master  master  bed2    balcony";
  gap: 6px;
  padding: 10px;
  background: #F5EEE0;
  border: 2px dashed #2A2A2A;
  border-radius: 6px;
  position: relative;
}

/* 房间格子（覆盖 details 通用样式） */
.floorplan .room {
  margin: 0;
  padding: 0;
  border: 2px solid #2A2A2A;
  border-radius: 4px;
  box-shadow: 2px 2px 0 rgba(42,42,42,0.15);
  background: transparent;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.floorplan .room[open] { padding-bottom: 0; }
.floorplan .room:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 rgba(42,42,42,0.3);
}
.floorplan .room > summary {
  margin: 0;
  padding: 6px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 54px;
  font-family: "Arial Black", "PingFang SC", sans-serif;
  border-bottom: none;
}
.floorplan .room > summary::before { display: none; }
.floorplan .room[open] > summary { margin: 0; border-bottom: none; }
.floorplan .room > summary i {
  font-style: normal;
  font-size: clamp(18px, 3.5vw, 22px);
  line-height: 1;
  margin-bottom: 3px;
}
.floorplan .room > summary b {
  font-size: clamp(10px, 1.8vw, 12px);
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #2A2A2A;
}

/* Grid 定位 */
.r-entry   { grid-area: entry; }
.r-living  { grid-area: living; }
.r-dining  { grid-area: dining; }
.r-kitchen { grid-area: kitchen; }
.r-closet  { grid-area: closet; }
.r-master  { grid-area: master; }
.r-esports { grid-area: esports; }
.r-bath    { grid-area: bath; }
.r-mbath   { grid-area: mbath; }
.r-bed2    { grid-area: bed2; }
.r-balcony { grid-area: balcony; }

/* 房间分区着色 */
.r-living, .r-dining { border-color: #D63384; }
.r-living > summary, .r-dining > summary { background: rgba(214,51,132,0.15); }

.r-kitchen, .r-bath, .r-mbath { border-color: #1E5BA8; }
.r-kitchen > summary, .r-bath > summary, .r-mbath > summary { background: rgba(30,91,168,0.15); }

.r-master, .r-bed2 { border-color: #7952B3; }
.r-master > summary, .r-bed2 > summary { background: rgba(121,82,179,0.18); }

.r-closet { border-style: dashed; border-color: #D63384; }
.r-closet > summary { background: rgba(214,51,132,0.08); }

.r-entry, .r-balcony { border-style: dashed; }
.r-entry > summary, .r-balcony > summary { background: #F5EEE0; }

/* 电竞房·深底霓虹 */
.r-esports {
  border-color: #D63384;
  box-shadow: 2px 2px 0 rgba(214,51,132,0.5), 0 0 6px rgba(0,255,180,0.35) inset;
}
.r-esports > summary { background: #1a1a1a; }
.r-esports > summary b { color: #00FFB4; text-shadow: 0 0 4px rgba(0,255,180,0.6); }
.r-esports > summary i { filter: drop-shadow(0 0 3px rgba(0,255,180,0.5)); }

/* 房间弹出信息框 rm-pop —— 桌面端 absolute 浮层 */
.floorplan .rm-pop { display: none; }
.floorplan .room[open] > .rm-pop {
  display: block;
  position: absolute;
  top: 100%;
  left: 8px;
  right: 8px;
  margin-top: 8px;
  padding: 12px 14px;
  background: #FFFFFF;
  border: 2px solid #2A2A2A;
  border-radius: 6px;
  box-shadow: 4px 4px 0 rgba(121,82,179,0.35), 0 8px 20px rgba(0,0,0,0.15);
  z-index: 20;
  font-size: 12px;
  animation: rmFade 0.25s ease;
}
@keyframes rmFade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.floorplan .rm-pop h5 {
  margin: 0 0 8px 0;
  padding: 3px 10px;
  display: inline-block;
  background: #D63384;
  color: #FAF7F2;
  font-family: "Arial Black", "PingFang SC", sans-serif;
  font-size: 13px;
  border-radius: 3px;
  transform: rotate(-1deg);
}
.floorplan .rm-pop p {
  margin: 6px 0;
  font-size: 12px;
  line-height: 1.65;
  color: #2A2A2A;
}
.floorplan .rm-pop b {
  display: inline-block;
  color: #FAF7F2;
  background: #7952B3;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 3px;
  margin-right: 5px;
  font-size: 11px;
}

/* ============================================
   📺 直播弹幕
   ============================================ */
.danmu-panel > summary::after {
  content: '● LIVE';
  display: inline-block;
  margin-left: 10px;
  padding: 1px 6px;
  background: #ff2d2d;
  color: #fff;
  font-size: 10px;
  border-radius: 3px;
  letter-spacing: 1px;
  animation: liveBlink 1.5s infinite;
  vertical-align: middle;
}
@keyframes liveBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.danmu-screen {
  padding: 12px 14px;
  background:
    linear-gradient(90deg, rgba(214,51,132,0.18), transparent 8%, transparent 92%, rgba(30,91,168,0.18)),
    #1A1A1A;
  border-radius: 4px;
  position: relative;
  border: 1px solid #333;
}
.danmu-screen::after {
  content: 'HD';
  position: absolute;
  top: 6px;
  right: 8px;
  padding: 1px 5px;
  background: rgba(255,255,255,0.15);
  color: #FAF7F2;
  font-size: 9px;
  font-family: "Arial Black", sans-serif;
  border-radius: 2px;
  letter-spacing: 1px;
}
.danmu-screen .dm {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 2px;
  font-size: clamp(12px, 2.1vw, 13px);
  line-height: 1.5;
  opacity: 0;
  animation: dmSlide 0.45s ease forwards;
}
@keyframes dmSlide {
  from { opacity: 0; transform: translateX(22px); }
  to   { opacity: 1; transform: translateX(0); }
}
.dm .uname {
  flex-shrink: 0;
  padding: 1px 7px;
  font-family: "Arial Black", "PingFang SC", sans-serif;
  font-size: 10px;
  font-weight: 700;
  border-radius: 3px;
  color: #1A1A1A;
  background: rgba(255,255,255,0.85);
  transform: rotate(-1.5deg);
  max-width: 32%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dm .txt {
  color: #FAF7F2;
  flex: 1;
  word-break: break-word;
}

/* 12 条弹幕彩色循环 */
.dm-a .txt { color: #00FFB4; }
.dm-b .txt { color: #FF6BAA; }
.dm-c .txt { color: #FFD93D; }
.dm-d .txt { color: #B39DDB; }
.dm-e .txt { color: #64B5F6; }
.dm-f .txt { color: #FAF7F2; }
.dm-g .txt { color: #FF8A65; }
.dm-h .txt { color: #00FFB4; }
.dm-i .txt { color: #FF6BAA; }
.dm-j .txt { color: #FFD93D; }
.dm-k .txt { color: #B39DDB; }
.dm-l .txt { color: #64B5F6; }

/* 12 条错开进场 */
.dm-a { animation-delay: 0s; }
.dm-b { animation-delay: 0.08s; }
.dm-c { animation-delay: 0.16s; }
.dm-d { animation-delay: 0.24s; }
.dm-e { animation-delay: 0.32s; }
.dm-f { animation-delay: 0.40s; }
.dm-g { animation-delay: 0.48s; }
.dm-h { animation-delay: 0.56s; }
.dm-i { animation-delay: 0.64s; }
.dm-j { animation-delay: 0.72s; }
.dm-k { animation-delay: 0.80s; }
.dm-l { animation-delay: 0.88s; }

/* ============================================
   移动端适配 ≤600px
   ============================================ */
@media (max-width: 600px) {
  scene { margin: 12px; padding: 16px; }
  loc { transform: none; padding: 12px 14px; }
  scene details > summary { padding-left: 36px; }

  /* 平面图 4x5 移动端布局 */
  .floorplan {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(5, minmax(52px, auto));
    grid-template-areas:
      "entry   living  living  kitchen"
      "closet  living  living  dining"
      "mbath   master  master  esports"
      "bath    master  master  bed2"
      "balcony balcony balcony balcony";
    gap: 4px;
    padding: 8px;
  }
  .floorplan .room > summary { min-height: 48px; padding: 5px 2px; }

  /* 移动端弹框改为底部抽屉 */
  .floorplan .room[open] > .rm-pop {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    max-width: 100%;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -6px 24px rgba(0,0,0,0.35);
    animation: rmSlideUp 0.3s ease;
    z-index: 100;
    max-height: 60vh;
    overflow-y: auto;
  }
  .floorplan .room[open] > .rm-pop::after {
    content: '↓ 再次点击房间格子收起';
    display: block;
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px dashed #bbb;
    text-align: center;
    font-size: 10px;
    color: #999;
  }
  @keyframes rmSlideUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }

  /* 弹幕移动端 */
  .danmu-screen { padding: 10px 12px; }
  .dm .uname { font-size: 9px; padding: 1px 5px; }
  .house-info { gap: 4px; }
  .house-info span { padding: 3px 8px; font-size: 11px; }
}