/* タピオカ帝国 - スタイルシート */

/* ============================================================
   レイヤー1: 元のスタイル(オリジナル定義)
   ============================================================ */

        *{margin:0;padding:0;box-sizing:border-box}
        body{font-family:'Zen Maru Gothic',sans-serif;background:#111;color:#eee;min-height:100vh;padding:20px}
        .container{max-width:600px;margin:0 auto}
        h1{text-align:center;font-size:1.8rem;margin-bottom:20px;color:#ff6b9d}
        
        .main-stats{background:#1a1a1a;border-radius:10px;padding:15px;margin-bottom:15px}
        .stat-row{display:flex;justify-content:space-between;padding:4px 0;font-size:0.95rem}
        .stat-label{color:#888}
        .stat-value{font-weight:700}
        .stat-value.money{color:#f1c40f}
        
        .section{background:#1a1a1a;border-radius:10px;padding:15px;margin-bottom:15px}
        .section-title{font-size:1rem;color:#ff6b9d;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid #333}
        
        .make-row{display:flex;align-items:center;gap:15px;margin-bottom:15px}
        .make-btn{width:80px;height:80px;border-radius:50%;background:linear-gradient(145deg,#3a2510,#241505);border:3px solid #5a4020;font-size:2.2rem;cursor:pointer;flex-shrink:0}
        .make-btn:hover{transform:scale(1.05)}
        .make-btn:active{transform:scale(0.95)}
        .make-info{flex:1}
        .make-info div{margin-bottom:4px;font-size:0.9rem;color:#aaa}
        .make-info span{color:#ff6b9d;font-weight:700}
        
        .price-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}
        .price-row label{width:80px;color:#888;font-size:0.9rem}
        .price-slider{flex:1;height:8px;-webkit-appearance:none;background:linear-gradient(90deg,#2ecc71,#f1c40f,#e74c3c);border-radius:4px;cursor:pointer}
        .price-slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;cursor:pointer}
        .price-display{width:60px;text-align:right;font-weight:700;color:#f1c40f}
        .price-hint{font-size:0.75rem;color:#888;text-align:right;margin-top:5px}
        
        .demand-row{margin:15px 0}
        .demand-header{display:flex;justify-content:space-between;margin-bottom:5px;font-size:0.9rem}
        .demand-bar{height:16px;background:#222;border-radius:8px;overflow:hidden}
        .demand-fill{height:100%;border-radius:8px;transition:width 0.2s}
        
        .metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:15px}
        .metric{background:#111;padding:12px;border-radius:8px;text-align:center}
        .metric-value{font-size:1.3rem;font-weight:700;color:#00d4ff}
        .metric-label{font-size:0.75rem;color:#666;margin-top:2px}
        .metric-value.warn{color:#e74c3c}
        
        .upgrades{display:flex;flex-direction:column;gap:8px}
        .upg{padding:12px;background:#111;border:1px solid #333;border-radius:8px;cursor:pointer;display:flex;justify-content:space-between;align-items:center}
        .upg:hover:not(.disabled){border-color:#ff6b9d;background:#1f1f1f}
        .upg.disabled{opacity:0.35;cursor:not-allowed}
        .upg.affordable{border-color:#2ecc71}
        .upg-left{display:flex;flex-direction:column;gap:2px}
        .upg-name{font-weight:700;font-size:0.95rem}
        .upg-desc{font-size:0.8rem;color:#888}
        .upg-right{text-align:right}
        .upg-cost{color:#f1c40f;font-weight:700}
        .upg-owned{font-size:0.75rem;color:#2ecc71}
        
        .alert{margin-top:10px;padding:10px;border-radius:6px;font-size:0.85rem;text-align:center}
        .alert.warn{background:rgba(231,76,60,0.15);border:1px solid #c0392b}
        .alert.good{background:rgba(46,204,113,0.15);border:1px solid #27ae60}
        .alert.hidden{display:none}
        
        .slot-machine{background:linear-gradient(180deg,#1a0a0a,#0a0a0a);border-radius:15px;padding:20px;text-align:center;border:3px solid #4a2020;box-shadow:0 0 30px rgba(255,50,50,0.2)}
        .slot-cabinet{background:linear-gradient(180deg,#2a1515,#150808);border-radius:12px;padding:15px;margin-bottom:15px;box-shadow:inset 0 0 20px rgba(0,0,0,0.5)}
        .slot-info-bar{display:flex;justify-content:space-between;margin-bottom:10px;padding:5px 10px;background:#111;border-radius:6px}
        .slot-lines-info{color:#ff6b9d;font-weight:700}
        .slot-jackpot-mini{color:#f1c40f;font-weight:700}
        .slot-display{position:relative;background:#000;border-radius:8px;padding:10px;display:flex;align-items:center;justify-content:center;gap:5px}
        .slot-line-indicators{display:flex;flex-direction:column;gap:8px;width:24px}
        .slot-line-indicators.left{align-items:flex-end}
        .slot-line-indicators.right{align-items:flex-start}
        .line-ind{width:20px;height:20px;border-radius:50%;background:#333;color:#888;font-size:0.7rem;display:flex;align-items:center;justify-content:center;font-weight:700}
        .line-ind.active{background:#f1c40f;color:#000;box-shadow:0 0 10px #f1c40f}
        .slot-reels-area{display:flex;gap:6px;height:180px}
        .slot-reel-wrap{width:65px;height:100%;background:#111;border-radius:6px;overflow:hidden;position:relative;box-shadow:inset 0 0 10px rgba(0,0,0,0.8)}
        .slot-reel{display:flex;flex-direction:column}
        .slot-symbol{width:65px;height:60px;display:flex;align-items:center;justify-content:center;font-size:2rem;background:linear-gradient(180deg,#222,#111,#222);border-bottom:1px solid #333}
        .slot-symbol.highlight{background:linear-gradient(180deg,#442,#331,#442);box-shadow:inset 0 0 15px rgba(255,215,0,0.3)}
        .slot-line-legend{display:flex;justify-content:center;gap:10px;margin-top:10px;flex-wrap:wrap}
        .legend-item{font-size:0.75rem;color:#888;background:#111;padding:3px 8px;border-radius:4px}
        .legend-item b{color:#f1c40f;margin-right:3px}
        .slot-controls{display:flex;justify-content:center;align-items:center;gap:15px;margin:15px 0;flex-wrap:wrap}
        .slot-bet-area{display:flex;align-items:center;gap:10px;background:#111;padding:8px 15px;border-radius:8px}
        .bet-btn{width:36px;height:36px;border-radius:50%;border:none;background:linear-gradient(145deg,#444,#222);color:#fff;font-size:1.2rem;cursor:pointer}
        .bet-btn:hover{background:linear-gradient(145deg,#555,#333)}
        .bet-display{text-align:center}
        .bet-label{font-size:0.65rem;color:#888}
        .bet-value{font-size:1rem;font-weight:700;color:#f1c40f}
        .bet-total{font-size:0.7rem;color:#ff6b9d}
        .slot-spin-btn{display:flex;flex-direction:column;align-items:center;padding:12px 30px;background:linear-gradient(145deg,#e74c3c,#c0392b);border:none;border-radius:12px;color:#fff;font-weight:700;cursor:pointer;transition:all 0.1s;box-shadow:0 4px 15px rgba(231,76,60,0.4)}
        .slot-spin-btn span:first-child{font-size:1.3rem}
        .slot-spin-btn span:last-child{font-size:0.9rem}
        .slot-spin-btn:hover:not(:disabled){transform:scale(1.05);box-shadow:0 6px 20px rgba(231,76,60,0.6)}
        .slot-spin-btn:disabled{opacity:0.5;cursor:not-allowed}
        .slot-auto{font-size:0.85rem;color:#888}
        .slot-auto input{margin-right:5px}
        .slot-result{min-height:35px;font-size:1.2rem;margin:10px 0;padding:8px;background:#111;border-radius:8px}
        .slot-result.win{color:#f1c40f;animation:winFlash 0.5s ease-in-out 3;text-shadow:0 0 20px #f1c40f}
        .slot-result.jackpot{color:#ff0;font-size:1.5rem;animation:jackpotFlash 0.2s ease-in-out 10;text-shadow:0 0 30px #ff0}
        @keyframes winFlash{0%,100%{opacity:1}50%{opacity:0.5}}
        @keyframes jackpotFlash{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
        .slot-result.lose{color:#666}
        .slot-win-lines{font-size:0.8rem;color:#aaa;margin-bottom:10px;min-height:20px}
        .slot-stats{display:flex;justify-content:center;gap:20px;font-size:0.8rem;color:#888;margin:10px 0}
        .slot-stats span span{color:#00d4ff;font-weight:700}
        .slot-paytable-btn{display:inline-block;padding:8px 20px;background:#222;border-radius:6px;cursor:pointer;font-size:0.85rem;margin-top:10px}
        .slot-paytable-btn:hover{background:#333}
        .slot-paytable{display:none;background:#111;border-radius:10px;padding:15px;margin-top:15px;text-align:left}
        .slot-paytable.show{display:block}
        .paytable-title{text-align:center;font-size:1rem;margin-bottom:10px;color:#f1c40f}
        .paytable-grid{display:flex;flex-direction:column;gap:4px}
        .pay-row{display:flex;justify-content:space-between;padding:5px 10px;background:#1a1a1a;border-radius:4px;font-size:0.8rem}
        .pay-row span:last-child{color:#f1c40f}
        .pay-row.jackpot-row{background:linear-gradient(90deg,#4a2000,#2a1000);border:1px solid #f1c40f}
        .pay-row.wild-row{background:#1a1a2a;border:1px solid #9b59b6}
        
        .lotto-machine{text-align:center;padding:10px}
        .lotto-desc{font-size:0.9rem;color:#888;margin-bottom:15px}
        .lotto-numbers{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;max-width:300px;margin:0 auto 15px}
        .lotto-num{aspect-ratio:1;border-radius:50%;background:#222;border:2px solid #444;display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:700;cursor:pointer;transition:all 0.15s}
        .lotto-num:hover{border-color:#ff6b9d}
        .lotto-num.selected{background:#ff6b9d;border-color:#ff6b9d;color:#fff}
        .lotto-controls{display:flex;justify-content:center;align-items:center;gap:20px;margin-bottom:15px}
        .lotto-timer{font-size:1rem;color:#f1c40f}
        .lotto-result{font-size:3rem;margin:15px 0;padding:15px;background:#111;border-radius:10px}
        
        .race-container{padding:10px}
        .race-timer{text-align:center;font-size:1rem;color:#f1c40f;margin-bottom:15px}
        .race-track{background:#2d4a2d;border-radius:8px;padding:10px;margin-bottom:15px}
        .race-lane{display:flex;align-items:center;padding:5px 0;border-bottom:1px dashed rgba(255,255,255,0.1)}
        .race-lane:last-child{border-bottom:none}
        .horse-num{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.75rem;font-weight:700;margin-right:8px;flex-shrink:0}
        .race-progress{flex:1;height:24px;background:rgba(0,0,0,0.3);border-radius:12px;position:relative;overflow:hidden}
        .horse-pos{position:absolute;font-size:1.2rem;transition:left 0.15s;top:50%;transform:translateY(-50%)}
        .race-odds{width:45px;text-align:right;font-size:0.8rem;color:#f1c40f;margin-left:8px}
        .race-betting{margin-bottom:15px}
        .race-horses{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
        .race-horse-btn{padding:10px;background:#111;border:2px solid #333;border-radius:8px;text-align:center;cursor:pointer;transition:all 0.15s}
        .race-horse-btn:hover{border-color:#ff6b9d}
        .race-horse-btn.selected{border-color:#2ecc71;background:rgba(46,204,113,0.1)}
        .race-horse-btn .name{font-size:0.85rem;margin-bottom:3px}
        .race-horse-btn .odds{color:#f1c40f;font-size:0.9rem}
        .race-controls{display:flex;justify-content:center;gap:15px;align-items:center}
        
        .futures-container{text-align:center;padding:10px}
        .futures-price{margin-bottom:15px}
        .futures-price .price-label{color:#888;margin-right:10px}
        .futures-price .price-value{font-size:2rem;font-weight:700}
        .futures-price .price-change{margin-left:10px;font-size:0.9rem}
        .futures-price .price-value.up{color:#2ecc71}
        .futures-price .price-value.down{color:#e74c3c}
        #futuresChart{background:#111;border-radius:8px;width:100%;max-width:400px;margin:0 auto 15px}
        .futures-holdings{display:flex;justify-content:center;gap:20px;margin-bottom:15px;font-size:0.9rem}
        .futures-holdings span span{font-weight:700;color:#00d4ff}
        .futures-controls{display:flex;justify-content:center;gap:10px;align-items:center}
        .futures-controls input{width:80px;padding:10px;border-radius:6px;border:none;background:#222;color:#fff;text-align:center;font-size:1rem}
        .futures-btn{padding:10px 25px;border:none;border-radius:6px;font-weight:700;cursor:pointer;transition:transform 0.1s}
        .futures-btn.buy{background:#2ecc71;color:#fff}
        .futures-btn.sell{background:#e74c3c;color:#fff}
        .futures-btn:hover{transform:scale(1.05)}
        .futures-btn:disabled{opacity:0.5;cursor:not-allowed}
        
        .catch-container{text-align:center;padding:10px}
        .catch-desc{font-size:0.9rem;color:#888;margin-bottom:5px}
        .catch-info{font-size:0.85rem;color:#f1c40f;margin-bottom:15px}
        .catch-game{width:100%;height:300px;background:linear-gradient(180deg,#1a1a2e,#16213e);border-radius:10px;position:relative;overflow:hidden;display:none;margin:15px 0;touch-action:none}
        .catch-game.active{display:block}
        .catch-hud{position:absolute;top:10px;left:0;right:0;display:flex;justify-content:space-between;padding:0 15px;font-size:0.9rem;z-index:10}
        .catch-hud span span{color:#f1c40f;font-weight:700}
        .falling-tapioca{position:absolute;font-size:1.8rem;user-select:none;pointer-events:none}
        .catch-basket{position:absolute;bottom:10px;font-size:2.5rem;user-select:none;transform:translateX(-50%);transition:left 0.05s linear}
        
        .event-notification{position:fixed;top:20px;left:50%;transform:translateX(-50%) translateY(-100px);background:#1a1a1a;border:2px solid #333;border-radius:10px;padding:15px 25px;font-size:1rem;z-index:1000;opacity:0;transition:all 0.3s}
        .event-notification.show{transform:translateX(-50%) translateY(0);opacity:1}
        .event-notification.good{border-color:#2ecc71;background:rgba(46,204,113,0.15)}
        .event-notification.bad{border-color:#e74c3c;background:rgba(231,76,60,0.15)}
        
        .modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);display:flex;align-items:center;justify-content:center;z-index:2000;opacity:0;transition:opacity 0.3s}
        .modal-overlay.show{opacity:1}
        .modal-content{background:#1a1a1a;border:2px solid #ff6b9d;border-radius:15px;padding:30px;text-align:center;max-width:400px}
        .modal-content h2{color:#ff6b9d;margin-bottom:15px}
        .modal-content p{margin-bottom:10px;color:#ccc}
        .modal-content button{margin-top:20px;padding:12px 30px;background:linear-gradient(145deg,#ff6b9d,#d4527a);border:none;border-radius:8px;color:#fff;font-size:1rem;cursor:pointer}
        .modal-content button:hover{transform:scale(1.05)}
        
        .news-feed{display:flex;flex-direction:column;gap:8px;max-height:200px;overflow-y:auto}
        .news-item{padding:10px;background:#111;border-radius:6px;font-size:0.85rem;border-left:3px solid #ff6b9d;animation:slideIn 0.3s}
        .news-item.good{border-left-color:#2ecc71}
        .news-item.bad{border-left-color:#e74c3c}
        @keyframes slideIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}
        @keyframes slideDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}
        
        .notification-popup{animation:slideDown 0.3s ease-out}
        
        .click-fx{position:fixed;pointer-events:none;font-weight:700;color:#ff6b9d;animation:rise 0.5s ease-out forwards;z-index:999}
        @keyframes rise{to{opacity:0;transform:translateY(-25px)}}
        
        /* Phase 2 スタイル */
        .phase2-container{margin-top:20px;border-top:3px solid #ff6b9d;padding-top:20px}
        .phase2-header{text-align:center;margin-bottom:20px}
        .phase2-header h2{color:#ff6b9d;font-size:1.5rem;text-shadow:0 0 20px rgba(255,107,157,0.5)}
        
        .empire-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
        .emp-stat{background:linear-gradient(145deg,#1a1a2e,#0a0a1a);padding:15px;border-radius:10px;text-align:center;border:1px solid #333}
        .emp-stat-value{font-size:1.5rem;font-weight:700;color:#f1c40f}
        .emp-stat-label{font-size:0.75rem;color:#888;margin-top:5px}
        
        .stores-list{display:flex;flex-direction:column;gap:10px;margin-bottom:15px}
        .store-card{background:#111;border:1px solid #333;border-radius:10px;padding:12px;display:flex;justify-content:space-between;align-items:center}
        .store-card.flagship{border-color:#f1c40f;background:linear-gradient(145deg,#1a1a0a,#0a0a00)}
        .store-info{flex:1}
        .store-name{font-weight:700;font-size:0.95rem;margin-bottom:3px}
        .store-location{font-size:0.8rem;color:#888}
        .store-stats{font-size:0.75rem;color:#00d4ff}
        .store-revenue{text-align:right}
        .store-revenue-value{font-size:1.1rem;font-weight:700;color:#2ecc71}
        .store-revenue-label{font-size:0.7rem;color:#888}
        
        .open-store-btn{width:100%;padding:15px;background:linear-gradient(145deg,#2ecc71,#27ae60);border:none;border-radius:10px;color:#fff;font-size:1rem;font-weight:700;cursor:pointer;transition:all 0.2s}
        .open-store-btn:hover:not(:disabled){transform:scale(1.02);box-shadow:0 0 20px rgba(46,204,113,0.4)}
        .open-store-btn:disabled{opacity:0.5;cursor:not-allowed}
        
        .areas-list{display:flex;flex-direction:column;gap:8px}
        .area-card{display:flex;justify-content:space-between;align-items:center;padding:12px;background:#111;border:1px solid #333;border-radius:8px;cursor:pointer;transition:all 0.2s}
        .area-card:hover:not(.locked):not(.owned){border-color:#ff6b9d}
        .area-card.locked{opacity:0.5;cursor:not-allowed}
        .area-card.owned{border-color:#2ecc71;background:#0a1a0a}
        .area-info{flex:1}
        .area-name{font-weight:700;font-size:0.9rem}
        .area-desc{font-size:0.75rem;color:#888}
        .area-bonus{font-size:0.75rem;color:#f1c40f}
        .area-cost{font-weight:700;color:#f1c40f}
        .area-status{font-size:0.8rem;color:#2ecc71}
        
        .menu-list{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
        .menu-card{background:#111;border:1px solid #333;border-radius:8px;padding:12px;text-align:center;cursor:pointer;transition:all 0.2s}
        .menu-card:hover:not(.locked):not(.owned){border-color:#ff6b9d}
        .menu-card.locked{opacity:0.4;cursor:not-allowed}
        .menu-card.owned{border-color:#9b59b6;background:#1a0a1a}
        .menu-icon{font-size:2rem;margin-bottom:5px}
        .menu-name{font-weight:700;font-size:0.85rem;margin-bottom:3px}
        .menu-effect{font-size:0.7rem;color:#00d4ff}
        .menu-cost{font-size:0.8rem;color:#f1c40f;margin-top:5px}
        
        .rivals-list{display:flex;flex-direction:column;gap:10px}
        .rival-card{background:#111;border:1px solid #333;border-radius:10px;padding:12px;display:flex;align-items:center;gap:12px}
        .rival-icon{font-size:2rem}
        .rival-info{flex:1}
        .rival-name{font-weight:700;font-size:0.95rem}
        .rival-stores{font-size:0.8rem;color:#888}
        .rival-bar{height:6px;background:#333;border-radius:3px;margin-top:5px;overflow:hidden}
        .rival-bar-fill{height:100%;border-radius:3px;transition:width 0.5s}
        .rival-status{text-align:right;font-size:0.8rem}
        
        /* Phase 2 新デザイン */
        .area-map{display:flex;flex-direction:column;gap:12px}
        .area-row{background:#111;border:2px solid #333;border-radius:12px;padding:15px;transition:all 0.3s}
        .area-row.controlled{border-color:#2ecc71;background:linear-gradient(135deg,#0a1a0a,#111)}
        .area-row.contested{border-color:#f39c12;background:linear-gradient(135deg,#1a1500,#111)}
        .area-row.enemy{border-color:#e74c3c;background:linear-gradient(135deg,#1a0a0a,#111)}
        .area-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
        .area-name{font-size:1.1rem;font-weight:700}
        .area-bonus{font-size:0.8rem;color:#f1c40f}
        .area-control-bar{height:24px;background:#222;border-radius:12px;overflow:hidden;display:flex;margin-bottom:8px}
        .area-control-segment{height:100%;transition:width 0.5s;display:flex;align-items:center;justify-content:center;font-size:0.7rem;font-weight:700;color:#fff;text-shadow:1px 1px 2px #000}
        .area-stores{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:10px}
        .area-store{padding:4px 10px;background:#222;border-radius:4px;font-size:0.75rem}
        .area-store.mine{background:#1a4a1a;color:#2ecc71}
        .area-store.rival{background:#4a1a1a;color:#e74c3c}
        .area-actions{display:flex;gap:8px;flex-wrap:wrap}
        .area-btn{padding:8px 14px;border:none;border-radius:6px;font-size:0.8rem;cursor:pointer;transition:all 0.2s}
        .area-btn:disabled{opacity:0.4;cursor:not-allowed}
        .area-btn.expand{background:#2ecc71;color:#fff}
        .area-btn.expand:hover:not(:disabled){background:#27ae60}
        .area-btn.attack{background:#e74c3c;color:#fff}
        .area-btn.attack:hover:not(:disabled){background:#c0392b}
        .area-btn.unlock{background:#3498db;color:#fff}
        .area-btn.unlock:hover:not(:disabled){background:#2980b9}
        
        .battle-log{max-height:150px;overflow-y:auto;background:#0a0a0a;border-radius:8px;padding:10px}
        .battle-msg{padding:6px 0;border-bottom:1px solid #222;font-size:0.85rem}
        .battle-msg:last-child{border-bottom:none}
        .battle-msg.good{color:#2ecc71}
        .battle-msg.bad{color:#e74c3c}
        .battle-msg.neutral{color:#f39c12}
        .battle-msg .time{color:#666;font-size:0.75rem;margin-right:8px}
        
        .diplomacy-panel{display:flex;flex-direction:column;gap:12px}
        .diplo-card{background:#111;border:2px solid #333;border-radius:10px;padding:15px}
        .diplo-card.allied{border-color:#3498db}
        .diplo-card.hostile{border-color:#e74c3c}
        .diplo-card.acquired{border-color:#9b59b6;opacity:0.6}
        .diplo-header{display:flex;align-items:center;gap:12px;margin-bottom:12px}
        .diplo-icon{font-size:2rem}
        .diplo-info{flex:1}
        .diplo-name{font-weight:700;font-size:1rem}
        .diplo-status{font-size:0.8rem}
        .diplo-status.hostile{color:#e74c3c}
        .diplo-status.allied{color:#3498db}
        .diplo-status.acquired{color:#9b59b6}
        .diplo-stats{display:flex;gap:15px;font-size:0.8rem;color:#888;margin-bottom:12px}
        .diplo-actions{display:flex;gap:8px;flex-wrap:wrap}
        .diplo-btn{padding:8px 14px;border:none;border-radius:6px;font-size:0.8rem;cursor:pointer}
        .diplo-btn:disabled{opacity:0.4;cursor:not-allowed}
        .diplo-btn.ally{background:#3498db;color:#fff}
        .diplo-btn.acquire{background:#9b59b6;color:#fff}
        .diplo-btn.break{background:#e74c3c;color:#fff}
        
        .victory-conditions{display:flex;flex-direction:column;gap:8px}
        .victory-item{display:flex;align-items:center;gap:12px;padding:12px;background:#111;border-radius:8px;border:1px solid #333}
        .victory-item.achieved{border-color:#f1c40f;background:linear-gradient(135deg,#1a1800,#111)}
        .victory-icon{font-size:1.5rem}
        .victory-text{flex:1;font-size:0.9rem}
        .victory-status{font-size:0.85rem;color:#888}
        .victory-item.achieved .victory-status{color:#f1c40f}
        
        /* Phase 3 スタイル */
        .phase3-container{display:none}
        .phase3-header{text-align:center;padding:20px;background:linear-gradient(135deg,#1a0a2e,#0a1628);border-radius:15px;margin-bottom:20px;border:2px solid #4a2c7a}
        .phase3-header h2{font-size:1.5rem;background:linear-gradient(90deg,#a855f7,#3b82f6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:5px}
        
        .global-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:15px}
        .g-stat{background:#111;border-radius:10px;padding:15px;text-align:center;border:1px solid #333}
        .g-stat-value{font-size:1.4rem;font-weight:700}
        .g-stat-value.money{color:#f1c40f}
        .g-stat-value.influence{color:#a855f7}
        .g-stat-value.research{color:#3b82f6}
        .g-stat-label{font-size:0.75rem;color:#888;margin-top:4px}
        
        .hq-summary{background:linear-gradient(135deg,#1a1a0a,#111);border:2px solid #5a5a2a;border-radius:12px;padding:15px;margin-bottom:15px;cursor:pointer}
        .hq-summary:hover{border-color:#8a8a4a}
        .hq-row{display:flex;justify-content:space-between;align-items:center}
        .hq-title{font-size:1rem;font-weight:700}
        .hq-stats{display:flex;gap:15px;font-size:0.85rem;color:#aaa}
        .hq-revenue{color:#2ecc71;font-weight:700}
        
        .world-map{display:flex;flex-direction:column;gap:10px}
        .continent{background:#111;border:2px solid #333;border-radius:12px;padding:15px;transition:all 0.3s}
        .continent.unlocked{border-color:#3b82f6}
        .continent.dominated{border-color:#2ecc71;background:linear-gradient(135deg,#0a1a0a,#111)}
        .continent-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
        .continent-name{font-size:1.1rem;font-weight:700}
        .continent-share{font-size:0.9rem}
        .continent-bar{height:20px;background:#222;border-radius:10px;overflow:hidden;margin-bottom:10px}
        .continent-fill{height:100%;border-radius:10px;transition:width 0.5s}
        .continent-actions{display:flex;gap:8px;flex-wrap:wrap}
        .continent-btn{padding:8px 14px;border:none;border-radius:6px;font-size:0.8rem;cursor:pointer}
        .continent-btn:disabled{opacity:0.4;cursor:not-allowed}
        .continent-btn.expand{background:#3b82f6;color:#fff}
        .continent-btn.locked{background:#333;color:#888}
        
        .stock-market{display:flex;flex-direction:column;gap:10px}
        .stock-row{background:#111;border:1px solid #333;border-radius:10px;padding:12px;display:flex;justify-content:space-between;align-items:center}
        .stock-info{flex:1}
        .stock-name{font-weight:700;font-size:0.95rem}
        .stock-price{font-size:0.85rem;margin-top:2px}
        .stock-price.up{color:#2ecc71}
        .stock-price.down{color:#e74c3c}
        .stock-holding{font-size:0.8rem;color:#888}
        .stock-actions{display:flex;gap:6px}
        .stock-btn{padding:6px 12px;border:none;border-radius:4px;font-size:0.75rem;cursor:pointer}
        .stock-btn.buy{background:#2ecc71;color:#fff}
        .stock-btn.sell{background:#e74c3c;color:#fff}
        .stock-btn.short{background:#9b59b6;color:#fff}
        
        .ma-targets{display:flex;flex-direction:column;gap:12px}
        .ma-card{background:#111;border:2px solid #333;border-radius:12px;padding:15px}
        .ma-card.owned{border-color:#f1c40f;background:linear-gradient(135deg,#1a1800,#111)}
        .ma-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
        .ma-name{font-size:1rem;font-weight:700}
        .ma-cap{font-size:0.85rem;color:#888}
        .ma-effect{font-size:0.85rem;color:#3b82f6;margin-bottom:10px}
        .ma-progress{margin-bottom:10px}
        .ma-progress-bar{height:8px;background:#222;border-radius:4px;overflow:hidden}
        .ma-progress-fill{height:100%;background:#f1c40f;border-radius:4px;transition:width 0.3s}
        .ma-actions{display:flex;gap:8px;flex-wrap:wrap}
        .ma-btn{padding:8px 14px;border:none;border-radius:6px;font-size:0.8rem;cursor:pointer}
        .ma-btn:disabled{opacity:0.4;cursor:not-allowed}
        .ma-btn.friendly{background:#2ecc71;color:#fff}
        .ma-btn.hostile{background:#e74c3c;color:#fff}
        .ma-btn.stock{background:#3b82f6;color:#fff}
        
        .politics-panel{background:#111;border-radius:12px;padding:15px}
        .politics-control{margin-bottom:15px}
        .politics-bar{height:24px;background:#222;border-radius:12px;overflow:hidden;margin-top:8px}
        .politics-fill{height:100%;background:linear-gradient(90deg,#e74c3c,#f39c12);border-radius:12px;transition:width 0.5s;display:flex;align-items:center;justify-content:center;font-size:0.8rem;font-weight:700}
        .bribe-options{display:flex;flex-direction:column;gap:8px;margin-bottom:15px}
        .bribe-btn{padding:10px 15px;background:#1a1a1a;border:1px solid #333;border-radius:8px;cursor:pointer;display:flex;justify-content:space-between;align-items:center}
        .bribe-btn:hover:not(:disabled){border-color:#e74c3c}
        .bribe-btn:disabled{opacity:0.4;cursor:not-allowed}
        .bills-list{display:flex;flex-direction:column;gap:8px}
        .bill-item{padding:10px;background:#1a1a1a;border:1px solid #333;border-radius:8px;display:flex;justify-content:space-between;align-items:center}
        .bill-item.passed{border-color:#2ecc71;background:linear-gradient(135deg,#0a1a0a,#1a1a1a)}
        .bill-info{flex:1}
        .bill-name{font-weight:700;font-size:0.9rem}
        .bill-effect{font-size:0.8rem;color:#3b82f6}
        .bill-require{font-size:0.8rem;color:#888}
        .bill-btn{padding:6px 12px;background:#e74c3c;border:none;border-radius:4px;color:#fff;font-size:0.8rem;cursor:pointer}
        .bill-btn:disabled{opacity:0.4;cursor:not-allowed}
        
        .vip-casino{background:linear-gradient(135deg,#1a0a0a,#0a0a1a);border:2px solid #8b4513;border-radius:15px;padding:20px}
        .vip-header{text-align:center;margin-bottom:20px}
        .vip-header h3{color:#ffd700;font-size:1.3rem}
        .vip-games{display:flex;flex-direction:column;gap:15px}
        .vip-game{background:#111;border:1px solid #333;border-radius:10px;padding:15px;cursor:pointer;transition:all 0.3s}
        .vip-game:hover{border-color:#ffd700}
        .vip-game-name{font-size:1.1rem;font-weight:700;margin-bottom:5px}
        .vip-game-desc{font-size:0.85rem;color:#888}
        
        .roulette-board{text-align:center;padding:20px}
        .roulette-result{font-size:3rem;margin:20px 0;padding:20px;background:#222;border-radius:50%;width:100px;height:100px;display:flex;align-items:center;justify-content:center;margin:20px auto}
        .roulette-result.red{background:#e74c3c}
        .roulette-result.black{background:#1a1a1a;border:2px solid #333}
        .roulette-result.green{background:#2ecc71}
        .bet-options{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:15px 0}
        .bet-btn{padding:10px 20px;border:2px solid #333;border-radius:8px;background:#111;color:#fff;cursor:pointer;font-size:0.9rem}
        .bet-btn:hover{border-color:#ffd700}
        .bet-btn.selected{border-color:#ffd700;background:#2a2a0a}
        .bet-btn.red{border-color:#e74c3c}
        .bet-btn.black{border-color:#666}
        .bet-btn.green{border-color:#2ecc71}
        .bet-amount{display:flex;align-items:center;justify-content:center;gap:10px;margin:15px 0}
        .bet-amount button{padding:8px 15px;border:none;border-radius:5px;background:#333;color:#fff;cursor:pointer}
        .bet-amount span{font-size:1.2rem;font-weight:700;color:#ffd700;min-width:150px}
        .spin-btn{padding:15px 40px;font-size:1.2rem;background:linear-gradient(135deg,#ffd700,#ff8c00);border:none;border-radius:10px;color:#000;font-weight:700;cursor:pointer}
        .spin-btn:disabled{opacity:0.5;cursor:not-allowed}
        
        .achievements{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
        .achievement{background:#111;border:1px solid #333;border-radius:8px;padding:12px;text-align:center}
        .achievement.unlocked{border-color:#ffd700;background:linear-gradient(135deg,#1a1800,#111)}
        .achievement.locked{opacity:0.5}
        .achievement-icon{font-size:2rem;margin-bottom:5px}
        .achievement-name{font-size:0.85rem;font-weight:700}
        .achievement-desc{font-size:0.75rem;color:#888;margin-top:4px}
        
        /* 折りたたみセクション */
        .collapsible{cursor:pointer;user-select:none}
        .collapsible::after{content:'';font-size:0.8rem;opacity:0.5}
        .collapsible.collapsed::after{content:''}
        .collapse-content{overflow:hidden;transition:max-height 0.3s ease-out}
        .collapse-content.collapsed{max-height:0 !important}
        
        /* Phase3タブ式コンテンツ */
        .p3-content{overflow:hidden;transition:all 0.3s ease-out}
        .section-title.collapsible{display:flex;justify-content:space-between;align-items:center}
        .section-title.collapsible:hover{background:rgba(255,255,255,0.05)}
        
        /* 研究ツリー */
        .research-tree{display:flex;flex-direction:column;gap:12px}
        .research-item{background:#111;border:2px solid #333;border-radius:10px;padding:15px;position:relative}
        .research-item.unlocked{border-color:#3b82f6;background:linear-gradient(135deg,#0a1020,#111)}
        .research-item.completed{border-color:#2ecc71;background:linear-gradient(135deg,#0a200a,#111)}
        .research-item.locked{opacity:0.5}
        .research-header{display:flex;justify-content:space-between;align-items:center}
        .research-name{font-weight:700;font-size:0.95rem}
        .research-cost{font-size:0.85rem;color:#3b82f6}
        .research-desc{font-size:0.85rem;color:#888;margin:8px 0}
        .research-effect{font-size:0.8rem;color:#2ecc71}
        .research-progress{height:6px;background:#222;border-radius:3px;margin-top:8px;overflow:hidden}
        .research-progress-fill{height:100%;background:#3b82f6;border-radius:3px;transition:width 0.3s}
        .research-btn{padding:8px 16px;background:#3b82f6;border:none;border-radius:6px;color:#fff;font-size:0.85rem;cursor:pointer;margin-top:10px}
        .research-btn:disabled{opacity:0.4;cursor:not-allowed}
        
        /* Phase 3でPhase 1-2を非表示 */
        .phase3-active .phase1-section{display:none !important}
        .phase3-active .phase2-container{display:none !important}
        .phase3-active .phase2Teaser{display:none !important}
        .phase3-active .phase3Teaser{display:none !important}
        
        @keyframes fadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}


/* ========================================
   2. 商業レベルUI上書き (フェーズ1〜3)
   これらは元のスタイルを上書きするため
   ファイル末尾に配置 = 同じ詳細度なら後勝ち
   ======================================== */


:root {
    /* 色: タピオカミルクティーの色相をベースに */
    --bg-base: #0d0a0c;
    --bg-elevated: #1a1416;
    --bg-card: #15101280;
    --bg-card-solid: #1a1518;
    --border-subtle: rgba(255, 255, 255, 0.06);
    --border-default: rgba(255, 107, 157, 0.15);
    --border-emphasis: rgba(255, 107, 157, 0.35);
    
    /* テキスト */
    --text-primary: #f0e8ec;
    --text-secondary: #a89ca0;
    --text-tertiary: #6a5e64;
    --text-muted: #4a4044;
    
    /* アクセント色 */
    --pink: #ff6b9d;
    --pink-light: #ffb3d1;
    --pink-deep: #c44569;
    --pink-glow: rgba(255, 107, 157, 0.3);
    
    /* お金は琥珀色寄り */
    --gold: #e8b04e;
    --gold-light: #f4d28a;
    --gold-deep: #a87a2e;
    --gold-glow: rgba(232, 176, 78, 0.25);
    
    /* 状態 */
    --success: #4ade80;
    --warning: #fb923c;
    --danger: #ef4444;
    --info: #60a5fa;
    
    /* シャドウ・光 */
    --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.4);
    --glow-pink: 0 0 40px var(--pink-glow);
    --glow-gold: 0 0 30px var(--gold-glow);
}

/* ===== 全体基盤 ===== */
body {
    font-family: 'Zen Maru Gothic', sans-serif;
    background: var(--bg-base);
    background-image:
        radial-gradient(ellipse at 20% 0%, rgba(255, 107, 157, 0.06), transparent 50%),
        radial-gradient(ellipse at 80% 100%, rgba(108, 80, 200, 0.05), transparent 50%);
    background-attachment: fixed;
    color: var(--text-primary);
    min-height: 100vh;
    padding: 16px;
}

.container {
    max-width: 600px;
    margin: 0 auto;
}

/* ===== タイトルロゴ ===== */
h1 {
    text-align: center;
    margin: 8px 0 18px;
    line-height: 1;
    position: relative;
}

/* 元のh1テキストを置き換えるトリック: JSで構造を入れ替えなくても、
   既存の "🧋 タピオカ帝国" テキストを綺麗に見せる */
h1 {
    font-size: 2.2rem;
    font-weight: 900;
    letter-spacing: 0.03em;
    background: linear-gradient(135deg, #fff5fa 0%, #ffb3d1 30%, #ff6b9d 70%, #c44569 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 2px 20px rgba(255, 107, 157, 0.25));
    animation: titleFloat 5s ease-in-out infinite;
}

@keyframes titleFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

/* タイトル下のサブタイトル (h1 の after で出す) */
h1::after {
    content: 'TAPIOCA EMPIRE';
    display: block;
    margin-top: 2px;
    font-size: 0.65rem;
    font-weight: 400;
    letter-spacing: 0.5em;
    color: var(--text-tertiary);
    -webkit-text-fill-color: var(--text-tertiary);
    background: none;
    filter: none;
    animation: none;
    padding-left: 0.5em; /* letter-spacing 補正 */
}

/* ===== ヘッダーボタン群 ===== */
.header-btns {
    display: flex !important;
    gap: 6px !important;
    justify-content: center !important;
    margin-bottom: 14px !important;
    flex-wrap: wrap !important;
}

.header-btns button {
    padding: 7px 12px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 8px !important;
    color: var(--text-secondary) !important;
    cursor: pointer;
    font-size: 0.78rem !important;
    font-family: inherit;
    transition: all 0.15s ease;
}

.header-btns button:hover {
    background: rgba(255, 107, 157, 0.08) !important;
    border-color: var(--border-emphasis) !important;
    color: var(--text-primary) !important;
}

/* ===== メイン統計カード (所持金主役) ===== */
.main-stats {
    background: linear-gradient(135deg, rgba(26, 20, 22, 0.9), rgba(20, 16, 22, 0.9));
    border: 1px solid var(--border-default);
    border-radius: 16px;
    padding: 18px;
    margin-bottom: 14px;
    box-shadow: var(--shadow-card);
    position: relative;
    overflow: hidden;
}

.main-stats::before {
    content: '';
    position: absolute;
    top: 0; right: -40%;
    width: 80%; height: 100%;
    background: radial-gradient(ellipse, var(--gold-glow), transparent 60%);
    pointer-events: none;
    opacity: 0.5;
}

/* 元の stat-row 構造を維持しつつ、所持金の行を主役化 */
.stat-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 4px 0;
    font-size: 0.92rem;
    position: relative;
}

.stat-label {
    color: var(--text-tertiary);
    font-size: 0.78rem;
    letter-spacing: 0.05em;
}

.stat-value {
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.stat-value.money {
    color: var(--gold);
}

/* 所持金行(.funds-rowクラス)を主役にする */
.stat-row.funds-row {
    padding: 12px 0 14px;
    margin: 4px 0 8px;
    border-top: 1px dashed var(--border-subtle);
    border-bottom: 1px dashed var(--border-subtle);
}

.stat-row.funds-row .stat-label {
    font-size: 0.7rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    align-self: center;
}

.stat-row.funds-row #funds {
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--gold) !important;
    text-shadow: 0 0 20px var(--gold-glow);
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

/* ===== セクション (販売、製造など) ===== */
.section {
    background: var(--bg-card-solid);
    background-image: linear-gradient(135deg, rgba(255,255,255,0.02), transparent);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 14px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.section-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--pink);
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-subtle);
    letter-spacing: 0.03em;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* セクションタイトルの左にアクセントバー */
.section-title::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 14px;
    background: linear-gradient(180deg, var(--pink-light), var(--pink-deep));
    border-radius: 2px;
}

/* ===== 製造ボタン (主役) ===== */
.make-row {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 0;
}

.make-btn {
    width: 110px !important;
    height: 110px !important;
    border-radius: 50%;
    background: 
        radial-gradient(circle at 32% 30%, #d4a673 0%, #6a4220 40%, #2a1505 90%) !important;
    border: 4px solid #4a2818 !important;
    font-size: 3rem !important;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: 
        0 0 30px var(--pink-glow),
        0 0 50px rgba(255, 107, 157, 0.1),
        inset 0 -12px 24px rgba(0, 0, 0, 0.5),
        inset 0 6px 16px rgba(255, 200, 150, 0.15);
    transition: transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.12s ease;
    position: relative;
}

.make-btn:hover {
    transform: scale(1.04) !important;
    box-shadow: 
        0 0 40px var(--pink-glow),
        0 0 70px rgba(255, 107, 157, 0.15),
        inset 0 -12px 24px rgba(0, 0, 0, 0.5),
        inset 0 6px 16px rgba(255, 200, 150, 0.2);
}

.make-btn:active {
    transform: scale(0.92) !important;
    box-shadow: 
        0 0 50px rgba(255, 107, 157, 0.5),
        inset 0 -8px 18px rgba(0, 0, 0, 0.6);
}

.make-info {
    flex: 1;
}

.make-info div {
    margin-bottom: 6px;
    font-size: 0.88rem;
    color: var(--text-secondary);
}

.make-info span {
    color: var(--pink-light);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ===== 数字に等幅 (どこでも) ===== */
#clips, #totalRevenue, #funds, #unsold, #perClick, #autoRate {
    font-variant-numeric: tabular-nums;
}



/* ============================================================
   レイヤー2: 商業レベルUI上書き (フェーズ1〜3)
   このレイヤーは元のスタイルを上書きするため末尾に配置
   ============================================================ */

/* クリック時の "+1" ポップ - メイン */
.click-fx-v2 {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    font-weight: 900;
    font-size: 1.4rem;
    color: var(--pink-light);
    text-shadow:
        0 0 8px rgba(255, 107, 157, 0.8),
        0 0 16px rgba(255, 107, 157, 0.5),
        0 2px 4px rgba(0, 0, 0, 0.8);
    animation: clickPopMain 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    will-change: transform, opacity;
    font-variant-numeric: tabular-nums;
}

@keyframes clickPopMain {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }
    20% {
        opacity: 1;
        transform: translate(-50%, -60%) scale(1.2);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -200%) scale(1);
    }
}

/* クリック時の粒子 - 周囲に飛び散る */
.click-particle {
    position: fixed;
    pointer-events: none;
    z-index: 9998;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pink);
    box-shadow: 0 0 12px var(--pink-glow);
    animation: particleFly 0.6s ease-out forwards;
    will-change: transform, opacity;
}

@keyframes particleFly {
    0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.2); }
}

/* 製造ボタンが押された瞬間に脈打つリング */
.make-btn::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 110px; height: 110px;
    margin: -55px 0 0 -55px;
    border-radius: 50%;
    border: 3px solid var(--pink);
    opacity: 0;
    pointer-events: none;
}

.make-btn.pulse::after {
    animation: btnPulseRing 0.5s ease-out;
}

@keyframes btnPulseRing {
    0% { opacity: 0.8; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.8); }
}

/* 製造ボタンを position: relative にして ::after が効くように */
.make-btn {
    position: relative;
}

/* お金カウントアップ用 - 数字が変わる時に金色フラッシュ */
.funds-flash {
    animation: fundsFlash 0.4s ease-out;
}

@keyframes fundsFlash {
    0% { text-shadow: 0 0 20px var(--gold-glow); }
    50% { 
        text-shadow: 
            0 0 30px rgba(232, 176, 78, 0.8),
            0 0 60px rgba(232, 176, 78, 0.4); 
        transform: scale(1.03);
    }
    100% { text-shadow: 0 0 20px var(--gold-glow); transform: scale(1); }
}

/* 支払い時の赤フラッシュ (購入成功) */
.funds-spent {
    animation: fundsSpent 0.5s ease-out;
}

@keyframes fundsSpent {
    0% { color: var(--gold); }
    30% { 
        color: var(--danger);
        text-shadow: 0 0 30px rgba(239, 68, 68, 0.7);
        transform: scale(0.96);
    }
    100% { color: var(--gold); transform: scale(1); }
}

/* 購入成功時のトースト */
.purchase-toast {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    padding: 8px 18px;
    border-radius: 24px;
    background: rgba(74, 222, 128, 0.15);
    border: 1px solid rgba(74, 222, 128, 0.5);
    color: var(--success);
    font-weight: 700;
    font-size: 0.85rem;
    box-shadow: 0 0 20px rgba(74, 222, 128, 0.3);
    backdrop-filter: blur(8px);
    animation: purchaseToast 1.2s ease-out forwards;
    white-space: nowrap;
}

@keyframes purchaseToast {
    0% { opacity: 0; transform: translate(-50%, 10px) scale(0.8); }
    15% { opacity: 1; transform: translate(-50%, 0) scale(1); }
    80% { opacity: 1; transform: translate(-50%, -10px) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -25px) scale(1); }
}

/* マイルストーン演出 - 累計売上の壁を越えた時 */
.milestone-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 10000;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: milestoneFade 3s ease-out forwards;
}

@keyframes milestoneFade {
    0% { opacity: 0; backdrop-filter: blur(0px); }
    10% { opacity: 1; backdrop-filter: blur(4px); background: rgba(0,0,0,0.3); }
    80% { opacity: 1; backdrop-filter: blur(4px); background: rgba(0,0,0,0.3); }
    100% { opacity: 0; backdrop-filter: blur(0px); background: rgba(0,0,0,0); }
}

.milestone-card {
    text-align: center;
    padding: 30px 50px;
    background: linear-gradient(135deg, rgba(232, 176, 78, 0.15), rgba(255, 107, 157, 0.1));
    border: 2px solid var(--gold);
    border-radius: 20px;
    box-shadow: 
        0 0 60px var(--gold-glow),
        0 0 120px rgba(232, 176, 78, 0.2),
        inset 0 0 30px rgba(255, 215, 100, 0.1);
    animation: milestoneCard 3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    backdrop-filter: blur(12px);
}

@keyframes milestoneCard {
    0% { opacity: 0; transform: scale(0.5) translateY(40px); }
    15% { opacity: 1; transform: scale(1.1) translateY(0); }
    25% { transform: scale(1) translateY(0); }
    80% { opacity: 1; transform: scale(1) translateY(0); }
    100% { opacity: 0; transform: scale(0.95) translateY(-20px); }
}

.milestone-stars {
    font-size: 1.2rem;
    letter-spacing: 0.5em;
    margin-bottom: 10px;
    animation: starsTwinkle 1.5s ease-in-out infinite;
}

@keyframes starsTwinkle {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

.milestone-title {
    font-size: 2rem;
    font-weight: 900;
    background: linear-gradient(135deg, #fff5d6, var(--gold), var(--gold-deep));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 0.05em;
    line-height: 1.2;
    margin-bottom: 6px;
}

.milestone-subtitle {
    font-size: 0.85rem;
    color: var(--gold-light);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    opacity: 0.8;
}

/* ========================================
   Phase 移行ドラマ演出 (フェーズ3)
   ======================================== */
.phase-transition {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 10001;
    pointer-events: none;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    --pt-primary: #ff6b9d;
    --pt-secondary: #c44569;
    --pt-light: #ffb3d1;
}

.pt-bg {
    position: absolute; inset: 0;
    background: 
        radial-gradient(ellipse at center, var(--pt-primary), transparent 70%),
        linear-gradient(135deg, var(--pt-secondary), #0a0608);
    opacity: 0;
    animation: ptBgIn 3.5s ease-out forwards;
}

@keyframes ptBgIn {
    0% { opacity: 0; transform: scale(0.6); }
    20% { opacity: 0.85; transform: scale(1); }
    80% { opacity: 0.85; }
    100% { opacity: 0.5; }
}

.pt-flash {
    position: absolute; inset: 0;
    background: white;
    opacity: 0;
    animation: ptFlash 0.6s ease-out;
}

@keyframes ptFlash {
    0% { opacity: 0; }
    10% { opacity: 0.7; }
    100% { opacity: 0; }
}

.pt-content {
    position: relative;
    text-align: center;
    z-index: 2;
    padding: 30px;
    opacity: 0;
    animation: ptContentIn 1s ease-out 0.3s forwards;
}

@keyframes ptContentIn {
    0% { opacity: 0; transform: translateY(30px); }
    100% { opacity: 1; transform: translateY(0); }
}

.pt-kicker {
    font-size: 0.75rem;
    letter-spacing: 0.6em;
    color: var(--pt-light);
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 16px;
    padding-left: 0.6em;
    opacity: 0.9;
    animation: ptKickerSlide 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.5s backwards;
}

@keyframes ptKickerSlide {
    0% { opacity: 0; transform: translateX(-20px); letter-spacing: 0.3em; }
    100% { opacity: 0.9; transform: translateX(0); letter-spacing: 0.6em; }
}

.pt-title {
    font-size: 3rem;
    font-weight: 900;
    line-height: 1.1;
    color: #fff;
    text-shadow: 
        0 0 30px var(--pt-primary),
        0 0 60px var(--pt-primary),
        0 4px 8px rgba(0, 0, 0, 0.5);
    letter-spacing: 0.02em;
    animation: ptTitleZoom 1.5s cubic-bezier(0.16, 1, 0.3, 1) 0.8s backwards;
    margin-bottom: 14px;
}

@keyframes ptTitleZoom {
    0% { opacity: 0; transform: scale(0.7) translateY(20px); filter: blur(8px); }
    100% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}

.pt-subtitle {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.15em;
    line-height: 1.6;
    animation: ptSubFadeIn 1s ease-out 1.5s backwards;
}

@keyframes ptSubFadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.phase-transition.pt-out {
    animation: ptOut 0.6s ease-in forwards;
}

@keyframes ptOut {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

@media (max-width: 500px) {
    .pt-title { font-size: 2.2rem; }
    .pt-kicker { font-size: 0.7rem; letter-spacing: 0.4em; padding-left: 0.4em; }
    .pt-subtitle { font-size: 0.85rem; }
}

/* ========================================
   アップグレード "買える!" 強調 (フェーズ3)
   ======================================== */
/* 買える状態のアップグレード: 静的な緑グロウ + ホバー時に右にスライド */
/* チラつき防止のためアニメ(@keyframes)は一切使わない */
.upg.affordable {
    box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.45), 0 2px 14px rgba(74, 222, 128, 0.12) !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}

.upg.affordable:hover {
    transform: translateX(3px) !important;
    box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.85), 0 2px 26px rgba(74, 222, 128, 0.32) !important;
}

.upg.disabled {
    opacity: 0.55 !important;
}

/* ========================================
   自動生産アンビエント (フェーズ3)
   ======================================== */
/* 自動生産が稼働中、製造ボタンが優しく脈打つ */
.make-btn.auto-active {
    animation: makeAmbientPulse 2.5s ease-in-out infinite !important;
}

@keyframes makeAmbientPulse {
    0%, 100% { 
        box-shadow: 
            0 0 30px var(--pink-glow), 
            0 0 50px rgba(255, 107, 157, 0.1),
            inset 0 -12px 24px rgba(0, 0, 0, 0.5),
            inset 0 6px 16px rgba(255, 200, 150, 0.15);
    }
    50% { 
        box-shadow: 
            0 0 60px rgba(255, 107, 157, 0.5), 
            0 0 100px rgba(255, 107, 157, 0.25),
            inset 0 -12px 24px rgba(0, 0, 0, 0.5),
            inset 0 6px 16px rgba(255, 200, 150, 0.2);
    }
}

/* ========================================
   フェーズ1のCSS (上で既に定義済み)
   ======================================== */


/* ============================================================
   タイトル画面(オープニング)
   ============================================================ */

.title-screen {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: 
        radial-gradient(ellipse at 30% 20%, rgba(255, 107, 157, 0.18), transparent 55%),
        radial-gradient(ellipse at 70% 80%, rgba(108, 80, 180, 0.12), transparent 60%),
        linear-gradient(180deg, #14080e 0%, #0a0608 100%);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: titleFadeIn 0.6s ease-out;
}

.title-screen.fading-out {
    animation: titleFadeOut 0.5s ease-in forwards;
    pointer-events: none;
}

@keyframes titleFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes titleFadeOut {
    from { opacity: 1; }
    to { opacity: 0; visibility: hidden; }
}

/* 落ちる粒(タピオカ?) - 背景レイヤー */
.title-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.title-particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(40, 20, 30, 0.6);
    box-shadow: 0 0 4px rgba(60, 30, 40, 0.3);
    animation-name: titleParticleFall;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes titleParticleFall {
    0% { transform: translateY(-20px); opacity: 0; }
    10% { opacity: 0.7; }
    90% { opacity: 0.7; }
    100% { transform: translateY(100vh); opacity: 0; }
}

/* 中央のコンテンツ */
.title-inner {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 30px 24px;
    max-width: 500px;
    width: 100%;
}

/* ロゴ部分 */
.title-logo {
    margin-bottom: 40px;
    animation: titleLogoIn 1s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes titleLogoIn {
    from { opacity: 0; transform: translateY(-15px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.title-logo-icon {
    font-size: 5rem;
    line-height: 1;
    margin-bottom: 16px;
    filter: drop-shadow(0 0 20px rgba(255, 107, 157, 0.5));
    animation: titleIconBobble 4s ease-in-out infinite;
    display: inline-block;
}

@keyframes titleIconBobble {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-6px) rotate(2deg); }
}

.title-logo-text {
    font-size: 3rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    line-height: 1;
    background: linear-gradient(135deg, #fff5fa 0%, #ffb3d1 30%, #ff6b9d 70%, #c44569 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 2px 24px rgba(255, 107, 157, 0.3));
    margin-bottom: 8px;
}

.title-logo-sub {
    font-size: 0.8rem;
    letter-spacing: 0.55em;
    color: rgba(255, 179, 209, 0.55);
    font-weight: 400;
    padding-left: 0.55em;
    margin-bottom: 14px;
}

/* 不気味なタグライン */
.title-logo-tagline {
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    color: rgba(180, 160, 170, 0.45);
    font-style: italic;
    margin-top: 6px;
    /* タイトル本体より遅れて、すっと現れる */
    opacity: 0;
    animation: titleTaglineIn 1.2s ease-out 1.5s forwards;
}

@keyframes titleTaglineIn {
    from { opacity: 0; letter-spacing: 0.2em; }
    to { opacity: 1; letter-spacing: 0.1em; }
}

/* メニュー */
.title-menu {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 30px;
    animation: titleMenuIn 1s cubic-bezier(0.16, 1, 0.3, 1) 0.4s backwards;
}

@keyframes titleMenuIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.title-btn {
    background: rgba(255, 107, 157, 0.06);
    border: 1px solid rgba(255, 107, 157, 0.25);
    border-radius: 12px;
    padding: 16px 24px;
    color: #f0e8ec;
    cursor: pointer;
    font-family: inherit;
    text-align: center;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.title-btn:hover {
    background: rgba(255, 107, 157, 0.15);
    border-color: rgba(255, 107, 157, 0.6);
    box-shadow: 0 0 24px rgba(255, 107, 157, 0.25);
}

.title-btn:active {
    transform: scale(0.98);
}

/* 無効状態(セーブデータがない時のContinue) */
.title-btn.disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

.title-btn-jp {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.title-btn-en {
    font-size: 0.7rem;
    letter-spacing: 0.25em;
    color: rgba(255, 179, 209, 0.5);
    margin-top: 4px;
    padding-left: 0.25em;
}

/* つづきから の小さな付加情報(周回数など) */
.title-btn-meta {
    font-size: 0.65rem;
    color: rgba(180, 160, 170, 0.4);
    letter-spacing: 0.1em;
    margin-top: 6px;
    font-family: 'SF Mono', Menlo, monospace;
}

/* フッター */
.title-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 4px;
    font-size: 0.7rem;
    opacity: 0;
    animation: titleFooterIn 0.8s ease-out 1.8s forwards;
}

@keyframes titleFooterIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.title-iter {
    color: rgba(160, 140, 150, 0.4);
    font-family: 'SF Mono', Menlo, monospace;
    letter-spacing: 0.1em;
}

.title-skip {
    background: transparent;
    border: none;
    color: rgba(200, 180, 190, 0.5);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    padding: 8px 12px;
    transition: color 0.2s ease;
}

.title-skip:hover {
    color: rgba(255, 179, 209, 0.9);
}

/* レスポンシブ */
@media (max-width: 500px) {
    .title-logo-icon { font-size: 4rem; }
    .title-logo-text { font-size: 2.2rem; }
    .title-logo-sub { font-size: 0.7rem; letter-spacing: 0.4em; }
    .title-btn-jp { font-size: 1.05rem; }
    .title-inner { padding: 20px 16px; }
}

/* ============================================================
   Phase 3: 日本掌握度バーシステム
   ============================================================ */

.domestic-control-section {
    background: linear-gradient(135deg, rgba(255, 107, 157, 0.08), rgba(168, 85, 247, 0.06)) !important;
    border: 1px solid rgba(255, 107, 157, 0.25) !important;
    border-radius: 14px !important;
    padding: 18px !important;
    margin-bottom: 16px !important;
}

.domestic-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.domestic-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 1.05rem;
    color: #f0e8ec;
    letter-spacing: 0.02em;
}

.domestic-icon {
    font-size: 1.3rem;
}

.domestic-total {
    font-size: 1.6rem;
    font-weight: 900;
    color: #ff6b9d;
    text-shadow: 0 0 16px rgba(255, 107, 157, 0.4);
    font-variant-numeric: tabular-nums;
}

.domestic-total.complete {
    color: #e8b04e;
    text-shadow: 0 0 24px rgba(232, 176, 78, 0.7);
    animation: completePulse 2s ease-in-out infinite;
}

@keyframes completePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* メインバー(日本掌握度) */
.domestic-main-bar-wrap {
    background: rgba(0, 0, 0, 0.5);
    border-radius: 6px;
    height: 12px;
    overflow: hidden;
    margin-bottom: 18px;
    position: relative;
}

.domestic-main-bar {
    height: 100%;
    background: linear-gradient(90deg, #ff6b9d, #c44569, #e8b04e);
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 0 12px rgba(255, 107, 157, 0.4);
}

/* サブバー群 */
.domestic-sub-bars {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.domestic-sub {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 10px 12px;
    transition: border-color 0.3s ease;
}

/* 一番低いバーを赤く強調(プレイヤーへの誘導) */
.domestic-sub.weakest {
    border-color: rgba(239, 68, 68, 0.4);
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.15);
}

.domestic-sub-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    margin-bottom: 4px;
    color: #ccc;
}

.domestic-sub-val {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #f0e8ec;
}

.domestic-sub-bar-wrap {
    background: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    height: 6px;
    overflow: hidden;
}

.domestic-sub-bar {
    height: 100%;
    transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.domestic-sub-bar.economic {
    background: linear-gradient(90deg, #fcd34d, #f59e0b);
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
}

.domestic-sub-bar.political {
    background: linear-gradient(90deg, #a78bfa, #7c3aed);
    box-shadow: 0 0 8px rgba(124, 58, 237, 0.4);
}

.domestic-sub-bar.public {
    background: linear-gradient(90deg, #6ee7b7, #10b981);
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
}

.domestic-sub-hint {
    font-size: 0.7rem;
    color: #888;
    margin-top: 4px;
    letter-spacing: 0.05em;
}

/* 100%達成バナー */
.domestic-complete-banner {
    margin-top: 14px;
    padding: 14px;
    background: linear-gradient(135deg, rgba(232, 176, 78, 0.15), rgba(255, 107, 157, 0.1));
    border: 1px solid rgba(232, 176, 78, 0.5);
    border-radius: 10px;
    text-align: center;
    animation: completeBannerIn 0.8s ease-out;
}

@keyframes completeBannerIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

.domestic-complete-text {
    font-size: 1.2rem;
    font-weight: 900;
    color: #e8b04e;
    text-shadow: 0 0 16px rgba(232, 176, 78, 0.6);
    margin-bottom: 4px;
}

.domestic-complete-sub {
    font-size: 0.85rem;
    color: rgba(232, 176, 78, 0.7);
    letter-spacing: 0.15em;
}

/* ============================================================
   タピオカ本位制: 通貨変化演出 (3-B)
   ============================================================ */

/* 所持金の下の「= ¥○○」補助ラベル */
.funds-sub-label {
    font-size: 0.7rem;
    color: rgba(200, 180, 160, 0.6);
    font-weight: 400;
    margin-top: 2px;
    letter-spacing: 0.05em;
    font-variant-numeric: tabular-nums;
}

/* タピオカ単位の装飾 */
.tapioca-unit {
    font-size: 0.7em;
    color: #d4a673;
    margin-left: 2px;
}
.yen-sub {
    display: block;
    font-size: 0.6rem;
    color: rgba(200, 180, 160, 0.5);
    margin-top: 1px;
}

/* 本位制発動演出オーバーレイ */
.tapioca-standard-overlay {
    position: fixed;
    inset: 0;
    z-index: 10002;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.tapioca-standard-overlay.ts-out {
    animation: tsOut 0.6s ease-in forwards;
}

@keyframes tsOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

.ts-bg {
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(ellipse at center, rgba(212, 166, 115, 0.25), transparent 60%),
        linear-gradient(135deg, #2a1505, #0a0608);
    opacity: 0;
    animation: tsBgIn 4s ease-out forwards;
}

@keyframes tsBgIn {
    0% { opacity: 0; }
    15% { opacity: 0.95; }
    85% { opacity: 0.95; }
    100% { opacity: 0.6; }
}

.ts-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 30px;
}

.ts-kicker {
    font-size: 0.7rem;
    letter-spacing: 0.6em;
    color: rgba(212, 166, 115, 0.7);
    font-weight: 700;
    margin-bottom: 24px;
    padding-left: 0.6em;
    animation: tsFadeIn 0.8s ease-out 0.3s backwards;
}

/* ¥ → 🧋 の変換アニメ */
.ts-conversion {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-bottom: 28px;
    font-size: 3.5rem;
}

.ts-yen {
    color: #fff;
    font-weight: 900;
    animation: tsYenOut 2s ease-in-out 0.5s forwards;
}

@keyframes tsYenOut {
    0% { opacity: 1; transform: scale(1); }
    60% { opacity: 1; transform: scale(1); }
    100% { opacity: 0.3; transform: scale(0.7); filter: grayscale(1); }
}

.ts-arrow {
    color: #d4a673;
    font-size: 2.5rem;
    opacity: 0;
    animation: tsArrowIn 1s ease-out 1s forwards;
}

@keyframes tsArrowIn {
    0% { opacity: 0; transform: translateX(-15px); }
    100% { opacity: 1; transform: translateX(0); }
}

.ts-tapioca {
    opacity: 0;
    animation: tsTapiocaIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) 1.4s forwards;
    filter: drop-shadow(0 0 20px rgba(212, 166, 115, 0.6));
}

@keyframes tsTapiocaIn {
    0% { opacity: 0; transform: scale(0.3) rotate(-20deg); }
    60% { opacity: 1; transform: scale(1.3) rotate(8deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
}

.ts-title {
    font-size: 2.2rem;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 0 30px rgba(212, 166, 115, 0.6), 0 2px 8px rgba(0,0,0,0.6);
    margin-bottom: 12px;
    letter-spacing: 0.03em;
    animation: tsTitleIn 1.5s cubic-bezier(0.16, 1, 0.3, 1) 1.8s backwards;
}

@keyframes tsTitleIn {
    0% { opacity: 0; transform: scale(0.8) translateY(15px); filter: blur(6px); }
    100% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}

.ts-subtitle {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.8);
    letter-spacing: 0.1em;
    margin-bottom: 18px;
    animation: tsFadeIn 1s ease-out 2.3s backwards;
}

.ts-rate {
    display: inline-block;
    font-size: 0.85rem;
    color: #d4a673;
    border: 1px solid rgba(212, 166, 115, 0.4);
    border-radius: 20px;
    padding: 6px 18px;
    letter-spacing: 0.1em;
    font-variant-numeric: tabular-nums;
    animation: tsFadeIn 1s ease-out 2.6s backwards;
}

@keyframes tsFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (max-width: 500px) {
    .ts-conversion { font-size: 2.5rem; gap: 16px; }
    .ts-title { font-size: 1.7rem; }
    .ts-subtitle { font-size: 0.85rem; }
}

/* ============================================================
   演出オーバーレイのクリック透過を強制
   (クリックできない問題の対策: オーバーレイが画面を覆っても
    クリックは下のUIに通す)
   ============================================================ */
.phase-transition,
.phase-transition *,
.tapioca-standard-overlay,
.tapioca-standard-overlay *,
.milestone-overlay,
.milestone-overlay * {
    pointer-events: none !important;
}

/* タピオカ本位制: 所持金の「タピオカ」単位ラベル */
.funds-unit-label {
    font-size: 0.9rem;
    color: #d4a673;
    font-weight: 700;
    margin-left: 4px;
    letter-spacing: 0.02em;
}

/* ============================================================
   法案通過の瞬間演出 (3-C)
   ============================================================ */
.bill-passed-overlay {
    position: fixed;
    inset: 0;
    z-index: 10001;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: bpFade 2.6s ease-out;
}

.bill-passed-overlay.bp-out {
    animation: bpOut 0.4s ease-in forwards;
}

@keyframes bpFade {
    0% { background: rgba(0,0,0,0); }
    12% { background: rgba(0,0,0,0.45); }
    85% { background: rgba(0,0,0,0.45); }
    100% { background: rgba(0,0,0,0); }
}

@keyframes bpOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

.bp-card {
    position: relative;
    text-align: center;
    padding: 30px 50px;
    background: rgba(20, 16, 18, 0.9);
    border: 2px solid var(--bp-color, #6ee7b7);
    border-radius: 16px;
    box-shadow: 0 0 50px color-mix(in srgb, var(--bp-color, #6ee7b7) 30%, transparent);
    backdrop-filter: blur(8px);
    animation: bpCardIn 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes bpCardIn {
    0% { opacity: 0; transform: scale(0.8) translateY(20px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* 「可決」スタンプ - 斜めにドンと押される */
.bp-stamp {
    display: inline-block;
    font-size: 2.4rem;
    font-weight: 900;
    color: var(--bp-color, #6ee7b7);
    border: 4px solid var(--bp-color, #6ee7b7);
    border-radius: 12px;
    padding: 4px 24px;
    letter-spacing: 0.15em;
    margin-bottom: 16px;
    transform: rotate(-8deg);
    animation: bpStampIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s backwards;
    text-shadow: 0 0 20px color-mix(in srgb, var(--bp-color, #6ee7b7) 50%, transparent);
}

@keyframes bpStampIn {
    0% { opacity: 0; transform: rotate(-8deg) scale(2.5); }
    60% { opacity: 1; transform: rotate(-8deg) scale(0.9); }
    100% { opacity: 1; transform: rotate(-8deg) scale(1); }
}

.bp-bill-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
    animation: bpTextIn 0.5s ease-out 0.4s backwards;
}

.bp-effect {
    font-size: 0.9rem;
    color: var(--bp-color, #6ee7b7);
    letter-spacing: 0.05em;
    font-variant-numeric: tabular-nums;
    animation: bpTextIn 0.5s ease-out 0.55s backwards;
}

@keyframes bpTextIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* このオーバーレイもクリック透過を保証 */
.bill-passed-overlay, .bill-passed-overlay * {
    pointer-events: none !important;
}

/* ============================================================
   議員買収ボタンの文字色修正(黒文字で読めない問題)
   ============================================================ */
.bribe-btn {
    color: #f0e8ec !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 2px;
    width: 100%;
    margin-bottom: 6px;
}
.bribe-btn span {
    color: inherit;
}

/* ============================================================
   可決済み法案の折りたたみ
   ============================================================ */
.passed-bills-section {
    margin-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.06);
    padding-top: 10px;
}
.passed-bills-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 8px 12px;
    background: rgba(46, 204, 113, 0.06);
    border: 1px solid rgba(46, 204, 113, 0.2);
    border-radius: 8px;
    font-size: 0.85rem;
    color: #2ecc71;
    transition: background 0.15s ease;
}
.passed-bills-toggle:hover {
    background: rgba(46, 204, 113, 0.12);
}
.passed-bills-list {
    display: none;
    margin-top: 8px;
    padding: 4px;
}
.passed-bills-list.open {
    display: block;
}
.passed-bill-item {
    padding: 6px 10px;
    font-size: 0.82rem;
    color: #aaa;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

/* ============================================================
   Phase 3: タブUI(縦長解消)
   ============================================================ */
.phase3-tab-bar {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--bg-base, #0d0a0c);
    padding: 8px 0;
}

.phase3-tab {
    flex: 1;
    padding: 12px 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 107, 157, 0.15);
    border-radius: 10px;
    color: #a89ca0;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.phase3-tab:hover {
    background: rgba(255, 107, 157, 0.08);
    color: #f0e8ec;
}

.phase3-tab.active {
    background: linear-gradient(135deg, rgba(255, 107, 157, 0.25), rgba(196, 69, 105, 0.2));
    border-color: rgba(255, 107, 157, 0.6);
    color: #fff;
    box-shadow: 0 0 16px rgba(255, 107, 157, 0.2);
}

@media (max-width: 500px) {
    .phase3-tab { font-size: 0.78rem; padding: 10px 4px; }
    .phase3-tab-bar { gap: 4px; }
}

/* ============================================================
   Phase 3: 世論工作キャンペーン
   ============================================================ */
.pr-campaigns {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pr-campaign-item {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 12px;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.pr-campaign-item.affordable {
    border-color: rgba(16, 185, 129, 0.4);
    box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.3), 0 2px 12px rgba(16, 185, 129, 0.1);
    cursor: pointer;
}
.pr-campaign-item.affordable:hover {
    transform: translateX(3px);
    box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.7), 0 2px 20px rgba(16, 185, 129, 0.25);
}
.pr-campaign-item.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* 日本掌握完了 → 世界へ進むボタン */
.domestic-advance-btn {
    margin-top: 12px;
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #e8b04e, #ff6b9d);
    border: none;
    border-radius: 10px;
    color: #1a1015;
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    cursor: pointer;
    box-shadow: 0 0 24px rgba(232, 176, 78, 0.4);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    animation: advanceBtnPulse 2s ease-in-out infinite;
}
.domestic-advance-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 0 36px rgba(232, 176, 78, 0.6);
}
@keyframes advanceBtnPulse {
    0%, 100% { box-shadow: 0 0 24px rgba(232, 176, 78, 0.4); }
    50% { box-shadow: 0 0 36px rgba(232, 176, 78, 0.6); }
}

/* ============================================================
   Phase 1 チュートリアルヒント(画面下のトースト)
   ============================================================ */
.tutorial-hint {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: linear-gradient(135deg, rgba(255, 107, 157, 0.95), rgba(196, 69, 105, 0.95));
    color: #fff;
    padding: 14px 22px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 0.95rem;
    box-shadow: 0 8px 24px rgba(255, 107, 157, 0.4);
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.4s ease;
    max-width: 90%;
    text-align: center;
    backdrop-filter: blur(8px);
}
.tutorial-hint.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.tutorial-hint.hide {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
}

/* ============================================================
   タイトル画面の言語選択バー(海外プレイヤーが一目で気付く)
   ============================================================ */
.title-lang-bar {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: -8px auto 28px;
    flex-wrap: wrap;
    max-width: 540px;
    padding: 0 16px;
}
.title-lang-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 10px 14px;
    color: #ccc;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    min-width: 80px;
}
.title-lang-btn:hover {
    background: rgba(255, 107, 157, 0.18);
    border-color: rgba(255, 107, 157, 0.5);
    color: #fff;
}
.title-lang-btn.active {
    background: rgba(255, 107, 157, 0.25);
    border-color: #ff6b9d;
    color: #fff;
    box-shadow: 0 0 16px rgba(255, 107, 157, 0.3);
}
.title-lang-flag {
    font-size: 1.7rem;
    line-height: 1;
}
.title-lang-name {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}
@media (max-width: 480px) {
    .title-lang-btn {
        min-width: 56px;
        padding: 8px 10px;
    }
    .title-lang-flag { font-size: 1.4rem; }
    .title-lang-name { font-size: 0.65rem; }
}

/* ============================================================
   モバイル操作性の修正
   ------------------------------------------------------------
   問題: スマホで製造ボタンを連打すると、ダブルタップ拡大が
        発動してしまい、ぽちぽち押せない。

   原因: iOS Safari は viewport の user-scalable=no を無視する
        (iOS 10以降、アクセシビリティ仕様のため)。
        よって CSS 側で個別に潰す必要がある。

   対策:
     1. touch-action: manipulation
        → ダブルタップ拡大とタップ遅延(300ms)を無効化
     2. user-select: none
        → 長押しでのテキスト選択・選択ハンドル表示を防ぐ
     3. -webkit-touch-callout: none
        → 長押しでのコンテキストメニュー(iOS)を防ぐ
     4. -webkit-tap-highlight-color: transparent
        → タップ時の青いハイライトを消す
   ============================================================ */

/* 製造ボタン: 最優先で連打できるように */
.make-btn {
    touch-action: manipulation !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* すべてのボタン・クリック要素にも適用 */
button,
.btn,
.upg-item,
.emp-item,
.slot-spin-btn,
.futures-btn,
.bill-btn,
.bribe-btn,
.region-card,
.legacy-item,
.title-btn,
.price-preset,
[onclick] {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* UI ラベル・数値はテキスト選択させない
   (連打中に数字がハイライトされると気持ち悪いため) */
.stat-label,
.stat-value,
.make-info,
.domestic-sub-label,
.slot-symbol,
.price-label {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* body 全体でダブルタップ拡大を抑止 */
body {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* 入力欄はズーム・選択を許可(除外指定) */
input,
textarea,
select {
    touch-action: auto;
    -webkit-user-select: auto;
    user-select: auto;
}

/* iOS で input の font-size が 16px 未満だと
   フォーカス時に自動ズームされる。それを防ぐ */
input[type="number"],
input[type="text"],
select {
    font-size: 16px;
}