/* ===============================
   Arcade — 80s Side-Scroller
   =============================== */

/* Optional pixel fonts (load externally if you like):
   - "Press Start 2P", "VT323", "Pixelify Sans"
   This theme will fall back to monospace if those aren’t present.
*/

html[data-theme="arcade"] {
  /* Core palette */
  --arc-ink:           #dff5ff;   /* UI text on dark */
  --arc-ink-muted:     #9bd0e7;
  --arc-ink-strong:    #ffffff;

  --arc-face:          #0a1630;   /* panels/cards dark navy */
  --arc-elev:          #0f1f45;   /* elevated */
  --arc-border:        #1c3b77;
  --arc-shadow:        rgba(0,0,0,.45);

  /* Accent pixels */
  --arc-accent:        #1de1ff;   /* cyan */
  --arc-accent-600:    #10b6d1;   /* cyan hover */
  --arc-accent-200:    #7ee9ff;

  /* Status */
  --arc-success:       #22d36f;
  --arc-warning:       #f4c542;
  --arc-danger:        #ff4d6d;
  --arc-info:          #5ea1ff;

  /* Buttons / geometry */
  --arc-radius:        10px;
  --arc-chip-radius:   999px;

  /* Pixel borders (fake 1px “CRT” bevel) */
  --px-light:          rgba(255,255,255,.22);
  --px-dark:           rgba(0,0,0,.6);

  /* Topbar */
  --arc-bar:           #08102a;
  --arc-bar-ink:       #e6f8ff;
}

/* Base + Animated Background
   ---------------------------------------------------------------- */
html[data-theme="arcade"] body{
  min-height:100vh;
  color:var(--arc-ink);
  background:#07132a;
  font-family: "Press Start 2P","Pixelify Sans","VT323","SFMono-Regular",
               Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  letter-spacing:.2px;
  position:relative;
  overflow-x:hidden; /* prevent any horizontal jiggle */
}

/* Parallax stars + floating orbs + moving ground.
   All CSS-only; no images. */
html[data-theme="arcade"] body::before,
html[data-theme="arcade"] body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
}

/* Stars layer */
html[data-theme="arcade"] body::before{
  background:
    radial-gradient(2px 2px at 20% 30%, #ffffff 60%, transparent 61%) repeat,
    radial-gradient(2px 2px at 70% 60%, #a4ffff 60%, transparent 61%) repeat,
    radial-gradient(1px 1px at 40% 80%, #d0f0ff 60%, transparent 61%) repeat;
  background-size: 200px 200px, 260px 260px, 180px 180px;
  animation: arc-stars 60s linear infinite;
  opacity:.55;
}

/* Platforms / ground + orbs */
html[data-theme="arcade"] body::after{
  background:
    /* orbs/coins */
    radial-gradient(14px 14px at 15% 25%, #ffdf57 35%, #ff9a3d 36% 55%, transparent 56%) ,
    radial-gradient(10px 10px at 65% 35%, #ff8bd6 35%, #e24da8 36% 55%, transparent 56%) ,
    radial-gradient(12px 12px at 80% 70%, #85f766 35%, #2ed158 36% 55%, transparent 56%) ,
    /* floating platforms (grass on stone) */
    linear-gradient(#2f5836, #214527) 0 72%, /* top edge */
    repeating-linear-gradient(
      #223a7a 0 16px,
      #1d2f62 16px 32px
    ),
    /* ground stripe bottom */
    linear-gradient(#0b1a40, #0b1a40) 0 100%;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat-x, repeat, repeat-x;
  background-size:
    28px 28px, 22px 22px, 24px 24px,
    100% 10px,
    100% 100%,
    100% 8px;
  background-position:
    10% 26%, 68% 38%, 82% 72%,
    0 60%,
    0 0,
    0 100%;
  animation: arc-floating 14s ease-in-out infinite alternate,
             arc-ground 40s linear infinite;
  opacity:.9;
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  html[data-theme="arcade"] body::before,
  html[data-theme="arcade"] body::after{
    animation: none !important;
  }
}

/* Starfield gentle drift */
@keyframes arc-stars{
  0%   { background-position: 0 0, 0 0, 0 0; }
  100% { background-position: -400px -200px, -320px -160px, -280px -240px; }
}

/* Platforms/orbs bobbing */
@keyframes arc-floating{
  0%   { background-position: 10% 27%, 68% 37%, 82% 71%, 0 60%, 0 0, 0 100%; }
  100% { background-position: 12% 24%, 70% 39%, 80% 74%, 0 61.5%, 0 0, 0 100%; }
}

/* Slow “ground scroll” illusion */
@keyframes arc-ground{
  0%   { background-position: 10% 26%, 68% 38%, 82% 72%,
          0 60%, 0 0, 0 100%; }
  100% { background-position: 10% 26%, 68% 38%, 82% 72%,
          -800px 60%, 0 0, -1200px 100%; }
}

/* Selection highlight */
html[data-theme="arcade"] ::selection{
  background: rgba(29,225,255,.35);
  color:#fff;
}

/* Top bar
   ---------------------------------------------------------------- */
html[data-theme="arcade"] .topbar-wrap{
  background: linear-gradient(180deg, var(--arc-bar) 0%, #0a1a3a 100%);
  border-bottom: 1px solid #0f2e66;
  box-shadow: 0 8px 26px rgba(0,0,0,.45);
}
html[data-theme="arcade"] .brand-title,
html[data-theme="arcade"] .brand .tagline,
html[data-theme="arcade"] .version-link{
  color: var(--arc-bar-ink) !important;
}

/* Pixel buttons on the topbar (Find/Create/Insights) */
html[data-theme="arcade"] .topbar .nav-btn,
html[data-theme="arcade"] .topbar .btn,
html[data-theme="arcade"] .topbar .btn-success{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:36px !important;
  padding:6px 14px !important;
  box-sizing:border-box !important;

  color:#e6fbff !important;
  background: #0b254e !important;
  border: 2px solid #2f6bd4 !important;
  border-radius: 6px !important;
  box-shadow:
    0 0 0 2px #071a3a inset,
    0 2px 0 0 rgba(0,0,0,.45);
  text-shadow: 0 1px 0 rgba(0,0,0,.6);
}
html[data-theme="arcade"] .topbar .nav-btn:hover,
html[data-theme="arcade"] .topbar .btn:hover{
  background:#113066 !important;
  border-color:#4b89ff !important;
}
html[data-theme="arcade"] .topbar .user-chip{
  background:#113066 !important;
  border-color:#3a79ef !important;
  color:#e6fbff !important;
  border-radius:999px !important;
}

/* Cards / Panels
   ---------------------------------------------------------------- */
html[data-theme="arcade"] .card,
html[data-theme="arcade"] .result-card,
html[data-theme="arcade"] .search-form,
html[data-theme="arcade"] .form-card,
html[data-theme="arcade"] .user-menu,
html[data-theme="arcade"] .mobile-menu-inner{
  background: linear-gradient(180deg, var(--arc-face) 0%, #0b1d42 100%);
  border: 1px solid var(--arc-border);
  color: var(--arc-ink);
  border-radius: var(--arc-radius);
  box-shadow: 0 14px 28px var(--arc-shadow);
}

/* Section headings & muted text */
html[data-theme="arcade"] .page-title,
html[data-theme="arcade"] .subject-title,
html[data-theme="arcade"] .cc-panel-title{
  color: var(--arc-ink-strong);
  text-shadow: 0 2px 0 rgba(0,0,0,.5);
}
html[data-theme="arcade"] .section-label,
html[data-theme="arcade"] .meta-label,
html[data-theme="arcade"] .page-subtitle,
html[data-theme="arcade"] .muted{
  color: var(--arc-ink-muted);
}

/* Inputs
   ---------------------------------------------------------------- */
html[data-theme="arcade"] .search-input,
html[data-theme="arcade"] .form-control,
html[data-theme="arcade"] .login-input,
html[data-theme="arcade"] .tool-input,
html[data-theme="arcade"] textarea{
  background:#0b1b3d;
  border:1px solid #2a4ea0;
  color:#dff5ff;
  border-radius:8px;
  box-shadow: 0 2px 0 rgba(0,0,0,.35) inset, 0 0 0 2px rgba(16,34,82,.4) inset;
}
html[data-theme="arcade"] .search-input::placeholder,
html[data-theme="arcade"] .form-control::placeholder{
  color:#8db5cf;
}
html[data-theme="arcade"] .search-input:focus,
html[data-theme="arcade"] .form-control:focus,
html[data-theme="arcade"] .login-input:focus,
html[data-theme="arcade"] .tool-input:focus{
  border-color: var(--arc-accent);
  box-shadow: 0 0 0 3px rgba(29,225,255,.26);
  outline:none;
}

/* Check pills/chips (filters)
   ---------------------------------------------------------------- */
html[data-theme="arcade"] .check-pill{
  background:#0c214a;
  border:1px solid #2a4ea0;
  color:#c9eaff;
  border-radius:8px;
}
html[data-theme="arcade"] .check-pill:hover{ background:#103062; }
html[data-theme="arcade"] .chip,
html[data-theme="arcade"] .chip-link{
  background:#0d2552;
  border:1px solid #2a4ea0;
  color:#c9eaff;
  border-radius: var(--arc-chip-radius);
}
html[data-theme="arcade"] .chip-muted{
  background:#0e2143;
  color:#9ec6df;
}

/* Buttons
   ---------------------------------------------------------------- */
html[data-theme="arcade"] .btn{
  background:#0b254e;
  border:2px solid #2f6bd4;
  color:#e6fbff;
  border-radius:10px;
  padding:8px 14px;
  text-shadow:0 1px 0 rgba(0,0,0,.6);
  box-shadow:
    0 0 0 2px #071a3a inset,
    0 4px 0 0 rgba(0,0,0,.45);
}
html[data-theme="arcade"] .btn:hover{
  background:#113066;
  border-color:#4b89ff;
}
html[data-theme="arcade"] .btn-primary{
  background:linear-gradient(180deg,#1de1ff 0%,#13a7be 100%);
  border-color:#67f0ff;
  color:#06202c;
  text-shadow:none;
}
html[data-theme="arcade"] .btn-primary:hover{
  background:linear-gradient(180deg,#57ecff 0%,#18bfd8 100%);
  border-color:#a1f7ff;
}
html[data-theme="arcade"] .btn-danger{
  background:#4a0f1e;
  border-color:#ff738c;
  color:#ffdbe2;
}
html[data-theme="arcade"] .btn-danger:hover{
  background:#5c1426;
}

/* Messages
   ---------------------------------------------------------------- */
html[data-theme="arcade"] .msg{
  background:#0c1e43;
  border:1px solid #2a4ea0;
  color:#e3f6ff;
}
html[data-theme="arcade"] .msg.info    { border-left:4px solid var(--arc-info);    background:#0b1f42; }
html[data-theme="arcade"] .msg.success { border-left:4px solid var(--arc-success); background:#0b2b3a; }
html[data-theme="arcade"] .msg.warning { border-left:4px solid var(--arc-warning); background:#2a240a; }
html[data-theme="arcade"] .msg.error   { border-left:4px solid var(--arc-danger);  background:#2a0d18; }

/* Links
   ---------------------------------------------------------------- */
html[data-theme="arcade"] a{
  color:#7ee9ff;
}
html[data-theme="arcade"] a:hover{
  color:#b6f4ff;
  text-decoration: underline;
}

/* Menus
   ---------------------------------------------------------------- */
html[data-theme="arcade"] .user-menu,
html[data-theme="arcade"] .mobile-menu-inner{
  background:#0a1836;
  border:1px solid #2a4ea0;
}
html[data-theme="arcade"] .user-menu .menu-item:hover,
html[data-theme="arcade"] .mobile-link:hover{
  background:#0e2a5a;
}

/* Tables
   ---------------------------------------------------------------- */
html[data-theme="arcade"] table{ border-collapse:collapse; }
html[data-theme="arcade"] th,
html[data-theme="arcade"] td{
  border:1px solid #223f86;
  background:#0f2147;
  color:#daf2ff;
}

/* Highlights & Validation
   ---------------------------------------------------------------- */
html[data-theme="arcade"] .mark-hit{
  background:#fffb91;
  color:#0a1630;
  padding:0 2px;
  border:1px solid #f0e276;
  border-radius:3px;
}

html[data-theme="arcade"] .form-control.scripture-valid,
html[data-theme="arcade"] .search-input.scripture-valid{
  border-color: var(--arc-success);
  background:#062a1a;
  box-shadow:0 0 0 3px rgba(34,211,110,.18);
}
html[data-theme="arcade"] .form-control.scripture-invalid,
html[data-theme="arcade"] .search-input.scripture-invalid{
  border-color: var(--arc-danger);
  background:#2a0d18;
  box-shadow:0 0 0 3px rgba(255,77,109,.18);
}
html[data-theme="arcade"] .scripture-pill-invalid{
  background:#3a0b18;
  border:1px solid #ff8ea2;
  color:#ffdbe2;
}
html[data-theme="arcade"] .scripture-pill-wol{
  background:#0d263e;
  border:1px solid #7ee9ff;
  color:#d9fbff;
}

/* Command Center accents
   ---------------------------------------------------------------- */
html[data-theme="arcade"] .settings-console .sec-tile{
  background:#0b1d42;
  border:1px solid #2a4ea0;
  color:#dff5ff;
  border-radius:12px;
  box-shadow:0 8px 20px rgba(0,0,0,.35);
}
html[data-theme="arcade"] .settings-console .sec-tile:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 26px rgba(0,0,0,.45);
}
html[data-theme="arcade"] .settings-console .sec-icon{
  background:#0c2a5a;
  color:#9ddcff;
  border:1px solid #2a4ea0;
}
html[data-theme="arcade"] .settings-console .swatch{
  border:1px solid #2a4ea0;
  background:linear-gradient(135deg,#0d2856,#18428d);
}

/* Misc polish
   ---------------------------------------------------------------- */
html[data-theme="arcade"] .topbar-wrap.is-scrolled{
  box-shadow:0 10px 28px rgba(0,0,0,.55);
  border-bottom-color:#0f2e66;
}

/* Make subject “chips” look like game powerups when highlighted */
html[data-theme="arcade"] .chip-subject.chip-hit{
  background:#ffe28c;
  border-color:#ffc864;
  color:#241300;
  box-shadow:0 2px 0 0 rgba(0,0,0,.45);
}