body{
  margin:0;
  background:#000;
  color:#fff;
  font-family:monospace;
  overflow:hidden;
}

/* ローディング画面のベース */
#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(10, 10, 10, 0.9); /* 完全に真っ黒なら rgba(0,0,0,1) に */
  color: #ffffff;
  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:rgba(0,0,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:#0f0;
}

#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:#fff;
  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:#000;
 border:1px solid #fff;
 opacity: 0.7;
 padding:16px;
 width:80%;
 max-width:600px;
 text-align:left;
 pointer-events: auto;
}

.panel h2{
 font-size:16px;
 color:#fff;
 margin-top:10px;
}
.panel p{
 font-size:12px;
 color:#fff;
 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: 80%;
  max-width: 600px;
  align-items: center;
  border:1px solid #fff;
  background:rgba(0,0,0,.35);
  padding:16px;
}

#signalLabel{
  color:#fff;
  margin-bottom:10px;
}

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

#signalInput{
  flex:1;
  background:transparent;
  border:1px solid #fff;
  color:#0f0;
  font-family:monospace;
  padding:10px;
}

#sendBtn{
  background:transparent;

  border:1px solid #fff;

  color:#fff;

  padding:10px 20px;

  cursor:pointer;
}
#updateInfo{
  margin-top: 10px;
  font-size: 12px;
  opacity: .7;
}

#update-log-link{
  color: inherit;
}

#update-log-link:hover{
  opacity: 1;
}

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

button{
  background:transparent;
  border:1px solid #0f0;
  color:#0f0;
  font-family:monospace;
  cursor:pointer;
}

button:hover{
  background:#0f0;
  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 #0f0;
  color: #0f0;
  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: #0f0;
  color: #000;
  box-shadow: 0 0 15px #0f0;
}

/* 画面が狭いスマホ・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;
  }
}