:root{--cell:min(12.2vw,54px);--text:#f5fbff;--muted:#a9b8e5;--line:rgba(110,130,255,.46)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}html,body{margin:0;width:100%;height:100%;min-height:100%;overflow:hidden;overscroll-behavior:none;touch-action:none;-ms-touch-action:none;-webkit-text-size-adjust:100%;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--text);background:radial-gradient(circle at top,#312477 0%,#111540 48%,#050616 100%)}body{position:fixed;inset:0}button,.cell,.piece,.board,.app{touch-action:none;-ms-touch-action:none}button{appearance:none;-webkit-appearance:none}.app{height:100dvh;max-width:540px;margin:0 auto;padding:max(10px,env(safe-area-inset-top)) 12px max(10px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:9px}.topbar{display:flex;justify-content:space-between;align-items:center}.kicker{font-size:11px;color:var(--muted);font-weight:900;text-transform:uppercase;letter-spacing:.7px}h1{margin:0;font-size:23px}.round-btn{width:42px;height:42px;border-radius:15px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.09);color:#fff;font-size:18px;font-weight:900}.goal{display:grid;grid-template-columns:1.35fr .65fr .65fr;gap:8px}.goal div,.reaction-panel{border:1px solid rgba(255,255,255,.12);background:linear-gradient(145deg,rgba(45,58,138,.76),rgba(14,19,57,.88));border-radius:16px;padding:8px 10px}.goal span,.reaction-title{display:block;font-size:10px;text-transform:uppercase;color:var(--muted);font-weight:900}.goal strong{font-size:13px}.board-wrap{flex:1;min-height:0;display:grid;place-items:center;align-content:center;gap:6px}.board{position:relative;display:grid;gap:5px;padding:10px;border-radius:25px;background:linear-gradient(145deg,rgba(30,48,112,.9),rgba(8,13,42,.96));border:2px solid var(--line);box-shadow:0 0 32px rgba(90,92,255,.28),inset 0 0 30px rgba(0,0,0,.22)}.exit-label{font-size:10px;color:#9edfff;font-weight:950;letter-spacing:1.6px;text-shadow:0 0 12px #38d0ff}.cell{width:var(--cell);height:var(--cell);border-radius:13px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.025));display:grid;place-items:center;position:relative;overflow:visible}.cell.selected{outline:3px solid #fff;box-shadow:0 0 18px rgba(255,255,255,.68);transform:translateY(-1px)}.cell.empty{background:rgba(0,0,0,.08)}.piece{width:94%;height:94%;position:relative;z-index:1;background-size:contain;background-position:center;background-repeat:no-repeat;filter:drop-shadow(0 7px 8px rgba(0,0,0,.35));animation:floaty 2.8s ease-in-out infinite}.piece.element:after{content:'';position:absolute;inset:0;background-image:var(--blink-img);background-size:contain;background-position:center;background-repeat:no-repeat;opacity:0;animation:blink 5.2s steps(1,end) infinite}.piece.monster{animation:bounce 2.2s ease-in-out infinite}.piece.new-piece{animation:incomingDrop .34s ease-out both,floaty 2.8s ease-in-out .34s infinite}.piece.derived{display:grid;place-items:center;border-radius:50%;font-size:calc(var(--cell)*.43);font-weight:900;background:radial-gradient(circle at 35% 22%,rgba(255,255,255,.82),rgba(150,190,255,.18));border:1px solid rgba(255,255,255,.18)}.piece.smoke{color:#d7ecff}.piece.mud{color:#9d7140;background:radial-gradient(circle,#a97948,#573719)}.piece.cloud{color:#dff7ff}.piece.blaze{color:#ffae42}.piece.lava{color:#ff653c}.piece.dust{color:#d6c39b}.piece.storm{color:#a8b4ff}.piece.lightning{color:#ffe15a}.piece.brick,.piece.rock{color:#aeb6c4;background:radial-gradient(circle,#c7cedf,#555b70)}@keyframes blink{0%,88%,100%{opacity:0}90%,94%{opacity:1}}@keyframes floaty{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-2px) scale(1.02)}}@keyframes bounce{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-3px) scale(1.035)}}@keyframes incomingDrop{0%{transform:translateY(calc(-1 * var(--cell))) scale(.86);opacity:0;filter:blur(2px) drop-shadow(0 7px 8px rgba(0,0,0,.35))}72%{transform:translateY(3px) scale(1.04);opacity:1;filter:blur(0) drop-shadow(0 7px 8px rgba(0,0,0,.35))}100%{transform:translateY(0) scale(1);opacity:1}}.reaction-panel{min-height:52px}.reaction-title{margin-bottom:2px}#reactionText{font-size:13px;font-weight:800;color:#eaf3ff}.bottom-actions{display:flex;gap:8px}.bottom-actions button{flex:1;height:38px;border-radius:14px;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.1);color:#fff;font-weight:900}.toast{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(100px);opacity:0;transition:.22s ease;background:rgba(3,5,20,.9);border:1px solid rgba(255,255,255,.13);border-radius:15px;padding:10px 14px;max-width:88vw;text-align:center;font-weight:850;z-index:30}.toast.visible{opacity:1;transform:translateX(-50%) translateY(0)}.modal{position:fixed;inset:0;display:grid;place-items:center;background:rgba(2,4,16,.78);backdrop-filter:blur(8px);z-index:40;padding:18px}.hidden{display:none!important}.modal-card{width:min(540px,94vw);position:relative;border-radius:24px;padding:22px;background:linear-gradient(145deg,#232d76,#10143d);border:1px solid rgba(255,255,255,.15);box-shadow:0 24px 60px rgba(0,0,0,.4)}.close{position:absolute;right:12px;top:10px;width:36px;height:36px;border-radius:12px;border:0;background:rgba(255,255,255,.1);color:#fff;font-size:24px}.fx{position:absolute;width:var(--cell);height:var(--cell);z-index:9;pointer-events:none;display:grid;place-items:center;font-weight:950;font-size:14px;border-radius:50%;animation:fxpop .72s ease-out forwards;text-shadow:0 0 10px #fff}.fx-smoke{background:radial-gradient(circle,rgba(230,245,255,.9),rgba(190,215,255,.15),transparent)}.fx-mud{background:radial-gradient(circle,#90643b,rgba(144,100,59,.2),transparent)}.fx-cloud{background:radial-gradient(circle,#d8f6ff,rgba(130,215,255,.25),transparent)}.fx-blaze{background:radial-gradient(circle,#fff15d,#ff733a,transparent)}.fx-lava{background:radial-gradient(circle,#ffed71,#ff4b2d,transparent)}.fx-dust{background:radial-gradient(circle,#e0d0a6,rgba(173,146,84,.15),transparent)}.fx-storm{background:radial-gradient(circle,#dcd8ff,#6b7aff,transparent)}.fx-lightning{background:radial-gradient(circle,#fff477,#ffd200,transparent)}.fx-brick,.fx-rock{background:radial-gradient(circle,#d6dde9,#727a90,transparent)}.fx-primordial{background:conic-gradient(from 0deg,#42b7ff,#ff8a24,#72ff62,#9befff,#42b7ff)}@keyframes fxpop{0%{transform:scale(.2);opacity:0}28%{transform:scale(1.25);opacity:1}100%{transform:scale(2.2);opacity:0}}@media(max-height:740px){.goal{display:none}.reaction-panel{min-height:42px;padding:6px 9px}.bottom-actions button{height:34px}.cell{border-radius:10px}}