*{box-sizing:border-box;margin:0;padding:0}html,body{min-height:100%;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;overscroll-behavior:none;touch-action:manipulation}body{background:radial-gradient(1200px 600px at 50% -10%,rgba(120,90,200,.1),transparent 60%),radial-gradient(900px 500px at 100% 110%,rgba(30,160,190,.08),transparent 60%),var(--bg);background-attachment:fixed}#app{min-height:100%;display:flex;align-items:flex-start;justify-content:center;padding:16px}.game{width:min(92vw,460px);display:flex;flex-direction:column;gap:14px}.crumb{font-size:14px}.crumb a{color:var(--accent);text-decoration:none;font-weight:700}.crumb a:hover{text-decoration:underline}.topbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}.title{font-size:clamp(34px,10vw,56px);font-weight:800;line-height:1;letter-spacing:-1px}.scores{display:flex;gap:8px}.score-box{background:var(--board-bg);color:var(--accent-text);border-radius:6px;padding:6px 14px;text-align:center;min-width:72px}.score-box .label{font-size:11px;text-transform:uppercase;letter-spacing:1px;opacity:.85;font-weight:700}.score-box .value{font-size:22px;font-weight:800;line-height:1.1}.controls{display:flex;align-items:center;justify-content:space-between;gap:10px}.how{font-size:13px;opacity:.85;flex:1}.how b{font-weight:700}.btn{background:var(--accent);color:var(--accent-text);border:none;border-radius:6px;padding:10px 16px;font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap;transition:filter .12s ease}.btn:hover{filter:brightness(1.05)}.btn:active{filter:brightness(.95)}.board{--gap: clamp(3px, 1vw, 6px);display:grid;grid-template-columns:repeat(var(--cols),1fr);grid-template-rows:repeat(var(--rows),1fr);gap:var(--gap);width:100%;aspect-ratio:1 / 1;background:radial-gradient(120% 90% at 50% 18%,rgba(255,255,255,.12),transparent 55%),radial-gradient(120% 90% at 50% 108%,rgba(0,0,0,.22),transparent 60%),var(--board-bg);border-radius:14px;padding:calc(var(--gap) + 2px);border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 2px 7px #0006,inset 0 -1px #ffffff0f,0 14px 34px #00000038;touch-action:none;user-select:none;-webkit-user-select:none}.gem{position:relative;border:none;border-radius:24% 24% 26% 26%/26% 26% 24% 24%;padding:0;cursor:pointer;color:#ffffffeb;isolation:isolate;display:flex;align-items:center;justify-content:center;font-size:clamp(14px,4.6vw,24px);line-height:1;text-shadow:0 1px 1px rgba(0,0,0,.45),0 0 6px rgba(255,255,255,.25);background:radial-gradient(60% 44% at 33% 26%,rgba(255,255,255,.85),rgba(255,255,255,.18) 46%,transparent 66%),radial-gradient(38% 32% at 50% 46%,rgba(255,255,255,.42),transparent 44%),conic-gradient(from -58deg at 50% 46%,var(--g-light),var(--g),var(--g-dark),var(--g),var(--g-light),var(--g),var(--g-dark),var(--g),var(--g-light)),var(--g-deep);box-shadow:inset 0 2px 2px #ffffff8c,inset 0 -5px 8px #0000006b,inset 0 0 0 1px #ffffff1f,0 3px 6px #00000052;transition:transform .1s ease,box-shadow .14s ease,filter .14s ease;touch-action:none}.gem:before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(26% 20% at 31% 24%,rgba(255,255,255,.95),transparent 60%),radial-gradient(10% 8% at 68% 66%,rgba(255,255,255,.55),transparent 70%);pointer-events:none;z-index:1}.gem:hover{filter:brightness(1.08) saturate(1.05)}.gem:active{transform:scale(.94)}.gem[data-color="0"]{--g: #e23b4e;--g-light: #ff9dab;--g-dark: #a2142a;--g-deep: #5c0a18}.gem[data-color="1"]{--g: #2f7fe0;--g-light: #93c6ff;--g-dark: #1652ab;--g-deep: #0a2f6b}.gem[data-color="2"]{--g: #27a559;--g-light: #74eda1;--g-dark: #157a3f;--g-deep: #0a4423}.gem[data-color="3"]{--g: #e8a71c;--g-light: #ffdd7a;--g-dark: #b3760a;--g-deep: #6e470a}.gem[data-color="4"]{--g: #9b51e0;--g-light: #d4a8ff;--g-dark: #6d2db0;--g-deep: #40197a}.gem[data-color="5"]{--g: #17b3c4;--g-light: #82f0f9;--g-dark: #0c8794;--g-deep: #06525b}.gem.cursor{outline:3px solid var(--accent);outline-offset:2px;z-index:2}.gem.selected{transform:scale(1.08);z-index:3;box-shadow:0 0 0 3px #ffffffd9,0 0 16px 3px var(--g-light),inset 0 2px 2px #fff9,inset 0 -5px 8px #0006;animation:gem-pulse .9s ease-in-out infinite}@keyframes gem-pulse{0%,to{transform:scale(1.06);filter:brightness(1.05)}50%{transform:scale(1.12);filter:brightness(1.28)}}.gem.clearing{animation:gem-clear .2s ease forwards;z-index:4}@keyframes gem-clear{0%{transform:scale(1);filter:brightness(1)}35%{transform:scale(1.22);filter:brightness(1.7) saturate(1.3)}to{transform:scale(.05);filter:brightness(2.4);opacity:0}}.gem.clearing:after{content:"";position:absolute;inset:-35%;border-radius:50%;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.95),rgba(255,255,255,.35) 32%,transparent 60%),radial-gradient(circle at 22% 30%,#fff,transparent 8%),radial-gradient(circle at 80% 26%,#fff,transparent 7%),radial-gradient(circle at 28% 78%,#fff,transparent 7%),radial-gradient(circle at 76% 76%,#fff,transparent 6%);animation:gem-burst .34s ease-out forwards;pointer-events:none;z-index:5}@keyframes gem-burst{0%{transform:scale(.3);opacity:0}30%{opacity:1}to{transform:scale(1.7);opacity:0}}.gem.drop{animation:gem-drop .26s cubic-bezier(.34,1.56,.64,1)}@keyframes gem-drop{0%{transform:translateY(-42%) scale(.9);opacity:.25}55%{transform:translateY(6%) scale(1.05);opacity:1}78%{transform:translateY(-3%) scale(.99)}to{transform:translateY(0) scale(1)}}.gem.reject{animation:gem-reject .3s ease}@keyframes gem-reject{0%,to{transform:translate(0)}25%{transform:translate(-8%)}75%{transform:translate(8%)}}@media(prefers-reduced-motion:reduce){.gem.selected,.gem.drop{animation:none}.gem.clearing:after{animation:none;opacity:0}}