/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* End of reset */




:root {  /* setting custom variables for easy uniform colors and fonts, and for easy changing through javascript */
    --white: #FFFFFF;
    --black: #000000;
    --gray1: #F8F8F8;
    --gray2: #E0E0E0;
    --gray3: #C0C0C0;
    --gray4: #999999;
    --gray5: #666666;
    --gray6: #333333;
    --gray7: #111111;

    --red1: #FF0000;
    --red2: #FF6347;
    --red3: #B22222;
    --red4: #8B0000;

    --orange1: #FFA500;
    --orange2: #FF8C00;
    --orange3: #FF7F50;

    --yellow1: #FFFF00;
    --yellow2: #FFD700;
    --yellow3: #F0E68C;

    --green1: #90EE90;
    --green2: #32CD32;
    --green3: #008000;
    --green4: #006400;
    --lime: #00FF00;
    --olive: #808000;

    --blue1: #ADD8E6;
    --blue2: #87CEEB;
    --blue3: #1E90FF;
    --blue4: #007BFF;
    --blue5: #00008B;
    --cyan: #00FFFF;
    --teal: #008080;

    --purple1: #800080;
    --purple2: #8A2BE2;
    --purple3: #9370DB;
    --violet: #EE82EE;

    --pink1: #FF69B4;
    --pink2: #FF1493;
    --pink3: #FFC0CB;

    --brown1: #D2B48C;
    --brown2: #A0522D;
    --brown3: #5C4033;
    --beige: #F5F5DC;

    --magenta: #FF00FF;
    --indigo: #4B0082;
    --navy: #000080;
    --maroon: #800000;
    --coral: #FF7F50;
    --salmon: #FA8072;
    --khaki: #F0E68C;
    --mint: #98FF98;
    --turquoise: #40E0D0;
    --gold: #FFD700;
    --silver: #C0C0C0;
    --bronze: #CD7F32;
    --rust: #B7410E;
    --cream: #FFFDD0;
    --apricot: #FBCEB1;
    --lavender: #E6E6FA;
    --plum: #DDA0DD;
    --orchid: #DA70D6;


    --primary-font: Arial, sans-serif;
    --secondary-font: Helvetica, sans-serif;

    --topBarHeight: 100px
}


body { 
    width: auto;
    margin:0;
    font-family: Arial, Helvetica, sans-serif;
    text-align:center;
}

.visually-hidden{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}

.hidden{
    display:none !important;
}

#topBar{
    display: flex;
    flex-direction: row;
    background-color: #1E90FF;
    border-bottom: 3px solid var(--black);
    height: var(--topBarHeight);
}

#siteTitle{
    font-size: 4rem;
    color:var(--black);
    padding-top:20px;
    padding-left: 1%;
    font-weight: 900;
    min-width: 350px;
    width: 500px;
}

#navigation{
    align-self:flex-end;
}

#navigation ul{
    display: flex;
    flex-direction: row;
    gap: 10vw;
}
#navigation ul li{
    text-align: center;
}


#navigation ul a{
    display: flex;
    font-size: 1.5rem;
    font-weight: bold;
    width: 200px;
    height: 30px;
    background-color: var(--white);
    border: 3px solid var(--black);
    text-decoration: none;
    color: var(--black);
    justify-content: center; 
    align-items: flex-end;  
    margin-bottom: -3px;
}
#navigation ul .active{
    border-bottom: 0px solid;
    
    transform: translateY(3px);
}

@media screen and (max-width: 1250px) and (min-width:1000px){
    #navigation ul {
        gap: calc((81vw - 800px) /  1.6);
    }
    #siteTitle{
        width:370px;
    }
}
@media screen and (max-width: 1000px) {
    
    #topBar{
        flex-direction: column;
    }
    #siteTitle{
        font-size: 3rem;
        padding-top: 5px;
        height: 70px;
        align-self: center;
    }
    #navigation ul {
        gap: calc((109.2vw - 680px) /  2.18);
    }
    #navigation ul a{
        width: 130px;
    }
    #navigation ul .active{
        transform: translateY(3px);
    }

}
@media screen and (max-width: 625px) {
    #navigation ul a{
        width: 90px;
        font-size: 1rem;
        height: 21px;
        margin-top: 3px;
        
        transform: translateY(.5px);
    }
    #navigation ul .active{
        transform: translateY(3.2px);
    }
    #navigation ul {
        gap: calc((130vw - 670px) /  2.28);
    }
}




/* #region Summary */

#summaryPage {
    background:
        linear-gradient(90deg, var(--blue3) 0 5%, transparent 5% 95%, var(--blue3) 95% 100%),
        var(--white);
}

/* Main content sections */
#summaryPage #summaryHeader,
#summaryPage #purpose,
#summaryPage #author {
    width: 60%;
    max-width: 900px;
    margin: 2rem auto;
    padding: 2rem 3rem;

    background: var(--gray1);
    border-right: 6px solid var(--gray3);
    box-shadow: 6px 6px 0 var(--gray3);
}

/* Section titles */
#summaryPage #summaryHeader h2,
#summaryPage #purpose h3,
#summaryPage #author h3 {
    font-size: 2.5rem;
    font-weight: 900;
    margin-bottom: 1rem;
    border-bottom: 3px solid var(--gray6);
    display: inline-block;
    padding-bottom: 0.25rem;
}

/* Paragraphs */
#summaryPage #summaryHeader p,
#summaryPage #purpose p,
#summaryPage #author p {
    font-size: 1.2rem;
    line-height: 1.45;
    max-width: 760px;
    margin: 0 auto;
}

/* Author image */
#summaryPage #author img {
    width: 220px;
    margin: 1.25rem auto;
    display: block;

    border: 4px solid var(--black);
    box-shadow: 5px 5px 0 var(--blue3);
}

/* Responsive cleanup */
@media screen and (max-width: 1000px) {
    #summaryPage #summaryHeader,
    #summaryPage #purpose,
    #summaryPage #author {
        width: 80%;
        padding: 1.5rem;
    }
}

@media screen and (max-width: 625px) {
    #summaryPage {
        background:var(--white);
    }
}

/* #endregion */




/* #region About Page */

#aboutPage {
    background:
        linear-gradient(90deg, var(--blue3) 0 5%, transparent 5% 95%, var(--blue3) 95% 100%),
        var(--white);

    font-family: Inter, Arial, sans-serif;
}
/* main description line */
#aboutPage .mainLine {
    display: block;
    font-weight: 700;
}

/* sub lines */
#aboutPage .subLine {
    display: block;
    margin-left: 0.5rem;
    font-size: 0.95em;
    opacity: 0.9;
}

/* ensure inline labels stay bold and visible */
#aboutPage .subLine strong {
    font-weight: 800;
    opacity: 1;
    color: black;
}

/* #region About Sidebar*/

#sidebarGuide {
    width: 80%;
    max-width: 1000px;
    margin: 3rem auto;
    padding: 2rem 3rem;

    text-align: center;

    background: var(--gray1);
    border-right: 6px solid var(--gray3);
    box-shadow: 6px 6px 0 var(--gray3);
}

#sidebarGuide h2 {
    font-size: 2.4rem;
    font-weight: 900;
    margin-bottom: 0.5rem;
}

#sidebarGuide > p {
    font-size: 1.25rem;
    margin-bottom: 2.5rem;
}

#sidebarGuideContent {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 3rem;
    align-items: start;
}

#sidebarGuideImage {
    width: 100%;
    height: auto;

    max-height: none;
    object-fit: contain;
    transform: translateY(-25px);
}

#sidebarGuideList {
    counter-reset: sidebarStep;
    list-style: none;
    text-align: left;
}

#sidebarGuideList li {
    counter-increment: sidebarStep;
    position: relative;

    padding-left: 3.25rem;
    margin-bottom: 1.35rem;

    font-size: 1.15rem;
    line-height: 1.4;
}

#sidebarGuideList li::before {
    content: counter(sidebarStep);

    position: absolute;
    left: 0;
    top: 0;

    width: 1.8rem;
    height: 1.8rem;

    display: flex;
    justify-content: center;
    align-items: center;

    border-radius: 50%;
    background: #0057d9;
    color: white;

    font-size: 1rem;
    font-weight: 900;
}

/* main title (e.g., "Switch Mode") */
#sidebarGuideList > li > strong {
    display: block;
    font-size: 1.25rem;
    font-weight: 900;
    margin-bottom: 0.25rem;
}


/* #endregion */

/*#region Icon Popup about*/

/* #region About Intro */

#aboutIntro {
    width: 80%;
    max-width: 1000px;
    margin: 3rem auto 2rem auto;
    padding: 2rem 3rem;

    text-align: center;
}

#aboutIntro h1 {
    font-size: 3rem;
    font-weight: 900;
    margin-bottom: 0.5rem;
}

#aboutIntro p {
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
}

#aboutSubNav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
}

#aboutSubNav a {
    padding: 0.6rem 1rem;

    color: var(--black);
    background: var(--white);
    text-decoration: none;
    font-weight: 900;

    border: 3px solid var(--black);
    box-shadow: 4px 4px 0 var(--black);
}

#aboutSubNav a:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 var(--black);
}

#aboutSubNav a:active {
    transform: translate(4px, 4px);
    box-shadow: none;
}

/* smooth jump scrolling */
html {
    scroll-behavior: smooth;
}

/* #endregion */


/*#region Shape and general Popup*/
#iconPopupGuide {
    width: 80%;  
    max-width: 1400px;  
    margin: 3rem auto;
    padding: 2rem 3rem;

    text-align: center;

    background: var(--gray1);
    border-right: 6px solid var(--gray3);
    box-shadow: 6px 6px 0 var(--gray3);
}

#iconPopupGuide h2 {
    font-size: 2.4rem;
    font-weight: 900;
    margin-bottom: 0.5rem;
}

#iconPopupGuide > p {
    font-size: 1.25rem;
    margin-bottom: 2.5rem;
}

#iconPopupGuideContent {
    display: grid;
    grid-template-columns: 1.3fr 1fr;  /* 🔥 more space to image */
    gap: 3rem;
    align-items: center;
}

#iconPopupGuideShape {
    width: 100%;
    height: auto;
}

#iconPopupGuideList {
    counter-reset: popupStep;
    list-style: none;
    text-align: left;
}

#iconPopupGuideList li {
    counter-increment: popupStep;
    position: relative;

    padding-left: 3.25rem;
    margin-bottom: 1.35rem;

    font-size: 1.15rem;
    line-height: 1.4;
}

#iconPopupGuideList li::before {
    content: counter(popupStep);

    position: absolute;
    left: 0;
    top: 0;

    width: 1.8rem;
    height: 1.8rem;

    display: flex;
    justify-content: center;
    align-items: center;

    border-radius: 50%;
    background: #0057d9;
    color: white;

    font-size: 1rem;
    font-weight: 900;
}

#iconPopupGuideList strong {
    display: block;
    font-size: 1.25rem;
    font-weight: 900;
    margin-bottom: 0.25rem;
}

#iconPopupGuideList span {
    display: block;
}
/*#endregion*/

/* #region Image Popup */

#iconPopupImageContent {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 3rem;
    align-items: center;

    margin-top: 3rem;
    padding-top: 0.5rem;
}

#iconPopupGuideImageUpload {
    width: 100%;
    height: auto;
}

#iconPopupGuideImageList {
    counter-reset: imagePopupStep 8;
    list-style: none;
    text-align: left;
}

#iconPopupGuideImageList li {
    counter-increment: imagePopupStep;
    position: relative;

    padding-left: 3.25rem;
    margin-bottom: 1.35rem;

    font-size: 1.15rem;
    line-height: 1.4;
}

#iconPopupGuideImageList li::before {
    content: counter(imagePopupStep);

    position: absolute;
    left: 0;
    top: 0;

    width: 1.8rem;
    height: 1.8rem;

    display: flex;
    justify-content: center;
    align-items: center;

    border-radius: 50%;
    background: #0057d9;
    color: white;

    font-size: 1rem;
    font-weight: 900;
}

#iconPopupGuideImageList strong {
    display: block;
    font-size: 1.25rem;
    font-weight: 900;
    margin-bottom: 0.25rem;
}

#iconPopupGuideImageList span {
    display: block;
}

/* #endregion */

/* #region Other Buttons Guide */

#otherButtonsGuide {
    width: 85%;
    max-width: 1200px;
    margin: 3rem auto;
    padding: 2rem 3rem;

    text-align: center;

    background: var(--gray1);
    border-right: 6px solid var(--gray3);
    box-shadow: 6px 6px 0 var(--gray3);
}

#otherButtonsGuide h2 {
    font-size: 2.4rem;
    font-weight: 900;
    margin-bottom: 0.5rem;
}

#otherButtonsGuide > p {
    font-size: 1.25rem;
    margin-bottom: 2.5rem;
}

#otherButtonsGuideContent {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 3rem;
    align-items: center;
}

#otherButtonsGuideImage {
    width: 100%;
    height: auto;
}

#otherButtonsGuideList {
    counter-reset: otherButtonsStep;
    list-style: none;
    text-align: left;
}

#otherButtonsGuideList li {
    counter-increment: otherButtonsStep;
    position: relative;

    padding-left: 3.25rem;
    margin-bottom: 1.35rem;

    font-size: 1.15rem;
    line-height: 1.4;
}

#otherButtonsGuideList li::before {
    content: counter(otherButtonsStep);

    position: absolute;
    left: 0;
    top: 0;

    width: 1.8rem;
    height: 1.8rem;

    display: flex;
    justify-content: center;
    align-items: center;

    border-radius: 50%;
    background: #0057d9;
    color: white;

    font-size: 1rem;
    font-weight: 900;
}

#otherButtonsGuideList > li > strong {
    display: block;
    font-size: 1.25rem;
    font-weight: 900;
    margin-bottom: 0.25rem;
}

#otherButtonsGuideList span {
    display: block;
}



/* #endregion */

/* #region Export Import Guide */

#exportImportGuide {
    width: 80%;
    max-width: 1100px;
    margin: 3rem auto;
    padding: 2rem 3rem;

    text-align: center;

    background: var(--gray1);
    border-right: 6px solid var(--gray3);
    box-shadow: 6px 6px 0 var(--gray3);
}

#exportImportGuide h2 {
    font-size: 2.4rem;
    font-weight: 900;
    margin-bottom: 0.5rem;
}

#exportImportGuide > p {
    font-size: 1.25rem;
    margin-bottom: 2.5rem;
}

#exportImportGuideContent {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 3rem;
    align-items: center;
}

#exportImportGuideImage {
    width: 100%;
    max-width: 500px;
    height: auto;
}

#exportImportGuideList {
    counter-reset: exportImportStep;
    list-style: none;
    text-align: left;
}

#exportImportGuideList li {
    counter-increment: exportImportStep;
    position: relative;

    padding-left: 3.25rem;
    margin-bottom: 1.35rem;

    font-size: 1.15rem;
    line-height: 1.4;
}

#exportImportGuideList li::before {
    content: counter(exportImportStep);

    position: absolute;
    left: 0;
    top: 0;

    width: 1.8rem;
    height: 1.8rem;

    display: flex;
    justify-content: center;
    align-items: center;

    border-radius: 50%;
    background: #0057d9;
    color: white;

    font-size: 1rem;
    font-weight: 900;
}

#exportImportGuideList > li > strong {
    display: block;
    font-size: 1.25rem;
    font-weight: 900;
    margin-bottom: 0.25rem;
}

#exportImportGuideList span {
    display: block;
}

/* #endregion */

/* #endregion */

@media screen and (max-width: 625px) {
    #aboutPage {
        background:var(--white);
    }
}

/* #endregion */

/* #region Footer Layout */
#footer {
    padding: 2rem;
    margin-top: 3rem;

    background-color: var(--blue3);
    border-top: 4px solid var(--black);
}

/* Footer Navigation */
#footerNav {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 1rem;
}

/* Footer Buttons */
#footerNav a {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 150px;
    height: 40px;

    color: var(--black);
    background-color: var(--white);

    font-size: 1.1rem;
    text-decoration: none;

    border: 3px solid black;
    box-shadow: 4px 4px 0 var(--black);
}

#footerNav a:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 var(--black);
}
#footerNav a:focus {
    transform: translate(3.5px, 3.5px);
    box-shadow: .5px .5px 0 var(--black);
}

/* Active Button */
#footerNav a.active {
    border: 5px solid var(--black);
    font-weight: bold;
    background: var(--yellow3);
}

/* Footer Text */
#footer p {
    text-align: center;
    font-size: 1rem;
    color: var(--white);
}

/* #endregion */


/* #region Dashboard */

#screenSize{
    width:100vw;
    height:100vh;
    overflow: hidden;
}
#fullDashboard {
    display: flex;
    flex-direction: row; 
}
#dashboard {
    flex-grow: 1;
}

.overDashboard{
    position: absolute;
    z-index: 1000; /* high number, sits above most elements */
}



/* #region Sidebar */

/* #region Sidebar General */

#dashboardSidebar {
    padding-top: 10px;
    width: 200px;
    border: 3px solid black;
    border-top:none;
    height: calc(100vh - var(--topBarHeight) - 16px);

    display: grid;
    grid:
        "background background" auto
        "mode       mode"       auto
        "delete     add"        auto
        "load       save"       auto
        "clear      clear"      auto
        ".          ."          1fr
        "gridSnap   gridSnap"   auto
        / 95px 95px;

    row-gap: 0.75rem;
    align-content: stretch;
    justify-content: center;
    justify-items: center;
    align-items: center;
}

button.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* shared lightweight tool behavior */
#bgColorButton,
#deleteTool,
#load,
#save,
#clearBoard {
    width: 80px;
    height: 80px;

    display: flex;
    justify-content: center;
    align-items: center;

    background: transparent;
    border: none;
    box-shadow: none;

    cursor: pointer;
    transition: transform 0.1s ease;
}

#bgColorButton:hover,
#deleteTool:hover,
#load:hover,
#save:hover {
    transform: scale(1.1);
}

#bgColorButton:active,
#deleteTool:active,
#load:active,
#save:active {
    transform: scale(0.90);
}

#dashboardSidebar.activeMode .sidebarTool:not(.keepActive) {
    display: none;
}

#dashboardSidebar.activeMode #toggleMode {
    display: flex;
}

/* #endregion */


/* #region Background Button */

#backgroundColorTool {
    grid-area: background;
    background: #ffffff;

    display: flex;
    justify-content: center;
    align-items: center;
}

#bgColorButton {
    width: 150px;
    height: 70px;

    display: flex;
    justify-content: center;
    align-items: center;

    border: 3px solid black;
    border-radius: 50%;

    font-weight: bold;
    font-size: 1.3rem;

    background: #ffffff;
    cursor: pointer;
}

.textOutline {
    color: black;
    -webkit-text-stroke: .2px white;

    /* fallback using shadow */
    text-shadow:
        -1px -1px 0 white,
         1px -1px 0 white,
        -1px  1px 0 white,
         1px  1px 0 white;
}

#bgColorButton:hover {
    transform: scale(1.05);
}

#bgColorButton:active {
    transform: scale(0.95);
}

#bgColor {
    display: none;
}

#colorPreview,
.bgOval {
    display: none;
}

/* #endregion */

/* #region Mode */

#toggleMode {
    grid-area: mode;

    width: 150px;
    min-height: 70px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;

    background: var(--gray1);
    border: 3px solid var(--gray6);

    font-weight: bold;
    cursor: pointer;
}

#modeDisplay {
    font-size: 1.35rem;
    font-weight: 900;
    pointer-events: none;
}
#modeHint {
    font-size: 0.95rem;
    font-weight: 600;
    pointer-events: none;
}

#toggleMode.editModeButton {
    background: #fff3a6;
}

#toggleMode.activeModeButton {
    background: #b8f5b8;
}

/*#region toggle mode effects*/

/* shared mode button polish */
#toggleMode {
    transition:
        transform 0.12s ease,
        box-shadow 0.15s ease,
        border-color 0.15s ease,
        background-color 0.15s ease;
}

/* edit mode */
#toggleMode.editModeButton {
    background: #fff3a6;
    border: 3px solid #d6a800;
    box-shadow: 0 0 8px rgba(255, 204, 0, 0.9);
}

#toggleMode.editModeButton:hover {
    transform: scale(1.05);
    border-color: #ffcc00;
    box-shadow:
        0 0 14px rgba(255, 204, 0, 1),
        3px 3px 0 #8a6a00;
}

#toggleMode.editModeButton:active {
    transform: scale(0.94);
    box-shadow:
        inset 0 0 10px rgba(255, 170, 0, 0.9),
        0 0 6px rgba(255, 170, 0, 0.9);
}

/* active mode */
#toggleMode.activeModeButton {
    background: #b8f5b8;
    border: 3px solid #208a20;
    box-shadow: 0 0 8px rgba(50, 205, 50, 0.8);
}

#toggleMode.activeModeButton:hover {
    transform: scale(1.04);
    border-color: #32cd32;
    box-shadow:
        0 0 14px rgba(50, 205, 50, 1),
        3px 3px 0 #126112;
}

#toggleMode.activeModeButton:active {
    transform: scale(0.95);
    box-shadow:
        inset 0 0 10px rgba(0, 128, 0, 0.9),
        0 0 6px rgba(0, 128, 0, 0.9);
}

/* pulse when mode changes */
#toggleMode.modePulse {
    animation: modePulse 0.45s ease;
}

@keyframes modePulse {
    0% {
        transform: scale(1);
        filter: brightness(1);
    }

    45% {
        transform: scale(1.08);
        filter: brightness(1.2);
    }

    100% {
        transform: scale(1);
        filter: brightness(1);
    }
}
/*#endregion*/

/* #endregion */

/* #region Add Icon (ONLY full button style) */

#addIcon {
    grid-area: add;

    width: 80px;
    height: 80px;
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.15rem;

    background: var(--white);
    border: 3px solid var(--black);
    box-shadow: 4px 4px 0 var(--black);

    font-weight: bold;
    cursor: pointer;
}

#addIcon:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 var(--black);
}

#addIcon:active {
    transform: translate(4px, 4px);
    box-shadow: none;
}

.toolPlus {
    font-size: 1.7rem;
    line-height: 1;
}

.toolText {
    font-size: 1rem;
    line-height: 1.05;
}

/* #endregion */


/* #region Delete */

#deleteTool {
    grid-area: delete;
    position: relative;
    overflow: hidden; 
}

.deleteX {
    position: absolute;
    font-size: 8rem;
    color: red;
    font-weight: 900;

    transform: translateY(-9px);
}

.deleteText {
    position: relative;
    z-index: 2;

    background: var(--white);
    padding: 0 0.2rem;

    font-size: 1.05rem;
    font-weight: 900;
}

/* active delete mode (strong feedback) */
#deleteTool.deleteActive {
    border: 3px solid red;
    background: rgba(255, 0, 0, 0.08);
    filter: drop-shadow(0 0 6px red);
}

#deleteTool.deleteActive .deleteX {
    color: darkred;
}

/* #endregion */


/* #region Load */

#load {
    grid-area: load;
    position: relative;

    width: 80px;
    height: 80px;

    display: flex;
    justify-content: center;
    align-items: center;

    overflow: visible;
    transform: translateX(-2px);
}

.loadIcon {
    width: 80px;
    height: 80px;
    transform: translateX(2px) translateY(2px) scale(1.15);
    transform-origin: 50% 50%;
}

.loadText {
    position: absolute;
    z-index: 2;


    font-size: 1rem;
    font-weight: 900;
    line-height: 1;

    pointer-events: none;
    transform: translateX(2px);
    transform: translateY(2px);
}

#load:hover .loadIcon {
    animation: spinLoad 0.7s ease-in-out;
}

@keyframes spinLoad {
    from {
        transform: translateX(2px) translateY(2px) scale(1.15) rotate(0deg);
    }

    to {
        transform: translateX(2px) translateY(2px) scale(1.15) rotate(-360deg);
    }
}

/* #endregion */


/* #region Save */

#save {
    grid-area: save;
    position: relative;

    display: flex;
    justify-content: center;
    align-items: center;
}

/* image */
.toolIconImg {
    width: 100px;
    height: 100px;
    object-fit: contain;
}

/* text overlay (same concept as delete) */
.saveText {
    position: absolute;
    z-index: 2;

    background: var(--white);
    padding: 0 0.2rem;

    font-size: 1rem;
    font-weight: 900;
    line-height: 1;
    transform: translateY(10px); /* move up */
}

/* hover feel */
#save:hover .toolIconImg {
    transform: scale(1.08);
}

#save:active .toolIconImg {
    transform: scale(0.92);
}

/* #endregion */


/* #region Clear */

#clearBoard {
    grid-area: clear;
    position: relative;

    width: 170px;
    height: 95px;

    display: flex;
    justify-content: center;
    align-items: center;

    background: transparent;
    border: none;
    cursor: pointer;

    overflow: hidden;
    
    transform: translateY(-8px); /* move up */
}

.clearShape {
    position: absolute;

    width: 170px;
    height: 70px;

    background: var(--gray4);

    clip-path: polygon(
        0% 50%,   /* left point */

        20% 0%,
        28.571% 15%,
        37.143% 0%,
        45.714% 15%,
        54.286% 0%,
        62.857% 15%,
        71.429% 0%,
        80% 15%,

        97% 50%,  /* right point */

        80% 85%,
        71.429% 100%,
        62.857% 85%,
        54.286% 100%,
        45.714% 85%,
        37.143% 100%,
        28.571% 85%,
        20% 100%
    );
}

#clearBoard:hover {
    transform: translateY(-8px) scale(1.05);
}

#clearBoard:active {
    transform: translateY(-8px) scale(0.95);
}


.clearText {
    position: relative;
    z-index: 2;

    color: var(--white);
    background: transparent;

    font-size: 1.15rem;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;

    overflow: hidden;
}

.clearText::after {
    content: "";
    position: absolute;
    inset: 0;

    background: var(--gray4);
    transform: translateX(-100%);
}

#clearBoard:hover .clearText::after {
    animation: wipeOutThenFadeIn 0.8s ease-in-out;
}

@keyframes wipeOutThenFadeIn {
    0% {
        transform: translateX(-100%);
        opacity: 1;
    }

    55% {
        transform: translateX(0%);
        opacity: 1;
    }

    75% {
        transform: translateX(0%);
        opacity: 1;
    }

    100% {
        transform: translateX(0%);
        opacity: 0;
    }
}

/* #endregion */

/* #region Grid Snap */

#gridSnapToggle {
    grid-area: gridSnap;

    width: 165px;
    height: 53px;

    border: 3px solid black;

    /* grid line pattern */
    background-color: var(--apricot);

    background-size: 16px 16px;

    font-weight: 900;
    cursor: pointer;
    transform: translateY(-12px);
}

#gridSnapToggle:hover {
    transform: scale(1.04) translateY(-12px);
}

#gridSnapToggle:active {
    transform: scale(0.96) translateY(-12px);
}

#gridSnapText {
    font-size: .9rem ;
    background:  var(--apricot);
    display: block;
    height: 15px;
    width: 115px;
    transform: translateX(20px) translateY(1px);
}

#gridSnapToggle .textOutline{
    color: black;
    -webkit-text-stroke: .02px white;

    /* fallback using shadow */
    text-shadow:
        -.01px -.01px 0 white,
        .01px -.01px 0 white,
        -.01px .01px 0 white,
        .01px .01px 0 white,
}

#readjustGridText{
    display: block;
    transform: translateY(-0.5px);
}

/* #endregion */

/* #region Fullscreen */

#fullScreenControls {
    bottom: 1rem;
    right: 1rem;
}

/* #endregion */

/* #endregion */






/* #region Icon Popup */

/* #region Modal Base Layout */

#iconModal {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;

    width: 500px;
    max-width: 90vw;
    padding: 1.5rem 1rem;

    background: #f4f4f4;
    border: 3px solid black;
    box-shadow: 6px 6px 0 black;
}

#iconBuilder,
#iconSharedFields,
#shapeControls,
#imageControls {
    width: 100%;
    max-width: 360px;
}

#iconModalTitle {
    text-align: center;
    margin-bottom: 0.5rem;

    font-size: 1.4rem;
    font-weight: 900;
    letter-spacing: 0.5px;

    border-bottom: 2px solid black;
    padding-bottom: 0.4rem;
}

/* #endregion */


/* #region Icon Type Switch */

#iconTypeSwitch {
    display: flex;
    justify-content: center;
    gap: 1rem;

    width: 100%;
    max-width: 360px;

    padding: 0.5rem 0 0.75rem;
    border-bottom: 2px solid black;
}

#iconTypeSwitch input {
    display: none;
}

.iconTypeOption {
    border: 2px solid black;
    padding: 6px 14px;

    background: #dcdcdc;
    box-shadow: 2px 2px 0 black;

    font-weight: 400;
    cursor: pointer;
    user-select: none;
}

.iconTypeOption:hover {
    background: #d0d0d0;
}

.iconTypeOption.active {
    background: #fff3a6;
    border: 2px solid black;

    font-weight: 900;
    opacity: 1;

    box-shadow: inset 2px 2px 0 black;
}

.iconTypeOption:not(.active) {
    opacity: 0.85;
}

/* #endregion */


/* #region Icon Preview */

#iconPreviewPanel {
    display: flex;
    justify-content: center;

    width: 100%;
    padding: 1rem 0 0.75rem;

    border-bottom: 2px solid black;
}

#iconPreviewBox {
    width: 100px;
    height: 100px;

    border: 2px solid black;
    background: white;

    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

#iconPreviewImage {
    max-width: 100%;
    max-height: 100%;
    display: block;
}

/* #endregion */


/* #region Shape Controls */

#shapeControls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "shapeHeader colorHeader"
        "shapeInput  colorInput";

    gap: 0.5rem 1rem;

    padding: 1rem 0 0.75rem;
    border-bottom: 2px solid black;
}

#shapeControls label[for="shapeSelect"] {
    grid-area: shapeHeader;
}

#shapeSelect {
    grid-area: shapeInput;
}

#shapeControls label[for="shapeColor"] {
    grid-area: colorHeader;
}

#shapeControls .colorPickerRow {
    grid-area: colorInput;
}

/* #endregion */


/* #region Shared Icon Fields */

#iconSharedFields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "labelHeader textColorHeader"
        "labelInput  textColorInput"
        "linkHeader  linkHeader"
        "linkInput   linkInput";

    gap: 0.5rem 1rem;

    padding: 1rem 0 0.75rem;
    border-bottom: 2px solid black;
}

#iconSharedFields label[for="iconLabel"] {
    grid-area: labelHeader;
}

#iconLabel {
    grid-area: labelInput;
}

#iconSharedFields label[for="textColor"] {
    grid-area: textColorHeader;
}

#iconSharedFields .colorPickerRow {
    grid-area: textColorInput;
}

#iconSharedFields label[for="iconLinkInput"] {
    grid-area: linkHeader;
    margin-top: 0.5rem;
}

#iconLinkInput {
    grid-area: linkInput;
}

/* #endregion */


/* #region Form Labels and Inputs */

#iconModal label {
    font-weight: bold;
    text-align: center;
}

#iconModal input,
#iconModal select {
    padding: 4px 6px;
    box-sizing: border-box;
}

#shapeSelect,
#iconLabel {
    width: 95%;
    max-width: 220px;
    justify-self: center;
    text-align: center;
}

#iconLinkInput {
    width: 85%;
    justify-self: center;
    text-align: center;
}

#iconModal select,
#iconModal input[type="text"],
#iconModal input[type="url"] {
    background: white;
    border: 2px solid black;
    border-radius: 4px;
    box-shadow: 2px 2px 0 black;

    min-height: 28px;
    font-weight: bold;
}

#iconModal select:focus,
#iconModal input[type="text"]:focus,
#iconModal input[type="url"]:focus {
    outline: 2px solid #1E90FF;
    outline-offset: 2px;
}

/* #endregion */


/* #region Color Picker Controls */

.colorPickerRow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.colorPickerRow button {
    background: #e0e0e0;
    border: 2px solid black;
    border-radius: 4px;
    box-shadow: 2px 2px 0 black;

    padding: 4px 8px;

    font-weight: bold;
    cursor: pointer;
}

.colorPickerRow button:hover {
    background: #d0d0d0;
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0 black;
}

.colorPreview {
    width: 22px;
    height: 22px;

    border-radius: 50%;
    border: 2px solid black;

    flex-shrink: 0;
}

#shapeColor,
#textColor {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

/* #endregion */


/* #region Image Upload Controls */

#imageControls {
    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 1rem 0 0.75rem;
    border-bottom: 2px solid black;
}

#uploadHelp {
    font-size: 0.85rem;
}

/* #endregion */


/* #region Modal Action Buttons */

#iconModalActions {
    display: flex;
    justify-content: center;
    gap: 1rem;

    padding-top: 0.5rem;
}

#iconModalActions button {
    min-width: 105px;
    min-height: 34px;

    border: 2px solid black;
    border-radius: 4px;
    box-shadow: 3px 3px 0 black;

    font-weight: bold;
    cursor: pointer;
}

#cancelIconCreate {
    background: #c0c0c0;
    color: black;
}

#createIconConfirm {
    background: #32CD32;
    color: black;
}

#iconModalActions button:hover {
    transform: translate(1px, 1px);
    box-shadow: 2px 2px 0 black;
}

#iconModalActions button:active,
.colorPickerRow button:active {
    transform: translate(2px, 2px);
    box-shadow: none;
}

/* #endregion */


.colorPickerRow {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.colorPreview {
    width: 25px;
    height: 25px;
    border: 2px solid black;
    border-radius: 50%;
    display: inline-block;
}

/* #endregion */





/* #region Icons */
a {
    text-decoration: none;
    color: inherit;
}
#iconModalOverlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

#iconModal {
    background: white;
    padding: 1.5rem;
    border-radius: 12px;
    width: 500px;
    max-width: 90%;
}

/* Wrapper for each icon */
.iconWrapper {
    width: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 1rem;
    cursor: pointer;
    transform: scale(1.5);
    transform-origin: top left;
    padding: 10px 0;
}

.iconVisual {
    width: 60px;
    height: 60px;

    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.iconWrapper p {
    margin-top: 4px;   /* control spacing HERE */
}

.iconLink {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

#dashboard.deleteMode .iconWrapper:hover {
    filter: drop-shadow(0 0 8px red);
}

#dashboard.deleteMode .iconWrapper {
    cursor: url('images/smallRedX.png') 15 12, auto;
}





#shapeColor,
#textColor {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}


/* Shape/image visual alignment */
.iconShape,
.iconImage {
    display: block;
    margin: 0 auto;
    flex-shrink: 0;
}

.iconImage {
    width: 60px;
    height: 60px;
    object-fit: contain;
    display: block;
}

/* #region class shapes */

.iconShape {
    position: relative;
    width: 60px;
    height: 60px;
}

/* Triangle Up */
.iconShape.triangle-up {
    width: 54px;
    height: 54px;
    background-color: #3498db;
    clip-path: polygon(50% 8%, 8% 92%, 92% 92%);
}

/* Triangle Down */
.iconShape.triangle-down {
    width: 54px;
    height: 54px;
    background-color: #e74c3c;
    clip-path: polygon(8% 8%, 92% 8%, 50% 92%);
}

/* Triangle Left */
.iconShape.triangle-left {
    width: 54px;
    height: 54px;
    background-color: #2ecc71;
    clip-path: polygon(8% 50%, 92% 8%, 92% 92%);
}

/* Triangle Right */
.iconShape.triangle-right {
    width: 54px;
    height: 54px;
    background-color: #f1c40f;
    clip-path: polygon(8% 8%, 92% 50%, 8% 92%);
}

/* Square */
.iconShape.square {
    width: 50px;
    height: 50px;
    background-color: #00FF00;
}

/* Diamond */
.iconShape.diamond {
    width: 50px;
    height: 50px;
    background-color: #3498db;
    clip-path: polygon(50% 8%, 92% 50%, 50% 92%, 8% 50%);
}

/* Rectangle */
.iconShape.rectangle {
    width: 54px;
    height: 40px;
    background-color: #9b59b6;
}

/* Circle */
.iconShape.circle {
    width: 50px;
    height: 50px;
    background-color: #e67e22;
    border-radius: 50%;
}

/* Oval */
.iconShape.oval {
    width: 54px;
    height: 40px;
    background-color: #1abc9c;
    border-radius: 50%;
}

/* Star */
.iconShape.star {
    width: 54px;
    height: 54px;
    background-color: gold;
    clip-path: polygon(
        50% 4%,
        61% 35%,
        94% 35%,
        68% 55%,
        78% 88%,
        50% 68%,
        22% 88%,
        32% 55%,
        6% 35%,
        39% 35%
    );
}

/* Hexagon */
.iconShape.hexagon {
    width: 54px;
    height: 50px;
    background-color: #e74c3c;
    clip-path: polygon(
        25% 6%,
        75% 6%,
        94% 50%,
        75% 94%,
        25% 94%,
        6% 50%
    );
}

/* Plus */
.iconShape.plus {
    width: 50px;
    height: 50px;
    background-color: #2c3e50;
    clip-path: polygon(
        35% 0%,
        65% 0%,
        65% 35%,
        100% 35%,
        100% 65%,
        65% 65%,
        65% 100%,
        35% 100%,
        35% 65%,
        0% 65%,
        0% 35%,
        35% 35%
    );
}

/* X */
.iconShape.x {
    width: 50px;
    height: 50px;
    background-color: red;
    clip-path: polygon(
        20% 0%,
        50% 30%,
        80% 0%,
        100% 20%,
        70% 50%,
        100% 80%,
        80% 100%,
        50% 70%,
        20% 100%,
        0% 80%,
        30% 50%,
        0% 20%
    );
}

/* #endregion */

/* #region Cursor Tooltip */

#cursorTooltip {
    position: fixed;
    z-index: 999999;

    padding: 3px 6px;
    background: rgba(20, 20, 20, 0.75);
    color: white;

    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 3px;

    pointer-events: none;
    opacity: 0;

    transform: translate(12px, 12px);
    white-space: nowrap;
    transition: opacity .3s ease;
}

#tooltipButton {
    position: absolute;

    top: 23px;
    right: 80px;

}
#toggleTipsBtn {
    height: 25px;
    padding: 0 12px;

    font-size: 0.7rem;
    font-weight: 900;

    background: var(--white);
    border: 2px solid var(--black);

    cursor: pointer;
}

/* hover */
#toggleTipsBtn:hover {
    transform: translate(-2px, -2px);
    box-shadow: 2px 2px 0 var(--black);
}

/* active click */
#toggleTipsBtn:active {
    transform: translate(1px, 1px);
    box-shadow: none;
    filter: brightness(0.9);
}

#toggleTipsBtn.tipsOn {
    background: #fff3a6; /* same vibe as edit mode */
}

#toggleTipsBtn.tipsOff {
    background: #e0e0e0;
    opacity: 0.8;
}

/* #endregion */


#fullscreenBtn{
    width: 120px;
    height: 60px;
    font-size: 1rem;

}

#fullscreenModeText {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    font-size: 15rem;
    font-weight: 900;
    background-color: var(--white);

    color: var(--black);

    opacity: 0;
    pointer-events: none;
    width: 100%;

    text-wrap:wrap;
}
@media screen and (min-width: 1650px) {
    #fullscreenModeText {
        text-wrap:none;
    }
}
@media screen and (max-width: 850px) {
    #fullscreenModeText {
        font-size: 8rem;
    }
}
/* animation */
.showFullscreenText {
    animation: fadeOutText 1.0s ease-out;
}

@keyframes fadeOutText {
    0%   { opacity: 0; }
    30%   { opacity: 0.5; }
    100% { opacity: 0; }
}

/*#endregion*/
/*#endregion*/





/*#region import/export*/

.overTopBar{
    position: absolute;
    z-index: 1000; /* high number, sits above most elements */
}

#externalButtons{
    Top: 0.5rem;
    right: 1rem;
    display: flex;
    flex-direction: column;
    row-gap: 6px;
}

.external {
    padding: 3px;
    background-color: green;
    border: 2px solid yellow;
    color: white;

    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.1s ease, filter 0.1s ease;
}

/* hover = slight lift / brightness */
.external:hover {
    transform: translate(-1px, -1px);
    box-shadow: 2px 2px 0 black;
    filter: brightness(1.1);
}

/* active = pressed in */
.external:active {
    transform: translate(1px, 1px);
    box-shadow: none;
    filter: brightness(0.9);
}


/* overlay (background dim) */
#storageModalOverlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);

    display: flex;
    justify-content: center;
    align-items: center;

    z-index: 3000;
}

/* modal box */
#storageModal {
    background: white;
    padding: 1.25rem;
    border-radius: 12px;

    width: 400px;
    max-width: 90vw;

    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* title */
#storageModalTitle {
    text-align: center;
    margin: 0;
}

/* textarea (10 lines, scrollable) */
#storageTextArea {
    width: 100%;
    height: 15em;              /* ~10 lines */
    resize: none;

    padding: 6px;
    font-size: 0.9rem;

    color: #444;               /* slightly gray text */
    background: #f9f9f9;

    border: 2px solid #000;
    border-radius: 6px;

    overflow-y: auto;
    box-sizing: border-box;
}

/* buttons row */
#storageModalActions {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

/* optional: make buttons same width */
#storageModalActions button {
    min-width: 120px;
    height: 30px;
}

#storageCancel{
    background-color: var(--blue4);
    color: var(--white);
}
#storageAction{
    background-color: var(--blue2);

}


/*#endregion*/





/*overlay to close the windowed sections*/
.overlay {
    position: fixed;
    inset: 0; /* full screen */
    background: rgba(0, 0, 0, 0.4);

    display: flex;
    justify-content: center;
    align-items: center;

    z-index: 3000;
}