/* 2N21 Ministries Arcade - scoped */
.n21a-app{ --n-blue:#3b82f6; --n-pink:#ec4899; --n-yellow:#f59e0b; --n-green:#22c55e; --n-purple:#8b5cf6; color:#111827; }
.n21a-card{ max-width: 1100px; margin: 16px auto; background:#fff; border:1px solid #e5e7eb; border-radius: 18px; box-shadow: 0 14px 40px rgba(0,0,0,.08); overflow:hidden; }
.n21a-head{ display:flex; justify-content:space-between; gap:12px; padding: 14px 14px; align-items:flex-start;
  background: linear-gradient(90deg, rgba(59,130,246,.12), rgba(236,72,153,.10), rgba(245,158,11,.10));
  border-bottom:1px solid #e5e7eb;
}
.n21a-brand{ font-weight: 900; font-size: 12px; letter-spacing:.4px; text-transform: uppercase; }
.n21a-title{ font-weight: 950; font-size: 20px; margin-top: 2px; }
.n21a-sub{ font-size: 12px; color:#6b7280; margin-top: 2px; }

.n21a-top{ display:flex; gap:14px; flex-wrap: wrap; padding: 14px; }
.n21a-nickbox{ flex: 1 1 360px; }
.n21a-label{ display:block; font-size: 12px; font-weight: 900; margin-bottom: 6px; }
.n21a-row{ display:flex; gap:8px; }
.n21a-input{ width:100%; padding: 10px 12px; border:1px solid #e5e7eb; border-radius: 14px; font-size: 14px; background:#fff; color:#111827; outline:none; }
.n21a-input:focus{ border-color: var(--n-blue); box-shadow: 0 0 0 3px rgba(59,130,246,.14); }
.n21a-hint{ font-size: 12px; color:#6b7280; margin-top: 6px; }

.n21a-stats{ flex: 1 1 360px; display:flex; gap:10px; justify-content:flex-end; }
.n21a-stat{ flex: 1 1 120px; min-width: 120px; border:1px solid #e5e7eb; background:#f9fafb; border-radius: 16px; padding: 10px 12px; }
.n21a-stat-label{ font-size: 12px; color:#6b7280; font-weight: 800; }
.n21a-stat-val{ font-size: 22px; font-weight: 950; margin-top: 2px; }

.n21a-game{ padding: 14px; }
.n21a-canvas-wrap{ border-radius: 18px; overflow:hidden; border:1px solid #e5e7eb; background: #f8fafc; position:relative; }
.n21a-canvas{ width: 100%; height: 360px; display:block; touch-action: manipulation; }
.n21a-overlay{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.55));
}
.n21a-overlay-card{ background: rgba(255,255,255,.92); border: 1px solid rgba(229,231,235,.9); border-radius: 18px; padding: 14px 14px; max-width: 520px; box-shadow: 0 10px 40px rgba(0,0,0,.10); }
.n21a-overlay-title{ font-weight: 950; font-size: 18px; }
.n21a-overlay-sub{ font-size: 12px; color:#6b7280; margin-top: 6px; }
.n21a-loading{ color:#6b7280; font-weight: 800; padding: 10px 12px; }

.n21a-bottom{ display:flex; gap:14px; flex-wrap:wrap; padding: 0 14px 14px; align-items:flex-start; }
.n21a-actions{ flex: 1 1 240px; display:flex; gap:10px; flex-wrap:wrap; }
.n21a-leader{ flex: 1 1 420px; border:1px solid #e5e7eb; background:#f9fafb; border-radius: 18px; padding: 12px; }
.n21a-leader-title{ font-weight: 950; margin-bottom: 8px; }
.n21a-board{ display:grid; gap:8px; }
.n21a-board-row{ display:flex; justify-content:space-between; gap:10px; padding: 8px 10px; background:#fff; border:1px solid #e5e7eb; border-radius: 14px; font-size: 13px; }
.n21a-pill{ font-size: 11px; font-weight: 950; padding: 2px 8px; border-radius: 999px; background: rgba(59,130,246,.12); color: #1d4ed8; }

.n21a-btn{ border:1px solid #e5e7eb; background:#f9fafb; color:#111827; padding: 10px 12px; border-radius: 14px; cursor:pointer; font-weight: 900; font-size: 13px; }
.n21a-btn:hover{ background:#f3f4f6; }
.n21a-btn-primary{ background: var(--n-blue); border-color: var(--n-blue); color:#fff; }
.n21a-btn-primary:hover{ background:#2563eb; }
.n21a-btn-ghost{ background:#fff; }

.n21a-modal{ position:fixed; inset:0; z-index: 999999; display:none; }
.n21a-modal[aria-hidden="false"]{ display:block; }
.n21a-backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.55); backdrop-filter: blur(2px); }
.n21a-panel{ position:absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 440px; max-width: calc(100vw - 36px); background:#fff; border-radius: 18px; border:1px solid #e5e7eb; box-shadow: 0 20px 70px rgba(0,0,0,.35); overflow:hidden; }
.n21a-panel-head{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding: 12px 12px; border-bottom: 1px solid #e5e7eb; }
.n21a-panel-title{ font-weight: 950; }
.n21a-panel-body{ padding: 12px; }
.n21a-switch{ display:flex; gap:10px; align-items:center; font-weight: 950; margin-bottom: 10px; }
.n21a-switch input{ transform: scale(1.1); }
.n21a-range{ width: 100%; }

.n21a-standalone{ max-width: 760px; margin: 12px auto; background:#fff; border:1px solid #e5e7eb; border-radius: 18px; padding: 12px; }
.n21a-standalone-head{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom: 10px; }

.n21a-toast{ position:fixed; left:50%; transform:translateX(-50%); bottom:22px; z-index:999999; background: rgba(17,24,39,.95); color:#fff; padding:10px 12px; border-radius: 14px; font-weight: 900; font-size: 13px; max-width: calc(100vw - 36px); }

@media (max-width: 720px){
  .n21a-stats{ justify-content:flex-start; }
  .n21a-canvas{ height: 300px; }
}


/* --- Cartoon stage (more colorful, less "just white") --- */
.n21a-btn{ appearance:none; -webkit-appearance:none; border:1px solid #e5e7eb; background:#f9fafb; color:#111827; }
.n21a-btn:focus{ outline:none; box-shadow: 0 0 0 3px rgba(59,130,246,.18); }
.n21a-btn-big{ padding: 12px 16px; font-size: 14px; border-radius: 16px; }

.n21a-game{ padding-top: 0; }
.n21a-stage{
  margin: 14px;
  border-radius: 18px;
  border: 1px solid #e5e7eb;
  overflow: hidden;
  min-height: 320px;
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align:center;
  gap: 10px;
  background:
    radial-gradient(circle at 20% 20%, rgba(236,72,153,.18), transparent 40%),
    radial-gradient(circle at 80% 30%, rgba(59,130,246,.18), transparent 42%),
    radial-gradient(circle at 40% 85%, rgba(245,158,11,.18), transparent 46%),
    linear-gradient(180deg, rgba(255,255,255,1), rgba(249,250,251,1));
  position: relative;
}
.n21a-stage:before{
  content:"";
  position:absolute; inset:0;
  background-image:
    radial-gradient(rgba(17,24,39,.07) 1px, transparent 1px);
  background-size: 18px 18px;
  opacity: .25;
  pointer-events:none;
}
.n21a-stage-title{ font-weight: 950; font-size: 20px; color:#111827; position:relative; }
.n21a-stage-sub{ font-weight: 800; font-size: 13px; color:#374151; position:relative; max-width: 520px; }

.n21a-stage-art{
  width: 120px; height: 120px;
  border-radius: 999px;
  position: relative;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(229,231,235,.9);
  box-shadow: 0 18px 45px rgba(0,0,0,.10);
}
.n21a-app[data-game="runner"] .n21a-stage-art:before{
  content:"";
  position:absolute; inset: 26px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 6px rgba(245,158,11,.18);
}
.n21a-app[data-game="runner"] .n21a-stage-art:after{
  content:"";
  position:absolute;
  left: 50%; top: 50%;
  width: 18px; height: 8px;
  transform: translate(-50%, 10px);
  border-bottom: 3px solid rgba(17,24,39,.35);
  border-radius: 0 0 14px 14px;
}
.n21a-app[data-game="runner"] .n21a-stage-art{
  animation: n21a-bounce 1.1s ease-in-out infinite;
}
.n21a-app[data-game="runner"] .n21a-stage-art i{ display:none; }

.n21a-app[data-game="stack"] .n21a-stage-art{
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.7));
}
.n21a-app[data-game="stack"] .n21a-stage-art:before{
  content:"";
  position:absolute;
  left: 18px; right: 18px; bottom: 24px;
  height: 18px;
  border-radius: 12px;
  background: rgba(245,158,11,.35);
  box-shadow:
    0 -22px 0 rgba(245,158,11,.30),
    0 -44px 0 rgba(245,158,11,.25);
}
.n21a-app[data-game="stack"] .n21a-stage-art:after{
  content:"";
  position:absolute;
  left: 22px; right: 22px; top: 22px;
  height: 10px;
  border-radius: 999px;
  background: rgba(59,130,246,.22);
  animation: n21a-slide 1.2s ease-in-out infinite;
}

@keyframes n21a-bounce{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
}
@keyframes n21a-slide{
  0%{ transform: translateX(-18px); }
  50%{ transform: translateX(18px); }
  100%{ transform: translateX(-18px); }
}