*{margin:0;padding:0;box-sizing:border-box;font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;}
body{position:relative;background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%);color:#e2e8f0;min-height:100vh;padding:10px;z-index:0;}
body::before{content:"";position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:-1;background-image:url('/mini/images/body_bg.jpg');background-size:cover;background-repeat:no-repeat;background-position:center center;filter:blur(12px) brightness(0.7);pointer-events:none;}
.header{text-align:center;width:100%;max-width:1400px;margin:0 auto 20px;position:relative}
h1{font-size: 2.8rem;margin-bottom: 10px;background: #fff;-webkit-background-clip: text;color: #ffffff00;}
.subtitle{color:#a9b7c6;font-size:1.2rem;}
.game-container{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;width:100%;margin:0 auto;}
.grid-container{background-color:rgba(15,23,42,0.7);border-radius:10px;padding:25px;box-shadow:0 10px 30px rgba(0,0,0,0.5);width:960px;}
.grid td{width:60px;height:60px;border:1px solid rgba(255,255,255,0.1);text-align:center;cursor:pointer;transition:all 0.2s ease;border-radius:4px;position:relative;}
.cell-empty{background-color:rgba(51,65,85,0.7)}
.cell-start{background-color:#4dccbd;background:radial-gradient(circle at center,#20c3bf,#4dccbd);position:relative;}
.cell-start::after{content:"起";color:white;font-weight:bold;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:28px;}
.cell-end{background-color:#e76f51;background:radial-gradient(circle at center,#f4a261,#e76f51);position:relative;}
.cell-end::after{content:"终";color:white;font-weight:bold;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:28px;}
.cell-obstacle{background-color:#264653;background:url('/mini/images/jin-icon.png') no-repeat center center;background-size:88%;cursor:not-allowed;}

/* 去掉未实际使用的 .cell-available 样式 */

/* 品质边框 */
.tool-overlay .tool-overlay-bg[data-quality="red"]{background-color:rgba(63,35,41,0.5);border:2px solid rgba(63,35,41,1);}
.tool-overlay .tool-overlay-bg[data-quality="gold"]{background-color:rgba(53,45,36,0.5);border:2px solid rgba(53,45,36,1);}
.equipment-size{font-size:0.8rem;padding:2px 8px;border-radius:10px;margin-top:5px;background-color:rgba(96,165,250,0.2);color:#60a5fa;}
.main-panel{display:flex;flex-direction:column;width:440px;}
.stats{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:10px;background:rgba(15,23,42,0.7);border-radius:15px;border:1px solid rgba(148,163,184,0.2);box-shadow:0 10px 25px rgba(0,0,0,0.3);padding:16px;}
.stat-item{background:rgb(71 76 105);border-radius:10px;padding:8px 15px;border:1px solid rgba(255,255,255,0.05);width:48%;}
.stat-label{font-size:14px;color:#a9b7c6;}
.stat-value{font-size:21px;font-weight:600;color:#fff;}
.controls{display:flex;gap:18px;margin-bottom:25px;justify-content:center;margin-top: 20px;}
button{padding:8px 24px;border:none;border-radius:40px;display:flex;align-items:center;justify-content:center;color:#fff;gap:5px;font-size:16px;font-weight:bold;cursor:pointer;transition:all 0.2s ease;}
.btn-save{background:#ff9800;color:white;}
.btn-save:hover{background:#ffaf1f;transform:translateY(-2px);}

/* 物资面板 */
.equipment-panel{background-color:rgba(0,20,40,0.7);border-radius:10px;box-shadow:0 10px 20px rgba(0,0,0,0.3);height: 630px}
.equipment-panel h2{color:#f4f4f4;margin-top:0;border-bottom:2px solid rgba(96,165,250,0.3);padding:20px 25px 10px;font-size:18px;display:flex;align-items:center;gap:10px;}
.equipment-list{display:flex;flex-wrap:wrap;gap:10px;overflow-y:auto;flex:1;height:500px;padding:12px 20px;}
.equipment-item{display:flex;flex-direction:column;align-items:center;padding:15px;background:rgb(71 76 105);border-radius:12px;cursor:grab;transition:all 0.3s ease;border:2px solid transparent;width:120px;position:relative;max-height:182px;}
.equipment-item:hover{transform:translateY(-5px);border-color:#60a5fa;box-shadow:0 5px 15px rgba(96,165,250,0.3);}
.equipment-item.dragging{opacity:0.7;cursor:grabbing;}
.equipment-item.used{opacity:0.35;cursor:not-allowed;filter:grayscale(70%);}
.equipment-name{font-size:0.9rem;font-weight:600;color:#cbd5e1;text-align:center;margin-bottom:8px;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.equipment-rarity{font-size:0.8rem;padding:2px 8px;border-radius:10px;font-weight:bold;}
.equipment-tabs{display:flex;border-bottom:1px solid rgba(148,163,184,0.2);}
.equipment-tab{flex:1;padding:12px;background:transparent;border:none;color:#94a3b8;font-size:14px;border-radius:3px!important;font-weight:400;cursor:pointer;transition:all 0.3s ease;display:flex;align-items:center;justify-content:center;gap:8px;}
.equipment-tab:hover{background:rgba(96,165,250,0.1);color:#cbd5e1;}
.equipment-tab.active{background:rgba(96,165,250,0.2);color:#ffffff;border-bottom:3px solid #ffffff;font-weight:600;}
.equipment-image{margin-bottom:10px;display:flex;align-items:center;justify-content:center;border-radius:8px;overflow:hidden;width:60px;height:60px;background:rgba(15,23,42,0.8);padding:10px;}
.equipment-image img{max-width:100%;max-height:100%;object-fit:contain;border-radius:4px;}
.rarity-common{background-color:rgba(148,163,184,0.3);color:#94a3b8;}
.rarity-uncommon{background-color:rgba(34,211,238,0.3);color:#22d3ee;}
.rarity-rare{background-color:rgba(139,92,246,0.3);color:#8b5cf6;}
.rarity-epic{background-color:rgba(236,72,153,0.3);color:#ec4899;}
.rarity-legendary{background-color:rgba(245,158,11,0.3);color:#f59e0b;}

/* 保存历史列表 */
.save-history{margin-top:10px;background:rgba(15,23,42,0.7);border-radius:15px;border:1px solid rgba(148,163,184,0.2);box-shadow:0 10px 25px rgba(0,0,0,0.3);}
.save-history .title{display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid rgba(96,165,250,0.3);padding: 20px 25px 10px;margin-bottom: 15px}
.save-history .title h3{margin:0;color:#f4f4f4;display:flex;align-items:center;gap:10px;font-size:18px;}
.save-history-list{display:flex;flex-direction:column;gap:15px;max-height:300px;overflow:auto;padding: 0 15px 20px;}
.save-item{display:flex;gap:10px;flex-direction:column;background:rgba(30,41,59,0.9);border:1px solid rgba(255,255,255,0.06);border-radius:10px;padding:15px;transition:all 0.3s ease;cursor:pointer;}
.save-item:hover{border-color:#60a5fa;transform:translateY(2px);box-shadow:0 5px 15px rgba(96,165,250,0.2);}
.save-item.active{border-color:#60a5fa;background:rgba(96,165,250,0.1);}
.save-meta{display:flex;flex-direction:column;gap:2px;min-width:0;}
.save-name{font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px;}
.save-sub{color:#fff;font-size:14px;padding:10px 0 0;display:flex;justify-content:space-between;align-items:center}
.save-actions{display:flex;gap:8px;flex-shrink:0;}
.save-actions button{padding:6px 20px;font-size:0.85rem;border-radius:40px;display:flex;align-items:center;justify-content:center;gap:5px;}
.btn-mini-load{background:linear-gradient(90deg,#3b82f6,#2563eb);color:#fff;}
.btn-mini-del{background:#ef4705;color:#fff;}
.btn-mini-load:hover{filter:brightness(1.06);transform:translateY(-1px);}
.btn-mini-del:hover{filter:brightness(1.06);transform:translateY(-1px);}

/* 拖拽预览（跟随鼠标的小浮层）：展示“即将放入网格”的真实尺寸，并带边框 */
.drag-preview{position:fixed;pointer-events:none;z-index:9999;display:none;padding:0;border-radius:10px;background:rgba(15,23,42,0.92);border:2px solid rgba(96,165,250,0.95);box-shadow:0 12px 26px rgba(0,0,0,0.45);}
.drag-preview .drag-preview-bg{position:absolute;inset:0;border-radius:10px;background:rgba(96,165,250,0.12);}
.drag-preview img{display:block;width:100%;height:100%;object-fit:contain;padding:8px;filter:drop-shadow(0 4px 10px rgba(0,0,0,0.38));}

/* 放置高亮（有效/无效） */
.cell-hover{outline:2px solid rgba(77,204,189,0.9);outline-offset:-2px;box-shadow:inset 0 0 0 9999px rgba(77,204,189,0.12);}
.cell-hover-invalid{outline:2px solid rgba(231,111,81,0.95);outline-offset:-2px;box-shadow:inset 0 0 0 9999px rgba(231,111,81,0.12);}

/* === 网格内物资图片 overlay（跨格显示）=== */


/* 修改原有的 .tool-overlay 样式 */
.tool-overlay{position:absolute;left:0;top:0;z-index:5;pointer-events:none;border-radius:10px;overflow:hidden;border:2px solid rgb(93 72 72);box-shadow:0 10px 22px rgba(0,0,0,0.35);}
.tool-overlay .tool-overlay-bg{position:absolute;inset:0;background:rgba(96,165,250,0.10);}
.tool-overlay img{position:absolute;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(0,0,0,0.38));transition:transform 0.15s ease-out;left: 0;top:0;}

/* 移除原来的 data-rotated 选择器样式，改为内联样式控制 */
/* 或者保留但添加更具体的控制 */
.tool-overlay[data-rotated="true"] img{
    transform: rotate(90deg) translateY(-100%);
    transform-origin: 0 0;
}
.baotiH3{text-align:center;font-size:32px;border-bottom:1px solid #4f4a4a;padding-bottom:16px;}


/* 品质颜色 */
.rarity-red{background-color:rgba(239,68,68,0.3);color:#ef4444;}
.rarity-gold{background-color:rgba(245,158,11,0.3);color:#f59e0b;}
button:hover{transform:translateY(-3px);box-shadow:0 7px 14px rgba(0,0,0,0.3);}
button:active{transform:translateY(-1px);}



.equipment-item.equipment-rotated{transform:rotate(90deg) translateY(-3px);}
.notification{position:fixed;top:20px;right:20px;padding:15px 20px;background:rgba(30,41,59,0.95);border-left:4px solid #60a5fa;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,0.3);z-index:10000000;transform:translateX(150%);transition:transform 0.3s ease;max-width:350px;}
.notification.show{transform:translateX(0);}
.notification-title{font-weight:bold;color:#60a5fa;margin-bottom:5px;display:flex;align-items:center;gap:8px;}
.notification-message{color:#cbd5e1;font-size:0.95rem;}
.subtitle ul{display:flex;justify-content:center;}
.subtitle ul li{list-style:none;margin:0 7px;border-radius:4px;padding:6px 17px;font-size:14px;color:#fff}
.subtitle ul li:first-child{background:#795548;color:#fff;}
.subtitle ul li:last-child{background:#d5904130;}
.full-bag-message{width:700px;margin:50px auto 0;position:relative;}
.bag-full-box{display:flex;justify-content:space-between;padding:10px 18px 3px;background:#5e4741;border-radius:10px;align-items:center;}
.bag-full-info{width:500px;}
.bag-full-info ul{display:flex;}
.bag-full-info ul li{margin-right:15px;list-style:none;color:#dedede;font-size:13px;line-height:26px;width:120px;}
.bag-full-info ul li span{color:#f0940d;font-weight:500;font-size:28px;}
.bag-full-info ul li:last-child{width:242px}
.bag-full-actions{width:220px;font-size:13px;line-height:30px;color:#dedede;}
.bag-full-qrcode{font-size:13px;line-height:26px;color:#fff;text-align:center;}
.bag-full-qrcode img{width:90px;height:90px;vertical-align:middle;border-radius:6px;}
.bag-full-details{width:540px;}
.bag-full-ids{display:flex;border-bottom:1px solid #7c5b53;padding-bottom:8px;margin-bottom:5px;font-size:14px;font-weight:500;color:#fff;}
.bag-full-info-actions{display:flex;}

/* 保存布局弹窗样式 */
.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);display:none;justify-content:center;align-items:center;z-index:2000;}
.modal-overlay.show{display:flex;}
.modal{background:linear-gradient(135deg,#1e293b 0%,#0f172a 100%);border-radius:15px;padding:30px;width:90%;max-width:500px;box-shadow:0 15px 35px rgba(0,0,0,0.5);border:1px solid rgba(96,165,250,0.3);}
.modal-header{margin-bottom:25px;display:flex;align-items:center;gap:10px;}
.modal-header i{font-size:22px;color:#60a5fa;}
.modal-title{font-size:20px;color:#60a5fa;font-weight:600;}
.modal-body{margin-bottom:25px;}
.form-group{margin-bottom:20px;}
.form-label{display:block;margin-bottom:8px;color:#cbd5e1;font-weight:500;}
.form-input{width:100%;padding:12px 15px;background:rgba(30,41,59,0.8);border:2px solid rgba(148,163,184,0.3);border-radius:10px;color:#e2e8f0;font-size:1rem;transition:all 0.3s ease;}
.form-input:focus{outline:none;border-color:#60a5fa;box-shadow:0 0 0 3px rgba(96,165,250,0.2);}
.form-input::placeholder{color:#94a3b8;}
textarea.form-input{resize:vertical;min-height:80px;}
.modal-footer{display:flex;justify-content:flex-end;gap:15px;}
.modal-stats{background:rgba(30,41,59,0.6);padding:15px;border-radius:10px;margin-bottom:20px;display:flex;justify-content:space-between;}
.stat-item-small{text-align:center;}
.stat-value-small{font-size:1.2rem;font-weight:bold;color:#60a5fa;}
.stat-label-small{font-size:0.8rem;color:#94a3b8;margin-top:5px;}
.btn-gray{background:linear-gradient(90deg,#475569,#334155);color:#cbd5e1;}
.btn-gray:hover{background:linear-gradient(90deg,#64748b,#475569);color:#f1f5f9;}
.deleteTit{margin-bottom:20px;}
.btn-mini-edit{background:linear-gradient(135deg,#f59e0b,#d97706);color:white;}
.reset-btn{background:linear-gradient(90deg,#60a5fa,#8b5cf6);}
.reset-btn:hover{transform: translateY(-3px);
    box-shadow: 0 7px 14px rgba(0, 0, 0, 0.3);}
.btn-blue{background:#3b82f6}
.game-round-badge{display:inline-block;background:linear-gradient(90deg,#60a5fa,#8b5cf6);color:white;padding:4px 10px;border-radius:20px;font-size:15px;font-weight:bold;margin-right:10px;}

/* 整个滚动条 */
::-webkit-scrollbar{width:12px; /* 滚动条的宽度 */height:12px; /* 滚动条的高度 */}

/* 滚动条轨道 */
::-webkit-scrollbar-track{background:#313030; /* 轨道颜色 */}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb{background:#555; /* 滑块颜色 */border-radius:10px; /* 滑块圆角 */}

/* 滑块悬停时 */
::-webkit-scrollbar-thumb:hover{background:#555; /* 滑块悬停时的颜色 */}
.empty-state{text-align:center;padding:40px 20px;color:#94a3b8;}
.empty-state i{font-size:3rem;margin-bottom:15px;opacity:0.5;}
.empty-state p{font-size:1.1rem;}
.shiwan-icon{position:absolute;left:28%;width:90px;top:-5px}

/*右侧浮动的公众号*/
#qr-sidebar{position:fixed;top:70%;right:10px;transform:translateY(-50%);width:150px;background:linear-gradient(135deg,#1a1a2e 0%,#16213e 100%);border-radius:12px;padding:10px;box-shadow:0 10px 25px rgb(255 255 255 / 30%);z-index:1000;border:2px solid #ffffff;text-align:center;transition:all 0.3s ease}
#qr-sidebar:hover{transform:translateY(-50%) scale(1.05);box-shadow:0 15px 30px rgba(81,81,112,0.5)}
#qr-sidebar h3{font-size:16px;margin-bottom:10px;color:#FF9800;font-weight:600}
.qr-code{width:120px;height:120px;background-color:#fff;padding:5px;border-radius:8px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center}
.qr-placeholder{width:110px;height:110px;position:relative;display:flex;align-items:center;justify-content:center}
.qr-text{font-size:13px;line-height:1.4;margin-bottom:8px}
.qr-highlight{color:#FF9800;font-weight:600}

.input-disabled{opacity: 1;cursor: not-allowed;background-color: #1c2638;border-color: #404c5f;color: #ffffff;}
.input-disabled:focus{background-color: #1c2638;border-color: #404c5f;cursor: not-allowed;box-shadow:none;}

@media (max-width:768px){
     .baotiH3{font-size: 20px;}
    .game-container{width: 100%;max-width: 100%;padding: 0;margin: 0;flex-direction: column-reverse;}
    .grid-container{width: 100%;padding: 5px;}
    .main-panel{width: 100%}
    .stats{display: none}
    .shiwan-icon{position: absolute;left: 15%;width: 40px;top:-3px;}
    .grid{margin: 0 auto}
    .grid-backpack{width:375px;height:375px;padding:0;margin-top:0;}
    .save-actions button{padding: 4px 10px;font-size: 12px;}
    .cell-start::after{font-size: 18px;}
    .cell-end::after{font-size: 18px;}
    h1{font-size:18px;margin-bottom:3px;}
    .instructions ul{grid-template-columns:1fr;}
    .stat-item{min-width:110px;padding:10px;}
    .stat-label{font-size:14px}
    .stat-value{font-size:16px;margin-top:0;}
    .btn-group{flex-wrap:nowrap;margin-top: 0}
    .btn{min-width:88px;padding:5px 10px;font-size:12px;}
    .equipment-item{width: 56px;padding: 0;background: none;}
    .equipment-image{width: 56px;height: 56px;padding: 4px;margin-bottom: 0;}
    #qr-sidebar{display:none}
    .equipment-name{font-size:12px;}
    .equipment-list{gap: 6px;height: 202px;align-content: flex-start;padding: 12px 6px}
    .equipment-rarity{display: none}
    .equipment-size{display: none}
    .history-content{padding:5px;height: 400px;flex: unset;}
    .section-title{margin-bottom:0;padding:5px 25px;font-size:15px;display: none}
    .subtitle ul li{font-size:12px;padding:3px 7px;}
    header{margin:10px 0;width: 100%}
    body::before {background-image: none;position: unset}
    .equipment-name{display: none}
    .full-bag-message{width: 100%}
    .bag-full-box{padding: 10px; /* 移动端增大内边距 */border-radius:12px;flex-direction: column; /* 增大圆角 */}
    .bag-full-info ul li{width:100%;   margin-right:0; }
    .bag-full-qrcode img{width:140px;height:140px;}
    .bag-full-info-actions {display: flex;flex-direction: column;}
    .bag-full-details{width: 100%}
    .bag-full-actions{display: flex;justify-content: space-between;margin: 0;text-align: left;width: 100%;}
    .bag-full-actions p{width: 100%}
    .bag-full-info{margin-bottom: 0;width: 100%;}
    .bag-full-info ul li:last-child{width: 100%}
    button {font-size: 12px;padding: 7px;}
    .equipment-panel{height: auto;}

}