/*  ReBBu Unified Web: Habbo parts, round 2. One layer on top of the design system: it loads AFTER main.css and the page's own sheet
    (templates/unified_head.php, housekeeping_header.php, community_header.php). Rollback: delete the <link> to this file.

    Restraint: the Habbo sliding door (web-gallery/v2/images/new_button.png, hard pixels, black outline, light and dark half) is only for real calls
    to action (create account, log in, register, the hotels, enter, add, save). Labels, counters, tags, tabs and quiet actions are flat: text,
    underlines, real Habbo symbols (navi_icons, small_icons, info_icons, room_icon_1..5, Shockwave ticks/arrows/chat bubble). Hotel and state marks
    are the small pixel doors of habbo-marks-a.css. Whole pixel sizes: --hb is 2px for big buttons. Text stays HTML (Ubuntu).
    Every state (hover, focus, active, pressed) restates all background longhands: the original sheets set "background:" shorthands there. */

:root { --hb: 2px; }

/* 1. the sliding door: only the calls to action ------------------------------------------------------------------------------------------ */
:where(.uw-button.uw-button-gold, .uw-button.uw-button-classic, .uw-button.uw-button-modern) { position: relative; isolation: isolate; }
.uw-button.uw-button-gold, .uw-button.uw-button-classic, .uw-button.uw-button-modern { --hb: 2px; --hb-n: url(../img/ui/btn-navy.png); --hb-h: url(../img/ui/btn-navy-h.png); --hb-img: var(--hb-n);
	box-sizing: border-box; min-height: 50px; padding: 11px 28px 13px 28px; background: none !important; border-radius: 6px !important; box-shadow: 0 6px 14px rgba(8, 18, 38, .25); }
.uw-button.uw-button-gold::before, .uw-button.uw-button-classic::before, .uw-button.uw-button-modern::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; box-sizing: border-box;
	border-style: solid; border-color: transparent; border-width: calc(var(--hb) * 3) calc(var(--hb) * 3) calc(var(--hb) * 12) calc(var(--hb) * 3);
	border-image: var(--hb-img) 3 3 12 3 fill / calc(var(--hb) * 3) calc(var(--hb) * 3) calc(var(--hb) * 12) calc(var(--hb) * 3) stretch; image-rendering: pixelated; transform: translateZ(0); }
.uw-button.uw-button-gold { --hb-n: url(../img/ui/btn-gold.png); --hb-h: url(../img/ui/btn-gold-h.png); }
.uw-button.uw-button-classic { --hb-n: url(../img/ui/btn-green.png); --hb-h: url(../img/ui/btn-green-h.png); }
.uw-button.uw-button-modern { --hb-n: url(../img/ui/btn-violet.png); --hb-h: url(../img/ui/btn-violet-h.png); }
.uw-button.uw-button-gold:hover, .uw-button.uw-button-classic:hover, .uw-button.uw-button-modern:hover { --hb-img: var(--hb-h); filter: none; }
.uw-button.uw-button-gold:active, .uw-button.uw-button-classic:active, .uw-button.uw-button-modern:active { --hb-img: var(--hb-h); box-shadow: 0 3px 8px rgba(8, 18, 38, .25); }
.uw-button.uw-button-small:is(.uw-button-gold, .uw-button-classic, .uw-button-modern) { --hb: 1px; min-height: 30px; padding: 5px 15px 7px 15px; }
.uw-button.uw-button-small:is(.uw-button-gold, .uw-button-classic, .uw-button-modern):active { transform: translateY(1px); }
.uw-world-start { padding-top: 11px; padding-bottom: 13px; }

/* 2. everything else that was a button is quiet: a plain link, no outline, no fill ------------------------------------------------------- */
.uw-page .uw-button:not(.uw-button-gold):not(.uw-button-classic):not(.uw-button-modern) { min-height: 0; padding: 4px 2px; background: none !important; border-radius: 0 !important; box-shadow: none !important;
	font: 500 15px/1.4 var(--uw-font); letter-spacing: 0; text-transform: none; color: var(--uw-link); filter: none; transform: none; }
.uw-page .uw-button:not(.uw-button-gold):not(.uw-button-classic):not(.uw-button-modern):hover, .uw-page .uw-button:not(.uw-button-gold):not(.uw-button-classic):not(.uw-button-modern):focus,
.uw-page .uw-button:not(.uw-button-gold):not(.uw-button-classic):not(.uw-button-modern):active { background: none !important; box-shadow: none !important; color: #b3ddff; filter: none; transform: none; }
.uw-page .uw-account .uw-button:not(.uw-button-gold):not(.uw-button-classic):not(.uw-button-modern) { padding: 7px 15px; background: rgba(255, 255, 255, .06) !important; border-radius: 999px !important; font-size: 14px; color: #e3e9f5; }
.uw-page .uw-account .uw-button:not(.uw-button-gold):not(.uw-button-classic):not(.uw-button-modern):hover, .uw-page .uw-account .uw-button:not(.uw-button-gold):not(.uw-button-classic):not(.uw-button-modern):focus, .uw-page .uw-account .uw-button:not(.uw-button-gold):not(.uw-button-classic):not(.uw-button-modern):active { background: rgba(255, 255, 255, .12) !important; color: #fff; }
.uw-page .uw-page-head .uw-back { margin: 0 0 10px 0; padding-left: 0; }
.uw-page .uw-page-head .uw-button:not(.uw-button-gold):not(.uw-button-classic):not(.uw-button-modern), .uw-page .uw-page-head .uw-button:not(.uw-button-gold):not(.uw-button-classic):not(.uw-button-modern):active { color: #0b4a7a; }
.uw-page .uw-page-head .uw-button:not(.uw-button-gold):not(.uw-button-classic):not(.uw-button-modern):hover, .uw-page .uw-page-head .uw-button:not(.uw-button-gold):not(.uw-button-classic):not(.uw-button-modern):focus { color: #062e4d; }
/* the pages of groups and persons come with their own colours (legacy.css, with an id): the quiet link in their head is dark on the sky as well */
body.uw-legacy #content-container .uw-page-head a.uw-button:not(.uw-button-gold):not(.uw-button-classic):not(.uw-button-modern) { color: #0b4a7a; }
body.uw-legacy #content-container .uw-page-head a.uw-button:not(.uw-button-gold):not(.uw-button-classic):not(.uw-button-modern):hover, body.uw-legacy #content-container .uw-page-head a.uw-button:not(.uw-button-gold):not(.uw-button-classic):not(.uw-button-modern):focus { color: #062e4d; }

/* 3. main navigation: the real navigation icons of the Habbo site, the open page is marked by a pixel line ---------------------------------- */
.uw-nav a { display: flex; align-items: center; gap: 9px; position: relative; }
.uw-nav a::before { content: ""; flex: none; width: 21px; height: 21px; background: no-repeat center / 21px 21px; image-rendering: pixelated; }
.uw-nav li:nth-child(1) a::before { background-image: url(../img/ui/nav-01_home.png); }
.uw-nav li:nth-child(2) a::before { background-image: url(../img/ui/nav-03_community.png); }
.uw-nav li:nth-child(3) a::before { background-image: url(../img/ui/ic-news.png); background-size: 16px 16px; }
.uw-nav li:nth-child(4) a::before { background-image: url(../img/ui/nav-02_hotel.png); }
.uw-hk-header .uw-nav li:nth-child(2) a::before { background-image: url(../img/ui/ic-wrench.png); background-size: 16px 16px; }
.uw-hk-header .uw-nav li:nth-child(3) a::before { background-image: url(../img/ui/nav-07_shop.png); }
.uw-hk-header .uw-nav li:nth-child(4) a::before { background-image: url(../img/ui/nav-03_community.png); }
.uw-hk-header .uw-nav li:nth-child(5) a::before { background-image: url(../img/ui/nav-02_hotel.png); }
.uw-page .uw-nav a[aria-current="page"], .uw-page .uw-nav a[aria-current="page"]:hover, .uw-page .uw-nav a[aria-current="page"]:focus, .uw-page .uw-nav a[aria-current="page"]:active { color: #fff; background: none; box-shadow: none; border-radius: 10px; }
.uw-page .uw-nav a[aria-current="page"]::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 3px; height: 3px; background: var(--uw-gold); pointer-events: none; }
.uw-page .uw-subnav a[aria-current="page"], .uw-page .uw-subnav a[aria-current="page"]:hover, .uw-page .uw-subnav a[aria-current="page"]:focus, .uw-page .uw-subnav a[aria-current="page"]:active { position: relative; color: #fff; background: none; border-radius: 10px; }
.uw-page .uw-subnav a[aria-current="page"]::after { content: ""; position: absolute; left: 15px; right: 15px; bottom: 1px; height: 2px; background: var(--uw-gold); pointer-events: none; }

/* 4. tabs and switches: text, a pixel line for the chosen one; hotel switches in the colour of the hotel ------------------------------------ */
.uw-segments, .ur-switch, .ud-tabs, .hk-content .hotel-switch { display: inline-flex; flex-wrap: wrap; gap: 4px 22px; padding: 0; border: 0; border-radius: 0; background: none !important; }
.uw-segments a, .ur-switch span, .ur-switch button, .ud-tabs a, .hk-content .hotel-switch a, .hk-content .hotel-switch strong { position: relative; padding: 6px 2px 9px 2px; border-radius: 0; background: none !important; box-shadow: none; }
.uw-page .uw-segments a, .uw-page .ud-tabs a { color: var(--uw-muted); }
.uw-page .uw-segments a[aria-current="page"], .uw-page .uw-segments a[aria-current="page"]:hover, .uw-page .ud-tabs a[aria-current="page"], .uw-page .ud-tabs a[aria-current="page"]:hover,
.ur-switch input:checked + span, .ur-switch button[aria-pressed="true"], .hk-content .hotel-switch a.selected, .hk-content .hotel-switch a[aria-current], .hk-content .hotel-switch strong { color: #fff; background: none !important; }
.uw-segments a[aria-current="page"]::after, .ud-tabs a[aria-current="page"]::after, .ur-switch input:checked + span::after, .ur-switch button[aria-pressed="true"]::after,
.hk-content .hotel-switch a.selected::after, .hk-content .hotel-switch a[aria-current]::after, .hk-content .hotel-switch strong::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--uw-gold); pointer-events: none; }
.uw-page .ur-switch button[aria-pressed="true"], .uw-page .ur-switch button[aria-pressed="true"]:hover { color: #fff; background: none !important; }
.ur-stage .ur-switch button[aria-pressed="true"]::after { background: var(--uw-classic-green); }
.ur-stage[data-hotel="modern"] .ur-switch button[aria-pressed="true"]::after { background: var(--uw-modern-purple); }
.uw-look { gap: 28px; }
.uw-look-choice { display: flex; align-items: center; justify-content: center; gap: 10px; position: relative; padding: 8px 4px 11px 4px; background: none !important; border-radius: 0 !important; box-shadow: none !important; color: var(--uw-muted); }
.uw-look-choice[aria-pressed="true"], .uw-look-choice[aria-pressed="true"].uw-look-classic, .uw-look-choice[aria-pressed="true"].uw-look-modern { background: none !important; box-shadow: none !important; color: #fff; }
.uw-look-choice::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: transparent; }
.uw-look-choice[aria-pressed="true"].uw-look-classic::after { background: var(--uw-classic-green); }
.uw-look-choice[aria-pressed="true"].uw-look-modern::after { background: var(--uw-modern-purple); }

/* 5. flat labels: the hotel of a room is its door and a coloured name, no plaque ------------------------------------------------------------ */
.uw-badge-hotel, .uw-room-hotel { display: inline-flex; align-items: center; gap: 8px; min-width: 112px; padding: 0; background: none !important; border-radius: 0 !important; box-shadow: none; font: 700 13px/1.2 var(--uw-font); text-align: left; color: #7bd96d; }
.uw-badge-hotel-modern, .uw-room-modern .uw-room-hotel { color: #cfa2f5; }
.uw-room-list .uw-badge-hotel { min-width: 112px; text-align: left; }
@media (max-width: 560px) { .uw-badge-hotel, .uw-room-list .uw-badge-hotel { min-width: 0; gap: 0; font-size: 0; } }

/* 6. ticks, radios and switches: the bitmaps of the Shockwave client, 2 pixels ------------------------------------------------------------- */
.uw-check input, .ur-check input, .up-friend input[type=checkbox], .uw-check-block input[type=checkbox] { appearance: none; -webkit-appearance: none; flex: none; width: 24px; height: 24px; margin: 0;
	border: 0; border-radius: 0; background: url(../img/ui/chk-off.png) center / 24px 24px no-repeat; image-rendering: pixelated; cursor: pointer; }
.uw-check input:checked, .ur-check input:checked, .up-friend input[type=checkbox]:checked, .uw-check-block input[type=checkbox]:checked { background-image: url(../img/ui/chk-on.png); }
.up-option .uw-choice-check { width: 24px; height: 24px; border: 0; border-radius: 0; background: url(../img/ui/rad-off.png) center / 24px 24px no-repeat; image-rendering: pixelated; }
.up-option:has(input:checked) .uw-choice-check { background: url(../img/ui/rad-on.png) center / 24px 24px no-repeat; }
.up-option:has(input:checked) .uw-choice-check::after { display: none; }
.up-switch-track { width: 24px; height: 24px; border-radius: 0; background: url(../img/ui/chk-off.png) center / 24px 24px no-repeat; image-rendering: pixelated; }
.up-switch-track::after { display: none; }
.up-switch input:checked + .up-switch-track { background: url(../img/ui/chk-on.png) center / 24px 24px no-repeat; }

/* 7. input fields: a recessed field with the same pixel outline (blue while typing, green/red for the checked state) -------------------- */
.uw-input:not(select) { --hb: 1px; border: 3px solid transparent; border-radius: 0; background: none; padding: 11px 14px; border-image: url(../img/ui/field.png) 3 fill / 3px stretch; image-rendering: pixelated; }
.uw-input:not(select):focus { border-color: transparent; border-image-source: url(../img/ui/field-focus.png); box-shadow: none; }
.ur-field-ok .uw-input:not(select) { border-color: transparent; border-image-source: url(../img/ui/field-ok.png); }
.ur-field-error .uw-input:not(select) { border-color: transparent; border-image-source: url(../img/ui/field-error.png); }
.uw-motto .uw-input:not(select), .uw-tag-search .uw-input:not(select) { padding: 5px 8px; }

/* 8. strength bars: a pixel track with a two-tone fill */
.ur-strength-bar, .up-strength-bar { height: 16px; border: 2px solid #000; border-radius: 0; background: #0c1220; box-sizing: border-box; overflow: hidden;
	clip-path: polygon(2px 0, calc(100% - 2px) 0, calc(100% - 2px) 2px, 100% 2px, 100% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 100%, 2px 100%, 2px calc(100% - 2px), 0 calc(100% - 2px), 0 2px, 2px 2px); }
.ur-strength[data-level] .ur-strength-bar span, .up-strength[data-level] .up-strength-bar span { border-radius: 0; background-image: linear-gradient(to bottom, rgba(255, 255, 255, .3) 0 50%, rgba(0, 0, 0, .22) 50% 100%); }

/* 9. registration: turning the figure (arrows of the Shockwave figure editor), steps, the password toggle -------------------------------------- */
.ur-turn button[data-turn] { width: 44px; height: 44px; border-radius: 0; background-color: transparent; background-repeat: no-repeat; background-position: center; background-size: 25px 29px;
	background-image: url(../img/ui/turn-left.png); image-rendering: pixelated; }
.ur-turn button[data-turn="1"] { background-image: url(../img/ui/turn-right.png); }
.ur-turn button[data-turn]:hover, .ur-turn button[data-turn]:focus, .ur-turn button[data-turn]:active { background-color: transparent; background-repeat: no-repeat; background-position: center; background-size: 25px 29px; }
.ur-turn button[data-turn="-1"]:hover, .ur-turn button[data-turn="-1"]:focus, .ur-turn button[data-turn="-1"]:active { background-image: url(../img/ui/turn-left.png); }
.ur-turn button[data-turn="1"]:hover, .ur-turn button[data-turn="1"]:focus, .ur-turn button[data-turn="1"]:active { background-image: url(../img/ui/turn-right.png); }
.ur-turn button[data-turn]:hover { filter: brightness(1.12); }
.ur-turn button[data-turn]:active { filter: none; transform: translateY(1px); }
.ur-turn button[data-turn]:focus-visible { outline: 2px solid var(--uw-gold); outline-offset: -2px; }
.ur-turn button svg { display: none; }
.ur-progress-done .ur-progress-number::after { width: 16px; height: 16px; border: 0; transform: none; background: url(../img/ui/check-white.png) center / 16px 16px no-repeat; image-rendering: pixelated; }
.ur-password button { background: none !important; border-radius: 0 !important; padding: 6px 10px; color: var(--uw-link); font-weight: 500; }
.ur-password button:hover, .ur-password button:focus, .ur-password button:active { background: none !important; color: #b3ddff; }

/* 10. lists: Habbo's room symbol for the load, pixel dashes as dividers ------------------------------------------------------------------- */
.uw-room-icon { flex: none; width: 32px; height: 32px; image-rendering: pixelated; }
@media (max-width: 560px) { .uw-room-icon { display: none; } }
.uw-panel-title { border-bottom: 2px solid transparent; border-image: url(../img/ui/dash.png) 0 0 2 0 / 0 0 2px 0 repeat; }
.uw-list > li + li, .uw-news li + li, .uw-room + .uw-room, .uw-comments .news-comment, .ux-faq, .ur-login, .sp-login-new, .uw-login-new, .up-group + .up-group { border-top: 2px solid transparent; border-image: url(../img/ui/dash.png) 2 0 0 0 / 2px 0 0 0 repeat; }

/* 11. section titles with a small real symbol ----------------------------------------------------------------------------------------------- */
.uw-panel-title .uw-h2[id] { display: flex; align-items: center; gap: 10px; }
.uw-panel-title .uw-h2[id]::before { content: none; flex: none; width: 21px; height: 21px; background: no-repeat center / contain; image-rendering: pixelated; }
#uw-launcher-title::before { content: ""; background-image: url(../img/ui/nav-02_hotel.png); }
#uw-news-title::before, #uc-news-title::before { content: ""; background-image: url(../img/ui/ic-news.png); background-size: 16px 16px; }
#uw-rooms-title::before, #uc-rooms-title::before { content: ""; background-image: url(../img/ui/nav-01_home.png); }
#uw-tags-title::before, #uc-tags-title::before { content: ""; background-image: url(../img/ui/ic-star.png); background-size: 15px 15px; }
#uw-friends-title::before, #uc-people-title::before { content: ""; background-image: url(../img/ui/ic-group.png); background-size: 14px 14px; }
#uw-look-title::before { content: ""; background-image: url(../img/ui/nav-07_shop.png); }
#uc-forum-title::before { content: ""; background-image: url(../img/ui/nav-03_community.png); }

/* 12. empty states: a small real picture and the text ----------------------------------------------------------------------------------------- */
.uw-empty { display: flex; align-items: center; gap: 16px; min-height: 44px; }
.uw-empty::before { content: ""; flex: none; width: 64px; height: 64px; background: url(../img/ui/room-1.png) center / 64px 64px no-repeat; image-rendering: pixelated; opacity: .9; }
.uw-panel:has(#uw-friends-title) .uw-empty::before, .uw-panel:has(#uc-groups-title) .uw-empty::before { width: 56px; height: 56px; background-image: url(../img/ui/ic-group.png); background-size: 56px 56px; }
.uw-panel:has(#uw-news-title) .uw-empty::before, .uw-panel:has(#uc-news-title) .uw-empty::before { width: 48px; height: 48px; background-image: url(../img/ui/ic-news.png); background-size: 48px 48px; }
.uw-panel:has(#uw-tags-title) .uw-empty::before, .uw-panel:has(#uc-tags-title) .uw-empty::before { width: 45px; height: 45px; background-image: url(../img/ui/ic-star.png); background-size: 45px 45px; }
.uw-panel:has(#uc-forum-title) .uw-empty::before { width: 42px; height: 42px; background-image: url(../img/ui/nav-03_community.png); background-size: 42px 42px; }

/* 13. notes: the real info, tick and error symbols in front of the text --------------------------------------------------------------------- */
.uw-note { position: relative; padding-left: 64px; }
.uw-note::before { content: ""; position: absolute; left: 18px; top: 50%; width: 30px; height: 32px; margin-top: -16px; background: url(../img/ui/ic-info.png) center / 30px 32px no-repeat; image-rendering: pixelated; }
.uw-note-ok::before { width: 24px; height: 20px; margin-top: -10px; background-image: url(../img/ui/check-green.png); background-size: 24px 20px; }
.uw-note-error::before { width: 24px; height: 24px; margin-top: -12px; background-image: url(../img/ui/error.png); background-size: 24px 24px; }

/* 14. phones: menu button, close button, the arrow of an area, the dots of the start page ----------------------------------------------------- */
@media (max-width: 960px) {
	.uw-js .uw-menu-button { width: 45px; height: 45px; border-radius: 0; background: url(../img/ui/menu-lift.png) center / 45px 45px no-repeat; image-rendering: pixelated; }
	.uw-js .uw-menu-icon { display: none; }
}
.uw-drawer-close { width: 39px; height: 39px; border-radius: 0; background: url(../img/ui/close-up.png) center / 39px 39px no-repeat; image-rendering: pixelated; }
.uw-drawer-close svg { display: none; }
.uw-drawer-nav summary::after { width: 12px; height: 22px; margin-right: 4px; border: 0; background: url(../img/ui/arrow-right.png) center / 12px 22px no-repeat; image-rendering: pixelated; transform: none; }
.uw-drawer-nav details[open] summary::after { transform: rotate(90deg); }
.uw-drawer-account .uw-button-quiet { justify-content: flex-start; font-size: 17px; }
.sp-dots button { width: 12px; height: 12px; border-radius: 0; }
.sp-dots button[aria-current="true"] { width: 30px; border-radius: 0; }

/* 15. speech bubbles of the start and registration pages: the real Shockwave chat bubble (hh_interface chat_bubble_*), 2 pixels ------------------ */
.sp-bubble, .ur-bubble { background: none; border: solid transparent; border-width: 12px 14px; border-radius: 0; padding: 0; box-shadow: none; color: #182032;
	border-image: url(../img/ui/bubble.png) 6 7 6 7 fill / 12px 14px 12px 14px stretch; image-rendering: pixelated; }
.sp-bubble::after, .ur-bubble::after { width: 14px; height: 8px; margin: 10px 0 0 -7px; border: 0; background: url(../img/ui/bubble-tip.png) center / 14px 8px no-repeat; transform: none; image-rendering: pixelated; }

/* 16. housekeeping: fields, buttons and ticks (inputs cannot carry a pseudo element, so the picture is their own border-image) ----------------- */
.hk-content input[type=text], .hk-content input[type=password], .hk-content input[type=number], .hk-content input[type=email], .hk-content input:not([type]), .hk-content textarea,
.hk-panel input[type=text], .hk-panel input[type=password], .hk-panel input:not([type]), .hk-panel textarea { border: 3px solid transparent; border-radius: 0; background: none; padding: 9px 12px;
	border-image: url(../img/ui/field.png) 3 fill / 3px stretch; image-rendering: pixelated; }
.hk-content input:focus, .hk-content textarea:focus, .hk-panel input:focus { border-color: transparent; border-image-source: url(../img/ui/field-focus.png); box-shadow: none; }
body.uw-hk input[type=submit], body.uw-hk input[type=button], body.uw-hk button:not([class*="jodit"]):not(.uw-button) { border: solid transparent; border-width: 3px 3px 12px 3px; border-radius: 0;
	padding: 9px 17px 0 17px; background: none; box-shadow: none; border-image: url(../img/ui/btn-gold.png) 3 3 12 3 fill / 3px 3px 12px 3px stretch; image-rendering: pixelated; }
body.uw-hk input[type=submit]:hover, body.uw-hk input[type=button]:hover, body.uw-hk button:not([class*="jodit"]):not(.uw-button):hover { filter: none; border-image-source: url(../img/ui/btn-gold-h.png); }
.hk-content input[type=checkbox], .hk-content input[type=radio] { appearance: none; -webkit-appearance: none; width: 24px; height: 24px; margin: 0 0 8px 0; border: 0; border-radius: 0;
	background: url(../img/ui/chk-off.png) center / 24px 24px no-repeat; image-rendering: pixelated; cursor: pointer; }
.hk-content input[type=checkbox]:checked { background-image: url(../img/ui/chk-on.png); }
.hk-content input[type=radio] { background-image: url(../img/ui/rad-off.png); }
.hk-content input[type=radio]:checked { background-image: url(../img/ui/rad-on.png); }

/* the housekeeping login: the focus of the fields and of the submit input is a pixel outline (the inputs cannot carry a pseudo element) */
.hk-field input:focus-visible, .hk-panel input:focus-visible, .hk-content input:focus-visible { outline: 3px solid var(--uw-gold); outline-offset: 2px; }

/* 17. the head of every page: one grid for all pages. A real Habbo symbol on the left, the title, one calm line, the main action on the right ------ */
.uw-page-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 0; align-items: center; margin: 0 0 26px 0; }
.uw-page-head > .uw-h1, .upg-main > .uw-h1 { margin: 0; font-size: 44px; line-height: 1.12; }
.uw-page-head > .uw-h1 { grid-column: 2; }
.uw-page-head > .uw-lead { grid-column: 2; margin: 6px 0 0 0; font-size: 18px; line-height: 1.5; }
.uw-page-head > .uw-back { grid-column: 1 / -1; justify-self: start; }
:is(.uw-id-profile, .uw-id-club, .uw-id-credits, .uw-id-history, .uw-id-community, .uw-id-tags, .uw-id-groups, .uw-id-mygroups, .uw-id-news, .uw-id-help, .uw-id-tryout, .uw-id-papers, .uw-id-forgot, .uw-id-error) .uw-page-head:not(.upg-head)::before {
	content: ""; grid-column: 1; grid-row: 1 / span 2; width: 72px; height: 72px; margin-right: 22px; border-radius: 16px; background-color: var(--uw-night); background-repeat: no-repeat; background-position: center; box-shadow: var(--uw-shadow); image-rendering: pixelated; }
.uw-id-profile .uw-page-head::before { background-image: url(../img/ui/ic-wrench.png); background-size: 48px 48px; }
.uw-id-club .uw-page-head::before, .uw-id-tryout .uw-page-head::before { background-image: url(../img/ui/nav-09_hc.png); background-size: 50px 38px; }
.uw-id-credits .uw-page-head::before { background-image: url(../img/ui/nav-10_coins.png); background-size: 50px 38px; }
.uw-id-history .uw-page-head::before { background-image: url(../img/ui/ic-book.png); background-size: 48px 51px; }
.uw-id-community .uw-page-head::before { background-image: url(../img/ui/nav-03_community.png); background-size: 42px 42px; }
.uw-id-tags .uw-page-head::before { background-image: url(../img/ui/ic-star.png); background-size: 45px 45px; }
.uw-id-groups .uw-page-head::before, .uw-id-mygroups .uw-page-head::before { background-image: url(../img/ui/ic-group.png); background-size: 42px 42px; }
.uw-id-news .uw-page-head::before { background-image: url(../img/ui/ic-news.png); background-size: 48px 48px; }
.uw-id-help .uw-page-head::before { background-image: url(../img/ui/nav-08_hep.png); background-size: 42px 42px; }
.uw-id-papers .uw-page-head::before { background-image: url(../img/ui/ic-book.png); background-size: 48px 51px; }
.uw-id-forgot .uw-page-head::before { background-image: url(../img/ui/ic-lock.png); background-size: 48px 48px; }
.uw-id-error .uw-page-head::before { background-image: url(../img/ui/error.png); background-size: 40px 36px; }

/* a person's or a group's page: the figure's head (or the badge) in a frame, the name, the motto in a real chat bubble, small lines for the facts */
.uw-page-head.upg-head { align-items: start; }
.upg-head::before { content: none !important; }
.upg-head > .upg-head-badge { grid-column: 1; grid-row: 1; width: 88px; height: 88px; margin-right: 24px; padding: 12px; object-fit: contain; }
.upg-head-groups > .upg-head-badge { padding: 5px; }
.upg-head > .upg-head-face { padding: 0; object-fit: none; object-position: -10px -14px; }
.upg-head > .upg-main { grid-column: 2; min-width: 0; }
.upg-head > .upg-actions { grid-column: 3; margin: 8px 0 0 24px; align-self: start; justify-content: flex-end; }
.upg-main > .uw-lead { margin: 6px 0 0 0; font-size: 18px; line-height: 1.5; }
.upg-main > .upg-motto { position: relative; display: inline-block; max-width: 100%; margin: 12px 0 0 22px; padding: 0; color: #182032; font: 500 15px/1.45 var(--uw-font); border: solid transparent; border-width: 12px 14px;
	border-image: url(../img/ui/bubble.png) 6 7 6 7 fill / 12px 14px 12px 14px stretch; image-rendering: pixelated; overflow-wrap: anywhere; }
.upg-motto::before { content: ""; position: absolute; left: -22px; top: 50%; width: 8px; height: 14px; margin-top: -7px; background: url(../img/ui/bubble-tip-left.png) center / 8px 14px no-repeat; image-rendering: pixelated; }
.upg-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 12px 0 0 0; padding: 0; font-size: 14px; line-height: 24px; color: #1d3550; }
body.uw-legacy #content-container .upg-head .upg-meta { color: #1d3550; }
.upg-meta-item { display: inline-flex; align-items: center; gap: 8px; }
.upg-meta-item:not(:last-child)::after { content: "\00b7"; margin: 0 14px; font-weight: 700; opacity: .55; }
.upg-meta-item::before { content: ""; flex: none; width: 16px; height: 16px; background: no-repeat center / contain; image-rendering: pixelated; }
@media (max-width: 760px) {
	.uw-page-head, .uw-page-head.upg-head { grid-template-columns: minmax(0, 1fr); }
	.uw-page-head > .uw-h1, .uw-page-head > .uw-lead, .uw-page-head.upg-head > .upg-main, .upg-main > .uw-h1 { grid-column: 1; }
	.uw-page-head > .uw-h1, .upg-main > .uw-h1 { font-size: 32px; }
	:is(.uw-id-profile, .uw-id-club, .uw-id-credits, .uw-id-history, .uw-id-community, .uw-id-tags, .uw-id-groups, .uw-id-mygroups, .uw-id-news, .uw-id-help, .uw-id-tryout, .uw-id-papers, .uw-id-forgot, .uw-id-error) .uw-page-head:not(.upg-head)::before { grid-column: 1; grid-row: auto; margin: 0 0 12px 0; }
	.uw-page-head.upg-head > .upg-head-badge { grid-column: 1; grid-row: auto; margin: 0 0 12px 0; }
	.uw-page-head.upg-head > .upg-actions { grid-column: 1; margin: 14px 0 0 0; justify-content: flex-start; }
	.upg-main > .upg-motto { margin-left: 0; margin-top: 18px; }
	.upg-meta { flex-direction: column; align-items: flex-start; gap: 6px 0; }
	.upg-meta-item:not(:last-child)::after { content: none; }
	.upg-motto::before { left: 16px; top: -12px; width: 14px; height: 8px; margin: 0; background-image: url(../img/ui/bubble-tip-up.png); background-size: 14px 8px; }
}

/* 18. one language for every side menu: Einstellungen, Hilfe-Themen, the phone menu and the lists of links. A row = the symbol in a slot (where the page has one), the text and
   a small real triangle of the old Habbo pages; the open page is a pixel plate with the orange triangle, the others light up when you point at them. Pixel dashes between the rows.
   No card with a gold bar any more, and no shape of a button: a menu is not an action. -------------------------------------------------------------------------------- */
:is(.up-areas, .ux-topics) { gap: 0; }
:is(.up-areas, .ux-topics) > li { padding: 3px 0; }
:is(.up-areas, .ux-topics) > li + li { border-top: 2px solid transparent; border-image: url(../img/ui/dash.png) 2 0 0 0 / 2px 0 0 0 repeat; }
.uw-page :is(.up-areas, .ux-topics) a { position: relative; display: grid; align-items: center; column-gap: 14px; min-height: 48px; padding: 4px 6px 4px 8px; box-sizing: border-box; border: 4px solid transparent; border-radius: 0;
	background: none; box-shadow: none; color: var(--uw-text); text-decoration: none; image-rendering: pixelated; }
.uw-page :is(.up-areas, .ux-topics) a:hover:not([aria-current="page"]) { border-image: url(../img/ui/plate-h.png) 2 fill / 4px stretch; background: none; }
.uw-page :is(.up-areas, .ux-topics) a:active:not([aria-current="page"]), .uw-page :is(.up-areas, .ux-topics) a[aria-current="page"] { border-image: url(../img/ui/plate-on.png) 2 fill / 4px stretch; background: none; box-shadow: none; }
.uw-page :is(.up-areas, .ux-topics) a:focus-visible { outline: 2px solid var(--uw-gold); outline-offset: -2px; }
.uw-page :is(.up-areas, .ux-topics) a::after { content: ""; width: 18px; height: 18px; background: url(../img/ui/bullet-blue.png) center / 18px 18px no-repeat; image-rendering: pixelated; }
.uw-page :is(.up-areas, .ux-topics) a:hover::after { transform: translateX(2px); }
.uw-page :is(.up-areas, .ux-topics) a[aria-current="page"]::after, .uw-page :is(.up-areas, .ux-topics) a:active::after { background-image: url(../img/ui/bullet-orange.png); }
.ux-topics a { grid-template-columns: minmax(0, 1fr) 18px; font-weight: 700; }
.ux-topics a::after { grid-column: 2; }
.up-areas a { grid-template-columns: 48px minmax(0, 1fr) 18px; grid-template-rows: auto auto; row-gap: 0; padding-top: 4px; padding-bottom: 4px; }
.up-areas a::before { content: ""; grid-column: 1; grid-row: 1 / span 2; width: 48px; height: 48px; background: var(--mn) center / auto no-repeat, url(../img/ui/slot.png) center / 48px 48px no-repeat; image-rendering: pixelated; }
.up-areas a[aria-current="page"]::before, .up-areas a:active::before { background-image: var(--mn), url(../img/ui/slot-on.png); }
.up-areas a::after { grid-column: 3; grid-row: 1 / span 2; }
.up-areas strong { grid-column: 2; grid-row: 1; align-self: end; font: 700 17px/1.25 var(--uw-font-display); }
.up-areas span { grid-column: 2; grid-row: 2; align-self: start; font-size: 14px; line-height: 1.3; color: var(--uw-muted); }
.uw-page .up-areas a[aria-current="page"] span { color: #cdd8ee; }
.up-areas a[href$="tab=1"] { --mn: url(../img/ui/mn-look.png); }
.up-areas a[href$="tab=2"] { --mn: url(../img/ui/mn-profile.png); }
.up-areas a[href$="tab=3"] { --mn: url(../img/ui/mn-mail.png); }
.up-areas a[href$="tab=4"] { --mn: url(../img/ui/mn-password.png); }
.up-areas a[href$="tab=5"] { --mn: url(../img/ui/mn-friends.png); }
.up-areas a[href$="tab=6"] { --mn: url(../img/ui/mn-hand.png); }
/* on a narrow screen the areas of the settings are a row of tabs like all the other tabs: text and a pixel line */
@media (max-width: 900px) {
	.up-areas { flex-direction: row; gap: 4px 22px; padding-bottom: 0; }
	.up-areas > li, .up-areas > li + li { flex: none; padding: 0; border: 0; border-image: none; }
	.uw-page .up-areas a { display: flex; min-height: 44px; padding: 6px 2px 9px 2px; border: 0; border-image: none !important; background: none !important; box-shadow: none; color: var(--uw-muted); white-space: nowrap; }
	.uw-page .up-areas a:hover { color: var(--uw-text); }
	.up-areas a::before, .up-areas a::after { display: none; }
	.uw-page .up-areas a[aria-current="page"] { color: #fff; box-shadow: inset 0 -3px 0 var(--uw-gold); }
}

/* the menu of the phone: the same plate and triangle; the area rows open like a tree (the triangle turns down) */
.uw-drawer-nav > ul > li + li { border-top: 2px solid transparent; border-image: url(../img/ui/dash.png) 2 0 0 0 / 2px 0 0 0 repeat; }
.uw-page .uw-drawer-nav :is(a.uw-drawer-link, details a) { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 18px; align-items: center; column-gap: 12px; box-sizing: border-box;
	border: 4px solid transparent; border-radius: 0; background: none; box-shadow: none; image-rendering: pixelated; }
.uw-page .uw-drawer-nav a.uw-drawer-link { min-height: 54px; padding: 0 4px; }
.uw-page .uw-drawer-nav details a { min-height: 48px; padding: 6px 8px; }
.uw-page .uw-drawer-nav :is(a.uw-drawer-link, details a):hover:not([aria-current="page"]) { border-image: url(../img/ui/plate-h.png) 2 fill / 4px stretch; background: none; color: var(--uw-text); }
.uw-page .uw-drawer-nav :is(a.uw-drawer-link, details a):active:not([aria-current="page"]), .uw-page .uw-drawer-nav a[aria-current="page"] { border-image: url(../img/ui/plate-on.png) 2 fill / 4px stretch; background: none; box-shadow: none; color: #fff; }
.uw-page .uw-drawer-nav a:focus-visible, .uw-drawer-nav summary:focus-visible { outline: 2px solid var(--uw-gold); outline-offset: -2px; }
.uw-drawer-nav :is(a.uw-drawer-link, details a)::after { content: ""; width: 18px; height: 18px; background: url(../img/ui/bullet-blue.png) center / 18px 18px no-repeat; image-rendering: pixelated; }
.uw-drawer-nav :is(a.uw-drawer-link, details a):hover::after { transform: translateX(2px); }
.uw-drawer-nav a[aria-current="page"]::after, .uw-drawer-nav :is(a.uw-drawer-link, details a):active::after { background-image: url(../img/ui/bullet-orange.png); }
.uw-drawer-nav summary::after { width: 18px; height: 18px; margin-right: 4px; background: url(../img/ui/bullet-blue.png) center / 18px 18px no-repeat; }

/* lists of links (news, categories, community, tags): the little triangle in front of the title, orange for the page you are on */
.uw-item-title::before { content: ""; display: inline-block; width: 18px; height: 18px; margin: 0 4px 0 -4px; vertical-align: -4px; background: url(../img/ui/bullet-blue.png) center / 18px 18px no-repeat; image-rendering: pixelated; }
.uw-item-title[aria-current="page"]::before { background-image: url(../img/ui/bullet-orange.png); }

/* the tabs of a group or personal page and of its dialogs: text and a pixel line like all other tabs, no pill */
body.uw-legacy #mypage-wrapper ul.box-tabs, body.uw-legacy .topdialog .topdialog-tabs ul.box-tabs { gap: 4px 22px; padding: 0; border-radius: 0; background: none; }
body.uw-legacy #mypage-wrapper ul.box-tabs li a, body.uw-legacy .topdialog .topdialog-tabs ul.box-tabs li a { position: relative; padding: 6px 2px 9px 2px; border-radius: 0; background: none; box-shadow: none; }
body.uw-legacy #mypage-wrapper ul.box-tabs li.selected a, body.uw-legacy .topdialog .topdialog-tabs ul.box-tabs li.selected a { background: none; color: #fff; box-shadow: inset 0 -3px 0 var(--uw-gold); }
body.uw-legacy .topdialog .topdialog-tabs ul.box-tabs li a:hover { color: var(--uw-text); }
body.uw-legacy #mypage-wrapper ul.box-tabs li a:focus-visible, body.uw-legacy .topdialog .topdialog-tabs ul.box-tabs li a:focus-visible { outline: 2px solid var(--uw-gold); outline-offset: 2px; }

/* the cards that carried a gold bar get a real symbol instead: the pinned thread a star, the key of the start page, the staff comment already has its label */
.ud-thread-sticky { box-shadow: none; padding-left: 0; }
.ud-thread-sticky .ud-thread-title::before { content: ""; display: inline-block; width: 15px; height: 15px; margin: 0 8px 0 0; vertical-align: -1px; background: url(../img/ui/ic-star.png) center / 15px 15px no-repeat; image-rendering: pixelated; }
.uw-comments .news-comment.staff { box-shadow: none; padding-left: 0; }
.sp-cta { position: relative; border-left: 0; padding-left: 132px; }
.sp-cta::before { content: ""; position: absolute; left: 40px; top: 50%; width: 60px; height: 60px; margin-top: -30px; background: url(../img/ui/mn-key.png) center / 60px 60px no-repeat; image-rendering: pixelated; }
@media (max-width: 760px) { .sp-cta { padding: 112px 24px 28px 24px; } .sp-cta::before { left: 24px; top: 32px; margin-top: 0; } }

@media (prefers-reduced-motion: reduce) { .uw-button { transition: none; } }