/* Joke Patterns - vanilla CSS, no frameworks */
:root{
  --bg:#f8f5ef;
  --card:#fffdfb;
  --ink:#111742;
  --muted:#5d6478;
  --purple:#5a43d6;
  --purple-2:#8e7cff;
  --teal:#16b7b2;
  --teal-dark:#0f8f8b;
  --coral:#ff6f61;
  --coral-dark:#df5148;
  --gold:#f6a91f;
  --green:#72b047;
  --line:#ddd7cf;
  --soft:#f4efe7;
  --shadow:0 8px 20px rgba(31, 26, 79, 0.08);
  --shadow-hover:0 18px 34px rgba(31, 26, 79, 0.16);
  --radius:28px;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  font-family: Arial, Helvetica, sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 0% 0%, #dacbf9 0 80px, transparent 81px),
    radial-gradient(circle at 100% 0%, #f7ddd6 0 70px, transparent 71px),
    radial-gradient(circle at 0% 100%, #bfe7ed 0 85px, transparent 86px),
    var(--bg);
}

a{color:inherit}

.wrap{
  max-width:1680px;
  margin:0 auto;
  padding:28px 34px 34px;
  position:relative;
  overflow:hidden;
  min-height:100vh;
}

/* Decorative background */
.doodle,
.dots,
.squiggle,
.star,
.laugh-emoji{
  position:absolute;
  pointer-events:none;
  user-select:none;
}

.haha{
  top:48px;
  left:85px;
  color:#9d87e7;
  font-size:32px;
  line-height:.95;
  transform:rotate(-8deg);
  font-weight:700;
  opacity:.9;
}

.dots.left{
  left:12px;
  top:320px;
  width:58px;
  height:150px;
  background-image:radial-gradient(#8d7bf0 2px, transparent 2px);
  background-size:14px 14px;
  opacity:.55;
}

.dots.right{
  right:8px;
  top:245px;
  width:62px;
  height:105px;
  background-image:radial-gradient(#8d7bf0 2px, transparent 2px);
  background-size:14px 14px;
  opacity:.55;
}

.dots.right-bottom{
  right:18px;
  bottom:140px;
  width:72px;
  height:105px;
  background-image:radial-gradient(#ff8d83 2.5px, transparent 2.5px);
  background-size:18px 18px;
  opacity:.7;
}

.squiggle.top-left{
  top:58px;
  left:210px;
  color:var(--coral);
  font-size:52px;
  transform:rotate(-14deg);
}

.squiggle.bottom-left{
  bottom:36px;
  left:30px;
  color:#57b8c8;
  font-size:48px;
  transform:rotate(10deg);
}

.squiggle.bottom-right{
  bottom:32px;
  right:58px;
  color:#ff8d83;
  font-size:44px;
  transform:rotate(-8deg);
}

.star{
  font-size:38px;
  color:var(--gold);
  font-weight:700;
}

.star.one{top:86px;left:350px}
.star.two{top:85px;right:245px}

.laugh-emoji{
  top:52px;
  right:100px;
  font-size:70px;
  line-height:1;
  transform:rotate(45deg);
  filter:drop-shadow(0 6px 10px rgba(31,26,79,.12));
}

/* Header */
.hero{
  text-align:center;
  margin-bottom:18px;
  position:relative;
}

.hero h1{
  margin:0;
  font-size:clamp(48px, 7vw, 110px);
  line-height:.95;
  letter-spacing:-2px;
  color:var(--ink);
  font-weight:900;
}

.hero .subtitle{
  margin-top:10px;
  display:inline-flex;
  align-items:center;
  gap:18px;
  color:var(--purple);
  font-size:clamp(24px, 2.2vw, 33px);
  font-weight:700;
}

.hero .subtitle::before,
.hero .subtitle::after{
  content:"✦";
  color:var(--purple);
  font-size:24px;
}

.hero .burst-left,
.hero .burst-right{
  position:absolute;
  top:15px;
  width:46px;
  height:46px;
}

.hero .burst-left{left:345px}
.hero .burst-right{right:345px}

.hero .burst-left::before,
.hero .burst-left::after,
.hero .burst-right::before,
.hero .burst-right::after{
  content:"";
  position:absolute;
  background:var(--coral);
  border-radius:99px;
}

.hero .burst-left::before,
.hero .burst-right::before{
  width:8px;
  height:32px;
  left:18px;
  top:7px;
  transform:rotate(70deg);
}

.hero .burst-left::after,
.hero .burst-right::after{
  width:8px;
  height:32px;
  left:18px;
  top:7px;
  transform:rotate(-70deg);
}

/* Card grid */
.grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:18px 24px;
  margin-top:14px;
}

.card-link{
  display:block;
  text-decoration:none;
  border-radius:30px;
  outline:none;
}

.card{
  background:var(--card);
  border:2px solid var(--line);
  border-radius:30px;
  box-shadow:var(--shadow);
  min-height:220px;
  padding:18px 20px 16px;
  position:relative;
  overflow:hidden;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background .18s ease;
}

.card-link:hover .card,
.card-link:focus-visible .card{
  transform:translateY(-6px);
  box-shadow:var(--shadow-hover);
  border-color:#b9adeb;
  background:#fff;
}

.card-link:focus-visible{
  box-shadow:0 0 0 5px rgba(90,67,214,.24);
}

.card::after{
  content:"";
  position:absolute;
  inset:auto 18px 12px auto;
  width:34px;
  height:34px;
  border-radius:50%;
  background:var(--purple);
  color:#fff;
  opacity:0;
  transform:translateY(8px);
  transition:.18s ease;
}

.card-link:hover .card::after,
.card-link:focus-visible .card::after{
  opacity:1;
  transform:translateY(0);
}

.card::before{
  content:"›";
  position:absolute;
  right:28px;
  bottom:15px;
  color:#fff;
  font-size:28px;
  font-weight:900;
  z-index:2;
  opacity:0;
  transform:translateY(8px);
  transition:.18s ease;
}

.card-link:hover .card::before,
.card-link:focus-visible .card::before{
  opacity:1;
  transform:translateY(0);
}

.head{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:12px;
}

.num{
  width:58px;
  height:58px;
  border-radius:50%;
  background:var(--purple);
  color:#fff;
  font-size:24px;
  font-weight:900;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  box-shadow:inset 0 -6px 0 rgba(0,0,0,.12);
}

.title{
  font-size:clamp(24px, 2vw, 33px);
  line-height:1.05;
  font-weight:900;
  letter-spacing:-.5px;
  color:var(--ink);
}

.art{
  height:124px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  border-radius:20px;
}

/* Illustrations */
.stack{
  display:flex;
  align-items:flex-end;
  gap:12px;
}

.cube{
  width:74px;
  border-radius:16px;
  background:linear-gradient(180deg, #7a5ff0, #4c2fc0);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:30px;
  font-weight:900;
  box-shadow:inset 0 -8px 0 rgba(0,0,0,.15), 0 10px 16px rgba(50,34,112,.15);
}

.cube.c1{height:66px}
.cube.c2{height:88px}
.cube.c3{height:108px}

/* Fixed #2 arrows: thinner lines, larger heads */
.arrows{
  position:relative;
  width:250px;
  height:110px;
}

.arrow{
  position:absolute;
  left:26px;
  right:46px;
  height:18px;
  border-radius:999px;
  background:currentColor;
}

.arrow::after{
  content:"";
  position:absolute;
  right:-32px;
  top:50%;
  transform:translateY(-50%);
  width:0;
  height:0;
  border-top:26px solid transparent;
  border-bottom:26px solid transparent;
  border-left:42px solid currentColor;
}

.arrow.teal{
  color:var(--teal);
  top:24px;
  transform:skewX(-12deg);
}

.arrow.coral{
  color:var(--coral);
  bottom:24px;
  transform:skewX(12deg) rotate(180deg);
}

.penguin-wrap{
  display:flex;
  align-items:flex-end;
  gap:20px;
  font-size:84px;
}

.penguin-wrap .fridge{font-size:94px}

.note{
  background:#fffaf1;
  border:2px solid #e5dfd4;
  border-radius:14px;
  padding:16px 22px;
  min-width:220px;
  transform:rotate(-2deg);
  box-shadow:0 6px 12px rgba(0,0,0,.06);
  text-align:center;
  font-size:21px;
  line-height:1.4;
  color:#242424;
  position:relative;
}

.note::before{
  content:"";
  width:40px;
  height:14px;
  background:#89b853;
  border-radius:3px;
  position:absolute;
  top:-10px;
  left:50%;
  transform:translateX(-50%) rotate(-2deg);
}

.podium{
  position:relative;
  display:flex;
  align-items:flex-end;
  gap:10px;
  padding-top:25px;
}

.step{
  background:linear-gradient(180deg, #9097a1, #6c7480);
  border:2px solid #454c57;
  border-radius:10px 10px 0 0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight:900;
  width:64px;
}

.step.left,
.step.right{height:48px}

.step.center{
  height:86px;
  width:92px;
  background:linear-gradient(180deg, #ffc84b, #f4a519);
  border-color:#af7411;
  color:#fff;
  font-size:30px;
}

.podium .person{
  position:absolute;
  top:-3px;
  left:50%;
  transform:translateX(-50%);
  font-size:48px;
}

.podium .small-left,
.podium .small-right{
  position:absolute;
  bottom:28px;
  font-size:34px;
  opacity:.8;
}

.podium .small-left{left:-6px}
.podium .small-right{right:-6px}

/* Fixed #6: no cutoff, no weird overlay. Chain is moved behind/between bubbles. */
.speech-pair{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  padding:0 16px;
}

.bubble{
  position:relative;
  min-width:110px;
  padding:19px 12px;
  border-radius:999px;
  color:#fff;
  text-align:center;
  font-size:21px;
  font-weight:800;
  line-height:1.15;
  box-shadow:inset 0 -8px 0 rgba(0,0,0,.12);
  z-index:2;
}

.bubble::after{
  content:none;
}

.bubble.blue{background:#4678e8}
.bubble.pink{background:#f17f8e}

.chain{
  width:46px;
  height:16px;
  position:relative;
  flex:0 0 46px;
}

.chain::before,
.chain::after{
  content:"";
  position:absolute;
  top:0;
  width:25px;
  height:16px;
  border:4px solid #7c7f8d;
  border-radius:999px;
  background:transparent;
}

.chain::before{
  left:0;
  transform:rotate(-18deg);
}

.chain::after{
  right:0;
  transform:rotate(-18deg);
}

.slap{
  font-size:82px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  width:100%;
  padding:0 20px;
}

.recognition{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-size:82px;
}

.compare{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  font-size:74px;
  width:100%;
  padding:0 22px;
}

.vs{
  width:66px;
  height:66px;
  border-radius:50%;
  background:#0c1d69;
  color:#fff;
  display:grid;
  place-items:center;
  font-size:24px;
  font-weight:900;
  flex:0 0 auto;
}

.irony{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  width:100%;
}

.mini{
  border:3px solid #c9d6e5;
  border-radius:18px;
  padding:8px;
  background:#fff;
  text-align:center;
}

.mini .label{
  font-size:14px;
  font-weight:900;
  letter-spacing:.5px;
  margin-bottom:6px;
}

.mini .icon{
  font-size:62px;
  line-height:1;
}

.mini.dark{border-color:#cfc7c0}

.retaliation{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  font-size:68px;
  width:100%;
  padding:0 22px;
}

.double{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  width:100%;
  padding:0 18px;
}

.talk{
  position:relative;
  background:#fff;
  border:3px solid #d7d7da;
  border-radius:999px;
  padding:18px 20px;
  font-size:22px;
  line-height:1.15;
  color:#222;
  max-width:170px;
  flex:0 1 auto;
}

.talk::after{
  content:"";
  position:absolute;
  left:26px;
  bottom:-12px;
  width:18px;
  height:18px;
  background:#fff;
  border-right:3px solid #d7d7da;
  border-bottom:3px solid #d7d7da;
  transform:rotate(45deg);
}

.gift{
  font-size:78px;
  flex:0 0 auto;
}

/* Footer pill */
.footer-pill{
  margin:24px auto 0;
  max-width:760px;
  background:#f6f3fa;
  border:2px solid var(--line);
  border-radius:999px;
  box-shadow:var(--shadow);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:18px 22px;
  color:var(--ink);
  font-size:clamp(18px, 1.8vw, 26px);
  font-weight:700;
}

.footer-pill .left{
  display:flex;
  align-items:center;
  gap:16px;
  margin:0 auto;
}

.footer-pill .accent{color:var(--purple)}
.footer-pill .star-icon{color:var(--purple);font-size:28px}

.footer-pill .go{
  width:38px;
  height:38px;
  border-radius:50%;
  background:var(--purple);
  color:#fff;
  display:grid;
  place-items:center;
  font-weight:900;
  flex:0 0 auto;
}

/* Detail page */
.detail-wrap{
  max-width:1180px;
  margin:0 auto;
  padding:36px 24px 60px;
}

.back-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  color:var(--purple);
  font-weight:800;
  margin-bottom:22px;
}

.detail-hero{
  background:rgba(255,255,255,.72);
  border:2px solid var(--line);
  border-radius:36px;
  padding:38px;
  box-shadow:var(--shadow);
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:28px;
  align-items:center;
}

.detail-hero h1{
  font-size:clamp(42px, 6vw, 82px);
  line-height:.95;
  margin:0 0 16px;
  letter-spacing:-1.8px;
}

.detail-hero p{
  font-size:22px;
  line-height:1.55;
  color:var(--muted);
  margin:0;
}

.detail-icon{
  min-height:260px;
  border-radius:28px;
  background:
    radial-gradient(circle at 20% 20%, rgba(90,67,214,.18), transparent 34%),
    radial-gradient(circle at 80% 70%, rgba(22,183,178,.17), transparent 38%),
    #fffdfb;
  display:grid;
  place-items:center;
  font-size:110px;
  border:2px solid #ece5db;
}

.detail-grid{
  display:block;
  margin-top:24px;
}

.examples-panel{
  background:linear-gradient(135deg, #1746a2, #2368d8);
  border:2px solid #5f8fed;
  border-radius:28px;
  box-shadow:var(--shadow-hover);
  padding:28px;
  color:#fff;
}

.examples-panel h2{
  margin:0 0 18px;
  font-size:34px;
  color:#fff;
}

.examples-columns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:34px;
  align-items:start;
}

.examples-col{
  display:grid;
  gap:14px;
}

.example-quote{
  margin:0;
  padding:17px 18px;
  border-radius:18px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.24);
  color:#fff;
  font-size:19px;
  line-height:1.42;
  position:relative;
}

.example-quote::before{
  content:"“";
  font-size:42px;
  line-height:0;
  opacity:.45;
  margin-right:4px;
  vertical-align:-16px;
}

.example-quote::after{
  content:"”";
  font-size:30px;
  opacity:.35;
  margin-left:2px;
}

.example-quote strong{
  color:#fff4a3;
  font-weight:900;
}

.try-box{
  margin-top:24px;
  background:#fffdfb;
  border:2px solid var(--line);
  border-radius:28px;
  box-shadow:var(--shadow);
  padding:28px;
}

.try-box h2{
  font-size:34px;
  margin:0 0 12px;
}

.prompt-card{
  display:grid;
  grid-template-columns:1fr auto;
  gap:16px;
  align-items:center;
  background:#f8f5ef;
  border:2px dashed #c8bee8;
  border-radius:22px;
  padding:20px;
  margin-top:18px;
}

.prompt-text{
  color:var(--ink);
  font-size:19px;
  line-height:1.5;
}

.copy-btn,
.generate-btn{
  border:0;
  border-radius:999px;
  background:var(--purple);
  color:#fff;
  font-size:17px;
  font-weight:900;
  padding:14px 20px;
  cursor:pointer;
  box-shadow:0 8px 16px rgba(90,67,214,.2);
}

.copy-btn:hover,
.generate-btn:hover{
  background:#4934bd;
}

.input-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  margin-top:18px;
}

.input-row input{
  min-height:54px;
  border:2px solid #ded8cf;
  border-radius:999px;
  padding:0 20px;
  font-size:18px;
  color:var(--ink);
  background:#fff;
}

.output{
  min-height:76px;
  margin-top:16px;
  background:#f8f5ef;
  border:2px solid #e6ded4;
  border-radius:20px;
  padding:18px;
  color:var(--ink);
  font-size:19px;
  line-height:1.5;
}

@media (max-width:1200px){
  .grid{grid-template-columns:repeat(2, 1fr)}
  .hero .burst-left{left:120px}
  .hero .burst-right{right:120px}
}

@media (max-width:760px){
  .wrap{padding:20px 16px 28px}
  .grid{grid-template-columns:1fr;gap:16px}
  .card{min-height:auto}
  .art{height:auto;min-height:120px;padding-bottom:8px}
  .footer-pill{
    padding:16px 18px;
    border-radius:30px;
  }
  .footer-pill .left{
    flex-wrap:wrap;
    justify-content:center;
    text-align:center;
  }
  .haha,
  .dots,
  .star,
  .laugh-emoji,
  .squiggle{display:none}
  .hero .burst-left{left:8px;top:8px}
  .hero .burst-right{right:8px;top:8px}
  .detail-hero{
    grid-template-columns:1fr;
  }
  .examples-columns{
    grid-template-columns:1fr;
  }
  .detail-hero{padding:26px}
  .prompt-card,
  .input-row{
    grid-template-columns:1fr;
  }
  .detail-icon{min-height:180px;font-size:82px}
}

.generate-btn:disabled{
  opacity:.72;
  cursor:not-allowed;
}

.generated-list{
  margin:0;
  padding-left:28px;
  display:grid;
  gap:12px;
}

.generated-list li{
  padding-left:4px;
}

.loading-output{
  color:var(--muted);
  font-weight:800;
}

.error-output{
  border-color:#f0b4ad;
  background:#fff4f2;
  color:#9b241d;
  font-weight:800;
}