/**
 * 츠쿠요미 — 종이배(낚시터 게시판) 전용 스타일
 *
 * 모든 .ps-* 셀렉터는 이 파일 한 곳에서만 관리합니다.
 * 새 닉네임 이펙트/배지/카드 디자인 추가 시 이 파일에만 작성하면 됩니다.
 *
 * ── 규칙 ──────────────────────────────────────────────
 * 1. 닉네임 이펙트 셀렉터는 .ps-boat-nick.ps-boat-nick--*  (이중 클래스, 특이도 0,2,0)
 *    → 베이스 .ps-boat-nick (0,1,0)을 항상 이겨 cascade 충돌 없음
 * 2. 그라디언트 텍스트 이펙트(rainbow/aurora 등)는 반드시 text-shadow:none 포함
 * 3. 이 파일 외에 .ps-* 스타일을 추가하지 않는다
 * ──────────────────────────────────────────────────────
 */

/* ══ 전체 패널: 낚시게임 배경 단일 화면 ══ */
.ps-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  font-family: 'Gulim','Dotum','MS Gothic',monospace,sans-serif;
  font-size: 11px;
  color: rgba(180,215,245,.9);
  overflow: hidden;
  position: relative;
  background: radial-gradient(ellipse 120% 120% at 50% 30%, #0d1c34 0%, #081222 45%, #060e20 100%);
}
/* 별 */
.ps-panel::before {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    radial-gradient(ellipse 1.5px 1.5px at 11% 7%,  rgba(180,200,255,.72) 0%, transparent 100%),
    radial-gradient(ellipse 1px   1px   at 33% 4%,  rgba(180,200,255,.55) 0%, transparent 100%),
    radial-gradient(ellipse 1.5px 1.5px at 66% 8%,  rgba(180,200,255,.64) 0%, transparent 100%),
    radial-gradient(ellipse 1px   1px   at 81% 5%,  rgba(180,200,255,.45) 0%, transparent 100%),
    radial-gradient(ellipse 1px   1px   at 24% 13%, rgba(180,200,255,.42) 0%, transparent 100%),
    radial-gradient(ellipse 1.5px 1.5px at 54% 10%, rgba(180,200,255,.58) 0%, transparent 100%),
    radial-gradient(ellipse 1px   1px   at 91% 14%, rgba(180,200,255,.37) 0%, transparent 100%),
    radial-gradient(ellipse 1px   1px   at  6% 17%, rgba(180,200,255,.42) 0%, transparent 100%),
    radial-gradient(ellipse 1.5px 1.5px at 43% 3%,  rgba(180,200,255,.52) 0%, transparent 100%),
    radial-gradient(ellipse 1px   1px   at 72% 18%, rgba(180,200,255,.40) 0%, transparent 100%),
    radial-gradient(ellipse 1px   1px   at 57% 22%, rgba(180,200,255,.32) 0%, transparent 100%),
    radial-gradient(ellipse 1px   1px   at 18% 25%, rgba(180,200,255,.28) 0%, transparent 100%);
  animation: starTwinkle 7s ease-in-out infinite alternate;
}
@keyframes starTwinkle { 0%{opacity:.55} 100%{opacity:1} }
/* 달빛 */
.ps-panel::after {
  content:''; position:absolute; top:2%; right:14%; width:90px; height:90px;
  pointer-events:none; z-index:0;
  background: radial-gradient(ellipse 100% 100% at 50% 50%,
    rgba(255,250,200,.065) 0%, rgba(200,215,165,.03) 40%, transparent 70%);
  animation: moonGlow 9s ease-in-out infinite alternate;
}
@keyframes moonGlow { 0%{opacity:.65} 100%{opacity:1} }

/* 수면 흐름선 + 잔물결 */
.ps-river-fx {
  pointer-events:none; position:absolute; inset:0; z-index:0;
}
.ps-river-fx::before {
  content:''; position:absolute; top:0; left:0; right:0; height:200%;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px, transparent 44px,
    rgba(80,160,210,.013) 44px, rgba(80,160,210,.013) 46px,
    transparent 46px, transparent 67px,
    rgba(80,160,210,.008) 67px, rgba(80,160,210,.008) 68px
  );
  animation: riverFlow 18s linear infinite;
}
.ps-river-fx::after {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 4px 2px at 17% 22%, rgba(200,235,255,.25) 0%, transparent 100%),
    radial-gradient(ellipse 3px 1px at 72% 40%, rgba(200,235,255,.20) 0%, transparent 100%),
    radial-gradient(ellipse 5px 2px at 41% 65%, rgba(200,235,255,.16) 0%, transparent 100%),
    radial-gradient(ellipse 3px 1px at 85% 80%, rgba(200,235,255,.22) 0%, transparent 100%),
    radial-gradient(ellipse 4px 2px at 27% 88%, rgba(200,235,255,.14) 0%, transparent 100%);
  animation: waterSparkle 6s ease-in-out infinite alternate;
}
@keyframes riverFlow    { 0%{transform:translateY(-50%)} 100%{transform:translateY(0%)} }
@keyframes waterSparkle { 0%{opacity:.18} 100%{opacity:.6} }

/* ══ 상단 버튼 바 ══ */
.ps-top-bar {
  flex-shrink:0; position:relative; z-index:2;
  display:flex; justify-content:space-between; align-items:flex-start;
  padding: 6px 8px 4px;
}
.ps-top-left  { display:flex; gap:3px; align-items:flex-end; }
.ps-filters   { display:flex; gap:3px; align-items:flex-end; }

/* 필터/보드/주사위 버튼 공통 */
.ps-filter-btn, .ps-board-btn, .ps-rand-btn {
  font-family:inherit; cursor:pointer; border-radius:4px;
  transition: background .12s, border-color .12s;
}

/* 로케일 필터 버튼 + 흔들림 */
.ps-filter-btn {
  font-size:12px; padding:2px 7px;
  background: rgba(8,20,48,.75);
  border: 1px solid rgba(70,130,185,.25);
  color: rgba(130,185,220,.68);
  animation: btnFloat var(--bf-fd,3.5s) var(--bf-d,0s) ease-in-out infinite;
}
.ps-filters .ps-filter-btn:nth-child(1) { --bf-fd:3.2s; --bf-d:0s; }
.ps-filters .ps-filter-btn:nth-child(2) { --bf-fd:3.9s; --bf-d:0.55s; }
.ps-filters .ps-filter-btn:nth-child(3) { --bf-fd:3.5s; --bf-d:0.95s; }
.ps-filters .ps-filter-btn:nth-child(4) { --bf-fd:4.1s; --bf-d:0.3s; }
.ps-filter-btn.active {
  background:rgba(12,35,88,.92); border-color:rgba(100,190,245,.48);
  color:rgba(150,225,255,1); font-weight:bold;
}
.ps-filter-btn:hover:not(.active) { background:rgba(10,28,65,.85); }

/* 게시판 선택 버튼 + 흔들림 */
.ps-board-btn {
  font-size:11px; padding:2px 8px;
  background: rgba(8,20,48,.75);
  border: 1px solid rgba(80,150,210,.28);
  color: rgba(140,200,240,.75);
  font-weight: bold;
  animation: btnFloat 3.6s 1.1s ease-in-out infinite;
  letter-spacing: .2px;
  position: relative;
  overflow: hidden;
  min-width: 58px;
  text-align: center;
}
.ps-board-btn[data-board="river"] { border-color:rgba(80,185,230,.35);  color:rgba(130,210,255,.85); }
.ps-board-btn[data-board="lake"]  { border-color:rgba(100,90,200,.4);   color:rgba(160,145,255,.85); background:rgba(10,8,35,.78); }
.ps-board-btn[data-board="sea"]   { border-color:rgba(180,130,60,.4);   color:rgba(240,200,100,.85); background:rgba(18,10,8,.78); }
.ps-board-btn:hover { filter: brightness(1.2); }

/* 보드 버튼 교체 애니메이션 */
@keyframes boardSwap {
  0%   { opacity:1; transform:translateY(0); }
  35%  { opacity:0; transform:translateY(-8px); }
  65%  { opacity:0; transform:translateY(8px); }
  100% { opacity:1; transform:translateY(0); }
}
.ps-board-swapping { animation: boardSwap .32s ease-in-out forwards !important; }

/* 주사위 버튼 + 흔들림 */
.ps-rand-btn {
  font-size:14px; padding:2px 7px;
  background:rgba(18,8,38,.72);
  border: 1px solid rgba(150,80,210,.25);
  color: rgba(185,125,248,.78);
  animation: btnFloat 3.7s 0.7s ease-in-out infinite;
}
.ps-rand-btn:hover { border-color:rgba(185,105,255,.5); }

@keyframes btnFloat {
  0%,100% { transform:translateY(0px); }
  50%      { transform:translateY(-2.5px); }
}

/* ══ 선착장 (강물 상단 인라인) ══ */
.ps-dock-wrap {
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:center;
  padding:10px 10px 28px;
}
.ps-dock-wrap::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:1px;
  background: linear-gradient(90deg,
    transparent 0%, rgba(120,215,255,.18) 25%, rgba(165,235,255,.35) 50%,
    rgba(120,215,255,.18) 75%, transparent 100%);
  animation: surfaceShimmer 5s ease-in-out infinite alternate;
}
@keyframes surfaceShimmer { 0%{opacity:.45} 100%{opacity:1} }

/* 쿨다운 / 잠금 메시지 */
.ps-dock-msg-wrap {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:5px; height:100%;
}
.ps-dock-cd-icon { font-size:20px; opacity:.38; animation:cdBob 3.5s ease-in-out infinite; }
@keyframes cdBob { 0%,100%{transform:translateY(0) rotate(-6deg)} 50%{transform:translateY(-4px) rotate(-6deg)} }
.ps-dock-cd-text { font-size:10px; color:rgba(115,175,215,.5); letter-spacing:.3px; }
.ps-dock-lock-icon { font-size:22px; opacity:.35; animation: statusFloat 4s ease-in-out infinite; }
.ps-dock-lock-text { font-size:10px; color:rgba(160,140,210,.55); letter-spacing:.3px; text-align:center; }

/* ══ 선착장 종이배 (작성용) ══ */
.ps-dock-boat {
  width: min(340px, 86%);
  box-sizing:border-box;
  background: linear-gradient(135deg,
    rgba(8,22,52,.94) 0%, rgba(10,28,62,.90) 50%, rgba(8,20,47,.95) 100%);
  border: 1px solid rgba(100,175,225,.20);
  border-top: 1px solid rgba(155,220,255,.13);
  border-radius:10px; padding:8px 12px 9px;
  box-shadow:
    0 6px 22px rgba(0,28,75,.55), 0 2px 6px rgba(0,50,110,.32),
    inset 0 1px 0 rgba(150,220,255,.04);
}
/* 도착 — 물결에 실려 천천히 흘러오기 */
@keyframes dockArrive {
  0%   { transform: translateX(-150%) rotate(-1.2deg); opacity: 0; }
  10%  { opacity: .45; }
  100% { transform: translateX(0) rotate(var(--tilt,0deg)); opacity: 1; }
}
.ps-dock-arriving {
  animation:
    dockArrive 6s cubic-bezier(.08,.25,.3,1) forwards,
    boatFloat var(--fd,3.6s) calc(var(--fd2,0s) + 6s) ease-in-out infinite;
}
.ps-dock-idle { animation:boatFloat var(--fd,3.6s) var(--fd2,0s) ease-in-out infinite; }
/* 흘려보내기 — 도착과 동일한 물결 흐름 */
@keyframes dockSail {
  0%   { transform: translateX(0) rotate(var(--tilt,0deg)); opacity: 1; }
  88%  { opacity: .35; }
  100% { transform: translateX(150%) rotate(calc(var(--tilt,0deg) + 1deg)); opacity: 0; }
}
.ps-dock-sailing {
  animation: dockSail 6s cubic-bezier(.08,.25,.3,1) forwards !important;
  pointer-events: none;
}
/* 선착장 카드 내부 */
.ps-dboat-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:5px; }
.ps-dboat-left   { display:flex; align-items:center; gap:5px; flex:1; min-width:0; }
.ps-dboat-right  { display:flex; align-items:center; gap:2px; flex-shrink:0; }
.ps-dboat-nick {
  font-family:inherit; font-size:11px; font-weight:bold;
  background:transparent; border:none; border-bottom:1px solid rgba(100,185,235,.18);
  color:rgba(160,215,248,.95); outline:none; width:88px; padding:0 2px 1px;
  text-shadow:0 0 6px rgba(100,200,255,.22); transition:border-color .15s;
}
.ps-dboat-nick:focus        { border-bottom-color:rgba(100,200,255,.48); }
.ps-dboat-nick::placeholder { color:rgba(100,150,185,.4); font-weight:normal; }
.ps-dboat-lv { font-size:9px; color:rgba(200,165,58,.8); flex-shrink:0; }
.ps-dboat-msg {
  display:block; width:100%; box-sizing:border-box; resize:none; height:42px;
  background:transparent; border:none; border-top:1px solid rgba(80,135,185,.09);
  outline:none; color:rgba(190,220,250,.86); font-family:inherit; font-size:11px;
  line-height:1.55; padding:4px 0 2px;
}
.ps-dboat-msg::placeholder { color:rgba(100,150,190,.36); }
.ps-dboat-footer { display:flex; justify-content:space-between; align-items:center; margin-top:4px; }
.ps-dboat-char { font-size:9px; color:rgba(100,150,190,.45); }
.ps-dboat-send {
  font-family:inherit; font-size:10px; font-weight:bold; padding:3px 11px;
  background:rgba(10,34,72,.9); border:1px solid rgba(80,160,225,.32); border-radius:3px;
  color:rgba(120,200,255,.9); cursor:pointer; transition:all .14s;
}
.ps-dboat-send:hover    { background:rgba(14,46,98,.9); border-color:rgba(100,200,255,.52); }
.ps-dboat-send:disabled { opacity:.38; cursor:not-allowed; }

/* ══ 강물 ══ */
.ps-river {
  flex:1; overflow-y:auto; overflow-x:hidden;
  position:relative; z-index:1; padding:10px 0 6px;
}
/* 상태 메시지 (물 위 텍스트 부유) */
.ps-status {
  position:relative; z-index:1; text-align:center; padding:28px 12px;
  color:rgba(110,165,205,.6); font-size:11px; white-space:pre-line; line-height:1.9;
  animation:statusFloat 5s ease-in-out infinite; letter-spacing:.3px;
}
@keyframes statusFloat { 0%,100%{transform:translateY(0);opacity:.55} 50%{transform:translateY(-5px);opacity:.72} }

/* ══ 배지 이펙트 ══ */
@keyframes ps-badge-pulse {
  0%,100% { box-shadow:0 0 4px rgba(100,185,225,.3); }
  50%     { box-shadow:0 0 8px rgba(100,185,225,.52); }
}
@keyframes ps-badge-gm {
  0%   { border-color:rgba(255,110,110,.52); box-shadow:0 0 5px rgba(255,80,80,.28); }
  20%  { border-color:rgba(255,185,60,.52);  box-shadow:0 0 5px rgba(255,160,40,.28); }
  40%  { border-color:rgba(180,220,70,.52);  box-shadow:0 0 5px rgba(160,200,50,.28); }
  60%  { border-color:rgba(60,215,140,.52);  box-shadow:0 0 5px rgba(40,195,120,.28); }
  80%  { border-color:rgba(80,190,255,.52);  box-shadow:0 0 5px rgba(60,170,240,.28); }
  100% { border-color:rgba(255,110,110,.52); box-shadow:0 0 5px rgba(255,80,80,.28); }
}

/* ══ 메시지 종이배 카드 ══ */
.ps-boat {
  position:relative; z-index:1;
  /* 메시지 길이에 따라 --em(추가 여백)이 달라져 카드 폭이 미세하게 변함 */
  margin: 0 calc(28px + var(--em,0px)) 14px;
  padding:7px 11px 9px;
  border-radius:10px;
  background: linear-gradient(135deg,
    rgba(8,22,52,.93) 0%, rgba(10,27,60,.89) 50%, rgba(8,20,46,.94) 100%);
  border: 1px solid rgba(90,160,215,.18);
  border-top: 1px solid rgba(140,215,248,.12);
  box-shadow:
    0 5px 18px rgba(0,32,88,.52), 0 2px 5px rgba(0,52,108,.30),
    inset 0 1px 0 rgba(150,220,255,.035);
  animation: boatFloat var(--fd,3.5s) var(--fd2,0s) ease-in-out infinite;
  transform-origin: 50% 80%;
  transition: box-shadow .22s;
}
.ps-boat:hover {
  box-shadow:
    0 7px 22px rgba(0,52,118,.58), 0 3px 8px rgba(0,72,138,.4),
    0 0 14px rgba(80,180,245,.07), inset 0 1px 0 rgba(150,220,255,.06);
}
/* 수면 부유 — 0/50/100 세 지점만 (사인파, 급가속 없음) */
@keyframes boatFloat {
  0%, 100% {
    transform: translateX(0) translateY(0px) rotate(var(--tilt, 0deg));
  }
  50% {
    transform:
      translateX(calc(var(--dx, 0.4px) * 0.28))
      translateY(-1.8px)
      rotate(calc(var(--tilt, 0deg) * -0.55));
  }
}
@keyframes boatArrive {
  0%   { opacity:0; transform:translateY(16px) scale(.96) rotate(var(--tilt,0deg)); }
  100% { opacity:1; transform:translateY(0)    scale(1)   rotate(var(--tilt,0deg)); }
}
.ps-boat-new {
  animation:
    boatArrive .5s ease-out forwards,
    boatFloat var(--fd,3.5s) calc(var(--fd2,0s) + .5s) ease-in-out infinite;
}
/* 카드 내부 */
.ps-boat-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:5px; gap:4px; }
.ps-boat-left  { display:flex; align-items:center; gap:5px; flex-shrink:0; }
.ps-boat-right { display:flex; align-items:center; gap:2px; flex-wrap:wrap; justify-content:flex-end; }
.ps-boat-nick {
  font-weight:bold; color:rgba(160,215,248,.95); font-size:11px;
  text-shadow:0 0 6px rgba(100,200,255,.22);
}
.ps-boat-lv   { font-size:9px; color:rgba(200,165,58,.8); }
.ps-boat-msg  { color:rgba(193,220,245,.77); line-height:1.55; word-break:break-all; white-space:pre-wrap; min-height:14px; font-size:11px; }
.ps-boat-foot { margin-top:4px; text-align:right; }
.ps-boat-time { font-size:9px; color:rgba(100,155,190,.46); }

/* ══ 페이지네이션 (강물 하단 인라인) ══ */
.ps-page-wrap {
  position:relative; z-index:1;
  display:flex; justify-content:center;
  padding:8px 10px 18px;
}
.ps-page-row { display:inline-flex; gap:3px; align-items:flex-end; }
@keyframes pageWave { 0%,100%{transform:translateY(0px)} 50%{transform:translateY(-2.5px)} }
.ps-pgbtn {
  font-family:inherit; font-size:10px; padding:2px 5px; min-width:20px;
  background:rgba(8,18,44,.8); border:1px solid rgba(70,130,185,.18);
  color:rgba(112,172,215,.65); cursor:pointer; transition:all .12s; border-radius:3px;
  animation:pageWave var(--pf-fd,3.8s) var(--pf-d,0s) ease-in-out infinite;
}
.ps-pgbtn:hover:not(:disabled):not(.active) { background:rgba(11,27,62,.9); border-color:rgba(100,178,238,.36); }
.ps-pgbtn.active {
  background:rgba(12,32,82,.95); border-color:rgba(100,202,255,.48);
  color:rgba(148,225,255,1); font-weight:bold; box-shadow:0 0 6px rgba(100,202,255,.16);
}
.ps-pgbtn:disabled { opacity:.22; cursor:not-allowed; animation:none; }
.ps-pgnav { font-size:11px; padding:1px 5px; }
.ps-pg-dot { font-size:10px; color:rgba(100,150,188,.38); padding:0 1px; align-self:flex-end; padding-bottom:3px; }

/* ══ 더보기 ══ */
.ps-more-btn {
  display:inline; font-size:9px; cursor:pointer; margin-left:3px;
  color:rgba(100,185,235,.55); letter-spacing:.2px;
  transition:color .15s;
}
.ps-more-btn:hover { color:rgba(140,215,255,.85); }
.ps-boat-msg-full { display:none; }
.ps-boat-expanded .ps-boat-msg-preview { display:none; }
.ps-boat-expanded .ps-boat-msg-full    { display:inline; }

/* ══ 랜덤 모달 ══ */
.ps-modal-overlay {
  position:absolute; inset:0; background:rgba(2,5,14,.82); z-index:3000;
  display:flex; align-items:center; justify-content:center; backdrop-filter:blur(3px);
}
.ps-rand-inner { display:flex; flex-direction:column; max-width:290px; width:90%; }
.ps-btn-ghost {
  font-family:inherit; font-size:11px; padding:4px 12px;
  background:transparent; border:1px solid rgba(80,120,162,.26);
  color:rgba(118,163,198,.62); cursor:pointer; border-radius:3px; transition:all .15s;
}
.ps-btn-ghost:hover { border-color:rgba(100,162,212,.46); color:rgba(148,198,228,.86); }

/* ══════════════════════════════════════════
   닉네임 이펙트
   ─ 새 이펙트 추가 체크리스트 ─────────────
   1. ui_prestige.js NICK_EFFECT_DATA에 항목 추가
   2. 이 파일 아래에 .ps-boat-nick.ps-boat-nick--{id} { } 추가
   3. 그라디언트 텍스트(-webkit-text-fill-color:transparent)라면
      text-shadow:none 반드시 포함
   ─────────────────────────────────────────
══════════════════════════════════════════ */
.ps-boat-nick.ps-boat-nick--nick_glow_cyan {
  color: #7ec8e3 !important;
  text-shadow: 0 0 8px rgba(100,220,255,.7), 0 0 18px rgba(80,180,255,.35) !important;
}
.ps-boat-nick.ps-boat-nick--nick_glow_gold {
  color: #ffd700 !important;
  text-shadow: 0 0 8px rgba(255,215,0,.65), 0 0 20px rgba(255,180,0,.3) !important;
}
.ps-boat-nick.ps-boat-nick--nick_glow_purple {
  color: #c9a7ff !important;
  text-shadow: 0 0 8px rgba(180,120,255,.65), 0 0 18px rgba(140,80,255,.3) !important;
  animation: nickPurplePulse 3s ease-in-out infinite;
}
@keyframes nickPurplePulse {
  0%,100% { text-shadow: 0 0 8px rgba(180,120,255,.65); }
  50%     { text-shadow: 0 0 14px rgba(200,150,255,.9), 0 0 28px rgba(160,100,255,.5); }
}
.ps-boat-nick.ps-boat-nick--nick_rainbow {
  background: linear-gradient(90deg,#f55,#fa0,#ff0,#0f0,#0ff,#88f,#f5f,#f55);
  background-size: 200%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  animation: nickRainbow 3s linear infinite;
}
@keyframes nickRainbow { to { background-position: 200% center; } }
.ps-boat-nick.ps-boat-nick--nick_sparkle {
  color: #fff !important;
  text-shadow: 0 0 6px rgba(255,255,255,.8), 0 0 14px rgba(200,230,255,.5) !important;
  animation: nickSparkle 2s ease-in-out infinite;
}
@keyframes nickSparkle {
  0%,100% { text-shadow: 0 0 6px rgba(255,255,255,.8); }
  50%     { text-shadow: 0 0 12px rgba(255,255,255,1), 0 0 24px rgba(200,240,255,.8), 0 0 36px rgba(180,220,255,.4); }
}
.ps-boat-nick.ps-boat-nick--nick_aurora {
  background: linear-gradient(90deg,#00e5cc,#c9a7ff,#7ec8e3,#ffd700,#00e5cc);
  background-size: 300%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  animation: nickAurora 4s ease-in-out infinite;
}
@keyframes nickAurora { 0%,100%{background-position:0%} 50%{background-position:100%} }

/* 칭호 배지 */
.ps-boat-title {
  font-size: 9px; padding: 1px 5px; border-radius: 8px; margin-left: 3px;
  background: rgba(80,50,120,0.5); color: rgba(200,170,255,.9);
  border: 1px solid rgba(150,100,200,.35); white-space: nowrap;
}