.ks-compass-wrapper{
  background:linear-gradient(180deg,#0f1a24,#081018);
  color:#f5f5f5;
  font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;
  text-align:center;
  padding:50px 0;
}

/* 本体 */
.ks-compass{
  width:280px;
  height:280px;
  margin:0 auto 30px;
  position:relative;
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%, #1c2b36 0%, #0d1620 80%);
  border:3px solid rgba(212,175,55,0.5);
  box-shadow:0 0 25px rgba(212,175,55,0.15),
             inset 0 0 30px rgba(0,0,0,0.6);
}

/* 方位 */
.ks-direction{
  position:absolute;
  font-size:20px;
  font-weight:600;
  color:#e6d7a3;
}

.ks-n{ top:12px; left:50%; transform:translateX(-50%); }
.ks-s{ bottom:12px; left:50%; transform:translateX(-50%); }
.ks-e{ right:12px; top:50%; transform:translateY(-50%); }
.ks-w{ left:12px; top:50%; transform:translateY(-50%); }

.ks-description{
  font-size:15px;
  line-height:1.8;
  color:#dcd6c3;
  margin:0 auto 30px;
  padding:0 6%;
  max-width:520px;
  letter-spacing:1px;
}

/* 針 */
.ks-needle{
  position:absolute;
  width:6px;
  height:120px;
  background:linear-gradient(180deg,#c62828,#8e0000);
  top:50%;
  left:50%;
  transform-origin:50% 100%;
  transform:translate(-50%, -100%) rotate(0deg);
  border-radius:4px;
  box-shadow:0 0 12px rgba(255,0,0,0.4);
}

/* 中央点 */
.ks-center{
  width:16px;
  height:16px;
  background:#d4af37;
  border-radius:50%;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  box-shadow:0 0 10px rgba(212,175,55,0.7);
}

/* 度数 */
.ks-degree{
  font-size:36px;
  color:#f0e6c0;
  letter-spacing:2px;
}

/* ボタン */
.ks-buttons{
  margin-top:20px;
}

.ks-btn{
  margin:8px;
  padding:12px 26px;
  font-size:15px;
  border:none;
  border-radius:30px;
  font-weight:500;
  cursor:pointer;
}

.ks-start{
  background:linear-gradient(145deg,#bfa14a,#8c6d1f);
  color:white;
}

.ks-stop{
  background:linear-gradient(145deg,#444,#222);
  color:#ddd;
}

/* 状態 */
.ks-status{
  margin-top:10px;
  font-size:14px;
  color:#aaa;
}