body{  font-size: 12px; line-height: 150%; text-align:center}
.chess_box,.menu_dy,.menu_qj{ display:none}
.menu_box{ display:none1; width:316px; height:232px; padding-top:190px; background:url(../img/init_bg.png); margin:60px auto 0;}
.menu_box a{ width:214px; height:46px; text-align:center; line-height:46px; background:url(../img/btn_bg.png) center 0 no-repeat; display:block; margin:10px 0 10px 45px; font: normal 18px/46px "Microsoft YaHei","PingFang SC","Hiragino Sans GB","Noto Sans CJK SC",sans-serif; color:#FF8A00; cursor:pointer; }
.menu_box a:hover{ background: url(../img/btn_bg.png) center -46px no-repeat; color: #FFA433;}
.menu_info{ background:#463521; color:#FFF; padding:5px 10px; line-height:190%; text-align:left; width:194px;margin:10px 0 10px 45px;}
.menu_fh{ background:url(../img/btn_fh.png); width:14px; height:14px; float:right; cursor:pointer}
.bn_box input{font: normal 14px/46px "Microsoft YaHei","PingFang SC","Hiragino Sans GB","Noto Sans CJK SC",sans-serif; margin:3px 5px 0; padding:2px; width:100px }

/* ---------------------------------------------------------------------------
   ADDED FOR SELF-HOSTING: let the board fit a phone.

   The canvas is created at the skin's fixed size (523x580) with no CSS rule of
   any kind, so on any viewport narrower than that the board is simply cut off
   at the right edge — verified at 341px, where three of the nine files were
   off-screen. Roughly half this site's readers are on a phone.

   Scaling the canvas with CSS alone is not enough: play.getClickPoint() reads
   e.pageX in CSS pixels and compares it against canvas-internal coordinates, so
   a scaled board would take every tap on the wrong square. That function is
   patched to divide by the same ratio; the two changes only work together.
   --------------------------------------------------------------------------- */
#chess { max-width: 100%; height: auto; }
.bn_box input { max-width: 45%; }