.nite-territory-wrapper {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 99999;
background: #1a1008;
font-family: 'Inter', system-ui, -apple-system, sans-serif;
overflow: hidden;
display: flex;
flex-direction: column;
color: #f0e6d3;
}
.nite-territory-wrapper * {
box-sizing: border-box;
margin: 0;
padding: 0;
} .nite-header {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 50;
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 24px;
}
.nite-back-btn {
display: flex;
align-items: center;
gap: 8px;
background: none;
border: none;
color: rgba(240, 230, 211, 0.7);
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: color 0.2s;
padding: 8px 12px;
border-radius: 8px;
}
.nite-back-btn:hover {
color: #c8a45e;
}
.nite-back-btn svg {
width: 16px;
height: 16px;
}
.nite-logo {
height: 32px;
opacity: 0.8;
} .nite-scarcity-banner {
position: absolute;
top: 64px;
left: 50%;
transform: translateX(-50%);
z-index: 40;
background: rgba(60, 40, 20, 0.8);
backdrop-filter: blur(8px);
border: 1px solid rgba(200, 164, 94, 0.2);
border-radius: 999px;
padding: 6px 16px;
font-size: 12px;
color: rgba(240, 230, 211, 0.8);
display: flex;
align-items: center;
gap: 8px;
white-space: nowrap;
}
.nite-scarcity-banner strong {
color: #c8a45e;
}
.nite-scarcity-banner .shield-icon {
width: 12px;
height: 12px;
color: #c8a45e;
} .nite-main {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding: 96px 16px 80px;
overflow-y: auto;
scroll-behavior: smooth;
}
@media (min-width: 768px) {
.nite-main {
justify-content: center;
padding: 96px 24px 80px;
}
} .nite-title-section {
text-align: center;
margin-bottom: 32px;
animation: nite-fade-in-up 0.4s ease-out;
}
.nite-breadcrumbs {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-bottom: 12px;
font-size: 12px;
color: rgba(240, 230, 211, 0.4);
}
.nite-breadcrumb-active {
color: #c8a45e;
}
.nite-breadcrumb-separator {
color: rgba(240, 230, 211, 0.3);
}
.nite-title {
font-size: 32px;
font-weight: 700;
color: #f0e6d3;
letter-spacing: -0.02em;
margin: 0;
}
@media (min-width: 768px) {
.nite-title {
font-size: 48px;
}
}
.nite-subtitle {
color: rgba(240, 230, 211, 0.4);
margin-top: 8px;
font-size: 14px;
max-width: 400px;
margin-left: auto;
margin-right: auto;
} .nite-legend {
display: flex;
align-items: center;
gap: 24px;
margin-bottom: 32px;
}
.nite-legend-item {
display: flex;
align-items: center;
gap: 8px;
}
.nite-legend-dot {
width: 12px;
height: 12px;
border-radius: 50%;
}
.nite-legend-dot.available {
background: #c8a45e;
animation: nite-pulse-gold 2s ease-in-out infinite;
}
.nite-legend-dot.reserved {
background: #c44d3e;
}
.nite-legend-dot.taken {
background: #4a3d2e;
}
.nite-legend-label {
font-size: 12px;
color: rgba(240, 230, 211, 0.6);
} .nite-grid {
width: 100%;
max-width: 900px;
display: grid;
gap: 12px;
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) {
.nite-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1024px) {
.nite-grid.states-grid {
grid-template-columns: repeat(4, 1fr);
}
}
.nite-grid.cities-grid {
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.nite-grid.cities-grid {
grid-template-columns: repeat(2, 1fr);
}
} .nite-card {
position: relative;
padding: 16px;
border-radius: 12px;
border: 1px solid rgba(200, 164, 94, 0.2);
background: rgba(35, 25, 15, 0.5);
cursor: pointer;
transition: all 0.2s ease;
text-align: left;
}
.nite-card:hover {
border-color: rgba(200, 164, 94, 0.5);
background: rgba(35, 25, 15, 0.8);
transform: scale(1.02);
}
.nite-card:active {
transform: scale(0.98);
}
.nite-card.disabled {
opacity: 0.5;
cursor: not-allowed;
border-color: rgba(100, 80, 60, 0.3);
background: rgba(25, 18, 10, 0.3);
}
.nite-card.disabled:hover {
transform: none;
border-color: rgba(100, 80, 60, 0.3);
}
.nite-card-abbr {
font-size: 11px;
color: rgba(240, 230, 211, 0.4);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.nite-card-name {
font-size: 14px;
font-weight: 600;
color: #f0e6d3;
margin-top: 2px;
}
.nite-card-meta {
margin-top: 8px;
display: flex;
align-items: center;
gap: 6px;
}
.nite-card-meta .pin-icon {
width: 12px;
height: 12px;
color: #c8a45e;
}
.nite-card-count {
font-size: 12px;
color: #c8a45e;
}
.nite-card-unavailable {
font-size: 12px;
color: rgba(240, 230, 211, 0.3);
margin-top: 8px;
} .nite-county-stats {
margin-top: 8px;
display: flex;
align-items: center;
gap: 12px;
}
.nite-county-stat {
display: flex;
align-items: center;
gap: 4px;
font-size: 12px;
}
.nite-county-stat .dot {
width: 8px;
height: 8px;
border-radius: 50%;
}
.nite-county-stat .dot.available { background: #c8a45e; }
.nite-county-stat .dot.reserved { background: #c44d3e; }
.nite-county-stat .dot.taken { background: #4a3d2e; }
.nite-county-stat .count {
color: rgba(240, 230, 211, 0.6);
}
.nite-county-stat.available .count { color: #c8a45e; }
.nite-county-stat.reserved .count { color: #c44d3e; } .nite-city-card {
position: relative;
padding: 20px;
border-radius: 12px;
border: 1px solid;
transition: all 0.2s ease;
animation: nite-fade-in-up 0.4s ease-out;
}
.nite-city-card.available {
background: rgba(35, 25, 15, 0.5);
border-color: rgba(200, 164, 94, 0.3);
}
.nite-city-card.reserved {
background: rgba(35, 25, 15, 0.3);
border-color: rgba(196, 77, 62, 0.3);
}
.nite-city-card.taken {
background: rgba(25, 18, 10, 0.3);
border-color: rgba(100, 80, 60, 0.2);
opacity: 0.6;
}
.nite-city-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
}
.nite-city-info {
display: flex;
flex-direction: column;
gap: 8px;
}
.nite-city-name-row {
display: flex;
align-items: center;
gap: 8px;
}
.nite-city-dot {
width: 12px;
height: 12px;
border-radius: 50%;
flex-shrink: 0;
}
.nite-city-dot.available {
background: #c8a45e;
animation: nite-pulse-gold 2s ease-in-out infinite;
}
.nite-city-dot.reserved {
background: #c44d3e;
}
.nite-city-dot.taken {
background: #4a3d2e;
}
.nite-city-name {
font-size: 14px;
font-weight: 600;
color: #f0e6d3;
}
.nite-city-status {
font-size: 12px;
}
.nite-city-status.available {
color: #c8a45e;
font-weight: 500;
}
.nite-city-status.reserved {
color: #c44d3e;
display: flex;
align-items: center;
gap: 4px;
}
.nite-city-status.reserved .clock-icon {
width: 12px;
height: 12px;
}
.nite-city-status.taken {
color: rgba(240, 230, 211, 0.3);
}
.nite-city-badge {
padding: 4px 12px;
border-radius: 999px;
background: rgba(200, 164, 94, 0.1);
border: 1px solid rgba(200, 164, 94, 0.3);
font-size: 12px;
color: #c8a45e;
font-weight: 500;
} .nite-bottom-banner {
position: fixed;
bottom: 16px;
left: 50%;
transform: translateX(-50%);
z-index: 40;
background: rgba(60, 40, 20, 0.8);
backdrop-filter: blur(8px);
border: 1px solid rgba(200, 164, 94, 0.1);
border-radius: 999px;
padding: 6px 16px;
font-size: 12px;
color: rgba(240, 230, 211, 0.6);
white-space: nowrap;
}
.nite-bottom-banner strong {
color: #c8a45e;
font-weight: 600;
} .nite-loading {
text-align: center;
color: rgba(240, 230, 211, 0.4);
padding: 48px 0;
font-size: 14px;
grid-column: 1 / -1;
}
.nite-empty {
text-align: center;
color: rgba(240, 230, 211, 0.4);
padding: 48px 0;
font-size: 14px;
grid-column: 1 / -1;
} @keyframes nite-pulse-gold {
0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(200, 164, 94, 0.4); }
50% { opacity: 0.85; box-shadow: 0 0 0 8px rgba(200, 164, 94, 0); }
}
@keyframes nite-fade-in-up {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
} .nite-fade-enter {
opacity: 0;
transform: scale(0.95) translateY(20px);
}
.nite-fade-active {
opacity: 1;
transform: scale(1) translateY(0);
transition: opacity 0.4s ease, transform 0.4s ease;
} .nite-territory-wrapper ~ #wpadminbar,
body.nite-territory-active #wpadminbar {
display: none !important;
}