/* Shared Dream Snake Adventure public-page visual theme. */
:root {
  --dsa-bg-light: #f4f6f8;
  --dsa-bg-dark: #101728;
  --dsa-text-light: #05070d;
  --dsa-text-dark: #eaf6ff;
  --dsa-cyan: #8fffd4;
  --dsa-cyan-strong: #35f7be;
  --dsa-cyan-light-text: #005c49;
  --dsa-cyan-light-text-strong: #003f35;
  --dsa-gold: #ffcf3a;
  --dsa-panel-dark: rgba(13, 20, 34, .86);
  --dsa-panel-light: rgba(255, 255, 255, .82);
}

html.dsaUnified,
html.dsaUnified body,
body.dsaUnified {
  background-color: var(--dsa-bg-light);
  background-image: url('../images/light-grey-tech-circuit-seamless-tile-1024.png');
  background-repeat: repeat;
  background-size: 512px 512px;
  color: var(--dsa-text-light);
}

html.darkMode.dsaUnified,
html.darkMode.dsaUnified body,
html.dsaUnified.darkMode,
html.dsaUnified.darkMode body,
html.darkMode body.dsaUnified,
body.dsaUnified.darkMode {
  background-color: var(--dsa-bg-dark);
  background-image: url('../images/dark-blue-tech-circuit-seamless-tile-1024.png');
  color: var(--dsa-text-dark);
}

body.dsaUnified::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 0%, rgba(53,247,190,.16), transparent 34%),
    radial-gradient(circle at 18% 92%, rgba(138,63,252,.12), transparent 30%),
    radial-gradient(circle at 86% 84%, rgba(255,122,26,.10), transparent 28%);
  z-index: -1;
}

body.dsaUnified h1,
body.dsaUnified h2 {
  letter-spacing: .075em;
  text-transform: uppercase;
  text-shadow: 0 3px 12px rgba(0,0,0,.18), 0 0 18px rgba(53,247,190,.14);
}

html.darkMode body.dsaUnified h1,
html.darkMode body.dsaUnified h2,
body.dsaUnified.darkMode h1,
body.dsaUnified.darkMode h2 {
  text-shadow: 0 0 18px rgba(143,255,212,.25), 0 3px 12px rgba(0,0,0,.42);
}

body.dsaUnified main,
body.dsaUnified .card,
body.dsaUnified table,
body.dsaUnified textarea,
body.dsaUnified .wrapCard,
body.dsaUnified .prop {
  backdrop-filter: blur(2px);
}

body.dsaUnified .card,
body.dsaUnified table {
  border: 1px solid rgba(143,255,212,.24);
  box-shadow: 0 12px 32px rgba(0,0,0,.13);
}

body.dsaUnified .back,
body.dsaUnified .backButton,
body.dsaUnified .submit,
body.dsaUnified .buttons button,
body.dsaUnified .footerActions button,
body.dsaUnified .top > a.back {
  --btn-top: #58636f;
  --btn-main: #343844;
  --btn-dark: #151a27;
  --btn-outline: rgba(234,246,255,.78);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 46px;
  padding: 0 24px;
  border: 2px solid var(--btn-outline);
  border-radius: 18px;
  background: linear-gradient(to bottom,
    var(--btn-top) 0%,
    var(--btn-top) 22%,
    var(--btn-main) 23%,
    var(--btn-main) 74%,
    var(--btn-dark) 75%,
    var(--btn-dark) 100%);
  color: #fff;
  text-decoration: none;
  font: inherit;
  font-weight: 1000;
  letter-spacing: .075em;
  text-shadow: 0 2px 5px rgba(0,0,0,.36);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 5px 0 rgba(0,0,0,.38), 0 10px 18px rgba(0,0,0,.18);
  cursor: pointer;
}

body.dsaUnified .back:focus-visible,
body.dsaUnified .backButton:focus-visible,
body.dsaUnified .submit:focus-visible,
body.dsaUnified .buttons button:focus-visible,
body.dsaUnified .footerActions button:focus-visible,
body.dsaUnified .tab:focus-visible,
body.dsaUnified .sortButton:focus-visible {
  outline: 4px solid var(--dsa-cyan-strong);
  outline-offset: 5px;
}

body.dsaUnified .submit:disabled,
body.dsaUnified button:disabled {
  cursor: not-allowed;
  opacity: .55;
  filter: saturate(.72);
}

body.dsaUnified #promoButton,
body.dsaUnified .promoButton {
  --btn-top: #ffb05c;
  --btn-main: #ff7a1a;
  --btn-dark: #c93d08;
  --btn-outline: #ffd0b8;
  color: #fff !important;
  text-shadow: 0 2px 5px rgba(0,0,0,.42);
}
body.dsaUnified #newsButton,
body.dsaUnified .highscoreButton {
  --btn-top: #44d676;
  --btn-main: #16a34a;
  --btn-dark: #087530;
  --btn-outline: #baf7ce;
}
body.dsaUnified #blogButton,
body.dsaUnified .feedbackButton {
  --btn-top: #b66cff;
  --btn-main: #8a3ffc;
  --btn-dark: #5b22b8;
  --btn-outline: #ead7ff;
}
body.dsaUnified .submit,
body.dsaUnified .footerActions button {
  --btn-top: #4b8ff1;
  --btn-main: #2567d0;
  --btn-dark: #0d3e9f;
  --btn-outline: #dceaff;
}

body.dsaUnified .tab,
body.dsaUnified .sortButton {
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 4px 0 rgba(0,0,0,.30), 0 9px 16px rgba(0,0,0,.14);
}

body.dsaUnified .tab.active,
body.dsaUnified .sortButton.active {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 0 0 3px rgba(53,247,190,.20), 0 8px 18px rgba(0,0,0,.18);
}

body.dsaUnified .betaNotice,
body.dsaUnified .storeDivider,
body.dsaUnified .pill {
  box-shadow: 0 0 0 1px rgba(255,207,58,.12), 0 10px 26px rgba(0,0,0,.12);
}

/* Extended unification pass: creator, battle, controller, and press pages. */
body.dsaUnified.dsaCreatePage,
body.dsaUnified.dsaBattlePage,
body.dsaUnified.dsaControllerPage {
  background-color: #101728;
  background-image: url('../images/dark-blue-tech-circuit-seamless-tile-1024.png');
  color: var(--dsa-text-dark);
}

html.darkMode body.dsaUnified.dsaPressPage,
body.dsaUnified.dsaPressPage.darkMode {
  background-color: #101728;
  background-image: url('../images/dark-blue-tech-circuit-seamless-tile-1024.png');
  color: var(--dsa-text-dark);
}

body.dsaUnified.dsaCreatePage header {
  background-color: rgba(16,23,40,.94);
  background-image: url('../images/dark-blue-tech-circuit-seamless-tile-1024.png');
  border-color: rgba(143,255,212,.26);
}
html:not(.darkMode) body.dsaUnified.dsaFeedbackList header,
html:not(.darkMode) body.dsaUnified.dsaFeedbackList footer {
  background-color: rgba(255,255,255,.94);
  background-image: url('../images/light-grey-tech-circuit-seamless-tile-1024.png');
  border-color: rgba(5,7,13,.26);
  color: #05070d;
}
html.darkMode body.dsaUnified.dsaFeedbackList header,
html.darkMode body.dsaUnified.dsaFeedbackList footer {
  background-color: rgba(16,23,40,.94);
  background-image: url('../images/dark-blue-tech-circuit-seamless-tile-1024.png');
  border-color: rgba(143,255,212,.26);
  color: #eaf6ff;
}

body.dsaUnified.dsaCreatePage .panel,
body.dsaUnified.dsaCreatePage .enemy,
body.dsaUnified.dsaCreatePage .confirmBox,
body.dsaUnified.dsaBattlePage .card,
body.dsaUnified.dsaBattlePage .arena,
body.dsaUnified.dsaBattlePage .slot,
body.dsaUnified.dsaBattlePage .history,
body.dsaUnified.dsaBattlePage .remoteBox {
  background: rgba(13,20,34,.86);
  border-color: rgba(143,255,212,.26);
  box-shadow: 0 14px 38px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.04);
}

html:not(.darkMode) body.dsaUnified.dsaPressPage header,
html:not(.darkMode) body.dsaUnified.dsaPressPage section,
html:not(.darkMode) body.dsaUnified.dsaPressPage .asset {
  background: rgba(255,255,255,.88);
  border-color: rgba(7,17,13,.18);
  color: #05070d;
  box-shadow: 0 14px 34px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.78);
}
html.darkMode body.dsaUnified.dsaPressPage header,
html.darkMode body.dsaUnified.dsaPressPage section,
html.darkMode body.dsaUnified.dsaPressPage .asset {
  background: rgba(13,20,34,.86);
  border-color: rgba(143,255,212,.26);
  color: #eaf6ff;
  box-shadow: 0 14px 38px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.04);
}

body.dsaUnified.dsaCreatePage input,
body.dsaUnified.dsaCreatePage textarea,
body.dsaUnified.dsaCreatePage select,
body.dsaUnified.dsaBattlePage input,
body.dsaUnified.dsaBattlePage select {
  background: rgba(8,13,24,.90);
  border-color: rgba(143,255,212,.35);
  color: #eaf6ff;
}

body.dsaUnified.dsaCreatePage .back,
body.dsaUnified.dsaCreatePage .btn,
body.dsaUnified.dsaBattlePage button,
body.dsaUnified.dsaPressPage .btn,
body.dsaUnified.dsaControllerPage .smallbtn {
  --btn-top: #58636f;
  --btn-main: #343844;
  --btn-dark: #151a27;
  --btn-outline: rgba(234,246,255,.78);
  border: 2px solid var(--btn-outline);
  border-radius: 18px;
  background: linear-gradient(to bottom,
    var(--btn-top) 0%,
    var(--btn-top) 22%,
    var(--btn-main) 23%,
    var(--btn-main) 74%,
    var(--btn-dark) 75%,
    var(--btn-dark) 100%);
  color: #fff;
  text-decoration: none;
  font-weight: 1000;
  letter-spacing: .075em;
  text-shadow: 0 2px 5px rgba(0,0,0,.36);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 5px 0 rgba(0,0,0,.38), 0 10px 18px rgba(0,0,0,.18);
}

body.dsaUnified.dsaCreatePage .btn.primary,
body.dsaUnified.dsaBattlePage button.primary,
body.dsaUnified.dsaBattlePage .primary,
body.dsaUnified.dsaPressPage .btn:not(.secondary) {
  --btn-top: #4b8ff1;
  --btn-main: #2567d0;
  --btn-dark: #0d3e9f;
  --btn-outline: #dceaff;
  color: #fff !important;
}

body.dsaUnified.dsaCreatePage .btn.bad,
body.dsaUnified.dsaBattlePage button.bad,
body.dsaUnified.dsaControllerPage #closeBtn {
  --btn-top: #ff6f86;
  --btn-main: #d91f4f;
  --btn-dark: #8f1430;
  --btn-outline: #ffd0dc;
  color: #fff;
}

body.dsaUnified.dsaBattlePage .shopBtn,
body.dsaUnified.dsaBattlePage #reroll,
body.dsaUnified.dsaPressPage .btn.secondary {
  --btn-top: #ffb05c;
  --btn-main: #ff7a1a;
  --btn-dark: #c93d08;
  --btn-outline: #ffd0b8;
  color: #fff !important;
}
body.dsaUnified.dsaPressPage .btn.pressBackButton {
  --btn-top: #1f2430;
  --btn-main: #05070d;
  --btn-dark: #000;
  --btn-outline: rgba(234,246,255,.82);
  color: #fff !important;
}

html:not(.darkMode) body.dsaUnified.dsaPressPage h1,
html:not(.darkMode) body.dsaUnified.dsaPressPage h2,
html:not(.darkMode) body.dsaUnified.dsaPressPage a:not(.btn),
html:not(.darkMode) body.dsaUnified.dsaPressPage .note,
html:not(.darkMode) body.dsaUnified.dsaPressPage .asset {
  color: var(--dsa-cyan-light-text-strong);
}
html:not(.darkMode) body.dsaUnified.dsaPressPage p,
html:not(.darkMode) body.dsaUnified.dsaPressPage ul {
  color: rgba(5,7,13,.74);
}
html.darkMode body.dsaUnified.dsaPressPage h1,
html.darkMode body.dsaUnified.dsaPressPage h2,
html.darkMode body.dsaUnified.dsaPressPage a:not(.btn) {
  color: var(--dsa-cyan);
}

body.dsaUnified.dsaCreatePage .btn:focus-visible,
body.dsaUnified.dsaBattlePage button:focus-visible,
body.dsaUnified.dsaPressPage .btn:focus-visible,
body.dsaUnified.dsaControllerPage .smallbtn:focus-visible {
  outline: 4px solid var(--dsa-cyan-strong);
  outline-offset: 5px;
}

body.dsaUnified.dsaBattlePage .sw {
  box-shadow: 0 0 0 1px rgba(255,255,255,.34), 0 6px 14px rgba(0,0,0,.25);
}

body.dsaUnified.dsaBattlePage .sw.sel,
body.dsaUnified.dsaCreatePage .colorSwatch.selected {
  outline-color: var(--dsa-gold);
}

body.dsaUnified.dsaControllerPage .hud,
body.dsaUnified.dsaControllerPage .controls {
  background: rgba(13,20,34,.88);
  border-color: rgba(143,255,212,.42);
  box-shadow: 0 14px 38px rgba(0,0,0,.28), 0 0 24px rgba(53,247,190,.13);
}

@media (max-width: 560px) {
  body.dsaUnified.dsaBattlePage .actions button,
  body.dsaUnified.dsaCreatePage .actions .btn {
    min-height: 54px;
  }
  body.dsaUnified.dsaCreatePage h1,
  body.dsaUnified.dsaBattlePage h1 {
    font-size: clamp(20px, 7vw, 34px);
  }
}

/* Dark-mode completion for non-gameplay/informational pages. */
html:not(.darkMode) body.dsaUnified:not(.dsaCreatePage):not(.dsaBattlePage):not(.dsaControllerPage):not(.dsaPressPage) .card,
html:not(.darkMode) body.dsaUnified:not(.dsaCreatePage):not(.dsaBattlePage):not(.dsaControllerPage):not(.dsaPressPage) table,
html:not(.darkMode) body.dsaUnified:not(.dsaCreatePage):not(.dsaBattlePage):not(.dsaControllerPage):not(.dsaPressPage) .wrapCard,
html:not(.darkMode) body.dsaUnified:not(.dsaCreatePage):not(.dsaBattlePage):not(.dsaControllerPage):not(.dsaPressPage) .prop,
html:not(.darkMode) body.dsaUnified:not(.dsaCreatePage):not(.dsaBattlePage):not(.dsaControllerPage):not(.dsaPressPage) .entry,
html:not(.darkMode) body.dsaUnified:not(.dsaCreatePage):not(.dsaBattlePage):not(.dsaControllerPage):not(.dsaPressPage) textarea {
  background: rgba(255,255,255,.86);
  color: #05070d;
  border-color: rgba(7,17,13,.18);
}

html.darkMode body.dsaUnified .card,
html.darkMode body.dsaUnified table,
html.darkMode body.dsaUnified .wrapCard,
html.darkMode body.dsaUnified .prop,
html.darkMode body.dsaUnified .entry,
html.darkMode body.dsaUnified textarea {
  background: rgba(13,20,34,.88);
  color: #eaf6ff;
  border-color: rgba(143,255,212,.26);
}

html:not(.darkMode) body.dsaUnified .muted,
html:not(.darkMode) body.dsaUnified p,
html:not(.darkMode) body.dsaUnified .hint,
html:not(.darkMode) body.dsaUnified .wrapMeta,
html:not(.darkMode) body.dsaUnified .meta {
  color: rgba(5,7,13,.68);
}

html.darkMode body.dsaUnified .muted,
html.darkMode body.dsaUnified p,
html.darkMode body.dsaUnified .hint,
html.darkMode body.dsaUnified .wrapMeta,
html.darkMode body.dsaUnified .meta {
  color: rgba(234,246,255,.72);
}

html.darkMode body.dsaUnified th {
  background: rgba(16,43,33,.92);
  color: #8fffd4;
}
html:not(.darkMode) body.dsaUnified th {
  background: rgba(143,255,212,.22);
  color: #07110d;
}

/* Light-mode contrast: keep the turquoise neon for dark mode, but use a darker
   teal on white public pages where cyan text was too low-contrast. */
html:not(.darkMode) body.dsaUnified.dsaStorePage .wrapName,
html:not(.darkMode) body.dsaUnified.dsaStorePage .priceLine,
html:not(.darkMode) body.dsaUnified.dsaStorePage .progressLine,
html:not(.darkMode) body.dsaUnified.dsaStatsPage .value,
html:not(.darkMode) body.dsaUnified.dsaStatsPage .levelCard h3,
html:not(.darkMode) body.dsaUnified.dsaLinksPage h1,
html:not(.darkMode) body.dsaUnified.dsaLinksPage h2,
html:not(.darkMode) body.dsaUnified.dsaLinksPage .url,
html:not(.darkMode) body.dsaUnified.dsaLinksPage a:not(.back):not(.visit) {
  color: var(--dsa-cyan-light-text);
}
html:not(.darkMode) body.dsaUnified.dsaStorePage .wrapCard.selected {
  border-color: var(--dsa-cyan-light-text);
  box-shadow: 0 0 0 3px rgba(0,92,73,.18);
}
html:not(.darkMode) body.dsaUnified.dsaStatsPage .tab,
html:not(.darkMode) body.dsaUnified.dsaStatsPage .backButton,
html:not(.darkMode) body.dsaUnified.dsaLinksPage .back,
html:not(.darkMode) body.dsaUnified.dsaLinksPage .visit {
  border-color: var(--dsa-cyan-light-text);
}
html:not(.darkMode) body.dsaUnified.dsaStatsPage .tab.active,
html:not(.darkMode) body.dsaUnified.dsaLinksPage .visit {
  background: var(--dsa-cyan-light-text);
  color: #fff;
}

html.darkMode body.dsaUnified textarea::placeholder { color: rgba(234,246,255,.50); }
html:not(.darkMode) body.dsaUnified textarea::placeholder { color: rgba(5,7,13,.48); }

/* Feedback list header: avoid the BACK HUD overlapping the title/sort controls. */
body.dsaUnified.dsaFeedbackList header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
  row-gap: 10px;
  padding: calc(12px + env(safe-area-inset-top)) 16px 14px;
  text-align: left;
}
body.dsaUnified.dsaFeedbackList header .back {
  position: static;
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  min-width: 96px;
  min-height: 42px;
  padding: 0 16px;
}
body.dsaUnified.dsaFeedbackList header h1 {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  min-width: 0;
  text-align: center;
  font-size: clamp(20px, 5.2vw, 34px);
}
body.dsaUnified.dsaFeedbackList header .sorts {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 0;
}
@media (max-width: 430px) {
  body.dsaUnified.dsaFeedbackList header { grid-template-columns: 1fr; text-align: center; }
  body.dsaUnified.dsaFeedbackList header .back,
  body.dsaUnified.dsaFeedbackList header h1,
  body.dsaUnified.dsaFeedbackList header .sorts { grid-column: 1; }
  body.dsaUnified.dsaFeedbackList header .back { grid-row: 1; justify-self: center; min-width: 82px; }
  body.dsaUnified.dsaFeedbackList header h1 { grid-row: 2; }
  body.dsaUnified.dsaFeedbackList header .sorts { grid-row: 3; }
}

html:not(.darkMode) body.dsaUnified.dsaShopPage .box,
html:not(.darkMode) body.dsaUnified.dsaBlogPage .fixedTop {
  background: rgba(255,255,255,.88);
  color: #05070d;
  border-color: rgba(7,17,13,.18);
}
html.darkMode body.dsaUnified.dsaShopPage .box,
html.darkMode body.dsaUnified.dsaBlogPage .fixedTop {
  background: rgba(13,20,34,.90);
  color: #eaf6ff;
  border-color: rgba(143,255,212,.26);
}
html.darkMode body.dsaUnified.dsaShopPage input,
html.darkMode body.dsaUnified.dsaShopPage .form input {
  background: rgba(8,13,24,.90);
  color: #fff;
  border-color: rgba(143,255,212,.30);
}
html:not(.darkMode) body.dsaUnified.dsaShopPage input,
html:not(.darkMode) body.dsaUnified.dsaShopPage .form input {
  background: rgba(255,255,255,.92);
  color: #05070d;
  border-color: rgba(7,17,13,.24);
}