/* AnomicFlip — Link Roblox Account modal */
:root {
  --af-bg: #1e2125;
  --af-panel: #1e2125;
  --af-input: #2a2d33;
  --af-btn: #2a2d33;
  --af-btn-hover: #33373e;
  --af-border: #2e3238;
  --af-text: #ffffff;
  --af-muted: #9a9ea6;
  --af-label: #a7abb2;
  --af-green: #3fd68f;
  --af-green-dim: rgba(63, 214, 143, 0.12);
  --af-red: #ff5c6c;
  --af-radius: 8px;
  /* Swap this for your own artwork (e.g. an Anomic desert screenshot) */
  --af-hero: linear-gradient(180deg, #c9d6d4 0%, #8fa6a3 30%, #5d7470 55%, #3c4a47 80%, #2b3433 100%);
}

.af-overlay, .af-overlay * { box-sizing: border-box; }
.af-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: none; align-items: center; justify-content: center;
  padding: 16px;
  background: rgba(8, 10, 12, 0.72);
  backdrop-filter: blur(3px);
  font-family: 'Archivo', system-ui, -apple-system, Segoe UI, sans-serif;
}
.af-overlay.open { display: flex; animation: af-fade .18s ease-out; }
@keyframes af-fade { from { opacity: 0 } to { opacity: 1 } }

.af-modal {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) 360px;
  max-height: calc(100vh - 32px); overflow-y: auto;
  width: 100%; max-width: 1150px;
  background: var(--af-bg);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
  color: var(--af-text);
}

.af-left { padding: 44px 44px 44px 28px; max-width: 760px; }
.af-right { position: relative; background: var(--af-bg); }
/* Sign-in art with a torn, crumbly left edge (same idea as the torn photo on the home page).
   ::before = pale paper backing, ::after = the photo. Swap the image in public/signin-art.webp. */
.af-right::before, .af-right::after { content: ''; position: absolute; pointer-events: none; }
.af-right::before {
  inset: 0; background: #d8d0bf; opacity: .22;
  clip-path: polygon(1.13% 0.00%, 4.30% 2.50%, 4.22% 5.00%, 0.13% 7.50%, 3.99% 10.00%, 3.43% 12.50%, 2.20% 15.00%, 2.02% 17.50%, 5.20% 20.00%, 3.13% 22.50%, 1.08% 25.00%, 0.63% 27.50%, 2.24% 30.00%, 2.97% 32.50%, 0.72% 35.00%, 1.50% 37.50%, 2.05% 40.00%, 1.05% 42.50%, 2.45% 45.00%, 2.01% 47.50%, 3.06% 50.00%, 1.01% 52.50%, 0.41% 55.00%, 2.65% 57.50%, 4.67% 60.00%, 2.68% 62.50%, 3.06% 65.00%, 2.43% 67.50%, 2.03% 70.00%, 2.94% 72.50%, 1.66% 75.00%, 0.21% 77.50%, 2.26% 80.00%, 2.88% 82.50%, 1.35% 85.00%, 0.08% 87.50%, 2.97% 90.00%, 3.49% 92.50%, 1.37% 95.00%, 0.28% 97.50%, 1.92% 100.00%, 100% 100%, 100% 0%);
}
.af-right::after {
  inset: 0 0 0 7px;
  background: linear-gradient(160deg, rgba(63,214,143,.08), rgba(20,23,26,.30)), url('/signin-art.webp') center / cover no-repeat;
  clip-path: polygon(4.10% 0.00%, 1.39% 2.50%, 1.79% 5.00%, 4.79% 7.50%, 0.88% 10.00%, 1.17% 12.50%, 2.95% 15.00%, 0.02% 17.50%, 1.85% 20.00%, 4.77% 22.50%, 2.58% 25.00%, 7.60% 27.50%, 3.90% 30.00%, 3.99% 32.50%, 6.54% 35.00%, 4.84% 37.50%, 0.81% 40.00%, 4.61% 42.50%, 0.51% 45.00%, 0.13% 47.50%, 5.01% 50.00%, 1.74% 52.50%, 0.61% 55.00%, 4.97% 57.50%, 4.41% 60.00%, 1.71% 62.50%, 4.14% 65.00%, 0.12% 67.50%, 6.17% 70.00%, 0.14% 72.50%, 4.89% 75.00%, 3.48% 77.50%, 1.83% 80.00%, 3.86% 82.50%, 3.90% 85.00%, 1.12% 87.50%, 4.92% 90.00%, 4.03% 92.50%, 3.70% 95.00%, 2.59% 97.50%, 5.12% 100.00%, 100% 100%, 100% 0%);
}

.af-close {
  position: absolute; top: 18px; right: 16px; z-index: 2;
  width: 42px; height: 42px; border-radius: 8px; border: 0;
  background: #2b2f35; color: #c9ccd1; cursor: pointer;
  display: grid; place-items: center;
}
.af-close:hover { background: #363b42; color: #fff; }

.af-title { margin: 6px 0 12px; font-size: 34px; font-weight: 800; letter-spacing: -.3px; }
.af-sub { margin: 0; color: var(--af-muted); font-size: 18px; line-height: 1.5; }
.af-divider { height: 1px; background: var(--af-border); margin: 30px 0 34px; }

.af-label {
  display: block; margin-bottom: 14px;
  font-size: 15px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--af-label);
}

.af-input-wrap {
  display: flex; align-items: center; gap: 14px;
  height: 70px; padding: 0 22px;
  background: var(--af-input);
  border: 1px solid transparent; border-radius: var(--af-radius);
  transition: border-color .15s, box-shadow .15s;
}
.af-input-wrap:focus-within { border-color: var(--af-green); box-shadow: 0 0 0 1px var(--af-green-dim); }
.af-input-wrap.error { border-color: var(--af-red); }
.af-input-wrap svg { flex: none; color: #9a9ea6; }
.af-input {
  flex: 1; min-width: 0; background: none; border: 0; outline: none;
  color: var(--af-text); font: inherit; font-size: 19px;
}
.af-input::placeholder { color: #8b8f97; }

.af-checks { margin-top: 30px; display: grid; gap: 18px; }
.af-check { display: flex; align-items: center; gap: 13px; cursor: pointer; color: var(--af-muted); font-size: 17px; user-select: none; }
.af-check input { position: absolute; opacity: 0; pointer-events: none; }
.af-box {
  flex: none; width: 26px; height: 26px; border-radius: 6px; background: #2c3036;
  display: grid; place-items: center; transition: background .15s;
}
.af-box svg { opacity: 0; transition: opacity .1s; }
.af-check input:checked + .af-box { background: var(--af-green); }
.af-check input:checked + .af-box svg { opacity: 1; }
.af-check input:focus-visible + .af-box { outline: 2px solid var(--af-green); outline-offset: 2px; }
.af-link { color: var(--af-green); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

.af-ref { margin-top: 22px; }
.af-ref summary {
  list-style: none; cursor: pointer; color: var(--af-green); font-weight: 600; font-size: 17px;
  display: inline-flex; align-items: center; gap: 8px;
}
.af-ref summary::-webkit-details-marker { display: none; }
.af-ref summary::before { content: '▶'; font-size: 11px; transition: transform .15s; }
.af-ref[open] summary::before { transform: rotate(90deg); }
.af-ref .af-input-wrap { margin-top: 14px; height: 56px; }


.af-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.af-btn {
  height: 66px; border: 0; border-radius: var(--af-radius);
  background: var(--af-btn); color: #fff; font: inherit; font-size: 20px; font-weight: 700;
  cursor: pointer; transition: background .15s, opacity .15s, transform .05s;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
}
.af-btn:hover:not(:disabled) { background: var(--af-btn-hover); }
.af-btn:active:not(:disabled) { transform: translateY(1px); }
.af-btn:disabled { color: #7d8189; cursor: not-allowed; }
.af-btn.primary:not(:disabled) { background: var(--af-green); color: #0d1f16; }
.af-btn.primary:not(:disabled):hover { background: #52e09d; }

.af-error {
  display: none; margin-top: 16px; padding: 12px 14px; border-radius: var(--af-radius);
  background: rgba(255, 92, 108, .1); color: #ff8b97; font-size: 15px;
}
.af-error.show { display: block; }

/* Sign in with Discord */
.af-or { display: flex; align-items: center; gap: 14px; margin: 26px 0 18px; color: #6b7078; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; }
.af-or::before, .af-or::after { content: ''; flex: 1; height: 1px; background: #2e3238; }
.af-discord { width: 100%; background: #5865f2; color: #fff; text-decoration: none; }
.af-discord:hover { background: #6a75f4 !important; }
.af-or-note { margin: 10px 0 0; text-align: center; font-size: 14px; color: #7d8189; }

/* ---- step 2 ---- */
.af-who {
  display: flex; align-items: center; gap: 16px; padding: 16px 18px;
  background: var(--af-input); border-radius: var(--af-radius);
}
.af-avatar { width: 56px; height: 56px; border-radius: 8px; background: #3a3f46 center/cover; flex: none; }
.af-who .n { font-weight: 800; font-size: 19px; }
.af-who .u { color: var(--af-muted); font-size: 15px; margin-top: 2px; }
.af-who .af-change { margin-left: auto; background: none; border: 0; color: var(--af-green); font: inherit; font-weight: 600; cursor: pointer; }

.af-steps { margin: 28px 0 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 14px; }
.af-steps li { counter-increment: s; display: flex; gap: 14px; color: var(--af-muted); font-size: 17px; line-height: 1.45; }
.af-steps li::before {
  content: counter(s); flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--af-green-dim); color: var(--af-green); font-weight: 800; font-size: 14px;
  display: grid; place-items: center;
}
.af-steps b { color: #fff; }

.af-code {
  margin-top: 26px; display: flex; align-items: center; gap: 12px;
  height: 74px; padding: 0 12px 0 22px;
  background: var(--af-input); border: 1px dashed rgba(63,214,143,.55); border-radius: var(--af-radius);
}
.af-code code {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  font-family: ui-monospace, 'JetBrains Mono', Consolas, monospace; font-size: 24px; font-weight: 700;
  color: var(--af-green); letter-spacing: 1px;
}
.af-copy { height: 50px; padding: 0 18px; font-size: 16px; }
.af-meta { margin-top: 12px; display: flex; justify-content: space-between; color: var(--af-muted); font-size: 14px; }
.af-meta button { background: none; border: 0; color: var(--af-green); font: inherit; font-weight: 600; cursor: pointer; padding: 0; }
.af-step2 .af-actions { margin-top: 30px; }

/* ---- step 3 ---- */
.af-done { text-align: center; padding-top: 60px; }
.af-done .af-avatar { width: 96px; height: 96px; border-radius: 16px; margin: 0 auto 20px; }
.af-done .af-sub { margin-top: 8px; }

.af-spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: af-r .7s linear infinite; }
@keyframes af-r { to { transform: rotate(360deg) } }

[hidden] { display: none !important; }


.af-actions.single { grid-template-columns: 1fr; }
.af-step1 .af-actions { margin-top: 40px; }
.af-avatar { display: grid; place-items: center; font-weight: 800; font-size: 22px; color: var(--af-green); background-color: #33373e; background-size: cover; background-position: center; }
.af-done .af-avatar { font-size: 38px; }

@media (max-width: 900px) {
  .af-modal { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .af-right { display: none; }
  .af-left { padding: 28px 20px; }
  .af-title { font-size: 26px; padding-right: 48px; }
  .af-sub { font-size: 16px; }
  .af-actions { grid-template-columns: 1fr; }
  .af-code code { font-size: 18px; }
}