/* ==========================================================================
   tub.css（homepage-v4 · 2026-10-19 晚 · MVP 合并）—— 衣服的家 / 月光变身湾 = TROFAST 盆（spike 11 round 5 定稿 + spike 14 第二轮的两只盆修复）
   来源：spikes/11-trofast-tile/css/spike11.css（去掉 .tf-stage / .tf-ghost / .tf-bar / 版本开关）+ spikes/14-grid-balance/css/r6-grid.css §8 / §9。
   盒子本身由 js/tub.js 按真尺寸建模、投影成 .tf-svg，每个面按法线 + 同一盏灯上色；这里只管：卡片外壳关掉、层级、字的颜色、贴纸、泡泡。
   颜色：盒子的颜色在 js/tub.js 的 MATS（白天 / 夜里两套），主题一变就整只重画（不是 css 能插值的 svg 渐变，所以用重画）。
   ========================================================================== */

/* ---------- 卡片自己的矩形外观全部关掉：外形只由投影出来的盒子决定 ---------- */
.m-plastic { --tf-ink: 30 36 48;
  --ink-rgb: var(--tf-ink); --ink: rgb(var(--tf-ink)); --ink-2: rgb(var(--tf-ink) / .80); --ink-3: rgb(var(--tf-ink) / var(--ink-3-a));   /* [v3 · R30] ink-3 统一 --ink-3-a（.72）：在半透明盒身（约 #D6D4D0）上 ≥ 4.5 */
  --hair: rgb(var(--tf-ink) / .08); --hair-2: rgb(var(--tf-ink) / .22); --edge-c: transparent; color: var(--ink); }
:root[data-theme="night"] .m-plastic { --tf-ink: var(--night-ink-rgb); color: var(--ink); }   /* 夜里的盒子是暗的（MATS.night），字换浅墨：表面和字成对 */
.m-plastic .face { background: none !important; box-shadow: none !important; border-radius: 0; }
.m-plastic .face::before { display: none; }
.m-plastic .sh, .m-plastic .edge { display: none; }
/* 盆不进 3D（spike 14 15:45 闪烁 / 消失的第二个根）：两只盆并排、拉出时 svg 每帧重画并画出卡外，Chrome 合成时会把另一只整块丢掉一帧。盆不翻面，拍平 */
.narrative-grid > .m-plastic > .flip { transform-style: flat !important; transform: none !important; }
.narrative-grid > .m-plastic .face { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; transform: none !important; overflow: visible; }

/* ---------- 层级：svg 盒子（0）→ 字和贴纸（1）→ 泡泡（3） ---------- */
.tf-svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; z-index: 0; pointer-events: none; }   /* 盒子的影子画在 svg 里（js），不用 css drop-shadow */
.m-plastic .face-body { position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 100%; transform-origin: 0 0; }   /* 字平排在盆的正面上；内距见下一条 */
/* [v3 · R12 / R12b] 物件卡内距：盆壁本身就是一道边框 —— 上下 = 盆壁 + --tub-inset-y（16），左右 = 盆壁 + --tub-inset-x（24，视觉上接近其他卡的 24）。
   盆壁 = 正面四条边到卡边的距离，由 js/tub.js 写 --tf-ft / fr / fb / fl */
.narrative-grid > .m-plastic .face-body { padding: calc(var(--tf-ft, 90px) + var(--tub-inset-y)) calc(var(--tf-fr, 6px) + var(--tub-inset-x)) calc(var(--tf-fb, 8px) + var(--tub-inset-y)) calc(var(--tf-fl, 6px) + var(--tub-inset-x)); }
.m-plastic .narrative-title { color: var(--ink); }

.m-plastic .card-actions { margin-top: auto; padding-top: 12px; }
/* 整只盒子 = 一个链接（「读完整故事」那个 <a>）：它的 ::after 铺满整张卡，点哪儿都去故事页；贴纸在它上面。字在 ::after 下面（不能选字，这张卡本来就是一个入口） */
.m-plastic .story-sticker.btn { pointer-events: auto; position: static; width: auto; min-height: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 0;
  color: var(--ink-2); text-decoration: none; }
.m-plastic .story-sticker::after { content: ""; position: absolute; inset: 0; z-index: 0; cursor: pointer; border-radius: 6px; }
.m-plastic .story-sticker:focus-visible, .m-plastic .story-sticker:focus-visible::after { outline: none; box-shadow: none; }   /* 焦点框由 js 沿盒子外轮廓描（.tf-focus） */
/* 「读完整故事 ↗」在盆上是普通文字链接（spike 14 / 15 的样子），不是标签贴纸：story-sticker.css 把 .ss-txt 藏了，这里放回来 */
.m-plastic .ss-txt { position: static; width: auto; height: auto; margin: 0; clip: auto; overflow: visible; white-space: nowrap;
  font-size: var(--t-s); line-height: 1.5; color: var(--ink-2); text-decoration: underline; text-decoration-color: rgb(var(--ink-rgb) / .45); text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color .2s, text-decoration-color .2s; }
.m-plastic.tf-open .ss-txt, .m-plastic .story-sticker:focus-visible .ss-txt { color: var(--ink); text-decoration-color: currentColor; }
.m-plastic .ss-stickers { position: relative; z-index: 1; display: block; flex: none; width: 252px; height: 118px; margin: -6px -4px -4px 0; --hx: 56px; }
#bay .ss-stickers { width: 200px; height: 112px; --hx: 0px; }
.m-plastic .stk-body > .stk-art { filter: drop-shadow(0 .4px .3px rgb(74 60 44 / .34)) drop-shadow(0 1px 1.2px rgb(74 60 44 / .12)); }
:root[data-theme="night"] .m-plastic .stk-body > .stk-art { filter: drop-shadow(0 .6px .5px rgb(0 0 0 / .55)) drop-shadow(0 1.6px 2px rgb(0 0 0 / .32)); }
/* 减少动态：不滑，整张 svg 淡一下 */
@keyframes tf-fade { from { opacity: .35; } to { opacity: 1; } }
.tf-svg.tf-fade { animation: tf-fade .22s ease-out; }
@media (max-width: 699.98px) { .m-plastic .ss-stickers { width: 220px; height: 104px; } }

/* ---------- 月光变身湾自己的 hover（spike 14 15:48）：拉出时盆口冒 5 颗小泡泡，往上飘约 78px 散掉，冒两轮就停 ---------- */
.bay-fx { position: absolute; left: 0; right: 0; top: 0; height: 0; z-index: 3; pointer-events: none; }
.bay-fx .bb { position: absolute; top: 34px; width: var(--d); height: var(--d); border-radius: 50%; opacity: 0;
  background: radial-gradient(circle at 34% 30%, rgb(255 255 255 / 1) 0 16%, rgb(226 242 252 / .55) 38%, rgb(160 206 238 / .30) 70%, rgb(110 170 220 / .60) 100%);
  box-shadow: 0 0 0 .75px rgb(86 140 190 / .55), 0 1px 2px rgb(60 100 140 / .12); }
.bay-fx .b1 { --d: 12px; left: 36%; --dx: -8px; --dur: 2.4s; --dl: .05s; }
.bay-fx .b2 { --d: 8px;  left: 45%; --dx: 5px;  --dur: 2.0s; --dl: .3s; }
.bay-fx .b3 { --d: 16px; left: 55%; --dx: -4px; --dur: 2.8s; --dl: .15s; }
.bay-fx .b4 { --d: 7px;  left: 64%; --dx: 7px;  --dur: 1.9s; --dl: .5s; }
.bay-fx .b5 { --d: 10px; left: 50%; --dx: -9px; --dur: 2.5s; --dl: .7s; }
@keyframes bay-rise {
  0%   { opacity: 0; transform: translate(0, 6px) scale(.5); }
  15%  { opacity: .95; }
  70%  { opacity: .8; }
  100% { opacity: 0; transform: translate(var(--dx), -78px) scale(1.05); }
}
#bay.tf-open .bay-fx .bb { animation: bay-rise var(--dur) cubic-bezier(.3, .6, .4, 1) var(--dl) 2 both; }
@media (prefers-reduced-motion: reduce) { #bay.tf-open .bay-fx .bb { animation: none; opacity: .8; transform: translateY(-30px); transition: opacity .3s; } }