:root{
  --radius: 14px;
  --shadow: 0 10px 24px rgba(0,0,0,0.12);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji;
  color: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  
  /* 🍪 Background image setup */
  background-image: url('cookie-bg.jpg');
  background-size: cover;       /* fills the screen */
  background-position: center;  /* keeps cookies centered */
  background-attachment: fixed; /* makes background stay while scrolling */
}
.container{
  width:min(720px, 92vw);
  background:#fff;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:24px 24px 28px;
}
header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
h1{font-size:clamp(20px,4vw,28px); margin:0}
.brand{
  display:flex; align-items:center; gap:10px;
}
.cookie{
  width:36px; height:36px; border-radius:50%;
  background:#f5d1a1; display:inline-block;
  position:relative; box-shadow: inset 0 6px 8px rgba(0,0,0,.08);
}
.fortune-card{
  margin-top:18px;
  padding:22px;
  border-radius:12px;
  border: 1px solid #eee;
  background: #fffdfa;
}
.fortune-text{
  font-size: clamp(20px, 3.2vw, 28px);
  line-height:1.35;
}
.controls{
  margin-top:18px; display:flex; flex-wrap:wrap; gap:10px;
}
button, .linklike{
  border:1px solid #ddd; background:#fff; border-radius:10px; padding:10px 14px;
  cursor:pointer; font-size:16px;
}
button:hover, .linklike:hover{ background:#f6f6f6 }
.meta{
  margin-top:14px; color:#666; font-size:14px;
}
footer{
  margin-top:22px; color:#888; font-size:13px;
}
.hidden{display:none}