:root {
  color-scheme: dark;
  --bg: #08090d;
  --panel: rgba(14, 17, 23, .86);
  --ink: #f4f7f2;
  --ink-soft: #aab3ad;
  --muted: #697571;
  --line: rgba(182, 206, 190, .15);
  --cyan: #83e6c0;
  --gold: #e8b65b;
  --gold-bright: #ffd77c;
  --violet: #9a82dd;
  --ease: cubic-bezier(.22, .61, .36, 1);
  font-family: "Manrope", "Noto Sans SC", sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); scroll-behavior: smooth; }
body { min-height: 100vh; margin: 0; overflow-x: hidden; color: var(--ink-soft); background: radial-gradient(circle at 74% -10%, rgba(113, 83, 26, .23), transparent 32rem), radial-gradient(circle at 8% 55%, rgba(25, 101, 87, .13), transparent 28rem), linear-gradient(145deg, #08090d 0%, #10140f 55%, #08090d 100%); -webkit-font-smoothing: antialiased; }
button { font: inherit; }
a { color: inherit; text-decoration: none; }

.page-glow { position: fixed; z-index: -1; pointer-events: none; border-radius: 50%; filter: blur(2px); }
.page-glow--one { width: 40vw; height: 40vw; top: -25vw; right: -14vw; background: radial-gradient(circle, rgba(220, 167, 58, .13), transparent 68%); }
.page-glow--two { width: 34vw; height: 34vw; bottom: -18vw; left: -14vw; background: radial-gradient(circle, rgba(58, 164, 135, .1), transparent 70%); }
.app-shell { width: min(1280px, calc(100% - 64px)); margin: 0 auto; padding: 28px 0 25px; }
.topbar { display: flex; align-items: center; justify-content: space-between; min-height: 38px; }
.brand { display: inline-flex; align-items: baseline; gap: 12px; }
.brand-mark { display: inline-flex; gap: 3px; align-items: end; }
.brand-mark i { display: block; width: 4px; height: 12px; border-radius: 3px; background: var(--gold); transform: skew(-25deg); }
.brand-mark i:nth-child(2) { height: 17px; opacity: .82; }.brand-mark i:nth-child(3) { height: 22px; }.brand-mark i:nth-child(4) { height: 17px; opacity: .82; }.brand-mark i:nth-child(5) { height: 12px; }
.brand-copy { display: inline-flex; align-items: baseline; gap: 9px; }.brand-copy strong { color: var(--ink); font-size: 16px; letter-spacing: .15em; }.brand-copy small { color: var(--muted); font-size: 11px; letter-spacing: .16em; }
.topbar-actions { display: inline-flex; align-items: center; gap: 28px; }.back-home, .section-label, .score-card-caption, .level-counter, .eyebrow, .turn-label, .board-coordinates, .footer-note, .button-key { font-family: "DM Mono", monospace; }
.back-home { color: var(--ink-soft); font-size: 10px; letter-spacing: .06em; transition: color .2s; }.back-home span { color: var(--gold-bright); font-size: 14px; margin-left: 5px; }.back-home:hover { color: var(--ink); }
.topbar-note { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-family: "DM Mono", monospace; font-size: 9px; letter-spacing: .12em; }.status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 4px rgba(131, 230, 192, .1); }

.hero-copy { display: flex; align-items: end; justify-content: space-between; gap: 40px; padding: 75px 0 54px; }.eyebrow { margin: 0; color: var(--gold-bright); font-size: 10px; letter-spacing: .18em; }.hero-copy h1 { margin: 17px 0 20px; color: var(--ink); font-size: clamp(39px, 5vw, 64px); font-weight: 700; letter-spacing: -.075em; line-height: 1.08; }.hero-copy h1 em { color: var(--gold-bright); font-style: normal; }.hero-description { max-width: 620px; margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.9; }.hero-shortcut { display: inline-flex; align-items: center; gap: 10px; padding-bottom: 7px; color: var(--muted); font-family: "DM Mono", monospace; font-size: 10px; white-space: nowrap; }.shortcut-key { display: inline-grid; place-items: center; min-width: 48px; height: 25px; padding: 0 8px; border: 1px solid rgba(232, 182, 91, .37); color: var(--gold-bright); font-size: 9px; letter-spacing: .04em; }

.game-layout { display: grid; grid-template-columns: 275px minmax(0, 1fr); gap: 22px; align-items: start; }.control-panel { display: flex; flex-direction: column; gap: 15px; }.level-card, .score-card, .panel-section, .legend-list { padding: 19px; border: 1px solid var(--line); background: var(--panel); box-shadow: 0 20px 55px rgba(0, 0, 0, .16); }.level-card { min-height: 177px; background: linear-gradient(150deg, rgba(78, 56, 20, .35), rgba(13, 18, 16, .88)); }.level-card-top, .score-card-header, .progress-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; }.section-label { color: var(--muted); font-size: 9px; letter-spacing: .14em; }.level-counter, .score-card-caption { color: var(--gold-bright); font-size: 9px; letter-spacing: .1em; }.level-number { margin: 20px 0 0; color: var(--gold-bright); font-family: "DM Mono", monospace; font-size: 48px; letter-spacing: -.09em; line-height: .8; }.level-name { margin-top: 13px; color: var(--ink-soft); font-size: 13px; }.score-card { padding-bottom: 17px; }.progress-track { height: 6px; margin: 22px 0 11px; overflow: hidden; background: rgba(255, 255, 255, .07); }.progress-track span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-bright)); box-shadow: 0 0 14px rgba(232, 182, 91, .55); transition: width .25s var(--ease); }.progress-meta { color: var(--muted); font-family: "DM Mono", monospace; font-size: 9px; }.progress-meta strong { color: var(--ink-soft); font-weight: 400; }.tips-section { padding: 18px 19px 10px; }.tip-line { display: grid; grid-template-columns: 22px 1fr; gap: 8px; margin-top: 16px; }.tip-number { color: var(--gold); font-family: "DM Mono", monospace; font-size: 9px; }.tip-line p { margin: -3px 0 0; color: var(--ink-soft); font-size: 11px; line-height: 1.65; }.legend-list { display: grid; gap: 11px; padding: 15px 19px; }.legend-list div { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; }.legend-list strong { color: var(--ink-soft); font-family: "DM Mono", monospace; font-size: 10px; font-weight: 400; }.legend-gem { display: block; width: 13px; height: 13px; transform: rotate(45deg); }.legend-gem--gold { border: 1px solid #f6d37f; background: linear-gradient(135deg, #fff3b1, #b97917 68%); box-shadow: 0 0 13px rgba(232, 182, 91, .45); }.legend-gem--diamond { border: 1px solid #bff6eb; background: linear-gradient(135deg, #ecffff, #50cbb7); box-shadow: 0 0 13px rgba(131, 230, 192, .45); }.legend-gem--rock { border-radius: 3px; background: linear-gradient(135deg, #c0c7bd, #40483e); transform: rotate(20deg); }
.panel-actions { display: grid; gap: 9px; }.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 0 15px; border: 1px solid transparent; cursor: pointer; color: var(--ink); font-size: 12px; transition: background .25s, color .25s, border-color .25s, transform .25s; }.button:hover { transform: translateY(-2px); }.button--primary { background: var(--gold); color: #161108; box-shadow: 0 10px 28px rgba(194, 145, 43, .19); }.button--primary:hover { background: var(--gold-bright); }.button--ghost { border-color: var(--line); background: rgba(18, 23, 21, .62); color: var(--ink-soft); }.button--ghost:hover { border-color: rgba(131, 230, 192, .35); color: var(--ink); }.button-plus { font-size: 19px; line-height: 0; }.button-key { margin-left: auto; color: rgba(22, 17, 8, .55); font-size: 8px; letter-spacing: .04em; }.button--ghost .button-key { color: var(--muted); }.undo-icon { font-size: 18px; }

.mine-area { min-width: 0; }.mine-banner { display: flex; align-items: center; justify-content: space-between; min-height: 62px; padding: 12px 20px; border: 1px solid var(--line); border-bottom: 0; background: rgba(13, 18, 16, .75); }.turn-label { display: block; margin-bottom: 7px; color: var(--muted); font-size: 8px; letter-spacing: .14em; }.mine-banner strong { color: var(--ink-soft); font-size: 13px; font-weight: 500; }.mine-indicator { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 5px rgba(232, 182, 91, .1), 0 0 18px rgba(232, 182, 91, .55); }.mine-indicator.is-running { background: var(--cyan); box-shadow: 0 0 0 5px rgba(131, 230, 192, .1), 0 0 18px rgba(131, 230, 192, .55); }.mine-frame { position: relative; padding: 14px; border: 1px solid var(--line); background: #111611; }.mine-shadow { position: absolute; z-index: 0; inset: 22px 15px 15px; background: rgba(0, 0, 0, .35); filter: blur(22px); }.mine-wrap { position: relative; z-index: 1; width: 100%; overflow: hidden; border: 1px solid rgba(232, 182, 91, .17); background: #171d18; }.mine-wrap canvas { display: block; width: 100%; height: auto; cursor: crosshair; touch-action: manipulation; }.mine-footer { display: flex; justify-content: space-between; gap: 20px; padding: 13px 2px 0; color: var(--muted); font-family: "DM Mono", monospace; font-size: 9px; letter-spacing: .07em; }.mine-footer > span:first-child { display: inline-flex; align-items: center; gap: 8px; }.legend-stone { display: inline-block; width: 7px; height: 7px; border-radius: 50%; }.legend-stone--cyan { background: var(--cyan); box-shadow: 0 0 9px rgba(131, 230, 192, .7); }

.result-modal { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; padding: 20px; opacity: 0; pointer-events: none; background: rgba(3, 5, 5, .72); backdrop-filter: blur(14px); transition: opacity .3s; }.result-modal.is-visible { opacity: 1; pointer-events: auto; }.result-card { width: min(420px, 100%); padding: 34px; border: 1px solid rgba(232, 182, 91, .35); background: linear-gradient(145deg, #151b15, #0d1110); box-shadow: 0 28px 90px rgba(0, 0, 0, .45); text-align: center; transform: translateY(14px); transition: transform .35s var(--ease); }.result-modal.is-visible .result-card { transform: translateY(0); }.result-emblem { display: grid; place-items: center; width: 62px; height: 62px; margin: 22px auto 19px; border: 1px solid rgba(232, 182, 91, .45); border-radius: 50%; color: var(--gold-bright); background: rgba(232, 182, 91, .09); font-size: 29px; box-shadow: 0 0 34px rgba(232, 182, 91, .16); }.result-emblem--fail { color: var(--violet); border-color: rgba(154, 130, 221, .45); background: rgba(154, 130, 221, .09); }.result-card h2 { margin: 0; color: var(--ink); font-size: 28px; letter-spacing: -.05em; }.result-card > p:not(.eyebrow) { margin: 12px 0 25px; color: var(--ink-soft); font-size: 13px; line-height: 1.7; }.result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.footer-note { display: flex; align-items: center; gap: 14px; padding-top: 25px; color: var(--muted); font-size: 9px; letter-spacing: .08em; }.footer-line { width: 34px; height: 1px; background: var(--line); }

.legend-gem--bomb { position: relative; border-radius: 50%; background: radial-gradient(circle at 35% 28%, #656d68, #171c1b 67%); box-shadow: 0 0 10px rgba(230, 151, 70, .22); transform: none; }
.legend-gem--bomb::after { position: absolute; right: -4px; top: -4px; width: 5px; height: 5px; border-radius: 50%; background: #efb65c; box-shadow: 0 0 7px #f79b3c; content: ""; }
@media (max-width: 980px) { .game-layout { grid-template-columns: 235px minmax(0, 1fr); gap: 15px; }.app-shell { width: min(100% - 40px, 920px); }.level-card, .score-card, .panel-section, .legend-list { padding-inline: 15px; } }
@media (max-width: 760px) { .app-shell { width: min(100% - 28px, 620px); padding-top: 20px; }.topbar-note { display: none; }.hero-copy { display: block; padding: 64px 0 42px; }.hero-copy h1 { font-size: clamp(39px, 10vw, 58px); }.hero-description { font-size: 13px; }.hero-shortcut { margin-top: 22px; }.game-layout { grid-template-columns: 1fr; }.control-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }.level-card, .score-card { min-height: 0; }.tips-section, .legend-list, .panel-actions { grid-column: 1 / -1; }.tips-section { display: grid; grid-template-columns: 1fr 1fr; gap: 0 15px; }.tips-section > .section-label { grid-column: 1 / -1; }.tip-line { margin-top: 13px; }.mine-banner { min-height: 58px; padding-inline: 14px; }.mine-frame { padding: 8px; }.mine-footer { font-size: 8px; }.footer-note { padding-bottom: 10px; flex-wrap: wrap; line-height: 1.7; } }
@media (max-width: 460px) { .back-home { font-size: 9px; }.brand-copy strong { font-size: 14px; }.brand-copy small { font-size: 9px; }.hero-copy { padding-top: 55px; }.hero-copy h1 { font-size: 39px; }.control-panel { grid-template-columns: 1fr; }.tips-section { display: block; }.level-number { margin-top: 15px; }.level-card { min-height: 147px; }.score-card { min-height: 125px; }.result-card { padding: 28px 20px; }.result-actions { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }