/* clips.css — the animated Discord windows (clips.js). Its own file so the app pages on
   application.skypiea.xyz can load them too. Needs --sans, --head and --ease from the page. */
:root{--dc-bg:#313338;--dc-bar:#2b2d31;--dc-embed:#2b2d31;--dc-text:#dbdee1;--dc-muted:#949ba4;--dc-link:#00a8fc;
  --dc-blurple:#5865f2;--dc-green:#23a55a;--dc-tag:#5865f2}
/* ---------------------------------------------------------------- Discord clips */
.clip{margin:0;border-radius:18px;overflow:hidden;background:var(--dc-bg);box-shadow:0 40px 80px -40px rgba(30,42,74,.55),0 0 0 1px rgba(30,42,74,.08);color:var(--dc-text);font:15px/1.375 "gg sans","Noto Sans",var(--sans);text-align:left}
.clip-bar{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--dc-bar);border-bottom:1px solid #1f2023}
.clip-bar .dots{display:flex;gap:6px}.clip-bar .dots i{width:11px;height:11px;border-radius:50%;background:#ff5f57}
.clip-bar .dots i:nth-child(2){background:#febc2e}.clip-bar .dots i:nth-child(3){background:#28c840}
.clip-bar .chan{font-weight:600;color:#f2f3f5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clip-bar .chan b{color:var(--dc-muted);font-weight:500;margin-right:2px}
.clip-bar .ex{margin-left:auto;font:600 10px/1 var(--head);letter-spacing:.1em;text-transform:uppercase;color:var(--dc-muted);border:1px solid #3f4147;border-radius:6px;padding:5px 7px}
.clip-body{position:relative;height:440px;overflow:hidden;padding:14px 0 10px;display:flex;flex-direction:column;justify-content:flex-end}
.clip-body::before{content:"";position:absolute;left:0;right:0;top:0;height:44px;background:linear-gradient(var(--dc-bg),rgba(49,51,56,0));z-index:2;pointer-events:none}
@media (max-width:520px){.clip-body{height:420px}.clip{font-size:14px}}
.msg{display:grid;grid-template-columns:40px 1fr;gap:0 14px;padding:6px 16px;animation:msgin .45s var(--ease) both}
.msg:hover{background:rgba(2,2,2,.06)}
@keyframes msgin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.av{width:40px;height:40px;border-radius:50%;background:#fde9f1 url(assets/skypiea-mark.webp) center/30px auto no-repeat;margin-top:2px}
.av.user{background:#7c88e0;display:grid;place-items:center;color:#fff;font:700 15px/1 var(--head)}
.who{display:flex;align-items:center;gap:6px;font-weight:600;color:#f2f3f5}
.who .app{background:var(--dc-tag);color:#fff;font-size:10px;font-weight:700;border-radius:4px;padding:1px 5px;line-height:15px}
.who time{font-weight:400;font-size:12px;color:var(--dc-muted);margin-left:2px}
.mention{background:rgba(88,101,242,.3);color:#c9cdfb;border-radius:3px;padding:0 2px;font-weight:500}
.emb{margin-top:6px;background:var(--dc-embed);border-left:4px solid #e60012;border-radius:4px;padding:10px 14px 12px;max-width:430px;display:grid;grid-template-columns:1fr auto;gap:0 12px}
.emb .t{font-weight:600;color:var(--dc-link);margin-bottom:6px;grid-column:1}
.emb .d{grid-column:1;font-size:14px;color:var(--dc-text)}
.emb .d div{margin:1px 0}
.emb .thumb{grid-column:2;grid-row:1/3;width:64px;height:64px;border-radius:6px;background:linear-gradient(135deg,#2e3a86,#e60012);display:grid;place-items:center;font:700 10px/1.1 var(--head);color:#fff;text-align:center;padding:4px}
.emb .f{grid-column:1/-1;margin-top:8px;font-size:11.5px;color:var(--dc-muted)}
.emb code{background:#1e1f22;border-radius:4px;padding:1px 4px;font-size:12.5px;color:#dbdee1}
.emb.green{border-color:#23a55a}.emb.blue{border-color:#5865f2}.emb.gold{border-color:#f0b232}.emb.red{border-color:#e60012}.emb.pink{border-color:#d98ca8}
.btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.dbtn{background:#4e5058;color:#fff;border-radius:4px;padding:6px 14px;font-size:13.5px;font-weight:500;transition:background .2s,transform .2s}
.dbtn.primary{background:var(--dc-blurple)}
.dbtn.press{transform:scale(.95);background:#6d6f78}
.dbtn.primary.press{background:#4752c4}
.units{font-variant-numeric:tabular-nums;font-weight:700;color:#fff}
.units.low{color:#f0b232}.units.zero{color:#f23f43}
.sys{padding:4px 16px 4px 70px;font-size:12.5px;color:var(--dc-muted);animation:msgin .45s var(--ease) both}
.eph{margin-top:6px;font-size:12px;color:var(--dc-muted)}
.count{font:800 54px/1 var(--head);color:#fff;text-align:center;padding:10px 0 18px;animation:pop .9s var(--ease) both;font-variant-numeric:tabular-nums}
@keyframes pop{0%{opacity:0;transform:scale(.6)}30%{opacity:1;transform:scale(1.05)}100%{opacity:.0;transform:scale(1)}}
.typing{padding:2px 16px 0 70px;font-size:12px;color:var(--dc-muted);height:18px}
.typing i{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--dc-muted);margin-right:3px;animation:dot 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,100%{opacity:.3}50%{opacity:1}}
/* calendar clip: a channel sidebar */
.side{padding:6px 10px;display:grid;gap:2px;align-content:end;height:100%}
.cat{font:700 11.5px/1 var(--head);letter-spacing:.04em;color:var(--dc-muted);padding:12px 8px 8px;text-transform:uppercase}
.ch{display:flex;align-items:center;gap:6px;padding:7px 8px;border-radius:5px;color:var(--dc-muted);font-size:15px;animation:msgin .5s var(--ease) both;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .3s,color .3s,opacity .5s,max-height .5s,padding .5s;max-height:40px}
.ch b{font-weight:400;opacity:.7}
.ch.on{background:#404249;color:#f2f3f5}
.ch.gone{opacity:0;max-height:0;padding-top:0;padding-bottom:0}
.ch .new{margin-left:auto;background:#f23f43;color:#fff;font:700 10px/1 var(--head);border-radius:8px;padding:3px 6px}
/* app clip */
.app{padding:16px;display:grid;gap:12px;height:100%;align-content:end}
.snipe{background:#2b2d31;border-radius:12px;padding:14px 16px;display:grid;grid-template-columns:62px 1fr auto;gap:14px;align-items:center;animation:msgin .45s var(--ease) both}
.snipe .img{width:62px;height:62px;border-radius:8px;background:linear-gradient(135deg,#fde9f1,#a9b4f2);display:grid;place-items:center;font:700 10px/1.1 var(--head);color:#2b3a66;text-align:center}
.snipe .nm{display:block;color:#f2f3f5;font-weight:600;font-size:14.5px}
.snipe small{color:var(--dc-muted);font-size:12.5px}
.snipe .st{font:700 13px/1 var(--head);padding:7px 10px;border-radius:8px;background:#404249;color:#dbdee1;white-space:nowrap;font-variant-numeric:tabular-nums}
.snipe .st.go{background:#f0b232;color:#1e1f22}.snipe .st.won{background:#23a55a;color:#fff}.snipe .st.lost{background:#4e5058}
.bar{height:4px;border-radius:4px;background:#404249;overflow:hidden;grid-column:1/-1}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#a9b4f2,#d98ca8);transition:width 1s linear}

@media (prefers-reduced-motion:reduce){.clip *{animation-duration:.001ms!important;transition-duration:.001ms!important}}