/* ============================
   基本設定 & 画面サイズ指定
============================ */
* {
    box-sizing: border-box;
}

body {
    background-color: #000; /* 背景は漆黒 */
    color: #fff;
    font-family: 'DotGothic16', sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.5;
    image-rendering: pixelated; 
    font-smooth: never;
    -webkit-font-smoothing: none;
}

/* サイト全体のサイズを制限して中央に寄せる（ここが重要！） */
.site-wrapper {
    max-width: 1100px;    /* サイトの最大横幅 */
    margin: 0 auto;       /* 左右中央寄せ */
    display: flex;
    min-height: 100vh;
    padding: 40px 20px;
    gap: 30px;
    background-color: #000;
}

/* ============================
   ドラクエ風ウィンドウ
============================ */
.window {
    background-color: #0000a0; /* 濃い青 */
    border: 4px solid #fff;
    outline: 4px solid #000;
    outline-offset: -2px;
    box-shadow: inset 0 0 0 4px #000;
    padding: 20px;
    border-radius: 4px;
    position: relative;
    animation: windowPop 0.3s ease-out;
}

.box-inner {
    padding: 10px;
}

.window-title {
    position: absolute;
    top: -15px;
    left: 20px;
    background: #000;
    color: #f7e600;
    padding: 0 15px;
    border: 4px solid #fff;
    outline: 2px solid #000;
    outline-offset: -2px;
    font-size: 1.3rem;
    margin: 0;
    z-index: 10;
}

/* ============================
   ナビゲーション（コマンド）
============================ */
.side-nav {
    width: 280px;
    flex-shrink: 0;
    position: sticky;
    top: 40px;
    height: fit-content;
}

.logo-container {
    text-align: center;
    margin-bottom: 25px;
    border-bottom: 4px dotted #fff;
    padding-bottom: 15px;
}

.server-logo {
    width: 110px;
    height: auto;
}

.dq-menu ul { list-style: none; padding: 0; margin: 0; }
.dq-menu li { margin-bottom: 12px; }
.dq-menu a {
    position: relative;
    display: block;
    padding-left: 35px;
    font-size: 1.2rem;
    transition: 0.1s;
}

/* カーソル ▶ */
.dq-menu a::before {
    content: '';
    position: absolute;
    left: 5px; top: 50%;
    transform: translateY(-50%);
    width: 0; height: 0;
    border-style: solid;
    border-width: 8px 0 8px 14px;
    border-color: transparent transparent transparent #fff;
    opacity: 0;
}

.dq-menu a:hover, .dq-menu a.active { color: #f7e600; }
.dq-menu a:hover::before, .dq-menu a.active::before {
    opacity: 1;
    border-color: transparent transparent transparent #f7e600;
    animation: cursorMove 0.6s infinite;
}

/* ============================
   サーバー情報 & ステータス
============================ */
.status-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.status-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.status-values { display: flex; align-items: baseline; }

/* 状態の色 */
.status-online { color: #00ff00 !important; text-shadow: 0 0 8px #00ff00; }
.status-offline { color: #ff0000 !important; text-shadow: 0 0 8px #ff0000; }
.status-checking { color: #ffff00 !important; animation: blink 1s infinite; }

/* 人数の黄色 */
.count-yellow {
    color: #ffff00 !important;
    font-size: 1.5rem;
    text-shadow: 0 0 5px rgba(255, 255, 0, 0.5);
}

.visitor-count { color: #f7e600; font-size: 1.3rem; }

/* ============================
   スライダー & コンテンツ
============================ */
.dq-slider { border: 2px solid #fff; background: #000; margin-bottom: 15px; }
.slider-track {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; -ms-overflow-style: none;
}
.slider-track::-webkit-scrollbar { display: none; }
.slider-track img {
    flex: 0 0 100%; width: 100%; height: 220px;
    object-fit: cover; scroll-snap-align: start;
}
.slider-hint {
    background: #000; color: #fff; font-size: 0.8rem;
    text-align: center; border-top: 2px solid #fff;
}

/* 運営パーティカード */
.status-card-v2 {
    display: flex; border: 2px solid #fff;
    background: rgba(255, 255, 255, 0.05);
    padding: 15px; gap: 15px; margin-bottom: 15px;
}
.face-frame { width: 70px; height: 70px; border: 2px solid #fff; flex-shrink: 0; }
.face-frame img { width: 100%; height: 100%; object-fit: cover; }

/* ============================
   アニメーション
============================ */
@keyframes windowPop { 0% { transform: scale(0.98); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@keyframes cursorMove { 0%, 100% { transform: translateY(-50%) translateX(0); } 50% { transform: translateY(-50%) translateX(-5px); } }

/* ============================
   レスポンシブ (スマホ)
============================ */
@media (max-width: 850px) {
    .site-wrapper { flex-direction: column; padding: 15px; }
    .side-nav { width: 100%; position: relative; top: 0; }
    .status-card-v2 { flex-direction: column; text-align: center; }
    .face-frame { margin: 0 auto; }
}
/* ============================
   冒険のはじまり（スタート画面）演出
============================ */

/* 1. 画面全体の背景（漆黒の闇） */
#start-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, #1a1a1a 0%, #000 100%); /* 中央を少し明るくして奥行きを出す */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999; /* すべての要素の最前面 */
    cursor: pointer;
    transition: opacity 0.8s ease, visibility 0.8s;
}

/* 2. スタートウィンドウの浮遊演出 */
.start-window {
    text-align: center;
    padding: 50px !important;
    min-width: 320px;
    box-shadow: 0 0 30px rgba(0, 0, 160, 0.5); /* 窓が少し光っている演出 */
    animation: 
        windowPop 0.5s ease-out, /* 出現時 */
        windowFloat 3s ease-in-out infinite; /* 浮遊感 */
}

/* 3. ロゴのフェードイン */
.start-window .logo-container img {
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.3));
    animation: logoShine 2s ease-in-out infinite;
}

/* 4. 「▶ ぼうけんを はじめる」の点滅 */
.blink-text {
    margin-top: 35px;
    color: #f7e600; /* 伝説の黄金色 */
    font-size: 1.5rem;
    letter-spacing: 2px;
    text-shadow: 2px 2px 0 #000;
    animation: dq-blink 0.8s steps(2, start) infinite; /* ドラクエ風のカチカチした点滅 */
}

/* ============================
   演出用のアニメーション（呪文）
============================ */

/* 出現時のポップアップ */
@keyframes windowPop {
    0% { transform: scale(0.5); opacity: 0; }
    80% { transform: scale(1.05); }
    100% { transform: scale(1); opacity: 1; }
}

/* 窓のゆっくりとした浮遊感 */
@keyframes windowFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* ロゴの淡い輝き */
@keyframes logoShine {
    0%, 100% { opacity: 0.8; filter: brightness(1); }
    50% { opacity: 1; filter: brightness(1.3) drop-shadow(0 0 15px #fff); }
}

/* ドラクエ伝統の文字点滅 */
@keyframes dq-blink {
    to { visibility: hidden; }
}
/* ============================
   サーバー名の装飾（赤文字＋黒縁取り）
============================ */
.server-name {
    color: #ff5656; /* 真っ赤な色 */
    font-size: 1.5rem; /* 少し大きめに */
    text-align: center;
    margin-top: 15px; /* ロゴとの間隔 */
    margin-bottom: 5px;
    font-weight: normal; /* ドットフォントなので太字は解除 */
    
    /* ドット絵風の黒い縁取りをつける呪文 */
    text-shadow: 
        3px 0 0 #000,
        -3px 0 0 #000,
        0 3px 0 #000,
        0 -3px 0 #000;
    
    letter-spacing: 2px; /* 文字の間隔を少し広げる */
}
/* --- ドラクエ風コマンドメニュー（色修正版） --- */
.dq-menu a, 
.dq-menu a:link, 
.dq-menu a:visited {
    color: #fff !important; /* ★ 未訪問でも訪問済みでも「白」に固定！ */
    position: relative;
    display: block;
    padding-left: 35px;
    font-size: 1.2rem;
    text-decoration: none;
    transition: 0.1s;
}

/* ホバー時とアクティブ（今いるページ）の時だけ黄色にする */
.dq-menu a:hover, 
.dq-menu a.active {
    color: #f7e600 !important; /* ★ ホバー時は黄金色！ */
}

/* カーソル ▶ の色も連動させる */
.dq-menu a:hover::before, 
.dq-menu a.active::before {
    opacity: 1;
    border-color: transparent transparent transparent #f7e600;
    animation: cursorMove 0.6s infinite;
}
/* おみくじボタンの装飾 */
.shrine-area {
    text-align: center;
    padding: 20px 0;
}

.dq-button {
    background: #000;
    color: #fff;
    border: 2px solid #fff;
    padding: 10px 20px;
    font-family: 'DotGothic16', sans-serif;
    font-size: 1.2rem;
    cursor: pointer;
    transition: 0.2s;
    outline: none;
}

.dq-button:hover {
    color: #f7e600;
    border-color: #f7e600;
    transform: scale(1.05);
    box-shadow: 0 0 10px rgba(247, 230, 0, 0.5);
}

/* おみくじ結果の強調 */
#fortune-type {
    font-size: 1.8rem;
    letter-spacing: 4px;
}

/* ロボ吉用の特別色 */
.text-robokichi {
    color: #ff244c !important;
    text-shadow: 0 0 10px #ff244c;
}
/* --- ロボフォンの特別装飾 --- */
.robophone-special {
    border: 4px double #f7e600 !important; /* 金色の二重線 */
    background: rgba(0, 0, 160, 0.7);
    box-shadow: 0 0 15px rgba(247, 230, 0, 0.3);
}

.rare-tag {
    background: #ff0000;
    color: #fff;
    padding: 2px 8px;
    font-size: 0.8rem;
    margin-right: 10px;
    border: 1px solid #fff;
    vertical-align: middle;
}

/* --- アプリ一覧の見出しと色分け --- */
.app-window {
    margin-bottom: 25px;
    border-left: 8px solid #fff; /* 左側のカラーバー */
    background: rgba(255, 255, 255, 0.05);
    padding: 15px;
}

.app-header {
    display: flex;
    align-items: center;
    border-bottom: 2px solid rgba(255, 255, 255, 0.3);
    margin-bottom: 10px;
    padding-bottom: 5px;
}

.app-name {
    margin: 0;
    font-size: 1.2rem;
}

.cmd-heading {
    color: #f7e600; /* 見出しを黄色に */
    margin: 15px 0 5px 0;
    font-size: 1rem;
}

/* カテゴリ別の色設定 */
.category-money { border-left-color: #f7e600; } /* 黄色：お金 */
.category-shop  { border-left-color: #00ff00; } /* 緑色：ショップ */
.category-move  { border-left-color: #00ffff; } /* 水色：移動 */
.category-land  { border-left-color: #ff4444; } /* 赤色：土地 */
.category-sns   { border-left-color: #ff00ff; } /* ピンク：SNS */

.app-icon {
    margin-right: 10px;
    font-size: 1.4rem;
}
/* ============================
   ぼうけんの おきて 専用装飾
============================ */

/* 規約のスクロールエリア */
.scroll-box {
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 15px;
    border: 2px inset rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.3);
}

/* カスタムスクロールバー（ドラクエ風） */
.scroll-box::-webkit-scrollbar { width: 8px; }
.scroll-box::-webkit-scrollbar-track { background: #000; }
.scroll-box::-webkit-scrollbar-thumb { background: #fff; border: 2px solid #000; }

/* 更新日 */
.status-text {
    color: #aaa;
    text-align: right;
    font-size: 0.8rem;
    border-bottom: 2px dotted #555;
    padding-bottom: 5px;
}

/* 点数システムの情報 */
.point-info {
    color: #ff4444; /* 警告の赤 */
    font-size: 1.2rem;
    background: rgba(255, 255, 255, 0.1);
    padding: 10px;
    border-left: 5px solid #ff4444;
    margin: 20px 0;
}

/* 規約のカテゴリー見出し */
.rule-category h3 {
    color: #f7e600;
    font-size: 1.1rem;
    margin-top: 30px;
    display: flex;
    align-items: center;
}
.rule-category h3::before {
    content: "📜";
    margin-right: 10px;
}

/* リストの装飾 */
.rule-category ul {
    list-style: none;
    padding-left: 10px;
}
.rule-category li {
    margin-bottom: 10px;
    padding-left: 20px;
    position: relative;
    line-height: 1.6;
}
.rule-category li::before {
    content: "・";
    position: absolute;
    left: 0;
    color: #f7e600;
}

/* BANされた者の末路（警告ボックス） */
.notice-box {
    background: rgba(139, 0, 0, 0.4) !important; /* 暗い赤 */
    border: 3px double #ff0000 !important;
    padding: 15px !important;
    margin-top: 40px;
    animation: danger-pulse 2s infinite;
}
@keyframes danger-pulse {
    0%, 100% { box-shadow: 0 0 5px #ff0000; }
    50% { box-shadow: 0 0 20px #ff0000; }
}

/* 世界の仕様（グリッド） */
.spec-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
    margin-top: 20px;
}
.spec-item {
    background: rgba(255, 255, 255, 0.05);
    padding: 10px;
    border: 1px solid #444;
    font-size: 0.9rem;
    color: #eee;
}

/* 動画撮影許可の通知 */
.video-notice {
    margin-top: 30px;
    padding: 15px;
    border: 2px dashed #00ff00; /* 許可を表す緑 */
    background: rgba(0, 255, 0, 0.1);
    text-align: center;
}
.video-notice p {
    color: #00ff00;
    margin: 0;
    font-size: 1rem;
    text-shadow: 0 0 5px #00ff00;
}
/* 動画埋め込み枠を最大化 */
.video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 の比率を維持 */
    height: 0;
    width: 100%;           /* 横幅を100%に広げる */
    max-width: 1200px;     /* 最大サイズを大きく設定（お好みで調整） */
    margin: 0 auto 25px;    /* 中央寄せ、下の余白を調整 */
    border: 4px solid #fff;
    box-shadow: inset 0 0 0 2px #000;
    background: #000;
}

/* iframe自体が枠いっぱいに広がるように設定 */
.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* --- ワールド・都市紹介のサイズアップ --- */

/* 小さめのワールドカード（メイン、自然など） */
.world-card .dq-slider {
    height: 300px !important; /* 縦幅を大きく */
}

/* 巨大都市（ロボ市、夕凪市）のスライダー */
.city-slider {
    height: 500px !important; /* 縦幅を500pxまで拡大 */
}

/* 公式販売の家 */
.koushiki-box .dq-slider {
    height: 450px !important;
}

/* スライダー内の画像を枠いっぱいに表示 */
.slider-track img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 縦横比を保ちつつ枠を埋める */
}

/* ヒントテキストの位置調整 */
.slider-hint {
    bottom: 15px;
    background: rgba(0, 0, 0, 0.6);
}