/* the special items (js/specialfx.js, 2026-10-24): the character page's three slots and the slot picker */
#charpanel .bk .bk-spslots { position: absolute; left: 584px; top: 330px; width: 52px; display: flex; flex-direction: column; align-items: center; gap: 6px; z-index: 6; }
#charpanel .bk .bk-spslots .bk-sph { font: 600 11px/1.1 'Mali', sans-serif; color: #ffe9a8; text-align: center; background: rgba(14, 10, 7, 0.78); border-radius: 6px; padding: 2px 4px; }
#charpanel .bk .bk-spslots .bk-sp { position: relative; width: 50px; height: 50px; padding: 0; cursor: pointer; border: 0; border-radius: 10px; display: grid; place-items: center; min-width: 50px; flex: none;
  background: radial-gradient(circle, #3a2d1c 0, #17120c 75%) !important; box-shadow: inset 0 0 0 2px #c9953d, 0 2px 4px rgba(0, 0, 0, 0.5); }
#charpanel .bk .bk-spslots .bk-sp img { width: 44px; height: 44px; object-fit: contain; }
#charpanel .bk .bk-spslots .bk-sp i { font: 700 24px/1 'Fredoka', sans-serif; font-style: normal; color: #e9c46a; }
#charpanel .bk .bk-spslots .bk-sp small { font: 600 11px/1 'Fredoka', sans-serif; color: #d8c9a8; }
#charpanel .bk .bk-spslots .bk-sp.lock { box-shadow: inset 0 0 0 2px #6b5a3f; filter: grayscale(0.6); }
#charpanel .bk .bk-spslots .bk-sp.dim img { opacity: 0.4; }
#charpanel .bk .bk-spslots .bk-sp:hover { filter: brightness(1.18); }
#sppick { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; background: rgba(6, 4, 8, 0.6); }
#sppick[hidden] { display: none; }
#sppick .spk-in { width: min(560px, 94vw); max-height: 86vh; display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 16px;
  background: linear-gradient(180deg, #241c2a, #17121b); border: 1px solid #c9953d; color: #efe8f4; font: 15px/1.45 'Mali', 'Sarabun', sans-serif; }
#sppick .spk-head { display: flex; align-items: baseline; gap: 10px; }
#sppick .spk-head b { font-size: 20px; color: #ffdf8e; }
#sppick .spk-head small { color: #b3a8bd; flex: 1; }
#sppick .spk-x { border: 0; background: #3a3040; color: #fff; width: 34px; height: 34px; border-radius: 10px; font-size: 18px; cursor: pointer; }
#sppick .spk-list { overflow: auto; display: flex; flex-direction: column; gap: 8px; }
#sppick .spk-row, #sppick .spk-cur { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; background: #140f18; border: 1px solid #2e2534; }
#sppick .spk-cur { border-color: #e9c46a; background: #2a2015; }
#sppick .spk-row.on { border-color: #e9c46a; }
#sppick .spk-card { flex: 1; display: flex; gap: 10px; align-items: center; }
#sppick .spk-card img { width: 64px; height: 64px; object-fit: contain; flex: none; border-radius: 12px; background: radial-gradient(circle, #4a2f22 0, #1a1214 70%); }
#sppick .spk-card b { color: #ffdf8e; font-size: 16px; }
#sppick .spk-card small { display: block; color: #b3a8bd; font-size: 12px; }
#sppick .spk-card ul { margin: 3px 0 0; padding-left: 16px; font-size: 13px; }
#sppick .spk-btns { display: flex; flex-direction: column; gap: 6px; }
#sppick .spk-btn { border: 0; border-radius: 10px; padding: 10px 14px; font: 700 15px/1 'Mali', sans-serif; cursor: pointer; color: #1b130a; background: linear-gradient(#ffe39a, #d9a640); white-space: nowrap; }
#sppick .spk-btn.off { background: #5a4b60; color: #fff; }
#sppick .spk-btn.wide { width: 100%; }
#sppick .spk-btn:disabled { opacity: 0.55; cursor: default; }
#sppick .spk-none { color: #b3a8bd; text-align: center; margin: 12px 0; }
/* the phone layout's three special slots (js/mobilepad.js): squares like the PC row */
#mpad .mp-sp { border-radius: 22%; background: linear-gradient(#2a2118, #120d09); box-shadow: inset 0 0 0 2px #d9a643, 0 2px 4px rgba(0, 0, 0, 0.5); }
#mpad .mp-sp::after { display: none; }
#mpad .mp-sp > canvas { border-radius: 16%; inset: 10%; width: 80%; height: 80%; }
#mpad .mp-sp .mp-cd { border-radius: 22%; }
#mpad .mp-sp.lock { opacity: 0.55; }
#mpad .mp-sp.lock .mp-cnt { font-size: calc(10px * var(--s)); }
#mpad .mp-sp.out > canvas { opacity: 0.4; }