/* ============================================
   战宠祈愿 - 样式文件 (pet-gacha.css)
   ============================================ */

/* 嵌入index.html，不使用全局重置 */

/* ================= 入口按钮 ================= */
.pet-gacha-entry-btn {
    position: fixed; bottom: 20px; left: 44%; z-index: 100;
    cursor: pointer; transition: transform 0.3s;
    text-align: center;
}
.pet-gacha-entry-btn:hover { transform: scale(1.15); }
.pet-gacha-entry-icon {
    width: 50px; height: 50px; position: relative;
    background: rgba(40,15,60,0.85); border: 2px solid rgba(155,72,197,0.6);
    border-radius: 50%; display: flex; justify-content: center; align-items: center;
    font-size: 24px; margin: 0 auto;
    box-shadow: 0 0 12px rgba(155,72,197,0.3);
}

/* 红点徽标 */
.pet-badge {
    position: absolute; top: -4px; right: -4px;
    width: 18px; height: 18px; line-height: 18px; text-align: center;
    background: #ff4444; color: #fff; font-size: 11px; font-weight: bold;
    border-radius: 50%; border: 2px solid rgba(40,15,60,0.85);
    box-shadow: 0 0 6px rgba(255,68,68,0.6);
    animation: badgePulse 2s infinite ease-in-out;
}
@keyframes badgePulse {
    0%,100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

/* 气泡提示 */
.pet-bubble {
    position: absolute; top: -14px; right: -75px;
    background: rgba(20,10,40,0.92); color: #ffe066;
    font-size: 12px; padding: 6px 12px; border-radius: 12px;
    border: 1.5px solid rgba(255,204,102,0.5);
    box-shadow: 0 2px 12px rgba(0,0,0,0.4);
    white-space: nowrap; pointer-events: none;
    opacity: 0; transform: scale(0.7);
    transition: opacity 0.25s, transform 0.25s;
    z-index: 200;
}
.pet-bubble::before {
    content: ''; position: absolute; left: -8px; top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent; border-right-color: rgba(20,10,40,0.92);
}
.pet-bubble.show { opacity: 1; transform: scale(1); }
.pet-bubble .typing-cursor {
    display: inline-block; margin-left: 1px;
    animation: blink-cursor 0.6s step-end infinite;
}
@keyframes blink-cursor { 50% { opacity: 0; } }
.pet-gacha-entry-label {
    font-size: 11px; color: #d48af8; margin-top: 4px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

/* ================= 主界面 ================= */
.game-window { width:1280px; height:720px; position:relative; overflow:hidden;
    background:url('/game/pet-images/bg.jpg') no-repeat center center; background-size:cover;
    box-shadow:0 0 50px rgba(0,0,0,.8); font-family:"Microsoft YaHei","PingFang SC",sans-serif;
    user-select:none; }

.header { position:absolute; top:0; left:0; width:100%; height:60px;
    background:linear-gradient(to bottom, rgba(20,25,40,.9), rgba(10,15,25,.4));
    border-bottom:1px solid rgba(255,255,255,.08);
    display:flex; justify-content:space-between; align-items:center; padding:0 25px; z-index:10; }
.title { font-size:26px; font-weight:bold; color:#e0e6ed; text-shadow:0 2px 4px rgba(0,0,0,.9); letter-spacing:3px; }
.close-btn { font-size:28px; color:#aaa; cursor:pointer; transition:.2s; }
.close-btn:hover { color:#fff; }

/* 资源栏 */
.resources { position:absolute; top:18px; right:70px; display:flex; gap:26px; font-size:15px; color:#eee; text-shadow:0 1px 3px #000; }
.res-item { display:flex; align-items:center; gap:7px; }
.res-icon { width:22px; height:22px; display:inline-block; object-fit:contain; }
.res-icon-voucher { font-size:18px; filter:drop-shadow(0 0 4px rgba(100,180,255,.5)); }

/* 三卡池容器 */
.cards-container { position:absolute; top:52%; left:50%; transform:translate(-50%,-50%);
    display:flex; gap:30px; z-index:5; transition:opacity .3s; }
.card { width:280px; height:500px; border-radius:12px; padding:20px; display:flex; flex-direction:column;
    align-items:center; position:relative; backdrop-filter:blur(8px); border:2px solid; transition:transform .3s; }
.card:hover { transform:translateY(-6px); }
.card::before { content:''; position:absolute; top:-10px; left:50%; transform:translateX(-50%) rotate(45deg);
    width:14px; height:14px; border:2px solid; background:#0a0f1e; }

/* 宝箱区域 */
.chest-area { margin-top:25px; margin-bottom:15px; width:140px; height:140px;
    display:flex; justify-content:center; align-items:center; position:relative; }
.chest-glow { position:absolute; width:100%; height:100%; border-radius:50%; z-index:0; opacity:.8; }
.chest-img { width:120px; z-index:1; filter:drop-shadow(0 5px 15px rgba(0,0,0,.5)); }

.card-subtitle { font-size:14px; color:#ccc; margin-bottom:4px; text-shadow:0 1px 2px #000; }
.card-title { font-size:22px; font-weight:bold; margin-bottom:30px; letter-spacing:1px; text-shadow:0 2px 4px #000; }
/* 按钮组 */
.btn-group { width:100%; display:flex; flex-direction:column; gap:12px; margin-top:auto; margin-bottom:15px; }
.btn { width:100%; height:46px; border:1px solid rgba(255,255,255,.15); border-radius:4px; display:flex;
    justify-content:center; align-items:center; gap:8px; font-size:14px; cursor:pointer; transition:.2s;
    text-shadow:0 1px 2px rgba(0,0,0,.9); }
.btn:active { transform:scale(.98); }
.btn-icon { width:18px; height:18px; display:inline-block; object-fit:contain; }
.timer { font-size:12px; color:#888; text-align:center; margin:-2px 0 5px; }

.btn-coin { background:linear-gradient(180deg,#5a4a2a,#3a2a1a); border-color:#8a7a4a; color:#ffeaa7; }
.btn-coin:hover { box-shadow:0 0 12px rgba(255,215,0,.3); }
.btn-ticket { background:linear-gradient(180deg,#2a3a5a,#1a2a3a); border-color:#4a6a8a; color:#a7d8ff; }
.btn-ticket:hover { box-shadow:0 0 12px rgba(0,198,255,.3); }
.btn-double { flex-direction:column; height:52px; line-height:1.3; }
.btn-double span:last-child { font-size:12px; color:#bbb; }

/* 卡片颜色主题 */
.card.blue { background:linear-gradient(180deg, rgba(30,60,110,.5), rgba(15,30,60,.7)); border-color:#4a7bb5; }
.card.blue::before { border-color:#4a7bb5; }
.card.blue .chest-glow { background:radial-gradient(circle, rgba(74,123,181,.5), transparent 70%); }
.card.blue .card-title { color:#8ab4f8; }
.card.gold { background:linear-gradient(180deg, rgba(110,80,30,.5), rgba(60,40,15,.7)); border-color:#c59b48; }
.card.gold::before { border-color:#c59b48; }
.card.gold .chest-glow { background:radial-gradient(circle, rgba(197,155,72,.5), transparent 70%); }
.card.gold .card-title { color:#f8d48a; }
.card.purple { background:linear-gradient(180deg, rgba(80,30,110,.5), rgba(40,15,60,.7)); border-color:#9b48c5; }
.card.purple::before { border-color:#9b48c5; }
.card.purple .chest-glow { background:radial-gradient(circle, rgba(155,72,197,.5), transparent 70%); }
.card.purple .card-title { color:#d48af8; }

.footer-tips { position:absolute; bottom:20px; left:25px; font-size:12px; color:#555; line-height:1.8; z-index:5; }

/* Toast提示（用!important覆盖game.css的.toast动画干扰） */
#petToast { position:absolute; top:18%; left:50%; transform:translateX(-50%); background:rgba(0,0,0,.8); color:#fff;
    padding:12px 30px; border-radius:8px; border:1px solid #c59b48; font-size:16px; z-index:300; opacity:0 !important;
    pointer-events:none; transition:opacity .3s; animation:none !important; }
#petToast.show { opacity:1 !important; }

/* ================= 抽卡遮罩层 ================= */
.overlay { position:fixed; inset:0; z-index:10000;
    background:rgba(4,7,16,.94);
    display:flex; justify-content:center; align-items:center;
    visibility:hidden; opacity:0; transition:opacity .25s ease, visibility .25s;
    pointer-events:none; }
.overlay.active { visibility:visible; opacity:1; pointer-events:auto; }

/* 翻牌阶段 */
.flip-phase { position:absolute; inset:0; display:none; justify-content:center; align-items:center; perspective:1500px; }
.flip-phase.on { display:flex; }
.card-3d { width:340px; height:520px; position:relative; transform-style:preserve-3d;
    transition:transform .8s cubic-bezier(.2,.7,.3,1.1); cursor:pointer; }
.card-3d.flipped { transform:rotateY(180deg); }
.card-face { position:absolute; inset:0; backface-visibility:hidden; border-radius:14px; overflow:hidden; }

/* 卡牌背面 */
.card-back { background:#111624; box-shadow:0 0 60px rgba(30,230,190,.28); }
.bg-jade { position:absolute; inset:0; background:radial-gradient(ellipse at center, #1a8c7c 0%, #0c443d 100%); }
.bg-texture { position:absolute; inset:0; opacity:.18;
    background-image:url("data:image/svg+xml,%3Csvg width='300' height='450' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 30 C120 0, 180 120,100 200 C200 260,240 350,140 440' stroke='%2332c9b0' fill='none' stroke-width='2' opacity='0.5'/%3E%3Cpath d='M260 20 C180 40,120 140,220 220 C140 290,100 380,200 450' stroke='%2332c9b0' fill='none' stroke-width='2' opacity='0.4'/%3E%3C/svg%3E"); }
.outer-frame { position:absolute; inset:8px; border:3px solid;
    border-image:linear-gradient(135deg,#d2d8a6,#98a268,#d2d8a6) 1; border-radius:8px; }
.outer-frame::after { content:""; position:absolute; inset:4px; border:2px solid;
    border-image:linear-gradient(135deg,#b9c282,#7c844e,#b9c282) 1; border-radius:6px; }
.corner-deco { position:absolute; width:86px; height:86px; }
.corner-tl{top:8px;left:8px} .corner-tr{top:8px;right:8px;transform:rotate(90deg)}
.corner-bl{bottom:8px;left:8px;transform:rotate(-90deg)} .corner-br{bottom:8px;right:8px;transform:rotate(180deg)}
.corner-deco svg { width:100%; height:100%; }
.cross-group { position:absolute; inset:20px; }
.cross-bar { position:absolute; width:8px; background:linear-gradient(90deg,#e0e8b3,#9fa868,#e0e8b3); }
.cross-bar::after { content:""; position:absolute; width:3px; left:12px; top:0; bottom:0;
    background:linear-gradient(90deg,#c4cc88,#8c9454,#c4cc88); }
.cross-left { height:440px; top:0; left:20px; transform-origin:top left; transform:rotate(42deg); }
.cross-right { height:440px; top:0; right:20px; transform-origin:top right; transform:rotate(-42deg); }
.big-diamond-wrap { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) rotate(45deg); width:230px; height:230px; }
.diamond-border-outer { position:absolute; inset:0; border:6px solid; border-image:linear-gradient(135deg,#e0e8b3,#9fa868,#e0e8b3) 1; }
.diamond-border-inner { position:absolute; inset:10px; border:3px solid; border-image:linear-gradient(135deg,#c4cc88,#8c9454,#c4cc88) 1; }
.tip-top-wrap { position:absolute; top:32px; left:50%; transform:translateX(-50%); width:92px; height:110px; }
.tip-bottom-wrap { position:absolute; bottom:32px; left:50%; transform:translateX(-50%) rotate(180deg); width:92px; height:110px; }
.gem-container { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) rotate(45deg); width:124px; height:124px; }
.gem-layer { position:absolute; inset:0; border:4px solid #24e8bc;
    background:radial-gradient(#66ffdd 10%, #0ec29c 65%, #067c64 100%); box-shadow:0 0 22px #24e8bc;
    animation:gemPulse 2.2s infinite ease-in-out; }
.gem-layer:nth-child(2){ inset:14px; animation-delay:.25s }
.gem-layer:nth-child(3){ inset:28px; animation-delay:.5s }
.gem-inner-pattern { position:absolute; inset:36px; background:radial-gradient(rgba(10,170,135,.5),transparent); }
.particle { position:absolute; width:5px; height:5px; background:#fff; border-radius:99px; box-shadow:0 0 10px #58ffd8; }
.p1{top:12%;left:18%;animation:twinkle 3.2s infinite} .p2{top:24%;left:82%;animation:twinkle 2.7s infinite .4s}
.p3{top:80%;left:22%;animation:twinkle 3s infinite .9s} .p4{top:88%;left:76%;animation:twinkle 2.5s infinite 1.3s}
.light-blade { position:absolute; top:-100px; left:-120px; width:220px; height:4px;
    background:linear-gradient(90deg,rgba(90,255,220,0),#58ffd8,rgba(90,255,220,0));
    transform:rotate(-30deg); filter:blur(3px); opacity:.7; }
.light-blade.bottom { top:auto; bottom:-60px; left:-80px; transform:rotate(20deg); }
@keyframes gemPulse { 0%,100%{opacity:.82;box-shadow:0 0 24px #24e8bc} 50%{opacity:1;box-shadow:0 0 46px #38ffce} }
@keyframes twinkle { 0%,100%{opacity:0;transform:scale(.3)} 40%{opacity:1;transform:scale(1.2)} }

/* 卡牌正面 */
.card-front { transform:rotateY(180deg); background:#0d1526; border:3px solid #d2d8a6; }
.card-front .pet-art { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.breathing-glow { animation:breathe 1.2s infinite alternate; }
@keyframes breathe { from{box-shadow:0 0 20px rgba(210,216,166,.35)} to{box-shadow:0 0 55px rgba(255,215,0,.8)} }

/* 六边形品质角标 */
.hex-badge { position:absolute; top:8px; right:8px; width:46px; height:52px; display:flex; justify-content:center;
    align-items:center; font-size:24px; font-weight:bold; color:#fff; z-index:3; text-shadow:0 1px 3px #000;
    clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); }
.rank-S { background:linear-gradient(160deg,#ffb24a,#e07800); }
.rank-A { background:linear-gradient(160deg,#9a6ae0,#5a2aa0); }
.rank-B { background:linear-gradient(160deg,#5aa8ff,#1a5ac0); }
.name-bar { position:absolute; left:0; right:0; bottom:0; padding:7px 4px; text-align:center; font-size:14px;
    color:#fff; background:rgba(0,0,0,.55); text-shadow:0 1px 2px #000; z-index:2; }

/* ================= 十连结算：2x5 网格 ================= */
.result-phase { position:absolute; inset:0; display:none; flex-direction:column; justify-content:center; align-items:center; }
.result-phase.on { display:flex; }
.grid-container { display:grid; grid-template-columns:repeat(5,150px); gap:18px; margin-bottom:30px; }
.grid-item { position:relative; width:150px; height:210px; border-radius:8px; overflow:hidden;
    border:2px solid #3a6a9a; background:linear-gradient(180deg, rgba(20,45,85,.85), rgba(8,18,38,.95));
    opacity:0; transform:scale(.7); }
@keyframes popIn { to { opacity:1; transform:scale(1); } }

/* 战宠卡 */
.grid-item.pet.rank-B { border-color:#5aa8ff; }
.grid-item.pet.rank-A { border-color:#9a6ae0; box-shadow:0 0 14px rgba(154,106,224,.4); }
.grid-item.pet.rank-S { border-color:#ffb24a; box-shadow:0 0 18px rgba(255,140,0,.5); }
.grid-item .pet-art { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.grid-item .hex-badge { width:36px; height:40px; font-size:18px; top:6px; right:6px; }

/* 道具卡 */
.item-icon-glow { position:absolute; top:44%; left:50%; transform:translate(-50%,-50%); width:86px; height:86px;
    display:flex; justify-content:center; align-items:center; }
.item-icon-glow::before { content:""; position:absolute; inset:-14px;
    background:radial-gradient(circle, rgba(220,235,255,.4), transparent 70%); }
.item-icon-glow img { position:relative; width:100%; height:100%; object-fit:contain;
    filter:drop-shadow(0 0 10px rgba(220,235,255,.85)); }
.grid-item .name-bar { font-size:13px; }

/* 确认按钮 */
.btn-confirm { padding:12px 70px; font-size:18px; background:linear-gradient(180deg,#c59b48,#8a6a2a);
    border:1px solid #ffeaa7; color:#fff; border-radius:4px; cursor:pointer; text-shadow:0 1px 2px #000;
    opacity:0; pointer-events:none; transition:opacity .5s, filter .2s; z-index:5; }
.btn-confirm.on { opacity:1; pointer-events:auto; }
.btn-confirm:hover { filter:brightness(1.2); }

/* ================= 仓库面板 ================= */
.inventory-btn { position:absolute; bottom:20px; right:25px; padding:8px 20px; font-size:14px;
    background:linear-gradient(180deg,#2a3a5a,#1a2a3a); border:1px solid #4a6a8a; color:#a7d8ff;
    border-radius:4px; cursor:pointer; z-index:5; transition:.2s; }
.inventory-btn:hover { box-shadow:0 0 12px rgba(0,198,255,.3); filter:brightness(1.2); }

.inventory-panel { position:fixed; inset:0; z-index:10001; background:rgba(4,7,16,.96);
    display:flex; flex-direction:column; align-items:center; overflow-y:auto; padding:30px;
    visibility:hidden; opacity:0; transition:opacity .25s ease, visibility .25s;
    pointer-events:none; }
.inventory-panel.active { visibility:visible; opacity:1; pointer-events:auto; }
.inventory-title { font-size:24px; font-weight:bold; color:#e0e6ed; margin-bottom:20px; letter-spacing:2px; }
.inventory-grid { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:30px; max-width:700px; justify-content:flex-start; }

/* 小碎片格子：紧凑、无卡片框、图片填充、右下角数量 */
.inv-item { position:relative; width:64px; height:64px; border-radius:6px; overflow:hidden;
    background:rgba(20,30,50,.9); border:1px solid rgba(100,140,200,.3);
    display:flex; align-items:center; justify-content:center;
    transition:transform .15s; }
.inv-item:hover { transform:scale(1.15); z-index:2; border-color:rgba(200,220,255,.6); }
.inv-item img { width:100%; height:100%; object-fit:contain; padding:4px; }
.inv-item .inv-qty { position:absolute; bottom:2px; right:3px; font-size:11px; color:#ffeaa7;
    font-weight:bold; text-shadow:0 1px 2px #000; }
.inv-item .inv-name { display:none; }
.inv-item .hex-badge { display:none; }
/* 碎片品质边框 */
.inv-item.pet.rank-B { border-color:rgba(90,168,255,.5); }
.inv-item.pet.rank-A { border-color:rgba(154,106,224,.6); }
.inv-item.pet.rank-S { border-color:rgba(255,178,74,.7); box-shadow:0 0 6px rgba(255,140,0,.3); }
/* 道具类型 */
.inv-item.type-item { border-color:rgba(120,180,120,.4); }
.inv-close-btn { padding:10px 40px; font-size:16px; background:linear-gradient(180deg,#c59b48,#8a6a2a);
    border:1px solid #ffeaa7; color:#fff; border-radius:4px; cursor:pointer; }
.inv-empty { color:#666; font-size:16px; margin-top:60px; }