/* =========================
   2000s RETRO CORE
   BLACK / RED / PINK ONLY
   ========================= */

*{ box-sizing:border-box; }
html, body{ margin:0; padding:0; cursor:none !important; }

img{ border:0; }
a, button, input, textarea, select, summary{
  cursor:none !important;
}

/* -------------------------
   palette（白を使わない）
------------------------- */
:root{
  --kuro:#000000;
  --aka:#c00000;
  --pinku:#ff2fa6;
  --hai:#1a1a1a;      /* 黒寄りグレー */
  --usu:#262626;      /* ボード用 */
}

/* -------------------------
   base
------------------------- */
body{
  background: var(--kuro);
  color: #f2c8dc; /* 文字は薄ピンク寄り */
  font:13px/1.7 "MS PGothic","MS Gothic", Verdana, Arial, Helvetica, sans-serif;
}
/* -------------------------
   links（2000s強コントラスト）
------------------------- */
a{
  color: var(--pinku);
  text-decoration: underline;
}
a:visited{
  color: var(--aka);
}
a:hover{
  background: var(--aka);
  color: var(--kuro);
  text-decoration: none;
}

/* -------------------------
   layout
------------------------- */
.wrap{
  width: 860px;
  margin: 18px auto;
}

/* 2カラム */
.grid{
  display:grid;
  grid-template-columns: 240px 1fr;
  gap:10px;
}

/* -------------------------
   box / window
------------------------- */
.box{
  background: var(--usu);
  border: 2px solid var(--aka);
  padding:10px;
  box-shadow:
    0 0 0 1px var(--pinku);
}

/* 黒帯ヘッダ（古サイトの核） */
.bar{
  background: var(--kuro);
  color: var(--pinku);
  padding:4px 8px;
  font-weight:bold;
  letter-spacing:.6px;
  margin:-10px -10px 10px -10px;
  border-bottom:2px solid var(--aka);
  position:relative;
}

/* バーの警告ランプ */
.bar::after{
  content:"■";
  position:absolute;
  right:8px;
  top:2px;
  color: var(--aka);
}

/* サブテキスト */
.sub{
  margin-top:-4px;
  color:#e3a3c4;
}
.small{
  font-size:12px;
  color:#c98aa9;
}
.mono{
  font-family:"Courier New", Courier, monospace;
  color: var(--pinku);
}

/* -------------------------
   nav
------------------------- */
.nav{
  list-style:none;
  padding-left:0;
  margin:0;
}
.nav li{ margin:4px 0; }

.nav a{
  display:block;
  padding:4px 6px;
  border:1px solid var(--aka);
  background: #0e0e0e;
}
.nav a::before{
  content:">> ";
  color: var(--aka);
  font-weight:bold;
}
.nav a:hover{
  background: var(--aka);
  color: var(--kuro);
}

/* -------------------------
   separators
------------------------- */
.dash{
  border:0;
  border-top:1px dashed var(--pinku);
  margin:10px 0;
}

/* メモ枠 */
.mini-box{
  border:2px dashed var(--pinku);
  padding:8px;
  margin:10px 0;
  background:#111;
}

/* marquee枠 */
.marquee{
  margin-top:10px;
  border:2px solid var(--aka);
  padding:6px;
  background:#0b0b0b;
  color: var(--pinku);
}

/* -------------------------
   DIARY frame
------------------------- */
.diary-frame{
  width:100%;
  height:70vh;
  border:2px dashed var(--aka);
  background:#050505;
}

/* 現在地 */
#diary-nav a.is-current{
  font-weight:bold;
  color: var(--kuro);
  background: var(--pinku);
}

/* -------------------------
   tag buttons
------------------------- */
.tagbox{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:6px;
}
.tagbtn{
  border:2px solid var(--aka);
  background:#111;
  padding:2px 6px;
  font:12px/1.6 "Courier New", monospace;
  color: var(--pinku);
}
.tagbtn:hover{
  background: var(--aka);
  color: var(--kuro);
}

/* -------------------------
   blink（任意）
------------------------- */
.blink{
  color: var(--aka);
  font-weight:bold;
  animation: blink 1s steps(2,end) infinite;
}
@keyframes blink{
  50%{ opacity:0; }
}

/* -------------------------
   Kakapo cursor
------------------------- */
#custom-cursor{
  position:fixed;
  left:0;
  top:0;
  width:32px;
  height:32px;
  pointer-events:none;
  z-index:99999;
  display:none;
  will-change: transform;
}
/* WELCOME内 いいね位置制御 */
.iine-wrap{
  margin-top: 14px;
  text-align: right; /* ← 右寄せ。centerにしてもOK */
}
/* ===== NEWIINE: 黒×赤テーマに馴染ませる上書き ===== */

/* 置き場所（右寄せ＆余白） */
.iine-wrap{
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}

/* ボタン本体 */
.newiine_btn{
  appearance: none;
  border: 1px solid #ff0066;
  background: #111;            /* 白を殺す */
  color: #ff0066;
  padding: 6px 10px;
  font: 12px/1.2 "Courier New", Courier, monospace;
  letter-spacing: .02em;
  cursor: none;
  box-shadow: 0 0 0 1px #000 inset;
}

/* hover（古のチカッと感） */
.newiine_btn:hover{
  background: #1a1a1a;
  border-color: #ff2a7a;
  color: #ff2a7a;
}

/* ハートアイコンがある場合（material-icons） */
.newiine_btn .material-icons-round{
  font-size: 16px;
  vertical-align: -3px;
  margin-right: 4px;
}

/* カウント表示 */
.newiine_count{
  margin: 0 6px 0 0;
  color: #ff2a7a;
}

/* お礼吹き出し（黒×赤） */
.newiine_thanks .newiine_box{
  border: 1px solid #ff0066;
  background: #000;
  color: #ff2a7a;
  padding: 6px 8px;
  font: 12px/1.4 "Courier New", monospace;
}
/* ===== BGM PLAYER : 98風(凹凸) × 黒赤ピンク縛り ===== */
audio{ display:none; } /* 中身は音だけ担当 */

.bgm98{
  background: var(--usu);          /* 既存boxと同系統 */
  border: 2px solid var(--aka);
  box-shadow: 0 0 0 1px var(--pinku);
  padding: 8px;
  margin: 10px 0;
  font-family: "MS PGothic","MS Gothic", monospace;
  color: #f2c8dc;
}

/* タイトル帯：既存.barに寄せる（ミニ版） */
.bgm98-title{
  background: var(--kuro);
  color: var(--pinku);
  padding: 3px 6px;
  margin: -8px -8px 8px -8px;
  border-bottom: 2px solid var(--aka);
  font-weight: bold;
  letter-spacing: .6px;
  position: relative;
}

/* 警告ランプも継承（barと同意匠） */
.bgm98-title::after{
  content:"■";
  position:absolute;
  right:6px;
  top:1px;
  color: var(--aka);
}

/* 98風の“押せるボタン”：黒地＋凹凸（白は使わない） */
.bgm98-btn{
  background: #111;
  color: var(--pinku);
  border-top: 2px solid #2a2a2a;   /* 擬似ハイライト（白は禁止なので濃灰） */
  border-left: 2px solid #2a2a2a;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;

  outline: 1px solid var(--aka);  /* 赤い外周で締める */
  padding: 3px 10px;
  font: 12px/1.2 "Courier New", monospace;
  cursor: none;                   /* 既存方針 */
  letter-spacing: .02em;
}

/* hover：ピンク強調 */
.bgm98-btn:hover{
  outline-color: var(--pinku);
  color: #ffd1ea;
}

/* active：沈み込み（98の“カチッ”） */
.bgm98-btn:active{
  border-top: 2px solid #000;
  border-left: 2px solid #000;
  border-right: 2px solid #2a2a2a;
  border-bottom: 2px solid #2a2a2a;
}

/* 情報テキスト */
.bgm98-meta{
  margin-top: 6px;
  font-size: 12px;
  color: #c98aa9; /* 既存.small系 */
}
/* BGM内レイアウト */
.bgm98-controls{
  display:flex;
  align-items:center;
  gap:10px;
}

/* 時間表示 */
.bgm98-time{
  font: 12px/1.2 "Courier New", monospace;
  color:#c98aa9;
  user-select:none;
}

/* シークバー（98っぽく：黒地＋赤枠） */
.bgm98-seek{
  width:100%;
  margin-top: 8px;
  height: 18px;
  background: #0b0b0b;
  border: 1px solid var(--aka);
  outline: 1px solid #000;
  accent-color: var(--pinku); /* 対応ブラウザならつまみ色寄る */
}
.bgm98-select{
  margin-top: 6px;
  width: 100%;
  background: #111;
  color: var(--pinku);
  border: 1px solid var(--aka);
  outline: 1px solid #000;
  padding: 2px 6px;
  font-size: 12px;
}
.bgm98-select:hover{
  border-color: var(--pinku);
}

/* WELCOME用GIF */
.welcome-gif{
  margin: 6px 0 10px;
}

.welcome-gif img{
  max-width: 100%;
  height: auto;
  display: block;
  border: 2px solid var(--aka);
  box-shadow: 0 0 0 1px var(--pinku);
  background: #000;
}
/* =========================
   COMMISSION PAGE ADDON
   ========================= */

.cm-head{ margin-bottom: 10px; }
.cm-title{ margin: 0 0 4px; font-size: 18px; }
.cm-sub{ margin: 0; }

.cm-alert{
  border: 2px solid var(--aka);
  background: #111;
  padding: 8px;
  margin: 10px 0;
}

.cm-section h2{
  margin: 8px 0;
  font-size: 15px;
  color: #ffd1ea;
}

/* メニューカード */
.cm-cards{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
}
.cm-card{
  background: #111;
  border: 2px solid var(--aka);
  box-shadow: 0 0 0 1px var(--pinku);
  padding: 10px;
}
.cm-cardbar{
  background: var(--kuro);
  color: var(--pinku);
  padding: 3px 6px;
  margin: -10px -10px 8px -10px;
  border-bottom: 2px solid var(--aka);
  position: relative;
}
.cm-cardbar::after{
  content:"■";
  position:absolute;
  right:6px;
  top:1px;
  color: var(--aka);
}
.cm-list{ margin:0; padding-left: 18px; }
.cm-price{ margin-top: 8px; font-weight: bold; }

/* OK/NG 2分割 */
.cm-two{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.cm-panel{
  background:#111;
  border:2px dashed var(--pinku);
  padding: 10px;
}
.cm-panelbar{
  color: var(--pinku);
  font-weight:bold;
  margin-bottom: 6px;
}
.cm-bullets{ margin:0; padding-left: 18px; }

/* flow */
.cm-flow{
  margin: 0;
  padding-left: 20px;
}

/* template */
.cm-template{
  border: 2px solid var(--aka);
  background: #0b0b0b;
  padding: 10px;
  white-space: pre-wrap;
}

/* CTAボタン（左NAVと共用できるクラス） */
.cmd-btn{
  display:block;
  border:2px solid var(--aka);
  background:#0e0e0e;
  padding:8px 10px;
  text-decoration:none;
  color: var(--pinku);
}
.cmd-btn:hover{
  background: var(--aka);
  color: var(--kuro);
  text-decoration:none;
}
.cmd-btn::before{
  content:">> ";
  color: var(--aka);
  font-weight:bold;
}

/* レスポンシブ */
@media (max-width: 900px){
  .wrap{ width: 96%; }
  .grid{ grid-template-columns: 1fr; }
  .cm-cards{ grid-template-columns: 1fr; }
  .cm-two{ grid-template-columns: 1fr; }
}
/* =========================
   Ko-fi button (98 RETRO)
   ========================= */

.kofi-wrap{
  margin: 12px 0;
  padding: 6px;
  background: var(--usu);
  border: 2px solid var(--aka);
  box-shadow: 0 0 0 1px var(--pinku);
  text-align: center;
}

.kofi-wrap a{
  display: inline-block;
  text-decoration: none;
}

.kofi-wrap img{
  max-width: 100%;
  height: auto;
  display: block;

  /* 98風：沈んで見える */
  border-top: 2px solid #2a2a2a;
  border-left: 2px solid #2a2a2a;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
}

/* hover：支援できる感 */
.kofi-wrap a:hover img{
  filter: brightness(1.1);
  border-top: 2px solid #000;
  border-left: 2px solid #000;
  border-right: 2px solid #2a2a2a;
  border-bottom: 2px solid #2a2a2a;
}

/* =========================
   page backgrounds
========================= */

/* index */
body.bg-index{
  background-image: url("indexImages/cake.gif");
  background-repeat: repeat;
  background-color: #2a2a2a;
}

/* DIARY */
body.bg-diary{
  background-image: url("diaryImages/Chips.gif");
  background-repeat: repeat;
  background-color: #000;
}
/* DIARY2 */
body.bg-diary2{
  background-image: url("diaryImages/piyo.gif");
  background-repeat: repeat;
  background-color: #000;
}
/* about */
body.bg-about{
  background-image: url("aboutImages/cake.gif");
  background-repeat: repeat;
  background-color: #000;
}
/* contact */
body.bg-contact{
  background-image: url("contactImages/rira.gif");
  background-repeat: repeat;
  background-color: #000;
}
/* note */
body.bg-note{
  background-image: url("notes/makaron.gif");
  background-repeat: repeat;
  background-color: #000;
}
/* retro */
body.bg-retro{
  background-image: url("notes/retroanime/Gumball.gif");
  background-repeat: repeat;
  background-color: #000;
}
/* cushion */
body.bg-cushion{
  background-image: url("angry.gif");
  background-repeat: repeat;
  background-color: #000;
}
/* commission */
body.bg-commission{
  background-image: url("Coffee.gif");
  background-repeat: repeat;
  background-color: #000;
}