/* Whitelist / collabs windows: the District's pixel window (Win98-style
   frame, stepped rainbow edge, bevels, sunken fields) on the site's darker,
   more transparent glass. */

.win {
  width: min(480px, calc(100% - 24px));
  max-height: calc(100dvh - 24px);
  padding: 0;
  overflow: visible;
  color: var(--text);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.06), transparent 55%), rgba(14, 16, 22, 0.62);
  border: 0;
  border-radius: 0;
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  backdrop-filter: blur(22px) saturate(140%);
  box-shadow:
    0 0 0 2px #05070c,
    8px 8px 0 2px rgba(0, 0, 0, 0.45),
    inset 3px 3px 0 rgba(255, 255, 255, 0.16),
    inset -3px -3px 0 rgba(0, 0, 0, 0.45);
}
.win::backdrop { background: rgba(3, 4, 7, 0.62); backdrop-filter: blur(4px); }

/* Rainbow edge: 2px, stepped corners, slowly turning. */
@property --win-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.win::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  pointer-events: none;
  z-index: 2;
  background: conic-gradient(from var(--win-angle), #ff453a, #ff9f0a, #ffe900, #64ff00, #00eadb, #008cff, #6844ff, #ff49cf, #ff453a);
  clip-path: polygon(0 2px, 2px 2px, 2px 0, calc(100% - 2px) 0, calc(100% - 2px) 2px,
    100% 2px, 100% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px),
    calc(100% - 2px) 100%, 2px 100%, 2px calc(100% - 2px), 0 calc(100% - 2px));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: win-spin 8s linear infinite;
}
@keyframes win-spin { to { --win-angle: 360deg; } }

/* Title bar. */
.win-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 4px 4px 0;
  padding: 5px 5px 5px 12px;
  background: rgba(0, 0, 0, 0.42);
  box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.07);
}
.win-name { font-size: 14px; letter-spacing: 0.06em; color: var(--muted); }
.win-name::before { content: "▣ "; color: #00eadb; }
.win-close {
  width: 30px;
  height: 28px;
  display: grid;
  place-items: center;
  font-size: 20px;
  line-height: 1;
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 1px #05070c, inset 2px 2px 0 rgba(255, 255, 255, 0.3), inset -2px -2px 0 rgba(0, 0, 0, 0.55);
}
.win-close:hover { background: rgba(255, 255, 255, 0.16); }
.win-close:active { box-shadow: 0 0 0 1px #05070c, inset 2px 2px 0 rgba(0, 0, 0, 0.55), inset -2px -2px 0 rgba(255, 255, 255, 0.2); }

.win-body { padding: 18px 22px 22px; max-height: calc(100dvh - 90px); overflow: auto; }
.win-form[hidden], .win-done[hidden], .win-soon[hidden] { display: none; }

/* "Coming soon" loading bar, same as the District's loading screen: a thin
   outlined track with a continuous rainbow fill. forms.js drives the fill and
   the percentage together; it climbs, holds near the end, then starts over. */
.win-loading {
  height: 12px;
  margin: 6px 0 10px;
  padding: 2px;
  background: #05070c;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.16);
}
.win-loading span {
  display: block;
  height: 100%;
  width: 4%;
  background: var(--rainbow);
  transition: width 200ms steps(4, end);
}
.win p.win-note { margin: 0 0 18px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-variant-numeric: tabular-nums; }
.win p.win-eyebrow { margin: 0 0 8px; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.win h2 { margin: 0 0 8px; font-size: 32px; line-height: 1.05; }
.win p.win-lead { margin: 0 0 18px; font-size: 16px; line-height: 1.45; color: #b9bec4; }

/* Fields: sunken, square, pixel. */
.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field > span { font-size: 14px; letter-spacing: 0.04em; color: #d8dce0; }
.field em { font-style: normal; font-size: 12px; color: var(--muted); margin-left: 6px; }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 11px 12px;
  font: 16px "WC Digits", "Pixelify Sans", monospace;
  color: var(--text);
  background: rgba(0, 0, 0, 0.42);
  border: 0;
  border-radius: 0;
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.7), inset -2px -2px 0 rgba(255, 255, 255, 0.12);
  outline: none;
  resize: vertical;
}
.field input[name="wallet"] { font-family: "Roboto Mono", Consolas, monospace; font-size: 14px; letter-spacing: 0.02em; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #a1a6ad 50%), linear-gradient(135deg, #a1a6ad 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 32px; }
.field select option { background: #111316; }
.field ::placeholder { color: #6d737a; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.7), inset -2px -2px 0 rgba(255, 255, 255, 0.12),
    -2px 0 0 #ff453a, 0 -2px 0 #ffe900, 2px 0 0 #00eadb, 0 2px 0 #6844ff;
  animation: win-field-focus 360ms steps(3, end) both;
}
@keyframes win-field-focus {
  0%, 100% { filter: none; }
  30% { filter: drop-shadow(2px 0 0 #ff49cf); }
  65% { filter: drop-shadow(-2px 0 0 #64ff00); }
}
.field-error { display: none; font-size: 13px; color: #ff6b7f; }
.field.is-invalid .field-error { display: block; }
.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea { box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.7), inset -2px -2px 0 rgba(255, 255, 255, 0.12), 0 0 0 2px #ff4b68; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Primary button: light, raised Win98 bevel; pixel shadow on hover. */
.win-submit {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 6px;
  padding: 14px 16px;
  font: 600 17px "WC Digits", "Pixelify Sans", monospace;
  color: #0c0d0f;
  background: #f2f4ed;
  box-shadow: 0 0 0 2px #05070c, inset 2px 2px 0 #ffffff, inset -2px -2px 0 #9aa5ad;
  cursor: pointer;
  text-decoration: none;
}
.win-submit::before {
  content: "";
  position: absolute;
  inset: -2px;
  padding: 2px;
  pointer-events: none;
  background: var(--rainbow);
  background-size: 200% 100%;
  clip-path: polygon(0 2px, 2px 2px, 2px 0, calc(100% - 2px) 0, calc(100% - 2px) 2px,
    100% 2px, 100% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px),
    calc(100% - 2px) 100%, 2px 100%, 2px calc(100% - 2px), 0 calc(100% - 2px));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0.72;
}
.win-submit:hover { box-shadow: 0 0 0 2px #05070c, 4px 4px 0 2px rgba(0, 0, 0, 0.55), inset 2px 2px 0 #ffffff, inset -2px -2px 0 #7e8a93; filter: drop-shadow(-1px 0 0 rgba(255, 73, 107, 0.7)) drop-shadow(1px 0 0 rgba(0, 234, 219, 0.7)); }
.win-submit:is(:hover, :focus-visible)::before { opacity: 1; }
.win-submit:active { transform: translate(2px, 2px); box-shadow: 0 0 0 2px #05070c, inset 2px 2px 0 #9aa5ad, inset -2px -2px 0 #ffffff; }
.win-submit.is-glitch-click { animation: win-button-click 420ms steps(3, end) both; }
.win-submit.is-glitch-click::before { animation: win-button-edge 420ms steps(4, end) both; }
@keyframes win-button-click {
  0%, 100% { translate: 0 0; }
  25% { translate: -2px 0; }
  50% { translate: 2px -1px; }
  75% { translate: -1px 1px; }
}
@keyframes win-button-edge {
  0%, 100% { background-position: 0 50%; opacity: 1; }
  25% { background-position: 70% 50%; }
  50% { background-position: 100% 50%; }
  75% { background-position: 35% 50%; }
}
.win-submit:disabled { opacity: 0.6; cursor: wait; }
.win p.win-status { min-height: 1.2em; margin: 10px 0 0; font-size: 14px; color: #ff9aa8; }

.win-done { padding: 6px 0 2px; }
.win .win-done p.win-eyebrow { color: #00eadb; }

@media (max-width: 580px) {
  .win h2 { font-size: 27px; }
  .win-body { padding: 16px 16px 18px; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
}
@media (prefers-reduced-motion: reduce) { .win::before, .win-loading span, .win-submit.is-glitch-click, .win-submit.is-glitch-click::before, .field input:focus, .field select:focus, .field textarea:focus { animation: none; } }
@media (forced-colors: active) { .field input:focus, .field select:focus, .field textarea:focus, .win-submit:focus-visible { outline: 2px solid Highlight; } }

/* Anti-bot cat check: three pixel pet heads, tap the one the prompt names. */
.cat-check { border: 0; padding: 0; margin: 0; min-width: 0; }
.cat-check legend { padding: 0; font-size: 12px; letter-spacing: .08em; color: var(--muted, #a1a6ad); margin-bottom: 4px; }
.cat-check-prompt { margin: 0 0 8px; font-size: 15px; }
.cat-check-options { display: flex; gap: 10px; }
.cat-check-options button {
  width: 64px; height: 64px; padding: 4px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .05);
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .14), inset -2px -2px 0 rgba(0, 0, 0, .5);
  clip-path: polygon(0 4px, 4px 4px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px));
}
.cat-check-options img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; pointer-events: none; }
.cat-check-options button:hover { background: rgba(255, 255, 255, .1); }
.cat-check-options button[aria-checked="true"] { background: var(--rainbow); box-shadow: inset 0 0 0 3px #0c0d0f; }
.cat-check.is-invalid .cat-check-options button { outline: 1px solid #ff6b6b; outline-offset: -1px; }

/* Phone: a thumb-sized close button. */
@media (max-width: 580px) { .win-close { width: 40px; height: 36px; } }

/* readme.txt: the short FAQ window. */
.win-faq { margin: 4px 0 18px; }
.win-faq dt { margin-top: 14px; font-size: 15px; font-weight: 600; color: var(--text); }
.win-faq dt:first-child { margin-top: 0; }
.win-faq dd { margin: 3px 0 0; font-size: 14px; line-height: 1.5; color: #b9bec4; }
/* Roboto Mono is only loaded for the "@nett0eth" glyphs, so code uses the system mono. */
.win-faq code, .win code { font-family: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace; font-size: 13px; color: #00eadb; }
.win-faq a { color: #00eadb; text-decoration: underline; text-underline-offset: 3px; }

/* A link from one window panel to another (readme → install). */
.win-more { padding: 0; font: inherit; color: #00eadb; background: none; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.win-more:hover { color: var(--text); }

/* install.exe: the steps as one sunken monospace block. */
.win-code {
  margin: 0 0 16px; padding: 12px;
  font: 13px/1.5 ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  color: var(--text);
  background: rgba(0, 0, 0, 0.5);
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.7), inset -2px -2px 0 rgba(255, 255, 255, 0.12);
}
.win-code > span { display: block; white-space: pre-wrap; overflow-wrap: anywhere; padding-left: 2ch; text-indent: -2ch; }
.win-code .c { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 16px; padding-left: 0; text-indent: 0; color: var(--muted); }
.win-code .c:first-child { margin-top: 0; }
.win-code .cmd { color: #00eadb; }
.win-code .act { color: #ffe900; }
.win-copy {
  flex: 0 0 auto; padding: 4px 8px 3px;
  font: 8px/1 "Silkscreen", "Pixelify Sans", monospace; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text); background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 1px #05070c, inset 1px 1px 0 rgba(255, 255, 255, 0.3), inset -1px -1px 0 rgba(0, 0, 0, 0.55);
}
.win-copy:hover { background: rgba(255, 255, 255, 0.16); }
.win-copy:active { box-shadow: 0 0 0 1px #05070c, inset 1px 1px 0 rgba(0, 0, 0, 0.55), inset -1px -1px 0 rgba(255, 255, 255, 0.2); }
.win p.win-lead--small { font-size: 14px; margin-bottom: 16px; }
.win p.win-lead--small code { white-space: nowrap; }
@media (max-width: 580px) { .win-code { font-size: 12px; padding: 8px; } .win-copy { padding: 6px 8px 5px; } }