/* =====================================================
   アフロの手 クイズ＆ガチャゲーム CSS
   ===================================================== */

/* ----- CSS変数 ----- */
:root {
    --afuro-green:        #4CAF50;
    --afuro-green-dark:   #388E3C;
    --afuro-green-light:  #C8E6C9;
    --afuro-green-pale:   #E8F5E9;
    --afuro-yellow:       #FFC107;
    --afuro-orange:       #FF9800;
    --afuro-red:          #F44336;
    --afuro-blue:         #2196F3;
    --afuro-purple:       #9C27B0;
    --afuro-gold:         #FFD700;
    --afuro-white:        #FFFFFF;
    --afuro-gray-light:   #F5F5F5;
    --afuro-gray:         #9E9E9E;
    --afuro-text:         #333333;
    --afuro-radius:       12px;
    --afuro-shadow:       0 4px 16px rgba(0,0,0,0.1);
    --afuro-shadow-hover: 0 8px 24px rgba(0,0,0,0.15);
    --afuro-font:         'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
}

/* ----- 共通リセット ----- */
.afuro-quiz-wrapper,
.afuro-gacha-wrapper,
.afuro-dressup-wrapper {
    font-family:    var(--afuro-font);
    color:          var(--afuro-text);
    max-width:      900px;
    margin:         0 auto;
    padding:        16px;
    box-sizing:     border-box;
}

.afuro-quiz-wrapper *,
.afuro-gacha-wrapper *,
.afuro-dressup-wrapper * {
    box-sizing: border-box;
}

/* ----- ログインプロンプト ----- */
.afuro-login-prompt {
    text-align:       center;
    padding:          60px 20px;
    background:       var(--afuro-green-pale);
    border-radius:    var(--afuro-radius);
    border:           2px dashed var(--afuro-green);
}

.afuro-login-icon {
    font-size:    60px;
    margin-bottom: 16px;
}

.afuro-login-prompt h2 {
    color:         var(--afuro-green-dark);
    margin-bottom: 12px;
}

.afuro-login-prompt p {
    color:         #555;
    margin-bottom: 24px;
}

/* ----- 共通ボタン ----- */
.afuro-btn {
    display:         inline-block;
    padding:         12px 24px;
    border-radius:   50px;
    border:          none;
    cursor:          pointer;
    font-size:       15px;
    font-weight:     bold;
    text-decoration: none;
    transition:      all 0.2s ease;
    text-align:      center;
}

.afuro-btn:hover {
    transform:   translateY(-2px);
    box-shadow:  var(--afuro-shadow-hover);
}

.afuro-btn:active {
    transform: translateY(0);
}

.afuro-btn:disabled {
    opacity:       0.5;
    cursor:        not-allowed;
    transform:     none;
    box-shadow:    none;
}

.afuro-btn-primary {
    background:  var(--afuro-green);
    color:       var(--afuro-white);
    box-shadow:  0 4px 12px rgba(76, 175, 80, 0.3);
}

.afuro-btn-primary:hover:not(:disabled) {
    background: var(--afuro-green-dark);
}

.afuro-btn-secondary {
    background: var(--afuro-white);
    color:      var(--afuro-green-dark);
    border:     2px solid var(--afuro-green);
}

.afuro-btn-secondary:hover:not(:disabled) {
    background: var(--afuro-green-pale);
}

.afuro-btn-large {
    padding:   16px 36px;
    font-size: 18px;
}

.afuro-btn-gacha {
    background:   linear-gradient(135deg, #FF6B6B, #FF8E53);
    color:        white;
    font-size:    18px;
    padding:      16px 40px;
    box-shadow:   0 6px 20px rgba(255, 107, 107, 0.35);
    border-radius: 50px;
    border:       none;
    cursor:       pointer;
    font-weight:  bold;
    transition:   all 0.2s ease;
    display:      inline-block;
    text-align:   center;
}

.afuro-btn-gacha:hover:not(:disabled) {
    background: linear-gradient(135deg, #FF5252, #FF7043);
    transform:  translateY(-2px);
    box-shadow: 0 10px 28px rgba(255, 107, 107, 0.45);
}

.afuro-btn-gacha:disabled {
    background: #ccc;
    color:      #999;
    cursor:     not-allowed;
    transform:  none;
    box-shadow: none;
}

/* ----- チケット表示 ----- */
.afuro-ticket-display {
    background:    linear-gradient(135deg, var(--afuro-yellow), var(--afuro-orange));
    color:         white;
    padding:       8px 20px;
    border-radius: 50px;
    font-weight:   bold;
    font-size:     15px;
    display:       inline-block;
    box-shadow:    0 3px 10px rgba(255, 193, 7, 0.35);
}

.afuro-ticket-display-large {
    background:    linear-gradient(135deg, var(--afuro-yellow), var(--afuro-orange));
    color:         white;
    padding:       12px 28px;
    border-radius: 50px;
    font-weight:   bold;
    font-size:     18px;
    display:       inline-block;
    box-shadow:    0 4px 14px rgba(255, 193, 7, 0.4);
    margin:        12px 0;
}

/* ----- ローディング・スピナー ----- */
.afuro-loading {
    text-align: center;
    padding:    30px;
}

.afuro-spinner {
    width:            40px;
    height:           40px;
    border:           4px solid var(--afuro-green-light);
    border-top-color: var(--afuro-green);
    border-radius:    50%;
    animation:        afuro-spin 0.8s linear infinite;
    margin:           0 auto 12px;
}

@keyframes afuro-spin {
    to { transform: rotate(360deg); }
}

/* ----- エラーメッセージ ----- */
.afuro-error-message {
    text-align:    center;
    padding:       30px;
    background:    #FFF3E0;
    border-radius: var(--afuro-radius);
    border:        2px solid var(--afuro-orange);
}

/* =====================================================
   クイズ画面
   ===================================================== */

.afuro-quiz-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   24px;
    flex-wrap:       wrap;
    gap:             12px;
}

.afuro-quiz-title h2 {
    margin: 0 0 4px;
    color:  var(--afuro-green-dark);
}

.afuro-quiz-title p {
    margin: 0;
    color:  #666;
    font-size: 14px;
}

.afuro-category-filter {
    margin-bottom: 20px;
    display:       flex;
    align-items:   center;
    gap:           10px;
    flex-wrap:     wrap;
}

.afuro-category-filter label {
    font-weight: bold;
    color:       var(--afuro-green-dark);
}

.afuro-category-filter select {
    padding:       8px 14px;
    border-radius: 8px;
    border:        2px solid var(--afuro-green);
    font-size:     14px;
    background:    white;
    cursor:        pointer;
}

/* クイズスタートパネル */
.afuro-quiz-start-panel {
    text-align:    center;
    padding:       40px 20px;
    background:    var(--afuro-green-pale);
    border-radius: var(--afuro-radius);
}

.afuro-character-small {
    font-size:     60px;
    margin-bottom: 16px;
}

.afuro-quiz-start-panel h3 {
    color:         var(--afuro-green-dark);
    font-size:     24px;
    margin-bottom: 12px;
}

/* クイズパネル */
.afuro-quiz-panel {
    background:    white;
    border-radius: var(--afuro-radius);
    padding:       28px;
    box-shadow:    var(--afuro-shadow);
    margin-bottom: 16px;
}

.afuro-question-number {
    margin-bottom: 16px;
}

.afuro-badge {
    background:    var(--afuro-green);
    color:         white;
    padding:       4px 14px;
    border-radius: 50px;
    font-size:     13px;
    font-weight:   bold;
}

.afuro-question-text {
    font-size:     18px;
    font-weight:   bold;
    line-height:   1.6;
    margin-bottom: 24px;
    color:         var(--afuro-text);
    padding:       20px;
    background:    var(--afuro-green-pale);
    border-radius: 10px;
    border-left:   4px solid var(--afuro-green);
}

/* 選択肢グリッド */
.afuro-choices-grid {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   12px;
}

@media (max-width: 600px) {
    .afuro-choices-grid {
        grid-template-columns: 1fr;
    }
}

.afuro-choice-btn {
    display:       flex;
    align-items:   center;
    gap:           12px;
    padding:       16px;
    background:    white;
    border:        2px solid #E0E0E0;
    border-radius: 10px;
    cursor:        pointer;
    font-size:     15px;
    text-align:    left;
    transition:    all 0.2s ease;
    line-height:   1.5;
}

.afuro-choice-btn:hover:not(:disabled) {
    border-color: var(--afuro-green);
    background:   var(--afuro-green-pale);
    transform:    translateX(4px);
}

.afuro-choice-btn:disabled {
    cursor: default;
}

.afuro-choice-btn.correct {
    border-color: var(--afuro-green);
    background:   var(--afuro-green-light);
    color:        var(--afuro-green-dark);
}

.afuro-choice-btn.incorrect {
    border-color: var(--afuro-red);
    background:   #FFEBEE;
    color:        #C62828;
}

.afuro-choice-label {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           32px;
    height:          32px;
    border-radius:   50%;
    background:      var(--afuro-green);
    color:           white;
    font-weight:     bold;
    font-size:       14px;
    flex-shrink:     0;
}

.afuro-choice-text {
    flex: 1;
}

/* 結果パネル */
.afuro-result-icon {
    font-size:  64px;
    text-align: center;
    margin-bottom: 12px;
}

.afuro-result-message {
    font-size:     20px;
    font-weight:   bold;
    text-align:    center;
    margin-bottom: 16px;
    padding:       16px;
    border-radius: 10px;
}

.afuro-result-message.correct {
    background: var(--afuro-green-light);
    color:      var(--afuro-green-dark);
}

.afuro-result-message.incorrect {
    background: #FFEBEE;
    color:      #C62828;
}

/* チケット獲得アニメーション */
.afuro-ticket-animation {
    text-align:    center;
    padding:       20px;
    margin-bottom: 16px;
}

.afuro-ticket-earned {
    font-size:  36px;
    font-weight: bold;
    color:      var(--afuro-orange);
}

.afuro-ticket-animation.animate .afuro-ticket-earned {
    animation: afuro-ticket-pop 0.6s ease;
}

@keyframes afuro-ticket-pop {
    0%   { transform: scale(0.5); opacity: 0; }
    60%  { transform: scale(1.3); opacity: 1; }
    100% { transform: scale(1);   opacity: 1; }
}

/* 解説ボックス */
.afuro-explanation-box {
    background:    #FFF8E1;
    border:        2px solid var(--afuro-yellow);
    border-radius: 10px;
    padding:       16px 20px;
    margin-bottom: 20px;
}

.afuro-explanation-box h4 {
    margin:       0 0 10px;
    color:        #E65100;
    font-size:    16px;
}

.afuro-correct-answer-text {
    margin-top:  10px;
    font-weight: bold;
    color:       var(--afuro-green-dark);
    font-size:   16px;
}

.afuro-result-actions {
    display:         flex;
    gap:             12px;
    justify-content: center;
    flex-wrap:       wrap;
    margin-top:      16px;
}

.afuro-link {
    color:           var(--afuro-green-dark);
    text-decoration: underline;
}

/* =====================================================
   ガチャ画面
   ===================================================== */

.afuro-gacha-header {
    text-align:    center;
    margin-bottom: 30px;
}

.afuro-gacha-header h2 {
    color:  var(--afuro-green-dark);
    margin: 0 0 8px;
}

.afuro-gacha-header p {
    color:  #666;
    margin: 0 0 12px;
}

/* ガチャマシン */
.afuro-gacha-machine-wrap {
    text-align: center;
    margin:     0 auto 30px;
    max-width:  340px;
}

.afuro-gacha-machine {
    background:    linear-gradient(160deg, #66BB6A, #388E3C);
    border-radius: 20px 20px 40px 40px;
    padding:       20px;
    box-shadow:    0 8px 30px rgba(56, 142, 60, 0.35);
    position:      relative;
    overflow:      hidden;
    margin-bottom: 20px;
}

.afuro-gacha-machine::before {
    content:          '';
    position:         absolute;
    top:              -20%;
    left:             -20%;
    width:            60%;
    height:           60%;
    background:       rgba(255,255,255,0.12);
    border-radius:    50%;
    pointer-events:   none;
}

.afuro-gacha-machine-top {
    margin-bottom: 14px;
}

.afuro-gacha-ball-display {
    font-size:     80px;
    line-height:   1;
    filter:        drop-shadow(0 4px 8px rgba(0,0,0,0.3));
    animation:     afuro-float 3s ease-in-out infinite;
}

@keyframes afuro-float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-10px); }
}

.afuro-gacha-machine-body {
    background:    rgba(0,0,0,0.15);
    border-radius: 14px;
    padding:       14px;
}

.afuro-gacha-window {
    background:    rgba(255,255,255,0.9);
    border-radius: 10px;
    padding:       20px;
    min-height:    80px;
    display:       flex;
    align-items:   center;
    justify-content: center;
}

.afuro-gacha-window-inner {
    font-size: 48px;
}

.afuro-gacha-actions {
    text-align:    center;
    margin-bottom: 12px;
}

.afuro-no-ticket-message {
    margin-top: 14px;
    color:      #888;
    font-size:  14px;
}

/* ガチャ演出オーバーレイ */
.afuro-gacha-overlay {
    position:        fixed;
    inset:           0;
    background:      rgba(0,0,0,0.75);
    display:         flex;
    align-items:     center;
    justify-content: center;
    z-index:         9999;
}

.afuro-gacha-spinning {
    text-align: center;
    color:      white;
}

.afuro-spin-ball {
    font-size:  100px;
    display:    block;
    margin-bottom: 20px;
    filter:     drop-shadow(0 0 20px rgba(255,255,255,0.8));
}

.afuro-spin-ball.spinning {
    animation: afuro-spin-bounce 0.5s ease-in-out infinite alternate,
               afuro-spin 1s linear infinite;
}

@keyframes afuro-spin-bounce {
    from { transform: scale(0.9); }
    to   { transform: scale(1.1); }
}

.afuro-gacha-sparks {
    font-size:  28px;
    margin-top: 16px;
    animation:  afuro-sparks 0.8s ease-in-out infinite alternate;
}

.afuro-gacha-sparks span {
    display:          inline-block;
    animation:        afuro-spark-item 0.6s ease-in-out infinite alternate;
    margin:           0 4px;
}

.afuro-gacha-sparks span:nth-child(2) { animation-delay: 0.1s; }
.afuro-gacha-sparks span:nth-child(3) { animation-delay: 0.2s; }
.afuro-gacha-sparks span:nth-child(4) { animation-delay: 0.3s; }
.afuro-gacha-sparks span:nth-child(5) { animation-delay: 0.4s; }

@keyframes afuro-spark-item {
    from { transform: translateY(0) scale(1);   opacity: 0.7; }
    to   { transform: translateY(-12px) scale(1.3); opacity: 1; }
}

/* ガチャ結果オーバーレイ */
.afuro-gacha-result {
    position:        fixed;
    inset:           0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    z-index:         9999;
}

.afuro-result-backdrop {
    position:   absolute;
    inset:      0;
    background: rgba(0,0,0,0.75);
}

.afuro-result-card {
    position:      relative;
    background:    white;
    border-radius: 20px;
    padding:       32px 28px;
    max-width:     380px;
    width:         90%;
    text-align:    center;
    box-shadow:    0 20px 60px rgba(0,0,0,0.4);
    z-index:       1;
}

.afuro-result-card.card-animate {
    animation: afuro-card-reveal 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes afuro-card-reveal {
    0%   { transform: scale(0.4) rotate(-10deg); opacity: 0; }
    70%  { transform: scale(1.05) rotate(1deg);  opacity: 1; }
    100% { transform: scale(1) rotate(0deg);     opacity: 1; }
}

/* レアリティ別スタイル */
.afuro-result-card.rarity-ssr {
    background:   linear-gradient(145deg, #fffde7, #fff9c4);
    border:       3px solid var(--afuro-gold);
    box-shadow:   0 20px 60px rgba(255,215,0,0.4), 0 0 40px rgba(255,215,0,0.2);
}

.afuro-result-card.rarity-sr {
    background:   linear-gradient(145deg, #f3e5f5, #e1bee7);
    border:       3px solid var(--afuro-purple);
    box-shadow:   0 20px 60px rgba(156,39,176,0.3);
}

.afuro-result-card.rarity-r {
    background:   linear-gradient(145deg, #e3f2fd, #bbdefb);
    border:       3px solid var(--afuro-blue);
    box-shadow:   0 20px 60px rgba(33,150,243,0.25);
}

.afuro-result-card.rarity-n {
    background:   white;
    border:       2px solid #E0E0E0;
}

.afuro-rarity-badge-large {
    display:       inline-block;
    padding:       6px 20px;
    border-radius: 50px;
    font-weight:   bold;
    font-size:     15px;
    margin-bottom: 16px;
    letter-spacing: 1px;
}

.afuro-rarity-badge-large.rarity-ssr {
    background: linear-gradient(90deg, #FFD700, #FFA000);
    color:      white;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
    animation:  afuro-shimmer 1.5s ease-in-out infinite;
}

.afuro-rarity-badge-large.rarity-sr {
    background: linear-gradient(90deg, #CE93D8, #9C27B0);
    color:      white;
}

.afuro-rarity-badge-large.rarity-r {
    background: linear-gradient(90deg, #90CAF9, #2196F3);
    color:      white;
}

.afuro-rarity-badge-large.rarity-n {
    background: #E0E0E0;
    color:      #555;
}

@keyframes afuro-shimmer {
    0%, 100% { box-shadow: 0 0 8px rgba(255,215,0,0.8); }
    50%       { box-shadow: 0 0 20px rgba(255,215,0,1.0); }
}

.afuro-result-item-image {
    margin-bottom: 14px;
}

.afuro-result-item-image img {
    max-width:     200px;
    max-height:    200px;
    object-fit:    contain;
    border-radius: 10px;
}

.afuro-result-item-name {
    font-size:     24px;
    font-weight:   bold;
    margin:        0 0 8px;
    color:         var(--afuro-text);
}

.afuro-result-category-badge {
    background:    var(--afuro-green-light);
    color:         var(--afuro-green-dark);
    padding:       4px 14px;
    border-radius: 50px;
    font-size:     13px;
    font-weight:   bold;
    display:       inline-block;
    margin-bottom: 12px;
}

.afuro-result-message-text {
    font-size:     15px;
    color:         #555;
    margin-bottom: 10px;
}

.afuro-result-ticket-info {
    font-size:     14px;
    color:         #777;
    margin-bottom: 20px;
}

/* レアリティ表 */
.afuro-rarity-table-wrap {
    margin-top: 30px;
}

.afuro-rarity-table-wrap h3 {
    text-align:    center;
    color:         var(--afuro-green-dark);
    margin-bottom: 14px;
}

.afuro-rarity-table {
    border-radius: var(--afuro-radius);
    overflow:      hidden;
    box-shadow:    var(--afuro-shadow);
}

.afuro-rarity-row {
    display:     flex;
    align-items: center;
    padding:     14px 20px;
    gap:         16px;
}

.afuro-rarity-row.rarity-ssr { background: linear-gradient(90deg, #fff9c4, #fffde7); }
.afuro-rarity-row.rarity-sr  { background: linear-gradient(90deg, #f3e5f5, #fce4ec); }
.afuro-rarity-row.rarity-r   { background: linear-gradient(90deg, #e3f2fd, #e8eaf6); }
.afuro-rarity-row.rarity-n   { background: #f9f9f9; }

.afuro-rarity-name {
    font-weight: bold;
    font-size:   16px;
    min-width:   40px;
}

.afuro-rarity-desc {
    flex:      1;
    font-size: 14px;
    color:     #555;
}

.afuro-rarity-rate {
    font-weight: bold;
    font-size:   16px;
    color:       var(--afuro-green-dark);
}

.afuro-duplicate-note {
    text-align: center;
    font-size:  13px;
    color:      #888;
    margin-top: 12px;
}

/* =====================================================
   着せ替え画面
   ===================================================== */

.afuro-dressup-header {
    text-align:    center;
    margin-bottom: 24px;
}

.afuro-dressup-header h2 {
    color:  var(--afuro-green-dark);
    margin: 0 0 8px;
}

.afuro-dressup-main {
    display:               grid;
    grid-template-columns: 320px 1fr;
    gap:                   24px;
    align-items:           start;
}

@media (max-width: 768px) {
    .afuro-dressup-main {
        grid-template-columns: 1fr;
    }
}

.afuro-section-title {
    font-size:     18px;
    color:         var(--afuro-green-dark);
    margin:        0 0 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--afuro-green-light);
}

/* キャラクターステージ */
.afuro-character-stage {
    position:      relative;
    width:         280px;
    height:        360px;
    margin:        0 auto 16px;
    background:    linear-gradient(180deg, #E8F5E9 0%, #F1F8E9 100%);
    border-radius: var(--afuro-radius);
    border:        2px solid var(--afuro-green-light);
    overflow:      hidden;
}

.afuro-layer {
    position: absolute;
    inset:    0;
}

.afuro-layer img {
    width:      100%;
    height:     100%;
    object-fit: contain;
}

/* レイヤーの重ね順 */
.afuro-layer-base      { z-index: 1; }
.afuro-layer-bottoms   { z-index: 2; }
.afuro-layer-shoes     { z-index: 3; }
.afuro-layer-tops      { z-index: 4; }
.afuro-layer-accessory { z-index: 5; }
.afuro-layer-hair      { z-index: 6; }

/* プレースホルダーキャラクター */
.afuro-character-placeholder {
    position:        absolute;
    inset:           0;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    z-index:         0;
}

.afuro-placeholder-afro  { font-size: 28px; letter-spacing: -2px; }
.afuro-placeholder-face  { font-size: 28px; margin: 4px 0; }
.afuro-placeholder-body  { font-size: 48px; }
.afuro-placeholder-name  {
    font-size:   13px;
    color:       var(--afuro-green-dark);
    font-weight: bold;
    margin-top:  8px;
}

/* 保存エリア */
.afuro-save-area {
    text-align: center;
    margin-bottom: 16px;
}

.afuro-save-message {
    margin-top:    10px;
    padding:       10px 16px;
    border-radius: 8px;
    font-weight:   bold;
    font-size:     14px;
}

.afuro-save-message.success {
    background: var(--afuro-green-light);
    color:      var(--afuro-green-dark);
    border:     1px solid var(--afuro-green);
}

.afuro-save-message.error {
    background: #FFEBEE;
    color:      #C62828;
    border:     1px solid var(--afuro-red);
}

/* 装備中リスト */
.afuro-equipped-list {
    background:    var(--afuro-gray-light);
    border-radius: var(--afuro-radius);
    padding:       14px;
}

.afuro-equipped-list h4 {
    margin:        0 0 10px;
    font-size:     14px;
    color:         var(--afuro-green-dark);
    font-weight:   bold;
}

.afuro-equipped-item {
    display:       flex;
    align-items:   center;
    gap:           8px;
    padding:       6px 0;
    border-bottom: 1px solid #E0E0E0;
    font-size:     13px;
}

.afuro-equipped-item:last-child {
    border-bottom: none;
}

.afuro-equipped-icon  { font-size: 16px; }
.afuro-equipped-label { color: #666; min-width: 60px; }

.afuro-equipped-name  {
    flex:        1;
    font-weight: bold;
    color:       var(--afuro-green-dark);
    font-size:   13px;
}

.afuro-unequip-btn {
    background:    none;
    border:        1px solid #ddd;
    border-radius: 50%;
    width:         22px;
    height:        22px;
    cursor:        pointer;
    font-size:     11px;
    color:         #999;
    padding:       0;
    line-height:   1;
    transition:    all 0.2s;
}

.afuro-unequip-btn:hover {
    background:  #FFEBEE;
    border-color: var(--afuro-red);
    color:       var(--afuro-red);
}

/* カテゴリタブ */
.afuro-category-tabs {
    display:       flex;
    gap:           6px;
    flex-wrap:     wrap;
    margin-bottom: 14px;
}

.afuro-tab-btn {
    padding:       8px 14px;
    background:    var(--afuro-gray-light);
    border:        2px solid transparent;
    border-radius: 50px;
    cursor:        pointer;
    font-size:     13px;
    font-weight:   bold;
    color:         #555;
    transition:    all 0.2s;
}

.afuro-tab-btn:hover {
    background:    var(--afuro-green-pale);
    border-color:  var(--afuro-green);
    color:         var(--afuro-green-dark);
}

.afuro-tab-btn.active {
    background:    var(--afuro-green);
    border-color:  var(--afuro-green-dark);
    color:         white;
}

.afuro-tab-count {
    font-size: 11px;
    opacity:   0.8;
}

/* アイテムグリッド */
.afuro-items-grid-container {
    min-height: 200px;
}

.afuro-items-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap:                   10px;
}

.afuro-item-card {
    background:    white;
    border:        2px solid #E0E0E0;
    border-radius: 10px;
    padding:       10px 8px;
    cursor:        pointer;
    text-align:    center;
    transition:    all 0.2s ease;
    position:      relative;
}

.afuro-item-card:hover {
    border-color: var(--afuro-green);
    transform:    translateY(-2px);
    box-shadow:   var(--afuro-shadow);
}

.afuro-item-card.selecting {
    transform: scale(0.95);
}

.afuro-item-card.equipped {
    border-color: var(--afuro-green);
    background:   var(--afuro-green-pale);
    box-shadow:   0 0 0 2px var(--afuro-green);
}

/* レアリティ別ボーダー */
.afuro-item-card.rarity-r   { border-color: #90CAF9; }
.afuro-item-card.rarity-sr  { border-color: #CE93D8; }
.afuro-item-card.rarity-ssr { border-color: var(--afuro-gold); }

.afuro-item-card.rarity-r:hover   { border-color: var(--afuro-blue); }
.afuro-item-card.rarity-sr:hover  { border-color: var(--afuro-purple); }
.afuro-item-card.rarity-ssr:hover { border-color: #FFA000; }

.afuro-item-none {
    border-style:  dashed;
    border-color:  #ccc;
    opacity:       0.7;
}

.afuro-item-none:hover {
    border-color: var(--afuro-red);
    opacity:      1;
}

.afuro-item-rarity-badge {
    position:       absolute;
    top:            4px;
    right:          4px;
    font-size:      10px;
    font-weight:    bold;
    padding:        1px 5px;
    border-radius:  4px;
}

.rarity-N   { background: #E0E0E0; color: #555; }
.rarity-R   { background: #BBDEFB; color: #1565C0; }
.rarity-SR  { background: #E1BEE7; color: #6A1B9A; }
.rarity-SSR { background: #FFF9C4; color: #F57F17; }

.afuro-item-thumb {
    width:         70px;
    height:        70px;
    margin:        0 auto 6px;
    display:       flex;
    align-items:   center;
    justify-content: center;
}

.afuro-item-thumb img {
    width:      100%;
    height:     100%;
    object-fit: contain;
    border-radius: 6px;
}

.afuro-item-name {
    font-size:     11px;
    color:         #555;
    font-weight:   bold;
    line-height:   1.3;
    word-break:    break-all;
}

.afuro-item-equipped-mark {
    font-size:  10px;
    color:      var(--afuro-green-dark);
    font-weight: bold;
    margin-top: 3px;
}

.afuro-no-items {
    grid-column: 1 / -1;
    text-align:  center;
    padding:     30px 20px;
    color:       #888;
    font-size:   14px;
    background:  var(--afuro-gray-light);
    border-radius: 10px;
}

/* =====================================================
   管理画面
   ===================================================== */

.afuro-rarity-badge {
    display:       inline-block;
    padding:       3px 8px;
    border-radius: 4px;
    font-weight:   bold;
    font-size:     12px;
}

/* =====================================================
   レスポンシブ
   ===================================================== */

@media (max-width: 480px) {
    .afuro-quiz-header {
        flex-direction: column;
        text-align:     center;
    }

    .afuro-result-actions {
        flex-direction: column;
    }

    .afuro-gacha-machine {
        max-width: 260px;
        margin: 0 auto;
    }

    .afuro-character-stage {
        width:  240px;
        height: 300px;
    }

    .afuro-items-grid {
        grid-template-columns: repeat(auto-fill, minmax(85px, 1fr));
    }
}