/* ============================================================
   珊瑚龙宫（cg- 前缀独立模块）——珠光宝气华丽龙宫展示馆
   仅服务 #aqua3 弹层；不碰旧水族馆/遗迹馆任何样式
   色系：粉珊瑚 × 玫瑰金 × 珍珠白 × 深紫底
   ============================================================ */

/* ---------- 弹层整体：龙宫幻海背景 + 珠光光柱 + 气泡 ---------- */
#aqua3 { position:fixed; inset:0; z-index:900; display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(255,120,190,.30), transparent 60%),
    radial-gradient(900px 500px at 82% 110%, rgba(255,190,120,.22), transparent 60%),
    linear-gradient(180deg, #2c0f36 0%, #3a1244 45%, #1a0722 100%);
  flex-direction:column; gap:12px; overflow:hidden; }
#aqua3.hidden { display:none !important; }

/* 珠光光柱 */
#aqua3 .cg-rays { position:absolute; inset:-20%; pointer-events:none; opacity:.55;
  background:repeating-conic-gradient(from 200deg at 50% -30%,
    rgba(255,170,220,.12) 0deg 6deg, transparent 6deg 22deg);
  animation:cg-ray-sway 14s ease-in-out infinite alternate; filter:blur(2px); }
@keyframes cg-ray-sway { from { transform:rotate(-4deg); } to { transform:rotate(5deg); } }

/* 上升气泡（珠光描边） */
#aqua3 .cg-bub { position:absolute; bottom:-40px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle at 35% 30%, rgba(255,225,245,.55), rgba(255,170,220,.14) 60%, transparent 70%);
  border:1px solid rgba(255,205,235,.3);
  animation:cg-rise linear infinite; }
@keyframes cg-rise {
  0%   { transform:translateY(0) translateX(0); opacity:0; }
  10%  { opacity:.85; }
  90%  { opacity:.5; }
  100% { transform:translateY(-110vh) translateX(30px); opacity:0; } }

/* ---------- 珍珠母贝主面板 ---------- */
#aqua3 .cg-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(160deg, #43204b 0%, #331540 40%, #55265c 62%, #2c1034 100%);
  border:2px solid #d98cb8;
  box-shadow:0 0 0 1px rgba(255,214,150,.5) inset, 0 0 26px rgba(255,130,200,.4),
             0 0 60px rgba(0,0,0,.6), 0 0 0 4px rgba(26,7,34,.9);
  overflow:hidden auto; overscroll-behavior:contain; }

/* 顶部鎏金珠链饰线 */
#aqua3 .cg-panel::before { content:''; display:block; position:absolute; top:6px; left:24px; right:24px; height:3px;
  background:linear-gradient(90deg, transparent, #ffd98c 18%, #ffb3d9 50%, #ffd98c 82%, transparent);
  border-radius:2px; opacity:.7; pointer-events:none; }

/* ---------- 头部 ---------- */
#aqua3 .cg-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center;
  padding-bottom:10px; border-bottom:1px solid rgba(255,179,217,.25); margin-bottom:12px; position:sticky; top:0;
  background:linear-gradient(180deg, #3d1747 85%, rgba(61,23,71,0)); z-index:5; padding-top:4px; }
#aqua3 .cg-title { font-size:18px; font-weight:bold; letter-spacing:1px;
  color:#ffe3f1; text-shadow:0 0 12px rgba(255,170,220,.65), 0 2px 4px rgba(0,0,0,.7); }
#aqua3 .cg-lv { display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:bold;
  color:#43103f; background:linear-gradient(180deg,#ffd9ec,#ff9ed2);
  border:1px solid #ffc9e5; border-radius:999px; padding:3px 10px;
  box-shadow:0 0 10px rgba(255,158,210,.55); }
#aqua3 .cg-cap { font-size:13px; color:#e8b8d6; }
#aqua3 .cg-hbtn { min-height:0; }
/* 珍珠粉钮（放鱼入住 / 开启） */
#aqua3 .cg-btn-pink { background:linear-gradient(180deg,#ffd7ec,#f79ac9) !important; color:#5a1038 !important;
  border-color:#d97aa8 !important; font-weight:bold; text-shadow:none !important;
  box-shadow:0 0 12px rgba(255,190,225,.5), inset 0 -2px 4px rgba(160,60,110,.35); }
#aqua3 .cg-btn-pink:active { transform:scale(.95); }
/* 鎏金钮（升级） */
#aqua3 .cg-btn-gold { background:linear-gradient(180deg,#ffe9a8,#f2b64e) !important; color:#4a2c08 !important;
  border-color:#c69440 !important; font-weight:bold; text-shadow:none !important;
  box-shadow:0 0 12px rgba(255,226,150,.5), inset 0 -2px 4px rgba(150,95,20,.35); }
#aqua3 .cg-btn-gold:active { transform:scale(.95); }
/* 深紫玉钮（关闭/横屏） */
#aqua3 .cg-btn-dark { background:linear-gradient(180deg,#3a1a44,#220e2a) !important; color:#eec3de !important;
  border-color:#7a3f6d !important; box-shadow:none; }
/* 信息卡行动按钮：纵向排列、等宽、龙宫双色 */
#aqua3 .cg-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; }
#aqua3 .cg-act:active { transform:scale(.96); }
#aqua3 .cg-act-gold { background:linear-gradient(180deg,#ffe9a8,#f2b64e); color:#4a2c08;
  border:1.5px solid #c69440; box-shadow:0 0 10px rgba(255,226,150,.4), inset 0 -2px 4px rgba(150,95,20,.35); }
#aqua3 .cg-act-pink { background:linear-gradient(180deg,#ffd7ec,#f79ac9); color:#5a1038;
  border:1.5px solid #d97aa8; box-shadow:0 0 10px rgba(255,190,225,.35); }

/* ---------- 珊瑚座位网格 ---------- */
#aqua3 .cg-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; padding:4px 2px 8px; }
@media (min-width:560px) { #aqua3 .cg-grid { grid-template-columns:repeat(4, 1fr); } }
@media (min-width:760px) { #aqua3 .cg-grid { grid-template-columns:repeat(5, 1fr); } }

#aqua3 .cg-slot { position:relative; aspect-ratio:1/1; border-radius:14px; cursor:pointer;
  background:radial-gradient(circle at 50% 38%, #4b1f52 0%, #33133a 62%, #200828 100%);
  border:2px solid #8a4a78; box-shadow:inset 0 0 18px rgba(0,0,0,.6), 0 0 8px rgba(255,140,205,.2);
  display:flex; align-items:flex-end; justify-content:center; overflow:hidden;
  transition:border-color .2s, box-shadow .2s, transform .12s; }
#aqua3 .cg-slot:hover { border-color:#ffb0da; box-shadow:inset 0 0 18px rgba(0,0,0,.6), 0 0 16px rgba(255,176,218,.5); }
#aqua3 .cg-slot:active { transform:scale(.96); }

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

/* 入住的鱼：上下轻浮 + 名牌 */
#aqua3 .cg-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:cg-bob 3.4s ease-in-out infinite alternate; }
@keyframes cg-bob { from { margin-top:-4px; } to { margin-top:5px; } }
#aqua3 .cg-slot .cg-name { position:relative; z-index:2; width:100%; text-align:center; font-size:11px;
  color:#ffe0f0; background:linear-gradient(180deg, transparent, rgba(28,7,34,.88) 40%);
  padding:14px 2px 4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#aqua3 .cg-slot .cg-tag { position:absolute; top:5px; left:5px; z-index:2; font-size:10px; padding:1px 6px;
  border-radius:999px; background:rgba(40,12,46,.85); border:1px solid #9a5583; color:#ffd3ea; }
#aqua3 .cg-slot .cg-glow { position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 22px rgba(255,176,218,.18); border-radius:12px; }

/* ---------- 未开启：钥匙卡开馆视图 ---------- */
#aqua3 .cg-lockview { display:flex; flex-direction:column; align-items:center; gap:14px; padding:18px 6px 22px; text-align:center; }
#aqua3 .cg-keycard { width:150px; max-width:72vw; filter:drop-shadow(0 0 22px rgba(255,150,215,.6));
  animation:cg-key-float 3.2s ease-in-out infinite alternate; }
@keyframes cg-key-float { from { transform:translateY(-6px) rotate(-3deg); } to { transform:translateY(6px) rotate(3deg); } }
#aqua3 .cg-locktitle { font-size:17px; font-weight:bold; color:#ffe3f1; text-shadow:0 0 10px rgba(255,170,220,.55); }
#aqua3 .cg-lockdesc { font-size:12.5px; line-height:1.9; color:#e8b8d6; max-width:440px; }
#aqua3 .cg-lockdesc b { color:#ffd3ea; }

/* ---------- 龙宫水池（鱼自由游动的 canvas） ---------- */
#aqua3 .cg-tankwrap { position:relative; }
#aqua3 #a3-tank { display:block; width:100%; height:auto; border-radius:14px; cursor:default;
  border:2px solid #b3679a; box-shadow:inset 0 0 30px rgba(0,0,0,.55), 0 0 14px rgba(255,140,205,.3);
  background:#33143c; }

/* 鱼信息卡（点击鱼弹出，珍珠贝石板） */
#aqua3 #a3-fpop { position:absolute; left:50%; top:12px; transform:translateX(-50%); z-index:6;
  background:rgba(43,14,50,.94); border:2px solid #d97aa8; border-radius:12px; padding:10px 16px;
  min-width:250px; text-align:center; backdrop-filter:blur(4px);
  box-shadow:0 0 18px rgba(255,150,215,.4), 0 4px 14px rgba(0,0,0,.6); }
#aqua3 #a3-fpop.hidden { display:none; }

/* ---------- 底部提示 ---------- */
#aqua3 .cg-foot { font-size:11.5px; color:#b985a8; text-align:center; padding-top:8px;
  border-top:1px solid rgba(255,179,217,.16); }

/* ---------- 入住选鱼弹层（cg- 体系内） ---------- */
#aqua3-pick { position:fixed; inset:0; z-index:920; display:flex; align-items:center; justify-content:center;
  background:rgba(18,4,22,.85); }
#aqua3-pick.hidden { display:none !important; }
#aqua3-pick .cg-pk { width:min(94%, 680px); max-height:84vh; display:flex; flex-direction:column;
  border-radius:16px; padding:14px 16px;
  background:linear-gradient(160deg, #43204b, #2c1034);
  border:2px solid #d98cb8; box-shadow:0 0 30px rgba(0,0,0,.7), 0 0 0 1px rgba(255,214,150,.35) inset; }
#aqua3-pick .cg-pk h3 { margin:0 0 4px; color:#ffe3f1; font-size:16px; }
#aqua3-pick .cg-pk .cg-pk-sub { font-size:12px; color:#e8b8d6; margin-bottom:10px; }
#aqua3-pick .cg-pk-list { overflow-y:auto; flex:1; display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:10px; padding:2px; }
#aqua3-pick .cg-pk-item { border-radius:12px; padding:8px 6px; text-align:center; cursor:pointer;
  background:radial-gradient(circle at 50% 30%, #4b1f52, #2c0c33);
  border:2px solid #8a4a78; transition:border-color .15s, transform .12s; }
#aqua3-pick .cg-pk-item:hover { border-color:#ffb0da; }
#aqua3-pick .cg-pk-item:active { transform:scale(.95); }
#aqua3-pick .cg-pk-item img { width:56px; height:56px; object-fit:contain;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.6)); }
#aqua3-pick .cg-pk-item .cg-pk-name { font-size:12px; color:#ffe0f0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#aqua3-pick .cg-pk-item .cg-pk-n { font-size:11px; color:#c48fb0; }

/* 旧馆头部入口按钮（龙宫徽记风格） */
#aqua3-entry { background:linear-gradient(180deg,#4a1548,#2c0c33) !important; color:#ffd3ea !important;
  border-color:#d36bb0 !important; box-shadow:0 0 10px rgba(255,150,215,.35); font-weight:bold; }
#aqua3-entry:active { transform:scale(.95); }

/* ---------- 移动端横屏展示 ----------
   按钮：仅手机竖屏时显示（PC / 已横屏设备永不显示） */
#aqua3 .cg-btn-land { display:none !important; }
@media (max-width:820px) and (orientation:portrait) {
  #aqua3 .cg-btn-land { display:inline-block !important; }
}
/* 横屏模式：面板旋转 90° 铺满竖屏手机 */
#aqua3.a3-land .cg-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; }
#aqua3.a3-land #a3-body { flex:1; min-height:0; display:flex; flex-direction:column; }
#aqua3.a3-land .cg-tankwrap { flex:1; min-height:0; display:flex; align-items:center; justify-content:center; }
/* canvas 的精确 CSS 尺寸由 a3LandFit() 按容器等比计算，此处只做兜底 */
#aqua3.a3-land #a3-tank { flex:none; max-width:100%; max-height:100%; }
/* 横屏下头部一行排开、底部提示压缩，给水池腾空间 */
#aqua3.a3-land .cg-head { flex-wrap:nowrap; justify-content:flex-start; padding-bottom:6px; margin-bottom:8px; }
#aqua3.a3-land .cg-foot { padding-top:5px; font-size:10.5px; }