/* fluffy tail's homepage - est. 2003, hand-written, no frameworks were harmed */
:root{
  --ink:#2a1a0e; --paper:#fff8ec; --fox:#e2762f; --fox-dark:#a8461a; --cream:#fff1d6;
  --link:#0000ee; --visited:#551a8b; --hot:#ff00aa; --lime:#33ff33;
}
*{box-sizing:border-box}
html{background:#3a1c0c}
body{min-height:100vh}
body{
  margin:0; color:var(--ink);
  font:16px/1.5 "Comic Sans MS","Comic Neue","Chalkboard SE",cursive,sans-serif;
  /* tiled background: paw prints and little stars, the GeoCities way */
  background-color:#3a1c0c;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cg fill='%23552a12'%3E%3Cellipse cx='18' cy='24' rx='7' ry='6'/%3E%3Ccircle cx='9' cy='14' r='3'/%3E%3Ccircle cx='15' cy='9' r='3'/%3E%3Ccircle cx='22' cy='9' r='3'/%3E%3Ccircle cx='28' cy='14' r='3'/%3E%3C/g%3E%3Cpath fill='%23ffcf5a' d='M48 40l2 5 5 .5-4 3.5 1.5 5-4.5-3-4.5 3 1.5-5-4-3.5 5-.5z' opacity='.55'/%3E%3C/svg%3E");
}
a{color:var(--link)} a:visited{color:var(--visited)} a:hover{color:var(--hot);background:#ffff66}
.page{max-width:860px;margin:20px auto;padding:0 16px}
.frame{background:var(--paper);border:4px ridge #d9a066;box-shadow:6px 6px 0 #000}

/* ---------- header ---------- */
.top{text-align:center;padding:18px 12px 6px;background:linear-gradient(#ffe7b8,var(--paper))}
.wordart{
  margin:0;font:bold clamp(30px,7vw,56px)/1.1 Impact,"Arial Black",sans-serif;letter-spacing:1px;
  background:linear-gradient(90deg,#ff3d00,#ff9100,#ffd600,#ff9100,#ff3d00);background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(3px 3px 0 #5a2200);animation:shimmer 3s linear infinite;
}
@keyframes shimmer{to{background-position:200% 0}}
.sub{margin:4px 0 0;font-style:italic;color:#7a3b12}
.sparkle{color:#ffb300}
marquee{display:block;background:#000;color:var(--lime);font:bold 15px/1.9 "Courier New",monospace;border-top:2px solid #ffb300;border-bottom:2px solid #ffb300}

/* ---------- layout ---------- */
.cols{display:flex;gap:0;flex-wrap:wrap}
.side{flex:0 0 200px;padding:14px 12px;background:#ffe0b0;border-right:3px double #d9a066}
.main{flex:1 1 380px;padding:14px 18px;min-width:0}
.side h3,.box h2{margin:0 0 6px;font:bold 14px/1.3 Verdana,sans-serif;color:#fff;background:linear-gradient(90deg,var(--fox-dark),var(--fox));padding:3px 8px}
.side ul{list-style:none;margin:0 0 16px;padding:0}
.side li{padding:2px 0}
.side li::before{content:"🦊 ";font-size:12px}
.box{border:2px outset #e8c69a;background:#fffdf6;margin:0 0 16px;padding:0 0 10px}
.box>*:not(h2){margin-left:10px;margin-right:10px}
.box p{margin-top:8px;margin-bottom:8px}

/* ---------- under construction ---------- */
.uc{display:flex;align-items:center;gap:10px;justify-content:center;margin:10px 0 14px}
.uc svg{flex:0 0 auto}
.blink{animation:blink 1s steps(2,start) infinite}
@keyframes blink{to{visibility:hidden}}
.new{color:#fff;background:red;font:bold 11px Verdana,sans-serif;padding:0 4px;margin-left:4px;vertical-align:2px}

/* ---------- the tail ---------- */
.tailbox{text-align:center}
.tailstage{position:relative;display:inline-block;padding:14px 10px 0;margin-top:6px;border-radius:50%;background:radial-gradient(closest-side,#ffd3a0,#ffe9cc 62%,transparent);user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;outline:none}
.tailstage:focus-visible{box-shadow:0 0 0 3px #00f}
.tail{width:min(290px,72vw);height:auto;display:block;overflow:visible;touch-action:none;cursor:grab}
.tail.grab{cursor:grabbing}
.tail .shape{filter:drop-shadow(0 3px 3px rgba(110,45,10,.28))}
.fur,.heart{position:absolute;left:var(--x);top:var(--y);pointer-events:none;animation:fly 1.1s ease-out forwards}
.fur{width:9px;height:4px;border-radius:50%;background:var(--c)}
.heart{font:bold var(--s,16px)/1 Verdana,sans-serif;color:var(--c);margin:-8px 0 0 -6px;animation-duration:1.3s}
@keyframes fly{to{transform:translate(var(--dx),var(--dy)) rotate(var(--r));opacity:0}}
.bubble{position:absolute;top:-6px;left:50%;z-index:2;transform:translate(-50%,6px) scale(.85);opacity:0;pointer-events:none;
  background:#fff;border:2px solid #000;border-radius:14px;padding:3px 12px;font:bold 14px/1.4 "Comic Sans MS","Comic Neue",cursive,sans-serif;white-space:nowrap;transition:opacity .2s,transform .2s}
.bubble::after{content:"";position:absolute;left:46%;bottom:-9px;border:8px solid transparent;border-top-color:#000;border-bottom:0}
.bubble.on{opacity:1;transform:translate(-50%,0) scale(1)}
.hint{font-size:13px;color:#8a5a2a;margin:4px 0 8px}
.box>.meter{width:min(300px,90%);margin:6px auto 4px;height:18px;border:2px inset #c99;background:#fff;position:relative}
.meter i{display:block;height:100%;width:0;background:repeating-linear-gradient(45deg,#ff6fa4 0 8px,#ff9cc2 8px 16px);transition:width .25s}
.meter b{position:absolute;inset:0;font:bold 11px/14px Verdana,sans-serif;color:#000}
.pets{font:bold 13px Verdana,sans-serif}
.award{display:none;margin:8px auto 0;max-width:300px;padding:6px;border:3px double gold;background:#fffbd0;font-weight:bold}
.award.on{display:block;animation:pop .4s ease-out}
@keyframes pop{from{transform:scale(.4)}to{transform:scale(1)}}

/* ---------- counter, buttons, webring ---------- */
.counter{display:inline-flex;gap:2px;padding:3px;background:#111;border:2px inset #777;vertical-align:middle}
.counter span{display:inline-block;width:15px;text-align:center;font:bold 16px/22px "Courier New",monospace;color:#39ff14;background:linear-gradient(#222 0 50%,#000 50%)}
.badges{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:12px 0}
.b88{width:88px;height:31px;display:flex;align-items:center;justify-content:center;text-align:center;font:bold 9px/1.05 Verdana,sans-serif;border:1px solid #000;box-shadow:inset 1px 1px 0 rgba(255,255,255,.5),inset -1px -1px 0 rgba(0,0,0,.4);padding:2px}
.webring{text-align:center;border:2px dashed var(--fox);padding:8px;margin:12px 0;background:#fff3e0;font:13px Verdana,sans-serif}
.webring b{color:var(--fox-dark)}
.foot{text-align:center;font:11px/1.6 Verdana,sans-serif;color:#7a5a3a;padding:10px;border-top:3px double #d9a066}
hr.rainbow{border:0;height:4px;background:linear-gradient(90deg,red,orange,yellow,lime,cyan,blue,violet);margin:14px 0}

/* ---------- note pages ---------- */
.note{padding:14px 22px 20px}
.note h1{font:bold 28px/1.2 Georgia,serif;color:var(--fox-dark);margin:.3em 0 .6em}
.note .meta{font:12px Verdana,sans-serif;color:#8a5a2a}

@media (max-width:620px){
  .side{flex:1 1 100%;border-right:0;border-bottom:3px double #d9a066}
  .side ul{display:flex;flex-wrap:wrap;gap:4px 14px}
  .main{padding:12px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important}
}

/* ---------- 404 ---------- */
.lost{text-align:center;padding:24px 22px 30px}
.lost h1{font:bold 30px/1.2 Georgia,serif;color:var(--fox-dark);margin:.2em 0 .5em}
.sadtail{width:120px;height:auto;transform-origin:50% 0;animation:droop 4s ease-in-out infinite}
@keyframes droop{0%,100%{transform:rotate(2deg)}50%{transform:rotate(-2deg)}}

/* ---------- shrine ---------- */
.torii{display:block;width:min(220px,60vw);margin:6px auto 0}
.shrine .box p{font-size:16px}
.btn{font:bold 15px "Comic Sans MS","Comic Neue",cursive,sans-serif;color:#3a1a08;background:linear-gradient(#fff3d8,#ffd79a);border:2px outset #e0a860;padding:6px 14px;cursor:pointer;position:relative}
.btn:active{border-style:inset}
.btn:focus-visible{outline:3px solid #00f;outline-offset:2px}
.btn.small{font-size:13px;padding:4px 10px;margin-top:6px}
.kuji{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start;justify-content:center;margin:10px 0}
.kuji>.btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 16px}
.kujibox{width:54px;height:auto;transform-origin:50% 90%}
.kujibox.shake{animation:shake .15s ease-in-out 6 alternate}
@keyframes shake{from{transform:rotate(-14deg)}to{transform:rotate(14deg)}}
.paper{flex:1 1 240px;max-width:340px;background:#fffdf7;border:1px solid #c9b48a;box-shadow:3px 3px 0 rgba(0,0,0,.15);padding:10px 14px;
  background-image:repeating-linear-gradient(#fffdf7 0 27px,#f1e6cf 27px 28px)}
.paper.fresh{animation:unroll .45s ease-out}
@keyframes unroll{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
.paper.tied{animation:tied .7s ease-in forwards}
@keyframes tied{to{transform:translateY(-30px) rotate(8deg) scale(.6);opacity:.35}}
.rank{text-align:center;border-bottom:2px solid #b8321c;margin-bottom:6px;padding-bottom:4px}
.rank b{display:block;font:bold 44px/1.1 serif;color:#b8321c}
.paper.bad .rank b{color:#333}
.rank span{font:12px Verdana,sans-serif;color:#7a5a2a}
.paper ul{list-style:none;margin:0;padding:0;font-size:14px;line-height:28px}
.age{display:inline-block;width:22px;height:14px;border-radius:3px;vertical-align:-2px;background:linear-gradient(135deg,#f3c46a,#d99a32);box-shadow:inset 0 0 0 1px #a8701c}
.age.fly{position:absolute;left:12px;top:6px;animation:offer .9s ease-in forwards}
@keyframes offer{to{transform:translate(30px,-70px) rotate(200deg);opacity:0}}
.offered{font:13px Verdana,sans-serif}


/* ---------- notes list, what's new ---------- */
ul.notes li{margin:2px 0}
.when{font:12px Verdana,sans-serif;color:#8a5a2a}
ul.news{list-style:none;padding:0;font-size:14px}
ul.news li{padding:3px 0;border-bottom:1px dotted #e0c49a}
ul.news b{font:bold 12px Verdana,sans-serif;color:var(--fox-dark)}

/* ---------- fun.js: aburaage rain ---------- */
.age.rain{position:fixed;top:-20px;z-index:6;pointer-events:none;animation:agefall 2.4s linear forwards}
@keyframes agefall{to{transform:translateY(calc(100vh + 40px)) rotate(var(--r))}}

/* ---------- sleeping tail ---------- */
.zz{position:absolute;left:var(--x);top:var(--y);pointer-events:none;font:bold var(--s,14px)/1 "Comic Sans MS","Comic Neue",cursive,sans-serif;color:#4b3cb0;text-shadow:0 0 3px #fff;animation:fly 1.6s ease-out forwards}

/* ---------- easter egg: fox ears on every box ---------- */
html.ears .box{position:relative}
html.ears .box::before,html.ears .box::after{content:"";position:absolute;top:-30px;width:40px;height:32px;
  background:linear-gradient(#e2762f 0 55%,#ffd0dc 55%);clip-path:polygon(50% 0,100% 100%,0 100%);animation:earpop .4s ease-out}
html.ears .box::before{left:14px;transform:rotate(-12deg)}
html.ears .box::after{right:14px;transform:rotate(12deg)}
@keyframes earpop{from{transform:scale(0)}}