:root {
  --bg: #0d1018;
  --panel: #1a1f2c;
  --panel2: #232a3a;
  --text: #f1f3f8;
  --muted: #98a1b4;
  --accent: #ffc94d;
  --gem: #ffc94d;
  --good: #5fe08f;
  --bad: #ff6464;
  --cell: 40px;
  --gap: 3px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; color: var(--text); overflow: hidden;
  font: 14px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: radial-gradient(120% 80% at 50% 0%, #1c2540 0%, #111522 55%, var(--bg) 100%) fixed; }
#app { height: 100vh; height: 100dvh; max-width: 620px; margin: 0 auto; display: flex; flex-direction: column;
  gap: 6px; padding: 10px 12px; }

/* ---------- header ---------- */
.top { display: flex; align-items: center; gap: 10px; min-height: 38px; }
.logo { width: 34px; height: 34px; flex: none; border-radius: 10px; background: #252d42 center/22px no-repeat
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg stroke='%23ffc94d' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 2.5v3M12 18.5v3M2.5 12h3M18.5 12h3M5.3 5.3l2.1 2.1M16.6 16.6l2.1 2.1M5.3 18.7l2.1-2.1M16.6 7.4l2.1-2.1'/%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='6.2' fill='%23ffc94d'/%3E%3Ccircle cx='9.8' cy='9.8' r='1.7' fill='%23fff'/%3E%3C/svg%3E");
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.heading { flex: 1; min-width: 0; }
.title { font-weight: 800; font-size: 17px; letter-spacing: .2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.teaser { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.teaser b { color: #e8d48a; font-weight: 600; }

.status { display: flex; gap: 6px; align-items: center; }
.pill { background: var(--panel); border: 1px solid #2b3245; border-radius: 99px; padding: 4px 11px; font-size: 13px;
  font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pill.dim { margin-left: auto; color: var(--muted); font-weight: 600; }
.lives span { color: var(--bad); margin: 0 1px; transition: opacity .3s, transform .3s; display: inline-block; }
.lives span.lost { opacity: .22; transform: scale(.8); filter: grayscale(1); }

/* ---------- board ---------- */
.stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.board { display: grid; gap: var(--gap); padding: 7px; border-radius: 14px; background: #0a0d14;
  box-shadow: 0 10px 30px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.05);
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
.board.shake { animation: shake .4s; }
.cell { width: var(--cell); height: var(--cell); border-radius: calc(var(--cell) * .2); display: flex; align-items: center;
  justify-content: center; font-weight: 800; font-size: calc(var(--cell) * .5); position: relative; cursor: pointer;
  transition: opacity .5s; }
.cell svg { width: 70%; height: 70%; pointer-events: none; }

.cell.c { background: linear-gradient(160deg, #46526f 0%, #313a52 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -2px 0 rgba(0,0,0,.28); }
@media (hover: hover) { .cell.c:hover { filter: brightness(1.18); } }
.cell.c:active { transform: scale(.94); }
.cell.f svg { animation: plant .22s ease-out; }

.cell.o { background: #151a26; box-shadow: inset 0 0 0 1px rgba(255,255,255,.035); cursor: default; }
.cell.o.dug { animation: open .28s ease-out both; }
.cell.n1 { color: #6fb0ff; } .cell.n2 { color: #63d98f; } .cell.n3 { color: #ff7a6e; } .cell.n4 { color: #b994ff; }
.cell.n5 { color: #ffae52; } .cell.n6 { color: #3fd6d0; } .cell.n7 { color: #f2f2f2; } .cell.n8 { color: #a9b0bf; }
.cell.ghost { opacity: .45; }

.cell.boom { background: radial-gradient(circle, #ff8a6b 0%, #e23d3d 70%); color: #2a0b0b; animation: boom .45s ease-out; }
.cell.mine { background: #2a1f26; color: #ff8f8f; }
.cell.wrong::after { content: ""; position: absolute; inset: 18%;
  background: linear-gradient(45deg, transparent 44%, var(--bad) 44% 56%, transparent 56%),
              linear-gradient(-45deg, transparent 44%, var(--bad) 44% 56%, transparent 56%); }

/* hidden picture */
.cell.gem { background: radial-gradient(circle at 35% 30%, #fff 0%, var(--gem) 45%);
  background: radial-gradient(circle at 35% 30%, #fff 0%, var(--gem) 38%, color-mix(in srgb, var(--gem) 70%, #000) 100%);
  box-shadow: 0 0 calc(var(--cell) * .35) rgba(255, 220, 140, .35);
  box-shadow: 0 0 calc(var(--cell) * .45) color-mix(in srgb, var(--gem) 55%, transparent);
  color: transparent; animation: gem .5s cubic-bezier(.3, 1.6, .5, 1) both; z-index: 1; }
.cell.gem.dull { filter: saturate(.35) brightness(.8); box-shadow: none; }
.board.won .cell.o, .board.over .cell.o { opacity: .3; }

/* hints */
.board .cell.hl-from { box-shadow: inset 0 0 0 2px #ffd65a, 0 0 12px rgba(255,214,90,.45); animation: pulse 1.1s ease-in-out infinite; }
.board .cell.hl-safe { box-shadow: inset 0 0 0 3px var(--good), 0 0 14px rgba(95,224,143,.55); animation: pulse 1.1s ease-in-out infinite; }
.board .cell.hl-mine { box-shadow: inset 0 0 0 3px var(--bad), 0 0 14px rgba(255,100,100,.55); animation: pulse 1.1s ease-in-out infinite; }

/* ---------- message + bar ---------- */
.msg { min-height: 38px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 13.5px;
  color: var(--muted); padding: 0 4px; line-height: 1.3; }
.msg.good { color: var(--good); font-weight: 700; }
.msg.bad { color: var(--bad); font-weight: 600; }
.msg.hint { color: #f1dc8f; }
.msg .g { color: var(--good); font-weight: 700; }
.msg .r { color: var(--bad); font-weight: 700; }
.msg.result { color: var(--text); font-weight: 600; gap: 10px; animation: rise .5s ease-out both; }
.msg.result .emo { font-size: 28px; line-height: 1; }
.msg.result small { display: block; color: var(--muted); font-weight: 400; font-size: 12.5px; margin-top: 2px; }

.bar { display: flex; gap: 6px; }
.bar > button, .seg button { height: 40px; border: 0; border-radius: 10px; background: var(--panel); color: var(--text);
  font: 600 13.5px system-ui, sans-serif; cursor: pointer; padding: 0 10px; white-space: nowrap; touch-action: manipulation; }
.bar > button { flex: 1; }
.bar > button:disabled, .seg button:disabled { opacity: .4; cursor: default; }
.bar > button.confirm { background: #5a2630; color: #ffd6d6; }
#hint b { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 3px; border-radius: 99px; background: #3a3220;
  color: var(--accent); font-size: 12px; line-height: 18px; }
.seg { display: flex; background: var(--panel); border-radius: 10px; padding: 3px; gap: 3px; flex: 1.6; }
.seg button { flex: 1; height: 34px; border-radius: 8px; background: transparent; color: var(--muted); padding: 0 6px; }
.seg button.on { background: var(--panel2); color: var(--text); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
#modeFlag.on { background: #3b2328; color: #ffd0d0; }

@media (max-width: 380px) {
  .bar > button, .seg button { font-size: 12.5px; padding: 0 6px; }
  .title { font-size: 16px; }
}

@keyframes open { 0% { transform: scale(.6); opacity: .2; } 100% { transform: scale(1); opacity: 1; } }
@keyframes plant { 0% { transform: translateY(-30%) scale(.6); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes boom { 0% { transform: scale(.6); } 45% { transform: scale(1.25); box-shadow: 0 0 30px #ff6a4d; } 100% { transform: scale(1); } }
@keyframes gem { 0% { transform: scale(.2) rotate(-20deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes pulse { 50% { filter: brightness(1.35); } }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@keyframes rise { 0% { transform: translateY(8px); opacity: 0; } 100% { transform: none; opacity: 1; } }