/* 1. 外部CSSの先頭でインポート */
@import url('https://fonts.googleapis.com/css2?family=DotGothic16&display=swap');

/* 2. 基本のフォントとして設定 */
html, body {
  font-family: 'DotGothic16', sans-serif;
}

/* 背景設定（変更なし） */
body {
  margin: 0; padding: 0; background-color: #1a1a40;
  font-family: 'DotGothic16', sans-serif;
  color: #ffffff;
  background-image: 
    linear-gradient(to top, #0a0a20 0%, #0a0a20 120px, transparent 120px),
    linear-gradient(to top, #111130 0%, #111130 180px, transparent 180px),
    linear-gradient(to top, #0d0d25 0%, #0d0d25 150px, transparent 150px),
    linear-gradient(to top, #050510 0%, #050510 100px, transparent 100px);
  background-size: 15% 100%, 20% 100%, 10% 100%, 100% 100%;
  background-position: 5% bottom, 30% bottom, 60% bottom, 0% bottom;
  background-repeat: no-repeat; background-attachment: fixed; min-height: 100vh;
}

a{
  color: #ffffff;
  text-decoration: none;
}
a:hover{
  color: #d900ff;
}
.moon {
  position: fixed; top: 50px; right: 50px; width: 80px; height: 80px;
  border-radius: 50%; box-shadow: 20px 10px 0 0 #ffeb3b; 
  transform: rotate(-20deg); z-index: -1;
}

/* --- 前半の背景・月はそのまま --- */

/* ★修正：掲示板の「引き伸ばし」を完全に無効化する最終兵器 */
.gb-wrapper {
  display: block;
  width: 100%;
  height: 650px; /* スレ内の高さをしっかり確保 */
  position: relative;
  margin: 50px 0;
  clear: both; /* 周りの要素の干渉をシャットアウト */
}

.gb-body {
  position: absolute;
  left: 50%; top: 0;
  transform: translateX(-50%);
  z-index: 100;
  width: 320px; height: 520px; 
  background-color: #dcdcdc;
  border-radius: 15px 15px 60px 15px;
  box-shadow: inset 3px 3px 10px #fff, 10px 10px 40px rgba(0,0,0,0.6);
  border: 2px solid #bbb;
  box-sizing: border-box;
  padding: 0; /* 余計な隙間をカット */
}

/* ★フレーム：ここを動かすと「画面全体」が動きます */
.gb-screen-frame {
  position: absolute;
  top: 35px; /* ★さらに上に上げました（50px → 35px） */
  left: 25px;
  background-color: #555;
  width: 270px; height: 210px; /* 中身を収めるために少し高く */
  border-radius: 10px 10px 40px 10px;
  padding: 15px;
  box-sizing: border-box;
  z-index: 105;
}

/* --- 緑の液晶部分 --- */
.gb-screen-glass {
  background-color: #9bbc0f;
  background-image: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.05) 0px,
    rgba(0, 0, 0, 0.05) 1px,
    transparent 1px,
    transparent 2px
  );
  width: 100%; height: 160px;
  box-shadow: inset 3px 3px 8px rgba(0,0,0,0.5);
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
  align-items: center;
  padding: 10px;
  box-sizing: border-box;
  margin-top: -10px;
}

/* ★タイトル：この下の margin-bottom で全体の高さを調整します */
.gb-title { 
  font-size: 20px; 
  color: #0f380f; 
  margin: 0 0 5px 0; /* ここを大きくすると、タイトルがより下へ押し下げられます */
  text-align: center;
  font-weight: bold;
  line-height: 1.1;
}

/* ★メニュー文字：ここをギュッと詰めました */
.gb-menu { 
  font-size: 10px; 
  color: #0f380f; 
  line-height: 0.1; 
  margin: 0 0 10px 0;
  text-align: left;  /* 中央寄せをやめて、中身の文章を左揃えにする */
  display: inline-block;   /* 2行のブロックとして見た時に、画面の中央に来るように調整 */
}

/* --- ボタン類：ここは安定しているのでそのまま --- */
.gb-controls {
  position: absolute;
  top: 275px; left: 0;
  display: flex; justify-content: space-between; 
  width: 100%; padding: 0 30px;
  box-sizing: border-box;
}

.gb-dpad { width: 80px; height: 80px; position: relative; left: -15px;}
.dpad-h { width: 80px; height: 26px; background: #4d4d4d; position: absolute; top: 27px; left: 0; border-radius: 4px; }
.dpad-v { width: 26px; height: 80px; background: #4d4d4d; position: absolute; left: 27px; top: 0; border-radius: 4px; }

/* --- ABボタン：角度を保ったまま右へ --- */
.gb-ab-btns { 
  display: flex; 
  gap: 8px; 
  transform: rotate(-25deg); 
  margin-top: 15px;
  margin-right: -25px;
  position: relative;
  left: 19px; /* これでグループ全体が右に5pxスライドします */
}

/* --- A・Bボタン（文字を外に出す版） --- */
.gb-btn-a, .gb-btn-b {
  width: 44px; height: 44px; 
  background: #d900ff !important; /* ボタンの紫色はそのまま */
  border-radius: 50%;
  box-shadow: 2px 2px 0 #800080, inset -2px -2px 5px rgba(0,0,0,0.3);  /* 立体感のある影（文字にはかけない） */
  
  /* --- 文字を外に出す設定 --- */
  color: #888;       /* 文字色を本体の印字っぽいグレーに */
  font-size: 14px;   /* サイズは少し大きめに */
  font-weight: bold;
  text-decoration: none;
  line-height: 120px;   /* ボタンの高さ(44px)よりずっと大きくして、文字を枠の外へ押し出します */
  overflow: visible;    /* はみ出した文字を表示する */
  /* 文字を左右中央に */
  text-align: center;
  display: block;
} 

/* --- セレクト・スタート全体のグループ --- */
.gb-options {
  position: absolute; 
  top: 150px; 
  left: -5px; 
  width: 100%;
  display: flex; 
  justify-content: center; 
  gap: 5px;
}

/* ★ 共通デザイン：HTMLの文字を下に突き抜けさせる作戦 */
.gb-opt-btn { 
  width: 50px;
  height: 12px;
  background: #777 !important;
  border-radius: 10px;
  transform: rotate(-25deg); 
  
  /* --- 文字を下に押し出す設定 --- */
  color: #888;
  font-size: 8px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  line-height: 45px;  /* 行間をボタンの高さ(12px)よりずっと大きくすることで、文字を下に追いやります */
  overflow: visible;   /* はみ出した文字が見えるようにする */
  display: block;
}

.gb-options .gb-opt-btn:last-child {
  transform: rotate(-25deg) translateY(12px); 
}

.gb-speaker {
  width: 60px; height: 40px; position: absolute; 
  bottom: 30px; right: 20px; top: 175px;
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 5px, rgba(0,0,0,0.1) 5px, rgba(0,0,0,0.1) 7px);
  opacity: 0.6;
}

/* 共通設定：透明なボタンを十字の先に配置 */
.gb-dpad a {
  position: absolute;
  width: 26px; height: 26px; /* 軸の太さに合わせるめう */
  z-index: 110;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
  font-size: 10px;
  overflow: visible;
  color: rgba(255, 255, 255, 0.13); /* ガイドをうっすら出すめう */
}

/* ガイド記号自体の位置も微調整できるようにするめう */
.gb-dpad a::after {
  display: block;
  width: 100%;
  text-align: center;
}

/* 各方向の配置とガイド表示 */
.d-up    { top: 0; left: 27px; }
.d-up::after    { content: "▲"; }

.d-down  { bottom: 0; left: 27px; }
.d-down::after  { content: "▼"; }

.d-left  { top: 26px; left: 0; }
.d-left::after  { content: "◀"; }

.d-right { top: 26px; right: 0; }
.d-right::after { content: "▶"; }

/* --- 本文用のウィンドウ設定 --- */
  /* --- 1. グレーの液晶枠風 --- */
.msg-window {
  background-color: #777 ; /* 本体の液晶周りのグレー */
  border-radius: 10px 10px 40px 10px; /* 右下だけ丸みを強くして実機感を出す */
  border: 4px solid #555;
  padding: 15px ; /* 枠の厚み */
  width: clamp(320px,50%,600px);
  margin: 30px auto;
  box-shadow: 0 10px 30px rgba(0,0,0,0.7);
  margin: 30px auto 40px;
  position: relative;
  box-shadow: 0 10px 30px rgba(0,0,0,0.7);
}

/* --- 2. 中の緑色液晶エリア --- */
.msg-window::before {
  content: "";
  display: block;
  background-color: #9bbc0f;
  border: 3px solid #0f380f; /* 液晶の縁取り */
  border-radius: 4px;
  position: absolute;
  top: 15px; left: 15px; right: 15px; bottom: 15px;
  z-index: 1;
}

/* --- 3. RPG風のメッセージ枠（文字の土台） --- */
.msg-content {
  position: relative;
  z-index: 2; /* 液晶の上に重ねる */
  background-color: rgba(15, 56, 15, 0.9); /* 濃い緑の半透明 */
  border: 2px solid #ffffff; /* 白い縁取り */
  border-radius: 5px;
  padding: 10px;
  padding-bottom: 40px !important;
  margin: 10px 10px 45px 10px; 
  color: #ffffff !important;
  font-size: 14px;
  line-height: 1.5;
  min-height: 60px;
  /* ★1. 枠からはみ出た分をスクロールさせる設定 */
  max-height: 215px;    /* 窓の高さ。好みの高さに調整してください */
  overflow-y: scroll;   /* 縦方向にスクロール可能にする */
  /* ★2. スクロールバーを隠す魔法（Firefox用） */
  scrollbar-width: none; 
  /* ★3. スクロールバーを隠す魔法（IE/Edge用） */
  -ms-overflow-style: none;
  display: block;
}

/* ★4. スクロールバーを隠す魔法（Chrome/Safari用） */
.msg-content::-webkit-scrollbar {
  display: none;
}

/* --- 点滅する「▼」マーク --- */
.msg-content::after {
  content: "▼";
  /* ブロック要素にして右に寄せる */
  display: block;
  text-align: right; 
  /* 文章との間隔を少し開ける */
  margin-top: 10px;
  margin-right: 5px;
  margin-bottom: -20px;
  padding-bottom: 10px; /* スクロールの最下部でカツカツにならないように */
  color: #ffffff;
  animation: blink 1s infinite;
}

@keyframes blink {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

/* 液晶に直接文字を浮かべるための追加設定 */
.msg-window.no-frame {
  color: #0f380f !important; /* 文字を液晶の濃い緑に */
  padding: 25px !important;   /* 枠がない分、余白をしっかり取る */
  text-shadow: 1px 1px 0px rgba(155, 188, 15, 0.3); /* ほんのり液晶の影 */
}

.msg-window.no-frame *:not(.tab-container):not(.tab-container *):not(.status-bar):not(.status-bar *) {
  color: #0f380f !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* スキャンライン（液晶感） */
.msg-window::after {
  content: "";
  position: absolute;
  top: 15px; left: 15px; right: 15px; bottom: 15px;
  pointer-events: none;
  z-index: 3;
  background-image: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.05) 0px,
    rgba(0, 0, 0, 0.05) 1px,
    transparent 1px,
    transparent 2px
  );
}

/* --- 2. no-frame時の「▼」の色を濃い緑にする --- */
.msg-window.no-frame .msg-content::after {
  color: #0f380f !important; /* 液晶の濃い緑 */
}

/* --- ステータスバー（名前・Lv・日付など） --- */
.status-bar {
  position: absolute;
  bottom: 25px;
  left: 25px;
  right: 25px;
  display: flex;
  justify-content: space-between; /* 左右に振り分ける */
  font-size: 10px;
  color: #0f380f; /* 液晶の濃い緑 */
  font-weight: bold;
  border-top: 1px solid rgba(15, 56, 15, 0.5);
  padding-top: 3px;
  z-index: 5;
}

/* 「チェックが入った時」の「status-bar」と「msg-windowの::after」を両方指定 */

.msg-window:has(input[type="checkbox"]:checked) .status-bar,
.msg-window:has(input[type="checkbox"]:checked)::after {
    display: none  !important; /* または display: none !important; */
}

/* 日付やシステム情報が入っている <font> タグを非表示にする*/
.name,font[size="-1"] {
  display: none !important;
}

/* 例：[編集][削除][戻る] をボタン風にする */
a[href*="nanos.jp"]:not(.gb-dpad *),
a[href*="nieru.net"]:not(.panel-area *):not(.gb-dpad *),
a[href*="/61"]:not(.gb-dpad *)  { 
  display: inline-block;
  text-decoration: none;
  padding: 2px 8px;
  border: 1px solid #555;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 11px;
  color: #fff !important;
  transition: all 0.3s;
}

/* --- 3. レス番号と「書き込み」の見た目を整える --- */
/* これらはボタンにせず、液晶っぽい色にするだけで馴染ませます */
a[href*="reply="]:not(.gb-dpad *) {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  color: #ffffff !important; 
  font-weight: bold;
  text-decoration: none;
}

/* ホバーした時の光る演出は、ボタンだけに適用 */
a[href*="nanos.jp"]:hover:not(.gb-btn-a):not(.gb-btn-b):not(.gb-opt-btn):not(.layer):not(.tab-panel *):not(.gb-dpad *),
a[href*="nieru.net"]:hover:not(.gb-btn-a):not(.gb-btn-b):not(.gb-opt-btn):not(.layer):not(.tab-panel *):not(.gb-dpad *),
a[href*="/61"]:hover:not(.gb-btn-a):not(.gb-btn-b):not(.gb-opt-btn):not(.layer):not(.tab-panael *):not(.gb-dpad *) {
  background: #d900ff !important;
  color: #0f380f !important;
  box-shadow: 0 0 10px #9bbc0f;
}

/* =============================================
   テキストエリア（ゲーム入力フィールド風）
   ============================================= */
textarea {
  /* 基本的な見た目 */
  width: 80%;                 /* 親要素に対して幅90% */
  min-height: 150px;          /* 最低でもこの高さ */
  padding: 10px;              /* 内側の余白 */
  margin: 5px auto;          /* 上下に余白、左右中央寄せ */
  display: block;             /* 常に新しい行から始まる */

  /* 液晶画面風のデザイン */
  background-color: #0f380f; /* 濃い緑色の液晶背景 */
  border: 2px solid #9bbc0f; /* 薄い緑色の枠線 */
  color: #ebf1e3;             /* 液晶の白っぽい文字色 */
  font-family: 'Press Start 2P', 'DotGothic16', monospace; /* ドット絵フォント（もしあれば） */
  font-size: 14px;            /* 文字サイズ */
  line-height: 1.5;           /* 行の高さ */
  resize: vertical;           /* 縦方向だけにサイズ変更可能 */
  
  /* 角丸や影 */
  border-radius: 5px;         /* 少し角丸に */
  box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.5), 0 0 5px rgba(155, 188, 15, 0.5); /* 液晶の奥まった影と、わずかな発光 */
}

/* フォーカス時（カーソルが合わさった時）の演出 */
textarea:focus {
  outline: none;              /* ブラウザ標準の青い枠線を消す */
  border-color: #9bbc0f;      /* 枠線を少し明るく */
  box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.5), 0 0 8px #9bbc0f; /* より強く発光 */
}

/* スクロールバーのデザイン（Webkit系ブラウザ向け） */
textarea::-webkit-scrollbar {
  width: 8px;
}
textarea::-webkit-scrollbar-track {
  background: #0f380f; /* スクロールバーの背景も液晶色に */
  border-radius: 4px;
}
textarea::-webkit-scrollbar-thumb {
  background: #9bbc0f; /* スクロールバーのつまみ部分も液晶色に */
  border-radius: 4px;
}
textarea::-webkit-scrollbar-thumb:hover {
  background: #c0d388; /* ホバーで少し明るく */
}

/* --- 全体のコンテナ --- */
.tab-container {
  padding: 15px;
  margin-top: -120px !important;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* --- タブの耳が並ぶエリア --- */
.tab-area {
  display: flex;
  gap: 3px;
  margin-bottom: -38px; /* 下のパネルとくっつける */
  margin-left: -3px;
  position: relative;
  z-index: 1;
}

/* --- フォルダの「耳」のデザイン --- */
.tab-label {
  padding: 4px 12px;
  background-color: #306230; /* 非選択時は濃い緑 */
  color: #9bbc0f;            /* 文字は薄い緑 */
  font-size: 11px;
  cursor: pointer;
  /* フォルダの耳っぽく斜めにカット */
  border-radius: 5px 5px 0 0;
  transition: 0.2s;
  border: 2px solid #0f380f;
  border-bottom: none;
  z-index: 0;
}

/* --- 選択中の「耳」を明るくする --- */
#tab1:checked ~ .tab-area label[for="tab1"],
#tab2:checked ~ .tab-area label[for="tab2"],
#tab3:checked ~ .tab-area label[for="tab3"],
#tab4:checked ~ .tab-area label[for="tab4"] {
  background-color: #8bac0f !important; /* 明るい液晶色 */
  color: #0f380f !important;            /* 文字は黒っぽく */
 padding-top: 5px !important;    /* 高さを出す */
  margin-top: -6px !important;     /* ★重要！増えた高さ分、上に持ち上げる（これで下がガクガクしない） */
  z-index: 5 !important;
}

/* --- メインの書き込みエリア（フォルダの体） --- */
.panel-area {
  height: 230px;
  overflow: hidden;
  background-color: #8bac0f; /* ほんのり背景色 */
  border: 2px solid #0f380f;              /* フォルダの枠線 */
  border-radius: 0 5px 5px 5px;           /* 右上から丸く */
  padding: 0 0 0 5px;
  margin-bottom: 0;
  min-height: 230px;
  max-height: 230px;
  position: relative;
  z-index: 2;
  /* スクロールバーを隠す（液晶の美観維持） */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.panel-area::-webkit-scrollbar {
  display: none;
}

/* --- 中身の文字設定 --- */
.tab-panel {
  display: none;
  color: #0f380f !important;
  font-size: 14px;
  line-height: 1.6;
  position: absolute;
  top: -38px;
  left: 0;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}

/* --- ブックマーク用（4つ）の表示命令 --- */
.tab-container:not(.tab-count3) #tab1:checked ~ .panel-area #panel1,
.tab-container:not(.tab-count3) #tab2:checked ~ .panel-area #panel2,
.tab-container:not(.tab-count3) #tab3:checked ~ .panel-area #panel3,
.tab-container:not(.tab-count3) #tab4:checked ~ .panel-area #panel4 {
    display: block !important;
    opacity: 1 !important;
    position: relative;
    z-index: 10 !important;
}

/* --- タブが3つの時：耳を大きくする --- */
.tab-count3 .tab-label {
    width: 30%;           /* 横幅を指定（3つでだいたい埋まるサイズ） */
    text-align: center;   /* 文字を真ん中に */
    padding: 6px 0 !important; /* 左右のパディングを0にして幅固定を優先 */
    margin-left: 0px;
    margin-top: 17px;
    z-index: 0;
}

/* --- タブが2つの時：さらに大きくする --- */
.tab-count2 .tab-label {
    width: 46%;           /* 2つで画面を分け合うサイズ */
    text-align: center;
    padding: 8px 0 !important;
    font-size: 12px;      /* 面積が広いので文字も少し大きくすると◎ */
}

/* 共通：幅指定を有効にするための設定 */
.tab-count3 .tab-area, .tab-count2 .tab-area {
    justify-content: flex-start; /* 左詰めに並べる */
    gap: 3px;                    /* 耳と耳の隙間 */
}

/* パネルの重なりを防ぐ（表示されるやつだけを最前面に） */
.tab-panel {
    display: none;
    opacity: 0;
}

/* --- インフォ用（3つタブ）の選択中の「耳」を強調する --- */
#info-tab1:checked ~ .tab-area label[for="info-tab1"],
#info-tab2:checked ~ .tab-area label[for="info-tab2"],
#info-tab3:checked ~ .tab-area label[for="info-tab3"] {
  background-color: #8bac0f !important; /* 明るい液晶色 */
  color: #0f380f !important;            /* 文字は黒っぽく */
  padding-top: 5px;                     /* 少し高くして目立たせる */
  margin-top: 10px;
  z-index: 3;
}

/* --- インフォ用（3つ）の表示命令 --- */
.tab-count3 #info-tab1:checked ~ .panel-area #info-panel1,
.tab-count3 #info-tab2:checked ~ .panel-area #info-panel2,
.tab-count3 #info-tab3:checked ~ .panel-area #info-panel3 {
    display: block !important;
    opacity: 1 !important;
    position: relative;
    z-index: 10 !important;
}

/* 枠線が消されるのを防ぐ（!importantの重ね掛け） */
.tab-container.tab-count3 .panel-area {
    border: 2px solid #0f380f !important;
    background-color: #8bac0f !important;
    visibility: visible !important;
}

/* --- タブパネル内のリンク（通常時） --- */
.tab-panel a[href] {
    color: #0f380f !important;    /* 液晶の濃い緑（黒っぽい色）に固定 */
    text-decoration: none;        /* 下線を消す（お好みで） */
    background: transparent !important;
}

/* --- タブパネル内のリンク（ホバー時に外のボタンと統一） --- */
.tab-panel a[href]:hover {
  display: inline-block;        /* ボタンとしての形を維持 */
  text-decoration: none !important;
  padding: 2px 8px;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px #0f380f !important; /* 内側に1pxの線を引く魔法めう */
  background: rgba(15, 56, 15, 0.1) !important;
    /* 文字色とフォントサイズ */
  font-size: 14px;
  color: #0f380f !important;
  margin: -3px 0 -3px -8px; 
}

/* 文字隠し */
.noise-text {
  position: relative;
  display: inline-block;
  color: transparent !important; /* 元の文字は絶対隠す */
  font-family: 'DotGothic16', monospace;
  overflow: hidden;
  letter-spacing: -2px; /* 文字の間隔をギュッと詰めて重ねる */
  user-select: none;
}

/* 文字を粉砕するレイヤー（before/afterを改造） */
.noise-text::before,
.noise-text::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  color: #0f380f;
  /* ★ここがミソ：文字を横方向に0.1倍に圧縮して「縦棒」に変える */
  transform: scaleX(0.1) skewX(45deg); 
  filter: blur(0.5px); /* わずかにボカす */
}

.noise-text::before {
  animation: noise-crush 0.05s infinite;
  text-shadow: 10px 0 #9bbc0f, -10px 0 #306230;
}

.noise-text::after {
  animation: noise-crush 0.08s infinite reverse;
  text-shadow: 5px 0 #8bac0f, -5px 0 #0f380f;
}

/* ★さらに読めなくするための「砂嵐」レイヤーを追加 */
.noise-text::after {
  /* 記号を大量に重ねて、元の文字の形を壊す */
  content: "▓▒░█ ▓▒░█ ▓▒░█"; 
  opacity: 0.3;
  font-size: 1.2em;
}

/* 激しく位置と切り取りを変えるアニメーション */
@keyframes noise-crush {
  0%   { clip-path: inset(0% 0 80% 0); transform: translateX(-5px) scaleX(0.2); }
  25%  { clip-path: inset(70% 0 0% 0);  transform: translateX(5px) scaleX(0.1); }
  50%  { clip-path: inset(30% 0 40% 0); transform: translateX(-2px) skewX(-20deg); }
  75%  { clip-path: inset(10% 0 60% 0); transform: translateX(3px) scaleX(0.3); }
  100% { clip-path: inset(50% 0 10% 0); transform: translateX(0px) skewX(20deg); }
}

/* 赤いノイズのアニメーション */
.red-noise {
    position: relative;
    color: #ff0000; /* 文字を赤くする */
    font-weight: bold;
    display: inline-block;
    background: #0f380f; /* 液晶の背景色に合わせて調整 */
    padding: 0 4px;
    overflow: visible;
    line-height: 1.2; 
    vertical-align: bottom; /* 下の隙間を消す */
}

/* 擬似要素でノイズ（走査線や乱れ）を作る */
.red-noise::before {
    content: "閲覧自己責任"; /* 重ねる文字 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    color: #ff0000;
    opacity: 0.7;
    z-index: 1;
    /* 左右にガタガタ揺れるアニメーション */
    animation: noise-anim 0.2s infinite linear alternate-reverse;
}

@keyframes noise-anim {
    0% { clip-path: inset(10% 0 80% 0); transform: translate(-2px); }
    20% { clip-path: inset(40% 0 30% 0); transform: translate(1px); }
    40% { clip-path: inset(70% 0 10% 0); transform: translate(-1px); }
    60% { clip-path: inset(20% 0 60% 0); transform: translate(2px); }
    80% { clip-path: inset(50% 0 20% 0); transform: translate(-1px); }
    100% { clip-path: inset(0% 0 90% 0); transform: translate(1px); }
}

/* ボタンの上に重ねた透明リンク(layer)の完全無効化設定
   線を消し、透明度を固定し、余計な反応をすべて排除するめう！
*/
.layer, 
.layer:hover, 
.layer:active, 
.layer:focus {
    /* 1. 線と枠を消す（前回の内容） */
    text-decoration: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;

    /* 2. 透明な膜を「完全な透明」に固定する（今回の内容） */
    background: transparent !important;
    opacity: 1 !important; /* 0.7とかにならないように1で固定！ */

    /* 3. 配置と挙動の安定化 */
    display: block !important;
    -webkit-tap-highlight-color: transparent; /* スマホの青い枠も消去 */
}

#tab1-panel {
    /* スクロールを禁止する */
    overflow: hidden !important; 
    
    /* 念のため、高さを「親と同じ100%」に固定して、はみ出しを許さない */
    height: 100% !important;
    max-height: 100% !important;
    
    /* 要素が浮いて隙間を作らないようにする */
    display: block !important;
    position: relative !important;
}

/* --- スマホ用の特別ルール --- */
@media screen and (max-width: 768px) {
  .panel-area {
    /* スマホの時だけスクロールを許可するめう！ */
    overflow-y: auto !important;
    /* 指でスムーズに動かせるようにする設定 */
    -webkit-overflow-scrolling: touch;
    touch-action: auto !important;
  }

  /* もしスクロールバーが出てダサかったら、ここでも隠せるめう */
  .panel-area::-webkit-scrollbar {
    display: none;
  }

  .tab-panel {
    font-size: 12px !important; /* 少し文字を小さくして収まりを良くする */
    line-height: 1.4 !important;
    padding: 15px 10px !important;    /* 余白を削って情報を詰め込む */
    top: -35px !important;
  }

  .tab-panel a[href]:hover {
    font-size: 12px !important;
  }

  /* 1. 耳と枠が離れたり重なったりする場合、ここをいじるめう */
  .tab-area {
    margin-bottom: -35px !important; /* ← ここの数字を -30 ～ -40 の間で微調整！ */
  }

  /* 3. もし全体が液晶からズレるなら、コンテナごと動かすめう */
  .tab-container {
    margin-top: -115px !important; /* ← スマホで見ながら位置を調整！ */
  }
}

/* --- ポップアップの基本（最初は隠しておく） --- */
.popup-overlay {
  display: none; /* 普段は消す */
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999 !important;
  justify-content: center;
  align-items: center;
}

/* 「inputの直後」にある要素ではなく、「同じ階層にある後ろの要素」を全部見るめう */
[id^="popup-switch"]:checked ~ * .popup-overlay,
[id^="popup-switch"]:checked ~ .popup-overlay {
  display: flex !important;
}

/* --- ポップアップウィンドウ本体 --- */
.popup-window {
  width: 80%;
  max-width: 350px;
  /* ★重要：最大高さを決める（画面の8割まで） */
  height: 50%;
  max-height: 50vh; 
  background-color: #9bbc0f;
  border: 4px solid #0f380f;
  
  /* 中身を縦に並べる設定 */
  display: flex;
  flex-direction: column; 
  position: relative;
  z-index: 10000 !important;
}

/* ポップアップの窓の中だけにスキャンラインを敷く */
.popup-window::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 10005;
    background-image: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.05) 0px,
        rgba(0, 0, 0, 0.05) 1px,
        transparent 1px,
        transparent 2px
    );
}

/* --- 本文エリア（ここがスクロールのキモめう！） --- */
.popup-body {
  margin-top: -10px;
  padding: 5px 10px;
  color: #0f380f;
  
  /* ★重要：はみ出したらスクロールバーを出す */
  overflow-y: auto; 
  /* ★重要：余ったスペースをこのエリアが全部使う */
  flex: 1; 

  /* スクロールバーのデザイン（今の液晶風に合わせるめう） */
  scrollbar-width: thin;
  scrollbar-color: #0f380f #9bbc0f;
}

/* Chrome/Safari用のスクロールバー設定 */
.popup-body::-webkit-scrollbar {
  width: 8px;
}
.popup-body::-webkit-scrollbar-thumb {
  background: #0f380f;
}
.popup-body::-webkit-scrollbar-track {
  background: #9bbc0f;
}

/* --- 閉じるボタン（最下部に固定されるめう） --- */
.close-btn {
  display: block;
  text-align: center;
  padding: 15px;
  background: #0f380f;
  color: #9bbc0f;
  cursor: pointer;
  font-weight: bold;
  /* 窓の底に張り付くようにする */
  flex-shrink: 0; 
}

.popup-header {
  background-color: #0f380f; /* 液晶の濃い緑 */
  color: #9bbc0f;            /* 液晶の薄い緑 */
  
  /* ↓ ここで高さを調整するめう！ */
  margin-top: -10px;
  padding: 5px 10px;         /* 上下を2px、左右を10pxに（上下を減らすと狭くなるめう） */
  font-size: 10px;           /* 文字を少し小さくすると、より「帯」っぽくなるめう */
  font-weight: bold;
  
  /* 文字を左寄せにするか、中央にするかはお好みで！ */
  text-align: left; 
  
  /* ヘッダー自体が潰れないように固定 */
  flex-shrink: 0;
}

.open-label {
  display: inline-block; /* マージンを効かせるために必要めう */
  margin: -5px 0 -10px 0;        /* 上下の余白をギュッと詰めちゃうめう */
  line-height: 0.7;      /* 行間を詰める（1.0に近づけるほど狭くなるめう） */
  cursor: pointer;
  text-decoration: none;
  position: relative;
  padding-left: 20px;
}

/* ホバーした時に「液晶の中の選択枠」を出す演出 */
.open-label:hover {
  /* 1. 枠を出す（液晶の濃い緑と同じ色） */
  border: 2px solid #ffffff; 
  border-radius: 4px;
  /* 2. 少しだけ内側に余白を作って、文字と枠を離す */
  margin:  -7px 0 -12px 3;
  padding: 5px 8px 5px 18px;
  /* 3. 背景を少し明るく、または反転させると「選んでる感」が出るめう */
  background-color: rgba(255, 255, 255, 0.1); 
  /* 4. マウスカーソルを指の形に（これ大事！） */
  cursor: pointer;
}

/* さらにこだわりたい時：カーソルが乗った時に「▶」を出す裏技 */
.open-label:hover::before {
  content: "▶";
  position: absolute;
  left: 1px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: #ffffff;
}

/* 吹き出しを包む外枠（左右に寄せるための土台） */
chat-l,chat-r {
  display: flex;
  flex-direction: column;
  margin-bottom: -2px;
  width: 100%; /* 親要素の幅いっぱいに広がる */
}

/* 吹き出し本体 */
fuki {
  display: block;
  position: relative;
  padding: 10px 14px;
  border: 1px solid #0f380f;
  background-color: #8bac0f; /* ここを不透明な色に！ */
  box-shadow: 4px 4px 0px #0f380f;
  
  /* ★ここがポイント：幅の設定 */
  width: fit-content;    /* 中身の文字に合わせて縮む */
  max-width: 80%;        /* でも親要素の80%以上には広がらない */
  
  word-wrap: break-word; /* 長い単語があってもはみ出さない */
  font-size: 0.9em;
  color: #0f380f;
  z-index: 3;
  margin-bottom: -10px;
}

/* 名前ラベル本体 */
f-n {
  display: inline-block;
  font-size: 0.75em;
  font-weight: bold;
  padding: 2px 8px;
  background: #0f380f; /* 濃い緑（文字盤の色） */
  color: #8bac0f;      /* 明るい緑（液晶の色） */
  border: 0.7px solid #0f380f;
  border-bottom: none;
  margin-bottom: -22px; /* 吹き出しと少し重ねて一体感を出すめう */
  position: relative;
  z-index: 2;
}

/* 左右の個別設定 */
chat-l { align-items: flex-start; }
chat-r { align-items: flex-end; }

chat-l fuki { border-radius: 0 10px 10px 10px; }
chat-r fuki { border-radius: 10px 0 10px 10px; }

chat-l f-n { margin-left: 5px;}
chat-r f-n { margin-right: 5px;}

/* 「darkタグの中にあるch-f（吹き出し）」という指定にするめう */
dark fuki {
  border-color: #c5cfbb;      /* 枠を白に！ */
  box-shadow: 4px 4px 0px #000000; /* 影を黒にして引き締める */
}

dark f-n {
  border-color: #c5cfbb;      /* 名前の枠も白に！ */
}

/* 「タブ用のラジオボタン」という役割を狙い撃ちするめう */
input[type="radio"] {
    display: none !important;
}

/* サンプル用 */
sample {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-left: 10%;
  gap: 2px;
  box-sizing: border-box;
  width: 100%;
}

sample chat-l {
  box-sizing: border-box;
}

sample chat-r {
  padding-right: 12%;
  box-sizing: border-box;
}