:root {
  --bg1: #fff2a8;
  --bg2: #ff8fc6;
  --bg3: #7bd8ff;
  --ink: #51325a;
  --panel: rgba(255,255,255,.78);
  --tile: rgba(255,255,255,.58);
  --tile2: rgba(255,255,255,.9);
  --accent: #ff4f9c;
  --good: #35c878;
  --bad: #8a5cff;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  font-family: ui-rounded, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 15%, rgba(255,255,255,.9) 0 8%, transparent 9%),
    radial-gradient(circle at 88% 18%, rgba(255,255,255,.5) 0 9%, transparent 10%),
    linear-gradient(135deg, var(--bg1), var(--bg2) 48%, var(--bg3));
}
.game-root {
  min-height: 100dvh;
  min-height: 100svh;
  padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  overflow: hidden;
  overscroll-behavior: none;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 14px;
}
.hud, .play-shell, .side-panel {
  background: var(--panel);
  backdrop-filter: blur(18px);
  border: 2px solid rgba(255,255,255,.75);
  box-shadow: 0 18px 45px rgba(119, 45, 117, .18);
}
.hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.spark { font-size: 34px; color: #fff; text-shadow: 0 3px 0 #ff63ad, 0 8px 18px rgba(255,79,156,.45); }
h1 { margin: 0; font-size: clamp(23px, 4vw, 38px); line-height: 1; letter-spacing: .02em; }
p { margin: 4px 0 0; font-weight: 700; opacity: .76; }
.stats { display: flex; gap: 10px; }
.stat {
  min-width: 82px;
  padding: 8px 10px;
  text-align: center;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.95);
}
.stat b { display: block; font-size: clamp(18px, 3vw, 26px); }
.stat span { display: block; font-size: 12px; font-weight: 800; opacity: .65; }
.play-shell {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(200px, 270px) minmax(320px, 1fr);
  gap: 16px;
  padding: 16px;
}
.side-panel { padding: 18px; align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.side-panel h2 { margin: 0; font-size: 25px; }
.goalbar { width: 100%; height: 16px; background: rgba(81,50,90,.12); overflow: hidden; border: 2px solid rgba(255,255,255,.8); }
.goalbar span { display:block; height:100%; width:0%; background: linear-gradient(90deg, #58e085, #fff35f, #ff4f9c); transition: width .35s ease; }
button {
  min-height: 46px;
  border: 0;
  padding: 11px 14px;
  font: inherit;
  font-weight: 900;
  color: white;
  background: linear-gradient(180deg, #ff75b6, #ff3e92);
  box-shadow: 0 8px 0 #c92872, 0 14px 22px rgba(201,40,114,.25);
  cursor: pointer;
  transform: translateY(0);
}
button:active { transform: translateY(4px); box-shadow: 0 4px 0 #c92872, 0 8px 18px rgba(201,40,114,.22); }
#shuffleBtn { background: linear-gradient(180deg, #7ddaff, #3aaef8); box-shadow: 0 8px 0 #2384c7, 0 14px 22px rgba(35,132,199,.25); }
.board-wrap { min-height: 0; display: grid; place-items: center; position: relative; }
.board {
  --cell: min(9.3vmin, 74px);
  width: calc(var(--cell) * 8);
  height: calc(var(--cell) * 8);
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  gap: max(4px, calc(var(--cell) * .065));
  padding: max(6px, calc(var(--cell) * .1));
  background: rgba(111, 57, 137, .22);
  border: 3px solid rgba(255,255,255,.75);
  box-shadow: inset 0 0 22px rgba(255,255,255,.45), 0 24px 55px rgba(75,43,108,.25);
  touch-action: none;
  user-select: none;
}
.tile {
  position: relative;
  display: grid;
  place-items: center;
  border: 0;
  padding: 0;
  min-height: 0;
  background: linear-gradient(180deg, var(--tile2), var(--tile));
  box-shadow: inset 0 -5px 0 rgba(81,50,90,.08), inset 0 4px 0 rgba(255,255,255,.9);
  cursor: pointer;
  transition: transform .16s ease, filter .16s ease, opacity .22s ease;
}
.tile.selected { outline: 4px solid #fff35f; transform: scale(1.08); z-index: 3; filter: saturate(1.25); }
.tile.hint { animation: hint 1.1s ease-in-out infinite; }
.tile.clearing { animation: pop .24s ease forwards; }
.tile.drop { animation: drop .26s ease-out; }
.candy {
  width: 86%; height: 86%;
  pointer-events: none;
  filter: drop-shadow(0 7px 4px rgba(74,38,88,.22));
}
.candy.sheet {
  display:block;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.candy.fallback {
  width: 72%; height: 72%; object-fit: contain; border-radius: 30% 55% 38% 50%;
  background: var(--c); box-shadow: inset 0 9px 12px rgba(255,255,255,.65), inset 0 -10px 12px rgba(0,0,0,.14), 0 6px 0 rgba(255,255,255,.55);
}
.toast {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  padding: 10px 16px; color: white; font-weight: 900;
  background: rgba(81,50,90,.82); opacity: 0; pointer-events: none; transition: opacity .2s ease, translate .2s ease;
}
.toast.show { opacity: 1; translate: 0 -8px; }
@keyframes pop { to { transform: scale(.15) rotate(16deg); opacity: 0; } }
@keyframes drop { from { transform: translateY(-32%); opacity: .3; } to { transform: translateY(0); opacity: 1; } }
@keyframes hint { 0%,100%{ transform: rotate(0deg) scale(1); } 35%{ transform: rotate(-4deg) scale(1.07); } 70%{ transform: rotate(4deg) scale(1.07); } }
@media (max-width: 760px) {
  .game-root { gap: 8px; padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
  .hud { padding: 9px 10px; align-items: stretch; }
  .brand p { display: none; }
  .spark { display: none; }
  .stats { flex: 1; justify-content: flex-end; gap: 5px; }
  .stat { min-width: 55px; padding: 6px 5px; }
  .play-shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 8px; padding: 8px; }
  .side-panel { order: 2; padding: 8px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 8px; }
  .side-panel h2 { font-size: 18px; }
  .side-panel p { display: none; }
  .goalbar { grid-column: 1 / -1; height: 12px; }
  .board { --cell: min(11.2vw, 58px, 8.2svh); }
}
@media (max-height: 480px) and (orientation: landscape) {
  .game-root { grid-template-rows: auto 1fr; padding: 6px; gap: 6px; }
  .hud { padding: 5px 9px; }
  h1 { font-size: 20px; } .brand p { display:none; }
  .play-shell { grid-template-columns: 190px 1fr; padding: 8px; gap: 8px; }
  .side-panel { padding: 8px; gap: 7px; }
  .side-panel h2 { font-size: 18px; }
  .side-panel p { font-size: 12px; }
  button { min-height: 38px; padding: 7px 10px; }
  .board { --cell: min(10.2svh, 52px); }
}
@media (max-height: 480px) and (orientation: landscape) {
  html, body, .game-root { height: 100dvh; max-height: 100dvh; }
  .game-root { grid-template-rows: 44px minmax(0, 1fr); }
  .hud { min-height: 0; }
  .play-shell { min-height: 0; overflow: hidden; align-items: stretch; }
  .side-panel { min-height: 0; align-self: stretch; justify-content: start; overflow: hidden; }
  .side-panel h2 { margin: 0; line-height: 1; }
  .side-panel p { margin: 0; line-height: 1.15; }
  .goalbar { height: 10px; }
  .board-wrap { min-height: 0; overflow: hidden; }
  .board { --cell: min(9.2svh, 42px); }
}