/* 
最終更新：2024/05/24
使用イベント：normal
備考：Modern Game Theme
*/

/* --共通タグ-- */
body {
    background: linear-gradient(135deg, #f6f8fb 0%, #e1eec3 100%); /* 爽やかなグラデーション */
    color: #444;
    font-family: "M PLUS Rounded 1c", "Helvetica Neue", Arial, sans-serif; /* 丸ゴシック適用 */
    font-weight: 400;
}

h1, h2, h3, h4, h5, h6 { margin: 0 0 15px 0; }

h1 {
    color: #2c3e50;
    text-shadow: 2px 2px 0px rgba(255,255,255,0.8);
    font-weight: 800;
    letter-spacing: 0.05em;
}

h2 {
    background: transparent;
    border-left: none;
    border-bottom: 3px solid #a8d8ea;
    padding: 10px 0;
    color: #2c3e50;
    font-weight: 700;
    border-radius: 0;
}

a { color: #2980b9; transition: all 0.2s; }
a:hover { color: #3498db; text-decoration: none; transform: scale(1.05); display: inline-block; }

/* --レイアウト-- */
#base {
    max-width: 1200px;
    padding: 20px;
}

/* カードデザイン (Glassmorphism風) */
#leftbox, #rightbox, #owner_comment, .ranking-section, .log,
.development-column, .info-section, .lbbs-input-section, #form_LbbsMessage1, #map .map-scroll-container, .comment-update-section {
    background: rgba(255, 255, 255, 0.85);
    border-top: none;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.07);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    margin-bottom: 24px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#leftbox:hover, #rightbox:hover, .ranking-section:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(31, 38, 135, 0.12);
}

/* --ヘッダ--*/
#header li a {
    background: #fff;
    color: #555;
    border: 2px solid #eee;
    border-radius: 20px; /* 丸みのあるボタン */
    padding: 6px 16px;
    font-weight: 700;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
#header li a:hover {
    background: #3498db;
    color: #fff;
    border-color: #3498db;
    box-shadow: 0 6px 12px rgba(52, 152, 219, 0.3);
}
#header li .login-info {
    background: #2c3e50;
    color: #fff;
    border-radius: 20px;
    border: none;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* --メイン テーブル-- */
#main table {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.05);
}
#main table th {
    background-color: #3498db;
    color: #fff;
    font-weight: 700;
    border: none;
}
#main table td {
    border-bottom: 1px solid #f0f0f0;
}
#main table tbody tr:last-child td { border-bottom: none; }
#main table tbody tr:hover td { background-color: #f4faff; }
#main table td.thbg {
    background-color: #eaf2f8;
    color: #7f8c8d;
    font-weight: bold;
}

/* --フォーム要素-- */
.text, textarea, .dropdown {
    border: 2px solid #dfe6e9;
    border-radius: 8px;
    padding: 8px;
    background: #fdfdfd;
    transition: border-color 0.3s;
}
.text:focus, textarea:focus, .dropdown:focus {
    border-color: #3498db;
    outline: none;
    background: #fff;
}

.submit {
    background: linear-gradient(to bottom, #2ecc71, #27ae60);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-weight: 800;
    box-shadow: 0 4px 0 #219150;
    transition: all 0.1s;
    cursor: pointer;
}
.submit:hover {
    background: linear-gradient(to bottom, #40d47e, #2ecc71);
    transform: translateY(-2px);
    box-shadow: 0 6px 0 #219150;
}
.submit:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #219150;
}

/* --マップ-- */
#map .map-scroll-container {
    background: #34495e;
    padding: 15px;
    border: 4px solid #2c3e50;
    border-radius: 12px;
}

/* --ログ-- */
.log {
    font-family: "Consolas", monospace;
    background: #fff;
    border-left: 5px solid #bdc3c7;
    padding: 15px;
    line-height: 1.6;
}
.turn { color: #e74c3c; background: #fadbd8; padding: 2px 6px; border-radius: 4px; font-size: 0.9em; }
.island { color: #2980b9; font-weight: bold; }
.command { color: #d35400; background: #fdebd0; padding: 2px 4px; border-radius: 4px; }

/* --History Tabs-- */
.history-tab-btn {
    border: none;
    background: #ecf0f1;
    color: #7f8c8d;
    border-radius: 20px;
    padding: 8px 16px;
    transition: all 0.3s;
}
.history-tab-btn:hover {
    background: #dfe6e9;
}
.history-tab-btn.active {
    background: #3498db;
    color: #fff;
    box-shadow: 0 4px 10px rgba(52, 152, 219, 0.4);
}

/* --フッタ-- */
#footer {
    border-top: 1px solid rgba(0,0,0,0.05);
    margin-top: 40px;
    padding-top: 20px;
}
#footer li a {
    color: #95a5a6;
    border-color: #ecf0f1;
    background: transparent;
    box-shadow: none;
}
#footer li a:hover {
    background: #ecf0f1;
    color: #7f8c8d;
    border-color: #bdc3c7;
}

/* --Plan Status-- */
#plan.sent .log {
    background-color: #e8f5e9;
    border-left-color: #2ecc71;
}
#plan.unsent .log {
    background-color: #ffebee;
    border-left-color: #e74c3c;
}

/* --Plan List Compact-- */
#form_commandMessage {
    height: 100%;
    display: flex;
    flex-direction: column;
}
#plan {
    display: flex;
    flex-direction: column;
}
#LINKMSG1 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

/* --Responsive-- */
@media screen and (max-width: 600px) {
    #main table {
        display: block;
        overflow: auto;
        white-space: nowrap;
    }
}

/* --LBBS & Comment Form Modernization-- */
.lbbs-input-section, .comment-update-section {
    padding: 20px;
}

.lbbs-form-wrapper, .comment-form-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.lbbs-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
}

.control-item {
    flex: 0 1 auto;
}

.island-select .dropdown { min-width: 150px; }
.password-input .text { width: 150px; }

.radio-group {
    display: flex;
    gap: 10px;
    background: #f0f2f5;
    padding: 5px 10px;
    border-radius: 20px;
}
.radio-label { cursor: pointer; font-size: 0.9em; }

.lbbs-message-area, .comment-input-wrapper {
    display: flex;
    gap: 10px;
    align-items: center;
}

.input-with-counter, .comment-input-wrapper {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.message-input, .comment-input-wrapper .text {
    width: 100%;
    padding-right: 40px; /* Counter space */
}

.counter, .char-counter {
    position: absolute;
    right: 10px;
    font-size: 0.8em;
    color: #999;
}

.send-btn, .comment-actions .submit {
    flex: 0 0 auto;
    margin: 0;
}

.lbbs-delete-area {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #ddd;
    font-size: 0.9em;
}

.comment-actions {
    display: flex;
    gap: 10px;
}

.twitter-btn {
    background: linear-gradient(to bottom, #1da1f2, #0d8bd9);
    box-shadow: 0 4px 0 #0c7abf;
}
.twitter-btn:hover {
    background: linear-gradient(to bottom, #40b7f5, #1da1f2);
    box-shadow: 0 6px 0 #0c7abf;
}

.delete-btn {
    background: linear-gradient(to bottom, #e74c3c, #c0392b);
    box-shadow: 0 4px 0 #a93226;
    padding: 6px 12px;
    font-size: 0.9em;
}
.delete-btn:hover {
    background: linear-gradient(to bottom, #ec7063, #e74c3c);
    box-shadow: 0 6px 0 #a93226;
}

.lbbs-cost-info {
    margin-bottom: 10px;
    font-size: 0.85em;
}
.badge {
    background: #eee;
    padding: 2px 6px;
    border-radius: 4px;
    color: #555;
}