/* 文系ラボ 二択バトル v2.0 - Frontend CSS */
.bb-wrap*,.bb-archive-wrap*,.bb-ranking-wrap*{box-sizing:border-box;margin:0;padding:0}

/* ── ラッパー ── */
.bb-wrap{max-width:680px;margin:0 auto 2rem;background:var(--bb-bg,#F8F9FA);border-radius:20px;overflow:hidden;box-shadow:0 4px 24px rgba(0,0,0,.10);font-family:'Helvetica Neue',Arial,'Hiragino Kaku Gothic ProN','Hiragino Sans',Meiryo,sans-serif}

/* ── 先週バナー ── */
.bb-last-week-banner{background:#fff;border-bottom:1px solid #f0f0f0;padding:14px 20px}
.bb-lw-label{font-size:.72rem;font-weight:700;color:#aaa;letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px}
.bb-lw-title{font-size:.88rem;font-weight:700;color:#333;margin-bottom:8px}
.bb-lw-bar{height:18px;border-radius:9px;overflow:hidden;display:flex;background:#eee;margin-bottom:6px}
.bb-lw-bar-a,.bb-lw-bar-b{height:100%;display:flex;align-items:center;justify-content:center;font-size:.68rem;font-weight:700;color:rgba(255,255,255,.9)}
.bb-lw-note{font-size:.82rem;color:#666;background:#f9f9f9;border-radius:8px;padding:8px 12px;border-left:3px solid #ddd}

/* ── ヘッダー ── */
.bb-header{background:linear-gradient(135deg,var(--bb-color-a,#FF6B6B),var(--bb-color-b,#4ECDC4));padding:24px 20px 20px;text-align:center}
.bb-eyecatch{display:inline-block;background:rgba(255,255,255,.25);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.12em;padding:3px 14px;border-radius:20px;margin-bottom:8px}
.bb-title{color:#fff;font-size:1.2rem;font-weight:800;line-height:1.4;text-shadow:0 1px 4px rgba(0,0,0,.15);margin-bottom:6px}
.bb-countdown{color:rgba(255,255,255,.9);font-size:.82rem;font-weight:600;margin-bottom:4px}
.bb-count-days{font-size:1.3rem;font-weight:900}
.bb-total-count{color:rgba(255,255,255,.8);font-size:.78rem}
.bb-total-num{font-weight:700;color:#fff;font-size:.95rem}
.bb-ending-badge,.bb-ended-badge{display:inline-block;color:#fff;font-size:.72rem;font-weight:700;padding:3px 12px;border-radius:20px;margin-bottom:6px}
.bb-ending-badge{background:#FF4444;animation:bb-pulse 1.4s ease-in-out infinite}
.bb-ended-badge{background:#888}
@keyframes bb-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.04)}}

/* ── 投票エリア ── */
.bb-vote-area{padding:16px 20px 24px}
.bb-grade-select-wrap{text-align:center;margin-bottom:12px}
.bb-grade-label{font-size:.78rem;color:#888;font-weight:600;margin-bottom:8px}
.bb-grade-buttons{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.bb-grade-btn{background:#f0f0f0;border:2px solid #ddd;border-radius:20px;padding:4px 13px;font-size:.8rem;font-weight:700;cursor:pointer;transition:all .2s;color:#555;outline:none}
.bb-grade-btn:hover{border-color:var(--bb-color-a,#FF6B6B);color:var(--bb-color-a,#FF6B6B);background:#fff}
.bb-grade-btn.selected{background:var(--bb-color-a,#FF6B6B);border-color:var(--bb-color-a,#FF6B6B);color:#fff}
.bb-grade-error{color:#E53E3E;font-size:.76rem;font-weight:600;margin-top:5px;display:none}
.bb-grade-error.show{display:block}
.bb-choices{display:flex;align-items:stretch;gap:10px;margin-top:12px}
.bb-btn{flex:1;border:none;border-radius:14px;padding:16px 10px;font-size:.92rem;font-weight:800;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;transition:transform .18s,box-shadow .18s;outline:none;min-height:90px}
.bb-btn-a{background:var(--bb-color-a,#FF6B6B);color:#fff;box-shadow:0 4px 14px rgba(255,107,107,.35)}
.bb-btn-b{background:var(--bb-color-b,#4ECDC4);color:#fff;box-shadow:0 4px 14px rgba(78,205,196,.35)}
.bb-btn:hover{transform:translateY(-3px) scale(1.03)}
.bb-btn:active{transform:scale(.97)}
.bb-btn-label{line-height:1.3;font-size:.95rem}
.bb-btn-icon{font-size:1.3rem}
.bb-vs{font-size:1.3rem;font-weight:900;color:#ccc;flex-shrink:0;align-self:center}
.bb-future-msg,.bb-vote-first-msg,.bb-ended-comment-msg{text-align:center;font-size:.84rem;color:#999;padding:14px;background:#f9f9f9;border-radius:10px;margin:12px 20px}
.bb-ended-comment-msg a{color:var(--bb-color-a,#FF6B6B)}

/* ── 表示切り替え ── */
.bb-hidden{display:none!important}

/* ── 結果エリア ── */
.bb-result-area{padding:16px 20px}
.bb-voted-msg{text-align:center;font-size:.85rem;font-weight:700;color:#38A169;background:#F0FFF4;border:2px solid #9AE6B4;border-radius:10px;padding:10px;margin-bottom:14px}

/* ── CSSドーナツグラフ ── */
.bb-chart-area{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:18px}
.bb-donut-wrap{position:relative;width:150px;height:150px;flex-shrink:0}
.bb-donut{width:150px;height:150px;border-radius:50%;transition:background .6s ease;-webkit-mask:radial-gradient(farthest-side,transparent 55%,#000 56%);mask:radial-gradient(farthest-side,transparent 55%,#000 56%)}
.bb-donut-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none}
.bb-donut-pct{display:block;font-size:1.5rem;font-weight:900;color:#333;line-height:1.1}
.bb-donut-sub{display:block;font-size:.65rem;color:#999;font-weight:600;max-width:60px;text-align:center;word-break:break-all}
.bb-chart-legend{width:100%}
.bb-legend-item{display:flex;align-items:center;gap:8px;margin-bottom:8px;padding:8px 12px;background:#fff;border-radius:10px;box-shadow:0 1px 4px rgba(0,0,0,.05)}
.bb-legend-dot{width:13px;height:13px;border-radius:50%;flex-shrink:0}
.bb-legend-label{font-size:.86rem;font-weight:700;flex:1;color:#333}
.bb-legend-pct{font-size:1.3rem;font-weight:900;color:#333;min-width:48px;text-align:right}
.bb-legend-cnt{font-size:.75rem;color:#999;white-space:nowrap}

/* ── 学年別 ── */
.bb-grade-breakdown{margin-top:8px}
.bb-breakdown-title{font-size:.84rem;font-weight:700;color:#666;margin-bottom:8px}
.bb-grade-row{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.bb-grade-name{font-size:.78rem;font-weight:700;color:#666;width:26px;flex-shrink:0}
.bb-grade-bar-wrap{flex:1;height:20px;background:#eee;border-radius:10px;overflow:hidden;display:flex}
.bb-grade-bar-a,.bb-grade-bar-b{height:100%;display:flex;align-items:center;justify-content:center;font-size:.68rem;font-weight:700;color:rgba(255,255,255,.9);transition:width .5s ease}
.bb-grade-total{font-size:.72rem;color:#aaa;width:32px;text-align:right;flex-shrink:0}

/* ── コメントセクション ── */
.bb-comment-section{border-top:1px solid #eee;padding:16px 20px}
.bb-comment-form-title{font-size:.92rem;font-weight:800;color:#333;margin-bottom:8px}
.bb-comment-input{width:100%;border:2px solid #ddd;border-radius:12px;padding:10px 12px;font-size:.88rem;resize:vertical;font-family:inherit;transition:border-color .2s;outline:none;color:#333;background:#fff;display:block}
.bb-comment-input:focus{border-color:var(--bb-color-a,#FF6B6B)}
.bb-comment-footer{display:flex;justify-content:space-between;align-items:center;margin-top:7px}
.bb-char-count{font-size:.75rem;color:#aaa}
.bb-submit-btn{background:linear-gradient(135deg,var(--bb-color-a,#FF6B6B),var(--bb-color-b,#4ECDC4));color:#fff;border:none;border-radius:20px;padding:8px 18px;font-size:.85rem;font-weight:700;cursor:pointer;transition:opacity .2s;outline:none}
.bb-submit-btn:hover{opacity:.9}
.bb-submit-btn:disabled{opacity:.5;cursor:not-allowed}
.bb-comment-error{font-size:.78rem;color:#E53E3E;margin-top:5px;display:none}
.bb-commented-done{text-align:center;font-size:.88rem;font-weight:700;color:#6B46C1;background:#FAF5FF;border:2px solid #D6BCFA;border-radius:10px;padding:10px;margin-bottom:10px}
.bb-comment-list-title{font-size:.86rem;font-weight:700;color:#666;margin:14px 0 8px}
.bb-comment-item{background:#fff;border-radius:12px;padding:11px 13px;margin-bottom:7px;border-left:4px solid #ddd;box-shadow:0 1px 4px rgba(0,0,0,.05)}
.bb-comment-a{border-left-color:var(--bb-color-a,#FF6B6B)}
.bb-comment-b{border-left-color:var(--bb-color-b,#4ECDC4)}
.bb-comment-meta{display:flex;gap:6px;align-items:center;margin-bottom:5px}
.bb-comment-grade{font-size:.72rem;font-weight:700;background:#f0f0f0;border-radius:20px;padding:2px 9px;color:#555}
.bb-comment-choice-tag{font-size:.7rem;font-weight:700;border-radius:20px;padding:2px 9px;color:#fff}
.bb-comment-text{font-size:.88rem;color:#333;line-height:1.5;margin-bottom:7px}
.bb-admin-reply{font-size:.8rem;color:#555;background:#FFF9E6;border-radius:8px;padding:7px 10px;margin-bottom:6px;border-left:3px solid #F6C700}
.bb-admin-reply-label{font-weight:700;color:#B7791F;margin-right:6px}
.bb-comment-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bb-like-btn{background:none;border:1px solid #eee;border-radius:20px;padding:3px 10px;font-size:.8rem;cursor:pointer;color:#aaa;outline:none;transition:all .2s}
.bb-like-btn:hover{background:#FFF0F0;border-color:#ffb3b3;color:#E53E3E}
.bb-like-btn.liked{background:#FFF0F0;border-color:#F87171;color:#E53E3E}
.bb-reactions{display:flex;gap:4px;flex-wrap:wrap}
.bb-react-btn{background:#f5f5f5;border:1px solid #eee;border-radius:16px;padding:3px 8px;font-size:.78rem;cursor:pointer;outline:none;transition:all .2s;color:#666;line-height:1.4}
.bb-react-btn:hover{background:#eee}
.bb-react-btn.active{background:#FFF9C4;border-color:#F6C700;color:#B7791F;font-weight:700}
.bb-react-count{font-size:.72rem;font-weight:700;margin-left:2px}
.bb-no-comments{text-align:center;color:#bbb;font-size:.84rem;padding:12px 0}

/* ── マイルストーンオーバーレイ ── */
.bb-milestone-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:99999;display:flex;align-items:center;justify-content:center;cursor:pointer}
.bb-milestone-card{background:#fff;border-radius:20px;padding:36px 32px;text-align:center;box-shadow:0 8px 40px rgba(0,0,0,.2);animation:bb-pop .4s ease}
.bb-milestone-emoji{font-size:3.5rem;margin-bottom:10px}
.bb-milestone-msg{font-size:1.2rem;font-weight:800;color:#333}
@keyframes bb-pop{0%{transform:scale(.5);opacity:0}80%{transform:scale(1.05)}100%{transform:scale(1);opacity:1}}

/* ── アーカイブ ── */
.bb-archive-wrap{max-width:700px;margin:0 auto 2rem}
.bb-archive-title{font-size:1.05rem;font-weight:800;color:#333;margin-bottom:14px}
.bb-archive-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.bb-archive-card{background:#fff;border-radius:14px;padding:14px;box-shadow:0 2px 10px rgba(0,0,0,.07);border-top:4px solid var(--bb-color-a,#FF6B6B)}
.bb-archive-period{font-size:.7rem;color:#bbb;margin-bottom:5px}
.bb-archive-card-title{font-size:.9rem;font-weight:700;color:#333;margin-bottom:9px;line-height:1.4}
.bb-archive-bar{height:18px;border-radius:9px;overflow:hidden;display:flex;background:#eee;margin-bottom:7px}
.bb-archive-bar-a,.bb-archive-bar-b{height:100%;display:flex;align-items:center;justify-content:center;font-size:.68rem;font-weight:700;color:rgba(255,255,255,.9)}
.bb-archive-opts{display:flex;justify-content:space-between;font-size:.76rem;font-weight:700;margin-bottom:3px}
.bb-archive-total{font-size:.72rem;color:#bbb;text-align:right}

/* ── ランキング ── */
.bb-ranking-wrap{max-width:480px;margin:0 auto 2rem}
.bb-ranking-title{font-size:.95rem;font-weight:800;color:#333;margin-bottom:10px}
.bb-ranking-item{display:flex;align-items:center;gap:10px;padding:9px 13px;background:#fff;border-radius:10px;margin-bottom:5px;box-shadow:0 1px 4px rgba(0,0,0,.06)}
.bb-ranking-num{font-size:1.1rem;font-weight:900;color:#ccc;width:22px;flex-shrink:0}
.bb-ranking-item:nth-child(2) .bb-ranking-num{color:#F6C700}
.bb-ranking-item:nth-child(3) .bb-ranking-num{color:#A8A8A8}
.bb-ranking-item:nth-child(4) .bb-ranking-num{color:#C87941}
.bb-ranking-title-text{flex:1;font-size:.88rem;font-weight:700;color:#333}
.bb-ranking-votes{font-size:.8rem;font-weight:700;color:#FF6B6B}
.bb-no-theme{text-align:center;color:#bbb;padding:36px 20px;font-size:.88rem}

/* ── レスポンシブ ── */
@media(max-width:480px){
    .bb-wrap{border-radius:14px}
    .bb-title{font-size:1.05rem}
    .bb-btn{padding:14px 8px;font-size:.86rem}
    .bb-comment-section{padding:13px 14px}
    .bb-result-area{padding:13px 14px}
    .bb-vote-area{padding:13px 14px 20px}
    .bb-grade-btn{padding:4px 10px;font-size:.76rem}
}