.gm-sugar-match-screen {
  --sm-cream: #f5edda;
  --sm-muted: #b8c5c5;
  --sm-gold: #edc77d;
  position: relative;
  isolation: isolate;
  display: flex;
  width: min(100%, 520px);
  height: min(920px, 100dvh);
  min-height: min(640px, 100dvh);
  flex-direction: column;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid #bb955766;
  border-radius: 30px;
  color: var(--sm-cream);
  background: radial-gradient(ellipse at 50% 37%, #174843 0, #102d38 43%, #0b192b 100%);
  box-shadow: 0 30px 90px #030914b8;
  font: 500 14px/1.35 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.gm-sugar-match-screen,
.gm-sugar-match-screen * {
  box-sizing: border-box;
}

.gm-sugar-match-screen::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(circle at 12% 20%, #dca85828 0 1px, transparent 2px),
    radial-gradient(circle at 81% 28%, #dca85820 0 1px, transparent 2px),
    linear-gradient(120deg, transparent 32%, #63b29c0a 50%, transparent 68%);
  background-size: 51px 49px, 73px 67px, 100% 100%;
  content: "";
  opacity: .55;
  pointer-events: none;
}

.gm-sugar-match-screen .gm-sugar-top {
  display: grid;
  height: 66px;
  flex: 0 0 66px;
  grid-template-columns: 40px minmax(0, 1fr) 40px;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid #c8a76a26;
  background: linear-gradient(180deg, #071521bd, #0b1a2500);
}

.gm-sugar-match-screen .gm-sugar-icon-button {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  padding: 0;
  border: 1px solid #dec18455;
  border-radius: 14px;
  color: var(--sm-cream);
  background: linear-gradient(145deg, #22453e, #122936);
  box-shadow: inset 0 1px #fff2, 0 5px 13px #03091255;
  cursor: pointer;
  font: inherit;
  font-size: 21px;
}

.gm-sugar-match-screen .gm-sugar-brand {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 9px;
  overflow: hidden;
  color: #fff0ca;
  font: 700 17px/1 Georgia, serif;
  letter-spacing: .25px;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 2px 10px #0008;
}

.gm-sugar-match-screen .gm-sugar-brand-mark {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  place-items: center;
  border: 1px solid #f0cc83;
  border-radius: 50%;
  color: #152f36;
  background: radial-gradient(circle at 35% 30%, #fff2c2, #b78239 54%, #332a2b 100%);
  box-shadow: 0 0 14px #e9bb6044;
  font: 700 17px Georgia, serif;
}

.gm-sugar-match-screen .gm-sugar-settings {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 14px;
  color: #e7d5ae;
  background: rgb(10 26 35 / 32%);
  cursor: pointer;
  font: inherit;
  font-size: 20px;
}

.gm-sugar-match-screen .gm-sugar-main {
  display: flex;
  min-height: 0;
  height: calc(100% - 66px);
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  padding: clamp(8px, 1.8vh, 15px) 16px max(14px, env(safe-area-inset-bottom));
}

.gm-sugar-match-screen .gm-sugar-level {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  color: var(--sm-gold);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.gm-sugar-match-screen .gm-sugar-level::before,
.gm-sugar-match-screen .gm-sugar-level::after {
  width: 23px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #d4a960);
  content: "";
}

.gm-sugar-match-screen .gm-sugar-level::after { transform: rotate(180deg); }

.gm-sugar-match-screen .gm-sugar-title {
  margin: 4px 0 2px;
  color: #fff0ca;
  font: 700 clamp(24px, 6vw, 32px)/1.12 Georgia, serif;
  letter-spacing: .2px;
  text-align: center;
  text-shadow: 0 3px 18px #0008;
}

.gm-sugar-match-screen .gm-sugar-subtitle {
  margin: 0;
  color: #c6d4ce;
  font-size: 11px;
  text-align: center;
}

.gm-sugar-match-screen .gm-sugar-hud {
  display: grid;
  width: min(100%, 400px);
  flex: 0 0 auto;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin: 15px 0 11px;
}

.gm-sugar-match-screen .gm-sugar-hud-panel {
  min-width: 0;
  min-height: 55px;
  padding: 7px 10px;
  border: 1px solid #d4b4754c;
  border-radius: 15px;
  background: linear-gradient(145deg, #173941ed, #102431f5);
  box-shadow: inset 0 1px #fff1, 0 5px 14px #03091255;
  text-align: center;
}

.gm-sugar-match-screen .gm-sugar-label {
  display: block;
  color: #bacbc3;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1.4px;
}

.gm-sugar-match-screen .gm-sugar-value {
  display: block;
  margin-top: 3px;
  color: #fff0c6;
  font: 700 17px/1 Georgia, serif;
  font-variant-numeric: tabular-nums;
}

.gm-sugar-match-screen .gm-sugar-target {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.gm-sugar-match-screen .gm-sugar-target .gm-sugar-value { font-size: 15px; }

.gm-sugar-match-screen .gm-sugar-target-gem {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  filter: drop-shadow(0 0 7px #39dfa477);
}

.gm-sugar-match-screen .gm-sugar-progress {
  height: 4px;
  margin-top: 5px;
  overflow: hidden;
  border-radius: 9px;
  background: #06141b;
}

.gm-sugar-match-screen .gm-sugar-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #30ae85, #f0d389);
  box-shadow: 0 0 8px #44d9a377;
  transition: width .22s ease;
}

.gm-sugar-match-screen .gm-sugar-board-frame {
  position: relative;
  width: min(100%, 430px);
  aspect-ratio: 1;
  flex: 0 1 auto;
  padding: clamp(8px, 2.5vw, 11px);
  border: 1px solid #e2c07b8a;
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgb(255 234 187 / 12%), transparent 28%),
    linear-gradient(145deg, #53664c, #253e3b 30%, #142a35 78%, #c29a56);
  box-shadow: 0 18px 35px #020b16a8, inset 0 1px #fff6, inset 0 -5px 11px #040c15a6;
}

.gm-sugar-match-screen .gm-sugar-board-frame::before {
  position: absolute;
  z-index: 0;
  inset: 5px;
  border: 1px solid #ffdc995c;
  border-radius: 17px;
  content: "";
  pointer-events: none;
}

.gm-sugar-match-screen .gm-sugar-board {
  position: relative;
  z-index: 1;
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-template-rows: repeat(8, minmax(0, 1fr));
  gap: clamp(2px, .8vw, 4px);
  padding: clamp(4px, 1.4vw, 6px);
  border: 1px solid #bbd6c354;
  border-radius: 14px;
  background:
    radial-gradient(ellipse at 50% 0%, rgb(50 117 95 / 36%), transparent 64%),
    linear-gradient(135deg, #0d282f, #102d39 58%, #0c202c);
  box-shadow: inset 0 3px 12px #020b12bf, inset 0 0 0 1px #ffffff08;
}

.gm-sugar-match-screen .gm-sugar-cell {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  place-items: center;
  aspect-ratio: 1;
  padding: 1px;
  border: 1px solid #9ccfc11a;
  border-radius: clamp(5px, 1.7vw, 8px);
  background: linear-gradient(145deg, rgb(33 81 74 / 61%), rgb(16 44 55 / 68%));
  cursor: pointer;
  touch-action: none;
  transition: transform .12s ease, background .12s ease, box-shadow .12s ease;
  -webkit-tap-highlight-color: transparent;
}

.gm-sugar-match-screen .gm-sugar-cell:hover {
  background: linear-gradient(145deg, #347263aa, #173c47);
}

.gm-sugar-match-screen .gm-sugar-cell[aria-pressed="true"] {
  z-index: 1;
  transform: scale(1.08);
  border-color: #fff0af;
  box-shadow: 0 0 0 2px #f4d37d8c, 0 0 15px #f7d27885;
}

.gm-sugar-match-screen .gm-sugar-gem {
  display: block;
  width: 92%;
  height: 92%;
  overflow: visible;
  filter: drop-shadow(0 2px 3px #0008);
  animation: gm-sugar-in .2s ease-out both;
  pointer-events: none;
}

.gm-sugar-match-screen .gm-sugar-cell.gm-sugar-clearing .gm-sugar-gem {
  animation: gm-sugar-pop .2s ease-in both;
}

.gm-sugar-match-screen .gm-sugar-cell:disabled {
  border-color: transparent;
  background: transparent;
  cursor: default;
}

.gm-sugar-match-screen .gm-sugar-bottom {
  display: flex;
  width: min(100%, 430px);
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 11px;
}

.gm-sugar-match-screen .gm-sugar-goal-copy {
  color: #c6d4ca;
  font-size: 10px;
}

.gm-sugar-match-screen .gm-sugar-goal-copy b {
  display: block;
  margin-top: 2px;
  color: #fff0c7;
  font: 700 13px Georgia, serif;
}

.gm-sugar-match-screen .gm-sugar-moves {
  min-width: 87px;
  padding: 7px 12px;
  border: 1px solid #e6c77974;
  border-radius: 14px;
  background: linear-gradient(145deg, #284a45, #132e39);
  box-shadow: inset 0 1px #fff2;
  text-align: center;
}

.gm-sugar-match-screen .gm-sugar-moves b {
  display: block;
  color: #ffdc91;
  font: 700 20px/1 Georgia, serif;
  font-variant-numeric: tabular-nums;
}

.gm-sugar-match-screen .gm-sugar-moves small {
  color: #d3dfd4;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1px;
}

.gm-sugar-match-screen .gm-sugar-message {
  min-height: 18px;
  margin: 10px 0 0;
  color: #f2dba8;
  font-size: 10px;
  text-align: center;
}

.gm-sugar-match-screen .gm-sugar-hint {
  margin: auto 0 0;
  padding-top: 8px;
  color: #9db1b0;
  font-size: 9px;
  text-align: center;
}

.gm-sugar-match-screen .gm-sugar-result {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: #06111bd9;
  backdrop-filter: blur(8px);
}

.gm-sugar-match-screen .gm-sugar-result-card {
  width: min(100%, 320px);
  padding: 26px 22px;
  border: 1px solid #e8c77b88;
  border-radius: 24px;
  background: linear-gradient(145deg, #1e5148, #122c3a 68%, #251d2d);
  box-shadow: 0 20px 55px #0009;
  text-align: center;
}

.gm-sugar-match-screen .gm-sugar-result-card h2 {
  margin: 3px 0 8px;
  color: #fff0c7;
  font: 700 27px Georgia, serif;
}

.gm-sugar-match-screen .gm-sugar-result-card p {
  color: #cedbd3;
  font-size: 12px;
}

.gm-sugar-match-screen .gm-sugar-result-card button {
  padding: 11px 22px;
  border: 1px solid #ffe09b;
  border-radius: 14px;
  color: #122a32;
  background: linear-gradient(135deg, #e8c579, #b88642);
  box-shadow: 0 4px 0 #71512c, inset 0 1px #fff8;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
}

.gm-sugar-match-screen button:focus-visible {
  outline: 2px solid #fff0ad;
  outline-offset: 2px;
}

.gm-sugar-match-screen button:active:not(:disabled) {
  filter: brightness(1.1);
}

@keyframes gm-sugar-in {
  from { transform: scale(.55); opacity: .3; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes gm-sugar-pop {
  to { transform: scale(.2) rotate(24deg); opacity: 0; }
}

@media (max-width: 380px) {
  .gm-sugar-match-screen { border-radius: 23px; }
  .gm-sugar-match-screen .gm-sugar-main { padding-inline: 11px; }
  .gm-sugar-match-screen .gm-sugar-board-frame { padding: 8px; }
  .gm-sugar-match-screen .gm-sugar-board { gap: 2px; padding: 5px; }
  .gm-sugar-match-screen .gm-sugar-cell { border-radius: 6px; }
  .gm-sugar-match-screen .gm-sugar-hud { gap: 5px; }
  .gm-sugar-match-screen .gm-sugar-hud-panel { padding-inline: 6px; }
}

@media (max-height: 740px) {
  .gm-sugar-match-screen { min-height: 0; }
  .gm-sugar-match-screen .gm-sugar-main { padding-top: 8px; }
  .gm-sugar-match-screen .gm-sugar-subtitle { display: none; }
  .gm-sugar-match-screen .gm-sugar-hud { margin: 9px 0 7px; }
  .gm-sugar-match-screen .gm-sugar-board-frame {
    width: min(100%, calc(100dvh - 285px), 430px);
    padding: 8px;
  }
  .gm-sugar-match-screen .gm-sugar-board { gap: 2px; padding: 5px; }
  .gm-sugar-match-screen .gm-sugar-bottom { margin-top: 7px; }
  .gm-sugar-match-screen .gm-sugar-hint { padding-top: 3px; }
}

@media (prefers-reduced-motion: reduce) {
  .gm-sugar-match-screen *,
  .gm-sugar-match-screen *::before,
  .gm-sugar-match-screen *::after {
    animation: none !important;
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

.gm-sugar-versus { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:8px; margin:12px 0; padding:12px 14px 10px; border:1px solid rgba(226,184,107,.38); border-radius:18px; background:linear-gradient(145deg,rgba(18,40,51,.96),rgba(11,25,35,.96)); box-shadow:0 12px 28px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.06); }
.gm-sugar-versus>div { display:grid; grid-template-columns:34px minmax(0,1fr); grid-template-rows:auto auto; align-items:center; column-gap:8px; min-width:0; }
.gm-sugar-versus .avatar { grid-row:1/3; width:32px; height:32px; min-width:32px; border:1px solid #dfbd7b; box-shadow:0 0 0 2px rgba(226,184,107,.12); }
.gm-sugar-player-avatar { grid-row:1/3; display:grid; place-items:center; width:32px; height:32px; border:1px solid #dfbd7b; border-radius:50%; background:linear-gradient(145deg,#456876,#193c46); color:#fff3d8; font-size:14px; font-weight:800; text-transform:uppercase; }
.gm-sugar-versus>div:nth-of-type(2) .gm-sugar-player-avatar { justify-self:end; grid-column:2; grid-row:1/3; }
.gm-sugar-versus>div:nth-of-type(2) .avatar { justify-self:end; grid-column:2; }
.gm-sugar-versus>div:nth-of-type(2) b,.gm-sugar-versus>div:nth-of-type(2) strong { grid-column:1; text-align:right; }
.gm-sugar-versus b { overflow:hidden; color:#f5e9d1; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.gm-sugar-versus strong { color:#efca7c; font-variant-numeric:tabular-nums; font-size:19px; line-height:1.1; }
.gm-sugar-vs { color:#d6b778; font-size:10px; font-weight:900; letter-spacing:.16em; }
.gm-sugar-versus>p { grid-column:1/-1; margin:2px 0 0; color:#aab8ba; font-size:10px; text-align:center; }
.gm-sugar-online-button { display:block; width:min(100%,420px); min-height:48px; margin:10px auto 4px; border:1px solid #e4c17c; border-radius:16px; background:linear-gradient(110deg,#d6a849,#f3d995 48%,#ba8737); box-shadow:0 8px 22px rgba(174,127,48,.24),inset 0 1px rgba(255,255,255,.65); color:#192b34; font:800 14px/1 inherit; letter-spacing:.02em; }
.gm-sugar-cell:disabled { pointer-events:none; }
.gm-sugar-match-screen [data-action="gm-sugar-cell"]:disabled:not(.gm-sugar-clearing) { opacity:.88; }

/* Zümrüt Diyarı: original mineral sprites, responsive board and feedback. */
.gm-sugar-match-screen.zd-screen{height:auto;min-height:100dvh;overflow:visible;border-radius:24px;background:radial-gradient(circle at 50% 8%,#17624e 0,#123d45 28%,#071e31 74%,#071521 100%)}
.zd-screen .zd-main{height:auto;min-height:calc(100dvh - 66px);padding:7px 10px max(12px,env(safe-area-inset-bottom))}
.zd-screen .gm-sugar-title{font-size:clamp(22px,5vw,27px);margin:2px 0 0}
.zd-screen .zd-collection{margin:2px 0 0;color:#cde9bf;font:700 9px/1.2 system-ui,sans-serif;letter-spacing:.12em;text-align:center}
.zd-screen .gm-sugar-versus{width:100%;margin:6px 0;padding:8px 10px}
.zd-screen .zd-hud{width:100%;margin:6px 0;gap:6px}
.zd-screen .gm-sugar-hud-panel{min-height:48px;padding:6px}
.zd-screen .zd-board-frame{width:100%;max-width:520px;height:max(50dvh,min(100vw,430px));aspect-ratio:auto;flex:none;padding:8px;border:2px solid #d5b16e;border-radius:20px;background:linear-gradient(145deg,#7c6447,#1e5b4b 20%,#0b2b38 82%,#b1894f);box-shadow:0 15px 34px #0009,inset 0 1px #fff8}
.zd-screen .zd-board{height:100%;gap:clamp(2px,.7vw,4px);padding:5px;grid-template-rows:repeat(8,minmax(0,1fr));background:radial-gradient(circle at 50% 0,#2a765e,#0d3744 55%,#0a2739)}
.zd-screen .zd-cell{aspect-ratio:auto;overflow:hidden;border-radius:8px;border:1px solid #a7d1bd35;background:linear-gradient(145deg,#1d685dbb,#0c3448db)}
.zd-screen .zd-cell:disabled{opacity:1;background:linear-gradient(145deg,#1a5b53,#103247)}
.zd-screen .zd-cell.zd-blocked{background:#102d3b;cursor:not-allowed}
.zd-screen .zd-cell.zd-changed .zd-sprite{animation:zd-fall .48s cubic-bezier(.2,.9,.23,1.18) both}
.zd-screen .zd-cell.zd-hinted{z-index:3;box-shadow:0 0 0 3px #f8db83,0 0 18px #ffe090aa;animation:zd-hint-pulse .8s ease-in-out infinite alternate}
.zd-screen .zd-sprite{display:block;width:100%;height:100%;background-repeat:no-repeat;background-size:300% 200%;filter:drop-shadow(0 3px 4px #0009);pointer-events:none}
.zd-screen .zd-mineral{background-image:url('/game-scenes/assets/zumrut-diyari/minerals-v1.png')}
.zd-screen .zd-special{background-image:url('/game-scenes/assets/zumrut-diyari/powers-blockers-v1.png')}
.zd-screen .zd-art-0{background-position:0% 0%}.zd-screen .zd-art-1{background-position:50% 0%}.zd-screen .zd-art-2{background-position:100% 0%}
.zd-screen .zd-art-3{background-position:0% 100%}.zd-screen .zd-art-4{background-position:50% 100%}.zd-screen .zd-art-5{background-position:100% 100%}
.zd-screen .zd-blocked .zd-mineral{opacity:.4}.zd-screen .zd-blocked .zd-special{position:absolute;inset:0;z-index:2}
.zd-screen .zd-wisp{background-image:url('/game-scenes/assets/zumrut-diyari/crystal-bird-v1.png');background-size:contain;background-position:center;animation:zd-wisp 1.1s ease-in-out infinite alternate}
.zd-screen .zd-effects{position:absolute;z-index:5;inset:0;pointer-events:none;overflow:hidden}
.zd-screen .zd-score-fly{position:absolute;top:45%;left:50%;padding:4px 12px;border:1px solid #f2d494;border-radius:18px;background:#153b39df;color:#fff7bd;font:800 25px/1.3 system-ui,sans-serif;text-shadow:0 2px 7px #000;white-space:nowrap;animation:zd-score-flight .7s ease-out both}
.zd-screen .zd-bottom{width:100%;margin:7px 0 0}
.zd-screen .zd-controls{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;width:100%;margin:7px 0}
.zd-screen .zd-controls button,.zd-screen .zd-controls label{display:inline-flex;align-items:center;gap:4px;min-height:31px;padding:5px 9px;border:1px solid #b3cbad5c;border-radius:11px;background:#143a42;color:#f2ebcf;font:700 11px system-ui,sans-serif}
.zd-screen .zd-controls input{width:65px;accent-color:#7fd8a5}
.zd-screen .gm-sugar-message{font-size:11px;margin:6px 0;min-height:17px}
.zd-screen .gm-sugar-online-button{margin:7px auto;min-height:43px}
.zd-screen .zd-entry{margin:6px 0 0;color:#dce3c7;font-size:10px;text-align:center}
@keyframes zd-fall{from{transform:translateY(-32px) scale(.75);opacity:.25}55%{transform:translateY(4px) scale(1.08);opacity:1}to{transform:translateY(0) scale(1);opacity:1}}
@keyframes zd-score-flight{from{transform:translate(-50%,25px) scale(.65);opacity:0}25%{opacity:1}to{transform:translate(-50%,-66px) scale(1.08);opacity:0}}
@keyframes zd-wisp{to{transform:translateY(-3px) rotate(8deg);filter:drop-shadow(0 0 12px #a6ffbc)}}
@keyframes zd-hint-pulse{to{box-shadow:0 0 0 4px #f8db83,0 0 28px #ffe090}}
@media(max-height:740px){.zd-screen .zd-board-frame{width:100%;height:max(50dvh,min(100vw,430px))}.zd-screen .gm-sugar-subtitle{display:none}}
@media(prefers-reduced-motion:reduce){.zd-screen .zd-cell.zd-changed .zd-sprite,.zd-screen .zd-score-fly,.zd-screen .zd-wisp{animation:none}}
.zd-preview-page{display:grid;place-items:start center;margin:0;min-height:100dvh;background:#071521}
.zd-preview-page #game{width:100%;max-width:520px}

/* Zümrüt Diyarı play feedback and end scene. */
.zd-screen{--zd-gold:#f7d687;--zd-mint:#76e6b6}
.zd-screen .gm-sugar-top{background:linear-gradient(180deg,#061622f5,#0a2d35d1);border-bottom-color:#b8e2ad30}
.zd-screen .gm-sugar-brand{font-size:clamp(19px,5vw,23px);font-weight:800;letter-spacing:.04em;text-shadow:0 2px 0 #704f29,0 5px 18px #e4b5625c}
.zd-screen .gm-sugar-brand-mark{box-shadow:0 0 0 3px #e4c47729,0 0 23px #f2d59165,inset 0 1px #fff}
.zd-screen .gm-sugar-level{color:#ffdd92;letter-spacing:.2em}
.zd-screen .gm-sugar-title{color:#fff0b3;text-shadow:0 2px 0 #8a542e,0 6px 19px #f2b4546b}
.zd-screen .gm-sugar-hud-panel{border:1px solid #d9d4a463;border-radius:15px;background:linear-gradient(145deg,#214f4aee,#0d293bee);box-shadow:inset 0 1px #e6fff428,0 4px 13px #00152358}
.zd-screen .gm-sugar-hud-panel:last-child{background:linear-gradient(145deg,#466440,#203934 75%,#162b35)}
.zd-screen .gm-sugar-value{color:#fff1c0;text-shadow:0 0 14px #ffca4c73;font-variant-numeric:tabular-nums}
.zd-screen .zd-board-frame{isolation:isolate;background:linear-gradient(145deg,#dfc07e,#476852 15%,#103f43 80%,#e2b86c);box-shadow:0 19px 35px #000b,0 0 0 4px #f9d98b17,inset 0 2px #fff7}
.zd-screen .zd-board-frame:after{position:absolute;inset:1px;border-radius:18px;background:linear-gradient(110deg,transparent 20%,#fff6 48%,transparent 67%);background-size:300% 100%;animation:zd-frame-shine 6s ease-in-out infinite;content:"";pointer-events:none}
.zd-screen .zd-board{box-shadow:inset 0 4px 14px #020d18d9,0 0 0 1px #d0f1c049}
.zd-screen .zd-cell{border:1px solid #9ed9c039;background:radial-gradient(circle at 33% 23%,#2f796e,#123d4b 70%);box-shadow:inset 0 1px #c4ffe328,inset 0 -3px #031d31b8,0 2px 3px #020c19a6;transition:transform .16s cubic-bezier(.2,1.5,.4,1),filter .15s,box-shadow .15s}
.zd-screen .zd-cell:not(:disabled):hover{transform:translateY(-2px) scale(1.06);filter:brightness(1.2);box-shadow:0 0 12px #b5f7be66,inset 0 1px #fff7}
.zd-screen .zd-cell[aria-pressed="true"]{transform:translateY(-3px) scale(1.12);border-color:#ffeba4;box-shadow:0 0 0 2px #ffdc7d,0 0 22px #ffe583d9;animation:zd-select .35s cubic-bezier(.2,1.5,.4,1)}
.zd-screen .zd-sprite{background-size:300% 200%;filter:drop-shadow(0 3px 2px #000d) saturate(1.15) contrast(1.07)}
.zd-screen .zd-cell.zd-changed .zd-sprite{animation:zd-fall .55s cubic-bezier(.14,.94,.25,1.16) both}
.zd-screen .zd-cell.zd-changed:after{position:absolute;z-index:2;inset:-14%;border-radius:50%;background:radial-gradient(circle,#fffbd4dd 0,#b6ffcf7a 19%,transparent 62%);content:"";animation:zd-gem-spark .62s ease-out both;pointer-events:none}
.zd-screen .zd-impact{animation:zd-board-hit .5s ease-out}
.zd-screen .zd-combo-ring{position:absolute;top:50%;left:50%;width:28%;aspect-ratio:1;border:5px solid #ffefac;border-radius:50%;box-shadow:0 0 30px #fff1a0,0 0 65px #6cfac0;transform:translate(-50%,-50%);animation:zd-ring .75s ease-out both}
.zd-screen .zd-combo-title{position:absolute;z-index:2;top:32%;left:50%;width:95%;color:#fff7be;font:900 clamp(19px,5vw,29px)/1.1 system-ui,sans-serif;letter-spacing:.06em;text-align:center;text-shadow:0 3px 0 #78431a,0 0 16px #fff,0 0 30px #ffbd4d;transform:translateX(-50%);animation:zd-combo .82s ease-out both}
.zd-screen .zd-score-fly{top:51%;font-size:clamp(24px,6vw,34px);border:2px solid #ffe6a7;background:#174b49ec;box-shadow:0 0 25px #fff0a88c;animation:zd-score-flight .85s ease-out both}
.zd-screen .gm-sugar-moves{border-color:#e9ce79b3;background:linear-gradient(135deg,#305e4e,#14353d);box-shadow:0 4px 13px #00182495,inset 0 1px #fff3}
.zd-screen .gm-sugar-message{color:#ffe2a3;font-size:12px;font-weight:700;text-shadow:0 1px 5px #000}
.zd-screen .zd-controls button{cursor:pointer;transition:transform .15s,background .15s,box-shadow .15s}
.zd-screen .zd-controls button:hover{transform:translateY(-2px);background:#235b54;box-shadow:0 4px 13px #0007}
.gm-sugar-match-screen.zd-screen{background:linear-gradient(180deg,#071922b8 0%,#092329b2 37%,#071923df 100%),url('/game-scenes/assets/zumrut-diyari/mine-background-v1.webp') center center/cover no-repeat}
.zd-screen .zd-crest{display:block;width:47px;height:47px;flex:0 0 47px;object-fit:contain;filter:drop-shadow(0 3px 6px #000b) drop-shadow(0 0 10px #68daa967)}
.zd-screen .gm-sugar-brand{gap:4px;font-size:clamp(17px,4.5vw,23px)}
.zd-screen .zd-board{touch-action:none}
.zd-screen .zd-cell.zd-changed{overflow:visible;z-index:3}
.zd-screen .zd-cell.zd-changed .zd-sprite{position:relative;z-index:2;animation:zd-fall-distance .78s cubic-bezier(.16,.83,.24,1.14) both;animation-delay:calc((8 - var(--zd-drop,1)) * 22ms)}
.zd-screen .zd-ghost{position:absolute;z-index:6;display:block;pointer-events:none;animation:zd-ghost-burst .54s cubic-bezier(.16,.9,.3,1) both}
.zd-screen .zd-ghost .zd-sprite{width:100%;height:100%;filter:drop-shadow(0 0 12px #fff7bd) brightness(1.8)}
.zd-screen .zd-cell.zd-dragging{z-index:9;transition:none;filter:brightness(1.36) drop-shadow(0 0 12px #ffe59a);border-color:#ffefb1;box-shadow:0 0 0 3px #ffe090,0 0 24px #f1fba7}
.zd-screen .zd-cell.zd-rejected{z-index:8;border-color:#ff9e8c;box-shadow:0 0 0 3px #ff785977,0 0 22px #ff7859;filter:brightness(1.2)}
@keyframes zd-real-fall{0%{transform:translateY(var(--zd-fall-px, -42px)) scale(.96);opacity:1}72%{transform:translateY(6px) scale(1.05)}86%{transform:translateY(-3px) scale(.99)}100%{transform:translateY(0) scale(1);opacity:1}}
.zd-screen .zd-swipe-line{position:absolute;z-index:10;display:block;width:0;height:5px;border-radius:5px;background:linear-gradient(90deg,#fff6ca11,#fff4a2,#adfbdc);box-shadow:0 0 8px #ffe59f,0 0 16px #8ce9bf;opacity:0;transform-origin:left center;pointer-events:none;transition:opacity .08s}
.zd-screen .zd-swipe-line:after{position:absolute;right:-2px;top:-5px;width:0;height:0;border-left:14px solid #fff4b0;border-top:8px solid transparent;border-bottom:8px solid transparent;content:"";filter:drop-shadow(0 0 5px #fff)}
.zd-screen .zd-swipe-line.is-visible{opacity:1}
.zd-preview-page{background:#071923 url('/game-scenes/assets/zumrut-diyari/mine-background-v1.webp') center/cover fixed}
.zd-screen::before{z-index:-1;opacity:.8;background:radial-gradient(circle at 18% 18%,#aaffd04a 0 2px,transparent 3px),radial-gradient(circle at 78% 35%,#ffe6a643 0 2px,transparent 3px),radial-gradient(ellipse at 50% 65%,#2e92782b,transparent 68%);background-size:83px 91px,127px 113px,100% 100%;animation:zd-cave-drift 13s linear infinite}
.zd-screen::after{position:absolute;z-index:-1;inset:0;content:"";pointer-events:none;background:linear-gradient(120deg,transparent 25%,#6de5b30d 43%,#ffdc7c14 50%,transparent 64%);background-size:260% 100%;animation:zd-cave-light 8s ease-in-out infinite alternate}
.zd-screen .zd-cell.zd-changed .zd-sprite{animation:zd-fall-distance .55s cubic-bezier(.14,.94,.25,1.16) both}
.zd-screen .zd-controls button[aria-pressed="true"]{border-color:#ffdb88;background:#47765f;box-shadow:0 0 13px #d9ff9b55}
.zd-screen .zd-board-frame.zd-shatter{animation:zd-screen-shatter 1.05s ease-out both}
.zd-screen .zd-board-frame.zd-shatter .zd-cell{animation:zd-crystal-break .75s ease-out both;animation-delay:calc(var(--zd-drop,1) * 35ms)}
@keyframes zd-cave-drift{from{background-position:0 0,0 0,center}to{background-position:83px -91px,-127px 113px,center}}
@keyframes zd-cave-light{from{background-position:0 0}to{background-position:100% 0}}
@keyframes zd-fall-distance{from{transform:translateY(calc(var(--zd-drop,1) * -52px)) scale(.72);opacity:0}65%{transform:translateY(7px) scale(1.1);opacity:1}82%{transform:translateY(-3px) scale(.97)}to{transform:translateY(0) scale(1);opacity:1}}
@keyframes zd-ghost-burst{0%{transform:scale(1);opacity:1}38%{transform:scale(1.25) rotate(8deg);opacity:1}100%{transform:scale(.2) rotate(35deg);opacity:0}}
@keyframes zd-screen-shatter{0%{filter:brightness(1);transform:scale(1)}24%{filter:brightness(2.3);transform:scale(1.035)}42%{filter:brightness(1.25);transform:rotate(-.6deg)}63%{filter:brightness(1.8);transform:rotate(.6deg)}100%{filter:brightness(1);transform:scale(1)}}
@keyframes zd-crystal-break{0%{box-shadow:inset 0 0 0 #fff0}30%{box-shadow:inset 0 0 20px #fff,0 0 25px #baffd9}100%{box-shadow:inset 0 0 0 #fff0}}
@media(prefers-reduced-motion:reduce){.zd-screen::before,.zd-screen::after,.zd-screen .zd-cell.zd-changed .zd-sprite,.zd-screen .zd-board-frame.zd-shatter,.zd-screen .zd-board-frame.zd-shatter .zd-cell{animation:none!important}}

.zd-screen .zd-result{position:fixed;z-index:1000;inset:0;display:grid;place-items:center;overflow:auto;padding:24px;background:radial-gradient(circle at 50% 38%,#18574cdd,#06121cf2 68%);backdrop-filter:blur(16px);animation:zd-result-back .4s ease-out both}
.zd-screen .zd-result-card{position:relative;z-index:2;width:min(100%,420px);max-height:calc(100dvh - 36px);overflow:auto;padding:25px 25px 28px;border:2px solid #ffe1a4;border-radius:30px;background:radial-gradient(circle at 50% 0,#386c52,#103e42 45%,#0a2234 100%);box-shadow:0 0 0 8px #e7bd7130,0 30px 90px #000d,inset 0 2px #fff6;text-align:center;animation:zd-result-pop .65s cubic-bezier(.18,1.45,.4,1) both}
.zd-screen .zd-result-card:before{position:absolute;inset:9px;border:1px solid #f0d69863;border-radius:22px;content:"";pointer-events:none}
.zd-screen .zd-result-halo{display:grid;place-items:center;width:112px;height:112px;margin:0 auto 12px;border:3px solid #f9df9b;border-radius:50%;background:radial-gradient(circle at 38% 25%,#a7ffcb,#238567 46%,#123d48 80%);box-shadow:0 0 0 9px #f6d58124,0 0 48px #a6f5b7aa,inset 0 4px #fff9;color:#f6e29f;font:900 62px/1 Georgia,serif;text-shadow:0 3px 6px #033;animation:zd-halo 1.5s ease-in-out infinite alternate}
.zd-screen .zd-result-kicker{color:#d8f3bf;font:900 10px/1.4 system-ui,sans-serif;letter-spacing:.17em}
.zd-screen .zd-result-card h2{margin:9px 0 0;color:#fff1b2;font:1000 clamp(32px,9vw,48px)/1 system-ui,sans-serif;letter-spacing:-.04em;text-shadow:0 4px 0 #865328,0 0 25px #ffd76ca1}
.zd-screen .zd-result-stars{margin:13px 0 3px;color:#ffdf78;font:900 27px/1 system-ui,sans-serif;letter-spacing:.15em;text-shadow:0 0 16px #ffe581}
.zd-screen .zd-result-copy{min-height:38px;margin:10px 0 15px;color:#e1f4e3;font:600 13px/1.4 system-ui,sans-serif}
.zd-screen .zd-result-stats{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:18px}
.zd-screen .zd-result-stats>span{display:grid;gap:4px;padding:11px 7px;border:1px solid #d6dcaa6e;border-radius:14px;background:#092835a8}
.zd-screen .zd-result-stats b{color:#ffe7a2;font:900 25px/1 system-ui,sans-serif;font-variant-numeric:tabular-nums}
.zd-screen .zd-result-stats small{color:#bfdcc9;font:800 9px/1 system-ui,sans-serif;letter-spacing:.09em}
.zd-screen .zd-result-card button{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:50px;border-radius:15px;background:linear-gradient(180deg,#ffe9aa,#e3ac59);box-shadow:0 5px 0 #795029,0 9px 18px #0008;font:900 15px/1 system-ui,sans-serif;transition:transform .15s,box-shadow .15s}
.zd-screen .zd-result-card button:hover{transform:translateY(-2px);box-shadow:0 7px 0 #795029,0 12px 22px #0008}
.zd-screen .zd-result-card button span{font-size:27px;line-height:.5}
.zd-screen .zd-result.is-lost .zd-result-halo{border-color:#e8a5a9;background:radial-gradient(circle at 40% 25%,#ffa8ab,#a04363 50%,#353049);box-shadow:0 0 0 9px #db78933d,0 0 38px #c66182aa}
.zd-screen .zd-result.is-lost .zd-result-card{border-color:#dc9aab;background:radial-gradient(circle at 50% 0,#633c53,#253747 45%,#101f32)}
.zd-screen .zd-result.is-draw .zd-result-halo{border-color:#a4e8dd;background:radial-gradient(circle at 35% 20%,#b5eaf0,#3d8a96 58%,#183847)}
.zd-screen .zd-confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.zd-screen .zd-confetti i{position:absolute;top:-12%;left:var(--left);width:9px;height:18px;border-radius:2px;background:#ffda75;box-shadow:0 0 8px #fff4b4;animation:zd-confetti-fall var(--duration) ease-in var(--delay) infinite}
.zd-screen .zd-confetti i:nth-child(3n){background:#82efbc}.zd-screen .zd-confetti i:nth-child(4n){background:#ac95ff}.zd-screen .zd-confetti i:nth-child(5n){background:#ff8ca0}
@keyframes zd-frame-shine{0%,75%,100%{background-position:110% 0}87%{background-position:-80% 0}}
@keyframes zd-gem-spark{0%{transform:scale(.2);opacity:0}35%{opacity:1}100%{transform:scale(1.35);opacity:0}}
@keyframes zd-select{from{transform:scale(.8)}to{transform:translateY(-3px) scale(1.12)}}
@keyframes zd-board-hit{35%{filter:brightness(1.33)}75%{filter:brightness(.96)}}
@keyframes zd-ring{from{transform:translate(-50%,-50%) scale(.15);opacity:1}to{transform:translate(-50%,-50%) scale(5);opacity:0}}
@keyframes zd-combo{0%{transform:translate(-50%,20px) scale(.5);opacity:0}28%{transform:translate(-50%,0) scale(1.12);opacity:1}72%{opacity:1}100%{transform:translate(-50%,-24px) scale(1);opacity:0}}
@keyframes zd-result-back{from{opacity:0}to{opacity:1}}
@keyframes zd-result-pop{from{transform:translateY(65px) scale(.7) rotate(-4deg);opacity:0}to{transform:translateY(0) scale(1) rotate(0);opacity:1}}
@keyframes zd-halo{to{transform:translateY(-4px) scale(1.04);box-shadow:0 0 0 12px #f6d5811f,0 0 65px #a6f5b7d6,inset 0 4px #fff9}}
@keyframes zd-confetti-fall{to{transform:translate(35px,115dvh) rotate(680deg)}}
@media(max-width:420px){.zd-screen .zd-result-card{padding:22px 20px 24px}.zd-screen .zd-result-halo{width:96px;height:96px;font-size:54px}}
@media(prefers-reduced-motion:reduce){.zd-screen .zd-board-frame:after,.zd-screen .zd-cell.zd-changed:after,.zd-screen .zd-impact,.zd-screen .zd-combo-ring,.zd-screen .zd-combo-title,.zd-screen .zd-result,.zd-screen .zd-result-card,.zd-screen .zd-result-halo,.zd-screen .zd-confetti i{animation:none!important}}

/* Original illustrated mine layers and carved UI. */
.zd-screen>.zd-cave-foreground{position:absolute;z-index:0;inset:0;background:url('/game-scenes/assets/zumrut-diyari/mine-foreground-v2.png') center top/100% 100% no-repeat;pointer-events:none;filter:drop-shadow(0 8px 18px #001414);animation:zd-cave-breathe 12s ease-in-out infinite alternate}
.zd-screen>.gm-sugar-top,.zd-screen>.zd-main{position:relative;z-index:1}
.zd-screen .zd-board-frame{height:auto;aspect-ratio:1;padding:clamp(33px,10.5vw,52px);border:0;border-radius:18px;background:radial-gradient(circle,#12534f,#072b35 70%);box-shadow:0 17px 31px #000b,0 0 35px #54d59b32}
.zd-screen .zd-board-frame::before{z-index:6;inset:0;border:0;border-radius:0;background:url('/game-scenes/assets/zumrut-diyari/board-frame-v2.png') center/100% 100% no-repeat}
.zd-screen .zd-board-frame::after{z-index:7;inset:5%;border-radius:14px;opacity:.4}
.zd-screen .gm-sugar-versus,.zd-screen .zd-controls button,.zd-screen .gm-sugar-online-button,.zd-screen .zd-result-card button{background-image:url('/game-scenes/assets/zumrut-diyari/jade-plaque-v2.png');background-position:center;background-size:100% 100%;background-repeat:no-repeat;border:0;box-shadow:0 7px 16px #0008}
.zd-screen .zd-controls button{min-height:39px;padding:6px 14px;color:#fff3ca;text-shadow:0 2px 4px #001}
.zd-screen .zd-controls button[aria-pressed="true"]{filter:brightness(1.28) drop-shadow(0 0 7px #6af5b3)}
.zd-screen .gm-sugar-online-button,.zd-screen .zd-result-card button{color:#fff2cb;text-shadow:0 2px 3px #001}
@keyframes zd-cave-breathe{from{transform:translateY(-7px) scale(1.01);filter:drop-shadow(0 8px 18px #001414) brightness(.9)}to{transform:translateY(5px) scale(1.025);filter:drop-shadow(0 9px 24px #001414) brightness(1.15)}}
@media(prefers-reduced-motion:reduce){.zd-screen>.zd-cave-foreground{animation:none!important}}
.zd-screen .zd-cell.zd-changed:not(.zd-falling) .zd-sprite{animation:none}
.zd-screen .zd-cell.zd-falling .zd-sprite{animation:zd-real-fall .72s cubic-bezier(.16,.72,.22,1.12) .17s both}
@media(prefers-reduced-motion:reduce){.zd-screen .zd-cell.zd-falling .zd-sprite{animation:none!important}}
.zd-screen .zd-cell.zd-cracking .zd-sprite{animation:zd-crystal-crack .22s ease-in both!important;filter:brightness(2) drop-shadow(0 0 12px #fff3a5)}
@keyframes zd-crystal-crack{0%{transform:scale(1)}55%{transform:scale(1.22) rotate(-5deg)}100%{transform:scale(.76) rotate(8deg);opacity:.65}}
.zd-screen .zd-result{background:#06131ae8;isolation:isolate}
.zd-screen .zd-result::before{content:"";position:absolute;inset:-4%;background:url('/game-scenes/assets/zumrut-diyari/result-win-v1.png') center/cover no-repeat;animation:zd-result-scene 12s ease-in-out infinite alternate;filter:saturate(1.1)}
.zd-screen .zd-result.is-lost::before,.zd-screen .zd-result.is-draw::before{background-image:url('/game-scenes/assets/zumrut-diyari/result-loss-v1.png')}
.zd-screen .zd-result::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,#001a2170,#00101620 65%,#0009);pointer-events:none}
.zd-screen .zd-result-card{z-index:2;background:#092e37d9!important;backdrop-filter:blur(8px);animation:zd-result-pop .65s cubic-bezier(.18,1.45,.4,1) both,zd-result-hover 4s ease-in-out .7s infinite alternate}
.zd-screen .zd-result.is-lost .zd-result-card{background:#172b3bde!important}
.zd-screen .zd-result-card h2{animation:zd-result-title 1s ease-out both}
.zd-screen .zd-confetti{z-index:2}
.zd-screen .zd-confetti i{width:24px;height:24px;border:0;border-radius:0;background:url('/game-scenes/assets/zumrut-diyari/minerals-v1.png') 0 0/600% 100% no-repeat!important;box-shadow:none;filter:drop-shadow(0 0 5px #b6ffc0);animation:zd-confetti-fall var(--duration) ease-in var(--delay) infinite,zd-shard-spin 1s ease-in-out infinite alternate}
.zd-screen .zd-confetti i:nth-child(6n + 2){background-position:20% 0!important}.zd-screen .zd-confetti i:nth-child(6n + 3){background-position:40% 0!important}.zd-screen .zd-confetti i:nth-child(6n + 4){background-position:60% 0!important}.zd-screen .zd-confetti i:nth-child(6n + 5){background-position:80% 0!important}.zd-screen .zd-confetti i:nth-child(6n){background-position:100% 0!important}
@keyframes zd-result-scene{from{transform:scale(1.04) translate(-1%,-1%);filter:brightness(.8) saturate(1)}to{transform:scale(1.16) translate(1%,1%);filter:brightness(1.2) saturate(1.2)}}
@keyframes zd-result-hover{from{translate:0 0;box-shadow:0 0 0 8px #e7bd7130,0 30px 90px #000d,inset 0 2px #fff6}to{translate:0 -8px;box-shadow:0 0 0 13px #e7bd712a,0 42px 95px #000e,inset 0 2px #fff6}}
@keyframes zd-result-title{from{transform:scale(.45);opacity:0;filter:blur(9px)}65%{transform:scale(1.12);opacity:1;filter:blur(0)}to{transform:scale(1)}}
@keyframes zd-shard-spin{to{rotate:90deg;filter:drop-shadow(0 0 12px #f8f7ab)}}
@media(prefers-reduced-motion:reduce){.zd-screen .zd-cracking .zd-sprite,.zd-screen .zd-result::before,.zd-screen .zd-result-card h2{animation:none!important}}