/* Recruit a Friend landing page (https://catnipgames.net/join/<code>). The site chrome (header,
   crest, main, footer) and the colour tokens come from /blog/style.css; this file adds only the
   page's own pieces. No fonts or images are fetched: the page loads nothing beyond its own files. */

.wrap.join{max-width:720px}
.join [hidden]{display:none !important}

.join .card{
  background:linear-gradient(180deg,var(--panel),var(--panel2));
  border:1px solid var(--line);border-radius:14px;
  padding:20px 22px 18px;margin:0 0 18px;
}
.join .card h2{
  margin:0 0 14px;padding-bottom:8px;
  font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:1px;
  color:var(--gold);border-bottom:1px solid var(--line);
}
.join .card p{margin:0 0 10px;color:var(--text);font-size:14.5px;line-height:1.6}
.join .card p:last-child{margin-bottom:0}
.join .card strong{color:var(--gold2);font-weight:600}
.join .card a:not(.btn){color:var(--link)}
.join .card a:not(.btn):hover{color:var(--link-hover)}

/* The code */
.join .code-card{
  border-color:rgba(217,178,90,.45);
  background:
    linear-gradient(180deg, rgba(217,178,90,.10), rgba(217,178,90,.02)),
    linear-gradient(180deg,var(--panel),var(--panel2));
}
.join .code-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin:4px 0 6px}
.join .card .code{
  margin:0;padding:8px 14px 8px 20px;
  font-family:"Cascadia Code",Consolas,"SF Mono",Menlo,monospace;
  font-size:clamp(28px,8vw,42px);font-weight:700;line-height:1.2;letter-spacing:.14em;
  color:var(--gold2);background:rgba(0,0,0,.28);
  border:1px dashed rgba(217,178,90,.55);border-radius:10px;
  -webkit-user-select:all;user-select:all;
}
.join .card .copy-status{min-height:1.6em;margin:0 0 8px;color:var(--gold2);font-size:13.5px}
.join .card .note{color:var(--muted);font-size:13.5px}
.join .notice{
  background:rgba(232,145,60,.08);border:1px solid rgba(232,145,60,.45);
  border-radius:10px;padding:12px 14px;
}
.join kbd{
  font-family:"Cascadia Code",Consolas,"SF Mono",Menlo,monospace;font-size:.92em;
  color:var(--gold2);background:rgba(0,0,0,.3);
  border:1px solid var(--line);border-radius:5px;padding:1px 6px;
}

/* Buttons. Two classes out-rank the site-wide a, a:visited and a:hover rules in /blog/style.css. */
.join .btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:10px 18px;border-radius:10px;
  font:inherit;font-size:14.5px;font-weight:600;line-height:1.2;cursor:pointer;
  color:var(--text);background:var(--panel2);border:1px solid #3a4862;
  text-decoration:none;
  transition:border-color .12s ease, color .12s ease, background .12s ease;
}
.join .btn:hover{border-color:var(--gold);color:var(--gold2);text-decoration:none}
.join .btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.join .btn-primary{
  color:#2a2208;border-color:var(--gold);
  background:linear-gradient(180deg,var(--gold2),var(--gold));
}
.join .btn-primary:hover{color:#2a2208;background:var(--gold2)}
.join .card .actions{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 2px}

/* The four steps */
.join .steps{list-style:none;margin:0;padding:0;counter-reset:step}
.join .steps > li{position:relative;counter-increment:step;margin:0;padding:0 0 20px 50px}
.join .steps > li:last-child{padding-bottom:0}
.join .steps > li::before{
  content:counter(step);
  position:absolute;left:0;top:0;width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:15px;color:#2a2208;
  background:radial-gradient(circle at 50% 35%, var(--gold2), var(--gold) 65%, #8a6d2c 100%);
  box-shadow:0 0 14px rgba(217,178,90,.25);
}
.join .steps h3{margin:6px 0 6px;font-size:16.5px;line-height:1.35;color:var(--text)}
.join .card .steps p{color:var(--muted)}
/* Step 3 is the one that cannot be redone, so it stands out. */
.join .steps > li.step-key{
  margin:0 0 20px;padding:14px 16px 14px 62px;
  background:rgba(217,178,90,.08);border:1px solid rgba(217,178,90,.42);border-radius:12px;
}
.join .steps > li.step-key::before{left:14px;top:14px}
.join .steps > li.step-key h3{color:var(--gold2)}
.join .card .steps > li.step-key p{color:var(--text)}

/* Program rules */
.join .rules ul{margin:0;padding-left:20px}
.join .rules li{color:var(--text);font-size:14px;line-height:1.55;margin:7px 0}
.join .rules li::marker{color:#56627a}

/* The off-screen buffer join.js copies from when the async clipboard is unavailable. */
.copy-buffer{position:fixed;top:0;left:0;width:1px;height:1px;padding:0;border:0;opacity:0;pointer-events:none}

@media (max-width:560px){
  .join .card{padding:16px 16px 14px}
  .join .steps > li{padding-left:46px}
  .join .steps > li.step-key{padding:12px 12px 12px 56px}
  .join .steps > li.step-key::before{left:12px;top:12px}
  .join .code-row .btn{width:100%}
  .join .card .actions .btn{flex:1 1 100%}
}