/* ================================= */
/* RESET */
/* ================================= */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{

  background:#050505;

  color:#e8e0d0;

  font-family:
  "Yu Mincho",
  "Hiragino Mincho ProN",
  serif;

}

/* ================================= */
/* 初期状態 */
/* ================================= */

#youtube-screen,
#record-screen,
#location-screen{

  display:none;

}

/* ================================= */
/* RECORD PANEL */
/* ================================= */

#recordPanel{

  position:fixed;

  top:0;
  right:-320px;

  width:300px;
  height:100vh;

  background:#0a0a0a;

  border-left:
  1px solid #8b0000;

  z-index:9999;

  transition:.4s;

}

#recordPanel.open{

  right:0;

}

.record-title{

  padding:25px;

  color:#8b0000;

  border-bottom:
  1px solid #8b0000;

  letter-spacing:4px;

}

#recordList{

  padding:20px;

}

#recordList div{

  padding:15px;

  margin-bottom:10px;

  border:
  1px solid #333;

  color:#888;

}

/* ================================= */
/* INTRO */
/* ================================= */

#intro-screen{

  position:relative;

  width:100%;
  height:100vh;

  display:flex;

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

  overflow:hidden;

  background:

  radial-gradient(
  circle at center,
  rgba(120,0,0,.1),
  transparent 60%
  ),

  #050505;

}

#intro-screen::before{

  content:"";

  position:absolute;

  inset:0;

  background:

  repeating-linear-gradient(
  0deg,
  rgba(255,255,255,.015),
  rgba(255,255,255,.015) 1px,
  transparent 1px,
  transparent 4px
  );

}

#recordButton{

  position:absolute;

  top:20px;
  right:20px;

  background:none;

  border:1px solid #8b0000;

  color:#8b0000;

  padding:10px 18px;

  cursor:pointer;

}

.intro-container{

  width:min(90%,700px);

  text-align:center;

  padding:20px;

}

.seal{

  width:120px;
  height:120px;

  border:
  3px solid #8b0000;

  border-radius:50%;

  margin:auto;

  margin-bottom:40px;

  display:flex;

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

  color:#8b0000;

  font-size:22px;

}

.intro-container h1{

  font-size:
  clamp(
  2rem,
  5vw,
  3.5rem
  );

  letter-spacing:8px;

  margin-bottom:40px;

}

#guideText{

  min-height:180px;

  text-align:left;

  white-space:pre-line;

  line-height:2.2;

  font-size:20px;

}

#tapHint{

  margin-top:30px;

  color:#8b0000;

  letter-spacing:5px;

  animation:pulse 1.5s infinite;

}

@keyframes pulse{

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

}

.record-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:15px;

}

#closeRecord{

    background:none;

    border:none;

    color:white;

    font-size:24px;

    cursor:pointer;

    padding:0 8px;

}

#closeRecord:hover{

    opacity:.7;

}

/* ================================= */
/* YOUTUBE */
/* ================================= */

#youtube-screen{

  background:#0f0f0f;

  color:white;

  height:100vh;

  overflow-y:auto;

}

/* HEADER */

.yt-header{

  height:56px;

  display:flex;

  justify-content:space-between;

  align-items:center;

  padding:0 16px;

  border-bottom:
  1px solid #222;

  position:sticky;

  top:0;

  background:#0f0f0f;

  z-index:50;

}

.yt-left,
.yt-right{

  display:flex;

  align-items:center;

  gap:16px;

}

.yt-logo{

  display:flex;

  align-items:center;

  gap:8px;

}

.play-icon{

  width:28px;
  height:20px;

  background:#ff0000;

  border-radius:6px;

  position:relative;

}

.play-icon::after{

  content:"";

  position:absolute;

  top:50%;
  left:50%;

  transform:
  translate(-40%,-50%);

  border-top:5px solid transparent;
  border-bottom:5px solid transparent;
  border-left:8px solid white;

}

.profile-icon{

  width:30px;
  height:30px;

  border-radius:50%;

  background:#8b0000;

  display:flex;

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

}

/* VIDEO */

.video-container{

  width:100%;

  aspect-ratio:16/9;

  background:black;

}

#mainVideo{

  width:100%;
  height:100%;

  object-fit:cover;

}

/* INFO */

.yt-info{

  padding:16px;

}

.video-title{

  font-size:20px;

  margin-bottom:8px;

}

.video-meta{

  color:#aaa;

  font-size:14px;

}

/* CHANNEL */

.channel-row{

  display:flex;

  justify-content:space-between;

  align-items:center;

  margin-top:16px;

}

.channel-left{

  display:flex;

  gap:12px;

  align-items:center;

}

.channel-icon{

  width:42px;
  height:42px;

  border-radius:50%;

  background:#8b0000;

  display:flex;

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

}

.channel-name{

  font-weight:bold;

}

.subscribers{

  color:#aaa;

  font-size:13px;

}

.subscribe-btn{

  border:none;

  background:white;

  color:black;

  border-radius:20px;

  padding:8px 16px;

  font-weight:bold;

}

/* ACTION */

.action-row{

  display:flex;

  gap:10px;

  overflow-x:auto;

  margin-top:16px;

}

.action-row button{

  background:#272727;

  color:white;

  border:none;

  border-radius:20px;

  padding:10px 15px;

  white-space:nowrap;

}

/* COMMENTS */

.comments-box{

  margin:0 16px;

  background:#272727;

  border-radius:16px;

  padding:14px;

}

.comments-header{

  font-weight:bold;

  margin-bottom:12px;

}

#chatLog{

  height:230px;

  overflow-y:auto;

}

.message{

  display:flex;

  gap:10px;

  margin-bottom:14px;

}

.avatar{

  width:34px;
  height:34px;

  border-radius:50%;

  background:#555;

  display:flex;

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

}

.username{

  color:#aaa;

  font-size:13px;

}

.text{

  font-size:15px;

}

.unknown .text{

  color:#ff4d4d;

}

/* SHORTS */

.shorts-section{

    padding:16px;

}

.shorts-section h2{

    margin-bottom:12px;

}

.shorts-row{

    display:flex;

    gap:10px;

    overflow-x:auto;

}

.short-card{

    min-width:130px;

}

.short-thumb{

    width:130px;
    height:220px;

    background:#222;

    border-radius:12px;

}

.short-title{

    margin-top:8px;

    font-size:13px;

}

/* ================================= */
/* RECORD */
/* ================================= */

#record-screen{

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

  min-height:100vh;

  background:#050505;

  color:#e8e0d0;

  padding:30px;

}

.record-container{

  width:min(90%,700px);

}

#recordName{

  font-size:36px;

  color:#8b0000;

  margin-bottom:30px;

}

#recordContent{

  white-space:pre-line;

  line-height:2.2;

  font-size:18px;

}

.record-next{

  margin-top:40px;

  color:#8b0000;

}

/* ================================= */
/* LOCATION */
/* ================================= */

#location-screen{

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

  min-height:100vh;

  background:black;

  color:white;

}

.location-container{

  width:min(90%,700px);

  text-align:center;

}

#locationTitle{

  font-size:40px;

  color:#ff4444;

  margin-bottom:30px;

  letter-spacing:6px;

}

#locationContent{

  white-space:pre-line;

  line-height:2.4;

  font-size:22px;

}

/* ================================= */
/* GLITCH */
/* ================================= */

.glitch{

  animation:glitch .15s infinite;

}

@keyframes glitch{

  0%{
      transform:translate(0);
  }

  25%{
      transform:translate(-2px,1px);
  }

  50%{
      transform:translate(2px,-1px);
  }

  75%{
      transform:translate(-1px,-2px);
  }

  100%{
      transform:translate(0);
  }

}

/* ================================= */
/* MOBILE */
/* ================================= */

@media(max-width:768px){

  .intro-container h1{

      font-size:2rem;

      letter-spacing:4px;

  }

  #guideText{

      font-size:17px;

  }

  .video-title{

      font-size:18px;

  }

}