:root { --merge-factory-halo: rgba(96,167,255,.38); --merge-factory-merge-halo: rgba(96,167,255,0); }
html, body { margin: 0; background: radial-gradient(circle at top, #101424, #05060b 60%, #000); color: #e8f2ff; }
.game h2 { text-align:center; margin-top:28px; letter-spacing:.15em; font-family:"Zen Dots",sans-serif; }
.game-wrapper { max-width:760px; margin:22px auto; position:relative; }
#game { display:block; margin:0 auto; width:min(92vw,640px); height:min(92vw,640px); border-radius:16px; border:1px solid rgba(120,180,255,.28); box-shadow:0 0 56px var(--merge-factory-halo), 0 0 110px color-mix(in srgb, var(--merge-factory-halo) 65%, transparent), inset 0 0 50px rgba(0,0,0,.45), inset 0 0 120px color-mix(in srgb, var(--merge-factory-halo) 35%, transparent); touch-action:none; image-rendering:auto; background-image: radial-gradient(circle at 50% 6%, rgba(105,220,255,.16), rgba(0,0,0,0) 35%); }
#game.merge-fade { animation: mergeFactoryCanvasFade .95s ease-out; }
@keyframes mergeFactoryCanvasFade {
  0% { box-shadow:0 0 46px var(--merge-factory-halo), 0 0 86px color-mix(in srgb, var(--merge-factory-halo) 58%, transparent), 0 0 30px 6px var(--merge-factory-merge-halo), 0 0 68px 12px color-mix(in srgb, var(--merge-factory-merge-halo) 64%, transparent), inset 0 0 50px rgba(0,0,0,.45), inset 0 0 90px color-mix(in srgb, var(--merge-factory-merge-halo) 18%, transparent); }
  100% { box-shadow:0 0 56px var(--merge-factory-halo), 0 0 110px color-mix(in srgb, var(--merge-factory-halo) 65%, transparent), 0 0 0 color-mix(in srgb, var(--merge-factory-merge-halo) 0%, transparent), inset 0 0 50px rgba(0,0,0,.45), inset 0 0 120px color-mix(in srgb, var(--merge-factory-halo) 35%, transparent); }
}
.music-toggle{position:absolute;top:10px;right:10px;z-index:3;width:42px;height:42px;border-radius:999px;border:1.5px solid rgba(255,255,255,.45);background:rgba(0,0,0,.32);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(2px);transition:transform .12s ease,background .16s ease,border-color .16s ease}
.music-toggle:hover{transform:translateY(-1px);background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.72)}
.music-toggle:active{transform:translateY(0)}
.music-toggle .icon-off{display:none}
.music-toggle.is-off .icon-on{display:none}
.music-toggle.is-off .icon-off{display:inline}
.overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(2,4,8,.78); backdrop-filter:blur(6px); border-radius:16px; }
.overlay.hidden { opacity:0; pointer-events:none; }
.overlay-content { text-align:center; padding:22px 20px; max-width:420px; }
.overlay-text { line-height:1.5; margin-bottom:16px; }
.final-label { display:block; text-transform:uppercase; letter-spacing:.12em; font-size:11px; opacity:.75; margin-top:6px; }
.final-score { display:block; font-size:46px; line-height:1; margin:8px 0 2px; color:#fff3bf; text-shadow:0 0 22px rgba(255,199,71,.34), 0 8px 22px rgba(0,0,0,.55); }
.play-btn { padding:14px 34px; border:none; border-radius:999px; background:linear-gradient(180deg,#ffd96f,#ffac30); color:#1c1200; font-weight:800; letter-spacing:.04em; text-transform:uppercase; cursor:pointer; box-shadow:0 10px 0 #a85d08, 0 16px 26px rgba(0,0,0,.42), inset 0 2px 0 rgba(255,255,255,.65); transition:transform .1s ease, box-shadow .1s ease, filter .18s ease; }
.play-btn:hover { filter:brightness(1.05); transform:translateY(-1px); }
.play-btn:active { transform:translateY(4px); box-shadow:0 6px 0 #a85d08, 0 10px 18px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.5); }
.hud { max-width:640px; margin:10px auto 30px; text-align:center; }
.scoreline { background:linear-gradient(180deg, rgba(38,76,128,.26), rgba(255,255,255,.03)); border:1px solid rgba(108,176,255,.26); border-radius:12px; padding:11px; display:flex; justify-content:center; gap:12px; box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.hint { opacity:.78; font-size:14px; }


.score-status{margin:10px 0 0;color:#ffd88a;font-size:13px;min-height:1.2em}.score-status[data-type="error"]{color:#ff8f8f}.score-status[data-type="warning"]{color:#ffd88a}.score-status[data-type="info"]{color:#9dd5ff}


.leaderboard {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  background: rgba(255,255,255,0.04);
  border-radius: 12px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    0 0 25px rgba(0,0,0,0.6),
    inset 0 0 20px rgba(255,255,255,0.03);
}

.leaderboard h3 {
  margin: 0 0 10px;
  font-size: 16px;
  text-align: center;
  letter-spacing: 0.08em;
  opacity: 0.9;
}

#leaderboardList {
  list-style: none;
  padding: 0;
  margin: 0;
}

#leaderboardList li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  font-size: 14px;
  transition: 0.2s;
}

#leaderboardList li:hover {
  transform: translateX(4px);
  opacity: 1;
}

.rank {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 13px;
  background: #2c2c2c;
}

.rank.gold {
  background: linear-gradient(135deg, #ffd700, #ffb400);
  color: #000;
  box-shadow: 0 0 10px rgba(255,215,0,0.6);
}

.rank.silver {
  background: linear-gradient(135deg, #c0c0c0, #9e9e9e);
  color: #000;
}

.rank.bronze {
  background: linear-gradient(135deg, #cd7f32, #a05a2c);
}

.player-link {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}

.player-link:hover {
  text-decoration: underline;
}

.score {
  opacity: 0.7;
}

#game canvas { display:block; width:100% !important; height:100% !important; border-radius:16px; }