#modal.effects-modal .panel{width:min(800px,100%);padding:16px 20px}
#modal.effects-modal .panel-top,#modal.effects-modal #modal-title{display:none}
.effects-browser{--effect-line:#61303a;--effect-light:#e6a0a7}
.effects-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:16px}
#modal .effects-heading{margin:0;color:#e3c3bf;font:20px/1.4 'Yume Pixel',monospace}
.effects-views{display:flex;gap:5px;margin-left:auto}
#modal .effects-toolbar button,#modal .effects-carousel-nav button{display:grid;place-items:center;width:38px;height:36px;min-height:36px;padding:0;border:1px solid #61303a;background:#100c11;color:#d4a2ab;font-size:22px}
#modal .effects-view[aria-pressed=true]{border-color:#be777d;background:#421720}
.effects-view-icon{width:18px;height:18px;image-rendering:pixelated}
.effects-gallery{display:grid;gap:4px;grid-template-columns:repeat(10,minmax(0,1fr));align-items:stretch}
#modal .effect-choice{position:relative;min-width:0;padding:0;border:1px solid #61303a;background:#08080b;color:#d4b2b1;overflow:hidden}
.effects-browser[data-view=grid] .effects-gallery{grid-template-columns:repeat(10,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr))}
.effect-empty{min-width:0;aspect-ratio:1;border:1px solid #38222b;background:#08080b}
.effects-browser[data-view=carousel] .effect-empty{display:none}
#modal .effect-choice[aria-pressed=true]{background:#21131d;border-color:#b96f7c;box-shadow:inset 0 -3px #9e5966}
#modal .effect-choice.is-current{outline:2px solid #e6a0a7;outline-offset:-2px}
.effect-character{display:block;width:100%;image-rendering:pixelated}
.effect-badge{position:absolute;right:6px;bottom:6px;width:24px;height:24px;image-rendering:pixelated;background:#110b10d9;border:1px solid #61303a;box-sizing:content-box}
.effects-browser[data-view=grid] .effect-badge{right:2px;bottom:2px;width:clamp(10px,2vw,20px);height:auto}
.effect-name{position:absolute;bottom:5px;left:4px;right:4px;font:13px/1.2 'Yume Pixel',monospace;text-align:center}
.effects-browser[data-view=carousel] .effects-gallery{height:260px;display:grid;grid-template-columns:minmax(0,1fr) 218px minmax(0,1fr);gap:16px;overflow:hidden}
.effects-browser[data-view=carousel] .effect-choice{width:168px;opacity:.5;grid-row:1;grid-column:1;justify-self:end;transform:scale(.85)}
.effects-browser[data-view=carousel] .effect-choice.is-current{width:218px;opacity:1;transform:none;grid-column:2}
.effects-browser[data-view=carousel] .effect-choice.is-next{grid-column:3;justify-self:start}
.effects-carousel-nav{display:flex;justify-content:center;align-items:center;gap:20px;margin-top:2px}
.effects-position{color:#ae858c;font:12px 'Yume Pixel',monospace;min-width:38px;text-align:center}
#modal .effects-description{margin:12px 0 8px;min-height:40px;font:13px/1.5 'Yume Pixel',monospace;text-align:center}
.effects-actions{display:flex;justify-content:center}
#modal .effects-use{min-width:140px;padding:7px 20px;border:1px solid #61303a;background:#21131d;color:#e3c3bf;font:14px 'Yume Pixel',monospace}
#modal .effects-use:disabled{opacity:.55;cursor:default}
.effects-shortcut-heading{font:13px 'Yume Pixel',monospace;color:#ae858c;margin:18px 0 8px}
.effects-shortcuts{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:5px}
#modal .effect-shortcut{position:relative;height:58px;min-width:0;padding:20px 0 3px;display:grid;place-items:center;border:1px solid #61303a;background:#08080b}
.effect-shortcut-key{position:absolute;left:5px;top:4px;color:#be929a;font:12px/1 'Yume Pixel',monospace}
.effect-shortcut-icon{width:24px;height:24px;image-rendering:pixelated}
.effect-drag-icon{position:fixed;z-index:100;pointer-events:none;width:48px;height:48px;image-rendering:pixelated;filter:drop-shadow(2px 3px 0 #000)}
.effects-browser[data-view=grid]:not(.is-mobile) .effect-choice{touch-action:none}
#modal .effect-shortcut.is-target{border-color:#f3b6c0;background:#4c2539;box-shadow:inset 0 0 0 2px #9b5f74,0 0 10px #ae566755}
#modal .effects-instruction{min-height:32px;margin:12px 0 0;text-align:center;color:#ae858c;font:12px/1.5 'Yume Pixel',monospace}
#modal .effects-browser button:focus{outline:2px solid #e6a0a7;outline-offset:-2px}
.effects-browser [hidden]{display:none!important}
@media(max-width:600px){#modal.effects-modal .panel{padding:12px}.effects-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.effects-browser[data-view=carousel] .effects-gallery{height:220px;grid-template-columns:minmax(0,1fr) 166px minmax(0,1fr);gap:0}.effects-browser[data-view=carousel] .effect-choice{width:74px;transform:none}.effects-browser[data-view=carousel] .effect-choice.is-current{width:166px}.effects-browser[data-view=carousel] .effect-choice:not(.is-current) .effect-name{display:none}.effects-shortcuts{grid-template-columns:repeat(5,minmax(0,1fr))}.effects-toolbar{gap:8px}.effects-gallery .effect-character{max-height:160px;width:100%;object-fit:contain}#modal .effects-heading{font-size:16px}}
@media(max-height:450px) and (min-width:601px){.effects-browser[data-view=carousel] .effects-gallery{height:170px;grid-template-columns:minmax(0,1fr) 135px minmax(0,1fr)}.effects-browser[data-view=carousel] .effect-choice{width:104px}.effects-browser[data-view=carousel] .effect-choice.is-current{width:135px}.effects-toolbar{margin-bottom:8px}.effect-character{max-height:110px;object-fit:contain}#modal .effects-description{min-height:0;margin:8px 0}}
