/* Isolated view styles: rewards, demonstration ranking, and wardrobe. */
.rw-screen { --rw-cream: #f8f1de; --rw-forest: #193c2e; --rw-gold: #e7c44b; --rw-lime: #d9ff57; --rw-muted: #697468; --rw-line: #193c2e26; width: min(1120px, 100%); margin: 0 auto; color: var(--rw-forest); font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.rw-screen *, .rw-screen *::before, .rw-screen *::after { box-sizing: border-box; }
.rw-screen h1, .rw-screen h2, .rw-screen h3, .rw-screen p { margin: 0; }
.rw-screen h1, .rw-screen h2, .rw-screen h3 { color: inherit; font-family: inherit; text-transform: none; }
.rw-screen h1 { font-size: clamp(34px, 4.7vw, 54px); font-weight: 760; letter-spacing: -.045em; line-height: 1.1; }
.rw-screen h2 { font-size: clamp(21px, 2.8vw, 28px); font-weight: 700; line-height: 1.2; letter-spacing: -.035em; }
.rw-screen button { font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.rw-screen button:focus-visible { outline: 3px solid #61792d; outline-offset: 4px; }
.rw-screen button { transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease; }
.rw-navigation { display: flex; gap: 26px; margin: -6px 0 28px; border-bottom: 1px solid var(--rw-line); overflow-x: auto; }
.rw-nav-button { flex: 0 0 auto; min-height: 48px; padding: 6px 0 15px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--rw-muted); background: transparent; font-size: 13px !important; font-weight: 650 !important; }
.rw-nav-button[aria-current="page"] { color: var(--rw-forest); border-bottom-color: var(--rw-forest); }
.rw-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 26px; }
.rw-eyebrow { margin-bottom: 9px !important; color: var(--rw-muted); font-size: 10px; line-height: 1.3; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }
.rw-lead { max-width: 620px; margin-top: 13px !important; color: var(--rw-muted); font-size: 14px; line-height: 1.65; }
.rw-demo { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; padding: 7px 9px; margin-top: 3px; border: 1px solid var(--rw-line); border-radius: 5px; color: #596749; background: #fffaf080; font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.rw-demo::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #8b984a; }
.rw-progress-panel { position: relative; display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 26px; align-items: center; padding: 27px 30px; border-radius: 20px; color: var(--rw-cream); background: radial-gradient(ellipse at 3% 40%, #577a463b, transparent 55%), var(--rw-forest); overflow: hidden; }
.rw-level-emblem { display: grid; place-items: center; width: 116px; height: 116px; border: 1px solid #e7c44b40; border-radius: 50%; background: #092b2150; }
.rw-level-emblem img { width: 88px; height: 88px; filter: drop-shadow(0 8px 9px #0003); }
.rw-level-copy .rw-eyebrow { color: #e7c44b; }
.rw-level-heading { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.rw-level-heading strong { font-size: 26px; font-weight: 620; letter-spacing: -.04em; }
.rw-level-heading > span { color: var(--rw-gold); font-size: 13px; font-weight: 650; white-space: nowrap; }
.rw-progress { display: block; appearance: none; width: 100%; height: 6px; margin: 14px 0 10px; overflow: hidden; border: 0; border-radius: 8px; color: var(--rw-lime); background: #f8f1de22; }
.rw-progress::-webkit-progress-bar { border-radius: 8px; background: #f8f1de22; }
.rw-progress::-webkit-progress-value { border-radius: 8px; background: var(--rw-lime); }
.rw-progress::-moz-progress-bar { border-radius: 8px; background: var(--rw-lime); }
.rw-level-copy > p:last-child { color: #f8f1deba; font-size: 11px; line-height: 1.5; }
.rw-collection-total { display: grid; gap: 5px; padding-left: 30px; border-left: 1px solid #f8f1de26; }
.rw-collection-total > strong { font-size: 32px; font-weight: 650; line-height: 1; letter-spacing: -.04em; }
.rw-collection-total > strong > span { color: #f8f1de80; font-size: 17px; font-weight: 400; }
.rw-collection-total > span { color: #f8f1deba; font-size: 10px; }
.rw-text-button { display: flex; justify-content: space-between; gap: 18px; min-height: 40px; padding: 8px 0 0; border: 0; color: var(--rw-gold); background: transparent; text-align: left; font-size: 11px !important; font-weight: 600 !important; }
.rw-principle { display: flex; gap: 10px; align-items: center; padding: 16px 2px 23px; color: var(--rw-muted); font-size: 11px; line-height: 1.55; }
.rw-principle > span { color: #576f39; font-size: 21px; }
.rw-filters { display: flex; gap: 8px; padding: 0 0 24px; margin-bottom: 10px; overflow: auto; }
.rw-filter { display: inline-flex; gap: 9px; align-items: center; justify-content: center; flex-shrink: 0; min-height: 42px; padding: 10px 15px; border: 1px solid var(--rw-line); border-radius: 999px; color: var(--rw-muted); background: #fffdf6a6; font-size: 11px !important; font-weight: 650 !important; }
.rw-filter > span { font-size: 9px; opacity: .6; }
.rw-filter[aria-pressed="true"] { border-color: var(--rw-forest); color: var(--rw-cream); background: var(--rw-forest); }
.rw-collections { display: grid; gap: 38px; }
.rw-collection-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; padding-bottom: 18px; }
.rw-collection-heading .rw-eyebrow { margin-bottom: 6px !important; }
.rw-collection-heading p:last-child { max-width: 680px; margin-top: 7px; color: var(--rw-muted); font-size: 11px; line-height: 1.65; }
.rw-family-total { flex: 0 0 auto; min-width: 51px; padding: 7px 10px; border: 1px solid var(--rw-line); border-radius: 999px; color: var(--rw-muted); font-size: 10px; text-align: center; }
.rw-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.rw-achievement { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 13px; align-items: center; width: 100%; min-height: 168px; padding: 16px 13px; border: 1px solid #193c2e20; border-radius: 15px; background: #fffdf6ba; color: var(--rw-forest); text-align: left; }
.rw-achievement:hover { border-color: #7c8a5f; background: #fffdf6; box-shadow: 0 5px 18px #193c2e0c; }
.rw-achievement.rw-is-unlocked { border-color: #9aab775e; background: #fffff4; }
.rw-art-stage { position: relative; display: grid; justify-items: center; gap: 3px; }
.rw-reward-art { display: block; width: 82px; height: 82px; filter: drop-shadow(0 5px 5px #193c2e16); }
.rw-tier { padding: 3px 6px; border-radius: 3px; font-size: 7px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.rw-tier-bronze { color: #76421e; background: #f1e0d0; }
.rw-tier-silver { color: #526158; background: #e1e7e1; }
.rw-tier-gold { color: #75601b; background: #f3e7b7; }
.rw-card-copy { display: flex; flex-direction: column; min-width: 0; }
.rw-card-meta { margin-bottom: 5px; color: #75816d; font-size: 8px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.rw-card-name { font-size: 12px; font-weight: 750; line-height: 1.25; }
.rw-card-description { min-height: 42px; margin-top: 7px; color: var(--rw-muted); font-size: 9px; font-weight: 400; line-height: 1.5; }
.rw-reward-status { display: flex; align-items: center; gap: 5px; margin-top: 10px; color: #75816d; font-size: 8px; font-weight: 650; }
.rw-is-unlocked .rw-reward-status { color: #406b34; }
.rw-lock-dot { width: 5px; height: 5px; border: 1px solid currentColor; border-radius: 50%; }
.rw-card-arrow { margin-left: auto; font-size: 12px; }
.rw-character-collection { padding: 27px; border: 1px solid #e7c44b21; border-radius: 20px; color: var(--rw-cream); background: var(--rw-forest); }
.rw-character-collection .rw-eyebrow { color: var(--rw-gold); }
.rw-character-collection .rw-collection-heading p:last-child { color: #f8f1deaf; }
.rw-character-collection .rw-family-total { border-color: #f8f1de33; color: var(--rw-gold); }
.rw-character-collection .rw-card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rw-character-card, .rw-character-card.rw-is-unlocked { grid-template-columns: minmax(0, 1fr); gap: 16px; align-content: start; padding: 20px 14px 15px; border-color: #f8f1de26; background: #254838; color: var(--rw-cream); }
.rw-character-card:hover { border-color: #e7c44b85; background: #2c5140; }
.rw-character-card .rw-portrait { width: min(100%, 144px); height: auto; aspect-ratio: 1; border: 2px solid #e7c44b85; border-radius: 50%; object-fit: cover; }
.rw-character-card .rw-card-name { min-height: 31px; color: var(--rw-gold); font-size: 13px; }
.rw-character-card .rw-card-meta, .rw-character-card .rw-card-description, .rw-character-card .rw-reward-status { color: #f8f1debb; }
.rw-character-card .rw-card-description { min-height: 54px; }
.rw-character-card.rw-is-unlocked .rw-reward-status { color: var(--rw-lime); }
.rw-demo-notice { display: flex; gap: 14px; align-items: center; padding: 18px 20px; margin-bottom: 26px; border: 1px solid #d9c88c; border-radius: 13px; background: #efe7cd; }
.rw-demo-mark { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border: 1px solid #8f814550; border-radius: 10px; color: #746532; font-size: 13px; font-weight: 750; }
.rw-demo-notice strong { font-size: 12px; }
.rw-demo-notice p { max-width: 810px; margin-top: 5px; color: #6d6a50; font-size: 11px; line-height: 1.6; }
.rw-ranking-controls { display: flex; justify-content: space-between; gap: 20px; align-items: end; margin-bottom: 24px; }
.rw-control-group { display: grid; gap: 9px; }
.rw-control-label { color: var(--rw-muted); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; font-weight: 650; }
.rw-segmented { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--rw-line); border-radius: 11px; background: #eae7d7; }
.rw-segmented button { min-height: 38px; padding: 8px 20px; border: 0; border-radius: 7px; color: var(--rw-muted); background: transparent; font-size: 11px; font-weight: 600; }
.rw-segmented button[aria-pressed="true"] { color: var(--rw-forest); background: #fffdf6; box-shadow: 0 2px 4px #193c2e12; }
.rw-ranking-board { overflow: hidden; border: 1px solid var(--rw-line); border-radius: 18px; background: #fffdf6cc; }
.rw-ranking-board-head { display: flex; justify-content: space-between; gap: 15px; align-items: center; padding: 23px 25px; border-bottom: 1px solid var(--rw-line); }
.rw-ranking-board-head h2 { font-size: 18px; }
.rw-ranking-board-head > span { color: var(--rw-muted); font-size: 9px; text-align: right; }
.rw-ranking-list { padding: 0; margin: 0; list-style: none; }
.rw-ranking-row { display: grid; grid-template-columns: 32px 44px minmax(0, 1fr) auto; gap: 15px; align-items: center; min-height: 88px; padding: 16px 25px; }
.rw-ranking-row + .rw-ranking-row { border-top: 1px solid #193c2e0d; }
.rw-place { width: 28px; color: #7c8576; font-size: 12px; text-align: center; font-variant-numeric: tabular-nums; }
.rw-podium-place { display: grid; place-items: center; height: 30px; border-radius: 50%; color: #705a18; background: #e7c44b29; font-weight: 750; }
.rw-avatar { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; object-fit: cover; border: 1px solid #193c2e19; border-radius: 50%; }
.rw-essential-avatar { overflow: hidden; background: var(--rw-forest); }
.rw-essential-avatar svg { display: block; width: 100%; height: 100%; }
.rw-monogram { color: var(--rw-forest); background: #e5e8d4; font-size: 13px; font-weight: 650; letter-spacing: -.04em; }
.rw-tone-gold { color: #756125; background: #e9dba7; }
.rw-tone-forest { color: var(--rw-cream); background: #42624b; }
.rw-tone-clay { color: #754e3c; background: #e3cbb6; }
.rw-tone-sage { color: #47604c; background: #d4deca; }
.rw-ranker { min-width: 0; }
.rw-ranker > strong { display: flex; gap: 8px; align-items: center; overflow-wrap: anywhere; font-size: 12px; font-weight: 650; }
.rw-ranker > div { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 5px; }
.rw-country { display: inline-flex; gap: 5px; align-items: center; color: var(--rw-muted); font-size: 9px; }
.rw-country > span:first-child { font-size: 11px; }
.rw-profile-kind { color: #7a8373; font-size: 8px; }
.rw-score { display: grid; gap: 4px; text-align: right; }
.rw-score strong { font-size: 15px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.rw-score > span { color: #7a8373; font-size: 8px; }
.rw-your-row { background: #e6eccc; box-shadow: inset 3px 0 0 #5b772e; }
.rw-you-label { flex-shrink: 0; padding: 3px 6px; border-radius: 3px; color: #3e5d28; background: #d3dfaf; font-size: 7px; font-weight: 750; text-transform: uppercase; }
.rw-ranking-privacy { display: flex; gap: 15px; align-items: center; padding: 22px 0 0; }
.rw-ranking-privacy > div { flex: 1; }
.rw-ranking-privacy strong { font-size: 12px; }
.rw-ranking-privacy p { max-width: 660px; margin-top: 5px; color: var(--rw-muted); font-size: 10px; line-height: 1.65; }
.rw-secondary-button, .rw-primary-button { display: inline-flex; gap: 12px; align-items: center; justify-content: center; min-height: 42px; padding: 10px 16px; border: 1px solid var(--rw-line); border-radius: 9px; color: var(--rw-forest); background: #fffdf680; font-size: 11px !important; font-weight: 650 !important; text-align: center; }
.rw-secondary-button:hover { border-color: #879775; background: #fffdf6; }
.rw-primary-button { color: var(--rw-cream); border-color: var(--rw-forest); background: var(--rw-forest); }
.rw-primary-button:hover { background: #2e5440; }
.rw-primary-button[aria-pressed="true"] { color: #38562d; border-color: #9bab765e; background: #e9efda; }
.rw-footnote { padding: 22px 0 5px; color: #75806b; font-size: 9px; line-height: 1.65; }
.rw-avatar-preview { display: flex; gap: 26px; align-items: center; padding: 28px 32px; margin-bottom: 32px; border: 1px solid #193c2e1e; border-radius: 20px; background: radial-gradient(ellipse at top right, #d8dfbb5c, transparent 65%), #fffdf69c; }
.rw-avatar-large { flex: 0 0 104px; width: 104px; height: 104px; border: 4px solid #fffdf6; box-shadow: 0 0 0 1px #193c2e20, 0 8px 18px #193c2e0b; font-size: 30px; }
.rw-avatar-preview > div { flex: 1; }
.rw-avatar-preview h2 { font-size: clamp(21px, 2.8vw, 30px); }
.rw-avatar-preview p:not(.rw-eyebrow) { margin-top: 5px; font-size: 12px; overflow-wrap: anywhere; }
.rw-preview-note { display: block; max-width: 440px; margin-top: 11px; color: var(--rw-muted); font-size: 10px; line-height: 1.6; }
.rw-skin-count { display: grid; gap: 6px; text-align: center; color: var(--rw-muted); font-size: 9px; }
.rw-skin-count > strong { color: var(--rw-forest); font-size: 32px; font-weight: 650; letter-spacing: -.04em; }
.rw-skin-count > strong > span { color: #8a937a; font-size: 17px; font-weight: 400; }
.rw-wardrobe-heading { margin: 30px 0 17px; }
.rw-wardrobe-heading p:last-child:not(.rw-eyebrow) { margin-top: 9px; color: var(--rw-muted); font-size: 11px; line-height: 1.6; }
.rw-avatar-presets { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.rw-avatar-preset { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 12px; border: 1px solid var(--rw-line); border-radius: 14px; color: var(--rw-forest); background: #fffdf6b8; text-align: left; }
.rw-avatar-preset.rw-is-selected { border-color: #809460; background: #f0f3df; box-shadow: inset 0 0 0 1px #809460; }
.rw-avatar-preset .rw-avatar { width: 54px; height: 54px; flex-basis: 54px; }
.rw-avatar-preset > span:last-child { min-width: 0; }
.rw-avatar-preset strong,.rw-avatar-preset small { display: block; overflow-wrap: anywhere; }
.rw-avatar-preset strong { font-size: 11px; }.rw-avatar-preset small { margin-top: 4px; color: var(--rw-muted); font-size: 8px; }
.rw-avatar-builder { margin-top: 18px; padding: 22px; border: 1px solid var(--rw-line); border-radius: 18px; background: #fffdf69c; }
.rw-avatar-builder .rw-wardrobe-heading { margin-top: 0; }
.rw-builder-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-bottom: 16px; }
.rw-builder-grid label { display: grid; gap: 6px; color: var(--rw-forest); font-size: 10px; font-weight: 700; }
.rw-builder-grid select { min-width: 0; min-height: 42px; border: 1px solid var(--rw-line); border-radius: 9px; color: var(--rw-forest); background: #fffdf6; }
.rw-default-option { display: flex; gap: 16px; align-items: center; width: 100%; min-height: 87px; padding: 16px 20px; border: 1px solid var(--rw-line); border-radius: 13px; color: var(--rw-forest); background: #fffdf6b8; text-align: left; }
.rw-default-option.rw-is-selected { border-color: #809460; background: #f0f3df; }
.rw-default-option > span:nth-child(2) { display: grid; gap: 6px; flex: 1; }
.rw-default-option strong { font-size: 12px; }
.rw-default-option > span:nth-child(2) > span { color: var(--rw-muted); font-size: 10px; }
.rw-choice-label { color: #4b6735; font-size: 10px; font-weight: 650; }
.rw-skins-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.rw-skin-card { overflow: hidden; border: 1px solid var(--rw-line); border-radius: 17px; background: #fffdf6b8; }
.rw-skin-card.rw-is-selected { border-color: #74904b; box-shadow: 0 0 0 1px #74904b; }
.rw-skin-art { position: relative; display: grid; place-items: center; padding: 23px 18px 37px; background: var(--rw-forest); }
.rw-skin-art > img { display: block; width: min(100%, 190px); height: auto; aspect-ratio: 1; border-radius: 50%; border: 1px solid #e7c44b9e; }
.rw-skin-status { position: absolute; bottom: 13px; padding: 4px 8px; border: 1px solid #f8f1de33; border-radius: 4px; color: #f8f1dec7; background: #193c2e; font-size: 8px; font-weight: 650; }
.rw-is-selected .rw-skin-status { border-color: var(--rw-lime); color: var(--rw-lime); }
.rw-skin-copy { padding: 19px 16px 16px; }
.rw-skin-copy h3 { min-height: 36px; font-size: 15px; line-height: 1.2; letter-spacing: -.03em; }
.rw-skin-copy > p:not(.rw-eyebrow) { min-height: 68px; margin: 9px 0 16px; color: var(--rw-muted); font-size: 10px; line-height: 1.65; }
.rw-skin-copy > button { width: 100%; }
@media (min-width: 1250px) { .rw-achievement { grid-template-columns: 94px minmax(0, 1fr); } .rw-reward-art { width: 94px; height: 94px; } .rw-character-card { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 950px) { .rw-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rw-character-collection .rw-card-grid, .rw-skins-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rw-avatar-presets { grid-template-columns: repeat(2,minmax(0,1fr)); } .rw-character-card .rw-card-description { min-height: 28px; } .rw-character-card .rw-card-name { min-height: 0; } .rw-skin-copy h3 { min-height: 0; } .rw-skin-copy > p:not(.rw-eyebrow) { min-height: 34px; } .rw-progress-panel { grid-template-columns: 92px minmax(0, 1fr) auto; gap: 18px; padding: 24px; } .rw-level-emblem { width: 88px; height: 88px; } .rw-level-emblem img { width: 70px; height: 70px; } .rw-collection-total { padding-left: 20px; } }
@media (max-width: 620px) { .rw-heading { flex-direction: column; gap: 12px; } .rw-demo { margin: 0; } .rw-navigation { gap: 22px; margin-bottom: 23px; } .rw-progress-panel { grid-template-columns: 70px minmax(0, 1fr); gap: 18px; padding: 22px; } .rw-level-emblem { width: 70px; height: 70px; } .rw-level-emblem img { width: 58px; height: 58px; } .rw-level-heading strong { font-size: 23px; } .rw-level-heading > span { font-size: 11px; } .rw-collection-total { grid-column: 1 / -1; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 15px 0 0; border-left: 0; border-top: 1px solid #f8f1de26; } .rw-collection-total > strong { font-size: 23px; } .rw-collection-total > strong > span { font-size: 12px; } .rw-collection-total > span { max-width: 100px; line-height: 1.45; } .rw-text-button { padding: 0; align-items: center; font-size: 9px !important; gap: 10px; } .rw-card-grid { gap: 10px; } .rw-achievement { grid-template-columns: 1fr; gap: 12px; padding: 17px 13px 14px; align-content: start; } .rw-reward-art { width: 88px; height: 88px; } .rw-card-name { min-height: 30px; } .rw-card-description { min-height: 41px; } .rw-character-collection { padding: 23px 15px 16px; } .rw-character-card { padding: 15px 11px 12px; } .rw-character-card .rw-card-name { min-height: 31px; } .rw-character-card .rw-card-description { min-height: 68px; } .rw-collection-heading { gap: 14px; } .rw-collection-heading h2 { font-size: 23px; } .rw-ranking-controls { gap: 14px; flex-wrap: wrap; } .rw-ranking-board-head { padding: 20px 15px; } .rw-ranking-board-head h2 { font-size: 16px; } .rw-ranking-row { gap: 10px; grid-template-columns: 24px 36px minmax(0, 1fr) auto; padding: 16px 14px; } .rw-ranking-row .rw-avatar { width: 36px; height: 36px; font-size: 11px; } .rw-place { width: 24px; font-size: 11px; } .rw-ranker > strong { flex-wrap: wrap; gap: 4px; font-size: 11px; } .rw-score strong { font-size: 13px; } .rw-country { font-size: 8px; } .rw-ranker > div { gap: 6px; } .rw-ranking-privacy { flex-wrap: wrap; } .rw-ranking-privacy > div { flex-basis: calc(100% - 65px); } .rw-ranking-privacy > button { margin-left: 59px; } .rw-avatar-preview { flex-wrap: wrap; gap: 18px; padding: 23px; } .rw-avatar-large { width: 76px; height: 76px; flex-basis: 76px; font-size: 25px; } .rw-avatar-preview > div { min-width: 160px; } .rw-skin-count { width: 100%; display: flex; gap: 9px; align-items: baseline; padding-top: 15px; border-top: 1px solid var(--rw-line); } .rw-skin-count > strong { font-size: 23px; } .rw-skin-count > strong > span { font-size: 14px; } .rw-builder-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .rw-skin-art { padding: 18px 13px 38px; } .rw-skin-copy { padding: 17px 12px 13px; } .rw-skin-copy h3 { min-height: 35px; } .rw-skin-copy > p:not(.rw-eyebrow) { min-height: 66px; } .rw-skin-copy .rw-secondary-button, .rw-skin-copy .rw-primary-button { gap: 7px; padding: 9px; font-size: 10px !important; } .rw-demo-notice { align-items: flex-start; padding: 17px 15px; } }
@media (max-width: 360px) { .rw-level-heading { align-items: start; flex-direction: column; gap: 3px; } .rw-collection-total { gap: 7px; } .rw-character-collection .rw-card-grid, .rw-skins-grid { grid-template-columns: 1fr; } .rw-character-card .rw-card-name, .rw-character-card .rw-card-description, .rw-skin-copy > p:not(.rw-eyebrow), .rw-skin-copy h3 { min-height: 0; } .rw-avatar-preview > div { min-width: 130px; } .rw-score > span { max-width: 45px; } .rw-ranking-row { grid-template-columns: 21px 30px minmax(0, 1fr) auto; gap: 7px; padding-right: 11px; padding-left: 11px; } .rw-ranking-row .rw-avatar { width: 30px; height: 30px; } }
.rw-reduce-motion *, .rw-reduce-motion *::before, .rw-reduce-motion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
@media (prefers-reduced-motion: reduce) { .rw-screen *, .rw-screen *::before, .rw-screen *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* v0.5 — seleção de personagem com presença de jogo, mantendo a linguagem HeliPad. */
.rw-essential-avatar { position: relative; isolation: isolate; }
.rw-essential-avatar .rw-avatar-base { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; transform: scale(1.42); transform-origin: 50% 17%; }
.rw-avatar-gear-mark { position: absolute; z-index: 2; right: -2px; bottom: -2px; display: block; width: 39%; aspect-ratio: 1; overflow: hidden; border: 2px solid var(--rw-gold); border-radius: 50%; background: var(--rw-forest); box-shadow: 0 3px 10px #071c1599; }
.rw-avatar-gear-mark img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rw-character-creator { display: grid; grid-template-columns: minmax(175px, .62fr) minmax(360px, 1.4fr) minmax(255px, .86fr); grid-template-areas: "roster stage controls"; gap: 18px; align-items: start; padding: 18px; margin-bottom: 38px; border: 1px solid #d6b94f66; border-radius: 25px; color: var(--rw-cream); background: radial-gradient(circle at 48% 4%, #4264495c, transparent 38%), linear-gradient(145deg, #153b2d, #0b241c 64%, #173b2d); box-shadow: 0 24px 60px #0823191c; }
.rw-character-roster { grid-area: roster; min-width: 0; }
.rw-character-stage { grid-area: stage; min-width: 0; overflow: hidden; border: 1px solid #e7c44b5e; border-radius: 19px; background: #0b2119; box-shadow: 0 16px 42px #06140f66; }
.rw-avatar-controls { grid-area: controls; min-width: 0; margin: 0; padding: 18px; color: var(--rw-forest); background: #f8f1def5; border-color: #eadcae; }
.rw-panel-title { display: grid; gap: 4px; margin-bottom: 16px; }
.rw-panel-title h2 { margin: 0; color: inherit; font-size: 18px; letter-spacing: -.035em; }
.rw-panel-title > span { color: #c9d8cb; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.rw-avatar-controls .rw-panel-title > span { color: var(--rw-muted); }
.rw-roster-list { display: grid; gap: 9px; }
.rw-roster-option { display: grid; grid-template-columns: 48px minmax(0, 1fr) 15px; gap: 10px; align-items: center; min-width: 0; width: 100%; padding: 8px; border: 1px solid #f8f1de24; border-radius: 13px; color: var(--rw-cream); background: #f8f1de0a; text-align: left; cursor: pointer; transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.rw-roster-option:hover { transform: translateY(-1px); border-color: #e7c44b99; background: #f8f1de13; }
.rw-roster-option.rw-is-selected { border-color: var(--rw-gold); background: linear-gradient(90deg, #e7c44b24, #f8f1de0a); box-shadow: inset 3px 0 var(--rw-lime); }
.rw-roster-portrait { display: block; width: 48px; height: 62px; overflow: hidden; border-radius: 9px; background: #0b2119; }
.rw-roster-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; transform: scale(1.68); transform-origin: 50% 16%; }
.rw-roster-option > span:nth-child(2) { display: grid; gap: 4px; min-width: 0; }
.rw-roster-option strong { color: #fff9e8; font-size: 11px; }
.rw-roster-option small { overflow: hidden; color: #c9d8cb; font-size: 8px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.rw-roster-option i { color: var(--rw-gold); font-size: 14px; font-style: normal; text-align: center; }
.rw-stage-visual { position: relative; display: grid; place-items: center; min-height: 510px; max-height: 680px; overflow: hidden; background: radial-gradient(circle at 50% 20%, #385e48, #0a2119 70%); }
.rw-stage-visual > img { display: block; width: 100%; height: min(62vw, 680px); min-height: 510px; max-height: 680px; object-fit: contain; object-position: 50% 50%; }
.rw-stage-status { position: absolute; z-index: 6; top: 14px; left: 14px; max-width: calc(100% - 160px); padding: 7px 10px; border: 1px solid #d9f75394; border-radius: 999px; color: var(--rw-lime); background: #0a2119d9; font-size: 8px; font-weight: 750; line-height: 1.35; letter-spacing: .08em; text-transform: uppercase; backdrop-filter: blur(8px); }
.rw-stage-progress { position: absolute; z-index: 6; top: 14px; right: 14px; display: grid; grid-template-rows: 36px 41px; width: 81px; height: 77px; overflow: hidden; border: 1px solid #e7c44b7a; border-radius: 15px; color: #fff9e8; background: linear-gradient(150deg,#173d2fe8,#071b14f2); box-shadow: 0 10px 28px #020d09a8, inset 0 1px #fff1; backdrop-filter: blur(10px); }
.rw-stage-progress span { min-width: 0; }
.rw-stage-progress small { display: block; overflow: hidden; color: #cbd8ce; font-size: 5.5px; font-weight: 850; line-height: 1.2; letter-spacing: .04em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.rw-stage-level { display: flex; align-items: center; justify-content: space-between; padding: 5px 8px; background: linear-gradient(90deg,#e7c44b14,transparent); }
.rw-stage-level strong { color: var(--rw-gold); font-family: Georgia,serif; font-size: 27px; line-height: .9; }
.rw-stage-rank { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 1px 4px; align-items: end; padding: 5px 8px 6px; border-top: 1px solid #e7c44b38; }
.rw-stage-rank small { grid-column: 1 / -1; color: var(--rw-lime); }
.rw-stage-rank strong { font-size: 16px; line-height: 1; letter-spacing: -.02em; }
.rw-stage-rank em { overflow: hidden; color: #cbd8ce; font-size: 7px; font-style: normal; line-height: 1.1; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.rw-stage-gear { position: absolute; right: 14px; bottom: 14px; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; align-items: center; max-width: calc(100% - 28px); padding: 8px 12px 8px 8px; border: 1px solid #e7c44b80; border-radius: 13px; color: var(--rw-cream); background: #0a2119e8; box-shadow: 0 8px 22px #07160fc9; backdrop-filter: blur(8px); }
.rw-stage-gear img { width: 44px; height: 44px; object-fit: cover; border: 1px solid var(--rw-gold); border-radius: 50%; }
.rw-stage-gear span { display: grid; gap: 2px; min-width: 0; }
.rw-stage-gear small { color: #c9d8cb; font-size: 7px; letter-spacing: .08em; text-transform: uppercase; }
.rw-stage-gear strong { overflow: hidden; color: var(--rw-gold); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.rw-stage-copy { padding: 21px 23px 23px; background: linear-gradient(180deg, #173c2e, #102d22); }
.rw-stage-copy h2 { margin: 5px 0 3px; color: var(--rw-gold); font-size: clamp(25px, 3vw, 36px); letter-spacing: -.045em; }
.rw-stage-copy > strong { color: #eef4d9; font-size: 11px; }
.rw-stage-copy > p:not(.rw-eyebrow) { max-width: 52ch; margin-top: 10px; color: #cbd9ce; font-size: 10px; line-height: 1.65; }
.rw-trait-summary { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 15px; }
.rw-trait-summary span { padding: 5px 8px; border: 1px solid #f8f1de2b; border-radius: 999px; color: #eef4d9; background: #f8f1de0b; font-size: 8px; }
.rw-avatar-controls .rw-builder-grid { grid-template-columns: 1fr; gap: 10px; }
.rw-avatar-controls .rw-builder-grid label { font-size: 9px; }
.rw-avatar-controls select { min-width: 0; }
.rw-avatar-controls .rw-primary-button { width: 100%; margin-top: 14px; }
.rw-builder-note { margin-top: 10px; color: var(--rw-muted); font-size: 8px; line-height: 1.55; }
.rw-equipment-count { display: flex; gap: 10px; align-items: center; margin-top: 17px; padding-top: 15px; border-top: 1px solid var(--rw-line); }
.rw-equipment-count strong { color: var(--rw-forest); font-family: Georgia, serif; font-size: 28px; }
.rw-equipment-count strong span { color: var(--rw-muted); font-size: 15px; }
.rw-equipment-count > span { max-width: 115px; color: var(--rw-muted); font-size: 8px; line-height: 1.45; }

@media (max-width: 950px) {
  .rw-character-creator { grid-template-columns: 180px minmax(0, 1fr); grid-template-areas: "roster stage" "controls controls"; }
  .rw-avatar-controls .rw-builder-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rw-stage-visual, .rw-stage-visual > img { min-height: 480px; height: min(72vw, 650px); }
}
@media (max-width: 620px) {
  .rw-character-creator { grid-template-columns: minmax(0, 1fr); grid-template-areas: "stage" "roster" "controls"; gap: 13px; padding: 10px; border-radius: 19px; }
  .rw-character-stage { border-radius: 14px; }
  .rw-stage-visual, .rw-stage-visual > img { min-height: 470px; height: min(130vw, 590px); max-height: 590px; }
  .rw-stage-copy { padding: 19px 17px 21px; }
  .rw-character-roster { padding: 7px 3px 3px; }
  .rw-roster-list { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 8px; scroll-snap-type: x proximity; }
  .rw-roster-option { flex: 0 0 205px; scroll-snap-align: start; }
  .rw-avatar-controls { padding: 16px; }
  .rw-avatar-controls .rw-builder-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 390px) {
  .rw-avatar-controls .rw-builder-grid { grid-template-columns: 1fr; }
  .rw-stage-visual, .rw-stage-visual > img { min-height: 430px; height: min(128vw, 525px); }
  .rw-stage-status { top: 11px; left: 11px; max-width: calc(100% - 137px); padding: 6px 8px; font-size: 7px; }
  .rw-stage-progress { top: 11px; right: 11px; width: 70px; border-radius: 13px; }
  .rw-stage-level { padding: 5px 7px; }
  .rw-stage-level strong { font-size: 23px; }
  .rw-stage-rank { padding: 5px 7px 6px; }
  .rw-stage-progress small { font-size: 5.2px; letter-spacing: .045em; }
  .rw-stage-rank strong { font-size: 14px; }
}

/* v0.7 — criador MMO, prévia realista, identidade imutável, inventário completo e Shop visual. */
.rw-avatar-model { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .35s cubic-bezier(.2,.8,.2,1), filter .35s ease; }
.rw-avatar-model svg, .rw-avatar-model > img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 20px 18px #06130e9c); }
.rw-realistic-model { isolation: isolate; }
.rw-realistic-model::before { content:""; position:absolute; z-index:-1; left:13%; right:13%; bottom:4%; height:8%; border-radius:50%; background:#020b0780; filter:blur(13px); }
.rw-realistic-model > img { position:relative; z-index:1; object-position:50% 100%; }
.rw-model-class-item { position:absolute; z-index:3; top:16%; right:4%; display:grid; grid-template-columns:43px minmax(0,1fr); gap:9px; align-items:center; width:min(175px,48%); padding:9px; border:1px solid color-mix(in srgb,var(--sigil) 75%,white); border-radius:12px; color:#f8f1de; background:#071b14df; box-shadow:0 12px 32px #0008,inset 0 0 18px color-mix(in srgb,var(--sigil) 12%,transparent); backdrop-filter:blur(10px); }
.rw-model-class-item > img { display:block; width:43px; height:48px; padding:3px; border:1px solid var(--sigil); border-radius:9px; object-fit:contain; background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--sigil) 24%,transparent),#0d261dcf); filter:drop-shadow(0 5px 7px #0008); }
.rw-model-class-item small,.rw-model-class-item strong { display:block; }
.rw-model-class-item small { color:#c7d3c9; font-size:7px; letter-spacing:.04em; line-height:1.3; text-transform:uppercase; }
.rw-model-class-item strong { margin-top:3px; color:#fff7e7; font-size:9px; line-height:1.25; }
.rw-model-traits,.rw-model-loadout { position:absolute; z-index:3; display:flex; flex-wrap:wrap; justify-content:center; gap:5px; }
.rw-model-traits { left:3%; right:3%; bottom:9%; }
.rw-model-loadout { left:-7%; top:19%; width:35%; justify-content:flex-start; }
.rw-model-traits small,.rw-model-loadout small { padding:5px 7px; border:1px solid #e7c44b55; border-radius:999px; color:#f8f1de; background:#071b14d9; box-shadow:0 5px 14px #0005; font-size:6.5px; font-weight:800; letter-spacing:.03em; backdrop-filter:blur(8px); }
.rw-model-loadout small { border-color:#d9ff5750; color:#eaf1db; }
.rw-model-portrait { width: 100%; height: 100%; overflow: hidden; }
.rw-model-portrait svg { transform: scale(1.1); }
.rw-model-portrait::before,.rw-model-portrait > .rw-model-class-item,.rw-model-portrait > .rw-model-traits,.rw-model-portrait > .rw-model-loadout { display:none; }
.rw-special-model > img { object-position: 50% 18%; }
.rw-essential-avatar > .rw-avatar-model { width: 100%; height: 100%; }
.rw-essential-avatar > .rw-avatar-model > img { object-fit: cover; object-position: 50% 10%; transform: scale(1.32); transform-origin: 50% 15%; }
.rw-character-creator.rw-creation-mode { grid-template-columns: minmax(190px,.62fr) minmax(380px,1.35fr) minmax(265px,.9fr); }
.rw-class-sigil { display: grid; place-items: center; width: 48px; height: 56px; border: 1px solid color-mix(in srgb, var(--sigil) 70%, white); border-radius: 10px; color: var(--sigil); background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--sigil) 28%, transparent), #10271f); box-shadow: inset 0 0 20px #0004; font-family: Georgia,serif; font-size: 21px; font-weight: 800; }
.rw-class-sigil img { display:block; width:100%; height:100%; padding:3px; border-radius:inherit; object-fit:contain; filter:drop-shadow(0 6px 8px #0008); }
.rw-class-hps{--sigil:#e7c44b}.rw-class-lst{--sigil:#d9ff57}.rw-class-organic{--sigil:#a97645}.rw-class-salt{--sigil:#77aeb2}
.rw-stage-3d { min-height: 620px; background-image:linear-gradient(#071b14a8,#071b14a8),url('./assets/avatars/character-creator-stage-v1.png'); background-position: center; background-size: cover; perspective: 1100px; isolation: isolate; }
.rw-stage-3d::after { content:""; position:absolute; z-index:-1; inset:0; background:radial-gradient(ellipse at 50% 84%,#d9ff5730,transparent 38%),linear-gradient(90deg,#06150f66,transparent 30% 70%,#06150f66); }
.rw-avatar-platform { position: absolute; z-index: 1; inset: 35px 4% 54px; display: grid; place-items: center; transform-style: preserve-3d; }
.rw-avatar-platform > .rw-avatar-model { width: min(100%, 410px); }
.rw-avatar-platform > .rw-avatar-model[data-avatar-view="left"] { transform: rotateY(-18deg) translateX(-2%); filter: brightness(.9); }
.rw-avatar-platform > .rw-avatar-model[data-avatar-view="right"] { transform: rotateY(18deg) translateX(2%); filter: brightness(.94); }
.rw-view-controls { position: absolute; z-index: 4; left: 50%; bottom: 14px; display: flex; gap: 8px; align-items: center; transform: translateX(-50%); padding: 5px; border: 1px solid #e7c44b63; border-radius: 999px; color: #f8f1de; background: #071b14dc; backdrop-filter: blur(9px); }
.rw-view-controls button { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; color: #193c2e; background: #e7c44b; font-size: 16px; }
.rw-view-controls span { padding: 0 4px; color: #d5dfd5; font-size: 8px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.rw-full-button { width: 100%; }
.rw-lock-warning { margin-top: 14px !important; padding: 12px; border-left: 3px solid #ad723c; border-radius: 0 8px 8px 0; color: #624b35 !important; background: #f0dfc5; font-size: 9px !important; line-height: 1.55; }
.rw-lock-warning strong { display: block; margin-bottom: 3px; }
.rw-fixed-appearance-note { display:grid; gap:4px; margin:0; padding:12px; border:1px solid #d9ff5740; border-radius:12px; background:#d9ff570a; }
.rw-fixed-appearance-note strong { color:#d9ff57; font-size:8px; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }
.rw-fixed-appearance-note span { color:#cbd6cc; font-size:9px; line-height:1.5; }
.rw-inventory-layout { display: grid; grid-template-columns: minmax(390px,1.35fr) minmax(260px,.75fr); gap: 18px; align-items: start; padding: 18px; margin-bottom: 38px; border: 1px solid #d6b94f66; border-radius: 25px; background: linear-gradient(145deg,#153b2d,#0b241c); }
.rw-inventory-layout > .rw-character-stage { grid-area:auto; min-width:0; }
.rw-inventory-panel { min-width: 0; padding: 18px; border: 1px solid #eadcae; border-radius: 18px; color: #193c2e; background: #f8f1def5; }
.rw-class-evolution { display: grid; grid-template-columns: 52px minmax(0,1fr); gap: 12px; align-items: center; padding: 13px; border: 1px solid #193c2e1c; border-radius: 13px; background: #fffdf6; }
.rw-class-evolution .rw-class-sigil { width: 52px; height: 60px; }
.rw-class-evolution small,.rw-class-evolution strong,.rw-class-evolution p { display:block; }
.rw-class-evolution small { color:#697468;font-size:8px;text-transform:uppercase; }
.rw-class-evolution strong { margin-top:4px;font-size:11px; }
.rw-class-evolution p { margin-top:4px;color:#697468;font-size:8px;line-height:1.45; }
.rw-item-paused { align-self:center; padding:6px 8px; border-radius:999px; color:#496050; background:#edf0e5; font-size:7px; font-weight:850; letter-spacing:.07em; text-transform:uppercase; white-space:nowrap; }
.rw-inventory-slots { display:grid; gap:8px; margin:14px 0; }
.rw-inventory-slots article { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 10px; align-items:center; padding:11px 12px; border:1px solid #193c2e16; border-radius:11px; background:#fffdf6; }
.rw-inventory-slots article span { color:#697468;font-size:8px;text-transform:uppercase; }
.rw-inventory-slots article strong { grid-column:1;font-size:10px; }
.rw-inventory-slots article button { grid-column:2;grid-row:1/3;padding:7px 9px;border:1px solid #193c2e30;border-radius:7px;color:#193c2e;background:#edf0e5;font-size:8px;font-weight:800; }
.rw-empty-copy { padding:16px;color:#697468;background:#fffdf6;border-radius:11px;font-size:10px;line-height:1.55; }
.rw-full-art > img { aspect-ratio:3/4; border-radius:12px; object-fit:cover; object-position:50% 12%; }
.rw-wallet { display:grid;grid-template-columns:repeat(5,auto);gap:16px;align-items:center;justify-content:center;padding:22px;margin-bottom:25px;border-radius:18px;color:#f8f1de;background:#193c2e; }
.rw-wallet div { display:grid;gap:5px;text-align:center; }
.rw-wallet small { color:#c5d3c7;font-size:8px;letter-spacing:.08em;text-transform:uppercase; }
.rw-wallet strong { color:#e7c44b;font-size:25px; }
.rw-wallet-balance strong { color:#d9ff57; }
.rw-shop-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px; }
.rw-shop-card { overflow:hidden;border:1px solid #193c2e22;border-radius:16px;background:#fffdf6c9; }
.rw-shop-art { position:relative;display:grid;place-items:center;min-height:165px;overflow:hidden;color:#e7c44b;background:radial-gradient(circle at 50% 38%,#5e8065,#193c2e 68%); }
.rw-shop-art::after { content:"";position:absolute;left:14%;right:14%;bottom:9%;height:10%;border-radius:50%;background:#04110c99;filter:blur(12px); }
.rw-shop-art img { position:relative;z-index:1;display:block;width:100%;height:165px;padding:9px;object-fit:contain;filter:drop-shadow(0 14px 16px #03110bab);transition:transform .25s ease; }
.rw-shop-card:hover .rw-shop-art img { transform:scale(1.045); }
.rw-shop-card > div:last-child { display:grid;gap:8px;padding:16px; }
.rw-shop-card h3 { font-size:15px; }
.rw-shop-card p:not(.rw-eyebrow) { min-height:45px;color:#697468;font-size:9px;line-height:1.55; }
.rw-shop-card > div > strong { color:#526f35;font-size:12px; }
.rw-shop-card button { width:100%;margin-top:3px; }
.rw-shop-card button:disabled { cursor:not-allowed;opacity:.48; }
.rw-owned { border-color:#7f9553;box-shadow:inset 0 0 0 1px #7f9553; }
.rw-inventory-catalog { display:grid;gap:32px;margin:14px 0 42px; }
.rw-inventory-section { display:grid;gap:14px;padding:18px;border:1px solid #193c2e20;border-radius:20px;background:#fffaf0a3; }
.rw-inventory-section-heading { display:flex;justify-content:space-between;align-items:end;gap:16px; }
.rw-inventory-section-heading h3 { font-size:19px;letter-spacing:-.025em; }
.rw-inventory-section-heading > span { color:#697468;font-size:9px;font-weight:750;letter-spacing:.07em;text-transform:uppercase; }
.rw-inventory-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px; }
.rw-inventory-card { position:relative;overflow:hidden;border:1px solid #193c2e24;border-radius:15px;background:#fffdf6;box-shadow:0 8px 24px #153c2d0b; }
.rw-inventory-card.rw-is-available { border-color:#73894b;box-shadow:inset 0 0 0 1px #73894b,0 10px 28px #153c2d13; }
.rw-inventory-card.rw-is-locked { background:#f2ede1; }
.rw-inventory-art { position:relative;display:grid;place-items:center;min-height:138px;overflow:hidden;background:radial-gradient(circle at 50% 37%,#5c7a62,#173b2d 70%); }
.rw-inventory-art::after { content:"";position:absolute;left:15%;right:15%;bottom:8%;height:10%;border-radius:50%;background:#020b0785;filter:blur(9px); }
.rw-inventory-art img { position:relative;z-index:1;display:block;width:100%;height:145px;padding:8px;object-fit:contain;filter:drop-shadow(0 12px 13px #0008); }
.rw-inventory-art .rw-equipment-model { position:relative;z-index:1;display:block;width:100% !important;min-width:0;max-width:100%;height:145px;justify-self:stretch;background:transparent;--poster-color:transparent;--progress-bar-color:#d9ff57; }
.rw-inventory-art-3d { cursor:grab; }
.rw-inventory-art-3d:active { cursor:grabbing; }
.rw-inventory-character { min-height:190px; }
.rw-inventory-character img { height:210px;padding:0;object-fit:cover;object-position:50% 14%; }
.rw-inventory-art > span { position:absolute;z-index:3;left:8px;bottom:8px;padding:5px 7px;border:1px solid #e7c44b70;border-radius:999px;color:#fff7df;background:#071b14e8;font-size:7px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;backdrop-filter:blur(7px); }
.rw-is-locked .rw-inventory-art img { filter:grayscale(.82) brightness(.66) drop-shadow(0 12px 13px #0008); }
.rw-inventory-card > div:last-child { display:grid;gap:7px;padding:13px; }
.rw-inventory-card small { color:#697468;font-size:7px;font-weight:800;letter-spacing:.09em;text-transform:uppercase; }
.rw-inventory-card h4 { margin:0;color:#193c2e;font-size:12px;line-height:1.25; }
.rw-inventory-card p { min-height:42px;color:#697468;font-size:8px;line-height:1.5; }
.rw-inventory-card > div > strong { color:#526f35;font-size:9px;line-height:1.35; }
.rw-inventory-card button { width:100%;min-height:36px;margin-top:2px; }
@media (max-width:950px){.rw-character-creator.rw-creation-mode{grid-template-columns:180px minmax(0,1fr);grid-template-areas:"roster stage" "controls controls"}.rw-inventory-layout{grid-template-columns:1fr}.rw-shop-grid,.rw-inventory-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.rw-stage-3d{min-height:560px}}
@media (max-width:620px){.rw-character-creator.rw-creation-mode{grid-template-columns:1fr;grid-template-areas:"stage" "roster" "controls"}.rw-stage-3d{min-height:540px}.rw-model-class-item{top:13%;right:-2%;width:45%}.rw-model-loadout{left:-1%;top:25%;width:34%}.rw-inventory-layout{padding:10px;border-radius:19px}.rw-inventory-section{padding:12px}.rw-wallet{grid-template-columns:1fr auto 1fr;gap:9px}.rw-wallet div:last-child{grid-column:1/-1;padding-top:12px;border-top:1px solid #f8f1de24}.rw-wallet span:nth-of-type(2){display:none}.rw-shop-grid,.rw-inventory-grid{gap:9px}.rw-shop-art{min-height:140px}.rw-shop-art img{height:140px}.rw-inventory-section-heading{align-items:start}.rw-inventory-section-heading .rw-text-button{font-size:8px}.rw-inventory-art{min-height:120px}.rw-inventory-art img,.rw-inventory-art .rw-equipment-model{height:128px}.rw-inventory-character{min-height:165px}.rw-inventory-character img{height:180px}.rw-inventory-card p{min-height:0}}
@media (max-width:390px){.rw-stage-3d{min-height:500px}.rw-shop-grid{grid-template-columns:1fr}.rw-shop-card p:not(.rw-eyebrow){min-height:0}.rw-inventory-card h4{font-size:11px}.rw-inventory-card > div:last-child{padding:10px}.rw-inventory-art img,.rw-inventory-art .rw-equipment-model{height:112px}.rw-inventory-character img{height:155px}}

/* v0.8 — criador em três zonas, características independentes e equipamentos materializados. */
.rw-character-creator.rw-creation-mode {
  grid-template-columns: minmax(250px,.78fr) minmax(390px,1.25fr) minmax(245px,.78fr);
  grid-template-areas: "controls stage story";
  gap: 14px;
  align-items: stretch;
  padding: 14px;
  background:
    radial-gradient(circle at 51% 12%,#63805c42,transparent 32%),
    linear-gradient(145deg,#173c2e,#071c15 62%,#133328);
}
.rw-character-controls { grid-area: controls; display:grid; align-content:start; gap:13px; min-width:0; padding:16px; border:1px solid #e7c44b57; border-radius:17px; background:linear-gradient(180deg,#102d23f2,#0a211af2); box-shadow:0 14px 34px #0004; }
.rw-creator-brand { display:grid; justify-items:center; gap:7px; padding:4px 8px 13px; border-bottom:1px solid #f8f1de1f; }
.rw-creator-brand img { width:min(152px,86%); max-height:74px; object-fit:contain; border-radius:9px; background:#f8f1de; }
.rw-creator-brand span { color:#e7c44b; font-size:8px; font-weight:850; letter-spacing:.14em; text-transform:uppercase; }
.rw-creator-section { display:grid; gap:8px; min-width:0; margin:0; padding:0 0 12px; border:0; border-bottom:1px solid #f8f1de18; }
.rw-creator-section legend { width:100%; margin-bottom:8px; color:#e7c44b; font-size:8px; font-weight:850; letter-spacing:.12em; text-transform:uppercase; }
.rw-sex-options { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.rw-sex-options button { display:flex; justify-content:center; align-items:center; gap:7px; min-height:39px; border:1px solid #f8f1de25; border-radius:9px; color:#d9e3da; background:#f8f1de09; font-size:9px; font-weight:800; }
.rw-sex-options button > span { color:#e7c44b; font-size:17px; line-height:1; }
.rw-sex-options button[aria-pressed="true"] { border-color:#d9ff57; color:#fffdf6; background:#d9ff5713; box-shadow:inset 0 0 0 1px #d9ff5740; }
.rw-class-options { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.rw-class-option { display:grid; grid-template-columns:36px minmax(0,1fr); gap:7px; align-items:center; min-width:0; min-height:51px; padding:6px; border:1px solid #f8f1de20; border-radius:10px; color:#f8f1de; background:#f8f1de08; text-align:left; }
.rw-class-option > img { width:36px; height:39px; padding:2px; border:1px solid var(--sigil); border-radius:8px; object-fit:contain; background:#071b14; filter:drop-shadow(0 5px 7px #0008); }
.rw-class-option span,.rw-class-option strong,.rw-class-option small { display:block; min-width:0; }
.rw-class-option strong { color:#fff8e8; font-size:8.5px; line-height:1.25; }
.rw-class-option small { margin-top:3px; overflow:hidden; color:#aebeb2; font-size:6.5px; line-height:1.25; text-overflow:ellipsis; white-space:nowrap; }
.rw-class-option.rw-is-selected { border-color:var(--sigil); background:color-mix(in srgb,var(--sigil) 12%,transparent); box-shadow:inset 3px 0 var(--sigil); }
.rw-physical-traits { gap:6px; }
.rw-trait-stepper { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center; min-height:42px; padding:6px 7px 6px 10px; border:1px solid #f8f1de18; border-radius:9px; background:#f8f1de07; }
.rw-trait-stepper > span { display:grid; gap:2px; min-width:0; }
.rw-trait-stepper small { color:#8fa297; font-size:6.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.rw-trait-stepper strong { overflow:hidden; color:#f8f1de; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.rw-trait-stepper > div { display:flex; gap:4px; }
.rw-trait-stepper button { display:grid; place-items:center; width:27px; height:27px; border:1px solid #e7c44b5c; border-radius:7px; color:#e7c44b; background:#071a14; font-size:18px; line-height:1; }
.rw-trait-stepper button:hover { border-color:#d9ff57; color:#d9ff57; }
.rw-trait-stepper.rw-trait-disabled { opacity:.58; }
.rw-trait-stepper button:disabled { cursor:not-allowed; border-color:#f8f1de1c; color:#8fa297; }
.rw-character-name { display:grid; gap:6px; color:#e7c44b; font-size:8px; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }
.rw-character-name input { min-height:43px; border-color:#e7c44b52; color:#fffdf6; background:#f8f1de0c; font-size:12px; font-weight:750; letter-spacing:normal; text-transform:none; }
.rw-character-controls .rw-secondary-button { border-color:#f8f1de2b; color:#f8f1de; background:#f8f1de0a; }
.rw-character-controls .rw-lock-warning { margin-top:0 !important; }

.rw-creation-mode > .rw-character-stage { grid-area:stage; display:grid; grid-template-rows:minmax(620px,1fr) auto; }
.rw-creation-mode .rw-stage-visual { min-height:620px; max-height:none; }
.rw-character-nameplate { display:grid; justify-items:center; gap:4px; padding:16px 20px 18px; border-top:1px solid #e7c44b45; background:linear-gradient(180deg,#173c2e,#0c281e); text-align:center; }
.rw-character-nameplate span { color:#9fb0a3; font-size:7px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.rw-character-nameplate strong { color:#e7c44b; font-family:Georgia,serif; font-size:26px; line-height:1.1; }
.rw-character-nameplate small { color:#d0dbd2; font-size:8px; }
.rw-character-story { grid-area:story; display:grid; align-content:start; gap:11px; min-width:0; }
.rw-story-card { position:relative; overflow:hidden; padding:18px 16px 17px; border:1px solid #e7c44b4a; border-radius:16px; color:#f8f1de; background:linear-gradient(155deg,#183d2f,#0b241b); box-shadow:0 14px 32px #0003; }
.rw-story-card::after { content:""; position:absolute; inset:auto -34px -43px auto; width:120px; height:120px; border:1px solid #e7c44b21; border-radius:50%; }
.rw-story-index { position:absolute; top:12px; right:13px; color:#e7c44b52; font-family:Georgia,serif; font-size:27px; }
.rw-story-card .rw-eyebrow { color:#e7c44b; font-size:7px; }
.rw-story-card h2 { max-width:85%; margin-top:8px; color:#fff7df; font-size:22px; }
.rw-story-card h3 { max-width:85%; margin:8px 0 0; color:#fff7df; font-size:19px; }
.rw-story-card > p:not(.rw-eyebrow) { position:relative; z-index:1; margin-top:10px; color:#c7d5ca; font-size:9px; line-height:1.65; }
.rw-story-primary { border-color:#d9ff5761; }
.rw-story-reward { position:relative; z-index:1; display:grid; grid-template-columns:47px minmax(0,1fr); gap:10px; align-items:center; margin-top:15px; padding:8px; border:1px solid #f8f1de20; border-radius:11px; background:#071b14a6; }
.rw-story-reward img { width:47px; height:51px; object-fit:contain; filter:drop-shadow(0 7px 8px #0009); }
.rw-story-reward span,.rw-story-reward small,.rw-story-reward strong { display:block; min-width:0; }
.rw-story-reward small { color:#9eafa2; font-size:6.5px; letter-spacing:.08em; text-transform:uppercase; }
.rw-story-reward strong { margin-top:3px; color:#e7c44b; font-size:9px; }
.rw-story-tags { position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:5px; margin-top:13px; }
.rw-story-tags span { padding:5px 7px; border:1px solid #f8f1de24; border-radius:999px; color:#d8e1da; background:#f8f1de08; font-size:6.5px; }
.rw-story-note { padding:12px 13px; border-left:3px solid #e7c44b; border-radius:0 10px 10px 0; color:#bdcbbf; background:#f8f1de08; font-size:8px; line-height:1.55; }

.rw-avatar-model > .rw-model-base,.rw-avatar-model > .rw-model-face { width:100%; height:100%; object-fit:contain; object-position:50% 100%; }
.rw-avatar-model > .rw-model-base { position:relative; z-index:1; }
.rw-avatar-model > .rw-model-face { position:absolute; z-index:2; inset:0; transform-origin:50% 17%; pointer-events:none; -webkit-mask-image:radial-gradient(ellipse 9% 11% at 50% 17%,#000 55%,transparent 100%); mask-image:radial-gradient(ellipse 9% 11% at 50% 17%,#000 55%,transparent 100%); }
.rw-face-angular > .rw-model-face { transform:scaleX(.96); }
.rw-face-oval > .rw-model-face { transform:scaleX(1); }
.rw-face-forte > .rw-model-face { transform:scaleX(1.06); }
.rw-realistic-model:not(.rw-special-model) > .rw-model-base,.rw-realistic-model:not(.rw-special-model) > .rw-model-face { filter:drop-shadow(0 20px 18px #06130e9c); }
.rw-character-detail-layer { position:absolute; z-index:3; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; filter:none !important; }
.rw-hair-layer { fill:currentColor; stroke:#080c0a73; stroke-width:.75; filter:url(#rw-soft-hair); mix-blend-mode:multiply; opacity:.82; }
.rw-hair-mass { fill:currentColor; }
.rw-hair-lock { opacity:.9; }
.rw-hair-shaved { opacity:.35; }
.rw-scalp-cover { fill:var(--rw-skin-overlay,#b67d58); stroke:#6b452b55; stroke-width:.5; filter:blur(.45px); opacity:.9; }
.rw-skin-claro { --rw-skin-overlay:#c78f69; }.rw-skin-bronze { --rw-skin-overlay:#ad744e; }.rw-skin-oliva { --rw-skin-overlay:#927151; }.rw-skin-escuro { --rw-skin-overlay:#62432f; }
.rw-hair-curls { fill:currentColor; stroke:#080c0a80; stroke-width:.6; }
.rw-hair-strands { fill:none; stroke:#f3d8a045; stroke-width:.8; stroke-linecap:round; opacity:.72; }
.rw-hair-stubble { stroke:#090d0b99; stroke-width:1; }
.rw-hair-color-escuro { color:#151a17; }.rw-hair-color-castanho { color:#57351f; }.rw-hair-color-ruivo { color:#8a4425; }.rw-hair-color-grisalho { color:#928f82; }
.rw-eye-layer { fill:currentColor; stroke:#f4efe0; stroke-width:.7; }.rw-eye-layer circle { fill:#111a15; stroke:none; }
.rw-eye-color-castanhos { color:#6b4329; }.rw-eye-color-verdes { color:#568352; }.rw-eye-color-azuis { color:#5a8fac; }.rw-eye-color-ambar { color:#c88a2d; }
.rw-beard-layer { mix-blend-mode:multiply; opacity:.82; }
.rw-beard-mass { fill:currentColor; stroke:#080c0a69; stroke-width:.55; opacity:.62; }
.rw-beard-strands { fill:none; stroke:currentColor; stroke-width:2.15; stroke-linecap:round; opacity:.86; }
.rw-beard-short { stroke-width:1.65; opacity:.7; }
.rw-tattoo-layer { fill:none; stroke:#273b31; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; opacity:.82; }
.rw-earring-layer { fill:none; stroke:#e7c44b; stroke-width:2.1; }
.rw-gender-feminino .rw-eye-layer { transform:translateY(-1px); }

.rw-model-portrait > .rw-model-face,.rw-model-portrait > .rw-character-detail-layer { display:none; }
.rw-equipped-loadout { display:grid; gap:7px; width:100%; margin-top:13px; padding-top:12px; border-top:1px solid #e7c44b38; text-align:left; }
.rw-loadout-title { color:#e7c44b !important; font-size:7px !important; font-weight:850; letter-spacing:.12em; text-transform:uppercase; }
.rw-equipped-loadout > div { display:flex; flex-wrap:wrap; gap:7px; }
.rw-loadout-item { display:grid; grid-template-columns:31px minmax(0,1fr); gap:7px; align-items:center; min-width:125px; padding:6px 8px; border:1px solid #e7c44b3d; border-radius:9px; background:#071b147a; }
.rw-loadout-item > img { display:block; width:31px; height:34px; padding:2px; border-radius:6px; object-fit:contain; background:#193c2e; filter:drop-shadow(0 4px 5px #0007); }
.rw-loadout-item span,.rw-loadout-item small,.rw-loadout-item strong { display:block; min-width:0; }
.rw-loadout-item small { color:#aab9ae; font-size:6px; letter-spacing:.04em; text-transform:uppercase; }
.rw-loadout-item strong { margin-top:2px; overflow:hidden; color:#f8f1de; font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
.rw-loadout-empty { color:#aab9ae; font-size:8px; }
.rw-character-nameplate .rw-equipped-loadout { max-width:420px; }

.rw-class-evolution { grid-template-columns:52px minmax(0,1fr) auto; }
.rw-class-evolution > button { grid-column:3; padding:7px 9px; border:1px solid #193c2e30; border-radius:7px; color:#193c2e; background:#edf0e5; font-size:8px; font-weight:800; }

@media (max-width:1040px){
  .rw-character-creator.rw-creation-mode { grid-template-columns:260px minmax(390px,1fr); grid-template-areas:"controls stage" "story story"; }
  .rw-character-story { grid-template-columns:1fr 1fr; }
  .rw-story-note { grid-column:1/-1; }
}
@media (max-width:720px){
  .rw-character-creator.rw-creation-mode { grid-template-columns:1fr; grid-template-areas:"stage" "controls" "story"; padding:9px; }
  .rw-creation-mode > .rw-character-stage { grid-template-rows:minmax(520px,1fr) auto; }
  .rw-creation-mode .rw-stage-visual { min-height:520px; }
  .rw-character-story { grid-template-columns:1fr; }
  .rw-story-note { grid-column:auto; }
  .rw-class-options { grid-template-columns:1fr 1fr; }
}
@media (max-width:390px){
  .rw-creation-mode > .rw-character-stage { grid-template-rows:minmax(465px,1fr) auto; }
  .rw-creation-mode .rw-stage-visual { min-height:465px; }
  .rw-character-controls { padding:13px; }
  .rw-class-options { grid-template-columns:1fr; }
  .rw-trait-stepper { min-height:45px; }
  .rw-character-nameplate strong { font-size:22px; }
  .rw-class-evolution { grid-template-columns:46px minmax(0,1fr); }
  .rw-class-evolution > button { grid-column:1/-1; }
}

/* v0.9 — primeiro modelo GLB real, interativo e otimizado para a web. */
.rw-avatar-platform > .rw-model-pilot-3d { position:absolute; inset:0; width:100% !important; height:100% !important; min-height:0; }
.rw-avatar-platform > .rw-model-pilot-3d[data-avatar-view="left"],
.rw-avatar-platform > .rw-model-pilot-3d[data-avatar-view="right"] { transform:none; filter:none; }
.rw-model-pilot-3d::before { display:none; }
.rw-model-viewer { position:absolute; inset:0; display:block; width:100%; height:100%; min-height:0; overflow:hidden; background:transparent; --poster-color:transparent; --progress-bar-color:#d9ff57; --progress-bar-height:3px; }
.rw-model-viewer[data-modular-active="false"] { z-index:0;opacity:0;pointer-events:none; }
.rw-model-viewer[data-modular-active="true"] { z-index:1;opacity:1; }
.rw-model-poster { display:block; width:100%; height:100%; object-fit:contain; object-position:50% 100%; filter:drop-shadow(0 20px 18px #06130e9c); }
.rw-model-progress { position:absolute; right:12%; bottom:10%; left:12%; height:3px; overflow:hidden; border-radius:999px; background:#f8f1de22; }
.rw-model-progress > span { display:block; width:var(--progress,0%); height:100%; border-radius:inherit; background:#d9ff57; box-shadow:0 0 12px #d9ff5788; }
.rw-model-mode-note { position:absolute; z-index:4; right:14px; bottom:62px; left:14px; margin:0; color:#d4dfd6; font-size:7px; font-weight:760; letter-spacing:.035em; line-height:1.35; text-align:center; text-shadow:0 2px 7px #000; }
.rw-review-reset { display:flex; align-items:center; justify-content:space-between; gap:18px; margin:0 0 16px; padding:13px 16px; border:1px solid #d6b94f70; border-radius:16px; color:#f8f1de; background:linear-gradient(110deg,#153b2d,#0b241c); box-shadow:0 10px 26px #06140f2b; }
.rw-review-reset > div { min-width:0; }
.rw-review-reset span { display:block; margin-bottom:3px; color:#d9ff57; font-size:8px; font-weight:850; letter-spacing:.12em; text-transform:uppercase; }
.rw-review-reset strong { display:block; font-size:15px; line-height:1.2; }
.rw-review-reset p { max-width:660px; margin:4px 0 0; color:#cbd6cc; font-size:10px; line-height:1.45; }
.rw-review-reset button { flex:0 0 auto; min-height:40px; color:#102a20; background:#f8f1de; }
@media (max-width:620px){
  .rw-avatar-platform > .rw-model-pilot-3d { width:100% !important; }
  .rw-model-mode-note { bottom:59px; }
  .rw-review-reset { align-items:stretch; flex-direction:column; gap:11px; padding:13px; }
  .rw-review-reset button { width:100%; }
}