/* Funkyclaws — brand + shared layout.
   Night-at-the-carnival: deep plum ground, fez red, brass gold, cream. */
:root{
  /* swamp night at the Voodoo Cafe: teal-black ground, tiki-torch orange, bone,
     turquoise, and the voodoo purple + lime of the piano graffiti */
  --bg:#0a1517; --bg2:#0f2126; --panel:#122529; --panel2:#1a343a; --line:rgba(244,236,216,.10);
  --ink:#f4ecd8; --mut:#b5c7c2; --dim:#768e89;
  --fez:#ff6a2a; --fez2:#c2410c; --brass:#f5b82e; --brass2:#ffd66b; --cream:#f4ecd8;
  --voodoo:#c26be0; --lime:#a4e05a; --torch:#ff8a2a;
  --rh:#ff9a3c; --rh2:#d9701a; --lh:#2fb4c8; --lh2:#1a7f8f; --ped:#c89bf0; --ok:#a4e05a;
  --radius:14px;
  --fdisp:"Luckiest Guy", "Fredoka", system-ui, sans-serif;
  --fbody:"Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;min-height:100vh;color:var(--ink);font-family:var(--fbody);font-size:16px;
  background:
    radial-gradient(800px 520px at 92% -10%, rgba(255,138,42,.16), transparent 60%),
    radial-gradient(900px 700px at -8% 108%, rgba(47,180,200,.12), transparent 60%),
    radial-gradient(700px 500px at 40% 120%, rgba(194,107,224,.08), transparent 60%),
    linear-gradient(170deg,#0c1a1c 0%, #0a1517 55%, #0d1a16 100%) fixed}
a{color:var(--brass2)}
button{font-family:inherit}
/* Imagus must never grab our pictures: images are click-through, the link/button around them takes the click */
img,picture,svg image{pointer-events:none}

/* ---------- top bar ---------- */
.fc-top{display:flex;align-items:center;gap:14px;padding:6px 18px;border-bottom:1px solid rgba(0,0,0,.35);box-shadow:0 2px 12px rgba(0,0,0,.35);
  background:#331d45;position:sticky;top:0;z-index:20}
.fc-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.fc-brand picture,.fc-brand img{display:block;width:56px;height:56px}
.fc-word{font-family:var(--fdisp);font-weight:400;font-size:28px;letter-spacing:1px;line-height:1;color:var(--cream);position:relative;top:.16em;
  -webkit-text-stroke:1.2px #1a100a;paint-order:stroke fill;text-shadow:2px 2px 0 #1a100a}
.fc-word b{color:var(--torch);font-weight:400}
.fc-nav{margin-left:auto;display:flex;gap:6px;align-items:center}
.fc-nav a{color:#d9c9ea;text-decoration:none;font-size:15px;padding:7px 12px;border-radius:999px}
.fc-nav a:hover{background:rgba(255,255,255,.08);color:var(--ink)}
.fc-nav a.on{color:var(--ink);background:rgba(255,255,255,.12)}

/* ---------- buttons ---------- */
.btn{appearance:none;border:1px solid var(--line);background:var(--panel2);color:var(--ink);
  font-size:15px;padding:7px 13px;border-radius:999px;cursor:pointer;user-select:none;display:inline-flex;align-items:center;gap:7px}
.btn:hover{border-color:rgba(242,182,50,.45)}
.btn *{pointer-events:none}
.btn .alt{display:none} .btn.on .alt{display:inline} .btn.on .def{display:none}
.btn.on{background:linear-gradient(180deg,var(--brass2),var(--brass));color:#1a100a;border-color:transparent;font-weight:700}
.btn.big{font-family:var(--fdisp);font-size:19px;letter-spacing:.8px;padding:9px 18px 7px;font-weight:400}
.btn.red{background:linear-gradient(180deg,#ffa04a,var(--fez));text-shadow:1px 1px 0 rgba(0,0,0,.35);border-color:transparent;color:#fff;font-weight:700}

/* the grinder's crank: turns while the tune plays */
.crank{width:20px;height:20px;flex:0 0 auto}
.crank g{transform-origin:10px 10px}
.playing .crank g{animation:crank 1.1s linear infinite}
@keyframes crank{to{transform:rotate(360deg)}}

/* ---------- login ---------- */
.fc-login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.fc-card{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:28px 28px 24px;width:100%;max-width:420px;
  text-align:center;box-shadow:0 24px 70px rgba(0,0,0,.45)}
.fc-door{display:flex;align-items:stretch;max-width:900px;width:100%;border-radius:24px;overflow:hidden;border:1px solid var(--line);box-shadow:0 30px 80px rgba(0,0,0,.55)}
.fc-door>picture{flex:1 1 50%;min-width:0;display:block;background:#0a1517}
.fc-door>picture img{width:100%;height:100%;object-fit:cover;display:block}
.fc-door .fc-card{border:0;border-radius:0;box-shadow:none;max-width:none;flex:1 1 50%;display:flex;flex-direction:column;justify-content:center}
@media (max-width:760px){.fc-door{flex-direction:column}.fc-door>picture{max-height:320px}}
.fc-card .fc-coinlogo,.fc-card .fc-coinlogo img{display:block;width:132px;height:132px;margin:0 auto}
.fc-card h1{font-family:var(--fdisp);font-weight:400;font-size:44px;letter-spacing:1.5px;margin:6px 0 0;color:var(--cream);-webkit-text-stroke:1.5px #1a100a;paint-order:stroke fill;text-shadow:3px 3px 0 #1a100a}
.fc-card h1 b{color:var(--torch);font-weight:400}
.fc-card p{color:var(--mut);margin:6px 0 18px;font-size:16px}
.fc-card input{width:100%;font:inherit;font-size:18px;padding:12px 14px;border-radius:12px;border:1px solid var(--line);
  background:#0a1517;color:var(--ink);text-align:center;outline:none}
.fc-card input:focus{border-color:var(--brass)}
.fc-card .btn{margin-top:14px;width:100%;justify-content:center}
.fc-err{color:#ff9b8f;margin-top:10px;font-size:15px;min-height:1.2em}

/* ---------- repertoire ---------- */
.fc-wrap{max-width:1180px;margin:0 auto;padding:26px 18px 40px}
.fc-stage{display:grid;border-radius:22px;overflow:hidden;border:1px solid var(--line);box-shadow:0 24px 70px rgba(0,0,0,.45);background:#050a0b}
/* the panorama fills the stage; just past the gator it fades to black, and the bio sits in the dark */
.fc-stage>picture,.fc-stage>.say{grid-area:1/1}
.fc-stage>picture{display:block;min-width:0;position:relative}
.fc-stage>picture::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 0,transparent 54%,rgba(5,10,11,.55) 59%,rgba(5,10,11,.9) 64%,#050a0b 69%)}
.fc-stage img{display:block;width:100%;height:100%;min-height:360px;object-fit:cover;object-position:0 50%}
.fc-stage .say{justify-self:end;align-self:center;width:35%;padding:20px 28px 20px 0;position:relative}
.fc-stage h1{font-family:var(--fdisp);font-weight:400;font-size:clamp(26px,2.9vw,40px);white-space:nowrap;letter-spacing:1.5px;margin:0 0 12px;line-height:1.05;color:var(--cream);-webkit-text-stroke:1.5px #1a100a;paint-order:stroke fill;text-shadow:3px 3px 0 #1a100a}
.fc-stage p{color:var(--ink);font-size:16px;line-height:1.5;margin:0 0 10px}
@media (max-width:1000px){
  .fc-stage .say{width:44%}
  .fc-stage img{object-position:8% 50%}
  .fc-stage>picture::after{background:linear-gradient(90deg,transparent 0,transparent 42%,rgba(5,10,11,.6) 48%,rgba(5,10,11,.92) 53%,#050a0b 57%)}
}
@media (max-width:940px){
  .fc-stage>picture,.fc-stage>.say{grid-area:auto}
  .fc-stage img{height:auto;min-height:0;aspect-ratio:1.4;object-position:14% 50%}
  .fc-stage>picture::after{background:linear-gradient(90deg,transparent 0,transparent 66%,rgba(5,10,11,.85) 86%,#050a0b 97%),linear-gradient(180deg,transparent 62%,#050a0b 100%)}
  .fc-stage .say{justify-self:stretch;width:auto;padding:4px 22px 22px}
  .fc-stage h1{white-space:normal}
}
.fc-songs{margin-top:28px;display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}
.fc-song{display:block;text-decoration:none;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:18px;
  padding:18px 18px 16px;position:relative;overflow:hidden;transition:transform .12s, border-color .12s}
.fc-song:hover{transform:translateY(-2px);border-color:rgba(242,182,50,.5)}
.fc-song h2{font-family:var(--fdisp);font-weight:400;letter-spacing:1px;font-size:25px;margin:0}
.fc-song .by{color:var(--mut);font-size:15px;margin-top:2px}
.fc-song .meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.chip{font-size:13px;padding:3px 9px;border-radius:999px;background:var(--panel2);color:var(--mut)}
.chip.coin{color:#2a170d;font-weight:700}
.fc-song.soon{opacity:.55;pointer-events:none}
.fc-how{margin-top:34px;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.fc-how div{background:rgba(18,37,41,.7);border:1px solid var(--line);border-radius:16px;padding:14px 16px;color:var(--mut);font-size:15px;line-height:1.5}
.fc-how b{display:block;color:var(--ink);font-family:var(--fdisp);font-weight:400;letter-spacing:.8px;font-size:19px;margin-bottom:3px}

/* coins (Bronze / Silver / Gold) */
.coin-gold{background:linear-gradient(180deg,#ffe18a,#e8a91c)}
.coin-silver{background:linear-gradient(180deg,#f4f6fb,#aeb6c8)}
.coin-bronze{background:linear-gradient(180deg,#f0b98a,#b06a34)}
/* small phones: keep the bar inside the screen */
@media (max-width:480px){
  .fc-top{gap:8px;padding:6px 10px}
  .fc-brand picture,.fc-brand img{width:46px;height:46px}
  .fc-word{font-size:22px}
  .fc-nav{gap:2px}.fc-nav a{padding:6px 8px;font-size:14px}
}
/* tablets: when the masthead stacks, keep the picture a wide strip rather than a tall block */
@media (min-width:600px) and (max-width:940px){ .fc-stage img{aspect-ratio:1.75;object-position:0 50%} }