:root {
  --bg1: #2b1055;
  --bg2: #7597de;
  --glass: rgba(255, 255, 255, 0.12);
  --glass-b: rgba(255, 255, 255, 0.25);
  --pink: #ff4d9d;
  --gold: #ffd54a;
  --text: #fff;
  --board: clamp(280px, min(92vw, calc(100dvh - 340px)), 560px);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html, body { height: 100%; }

body {
  font-family: 'Fredoka', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--text);
  background: linear-gradient(160deg, var(--bg1), #4a1d8f 45%, #c0399f);
  overflow-x: hidden;
  user-select: none;
  -webkit-user-select: none;
}

/* ---------- Animated background ---------- */
.bg { position: fixed; inset: 0; overflow: hidden; z-index: 0; }
.blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; animation: float 14s ease-in-out infinite; }
.b1 { width: 380px; height: 380px; background: #ff4d9d; top: -100px; left: -80px; }
.b2 { width: 420px; height: 420px; background: #4cc9f0; bottom: -140px; right: -100px; animation-delay: -5s; }
.b3 { width: 300px; height: 300px; background: #ffd54a; top: 45%; left: 55%; opacity: .25; animation-delay: -9s; }
@keyframes float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(40px, -50px) scale(1.15); }
}

/* ---------- Layout ---------- */
.app {
  position: relative; z-index: 1;
  width: min(100%, 620px);
  margin: 0 auto;
  padding: 12px 12px 18px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  min-height: 100dvh;
  justify-content: center;
}

.top { width: var(--board); display: flex; justify-content: space-between; align-items: center; }
.logo {
  font-size: clamp(1.7rem, 6vw, 2.3rem); font-weight: 700; letter-spacing: .5px;
  text-shadow: 0 3px 0 rgba(0,0,0,.25), 0 0 24px rgba(255,255,255,.35);
}
.logo span {
  background: linear-gradient(90deg, #ffd54a, #ff4d9d, #4cc9f0);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.25));
}
.icon-btn {
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--glass-b);
  background: var(--glass); backdrop-filter: blur(8px); font-size: 1.15rem; cursor: pointer;
  transition: transform .15s, background .2s;
}
.icon-btn:hover { transform: scale(1.1) rotate(8deg); background: rgba(255,255,255,.22); }

/* ---------- HUD ---------- */
.hud { width: var(--board); display: grid; grid-template-columns: 1fr 1.5fr 1fr; gap: 8px; }
.stat {
  background: var(--glass); border: 1px solid var(--glass-b); backdrop-filter: blur(10px);
  border-radius: 16px; padding: 6px 8px; text-align: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.3);
}
.stat .label { display: block; font-size: .7rem; letter-spacing: 1.5px; text-transform: uppercase; opacity: .8; }
.stat strong { font-size: 1.5rem; font-weight: 700; display: block; line-height: 1.15; }
.stat.big strong { font-size: 1.9rem; color: var(--gold); text-shadow: 0 0 16px rgba(255,213,74,.6); }
.stat.low strong { color: #ff6b6b; animation: heartbeat .8s infinite; }
@keyframes heartbeat { 50% { transform: scale(1.18); } }
.stat strong.bump { animation: bump .3s; }
@keyframes bump { 50% { transform: scale(1.25); } }

/* ---------- Goal ---------- */
.goal { width: var(--board); }
.goal-text { display: flex; justify-content: space-between; font-size: .85rem; margin-bottom: 4px; opacity: .95; }
.progress {
  position: relative; height: 16px; border-radius: 10px;
  background: rgba(0,0,0,.3); box-shadow: inset 0 2px 4px rgba(0,0,0,.4);
}
.bar {
  height: 100%; width: 0; border-radius: 10px; transition: width .5s cubic-bezier(.3,1.2,.5,1);
  background: linear-gradient(90deg, #ff4d9d, #ffd54a);
  box-shadow: 0 0 12px rgba(255,213,74,.7);
}
.star {
  position: absolute; top: 50%; transform: translate(-50%, -50%); font-size: 1.35rem;
  color: rgba(255,255,255,.3); text-shadow: 0 1px 2px rgba(0,0,0,.5); transition: .3s;
}
.star.s1 { left: 50%; } .star.s2 { left: 75%; } .star.s3 { left: 100%; transform: translate(-80%, -50%); }
.star.on { color: var(--gold); text-shadow: 0 0 12px rgba(255,213,74,.9); animation: bump .5s; }

/* ---------- Board ---------- */
.board-wrap {
  padding: 10px; border-radius: 26px;
  background: linear-gradient(145deg, rgba(255,255,255,.28), rgba(255,255,255,.08));
  border: 1px solid var(--glass-b);
  box-shadow: 0 20px 50px rgba(0,0,0,.4), inset 0 2px 0 rgba(255,255,255,.35);
  backdrop-filter: blur(12px);
}
#board {
  position: relative; width: calc(var(--board) - 20px); height: calc(var(--board) - 20px);
  border-radius: 18px; overflow: hidden; touch-action: none; cursor: pointer;
  background-color: rgba(20, 6, 50, .55);
  background-image: conic-gradient(rgba(255,255,255,.07) 25%, transparent 0 50%, rgba(255,255,255,.07) 0 75%, transparent 0);
  background-size: 25% 25%;
  box-shadow: inset 0 4px 14px rgba(0,0,0,.5);
}

/* ---------- Tiles & candies ---------- */
.tile {
  position: absolute; left: 0; top: 0; width: 12.5%; height: 12.5%;
  transition: transform .32s cubic-bezier(.34, 1.3, .64, 1);
  filter: drop-shadow(0 3px 2px rgba(0,0,0,.4));
  will-change: transform;
}
.candy {
  position: absolute; inset: 9%;
  background: radial-gradient(circle at 32% 26%, var(--c1) 0, var(--c2) 48%, var(--c3) 100%);
  transition: transform .15s;
}
.candy::after { /* highlight */
  content: ''; position: absolute; left: 20%; top: 12%; width: 34%; height: 20%;
  border-radius: 50%; background: rgba(255,255,255,.7); filter: blur(1.5px); transform: rotate(-32deg);
}
.tile:hover .candy { transform: scale(1.06); }

.t0 { --c1: #ff9eb5; --c2: #ff3b6b; --c3: #b3123f; border-radius: 50%; }                                   /* merah - bulat */
.t1 { --c1: #ffd08a; --c2: #ff8f1f; --c3: #c25200; border-radius: 30%; }                                  /* oranye - kotak */
.t2 { --c1: #fff7a8; --c2: #ffd426; --c3: #c79a00; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }  /* kuning - wajik */
.t3 { --c1: #a8ffc2; --c2: #2fd066; --c3: #0b8a3a; clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%); } /* hijau - hexagon */
.t4 { --c1: #a6ecff; --c2: #2aa9f5; --c3: #0a63b3; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; }    /* biru - tetesan */
.t5 { --c1: #e1c8ff; --c2: #9a5cff; --c3: #5a1fb8; clip-path: polygon(50% 0, 62% 35%, 98% 35%, 69% 57%, 80% 92%, 50% 71%, 20% 92%, 31% 57%, 2% 35%, 38% 35%); } /* ungu - bintang */

/* special: striped */
.s-h::before, .s-v::before { content: ''; position: absolute; inset: 0; z-index: 1; }
.s-h::before { background: repeating-linear-gradient(0deg, rgba(255,255,255,.85) 0 11%, transparent 11% 28%); }
.s-v::before { background: repeating-linear-gradient(90deg, rgba(255,255,255,.85) 0 11%, transparent 11% 28%); }
.s-h, .s-v { animation: glow 1.4s ease-in-out infinite alternate; }
@keyframes glow { to { filter: brightness(1.25) saturate(1.2); } }

/* special: blast (3x3) */
.s-blast::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(circle, transparent 28%, rgba(255,255,255,.95) 32% 48%, transparent 52%);
  animation: pulse 0.9s ease-in-out infinite;
}
.s-blast { animation: glow 1s ease-in-out infinite alternate; }
@keyframes pulse { 50% { transform: scale(1.25); opacity: .6; } }

/* special: color bomb */
.t6 {
  border-radius: 50%; clip-path: none;
  background:
    radial-gradient(circle at 34% 28%, #fff 0 7%, transparent 9%),
    radial-gradient(circle, #2a1346 0 36%, transparent 38%),
    conic-gradient(#ff3b6b, #ff8f1f, #ffd426, #2fd066, #2aa9f5, #9a5cff, #ff3b6b);
  animation: bombspin 2.5s linear infinite;
  box-shadow: 0 0 14px rgba(255,255,255,.6);
}
.t6::after { display: none; }
@keyframes bombspin { to { filter: hue-rotate(360deg); } }

/* states */
.tile.sel { z-index: 3; }
.tile.sel .candy { animation: wiggle .5s ease-in-out infinite; transform: scale(1.15); }
.tile.sel { filter: drop-shadow(0 0 8px #fff) drop-shadow(0 0 14px var(--gold)); }
@keyframes wiggle { 0%, 100% { rotate: -6deg; } 50% { rotate: 6deg; } }
.tile.hint .candy { animation: hintbounce .7s ease-in-out infinite; }
@keyframes hintbounce { 50% { transform: scale(1.22); filter: brightness(1.4); } }
.candy.pop { animation: pop .3s ease-in forwards; }
@keyframes pop {
  0% { transform: scale(1); opacity: 1; filter: brightness(1); }
  35% { transform: scale(1.35); filter: brightness(1.8); }
  100% { transform: scale(0) rotate(120deg); opacity: 0; }
}
.candy.born { animation: born .5s cubic-bezier(.3,1.6,.5,1); }
@keyframes born { 0% { transform: scale(0.2); filter: brightness(3); } 100% { transform: scale(1); } }

/* ---------- FX ---------- */
#fx { position: absolute; inset: 0; pointer-events: none; z-index: 10; }
.particle {
  position: absolute; width: 8px; height: 8px; border-radius: 50%; margin: -4px 0 0 -4px;
  animation: fly .65s ease-out forwards;
}
@keyframes fly { to { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; } }
.score-float {
  position: absolute; transform: translate(-50%, -50%); font-weight: 700; font-size: clamp(1rem, 4.5vw, 1.6rem);
  color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.4), 0 0 10px var(--gold);
  animation: floatup .9s ease-out forwards;
}
@keyframes floatup { to { transform: translate(-50%, -140%); opacity: 0; } }
.beam { position: absolute; background: linear-gradient(90deg, transparent, #fff, transparent); animation: beam .45s ease-out forwards; }
.beam.h { left: 0; width: 100%; height: 12.5%; }
.beam.v { top: 0; height: 100%; width: 12.5%; background: linear-gradient(180deg, transparent, #fff, transparent); }
@keyframes beam { 0% { opacity: 1; transform: scale(1, .2); } 60% { opacity: .9; transform: scale(1, 1); } 100% { opacity: 0; transform: scale(1, 1.4); } }
.beam.v { animation-name: beamv; }
@keyframes beamv { 0% { opacity: 1; transform: scale(.2, 1); } 60% { opacity: .9; transform: scale(1, 1); } 100% { opacity: 0; transform: scale(1.4, 1); } }
.shock {
  position: absolute; width: 37.5%; height: 37.5%; border-radius: 50%; transform: translate(-50%, -50%);
  border: 4px solid #fff; box-shadow: 0 0 24px #fff; animation: shock .5s ease-out forwards;
}
@keyframes shock { 0% { transform: translate(-50%, -50%) scale(.2); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; } }
.flash { position: absolute; inset: 0; background: #fff; animation: flash .5s ease-out forwards; }
@keyframes flash { 0% { opacity: .85; } 100% { opacity: 0; } }

#banner {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%) scale(0); z-index: 20; pointer-events: none;
  font-size: clamp(1.8rem, 9vw, 3.2rem); font-weight: 700; white-space: nowrap;
  background: linear-gradient(180deg, #fff, #ffd54a 60%, #ff8f1f);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 rgba(120,30,90,.9)) drop-shadow(0 0 14px rgba(255,255,255,.6));
}
#banner.show { animation: banner 1s ease-out forwards; }
@keyframes banner {
  0% { transform: translate(-50%, -50%) scale(0) rotate(-12deg); opacity: 0; }
  25% { transform: translate(-50%, -50%) scale(1.15) rotate(3deg); opacity: 1; }
  70% { transform: translate(-50%, -50%) scale(1) rotate(0); opacity: 1; }
  100% { transform: translate(-50%, -80%) scale(1); opacity: 0; }
}
#board.shake { animation: shake .35s; }
@keyframes shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }

/* ---------- Buttons ---------- */
.controls { display: flex; gap: 10px; width: var(--board); }
.btn {
  flex: 1; font-family: inherit; font-size: 1rem; font-weight: 600; color: #fff; cursor: pointer;
  padding: 11px 10px; border: none; border-radius: 16px;
  background: linear-gradient(180deg, #ff6fb5, #e8348a);
  box-shadow: 0 5px 0 #a3185f, 0 10px 20px rgba(0,0,0,.3);
  transition: transform .1s, box-shadow .1s, filter .2s;
}
.btn:hover { filter: brightness(1.1); }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 #a3185f, 0 4px 10px rgba(0,0,0,.3); }
.btn:disabled { filter: grayscale(.8) brightness(.8); cursor: not-allowed; }
.btn em { font-style: normal; background: rgba(0,0,0,.25); padding: 1px 8px; border-radius: 10px; margin-left: 4px; font-size: .85rem; }
.btn.ghost { background: linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,.12)); box-shadow: 0 5px 0 rgba(0,0,0,.25), 0 10px 20px rgba(0,0,0,.2); max-width: 110px; }
.btn.big { font-size: 1.25rem; padding: 14px 28px; flex: none; background: linear-gradient(180deg, #ffe066, #ffa91f); box-shadow: 0 6px 0 #b86a00, 0 12px 24px rgba(0,0,0,.35); color: #5b2a00; }

/* ---------- Modal ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px;
  background: rgba(15, 4, 40, .65); backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none; transition: opacity .3s;
}
.overlay.show { opacity: 1; pointer-events: auto; }
.modal {
  width: min(92vw, 400px); text-align: center; padding: 26px 22px 24px; border-radius: 28px;
  background: linear-gradient(160deg, rgba(255,255,255,.28), rgba(255,255,255,.1));
  border: 1px solid rgba(255,255,255,.4); box-shadow: 0 30px 70px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.4);
  transform: scale(.8) translateY(20px); transition: transform .4s cubic-bezier(.3,1.5,.5,1);
}
.overlay.show .modal { transform: none; }
.modal h2 { font-size: 2.1rem; margin-bottom: 10px; text-shadow: 0 3px 0 rgba(0,0,0,.3); }
.modal p { opacity: .95; line-height: 1.45; margin-bottom: 12px; }
.modal-stars { font-size: 3rem; margin-bottom: 8px; display: flex; justify-content: center; gap: 6px; }
.modal-stars span { color: rgba(255,255,255,.25); transition: .4s; }
.modal-stars span.on { color: var(--gold); text-shadow: 0 0 20px rgba(255,213,74,.9); animation: starin .6s cubic-bezier(.3,1.8,.5,1) both; }
@keyframes starin { 0% { transform: scale(0) rotate(-90deg); } 100% { transform: scale(1) rotate(0); } }
.tips { list-style: none; text-align: left; font-size: .9rem; margin-bottom: 18px; display: grid; gap: 8px; }
.tips li { display: flex; align-items: center; gap: 10px; background: rgba(0,0,0,.2); padding: 8px 10px; border-radius: 12px; }
.mini { flex: none; width: 26px; height: 26px; border-radius: 50%; position: relative; background: radial-gradient(circle at 32% 26%, #ffd08a, #ff8f1f 50%, #c25200); overflow: hidden; }
.mini.s-h::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,.85) 0 11%, transparent 11% 28%); }
.mini.s-blast::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, transparent 28%, #fff 32% 48%, transparent 52%); }
.mini.s-bomb { background: radial-gradient(circle, #2a1346 0 36%, transparent 38%), conic-gradient(#ff3b6b, #ff8f1f, #ffd426, #2fd066, #2aa9f5, #9a5cff, #ff3b6b); }
.mini.s-h, .mini.s-blast, .mini.s-bomb { animation: none; }

@media (max-width: 420px) {
  .goal-text { font-size: .75rem; }
  .btn { font-size: .9rem; padding: 10px 6px; }
}
@media (max-height: 640px) { .tips { display: none; } }

/* ---------- Credit ---------- */
.credit { font-size: .85rem; opacity: .85; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.credit strong { background: linear-gradient(90deg, #ffd54a, #ff4d9d, #4cc9f0); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; }
.modal-credit { margin: 16px 0 0 !important; font-size: .9rem; opacity: .9; }
.modal-credit strong { color: var(--gold); }