*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; line-height: 1.5; }

body {
  font-family: "Nunito Sans", system-ui, -apple-system, sans-serif;
  background: #080808;
  color: #f2f2f2;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* Pages */
.page { height: 100vh; overflow-y: auto; position: relative; }
.app { min-height: 100vh; }

.page {
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
         env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* Header on every page */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  position: sticky;
  top: 0;
  z-index: 50;
  background: linear-gradient(to bottom, #080808 0%, rgba(8,8,8,0.85) 100%);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid #1a1a1a;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.02em;
}
.brand .mark {
  width: 28px; height: 28px;
  border: 2px solid #059669;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 14px; color: #059669;
}
.back {
  display: flex; align-items: center; gap: 4px;
  font-size: 14px; font-weight: 600; color: #a1a1aa;
  border: none; background: transparent; cursor: pointer;
  padding: 8px; border-radius: 8px;
  transition: background 0.15s;
}
.back:hover { background: #18181b; }
.chevron { width: 0; height: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-right: 6px solid #a1a1aa; }

/* Container */
.container { max-width: 430px; margin: 0 auto; width: 100%; }

/* Card */
.card {
  background: #0f0f0f;
  border: 1px solid #1f1f1f;
  border-radius: 12px;
  padding: 16px;
}

/* Game grid */
.game-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 8px; }
.game-card {
  aspect-ratio: 1;
  border: 2px solid #1f1f1f;
  border-radius: 14px;
  background: #121212;
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px;
  transition: border-color 0.15s, transform 0.05s, box-shadow 0.15s;
  position: relative; overflow: hidden;
}
.game-card:focus-visible { outline: 2px solid #059669; outline-offset: 2px; }
.game-card:hover { border-color: #059669; transform: translateY(-2px); box-shadow: 0 10px 25px -5px rgba(5,150,105,0.25); }
.game-card:active { transform: translateY(0); }
.icon-wrap {
  width: 64px; height: 64px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; border: 1px solid #272727;
}
.game-card .name { font-size: 13px; font-weight: 700; text-align: center; line-height: 1.2; }

/* Product list */
.product-list { display: grid; gap: 12px; margin-top: 8px; }
.product-card {
  display: flex; align-items: center; justify-content: space-between;
  background: #121212;
  border: 1px solid #1f1f1f;
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  position: relative; overflow: hidden;
}
.product-card:focus-visible { outline: 2px solid #059669; outline-offset: -2px; }
.product-card:hover { border-color: #059669; background: #151515; }
.product-card:active { transform: scale(0.99); }
.product-info { min-width: 0; }
.product-name { font-size: 15px; font-weight: 700; line-height: 1.2; }
.product-desc { font-size: 12px; color: #a1a1aa; margin-top: 2px; line-height: 1.3; }
.product-right { text-align: right; min-width: 70px; }
.product-price { font-size: 16px; font-weight: 800; color: #f2f2f2; display: block; }
.product-tag {
  display: inline-block; font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.05em;
  padding: 4px 8px; border-radius: 6px; background: #064e3b; color: #6ee7b7;
  margin-top: 6px;
}

/* Input / label */
label { font-size: 13px; font-weight: 700; color: #f2f2f2; margin-bottom: 6px; display: block; letter-spacing: 0.01em; }
input {
  width: 100%;
  background: #0f0f0f;
  border: 1px solid #272727;
  border-radius: 10px;
  padding: 14px 16px;
  color: #f2f2f2;
  font-size: 16px;
  font-family: inherit;
}
input:focus { outline: none; border-color: #059669; box-shadow: 0 0 0 3px rgba(5,150,105,0.25); }
input::placeholder { color: #71717a; }

/* Secondary (ghost) button */
.ghost {
  width: 100%;
  background: transparent;
  border: 1px solid #272727;
  border-radius: 10px;
  padding: 14px 16px;
  color: #a1a1aa;
  font-size: 16px; font-weight: 700; font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.ghost:hover { border-color: #454545; color: #e4e4e7; }
.ghost:focus-visible { outline: none; border-color: #059669; box-shadow: 0 0 0 3px rgba(5,150,105,0.25); }

/* Primary (green) button */
.btn {
  width: 100%;
  background: #059669;
  border: none;
  border-radius: 10px;
  padding: 15px 16px;
  color: #ffffff;
  font-size: 17px; font-weight: 800; font-family: inherit;
  cursor: pointer;
  transition: transform 0.05s, filter 0.15s, box-shadow 0.15s;
  box-shadow: 0 4px 14px rgba(5,150,105,0.35);
}
.btn:focus-visible { outline: 2px solid #059669; outline-offset: 2px; }
.btn:hover { filter: brightness(1.08); box-shadow: 0 6px 18px rgba(5,150,105,0.45); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; }

/* Margin helpers */
.mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; }
.mb-12 { margin-bottom: 12px; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; }

/* Hint text */
.hint { font-size: 13px; color: #a1a1aa; margin-top: 10px; text-align: center; }
.hint b { color: #d4d4d8; }

/* Keyboard & state */
.kbd-row { display: flex; gap: 8px; margin-top: 12px; }
.kbd { flex: 1; display: flex; flex-direction: column; align-items: center; }
.kbd .key {
  width: 64px; height: 64px; border: 1px solid #272727;
  border-radius: 10px; display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 800; color: #f2f2f2; background: #121212;
}
.kbd .label { font-size: 10px; color: #71717a; margin-top: 4px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }

/* QR panel */
.qr-panel {
  display: flex; flex-direction: column; align-items: center;
  gap: 16px; background: #121212;
  border: 1px solid #1f1f1f; border-radius: 16px; padding: 24px 16px;
}
.qr-wrap { width: 200px; height: 200px; background: #ffffff; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #a1a1aa; overflow: hidden; }
.qr-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qr-amount { font-size: 17px; font-weight: 800; color: #f2f2f2; }
.qr-amount .rm { font-size: 16px; font-weight: 800; color: #059669; margin-left: 4px; }

/* Success */
.success-wrap { display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 320px; margin: 24px auto 0; }
.success-icon {
  width: 72px; height: 72px; border-radius: 50%;
  background: #064e3b; display: flex; align-items: center; justify-content: center;
  font-size: 32px; border: 2px solid #34d399;
}
.success-title { font-size: 24px; font-weight: 800; color: #f2f2f2; text-align: center; }
.success-sub { font-size: 15px; color: #a1a1aa; text-align: center; line-height: 1.4; }
.success-meta {
  display: flex; flex-direction: column; gap: 6px; width: 100%;
  background: #0f0f0f; border: 1px solid #1f1f1f; border-radius: 12px; padding: 14px 16px; margin-top: 16px;
}
.success-meta .row { display: flex; justify-content: space-between; font-size: 14px; color: #f2f2f2; }
.success-meta .row .k { color: #a1a1aa; font-size: 13px; }
.success-meta .row .v { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.success-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 24px; width: 100%; }
.btn-small { width: 100%; background: transparent; border: 1px solid #272727; border-radius: 10px; padding: 12px 14px; color: #f2f2f2; font-size: 14px; font-weight: 700; cursor: pointer; }
.btn-small:hover { border-color: #454545; background: #18181b; }

/* Pay button on success page */
.pay-btn { width: 100%; background: #059669; border: none; border-radius: 10px; padding: 16px 16px; color: #fff; font-size: 17px; font-weight: 800; cursor: pointer; margin-top: 16px; box-shadow: 0 4px 14px rgba(5,150,105,0.35); }
.pay-btn:hover { filter: brightness(1.08); }

/* Toast */
.toast {
  position: fixed; bottom: env(safe-area-inset-bottom, 20px); left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: #18181b; border: 1px solid #272727;
  color: #f2f2f2; padding: 12px 16px; border-radius: 10px;
  font-size: 14px; font-weight: 600; white-space: nowrap;
  opacity: 0; transition: opacity 0.25s, transform 0.25s; z-index: 100; pointer-events: none;
}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }

/* Error inline */
.err { color: #f87171; font-size: 12px; margin-top: 6px; display: none; }
.err.show { display: block; }

/* Loading overlay */
.loading {
  position: fixed; inset: 0; background: #0b0b0b;
  display: none; align-items: center; justify-content: center;
  z-index: 1000; flex-direction: column; gap: 12px;
}
.loading.show { display: flex; }
.spinner { width: 40px; height: 40px; border: 3px solid #1f1f1f; border-top-color: #059669; border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .game-card { transition: none; }
  .game-card:hover { transform: none; }
  .product-card { transition: none; }
  .product-card:hover { transform: none; }
  .spinner { animation: none; }
  .toast { transition: none; }
  .btn, .btn-small, .ghost, .back { transition: none; }
}

/* Safari toolbar */
@supports (-webkit-touch-callout: none) {
  .page { padding-bottom: env(safe-area-inset-bottom); }
}

/* accessibility: focus ring on interactive */
*:focus-visible { outline: 2px solid #059669; outline-offset: 2px; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid #059669; outline-offset: 2px; }

/* icon glyph fallbacks used inline in HTML via .icon-text */
.icon-text { font-family: system-ui, sans-serif; }

/* none-state */
.none { display: none !important; }

/* order summary on auth page */
.order-summary {
  display: flex; align-items: center; gap: 10px;
  background: #0f0f0f; border: 1px solid #1f1f1f; border-radius: 10px;
  padding: 10px 12px; margin-bottom: 16px;
}
.order-summary .thumb { width: 36px; height: 36px; border-radius: 8px; background: #1a1a1a; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.order-summary .info { min-width: 0; flex: 1; }
.order-summary .name { font-size: 14px; font-weight: 700; color: #f2f2f2; line-height: 1.2; }
.order-summary .desc { font-size: 11px; color: #a1a1aa; line-height: 1.2; }
.order-summary .price { font-size: 14px; font-weight: 800; color: #059669; }

/* qr fallback text */
.qr-fallback { font-size: 12px; color: #a1a1aa; text-align: center; margin-top: 10px; line-height: 1.3; }