/* CozyCamp styles: night sky, campfire orange. Shared by the CozyCamp
   homepage and the applications page. */

  /* ===== Edit these two lines ===== */
  /* Discord invite + server name are set in the <script> at the bottom. */

  :root {
    --sky-top: #141a33;
    --sky-bottom: #2a2350;
    --ink: #fff4e3;
    --ink-soft: #d9cbb5;
    --muted: #a99ebf;
    --card: #231c3d;
    --card-edge: #3a2f5e;
    --field: #1a1530;
    --field-edge: #4a3f73;
    --fire: #f2994a;
    --fire-hot: #ffcf5c;
    --ember: #e8583a;
    --pine: #2f6b4f;
    --pine-dark: #1f4a38;
    --discord: #5865f2;
    --ok: #7ed49a;
    --bad: #ff8a7a;
    --radius: 14px;
  }
  * { box-sizing: border-box; }
  [hidden] { display: none !important; }
  html, body { margin: 0; }
  body {
    min-height: 100vh;
    background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bottom) 55%, #3b2a4f 100%);
    color: var(--ink);
    font-family: "Nunito", system-ui, sans-serif;
    line-height: 1.55;
    overflow-x: hidden;
  }
  h1, h2, h3, .brand, button, .btn { font-family: "Fredoka", "Nunito", sans-serif; }

  /* Stars */
  .stars { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
  .star { position: absolute; width: 3px; height: 3px; background: #fff; border-radius: 1px; opacity: .7; animation: twinkle 3s ease-in-out infinite; }
  @keyframes twinkle { 50% { opacity: .15; } }

  .wrap { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; padding: 0 16px 80px; }

  /* Hero */
  header.hero { text-align: center; padding: 48px 0 12px; }
  .studio { display: inline-flex; gap: 8px; flex-wrap: wrap; justify-content: center; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
  .studio span { background: rgba(255,255,255,.06); border: 1px solid var(--card-edge); padding: 4px 10px; border-radius: 999px; }
  h1 { font-size: clamp(38px, 8vw, 64px); line-height: 1; margin: 18px 0 6px; letter-spacing: -.01em; }
  h1 .cozy { color: var(--fire-hot); text-shadow: 0 0 24px rgba(242,153,74,.55); }
  .tag { font-size: clamp(17px, 3.4vw, 21px); color: var(--ink-soft); margin: 0 auto; max-width: 520px; }
  .badge { display: inline-block; margin-top: 14px; font-family: "Fredoka"; font-weight: 600; background: var(--fire); color: #2a1a10; padding: 6px 14px; border-radius: 10px; box-shadow: 0 4px 0 #b86a2c; transform: rotate(-2deg); }

  /* Campfire scene */
  .scene { margin: 26px auto 0; max-width: 560px; }
  .scene svg { width: 100%; height: auto; display: block; }
  .flame { transform-origin: 50% 100%; animation: flicker 1.1s ease-in-out infinite alternate; }
  .flame.b { animation-duration: .8s; animation-delay: -.3s; }
  .flame.c { animation-duration: 1.4s; animation-delay: -.6s; }
  @keyframes flicker { 0% { transform: scaleY(1) skewX(0); } 50% { transform: scaleY(1.08) skewX(3deg); } 100% { transform: scaleY(.93) skewX(-3deg); } }
  .spark { animation: rise 2.6s linear infinite; opacity: 0; }
  @keyframes rise { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-70px); opacity: 0; } }
  @media (prefers-reduced-motion: reduce) { .flame, .spark, .star { animation: none; } .spark { opacity: 0; } }

  /* Cards */
  .card { background: var(--card); border: 2px solid var(--card-edge); border-radius: var(--radius); padding: 22px; margin-top: 22px; box-shadow: 0 6px 0 #140f26; }
  .card h2 { margin: 0 0 6px; font-size: 24px; display: flex; align-items: center; gap: 10px; }
  .card h2 .ico { font-size: 22px; }
  .card p { margin: 6px 0; color: var(--ink-soft); }
  .perks { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 14px; }
  .perk { background: rgba(255,255,255,.04); border: 1px solid var(--card-edge); border-radius: 12px; padding: 12px 14px; }
  .perk b { display: block; font-family: "Fredoka"; font-weight: 600; color: var(--ink); }
  .perk small { color: var(--muted); font-size: 14px; }

  .fair { border-left: 4px solid var(--fire); background: rgba(242,153,74,.08); padding: 10px 14px; border-radius: 0 10px 10px 0; margin-top: 14px; color: var(--ink) !important; }

  /* Step 1 - Discord */
  .step-label { font-family: "Fredoka"; font-weight: 600; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--fire-hot); }
  .discord-card { border-color: #4750b8; background: linear-gradient(160deg, #262b5c, var(--card)); }
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; cursor: pointer; font-size: 18px; font-weight: 600; padding: 13px 22px; border-radius: 12px; text-decoration: none; transition: transform .08s, box-shadow .08s; }
  .btn:active { transform: translateY(3px); }
  .btn-discord { background: var(--discord); color: #fff; box-shadow: 0 4px 0 #3a43b0; margin-top: 12px; }
  .btn-discord:active { box-shadow: 0 1px 0 #3a43b0; }
  .roblox-card { border-color: #3d6b52; background: linear-gradient(160deg, #1f3b33, var(--card)); }
  .btn-roblox { background: #e8e8e8; color: #1b1b1b; box-shadow: 0 4px 0 #9a9a9a; margin-top: 12px; }
  .btn-roblox:active { box-shadow: 0 1px 0 #9a9a9a; }
  .btn-fire { background: var(--fire); color: #2a1a10; box-shadow: 0 5px 0 #b86a2c; width: 100%; font-size: 20px; padding: 16px; }
  .btn-fire:active { box-shadow: 0 2px 0 #b86a2c; }
  .btn-fire[disabled] { opacity: .6; cursor: progress; }
  .notice { font-size: 14px; color: var(--muted); margin-top: 10px; }

  /* Form */
  form { display: grid; gap: 16px; margin-top: 14px; }
  .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  @media (max-width: 560px) { .row { grid-template-columns: 1fr; } }
  label { display: block; font-weight: 700; margin-bottom: 6px; }
  label .req { color: var(--fire); }
  label small { font-weight: 400; color: var(--muted); }
  input[type=text], input[type=number], textarea, select {
    width: 100%; font: inherit; color: var(--ink); background: var(--field);
    border: 2px solid var(--field-edge); border-radius: 10px; padding: 11px 13px; outline: none;
  }
  textarea { min-height: 96px; resize: vertical; }
  input:focus, textarea:focus, select:focus { border-color: var(--fire); box-shadow: 0 0 0 3px rgba(242,153,74,.25); }
  input.invalid, textarea.invalid { border-color: var(--bad); }
  .hint { font-size: 13px; color: var(--muted); margin-top: 4px; }
  .check { display: flex; gap: 12px; align-items: flex-start; background: var(--field); border: 2px solid var(--field-edge); border-radius: 10px; padding: 12px 14px; cursor: pointer; }
  .check input { width: 22px; height: 22px; accent-color: var(--fire); margin-top: 2px; flex: none; }
  .check span { font-weight: 600; }
  .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .error-box { display: none; background: rgba(255,138,122,.12); border: 2px solid var(--bad); color: #ffd6cf; border-radius: 10px; padding: 12px 14px; font-weight: 600; }
  .counter { float: right; font-weight: 400; font-size: 12px; color: var(--muted); }

  /* Success */
  .success { display: none; text-align: center; padding: 30px 22px; }
  .success .big { font-size: 60px; }
  .success h2 { justify-content: center; font-size: 30px; }
  .app-id { display: inline-block; font-family: "Fredoka"; font-size: 22px; background: var(--field); border: 2px dashed var(--fire); padding: 8px 16px; border-radius: 10px; margin: 10px 0; letter-spacing: .05em; }

  footer { text-align: center; color: var(--muted); font-size: 13px; margin-top: 40px; }
  footer b { color: var(--ink-soft); }

  .forms-grid { display: grid; gap: 12px; margin-top: 14px; }
  .form-pick { display: flex; gap: 14px; align-items: center; text-align: left; width: 100%; background: rgba(255,255,255,.04); border: 2px solid var(--card-edge); border-radius: 12px; padding: 14px 16px; color: var(--ink); font: inherit; cursor: pointer; }
  .form-pick:hover, .form-pick.active { border-color: var(--fire); background: rgba(242,153,74,.08); }
  .form-pick .em { font-size: 30px; flex: none; }
  .form-pick b { display: block; font-family: "Fredoka"; font-size: 19px; font-weight: 600; }
  .form-pick small { color: var(--ink-soft); font-size: 14px; }
  .loading { color: var(--muted); padding: 10px 0; }
  .md a { color: var(--fire-hot); }

/* ================= platform additions ================= */
:root { --muted: #c3b9d8; --ink-soft: #e6dac6; }
body { font-size: 17px; line-height: 1.6; }
:focus-visible { outline: 3px solid var(--fire-hot); outline-offset: 3px; border-radius: 6px; }
.skip-link { position: absolute; left: 12px; top: -60px; background: var(--fire); color: #2a1a10; padding: 10px 16px; border-radius: 8px; font-weight: 700; z-index: 999; }
.skip-link:focus { top: 12px; }
.hint { font-size: 14.5px; }
.studio { font-size: 13px; }
.perk small { font-size: 15.5px; }
.notice, footer { font-size: 15px; }
.step-label { font-size: 14px; }
.counter { font-size: 13.5px; }
.card p { font-size: 17px; }
label { font-size: 16.5px; }
input[type=text], input[type=number], textarea, select { font-size: 16.5px; min-height: 48px; }
.btn { min-height: 48px; }

/* OkayNatti strip: shows this site belongs to the bigger platform */
.okn-strip { position: relative; z-index: 6; background: #0b0b0c; border-bottom: 1px solid rgba(255,255,255,.12); }
.okn-strip ol { list-style: none; margin: 0 auto; max-width: 1000px; padding: 10px 16px; display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 14.5px; color: #a6a6a1; font-family: "Nunito", system-ui, sans-serif; }
.okn-strip li { display: flex; align-items: center; gap: 8px; }
.okn-strip li + li::before { content: "/"; color: #7d7d79; }
.okn-strip a { color: #cfcfca; text-decoration: underline; text-decoration-color: rgba(255,255,255,.3); text-underline-offset: 3px; }
.okn-strip a:hover { color: #fff; }
.okn-strip [aria-current="page"] { color: #fff; font-weight: 700; }

/* CozyCamp nav */
.cc-nav { position: sticky; top: 0; z-index: 5; background: rgba(20,26,51,.95); backdrop-filter: blur(8px); border-bottom: 2px solid var(--card-edge); }
.cc-nav-inner { max-width: 1000px; margin: 0 auto; padding: 0 16px; min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cc-brand { font-family: "Fredoka", sans-serif; font-weight: 700; font-size: 24px; color: var(--ink); text-decoration: none; }
.cc-brand span { color: var(--fire-hot); }
.cc-links { display: flex; gap: 4px; align-items: center; }
.cc-links a { font-family: "Fredoka", sans-serif; font-weight: 500; font-size: 17px; color: var(--ink-soft); text-decoration: none; padding: 10px 14px; border-radius: 10px; }
.cc-links a:hover { background: rgba(255,255,255,.07); color: var(--ink); }
.cc-links a[aria-current="page"], .cc-links a.is-active { background: var(--fire); color: #2a1a10; font-weight: 600; }
.cc-burger { display: none; width: 48px; height: 48px; border-radius: 12px; border: 2px solid var(--card-edge); background: transparent; align-items: center; justify-content: center; flex-direction: column; gap: 5px; cursor: pointer; }
.cc-burger span { width: 20px; height: 2px; background: var(--ink); border-radius: 2px; }
@media (max-width: 760px) {
  .cc-burger { display: flex; }
  .cc-links { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; background: var(--sky-top); border-bottom: 2px solid var(--card-edge); padding: 10px 16px 16px; gap: 6px; }
  .cc-links.open { display: flex; }
  .cc-links a { font-size: 20px; padding: 14px; }
}

/* CozyCamp homepage */
.wrap-wide { position: relative; z-index: 1; max-width: 1000px; margin: 0 auto; padding: 0 16px 60px; }
.owner { margin-top: 16px; font-size: 15.5px; color: var(--muted); }
.owner a { color: var(--fire-hot); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 24px; }
.btn-ghost { background: transparent; color: var(--ink); border: 2px solid var(--field-edge); }
.btn-ghost:hover { border-color: var(--fire); }
.btn-primary { background: var(--fire); color: #2a1a10; box-shadow: 0 4px 0 #b86a2c; }
.btn-primary:active { box-shadow: 0 1px 0 #b86a2c; }
.status-pill { display: inline-block; margin-top: 14px; font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 15px; color: var(--fire-hot); border: 2px solid rgba(255,207,92,.45); padding: 5px 14px; border-radius: 999px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 14px; }
.tile { display: flex; flex-direction: column; gap: 8px; background: rgba(255,255,255,.04); border: 2px solid var(--card-edge); border-radius: 14px; padding: 18px; color: var(--ink); text-decoration: none; }
a.tile:hover { border-color: var(--fire); background: rgba(242,153,74,.08); }
.tile .em { font-size: 32px; }
.tile b { font-family: "Fredoka", sans-serif; font-size: 20px; font-weight: 600; }
.tile span { color: var(--ink-soft); font-size: 16px; }
.tile .go { color: var(--fire-hot); font-weight: 700; margin-top: auto; }
.section-title { font-size: 28px; margin: 0 0 6px; }
.cc-footer { text-align: center; color: var(--muted); font-size: 15px; margin-top: 40px; line-height: 1.8; }
.cc-footer a { color: var(--ink-soft); }
.cc-footer b { color: var(--ink); }
section[id] { scroll-margin-top: 84px; }