/* Caedrel vs One Hundred - modals, toast, effects (V0.2, extracted unchanged from V0.1) */

/* MODAL */
.modal{position:fixed;inset:0;background:rgba(2,4,14,.82);z-index:100;display:none;align-items:flex-start;justify-content:center;overflow:auto;padding:40px 16px}
.modal.open{display:flex}
.box{background:var(--navy2);border:1px solid var(--gold);border-radius:10px;max-width:560px;width:100%;padding:26px;position:relative;box-shadow:0 30px 100px rgba(0,0,0,.7)}
.box.wide{max-width:940px}
.box h3{font-size:36px;margin-bottom:6px}
.x-close{position:absolute;right:14px;top:10px;background:none;border:0;color:var(--muted);font-size:28px;cursor:pointer}
.tabs{display:flex;gap:6px;margin:14px 0;flex-wrap:wrap}
.pane{display:none}.pane.on{display:block}
.mini{font-size:12px;color:var(--muted);margin-top:6px}
.danger{background:#7d0620}

/* TOAST + FX */
#toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,40px);background:#fff;color:#111;padding:12px 20px;border-radius:6px;font-weight:700;z-index:300;opacity:0;transition:.3s;pointer-events:none;max-width:90vw;text-align:center}
#toast.show{opacity:1;transform:translate(-50%,0)}
#fx{position:fixed;inset:0;pointer-events:none;z-index:250}
.shake{animation:shake .5s}
@keyframes shake{0%,100%{transform:none}20%{transform:translateX(-10px)}40%{transform:translateX(9px)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}
.glitch{animation:glitch .7s}
@keyframes glitch{0%,100%{filter:none}20%{filter:hue-rotate(90deg) saturate(2)}40%{filter:invert(.15)}60%{filter:hue-rotate(-60deg)}}