:root{--color-bg-primary: #f0e6d8;--color-surface: #fff9f0;--color-text-primary: #2c2c3e;--color-text-secondary: #5a5a70;--color-primary: #8b4513;--color-primary-hover: #a0522d;--color-red: #c41e3a;--color-red-light: #e74c3c;--color-blue: #1e3a8a;--color-blue-light: #3498db;--color-gold: #d4af37;--color-card-bg: #2c1810;--color-card-border: #5c3820;--color-success: #27ae60;--color-error: #e74c3c;--space-4: 4px;--space-8: 8px;--space-12: 12px;--space-16: 16px;--space-20: 20px;--space-24: 24px;--space-32: 32px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--duration-fast: .15s;--duration-normal: .3s}body.dark-mode{--color-bg-primary: #1a1a2e;--color-surface: #252540;--color-text-primary: #f0e6d8;--color-text-secondary: #a0a0b0;--color-primary: #d4af37;--color-primary-hover: #e5c04a;--color-card-bg: #1e1e30;--color-card-border: #4a4a6a}*{margin:0;padding:0;box-sizing:border-box}html,body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background-color:var(--color-bg-primary);color:var(--color-text-primary);min-height:100vh}body{display:flex;align-items:center;justify-content:center;padding:var(--space-12)}.app{width:100%;max-width:800px}.btn{padding:var(--space-12) var(--space-16);border:none;border-radius:var(--radius-sm);font-size:14px;font-weight:600;cursor:pointer;transition:all var(--duration-fast);text-transform:uppercase;letter-spacing:.5px}.btn:active{transform:scale(.98)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:linear-gradient(135deg,var(--color-primary),var(--color-primary-hover));color:#fff}.btn-primary:hover:not(:disabled){box-shadow:0 4px 12px #8b451366}.btn-secondary{background:var(--color-surface);color:var(--color-text-primary);border:2px solid var(--color-primary)}.btn-icon{background:none;border:none;font-size:24px;cursor:pointer;padding:var(--space-4)}.main-menu{text-align:center;padding:var(--space-24)}.menu-title{font-size:42px;color:var(--color-primary);margin-bottom:var(--space-4)}.menu-subtitle{color:var(--color-text-secondary);margin-bottom:var(--space-32)}.menu-options{display:flex;flex-direction:column;gap:var(--space-24);max-width:320px;margin:0 auto}.mode-group{display:flex;flex-direction:column;gap:var(--space-8)}.mode-group h3{font-size:12px;text-transform:uppercase;color:var(--color-text-secondary);letter-spacing:1px}.menu-btn{width:100%;padding:var(--space-16);font-size:16px}.quick-stats{display:flex;justify-content:space-around;padding:var(--space-16);background:var(--color-surface);border-radius:var(--radius-md);margin-top:var(--space-16)}.quick-stat{display:flex;flex-direction:column;align-items:center}.qs-value{font-size:24px;font-weight:700;color:var(--color-primary)}.qs-label{font-size:11px;color:var(--color-text-secondary)}.menu-footer{margin-top:var(--space-32);color:var(--color-text-secondary);font-size:12px}.privacy-link{background:none;border:none;color:var(--color-text-secondary);cursor:pointer}.game-container{background:var(--color-surface);border-radius:var(--radius-lg);padding:var(--space-16);box-shadow:0 4px 20px #0000001a}.game-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-16)}.game-header h1{font-size:22px;color:var(--color-primary)}.game-info{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-16);padding:var(--space-12);background:var(--color-bg-primary);border-radius:var(--radius-md)}.score-display{display:flex;flex-direction:column;align-items:center;padding:var(--space-8) var(--space-16);border-radius:var(--radius-sm);min-width:60px}.score-display.red{background:#c41e3a1a;border:2px solid var(--color-red)}.score-display.red.active{background:#c41e3a33}.score-display.blue{background:#1e3a8a1a;border:2px solid var(--color-blue)}.score-display.blue.active{background:#1e3a8a33}.score-label{font-size:10px;text-transform:uppercase;font-weight:600}.score-value{font-size:28px;font-weight:700}.turn-info{text-align:center}.turn-number{font-size:12px;color:var(--color-text-secondary);display:block}.current-turn{font-weight:600;display:block;margin-top:var(--space-4)}.current-turn.red{color:var(--color-red)}.current-turn.blue{color:var(--color-blue)}.game-area{display:flex;flex-direction:column;gap:var(--space-16);align-items:center}.tt-board{display:flex;flex-direction:column;gap:4px;padding:var(--space-8);background:linear-gradient(135deg,#3d2914,#2c1810);border-radius:var(--radius-md);box-shadow:inset 0 2px 8px #00000080}.board-row{display:flex;gap:4px}.board-cell{width:100px;height:120px;background:#0000004d;border:2px solid rgba(255,255,255,.1);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--duration-fast)}.board-cell.valid-target{border-color:var(--color-gold);background:#d4af3733}.board-cell.valid-target:hover{background:#d4af374d}.empty-cell{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.placement-indicator{width:20px;height:20px;border:2px dashed var(--color-gold);border-radius:50%;animation:pulse 1s infinite}@keyframes pulse{0%,to{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.1)}}.tt-card{position:relative;width:90px;height:110px;background:var(--color-card-bg);border:3px solid var(--color-card-border);border-radius:var(--radius-md);cursor:pointer;transition:all var(--duration-normal);overflow:hidden}.tt-card.size-board{width:90px;height:110px}.tt-card.size-hand{width:70px;height:85px}.tt-card.owner-red{border-color:var(--color-red);box-shadow:0 0 10px #c41e3a66}.tt-card.owner-blue{border-color:var(--color-blue);box-shadow:0 0 10px #1e3a8a66}.tt-card.selected{transform:translateY(-8px);box-shadow:0 8px 20px #d4af3799;border-color:var(--color-gold)}.tt-card.playable:hover{transform:translateY(-4px)}.tt-card.captured{animation:capture .5s ease-out}@keyframes capture{0%{transform:scale(1)}50%{transform:scale(1.15) rotate(5deg)}to{transform:scale(1) rotate(0)}}.card-bg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#3a2a1a,#1a1008)}.card-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#4a3020,#2a1810)}.card-initial{font-size:36px;font-weight:700;color:var(--color-gold);opacity:.7}.card-image{width:100%;height:100%;object-fit:cover}.card-values{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}.card-values .value{position:absolute;font-size:14px;font-weight:700;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8);background:#00000080;width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:2px}.tt-card.size-hand .value{font-size:11px;width:16px;height:16px}.value.top{top:4px;left:50%;transform:translate(-50%)}.value.right{right:4px;top:50%;transform:translateY(-50%)}.value.bottom{bottom:18px;left:50%;transform:translate(-50%)}.value.left{left:4px;top:50%;transform:translateY(-50%)}.card-name{position:absolute;bottom:2px;left:0;right:0;text-align:center;font-size:8px;color:#fff;text-shadow:0 1px 2px black;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 4px}.card-rarity{position:absolute;top:2px;right:2px;font-size:8px;color:var(--color-gold)}.tt-card.size-hand .card-rarity{display:none}.owner-indicator{position:absolute;top:0;left:0;width:0;height:0;border-style:solid;border-width:12px 12px 0 0}.owner-indicator.red{border-color:var(--color-red) transparent transparent transparent}.owner-indicator.blue{border-color:var(--color-blue) transparent transparent transparent}.tt-hand{display:flex;flex-direction:column;align-items:center;gap:var(--space-8);padding:var(--space-12);border-radius:var(--radius-md);background:var(--color-bg-primary);opacity:.8;transition:opacity var(--duration-fast)}.tt-hand.active{opacity:1}.hand-label{display:flex;align-items:center;gap:var(--space-8);font-size:12px;font-weight:600}.player-indicator{width:12px;height:12px;border-radius:50%}.player-indicator.red{background:var(--color-red)}.player-indicator.blue{background:var(--color-blue)}.turn-indicator{color:var(--color-gold);animation:blink 1s infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:.5}}.hand-cards{display:flex;gap:var(--space-8);flex-wrap:wrap;justify-content:center}.selection-hint{text-align:center;padding:var(--space-12);background:var(--color-gold);color:#1a1a2e;border-radius:var(--radius-sm);font-size:14px;animation:slideIn .3s ease}@keyframes slideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.result-overlay{position:fixed;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000}.result-modal{background:var(--color-surface);padding:var(--space-32);border-radius:var(--radius-lg);text-align:center;max-width:400px;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.result-modal h2{font-size:32px;margin-bottom:var(--space-12)}.result-modal p{color:var(--color-text-secondary);margin-bottom:var(--space-8)}.result-buttons{display:flex;gap:var(--space-12);justify-content:center;margin-top:var(--space-24)}.tutorial-overlay,.statistics-overlay,.privacy-overlay{position:fixed;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;padding:var(--space-16)}.tutorial-modal,.statistics-modal,.privacy-modal{background:var(--color-surface);border-radius:var(--radius-lg);padding:var(--space-24);max-width:450px;width:100%;max-height:90vh;overflow-y:auto;position:relative;animation:fadeIn .3s ease}.tutorial-close,.statistics-close,.privacy-close{position:absolute;top:var(--space-12);right:var(--space-12);background:none;border:none;font-size:20px;cursor:pointer}.tutorial-title,.statistics-title,.privacy-title{font-size:22px;text-align:center;margin-bottom:var(--space-16)}.tutorial-progress{display:flex;justify-content:center;gap:var(--space-8);margin-bottom:var(--space-20)}.tutorial-dot{width:10px;height:10px;border-radius:50%;background:var(--color-text-secondary);opacity:.3}.tutorial-dot.active{opacity:1;background:var(--color-primary)}.tutorial-dot.completed{opacity:1;background:var(--color-success)}.tutorial-visual{text-align:center;margin-bottom:var(--space-16)}.big-emoji{font-size:48px}.tutorial-content{text-align:center;color:var(--color-text-secondary);line-height:1.6;margin-bottom:var(--space-20)}.tutorial-nav{display:flex;gap:var(--space-12);justify-content:center}.statistics-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-12);margin-bottom:var(--space-20)}.stat-card{background:var(--color-bg-primary);padding:var(--space-16);border-radius:var(--radius-md);text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--space-4)}.stat-icon{font-size:24px}.stat-value{font-size:28px;font-weight:700;color:var(--color-primary)}.stat-label{font-size:11px;color:var(--color-text-secondary)}.win-rate-display{margin-bottom:var(--space-20)}.win-rate-bar{height:8px;background:var(--color-bg-primary);border-radius:4px;overflow:hidden;margin-bottom:var(--space-8)}.win-rate-fill{height:100%;background:linear-gradient(90deg,var(--color-red),var(--color-success));transition:width .5s ease}.win-rate-text{text-align:center;display:block;font-weight:600}.statistics-footer{display:flex;gap:var(--space-12);justify-content:center}.privacy-content{text-align:left;color:var(--color-text-secondary);line-height:1.6}.privacy-content section{margin-bottom:var(--space-16)}.privacy-content h3{color:var(--color-text-primary);margin-bottom:var(--space-8)}.privacy-content a{color:var(--color-primary)}.privacy-footer{margin-top:var(--space-20);text-align:center}@media(max-width:500px){.board-cell{width:90px;height:108px}.tt-card.size-board{width:82px;height:100px}.tt-card.size-hand{width:55px;height:68px}.game-area{gap:var(--space-12)}.hand-cards{gap:var(--space-4)}}@media(max-width:400px){.board-cell{width:75px;height:90px}.tt-card.size-board{width:68px;height:82px}.menu-title{font-size:32px}}