/* ============================================================
 * MC Coin Shop — minecraft-style mini app
 * Palette: deep black, lime green, gold yellow.
 * ============================================================ */

:root {
  --mc-bg:        #060a06;
  --mc-bg-2:      #0e1410;
  --mc-bg-3:      #16201a;
  --mc-border:    #2d3a2d;

  --mc-green:     #3fbf3f;
  --mc-green-hi:  #5fff5f;
  --mc-green-lo:  #1c6f1c;
  --mc-green-glow: rgba(80, 240, 80, 0.45);

  --mc-gold:      #ffd93b;
  --mc-gold-hi:   #ffe97a;
  --mc-gold-lo:   #b58a00;

  --mc-text:      #e9f6e1;
  --mc-text-dim:  #94a991;

  --mc-radius:    6px;
  --mc-shadow-3d: 0 4px 0 #000, 0 6px 14px rgba(0, 0, 0, 0.5);
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body.mc-body {
  background:
    radial-gradient(circle at 50% 0%, rgba(63, 191, 63, 0.18) 0%, transparent 55%),
    radial-gradient(circle at 50% 100%, rgba(255, 217, 59, 0.10) 0%, transparent 55%),
    var(--mc-bg);
  color: var(--mc-text);
  font-family: 'VT323', 'Courier New', monospace;
  font-size: 18px;
  line-height: 1.35;
  -webkit-font-smoothing: none;
  -webkit-tap-highlight-color: transparent;
  image-rendering: pixelated;
  min-height: 100vh;
  overflow-x: hidden;
  padding-bottom: env(safe-area-inset-bottom);
}

/* Pixel grid background overlay (very subtle) */
body.mc-body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(63, 191, 63, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(63, 191, 63, 0.05) 1px, transparent 1px);
  background-size: 16px 16px;
  mix-blend-mode: screen;
}

/* ============================================================
 * Top bar — logo + Telegram avatar
 * ============================================================ */
.mc-topbar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(env(safe-area-inset-top, 0) + 14px) 14px 12px;
}

/* MineOre SELLS brand cluster — header sits FLAT on the page bg, no
   container background or border, no plate behind the logo. The pixel
   artwork carries its own gold frame and emerald glow, so it pops on
   black without a separate plate. */
.mc-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mc-brand-logo {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 0;
  /* Soft external glow only — no rectangular border, no plate. */
  filter: drop-shadow(0 0 10px rgba(95, 255, 95, 0.35)) drop-shadow(0 2px 0 #000);
}
.mc-brand-logo svg,
.mc-brand-logo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  image-rendering: pixelated;
  background: transparent;
}

/* Make sure the topbar itself never adds a border or strip — it has to
   look like the body bg continues through it. */
.mc-topbar {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.mc-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.0;
}
.mc-brand-name {
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--mc-text);
  text-shadow: 0 2px 0 #000;
}
.mc-brand-name--accent {
  color: var(--mc-gold);
  text-shadow: 0 2px 0 #000, 0 0 14px rgba(255, 217, 59, 0.45);
  font-size: 11px;
  margin-top: 4px;
}

.mc-avatar {
  width: 44px;
  height: 44px;
  border: 3px solid var(--mc-gold);
  background: var(--mc-bg-3);
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 2px 2px 0 rgba(255, 255, 255, 0.18),
    inset -2px -2px 0 rgba(0, 0, 0, 0.55),
    0 0 14px rgba(255, 217, 59, 0.4);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mc-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mc-avatar-fallback {
  font-family: 'Press Start 2P', monospace;
  font-size: 14px;
  color: var(--mc-gold);
}
.mc-avatar--lg {
  width: 86px;
  height: 86px;
  border-width: 4px;
}
.mc-avatar--lg .mc-avatar-fallback { font-size: 26px; }

/* ============================================================
 * Tabs
 * ============================================================ */
.mc-tabs {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 0 14px 6px;
}
.mc-tab {
  font-family: 'Press Start 2P', monospace;
  font-size: 9.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mc-text-dim);
  background: var(--mc-bg-2);
  border: 2px solid var(--mc-border);
  padding: 12px 6px;
  cursor: pointer;
  transition: transform 90ms ease, background 120ms ease;
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.06), inset -2px -2px 0 rgba(0, 0, 0, 0.6);
  text-align: center;
  line-height: 1.1;
}
.mc-tab:active { transform: translateY(2px); }
.mc-tab.is-active {
  color: #061106;
  background: linear-gradient(180deg, var(--mc-green-hi), var(--mc-green));
  border-color: #000;
  box-shadow:
    inset 2px 2px 0 rgba(255, 255, 255, 0.55),
    inset -2px -2px 0 rgba(0, 0, 0, 0.55),
    0 0 14px var(--mc-green-glow);
}

/* ============================================================
 * Layout
 * ============================================================ */
.mc-main {
  position: relative;
  z-index: 1;
  padding: 12px 14px 90px;
}
.mc-tab-page {
  display: none;
  animation: mc-page-fade 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
.mc-tab-page.is-visible { display: block; }

@keyframes mc-page-fade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.mc-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.mc-h2 {
  font-family: 'Press Start 2P', monospace;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--mc-green-hi);
  text-shadow: 0 2px 0 #000;
}
.mc-h3 {
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  color: var(--mc-gold);
  margin-top: 18px;
  margin-bottom: 8px;
  text-shadow: 0 2px 0 #000;
}
.mc-sub {
  color: var(--mc-text-dim);
  font-size: 16px;
  margin-bottom: 14px;
}
.mc-sub--small { font-size: 14px; }

.mc-pill {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  background: var(--mc-bg-3);
  border: 2px solid var(--mc-gold);
  color: var(--mc-gold);
  padding: 4px 8px;
}

.mc-divider {
  height: 4px;
  background:
    repeating-linear-gradient(90deg, var(--mc-green-lo), var(--mc-green-lo) 8px, transparent 8px, transparent 16px);
  margin: 22px 0 4px;
  opacity: 0.55;
}

/* ============================================================
 * Listings
 * ============================================================ */
.mc-listings {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mc-listing {
  position: relative;
  background:
    linear-gradient(180deg, rgba(63, 191, 63, 0.10) 0%, rgba(0, 0, 0, 0) 70%),
    var(--mc-bg-2);
  border: 3px solid #000;
  padding: 12px 14px 14px;
  box-shadow: var(--mc-shadow-3d);
}
.mc-listing::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 1px solid var(--mc-green);
  opacity: 0.4;
}
.mc-listing-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.mc-listing-amount {
  font-family: 'Press Start 2P', monospace;
  font-size: 14px;
  color: var(--mc-gold);
  text-shadow: 0 2px 0 #000;
}
.mc-listing-rate {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  color: var(--mc-green-hi);
}
.mc-listing-meta {
  font-size: 16px;
  color: var(--mc-text);
  margin: 4px 0 6px;
}
.mc-listing-meta b { color: var(--mc-gold); }
.mc-listing-desc {
  color: var(--mc-text-dim);
  font-size: 15px;
  margin: 4px 0 10px;
}
.mc-listing-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.mc-empty {
  color: var(--mc-text-dim);
  font-size: 16px;
  text-align: center;
  padding: 18px 12px;
  border: 2px dashed var(--mc-border);
  background: rgba(0, 0, 0, 0.3);
}

/* ============================================================
 * Buttons
 * ============================================================ */
.mc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 3px solid #000;
  padding: 12px 14px;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  color: #061106;
  background: var(--mc-green);
  box-shadow:
    inset 2px 2px 0 rgba(255, 255, 255, 0.45),
    inset -2px -2px 0 rgba(0, 0, 0, 0.55),
    0 4px 0 #000;
  transition: transform 80ms ease, box-shadow 80ms ease;
  min-height: 44px;
}
.mc-btn:active {
  transform: translateY(3px);
  box-shadow:
    inset 2px 2px 0 rgba(255, 255, 255, 0.45),
    inset -2px -2px 0 rgba(0, 0, 0, 0.55),
    0 1px 0 #000;
}
.mc-btn--green { background: linear-gradient(180deg, var(--mc-green-hi), var(--mc-green)); }
.mc-btn--gold  { background: linear-gradient(180deg, var(--mc-gold-hi), var(--mc-gold)); color: #2a1c00; }
.mc-btn--ghost {
  background: transparent;
  color: var(--mc-green-hi);
  box-shadow: inset 0 0 0 2px var(--mc-green);
}
.mc-btn--small {
  padding: 8px 10px;
  font-size: 9.5px;
  min-height: 36px;
}

/* ============================================================
 * Form
 * ============================================================ */
.mc-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--mc-bg-2);
  border: 3px solid #000;
  padding: 14px;
  box-shadow: var(--mc-shadow-3d);
}
.mc-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mc-label > span {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: var(--mc-green-hi);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.mc-input,
.mc-textarea {
  font-family: 'VT323', monospace;
  font-size: 18px;
  color: var(--mc-text);
  background: #0a120a;
  border: 2px solid var(--mc-border);
  padding: 10px 12px;
  outline: none;
  resize: none;
  width: 100%;
}
.mc-input:focus,
.mc-textarea:focus {
  border-color: var(--mc-green);
  box-shadow: 0 0 0 2px rgba(63, 191, 63, 0.25);
}

/* ============================================================
 * Dealer
 * ============================================================ */
.mc-dealer-card {
  background:
    linear-gradient(180deg, rgba(255, 217, 59, 0.18) 0%, rgba(0, 0, 0, 0) 80%),
    var(--mc-bg-2);
  border: 3px solid var(--mc-gold);
  padding: 16px;
  box-shadow:
    inset 2px 2px 0 rgba(255, 255, 255, 0.10),
    0 6px 0 #000,
    0 10px 22px rgba(255, 217, 59, 0.18);
  margin-bottom: 18px;
}
.mc-dealer-rate {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}
.mc-dealer-label {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  color: var(--mc-text-dim);
  letter-spacing: 0.04em;
}
.mc-dealer-value {
  font-family: 'Press Start 2P', monospace;
  font-size: 18px;
  color: var(--mc-gold);
  text-shadow: 0 2px 0 #000;
}

/* ============================================================
 * Profile
 * ============================================================ */
.mc-profile-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--mc-bg-2);
  border: 3px solid #000;
  padding: 14px;
  box-shadow: var(--mc-shadow-3d);
  margin-bottom: 14px;
}
.mc-profile-info { flex: 1; min-width: 0; }
.mc-profile-name {
  font-family: 'Press Start 2P', monospace;
  font-size: 13px;
  color: var(--mc-green-hi);
  margin-bottom: 4px;
  word-break: break-word;
}
.mc-profile-handle {
  color: var(--mc-gold);
  font-size: 16px;
}

.mc-profile-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.mc-stat {
  background: var(--mc-bg-2);
  border: 2px solid var(--mc-green);
  padding: 10px 8px;
  text-align: center;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4);
}
.mc-stat-label {
  display: block;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: var(--mc-text-dim);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mc-stat-value {
  font-family: 'Press Start 2P', monospace;
  font-size: 14px;
  color: var(--mc-gold);
  text-shadow: 0 2px 0 #000;
}

/* ============================================================
 * Toast
 * ============================================================ */
.mc-toast {
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  padding: 10px 14px;
  background: var(--mc-bg-2);
  border: 3px solid var(--mc-gold);
  color: var(--mc-gold);
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  z-index: 100;
  box-shadow: 0 0 22px rgba(255, 217, 59, 0.5);
}

/* ============================================================
 * Balance strip (between tabs and main content)
 * ============================================================ */
.mc-balance-strip {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 14px 0;
  padding: 10px 12px;
  border: 2px solid var(--mc-gold);
  background:
    linear-gradient(180deg, rgba(255, 217, 59, 0.18) 0%, rgba(0, 0, 0, 0.0) 100%),
    var(--mc-bg-2);
  box-shadow:
    inset 2px 2px 0 rgba(255, 255, 255, 0.10),
    inset -2px -2px 0 rgba(0, 0, 0, 0.45),
    0 4px 0 #000;
}
.mc-balance-label {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: var(--mc-text-dim);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.mc-balance-value {
  flex: 1;
  font-family: 'Press Start 2P', monospace;
  font-size: 14px;
  color: var(--mc-gold);
  text-shadow: 0 2px 0 #000;
}

/* Profile balance — bigger */
.mc-balance-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px;
  background:
    linear-gradient(180deg, rgba(255, 217, 59, 0.2) 0%, rgba(0, 0, 0, 0.0) 100%),
    var(--mc-bg-2);
  border: 3px solid var(--mc-gold);
  box-shadow:
    inset 2px 2px 0 rgba(255, 255, 255, 0.10),
    0 6px 0 #000,
    0 10px 22px rgba(255, 217, 59, 0.18);
  margin-bottom: 14px;
}
.mc-balance-card-label {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  color: var(--mc-text-dim);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.mc-balance-card-value {
  font-family: 'Press Start 2P', monospace;
  font-size: 26px;
  color: var(--mc-gold);
  text-shadow: 0 3px 0 #000, 0 0 18px rgba(255, 217, 59, 0.4);
  margin: 4px 0 8px;
}
.mc-balance-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

/* ============================================================
 * Sheet (topup modal)
 * ============================================================ */
.mc-sheet {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0.72);
  padding: 16px;
  animation: mc-sheet-fade 200ms ease-out;
}
.mc-sheet[hidden] { display: none; }
.mc-sheet-card {
  width: 100%;
  max-width: 420px;
  background: var(--mc-bg-2);
  border: 3px solid var(--mc-gold);
  padding: 16px;
  box-shadow:
    0 -6px 0 #000,
    0 -16px 30px rgba(255, 217, 59, 0.22);
  animation: mc-sheet-up 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes mc-sheet-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes mc-sheet-up {
  from { transform: translateY(28px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}