/* Super Bowl Squares Stylesheet */

body { 
    font-family: Arial, sans-serif; 
    /* margin: 20px;  */
    margin: 0;
}
h4 {
    color: #FFFFFF;
}
.container { 
    max-width: 1200px; 
    padding: 50px; 
}

.nav { 
    margin-bottom: 20px; 
}

.nav a { 
    margin-right: 15px;
}
.navbar-middle {
    background: #001034;
    overflow: hidden;
    padding-left: 50px;;
}
.navbar-bottom {
    background-color: #ff4f19;
    color: #FFFFFF;
    line-height: 120px;
    text-align: right;
    padding-right: 50px;
    margin-top: -16px;
}
.navbar-bottom a {
    background: #001034;
    color: #FFFFFF;
    border-radius: 50px;
    font-size: 15px;
    line-height: 20px;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0.25px;
    padding: 15px 20px;
}
.navbar-bottom ul {
    list-style: none;
}
.navbar-bottom img {
    height: 100px;
    margin: 10px 10px 10px 50px;
    float: left;
}
.navbar-middle a {
    color: #FFFFFF;
    text-decoration: none; 
    text-transform: uppercase;
}
.navbar-middle h4 {
    line-height: 44px;
    margin: 0px;
    font-weight: 600;
    font-size: 16px;}
.board { 
    display: grid; 
    grid-template-columns: repeat(12, 1fr); 
    gap: 2px; 
    margin: 20px 0;
    max-width: 600px;
    overflow-x: auto;
}

.square { 
    aspect-ratio: 1; 
    border: 1px solid #333; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: clamp(8px, 1.5vw, 12px); 
    text-align: center;
    padding: clamp(2px, 0.5vw, 3px);
    min-height: clamp(25px, 4vw, 35px);
    word-break: break-word;
    overflow: hidden;
    background-color: white;
    transition: all 0.2s ease;
}

.square:hover {
    background-color: #f0f0f0;
    transform: scale(1.05);
    z-index: 1;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.header-row, .header-col, .header-corner { 
    background-color: #e0e0e0; 
    font-weight: bold; 
    font-size: clamp(10px, 2.5vw, 16px);
}

.btn { 
    padding: 10px 20px; 
    background-color: #007bff; 
    color: white; 
    text-decoration: none; 
    border-radius: 4px; 
    margin: 5px;
    display: inline-block;
    border: none;
    font-size: 1em;
}

.btn:hover { 
    background-color: #0056b3; 
}

.btn-danger { 
    background-color: #dc3545; 
}

.btn-danger:hover { 
    background-color: #8d0c19; 
}
.btn-ready { 
    background-color: #05a810; 
}

.btn-ready:hover { 
    background-color: #036b0a; 
}

.form-group { 
    margin-bottom: 15px; 
}

.form-group label { 
    display: block; 
    margin-bottom: 5px; 
}

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

.flash { 
    padding: 10px; 
    margin: 10px 0; 
    border-radius: 4px; 
}

.flash.success { 
    background-color: #d4edda; 
    color: #155724; 
}

.flash.error { 
    background-color: #f8d7da; 
    color: #721c24; 
}

table { 
    width: 100%; 
    border-collapse: collapse; 
    margin: 20px 0; 
}

th, td { 
    border: 1px solid #ddd; 
    padding: 8px; 
    text-align: left; 
}

th { 
    background-color: #f2f2f2; 
}

/* Game Selector Styles */
.game-selector {
    display: inline-block;
    margin-right: 15px;
}

.game-selector label {
    margin-right: 8px;
    font-weight: bold;
}

.game-selector select {
    padding: 5px;
    border-radius: 4px;
    border: 1px solid #ddd;
}

/* Board Label Styles */
.empty-cell {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
}

.nfc-label {
    background-color: #0056b3; /* Royal blue */
    color: white;
    font-weight: bold;
    font-size: clamp(10px, 2vw, 16px);
}

.corner-empty {
    background-color: transparent;
    border: none;
}

/* Grid Positioning Styles */
.nfc-row {
    grid-column-start: 2;
    grid-column-end: 13;
    aspect-ratio: unset;
}

.afc-column {
    grid-row-start: 2;
    grid-row-end: 13;
    aspect-ratio: unset;
}

.super-board {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 2px;
    margin: 20px 0;
    max-width: 600px;
    overflow-x: auto;
}

.afc-label {
    background-color: rgba(220, 20, 60, 0.7); /* 70% red */
    color: white;
    font-weight: bold;
    font-size: clamp(10px, 2vw, 16px);
}

/* Responsive Design */
@media (max-width: 768px) {
    .board {
        gap: 1px;
        margin: 10px 0;
        max-width: 480px;
    }
    .square {
        min-height: clamp(20px, 6vw, 30px);
        font-size: clamp(8px, 2vw, 12px);
    }
}

@media (max-width: 480px) {
    .board {
        gap: 0.5px;
        max-width: 360px;
    }
    .square {
        min-height: clamp(18px, 8vw, 25px);
        font-size: clamp(7px, 1.5vw, 10px);
        padding: 1px;
    }
}