*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif}body{color:#fff;background:#6553b3 url(assets/island.png) center/cover fixed;overscroll-behavior:none;-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;border:0}button:focus-visible{outline:3px solid #fff38a;outline-offset:3px}button:disabled{cursor:default;opacity:.4}.ambient{position:fixed;inset:0;z-index:-1;background:linear-gradient(90deg,#28165c85,transparent 35%,#2e225d45)}.desktop-wordmark{display:none}.game{width:min(100%,450px);margin:auto;min-height:100svh;padding:12px 18px max(12px,env(safe-area-inset-bottom));position:relative;background:linear-gradient(#5850b330,#9485cf20);display:flex;flex-direction:column;justify-content:center}header{display:flex;align-items:center;justify-content:space-between;height:65px;flex-shrink:0}.brand{text-align:center;text-shadow:0 3px 3px #544299}.brand>span{font-size:9px;letter-spacing:2.5px;color:#f4f0ff}.brand strong{display:block;font-size:29px;letter-spacing:5px;line-height:1.3;font-weight:900}.brand i{font-style:normal;color:#ffe48c;font-size:21px;vertical-align:top;margin-left:1px}.icon-button{width:42px;height:42px;border-radius:16px;color:white;border:1px solid #ffffff70;box-shadow:inset 0 2px #ffffff55,0 4px 0 #50459b66;background:linear-gradient(#afa0ea88,#6c5aba99);display:grid;place-items:center}.icon-button svg{width:22px;height:22px}.level-bar{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#fff9ff;margin:12px 1px;text-shadow:0 1px 3px #413471}.level-bar button{color:#fff;background:#44328065;border:1px solid #cfbdfa80;border-radius:16px;padding:6px 14px;font-weight:700;font-size:12px}.dashboard{display:flex;min-height:78px;border-radius:23px;background:linear-gradient(120deg,#fffdf9,#eee8ff);color:#665386;border:2px solid #fff;box-shadow:0 6px 0 #6550a477,0 12px 20px #3b287b20;overflow:hidden}.goals-wrap{padding:10px 15px;flex:1}.goals-wrap>small{font-size:10px;letter-spacing:2px;font-weight:700;color:#9b8aac}#goals{display:flex;gap:10px;align-items:center;height:40px}.goal{display:flex;align-items:center;gap:3px;font-weight:800;font-size:14px}.goal img{width:31px;height:34px;object-fit:contain;mix-blend-mode:multiply}.goal .jelly-symbol{width:26px;height:26px;background:linear-gradient(145deg,#d9ffff,#77c8f7);border:2px solid #fff;box-shadow:0 2px #84a5da;border-radius:7px;color:#fff;display:grid;place-items:center}.goal.done{color:#298a72}.goal small{font-size:10px;font-weight:400;color:#9c90af}.moves{width:83px;background:linear-gradient(#feadbd,#ec709f);color:#fff;text-align:center;padding:10px 8px;box-shadow:inset 2px 0 #fff9}.moves>span{display:block;font-size:10px}.moves strong{font-size:35px;line-height:40px;text-shadow:0 3px #d6508480}.moves.urgent{animation:urgent 1s infinite}.companion{height:104px;display:flex;gap:8px;align-items:center;padding:8px 5px;position:relative}.companion-portrait{width:90px;height:88px;position:relative;flex-shrink:0;background:radial-gradient(ellipse at center,#fff 15%,#f3e9ff 50%,transparent 68%);border-radius:50%}.companion-portrait img{position:absolute;width:82px;height:82px;left:4px;top:0;object-fit:contain;mix-blend-mode:multiply;animation:bob 3.6s ease-in-out infinite}.orbit{position:absolute;bottom:6px;left:6px;right:6px;height:23px;border:2px solid #d5c3ff;border-radius:50%;box-shadow:0 0 15px #c8aaff,inset 0 0 8px #fff}.companion-copy{flex:1;min-width:0}.companion-copy>span{display:block;font-size:10px;color:#f3e9ff;letter-spacing:1px;margin-bottom:5px}.companion-copy>strong{font-size:14px;text-shadow:0 2px 4px #655088}.evolution-track{display:flex;align-items:center;margin-top:10px;gap:4px}.evolution-track button{color:#e9dcff;background:#4c377752;border:1px solid #d1bbf674;border-radius:11px;padding:4px 7px;font-size:10px;white-space:nowrap}.evolution-track button.active{color:#614090;background:linear-gradient(#fff6d0,#fbdc8b);border-color:#fff8cd;box-shadow:0 2px 8px #ffe4a160}.evolution-track i{height:1px;background:#f4dfff60;width:7px}.board-shell{position:relative;aspect-ratio:1;isolation:isolate;flex-shrink:0;max-height:52svh;max-width:100%;margin:auto 0}.board-rim{padding:8px;border:2px solid #f7edff;border-radius:27px;background:linear-gradient(135deg,#ffe8ff,#b896ed 42%,#f4b8d8 72%,#cfb8f2);box-shadow:0 8px 0 #625099,0 14px 25px #37205e50,inset 0 0 0 2px #ffffff5c;height:100%}.board{height:100%;display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(7,1fr);gap:4px;padding:5px;background:linear-gradient(140deg,#604489e6,#473878e6);border:1px solid #5c418b;border-radius:18px;touch-action:none;position:relative;user-select:none;box-shadow:inset 0 3px 10px #35254b9a}.cell{min-width:0;min-height:0;border-radius:12px;background:linear-gradient(145deg,#edddfb,#d4c4e8);position:relative;box-shadow:inset 0 2px #fff9,0 3px 0 #44325d88;display:flex;align-items:center;justify-content:center;touch-action:none;overflow:visible;outline-offset:0;padding:0}.cell::before{content:"";position:absolute;inset:2px;border:1px solid #fff7;border-radius:10px;pointer-events:none}.cell[data-color="0"]{background:linear-gradient(135deg,#fff9dc,#edce9c)}.cell[data-color="1"]{background:linear-gradient(135deg,#e7ffe4,#9fd8b6)}.cell[data-color="2"]{background:linear-gradient(135deg,#e2f9ff,#94cce7)}.cell[data-color="3"]{background:linear-gradient(135deg,#fff0e2,#efb391)}.cell[data-color="4"]{background:linear-gradient(135deg,#f7eadc,#cabaac)}.cell[data-color="5"]{background:linear-gradient(135deg,#fff1ff,#d8b4e9)}.pet-img{width:100%;height:100%;object-fit:contain;border-radius:10px;mix-blend-mode:multiply;pointer-events:none;filter:saturate(1.14) contrast(1.02);transform:scale(.94)}.cell.selected{outline:3px solid #fff2ac;z-index:5;filter:brightness(1.1);transform:scale(1.07)}.cell.hinted{animation:hint-pulse .8s infinite;z-index:3}.cell.empty{background:transparent;box-shadow:none;pointer-events:none}.cell.empty::before{display:none}.cell.ice::after{content:"";position:absolute;inset:0;border-radius:11px;background:linear-gradient(145deg,#fff9,transparent 30%,#d7f9ff35 65%,#fff8);border:2px solid #b5efff;pointer-events:none;box-shadow:inset 0 0 8px #e6feff}.cell.ice.double::after{border:3px double #fff;box-shadow:inset 0 0 8px #b5eaff,0 0 6px #a8e7ff}.special-mark{position:absolute;bottom:0;right:1px;min-width:17px;height:17px;line-height:17px;border-radius:7px;background:#6936c7;color:#fff;font-size:12px;box-shadow:0 1px 3px #31173f80;z-index:2}.cell.special-row,.cell.special-col{box-shadow:0 0 0 2px #ffefa0,0 0 12px #fff085}.cell.special-bomb{box-shadow:0 0 0 2px #ffadc7,0 0 14px #ff95bf}.cell.special-rainbow{background:conic-gradient(#ffb4da,#d3b0ff,#9ae8ff,#b7ffc0,#ffef99,#ffb4da);box-shadow:0 0 12px #fff}.cell.clearing{animation:pop .32s ease-in forwards;z-index:10}.stage-2 .board-rim{box-shadow:0 8px 0 #665097,0 0 24px #c7a5ffad}.stage-3 .board-rim{box-shadow:0 8px 0 #74519f,0 0 0 2px #ffe4a199,0 0 30px #f4aff2b3}.board-shell.burst{animation:quake .28s ease-out}#effects{position:absolute;inset:-30px;width:calc(100% + 60px);height:calc(100% + 60px);pointer-events:none;z-index:20}.combo{position:absolute;top:37%;left:-10%;width:120%;text-align:center;font-weight:900;font-size:36px;font-style:italic;pointer-events:none;z-index:30;opacity:0;color:#fff9b4;text-shadow:0 3px 0 #b95ac9,0 5px 0 #602579,0 8px 14px #502868}.combo.show{animation:combo .85s ease-out}.score-strip{display:flex;justify-content:space-between;padding:17px 6px 0;font-size:11px;color:#fff7ff}.score-strip b{font-size:15px;margin-left:5px}.score-strip #stars{letter-spacing:4px;color:#fff0a3;font-size:17px;line-height:17px}.hint-text{height:18px;font-size:11px;text-align:center;margin:8px 0;color:#fff;text-shadow:0 1px 3px #5c456d}.tools{display:flex;gap:9px}.tools>button{flex:1;border-radius:18px;padding:7px 4px;background:linear-gradient(#fffafc,#ede2fb);box-shadow:0 4px 0 #8b66b3,0 6px 10px #61469333;color:#74528e;display:flex;align-items:center;justify-content:center;gap:6px;font-size:11px;font-weight:700;border:1px solid #fff;min-height:47px}.tool-icon svg{width:26px;height:26px;display:block;stroke:#9769c9}.tools b{display:block;font-size:9px;font-weight:500;opacity:.75}.tools button.active{background:#ffe9ac;box-shadow:0 0 0 2px #ffec9a}.bottom-nav{display:flex;justify-content:center;align-items:center;gap:12px;margin:14px 0 7px}.bottom-nav button{background:transparent;color:#fff;font-size:11px;min-height:30px;text-shadow:0 1px 4px #55436b}.dot{width:3px;height:3px;border-radius:50%;background:#fff8}.save-status{text-align:center;font-size:9px;color:#f4eaff;letter-spacing:1px}.paused .board{pointer-events:none;filter:blur(4px)}dialog{border:0;padding:0;background:transparent;max-height:90svh;max-width:min(420px,94vw);width:100%;overflow:auto;border-radius:28px;color:#55426d;box-shadow:0 30px 90px #1e163f88}dialog::backdrop{background:#25143f85;backdrop-filter:blur(7px)}.dialog-card{padding:24px 23px;background:linear-gradient(150deg,#fffdf9,#eee7ff);border:2px solid #fff;border-radius:28px;min-height:180px}.dialog-card h2{margin:8px 0 12px;font-size:25px;text-align:center;color:#604280}.dialog-card p{font-size:13px;line-height:1.8;text-align:center;color:#8c789e}.dialog-card .eyebrow{display:block;text-align:center;font-size:10px;letter-spacing:3px;color:#a18bb4}.dialog-card .close{float:right;border-radius:50%;width:30px;height:30px;background:#e7dcf2;color:#72588c;font-size:20px}.primary,.secondary{min-height:46px;border-radius:15px;padding:10px 16px;font-size:14px;font-weight:700;width:100%;margin-top:10px}.primary{background:linear-gradient(#b58bfa,#8860d4);box-shadow:0 4px 0 #6e48b1;color:#fff;border:1px solid #c7a3ff}.secondary{background:#e8def3;color:#7b5e98}.welcome-pets{display:flex;align-items:center;justify-content:center;gap:5px;height:120px}.welcome-pets img{width:100px;height:100px;object-fit:contain;mix-blend-mode:multiply}.welcome-pets img:nth-child(2){width:125px;height:125px;transform:translateY(-6px)}.evo-preview{display:flex;gap:8px;margin:20px 0}.evo-preview button{padding:8px 3px;background:#fff9;border-radius:15px;flex:1;color:#856297;border:2px solid transparent}.evo-preview img{width:100%;mix-blend-mode:multiply}.evo-preview .active{border-color:#b996f4;background:#fff}.evo-preview b{font-size:12px}.evo-preview small{display:block;font-size:9px;margin-top:5px}.rules{display:grid;gap:10px}.rule{display:flex;gap:10px;align-items:center;padding:10px;background:#fff9;border-radius:14px;font-size:12px;line-height:1.6}.rule b{flex-shrink:0;display:grid;place-items:center;width:38px;height:38px;border-radius:13px;background:#e6d7fc;color:#8962bd;font-size:19px}.level-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:16px 0}.level-grid button{aspect-ratio:1;border-radius:13px;color:#8a70a0;background:#e4d9ee;border:1px solid #fff}.level-grid button.open{color:#704394;background:linear-gradient(#fff9dc,#f2d894);box-shadow:0 3px 0 #c5a76a}.level-grid button.current{outline:2px solid #ad7de3}.level-grid small{display:block;font-size:8px;color:#9e6cb5}.map-nav{display:flex;gap:8px;align-items:center}.map-nav button{width:36px;height:36px;background:#e6d9ef;border-radius:12px}.map-nav select{flex:1;min-width:0;padding:10px;border:1px solid #d6bde4;border-radius:12px;background:white;color:#7b5896}.settings-row{display:flex;justify-content:space-between;align-items:center;margin:14px 0;padding:12px;background:#fff9;border-radius:13px;font-size:13px}.settings-row input{accent-color:#9865d7;width:20px;height:20px}.result-stars{text-align:center;color:#eab34f;font-size:42px;text-shadow:0 2px white;letter-spacing:8px}.result-score{text-align:center;font-size:38px;font-weight:900;color:#8962b9}.gallery{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;max-height:47svh;overflow:auto}.gallery button{background:#fff9;border-radius:12px;padding:4px;font-size:9px;color:#775789}.gallery img{width:100%;mix-blend-mode:multiply}.dialog-card .note{font-size:10px;color:#9d8aa9}.storage-warning{color:#ffe7a1}.toast{position:fixed}#toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);padding:12px 20px;background:#372251ed;color:white;border:1px solid #b19bcb77;border-radius:15px;font-size:12px;z-index:100;opacity:0;pointer-events:none;transition:opacity .2s;max-width:90vw;text-align:center}#toast.visible{opacity:1}@keyframes hint-pulse{50%{transform:scale(1.09);box-shadow:0 0 0 3px #ffea9b,0 0 15px #fff}}@keyframes bob{50%{transform:translateY(-4px) rotate(2deg)}}@keyframes pop{40%{transform:scale(1.2);filter:brightness(1.7)}100%{transform:scale(.1);opacity:0}}@keyframes combo{0%{opacity:0;transform:scale(.5) rotate(-8deg)}20%,65%{opacity:1;transform:scale(1) rotate(-4deg)}100%{opacity:0;transform:scale(1.2) translateY(-25px)}}@keyframes quake{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}@keyframes urgent{50%{filter:brightness(1.15)}}@media(min-width:900px){body{background-size:cover;background-position:center 65%}.game{margin-left:55%;background:#7465aa38;box-shadow:0 0 100px #2a1d5829;min-height:100svh;padding-top:20px;padding-bottom:20px}.desktop-wordmark{display:block;position:fixed;left:8%;top:35%;text-shadow:0 3px 30px #49296960}.desktop-wordmark>span{font-size:10px;letter-spacing:4px}.desktop-wordmark h1{font-size:43px;line-height:1.5;font-weight:500;letter-spacing:5px}.desktop-wordmark p{font-size:14px;letter-spacing:4px}.desktop-wordmark small{font-size:11px;color:#eadefa;letter-spacing:6px}}@media(max-height:760px){.game{padding-top:5px;justify-content:flex-start}header{height:48px}.brand strong{font-size:25px}.level-bar{margin:7px 0}.dashboard{min-height:67px}.goals-wrap{padding:6px 12px}.moves{padding:5px}.companion{height:83px}.companion-portrait{width:74px;height:74px}.companion-portrait img{width:70px;height:70px}.companion-copy>strong{font-size:12px}.evolution-track{margin-top:6px}.board-shell{width:min(100%,calc(100svh - 330px));align-self:center;max-height:none}.score-strip{padding-top:13px}.hint-text{margin:4px 0}.bottom-nav{margin:9px 0 3px}.tools>button{min-height:42px}.save-status{font-size:8px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}body.reduced *,body.reduced *::after{animation:none!important;transition:none!important}
/* Element skills: a single tap after matching fills energy. */
.element-skills{display:flex;gap:5px;margin:0 0 10px}.element-skills button{position:relative;flex:1;min-width:0;min-height:43px;background:linear-gradient(to right,#ffffff65 var(--charge),#40306065 var(--charge));border:1px solid #ffffff75;border-radius:12px;color:#fff;display:grid;grid-template-columns:22px 1fr;align-items:center;padding:5px;gap:1px}.element-skills b{grid-row:span 2;color:var(--element);text-shadow:0 1px 3px #432c5f;font-size:17px}.element-skills span{font-size:9px}.element-skills small{font-size:8px;white-space:nowrap}.element-skills button.ready{box-shadow:0 0 12px var(--element);background:linear-gradient(#fff1cb,#e7c9fa);color:#65507d;border-color:#fff6d5}.ward{position:absolute;left:1px;top:0;font-size:9px;border-radius:5px;background:#5f4b80df;color:var(--ward);padding:0 2px;z-index:4;pointer-events:none}.game{padding-top:7px}.companion{height:90px}.board-shell{max-height:none;width:min(100%,calc(100svh - 405px));align-self:center}.score-strip{padding-top:14px}.bottom-nav{margin:9px 0 3px}.level-bar{margin:8px 1px}.tools>button{min-height:44px}.hint-text{margin:6px 0}.score-symbol{color:#e9b24e;font-size:25px}.element-skills button:active{transform:scale(.96)}@media(max-height:760px){.board-shell{width:min(100%,calc(100svh - 373px))}.companion{height:74px}.companion-portrait{height:70px}.element-skills{margin-bottom:7px}.element-skills button{min-height:39px}.hint-text{font-size:10px}.board{gap:3px;padding:4px}.cell{border-radius:9px}.cell::before{border-radius:7px}.level-bar{margin:6px 0}.bottom-nav{margin:6px 0 0}.brand>span{font-size:8px}}@media(max-height:620px){.game{min-height:620px}.board-shell{width:247px}.companion-copy>strong{font-size:11px}.game{justify-content:flex-start}}@media(min-width:900px){.game{justify-content:center}.board-shell{width:min(100%,calc(100svh - 405px))}}
/* Fixed portrait composition keeps the complete playing surface on one phone screen. */
.game{height:100svh;min-height:680px;display:grid;grid-template-rows:50px 30px 70px 70px minmax(0,1fr) 28px 24px 45px 48px 28px 12px;padding:8px 18px 12px;gap:0;justify-content:normal}header{height:50px}.level-bar{margin:0}.level-bar button{padding:4px 13px}.dashboard{height:66px;min-height:0;align-self:center}.goals-wrap{padding:6px 12px}.moves{padding:5px}.companion{height:70px;padding:0 5px}.companion-portrait{width:73px;height:70px}.companion-portrait img{width:70px;height:70px}.companion-copy>strong{font-size:12px}.companion-copy>span{font-size:9px;margin-bottom:3px}.evolution-track{margin-top:6px}.board-shell{width:min(100%,calc(100svh - 525px));height:auto;max-height:none;margin:0;align-self:center;justify-self:center}.score-strip{padding:8px 6px 0}.hint-text{margin:0;height:auto;align-self:center;font-size:10px}.element-skills{height:40px;margin:0;align-self:center}.element-skills button{min-height:0}.tools{align-self:center;height:42px}.tools>button{min-height:0;height:42px;padding:5px 4px}.bottom-nav{margin:0;gap:12px}.bottom-nav button{min-height:24px;font-size:10px}.save-status{line-height:12px;font-size:8px}.brand strong{font-size:26px}.brand>span{font-size:8px}
@media(max-height:760px){.game{grid-template-rows:44px 24px 58px 58px minmax(0,1fr) 24px 20px 40px 40px 24px 10px;padding:6px 15px 8px}header{height:44px}.dashboard{height:55px}.goals-wrap{padding:3px 10px}.goals-wrap>small{font-size:8px}#goals{height:31px}.moves{padding:2px 7px}.moves strong{font-size:29px;line-height:32px}.moves>span{font-size:8px}.companion{height:58px}.companion-portrait{height:58px;width:65px}.companion-portrait img{height:60px;width:60px}.companion-copy>span{display:none}.evolution-track{margin-top:4px}.board-shell{width:min(100%,calc(100svh - 456px))}.element-skills{height:36px}.tools,.tools>button{height:36px}.tool-icon svg{width:23px;height:23px}.brand strong{font-size:24px}.icon-button{width:36px;height:36px;border-radius:13px}.score-strip{padding-top:7px}.hint-text{font-size:9px}.board-rim{padding:6px;border-radius:22px}.cell::before{inset:1px}.bottom-nav button{font-size:9px}.save-status{font-size:7px}}
/* Give the pets the available width, leaving only a small breathing space around the board. */
.game{overflow:hidden;padding-top:calc(8px + env(safe-area-inset-top));padding-bottom:calc(12px + env(safe-area-inset-bottom))}
.board-shell{width:min(100%,calc(max(680px,100svh) - 445px - env(safe-area-inset-top) - env(safe-area-inset-bottom)))}
@media(max-height:760px){.game{padding-top:calc(6px + env(safe-area-inset-top));padding-bottom:calc(8px + env(safe-area-inset-bottom))}.board-shell{width:min(100%,calc(max(680px,100svh) - 376px - env(safe-area-inset-top) - env(safe-area-inset-bottom)))}}
#elementMacro{position:absolute;inset:0;pointer-events:none;z-index:23;overflow:visible;border-radius:25px}.laser{position:absolute;display:block;box-shadow:0 0 12px #fff6a0,0 0 26px #ffc35c;background:#fff8c5;animation:beam .65s forwards}.laser.horizontal{top:var(--fx-y);left:-3%;width:106%;height:5px}.laser.vertical{left:var(--fx-x);top:-3%;height:106%;width:5px}.macro-1 svg{width:100%;height:100%;stroke:#baffb9;stroke-width:5;fill:none;filter:drop-shadow(0 0 9px #7fffab);stroke-dasharray:180;animation:grow .7s forwards}.water-column{position:absolute;top:0;bottom:0;left:calc(var(--fx-x) - 8%);width:16%;background:linear-gradient(90deg,#71d8ff00,#d7ffffee,#71d8ff00);animation:water .75s forwards}.water-ring,.earth-ring{position:absolute;left:calc(var(--fx-x) - 35px);top:calc(var(--fx-y) - 35px);width:70px;height:70px;border:4px solid #c5fbff;border-radius:50%;box-shadow:0 0 15px var(--fx-color);animation:ripple .8s forwards}.water-ring.second{animation-delay:.15s}.earth-ring{border-color:#efcf95}.rock{position:absolute;left:var(--fx-x);top:var(--fx-y);width:14px;height:18px;border-radius:3px;background:linear-gradient(135deg,#f6e1b2,#b88b65);box-shadow:1px 2px 4px #52345a;animation:rockburst .8s forwards}.flames{position:absolute;left:calc(var(--fx-x) - 25%);top:calc(var(--fx-y) - 22%);width:50%;height:44%;display:flex;align-items:flex-end;justify-content:center;filter:drop-shadow(0 0 12px #ff9156)}.flames i{display:block;flex:1;height:calc(50% + var(--n)*5%);background:linear-gradient(0deg,#ff9749,#ffe69c 65%,#fff4c5);border-radius:80% 10% 50% 50%;transform-origin:bottom;animation:flame .7s forwards;animation-delay:calc(var(--n)*.015s)}#ultimatePortrait{position:absolute;inset:15%;z-index:24;pointer-events:none;opacity:0;border-radius:50%;background:radial-gradient(#fff,#fff2c8 35%,transparent 68%);filter:drop-shadow(0 0 20px var(--fx-color));display:grid;place-items:center}#ultimatePortrait img{width:85%;height:85%;object-fit:contain;mix-blend-mode:multiply}#ultimatePortrait.show{animation:ultimate .8s forwards}@keyframes beam{0%{opacity:0;filter:brightness(2);transform:scale(.1)}25%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.1)}}@keyframes grow{0%{stroke-dashoffset:180;opacity:0}70%{stroke-dashoffset:0;opacity:1}100%{opacity:0}}@keyframes water{0%{transform:scaleY(.05);opacity:0}30%{opacity:1;transform:scaleY(1)}100%{opacity:0;transform:scaleX(1.5)}}@keyframes ripple{0%{transform:scale(.1);opacity:1}100%{transform:scale(4);opacity:0}}@keyframes rockburst{0%{transform:rotate(var(--angle)) translateY(0);opacity:1}100%{transform:rotate(var(--angle)) translateY(var(--distance)) rotate(90deg);opacity:0}}@keyframes flame{0%{transform:scaleY(.1) rotate(-8deg);opacity:0}40%{transform:scaleY(1) rotate(9deg);opacity:1}100%{transform:scaleY(1.5) translateY(-20px);opacity:0}}@keyframes ultimate{0%{opacity:0;transform:scale(.3) rotate(-12deg)}25%,55%{opacity:1;transform:scale(1) rotate(3deg)}100%{opacity:0;transform:scale(1.25) translateY(-20px)}}
/* Third-stage summon stays compact so the elemental blast remains visible. */
#ultimatePortrait{inset:auto;left:35%;top:6%;width:30%;height:30%;overflow:hidden}
#ultimatePortrait img{width:100%;height:100%;mask-image:radial-gradient(ellipse at center,#000 48%,transparent 72%)}
.special-fx{position:absolute;inset:0;z-index:22;pointer-events:none;overflow:visible}
.special-ring{position:absolute;left:calc(var(--fx-x) - 32px);top:calc(var(--fx-y) - 32px);width:64px;height:64px;border:5px solid #ffe3f2;border-radius:50%;box-shadow:0 0 20px #ff99cc;animation:ripple .75s forwards}
.rainbow-ring{border-color:#fff6bb;background:conic-gradient(#ff8cbd77,#9b91ff77,#74e8fa77,#c5ffab77,#ffe58a77,#ff8cbd77);box-shadow:0 0 25px #e8d8ff}
/* Flame silhouettes rather than rounded beams. */
.flames i{position:absolute;left:calc(var(--n)*12% - 5%);bottom:0;width:31%;height:calc(65% + var(--n)*5%);flex:none;border-radius:0;clip-path:polygon(48% 0,65% 26%,59% 42%,81% 24%,94% 55%,100% 78%,88% 94%,65% 100%,28% 98%,7% 85%,0 64%,20% 40%,24% 64%,37% 46%);background:linear-gradient(0deg,#ff702b,#ffbd48 58%,#fff4c1)}
.flames i::after{content:"";position:absolute;inset:40% 24% 2%;background:linear-gradient(0deg,#fff5a2,#fffbe4);border-radius:90% 15% 65% 40%}
/* 1.1 International visual layer: original HD art, iconic power pets, readable effects. */
body{font-family:ui-rounded,"Trebuchet MS",system-ui,sans-serif}.brand strong{font-size:31px;letter-spacing:-1.2px;font-weight:900;line-height:1.04}.brand>span{font-size:7px;letter-spacing:3px}.brand i{font-size:21px;letter-spacing:0;margin-left:5px}.level-bar{font-size:10px;gap:5px}.level-bar>span{white-space:nowrap}.level-bar>span:last-child{font-size:9px}.level-bar button{font-size:11px;padding:5px 10px;white-space:nowrap}.companion-copy>strong{font-size:12px}.companion-copy>span{font-size:10px;letter-spacing:0}.evolution-track button{font-size:10px;padding:4px 8px}.hint-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10px;padding:0 4px}.bottom-nav{gap:8px}.bottom-nav button{font-size:11px}.save-status{letter-spacing:0;font-size:9px;color:#fff}.element-skills{gap:6px}.element-skills button{grid-template-columns:23px 1fr;padding:4px;gap:0;box-shadow:inset 0 1px #fff4}.element-skills b{display:block;line-height:0}.element-skills b svg{width:21px;height:23px;filter:drop-shadow(0 1px 2px #34204f)}.element-skills span{font-size:8px;font-weight:700}.element-skills small{font-size:8px}.element-skills button.ready{animation:skill-ready 1.8s ease-in-out infinite}.ward{width:13px;height:14px;display:grid;place-items:center;padding:1px;background:#3c3166e8;left:0;top:0;border-radius:5px}.ward svg{width:11px;height:11px}.pet-img{filter:none;transform:scale(1.055);border-radius:10px;image-rendering:auto;mix-blend-mode:multiply}.cell{isolation:isolate}.cell[data-color="0"]{background:linear-gradient(145deg,#fffdf4,#f5dfb8)}.cell[data-color="1"]{background:linear-gradient(145deg,#f7fff5,#c9ecd6)}.cell[data-color="2"]{background:linear-gradient(145deg,#f7fdff,#c4e8f4)}.cell[data-color="3"]{background:linear-gradient(145deg,#fffaf4,#f6cfb8)}.cell[data-color="4"]{background:linear-gradient(145deg,#fffaf4,#ddcfc0)}.cell[data-color="5"]{background:linear-gradient(145deg,#fff8ff,#ead8f2)}
.cell.special-row,.cell.special-col{background:linear-gradient(135deg,#fffad5,#ebcc72);box-shadow:0 0 0 1.5px #fff4a4,0 0 12px #ffcc5388}.power-shell{position:absolute;inset:0;pointer-events:none;z-index:3;border-radius:10px}.power-row i,.power-col i{position:absolute;display:block;background:linear-gradient(90deg,#ffb740,#fff8cc 30%,#fff 50%,#ffe283 70%,#ffba43);box-shadow:0 0 5px #fff5aa,0 0 8px #ffc443;border-radius:5px}.power-row i{left:-6%;width:112%;height:3px;top:15%}.power-row i:nth-child(2){top:auto;bottom:15%}.power-row i:nth-child(3){top:46%;height:2px;opacity:.48}.power-col i{top:-6%;height:112%;width:3px;left:15%;background:linear-gradient(#ffb740,#fff9cc 30%,#fff 50%,#ffe283 70%,#ffba43)}.power-col i:nth-child(2){left:auto;right:15%}.power-col i:nth-child(3){left:46%;width:2px;opacity:.48}.power-row em,.power-col em{position:absolute;inset:3px;border:1px solid #fff6c6;border-radius:9px;animation:power-breathe 1.6s ease-in-out infinite}
.cell.special-bomb{background:radial-gradient(#fff4cf,#ffc3a8 64%,#b471bb);box-shadow:0 0 0 2px #ffc5a5,0 0 16px #ff87b3}.power-bomb i{position:absolute;inset:6%;border:2px solid #fff3b2;border-radius:42%;transform:rotate(45deg);box-shadow:0 0 6px #ffbd63}.power-bomb i:nth-child(2){inset:1% 24%;transform:rotate(-40deg);border-color:#ff9bd5}.power-bomb i:nth-child(3){inset:24% 1%;transform:rotate(-40deg);border-color:#ffc27a}.power-bomb em{position:absolute;width:11px;height:11px;bottom:-2px;left:calc(50% - 5px);transform:rotate(45deg);border-radius:3px;background:radial-gradient(#fff,#ffe298,#fc789e);box-shadow:0 0 8px #ffb3cf}
.cell.special-rainbow{border-radius:50%;background:conic-gradient(#ff74c9,#9970ff,#6dceff,#87ffbc,#fff59c,#ffa060,#ff74c9);box-shadow:0 0 0 2px #fff7da,0 0 15px #d7a9ff}.special-rainbow::before{border-radius:50%;border:2px solid #ffffffb0;inset:2px}.special-rainbow .pet-img{transform:scale(.77);border-radius:50%;mix-blend-mode:normal;mask-image:radial-gradient(#000 44%,transparent 72%)}.power-rainbow{border-radius:50%;box-shadow:inset 2px 3px 5px #fff9,inset -3px -4px 8px #382aab66}.power-rainbow i{position:absolute;width:5px;height:5px;border-radius:50%;background:#fff;box-shadow:0 0 6px #fff;left:10%;top:23%;animation:power-breathe 1.3s infinite}.power-rainbow i:nth-child(2){left:77%;top:61%;animation-delay:.4s;background:#ffefa8}.power-rainbow i:nth-child(3){left:44%;top:83%;animation-delay:.7s;background:#beffff}.power-rainbow em{position:absolute;inset:2px;border:1px dashed #ffffffb0;border-radius:50%;animation:prism-orbit 5s linear infinite}
.cell.new-power{z-index:12;animation:power-born .55s cubic-bezier(.2,.7,.3,1.25)}.cell.clearing{animation:gem-pop .24s ease-out forwards;animation-delay:var(--pop-delay,0s)}.combo{font-family:ui-rounded,"Trebuchet MS",system-ui,sans-serif;font-size:29px;letter-spacing:-.6px;top:34%;left:-5%;width:110%;text-shadow:0 2px 0 #a65acb,0 4px 0 #673b95,0 6px 12px #462554}.combo.show{animation:combo 1.05s ease-out}.board-shell.burst{animation:impact .32s ease-out}.dialog-card h2{font-size:24px;letter-spacing:-.6px}.dialog-card h3{text-align:center;color:#76549d;font-size:17px}.dialog-card p{color:#77618a}.rule{font-size:12px}.evo-preview b{font-size:11px}.evo-preview small{font-size:9px}.gallery button{font-size:10px}.gallery img{aspect-ratio:1;object-fit:contain}.lab-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0}.lab-grid button{border:1px solid #d8bde7;border-radius:18px;background:linear-gradient(#fff,#f2e8ff);padding:15px 6px;color:#76509d;font-size:12px;box-shadow:0 3px #d8c6e8}.lab-symbol{display:block;font-size:32px;line-height:40px;color:#ac6edc;text-shadow:0 1px #fff}.lab-grid button:nth-child(2) .lab-symbol,.lab-grid button:nth-child(5) .lab-symbol{color:#cf80c0}.level-grid small{font-size:8px}.primary{letter-spacing:.1px}
@keyframes power-breathe{50%{opacity:.55;filter:brightness(1.45)}}@keyframes prism-orbit{to{transform:rotate(360deg)}}@keyframes power-born{0%{transform:scale(.25) rotate(-20deg);filter:brightness(2)}60%{transform:scale(1.2) rotate(7deg);filter:brightness(1.35)}100%{transform:scale(1);filter:none}}@keyframes gem-pop{25%{transform:scale(1.18);filter:brightness(1.6)}100%{transform:scale(.05);opacity:0}}@keyframes impact{20%{transform:translateY(2px) scale(.992)}55%{transform:translateY(-2px) scale(1.008)}100%{transform:none}}@keyframes skill-ready{50%{box-shadow:0 0 9px var(--element),inset 0 0 5px #fff}}
@media(max-height:760px){.brand strong{font-size:28px}.level-bar{font-size:9px}.level-bar>span:last-child{font-size:8px}.evolution-track button{font-size:9px;padding:3px 6px}.bottom-nav button{font-size:10px}.save-status{font-size:8px}.combo{font-size:26px}.element-skills{gap:4px}.element-skills button{grid-template-columns:21px 1fr;padding:3px}.element-skills b svg{width:19px;height:21px}.element-skills span{font-size:8px}}
@media(prefers-reduced-motion:reduce){.cell.new-power,.cell.clearing,.power-shell *,.element-skills button.ready{animation:none!important}}
.lab-goal{font-weight:800;color:#8155ad;font-size:15px;letter-spacing:-.3px}