body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}
.btn{border-radius:.5rem;font-weight:600;padding:.5rem 1rem;background:#e5e7eb;transition:filter .15s ease, transform .05s ease}
.btn-primary{background:var(--btn-primary-bg, #0a84ff);color:#fff}
.btn-secondary{background:var(--btn-secondary-bg, #e5e5ea);color:var(--text-color-primary, #1f2937)}
.btn:hover{filter:brightness(.98)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.6;cursor:not-allowed;filter:saturate(0.7)}
.game-container{position:relative;width:100%;max-width:960px;margin:0 auto;background:var(--card-bg,#FFF8E1);border-radius:1rem;border:1px solid var(--card-border, rgba(0,0,0,.1));padding:12px}
.game-canvas{width:100%;height:56vh;max-height:calc(100vh - 220px);min-height:240px;background:#f8fafc;border-radius:.75rem;display:block}
.slot-bar{margin-top:12px;min-height:64px;background:var(--card-bg,#f1f5f9);border:1px solid var(--card-border, rgba(0,0,0,.06));border-radius:.75rem;display:flex;flex-wrap:nowrap;gap:8px;align-items:center;padding:8px}
.slot-bar::-webkit-scrollbar{display:none}
.slot-bar{scrollbar-width:none}
.slot-item{width:48px;height:48px;border:2px solid #cbd5e1;border-radius:.5rem;display:flex;align-items:center;justify-content:center;background:var(--card-bg,#FFF8E1)}
.slot-item.near{box-shadow:0 0 0 2px rgba(14,165,233,.35) inset}
.slot-item.empty{background:#fff1e6;border-style:dashed;color:#cbd5e1}
.slot-emoji{font-size:24px;line-height:1}

/* 增加道具内置面板 */
.controls{position:relative}
.add-panel.hidden{display:none}
.add-panel{position:absolute;top:100%;right:0;margin-top:.5rem;background:#fff;border:1px solid rgba(0,0,0,.1);border-radius:.5rem;box-shadow:0 10px 20px rgba(0,0,0,.08);padding:.25rem;z-index:20}
.add-panel .menu-item{display:block;width:100%;text-align:left;padding:.5rem .75rem;border-radius:.375rem}
.add-panel .menu-item:hover{background:#f1f5f9}

/* Toast 样式 */
.toast-container{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;z-index:50}
.toast{min-width:200px;max-width:90vw;background:#111827;color:#fff;padding:.5rem .75rem;border-radius:.5rem;box-shadow:0 8px 20px rgba(0,0,0,.2);opacity:.98}
.toast.success{background:#059669}
.toast.error{background:#dc2626}
.toast.warn{background:#d97706}
.toast.info{background:#2563eb}

/* 槽位预警态 */
.slot-bar.warning{box-shadow:0 0 0 2px #f59e0b inset;animation:slotPulse 1s ease-in-out infinite}
@keyframes slotPulse{0%{box-shadow:0 0 0 1px #f59e0b inset}50%{box-shadow:0 0 0 2px #fbbf24 inset}100%{box-shadow:0 0 0 1px #f59e0b inset}}

/* 槽位项弹入动效 */
.slot-item{animation:slotPop 160ms ease}
@keyframes slotPop{0%{transform:scale(.92);opacity:.0}70%{transform:scale(1.04);opacity:1}100%{transform:scale(1)} }

/* HUD 胶囊样式与预警态 */
.hud-pill{display:inline-flex;align-items:center;gap:6px;padding:.2rem .5rem;border-radius:9999px;border:1px solid var(--card-border, rgba(0,0,0,.1));background:var(--card-bg,#fff);font-size:.875rem}
.hud-pill .icon{width:16px;height:16px;display:inline-block}
.hud-pill.warning{animation:hudPulse 1.2s ease-in-out infinite;border-color:#f59e0b}
@keyframes hudPulse{0%{box-shadow:0 0 0 0 rgba(245,158,11,.35)}70%{box-shadow:0 0 0 6px rgba(245,158,11,.0)}100%{box-shadow:0 0 0 0 rgba(245,158,11,.0)}}

/* 按钮内图标尺寸 */
.btn .icon{width:18px;height:18px;vertical-align:middle}

/* 顶部粘性压缩态 */
.site-header{position:sticky;top:0;z-index:40;backdrop-filter:saturate(120%) blur(6px)}
.site-header .wrap{transition:padding .15s ease}
.site-header.header-compact .wrap{padding-top:.5rem;padding-bottom:.5rem}

@media (max-width: 640px){
  .btn{padding:.45rem .7rem}
  .slot-bar{gap:6px;padding:6px; overflow-x:auto; white-space:nowrap}
  /* 缩小槽位图标，提升可视区域 */
  .slot-item{width:34px;height:34px}
  .slot-emoji{font-size:18px}
  /* 减少容器与页面的左右边距，给画布更多空间 */
  .game-container{padding:4px}
  main{padding-left:4px;padding-right:4px}
  /* 手机端画布优化：更紧凑的布局 */
  .game-canvas{border-radius:8px}
  /* 确保画布能使用全部可用宽度 */
  .game-canvas{width:100%;box-sizing:border-box}
}

/* Android设备特殊优化 */
@media (max-width: 640px) {
  /* 检测Android设备并应用更保守的边距 */
  .game-container {
    /* Android设备使用更大的内边距，与JavaScript保持一致 */
    padding: 8px;
  }

  /* 确保画布有足够的安全区域 */
  .game-canvas {
    /* 添加微小的内边距作为安全区域 */
    padding: 2px;
    box-sizing: border-box;
  }
}

@media (min-width: 641px) and (max-width: 768px){
  /* 平板竖屏优化 */
  .game-container{padding:12px}
  .game-canvas{border-radius:10px}
}

@media (min-width: 769px) and (max-width: 1024px){
  /* 平板横屏优化 */
  .game-container{padding:16px}
  .game-canvas{border-radius:12px}
}

@media (min-width: 1024px){
  .game-canvas{height:60vh}
}