@charset "utf-8";
/* ==========================================================================
   fish.css —— 摸鱼小游戏专属样式（独立页面，不依赖 theme.css / style.css）
   --------------------------------------------------------------------------
   画布规格（竖版，为将来 APK / 微信小程序预留）：
     · 宽高比 9 : 19.5（全面屏手机比例），基准宽 430px、基准高 932px
     · 高 = min(100dvh, 932px)，宽由比例反算；桌面居中显示成一块"手机屏"
     · 窄屏 / 触屏（<=560px 或 coarse 指针）→ 铺满整屏，并吃 iOS 安全区
   纵向分区（自上而下）：
     顶栏   ≈15%  游戏名 + 摸鱼币 + 体力条        （flex: 0 0 auto）
     摸鱼区 ≈18%  两个摸鱼按钮 + 消息            （flex: 0 0 auto）
     鱼缸区 ≈67%  我的鱼缸网格，唯一可滚动区域    （flex: 1 1 auto）
   约定：所有类名以「摸鱼 / 鱼卡 / 卡牌」等中文名开头，作用域挂在 .摸鱼应用 下，
        不与站点其它样式串味；将来把 fish.css + index.php 整包搬走即可独立运行。
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body.摸鱼体{
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
                 "Helvetica Neue", Arial, sans-serif;

    /* ===== 设计变量（改这一处即可换肤） ===== */
    --主色:      #12a5b8;   /* 水青：体力摸鱼 */
    --主色深:    #0c8496;
    --付费色:    #ef8b2c;   /* 暖橙：付费摸鱼 */
    --底:        #f1f9fc;   /* 画布底色 */
    --面:        #ffffff;
    --字:        #0f3038;
    --字浅:      #5f818c;
    --线:        #d5e8ee;

    /* 卡片配色由 JS 按品级内联覆盖（--鱼色 外框/色块、--鱼字 对比文字色） */
    --鱼色: #dfe6e9;
    --鱼字: #333333;

    color: var(--字);
    /* 桌面：深水色外景，衬托中间竖版画布 */
    background: radial-gradient(120% 90% at 50% 0%, #16323d 0%, #0b1b22 60%, #060f13 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    -webkit-text-size-adjust: 100%;
}

/* ============================ 竖版画布 ============================ */
.摸鱼应用{
    position: relative;
    height: min(100vh, 932px);       /* 回退：不支持 dvh 的内核 */
    height: min(100dvh, 932px);      /* 高 = min(视口高, 基准高)，宽由比例反算 */
    aspect-ratio: 9 / 19.5;          /* 竖版比例 9 : 19.5 */
    max-width: 100vw;
    background: var(--底);
    border-radius: 26px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 30px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08);
}

/* 窄屏 / 触屏：铺满整屏（手机上就是原生 App 手感） */
@media (max-width: 560px), (pointer: coarse){
    .摸鱼应用{
        height: 100vh;               /* 回退 */
        height: 100dvh;
        width: 100vw;
        max-width: none;
        aspect-ratio: auto;
        border-radius: 0;
        box-shadow: none;
    }
}

/* ============================== 顶栏 ============================== */
.顶栏{
    flex: 0 0 auto;
    padding: calc(12px + env(safe-area-inset-top)) 14px 12px;
    background: linear-gradient(160deg, #16b8cc 0%, #0d8a9b 100%);
    color: #fff;
}
.顶栏行{ display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.游戏名{ font-size: 18px; font-weight: 800; letter-spacing: 2px; }

/* --------- 右上角账号区：未登录=登录\注册；已登录=我的账号 ▾ 下拉 --------- */
.账号区{ position: relative; display: flex; align-items: center; gap: 5px; flex: 0 0 auto; }
.账号区 > a{
    color: rgba(255,255,255,.95); font-size: 12px; text-decoration: none;
    border: 1px solid rgba(255,255,255,.5); padding: 3px 10px; border-radius: 999px;
    white-space: nowrap; line-height: 1.5;
}
.账号区 > a:hover{ background: rgba(255,255,255,.16); }
.账号分隔{ color: rgba(255,255,255,.6); font-size: 12px; }

.账号按钮{
    display: inline-flex; align-items: center; gap: 4px;
    border: 1px solid rgba(255,255,255,.5); border-radius: 999px;
    padding: 3px 10px; background: transparent;
    font-family: inherit; font-size: 12px; color: rgba(255,255,255,.95);
    white-space: nowrap; line-height: 1.5; cursor: pointer;
}
.账号按钮:hover{ background: rgba(255,255,255,.16); }
.账号按钮 .箭头{ font-size: 10px; opacity: .85; }

/* 下拉浮层：白底面板，浮在游戏内容之上（z-index 高于卡牌遮罩） */
.账号菜单{
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
    min-width: 134px; padding: 6px;
    display: flex; flex-direction: column; gap: 2px;
    background: #fff; border: 1px solid var(--线); border-radius: 12px;
    box-shadow: 0 14px 30px rgba(6,24,30,.3);
}
.账号菜单[hidden]{ display: none; }
/* 菜单项：链接与按钮外观保持一致（「兑换码」是按钮，点击开弹窗） */
.账号菜单 a, .账号菜单 button{
    display: block; width: 100%;
    color: var(--字); font-size: 13px; text-decoration: none;
    padding: 9px 12px; border-radius: 8px; white-space: nowrap; text-align: left;
    border: 0; background: transparent; font-family: inherit; cursor: pointer;
}
.账号菜单 a:hover, .账号菜单 button:hover{ background: #eef8fa; }
.账号菜单 a.危险{ color: #b3261e; }
.账号菜单 a.危险:hover{ background: #fdeaea; }

.状态行{ display: flex; gap: 8px; margin-top: 10px; }
.状态块{
    flex: 1 1 0; min-width: 0;
    background: rgba(255,255,255,.16);
    border-radius: 10px; padding: 6px 10px;
    display: flex; align-items: baseline; justify-content: space-between; gap: 6px;
}
.状态块 .标签{ font-size: 11px; opacity: .9; }
.状态块 b{ font-size: 16px; font-variant-numeric: tabular-nums; }

.体力条{
    height: 6px; margin-top: 8px; border-radius: 999px;
    background: rgba(255,255,255,.25); overflow: hidden;
}
.体力填充{
    height: 100%; width: 0; border-radius: 999px;
    background: linear-gradient(90deg, #9ff3d0, #33d17a);
    transition: width .3s;
}
.顶栏提示{
    font-size: 11px; line-height: 1.45; margin-top: 6px;
    color: rgba(255,255,255,.92); min-height: 0; word-break: break-all;
}
.顶栏提示 a{ color: #fff; text-decoration: underline; }

/* ============================= 摸鱼区 ============================= */
.摸鱼区{
    flex: 0 0 auto;
    padding: 12px 14px 10px;
    display: flex; flex-direction: column; gap: 8px;
}
.摸鱼按钮{
    width: 100%; border: 0; border-radius: 14px;
    padding: 15px 12px;
    font-family: inherit; font-size: 16px; font-weight: 700; color: #fff;
    background: linear-gradient(160deg, #14b3c7, #0b8291);
    box-shadow: 0 6px 14px rgba(11,130,145,.26);
    cursor: pointer;
    transition: transform .1s, box-shadow .1s, filter .1s;
}
.摸鱼按钮:hover:not(:disabled){ filter: brightness(1.06); }
.摸鱼按钮:active:not(:disabled){ transform: translateY(1px); box-shadow: 0 3px 8px rgba(11,130,145,.24); }
.摸鱼按钮.付费{
    background: linear-gradient(160deg, #f5a241, #e07c1c);
    box-shadow: 0 6px 14px rgba(224,124,28,.26);
}
.摸鱼按钮:disabled{
    background: #c3d3d8; box-shadow: none; color: #fff;
    cursor: not-allowed; opacity: .95;
}
.消息{
    font-size: 12px; line-height: 1.5; border-radius: 10px;
    padding: 8px 10px; background: #e6f7ee; color: #12734a;
}
.消息.错{ background: #fdeaea; color: #b3261e; }

/* ============================= 鱼缸区 ============================= */
.鱼缸区{
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column;
    padding: 0 14px calc(12px + env(safe-area-inset-bottom));
}
.区标题{
    flex: 0 0 auto;
    display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
    font-size: 13px; font-weight: 700; color: #0d6d7e;
    padding: 9px 0 8px; border-top: 1px solid var(--线);
}
.区标题 .计数{ font-size: 12px; font-weight: 400; color: var(--字浅); }

/* 鱼缸边框图（九宫格切图）由摸鱼后台上传，index.php 会把它注入到 #展廊列表 上：
   border-image-slice:20% / border-image-width:16px / repeat:round
   → 四角原样不拉伸、四边平铺，任何屏幕尺寸都不变形。没配图时这里就是普通无边框列表。 */
.鱼卡列表{
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 10px; align-content: start; padding: 2px 2px 6px;
    scrollbar-width: thin;
}
.鱼卡列表 .空提示{
    grid-column: 1 / -1; text-align: center;
    font-size: 13px; color: var(--字浅); padding: 24px 10px; line-height: 1.7;
}

/* 鱼卡：外框颜色 = 品级色（--鱼色 由内联 style 给出） */
.鱼卡{
    border: 3px solid var(--鱼色);
    background: var(--面);
    border-radius: 12px;
    padding: 0;                 /* 左右不留白：卡内信息块贴到两边 */
    overflow: hidden;
    display: flex; flex-direction: column; align-items: center;
    box-shadow: 0 2px 8px rgba(12,80,95,.12);
}
.鱼卡.可点{ cursor: pointer; transition: transform .12s, box-shadow .12s; }
.鱼卡.可点:hover{ transform: translateY(-2px); box-shadow: 0 8px 16px rgba(12,80,95,.20); }
/* 鱼图固定 4:3 并等比内缩：不同鱼种图片比例不一致时，卡片仍整齐等高（不留空档） */
.鱼卡图{ width: 100%; aspect-ratio: 4 / 3; object-fit: contain; display: block; background: #fff; }

/* 卡内三行：名称 / 长度 / 价值 —— 满宽色块，底色跟品级、字色取对比色 */
.鱼卡信息{ display: flex; flex-direction: column; gap: 2px; align-self: stretch; }
.鱼卡信息 > div{
    width: 100%; border: 0;                 /* 独立页没有主页那条全局 groove 边框规则 */
    background: var(--鱼色); color: var(--鱼字);
    padding: 3px 6px;
    font-size: 12px; font-weight: 700; line-height: 1.45; text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ============================ 卡牌弹窗 ============================ */
/* 绝对定位在画布内：桌面上弹窗也只在"手机屏"里，不会糊满整个浏览器 */
.卡牌遮罩{
    position: absolute; inset: 0; z-index: 50;
    background: rgba(6,24,30,.62);
    display: flex; align-items: center; justify-content: center;
    padding: 18px; overflow: auto;
}
.卡牌弹窗{
    width: 100%; max-width: 296px;
    background: var(--面); border-radius: 16px; padding: 14px;
    box-shadow: 0 20px 40px rgba(0,0,0,.35);
}
.卡牌标题{
    text-align: center; font-size: 14px; font-weight: 700;
    color: var(--字浅); margin-bottom: 10px;
}
.卡牌标题.强{ color: #0d8a9b; font-size: 16px; }

.卡牌{
    border: 4px solid var(--鱼色); border-radius: 12px;
    overflow: hidden; background: var(--面);
    display: flex; flex-direction: column; align-items: center;
}
.卡牌图{ width: 100%; aspect-ratio: 4 / 3; object-fit: contain; display: block; background: #fff; }
.卡牌信息{ display: flex; flex-direction: column; gap: 2px; align-self: stretch; }
.卡牌信息 > div{
    width: 100%; border: 0;
    background: var(--鱼色); color: var(--鱼字);
    padding: 6px 8px;
    font-size: 15px; font-weight: 700; text-align: center;
}

.卡牌操作{ display: flex; gap: 8px; margin-top: 12px; }
.卡牌操作 button{
    flex: 1 1 0;
    border: 0; border-radius: 12px; padding: 12px;
    font-family: inherit; font-size: 15px; font-weight: 700; color: #fff;
    background: linear-gradient(160deg, #14b3c7, #0b8291);
    cursor: pointer;
}
.卡牌操作 button[data-act="sell"]{ background: linear-gradient(160deg, #f5a241, #e07c1c); }
.卡牌操作 button[data-act="display"]{ background: linear-gradient(160deg, #57c98b, #2f9e63); }
.卡牌操作 button#取消出售{ background: #9bb3ba; }
.确认行{ margin: 12px 0 0; text-align: center; font-size: 14px; color: var(--字浅); }
.卡牌关闭{
    width: 100%; margin-top: 8px;
    border: 0; border-radius: 12px; padding: 11px;
    font-family: inherit; font-size: 14px; color: #fff; background: #9bb3ba;
    cursor: pointer;
}

/* ============================ 兑换码弹窗 ============================ */
.兑换说明{
    margin: 0 0 10px; text-align: center;
    font-size: 12px; line-height: 1.5; color: var(--字浅);
}
.兑换输入{
    width: 100%; border: 1px solid var(--线); border-radius: 10px;
    padding: 11px 12px; background: #f7fcfd;
    font-family: inherit; font-size: 15px; color: var(--字);
}
.兑换输入:focus{ outline: none; border-color: var(--主色); background: #fff; }
.兑换消息{
    margin-top: 8px; border-radius: 10px; padding: 8px 10px;
    font-size: 12px; line-height: 1.5;
    background: #e6f7ee; color: #12734a;
}
.兑换消息.错{ background: #fdeaea; color: #b3261e; }
.兑换提交{
    width: 100%; margin-top: 10px;
    border: 0; border-radius: 12px; padding: 12px;
    font-family: inherit; font-size: 15px; font-weight: 700; color: #fff;
    background: linear-gradient(160deg, #14b3c7, #0b8291);
    cursor: pointer;
}
.兑换提交:hover:not(:disabled){ filter: brightness(1.06); }
.兑换提交:disabled{ background: #c3d3d8; cursor: not-allowed; }