.ffm-app{
  --pink:#a72b8b;
  --purple:#571548;
  --purple2:#7C357A;
  --white:#ffffff;
  --ink:#2a0b24;
  --soft:#f7edf5;
  max-width:860px;
  margin:28px auto;
  font-family:Arial,Helvetica,sans-serif;
}
.ffm-card{
  position:relative;
  overflow:hidden;
  color:#fff;
  border-radius:28px;
  padding:clamp(28px,5vw,58px);
  text-align:center;
  background:
    radial-gradient(circle at 10% 15%,rgba(255,255,255,.13) 0 7%,transparent 7.5%),
    radial-gradient(circle at 88% 18%,rgba(255,255,255,.10) 0 8%,transparent 8.5%),
    linear-gradient(135deg,var(--purple) 0%,var(--pink) 52%,var(--purple2) 100%);
  border:4px solid #fff;
  box-shadow:
    0 0 0 7px var(--purple),
    0 18px 55px rgba(87,21,72,.32);
}
.ffm-card:before{
  content:"";
  position:absolute;
  inset:-30%;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255,255,255,.055) 0 14px,
      transparent 14px 30px
    );
  transform:rotate(5deg);
  pointer-events:none;
}
.ffm-card:after{
  content:"●  ★  ●  ★  ●  ★  ●";
  position:absolute;
  left:-20px;
  right:-20px;
  bottom:7px;
  font-size:20px;
  letter-spacing:15px;
  color:rgba(255,255,255,.22);
  white-space:nowrap;
  transform:rotate(-2deg);
  pointer-events:none;
}
.ffm-card>*{position:relative;z-index:1}
.ffm-kicker{
  display:inline-block;
  background:#fff;
  color:var(--purple);
  padding:8px 14px;
  border:3px solid #fff;
  box-shadow:5px 5px 0 var(--ink);
  font-weight:1000;
  letter-spacing:.08em;
  font-size:13px;
  text-transform:uppercase;
  margin-bottom:16px;
  transform:rotate(-1deg);
}
.ffm-card h1,.ffm-card .ffm-title{
  color:var(--purple);
  font-size:clamp(38px,8vw,76px);
  line-height:.92;
  margin:12px 0 20px;
  text-transform:uppercase;
  text-shadow:4px 4px 0 var(--ink),7px 7px 0 rgba(255,255,255,.18);
}
.ffm-card h2{
  font-size:clamp(28px,5vw,45px);
  line-height:1;
  margin:16px 0;
  text-shadow:3px 3px 0 var(--ink);
}
.ffm-card h3{font-size:28px;margin:16px 0 8px;text-shadow:2px 2px 0 var(--ink)}
.ffm-lead{font-size:clamp(18px,3vw,23px);line-height:1.45;max-width:680px;margin:0 auto 26px}
.ffm-primary,.ffm-secondary,.ffm-choice{
  appearance:none;border:0;cursor:pointer;font-weight:1000;text-transform:uppercase;text-decoration:none!important;
  border-radius:14px;transition:transform .12s ease,filter .12s ease;display:inline-flex;align-items:center;justify-content:center
}
.ffm-primary:hover,.ffm-secondary:hover,.ffm-choice:hover{transform:translate(-2px,-2px) rotate(-.5deg);filter:brightness(1.04)}
.ffm-primary:focus-visible,.ffm-secondary:focus-visible,.ffm-choice:focus-visible,.ffm-hero-start:focus-visible{
  outline:4px solid #fff;outline-offset:4px
}
.ffm-primary{
  background:#fff;
  color:var(--purple);
  border:3px solid #fff;
  box-shadow:6px 6px 0 var(--ink);
  padding:18px 25px;
  font-size:18px;
  min-height:60px;
}
.ffm-secondary{
  background:var(--purple2);
  color:#fff;
  border:3px solid #fff;
  box-shadow:5px 5px 0 var(--ink);
  padding:14px 18px;
  font-size:15px;
}
.ffm-facebook{background:var(--pink)}
.ffm-listen{
  margin:6px auto 8px;
  background:rgba(87,21,72,.7);
  color:#fff;
}
.ffm-listen-label{margin:22px 0 8px}
.ffm-make-share{white-space:nowrap}
.ffm-small{font-size:13px;opacity:.9;margin-top:14px}
.ffm-topline{display:flex;justify-content:space-between;font-weight:900;font-size:13px;margin-bottom:8px}
.ffm-progress{
  height:13px;border:3px solid #fff;background:rgba(42,11,36,.35);overflow:hidden;margin-bottom:30px;
  box-shadow:4px 4px 0 var(--ink)
}
.ffm-progress i{
  display:block;height:100%;
  background:repeating-linear-gradient(
    90deg,
    #fff 0 28px,
    var(--pink) 28px 56px,
    var(--purple2) 56px 84px,
    #fff 84px 112px
  )
}
.ffm-versus{display:grid;grid-template-columns:1fr;gap:16px;align-items:center;margin-top:30px}
.ffm-choice{
  width:100%;min-height:108px;padding:20px;
  background:#fff;color:var(--purple);
  border:4px solid #fff;
  font-size:clamp(20px,4vw,31px);
  box-shadow:8px 8px 0 var(--ink);
}
.ffm-choice:nth-of-type(2){background:var(--purple2);color:#fff}
.ffm-vs{
  justify-self:center;
  background:var(--pink);
  color:#fff;
  width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:3px solid #fff;
  box-shadow:4px 4px 0 var(--ink);
  font-weight:1000;font-size:14px;
  transform:rotate(-8deg)
}
.ffm-score{
  font-size:clamp(118px,25vw,220px);
  font-weight:1000;line-height:.76;letter-spacing:-.07em;margin-top:34px;
  color:#fff;
  text-shadow:5px 5px 0 var(--ink),9px 9px 0 rgba(255,255,255,.15);
}
.ffm-score span{font-size:.42em;vertical-align:top;letter-spacing:-.02em;color:#fff}
.ffm-fout{
  display:inline-block;
  background:#fff;
  color:var(--purple);
  padding:5px 18px;
  border:3px solid #fff;
  box-shadow:5px 5px 0 var(--ink);
  font-size:clamp(36px,8vw,72px);
  font-weight:1000;letter-spacing:.08em;margin:12px 0 28px;
  transform:rotate(-2deg)
}
.ffm-divider{
  height:5px;
  background:repeating-linear-gradient(90deg,#fff 0 35px,var(--pink) 35px 70px,var(--purple2) 70px 105px);
  margin:32px 0;
  border:1px solid #fff
}
.ffm-name-row{display:flex;gap:12px;max-width:670px;margin:18px auto;align-items:stretch}
.ffm-name{
  flex:1;min-width:0;border:4px solid #fff;border-radius:12px;padding:16px 18px;font-size:18px;outline:0;
  box-shadow:5px 5px 0 var(--ink);color:var(--purple)
}
.ffm-link{background:none;border:0;color:#fff;text-decoration:underline;cursor:pointer;font-size:14px;margin-top:14px;font-weight:800}
.ffm-duel{
  margin:24px auto;padding:18px 20px;border:4px solid #fff;background:rgba(87,21,72,.55);
  max-width:580px;line-height:1.45;box-shadow:6px 6px 0 var(--ink);transform:rotate(.4deg)
}
.ffm-duel strong{font-size:23px;color:#fff}
.ffm-challenge-score{
  display:inline-block;font-size:86px;font-weight:1000;line-height:1;margin:12px 0 26px;
  color:#fff;text-shadow:4px 4px 0 var(--ink)
}
#ffm-share-canvas{
  width:100%;height:auto;border-radius:14px;display:block;margin:20px auto;
  border:4px solid #fff;box-shadow:8px 8px 0 var(--ink)
}
.ffm-share-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:20px}
.ffm-toast{
  position:fixed;left:50%;bottom:30px;transform:translate(-50%,20px);
  background:#fff;color:var(--purple);padding:13px 19px;border:3px solid #fff;
  box-shadow:5px 5px 0 var(--ink);z-index:99999;opacity:0;transition:.2s;font-weight:1000
}
.ffm-toast.show{opacity:1;transform:translate(-50%,0)}

/* Extra startknop in de bestaande FoutMeter-hero op foutfm.nl. */
.foutfm-fm-hero .ffm-hero-start{
  appearance:none;
  display:inline-flex!important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  margin:24px auto 4px;
  padding:17px 28px;
  min-height:66px;
  border:3px solid #fff!important;
  border-radius:14px;
  background:#fff!important;
  color:#571548!important;
  box-shadow:7px 7px 0 #2a0b24;
  cursor:pointer;
  font:1000 19px/1 Arial,Helvetica,sans-serif;
  text-transform:uppercase;
  text-decoration:none!important;
  transition:transform .12s ease,filter .12s ease;
}
.foutfm-fm-hero .ffm-hero-start:hover{
  transform:translate(-2px,-2px) rotate(-.5deg);
  filter:brightness(1.04)
}
.foutfm-fm-hero .ffm-hero-start small{
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
  text-transform:none;
  opacity:.78
}
@media(min-width:700px){
  .ffm-versus{grid-template-columns:1fr auto 1fr;gap:20px}
  .ffm-vs{font-size:16px}
}
@media(max-width:620px){
  .ffm-card{border-radius:22px;padding:30px 18px}
  .ffm-name-row{flex-direction:column}
  .ffm-secondary,.ffm-primary{width:100%}
  .ffm-share-actions{flex-direction:column}
  .ffm-card h1,.ffm-card .ffm-title{text-shadow:3px 3px 0 var(--ink),5px 5px 0 rgba(255,255,255,.18)}
  .foutfm-fm-hero .ffm-hero-start{width:100%;max-width:340px;padding:16px 18px}
}