:root {
    --bg-color: transparent; /* 背景を完全に透明化して奥の背景画像を透過 */
}

/* 🧱 全体のコンテナ設定 */
.tea-viewport {
    position: relative;
    width: 100%;
    background: transparent !important;
    border: none;             
    padding-top: 0px !important; 
    margin-top: 0px !important;
}

/* 🚨【超重要：スクロール完全無視 ＆ 120px完全固定】
   最大幅の縛りがあるmainの外側（BODY直下）で動作するため、画面全体100vwの幅を使って上から120pxの位置にロックされます */
#dance-floor {
    position: fixed !important;       /* 画面に強制固定 */
    top: 120px !important;            /* 紅茶ページと同じく、上から120pxの位置に完全ロック */
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100vw !important;         /* 1280〜1920pxの画面全体を100%カバー */
    max-width: 1920px !important;     /* テーマの幅制限を力技で完全破壊 */
    height: 450px !important;          /* 450pxの高さ空間を維持 */
    overflow: hidden !important; 
    z-index: 2147483645 !important;   /* ガラスのすぐ裏、あらゆる背景シートを突き破る最前面 */
    pointer-events: none !important;    /* 操作を下の本文へ突き抜けさせる */
    background: transparent !important;
    background-color: transparent !important;
}

/* 🚨【中央900pxを完璧に避ける：左側エリア】
   左余白を50px足して100px起点とし、そこから200pxの幅の中に男性ゾーンを完全隔離 */
#dance-floor .area-male {
    position: absolute !important;
    top: 0 !important;
    left: 100px !important;           /* 🚨左余白100px起点 */
    width: 200px !important;          /* 🚨ご指定の200px幅に制限 */
    height: 100% !important;
    background: transparent !important;
    z-index: 99999 !important;
}

/* 🚨【中央900pxを完璧に避ける：右側エリア】
   右余白を50px足して右から100px起点とし、そこから200pxの幅の中に女性ゾーンを完全隔離 */
#dance-floor .area-female {
    position: absolute !important;
    top: 0 !important;
    right: 100px !important;          /* 🚨右余白100px起点 */
    width: 200px !important;          /* 🚨ご指定の200px幅に制限 */
    height: 100% !important;
    background: transparent !important;
    z-index: 99999 !important;
}


/* 🕺💃 ダンスステップ・パーティクル等の共通スタイル */
.dance-particle {
    position: absolute !important;
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    background-color: #ffffff !important;
    mix-blend-mode: screen !important;
    opacity: 0;
    pointer-events: none !important;
}

/* 🕺 男性ゾーン（左側200px内）での専用エフェクト */
.area-male .dance-particle {
    background: radial-gradient(circle, #8bc34a 0%, rgba(255,255,255,0) 70%) !important;
    box-shadow: 0 0 8px rgba(139, 195, 74, 0.6) !important;
    animation: maleStep 2.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards !important;
}

/* 💃 女性ゾーン（右側200px内）での専用エフェクト */
.area-female .dance-particle {
    background: radial-gradient(circle, #ff4081 0%, rgba(255,255,255,0) 70%) !important;
    box-shadow: 0 0 8px rgba(255, 64, 129, 0.6) !important;
    animation: femaleStep 2.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards !important;
}

@keyframes maleStep {
    0% { transform: scale(0.3) translate(0, 0); opacity: 0; }
    20% { transform: scale(1.1); opacity: 0.8; }
    100% { transform: scale(0.5) translate(var(--drift-x, -20px), var(--drift-y, -60px)); opacity: 0; }
}

@keyframes femaleStep {
    0% { transform: scale(0.3) translate(0, 0); opacity: 0; }
    20% { transform: scale(1.1); opacity: 0.8; }
    100% { transform: scale(0.5) translate(var(--drift-x, 20px), var(--drift-y, -60px)); opacity: 0; }
}

/* 📱 スマホ専用レスポンシブ最適化 */
@media (max-width: 767px) {
    #dance-floor {
        top: 110px !important; /* スマホ時はガラスの下にピッタリ合わせる */
        height: 350px !important;
    }
    /* スマホ時は画面が狭いため、中央の文字を避けて両端15pxの幅40pxへ自動で回り込み縮小 */
    #dance-floor .area-male {
        left: 15px !important;
        width: 40px !important;
    }
    #dance-floor .area-female {
        right: 15px !important;
        width: 40px !important;
    }
}

/* 🚨 強制可視化デバッグスタイル */
.footprint svg path {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}