/*
 * oui.css —— 原版样式表的重建。
 *
 * 原版的 css/oui.css 没有任何存档（已用 CDX 复查确认），所以这份是**反推**的：
 *  - class 名与用法来自玩家粘贴的游戏内 DOM（约 25 个 class，见 docs/research/09 §5）；
 *  - 尺寸来自原版 DOM 的 width/cellspacing 等属性；
 *  - 颜色与字号只能从 1:1 截图取样，裁决见 docs/spec/DECISIONS-ui.md。
 *
 * 色值集中在 :root，不要在别处硬编码颜色。
 */

/* 下面的色值与字号全部来自 docs/spec/DECISIONS-ui.md 的裁决。
   那份裁决先按 JPEG 量化表与色度抽样给截图分级，再用「正演模拟」验证估计量无偏，
   并查出 2008-12 那批（#2/#3/#5–#8）在发稿前被媒体做过轻度曲线处理 ——
   所以不要拿那一批的绝对色值去"修正"这里，它们只能作几何/结构证据。 */
:root {
  /* —— 颜色 —— */
  --bg: #ffffff;
  --text: #000000;
  /* 表格网格线：由 table.tablebg 的底色透过 border-spacing 漏出 */
  --line: #cccccc;            /* 13 个独立来源众数 */
  --row-bg: #ffffff;          /* trbg */
  --row-bg-alt: #f7f7f7;      /* trbg2 */
  --row-bg-3: #f0f0f0;        /* trbg3（2010 才出现的斑马纹，基准版不用） */
  --header-from: #ffffff;     /* titlebg 表头渐变顶 */
  --header-to: #dcdcdc;       /* 渐变底 */
  --rule: #000000;            /* 顶栏下的 1px 黑线 */
  --link: #74cc00;            /* skillup 草绿，实测中位 (116,205,0) */
  --link-hover: #00b000;      /* 证据不足（单图单行最差画质），默认值 */
  --gray: #808080;            /* smallgray / middlegray 同色 */
  --striking: #0000cc;        /* middlestriking 深蓝粗体 */
  --blue: #000099;            /* smallblue */
  --warn: #cc0000;            /* 警示红，2008–2010 全程一致 */
  --warn-inline: #ff0000;     /* 仅「角色正在删除中」那一处内联原文 */
  --help-dash: #999999;       /* a.help 下方 1px 虚线 */

  /* —— 字号（宋体点阵，勿开抗锯齿）—— */
  --fs-small: 12px;   --lh-small: 14px;   /* 数字半宽 6px */
  --fs-middle: 13px;  --lh-middle: 15px;  /* 数字半宽 7px */
  --fs-big: 14px;     --lh-big: 16px;     /* .big 与 .title3 同字号 */

  /* —— 尺寸 —— */
  --page-width: 1000px;
  --top-height: 98px;         /* 墨迹 98 + 1px 黑线 + 1px 白 = 总高 100 */
  --row-height: 22px;         /* 主表数据行 = 21 内容 + 1 线 */
  --title-img-w: 150px;       /* 页标题图元素框（墨迹 148×28 居中） */
  --title-img-h: 30px;
}

/* 原版靠 XHTML 1.0 Transitional doctype 进入 almost-standards 模式，
   表格单元格里的图片下方不留基线缝。Vite 不接受那个 doctype，
   所以改用下面这条 CSS 显式达到同样效果 —— 留了基线缝，带图标的行会高出几像素，
   17/19/22px 的行高与截图对齐都会失准。 */
img { vertical-align: bottom; }

body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  /* 原版是 2008 年 Windows 上的中易宋体位图。macOS 没有，退到系统宋体。
     字体实验见 docs/PROGRESS.md 阶段 1 第 2 步。 */
  font-family: SimSun, 'Songti SC', STSong, serif;
  font-size: var(--fs-small);
  /* 这里曾经写过 `-webkit-font-smoothing: none`，想还原当年的点阵观感。去掉了，因为它
     **在想讨好的平台上不起作用，只在别的平台上帮倒忙**：
       - Windows：这个属性 Blink 根本不实现；而且 SimSun 在 12–14px 用的是内嵌点阵字形，
         本来就不抗锯齿 —— 关不关都一样；
       - macOS：没有 SimSun，落到 Songti SC（轮廓字体）。关掉抗锯齿后 12px 的细横画
         会直接断掉，在 2 倍屏上尤其糊。实测同一段字截图 922 字节 vs 开着 4483 字节
         （小 = 只剩纯黑纯白，没有灰阶）。
     要真还原点阵观感，得内嵌一份点阵字库，而不是把轮廓字体的抗锯齿关掉。 */
}

a { text-decoration: none; }
img { border: 0; }

/* —— 整页框架 —— */

#gpage {
  width: var(--page-width);
  position: relative;
  /* 左对齐：原版 DOM 里没有 align=center，截图左侧那 5px 是截图边缘 */
  margin: 0;
}

#top {
  height: var(--top-height);          /* 98px 墨迹 */
  position: relative;
  background: url(../img/top/back2.jpg) no-repeat;
  border-bottom: 1px solid var(--rule);  /* y98 黑线 */
  margin-bottom: 1px;                  /* y99 白，总高 100 */
}

#logo { position: absolute; left: 0; top: 0; }

/* 下面这些坐标是对着原生 1:1 截图 #2（xiuzhen801.jpg）量出来的。
   量法：截图左留白 5px，所以「截图 x − 5 = 页面 x」；顶栏黑线实测在 y=98。 */

/* 右上按钮：原版 2008 版是 6 个（首页/游戏指南/排行榜/个人资料/付费功能/论坛），
   占 x 604–985；我们按 2009 DOM 做 7 个（多一个「关于」），所以右对齐排布。 */
#littlemenu { position: absolute; right: 10px; top: 3px; }
#littlemenu table { border-collapse: collapse; }
#littlemenu td { text-align: center; padding: 0 1px; }

/* 资源条：图标格 16 + 数值格 100，cellPadding=1 → 每组步进 120。起点 x≈305。 */
#resource { position: absolute; left: 305px; top: 26px; }
#resource table { border-collapse: separate; border-spacing: 0; }
#resource td { padding: 1px; }

/* 主标签：60×20，步进 64，起点 x≈307，底边与 y=98 黑线重合。 */
#bigmenu { position: absolute; left: 307px; top: 78px; width: 460px; }
#bigmenu table { border-collapse: collapse; width: auto; }
#bigmenu td { width: 64px; padding: 0; }

#avgres { position: absolute; left: 891px; top: 74px; }

#servertimebox { position: absolute; left: 6px; top: 0; text-align: left; }
#version { position: absolute; left: 10px; top: 84px; }

#gmain { position: relative; }
/* 三栏：起止 20–480 / 509–761 / 768–988，内容表宽 460 / 240 / 220 */
#gleft  { position: absolute; left: 20px;  top: 0; width: 460px; }
#gmid   { position: absolute; left: 509px; top: 0; width: 252px; }
#gright { position: absolute; left: 768px; top: 0; width: 220px; }

/* —— 字号档 —— */

.small  { font-size: var(--fs-small);  line-height: var(--lh-small); }
.middle { font-size: var(--fs-middle); line-height: var(--lh-middle); }
.big    { font-size: var(--fs-big);    line-height: var(--lh-big); }
.smallbold  { font-size: var(--fs-small);  font-weight: bold; }
.middlebold { font-size: var(--fs-middle); font-weight: bold; }
.bigbold    { font-size: var(--fs-big);    font-weight: bold; }
.smallgray  { font-size: var(--fs-small);  color: var(--gray); }
.middlegray { font-size: var(--fs-middle); color: var(--gray); }
.smallblue  { font-size: var(--fs-small);  color: var(--blue); }
.smallred   { font-size: var(--fs-small);  color: var(--warn); }
.middlestriking { font-size: var(--fs-middle); font-weight: bold; color: var(--striking); }
.fontmid { font-size: var(--fs-middle); }

/* —— 表格 —— */
/* 原版靠 table.tablebg 的底色 + cellspacing=1 透出 1px 网格线，不用 border */

.tablebg { background: var(--line); border-collapse: separate; border-spacing: 1px; }
.tablebg td { padding: 3px; background: var(--row-bg); }
.trbg  { background: var(--row-bg); }
.trbg2 { background: var(--row-bg-alt); }
.trbg3 { background: var(--row-bg-3); }
tr.titlebg td, .titlebg {
  background: linear-gradient(var(--header-from), var(--header-to));
  height: var(--row-height);
}
/* 墨迹标题条 458×20，背景是一道横向墨迹笔触 */
.titlebg2 {
  background: url(../img/titlebg2.gif) no-repeat;
  height: 20px;
}

/* —— 链接 —— */

/* 草绿粗体、无下划线，是全站最常见的可点文字 */
a.skillup, .skillup { color: var(--link); font-weight: bold; }
a.skillup:hover { color: var(--link-hover); }

/* 术语链接：黑色粗体 + 1px 灰虚线下划线，点开游戏指南（hlp()） */
a.help, .help {
  color: var(--text);
  font-weight: bold;
  border-bottom: 1px dotted var(--help-dash);
}

/* 但中栏那六个区块标题**不画虚线** —— 它们在 DOM 里同样是 `A.help`（09 §2.6），
   可 2008 的 #2 与 2010 的 #114 两张 1:1 截图里，「战斗事件」「炼器事件」「移动事件」
   底下都是干干净净的，没有下划线。所以虚线只属于正文里的术语链接。 */
#gmid a.help { border-bottom: none; }

/* 事件栏里的链接强制黑字（反直觉但原版如此） */
#gmid a:not(.skillup) { color: var(--text); }

/* —— 浮窗 —— */
/* 六种：L 内容表 460、R 230、B 900、H 帮助无标题条、M 单按钮、M2 确定取消。
   外观只有 R 窗有 1:1 截图（252×452，双线暖灰框 + 回纹角花），其余按同一套推。 */

#lwindow, #rwindow, #bwindow, #hwindow, #mwindow, #mwindow2 {
  position: absolute;
  background: var(--bg);
  border: 1px solid #b5a98f;
  outline: 1px solid #efe8d8;
  z-index: 100;
}

/* 浮窗的落点。
   原版的**像素位置在 oui.css 里，而那份样式表没有任何存档**（09 §2.5 明记），
   但落在哪一栏是能反推的 —— 09 §2.5 由内容表宽推出：
     「L 窗盖在 #gleft 上，R 窗盖在 #gmid(240) 上」，B ≈ 920 ≈ 整个 #gpage 宽。
   以前这几个窗只写了 position:absolute 没给坐标，于是全部堆在静态流位置
   （顶栏正下方最左边），六种窗叠在一起，看着像 bug。
   纵向一律贴着 #gmain 顶边（y=100：墨迹 98 + 1px 黑线 + 1px 白线）。 */
#lwindow { left: 20px;  top: 100px; width: 480px; }  /* 盖 #gleft；L ≈ 480（460 表 + padding） */
#bwindow { left: 20px;  top: 100px; width: 920px; }  /* 900 表，横跨整个 #gpage */
#hwindow { left: 20px;  top: 100px; }                /* 宽度在下面的 #hwindow 规则里（494） */

/* R 窗是唯一有 1:1 实测的浮窗：**外框 252×452**，正好盖住中栏
   （`04 §核心页` 第 7 条与 §438：#3 实测 x=260–511 / y=1–452，内容表 230px）。
   高度是固定的 —— #91 内容很少也照样留白到 447。
   这里用 min-height 而不是 height：实测高度照做，但我们重建的内容长度未必与当年一致，
   写死会把内容裁掉。 */
#rwindow {
  left: 509px;
  top: 100px;
  width: 252px;
  min-height: 452px;
}

/* 确认框没有位置证据，横向居中是最稳妥的默认。 */
#mwindow, #mwindow2 {
  left: 50%;
  top: 160px;
  transform: translateX(-50%);
}
#lwindow { z-index: 100; }
#rwindow { z-index: 100; }
#bwindow { z-index: 110; }
#hwindow { z-index: 120; }
#mwindow, #mwindow2 { z-index: 130; }
#loading { z-index: 140; position: absolute; }

.dlgclosebtn { position: absolute; right: 4px; top: 4px; }

/* 浮窗标题条。
   壳子里它排在内容**之后**（原版 DOM 就是这个顺序，逐字照抄），所以必须靠定位
   把它提到顶部 —— 否则内容越高它掉得越低，最后吊在窗口外面。
   落点照 `04 §8.2` 实测：#3 里标题 at (270,11)，窗框 x=260 / y=1 ⇒ 距窗内左上角各 ~10px，
   与关闭钮同一行（关闭钮 bbox=487,11 距右内缘 8px）。
   空标题的窗不挂 `hastitle`，也就不占那一行 —— 免得 playerinfo 这类没标题的窗
   平白多出 26px 空白。 */
#lwindowtitle, #rwindowtitle, #bwindowtitle, #mwindowtitle, #mwindow2title {
  position: absolute;
  left: 10px;
  top: 8px;
  /* 给关闭钮让出右边，标题过长时截断而不是顶到 × 上 */
  right: 26px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* 有标题才给内容让出顶部那一行（14px 粗体 + 上下留白 ≈ 26px）。 */
.hastitle > div > [id$=windowcontent] { padding-top: 26px; }
.title3 { font-size: var(--fs-big); line-height: var(--lh-big); font-weight: bold; }

.mwindowok, .mwindow2ok, .mwindow2cancel { display: inline-block; margin: 6px; }

/* —— 地图 —— */
/* 视口 448×245，地块图 64×120（菱形占底部 64×35），行距 17.5px。
   自成层叠上下文，避免格子的高 z-index 盖住浮窗。 */
/* 地图可视区：448×245（06 §69 由 mapData 的 113 格反推，与墨框内沿实测吻合）。
   自成层叠上下文，避免格子的高 z-index 盖住浮窗。 */
#mapdiv {
  position: relative;
  width: 448px;
  height: 245px;
  overflow: hidden;
  isolation: isolate;
  z-index: 1;
}

/* —— 倒计时 —— */
.countdown { }

/* —— 人物页 —— */
/* 左栏是「人体图 + 绝对定位的节点」与「右侧信息表」并排。
   #2 实测：人体图区 x=25–260，信息表 x=270–489（宽 220）。 */
.playerbody { position: relative; width: 460px; min-height: 440px; }
/* 人体图区 x=0–240（原图 25–260），信息表 x=250–469（原图 270–489，宽 220） */
.figure { position: absolute; left: 0; top: 0; width: 250px; height: 430px; }
/* 剪影裁自 #153（裁切框 25,50），其头节点在图内 (85,28)；HEAD_ORIGIN 是 (125,78)，
   故整体偏移 (40,50)，这样程序叠加的 12 个节点正好落回剪影上原本的位置。 */
.figure .body { position: absolute; left: 40px; top: 50px; }
.playerinfo { position: absolute; left: 250px; top: 0; width: 220px; }

/* 经脉节点：白色圆盘 19px，内含手写斜体数字；外圈 44px 径向发光。
   两位数时圆盘不变大（见 #35 的 15/16/17）。 */
.mnode {
  position: absolute;
  width: 19px; height: 19px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid;
  color: #000;
  font: italic 12px 'Comic Sans MS', 'Chalkboard SE', cursive;
  line-height: 19px;
  text-align: center;
  z-index: 3;
  overflow: hidden;
}
.mglow { position: absolute; z-index: 1; pointer-events: none; }
.mline { position: absolute; height: 1px; transform-origin: 0 50%; opacity: .75; z-index: 2; }

/* 本体视图：占满左栏 460px、不显示信息表（04 §5.1）。底图 460×410 是整张原版裁片
   （线稿 + 引线 + 篆书 + 灰光晕），相对 .playerbody 下移 21px 后，8 个烧在图里的 21px 白盘
   正好被同尺寸的 CSS 圆盘（.mnode 19px + 1px 边框）原位盖住；光晕用图里的，不叠 .mglow。 */
.figure.bodyfigure { width: 460px; height: 431px; }
.bodyfigure .body { left: 0; top: 21px; }
.bodynode { border-color: #9a9a9a; }

/* 右下角门派水印（通天=梅、蜀山=竹、昆仑=荷） */
.schoolmark { position: absolute; right: -10px; bottom: 0; opacity: .55; z-index: 0; }

/* 金丹：丹田处发光 */
.goldencore {
  position: absolute; left: 118px; top: 200px; width: 26px; height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffe680 0%, #d4a017 60%, #d4a01700 100%);
  z-index: 3;
}

/* —— 法术页（skill.jsp）—— */
/* 整棵树是一张 460×425 的背景图（箭头与 Lv.N 标注都画在图上，见 04 §7.1）；
   图标是叠在上面的绝对定位元素，3 列 × 4 行、每格 64×64（04 §7.2 截图实测）。 */
.skilltree {
  position: relative;
  width: 460px; height: 425px;
  background-repeat: no-repeat;
}
.skillcell { position: absolute; display: block; width: 64px; height: 64px; }
/* 计数 `(0/20)`：12px 宋体黑字，贴在图标右下角外侧 */
.skillcount {
  position: absolute;
  font-size: var(--fs-small); line-height: var(--lh-small);
  white-space: nowrap;
}

/* —— 法宝页（item.jsp）—— */
/* 墨迹条右端的折叠钮 `[-]`：粉灰底小方块 + 一道红褐横线（截图 #155 / #68），
   链接指向 item.jsp?hide=1&tab=N */
.hidebtn {
  display: inline-block;
  width: 11px; height: 11px; line-height: 9px;
  text-align: center;
  background: var(--row-bg-alt);
  border: 1px solid var(--line);
  color: var(--warn);
  font-weight: bold;
}
/* 「准备炼制:」后面的输入框，截图里约 4 个数字宽 */
.craftnum { width: 34px; font-size: var(--fs-small); }

/* —— 物品详情 R 窗（itemmid.jsp）—— */
/* R 窗内容区宽 230（09 §5 的宽度档）；窗内各表自身写的是 width="100%" */
.itemmid { width: 230px; }
.pilluse { padding: 3px; }

/* —— 地图页 —— */
/* 地图区：448×245 可视窗，外面一圈留给 8 个滚屏箭头（约 480×280）。
   .mapdiv 自成层叠上下文，避免地块高达 565 的 z-index 盖住浮窗。 */
/* 地图外层：要容下环绕视口的 8 个方向箭头（map.ts 的 ARROWS，left 0..463、top 154..414），
   所以比 448 的视口宽。墨框背景本身实测 ≈458×253（06 §107），箭头在框外。
   右缘 20+480=500，中栏从 509 起 —— 不相撞。
   **别再把 #mapbg 并进上面那条 #mapdiv 规则**：以前两处都声明，宽高互相覆盖，很难查。 */
#mapbg { position: relative; width: 480px; height: 460px; overflow: hidden; }
#mapbg .maparrow { position: absolute; z-index: 2; }
/* 墨框裁自 #106，视口外扩 8px 的一圈（464×261），内区透明；摆在 mapdiv (16,170) 的外侧 */
#mapbg .mapframe { position: absolute; left: 8px; top: 162px; pointer-events: none; }
.mapdiv {
  position: absolute; left: 16px; top: 170px;
  width: 448px; height: 245px;
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
}
.mapdiv .tile { position: absolute; width: 64px; height: 120px; }
.mapdiv .tilemark { position: absolute; }
/* 120px 高的地块透明区与人物只负责绘制，选格命中底部 64×35 的菱形。 */
.mapdiv img { pointer-events: none; }
.mapdiv .mapcell {
  position: absolute; width: 64px; height: 35px;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.mapdiv .mapcell:focus-visible { background: rgb(100 140 40 / 30%); }
#smallinfo { display: inline-block; vertical-align: top; }
#sceneimg { display: inline-block; vertical-align: top; }
#mapmenu { position: absolute; z-index: 50; }
#mapbar { width: 460px; }

/* —— 交易 / 排行榜 / 付费 / 五行互化 / 产业 —— */

/* 原版 oui.css 里裸 <a> 是草绿色：证据有两条 ——
   (1) 购买真气页 #123/#7 上「提供/需求」表头、「购买」、分页四链接都是绿的，
       而它们在 DOM 里要么没 class，要么是 middlebold（黑粗体）；
   (2) 正因为默认是绿的，事件栏才需要 `#gmid a:not(.skillup)` 那条强制黑字的覆盖。
   这里不动全局 a 规则（会波及已做完的页面），只把表格里这几类操作链接补成草绿。 */
.tablebg a.middlebold,
.tablebg a.smallbold,
.tablebg tr.titlebg a { color: var(--link); }
.tablebg a.middlebold:hover,
.tablebg a.smallbold:hover,
.tablebg tr.titlebg a:hover { color: var(--link-hover); }

/* 付费页分节之间的 6px 空行（#9 实测：五行吸收组与法宝组之间空 6px）。
   .tablebg td 默认 padding:3px，会把 6px 撑成 12px，所以这一行单独清零。 */
tr.paygap td { padding: 0; height: 6px; background: var(--row-bg); }

/* 交易页的筛选条与出售表单：原生 select/button，只把字号压到正文档，
   不动外观 —— 截图里的控件长相随截图者的系统主题变化（#123 Vista、#93 XP Luna），
   本来就没有统一外观可抄。 */
.tablebg select, .tablebg input,
form select, form input { font-family: inherit; font-size: var(--fs-small); vertical-align: middle; }

/* —— 门派 / 消息 / 任务 / 资料 —— */
/* 这几页几乎全靠 HTML 属性（width/colSpan/cellPadding）定版，只补 oui.css 里还缺的 class。 */

/* span.b：原版唯一的「纯加粗」class（删号剩余天数、玉匣奖励物品名），不带字号 */
.b { font-weight: bold; }

/* 收件箱是全站唯一用 cellPadding=2 的数据表（原版 DOM 如此），
   要盖掉 .tablebg td 的 3px，否则 230px 的 R 窗会被撑出横向滚动条。 */
#msgform .tablebg td { padding: 2px; }

/* 写消息的正文框：上面那条只覆盖了 input/select，textarea 也得钉回小号宋体，
   否则 macOS 会换成 13px 等宽字体，460px 的 L 窗对不上。 */
textarea { font-family: inherit; font-size: var(--fs-small); }

/* 成员分页条的「第[__]/N页」输入框（原版 id=allypage、size=3） */
#allypage { text-align: center; }

/* 读信正文区：外壳给了 height=200，正文再高就顺着表格长，不滚动（原版如此）。 */
#msgcontent { width: 100%; }

/* —— 表格行高 —— */
/* 原版数据行 pitch 实测 27px（9-交易.jpg 的横线间距）：内容 26 + 1px 网格线。
   cellpadding=3 上下各 3，所以内容区 20px。不约束的话，16px 图标 + 行高会把行撑到 37px。 */
table.tablebg td { line-height: 20px; }
table.tablebg td img { vertical-align: middle; }
/* 表头行略高一点（原版 17px + 渐变） */
table.tablebg tr.titlebg td { line-height: 17px; }

/* —— 游戏指南（H 窗）—— */
/* 尺寸 ≈494×430 [截图 #111/#112，1:1]（05 §12.1）；内容超高时原版出现**原生滚动条**，
   #111 右侧竖向 + 底部横向都有，所以这里用 auto 而不是裁掉。 */
#hwindow { width: 494px; }
#hwindowcontent { padding: 6px 8px; }
/* 正文框：1px #CCC 边框、白底、12px 黑字（05 §12.1 第 4 层） */
.helpbody {
  border: 1px solid #ccc;
  background: #fff;
  padding: 6px;
  max-height: 300px;
  overflow: auto;
}