:root{--page:#0b0719;--panel:#17102e;--panel2:#211743;--ink:#faf8ff;--muted:#afa5c9;--line:#4a396d;--gold:#f5bd58;--accent:#51d8ed;--shadow:#0008;color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
    [data-theme="light"]{--page:#eaf1fb;--panel:#fff;--panel2:#f3f5fb;--ink:#211936;--muted:#6c647e;--line:#d7d1e4;--gold:#98600b;--accent:#087e9b;--shadow:#5d527022;color-scheme:light}
    *{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 50% -5%,#33205d 0,var(--page) 42%);color:var(--ink);font-size:16px}[data-theme="light"] body{background:radial-gradient(circle at 50% -5%,#fff 0,var(--page) 52%)}button{font:inherit;color:inherit;touch-action:manipulation}.app{max-width:880px;margin:auto;padding:14px 10px 110px}.top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:12px}.eyebrow{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:850;color:var(--gold)}h1{font-size:clamp(1.3rem,5vw,1.9rem);line-height:1.1;margin:.2rem 0}.sub{margin:0;color:var(--muted);font-size:.86rem}.theme-wrap{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:.75rem}.switch{width:52px;height:30px;border:1px solid var(--line);border-radius:99px;background:var(--panel2);padding:3px;position:relative}.switch span{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--ink);color:var(--page);font-size:.75rem;transition:.2s}.switch.on span{transform:translateX(20px)}.steps{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:12px}.step{border:1px solid var(--line);background:var(--panel);border-radius:12px;padding:9px 11px;text-align:left;color:var(--muted);font-size:.8rem}.step strong{display:block;color:var(--ink);font-size:.92rem}.step.active{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.view[hidden]{display:none}.board-card{border:1px solid #674e91;background:linear-gradient(180deg,#251746,#130c2d);border-radius:18px;padding:10px 6px 12px;box-shadow:0 16px 40px var(--shadow)}.board-head{display:flex;justify-content:space-between;gap:8px;color:#c9bde1;font-size:.76rem;padding:0 5px 9px}.game-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;align-items:end}.game-row+.game-row{border-top:1px solid #77609c66;margin-top:10px;padding-top:10px}.tube{min-width:0;border:0;background:none;padding:14px 1px 5px;position:relative;height:142px}.builder .tube{cursor:pointer}.builder .tube.selected{filter:drop-shadow(0 0 6px #52d9ed)}.tube-num{position:absolute;top:0;left:50%;transform:translateX(-50%);font-size:.62rem;color:#c9bde1}.badge{position:absolute;z-index:4;right:0;top:0;min-width:18px;height:18px;padding:1px 3px;border-radius:99px;border:1px solid #b694d2;background:#4f346e;font-size:.58rem;display:grid;place-items:center}.chest{height:122px;border:2px solid #d8a650;border-top:0;border-radius:3px 3px 15px 15px;background:linear-gradient(90deg,#70461799,#f5cb5c22,#70461799);padding:5px 2px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:2px}.tube.locked .chest{border-color:#dbaae1;background:linear-gradient(90deg,#642d6899,#f4c1f233,#642d6899)}.tube.frozen .chest{border-color:#72dafa;background:linear-gradient(90deg,#166e9999,#98efff33,#166e9999)}.slot{height:25px;width:100%;display:grid;place-items:center;position:relative}.empty{width:23px;height:21px;border:1px dashed #786b91;border-radius:5px;opacity:.45}
    .gem{--gem:#777;width:24px;height:25px;position:relative;display:grid;place-items:center;color:white;font-weight:950;font-size:.78rem;filter:drop-shadow(0 2px 2px #0008);clip-path:polygon(50% 0,85% 13%,100% 48%,77% 88%,50% 100%,23% 88%,0 48%,15% 13%);background:linear-gradient(135deg,#fff9 0 9%,transparent 10% 24%,#fff5 25% 31%,transparent 32%),linear-gradient(90deg,color-mix(in srgb,var(--gem),#000 22%),var(--gem) 45%,color-mix(in srgb,var(--gem),#fff 27%) 65%,color-mix(in srgb,var(--gem),#000 30%));border:1px solid color-mix(in srgb,var(--gem),#fff 35%)}.gem:before{content:"";position:absolute;inset:5px 7px 7px;clip-path:polygon(50% 0,100% 100%,0 100%);background:#fff3}.gem.hidden{--gem:#292633;font-size:1rem;text-shadow:0 1px 2px #000}.gem.hidden:after{content:"?";z-index:2}.gem.blue{--gem:#268ff0}.gem.cyan{--gem:#20cfdf}.gem.red{--gem:#ef3f47}.gem.pink{--gem:#f06caa}.gem.yellow{--gem:#f1c52d}.gem.green{--gem:#41bd50}.gem.magenta{--gem:#d52dae}.gem.purple{--gem:#794bd6}.lock-ring{position:absolute;width:34px;height:14px;border:2px solid #ffe7ff;border-radius:50%;box-shadow:0 0 5px #ffd2ff;z-index:3}.tube-done{position:absolute;bottom:0;left:50%;transform:translate(-50%,55%);font-size:.55rem;background:#173e32;color:#8ff0bd;border:1px solid #5dc997;border-radius:99px;padding:1px 4px}.editor{margin-top:12px;border:1px solid var(--line);background:var(--panel);border-radius:16px;padding:12px}.editor-head{display:flex;justify-content:space-between;align-items:center;gap:8px}.editor h2,.solver-card h2{font-size:1rem;margin:0}.hint{font-size:.78rem;color:var(--muted);margin:3px 0 0}.btn{min-height:44px;border:1px solid var(--line);background:var(--panel2);border-radius:11px;padding:9px 12px;font-weight:750}.btn.primary{color:white;border-color:#52d9ed;background:linear-gradient(135deg,#27b9d0,#4c75e8)}.btn:disabled{opacity:.42}.types{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:11px 0}.types .btn{font-size:.8rem;padding-inline:5px}.types .btn.active{border-color:var(--accent);background:#174155;color:white}.palette{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.palette .btn{min-width:0;padding:7px 2px;font-size:.7rem;display:grid;place-items:center;gap:3px}.palette .gem{width:29px;height:30px}.editor-actions{display:flex;gap:7px;margin-top:10px}.editor-actions .btn{flex:1}.bottom-action{position:fixed;z-index:8;bottom:calc(8px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(94%,560px);padding:7px;border:1px solid var(--line);background:color-mix(in srgb,var(--panel),transparent 8%);backdrop-filter:blur(15px);border-radius:15px;display:flex;gap:7px;box-shadow:0 12px 35px var(--shadow)}.bottom-action .btn{flex:1}.solver-card{margin-top:12px;border:1px solid var(--line);background:var(--panel);border-radius:16px;padding:12px}.next-move{margin-top:9px;padding:14px;border:1px solid #78609b;background:linear-gradient(135deg,#28194d,#15304d);border-radius:14px}.next-move small{color:#c7badf}.next-move strong{display:block;font-size:1.45rem;margin-top:3px}.solver-actions{display:grid;grid-template-columns:1.25fr .75fr;gap:7px;margin-top:8px}.status{margin-top:9px;color:var(--muted);font-size:.82rem;line-height:1.45}.queue{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}.queue span{font-size:.68rem;border:1px solid var(--line);background:var(--panel2);border-radius:99px;padding:4px 7px}dialog{width:min(92%,420px);border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:18px;padding:0;box-shadow:0 24px 80px #000a}dialog::backdrop{background:#080414c7;backdrop-filter:blur(4px)}.modal-body{padding:18px}.modal-icon{display:grid;place-items:center;margin:-3px auto 8px;width:58px;height:62px}.modal-icon .gem{width:52px;height:56px;font-size:1.65rem}.modal-body h2{text-align:center;margin:0}.modal-body p{text-align:center;color:var(--muted);margin:5px 0 14px}.modal-palette{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.modal-palette .btn{display:grid;place-items:center;gap:3px;font-size:.7rem;padding-inline:2px}.modal-palette .gem{width:28px;height:30px}
    @media(min-width:700px){.app{padding:22px 20px 100px}.tube{height:178px}.chest{height:158px}.slot{height:33px}.gem{width:31px;height:32px}.empty{width:30px;height:28px}.builder-layout{display:grid;grid-template-columns:1.35fr .65fr;gap:12px}.editor{margin-top:0}.bottom-action{position:static;transform:none;width:100%;margin-top:10px;background:transparent;border:0;padding:0;box-shadow:none}.solver-layout{display:grid;grid-template-columns:1.35fr .65fr;gap:12px}.solver-card{margin-top:0}}
    @media(max-width:370px){.app{padding-inline:6px}.board-card{padding-inline:3px}.tube{height:132px}.chest{height:112px}.gem{width:21px;height:23px}.empty{width:20px;height:20px}.types .btn{font-size:.72rem}.top .sub{display:none}}
    .gem.pink{--gem:#e41b4f;clip-path:polygon(50% 0,88% 32%,72% 73%,50% 100%,27% 73%,11% 32%)}.gem.red{--gem:#ef230b;clip-path:polygon(35% 0,77% 8%,100% 35%,82% 79%,52% 100%,14% 82%,0 42%,13% 13%)}.gem.magenta{--gem:#9c1998;clip-path:polygon(30% 0,73% 4%,96% 32%,87% 75%,56% 100%,17% 89%,0 51%,9% 16%)}.gem.purple{--gem:#4925ad;clip-path:polygon(34% 0,72% 5%,97% 31%,94% 68%,68% 97%,31% 100%,4% 72%,0 36%);border-radius:45%}.gem.green{--gem:#16ac15;clip-path:polygon(37% 0,73% 5%,98% 34%,89% 73%,61% 100%,24% 91%,0 61%,8% 21%)}.gem.cyan{--gem:#1ad5b3;clip-path:polygon(13% 4%,87% 4%,100% 17%,94% 87%,80% 100%,13% 95%,0 81%,2% 17%)}.gem.yellow{--gem:#f77f00;clip-path:polygon(50% 0,82% 30%,96% 61%,73% 94%,50% 100%,26% 94%,4% 61%,18% 30%)}.gem.blue{--gem:#2186dc;clip-path:polygon(33% 0,76% 7%,100% 35%,90% 77%,58% 100%,17% 88%,0 55%,8% 17%)}.lock-ring{box-shadow:0 0 6px #ffd2ff,0 0 2px #fff}.tube.fixed .chest{border-color:#e6a8ed;background:linear-gradient(90deg,#5a2a6399,#eab9ee33,#5a2a6399)}.tube.locked .chest{border-color:#aaa2b8;background:linear-gradient(90deg,#393443aa,#81788c33,#393443aa)}.next-move,.next-move strong{color:#fff}.tube.move-source .chest{border-color:#ffcf4a;box-shadow:0 0 0 2px #ffcf4a55,0 0 18px #ffbd2e77}.tube.move-destination .chest{border-color:#52d9ed;box-shadow:0 0 0 2px #52d9ed55,0 0 18px #2bd8ef77}.slot.move-gem .gem{filter:drop-shadow(0 0 7px #fff) drop-shadow(0 0 8px #ffba2b);transform:scale(1.12);animation:movePulse 1s ease-in-out infinite alternate}.move-label{position:absolute;z-index:5;top:2px;left:1px;padding:2px 4px;border-radius:99px;background:#ffcf4a;color:#24132f;font-size:.55rem;font-weight:900}.tube.move-destination .move-label{background:#52d9ed}@keyframes movePulse{to{transform:scale(1.2)}}
    .types{grid-template-columns:repeat(2,1fr)}.board-size{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px;padding:9px 10px;border:1px solid var(--line);border-radius:13px;background:var(--panel)}.board-size strong{font-size:.85rem}.size-options{display:flex;gap:5px}.size-options .btn{min-height:38px;padding:6px 11px;font-size:.78rem}.size-options .btn.active{border-color:var(--accent);background:#174155;color:#fff}.game-row{grid-template-columns:repeat(var(--row-size,7),minmax(0,1fr))}.gem{width:27px;height:28px;object-fit:contain;display:block;clip-path:none!important;border:0!important;border-radius:0!important;background:none!important}.gem:before,.gem:after{display:none!important}.palette .gem{width:38px;height:40px}.modal-icon .gem{width:58px;height:62px}.modal-palette .gem{width:38px;height:40px}@media(max-width:370px){.gem{width:24px;height:25px}.palette .gem{width:34px;height:36px}.size-options .btn{padding-inline:8px}}

/* Complete light mode */
[data-theme="light"] .board-card{background:linear-gradient(180deg,#ffffff,#edf4ff);border-color:#c7d4e8;box-shadow:0 14px 34px #60709022}
[data-theme="light"] .board-head,[data-theme="light"] .tube-num{color:#5f5872}
[data-theme="light"] .game-row+.game-row{border-top-color:#c8d2e3}
[data-theme="light"] .chest{border-color:#bd8428;background:linear-gradient(90deg,#f1d7a3,#fff8df,#f1d7a3)}
[data-theme="light"] .tube.fixed .chest{border-color:#a957b2;background:linear-gradient(90deg,#efd8f1,#fff4ff,#efd8f1)}
[data-theme="light"] .tube.locked .chest{border-color:#777181;background:linear-gradient(90deg,#dedbe2,#faf9fb,#dedbe2)}
[data-theme="light"] .tube.frozen .chest{border-color:#1687ad;background:linear-gradient(90deg,#cdeefa,#f2fcff,#cdeefa)}
[data-theme="light"] .badge{border-color:#9273aa;background:#f0e6f7;color:#30223f}
[data-theme="light"] .next-move{background:linear-gradient(135deg,#f8fbff,#e7f1ff);border-color:#b6c6df;color:#211936}
[data-theme="light"] .next-move small,[data-theme="light"] .next-move strong{color:#211936}
[data-theme="light"] .types .btn.active,[data-theme="light"] .size-options .btn.active{background:#d8f4f8;color:#174155;border-color:#087e9b}
[data-theme="light"] .tube-done{background:#ddf7eb;color:#126044;border-color:#60aa8c}
[data-theme="light"] .empty{border-color:#968ea7}

/* Protect solver controls from Astra/WordPress theme button rules. */
#ik-alchemy-solver button,
#ik-alchemy-solver button:hover,
#ik-alchemy-solver button:focus,
#ik-alchemy-solver button:active{color:var(--ink)!important;background-color:var(--panel2)!important;border-color:var(--line)!important;text-decoration:none!important;box-shadow:none}
#ik-alchemy-solver .step{background:var(--panel)!important;color:var(--muted)!important}
#ik-alchemy-solver .step strong{color:var(--ink)!important}
#ik-alchemy-solver .step.active{border-color:var(--accent)!important;box-shadow:inset 0 0 0 1px var(--accent)!important}
#ik-alchemy-solver .btn.primary{color:#fff!important;border-color:#52d9ed!important;background:linear-gradient(135deg,#27b9d0,#4c75e8)!important}
#ik-alchemy-solver .types .btn.active,#ik-alchemy-solver .size-options .btn.active{border-color:var(--accent)!important;background:#174155!important;color:#fff!important}
[data-theme="light"] #ik-alchemy-solver .types .btn.active,[data-theme="light"] #ik-alchemy-solver .size-options .btn.active{background:#d8f4f8!important;color:#174155!important;border-color:#087e9b!important}
#ik-alchemy-solver .tube,#ik-alchemy-solver .tube:hover,#ik-alchemy-solver .tube:focus{background:none!important;border:0!important;padding:14px 1px 5px!important}
#ik-alchemy-solver .switch,#ik-alchemy-solver .switch:hover,#ik-alchemy-solver .switch:focus{background:var(--panel2)!important;border-color:var(--line)!important;padding:3px!important}
#ik-alchemy-solver button:focus-visible{outline:3px solid var(--accent)!important;outline-offset:2px}

/* Astra often assigns explicit black text colors. Keep all solver text themed. */
#ik-alchemy-solver,#ik-alchemy-solver h1,#ik-alchemy-solver h2,#ik-alchemy-solver strong,#ik-alchemy-solver button,#ik-alchemy-solver span{color:var(--ink)!important}
#ik-alchemy-solver .sub,#ik-alchemy-solver .hint,#ik-alchemy-solver .status,#ik-alchemy-solver .step,#ik-alchemy-solver .board-head,#ik-alchemy-solver .tube-num,#ik-alchemy-solver .next-move small{color:var(--muted)!important}
#ik-alchemy-solver .next-move,#ik-alchemy-solver .next-move strong{color:#fff!important}
[data-theme="light"] #ik-alchemy-solver .next-move,[data-theme="light"] #ik-alchemy-solver .next-move strong{color:var(--ink)!important}
#ik-alchemy-solver .btn.primary,#ik-alchemy-solver .types .btn.active,#ik-alchemy-solver .size-options .btn.active{color:#fff!important}
[data-theme="light"] #ik-alchemy-solver .types .btn.active,[data-theme="light"] #ik-alchemy-solver .size-options .btn.active{color:#174155!important}

/* Override Astra's page-level background in both themes. Astra applies these
   classes to the body, so the selector must target the page itself. */
html[data-theme="dark"] body.ast-plain-container,
html[data-theme="dark"] body.ast-page-builder-template,
html[data-theme="dark"] body .ast-plain-container,
html[data-theme="dark"] body .ast-page-builder-template{
    background-color:#0b0719!important;
    background-image:radial-gradient(circle at 50% -5%,#33205d 0,#0b0719 42%)!important;
    color:#faf8ff!important;
}
html[data-theme="light"] body.ast-plain-container,
html[data-theme="light"] body.ast-page-builder-template,
html[data-theme="light"] body .ast-plain-container,
html[data-theme="light"] body .ast-page-builder-template{
    background-color:#eaf1fb!important;
    background-image:radial-gradient(circle at 50% -5%,#fff 0,#eaf1fb 52%)!important;
    color:#211936!important;
}

/* Fixed-gem rings need a darker edge on pale tube backgrounds. */
html[data-theme="light"] #ik-alchemy-solver .lock-ring{
    border-color:#681874!important;
    background:rgba(255,255,255,.2)!important;
    box-shadow:0 0 0 1px rgba(255,255,255,.95),0 0 0 3px rgba(104,24,116,.18),0 0 8px rgba(156,25,152,.7)!important;
}

.top h1,
.top p {
    margin-bottom: 0 !important;
}