/* 视觉语言（文档 3.7）：深海占卜主题。
   把散落在各处的硬编码色值收敛成一组变量，全站语义色不超过 4 种。 */

/* ---- [hidden] 必须真的隐藏 ----

   HTML 的 hidden 属性靠 UA 样式表的 `display: none` 生效，而**任何一条作者
   写的 display 都会盖掉它**。于是每次给某个元素加 `display: flex/grid`
   布局，它身上的 hidden 就悄悄失效了——元素照常显示，JS 那边 `el.hidden`
   还是 true，查起来极其别扭。

   这个坑在这个项目里已经踩了四次（.fish-card / .death-frame /
   .modal-backdrop 各自打了一个补丁，最近一次是占卜屏的开场区和选鱼区
   同时显示）。与其继续一个一个补，不如在这里一次性封死。

   !important 在这里是**正确**的用法：hidden 表达的是"这个元素现在不存在"，
   它就该压过一切布局声明。 */
[hidden] {
  display: none !important;
}

:root {
  /* 底色：近黑的深蓝绿。之前是偏蓝的 #0b1220，偏"科技面板"；
     往绿里挪一点才像水体。 */
  --abyss: #071019;   /* 页面底 */
  --deep: #0a1420;    /* 卡片/画布底 */
  --surface: #0e1c2a; /* 抬起来的一层（输入框、行） */
  --panel: #0d1b28;   /* 面板 */
  --line: #1d3346;    /* 描边 */
  --line-bright: #2a4a63;

  /* 主发光色只有一种：生物荧光青。用在"活着的、正在发生的"东西上——
     进度珠、体型条、当前行为、水晶球高光。 */
  --glow: #7ee8e0;

  /* 语义色四种，不再增加：
     正面绿 / 负面红 / 玩家粉 / 他人金（幽灵鱼、套装、今日水域） */
  --good: #7fe0a3;
  --bad: #f0a0a0;
  --accent: #cc4fb0;
  --accent-bright: #ff8ad4;
  --other: #E8B84B;

  /* 文字三级 */
  --ink: #dbe4f0;
  --ink-dim: #8fa2bd;
  /* 第三级文字。从 #55708a 提到 #6a86a0——**原值在深底上只有 3.9:1**，
     低于 WCAG AA 对小字要求的 4.5。这一档专门用在"次要到几乎不用读"的
     地方（分隔符、名次数字、时间戳），但"次要"不等于"看不清"：
     真正不需要读的东西应该删掉，留下的就该读得清。
     提这一档同时修好了面包屑分隔符、排行榜名次、注册按钮三处。 */
  --ink-faint: #6a86a0;

  /* ---- 尺度 ----
     加这几组是因为审计出来的问题很具体：全站有 **11 种不同的圆角取值**
     （2/3/4/5/6/7/8/9/10/12/999），而且都是随手写的。尺度不统一的界面
     不会"错"，但会一直有一种说不出的毛糙感——因为眼睛能看出没有规律。

     四档就够。选的时候按"这个东西离手多近"：越是被直接操作的越圆。 */
  --r-xs: 4px;    /* 标签、色块、小徽记 */
  --r-sm: 6px;    /* 输入框、按钮、列表行 */
  --r-md: 8px;    /* 卡片、面板 */
  --r-lg: 12px;   /* 浮层、舞台 */
  --r-pill: 999px;

  /* 间距走 4 的倍数。同理：随手写的 5px/7px/9px 混在一起，
     行与行之间的呼吸就没有节奏。 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;

  /* 抬升。这个游戏的界面是"压在水面上的一层层玻璃"，所以阴影要深而散，
     不要那种硬边的材质阴影。 */
  --lift-1: 0 2px 8px rgba(0, 0, 0, 0.28);
  --lift-2: 0 8px 24px rgba(0, 0, 0, 0.42);
  --lift-3: 0 18px 50px rgba(0, 0, 0, 0.6);

  /* 动效。**统一时长和缓动**比动效本身更重要——参差不齐的过渡会让界面
     显得没人管过。ease-out 系是"东西落到位"的感觉，适合 UI；
     水生的东西用 --ease-swim（进出都慢），像有阻力。 */
  --t-fast: 120ms;
  --t-base: 200ms;
  --t-slow: 380ms;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-swim: cubic-bezier(0.45, 0.05, 0.35, 1);

  /* 字号。正文 12.5 是这个界面的基准——信息密度高，再大就装不下，
     再小就开始费眼。 */
  --fs-xs: 10.5px;
  --fs-sm: 11.5px;
  --fs-base: 12.5px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;

  /* ---- 三维的固定色 ----
     觅食绿 / 恐惧蓝 / 捕猎红。这三个色现在出现在**四个地方**（占卜屏预览、
     鱼类详情卡、投放浮层、结算数据），所以它们必须是令牌而不是各写一遍——
     改一次配色要改四处的话，迟早有一处漏掉，然后同一个"恐惧"在两屏是
     两个颜色。
     选色的依据是含义：觅食是生长（绿）、恐惧是冷（蓝）、捕猎是热（红）。 */
  --stat-forage: #7fd4a0;
  --stat-fear: #9ec4d8;
  --stat-hunt: #e0796f;

  /* ---- 每个系统一个色相 ----
     枢纽上六张卡长得一模一样时，玩家只能靠读字找路。给每个系统一个固定
     色相之后，颜色本身就成了路标——而且这个身份要**一路带进那一屏**
     （面包屑、标题、强调色都用它），玩家才会把"紫色"和"血统"绑在一起。

     选色的依据是那件事的情绪：占卜是玩家自己的粉，天梯是竞争的金，
     鱼缸是自家的绿，串门是别人的青，血统是血脉的紫，鱼谱是档案的蓝。 */
  --sys-divination: #cc4fb0;
  --sys-codex: #5b8ede;
  --sys-ladder: #E8B84B;
  --sys-tank: #4a9e7a;
  --sys-rooms: #45b8c4;
  --sys-reports: #a06fd0;

  /* 占卜师台词和判词用一款有笔触感的中文字体。
     刻意只用系统自带的楷体族——加载体积为零，而网络字体动辄几 MB。
     文档说"仅此两处，控制加载体积"，那就干脆一个字节都不加载。 */
  --font-mystic: "Kaiti SC", "STKaiti", KaiTi, "楷体", "Songti SC", serif;
}

body {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(126, 232, 224, 0.05), transparent 55%),
    radial-gradient(ellipse at 80% 100%, rgba(204, 79, 176, 0.05), transparent 55%),
    var(--abyss);
  color: var(--ink);
}

/* 占卜师的话和判词——全站只有这两处用笔触字体 */
.chat-bubble.diviner,
.report-verdict {
  font-family: var(--font-mystic);
  letter-spacing: 0.3px;
}

.chat-bubble.diviner {
  font-style: normal; /* 楷体不需要再斜，斜了反而糊 */
}

/* 把旧的硬编码色收敛到变量上（保留原值语义，只是统一来源） */
.card,
.llm-panel {
  background: var(--panel);
  border-color: var(--line);
}

#world-canvas,
.chat-log,
.orb-frame {
  background: var(--deep);
}

.chat-input-row input,
.code-input-row input,
.auth-fields input,
.tank-field input,
.tank-field select,
#scene-select,
#camera-select {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
}

.hint { color: var(--ink-dim); }