/* ============================================================
 * 小游戏样式：密室·红房子逃脱 / 藏宝阁·3D迷宫屏保
 * ============================================================ */

/* ---------------- 密室 · 红房子 ---------------- */
.esc-room {
  display: flex; flex-direction: column; height: 100%;
  background: #2b0806; user-select: none;
}
.esc-scene {
  position: relative; flex: 1; min-height: 220px; overflow: hidden;
  background: linear-gradient(#7a1f1a 0%, #6a1714 68%, #2b0806 68%, #1d0504 100%);
}
.esc-wall {
  position: absolute; left: 0; right: 0; top: 0; bottom: 32%;
  background-color: #7a1f1a;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 22px, rgba(0,0,0,.30) 22px 24px),
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(0,0,0,.30) 46px 48px);
}
.esc-floor {
  position: absolute; left: 0; right: 0; bottom: 0; height: 32%;
  background: repeating-linear-gradient(90deg, #4a100c 0 40px, #3d0d0a 40px 80px);
}
.esc-hot {
  position: absolute; border: none; background: transparent;
  cursor: pointer; padding: 0;
}
.esc-hot:active, .esc-hot:focus { outline: none; }

/* 画（左上） */
.esc-picture { left: 8%; top: 12%; width: 26%; height: 38%; }
.esc-frame {
  display: block; width: 100%; height: 100%;
  border: 6px solid #caa04a; background:
    linear-gradient(135deg, #1d4d3f 0%, #2d6b55 100%);
  box-shadow: inset 0 0 0 2px #8a6a20, 0 2px 6px rgba(0,0,0,.5);
}
.esc-picture:active .esc-frame { background: linear-gradient(135deg, #143528, #1d4d3f); }
.esc-behind {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-size: 22px;
}

/* 地毯（中下） */
.esc-rug {
  left: 30%; bottom: 6%; width: 40%; height: 18%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 50%, #a03028 0 60%, #7a1f1a 60% 100%);
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.esc-rug:active { filter: brightness(.8); }
.esc-rug-key {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-size: 20px;
}

/* 保险箱（右侧） */
.esc-safe { right: 12%; top: 30%; width: 20%; height: 30%; }
.esc-safe-door {
  display: block; width: 100%; height: 100%;
  background: linear-gradient(180deg, #9aa0a6, #6b7075);
  border: 3px solid #4a4e52; border-radius: 3px;
  box-shadow: inset 0 0 0 6px #7d838a, 0 2px 6px rgba(0,0,0,.5);
  position: relative; transform-origin: left center;
  transition: transform .5s ease;
}
.esc-safe-door::after {                 /* 转盘 */
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 34%; height: 34%; transform: translate(-50%, -50%);
  border-radius: 50%; border: 3px solid #4a4e52; background: #b8bec4;
}
.esc-safe-door.open { transform: perspective(300px) rotateY(-70deg); }
.esc-safe:active .esc-safe-door { filter: brightness(.85); }

/* 门（右侧边缘） */
.esc-door { right: 2%; top: 8%; width: 9%; height: 52%; }
.esc-door {
  background: linear-gradient(90deg, #5a3a1a 0 70%, #3d270f 70% 100%);
  border: 2px solid #2b1c08; border-radius: 2px 0 0 2px;
}
.esc-knob {
  position: absolute; left: 8%; top: 48%;
  width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffe08a, #a87b10);
  border: 1px solid #6b4e08;
}
.esc-lock { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); font-size: 14px; }
.esc-door:active { filter: brightness(.8); }

/* ============ 完整版新房件（红房子） ============ */
.esc-scene [hidden] { display: none !important; }

/* 画（重新定位） */
.esc-picture { left: 8%; top: 12%; width: 20%; height: 28%; }

/* 保险箱（初始嵌墙看不清，卸画后显形） */
.esc-safe { right: 28%; top: 22%; width: 15%; height: 22%; opacity: .2; filter: blur(1px); transition: opacity .4s, filter .4s; }
.esc-safe.revealed { opacity: 1; filter: none; }

/* 画后喷字 */
.esc-spray {
  position: absolute; left: 28%; top: 30%; width: 16%; text-align: center;
  color: #ff5a4a; font: bold 18px/1.2 "Courier New", monospace;
  text-shadow: 0 0 4px rgba(255,40,30,.6); letter-spacing: 2px;
  transform: rotate(-4deg); z-index: 2;
}

/* 抽屉柜 */
.esc-drawer { left: 4%; bottom: 3%; width: 15%; height: 24%; }
.esc-drawer-face {
  display: block; width: 100%; height: 100%;
  background: linear-gradient(180deg, #6b3a1a, #4a2710);
  border: 3px solid #2b1808; border-radius: 3px;
  box-shadow: inset 0 0 0 4px #5a2f12, 0 2px 6px rgba(0,0,0,.5);
  position: relative; transition: transform .3s;
}
.esc-drawer-face::after {
  content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 30%; height: 10%; background: #caa04a; border: 1px solid #2b1808; border-radius: 2px;
}
.esc-drawer-face.open { transform: translateY(38%); box-shadow: inset 0 0 0 4px #3a1d0c; }
.esc-drawer:active .esc-drawer-face { filter: brightness(.85); }

/* 手电 */
.esc-lamp { left: 50%; top: 30%; width: 7%; height: 13%; }
.esc-lamp-body {
  display: block; width: 100%; height: 100%;
  background: linear-gradient(180deg, #d9d2c4, #9a9486);
  border: 2px solid #5a554a; border-radius: 4px 4px 6px 6px;
  position: relative; transition: box-shadow .3s;
}
.esc-lamp-body::after {
  content: ''; position: absolute; left: 50%; bottom: -6%; transform: translateX(-50%);
  width: 60%; height: 18%; background: #ffe9a8; border: 1px solid #8a6a20; border-radius: 50%;
}
.esc-lamp-body.lit { box-shadow: 0 0 22px 8px rgba(255,233,140,.85); }

/* 电视 */
.esc-tv { right: 12%; top: 10%; width: 22%; height: 26%; }
.esc-tv-screen {
  display: block; width: 100%; height: 100%;
  background: #1a1a1a; border: 6px solid #2b2b2b; border-radius: 6px;
  box-shadow: inset 0 0 0 3px #444, 0 2px 6px rgba(0,0,0,.5);
  position: relative; transition: background .3s;
}
.esc-tv-screen::after {
  content: 'TV'; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  color: #555; font: bold 16px "Courier New", monospace;
}
.esc-tv-screen.on {
  background: radial-gradient(circle at 50% 50%, #1d6fb8, #0a2e4d);
  animation: esc-tv-flick 1.2s steps(2) infinite;
}
.esc-tv-screen.on::after { content: '▶'; color: #9fe0ff; }
@keyframes esc-tv-flick { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.25); } }

/* 窗帘 + 挂钟 */
.esc-curtain { left: 60%; top: 6%; width: 16%; height: 30%; z-index: 3; }
.esc-curtain-fabric {
  display: block; width: 100%; height: 100%;
  background: repeating-linear-gradient(90deg, #7a1f1a 0 10px, #5a1410 10px 20px);
  border: 2px solid #3d0d0a; border-radius: 2px 2px 8px 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,.5);
  transform-origin: left center; transition: transform .5s ease;
}
.esc-curtain-fabric.open { transform: scaleX(.18); }
/* 拉开后让窗帘按钮不再拦截点击，点击穿透到下方挂钟 */
.esc-curtain.opened { pointer-events: none; }
.esc-clock { left: 63%; top: 9%; width: 10%; height: 16%; z-index: 2; }
.esc-clock-face {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  background: radial-gradient(circle at 50% 40%, #f4e9c8, #c9b88a);
  border: 4px solid #8a6a20; border-radius: 50%;
  color: #5a2f12; font: bold 14px "Courier New", monospace;
  box-shadow: 0 2px 6px rgba(0,0,0,.5);
}
.esc-clock-face.set { border-color: #caa04a; box-shadow: 0 0 14px 4px rgba(202,160,74,.7); }

/* 床 */
.esc-bed { right: 14%; bottom: 3%; width: 28%; height: 24%; }
.esc-bed-base {
  display: block; width: 100%; height: 100%;
  background: linear-gradient(180deg, #8a2a22 0 60%, #5a1a14 60% 100%);
  border: 2px solid #3d0d0a; border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,.5);
}
.esc-bed-remote { position: absolute; left: 14%; bottom: -4%; font-size: 18px; }

/* 地毯（铺在床与抽屉之间的地板上） */
.esc-rug { left: 30%; bottom: 20%; width: 36%; height: 14%; }

/* 便签（抽屉/电视）独立定位，覆盖默认 .esc-note 中央定位 */
.esc-drawer-note { left: 3%; top: 44%; transform: rotate(-2deg); font-size: 13px; padding: 6px 10px; }
.esc-tv-note { left: auto; right: 12%; top: 38%; transform: rotate(2deg); font-size: 13px; padding: 6px 10px; }

/* 画后便签 */
.esc-note {
  position: absolute; left: 50%; top: 14%; transform: translateX(-50%) rotate(-3deg);
  background: #f4e9c8; color: #6b2737; padding: 8px 14px;
  font: bold 20px/1.4 "Courier New", monospace;
  border: 1px solid #c9b88a; box-shadow: 0 3px 8px rgba(0,0,0,.5);
}

/* 底部物品栏 + 消息 */
.esc-bar {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; background: #1d0504; border-top: 2px solid #4a100c;
}
.esc-inv { display: flex; gap: 6px; flex-wrap: wrap; }
.esc-chip {
  background: #3d0d0a; color: #f4d6c8; border: 1px solid #7a1f1a;
  border-radius: 10px; padding: 3px 10px; font-size: 12px;
}
.esc-chip-empty { opacity: .5; }
.esc-msg { flex: 1; text-align: right; color: #d9a08c; font-size: 12px; }

/* 密码键盘 */
.esc-keypad {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: #2b2f33; border: 2px solid #4a4e52; border-radius: 6px;
  padding: 12px; z-index: 5; box-shadow: 0 6px 20px rgba(0,0,0,.6);
}
.esc-kp-title { color: #cfd4da; font-size: 12px; text-align: center; margin-bottom: 6px; }
.esc-kp-disp {
  background: #0a2b0a; color: #7be07b; font: bold 24px/1.6 "Courier New", monospace;
  text-align: center; letter-spacing: 8px; border: 1px solid #1d4d1d;
  border-radius: 3px; margin-bottom: 8px; min-height: 38px;
}
.esc-kp-grid { display: grid; grid-template-columns: repeat(3, 52px); gap: 6px; }
.esc-kp-grid button {
  font: bold 18px "Courier New", monospace; padding: 8px 0;
  background: linear-gradient(180deg, #b8bec4, #8a9096);
  border: 2px solid #4a4e52; border-radius: 3px; cursor: pointer;
}
.esc-kp-grid button:active { background: linear-gradient(180deg, #8a9096, #b8bec4); }

/* 胜利覆盖层 */
.esc-win {
  position: absolute; inset: 0; z-index: 9;
  background: rgba(0, 0, 0, .72);
  display: flex; align-items: center; justify-content: center;
}
/* 关键：hidden 属性必须压过上面的 display:flex（否则开局就显示结束层、重置也失效） */
.esc-win[hidden],
.esc-keypad[hidden],
.esc-note[hidden],
.esc-behind[hidden],
.esc-rug-key[hidden] { display: none !important; }
.esc-win-emoji { font-size: 48px; }
.esc-win-title { font-size: 20px; font-weight: bold; margin: 10px 0 4px; }
.esc-win-sub { font-size: 13px; color: #f4d6c8; margin-bottom: 14px; }
.esc-win-box button {
  font-size: 14px; padding: 8px 20px;
  background: linear-gradient(180deg, #b8bec4, #8a9096);
  border: 2px solid #4a4e52; border-radius: 3px; cursor: pointer;
}

/* ---------------- 电子宠物（贵宾室专属） ---------------- */
.pet-wrap { display: flex; flex-direction: column; height: 100%; background: #fdf6ec; user-select: none; }
.pet-stage {
  position: relative; flex: none; height: 180px;
  background: linear-gradient(#ffe8c9 0%, #ffd9a8 55%, #c98a4b 55%, #8a5a2b 100%);
  border-bottom: 3px solid #5a3a1a; cursor: pointer; overflow: hidden;
}
.pet-stage canvas { display: block; margin: 0 auto; }
.pet-emoji {
  position: absolute; top: 10px; right: 12px; font-size: 26px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
}
.pet-name {
  position: absolute; left: 50%; top: 8px; transform: translateX(-50%);
  background: rgba(90,58,26,.75); color: #ffe8c9;
  font: bold 12px "Courier New", monospace; padding: 3px 12px; border-radius: 10px;
}
.pet-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; padding: 10px 14px 4px; }
.pet-stat { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #6b4e2e; }
.pet-stat span { flex: none; width: 34px; }
.pet-bar {
  flex: 1; height: 10px; background: #e8d5b8;
  border: 1px solid #c9b088; border-radius: 5px; overflow: hidden;
}
.pet-bar i { display: block; height: 100%; background: #40c057; transition: width .3s ease; }
.pet-actions {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  padding: 8px 14px;
}
.pet-btn {
  font-size: 13px; padding: 7px 0; cursor: pointer;
  background: linear-gradient(#fff6e8, #f3dfc0);
  border: 1px solid #c9b088; border-radius: 6px; color: #5a3a1a;
}
.pet-btn:active { background: linear-gradient(#f3dfc0, #fff6e8); }
.pet-msg { flex: 1; min-height: 34px; padding: 4px 14px 10px; font-size: 12px; color: #8a5a2b; }
.pet-revive {
  position: absolute; right: 14px; bottom: 40px; z-index: 3;
  background: linear-gradient(#ffe3a3, #f5b942); border-color: #b8791a; color: #5a3a1a;
}

/* ---- 进化 / 图鉴 ---- */
.pet-exp { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; font-size: 11px; color: #8a5a2b; }
.pet-exp .pet-bar { flex: 1; }
.pet-exp b { font-size: 11px; color: #e8590c; white-space: nowrap; }
.pet-form { font-size: 11px; color: #b8791a; margin-top: 2px; font-weight: bold; }
.pet-dex { position: absolute; top: 8px; right: 10px; z-index: 3; border: 1px solid #c99a5b;
  background: linear-gradient(#fff6e8, #f3dfc0); color: #8a5a2b; border-radius: 4px;
  font-size: 11px; padding: 3px 8px; cursor: pointer; }
.pet-dex:active { background: #f3dfc0; }
.pet-dex-win { position: absolute; inset: 0; z-index: 5; background: rgba(0,0,0,.55);
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.pet-dex-win:not([hidden]) { display: flex; }
.pet-dex-t { font-size: 15px; font-weight: bold; color: #5a3a1a; }
.pet-dex-list { display: flex; gap: 10px; }
.pet-dex-item { width: 74px; text-align: center; background: #fff; border: 2px solid #ddd;
  border-radius: 8px; padding: 8px 6px; }
.pet-dex-item.on { border-color: #f5b942; }
.pet-dex-ico { width: 40px; height: 40px; margin: 0 auto 4px; border-radius: 6px; }
.pet-dex-item:not(.on) .pet-dex-ico { background: #ccc !important; }
.pet-dex-name { font-size: 12px; color: #333; font-weight: bold; }
.pet-dex-st { font-size: 10px; color: #999; margin-top: 2px; }
.pet-dex-item.on .pet-dex-st { color: #e8590c; }
.pet-dex-close { align-self: center; }

/* ---------------- Winamp 播放器（绿黑皮肤） ---------------- */
.wa {
  height: 100%; display: flex; flex-direction: column;
  background: #0c0f0a; color: #9ee6a0; user-select: none;
  font-family: "Courier New", monospace;
}
.wa-title {
  flex: none; display: flex; align-items: center; gap: 6px;
  padding: 4px 8px; background: #173404; border-bottom: 2px solid #0a140a;
  font-size: 12px;
}
.wa-winamp { color: #7fd0ff; font-weight: bold; letter-spacing: 1px; }
.wa-ver { color: #5dc48a; font-size: 10px; }
.wa-song { flex: 1; text-align: right; font-size: 11px; color: #cfb53b; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.wa-screen {
  flex: none; margin: 8px 8px 0; position: relative;
  border: 2px solid #27500a; background: #0a140a;
}
.wa-screen canvas { display: block; width: 100%; height: 44px; }
/* 歌词面板：滚动显示当前行（绿色高亮） */
.wa-lyrics {
  flex: none; height: 76px; overflow: hidden; position: relative;
  margin: 6px 8px 0; padding: 6px 10px;
  background: #0a140a; border: 1px solid #27500a; border-radius: 3px;
}
.wa-ly-line {
  font-size: 12px; color: #5a7f5a; line-height: 1.9;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color .2s;
}
.wa-ly-line.act { color: #cfb53b; font-weight: bold; }
.wa-time { flex: none; display: flex; align-items: center; gap: 8px; padding: 6px 12px 0; font-size: 11px; }
.wa-progress { flex: 1; height: 6px; background: #173404; border: 1px solid #27500a; border-radius: 3px; overflow: hidden; }
.wa-progress i { display: block; height: 100%; width: 0; background: #9ee6a0; }
.wa-btns { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 10px; }
.wa-btn {
  font-size: 16px; min-width: 40px; padding: 5px 8px; cursor: pointer;
  background: linear-gradient(#27500a, #173404); color: #9ee6a0;
  border: 1px solid #3fae4a; border-radius: 4px;
}
.wa-btn:active { background: linear-gradient(#173404, #27500a); }
.wa-play { background: linear-gradient(#3fae4a, #27500a); }
.wa-vol { flex: 1; display: flex; align-items: center; gap: 6px; }
.wa-vol-ico { color: #9ee6a0; }
.wa-vol input[type="range"] { flex: 1; accent-color: #40c057; height: 20px; }
.wa-eq {
  flex: 1; display: flex; align-items: flex-end; gap: 3px;
  padding: 6px 12px 8px; border-top: 1px solid #173404;
}
.wa-eq span { font-size: 10px; color: #5dc48a; margin-right: 4px; }
.wa-eq i {
  flex: 1; height: 2px; background: #27500a; border-radius: 1px;
}
.wa-eq i:nth-child(2n) { height: 5px; background: #173404; }
.wa-eq-f { margin-left: 4px; }
.wa-err {
  margin: 6px 8px; padding: 6px 8px; font-size: 11px; line-height: 1.4;
  color: #ffb4b4; background: #3a0d0d; border: 1px solid #7a1f1f; border-radius: 3px;
}

/* ---------------- 藏宝阁 · 3D迷宫屏保 ---------------- */
.maze-wrap {
  position: relative; height: 100%; background: #000;
  overflow: hidden; user-select: none;
}
.maze-wrap canvas {
  width: 100%; height: 100%; display: block;
  image-rendering: pixelated; image-rendering: crisp-edges;
}
.maze-hud {
  position: absolute; top: 6px; left: 8px;
  color: #fff; font: bold 12px/1.4 "Courier New", monospace;
  text-shadow: 1px 1px 0 #000; pointer-events: none; letter-spacing: 1px;
}
.maze-gl {
  position: absolute; top: 6px; right: 10px;
  color: #7fd0ff; font: italic bold 15px "Times New Roman", serif;
  text-shadow: 0 0 8px #2f7fd0; pointer-events: none;
}
.maze-flash {
  position: absolute; inset: 0; background: #fff;
  opacity: 0; pointer-events: none; transition: opacity 1s ease;
}
.maze-wrap.won .maze-flash { opacity: .95; transition: none; }
.maze-ctrl {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0));
  background: linear-gradient(transparent, rgba(0, 0, 0, .65));
}
.maze-btn {
  font: bold 13px/1 "Courier New", monospace;
  color: #fff; background: rgba(0, 0, 0, .45);
  border: 1px solid rgba(255, 255, 255, .4); border-radius: 4px;
  padding: 8px 12px; cursor: pointer; min-width: 40px;
  text-shadow: 1px 1px 0 #000;
}
.maze-btn:active { background: rgba(255, 255, 255, .25); }
.maze-spacer { flex: 1; }

/* ---------------- 俄罗斯方块（原版 mipa iframe 嵌入） ---------------- */
.tetris-frame { width: 100%; height: 100%; overflow: hidden; background: #009688; }
.tetris-frame iframe { width: 100%; height: 100%; border: none; }