@import url("https://fonts.googleapis.com/css2?family=Bangers&family=Fredoka+One&family=Nunito:wght@700;800;900&display=swap");

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root {
  --yel:#FFDE00; --pin:#FF2A7A; --blu:#0055FF; --grn:#00E676; --org:#FF6D00;
  --ink:#000000; --bg:#F4F4F9; --wht:#FFFFFF;
  
  --ol:4px solid var(--ink);
  --ol6:6px solid var(--ink);
  --ol8:8px solid var(--ink);
  
  --sh-btn:6px 6px 0 var(--ink);
  --sh-card:12px 12px 0 var(--ink);
  --sh-hero:16px 16px 0 var(--ink);
  
  --ffd:"Bangers",cursive;
  --ffh:"Fredoka One",cursive;
  --ffb:"Nunito",sans-serif;
}

body {
  font-family:var(--ffb); background:var(--bg); color:var(--ink); min-height:100vh; overflow-x:hidden;
  background-image: radial-gradient(var(--ink) 2.5px, transparent 2.5px);
  background-size: 32px 32px;
}

::-webkit-scrollbar { width:16px; }
::-webkit-scrollbar-track { background:var(--blu); border-left:var(--ol); }
::-webkit-scrollbar-thumb { background:var(--yel); border:var(--ol); border-radius:8px; }

/* --- HEADER --- */
header {
  background:var(--wht); border-bottom:var(--ol8); position:sticky; top:0; z-index:200;
  padding:0 24px; box-shadow:0 12px 0 var(--ink);
}
.hdr { max-width:1400px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; height:90px; }
.logo { display:flex; align-items:center; gap:16px; text-decoration:none; }
.logo-ico {
  width:64px; height:64px; background:var(--yel); border:var(--ol6); border-radius:16px;
  box-shadow:var(--sh-btn); display:flex; align-items:center; justify-content:center;
  animation:wobble 3s ease-in-out infinite; transform-origin:bottom center;
}
.logo-txt { font-family:var(--ffd); font-size:48px; letter-spacing:4px; color:var(--wht); -webkit-text-stroke:3px var(--ink); text-shadow:5px 5px 0 var(--pin); line-height:1; transform:skew(-5deg); }
.logo-sub { font-family:var(--ffh); font-size:12px; font-weight:900; letter-spacing:0.2em; color:var(--blu); text-transform:uppercase; margin-top:4px; }
@keyframes wobble{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}

nav { display:flex; gap:12px; }
.nl { font-family:var(--ffh); font-size:18px; color:var(--ink); text-decoration:none; padding:10px 24px; border-radius:100px; border:var(--ol); transition:all .15s; background:var(--wht); box-shadow:4px 4px 0 var(--ink); }
.nl:hover,.nl.act { background:var(--pin); color:var(--wht); transform:translate(-2px,-2px); box-shadow:8px 8px 0 var(--ink); }
.hcta { font-family:var(--ffd); font-size:24px; letter-spacing:2px; background:var(--grn); color:var(--ink); border:var(--ol6); border-radius:16px; padding:12px 32px; box-shadow:var(--sh-btn); text-decoration:none; transition:all .15s; transform:rotate(-2deg); }
.hcta:hover { transform:translate(-4px,-4px) scale(1.05) rotate(0deg); box-shadow:12px 12px 0 var(--ink); background:var(--yel); }

/* --- HERO --- */
#hero { background:var(--yel); border-bottom:var(--ol8); position:relative; overflow:hidden; padding:80px 24px 100px; }
.hero-bg {
  position:absolute; inset:0;
  background-image: repeating-linear-gradient(45deg, rgba(0,0,0,0.05) 0, rgba(0,0,0,0.05) 20px, transparent 20px, transparent 40px);
  pointer-events:none;
}
.hero-inner { max-width:1400px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; position:relative; z-index:2; }

.speech-bubble {
  display:inline-block; position:relative; background:var(--wht); color:var(--ink);
  font-family:var(--ffh); font-size:18px; font-weight:700; padding:14px 28px;
  border:var(--ol6); border-radius:100px; box-shadow:var(--sh-btn); margin-bottom:30px;
  transform:rotate(-3deg);
}
.speech-bubble::after { content:""; position:absolute; bottom:-20px; left:40px; border:10px solid transparent; border-top:20px solid var(--ink); }
.speech-bubble::before { content:""; position:absolute; bottom:-12px; left:43px; border:7px solid transparent; border-top:16px solid var(--wht); z-index:1; }

.hero-title {
  font-family:var(--ffd); font-size:clamp(80px, 10vw, 140px); line-height:0.85; letter-spacing:2px;
  color:var(--wht); -webkit-text-stroke:4px var(--ink); text-shadow:var(--sh-hero);
  margin-bottom:30px; transform:skew(-4deg) rotate(-2deg);
}
.hero-title em { color:var(--blu); font-style:normal; display:block; padding-left:20px; }

.hero-desc {
  font-family:var(--ffh); font-size:22px; color:var(--ink); line-height:1.5;
  background:var(--wht); border:var(--ol); padding:20px; border-radius:16px;
  box-shadow:var(--sh-btn); max-width:540px; margin-bottom:40px; transform:rotate(1deg);
}

.hero-btns { display:flex; gap:20px; flex-wrap:wrap; margin-bottom:40px; align-items:center; }
.bh1 {
  font-family:var(--ffd); font-size:32px; letter-spacing:4px; background:var(--pin);
  color:var(--wht); -webkit-text-stroke:2px var(--ink); border:var(--ol6); border-radius:16px;
  padding:16px 48px; box-shadow:10px 10px 0 var(--ink); text-decoration:none;
  display:inline-flex; align-items:center; gap:12px; transition:all .15s;
}
.bh1:hover { transform:translate(-5px,-5px); box-shadow:16px 16px 0 var(--ink); background:var(--org); }

.bh2 {
  font-family:var(--ffh); font-size:20px; color:var(--ink);
  background:var(--wht); border:var(--ol); border-radius:16px;
  padding:16px 32px; box-shadow:var(--sh-btn); text-decoration:none;
  display:inline-flex; align-items:center; transition:all .15s;
}
.bh2:hover { transform:translate(-4px,-4px); box-shadow:10px 10px 0 var(--ink); background:var(--bg); }

.hero-stats { display:flex; gap:16px; flex-wrap:wrap; margin-top:40px; }
.stat-box { background:var(--wht); border:var(--ol); border-radius:16px; box-shadow:var(--sh-btn); padding:12px 24px; text-align:center; min-width:110px; transform:rotate(-2deg); transition:transform .15s; }
.stat-box:nth-child(even) { transform:rotate(2deg); background:var(--bg); }
.stat-box:hover { transform:translate(-2px,-2px) scale(1.05); box-shadow:8px 8px 0 var(--ink); }
.stn { font-family:var(--ffd); font-size:36px; letter-spacing:2px; color:var(--pin); text-shadow:2px 2px 0 var(--ink); line-height:1; }
.stl { font-family:var(--ffb); font-size:12px; font-weight:900; letter-spacing:0.15em; color:var(--ink); text-transform:uppercase; margin-top:4px; }

.hero-right { position:relative; display:flex; align-items:center; justify-content:center; }
.starburst {
  position:absolute; width:140%; padding-bottom:140%; background:var(--pin);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  border:var(--ol8); z-index:-1; animation:spinSlow 30s linear infinite; box-shadow:var(--sh-hero);
}
@keyframes spinSlow { to { transform:rotate(360deg) } }

#heroMunny { width:clamp(320px, 35vw, 480px); filter:drop-shadow(0 20px 40px rgba(0,0,0,0.5)); animation:popBounce 2s cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite; display:block; }
@keyframes popBounce { 0%,100%{transform:scale(1) translateY(0)} 50%{transform:scale(1.05) translateY(-20px) rotate(4deg)} }

.comic-burst {
  position:absolute; font-family:var(--ffd); font-size:42px; color:var(--yel);
  -webkit-text-stroke:2px var(--ink); text-shadow:4px 4px 0 var(--ink);
  background:var(--blu); border:var(--ol); padding:10px 20px; border-radius:50%;
  transform:rotate(15deg); z-index:5; top:20px; right:0; cursor:pointer;
  animation:burst 1.5s infinite alternate; box-shadow:var(--sh-btn);
}
@keyframes burst { to { transform:scale(1.2) rotate(25deg) } }

/* --- MARQUEE --- */
.mstrip { background:var(--blu); border-bottom:var(--ol8); overflow:hidden; padding:16px 0; }
.mtrack { display:flex; animation:mq 20s linear infinite; width:max-content; }
@keyframes mq { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.mitem { display:flex; align-items:center; gap:30px; font-family:var(--ffd); font-size:42px; letter-spacing:4px; color:var(--wht); -webkit-text-stroke:2px var(--ink); text-shadow:4px 4px 0 var(--ink); padding:0 40px; white-space:nowrap; }

/* --- APP LAYOUT --- */
.app-wrap { max-width:1400px; margin:0 auto; padding:80px 24px; display:grid; grid-template-columns:1fr 420px; gap:40px; align-items:start; }

/* --- LEFT / STAGE --- */
.stage-col { display:flex; flex-direction:column; gap:36px; }

.stage-card {
  background:var(--wht); border:var(--ol8); border-radius:32px; box-shadow:var(--sh-card);
  position:relative; overflow:visible;
}
.stage-card::before {
  content:""; position:absolute; top:20px; left:20px; right:20px; bottom:20px;
  background:var(--blu); border:var(--ol6); border-radius:16px; z-index:0;
}
.stage-winbar { position:absolute; top:-24px; left:50%; transform:translateX(-50%); background:var(--yel); border:var(--ol6); padding:8px 32px; border-radius:100px; font-family:var(--ffd); font-size:28px; letter-spacing:2px; box-shadow:var(--sh-btn); z-index:5; white-space:nowrap; text-shadow:2px 2px 0 var(--wht); }

.stage-canvas {
  position:relative; z-index:1; min-height:600px; display:flex; align-items:center; justify-content:center;
  margin:20px; border-radius:16px;
  background: repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,0.1) 0, rgba(255,255,255,0.1) 8px, transparent 8px, transparent 24px);
}
.imgs-wrap { position:relative; z-index:3; text-align:center; display:flex; flex-direction:column; align-items:center; gap:24px; }
#originalImg { max-width:380px; max-height:480px; filter:drop-shadow(0 20px 40px rgba(0,0,0,0.5)); transition:opacity .4s; margin: 0 auto; display: block; }
#generatedImg { max-width:380px; max-height:480px; filter:drop-shadow(0 20px 40px rgba(0,0,0,0.5)); transition:opacity .4s; margin: 0 auto; display: none; }
.img-label { font-family:var(--ffh); font-size:18px; color:var(--ink); background:var(--yel); padding:10px 24px; border-radius:100px; border:var(--ol); box-shadow:var(--sh-btn); display:inline-block; transform:rotate(-2deg); }

/* Loading */
#loadingOverlay {
  display:none; position:absolute; inset:0; background:rgba(0,85,255,0.9); border-radius:16px; z-index:20;
  flex-direction:column; align-items:center; justify-content:center; gap:24px;
}
#loadingOverlay.show { display:flex; }
.spinner { width:80px; height:80px; border:8px solid var(--ink); border-top:8px solid var(--yel); border-radius:50%; animation:spin 1s linear infinite; box-shadow:var(--sh-btn); background:var(--wht); }
@keyframes spin { to { transform:rotate(360deg) } }
.ld-title { font-family:var(--ffd); font-size:42px; letter-spacing:4px; color:var(--wht); -webkit-text-stroke:2px var(--ink); text-shadow:4px 4px 0 var(--pin); }
.ld-sub { font-family:var(--ffh); font-size:18px; color:var(--wht); text-shadow:2px 2px 0 var(--ink); }
.ld-progress { width:240px; height:24px; background:var(--wht); border:var(--ol); border-radius:100px; overflow:hidden; box-shadow:var(--sh-btn); }
.ld-bar { height:100%; background:var(--grn); width:0%; transition:width .5s ease; animation:ldAnim 10s ease-in-out forwards; border-right:var(--ol); }
@keyframes ldAnim { 0%{width:0%} 20%{width:35%} 50%{width:65%} 80%{width:85%} 95%{width:92%} }

.stage-bar { background:var(--yel); padding:16px 24px; display:flex; align-items:center; gap:16px; border-top:var(--ol8); border-radius:0 0 32px 32px; position:relative; z-index:2; }
.stag { background:var(--wht); border:var(--ol); border-radius:100px; padding:6px 16px; font-family:var(--ffh); font-size:14px; font-weight:800; color:var(--ink); text-transform:uppercase; box-shadow:3px 3px 0 var(--ink); }
#imgStatus { font-family:var(--ffh); font-size:16px; color:var(--ink); margin-left:auto; font-weight:bold; }

/* Compare strip */
.compare-strip { display:none; gap:20px; }
.compare-strip.show { display:grid; grid-template-columns:1fr 1fr; }
.cmp-card { background:var(--wht); border:var(--ol8); border-radius:24px; overflow:hidden; box-shadow:var(--sh-card); transform:rotate(1deg); }
.cmp-card:nth-child(2) { transform:rotate(-1deg); }
.cmp-hdr { background:var(--blu); padding:12px 20px; font-family:var(--ffd); font-size:24px; letter-spacing:3px; color:var(--wht); -webkit-text-stroke:1px var(--ink); border-bottom:var(--ol6); text-align:center; }
.cmp-hdr.after { background:var(--pin); color:var(--yel); }
.cmp-card img { width:100%; display:block; aspect-ratio:1; object-fit:cover; background:var(--bg); }

/* Gallery */
.gal-card { background:var(--yel); border:var(--ol8); border-radius:32px; overflow:visible; position:relative; box-shadow:var(--sh-card); }
.gal-hdr { background:var(--ink); padding:20px 32px; display:flex; align-items:center; justify-content:space-between; border-radius:24px 24px 0 0; }
.gal-title { font-family:var(--ffd); font-size:32px; letter-spacing:4px; color:var(--wht); display:flex; align-items:center; gap:16px; text-shadow:3px 3px 0 var(--pin); }
.gcnt { background:var(--grn); color:var(--ink); font-family:var(--ffh); font-size:16px; padding:4px 14px; border-radius:100px; border:var(--ol); box-shadow:3px 3px 0 var(--wht); }
.ggrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(130px,1fr)); gap:16px; padding:32px; min-height:100px; }
.gempty { grid-column:1/-1; text-align:center; padding:40px; font-family:var(--ffh); font-size:20px; color:var(--ink); }
.gc { background:var(--wht); border:var(--ol); border-radius:16px; overflow:hidden; position:relative; transition:all .15s; cursor:pointer; box-shadow:var(--sh-btn); }
.gc:hover { transform:translate(-4px,-4px) scale(1.05) rotate(-3deg); box-shadow:12px 12px 0 var(--pin); border-color:var(--pin); }
.gc img { width:100%; aspect-ratio:1; object-fit:cover; display:block; background:var(--blu); }
.gc-lbl { font-family:var(--ffh); font-size:12px; color:var(--ink); padding:8px 10px; background:var(--wht); border-top:var(--ol); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:center; }
.gc-del { position:absolute; top:8px; right:8px; width:32px; height:32px; background:var(--pin); border:var(--ol); border-radius:50%; color:var(--wht); font-family:var(--ffh); font-size:16px; display:none; align-items:center; justify-content:center; z-index:5; box-shadow:3px 3px 0 var(--ink); }
.gc:hover .gc-del { display:flex; }
.gc-del:hover { background:var(--org); transform:scale(1.1); }
.gc-dl { position:absolute; top:8px; left:8px; width:32px; height:32px; background:var(--grn); border:var(--ol); border-radius:50%; color:var(--ink); font-family:var(--ffh); font-size:16px; display:none; align-items:center; justify-content:center; z-index:5; box-shadow:3px 3px 0 var(--ink); }
.gc:hover .gc-dl { display:flex; }
.gc-dl:hover { background:var(--yel); transform:scale(1.1); }

/* --- RIGHT SIDEBAR --- */
.sidebar { display:flex; flex-direction:column; gap:32px; position:sticky; top:120px; }

.sb-card { background:var(--wht); border:var(--ol8); border-radius:32px; box-shadow:var(--sh-card); position:relative; transform:rotate(-1deg); }
.sb-card:nth-child(even) { transform:rotate(1.5deg); }
.sb-hdr { padding:24px; display:flex; align-items:center; gap:16px; border-bottom:var(--ol6); border-radius:24px 24px 0 0; background:var(--blu); }
.sb-ico { width:60px; height:60px; background:var(--wht); border:var(--ol); border-radius:16px; box-shadow:var(--sh-btn); display:flex; align-items:center; justify-content:center; font-size:32px; flex-shrink:0; transform:rotate(-5deg); }
.sb-ttl { font-family:var(--ffd); font-size:32px; letter-spacing:3px; color:var(--wht); -webkit-text-stroke:1px var(--ink); text-shadow:3px 3px 0 var(--ink); }
.sb-body { padding:24px; display:flex; flex-direction:column; gap:20px; background:var(--wht); border-radius:0 0 24px 24px; }

/* Prompt */
.prompt-area {
  width:100%; background:var(--bg); border:var(--ol6); border-radius:20px; padding:24px;
  font-family:var(--ffh); font-size:18px; color:var(--ink); resize:none; outline:none; line-height:1.6;
  min-height:160px; box-shadow:inset 8px 8px 0 rgba(0,0,0,0.05); transition:all .2s;
}
.prompt-area:focus { background:var(--wht); border-color:var(--pin); box-shadow:8px 8px 0 var(--pin); transform:translate(-2px,-2px); }
.prompt-area::placeholder { color:var(--blu); opacity:0.6; }

/* Quick prompts */
.qp-lbl { font-family:var(--ffd); font-size:20px; letter-spacing:2px; color:var(--pin); margin-bottom:12px; -webkit-text-stroke:1px var(--ink); text-shadow:2px 2px 0 var(--ink); }
.qp-grid { display:flex; flex-wrap:wrap; gap:10px; }
.qp { background:var(--yel); border:var(--ol); border-radius:100px; padding:10px 20px; font-family:var(--ffh); font-size:14px; padding-top:12px; color:var(--ink); transition:all .15s; white-space:nowrap; box-shadow:var(--sh-btn); cursor:pointer; }
.qp:hover { background:var(--pin); color:var(--wht); transform:translate(-3px,-3px); box-shadow:8px 8px 0 var(--ink); }

/* Buttons */
.btn-gen {
  width:100%; padding:24px; background:var(--grn); color:var(--ink);
  font-family:var(--ffd); font-size:42px; letter-spacing:4px;
  border:var(--ol8); border-radius:24px; box-shadow:12px 12px 0 var(--ink);
  display:flex; align-items:center; justify-content:center; gap:16px;
  transition:all .15s; margin-top:10px; cursor:pointer;
  -webkit-text-stroke:2px var(--ink); text-shadow:4px 4px 0 var(--wht);
}
.btn-gen:hover { transform:translate(-6px,-6px); box-shadow:18px 18px 0 var(--ink); background:var(--yel); }
.btn-gen:disabled { opacity:.6; transform:none; box-shadow:12px 12px 0 var(--ink); cursor:not-allowed; }

.btn-row { display:flex; gap:16px; margin-top:8px; }
.btn-reset { flex:1; padding:16px; background:var(--wht); color:var(--ink); font-family:var(--ffh); font-size:18px; border:var(--ol); border-radius:16px; box-shadow:var(--sh-btn); transition:all .15s; cursor:pointer; }
.btn-reset:hover { background:var(--pin); color:var(--wht); transform:translate(-3px,-3px); box-shadow:9px 9px 0 var(--ink); }
.btn-dl { flex:1; padding:16px; background:var(--blu); color:var(--wht); font-family:var(--ffh); font-size:18px; border:var(--ol); border-radius:16px; box-shadow:var(--sh-btn); display:none; align-items:center; justify-content:center; gap:8px; transition:all .15s; cursor:pointer; }
.btn-dl.show { display:flex; }
.btn-dl:hover { background:var(--yel); color:var(--ink); transform:translate(-3px,-3px); box-shadow:9px 9px 0 var(--ink); }

/* Mode toggle */
.mode-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.mb { padding:14px; border-radius:16px; border:var(--ol); background:var(--wht); font-family:var(--ffh); font-size:16px; color:var(--ink); transition:all .15s; text-align:center; box-shadow:var(--sh-btn); cursor:pointer; }
.mb.act { background:var(--org); color:var(--wht); transform:translate(2px,2px); box-shadow:4px 4px 0 var(--ink); }

/* Tips */
.tip { display:flex; gap:16px; font-family:var(--ffh); font-size:14px; color:var(--ink); line-height:1.6; align-items:flex-start; background:var(--bg); padding:16px; border:var(--ol); border-radius:16px; box-shadow:4px 4px 0 var(--ink); }
.tip-ico { font-size:24px; flex-shrink:0; background:var(--wht); padding:8px; border:var(--ol); border-radius:50%; box-shadow:3px 3px 0 var(--ink); transform:rotate(-10deg); }

/* --- ABOUT SECTION --- */
#about { background:var(--blu); border-top:var(--ol8); border-bottom:var(--ol8); padding:100px 24px; position:relative; }
#about::before {
  content:""; position:absolute; inset:0;
  background-image: radial-gradient(var(--wht) 2.5px, transparent 2.5px);
  background-size: 32px 32px; opacity:0.1; pointer-events:none;
}
.about-title { font-family:var(--ffd); font-size:80px; letter-spacing:6px; color:var(--yel); text-shadow:8px 8px 0 var(--ink); text-align:center; margin-bottom:60px; -webkit-text-stroke:3px var(--ink); transform:rotate(-2deg); }
.about-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:40px; max-width:1400px; margin:0 auto; position:relative; z-index:2; }
.acard { background:var(--wht); border:var(--ol8); border-radius:32px; padding:40px 32px; box-shadow:var(--sh-card); transition:all .2s; }
.acard:nth-child(2) { transform:translateY(-20px) rotate(2deg); background:var(--grn); }
.acard:hover { transform:translate(-5px,-5px) scale(1.02); box-shadow:20px 20px 0 var(--ink); }
.ac-ico { width:80px; height:80px; background:var(--pin); border:var(--ol6); border-radius:24px; display:flex; align-items:center; justify-content:center; font-size:42px; margin-bottom:24px; box-shadow:var(--sh-btn); transform:rotate(-10deg); }
.ac-title { font-family:var(--ffd); font-size:36px; letter-spacing:2px; color:var(--ink); margin-bottom:16px; -webkit-text-stroke:1px var(--wht); text-shadow:2px 2px 0 var(--wht); }
.ac-desc { font-family:var(--ffh); font-size:18px; color:var(--ink); line-height:1.6; }

/* --- FOOTER --- */
footer { background:var(--ink); padding:64px 24px 40px; color:var(--wht); position:relative; overflow:hidden; }
.ft-top { display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:40px; padding-bottom:40px; border-bottom:var(--ol6); border-color:var(--yel); margin-bottom:32px; max-width:1400px; margin:0 auto; }
.ft-logo { font-family:var(--ffd); font-size:64px; letter-spacing:4px; color:var(--yel); -webkit-text-stroke:2px var(--wht); text-shadow:4px 4px 0 var(--pin); transform:skew(-5deg); }
.ft-sub { font-family:var(--ffh); font-size:16px; color:var(--grn); max-width:300px; margin-top:8px; line-height:1.5; }
.ft-gl { font-family:var(--ffb); font-size:14px; font-weight:900; letter-spacing:0.2em; color:var(--pin); text-transform:uppercase; margin-bottom:16px; }
.ft-lk { font-family:var(--ffh); font-size:18px; color:var(--wht); text-decoration:none; display:block; margin-bottom:12px; transition:all .15s; }
.ft-lk:hover { color:var(--yel); transform:translateX(5px); }
.ft-bot { display:flex; justify-content:space-between; align-items:center; max-width:1400px; margin:0 auto; font-family:var(--ffh); font-size:14px; color:var(--wht); }
.ft-heart { color:var(--pin); font-size:20px; animation: heartbeat 1s infinite alternate; display:inline-block; }
@keyframes heartbeat { to { transform:scale(1.3) } }

/* TOAST */
#toast { position:fixed; bottom:40px; left:50%; transform:translateX(-50%) translateY(30px) scale(0.9); font-family:var(--ffd); font-size:24px; letter-spacing:2px; padding:16px 40px; border-radius:100px; border:var(--ol6); opacity:0; transition:all .3s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index:9999; background:var(--wht); color:var(--ink); box-shadow:var(--sh-card); pointer-events:none; }
#toast.show { opacity:1; transform:translateX(-50%) translateY(0) scale(1) rotate(-1deg); }
#toast.err { background:var(--pin); color:var(--wht); }
#toast.ok { background:var(--grn); }

/* ═══ TOP 10 CARDS ═══ */
.t10-card { background:var(--wht); border:var(--ol8); border-radius:24px; box-shadow:var(--sh-card); text-align:center; padding:20px 16px; transition:all .15s; position:relative; }
.t10-card:nth-child(1) { transform:rotate(-2deg); }
.t10-card:nth-child(2) { transform:rotate(1deg); }
.t10-card:nth-child(3) { transform:rotate(-1deg); }
.t10-card:hover { transform:translate(-4px,-4px) scale(1.05); box-shadow:18px 18px 0 var(--ink); }
.t10-rank { font-family:var(--ffd); font-size:28px; letter-spacing:2px; color:var(--wht); background:var(--pin); border:var(--ol); border-radius:100px; padding:4px 16px; display:inline-block; box-shadow:var(--sh-btn); margin-bottom:12px; }
.t10-card:nth-child(1) .t10-rank { background:var(--org); font-size:36px; }
.t10-card:nth-child(2) .t10-rank { background:var(--blu); }
.t10-card:nth-child(3) .t10-rank { background:var(--grn); color:var(--ink); }
.t10-img { font-size:64px; margin:16px 0; min-height:100px; display:flex; align-items:center; justify-content:center; background:var(--bg); border:var(--ol); border-radius:16px; }
.t10-img img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:12px; }
.t10-name { font-family:var(--ffh); font-size:16px; color:var(--ink); margin-top:8px; }

@media(max-width:960px){ .app-wrap{grid-template-columns:1fr} .sidebar{position:static} .hero-inner{grid-template-columns:1fr} .hero-right{display:none} .about-grid{grid-template-columns:1fr} #top10Grid{grid-template-columns:repeat(2,1fr)!important} }
@media(max-width:600px){ nav{display:none} #top10Grid{grid-template-columns:1fr!important} }

/* SOUND BTN */
#sndbtn { position:fixed; bottom:32px; right:32px; z-index:500; width:72px; height:72px; border-radius:50%; background:var(--yel); border:var(--ol8); box-shadow:var(--sh-card); display:flex; align-items:center; justify-content:center; font-size:32px; transition:all .15s; cursor:pointer; }
#sndbtn:hover { transform:translate(-4px,-4px) rotate(15deg); box-shadow:16px 16px 0 var(--ink); background:var(--pin); }