/* Footer redesign */
#footer {
  background: #0e1420;
  color: #c9d1d9;
  border-top: 1px solid rgba(255,255,255,0.08);
}

#footer .content {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 16px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.footer-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.footer-logo .brand-name {
  font-weight: 700;
  letter-spacing: 0.3px;
}

.footer-copy {
  opacity: 0.8;
  font-size: 14px;
}

.footer-nav .footer-links,
.footer-social .footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-links a {
  color: #8cb4ff;
  text-decoration: none;
}

.footer-links a:hover {
  text-decoration: underline;
}

.cookie-note {
  font-size: 13px;
  opacity: 0.85;
}

.auth-links {
  margin-top: 8px;
  display: flex;
  gap: 16px;
}

.auth-links a {
  color: #ffb86b;
}

@media (min-width: 700px) {
  .footer-grid {
    grid-template-columns: 1.2fr 1fr 1fr 1.4fr;
    align-items: start;
  }
}
@font-face {
    font-family: teko;
    font-weight:normal;
    src: url(fonts/Teko-Medium.ttf);
  }
  @font-face {
    font-family: roboto-mono;
    font-weight:normal;
    src: url(fonts/RobotoMono-Regular.ttf);
  }
 


@font-face {
    font-family: roboto;
    font-weight:normal;
    src: url(fonts/Roboto-Regular.ttf);
  }


  @font-face {
    font-family: exo;
    font-weight:normal;
    src: url(fonts/Exo-Regular.ttf);
  }
  @font-face {
    font-family: exo;
    font-weight:bold;
    src: url(fonts/Exo-Bold.ttf);
  }
  body {
    font-family: exo, arial, sans-serif;
    margin: 0;
    font-size: 15px;
    background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
    color: #e0e0e0;
    line-height: 1.6;
    min-height: 100vh;
    background-attachment: fixed;
}

#stockChart {
        width:100%;
       height:300px;
    }
#stockpopup h1 {
    text-align: center;;
}
#stockpopup
{
    text-align: center;;
    display:none;
    position:fixed;
    top:75px;
    left:50%;
    transform: translate(-50%,0);
    width:90%;
    max-width:800px;
    height:auto;
    background-color:#000000;
    border-radius: 8px;;
    padding:20px;
    z-index:1000;

    
    
}
ul {
    color:white;
    font-weight:normal;
}
.pre-text ul {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}
.breaking {
    background-color:#ffcc00;
    color:black;
    padding:5px 10px;
    border-radius: 5px;
    font-size:14px;
    font-weight:bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom:10px;
    width:150px;
}
input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: rgba(30, 30, 46, 0.8);
    border: 2px solid rgba(74, 158, 255, 0.3);
    border-radius: 8px;
    padding: 12px 16px;
    color: #e0e0e0;
    font-family: "exo", arial, sans-serif;
    font-size: 14px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

input:focus {
    outline: none;
    border-color: #4a9eff;
    box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.2);
    background: rgba(30, 30, 46, 0.9);
}

input::placeholder {
    color: #888;
    opacity: 1;
}

/* Modern Game Effects */
.glow {
    animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
    from {
        box-shadow: 0 0 10px rgba(74, 158, 255, 0.5);
    }
    to {
        box-shadow: 0 0 20px rgba(74, 158, 255, 0.8), 0 0 30px rgba(74, 158, 255, 0.6);
    }
}

.pulse {
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.shake {
    animation: shake 0.5s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* Modern Card Effects */
.card {
    background: rgba(30, 30, 46, 0.8);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.card:hover {
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4);
    border-color: rgba(74, 158, 255, 0.3);
}

/* Modern Progress Bars */
.progress-bar {
    background: rgba(30, 30, 46, 0.8);
    border-radius: 10px;
    height: 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.progress-fill {
    background: linear-gradient(90deg, #4a9eff 0%, #66b3ff 100%);
    height: 100%;
    border-radius: 8px;
    transition: width 0.3s ease;
    box-shadow: 0 0 10px rgba(74, 158, 255, 0.5);
}

/* Modern Links */
a {
    color: #4a9eff;
    text-decoration: none;
    transition: all 0.3s ease;
}

a:hover {
    color: #66b3ff;
    text-shadow: 0 0 8px rgba(74, 158, 255, 0.5);
}

/* Modern Tables */
table {
    /* background: rgba(30, 30, 46, 0.8); */
    border-radius: 12px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    /* box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); */
    border: none;
}

th {

    color: #e0e0e0;
    padding: 6px 2px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 11px;
    border-right: none;
    border-left: none;
}

td {
    padding: 8px 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-right: none;
    border-left: none;
    transition: background-color 0.3s ease;
}

tr:hover td {
    background: rgba(74, 158, 255, 0.1);
}


.skillbox {
    background: linear-gradient(180deg, #0054d1 0%, #0099ff 100%);
    border-radius: 12px;
    font-size:20px;
    font-weight:bold;
    width:50px;
    margin:0 auto;
    padding:4px 10px;
    color:white;
    margin-top:5px;
    margin-bottom:5px;
}
/* Modern Form Elements */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: #e0e0e0;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 12px;
}

/* Modern Badges */
.badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-success {
    background: linear-gradient(135deg, #2ed573 0%, #1dd1a1 100%);
    color: white;
}

.badge-warning {
    background: linear-gradient(135deg, #ffa502 0%, #ff6348 100%);
    color: white;
}

.badge-danger {
    background: linear-gradient(135deg, #ff4757 0%, #c44569 100%);
    color: white;
}

.badge-info {
    background: linear-gradient(135deg, #4a9eff 0%, #0068c9 100%);
    color: white;
}

/* Modern News Design */
.news-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.news-header {
    text-align: center;
    margin-bottom: 40px;
    padding: 40px 0;
    background: linear-gradient(135deg, rgba(74, 158, 255, 0.1) 0%, rgba(102, 179, 255, 0.1) 100%);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.news-logo {
    max-width: 200px;
    height: auto;
    margin-bottom: 20px;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.news-nav {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.news-nav .knap {
    min-width: 140px;
    font-size: 12px;
    padding: 10px 16px;
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 24px;
    margin-bottom: 40px;
}

.news-card {
    background: rgba(30, 30, 46, 0.8);
    border-radius: 16px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
    min-height: 200px;
}

.news-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4);
    border-color: rgba(74, 158, 255, 0.3);
}

.news-card.featured {
    grid-column: span 2;
    background: linear-gradient(135deg, rgba(74, 158, 255, 0.1) 0%, rgba(102, 179, 255, 0.1) 100%);
}

.news-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    font-size: 12px;
    color: #b0b0b0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.news-date {
    background: rgba(74, 158, 255, 0.2);
    padding: 4px 8px;
    border-radius: 6px;
    color: #4a9eff;
    font-weight: 600;
}

.news-division {
    background: rgba(46, 213, 115, 0.2);
    padding: 4px 8px;
    border-radius: 6px;
    color: #2ed573;
    font-weight: 600;
}

.news-title {
    font-size: 20px;
    font-weight: 700;
    color: #e0e0e0;
    margin-bottom: 16px;
    line-height: 1.3;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    margin-right: 100px;
    padding-right: 20px;
}

.news-content {
    color: #b0b0b0;
    line-height: 1.6;
    margin-bottom: 20px;
    font-size: 14px;
    margin-right: 100px;
    padding-right: 20px;
}

.news-read-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #4a9eff;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
}

.news-read-more:hover {
    color: #66b3ff;
    text-shadow: 0 0 8px rgba(74, 158, 255, 0.5);
}

.news-read-more::after {
    content: '→';
    transition: transform 0.3s ease;
}

.news-read-more:hover::after {
    transform: translateX(4px);
}

.news-player-card {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 80px;
    height: 80px;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid rgba(74, 158, 255, 0.3);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
}

.news-player-card:hover {
    transform: scale(1.1);
    border-color: #4a9eff;
    box-shadow: 0 6px 20px rgba(74, 158, 255, 0.4);
}

.news-skill-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
    color: white;
    padding: 2px 6px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.news-talent-badge {
    position: absolute;
    top: 4px;
    left: 4px;
    background: linear-gradient(135deg, #ffa502 0%, #ff6348 100%);
    color: white;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.news-stadium {
    float: right;
    width: 200px;
    max-width: 50%;
    margin: 0 0 16px 16px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.news-ball-icon {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    opacity: 0.7;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.news-date-header {
    text-align: center;
    margin: 40px 0 20px 0;
    padding: 20px;
    background: linear-gradient(135deg, rgba(74, 158, 255, 0.1) 0%, rgba(102, 179, 255, 0.1) 100%);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.news-date-header h1 {
    color: #e0e0e0;
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Responsive Design */
@media (max-width: 768px) {
    .news-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .news-card.featured {
        grid-column: span 1;
    }
    
    .news-nav {
        flex-direction: column;
        align-items: center;
    }
    
    .news-nav .knap {
        width: 200px;
    }
    
    .news-title {
        margin-right: 0;
        padding-right: 0;
        margin-bottom: 20px;
    }
    
    .news-content {
        margin-right: 0;
        padding-right: 0;
    }
    
    .news-player-card {
        position: relative;
        top: auto;
        right: auto;
        margin: 16px 0;
        width: 60px;
        height: 60px;
    }
    
    .news-ball-icon {
        position: relative;
        top: auto;
        right: auto;
        margin: 16px 0;
        width: 40px;
        height: 40px;
    }
}

/* Modern Dashboard Design */
.dashboard-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}

.dashboard-header {
    text-align: center;
    margin-bottom: 40px;
    padding: 40px 0;
    background: linear-gradient(135deg, rgba(74, 158, 255, 0.1) 0%, rgba(102, 179, 255, 0.1) 100%);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.dashboard-welcome {
    font-size: 28px;
    font-weight: 700;
    color: #e0e0e0;
    margin-bottom: 10px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.dashboard-subtitle {
    color: #b0b0b0;
    font-size: 16px;
    margin-bottom: 20px;
}

.dashboard-stats {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.dashboard-stat {
    text-align: center;
    padding: 20px;
    background: rgba(30, 30, 46, 0.6);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    min-width: 120px;
}

.dashboard-stat-value {
    font-size: 24px;
    font-weight: 700;
    color: #4a9eff;
    margin-bottom: 5px;
}

.dashboard-stat-label {
    font-size: 12px;
    color: #b0b0b0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 24px;
    margin-bottom: 40px;
}

.dashboard-main {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.dashboard-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.dashboard-card {
    background: rgba(30, 30, 46, 0.8);
    border-radius: 16px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.dashboard-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4);
    border-color: rgba(74, 158, 255, 0.3);
}

.dashboard-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.dashboard-card-title {
    font-size: 20px;
    font-weight: 700;
    color: #e0e0e0;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.dashboard-card-icon {
    width: 32px;
    height: 32px;
    opacity: 0.7;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.match-card {
    background: linear-gradient(135deg, rgba(74, 158, 255, 0.1) 0%, rgba(102, 179, 255, 0.1) 100%);
    border: 2px solid rgba(74, 158, 255, 0.3);
}

.match-teams {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20px 0;
}

.match-team {
    text-align: center;
    flex: 1;
}

.match-team-logo {
    width: 64px;
    height: 64px;
    margin: 0 auto 10px;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.match-team-name {
    font-size: 16px;
    font-weight: 600;
    color: #e0e0e0;
    margin-bottom: 5px;
}

.match-team-standing {
    font-size: 12px;
    color: #b0b0b0;
}

.match-score {
    text-align: center;
    margin: 0 20px;
}

.match-score-value {
    font-size: 32px;
    font-weight: 700;
    color: #4a9eff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.match-score-label {
    font-size: 12px;
    color: #b0b0b0;
    margin-top: 5px;
}

.cup-round-badge {
    display: inline-block;
    background: linear-gradient(135deg, #4a9eff 0%, #357abd 100%);
    color: #ffffff;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 8px rgba(74, 158, 255, 0.3);
}

.cup-match-info {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.cup-match-info p {
    margin: 0;
    color: #b0b0b0;
    font-size: 14px;
}

.cup-no-match {
    color: #888;
    font-style: italic;
    margin: 20px 0;
}

.match-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 20px;
}

.standings-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: rgba(20, 20, 35, 0.6);
    border-radius: 12px;
    overflow: hidden;
}

.standings-table th {
    background: rgba(74, 158, 255, 0.2);
    color: #e0e0e0;
    padding: 12px 8px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
}

.standings-table td {
    padding: 10px 8px;
    color: #b0b0b0;
    font-size: 13px;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.standings-table tr:hover td {
    background: rgba(74, 158, 255, 0.1);
    color: #e0e0e0;
}

.standings-position {
    font-weight: 700;
    color: #4a9eff;
    text-align: center;
    width: 30px;
}

.standings-club {
    font-weight: 600;
    color: #e0e0e0;
}

.standings-points {
    font-weight: 700;
    color: #2ed573;
    text-align: center;
}

.prize-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 20px;
}

.prize-item {
    text-align: center;
    padding: 16px;
    background: rgba(20, 20, 35, 0.6);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.prize-medal {
    width: 45px;
    height: 45px;
    margin: 0 auto 10px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.prize-amount {
    font-size: 16px;
    font-weight: 700;
    color: #2ed573;
}

.tutorial-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 30px;
}

.tutorial-btn {
    padding: 12px 24px;
    background: linear-gradient(135deg, #4a9eff 0%, #0068c9 100%);
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.tutorial-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(74, 158, 255, 0.4);
    color: white;
    text-decoration: none;
}

.email-item {
    background: rgba(20, 20, 35, 0.6);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: all 0.3s ease;
}

.email-item:hover {
    background: rgba(74, 158, 255, 0.1);
    border-color: rgba(74, 158, 255, 0.3);
    transform: translateY(-1px);
}

.email-date {
    font-size: 11px;
    color: #4a9eff;
    font-weight: 600;
    margin-bottom: 8px;
}

.email-subject {
    font-size: 16px;
    font-weight: 600;
    color: #e0e0e0;
    margin-bottom: 8px;
}

.email-preview {
    font-size: 13px;
    color: #b0b0b0;
    line-height: 1.4;
}
/* Newsticker */
.newsticker {
    width:100%;
    background:black;
    overflow:hidden;
    position:relative;
    /* no line break */
    white-space: nowrap;
    animation: newsticker 30s linear infinite;
}
.newstickercontainer {
    width:100%;
    background:black;
    overflow:hidden;
    position:relative;
    padding: 5px 0px;
}
@keyframes newsticker {
    0% {
        transform: translateX(20%);
    }
    100% {
        transform: translateX(-100%);
    }
}
/* Responsive Dashboard */
@media (max-width: 1200px) {
    .dashboard-grid {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
    
    .dashboard-main {
        grid-column: span 2;
    }
}

@media (max-width: 768px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .dashboard-main {
        grid-column: span 1;
    }
    
    .dashboard-stats {
        gap: 16px;
    }
    
    .dashboard-stat {
        min-width: 100px;
        padding: 16px;
    }
    
    .match-teams {
        /* flex-direction: column; */
        gap: 20px;
    }
    
    .match-score {
        margin: 0;
    }
    
    .prize-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .tutorial-buttons {
        flex-direction: column;
        align-items: center;
    }
}

.eye {
  background: url(img/eye.png) no-repeat;
  background-size: 100% 100%;
  border: none;
  width: 32px;
  height: 20px;
  cursor: pointer;
 /* set in right side of input */
  position: absolute;
  right: 10px;
  top: 16px;
  z-index: 1;
}
.passwordinput {
  position: relative;
}

.spacing {
   height:20px;
}
select {
    font-family: exo;
    font-size: 14px;
    padding: 12px 16px;
    background: rgba(30, 30, 46, 0.8);
    color: #e0e0e0;
    border: 2px solid rgba(74, 158, 255, 0.3);
    border-radius: 8px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

select:focus {
    outline: none;
    border-color: #4a9eff;
    box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.2);
}

.smalltxt {
    font-size: 11px;
    color: #94a9cc;
}
.prehide {
   display:block;
   position: fixed;
   height:100%;
   width:100%;
   background:#000;
   z-index:9999;
}
.pre-top {
    width:100%;
    height:600px;
    background: url('img/info/win.jpg');
    background-size:cover;
    background-position: center;
    padding:50px;
}
.pre-logo {
    width:600px;
    position:relative;
    margin:0 auto;
    margin-bottom:70px;
}
.pre-logo img {
    width:100%;
}
.pre-knap {

    width: 226px;
    height: 77px;
    background: #0099FF;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
    border-radius: 8px;
    font-family: 'exo';
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 29px;
    text-align: center;
    padding:20px 10px;
    line-height:1.5;
   
    color: #FFFFFF;
    display:inline-block;
    margin:50px 30px;
   
}
.pre-knap-low {
    background:#29355c;
    color:#07a9f5;
}
a.pre-knap:hover {
    text-decoration: none;
    background: #003399;
}
.pre-wide {
    width:100%;
    background-color: #101824;
   
}
.pre-text {
    width:800px;
    margin:0 auto;
    padding:35px 10px;
}
.pre-text h1 {
    font-family: 'exo';
    font-style: normal;
    font-weight: 700;
    font-size: 36px;
    line-height: 39px;
    color: #0099FF;
}
.pre-text {
    font-family: 'exo';
    font-style: normal;
    font-weight: 700;
    font-size:16px;
    color: #0099FF;
}
.pre-text p {
    font-family: 'exo';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    color: #FFFFFF;
}
.pre-video {
    width:800px;
    height:800px;
}
.pre-video-container {
    width:800px;
    margin:0px auto;

}

#toppart {
    position:sticky;
}
/* For logo , team etc  */
#infobar
 {
    background:#26353f;
    padding:10px;
    position:fixed;
    top:50px;
    width:100%;
    height:60px;
    box-shadow: 0px 0px 20px #000000;
    z-index:302;
    transition: all 0.5s;
    text-shadow: 2px 2px 2px #00000060;
    overflow:hidden;
    
}
#infobar small {
    font-size:12px;
    font-weight: normal;
}

#infobar .icon
{
    vertical-align:top;
    margin-right:10px;
    margin-left:0px;
    height:32px;
    padding:0px;
}
#infobar label 
{
    margin:0px;
    font-size:11px;
    padding: 0px;
    color: #0072bd;
    margin-bottom:-5px;
    transition: all 0.5s;
}
.floatleft {
    float:left;
}
#infobar a {
    color:white;
    text-decoration: none;
}

.infobarlogo {
    height:100%;
    transition:all 0.5s;
}
.infobar-txt {
float:right;
font-family: exo;
font-size:20px;
font-weight:bold;
margin-left:20px;
padding:0px;
transition: all 0.5s;

}

/*
#appbarspace.smaller {
    height:91px;
}
#infobar.smaller {
    height:40px;
    padding:8px;
}

#infobar.smaller .infobar-txt {
    font-size:13px;
    font-weight:bold;
    margin-top:0px;
}
#infobar.smaller .shield {
    height:24px;
    image-rendering: auto;;
}
#infobar.smaller .icon {
    height:24px;
}
#infobar.smaller .infobarlogo {
    height:40px;
}
#infobar.smaller .infobarlogo {
    height:25px;
}
*/

@media (max-width:1200px) {
    .pre-video-container {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 100%;
    }
    .pre-video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}
@media (max-width:767px) {
    #toppart {
        position:fixed;
    }

    .pre-text {
        width:100%;
        padding:30px 20px;
    }
    .pre-text h1 {
        font-size:24px;
        line-height:1.1;
    }
    .pre-knap {
        margin:10px;
        width:125px;
        font-size:18px;
        height:60px;
        padding:5px 10px;
        /* vertical center text */
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .pre-logo {
        width:95%;
        margin:70px auto 100px auto;
     
    }
    .pre-logo img {
        width:100%;
    }
    .pre-top {
        padding:20px 20px;
        height:500px;
    }
}


input[type=range] {
    -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
    background: transparent; /* Otherwise white in Chrome */

    margin:10px 0px;
    width:100%;

    border: none !important;  /* Add !important */
    outline: none !important; /* Also ensure no outline */
    

  }


  
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: 0px solid #000000;
    height: 32px;
    width: 32px;
    border-radius: 16px;
    background: #006eff;
    cursor: pointer;
    margin-top: -14px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
    
  }

  
  input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 8.4px;
    cursor: pointer;

    background: #2c557b;
    border-radius: 2px;
 

  }
  input[type=range]::-moz-range-track
  
  {
    background: #2c557b;
}

input[type=checkbox] {
    appearance: checkbox;
    -webkit-appearance: checkbox;
    -moz-appearance: checkbox;
    height:20px;
    width:20px;
    margin-right:10px;
    vertical-align: middle;
 
    }
    input[type=radio] {
        appearance: radio;
        -webkit-appearance: radio;
        -moz-appearance: radio;
        height:20px;
        width:20px;
        margin-right:10px;
        vertical-align: middle;
     
        }
h2 {font-size:24px;font-weight: 600}
h2 a {color:white;}
h2 a:hover {text-decoration: none;}
  input[type=range]:focus {
    outline: -webkit-focus-ring-color auto 0px;
}
.spacebelow {
    margin-bottom:20px;
}
.spaceabove {
    margin-top:20px !important;
}
.rounded {
    border-radius:8px;
    overflow: hidden;
}
.datemonth {
    background-color:#cc2200;
    padding:2px;
    margin:0px;
    display:block;
}
.dateday {
    background-color:#fff;
    padding:5px 5px 0px 5px;
    color:black;
    margin:0px;
    display:block;
    font-size:32px;
    font-weight:bold;
}
.dateyear {
    margin:0px;
    background-color:#ffffff;
    padding:0px 5px 5px 5px;
    font-size:11px;
    color:#535353
}
.datesign {
    width:100px;
    text-align: center;
    float:left;
    border-radius:8px;
    overflow: hidden;
    margin-right:8px;
}
.dateinfo {
    float:left;
}
.leftlabel {
    width:125px;
    display:inline-block;
    color:#0099ff;
    font-size:14px;
    
}
.datasmall {
    width:100px;
    display:inline-block;
}
#data {
   /*  display:none; */
}
  input[type=range]:focus::-webkit-slider-runnable-track {
    background: #2c557b;
    border:none;
    
  }

.leader {
    width:500px;
    margin:0 auto;
    margin-bottom:40px;
}
.leader h2 {
    font-size:24px;
    margin-top:0px;
    margin-bottom:10px;
}
  table {
    font-size:15px;
    width:100%;
    border-spacing:0;
}
td small {
    font-size:10px;
    text-transform: uppercase;
}
.zoombox {
    animation:zoombox 0.5s both;
}
@keyframes zoombox {
    /* Bounce */
    0% {transform: scale(0.9);opacity:0}
    50% {transform: scale(1.1);opacity:1}
    100% {transform: scale(1);}
}
#loginbox p {
    margin-top:0px;
    margin-bottom:6px;
}
#loginbox td
{
    border-bottom:0px  !important;
   
}

#loginbox td
{
   /* Add spacing below */
    margin-bottom: 10px;
}

#loginbox tr:active {
    background-color:none;
}
.console {
    background:#222;
    color:#0f0;
    padding:20px;
    display:none;
}
.finger {
    cursor:pointer;
}
.divider {
    width:100%;
    background:#305c88;
    height:1px;
    display:block;
    margin:10px 0px;
}

.resultteam {
    display: block;
    float:left;
    width:40%;
    padding:10px 0px;
    font-family: exo;

    font-size:16px;
}
.resultteam img {
    margin-bottom:6px;
}
.resultscore
{
    display:block;
    width:20%;
    float:left;
    font-size:25px;
    padding:10px 0px;
    font-family: exo;;
}


form {margin:0px;}

.video {
width:100%;
height:700px;
position: absolute;
top:0px;
left:0px;
padding:40px;
background:#000000e0;
}
.onboard {
    border-radius: 4px;
    background-color:#203050;
    box-shadow: 4px 4px 20px #000;
    padding:10px;
    font-size:15px;
    color:#b4c3df;
    margin-bottom:20px;
    margin-top:20px;

}
.onboard h1 {
    font-size:15px;
    color:#fff;
    margin-bottom: 5px;
}
#topinfobar {
    width:100%;
    height:37px;
    background-color: #0E1825;
    position: relative;
    z-index:700;
    color:#0099FF;
    padding-top:7px;

}
#topinfobar b {
    color:white;
    margin-right:10px;
}
.underline {
    border-bottom: 1px #333 solid;
    margin-bottom:3px;
}
.ptype {
    font-size:19px;
    color:#0099ff;
    font-family: exo;
}
.clublogo
{
    float:right;
    position: relative;
}
.bigskill {
    font-size:40px;
    font-family: exo;
    font-weight: bold;
    text-align:center;
    line-height:1;
    margin-bottom:15px;
}
.clubname {
    font-size:16px;
    color:#888;
    font-family: exo;
    margin-bottom:10px;
}
.redbubble {
    padding:2px 6px;
    font-size:12px;
    background-color:red;
    color:white;
    font-weight:bold;
    border-radius: 100px;
}
.infolabel {
    width:50%;
    display: block;
    color:#888;
    float:left;
    font-size:14px;
    line-height:1.0;

}
.infovalue {
    color:white;
        display: block;
    text-align:right;
    width:25%;
    font-weight: bold;
    font-family: exo;
    font-size:16px;
    float:left;

}
.infoenergy {
    width:25%;
    padding-left:10px;
    padding-top:7px;
    display: block;
    float:left;
  
}

.knap.newline {
    display:block;
    width:300px;
    border-radius: 8px;;
    margin:3px auto;
}




.infoline {
    width:100%;
    height:auto;
    border-radius: 13px;
    background-color:#0055cc;
    font-size:14px;
    text-align: center;
    line-height: 1.7;
    margin-bottom:10px;
}

@media (max-width:1024px) {
    .infolabel {
        font-size:11px;
    }
    .infoline {
        font-size:11px;
    }
    .infovalue {
        font-size:15px;
    }
    .knap.newline {
        width:100%;
    }
    label {
        font-size:16px;
    }
    .infobarlogo {
        width:128px;
        height:auto;
    }
    .infobar-txt {
        font-size:14px;
    }
    #infobar .icon {
        height:32px;
        margin-right:4px;
    }

}



#cardsidex h2 {
    margin-top:0px;
    margin-bottom:2px;;
}

.datalabel {
  width:33%;
  height:20px;
  float:left;
}
.datanum {
  width:67%;
  height:20px;
  float:left;
}
.warningline {
    background:#bb0000;
    width:100%;
    padding:10px 10px;
    border-radius:0px;

    color:#ffffff;
    width:100%;
    text-align: center;
}
.warningline p {
    margin:0px;
    color:#ffffff;
}
.warningbar {
    background:#080d14d0;
    max-width:600px;
    border-radius:10px;

    color:#ffffff;
    width:100%;
    text-align: center;
    z-index:100;
    padding:10px;
    top:120px;
    position:fixed;
    left:50%;
    transform: translate(-50%,0);
    cursor:pointer;

}  

.colorbutton {
    width:32px;
    height:32px;
    border-radius: 16px;
    background:red;
    display:inline-block;
    cursor: pointer;
}
.colorbutton:hover {
    /* scale 10% */
    transform: scale(1.2);
}

.breaking2 {
display:none
}
.breaking3 {
display:none
}

@keyframes breaking2 {
    0% {height:0px}
    100% {height:20px;}
}  


#onlineplayers {
    position:fixed;
    right:10px;
    bottom:10px;
    z-index:1000;
    border-radius: 16px;
    background-color:black;
    padding:5px;
    font-size:12px;
    background: #222 url(img/dot.png) no-repeat 4px 8px;
    cursor: pointer;
    padding-left:24px;

}
#onlineplayerlist {
   display:none;
    position:fixed;
    right:10px;
    bottom:40px;
    z-index:100;
    border-radius: 8px;
    
    padding:5px;
    font-size:12px;
    background-color:#111;
    cursor: pointer;
    width:200px;

    color:#fff;
}
#onlineplayerlist .playerclub {

    color:#888;
    margin-bottom:4px;
}
.flash {
    animation:flash 2s;
}
@keyframes flash {
    0% {opacity:1;}
    50% {opacity:0.25;}
    100% {opacity:1;}
}
.updatebar {
    top:0px;
    width:100%;
    height:4px;
    background-color:#0099ff20;
    display:block;    
    border-radius: 2px;
    overflow: hidden;
    margin-bottom:4px;
  
}
.updatebar2 {
    height:100%;
 
    background-color:#00408e;
    display:block;
  
}
.applogo {

    width:200px;
    padding:7px;
    position:absolute;
    lefT:0px;
    top:0px;    


}
.applogo img {
    width:100%;
    display:none;
}

#appbar {
    display:block;
    height:50px;
    /* Stick at top at window */
    position:fixed;

    top:0px;
    z-index:500;
    width:100%;
    background:#031627;
    color:#3AAEEF;
    font-size:11px;

    text-align: center;
    overflow:hidden;
    /* Shadow below */
    box-shadow: 0px 0px 7px #000000f0 ;
}

#appbarspacer {
    height:50px;
    display:block;
    transition: height 0.5s ease-in-out;
}

#appbuttons {
    width:100%;
    margin:0 auto;
    position: relative;
   /* background-color: #ff0033; */
}
.appbtn {
    padding:10px;
    width:70px;
    height:100%;
    display: inline-block;
    text-align: center;
    transition: background-color 0.2s;
    position: relative;

}
.appbtn:hover {
    background-color:#003360 ;
}
.appbtn img {
    height:14px;
    margin-bottom:5px;
}
.appbtn.selected {
    background:#003f76;
 
    
}
.appmain {
    color:#81ccff;
    background:#006eff;
}
.appmain.selected {
    background:#0f77ff;
    color:white;

}   
.appmain:hover {
    background-color:#068bff ;
}


#playermenu {
    position: absolute;
    z-index: 25;
    background:#444444;
    padding: 10px;;
    top:0px;
}   

.scoutlimit {
  background-color:#3b6b8e;
  width:23%;
  float:left;
  text-align:center;
  border-radius:6px;
  margin:0px 1%;
  padding:10px;
  margin-bottom:20px;  
}

.stockbar {
    width:100%;

    background:black;
    padding:10px;
    overflow:hidden;

    position: relative;
}
.stockbarinner {
    white-space: nowrap;
    animation: stockbar 80s linear infinite;
}
@keyframes stockbar {
    0% {margin-left:0px;}
    100% {margin-left:-4000px;}
}
    
.rel {position:relative;}

.arrow {
    background:url('img/pstyleup.png') no-repeat 0px 0px;
    top:40px;
    width:100px;
    height:140px;
    position:absolute;
    z-index:299;
    animation:intro 1s both;
}

.arrow .info {
    background:#0055cc;
    text-align: center;
    color:white;
    padding:10px;
    left:-20px;
    top:60px;
    width:200px;
    position:relative;
    border-radius: 6px;
    box-shadow: 3px 3px 10px #000;
  
}

.appbtn .arrow {
    margin-top:-250px;
    background:url('img/pstyledown.png') no-repeat 0px 100px;
    height:200px;
}
@media (max-width:767px) {
    #appbarspacer {
        display: none;
    }
    .arrow .info {
        width:125px;
        left:-30px;
    }
}

@keyframes intro {
    0% {top:40px;}
    50% {top:60px;}
    100% {top:40px;}
    
    
}

.subknap {
    background-color: #0a3755;
    color:white;
    font-size:13px;
    border-radius: 4px;
    display: inline-block;
    padding:10px;
    margin-bottom:7px;
    margin-right:4px;
    cursor: pointer;
}
.subknap:hover {
    background-color: #15669c;
}

#votenextday {
    bottom:0px;
    right:50%;
    margin-right:-650px;
    border-radius: 10px 10px 0px 0px;
    background-color: #0068ad;
    z-index:595;
    padding:10px;
    position:fixed;
    cursor: pointer;
    box-shadow: 0px 0px 10px #000000 ;
}
#output {
    text-align:center;

}
#output p {
    padding:10px 0px;
    font-weight: bold;;
}
#votenextday:hover {
    background-color:#00aaff
}
#nextupdate {
    position:fixed;
    bottom:0px;
    right:50%;
    margin-right:-500px;
    z-index:595;
    background: #002c52;;
    border-radius: 10px 10px 0px 0px;
    padding:10px;
    box-shadow: 0px 0px 10px #000000 ;
}
#playerstate {
    width:100%;
    text-align: center;
    background-color:#90CCF8;
    color:black;
    padding:10px 0px;
}



#playerhelp {
    width:100%;
    text-align: left;
    background-color:#0077cc;
    color:white;
    font-size:18px;
}
#playerhelp a.knap {
width:125px;
text-align: center;
}
#playerhelp a.knap:hover {
    background-color: #001122;
    }

#realtime {
  font-family: teko,arial,sans-serif;
  font-size:45px;
  color:#0099ff;
 
}

/* Website */
.webtop {
    padding:20px;
    font-size:30px;
    font-weight: bold;
    font-family: exo;
    text-transform: uppercase;
    letter-spacing: 10px;
    color:white;
    text-shadow: 4px 4px 5px #00000080;
    background-image: url(img/matchday.jpg);
    background-size: cover;
    background-position: center center;
    background-blend-mode: soft-light;

}
.webtop .weblogo {
    vertical-align:middle
}

.webwidth {
    width:100%;
}
.webwidth h2 {
    margin-bottom:20px;
}
.webwidth h4 {
    color:white;
    opacity:0.4;
}
.webwidth p {
    color:white;
    opacity:0.7;
}

@media (max-width:737px) {
    .webtop .weblogo {
        display:block;
       margin:0 auto;
       margin-top:40px;
    }
    .webtop {
        font-size:20px;
        letter-spacing: 5px;
    }
    
    
}

#mainarea-wide {
    background-color:#080D14;
    width:100%;
    position:relative;

    
    /* min-height:400px; */
}

.mainback {
    background-color:#262f3b;
}

/* OVERLAY reklame side */
.pre-wide {
    width:100%;
    position: relative;
}
.pre-overlay {
    position:absolute;
    left:50%;
    margin-left:-350px;
    width:700px;
    top:50px;
    height:500px;
    background-color:#000000b0;
    border-radius: 8px;;
    padding:40px;
    overflow:hidden;
}
.pre-right {
    left:50%;
    margin-left:-350px;
    width:700px;
 
}
.pre-overlay h1 {
    font-size:30px;
    font-weight: 600;
    color:#0099ff;
}
.pre-overlay h2 {
    font-size:20px;
    font-weight: 600;
    color:#0099ff;
}
.pre-overlay p {
    color:#b6b6c9;
}
.pre-image {
    background-size: cover;
    background-position: center;
    width:100%;
    height:600px;
}
@media (max-width:800px) {
    .pre-overlay {
        left:5%;
        width:90%;
        margin:0px;
        padding:25px;
        height:auto;
     
    }
    .pre-image {
        height:760px;
    }

}

#nextmatch {
  padding: 20px 5px;
  text-align:center;
    background-image: url('img/matchday.jpg');
    background-size: cover;
    background-position-x: center;
    background-position-y: center;
  
  border-radius:8px;
  display:block;
  width:100%;
  margin-bottom:25px;
  text-shadow: 2px 2px 2px #000;
  box-shadow: 0px 10px 30px #000;
}
#nextmatch h3 {
    font-size:25px;
    margin:10px 0px;
    color: #4b8fdd;
}
#nextmatch h3 a {
    color: white
}
#nextmatch h2 {
    margin-top:10px;
}
#nextmatch h4 {
    margin-top:5px;
    font-size:14px;
}
#nextmatch .energybar-container {
    width:80%;
    left:10%;
}

.stadiumgfx
{
    position:absolute;width:110%;
    margin-left:-5%;
    margin-top:0%;
}
#playerlist h1 {
    margin:0px;
    font-size:20px;
}

#playerlist .smallknap {
    padding:2px 6px;
    margin:-1px;

}

.linkbutton {
    padding:2px 10px;
    background-color:#00538b;
    border-radius: 40px;
    font-size:14px;
    color:white;
    display: inline-block;
    margin-bottom:2px;
    min-width:100px;
    text-align: center;

}
.popinbar {
    position:fixed;
    width:300px;
    z-index:500;
    top:50px;
    left:50%;
    background:#ffffff;
    color:#003360;
    padding:10px;
    border-radius:10px;
    margin-left:-150px;
    box-shadow: 2px 2px 20px #000000;
    animation:popin 1s both;
    text-align:center;
}
.popinbar p {
    color:#444;
}
.popinbar h2 {
    color:#003360;

}
@keyframes popin {
    0% {top:-100px;}
    100% {top:60px;}
}
.linkbutton:hover {
    background-color:#0068ad;
    text-decoration: none;;
}

.players-main {
    background-color:#183027; 
}
.players-sub {
    background-color:#162939;
}
.log {font-size:12px;padding:0px;width:auto;}


a{
   color:#0099ff;
   text-decoration: none;;
}
a:hover {
  
    text-decoration: underline;
}

p {
    margin-top:6px;
    margin-bottom:12px;
    line-height:1.3;
    color:#9fc8eb;
    font-size:15px;
}
.allreg {
    cursor: pointer;
    width:50px;
    border: 4px solid #112736;
    vertical-align: middle;
    transition: border 0.5s;
    border-radius: 4px;
}
.allreg:hover {
    border: 4px solid #00aaff;
}
.allreg.selected {
    border: 4px solid #0099ff;
   
    box-sizing: border-box;
}


.shapewin {
    background:#66ff66;
    padding:2px;
    font-size:12px;  
    width:16px;
    display:inline-block;
    text-align:center;
    color:black;  
    text-shadow: none;
    margin-right:1px;
}
.shapelost {
    background:#d8002f;
    padding:2px;
    font-size:12px;  
    color:white;  
    width:16px;
    display:inline-block;
    text-align:center;
    text-shadow: none;
    margin-right:1px;
}

.shapedraw {
    background:#5e5e5e;
    padding:2px;
    font-size:12px;  
    color:white;  
    width:16px;
    display:inline-block;
    text-align:center;
    text-shadow: none;
    margin-right:1px;
}

#lockscreen {
    position: fixed;
    width:100%;
    height:100%;
    background:#000000e0;
    z-index:2000;
    display:none;
    padding-top:20%;
    text-align: center;

}
.loading {
    height:100px;
    width:100%;
    text-align: center;
    background:#000000c0;
}
.loadbar {
    height:10px;
    width:90%;
    background-color: #0099ff;
    border-radius: 6px;
    margin:30px 5%;
    animation: loadbar 60s linear both;
}
#loadinfo {
    font-size:12px;
    color:#777777;
}
@keyframes loadbar {
    0% {width:0%;}
    100% {width:90%;}
}

#lockscreen img {
    max-width:90%;
    margin-bottom:40px;
}
#lockscreen h1 {
    animation:pulse 1s ease-in-out infinite;
}
#gamespeed {
    border:1px solid #35405d;
    border-radius: 8px;
    padding:2px 10px;
    font-weight: bold;
    background-color:#00000070;
    width:50px;
}
h1.intro {
    text-shadow:2px 2px #000;
    margin-top:5px;
    margin-bottom:5px;
    text-align: center;
}
.headerbar {
    margin-top:0px;
    margin-bottom:15px;
    text-align: center;
    display:block;
    width:100%;
    background-color:#35405d;
    padding:5px 15px;
    border-radius: 8px;
    box-shadow: 0px 5px 10px #00000020;
}
.subheaderbar {
    margin-top:0px;
    margin-bottom:15px;
    text-align: center;
    display:block;
    width:100%;
    
    padding:5px 15px;
 
border-bottom: 1px solid #374772;
    margin-top:30px;
}
.matchline {
    display:flex;
    align-items: center;
    justify-content: space-between;
    gap:10px;
    width:100%;
    padding:5px 0px;
    font-size:18px;
    color:#ffffff;
}
.matchteam1 {
    width:50%;
    
    text-align: right;
}
.matchteam2 {
    text-align: left;
    width:50%;
}
.matchvs {
    text-align: center;
    width:50px;
}
.matchlink {
    display:block;
    width:100%;
   
    padding:2px 5px;
    color:rgb(171, 176, 192);
    font-size:20px;
}
.shadow {
    text-shadow: 2px 2px #000000;
}
@keyframes pulse {
    0% {opacity:1}
    50% {opacity:0.25}
    100% {opacity:1}
    
}
#userlist {
    position:fixed;
    bottom:0px;
    z-index:80;
    width:250px;
    left:50%;
    margin-left:-660px;
  
    border-radius:8px 8px 0px 0px;

}

#likebar {
    display:none;
    position: absolute;
    background-color: #00101b;
    z-index:500;
    top:200px;
    width:600px;
    left:50%;
    margin-left:-300px;
    padding:20px;
    border-radius: 8px;
    box-shadow:0px 0px 20px #000000;
}

.ppos1 {
    color: #FFFF53;
}
.ppos2 {
    color: #FF8F21;
}
.ppos3 {
    color: #3AAEEF;
}
.ppos4 {
    color: #00FF94;
}


@media (max-width:1400px) {
    #votenextday {
        margin-right:0px;
        right:20px;
        width:200px;
        text-align: center;;
        bottom: 0px;
    }
    #nextupdate {
       left:25px;
       right: auto;
       bottom: 0px;
        margin-left:20px;
        margin-right: auto;
        left:auto;
    }
    #userlist {
        right:10px;
        margin:0px;
        width:auto;
    }

}
.dropdown {
    padding:20px;
    position: absolute;
    background:#002446;
    z-index:600;
}
.users {
display:inline-block;
font-size:12px;;
text-shadow: 2px 2px #000000;
border-radius: 8px;
background:#000000e0;
padding:6px;

}
#boss {
    display:block;
    z-index:599;
    position:fixed;
    bottom:50px;
    height:128px;
    animation:boss 1s;
    
}
@keyframes boss {
    0% {bottom:-200px;}
    100% {margin-top:0px;}
}
.boss {
    float:left;
    /* width:108px; */
    height:128px;
    
}
.speachstroke {
    background-image: url("img/speachstroke.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 24px;
    height: 12px;
    float:left;
    margin-top:50px;;
    margin-left:-24px;
}

.bubble {
float:left;
width:600px;

background-color: #ffffff;
color:rgb(32, 32, 32);
text-shadow: none;
padding:15px;
border-radius: 20px;

overflow:hidden;
}

.bubble h3 {
    color:#000000;
    margin:0;
    font-weight:bold;
}
.bubble h4 {
    font-size:12px;
    color:#777;
    margin:0 0 5px 0;
    font-weight: normal;
}
.bubble p {
    margin:2px 0px;
    line-height:1.1;
    color:black;
}
.pixel {
    image-rendering: pixelated;
}
.users img {
    vertical-align: middle;
    margin-right:5px;
    height:15px;  
}

#playerbar {
    font-size:14px;
    font-family: exo;
}
#playerbar .labeltop {
    color:#0099ff;
    font-size:12px;
    font-weight: bold;
    text-align: center;
    margin-bottom:5px;
    margin-left:0px;
    margin-right:0px;
}
#playerbar .info {
    color:white;
    font-size:16px;
    text-align: center;
    margin-bottom:5px;
    margin-left:5px;
    margin-right:15px;
    
}

#dayinfo {
    text-align:center;
}
#topbar,
#topbarheader {

    width:100%;
    background-color: #000000; 
    

    background-size:cover;
    color:white;
    padding:0px;
    height:50px;
   
    bottom:0px;
   
    /* margin-top:55px; */
    position:fixed;
    z-index:600;
}
#topbar { padding-top: 4px;padding-bottom:0px; display:none;}
#topbarheader { padding-bottom: 0;padding:10px 10px 0px 10px; }

#menubar 
{
  /*  height:55px; */
    z-index: 20;
    background-color: #0E1825;
    color:white;
    padding:2px 10px;
    position:sticky;
    top:0px;
    box-shadow: rgba(0,0,0,0.5) 0px 4px 20px;
    width:100%;

}
#menubar .enforce
{
   font-weight: bold;;
}
#burgerbar {
    display:none;
}

label {
  
   display:block;
   color:#888;
   padding-top:10px;
   padding-bottom: 2px;

}
#logo{
    transition: height 0.3s;
    height:40px;
}
#loginbox label {
 
    text-align: left;;
    
   /*  display:inline-block; */
}
.fitimage {
    width:100%;
    height:auto;
    border-radius: 4px;;
}
.center label {
  margin:0 auto;
}
.leftalign {
    text-align:left;
}
label.above {
    color:#5f6cad;

}

/* Lucky wheel */

#wheelresult {

    /* gold gradient */
    background: #274276;
    position:fixed;
    z-index:2000;
    top:50px;
    /* Center */
    left:50%;
    margin-left:-200px;
    width:400px;
    padding:20px;
    border-radius: 8px;
    box-shadow: 0px 0px 20px #000000;

}

.bounce {
    animation: bounce 0.7s;
    margin-bottom:10px;
 
    /* use perspective depth */

    /* preserve 3d */
    transform-origin: center;



  

}
@keyframes bounce {
    0% {transform: scale(0.9) perspective(1000px)  rotateY(90deg);}
    70% {transform: scale(1.1);}
    100% {transform: scale(1.0)  rotateY(0deg);}

}



#topbarheader label,
#topbar label {
    color:#0099ff;
    font-weight: bold;
    padding:0px;
}
#topbarheader h2,
#topbar h2 {
    margin:0px;
}
.darkimage label {
    color:#0099ff;

}
label.same {
    display:inline-block;
    padding:0 0 5px 0;
}
.darkimage22 a {
    color:rgb(0, 162, 255);
}

#menubar a {
    color:white;
    display: inline-block;
    padding:10px;
    background-color: #0a3755;
    border-bottom: 6px solid #062133;
    text-decoration: none;
    border-radius: 4px;;
    margin:2px 0px;
    position:sticky;
    transition:  0.5s background-color, 0.5s border ;
}
#menubar a.logo {
    background:none;
    border:none;
    padding:1px;
    position:absolute;
    width:auto;
    height:45px;
    left:0px;
    margin:0px;
}

#menubar a.logo:hover {
    background:none;
    border:none;
}

#menubar a.highlight {

    background-color: #0066cc;
    border-bottom: 6px solid rgb(0, 72, 155);

}


#menubar a:hover {
    background-color:rgb(0, 87, 185);
    border-bottom: 6px solid rgb(0, 72, 155);
}
#topbarlogo {
    height:45px;
    transition: opacity 0.5s;
}
#content {
    width:1170px;
    padding:20px;  
    float:none;
    box-sizing: border-box;
}
.clearfix::after {
    content: "";
    clear: both;
    display: table;
  }
#footer {
    background:rgb(0, 0, 0);
    padding:50px 5px 150px 5px;
    margin-top: 0px;
    box-sizing: border-box;
    width:100%;
    color:rgb(134, 134, 134);

}
#cookie {
    display:block;
    position: fixed;
    /* Center vertically */
    bottom:10px;
    left:15%;
    width:70%;
    background-color:#ffffff;
    color:black;
    z-index:2000;
    height:auto;
    text-align: center;
    border-radius: 10px;
    padding:20px;
    box-sizing: border-box;
    box-shadow: 0px 0px 350px 30px #000000;
}

#cookie .knap {
    margin-top:25px;
}
#cookie .content {
    width:100%;
}
#cookie p {
    color:#444;
} 
#cookie a {
    font-weight: bold;;
    color:#0066dd;
} 
#privacy h2 {
    margin-top:25px;
}
#privacy {
    line-height:1.4;
}
#bundbar
{
    display: none;
    
   
    width:1200px;
    left:50%;
    margin-left:-600px;
    border-radius:8px 8px 0px 0px;
    background-color: #001d36;
    position:fixed;
    z-index:590;
    bottom:0px;
    color:#fff;
    padding:10px;
    text-transform: uppercase;
    
    font-size:13px;
    font-weight: bold;
    font-family: exo;
    box-shadow: 0px 0px 14px #000;
}
#bundbar .content
 {
    padding:0px;
    margin:0 auto;
}
#bundbar label {
        display: inline-block;
    margin:0 2px 0px 10px;
    padding:0px;
    width:auto;
    color:#0099ff;
}



.graph {
    position: relative;
    background:#002d8d80;
    display:block;
    border-radius: 10px;;
    margin-bottom:20px;
    width:100%;
    height: 0;
    padding: 0 0 46% 0;
    overflow:hidden; 
}
.graph svg {
  position: absolute;
  width: 100%;
  height: 100%;
}
.graph svg path {
    stroke: #0099ff;
    stroke-width: 4;
    fill: transparent;
} 
.innergraph {
    padding:0px;
    width:100%;
    height:100%;
    display: block;;
    position: relative;

}
.curvepart {
    float:left;
    width:2px;
    display:block;
    background-color: #006eff;
    bottom: 0px;
    position: absolute;;
    

}


.barback {
    position: relative;
    width:100%;
    height:5px;
    background: #07436b;;
    margin:4px 0px;
    border-radius: 4px;
    overflow:hidden;
}

.bar {
    border-radius: 4px;
    background: #0099ff;;
    position: absolute;
    height:5px;
}

.addshort {
    background-image:url('img/heart0.png');
    width:14px;
    height:12px;
}
.removeshort {
    background-image:url('img/heart1.png');
    width:14px;
    height:12px;
}
.my3d {
    left:50%;
    margin-left:-150px;
    perspective-origin: 50% 50%;
    position: relative;
    height: 525px;
    width: 300px;
    top:20px;
    perspective:2000px;
   
}
.yellowcard {
    background-color:rgb(255, 204, 0);
    border-radius: 4px;
    padding:3px;
    color:black;
    font-size: 13px;
    font-family: exo;
    font-weight: bold;
    white-space: nowrap;
}

.redcard {
    background-color:rgb(211, 0, 18);
    border-radius: 4px;
    padding:3px;
    color:rgb(255, 204, 204);
    white-space: nowrap;
    font-size: 13px;
    font-family: exo;
    font-weight: bold;
}

.playersetup {
    direction:rtl;
}
.reveal {
    position: absolute;
    transform: rotateY(9deg);
    width:300px;
    height:512px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    transform-style: preserve-3d;
    animation:reveal 4s  both;
}

.backcard {
    position:absolute;
    transform: rotateY(9deg);
    width:300px;
    height:512px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    transform-style: preserve-3d;
    animation:revealback 4s  both;
    background:#0038a1;
    border-radius: 10px;
    border:10px rgb(82, 138, 201) solid;
}
.backcard img {
 
    padding:100px 20px;
    width:100%;
    
}
.forsale {
    display:block;
    position: absolute;
    padding:5px;
    top:35px;
    margin-left:-10px;
    background:#00863e;
    font-weight: normal;
    font-family: exo;
    color:white;
    z-index:5;
    box-shadow: 2px 2px 5px #000000;
    font-size:10px;
}

.smallcard {
    width:100%;

    padding:10px 20px;
    margin-bottom:10px;
    border-radius: 8px;;
    font-weight:normal;
    background-color:#203554;
    margin-top:10px;
    box-shadow: 2px 2px 7px #00000080;
    /* Clearfix after */
    


    
}
.smallcard h2 {
    font-size:20px;
    margin:0px;
    color:#ffffff;
}
.smallcard h3 {
    font-size:12px;
    text-transform: uppercase;
    margin:0px 0px 3px 0px;
    color:#0099ff;
    font-weight: bold;;
}
.smallcard label {
    color:#0099ff;
    font-weight: bold;
    font-size:12px;
    margin-right:4px;
    margin-top:0px;
    margin-bottom: 0px;;
    display:inline-block;
    padding:0px;
    width:auto;
}
.smallcardtext {
    float:left;
    margin-right:20px;
}
.reveal .playercard {
    box-shadow: none;
    animation:none;
}
.playercard .txtgreen {
    color:#008800;
    font-weight:bold;
}
.playercard .txtorange {
    color:#cc6600;
    font-weight:bold;  
}
.flash {
    animation: flash 0.75s infinite;
}
@keyframes flash {
    0% {opacity:100%;}
    50% {opacity:25%;}
 
    100% {opacity:100%;}
 
}
@keyframes reveal {
  
    0% { transform: rotateX(0deg) rotateY(180deg)  }
 
    100% { transform: rotateX(0deg) rotateY(0deg)  }
}
@keyframes revealback {
  
    0% { transform: rotateX(0deg) rotateY(0deg)  }

    100% { transform: rotateX(0deg) rotateY(-180deg)  }
}
#infobox
{
    z-index:100;
    position:fixed;
    top:0px;
    padding:75px;
    width:400px;
    text-align:center;
    background:rgba(0,0,0,0.9);
    color:white;
    margin: 10 -200px;
    left: 50%;
    border-radius: 4px;;


    display:none;
}
#infobox .shield {
    vertical-align:top;height:32px;
}
.overlaynew {
    position: fixed;
    z-index:50;
    margin:0 auto;
}
#popin {
    position:fixed;
    bottom:70px;
    right:-300px;
    width:300px;
    padding:20px;
    background:#1e2022f0;
    z-index:810;
    transition: right 1s;
    border-radius: 8px 0px  0px 8px;
    box-shadow: -5px 5px 15px #000;
}

#popin.show {
    right:0px; 
}

#popup {
    width:300px;
    padding:20px;
    background:rgba(0,0,0,0.9);
    position: fixed;
    height:auto;
    top:50%;
    z-index:20;
    margin:-100px -150px;
    left:50%;
    border-radius: 8px;;
    color:white;
    text-align: center;
    display: none;;
    font-size:16px;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.8);

   
   
}
#popup .content {
    text-align: center;
    margin-bottom:20px;
    
}
#popup h1 {
    font-size:20px;
}
#popuptxt {
    margin-bottom:20px;
    /* Vertical align this div */
    
   
}
#trainplan {
    margin:20 0 ;
}
#trainoption {
    width:50%;
    position: absolute;
    left:25%;
    height:400px;
    background:#000000e0;
    z-index:5;
    top:160px;
    padding:20px;
    border-radius: 10px;
    box-shadow: 4px 4px 50px #000;
    display:none;

}


.trainingday {
    width: 10%;
    margin:0 1.25% 20px 1.25%;
    background:#002e4dc0;
    height:150px;
    border-radius: 10px;;
    padding:15px;
    text-align: center;
    float:left;
    cursor: pointer;
    transition: all 0.5s;
}
.trainingday:hover{
    background-color: #005bd3;
}
.trainingday img {width:50%;}

#trainoption .trainingday 
{width:21%;
    margin:0 2% 20px 2%;}
.trainingday.selected {
background-color: #006eff;
box-shadow: #0099ff 4px 4px 20px;
}
.trainingday h1 {font-size:22px;margin-bottom:20px}
.trainingday.active {
 
    border-bottom:solid 6px #00ff88;


}
.lang-link.active {
   
    color:rgb(128, 208, 255);
}
@media (max-width:1280px)
{
    .trainingday h1 {font-size:13px;}
    .trainingday {
        height:120px; 
        width:11.5%;  
        margin:10px 0.5%;   
    }
}

@media (max-width:600px)
{
    .trainingday {
        height:120px; 
        width:23%;  
        margin:10px 1%;   
        padding:10px 2px;
    }
    #trainoption {width:100%;left:0px;
        height:auto;
    }
}

.rounded {
    width:100%;
    border-radius: 8px;
}

.subbar {
    text-align: center;;
    width:100%;
    background-color: #0b111b;
    padding:5px;
    margin:0px 0px 5px 0px;
    border-radius: 4px;
    box-shadow: 0px 7px 10px #000000a0;
}
#chgjersey {
    position:fixed;
    width:70%;
    z-index:610;
    background: #0d111a;
    top:100px;
    left:0px;
    padding:30px;
    left:15%;
    border-radius: 10px;
    box-shadow: 0px 0px 20px #000000;
}

.knap.black {
    background-color: #000000;;
}
.knap {
    border-radius: 8px;
    background-image: linear-gradient(20deg, #107fff 0%, #002446 100%);
    display: inline-block;
    padding: 12px 5px;
    margin: 4px;
    color: white !important;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    user-select: none;
    width: 150px;
    text-align: center;
    font-weight: 600;
    font-size: 16px;
    text-shadow:none;
    line-height:1.1;
    box-shadow: 0px 0px 10px #00000050;
    transition: all 0.3s ease;

  
}
.knap:hover {
    color:white;
}

.knap.grey {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    color: #bdc3c7;
    font-size: 12px;
    border: 1px solid rgba(52, 73, 94, 0.3);
}
.knap.fit {
    width:auto;
    display:inline-block;
    padding:10px 15px;

}
.knap.same {
    width:100px;
    text-align: center;
}
.knap.full {
    width:100%;
    text-align: center;
}
.knap.fullleft {
    width:100%;
    text-align: left;
}
#cardside {
    position: relative;
}

.improve {
    position: absolute;
 
    left: 50%;
    width: 200px;
    margin-left: -100px;
    z-index: 1000;
    background-color: #054e64;
    padding:10px;
    border-radius: 8px;
    top: 10px;
    animation:improve 1s 1s both;
}
@keyframes improve {
    0% {opacity:1}
    100% {opacity: 0;}
    
}

.coinnow {
    color:black;
    font-family: exo;
    font-weight: bold;
    height:50px;
    width:50px;
    display:inline-block;
    font-size:25px;
    background-color: #ffcc00;
    text-align: center;
    border-radius: 25px;;
    padding-top:8px;
}


.knap.half {
    width:46%;
    margin:4px 2%;
    text-align: center;
}
.col3 .knap.half {
    width:100%;
    margin:4px 0px;
}
.knapbig {
    border-radius: 12px;
    background: linear-gradient(135deg, #4a9eff 0%, #0066ff 100%);
    display: inline-block;
    padding: 24px 32px;
    font-size: 18px;
    font-family: exo, arial, sans-serif;
    font-weight: 700;
    text-align: center;
    width: 300px;
    margin: 8px;
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    user-select: none;
    border: 2px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    text-transform: uppercase;
    letter-spacing: 1px;  
    left:50%;
    margin-left:-150px;
    display:block;
    position: relative;
    border-radius: 8px;
    margin-bottom:20px;
    box-shadow: 3px 3px 10px #000000;
    
}
.knapbig:hover {
    text-decoration: none;
    background: linear-gradient(135deg, #66b3ff 0%, #0099ff 100%);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}
#toplogo {
   
    padding:150px;
}

.less {
    background: #8b8b96;
    box-sizing: border-box;
    padding:8px;
  
}
#confirmbox .less 
{color:black;}

.samesize {
    width:125px;
    display:inline-block;
}



.trophybox
{
    text-align: center;;
    float:left;
width:100%;
background-color:#101727e0;;
padding:12px;
border-radius: 10px;;
box-shadow:  4px 4px 20px #000000;
height:240px;
margin:10px 0px;
  backdrop-filter: blur(3px); 
}
.trophybox h1 {margin:1px auto 20px auto;font-size:40px;line-height:58px;background:#006eff;width:60px;height:60px;border-radius: 30px;text-shadow: 0px 0px 9px rgba(0,0,0,0.5);}
.trophybox h2 {margin:0px 0px 8px 0px;font-size:18px;}
.trophybox h3 {margin:0px 0px 8px 0px;font-size:18px;}
.trophybox label {padding:0px;color:rgb(155, 155, 155);text-transform: uppercase;font-size:12px;}
.trophyimg { height:100%;}
.knap.selected {
    background: #00a193;
    box-shadow: 0px 0px 8px #01ff88;
}
#menubar .selected {
    background-color: #006eff;
    border-bottom: 4px solid #0057c9;
}
.smallknap.selected {
    background: #07943d;;
}
.selected {
    background-color: #064e36;;
}

.knap:hover {
    background-color: linear-gradient(20deg, #66b3ff 0%, #006bb3 100%);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    text-decoration: none;
    box-shadow: 0px 0px 20px #1975ff;
}
.bigknap {
    width:150px;
    height:125px;
    background: #0d77be;;
    display:inline-block;
    vertical-align: top;
    color:white;
    text-decoration: none;;
    padding:10px;
    margin:30px;
    translate: scale(1.4,1.4); 
    border-radius: 10px;
    transition: all 0.5s cubic-bezier(.49,1.74,.71,.99);

    
}
.bigknap:hover {
   transform: scale(1.4,1.4); 
}
.smallknap
{
    border-radius: 6px;
    background-color: #005b97;;
    display:inline-block;
    padding:2px 6px;
    margin:0px 4px 4px 0px;
    font-size:13px;
    color:white;
    text-decoration: none;
    transition: background-color 0.5s;
   
    text-align:center;
    cursor: pointer;
    border-style: none;
}
.smallknap.fit {
    width:auto;
    padding:2px 6px;
}
.highlightback {
    background-color: #ff0077;
}

a.smallkanp {
    text-decoration: none;;
}
.smallknap:hover {
    background-color: #0099ff !important;
    color:white !important;
    text-decoration: none;;
}
.smallknap.selected:hover {
    background-color: #00cc44;
    text-decoration: none;;
}

.highlight {
    color:#00ff73;
}
.lowlight {
    color:#4b6bac;
}
.highlight-less {
    color:#44eeff;
}
.jerseycontainer {
    position: relative;
}

.jersey {cursor:pointer;}
.jerseysponsor {
    width:40px;
    left:42px;
    top:30px;
    margin-left:-21px;
    font-size:12px;
    line-height:8px;
    padding:2px;
    font-family:'teko', sans-serif;
    text-align:center;
    position: absolute;
    background:#fff;
    color:#000;

    z-index:1;
}
#strategy {
    user-select: none;
    position:relative;

    width:100%;
    overflow:none;

    background-image: url('img/pitch-strat.png');
    background-repeat: no-repeat ;
    background-position-y: bottom;
    background-size: 100%;
    /* backdrop-filter: blur(3px); */
    display: block;
    padding:13px;
    margin:0px;
    border-radius: 4px;;
    color:white;
    text-align: center;
}
#substitutes {
    margin-bottom:20px;
    display:block;
}
.player .talent {
    position:absolute;
    top:40px;
    left:0px;


}
.leftcorner {
    position:absolute;
    left:5px;
    top:5px;
}

.player h1,.subplayer h1 {margin:1px 0px;padding:0px;  
      text-shadow: #000000 1px 1px ;;
      }
.player h2,.subplayer h2 {
    margin:1px 0px;font-family: exo;
    font-size:14px;
  
    white-space: nowrap;
}

#negotiate {
    display:none;
    position:fixed;
    top:30px;
    width:300px;
    left:50%;
    margin-left:-150px;
    background:#001122;
    z-index:602;
    text-align: center;
    padding:30px;
    border-radius: 8px;
}

.close {
    position: absolute;
    right:5px;
    top:5px;
    width:32px;
    height:32px;
    background-image: url('img/close.png'); 
    cursor: pointer;
}

.cardimgsmall {
    margin:0 auto;
 
    height:128px;
    background: url('img/stadion.png')  ;
    background-size:cover;
    image-rendering: pixelated;
    position: relative;
    border-radius: 8px;;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    width:150px;text-align:center;float:right;
    margin-left:10px;
    cursor: pointer;
}

.cardimginfo {
    overflow:hidden;
    height:128px;
    width:100%;
    background: url('img/stadion.png')  ;
    background-size:cover;
    position: relative;
    display:block;
    border-radius: 4px;;
    image-rendering: pixelated;
    
    text-align:center;


    cursor: pointer;
    margin-bottom:10px;
}

.cardimg {
    margin:0 auto;
    width:100%;
    height:128px;
    background: url('img/stadion.png')  ;
    background-size:cover;
    image-rendering: pixelated;
    position: relative;
    border-radius: 8px;;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    
}
.player h3,.subplayer h3 {
    margin:0px 0px;
    font-size:11px;
    font-weight:normal;
    color:#ebf2f5;

}
.player  h3.ptype {
    background:#0f2712;
    padding:2px;
    border-radius: 4px;
    color:white;
    width:auto;
    font-weight:bold;
}
#strategy .knap {
    /* background:#016C46;
     color:#00D489; */
    border-radius: 4px;
    padding:20px 5%;
    width:100%;
    height:90%;
    display:block;
    box-shadow: 0px 15px 15px #00000050;
    text-decoration: none;;
    cursor: pointer;
    user-select: none;
    font-family: "exo", sans-serif;
    font-weight:bold;
}
.recommended {
    background:#04ea6f;
    color:black;
    padding:1px 6px;
    border-radius: 4px;
    box-shadow: 2px 2px 5px #000000;
    margin-left:10px;
    display:inline-block;
}
.knap .coinprice {
    background-color: #ffcc00;;
    text-shadow: none;
    color:black;
    float:right;
    border-radius: 15px;
    font-family:exo;
    font-weight: bold;
    padding:4px 4px;
    width:30px;
    margin-top:-4px;
    margin-bottom:-4px;
    text-align:center;
}

.knap .traintoken,.traintoken {
    background-color:#00FF94;
    color:black;
    }
.zoom {
    animation: myzoom 1s both;
}
@keyframes myzoom {
    0% {transform: scale(1.0);}
    50% {transform: scale(1.1);}
    100% {transform: scale(1.0);}
}
#strategy .knap.selected {
    background:#0077FF;
    color:white;
}
.pstylearrow {
    position: absolute;
    top:-30px;
    left:0px;

}
.icon {
    position: relative;
    display:inline-block;
    padding:10px 0px;
}
.statframe {
    background:#15855f;
    padding:1px 10px;;
    border-radius: 10px;
    font-size:13px;
    font-weight: normal;
    color:white;
}
/* Lucky card (coin shop & dashboard) */
.lw-result { text-align: left; }
.lw-card {
    border-radius: 14px;
    padding: 16px 18px;
    margin: 0;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(0,0,0,0.25);
}
.lw-rarity {
    font-size: 0.68em;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.lw-common .lw-rarity { color: #9aa3b5; }
.lw-uncommon .lw-rarity { color: #5ecf8a; }
.lw-rare .lw-rarity { color: #5eb3ff; }
.lw-epic .lw-rarity { color: #ffd56a; }
.lw-uncommon { border-color: rgba(94,207,138,0.45); }
.lw-rare { border-color: rgba(94,179,255,0.5); }
.lw-epic { border-color: rgba(255,213,106,0.55); }
.lw-title { margin: 0 0 6px; font-size: 1.35em; color: #fff; }
.lw-flavor { margin: 0 0 12px; color: #8b95a8; font-size: 0.92em; }
.lw-coins { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.lw-coins img { height: 48px; }

.playerimg-stack {
    position: relative;
    display: inline-block;
    vertical-align: top;
}
.playerimg-stack .playerimg-layer {
    position: absolute;
    left: 0;
    top: 0;
    line-height: 0;
    z-index: 1;
}
.playerimg-stack .playerimg-jersey {
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
    z-index: 2;
    line-height: 0;
}

.player {
    text-align: center;
    position:relative;
    width:100px;
    height:150px;
    font-size:14px;
    display:inline-block;
    cursor:pointer;
    vertical-align:top;
    border-radius: 4px;
    transition: box-shadow 0.4s, background-color 0.4s;
    direction: ltr;
 

}
 .player:hover {
     background:rgba(0,0,0,0.3);
     border-radius: 4px;;
 }
 .subplayer {

    width:100%;
    height:100px;
    text-align:center;
    background:#224733;
    color:white;
    padding:3px;
    margin:4px;
    border-radius: 4px;;


 }

 /* Box that appears when selectign players */
 #bidoverlay
 {
     position:absolute;
     width:500px;
     top:200px;
     background:#003360;
     border-radius: 8px;
     padding:10px;
     left:50%;
     margin-left:150px;
    box-shadow: 0px 10px 20px #000;
    z-index:600;
    
    display:none;

 }
 #bidoverlay td {
     border-bottom: 0px;
 }
 #bidoverlay tr:hover {
     background: none;
     cursor: auto;
 }
 .playeroverlay
{

    position: absolute;
    padding:10px;
    background:#21222D;
    z-index: 10;
    color:#fff;
    display:none; 
    top:80px;
    left:-10px;
    border-radius: 4px;
    box-shadow: #000 2px 2px 20px;
    width:150px;

}
.playeroverlay a {
    padding:4px;
    display:inline-block;
    color:#ffffff !important;
    background:#494B62 !important;
    border-radius: 4px;
    text-decoration: none;
}
.playeroverlay .smallknap {
    width:100%;
    background-color:#38384d;
    color:#bdbdd3;
}
.playeroverlay .smallknap:hover {
    background-color:#0099ff;
    color:#daf0ff
}

.playeroverlay .smallknap h1 {
    font-size:16px;
    color:white;

}
.tright {
    text-align: right;
}
.right {
    float:right;
}
.left {
    float:left;
}
.clear {
  clear: both;
}
.clear:after {
  content: "";
  display: table;
}
.frontbox {
    width:300px;
    margin:0 auto;
    display:block;
    text-align:center;
    border-radius:25px;
    min-height:50px;
    padding:10px;
    background-color: #00000080;
    margin-top:25px;
    font-size:22px;
    font-weight:bold;
}
.middlecol {
    width:450px;
    margin:0px auto;  
}
.middlecol td,tr:hover {
    background: none !important;
    cursor: auto;
}
.middlecol .submitknap {
    width:100%;
}
.centercol {
    width:70%;
    margin:0px 15%;  
}
.col1 {

    width:100%;
    float:left;
    box-sizing: border-box;
    padding:0px 0px;
}
.mcol2 {width:50%;float:left;padding:0px 5px;}
.mcol23 {width:66%;float:left;padding:0px 5px;}
.col2 {

    width:50%;
    float:left;
    box-sizing: border-box;
    padding:0px 5px;
}
.col3 {
    width:33%;
    float:left;
    padding:10px;
    box-sizing: border-box;
}

.col4 {
    width:25%;
    min-height: 10px;;
    float:left;
    padding: 4px 10px;
    box-sizing: border-box;
    text-align: left;
}
.mcol4 {
    margin:0px 1%;
    width:23%;

    float:left;
    padding: 2px 2px;
    box-sizing: border-box;
    text-align: left;
}
.mcol3 {
    width:33%;float:left;padding:0px 5px;font-size:14px;
}
.col6 {
    width:16.66%;  
    float:left;
    padding:0 10px;
    text-align: left;
}
.col2-3 {
    width:66%;
    float:left;
    padding:10px;
    box-sizing: border-box;
}
.minipresent {
    background-color: #000b13;
    padding:2px;
    font-size:13px;
    color:white;
    border-radius: 4px;
    margin-top:5px;
    margin-bottom:5px;
    ;
}

.fit {
    width:100%;
}
.w-auto { width: auto; }
.mx-auto { display: block !important; margin-left: auto !important; margin-right: auto !important; }
.mr-1 { margin-right: 1rem; }
.mr-2 { margin-right: 2rem; }
.mr-3 { margin-right: 3rem; }
.mr-4 { margin-right: 4rem; }
.mr-5 { margin-right: 5rem; }
.mr-6 { margin-right: 6rem; }
.mr-7 { margin-right: 7rem; }
.mr-8 { margin-right: 8rem; }
.mr-9 { margin-right: 9rem; }
.mr-10 { margin-right: 10rem; }
.mr-11 { margin-right: 11rem; }


.email {
    background:#101727e0;;
    padding:20px;
    margin:10px 0px;;
    color:white;
    border-radius: 8px;
    box-shadow: 5px 5px 10px rgba(0,0,0,.5);
    cursor: pointer;
}
.email.highlight {
    background-color: #0025b7;
}
.email.selected {
    background-color: #0059b3; 
}
.mail-read-status
{
    float:right;
    width:16px;
    height:16px;
    border-radius: 8px;
    background-color: #007eff;
}
#mailcol {
    background-color:rgba(0,0,0,0.3);

    height:600px;
    overflow:auto;
    -ms-overflow-style: none;
    scrollbar-width: 20px;
    border-radius: 10px;
    backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px);
}
#mailcontent {
    background-color:#001122e0;

    min-height:600px;
    backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px);
   

}
#mailcontent label {
    font-size:13px;
}
#mailcol::-webkit-scrollbar {
    /* display: none; */
    width:20px;
    background-color: rgba(21, 20, 26, 0.562); 
}
#mailcol::-webkit-scrollbar-thumb {
    /* display: none; */
    width:20px;
    background-color:#0099ff; 
}


.email h1 {
    font-size: 14px;
    font-family: exo;
    font-weight: normal;
  
}
.email  h2 {
    font-size: 20px;
}
.email  h3 {
    font-size: 18px;
}
.email h4,#mailcontent  h4 {
    /* font-size: 12px;
    color:#1e9ef3;
    */    
}
.scrollarea
{
    /* overflow: auto; */
    overflow-y: scroll;
    overflow-x: hidden;
    height:500px;
}
.scrollarea::-webkit-scrollbar {
    /* display: none; */
    width:20px;
    background-color: #002e4d; 
}
.scrollarea::-webkit-scrollbar-thumb {
    /* display: none; */
    width:10px;
    background-color:#0099ff; 
}

.content {
    position: relative;
    margin:0 auto;
    width:1320px;
    padding:20px 0px;
    line-height:1.4;
    /* overflow: auto; */

}

.nopad {
    padding:0px;
}
.noedge {
    padding:0px;
}

.text {
    padding:0px 25px;
}
.text h1 {
    font-size:30px;
    margin-bottom:10px;
    margin-top:20px;
    color:#0099ff;
}
.text h2 {
    font-size:25px;
    margin-bottom:5px;
    margin-top:10px;
    color:#0099ff;
    font-weight: 600;
}
h1 {
    line-height: 1.2;
}
#topbarheader .content,
#topbar .content,#menubar .content {
    padding:0px 0px 0px 0px;
}
#topbarheader a,
#topbar a {
    color:white;
    text-decoration: none;
}
.topform {
    width:100%;
    background-color: #12182b;
}
.topform input {
    display: inline-block;
    width:250px;
    font-size:16px;
    padding:8px;
    color:white;
    background-color: #001122;
}
.topform  {
    margin:0;
    text-align:center;
}
.topform input[type=submit] { 
width:70px;
}
.seperator {
    width:100%;
    height:30px;
    display:block;
}
.seperatorline {
    width:100%;
    height:1px;
    background-color: #0d3d6d;
    margin-top:15px;
    margin-bottom:15px;
}
.centerimage {
    text-align: center;
    width:50%;
    margin:0 auto;
    display:block;
    margin-bottom:40px;
}
.centerimagefull {
    text-align: center;
    width:100%;
    margin:0 auto;
    display:block;
    margin-bottom:40px;
}
input {
    display: inline-block;
    padding:8px 16px;
    font-size:17px;
    margin:5px 0px;
    border:none;
    width:100%;
    border-radius:10px;
    height:40px;
    background:#36404f;

    color:#ffffff;;
}

/* autofill background color chrome */

.present input {
    /* background-color:#eeeeee; */
    /* color: #333333; */
}

input[type=submit] {
    border: 0px;
    min-width:150px;
    background-color: #0057a9;
    color:white;
    cursor: pointer;
    font-weight:700;
    font-family: exo,exo,arial;
}
input[type=submit]:hover {
    background-color: #0084ff;
}
* {
    box-sizing: border-box;
}
.submitknap {
    transition: background-color 0.5s;
}
.submitknap:hover {
    background-color:#004c97;
}
.darkimage {
    background: url('img/newback.jpg') top center; 
    /* background-size:cover ; */
    background-repeat: no-repeat;
    background-size: 100% auto;
    color:white;

}
#writemail {
    background:#20242a;
    border-radius: 10px;
    box-shadow:0px 0px 50px #000;
    width:600px;
    position:absolute;
    left:50%;
    margin-left:-300px;
    padding:20px;
    z-index:20;
    font-size:16px;
    display: none;
}
#writemail textarea {

    padding:8px;
    width:100%;
    height:100px;
    border:0px;
    font-family: exo, arial;
    font-size:18px;
    background:#373e45;
    color:#b5c3d0;;
    margin:20px 0px;
    border-radius:6px;
    
}
#writemail .knap {
    width: 150px;
    border-radius: 32px;
    text-align: center;
}


.welcome {
    background: url('img/welcome2.jpg') center center; 
    background-size: cover;
    color:white;

    padding:10px 0px;

}
.abs {
    position: absolute;
    height: 64px;
    width:64px;

}
.center {text-align: center;}
.present {
    padding:20px;
    background-color:#151f33e0;
    /*backdrop-filter:blur(3px);  */ 
    border-radius: 8px;
    overflow:hidden;
    margin:0px 0px 20px 0px;
    color:white;
}
.present-modal {
    max-width:600px;
    text-align: center;
    border:1px solid #0099ff;
    padding:20px;
    border-radius: 8px;
    color:white;
    margin-top:20px;
    margin-bottom:20px;
    background-color: #151f33;
    z-index:1000;
    top:100px;
    left:50%;
    transform: translate(-50%,0);
    width:90%;
    position:fixed;
    box-shadow: 2px 2px 20px 10px #00000080;
    transition: box-shadow 0.5s;

}
.presentwhite {
    background-color:white;
    padding:20px;
    border-radius: 8px;
    color:#323239;
}
.tutbuttons {
    right:15px;
    position:absolute;
    z-index:298;

}
.tutorial {
    background-color: #0a3755;
    padding:4px 8px;
    display:block;
    border-radius: 6px;
    cursor: pointer;
    margin-left:5px;
    margin-bottom:10px;
    box-shadow:2px 2px 10px #000;
    color:white;
}

.tutorial:hover {
    background-color: #2753a5;

}
.likebutton {
    display: inline-block;
    margin-right:6px;
    transition: transform 0.3s;
    cursor: pointer;
}
.likebutton:hover {
    transform:scale(1.3);
}
.likeuser {
    display:none;
}
.mylike {
    display: inline-block;
    cursor: pointer;
}
.liketype {
    display: inline-block;
    font-size:12px;
}
.knaplikeremove {
    font-size:12px;
    background:#003f7e;
    padding:5px;
    display: inline-block;
    border-radius: 4px;;
    margin-bottom:6px;
    cursor: pointer;
}
.knaplikeremove img {
height:16px;
}
.slide {
    background:#000;
    background-image: url('img/transfer.jpg');
    background-position: center;
    background-size: cover;
    text-align: center;
    padding:50px;
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    
    z-index:1201;
}

.preslider
{
    top:10px;
    width:100%;
    position:absolute;
    z-index:1600;
    text-align: center;
}
.slide h1 {
    margin: 15px;
}
.slide p {
    line-height: 1.2;
    font-size:18px;
    margin:5px 25%;
}
.slide img {
    border-radius: 8px;
height: 50%;
}

.slide .knap {
    background-color: #0066ff;
    left:5%;
    bottom:50px;
    display:block;
    position: absolute;
    width:90%;
    font-family: "exo", sans-serif;
    font-weight: bold;
    font-size:20px;
}
.slide .knap:hover {
    background-color: #0099ff;
}

.gameinfo {
    display:none;
    position: absolute;
    top: 0px;
    margin:20px -500px;
    width:1000px;
    background-color: #323239;
    z-index:300;
    padding:30px;
    left:50%;
    border-radius: 6px;
    box-shadow: 2px 2px 20px #000;

}
.tips {
    display:none;
    position: absolute;
    top: 10px;
   
    width:450px;
    background-color: #171e33;
    z-index:299;
    padding:30px;
    right:10px;
    border-radius: 6px;
    box-shadow: 2px 2px 20px #000;  
}

/* Fireworks */
.cpaper {
    position:absolute;
    animation:flow ease-in 3s both;
    width:20px;
    height:20px;
    

}
@keyframes flow {
    0% {margin-top:0px;transform:rotateX(40deg) rotateZ(40deg) rotateY(0deg);background-color:#ffcc00;}
    25% {background-color: #644100}
    50% {background-color:#ffff77}
    25% {background-color: #ffb429}
    75% {opacity:1;}

    100% {margin-top:1200px;;transform:rotateX(840deg) rotateZ(620deg) rotateY(220deg);background-color:#ffff00;opacity:0;}
    
}
#confetti {
    position:fixed;
    top:0px;
    height:1vh;
    width:100%;
    z-index:1200;
}

.gameinfo h2,.gameinfo h1 {
 margin-top:5px;
 padding:0px;
 color:#6bb3ff;
}
.gameinfo p {
    margin-top:5px;
    margin-bottom:15px;
}
.gameinfo .knap {
    background-color: #5b5b6d;
}

.cuplines {
    background:#fff;
    position:absolute;
}
.cupleg {
    cursor: pointer;
    background-color:#334466;
    padding:2px 4px;border-radius:4px;position:absolute;width:125px;
    box-shadow: 4px 4px 6px #000000a0;

}
.mycup {
    background-color:#0077dd;
}
.cupleg:hover {
background-color: #0099ff;
}

.skillimg {
    position: absolute;
    font-size:20px;
    top:6px;
    right:5px;
    font-family: "exo", arial, sans-serif;
    font-weight: bold;
    color:#fff;
    font-size:16px;
    text-shadow: 2px 2px 4px #000000;
    background:#002e4d;
    padding:4px;
    border-radius: 20px;
}
.news {
    padding:20px;
    background-color:#101727e0;;
    /*backdrop-filter:blur(3px);  */ 
    border-radius: 8px;
    overflow:hidden;
    margin:0px 0px 20px 0px;
    color:white;
    backdrop-filter: blur(3px);-webkit-backdrop-filter: blur(3px);
    box-shadow: 5px 5px 13px #00000080;
 
  
}

.newsfixedheight {height:280px;}
.newslogo {
    width:300px;
    padding:25px 0px;
}
.col1 .news p {
    font-size:23px;
}

.col4 .news  {
    min-height:230px;
}

.col3 .news  {
    height:250px;
    overflow:hidden;
}

.news h1 {
    color:#0099ff;

}
.news .playercard {
    float:right;
}

.col1 .news h1 {
    font-size:40px;
}
.col4 .news h1 {
    font-size:20px;
}

.frameit {
    text-align: center;;
    background:#151f33e0;
    padding:25px;
    border-radius: 10px;
    margin-bottom: 25px;

}
.framehighlight {
    background:#101725;
    padding: 15px;
    border-radius: 10px;
    font-weight: bold;
    font-size:20px;
    border:1px solid #2a3f6b;
    text-align: center;
}
.claim  {
    background-image:linear-gradient(#0077ff,#001122);
    box-shadow: 2px 2px 100px #000000;
    position:absolute;
    width:400px;
    left:50%;
    margin-left:-150px;
    z-index:10;
    padding:40px;
    border-radius: 10px;
    margin-top:25px;
    text-align: center;
    animation: academyplayer 1s 1s both;
}
.claim h3 {
    margin-bottom:20px;
}
.playercard h3 {
    margin-bottom:0px;
}
.claim .playercard {
    animation: none;
}
@keyframes academyplayer {
    0% {top:500px;opacity:0}
    10% {opacity:1;}
    100% {top:0px;}
    
}
#infoarea {
    z-index:1000;
    position:fixed;
    width: 50%;
    left: 25%;
}
.popupmsg {
    animation: popupmsg 1s;
}
@keyframes popupmsg {
    0% {margin-top:100px;opacity:0;}
    100% {margin-top:0px;opacity:1;}
}

.reward {

    border-radius: 16px;
    padding:20px;
    text-align: center;

    margin-bottom:30px;
    z-index:1000;
    position: fixed;
    width:900px;
    left:50%;
    margin-left:-450px;
    top:50px;
    box-shadow: 0px 0px 0px 1600px #000000c0;
    animation: popupmsg 1s;  
    background-image: radial-gradient(#0d4fa5, #00101b);
}
/* For screen size 600px and wider */ 
.overlay {
    position:absolute;
    top:70px;
    left:50%;
    margin-left:-300px;
    width:600px;
    display: block;
    z-index:500;
    background:#20395f;
    padding:20px;
    border-radius: 8px;;

    box-shadow: 0px 0px 50px #000000;
}
.overlay input[type=text] {
    background:rgb(223, 223, 223);
    color:black;
}
.overlay input {
    background:rgb(223, 223, 223);
    color:black; 
}
.overlay input[type=range] {
    background:none;
 
}
.overlay label {
    color:#ccccdd;
}
.overlay input[type=submit] {
    background-color:#0066ff;
    color:white;
}
.overlay input[type=submit]:hover {
      background-color:#00aaff; 
}

.overlay input::placeholder {
    color: #797979;
}


.reward p {
    color:#70ade2;
}
.reward .knap {
    box-shadow: 1px 1px 10px #000000a0;
}
.greenknap {
    background: linear-gradient(135deg, #2ed573 0%, #15855f 100%);
    color: white;
    border: 1px solid rgba(46, 213, 115, 0.3);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.greenknap:hover {
    background: linear-gradient(135deg, #35b07f 0%, #2ed573 100%);
    box-shadow: 0 6px 20px rgba(46, 213, 115, 0.4);
}
.greeninfo {
    background:#175824d0;
    border-radius: 8px;
    padding:10px;
    text-align: center;
    width:100%;
    box-shadow: 2px 2px 10px #00000080;
    margin-bottom:30px;
}
.greeninfo label {
    color:#8ddd8d;
}
.greeninfo .knap {
    background-color: #8ddd8d;
    color:#004400;
}
.greeninfo .knap:hover {
    background-color: #69a569;
}

.redinfobox {
    background:#cb0721;
    /* red gradient */
    font-weight: bold;
    font-size:18px;
    color:#ffffff;
    border-radius: 4px;
    padding:10px;
    width:auto;
    display: inline-block;;
    margin-top:5px;
    margin-bottom:5px;
    box-shadow: 2px 2px 10px #00000080;

}

.redinfo {
    background:#711b26;
    /* red gradient */

    color:#ffe2e2;
    border-radius: 8px;
    padding:10px;
    text-align: center;
    width:100%;
    margin-bottom:30px;
    margin-top:0px;
}
.redinfo p {
    color:#ffe2e2;
    margin:5px 0px;
}
.darkimage td {
    color:#a4c1e4;
}
#playerlist td h1 {
    color:white;
}
.warnbox {
    color:#ffcccc;
    background-color: #cc0033;
    
    font-size:10px;
    font-weight: bold;
    border-radius: 5px;
    position: absolute;
    display: block;
    padding:2px 5px;
    z-index:2;
    top:35px;
    margin:0 auto;
    
}
.txtsmall {
    font-size:11px;
}
.txtwarn {
    color:rgb(255, 62, 62);
    padding:4px 0px;

    
} 
.colblue {
    color:#0099ff;
}
.height12 {
    height:12px;
}
.height16 {
    height:16px;
}
.height32 {
    height:32px;
}
.margin-medium {
    margin:10px;
}
.txtspace {
    margin-top:15px;
    margin-bottom:6px;
}
.colgrey {
    color:#9d9db3;
}

.warnred {
    color:#ff0033;
}
.warn {
    color:white;
    min-width:20px;
    height:18px;
    border-radius: 10px;
    background-color: #e90032;
    /* border: 2px white solid; */
    position: absolute;
    z-index:5;
    top:3px;
    left:4px;
   
    text-align: center;
    display: inline-block;
    font-size:12px;
    padding:3px 4px;
    box-shadow: #09141b 2px 2px;
    line-height:1;
}
.tab {
    position:relative;
}

.hideit {
    display:none;
}
.infobox {
    background-color: #ffffff;
    border-radius: 8px;
    padding:16px;
    color:#000;
    font-weight: normal;
    font-size:16px;
    font-family: exo;

   
}

.button-warn {
    position: relative;
   float:left;
   margin-right:4px;
}
#loginbox {
    text-align: center;
    margin: 0px auto;
    width:100%;
    padding:30px;
    background-color: #20252b;
    color:#d1dceb;
    border-radius: 8px;
    margin-bottom: 25px;
    box-shadow: 0px 20px 70px #000000;
}
.loginbox {
    text-align: center;
    margin: 0px auto;
    width:100%;
    padding:30px;
    background-color: #20252b;
    color:#d1dceb;
    border-radius: 8px;
    margin-bottom: 25px;
    box-shadow: 0px 20px 70px #000000;

}
#loginbox label {font-size:14px;color:#778ba2;text-align:left}
#loginbox a {color:#0099ff}
#loginbox .knap {color:#fff;background-color: #0099ff;}
#loginbox .knap:hover {background-color: #006bb3;}

.postit {
    background-color: #ffff99;
    color:black;
    box-shadow: 5px 5px 10px #00000070;
    padding:10px;
    width:250px;
    transform:rotate(-3deg);
    /* animation:animatein 1s both; */
}
@keyframes animatein {
    0% {transform: rotate(2deg) translateX(200px);}
    100% {transform: rotate(-5deg) translateX(0px);}
}
.postit p {
color:black;
}
.postit h2 {
    color:black;
}
.myslide {
  /* Clearfix */
    position:absolute;
    left:50%;
    translate:-50% 0%;
    z-index:9;    
}
.myslide.flyaway {
    position:absolute;
    z-index:10;
    animation: flyaway 0.5s ease-in both;

}
.myslide.flyawayback {
    position:absolute;
    z-index:10;
    animation: flyawayback 0.5s ease-in both;

}
@keyframes flyawayback {
    0% {transform: translateX(0px) rotate(0deg);opacity:1;}
    80% {opacity:1;}
    100% {transform: translateX(620px) rotate(10deg);opacity:0;}
}
@keyframes flyaway {
    0% {transform: translateX(0px) rotate(0deg);opacity:1;}
    80% {opacity:1;}
    100% {transform: translateX(-620px) rotate(-10deg);opacity:0;}
}
#slideshow {
    height:700px;
    position:relative;
}
.nextslide {
    position:absolute;
    right:2%;;
    top:275px;
    transform:translateY(-50%);
    font-size:32px;
    cursor:pointer;
    background-color:#0066ff;
    width:55px;
    height:55px;
   border-radius:5px;
   padding:12px 5px 5px 5px; 
   touch-action: manipulation; 
    user-select: none ; 
    z-index:10;

}
.prevslide {
    z-index:10;
    position:absolute;
    left:2%;
    top:275px;
    transform:translateY(-50%);
    font-size:32px;
    cursor:pointer;
    background-color:#0066ff;
   width:55px;
   height:55px;
   border-radius:5px;
   padding:12px 5px 5px 2px; 
   touch-action: manipulation; 
  user-select: none ;

}
.nextslide:hover {
    background-color:#0055cc;
}
.prevslide:hover {
    background-color:#0055cc;
}


#sliderdots {
    text-align:center;
   
    top:5px;
    position:absolute;
   
    display: flex;
    justify-content: center;;
    align-items: center;;
    left:50%;
    translate:-50%;
 
    
}
#sliderdots .dot {
    height: 10px;
    width: 10px;
    background-color: #ffffff20;
    border-radius: 50%;
    display:block;
    margin: 0 5px;
}
#sliderdots .dot.active {
    background-color: #0066ff;
}

.playercard {
    position: relative;
    text-align: center;
    background:rgb(185, 191, 197);
    padding:10px;
    border-radius: 10px;
    width:300px;
    height:512px;
    box-shadow: rgba(0,0,0) 2px 2px 20px;
  
    margin:20px 0px;;
    display: block;
    margin:0 auto 10 auto;
    color:black;
    box-sizing: border-box;
    overflow:hidden;
   /*  animation: slidein 0.5s both cubic-bezier(.49,1.74,.71,.99);  */
    line-height:1.1;
    font-size:13px;
    line-height:14px;
}
.playercard a {
   color:#000;
}
.playerreg {
    position: absolute;
    right:10px;
    top:3px;
}
.playercard small {
    font-family: exo;
    font-weight: normal;
font-size:15px;
}
.playercard h1 {
    font-size:32px !important;
    color:black;
    font-family: "exo", arial, sans-serif;
    font-weight: bold;
}
.playercard h3 {
    font-size:16px;
    font-family: "exo", arial, sans-serif; 
}
.playercard h3 small {
    font-size:13px;
    color:#00000080;
}
.pixel {
    image-rendering: crisp-edges;
    image-rendering: pixelated;

}

@keyframes slidein {
    0% {transform:scale(0.4) ;}
   
    100% {transform: scale(1.0) ;}



}

@keyframes bouncein {
    0% {transform:scale(1.2) ;}   
    50% {transform: scale(0.8) ;}
    100% {transform: scale(1.0);}
}

#playerview {
    display:none;
   
    background-image: linear-gradient(#000510f0 90%, #00000000 100%);
    padding:20px;
    
    top:0px;
    margin:0 auto;
    
    z-index:605;
    width:100%;
 
    height:100%;
    height:auto;
    position: absolute;
    box-sizing: border-box;
    color:white;
    padding-bottom: 60px;
    

}
#playerbox {
    position: absolute;
    width:100%;
}
.tabselect {
    cursor: pointer;
    border-radius: 4px;;
    padding:5px;
}
.tabselect:hover {
    background-color: #0077e7;
    color:#fff;
}
.silver { 
    background: url('img/silverback.png')
}

h1.t2 {
    background: linear-gradient(0deg, rgb(233, 233, 233) 0%, rgb(146, 146, 146) 33%, rgba(122,122,122,1) 83%, rgba(187,187,187,1) 100%);

}
h1.t1 {
    background: linear-gradient(180deg, rgba(255,199,0,1) 0%, rgb(104, 67, 0) 27%, rgb(255, 196, 0) 81%, rgb(143, 105, 0) 100%);
}

h1.t3 {
    background: linear-gradient(180deg, rgb(173, 100, 31), rgb(255, 150, 102) 27%, rgb(112, 62, 11), rgb(255, 115, 0));
}
    


.gold { 
    
    background: url('img/goldback.png')

}

.colgreen {
    background-color:#009b79;
}
.greentype {
    color:#00dd33;
}
#surebox
{
    display:none;
    background-color:#7f808f;  

    border-radius: 8px;
    text-align: center;
    color:white;    
    width:250px;
}
#confirmbox, .confirmbox {
    display: none;
    position: fixed;
    top:25%;
    z-index:1001;
    text-align: center;
    background-color:rgba(255, 255, 255,0.8);
    color:black;
    padding:30px;
    border-radius: 8px;
    left:50%;
    width:300px;
    margin:0 -150px;
    box-shadow: #000 2px 2px 20px;
    backdrop-filter: blur(3px);
    font-size:20px;
}
#confirmboxtxt {
    font-size:20px;
}

.confirmbox .less {
    color:#000b13;
}

/* Server info */
#server
 {
     position: fixed;
     top:10px;
     right:10px;
     z-index: 600;
 }

/* top warning box */
#messagebox {
    background-color:rgba(49, 0, 0,0.9);
    color:rgb(227, 235, 255);
    display:none;

    bottom:80px;
    width:320px;;
    padding:10px;
    left:50%;
    margin-left:-160px;
    text-align: center;;
    border:1px solid #612727;;
    border-radius: 8px;;
    color:#cf5b5b;
    position: fixed;
    animation: remove 1s 5s both;
    z-index:301;
}
@keyframes remove {
    0% {opacity:1;}
    100% {opacity:0;bottom:-200px;}
}
.onoffbox {
    width:25%;
    float:left;
    padding:10px 0px;
    line-height:22px;
}
.onoff {
    cursor: pointer;
    border-radius: 10px;
    width:40px;
    height:20px;
    margin-right:10px;
    display:block;
    float:left;
    vertical-align: top;
    background-color:#555;
   
}

.dot {
    border-radius: 10px;
    width:20px;
    height:20px;
    background-color:#ffffff;

}

.onoff.on {
    background-color:#007eff;
    padding-left:20px;
}
.dot-energy-container {
    width:30px;
    height:3px;
    border-radius: 1px;
    background-color: #103b56;
    position:absolute;
    top:53px;
    left:0px;

}
.dot-flame {
    position: absolute;
    margin-left:-25px;
}
.energybar-container {
    width:100%;
    background-color: #103b56;
    height:6px;
    border-radius: 3px;
    position: relative;
    overflow:hidden;
    margin-bottom:1px;
}
.energybar {
    width:50%;
    background-color: #0099ff;
    border-radius: 4px;
    height:100%;
}
.strategyEnergy
{
    width:50%;

    margin:0 auto;
}
.playnotes {
    position:absolute;
    width:100%;
}
.playtime
{
    /* display:none; */
    background:#9c001ad0;
    border-radius: 4px;
    z-index:2;

    position:relative;
    font-size:10px;
    text-transform: uppercase;
    width:100%;
    padding:2px;
    margin-bottom: 1px;
}
.strategy-cons {
   /*  display:none; */
    background:#00569cd0;
    border-radius: 4px;
    z-index:2;

    position:relative;
    font-size:10px;
    text-transform: uppercase;
    width:100%;
    padding:2px; 
    margin-bottom: 1px;
 
}
.greendim {
    background-color: #23854c;
}
.green {
    background-color:#00ff62;
}
.almostgreen {
    background-color:#d2e900;
}
.red {
    background-image: linear-gradient(20deg, #ca1800 0%, #47110a 100%);
}

.darkred {
    background-color:#47110a;
}
.red:hover {
    background-image: linear-gradient(20deg, #da2800 0%, #ca1800 100%); 
    box-shadow:0px 0px 10px #ff0000; 
}
.fontred
{
    color:#ff1e00;
}
.txtorange {
    color:#ff7b00;
}
.txtdarkblue {
    color:#16c6dd;
}

.txtgreen {
    color:#00ff66;  
}
.txtred
{
    color:#ff0022;
}
.txtcyan {
    color:#91f2ff;
}
.orange {
    background-color:#ff7b00;
}
.darkgreen
{
    background-color:#006622;
}

.darkblue
{
    background-color:#002266;
}

#gameloop {
  background:black;
  color:#00ff00;
  padding:30px;
  width:100%;
  position:absolute;
}
.gamearea{
    display:none;
}
.explain {
    font-size:14px;
    color:#aaaacc;
}
.overlayfix {
    display:none;
    position:fixed;
    top:50px;
    width:600px;
    
    left:50%;
    margin-left:-300px;
    z-index:601;
    background:#07243d;
    border-radius: 8px;
    padding:20px;
    text-align: center;
    box-shadow: 0px 0px 50px #000000;
}
.overlaybox {
    position:absolute;
    top:70px;
    left:25%;
    width:50%;
    background:#07111b;
    z-index:40;
    padding:25px;


    box-shadow:0px 0px 20px #000000;
    display: none;
}
.gblock {
    position:relative;
    width:2px;
    height:4px;
    background:#0099ff;
    float:left;
}

.trainexplain {
    display: none;;
    background:#333333e0;
    color:#fff;
    padding:15px;
    border-radius: 8px;;
    z-index:30;
    position: absolute;
    margin-left:-30px;
    margin-top:110px;
    font-size:17px;
    width:150px;
    box-shadow: 2px 2px 10px #000;
}



.calendar-row {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  width: 100%;

  
  transition: max-height 500ms ease-in-out;
  max-height:44px;
}
.slideup .calendar-row {
  max-height: 31px;
}
.calendar-row:before,
.calendar-row:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40px;
  z-index: 12;
}
.calendar-row:before {
  left: 0;
  background-image: linear-gradient(90deg, rgba(7,67,107,.9) 0%, rgba(7,67,107,0) 100%);
} 
.calendar-row:after {
  right: 0;
  background-image: linear-gradient(-90deg, rgba(20,20,20,.9) 0%, rgba(20,20,20,0) 100%);
} 
.calendar-row style { display: none !important; }
.calendar-row > * {
  margin-left: -30em;
  margin-right: -30em;
  padding-right: 15px;
}
.calendar-row > * > * {
  white-space: nowrap;
  display: block;
  margin: 0 auto;
  width: 1320px;
}
@media (max-width: 1400px) {
  .calendar-row > * > * {
    min-width: calc(100vw - 20px - 15px);
    width: max-content;
  }
}
.calendar-row--day {
  margin-right: 1px;
  position: relative;
  min-width: 4.5em;
  height: 2.95em;
  background-color: rgba(20,20,20,.8);
  z-index: 0;
  white-space: nowrap;
  display: inline-block;
  vertical-align: top;
}
.calendar-row--before {
  background-color: #07436b;
}
.calendar-row--day > * {
  display: inline-block;
  margin-left: .25em;
  margin-top: .25em;
  vertical-align: top;
}
.calendar-content--fix-right {
  position: absolute;
  right: .25em;
  margin: .35em 0;
}
.calendar-content--fix-right > * {
  min-width: auto;
  width: max-content;
}

.calendar-row--day h2 {
  white-space: nowrap;
  margin: 0;
}
.calendar-row--day a,
.calendar-row--day a:hover {
  display: inline-block;
  color: #fff;
  text-decoration: none;
}
.calendar-row .minilabel { white-space: nowrap; }
.calendar-row .bar {
  height: 100%;
  background-color: #07436b;
  left: 0;
  margin: 0;
  z-index: -1;
  border-radius: 0;
  transition-delay: 0ms;
  transition-timing-function: linear;
}
.calendar-row .bar.fill { width: 100% !important; }
.calendar-row--before + *:not(.calendar-row--before) {
  z-index: 20 !important;
}
.calendar-date-badge {
  margin: .25em;
  background-color: #fff;
  color: #222;
  display: inline-block;
  text-align: center;
  text-shadow: none;
  border-radius: 2px;
  overflow: hidden;
  width: 2.2em;
}
.calendar-date-badge > * {
  display: block;
}
.slideup .calendar-row h2,
.slideup .calendar-row .calendar-date-badge--date,
.minilabel,
.calendar-date-badge--month-year {
  font-size: .6em;
  text-transform: uppercase;
}
.calendar-date-badge--month-year {
  background-color: #be242e;
  color: #fff;
  padding: .15em .25em;
}
.calendar-date-badge--date {
  padding: .0em .25em;
  font-size: 1.25em;
}
.calendar--training-badge {
  position: absolute;
  right: 5px;
  background-color: #0a3755;
  border-radius: 1em;
  padding: 3px;
}
.calendar--training-badge img {
  opacity: .7;
  height: 13px;
}
.calendar--training-badge-2 img {
  height: 11px;
  margin: 1px;
}
.calendar--training-badge-7 img {
  height: 9px;
  margin: 2px;
}
.topspace {margin-top:10px;margin-bottom:5px;}
h1,h2,h3,h4 {margin-top:0px;margin-bottom:0px;font-family:"exo";}
h4 {
    font-size:14px;
    margin-top:9px;
    margin-bottom:1px;
    color:#0099ff;
    font-weight:bold;
}
h1,h2 {
    font-family:"exo";
    font-weight:bold;
}
h3 {
    font-size: 18px;
    font-weight:400;
    margin-top:2px;
}
h1 {font-size: 24px;} 
h2 {font-size: 20px;
    font-family:"exo";
    font-weight: 600;
    line-height:1.2;
    margin-top: 2px;; 

} 



h5 {font-size:13px;margin-bottom:2px;margin-top:2px;font-weight: 400;}
.inlinelabel {
    display:inline-block;
    color:#0099ff;
}
th {font-weight: bold;text-align: left;color:#fff;border-bottom: 1px solid rgba(255,255,255,0.5);text-transform: uppercase;font-size:12px;}
td {font-size:14px;padding:3px 4px 5px 0px;border-bottom: 1px solid #334466e0;
/* align top */
vertical-align: top;
}
.darkimage td {border-bottom: 1px solid rgba(149, 168, 194, 0.3);}
tr {transition: all 4s cubic-bezier(.02,.65,.02,.99);cursor: pointer;}
/* tr:hover {background-color: rgb(163, 163, 163);} */
/* .darkimage tr:hover {background-color:rgba(0, 128, 248, 0.7)} */
.tabright {text-align:right}
.frameit h3 {margin-top:10px;color:#0099ff;}
.frameit h1 {margin-bottom:15px;}
.greeninfo td {border-bottom: 1px solid #438343 }
.greeninfo a {color:#8ddd8d}



#timebar {
    width:50%;
    height:4px;
    top:0px;
    display: block;
    position: absolute;
    background-color: #0099ff;
    animation:tofull 1s both linear;
}
@keyframes tofull {
    80% {background-color:#0099ff;}
    90% {background-color:red;}
    100% {width:100%;background-color:red;}
}

/* match result */
.spoiler {
    display:none;
}
.showlive {
    cursor: pointer;
    padding:3px;
}
.showlive:hover
{
    background-color:#003366;
}
#livematch {
    transition: margin-top 0.3s;
}
#livefront {
 /*   background-size:100% auto;
    background-image: url('img/back2.jpg');
    background-repeat: no-repeat;
    */
}
#live {
    color:#00ff66;
    animation:flash 3s infinite;
}
@keyframes flash {
    0% {opacity:1}
    50% {opacity:0.5}
    100% {opacity:1}
}
#livescore {
    font-family: exo, sans-serif,arial;
    font-size:28px;
    font-weight: bold;
    color:#0099ff;
}
#livetime {
    font-family: roboto-mono, arial;
    font-size:24px;
    color:#00ff88;

    width:150px;
    margin:0 auto;

}
#live1 {
    width:45%;
    text-align:right;
    display: inline-block;
}
#live2 {
    width:45%;
    text-align:left;
    display: inline-block;
}
#liveteams {
    font-family: exo,arial;
    font-size:20px;
}

#versus {
    position:absolute;
    left:35%;
    width:30%;
    top:0px;
    z-index:1;
}
#versus img {
    width:100%;
    animation:versus 2s 0s both;
}
#battleresult
{
    position:absolute;
    left:45%;
    width:10%;
    top:100px;
    z-index:2;
    animation:result 0.2s 2s both;
}
#battleresult img {width:100%;}
#battle {
    position: absolute;
    left:0px;
    height:500px;
    width:100%;
    display: block;
    z-index:210;
    /* background:rgba(0,0,0,.5); */
    display:none;
}
#battle1 {
    position: absolute;
    display:block;
    left:25%;
    width:200px;
    text-align: center;
    
    }
#battle1 h3,#battle2 h3 {
        color:#0077e7;
    }
.battlecard
{
    z-index:2;
    top:70px;
    width:250px;
    height:250px;
    padding:15px;
    background:#001122;
    border-radius: 12px;
    box-shadow: 2px 2px 10px #000000;
}
#battle2 {
    position: absolute;
    display:block;
    right:25%;
    width:200px;
    text-align: center;
}
.battlestart {
    display:block;
}        
.battlelost {
animation:loosebattle 5s 0s both;
}
.battlewin {
    animation:winbattle 5s 0s both;
    }
@keyframes loosebattle {
    0% {transform:scale(0.5);opacity:0}
    15% {transform:scale(1.0);margin-top:0px;opacity:1}
    60% {margin-top:0px;opacity:1}
    70% {margin-top:0px;opacity:0.2}
    100% {opacity:0.2;}
}
@keyframes result {
    0% {transform:scale(0.5);opacity:0}
    100% {transform:scale(1.0);opacity:1}   
}

@keyframes winbattle {
    0% {transform:scale(0.5);opacity:0}
    15% {transform:scale(1.0);margin-top:0px;opacity:1}
    95% {margin-top:0px;opacity:1}
    100% {margin-top:100px;opacity:0}
}

@keyframes versus {
    0% {transform:scale(0.2);opacity:0}
    15% {transform:scale(1.0);margin-top:0px;opacity:1}
    95% {transform:scale(1.0);margin-top:0px;opacity:1}
    100% {transform:scale(0.2);margin-top:100px;opacity:0}
}
@keyframes fadeaway {
    0% {opacity:1;margin-top:0px;}
    100% {opacity:0;margin-top:-100px;}
    
}
.animgoal {
    animation:goal 1s 0s both;
}

@keyframes goal {
    0% {transform:scale(1.0);}
    50% {transform:scale(1.3);}
    100% {transform:scale(1.0);}

}
#matchcontrol {
    position: absolute;
    top:2px;
    left:0%;
    width:100%;
    text-align: center;
    z-index:309;
    
   
}
#matchcontrol .knap {
    padding:6px;
}
#pause {
    background-color:#0077ff;

}
.heatmap {
    height:10px;width:10px;display:block;background-color:#00cc0020;position:absolute;
    border-radius:5px;
    opacity:0.3;
    z-index:2;

}
#gameview {
    width:100%;
    height:650px;
    position:relative;
    overflow:hidden;
}
#pitch {
    transition:left 2s,top 2s;
    left:0px;width:2000px;
    height:1260px;
    background-image:url('img/pitch.jpg');
    background-size:2000px 1250px;
}
#radar {
    position:absolute;
    z-index:230;
    left:40%;
    width:20%;
    top:345px;
    height:120px;
    background:#00000030;
    border-radius:8px;
    opacity:0.5;
    display:none;

}
.radar1 {
    position:absolute;
    width:4px;
    height:4px;
    border-radius: 2px;;
    background-color:#0099ffe0;
    transition:all 1s;
    box-sizing: content-box;
    font-size:10px;
}
.radar2 {
    position:absolute;
    width:4px;
    height:4px;
    border-radius: 2px;;
    background-color:#cc2200e0;
    transition:left 1s, top 1s; 
    box-sizing: content-box;
    font-size:10px;
}

#radarball {
    position:absolute;
    width:6px;
    height:6px;
    border-radius: 3px;
    background-color:#ffffff;
    transition:left 0.6s, top 0.6s; 
}
#playerball {
    position: absolute;
    top:400px;
    left:25%;
    width:50%;
    font-size:25px;
    font-family: exo;
    text-align: center;
    z-index:210;
}
.match-playerimg {
    width:64px;
    height:64px;
    display:inline-block;
    overflow: hidden;
    position: relative;
}
#match-dices {
    font-size:16px;
    font-family: exo, sans-serif,arial;
    width:50%;
    left:25%;
    text-align:center;
    display:block;
    position: absolute;;
    z-index:240;
    top:5px;
}
#match-dice1,#match-dice2 {
    display:inline-block;
}
.match-left {width:40%;text-align:right;}
.match-middle {width:20%;;text-align:center;}
.match-right {width:40%;text-align:left;}
#match-players1 .matchchain {height:400px;float:left;align-content: center;display: inline-grid ;}
#match-players2 .matchchain {height:400px;float:left;align-content: center;display: inline-grid ;}

#match-standing {
    display:block;
    text-align: center;
    top:10px;
    left:0px;
    width:100%;
    margin:0 auto;
    height:60px;
    position:absolute;
    z-index:300;
    
    padding:10px;
    
}

#match-standing .club {

    font-size:25px;
    padding:15px;
    display:block;
    float:left;
    width:35%;
    height:100%;
    overflow:visible;
    font-family: exo, sans-serif,arial;
}
#match-standing .score {
 
    height:100%;
    font-size:40px;
    padding:10px;
    width:30%;
    display:block;
    float:left;
    font-family: exo, sans-serif,arial;
    font-weight: bold;
    text-shadow:2px 2px #000;
    height:60px;

}

#ball {
   transition: all 0.8s ease-out;
   position:absolute;
   top:43%;
   margin-left:-10px;
   margin-top:-10px;
   left:50%;
   /*filter: drop-shadow(10px 10px 10px #00000090);*/
   z-index:300;
}
.ballholder {
    /*
    border:2px solid #ffffff;
     z-index:22 !important; */ 
    font-weight: bold;
    text-shadow:2px 2px #000;
  
}



.playerdot1,
.playerdot2 {
    display:none;
    margin-top:-60px;
    
    position:absolute;
    width:30px;    
    height:29px; /*30px*/
    margin-left:-10px;
    padding:0px;
    padding-top:9px;
    
    z-index:8;
    box-sizing: content-box;
    
    transform: translate3d(0,0,0);
    transition: left 800ms, top 800ms;
    
    /*background-repeat: no-repeat;
    background-size:30px 30px;*/

    border-bottom: #a41010 16px solid;
    border-radius: 4px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
 
    font-size: 11px;
    text-align:center;
}
.playerdot2 {
  /*background-image: url('img/pin2.png');*/
}
.playerdot1 {
  /*background-image: url('img/pin.png');*/
  border-bottom-color: #224a99;
}

.playerdot1 > .skill,
.playerdot2 > .skill {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 2px;
  z-index: 1;
}
.playerdot1 .match-playerimg,
.playerdot2 .match-playerimg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -10px;
  margin: -12px 0 0;
  
  width: 50px;
  transform: scale(.6);
}
.playerdot1 .abs,
.playerdot2 .abs {
  left: -7px;
}


.playerdot1 .name,
.playerdot2 .name {
  font-size:8px;
  margin-top:0px;
  text-transform: uppercase;
  text-shadow:2px 2px #000;
  margin-top:-15px;
  width:60px;
  display:block;
  position: absolute;
}
.playerdot1 .name {
  text-align: right;
  margin-left: -70px;
}
.playerdot2 .name {
  text-align: left;
  margin-left: 30px;
}


.ballholder {
  background-color: #ffffff33;
}

.dot-highlight {
    background-color: #ffffff77;
    /*border:solid #fff 3px;
    border-radius:15px;*/
    z-index:100;
}


#ball img {
    width:100%;
}
#ballholder2 {
    text-align:center;
    display: block;
    font-weight: bold;
    font-family: exo, sans-serif,arial;
    font-size:18px;
    text-shadow: 2px 2px #000;
    position:absolute;
    width:100%;
    z-index:360;
    top:420px;
}
#situ {
    z-index:250;
    font-size:20px;
    font-family: exo, sans-serif,arial;
    font-weight: bold;
    text-align: center;
    height:40px;
    top:420px;
    position: absolute;
    width:100%;
    
    display:block;
   
    text-shadow: 3px 3px 7px #000;
    z-index:260;
}
#match-logo {
    position:absolute;
    bottom:10px;
    left:35%;
    width:30%;
    text-align: center;;
    opacity:0.25;
}
#match-logo img {
    max-width: 100%;
    height:auto;
}

.match-pitch {
    padding: 20px;
    background-color:#007049;
    border-radius: 10px;
    background: url('img/pitch.png') center center no-repeat;
    background-size: 100%;
    position: relative;
    height:550px;
    margin-bottom:20px;
    overflow:visible;
    position: relative;
}
.match-player {
    display:block;
    width:75px;
    height:80px;
    padding:5px;
    margin:2px;
    background:#00000030;
    vertical-align:top;
    border-radius: 4px;;
    position: relative;
    z-index:10;
 
}

#match-players1 {
    position: absolute;
   
    left:0px;
    text-align:center;
    z-index:301;
    opacity:1;
    top:120px;
}
.match-highlight  {
   background:#0038a1;
   box-shadow: #0077e7 0px 0px 40px;
   transform: scale(1.2);
   z-index:301;
   transition:all 0.3s;
}
#match-players2 {
    position: absolute;
    right:0px;
    top:120px;
    text-align:center;
    z-index:301;
    opacity:1;

}

.match-player h1
 {
    font-size:12px;
    margin:0;
}
.match-player h2 small {
    font-size:11px;
    font-family:exo,arial;
    font-weight: normal;
}
.match-player h2
 {
    font-size:18px;
    margin:2;
}

.match-player h3 {
    font-size:11px;
    margin:0;
    font-family: exo,arial;
    font-weight: normal;;
}

.ballbar {
    display:none;
    width:100%;
    height:82px;
    background-color: #0092e760;
    filter: blur(25px);
    position: absolute;
    z-index:0;
    transition: top 0.5s;
}

.playercard-pos {
    width:50%;
    float:left;
    text-align:center;
    padding-right:20px;
}
.playercard-info {
    width:25%;
    float:left;
}
.playercard-info .knap {
    width:150px;
}
.playercard-close {
    width:32px;
    height:32px;
    background-image: url('img/close.png');
    margin:0 auto;
    cursor: pointer;
    position: fixed;
    right:5px;
    top:5px;
}

.playercard label {
    padding:0px;
    margin:0px;
    text-align: center;
    width: auto;
    color:#00000070;
    text-transform: uppercase;
    font-size:11px;
    font-weight: bold;;
    margin-top:4px;
}

.playercard h1 {margin:0px;}
.half {
    width:50%;
    float:left;
    text-align:left;
}

.third {
    width:33%;
    float:left;
    text-align:center;
}
.third small {
    font-size:11px;
}
.mobile { 
    display: none ;
}

@media (max-width: 1366px)
{
    .middlecol {
        margin:0 auto;
    }
    #bidoverlay {
        left:auto;
        right:10px;
        margin:0px;
        top:100px;
    }
    #appbar {
        /* display:block; */
   
    }

    #menubar {
       /* display:none; */
    }
    #menubar a {
        padding:10px 5px;
        font-size:14px;

    }
    .content {
        width:100%;
        
        box-sizing: border-box;
         padding:20px 20px; 
    }
    .nopad {
        padding:0px 10px;
    }
    .noedge {
        padding:0px;
    }
    table {

        box-sizing: border-box;
        border-spacing: 0px;
        

    }


    .player {
        width:18%;
    }
    #loginbox2 label {
       width:100%;
        display: inline-block;;
        float:none;
     
        }

}
/* ipad pro 11" */
@media (max-width: 1194px) and (min-width: 830px)
{
    .applogo {
        display:none;
    }
    .appbtn {
        width:7%;
        font-size:11px;
        overflow:hidden;
    
    }
    .applogo {
        width:21%;
        max-width:200px;
      
    }
    .cardimgsmall {
        overflow:hidden;
        width:80px;
       
    }
    .cardimgsmall .playerimg-stack {margin-left:-25px}

}
@media (max-width: 834px) and (min-width: 768px)
{
    .appbtn {
         width:7%;
        font-size:8px;
    
    }
    .email h2 {
        font-size:12px;
    }
    .email {
        font-size:10px;
    }

}
@media (max-width: 1194px) and (min-width: 768px)
{
    .icol2 {
    width:50%;
    }
    .col3 .playercard {width:100%;}

    .email h2 {
        font-size:16px;
    }
    .email {
        font-size:14px;
    }
    .news h1 {
        font-size:18px;
    }

}
@media (max-width: 1280px)
{   

    #logo {
        width:200px;
        height:auto;
 
    }
    #nextmatch h3 {
        font-size:16px;
    }
    .applogo {
        display:none;
    }
    #topbarheader h3,#topbarheader h2 {
        font-size:16px;
    }


    .gameinfo {
        width:90%;
        left:5%;
        margin:20px 0px;
    }
    #bundbar {
        left:0px;
        margin-left:0px;
        font-size:10px;
        text-align: center;
        width:100%;
        border-radius: 0px;;
    }
    #matchcontrol {
        width:100%;
        left:0px;
    }
    .frameit {padding:5px;}
    .col6 {width:33%;}
    #menubar a {
        padding:5px 5px;
        font-size:13px;
    }

    #battle1 {   left:10%;}
    #battle2 {   right:10%;}
    #match-standing  {
        width:100%;
    }
    #situ {
        top:150px;
    }
    #goal 
        {
            position:relative;
            margin-top:-200px;
        }
    .match-pitch {
        height:450px;

    }
    #match-standing .club {
        font-size:16px;
    }
    #ball {
        transform: scale(0.88);
        /* margin-top:-10px;*/
        margin-left:-15px;
        
    }
}

/* Tight device */
@media (max-width: 1000px) and (min-width: 768px) {
    
    #logo {
        width:150px;
        height:auto;
        position:absolute;

    }

    h1 {font-size:20px;}
    .player h3 {
        font-size:10px;
    }
    .player h2 {
        font-size:11px;
    }
    .playtime {
        font-size:8px;
    }
    .strategy-cons {
        font-size:8px;
    }
    td {
        font-size:11px;
    }
    th {
        font-size:8px;
    }
    body {
        font-size:12px;
        /* font-family: exo; */
    }
    h1 {font-size:20px;color:#ffffff;}
    h2 {font-size:16px;;color:#ffffff;}
    h3 {font-size:14px;;color:#ffffff;}
    h3 {font-size:12px;;color:#ffffff;}
    .playercard h2 {color:#000000;}
    .playercard h3 {color:#000000;}
    .email {
        color:#87a2b6;
        font-size:12px;
    }
    .content {
        /* padding:10px; */
    }
    .medium {
        display:none;
    }
}
@media (max-width: 900px)
{
#menubar a {
    padding:5px 5px;
    font-size:11px;
}
}
@media (max-width: 812px)
{

    .match-pitch {
        height:400px;

    }
    #ball {
        transform: scale(0.75);
    }
}

#traininfo {
    text-align: center;
    position: fixed;
    top:75px;
    right:10px;
    max-width:400px;
    background-color: #000000f0;
    margin-left:-300px;
    padding:20px;
    border-radius: 10px;;
    z-index: 601;
}

@media (max-width: 768px)
{

    #topbarheader {
        display:none;
    }

    .overlay {
        width:90%;
        left:5%;
        margin:0px;
    }
    #traininfo {
        text-align:center;
        position: fixed;
        top:25px;
        left:5%;
        margin-left:0px;
        width:90%;
        background-color:#000000;
        padding:20px;
        animation: popupmsg 1s;  
        z-index:1000;
        box-shadow: 0px 0px 25px  #000000;
        border-radius: 8px;
        max-width: none;;
    }

    .match-pitch {
        height:380px;

    }

}
.foldoutbar {
    height:40px;
    padding:0px 20px;
    box-sizing: border-box;
    width:100%;
    display:block;
    background-color: #151f33;
    border-radius: 4px;
    line-height:40px;
    margin-bottom:2px;

}
.foldoutbutton {
    width:26px;
    height:40px;
    background-image: url('img/arrowfold.png');
    display:block;
    float:right;
    background-repeat: no-repeat;
    background-position: center center;
    transition: transform 0.3s;
}
.folddown {
    transform: rotate(180deg);
}
#time { 
    display:block;
    /*
    box-shadow: 5px 5px 2px #00000040;
    background:#0c375f; */
    font-size:14px;
    font-family: roboto-mono, arial;
    padding:10px;
    position:absolute;
    z-index:300;
    left:50%;
    width:100px;
    margin-left:-50px;
    text-align:center;
    top:80px;
    padding:2px;
    border-radius:8px;  
    background-color:#00000080;
}
@media (max-width:1080px) {
    #playerbar .info {
        font-size:14px;
        margin-right:4px;
    }
}
@media (max-width: 767px)
{
    #boss {
       bottom:70px;
    }

    #cookie {
        height:auto;
        width:90%;
        left:5%;
        padding:10px;
    }

    #time {
    
        display:block;
        /*
        box-shadow: 5px 5px 2px #00000040;
        background:#0c375f; */
        font-size:14px;
        font-family: roboto-mono, arial;
        padding:10px;
        position:absolute;
        z-index:300;
        left:50%;
        width:100px;
        margin-left:-50px;
        text-align:center;
        top:10px;
        padding:2px;
        border-radius:8px;  
        background-color:#00000080;
            
    }

    .hidearea {
        display:none;
    }
    #filters .smallknap {
        font-size:10px;
        padding:8px 4px;
        width:20%;        
    }
    #mobilemoney {
        margin-top:0px;
        
    }
    #burgerbar .infobar-txt {
        font-size:12px;
        margin-right:70px;
    }
    #burgerbar label {
        color:#0099ff;
        font-size:10px;
        margin-bottom:-3px;
    }
    #burgerbar .icon {
        height:50px;
        margin-right:5px;
    }
    #popin {
        position:fixed;
        width:200px;
        font-size:12px;
        padding:10px;
    }
    #popin h2 {
        font-size:14px;
    }
    #popin .knap {
        padding:5px 20px;
    }
    #topinfobar {
        background-color: transparent;
        color:#ffffff90;
        width:320px;
        font-size:10px;
     
        
    }
    #topinfobar b {
        font-size:14px;
    }
    #nextupdate {
        margin-left:0%;
        left:10px;
        width:auto;
        text-align: center;;
        top: 0px;
        bottom: auto;
        padding:5px;
        z-index:600;
        font-size:11px;
        border-radius: 0px 0px 5px 5px;
        
    }
    #votenextday {
        bottom: 85px;
        width:auto;
        padding:5px;
        border-radius: 5px;
    }
    .onoffbox {
        margin-right:2%;
        width:23%;
    }
    .onoff {
        float:none;
    }
    #likebar {
        width:100%;
        left:0px;
        border-radius: 0px;
        margin:0px;
        top:50px;
    }
    .warningbar {
        top:100px;       
        height:auto;
        max-width:350px;
    }
    #loginbox {
        padding:20px;
       /* margin:5px; */
    }
    #toplogo {
   
        padding:100px 25px;
        margin:0px;
    }
    .knap.fit {
        font-size:14px;
        padding:10px 10px;
    }
    .stockbar {
        top:50px;
    }


    #chgjersey {

        width:100%;
        top:0px;
        left:0px;
        padding:10px;
        height:100%;

        border-radius: 0px;

    }

    .overlayfix {
        width:90%;
        left:5%;
        margin:0px;
        top:10px;
    }
    #bidoverlay {
        display:none;
        width:100%;
        left:0px;
        top:100px;
        
    }
    .reward {
       
        
        width:90%;
        left:50%;
        margin-left:-45%;
        top:5px;
    }
    .reward input[type=text] {
        background-color:black
    }

    .smallknap {
        padding:8px 8px;
        width:auto;
        font-size:11px;
        text-align: center;

        box-shadow: none;
    
    }
    .knap {
        width:100%;
        display:block;
        border-radius:8px;
        text-align: center;

    }
    input[type=submit] {
        width:100%;
        display:block;
        text-align: center;
        
    }
    .knap.small {
        width:30%;
        margin:5px 1%;
        display: inline-block;
    }

    #choosestrat .knap.small {
        width: 23%;
     
        margin:1px;
        left: 0px;
        padding-left: 5px;
        padding-right: 5px;
        /* font-weight: normal; */
        font-size: 13px;
        overflow: hidden;
    }
    #tactics .knap.small {
        width:auto;
        padding:7px 10px;
        text-align: left;
    }
    #writemail {
        width:90%;
        left:50%;
        margin-left:-45%;
        position:fixed;
        top:0px;
    }

.claim {
    width:100%;
    left:0;
    margin:0%;
    width:100%;
    position:relative;
    animation:none;
    border-radius: 0px;
    padding:10px;

}
.bubble {
    width:210px;
    font-size:14px;
    padding:8px;
    border-radius: 8px;;
    height:auto;
    margin-top:-20px;
    color:black;
}
.speachstroke {
    margin-top:10px;
}

.bubble h3 {
    font-size:14px;
}
#boss {
/*   margin-bottom:20px; */
}

.subplayer {
    width:46%;
    margin:2%;
}
.tutbuttons {
    left:0px;
    text-align: center;
    position: relative;
}
.tutorial {
    display: inline-block;
}
.darkimage {
  /*  background-image: url('img/back_phone.jpg'); */
}
#nextmatch {
    padding-top:40px;
    min-height:200px;
    vertical-align: center;
}

    .playtime
    {

        font-size:7px;
    
    }
    .strategy-cons {

        font-size:7px;

    }

    label {
        display:block;
        width:100%;
    }

    label.same {
        width:  auto;
        display: inline-block;
    
    }

    #infobar {
        /*  display:none; */
        height:45px;
        overflow:hidden;
    
     }
     #infobar .icon {
         height:24px;
         
     }
     #infobar .shield {
         height:24px;
     }
     #infobar.smaller {
         height:0px;
         padding:0px;
     }
     #appbarspacer {
         height:50px;
     }
     #infobar label{
         font-size:12px;
     }
     .infobar-txt {
         font-size:12px;
         margin-left:10px;
     }  
    

    #gameview {
        height:550px;
    }
    #pitch {
        transition:left 2s,top 2s;
        left:0px;
        width:1000px;
        height:625px;
        background-size:1000px 625px;
    }
#realtime 
{
    font-size:40px;
}
    #loginbox label 
    {
        display:block;
        width:100%; 
    }
    .slide img {
        width:100%;
        height:auto;
    }
    .slide p {
        font-size:18px;
        margin-left:5%;
        margin-right:5%;
    }
    body {
        background-color: #07436b;;
    }
    #topback {
        background-color: #07436b;;
        height:150px;
        width:100%;
        top:-100px;
        position: fixed;
        z-index:498;
    }
    

    #playerstate
    {
        margin-top:50px;
    }
    .tips {
        left:2%;
        width:96%;
        margin-bottom:20px;
        padding:20px;
        position:relative;
    }

    .match-pitch {

   
   
    }
    .playerdot1,.playerdot2 {
        transform: scale(0.88);
    }

    #mainarea-wide {
        padding-top:50px;
        min-height:700px;
    }
    #ballholder2 {
       
        z-index:300;
        position: absolute;
        width:100%;
        text-align:center;
        margin-top:0px;
        top:400px;
    }
    .trophybox h1 {line-height:60px}

    .stadiumgfx
    {
        position:absolute;width:150%;
        margin-left:-25%;
        margin-top:-10%;
    }   
    .text {
        padding:0px 25px;
    }
    .middlecol {
        width:100%;
        margin:0px 0%;
        box-sizing: border-box;
      
    }

    #substitutes {
        padding:0px 0px;
    }
    .present {
        padding:10px;
    }

    .email {
  
    }
    .inner {
        padding:10px 10px;
    }

    .present h1 {
        padding-left:0px;
    }
    .email h1 {
        padding:0px;
    }
    .trainingday h1 {
        padding:0px;
    } 

    .col1 .news h1 {
        padding:0px;
        font-size:25px;
        margin-top:10px;
    }

    .col3 .news h1,.col4 .news h1 {
        padding:0px;
        font-size:18px;
        margin-top:15px;
    }

    .col1 .news p {
        font-size:16px;
        line-height: 1.3;
    }

    #strategy {
   
        left:0px;
        background-position-x: center;
        background-size: 170%;
    }
    .overlaybox {
        position:absolute;
        top:20px;
        left:5%;
        width:90%;
        /* padding-top:50px; */
        z-index: 300;
    }
    .overlaybox img {
        max-height:128px;
    }
    h1 {
        font-size:20px;
    }
    h2 {
        font-size:18px;
    }
    h3 {
        font-size:16px;
    }
    h4 {
        font-size:15px;
        font-weight: normal;
    }
    .playercard {
        height:480px;
    }
    .playercard label {
        margin-top:4px;
    }
    .playercard .col2
    {
        width:50%;
        float:left;
    }

    td,th {
        font-size:13px;
    }
    #bundbar {
        display: none;
    }
    .calendar-row {
        width: calc(100vw - 138px);
        max-height: 48px !important;
        top: 4px;
        left: 4px;
        position: absolute;
        z-index: 500;
        transition: none;
    }
    .calendar-row h2 {
      font-size: 20px !important;
      text-transform: none !important;
    }
    .calendar-row .calendar-date-badge--date {
      font-size: 1.25em !important;
    }
    #topbarheader,
    #topbar {padding:0px;}
    #radar {
        width:80%;
        left:10%;
        
    }
    #match-dices
    {
        display:none;
    }
    .scrollarea
    {
        /* overflow: auto; */
        overflow:visible;
        height:auto;
    }
    #mailcol {
        overflow: visible;
        height: auto;
    }
    #situ img {
        
 
    }
    #match-players1,
    #match-players2 {
      width:48%;
    }
    .match-player 
    {   
        display:block;
        width:100%;
        height:60px;
        padding:3px;

        margin:0 0 10px 0px;
        overflow: hidden;;
    }
    #matchcontrol {
        position: absolute;
        top:490px;
        left:0%;
        width:100%;
        text-align: center;
       
    
    }
    #matchcontrol .knap {
        width:14%;
        margin:0px;
        font-size:8px;
        padding:10px 2px;
    }
    #time {
        font-size:12px;
    }
    .matchchain {width:22%;padding:0;margin:0}
    .match-pitch {padding:0px;}
    .match-player h2 {
        font-size:13px;
        margin-top:0px;
    }
    .match-player h1,
    .match-player h3 {
        font-size:7px;
    }
    #match-standing {
        height:30px;
        width:100%;
        margin-top:10px;
    }
    #battle {
        padding:5px;
        width:100%;
   
    }
    #match-standing .club
    {
        padding:5px 0px;
        font-size:16px;   
        overflow:visible;
    }
    #match-standing .score
    {
     font-size:24px; 
     padding:0px; 
    }
    #time {
        font-size:14px;
        top:0px;
        padding:4px;
    }
    #situ {
        display:block;
        font-size:15px;
        top:400px;
    }
    #battle1 {width:40%;
        
        left:10px;
    }
    #battle2 {width:40%;
            right:10px;}
                
    
    #ball {
        filter: none;
    }
    #ball img {width:25px;margin-left:14px;}

    .col6 {width:50%;}
    #toplogo img {width:100%;}


    #bundbar
        {
            text-align: center;
            padding:10px;
            height:35px;
            width:100%;
            left:0px;
            bottom:70px;
            margin-left:0px;
            padding:5px 2px;
            font-size:10px;
            border-radius: 0px;;
            overflow:hidden;
            
        }
    #bundbar label {
         margin:0 2px 0px 2px;
    }
    .col4 {
        width:50%;
    }
    .warn {
        top:10px;
        left:4px;
    }
    #messagebox {
        left:5%;
        bottom:55px;
        height:100px;
        width:90%;
  
        margin:0;
        padding-top:30px;
     
    }
    .playercard-close {
        left:45%;
        height:25px;
        margin:5;
        width:25px;;
        background-size: 100%;;
        background-repeat: no-repeat;
        z-index:300;
        position: fixed;
    }

 
    tr {
       /* height: 50px; */
    }
    
    #playerview {
        position: relative;
        /* position: relative;height:100% */
        background-color: #000000f0;
        box-shadow: 0px 2px 10px #000;
        height:auto;
        width:100%;
        /* padding:2px; */
        left:0px;
        padding-top:35px;

    }
    #playerbox {position: absolute;
    width:100%;
    /* height:100%; */
    }
    .content {
        padding:10px;
        margin:0px;
    }
    .nopad {
        padding:0px 10px;
    }
    .noedge {
        padding:0px;
    }
    

  #infobox
      {
  
          padding:40px;
          width:300px;
          left: 50%;
          margin: 0 -150px;
      }
      input {
          width:100%;
      }
  #loginbox {
      width:100%;
      margin-top:0px;
  
  }
  #loginbox h1 {
     padding:0;
  }

  .playercard {
            
  }
  .col2-3 {float:none;width:100%;overflow:hidden;padding:0px;}
  .col2 {float:none;width:100%;overflow:hidden;padding:0px;}
  .col3 {float:none;width:100%;padding:0px;}
  .mcol1 {width:100%;float:none;}
  .mcol2 {width:50%;float:left;}
  .mcol3 {width:33%;float:left;padding:0px 5px;font-size:13px;}

  #strategy {
      width:100%;
  }
  .playercard-pos {
    width:100%;
    float:none;
    padding-right:0px;
    text-align: center;
}
.playercard-info {
    width:100%;
    float:none;
    text-align: center;
}
.playercard-info .knap 
  {
      display: block;;
      margin:0 auto;
  }
  .player h1 {
      padding:0px;
      font-size:22px;



  }
  .player {
    height:125px;
  }
  .player h2,.player h3 {
      font-size:8px;
  }


  .button-warn {
    position: relative;
   float:none;
}

  #burgerbar {
      top:0px;
    position: fixed;

    display:block;
    padding:0px;;
    margin:0px;
    height:50px;
    width:100%;
    background-color:#005b97;
    z-index:601;
}
#burgerbar h1 {margin:0px;padding:5px 0px 5px 10px;color:white;font-size:17px;text-shadow:2px 3px #0e1116;}
#burgerbar h2 {
  position: absolute;
  padding: 10px 2px 0;
  right: 65px;
  width: 50px;
  text-align: right;
  color:white;font-size:12px;
}



  #menubar {

      position:fixed;
      margin-top:50px;
      top:0px;
      width:100%;
      height:100%;
      overflow:scroll; 
      z-index:600;
  }
  #menubar a {
    display:block;
    width:100%;
    box-sizing: border-box;
    margin-bottom:2px;
    height:50px;
    font-size:18px;
    line-height:35px;
    background:none;
    text-align: center;
    border-bottom: 1px #002e4d solid;

  }

  #menubar {
      display:none;
  }
  .bbar {
    display: block;
    width:100%;
    height:4px;
    background-color: #0099ff;
    margin-bottom:4px;
    }

    #menufold {
        cursor: pointer;
        position: absolute;
        top:0px;
        height:100%;
        width:60px;
        right:0px;
        border-left:#21222D solid 1px;
        padding:15px;
    }
    


  .left,
  .right {float:none;}

  .mobile {
    display:block;
}
.desktop {display: none;}

}

@media (max-width: 440px)
{
.medium {
    display:none;
    }

    #appbar {
        bottom:0px;
        top:auto;
        display:block;
        height:70px;
   
        position: fixed;

        width:100%;
        background:#002c52;
        color:#3AAEEF;
        font-size:12px;
        z-index:600;

    }
    #appbuttons {
        height:70px;
    }
    .appbtn {
        padding:10px;
        width:20%;
        height:100%;
        float:left;
        text-align: center;

    }
    .appbtn img {
        height:20px;
        margin-bottom:5px;
    }
    .appbtn.selected {
        background:#003f76;
     
        
    }
    .appmain {
        color:#81ccff;
        background:#006eff;
    }
    .appmain.selected {
        background:#0f77ff;
        color:white;

    }   
}

@media (max-width: 320px)
{
.bubble {
    width:200px;
    font-size:13px;
    margin-top:-40px;
    height:150px;
}

/* Footer Language Selector */
.footer-language {
    grid-column: 1 / -1;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #333;
}

.language-selector {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.lang-label {
    color: #ccc;
    font-size: 14px;
    font-weight: 500;
}

.lang-links {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.lang-link {
    color: #888;
    text-decoration: none;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 13px;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.lang-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.lang-link.active {
    color: #fff;
    background: #007bff;
    border-color: #007bff;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.3);
}
}
/* Mobile responsiveness for footer language selector */
@media (max-width: 768px) {
    .language-selector {
        flex-direction: column;
        gap: 8px;
    }
    
    .lang-links {
        justify-content: center;
    }
    
    .lang-link {
        font-size: 12px;
        padding: 3px 6px;
    }
}

/* ========================================
   GETTING STARTED CHECKLIST STYLES
   ========================================
   Styles for the new player onboarding checklist
   Located in: inc/startchecklist.php
   ======================================== */

.getting-started-checklist {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    color: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    border: 1px solid #34495e;
    /* Test style to verify CSS is loading */
    min-height: 200px;
}

.checklist-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.checklist-title {
    margin: 0;
    font-size: 24px;
}

.checklist-subtitle {
    margin: 5px 0 0 0;
    opacity: 0.9;
}

.checklist-progress {
    text-align: right;
}

.checklist-percentage {
    font-size: 32px;
    font-weight: bold;
}

.checklist-complete-text {
    font-size: 12px;
    opacity: 0.8;
}

.progress-bar-container {
    background: rgba(255,255,255,0.2);
    border-radius: 10px;
    height: 8px;
    margin-bottom: 20px;
}

.progress-bar-fill {
    background: white;
    border-radius: 10px;
    height: 8px;
    transition: width 0.3s ease;
}

.tasks-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.task-item {
    border-radius: 8px;
    padding: 15px;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
}

.task-item.completed {
    background: rgba(255,255,255,0.2);
    border-left: 4px solid #4CAF50;
}

.task-item.incomplete {
    background: rgba(255,255,255,0.1);
}

.task-icon {
    font-size: 24px;
    margin-right: 15px;
}

.task-info {
    flex: 1;
}

.task-title {
    font-weight: 600;
    margin-bottom: 4px;
}

.task-description {
    font-size: 14px;
    opacity: 0.8;
    margin-bottom: 8px;
}

.task-link {
    display: inline-block;
    background: rgba(255,255,255,0.2);
    color: white;
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
 
    transition: all 0.3s ease;
}

.task-link:hover {
    background: #0066ff;
    color:white;
    text-decoration: none;
}

.task-reward-section {
    text-align: right;
}

.claim-button {
    background: #4CAF50;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 12px;
    cursor: pointer;
}

.claimed-text {
    color: #4CAF50;
    font-size: 12px;
}

.coin-text {
    font-size: 12px;
    opacity: 0.7;
}

.no-reward-text {
    font-size: 12px;
    opacity: 0.7;
    color: #ccc;
}

.completion-message {
    text-align: center;
    margin-top: 20px;
    padding: 15px;
    background: rgba(255,255,255,0.1);
    border-radius: 8px;
    border: 1px solid #34495e;
}

.completion-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 8px;
}

@media (max-width: 768px) {
    .tasks-grid {
        display: block;
    }
    
    .tasks-grid > div {
        margin-bottom: 12px;
    }
}

/* ========================================
   CHECKLIST REWARD ANIMATIONS
   ======================================== */

@keyframes coinFloat {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 1;
    }
    50% {
        transform: translate(-50%, -70%) scale(1.2);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -100px) scale(0.8);
        opacity: 0;
    }
}

@keyframes slideInRight {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.floating-coin {
    animation: coinFloat 2s ease-out forwards;
}

.reward-notification {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    animation: slideInRight 0.3s ease-out;
}

/* ========================================
   TASK STATUS STYLES
   ======================================== */

.status-done {
    display: flex;
    align-items: center;
    justify-content: center;
}

.done-icon {
    font-size: 24px;
    animation: bounce 0.6s ease-in-out;
}

.status-pending {
    display: flex;
    align-items: center;
    justify-content: center;
}

.pending-icon {
    font-size: 20px;
    opacity: 0.6;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

/* ========================================
   REWARD NOTIFICATION STYLES
   ======================================== */

.reward-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background-color: #005b97;
    border-radius: 8px;
    padding: 20px;
    padding-right: 50px; /* Make room for close button */
    color: white;
    display: flex;
    align-items: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    animation: slideInRight 0.3s ease-out;
    z-index: 10000;
    max-width: 400px;
    min-width: 300px;
}

.reward-notification.error {
    background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%);
}

.reward-notification .reward-icon {
    font-size: 40px;
    margin-right: 20px;
    flex-shrink: 0;
}

.reward-notification .reward-content h2 {
    margin: 0 0 8px 0;
    font-size: 24px;
    font-weight: bold;
}

.reward-notification .reward-content p {
    margin: 4px 0;
    font-size: 16px;
    opacity: 0.9;
}

.reward-notification .close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.reward-notification .close-button:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Mobile responsiveness for reward notifications */
@media (max-width: 768px) {
    .reward-notification {
        top: 10px;
        right: 10px;
        left: 10px;
        max-width: none;
        min-width: auto;
        padding: 15px;
        padding-right: 45px;
    }
    
    .reward-notification .reward-icon {
        font-size: 30px;
        margin-right: 15px;
    }
    
    .reward-notification .reward-content h2 {
        font-size: 20px;
        margin: 0 0 6px 0;
    }
    
    .reward-notification .reward-content p {
        font-size: 14px;
        margin: 3px 0;
    }
    
    .reward-notification .close-button {
        top: 8px;
        right: 8px;
        width: 20px;
        height: 20px;
        font-size: 14px;
    }
}

/* Modern Modal Styles */
.modern-modal {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    border: 2px solid #4a9eff;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    z-index: 100;
}

.modern-modal .close {
    color: #4a9eff;
    font-size: 24px;
    font-weight: bold;
}

.modern-modal-header {
    text-align: center;
    margin-bottom: 20px;
}

.modern-modal-title {
    color: #ffffff;
    font-size: 2.5rem;
    margin-bottom: 10px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.modern-modal-subtitle {
    color: #b0b0b0;
    font-size: 1.1rem;
    margin: 0;
}

.modern-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.modern-info-card {
    padding: 15px;
    border-radius: 15px;
    border: 1px solid;
}

.modern-info-card.blue {
    background: rgba(74, 158, 255, 0.1);
    border-color: #4a9eff;
}

.modern-info-card.green {
    background: none;
    border-color: #2ecc71;

}

.modern-info-card.yellow {
    background: rgba(255, 193, 7, 0.1);
    border-color: #ffc107;
}

.modern-info-label {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.modern-info-label.blue {
    color: #4a9eff;
    background: none;
}

.modern-info-label.green {
    color: #2ecc71;
    background: none;
}

.modern-info-label.yellow {
    color: #ffc107;
    background: none;
}

.modern-info-value {
    color: #ffffff;
    font-size: 2rem;
    font-weight: bold;
}

.modern-info-subtext {
    color: #b0b0b0;
    font-size: 0.9rem;
}

.modern-slider-section {
    margin-bottom: 20px;
}

.modern-slider-title {
    color: #ffffff;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 10px;
    text-align: center;
}

.modern-slider {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: #2d3748;
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    border: none;
}

.modern-slider::-webkit-slider-track {
    background: #2d3748;
    height: 8px;
    border-radius: 4px;
    border: none;
}

.modern-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: #4a9eff;
    cursor: pointer;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    transition: all 0.2s ease;
}

.modern-slider::-webkit-slider-thumb:hover {
    background: #2980b9;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(74, 158, 255, 0.4);
}

.modern-slider::-moz-range-track {
    background: #2d3748;
    height: 8px;
    border-radius: 4px;
    border: none;
}

.modern-slider::-moz-range-thumb {
    height: 20px;
    width: 20px;
}

/* Results page modern styling */
.match-result-item {
    padding: 12px 16px;
    margin: 8px 0;
    border-radius: 8px;
    background: rgba(30, 30, 46, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.match-result-item:hover {
    background: rgba(30, 30, 46, 0.6);
    border-color: rgba(74, 158, 255, 0.3);
    transform: translateX(4px);
}

.match-result-item.highlight {
    background: rgba(74, 158, 255, 0.15);
    border-color: rgba(74, 158, 255, 0.4);
    color: #00ff73;
}

.match-result-item a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-decoration: none;
    color: inherit;
}

.match-result-item .match-team-name {
    flex: 1;
    text-align: left;
    font-weight: 500;
}

.match-result-item .match-score {
    margin: 0 16px;
    font-weight: 600;
    color: #4a9eff;
    font-size: 14px;
}

.match-round-header {
    margin: 24px 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid rgba(74, 158, 255, 0.3);
}

.match-round-header h3 {
    margin: 0;
    color: #4a9eff;
    font-size: 18px;
    font-weight: 600;
}

.division-header {
    margin: 20px 0 12px 0;
    padding: 8px 12px;
    background: rgba(74, 158, 255, 0.1);
    border-radius: 6px;
    border-left: 4px solid #4a9eff;
}

.division-header h2,
.division-header h4 {
    margin: 0;
    color: #4a9eff;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.showlive.match-result-item {
    cursor: pointer;
}

.showlive.match-result-item:hover {
    background: rgba(74, 158, 255, 0.2);
}

.round-container {
    margin-bottom: 24px;
    padding: 16px;
}

.round-container:last-child {
    margin-bottom: 0;
}

.round-container .match-round-header {
    margin-top: 0;
    margin-bottom: 16px;
}

.round-container .match-result-item:first-of-type {
    margin-top: 0;
}
    border-radius: 50%;
    background: #4a9eff;
    cursor: pointer;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    transition: all 0.2s ease;
}

.modern-slider::-moz-range-thumb:hover {
    background: #2980b9;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(74, 158, 255, 0.4);
}

.modern-slider-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    color: #b0b0b0;
    font-size: 0.9rem;
}

.modern-button-center {
    text-align: center;
}

/* Responsive Modal Styles */
@media (max-width: 768px) {
    .modern-modal {
        margin: 5px 10px 10px 10px;
        max-width: calc(100vw - 20px);
        position: absolute;
        top: 55px;
        left: 50%;
        transform: translateX(-50%);
    }
    
    .modern-modal-header {
        margin-bottom: 20px;
    }
    
    .modern-modal-title {
        font-size: 2rem;
    }
    
    .modern-modal-subtitle {
        font-size: 1rem;
    }
    
    .modern-info-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 20px;
    }
    
    .modern-info-card {
        padding: 10px;
    }
    
    .modern-info-value {
        font-size: 1.3rem;
    }
    
    .modern-slider-section {
        margin-bottom: 20px;
    }
    
    .modern-slider-title {
        font-size: 1rem;
        margin-bottom: 10px;
    }
    
    .modern-button {
        padding: 12px 30px;
        font-size: 1.1rem;
    }
}

@media (max-width: 480px) {
    .modern-modal {
        margin: 5px 5px 5px 5px;
        max-width: calc(100vw - 10px);
        border-radius: 15px;
        position: absolute;
        top: 5px;
        left: 50%;
        transform: translateX(-50%);
    }
    
    .modern-modal-title {
        font-size: 1.8rem;
    }
    
    .modern-info-card {
        padding: 8px;
    }
    
    .modern-info-value {
        font-size: 1.1rem;
    }
    
    .modern-info-label {
        font-size: 0.8rem;
    }
    
    .modern-info-subtext {
        font-size: 0.8rem;
    }
    
    .modern-button {
        padding: 10px 25px;
        font-size: 1rem;
    }
    
    .modern-slider-labels {
        font-size: 0.8rem;
    }
}

/* Training page */
:root {
    --tr-panel: rgba(8,14,26,0.92);
    --tr-card: #111c2e;
    --tr-line: #213047;
    --tr-text: #e9eef6;
    --tr-muted: #8496b0;
    --tr-lime: #c6f25a;
    --tr-coral: #ff6b7d;
    --tr-amber: #ffc24a;
    --tr-skill: #4cc9ff;
    --tr-tactic: #a98bff;
    --tr-stamina: #ff9d4a;
    --tr-rest: #34d6b4;
    --tr-team: #ff7ac6;
}
.tr-page {max-width:1320px;margin:0 auto;color:var(--tr-text);}
.tr-page h1,.tr-page h2,.tr-page h3 {font-family:teko,exo,arial;font-weight:normal;text-transform:uppercase;letter-spacing:0.03em;line-height:1;color:#fff;}
.tr-head {display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:12px;margin:6px 0 16px;}
.tr-head h1 {font-size:64px;margin:0;text-shadow:0 2px 12px #000;}
.tr-headinfo {display:flex;align-items:center;gap:8px;background:var(--tr-panel);border:1px solid var(--tr-line);border-radius:999px;padding:8px 16px;font-size:14px;}
.tr-pulse {width:8px;height:8px;border-radius:50%;background:var(--tr-lime);box-shadow:0 0 0 0 rgba(198,242,90,0.6);animation:trpulse 2s infinite;}
@keyframes trpulse {0% {box-shadow:0 0 0 0 rgba(198,242,90,0.6);} 70% {box-shadow:0 0 0 8px rgba(198,242,90,0);} 100% {box-shadow:0 0 0 0 rgba(198,242,90,0);}}
.tr-panel {background:var(--tr-panel);border:1px solid var(--tr-line);border-radius:14px;padding:20px 22px;margin-bottom:18px;} /* no backdrop-filter: it would pin position:fixed children (popups) to the panel */
.tr-panel h2 {font-size:28px;margin:0 0 14px;}
.tr-panelhead {display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:14px;}
.tr-panelhead h2 {margin:0;}
.tr-note {color:var(--tr-muted);font-size:13px;margin:10px 0 0;}
.tr-count {font-family:teko,exo,arial;font-size:26px;color:var(--tr-lime);}

/* Colour groups */
.tr-cat-skill {--cat:var(--tr-skill);}
.tr-cat-tactic {--cat:var(--tr-tactic);}
.tr-cat-stamina {--cat:var(--tr-stamina);}
.tr-cat-rest {--cat:var(--tr-rest);}
.tr-cat-team {--cat:var(--tr-team);}
.tr-cat-cup {--cat:var(--tr-amber);}
.tr-legend {display:flex;flex-wrap:wrap;gap:14px;font-size:12px;color:var(--tr-muted);}
.tr-legend span {display:flex;align-items:center;gap:6px;}
.tr-legend span::before {content:"";width:10px;height:10px;border-radius:3px;background:var(--cat);}

/* Week strip */
.tr-week {display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px;position:relative;}
.tr-when {font-size:12px;color:var(--tr-muted);text-align:center;margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase;letter-spacing:0.05em;}
.tr-when.tr-today {color:var(--tr-lime);font-weight:bold;}
.tr-day {position:relative;background:var(--tr-card);border:1px solid var(--tr-line);border-radius:12px;padding:16px 6px 12px;text-align:center;cursor:pointer;min-height:124px;box-sizing:border-box;overflow:hidden;transition:transform 0.2s,border-color 0.2s,background-color 0.2s;}
.tr-day::before {content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--cat,transparent);}
.tr-day:hover {transform:translateY(-3px);border-color:var(--cat,#3a5070);background-color:#15233a;}
.tr-day img {height:38px;width:auto;display:block;margin:0 auto 8px;}
.tr-day b {display:block;font-family:teko,exo,arial;font-weight:normal;font-size:24px;line-height:1;text-transform:uppercase;letter-spacing:0.02em;color:#fff;}
.tr-day span {display:block;margin-top:4px;font-size:12px;color:var(--tr-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tr-check {display:inline-block;width:12px;height:12px;color:var(--tr-lime);vertical-align:-1px;margin-right:4px;}
.tr-day.tr-past {opacity:0.55;}
.tr-day.tr-past:hover {opacity:0.85;}
.tr-day.active {opacity:1;border-color:var(--tr-lime);box-shadow:0 0 0 1px var(--tr-lime),0 10px 30px rgba(198,242,90,0.15);}
.tr-day.selected {opacity:1;transform:translateY(-3px);border-color:var(--cat,#fff);box-shadow:0 0 0 2px var(--cat,#fff),0 12px 30px rgba(0,0,0,0.5);background-color:#172741;}
.tr-day.tr-match {cursor:default;background:repeating-linear-gradient(90deg,#10301f 0 14px,#0d2819 14px 28px);border-color:#1f4a31;}
.tr-day.tr-match:hover {transform:none;}
.tr-day.tr-match span {color:#a9c9b4;}
.tr-day.tr-match .tr-res-win {color:var(--tr-lime);}
.tr-day.tr-match .tr-res-loss {color:var(--tr-coral);}
.tr-day.tr-midweek {--cat:var(--tr-amber);background:#2a2110;border-color:#6b5320;}
.tr-day.tr-midweek b,.tr-day.tr-midweek span {color:var(--tr-amber);}

/* Session picker */
.tr-picker {display:none;margin-top:18px;padding-top:16px;border-top:1px solid var(--tr-line);}
.tr-picker-head {display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px;margin-bottom:12px;}
.tr-picker-head h3 {font-size:26px;margin:0;}
.tr-picker-head span {color:var(--tr-muted);font-size:13px;}
.tr-options {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;}
.tr-option {position:relative;display:flex;gap:12px;align-items:center;background:var(--tr-card);border:1px solid var(--tr-line);border-radius:12px;padding:12px 12px 12px 16px;cursor:pointer;overflow:hidden;transition:border-color 0.2s,background-color 0.2s;}
.tr-option::before {content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--cat);}
.tr-option:hover {border-color:var(--cat);background-color:#15233a;}
.tr-option.current {border-color:var(--cat);box-shadow:0 0 0 1px var(--cat);}
.tr-option.current b::after {content:" \2022  current";font-family:exo,arial;font-size:11px;text-transform:none;color:var(--cat);letter-spacing:0;}
.tr-option img {height:34px;width:auto;flex:none;}
.tr-option b {display:block;font-family:teko,exo,arial;font-weight:normal;font-size:22px;line-height:1;text-transform:uppercase;color:#fff;margin-bottom:5px;}
.tr-fx {display:flex;flex-wrap:wrap;gap:4px;}
.tr-fx span {font-size:11px;padding:2px 7px;border-radius:999px;white-space:nowrap;}
.tr-fx-up {background:rgba(198,242,90,0.12);color:var(--tr-lime);}
.tr-fx-down {background:rgba(255,107,125,0.14);color:var(--tr-coral);}
.tr-hint {color:var(--tr-muted);font-size:13px;margin:14px 0 0;}

/* Cards */
.tr-cards {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-bottom:18px;}
.tr-cards .tr-panel {margin-bottom:0;}
.tr-row {display:flex;justify-content:space-between;gap:8px;font-size:14px;margin-bottom:6px;}
.tr-row b {font-family:teko,exo,arial;font-weight:normal;font-size:22px;line-height:0.9;}
.tr-meterrow {margin-bottom:14px;}
.tr-meter {position:relative;height:10px;border-radius:3px;background:#1b2a42;overflow:hidden;}
.tr-meter i {display:block;height:100%;background:var(--lvl);}
.tr-meter::after {content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 3px),var(--tr-panel) calc(10% - 3px) 10%);}
.tr-lvl-low {--lvl:var(--tr-coral);}
.tr-lvl-mid {--lvl:var(--tr-amber);}
.tr-lvl-good {--lvl:var(--tr-lime);}
.tr-row b.tr-lvl-low,.tr-row b.tr-lvl-mid,.tr-row b.tr-lvl-good {color:var(--lvl);}
.tr-stats {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.tr-stat {background:var(--tr-card);border:1px solid var(--tr-line);border-radius:10px;padding:10px 12px;}
.tr-statlabel {display:block;font-size:12px;color:var(--tr-muted);text-transform:uppercase;letter-spacing:0.05em;}
.tr-statnow {display:block;font-size:12px;color:var(--tr-muted);}
.tr-delta {display:flex;align-items:center;gap:6px;font-family:teko,exo,arial;font-weight:normal;font-size:30px;line-height:1.1;color:#fff;}
.tr-delta::before {content:"";width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;}
.tr-delta-up {color:var(--tr-lime);}
.tr-delta-up::before {border-bottom:8px solid var(--tr-lime);}
.tr-delta-down {color:var(--tr-coral);}
.tr-delta-down::before {border-top:8px solid var(--tr-coral);}
.tr-delta-flat {color:var(--tr-muted);}
.tr-coach {background:linear-gradient(160deg,rgba(198,242,90,0.10),rgba(198,242,90,0) 45%),var(--tr-panel);border-color:#3b4a2a;}
.tr-tips {list-style:none;margin:0 0 14px;padding:0;}
.tr-tips li {position:relative;padding-left:18px;margin-bottom:8px;font-size:14px;line-height:1.45;}
.tr-tips li::before {content:"";position:absolute;left:0;top:7px;width:8px;height:8px;border-radius:2px;background:var(--tr-lime);}
.tr-miniweek {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:14px;}
.tr-miniweek span {position:relative;display:flex;align-items:center;gap:6px;background:var(--tr-card);border:1px solid var(--tr-line);border-radius:8px;padding:5px 8px 5px 10px;font-size:12px;overflow:hidden;white-space:nowrap;}
.tr-miniweek span::before {content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--cat);}
.tr-miniweek span.tr-changed {border-color:var(--tr-lime);}
.tr-miniweek img {height:16px;width:auto;}
.tr-btn {display:block;text-align:center;background:var(--tr-lime);color:#0b1422;font-family:teko,exo,arial;font-size:22px;text-transform:uppercase;letter-spacing:0.04em;border-radius:10px;padding:10px 14px 7px;cursor:pointer;transition:filter 0.2s,transform 0.2s;}
.tr-btn:hover {filter:brightness(1.08);transform:translateY(-1px);}

/* Positions */
.tr-positions {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;}
.tr-pos {background:var(--tr-card);border:1px solid var(--tr-line);border-radius:12px;padding:14px 16px;}
.tr-big {display:block;font-family:teko,exo,arial;font-size:60px;line-height:0.95;color:#fff;margin:4px 0 2px;}

/* Personal trainers */
.tr-chips {display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;}
.tr-chip {display:flex;align-items:center;gap:10px;background:var(--tr-card);border:1px solid var(--tr-line);border-radius:12px;padding:8px 12px 8px 8px;transition:all 0.2s;}
.tr-chip small {display:block;font-size:12px;color:var(--tr-muted);}
.tr-chip a {color:#fff;}
.tr-avatar {display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:#1c3150;color:var(--tr-skill);font-family:teko,exo,arial;font-size:18px;flex:none;}
.tr-chip-x {cursor:pointer;color:var(--tr-muted);font-size:20px;line-height:1;padding:0 2px;margin-left:4px;}
.tr-chip-x:hover {color:var(--tr-coral);}
.tr-chip-add {background:transparent;border-style:dashed;border-color:#3a4d6b;cursor:pointer;color:var(--tr-muted);}
.tr-chip-add .tr-avatar {background:transparent;border:1px dashed #3a4d6b;color:var(--tr-lime);}
.tr-chip-add:hover {border-color:var(--tr-lime);color:#fff;}

@media (max-width:1024px) {
    .tr-week {grid-template-columns:repeat(4,minmax(0,1fr));}
    .tr-options {grid-template-columns:repeat(2,minmax(0,1fr));}
    .tr-cards {grid-template-columns:minmax(0,1fr);}
    .tr-head h1 {font-size:48px;}
}
@media (max-width:767px) {
    .tr-page {padding:0 10px;}
    .tr-positions {grid-template-columns:repeat(2,minmax(0,1fr));}
    .tr-options {grid-template-columns:minmax(0,1fr);}
    .tr-day b {font-size:20px;}
    .tr-when {font-size:11px;letter-spacing:0;}
    .tr-day span {font-size:11px;}
    .tr-panel {padding:16px;}
    .tr-legend {display:none;}
}

/* Club page (otherteam.php) - uses the training page tokens via .tr-page */
.ot-hidden {display:none;}
.ot-page .present {background:var(--tr-panel);border:1px solid var(--tr-line);border-radius:14px;}
.ot-page a {color:#fff;}
.ot-page .tr-note a {color:var(--tr-skill);}
.ot-admin {display:flex;flex-wrap:wrap;gap:14px;align-items:center;font-size:13px;background:#2a1a10d0;border:1px dashed #6b4520;border-radius:10px;padding:8px 14px;margin-bottom:14px;color:var(--tr-muted);}
.ot-admin b {color:var(--tr-amber);}
.ot-admin a {color:var(--tr-amber) !important;}
.ot-offer {border-color:var(--tr-lime);}
.ot-actionsrow {display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;}
.ot-btn {display:block;text-align:center;font-family:teko,exo,arial;font-size:19px;text-transform:uppercase;letter-spacing:0.04em;border-radius:10px;padding:8px 12px 5px;cursor:pointer;border:1px solid var(--tr-line);background:var(--tr-card);color:#fff !important;text-decoration:none;transition:border-color 0.2s,background-color 0.2s;}
.ot-btn:hover {border-color:var(--tr-skill);background-color:#15233a;text-decoration:none;}
.ot-btn-danger:hover {border-color:var(--tr-coral);}
.ot-page a.tr-btn {color:#0b1422 !important;text-decoration:none;}

/* Header */
.ot-hero {display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:26px;align-items:center;position:relative;overflow:hidden;background:linear-gradient(120deg,rgba(76,201,255,0.10),rgba(8,14,26,0) 40%),var(--tr-panel);}
.ot-hero::after {content:"";position:absolute;right:-70px;top:-70px;width:260px;height:260px;border-radius:50%;border:40px solid rgba(255,255,255,0.03);pointer-events:none;}
.ot-crest {position:relative;width:110px;height:110px;border-radius:24px;background:var(--tr-card);border:1px solid var(--tr-line);display:flex;align-items:center;justify-content:center;}
.ot-shield {height:66px;width:auto;}
.ot-jersey {position:absolute;right:-14px;bottom:-10px;height:48px;width:auto;background:var(--tr-panel);border:1px solid var(--tr-line);border-radius:10px;padding:3px;}
.ot-hero h1 {font-size:72px;margin:2px 0 0;text-shadow:0 2px 12px #000;overflow-wrap:anywhere;}
.ot-chips {display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.ot-chip {display:flex;align-items:center;gap:7px;background:var(--tr-card);border:1px solid var(--tr-line);border-radius:999px;padding:5px 12px;font-size:13px;}
.ot-chip img {height:14px;width:auto;border-radius:2px;}
.ot-chip small {color:var(--tr-muted);}
.ot-chip-warn {border-color:#6b5320;color:var(--tr-amber);}
.ot-dot {width:8px;height:8px;border-radius:50%;background:var(--tr-muted);flex:none;}
.ot-dot.ot-online {background:var(--tr-lime);box-shadow:0 0 8px var(--tr-lime);}
.ot-form {display:flex;align-items:center;gap:6px;margin-top:14px;}
.ot-form .tr-statlabel {margin-right:4px;}
.ot-res {width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-family:teko,exo,arial;font-size:20px;padding-top:3px;box-sizing:border-box;flex:none;}
.ot-res-w {background:rgba(198,242,90,0.15);color:var(--tr-lime);}
.ot-res-l {background:rgba(255,107,125,0.15);color:var(--tr-coral);}
.ot-res-d {background:rgba(255,194,74,0.15);color:var(--tr-amber);}
.ot-actions {display:flex;flex-direction:column;gap:8px;min-width:220px;position:relative;z-index:1;}
.ot-btnrow {display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.ot-actions .tr-note {max-width:240px;margin:0;}

/* Key numbers */
.ot-tiles {display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:18px;}
.ot-tile {background:var(--tr-panel);border:1px solid var(--tr-line);border-radius:12px;padding:14px 16px;}
.ot-tile .tr-big {font-size:52px;}
.ot-tile .tr-meter {margin-top:6px;height:8px;}

/* Rows */
.ot-row3 {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-bottom:18px;}
.ot-row2 {display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:18px;margin-bottom:18px;align-items:start;}
.ot-row2-wide {grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);}
.ot-row3 .tr-panel,.ot-row2 .tr-panel {margin-bottom:18px;}
.ot-row3 .tr-panel {margin-bottom:0;}
#otstandings {margin-bottom:18px;}

/* Next match */
.ot-vs {display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin:10px 0 14px;text-align:center;}
.ot-vs a {display:block;font-family:teko,exo,arial;font-size:30px;line-height:1;text-transform:uppercase;color:#fff;overflow-wrap:anywhere;}
.ot-vs small {display:block;font-size:12px;color:var(--tr-muted);}
.ot-vsword {font-family:teko,exo,arial;font-size:24px;color:var(--tr-muted);}
.ot-you {display:inline-block;font-size:11px;background:rgba(198,242,90,0.15);color:var(--tr-lime);border-radius:999px;padding:1px 8px;margin-top:4px;}
.ot-split {display:flex;height:12px;border-radius:6px;overflow:hidden;margin:6px 0 4px;}
.ot-split i:first-child {background:var(--tr-skill);}
.ot-split i:last-child {background:var(--tr-lime);}
.ot-splitlabels span:first-child {color:var(--tr-skill);}
.ot-splitlabels span:last-child {color:var(--tr-lime);}
.ot-row3 .ot-btn {margin-top:12px;}

/* Tables */
.ot-table {width:100%;border-collapse:collapse;font-size:14px;}
.ot-table th,.ot-table td {padding:7px 6px;text-align:left;border:0;vertical-align:middle;}
.ot-table th {font-size:11px;color:var(--tr-muted);text-transform:uppercase;letter-spacing:0.05em;font-weight:normal;border-bottom:1px solid var(--tr-line);}
.ot-table td {border-bottom:1px solid #18253a;}
.ot-table .ot-n {text-align:right;}
.ot-table tr.ot-me td {background:rgba(76,201,255,0.08);}
.ot-table tr.ot-me td:first-child {box-shadow:inset 3px 0 0 var(--tr-skill);}
.ot-table tr.ot-mine a {color:var(--tr-lime);}
.ot-result {display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:center;padding:6px 0;border-bottom:1px solid #18253a;color:#fff;text-decoration:none;}
.ot-result:last-child {border-bottom:0;}
.ot-result:hover {text-decoration:none;background:rgba(255,255,255,0.03);}
.ot-result small {display:block;font-size:11px;color:var(--tr-muted);}
.ot-result b {font-family:teko,exo,arial;font-weight:normal;font-size:22px;padding-top:3px;}

/* Squad */
.ot-squad tr {cursor:pointer;}
.ot-squad tr:hover td {background:rgba(255,255,255,0.03);}
.ot-pos {display:inline-block;width:40px;text-align:center;border-radius:6px;font-size:11px;padding:2px 0;font-weight:bold;}
.ot-pos1 {background:rgba(255,194,74,0.15);color:var(--tr-amber);}
.ot-pos2 {background:rgba(76,201,255,0.15);color:var(--tr-skill);}
.ot-pos3 {background:rgba(52,214,180,0.15);color:var(--tr-rest);}
.ot-pos4 {background:rgba(169,139,255,0.15);color:var(--tr-tactic);}
.ot-xi {font-size:10px;color:var(--tr-lime);border:1px solid #3b4a2a;border-radius:4px;padding:0 4px;margin-left:6px;}
.ot-inj {font-size:10px;color:var(--tr-coral);border:1px solid #5a2a33;border-radius:4px;padding:0 4px;margin-left:6px;}
.ot-skill {display:flex;align-items:center;gap:8px;justify-content:flex-end;}
.ot-skillbar {position:relative;width:80px;height:6px;border-radius:3px;background:#1b2a42;overflow:hidden;}
.ot-skillbar i {position:absolute;left:0;top:0;bottom:0;background:var(--tr-lime);}
.ot-skillbar s {position:absolute;top:0;bottom:0;background:rgba(198,242,90,0.25);text-decoration:none;}
.ot-skill b {min-width:28px;text-align:right;}
#otplayerlist {margin-top:12px;overflow-x:auto;}

/* Club */
.ot-stadium {position:relative;height:120px;border-radius:10px;overflow:hidden;margin-bottom:12px;background:var(--tr-card);}
.ot-stadium img {position:absolute;left:0;top:50%;width:100%;height:auto;transform:translateY(-50%);}
.ot-kv {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.ot-kv > div {background:var(--tr-card);border:1px solid var(--tr-line);border-radius:10px;padding:10px 12px;}
.ot-kv b {display:block;font-family:teko,exo,arial;font-weight:normal;font-size:26px;line-height:1.05;color:#fff;}
.ot-kv small {display:block;font-size:12px;color:var(--tr-muted);}
.ot-kv .ot-wide {grid-column:span 2;}
.ot-kv .ot-warn {border-color:#5a2a33;}
.ot-kv .ot-warn b {color:var(--tr-coral);}
.ot-buy {display:inline-block;margin-top:8px;font-size:18px;padding:6px 14px 4px;}
.ot-medal {display:flex;align-items:center;gap:12px;background:var(--tr-card);border:1px solid var(--tr-line);border-radius:10px;padding:10px 12px;margin-bottom:8px;}
.ot-medal img {height:32px;width:auto;}
.ot-medal small {display:block;font-size:12px;color:var(--tr-muted);}
#ottrophies {margin-top:10px;}

/* Formation and news */
.ot-pitch {position:relative;height:420px;border-radius:12px;overflow:hidden;border:1px solid #1f4a31;background:repeating-linear-gradient(0deg,#10301f 0 42px,#0d2819 42px 84px);}
.ot-pitch::before {content:"";position:absolute;inset:14px;border:2px solid rgba(255,255,255,0.12);border-radius:4px;pointer-events:none;}
.ot-pitch::after {content:"";position:absolute;left:50%;top:50%;width:90px;height:90px;margin:-45px 0 0 -45px;border:2px solid rgba(255,255,255,0.12);border-radius:50%;pointer-events:none;box-shadow:0 0 0 0 transparent;}
.ot-spot {--role:var(--tr-skill);position:absolute;z-index:1;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:4px;width:92px;cursor:pointer;}
.ot-spot span {display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;background:#0b1422;border:3px solid var(--role);box-shadow:0 4px 14px rgba(0,0,0,0.5);font-family:teko,exo,arial;font-size:22px;padding-top:3px;box-sizing:border-box;color:#fff;transition:transform 0.2s;}
.ot-spot:hover span {transform:scale(1.1);}
.ot-spot small {max-width:92px;font-size:11px;line-height:1.2;text-align:center;color:#fff;background:rgba(8,14,26,0.75);border-radius:4px;padding:1px 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ot-spot1 {--role:var(--tr-amber);}
.ot-spot2 {--role:var(--tr-skill);}
.ot-spot3 {--role:var(--tr-rest);}
.ot-spot4 {--role:var(--tr-tactic);}
.ot-spot-empty {cursor:default;}
.ot-spot-empty span {border-style:dashed;background:transparent;box-shadow:none;}
.ot-spot-empty small {color:var(--tr-muted);}
.ot-spot-inj span {box-shadow:0 0 0 3px var(--tr-coral),0 4px 14px rgba(0,0,0,0.5);}
.ot-pitchlegend {margin-top:10px;}
.tr-legend .ot-leg-gk::before {background:var(--tr-amber);}
.tr-legend .ot-leg-def::before {background:var(--tr-skill);}
.tr-legend .ot-leg-mid::before {background:var(--tr-rest);}
.tr-legend .ot-leg-fwd::before {background:var(--tr-tactic);}
.ot-news {display:grid;grid-template-columns:78px minmax(0,1fr);gap:12px;padding:10px 0;border-bottom:1px solid #18253a;cursor:pointer;}
.ot-news:last-child {border-bottom:0;}
.ot-news > span {font-size:12px;color:var(--tr-muted);}
.ot-news b {font-weight:normal;}
.ot-news p {display:none;margin:6px 0 0;font-size:13px;color:#b9c6d8;}

/* Clubs overview */
.ot-regions {display:flex;flex-wrap:wrap;gap:8px;}
.ot-regions a.ot-chip {color:#fff;text-decoration:none;transition:border-color 0.2s;}
.ot-regions a.ot-chip:hover {border-color:var(--tr-skill);}
.ot-regions a.ot-chip-on {border-color:var(--tr-lime);color:var(--tr-lime);}
.ot-divgrid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;}
.ot-divgrid .tr-panel {margin-bottom:0;}
.ot-flag {height:18px;width:auto;border-radius:2px;}
.ot-prize {position:relative;}
.ot-prize img {position:absolute;right:12px;top:12px;height:34px;width:auto;opacity:0.9;}
.ot-prize b {display:block;font-family:teko,exo,arial;font-weight:normal;font-size:30px;line-height:1.1;color:#fff;margin-top:10px;}
.ot-minicrest {height:18px;width:auto;vertical-align:middle;}
.ot-league td {padding:6px;}
.ot-league td:nth-child(2) {width:22px;}
.ot-league .ot-dot {display:inline-block;margin-left:6px;vertical-align:middle;}
/* League table: clubs played by a real manager (lime when the manager has been active today) */
.ot-human {margin-left:7px;font-size:10px;color:var(--tr-muted);vertical-align:middle;}
.ot-human-on {color:var(--tr-lime);}
.ot-zonepos {display:inline-block;min-width:24px;text-align:center;border-radius:6px;padding:1px 0;font-size:12px;}
.ot-zone-up .ot-zonepos {background:rgba(198,242,90,0.15);color:var(--tr-lime);}
.ot-zone-int .ot-zonepos {background:rgba(255,194,74,0.15);color:var(--tr-amber);}
.ot-zone-down .ot-zonepos {background:rgba(255,107,125,0.15);color:var(--tr-coral);}
.tr-legend .ot-leg-up::before {background:var(--tr-lime);}
.tr-legend .ot-leg-int::before {background:var(--tr-amber);}
.tr-legend .ot-leg-down::before {background:var(--tr-coral);}
.ot-vscrest {display:block;height:40px;width:auto;margin:0 auto 6px;}
.ot-fixture {display:grid;grid-template-columns:minmax(0,1fr) 22px auto 22px minmax(0,1fr);gap:8px;align-items:center;padding:7px 4px;border-bottom:1px solid #18253a;color:#fff;text-decoration:none;font-size:14px;}
.ot-fixture:last-child {border-bottom:0;}
.ot-fixture:hover {background:rgba(255,255,255,0.03);text-decoration:none;}
.ot-fixture span:first-child {text-align:right;}
.ot-fixture small {color:var(--tr-muted);font-size:11px;}
.ot-fixture img {height:20px;width:auto;}
.ot-fixture em {font-style:normal;font-size:12px;color:var(--tr-muted);}
.ot-fixture-mine span {color:var(--tr-lime);}
.ot-champions {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;text-align:center;}
.ot-champions > div {background:var(--tr-card);border:1px solid var(--tr-line);border-radius:10px;padding:10px 6px;}
.ot-champions a {display:block;font-size:13px;overflow-wrap:anywhere;}
.ot-champions small {display:block;font-size:11px;color:var(--tr-muted);}
.ot-medalimg {height:26px;width:auto;display:block;margin:0 auto 6px;}
.ot-person {display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid #18253a;cursor:pointer;}
.ot-person:last-child {border-bottom:0;}
.ot-person:hover {background:rgba(255,255,255,0.03);}
.ot-person b {font-weight:normal;display:block;}
.ot-person small {display:block;font-size:12px;color:var(--tr-muted);}
.ot-person small a {color:var(--tr-skill) !important;}
.ot-person em {font-style:normal;font-family:teko,exo,arial;font-size:26px;line-height:1;color:#fff;}
.ot-rank {display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--tr-card);border:1px solid var(--tr-line);font-family:teko,exo,arial;font-size:18px;padding-top:2px;box-sizing:border-box;}
.ot-person:first-of-type .ot-rank {border-color:var(--tr-lime);color:var(--tr-lime);}

@media (max-width:1024px) {
    .ot-tiles {grid-template-columns:repeat(3,minmax(0,1fr));}
    .ot-row3,.ot-row2,.ot-divgrid {grid-template-columns:minmax(0,1fr);}
    .ot-hero {grid-template-columns:auto minmax(0,1fr);}
    .ot-actions {grid-column:1/-1;}
    .ot-hero h1 {font-size:52px;}
}
@media (max-width:767px) {
    .ot-tiles {grid-template-columns:repeat(2,minmax(0,1fr));}
    .ot-hero {grid-template-columns:minmax(0,1fr);}
    .ot-crest {width:86px;height:86px;}
    .ot-shield {height:52px;}
    .ot-skillbar {width:50px;}
    .ot-pitch {height:360px;}
    .ot-spot {width:70px;}
    .ot-spot span {width:38px;height:38px;font-size:19px;}
    .ot-spot small {max-width:70px;font-size:10px;}
}

/* Player list (playerlist() in functions.php) - used on many pages */
.pl-wrap {container-type:inline-size;}
table.pl-table {width:100%;border-collapse:collapse;font-size:14px;color:var(--tr-text);}
table.pl-table th {font-family:exo,arial;font-weight:normal;font-size:11px;color:var(--tr-muted);text-transform:uppercase;letter-spacing:0.05em;text-align:left;padding:6px 6px 8px;border-bottom:1px solid var(--tr-line);white-space:nowrap;}
table.pl-table td {color:var(--tr-text);padding:6px;border-bottom:1px solid rgba(255,255,255,0.05);vertical-align:middle;}
table.pl-table tr.playerline {cursor:pointer;transition:background-color 0.15s;background:transparent;}
table.pl-table tr.players-main td {background:rgba(198,242,90,0.035);}
table.pl-table tr.playerline:hover td {background:rgba(76,201,255,0.06);}
table.pl-table tr.selected td {background:rgba(198,242,90,0.08);}
table.pl-table .pl-c {text-align:center;}
table.pl-table .pl-r {text-align:right;}
table.pl-table .pl-num {font-variant-numeric:tabular-nums;}
table.pl-table tr.pl-group td {border-bottom:0;padding:18px 6px 6px;font-family:teko,exo,arial;font-size:22px;line-height:1;text-transform:uppercase;letter-spacing:0.03em;color:#fff;background:transparent;}
table.pl-table tr.pl-group:first-of-type td {padding-top:10px;}
.pl-postag {display:inline-block;font-family:exo,arial;font-size:11px;font-weight:bold;letter-spacing:0;border-radius:6px;padding:2px 7px;margin-right:8px;vertical-align:3px;}
.pl-pos1 {--pos:var(--tr-amber);}
.pl-pos2 {--pos:var(--tr-skill);}
.pl-pos3 {--pos:var(--tr-rest);}
.pl-pos4 {--pos:var(--tr-tactic);}
.pl-postag.pl-pos1,.pl-postag.pl-pos2,.pl-postag.pl-pos3,.pl-postag.pl-pos4 {color:var(--pos);background:color-mix(in srgb,var(--pos) 16%,transparent);}
.pl-rs {display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:3px solid var(--pos,var(--tr-skill));background:#0b1422;font-family:teko,exo,arial;font-size:21px;line-height:1;padding-top:3px;box-sizing:border-box;color:#fff;}
tr.players-sub .pl-rs {border-style:dashed;}
tr.playerline:not(.players-main):not(.players-sub) .pl-rs {border-color:color-mix(in srgb,var(--pos) 45%,#0b1422);}
.pl-name {white-space:nowrap;}
.pl-name > span:first-child {font-size:15px;color:#fff;}
.pl-name .pl-n-sale {color:var(--tr-amber) !important;}
.pl-name .pl-n-injured {color:var(--tr-coral) !important;}
.pl-name .pl-n-contract {color:#ff88cc !important;}
.pl-name .pl-n-rentout {color:var(--tr-muted) !important;}
.pl-name .pl-n-rentin {color:var(--tr-skill) !important;}
.pl-badge {display:inline-block;font-size:10px;font-weight:bold;line-height:1;border-radius:4px;padding:3px 5px;margin-left:5px;vertical-align:1px;border:1px solid transparent;}
.pl-b-xi {color:var(--tr-lime);border-color:#3b4a2a;}
.pl-b-sub {color:var(--tr-muted);border-color:var(--tr-line);}
.pl-b-new {color:#0b1422;background:var(--tr-lime);}
.pl-b-pt {color:var(--tr-rest);border-color:#1f4a42;}
.pl-b-inj {color:var(--tr-coral);border-color:#5a2a33;}
.pl-icon {height:14px;width:auto;vertical-align:middle;margin-left:4px;}
.pl-flag {height:12px;width:auto;border-radius:2px;vertical-align:middle;}
.pl-up,.pl-down {display:inline-block;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;margin-left:6px;vertical-align:2px;}
.pl-up {border-bottom:7px solid var(--tr-lime);}
.pl-down {border-top:7px solid var(--tr-coral);}
.pl-meter {position:relative;width:70px;height:8px;border-radius:3px;background:#1b2a42;overflow:hidden;}
.pl-meter i {display:block;height:100%;background:var(--lvl);}
.pl-meter::after {content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(20% - 2px),#0b1422 calc(20% - 2px) 20%);}
.pl-lvl-low {--lvl:var(--tr-coral);}
.pl-lvl-mid {--lvl:var(--tr-amber);}
.pl-lvl-good {--lvl:var(--tr-lime);}
.pl-side {font-size:12px;color:var(--tr-muted);white-space:nowrap;}
.pl-status {white-space:nowrap;}
table.pl-table .pl-subbtn {background:var(--tr-card);border:1px solid var(--tr-line);border-radius:6px;color:#fff;font-size:11px;padding:3px 8px;margin:0;}
table.pl-table .pl-subbtn:hover {border-color:var(--tr-lime);color:var(--tr-lime);}
.pl-summary {display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-top:14px;}
.pl-summary > div {background:var(--tr-card);border:1px solid var(--tr-line);border-radius:10px;padding:8px 12px;}
.pl-summary span {display:flex;align-items:center;gap:6px;font-size:11px;color:var(--tr-muted);text-transform:uppercase;letter-spacing:0.05em;}
.pl-summary b {display:block;font-family:teko,exo,arial;font-weight:normal;font-size:26px;line-height:1.1;color:#fff;}
.pl-dot {width:8px;height:8px;border-radius:50%;background:var(--pos);flex:none;}
/* Fit the list to the box it sits in: drop the least important columns first */
@container (max-width:860px) {
    table.pl-table .pl-col-flag,table.pl-table .pl-col-cons,table.pl-table .pl-col-side {display:none;}
    table.pl-table td,table.pl-table th {padding:6px 4px;}
    .pl-meter {width:48px;}
}
@container (max-width:720px) {
    .pl-name {white-space:normal;}
}
@container (max-width:570px) {
    table.pl-table .pl-col-att,table.pl-table .pl-col-def,table.pl-table .pl-col-talent {display:none;}
}
@container (max-width:420px) {
    table.pl-table .pl-col-age,table.pl-table .pl-col-energy {display:none;}
}
@container (max-width:700px) {
    .pl-summary {grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:1024px) {
    .pl-summary {grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:767px) {
    .pl-summary {grid-template-columns:repeat(2,minmax(0,1fr));}
    .pl-rs {width:34px;height:34px;font-size:18px;}
    .pl-name {white-space:normal;}
}

/* Team page lineup (trup.php, inc/lineup.php, ajax-strategy-list.php) */
.lu-row {grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);}
.lu-forms,.lu-seg {display:flex;flex-wrap:wrap;gap:6px;}
.lu-seg {margin:6px 0 14px;}
.lu-form {background:var(--tr-card);border:1px solid var(--tr-line);border-radius:8px;padding:5px 10px;font-size:13px;color:#fff;cursor:pointer;transition:border-color 0.2s,background-color 0.2s;}
.lu-form:hover {border-color:var(--tr-skill);}
.lu-form-on {background:var(--tr-lime);border-color:var(--tr-lime);color:#0b1422;font-weight:bold;}
.lu-form-on:hover {border-color:var(--tr-lime);}
.lu-boost {color:var(--tr-lime);margin:0 0 10px;}
#lupitch {height:470px;}
.ot-spot.lu-sel span {box-shadow:0 0 0 4px rgba(198,242,90,0.35),0 0 18px rgba(198,242,90,0.5);transform:scale(1.12);}
.ot-spot.lu-warn span {box-shadow:0 0 0 3px rgba(255,194,74,0.55),0 4px 14px rgba(0,0,0,0.5);}
.ot-spot.lu-empty {cursor:pointer;}
.ot-spot.lu-empty span {font-size:26px;color:var(--tr-muted);}
.ot-spot small img {height:9px;width:auto;vertical-align:0;}
.tr-legend .lu-leg-warn::before {background:transparent;border:2px solid var(--tr-amber);box-sizing:border-box;border-radius:50%;}
.lu-stage {position:relative;}
.lu-picker {display:none;position:absolute;z-index:30;width:340px;max-width:100%;box-sizing:border-box;padding:12px 14px;background:#0b1422f7;border:1px solid #2c3f5e;border-radius:12px;box-shadow:0 18px 50px rgba(0,0,0,0.65);}
.lu-picker::before {content:"";position:absolute;left:var(--ax,50%);width:12px;height:12px;margin-left:-7px;background:#0b1422;border:1px solid #2c3f5e;transform:rotate(45deg);}
.lu-picker.lu-below::before {top:-7px;border-right:0;border-bottom:0;}
.lu-picker.lu-above::before {bottom:-7px;border-left:0;border-top:0;}
.lu-close {position:absolute;right:10px;top:4px;font-size:24px;line-height:1;color:var(--tr-muted);cursor:pointer;padding:2px 4px;}
.lu-close:hover {color:#fff;}
.lu-picker .lu-pickhead {padding-right:26px;}
.lu-picker .lu-pickhead h3 {font-size:20px;}
.lu-picker .lu-pickhead {margin-bottom:8px;}
.lu-picker .lu-actions .ot-btn {font-size:15px;padding:5px 9px 3px;}
.lu-picker .ot-chips {gap:5px;margin-bottom:8px !important;}
.lu-picker .ot-chip {font-size:11px;padding:3px 8px;}
.lu-picker .lu-cand {grid-template-columns:32px minmax(0,1fr) auto;gap:8px;padding:5px 8px;}
.lu-picker .lu-cand .pl-rs {width:32px;height:32px;font-size:17px;border-width:2px;}
.lu-picker .lu-cand b {font-size:13px;}
.lu-picker .lu-cands {grid-template-columns:minmax(0,1fr);max-height:220px;overflow-y:auto;padding-right:2px;gap:5px;}
.lu-pickhead {display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:10px;}
.lu-pickhead h3 {font-size:24px;margin:0;}
.lu-actions {display:flex;gap:8px;}
.lu-cands {display:grid;grid-template-columns:minmax(0,1fr);gap:6px;}
.lu-cand {display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:10px;align-items:center;background:var(--tr-card);border:1px solid var(--tr-line);border-radius:10px;padding:8px 10px;cursor:pointer;transition:border-color 0.2s,background-color 0.2s;}
.lu-cand:hover {border-color:var(--tr-lime);background-color:#15233a;}
.lu-cand b {font-weight:normal;color:#fff;}
.lu-cand small {display:block;font-size:11px;color:var(--tr-muted);margin-top:2px;}
.lu-cand .pl-meter {width:44px;}
.lu-cand-cur {border-color:#3b4a2a;cursor:default;}
.lu-cand-cur:hover {border-color:#3b4a2a;background-color:var(--tr-card);}
.lu-subring {border-style:dashed !important;cursor:pointer;}
.lu-sub .tr-chip-x {margin-left:0;}
.lu-alert {display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;border-color:#5a2a33;}
.lu-alert b {color:var(--tr-coral);}
.lu-claim {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;}
@media (max-width:1024px) {
    .lu-row {grid-template-columns:minmax(0,1fr);}
}
@media (max-width:767px) {
    #lupitch {height:400px;}
    .lu-hide-sm {display:none;}
    .lu-claim {grid-template-columns:minmax(0,1fr);}
}

/* Preferred side badges (sidebadges() in functions.php) */
.sb {display:inline-flex;gap:2px;vertical-align:middle;}
.sb i {display:inline-block;width:15px;height:15px;line-height:15px;text-align:center;border-radius:3px;font-style:normal;font-size:10px;font-weight:bold;font-family:exo,arial;box-sizing:border-box;}
.sb .sb-on {background:var(--tr-lime);color:#0b1422;}
.sb .sb-part {border:1px solid var(--tr-amber);color:var(--tr-amber);line-height:13px;}
.sb .sb-off {border:1px solid #243349;color:#3d4d66;line-height:13px;}
.sb .sb-slot {box-shadow:0 0 0 2px #0b1422,0 0 0 3px #fff;}
.ot-spot .sb {margin-top:1px;}
.ot-spot .sb i {width:13px;height:13px;line-height:13px;font-size:9px;}
.ot-spot .sb .sb-part,.ot-spot .sb .sb-off {line-height:11px;}
.lu-pickwho {display:block;color:var(--tr-muted);font-size:13px;margin-top:2px;}
.lu-candinfo {display:flex !important;align-items:center;gap:6px;}
.lu-loss {font-style:normal;color:var(--tr-coral);}

/* Transfer page (transfer.php, ajax/transfer.php, ajax/bidupdate.php) */
.tm-tabs {display:flex;gap:8px;margin:0 0 14px;}
.tm-tabs .lu-form {font-size:15px;padding:8px 16px;display:flex;align-items:center;gap:8px;}
.tm-count {display:inline-block;min-width:18px;padding:1px 6px;border-radius:999px;background:var(--tr-coral);color:#fff;font-size:11px;font-weight:bold;text-align:center;line-height:16px;box-sizing:border-box;}
.tm-count.hideit {display:none;}
.lu-form-on .tm-count {background:#0b1422;color:var(--tr-lime);}
.tm-toolbar {display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px;}
.tm-toolbar input[type=search],.tm-toolbar select {background:var(--tr-card);border:1px solid var(--tr-line);border-radius:10px;color:#fff;font-family:exo,arial;font-size:14px;padding:9px 12px;min-width:0;}
.tm-toolbar input[type=search] {flex:1 1 220px;}
.tm-toolbar input[type=search]:focus,.tm-toolbar select:focus {outline:none;border-color:var(--tr-lime);}
.tm-toolbar select option {background:#0b1422;}
.tm-clear {display:flex;align-items:center;gap:6px;font-size:16px;padding:7px 12px 5px;}
.tm-clear .tm-count {display:none;}
.tm-filters {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 18px;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--tr-line);}
.tm-filters .lu-seg {margin:5px 0 10px;}
.tm-chip img {height:12px;width:auto;vertical-align:-1px;}
table.tm-table tr.tm-row td {padding:7px 5px;}
.tm-sub {display:flex !important;flex-wrap:wrap;align-items:center;gap:6px;margin-top:3px;font-size:12px;color:var(--tr-muted);white-space:nowrap;}
.tm-sub .pl-postag {margin:0;}
.tm-sub a {color:var(--tr-skill) !important;}
.tm-price {white-space:nowrap;}
.tm-price b {font-family:teko,exo,arial;font-weight:normal;font-size:21px;color:#fff;}
.tm-price small,.tm-col-sal small {display:block;font-size:11px;color:var(--tr-muted);}
.tm-noafford b {color:var(--tr-muted);}
.tm-col-sal {white-space:nowrap;}
.tm-action {text-align:right;white-space:nowrap;}
.tm-action .tr-btn,.tm-action .ot-btn {display:inline-block;font-size:17px;padding:6px 14px 4px;}
.tm-star {width:22px;}
.tm-short {cursor:pointer;font-size:18px;color:#34455f;transition:color 0.2s;}
.tm-short:hover {color:var(--tr-amber);}
.tm-short-on {color:var(--tr-amber);}
.tm-minirs {width:32px !important;height:32px !important;font-size:17px !important;border-width:2px !important;margin-right:6px;vertical-align:middle;}
.tm-actions {text-align:right;}
.tm-actions > * {display:inline-block;margin:2px 0 2px 4px;vertical-align:middle;}
.tm-actions .tr-btn,.tm-actions .ot-btn {font-size:16px;padding:5px 11px 3px;}
.ot-table td small.tm-sub {display:flex;}
#buyconfirm.tm-confirm,#negotiate.tm-negotiate {background:#0b1422f7;color:var(--tr-text);border:1px solid #2c3f5e;border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,0.65);font-size:16px;}
#buyconfirm.tm-confirm b {color:#fff;}
#buyconfirm.tm-confirm .ot-actionsrow {justify-content:center;}
#negotiate.tm-negotiate h2 {margin:2px 0 10px;}
#negotiate.tm-negotiate .tr-big {font-size:40px;margin:4px 0 10px;}
#negotiate.tm-negotiate input[type=range] {width:100%;accent-color:#c6f25a;margin-bottom:14px;}
/* The market list drops columns as its box gets narrower (like the squad list) */
@container (max-width:980px) {
    table.tm-table .tm-col-spd,table.tm-table .tm-col-sta,table.tm-table .tm-col-days {display:none;}
}
@container (max-width:760px) {
    table.tm-table .tm-col-sal {display:none;}
}
@media (max-width:767px) {
    .tm-filters {grid-template-columns:minmax(0,1fr);}
    .tm-tabs .lu-form {padding:7px 10px;font-size:14px;}
}

/* Player card (player.php): full-width band edge to edge, opened where you are (mobilecard() sets the top),
   uses the page scrollbar. The content follows the page grid. */
#playerbox {position:absolute;left:0;right:0;width:100%;z-index:605;}
#playerview {position:relative !important;left:0;right:0;width:100%;height:auto;max-height:none;overflow:visible;box-sizing:border-box;margin:0;border-radius:0;background:#050b16f5 !important;background-image:none !important;border-top:1px solid #2c3f5e;border-bottom:1px solid #2c3f5e;box-shadow:0 30px 80px rgba(0,0,0,0.8);padding:76px 0 40px;}
#playerview > .content {width:min(1320px,100%);max-width:100%;margin:0 auto;padding:0 16px;box-sizing:border-box;}
#playerview .playercard-close {position:fixed;top:66px;right:16px;z-index:606;}
@media (max-width:767px) {
    #playerview {padding:64px 0 30px;}
    #playerview > .content {padding:0 10px;}
    #playerview .playercard-close {top:58px;right:8px;}
}

/* Player card (inc/newplayerinfo.php + inc/playerinfo.php), in the popup and on playerpage.php */
.pc-layout {display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:20px;align-items:start;text-align:left;color:var(--tr-text);font-family:exo,arial;}
.pc-layout #cardside,.pc-layout #actionside {width:auto;float:none;padding:0;margin:0;box-sizing:border-box;}
.pc-layout h1,.pc-layout h2,.pc-layout h3 {font-family:teko,exo,arial;font-weight:normal;text-transform:uppercase;letter-spacing:0.03em;line-height:1;color:#fff;}
/* Header: image, name, skill */
.pc-head {display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:18px;align-items:center;margin-bottom:16px;}
.pc-portrait {position:relative;}
.pc-portrait .cardimginfo {width:150px;height:128px;border-radius:12px;border:1px solid var(--tr-line);}
.pc-injury {position:absolute;left:6px;bottom:6px;margin:0;background:#2a0f16e6;}
.pc-pos {display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px;color:var(--tr-muted);}
.pc-pos .pl-postag {margin:0;}
.pc-id h1 {font-size:44px;margin:4px 0 2px;overflow-wrap:anywhere;}
.pc-club {display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;}
.pc-club a {color:#fff !important;}
.pc-club small {color:var(--tr-muted);}
.pc-crest {height:20px;width:auto;}
.pc-chips {display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
.pc-chips .ot-chip {font-size:12px;padding:4px 10px;}
.pc-chip-click {cursor:pointer;}
.pc-chip-good {border-color:#3b4a2a;color:var(--tr-lime);}
.pc-chip-bad {border-color:#5a2a33;color:var(--tr-coral);}
.pc-skill {display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;}
.pc-skill .pc-ring {width:84px;height:84px;font-size:40px;border-width:4px;}
.pc-skill small {font-size:12px;color:var(--tr-muted);white-space:nowrap;}
/* Stats */
.pc-sections {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;}
.pc-section {background:var(--tr-card);border:1px solid var(--tr-line);border-radius:12px;padding:14px 16px;margin-bottom:0;}
.pc-layout > #cardside > .pc-section {margin-top:18px;}
.pc-section h3 {font-size:20px;margin:0 0 8px;}
.pc-section h3 ~ h3 {margin-top:14px;}
.pc-stat {display:grid;grid-template-columns:minmax(0,1fr) auto 70px;align-items:center;gap:10px;padding:4px 0;border-bottom:1px solid #1a2840;font-size:13px;}
.pc-stat:last-child {border-bottom:0;}
.pc-stat span {color:#c3cfdf;}
.pc-stat b {font-family:teko,exo,arial;font-weight:normal;font-size:20px;line-height:1;color:#fff;text-align:right;}
.pc-stat > b:last-child {grid-column:2 / 4;}
.pc-bar {position:relative;height:6px;border-radius:3px;background:#1b2a42;overflow:hidden;}
.pc-bar i {display:block;height:100%;background:var(--lvl);}
.pc-lvl-low {--lvl:var(--tr-coral);}
.pc-lvl-mid {--lvl:var(--tr-amber);}
.pc-lvl-good {--lvl:var(--tr-lime);}
.pc-kv {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
.pc-kv > div {background:#0d1728;border:1px solid #1a2840;border-radius:8px;padding:7px 10px;min-width:0;}
.pc-kv span {display:block;font-size:11px;color:var(--tr-muted);text-transform:uppercase;letter-spacing:0.04em;}
.pc-kv b {display:block;font-family:teko,exo,arial;font-weight:normal;font-size:21px;line-height:1.1;color:#fff;overflow-wrap:anywhere;}
.pc-shortlist {display:flex;gap:8px;margin-top:12px;}
/* Action side */
.pc-layout #actionside {background:#0b1422;border:1px solid var(--tr-line);border-radius:14px;padding:16px;text-align:left;}
.pc-actionhead h2 {font-size:28px;margin:0 0 12px;}
.pc-layout #actionside h1 {font-size:24px;margin:0 0 8px;}
.pc-layout #actionside h2 {font-size:22px;margin:4px 0 8px;}
.pc-layout #actionside h3 {font-size:18px;margin:10px 0 4px;color:#fff;}
.pc-layout #actionside p {color:#c3cfdf;font-size:14px;margin:4px 0 8px;}
.pc-layout #actionside label {display:block;font-size:11px;color:var(--tr-muted);text-transform:uppercase;letter-spacing:0.05em;padding:6px 0 2px;}
.pc-layout .knap,.pc-layout .knap.newline,.pc-layout input.knap[type=submit] {display:block;width:100%;box-sizing:border-box;margin:6px 0;padding:9px 12px 7px;background:var(--tr-card);background-image:none;border:1px solid var(--tr-line);border-radius:10px;box-shadow:none;font-family:teko,exo,arial;font-weight:normal;font-size:19px;line-height:1.1;letter-spacing:0.04em;text-transform:uppercase;text-align:center;color:#fff !important;cursor:pointer;transition:border-color 0.2s,background-color 0.2s,filter 0.2s;}
.pc-layout .knap:hover {border-color:var(--tr-skill);background-color:#15233a;}
.pc-layout .knap.greenknap,.pc-layout .knap.colgreen,.pc-layout input.knap[type=submit] {background:var(--tr-lime);border-color:var(--tr-lime);color:#0b1422 !important;}
.pc-layout .knap.greenknap:hover,.pc-layout .knap.colgreen:hover,.pc-layout input.knap[type=submit]:hover {filter:brightness(1.08);background:var(--tr-lime);}
.pc-layout .knap.red {border-color:#5a2a33;color:var(--tr-coral) !important;background:var(--tr-card);}
.pc-layout .knap.red:hover {border-color:var(--tr-coral);}
.pc-layout .knap.orange {border-color:#6b5320;color:var(--tr-amber) !important;background:var(--tr-card);}
.pc-layout .knap.less {color:var(--tr-muted) !important;}
.pc-layout .subknap {display:inline-block;background:var(--tr-card);border:1px solid var(--tr-line);border-radius:8px;padding:6px 12px;margin:6px 0;color:#fff;cursor:pointer;}
.pc-layout .subknap:hover {border-color:var(--tr-lime);}
.pc-layout .frameit,.pc-layout #actionside .present,.pc-layout .greeninfo {background:var(--tr-card);border:1px solid var(--tr-line);border-radius:12px;padding:14px 16px;margin:10px 0;text-align:left;color:var(--tr-text);}
.pc-layout .frameit.hideit,.pc-layout .present.hideit,.pc-layout .greeninfo.hideit {display:none;}
.pc-layout #offerbox {border-color:#3b4a2a;box-shadow:0 0 0 1px rgba(198,242,90,0.15);}
.pc-layout #offerbox h2#newprice,.pc-layout #puttransfer h2#newprice {font-size:34px;color:var(--tr-lime);}
.pc-layout .redinfo {background:#2a0f16;border:1px solid #5a2a33;border-radius:10px;padding:10px 12px;color:#ffd0d6;margin:8px 0;}
.pc-layout .redinfo h1 {font-size:20px;color:var(--tr-coral);}
.pc-layout .warning {color:var(--tr-amber);margin-bottom:6px;}
.pc-layout .greeninfo table,.pc-layout #actionside table {width:100%;font-size:13px;}
.pc-layout .greeninfo td {border-bottom:1px solid #1a2840;}
.pc-layout .greeninfo a {color:var(--tr-skill);}
.pc-layout input[type=range],.pc-layout .slider {width:100%;accent-color:#c6f25a;margin:8px 0;}
.pc-layout small {color:var(--tr-muted);}
.pc-layout .col2 {width:auto;float:none;}
#cardside h1.improve {position:static;width:auto;margin:0 0 10px;font-size:22px;color:var(--tr-lime);text-align:left;}
@media (max-width:900px) {
    .pc-layout {grid-template-columns:minmax(0,1fr);}
}
@media (max-width:600px) {
    .pc-head {grid-template-columns:110px minmax(0,1fr);gap:12px;}
    .pc-portrait .cardimginfo {width:110px;height:100px;}
    .pc-skill {grid-column:1 / -1;flex-direction:row;justify-content:flex-start;gap:12px;}
    .pc-skill .pc-ring {width:60px;height:60px;font-size:28px;}
    .pc-id h1 {font-size:32px;}
    .pc-sections {grid-template-columns:minmax(0,1fr);}
    .pc-kv {grid-template-columns:repeat(2,minmax(0,1fr));}
}
#playerview .mobile .knap {display:block;width:100%;box-sizing:border-box;margin:0 0 10px;background:var(--tr-lime);background-image:none;border:0;border-radius:10px;box-shadow:none;color:#0b1422 !important;font-family:teko,exo,arial;font-weight:normal;font-size:20px;text-transform:uppercase;letter-spacing:0.04em;padding:9px 12px 7px;}
/* Important notices on the player card (can't bid, squad full, too expensive) */
.pc-alert {display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin:10px 0;padding:14px 16px;border-radius:12px;background:#2a0f16;border:1px solid #6b2a36;box-shadow:inset 4px 0 0 var(--tr-coral);}
.pc-alert .pl-badge {margin:0;background:#3a1219;}
.pc-alert > b {font-family:teko,exo,arial;font-weight:normal;font-size:24px;line-height:1;text-transform:uppercase;letter-spacing:0.03em;color:#fff;}
.pc-alert small {color:#f3c6cd !important;font-size:13px;line-height:1.4;}
.pc-alert-nums {display:flex;gap:10px;margin:2px 0;}
.pc-alert-nums > div {background:#1d0a10;border:1px solid #5a2a33;border-radius:8px;padding:6px 12px;}
.pc-alert-nums span {display:block;font-size:11px;color:#e7a3ad;text-transform:uppercase;letter-spacing:0.04em;}
.pc-alert-nums em {display:block;font-style:normal;font-family:teko,exo,arial;font-size:30px;line-height:1;color:#fff;}
.pc-alert-nums > div:first-child em {color:var(--tr-coral);}

/* .reward overlay (bought player, bid placed, offers, trophies, ...) in the new design */
@keyframes rewardin {from {opacity:0;transform:translateY(12px) scale(0.97);} to {opacity:1;transform:none;}}
.reward {position:fixed;z-index:1000;top:70px;left:0;right:0;margin:0 auto;width:min(640px,92vw);max-height:calc(100vh - 100px);overflow-y:auto;box-sizing:border-box;padding:30px 28px 24px;border-radius:16px;text-align:center;color:var(--tr-text);font-family:exo,arial;background:#0b1422fa;background-image:none;border:1px solid #2c3f5e;box-shadow:0 0 0 100vmax rgba(3,6,12,0.72),0 30px 80px rgba(0,0,0,0.6);animation:rewardin 0.35s ease-out;}
.reward::before {content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--tr-lime);border-radius:16px 16px 0 0;}
.reward h1 {font-family:teko,exo,arial;font-weight:normal;font-size:44px;line-height:1;text-transform:uppercase;letter-spacing:0.03em;color:#fff;margin:4px 0 8px;}
.reward h2 {font-family:teko,exo,arial;font-weight:normal;font-size:28px;line-height:1.05;color:var(--tr-lime);margin:6px 0 10px;}
.reward h3 {font-family:teko,exo,arial;font-weight:normal;font-size:22px;color:#fff;margin:8px 0 6px;}
.reward p {color:#c3cfdf;font-size:15px;line-height:1.5;margin:6px 0 10px;}
.reward label {color:var(--tr-muted);}
.reward .knap {display:inline-block;width:auto;min-width:140px;margin:10px 5px 0;padding:10px 18px 8px;background:var(--tr-card);background-image:none;border:1px solid var(--tr-line);border-radius:10px;box-shadow:none;font-family:teko,exo,arial;font-weight:normal;font-size:20px;line-height:1.1;letter-spacing:0.04em;text-transform:uppercase;color:#fff !important;cursor:pointer;transition:border-color 0.2s,filter 0.2s;}
.reward .knap:hover {border-color:var(--tr-skill);}
.db-rewardcard {margin-top:28px;} /* "You got X on your team": room between the buttons and the player card */
.reward a.knap,.reward .knap.colgreen,.reward .knap.greenknap,.reward input[type=submit] {background:var(--tr-lime);border-color:var(--tr-lime);color:#0b1422 !important;}
.reward a.knap:hover,.reward .knap.colgreen:hover,.reward .knap.greenknap:hover {filter:brightness(1.08);}
.reward .knap.red {background:var(--tr-card);border-color:#5a2a33;color:var(--tr-coral) !important;}
.reward .close {position:absolute;top:12px;right:12px;width:28px;height:28px;background-size:contain;opacity:0.7;cursor:pointer;}
.reward .close:hover {opacity:1;}
.reward input[type=text],.reward input[type=number],.reward textarea,.reward select {background:var(--tr-card);border:1px solid var(--tr-line);border-radius:10px;color:#fff;padding:9px 12px;font-family:exo,arial;}
.reward input[type=submit] {border:0;border-radius:10px;padding:10px 18px;font-family:teko,exo,arial;font-size:20px;text-transform:uppercase;cursor:pointer;}
.reward input[type=range] {accent-color:#c6f25a;}
.reward table {width:100%;font-size:14px;}
.reward td,.reward th {border-bottom:1px solid #1a2840;padding:6px;}
.reward img {max-width:100%;}
.reward .col2 {float:none;width:auto;display:inline-block;vertical-align:middle;max-width:48%;text-align:center;}
@media (max-width:767px) {
    .reward {top:60px;padding:26px 16px 18px;}
    .reward h1 {font-size:34px;}
    .reward .col2 {display:block;max-width:100%;}
    .reward .knap {min-width:0;}
}
.ot-table td.ot-n .tm-sub {justify-content:flex-end;}
.ot-table td.ot-n b {display:block;}

/* Confirm boxes (#confirmbox in topbar.php, #buyconfirm on the transfer page): always centred on the screen */
#confirmbox,.confirmbox {position:fixed !important;top:50% !important;left:50% !important;right:auto;transform:translate(-50%,-50%);margin:0 !important;width:min(380px,90vw);box-sizing:border-box;z-index:1001;text-align:center;padding:26px 24px 22px;border-radius:16px;background:#0b1422fa;background-image:none;color:var(--tr-text);border:1px solid #2c3f5e;box-shadow:0 0 0 100vmax rgba(3,6,12,0.65),0 30px 80px rgba(0,0,0,0.6);backdrop-filter:none;font-family:exo,arial;font-size:17px;line-height:1.45;}
#confirmbox::before,.confirmbox::before {content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--tr-lime);border-radius:16px 16px 0 0;}
#confirmboxtxt,.confirmbox .text {font-size:17px;color:var(--tr-text);margin-bottom:6px;}
#confirmboxtxt h3,.confirmbox .text h3 {font-family:teko,exo,arial;font-weight:normal;font-size:26px;text-transform:uppercase;color:#fff;margin:0 0 6px;}
#confirmboxtxt b,.confirmbox .text b {color:#fff;}
#confirmbox .knap {display:inline-block;width:auto;min-width:110px;margin:14px 5px 0;padding:9px 18px 7px;border-radius:10px;border:1px solid var(--tr-lime);background:var(--tr-lime);background-image:none;box-shadow:none;color:#0b1422 !important;font-family:teko,exo,arial;font-weight:normal;font-size:20px;text-transform:uppercase;letter-spacing:0.04em;}
#confirmbox .knap.less,#confirmbox .less {background:var(--tr-card);border-color:var(--tr-line);color:#fff !important;}
.confirmbox.tm-confirm .ot-actionsrow {justify-content:center;margin-top:14px;}
#buyconfirm.tm-confirm {box-shadow:0 0 0 100vmax rgba(3,6,12,0.65),0 30px 80px rgba(0,0,0,0.6);}

/* ===== Mail page (ml-*) ===== */
.ml-tools {display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.ml-tools .lu-form {font-size:15px;padding:7px 14px;text-decoration:none;}
.ml-tools .ot-btn {font-size:17px;padding:6px 12px 4px;}
.ml-layout {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.45fr);gap:18px;align-items:start;}
.ml-listpanel {padding:10px;}
.ml-readpanel {position:sticky;top:76px;min-height:420px;}
.ml-page #mailcol {height:auto;max-height:640px;overflow:auto;background:none;border-radius:0;backdrop-filter:none;-webkit-backdrop-filter:none;scrollbar-width:thin;scrollbar-color:#2c3f5e transparent;padding-right:4px;}
.ml-page #mailcol::-webkit-scrollbar {width:6px;background:transparent;}
.ml-page #mailcol::-webkit-scrollbar-thumb {width:6px;background:#2c3f5e;border-radius:3px;}
.ml-page .email {position:relative;background:var(--tr-card);border:1px solid var(--tr-line);border-left:3px solid transparent;border-radius:10px;box-shadow:none;padding:11px 14px 12px 16px;margin:0 0 8px;color:var(--tr-text);font-size:14px;transition:border-color 0.2s,background-color 0.2s;}
.ml-page .email:hover {border-color:#2c3f5e;background:#15233a;}
.ml-page .email.highlight {background:var(--tr-card);color:var(--tr-text);border-left-color:var(--tr-team);}
.ml-page .email.selected {background:#16263d;border-color:#2c3f5e;border-left-color:var(--tr-lime);}
.ml-page .email .mail-read-status {position:absolute;top:15px;left:6px;float:none;width:6px;height:6px;border-radius:50%;background:var(--tr-lime);box-shadow:0 0 6px var(--tr-lime);}
.ml-rowhead {display:flex;justify-content:space-between;align-items:baseline;gap:10px;}
.ml-from {font-weight:normal;color:var(--tr-muted);font-size:13px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ml-date {color:var(--tr-muted);font-size:12px;white-space:nowrap;flex-shrink:0;}
.ml-subject {font-size:15px;color:#fff;margin-top:2px;line-height:1.3;}
.ml-unread .ml-subject {font-weight:bold;}
.ml-unread .ml-from {color:var(--tr-text);font-weight:bold;}
.ml-preview {color:var(--tr-muted);font-size:13px;line-height:1.35;margin-top:3px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;}
.ml-tags {margin-top:7px;}
.ml-tags .pl-badge:first-child {margin-left:0;}
.pl-badge.ml-tag-pm {color:var(--tr-team);border-color:#5a2a4a;}
.pl-badge.ml-tag-transfer {color:var(--tr-amber);border-color:#5a4a2a;}
.pl-badge.ml-tag-sponsor {color:var(--tr-rest);border-color:#1f4a42;}
.ml-page #mailcontent {background:none;min-height:0;backdrop-filter:none;-webkit-backdrop-filter:none;}
.ml-empty {text-align:center;padding:90px 20px;}
.ml-empty h2 {color:var(--tr-muted) !important;margin:0 0 6px;}
.ml-readhead {border-bottom:1px solid var(--tr-line);padding-bottom:14px;margin-bottom:16px;}
.ml-readhead .pl-badge {margin:0 0 8px;}
.ml-readhead h2 {font-size:38px !important;margin:0 0 8px !important;line-height:1 !important;}
.ml-meta {display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px;color:var(--tr-text);}
.ml-meta em {font-style:normal;color:var(--tr-muted);font-size:11px;text-transform:uppercase;letter-spacing:0.06em;margin-right:4px;}
.ml-body {font-size:16px;line-height:1.6;color:var(--tr-text);overflow-wrap:anywhere;}
.ml-body a {color:var(--tr-skill);}
.ml-actions {display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;}
.ml-actions .tr-btn,.ml-actions .ot-btn {display:inline-block;text-decoration:none;}
.ml-actions .tr-btn {font-size:19px;padding:8px 16px 5px;color:#0b1422 !important;}
.ml-player {margin-top:22px;padding-top:18px;border-top:1px solid var(--tr-line);}
.ml-player a {text-decoration:none;}
.ml-player .playercard {max-width:260px;}
.ml-mobile {margin-top:10px;font-size:14px;line-height:1.5;color:var(--tr-text);}
.ml-mobile .ml-actions {margin-top:10px;}
.ml-page .email:not(.selected) .ml-mobile {display:none;}

/* Write / reply popup */
#writemail.ml-write {position:fixed;top:50%;left:50%;right:auto;margin:0;transform:translate(-50%,-50%);width:min(480px,92vw);box-sizing:border-box;z-index:1001;padding:20px 22px;border-radius:16px;background:#0b1422fa;color:var(--tr-text);border:1px solid #2c3f5e;box-shadow:0 0 0 100vmax rgba(3,6,12,0.65),0 30px 80px rgba(0,0,0,0.6);font-family:exo,arial;font-size:15px;}
.ml-writehead {display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.ml-writehead h2 {font-family:teko,exo,arial;font-weight:normal;text-transform:uppercase;letter-spacing:0.03em;font-size:30px;line-height:1;margin:0;color:#fff;}
.ml-close {width:32px;height:32px;border-radius:50%;border:1px solid var(--tr-line);background:var(--tr-card);color:#fff;font-size:22px;line-height:29px;text-align:center;cursor:pointer;}
.ml-close:hover {border-color:var(--tr-coral);}
#writemail.ml-write textarea {display:block;width:100%;box-sizing:border-box;height:120px;margin:14px 0 10px;padding:10px 12px;border:1px solid var(--tr-line);border-radius:10px;background:var(--tr-card);color:var(--tr-text);font-family:exo,arial;font-size:16px;resize:vertical;outline:none;}
#writemail.ml-write textarea:focus {border-color:var(--tr-skill);}
.ml-writefoot {display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;}
.ml-writefoot .tr-note {margin:0;}
.ml-writefoot .ot-actionsrow {margin:0;}
#writemail.ml-write input.tr-btn {display:inline-block;width:auto;min-width:0;height:auto;margin:0;border:0;background:var(--tr-lime);color:#0b1422;font-family:teko,exo,arial;font-weight:normal;font-size:19px;line-height:1.2;padding:8px 22px 5px;}
#writemail.ml-write input.tr-btn:hover {background:var(--tr-lime);}
#writemail.ml-write .ot-btn {font-size:19px;padding:8px 14px 5px;}
.ml-writefoot .ot-actionsrow {align-items:center;}

@media (max-width: 767px) {
    .ml-layout {grid-template-columns:1fr;}
    .ml-page #mailcol {max-height:none;overflow:visible;}
    .ml-page .email {font-size:14px;color:var(--tr-text);}
    .ml-tools {width:100%;justify-content:space-between;}
    #writemail.ml-write {top:50%;width:92vw;}
}
@media (max-width: 767px) {
    .ml-page .email.selected .ml-preview {display:none;}
    .ml-mobile .ot-btn,.ml-mobile .tr-btn {display:inline-block;font-size:18px;padding:7px 14px 5px;}
    .ml-mobile .playercard {max-width:260px;margin-top:12px;}
}

/* Player cards inside redesigned pages keep their own light-card look (black text, Exo) */
.tr-page .playercard h1,.tr-page .playercard h2,.tr-page .playercard h3 {color:#000;font-family:exo,arial,sans-serif;text-transform:none;letter-spacing:0;line-height:1.2;}
.tr-page .playercard h1 {font-weight:bold;margin:0;}
.tr-page .playercard h2 {font-size:20px;font-weight:600;margin:2px 0 0;}
.tr-page .playercard h3 {font-size:16px;font-weight:400;margin:2px 0 0;}
.ot-page .playercard a,.ot-page .playercard a:hover {color:#000;}
/* Active tab that is a link: dark text on the lime button */
.ot-page a.lu-form-on,.ot-page a.lu-form-on:hover {color:#0b1422;}

/* ===== News page (nw-*) ===== */
.nw-c-transfers {--cat:var(--tr-lime);}
.nw-c-matches {--cat:var(--tr-skill);}
.nw-c-injuries {--cat:var(--tr-coral);}
.nw-c-players {--cat:var(--tr-tactic);}
.nw-c-clubs {--cat:var(--tr-amber);}
.nw-c-market {--cat:var(--tr-rest);}
.nw-page a {text-decoration:none;}

.nw-mast {display:grid;grid-template-columns:auto minmax(0,1fr) minmax(200px,280px);gap:22px;align-items:center;padding:14px 20px;margin-bottom:10px;}
.nw-logo img {height:66px;width:auto;display:block;}
.nw-edition .tr-statlabel {display:block;margin-bottom:6px;}
.nw-editionstats {display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px;color:var(--tr-muted);}
.nw-editionstats b {font-family:teko,exo,arial;font-weight:normal;font-size:24px;line-height:1;color:#fff;vertical-align:-2px;}
.nw-search input {display:block;width:100%;height:auto;margin:0;padding:10px 14px;border:1px solid var(--tr-line);border-radius:999px;background:var(--tr-card);color:var(--tr-text);font-family:exo,arial;font-size:14px;outline:none;}
.nw-search input:focus {border-color:var(--tr-skill);}

.nw-ticker {display:flex;align-items:stretch;background:var(--tr-panel);border:1px solid var(--tr-line);border-radius:12px;overflow:hidden;margin-bottom:14px;}
.nw-tickerlabel {flex-shrink:0;display:flex;align-items:center;background:var(--tr-lime);color:#0b1422;font-family:teko,exo,arial;font-size:19px;text-transform:uppercase;letter-spacing:0.04em;padding:6px 14px 3px;}
.nw-tickerwin {flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);}
.nw-tickertrack {display:flex;width:max-content;animation:nw-ticker 90s linear infinite;}
.nw-tickerwin:hover .nw-tickertrack {animation-play-state:paused;}
.nw-tickertrack a {white-space:nowrap;padding:9px 18px;font-size:13px;color:var(--tr-text) !important;border-right:1px solid var(--tr-line);}
.nw-tickertrack a:hover {color:var(--tr-lime) !important;}
.nw-tickertrack a b {color:var(--tr-lime);margin-left:4px;}
@keyframes nw-ticker {from {transform:translateX(0);} to {transform:translateX(-50%);}}
@media (prefers-reduced-motion: reduce) {
    .nw-tickertrack {animation:none;}
    .nw-tickerwin {overflow-x:auto;}
}

.nw-nav {display:flex;justify-content:space-between;align-items:flex-start;gap:6px 18px;flex-wrap:wrap;margin-bottom:6px;}
.nw-nav .lu-seg {margin:0 0 10px;}
.nw-nav .lu-form {text-decoration:none;}
.nw-sections .lu-form {font-size:15px;padding:7px 13px;}
.nw-sections .nw-sec {border-bottom:2px solid var(--cat);}
.nw-sections .lu-form small {color:var(--tr-muted);font-size:11px;margin-left:3px;}
.nw-sections .lu-form-on small {color:#0b1422;}
.nw-sections .nw-sec.lu-form-on {background:var(--cat);border-color:var(--cat);}
.nw-scopes .lu-form {font-size:12px;padding:5px 10px;}
.nw-searchinfo {display:flex;align-items:center;gap:12px;margin-bottom:12px;font-size:15px;}
.nw-searchinfo .ot-btn {display:inline-block;font-size:16px;padding:5px 10px 3px;}

.nw-kicker {display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:5px;}
.nw-tag {display:inline-block;font-size:10px;font-weight:bold;text-transform:uppercase;letter-spacing:0.06em;line-height:1;color:var(--cat,var(--tr-muted));border:1px solid color-mix(in srgb,var(--cat,var(--tr-muted)) 45%,transparent);border-radius:4px;padding:3px 6px;}
.nw-breaking {font-size:10px;font-weight:bold;text-transform:uppercase;letter-spacing:0.06em;line-height:1;background:var(--tr-coral);color:#fff;border-radius:4px;padding:4px 6px 3px;}
.nw-you {font-size:10px;font-weight:bold;text-transform:uppercase;letter-spacing:0.06em;line-height:1;color:var(--tr-team);border:1px solid #5a2a4a;border-radius:4px;padding:3px 6px;}
.nw-toplabel {font-family:teko,exo,arial;font-size:18px;text-transform:uppercase;letter-spacing:0.05em;line-height:1;color:var(--cat);margin-right:4px;}
.nw-meta {display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;font-size:12px;color:var(--tr-muted);margin-top:6px;}
.nw-meta a {color:var(--tr-skill) !important;}
.nw-meta a:hover {text-decoration:underline;}
.nw-meta img {height:10px;width:auto;border-radius:2px;vertical-align:0;}
.nw-human {color:var(--tr-team);}

/* pictures */
.nw-pic {position:relative;width:64px;height:64px;border-radius:12px;background:var(--tr-card);border:1px solid var(--tr-line);overflow:hidden;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box;}
.nw-pic-player {cursor:pointer;background:linear-gradient(180deg,#1b2b44,#0e1828);border-color:color-mix(in srgb,var(--pos) 40%,var(--tr-line));}
.nw-pic-player .playerimg-stack {position:absolute;left:-1px;top:2px;}
.nw-pic-player .pl-rs {position:absolute;right:2px;bottom:2px;width:26px;height:26px;font-size:15px;border-width:2px;padding-top:2px;}
.nw-pic-club img {height:44px;width:auto;}
.nw-pic-none {border-color:color-mix(in srgb,var(--cat) 40%,var(--tr-line));}
.nw-pic-none span {font-family:teko,exo,arial;font-size:34px;line-height:1;padding-top:4px;color:var(--cat);}
.nw-pic-none img {width:40px;height:40px;}

/* top stories */
.nw-top {display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:14px;margin-bottom:18px;align-items:stretch;}
.nw-lead {display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:center;margin:0;border-top:3px solid var(--cat);background:linear-gradient(135deg,color-mix(in srgb,var(--cat) 12%,transparent),rgba(8,14,26,0) 45%),var(--tr-panel);padding:22px 24px;}
.nw-bigplayer {position:relative;width:160px;height:160px;border-radius:20px;overflow:hidden;cursor:pointer;background:linear-gradient(180deg,#1f3150,#0e1828);border:1px solid var(--tr-line);}
.nw-bigplayer .playerimg-stack {position:absolute;left:0;top:6px;}
.nw-bigplayer .pl-rs {position:absolute;right:8px;bottom:8px;width:46px;height:46px;font-size:26px;}
.nw-lead .ot-crest {width:140px;height:140px;}
.nw-lead .ot-shield {height:84px;}
.nw-lead h2 {font-size:46px !important;margin:2px 0 10px !important;line-height:0.95 !important;}
.nw-lead h2 a {color:#fff !important;}
.nw-lead h2 a:hover {color:var(--cat) !important;}
.nw-lead p {font-size:15px;line-height:1.55;color:#c9d4e4;margin:0;}
.nw-seconds {display:grid;grid-template-rows:repeat(4,auto);gap:10px;align-content:start;}
.nw-second {display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;align-items:center;margin:0;padding:12px 14px;border-left:3px solid var(--cat);}
.nw-page .nw-second h3,.nw-page .nw-item h3 {font-family:exo,arial;text-transform:none;letter-spacing:0;font-weight:bold;font-size:15px;line-height:1.3;margin:0;}
.nw-page .nw-second h3 a,.nw-page .nw-item h3 a {color:#fff !important;}
.nw-page .nw-second h3 a:hover,.nw-page .nw-item h3 a:hover {color:var(--cat) !important;}
.nw-second .nw-kicker {margin-bottom:4px;}
.nw-second .nw-meta {margin-top:3px;}

/* feed + sidebar */
.nw-layout {display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start;}
.nw-feedhead {display:flex;justify-content:space-between;align-items:baseline;gap:10px;}
.nw-feedhead h2 {margin:0 0 4px !important;}
.nw-day {position:sticky;top:60px;z-index:2;margin:14px -22px 0;padding:8px 22px 6px;background:#0a1220f2;border-bottom:1px solid var(--tr-line);font-family:teko,exo,arial;font-weight:normal;font-size:20px;text-transform:uppercase;letter-spacing:0.04em;color:var(--tr-muted);}
.nw-item {display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px;padding:14px 0;border-bottom:1px solid #18253a;}
.nw-item:last-of-type {border-bottom:0;}
.nw-item p {margin:4px 0 0;font-size:14px;line-height:1.5;color:#b9c6d8;overflow-wrap:anywhere;}
.nw-item.nw-mine {background:linear-gradient(90deg,rgba(255,122,198,0.08),transparent 60%);box-shadow:inset 3px 0 0 var(--tr-team);margin:0 -22px;padding:14px 22px;}
.nw-more {margin:16px auto 4px;max-width:260px;}
.nw-empty {text-align:center;padding:50px 10px;}
.nw-empty h3 {color:var(--tr-muted) !important;}

.nw-side .tr-panel {padding:16px 18px;margin-bottom:14px;}
.nw-boxhead {display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:8px;}
.nw-boxhead h2 {font-size:24px !important;margin:0 !important;}
.nw-boxhead a {font-size:12px;color:var(--tr-skill) !important;white-space:nowrap;}
.nw-boxmine {border-color:#5a2a4a;box-shadow:inset 3px 0 0 var(--tr-team);}
.nw-line {display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:baseline;padding:8px 0;border-top:1px solid #18253a;font-size:13px;line-height:1.35;color:var(--tr-text) !important;}
.nw-line:first-of-type {border-top:0;}
a.nw-line:hover span {color:#fff;}
.nw-line small {color:var(--tr-muted);font-size:11px;white-space:nowrap;}
.nw-injury {display:inline-block;min-width:30px;text-align:center;font-family:teko,exo,arial;font-size:17px;line-height:1;padding:4px 4px 2px;border-radius:6px;color:var(--tr-coral);border:1px solid #5a2a33;}
.nw-stock {font-size:11px;}
.nw-up {color:var(--tr-lime);}
.nw-down {color:var(--tr-coral);}
.nw-boxbtn {margin-top:10px;font-size:16px;padding:6px 10px 4px;}
.nw-deals {list-style:none;margin:0;padding:0;}
.nw-deals li {display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 0;border-top:1px solid #18253a;}
.nw-deals li:first-child {border-top:0;}
.nw-deals a b {color:#fff;font-size:14px;}
.nw-deals a:hover b {color:var(--tr-lime);}
.nw-deals small {display:block;color:var(--tr-muted);font-size:11px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.nw-rank {width:26px;height:26px;border-radius:50%;background:var(--tr-card);border:1px solid var(--tr-line);font-family:teko,exo,arial;font-size:17px;line-height:26px;text-align:center;color:var(--tr-muted);}
.nw-deals li:first-child .nw-rank {background:var(--tr-lime);border-color:var(--tr-lime);color:#0b1422;}
.nw-fee {font-family:teko,exo,arial;font-size:21px;line-height:1;color:var(--tr-lime);white-space:nowrap;}
.nw-trend {display:grid;grid-template-columns:30px minmax(0,1fr) 54px 22px;gap:10px;align-items:center;padding:7px 0;border-top:1px solid #18253a;color:var(--tr-text) !important;}
.nw-trend:first-of-type {border-top:0;}
.nw-trend > img {height:28px;width:auto;justify-self:center;}
.nw-trend b {font-size:13px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.nw-trend:hover b {color:var(--tr-lime);}
.nw-trend small {display:block;color:var(--tr-muted);font-size:11px;}
.nw-trend small img {height:9px;width:auto;border-radius:2px;}
.nw-trendbar {height:6px;border-radius:3px;background:#1b2a42;overflow:hidden;}
.nw-trendbar i {display:block;height:100%;background:var(--tr-amber);border-radius:3px;}
.nw-trendn {font-family:teko,exo,arial;font-weight:normal;font-size:19px !important;text-align:right;}

@media (max-width: 1000px) {
    .nw-top {grid-template-columns:1fr;}
    .nw-seconds {grid-template-rows:none;grid-template-columns:1fr 1fr;}
    .nw-layout {grid-template-columns:1fr;}
    .nw-side {display:grid;grid-template-columns:1fr 1fr;gap:0 14px;}
}
@media (max-width: 767px) {
    .nw-mast {grid-template-columns:auto minmax(0,1fr);gap:12px 16px;}
    .nw-logo img {height:48px;}
    .nw-search {grid-column:1 / -1;}
    .nw-editionstats {font-size:12px;}
    .nw-editionstats b {font-size:20px;}
    .nw-tickerlabel {font-size:16px;padding:6px 10px 3px;}
    .nw-lead {grid-template-columns:1fr;gap:14px;padding:18px;}
    .nw-bigplayer {width:120px;height:120px;}
    .nw-bigplayer .playerimg-stack {transform:scale(0.75);transform-origin:0 0;}
    .nw-lead .ot-crest {width:100px;height:100px;}
    .nw-lead h2 {font-size:34px !important;}
    .nw-seconds {grid-template-columns:1fr;}
    .nw-side {display:block;}
    .nw-day {margin:14px -18px 0;padding:8px 18px 6px;}
    .nw-item.nw-mine {margin:0 -18px;padding:14px 18px;}
    .nw-item {grid-template-columns:52px minmax(0,1fr);gap:12px;}
    .nw-item .nw-pic {width:52px;height:52px;}
    .nw-item .nw-pic-player .playerimg-stack {transform:scale(0.8);transform-origin:0 0;left:0;top:4px;}
}
@media (max-width: 767px) {
    .nw-nav {display:block;}
    .nw-nav .lu-seg {flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px 10px;padding:0 16px 2px;}
    .nw-nav .lu-seg::-webkit-scrollbar {display:none;}
    .nw-nav .lu-form {flex-shrink:0;white-space:nowrap;}
}
/* News: keep the skill ring in front of the portrait layers */
.nw-pic-player .playerimg-stack,.nw-bigplayer .playerimg-stack {z-index:0;}
.nw-pic-player .pl-rs,.nw-bigplayer .pl-rs {z-index:3;box-shadow:0 2px 6px rgba(0,0,0,0.5);}

/* ===== Office / economy page (ec-*) ===== */
.ec-page .ot-chip img {height:14px;}
.ec-pos {color:var(--tr-lime) !important;}
.ec-neg {color:var(--tr-coral) !important;}
.ec-warn {color:var(--tr-amber) !important;}
.ec-muted {color:var(--tr-muted);}
.ec-tiles .tr-big {font-size:42px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ec-tiles .tr-note {margin:0;display:block;}
.ec-row {align-items:start;}
.ec-panelhead {display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:6px 12px;margin-bottom:12px;}
.ec-panelhead h2 {margin:0 !important;}
.ec-panelhead .tr-note {margin:0;}
.ec-total {font-family:teko,exo,arial;font-size:26px;line-height:1;}
#fanshopresult.ec-notice:not(:empty) {display:flex;align-items:center;gap:14px;background:var(--tr-panel);border:1px solid #3b4a2a;border-radius:12px;padding:10px 16px;margin-bottom:14px;}
#fanshopresult.ec-notice h2 {margin:0;font-size:26px;}
#fanshopresult.ec-notice .highlight {color:var(--tr-lime);}
#newfund:not(:empty) {margin-top:10px;}
.ec-page .greeninfo {background:rgba(198,242,90,0.1);border:1px solid #3b4a2a;color:var(--tr-lime);box-shadow:none;border-radius:10px;font-size:13px;}

/* cash flow */
.ec-flow {display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;align-items:end;height:200px;}
.ec-week {display:flex;flex-direction:column;align-items:center;height:100%;min-width:0;}
.ec-net {font-family:teko,exo,arial;font-size:15px;line-height:1;white-space:nowrap;margin-bottom:6px;}
.ec-bars {flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center;gap:3px;border-bottom:1px solid var(--tr-line);}
.ec-bars i {display:block;width:38%;max-width:18px;min-height:2px;border-radius:4px 4px 0 0;}
i.ec-inc,.ec-legend i.ec-inc {background:var(--tr-lime);}
i.ec-exp,.ec-legend i.ec-exp {background:var(--tr-coral);}
.ec-week small {font-size:10px;color:var(--tr-muted);margin-top:6px;white-space:nowrap;}
.ec-week:last-child small {color:var(--tr-text);font-weight:bold;}
.ec-legend {display:flex;gap:16px;margin-top:10px;font-size:12px;color:var(--tr-muted);}
.ec-legend i {display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px;}

/* overview per type */
.ec-ovrow {display:grid;grid-template-columns:130px minmax(0,1fr) 90px;gap:10px;align-items:center;padding:6px 0;border-top:1px solid #18253a;font-size:13px;}
.ec-ovrow:first-of-type {border-top:0;}
.ec-ovrow b {font-family:teko,exo,arial;font-weight:normal;font-size:20px;line-height:1;text-align:right;white-space:nowrap;}
.ec-ovbar {display:grid;grid-template-columns:1fr 1fr;height:8px;}
.ec-ovneg {display:flex;justify-content:flex-end;border-right:1px solid var(--tr-line);}
.ec-ovneg i {display:block;height:100%;background:var(--tr-coral);border-radius:4px 0 0 4px;}
.ec-ovpos i {display:block;height:100%;background:var(--tr-lime);border-radius:0 4px 4px 0;}

/* bank, tickets, medical */
.ec-bank .ot-kv {margin-bottom:4px;}
.ec-tutwrap {position:relative;}
.ec-tutwrap .arrow {top:44px;left:20px;}
.ec-page .ot-actionsrow .tr-btn,.ec-page .ot-actionsrow .ot-btn {display:inline-block;text-decoration:none;}
.ec-page .ot-actionsrow .tr-btn {font-size:19px;padding:8px 16px 5px;color:#0b1422 !important;}
.ec-duo {display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.ec-mini {display:flex;flex-direction:column;gap:4px;}
.ec-minivalue {font-family:teko,exo,arial;font-weight:normal;font-size:30px;line-height:1;color:#fff;margin-top:2px;}
.ec-minivalue .highlight {color:var(--tr-lime);font-family:exo,arial;font-size:13px;}
.ec-mini .tr-note {margin:0;}
.ec-mini .tr-note b {color:var(--tr-text);}
.ec-hint {font-size:12px;color:var(--tr-amber);}
.ec-mini .ot-btn {margin-top:auto;align-self:flex-start;font-size:16px;padding:6px 14px 4px;}
.ec-mini .ot-btn:first-of-type {margin-top:8px;}
.ec-costrow {display:grid;grid-template-columns:130px minmax(0,1fr) 80px;gap:10px;align-items:center;padding:6px 0;border-top:1px solid #18253a;font-size:13px;}
.ec-costrow:first-of-type {border-top:0;}
.ec-costrow a {color:var(--tr-text) !important;}
.ec-costrow a:hover {color:var(--tr-skill) !important;}
.ec-costbar {height:8px;border-radius:4px;background:#1b2a42;overflow:hidden;}
.ec-costbar i {display:block;height:100%;background:var(--tr-coral);border-radius:4px;}
.ec-costrow b {font-family:teko,exo,arial;font-weight:normal;font-size:20px;line-height:1;text-align:right;}

/* transactions */
.ec-tabs {margin:0;}
.ec-table td {font-size:13px;}
.ec-table td.ot-n {font-family:teko,exo,arial;font-size:19px;white-space:nowrap;}
.ec-date {color:var(--tr-muted);white-space:nowrap;width:110px;}
.ec-type {font-size:10px;font-weight:bold;text-transform:uppercase;letter-spacing:0.05em;color:var(--tr-muted);border:1px solid var(--tr-line);border-radius:4px;padding:2px 5px;margin-left:6px;white-space:nowrap;}
.ec-totalrow td {border-bottom:0;font-weight:bold;}
.ec-totalrow td.ot-n {font-size:24px;}

/* club + manager */
.ec-clubhead {display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:center;margin-bottom:18px;}
.ec-clubhead h2 {font-size:40px !important;margin:2px 0 0 !important;overflow-wrap:anywhere;}
.ec-btngrid {display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;}
.ec-btngrid .ot-btn {font-size:17px;text-decoration:none;}
.tr-meter.ec-xp i {background:var(--tr-skill);}
.ec-coins {display:grid;grid-template-columns:auto auto 1fr;gap:12px;align-items:center;margin-top:16px;padding-top:14px;border-top:1px solid var(--tr-line);}
.ec-coins > img {height:30px;width:auto;}
.ec-coins b {display:block;font-family:teko,exo,arial;font-weight:normal;font-size:30px;line-height:1;}
.ec-coins small {color:var(--tr-muted);font-size:11px;}
.ec-coins .ot-btn {justify-self:end;font-size:16px;padding:6px 12px 4px;}

/* settings toggles */
.ec-settings #settings {display:grid;grid-template-columns:1fr 1fr;gap:4px 18px;}
.ec-settings .onoffbox {width:auto;float:none;display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid #18253a;font-size:13px;line-height:1.3;}
.ec-settings .onoff {flex-shrink:0;float:none;margin:0;width:40px;height:22px;border-radius:11px;background:#1b2a42;border:1px solid var(--tr-line);padding:1px;box-sizing:border-box;transition:background-color 0.2s;}
.ec-settings .onoff .dot {width:18px;height:18px;border-radius:50%;background:#8496b0;transition:transform 0.2s;}
.ec-settings .onoff.on {background:var(--tr-lime);border-color:var(--tr-lime);padding-left:1px;}
.ec-settings .onoff.on .dot {background:#0b1422;transform:translateX(18px);}

/* trophies */
.ec-trophylist {display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;}
.ec-trophylist:not(:has(.trophybox))::before {content:"No trophies yet.";color:var(--tr-muted);font-size:13px;}
.ec-trophylist > .col3 {width:auto;float:none;padding:0;margin:0;}
.ec-trophylist .clearfix {display:none;}
.ec-trophylist .trophybox {background:var(--tr-card);border:1px solid var(--tr-line);border-radius:12px;padding:10px;margin:0;height:auto;box-shadow:none;color:var(--tr-text);}
.ec-trophylist .trophybox h1 {font-size:26px !important;width:40px;height:40px;line-height:44px;margin:0 auto 6px;}
.ec-trophylist .trophybox h2 {font-size:15px;}

/* danger zone */
.ec-danger {display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;border-color:#5a2a33;}
.ec-danger h2 {margin:0 0 2px !important;}
.ec-danger .ot-actionsrow {margin:0;}
.ec-danger .ot-btn {display:inline-block;text-decoration:none;}

/* modals */
.ec-modal {position:fixed;top:50%;left:50%;right:auto;margin:0;transform:translate(-50%,-50%);width:min(460px,92vw);max-height:90vh;overflow:auto;box-sizing:border-box;z-index:1001;padding:20px 22px;border-radius:16px;background:#0b1422fa;color:var(--tr-text);border:1px solid #2c3f5e;box-shadow:0 0 0 100vmax rgba(3,6,12,0.65),0 30px 80px rgba(0,0,0,0.6);font-family:exo,arial;font-size:15px;}
.ec-modalwide {width:min(720px,94vw);}
.ec-modalhead {display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;}
.ec-modalhead h2 {font-family:teko,exo,arial;font-weight:normal;text-transform:uppercase;letter-spacing:0.03em;font-size:32px;line-height:1;margin:0;color:#fff;}
.ec-modal .tr-note {margin:0 0 12px;}
.ec-modal .tr-statlabel {margin:12px 0 4px;}
.ec-modal .ot-kv {margin:12px 0;}
.ec-bigvalue {text-align:center;margin:8px 0 6px;}
.ec-bigvalue b {display:block;font-family:teko,exo,arial;font-weight:normal;font-size:46px;line-height:1;color:var(--tr-lime);}
.ec-modal input[type=range] {display:block;width:100%;height:auto;margin:10px 0 4px;padding:0;background:none;accent-color:var(--tr-lime);cursor:pointer;}
.ec-rangelabels {display:flex;justify-content:space-between;font-size:11px;color:var(--tr-muted);margin-bottom:8px;}
.ec-modalfoot {display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-top:16px;flex-wrap:wrap;}
.ec-modalfoot .ot-btn {text-decoration:none;}
.ec-modal input.tr-btn,.ec-page input.tr-btn {display:inline-block;width:auto;min-width:0;height:auto;margin:0;border:0;background:var(--tr-lime);color:#0b1422;font-family:teko,exo,arial;font-weight:normal;font-size:20px;line-height:1.2;padding:8px 22px 5px;cursor:pointer;}
.ec-modal input.tr-btn:hover {background:var(--tr-lime);}
.ec-modalfoot div.tr-btn {display:inline-block;font-size:20px;padding:8px 22px 5px;}
.ec-input {display:block;width:100%;box-sizing:border-box;height:auto;margin:0;padding:10px 12px;border:1px solid var(--tr-line);border-radius:10px;background:var(--tr-card);color:var(--tr-text);font-family:exo,arial;font-size:16px;outline:none;}
.ec-input:focus {border-color:var(--tr-skill);}
.ec-logos,.ec-jerseys {display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px;}
.ec-logos a,.ec-jerseys img {display:flex;align-items:center;justify-content:center;height:72px;border-radius:10px;background:var(--tr-card);border:1px solid var(--tr-line);cursor:pointer;transition:border-color 0.2s;box-sizing:border-box;}
.ec-logos img {height:54px;width:auto;}
.ec-jerseys img {width:100%;object-fit:contain;padding:6px;}
.ec-logos a:hover,.ec-jerseys img:hover {border-color:var(--tr-skill);}
.ec-logos a.ec-on,.ec-jerseys img.ec-on {border-color:var(--tr-lime);box-shadow:0 0 0 1px var(--tr-lime);}
.ec-colors {display:flex;flex-wrap:wrap;gap:8px;}
.ec-colors .colorbutton {width:34px;height:34px;border-radius:50%;border:2px solid transparent;box-sizing:border-box;}
.ec-colors .colorbutton.ec-on {border-color:#fff;}

@media (max-width: 1000px) {
    .ec-settings #settings {grid-template-columns:1fr;}
}
@media (max-width: 767px) {
    .ec-tiles .tr-big {font-size:34px;}
    .ec-flow {height:170px;gap:4px;}
    .ec-net {font-size:12px;}
    .ec-week small {font-size:9px;}
    .ec-duo {grid-template-columns:1fr;gap:0;}
    .ec-ovrow,.ec-costrow {grid-template-columns:100px minmax(0,1fr) 70px;}
    .ec-hide-sm {display:none;}
    .ec-date {width:auto;}
    .ec-clubhead {gap:14px;}
    .ec-clubhead .ot-crest {width:80px;height:80px;}
    .ec-clubhead h2 {font-size:30px !important;}
    .ec-btngrid {grid-template-columns:1fr 1fr;}
    .ec-coins {grid-template-columns:auto auto;}
    .ec-coins .ot-btn {grid-column:1 / -1;justify-self:stretch;}
}
.ec-trophylist {grid-template-columns:repeat(auto-fill,minmax(210px,1fr));}
.ec-trophylist .trophybox {display:grid;grid-template-columns:70px minmax(0,1fr);gap:10px;align-items:center;text-align:left;}
.ec-trophylist .trophybox .mcol2 {width:auto;float:none;padding:0;margin:0;}
.ec-trophylist .trophyimg {height:78px;width:auto;display:block;margin:0 auto;}
.ec-trophylist .trophybox h1 {margin:0 0 4px !important;display:inline-block;vertical-align:middle;}
.ec-trophylist .trophybox h1 + img {vertical-align:middle;margin:0 0 0 6px !important;}
.ec-trophylist .trophybox h2 {font-family:exo,arial !important;text-transform:none !important;letter-spacing:0 !important;margin:2px 0 4px !important;}
.ec-trophylist .trophybox > .mcol2 > div {display:inline-block;margin-right:12px;}
.ec-trophylist .trophybox label {display:block;font-size:10px;margin:0;}
.ec-trophylist .trophybox h3,.ec-trophylist .trophybox h4 {font-family:teko,exo,arial;font-size:20px;margin:0;color:#fff;}
.ec-trophylist .trophyimg {height:118px;}
.ec-trophylist .trophybox {grid-template-columns:56px minmax(0,1fr);}
#chgjersey.ec-modal {position:fixed;top:50%;left:50%;width:min(720px,94vw);height:auto;max-height:90vh;padding:20px 22px;background:#0b1422fa;border-radius:16px;box-shadow:0 0 0 100vmax rgba(3,6,12,0.65),0 30px 80px rgba(0,0,0,0.6);z-index:1001;}
.ec-sht {display:none;}
@media (max-width: 767px) {
    .ec-lng {display:none;}
    .ec-sht {display:inline;}
    .ec-net {display:none;}
}

/* ===== Sponsors page (sp-*) ===== */
.sp-mono {--h:200;flex-shrink:0;width:64px;height:64px;border-radius:18px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,hsl(var(--h) 70% 55%),hsl(calc(var(--h) + 40) 65% 32%));box-shadow:inset 0 0 0 1px rgba(255,255,255,0.15),0 8px 20px rgba(0,0,0,0.35);position:relative;overflow:hidden;}
.sp-mono::after {content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,255,255,0.25),transparent 45%);}
.sp-mono span {font-family:teko,exo,arial;font-size:32px;line-height:1;padding-top:4px;color:#fff;letter-spacing:0.02em;text-shadow:0 2px 6px rgba(0,0,0,0.35);}
.sp-notice {background:rgba(198,242,90,0.1);border:1px solid #3b4a2a;color:var(--tr-lime);border-radius:12px;padding:12px 16px;margin-bottom:16px;font-size:15px;}
.sp-notice b {color:#fff;}
.sp-notice-info {background:rgba(76,201,255,0.08);border-color:#1f4a63;color:var(--tr-skill);}

/* current sponsor */
.sp-current {position:relative;overflow:hidden;background:radial-gradient(circle at 0 0,rgba(198,242,90,0.12),transparent 45%),var(--tr-panel);border-color:#2c3f5e;padding:24px 26px;}
.sp-curmain {display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.05fr);gap:24px;align-items:center;}
.sp-current > .sp-curmain > .sp-mono {width:110px;height:110px;border-radius:28px;}
.sp-current > .sp-curmain > .sp-mono span {font-size:56px;}
.sp-curid h2 {font-size:52px !important;margin:2px 0 0 !important;line-height:0.95 !important;overflow-wrap:anywhere;}
.sp-chip-new {border-color:var(--tr-lime);color:var(--tr-lime);}
.sp-chip-on {border-color:#1f4a42;color:var(--tr-rest);}
.sp-progress {margin-top:14px;}
.sp-progress .tr-row {font-size:13px;color:var(--tr-muted);}
.sp-progress .tr-row b {font-size:19px;color:var(--tr-text);}
.tr-meter.sp-meter i {background:linear-gradient(90deg,var(--tr-rest),var(--tr-lime));}
.sp-curnums {display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.sp-curnums > div {background:var(--tr-card);border:1px solid var(--tr-line);border-radius:12px;padding:10px 14px;}
.sp-curnums small {display:block;font-size:11px;text-transform:uppercase;letter-spacing:0.05em;color:var(--tr-muted);}
.sp-curnums b {display:block;font-family:teko,exo,arial;font-weight:normal;font-size:32px;line-height:1;color:#fff;margin-top:3px;}
.sp-curnums em {display:block;font-style:normal;font-size:11px;color:var(--tr-muted);}
.sp-warn {margin-top:16px;border:1px solid #6b5320;background:rgba(255,194,74,0.08);color:var(--tr-amber);border-radius:10px;padding:10px 14px;font-size:14px;}
.sp-curfoot {display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px;padding-top:16px;border-top:1px solid var(--tr-line);}
.sp-renewal b {display:block;font-size:15px;color:#fff;}
.sp-renewal span {font-size:13px;color:var(--tr-muted);}
.sp-curfoot .ot-actionsrow {margin:0;}
.sp-page .ot-actionsrow .tr-btn,.sp-page .ot-actionsrow .ot-btn {display:inline-block;text-decoration:none;}
.sp-page .ot-actionsrow .tr-btn {font-size:19px;padding:8px 16px 5px;color:#0b1422 !important;}
.sp-none {display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:center;}
.sp-none .sp-mono {width:90px;height:90px;border-radius:24px;filter:grayscale(0.7);}
.sp-none h2 {font-size:44px !important;margin:2px 0 6px !important;}

/* offers */
.sp-layout {display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;align-items:start;}
.sp-toolbar {display:flex;justify-content:space-between;align-items:center;gap:10px 16px;flex-wrap:wrap;padding:14px 18px;}
.sp-toolbar h2 {margin:0 !important;font-size:26px !important;}
.sp-sorts {margin:0;}
.sp-sorts .lu-form {text-decoration:none;display:inline-block;}
.sp-sorts .sp-all {margin-left:6px;border-style:dashed;}
.sp-sorts .sp-all.lu-form-on {border-style:solid;}
.sp-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
.sp-card {position:relative;display:flex;flex-direction:column;gap:14px;margin:0;padding:18px 20px;transition:border-color 0.2s,transform 0.2s;}
.sp-card:hover {border-color:#2c3f5e;transform:translateY(-2px);}
.sp-exclusive {border-color:#5a2a4a;background:linear-gradient(160deg,rgba(255,122,198,0.10),transparent 50%),var(--tr-panel);}
.sp-locked {opacity:0.62;}
.sp-locked:hover {opacity:0.85;}
.sp-ribbon {position:absolute;top:14px;right:14px;font-size:10px;font-weight:bold;text-transform:uppercase;letter-spacing:0.06em;line-height:1;padding:4px 7px;border-radius:4px;background:var(--tr-team);color:#0b1422;}
.sp-ribbon-week {background:var(--tr-lime);}
.sp-ribbon-value {background:var(--tr-skill);}
.sp-cardhead {display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center;padding-right:90px;}
.sp-page .sp-cardhead h3 {font-family:teko,exo,arial;font-size:28px;line-height:1;margin:0;overflow-wrap:anywhere;}
.sp-cardhead small {color:var(--tr-muted);font-size:12px;}
.sp-value b {display:block;font-family:teko,exo,arial;font-weight:normal;font-size:44px;line-height:0.95;color:var(--tr-lime);margin-top:2px;}
.sp-value small {color:var(--tr-muted);font-size:12px;}
.sp-nums {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
.sp-nums > div {background:var(--tr-card);border:1px solid var(--tr-line);border-radius:10px;padding:8px 10px;}
.sp-nums small {display:block;font-size:10px;text-transform:uppercase;letter-spacing:0.05em;color:var(--tr-muted);}
.sp-nums b {display:block;font-family:teko,exo,arial;font-weight:normal;font-size:22px;line-height:1.05;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sp-reqs {display:flex;flex-wrap:wrap;gap:6px;}
.sp-reqs span {font-size:12px;border-radius:999px;padding:3px 10px;border:1px solid var(--tr-line);}
.sp-ok {color:var(--tr-lime);border-color:#3b4a2a !important;}
.sp-no {color:var(--tr-coral);border-color:#5a2a33 !important;}
.sp-delta {font-size:12px;}
.sp-up {color:var(--tr-lime);}
.sp-down {color:var(--tr-coral) !important;}
.sp-actions {margin-top:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.sp-actions .tr-btn {display:inline-block;font-size:19px;padding:8px 18px 5px;}
.sp-actions .ot-btn {display:inline-block;font-size:17px;padding:7px 14px 5px;text-decoration:none;}
.sp-actions .rel .arrow {top:40px;}
.sp-net {font-size:12px;color:var(--tr-muted);}
.sp-lockmsg {font-size:13px;color:var(--tr-coral);}
.sp-empty {text-align:center;padding:40px 20px;}

/* side */
.sp-mini {display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px 0;border-top:1px solid #18253a;}
.sp-mini:first-of-type {border-top:0;}
.sp-mini .sp-mono {width:40px;height:40px;border-radius:12px;}
.sp-mini .sp-mono span {font-size:20px;}
.sp-mini b {display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sp-mini small {color:var(--tr-muted);font-size:11px;}
.sp-need {font-family:teko,exo,arial;font-size:20px;color:var(--tr-amber);white-space:nowrap;}
.sp-nextdiv {background:linear-gradient(160deg,rgba(76,201,255,0.10),transparent 55%),var(--tr-panel);}
.sp-how > div {padding:8px 0;border-top:1px solid #18253a;font-size:13px;}
.sp-how > div:first-child {border-top:0;}
.sp-how b {display:block;color:#fff;}
.sp-how span {color:var(--tr-muted);}

@media (max-width: 1100px) {
    .sp-curmain {grid-template-columns:auto minmax(0,1fr);}
    .sp-curnums {grid-column:1 / -1;grid-template-columns:repeat(4,minmax(0,1fr));}
    .sp-layout {grid-template-columns:1fr;}
}
@media (max-width: 767px) {
    .sp-current {padding:18px;}
    .sp-curmain {gap:14px;}
    .sp-current > .sp-curmain > .sp-mono {width:72px;height:72px;border-radius:20px;}
    .sp-current > .sp-curmain > .sp-mono span {font-size:36px;}
    .sp-curid h2 {font-size:36px !important;}
    .sp-curnums {grid-template-columns:1fr 1fr;}
    .sp-curnums b {font-size:26px;}
    .sp-grid {grid-template-columns:1fr;}
    .sp-none {grid-template-columns:1fr;}
    .sp-sorts {flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;width:100%;}
    .sp-sorts .lu-form {white-space:nowrap;}
}
.ec-trophylist .trophybox h1 {text-align:center;padding:0 !important;box-sizing:border-box;line-height:42px !important;font-family:teko,exo,arial !important;font-weight:normal !important;}
@media (max-width: 1100px) {
    .sp-layout {grid-template-columns:minmax(0,1fr);}
}
@media (max-width: 767px) {
    .sp-sorts {min-width:0;max-width:100%;}
    .sp-toolbar {display:block;}
    .sp-toolbar h2 {margin-bottom:10px !important;}
}

/* ===== Player card: injury / suspension ===== */
.pc-portrait.pc-out .cardimginfo {border-color:var(--tr-coral);box-shadow:0 0 0 1px var(--tr-coral),0 0 18px rgba(255,107,125,0.35);}
.pc-flag {position:absolute;left:50%;bottom:-12px;transform:translateX(-50%);display:flex;align-items:center;gap:7px;white-space:nowrap;padding:5px 11px 5px 7px;border-radius:999px;font-family:exo,arial;font-size:11px;font-weight:bold;text-transform:uppercase;letter-spacing:0.05em;line-height:1;box-shadow:0 6px 16px rgba(0,0,0,0.5);z-index:3;}
.pc-flag span {display:flex;flex-direction:column;gap:2px;}
.pc-flag b {font-family:teko,exo,arial;font-weight:normal;font-size:17px;letter-spacing:0.02em;text-transform:none;}
.pc-flag-inj {background:var(--tr-coral);color:#fff;}
.pc-flag-ban {background:#1b0b10;color:#fff;border:1px solid var(--tr-coral);}
.pc-cross {position:relative;display:inline-block;flex-shrink:0;width:18px;height:18px;border-radius:50%;background:#fff;}
.pc-cross::before,.pc-cross::after {content:"";position:absolute;left:50%;top:50%;background:var(--tr-coral);transform:translate(-50%,-50%);border-radius:1px;}
.pc-cross::before {width:10px;height:3px;}
.pc-cross::after {width:3px;height:10px;}
.pc-redcard {display:inline-block;flex-shrink:0;width:12px;height:17px;border-radius:2px;background:#e8283b;box-shadow:0 0 0 1px rgba(255,255,255,0.35);transform:rotate(8deg);}
.pc-chip-inj {background:rgba(255,107,125,0.14) !important;border-color:var(--tr-coral) !important;color:#ffb3bd !important;font-weight:bold;}
.pc-chip-ban {background:rgba(232,40,59,0.12) !important;border-color:#e8283b !important;color:#ffb3bd !important;font-weight:bold;}
.pc-chip-inj .pc-cross {width:14px;height:14px;background:var(--tr-coral);}
.pc-chip-inj .pc-cross::before {width:8px;height:2px;background:#fff;}
.pc-chip-inj .pc-cross::after {width:2px;height:8px;background:#fff;}
.pc-chip-ban .pc-redcard {width:10px;height:14px;}

/* ===== Stadium page (st-*) ===== */
.st-hero {display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:26px;align-items:center;padding:22px 26px;background:radial-gradient(ellipse at 30% 100%,rgba(52,214,180,0.14),transparent 60%),var(--tr-panel);}
.st-art {position:relative;}
.st-art img {display:block;width:100%;height:auto;filter:drop-shadow(0 18px 30px rgba(0,0,0,0.55));}
.st-art .st-crane {position:absolute;inset:0;}
.st-capacity {display:flex;align-items:baseline;gap:10px;margin:4px 0 14px;}
.st-capacity b {font-family:teko,exo,arial;font-weight:normal;font-size:84px;line-height:0.85;color:#fff;}
.st-capacity span {font-family:teko,exo,arial;font-size:26px;color:var(--tr-muted);text-transform:uppercase;}
.tr-meter.st-meter i {background:linear-gradient(90deg,var(--tr-rest),var(--tr-skill));}
.st-build {margin-top:6px;border:1px solid #6b5320;background:rgba(255,194,74,0.07);border-radius:12px;padding:12px 14px;}
.st-buildhead {display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:8px;font-size:13px;color:var(--tr-muted);}
.st-buildhead b {color:var(--tr-amber);font-size:15px;}
.tr-meter.st-buildmeter i {background:var(--tr-amber);}
.st-buildnums {display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:8px;font-size:13px;color:var(--tr-muted);}
.st-buildnums b {color:#fff;}
.st-tip {margin:8px 0 4px;border:1px solid #3b4a2a;background:rgba(198,242,90,0.08);color:var(--tr-lime);border-radius:10px;padding:9px 12px;font-size:13px;}
.st-page .ot-actionsrow .tr-btn,.st-page .ot-actionsrow .ot-btn {display:inline-block;text-decoration:none;}
.st-page .ot-actionsrow .tr-btn {font-size:20px;padding:9px 20px 6px;}
.st-tiles .tr-big {font-size:42px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.st-tiles .tr-note {margin:0;display:block;}
.st-row {align-items:start;}
.st-chart {display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:8px;height:210px;align-items:end;}
.st-col {display:flex;flex-direction:column;align-items:center;height:100%;min-width:0;}
.st-colval {font-family:teko,exo,arial;font-size:15px;line-height:1;margin-bottom:5px;color:var(--tr-text);}
.st-colbar {position:relative;flex:1;width:100%;max-width:34px;background:#1b2a42;border-radius:6px;overflow:hidden;box-shadow:inset 0 2px 0 var(--tr-muted);}
.st-colbar i {position:absolute;left:0;right:0;bottom:0;display:block;background:var(--tr-skill);border-radius:4px 4px 0 0;}
.st-colbar i.st-full {background:var(--tr-lime);}
.st-col small {font-size:10px;color:var(--tr-muted);margin-top:6px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ec-legend i.st-lg-full {background:var(--tr-lime);}
.ec-legend i.st-lg {background:var(--tr-skill);}
.st-price {display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;}
.st-price > div:first-child {display:flex;align-items:baseline;gap:8px;}
.st-price b,.st-price h2 {font-family:teko,exo,arial;font-weight:normal;font-size:54px !important;line-height:0.9 !important;color:#fff;margin:0 !important;}
.st-price span {color:var(--tr-muted);font-size:13px;}
.st-price .highlight {font-size:13px;color:var(--tr-lime);}
.st-price .ot-btn {font-size:17px;padding:7px 14px 5px;}
.st-pricebar {position:relative;height:8px;border-radius:4px;background:linear-gradient(90deg,var(--tr-skill),var(--tr-lime) 30%,var(--tr-amber) 60%,var(--tr-coral));margin:6px 0 4px;}
.st-pricebar i {position:absolute;top:50%;width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid #0b1422;transform:translate(-50%,-50%);box-shadow:0 2px 6px rgba(0,0,0,0.5);}
.st-pricebar s {position:absolute;top:-4px;bottom:-4px;width:2px;background:#fff;opacity:0.6;transform:translateX(-50%);}
.st-subhead {font-size:20px !important;margin:16px 0 6px !important;}
.st-afford {color:var(--tr-coral);}

@media (max-width: 1000px) {
    .st-hero {grid-template-columns:1fr;}
}
@media (max-width: 767px) {
    .st-hero {padding:18px;gap:16px;}
    .st-capacity b {font-size:60px;}
    .st-chart {gap:4px;height:170px;}
    .st-colval {font-size:12px;}
    .st-col small {display:none;}
    .st-tiles .tr-big {font-size:34px;}
    .st-price b,.st-price h2 {font-size:42px !important;}
}
.st-price .st-val {font-family:teko,exo,arial;font-size:54px;line-height:0.9;color:#fff;}
.st-price .st-val h2 {font-size:54px !important;}
.st-price .st-val .highlight,.st-price #newticketpriceresult .highlight {font-family:exo,arial;font-size:12px;line-height:1.2;}
@media (max-width: 767px) {.st-price .st-val {font-size:42px;}}

/* ===== Landing page (lp-*) ===== */
.lp {background:#070d18;color:var(--tr-text);font-family:exo,arial;line-height:1.5;overflow:hidden;}
.lp a {text-decoration:none;}
.lp h1,.lp h2,.lp h3 {font-family:teko,exo,arial;font-weight:normal;text-transform:uppercase;letter-spacing:0.02em;line-height:0.95;color:#fff;margin:0;}
.lp-wrap {width:min(1320px,100%);margin:0 auto;padding:0 24px;box-sizing:border-box;}
.lp-kicker {display:inline-block;font-size:12px;font-weight:bold;text-transform:uppercase;letter-spacing:0.12em;color:var(--tr-lime);margin-bottom:12px;}
.lp .tr-btn,.lp .ot-btn {display:inline-block;}
.lp-cta {font-size:24px;padding:13px 28px 9px;border-radius:12px;color:#0b1422 !important;box-shadow:0 12px 30px rgba(198,242,90,0.25);}
.lp-cta2 {font-size:21px;padding:12px 22px 8px;border-radius:12px;}
.lp-ctas {display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:26px;}

/* hero */
.lp-hero {position:relative;padding:56px 0 34px;background:linear-gradient(180deg,rgba(7,13,24,0.55),#070d18 92%),radial-gradient(ellipse at 75% 30%,rgba(76,201,255,0.18),transparent 55%),url('img/info/newback.jpg') center top/cover no-repeat;}
.lp-hero > .lp-wrap:first-child {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:48px;align-items:center;}
.lp-logo {height:64px;width:auto;display:block;margin-bottom:26px;}
.lp-herotext h1 {font-size:clamp(46px,5.4vw,78px);text-shadow:0 4px 24px rgba(0,0,0,0.6);}
.lp-lead {font-size:17px;color:#c9d4e4;margin:18px 0 0;max-width:600px;}
.lp-lead b {color:#fff;}
.lp-login {margin:18px 0 0;font-size:14px;color:var(--tr-muted);}
.lp-login a {color:var(--tr-skill);font-weight:bold;}
.lp-screen {position:relative;border-radius:18px;overflow:hidden;border:1px solid #2c3f5e;background:#0b1422;box-shadow:0 40px 90px rgba(0,0,0,0.65),0 0 0 8px rgba(255,255,255,0.03);transform:perspective(1400px) rotateY(-6deg) rotateX(2deg);}
.lp-screen video {display:block;width:100%;height:auto;}
.lp-screen::after {content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,0.08),transparent 40%);pointer-events:none;}
.lp-stats {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:44px;}
.lp-stat {background:rgba(11,20,34,0.85);border:1px solid var(--tr-line);border-radius:14px;padding:16px 20px;}
.lp-stat b {display:block;font-family:teko,exo,arial;font-weight:normal;font-size:48px;line-height:0.95;color:#fff;}
.lp-stat span {display:flex;align-items:center;gap:7px;font-size:12px;text-transform:uppercase;letter-spacing:0.06em;color:var(--tr-muted);}
.lp-live {width:8px;height:8px;border-radius:50%;background:var(--tr-lime);box-shadow:0 0 0 0 rgba(198,242,90,0.6);animation:lp-pulse 2s infinite;}
@keyframes lp-pulse {0% {box-shadow:0 0 0 0 rgba(198,242,90,0.6);} 70% {box-shadow:0 0 0 8px rgba(198,242,90,0);} 100% {box-shadow:0 0 0 0 rgba(198,242,90,0);}}
@media (prefers-reduced-motion: reduce) {.lp-live {animation:none;}}

/* sections */
.lp-section {padding-top:70px;}
.lp-sechead {text-align:center;max-width:720px;margin:0 auto 30px;}
.lp-sechead h2 {font-size:clamp(38px,4vw,56px);}
.lp-sechead p {color:var(--tr-muted);font-size:16px;margin:10px 0 0;}
.lp-features {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;}
.lp-feature {background:var(--tr-panel);border:1px solid var(--tr-line);border-radius:16px;padding:22px 20px;transition:border-color 0.2s,transform 0.2s;}
.lp-feature:hover {border-color:color-mix(in srgb,var(--c) 50%,var(--tr-line));transform:translateY(-3px);}
.lp-ficon {width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent);border:1px solid color-mix(in srgb,var(--c) 35%,transparent);margin-bottom:16px;}
.lp-ficon svg {width:26px;height:26px;}
.lp-feature h3 {font-size:26px;margin-bottom:8px;}
.lp-feature p {font-size:14px;color:#b9c6d8;margin:0;}

/* showcase rows */
.lp-show {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:48px;align-items:center;padding-top:80px;}
.lp-show-flip .lp-showtext {order:2;}
.lp-showtext h2 {font-size:clamp(38px,4vw,58px);}
.lp-showtext h3 {font-size:26px;margin-top:22px;}
.lp-showtext p {color:#b9c6d8;font-size:16px;margin:10px 0 0;}
.lp-showtext .lp-cta,.lp-showtext .lp-cta2 {margin-top:24px;}
.lp-showmedia > img {display:block;width:100%;height:auto;border-radius:18px;border:1px solid #2c3f5e;box-shadow:0 30px 70px rgba(0,0,0,0.55);}
.lp-match {background:var(--tr-panel);border:1px solid #2c3f5e;border-radius:18px;padding:14px;box-shadow:0 30px 70px rgba(0,0,0,0.55);}

/* leaderboard + news */
.lp-live2 {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start;}
.lp-panelhead {display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center;margin-bottom:12px;}
.lp-panelhead img {width:72px;height:72px;object-fit:cover;border-radius:14px;}
.lp-panelhead img.lp-newslogo {object-fit:contain;background:none;width:96px;height:auto;border-radius:0;}
.lp-panelhead h3 {font-size:30px;}
.lp-panelhead p {font-size:13px;color:var(--tr-muted);margin:4px 0 0;}
.lp-leader {display:grid;grid-template-columns:30px 40px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 0;border-top:1px solid #18253a;color:var(--tr-text) !important;}
.lp-leader > img {height:38px;width:auto;image-rendering:pixelated;justify-self:center;}
.lp-rank {width:30px;height:30px;border-radius:50%;background:var(--tr-card);border:1px solid var(--tr-line);font-family:teko,exo,arial;font-size:19px;line-height:31px;text-align:center;color:var(--tr-muted);}
.lp-rank1 {background:var(--tr-lime);border-color:var(--tr-lime);color:#0b1422;}
.lp-lname b {display:block;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lp-lname small {color:var(--tr-muted);font-size:12px;}
.lp-lname small img {height:10px;width:auto;border-radius:2px;}
.lp-pts {text-align:right;}
.lp-pts b {display:block;font-family:teko,exo,arial;font-weight:normal;font-size:26px;line-height:1;color:#fff;}
.lp-pts small {font-size:10px;text-transform:uppercase;color:var(--tr-muted);}
.lp-leader:hover b,.lp-newsitem:hover b {color:var(--tr-lime);}
.lp-newsitem {display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:start;padding:10px 0;border-top:1px solid #18253a;color:var(--tr-text) !important;}
.lp-newsitem > img {height:38px;width:auto;image-rendering:pixelated;justify-self:center;}
.lp-newsitem b {display:block;font-size:14px;line-height:1.3;}
.lp-newsitem small {display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12px;color:var(--tr-muted);margin-top:2px;}

/* full feature list */
.lp-list {list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 18px;}
.lp-list li {position:relative;padding:12px 14px 12px 40px;background:var(--tr-panel);border:1px solid var(--tr-line);border-radius:12px;font-size:14px;color:#c9d4e4;}
.lp-list li::before {content:"";position:absolute;left:14px;top:50%;width:14px;height:8px;border-left:2px solid var(--tr-lime);border-bottom:2px solid var(--tr-lime);transform:translateY(-70%) rotate(-45deg);}

/* final band */
.lp-final {margin-top:80px;padding:80px 0 90px;text-align:center;background:linear-gradient(180deg,#070d18,rgba(7,13,24,0.55) 40%,#070d18),url('img/stadium5.png') center/cover no-repeat;}
.lp-final h2 {font-size:clamp(48px,6vw,84px);text-shadow:0 4px 24px rgba(0,0,0,0.6);}
.lp-final p {font-size:17px;color:#c9d4e4;max-width:640px;margin:14px auto 0;}
.lp-final .lp-ctas {justify-content:center;}

@media (max-width: 1100px) {
    .lp-features {grid-template-columns:repeat(2,minmax(0,1fr));}
    .lp-list {grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width: 900px) {
    .lp-hero > .lp-wrap:first-child,.lp-show,.lp-live2 {grid-template-columns:minmax(0,1fr);gap:30px;}
    .lp-show-flip .lp-showtext {order:0;}
    .lp-screen {transform:none;}
    .lp-stats {grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width: 767px) {
    .lp-wrap {padding:0 16px;}
    .lp-hero {padding:30px 0 20px;}
    .lp-logo {height:48px;margin-bottom:18px;}
    .lp-lead {font-size:15px;}
    .lp-stat b {font-size:38px;}
    .lp-features,.lp-list {grid-template-columns:minmax(0,1fr);}
    .lp-section {padding-top:50px;}
    .lp-show {padding-top:56px;}
    .lp-cta {font-size:21px;padding:12px 22px 8px;}
}
.lp-match #minimatch,.lp-match #soccerfield {width:100% !important;max-width:none !important;min-width:0 !important;}
.lp-match #minisitu img {display:inline;width:auto;height:1em;vertical-align:-2px;border:0;border-radius:0;box-shadow:none;}

/* ===== Login / signup / verify / onboarding (au-*) ===== */
#mainarea-wide.au-bg {background:linear-gradient(180deg,rgba(7,13,24,0.55),#070d18 85%),url('img/info/newback.jpg') center top/cover no-repeat #070d18 !important;min-height:calc(100vh - 60px);}
.au-page {width:min(1040px,100%);margin:0 auto;padding:40px 16px 30px;box-sizing:border-box;color:var(--tr-text);font-family:exo,arial;}
.au-shell {display:grid;grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);border-radius:22px;overflow:hidden;border:1px solid #2c3f5e;box-shadow:0 40px 100px rgba(0,0,0,0.6);background:#0b1422f2;}
.au-brand {position:relative;padding:40px 36px;background:linear-gradient(160deg,rgba(198,242,90,0.14),transparent 45%),linear-gradient(0deg,rgba(7,13,24,0.92),rgba(7,13,24,0.55)),url('img/stadium5.png') center/cover no-repeat;display:flex;flex-direction:column;}
.au-logo {height:56px;width:auto;display:block;margin-bottom:auto;}
.au-brand h2 {font-family:teko,exo,arial;font-weight:normal;text-transform:uppercase;font-size:52px;line-height:0.95;color:#fff;margin:40px 0 18px;text-shadow:0 4px 20px rgba(0,0,0,0.6);}
.au-benefits {list-style:none;margin:0;padding:0;display:grid;gap:12px;}
.au-benefits li {position:relative;padding-left:30px;font-size:15px;color:#d6dfeb;}
.au-benefits li::before {content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:50%;background:var(--tr-lime);}
.au-benefits li::after {content:"";position:absolute;left:5px;top:8px;width:7px;height:4px;border-left:2px solid #0b1422;border-bottom:2px solid #0b1422;transform:rotate(-45deg);}
.au-card {padding:36px 40px 34px;}
.au-title {font-family:teko,exo,arial !important;font-weight:normal !important;text-transform:uppercase;font-size:48px !important;line-height:0.95 !important;color:#fff !important;margin:0 0 8px !important;}
.au-sub {color:var(--tr-muted);font-size:15px;margin:0 0 20px;}
.au-text {color:#c9d4e4;font-size:15px;margin:0 0 12px;}
.au-email {color:var(--tr-lime);word-break:break-all;}
.au-form {display:grid;gap:16px;}
.au-field {display:grid;gap:6px;}
.au-field > span {font-size:12px;font-weight:bold;text-transform:uppercase;letter-spacing:0.06em;color:var(--tr-muted);}
.au-labelrow {display:flex;justify-content:space-between;align-items:baseline;gap:10px;}
.au-labelrow a {text-transform:none;letter-spacing:0;font-weight:normal;font-size:13px;color:var(--tr-skill);}
.au-field small {font-size:12px;color:var(--tr-muted);}
.au-page input.au-input {display:block;width:100%;height:auto;margin:0;padding:13px 14px;border:1px solid var(--tr-line);border-radius:12px;background:var(--tr-card);color:var(--tr-text);font-family:exo,arial;font-size:16px;outline:none;box-sizing:border-box;transition:border-color 0.2s,box-shadow 0.2s;}
.au-page input.au-input:focus {border-color:var(--tr-lime);box-shadow:0 0 0 3px rgba(198,242,90,0.15);}
.au-page input.au-input::placeholder {color:#5d6e87;}
.au-pass {position:relative;}
.au-pass .au-input {padding-right:74px !important;}
.au-eye {position:absolute;right:8px;top:50%;transform:translateY(-50%);border:1px solid var(--tr-line);background:#0b1422;color:var(--tr-muted);font-family:exo,arial;font-size:12px;font-weight:bold;border-radius:8px;padding:6px 10px;cursor:pointer;}
.au-eye:hover,.au-eye-on {color:var(--tr-lime);border-color:#3b4a2a;}
.au-check {display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:start;font-size:13px;line-height:1.45;color:#b9c6d8;cursor:pointer;}
.au-check input {width:20px;height:20px;margin:1px 0 0;accent-color:var(--tr-lime);cursor:pointer;}
.au-check a {color:var(--tr-skill);}
.au-page input.au-submit,.au-page a.au-submit {display:block;width:100%;height:auto;min-width:0;margin:6px 0 0;border:0;border-radius:12px;background:var(--tr-lime);color:#0b1422 !important;font-family:teko,exo,arial;font-weight:normal;font-size:24px;line-height:1.1;padding:13px 16px 9px;text-align:center;text-transform:uppercase;letter-spacing:0.04em;cursor:pointer;box-shadow:0 12px 28px rgba(198,242,90,0.2);text-decoration:none;box-sizing:border-box;}
.au-page input.au-submit:hover {background:var(--tr-lime);filter:brightness(1.07);}
.au-page input.au-submit:disabled {opacity:0.45;cursor:not-allowed;box-shadow:none;}
.au-alt {margin:20px 0 0;text-align:center;font-size:14px;color:var(--tr-muted);}
.au-alt a,.au-link {color:var(--tr-skill);font-weight:bold;}
.au-error {border:1px solid #5a2a33;background:rgba(255,107,125,0.1);color:#ffb3bd;border-radius:12px;padding:11px 14px;font-size:14px;margin-bottom:16px;}
.au-ok {border:1px solid #3b4a2a;background:rgba(198,242,90,0.08);color:var(--tr-lime);border-radius:12px;padding:11px 14px;font-size:14px;margin-bottom:16px;}
.au-errtext {color:#ffb3bd !important;min-height:1.2em;}
.au-note {margin-top:18px;border:1px solid var(--tr-line);background:var(--tr-card);border-radius:12px;padding:11px 14px;font-size:13px;color:#b9c6d8;}
.au-note b {color:#fff;margin-right:4px;}
.au-note a {color:var(--tr-skill);}
.au-actions {display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:22px;}
.au-actions .ot-btn {display:inline-block;text-decoration:none;font-size:18px;padding:9px 16px 6px;}
.au-actions .au-submit {width:auto !important;margin:0 !important;}
.au-mail {width:72px;height:72px;border-radius:20px;background:rgba(198,242,90,0.1);border:1px solid #3b4a2a;display:flex;align-items:center;justify-content:center;margin-bottom:18px;}
.au-mail img {width:44px;height:auto;}
.au-steps {list-style:none;margin:0 0 26px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;counter-reset:none;}
.au-steps li {position:relative;display:flex;flex-direction:column;gap:6px;font-size:11px;font-weight:bold;text-transform:uppercase;letter-spacing:0.04em;color:#5d6e87;padding-top:4px;}
.au-steps li::before {content:"";position:absolute;left:0;right:0;top:0;height:3px;border-radius:2px;background:#1b2a42;}
.au-steps li.au-done::before,.au-steps li.au-now::before {background:var(--tr-lime);}
.au-steps li span {display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;margin-top:6px;border-radius:50%;background:#1b2a42;color:var(--tr-muted);font-family:teko,exo,arial;font-size:15px;line-height:1;padding-top:2px;box-sizing:border-box;}
.au-steps li.au-now {color:#fff;}
.au-steps li.au-now span,.au-steps li.au-done span {background:var(--tr-lime);color:#0b1422;}
.au-steps li.au-done {color:var(--tr-lime);}
.au-foot {display:flex;justify-content:center;flex-wrap:wrap;gap:22px;margin-top:22px;font-size:13px;}
.au-foot a {color:var(--tr-muted);}
.au-foot a:hover {color:#fff;}
.au-privacy {width:min(1040px,100%);margin:0 auto 30px;box-sizing:border-box;color:#b9c6d8;font-size:13px;}
.au-choices {display:grid;gap:10px;}
.au-choice {display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;border-radius:12px;border:1px solid var(--tr-line);background:var(--tr-card);color:var(--tr-text) !important;text-decoration:none;transition:border-color 0.2s;}
.au-choice:hover {border-color:var(--tr-lime);}
.au-choice b {font-family:teko,exo,arial;font-weight:normal;font-size:24px;line-height:1;}
.au-choice small {color:var(--tr-muted);}
.au-regions {display:flex;flex-wrap:wrap;gap:8px;}
.au-region {display:flex;align-items:center;gap:7px;padding:8px 12px 8px 8px;border-radius:10px;border:1px solid var(--tr-line);background:var(--tr-card);cursor:pointer;font-size:13px;}
.au-region input {position:absolute;opacity:0;pointer-events:none;}
.au-region img {height:16px;width:auto;border-radius:2px;}
.au-region:has(input:checked) {border-color:var(--tr-lime);box-shadow:0 0 0 1px var(--tr-lime);color:#fff;}
.au-spinner {width:48px;height:48px;border-radius:50%;border:4px solid #1b2a42;border-top-color:var(--tr-lime);animation:au-spin 0.9s linear infinite;margin-bottom:20px;}
@keyframes au-spin {to {transform:rotate(360deg);}}

@media (max-width: 860px) {
    .au-shell {grid-template-columns:minmax(0,1fr);}
    .au-brand {padding:26px 24px;}
    .au-brand h2 {font-size:36px;margin:22px 0 12px;}
    .au-logo {height:44px;}
    .au-benefits {display:none;}
}
@media (max-width: 767px) {
    .au-page {padding:18px 12px 20px;}
    .au-card {padding:24px 20px 26px;}
    .au-title {font-size:38px !important;}
    .au-brand h2 {font-size:30px;margin:14px 0 0;}
    .au-steps li {font-size:9px;}
}
.au-check span,.au-region span {color:#c9d4e4;}
.au-region:has(input:checked) span {color:#fff;}
.au-page label.au-field,.au-page label.au-check {margin:0;padding:0;width:auto;text-align:left;}
.au-page label.au-region {margin:0;width:auto;}

/* ===== Dashboard (db-*) ===== */
.db-page {padding-top:4px;}
.db-banner {display:flex;align-items:center;gap:14px;background:var(--tr-panel);border:1px solid #3b4a2a;border-radius:12px;padding:12px 16px;margin-bottom:14px;font-size:14px;color:#c9d4e4;}
.db-banner img {height:30px;width:auto;}
.db-banner b {color:var(--tr-lime);margin-right:6px;}
.db-banner span {color:var(--tr-muted);margin-left:6px;}
.db-head {display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;}
.db-head h2 {margin:0 !important;font-size:26px !important;}
.db-head a {font-size:13px;color:var(--tr-skill) !important;text-decoration:none;}
.db-overview {display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1fr);gap:18px;margin-bottom:18px;align-items:stretch;}
.db-overview > .tr-panel {margin:0;}
/* to-do */
.db-todoitem {display:grid;grid-template-columns:10px minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 10px;margin:0 -10px;border-radius:10px;text-decoration:none;color:var(--tr-text) !important;font-size:14px;line-height:1.3;border-top:1px solid #18253a;}
.db-todoitem:first-of-type {border-top:0;}
.db-todoitem:hover {background:#13203a;}
.db-todoitem i {width:10px;height:10px;border-radius:50%;}
.db-sev1 i {background:var(--tr-coral);box-shadow:0 0 8px var(--tr-coral);}
.db-sev2 i {background:var(--tr-amber);}
.db-sev3 i {background:var(--tr-skill);}
.db-todoitem em {font-style:normal;font-size:12px;color:var(--tr-skill);white-space:nowrap;}
.db-allgood {display:flex;flex-direction:column;gap:4px;padding:18px 16px;border-radius:12px;background:rgba(198,242,90,0.08);border:1px solid #3b4a2a;}
.db-allgood b {color:var(--tr-lime);font-size:16px;}
.db-allgood span {color:var(--tr-muted);font-size:13px;}
/* squad */
.db-squadtop {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:14px;}
.db-squadtop > div {background:var(--tr-card);border:1px solid var(--tr-line);border-radius:10px;padding:8px 10px;}
.db-squadtop .tr-statlabel {font-size:10px;}
.db-squadtop b {display:block;font-family:teko,exo,arial;font-weight:normal;font-size:30px;line-height:1;color:#fff;margin-top:2px;}
.db-squadtop b small {font-size:16px;color:var(--tr-muted);}
.db-squad .tr-meterrow {margin-bottom:10px;}
/* league */
.db-pos {display:flex;align-items:center;gap:16px;margin-bottom:12px;}
.db-posbig {display:flex;flex-direction:column;align-items:center;justify-content:center;width:74px;height:74px;border-radius:18px;background:linear-gradient(135deg,rgba(198,242,90,0.2),rgba(198,242,90,0.04));border:1px solid #3b4a2a;}
.db-posbig b {font-family:teko,exo,arial;font-weight:normal;font-size:44px;line-height:0.9;color:var(--tr-lime);}
.db-posbig span {font-size:10px;text-transform:uppercase;color:var(--tr-muted);}
.db-posinfo {display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--tr-muted);}
.db-posinfo b {font-family:teko,exo,arial;font-weight:normal;font-size:28px;line-height:1;color:#fff;}
.db-form {display:flex;gap:6px;margin:4px 0 14px;}
.db-res {width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:teko,exo,arial;font-size:20px;line-height:1;padding-top:3px;box-sizing:border-box;text-decoration:none;color:#0b1422 !important;}
.db-res-W {background:var(--tr-lime);}
.db-res-D {background:#8496b0;}
.db-res-L {background:var(--tr-coral);color:#fff !important;}
.db-fixture {display:grid;grid-template-columns:70px 26px minmax(0,1fr) auto;gap:10px;align-items:center;padding:7px 0;border-top:1px solid #18253a;text-decoration:none;color:var(--tr-text) !important;font-size:13px;}
.db-fixture:first-of-type {border-top:0;}
.db-fixture img {height:24px;width:auto;}
.db-fxday {color:var(--tr-muted);font-size:12px;}
.db-fxname {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.db-fxname small {color:var(--tr-muted);}
.db-ha {font-size:10px;font-weight:bold;border:1px solid var(--tr-line);border-radius:4px;padding:2px 6px;color:var(--tr-muted);}
.db-league .tr-statlabel {margin-top:2px;}

/* main grid */
.db-grid {display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:18px;align-items:start;}
.db-main,.db-side {min-width:0;}
.db-page .present {margin:0 0 18px;padding:20px 22px;box-shadow:none;color:var(--tr-text);text-align:left;}
.db-page .present.center {text-align:center;}
.db-page .present h1 {font-family:teko,exo,arial;font-weight:normal;text-transform:uppercase;letter-spacing:0.03em;font-size:28px;line-height:1;margin:0 0 12px;color:#fff;}
.db-page .present h2 {font-size:18px;line-height:1.25;margin:4px 0 8px;}
.db-page .present h3 {font-size:15px;margin:2px 0 6px;color:#c9d4e4;}
.db-page .present h4 {font-size:12px;color:var(--tr-muted);margin:8px 0 2px;}
.db-page .present p {color:#b9c6d8;font-size:14px;}
.db-page .present label {color:var(--tr-muted);font-size:11px;text-transform:uppercase;letter-spacing:0.05em;}
.db-page .present i.fa-solid {display:none;}
.db-page .present a:not(.knap):not(.ot-btn):not(.tr-btn) {color:var(--tr-skill);}
.db-page .knap {display:inline-block;background:var(--tr-card);background-image:none;border:1px solid var(--tr-line);border-radius:10px;box-shadow:none;color:#fff !important;font-family:teko,exo,arial;font-weight:normal;font-size:18px;text-transform:uppercase;letter-spacing:0.04em;padding:8px 14px 5px;margin:4px 3px;text-decoration:none;width:auto;min-width:0;line-height:1.1;transition:border-color 0.2s;}
.db-page .knap:hover {border-color:var(--tr-skill);background:#15233a;}
.db-page .knap.greenknap,.db-page .knap.colgreen,.db-page .greeninfo .knap:first-of-type {background:var(--tr-lime);border-color:var(--tr-lime);color:#0b1422 !important;}
.db-page .knap.red {border-color:#5a2a33;color:var(--tr-coral) !important;}
.db-page .greeninfo {background:linear-gradient(160deg,rgba(198,242,90,0.10),transparent 55%),var(--tr-panel);border:1px solid #3b4a2a;box-shadow:none;}
.db-page .greeninfo .mcol2 {width:50%;float:left;padding:4px;box-sizing:border-box;}
.db-page .present table {width:100%;border-collapse:collapse;}
.db-page .present table td,.db-page .present table th {padding:6px;border-bottom:1px solid #18253a;font-size:13px;}
.db-page .ot-table td.ot-n .ot-btn {display:inline-block;font-size:15px;padding:6px 10px 4px;text-decoration:none;}
.db-click {cursor:pointer;}
.db-page .smalltxt {font-size:11px;color:var(--tr-muted);}
/* latest result */
.db-scoreline {display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;margin:8px 0 12px;}
.db-team img {height:56px;width:auto;}
.db-team h3 {margin:6px 0 0 !important;font-size:15px !important;color:#fff !important;}
.db-scorebox h1 {font-size:48px !important;margin:0 !important;color:var(--tr-lime) !important;}
.db-cups {display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.db-cups .present {margin:0 0 18px;}
/* side */
.db-inbox {margin-bottom:18px;}
.db-mail {display:block;padding:10px 10px 10px 14px;margin:0 -10px;border-radius:10px;border-top:1px solid #18253a;text-decoration:none;color:var(--tr-text) !important;position:relative;}
.db-mail:first-of-type {border-top:0;}
.db-mail:hover {background:#13203a;}
.db-mail-new::before {content:"";position:absolute;left:3px;top:16px;width:6px;height:6px;border-radius:50%;background:var(--tr-lime);}
.db-mail b {display:block;font-size:14px;line-height:1.3;}
.db-mail-new b {color:#fff;}
.db-mail span {display:block;font-size:11px;color:var(--tr-muted);margin-top:2px;}
.db-mail small {display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12px;color:#8fa0b8;margin-top:3px;}
.db-newsitem {padding:8px 0;border-top:1px solid #18253a;}
.db-newsitem:first-of-type {border-top:0;}
.db-newsitem h2 {font-size:15px !important;margin:0 0 4px !important;}
.db-newsitem p {margin:0;font-size:13px !important;}
.db-more {display:inline-block;margin-top:8px;font-size:13px;}
.db-bday {display:flex;justify-content:space-between;padding:6px 0;border-top:1px solid #18253a;font-size:14px;}
.db-bday span {color:var(--tr-muted);}
/* lower part */
.db-lower {display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start;margin-top:4px;}
.db-col {min-width:0;}
.db-table .ot-table td,.db-table .ot-table th {padding:5px 6px;}
.db-prizes {display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--tr-line);}
.db-prizes > div {display:flex;align-items:center;gap:6px;}
.db-prizes img {height:26px;width:auto;}
.db-prizes b {font-family:teko,exo,arial;font-weight:normal;font-size:20px;color:#fff;}
.db-rank {width:24px;color:var(--tr-muted);font-family:teko,exo,arial;font-size:18px;}
.db-goals {font-family:teko,exo,arial;font-weight:normal;font-size:22px;color:var(--tr-lime);}
.db-trade {display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;align-items:center;padding:8px 0;border-top:1px solid #18253a;font-size:13px;}
.db-trade:first-of-type {border-top:0;}
.db-trade .cardimgsmall {width:64px;height:64px;overflow:hidden;border-radius:10px;margin:0;float:none;}
.db-mytrophies:not(:has(.trophybox)) {display:none;}

@media (max-width: 1100px) {
    .db-overview {grid-template-columns:1fr 1fr;}
    .db-todo {grid-column:1 / -1;}
    .db-lower {grid-template-columns:1fr 1fr;}
    .db-table {grid-column:1 / -1;}
}
@media (max-width: 860px) {
    .db-overview,.db-grid,.db-lower {grid-template-columns:minmax(0,1fr);}
    .db-cups {grid-template-columns:1fr;}
}
@media (max-width: 767px) {
    .db-squadtop {grid-template-columns:repeat(2,minmax(0,1fr));}
    .db-page .present {padding:16px;}
}
.db-page .present h2,.db-page .present h3,.db-page .present h4 {font-family:exo,arial;text-transform:none;letter-spacing:0;font-weight:bold;}
.db-page .present > h2:first-child {font-family:teko,exo,arial;font-weight:normal;text-transform:uppercase;letter-spacing:0.03em;font-size:24px;line-height:1;margin:0 0 10px;}
.db-leaverow {padding:7px 0;border-top:1px solid #18253a;font-size:14px;color:#b9c6d8;}
.db-leaverow:first-of-type {border-top:0;}

/* ===== Dashboard: next match hero (keeps the old layout, new look) ===== */
.nm-forecastbar {display:none;}
#nextmatch.db-hero {display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:26px;align-items:center;width:auto;min-height:0;margin:0 0 18px;padding:24px 28px;text-align:center;border-radius:18px;border:1px solid #2c3f5e;background:linear-gradient(90deg,rgba(7,13,24,0.86),rgba(7,13,24,0.5) 50%,rgba(7,13,24,0.86)),url('img/matchday.jpg') center/cover no-repeat;box-shadow:0 24px 60px rgba(0,0,0,0.5);text-shadow:0 2px 10px rgba(0,0,0,0.6);color:var(--tr-text);font-family:exo,arial;}
#nextmatch.db-hero > .col2 {width:auto;float:none;padding:0;margin:0;}
#nextmatch.db-hero > .clearfix {display:none;}
/* match side */
.db-hero-match {display:grid;grid-template-columns:1fr 1fr;gap:4px 44px;align-items:start;}
.db-hero-match > h1,.db-hero-match > h3,.db-hero-match > h2 {grid-column:1 / -1;margin:0 !important;}
.db-hero-match > h1 {font-family:teko,exo,arial !important;font-weight:normal !important;text-transform:uppercase;letter-spacing:0.03em;font-size:34px !important;line-height:1 !important;color:#fff !important;}
.db-hero-match > h3,.db-hero-match > h2 {font-family:exo,arial !important;font-size:12px !important;font-weight:bold !important;text-transform:uppercase;letter-spacing:0.14em;color:var(--tr-lime) !important;margin-bottom:12px !important;}
.db-hero-match > .col2 {width:auto !important;float:none !important;padding:0 !important;margin:0 !important;position:relative;}
.db-hero-match > .col2:nth-of-type(1)::after {content:"VS";position:absolute;right:-36px;top:34px;width:28px;font-family:teko,exo,arial;font-size:22px;color:var(--tr-muted);}
.db-hero-match > .col2:nth-of-type(1) img,.db-hero-match > .col2:nth-of-type(2) img {height:66px !important;width:auto;filter-drop:none;}
.db-hero-match > .col2 h2 {font-family:teko,exo,arial !important;font-weight:normal !important;text-transform:uppercase;letter-spacing:0.02em;font-size:28px !important;line-height:1 !important;margin:8px 0 4px !important;color:#fff;}
.db-hero-match > .col2 h2 a {color:#fff !important;text-decoration:none;}
.db-hero-match > .col2 .highlight {display:inline-block;font-size:11px;font-weight:bold;text-transform:uppercase;letter-spacing:0.06em;color:var(--tr-lime);border:1px solid #3b4a2a;border-radius:999px;padding:2px 9px;text-shadow:none;}
.db-hero-match > .col2:nth-of-type(3),.db-hero-match > .col2:nth-of-type(4) {margin-top:8px !important;}
.db-hero-match .shapewin,.db-hero-match .shapelost,.db-hero-match .shapedraw {width:22px;height:22px;padding:0;margin:0 2px;border-radius:6px;font-family:teko,exo,arial;font-size:15px;line-height:24px;box-sizing:border-box;}
.db-hero-match .shapewin {background:var(--tr-lime);color:#0b1422;}
.db-hero-match .shapelost {background:var(--tr-coral);color:#fff;}
.db-hero-match .shapedraw {background:#8496b0;color:#0b1422;}
.db-hero-match > .col2:nth-of-type(5),.db-hero-match > .col2:nth-of-type(6) {margin-top:14px !important;font-size:15px;color:#fff;}
.db-hero-match label {display:block;font-size:11px;text-transform:uppercase;letter-spacing:0.08em;color:var(--tr-muted) !important;margin:0 0 3px;padding:0;text-shadow:none;}
.db-hero .nm-forecastbar {display:block;height:6px;border-radius:3px;background:var(--tr-coral);overflow:hidden;margin:6px auto 0;max-width:160px;}
.db-hero .nm-forecastbar i {display:block;height:100%;background:var(--tr-lime);}
/* action side */
.db-hero-side {display:flex;flex-direction:column;align-items:stretch;gap:10px;}
.db-hero-label {font-size:12px;font-weight:bold;text-transform:uppercase;letter-spacing:0.14em;color:var(--tr-lime);}
#nextmatch.db-hero #realtime {font-family:teko,exo,arial;font-size:54px;line-height:0.95;color:#fff;margin:0 0 6px;}
.db-hero-btns {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
.db-hbtn {display:block;padding:10px 12px 7px;border-radius:10px;background:rgba(11,20,34,0.82);border:1px solid #2c3f5e;color:#fff !important;font-family:teko,exo,arial;font-size:20px;line-height:1.1;text-transform:uppercase;letter-spacing:0.04em;text-decoration:none !important;text-shadow:none;cursor:pointer;transition:border-color 0.2s,background-color 0.2s,transform 0.2s;}
.db-hbtn:hover {border-color:var(--tr-skill);background:rgba(21,35,58,0.95);transform:translateY(-1px);}
.db-hbtn-main {background:var(--tr-lime);border-color:var(--tr-lime);color:#0b1422 !important;}
.db-hbtn-main:hover {background:var(--tr-lime);border-color:var(--tr-lime);filter:brightness(1.07);}
.db-boost {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:4px;padding:10px 12px;border-radius:12px;background:rgba(255,194,74,0.10);border:1px solid #6b5320;text-align:left;text-shadow:none;}
.db-boosttext b {display:block;font-size:14px;color:#fff;}
.db-boosttext span {font-size:12px;color:var(--tr-amber);}
.db-boostbtn {display:flex;align-items:center;gap:8px;flex-shrink:0;border-color:var(--tr-amber);}
.db-boostbtn .coinprice {display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:#ffcc00;color:#0b1422;font-family:exo,arial;font-size:12px;font-weight:bold;margin:0;padding:0;float:none;}
.db-boost-on {justify-content:center;gap:8px;color:var(--tr-amber);}
.db-boost-on img {height:22px;width:auto;}
#boost h2 {font-size:15px !important;margin:0 0 6px !important;}
/* new season variant */
#nextmatch.db-hero-season {display:block;}
#nextmatch.db-hero-season h1 {font-family:teko,exo,arial;font-weight:normal;text-transform:uppercase;font-size:40px;color:#fff;margin:0 0 6px;}

@media (max-width: 900px) {
    #nextmatch.db-hero {grid-template-columns:minmax(0,1fr);padding:20px 16px;gap:18px;}
    .db-hero-match {gap:4px 30px;}
    .db-hero-match > .col2:nth-of-type(1)::after {right:-26px;}
    .db-hero-match > .col2 h2 {font-size:22px !important;}
    #nextmatch.db-hero #realtime {font-size:42px;}
}
/* Stadium: result of "Build stadium" */
.st-notice {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 16px;align-items:center;margin:0 0 16px;padding:14px 18px;border-radius:12px;background:var(--tr-panel);border:1px solid var(--tr-line);font-family:exo,arial;}
.st-notice b {font-size:16px;color:#fff;}
.st-notice span {grid-column:1;font-size:14px;color:#c9d4e4;}
.st-notice .ot-btn {grid-column:2;grid-row:1 / span 2;font-size:17px;padding:7px 14px 5px;}
.st-notice-ok {border-color:#3b4a2a;background:linear-gradient(90deg,rgba(198,242,90,0.12),transparent 70%),var(--tr-panel);}
.st-notice-ok b {color:var(--tr-lime);}
.st-notice-bad {border-color:#5a2a33;background:linear-gradient(90deg,rgba(255,107,125,0.12),transparent 70%),var(--tr-panel);}
.st-notice-bad b {color:#ffb3bd;}
.st-crane-in {animation:st-crane-drop 0.7s cubic-bezier(.2,1.4,.4,1) both;}
@keyframes st-crane-drop {from {opacity:0;transform:translateY(-30px);} to {opacity:1;transform:none;}}
@media (prefers-reduced-motion: reduce) {.st-crane-in {animation:none;}}

/* ===== Player cards inside new-design pages keep their own dark-on-light text ===== */
.tr-page .playercard,.tr-page .present .playercard {color:#000 !important;text-align:center;}
.tr-page .playercard label {color:#00000070 !important;font-family:exo,arial,sans-serif !important;font-size:11px !important;font-weight:bold !important;text-transform:uppercase !important;letter-spacing:0 !important;margin:4px 0 0 !important;padding:0 !important;text-shadow:none !important;}
.tr-page .playercard h1,.tr-page .playercard h2,.tr-page .playercard h3,.tr-page .playercard h4,.tr-page .playercard p,.tr-page .playercard span:not([class*="txt"]):not(.statframe) {color:#000 !important;text-shadow:none !important;}
.tr-page .playercard h1,.tr-page .playercard h2,.tr-page .playercard h3,.tr-page .playercard h4 {font-family:exo,arial,sans-serif !important;text-transform:none !important;letter-spacing:0 !important;}
.tr-page .playercard h3 {font-size:16px !important;font-weight:normal !important;margin:2px 0 0 !important;}
.tr-page .playercard h3 small {color:#00000080 !important;}
.tr-page .playercard a,.tr-page .present .playercard a:not(.knap) {color:#000 !important;}
.tr-page .playercard .txtgreen {color:#008800 !important;}
.tr-page .playercard .txtorange {color:#cc6600 !important;}

/* ===== Club analysis (an-*) ===== */
.an-row {align-items:stretch;}
.an-row > .tr-panel {margin-bottom:18px;}
.an-head {display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:6px 12px;margin-bottom:12px;}
.an-head h2 {margin:0 !important;}
.an-head .tr-note {margin:0;}
.an-clubhead {display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:center;margin-bottom:18px;}
.an-clubhead h2 {font-size:44px !important;margin:2px 0 0 !important;overflow-wrap:anywhere;}
.an-tiles {display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px;}
.an-tiles > div {background:var(--tr-card);border:1px solid var(--tr-line);border-radius:12px;padding:10px 14px;}
.an-tiles b {display:block;font-family:teko,exo,arial;font-weight:normal;font-size:40px;line-height:1;color:#fff;}
.an-tiles small {font-size:12px;color:var(--tr-muted);}
.an-radarbox {display:flex;flex-direction:column;}
.an-radar {width:100%;max-width:420px;margin:0 auto;display:block;overflow:visible;}
.an-ring {fill:none;stroke:#1f2e47;stroke-width:1;}
.an-axis {stroke:#1f2e47;stroke-width:1;}
.an-div {fill:rgba(76,201,255,0.10);stroke:var(--tr-skill);stroke-width:1.5;stroke-dasharray:4 3;}
.an-xi {fill:rgba(198,242,90,0.22);stroke:var(--tr-lime);stroke-width:2.5;stroke-linejoin:round;}
.an-label {fill:#8496b0;font-family:exo,arial,sans-serif;font-size:11px;font-weight:bold;text-transform:uppercase;letter-spacing:0.04em;}
.ec-legend i.an-lg-xi {background:var(--tr-lime);}
.ec-legend i.an-lg-div {background:var(--tr-skill);}
.an-radarbox .ec-legend {justify-content:center;}
.an-tip {margin:0 -10px;cursor:default;}
.an-tip a {font-size:12px;color:var(--tr-skill) !important;white-space:nowrap;}
.an-tablewrap {overflow-x:auto;}
.an-table td,.an-table th {white-space:nowrap;}
.an-table td b {font-family:teko,exo,arial;font-weight:normal;font-size:20px;}
.an-barcol {width:34%;min-width:120px;}
.an-bar {position:relative;height:8px;border-radius:4px;background:#1b2a42;}
.an-bar i {position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:var(--tr-skill);}
.an-bar i.an-up {background:var(--tr-lime);}
.an-bar i.an-down {background:var(--tr-coral);}
.an-bar s {position:absolute;top:-4px;bottom:-4px;width:2px;background:#fff;opacity:0.8;transform:translateX(-50%);text-decoration:none;}
td.an-up b {color:var(--tr-lime);}
td.an-down b {color:var(--tr-coral);}
.an-muted {color:var(--tr-muted);}
.an-lines {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;}
.an-line {margin:0;display:flex;flex-direction:column;gap:4px;border-top:3px solid var(--pos);}
.an-line .pl-postag {align-self:flex-start;margin:0 0 4px;}
.an-line b {font-family:teko,exo,arial;font-weight:normal;font-size:48px;line-height:0.95;color:#fff;}
.an-line small {font-size:12px;color:var(--tr-muted);}
.an-line em {font-style:normal;font-size:13px;font-weight:bold;}
.an-weak {border-color:var(--tr-coral);box-shadow:0 0 0 1px var(--tr-coral);}

@media (max-width: 900px) {
    .an-lines {grid-template-columns:1fr 1fr;}
}
@media (max-width: 767px) {
    .an-clubhead h2 {font-size:32px !important;}
    .an-clubhead .ot-crest {width:80px;height:80px;}
}

/* Dashboard pop-ups (club name, e-mail, nickname) */
.db-modal .tr-note {margin:0 0 12px;}
.db-modal form {display:grid;gap:12px;}
.db-modal .ec-modalfoot {margin-top:4px;}
.db-modalcrest {display:flex;align-items:center;gap:14px;background:var(--tr-card);border:1px solid var(--tr-line);border-radius:12px;padding:10px 14px;margin-bottom:12px;}
.db-modalcrest img {height:48px;width:auto;}
.db-modalcrest b {display:block;font-family:teko,exo,arial;font-weight:normal;font-size:28px;line-height:1;color:#fff;margin-top:2px;}
.db-modal .au-check {display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:start;font-size:13px;color:#c9d4e4;cursor:pointer;}
.db-modal .au-check input {width:20px;height:20px;margin:1px 0 0;accent-color:var(--tr-lime);}
.db-modal .au-check small {color:var(--tr-muted);}
.db-modal .au-check a {color:var(--tr-skill);}
.db-privacy {max-height:40vh;overflow:auto;margin-top:12px;padding:12px;border:1px solid var(--tr-line);border-radius:10px;background:var(--tr-card);font-size:12px;color:#b9c6d8;}
.db-verify {display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;margin:0 auto 16px;padding:12px 16px;border-radius:12px;background:linear-gradient(90deg,rgba(76,201,255,0.12),transparent 70%),var(--tr-panel);border:1px solid #1f4a63;font-family:exo,arial;}
.db-verify img {width:36px;height:auto;}
.db-verify b {display:block;color:#fff;font-size:15px;}
.db-verify span {font-size:13px;color:#b9c6d8;}
.db-verify .ot-btn {display:inline-block;text-decoration:none;font-size:17px;padding:7px 12px 5px;}
@media (max-width: 767px) {.db-verify {grid-template-columns:auto minmax(0,1fr);} .db-verify .ot-btn {grid-column:1 / -1;}}

/* ===== Player card (pcard-*) - playercard() ===== */
.pcard {--edge1:#f3d27a;--edge2:#a8791c;--glow:rgba(243,210,122,0.32);--sheen:rgba(243,210,122,0.16);position:relative;display:block;width:240px;max-width:100%;height:390px;margin:0 auto 12px;perspective:1200px;font-family:exo,arial,sans-serif;color:var(--tr-text);text-align:left;line-height:1.3;text-shadow:none;}
.pcard-silver {--edge1:#eef2f7;--edge2:#8391a6;--glow:rgba(220,228,240,0.22);--sheen:rgba(220,228,240,0.12);}
.pcard-bronze {--edge1:#e2a86f;--edge2:#7c4a22;--glow:rgba(226,168,111,0.2);--sheen:rgba(226,168,111,0.10);}
.pcard-inner {position:relative;width:100%;height:100%;transition:transform 0.6s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d;}
.pcard-flip .pcard-inner {transform:rotateY(180deg);}
.pcard-face {position:absolute;inset:0;display:flex;flex-direction:column;border-radius:18px;padding:12px 14px;box-sizing:border-box;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;
  background:linear-gradient(160deg,var(--sheen),transparent 38%),radial-gradient(circle at 50% 30%,#1b2b46,#0b1422 70%);
  box-shadow:0 0 0 2px var(--edge2),0 18px 40px rgba(0,0,0,0.5),0 0 24px var(--glow);}
.pcard-face::before {content:"";position:absolute;inset:0;border-radius:18px;padding:2px;background:linear-gradient(135deg,var(--edge1),var(--edge2) 45%,var(--edge1) 70%,var(--edge2));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;}
.pcard-front::after {content:"";position:absolute;top:-60%;left:-60%;width:60%;height:220%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.10),transparent);transform:rotate(20deg);transition:left 0.8s;pointer-events:none;}
.pcard:hover .pcard-front::after {left:130%;}
.pcard-back {transform:rotateY(180deg);}
.pcard-flipbtn {position:absolute;right:10px;bottom:8px;z-index:5;width:26px;height:26px;border-radius:50%;border:1px solid color-mix(in srgb,var(--edge1) 45%,transparent);background:rgba(11,20,34,0.85);color:var(--edge1);font-size:15px;line-height:1;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform 0.2s;}
.pcard-flipbtn:hover {transform:rotate(60deg);}
.pcard-top {display:flex;justify-content:space-between;align-items:flex-start;position:relative;z-index:2;}
.pcard-rating {display:flex;flex-direction:column;align-items:center;gap:3px;}
.pcard-rating b {font-family:teko,exo,arial,sans-serif;font-weight:normal;font-size:50px;line-height:0.8;color:var(--edge1);text-shadow:0 2px 12px rgba(0,0,0,0.6);}
.pcard-pos {font-size:11px;font-weight:bold;border-radius:5px;padding:2px 6px;color:var(--pos);background:color-mix(in srgb,var(--pos) 18%,transparent);}
.pcard-side {font-size:10px;font-weight:bold;color:var(--tr-muted);letter-spacing:0.08em;}
.pcard-flags {display:flex;flex-direction:column;align-items:flex-end;gap:6px;}
.pcard-flags img {height:13px;width:auto;border-radius:2px;}
.pcard-talent img {height:16px;width:auto;}
.pcard-portrait {position:absolute;left:50%;top:26px;transform:translateX(-50%);width:128px;height:128px;z-index:1;filter:drop-shadow(0 10px 14px rgba(0,0,0,0.6));}
.pcard-status {position:absolute;left:12px;right:12px;top:150px;display:flex;justify-content:center;flex-wrap:wrap;gap:5px;z-index:3;}
.pcard-status span {font-size:10px;font-weight:bold;text-transform:uppercase;letter-spacing:0.05em;border-radius:999px;padding:3px 8px;line-height:1;}
.pcard-inj {background:var(--tr-coral);color:#fff;}
.pcard-ban {background:#1b0b10;color:#ffb3bd;border:1px solid var(--tr-coral);}
.pcard-sale {background:var(--tr-amber);color:#0b1422;}
.pcard-bids {background:var(--tr-lime);}
.pcard-xi {background:#0b1422;color:var(--tr-lime);border:1px solid var(--tr-lime);}
.pcard-sub {background:#0b1422;color:var(--tr-amber);border:1px solid #6b5320;}
.pcard .pcard-name {position:relative;z-index:2;margin:118px 0 0 !important;padding:0;text-align:center;font-family:teko,exo,arial,sans-serif !important;font-weight:normal !important;text-transform:uppercase;font-size:18px !important;line-height:1 !important;color:#c9d4e4 !important;letter-spacing:0.02em;}
.pcard .pcard-name b {display:block;font-weight:normal;font-size:28px;color:#fff;}
.pcard-club {display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px;font-size:11px;color:var(--tr-muted);margin-top:3px;text-align:center;}
.pcard-club a {color:var(--tr-skill) !important;text-decoration:none;}
.pcard-club small {font-size:10px;}
.pcard-stats {display:grid;grid-template-columns:repeat(3,1fr);gap:4px 6px;margin-top:10px;padding-top:9px;border-top:1px solid color-mix(in srgb,var(--edge1) 30%,transparent);}
.pcard-stats div {display:flex;align-items:baseline;justify-content:center;gap:5px;}
.pcard-stats b {font-family:teko,exo,arial,sans-serif;font-weight:normal;font-size:24px;line-height:1;}
.pcard-stats span {font-size:10px;font-weight:bold;letter-spacing:0.06em;color:var(--tr-muted);}
.pcard-good {color:var(--tr-lime) !important;}
.pcard-mid {color:var(--tr-amber) !important;}
.pcard-bad {color:var(--tr-coral) !important;}
.pcard-foot {margin-top:auto;padding:8px 30px 0 0;display:flex;justify-content:space-between;gap:6px;font-size:11px;color:#8fa0b8;}
.pcard-backhead {display:flex;align-items:center;gap:10px;padding-bottom:8px;border-bottom:1px solid color-mix(in srgb,var(--edge1) 30%,transparent);}
.pcard-backhead b {font-family:teko,exo,arial,sans-serif;font-weight:normal;font-size:40px;line-height:0.9;color:var(--edge1);}
.pcard .pcard-backhead h3 {margin:0 !important;font-family:teko,exo,arial,sans-serif !important;font-weight:normal !important;text-transform:uppercase;font-size:20px !important;line-height:1 !important;color:#fff !important;}
.pcard-backhead span {font-size:11px;color:var(--tr-muted);}
.pcard-list {display:grid;grid-template-columns:1fr auto;gap:3px 10px;margin:8px 0 0;padding-right:0;font-size:11.5px;line-height:1.35;}
.pcard-list dt {color:var(--tr-muted);margin:0;}
.pcard-list dd {margin:0;text-align:right;color:#fff;font-weight:bold;}
.pcard-list small {color:var(--tr-muted);font-weight:normal;}
.pcard-leave {display:grid;gap:4px;max-width:240px;margin:0 auto 12px;padding:10px 12px;border-radius:12px;border:1px solid #6b5320;background:rgba(255,194,74,0.08);font-family:exo,arial;text-align:center;}
.pcard-leave b {color:var(--tr-amber);font-size:13px;}
.pcard-leave span {font-size:12px;color:#c9d4e4;}
.pcard-leave .ot-btn {display:inline-block;justify-self:center;font-size:16px;padding:5px 12px 3px;text-decoration:none;}
/* old contexts */
.news .pcard {float:right;margin-left:12px;}
.ml-player .pcard {margin:0;}
a .pcard,a:hover .pcard {text-decoration:none;}
/* Dashboard scout boxes: room under the card for its shadow, and the buttons drawn above it */
.myslide .pcard,#scouttip .pcard {margin-bottom:26px;}
.myslide .bidbutton,#scouttip .knap {position:relative;z-index:1;}
/* Squad page: play-in verdict badge, hints and new in club */
.sq-badge {display:inline-flex;align-items:center;gap:7px;padding:4px 12px;border-radius:999px;font-size:13px;font-weight:600;line-height:1.3;border:1px solid var(--lvl);color:var(--lvl);background:color-mix(in srgb,var(--lvl) 12%,transparent);white-space:nowrap;cursor:help;}
.sq-badge::before {content:"";width:8px;height:8px;border-radius:50%;background:currentColor;}
.sq-badge-1 {--lvl:var(--tr-coral);}
.sq-badge-2 {--lvl:var(--tr-amber);}
.sq-badge-3 {--lvl:var(--tr-lime);}
.sq-badge-4 {--lvl:var(--tr-lime);background:var(--tr-lime);color:#0b1422;}
.sq-hint {cursor:help;border-bottom:1px dotted var(--tr-muted);}
.sq-newlist {display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.sq-newlist span {border:1px solid var(--tr-line);border-radius:999px;padding:3px 10px;font-size:12px;color:var(--tr-text);}
.sq-newlist em {font-style:normal;font-weight:700;margin-left:5px;color:var(--lvl);}

/* ===== Game guide / rules (wk-*) ===== */
.wk-hero {display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px;align-items:end;margin:6px 0 20px;}
.wk-hero h1 {font-size:60px !important;margin:4px 0 8px !important;text-shadow:0 2px 12px #000;}
.wk-hero p {color:#c9d4e4;font-size:16px;margin:0;max-width:640px;}
.wk-search input {display:block;width:100%;box-sizing:border-box;height:auto;margin:0;padding:13px 16px;border:1px solid var(--tr-line);border-radius:12px;background:var(--tr-panel);color:var(--tr-text);font-family:exo,arial;font-size:15px;outline:none;}
.wk-search input:focus {border-color:var(--tr-lime);}
.wk-search .tr-note {display:block;margin-top:6px;}
.wk-layout {display:grid;grid-template-columns:220px minmax(0,1fr);gap:22px;align-items:start;}
.wk-toc {position:sticky;top:70px;display:flex;flex-direction:column;gap:2px;background:var(--tr-panel);border:1px solid var(--tr-line);border-radius:14px;padding:14px;}
.wk-toc .tr-statlabel {margin-bottom:6px;}
.wk-toc a {display:block;padding:6px 10px;border-radius:8px;font-size:14px;color:#c9d4e4 !important;text-decoration:none;border-left:2px solid transparent;}
.wk-toc a:hover {background:#13203a;color:#fff !important;}
.wk-toc a.wk-on {border-left-color:var(--tr-lime);color:#fff !important;background:#13203a;}
.wk-toc a.wk-dim {opacity:0.35;}
.wk-main {min-width:0;}
.wk-sec {scroll-margin-top:70px;}
.wk-sec h2 {font-size:36px !important;margin:0 0 12px !important;}
.wk-lead {font-size:16px;color:#c9d4e4;line-height:1.6;margin:0 0 16px;}
.wk-sec a:not(.ot-btn) {color:var(--tr-skill) !important;}
.wk-items {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.wk-item {background:var(--tr-card);border:1px solid var(--tr-line);border-radius:12px;padding:14px 16px;}
.wk-item h3 {font-family:exo,arial !important;text-transform:none !important;letter-spacing:0 !important;font-weight:bold !important;font-size:15px !important;color:#fff !important;margin:0 0 6px !important;line-height:1.3 !important;}
.wk-item p {margin:0;font-size:14px;line-height:1.55;color:#b9c6d8;}
.wk-item img {height:14px;width:auto;vertical-align:-2px;}
.wk-steps {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:16px;}
.wk-steps > div {background:linear-gradient(160deg,rgba(198,242,90,0.10),transparent 60%),var(--tr-card);border:1px solid var(--tr-line);border-radius:12px;padding:12px 14px;}
.wk-steps b {display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--tr-lime);color:#0b1422;font-family:teko,exo,arial;font-weight:normal;font-size:17px;line-height:1;padding-top:2px;box-sizing:border-box;}
.wk-steps h4 {font-family:exo,arial;font-size:14px;color:#fff;margin:8px 0 4px;}
.wk-steps p {margin:0;font-size:13px;line-height:1.45;color:#b9c6d8;}
.wk-facts {display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:16px;}
.wk-facts > div {background:var(--tr-card);border:1px solid var(--tr-line);border-radius:12px;padding:12px 14px;}
.wk-facts b {display:block;font-family:teko,exo,arial;font-weight:normal;font-size:30px;line-height:1;color:var(--tr-lime);}
.wk-facts span {font-size:12px;color:var(--tr-muted);}
.wk-attrs {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:14px;}
.wk-attrs > div {border-left:3px solid var(--tr-skill);background:var(--tr-card);border-radius:0 10px 10px 0;padding:10px 12px;}
.wk-attrs h4 {font-family:exo,arial;font-size:14px;color:#fff;margin:0 0 4px;}
.wk-attrs p {margin:0;font-size:13px;line-height:1.45;color:#b9c6d8;}
.wk-attrs img {height:13px;width:auto;vertical-align:-2px;}
.wk-table {margin:6px 0 14px;}
.wk-item .wk-table {margin:8px 0 0;}
.wk-pill {display:inline-block;margin:2px 3px;padding:2px 8px;border-radius:999px;border:1px solid var(--tr-line);background:#0b1422;font-size:12px;color:#fff;white-space:nowrap;}
.wk-cols {display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px;}
.wk-cols > div {background:var(--tr-card);border:1px solid var(--tr-line);border-radius:12px;padding:14px 16px;}
.wk-sub {font-size:22px !important;margin:0 0 8px !important;}
.wk-list {margin:0;padding-left:18px;font-size:14px;line-height:1.6;color:#b9c6d8;}
.wk-list b {color:#fff;}
.wk-faq details {background:var(--tr-card);border:1px solid var(--tr-line);border-radius:12px;padding:12px 16px;margin-bottom:8px;}
.wk-faq summary {cursor:pointer;font-weight:bold;color:#fff;font-size:15px;}
.wk-faq details[open] summary {color:var(--tr-lime);}
.wk-faq p {margin:8px 0 0;font-size:14px;line-height:1.55;color:#b9c6d8;}

@media (max-width: 1000px) {
    .wk-layout {grid-template-columns:minmax(0,1fr);}
    .wk-toc {position:static;flex-direction:row;flex-wrap:wrap;gap:6px;}
    .wk-toc .tr-statlabel {width:100%;}
    .wk-toc a {border:1px solid var(--tr-line);border-left:1px solid var(--tr-line);font-size:12px;padding:4px 10px;}
    .wk-steps {grid-template-columns:repeat(2,minmax(0,1fr));}
    .wk-attrs {grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width: 767px) {
    .wk-hero {grid-template-columns:minmax(0,1fr);}
    .wk-hero h1 {font-size:40px !important;}
    .wk-items,.wk-attrs,.wk-cols {grid-template-columns:minmax(0,1fr);}
    .wk-steps {grid-template-columns:minmax(0,1fr);}
}

/* Office: sports manager */
.ec-sm-on {border-color:#3b4a2a !important;color:var(--tr-lime) !important;}
.ec-smgrid {display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:22px;align-items:start;}
.ec-smlead {margin:0 0 14px;font-size:14px;line-height:1.5;color:#b9c6d8;}
.ec-smform {display:block;margin:0;}
.ec-smbudget {background:var(--tr-card);border:1px solid var(--tr-line);border-radius:12px;padding:12px 14px 10px;margin-bottom:10px;}
.ec-smbudget .tr-row b {font-family:teko,exo,arial;font-weight:normal;font-size:24px;line-height:1;color:var(--tr-lime);}
.ec-smbudget small {display:block;font-size:12px;color:var(--tr-muted);line-height:1.4;}
.ec-sm input.ec-range {-webkit-appearance:none;appearance:none;display:block;width:100%;height:6px;margin:12px 0 10px;padding:0;border-radius:999px;background:linear-gradient(90deg,var(--tr-lime) var(--pct,20%),#22324c var(--pct,20%)) !important;cursor:pointer;}
.ec-sm input.ec-range::-webkit-slider-runnable-track {height:6px;background:transparent;border-radius:999px;}
.ec-sm input.ec-range::-webkit-slider-thumb {-webkit-appearance:none;width:20px;height:20px;margin-top:-7px;border-radius:50%;background:#fff;border:3px solid var(--tr-lime);box-shadow:0 2px 8px rgba(0,0,0,0.45);cursor:pointer;}
.ec-sm input.ec-range::-moz-range-track {height:6px;background:transparent;border:0;}
.ec-sm input.ec-range::-moz-range-thumb {width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--tr-lime);cursor:pointer;}
.ec-sm input.ec-range:focus-visible {outline:2px solid var(--tr-lime) !important;outline-offset:6px;}
.ec-duties {display:grid;gap:8px;margin:0 0 14px;}
.ec-duty {display:flex;align-items:center;gap:12px;margin:0;padding:11px 14px;background:var(--tr-card);border:1px solid var(--tr-line);border-radius:12px;color:var(--tr-text);font-size:14px;transition:border-color 0.2s,background 0.2s;}
.ec-duty-toggle {cursor:pointer;}
.ec-duty-toggle:hover {border-color:#34466a;}
.ec-duty-on {border-color:color-mix(in srgb,var(--tr-lime) 35%,var(--tr-line));}
.ec-duty-ic {flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#13203a;color:var(--tr-muted);font-size:15px;transition:color 0.2s,background 0.2s;}
.ec-duty-on .ec-duty-ic {color:var(--tr-lime);background:color-mix(in srgb,var(--tr-lime) 12%,#13203a);}
.ec-duty-txt {flex:1;min-width:0;}
.ec-duty-txt b {display:block;color:#fff;font-size:14px;line-height:1.3;}
.ec-duty-txt small {display:block;margin-top:2px;font-size:12px;line-height:1.4;color:var(--tr-muted);}
.ec-duty-always {flex:none;font-size:11px;color:var(--tr-lime);border:1px solid color-mix(in srgb,var(--tr-lime) 40%,transparent);border-radius:999px;padding:2px 9px;white-space:nowrap;}
.ec-switch {flex:none;position:relative;display:inline-block;width:44px;height:24px;}
.ec-switch input {position:absolute;opacity:0;width:0;height:0;margin:0;}
.ec-switch i {position:absolute;inset:0;border-radius:999px;background:#22324c;border:1px solid #34466a;transition:background 0.2s,border-color 0.2s;}
.ec-switch i::after {content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#8fa0b8;transition:transform 0.2s,background 0.2s;}
.ec-switch input:checked + i {background:var(--tr-lime);border-color:var(--tr-lime);}
.ec-switch input:checked + i::after {transform:translateX(20px);background:#0b1422;}
.ec-switch input:focus-visible + i {outline:2px solid var(--tr-lime);outline-offset:2px;}
.ec-smform .ot-actionsrow {margin:0;align-items:center;}
.ec-smsaved {font-size:13px;color:var(--tr-lime);}
.ec-smlog {background:var(--tr-card);border:1px solid var(--tr-line);border-radius:12px;padding:12px 14px;}
.ec-smlog .tr-statlabel {margin-bottom:6px;}
.ec-smlog .tr-note {margin:4px 0 0;}
.ec-smitem {display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:7px 0 7px 12px;border-top:1px solid #18253a;text-decoration:none;color:var(--tr-text) !important;position:relative;font-size:13px;}
.ec-smitem:first-of-type {border-top:0;}
.ec-smitem b {font-weight:normal;}
.ec-smitem span {font-size:11px;color:var(--tr-muted);white-space:nowrap;}
.ec-smnew::before {content:"";position:absolute;left:0;top:13px;width:6px;height:6px;border-radius:50%;background:var(--tr-lime);}
.ec-smnew b {font-weight:bold;color:#fff;}
@media (max-width: 900px) {.ec-smgrid {grid-template-columns:minmax(0,1fr);}}
/* Sports manager bid buttons and reply */
.tm-action .tm-smbtn {display:inline-block;margin-left:4px;font-size:14px;padding:5px 8px 3px;border-color:#3b4a2a;color:var(--tr-lime) !important;white-space:nowrap;}
.tm-action .tm-smbtn:hover {background:rgba(198,242,90,0.1);}
#playerview .pc-smbid {background:transparent !important;border:1px solid #3b4a2a !important;color:var(--tr-lime) !important;}
.sm-reply .tr-statlabel {display:block;margin-bottom:4px;color:var(--tr-lime);}
.sm-reply-no .tr-statlabel {color:var(--tr-amber);}

/* Card, row and button links in the new design: no underline or glow on hover - the card itself lights up */
.db-mail:hover,.db-todoitem:hover,.db-fixture:hover,.db-sev:hover,.db-hbtn:hover,.ec-smitem:hover,.lp-newsitem:hover,.lp-leader:hover,.lp-cta:hover,.lp-cta2:hover,
.ot-result:hover,.ot-fixture:hover,.ot-btn:hover,.ot-chip:hover,.ot-buy:hover,.tr-btn:hover,.lu-form:hover,.au-submit:hover,.au-choice:hover,
.nw-line:hover,.nw-trend:hover,.nw-sec:hover,.nw-logo:hover,.nw-boxbtn:hover,a[class*="nw-c-"]:hover {text-decoration:none;text-shadow:none;}

/* ===== Next match page (nextmatch.php) ===== */
.nx-page {display:grid;gap:18px;}
.nx-herohead {display:flex;justify-content:space-between;align-items:center;gap:10px;}
.nx-when {font-family:teko,exo,arial;font-size:22px;line-height:1;color:var(--tr-lime);text-transform:uppercase;letter-spacing:0.04em;}
.nx-teams {display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:start;gap:16px;margin:14px 0 18px;}
.nx-team {text-align:center;}
.nx-team h2 {margin:8px 0 8px;font-size:26px;}
.nx-team h2 a {color:#fff;text-decoration:none;}
.nx-team-mine h2 a {color:var(--tr-lime);}
.nx-crest {height:72px;image-rendering:pixelated;}
.nx-teammeta {display:flex;flex-wrap:wrap;gap:6px;justify-content:center;}
.nx-teammeta .ot-chip {font-size:12px;padding:3px 10px;}
.nx-chip-mine {border-color:color-mix(in srgb,var(--tr-lime) 45%,transparent);color:var(--tr-lime) !important;}
.nx-chip-human {color:var(--tr-skill) !important;}
.nx-form {margin-top:10px;display:flex;gap:4px;justify-content:center;}
.nx-form .shapewin,.nx-form .shapelost,.nx-form .shapedraw {width:22px;height:22px;padding:0;margin:0;border-radius:6px;font-family:teko,exo,arial;font-size:15px;line-height:22px;text-align:center;display:inline-block;}
.nx-form .shapewin {background:var(--tr-lime);color:#0b1422;}
.nx-form .shapelost {background:var(--tr-coral);color:#fff;}
.nx-form .shapedraw {background:#8496b0;color:#0b1422;}
.nx-vs {align-self:center;font-family:teko,exo,arial;font-size:30px;color:var(--tr-muted);}
.nx-forecast {background:var(--tr-card);border:1px solid var(--tr-line);border-radius:12px;padding:10px 14px;margin-bottom:14px;}
.nx-forecast .tr-row b {font-family:teko,exo,arial;font-weight:normal;font-size:22px;color:#fff;}
.nx-forecastbar {height:10px;border-radius:999px;background:var(--tr-coral);overflow:hidden;margin-top:6px;}
.nx-forecastbar i {display:block;height:100%;background:var(--tr-lime);}
.nx-cmprow {display:grid;grid-template-columns:72px minmax(0,1fr) 72px;align-items:center;gap:12px;padding:7px 0;}
.nx-cmprow b {font-family:teko,exo,arial;font-weight:normal;font-size:24px;line-height:1;color:var(--tr-muted);text-align:center;}
.nx-cmprow b.nx-lead {color:#fff;}
.nx-cmpmid span {display:block;text-align:center;font-size:12px;color:var(--tr-muted);margin-bottom:5px;}
.nx-cmpbar {display:flex;height:8px;border-radius:999px;overflow:hidden;background:#22324c;}
.nx-cmpbar i {display:block;height:100%;}
.nx-cmph {background:var(--tr-lime);}
.nx-cmpa {background:var(--tr-skill);}
.nx-lineups {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;}
.nx-round {display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:18px 0 4px;padding-top:14px;border-top:1px solid var(--tr-line);}
.nx-round:first-of-type {margin-top:4px;padding-top:0;border-top:0;}
.nx-round .nx-when {font-size:18px;}
.nx-div {font-size:12px;color:var(--tr-muted);margin:10px 0 6px;}
.nx-matches {display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:8px;}
.nx-match {display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:10px;background:var(--tr-card);border:1px solid var(--tr-line);border-radius:10px;padding:8px 12px;color:var(--tr-text);font-size:13px;transition:border-color 0.2s;}
.nx-match:hover {border-color:#34466a;text-decoration:none;}
.nx-match-mine {border-color:color-mix(in srgb,var(--tr-lime) 45%,transparent);}
.nx-mteam {display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0;}
.nx-mteam img {height:22px;image-rendering:pixelated;flex:none;}
.nx-maway {justify-content:flex-start;}
.nx-mvs {font-size:11px;color:var(--tr-muted);}
.nx-empty h2 {margin-top:0;}
@media (max-width:900px) {
    .nx-lineups {grid-template-columns:minmax(0,1fr);}
    .nx-teams {grid-template-columns:minmax(0,1fr);gap:20px;}
    .nx-vs {display:none;}
}

/* Formation pitch with player figures (clubpitch) */
.ot-pitch-fig {height:470px;}
.ot-pitch-fig .ot-spot {width:86px;gap:0;}
.ot-fig {position:relative;width:48px;height:48px;}
.ot-fig .playerimg-stack {position:absolute;left:0;top:0;}
.ot-figinj {position:absolute;right:-6px;top:-2px;height:16px;}
.ot-figcap {position:absolute;left:-6px;top:-2px;height:14px;}
.ot-pitch-fig .ot-spot span {width:30px;height:30px;margin-top:-10px;border-width:2px;font-size:17px;padding-top:2px;position:relative;z-index:2;}
.ot-pitch-fig .ot-spot small {margin-top:2px;max-width:86px;}
.ot-pitch-fig .ot-spot-empty {height:48px;}
@media (max-width:700px) {
    .ot-pitch-fig {height:420px;}
    .ot-pitch-fig .ot-spot {width:62px;}
    .ot-fig {transform:scale(0.78);transform-origin:top center;height:40px;}
    .ot-pitch-fig .ot-spot small {max-width:62px;font-size:10px;}
}

/* ===== Mobile top bar, menu and landing page in the new design ===== */
@media (max-width: 767px) {
    /* Top bar */
    #burgerbar {height:54px;background:#0e1825;border-bottom:1px solid var(--tr-line);box-shadow:0 8px 22px rgba(0,0,0,0.45);}
    #burgerbar > a {display:inline-flex;align-items:center;height:100%;}
    #burgerbar > a img,#burgerbar > img {height:30px !important;width:auto !important;margin:0 0 0 12px !important;padding:0 !important;position:static !important;}
    #burgerbar .infobar-txt {position:absolute;right:70px;top:50%;transform:translateY(-50%);float:none;margin:0;padding:0;display:flex;align-items:center;gap:8px;line-height:1.15;}
    #burgerbar .infobar-txt .icon,#burgerbar .infobar-txt img {height:26px;width:auto;margin:0;padding:0;float:none;}
    #burgerbar .infobar-txt .floatleft {float:none;margin:0;}
    #burgerbar .infobar-txt label {margin:0;padding:0;font-size:11px;color:var(--tr-muted);text-transform:uppercase;letter-spacing:0.03em;display:block;}
    #burgerbar .infobar-txt span {display:block;font-family:teko,exo,arial;font-size:19px;color:#fff;}
    #menufold {width:58px;padding:0 17px;border-left:1px solid var(--tr-line);display:flex;flex-direction:column;justify-content:center;gap:5px;}
    #menufold .bbar {width:24px;height:2px;margin:0;border-radius:2px;background:var(--tr-lime);}
    /* Slide-down menu: cards in two columns */
    #menubar {background:#0e1825;border-bottom:1px solid var(--tr-line);padding:12px 12px 22px;box-shadow:0 18px 40px rgba(0,0,0,0.5);}
    #menubar .content {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:auto;max-width:none;padding:0;}
    #menubar .button-warn {position:relative;float:none;width:auto;margin:0;}
    #menubar a {display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:50px;margin:0;padding:10px 10px 6px;background:var(--tr-card);border:1px solid var(--tr-line);border-radius:12px;font-family:teko,exo,arial;font-size:19px;line-height:1.1;letter-spacing:0.03em;text-transform:uppercase;text-align:center;color:#fff;box-shadow:none;}
    #menubar a:hover {background:#16243c;border-color:#34466a;text-decoration:none;}
    #menubar a.selected,#menubar .selected {background:var(--tr-lime);border-color:var(--tr-lime);color:#0b1422;}
    #menubar a img {height:16px;width:auto;}
    #menubar .warn {top:-7px;right:-5px;left:auto;min-width:22px;height:20px;line-height:20px;padding:0 6px;border-radius:999px;background:var(--tr-coral);color:#0b1422;font-family:exo,arial;font-size:11px;font-weight:700;}
    /* Club facts under the menu: one strip across both columns */
    #menubar .menufacts {grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:4px;}
    #menubar .menufacts .mcol2 {width:auto !important;float:none !important;margin:0 !important;padding:10px 12px;background:var(--tr-card);border:1px solid var(--tr-line);border-radius:12px;text-align:left !important;}
    #menubar .menufacts label {display:block;margin-top:9px;font-size:11px;color:var(--tr-muted);text-transform:uppercase;letter-spacing:0.04em;}
    #menubar .menufacts .mcol2 > label:first-child {margin-top:0;}
    #menubar .menufacts h2 {margin:0;font-family:teko,exo,arial;font-weight:normal;font-size:22px;line-height:1.15;color:#fff;}
    #menubar .clearfix {display:none;}
    /* Landing page: the fixed bar already carries the logo, so the hero does not repeat it */
    .lp-logo {display:none;}
    .lp-hero {padding-top:72px;}
}

/* Scout recommends: the arrows sit in the middle of the player card */
#slideshow > .prevslide,#slideshow > .nextslide {top:195px;}

/* Cup match: trophy badge in the match preview */
.nm-cup {display:flex;align-items:center;justify-content:center;gap:9px;margin:0 0 8px;}
.db-hero-match > .nm-cup {grid-column:1 / -1;margin-bottom:10px;} /* the hero column is a 2-column grid - span both */
.nm-cup .cupicon {color:var(--tr-amber);flex:none;margin-top:-2px;} /* optical centre: teko sits high in its line box */
.nm-cup span {font-family:teko,exo,arial;font-size:28px;line-height:1;letter-spacing:0.04em;text-transform:uppercase;color:#fff;}
.nx-title {display:flex;align-items:center;gap:9px;font-family:teko,exo,arial;font-size:21px;line-height:1;letter-spacing:0.05em;text-transform:uppercase;color:#e8eef7;}
.nx-title-cup {color:var(--tr-amber);}
.nx-herohead .cupicon {flex:none;}