/* Kronen: Symbol, Rang-Abzeichen, Ergebnis-Bildschirm nach einem Sieg. Flach, keine Verläufe. */
.crown { width: 1em; height: 1em; fill: currentColor; flex: none; vertical-align: -.125em; }

.rkbadge { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.rkbadge .crown { color: var(--g); width: 15px; height: 15px; }
.rkbadge b { color: var(--text); font-size: 12px; }
.rkbadge em { font-style: normal; color: var(--g); }
#homeRank { display: block; }
#profRank { margin-top: 6px; }
#profRank .rkbadge { font-size: 12px; }

.crown-res { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: #060607e6; padding: 24px; cursor: pointer; animation: crFade .25s ease; }
.crown-res[hidden] { display: none; }
.cr-card { width: 100%; max-width: 360px; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 26px 20px 18px; border: 1px solid var(--line-strong); background: var(--bg); animation: crIn .45s cubic-bezier(.2,1.4,.4,1); }
.cr-title { font-family: var(--display); font-stretch: 125%; font-weight: 900; font-size: 28px; white-space: nowrap; text-transform: uppercase; letter-spacing: .02em; color: var(--good); }
.cr-chips { font-family: var(--display); font-weight: 800; font-size: 28px; color: var(--text); display: flex; align-items: baseline; gap: 6px; }
.cr-chips small { font-size: 18px; color: var(--warn); }
.cr-crowns { display: flex; gap: 14px; margin: 4px 0; }
.cr-slot { color: #f2f1ee1f; display: inline-flex; }
.cr-slot .crown { width: 54px; height: 54px; }
.cr-slot:nth-child(2) .crown { width: 66px; height: 66px; }
.cr-slot.got { color: var(--g); animation: crPop .5s cubic-bezier(.3,1.8,.5,1); }
.cr-gain { font-family: var(--display); font-weight: 800; font-size: 22px; color: var(--faint); }
.cr-gain.got { color: var(--warn); }
.cr-tier { display: flex; align-items: center; gap: 8px; width: 100%; font-size: 15px; }
.cr-gem { color: var(--g); display: inline-flex; }
.cr-gem .crown { width: 22px; height: 22px; }
.cr-of { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.cr-bar { width: 100%; height: 8px; background: var(--sunken); border: 1px solid var(--line); }
.cr-bar i { display: block; height: 100%; transition: width .7s cubic-bezier(.22,1,.36,1); }
.cr-up { font-family: var(--mono); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--warn); }
.cr-pack { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--good); color: var(--good); font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.cr-new { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.cr-new span { padding: 3px 8px; background: var(--c); color: #fff; font-size: 12px; font-weight: 700; }
.cr-tap { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
@keyframes crFade { from { opacity: 0; } }
@keyframes crIn { from { transform: scale(.85) translateY(20px); opacity: 0; } }
@keyframes crPop { 0% { transform: scale(.2) rotate(-20deg); } 60% { transform: scale(1.3) rotate(6deg); } 100% { transform: none; } }

/* Rang-Insel auf der Startseite */
.arena { --g: var(--warn); display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 14px 10px 6px; border: 1px solid var(--line); border-left: 3px solid var(--g); background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: transform .18s cubic-bezier(.3,1.6,.5,1); }
.arena:active { transform: scale(.98); }
.arena-art { position: relative; flex: 0 0 42%; }
.island { display: block; width: 100%; height: auto; animation: float 4.5s ease-in-out infinite; }
.island-crown { position: absolute; left: 50%; top: -4px; translate: -50% 0; color: var(--g); animation: float 3s ease-in-out -1s infinite; }
.island-crown .crown { width: 30px; height: 30px; display: block; }
.arena-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.arena-info small { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.arena-info b { font-family: var(--display); font-stretch: 125%; font-weight: 900; font-size: 26px; line-height: 1; color: var(--g); text-transform: uppercase; }
.arena-bar { height: 6px; background: var(--sunken); border: 1px solid var(--line); margin-top: 4px; }
.arena-bar i { display: block; height: 100%; background: var(--g); }
.arena-info span { font-family: var(--mono); font-size: 11px; color: var(--muted); }