/* ===== 昔ながらの素人サイト風 ===== */
body {
  background-color: #ffffff;
  color: #000000;
  font-family: 'ＭＳ Ｐゴシック', 'MS PGothic', Osaka, sans-serif;
  font-size: 15px;
  margin: 0;
  padding: 4px 0;
}

a { color: #0000ff; }
a:visited { color: #800080; }
a:hover { color: #ff0000; text-decoration: underline; }

#outer {
  width: 1100px;
  margin: 0 auto;
  background: #ffffff;
  border: 3px solid #004000;
}

/* ヘッダー */
#header {
  background: #006600;
  border-bottom: 4px solid #ffff00;
  text-align: center;
  padding: 10px 8px 8px;
}
#site-title {
  font-size: 28px;
  font-weight: bold;
  color: #ffff00;
  letter-spacing: 3px;
  text-shadow: 2px 2px 0 #003300;
}
#site-sub {
  font-size: 13px;
  color: #ccffcc;
  margin-top: 4px;
}
#header-btns { margin-top: 6px; }
#bgm-btn {
  background: #004400;
  border: 2px outset #669966;
  color: #ffff99;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  padding: 3px 10px;
}
#bgm-btn:active { border-style: inset; }

/* ticker */
#ticker {
  background: #004400;
  border-bottom: 2px solid #ffff00;
  padding: 4px 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 14px;
  color: #ffff00;
}
#ticker-inner {
  display: inline-block;
  animation: tick 25s linear infinite;
  padding-left: 100%;
}
@keyframes tick { from{transform:translateX(0)} to{transform:translateX(-100%)} }

/* レイアウト */
#layout { display: table; width: 100%; border-top: 2px solid #006600; }
#sidebar {
  display: table-cell;
  width: 180px;
  vertical-align: top;
  border-right: 2px solid #006600;
  background: #f0fff0;
  padding: 8px 6px;
}
#main { display: table-cell; vertical-align: top; padding: 8px 10px; background: #ffffff; }
#sub { display: table-cell; width: 280px; vertical-align: top; border-left: 2px solid #006600; padding: 8px 10px; background: #ffffff; }

/* サイドボックス */
.sbox {
  border: 2px solid #006600;
  background: #ffffff;
  margin-bottom: 8px;
}
.sbox-ttl {
  background: #006600;
  color: #ffff00;
  font-size: 13px;
  font-weight: bold;
  padding: 3px 6px;
  border-bottom: 1px solid #004400;
}
.sbox-body { padding: 6px 7px; font-size: 13px; line-height: 1.9; color: #000000; }

#counter-num {
  display: block;
  font-size: 24px;
  color: #cc0000;
  font-family: 'Courier New', monospace;
  letter-spacing: 3px;
  text-align: center;
  margin: 4px 0;
  font-weight: bold;
}
.c-label { font-size: 12px; color: #006600; text-align: center; display: block; font-weight: bold; }
#kiriban-msg { font-size: 12px; color: #cc0000; text-align: center; animation: blink 1s step-end infinite; min-height: 16px; font-weight: bold; }
#clock { display: block; text-align: center; color: #000099; font-size: 14px; font-family: 'Courier New', monospace; font-weight: bold; }
#kotoba { color: #333333; font-size: 13px; line-height: 1.8; }

.accent-text { color: #006600; font-weight: bold; }
.kiriban-num { color: #cc0000; font-weight: bold; }

#clap-area { text-align: center; }
#clap-btn {
  background: #006600;
  border: 2px outset #669966;
  color: #ffff00;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  padding: 3px 12px;
}
#clap-btn:active { border-style: inset; }
#clap-count { font-size: 13px; color: #006600; margin-top: 3px; font-weight: bold; }

/* メインボックス */
.mbox {
  border: 2px solid #006600;
  background: #ffffff;
  margin-bottom: 10px;
}
.mbox-ttl {
  background: #006600;
  color: #ffff00;
  font-size: 14px;
  font-weight: bold;
  padding: 4px 9px;
  border-bottom: 2px solid #ffff00;
  letter-spacing: 1px;
}
.mbox-body { padding: 8px 10px; line-height: 2; font-size: 14px; color: #000000; }

.nitem { border-bottom: 1px dotted #006600; padding: 4px 0; }
.nitem:last-child { border-bottom: none; }
.ndate { color: #006600; font-size: 13px; margin-right: 6px; font-weight: bold; }
.ntag { font-size: 12px; border: 1px solid #006600; color: #006600; padding: 0 4px; margin-right: 5px; background: #ccffcc; font-weight: bold; }
.ntag.new { border-color: #cc0000; color: #cc0000; background: #ffeeee; }
.new-badge { color: #cc0000; font-size: 13px; font-weight: bold; }

.game-tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.game-tbl td { border: 1px solid #006600; padding: 6px 8px; vertical-align: top; }
.game-tbl tr:nth-child(even) td { background: #f0fff0; }
.g-name { color: #000099; font-weight: bold; font-size: 15px; margin-bottom: 2px; text-decoration: underline; }
.g-icon { font-size: 22px; text-align: center; width: 38px; }

/* 掲示板（2ch風） */
#bbs-list {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
  max-height: 600px;
  overflow-y: auto;
  background: #ffffff;
  border: 2px inset #006600;
}
#bbs-list li { border-bottom: 1px dotted #006600; padding: 4px 6px; font-size: 13px; line-height: 1.7; }
#bbs-list li:last-child { border-bottom: none; }
#bbs-list li::before { content: '>> '; color: #006600; font-weight: bold; }
.bbs-name { color: #006600; font-weight: bold; }
.bbs-time { color: #999999; font-size: 11px; margin-left: 6px; font-family: 'Courier New', monospace; }
#bbs-form { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
#bbs-name-in, #bbs-msg-in {
  background: #ffffff;
  border: 2px inset #999999;
  color: #000000;
  font-family: inherit;
  font-size: 13px;
  padding: 3px 5px;
}
#bbs-name-in { width: 90px; }
#bbs-msg-in { flex: 1; min-width: 120px; }
#bbs-submit {
  background: #006600;
  border: 2px outset #669966;
  color: #ffff00;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  padding: 3px 10px;
}
#bbs-submit:active { border-style: inset; }

/* おみくじ */
#omikuji-result {
  font-size: 26px;
  font-weight: bold;
  color: #cc0000;
  letter-spacing: 4px;
  margin-bottom: 4px;
  min-height: 30px;
}
#omikuji-btn {
  background: #006600;
  border: 2px outset #669966;
  color: #ffff00;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  padding: 3px 10px;
}
#omikuji-btn:active { border-style: inset; }
#omikuji-msg { font-size: 12px; color: #333333; line-height: 1.7; min-height: 28px; }

/* ウェルカムモーダル（style.cssの定義は削除・index.html側で管理） */

/* Discord */
#dc-box {
  border: 2px solid #5865F2;
  background: #eeeeff;
  text-align: center;
  padding: 12px;
  margin-bottom: 10px;
}
#dc-box p { font-size: 14px; color: #000033; margin: 3px 0; }
.dc-btn {
  display: inline-block;
  background: #5865F2;
  border: 2px outset #8899ff;
  color: #ffffff !important;
  padding: 5px 20px;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none !important;
  cursor: pointer;
  font-family: inherit;
  margin-top: 6px;
}
.dc-btn:active { border-style: inset; }

/* Discord申請モーダル */
#dc-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}
#dc-modal {
  background: #ffffff;
  border: 4px solid #5865F2;
  padding: 18px 22px;
  width: 330px;
  box-shadow: 6px 6px 0 #3344aa;
}
#dc-modal-title {
  font-size: 15px;
  font-weight: bold;
  color: #000066;
  margin-bottom: 12px;
  text-align: center;
  border-bottom: 2px solid #5865F2;
  padding-bottom: 6px;
}
#dc-username-box {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #f0f0ff;
  border: 2px inset #9999cc;
  padding: 5px 8px;
  margin-bottom: 4px;
}
#dc-username-text {
  font-family: 'Courier New', monospace;
  font-size: 14px;
  font-weight: bold;
  color: #000099;
  flex: 1;
}
#dc-copy-btn {
  background: #006600;
  border: 2px outset #669966;
  color: #ffff00;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  padding: 2px 8px;
  white-space: nowrap;
}
#dc-copy-btn:active { border-style: inset; }
#dc-copy-msg { font-size: 12px; color: #006600; min-height: 14px; font-weight: bold; }
#dc-open-btn {
  display: inline-block;
  background: #5865F2;
  border: 2px outset #8899ff;
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 13px;
  padding: 3px 14px;
}
#dc-open-btn:active { border-style: inset; }
#dc-cancel-btn {
  background: #cccccc;
  border: 2px outset #aaaaaa;
  color: #000000;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  padding: 2px 10px;
}
#dc-cancel-btn:active { border-style: inset; }

/* フッター */
#footer {
  border-top: 4px solid #006600;
  background: #006600;
  text-align: center;
  padding: 8px;
  font-size: 13px;
  color: #ccffcc;
}
#footer a { color: #ffff99; }
#footer button { color: #ffff99 !important; background: none; border: none; cursor: pointer; font-family: inherit; font-size: 13px; padding: 0; }

/* 共通 */
@keyframes blink { 50% { opacity: 0; } }
.blink { animation: blink 0.9s step-end infinite; }
.rainbow {
  background: linear-gradient(90deg,#ff0000,#ff8800,#ffff00,#00aa00,#0000ff,#8800ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: bold;
}
.kouji {
  display: inline-block;
  background: #ffff99;
  color: #cc6600;
  font-size: 10px;
  font-weight: bold;
  padding: 0 3px;
  margin-left: 3px;
  border: 1px solid #cc6600;
  animation: blink 1.2s step-end infinite;
}
.star-particle {
  position: fixed;
  pointer-events: none;
  font-size: 14px;
  z-index: 9999;
  animation: starFade 0.8s ease-out forwards;
}
@keyframes starFade {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-28px) scale(0.2); }
}
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f0fff0; }
::-webkit-scrollbar-thumb { background: #006600; }

/* スマホ対応 */
@media (max-width: 780px) {
  #outer { width: 100%; box-sizing: border-box; }
  #site-title { font-size: 20px; letter-spacing: 1px; }
  #welcome-overlay { width: 95vw; }
  #welcome-terminal { white-space: pre-wrap; word-break: break-all; }
  #layout { display: block; }
  #sidebar, #main, #sub {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: none;
    border-top: 2px solid #006600;
  }
}