:root {
  --green:   #2D6A35;
  --green2:  #4CAF56;
  --green3:  #EBF5EC;
  --orange:  #E8520A;
  --orange2: #F97316;
  --orange3: #FDF0EA;
  --gold:    #F59E0B;
  --gold2:   #FCD34D;
  --gold3:   #FFFBEB;
  --red:     #DC2626;
  --blue:    #1E3A5F;
  --text:    #1A1A14;
  --text2:   #4A4A3A;
  --text3:   #8A8A7A;
  --bg:      #F5F0E8;
  --card:    #FDFCF8;
  --border:  #D8D0C0;
  --shadow:  0 2px 12px rgba(0,0,0,.07);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.12);
  --radius:  14px;
  --font:    'Plus Jakarta Sans', sans-serif;
  --font-serif: 'Fraunces', serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--bg); font-family: var(--font); color: var(--text); min-height: 100vh; display: flex; flex-direction: column; }

/* NAV */
nav { background: var(--green); box-shadow: 0 2px 16px rgba(0,0,0,.2); position: sticky; top: 0; z-index: 100; }
.nav-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; height: 58px; display: flex; align-items: center; justify-content: space-between; }
.nav-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.nav-logo { height: 36px; filter: brightness(0) invert(1); opacity: .95; }
.nav-sep { width: 1px; height: 20px; background: rgba(255,255,255,.3); }
.nav-title { font-family: var(--font-serif); font-weight: 700; color: #fff; font-size: .95rem; }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-link { color: rgba(255,255,255,.75); text-decoration: none; font-size: .78rem; font-weight: 600; padding: 6px 12px; border-radius: 8px; transition: all .15s; }
.nav-link:hover { background: rgba(255,255,255,.15); color: #fff; }
.nav-admin { background: rgba(255,255,255,.15); color: #fff; }
.nav-logout { color: rgba(255,255,255,.55); }
.nav-user { font-size: .78rem; color: rgba(255,255,255,.65); padding: 0 8px; }

main { flex: 1; }

/* HERO */
.page-hero { background: linear-gradient(135deg, #1A3A20 0%, var(--green) 60%, #E8520A 100%); padding: 48px 24px 32px; }

/* FORTSCHRITTSBALKEN */
.tip-progress-wrap { margin-top: 20px; }
.tip-progress-label { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.tip-progress-count { font-size: 1.4rem; font-weight: 900; color: #fff; font-family: var(--font-serif); }
.tip-progress-text { font-size: .78rem; color: rgba(255,255,255,.65); }
.tip-progress-bar { height: 8px; background: rgba(255,255,255,.2); border-radius: 99px; overflow: hidden; }
.tip-progress-fill { height: 100%; background: linear-gradient(90deg, #4CAF56, #F59E0B); border-radius: 99px; transition: width .6s ease; }
.tip-progress-done { margin-top: 6px; font-size: .75rem; color: #4CAF56; font-weight: 700; letter-spacing: .02em; }

/* COUNTDOWN BANNER */
.countdown-bar { background: #1A3A20; border-bottom: 1px solid rgba(255,255,255,.08); padding: 14px 24px; }
.countdown-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.countdown-game { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: rgba(255,255,255,.75); }
.countdown-flag { font-size: 1.1rem; }
.countdown-teams { font-weight: 600; color: #fff; }
.countdown-timer { display: flex; align-items: center; gap: 4px; }
.countdown-unit { display: flex; flex-direction: column; align-items: center; background: rgba(255,255,255,.1); border-radius: 8px; padding: 6px 10px; min-width: 44px; }
.countdown-num { font-size: 1.3rem; font-weight: 900; color: #fff; font-family: var(--font-serif); line-height: 1; }
.countdown-label { font-size: .55rem; color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: .08em; margin-top: 2px; }
.countdown-sep { font-size: 1.2rem; font-weight: 900; color: rgba(255,255,255,.4); margin: 0 2px; padding-bottom: 8px; }

/* PUNKTE-ANIMATION */
@keyframes pointsPop {
  0%   { transform: scale(0.4); opacity: 0; }
  60%  { transform: scale(1.25); }
  80%  { transform: scale(0.95); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes pointsGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74,175,80,0); }
  50%       { box-shadow: 0 0 12px 4px rgba(74,175,80,.4); }
}
.points-pop { animation: pointsPop .5s cubic-bezier(.34,1.56,.64,1) both, pointsGlow 1.2s ease .4s 2; }

.page-hero-sm { padding: 32px 24px; }
.hero-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.hero-text h1 { font-family: var(--font-serif); font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 900; color: #fff; margin-bottom: 8px; }
.hero-text p { color: rgba(255,255,255,.8); font-size: .95rem; max-width: 560px; line-height: 1.65; }
.hero-powered { font-size: .78rem !important; color: rgba(255,255,255,.55) !important; margin-top: 4px !important; }
.scoring-legend { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding-top: 4px; justify-content: flex-end; max-width: 480px; }
.legend-sub { width: 100%; margin-top: 8px; font-size: .8rem; color: rgba(255,255,255,.65); line-height: 1.5; text-align: right; }
.legend-item { display: flex; align-items: center; gap: 6px; color: rgba(255,255,255,.85); font-size: .78rem; }

/* BADGES */
.badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 6px; font-size: .7rem; font-weight: 800; }
.badge-green { background: var(--green2); color: #fff; }
.badge-gold { background: var(--gold); color: #fff; }
.badge-orange { background: var(--orange); color: #fff; }
.badge-red { background: var(--red); color: #fff; }

/* CONTENT */
.page-content { max-width: 1200px; margin: 0 auto; padding: 32px 24px; }

.info-banner { background: rgba(45,106,53,.1); border: 1.5px solid var(--green2); border-radius: 10px; padding: 12px 16px; font-size: .85rem; color: var(--green); margin-bottom: 24px; }
.info-banner-tip { background: var(--gold3); border-color: var(--gold2); color: #92400E; }
.hero-right { display: flex; flex-direction: column; gap: 12px; align-items: flex-end; }
.hero-powerplay-banner { background: rgba(245,158,11,.15); border: 1.5px solid rgba(245,158,11,.5); border-radius: 10px; padding: 10px 14px; font-size: .82rem; color: rgba(255,255,255,.95); }
.hero-powerplay-set { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25); color: rgba(255,255,255,.7); }

/* GAME GROUPS */
.game-group { margin-bottom: 40px; }
.group-title { font-family: var(--font-serif); font-size: 1.3rem; font-weight: 700; margin-bottom: 16px; color: var(--text); border-left: 4px solid var(--green); padding-left: 12px; }
.games-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 16px; }

/* GAME CARD */
.game-card { background: var(--card); border: 1.5px solid var(--border); border-left: 4px solid var(--border); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); transition: box-shadow .2s; }
.game-card:hover { box-shadow: var(--shadow-lg); }
.game-card.game-tipped { border-left-color: var(--green2); }
.game-finished { opacity: .85; border-color: #C8C0B0; border-left-color: #C8C0B0; }
.game-live { border-color: var(--orange); }
.game-powerplay { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(245,158,11,.2); }

.game-header { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.game-time { font-size: .72rem; font-weight: 700; color: var(--text3); flex: 1; }
.powerplay-tag { background: var(--gold3); color: #92400E; font-size: .65rem; font-weight: 800; padding: 2px 8px; border-radius: 4px; }
.finished-tag { background: var(--green3); color: var(--green); font-size: .65rem; font-weight: 800; padding: 2px 8px; border-radius: 4px; }
.live-tag { background: var(--orange3); color: var(--orange); font-size: .65rem; font-weight: 800; padding: 2px 8px; border-radius: 4px; }

.game-matchup { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.team { display: flex; align-items: center; gap: 8px; flex: 1; }
.team-away { flex-direction: row-reverse; text-align: right; }
.flag { font-size: 1.4rem; }
.team-name { font-weight: 700; font-size: .9rem; }
.game-score-area { text-align: center; min-width: 52px; }
.final-score { font-family: var(--font-serif); font-size: 1.4rem; font-weight: 900; color: var(--green); }
.vs { font-weight: 800; color: var(--text3); font-size: .85rem; }

/* TIP FORM */
.tendency-picker { display: flex; gap: 6px; margin-bottom: 12px; }
.tendency-btn { flex: 1; cursor: pointer; }
.tendency-btn input { display: none; }
.tendency-btn span { display: flex; align-items: center; justify-content: center; padding: 10px 4px; border-radius: 8px; border: 2px solid var(--border); font-size: .72rem; font-weight: 700; text-align: center; transition: all .15s; background: var(--bg); color: var(--text2); cursor: pointer; white-space: nowrap; min-height: 44px; }
.tendency-btn input:checked + span,
.tendency-btn.active span { border-color: var(--green); background: var(--green3); color: var(--green); }
.tendency-btn span:hover { border-color: var(--green2); }

.exact-score { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; padding: 10px 12px; background: var(--gold3); border-radius: 8px; border: 1px solid var(--gold2); }
.exact-label { font-size: .72rem; font-weight: 700; color: #92400E; display: flex; align-items: center; gap: 6px; }
.score-inputs { display: flex; align-items: center; gap: 6px; }
.score-input { width: 52px; text-align: center; padding: 8px 4px; border: 1.5px solid var(--border); border-radius: 6px; font-size: 1rem; font-weight: 700; background: #fff; -moz-appearance: textfield; }
.score-input::-webkit-outer-spin-button,
.score-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.score-sep { font-weight: 800; color: var(--text2); }

.tip-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.powerplay-toggle { display: flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; cursor: pointer; color: var(--text2); }
.powerplay-toggle.disabled { opacity: .45; cursor: not-allowed; }
.powerplay-toggle input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--gold); }
.tip-status { font-size: .75rem; margin-top: 8px; min-height: 20px; font-weight: 600; }
.tip-status.ok { color: var(--green); }
.tip-status.err { color: var(--red); }

/* TIP SUMMARY */
.tip-summary { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; }
.tip-tendency-display { font-size: .85rem; font-weight: 700; padding: 6px 12px; border-radius: 8px; background: var(--green3); color: var(--green); }
.points-earned { font-family: var(--font-serif); font-size: 1.1rem; font-weight: 900; }
.points-green { color: var(--green); }
.points-zero { color: var(--text3); }
.no-tip { font-size: .8rem; color: var(--text3); padding: 8px 0; font-style: italic; }

/* BUTTONS */
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 20px; border-radius: 8px; font-weight: 700; font-size: .85rem; border: none; cursor: pointer; transition: all .15s; text-decoration: none; }
.btn-primary { background: var(--green); color: #fff; }
.btn-primary:hover { background: #235228; }
.btn-full { width: 100%; }
.btn-save { background: var(--green); color: #fff; padding: 8px 16px; font-size: .78rem; }
.btn-save:hover { background: #235228; }
.btn-sm { padding: 6px 12px; font-size: .75rem; }

/* AUTH */
.auth-page { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 120px); padding: 40px 16px; }
.auth-card { background: var(--card); border: 1.5px solid var(--border); border-radius: 20px; padding: 40px; width: 100%; max-width: 420px; box-shadow: var(--shadow-lg); }
.auth-card-wide { max-width: 560px; }
.auth-logo { text-align: center; margin-bottom: 20px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.reset-pw-banner { background: var(--gold3); border: 2px solid var(--gold2); border-radius: 12px; padding: 16px 20px; margin-bottom: 20px; text-align: center; }
.reset-pw-label { font-size: .78rem; color: #92400E; font-weight: 600; margin-bottom: 6px; }
.reset-pw-value { font-size: 1.6rem; font-weight: 900; color: #92400E; letter-spacing: .04em; margin-bottom: 8px; font-family: var(--font-serif); }
.reset-pw-hint { font-size: .75rem; color: #92400E; opacity: .8; }
.forgot-link { color: var(--text3); font-size: .85rem; text-decoration: underline; }
.auth-school-logo { height: 36px; display: block; }
.auth-wm-badge { display: inline-block; background: var(--green); color: #fff; font-size: .75rem; font-weight: 800; padding: 4px 14px; border-radius: 20px; }
.auth-title { font-family: var(--font-serif); font-size: 1.6rem; font-weight: 900; text-align: center; margin-bottom: 6px; }
.auth-sub { text-align: center; color: var(--text2); font-size: .85rem; margin-bottom: 28px; }
.auth-form { display: flex; flex-direction: column; gap: 16px; }
.auth-switch { text-align: center; margin-top: 20px; font-size: .83rem; color: var(--text2); }
.auth-switch a { color: var(--green); font-weight: 700; text-decoration: none; }

/* FORMS */
.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-size: .78rem; font-weight: 700; color: var(--text2); }
.label-sm { font-size: .72rem; }
.field input, .field select { padding: 10px 12px; border: 1.5px solid var(--border); border-radius: 8px; font-size: .9rem; font-family: var(--font); background: #fff; transition: border-color .15s; }
.field input:focus, .field select:focus { outline: none; border-color: var(--green); }
.field-hint { font-size: .7rem; color: var(--text3); }
.field-hint-inline { font-size: .7rem; color: var(--text3); font-weight: 400; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.required { color: var(--red); }
.class-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ROLE CARDS */
.role-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.role-card { cursor: pointer; }
.role-card input { display: none; }
.role-card-inner { border: 2px solid var(--border); border-radius: 10px; padding: 14px; text-align: center; transition: all .15s; background: var(--bg); }
.role-card input:checked + .role-card-inner { border-color: var(--green); background: var(--green3); }
.role-card-inner:hover { border-color: var(--green2); }
.role-icon { font-size: 1.8rem; margin-bottom: 6px; }
.role-name { font-weight: 800; font-size: .85rem; }
.role-desc { font-size: .72rem; color: var(--text2); margin-top: 2px; }

/* ALERTS */
.alert { padding: 10px 14px; border-radius: 8px; font-size: .82rem; font-weight: 600; margin-bottom: 16px; }
.alert-error { background: #FEF2F2; border: 1px solid #FECACA; color: var(--red); }
.alert-success { background: var(--green3); border: 1px solid var(--green2); color: var(--green); }

/* RANKING */
.ranking-tabs { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
.tab-btn { padding: 8px 18px; border-radius: 8px; border: 1.5px solid var(--border); background: var(--card); font-size: .8rem; font-weight: 700; cursor: pointer; transition: all .15s; color: var(--text2); }
.tab-btn.active { background: var(--green); color: #fff; border-color: var(--green); }
.tab-btn:hover:not(.active) { border-color: var(--green2); color: var(--green); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

.pre-tournament-box { background: var(--card); border-radius: var(--radius); padding: 28px 24px; box-shadow: var(--shadow); text-align: center; }
.pre-tournament-title { font-family: var(--font-serif); font-size: 1.2rem; font-weight: 700; color: var(--green); margin-bottom: 6px; }
.pre-tournament-sub { font-size: .88rem; color: var(--text2); margin-bottom: 20px; }
.participant-list { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.participant-chip { background: var(--green3); border: 1.5px solid var(--green2); color: var(--green); font-size: .82rem; font-weight: 600; padding: 6px 14px; border-radius: 20px; display: flex; align-items: center; gap: 6px; }
.participant-me { background: var(--green); color: #fff; border-color: var(--green); }
.ranking-table { width: 100%; border-collapse: collapse; background: var(--card); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.ranking-table th { background: var(--green); color: #fff; font-size: .72rem; font-weight: 700; padding: 10px 14px; text-align: left; }
.ranking-table td { padding: 12px 14px; font-size: .83rem; border-bottom: 1px solid var(--border); }
.ranking-table tr:last-child td { border-bottom: none; }
.ranking-table tr:hover td { background: var(--green3); }
.ranking-table-sm td, .ranking-table-sm th { padding: 8px 10px; font-size: .78rem; }
.row-me td { background: var(--gold3) !important; }
.rank-num { font-size: 1rem; width: 40px; }
.rank-name { font-weight: 700; }
.rank-points { font-size: 1rem; text-align: right; }
.rank-class { }
.you-tag { background: var(--green); color: #fff; font-size: .6rem; font-weight: 800; padding: 1px 6px; border-radius: 4px; margin-left: 4px; }
.empty-state { text-align: center; color: var(--text3); padding: 32px; font-style: italic; }

.class-tag { background: var(--green3); color: var(--green); font-size: .68rem; font-weight: 700; padding: 2px 7px; border-radius: 4px; margin-right: 4px; display: inline-block; }
.role-badge { font-size: .7rem; font-weight: 700; padding: 2px 8px; border-radius: 4px; }
.role-schulfamilie { background: var(--orange3); color: var(--orange); }
.role-schulteam { background: var(--green3); color: var(--green); }

.class-rankings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.class-ranking-card { background: var(--card); border: 1.5px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.class-ranking-title { font-family: var(--font-serif); font-size: 1rem; font-weight: 700; padding: 12px 14px; background: var(--green3); color: var(--green); border-bottom: 1px solid var(--border); }

/* ADMIN */
.section-title { font-family: var(--font-serif); font-size: 1.2rem; font-weight: 700; margin-bottom: 16px; color: var(--text); }
.admin-games { display: flex; flex-direction: column; gap: 10px; }
.admin-game-row { display: flex; align-items: center; gap: 16px; background: var(--card); border: 1.5px solid var(--border); border-radius: 10px; padding: 14px 16px; flex-wrap: wrap; }
.admin-matchup { font-weight: 700; font-size: .88rem; flex: 1; display: flex; align-items: center; gap: 8px; }
.admin-time { font-size: .72rem; color: var(--text3); }
.result-form { display: flex; align-items: center; gap: 8px; }
.admin-add-form { background: var(--card); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; }
.divider { height: 1px; background: var(--border); margin: 32px 0; }

/* ONBOARDING */
.onboarding-page { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 120px); padding: 40px 16px; }
.onboarding-card { background: var(--card); border: 1.5px solid var(--border); border-radius: 20px; padding: 36px; width: 100%; max-width: 520px; box-shadow: var(--shadow-lg); }
.onboarding-logo { text-align: center; margin-bottom: 20px; }
.onboarding-logo img { height: 32px; margin-bottom: 8px; }
.onboarding-title { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 900; text-align: center; margin-bottom: 4px; }
.onboarding-sub { text-align: center; color: var(--text2); font-size: .85rem; margin-bottom: 24px; }
.onboarding-steps { display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; }
.ob-step { display: flex; gap: 14px; align-items: flex-start; }
.ob-icon { font-size: 1.6rem; flex-shrink: 0; width: 36px; text-align: center; }
.ob-title { font-weight: 800; font-size: .88rem; margin-bottom: 2px; }
.ob-desc { font-size: .78rem; color: var(--text2); line-height: 1.5; }
.onboarding-rules { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 14px; margin-bottom: 20px; }

/* SAVED INDICATOR */
.tip-saved-badge { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; font-weight: 700; color: var(--green); background: var(--green3); padding: 3px 8px; border-radius: 4px; }

/* RULES BOX */
.rules-box { background: var(--bg); border: 1.5px solid var(--border); border-radius: 10px; padding: 16px; }
.rules-title { font-weight: 800; font-size: .85rem; margin-bottom: 10px; color: var(--text); }
.rules-text { font-size: .75rem; color: var(--text2); line-height: 1.6; display: flex; flex-direction: column; gap: 6px; }
.rules-text ul { padding-left: 4px; list-style: none; display: flex; flex-direction: column; gap: 3px; }
.rules-checks { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.consent-check { display: flex; align-items: flex-start; gap: 10px; font-size: .8rem; color: var(--text2); cursor: pointer; }
.consent-check input { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; accent-color: var(--green); cursor: pointer; }

/* ADMIN CHAMPION */
.admin-champion-form { background: var(--gold3); border: 1.5px solid var(--gold2); border-radius: 10px; padding: 16px; }

/* FOOTER */
footer { background: var(--green); color: rgba(255,255,255,.7); padding: 20px 24px; margin-top: auto; }
.footer-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 12px; font-size: .78rem; flex-wrap: wrap; }
.footer-sep { opacity: .4; }

/* CHAMPION BOX */
.champion-box { background: linear-gradient(135deg, #1A3A20, #2D6A35); border-radius: var(--radius); padding: 24px; margin-bottom: 24px; color: #fff; }
.champion-header { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.champion-icon { font-size: 2rem; }
.champion-title { font-family: var(--font-serif); font-size: 1.1rem; font-weight: 700; margin-bottom: 4px; display: flex; align-items: center; gap: 10px; }
.champion-sub { font-size: .82rem; opacity: .8; }
.champion-current { font-size: .9rem; background: rgba(255,255,255,.15); border-radius: 8px; padding: 8px 14px; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.champion-change { font-size: .72rem; opacity: .65; }
.champion-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.champion-select { flex: 1; min-width: 200px; padding: 10px 12px; border-radius: 8px; border: none; font-size: .9rem; font-family: var(--font); }

/* VIEW TABS */
.view-tabs { display: flex; gap: 8px; margin-bottom: 24px; }
.view-panel { display: none; }
.view-panel.active { display: block; }

/* GROUP BADGE */
.group-badge { font-size: .65rem; font-weight: 800; padding: 2px 7px; border-radius: 4px; background: var(--green3); color: var(--green); }

/* POINTS BREAKDOWN */
.points-breakdown { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.power-bonus-label { font-size: .68rem; color: #92400E; background: var(--gold3); padding: 1px 6px; border-radius: 4px; }
.powerplay-multiplier-tag { font-size: .7rem; color: var(--orange); font-weight: 700; margin-left: 3px; }
.points-detail { font-size: .75rem; color: var(--text3); text-align: center; }
.points-power { color: #92400E; font-weight: 600; }
.points-champ { color: var(--green); font-weight: 600; }

/* DISQUALIFIED */
.row-disq td { opacity: .5; text-decoration: line-through; }
.disq-tag { background: #FEE2E2; color: var(--red); font-size: .6rem; font-weight: 800; padding: 1px 6px; border-radius: 4px; text-decoration: none; display: inline-flex; align-items: center; gap: 2px; }
.btn-disq { background: var(--red); color: #fff; }
.row-admin td { color: var(--text3); font-style: italic; }
.temp-pw-badge { font-size: .78rem; background: var(--gold3); border: 1px solid var(--gold2); color: #92400E; padding: 2px 8px; border-radius: 6px; white-space: nowrap; }
.pw-reset-form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pw-reset-input { width: 120px; font-size: .82rem; padding: 4px 8px; }
.footer-powered { font-weight: 600; color: rgba(255,255,255,.9); }
.btn-disq:hover { background: #b91c1c; }
.btn-restore { background: var(--green3); color: var(--green); border: 1px solid var(--green2); }

@media (max-width: 768px) {
  .games-grid { grid-template-columns: 1fr; }
  .hero-inner { flex-direction: column; }
  .hero-right { align-items: flex-start; width: 100%; }
  .scoring-legend { justify-content: flex-start; max-width: 100%; }
  .legend-sub { text-align: left; }
  .field-row, .class-picker, .role-cards { grid-template-columns: 1fr; }
  .nav-links { gap: 0; }
  .nav-user { display: none; }
  .class-rankings-grid { grid-template-columns: 1fr; }
  .scoring-legend { gap: 6px; }
  .exact-score { flex-direction: column; align-items: flex-start; gap: 8px; }
  .tip-actions { flex-direction: column; align-items: stretch; gap: 8px; }
  .btn-save { width: 100%; padding: 12px; font-size: .9rem; }
  .tendency-btn span { padding: 12px 4px; font-size: .78rem; }
  .score-input { width: 60px; padding: 10px; font-size: 1.1rem; }
  .ranking-table th, .ranking-table td { padding: 8px; font-size: .75rem; }
  .points-detail { display: none; }
  .champion-form { flex-direction: column; }
  .champion-select { width: 100%; }
  .auth-card { padding: 24px 16px; }
  .page-content { padding: 20px 16px; }
}