* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

body {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   line-height: 1.6;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
}

.navbar {
   background: #333;
   color: #fff;
   padding: 1rem 2rem;
   display: flex;
   justify-content: space-between;
   align-items: center;
   position: relative;
}

.nav-brand a {
   color: #fff;
   text-decoration: none;
   font-size: 1.5rem;
   font-weight: bold;
}

/* Hamburger button */
.hamburger {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   width: 28px;
   height: 20px;
   background: transparent;
   border: none;
   cursor: pointer;
   padding: 0;
   z-index: 1001;
}

.hamburger-line {
   display: block;
   width: 100%;
   height: 3px;
   background: #fff;
   border-radius: 2px;
   transition: transform 0.3s, opacity 0.3s;
}

.hamburger.active .hamburger-line:nth-child(1) {
   transform: translateY(8.5px) rotate(45deg);
}

.hamburger.active .hamburger-line:nth-child(2) {
   opacity: 0;
}

.hamburger.active .hamburger-line:nth-child(3) {
   transform: translateY(-8.5px) rotate(-45deg);
}

/* Nav links popup */
.nav-links {
   list-style: none;
   display: none;
   flex-direction: column;
   position: absolute;
   top: 100%;
   right: 0;
   background: #333;
   min-width: 200px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
   z-index: 1000;
}

.nav-links.open {
   display: flex;
}

.nav-links li {
   border-bottom: 1px solid #444;
}

.nav-links li:last-child {
   border-bottom: none;
}

.nav-links a {
   color: #fff;
   text-decoration: none;
   display: block;
   padding: 1rem 1.5rem;
}

.nav-links a:hover {
   background: #444;
}

.container {
   max-width: 1200px;
   margin: 0 auto;
   padding: 2rem 10px;
   flex: 1;
}

.container p {
   margin-bottom: 0.75rem;
}

.footer {
   background: #333;
   color: #fff;
   text-align: center;
   padding: 1rem;
   margin-top: auto;
}

h1 {
   margin-bottom: 1rem;
}

/* Results table */
.results-table {
   width: 100%;
   border-collapse: collapse;
   margin-top: 1rem;
}

.results-table th,
.results-table td {
   padding: 0.75rem;
   text-align: left;
   border-bottom: 1px solid #ddd;
}

.results-table th {
   background: #f5f5f5;
   font-weight: 600;
}

.results-table .money {
   font-family: monospace;
}

.results-table .positive {
   color: #2e7d32;
}

.results-table .negative {
   color: #c62828;
}

.notice {
   background: #fff3cd;
   border: 1px solid #ffc107;
   padding: 1rem;
   border-radius: 4px;
   margin-bottom: 1rem;
}

.empty-state {
   color: #666;
   font-style: italic;
}

/* Registration form */
.register-form {
   max-width: 400px;
   margin-top: 1.5rem;
}

.form-group {
   margin-bottom: 1rem;
}

.form-group label {
   display: block;
   margin-bottom: 0.5rem;
   font-weight: 500;
}

.form-group input {
   width: 100%;
   padding: 0.75rem;
   border: 1px solid #ddd;
   border-radius: 4px;
   font-size: 1rem;
}

.form-group input:focus {
   outline: none;
   border-color: #333;
}

.form-hint {
   font-size: 0.85rem;
   color: #666;
   margin-top: 0.25rem;
}

.form-alt {
   margin-top: 1.5rem;
   color: #666;
}

.btn {
   padding: 0.75rem 1.5rem;
   border: none;
   border-radius: 4px;
   font-size: 1rem;
   cursor: pointer;
}

.btn-primary {
   background: #333;
   color: #fff;
}

.btn-primary:hover {
   background: #555;
}

.btn-danger {
   background: #c62828;
   color: #fff;
}

.btn-danger:hover {
   background: #d32f2f;
}

.btn-small {
   padding: 0.4rem 0.8rem;
   font-size: 0.875rem;
   margin-left: 1rem;
}

.error {
   background: #ffebee;
   border: 1px solid #f44336;
   color: #c62828;
   padding: 1rem;
   border-radius: 4px;
   margin-bottom: 1rem;
}

.success {
   background: #e8f5e9;
   border: 1px solid #4caf50;
   color: #2e7d32;
   padding: 1rem;
   border-radius: 4px;
   margin-bottom: 1rem;
}

/* Betting form */
.betting-header {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   background: #f5f5f5;
   padding: 0.75rem;
   border-radius: 4px;
   margin-bottom: 1rem;
}

.betting-left {
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
}

.betting-user {
   color: #666;
}

.betting-buttons {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
   gap: 0.4rem;
}

.betting-buttons .btn {
   white-space: nowrap;
   padding: 0.4rem 1rem;
}

.remaining-money {
   font-size: 1.1rem;
}

.remaining-money .label {
   color: #666;
}

.remaining-money .amount {
   font-weight: bold;
   font-family: monospace;
   margin-left: 0.25rem;
}

.remaining-money .amount.negative {
   color: #c62828;
}

.betting-table-wrapper {
   max-width: 500px;
}

.betting-instructions {
   color: #666;
   font-size: 0.9rem;
   margin-bottom: 0.75rem;
}

.betting-instructions p {
   margin: 0 0 0.25rem 0;
}

.betting-instructions p:last-child {
   margin-bottom: 0;
}

.betting-table {
   width: 100%;
   border-collapse: collapse;
   margin-bottom: 1.5rem;
}

.betting-table th,
.betting-table td {
   padding: 0.4rem 0.25rem;
   text-align: left;
   border-bottom: 1px solid #ddd;
}

.betting-table th {
   background: #f5f5f5;
   font-weight: 600;
}

.betting-table th.sortable {
   cursor: pointer;
   user-select: none;
}

.betting-table th.sortable:hover {
   background: #e8e8e8;
}

.betting-table .seed-col {
   text-align: center;
   width: 32px;
}

.betting-table .seed-cell {
   text-align: center;
   color: #666;
}

.betting-table .odds-col {
   text-align: center;
   width: 77px;
   padding: 0.4rem 0.15rem;
}

.betting-table .player-name {
   font-weight: 500;
}

.betting-table .bet-cell {
   text-align: center;
}

.betting-table .odds {
   font-family: monospace;
   font-size: 0.875rem;
   color: #666;
   margin-bottom: 0.25rem;
}

.betting-table .bet-input {
   width: 50px;
   padding: 0.3rem;
   border: 1px solid #ddd;
   border-radius: 4px;
   text-align: center;
   font-family: monospace;
}

.betting-table td:nth-child(3) .bet-input {
   width: 60px;
}

.betting-table .bet-input:focus {
   outline: none;
   border-color: #333;
}

.betting-table .bet-input:disabled {
   background: #f5f5f5;
   color: #999;
}


/* Bets display page */
.tournament-total {
   color: #666;
   margin-bottom: 1rem;
}

.bets-table {
   width: 100%;
   border-collapse: collapse;
   margin-bottom: 2rem;
}

.bets-table th,
.bets-table td {
   padding: 0.75rem;
   text-align: left;
   border-bottom: 1px solid #ddd;
}

.bets-table th {
   background: #f5f5f5;
   font-weight: 600;
}

.bets-table .money {
   font-family: monospace;
}

.bets-table .odds {
   font-family: monospace;
}

.bets-table .bet-type {
   text-transform: capitalize;
}

.bets-table .positive {
   color: #2e7d32;
}

.bets-table .negative {
   color: #c62828;
}

.tournament-summary {
   background: #f5f5f5;
   padding: 1rem;
   border-radius: 4px;
   margin-bottom: 2rem;
}

.tournament-summary p {
   margin-bottom: 0.5rem;
}

.tournament-summary p:last-child {
   margin-bottom: 0;
}

.tournament-summary .money {
   font-family: monospace;
   font-weight: bold;
}

.tournament-summary .positive {
   color: #2e7d32;
}

.tournament-summary .negative {
   color: #c62828;
}
