/* Illustrated assets are replaceable through ARTWORK; the grid and input targets remain code. */
.cat-room-art{background-image:var(--cat-garden)!important;background-size:cover!important;background-position:center 32%!important}.room-gems .room-heading{background:linear-gradient(135deg,#258a9c,#286557)}.room-gems .room-details{background:linear-gradient(#123b43,#0d2632)}
body.cat-screen{background:#84d8e7;background-image:var(--cat-garden);background-size:cover;background-position:center;background-attachment:fixed;color:#123d59}.cat-screen .game-wrap{max-width:1050px;padding:0 22px}.cat-screen .topbar{height:70px;border-color:#fff8}.cat-screen .brand strong{color:#173c53;text-shadow:0 1px 0 #fff8}.cat-screen .brand small{color:#2c6578}.cat-screen .toolbar{padding:15px 0;gap:12px}.cat-screen .toolbar h1{color:#17475b;font-family:system-ui,sans-serif;font-size:clamp(1.65rem,4vw,2.3rem);font-weight:900;text-shadow:0 2px 0 #fff9}.cat-screen .toolbar .eyebrow{color:#286475;font-weight:800}.cat-screen .toolbar .quiet{background:linear-gradient(#f7ffff,#b7e4ed);color:#215368;border:2px solid #fff;border-radius:18px;min-height:44px;box-shadow:0 3px 0 #5a9fae,0 4px 10px #1e718326!important}.cat-screen .toolbar .actions [data-a=save]{display:none}.cat-screen .scene-gems{max-width:560px;margin:0 auto}.cat-screen .cat-table{padding:0;background:none;border:0;box-shadow:none;border-radius:0;position:relative;color:#173c53}.cat-level-tag{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:900;color:#215567;letter-spacing:.09em;padding:4px 5px 12px}.cat-level-tag span{background:#ffffffa8;border:1px solid white;padding:5px 12px;border-radius:50px;letter-spacing:0}.cat-hud{display:grid;grid-template-columns:1fr 1fr 88px;gap:10px;align-items:center;padding:8px 12px 12px;background:linear-gradient(#f6faff,#bae7f0);border:3px solid white;border-radius:25px;box-shadow:0 5px 0 #519cae,0 8px 20px #2a6f892d}.cat-hud>div{text-align:center;min-width:0}.cat-hud small{display:block;font-size:13px;font-weight:900;letter-spacing:.12em;color:#568496}.cat-hud strong{font-size:clamp(21px,5.4vw,31px);font-weight:900;font-variant-numeric:tabular-nums;line-height:1.3;color:#245874;text-shadow:0 1px 0 white}.cat-hud .cat-moves{border-radius:18px;background:linear-gradient(#ffb8d1,#ef679c);border:2px solid #fff3dd;box-shadow:inset 0 3px 0 #ffd6e9,inset 0 -4px 0 #c44879,0 2px 4px #1c5b7640;padding:5px}.cat-moves small{color:#812454}.cat-moves strong{color:white;text-shadow:0 2px 0 #b84379;font-size:33px}.cat-progress{height:22px;border:2px solid #fff;border-radius:50px;background:#2b779675;margin:13px 10px 16px;box-shadow:inset 0 2px 4px #1c577b50;position:relative;overflow:hidden}.cat-progress i{height:100%;display:block;background:linear-gradient(#bffe81,#56c752);border-radius:50px;box-shadow:inset 0 2px 0 #ffffff90;transition:width .4s}.cat-progress span{position:absolute;inset:0;text-align:center;font-size:13px;font-weight:800;color:#16465b;line-height:20px;text-shadow:0 1px 0 #c7f4f8}.cat-board-stage{position:relative;width:min(100%,520px,calc(100dvh - 350px));min-width:min(100%,265px);margin:auto}.cat-table .gemgrid{grid-template-columns:repeat(8,minmax(0,1fr));aspect-ratio:1;gap:3px;padding:10px;background:linear-gradient(135deg,#528ebaec,#1f6f9bd9);border:3px solid #c4f3ff;border-radius:24px;box-sizing:border-box;box-shadow:inset 0 0 0 3px #246588,inset 0 0 23px #14467477,0 6px 0 #3c7b92,0 10px 25px #174b6755;overflow:hidden;touch-action:manipulation}.cat-table .cat-tile{position:relative;min-width:0;min-height:0;aspect-ratio:1;width:100%;border:0;padding:0;background:#90c8e336!important;border-radius:9px;box-shadow:inset 0 1px 0 #c7f1ff2e,inset 0 -2px 0 #1c568232!important;overflow:visible;transition:transform .16s ease;isolation:isolate}.cat-tile:nth-child(16n+9),.cat-tile:nth-child(16n+11),.cat-tile:nth-child(16n+13),.cat-tile:nth-child(16n+15),.cat-tile:nth-child(16n+2),.cat-tile:nth-child(16n+4),.cat-tile:nth-child(16n+6),.cat-tile:nth-child(16n+8){background:#347fac54!important}.cat-piece{display:block;width:100%;height:100%;background-image:var(--cat-pieces);background-size:300% 200%;background-position:var(--cat-x) var(--cat-y);background-repeat:no-repeat;filter:drop-shadow(0 3px 2px #0e42694d);pointer-events:none;transform:scale(1.11)}.cat-table .cat-tile:hover{filter:brightness(1.08)}.cat-table .cat-tile.selected{outline:3px solid #fffbd5;outline-offset:-2px;transform:scale(1.05);z-index:2;background:#cfefff66!important;box-shadow:0 0 12px #fffbb588!important}.cat-tile.cat-swapping{z-index:3}.cat-animating .cat-grid,.cat-animating .cat-actions{pointer-events:none}.cat-table .cat-status{margin:14px auto 9px;padding:7px 12px;font-size:14px;line-height:1.45;color:#174f65;background:#f7ffffc9;border:1px solid #fff;border-radius:20px;max-width:520px;text-align:center;box-shadow:0 2px 7px #29728e18}.cat-actions{gap:12px;margin:0}.cat-table .cat-actions button{border:2px solid #fff;border-radius:17px;background:linear-gradient(#fff9d9,#ffd475);color:#785924;min-height:45px;font-size:14px;box-shadow:0 3px 0 #d3aa58,0 4px 8px #406f6b22!important;padding:9px 20px;font-weight:800}.cat-instruction{font-size:14px;text-align:center;line-height:1.5;color:#21566a;text-shadow:0 1px 0 #fff9;margin:14px 0}.cat-screen .footer{color:#205467;font-size:13px;border-color:#ffffff65;padding:12px 0}.cat-screen .footer .pill{color:#24596a;border-color:#478d9b}.cat-combo{position:absolute;pointer-events:none;z-index:10;left:5%;right:5%;top:40%;text-align:center;font-size:clamp(24px,7vw,39px);font-weight:1000;letter-spacing:-.04em;color:#fff9c4;text-shadow:0 3px 0 #e38654,0 -2px 0 #995688,2px 0 0 #995688,-2px 0 0 #995688,0 7px 17px #17396c88;opacity:0}.cat-combo-show{animation:cat-combo .65s ease-out forwards}.cat-pop .cat-piece{animation:cat-pop .2s ease-in forwards}.cat-pop::after{content:'';position:absolute;inset:-3px;border:3px solid #fffad9;border-radius:50%;box-shadow:0 0 13px #ffe38e;animation:cat-ring .22s ease-out forwards;pointer-events:none}.cat-drop .cat-piece{animation:cat-fall .25s cubic-bezier(.28,.62,.4,1.15) both}.cat-no-match{animation:cat-shake .22s linear}.cat-finish{position:absolute;inset:21% 5% auto;z-index:15;padding:24px 18px;text-align:center;border:3px solid white;border-radius:30px;background:linear-gradient(#fafffff5,#d4f2faf5);box-shadow:0 8px 0 #3785a77d,0 15px 45px #13395799;animation:cat-arrive .35s both}.cat-finish-face{width:90px;height:90px;margin:0 auto}.cat-finish h2{font:900 32px/1.2 system-ui;color:#9d447a;margin:8px 0}.cat-finish p{font-size:16px;line-height:1.4;color:#2a657a;margin:12px 0 20px}.cat-finish .gold{background:linear-gradient(#ffcbe0,#ee7bab);border:2px solid #fff;color:#662856!important;border-radius:20px;box-shadow:0 4px 0 #b45585!important;min-height:48px;font-size:17px}
@keyframes cat-pop{0%{transform:scale(1.11)}35%{transform:scale(1.35);filter:brightness(1.6)}100%{transform:scale(.15);opacity:0}}@keyframes cat-ring{from{transform:scale(.4);opacity:1}to{transform:scale(1.6);opacity:0}}@keyframes cat-fall{from{transform:translateY(var(--fall-y)) scale(1.11);opacity:.6}to{transform:translateY(0) scale(1.11);opacity:1}}@keyframes cat-combo{0%{opacity:0;transform:translateY(15px) scale(.55)}22%{opacity:1;transform:translateY(0) scale(1.08)}70%{opacity:1;transform:translateY(-5px) scale(1)}100%{opacity:0;transform:translateY(-20px) scale(.94)}}@keyframes cat-shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}@keyframes cat-arrive{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
@media(max-width:600px){.cat-screen .game-wrap{padding:0 12px}.cat-screen .topbar{display:none}.cat-screen .toolbar{padding:13px 0 11px;gap:9px;flex-wrap:nowrap}.cat-screen .toolbar h1{font-size:22px;margin:0;line-height:1.2}.cat-screen .toolbar .eyebrow{display:none}.cat-screen .toolbar .quiet{font-size:14px;padding:8px 10px}.cat-screen .toolbar .actions{margin-left:auto;gap:0}.cat-screen .toolbar [data-a=help]{font-size:0}.cat-screen .toolbar [data-a=help]::after{content:'Help';font-size:14px}.cat-level-tag{padding-bottom:8px}.cat-hud{grid-template-columns:1fr 1fr 76px;gap:5px;border-radius:22px;padding:7px 8px 9px}.cat-board-stage{width:min(100%,calc(100dvh - 270px));min-width:min(100%,260px)}.cat-table .gemgrid{padding:7px;gap:2px;border-radius:18px;border-width:2px}.cat-progress{margin:11px 8px 12px;height:20px}.cat-table .cat-status{margin-top:11px}.cat-instruction{margin:11px 5px}.cat-screen .footer{display:none}.cat-finish{padding:16px;inset:25% 5% auto}.cat-finish-face{width:65px;height:65px}.cat-finish h2{font-size:27px}}
@media(prefers-reduced-motion:reduce){.cat-screen *{animation:none!important;transition:none!important}.cat-drop .cat-piece{transform:scale(1.11)}}.reduce .cat-table *{animation:none!important;transition:none!important}.reduce .cat-drop .cat-piece{transform:scale(1.11)}
/* Sunshyne's Kitty Mania: original art, replaceable atlas, powers independent of colour. */
.cat-screen{--kitty-pink:#ff73bd;--kitty-violet:#7029b1}.cat-screen .toolbar h1{font-size:clamp(20px,4vw,31px)}.cat-screen .cat-table{max-width:820px;margin:auto}.kitty-host-banner{position:relative;display:flex;justify-content:space-between;align-items:center;height:120px;margin:0 auto 10px;overflow:hidden;border-radius:25px;background:linear-gradient(90deg,#4b1975dd,#491c7566),var(--cat-garden) left center/cover;border:2px solid #ffeac6;box-shadow:0 5px 0 #8d63b9,0 8px 18px #35175144;color:white;max-width:560px}.kitty-host-banner>div{padding:12px 20px;z-index:1}.kitty-host-banner .eyebrow{color:#ffe994;font-weight:900;font-size:13px}.kitty-host-banner h2{font-family:Georgia,serif;font-size:36px;letter-spacing:-1px;line-height:1;margin:4px 0;text-shadow:0 3px 0 #762898,0 0 12px #ef7cde}.kitty-host-banner p{font-size:13px;margin:5px 0;color:#ffdfef}.kitty-host-banner img{height:155%;width:45%;object-fit:cover;object-position:70% 13%;align-self:start;border-radius:0 20px 0 60%;mask-image:linear-gradient(90deg,transparent,#000 25%)}.cat-level-tag{max-width:560px;margin:auto;font-size:12px}.cat-hud{max-width:560px;margin:auto;border-color:#ffe9ff;background:linear-gradient(#fff0fa,#eec5ef);box-shadow:0 5px 0 #9a64be,0 9px 20px #5c327344}.cat-progress{max-width:520px;margin:12px auto;background:#57297a}.cat-board-stage{width:min(100%,560px,calc(100dvh - 400px));min-width:min(100%,320px)}.cat-table .gemgrid{gap:2px;padding:8px;border-radius:22px;background:linear-gradient(135deg,#804bb8f5,#45217eea);border:3px solid #ffe2fd;box-shadow:inset 0 0 0 3px #431365,inset 0 0 24px #21024277,0 5px 0 #7e429b,0 12px 28px #36054266}.cat-table .cat-tile{background:#ad73e522!important;border-radius:12px}.cat-piece{position:relative;overflow:visible;border-radius:10px;transform:scale(1.04)}.kitty-power-icon{font-style:normal;position:absolute;bottom:-1%;right:-1%;display:grid;place-items:center;width:38%;height:38%;border-radius:50%;background:linear-gradient(#fffbea,#ffc651);border:1px solid #fff;color:#73166b;box-shadow:0 2px 4px #220a6c88;font:bold clamp(12px,2.5vw,22px)/1 system-ui;z-index:2}.kitty-power-1:before,.kitty-power-2:before{content:'';position:absolute;inset:35% 0;border:2px solid #fff7bd;border-left:0;border-right:0;box-shadow:0 0 12px #fff491;background:#ffd44055;border-radius:15px}.kitty-power-2:before{inset:0 35%;border:2px solid #fff7bd;border-top:0;border-bottom:0}.kitty-power-3:before{content:'';position:absolute;inset:8%;border:3px dashed #fff5b1;border-radius:50%;box-shadow:0 0 15px #ff969b}.kitty-power-4:before{content:'';position:absolute;inset:5%;border:3px solid transparent;border-radius:50%;background:conic-gradient(#ff7070,#ffe562,#7aff9a,#75ceff,#d889ff,#ff7070) border-box;mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);mask-composite:exclude;filter:drop-shadow(0 0 6px #fff)}.kitty-power-5{filter:drop-shadow(0 0 6px #ffed5e)}.kitty-power-5:before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse,#fff4a655,transparent 70%);border:3px solid #ffe957;border-radius:50%;box-shadow:0 0 15px #ffac56}.kitty-power-guide{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:13px auto 0;max-width:560px}.kitty-power-guide span{border:1px solid #fff;background:#efe0f5dd;border-radius:12px;padding:5px 9px;text-align:center;font-size:11px;color:#64287d}.kitty-power-guide b{display:block;font-size:12px;color:#a22580}.kitty-supernova{animation:kitty-supernova .4s ease-out!important}.kitty-fire-1,.kitty-fire-2{box-shadow:0 0 30px 10px #fff6a7!important;z-index:2}.kitty-fire-3{box-shadow:0 0 30px 10px #ffa3d7!important;z-index:2}.kitty-fire-4,.kitty-fire-5{box-shadow:0 0 40px 12px #ffd864!important;z-index:2}.cat-screen .cat-status{color:#562369;background:#fff2f9ce;border:1px solid white;max-width:560px;margin:12px auto;font-size:14px}.cat-screen .cat-actions{margin-top:8px}.cat-screen .cat-instruction{font-size:12px;color:#532973;margin:10px auto;max-width:560px}.cat-screen .cat-combo{font-size:clamp(24px,5vw,40px);color:#fff2ab;text-shadow:0 3px #a81e8e,0 0 15px #f3a2ef}.cat-screen .cat-finish{background:#46147eed;color:#fff0fd}.cat-screen .cat-finish h2{color:#fff0a2}@keyframes kitty-supernova{0%{filter:brightness(1)}40%{filter:brightness(2);box-shadow:0 0 60px 20px #fff6a7}100%{filter:brightness(1)}}
@media(min-width:850px) and (max-height:850px){.cat-screen .cat-table{display:grid;grid-template-columns:210px minmax(300px,520px);gap:8px 20px;max-width:780px;align-items:start}.kitty-host-banner{grid-column:1;grid-row:1/5;height:260px;display:block}.kitty-host-banner>div{padding:16px 14px;position:absolute;bottom:0;background:linear-gradient(transparent,#381166);width:100%}.kitty-host-banner h2{font-size:30px}.kitty-host-banner img{height:100%;width:100%;object-position:70% top;mask-image:none}.cat-board-stage{grid-column:2;grid-row:2/7;width:min(100%,calc(100dvh - 235px));min-width:300px}.cat-hud{grid-column:2;grid-row:1;width:100%}.cat-progress{display:none}.cat-level-tag,.cat-status,.cat-actions,.kitty-power-guide,.cat-instruction{grid-column:1;width:100%}.cat-level-tag{grid-row:5;font-size:10px}.cat-status{grid-row:6}.cat-actions{grid-row:7}.kitty-power-guide{grid-row:8}.cat-instruction{grid-row:9}}
@media(prefers-reduced-motion:reduce){.kitty-supernova{animation:none!important}}
.room-gems .room-heading{background:linear-gradient(135deg,#762da4,#ab438d)}.room-gems .room-heading h2{font-size:clamp(23px,3vw,32px);line-height:1.12;color:#ffefb0}.room-gems .room-details{background:linear-gradient(#40205e,#231538)}.cat-room-art{background-position:65% center!important}.reduce .kitty-supernova{animation:none!important}
.cat-grid{position:relative}.kitty-supernova:after{content:'☀';position:absolute;inset:10%;display:grid;place-items:center;z-index:5;font:900 clamp(100px,30vw,230px)/1 Georgia,serif;color:#fff0aa;text-shadow:0 0 25px #ffae40,0 0 50px #fff;pointer-events:none;animation:kitty-sun-burst .6s ease-out forwards}.kitty-supernova:before{content:'';position:absolute;inset:-20%;z-index:4;background:repeating-conic-gradient(from 0deg,#ffe89488 0deg 7deg,transparent 7deg 22deg);border-radius:50%;pointer-events:none;animation:kitty-ray-burst .6s ease-out forwards}@keyframes kitty-sun-burst{0%{transform:scale(.15) rotate(-20deg);opacity:0}40%{opacity:1}100%{transform:scale(1.5) rotate(20deg);opacity:0}}@keyframes kitty-ray-burst{from{transform:scale(.2) rotate(0);opacity:1}to{transform:scale(1.4) rotate(30deg);opacity:0}}.reduce .kitty-supernova:before,.reduce .kitty-supernova:after{display:none}@media(prefers-reduced-motion:reduce){.kitty-supernova:before,.kitty-supernova:after{display:none}}
