/* ==========================================
   1. ベーススタイル
   ========================================== */
body {
    background-color: white;
    background-image: url(./image/sora02.png);
    background-repeat: no-repeat;
    background-position: top center;
    color: white;
    font-size: 12px;
    letter-spacing: 2px;
    margin: 0;
    padding-top: 80px;
    overflow-x: hidden;  /* auto → hidden に変更 */
    overflow-y: auto;
}

/* ヘッダー全体のテキストカラー設定 (ご要望の #b0c4de) */
header { padding: 1px 0 1px 0; }
header h1 {
    color: #40e0d0;
    margin-bottom: 5px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
header p {
    color: #40e0d0;
    font-weight: bold;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

/* リンク */
a:link, a:visited, a:active { color: white; text-decoration: none; }
a:hover { position: relative; top: 1pt; left: 1pt; cursor: pointer; }

.drop2 { text-shadow: 0.1em 0.1em 3px #0000aa; line-height: 1.5 !important; }

/* ==========================================
   2. ナビゲーションバー
   ========================================== */
.top-nav {
    position: fixed;
    top: 0; left: 0; width: 100%;
    background-color: #00008b;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.top-nav ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; }
.top-nav a { display: block; padding: 15px 20px; font-size: 14px; font-weight: bold; }
.top-nav a:hover { background-color: #555; }

/* モバイル対応 */
@media (max-width: 600px) { .top-nav a { padding: 15px 10px; font-size: 12px; } }

/* ==========================================
   3. レトロウィンドウ (9スライス)
   ========================================== */
.retro-window {
    border-collapse: collapse;
    border-spacing: 0;
    background: transparent !important;
    filter: drop-shadow(4px 4px 0px rgba(0, 0, 0, 0.8));
    line-height: 0;
}
.retro-window td { padding: 0; margin: 0; line-height: 0; background: transparent; }

/* 枠線画像 */
.t-line { background: #0000a0 url(./image/tc.png) repeat-x !important; height: 4px; }
.l-line { background: #0000a0 url(./image/ml.png) repeat-y !important; width: 3px; }
.r-line { background: #00008b url(./image/mr.png) repeat-y !important; width: 6px; }
.b-line { background: #00008b url(./image/tc.png) repeat-x !important; height: 7px; }
.corner-img { display: block; }

/* コンテンツエリア */
.content-area {
    background: linear-gradient(to bottom, #8080ff 0%, #0000a0 100%) !important;
    padding: 18px 20px !important;
    font-size: 12px;
    color: white;
    vertical-align: middle;
    text-align: center;
    line-height: 1.5 !important;
    white-space: normal !important;
}

/* 更新履歴ウィンドウ：上下レイアウトの設定 */
.memo-container {
    display: block !important;    /* 横並びを解除して縦並びにする */
    text-align: left !important;
    padding: 15px 20px !important;
}

.memo-label {
    display: block;               /* 一行を占有 */
    margin-bottom: 10px;          /* 下のボックスとの隙間 */
    font-weight: bold;
    color: #fff;
    line-height: 1.6 !important;
    border-bottom: 1px dotted rgba(255, 255, 255, 0.3); /* 見出しっぽく下線を入れる */
    padding-bottom: 5px;
}

#memo .scrollbox {
    width: 750px;                  /* 横幅いっぱい */
    height: 250px;
    overflow-y: scroll;
    background: transparent;
    line-height: 1.6;
}

.container {
    text-align: center;
}

/* ==========================================
   4. 絶対配置 (重なりを修正)
   ========================================== */
#game-canvas { position: relative; width: 1024px; height: 800px; margin: 0 auto; }

/* 1段目 */
#vlb     { position: absolute; left: 10px;  top: 10px;  width: 300px; }
#aq      { position: absolute; left: 320px; top: 10px;  width: 320px; }
#dgo     { position: absolute; left: 650px;  top: 10px; width: 200px; }

/* 2段目 */
#kiyaku  { position: absolute; left: 10px;  top: 120px; width: 180px; }
#twitter { position: absolute; left: 200px; top: 120px; width: 100px; }
#youtube { position: absolute; left: 315px; top: 120px; width: 100px; }
#niconico { position: absolute; left: 430px; top: 120px; width: 100px; }
#link    { position: absolute; left: 540px; top: 120px; width: 100px; }
#affi    { position: absolute; left: 650px; top: 120px; width: 300px; }

/* 下段 */
#memo    { position: absolute; left: 10px;  top: 230px; width: 640px; }
#fifth   { position: absolute; left: 10px;  top: 570px; width: 480px; }

/* ==========================================
   5. スマホ（画面幅768px以下）用の表示設定
   (一番最後に書くことで、上の全設定を上書きする)
   ========================================== */
@media screen and (max-width: 768px) {
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
    }

    .container {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden;
    }

    #game-canvas {
        width: 100% !important;
        max-width: 100vw !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        padding-top: 20px;
        margin: 0 auto !important;
        position: relative !important;
        box-sizing: border-box;
    }

    /* 各ウィンドウの絶対配置を解除 */
    #vlb, #aq, #dgo, #kiyaku, #twitter, #youtube,
    #niconico, #link, #affi, #memo, #fifth {
        position: static !important;
        width: 90% !important;
        max-width: 90% !important;
        margin: 10px auto !important;
        left: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        box-sizing: border-box;
    }

    /* テーブルを画面に収める（重要：table-layoutをautoに） */
    .retro-window {
        width: 100% !important;
        max-width: 100% !important;
        table-layout: auto !important;
    }

    /* 角の画像セルは固定幅に */
    .retro-window td:first-child,
    .retro-window td:last-child {
        width: auto;
    }

    /* コンテンツエリアを残り幅いっぱいに広げる */
    .retro-window .content-area {
        width: 100% !important;
        word-break: break-all;
        white-space: normal !important;
        padding: 18px 15px !important;
    }

    /* Twitter/YouTube/ニコニコのアイコンサイズ調整 */
    #twitter .content-area img,
    #youtube .content-area img,
    #niconico .content-area img {
        max-width: 80px;
        height: auto;
    }

    /* 更新履歴のスクロールボックス */
    #memo .scrollbox {
        width: 100% !important;
        height: 300px !important;
        box-sizing: border-box;
        word-break: break-all;
    }
    .sns-row {
        width: 90% !important;
        display: flex !important;
        justify-content: space-between !important;
        gap: 10px;
        margin: 10px auto !important;
    }

    .sns-row #twitter,
    .sns-row #youtube,
    .sns-row #niconico {
        width: 32% !important;
        margin: 0 !important;
    }

    .sns-row .content-area img {
        max-width: 50px;
        height: auto;
    }
}