@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@600;700;800;900&display=swap');
:root{font-family:Nunito,system-ui,sans-serif;color:#34205b;background:#7a4db9;font-synthesis:none}*{box-sizing:border-box}html,body{margin:0;min-height:100%;overflow-x:hidden}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #fff06f;outline-offset:3px}.scene{min-height:100dvh;position:relative;isolation:isolate;overflow:hidden;padding:9px 15px 7px;background:radial-gradient(ellipse 42% 24% at 18% 20%,#ffbfdbc7,transparent 80%),radial-gradient(ellipse 38% 26% at 84% 32%,#a4e9f5bd,transparent 86%),radial-gradient(ellipse 60% 50% at 50% 95%,#ae80e8,transparent 80%),linear-gradient(#8d66cc,#a378da 52%,#6744b6)}.scene:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle at 9% 66%,#fff7ed77 0 15px,transparent 17px),radial-gradient(circle at 93% 80%,#fff4e984 0 23px,transparent 25px),radial-gradient(circle at 82% 13%,#fff8ee55 0 38px,transparent 41px);opacity:.85}.scene:after{content:'';position:absolute;left:-20%;right:-20%;bottom:-24%;height:57%;z-index:-1;border:34px solid #f5c4e363;border-top-color:transparent;border-left-color:transparent;border-radius:50%;transform:rotate(-16deg);pointer-events:none}.top{max-width:950px;height:54px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:10px}.back{text-decoration:none;color:#fffaf8;font-weight:900;font-size:14px;text-shadow:0 2px #553297}.title{display:flex;flex-direction:column;align-items:center;color:#fff8ec;text-shadow:0 3px #aa4e91,0 6px 13px #4a278b8c}.title-small{font-size:8px;letter-spacing:.2em;font-weight:900}.title strong{font-size:25px;line-height:1.1;font-weight:900}.top-actions{display:flex;gap:8px}.round{width:39px;height:39px;display:grid;place-items:center;border:2px solid #ffdfb6;border-radius:13px;background:linear-gradient(#ff9ab9,#eb6d9b);box-shadow:0 4px 0 #ae4a91,0 8px 11px #522d9244;color:#fff;font-size:19px;font-weight:900;text-shadow:0 2px #ad4c8a}.round:active,.controls button:active,.big-button:active{transform:translateY(3px);box-shadow:0 1px 0 #a24e86}.round[aria-pressed=true]{background:linear-gradient(#73ddd0,#27bfc1);box-shadow:0 4px 0 #2e969e}.game{width:min(100%,610px);margin:0 auto}.hud{display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:8px;margin:2px auto 8px}.hud-chip{min-height:55px;padding:5px 12px;border:2px solid #fff1d5;border-radius:16px;background:linear-gradient(#fff9e9,#f8dfe4);box-shadow:0 4px 0 #a767a1,0 8px 12px #512d9133;display:flex;justify-content:space-between;align-items:center;gap:6px}.hud-chip small{color:#90608e;font-weight:900;font-size:10px;letter-spacing:.08em}.hud-chip strong{font-weight:900;font-size:25px;color:#633b9c;font-variant-numeric:tabular-nums}.hud-chip.score{background:linear-gradient(#fff3ba,#ffdca5)}.progress{height:11px;border:2px solid #fff1dc;border-radius:99px;background:#633c96;box-shadow:0 2px 5px #44277966;overflow:hidden}.progress span{display:block;width:0;height:100%;border-radius:99px;background:linear-gradient(90deg,#fbe66d,#ff9b8a,#ff74ad);box-shadow:0 0 9px #ffe780;transition:width .5s}.goal-line{display:flex;justify-content:space-between;min-height:24px;align-items:center;color:#fff7e8;font-size:11px;font-weight:900;text-shadow:0 2px #5b3b9c}.goal-line #combo{color:#fff097}.board-frame{position:relative;width:min(100%,calc(100dvh - 288px),510px);aspect-ratio:1;margin:1px auto 12px;padding:10px;border:3px solid #fff2d4;border-radius:26px;background:linear-gradient(140deg,#ffca80,#f584a8 40%,#a270d6);box-shadow:inset 0 3px #fff9,0 6px 0 #77459b,0 18px 25px #50309270}.board{width:100%;height:100%;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);gap:2px;border-radius:16px;overflow:hidden;background:#9e6dc6}.tile{position:relative;min-width:0;min-height:0;padding:0;border:0;border-radius:8px;background:linear-gradient(145deg,#ffe5f1ab,#d8b8edad);box-shadow:inset 0 2px #ffffff88,inset 0 -2px #8064a350;display:grid;place-items:center;touch-action:none;user-select:none;-webkit-user-select:none;transition:filter .14s,transform .16s,background .16s}.tile:nth-child(16n + 1),.tile:nth-child(16n + 3),.tile:nth-child(16n + 5),.tile:nth-child(16n + 7),.tile:nth-child(16n + 10),.tile:nth-child(16n + 12),.tile:nth-child(16n + 14),.tile:nth-child(16n + 16){background:linear-gradient(145deg,#fff6e8b5,#e6c9e6b8)}.tile img{display:block;width:96%;height:96%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 3px 2px #71468966)}.tile:not(:disabled):hover{filter:brightness(1.14)}.tile.selected{background:#fff0b6;box-shadow:inset 0 0 0 3px #ffdf63,0 0 12px #fff39f;z-index:2;transform:scale(1.06)}.tile.dragging{z-index:3;transform:scale(1.12);filter:brightness(1.2);box-shadow:inset 0 0 0 3px #fff5b3,0 0 18px #ffeb88}.tile.drag-target{z-index:2;background:#c0ffdc;box-shadow:inset 0 0 0 3px #65e4ac,0 0 16px #72f6bb}.tile.drag-target img{transform:scale(1.09)}.tile.hint{box-shadow:inset 0 0 0 3px #fff269;animation:hint 1.1s ease-in-out infinite alternate}.tile.matched{z-index:2;animation:pop-out .27s ease-in both}.tile.new img{animation:drop-in .32s ease-out both}.tile:disabled{cursor:default}.board-flash{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);opacity:0;pointer-events:none;z-index:5;font-size:33px;font-weight:900;color:#fff;text-shadow:0 3px #dd498b,0 7px 12px #552489}.board-flash.show{animation:flash .8s ease-out}.controls{display:flex;gap:9px;justify-content:center;margin:0 auto;max-width:510px}.controls button{flex:1;min-height:43px;border:2px solid #fff0cc;border-radius:14px;background:linear-gradient(#fff0be,#ffd09d);box-shadow:0 4px 0 #a96791,0 9px 14px #542e874d;color:#7b4386;font-weight:900;font-size:13px}.controls button:hover{filter:brightness(1.08)}.controls button:disabled{opacity:.6}.control-symbol{font-size:20px;vertical-align:-2px;margin-right:5px;color:#ee659a}.message{min-height:21px;margin:12px auto 0;text-align:center;color:#fff8f0;font-size:12px;font-weight:900;text-shadow:0 2px #57329d}footer{text-align:center;color:#f8e8fc;font-size:10px;font-weight:900;letter-spacing:.12em;padding:5px 0;text-shadow:0 2px #543097}.screen{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:15px;background:radial-gradient(circle at 50% 30%,#b489ebee,#61429fe8 72%);backdrop-filter:blur(6px)}.screen[hidden]{display:none}.screen-card{text-align:center;max-width:470px;width:100%;padding:30px 31px 25px;border:4px solid #fff1d6;border-radius:35px;background:linear-gradient(170deg,#fff9e8,#ffe7ed 55%,#e9dcff);box-shadow:0 8px 0 #9e5baf,0 24px 42px #47268485}.candy-orbit{height:128px;display:flex;align-items:center;justify-content:center;gap:8px}.candy-orbit img{width:102px;height:102px;object-fit:contain;filter:drop-shadow(0 8px 4px #824cb558)}.candy-orbit img:nth-child(2){transform:translateY(-18px) rotate(13deg)}.candy-orbit img:nth-child(3){transform:rotate(-13deg)}.screen-kicker{font-size:10px;font-weight:900;letter-spacing:.17em;color:#a05fa8}.screen h1{font-size:clamp(42px,9vw,62px);line-height:.95;margin:10px 0 14px;color:#8a47ae;text-shadow:0 3px #ffe59b;font-weight:900}.screen p{color:#735781;font-size:14px;font-weight:800;line-height:1.5;margin:0 0 19px}.big-button{width:100%;border:3px solid #fff2ca;border-radius:18px;background:linear-gradient(#ff9fb2,#f2639c);box-shadow:0 5px 0 #ae4e8e,0 11px 18px #8c55aa4d;color:white;text-shadow:0 2px #b34587;font-weight:900;font-size:19px;padding:11px 16px}.big-button span{margin-left:10px}.screen-tip{display:block;margin-top:14px;color:#9f75a5;font-size:11px;font-weight:900}dialog.modal{width:min(410px,calc(100% - 28px));border:4px solid #fff0d3;border-radius:28px;padding:25px;background:linear-gradient(#fff9e8,#ffe6f0);box-shadow:0 20px 70px #3d2479a3;text-align:center;color:#69418c}dialog::backdrop{background:#382365ae;backdrop-filter:blur(5px)}.modal h2{font-size:29px;margin:5px 0}.modal p{font-weight:800;color:#896c96}.pause-avatar{display:block;width:115px;height:115px;object-fit:contain;margin:0 auto}.result-candies{display:flex;justify-content:center}.result-candies img{width:95px;height:95px;object-fit:contain;margin:-5px}.result-candies img+img{transform:rotate(18deg)}
@keyframes hint{to{filter:brightness(1.25);box-shadow:inset 0 0 0 5px #fff269}}@keyframes pop-out{40%{transform:scale(1.18);filter:brightness(1.5)}100%{transform:scale(.1);opacity:0}}@keyframes drop-in{from{transform:translateY(-35px) scale(.72);opacity:0}to{transform:none;opacity:1}}@keyframes flash{15%{opacity:1;transform:translate(-50%,-55%) scale(1.14)}60%{opacity:1}100%{opacity:0;transform:translate(-50%,-100%) scale(.8)}}
@media(max-width:600px){.scene{padding:7px 9px 5px}.top{height:48px}.title strong{font-size:19px}.title-small{font-size:7px}.back{font-size:12px}.round{width:35px;height:35px;border-radius:11px}.hud{gap:5px}.hud-chip{min-height:47px;padding:4px 8px;border-radius:12px}.hud-chip small{font-size:8px}.hud-chip strong{font-size:21px}.board-frame{width:min(100%,calc(100dvh - 253px),510px);padding:6px;border-radius:19px;margin-bottom:10px}.board{gap:1px;border-radius:12px}.tile{border-radius:5px}.controls{gap:5px}.controls button{min-height:43px;font-size:11px;border-radius:11px}.control-symbol{font-size:17px;margin-right:2px}.message{font-size:11px;margin-top:9px}.screen-card{padding:24px 18px}}
@media(max-width:360px){.title strong{font-size:17px}.back span{display:none}.hud-chip{padding:3px 5px}.hud-chip strong{font-size:18px}.board-frame{width:min(100%,calc(100dvh - 236px))}.controls button{font-size:10px}.control-symbol{font-size:15px}}
@media(max-height:690px) and (min-width:601px){.board-frame{width:min(100%,calc(100dvh - 245px),510px)}.message{margin-top:7px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
/* Compact game controls: the three actions share one visual weight. */
.controls{gap:12px}
.controls button{position:relative;flex:0 0 54px;width:54px;height:50px;min-height:50px;padding:0;display:grid;place-items:center;border-radius:15px}
.control-icon{width:27px;height:27px;fill:none;stroke:#87479d;stroke-width:2.7;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 0 #fff8)}
.controls button:hover .control-icon,.controls button:focus-visible .control-icon{stroke:#ae3d8b}
.control-tooltip{position:absolute;left:50%;bottom:calc(100% + 9px);z-index:10;transform:translate(-50%,5px);padding:6px 10px;border:1px solid #ffecc9;border-radius:9px;background:#4b2b78;color:#fff9ed;box-shadow:0 4px 12px #43236888;font-size:12px;font-weight:900;line-height:1.2;white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .14s,transform .14s,visibility .14s}
.controls button:hover .control-tooltip,.controls button:focus-visible .control-tooltip{opacity:1;visibility:visible;transform:translate(-50%,0)}
.controls button:disabled .control-icon{opacity:.55}
@media(max-width:600px){.controls{gap:10px}.controls button{flex-basis:48px;width:48px;height:46px;min-height:46px;border-radius:13px}.control-icon{width:25px;height:25px}}
@media(hover:none){.controls button:hover:not(:focus-visible) .control-tooltip{opacity:0;visibility:hidden;transform:translate(-50%,5px)}}
/* The illustrated world map is decorative; real, accessible level buttons sit above it. */
.top-actions .round svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.map-entry{display:block;width:100%;margin-top:12px;padding:8px 12px;border:2px solid #dcbbea;border-radius:14px;background:#fff9f0;color:#8051a6;font-size:13px;font-weight:900;box-shadow:0 3px 0 #bc8ed0}
.map-entry:hover{background:#fff1cf}
.map-dialog{width:min(590px,calc(100% - 16px));max-width:none;max-height:min(92dvh,900px);padding:0;border:3px solid #fff0d3;border-radius:25px;background:#fff4df;color:#573280;box-shadow:0 22px 70px #2f195dbb;overflow:hidden}
.map-dialog::backdrop{background:#342058c9;backdrop-filter:blur(5px)}
.map-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 17px;background:linear-gradient(120deg,#ffe8bd,#ffe1f1 60%,#e3d7ff);border-bottom:3px solid #fff6da}
.map-head small{display:block;color:#aa719e;font-size:9px;font-weight:900;letter-spacing:.15em}
.map-head h2{margin:1px 0;font-size:23px;line-height:1.1;color:#7546a0}
.map-head p{margin:2px 0 0;font-size:11px;font-weight:800;color:#916c91}
.map-head button{flex:none;width:36px;height:36px;border:2px solid #e8c7db;border-radius:11px;background:#fff9ee;color:#794c9a;font-size:28px;line-height:1}
.map-scroll{max-height:calc(min(92dvh,900px) - 80px);overflow-y:auto;overscroll-behavior:contain;scrollbar-color:#bb85ca #fae2ea}
.map-trail{min-height:1500px;display:flex;flex-direction:column;background-image:linear-gradient(#ffffff24,#ffffff08),url('assets/level-map.jpg');background-position:center;background-size:100% 100%;background-repeat:no-repeat}
.map-chapter{flex:1;min-height:250px;display:flex;flex-direction:column;justify-content:space-around;align-items:center;padding:12px 10px 14px;scroll-margin-block:50px}
.map-chapter h3{margin:0;padding:5px 14px;border:2px solid #fff8da;border-radius:99px;background:#fff7e7e8;color:#673b89;box-shadow:0 3px 9px #4d317c57;font-size:12px;font-weight:900;letter-spacing:.06em;text-align:center}
.map-levels{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:center;gap:27px 5px;width:100%;max-width:470px}
.map-node{position:relative;display:grid;place-items:center;width:48px;height:48px;min-width:44px;min-height:44px;margin:auto;padding:0;border:3px solid #fff9e2;border-radius:50%;background:linear-gradient(#fef1ff,#d4b9ec);box-shadow:0 4px 0 #794a9b,0 6px 10px #34215d77;color:#563077;font-size:15px;font-weight:900;line-height:1;font-variant-numeric:tabular-nums;text-shadow:0 1px #fff}
.map-node[data-state="completed"]{background:linear-gradient(#e8ffe9,#8ee4c5);box-shadow:0 4px 0 #479b88,0 6px 10px #34215d77;color:#275d61}
.map-node[data-state="current"]{background:linear-gradient(#fff9c7,#ffc96f);box-shadow:0 4px 0 #d5875e,0 0 0 4px #fff6bf88,0 6px 14px #4d317c77;color:#8c4567;animation:map-current 1.9s ease-in-out infinite alternate}
.map-node:disabled{cursor:default;background:linear-gradient(#f1e8f5,#bea9cf);color:#745d83;box-shadow:0 3px 0 #806a91,0 4px 8px #34215d66}
.map-node:not(:disabled):hover{transform:translateY(-3px);filter:brightness(1.08)}
@keyframes map-current{to{box-shadow:0 4px 0 #d5875e,0 0 0 7px #fff6bfaa,0 6px 14px #4d317c77}}
@media(max-width:600px){.top-actions .round svg{width:21px;height:21px}.map-dialog{border-radius:17px}.map-head h2{font-size:20px}.map-chapter{min-height:230px}.map-trail{min-height:1380px}.map-node{width:44px;height:44px;font-size:13px}.map-levels{gap:24px 1px}}
@media(max-width:360px){.map-node{width:42px;height:42px;min-width:42px;min-height:42px}.map-chapter{padding-inline:5px}}
@media(prefers-reduced-motion:reduce){.map-node[data-state="current"]{animation:none}}