@charset "UTF-8";
/* =============================================================
   GG-DARTS 共通スタイル
   GG-SITE のレイアウト構造を踏襲しつつ、アクセントカラーを
   ダーツボード由来のレッド系に変更しています。
   ============================================================= */

:root {
    --accent:        #c92a2a;   /* GG-DARTS のテーマカラー */
    --accent-dark:   #a51111;
    --accent-soft:   #fff0f0;
    --phoenix:       #e8590c;
    --phoenix-soft:  #fff4ec;
    --dartslive:     #1c7ed6;
    --dartslive-soft:#eef6fd;

    --bg:        #f0f2f5;
    --card:      #ffffff;
    --text:      #212529;
    --text-sub:  #6c757d;
    --border:    #e9ecef;

    --radius:    12px;
    --shadow:    0 2px 8px rgba(0, 0, 0, .06);
    --shadow-lg: 0 4px 20px rgba(0, 0, 0, .12);
    --maxw:      680px;
}

* { box-sizing: border-box; }

body {
    font-family: "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    margin: 0;
    padding: 0;
    line-height: 1.7;
    -webkit-text-size-adjust: 100%;
}

a { color: var(--accent); }

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
    line-height: 1;
}

/* ---------------- ヘッダー ---------------- */
.global-header {
    background: #fff;
    padding: 10px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .08);
    position: sticky;
    top: 0;
    z-index: 100;
}

.gg-logo-parent { text-decoration: none; display: flex; align-items: center; height: 40px; }
.icon-box       { transform-origin: 20px 20px; transition: transform .6s cubic-bezier(.34, 1.56, .64, 1); }
.logo-text      { transition: fill .3s ease, transform .3s ease; }
.underline-rect { transition: width .5s ease-in-out; }
.gg-logo-parent:hover .icon-box       { transform: rotate(360deg); }
.gg-logo-parent:hover .logo-text      { fill: var(--accent); transform: translateX(2px); }
.gg-logo-parent:hover .underline-rect { width: 110px; }

.nav-right { display: flex; align-items: center; gap: 14px; }

.icon-btn {
    text-decoration: none;
    color: #555;
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 700;
    font-size: 14px;
    transition: color .2s;
}
.icon-btn:hover { color: var(--accent); }

.btn-login {
    background: var(--accent);
    color: #fff !important;
    padding: 7px 14px;
    border-radius: 20px;
    font-size: 13px;
}
.btn-login:hover { background: var(--accent-dark); color: #fff !important; }

/* ---------------- レイアウト ---------------- */
.container { max-width: var(--maxw); margin: 0 auto; padding: 16px 12px 60px; }

.card {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 14px;
    overflow: hidden;
}
.card-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 14px 16px 0;
    font-weight: 700;
    font-size: 15px;
}
.card-head .material-symbols-outlined { color: var(--accent); }
.card-body { padding: 14px 16px; }

.section-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 700;
    margin: 22px 4px 10px;
    color: #343a40;
}
.section-title .material-symbols-outlined { color: var(--accent); }

/* ---------------- ブランド切替タブ ---------------- */
.brand-tabs {
    display: flex;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    margin-bottom: 14px;
    position: sticky;
    top: 60px;
    z-index: 50;
}
.brand-tab {
    flex: 1;
    text-align: center;
    padding: 13px 4px 11px;
    text-decoration: none;
    color: var(--text-sub);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .02em;
    border-bottom: 3px solid transparent;
    transition: background .2s, color .2s;
}
.brand-tab small { display: block; font-size: 10px; font-weight: 500; opacity: .8; letter-spacing: 0; }
.brand-tab:hover { background: #f8f9fa; }

.brand-tab.is-active[data-brand="all"]       { color: var(--accent);    border-bottom-color: var(--accent);    background: var(--accent-soft); }
.brand-tab.is-active[data-brand="phoenix"]   { color: var(--phoenix);   border-bottom-color: var(--phoenix);   background: var(--phoenix-soft); }
.brand-tab.is-active[data-brand="dartslive"] { color: var(--dartslive); border-bottom-color: var(--dartslive); background: var(--dartslive-soft); }

/* ---------------- ジャンル絞り込み ---------------- */
.genre-bar {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 0 2px 10px;
    scrollbar-width: none;
}
.genre-bar::-webkit-scrollbar { display: none; }
.genre-chip {
    flex: 0 0 auto;
    padding: 6px 14px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 13px;
    color: var(--text-sub);
    text-decoration: none;
    white-space: nowrap;
}
.genre-chip.is-active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }

/* ---------------- 投稿フォーム ---------------- */
.composer textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px;
    font-size: 15px;
    font-family: inherit;
    resize: vertical;
    min-height: 86px;
}
.composer textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }

.composer-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}
.composer select {
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13px;
    background: #fff;
    font-family: inherit;
}
.composer .counter { margin-left: auto; font-size: 12px; color: var(--text-sub); }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--accent);
    color: #fff;
    border: none;
    padding: 9px 20px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: background .2s, opacity .2s;
}
.btn:hover    { background: var(--accent-dark); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-ghost    { background: #fff; color: var(--accent); border: 1px solid var(--accent); }
.btn-ghost:hover { background: var(--accent-soft); }
.btn-block    { width: 100%; }

.login-prompt {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 18px 16px;
    text-align: center;
    font-size: 14px;
    color: var(--text-sub);
    margin-bottom: 14px;
}
.login-prompt a { font-weight: 700; }

/* ---------------- 投稿カード ---------------- */
.post {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 14px 16px;
    margin-bottom: 10px;
    transition: box-shadow .2s;
}
.post:hover { box-shadow: var(--shadow-lg); }

.post-head { display: flex; align-items: center; gap: 10px; }

.avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    object-fit: cover;
    background: linear-gradient(135deg, var(--accent), #ff8787);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 16px;
    flex: 0 0 auto;
    text-decoration: none;
}

.post-meta { min-width: 0; flex: 1; }
.post-name { font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.post-name a { color: var(--text); text-decoration: none; }
.post-name a:hover { text-decoration: underline; }
.post-handle { color: var(--text-sub); font-weight: 400; font-size: 12px; }
.post-time   { color: var(--text-sub); font-size: 12px; }

.rank-badge {
    font-size: 10px;
    background: #f1f3f5;
    color: #868e96;
    padding: 1px 7px;
    border-radius: 999px;
    font-weight: 700;
}

.badge {
    font-size: 11px;
    padding: 2px 9px;
    border-radius: 999px;
    font-weight: 700;
    white-space: nowrap;
}
.badge-phoenix   { background: var(--phoenix-soft);   color: var(--phoenix); }
.badge-dartslive { background: var(--dartslive-soft); color: var(--dartslive); }
.badge-common    { background: #f1f3f5;               color: #495057; }
.badge-genre     { background: var(--accent-soft);    color: var(--accent); }

.post-tags { display: flex; gap: 6px; margin: 10px 0 6px; flex-wrap: wrap; }

.post-body {
    font-size: 15px;
    white-space: normal;
    word-break: break-word;
    margin: 6px 0 0;
}
.post-body a { word-break: break-all; }

.post-image { margin-top: 10px; }
.post-image img { width: 100%; border-radius: 10px; display: block; }

.post-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}
.action-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    padding: 0;
    color: var(--text-sub);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: color .2s;
}
.action-btn:hover        { color: var(--accent); }
.action-btn.is-liked     { color: var(--accent); }
.action-btn.is-liked .material-symbols-outlined { font-variation-settings: 'FILL' 1; }
.action-btn.report       { margin-left: auto; font-size: 12px; }

/* ---------------- アワード ---------------- */
.award-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.award-cell {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 8px;
    text-align: center;
}
.award-cell .num   { font-size: 22px; font-weight: 800; color: var(--accent); line-height: 1.2; }
.award-cell .label { font-size: 11px; color: var(--text-sub); }

/* ---------------- 認証ページ ---------------- */
.auth-wrap { max-width: 420px; margin: 40px auto; padding: 0 16px 60px; }
.auth-card { background: #fff; border-radius: 16px; box-shadow: var(--shadow-lg); padding: 28px 24px; }
.auth-card h1 { font-size: 20px; margin: 0 0 4px; text-align: center; }
.auth-lead { text-align: center; font-size: 13px; color: var(--text-sub); margin: 0 0 22px; }

.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.field input,
.field textarea,
.field select {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid #dee2e6;
    border-radius: 9px;
    font-size: 15px;
    font-family: inherit;
    background: #fff;
}
.field input:focus, .field textarea:focus, .field select:focus {
    outline: 2px solid var(--accent);
    outline-offset: -1px;
    border-color: transparent;
}
.field .hint { font-size: 11px; color: var(--text-sub); margin-top: 4px; }
.field .prefix-input { display: flex; align-items: center; }
.field .prefix-input span {
    padding: 11px 4px 11px 12px;
    border: 1px solid #dee2e6;
    border-right: none;
    border-radius: 9px 0 0 9px;
    background: #f8f9fa;
    color: var(--text-sub);
    font-size: 15px;
}
.field .prefix-input input { border-radius: 0 9px 9px 0; }

.auth-foot { text-align: center; font-size: 13px; margin-top: 18px; color: var(--text-sub); }

.sibling-note {
    background: var(--accent-soft);
    border: 1px solid #ffd8d8;
    border-radius: 10px;
    padding: 11px 13px;
    font-size: 12.5px;
    color: #862e2e;
    margin-bottom: 20px;
    line-height: 1.6;
}

/* ---------------- お知らせ ---------------- */
.news-list { list-style: none; margin: 0; padding: 0; }
.news-list li { display: flex; gap: 10px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.news-list li:last-child { border-bottom: none; }
.news-date { color: var(--text-sub); font-size: 12px; flex: 0 0 auto; }
.news-cat  { font-size: 10px; background: #f1f3f5; color: #868e96; padding: 1px 7px; border-radius: 4px; flex: 0 0 auto; }

/* ---------------- メッセージ ---------------- */
.alert { border-radius: 9px; padding: 11px 14px; font-size: 13.5px; margin-bottom: 14px; }
.alert-error   { background: #fff5f5; color: #c92a2a; border: 1px solid #ffc9c9; }
.alert-success { background: #ebfbee; color: #2b8a3e; border: 1px solid #b2f2bb; }
.alert-info    { background: #e7f5ff; color: #1864ab; border: 1px solid #a5d8ff; }

.empty-state { text-align: center; padding: 48px 16px; color: var(--text-sub); font-size: 14px; }
.empty-state .material-symbols-outlined { font-size: 44px; display: block; margin-bottom: 10px; opacity: .4; }

/* ---------------- ページネーション ---------------- */
.pager { display: flex; justify-content: center; gap: 10px; margin-top: 20px; }
.pager a, .pager span {
    padding: 8px 16px;
    border-radius: 999px;
    background: #fff;
    box-shadow: var(--shadow);
    text-decoration: none;
    font-size: 13px;
    color: var(--accent);
    font-weight: 700;
}
.pager span { color: #ced4da; }

/* ---------------- フッター ---------------- */
.global-footer {
    text-align: center;
    padding: 26px 16px 40px;
    font-size: 12px;
    color: var(--text-sub);
}
.global-footer a { color: var(--text-sub); text-decoration: none; margin: 0 6px; }
.global-footer a:hover { text-decoration: underline; }
.footer-sibling { margin-top: 10px; font-size: 12px; }
.footer-sibling a { color: var(--accent); font-weight: 700; }

/* ---------------- PWA インストールバナー ---------------- */
.install-banner {
    position: fixed;
    bottom: 20px; left: 50%;
    transform: translateX(-50%);
    width: 90%; max-width: 400px;
    background: #fff;
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    padding: 15px;
    display: none;
    z-index: 9999;
    align-items: center;
    gap: 15px;
    border: 1px solid var(--border);
}
.install-banner img { width: 50px; height: 50px; border-radius: 12px; }
.install-info { flex-grow: 1; }
.install-info h4 { margin: 0 0 4px; font-size: 15px; }
.install-info p  { margin: 0; font-size: 12px; color: var(--text-sub); }
.install-btn {
    background: var(--accent); color: #fff; border: none;
    padding: 8px 15px; border-radius: 20px; font-weight: 700; cursor: pointer;
}
.close-install {
    position: absolute; top: -10px; right: -10px;
    background: #555; color: #fff;
    width: 24px; height: 24px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 14px;
}

/* ---------------- レスポンシブ ---------------- */
@media (max-width: 480px) {
    .container   { padding: 12px 10px 60px; }
    .brand-tab   { font-size: 13px; padding: 11px 2px 9px; }
    .post        { border-radius: 10px; }
    .post-actions{ gap: 14px; }
}