/* Finales TerraVex-Designsystem. Diese Datei liegt bewusst zuletzt in der Kaskade. */
:root{
  --tv-page:#09162d;--tv-page-2:#102b50;--tv-surface:#102440;--tv-surface-2:#173454;
  --tv-surface-3:#1b3c61;--tv-border:#355679;--tv-text:#f2f7ff;--tv-muted:#a9bdd6;
  --tv-accent:#55d6be;--tv-blue:#4e8ce4;--tv-input:#0c1f38;--tv-input-border:#58779a
}
[data-theme=light]{
  --tv-page:#e7edf4;--tv-page-2:#cfdceb;--tv-surface:#f4f7fa;--tv-surface-2:#e5ecf3;
  --tv-surface-3:#dce6f0;--tv-border:#b9c9da;--tv-text:#14213b;--tv-muted:#52667f;
  --tv-accent:#0f725f;--tv-blue:#315fbd;--tv-input:#fff;--tv-input-border:#9eb0c4
}
body{
  background:
    radial-gradient(circle at 82% -8%,color-mix(in srgb,var(--tv-blue) 28%,transparent),transparent 34%),
    radial-gradient(circle at 8% 35%,color-mix(in srgb,var(--tv-accent) 10%,transparent),transparent 28%),
    var(--tv-page);
}
main{position:relative}
.shop-page,.leaderboard-page,.social-page,.mode-page,.profile-page{width:100%!important;max-width:1180px;margin-inline:auto!important;padding:0 0 3rem!important}
.compact-hero{max-width:760px;margin:0 auto 2rem;text-align:center}
.compact-hero h1,.mode-hero h1{margin:.2rem 0 .8rem;font-size:clamp(2.55rem,7vw,4.8rem);letter-spacing:-.055em}
.compact-hero .lead,.mode-hero .lead{max-width:680px;margin-inline:auto}

/* Gemeinsame Premium-Oberflächen wie auf der Startseite. */
.panel,.mode-card,.achievement,.profile-statistics,.season-summary>div,.season-history-item{
  border-color:var(--tv-border)!important;background:linear-gradient(145deg,var(--tv-surface-2),var(--tv-surface))!important;
  color:var(--tv-text)!important;box-shadow:0 18px 45px #02081742!important
}
.panel h1,.panel h2,.panel h3,.mode-card h2,.achievement h2,.profile-statistics h2,.profile-statistics h3{color:var(--tv-text)}
.panel p,.mode-card p,.achievement p,.profile-statistics p,.profile-section-heading p,.season-summary span,.season-history-item>div span{color:var(--tv-muted)!important}
.panel .eyebrow,.compact-hero .eyebrow,.mode-hero .eyebrow{color:var(--tv-accent)!important}
.panel .metric,.profile-statistics .metric,.panel:has(.battle-comparison)>.stats-strip .metric{
  border:1px solid var(--tv-border)!important;background:#ffffff09!important;color:var(--tv-text)!important
}
.panel .metric strong,.profile-statistics .metric strong{color:var(--tv-accent)!important}
.panel .metric span,.profile-statistics .metric span{color:var(--tv-muted)}
.rank-card{border-color:color-mix(in srgb,var(--tv-accent) 38%,var(--tv-border))!important;background:linear-gradient(135deg,#122d50,#0d2039)!important;color:#f2f7ff!important}
.rank-card h2{color:#f2f7ff!important}.rank-card p{color:#b7c9de!important}

/* Modus- und Quiz-Einstellungen. */
.mode-card{border-left-color:var(--mode-color)!important}
.mode-errors{--mode-color:#ef7f83}
.mode-card:hover{border-color:color-mix(in srgb,var(--mode-color) 65%,var(--tv-border))!important;background:linear-gradient(145deg,var(--tv-surface-3),var(--tv-surface-2))!important}
.mode-icon{border-color:var(--tv-border)!important;background:#ffffff0b!important}
.mode-arrow{color:var(--tv-accent)!important}
.mode-card{background:linear-gradient(145deg,color-mix(in srgb,var(--mode-color) 8%,#173253),#102440 55%,#0c1d34)!important;color:#f4f8ff!important}
.mode-card:hover{background:linear-gradient(145deg,#19385f,#132b4a 65%,#102640)!important}
.mode-card .mode-copy h2{color:#f6f9ff!important}.mode-card .mode-copy p{color:#aebed3!important}
.quiz-settings-panel{max-width:780px;margin-inline:auto;padding:clamp(1.25rem,4vw,2.25rem)!important}
.settings-heading{text-align:center}.settings-heading h1{margin:.15rem 0}.settings-mode-label{margin:.15rem 0 1.5rem!important;font-weight:750}
.difficulty-hint{margin:1rem 0 0;padding:.8rem 1rem;border-left:4px solid var(--tv-accent);border-radius:9px;background:#55d6be10}
.panel .field>span,.panel .check>span,.panel label>span{color:var(--tv-text);font-weight:750}
.panel .field input,.panel .field select,.profile-editor input,.profile-editor select{
  border-color:var(--tv-input-border)!important;background:var(--tv-input)!important;color:var(--tv-text)!important
}
.panel .field input:focus,.panel .field select:focus,.profile-editor input:focus,.profile-editor select:focus{border-color:var(--tv-accent)!important;outline:3px solid color-mix(in srgb,var(--tv-accent) 28%,transparent)!important}
.time-settings{border-color:var(--tv-border)!important;background:#ffffff08!important}
.time-limit-field.disabled{opacity:.5}

/* Quiz. */
.quiz-panel{max-width:1040px;margin-inline:auto;border-color:var(--tv-border)!important;background:linear-gradient(145deg,var(--tv-surface-2),var(--tv-surface))!important}
.quiz-panel .quiz-head,.quiz-panel .question{color:var(--tv-text)}
.quiz-panel .answer{border-color:var(--tv-border);background:#ffffff0c;color:var(--tv-text)}
.quiz-panel .answer:hover:not(:disabled){border-color:var(--tv-blue);background:#ffffff16}
.quiz-panel .answer.correct{border-color:#28a978;background:#1a5b474d;color:#eafff7}
.quiz-panel .answer.wrong{border-color:#dc5067;background:#6c26354d;color:#fff0f3}
.typed-answer-field input.correct{border-color:#28a978!important;box-shadow:0 0 0 3px #28a97832}.typed-answer-field input.wrong{border-color:#dc5067!important;box-shadow:0 0 0 3px #dc506732}
#timer{width:max-content;margin:1rem auto 0;padding:.45rem .75rem;border:1px solid var(--tv-border);border-radius:99px;background:#ffffff0b;color:var(--tv-accent)!important;font-weight:800}
.result-rank{background:#55d6be16!important;color:var(--tv-text)!important}

/* Karte: Seitenverhältnis erhalten und Kleinstaaten mit echten Trefferflächen versehen. */
.map-answer{display:grid;justify-items:center;width:100%;overflow:hidden}
.country-map{
  width:min(100%,var(--map-natural-width,1100px))!important;height:auto!important;max-height:none!important;
  margin-inline:auto!important;aspect-ratio:var(--map-ratio);background:#b9cde0!important
}
.map-hitarea{fill:transparent;stroke:none;pointer-events:all;cursor:pointer}
.map-micro-marker,.map-fixed-marker,.map-island-marker{pointer-events:none}
.map-controls{right:16px!important;top:16px!important}
@media(max-width:700px){.country-map{width:100%!important;max-height:none!important}.map-controls{right:10px!important;top:10px!important}}

/* Profil und Abzeichen. */
.profile-card{border-color:color-mix(in srgb,var(--tv-accent) 38%,var(--tv-border));background:linear-gradient(135deg,#17375e,#0d2039);color:#f2f7ff!important}
.profile-card h1,.profile-card .profile-country{color:#f2f7ff!important}.profile-card .profile-identity p{color:#b7c9de!important}
.achievement{box-shadow:0 10px 26px #02081735!important}.achievement.unlocked{border-color:var(--tv-accent)!important}.achievement.locked{opacity:.68}
.achievement strong{color:var(--tv-accent)!important}
.badge-groups .achievement{border-color:var(--tv-border)!important;background:linear-gradient(145deg,var(--tv-surface-2),var(--tv-surface))!important;color:var(--tv-text)!important}
.badge-groups .achievement h2{color:var(--tv-text)!important}.badge-groups .achievement p{color:var(--tv-muted)!important}
.badge-groups .achievement.unlocked strong{background:color-mix(in srgb,var(--tv-accent) 15%,transparent)!important;color:var(--tv-accent)!important}
.badge-groups .achievement.locked strong{background:#ffffff0b!important;color:var(--tv-muted)!important}
.profile-frames-section,.shop-inventory{border:1px solid var(--tv-border);border-radius:20px;background:linear-gradient(155deg,var(--tv-surface-2),var(--tv-surface));padding:clamp(1rem,3vw,1.5rem)}
.profile-frames-section .profile-section-heading{margin:0}
.profile-frames-section .shop-section-head p:not(.eyebrow),.shop-help,.shop-balance span,.shop-balance small{color:var(--tv-muted)!important}

/* Der Rahmen liegt auf einer eigenen Shell; das Foto bleibt immer unverzerrt. */
.profile-avatar-shell.profile-frame{
  position:relative;isolation:isolate;display:grid;place-items:center;flex:0 0 154px;width:154px!important;height:154px!important;
  margin:0!important;border:0!important;border-image:none!important;border-radius:50%;outline:0!important;background:none!important;
  box-shadow:none!important;filter:none!important;animation:none!important;transform:none!important;overflow:visible!important
}
.profile-avatar-shell.profile-frame::before{
  content:""!important;position:absolute!important;z-index:0!important;inset:0!important;width:auto!important;height:auto!important;border:0!important;border-radius:50%!important;pointer-events:none!important;
  background-image:var(--frame-image,none),conic-gradient(from 20deg,var(--frame-a),var(--frame-b),#f8ffff,var(--frame-a));
  background-position:center;background-repeat:no-repeat;background-size:contain,100% 100%;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--frame-a) 65%,#fff),0 0 22px var(--frame-a),0 0 38px color-mix(in srgb,var(--frame-b) 58%,transparent);
  -webkit-mask:none!important;mask:none!important;opacity:1!important;filter:none;animation:none!important;transform:none
}
.profile-avatar-shell.profile-frame::after{content:""!important;position:absolute!important;z-index:1!important;inset:10px!important;width:auto!important;height:auto!important;border:0!important;border-radius:50%!important;background:#102744!important;box-shadow:inset 0 0 0 2px var(--frame-b)!important;color:transparent!important;font-size:0!important;text-shadow:none!important;-webkit-mask:none!important;mask:none!important;opacity:1!important;filter:none!important;animation:none!important;transform:none!important;pointer-events:none!important}
.profile-avatar-shell .profile-avatar{
  position:relative;z-index:2;display:block;width:130px!important;height:130px!important;min-width:130px!important;min-height:130px!important;
  margin:0!important;border:3px solid #dffbf6!important;border-image:none!important;border-radius:50%!important;outline:0!important;
  object-fit:cover;box-shadow:none!important;filter:none!important;animation:none!important;transform:none!important
}
.profile-avatar-shell .profile-avatar.avatar-placeholder{display:grid!important;place-items:center!important}
.profile-avatar-shell[data-frame=aurora]{--frame-image:url("../assets/frames/aurora.svg")}.profile-avatar-shell[data-frame=sapphire]{--frame-image:url("../assets/frames/gems.svg")}
.profile-avatar-shell[data-frame=ember],.profile-avatar-shell[data-frame=volcano]{--frame-image:url("../assets/frames/flames.svg")}.profile-avatar-shell[data-frame=jungle]{--frame-image:url("../assets/frames/vines.svg")}
.profile-avatar-shell[data-frame=frost],.profile-avatar-shell[data-frame=arctic]{--frame-image:url("../assets/frames/frost.svg")}.profile-avatar-shell[data-frame=royal],.profile-avatar-shell[data-frame=crown]{--frame-image:url("../assets/frames/crown.svg")}
.profile-avatar-shell[data-frame=neon]{--frame-image:url("../assets/frames/neon.svg")}.profile-avatar-shell[data-frame=dragon]{--frame-image:url("../assets/frames/dragon.svg")}
.profile-avatar-shell[data-frame=diamond]{--frame-image:url("../assets/frames/diamond.svg")}.profile-avatar-shell[data-frame=galaxy]{--frame-image:url("../assets/frames/galaxy.svg")}.profile-avatar-shell[data-frame=cosmos]{--frame-image:url("../assets/frames/cosmos.svg")}
.profile-avatar-shell[data-frame=galaxy]::before,.profile-avatar-shell[data-frame=cosmos]::before{animation:tv-profile-frame-glow 4s ease-in-out infinite!important}
.profile-avatar-shell[data-frame=developer]::before{background-image:conic-gradient(from 12deg,#66ffe4,#3978df 38%,#8b55ef 58%,#3978df 76%,#66ffe4)!important;box-shadow:0 0 0 2px #74f7e25c,0 0 18px #63ffe1a8,0 0 36px #447dff78!important;animation:developer-original-flow 8s linear infinite!important}
.profile-avatar-shell[data-frame=developer]::after{inset:8px!important;background:#0f3961!important;box-shadow:inset 0 0 0 2px #54e8d9,inset 0 0 14px #07183188!important}
@keyframes tv-profile-frame-glow{50%{filter:hue-rotate(45deg) brightness(1.18);transform:scale(1.035)}}
.profile-avatar-shell.developer-avatar-shell::before{inset:0}.profile-avatar-shell.developer-avatar-shell::after{inset:9px}
@media(max-width:650px){.profile-card>.profile-avatar-shell{margin-inline:auto!important}}
@media(prefers-reduced-motion:reduce){.profile-avatar-shell.profile-frame::before{animation:none!important}}
:is(.header-avatar,.leader-avatar,.social-avatar){background-image:var(--avatar-image,none)!important;background-position:center!important;background-size:cover!important}
:is(.header-avatar,.leader-avatar,.social-avatar).profile-frame[data-frame]{border:2px solid var(--frame-a)!important;border-image:none!important;filter:none!important;animation:none!important;background-color:#d7e3ef!important;background-image:var(--avatar-image,none)!important;background-position:center!important;background-size:cover!important}

/* Konto- und Einstellungsdialoge im Startseiten-Look. */
.account-dialog,.settings-dialog,.friend-detail-dialog{
  max-height:min(88vh,820px);overflow-y:auto;border-color:var(--tv-border)!important;background:linear-gradient(155deg,#102744,#0a1c33)!important;
  color:#f4f8ff!important;box-shadow:0 30px 90px #020817d4!important
}
.account-dialog-head,.settings-dialog .info-dialog-head{background:radial-gradient(circle at 85% 0,#55d6be18,transparent 40%),linear-gradient(135deg,#173b68,#102744)!important}
.account-dialog-logo{overflow:hidden}.account-dialog-logo img{display:block;width:42px;height:42px}
.account-benefits{border-color:#294866!important;background:#0d213b!important;color:#b9cce1!important}
.account-guest>.account-auth-view,.account-user{border-color:var(--tv-border)!important;background:linear-gradient(145deg,#173454,#102744)!important;color:#f4f8ff!important;box-shadow:0 16px 38px #02081742!important}
.account-auth-view h3,.account-user h3{color:#fff}.account-card-intro,.account-user p,.account-switch,.account-note{color:#a9bdd6!important}
.account-card-icon{background:#55d6be18!important;color:#6ce2ca!important}.account-form .field span{color:#dfe9f7!important}
.account-form input,.settings-content select{border-color:#58779a!important;background:#0c2039!important;color:#f4f8ff!important}
.account-form input:focus,.settings-content select:focus{border-color:#55d6be!important;outline:3px solid #55d6be28!important}
.account-switch button{color:#72e1cc!important}.account-dialog .account-note{background:#0b1d34!important}
.account-message:not(:empty){background:#0b1d34!important;color:#e8f1fb!important}.account-message.error:not(:empty){background:#391b29!important;color:#ffabb9!important}.account-message.success:not(:empty){background:#10332e!important;color:#80ead5!important}.account-status{color:#72e1cc!important}
.settings-dialog{width:min(560px,calc(100% - 2rem));overflow-y:auto}
.settings-dialog .info-dialog-head{align-items:flex-start}.settings-dialog .info-dialog-head .eyebrow{margin:0;color:#6ce2ca}.settings-dialog .info-dialog-head h2{margin:.1rem 0 0}
.settings-content{background:transparent}.settings-content .field>span,.theme-settings legend{color:#f4f8ff}.settings-content .field small{color:#9fb4ce!important}
.theme-options button{border-color:#426487!important;background:#102b4a!important;color:#eaf2fc!important}
.theme-options button.active{border-color:#55d6be!important;background:#173d5e!important;box-shadow:0 0 0 3px #55d6be20!important}
.settings-status{min-height:1.4em;margin:0;color:#72e1cc;font-weight:750}

/* Daten- und Featureseiten. */
.leaderboard-tabs{position:static!important;display:flex!important;align-items:center!important;flex-direction:row!important;gap:.45rem!important;width:100%!important;padding:.45rem!important;overflow-x:auto;background:transparent!important}
.leaderboard-tabs button,.leaderboard-tabs .country-scope{color:var(--tv-muted)!important}.leaderboard-tabs button:not(.active):hover,.leaderboard-tabs .country-scope:not(.active):hover{background:var(--tv-surface-3)!important;color:var(--tv-text)!important}.leaderboard-tabs button.active,.leaderboard-tabs .country-scope.active{color:#fff!important}
.leader-row,.leaderboard-columns,.leaderboard-context,.shop-pack,.social-section,.friend-request-card{
  border-color:var(--tv-border)!important;background:linear-gradient(145deg,var(--tv-surface-2),var(--tv-surface))!important;color:var(--tv-text)!important
}
.leader-identity>strong,.leader-score>strong,.shop-pack h2,.shop-pack p,.friend-request-card strong{color:var(--tv-text)!important}
.leader-score>span,.leader-row .player-country,.shop-pack>div>p:not(.eyebrow){color:var(--tv-muted)!important}
.leader-row.is-me{border-color:var(--tv-accent)!important;background:linear-gradient(135deg,var(--tv-surface-3),var(--tv-surface-2))!important;box-shadow:inset 4px 0 var(--tv-accent),0 10px 26px #02081742!important}
.leader-score{border-left-color:var(--tv-border)!important}
.leaderboard-context span,.leaderboard-context small{color:var(--tv-muted)!important}.leaderboard-context strong{border-left-color:var(--tv-border)!important;color:var(--tv-accent)!important}
.shop-pack{box-shadow:0 14px 34px #02081742!important}.pack-odds span{background:var(--tv-surface-3)!important;color:var(--tv-text)!important}.pack-odds .rare{background:#173a64!important;color:#9dc6ff!important}.pack-odds .epic{background:#372450!important;color:#ddb8ff!important}.pack-odds .legendary{background:#44350f!important;color:#ffe38b!important}.pack-odds .mythic{background:#143b3c!important;color:#86f5df!important}
.friend-request-card .friend-name>span,.friend-request-card .friend-points small{color:var(--tv-muted)!important}
.social-toolbar .friend-add input{
  border-color:var(--tv-input-border)!important;background:var(--tv-input)!important;color:var(--tv-text)!important
}
.social-toolbar .friend-add input:focus{border-color:var(--tv-accent)!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--tv-accent) 24%,transparent)!important}
.social-toolbar .friend-add input::placeholder{color:var(--tv-muted)}
.battle-comparison,.battle-comparison.gewonnen,.battle-comparison.verloren,.battle-comparison.unentschieden{
  border-color:var(--tv-border)!important;background:linear-gradient(145deg,var(--tv-surface-2),var(--tv-surface))!important;color:var(--tv-text)!important
}
.battle-result-state h2{color:var(--tv-text)!important}.battle-result-state p,.battle-result-state>div>span{color:var(--tv-muted)!important}
.battle-result-symbol{background:#ffffff10!important;color:var(--tv-accent)!important;box-shadow:inset 0 0 0 1px var(--tv-border)!important}
.battle-scoreboard{border-top-color:var(--tv-border)!important}
.battle-scoreboard>div:not(.battle-versus){border-color:var(--tv-border)!important;background:#ffffff0a!important;color:var(--tv-text)!important;box-shadow:none!important}
.battle-scoreboard span,.battle-scoreboard small,.battle-versus{color:var(--tv-muted)!important}.battle-scoreboard strong{color:var(--tv-accent)!important}
.battle-versus{border-color:var(--tv-border)!important;background:var(--tv-surface-3)!important}
.pack-reveal{width:100vw!important;height:100vh!important;max-width:none!important;max-height:none!important;margin:0!important;border:0!important;color:inherit}
.pack-reveal:not([open]){display:none!important}
.pack-reveal::backdrop{background:#020817d9;backdrop-filter:blur(8px)}
.friends-section{overflow:visible!important}.friend-detail-dialog .friend-dialog-body{max-height:60vh;overflow-y:auto}.friend-dialog-head{gap:.75rem}.friend-dialog-head>div,.friend-dialog-head>div>div{min-width:0}.friend-dialog-head h2{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:820px){.leaderboard-columns{display:none!important}.leader-row{grid-template-columns:42px 48px minmax(0,1fr) auto!important}.leader-rank-cell{grid-column:3}.leader-score{grid-column:4;grid-row:1/3}}
@media(max-width:560px){.leader-row{grid-template-columns:38px 44px minmax(0,1fr)!important}.leader-score{grid-column:2/4;grid-row:auto;text-align:left!important}.leader-rank-cell{grid-column:3}.account-dialog,.settings-dialog{width:calc(100% - 1rem);max-height:calc(100vh - 1rem)}}

[data-theme=light] :is(.mode-hero,.quiz-section .section-heading) h1,
[data-theme=light] .quiz-section .section-heading h2{background:linear-gradient(180deg,#14213b,#315f7f)!important;background-clip:text!important;-webkit-background-clip:text!important;color:transparent!important;text-shadow:none!important}
[data-theme=light] .quiz-panel .answer.correct{border-color:#278064!important;background:#ccebdd!important;color:#123d31!important}
[data-theme=light] .quiz-panel .answer.wrong{border-color:#b24a60!important;background:#f3d4da!important;color:#5b1d2b!important}