/* deploy/universe.css — จักรวาลอุ๋ง (universe.html).
   v4 (2026-09-30): "minimal and cute" instead of the pixel mock-up — one rounded deep-blue
   panel with soft pink / cyan / lilac glows, round star dots (a canvas) and CSS twinkles, a
   rounded Fredoka title in a pastel gradient, glassy chips, white cards with soft shadows.
   The panel sets its own colors, so it reads the same in the site's light and dark themes. */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600&display=swap');

.uv-page{--ink:#2e2877; --lilac:#c9b6ff; --pink:#ffc4e3; --butter:#fff1a8; --glass:rgba(255,255,255,.1); --glass-line:rgba(255,255,255,.18);
  --soft:0 10px 30px -10px rgba(8,6,50,.55);}

/* full screen: the sky is the whole page, edge to edge */
.uv-space{position:relative; min-height:100vh; min-height:100dvh; overflow:clip; color:#fff; font-family:var(--font-body); padding-top:22px;
  background:
    radial-gradient(520px 380px at 8% 140px, rgba(255,140,200,.2), transparent 70%),
    radial-gradient(560px 420px at 96% 30%, rgba(120,210,255,.13), transparent 70%),
    radial-gradient(640px 520px at 25% 78%, rgba(170,130,255,.2), transparent 70%),
    radial-gradient(520px 400px at 85% 96%, rgba(255,140,200,.14), transparent 70%),
    linear-gradient(180deg,#0d1349 0%,#161f66 50%,#252a80 100%);}
/* round star dots: two repeating tiles painted by universe.js (paintStarTiles) */
.uv-stars{position:absolute; inset:0; z-index:0; pointer-events:none; background-size:420px 420px,660px 660px; background-position:0 0,137px 211px;}
.uv-wrap{position:relative; z-index:6; padding-bottom:0;}
.uv-main{position:relative; z-index:1;}
.uv-main .site-footer{position:relative; z-index:2; margin:0; padding:0 16px 40px; color:rgba(255,255,255,.55);}

/* twinkles: four-point sparkles painted by paintSpaceBg() */
.uv-tws{position:absolute; inset:0; z-index:0; pointer-events:none;}
.uv-tws i{position:absolute; width:var(--s); height:var(--s); background:var(--c); translate:-50% -50%;
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);
  animation:uvTwinkle var(--d,3s) ease-in-out var(--dl,0s) infinite;}
@keyframes uvTwinkle{0%,100%{opacity:.15; scale:.55;}50%{opacity:1; scale:1;}}

.uv-head{position:relative; z-index:2; text-align:center; padding:30px 16px 8px;}
.uv-title{display:flex; align-items:center; justify-content:center; gap:clamp(8px,2vw,16px);}
.uv-title .sp{width:clamp(16px,3.4vw,24px); aspect-ratio:1; background:var(--butter);
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%); animation:uvTwinkle 2.4s ease-in-out infinite;}
.uv-title .sp:last-child{background:var(--pink); animation-delay:1.2s;}
.uv-title h1{margin:0; font-family:'Fredoka',var(--font-body); font-weight:600; line-height:1.1; letter-spacing:.01em;
  font-size:clamp(32px,8.4vw,var(--fs-uniTitle,56px));
  background:linear-gradient(90deg,var(--lilac),var(--pink) 55%,var(--butter)); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 18px rgba(255,190,230,.35));}
.uv-kicker{margin:4px 0 0; font-size:15px; color:rgba(255,255,255,.55); font-weight:700;}
.uv-bubble{display:inline-block; margin:14px auto 0; background:var(--glass); border:1px solid var(--glass-line); color:#fff; border-radius:20px; padding:9px 18px;
  font-size:var(--fs-uniBubble,15px); line-height:1.5; max-width:36ch; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);}
.uv-off{position:relative; z-index:2; text-align:center; font-weight:700; margin:40px 16px 60px;}

/* the search + packs bar stays in view while scrolling the universe */
.uv-bar{position:sticky; top:0; z-index:5; display:flex; flex-direction:column; gap:10px; align-items:center; padding:12px 14px 14px;}
.uv-search{position:relative; width:100%; max-width:420px;}
.uv-search::before{content:''; position:absolute; left:16px; top:50%; width:15px; height:15px; translate:0 -50%; pointer-events:none; opacity:.55;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e2877' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='7'/%3E%3Cpath d='M16 16l5 5'/%3E%3C/svg%3E");}
.uv-search input{width:100%; box-sizing:border-box; font:inherit; font-size:var(--fs-uniSearch,15px); color:var(--ink); background:#fff; border:2px solid transparent;
  border-radius:999px; padding:10px 16px 10px 40px; outline:none; box-shadow:var(--soft); transition:border-color .2s;}
.uv-search input:focus-visible{border-color:var(--lilac);}
.uv-search input::placeholder{color:#a39cc9;}
.uv-sugg{position:absolute; left:6px; right:6px; top:calc(100% + 8px); z-index:30; background:#fff; border-radius:20px; padding:6px;
  box-shadow:0 18px 40px -12px rgba(8,6,50,.6); display:none;}
.uv-sugg.on{display:block;}
.uv-sugg button{display:flex; align-items:center; gap:10px; width:100%; border:0; border-radius:14px; background:none; color:var(--ink);
  font:inherit; font-weight:700; font-size:calc(var(--fs-uniSearch,15px) - 1px); padding:6px 10px; text-align:left; cursor:var(--cursor-pointer-url), pointer;}
.uv-sugg button:hover{background:#f5f1ff;}
.uv-sugg button img{height:26px;}
.uv-sugg button b{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.uv-sugg button .n{margin-left:auto; flex:none; font-size:12px; background:#fff0f7; color:#e0529f; border-radius:999px; padding:2px 9px;}
.uv-sugg .none{padding:10px 12px; font-weight:700; color:#a39cc9;}
.uv-chips{display:flex; gap:6px; flex-wrap:wrap; justify-content:center;}
.uv-chip{display:flex; align-items:center; gap:5px; font-size:var(--fs-uniChip,12px); font-weight:700; padding:3px 11px 3px 5px; border-radius:999px;
  background:var(--glass); border:1px solid var(--glass-line); color:rgba(255,255,255,.9); white-space:nowrap; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);}
.uv-chip img{height:20px;}
.uv-chip b{color:var(--butter);}
.uv-chip small{color:rgba(255,255,255,.5); font-weight:600; margin-left:-3px;}

/* "มี N ดวงในจักรวาลนี้" */
.uv-me{position:relative; z-index:4; display:none; width:min(460px,calc(100% - 28px)); margin:4px auto 14px; background:#fff; color:var(--ink);
  border-radius:28px; padding:18px 18px 18px; text-align:center; box-shadow:0 20px 44px -16px rgba(8,6,50,.7);}
.uv-me.on{display:block; animation:uvPop .35s cubic-bezier(.2,1.4,.4,1);}
@keyframes uvPop{from{opacity:0; transform:translateY(8px) scale(.97);}}
.uv-me .x{position:absolute; right:12px; top:10px; width:30px; height:30px; border:0; border-radius:50%; background:#f4f1fb; font-size:14px; color:#8f88b8;
  cursor:var(--cursor-pointer-url), pointer;}
.uv-me .who{font-size:var(--fs-uniMeName,21px); font-weight:700; overflow-wrap:anywhere; padding:0 30px;}
.uv-me .big{margin:2px 0 14px; font-weight:700; font-size:var(--fs-uniMeText,15px); color:#6f68a3;}
.uv-me .big b{font-family:'Fredoka',var(--font-body); font-weight:600; font-size:26px; color:#e0529f; margin:0 6px; vertical-align:-2px;}
.uv-me .items{display:flex; flex-wrap:wrap; gap:10px 16px; justify-content:center; align-items:flex-end;}
.uv-me .it{position:relative; display:flex; flex-direction:column; align-items:center; gap:3px; font-weight:700; font-size:calc(var(--fs-uniMeText,15px) - 3px); color:var(--c);}
.uv-me .it img{height:52px;}
.uv-me .it .x2{position:absolute; right:-12px; top:-6px; background:var(--ink); color:#fff; border-radius:999px; padding:0 7px; font-size:12px; line-height:1.6;}
.uv-me .share{margin-top:14px; font:inherit; font-weight:700; font-size:var(--fs-uniMeText,15px); color:var(--ink); border:0; border-radius:999px;
  background:linear-gradient(90deg,#ffe3f1,#efe8ff); padding:9px 22px; cursor:var(--cursor-pointer-url), pointer; transition:transform .15s;}
.uv-me .share:hover{transform:translateY(-1px);}

/* the scattered universe */
.uv-uni{position:relative; z-index:1; margin:0 auto; width:calc(100% - 32px); max-width:1800px;}
.uv-empty{position:relative; z-index:2; text-align:center; font-weight:700; margin:30px 16px;}
.uv-obj{position:absolute; display:flex; flex-direction:column; align-items:center; background:none; border:0; padding:0; font:inherit;
  cursor:var(--cursor-pointer-url), pointer;}
/* only the pieces near the screen bob (.on is toggled by universe.js watchBob) */
.uv-obj.on{animation:uvBob var(--dur,4s) ease-in-out var(--dl,0s) infinite alternate;}
.uv-obj:focus-visible{outline:2px solid var(--butter); outline-offset:4px; border-radius:14px;}
.uv-obj .art{position:relative; display:block; width:var(--w); height:var(--h); transition:transform .2s; filter:drop-shadow(0 6px 10px rgba(6,4,40,.35));}
.uv-obj:hover .art{transform:scale(1.06);}
.uv-obj .art img{position:absolute; inset:0; width:100%; height:100%;}
/* the seal from /pet/moods.png riding the piece — placed by universe.js (SEAT) */
.uv-obj .art img.seal{inset:auto; height:auto; transform:translate(-50%,-50%);}
.uv-obj .spin{animation:uvSpin 40s linear infinite;}
.uv-obj.t-star .art{filter:drop-shadow(0 0 8px rgba(255,214,110,.45));}
.uv-obj.t-galaxy .art{filter:drop-shadow(0 0 16px rgba(110,230,255,.45));}
.uv-obj .name{margin-top:3px; font-size:var(--fs-uniName,12px); font-weight:700; line-height:1.35; padding:1px 9px; border-radius:999px;
  background:rgba(255,255,255,.92); color:var(--ink); max-width:10.5em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
/* bigger packs get bigger name tags, all following the one "ชื่อบนดาว" slider */
.uv-obj.t-rocket .name{font-size:calc(var(--fs-uniName,12px) * 1.08);}
.uv-obj.t-ufo .name{font-size:calc(var(--fs-uniName,12px) * 1.17);}
.uv-obj.t-galaxy .name{font-size:calc(var(--fs-uniName,12px) * 1.5); padding:3px 16px; max-width:13em; background:#fff; color:#6a4cd0;}
.uv-obj.found{z-index:3;}
.uv-obj.found .name{background:var(--butter); color:var(--ink);}
.uv-obj.found .art{animation:uvGlow .9s ease-in-out infinite alternate;}
@keyframes uvBob{from{transform:translateY(-5px);}to{transform:translateY(5px);}}
@keyframes uvSpin{to{transform:rotate(360deg);}}
@keyframes uvGlow{from{filter:drop-shadow(0 0 4px rgba(255,236,150,.7));}to{filter:drop-shadow(0 0 16px #ffe98a) drop-shadow(0 0 4px #fff);}}
.uv-shoot{position:absolute; z-index:0; width:110px; height:2px; border-radius:2px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.9));
  transform:rotate(-28deg); pointer-events:none; animation:uvShoot 1.3s ease-out forwards; filter:drop-shadow(0 0 4px #fff);}
@keyframes uvShoot{from{opacity:1; translate:0 0;}to{opacity:0; translate:-380px 200px;}}

.uv-foot{position:relative; z-index:2; text-align:center; padding:30px 16px 36px;}
.uv-foot p,.uv-foot a{font-size:var(--fs-uniFoot,16px);}
.uv-empty{font-size:var(--fs-uniFoot,16px);}
.uv-foot p{display:inline-block; margin:0 0 14px; color:rgba(255,255,255,.85); font-weight:700;}
.uv-foot a{display:inline-block; background:linear-gradient(90deg,#ffe3f1,#fff4c2); color:var(--ink); font-weight:700; text-decoration:none; border-radius:999px;
  padding:11px 24px; box-shadow:0 10px 26px -8px rgba(255,170,215,.6); transition:transform .15s;}
.uv-foot a:hover{transform:translateY(-2px);}

.uv-toast{position:fixed; left:50%; bottom:calc(18px + env(safe-area-inset-bottom,0px)); z-index:60; transform:translate(-50%,180%);
  transition:transform .35s cubic-bezier(.2,1.4,.4,1); display:flex; align-items:center; gap:12px; background:#fff; color:#2e2877;
  border-radius:24px; padding:10px 20px 10px 12px; box-shadow:0 18px 40px -12px rgba(8,6,50,.55); max-width:90vw; font-family:var(--font-body);}
.uv-toast.show{transform:translate(-50%,0);}
.uv-toast img{width:52px; height:auto; flex:none;}
.uv-toast strong{display:block; font-size:var(--fs-uniToast,19px); overflow-wrap:anywhere;}
.uv-toast small{font-size:calc(var(--fs-uniToast,19px) - 6px); color:#7d74b3;}

/* share modal — outside the panel, so it sets its own colors */
.uv-sh{position:fixed; inset:0; z-index:100; background:rgba(13,19,73,.6); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  display:none; align-items:center; justify-content:center; padding:16px; font-family:var(--font-body);}
.uv-sh.on{display:flex;}
.uv-sh-box{background:#fff; color:#2e2877; border-radius:28px; box-shadow:0 24px 60px -16px rgba(8,6,50,.7); padding:16px; max-width:500px; width:100%;
  max-height:calc(100vh - 32px); overflow:auto; text-align:center;}
.uv-sh-tabs,.uv-sh-acts{display:flex; gap:6px; justify-content:center; flex-wrap:wrap;}
.uv-sh-tabs{margin-bottom:12px;}
.uv-sh-acts{margin-top:12px;}
.uv-sh button{font:inherit; font-weight:700; border:0; border-radius:999px; background:#f4f1fb; color:#2e2877; padding:7px 16px; cursor:var(--cursor-pointer-url), pointer;}
.uv-sh-tabs button.on{background:#2e2877; color:#fff;}
.uv-sh-acts .dl{background:linear-gradient(90deg,#ffe3f1,#fff4c2);}
.uv-sh img{width:100%; max-width:360px; border-radius:18px; background:#161f66; aspect-ratio:1080/1350;}

.nav-pill.uni.active{background:#a47cf0; color:#fff;}

@media (prefers-reduced-motion:reduce){
  .uv-obj.on,.uv-obj .spin,.uv-title .sp,.uv-obj.found .art,.uv-tws i{animation:none;}
  .uv-tws i{opacity:.6;}
  .uv-shoot{display:none;}
}