/* Shared styles for the chibi-frog apps — layered on top of style.css */
:root{--pad:#9fd49a;--pad-deep:#6fb46c;--pad-soft:#e6f4df;--butter:#fff3c4;}
.fa-top{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.fa-top img.mascot{width:84px;height:84px;flex-shrink:0}
.fa-top .grow{flex:1;min-width:200px}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 18px}
.tabs button{background:var(--pad-soft);color:var(--navy-deep);border:1px solid var(--line)}
.tabs button:hover{background:var(--blush)}
.tabs button.on{background:var(--navy-deep);color:#fff}
.pill-btn-sm{padding:7px 14px;font-size:.85rem}
.btn.green{background:var(--pad-deep)}.btn.green:hover{background:#58985a}
.btn.danger{background:#c9604f}.btn.danger:hover{background:#a84a3b}
.bar{height:16px;background:var(--pad-soft);border:1px solid var(--line);border-radius:999px;position:relative;overflow:visible}
.bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--pad),var(--pad-deep));border-radius:999px;transition:width .5s cubic-bezier(.3,1.5,.5,1)}
.bar>img{position:absolute;top:-16px;width:34px;height:34px;transform:translateX(-50%);transition:left .5s cubic-bezier(.3,1.5,.5,1)}
.chip{display:inline-block;padding:4px 12px;border-radius:999px;background:var(--butter);border:1px solid var(--line);font-size:.8rem;font-weight:700;color:var(--navy-deep)}
.box{background:var(--lily);border:1px solid var(--line);border-radius:var(--radius-sm);padding:16px;margin-bottom:14px}
.ok{color:#3f8a43;font-weight:700}.bad{color:#b4493a;font-weight:700}
.opt{display:block;width:100%;text-align:left;background:#fff;color:var(--ink);border:1px solid var(--line);margin:6px 0;border-radius:14px;padding:11px 14px;font-weight:500}
.opt:hover{background:var(--pad-soft)}.opt.sel{outline:2px solid var(--orange);background:var(--blush)}
.opt.right{background:#dff3d8;border-color:var(--pad-deep)}.opt.wrong{background:#fbdad3}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.hint{color:var(--ink-soft);font-size:.85rem}
.bounce{animation:bounce .6s}
@keyframes bounce{0%,100%{transform:translateY(0)}40%{transform:translateY(-14px) rotate(-4deg)}70%{transform:translateY(0) rotate(3deg)}}
.pop{animation:pop .35s ease}
@keyframes pop{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
.sr{position:absolute;left:-9999px}
@media (max-width:600px){.fa-top img.mascot{width:64px;height:64px}}