/* ══════════════════════════════════════════════════════════
   app/brand.css — 视图过渡 / 品牌标志与图标 / 从 index.html 收编的样式
   由原 assets/app.css 第 1856–2115 行拆出；七个文件按 index.html 里的顺序加载，层叠顺序与原来一致
   ══════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════
   View Transitions — 面板开合过渡
   这些面板靠 display:none/block 切换，CSS 无法过渡，改用原生视图过渡。
   不支持的浏览器（见 app.js 的 withVT）会跳过，行为与改造前一致。
   ══════════════════════════════════════════════════════════ */

/* 只让面板参与过渡：默认整页快照会让秒针数字在过渡期间产生重影 */
::view-transition-group(root),
::view-transition-old(root),
::view-transition-new(root){ animation: none; mix-blend-mode: normal; }

#note-panel{ view-transition-name: vt-note-panel; }
#calc-panel{ view-transition-name: vt-calc-panel; }
#cal-panel { view-transition-name: vt-cal-panel;  }

@keyframes vtPanelIn{
  from{ opacity:0; transform: translateY(-8px) scale(.96); }
  to  { opacity:1; transform: none; }
}
@keyframes vtPanelOut{
  from{ opacity:1; transform: none; }
  to  { opacity:0; transform: translateY(-6px) scale(.97); }
}

/* 面板从触发按钮下方落下，所以缩放锚点在顶部 */
::view-transition-new(vt-note-panel),
::view-transition-new(vt-calc-panel),
::view-transition-new(vt-cal-panel){
  animation: vtPanelIn .22s cubic-bezier(.16,1,.3,1) both;
  transform-origin: top center;
}
::view-transition-old(vt-note-panel),
::view-transition-old(vt-calc-panel),
::view-transition-old(vt-cal-panel){
  animation: vtPanelOut .16s ease-in both;
  transform-origin: top center;
}

@media (prefers-reduced-motion: reduce){
  ::view-transition-new(vt-note-panel), ::view-transition-old(vt-note-panel),
  ::view-transition-new(vt-calc-panel), ::view-transition-old(vt-calc-panel),
  ::view-transition-new(vt-cal-panel),  ::view-transition-old(vt-cal-panel){
    animation: none;
  }
}

/* ── VT 第二批：窗口 / 全屏弹层 ───────────────────────────
   分两类曲线：下拉面板走 vtPanel*，全屏浮层走 vtOverlay*。
   已有入场动画的（game/player-center/challenge/user-profile）只接管「关闭」，
   入场仍用各自原有的 CSS 动画，避免两套动画打架。            */

#reset-modal        { view-transition-name: vt-reset-modal; }
#cd-modal           { view-transition-name: vt-cd-modal; }
#lottery-modal      { view-transition-name: vt-lottery-modal; }
#game-modal         { view-transition-name: vt-game-modal; }
#player-center-modal{ view-transition-name: vt-pc-modal; }
#challenge-modal    { view-transition-name: vt-challenge-modal; }
#user-profile-overlay{ view-transition-name: vt-up-overlay; }

@keyframes vtOverlayIn{
  from{ opacity:0; transform: scale(.98); }
  to  { opacity:1; transform: none; }
}
@keyframes vtOverlayOut{
  from{ opacity:1; transform: none; }
  to  { opacity:0; transform: scale(.985); }
}

/* 窗口类：两个方向都由 VT 接管 */
::view-transition-new(vt-reset-modal),
::view-transition-new(vt-cd-modal),
::view-transition-new(vt-lottery-modal){
  animation: vtOverlayIn .24s cubic-bezier(.16,1,.3,1) both;
}
::view-transition-old(vt-reset-modal),
::view-transition-old(vt-cd-modal),
::view-transition-old(vt-lottery-modal){
  animation: vtOverlayOut .18s ease-in both;
}

/* 表情面板贴着输入框上沿展开，锚点在底部 */
::view-transition-new(vt-emoji-panel){
  animation: vtPanelIn .2s cubic-bezier(.16,1,.3,1) both; transform-origin: bottom center;
}
::view-transition-old(vt-emoji-panel){
  animation: vtPanelOut .15s ease-in both; transform-origin: bottom center;
}

/* 仅接管关闭：新状态不做动画，保留各自原有的入场动画 */
::view-transition-new(vt-game-modal),
::view-transition-new(vt-pc-modal),
::view-transition-new(vt-challenge-modal),
::view-transition-new(vt-up-overlay){ animation: none; }
::view-transition-old(vt-game-modal),
::view-transition-old(vt-pc-modal),
::view-transition-old(vt-challenge-modal),
::view-transition-old(vt-up-overlay){
  animation: vtOverlayOut .2s ease-in both;
}

@media (prefers-reduced-motion: reduce){
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){ animation: none !important; }
}

/* ══════════════════════════════════════════════════════════
   品牌标志 & 图标系统 —— 图形来自 brand.js 的 SVG 雪碧图
   · svg.sk-mark  站点 Logo（樱花 × 钟面）
   · svg.ico      线性双色调图标，颜色跟随 currentColor
   · svg.gico     游戏彩色插画
   只对 svg 生效：大富翁等模块里有同名的 div.ico，别误伤
   ══════════════════════════════════════════════════════════ */
svg.ico{width:20px;height:20px;flex:none;display:inline-block;vertical-align:middle;overflow:visible;pointer-events:none;}
svg.gico{width:30px;height:30px;flex:none;display:block;overflow:visible;pointer-events:none;}
svg.sk-mark{width:36px;height:36px;flex:none;display:block;overflow:visible;pointer-events:none;}

/* ── 顶栏品牌 ── */
.brand{gap:11px;cursor:default;user-select:none;-webkit-user-select:none;}
.brand-mark{position:relative;width:40px;height:40px;display:grid;place-items:center;flex:none;}
.brand-mark::before{content:'';position:absolute;inset:-4px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,140,185,.38) 0%,rgba(160,110,255,.14) 48%,transparent 70%);
  opacity:.85;transition:opacity .4s,transform .6s cubic-bezier(.3,1.5,.5,1);}
.brand-mark svg.sk-mark{position:relative;width:38px;height:38px;
  filter:drop-shadow(0 3px 8px rgba(236,91,143,.45));
  transition:transform .7s cubic-bezier(.3,1.5,.5,1);}
.brand:hover .brand-mark svg.sk-mark{transform:rotate(-14deg) scale(1.08);}
.brand:hover .brand-mark::before{opacity:1;transform:scale(1.15);}
.brand-text{display:flex;flex-direction:column;justify-content:center;line-height:1;min-width:0;}
.brand-cn{font-family:"Songti SC","STSong","Noto Serif SC","Source Han Serif SC","SimSun",serif;
  font-size:1.26rem;font-weight:700;letter-spacing:5px;white-space:nowrap;
  background:linear-gradient(100deg,#fff 0%,#ffe3ee 38%,#ffadc9 78%,#d9b8ff 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 2px 10px rgba(255,120,170,.28));}
.brand-title{margin-top:5px;font-size:.54rem;font-weight:600;letter-spacing:2.6px;white-space:nowrap;
  background:none;-webkit-text-fill-color:currentColor;color:rgba(255,214,232,.58);}
body.theme-light .brand-cn{background:linear-gradient(100deg,#6d1740 0%,#b8336a 55%,#8a4fd6 100%);
  -webkit-background-clip:text;background-clip:text;filter:none;}
body.theme-light .brand-title{color:rgba(122,40,80,.55);}
body.theme-light .brand-mark::before{background:radial-gradient(circle,rgba(255,150,190,.45) 0%,transparent 68%);}
@media(max-width:1180px){.brand-title{display:none;}}
@media(max-width:768px){.brand-mark{width:34px;height:34px;}.brand-mark svg.sk-mark{width:33px;height:33px;}.brand-cn{font-size:1.08rem;letter-spacing:3px;}}
@media(max-width:480px){.brand-text{display:none;}}

/* ── 导航按钮里的图标 ── */
.btn-cal svg.ico,.btn-icon svg.ico{width:20px;height:20px;transition:transform .25s cubic-bezier(.3,1.6,.5,1);}
.btn-cal:hover svg.ico,.btn-icon:hover svg.ico{transform:rotate(-6deg);}
@media(max-width:480px){.btn-cal svg.ico,.btn-icon svg.ico{width:18px;height:18px;}}
.sakura-density-wrap svg.ico{width:18px;height:18px;color:var(--pink-sakura);}
.btn-pure{display:inline-flex;align-items:center;gap:6px;}
.btn-pure svg.ico{width:17px;height:17px;}
.bell-head svg.ico{width:16px;height:16px;margin-right:4px;vertical-align:-3px;color:var(--pink-sakura);}

/* ── 合并后的「聊天室」按钮：聊天室 + 私信 + 好友 ── */
.btn-cal{position:relative;}
.btn-msg{color:#ffc2d6;border-color:rgba(255,160,200,.34);
  background:linear-gradient(140deg,rgba(255,120,170,.16),rgba(150,100,255,.12));}
.btn-msg:hover{background:linear-gradient(140deg,rgba(255,120,170,.3),rgba(150,100,255,.22));border-color:rgba(255,170,205,.6);
  box-shadow:0 0 18px rgba(255,120,170,.3);}
body.theme-light .btn-msg{color:#c0305a;background:linear-gradient(140deg,rgba(255,140,180,.22),rgba(190,150,255,.16));}
.btn-msg.has-unread{animation:msgRing 2.2s ease-out infinite;border-color:rgba(255,170,205,.75);}
.btn-msg.has-unread svg.ico{animation:msgWiggle 2.2s ease-in-out infinite;transform-origin:50% 80%;}
@keyframes msgRing{0%{box-shadow:0 0 0 0 rgba(255,120,170,.55);}70%{box-shadow:0 0 0 9px rgba(255,120,170,0);}100%{box-shadow:0 0 0 0 rgba(255,120,170,0);}}
@keyframes msgWiggle{0%,62%,100%{transform:none;}68%{transform:rotate(-12deg);}74%{transform:rotate(10deg);}80%{transform:rotate(-6deg);}86%{transform:rotate(3deg);}}

/* 数字角标（聊天室 / 动态广场 / 手机标签栏共用） */
.nav-badge{position:absolute;top:-4px;right:-5px;min-width:17px;height:17px;padding:0 5px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;box-sizing:border-box;
  font:800 .6rem/1 var(--font-body,system-ui);letter-spacing:0;font-variant-numeric:tabular-nums;color:#fff;
  background:linear-gradient(135deg,#ff5d8f,#e8356d);border:1.5px solid rgba(14,12,34,.92);
  box-shadow:0 2px 8px rgba(232,53,109,.55);pointer-events:none;}
.nav-badge.dot{min-width:0;width:10px;height:10px;padding:0;top:-1px;right:-1px;}
.nav-badge.bump{animation:navBadgeBump .45s cubic-bezier(.3,1.8,.5,1);}
@keyframes navBadgeBump{0%{transform:scale(.4);}60%{transform:scale(1.18);}100%{transform:scale(1);}}
body.theme-light .nav-badge{border-color:#fff1f6;}

.game-overlay-icon svg.gico{width:68px;height:68px;filter:drop-shadow(0 8px 18px rgba(0,0,0,.35));}

/* ── 手机标签栏 / 工具箱 ── */
.mtab-ico{display:grid;place-items:center;height:24px;}
.mtab-ico svg.ico{width:23px;height:23px;}
.mtab.active .mtab-ico svg.ico{filter:drop-shadow(0 2px 6px rgba(232,80,122,.45));}
.mtab .nav-badge{top:0;right:calc(50% - 22px);}
.mtool-ico{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;color:var(--pink-sakura);
  background:linear-gradient(145deg,rgba(255,150,190,.16),rgba(160,120,255,.1));border:1px solid rgba(255,183,197,.16);}
.mtool-ico svg.ico{width:25px;height:25px;}
.mtool-ico img{width:26px;height:26px;object-fit:contain;}
body.theme-light .mtool-ico{color:#c0305a;background:linear-gradient(145deg,rgba(255,170,200,.3),rgba(200,170,255,.18));}

/* ── 百宝箱 / 导航管理 ── */
.nav-more-title{display:flex;align-items:center;gap:6px;}
.nav-more-title svg.ico{width:16px;height:16px;color:var(--pink-sakura);}
.pc-navm-ico,.navm-ico{display:grid;place-items:center;}
.pc-navm-ico svg.ico,.navm-ico svg.ico{width:19px;height:19px;color:var(--pink-sakura);}

/* ── 登录墙 ── */
.auth2-seal svg.sk-mark{width:32px;height:32px;filter:drop-shadow(0 2px 4px rgba(90,10,40,.35));}
.auth2-ic{display:grid;place-items:center;opacity:.6;}
.auth2-ic svg.ico{width:17px;height:17px;}
.auth2-forgot svg.ico,.reset-title svg.ico{width:1.05em;height:1.05em;margin-right:5px;vertical-align:-.16em;}
.spinner-icon{display:grid;place-items:center;}
.spinner-icon svg.sk-mark{width:64px;height:64px;filter:drop-shadow(0 8px 22px rgba(255,110,160,.5));animation:skMarkSpin 2.6s cubic-bezier(.45,0,.2,1) infinite;}
@keyframes skMarkSpin{0%{transform:rotate(0) scale(1);}50%{transform:rotate(180deg) scale(.9);}100%{transform:rotate(360deg) scale(1);}}

@media (prefers-reduced-motion: reduce){
  .btn-msg.has-unread,.btn-msg.has-unread svg.ico,.nav-badge.bump,.spinner-icon svg.sk-mark{animation:none !important;}
}

/* ══════════ 从 index.html 内联样式收进来的部分 ══════════ */
/* 用 hidden 属性表示初始隐藏：这些元素的类自带 display，得显式压住 */
.pc-subpage[hidden],#pc-page-main[hidden],.pc-rail-i[hidden],.pc-chip[hidden],.pc-role-badge[hidden],
.pc-note[hidden],.pc-card[hidden],.pc-btn[hidden],.auth2-field[hidden],.btn-cal[hidden],.bell-wrap[hidden],
.bell-badge[hidden],.nav-badge[hidden],.nav-more-wrap[hidden],#spider-toolbar[hidden],#pc-inline-rename[hidden],
#pc-email-line[hidden],#pc-account-card[hidden],#pc-account-entry[hidden],
#pc-avatar-img[hidden],#pc-header-avatar-img[hidden],#pc-rail-av-img[hidden]{display:none!important}
.bell-wrap,.nav-more-wrap{position:relative}

/* 节日装饰层 / 祝福动画层 / 春节烟花画布（显示与隐藏由 chat.js 控制） */
#fest-deco-layer{position:fixed;inset:0;pointer-events:none;z-index:50;overflow:hidden}
#fest-greeting{position:fixed;inset:0;z-index:20000;display:none;align-items:center;justify-content:center;flex-direction:column;overflow:hidden}
#fest-fw-canvas{position:fixed;inset:0;pointer-events:none;z-index:48;display:none;width:100%;height:100%}

/* 掌机 A 键比 B 键高半格，斜着排 */
.gb-ab-item-raise{margin-top:-14px}

/* 添加到主屏幕引导（assets/pwa.js） */
#pwa-guide{position:fixed;inset:0;z-index:99990;display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(4,6,26,.6);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
#pwa-guide[hidden]{display:none}
.pwa-guide-box{width:min(340px,100%);padding:24px;border-radius:20px;text-align:center;color:#f1f5f9;
  background:rgba(12,16,40,.95);box-shadow:inset 0 0 0 1px rgba(255,183,197,.2),0 24px 60px rgba(0,0,0,.6)}
.pwa-guide-ic{width:52px;height:52px;margin:0 auto 10px;border-radius:16px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(140deg,#f28cb5,#9b6bff);box-shadow:0 12px 26px -12px rgba(242,140,181,.9)}
.pwa-guide-ic .ico{width:26px;height:26px}
.pwa-guide-t{font-size:1.05rem;font-weight:800;margin-bottom:14px;color:#ffb7c5}
.pwa-guide-steps{margin:0;padding:0;list-style:none;counter-reset:pg;font-size:.9rem;line-height:1.75;color:#cbd5e1;text-align:left}
.pwa-guide-steps li{position:relative;padding:4px 0 4px 32px;counter-increment:pg}
.pwa-guide-steps li::before{content:counter(pg);position:absolute;left:0;top:6px;width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;font-size:.72rem;font-weight:800;color:#fff;background:rgba(255,183,197,.2)}
.pwa-guide-steps b{color:#ffb7c5}
.pwa-guide-steps b.k{color:#38bdf8}
.pwa-guide-close{margin-top:18px;width:100%;padding:11px;border-radius:12px;border:0;cursor:pointer;font:inherit;font-size:.92rem;font-weight:700;color:#fff;
  background:linear-gradient(135deg,rgba(255,105,180,.4),rgba(167,139,250,.35))}
.pwa-guide-close:hover{filter:brightness(1.1)}

/* ══════════ 界面 emoji → SVG（showToast / 确认框，见 app/core.js uiSplitEmoji）══════════ */
.toast{display:flex;align-items:center;gap:8px;}
.toast svg.ico{width:17px;height:17px;flex:none;color:#f9a8d4;}
.toast.t-ok svg.ico{color:#4ade80;}
.toast.t-err svg.ico{color:#f87171;}
.toast.t-warn svg.ico{color:#fbbf24;}
.toast.t-gold svg.ico{color:#fcd34d;}
body.theme-light .toast svg.ico{color:#d63b78;}
body.theme-light .toast.t-ok svg.ico{color:#16a34a;}
body.theme-light .toast.t-err svg.ico{color:#dc2626;}
body.theme-light .toast.t-warn svg.ico,body.theme-light .toast.t-gold svg.ico{color:#b45309;}
.ui-dlg-ic{display:inline-grid;place-items:center;width:56px;height:56px;border-radius:18px;color:#f9a8d4;
  background:color-mix(in srgb,currentColor 14%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 30%,transparent);}
.ui-dlg-ic svg.ico{width:28px;height:28px;}
.ui-dlg-ic.t-ok{color:#4ade80;} .ui-dlg-ic.t-err{color:#f87171;} .ui-dlg-ic.t-warn{color:#fbbf24;} .ui-dlg-ic.t-gold{color:#fcd34d;}
body.theme-light .ui-dlg-ic{color:#d63b78;}
body.theme-light .ui-dlg-ic.t-err{color:#dc2626;} body.theme-light .ui-dlg-ic.t-warn{color:#b45309;} body.theme-light .ui-dlg-ic.t-ok{color:#16a34a;}

/* ── 界面图标（原 emoji）── */
.game-overlay-icon svg.ico{width:44px;height:44px;}
.gb-ov-sym{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:20px;color:#f9a8d4;
  background:color-mix(in srgb,currentColor 14%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 30%,transparent);}
.gb-ov-sym svg.ico{width:34px;height:34px;}
.gb-ov-sym.t-gold{color:#fcd34d;} .gb-ov-sym.t-dim{color:#a5b4fc;}
.gb-dpad-btn svg.ico{width:14px;height:14px;}
.gb-dpad-btn svg.dp-up{transform:rotate(180deg);}
#btn-b svg.ico{width:15px;height:15px;}
.sd-key.sd-confirm svg.ico{width:18px;height:18px;}
.cal-festival-tip{display:flex;align-items:center;justify-content:center;gap:6px;}
.cal-festival-tip svg.ico{width:14px;height:14px;flex:none;opacity:.85;}
.reset-back{display:flex;align-items:center;justify-content:center;gap:4px;}
.reset-back svg.ico{width:14px;height:14px;}
.tz-mdel svg.ico{width:12px;height:12px;}
.pc-role-badge svg.ico{width:12px;height:12px;}
.pc-bdg-grp{display:flex;align-items:center;gap:6px;}
.pc-bdg-grp svg.ico{width:13px;height:13px;}
.badge-unlock-head{display:flex;align-items:center;gap:5px;}
.badge-unlock-head svg.ico{width:13px;height:13px;}
.ach-star svg.ico{width:13px;height:13px;vertical-align:-2px;fill:none;}
.ach-star.on svg.ico{fill:currentColor;color:#fbbf24;}
#pc-email-cooldown svg.ico{width:13px;height:13px;margin-right:5px;vertical-align:-2px;}
#sg-banned .sg-ico svg.ico{width:40px;height:40px;color:#f87171;}
#a2hs .a2hs-hd svg.ico{width:17px;height:17px;}
#a2hs .a2hs-x svg.ico{width:12px;height:12px;}
/* 棋牌 / 对战大厅：ui-icons.js 把按钮与提示开头的 emoji 换成的图标 */
svg.ico.ui-emj{width:1.08em;height:1.08em;vertical-align:-.16em;margin-right:.32em;flex:none;}
svg.gico.ui-emj{width:1.25em;height:1.25em;vertical-align:-.25em;margin-right:.35em;}
button > svg.ico.ui-emj:only-child,.lk-chip svg.ico.ui-emj{margin-right:.25em;}
.ui-dot{display:inline-block;width:.62em;height:.62em;border-radius:50%;margin-right:.4em;vertical-align:.05em;
  box-shadow:0 0 0 2px color-mix(in srgb,currentColor 12%,transparent);}
.ui-dot.g{background:#4ade80;} .ui-dot.y{background:#fbbf24;} .ui-dot.r{background:#f87171;}
#gmk-root .gmk-top h3,#xq-root .xq-top h3,#wq-root .wq-top h3{display:flex;align-items:center;gap:8px;}
#gmk-root .gmk-top h3 svg.ui-emj,#xq-root .xq-top h3 svg.ui-emj,#wq-root .wq-top h3 svg.ui-emj{display:block;margin:0;width:22px;height:22px;}
.lk-mode .ic svg.ico.ui-emj{width:24px;height:24px;margin:0;vertical-align:middle;}