*{box-sizing:border-box}
html{background:#d9e9ff}
body{
  margin:0;
  color:#111;
  font-family:"MS PGothic","MS Gothic","Hiragino Kaku Gothic ProN",sans-serif;
  background:
    linear-gradient(90deg,rgba(255,255,255,.25) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.25) 1px,transparent 1px),
    #d9e9ff;
  background-size:18px 18px;
}
a{color:#0000ee}
a:visited{color:#551a8b}
.page{
  width:min(760px,calc(100% - 20px));
  margin:12px auto 40px;
  padding:14px 18px 24px;
  background:#fff;
  border:3px ridge #7f9db9;
  box-shadow:4px 4px 0 rgba(0,0,0,.18);
}
.header{text-align:center}
.stars{color:#000080;font-weight:bold;letter-spacing:2px}
h1{
  margin:8px 0 4px;
  color:#000080;
  font-family:"Times New Roman","MS Mincho",serif;
  font-size:34px;
  text-shadow:2px 2px #c8c8ff;
}
.subtitle{margin:4px 0 12px;color:#800080}
.counter-box{
  text-align:center;
  padding:10px;
  margin:12px auto;
  border:2px dotted #ff66aa;
  background:#fff8fc;
}
.counter-box p{margin:4px}
.counter{
  display:inline-block;
  min-width:210px;
  padding:3px 12px;
  margin:4px 0;
  color:#39ff14;
  background:#111;
  border:3px inset #aaa;
  font-family:"Courier New",monospace;
  font-weight:bold;
  font-size:30px;
  letter-spacing:5px;
  text-shadow:0 0 4px #39ff14;
}
.kiriban{
  margin-top:8px;
  padding:8px;
  border:3px double #ff0000;
  color:#d00000;
  background:#fff6a8;
  font-size:18px;
}
.small{font-size:13px}
.marquee{
  overflow:hidden;
  border:1px solid #000080;
  background:#ffffcc;
  white-space:nowrap;
  margin:14px 0;
  height:28px;
  line-height:26px;
}
.marquee-inner{
  display:inline-block;
  min-width:100%;
  padding-left:100%;
  animation:marquee 15s linear infinite;
  color:#cc0000;
  font-weight:bold;
}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-100%)}}
.menu-box,.clap-box,.notice-box{
  margin:16px 0;
  padding:10px;
  border:2px groove #999;
  background:#f8f8ff;
}
h2{
  margin:0 0 10px;
  text-align:center;
  font-size:20px;
  color:#000080;
}
.menu-link{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:42px;
  margin:6px 0;
  padding:7px 10px;
  border:2px outset #ccc;
  background:#eeeeee;
  font-size:17px;
}
.menu-link.live:hover{background:#ffffcc}
.menu-link.disabled{color:#666}
.num{font-size:21px}
.new{color:red;font-weight:bold;font-style:italic;margin-left:auto}
.construction{margin-left:auto;color:#b45f06;font-size:13px}
.blink{animation:blink 1s steps(1,end) infinite}
@keyframes blink{50%{visibility:hidden}}
.clap-box{text-align:center;background:#fff6ff;border-color:#d18bd1}
.clap-box textarea{
  display:block;
  width:min(520px,100%);
  height:72px;
  margin:6px auto;
  resize:vertical;
  font:16px sans-serif;
}
.clap-button{
  min-width:190px;
  padding:9px 18px;
  border:3px outset #ccc;
  background:#e6e6e6;
  color:#000;
  font-weight:bold;
  font-size:16px;
  cursor:pointer;
}
.clap-button:active{border-style:inset}
.clap-count{font-size:13px}
.clap-thanks{padding:8px;color:#d00000;background:#ffffcc;border:2px dotted #d00000;margin-bottom:8px}
.clap-error{padding:8px;color:#b00020}
.honeypot{position:absolute;left:-9999px}
.notice-box{background:#ffffee}
.notice-box p{margin:6px}
.retro-notes{text-align:center;font-size:14px;color:#333}
footer{text-align:center;margin-top:18px;color:#555}
footer hr{border:0;border-top:1px dashed #777}
.tiny{font-size:11px}
.admin-link{font-size:12px}
.copyright{font-size:11px;color:#888}
.sp-only{display:none}
@media(max-width:600px){
  .page{width:calc(100% - 10px);margin:5px auto 20px;padding:10px}
  h1{font-size:25px}
  .sp-only{display:block}
  .counter{min-width:190px;font-size:25px;letter-spacing:4px}
  .menu-link{font-size:15px;padding:8px}
  .construction{font-size:11px}
  .marquee{font-size:13px}
}