/* 🌤 小世界:光柱 / 雨 / 掉落物 / 背包。
   整套语言跟花生一致:像素描边(box-shadow 阶梯角)、色阶分层代替柔焦渐变、steps() 动画。
   唯一的"大胆处"是光柱:随本地时间从左移到右的一道斜光,边缘用棋盘格像素抖动,里面飘着几粒像素尘。
   颜色只吃花生卡片已调好对比度的 --pet-* 变量 + 下面三个世界变量。 */
:root {
  --sun-warm: 255, 231, 163;          /* 默认皮肤:暖奶油光 */
  --rain-ink: 120, 160, 196;
  --wd-top: calc(env(safe-area-inset-top, 0px) + 74px);   /* 掉落起点:顶栏下沿 */
}
/* 动森是绿色波点地面:金色光在绿上会发浑,改用淡金白 + 整体减弱,像透过树叶的光斑 */
html[data-theme="island"] { --sun-warm: 255, 246, 214; --rain-ink: 70, 120, 160; }
html[data-theme="island"] .world-sky.is-beam .world-beam { opacity: .85; }

/* 天空层在消息之下;消息列表和输入栏叠在它上面 */
.chat-layout > .chat-messages { position: relative; z-index: 1; }
.chat-layout > .chat-input-area { position: relative; z-index: 2; }
.world-sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

/* ---------- 光柱 ---------- */
.world-beam {
  --sun-x: 50%; --sun-tilt: 0deg; --sun-warmth: .6;
  position: absolute; top: -30%; bottom: -30%; left: var(--sun-x); width: 26vw; margin-left: -13vw;
  transform: rotate(var(--sun-tilt)); transform-origin: 50% 50%;
  opacity: 0; transition: opacity 1.2s steps(6, jump-none), left 2s steps(12, jump-none);
  /* 色阶分层:外 → 内三档硬边,像素画的"光" */
  background:
    linear-gradient(to right,
      transparent 0 6%,
      rgba(var(--sun-warm), calc(.10 * var(--sun-warmth) + .04)) 6% 22%,
      rgba(var(--sun-warm), calc(.18 * var(--sun-warmth) + .06)) 22% 40%,
      rgba(var(--sun-warm), calc(.26 * var(--sun-warmth) + .08)) 40% 60%,
      rgba(var(--sun-warm), calc(.18 * var(--sun-warmth) + .06)) 60% 78%,
      rgba(var(--sun-warm), calc(.10 * var(--sun-warmth) + .04)) 78% 94%,
      transparent 94% 100%);
}
/* 外缘棋盘格抖动:两侧各一窄条 4px 棋盘 */
.world-beam::before, .world-beam::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 6%;
  background-image: repeating-conic-gradient(rgba(var(--sun-warm), calc(.14 * var(--sun-warmth) + .05)) 0 25%, transparent 0 50%);
  background-size: 8px 8px;
}
.world-beam::before { left: 0; }
.world-beam::after { right: 0; }
.world-sky.is-beam .world-beam { opacity: 1; }
.wb-core { display: none; }
/* 像素尘:几粒方块在光里慢慢往上飘 */
.wb-mote {
  position: absolute; width: 3px; height: 3px; background: rgba(var(--sun-warm), .95);
  box-shadow: 0 0 0 1px rgba(var(--sun-warm), .35);
  left: 30%; top: 70%; opacity: 0;
  animation: wb-mote 9s steps(18, jump-none) infinite;
}
.wb-mote:nth-of-type(2) { left: 58%; top: 55%; animation-delay: 2.2s; }
.wb-mote:nth-of-type(3) { left: 42%; top: 82%; animation-delay: 4.6s; animation-duration: 11s; }
.wb-mote:nth-of-type(4) { left: 66%; top: 74%; animation-delay: 6.8s; }
.wb-mote:nth-of-type(5) { left: 50%; top: 64%; animation-delay: 3.4s; animation-duration: 13s; }
@keyframes wb-mote { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: .9; } 85% { opacity: .7; } 100% { opacity: 0; transform: translate(14px, -120px); } }

/* ---------- 雨:细像素雨丝,在消息之下 ---------- */
/* 像素雨:canvas 由 world.js 的 RainFX 画(随机错位、长短不一、步进下落、输入栏上沿溅起),外加 8% 蓝灰压暗 */
.world-rain { position: absolute; inset: 0; opacity: 0; transition: opacity 1s steps(5, jump-none); background: rgba(58, 76, 96, .08); }
html[data-theme="island"] .world-rain { background: rgba(40, 70, 96, .12); }   /* 草地底更亮:压暗稍多,雨丝才分得开 */
.world-rain-cv { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; }
.world-sky.is-rain .world-rain { opacity: 1; }
/* 减弱动态:静态的像素雨点 */
.world-rain.is-static { background:
  linear-gradient(rgba(176, 212, 240, .7), rgba(176, 212, 240, .7)) 0 0 / 3px 9px no-repeat, rgba(58, 76, 96, .08); }

/* ---------- 掉落物:只落在门廊 ---------- */
.world-drops { position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 40; }
.world-drop {
  position: fixed; width: 36px; height: 36px; padding: 0; border: 0; background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  animation: wd-bob 2.4s steps(4, jump-none) infinite;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .14));
}
.world-drop .wd-ic { width: 36px; height: 36px; display: block; image-rendering: pixelated; image-rendering: crisp-edges; pointer-events: none; }
@keyframes wd-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.world-drop::after {   /* 落脚处的小影子 */
  content: ''; position: absolute; left: 8px; right: 8px; bottom: -5px; height: 3px; background: rgba(0, 0, 0, .12);
}
.wd-spark {
  position: absolute; right: -2px; top: -2px; width: 6px; height: 6px; pointer-events: none; opacity: 0;
  background:
    linear-gradient(#fff, #fff) 2px 0 / 2px 6px no-repeat,
    linear-gradient(#fff, #fff) 0 2px / 6px 2px no-repeat;
  animation: wd-spark 3.2s steps(2, jump-none) infinite;
}
.world-drop.is-rare .wd-spark {
  background:
    linear-gradient(#FFD36B, #FFD36B) 2px 0 / 2px 6px no-repeat,
    linear-gradient(#FFD36B, #FFD36B) 0 2px / 6px 2px no-repeat;
}
.world-drop.is-new .wd-spark { animation-duration: .6s; }
@keyframes wd-spark { 0%, 70% { opacity: 0; } 80%, 100% { opacity: 1; } }
.world-drop.is-gone { opacity: 0; transition: opacity .45s steps(3, jump-none); pointer-events: none; }
.world-drop:focus-visible { outline: 3px dashed var(--pet-accent, #3B5B7A); outline-offset: 3px; }

/* r9:背包浮钮已撤(会压住最新消息),背包从花生/花盆菜单打开 */
.world-bagbtn { display: none !important; }

/* 智能门廊:只有底部消息真会被门廊上的花生/花盆/掉落物压住时,world.js 的 Porch 才写入 --porch-h;
   平时为 0,最后一条消息下面没有留白。与花生/花盆说话时的临时让位(height / min-height)叠加,Porch 按实际位置算,不会重复撑。 */
html #chat-messages::after { content: ''; display: block; flex: none; padding-bottom: var(--porch-h, 0px); transition: padding-bottom .22s ease, height .22s ease, min-height .22s ease; }
@media (prefers-reduced-motion: reduce) { html #chat-messages::after { transition: none !important; } }

/* 和花生同样的显隐规则:往上翻、浮层、锁屏/登录/连接中都收起 */
html.pet-scrolled .world-drop, html.pet-scrolled .world-bagbtn,
body.pet-card-open .world-drops, body.pet-card-open .world-bagbtn,
body.garden-open .world-drops, body.garden-open .world-bagbtn,
body.sticker-open .world-drops, body.sticker-open .world-bagbtn,
body.world-bag-open .world-drops, body.world-bag-open .world-bagbtn,
body.ws-busy .world-drops, body.ws-busy .world-bagbtn,
.lock-screen:not(.hidden) ~ .world-drops, .lock-screen:not(.hidden) ~ .world-bagbtn,
#page-login.active ~ .world-drops, #page-login.active ~ .world-bagbtn,
.lock-screen:not(.hidden) ~ .world-bag, #page-login.active ~ .world-bag { visibility: hidden !important; }
body:not(:has(#page-chat.active)) .world-drops, body:not(:has(#page-chat.active)) .world-bagbtn { visibility: hidden; }

/* ---------- 背包面板:与狗牌同一套像素描边 ---------- */
.world-bag { position: fixed; inset: 0; z-index: 11000; }
.wb-scrim { position: absolute; inset: 0; background: rgba(20, 24, 30, .32); }
.wb-sheet {
  position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); transform: translateX(-50%);
  width: min(352px, calc(100vw - 28px)); max-height: min(70dvh, 560px); display: flex; flex-direction: column;
  background: var(--pet-paper, #F7F9FB); color: var(--pet-text, #2E4256);
  box-shadow:
    0 -3px 0 0 var(--pet-line, #2E4256), 0 3px 0 0 var(--pet-line, #2E4256),
    -3px 0 0 0 var(--pet-line, #2E4256), 3px 0 0 0 var(--pet-line, #2E4256),
    0 10px 0 0 rgba(0, 0, 0, .18);
  animation: wb-in .22s steps(3, jump-none);
}
@keyframes wb-in { from { transform: translate(-50%, 24px); } to { transform: translate(-50%, 0); } }
.wb-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 6px 8px 16px; border-bottom: 3px solid var(--pet-line, #2E4256); }
.wb-title { font-size: 18px; font-weight: 900; letter-spacing: .02em; }
.wb-x { width: 44px; height: 44px; border: 0; background: transparent; color: var(--pet-line, #2E4256); font-size: 24px; line-height: 1; cursor: pointer; }
.wb-body { overflow-y: auto; padding: 14px 14px 16px; }
.wb-empty { margin: 8px 2px 4px; font-size: 14px; line-height: 1.7; }
.wb-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.wb-item {
  position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 2px 7px; border: 0; cursor: pointer; font: inherit; color: inherit;
  background: var(--pet-paper-2, #fff); box-shadow: inset 0 0 0 2px var(--pet-line, #2E4256);
}
.wb-item.is-rare { box-shadow: inset 0 0 0 2px #B8862A, inset 0 0 0 4px var(--pet-paper-2, #fff), inset 0 0 0 5px #B8862A; }
.wb-item.on { background: var(--pet-accent, #3B5B7A); color: var(--pet-accent-ink, #fff); box-shadow: inset 0 0 0 2px var(--pet-line, #2E4256), 0 4px 0 0 var(--pet-line, #2E4256); transform: translateY(-2px); }
.wd-ic-lg { width: 36px; height: 36px; image-rendering: pixelated; image-rendering: crisp-edges; }
.wb-name { font-size: 12px; font-weight: 700; line-height: 1.2; text-align: center; }
.wb-count {
  position: absolute; right: 3px; top: 3px; font: 900 11px/1 var(--font-family, -apple-system, sans-serif);
  padding: 2px 4px; color: var(--pet-accent-ink, #fff); background: var(--pet-accent, #3B5B7A);
}
.wb-item.on .wb-count { color: var(--pet-accent, #3B5B7A); background: var(--pet-paper-2, #fff); }
.wb-item:focus-visible, .wb-go:focus-visible, .wb-x:focus-visible { outline: 3px dashed var(--pet-accent, #3B5B7A); outline-offset: 3px; }
.wb-use { margin-top: 14px; padding-top: 12px; border-top: 2px dashed color-mix(in srgb, var(--pet-line, #2E4256) 40%, transparent); display: grid; gap: 10px; }
.wb-use[hidden] { display: none; }
.wb-desc { margin: 0; display: flex; gap: 10px; align-items: center; font-size: 14px; line-height: 1.5; }
.wb-desc .wd-ic { width: 36px; height: 36px; image-rendering: pixelated; flex: none; }
.wb-desc b { display: block; font-size: 15px; }
.wb-go {
  width: 100%; border: 0; padding: 12px 14px; cursor: pointer; font: inherit; font-size: 15px; font-weight: 800;
  color: var(--pet-accent-ink, #fff); background: var(--pet-accent, #3B5B7A); box-shadow: 0 4px 0 0 var(--pet-line, #2E4256);
}
.wb-go:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 0 var(--pet-line, #2E4256); }
.wb-go:disabled { cursor: default; color: var(--pet-text, #2E4256); background: var(--pet-paper-2, #fff); box-shadow: inset 0 0 0 2px var(--pet-line, #2E4256); }

@media (prefers-reduced-motion: reduce) {
  .world-drop, .wb-mote, .wd-spark, .wb-sheet { animation: none !important; }
  .world-beam { transition: none; }
  .world-drop .wd-spark { opacity: 1; }
}