*{margin:0;padding:0;box-sizing:border-box}body{background:#8b7355;font-family:Georgia,Times New Roman,serif;color:#3a2e1e;line-height:1.5;padding:20px;min-height:100vh}.container{max-width:1200px;margin:0 auto;background:#e8dcc4;border:3px solid #6B5D50;box-shadow:4px 4px 12px #0000004d;padding:0}h1{font-size:32px;font-weight:700;color:#3a2e1e;letter-spacing:.5px;line-height:1.3}h2{font-size:22px;font-weight:700;color:#3a2e1e;margin-bottom:20px;letter-spacing:.3px;line-height:1.4}h3{font-size:18px;font-weight:400;color:#3a2e1e;margin-bottom:15px;line-height:1.4}h4{font-size:16px;font-weight:700;color:#3a2e1e;line-height:1.4}body{font-size:15px;font-weight:400;line-height:1.5}.text-secondary{font-size:14px;font-weight:400;color:#6b5d50;line-height:1.5}.text-small{font-size:13px;font-weight:400;color:#6b5d50;line-height:1.4}.tabs{display:flex;border-bottom:2px solid #8B7355;background:#d4c4a8}.tab-btn{flex:1;background:none;border:none;padding:15px 20px;font-family:Georgia,serif;font-size:16px;color:#4a3f35;cursor:pointer;border-bottom:3px solid transparent}.tab-btn.active{background:#f5f0e8;border-bottom-color:#6b5d50;color:#3a2e1e}.tab-btn:hover{background:#e8dcc4}.tab-content{display:none;padding:30px;background:#f5f0e8;border-bottom:2px solid #8B7355}.tab-content.active{display:block}.subtitle{font-size:16px;font-weight:400;color:#6b5d50;margin-bottom:30px;text-align:center;line-height:1.6}.form-group{margin-bottom:20px}.form-group label{display:block;font-size:15px;font-weight:700;color:#3a2e1e;margin-bottom:8px;line-height:1.4}.form-group input{width:100%;padding:12px 14px;border:2px solid #8B7355;background:#fff;font-family:Georgia,serif;font-size:15px;color:#3a2e1e;min-height:44px}.form-group input:focus{outline:none;border-color:#6b5d50;background:#fffef8;box-shadow:inset 0 1px 2px #0000000d}.btn-primary,.btn-action{background:#8b6b47;color:#f5f0e8;border:2px solid #6B5D50;padding:14px 20px;font-family:Georgia,serif;font-size:15px;cursor:pointer;box-shadow:2px 2px 4px #3a2e1e33;width:100%;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}.btn-primary:hover:not(:disabled),.btn-action:hover:not(:disabled){background:#7a5a37}.btn-primary:active:not(:disabled),.btn-action:active:not(:disabled){box-shadow:inset 1px 1px 3px #0000004d;background:#6b4f30}.btn-action{padding:12px 16px;width:auto}.btn-action:disabled,.btn-disabled{background:#d4c4a8;color:#9b8b7a;border-color:#b8a894;cursor:not-allowed;opacity:1;box-shadow:none}#room-info{background:#f5f0e8;border:2px solid #8B7355;padding:25px;margin-top:20px;box-shadow:2px 2px 6px #3a2e1e26}#room-info h3{font-size:18px;font-weight:700;color:#3a2e1e;margin-bottom:15px;border-bottom:2px solid #8B7355;padding-bottom:10px;line-height:1.4}.room-code{background:#ede4d3;border:2px solid #8B7355;padding:20px;text-align:center;font-family:Courier New,monospace;font-size:32px;letter-spacing:4px;color:#3a2e1e;margin:20px 0;box-shadow:inset 1px 1px 3px #0000001a}#players-waiting{background:#fffef8;border:2px solid #8B7355;padding:20px;margin-top:20px}#players-waiting h4{font-size:16px;margin-bottom:12px;color:#3a2e1e;border-bottom:1px solid #D4C4A8;padding-bottom:8px}#player-list{border:1px solid #D4C4A8;background:#f5f0e8;padding:12px;margin-top:10px}#player-list div{padding:8px 10px;border-bottom:1px solid #E8DCC4;color:#4a3f35;font-size:15px}#player-list div:last-child{border-bottom:none}#game-area{padding:0;background:#e8dcc4}.board-header{background:#f5f0e8;padding:20px 30px;border-bottom:2px solid #8B7355;display:flex;justify-content:space-between;align-items:center;min-height:80px}.info-panel{background:#f5f0e8;border:1px solid #8B7355;padding:12px 15px;margin-bottom:15px}.turn-indicator{padding:10px 16px;border:2px solid #8B7355;background:#ede4d3;font-size:16px;font-weight:700;text-align:center;line-height:1.4}.turn-active{background:#d8e8d8;border-color:#6b8b6b;color:#2a4a2a;font-weight:700;font-size:16px}.turn-waiting{background:#f5f0e8;color:#6b5d50;border-color:#8b7355}.turn-ended{background:#d4c8bc;color:#5a4f45;border-color:#8b7355}.badge-host{display:inline-block;margin-left:10px;padding:3px 8px;background:#8b6b47;color:#f5f0e8;border:1px solid #6B5D50;font-size:12px;font-weight:700;vertical-align:middle;text-transform:uppercase;letter-spacing:.5px}.status-message{margin:15px 30px;padding:14px 18px;border:2px solid #8B7355;display:none;font-size:15px;font-weight:400;line-height:1.5}.status-success{background:#e8f0e8;color:#2a4a2a;border-color:#6b8b6b;border-left-width:4px}.status-error{background:#f0e8e8;color:#5a3a3a;border-color:#a87a6b;border-left-width:4px}.status-info{background:#f5f0e8;color:#4a3f35;border-color:#a89276;border-left-width:4px}.game-meta{padding:8px 30px;font-size:14px;font-weight:400;color:#6b5d50;text-align:center;background:#f5f0e8;border-bottom:1px solid #D4C4A8;line-height:1.5}.action-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:25px 30px;background:#f5f0e8;border-top:2px solid #8B7355}.action-buttons .btn-action{min-height:48px;min-width:120px;font-size:14px;padding:12px 16px;text-align:center;border-width:2px;touch-action:manipulation;user-select:none;-webkit-user-select:none}.action-buttons .btn-action:disabled{background:#d4c4a8;color:#9b8b7a;border-color:#b8a894;cursor:not-allowed;box-shadow:none}.action-log{background:#d4c4a8;padding:20px 30px;border-top:2px solid #8B7355}.action-log h3{font-size:18px;font-weight:700;color:#3a2e1e;margin-bottom:10px;border-bottom:1px solid #8B7355;padding-bottom:5px;line-height:1.4}#action-log-content{height:150px;overflow-y:auto;border:1px solid #8B7355;background:#f5f0e8;padding:10px;font-family:Courier New,monospace;font-size:13px;line-height:1.6}.log-entry{padding:4px 0;border-bottom:1px solid #E8DCC4;font-size:13px;font-weight:400;color:#4a3f35;line-height:1.5}.log-entry:last-child{border-bottom:none}.log-empty{padding:20px;text-align:center;font-size:14px;font-weight:400;color:#8b7355;font-style:italic;font-family:Georgia,serif;line-height:1.5}#game-status{padding:10px 30px;text-align:center;color:#6b5d50;background:#f5f0e8}.game-state{background:#f5f0e8;padding:20px 30px;border-top:2px solid #8B7355;border-bottom:2px solid #8B7355}.player-section,.board-section{margin-bottom:20px}.player-section:last-child,.board-section:last-child{margin-bottom:0}.player-section h4,.board-section h4{font-size:16px;font-weight:700;margin-bottom:10px;color:#3a2e1e;border-bottom:1px solid #D4C4A8;padding-bottom:5px;line-height:1.4}.caravan-display,.card-display,.merchant-display,.point-display{background:#fffef8;border:2px solid #D4C4A8;padding:14px;min-height:60px}.caravan-display{background:linear-gradient(to bottom,#fffef8,#f5f0e8);border:2px solid #C9BCA8}.point-display{background:linear-gradient(to bottom,#faf5e8,#f5f0e8);border:2px solid #C9A985}.crystal{display:inline-flex;align-items:center;gap:4px;padding:6px 10px;margin:4px;background:#fffef8;border:2px solid #8B7355;font-size:14px;font-weight:700;color:#3a2e1e;line-height:1.4;border-radius:0}.crystal-yellow:before,.crystal-green:before,.crystal-red:before,.crystal-blue:before,.crystal-turquoise:before,.crystal-magenta:before{content:"";display:inline-block;width:10px;height:10px;margin-right:4px;border:1px solid rgba(0,0,0,.2);transform:rotate(45deg);flex-shrink:0}.crystal-yellow:before{background:#d4af37;box-shadow:inset 1px 1px 2px #fff6}.crystal-green:before{background:#2e8b57;box-shadow:inset 1px 1px 2px #ffffff4d}.crystal-red:before{background:#c44536;box-shadow:inset 1px 1px 2px #ffffff4d}.crystal-blue:before,.crystal-turquoise:before{background:#00b4d8;box-shadow:inset 1px 1px 2px #fff6}.crystal-magenta:before{background:#9b59b6;box-shadow:inset 1px 1px 2px #ffffff4d}.card-item{display:inline-block;padding:10px 14px;margin:6px;background:#f5f0e8;border:2px solid #8B7355;font-size:14px;font-weight:400;color:#3a2e1e;line-height:1.4;min-width:140px;box-shadow:2px 2px 4px #3a2e1e26}.card-item.point-card{background:linear-gradient(to bottom,#f5efe0,#f5f0e8);border:3px solid #8B6B47;padding:12px 16px;min-width:160px;box-shadow:3px 3px 6px #8b6b474d}.card-item.point-card .card-points{font-size:20px;font-weight:700;color:#8b6b47;display:block;margin-bottom:6px;text-align:center}.card-item.merchant-card{background:#f0efe8;border-top-width:4px;padding-top:12px}.card-item.merchant-produce{border-top-color:#7a9b6e}.card-item.merchant-upgrade{border-top-color:#6b8aa8}.card-item.merchant-trade{border-top-color:#a67c52}.card-item.playable{background:#fffef8;border-width:3px;border-color:#6b5d50;box-shadow:2px 2px 6px #6b5d504d}.card-item.unplayable{background:#e8dcc4;border-color:#b8a894;opacity:.75;color:#6b5d50}.card-cost{display:flex;gap:3px;margin-top:6px;flex-wrap:wrap;align-items:center}.card-cost .cost-token{width:12px;height:12px;border:1px solid rgba(0,0,0,.3);transform:rotate(45deg);display:inline-block;box-shadow:1px 1px 2px #0003}.cost-token.token-yellow{background:#d4af37}.cost-token.token-green{background:#2e8b57}.cost-token.token-red{background:#c44536}.cost-token.token-blue{background:#00b4d8}.cost-token.token-magenta{background:#9b59b6}.card-slot{display:inline-block;padding:12px 16px;margin:6px;background:#f5f0e8;border:2px solid #8B7355;font-size:15px;font-weight:700;color:#3a2e1e;min-width:140px;text-align:center;line-height:1.4;box-shadow:2px 2px 4px #3a2e1e26}.point-display .card-slot{background:linear-gradient(to bottom,#f5efe0,#f5f0e8);border:3px solid #8B6B47;min-width:160px;padding:14px 18px;box-shadow:3px 3px 6px #8b6b4740}.merchant-display .card-slot{background:#f0efe8;border-top-width:4px}.card-slot.empty{background:#e8dcc4;color:#8b7355;border-style:dashed;font-weight:400;font-size:14px}.shared-board{background:#e8dcc4;padding:20px 30px;border-bottom:2px solid #8B7355}.modal{display:none;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;background:#3b2e1eb3;align-items:center;justify-content:center}.modal-content{background:#f5f0e8;border:3px solid #6B5D50;box-shadow:4px 4px 12px #0006;max-width:600px;width:90%;max-height:80vh;overflow:hidden;display:flex;flex-direction:column}.modal-header{background:#e8dcc4;padding:20px 25px;border-bottom:2px solid #8B7355;display:flex;justify-content:space-between;align-items:center}.modal-header h3{margin:0;font-size:22px;font-weight:700;color:#3a2e1e;line-height:1.3}.modal-close{background:none;border:none;font-size:32px;color:#6b5d50;cursor:pointer;line-height:1;padding:0;width:32px;height:32px}.modal-close:hover{color:#3a2e1e}.modal-body{padding:25px;overflow-y:auto;flex:1}.modal-footer{background:#e8dcc4;padding:15px 25px;border-top:2px solid #8B7355;text-align:right}.card-select-btn{margin-bottom:10px!important}@media (max-width: 768px){body{padding:10px}.container{border-width:2px}h1{font-size:22px;letter-spacing:.5px}h2{font-size:20px}h3{font-size:16px}.tabs{flex-direction:column}.tab-btn{border-bottom:1px solid #8B7355;padding:18px 20px;font-size:15px}.tab-btn.active{border-bottom:1px solid #6B5D50;border-left:3px solid #6B5D50}.tab-content{padding:20px 15px}.form-group input{font-size:16px;padding:14px 12px;min-height:48px}.room-code{font-size:24px;padding:18px 15px;letter-spacing:3px}.board-header{flex-direction:column;align-items:flex-start;gap:12px;padding:18px 20px}.info-panel{padding:14px;margin-bottom:12px}.action-buttons{grid-template-columns:1fr;gap:14px;padding:20px 15px}.action-buttons .btn-action{min-height:52px;font-size:15px;padding:16px}.btn-primary,.btn-action{width:100%;padding:16px;font-size:15px;min-height:52px}.action-log{padding:18px 15px}#action-log-content{height:140px;font-size:12px;padding:12px}.status-message{margin:12px 15px;padding:14px;font-size:14px}.game-meta{padding:10px 15px;font-size:13px}.game-state,.shared-board{padding:18px 15px}.player-section,.board-section{margin-bottom:16px}.card-item,.card-slot{font-size:13px;padding:8px 10px;margin:3px}.modal-content{width:95%;max-height:90vh}.modal-header,.modal-footer{padding:15px 18px}.modal-body{padding:18px}}@media (max-width: 480px){body{padding:8px}.container{border-width:2px}h1{font-size:20px}h2{font-size:18px}.subtitle{font-size:14px}.tab-btn{padding:16px;font-size:14px}.tab-content{padding:16px 12px}.room-code{font-size:20px;letter-spacing:2px;padding:16px 12px}.form-group label{font-size:14px}.action-buttons{padding:16px 12px;gap:12px}.action-log{padding:16px 12px}.action-log h3{font-size:14px}#action-log-content{height:120px;font-size:11px}#room-info{padding:18px 15px}#players-waiting{padding:16px}}