/* clickme.fyi — shared look.
   Lifted from the existing landing page so the tools feel like the same site
   rather than a serious product bolted onto a silly one: Comic Sans, hard
   shadows, everything tilted a degree or two. */
:root{
  --lime:#c6ff2e; --pink:#ff5f8f; --cyan:#8fd8ff; --yolk:#ffe14d; --violet:#a78bfa;
  --ink:#fff8e7; --muted:#8f97ad; --ink0:#12140a;
  --comic:"Comic Sans MS","Comic Sans","Chalkboard SE","Comic Neue",
          system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:#000;color:var(--ink);font-family:var(--comic);
  -webkit-text-size-adjust:100%}
body{min-height:100vh;display:flex;flex-direction:column;
  padding:env(safe-area-inset-top) 18px calc(28px + env(safe-area-inset-bottom))}
main{width:100%;max-width:760px;margin:0 auto;flex:1;padding-top:30px}
a{color:var(--cyan)}

.back{display:inline-block;font:700 14px var(--comic);color:var(--muted);
  text-decoration:none;margin-bottom:18px}
.back:hover{color:var(--lime)}

h1{font:900 clamp(30px,8vw,52px)/1.05 var(--comic);margin:0;letter-spacing:-1.5px;
  color:var(--lime);text-shadow:3px 3px 0 var(--ink0),6px 6px 0 var(--pink)}
.tag{margin:14px 0 26px;font:700 16px/1.55 var(--comic);color:var(--muted);
  transform:rotate(-.6deg)}
h2{font:900 11px var(--comic);letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);margin:38px 0 14px}

/* ── The drop zone: the whole product, really ─────────────────────────── */
.drop{
  display:block;width:100%;border:4px dashed var(--ink0);border-radius:20px;
  background:var(--lime);color:var(--ink0);box-shadow:6px 6px 0 var(--ink0);
  padding:42px 22px;text-align:center;cursor:pointer;transform:rotate(-.8deg);
  transition:transform .12s, box-shadow .12s, background .12s;
}
.drop:hover,.drop:focus-visible{transform:rotate(0) translate(-2px,-2px);
  box-shadow:9px 9px 0 var(--ink0);outline:none}
.drop.over{background:var(--yolk);transform:rotate(0) scale(1.01)}
.drop-big{font:900 clamp(20px,5vw,28px)/1.2 var(--comic);margin:0 0 8px}
.drop-small{font:700 14px var(--comic);opacity:.72;margin:0}
.drop input{display:none}

.btn{
  font:900 17px var(--comic);cursor:pointer;color:var(--ink0);background:var(--cyan);
  border:3px solid var(--ink0);box-shadow:5px 5px 0 var(--ink0);border-radius:14px;
  padding:13px 24px;transform:rotate(.7deg);
  transition:transform .12s, box-shadow .12s;
}
.btn:hover{transform:rotate(0) translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink0)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:5px 5px 0 var(--ink0)}
.btn.go{background:var(--pink)}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px;align-items:center}

/* ── Results ───────────────────────────────────────────────────────────── */
.files{margin:22px 0 0;padding:0;list-style:none}
.file{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:#15170d;border:3px solid var(--ink0);border-radius:14px;
  padding:12px 14px;margin-bottom:10px;box-shadow:4px 4px 0 #0a0b06;
}
.file-name{flex:1;min-width:140px;font:700 14px var(--comic);word-break:break-all}
.file-meta{font:700 13px var(--comic);color:var(--muted)}
.file-dl{
  font:900 13px var(--comic);text-decoration:none;color:var(--ink0);
  background:var(--lime);border:2px solid var(--ink0);border-radius:10px;
  padding:7px 14px;box-shadow:3px 3px 0 var(--ink0);
}
.file-dl:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink0)}
.file.bad{background:#2a1416}
.file.bad .file-meta{color:var(--pink)}

.note{font:700 14px/1.6 var(--comic);color:var(--muted);margin:26px 0 0;
  border-left:4px solid var(--violet);padding-left:14px}

/* ── Other tools ───────────────────────────────────────────────────────── */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{
  display:inline-block;text-decoration:none;color:var(--ink0);background:var(--yolk);
  border:3px solid var(--ink0);box-shadow:4px 4px 0 var(--ink0);border-radius:12px;
  padding:9px 14px;font:900 14px var(--comic);transform:rotate(-1deg);
  transition:transform .12s, box-shadow .12s;
}
.chip:nth-child(2n){background:var(--cyan);transform:rotate(1deg)}
.chip:nth-child(3n){background:var(--violet);transform:rotate(-1.4deg)}
.chip:hover{transform:rotate(0) translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink0)}

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.card{
  display:block;text-decoration:none;color:var(--ink0);background:var(--lime);
  border:3px solid var(--ink0);box-shadow:5px 5px 0 var(--ink0);border-radius:16px;
  padding:16px 18px;transform:rotate(-1deg);
  transition:transform .12s, box-shadow .12s;
}
.card:nth-child(2n){transform:rotate(1deg);background:var(--cyan)}
.card:nth-child(3n){transform:rotate(-1.6deg);background:var(--yolk)}
.card:nth-child(5n){background:var(--violet)}
.card:hover{transform:rotate(0) translate(-3px,-3px);box-shadow:9px 9px 0 var(--ink0)}
.card-t{font:900 17px var(--comic);margin:0 0 4px}
.card-s{font:700 13px var(--comic);margin:0;opacity:.78}

footer{width:100%;max-width:760px;margin:46px auto 0;
  font:700 13px var(--comic);color:var(--muted);text-align:center}
footer a{color:var(--muted)}

@media (prefers-reduced-motion:reduce){
  .drop,.btn,.chip,.card,.file-dl{transition:none;transform:none}
}