/* ================================================ */
/*  うさころのほーむぺーじ 共通スタイル                */
/*  （1998年当時はCSSなんて使っていませんでしたが、  */
/*    blinkタグが滅んだので仕方なく使っています）    */
/* ================================================ */

body {
  margin: 8px;
  font-family: "Hiragino Kaku Gothic ProN", "MS PGothic", sans-serif;
}

/* <BLINK> の再現。合掌 */
.blink {
  animation: hpblink 1s steps(2, start) infinite;
}
@keyframes hpblink {
  50% { visibility: hidden; }
}

/* 星空タイル（入り口・メニュー用） */
.starry {
  background-color: #000018;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Crect width='140' height='140' fill='%23000018'/%3E%3Ccircle cx='12' cy='22' r='1.2' fill='%23ffffff'/%3E%3Ccircle cx='58' cy='9' r='.8' fill='%23aaccff'/%3E%3Ccircle cx='95' cy='40' r='1' fill='%23ffffcc'/%3E%3Ccircle cx='130' cy='18' r='.7' fill='%23ffffff'/%3E%3Ccircle cx='30' cy='70' r='.9' fill='%23ccddff'/%3E%3Ccircle cx='75' cy='88' r='1.3' fill='%23ffffff'/%3E%3Ccircle cx='115' cy='75' r='.8' fill='%23ffeeaa'/%3E%3Ccircle cx='18' cy='115' r='1' fill='%23ffffff'/%3E%3Ccircle cx='60' cy='130' r='.7' fill='%23aaccff'/%3E%3Ccircle cx='103' cy='112' r='1.1' fill='%23ffffff'/%3E%3C/svg%3E");
}

/* 紙タイル（コンテンツページ用） */
.paper {
  background-color: #fdf9e8;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Crect width='16' height='16' fill='%23fdf9e8'/%3E%3Ccircle cx='4' cy='5' r='.9' fill='%23f0e6c8'/%3E%3Ccircle cx='12' cy='12' r='.9' fill='%23f0e6c8'/%3E%3C/svg%3E");
}

/* アクセスカウンター（CGI風） */
.counter {
  display: inline-block;
  border: 3px inset #999;
  background: #000;
  padding: 3px;
}
.counter span {
  display: inline-block;
  width: 20px;
  margin: 0 1px;
  background: #001500;
  color: #33ff33;
  font-family: "Courier New", monospace;
  font-size: 26px;
  font-weight: bold;
  text-align: center;
  border: 1px solid #114411;
  text-shadow: 0 0 5px #33ff33;
}
.counter-mini span {
  width: 13px;
  font-size: 17px;
}

/* 工事中バリケード */
.stripe {
  height: 16px;
  background: repeating-linear-gradient(-45deg, #ffcc00 0 12px, #111111 12px 24px);
  border: 2px outset #ccaa00;
}

/* くるくる回るメール */
.mailspin {
  display: inline-block;
  animation: mailspin 2.2s linear infinite;
}
@keyframes mailspin {
  from { transform: rotateY(0); }
  to   { transform: rotateY(360deg); }
}

/* 88×31 バナー（画像が用意できなかったのでCSS製） */
a.banner88 {
  display: inline-block;
  width: 88px;
  height: 31px;
  box-sizing: border-box;
  border: 2px outset #aaaaaa;
  text-align: center;
  font-size: 10px;
  font-weight: bold;
  line-height: 1.25;
  text-decoration: none;
  padding-top: 2px;
  overflow: hidden;
}

/* NEW! アイコン */
.new {
  color: #ff0000;
  font-weight: bold;
  font-size: 11px;
}

/* マウスを追いかけるキラキラ（入り口ページ専用） */
.spark {
  position: fixed;
  pointer-events: none;
  z-index: 999;
  font-size: 13px;
  animation: sparkfall 0.8s ease-out forwards;
}
@keyframes sparkfall {
  to { transform: translateY(30px); opacity: 0; }
}

/* 掲示板の書き込み本文（改行そのまま表示） */
.bbs-body {
  white-space: pre-wrap;
  word-break: break-all;
}

/* 例のイルカ（右下のAI相談窓口） */
#iruka {
  position: fixed;
  right: 8px;
  bottom: 0;
  z-index: 900;
  text-align: right;
  transform: translateY(120%);
  transition: transform 0.7s ease-out;
  font-family: "Hiragino Kaku Gothic ProN", "MS PGothic", sans-serif;
}
#iruka.iruka-in {
  transform: translateY(0);
}
#iruka img {
  width: 110px;
  height: 108px;
  image-rendering: pixelated;
  cursor: pointer;
  vertical-align: bottom;
  margin-right: 14px;
}
#iruka.iruka-in img {
  animation: irukabob 3.2s ease-in-out infinite;
}
@keyframes irukabob {
  50% { transform: translateY(-5px); }
}
.iruka-balloon {
  position: relative;
  width: 230px;
  background: #ffffcc;
  border: 1px solid #333333;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35);
  padding: 8px;
  margin: 0 4px 12px 0;
  text-align: left;
  font-size: 12px;
  line-height: 1.6;
  color: #333333;
}
/* 吹き出しのしっぽ（縁取り用の黒三角の上に黄色三角を重ねる） */
.iruka-balloon::before {
  content: "";
  position: absolute;
  right: 88px;
  bottom: -10px;
  border-width: 10px 13px 0 0;
  border-style: solid;
  border-color: #333333 transparent transparent transparent;
}
.iruka-balloon::after {
  content: "";
  position: absolute;
  right: 90px;
  bottom: -7px;
  border-width: 7px 9px 0 0;
  border-style: solid;
  border-color: #ffffcc transparent transparent transparent;
}
.iruka-balloon input[type="text"] {
  font-size: 12px;
}
#iruka-msg {
  white-space: pre-wrap;
}
.iruka-note {
  font-size: 10px;
  color: #888888;
  margin-top: 4px;
}
.iruka-note a {
  color: #888888;
}