/* Fredoka, self-hosted (SIL Open Font License, see /fonts/OFL.txt) */
@font-face{font-family:'Fredoka';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/fredoka-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Fredoka';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/fredoka-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Fredoka';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/fredoka-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Fredoka';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/fredoka-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Fredoka';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/fredoka-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Fredoka';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/fredoka-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --space-1:#170b42; --space-2:#07041a;
  --ink:#2b1a4a; --card:#fff8ec;
  --text:#f4efff; --muted:#b8acdf;
  --accent:#ffd84d;
  --panel:rgba(30,18,72,.72); --panel-edge:rgba(190,170,255,.25);
  color-scheme: dark;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden}
body{
  background:
    radial-gradient(ellipse at 50% 125%, #3b1d6e 0%, transparent 60%),
    radial-gradient(ellipse at 50% 0%, var(--space-1), var(--space-2) 75%);
  background-color:var(--space-2);
  color:var(--text);
  font-family:'Fredoka','Trebuchet MS',system-ui,sans-serif;
  -webkit-tap-highlight-color:transparent;
}

/* ---------- drifting nebula blobs ---------- */
.nebula{position:fixed;border-radius:50%;filter:blur(70px);opacity:.42;pointer-events:none;animation:drift 40s ease-in-out infinite alternate}
.n1{width:50vmax;height:40vmax;left:-12vmax;top:-8vmax;background:#6b2fbf}
.n2{width:45vmax;height:35vmax;right:-14vmax;top:22vh;background:#1f6fae;animation-duration:55s}
.n3{width:38vmax;height:30vmax;left:28vw;bottom:-18vmax;background:#c2407f;opacity:.3;animation-duration:47s}
@keyframes drift{to{transform:translate(6vmax,4vmax) scale(1.15)}}

#sky,#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}
#sky{z-index:0}
#fx{z-index:7}

/* ---------- scrollable world ---------- */
#viewport{position:fixed;inset:0;z-index:2;overflow:auto;scrollbar-width:none;cursor:grab;user-select:none;-webkit-user-select:none;overscroll-behavior:none}
#viewport::-webkit-scrollbar{display:none}
#viewport.dragging{cursor:grabbing}
#world{position:relative}

/* ---------- decorations (live in the world, scroll with it) ---------- */
.deco{position:absolute;pointer-events:none;animation:float 7s ease-in-out infinite alternate}
.planet{width:170px;filter:drop-shadow(0 0 24px rgba(255,159,107,.35))}
.moon{width:70px;animation-duration:9s;animation-direction:alternate-reverse;filter:drop-shadow(0 0 18px rgba(232,228,255,.35))}
.planet2{width:110px;animation-duration:11s;filter:drop-shadow(0 0 20px rgba(90,209,200,.35))}
.ufo{width:96px;animation:ufo 6s ease-in-out infinite;filter:drop-shadow(0 0 14px rgba(201,168,255,.5))}
@keyframes float{from{transform:translateY(-10px) rotate(-6deg)}to{transform:translateY(10px) rotate(6deg)}}
@keyframes ufo{0%,100%{transform:translate(0,0) rotate(-4deg)}25%{transform:translate(40px,-14px) rotate(6deg)}50%{transform:translate(70px,6px) rotate(-2deg)}75%{transform:translate(24px,12px) rotate(4deg)}}

/* ---------- minimap ---------- */
#minimap{position:fixed;right:20px;top:78px;z-index:5;border-radius:14px;background:rgba(20,10,50,.6);border:1.5px solid var(--panel-edge);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);cursor:pointer;touch-action:none}
@media (max-width:699px){#minimap{display:none}}

/* ---------- header ---------- */
header{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:10px;padding:16px 20px;z-index:5;pointer-events:none}
header>*{pointer-events:auto}
h1{margin:0;font-size:clamp(22px,3vw,30px);font-weight:600;letter-spacing:.3px;text-shadow:0 0 18px rgba(255,216,77,.45)}
h1 span{color:var(--accent)}
.sub{margin:2px 0 0;color:var(--muted);font-size:14px}
.tools{display:flex;gap:8px}
.chip{font:inherit;font-size:14px;color:var(--text);background:var(--panel);border:1.5px solid var(--panel-edge);border-radius:999px;padding:8px 14px;cursor:pointer;backdrop-filter:blur(8px);transition:transform .15s,background .15s}
.chip:hover{transform:translateY(-2px);background:rgba(60,40,120,.85)}

/* ---------- star layer ---------- */
#layer{position:absolute;left:80px;right:80px;top:120px;bottom:230px;pointer-events:none}
.star{position:absolute;width:var(--s);height:var(--s);margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);padding:0;border:0;background:none;cursor:pointer;pointer-events:auto;outline:none;animation:bob var(--d) ease-in-out var(--dl) infinite alternate}
.star svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 6px var(--c)) drop-shadow(0 0 16px var(--c));transition:transform .3s cubic-bezier(.3,1.8,.5,1)}
.star:hover svg,.star:focus-visible svg{transform:scale(1.4) rotate(14deg)}
.star.new svg{animation:pop 1s cubic-bezier(.3,1.8,.5,1) var(--pd,0s) both}
@keyframes bob{from{transform:translateY(-5px) rotate(-5deg)}to{transform:translateY(5px) rotate(5deg)}}
@keyframes pop{0%{transform:scale(0) rotate(-180deg)}100%{transform:scale(1) rotate(0)}}

.body{fill:var(--c);stroke:var(--c);stroke-width:9;stroke-linejoin:round}
.shine{fill:none;stroke:#fff;stroke-width:4;stroke-linecap:round;opacity:.65}
.cheek{fill:#ff5f9a;opacity:.45}
.eye{fill:#2b1a4a;transform-box:fill-box;transform-origin:center;animation:blink var(--bl,5s) var(--bd,0s) infinite}
.mouth{fill:none;stroke:#2b1a4a;stroke-width:2.8;stroke-linecap:round}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}

.ring{position:absolute;inset:-35%;border-radius:50%;border:2px solid var(--c);opacity:0;pointer-events:none;animation:ping 2.8s ease-out var(--dl) infinite}
.star:not(.unread) .ring{display:none}
@keyframes ping{0%{transform:scale(.45);opacity:.75}100%{transform:scale(1.5);opacity:0}}

.orbit{position:absolute;inset:-45%;border-radius:50%;border:1.5px dashed rgba(255,255,255,.35);pointer-events:none;animation:spin 6s linear infinite}
.orbit::after{content:'';position:absolute;top:-4px;left:50%;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:#fff;box-shadow:0 0 8px #fff}
@keyframes spin{to{transform:rotate(360deg)}}

.tip{position:absolute;left:50%;bottom:calc(100% + 12px);transform:translate(-50%,4px);white-space:nowrap;font-size:12px;color:var(--text);background:rgba(20,10,50,.9);border:1px solid var(--panel-edge);padding:3px 10px;border-radius:999px;opacity:0;pointer-events:none;transition:.2s}
.star:hover .tip,.star:focus-visible .tip{opacity:1;transform:translate(-50%,0)}

/* ---------- composer ---------- */
.composer{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);width:min(640px,calc(100% - 32px));z-index:4;background:var(--panel);border:1.5px solid var(--panel-edge);border-radius:24px;padding:14px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 10px 40px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.08)}
.composer .top{display:flex;justify-content:space-between;align-items:baseline;gap:6px 12px;flex-wrap:wrap;margin:0 4px 8px}
.composer .title{font-size:13px;color:var(--muted)}
.about{font-size:12px;color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.about:hover{color:var(--text)}
.ts:not(:empty){margin-top:8px}
.field{width:100%;font:inherit;font-size:16px;color:var(--text);background:rgba(10,5,30,.55);border:1.5px solid rgba(190,170,255,.2);border-radius:16px;padding:11px 14px;outline:none;transition:border-color .2s,box-shadow .2s}
.field::placeholder{color:#8e82b8}
.field:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(255,216,77,.15)}
textarea.field{resize:none;display:block}
.row{display:flex;gap:10px;align-items:center;margin-top:10px;flex-wrap:wrap}
.row .field{flex:1 1 160px;min-width:0;border-radius:999px;padding:9px 14px;font-size:15px}
.count{font-size:12px;color:var(--muted);min-width:52px;text-align:right}
.send{font:inherit;font-weight:600;font-size:15px;color:var(--ink);background:linear-gradient(180deg,#ffe57a,#ffc93c);border:0;border-radius:999px;padding:11px 18px;cursor:pointer;box-shadow:0 4px 0 #c98f12,0 0 22px rgba(255,216,77,.35);transition:transform .1s,box-shadow .1s;white-space:nowrap}
.send:hover{transform:translateY(-1px)}
.send:active{transform:translateY(3px);box-shadow:0 1px 0 #c98f12}
.send:disabled{opacity:.6;cursor:wait}
.shake{animation:shake .45s}
@keyframes shake{20%,60%{transform:translateX(calc(-50% - 8px))}40%,80%{transform:translateX(calc(-50% + 8px))}}

.ghost{position:fixed;z-index:8;pointer-events:none;color:var(--text);font-size:16px;line-height:1.35;padding:11px 14px;border-radius:16px;background:rgba(255,216,77,.18);overflow:hidden;white-space:pre-wrap;word-break:break-word;transition:all .6s cubic-bezier(.6,-.3,.7,1)}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;z-index:10;display:grid;place-items:center;padding:56px 16px 16px;background:rgba(5,2,20,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:fade .3s}
.modal[hidden]{display:none}
@keyframes fade{from{opacity:0}}
.card{position:relative;width:min(460px,100%);background:var(--card);color:var(--ink);border:3px solid var(--ink);border-radius:28px;padding:48px 26px 22px;box-shadow:0 10px 0 var(--ink),0 0 70px rgba(255,216,77,.28);text-align:center;animation:fly .65s cubic-bezier(.2,1.35,.4,1) both}
@keyframes fly{from{transform:translate(var(--fx),var(--fy)) scale(.05) rotate(-25deg);opacity:0}50%{opacity:1}to{transform:none;opacity:1}}
.card-star{position:absolute;left:50%;top:-44px;width:84px;height:84px;margin-left:-42px}
.card-star svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 12px var(--c));animation:wiggle 2.4s ease-in-out infinite}
@keyframes wiggle{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg) scale(1.06)}}
.mine-tag{display:inline-block;margin:0 0 8px;font-size:12px;font-weight:600;background:#ffe57a;border:2px solid var(--ink);border-radius:999px;padding:2px 10px}
.mine-tag[hidden]{display:none}
blockquote{margin:4px 0 14px;font-size:clamp(19px,4.4vw,23px);line-height:1.4;font-weight:500;overflow-wrap:anywhere}
blockquote .w{display:inline-block;opacity:0;transform:translateY(8px);animation:word .45s forwards}
@keyframes word{to{opacity:1;transform:none}}
.meta{color:#7a6a9a;font-size:14px;margin:0 0 18px}
.actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.btn{font:inherit;font-weight:600;font-size:15px;border:2.5px solid var(--ink);border-radius:999px;padding:9px 18px;cursor:pointer;background:#fff;color:var(--ink);box-shadow:0 4px 0 var(--ink);transition:transform .1s,box-shadow .1s}
.btn.primary{background:#cdbcff}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.report{display:block;margin:14px auto 0;font:inherit;font-size:12px;color:#8a7aa8;background:none;border:0;cursor:pointer;padding:4px 8px;border-radius:8px}
.report:hover{color:#c0392b;background:rgba(192,57,43,.08)}
.report[hidden]{display:none}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;top:90px;transform:translate(-50%,-16px);opacity:0;z-index:9;max-width:calc(100% - 32px);text-align:center;background:var(--panel);border:1.5px solid var(--panel-edge);padding:10px 18px;border-radius:999px;transition:.35s;pointer-events:none;backdrop-filter:blur(8px)}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media (max-width:640px){
  header{padding:12px 16px}
  .send{flex:1 1 100%}
  .count{display:none}
}
@media (prefers-reduced-motion:reduce){
  .star,.ring,.orbit,.deco,.nebula,.card-star svg{animation:none}
  .card{animation:fade .2s}
}