/* ============================================================
   可爱化皮肤 cute.css ——方案A「精灵球经典」
   商城：米白纸底 + 粗黑描边贴纸卡 + 硬阴影 + 红黄蓝点缀
   图鉴/定制馆：保持海军蓝深色风（衬卡面）
   只做样式层，不影响任何功能
   ============================================================ */

:root{
  --pk-navy:#0A285F;
  --pk-yellow:#FFCB05;
  --pk-yellow-light:#FFD86E;
  --pk-red:#EE1515;
  --pk-blue:#2A75BB;
  --pk-blue-light:#8DC8FF;
  --pk-cream:#FFF3C4;
  --pk-ink:#2e4fc0;
  --pk-text:#1c2f63;
  --pk-paper:#f4f6fb;
  --pk-gold1:#ffd93d;
  --pk-gold2:#ffb703;
}

/* ===== 图鉴/定制馆：海军蓝深色风 ===== */
html,body{ background:var(--pk-navy) !important; }
body:not(.page-admin):not(.page-shop){
  background:
    radial-gradient(1000px 520px at 88% -12%, rgba(255,203,5,0.16), transparent 60%),
    radial-gradient(900px 520px at -12% 22%, rgba(42,117,187,0.22), transparent 60%),
    radial-gradient(820px 500px at 50% 114%, rgba(238,21,21,0.12), transparent 60%),
    var(--pk-navy) !important;
}

/* ===== 商城：方案A米白纸底 ===== */
body.page-shop{
  background:
    radial-gradient(900px 480px at 90% -10%, rgba(255,203,5,0.10), transparent 60%),
    radial-gradient(800px 480px at -10% 15%, rgba(42,117,187,0.07), transparent 60%),
    var(--pk-paper) !important;
  color:var(--pk-text) !important;
}

/* ===== 标题 ===== */
h1{
  color:var(--pk-yellow) !important;
  font-weight:900 !important;
  text-shadow:
    0 1.5px 0 var(--pk-navy), 1.5px 0 0 var(--pk-navy),
    -1.5px 0 0 var(--pk-navy), 0 -1.5px 0 var(--pk-navy) !important;
}
/* 商城标题：黄色贴纸牌 */
.page-shop h1 > span:not(.cute-wiggle){
  background:linear-gradient(180deg, var(--pk-gold1), var(--pk-gold2)) !important;
  color:var(--pk-ink) !important;
  -webkit-text-fill-color:var(--pk-ink) !important;
  text-shadow:none !important;
  padding:3px 16px !important;
  border-radius:12px !important;
  border:3px solid var(--pk-ink) !important;
  box-shadow:0 4px 0 var(--pk-ink) !important;
  letter-spacing:1px;
}
/* 标题里的迷你精灵球（SVG）*/
.page-shop h1::after{
  content:"";flex:0 0 auto;width:26px;height:26px;margin-left:8px;
  background:url('pokeball.svg') center/contain no-repeat;
  animation:pkBallPop 2s ease-in-out infinite;
}
@keyframes pkBallPop{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-5px) rotate(14deg)}}

/* ===== 通用小物 ===== */
*{ scrollbar-color:var(--pk-blue) var(--pk-navy); }
::selection{ background:rgba(255,203,5,0.55); color:var(--pk-navy); }

.toast{
  border-radius:999px !important;
  border:2px solid var(--pk-yellow) !important;
  background:rgba(10,40,95,0.96) !important;
  color:var(--pk-cream) !important;
  box-shadow:0 10px 40px rgba(255,203,5,0.3) !important;
}

/* 贴纸面板（商城所有面板/弹窗） */
.page-shop .card-panel{
  background:#fff !important;
  border:3px solid var(--pk-ink) !important;
  border-radius:20px !important;
  box-shadow:0 6px 0 var(--pk-ink) !important;
}

/* 浅底下的文字工具类修正 */
.page-shop .text-amber-300,.page-shop .text-amber-400,.page-shop .text-amber-500{ color:#a16207 !important; }
.page-shop .text-gray-400,.page-shop .text-gray-500,.page-shop .text-gray-600{ color:#7b8395 !important; }
.page-shop .text-red-400,.page-shop .text-red-500{ color:var(--pk-red) !important; }
.page-shop .text-yellow-300{ color:#a16207 !important; }

.input-box{
  border-radius:999px !important;
  border-color:rgba(141,200,255,0.4) !important;
}
.page-shop .input-box{
  background:#fff !important;
  border:2px solid var(--pk-ink) !important;
  color:var(--pk-ink) !important;
}
.page-shop .input-box::placeholder{ color:#9aa3b5 !important; }
.input-box:focus{
  border-color:var(--pk-yellow) !important;
  box-shadow:0 0 0 3px rgba(255,203,5,0.2) !important;
}

/* ===== 按钮 ===== */
/* 主按钮：皮卡丘黄（深色页通用） */
.btn-primary{
  border-radius:999px !important;
  background:linear-gradient(180deg, var(--pk-yellow-light), var(--pk-yellow)) !important;
  color:var(--pk-navy) !important;
  font-weight:900 !important;
  border:2px solid #fff !important;
  box-shadow:0 0 0 2px var(--pk-navy), 0 6px 20px rgba(255,203,5,0.4) !important;
  text-shadow:none !important;
}
.btn-primary:active{ transform:scale(0.95) rotate(-1deg) !important; }
/* 商城主按钮：贴纸黄 */
.page-shop .btn-primary{
  background:linear-gradient(180deg, var(--pk-gold1), var(--pk-gold2)) !important;
  color:#4a3200 !important;
  border:3px solid var(--pk-ink) !important;
  box-shadow:0 4px 0 var(--pk-ink) !important;
}
.page-shop .btn-primary:active{ transform:translateY(4px) !important; box-shadow:none !important; }

/* 次级按钮：精灵球白底红环 */
.btn-secondary{
  border-radius:999px !important;
  background:#fff !important;
  border:2px solid var(--pk-red) !important;
  color:var(--pk-navy) !important;
  font-weight:800 !important;
  box-shadow:0 4px 14px rgba(238,21,21,0.25) !important;
  text-shadow:none !important;
}
.page-shop .btn-secondary{
  border:3px solid var(--pk-ink) !important;
  color:var(--pk-ink) !important;
  box-shadow:0 4px 0 var(--pk-ink) !important;
}

/* ===== 筛选入口：黄色贴纸牌 + 红漏斗 ===== */
.page-shop .shop-filter-cta{
  background:linear-gradient(180deg, var(--pk-gold1), var(--pk-gold2)) !important;
  border:3px solid var(--pk-ink) !important;
  border-radius:16px !important;
}
.page-shop .shop-filter-cta strong{ color:var(--pk-ink) !important; }
.page-shop .shop-filter-cta small{ color:var(--pk-ink) !important; opacity:0.65; }
.page-shop .shop-filter-cta-arrow{ color:var(--pk-ink) !important; opacity:0.7; }
.page-shop .shop-filter-cta-icon{ background:#fff !important; color:var(--pk-red) !important; border:3px solid var(--pk-ink) !important; }
@keyframes filterCtaPulse{
  0%,100%{ box-shadow:0 4px 0 var(--pk-ink), 0 0 0 0 rgba(255,203,5,0.7); }
  50%{ box-shadow:0 4px 0 var(--pk-ink), 0 0 0 10px rgba(255,203,5,0); }
}

/* 购买须知按钮 */
body.page-shop .shop-rule-button{
  border-color:#fff !important;
  background:var(--pk-red) !important;
  color:#fff !important;
  border:3px solid var(--pk-ink) !important;
  box-shadow:0 4px 0 var(--pk-ink) !important;
}
body.page-shop .shop-rule-button > span{ color:#fff !important; }

.rule-banner{
  border-radius:16px !important;
  border:3px solid var(--pk-ink) !important;
  background:linear-gradient(135deg,#ff3a3a,var(--pk-red)) !important;
  box-shadow:0 5px 0 var(--pk-ink) !important;
}
.rule-banner-copy strong{ color:#fff !important; }
.rule-banner-copy small{ color:rgba(255,255,255,0.8) !important; }
.rule-banner-cta{ background:linear-gradient(180deg,var(--pk-gold1),var(--pk-gold2)) !important; color:var(--pk-ink) !important; border:2px solid var(--pk-ink) !important; }

/* 折扣横幅：精灵球红贴纸 */
.key-discount-bar{
  border-radius:14px !important;
  border:3px solid var(--pk-ink) !important;
  background:linear-gradient(135deg,#ff3a3a,#c60c0c) !important;
  color:#fff !important;
  box-shadow:0 4px 0 var(--pk-ink) !important;
}
.key-discount-bar b{ color:var(--pk-gold1) !important; }

/* ===== 筛选面板 ===== */
.page-shop .filter-panel-heading{ color:var(--pk-ink) !important; }
.filter-panel-heading-tip{ color:var(--pk-red) !important; }
.filter-guide{
  background:#fff !important;
  border:2px solid var(--pk-ink) !important;
  border-radius:12px !important;
  box-shadow:0 3px 0 var(--pk-ink) !important;
}
.filter-step-num{
  background:linear-gradient(135deg, var(--pk-gold1), var(--pk-gold2)) !important;
  color:#1c2f63 !important;
  font-weight:900;
  border:2px solid var(--pk-ink) !important;
}
/* 步骤文字：深色加粗，不再发灰 */
.filter-step{ color:#1c2f63 !important; font-weight:800; }
.filter-step-arrow{ color:#6b7a99 !important; font-weight:800; }
/* 区块标题：红条 + 深色字 */
.filter-section-label{ color:var(--pk-ink) !important; }
.filter-section-label::before{
  content:"";display:inline-block;width:5px;height:16px;border-radius:3px;background:var(--pk-red);
}
.filter-section-hint{ color:#6b7a99 !important; }

/* 分类标签：白底黑边贴纸，选中变黄 */
.page-shop .filter-tag{
  background:#fff !important;
  border:2px solid var(--pk-ink) !important;
  color:var(--pk-ink) !important;
  box-shadow:0 3px 0 var(--pk-ink) !important;
  font-weight:800 !important;
}
.page-shop .filter-tag:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--pk-ink) !important; }
.page-shop .filter-tag.active{
  background:linear-gradient(180deg, var(--pk-gold1), var(--pk-gold2)) !important;
  color:var(--pk-ink) !important;
  border:2px solid var(--pk-ink) !important;
  box-shadow:0 3px 0 var(--pk-ink) !important;
}
.page-shop .filter-tag.active .filter-tag-count{
  background:var(--pk-ink) !important;
  color:#fff !important;
}

/* 数量角标：黄底深字，一眼看清 */
.page-shop .filter-tag-count{
  background:linear-gradient(180deg, var(--pk-gold1), var(--pk-gold2)) !important;
  color:#4a3200 !important;
  border:1px solid var(--pk-ink) !important;
  font-size:11px !important;
  font-weight:900 !important;
  min-width:21px !important;
  height:21px !important;
  border-radius:999px !important;
}

/* 结果提示：奶油底黄色虚线框 */
.page-shop .filter-result-tip{
  background:#fffbe6 !important;
  border:2px dashed var(--pk-yellow) !important;
  color:#6b5a12 !important;
  border-radius:12px !important;
}

.filter-done-btn{
  background:linear-gradient(180deg, var(--pk-gold1), var(--pk-gold2)) !important;
  color:#4a3200 !important;
  border:3px solid var(--pk-ink) !important;
  box-shadow:0 4px 0 var(--pk-ink) !important;
  border-radius:999px !important;
}
.filter-reset-btn{
  border-radius:999px !important;
  background:#fff !important;
  border:2px solid var(--pk-ink) !important;
  color:var(--pk-ink) !important;
  box-shadow:0 3px 0 var(--pk-ink) !important;
}

/* ===== 卡牌贴纸卡 ===== */
.page-shop .card-item{
  background:#fff !important;
  border:3px solid var(--pk-ink) !important;
  border-radius:16px !important;
  box-shadow:0 6px 0 var(--pk-ink) !important;
}
.page-shop .card-item:hover{
  transform:translateY(-5px) rotate(-0.5deg) !important;
  box-shadow:0 11px 0 var(--pk-ink) !important;
}
.page-shop .card-corner{ background:var(--pk-red) !important; }
.page-shop .card-item .card-shine{
  background:linear-gradient(90deg,transparent,rgba(255,217,61,0.45),transparent) !important;
}
.page-shop .image-zoom-hint{
  border-radius:999px !important;
  background:linear-gradient(180deg, var(--pk-gold1), var(--pk-gold2)) !important;
  color:#4a3200 !important;
  border:2px solid var(--pk-ink) !important;
}
/* ＋号单独加深：原来金色字压在黄底上看不见 */
.page-shop .image-zoom-hint b{
  color:#4a3200 !important;
  font-weight:900 !important;
  text-shadow:none !important;
}
.page-shop .card-variant-prices strong{ color:var(--pk-red) !important; }
.page-shop .card-variant-prices span{ color:#7b8395 !important; }

/* ===== 分页 ===== */
.page-shop .pager-btn{
  border-radius:999px !important;
  background:#fff !important;
  border:2px solid var(--pk-ink) !important;
  color:var(--pk-ink) !important;
  box-shadow:0 3px 0 var(--pk-ink) !important;
}
.page-shop .pager-num{
  border-radius:999px !important;
  background:#fff !important;
  border:2px solid var(--pk-ink) !important;
  color:var(--pk-ink) !important;
  box-shadow:0 2px 0 var(--pk-ink) !important;
}
.page-shop .pager-num.active{
  background:linear-gradient(180deg, var(--pk-gold1), var(--pk-gold2)) !important;
  color:var(--pk-ink) !important;
  box-shadow:0 2px 0 var(--pk-ink) !important;
  font-weight:800;
}
.page-shop .pager-info{ color:#7b8395 !important; }

/* ===== 密钥门禁弹窗：白贴纸卡 ===== */
.page-shop .key-lock{
  background:rgba(16,28,66,0.95) !important;
}
.page-shop .key-lock-box{
  background:#fff !important;
  border:3px solid var(--pk-ink) !important;
  border-radius:22px !important;
  box-shadow:0 6px 0 var(--pk-ink) !important;
}
.page-shop .key-lock-title{
  color:var(--pk-ink) !important;
  -webkit-text-fill-color:var(--pk-ink) !important;
}
.page-shop .key-lock-desc{ color:#7b8395 !important; }
.page-shop .key-lock-input{
  background:#fff !important;
  border:2px solid var(--pk-ink) !important;
  color:var(--pk-ink) !important;
}
.page-shop .key-lock-btn{
  background:linear-gradient(180deg, var(--pk-gold1), var(--pk-gold2)) !important;
  color:#4a3200 !important;
  border:3px solid var(--pk-ink) !important;
  box-shadow:0 4px 0 var(--pk-ink) !important;
  border-radius:999px !important;
}
.page-shop .key-lock-err{ color:var(--pk-red) !important; }

/* 密钥弹窗精灵球（SVG）*/
.key-lock-icon{
  font-size:0 !important;
}
.key-lock-icon::after{
  content:"";
  display:inline-block;
  width:68px;height:68px;
  background:url('pokeball.svg') center/contain no-repeat;
  filter:drop-shadow(0 6px 10px rgba(10,40,95,0.28));
  animation:cuteBounce 2s ease-in-out infinite;
}

/* ===== 可爱动画 ===== */
@keyframes cuteBounce{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
@keyframes cuteWiggle{ 0%,100%{transform:rotate(-5deg)} 50%{transform:rotate(5deg)} }
@keyframes cuteIn{ from{opacity:0;transform:translateY(14px) scale(0.96)} to{opacity:1;transform:none} }

.cute-wiggle{ display:inline-block; animation:cuteWiggle 2.4s ease-in-out infinite; }
.card-item{ animation:cuteIn 0.45s cubic-bezier(0.34,1.56,0.64,1) backwards; }

/* ===== 庆典徽章 ===== */
.badge-row{display:flex;justify-content:center;gap:6px;margin-bottom:12px;flex-wrap:wrap;}
.badge-red{background:var(--pk-red);color:#fff;border-radius:6px;padding:3px 10px;font-size:11px;font-weight:900;letter-spacing:1px;border:1.5px solid var(--pk-ink);box-shadow:0 2px 0 var(--pk-ink);}
.badge-navy{background:var(--pk-navy);color:var(--pk-yellow);border-radius:6px;padding:3px 10px;font-size:11px;font-weight:800;letter-spacing:.5px;}

/* 筛选面板标题前的小精灵球点缀 */
.filter-panel-heading::before{
  content:"";display:inline-block;width:16px;height:16px;margin-right:2px;
  background:url('pokeball.svg') center/contain no-repeat;
  vertical-align:-2px;
}

/* 浅色卡图区：水印反色保持可见 */
.page-shop .card-item .secure-watermark__mesh span{ color:rgba(44,82,200,0.20) !important; text-shadow:0 1px 2px rgba(255,255,255,0.65) !important; }
.page-shop .card-item .secure-watermark__mesh span:nth-child(even){ color:rgba(198,16,16,0.14) !important; }
.page-shop .card-item .secure-watermark__band{ color:rgba(44,82,200,0.34) !important; border-color:rgba(44,82,200,0.28) !important; text-shadow:0 1px 2px rgba(255,255,255,0.6) !important; }
.page-shop .card-item .secure-watermark__seal{ color:rgba(198,16,16,0.5) !important; background:rgba(255,255,255,0.28) !important; border-color:rgba(198,16,16,0.35) !important; text-shadow:0 1px 2px rgba(255,255,255,0.7) !important; }

/* 动效敏感用户自动关闭 */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}