/* Charaktererstellung und Spielrahmen teilen die Farbvariablen aus app.css. */
.character-switcher { --switch-end-width:36px; position:relative; display:flex; align-items:center; flex:none; box-sizing:border-box; width:236px; gap:0; padding:0; border:1px solid var(--theme-line,#abcfd3); border-radius:24px; background:var(--theme-soft,#eff9f5e6); color:var(--theme-ink,#193f4c); }
.character-switcher form { margin:0; }
.character-switcher button { border:0; background:transparent; color:inherit; cursor:pointer; font:inherit; }
.character-switcher > form { display:flex; align-self:stretch; flex:0 0 var(--switch-end-width); }
.character-switcher > form button { box-sizing:border-box; display:grid; place-items:center; width:100%; min-height:40px; padding:0; line-height:1; border-radius:0; }
.character-switcher > form:first-child button { border-radius:23px 0 0 23px; }
.character-switcher > form:last-child button { border-radius:0 23px 23px 0; }
.character-switcher button:hover,.character-picker summary:hover { background:var(--theme-hover,#dcefed); }
.character-switcher button:focus-visible,.character-picker summary:focus-visible { outline:2px solid var(--teal); outline-offset:2px; }
.character-picker { position:relative; flex:1; min-width:0; margin:0; padding:0; border:0; }
.character-picker summary { display:flex; align-items:center; gap:6px; min-width:0; padding:5px 8px; border-radius:0; cursor:pointer; list-style:none; font-size:12px; }
.character-picker:only-child summary { border-radius:23px; }
@media(min-width:551px) {
    :root .character-picker:only-child summary { justify-content:center; padding-inline:30px; position:relative; }
    .character-picker:only-child summary > .picker-name { flex:0 1 auto; }
    .character-picker:only-child summary > .picker-chevron { position:absolute; right:10px; }
}
.character-picker summary > .picker-name { flex:1; min-width:0; }
.character-picker summary > :is(small,.picker-chevron) { flex:none; }
.character-picker summary::-webkit-details-marker { display:none; }
.character-picker summary > span:not(.picker-avatar) { max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.character-picker img { object-fit:cover; object-position:top; border-radius:50%; flex-shrink:0; }
.character-picker summary > .picker-avatar:first-of-type { position:relative; display:inline-flex; flex-shrink:0; overflow:visible; }
.picker-activity-ring { display:none; position:absolute; inset:-6px; width:46px; height:46px; pointer-events:none; overflow:visible; }
.picker-activity-track { fill:none; stroke:#b8dfda; stroke-width:3; }
.picker-activity-fill { fill:none; stroke:#08a89f; stroke-width:3; stroke-linecap:round; transition:stroke-dashoffset 1s linear; }
@media(max-width:550px) {
    .character-picker summary .picker-avatar { display:inline-flex; width:34px; height:34px; }
    .picker-avatar img { width:34px; height:34px; }
    .picker-activity-ring { display:block; }
}
@media(prefers-reduced-motion:reduce) { .picker-activity-fill { transition:none; } }
.character-picker summary > small { color:var(--theme-gold,#79530e); background:var(--theme-soft,#fff0ce); padding:2px 6px; border-radius:5px; }
.character-picker-list { position:absolute; z-index:20; right:0; top:calc(100% + 12px); width:260px; max-width:85vw; padding:12px; border:1px solid var(--theme-line,#bad2d5); border-radius:16px; background:var(--theme-surface,#f7fcfa); box-shadow:0 12px 35px #193f4c26; }
.character-picker-list > strong { display:block; font-size:12px; padding:6px 8px 10px; }
.character-picker-list button { display:flex; align-items:center; gap:10px; width:100%; padding:10px; border-radius:10px; text-align:left; }
.character-picker-list button small { display:block; font-size:10px; color:var(--theme-muted,#537480); }
.character-picker-list .is-selected { background:var(--theme-hover,#dcefed); }
.character-picker-list > a { display:block; padding:12px 8px 4px; font-size:12px; }
.game-topbar:has(.character-picker[open]) { z-index:90; }
@media(min-width:551px) {
    /* Anchor the menu to the whole control, including its two end surfaces. */
    .character-picker { position:static; }
    .character-picker-list { top:calc(100% + 8px); }
}
@media(max-width:550px) {
    .character-picker { position:static; }
    .character-switcher { position:static; width:auto; padding:0; border:0; background:transparent; }
    .character-switcher > form { display:none; }
    .character-picker summary { width:44px; height:44px; box-sizing:border-box; padding:4px; justify-content:center; border:1px solid var(--theme-line,#abcfd3); background:var(--theme-soft,#eff9f5e6); border-radius:50%; }
    .character-picker summary > img { width:34px; height:34px; }
    .character-picker summary > span,.character-picker summary > small { display:none; }
    .character-picker-list { right:0; }
    .game-topbar:has(.character-switcher) .game-top-actions { display:contents; }
    .game-top-actions > .character-switcher { grid-column:3; grid-row:2; justify-self:end; margin-right:36px; }
}
.directory-panel { margin-top:28px; padding:24px; background:var(--theme-surface,#ffffffd9); border:1px solid var(--theme-line,#dbe8e4); border-radius:20px; }
.directory-toolbar,.directory-pagination { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; }
.directory-action { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; box-sizing:border-box; background:#193f4c; color:white; border:1px solid transparent; border-radius:10px; padding:10px 16px; font:inherit; text-decoration:none; cursor:pointer; }
.directory-action:hover { background:#245563; }
.directory-action:focus-visible { outline:2px solid var(--teal); outline-offset:3px; }
.directory-reset { color:var(--theme-ink,#315c68); background:transparent; border-color:var(--theme-line,#bad2d5); }
.directory-reset:hover { background:var(--theme-hover,#e5f3f1); }
.directory-filters { display:flex; flex-wrap:wrap; align-items:end; gap:14px; margin:24px 0 12px; }
.directory-filters label { display:grid; gap:8px; font-size:13px; }
.directory-filters input,.directory-filters select { min-height:44px; box-sizing:border-box; padding:10px 12px; border:1px solid var(--theme-line,#bad2d5); border-radius:10px; font:inherit; background:var(--theme-surface,white); color:var(--theme-ink,#193f4c); max-width:100%; }
.directory-filters .online-filter { position:relative; display:flex; align-items:center; gap:10px; min-height:44px; cursor:pointer; }
.directory-filters .online-filter input { position:absolute; width:1px; height:1px; min-height:0; padding:0; margin:0; opacity:0; }
.online-switch { display:inline-block; position:relative; width:38px; height:22px; flex-shrink:0; border-radius:20px; background:var(--theme-soft,#c5d7da); box-shadow:inset 0 0 0 1px #78989e40; }
.online-switch::after { content:""; position:absolute; left:3px; top:3px; width:16px; height:16px; border-radius:50%; background:var(--theme-surface,white); box-shadow:0 1px 3px #163e4b30; }
.online-filter input:checked + .online-switch { background:#138d98; }
.online-filter input:checked + .online-switch::after { transform:translateX(16px); }
.online-filter input:focus-visible + .online-switch { outline:2px solid var(--teal); outline-offset:3px; }
.directory-note { color:var(--theme-muted,#537480); font-size:12px; line-height:1.6; }
.directory-table-wrap { overflow:auto; }
.directory-table { width:100%; border-collapse:collapse; margin:18px 0; text-align:left; font-size:14px; }
.directory-table th { font-size:12px; color:var(--theme-muted,#537480); font-weight:600; }
.directory-table td,.directory-table th { padding:14px 10px; border-bottom:1px solid var(--theme-line,#dbe8e4); }
.directory-table td:last-child,.directory-table th:last-child { text-align:right; }
.directory-table .is-self { background:var(--theme-soft,#e2f2ef); }
.directory-player { display:flex; align-items:center; gap:12px; font-weight:600; }
.directory-player img { object-fit:cover; object-position:top; border-radius:50%; flex-shrink:0; }
.directory-player small { background:var(--theme-soft,#d8eceb); border-radius:8px; padding:3px 6px; margin-left:4px; }
.rank-number { font-weight:700; color:#17838e; }
.directory-pagination { font-size:13px; }
@media(max-width:550px) { .directory-panel { padding:14px; } .directory-filters label { width:100%; } .directory-table td,.directory-table th { padding:12px 5px; } .directory-player { gap:6px; } .directory-player img { width:32px; height:32px; } .directory-player span { overflow-wrap:anywhere; min-width:65px; } }
.character-page, .game-frame {
    min-height: 100vh;
    background: linear-gradient(180deg, var(--theme-soft,#d0edf4), var(--theme-surface,#f4f9f6) 550px);
}
.creation-wrap { max-width: 1280px; padding-block: 44px 65px; }
.creation-heading { margin-bottom: 38px; }
.creation-heading h1 { font-size: clamp(34px, 3.3vw, 48px); letter-spacing: -1.8px; margin: 15px 0; }
.creation-heading > p { color: var(--muted); font-size: 14px; line-height: 1.8; }
.race-section { min-width: 0; max-width: 100%; }
.character-creation { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 34px; align-items: start; }
.creation-section-title { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.creation-section-title h2 { margin: 0; font-size: 20px; letter-spacing: -.5px; }
.step-number { display: grid; place-items: center; border: 1px solid var(--theme-line,#afcece); border-radius: 50%; width: 28px; height: 28px; flex-shrink: 0; color: var(--teal); font-size: 10px; }
.race-hint { color: var(--muted); font-size: 12px; margin-bottom: 20px; }
.race-carousel { display: flex; gap: 0; position: relative; padding: 24px max(4px, calc((100% - 310px) / 2)) 30px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; cursor: grab; touch-action: pan-x; perspective: 1100px; }
.race-carousel::-webkit-scrollbar { display: none; }
.race-carousel.is-enhanced { scroll-snap-type: none; scroll-behavior: auto; overflow-x: hidden; touch-action: pan-y; }
/* Card emphasis follows the same continuous position as scrolling, including the seam. */
.race-carousel.is-enhanced .race-card { transform: scale(calc(.86 + .18 * var(--race-focus,0))) translateY(calc(14px - 19px * var(--race-focus,0))); opacity: calc(.62 + .38 * var(--race-focus,0)); filter: saturate(calc(.72 + .28 * var(--race-focus,0))) brightness(calc(.96 + .04 * var(--race-focus,0))); transition: none; }
.race-carousel.is-enhanced .race-card .race-card-surface { border-color: color-mix(in srgb, var(--teal) calc(100% * var(--race-focus,0)), transparent); box-shadow: 0 22px 42px rgb(20 87 102 / calc(.22 * var(--race-focus,0))), 0 0 0 1px rgb(255 255 255 / calc(.72 * var(--race-focus,0))); transition: none; }
.race-carousel.is-enhanced .race-card .race-check { opacity: var(--race-focus,0); }
.race-carousel.is-enhanced:has(.race-card:only-child) { justify-content: center; padding-inline: 24px; cursor: default; }
.race-carousel.is-enhanced:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 18px; }
.race-carousel.is-enhanced.is-pointer-focused:focus { outline: none; }
.race-carousel.is-dragging { cursor: grabbing; user-select: none; }
.race-carousel img { user-select: none; -webkit-user-drag: none; pointer-events: none; }
.race-card { flex: 0 0 min(310px, calc(100% - 34px)); min-width: 0; position: relative; cursor: pointer; scroll-snap-align: center; margin-inline: -34px; z-index: 1; transform: scale(.86) translateY(14px) rotateY(0deg); opacity: .62; transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .28s ease, filter .28s ease; }
.race-card:first-child { margin-left: 0; }
.race-card:last-child { margin-right: 0; }
.race-card.is-active { z-index: 3; transform: scale(1.04) translateY(-5px); opacity: 1; filter: none; }
.race-card:not(.is-active) { filter: saturate(.72) brightness(.96); }
.race-card > input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.race-card-surface { height: 100%; overflow: hidden; border: 2px solid transparent; border-radius: 18px; background: var(--theme-surface,#fff); box-shadow: 0 7px 25px #264c5a0a; transition: border-color .15s, box-shadow .15s; }
.race-carousel:not(.is-enhanced) .race-card input:checked + .race-card-surface, .race-card.is-active .race-card-surface { border-color: var(--teal); }
.race-card.is-active .race-card-surface { box-shadow: 0 22px 42px #14576638, 0 0 0 1px #ffffffb8; }
.race-card input:focus-visible + .race-card-surface { outline: 3px solid var(--ink); outline-offset: 3px; }
.race-portrait { position: relative; aspect-ratio: 3 / 4; background: #d4edf0; overflow: hidden; }
.race-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.race-check { position: absolute; right: 12px; top: 12px; display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: var(--teal); color: #fff; opacity: 0; }
.race-carousel:not(.is-enhanced) .race-card input:checked + .race-card-surface .race-check, .race-card.is-active .race-check { opacity: 1; }
.race-description { padding: 20px 17px; }
.race-description .eyebrow { font-size: 8px; }
.race-description h3 { margin: 9px 0; font-size: 21px; letter-spacing: -.6px; }
.race-description p { font-size: 12px; line-height: 1.7; color: var(--muted); }
.race-controls:not([hidden]) { display: flex; align-items: center; justify-content: center; gap: 25px; margin-top: 14px; }
.carousel-arrow { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--theme-line,#bdd4d1); background: var(--theme-surface,#ffffffa3); color: var(--ink); cursor: pointer; font-size: 18px; }
.carousel-arrow:disabled { opacity: .35; cursor: default; }
.race-controls { min-width: 0; }
.race-position { min-width: 0; text-align: center; font-size: 12px; color: var(--teal); letter-spacing: 5px; text-shadow: 0 1px 2px #ffffff; }
.character-details { padding: 27px; background: var(--theme-surface,#ffffffd9); border: 1px solid var(--theme-line,#dbe8e4); border-radius: 18px; }
.character-details .creation-section-title { align-items: start; gap: 10px; margin-bottom: 25px; }
.character-details h2 { font-size: 19px; line-height: 1.4; }
.character-details .form-field small { font-size: 10px; }
.selection-summary { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 12px; padding-block: 23px; margin-top: 8px; border-bottom: 1px solid var(--line); }
.selection-summary > span { color: var(--muted); }
.selection-summary > strong { color: var(--teal); }
.initial-values { text-align: center; padding: 23px 0 17px; }
.initial-values > span { display: block; font-size: 9px; letter-spacing: 1.5px; color: var(--muted); }
.initial-values > strong { display: block; font-size: 47px; letter-spacing: -2px; line-height: 1.6; }
.initial-values > strong > small { font-size: 13px; letter-spacing: 1px; color: var(--teal); }
.initial-stat-list { display: flex; justify-content: center; flex-wrap: wrap; gap: 7px; }
.initial-stat-list > span { background: var(--theme-soft,#eef5f2); border-radius: 5px; padding: 6px; font-size: 10px; color: var(--muted); }
.starting-note { font-size: 11px; line-height: 1.75; color: var(--muted); margin-bottom: 23px; }
.create-character-button { width: 100%; border: 0; font: inherit; font-size: 13px; cursor: pointer; }
.character-details .form-errors { margin-bottom: 18px; }
.game-topbar { display: flex; justify-content: space-between; align-items: center; min-height: 95px; padding: 20px 36px; border-bottom: 1px solid var(--line); gap: 20px; background: var(--theme-surface,#ffffff38); }
.game-top-actions { display: flex; align-items: center; gap: 24px; }
.top-character-name { font-size: 13px; overflow-wrap: anywhere; }

.desktop-sidebar{ padding: 35px 22px; border-right: 1px solid var(--line); background: var(--theme-surface,#ffffff55); }

.game-main { padding: 40px clamp(24px, 4vw, 65px) 60px; min-width: 0; max-width: 1400px; width: 100%; }
.overview-heading h1 { font-size: 37px; letter-spacing: -1.3px; margin: 13px 0; }
.overview-heading p { font-size: 14px; line-height: 1.8; color: var(--muted); overflow-wrap: anywhere; }
.character-profile { display: grid; grid-template-columns: minmax(180px, 32%) 1fr; background: var(--theme-surface,#fff); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; margin-top: 30px; }
.profile-portrait { background: var(--theme-soft, #d5eeed); min-height: 310px; }
.profile-portrait img { display: block; width: 100%; height: 100%; max-height: 390px; object-fit: cover; object-position: 50% 15%; }
.profile-details { padding: 32px; align-self: center; min-width: 0; }
.profile-details h2 { font-size: 32px; margin: 10px 0; overflow-wrap: anywhere; }
.profile-details > p { font-size: 13px; line-height: 1.7; color: var(--muted); max-width: 470px; }
.ki-display { margin-top: 25px; border-top: 1px solid var(--line); padding-top: 20px; }
.ki-display > span { font-size: 9px; letter-spacing: 1.8px; color: var(--teal); display: block; }
.ki-display strong { display: block; font-size: 52px; letter-spacing: -2px; line-height: 1.5; }
.ki-display small { font-size: 16px; letter-spacing: 1px; color: var(--teal); }
.profile-details .ki-explanation { font-size: 10px; }
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 23px; }
.stat-card { border: 1px solid var(--line); border-radius: 13px; background: var(--theme-surface,#ffffffc4); padding: 20px 16px; display: flex; gap: 12px; align-items: center; }
.stat-symbol { width: 33px; height: 38px; border-radius: 9px; display: grid; place-items: center; font-size: 23px; flex-shrink: 0; }
.stat-symbol.health { color: var(--theme-danger,#bd5d65); background: var(--theme-soft,#fbeded); }
.stat-symbol.energy { color: var(--theme-accent,#29939c); background: var(--theme-soft,#e1f3f4); }
.stat-symbol.attack { color: var(--theme-gold,#b37e31); background: var(--theme-soft,#fcf0d9); }
.stat-symbol.defense { color: var(--theme-muted,#6782b5); background: var(--theme-soft,#e9eef8); }
.stat-card div > span { font-size: 10px; color: var(--muted); display: block; }
.stat-card strong { font-size: 25px; display: block; margin-top: 4px; }
.stat-card small { font-size: 10px; color: var(--muted); font-weight: 500; }

@media (max-width: 1100px) {
    .character-creation { grid-template-columns: minmax(0, 1fr) 290px; gap: 22px; }
    .character-details { padding: 22px; }
    .race-carousel { gap: 0; }
    .race-description { padding: 15px 12px; }
    .race-description h3 { font-size: 18px; }

    .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 850px) {
    .character-creation { grid-template-columns: minmax(0, 1fr); }
    .character-details { max-width: 600px; width: 100%; justify-self: center; }
    .race-portrait { aspect-ratio: 4 / 5; }

    .game-main { padding: 28px 22px 45px; }
    .game-topbar { padding: 18px 22px; min-height: 88px; }
    .game-topbar:has(.character-switcher) { display:grid; grid-template-columns:1fr auto; gap:12px; }
    .game-topbar:has(.character-switcher) .sky-controls { order:initial; margin:0; }
    .game-topbar:has(.character-switcher) .game-top-actions { grid-column:1 / -1; flex-wrap:wrap; justify-content:space-between; gap:10px; }
    .game-topbar:has(.character-switcher) .online-count { white-space:nowrap; }
    .top-character-name { display: none; }
}
@media (max-width: 550px) {
    .creation-wrap { padding-top: 28px; }
    .character-page .site-header { flex-wrap: wrap; gap: 16px; }
    .character-page .site-header > a:not(.brand) { font-size: 12px; }
    .race-controls:not([hidden]) { gap: 12px; }
    .carousel-arrow { flex-shrink: 0; }
    .race-position { letter-spacing: 2px; }
    .creation-heading { margin-bottom: 25px; }
    .creation-heading h1 { font-size: 34px; }
    .race-carousel { gap: 0; padding-inline: 6%; }
    .race-card { flex-basis: min(310px, 88%); margin-inline: -18%; }
    .race-card:first-child { margin-left: 0; }
    .race-card:last-child { margin-right: 0; }
    .race-portrait { aspect-ratio: 1 / 1; }
    .race-portrait img { object-position: 50% 18%; }
    .race-description { padding: 18px; }
    .race-description h3 { font-size: 23px; }
    .race-description p { min-height: 40px; }
    .character-profile { grid-template-columns: 1fr; }
    .profile-portrait { height: 260px; min-height: 0; }
    .profile-portrait img { object-position: 50% 15%; }
    .profile-details { padding: 24px; }
    .profile-details h2 { font-size: 28px; }
    .stat-card { padding: 15px 12px; gap: 10px; }
    .stat-grid { gap: 12px; }
    .stat-card strong { font-size: 23px; }
    .game-main { padding-inline: 18px; }
}
@media (prefers-reduced-motion: reduce) {
    .race-card, .race-card-surface { transition: none; }
}

/* Keep the mobile header's two rows identical with and without a character picker. */
@media (max-width:550px) {
    .game-topbar:has(.character-switcher) { grid-template-columns:1fr auto 1fr; gap:8px 12px; }
    .game-topbar:has(.character-switcher) > .brand { grid-column:1; grid-row:1; }
    .game-topbar:has(.character-switcher) .online-count { grid-column:2; grid-row:1; max-width:120px; white-space:normal; }
    .game-topbar:has(.character-switcher) .game-top-actions > .game-logout { grid-column:3; grid-row:1; justify-self:end; }
    .game-topbar:has(.character-switcher) .sky-controls { grid-column:1 / -1; grid-row:2; justify-self:center; }
    .game-topbar:has(.character-switcher) .character-picker-list { right:22px; top:calc(100% - 8px); }
}
@media (max-width:430px) {
    .game-topbar:has(.character-switcher) { padding-inline:14px; column-gap:8px; }
    .game-topbar:has(.character-switcher) .brand { gap:7px; font-size:8px; }
    .game-topbar:has(.character-switcher) .brand b { font-size:18px; }
    .game-topbar:has(.character-switcher) .dragonball { width:32px; height:32px; flex-shrink:0; }
    .game-topbar:has(.character-switcher) .online-count { max-width:105px; font-size:10px; }
    .game-topbar:has(.character-switcher) .logout-button { padding-inline:12px; font-size:11px; }
    .game-top-actions > .character-switcher { margin-right:24px; }
}
/* Restricted accounts use the familiar game shell, without game controls. */
.restricted-name { text-decoration:line-through; text-decoration-thickness:1.5px; color:var(--theme-muted,#647e87); }
.restricted-avatar,.restricted-portrait,.restricted-sidebar>img { filter:grayscale(1); opacity:.72; }
.restriction-icon { display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; margin-inline:3px; color:var(--theme-gold,#94602a); font-size:14px; line-height:1; }
.restriction-icon.struck-icon { text-decoration:line-through; text-decoration-thickness:2px; }
.restricted-card { display:grid; grid-template-columns:minmax(160px,32%) 1fr; margin-top:28px; border:1px solid var(--theme-line,#d4e5e7); border-radius:24px; overflow:hidden; background:var(--theme-surface,#ffffffed); }
.restricted-card>div { padding:clamp(24px,4vw,48px); min-width:0; }
.restricted-card h2 { margin:0 0 22px; }
.restricted-portrait { width:100%; height:100%; object-fit:cover; min-height:380px; max-height:650px; }
.restriction-explanation { padding:18px 20px; border-radius:14px; background:var(--theme-soft,#fff3dc); margin-bottom:16px; }
.restriction-explanation p { margin:8px 0; overflow-wrap:anywhere; }
.restricted-gil { display:flex; align-items:center; gap:16px; margin:24px 0; }
.restricted-gil img { flex:none; }
.restricted-sidebar { display:grid; justify-items:center; gap:12px; padding:30px 12px; text-align:center; }
.restricted-sidebar>img { border-radius:50%; object-fit:cover; }
.restricted-sidebar span { font-size:12px; }
.restricted-frame .game-topbar { justify-content:space-between; }
.restricted-frame .game-main>h1 { font-size:clamp(30px,3vw,40px); margin:12px 0 24px; }

@media(max-width:700px) { .restricted-card { grid-template-columns:1fr; } .restricted-portrait { height:220px; min-height:0; object-position:50% 25%; } .restricted-card .admin-actions { flex-direction:column; align-items:stretch; } }
@media(max-width:550px) { .restricted-frame .game-topbar:has(.character-switcher) { min-height:130px; } }

.game-topbar:has(.game-sound[open]) { z-index:30; }

/* Equal outer tracks keep the day centered independently of the action group. */
@media(min-width:551px){
 .game-frame .game-topbar:has(.sky-controls){display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px 20px}
 .game-frame .game-topbar:has(.sky-controls)>.brand{grid-column:1;grid-row:1;justify-self:start}
 .game-frame .game-topbar:has(.sky-controls)>.sky-controls{grid-column:2;grid-row:1;justify-self:center;order:initial;margin:0}
 .game-frame .game-topbar:has(.sky-controls)>.game-top-actions{grid-column:3;grid-row:1;display:flex;justify-content:flex-end;justify-self:end;align-items:center;gap:12px;min-width:0;max-width:100%;flex-wrap:wrap}
}
@media(min-width:551px) and (max-width:1500px){
 .game-frame .game-topbar:has(.sky-controls){grid-template-columns:auto minmax(0,1fr)}
 .game-frame .game-topbar:has(.sky-controls)>.game-top-actions{grid-column:2}
 .game-frame .game-topbar:has(.sky-controls)>.sky-controls{grid-column:1/-1;grid-row:2}
}
/* Just above the two-row breakpoint the centered clock leaves a narrower
   action track. Compress secondary presence text instead of wrapping logout. */
@media(min-width:1501px) and (max-width:1800px){
 .game-frame .game-topbar:has(.sky-controls)>.game-top-actions{gap:8px;flex-wrap:nowrap}
 .game-frame .game-topbar:has(.sky-controls) .online-count{max-width:110px;white-space:normal;font-size:10px}
}
/* The compact mobile combat header intentionally has no day display. */
@media(min-width:551px) and (max-width:600px){
 .game-frame:has(.arena) .game-topbar:has(.sky-controls){display:flex}
}
@media(min-width:551px) and (max-width:1100px){
 .game-frame .game-topbar:has(.sky-controls) .online-count{max-width:110px;white-space:normal;font-size:10px}
 .game-frame .game-topbar:has(.sky-controls) .character-picker summary>span:not(.picker-avatar){max-width:100px}
 .game-frame .game-topbar:has(.sky-controls) .game-top-actions{gap:8px}
}

/* Keep the admin shortcut beside the profile identity. */
.profile-identity-row { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.profile-identity-row>div { min-width:0; }
.profile-identity-row .profile-admin-link { flex-shrink:0; }
.profile-details:has(.profile-admin-link) { align-self:stretch; }
@media(max-width:600px){.profile-identity-row .profile-admin-link{width:40px;min-height:40px}}