:root {
  color-scheme: light;
  --pixel-font: 'Press Start 2P', 'Courier New', monospace;
  --ui-font: 'Trebuchet MS', 'Segoe UI', Arial, sans-serif;
  --sky-top: #73d4ff;
  --sky-mid: #5eb5ff;
  --sky-bottom: #2f7449;
  --grass-light: #8cf85e;
  --grass-dark: #2c8b2c;
  --dirt-light: #9f6430;
  --dirt-mid: #74431d;
  --stone-light: #8a8f9f;
  --stone-mid: #51586a;
  --stone-dark: #383d4b;
  --panel-bg: rgba(30, 39, 72, 0.84);
  --panel-border: #24315d;
  --pixel-shadow: 0 4px 0 rgba(21, 27, 53, 0.8), 0 8px 18px rgba(9, 16, 36, 0.35);
  --neon-green: #b9ff37;
  --gold: #ffd24d;
  --cream: #f5f2da;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  font-family: var(--ui-font);
  color: var(--cream);
  background:
    radial-gradient(circle at 50% 12%, rgba(255, 255, 255, 0.38), transparent 22%),
    linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 41%, #4a9ef1 55%, var(--sky-bottom) 100%);
  overflow-x: hidden;
  overflow-y: auto;
}

body.is-modal-open {
  overflow: hidden;
}

body::before,
body::after {
  content: '';
  position: fixed;
  inset: auto;
  pointer-events: none;
  z-index: 0;
}

body::before {
  left: 0;
  right: 0;
  bottom: 76px;
  height: 32vh;
  background:
    radial-gradient(circle at 18% 48%, rgba(24, 83, 57, 0.65) 0 20%, transparent 21%),
    radial-gradient(circle at 30% 42%, rgba(36, 102, 73, 0.55) 0 17%, transparent 18%),
    radial-gradient(circle at 72% 46%, rgba(37, 98, 81, 0.6) 0 18%, transparent 19%),
    linear-gradient(180deg, transparent 0 42%, rgba(52, 91, 74, 0.92) 42% 100%);
}

body::after {
  left: 0;
  right: 0;
  bottom: 0;
  height: 96px;
  background:
    repeating-linear-gradient(
      90deg,
      #4a842c 0 18px,
      #5c982e 18px 36px,
      #4a842c 36px 54px,
      #67a83c 54px 72px
    ),
    linear-gradient(180deg, #8ef14f 0 18px, #6dc53d 18px 26px, #7a4e23 26px 100%);
  box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.18);
}

button,
a {
  font: inherit;
}

.app-shell {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  padding: 14px 14px calc(108px + env(safe-area-inset-bottom, 0px));
}

.game-app {
  width: min(100%, 460px);
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.app-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.brand-lockup {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.brand-icon,
.icon-button,
.mine-layer,
.meta-card,
.result-panel,
.message,
.action-button,
.info-panel {
  image-rendering: pixelated;
}

.brand-icon {
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  font-size: 28px;
  background:
    linear-gradient(180deg, #4b3020 0 44%, #b8e458 44% 57%, #2a7e30 57% 100%);
  border: 4px solid #1d2346;
  border-radius: 8px;
  box-shadow: var(--pixel-shadow);
}

.eyebrow {
  margin: 0 0 6px;
  color: #183268;
  font-family: var(--pixel-font);
  font-size: 9px;
  line-height: 1.5;
  text-transform: uppercase;
}

h1,
#infoModalTitle {
  margin: 0;
  font-family: var(--pixel-font);
  letter-spacing: 0.04em;
}

h1 {
  font-size: clamp(16px, 4.3vw, 20px);
  line-height: 1.25;
  color: #fef5bc;
  text-shadow: 0 3px 0 #0e2450;
}

.icon-button {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border: 4px solid #203164;
  border-radius: 8px;
  background: linear-gradient(180deg, #fff8c2, #ffd666);
  color: #183268;
  font-family: var(--pixel-font);
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 4px 0 #ae7f17;
}

.hero-panel {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hero-banner,
.dashboard-grid,
.mine-frame,
.message {
  border: 4px solid #1d2346;
  border-radius: 14px;
  box-shadow: var(--pixel-shadow);
}

.hero-banner {
  position: relative;
  overflow: hidden;
  padding: 14px;
  background:
    linear-gradient(180deg, rgba(131, 236, 255, 0.98) 0%, rgba(82, 160, 255, 0.98) 58%, rgba(82, 137, 73, 0.92) 100%);
}

.hero-banner::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 34px;
  background:
    repeating-linear-gradient(90deg, #71c83e 0 24px, #58b330 24px 48px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent 50%);
  border-top: 4px solid rgba(35, 94, 34, 0.9);
}

.banner-copy {
  position: relative;
  z-index: 1;
  max-width: 78%;
}

.status-callout {
  margin: 0 0 10px;
  font-family: var(--pixel-font);
  font-size: clamp(14px, 4.1vw, 18px);
  color: var(--neon-green);
  text-shadow: 0 3px 0 #1b5033;
}

.description,
.hint,
.message,
.info-panel p,
.quota-text,
.gauge-caption {
  margin: 0;
  line-height: 1.45;
}

.description,
.hint,
.info-panel p,
.quota-text,
.message {
  color: #f7f4de;
}

.description {
  max-width: 32ch;
  font-size: 14px;
  text-shadow: 0 2px 0 rgba(18, 43, 73, 0.45);
}

.quota-chip {
  display: inline-flex;
  margin-top: 10px;
  padding: 8px 10px;
  border: 3px solid rgba(24, 50, 104, 0.9);
  border-radius: 999px;
  background: rgba(17, 41, 77, 0.6);
  font-size: 12px;
  font-weight: 700;
}

.floating-island {
  position: absolute;
  top: 16px;
  width: 92px;
  height: 40px;
  border: 3px solid rgba(25, 50, 94, 0.75);
  border-radius: 8px;
  background:
    linear-gradient(180deg, #92f963 0 26%, #338b2b 26% 44%, #9d6733 44% 100%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 8px, transparent 8px 16px);
  box-shadow: 0 8px 0 rgba(20, 32, 61, 0.2);
}

.floating-island::after {
  content: '';
  position: absolute;
  left: 16px;
  bottom: -16px;
  width: 56px;
  height: 18px;
  border: 3px solid rgba(25, 50, 94, 0.65);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  background: linear-gradient(180deg, #8f5828, #68401d);
}

.floating-island-left {
  left: -10px;
}

.floating-island-right {
  right: -6px;
  top: 28px;
  width: 78px;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(124px, 0.9fr);
  gap: 10px;
  min-height: 0;
}

.result-panel,
.signal-meta {
  min-height: 0;
}

.result-panel {
  padding: 12px;
  background: linear-gradient(180deg, rgba(28, 37, 74, 0.94), rgba(20, 28, 58, 0.94));
  opacity: 0.8;
  transform: translateY(4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.result-panel.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.meta-label {
  display: block;
  font-family: var(--pixel-font);
  font-size: 9px;
  line-height: 1.45;
  color: #9fd7ff;
  text-transform: uppercase;
}

.gauge-shell {
  position: relative;
  width: min(100%, 176px);
  aspect-ratio: 1;
  margin: 12px auto 10px;
}

.gauge-arc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 12px solid transparent;
}

.gauge-arc-red {
  border-top-color: #ff5b57;
  border-left-color: #ff5b57;
  transform: rotate(-26deg);
}

.gauge-arc-yellow {
  inset: 10px;
  border-width: 10px;
  border-top-color: #ffcb3d;
  transform: rotate(8deg);
}

.gauge-arc-green {
  inset: 20px;
  border-width: 10px;
  border-top-color: #65f36d;
  border-right-color: #65f36d;
  transform: rotate(34deg);
}

.gauge-needle {
  position: absolute;
  left: 50%;
  top: 54%;
  width: 46%;
  height: 6px;
  background: linear-gradient(90deg, #ffef95, #ff5959);
  border-radius: 999px;
  transform-origin: left center;
  transform: rotate(-16deg);
  box-shadow: 0 0 12px rgba(255, 239, 149, 0.4);
}

.gauge-needle::after {
  content: '';
  position: absolute;
  right: -6px;
  top: -5px;
  width: 16px;
  height: 16px;
  background: #ffdd76;
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
}

.gauge-core {
  position: absolute;
  inset: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  padding: 14px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 32%, rgba(255, 255, 255, 0.2), transparent 28%),
    linear-gradient(180deg, #223163, #152149);
  border: 4px solid #334a8f;
  box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.12);
}

.multiplier {
  font-family: var(--pixel-font);
  font-size: clamp(18px, 5vw, 22px);
  line-height: 1.4;
  color: var(--gold);
  text-shadow: 0 3px 0 #734400;
}

.gauge-caption {
  font-size: 11px;
  font-weight: 700;
  color: #c4ff87;
}

.hint {
  font-size: 12px;
  text-align: center;
}

.countdown-wrap {
  margin-top: 10px;
}

.countdown-bar-track {
  width: 100%;
  height: 10px;
  border: 3px solid #253764;
  border-radius: 999px;
  background: rgba(7, 15, 33, 0.5);
  overflow: hidden;
}

.countdown-bar-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #58f06b, #ffde59, #ff5c5c);
  transform-origin: left center;
  transition: width 1s linear;
}

.countdown-bar-fill.is-urgent {
  animation: pulseUrgent 0.6s ease-in-out infinite;
}

.countdown-text {
  margin-top: 8px;
  font-family: var(--pixel-font);
  font-size: 9px;
  line-height: 1.5;
  color: #ffe18a;
}

.countdown-text.is-expired {
  color: #ff8f8f;
}

.signal-meta {
  display: grid;
  gap: 10px;
}

.meta-card {
  position: relative;
  min-height: 0;
  padding: 12px;
  background: linear-gradient(180deg, rgba(31, 44, 82, 0.96), rgba(18, 25, 51, 0.96));
}

.meta-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 8px, transparent 8px 16px);
  opacity: 0.45;
  pointer-events: none;
}

.meta-card-pickaxe::after,
.meta-card-ore::after {
  position: absolute;
  right: 12px;
  top: 10px;
  font-size: 18px;
}

.meta-card-pickaxe::after {
  content: '⛏️';
}

.meta-card-ore::after {
  content: '💎';
}

.meta-value {
  position: relative;
  display: block;
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 700;
}

.meta-value[data-tier='wood'] {
  color: #f4ce8b;
}

.meta-value[data-tier='stone'] {
  color: #e2e8f5;
}

.meta-value[data-tier='iron'] {
  color: #f7f8fb;
}

.meta-value[data-tier='diamond'] {
  color: #98f9ff;
  text-shadow: 0 0 12px rgba(152, 249, 255, 0.35);
}

.meta-value[data-ore='copper'] {
  color: #ffa16e;
}

.meta-value[data-ore='redstone'] {
  color: #ff8f91;
}

.meta-value[data-ore='gold'] {
  color: #ffe676;
}

.meta-value[data-ore='diamond'] {
  color: #9ae7ff;
}

.meta-value[data-ore='emerald'] {
  color: #7aff8c;
  text-shadow: 0 0 10px rgba(122, 255, 140, 0.3);
}

.mine-frame {
  overflow: hidden;
  flex: 1 1 auto;
  min-height: 0;
  padding: 8px;
  background: linear-gradient(180deg, rgba(21, 41, 76, 0.34), rgba(14, 24, 45, 0.62));
}

.mine-scene {
  position: relative;
  height: min(34vh, 294px);
  min-height: 230px;
  overflow: hidden;
  border: 4px solid #223264;
  border-radius: 10px;
  background:
    linear-gradient(180deg, #81d8ff 0 14%, #57aef0 14% 22%, #6dcf52 22% 25%, #2c9540 25% 28%, #8d5528 28% 100%);
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.06);
}

.mine-skyline {
  position: absolute;
  inset: 0 0 auto;
  height: 32%;
  background:
    linear-gradient(180deg, transparent 0 42%, rgba(255, 255, 255, 0.15) 42% 100%),
    linear-gradient(135deg, transparent 0 18%, rgba(60, 131, 99, 0.55) 18% 24%, transparent 24% 100%),
    linear-gradient(220deg, transparent 0 18%, rgba(45, 116, 83, 0.45) 18% 24%, transparent 24% 100%);
}

.pickaxe {
  position: absolute;
  left: 50%;
  top: 20px;
  transform: translate(-50%, var(--travel-y, 0px));
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  font-size: 28px;
  border: 4px solid #fff3b2;
  border-radius: 8px;
  background: linear-gradient(180deg, #24335e, #121b39);
  z-index: 2;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), filter 0.25s ease;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.35));
}

.pickaxe[data-tier='diamond'] {
  filter:
    drop-shadow(0 0 14px rgba(131, 251, 255, 0.7))
    drop-shadow(0 8px 10px rgba(0, 0, 0, 0.35));
}

.mine-layer {
  position: relative;
  height: calc((100% - 64px) / 7);
  margin: 0 10px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 3px solid rgba(24, 33, 58, 0.6);
  opacity: 0.44;
  transform: translateY(8px) scale(0.98);
  transition: opacity 0.28s ease, transform 0.28s ease, box-shadow 0.28s ease;
}

.layer-label,
.layer-tiles {
  position: relative;
  z-index: 1;
}

.layer-label {
  font-family: var(--pixel-font);
  font-size: 9px;
  line-height: 1.5;
}

.layer-tiles {
  font-size: 15px;
  letter-spacing: 0.08em;
}

.mine-layer::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.55;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 8px, transparent 8px 16px);
}

.mine-layer[data-layer='surface'] {
  background:
    linear-gradient(180deg, #8ef14f 0 20%, #57ac32 20% 34%, #9a6230 34% 100%),
    repeating-linear-gradient(90deg, #a86b38 0 22px, #8f592b 22px 44px);
}

.mine-layer[data-layer='stone'] {
  background:
    linear-gradient(180deg, #8f97aa, #50586a),
    repeating-linear-gradient(90deg, #6b7384 0 20px, #51586a 20px 40px);
}

.mine-layer[data-layer='copper'] {
  background:
    radial-gradient(circle at 24% 50%, rgba(255, 178, 118, 0.95) 0 11%, transparent 12%),
    radial-gradient(circle at 74% 62%, rgba(255, 176, 109, 0.95) 0 9%, transparent 10%),
    linear-gradient(180deg, #93552b, #6f401f);
}

.mine-layer[data-layer='redstone'] {
  background:
    radial-gradient(circle at 26% 50%, rgba(255, 112, 114, 0.95) 0 10%, transparent 11%),
    radial-gradient(circle at 72% 58%, rgba(255, 124, 126, 0.95) 0 9%, transparent 10%),
    linear-gradient(180deg, #5c6070, #323746);
}

.mine-layer[data-layer='gold'] {
  color: #1f1d10;
  background:
    radial-gradient(circle at 24% 50%, rgba(255, 228, 103, 0.95) 0 11%, transparent 12%),
    radial-gradient(circle at 74% 58%, rgba(255, 215, 72, 0.95) 0 9%, transparent 10%),
    linear-gradient(180deg, #8a6f2a, #65501e);
}

.mine-layer[data-layer='diamond'] {
  color: #0a2944;
  background:
    radial-gradient(circle at 24% 50%, rgba(138, 247, 255, 0.95) 0 11%, transparent 12%),
    radial-gradient(circle at 72% 58%, rgba(124, 225, 255, 0.95) 0 9%, transparent 10%),
    linear-gradient(180deg, #6a7b90, #485769);
}

.mine-layer[data-layer='emerald'] {
  color: #0a2d15;
  background:
    radial-gradient(circle at 24% 50%, rgba(113, 255, 148, 0.95) 0 11%, transparent 12%),
    radial-gradient(circle at 72% 58%, rgba(101, 255, 142, 0.95) 0 9%, transparent 10%),
    linear-gradient(180deg, #5f6b74, #39414d);
}

.mine-layer.is-revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.mine-layer.is-target {
  box-shadow: inset 0 0 0 3px rgba(255, 249, 182, 0.85), 0 0 20px rgba(255, 244, 130, 0.35);
}

.message {
  padding: 12px 14px;
  min-height: 58px;
  font-size: 13px;
  background: linear-gradient(180deg, rgba(29, 40, 77, 0.94), rgba(18, 28, 56, 0.94));
}

.action-bar {
  position: fixed;
  left: 50%;
  bottom: max(10px, env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  width: min(calc(100% - 20px), 460px);
  padding: 10px;
  border: 4px solid #1d2346;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(30, 40, 74, 0.95), rgba(17, 24, 48, 0.98));
  box-shadow: var(--pixel-shadow);
}

.action-button {
  min-width: 0;
  min-height: 68px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 6px;
  border: 3px solid #32498d;
  border-radius: 12px;
  background: linear-gradient(180deg, #24366c, #182650);
  color: #fdf8d4;
  text-decoration: none;
  text-align: center;
  font-family: var(--pixel-font);
  font-size: 8px;
  line-height: 1.45;
  cursor: pointer;
  box-shadow: 0 4px 0 rgba(14, 23, 47, 0.9);
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.action-button::before {
  font-size: 18px;
  line-height: 1;
}

#signalButton::before {
  content: '🎯';
}

#shareReferralButton::before {
  content: '🤝';
}

#gameButton::before {
  content: '🕹️';
}

#referralButton::before {
  content: '💰';
}

.primary-action {
  background: linear-gradient(180deg, #c8ff55, #7fda33);
  color: #183316;
  border-color: #f5ffd2;
  box-shadow: 0 4px 0 #3a6d1f;
}

.action-button:disabled {
  opacity: 0.56;
  cursor: not-allowed;
}

.action-button.is-pulsing {
  animation: pulseCta 1s ease-in-out infinite;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 4;
  display: grid;
  justify-items: center;
  align-items: start;
  padding: 18px;
  background: rgba(10, 16, 33, 0.72);
  backdrop-filter: blur(4px);
  overflow-y: auto;
}

.info-panel {
  width: min(100%, 420px);
  padding: 16px;
  border: 4px solid #1d2346;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(122, 195, 255, 0.96), rgba(46, 86, 178, 0.98)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.15), transparent 45%);
  box-shadow: 0 10px 24px rgba(7, 12, 27, 0.45);
}

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

#infoModalTitle {
  font-size: clamp(12px, 3.6vw, 16px);
  line-height: 1.6;
  color: #fdf8d4;
  text-shadow: 0 3px 0 #112857;
}

.close-button {
  background: linear-gradient(180deg, #ffeb99, #ffb54b);
}

.info-panel p + p {
  margin-top: 10px;
}

.hidden {
  display: none !important;
}

@keyframes pulseUrgent {
  0%,
  100% {
    filter: brightness(1);
  }

  50% {
    filter: brightness(1.35);
  }
}

@keyframes pulseCta {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-2px);
  }
}

@media (max-width: 420px) {
  .dashboard-grid {
    grid-template-columns: minmax(0, 1fr) 118px;
  }

  .banner-copy {
    max-width: 82%;
  }

  .mine-scene {
    height: min(31vh, 272px);
  }
}

@media (max-height: 740px) {
  .app-shell {
    padding-top: 10px;
    padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px));
  }

  .game-app {
    gap: 10px;
  }

  .hero-panel {
    gap: 8px;
  }

  .hero-banner {
    padding: 12px;
  }

  .description {
    font-size: 13px;
  }

  .gauge-shell {
    width: min(100%, 156px);
  }

  .mine-scene {
    min-height: 206px;
    height: min(29vh, 244px);
  }

  .action-button {
    min-height: 62px;
    font-size: 7px;
  }
}