/* 第 11 輪：外觀百貨——稱號稀有度、寵物名字、個人介紹框（frm-*）、商店介面。
   介紹框：給玩家小卡與個人簡介頁用，元素加上 class "frm frm-<名稱>" 即可（shop_catalog.js 的 applyFrame(el, av.fm) 會做）。
   框內底色用 --frm-bg（預設白色）；框是 3px 的邊框，內容不會被蓋住。 */

/* ---- 稱號稀有度 */
.ti.ti-r { box-shadow:0 0 0 1.5px rgba(255,255,255,.9) inset; }
.ti.ti-e { box-shadow:0 0 0 1.5px rgba(255,255,255,.95) inset, 0 0 6px rgba(190,120,255,.7); }
.ti.ti-l { box-shadow:0 0 0 1.5px #fff6c0 inset, 0 0 9px 2px rgba(255,210,70,.9); animation:tiGlow 1.8s ease-in-out infinite; }
@keyframes tiGlow { 0%,100% { filter:brightness(1); box-shadow:0 0 0 1.5px #fff6c0 inset, 0 0 7px 1px rgba(255,210,70,.8); } 50% { filter:brightness(1.25); box-shadow:0 0 0 1.5px #fff6c0 inset, 0 0 13px 4px rgba(255,220,90,1); } }

/* ---- 寵物名字 */
.petTag { position:absolute; left:0; top:0; will-change:transform; font-size:11px; font-weight:800; color:#4a3a5c; background:rgba(255,255,255,.92); border-radius:999px; padding:0 8px; box-shadow:0 2px 5px rgba(0,0,0,.18); white-space:nowrap; pointer-events:none; }

/* ---- 個人介紹框 */
.frm { --frm-bg:#fff; position:relative; border:4px solid transparent !important; border-radius:18px; }
.frm-silver { background:linear-gradient(var(--frm-bg),var(--frm-bg)) padding-box, linear-gradient(135deg,#f4f6fa,#a9b3c4 35%,#ffffff 55%,#8f9aae) border-box !important; box-shadow:0 0 10px rgba(160,175,200,.7); }
.frm-gold { background:linear-gradient(var(--frm-bg),var(--frm-bg)) padding-box, linear-gradient(135deg,#fff3b0,#e0a410 35%,#fff0a0 55%,#b8800a) border-box !important; box-shadow:0 0 14px rgba(240,190,50,.75); }
.frm-sakura { background:linear-gradient(var(--frm-bg),var(--frm-bg)) padding-box, radial-gradient(circle at 12% 18%,#fff 0 4px,transparent 5px), radial-gradient(circle at 88% 30%,#fff 0 3px,transparent 4px), radial-gradient(circle at 40% 92%,#fff 0 4px,transparent 5px), linear-gradient(135deg,#ffc2d8,#ff8fb5 50%,#ffd6e6) border-box !important; box-shadow:0 0 14px rgba(255,140,180,.6); }
.frm-sakura::before { content:'\273F'; position:absolute; top:-14px; right:10px; font-size:20px; color:#ff8fb5; text-shadow:0 0 4px #fff; }
.frm-neon { background:linear-gradient(var(--frm-bg),var(--frm-bg)) padding-box, linear-gradient(135deg,#40f0ff,#b04aff 50%,#40f0ff) border-box !important; box-shadow:0 0 6px #40f0ff, 0 0 18px rgba(176,74,255,.8); animation:frmNeon 2s ease-in-out infinite; }
@keyframes frmNeon { 0%,100% { box-shadow:0 0 5px #40f0ff, 0 0 14px rgba(176,74,255,.7); } 50% { box-shadow:0 0 9px #40f0ff, 0 0 26px rgba(176,74,255,1); } }
.frm-feather { background:linear-gradient(var(--frm-bg),var(--frm-bg)) padding-box, repeating-linear-gradient(60deg,#e8f2ff 0 6px,#9fc8ff 6px 9px,#ffffff 9px 14px) border-box !important; box-shadow:0 0 12px rgba(150,190,255,.7); }
.frm-night { background:linear-gradient(var(--frm-bg),var(--frm-bg)) padding-box, radial-gradient(circle at 15% 25%,#fff 0 1.5px,transparent 2px), radial-gradient(circle at 70% 12%,#ffe9a0 0 2px,transparent 3px), radial-gradient(circle at 90% 70%,#fff 0 1.5px,transparent 2px), radial-gradient(circle at 35% 90%,#cdd6ff 0 2px,transparent 3px), linear-gradient(160deg,#1a1f5c,#3a2f8f 55%,#121648) border-box !important; box-shadow:0 0 14px rgba(80,90,220,.7); }
.frm-rainbow { background:linear-gradient(var(--frm-bg),var(--frm-bg)) padding-box, linear-gradient(120deg,#ff4a4a,#ff9a2a,#ffe23a,#4fd06a,#3fa0ff,#8a5aff,#ff4a4a) border-box !important; background-size:100% 100%, 300% 300% !important; animation:frmRb 3.2s linear infinite; box-shadow:0 0 16px rgba(255,150,200,.7); }
@keyframes frmRb { 0% { background-position:0 0, 0% 50%; } 100% { background-position:0 0, 300% 50%; } }

/* ---- 外觀百貨介面 */
.lk-tabs { display:flex; gap:5px; flex-wrap:wrap; margin:0 0 8px; } .lk-tabs button { padding:5px 12px; font-size:14px; font-weight:800; border-radius:999px; } .lk-tabs button.on { background:var(--acc); color:var(--acc-tx); border-color:var(--acc); }
.lk-main { display:flex; gap:12px; align-items:flex-start; }
.lk-side { flex:0 0 250px; display:flex; flex-direction:column; gap:6px; position:sticky; top:0; }
.lk-view { position:relative; width:250px; height:290px; border-radius:18px; background:linear-gradient(#bfe4ff,#e9f7ff 60%,#fff4de); border:2px solid var(--line); overflow:hidden; }
.lk-cvwrap { position:absolute; inset:0; } .lk-cv { width:100%; height:100%; display:block; }
.lk-cvwrap .petTag { z-index:2; }
.lk-plate { position:absolute; left:6px; right:6px; top:6px; z-index:3; pointer-events:none; }
.lk-card { --frm-bg:#fff; background:#fff; border:3px solid var(--line); border-radius:14px; padding:4px 8px; text-align:center; font-size:13px; } .lk-card .ti { display:inline-block; font-size:10px; font-weight:800; color:#fff; padding:0 7px; border-radius:999px; margin-right:4px; } .lk-card small { display:block; opacity:.5; font-size:10px; }
.lk-card.frm-silver, .lk-card.frm-gold, .lk-card.frm-sakura, .lk-card.frm-neon, .lk-card.frm-feather, .lk-card.frm-night, .lk-card.frm-rainbow { border:4px solid transparent; }
.lk-name { position:absolute; left:6px; right:6px; bottom:6px; z-index:3; background:rgba(255,255,255,.9); border-radius:12px; padding:3px 8px; border-left:5px solid var(--rc); display:flex; flex-direction:column; font-size:12px; } .lk-name b { font-size:14px; } .lk-name span { opacity:.7; }
.lk-night { font-size:13px; font-weight:700; } .lk-pet label { font-size:12px; font-weight:700; display:block; margin-bottom:3px; } .lk-pet div { display:flex; gap:5px; } .lk-pet input { flex:1; min-width:0; padding:5px 8px; border-radius:10px; border:2px solid var(--line); font-size:14px; }
.lk-list { flex:1; min-width:0; } .lk-items { grid-template-columns:repeat(auto-fill, minmax(118px, 1fr)); }
.lk-item { cursor:pointer; border-color:var(--rc); position:relative; } .lk-item.sel { outline:3px solid var(--rc); box-shadow:0 0 12px -2px var(--rc); } .lk-item.locked { opacity:.7; }
.lk-dot { width:34px; height:34px; border-radius:50%; border:3px solid var(--rc); display:block; margin-bottom:2px; } .lk-dot.glow { box-shadow:0 0 10px 3px rgba(255,210,70,.9); }
.lk-rar { color:var(--rc); font-weight:800; opacity:1 !important; } .lk-pure { font-size:11px; opacity:.55; } .lk-price .coin { width:12px; height:12px; vertical-align:-0.15em; }
@media (max-width: 720px) {
  .lk-main { flex-direction:column; } .lk-side { flex:none; width:100%; position:static; flex-direction:row; flex-wrap:wrap; align-items:flex-start; }
  .lk-view { width:min(100%, 260px); height:230px; flex:none; }
  .lk-items { grid-template-columns:repeat(auto-fill, minmax(104px, 1fr)); }
}

/* ---- 包包／全狀態表 */
.lk-tabs button em { font-style:normal; font-size:11px; opacity:.6; margin-left:4px; }
.bg-tabs { margin-bottom:8px; }
.bg-gifts { display:flex; flex-direction:column; gap:6px; } .bg-gift { background:#fff; border:2px solid var(--line); border-radius:12px; padding:6px 10px; display:flex; gap:6px; align-items:baseline; flex-wrap:wrap; } .bg-gift small { margin-left:auto; opacity:.55; }
.bg-status { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:10px; } .bg-sec { background:#fff; border:2px solid var(--line); border-radius:14px; padding:8px 12px; } .bg-sec h4 { margin:0 0 6px; font-size:14px; }
.bg-row { display:grid; grid-template-columns:96px 74px 1fr; gap:4px 8px; align-items:center; font-size:13px; margin:3px 0; } .bg-row small { grid-column:1 / -1; opacity:.65; font-size:11px; }
.bg-bar { display:block; height:8px; border-radius:6px; background:#e9e4f2; overflow:hidden; } .bg-bar u { display:block; height:100%; background:linear-gradient(90deg,#ffb02e,#ff7f9f); text-decoration:none; }
.bg-chips { display:flex; flex-wrap:wrap; gap:5px; } .bg-chip { font-size:12px; padding:2px 9px; border-radius:999px; background:#eee9f6; opacity:.7; } .bg-chip.on { background:#ffe9b8; opacity:1; font-weight:700; }
#social #btnBag { }

/* ---- 煙火提示與排隊 */
#fwHint { position:fixed; right:12px; top:64px; z-index:12; background:linear-gradient(135deg,#2a2f6e,#7a3fa0); color:#fff; font-weight:800; font-size:14px; padding:8px 14px; border-radius:999px; box-shadow:0 4px 14px rgba(0,0,0,.35); animation:fwPulse 1.4s ease-in-out infinite; cursor:pointer; }
@keyframes fwPulse { 0%,100% { box-shadow:0 4px 14px rgba(0,0,0,.35); } 50% { box-shadow:0 0 18px 4px rgba(255,220,120,.9); } }
#fwQueue { position:fixed; right:12px; top:104px; z-index:11; background:rgba(40,30,80,.82); color:#ffe9a8; font-size:12px; font-weight:700; padding:4px 12px; border-radius:999px; pointer-events:none; }
.lk-try { font-size:12px; background:#fff3cf; border-radius:10px; padding:3px 8px; }