#newSlugTray{position:fixed;right:calc(12px + env(safe-area-inset-right));bottom:calc(12px + var(--mobile-nav,0px));z-index:100;display:flex;flex-direction:row-reverse;gap:6px;max-width:calc(100vw - 24px)}
#newSlugTray[hidden]{display:none}
.new-slug-icon{position:relative;flex:0 0 44px;width:44px;height:48px;border:1px solid #b49e66;border-radius:14px;background:#20464bec;color:#fff;font-size:24px;cursor:pointer;box-shadow:0 3px 12px #0006;touch-action:manipulation;transition:transform .15s ease}
.new-slug-icon:active{transform:scale(.92)}
.new-slug-icon.unread{border:2px solid #ffdf8b}
.new-slug-icon.unread:after{content:'';position:absolute;right:3px;top:3px;width:8px;height:8px;border-radius:50%;background:#ffcf64;box-shadow:0 0 6px #ffcf64}
body.mode-build:not(.inside-tank)>#newSlugTray{bottom:calc(var(--mobile-build,220px) + var(--mobile-nav,0px) + 12px)}

/* การ์ด: flex column + scroll เฉพาะ .new-slug-content เท่านั้น (กันสโครลซ้อน/มุมโค้งโดนทับ) */
/* สำคัญ: "display:flex" ต้องผูกกับ [open] เท่านั้น ไม่งั้น id-selector จะไปทับกฎซ่อนของ dialog เอง
   (dialog:not([open]){display:none}) แล้วการ์ดจะค้างโชว์ตั้งแต่โหลดหน้าทั้งที่ยังไม่ได้เปิด */
#newSlugCard{
  box-sizing:border-box;
  width:min(560px,calc(100vw - 24px));
  max-height:min(680px,calc(100dvh - 24px));
  padding:0;
  overflow:hidden;
  border:1px solid #ddbd75;border-radius:20px;
  background:#152f34;color:#f4edda;
  box-shadow:0 24px 90px #000a,inset 0 1px #ffffff12;
  color-scheme:dark;font-family:inherit;
}
#newSlugCard[open]{
  display:flex;flex-direction:column;
  animation:newSlugPop .28s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes newSlugPop{from{transform:scale(.94);opacity:0}to{transform:scale(1);opacity:1}}
/* หมายเหตุ: ไม่ดับอนิเมชันตาม prefers-reduced-motion แล้ว — เกมนี้เล่นเอฟเฟคเสมอ (ดู reducedMotion() ใน js/config.js) */
#newSlugCard::backdrop{background:radial-gradient(ellipse at 50% 20%,#0d3038cc,#020f13e8)}

#newSlugCard>header{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 16px;border-bottom:1px solid #ffffff1a;
  background:linear-gradient(180deg,#1c3f45,#16353b)
}
#newSlugCard h2{margin:0;font-size:18px;line-height:1.3;letter-spacing:.2px}
#newSlugCard>header button{
  flex-shrink:0;min-width:36px;min-height:36px;border-radius:11px;
  background:#ffffff10;border:1px solid #ffffff22;color:#f4edda;font-size:15px;
  display:flex;align-items:center;justify-content:center;transition:background .15s
}
#newSlugCard>header button:hover{background:#ffffff1c}

.new-slug-content{flex:1 1 auto;min-height:0;overflow:auto;padding:14px 16px calc(14px + env(safe-area-inset-bottom))}

/* aspect-ratio สั้นลงกว่ารอบก่อน (5/2 แทน 560/260) — ประหยัดพื้นที่แนวตั้งให้ 11 ค่ายีน
   อยู่ในหน้าเดียวโดยไม่ต้องเลื่อน ยังคง object-fit:contain กันภาพยืด/ล้น */
.new-slug-hero{
  position:relative;border-radius:14px;overflow:hidden;
  aspect-ratio:5/2;
  display:flex;align-items:center;justify-content:center
}
.new-slug-hero.is-box{background:radial-gradient(ellipse at 50% 30%,#4a7a72,#1d3d3e 75%)}
.new-slug-hero.is-grown{background:radial-gradient(ellipse at 50% 30%,#5a6f9e,#242f52 75%)}
.new-slug-hero:before{content:'';position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(circle at 20% 15%,#ffffff22,transparent 40%),
  radial-gradient(circle at 82% 85%,#00000030,transparent 55%)}
.new-slug-hero canvas{position:relative;display:block;width:100%;height:100%;object-fit:contain}
.new-slug-badge{
  position:absolute;top:8px;left:8px;z-index:1;
  font-size:11px;font-weight:600;padding:5px 9px;border-radius:999px;
  background:#0009;color:#ffe9b3;border:1px solid #ffffff2a;backdrop-filter:blur(3px)
}

/* ชื่อ + ปุ่มถูกใจ + ปุ่มเปลี่ยนชื่อ แถวเดียวกัน — ชื่อยืดเต็มที่เหลือ ปุ่มไม่หด */
.new-slug-title-row{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin:10px 0 8px}
.new-slug-name{margin:0;font-size:19px;line-height:1.3;overflow-wrap:anywhere;flex:1 1 auto;min-width:0}
.new-slug-title-row .slugFavorite{flex:0 0 auto;min-height:36px;box-sizing:border-box;padding:7px 11px;white-space:nowrap;font-size:12.5px;border-radius:9px}
.new-slug-gone{font-size:12px;color:#9fb3ae}
.new-slug-id{font-size:11px;font-family:'IBM Plex Mono',monospace;color:#8fa9a4;margin:-4px 0 8px;overflow-wrap:anywhere;letter-spacing:.3px}

.new-slug-gene-heading{color:#f3d58c;margin:12px 0 8px;font-weight:600;font-size:12px;letter-spacing:.3px;text-transform:uppercase;opacity:.9}

/* แถวเดียวต่อค่ายีน (ป้ายชื่อ + ตัวเลขชิดขวา) แทนป้าย/ตัวเลขซ้อนกันคนละบรรทัด
   ประหยัดความสูงลงพอสมควร ให้ 11 ค่าลงจบในจอเดียวได้จริง แทนที่จะต้องเลื่อนดู */
.new-slug-genes{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:6px}
.new-slug-genes>div{min-width:0;display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:6px 10px;background:#ffffff08;border:1px solid #ffffff14;border-radius:9px}
.new-slug-genes dt{font-size:11px;line-height:1.3;overflow-wrap:anywhere;color:#a9c0ba}
.new-slug-genes dd.new-slug-gene-value{margin:0;flex-shrink:0;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:2px}
.new-slug-gene-value b{font-size:14.5px;color:#f4edda}
.new-slug-gene-value small{font-size:10px;color:#7fa39c}

.new-slug-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

@media(max-width:460px){
  #newSlugCard{border-radius:16px}
  #newSlugCard h2{font-size:16px}
  .new-slug-content{padding:11px 12px calc(12px + env(safe-area-inset-bottom))}
  .new-slug-name{font-size:17px}
  .new-slug-genes{grid-template-columns:repeat(auto-fit,minmax(124px,1fr));gap:5px}
  .new-slug-genes>div{padding:6px 8px}
}
/* มือถือแนวนอน/จอเตี้ย: ลดสัดส่วนภาพลงอีก แทนที่จะปล่อยให้การ์ดล้นจอ */
@media(max-height:640px) and (orientation:landscape){
  #newSlugCard{max-height:calc(100dvh - 12px)}
  .new-slug-hero{aspect-ratio:560/140}
}