/* 烟波渡「器物牌」（水墨版）：水乡里所有可操作的物件共用的一块牌子，风格和行囊 / 节气历同一套：
   旧宣纸底 + 墨线毛笔边框 + 猫田楷标题 + 朱砂印；按钮是墨色毛笔条，选中是浓墨，要紧的是朱砂；不用绿 / 蓝 / 圆角。
   不是对话框：贴在屏幕左侧，不挡住世界，世界不暂停；走远 / 按「扑」/ 点 × 收起。 */
#lcard { display: none; position: fixed; --w: min(520px, calc(100vw - 292px)); width: var(--w); left: calc(96px + (100vw - 292px - var(--w)) / 2); top: 86px; z-index: 12; max-height: calc(100vh - 96px); max-height: calc(100dvh - 96px); overflow: hidden auto; padding: 8px 10px 6px; color: #1d1f1b; font-family: var(--serif); text-wrap: balance; background: url(../../assets/ui/ink/oldpaper.jpg) center / cover, #e7d5ae; border: 12px solid transparent; border-image: url(../../assets/ui/ink/frame.webp) 30 / 12px / 0 stretch; box-shadow: 0 6px 18px rgba(20, 16, 10, .38); touch-action: pan-y; overscroll-behavior: contain; pointer-events: auto; user-select: none; }
#lcard.on { display: block; }
#lcard.wide { --w: min(540px, calc(100vw - 292px)); }
#lcard::after { content: ""; position: absolute; right: 0; bottom: 0; width: 62%; height: 46%; background: url(../../assets/ui/ink/ink_waterway.webp) no-repeat right bottom / contain; opacity: .22; mix-blend-mode: multiply; pointer-events: none; }
#lcard > * { position: relative; z-index: 1; }
/* 抬头：朱砂印 + 毛笔标题 + 水位小章；底下一道墨线 */
#lcard .lc-head { display: flex; align-items: center; gap: 10px; padding: 0 0 6px; background: url(../../assets/ui/ink/ink_line.webp) left bottom / 100% 5px no-repeat; margin-bottom: 5px; }
#lcard .lc-seal { flex: none; display: grid; place-items: center; width: 36px; height: 36px; font: 22px/1 "猫田楷", var(--serif); color: #f6e9d6; background: #a8392b; border-radius: 2px; transform: rotate(-5deg); box-shadow: inset 0 0 0 2px rgba(246, 233, 214, .35); }
#lcard .lc-title { flex: 1; min-width: 0; line-height: 1.1; }
#lcard .lc-title b { display: block; font: 400 22px/1.1 "猫田楷", var(--serif); letter-spacing: 5px; color: #1d1f1b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#lcard .lc-title span { font-size: 12px; letter-spacing: 2px; color: #86795f; }
#lcard .lc-x { flex: none; width: 30px; height: 30px; padding: 0; font: 400 26px/1 "猫田楷", var(--serif); color: #1d1f1b; background: transparent; border: 0; }
#lcard .lc-x:active { color: #a8392b; }
#lcard .lc-badges { flex: none; display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
#lcard .lc-body { display: block; }
#lcard.wide .lc-body { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; }
@media (max-width: 800px) { #lcard.wide .lc-body { grid-template-columns: minmax(0, 1fr); } }
#lcard .lc-col { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
/* 小图：一幅淡墨小景，墨线框 */
#lcard canvas.lc-view { display: block; max-width: 100%; border: 1.5px solid #3a3226; border-radius: 1px; background: #eadcb8; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), 2px 2px 0 rgba(58, 50, 38, .25); image-rendering: pixelated; touch-action: none; }
/* 小章（状态）：墨线框；颜色只有墨 / 赭 / 朱砂三种 */
.lc-chip { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px 1px 5px; font-size: 13px; letter-spacing: 1px; color: #1d1f1b; background: rgba(255, 249, 232, .55); border: 1px solid rgba(40, 34, 22, .6); border-left-width: 3px; border-radius: 1px; white-space: normal; max-width: 100%; line-height: 1.25; }
.lc-chip i { display: inline-block; width: 7px; height: 7px; background: #b9ad8a; transform: rotate(45deg); flex: none; }
.lc-chip.ok { border-left-color: #2b2a22; } .lc-chip.ok i { background: #2b2a22; }
.lc-chip.warn { border-left-color: #b07a2a; color: #6e4a12; } .lc-chip.warn i { background: #b07a2a; }
.lc-chip.bad { border-left-color: #a8392b; color: #a8392b; } .lc-chip.bad i { background: #a8392b; }
.lc-chip.water { border-left-color: #3a3226; } .lc-chip svg { flex: none; }
/* 一行状态：左边墨色小标题，右边内容，底下一道淡墨虚线 */
.lc-row { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 2px 2px; border-bottom: 1px dashed rgba(40, 34, 22, .28); font-size: 14px; }
.lc-row > b { flex: none; width: 3.9em; font: 400 15px/1 "猫田楷", var(--serif); letter-spacing: 2px; color: #4a4538; white-space: nowrap; }
.lc-row > .lc-v { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lc-pips { display: inline-flex; gap: 4px; } .lc-pips s { display: block; width: 16px; height: 9px; border: 1.5px solid #3a3226; border-radius: 1px; background: transparent; } .lc-pips s.on { background: #2b2a22; }
.lc-meter { flex: 1; min-width: 60px; height: 8px; border: 1.5px solid #3a3226; border-radius: 1px; background: rgba(255, 249, 232, .4); overflow: hidden; } .lc-meter i { display: block; height: 100%; background: #4a3f2e; }
/* 按钮：墨色毛笔条（和行囊里的按钮同一张笔触图）；要紧的朱砂；选中浓墨 + 朱砂角标；备选只有墨线 */
.lc-btns { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 5px; }
.lc-btn { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 40px; padding: 2px 6px; font: 400 17px/1.1 "猫田楷", var(--serif); letter-spacing: 3px; color: #f5efdc; background: url(../../assets/ui/ink/stroke.webp) center / 100% 100% no-repeat; border: 0; border-radius: 0; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .3)); }
.lc-btn span, .lc-btn small { white-space: nowrap; }
.lc-btn small { font: 12px/1.1 var(--serif); letter-spacing: 1px; opacity: .85; }
.lc-btn:active { transform: translateY(1px); filter: none; }
.lc-btn.warn { background: #a8392b; border: 1.5px solid #3a3226; border-radius: 2px; filter: none; box-shadow: inset 0 0 0 1px rgba(246, 233, 214, .3); }
.lc-btn.alt { color: #1d1f1b; background: rgba(255, 249, 232, .5); border: 1.5px solid #3a3226; border-radius: 2px; filter: none; }
.lc-btn.sel { color: #f5efdc; background: #2b2a22; border: 1.5px solid #1d1f1b; border-radius: 2px; filter: none; }
.lc-btn.sel::after { content: ""; position: absolute; right: 3px; top: 3px; width: 8px; height: 8px; background: #a8392b; border-radius: 1px; }
.lc-btn.off { opacity: .42; }
.lc-btns .lc-btn { letter-spacing: 0; font-size: 15px; padding: 2px 3px; }
.lc-seg { display: flex; border: 1.5px solid #3a3226; border-radius: 2px; overflow: hidden; background: rgba(255, 249, 232, .5); } .lc-seg button { flex: 1; min-height: 32px; padding: 0 4px; font: 400 15px/1 "猫田楷", var(--serif); letter-spacing: 2px; border: 0; border-left: 1.5px solid #3a3226; background: transparent; color: #1d1f1b; } .lc-seg button:first-child { border-left: 0; }
.lc-seg button.sel { background: #2b2a22; color: #f5efdc; }
.lc-tip { font-size: 12px; line-height: 1.4; letter-spacing: 0; color: #4a4538; padding: 0 2px; overflow-wrap: anywhere; }
@media (max-height: 440px) { #lcard { top: 84px; padding: 4px 6px 2px; } #lcard .lc-head { padding-bottom: 4px; margin-bottom: 4px; } #lcard .lc-title b { font-size: 19px; } #lcard .lc-seal { width: 28px; height: 28px; font-size: 17px; } .lc-btn { min-height: 34px; font-size: 14px; } .lc-btn small { font-size: 11px; } .lc-row { min-height: 27px; font-size: 13px; } .lc-row > b { font-size: 14px; } .lc-seg button { min-height: 30px; font-size: 14px; } .lc-tip { font-size: 11px; } }