/* TrumpKin: a "blessed" card forwarded through a family group chat.
   Tokens come out of the approved art:
   sky      #1E93B8 / #0E78A4 / #86CCE0    (the stock sky)
   cloud    #F6F0E2                        (cumulus)
   gold     #F6D76B / #FFE98A              (the ray, the sparkles)
   hair     #4A2010                        (Anakin mane, cloak)
   tie      #D9442B                        (the red tie)
   suit     #0F4A55                        (the teal suit, chat header)
   ink      #2B140A                        (outline of the drawing)
   Type: Lobster (card lettering), Comic Neue (chat), Nanum Gothic Coding (CA).
   Spacing scale: 4 / 8 / 12 / 16 / 24 px. Radius: 6px only. Shadows are hard offsets in ink.
   Motion idiom: slow ray rotation, twinkling glitter, drifting hexagon flare. */

@font-face{font-family:"Lobster";src:url("assets/fonts/lobster-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Comic Neue";src:url("assets/fonts/comic-neue-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Comic Neue";src:url("assets/fonts/comic-neue-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Comic Neue";src:url("assets/fonts/comic-neue-latin-700-italic.woff2") format("woff2");font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:"Nanum Gothic Coding";src:url("assets/fonts/nanum-gothic-coding-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Nanum Gothic Coding";src:url("assets/fonts/nanum-gothic-coding-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --sky-top:#0E78A4; --sky-mid:#2AA7C9; --sky-low:#86CCE0;
  --cloud:#F6F0E2; --gold:#F6D76B; --gold-hot:#FFE98A;
  --hair:#4A2010; --tie:#D9442B; --tie-dark:#A82E1A; --suit:#0F4A55; --ink:#2B140A;
  --bubble:#FFF8EA; --mute:#6B4A3A;
  --pic: min(calc(100vw - 48px), calc(100dvh - 350px), 430px);
  --bar-h: 52px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
html{overflow:clip}
body{
  overflow:clip;
  font-family:"Comic Neue","Comic Sans MS",cursive,sans-serif;
  color:var(--ink);
  background-color:var(--sky-mid);
  background-image:
    /* hard-edged cumulus along the bottom, no blur */
    radial-gradient(circle at 12% 104%, var(--cloud) 0 7.5vmax, transparent calc(7.5vmax + 1px)),
    radial-gradient(circle at 24% 108%, var(--cloud) 0 9vmax, transparent calc(9vmax + 1px)),
    radial-gradient(circle at 38% 105%, var(--cloud) 0 6vmax, transparent calc(6vmax + 1px)),
    radial-gradient(circle at 73% 106%, var(--cloud) 0 8vmax, transparent calc(8vmax + 1px)),
    radial-gradient(circle at 88% 103%, var(--cloud) 0 7vmax, transparent calc(7vmax + 1px)),
    radial-gradient(circle at 5% 22%, var(--cloud) 0 3.6vmax, transparent calc(3.6vmax + 1px)),
    radial-gradient(circle at 9.5% 19%, var(--cloud) 0 4.8vmax, transparent calc(4.8vmax + 1px)),
    radial-gradient(circle at 15% 23%, var(--cloud) 0 3.8vmax, transparent calc(3.8vmax + 1px)),
    radial-gradient(circle at 19% 26%, var(--cloud) 0 2.4vmax, transparent calc(2.4vmax + 1px)),
    radial-gradient(circle at 96% 31%, var(--cloud) 0 3vmax, transparent calc(3vmax + 1px)),
    radial-gradient(circle at 91% 28%, var(--cloud) 0 4.2vmax, transparent calc(4.2vmax + 1px)),
    radial-gradient(circle at 85% 32%, var(--cloud) 0 3.2vmax, transparent calc(3.2vmax + 1px)),
    linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 55%, var(--sky-low) 100%);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---------- chat frame ---------- */
.chat{
  position:relative; z-index:3;
  width:min(100%, 480px); height:100dvh;
  margin:0 auto;
  display:flex; flex-direction:column;
}
.bar{
  position:relative; z-index:6;
  height:var(--bar-h); flex:none;
  display:flex; align-items:center; gap:8px;
  padding:0 12px 0 8px;
  background:var(--suit); color:var(--cloud);
  border-bottom:3px solid var(--gold);
}
.back{flex:none;color:var(--gold)}
.gicon{width:38px;height:38px;border-radius:50%;object-fit:cover;border:2px solid var(--gold);background:var(--hair)}
.gtext{display:flex;flex-direction:column;min-width:0;line-height:1.15}
.gname{font-size:17px;font-weight:700}
.gsub{font-size:11.5px;color:#BFE3EA;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.stream{
  flex:1; min-height:0;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:8px 12px 12px;
  gap:12px;
}

/* ---------- the forwarded card (incoming message) ---------- */
.msg{
  position:relative;
  width:fit-content; max-width:100%;
  align-self:flex-start;
  background:var(--bubble);
  border:3px solid var(--ink);
  border-radius:6px;
  padding:8px 8px 6px;
  box-shadow:4px 4px 0 rgba(43,20,10,.45);
}
.msg::before{ /* bubble tail */
  content:""; position:absolute; left:-12px; top:-3px;
  border-style:solid; border-width:0 12px 14px 0;
  border-color:transparent var(--ink) transparent transparent;
}
.msg::after{
  content:""; position:absolute; left:-7px; top:0;
  border-style:solid; border-width:0 9px 10px 0;
  border-color:transparent var(--bubble) transparent transparent;
}

/* stacked "Forwarded" chips peel off the top edge of the card */
.chips{
  position:absolute; left:0; right:0; bottom:100%;
  list-style:none; display:flex; flex-direction:column-reverse;
  padding-bottom:6px; pointer-events:none;
}
.chip{
  align-self:flex-start; max-width:100%;
  display:flex; align-items:center; gap:5px;
  margin-top:-2px;
  padding:2px 9px 2px 6px;
  font-size:12.5px; font-weight:700; font-style:italic; line-height:1.25;
  color:var(--mute);
  background:var(--cloud);
  border:2px solid var(--ink); border-radius:6px;
  transform:rotate(var(--r,0deg)) translateX(var(--sx,0px));
  opacity:calc(1 - (var(--age,0) * .16));
  animation:chip-in .22s ease-out both;
}
.chip svg{flex:none;color:var(--tie)}
.chip:nth-child(n+8){display:none}
@keyframes chip-in{from{transform:translateY(10px) rotate(var(--r,0deg)) translateX(var(--sx,0px));opacity:0}}

.pic{
  position:relative;
  width:var(--pic); height:var(--pic);
  border:3px solid var(--gold);
  outline:2px solid var(--ink);
  background:var(--sky-top);
}
.pic img{display:block;width:100%;height:100%;object-fit:cover}

/* ray burst: behind the card, centred on the picture, driven by main.js */
.rays{
  position:absolute; z-index:-1;
  left:50%; top:50%;
  width:200vmax; height:200vmax; margin:-100vmax 0 0 -100vmax;
  pointer-events:none;
  background:repeating-conic-gradient(from 0deg, rgba(255,226,110,.42) 0 5deg, transparent 5deg 17deg);
  -webkit-mask-image:radial-gradient(circle, #000 0, #000 4%, transparent 36%);
          mask-image:radial-gradient(circle, #000 0, #000 4%, transparent 36%);
  transform:rotate(var(--rot,0deg));
  will-change:transform;
}

.cap{padding:8px 4px 2px;max-width:var(--pic)}
.pre{
  font-size:max(11.5px, calc(var(--pic) / 26));
  font-weight:700; font-style:italic; line-height:1.2;
  text-wrap:balance;
  color:var(--mute);
}
.cap h1{
  font-family:"Lobster","Comic Neue",cursive; font-weight:400;
  font-size:calc(var(--pic) / 9.6);
  line-height:1.1; letter-spacing:.01em;
  color:var(--tie);
  text-shadow:2px 2px 0 var(--gold), 3px 3px 0 var(--ink);
  margin-top:2px;
}

.mfoot{
  display:flex; align-items:flex-end; justify-content:space-between; gap:8px;
  margin-top:6px; padding-top:6px;
  border-top:2px dashed rgba(43,20,10,.35);
  max-width:var(--pic);
}
.ca{
  all:unset; box-sizing:border-box;
  flex:1; min-width:0; cursor:pointer;
  display:flex; flex-direction:column; align-items:flex-start; gap:1px;
}
.ca:focus-visible{outline:3px solid var(--tie);outline-offset:2px}
.ca-tag{
  font-size:11px; font-weight:700; letter-spacing:.06em;
  color:var(--suit);
}
.ca code{
  font-family:"Nanum Gothic Coding",ui-monospace,Menlo,monospace; font-weight:700;
  font-size:13px; line-height:1.25; color:var(--ink);
  word-break:break-all; overflow-wrap:anywhere;
  text-decoration:underline dotted var(--mute); text-underline-offset:3px;
}
.ca:hover code{background:var(--gold)}
.ca.copied code{background:var(--gold-hot)}
.meta{
  flex:none; display:inline-flex; align-items:center; gap:4px;
  font-size:11.5px; color:var(--mute); padding-bottom:1px;
}
.meta svg{color:#1E93B8}

/* ---------- composer ---------- */
.composer{display:flex;flex-direction:column;gap:12px}
.share{
  all:unset; box-sizing:border-box; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:1px;
  width:100%; padding:10px 12px 8px;
  background:var(--tie); color:var(--cloud);
  border:3px solid var(--ink); border-radius:6px;
  box-shadow:0 6px 0 var(--ink);
  text-align:center;
  transition:transform .08s ease, box-shadow .08s ease, background-color .12s;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}
.share-main{font-size:clamp(18px,5.4vw,24px);font-weight:700;letter-spacing:.03em;line-height:1.15;text-shadow:2px 2px 0 var(--ink)}
.share-sub{font-size:12.5px;font-weight:700;color:var(--gold-hot)}
.share:hover{background:#E4513A}
.share:active,.share.hit{transform:translateY(5px);box-shadow:0 1px 0 var(--ink)}
.share:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

.links{display:flex;flex-wrap:wrap;gap:8px}
.links a{
  font-size:13px; font-weight:700; text-decoration:none; color:var(--ink);
  background:var(--cloud);
  border:2px solid var(--ink); border-radius:6px;
  padding:3px 10px;
  box-shadow:2px 2px 0 var(--ink);
}
.links a:hover{background:var(--gold)}
.links a:focus-visible{outline:3px solid var(--tie);outline-offset:2px}

/* ---------- glitter + lens flare ---------- */
.glitter{position:fixed;inset:0;z-index:5;pointer-events:none;overflow:hidden}
.glitter::before,.glitter::after{content:"";position:absolute;inset:0}
.glitter::before{
  background-image:
    radial-gradient(circle at 12px 20px, #fff 0 1.6px, transparent 2.4px),
    radial-gradient(circle at 70px 66px, var(--gold-hot) 0 1.4px, transparent 2.2px),
    radial-gradient(circle at 47px 109px, #fff 0 1px, transparent 1.8px),
    radial-gradient(circle at 101px 33px, var(--gold) 0 1.8px, transparent 2.6px);
  background-size:131px 137px, 97px 103px, 173px 149px, 113px 127px;
  animation:twinkle 2.3s ease-in-out infinite alternate;
}
.glitter::after{
  background-image:
    radial-gradient(circle at 30px 80px, #fff 0 1.3px, transparent 2px),
    radial-gradient(circle at 88px 14px, var(--gold-hot) 0 2px, transparent 2.8px),
    radial-gradient(circle at 140px 120px, #fff 0 1.1px, transparent 1.9px);
  background-size:157px 139px, 109px 151px, 191px 167px;
  animation:twinkle 3.1s ease-in-out -1.4s infinite alternate;
}
@keyframes twinkle{from{opacity:.25}to{opacity:1}}
.spark{
  position:absolute; left:var(--x); top:var(--y);
  width:var(--s); height:var(--s);
  background:#fff;
  clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);
  animation:spark var(--d) ease-in-out var(--o) infinite;
}
@keyframes spark{0%,100%{transform:scale(.35) rotate(0);opacity:.2}50%{transform:scale(1) rotate(45deg);opacity:1}}

.flare{
  position:fixed; z-index:4; pointer-events:none;
  left:0; top:0;
  clip-path:polygon(25% 6%,75% 6%,100% 50%,75% 94%,25% 94%,0 50%);
  animation:drift var(--t,46s) linear var(--dl,0s) infinite alternate;
}
.fl-a{width:22vmin;height:22vmin;--t:44s;--dl:-21s;background:radial-gradient(circle,rgba(255,255,255,.7),rgba(255,233,138,.28) 62%,rgba(255,233,138,.1))}
.fl-b{width:12vmin;height:12vmin;--t:44s;--dl:-27s;background:radial-gradient(circle,rgba(255,200,220,.55),rgba(255,200,220,.18) 70%)}
.fl-c{width:30vmin;height:30vmin;--t:44s;--dl:-14s;background:radial-gradient(circle,rgba(190,240,255,.45),rgba(190,240,255,.1) 75%)}
@keyframes drift{
  from{transform:translate(88vw,4vh)}
  to{transform:translate(4vw,82vh)}
}
.fl-b{animation-name:drift-b}
.fl-c{animation-name:drift-c}
@keyframes drift-b{from{transform:translate(70vw,22vh)}to{transform:translate(16vw,66vh)}}
@keyframes drift-c{from{transform:translate(54vw,8vh)}to{transform:translate(30vw,60vh)}}

.nojs{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--ink);color:var(--cloud);font-size:13px;padding:6px 12px;text-align:center}

@media (min-width:900px){
  .chat{width:500px}
  :root{--pic:min(430px, calc(100dvh - 350px))}
}
@media (max-height:560px){
  :root{--pic:min(calc(100vw - 48px), calc(100dvh - 330px), 430px)}
  .gsub{display:none}
}
@media (prefers-reduced-motion:reduce){
  .glitter::before,.glitter::after,.spark,.flare,.chip{animation:none}
  .glitter::before,.glitter::after{opacity:.8}
  .spark{opacity:.8;transform:scale(.8)}
  .share{transition:none}
}