#title .title-settings {
  position: absolute;
  z-index: 2;
  top: max(10px, calc(var(--safe-top, 0px) + 6px));
  right: max(10px, calc(var(--safe-right, 0px) + 6px));
  width: clamp(44px, 6.5dvh, 60px);
  height: clamp(44px, 6.5dvh, 60px);
  min-height: 44px;
  padding: 0;
  border: 2px solid #0c151f;
  border-radius: 50%;
  background: #1a2837d9;
  color: #ffebc4;
  box-shadow: inset 0 0 0 1px #9ca8b04d, 0 3px 8px #080e13a8;
}
#title .title-settings .button-icon { display: grid; place-items: center; }
#title .title-settings svg { width: 56%; height: 56%; min-width: 23px; min-height: 23px; }
#title .title-settings-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
#title .title-settings:not(:disabled):hover { border-color: #fff0d0; background: #38495d; }

/* A permanent field journal; its frame and action shelf stay inside the viewport. */
#profile.overlay {
  --career-accent: #d6ed9b; --career-trim: #72897c; --chapter-color: #c9e39b;
  position: fixed; inset: var(--viewport-top, 0px) 0 auto;
  height: var(--viewport-height, 100dvh); min-height: 0;
  padding: max(10px, var(--safe-top, env(safe-area-inset-top))) max(12px, var(--safe-right, env(safe-area-inset-right)))
    calc(var(--safe-bottom, env(safe-area-inset-bottom)) + 16px) max(12px, var(--safe-left, env(safe-area-inset-left)));
  overflow: hidden; grid-template-rows: minmax(0, 1fr);
  background: radial-gradient(ellipse at 65% 12%, #36554b9c, #081319ef 80%);
}
#profile .career-panel {
  --career-shape: polygon(0 0, calc(100% - 29px) 0, 100% 29px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
  position: relative; isolation: isolate; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto;
  width: min(100%, 1080px); max-height: 100%; min-height: 0; padding: 0;
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
}
#profile .career-panel::before, #profile .career-panel::after { content: ''; position: absolute; z-index: -1; inset: 0; clip-path: var(--career-shape); pointer-events: none; }
#profile .career-panel::before { background: linear-gradient(130deg, #e0e6b0, #7d9b8d 28%, #36545b 75%, #d9c591); }
#profile .career-panel::after {
  inset: 1px;
  background: linear-gradient(90deg, #d6ed9b 0 74px, #7a9684 74px 93px, transparent 93px) left top / 100% 3px no-repeat,
    repeating-linear-gradient(130deg, #d4dda83b 0 2px, transparent 2px 6px) right 41px top 9px / 33px 6px no-repeat,
    radial-gradient(ellipse at 95% 0, #42605766, transparent 65%), linear-gradient(145deg, #20353c, #111f28 68%);
}
#profile .career-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: clamp(16px, 3vw, 27px) clamp(16px, 3vw, 28px) 15px; }
#profile .career-heading > div:first-child { min-width: 0; }
#profile .career-heading .eyebrow { margin: 0 0 8px; color: #c9ddb0; font-size: 10px; }
#profile-title { font-size: clamp(30px, 5.5vw, 54px); }
#profile .career-token-bank { flex: 0 0 auto; text-align: right; padding: 8px 10px; border: 1px solid #a28e5c; border-radius: 2px 9px 2px 9px; background: #172520; }
#profile .career-token-bank .micro { display: block; color: #dcc596; font-size: 9px; }
#profile .career-token-bank strong { display: flex; justify-content: end; align-items: center; gap: 7px; color: #ffdda2; font: 800 clamp(20px, 3vw, 30px)/1.25 var(--mono); }
#profile .career-tabs { display: flex; gap: 4px; margin: 0 clamp(16px, 3vw, 28px); border-bottom: 1px solid #536f6b; }
#profile .career-tabs button { flex: 0 1 210px; min-height: 48px; padding: 9px 13px; text-align: left; color: #c0d0cb; border: 1px solid transparent; border-bottom: 3px solid transparent; border-radius: 3px 9px 0 0; background: #12222999; font-size: 14px; font-weight: 800; }
#profile .career-tabs button[aria-selected="true"] { color: #ecf6c5; border-color: #627e70; border-bottom-color: #d9eea4; background: linear-gradient(130deg, #42604b, #203b38); }
#profile .career-tabs span { margin-left: 6px; color: #d6e4b4; font: 700 10px var(--mono); white-space: nowrap; }
#profile .career-scroll { min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #7d9c86 #14262c; padding: 19px clamp(16px, 3vw, 28px) 22px; -webkit-overflow-scrolling: touch; scroll-padding-block: 14px; }
#profile .career-scroll:focus-visible, #profile .career-scroll[data-pad-focus] { outline-offset: -3px; }
#profile .career-hero { display: grid; grid-template-columns: minmax(220px, .9fr) minmax(0, 1.3fr); gap: 15px; }
#profile .career-character-bay { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 13px; min-width: 0; padding: 12px; border: 1px solid #5e7c70; border-radius: 2px 16px 2px 12px; background: linear-gradient(130deg, #345044, #182e32 82%); }
#profile .career-portrait-stage { width: 112px; height: 132px; display: grid; align-items: center; border: 1px solid #6d887552; border-radius: 3px 20px 3px 20px; background: radial-gradient(ellipse at 50% 70%, #b7d59f5c, transparent 72%), repeating-linear-gradient(90deg, transparent 0 18px, #e1e9bf14 19px 20px) bottom / 100% 5px no-repeat, #13282b; }
#profile-character { display: block; width: 110px; height: 110px; }
#profile .career-character-name { min-width: 0; }
#profile .career-character-name .micro { color: #b8cda9; font-size: 9px; }
#profile-character-name { font-size: clamp(23px, 3vw, 31px); line-height: 1; letter-spacing: -.045em; margin: 7px 0; }
#profile-character-class { color: #d0dfc5; margin: 0; font-size: 13px; }
#profile .career-rank-bay { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; column-gap: 14px; padding: 13px 16px; border: 1px solid var(--chapter-color); border-radius: 3px 18px 3px 12px; background: radial-gradient(ellipse at 0 0, color-mix(in srgb, var(--chapter-color) 19%, transparent), transparent 82%), #152831; }
#profile .career-rank-art { display: grid; place-items: center; color: var(--chapter-color); }
#profile .career-rank-art svg { width: 104px; height: 112px; filter: drop-shadow(0 5px 5px #0005); }
#profile-rank-chapter { color: var(--chapter-color); font-size: 9px; }
#profile .career-rank-number { margin: 5px 0; font-size: 18px; font-weight: 700; line-height: 1.1; white-space: nowrap; }
#profile .career-rank-number strong { font: 900 clamp(37px, 4.5vw, 52px)/1 var(--mono); letter-spacing: -.07em; color: #fff3d7; }
#profile .career-rank-number > span { color: #9db3b4; margin-left: 8px; font: 600 12px var(--mono); }
#profile-rank-name { color: var(--chapter-color); margin: 0; font-size: 15px; }
#profile .career-rank-progress { grid-column: 1/-1; }
#profile .career-meter { height: 9px; padding: 2px; background: #071820; border: 1px solid #66827c; border-radius: 0 5px 0 5px; overflow: hidden; }
#profile .career-meter > span { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, #8fb8a3, var(--chapter-color)); }
#profile-xp-detail { margin: 5px 0 3px; color: #ccdcd4; font: 650 10px/1.4 var(--mono); }
#profile-rank-reward { margin: 0; color: #b8d39f; font-size: 11px; line-height: 1.35; }
#profile .career-stat-grid { margin: 15px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; border: 1px solid #4b6869; border-radius: 2px 12px 2px 12px; overflow: hidden; background: #4b6869; }
#profile .career-stat-grid > div { min-width: 0; padding: 11px 12px; background: #10222b; }
#profile dt { font: 700 9px/1.35 var(--mono); letter-spacing: .055em; color: #a9c1bb; }
#profile dd { margin: 4px 0 0; font: 800 clamp(20px, 3vw, 28px)/1.2 var(--mono); letter-spacing: -.03em; color: #f6ebce; overflow-wrap: anywhere; }
#profile .career-section { margin-top: 23px; }
#profile .career-section-heading { display: flex; gap: 8px; align-items: center; justify-content: space-between; padding-bottom: 8px; border-bottom: 1px solid #4c6e69; }
#profile .career-section h3 { margin: 0; font-size: 19px; letter-spacing: -.03em; }
#profile .career-section-heading .micro { color: #b9cfa5; font-size: 9px; text-align: right; }
#profile .career-help { color: #a7c0be; font-size: 11px; margin: 7px 0 10px; line-height: 1.4; }
#profile .career-favorites { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
#profile .career-favorite { position: relative; min-width: 0; border: 1px solid #57716e; border-radius: 2px 12px 2px 9px; padding: 10px; background: linear-gradient(145deg, #2b4142, #132630); }
#profile .career-favorite-rank { position: absolute; top: 7px; left: 8px; color: #c9dab0; font: 700 10px var(--mono); }
#profile .career-favorite canvas { display: block; width: min(100%, 140px); height: 76px; margin: 0 auto; }
#profile .career-favorite h4 { margin: 3px 0 7px; font-size: 14px; line-height: 1.15; }
#profile .career-favorite p { margin: 2px 0; color: #b8cbc7; font: 650 10px/1.35 var(--mono); }
#profile .career-favorite p strong { color: #e6f0c4; }
#profile .career-favorite-empty { grid-column: 1/-1; padding: 20px 14px; border: 1px dashed #58726e; border-radius: 2px 10px 2px 10px; color: #a9bfbd; font-size: 13px; background: #10232c; }
#profile .career-records { display: grid; gap: 5px; margin-top: 9px; }
#profile .career-record { display: grid; grid-template-columns: minmax(130px, 1fr) auto auto; align-items: center; column-gap: 12px; padding: 9px 11px; border-inline-start: 2px solid #88b89f; background: #10232bcc; color: #d1dfd8; font-size: 12px; }
#profile .career-record strong { font-size: 12px; }
#profile .career-record span { color: #adc5bc; font: 650 10px var(--mono); white-space: nowrap; }
#profile .career-tracking-note { margin: 18px 0 0; color: #91aaa7; font-size: 11px; line-height: 1.5; border-top: 1px solid #3c5a5e; padding-top: 11px; }
#profile .career-achievement-summary { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
#profile-completion-art { color: #c9e69b; flex: 0 0 68px; }
#profile-completion-art svg { width: 68px; height: 74px; }
#profile .career-achievement-summary .micro { color: #c9ddb0; font-size: 9px; }
#profile .career-achievement-summary h3 { margin: 5px 0; font-size: clamp(21px, 3vw, 29px); letter-spacing: -.04em; line-height: 1.1; }
#profile .career-achievement-summary p { margin: 0; font-size: 12px; color: #a7c2b6; }
#profile .career-filters { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: 9px; padding: 10px; border: 1px solid #536f69; border-radius: 2px 12px 2px 9px; background: #1c3336; }
#profile .career-filters label { display: grid; min-width: 0; gap: 6px; font-size: 10px; color: #d0ddc2; }
#profile .career-filter { display: grid; min-width: 0; align-content: start; gap: 6px; }
#profile .career-filters input, #profile .career-filters select { display: block; width: 100%; min-width: 0; min-height: 46px; padding: 8px 9px; background: #0e2029; border: 1px solid #6a8680; border-radius: 2px 7px 2px 7px; color: #e8edda; }
#profile .career-filters input::placeholder { color: #9db6b3; }
#profile .career-filters .choice-trigger { min-height: 46px; padding: 9px; background: linear-gradient(115deg, #29483e, #142d33); }
#profile .career-filters .choice-options { z-index: 4; }
#profile .career-achievement-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
#profile .career-achievement { --achievement-accent: #a9c0bc; position: relative; display: grid; grid-template-columns: 57px minmax(0, 1fr); column-gap: 10px; min-width: 0; padding: 13px; border: 1px solid #516e72; border-radius: 2px 13px 2px 9px; background: linear-gradient(140deg, #233b42, #11242d 90%); }
#profile .career-achievement[data-unlocked="true"] { --achievement-accent: #d7ed9a; border-color: #9bb577; background: linear-gradient(140deg, #3c5239, #162d2c 90%); }
#profile .career-achievement:focus-visible, #profile .career-achievement[data-pad-focus] { outline-offset: 2px; }
#profile .career-achievement-art { width: 57px; height: 63px; color: var(--achievement-accent); }
#profile .career-achievement-art svg { display: block; width: 100%; height: 100%; }
#profile .career-achievement-body { min-width: 0; }
#profile .career-achievement-category { color: #aac5bf; font: 700 8px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
#profile .career-achievement h4 { margin: 4px 0 5px; color: #f4edcf; font-size: 16px; letter-spacing: -.03em; line-height: 1.1; }
#profile .career-achievement p { margin: 0; font-size: 12px; color: #b4c9c4; line-height: 1.35; }
#profile .career-achievement .career-achievement-progress { grid-column: 1/-1; margin-top: 12px; }
#profile .career-achievement .career-meter { height: 7px; border-color: #566f69; }
#profile .career-achievement .career-meter span { background: var(--achievement-accent); }
#profile .career-achievement-bottom { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 6px; font: 650 9px/1.35 var(--mono); color: #b7c8bf; }
#profile .career-achievement-bottom strong { color: #e7d19b; font-size: 9px; }
#profile .career-achievement-state { color: var(--achievement-accent); }
#profile .career-achievement[data-achievement="last_cap_standing"] {
  --achievement-accent: #e7c778;
  border-color: #a58c54;
  background: linear-gradient(140deg, #493c29, #17292c 78%);
  box-shadow: inset 0 3px 0 #e7c77880;
}
#profile .career-achievement[data-achievement="last_cap_standing"][data-unlocked="true"] {
  --achievement-accent: #ffe5a0;
  border-color: #e7c778;
  background: linear-gradient(140deg, #66512d, #1d302c 78%);
}
#profile .career-achievement[data-achievement="last_cap_standing"] .career-achievement-category { color: #e7c778; }
#profile .career-achievement-empty { grid-column: 1/-1; padding: 24px 16px; color: #b8cbc5; border: 1px dashed #617d73; border-radius: 3px 12px 3px 12px; background: #11262d; font-size: 13px; }
#profile .career-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px clamp(16px, 3vw, 28px) 16px; border-top: 1px solid #647b6e; background: #102129e8; border-radius: 0 0 0 14px; }
#profile .career-pages { display: flex; align-items: center; gap: 10px; }
#profile .career-pages .btn { min-width: 48px; min-height: 48px; padding: 8px; }
#profile .career-pages .micro { color: #c2d7b3; letter-spacing: .035em; white-space: nowrap; }
#profile-back { min-height: 50px; min-width: 113px; border-radius: 2px 10px 2px 9px; }
#profile .career-save-status { margin: 0 auto 0 0; color: #a5beb0; font: 650 10px/1.4 var(--mono); }
.career-results { display: grid; grid-template-columns: 66px minmax(0, 1fr); gap: 14px; align-items: start; border-left-color: #bddb95 !important; }
#results-career-art { color: var(--chapter-color, #c9e39b); }
#results-career-art svg { width: 66px; height: 74px; }
#results-career-title { color: #b8d39d; margin-bottom: 7px; }
#results-career-rank { margin: 0 0 4px; font-size: 15px; color: #e1e9cd; }
#results-career-xp { display: block; color: #e5f3ab; font-size: 22px; letter-spacing: -.03em; }
#results-career-achievements { margin: 6px 0 12px; font-size: 12px; }
#result-profile { min-height: 48px; font-size: 13px; border-radius: 2px 9px 2px 9px; }
@media (max-width: 720px) {
  #profile .career-heading { padding-block: 17px 12px; }
  #profile .career-heading .eyebrow { font-size: 8px; letter-spacing: .075em; }
  #profile .career-token-bank { padding: 7px 8px; }
  #profile .career-token-bank .micro { font-size: 8px; letter-spacing: .04em; }
  #profile .career-hero { grid-template-columns: 1fr; gap: 10px; }
  #profile .career-character-bay { grid-template-columns: 92px minmax(0, 1fr); padding: 10px 13px; }
  #profile .career-portrait-stage { width: 92px; height: 94px; }
  #profile-character { width: 90px; height: 90px; }
  #profile .career-rank-bay { grid-template-columns: 86px minmax(0, 1fr); padding: 12px 15px; }
  #profile .career-rank-art svg { width: 86px; height: 94px; }
  #profile .career-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #profile .career-stat-grid > div { padding: 10px; }
  #profile .career-tabs button { flex: 1; padding-inline: 10px; font-size: 13px; }
  #profile .career-tabs span { display: inline-block; margin-left: 3px; font-size: 9px; }
  #profile .career-favorites { grid-template-columns: 1fr; }
  #profile .career-favorite { display: grid; grid-template-columns: 106px minmax(0, 1fr); column-gap: 10px; padding: 9px 12px; }
  #profile .career-favorite canvas { grid-row: 1/5; width: 106px; height: 82px; }
  #profile .career-favorite h4 { margin-top: 3px; font-size: 16px; }
  #profile .career-record { grid-template-columns: minmax(0, 1fr) auto; gap: 5px 10px; }
  #profile .career-record strong { grid-column: 1/-1; }
  #profile .career-record span { font-size: 10px; }
  #profile .career-filters { grid-template-columns: 1fr 1fr; gap: 10px; }
  #profile .career-filters > label { grid-column: 1/-1; grid-row: 1; }
  #profile .career-achievement-grid { grid-template-columns: 1fr; }
  #profile .career-achievement { min-height: 145px; }
  #profile .career-achievement-summary { gap: 10px; }
  #profile .career-footer { flex-wrap: wrap; padding-top: 10px; padding-bottom: 12px; }
  #profile .career-save-status { flex-basis: 100%; font-size: 9px; }
  #profile .career-pages:not([hidden]) ~ .career-save-status { display: none; }
  #profile-back { margin-left: auto; min-width: 97px; min-height: 48px; font-size: 13px; padding-inline: 12px; }
}
@media (max-width: 355px) {
  #profile.overlay { padding-inline: 8px; }
  #profile .career-heading { gap: 6px; }
  #profile-title { font-size: 29px; }
  #profile .career-token-bank .micro { max-width: 61px; white-space: normal; }
  #profile .career-tabs span { display: block; margin: 3px 0 0; }
  #profile .career-pages { gap: 6px; }
  #profile .career-pages .btn { min-width: 44px; }
  #profile .career-pages .micro { font-size: 9px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  #profile .career-heading { padding-block: 11px 9px; }
  #profile-title { font-size: 30px; }
  #profile .career-heading .eyebrow { margin-bottom: 5px; font-size: 8px; }
  #profile .career-tabs button { min-height: 44px; padding-block: 7px; }
  #profile .career-scroll { padding-block: 12px; }
  #profile .career-footer { padding-block: 7px 10px; }
  #profile-back, #profile .career-pages .btn { min-height: 44px; }
}