@charset "utf-8";
/* CSS Document */

body{
opacity:0;
transition:opacity 1.5s ease;
background:#000;
color:#fff;
font-family:'DotGothic16', sans-serif;
margin:0;
text-align:center;
	cursor:url("../img/heart.png"), auto;
}
body.fadein{
opacity:1;
}
/* タイトル */

.hero{
padding:120px 20px;
}

.logo{
max-width:600px;
width:80%;
}


/* UI枠 */

.ui-box{
border:8px solid #fff;
padding:30px;
max-width:700px;
margin:80px auto;
}


/* セーブポイント */

.savepoint{
margin:100px 0;
}

.savepoint img{
width:48px;
image-rendering: pixelated;
}

.savepoint{
position:relative;
display:inline-block;
}

.savepoint::after{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
border-radius:50%;

box-shadow:
0 0 10px #fff,
0 0 20px #fff,
0 0 40px #ff0000;

opacity:0;
transition:0.3s;
}

.savepoint:hover::after{
opacity:1;
}

/* ステータス */

.status{
display:flex;
justify-content:center;
align-items:center;
gap:40px;
flex-wrap:wrap;
}

.player{
width:128px;
image-rendering: pixelated;
}


/* タイトル */

.ui-title{
border:6px solid #fff;
display:inline-block;
padding:12px 20px;
margin-bottom:40px;
font-family:'Press Start 2P', cursive;
}

.achievement-board{
max-width:760px;
}

.achievement-list{
display:grid;
gap:12px;
text-align:left;
}

.achievement-item{
display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
padding:14px 18px;
border:3px solid #555;
background:rgba(255,255,255,0.03);
color:#777;
}

.achievement-copy{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:8px;
}

.achievement-name,
.achievement-status{
font-family:'Press Start 2P', cursive;
font-size:12px;
line-height:1.6;
}

.achievement-hint{
font-size:14px;
line-height:1.5;
color:#9a9a9a;
}

.achievement-status{
min-width:120px;
text-align:right;
}

.achievement-item.is-unlocked{
border-color:#ffff00;
background:rgba(255,255,0,0.08);
color:#fff;
box-shadow:0 0 14px rgba(255,255,0,0.25);
}

.achievement-item.is-unlocked .achievement-hint{
color:#d8d8d8;
}

.achievement-item.is-unlocked .achievement-status{
color:#ffff00;
}


/* ギャラリー */

.gallery{
padding:60px 20px;
}

.gallery-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:20px;
max-width:1000px;
margin:auto;
}

.gallery-grid img{
    width:100%;
    height:200px; /* 好きな高さ */
    object-fit:cover;
    object-position:center;
    border:3px solid #fff;
    transition:0.2s;
}
.gallery-grid img{
border:3px solid #fff;
transition:0.2s;
}

.gallery-grid img:hover{
border-color:#ff0000;
box-shadow:
0 0 10px #ff0000,
0 0 20px #ff0000;
transform:scale(1.05);
}

/* 動画 */
/* 共通 */

.video-thumb{
width:320px;
cursor:pointer;
}

.video-thumb img{
width:100%;
height:auto;
display:block;
border:3px solid #fff;
transition:.2s;
}

.video-thumb img:hover{
border-color:#00ffff;
box-shadow:
0 0 10px #00ffff,
0 0 20px #00ffff;
}


/* Featured */
.note a{color: #fff;}
.video-main{
margin:20px auto;
max-width:800px;
}


/* Other Works */

.video-grid{
display:flex;
flex-wrap:wrap;
gap:20px;
justify-content:center;
}


/* Collaboration */

.video-collab{
display:flex;
flex-direction:column;
gap:30px;
}

.video-item{
display:flex;
gap:20px;
align-items:flex-start;
}

.video-info{
flex:1;
}

.note{
margin:0 0 5px;
}


/* SP */

@media (max-width:480px){

.video-item{
flex-direction:column;
}

.video-thumb{
width:100%;
}

.achievement-item{
flex-direction:column;
align-items:flex-start;
}

.achievement-status{
min-width:0;
text-align:left;
}

}


/* フッター */

.footer{
margin:120px 0 40px;
font-size:14px;
}

.secret-x-link{
color:#666;
text-decoration:none;
transition:color 0.3s ease, text-shadow 0.3s ease;
}

.secret-x-link:hover{
color:#ffff00;
text-shadow:0 0 8px #ffff00;
}

.secret-x-link.is-unlocked{
color:#00ffff;
text-shadow:0 0 10px #00ffff;
}

/*追加*/
.name{
display:inline-block;
transition: transform 3s ease;
}

.name.big{
transform: scale(6);
}

.name.big.shake{
animation: shake 0.12s infinite;
}

@keyframes shake{
0%{ transform: scale(6) translate(2px,-2px); }
25%{ transform: scale(6) translate(-2px,2px); }
50%{ transform: scale(6) translate(2px,2px); }
75%{ transform: scale(6) translate(-2px,-2px); }
100%{ transform: scale(6) translate(2px,-2px); }
}

/* 画像拡大 */

.overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.8);
display:flex;
justify-content:center;
align-items:center;
z-index:999;
position:fixed;
}

.overlay img{
max-width:90%;
max-height:90%;
}


/* SAVEメッセージ */

.save-message{
position:fixed;
bottom:80px;
left:50%;
transform:translateX(-50%);
border:6px solid #fff;
padding:20px 30px;
background:#000;
font-family:'Press Start 2P';
z-index:1000;
}

.savepoint{
position:relative;
display:inline-block;
}

.savepoint::after{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
border-radius:50%;

box-shadow:
0 0 10px #fff,
0 0 20px #fff,
0 0 40px #ff0000;

opacity:0;
transition:0.3s;
}

.savepoint:hover::after{
opacity:1;
}
.next{
margin-left:10px;
animation: nextBlink 1s infinite;
}

@keyframes nextBlink{

0%{opacity:0;}
50%{opacity:1;}
100%{opacity:0;}

}
.secret-message{

position:fixed;
bottom:120px;
left:50%;
transform:translateX(-50%);

background:#000;
color:#fff;

border:3px solid #fff;

padding:15px 30px;

font-family:'Press Start 2P', monospace;
font-size:12px;

z-index:9999;

}

.achievement-message{
position:fixed;
top:40px;
left:50%;
transform:translateX(-50%);
background:#000;
color:#ffff00;
border:3px solid #ffff00;
padding:18px 28px;
font-family:'Press Start 2P', monospace;
font-size:12px;
line-height:1.7;
z-index:10000;
box-shadow:0 0 16px rgba(255,255,0,0.45);
animation:fadeIn 0.25s ease;
}
.close-btn{
position:absolute;
top:20px;
right:20px;
color:#fff;
font-size:24px;
cursor:pointer;
z-index:100000;
transition:.2s;
}

.close-btn:hover{
transform:translateX(-30px);
}
/* HPが低い時の小刻みな震え */
.shake-mini {
  display: inline-block;
  animation: shake-mini 0.2s infinite;
}

@keyframes shake-mini {
  0% { transform: translate(1px, 1px); }
  25% { transform: translate(-1px, -1px); }
  50% { transform: translate(-1px, 1px); }
  75% { transform: translate(1px, -1px); }
  100% { transform: translate(1px, 1px); }
}


/* gameover-content で中央寄せを制御 */
.gameover-content {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

/* 懐かしのドット風ボタン */
.ui-button {
  background: transparent;
  color: white;
  border: 2px solid white;
  padding: 10px 30px;
  font-family: 'Press Start 2P', cursive;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s;
  opacity: 0; /* 最初は隠しておく */
  animation: fadeIn 1s ease 4s forwards; /* メッセージの後に表示 */
}

.ui-button:hover {
  background: white;
  color: black;
  box-shadow: 0 0 15px white;
}

/* ロゴのテキストスタイル（画像を使わない場合） */
.gameover-logo {
  font-family: 'Press Start 2P', cursive;
  color: #ff0000;
  font-size: 48px;
  text-shadow: 0 0 20px #800000;
  margin-bottom: 20px;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* =========================
   GAME OVER 最終防衛ライン
========================= */

/* 1. 最初は完全に消す（z-indexも最大級に） */
.gameover-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #000; /* 真っ黒 */
  z-index: 999999; /* 誰にも負けない */
  
  /* 物理的に消去 */
  display: none; 
  opacity: 0;
}

/* 2. bodyにクラスがついた時だけ、強制的に表示する */
/* body.gameover-active と書くことで詳細度を上げ、確実に上書きします */
body.gameover-active .gameover-overlay {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  animation: gameoverFadeIn 2s forwards; /* ふわっと出す */
}

/* 3. 専用のアニメーション */
@keyframes gameoverFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 4. コンテンツの設定 */
.gameover-content {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

/* 5. ケツイのメッセージ */
.gameover-message {
  font-family: 'DotGothic16', sans-serif;
  color: #fff;
  font-size: 20px;
  opacity: 0;
  animation: fadeIn 1.5s ease 2s forwards; /* ロゴの後に表示 */
}

/* 6. YESボタン（既存のfadeInアニメーションを使用） */
.ui-button {
  background: transparent;
  color: white;
  border: 2px solid white;
  padding: 10px 40px;
  font-family: 'Press Start 2P', cursive;
  font-size: 16px;
  cursor: pointer;
  opacity: 0;
  animation: fadeIn 1s ease 4s forwards; /* メッセージのさらに後に表示 */
}

.ui-button:hover {
  background: white;
  color: black;
  box-shadow: 0 0 20px #fff;
}

/* =========================
   GIMMICKS CSS
========================= */

/* --- 1. HP連動：ピンチ演出（画面ノイズ） --- */
/* HPが低い時にbodyに付与されるクラス */
body.pinch-mode {
  animation: body-vibrate 0.1s infinite alternate, body-scanline 1s infinite alternate;
  filter: contrast(1.3) brightness(1.1) saturate(0.8); /* 不気味な色味に */
}

/* 画面の微細な振動 */
@keyframes body-vibrate {
  0% { transform: translate(1px, 1px); }
  50% { transform: translate(-1px, -1px); }
  100% { transform: translate(1px, -1px); }
}

/* 画面に走査線ノイズを走らせる */
@keyframes body-scanline {
  0% {
    background: radial-gradient(circle, rgba(255, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%),
                repeating-linear-gradient(0deg, rgba(255, 0, 0, 0.05) 0px, rgba(255, 0, 0, 0.05) 1px, transparent 1px, transparent 2px);
  }
  100% {
    background: radial-gradient(circle, rgba(200, 0, 0, 0.1) 0%, rgba(0, 0, 0, 1) 100%),
                repeating-linear-gradient(0deg, rgba(255, 0, 0, 0.1) 0px, rgba(255, 0, 0, 0.1) 1px, transparent 1px, transparent 2px);
  }
}

/* --- 2. マウスカーソル：ソウル（ハート）の色変化 --- */
/* 通常のbodyのカーソル設定はそのまま */
body {
  cursor: url("../img/heart.png"), auto; /* 赤いハート */
}

/* リンクや動画、SAVEポイント、GALLERYの画像、YESボタン、secret-archive、close-btn の上に乗った時 */
a:hover,
.savepoint:hover,
.video-thumb:hover,
.gallery-grid img:hover,
.ui-button:hover,
.secret-archive:hover,
.close-btn:hover {
  /* ここに「黄色いハート（射撃モード）」の画像を指定します */
  cursor: url("../img/heart_yellow.png"), pointer !important; 
}


/* --- 4. コナミコマンドの強化演出（フラッシュ） --- */
/* 成功した時に一時的に付与されるクラス */
body.command-flash {
  animation: flash 0.5s ease forwards;
}

@keyframes flash {
  0% { filter: brightness(1); }
  10% { filter: brightness(10) contrast(1.5); } /* 爆発的な光 */
  100% { filter: brightness(1); }
}

/* gallery-grid の中に隠し画像を出現させる */
.gallery-grid .hidden-art {
  display: none; /* 最初は隠す */
  border-color: #ffff00; /* 黄色の枠線 */
  box-shadow: 0 0 15px #ffff00;
  transform: scale(0.1);
  transition: transform 1s ease 0.5s; /* コナミフラッシュの後に */
}

/* コナミコマンド成功時にgallery-gridに追加されるクラス */
.gallery-grid.show-hidden .hidden-art {
  display: block; /* 出現させる */
  transform: scale(1); /* 膨らむ */
}
footer span.name {
    cursor: pointer;
    transition: color 0.3s;
}
footer span.name:hover {
    color: #ffff00; /* Undertaleの選択色風に */
}
#link-box {
    display: none; /* 最初は隠しておく */
    margin-top: 10px;
    animation: fadeIn 0.5s;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }