/* -----------------------------------
   BASE SETTINGS (Background Image & Brutalism)
------------------------------------ */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: #000000;
    background-image: url('dokidokicypher.png');
    background-size: auto 110vh; 
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed; 
    
    position: relative;
    color: #ffffff;
    font-family: 'Syne', sans-serif;
    line-height: 1.2;
    padding: 60px 20px;
    overflow-x: hidden;
}

/* 背景のドット網目レイヤー */
body::before {
    content: '';
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-image: radial-gradient(rgba(0,0,0,0.7) 1px, transparent 1px);
    background-size: 3px 3px;
    z-index: 0; 
    pointer-events: none; 
}

header, main, footer {
    position: relative;
    z-index: 1;
}

a {
    color: inherit;
    text-decoration: none;
    cursor: url('https://files.strawcdn.com/cursors/VTOgymbnUA.png') 16 16, pointer;
}

/* -----------------------------------
   HEADER & 3D CUBE LOGO 
------------------------------------ */
header {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 80px;
    height: 400px; /* キューブが回るための3D空間を確保 */
    perspective: 1200px; 
}

.main-logo-container {
    width: 300px;
    height: 300px;
    position: relative;
}

.cube {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    /* X, Y, Z軸を絡めた不規則なサイコロ回転（速度は今の重厚感を維持） */
    animation: rollDice 8s linear infinite; 
}

/* 6つの面の共通設定 */
.face {
    position: absolute;
    width: 300px;
    height: 300px;
    background-color: rgba(0, 0, 0, 0.9); /* アートワークがない時の黒背景 */
    border: 1px solid #333333; /* うっすらとしたキューブの枠線 */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* 面の中の画像が正方形にピタッと収まるようにする */
.face img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* アートワークを入れた時に見切れないようにする */
}

/* --- 3D空間で6つの面を組み立てる --- */
/* 300pxの半分(150px)ずつ前後左右に押し出して箱にする */
.front  { transform: rotateY(0deg) translateZ(150px); }
.back   { transform: rotateY(180deg) translateZ(150px); }
.right  { transform: rotateY(90deg) translateZ(150px); }
.left   { transform: rotateY(-90deg) translateZ(150px); }
.top    { transform: rotateX(90deg) translateZ(150px); }
.bottom { transform: rotateX(-90deg) translateZ(150px); }

/* --- サイコロのような不規則な回転アニメーション --- */
@keyframes rollDice {
    0% { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
    100% { transform: rotateX(360deg) rotateY(720deg) rotateZ(360deg); } /* Y軸を多めに回すことでロゴが見えやすくする */
}

.cube.clicked .face {
    border-color: #df001d;
    box-shadow: inset 0 0 20px rgba(223, 0, 29, 0.4);
}

/* -----------------------------------
   ORBITAL SVG RINGS (Saturn Style)
------------------------------------ */
.orbital-ring {
    position: absolute;
    width: 900px; /* サイコロより大きく広げる */
    height: auto;
    left: 50%;
    top: 50%;
    pointer-events: none;
    z-index: 0; /* サイコロの背後へ */
    overflow: visible;
}

/* ★上の輪：手前に倒して、少し斜めに傾ける */
.ring-top {
    transform: translate(-50%, -50%) rotateX(70deg) rotateZ(15deg) translateY(-20px);
}

/* ★下の輪：別の角度で倒し、交差させずに「別々の軌道」に見せる */
.ring-bottom {
    transform: translate(-50%, -50%) rotateX(70deg) rotateZ(-15deg) translateY(20px);
}

.ticker-text {
    font-family: 'Silkscreen', cursive;
    font-size: 18px; /* SVG内なのでpx指定が安定します */
    fill: #ffffff;
    opacity: 0.7;
    text-transform: uppercase;
}

/* -----------------------------------
   SECTIONS & BOXES 
------------------------------------ */
section {
    max-width: 600px;
    margin: 0 auto 100px auto;
}

.section-header {
    margin-bottom: 40px;
    border-bottom: 3px solid #ffffff; 
    padding-bottom: 10px;
    display: inline-block;
}

h2.sys-title {
    font-size: 3rem; 
    letter-spacing: 2px; 
    color: #ffffff;
    /* ★赤い影を、怖くないクッキリした「黒い影」に修正 */
    text-shadow: 2px 2px 0px #000000; 
    /* 完全に影をなくしたい場合は、以下に書き換えてください */
    /* text-shadow: none; */
    line-height: 1;
}

.founding-text {
    font-family: "Unica One", sans-serif;
    font-weight: 400;
    .michroma-regular {
  
}

    font-size: 1rem; 
    color: #cccccc;
    margin-top: 5px;
    text-shadow: 1px 1px 3px #000000;
}

/* -----------------------------------
   VERTICAL LAYOUT
------------------------------------ */
.list-container-vertical {
    display: flex;
    flex-direction: column;
}

.dj-card-v {
    display: flex;
    align-items: center;
    padding: 15px 10px;
    border-bottom: 1px solid #ffffff; 
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(3px); 
    transition: background-color 0s, color 0s; 
}

.dj-card-v:first-child {
    border-top: 1px solid #ffffff;
}

.dj-card-v:hover {
    background-color: #ffffff;
    color: #000000;
}

.dj-icon-sq {
    width: 90px;
    height: 90px;
    flex-shrink: 0;
    overflow: hidden;
    border: 1px solid #ffffff;
}

.dj-card-v:hover .dj-icon-sq {
    border-color: #000000;
}

.dj-icon-sq img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%) contrast(120%); 
}

.dj-card-v:hover .dj-icon-sq img {
    filter: grayscale(0%) contrast(100%);
}

.dj-info {
    margin-left: 25px;
    flex: 1;
}

.dj-info h3 {
    font-size: 2.2rem;
    line-height: 1.1; /* 改行したときに重ならないよう調整 */
    margin-bottom: 8px;
}

.dj-info h3 .role {
    /* ★修正：blockにすることで強制的に改行させる */
    display: block; 
    
    /* ★修正：フォントをMichromaに変更 */
    font-family: "Michroma", sans-serif;
    font-weight: 600;
    
    /* ★修正：左の余白を消して、上に少し隙間を作る */
    margin-left: 0; 
    margin-top: 8px;
    
    font-size: 0.65rem; /* Michromaは横長なので、少し小さくすると綺麗です */
    color: #dcdcdc; 
    font-style: normal; /* Michromaは斜体より正体の方がデジタル感が出ます */
    letter-spacing: 1px;
    text-shadow: none; /* 肩書の影は消して可読性を上げます */
}

/* ★追加：カードにマウスが乗ったとき、肩書も黒くする */
.dj-card-v:hover .dj-info h3 .role {
    color: #000000; /* 文字を黒に */
    text-shadow: none; /* ホバー時は文字が潰れないよう影を消す */
}

.dj-card-v .links {
    display: flex;
    gap: 15px;
    font-size: 0.9rem;
    margin-top: 5px;
    font-family: "Unica One", sans-serif;
}

.access-log {
    font-family: "Unica One", sans-serif;
    font-weight: 400;
    font-size: 1.1rem;
    color: #ffffff;
    text-shadow: 1px 1px 3px #000000;
}

.dj-card-v .links a {
    /* ★サイズをさらに小さく (0.8rem) */
    font-size: 0.8rem; 
    
    /* ★初期状態の色を少し落として、控えめにする */
    color: #888888; 
    
    text-decoration: underline;
    letter-spacing: 1px;
    opacity: 0.8;
    transition: opacity 0.2s, color 0.2s;
}

/* マウスを乗せた時だけ白く光らせる */
.dj-card-v:hover .links a {
    color: #666666; /* カードホバー時は少し見やすく */
}

.dj-card-v .links a:hover {
    opacity: 1;
    color: #df001d !important; /* ホバー時はドキドキ・レッドに */
    text-decoration: none;
}

.sc-player iframe {
    display: block; 
    width: 100%;
    min-height: 166px; 
    filter: grayscale(30%) contrast(120%);
    transition: filter 0.1s ease;
}

/* -----------------------------------
   FOOTER (Centered Layout) 
------------------------------------ */
footer {
    display: flex;
    flex-direction: column;
    align-items: center; 
    text-align: center;
    margin-top: 100px;
    padding-bottom: 40px;
}

.booking-info {
    margin-bottom: 60px;
    width: 100%;
}

.booking-info a {
    font-family: 'Unica One', sans-serif;
    font-size: 1.3rem;
    color: #ffffff;
    text-decoration: none;
    letter-spacing: 1px;
    text-shadow: 2px 2px 0px #000000; 
    transition: color 0.2s, text-shadow 0.2s;
}

.booking-info a:hover {
    color: #df001d;
    text-shadow: 2px 2px 0px #000000, 0 0 15px rgba(223, 0, 29, 0.9);
}

.access-log {
    /* ★Michroma を適用 */
    font-family: "Michroma", sans-serif;
    font-weight: 400;
    font-size: 0.9rem; /* 幅が広いので少しサイズを下げるとバランスが良いです */
    color: #ffffff;
    letter-spacing: 1px;
    margin-bottom: 8px;
    display: block;
}

.rights-reserved {
    /* ★Michroma を適用 */
    font-family: "Michroma", sans-serif;
    font-size: 0.5rem; /* 極小サイズ */
    color: #ffffff;
    /* 文字間隔を少し広げて、ハイテク機器の警告文のような質感に */
    letter-spacing: 0.2rem; 
    text-transform: uppercase;
    display: block;
    margin-top: 4px;
    opacity: 1;
}