/* ==========================================
   カラーパターンの定義
   ========================================== */

/* デフォルト：テーマA */
:root, body.theme-a {
  --bg-color: #000000;         /* 背景の黒 */
  --text-color: #ffffff;       /* 全体の基本文字色（白） */
  --main-color: #00ff00;       /* ボタン枠や緑テキスト */
  --accent-color: #ffcc66;     /* 建物などのアクセント */
  --sub-color: #d6d66a;        /* ギミックなどのサブ色 */
  --panel-bg: rgba(0, 0, 0, 0.85); /* モーダル・パネル背景 */
}
/* テーマB */
body.theme-b {
  --bg-color: #162b3d;
  --text-color: #f9ece4;
  --main-color: #1a6dfd;
  --accent-color: #2c7ce6; 
  --sub-color: #145cbf; 
  
  /* panel-bg 調整: 背景色(#162b3d = rgb(22, 43, 61))の88%不透明度 */
  --panel-bg: rgba(22, 43, 61, 0.88);
}

/* テーマC */
body.theme-c {
  --bg-color: #1d4d9f;
  --text-color: #f1ec7a;
  --main-color: #f6a7b8;
  --accent-color: #f08838;
  --sub-color: #8cabd9;
  --panel-bg: rgba(29, 77, 159, 0.88);
}
/* テーマD */
body.theme-d {
  --bg-color: #91323a;
  --text-color: #3a4960;
  --main-color: #d7c969;
  --accent-color: #6d7345;
  --sub-color: #554540;
  --panel-bg: rgba(145, 50, 58, 0.50);
}
/* テーマE */
body.theme-e {
  --bg-color: #8aad05;
  --text-color: #e2ce1b;
  --main-color: #df5d22;
  --accent-color: #e17976;
  --sub-color: #21344f;
  --panel-bg: rgba(138, 174, 5, 0.50);
}


/* ---------- 全体・背景 ---------- */

body {
  margin: 0;
  background: var(--bg-color);
  color: var(--text-color);     
  font-family: monospace;
  overflow: hidden;
  /* ★ 色の遷移時間を伸ばして、じわっと切り替わるように設定 */
  transition: background-color 5s ease, color 5s ease;
}

/* パネル類もじわっと変化させる */
.panel, #signalBox {
  transition: background-color 3s ease, border-color 3s ease;
}


/* ローディング画面のベース */
#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
   background-color: var(--bg-color);
  color: var(--text-color);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999; /* 常に最前面に表示 */
  transition: opacity 0.6s ease; /* 消える時のフェードアウト時間 */
}

/* 読み込み完了後にJSでこのクラスを付与して消す */
#loader.loaded {
  opacity: 0;
  pointer-events: none; /* 下にあるキャンバスを触れるようにする */
}

/* 文字のレイアウト */
.loader-content {
  text-align: center;
  letter-spacing: 0.1em;
}

.brand-name {
  font-size: 0.8rem;
  margin-bottom: 0.5rem;
}

.loading-text {
  font-size: 1.2rem;
  color: #888888;
  /* ちょっとしたアニメーション（点滅）を入れる場合 */
  animation: blink 1.2s infinite ; 
}

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

/* Three.js背景用 */
#three-bg{
  position:fixed;
  inset:0;
  z-index:-10;
}

/* 暗幕は要るのか */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background: var(--bg-color); /* 黒固定ではなく変数にする */
  opacity: 0.25;    
  pointer-events:none;
  z-index:-5;
}

/* ---------- 上部 ---------- */

#topbar{
  position:fixed;

  top:0;
  left:0;

  width:100%;
  box-sizing:border-box;

  padding:20px 30px;

  display:flex;
  justify-content:space-between;
  align-items:flex-start;

  z-index:10;
}

#radioInfo{
  color:var(--main-color);
}

#title{
  font-size:28px;
  letter-spacing:2px;
}

#status,
#time{
  margin-top:6px;
  opacity:.8;
}

#startBtn{
  font-size:22px;
  margin-top: 15px;
  display: inline-block;
}
/* ---------- ロゴ ---------- */

#logoLink {
  display: inline-block;
}

#logoLink img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  opacity: .8;
  animation: spin 2.66s linear infinite;
}

/* 回転アニメーションの定義 */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* ---------- 中央 ---------- */

#center{
  position:fixed;
  inset:0;

  display:flex;
  justify-content:center;
  align-items:center;

  pointer-events:none;

  z-index:5;
}

#signalDisplay{
  transform: translateY(10vh);
  color: var(--text-color);
  font-size:clamp(24px,5vw,64px);
  text-shadow:
    0 0 10px rgba(255,255,255,.4);
  opacity:.7;
  transition: opacity 1.5s ease-in-out, top 0.5s ease; 
}

/* −−− モーダル −−− */
.modal{
 position:fixed;
 inset:0;
 background:rgba(0,0,0,.75);
 z-index:20;

 display:flex;
 justify-content:center;
 align-items:center;
 
 /* 初期状態：透明化し、クリック判定も完全にスルーさせる */
 opacity: 0;
 visibility: hidden;
 pointer-events: none;
 transition: opacity 0.15s ease, visibility 0.15s ease;
}

/* モーダル表示時 */
.modal.show{
 opacity: 1;
 visibility: visible;
 pointer-events: auto; /* 開いたらクリックを吸い取る */
}

.panel{
 background: var(--panel-bg);
 border:1px solid var(--text-color);
 opacity: 0.7;
 padding:16px;
 width:80%;
 max-width:600px;
 text-align:left;
 pointer-events: auto;
}

.panel h2{
 font-size:16px;
 color: var(--main-color);
 margin-top:10px;
}
.panel p{
 font-size:12px;
 color: var(--text-color);
 line-height:1.8;
}
/* 画像を囲むブロックの調整 */
.modal-img-container {
  text-align: center;
  margin-bottom: 15px;
}

/* 画像自体のサイズ調整 */
.garage-img {
  width: 100%;
  max-width: 400px;
  height: auto;
  border-radius: 4px;
}

#tagLoading {
  text-align: center;
  font-size: clamp(18px, 4vw, 36px);
  opacity: 0.7;
  letter-spacing: 2px;
  animation: blink 1s infinite;
}
/* ---------- 下部 ---------- */

#bottombar{
  position:fixed;
  left:0px;
  bottom:30px;
  width:100%;
  display:flex;
  flex-direction: column;
  align-items: center; 
  z-index:10;
}

#signalBox{
  width: 90%;
  max-width: 600px;
  align-items: center;
  border: 1px solid var(--text-color);
  background: var(--panel-bg);
  padding:16px;
  box-sizing: border-box; /* 崩れ防止に追加 */
}

#signalLabel{
  color: var(--text-color);
  margin-bottom:10px;
}

#signalInputArea{
  display:flex;
  gap:10px;
}

#signalInput{
  flex:1;
  background:transparent;
  border: 1px solid var(--text-color);
  color: var(--main-color);
  font-family:monospace;
  padding:10px;
}

#sendBtn{
  background:transparent;
  border: 1px solid var(--text-color);
  color: var(--text-color);
  padding:10px 20px;
  cursor:pointer;
}

/* ★追加：常時表示カウンターのエリア */
#counterArea {
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-color);
  opacity: 0.6;
  letter-spacing: 1px;
  text-align: right;
}

#signalCount {
  color: var(--text-color);
  font-weight: bold;
}

/* ---------- ボタン共通 ---------- */

button{
  background:transparent;
  border:1px solid var(--main-color);
  color:var(--main-color);
  font-family:monospace;
  cursor:pointer;
}

button:hover{
  background:var(--main-color);
  color:#000;
}

/* ---------- ステッカーボムの壁（オーバーレイ） ---------- */
.wall-overlay {
  position: fixed;
  inset: 0;
  background: rgba(30, 30, 30, 0.9); 
  z-index: 30; /* モーダルよりさらに手前に */
  overflow: hidden;

  /* 砂嵐の質感を重ねる */
  background-image: 
    repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,0.05), rgba(0,0,0,0.1) 2px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 2px);
  background-size: 4px 4px, 100% 3px;

  /* SVGのモヤモヤを適用 */
  filter: url(#glitch-blur); 
  
  /* アニメーションを設定（4秒周期で、一瞬だけ動く） */
  animation: vhs-glitch 5s infinite step-end;

  /* 初期状態：透明化し、クリック判定も完全にスルーさせる */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0.15s ease;
}

@keyframes vhs-glitch {
  0%, 93% { 
    filter: none; 
    transform: none; 
  }
  94% { 
    filter: url(#glitch-blur) contrast(140%) brightness(1.3); 
    transform: skewX(3deg); 
  }
  95% { 
    filter: url(#glitch-blur) saturate(200%); 
    transform: skewX(-3deg) scaleY(1.05); 
  }
  96% { 
    filter: none; 
    transform: none; 
  }
  97% { 
    filter: url(#glitch-blur) opacity(0.8); 
    transform: translateX(5px); 
  }
  100% { 
    filter: none; 
    transform: none; 
  }
}

/* 壁が表示されたとき */
.wall-overlay.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto; /* 開いたら中のステッカーをクリック可能にする */
}
.wall-scroll{
  position: absolute;
  inset: 0;

  overflow: auto;
}
/* 画面の真ん中を基準点にするコンテナ */
#wallContainer{
  position:absolute;
  top:50%;
  left:50%;
  width:0;
  height:0;
}

/* ステッカー・バナーの共通スタイル */
.sticker {
  position: absolute;
  transform-origin: center center;
  transition: transform 0.2s;
  image-rendering: pixelated;
}

.sticker img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
}

/* リンク付きバナーはホバー時にちょっと浮き上がる演出 */
a.sticker:hover {
  transform: translate(-50%, -50%) scale(1.05) !important;
  z-index: 999 !important;
}

/* 左下のcloseボタンの位置固定 */
.wall-close {
  position: absolute;
  left:30px;
  bottom:30px;
  font-size: 14px;
  padding: 10px 20px;
}

/* ==========================================================================
   ステッカーボムの壁：下部操作ボタン（左右配置版）
   ========================================================================== */

/* 2つのボタンを画面の最下部で左右両端に広げるコンテナ */
.wall-controls {
  position: absolute;
  bottom: 30px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 30px;
  box-sizing: border-box;
  z-index: 100;
  pointer-events: none; /* 隙間部分のクリックが壁を貫通するように */
}

/* ボタン自体はクリックできるようにする */
.wall-controls .wall-close,
.wall-controls .sticker-link {
  pointer-events: auto;
}

/* 元々あった .wall-close の絶対配置をリセット */
.wall-controls .wall-close {
  position: static;
  left: auto;
  bottom: auto;
}

/* 追加するステッカー応募リンクボタン（右端に配置される） */
.sticker-link {
  display: inline-block;
  font-size: 14px;
  padding: 10px 20px;
  background: transparent;
  border: 1px solid var(--main-color);
  color: var(--main-color);
  font-family: monospace;
  text-decoration: none;
  letter-spacing: 1px;
  transition: all 0.2s ease;
  cursor: pointer;
  box-shadow: 0 0 8px rgba(0, 255, 0, 0.2);
}

/* ホバー時の反転・発光強化 */
.sticker-link:hover {
  background: var(--main-color);
  color: #000;
  box-shadow: 0 0 15px #0f0;
}

.building-link {
  color: white;
  text-decoration: none;
}

.building-link:hover {
  color: #ffcc66;
}

/* テーマ切替ボタン用スタイル（追加） */
#themeSwitchers {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.theme-btn {
  font-size: 12px;
  padding: 4px 8px;
}

/* 画面が狭いスマホ・PC縦画面向けの調整（位置を少し詰める） */
@media (max-width: 550px) or (max-height: 550px) {
  .wall-controls {
    bottom: 15px;
    padding: 0 15px;
  }
  .wall-close,
  .sticker-link {
    font-size: 12px;
    padding: 8px 14px;
  }
}

/* ==========================================
   【横長・PC・スマホ横向き向けの調整】
   ========================================== */
@media (max-height: 550px) or (min-width: 1024px) {
  #topbar {
    padding: 10px 20px;
  }
  #title {
    font-size: 20px;
  }
  #startBtn {
    font-size: 16px;
    margin-top: 5px;
  }
  #logoLink img {
    width: 50px;
    height: 50px;
  }

  #bottombar {
    bottom: 15px;
  }
  #signalBox {
    padding: 10px;
  }

  /* パネル内をスクロール可能にしてボタンが外にはみ出さないようにガード */
  .panel {
    padding: 20px;
    max-height: 80vh; 
    overflow-y: auto;
    box-sizing: border-box;
  }
  .panel h2 {
    font-size: 24px;
    margin-bottom: 10px;
  }
  .panel p {
    font-size: 16px;
    line-height: 1.5;
  }
}