.ang-page,.ang-page *{box-sizing:border-box}
.ang-page{
  --ang-green:#82ff13;--ang-green2:#48d900;--ang-white:#f4f7f1;--ang-muted:#bdc8bc;
  position:relative;isolation:isolate;overflow:hidden;width:100%;margin:0;padding:72px 22px 56px;
  color:var(--ang-white);
  background:
    radial-gradient(circle at 50% 5%,rgba(92,255,23,.10),transparent 25%),
    radial-gradient(circle at 15% 48%,rgba(0,110,58,.16),transparent 25%),
    radial-gradient(circle at 85% 62%,rgba(61,255,0,.08),transparent 22%),
    linear-gradient(180deg,#010302 0%,#020604 47%,#010302 100%);
  font-family:Arial,Helvetica,sans-serif
}
.ang-shell{position:relative;z-index:2;width:min(1120px,100%);margin:0 auto}
.ang-stars{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.42}
.ang-stars-one{
  background-image:
    radial-gradient(circle,rgba(255,255,255,.85) 0 1px,transparent 1.5px),
    radial-gradient(circle,rgba(131,255,55,.65) 0 1px,transparent 1.6px);
  background-position:12px 18px,67px 91px;background-size:91px 91px,137px 137px
}
.ang-stars-two{
  opacity:.17;
  background-image:radial-gradient(circle,rgba(255,255,255,.8) 0 1px,transparent 1.8px);
  background-position:42px 8px;background-size:193px 193px;
  animation:ang-star-drift 28s linear infinite
}
@keyframes ang-star-drift{from{transform:translateY(0)}to{transform:translateY(193px)}}

.ang-hero{max-width:900px;margin:0 auto 42px;text-align:center}
.ang-kicker,.ang-section-kicker{
  display:inline-block;margin-bottom:18px;padding:8px 18px;border:1px solid rgba(130,255,19,.62);
  border-radius:999px;color:var(--ang-green);background:rgba(3,15,6,.72);
  box-shadow:0 0 18px rgba(104,255,20,.12),inset 0 0 14px rgba(104,255,20,.05);
  font-size:12px;font-weight:800;letter-spacing:1.7px
}
.ang-title{
  margin:0;color:#fff;font-size:clamp(46px,7vw,84px);line-height:.95;font-weight:900;
  letter-spacing:-2.5px;text-transform:uppercase;
  text-shadow:0 0 2px rgba(255,255,255,.85),0 0 18px rgba(104,255,20,.18)
}
.ang-subtitle{
  margin:17px 0 14px;color:var(--ang-green);font-size:clamp(21px,3vw,34px);line-height:1.05;
  font-weight:900;letter-spacing:.7px;text-shadow:0 0 17px rgba(98,255,14,.34)
}
.ang-intro{max-width:760px;margin:0 auto;color:#d7ded6;font-size:18px;line-height:1.68}

.ang-console{
  position:relative;max-width:950px;margin:0 auto;padding:0 36px 28px;overflow:hidden;
  border:1px solid rgba(130,255,19,.42);border-radius:22px;
  background:linear-gradient(180deg,rgba(7,24,12,.96),rgba(2,9,5,.98));
  box-shadow:0 0 28px rgba(82,255,0,.15),0 0 80px rgba(40,255,0,.06),inset 0 0 55px rgba(37,255,0,.025)
}
.ang-console:before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.20;
  background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:24px 24px
}
.ang-console-top{
  position:relative;z-index:2;display:flex;align-items:center;gap:10px;margin:0 -36px 34px;padding:13px 24px;
  border-bottom:1px solid rgba(130,255,19,.18);color:#bfd3bc;background:rgba(2,8,4,.76);
  font-size:11px;font-weight:800;letter-spacing:1.4px
}
.ang-console-dot{
  width:8px;height:8px;flex:0 0 auto;border-radius:50%;background:var(--ang-green);
  box-shadow:0 0 13px var(--ang-green);animation:ang-pulse 1.8s ease-in-out infinite
}
.ang-console-status{margin-left:auto;color:var(--ang-green)}
@keyframes ang-pulse{50%{opacity:.35;transform:scale(.85)}}

.ang-corner{position:absolute;z-index:3;width:26px;height:26px;pointer-events:none}
.ang-corner-tl{top:11px;left:11px;border-top:2px solid var(--ang-green);border-left:2px solid var(--ang-green)}
.ang-corner-tr{top:11px;right:11px;border-top:2px solid var(--ang-green);border-right:2px solid var(--ang-green)}
.ang-corner-bl{bottom:11px;left:11px;border-bottom:2px solid var(--ang-green);border-left:2px solid var(--ang-green)}
.ang-corner-br{right:11px;bottom:11px;border-right:2px solid var(--ang-green);border-bottom:2px solid var(--ang-green)}

.ang-scan-line{
  position:absolute;z-index:1;top:-20%;left:0;width:100%;height:68px;pointer-events:none;opacity:.23;
  background:linear-gradient(180deg,transparent,rgba(118,255,42,.04),rgba(118,255,42,.22),rgba(118,255,42,.04),transparent);
  animation:ang-scan 6.5s linear infinite
}
@keyframes ang-scan{0%{top:-20%}55%,100%{top:110%}}

.ang-form{position:relative;z-index:2;max-width:760px;margin:0 auto}
.ang-field{max-width:620px;margin:0 auto 32px}
.ang-label{display:block;margin:0 0 10px;color:#eef5ec;font-size:13px;font-weight:900;letter-spacing:1.35px;text-align:center}
.ang-input{
  display:block;width:100%;height:62px;padding:0 20px;outline:none;border:1px solid rgba(128,255,33,.36);
  border-radius:10px;color:#fff;background:rgba(0,0,0,.62);font-size:18px;text-align:center;
  transition:.2s ease
}
.ang-input::placeholder{color:#788176}
.ang-input:focus{
  border-color:var(--ang-green);background:rgba(0,8,2,.78);
  box-shadow:0 0 0 3px rgba(126,255,18,.08),0 0 24px rgba(72,255,0,.10)
}
.ang-species-fieldset{min-width:0;margin:0;padding:0;border:0}
.ang-species-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 27px}
.ang-species-button{
  appearance:none;min-height:76px;padding:13px 12px;cursor:pointer;border:1px solid rgba(126,255,23,.32);
  border-radius:11px;color:#ecf6e8;background:linear-gradient(180deg,rgba(12,29,16,.94),rgba(2,10,5,.96));
  box-shadow:inset 0 0 16px rgba(95,255,15,.025),0 5px 18px rgba(0,0,0,.24);
  font:inherit;font-size:12px;font-weight:900;letter-spacing:.75px;line-height:1.25;transition:.18s ease
}
.ang-species-button:hover,.ang-species-button:focus-visible{
  transform:translateY(-2px);outline:none;border-color:rgba(128,255,24,.78);
  box-shadow:0 0 22px rgba(96,255,10,.12),inset 0 0 20px rgba(96,255,10,.04)
}
.ang-species-button.is-selected{
  border-color:var(--ang-green);color:#071002;
  background:linear-gradient(135deg,#a2ff2f 0%,#69ee0d 48%,#3cc100 100%);
  box-shadow:0 0 10px rgba(126,255,20,.50),0 0 26px rgba(126,255,20,.22)
}
.ang-species-icon{display:block;margin-bottom:5px;font-size:17px;line-height:1}
.ang-form-message{min-height:22px;margin:-5px 0 10px;color:#ffdf78;font-size:13px;font-weight:700;text-align:center}

.ang-generate-button{
  appearance:none;display:block;width:min(560px,100%);margin:0 auto 12px;padding:16px 24px 14px;cursor:pointer;
  border:1px solid #b7ff6a;border-radius:10px;color:#071000;
  background:linear-gradient(135deg,#a0ff2c 0%,#79f318 48%,#49cb00 100%);
  box-shadow:0 0 12px rgba(119,255,18,.42),0 0 34px rgba(119,255,18,.18);
  font:inherit;text-align:center;transition:.18s ease
}
.ang-generate-button:hover,.ang-generate-button:focus-visible{transform:translateY(-2px);outline:none;filter:brightness(1.08)}
.ang-button-main{display:block;font-size:15px;font-weight:900;letter-spacing:.9px}
.ang-button-sub{display:block;margin-top:4px;font-size:9px;font-weight:900;letter-spacing:1.6px;opacity:.64}

.ang-result{
  position:relative;z-index:3;display:none;max-width:760px;margin:34px auto 10px;padding:38px 24px 32px;
  overflow:hidden;border:1px solid rgba(132,255,30,.52);border-radius:15px;text-align:center;
  background:radial-gradient(circle at 50% 40%,rgba(102,255,16,.13),transparent 44%),rgba(0,6,2,.82);
  box-shadow:0 0 25px rgba(100,255,10,.13),inset 0 0 38px rgba(75,255,0,.035)
}
.ang-result.is-visible{display:block;animation:ang-result-reveal .62s cubic-bezier(.16,.84,.31,1)}
@keyframes ang-result-reveal{
  from{opacity:0;transform:translateY(12px) scale(.985);filter:blur(4px)}
  to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
}
.ang-result-eyebrow{color:var(--ang-green);font-size:11px;font-weight:900;letter-spacing:2px}
.ang-result-line{width:115px;height:1px;margin:15px auto 23px;background:linear-gradient(90deg,transparent,var(--ang-green),transparent);box-shadow:0 0 8px var(--ang-green)}
.ang-result-name{
  overflow-wrap:anywhere;color:#fff;font-size:clamp(42px,7vw,78px);line-height:.98;font-weight:900;
  letter-spacing:-1.5px;text-transform:uppercase;
  text-shadow:0 0 2px #fff,0 0 14px rgba(125,255,28,.48),0 0 34px rgba(125,255,28,.18)
}
.ang-result-name.is-decrypting{color:#b7ff80;font-family:"Courier New",monospace;font-size:clamp(25px,5vw,46px);letter-spacing:4px}
.ang-reset-button{
  appearance:none;margin:28px auto 0;padding:10px 15px;cursor:pointer;border:1px solid rgba(132,255,30,.35);
  border-radius:999px;color:#b8d7b0;background:rgba(0,0,0,.40);font:inherit;font-size:10px;font-weight:900;letter-spacing:1px
}
.ang-terminal-footer{
  position:relative;z-index:2;display:flex;justify-content:space-between;gap:18px;margin-top:28px;
  color:rgba(186,208,181,.52);font-family:"Courier New",monospace;font-size:9px;letter-spacing:.7px
}

.ang-content,.ang-continue{max-width:950px;margin:70px auto 0;text-align:center}
.ang-section-title{
  max-width:850px;margin:0 auto 22px;color:#fff;font-size:clamp(31px,5vw,54px);line-height:1.02;
  font-weight:900;letter-spacing:-1.2px
}
.ang-content p{max-width:850px;margin:0 auto 18px;color:#d4ddd2;font-size:17px;line-height:1.75}
.ang-content strong{color:#fff}

.ang-link-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:30px}
.ang-link-card{
  position:relative;min-height:146px;padding:26px 25px 24px;overflow:hidden;border:1px solid rgba(129,255,25,.30);
  border-radius:14px;color:#fff!important;background:linear-gradient(180deg,rgba(7,20,10,.92),rgba(2,7,4,.96));
  text-align:left;text-decoration:none!important;transition:.18s ease
}
.ang-link-card:hover,.ang-link-card:focus-visible{
  transform:translateY(-3px);outline:none;border-color:rgba(129,255,25,.78);
  box-shadow:0 0 28px rgba(91,255,8,.10)
}
.ang-link-small{display:block;margin-bottom:11px;color:var(--ang-green);font-size:9px;font-weight:900;letter-spacing:1.5px}
.ang-link-title{display:block;max-width:90%;color:#fff;font-size:16px;font-weight:900;line-height:1.25}
.ang-link-arrow{position:absolute;right:21px;bottom:18px;color:var(--ang-green);font-size:24px}
.ang-disclaimer{
  max-width:950px;margin:54px auto 0;padding-top:25px;border-top:1px solid rgba(132,255,30,.16);
  color:#839080;font-size:11px;line-height:1.65;text-align:center
}
.ang-disclaimer strong{color:#a6ba9f;letter-spacing:.7px}

@media(max-width:760px){
  .ang-page{padding:52px 15px 42px}
  .ang-console{padding:0 18px 22px;border-radius:16px}
  .ang-console-top{margin-left:-18px;margin-right:-18px;padding-left:18px;padding-right:18px}
  .ang-species-grid{grid-template-columns:repeat(2,1fr)}
  .ang-link-grid{grid-template-columns:1fr}
  .ang-link-card{min-height:118px}
  .ang-terminal-footer{display:none}
}
@media(max-width:430px){
  .ang-title{font-size:42px;letter-spacing:-1.5px}
  .ang-subtitle{font-size:21px}
  .ang-intro{font-size:16px}
  .ang-species-grid{gap:9px}
  .ang-species-button{min-height:72px;padding:11px 8px;font-size:10px}
}
@media(prefers-reduced-motion:reduce){
  .ang-stars-two,.ang-scan-line,.ang-console-dot{animation:none!important}
}


/* ============================================================
   WORDPRESS / THEME COMPATIBILITY FIXES — v2
   Added after live-page testing
   ============================================================ */

/* 1) Stop the WordPress theme from adding boxes/backgrounds to our headings. */
.ang-page h1.ang-title,
.ang-page h2.ang-subtitle,
.ang-page h2.ang-section-title {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  text-indent: 0 !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

/* Keep the main desktop title on one clean line. */
.ang-page h1.ang-title {
  margin: 0 !important;
  font-size: clamp(46px, 5.5vw, 68px) !important;
  line-height: 1.02 !important;
  font-weight: 900 !important;
  letter-spacing: -2px !important;
  white-space: nowrap !important;
}

/* Restore the intended neon subtitle treatment. */
.ang-page h2.ang-subtitle {
  margin: 17px 0 14px !important;
  color: var(--ang-green) !important;
  font-size: clamp(21px, 3vw, 34px) !important;
  line-height: 1.08 !important;
  font-weight: 900 !important;
  letter-spacing: .7px !important;
  text-shadow: 0 0 17px rgba(98,255,14,.34) !important;
}

/* Restore lower section headings if the theme applies its own H2 styling. */
.ang-page h2.ang-section-title {
  margin: 0 auto 22px !important;
  color: #fff !important;
  font-size: clamp(31px, 5vw, 54px) !important;
  line-height: 1.02 !important;
  font-weight: 900 !important;
  letter-spacing: -1.2px !important;
}

/* 2) WordPress Classic Editor can insert BR line-break and paragraph elements between
      inline items. In CSS Grid those become extra grid cells.
      Hide the line breaks and flatten any paragraph wrappers. */
.ang-species-grid br,
.ang-link-grid br {
  display: none !important;
}

.ang-species-grid > p,
.ang-link-grid > p {
  display: contents !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Also remove any empty auto-paragraphs WordPress may create. */
.ang-species-grid p:empty,
.ang-link-grid p:empty {
  display: none !important;
}

/* Make sure the intended elements themselves are the grid items. */
.ang-page .ang-species-button,
.ang-page .ang-link-card {
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
  clear: none !important;
}

/* 3) Force our dark Earth-name input over theme form styles. */
.ang-page input.ang-input {
  display: block !important;
  width: 100% !important;
  height: 62px !important;
  margin: 0 !important;
  padding: 0 20px !important;
  border: 1px solid rgba(128,255,33,.45) !important;
  border-radius: 10px !important;
  outline: none !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  caret-color: var(--ang-green) !important;
  background: rgba(0,0,0,.76) !important;
  background-color: rgba(0,0,0,.76) !important;
  box-shadow:
    inset 0 0 18px rgba(54,255,0,.04),
    0 0 0 rgba(0,0,0,0) !important;
  font-size: 18px !important;
  text-align: center !important;
}

.ang-page input.ang-input::placeholder {
  color: #788176 !important;
  opacity: 1 !important;
}

.ang-page input.ang-input:focus {
  border-color: var(--ang-green) !important;
  background: rgba(0,8,2,.88) !important;
  background-color: rgba(0,8,2,.88) !important;
  box-shadow:
    0 0 0 3px rgba(126,255,18,.08),
    0 0 24px rgba(72,255,0,.12),
    inset 0 0 20px rgba(72,255,0,.04) !important;
}

/* 4) Force the selected species button to become fully illuminated.
      Some WordPress button rules were overriding the gradient. */
.ang-page button.ang-species-button.is-selected,
.ang-page button.ang-species-button[aria-pressed="true"] {
  border-color: #82ff13 !important;
  color: #071002 !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.20), transparent 35%),
    linear-gradient(135deg, #a2ff2f 0%, #69ee0d 48%, #3cc100 100%) !important;
  background-color: #69ee0d !important;
  box-shadow:
    0 0 10px rgba(126,255,20,.55),
    0 0 28px rgba(126,255,20,.25),
    inset 0 0 12px rgba(255,255,255,.16) !important;
  opacity: 1 !important;
}

.ang-page button.ang-species-button.is-selected span,
.ang-page button.ang-species-button[aria-pressed="true"] span {
  color: #071002 !important;
  opacity: 1 !important;
}

/* Prevent theme disabled/visited/button text rules from dimming species choices. */
.ang-page button.ang-species-button {
  opacity: 1 !important;
  text-decoration: none !important;
}

/* 5) Keep both desktop grids compact and predictable. */
.ang-page .ang-species-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: stretch !important;
}

.ang-page .ang-link-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 15px !important;
  align-items: stretch !important;
}

/* Mobile restores wrapping at spaces and two-column species layout. */
@media (max-width: 760px) {
  .ang-page h1.ang-title {
    white-space: normal !important;
    font-size: clamp(40px, 11vw, 54px) !important;
    line-height: .98 !important;
  }

  .ang-page .ang-species-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .ang-page .ang-link-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 430px) {
  .ang-page h1.ang-title {
    font-size: 40px !important;
  }
}


/* ============================================================
   LIVE WORDPRESS OVERRIDES — v3
   Cache-busting filename plus stronger selector specificity
   ============================================================ */

#alien-name-generator .ang-hero h1.ang-title {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: #ffffff !important;
  font-size: clamp(44px, 5.1vw, 66px) !important;
  line-height: 1.02 !important;
  font-weight: 900 !important;
  letter-spacing: -2px !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  white-space: nowrap !important;
}

#alien-name-generator .ang-hero h2.ang-subtitle {
  display: block !important;
  width: 100% !important;
  margin: 18px auto 14px !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: #82ff13 !important;
}

#alien-name-generator .ang-species-grid > br,
#alien-name-generator .ang-link-grid > br {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

#alien-name-generator .ang-species-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-flow: row !important;
  gap: 12px !important;
}

#alien-name-generator .ang-link-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-flow: row !important;
  gap: 15px !important;
}

#alien-name-generator input#ang-earth-name.ang-input {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: #020703 !important;
  background-color: #020703 !important;
  border: 1px solid rgba(130,255,19,.52) !important;
}

#alien-name-generator input#ang-earth-name.ang-input:focus {
  background: #020b04 !important;
  background-color: #020b04 !important;
  border-color: #82ff13 !important;
  box-shadow:
    0 0 0 3px rgba(130,255,19,.08),
    0 0 25px rgba(130,255,19,.14) !important;
}

#alien-name-generator button.ang-species-button.is-selected,
#alien-name-generator button.ang-species-button[aria-pressed="true"] {
  color: #071002 !important;
  border-color: #baff70 !important;
  background: linear-gradient(135deg,#a7ff32 0%,#78f116 50%,#43c900 100%) !important;
  background-color: #78f116 !important;
  box-shadow:
    0 0 12px rgba(130,255,19,.65),
    0 0 30px rgba(130,255,19,.27),
    inset 0 0 12px rgba(255,255,255,.18) !important;
}

@media (max-width: 760px) {
  #alien-name-generator .ang-hero h1.ang-title {
    white-space: normal !important;
    font-size: clamp(40px, 11vw, 54px) !important;
  }

  #alien-name-generator .ang-species-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #alien-name-generator .ang-link-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   POLISH PASS — v4
   Minor visual refinements only; no HTML or JS changes needed
   ============================================================ */

/* Slightly reduce the visual weight of the main action button. */
#alien-name-generator .ang-generate-button {
  width: min(500px, 100%) !important;
  min-height: 0 !important;
  padding: 13px 22px 12px !important;
  margin-top: 2px !important;
  margin-bottom: 10px !important;
}

#alien-name-generator .ang-button-main {
  font-size: 14px !important;
  line-height: 1.25 !important;
}

#alien-name-generator .ang-button-sub {
  margin-top: 3px !important;
  font-size: 8.5px !important;
}

/* Tighten the vertical spacing below the species choices. */
#alien-name-generator .ang-species-grid {
  margin-bottom: 20px !important;
}

#alien-name-generator .ang-form-message {
  min-height: 18px !important;
  margin: -2px 0 8px !important;
}

/* Give the revealed alien name a cleaner green-tech edge glow. */
#alien-name-generator .ang-result-name {
  text-shadow:
    0 0 1px rgba(255,255,255,.90),
    0 0 8px rgba(130,255,19,.55),
    0 0 20px rgba(130,255,19,.22) !important;
}

/* Slightly refine the result panel proportions. */
#alien-name-generator .ang-result {
  padding-top: 34px !important;
  padding-bottom: 28px !important;
}

/* Make lower cards feel a little tighter and more consistent. */
#alien-name-generator .ang-link-card {
  min-height: 132px !important;
  padding-top: 23px !important;
  padding-bottom: 21px !important;
}

/* Slightly reduce lower-section spacing without making it crowded. */
#alien-name-generator .ang-content,
#alien-name-generator .ang-continue {
  margin-top: 60px !important;
}

/* Keep mobile button comfortably tappable. */
@media (max-width: 760px) {
  #alien-name-generator .ang-generate-button {
    width: min(520px, 100%) !important;
    padding: 14px 18px 13px !important;
  }

  #alien-name-generator .ang-species-grid {
    margin-bottom: 18px !important;
  }
}