/* Matte spellbook drawer. Transparent generated art; animation stays on transforms. */
#magic-root{--magic-ink:#173c42;--magic-paper:#e9e2c9;--magic-teal:#2d777c;position:fixed;inset:0;z-index:1200;display:grid;align-items:end;justify-items:center;padding:16px;background:rgba(10,31,37,.68);color:var(--magic-ink);font-family:inherit;isolation:isolate;animation:magic-veil-in .2s ease both}
#magic-root *{box-sizing:border-box}
#magic-root [hidden]{display:none!important}
.magic-dialog{position:relative;display:flex;flex-direction:column;width:min(760px,100%);max-height:calc(100dvh - 32px);overflow:hidden;border:2px solid #50665c;border-radius:30px 30px 22px 22px;background:#e9e2c9;box-shadow:0 16px 0 rgba(7,31,37,.16);animation:magic-book-in .42s cubic-bezier(.2,.85,.3,1) both}
.magic-close{position:absolute;right:17px;top:15px;z-index:4;width:42px;height:42px;border:1px solid #b2b69e;border-radius:50%;background:#dad7bd;color:#23464a;font-family:inherit;font-size:32px;line-height:1;cursor:pointer}
.magic-heading{display:flex;align-items:center;justify-content:center;gap:15px;padding:21px 62px 0 24px;min-height:114px}
.magic-heading .magic-book-art{width:102px;height:93px;object-fit:contain;flex:0 0 auto;user-select:none}
.magic-eyebrow{font-size:10px;letter-spacing:2px;font-weight:800;color:#637466}
.magic-heading h2{font-size:29px;line-height:1.15;margin:5px 0 7px;font-weight:800;color:#173c42}
.magic-heading p{font-size:12px;color:#5f7165;margin:0;line-height:1.5}
.magic-status{min-height:36px;margin:8px 24px 0;text-align:center;font-size:12px;line-height:1.5;color:#4b6a60;display:flex;align-items:center;justify-content:center}
.magic-unavailable .magic-status{color:#806849}
.magic-wheel-shell{position:relative;min-height:0;flex:1 1 auto}
.magic-wheel{--magic-card-width:180px;position:relative;display:flex;gap:18px;align-items:flex-start;height:350px;padding:31px max(0px,calc((100% - var(--magic-card-width))/2)) 48px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;touch-action:pan-x;perspective:1000px;-webkit-overflow-scrolling:touch;scroll-padding-inline:max(0px,calc((100% - var(--magic-card-width))/2));outline-offset:-8px}
.magic-wheel::-webkit-scrollbar{display:none}
.magic-card-slot{position:relative;flex:0 0 var(--magic-card-width);width:var(--magic-card-width);height:258px;scroll-snap-align:center;scroll-snap-stop:normal;transform:translateY(var(--fan-drop,0px)) rotate(var(--fan-angle,0deg)) scale(var(--fan-scale,1));transform-origin:50% 115%;transition:transform .16s ease-out;will-change:transform}
.magic-card{display:block;width:100%;height:100%;padding:0;border:0;background:transparent;color:var(--magic-ink);font-family:inherit;cursor:pointer;perspective:1000px;text-align:center;touch-action:pan-x;-webkit-tap-highlight-color:transparent;user-select:none}
.magic-card-turn{display:block;position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.75,.3,1)}
.magic-card.is-flipped .magic-card-turn{transform:rotateY(180deg)}
.magic-card-face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;overflow:hidden;padding:13px 12px 11px;border:3px solid #44686a;border-radius:17px;background:#d3e0d4;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 5px 0 #a6b4a5}
.magic-card-selected .magic-card-face{border-color:#32797c}
.magic-center .magic-card-face{border-color:#235e67}
.magic-card-label{display:block;flex:0 0 auto;font-size:8px;line-height:1.3;letter-spacing:1.2px;font-weight:800;color:#526e67}
.magic-card-art{display:block;flex:1 1 auto;width:145px;min-height:127px;margin:7px auto 2px;background-repeat:no-repeat;background-color:transparent!important;pointer-events:none}
.magic-card-face strong{display:block;font-size:16px;line-height:1.12;font-weight:800;color:#183e43;margin:4px 0 7px;max-width:100%}
.magic-card-power{font-size:10px;font-weight:700;color:#497069}
.magic-read-hint{font-size:8px;color:#62786e;line-height:1.3;margin-top:9px}
.magic-card-back{transform:rotateY(180deg);background:#e4dcc0;padding:16px 15px 13px;border-color:#716f53}
.magic-card-back strong{font-size:17px;margin:17px 0 13px;color:#465b50}
.magic-description{font-size:11px;line-height:1.55;color:#4e665a;flex:1 1 auto;overflow:auto;max-height:122px}
.magic-rule{font-size:9px;line-height:1.5;color:#7a7559;padding-top:9px;border-top:1px solid #c0baa0;width:100%;margin-top:8px}
.magic-wheel-controls{display:flex;gap:13px;align-items:center;justify-content:center;height:30px;margin-top:-12px;position:relative;z-index:2}
.magic-wheel-controls button{display:grid;place-items:center;width:30px;height:30px;border:1px solid #a5b29b;border-radius:50%;background:#dadbc2;font-size:23px;color:#416559;cursor:pointer}
.magic-counter{font-size:10px;font-variant-numeric:tabular-nums;color:#63766a;min-width:40px;text-align:center}
.magic-footer{padding:15px 24px 20px;text-align:center;border-top:1px solid #c6ccb7;margin-top:12px;background:#e3dfc6}
.magic-selected-name{font-size:13px;color:#31574e}
.magic-footer p{font-size:12px;line-height:1.5;margin:6px 0 12px;color:#4e665a}
.magic-cast{min-width:180px;min-height:43px;padding:12px 25px;border:1px solid #1e5964;border-radius:12px;background:#377a7e;color:#f1edda;font-family:inherit;font-size:13px;font-weight:800;cursor:pointer;box-shadow:0 3px 0 #215962;transition:transform .16s,background .16s}
.magic-cast:hover:not(:disabled){background:#3e8488;transform:translateY(-1px)}
.magic-cast:active:not(:disabled){transform:translateY(2px);box-shadow:none}
.magic-cast:disabled{cursor:not-allowed;background:#a9b5a4;color:#eff0df;border-color:#92a18e;box-shadow:0 3px 0 #929d8a}
.magic-footer small{display:block;font-size:9px;line-height:1.5;color:#7b8573;margin-top:12px}
.magic-empty{text-align:center;padding:5px 26px 22px;min-height:290px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.magic-empty img{width:185px;height:145px;object-fit:contain}
.magic-empty h3{font-size:18px;color:#365b50;margin:7px 0 11px}
.magic-empty p{font-size:12px;line-height:1.7;color:#637567;margin:0}
#magic-root button:focus-visible,.magic-wheel:focus-visible{outline:3px solid #b07536;outline-offset:4px}
.magic-reduce-motion,.magic-reduce-motion *,body.reduce-motion #magic-root,body.reduce-motion #magic-root *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@keyframes magic-veil-in{from{opacity:0}to{opacity:1}}
@keyframes magic-book-in{from{transform:translateY(70px);opacity:0}to{transform:translateY(0);opacity:1}}
@media(min-width:850px){#magic-root{align-items:center}.magic-dialog{border-radius:30px}.magic-wheel{height:370px;padding-top:41px}.magic-heading{padding-top:25px}.magic-heading h2{font-size:33px}.magic-card-slot{height:267px}}
@media(max-width:480px){#magic-root{padding:6px}.magic-dialog{max-height:calc(100dvh - 12px);border-radius:25px 25px 14px 14px}.magic-heading{gap:7px;padding:14px 47px 0 16px;min-height:93px}.magic-heading .magic-book-art{width:78px;height:78px}.magic-heading h2{font-size:24px}.magic-heading p{font-size:10px}.magic-heading .magic-eyebrow{font-size:8px}.magic-close{width:35px;height:35px;right:12px;top:12px}.magic-status{font-size:10px;margin:4px 20px 0;min-height:30px}.magic-wheel{--magic-card-width:164px;height:317px;padding-top:27px;gap:14px}.magic-card-slot{height:239px}.magic-card-art{width:132px;min-height:112px}.magic-card-face strong{font-size:14px}.magic-card-back strong{margin-top:12px}.magic-footer{padding:12px 15px 16px;margin-top:8px}.magic-footer p{font-size:11px}.magic-footer small{font-size:8px;margin-top:9px}.magic-empty{min-height:260px}}
@media(max-height:710px){.magic-heading{min-height:77px;padding-top:10px}.magic-heading .magic-book-art{width:64px;height:64px}.magic-heading h2{font-size:23px}.magic-heading p{display:none}.magic-status{min-height:28px;margin-top:2px}.magic-wheel{height:280px;padding-top:20px;--magic-card-width:150px;gap:15px}.magic-card-slot{height:218px}.magic-card-art{width:116px;min-height:92px}.magic-card-face strong{font-size:13px}.magic-card-face{padding:10px}.magic-card-back strong{margin:10px 0 9px}.magic-description{font-size:10px}.magic-read-hint{font-size:7px;margin-top:6px}.magic-footer{padding:10px 15px 14px;margin-top:6px}.magic-footer small{display:none}.magic-footer p{margin:5px 0 9px;font-size:10px}.magic-empty{min-height:220px}.magic-empty img{height:105px}}
@media(prefers-reduced-motion:reduce){#magic-root,#magic-root *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}