:root {
  --bg: #17131f;
  --bg-soft: #241c31;
  --panel: #2a2238;
  --panel-2: #332846;
  --text: #f7f3ff;
  --muted: #d5cceb;
  --accent: #b79cff;
  --accent-2: #8f6dff;
  --line: rgba(255,255,255,0.12);
  --success: #daf8e5;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #050507;
  background-image: linear-gradient(rgba(15, 10, 24, 0.72), rgba(15, 10, 24, 0.78)), url('assets/back.webp');
  background-position: center center;
  background-size: auto, 2.5in 3.5in;
  background-attachment: scroll, fixed;
  background-repeat: no-repeat, no-repeat;
  color: var(--text);
  line-height: 1.5;
}

.wrap {
  width: min(1100px, calc(100% - 32px));
  margin: 0 auto;
}

.narrow { width: min(820px, calc(100% - 32px)); }

.site-header {
  padding: 72px 0 48px;
  background:
    radial-gradient(circle at top right, rgba(183,156,255,0.20), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 360px);
  gap: 32px;
  align-items: start;
}

.hero-card {
  display: flex;
  justify-content: flex-end;
}

.hero-info-card {
  width: min(100%, 360px);
  height: auto;
  display: block;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 18px 42px rgba(0,0,0,0.35);
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  font-size: 0.85rem;
  margin-bottom: 12px;
}

h1, h2, h3, legend { margin-top: 0; }
h1 {
  font-size: clamp(2.2rem, 4.5vw, 4rem);
  line-height: 1.05;
  margin-bottom: 14px;
}

.lead {
  font-size: 1.1rem;
  max-width: 760px;
  color: var(--muted);
  margin-bottom: 28px;
}

.info-band, .form-section { padding: 28px 0 60px; }
.grid {
  display: grid;
  gap: 18px;
}
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.card,
.submission-form fieldset,
.disclaimer-box {
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.28);
}

.card {
  padding: 22px;
}

.section-heading { margin-bottom: 22px; }
.section-heading p { color: var(--muted); }

.submission-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

fieldset {
  padding: 22px;
  margin: 0;
}

legend {
  padding: 0 10px;
  font-weight: bold;
  color: var(--accent);
}

label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-weight: 600;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 12px;
  padding: 14px 14px;
  background: rgba(255,255,255,0.07);
  color: var(--text);
  font: inherit;
}

input::placeholder,
textarea::placeholder { color: #cfc4e9; }
textarea { resize: vertical; }
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid rgba(183,156,255,0.45);
  border-color: var(--accent);
}

.help {
  font-size: 0.9rem;
  color: var(--muted);
  font-weight: normal;
}

.checkbox-row {
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  font-weight: normal;
  margin-bottom: 14px;
}

.checkbox-row input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  flex: 0 0 auto;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 22px;
  border-radius: 14px;
  text-decoration: none;
  font-weight: bold;
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
}

.button:hover {
  transform: translateY(-1px);
  opacity: 0.96;
}

.button.primary {
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-2) 100%);
  color: #130d1f;
  box-shadow: 0 12px 28px rgba(143,109,255,0.28);
}

.button.full { width: 100%; }
.disclaimer-box { padding: 18px 20px; }
.disclaimer-box p { margin: 0; color: var(--muted); }
.site-footer {
  padding: 24px 0 40px;
  text-align: center;
  color: var(--muted);
}
.hidden,
.hidden-field {
  display: none !important;
}

.success-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 40px 0;
}

.center-card { width: min(640px, calc(100% - 32px)); }
.success-card {
  text-align: center;
  padding: 34px;
  background: linear-gradient(180deg, #2b2440 0%, #36295a 100%);
}

@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }

  .hero-card {
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .grid.three,
  .grid.two {
    grid-template-columns: 1fr;
  }

  .site-header {
    padding-top: 52px;
  }

  .hero-info-card {
    width: min(100%, 320px);
  }

  h1 { font-size: 2.4rem; }
}


select { color: #111; background: #fff; }
select option { color: #111; }


/* custom glyph dropdown */
.glyph-select {
  position: relative;
}

.glyph-select > select {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.glyph-select-trigger {
  width: 100%;
  min-height: 52px;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 12px;
  padding: 10px 14px;
  background: #fff;
  color: #111;
  font: inherit;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
}

.glyph-select-trigger:focus {
  outline: 2px solid rgba(183,156,255,0.45);
  border-color: var(--accent);
}

.glyph-select-value {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  text-align: left;
}

.glyph-select-value img,
.glyph-option img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex: 0 0 24px;
  image-rendering: auto;
}

.glyph-select-caret {
  flex: 0 0 auto;
  font-size: 0.95rem;
}

.glyph-select-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  background: #fff;
  color: #111;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 12px;
  box-shadow: 0 14px 32px rgba(0,0,0,0.22);
  overflow: hidden;
}

.glyph-option {
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  background: #fff;
  color: #111;
  font: inherit;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  text-align: left;
}

.glyph-option:last-child {
  border-bottom: 0;
}

.glyph-option:hover,
.glyph-option:focus {
  background: #f2ebff;
  outline: none;
}

.glyph-option.is-selected {
  background: #ece3ff;
}


.hidden-success-link {
  display: none !important;
}

.ghost {
  background: rgba(255,255,255,0.06);
  color: var(--text);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 10px 24px rgba(0,0,0,0.18);
}

.about-page-body {
  background-color: #050507;
  background-image: linear-gradient(rgba(13, 8, 20, 0.78), rgba(13, 8, 20, 0.88)), url('assets/back.webp');
  background-position: center center;
  background-size: auto, 2.5in 3.5in;
  background-repeat: no-repeat, no-repeat;
}

.about-hero {
  padding-bottom: 34px;
}

.about-hero-grid,
.split-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, 430px);
  gap: 32px;
  align-items: center;
}

.split-feature.reverse {
  grid-template-columns: minmax(300px, 430px) minmax(0, 1.08fr);
}

.feature-section {
  padding: 12px 0 56px;
}

.feature-section.alt {
  padding-top: 0;
}

.feature-copy p {
  color: var(--muted);
}

.tall-card {
  width: min(100%, 330px);
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.image-placeholder-stack {
  display: grid;
  gap: 18px;
}

.image-placeholder,
.callout-panel {
  background: linear-gradient(180deg, rgba(42,34,56,0.94) 0%, rgba(51,40,70,0.96) 100%);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.28);
}

.image-placeholder {
  min-height: 180px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: end;
  position: relative;
  overflow: hidden;
}

.image-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top right, rgba(183,156,255,0.22), transparent 28%),
    linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  pointer-events: none;
}

.image-placeholder > * {
  position: relative;
  z-index: 1;
}

.image-placeholder.large { min-height: 270px; }
.image-placeholder.small { min-height: 170px; }
.image-placeholder.portrait { min-height: 310px; }
.image-placeholder.landscape { min-height: 180px; }

.placeholder-label {
  display: inline-block;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(183,156,255,0.14);
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.centered {
  text-align: center;
}

.benefit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.benefit-card h3 {
  margin-top: 0;
  margin-bottom: 8px;
}

.benefit-card p {
  margin-bottom: 0;
  color: var(--muted);
}

.callout-panel {
  padding: 28px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
}

@media (max-width: 900px) {
  .about-hero-grid,
  .split-feature,
  .split-feature.reverse,
  .callout-panel {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .benefit-grid {
    grid-template-columns: 1fr;
  }

  .cta-row {
    flex-direction: column;
  }
}


.about-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 420px);
  gap: 34px;
  align-items: start;
}

.hero-card-stack {
  gap: 18px;
  align-items: stretch;
  flex-direction: column;
}

.secondary-shot {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.exposure-points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 26px;
}

.mini-point {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 14px 16px;
}

.mini-point strong {
  display: block;
  margin-bottom: 6px;
}

.mini-point span {
  color: var(--muted);
  font-size: 0.96rem;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.button.ghost {
  color: var(--text);
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
}

.grid.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.top-cards .card h2 {
  font-size: 1.2rem;
  margin-bottom: 10px;
}

.feature-section {
  padding: 12px 0 56px;
}

.split-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 440px);
  gap: 28px;
  align-items: center;
}

.split-feature.reverse {
  grid-template-columns: minmax(280px, 440px) minmax(0, 1.1fr);
}

.feature-copy p {
  color: var(--muted);
}

.showcase-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.showcase-card,
.feature-card-single,
.feature-photo {
  width: 100%;
  display: block;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 18px 42px rgba(0,0,0,0.35);
}

.real-photos {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.large-photo {
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.small-photo {
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.benefit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.benefit-card h3 {
  margin-bottom: 10px;
}

.benefit-card p {
  color: var(--muted);
}

.showcase-side-by-side {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.callout-panel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 22px;
  padding: 28px;
  background: linear-gradient(180deg, #2b2440 0%, #36295a 100%);
  border-radius: 22px;
  border: 1px solid var(--line);
  box-shadow: 0 16px 42px rgba(0,0,0,0.32);
}

.centered {
  text-align: center;
}

@media (max-width: 980px) {
  .about-hero-grid,
  .split-feature,
  .split-feature.reverse {
    grid-template-columns: 1fr;
  }

  .grid.four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .exposure-points,
  .showcase-grid,
  .benefit-grid,
  .showcase-side-by-side,
  .grid.four {
    grid-template-columns: 1fr;
  }

  .callout-panel {
    flex-direction: column;
    align-items: flex-start;
  }
}





/* ABOUT_TITLE_INLINE_BADGE_V1
   Small favicon badge placed on the same row as "What Is ATAC?" */
.about-title-with-badge {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 0.22em !important;
}

.about-title-favicon-badge {
  display: inline-block !important;
  width: 0.78em !important;
  height: 0.78em !important;
  flex: 0 0 0.78em !important;
  border-radius: 999px !important;
  border: 0.035em solid rgba(220, 211, 236, 0.78) !important;
  background:
    rgba(255,255,255,0.08)
    url('/favicon.ico?v=2.21')
    center center / 78% 78%
    no-repeat !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.10) inset,
    0 0 0.18em rgba(169, 139, 255, 0.30),
    0 0.08em 0.22em rgba(0,0,0,0.28) !important;
  pointer-events: none !important;
  transform: translateY(0.02em) !important;
}

@media (max-width: 640px) {
  .about-title-with-badge {
    gap: 0.16em !important;
  }

  .about-title-favicon-badge {
    width: 0.70em !important;
    height: 0.70em !important;
    flex-basis: 0.70em !important;
  }
}




/* If the section uses a generic image/card wrapper, keep only first 3 direct card images. */
.card-showcase > *:nth-child(n+4),
.sample-cards > *:nth-child(n+4),
.showcase-cards > *:nth-child(n+4) {
  display: none !important;
}



/* SHOWCASE_GRID_THREE_ONLY_V2
   What Is ATAC page: keep only the first row of three showcase cards. */
.showcase-grid > .showcase-card:nth-child(n+4) {
  display: none !important;
}



/* SUBMIT_PAGE_TEXT_LAYOUT_V1
   Submit Art page: shrink hero/card image, match button color, and keep layout clean. */
body.submit-art-page .hero-card,
body.submit-art-page .hero-card-stack,
body.submit-art-page .hero-visual,
body.submit-art-page .submission-card-preview,
body.submit-art-page .submit-card-preview,
body.submit-art-page .art-card-preview {
  transform: scale(0.66) !important;
  transform-origin: center center !important;
}

body.submit-art-page .hero-card img,
body.submit-art-page .hero-card-stack img,
body.submit-art-page .hero-visual img,
body.submit-art-page .submission-card-preview img,
body.submit-art-page .submit-card-preview img,
body.submit-art-page .art-card-preview img {
  max-width: 66% !important;
  width: 66% !important;
  height: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
}

body.submit-art-page a.button.primary[href="/"],
body.submit-art-page a.button.primary[href="/what-is-atac"],
body.submit-art-page a.button.primary[href="https://atactcg.com/"] {
  background: linear-gradient(135deg, #bba2ff, #8e63ff) !important;
  color: #110a1f !important;
}



/* WHAT_IS_ATAC_MOVED_HEADING_V1
   Main hero header is now ATAC TCG Online; What Is ATAC? moves down into the body area. */
.what-is-atac-moved-heading {
  margin: 0.45rem 0 0.55rem !important;
  font-size: clamp(1.35rem, 4vw, 2.15rem) !important;
  line-height: 1.05 !important;
  color: var(--text, #f7f2ff) !important;
  letter-spacing: 0.015em !important;
}

.about-title-with-badge {
  align-items: center !important;
}



/* ATAC_PUBLIC_NAV_AND_AUTH_V1
   Public ATAC nav bar and standalone login/create-profile pages. */
.atac-public-nav {
  padding: 18px 0 12px;
}

.atac-nav-panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  background: rgba(20, 12, 40, 0.94);
  border: 1px solid rgba(183, 156, 255, 0.32);
  border-radius: 18px;
  padding: 16px 18px;
  box-shadow: 0 18px 42px rgba(0,0,0,0.30);
}

.atac-nav-brand {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  color: var(--text);
  text-decoration: none;
  min-width: 0;
}

.atac-nav-badge {
  width: 74px;
  height: 74px;
  border-radius: 999px;
  border: 2px solid rgba(220, 211, 236, 0.72);
  background:
    rgba(255,255,255,0.08)
    url('/favicon.ico?v=2.29')
    center center / 78% 78%
    no-repeat;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.12) inset,
    0 0 22px rgba(169, 139, 255, 0.28);
}

.atac-nav-title {
  display: block;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(2rem, 4.4vw, 4.8rem);
  line-height: 0.95;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.atac-nav-subtitle {
  display: block;
  margin-top: 0.35rem;
  color: var(--muted);
  font-size: clamp(0.95rem, 1.8vw, 1.32rem);
}

.atac-nav-line {
  display: block;
  margin-top: 0.55rem;
  color: var(--muted);
  font-size: clamp(0.82rem, 1.4vw, 1.05rem);
  line-height: 1.25;
}

.atac-nav-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.48rem;
  justify-content: flex-end;
  align-items: center;
}

.atac-nav-actions .button {
  width: fit-content;
  min-width: 0;
  max-width: max-content;
  white-space: nowrap;
  padding: 0.48rem 0.72rem;
  line-height: 1;
}

.atac-nav-actions .button.active {
  outline: 2px solid rgba(255,255,255,0.72);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.16) inset,
    0 0 18px rgba(183,156,255,0.35);
}

.about-hero-after-nav {
  padding-top: 32px !important;
}

.about-main-heading {
  margin-bottom: 16px !important;
}

.public-auth-main {
  padding: 32px 0 70px;
}

.public-auth-wrap {
  width: min(860px, calc(100% - 32px));
}

.public-auth-card {
  min-height: 360px;
  padding: 28px;
}

.public-auth-card h1 {
  font-size: clamp(1.8rem, 4vw, 2.35rem);
  margin-bottom: 20px;
}

.public-auth-card label {
  margin-bottom: 16px;
}

.public-auth-card input[type="text"],
.public-auth-card input[type="email"],
.public-auth-card input[type="password"] {
  background: #f2f1f4;
  color: #130b22;
  border-radius: 12px;
}

.public-auth-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.6rem;
}

.public-auth-actions .button,
.public-auth-actions button {
  width: fit-content;
  min-width: 0;
  max-width: max-content;
}

.public-auth-message {
  min-height: 1.2rem;
  color: var(--accent);
  font-weight: 700;
}

.public-check {
  flex-direction: row;
  align-items: center;
  gap: 0.55rem;
}

.public-check input {
  width: auto;
}

@media (max-width: 900px) {
  .atac-nav-panel {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .atac-nav-brand {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .atac-nav-actions {
    justify-content: center;
  }

  .atac-nav-title {
    letter-spacing: 0.04em;
  }
}

@media (max-width: 520px) {
  .atac-nav-actions .button {
    font-size: 0.78rem;
    padding: 0.4rem 0.48rem;
  }

  .atac-nav-badge {
    width: 62px;
    height: 62px;
  }
}



/* ATAC_PUBLIC_NAV_REWORK_V2
   Compact public nav: main links under the Collect Art line; login/create in upper right. */
.atac-public-nav {
  padding: 10px 0 6px !important;
}

.atac-nav-panel {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: 12px !important;
  padding: 12px 14px !important;
}

.atac-nav-brand-area {
  min-width: 0 !important;
}

.atac-nav-brand {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
}

.atac-nav-badge {
  width: 58px !important;
  height: 58px !important;
}

.atac-nav-title {
  font-size: clamp(1.65rem, 3.9vw, 4.1rem) !important;
  line-height: 0.95 !important;
}

.atac-nav-subtitle {
  margin-top: 0.22rem !important;
  font-size: clamp(0.82rem, 1.35vw, 1.05rem) !important;
}

.atac-nav-line {
  margin-top: 0.35rem !important;
  font-size: clamp(0.72rem, 1.05vw, 0.9rem) !important;
}

.atac-nav-link-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.34rem !important;
  margin-top: 0.46rem !important;
  margin-left: 70px !important;
  align-items: center !important;
}

.atac-nav-link-row .button,
.atac-nav-auth-actions .button {
  width: fit-content !important;
  min-width: 0 !important;
  max-width: max-content !important;
  white-space: nowrap !important;
  padding: 0.32rem 0.52rem !important;
  font-size: 0.78rem !important;
  line-height: 1 !important;
  border-radius: 999px !important;
}

.atac-nav-auth-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.34rem !important;
  justify-content: flex-end !important;
  align-items: flex-start !important;
  align-self: start !important;
  justify-self: end !important;
}

.atac-nav-auth-actions .button.active,
.atac-nav-link-row .button.active {
  outline: 1px solid rgba(255,255,255,0.72) !important;
}

.success-page-clean .success-page {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.success-page-clean .center-card,
.success-page-clean .wrap.narrow.center-card {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.success-page-clean .success-card {
  margin-top: 0 !important;
}

.success-page-clean .atac-public-nav {
  padding-bottom: 0 !important;
}

body.submit-art-page header.site-header .cta-row {
  display: none !important;
}

@media (max-width: 900px) {
  .atac-nav-panel {
    grid-template-columns: 1fr !important;
    text-align: center !important;
  }

  .atac-nav-brand {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
  }

  .atac-nav-link-row {
    margin-left: 0 !important;
    justify-content: center !important;
  }

  .atac-nav-auth-actions {
    justify-self: center !important;
    justify-content: center !important;
  }
}

@media (max-width: 520px) {
  .atac-nav-link-row .button,
  .atac-nav-auth-actions .button {
    font-size: 0.68rem !important;
    padding: 0.28rem 0.38rem !important;
  }

  .atac-nav-badge {
    width: 50px !important;
    height: 50px !important;
  }
}



/* FULL_BUTTON_CLICK_TARGETS_V1
   Make the full visible button box clickable, not only the text label. */
a.button,
button.button,
.button,
.cta-link,
.atac-nav-actions a,
.atac-nav-link-row a,
.atac-nav-auth-actions a,
.hero-actions a,
.cta-row a,
.public-auth-actions a,
.public-auth-actions button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  text-decoration: none !important;
  position: relative !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: rgba(255,255,255,0.14) !important;
}

/* If a button contains spans/icons/text wrappers, the parent button/anchor receives the click. */
a.button *,
button.button *,
.button *,
.cta-link *,
.atac-nav-actions a *,
.atac-nav-link-row a *,
.atac-nav-auth-actions a *,
.hero-actions a *,
.cta-row a *,
.public-auth-actions a *,
.public-auth-actions button * {
  pointer-events: none !important;
}

/* Keep nav/auth buttons as compact boxes while preserving the full hit area. */
.atac-nav-link-row a,
.atac-nav-auth-actions a {
  min-height: 30px !important;
  padding-top: 0.38rem !important;
  padding-bottom: 0.38rem !important;
}

/* ATAC_PLAY_BUTTON_AND_MOBILE_AUTH_V3 */
/* Mobile/tablet touch layout: keep Login + Create Profile in the upper-right of the nav block. */
@media (max-width: 900px), (hover: none) and (pointer: coarse) and (max-width: 1200px), (hover: none) and (pointer: coarse) and (max-height: 620px) {
  .atac-nav-panel {
    position: relative !important;
    grid-template-columns: 1fr !important;
    text-align: left !important;
    align-items: start !important;
    padding: 12px 104px 12px 12px !important;
  }

  .atac-nav-brand-area {
    min-width: 0 !important;
    padding-right: 0 !important;
  }

  .atac-nav-brand {
    grid-template-columns: auto minmax(0, 1fr) !important;
    justify-items: start !important;
    text-align: left !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .atac-nav-badge {
    width: 50px !important;
    height: 50px !important;
  }

  .atac-nav-title {
    font-size: clamp(1.05rem, 5vw, 1.55rem) !important;
    letter-spacing: 0.04em !important;
  }

  .atac-nav-subtitle {
    font-size: clamp(0.66rem, 2.6vw, 0.82rem) !important;
  }

  .atac-nav-line {
    font-size: clamp(0.62rem, 2.35vw, 0.74rem) !important;
    max-width: 38rem !important;
  }

  .atac-nav-link-row {
    justify-content: flex-start !important;
    margin-left: 60px !important;
    padding-right: 0 !important;
  }

  .atac-nav-auth-actions {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    z-index: 20 !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 0.26rem !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    justify-self: end !important;
    align-self: start !important;
  }

  .atac-nav-auth-actions .button {
    min-height: 27px !important;
    padding: 0.26rem 0.42rem !important;
    font-size: 0.62rem !important;
    line-height: 1 !important;
    border-radius: 999px !important;
  }
}

@media (max-width: 520px) {
  .atac-nav-panel {
    padding-right: 94px !important;
  }

  .atac-nav-link-row {
    margin-left: 0 !important;
    margin-top: 0.5rem !important;
  }

  .atac-nav-link-row .button {
    font-size: 0.62rem !important;
    padding: 0.28rem 0.34rem !important;
  }

  .atac-nav-link-row a.button.primary[href="https://play.atactcg.com/login"] {
    padding-left: 0.42rem !important;
    padding-right: 0.42rem !important;
  }

  .atac-nav-auth-actions .button {
    font-size: 0.58rem !important;
    padding: 0.24rem 0.34rem !important;
  }
}

/* ATAC_POWERED_PUBLIC_BUTTONS_CORRECTED_V1
   Corrected to match the approved concept: black glass buttons with gold lettering,
   gold powered perimeter shimmer, subtle pulse, and a purple underglow on hover.
   The Play ATAC TCG Online button keeps the approved yellow-orange/green-glow style; Login/Create Profile use powered black buttons. */
@keyframes atacApprovedPowerPulse {
  0%, 100% { filter: brightness(0.98) saturate(1.04); }
  50% { filter: brightness(1.10) saturate(1.18); }
}

@keyframes atacApprovedPowerOrbit {
  0% { transform: rotate(0deg) scale(1.025); }
  100% { transform: rotate(360deg) scale(1.025); }
}

@keyframes atacApprovedPowerFlicker {
  0%, 100% { opacity: 0.62; filter: blur(0.2px) brightness(1.0); }
  12% { opacity: 0.92; filter: blur(0.08px) brightness(1.35); }
  24% { opacity: 0.46; filter: blur(0.32px) brightness(0.92); }
  41% { opacity: 0.88; filter: blur(0.10px) brightness(1.28); }
  63% { opacity: 0.52; filter: blur(0.28px) brightness(0.98); }
  78% { opacity: 1.0; filter: blur(0.06px) brightness(1.45); }
}

.button:not(.atac-play-online-button),
button.button,
.public-auth-actions button {
  position: relative !important;
  isolation: isolate !important;
  overflow: visible !important;
  background:
    linear-gradient(155deg, rgba(255,255,255,0.24) 0%, rgba(255,255,255,0.12) 19%, rgba(255,255,255,0.03) 34%, rgba(0,0,0,0) 50%),
    linear-gradient(180deg, #17171b 0%, #09090c 42%, #020204 100%) !important;
  color: #f3c75b !important;
  border: 1px solid rgba(255, 215, 79, 0.94) !important;
  border-radius: 18px !important;
  box-shadow:
    0 0 0 1px rgba(255, 236, 151, 0.18),
    0 0 7px rgba(255, 204, 61, 0.68),
    0 0 18px rgba(255, 196, 38, 0.24),
    0 11px 22px rgba(0, 0, 0, 0.56),
    0 17px 28px rgba(123, 44, 255, 0.18),
    inset 0 2px 0 rgba(255, 255, 255, 0.30),
    inset 0 -4px 0 rgba(0, 0, 0, 0.86),
    inset 0 0 18px rgba(255, 255, 255, 0.035) !important;
  font-weight: 900 !important;
  letter-spacing: 0.045em !important;
  text-shadow:
    0 -1px 0 rgba(255, 249, 190, 0.82),
    0 0 8px rgba(255, 205, 67, 0.52),
    0 2px 0 rgba(77, 47, 0, 0.88),
    1px 3px 3px rgba(0, 0, 0, 0.96) !important;
  animation: atacApprovedPowerPulse 3.2s ease-in-out infinite !important;
}

.button:not(.atac-play-online-button)::before,
button.button::before,
.public-auth-actions button::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -4px;
  border-radius: inherit;
  padding: 4px;
  pointer-events: none;
  background:
    conic-gradient(from 0deg,
      rgba(255, 216, 72, 0.00) 0deg,
      rgba(255, 216, 72, 0.00) 18deg,
      rgba(255, 249, 193, 1.00) 30deg,
      rgba(255, 187, 19, 1.00) 42deg,
      rgba(255, 216, 72, 0.00) 61deg,
      rgba(255, 216, 72, 0.00) 126deg,
      rgba(183, 90, 255, 0.72) 147deg,
      rgba(255, 242, 160, 0.92) 160deg,
      rgba(183, 90, 255, 0.00) 180deg,
      rgba(255, 216, 72, 0.00) 236deg,
      rgba(255, 248, 184, 0.92) 252deg,
      rgba(255, 192, 28, 1.00) 266deg,
      rgba(255, 216, 72, 0.00) 287deg,
      rgba(255, 216, 72, 0.00) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation:
    atacApprovedPowerOrbit 2.0s linear infinite,
    atacApprovedPowerFlicker 1.2s ease-in-out infinite !important;
}

.button:not(.atac-play-online-button)::after,
button.button::after,
.public-auth-actions button::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 7%;
  right: 7%;
  bottom: -7px;
  height: 9px;
  border-radius: 999px;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(174, 58, 255, 0.58) 0%, rgba(126, 35, 255, 0.30) 45%, rgba(126, 35, 255, 0.00) 78%);
  filter: blur(3px);
  opacity: 0.36;
  transition: opacity 0.18s ease, filter 0.18s ease, transform 0.18s ease;
}

.button:not(.atac-play-online-button):hover,
button.button:hover,
.public-auth-actions button:hover,
.button:not(.atac-play-online-button):focus-visible,
button.button:focus-visible,
.public-auth-actions button:focus-visible {
  opacity: 1 !important;
  transform: translateY(-1px) !important;
  box-shadow:
    0 0 0 1px rgba(255, 246, 188, 0.30),
    0 0 10px rgba(255, 211, 71, 0.86),
    0 0 26px rgba(255, 199, 37, 0.34),
    0 12px 25px rgba(0, 0, 0, 0.58),
    0 19px 40px rgba(155, 60, 255, 0.42),
    0 0 34px rgba(151, 60, 255, 0.48),
    inset 0 2px 0 rgba(255, 255, 255, 0.38),
    inset 0 -4px 0 rgba(0, 0, 0, 0.90),
    inset 0 0 22px rgba(255, 255, 255, 0.055) !important;
}

.button:not(.atac-play-online-button):hover::before,
button.button:hover::before,
.public-auth-actions button:hover::before,
.button:not(.atac-play-online-button):focus-visible::before,
button.button:focus-visible::before,
.public-auth-actions button:focus-visible::before {
  animation:
    atacApprovedPowerOrbit 1.05s linear infinite,
    atacApprovedPowerFlicker 0.68s ease-in-out infinite !important;
}

.button:not(.atac-play-online-button):hover::after,
button.button:hover::after,
.public-auth-actions button:hover::after,
.button:not(.atac-play-online-button):focus-visible::after,
button.button:focus-visible::after,
.public-auth-actions button:focus-visible::after {
  opacity: 0.92;
  filter: blur(4px);
  transform: scaleX(1.08);
}

.button:not(.atac-play-online-button):active,
button.button:active,
.public-auth-actions button:active {
  transform: translateY(1px) !important;
}

@media (max-width: 900px), (hover: none) and (pointer: coarse) and (max-width: 1200px), (hover: none) and (pointer: coarse) and (max-height: 620px) {
  .atac-nav-auth-actions .button {
    font-size: 0.66rem !important;
  }
}

@media (max-width: 520px) {
  .atac-nav-link-row .button {
    font-size: 0.66rem !important;
  }

  .atac-nav-auth-actions .button {
    font-size: 0.62rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .button::before,
  button.button::before,
  .public-auth-actions button::before,
  .button::after,
  button.button::after,
  .public-auth-actions button::after,
  .button,
  button.button,
  .public-auth-actions button {
    animation: none !important;
  }
}
/* /ATAC_POWERED_PUBLIC_BUTTONS_CORRECTED_V1 */



/* ATAC_POWERED_PUBLIC_BUTTONS_NO_ROTATING_SHIMMER_V2
   Removes the rotating conic shimmer layer from public-site powered buttons.
   Keeps the black glass body, gold text, pulse, and purple underglow. */
.button:not(.atac-play-online-button)::before,
button.button::before,
.public-auth-actions button::before,
.button:not(.atac-play-online-button):hover::before,
button.button:hover::before,
.public-auth-actions button:hover::before,
.button:not(.atac-play-online-button):focus-visible::before,
button.button:focus-visible::before,
.public-auth-actions button:focus-visible::before {
  content: none !important;
  display: none !important;
  animation: none !important;
  background: none !important;
}
/* /ATAC_POWERED_PUBLIC_BUTTONS_NO_ROTATING_SHIMMER_V2 */

/* Only the Play ATAC TCG Online nav button gets the new game-callout colors. */
.atac-nav-link-row a.button.primary[href="https://play.atactcg.com/login"] {
  background:
    linear-gradient(180deg, #fff0a6 0%, #ffd35f 18%, #ffae25 58%, #e78600 100%) !important;
  color: #24103d !important;
  border: 1px solid rgba(255, 245, 178, 0.88) !important;
  box-shadow:
    0 0 0 2px rgba(49, 255, 119, 0.48),
    0 0 15px rgba(49, 255, 119, 0.48),
    0 12px 28px rgba(143,109,255,0.28),
    inset 0 2px 0 rgba(255,255,255,0.56),
    inset 0 -3px 0 rgba(93, 47, 0, 0.42) !important;
  font-size: 1.06em !important;
  text-shadow: none !important;
}

.atac-nav-link-row a.button.primary[href="https://play.atactcg.com/login"]:hover,
.atac-nav-link-row a.button.primary[href="https://play.atactcg.com/login"]:focus-visible {
  opacity: 1 !important;
  transform: translateY(-1px) !important;
  box-shadow:
    0 0 0 2px rgba(67, 255, 137, 0.58),
    0 0 20px rgba(67, 255, 137, 0.58),
    0 14px 30px rgba(143,109,255,0.34),
    inset 0 2px 0 rgba(255,255,255,0.62),
    inset 0 -3px 0 rgba(93, 47, 0, 0.46) !important;
}

.atac-nav-link-row a.button.primary[href="https://play.atactcg.com/login"]:active {
  transform: translateY(1px) !important;
  box-shadow:
    0 0 0 2px rgba(49, 255, 119, 0.42),
    0 0 10px rgba(49, 255, 119, 0.42),
    0 8px 18px rgba(143,109,255,0.24),
    inset 0 1px 0 rgba(255,255,255,0.42),
    inset 0 -2px 0 rgba(93, 47, 0, 0.48) !important;
}
/* /ATAC_PLAY_BUTTON_AND_MOBILE_AUTH_V3 */

/* ATAC_STATIC_MOBILE_DESKTOP_ZOOM_RESTORE_V397
   Public site: normal mobile now uses the same desktop-class viewport that Chrome
   Desktop site used, with no transform shell and no JS resize loop. */
html.atac-desktop-viewport,
html.atac-desktop-viewport body {
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}
html.atac-desktop-viewport body {
  min-width: 1000px !important;
  overflow-x: auto !important;
  font-size: 15px !important;
}
html.atac-desktop-viewport .site-shell,
html.atac-desktop-viewport .site-header,
html.atac-desktop-viewport main,
html.atac-desktop-viewport .page-shell,
html.atac-desktop-viewport .content-shell,
html.atac-desktop-viewport .atac-public-shell,
html.atac-desktop-viewport .atac-nav-shell,
html.atac-desktop-viewport .atac-site-shell {
  width: 1000px !important;
  max-width: 1000px !important;
  min-width: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  transform: none !important;
}
html.atac-desktop-viewport .site-header,
html.atac-desktop-viewport .top-nav,
html.atac-desktop-viewport .nav-links,
html.atac-desktop-viewport .hero-actions,
html.atac-desktop-viewport .button-row,
html.atac-desktop-viewport .public-actions,
html.atac-desktop-viewport .form-actions,
html.atac-desktop-viewport .cta-row,
html.atac-desktop-viewport .atac-nav-buttons,
html.atac-desktop-viewport .atac-nav-actions {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 0.55rem !important;
}
html.atac-desktop-viewport .atac-nav-title {
  font-size: clamp(2.1rem, 4.2vw, 4rem) !important;
  line-height: 0.95 !important;
}
html.atac-desktop-viewport .atac-nav-subtitle,
html.atac-desktop-viewport .atac-nav-line {
  font-size: 0.95rem !important;
  line-height: 1.25 !important;
}
html.atac-desktop-viewport a,
html.atac-desktop-viewport button,
html.atac-desktop-viewport .button,
html.atac-desktop-viewport .btn,
html.atac-desktop-viewport .nav-button,
html.atac-desktop-viewport .play-button,
html.atac-desktop-viewport .submit-button,
html.atac-desktop-viewport .learn-button,
html.atac-desktop-viewport .cta-link,
html.atac-desktop-viewport .atac-button,
html.atac-desktop-viewport .atac-nav-button {
  white-space: nowrap !important;
  font-size: 0.92rem !important;
  line-height: 1.1 !important;
}
html.atac-desktop-viewport .play-button,
html.atac-desktop-viewport .atac-play-button {
  font-size: 1.18rem !important;
}
html.atac-desktop-viewport .benefit-grid,
html.atac-desktop-viewport .feature-grid,
html.atac-desktop-viewport .card-grid,
html.atac-desktop-viewport .public-auth-grid,
html.atac-desktop-viewport .submit-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
/* /ATAC_STATIC_MOBILE_DESKTOP_ZOOM_RESTORE_V397 */


/* ATAC_GLOBAL_MOBILE_DEFAULT_ZOOM_OUT_V397: mobile opens zoomed out via early viewport meta setup; CSS ratio sizing preserved. */