/* ProtonRP 2026 refresh. Original pixel artwork, calmer and readable controls. */
@font-face { font-family:Proton Rounded; src:url('/local/fonts/Nunito.ttf') format('truetype'); font-weight:200 900; font-display:swap; }
html:has(.proton-landing) { background:#25343b; }
body.proton-landing { --ink:#243e48; --teal:#206777; --muted:#536c76; --line:#c9d7d6; min-height:100vh; height:auto; background-color:#e6e6de; font:16px/1.5 'Proton Rounded',ui-rounded,sans-serif; color:var(--ink); overflow-x:hidden; }
.proton-landing *, .proton-landing *::before, .proton-landing *::after { box-sizing:border-box; }
.proton-landing input,.proton-landing button,.proton-landing .formItemTitle,.proton-landing .formItemDesc,.proton-landing #mainContainer { font-family:inherit; }
.proton-landing a { text-underline-offset:3px; }
.proton-landing :is(a,button,input,[role=button]):focus-visible { outline:3px solid #13849b; outline-offset:4px; }
.proton-landing [hidden] { display:none !important; }
.proton-landing header { position:relative; min-height:112px; background:rgba(31,41,47,.96); border-bottom:1px solid #748c91; box-shadow:0 4px 18px #142f3c20; }
.proton-landing #login-form-container { display:flex; align-items:center; gap:32px; padding:16px 36px; min-height:112px; max-width:1560px; margin:auto; }
.proton-landing header #habbo-logo { position:static; flex:0 0 230px; width:230px; height:76px; }
.proton-landing header form { position:static; width:auto; height:auto; flex:1; }
.proton-landing #login-columns { display:flex; align-items:flex-start; gap:14px; }
.proton-landing #login-columns>div { position:static; width:auto; height:auto; }
.proton-landing #login-column-1,.proton-landing #login-column-2 { flex:0 1 215px; min-width:0; }
.proton-landing header form label { display:block; margin-bottom:5px; font-size:13px; font-weight:500; color:#dce8e9; }
.proton-landing #login-form-container input:not([type=submit]) { width:100%; height:40px; padding:8px 12px; background:#f9fbfa; color:var(--ink); border:1px solid #b9ccce; border-radius:10px; font-size:15px; }
.proton-landing header form .sub-label { display:inline-block; font-size:12px; font-weight:400; color:#bcdee6; margin-top:5px; }
.proton-landing #login-column-3 { padding-top:25px; }
.proton-landing #login-column-4 { margin:auto 0 auto auto; color:#c9e4e7; font-size:14px; padding-left:8px; }
.proton-landing .button { border:1px solid #508d99; border-radius:10px; background:#246d7b; height:40px; line-height:38px; font-weight:500; box-shadow:0 3px 0 #0f3945; transition:background .15s; }
.proton-landing .button b { display:none; }
.proton-landing .button:hover { background:#308295; }
.proton-landing #credentials-submit { width:104px; margin:0; padding:0; }
.proton-landing #border-left,.proton-landing #border-right,.proton-landing #top-bar-triangle,.proton-landing #top-bar-triangle-border { display:none; }
.proton-landing #content { min-height:660px; height:auto; overflow:visible; }
.proton-landing #content>ul { height:auto; width:100%; }
.proton-landing #content>ul>li { position:relative; top:auto; height:auto; min-height:660px; padding:48px 48px 100px; }
.proton-landing #home-anchor { background-position:right -100px; background-size:auto 850px; }
.proton-landing #home-anchor #welcome { position:relative; top:auto; left:auto; display:flex; flex-direction:row-reverse; justify-content:flex-end; gap:24px; align-items:center; width:fit-content; max-width:100%; padding:24px; background:#f8f9f1f0; border:1px solid #ffffff; border-radius:18px; box-shadow:0 6px 24px #213a4620; }
.proton-landing #welcome #slogan { position:static; width:auto; height:auto; max-width:420px; }
.proton-landing #welcome #slogan h1 { color:var(--ink); font-size:clamp(25px,2.5vw,36px); font-weight:700; font-style:normal; line-height:1.2; letter-spacing:-.8px; text-shadow:none; margin-bottom:8px; }
.proton-landing #welcome #slogan p { color:var(--muted); font-size:16px; font-style:normal; text-shadow:none; }
.proton-landing #welcome #slogan a { color:#206777; font-size:14px; font-weight:500; font-style:normal; display:inline-block; margin-top:8px; }
.proton-landing #join-now-button { width:230px; flex-shrink:0; height:auto; padding:17px 14px; border:1px solid #b58719; border-radius:12px; background:linear-gradient(#ffdb66,#efbd36); color:#493812; box-shadow:0 4px 0 #a77c16; }
.proton-landing #join-now-button:hover { background:linear-gradient(#ffe48a,#f7ca4a); }
.proton-landing #join-now-button span { font-size:25px; text-transform:none; line-height:1.4; text-shadow:none; }
.proton-landing #join-now-button span.sub { font-size:12px; font-weight:500; line-height:1.6; margin-top:4px; }
.proton-landing #carousel { position:relative; left:auto; top:auto; margin-top:26px; width:846px; max-width:100%; height:auto; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; padding:7px; background:#f5faf1ee; border:1px solid #799b9e; border-radius:12px; box-shadow:0 5px 18px #193b4530; overflow:hidden; }
.proton-landing #carousel :is(#image1,#image2,#image3) { position:relative; left:auto; top:auto; width:100%; height:auto; aspect-ratio:274/200; border:1px solid #485955; border-radius:6px; background-size:100% 100%; image-rendering:pixelated; }
.proton-landing #tell-me-more { position:static; grid-column:1/-1; margin:0; padding:18px; color:var(--ink); font-size:15px; font-style:normal; font-weight:400; }
.proton-landing #tell-me-more.is-open { display:block; }
.proton-landing #floaters { display:none; }
.proton-landing footer { position:relative; bottom:auto; height:auto; padding:22px 36px; background:#25343bf5; border-top:1px solid #779295; }
.proton-landing #footer-content { float:none; max-width:none; margin:0; }
.proton-landing #footer { max-width:none; padding:0; margin:0; line-height:2; }
.proton-landing #footer a { color:#d1e2e5; font-size:13px; }
.proton-landing #copyright { width:auto; font-style:normal; font-size:12px; color:#a9bfc4; margin-top:12px; }
/* The signup shell keeps the original illustration and all four account steps. */
.proton-landing.is-registering #content { background:linear-gradient(90deg,#e9eee6e8,#e9eee620); }
.proton-landing #content>ul>#registration-anchor { padding-top:34px; background-position:right 30px; min-height:720px; }
.proton-landing #mainContainer { position:relative; top:auto; left:auto; width:740px; max-width:100%; height:auto; background:#f8faf5; border:1px solid #c6d6d5; border-radius:20px; overflow:hidden; color:var(--ink); box-shadow:0 12px 45px #193b4529; }
.proton-landing #containerTop { height:auto; padding:24px 30px 0; background:#eef3eb; }
.proton-landing .registration-home { color:var(--teal); font-size:13px; font-weight:500; text-decoration:none; }
.proton-landing .registration-eyebrow { color:#577476; font-size:11px; font-weight:700; letter-spacing:1.7px; margin:22px 0 5px; }
.proton-landing .stepText { position:static; font-size:28px; font-weight:700; letter-spacing:-.5px; line-height:1.25; margin:0 0 22px; }
.proton-landing #contentTop { position:static; width:auto; height:auto; float:right; background:transparent; color:#526c74; font-size:12px; line-height:20px; margin-top:2px; }
.proton-landing #content .registration-progress { display:flex; width:100%; height:auto; gap:8px; counter-reset:steps; padding:0 0 20px; }
.proton-landing #content .registration-progress li { position:static; display:flex; align-items:center; gap:8px; width:auto; height:auto; flex:1; color:#63777b; font-size:12px; font-weight:500; counter-increment:steps; }
.proton-landing .registration-progress li::before { content:counter(steps); display:grid; place-items:center; width:26px; height:26px; flex-shrink:0; background:#dce5df; border-radius:50%; color:#52686d; }
.proton-landing .registration-progress li.is-current { color:#195c6c !important; }
.proton-landing .registration-progress li.is-current::before { background:#246d7b; color:#fff; box-shadow:0 0 0 3px #246d7b1a; }
.proton-landing .registration-progress li.is-complete::before { content:'✓'; background:#d4e8dc; color:#2d6448; }
.proton-landing .divider,.proton-landing #divider { display:none; }
.proton-landing #containerBottom { height:auto; margin:0; padding:26px 30px; }
.proton-landing #containerBottomLeft,.proton-landing #containerContent { display:block; width:100%; height:auto; padding:0; background:none; }
.proton-landing #cms-registration-form { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.proton-landing .formItem { position:static; width:auto; margin:0; }
.proton-landing #mainContainer .formItemTitle { display:block; color:var(--ink); font-size:16px; font-weight:500; line-height:1.4; margin-bottom:5px; -webkit-font-smoothing:antialiased; }
.proton-landing #mainContainer .formItemDesc { color:var(--muted); font-size:12px; font-weight:400; line-height:1.5; min-height:36px; margin-bottom:8px; }
.proton-landing .formItemInput>input { width:100%; margin:0; height:46px; padding:11px 13px; border:1px solid #b9ccce; background:#fff; border-radius:10px; font-size:16px; color:var(--ink); box-shadow:0 2px 2px #244a5206; }
.proton-landing .formItemInput>input:focus { border-color:#277b8e; box-shadow:0 0 0 3px #277b8e1a; }
.proton-landing #containerBottomRight { display:flex; justify-content:flex-end; gap:12px; width:100%; height:auto; margin-top:26px; padding-top:22px; border-top:1px solid #dbe4df; }
.proton-landing #figurePreviewContainer,.proton-landing .youToolTip,.proton-landing .bubble { display:none !important; }
.proton-landing #mainContainer .continueBtn,.proton-landing #mainContainer .backBtn { position:static; width:auto; height:auto; min-height:44px; padding:10px 24px; border-radius:10px; font-size:14px; line-height:1.5; font-weight:500; background:#246d7b; color:#fff; border:1px solid #185766; box-shadow:0 3px 0 #143c46; }
.proton-landing #mainContainer .continueBtn:hover { background:#318497; }
.proton-landing #mainContainer .backBtn { margin-right:auto; background:#f1f5ef; color:#476369; box-shadow:none; border-color:#c7d6d2; }
.proton-landing #registration-error { margin:0 0 20px; padding:13px 16px; border:1px solid #ecc4ba; border-radius:10px; font-family:inherit; font-size:14px; line-height:1.5; }
.proton-landing #classBtnContainer { position:static; display:flex; gap:12px; width:auto; height:auto; margin:12px 0 18px; }
.proton-landing .classBtn { width:auto; flex:1; margin:0; height:auto; padding:12px; line-height:1.5; border:1px solid #b9cecd; border-radius:10px; background:#eef3eb; color:var(--ink); font-size:14px; }
.proton-landing .classClicked { background:#d8eceb; border-color:#277a88; box-shadow:0 0 0 2px #277a881c; }
.proton-landing #classBody { position:static; width:auto; height:auto; padding:20px; border-radius:12px; background:#eaf0e8; font-size:14px; color:#45616b; }
.proton-landing #genderContainer { position:static; float:none; display:flex; gap:10px; width:auto; height:auto; background:none; margin:0 0 20px; }
.proton-landing .gender { position:static; width:auto; height:auto; padding:9px 22px; border:1px solid #c2d3ce; border-radius:10px; background:#edf2e9; color:var(--ink); font-size:14px; }
.proton-landing .genderChosen { background:#d8eceb; border-color:#277a88; box-shadow:0 0 0 2px #277a881c; }
.proton-landing .genderDivider { display:none; }
.proton-landing #figureContainer { position:static; width:auto; height:auto; margin-top:18px; }
.proton-landing .figureItemContainer { width:calc(25% - 10px); height:120px; margin:0 8px 10px 0; vertical-align:top; background:#edf2e9 url('/local/avatar.svg') center 10px/48px 70px no-repeat; border:1px solid #c2d3ce; border-radius:12px; }
.proton-landing #mainContainer .figureItemContainerChosen { background-color:#d5e9e8; outline:2px solid #277a88; outline-offset:1px; }
.proton-landing .figureItemContainer .preset-label { font:500 13px 'Proton Rounded',sans-serif; color:var(--ink); background:none; margin-top:86px; }
.proton-landing #spawnOptionsContainer { position:static; display:flex; flex-wrap:wrap; gap:20px; margin-top:18px; }
.proton-landing .spawnOption { width:209px; height:auto; padding:5px; border:1px solid #c3d2cb; border-radius:12px; background:#edf3e9; }
.proton-landing .sOption { border-radius:8px; }
.proton-landing .optionClicked { outline:3px solid #277a88; box-shadow:none; }
.proton-landing .spawnOptionToolTip { position:static; width:auto; height:auto; padding:10px 2px 5px; color:#45616b; background:none; font-size:12px; line-height:1.5; }
@media(min-width:1500px) { .proton-landing #content>ul>li { min-height:720px; } .proton-landing #home-anchor { background-size:auto 960px; } }
@media(max-width:1000px) { .proton-landing #login-column-4 { display:none; } .proton-landing #login-form-container { padding:16px 24px; gap:24px; } .proton-landing #content>ul>li { padding-left:24px; padding-right:24px; } .proton-landing #home-anchor { background-position:calc(100% + 260px) 60px; } .proton-landing #home-anchor #welcome { gap:18px; } }
@media(max-width:720px) { .proton-landing #login-form-container { flex-wrap:wrap; gap:14px; padding:14px 20px 20px; } .proton-landing header #habbo-logo { width:190px; flex-basis:190px; height:62px; } .proton-landing header form { flex-basis:100%; } .proton-landing #login-columns { gap:10px; } .proton-landing #credentials-submit { width:76px; } .proton-landing #login-column-1,.proton-landing #login-column-2 { flex:1; } .proton-landing #home-anchor #welcome { flex-direction:column-reverse; align-items:flex-start; width:100%; padding:22px; } .proton-landing #join-now-button { width:100%; padding:10px; } .proton-landing #content>ul>li { padding:24px 16px 250px; min-height:680px; } .proton-landing #home-anchor { background-size:auto 660px; background-position:60% bottom; } .proton-landing #carousel { gap:4px; padding:5px; } .proton-landing #content>ul>#registration-anchor { padding:20px 12px 80px; min-height:650px; background-position:60% bottom; } .proton-landing #containerTop { padding:22px 20px 0; } .proton-landing #containerBottom { padding:22px 20px; } .proton-landing #contentTop { display:none; } .proton-landing .stepText { font-size:25px; } .proton-landing #cms-registration-form { grid-template-columns:1fr; gap:18px; } .proton-landing #mainContainer .formItemDesc { min-height:0; } .proton-landing #content .registration-progress { gap:5px; } .proton-landing #content .registration-progress li { flex-direction:column; font-size:11px; gap:5px; } .proton-landing footer { padding:20px; } .proton-landing .classBtn { padding:10px 5px; } .proton-landing #classBtnContainer { gap:8px; } .proton-landing .figureItemContainer { width:calc(50% - 10px); } .proton-landing #spawnOptionsContainer { justify-content:center; } }
@media(prefers-reduced-motion:reduce) { .proton-landing * { scroll-behavior:auto !important; transition:none !important; animation:none !important; } }

/* Signup: a compact game panel, in the original charcoal and teal palette. */
.proton-landing.is-registering #content { background:transparent; }
.proton-landing #mainContainer { width:700px; background:#192c36; border:2px solid #526b76; border-radius:7px; box-shadow:3px 4px 0 #15263155; color:#edf3f3; }
.proton-landing #containerTop { padding:20px 24px 0; background:#203842; border-bottom:1px solid #42606b; }
.proton-landing .registration-home { color:#b8d8e2; font-size:12px; }
.proton-landing .registration-eyebrow { margin:18px 0 4px; color:#d9b85b; font-size:14px; font-weight:600; letter-spacing:0; }
.proton-landing .stepText { font-size:26px; font-weight:700; margin-bottom:18px; color:#f2f7f6; }
.proton-landing #contentTop { color:#aac5ce; font-size:11px; }
.proton-landing #content .registration-progress { gap:0; padding:0; }
.proton-landing #content .registration-progress li { flex-direction:row; gap:6px; font-size:12px; padding:9px 10px; border-bottom:3px solid transparent; color:#b0c8d0; }
.proton-landing .registration-progress li::before { width:auto; height:auto; background:none; border-radius:0; color:inherit; content:counter(steps) '.'; }
.proton-landing #content .registration-progress li.is-current { background:#172d37; border-bottom-color:#e4bd51; color:#fff !important; }
.proton-landing .registration-progress li.is-current::before,.proton-landing .registration-progress li.is-complete::before { background:none; box-shadow:none; color:inherit; }
.proton-landing #containerBottom { padding:22px 24px; }
.proton-landing #cms-registration-form { gap:16px 20px; }
.proton-landing #mainContainer .formItemTitle { font-family:inherit; font-size:15px; color:#e7f1f3; margin-bottom:6px; }
.proton-landing #mainContainer .formItemDesc { font-family:inherit; color:#adc6ce; font-size:12px; min-height:0; margin-bottom:7px; }
.proton-landing .formItemInput>input { height:40px; border-radius:5px; border:1px solid #91a9ad; background:#f1f5f3; box-shadow:inset 0 2px 0 #233b4510; font-size:15px; }
.proton-landing #character-name-hint { grid-column:1/-1; margin:-6px 0 2px; color:#adc6ce; font-size:12px; line-height:1.7; }
.proton-landing #character-name-preview { color:#ead185; font-weight:500; overflow-wrap:anywhere; }
.proton-landing .email-item { grid-column:1/-1; }
.proton-landing #containerBottomRight { margin-top:20px; padding-top:16px; border-color:#3b535e; }
.proton-landing #mainContainer .continueBtn,.proton-landing #mainContainer .backBtn { border-radius:5px; min-height:39px; padding:8px 22px; font-family:inherit; }
.proton-landing #mainContainer .continueBtn { background:#e5bd4d; color:#352c17; border:1px solid #f4d877; box-shadow:0 3px 0 #8c6d22; }
.proton-landing #mainContainer .continueBtn:hover { background:#f1cb63; }
.proton-landing #mainContainer .backBtn { background:#2c4551; border-color:#587580; color:#d5e7ec; }
.proton-landing #registration-error { background:#ffe5dc; color:#812d20; border-radius:5px; }
.proton-landing .classBtn { background:#2a4551; border:1px solid #597a88; color:#dbeef3; border-radius:5px; }
.proton-landing .classClicked { color:#f2d889; background:#355362; border-color:#e5bd4d; box-shadow:none; }
.proton-landing #classBody { background:#142730; color:#c1d5dc; border:1px solid #38535e; border-radius:4px; padding:18px; }
.proton-landing .gender { background:#2a4551; border:1px solid #597a88; color:#dbeef3; border-radius:5px; }
.proton-landing .genderChosen { border-color:#e5bd4d; background:#355362; box-shadow:none; }
.proton-landing .figureItemContainer { background-color:#253f49; border-color:#526f7a; border-radius:5px; }
.proton-landing #mainContainer .figureItemContainerChosen { background-color:#355362; outline-color:#e5bd4d; }
.proton-landing .figureItemContainer .preset-label { color:#deedf1; background:none; }
.proton-landing .spawnOption { background:#253f49; border-color:#526f7a; border-radius:5px; }
.proton-landing .sOption { border-radius:2px; }
.proton-landing .optionClicked { outline-color:#e5bd4d; }
.proton-landing .spawnOptionToolTip { color:#c1d5dc; }
@media(max-width:720px) {
 .proton-landing #containerTop { padding:18px 18px 0; }
 .proton-landing #containerBottom { padding:20px 18px; }
 .proton-landing #content .registration-progress li { font-size:11px; padding:9px 5px; gap:4px; }
 .proton-landing #character-name-hint { margin-top:-2px; }
}

.proton-landing .stepText:focus { outline:none; }
.proton-landing #figureContainer { grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.proton-landing .figureItemContainer { width:100%; margin:0; }
@media(max-width:720px) { .proton-landing #figureContainer { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* Real, locally cached previews of the exact registration outfit codes. */
.proton-landing .look-selection { display:grid; grid-template-columns:minmax(0,1fr) 172px; gap:22px; align-items:center; margin-top:18px; }
.proton-landing .GenderFigures { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.proton-landing .figureItemContainer { width:100%; height:auto; padding:4px 4px 12px; margin:0; text-align:center; background:#253f49; }
.proton-landing .figureItemContainer img { display:block; width:96px; height:165px; max-width:100%; object-fit:contain; margin:0 auto; image-rendering:pixelated; }
.proton-landing .figureItemContainer .preset-label { display:block; margin:0; }
.proton-landing .selected-character { margin:0; padding:0 0 12px; text-align:center; border-left:1px solid #3b535e; }
.proton-landing .selected-character img { display:block; width:128px; height:220px; margin:0 auto; object-fit:contain; image-rendering:pixelated; }
.proton-landing .selected-character figcaption { color:#e8ce7e; font-size:12px; }
@media(max-width:720px) {
 .proton-landing .look-selection { grid-template-columns:minmax(0,1fr); gap:16px; }
 .proton-landing .selected-character { border-left:0; border-top:1px solid #3b535e; padding-top:4px; }
 .proton-landing .figureItemContainer img { width:96px; height:165px; }
}

.proton-landing .outfit-modes { display:flex; gap:8px; margin-top:14px; }
.proton-landing .outfit-modes button,.proton-landing #outfit-preview-retry { font:500 13px 'Proton Rounded',sans-serif; padding:8px 16px; border:1px solid #597a88; border-radius:4px; background:#2a4551; color:#dbeef3; cursor:pointer; }
.proton-landing .outfit-modes button[aria-pressed=true] { border-color:#e5bd4d; background:#355362; color:#f2d889; }
.proton-landing .outfit-row { border:0; padding:0; margin:0 0 13px; min-width:0; }
.proton-landing .outfit-row legend { padding:0; font-size:13px; color:#dbe9ee; margin-bottom:5px; }
.proton-landing .outfit-row-controls { display:flex; gap:7px; }
.proton-landing .outfit-row select { min-width:0; width:0; flex:1; height:36px; padding:5px 8px; border:1px solid #738f98; border-radius:4px; background:#f1f5f3; color:#243e48; font:13px 'Proton Rounded',sans-serif; }
.proton-landing #outfit-preview-status { color:#b8d0d9; font-size:12px; line-height:1.5; margin:12px 8px; }
.proton-landing .selected-character { min-height:260px; }
.proton-landing #outfit-preview-retry { padding:6px 10px; margin-top:5px; }
@media(max-width:720px) { .proton-landing .outfit-row select { font-size:16px; } }

/* Clickable wardrobe: clothing thumbnails, colour swatches, and a live avatar. */
.proton-landing .look-selection { align-items:start; }
.proton-landing .wardrobe-categories { display:flex; gap:5px; margin-bottom:14px; flex-wrap:wrap; }
.proton-landing .wardrobe-category { flex:1; padding:8px 6px; border:1px solid #526e7a; border-radius:3px; background:#263e49; color:#dcebef; font:600 12px 'Proton Rounded',sans-serif; cursor:pointer; }
.proton-landing .wardrobe-category[aria-pressed=true] { background:#d8b44e; color:#302819; border-color:#edcc6c; }
.proton-landing .wardrobe-styles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-bottom:18px; }
.proton-landing .wardrobe-style { padding:0 2px 10px; background:#253f49; border:1px solid #526f7a; border-radius:4px; color:#dcebef; cursor:pointer; font:13px 'Proton Rounded',sans-serif; }
.proton-landing .wardrobe-style[aria-pressed=true] { border-color:#e5bd4d; box-shadow:inset 0 0 0 1px #e5bd4d; background:#355362; }
.proton-landing .wardrobe-style img { display:block; width:96px; height:165px; max-width:100%; object-fit:contain; margin:auto; image-rendering:pixelated; }
.proton-landing .wardrobe-palette { padding:0; margin:0 0 12px; border:0; display:flex; gap:7px; flex-wrap:wrap; }
.proton-landing .wardrobe-palette legend { color:#c2d6de; font-size:12px; padding:0; margin-bottom:8px; }
.proton-landing .wardrobe-swatch { display:grid; place-items:center; width:32px; height:32px; padding:0; border:2px solid #78909a; border-radius:4px; background:var(--swatch); cursor:pointer; }
.proton-landing .wardrobe-swatch[aria-pressed=true] { outline:2px solid #e5bd4d; outline-offset:2px; }
.proton-landing .wardrobe-swatch span { color:#fff; font-size:18px; font-weight:bold; text-shadow:0 1px 2px #000,1px 0 1px #000,-1px 0 1px #000; }
.proton-landing .wardrobe-hint { font-size:12px; color:#a8c4cf; margin:18px 0 0; }
.proton-landing .selected-character { position:sticky; top:16px; padding-top:10px; background:linear-gradient(transparent 80%,#29434d 80%,#29434d 81%,transparent 81%); }
.proton-landing .selected-character.is-updating img { opacity:.38; }
.proton-landing .selected-character.is-updating #outfit-preview-status { color:#e8ce7e; }
.proton-landing .selected-character figcaption { margin-top:10px; }
@media(max-width:720px) {
 .proton-landing .selected-character { position:static; border:0; grid-row:1; padding:0; min-height:0; }
 .proton-landing .selected-character img { width:96px; height:165px; }
 .proton-landing .wardrobe-swatch { width:34px; height:34px; }
 .proton-landing .wardrobe-style img { width:80px; height:138px; }
}
.proton-landing { display:flex; flex-direction:column; }
.proton-landing header,.proton-landing footer { flex-shrink:0; }
.proton-landing #content { flex:1; }

/* Two full-avatar presets stay in view; the wardrobe opens beneath them. */
.proton-landing .gender { display:grid; place-items:center; width:48px; height:44px; padding:0; font:700 30px/1 'Proton Rounded','Arial',sans-serif; }
.proton-landing .genderMale { background:#24465d; color:#9ed9ff; border-color:#558bb0; }
.proton-landing .genderFemale { background:#58364b; color:#ffc1df; border-color:#ae6e92; }
.proton-landing .genderChosen { outline:2px solid #e5bd4d; outline-offset:2px; }
.proton-landing .preset-picker { display:grid; grid-template-columns:minmax(0,1fr) 172px; gap:22px; align-items:stretch; margin-top:18px; }
.proton-landing .preset-picker .figureItemContainer img { width:128px; height:220px; }
.proton-landing #outfit-custom { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:16px 10px; background:#263e49; border:1px solid #637f8a; border-radius:5px; color:#dcebef; cursor:pointer; font:13px/1.5 'Proton Rounded',sans-serif; }
.proton-landing #outfit-custom strong { font-size:16px; }
.proton-landing #outfit-custom[aria-pressed=true] { border-color:#e5bd4d; background:#355362; color:#f2d889; }
.proton-landing .custom-outfit-icon { font-size:32px; color:#e5bd4d; }
.proton-landing #custom-outfit-section { border-top:1px solid #405c68; padding-top:20px; margin-top:22px; }
.proton-landing .wardrobe-styles { margin-bottom:10px; gap:7px; }
.proton-landing .wardrobe-style img { width:64px; height:110px; }
.proton-landing .wardrobe-style { padding-bottom:7px; font-size:11px; }
.proton-landing .thumbnail-loading { display:grid; place-items:center; height:110px; font-size:11px; color:#9fbcc8; }
.proton-landing .wardrobe-pages { display:flex; justify-content:space-between; align-items:center; gap:10px; margin:8px 0 16px; color:#b4cbd4; font-size:11px; }
.proton-landing .wardrobe-pages button { width:30px; height:28px; padding:0; border:1px solid #607a86; border-radius:3px; background:#2b4753; color:#edf4f7; cursor:pointer; font:22px/1 'Proton Rounded',sans-serif; }
.proton-landing .wardrobe-pages button:disabled { opacity:.35; cursor:default; }
.proton-landing .wardrobe-palette { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:7px; margin:0; }
.proton-landing .wardrobe-swatch { width:100%; height:30px; }
@media(max-width:720px) {
 .proton-landing .preset-picker { grid-template-columns:minmax(0,1fr); gap:12px; }
 .proton-landing #outfit-custom { flex-direction:row; min-height:62px; padding:10px; }
 .proton-landing #outfit-custom>span:last-child { display:none; }
 .proton-landing .preset-picker .figureItemContainer img { width:96px; height:165px; }
 .proton-landing .wardrobe-swatch { height:32px; }
}

.proton-landing #mainContainer { overflow:visible; }
.proton-landing #containerTop { border-radius:5px 5px 0 0; }
.proton-landing #custom-outfit-section { scroll-margin-top:20px; }

/* Each option previews this character, with just that item changed. */
.proton-landing .wardrobe-selected { margin:0 0 10px; color:#f2d889; font-size:13px; font-weight:700; }
.proton-landing .wardrobe-style-name { display:flex; align-items:center; justify-content:center; min-height:34px; padding:0 5px; font-size:12px; line-height:1.3; overflow-wrap:anywhere; }
.proton-landing .wardrobe-style[aria-pressed=true] .wardrobe-style-name { color:#ffe19a; font-weight:800; }
.proton-landing .wardrobe-style:focus-visible { outline:2px solid #fff1be; outline-offset:3px; }
@media(max-width:720px) {
 .proton-landing .selected-character { position:sticky; top:0; z-index:2; display:grid; grid-template-columns:64px minmax(0,1fr); align-items:center; gap:0 12px; padding:5px 12px; background:#192c36; border-bottom:1px solid #58727c; box-shadow:0 5px 10px #10202855; }
 .proton-landing .selected-character img { width:64px; height:110px; grid-row:1 / span 3; }
 .proton-landing .selected-character figcaption { margin:0; text-align:left; align-self:end; }
 .proton-landing #outfit-preview-status { margin:5px 0; text-align:left; align-self:start; }
 .proton-landing #outfit-preview-retry { justify-self:start; }
}