/* v5p: spell / ability picker (combat hit form + quick popup), custom spell editor */
.spk-row{display:flex;gap:6px;align-items:stretch}
.spk-b{flex:1;min-width:0;display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:10px;border:1px dashed color-mix(in srgb,var(--line) 80%,#b98cff);background:color-mix(in srgb,var(--panel2,var(--panel)) 80%,transparent);color:var(--text);font:600 13px var(--body);cursor:pointer;text-align:left}
.spk-b svg{flex:none}.spk-b span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.spk-b small{color:var(--muted);font-weight:600}.spk-b i{font-style:normal;opacity:.6}
.spk-b.on{border-style:solid;border-color:color-mix(in srgb,var(--sc,#b98cff) 70%,transparent);background:linear-gradient(90deg,color-mix(in srgb,var(--sc,#b98cff) 22%,transparent),transparent 80%);box-shadow:inset 3px 0 0 var(--sc,#b98cff)}
.spk-b:hover{border-color:var(--sc,#b98cff)}
.spk-x{flex:none;width:34px;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer;font-size:14px}.spk-x:hover{color:var(--bad);border-color:var(--bad)}
.spk{margin:6px 0 8px;padding:8px;border-radius:12px;border:1px solid var(--line);background:color-mix(in srgb,var(--bg2,var(--panel)) 88%,transparent);animation:spkIn .18s ease-out}
@keyframes spkIn{from{opacity:0;transform:translateY(-4px)}}
.spk-top{display:flex;gap:6px}.spk-q{flex:1;min-width:0;padding:7px 10px;border-radius:9px;border:1px solid var(--line);background:var(--panel);color:var(--text);font:600 13px var(--body)}
.spk-q:focus{outline:2px solid color-mix(in srgb,var(--gold) 60%,transparent);outline-offset:0}
.spk-gs{display:flex;flex-wrap:wrap;gap:4px;margin:7px 0}
.spk-gb{padding:4px 9px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--muted);font:700 11px var(--body);cursor:pointer;white-space:nowrap}
.spk-gb.on{background:color-mix(in srgb,var(--gold) 22%,transparent);color:var(--text);border-color:color-mix(in srgb,var(--gold) 60%,transparent)}
.spk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:6px;max-height:260px;overflow:auto;overscroll-behavior:contain;padding:2px;scrollbar-width:thin}
.spk-c{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 5px 7px;border-radius:10px;border:1px solid color-mix(in srgb,var(--sc,#888) 35%,var(--line));
  background:radial-gradient(120% 90% at 50% 0,color-mix(in srgb,var(--sc,#888) 18%,transparent),transparent 70%),var(--panel);color:var(--text);font:600 12px/1.15 var(--body);cursor:pointer;text-align:center;transition:transform .12s,border-color .12s,box-shadow .12s}
.spk-c[hidden],.spk-none[hidden]{display:none}
.spk-c:hover,.spk-c:focus-visible{transform:translateY(-2px);border-color:var(--sc,#888);box-shadow:0 4px 14px color-mix(in srgb,var(--sc,#888) 35%,transparent);outline:0}
.spk-c.on{border-color:var(--sc,#888);box-shadow:0 0 0 2px color-mix(in srgb,var(--sc,#888) 55%,transparent)}
.spk-c b{font-size:12px;word-break:break-word;hyphens:auto}.spk-c small{display:flex;align-items:center;gap:3px;justify-content:center;flex-wrap:wrap;color:var(--muted);font-size:10.5px}.spk-c small i{font-style:normal;color:var(--sc,#888)}
.spk-c small svg{width:11px;height:11px}
.spk-i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:color-mix(in srgb,var(--sc,#888) 16%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sc,#888) 45%,transparent)}
.spk-c:hover .spk-i svg{animation:spkPulse .8s ease-in-out infinite}
@keyframes spkPulse{50%{transform:scale(1.14);filter:drop-shadow(0 0 4px var(--sc,#fff))}}
.spk-new{border-style:dashed;--sc:#ffd27a}
.spk-ed{position:absolute;top:3px;right:5px;font-size:12px;opacity:.7;padding:2px}.spk-ed:hover{opacity:1;color:var(--gold)}
.spk-none{grid-column:1/-1;text-align:center;padding:14px;color:var(--muted)}
.spk-aoe{margin:4px 0 6px;padding:6px 9px;border-radius:9px;font-size:12px;color:var(--text);background:color-mix(in srgb,#ff9a3c 12%,transparent);border:1px solid color-mix(in srgb,#ff9a3c 40%,transparent)}
.spl-ic{display:inline-flex;vertical-align:-3px}
/* quick popup is narrow */
#cbq .spk-grid{grid-template-columns:repeat(auto-fill,minmax(92px,1fr));max-height:210px}
#cbq .spk-c{padding:6px 4px}#cbq .spk-i{width:28px;height:28px}#cbq .spk-c b{font-size:11px}
#cbq .spk-b{padding:6px 8px;font-size:12px}
/* custom spell editor */
.spl-ed{position:fixed;inset:0;z-index:120;display:grid;place-items:center;background:rgba(0,0,0,.45);padding:12px}
.spl-ed-b{width:min(420px,100%);max-height:calc(100vh - 24px);overflow:auto;padding:14px;border-radius:14px;background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);color:var(--text);font:600 13px var(--body);display:flex;flex-direction:column;gap:9px}
.spl-ed-h{display:flex;align-items:center;gap:8px}.spl-ed-h b{flex:1;font:700 15px var(--head)}
.spl-ed-x{border:0;background:transparent;color:var(--muted);font-size:16px;cursor:pointer}
.spl-ed label{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0;font-size:12px;color:var(--muted)}
.spl-ed input,.spl-ed select{padding:7px 9px;border-radius:8px;border:1px solid var(--line);background:var(--bg2,var(--panel2));color:var(--text);font:600 13px var(--body);min-width:0}
.spl-ed input[type=color]{padding:2px;height:34px}
.spl-ed-r{display:flex;gap:8px}
.spl-ed-l{font-size:12px;color:var(--muted)}
.spl-ed-ic{display:grid;grid-template-columns:repeat(auto-fill,minmax(36px,1fr));gap:4px}
.spl-ed-ic button{height:36px;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--text);cursor:pointer;display:grid;place-items:center}
.spl-ed-ic button.on{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 20%,transparent)}
.spl-ed-f{display:flex;gap:8px;align-items:center}.spl-ed-f .sp{flex:1}
.potato .spk,.potato .spk-c,.potato .spk-c:hover .spk-i svg{animation:none;transition:none}
@media (prefers-reduced-motion:reduce){.spk,.spk-c:hover .spk-i svg{animation:none}}
@media (max-width:620px){.spk-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));max-height:42vh}.spk-c{padding:7px 4px}.spk-q{font-size:16px}}