/* eat-a-fruit — all styling. Lifted from the original page; the
   only change is that it lives in a file instead of a <style>
   block, so the Content-Security-Policy needs no 'unsafe-inline'. */

* { box-sizing: border-box; }
body { margin: 0; font-family: 'Comic Neue', 'Comic Sans MS', system-ui, sans-serif;
       color: #4a3f55; background: #fffaf0; }

/* ---------- hero sky ---------- */
.hero { position: relative; height: 100vh; min-height: 560px; overflow: hidden;
        background: linear-gradient(#8ed3f7, #c9ecff 45%, #fdf3cf 90%); }
.sun { position: absolute; top: 30px; right: 6%; width: 200px; height: 200px; }
.sun .rays { position: absolute; inset: 0; border-radius: 50%;
             background: repeating-conic-gradient(rgba(255,214,64,.55) 0deg 9deg, transparent 9deg 24deg);
             -webkit-mask: radial-gradient(circle, transparent 36%, #000 37%, #000 66%, transparent 67%);
             mask: radial-gradient(circle, transparent 36%, #000 37%, #000 66%, transparent 67%);
             animation: spin 60s linear infinite; }
.sun .core { position: absolute; inset: 25%; border-radius: 50%;
             background: radial-gradient(circle at 35% 32%, #fff7c4, #ffd23f 65%, #ffb52e);
             box-shadow: 0 0 60px 22px rgba(255,214,80,.55);
             animation: glow 4s ease-in-out infinite alternate; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes glow { to { box-shadow: 0 0 90px 34px rgba(255,214,80,.75); } }

.cloud { position: absolute; --s: 1; transform: scale(var(--s));
         animation: drift-cloud var(--t) linear infinite; }
.cloud b { position: absolute; background: #fff; border-radius: 50%;
           box-shadow: 0 6px 14px rgba(120,160,200,.25); }
.cloud b:nth-child(1) { width: 70px;  height: 70px; left: 22px; top: -34px; }
.cloud b:nth-child(2) { width: 52px;  height: 52px; left: 68px; top: -22px; }
.cloud b:nth-child(3) { width: 44px;  height: 44px; left: 0;    top: -16px; }
.cloud b:nth-child(4) { width: 120px; height: 44px; left: 0;    top: -10px; border-radius: 999px; }
.c1 { top: 12%; --t: 70s;  --s: 1;   opacity: .95; }
.c2 { top: 26%; --t: 95s;  --s: .65; opacity: .8;  animation-delay: -30s; }
.c3 { top: 6%;  --t: 120s; --s: .5;  opacity: .6;  animation-delay: -60s; }
.c4 { top: 38%; --t: 85s;  --s: .8;  opacity: .7;  animation-delay: -70s; }
@keyframes drift-cloud { from { left: -180px; } to { left: 105%; } }

.hill  { position: absolute; bottom: -55px; left: -10%; width: 120%; height: 150px;
         background: linear-gradient(#a8dd7c, #8ccc5b); border-radius: 50% 50% 0 0; opacity: .8; }
.grass { position: absolute; bottom: -40px; left: -5%; width: 110%; height: 110px;
         background: linear-gradient(#93d463, #6fbf44); border-radius: 50% 50% 0 0; }
.flower { position: absolute; bottom: 26px; z-index: 1; font-size: 26px;
          animation: sway 3.4s ease-in-out infinite alternate; transform-origin: bottom center; }
@keyframes sway { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
.butterfly { position: absolute; font-size: 26px; z-index: 1; animation: fly 26s ease-in-out infinite; }
@keyframes fly {
  0%   { left: 8%;  top: 55%; }  20% { left: 28%; top: 34%; }
  40%  { left: 55%; top: 60%; }  60% { left: 74%; top: 30%; }
  80%  { left: 40%; top: 46%; }  100%{ left: 8%;  top: 55%; }
}

/* ---------- floating fruits ---------- */
.fruit { --s: clamp(28px, 8vw, 46px); position: absolute; left: 0; top: 0; border: none;
         background: none; padding: 0; cursor: pointer; text-align: center; z-index: 1;
         pointer-events: none; -webkit-tap-highlight-color: transparent;
         animation: bounce-x var(--xdur) linear infinite alternate;
         animation-delay: var(--xdel); }
body.picking .fruit { pointer-events: auto; }
@keyframes bounce-x { from { transform: translateX(6px); }
                      to   { transform: translateX(calc(100vw - var(--s) - 40px)); } }
@keyframes bounce-y { from { transform: translateY(8px); }
                      to   { transform: translateY(calc(100vh - var(--s) - 180px)); } }
.fruit .mover { display: block; animation: bounce-y var(--ydur) linear infinite alternate;
                animation-delay: var(--ydel); }
.fruit .e, .fruit img, .fruit .chip { transition: transform .25s, opacity .3s; }
.fruit:hover .e, .fruit:hover img, .fruit:hover .chip { transform: scale(1.2); }
.fruit.eaten .e, .fruit.eaten img, .fruit.eaten .chip { transform: scale(2.3) rotate(20deg); opacity: 0; }
.fruit.eaten .n { opacity: 0; }
.fruit .e { display: flex; align-items: center; justify-content: center;
            width: var(--s); height: var(--s); font-size: calc(var(--s) * .88); line-height: 1;
            filter: drop-shadow(0 4px 5px rgba(0,0,0,.18)); }
.fruit img { display: block; width: calc(var(--s) * 1.28); height: calc(var(--s) * 1.28);
             margin: 0 auto -4px; filter: drop-shadow(0 4px 5px rgba(0,0,0,.18)); }
.fruit .chip { display: flex; align-items: center; justify-content: center; margin: 0 auto;
               width: var(--s); height: var(--s); border-radius: 50%; color: #fff; font-weight: 800;
               font-size: calc(var(--s) * .48);
               box-shadow: inset -5px -7px 0 rgba(0,0,0,.16), 0 4px 6px rgba(0,0,0,.15); }
.fruit .n { display: inline-block; margin-top: 4px; font-size: clamp(.58rem, 2.2vw, .74rem);
            font-weight: 700; background: rgba(255,255,255,.92); padding: 1px 9px;
            border-radius: 999px; box-shadow: 0 1px 3px rgba(0,0,0,.15); white-space: nowrap; }

/* ---------- question card ---------- */
.card { position: relative; z-index: 2; max-width: 440px; width: calc(100% - 2rem);
        margin: 0 auto; top: 50%; transform: translateY(-58%); background: #fff;
        border-radius: 28px; padding: 2.2rem 1.8rem; text-align: center;
        box-shadow: 0 16px 45px rgba(70,60,120,.18); }
.card h1 { font-size: 2rem; font-weight: 800; margin: 0 0 .2rem; }
.card p.q { font-size: 1.25rem; margin: 0 0 1.3rem; }
.btn { font-family: inherit; font-size: 1.15rem; font-weight: 700; padding: .65rem 1.9rem;
       border: none; border-radius: 999px; cursor: pointer; margin: 0 .3rem;
       transition: transform .12s; }
.btn:active { transform: scale(.93); }
.btn-yes { background: #5cc96a; color: #fff; box-shadow: 0 4px 0 #43a552; }
.btn-no  { background: #ffe9b3; color: #a5701d; box-shadow: 0 4px 0 #e8c477; }
.nudge { min-height: 1.4rem; margin: 1rem 0 0; color: #8a8098; font-weight: 600; }
.hidden { display: none; }
.big { font-size: 3.4rem; line-height: 1; margin-bottom: .4rem; }
.big .chip { display: inline-flex; align-items: center; justify-content: center;
             width: 64px; height: 64px; border-radius: 50%; color: #fff; font-size: 30px;
             font-weight: 800; box-shadow: inset -5px -7px 0 rgba(0,0,0,.16); }
.big img { width: 64px; height: 64px; }
.scroll-hint { position: absolute; z-index: 2; bottom: 18px; left: 50%;
               transform: translateX(-50%); color: #3e7d2c; font-weight: 700;
               text-decoration: none; font-size: 1rem; animation: hop 1.6s ease-in-out infinite; }
@keyframes hop { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -7px); } }

/* ---------- stats ---------- */
.stats { max-width: 880px; margin: 0 auto; padding: 3.2rem 1.2rem 3rem; }
.stats h2 { text-align: center; font-size: 1.9rem; font-weight: 800; margin: 0 0 1.6rem; }
.stats h3 { font-size: 1.2rem; margin: 2.4rem 0 .8rem; }
.headline { text-align: center; font-size: 1.3rem; font-weight: 700; margin: -.8rem 0 1.5rem; }
.bignums { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }
.num-card { background: #fff; border-radius: 22px; padding: 1.1rem 1.6rem; min-width: 140px;
            text-align: center; box-shadow: 0 8px 22px rgba(70,60,120,.09); }
.num-card b { display: block; font-size: 2.1rem; color: #ec8a3c; }
.bar-row { display: flex; align-items: center; gap: .7rem; margin: .5rem 0; }
.bar-row .lbl { width: 150px; font-weight: 700; text-align: right; }
.bar { height: 24px; border-radius: 999px; min-width: 24px;
       background: linear-gradient(90deg, #ffb347, #ff8c69);
       box-shadow: inset 0 -4px 0 rgba(0,0,0,.08); }
.bar.green { background: linear-gradient(90deg, #8fd460, #5cb85c); }
.bar-row .cnt { font-weight: 800; color: #ec8a3c; }
.week { display: flex; align-items: flex-end; gap: 10px; height: 130px; padding: 0 .5rem; }
.week .col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
             justify-content: flex-end; }
.week .stick { width: 100%; max-width: 46px; border-radius: 10px 10px 4px 4px;
               background: linear-gradient(#ffb347, #ff8c69);
               box-shadow: inset 0 -4px 0 rgba(0,0,0,.08); }
.week small { font-weight: 700; color: #8a8098; }
.week .cnt { font-weight: 800; color: #ec8a3c; font-size: .85rem; }
.pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.pill { background: #e8f6dd; color: #3e7d2c; font-weight: 700; padding: .35rem .9rem;
        border-radius: 999px; }
.pill.orange { background: #ffedd6; color: #b96a1f; }
.favs { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .7rem; }
.fav { background: #fff; border-radius: 16px; padding: .7rem .9rem;
       box-shadow: 0 5px 15px rgba(70,60,120,.08); display: flex; align-items: center;
       gap: .6rem; font-weight: 700; }
.fav .flag { font-size: 1.5rem; }
.empty { text-align: center; color: #8a8098; font-weight: 600; margin-top: 2rem; }
footer { text-align: center; padding: 0 1rem 2rem; color: #b0a8bd; font-weight: 600; }
footer a { color: #8a8098; }

/* Small fruit picture used inside stats labels, pills and the
   favourite cards — sized to sit on the text baseline like an
   emoji would. */
.ico { width: 1.15em; height: 1.15em; vertical-align: -.2em; margin-right: .3em; }
.fav .flag .ico { width: 1.5rem; height: 1.5rem; margin: 0; vertical-align: middle; }

/* ---------- the "why this exists" section ---------- */
.about { max-width: 680px; margin: 0 auto; padding: 3.5rem 1.2rem 1rem; }
.about h2 { font-size: 1.7rem; font-weight: 800; margin: 0 0 1.2rem; text-align: center; }
.about p { font-size: 1.08rem; line-height: 1.65; margin: 0 0 1.1rem; }
.about .about-note { background: #fff; border-radius: 18px; padding: 1rem 1.3rem;
                     box-shadow: 0 6px 18px rgba(70,60,120,.08); font-weight: 700;
                     text-align: center; font-size: 1rem; }
.about .about-note a { color: #3e7d2c; }
.about h3 { font-size: 1.15rem; margin: 2rem 0 .6rem; }
.about ul { padding-left: 1.2rem; }
.about li { font-size: 1.05rem; line-height: 1.6; margin-bottom: .4rem; }