/* ============================================================
   海底遗迹水族馆（ru- 前缀独立模块）——遗迹风展示馆
   仅服务 #aqua2 弹层；不碰旧水族馆任何样式
   ============================================================ */

/* ---------- 弹层整体：深海遗迹背景 + 光柱 + 气泡 ---------- */
#aqua2 { position:fixed; inset:0; z-index:900; display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(40,120,140,.35), transparent 60%),
    radial-gradient(900px 500px at 80% 110%, rgba(20,80,110,.30), transparent 60%),
    linear-gradient(180deg, #04141d 0%, #06202b 45%, #031018 100%);
  flex-direction:column; gap:12px; overflow:hidden; }
#aqua2.hidden { display:none !important; }

/* 光柱（遗迹上方的神光） */
#aqua2 .ru-rays { position:absolute; inset:-20%; pointer-events:none; opacity:.5;
  background:repeating-conic-gradient(from 200deg at 50% -30%,
    rgba(120,220,230,.10) 0deg 6deg, transparent 6deg 22deg);
  animation:ru-ray-sway 14s ease-in-out infinite alternate; filter:blur(2px); }
@keyframes ru-ray-sway { from { transform:rotate(-4deg); } to { transform:rotate(5deg); } }

/* 上升气泡 */
#aqua2 .ru-bub { position:absolute; bottom:-40px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle at 35% 30%, rgba(200,255,255,.5), rgba(140,220,240,.12) 60%, transparent 70%);
  border:1px solid rgba(170,240,255,.25);
  animation:ru-rise linear infinite; }
@keyframes ru-rise {
  0%   { transform:translateY(0) translateX(0); opacity:0; }
  10%  { opacity:.8; }
  90%  { opacity:.5; }
  100% { transform:translateY(-110vh) translateX(30px); opacity:0; } }

/* ---------- 石板主面板 ---------- */
#aqua2 .ru-panel { position:relative; width:min(94vw, 860px); max-height:88vh; display:flex; flex-direction:column;
  border-radius:18px; padding:16px 18px 14px;
  background:linear-gradient(180deg, #16262e 0%, #0d1a21 55%, #0a141a 100%);
  border:2px solid #2e5a52;
  box-shadow:0 0 0 1px rgba(212,175,110,.35) inset, 0 0 26px rgba(20,120,130,.35),
             0 0 60px rgba(0,0,0,.6), 0 0 0 4px rgba(10,20,24,.9);
  overflow:hidden auto; overscroll-behavior:contain; }

/* 石板顶部雕花饰线 */
#aqua2 .ru-panel::before { content:''; display:block; position:absolute; top:6px; left:24px; right:24px; height:3px;
  background:linear-gradient(90deg, transparent, #d4af6e 18%, #8fe8dd 50%, #d4af6e 82%, transparent);
  border-radius:2px; opacity:.55; pointer-events:none; }

/* ---------- 头部 ---------- */
#aqua2 .ru-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center;
  padding-bottom:10px; border-bottom:1px solid rgba(143,232,221,.18); margin-bottom:12px; position:sticky; top:0;
  background:linear-gradient(180deg, #101f27 85%, rgba(16,31,39,0)); z-index:5; padding-top:4px; }
#aqua2 .ru-title { font-size:18px; font-weight:bold; letter-spacing:1px;
  color:#e9d9ae; text-shadow:0 0 12px rgba(212,175,110,.5), 0 2px 4px rgba(0,0,0,.7); }
#aqua2 .ru-lv { display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:bold;
  color:#04141d; background:linear-gradient(180deg,#9ff0e2,#4fc3b0);
  border:1px solid #7fe7ff; border-radius:999px; padding:3px 10px;
  box-shadow:0 0 10px rgba(127,231,255,.45); }
#aqua2 .ru-cap { font-size:13px; color:#8fc7c0; }
#aqua2 .ru-hbtn { min-height:0; }
#aqua2 .ru-btn-gold { background:linear-gradient(180deg,#f7df9a,#d9ab52) !important; color:#3a2a10 !important;
  border-color:#a5854a !important; font-weight:bold; text-shadow:none !important;
  box-shadow:0 0 12px rgba(247,223,154,.45), inset 0 -2px 4px rgba(120,80,20,.35); }
#aqua2 .ru-btn-gold:active { transform:scale(.95); }
#aqua2 .ru-btn-cyan { background:linear-gradient(180deg,#0e3a40,#0a2830) !important; color:#9ff0e2 !important;
  border-color:#3a9a92 !important; box-shadow:0 0 8px rgba(127,231,255,.25); }
/* 深色遗迹钮（关闭） */
#aqua2 .ru-btn-dark { background:linear-gradient(180deg,#14262c,#0b171d) !important; color:#8fc7c0 !important;
  border-color:#245049 !important; box-shadow:none; }
/* 信息卡行动按钮：纵向排列、等宽、遗迹双色 */
#aqua2 .ru-act { display:block; width:100%; min-height:30px; margin-top:8px; border-radius:9px;
  font-weight:bold; font-size:13px; cursor:pointer; letter-spacing:1px; transition:transform .1s, box-shadow .15s; }
#aqua2 .ru-act:active { transform:scale(.96); }
#aqua2 .ru-act-gold { background:linear-gradient(180deg,#f7df9a,#d9ab52); color:#3a2a10;
  border:1.5px solid #a5854a; box-shadow:0 0 10px rgba(247,223,154,.35), inset 0 -2px 4px rgba(120,80,20,.35); }
#aqua2 .ru-act-cyan { background:linear-gradient(180deg,#0e3a40,#0a2830); color:#9ff0e2;
  border:1.5px solid #3a9a92; box-shadow:0 0 8px rgba(127,231,255,.22); }

/* ---------- 圣龛位子网格 ---------- */
#aqua2 .ru-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; padding:4px 2px 8px; }
@media (min-width:560px) { #aqua2 .ru-grid { grid-template-columns:repeat(4, 1fr); } }
@media (min-width:760px) { #aqua2 .ru-grid { grid-template-columns:repeat(5, 1fr); } }

#aqua2 .ru-slot { position:relative; aspect-ratio:1/1; border-radius:14px; cursor:pointer;
  background:radial-gradient(circle at 50% 38%, #123238 0%, #0a1c22 62%, #071219 100%);
  border:2px solid #1f4a46; box-shadow:inset 0 0 18px rgba(0,0,0,.65), 0 0 8px rgba(60,160,160,.15);
  display:flex; align-items:flex-end; justify-content:center; overflow:hidden;
  transition:border-color .2s, box-shadow .2s, transform .12s; }
#aqua2 .ru-slot:hover { border-color:#5fd9c8; box-shadow:inset 0 0 18px rgba(0,0,0,.65), 0 0 16px rgba(95,217,200,.45); }
#aqua2 .ru-slot:active { transform:scale(.96); }

/* 空位：中央悬浮符文 */
#aqua2 .ru-slot .ru-rune { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:26px; color:#3f7a74; text-shadow:0 0 10px rgba(95,217,200,.35);
  animation:ru-rune-pulse 2.8s ease-in-out infinite; }
@keyframes ru-rune-pulse { 0%,100% { opacity:.45; } 50% { opacity:.95; } }

/* 入住的鱼：上下轻浮 + 名牌 */
#aqua2 .ru-slot img { position:absolute; left:50%; top:44%; width:72%; transform:translate(-50%,-50%);
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.6)); animation:ru-bob 3.4s ease-in-out infinite alternate; }
@keyframes ru-bob { from { margin-top:-4px; } to { margin-top:5px; } }
#aqua2 .ru-slot .ru-name { position:relative; z-index:2; width:100%; text-align:center; font-size:11px;
  color:#cdeee8; background:linear-gradient(180deg, transparent, rgba(4,16,20,.88) 40%);
  padding:14px 2px 4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#aqua2 .ru-slot .ru-tag { position:absolute; top:5px; left:5px; z-index:2; font-size:10px; padding:1px 6px;
  border-radius:999px; background:rgba(8,26,30,.85); border:1px solid #2e6a62; color:#9ff0e2; }
#aqua2 .ru-slot .ru-glow { position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 22px rgba(95,217,200,.16); border-radius:12px; }

/* ---------- 未开启：钥匙卡开馆视图 ---------- */
#aqua2 .ru-lockview { display:flex; flex-direction:column; align-items:center; gap:14px; padding:18px 6px 22px; text-align:center; }
#aqua2 .ru-keycard { width:150px; max-width:72vw; filter:drop-shadow(0 0 22px rgba(95,217,200,.55));
  animation:ru-key-float 3.2s ease-in-out infinite alternate; }
@keyframes ru-key-float { from { transform:translateY(-6px) rotate(-3deg); } to { transform:translateY(6px) rotate(3deg); } }
#aqua2 .ru-locktitle { font-size:17px; font-weight:bold; color:#e9d9ae; text-shadow:0 0 10px rgba(212,175,110,.45); }
#aqua2 .ru-lockdesc { font-size:12.5px; line-height:1.9; color:#8fc7c0; max-width:440px; }
#aqua2 .ru-lockdesc b { color:#9ff0e2; }

/* ---------- 遗迹水池（鱼自由游动的 canvas） ---------- */
#aqua2 .ru-tankwrap { position:relative; }
#aqua2 #a2-tank { display:block; width:100%; height:auto; border-radius:14px; cursor:default;
  border:2px solid #1f4a46; box-shadow:inset 0 0 30px rgba(0,0,0,.6), 0 0 12px rgba(60,160,160,.2);
  background:#082430; }

/* 鱼信息卡（点击鱼弹出，遗迹风石板） */
#aqua2 #a2-fpop { position:absolute; left:50%; top:12px; transform:translateX(-50%); z-index:6;
  background:rgba(6,22,27,.94); border:2px solid #3a9a92; border-radius:12px; padding:10px 16px;
  min-width:250px; text-align:center; backdrop-filter:blur(4px);
  box-shadow:0 0 18px rgba(95,217,200,.35), 0 4px 14px rgba(0,0,0,.6); }
#aqua2 #a2-fpop.hidden { display:none; }

/* ---------- 底部提示 ---------- */
#aqua2 .ru-foot { font-size:11.5px; color:#5e8a84; text-align:center; padding-top:8px;
  border-top:1px solid rgba(143,232,221,.12); }

/* ---------- 入住选鱼弹层（ru- 体系内） ---------- */
#aqua2-pick { position:fixed; inset:0; z-index:920; display:flex; align-items:center; justify-content:center;
  background:rgba(2,10,14,.85); }
#aqua2-pick.hidden { display:none !important; }
#aqua2-pick .ru-pk { width:min(94%, 680px); max-height:84vh; display:flex; flex-direction:column;
  border-radius:16px; padding:14px 16px;
  background:linear-gradient(180deg, #14262d, #0b171d);
  border:2px solid #2e5a52; box-shadow:0 0 30px rgba(0,0,0,.7), 0 0 0 1px rgba(212,175,110,.3) inset; }
#aqua2-pick .ru-pk h3 { margin:0 0 4px; color:#e9d9ae; font-size:16px; }
#aqua2-pick .ru-pk .ru-pk-sub { font-size:12px; color:#8fc7c0; margin-bottom:10px; }
#aqua2-pick .ru-pk-list { overflow-y:auto; flex:1; display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:10px; padding:2px; }
#aqua2-pick .ru-pk-item { border-radius:12px; padding:8px 6px; text-align:center; cursor:pointer;
  background:radial-gradient(circle at 50% 30%, #123238, #0a1c22);
  border:2px solid #1f4a46; transition:border-color .15s, transform .12s; }
#aqua2-pick .ru-pk-item:hover { border-color:#5fd9c8; }
#aqua2-pick .ru-pk-item:active { transform:scale(.95); }
#aqua2-pick .ru-pk-item img { width:56px; height:56px; object-fit:contain;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.6)); }
#aqua2-pick .ru-pk-item .ru-pk-name { font-size:12px; color:#cdeee8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#aqua2-pick .ru-pk-item .ru-pk-n { font-size:11px; color:#7fa8a2; }

/* 旧馆头部入口按钮（遗迹徽记风格） */
#aqua2-entry { background:linear-gradient(180deg,#123037,#0a1d24) !important; color:#9ff0e2 !important;
  border-color:#2e8bb5 !important; box-shadow:0 0 10px rgba(95,217,200,.3); font-weight:bold; }
#aqua2-entry:active { transform:scale(.95); }

/* ---------- 移动端横屏展示 ----------
   按钮：仅手机竖屏时显示（PC / 已横屏设备永不显示） */
#aqua2 .ru-btn-land { display:none !important; }
@media (max-width:820px) and (orientation:portrait) {
  #aqua2 .ru-btn-land { display:inline-block !important; }
}
/* 横屏模式：面板旋转 90° 铺满竖屏手机（布局宽=屏高、布局高=屏宽，转过来正好满屏） */
#aqua2.a2-land .ru-panel { position:fixed; left:50%; top:50%; width:100vh; height:100vw; max-height:none;
  margin:0; transform:translate(-50%,-50%) rotate(90deg);
  display:flex; flex-direction:column; overflow:hidden; }
#aqua2.a2-land #a2-body { flex:1; min-height:0; display:flex; flex-direction:column; }
#aqua2.a2-land .ru-tankwrap { flex:1; min-height:0; display:flex; align-items:center; justify-content:center; }
/* canvas 的精确 CSS 尺寸由 a2LandFit() 按容器等比计算（960:420 不变形），此处只做兜底 */
#aqua2.a2-land #a2-tank { flex:none; max-width:100%; max-height:100%; }
/* 横屏下头部一行排开、底部提示压缩，给水池腾空间 */
#aqua2.a2-land .ru-head { flex-wrap:nowrap; justify-content:flex-start; padding-bottom:6px; margin-bottom:8px; }
#aqua2.a2-land .ru-foot { padding-top:5px; font-size:10.5px; }