/* ###########################################################################################################################################################################  */
/* ###########################################################################################################################################################################  */
/* Glyh Entertainment Public Website                                                                                                                                            */
/*  ΓÇó Page:            	        Icons (resolutions.css)                                                                                                                         */
/*  ΓÇó Description:              Standardnizes icons size throughout the site at all resolutions.                                                                                */
/*  ΓÇó Location:               	/css/icons.css  v                                                                                                                               */
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/*  ΓÇó Version:                  v0.0.01 ╬▒                                                                                                                                       */
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/*  ΓÇó Project Start Date:       2026-04-07                                                                                                                                      */
/*  ΓÇó ╬▒ Release Date:           2026-04-XX                                                                                                                                      */
/*  ΓÇó ╬▓ Release Date:           2026-04-XX                                                                                                                                      */
/*  ΓÇó Last updated:             2026-06-05 @ 1435 EDT                                                                                                                          	*/
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/*  ΓÇó Author:                   by Conner Rhoads                                                                                                                                */
/*  ΓÇó Official Site:            www.glyphentertainment.com                                                                                                                      */
/* ###########################################################################################################################################################################  */
/* == AI ASSISTANT MANDATED LOGIC ==                                                                                                                                            */
/* ΓÇó I.) FORMATING:                                                                                                                                                             */
/*     ΓÇó 01.) NEVER change or deviate from the commeting and seperation format.                                                                                              	*/
/*     ΓÇó 02.) ALWAYS Use "Indented Allman" Code Formating Style.                                                                                                                */
/*     ΓÇó 03.) Tabs are always FOUR characters long.                                                                                                                             */
/*     ΓÇó 04.) The comment ending segment on each comment block should always end at 178 spaces from the left.                                                                   */
/*     ΓÇó 05.) All comment lines should be exactly 178 spaces from the left.                                                                                                     */
/*     ΓÇó 06.) NEVER remove code that appears to be placeholders.                                                                                                                */
/*     ΓÇó 07.) Primary sections always use "#" as the basis for the line and always start with [START] and end with [END]                                                        */
/*         ΓÇó A.) EXAMPLES:                                                                                                                                                      */
/*             ΓÇó i.)   Header                                                                                                                                                   */
/*             ΓÇó ii.)  Body                                                                                                                                                     */
/*             ΓÇó iii.) Footer                                                                                                                                                   */
/*             ΓÇó iv.)  Stylesheets                                                                                                                                              */
/*             ΓÇó v.)   Scripts                                                                                                                                                  */
/*     ΓÇó 08.) Major sections always use "=" as the basis for lines. These sections are always with in the Primary sections.                                                     */
/*     ΓÇó 09.) Minor sections always use "-" as the basis for lines. These are usually a small module within a Major Section.                                                    */
/* ΓÇó II.) COMMENTING:                                                                                                                                                           */
/*     ΓÇó 01.) NEVER remove comments.                                                                                                                                         	*/
/*     ΓÇó 02.) ALWAYS Update "Last Updated" with the current data and time stamp of the most recent edits.                                                                    	*/
/*     ΓÇó 03.) ALWAYS Update anything inside "<",">" brackets.                                                                                                                   */
/*     ΓÇó 04.) Comments spanning over 175 spaces from the left should overflow to the next line and be spaced out to match the start of the comment fromt he previous line.      */
/*     ΓÇó 05.) DO NOT update the Change Log. That is for the end user to update after they are done with the current edits and are satisifed with them.                          */
/*     ΓÇó 06.) DO NOT update the Version. That is for the end user to update after they are done with the current edits and are satisifed with them.                             */
/* ΓÇó III.) EDITS:                                                                                                                                                               */
/*     ΓÇó 01.) If adding new variables or arrays, ALWAYS confirm the names and naming convention before building/creating them.                                                  */
/*     ΓÇó 02.) Always reproduce the full file OR the section for updates.                                                                                                        */
/*         ΓÇó A.) Headers must ALWAYS be full length of the header comment block.                                                                                                */
/*         ΓÇó B.) If producinga  seciton for updates, ALWAYS go from the START of the header being updated to the line before the next header.                                   */
/*         ΓÇó C.) Default to updating sections instead of the whole document unless more than 30% of the document needs to be changed.                                           */
/*     ΓÇó 03.) A successful build must always be either the same amount of lines or additional lines of code. Less lines of code are to be immediately qualified as a failed     */
/*            build.                                                                                                                                                            */
/*         ΓÇó A.) If Lines or Sections are to be removed:                                                                                                                        */
/*             ΓÇó i.)   The end user needs to specifically ask for them to be removed.                                                                                           */
/*             ΓÇó ii.)  The AI agent must suggest the sections be elimiated AND the end user must confirm that those sections are being elimated                                 */
/* ΓÇó IV.) OTHER:                                                                                                                                                                */
/*     ΓÇó 01.) When the end user asks you to check this file, only give feedback on the problems with it, never rewrite it unless the end user asks to.                          */
/* ###########################################################################################################################################################################  */
/*  CHANGE LOG                                                                                                                                                                  */
/*  ΓÇó 2026-05-24 @ 0415 EDT     - Added Elemental transformations for each color on black. They do not work on white.                                                           */
/* ###########################################################################################################################################################################  */
/* ###########################################################################################################################################################################  */

/* ============================================================================================================================================================================ */
/* ICON TRANSFORMATIONS                                                                                                                                                         */
/* ============================================================================================================================================================================ */
/* ---
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Mobile Resolutions (Portrait Mode)
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* MOBILE LDPI      (0–240px)       → icon:
/* MOBILE MDPI      (241–320px)     → icon:
/* MOBILE HDPI      (321–480px)     → icon:
/* MOBILE XHDPI     (641–720px)     → icon:
/* MOBILE XXHDPI    (801–1080px)    → icon:
/* MOBILE XXXHDPI   (801–1080px)    → icon:
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Legacy Resolutions
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* LEGACY VGA       (481–640px)     → icon:
/* LEGACY SVGA      (800–800px)     → icon:
/* LEGACY XVGA      (1024–1024px)   → icon:
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Modern Resolutions
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* MODERN 720p      (1081–1280px)   → icon:
/* MODERN 1080p     (1281–1920px)   → icon:
/* MODERN 2k        (1921–2559px)   → icon:
/* MODERN 4k        (2562–3839px)   → icon:
/* MODERN 6k        (3841–6144px)   → icon:
/* MODERN 8k        (6145–7680px)   → icon:
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Ultrawide Resolutions
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* ULTRAWIDE WFHD   (2560–2560px)   → icon:
/* ULTRAWIDE FHD    (4608–4608px)   → icon:
/* ULTRAWIDE UWQHD  (3440–3440px)   → icon:
/* ULTRAWIDE WQHD+  (3840–3840px)   → icon:
/* ULTRAWIDE UW5K   (5120–5120px)   → icon:
/* ============================================================================================================================================================================ */
/* END TRANSFORMATIONS                                                                                                                                                          */
/* ============================================================================================================================================================================ */

/* ============================================================================================================================================================================ */
/*  MAIN STYLESHEET                                                                                                                                                             */
/* ============================================================================================================================================================================ */

.icons 
    {
    width: 18px;
    height: 18px;
    object-fit: contain;
    transition: filter 0.4s ease, transform 0.4s ease;
    display: inline-block;
    vertical-align: middle;
    }

.icon-crimson   /* Crimson #D32F2F */
{
    filter: invert(16%) sepia(89%) saturate(7484%) hue-rotate(346deg) brightness(88%) contrast(101%);
}
.icon-emerlad   /* Emerald #388E3C */
{
    filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(87deg) brightness(89%) contrast(96%);
}
.icon-amethyst  /* Amethyst #7B1FA2 */
{
    filter: invert(13%) sepia(94%) saturate(7474%) hue-rotate(271deg) brightness(90%) contrast(101%);
}
.icon-sapphire  /* Sapphire #1976D2 */
{
    filter: invert(32%) sepia(98%) saturate(7474%) hue-rotate(200deg) brightness(92%) contrast(101%);
}
.icon-gold      /* Gold #F57C00 */
{
    filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(14deg) brightness(101%) contrast(101%);
}
.icon-diamond   /* Diamond #B6B6B6 */
{
    filter: grayscale(100%) brightness(1.15) contrast(0.9);
}
.icon-obsidian  /* Obsidian #212121  */
{
    filter: brightness(0) saturate(100%) invert(7%) brightness(22%) contrast(120%);
}
.icon-topaz     /* Topaz #00796B */
{
    filter: invert(35%) sepia(82%) saturate(2476%) hue-rotate(152deg) brightness(92%) contrast(101%);
}
.icon-ruby      /* Ruby #C2185B */
{
    filter: invert(15%) sepia(85%) saturate(7484%) hue-rotate(330deg) brightness(85%) contrast(101%);
}

/* ============================================================================================================================================================================ */
/*  MOBILE RESOLUTIONS (Portrait Mode)                                                                                                                                          */
/* ============================================================================================================================================================================ */

/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* MOBILE LDPI         | 240x320   | 3:4   |               		                                                                                                                */
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media (min-width: 0px)    and (max-width: 240px)
{
    .icons
    {
    width: 18px;
    height: 18px;
    object-fit: contain;
    transition: filter 0.4s ease, transform 0.4s ease;
    }
}

/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* MOBILE MDPI         | 240x320   | 3:4   |               		                                                                                                                */
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media (min-width: 241px)  and (max-width: 320px)
{
    .icons
    {
    width: 18px;
    height: 18px;
    object-fit: contain;
    transition: filter 0.4s ease, transform 0.4s ease;
    }
}

/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* MOBILE HDPI         | 320x480   | 2:3   |                		                                                                                                            */
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media (min-width: 321px)  and (max-width: 480px)
{
    .icons
    {
    width: 18px;
    height: 18px;
    object-fit: contain;
    transition: filter 0.4s ease, transform 0.4s ease;
    }
}

/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* MOBILE XHDPI        | 480x800   | 3:5   |               		                                                                                                                */
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media (min-width: 321px)  and (max-width: 480px)
{
    .icons
    {
    width: 18px;
    height: 18px;
    object-fit: contain;
    transition: filter 0.4s ease, transform 0.4s ease;
    }
}

/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* MOBILE XXHDPI       | 720x1280  | 9:16  |                		                                                                                                            */
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media (min-width: 641px)  and (max-width: 720px)
{
    .icons
    {
    width: 18px;
    height: 18px;
    object-fit: contain;
    transition: filter 0.4s ease, transform 0.4s ease;
    }
}

/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* MOBILE XXXHDPI      | 1080x1920 | 9:16  |                		                                                                                                            */
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media (min-width: 801px)  and (max-width: 1023px), (min-width: 1025px) and (max-width: 1080px)
{
    .icons
    {
    width: 18px;
    height: 18px;
    object-fit: contain;
    transition: filter 0.4s ease, transform 0.4s ease;
    }
}

/* ============================================================================================================================================================================ */
/*  LEGACY RESOLUTIONS	                                                                                                                                                        */
/* ============================================================================================================================================================================ */

/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* LEGACY VGA          | 640x480   | 4:3   |                		                                                                                                            */
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media (min-width: 481px)  and (max-width: 640px)
{
    .icons
    {
    width: 18px;
    height: 18px;
    object-fit: contain;
    transition: filter 0.4s ease, transform 0.4s ease;
    }
}

/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* LEGACY SVGA         | 800x600   | 4:3   |                		                                                                                                            */
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media (min-width: 800px)  and (max-width: 800px)
{
    .icons
    {
    width: 18px;
    height: 18px;
    object-fit: contain;
    transition: filter 0.4s ease, transform 0.4s ease;
    }
}

/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* LEGACY XVGA         | 1024x768  | 4:3   |                		                                                                                                            */
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media (min-width: 1024px) and (max-width: 1024px)
{
    .icons
    {
    width: 18px;
    height: 18px;
    object-fit: contain;
    transition: filter 0.4s ease, transform 0.4s ease;
    }
}

/* ============================================================================================================================================================================ */
/* MODERN RESOLUTIONS                                                                                                                                                           */
/* ============================================================================================================================================================================ */

/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* MODERN 720p         | 1280x720  | 16:9  |                		                                                                                                            */
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media (min-width: 1081px)  and (max-width: 1280px)
{
    .icons
    {
    width: 18px;
    height: 18px;
    object-fit: contain;
    transition: filter 0.4s ease, transform 0.4s ease;
    }
}

/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* MODERN 1080p        | 1920x1080 | 16:9  |                		                                                                                                            */
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media (min-width: 1281px)  and (max-width: 1920px)
{
    .icons
    {
    width: 18px;
    height: 18px;
    object-fit: contain;
    transition: filter 0.4s ease, transform 0.4s ease;
    }
}

/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* MODERN 2k           | 2560x1280 | 16:9  |                		                                                                                                            */
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media (min-width: 1921px)  and (max-width: 2559px)
{
    .icons
    {
    width: 18px;
    height: 18px;
    object-fit: contain;
    transition: filter 0.4s ease, transform 0.4s ease;
    }
}

/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* MODERN 4k           | 3840x1400 | 16:9  |                		                                                                                                            */
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media (min-width: 2562px)  and (max-width: 3439px), (min-width: 3442px)  and (max-width: 3839px)
{
    .icons
    {
    width: 18px;
    height: 18px;
    object-fit: contain;
    transition: filter 0.4s ease, transform 0.4s ease;
    }
}

/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* MODERN 6k           | 6144x3456 | 16:9  |                		                                                                                                            */
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media (min-width: 3841px)  and (max-width: 5119px), (min-width: 5121px)  and (max-width: 6144px) 
{
    .icons
    {
    width: 18px;
    height: 18px;
    object-fit: contain;
    transition: filter 0.4s ease, transform 0.4s ease;
    }
}

/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* MODERN 8k           | 7680x4320 | 16:9  |                		                                                                                                            */
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media (min-width: 6145px)  and (max-width: 7680px)
{
    .icons
    {
    width: 18px;
    height: 18px;
    object-fit: contain;
    transition: filter 0.4s ease, transform 0.4s ease;
    }
}

/* ============================================================================================================================================================================ */
/*  ULTRAWIDE RESOLUTIONS                                                                                                                                                       */
/* ============================================================================================================================================================================ */

/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* ULTRAWIDE WFHD       | 2560x1080 | 21:9  |                		                                                                                                            */
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media (min-width: 2560px)  and (max-width: 2560px)
{
    .icons
    {
    width: 18px;
    height: 18px;
    object-fit: contain;
    transition: filter 0.4s ease, transform 0.4s ease;
    }
}

/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* ULTRAWIDE FHD        | 4608x1920 | 21:9  |                		                                                                                                            */
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media (min-width: 4608px)  and (max-width: 4608px) 
{
    .icons
    {
    width: 18px;
    height: 18px;
    object-fit: contain;
    transition: filter 0.4s ease, transform 0.4s ease;
    }
}

/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* ULTRAWIDE UWQHD      | 3440x1440 | 21:9  |                		                                                                                                            */
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media (min-width: 3440px)  and (max-width: 3440px)
{
    .icons
    {
    width: 18px;
    height: 18px;
    object-fit: contain;
    transition: filter 0.4s ease, transform 0.4s ease;
    }
}

/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* ULTRAWIDE WQHD+      | 3840x1600 | 21:9  |                		                                                                                                            */
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media (min-width: 3840px)  and (max-width: 3840px) 
{
    .icons
    {
    width: 18px;
    height: 18px;
    object-fit: contain;
    transition: filter 0.4s ease, transform 0.4s ease;
    }
}

/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* ULTRAWIDE UW5k       | 5120x2160 | 21:9  |                		                                                                                                            */
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media (min-width: 5120px)  and (max-width: 5120px)
{
    .icons
    {
    width: 18px;
    height: 18px;
    object-fit: contain;
    transition: filter 0.4s ease, transform 0.4s ease;
    }
}

/* ============================================================================================================================================================================ */
/* USERTOOLS / AUTH BAR / MENU ICONS (smaller for compact header/dropdown)                                                                                                      */
/* ============================================================================================================================================================================ */

.usertools-bar .icons,
.auth-bar .icons,
#user-menu .icons,
ul.menu-icons .icons,
img[src*="search.svg"],
img[src*="menu.svg"],
img[src*="recent.svg"],
img[src*="map.svg"],
img[src*="picture.svg"],
img[src*="user.svg"],
img[src*="settings.svg"],
img[src*="user-clip.svg"] 
{
    width: 16px !important;
    height: 16px !important;
    max-width: 16px;
    max-height: 16px;
}

/* The search icon specifically in forms/search context can be a tad larger if it's a button */
input[type="search"] + .icons,
.search-icon .icons 
{
    width: 18px !important;
    height: 18px !important;
}

/* News "return to top level" / back to news icon (scroll.svg in news nav bar) */
img[src*="/images/icons/scroll.svg"],
.news-nav .home-icon,
.nav-home-btn .home-icon 
{
    width: 18px !important;
    height: 18px !important;
}

/* ============================================================================================================================================================================ */
/* END STYLESHEET                                                                                                                                                               */
/* ============================================================================================================================================================================ */