/* VARIABLES */
    :root {
        --clrMain:#333333;             /*#26321a*/
        --clrMid:#8cb069;             /*#555555*/
        --clrLight:#d9e5cd;           /*#EEEEEE*/
        --clrLightest:#e5eedd;         /*#fefefe*/
        --clrCanvas:#f6ffee;         /*#ffffff OR f2f6ee*/ 
        --clrGoal:#ED1F24;
        --clrPlayerBall:#0C8040;
        --fontMonospace:"Micro 5", sans-serif;
        --fontSansSerif:sans-serif;
    }

/* STYLES */
    html, body {margin:0;padding:0;overflow:hidden;height:100%;background-color:var(--clrLight);font-family:var(--fontSansSerif);user-select:none;color:var(--clrMain);}
    h1,h2,h3,h4,h5,h6 {font-family:var(--fontMonospace);}
    h1 {margin:0;padding:24px;}
    p {font-size:16px;line-height:28px;margin:0 0 16px;}

    /* HELPERS */
    .infoPanel {position:fixed;left:24px;top:24px;margin:0;display:flex;transition:300ms ease;}
    .infoPanel h2 {margin:0;font-size:40px;}
    .feedbackActive {background-color:var(--clrCanvas);padding:0 16px;}
    .disable {pointer-events:none;}
    .takeover::before {content:'';position:fixed;background-color:var(--clrMain);width:100vw;height:100vh;z-index:-1;left:0;top:0;opacity:.8;transition:500ms ease;}

    /* START SCREEN */
    .startScreen {display:flex;flex-direction:column;position:fixed;width:100vw;height:100vh;z-index:10;background-color:var(--clrCanvas);opacity:1;margin:auto;border:1px solid;left:0;right:0;bottom:0;top:0;text-align:center;transition:500ms ease;visibility:visible;}
    .startScreen.hide {pointer-events:none;bottom:-200vh;}
    .startScreen.hide.takeover::before {;opacity:0;}
    .startScreen .content {display:flex;flex-direction:row;gap:0;padding:0;background-color:var(--clrCanvas);align-items:center;height:100vh;}
    .startScreen .intro {flex-basis:0;flex-grow:1;}
    .startScreen .intro img {width:100%;max-width:600px;}
    .startScreen .levelMenu {flex-basis:0;flex-grow:1;height:100vh;overflow:scroll;padding:0;display:flex;flex-direction:column;gap:0;background-color:var(--clrLight);}
    #levelButtonsContainer {display:flex;flex-direction:row;align-self:center;gap:16px;position:relative;flex-wrap:wrap;justify-content:center;max-width:700px;margin:auto;padding:60px 24px;}
    .startScreen .levelOption {text-align:center;display:flex;width:100%;align-self:center;align-items:center;cursor:pointer;margin:0;padding:8px;position:relative;gap:24px;background-color:var(--clrCanvas);border:none;outline:1px solid var(--clrMid);}
    .startScreen .levelOption img {width:200px;background-color:var(--clrMid);border:1px solid;}
    .startScreen .levelOption .details {display:flex; flex-direction:column;align-items:baseline;}
    .startScreen .levelOption .lvlNo {font-family:var(--fontMonospace);text-transform:uppercase;font-size:24px;color:var(--clrMain);letter-spacing:1px;}
    .startScreen .levelOption .lvlName {font-family:var(--fontSansSerif);font-size:14px;color:var(--clrMain);}
    .startScreen .levelOption.completed::after {content:'Slayed!';position:absolute;background-color:var(--clrGoal);transform:rotate(-15deg);aspect-ratio:1/1;display:inline-grid;align-items:center;font-size:24px;top:0;right:0;bottom:0; height:50%;margin:auto;text-align:center;font-family:var(--fontMonospace);color:var(--clrCanvas);text-transform:uppercase;padding:4px;}
    .startScreen .levelOption:hover{outline:2px solid;}
    .startScreen .levelOption.disabled {display:none;}

    /* GAME PLAY UI */
    #canvasContainer {position:fixed;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;margin:auto;}
    canvas {display:block;max-width:1920px;max-height:960px;border:1px solid;margin:auto;background-color:var(--clrCanvas)!important;}
    .ui {transition:500ms ease;opacity:1;}
    .pause {background-color:var(--clrMid);width:48px;height:48px;position:fixed;z-index:2;right:24px;top:24px;align-content:center;align-items:center;text-align:center;border-radius:4px;border:0;color:var(--clrCanvas);transition:500ms ease;opacity:1;    visibility:visible;}
    .pause:disabled {opacity:0.4;cursor:not-allowed;}
    .pause:hover:not(:disabled) {background:#666;cursor:pointer;}
    .uiControlArea {z-index:2;display:flex;position:fixed;right:0;margin:24px;background-color:var(--clrCanvas);padding:12px;border:1px solid var(--clrMain);box-shadow:2px 2px 0 var(--clrMain);}
        #controls {display:flex;justify-content:space-between;flex-direction:row;gap:8px;}
        #controls button {margin:0;padding:12px;background:#555;border:none;color:var(--clrCanvas);cursor:pointer;}
        #controls button:disabled {opacity:0.4;cursor:not-allowed;}
        #controls button:hover:not(:disabled) {background:#666;}
        #uiContainer {position:fixed;display:flex;top:0;left:0;height:fit-content;width:220px;background:transparent;z-index:2;box-sizing:border-box;align-items:center;bottom:0;margin:auto;}
        #ui {display:flex;width:100%;background:var(--clrCanvas);color:var(--clrCanvas);flex-direction:column;padding:12px;gap:24px;margin:24px;border:1px solid var(--clrMain);box-shadow:2px 2px 0 var(--clrMain);}
        #controls button.run {background-color:green;}
    .objectsMenu {display:flex;flex-direction:column;gap:16px;}
    .objectsMenu h2 {font-size:24px;font-weight:400;padding-bottom:4px;color:var(--clrMain);text-transform:uppercase;line-height:4px;margin-bottom:12px;}
    .objectsPanel {display:flex;flex-direction:column;gap:0;}
    .object {padding:8px;text-align:center;cursor:grab;transition:background 0.2s;display:flex;flex-direction:column;align-items:center;font-size:10px;text-transform:uppercase;letter-spacing:1px;gap:8px;color:var(--clrMain);}
        .object:hover {outline:1px dashed #444;}
        .object svg {pointer-events:none;}
        .object .brick, .object .ball {color:var(--clrMain);}
        .connectors {display:flex;gap:8px;}
        .connectors button {border:none;border-radius:24px;padding:12px 8px;cursor:pointer;display:flex;align-items:center;align-self:center;align-content:center;width:100%;text-align:center;min-height:36px;outline:1px solid var(--clrMain);background-color:var(--clrCanvas);}
        .connectors button:hover {background-color:var(--clrMid);}
        .connectors button.active {background-color:var(--clrMid);}
    .ui.hide, .pause.hide {opacity:0;visibility:hidden;}

    /* POPUPS */
    .popup {position:relative;padding:0;z-index:1000;width:100vw; height:100vh;transition:500ms ease;}
        .popup .content {background-color:var(--clrCanvas); position:absolute;display:flex; padding:48px 24px 60px;margin:auto; top:0;bottom:0;max-height:80vh;height:fit-content;left:0;right:0;width:80vw;max-width:400px;flex-direction:column;align-items:center;}
        .popup img {max-width:100%;}
        .popup h2 {font-size:60px;margin:0;line-height:40px;text-align:center;flex-basis:0;flex-grow:1;}
        .popup .actions {display:flex;align-items:center; flex-direction:column;gap:8px;flex-basis:0;flex-grow:1;}
        .popup button {margin:0;padding:12px;background:#555;border:none;color:var(--clrCanvas);cursor:pointer;font-size:16px;}
        .popup button:disabled {opacity:0.4;cursor:not-allowed;}
        .popup button:hover:not(:disabled) {background:#666;}
        .linkStyle {background-color:transparent !important;color:#333 !important;padding:8px !important;font-size:12px!important;}
        .closeX {position:absolute;right:0;top:0;width:100%;text-align:right;}
        .closeX button {background:transparent !important;color:#333;font-family:var(--fontMonospace);font-size:40px;padding:0;margin:0;width:48px;height:48px;line-height:0;}

	/* ============================= */
	/* ! BREAKPOINT  1800 */
	/* ============================= */

    @media only screen and (max-width:2300px) {
        #canvasContainer {left:inherit;right:24px;}
    }

	/* ============================= */
	/* ! BREAKPOINT  1500 */
	/* ============================= */

    @media only screen and (max-width:2100px) {
        #canvasContainer {left:0; right:0; }
        #uiContainer {width:100%;top:auto;overflow:scroll;}
        #ui {width:auto;}
        .objectsMenu {flex-direction:row;}
        .objectsPanel {padding:0 24px 0 0;border-right:1px solid #333;}
        .objectsPanel.last {border:none;}
        .connectors {width:160px;}
        .staticObjects, .fallingObjects {display:flex;flex-direction:row;}
    }

	/* ============================= */
	/* ! BREAKPOINT   */
	/* ============================= */

    @media only screen and (max-width:767px) {
         h1 {margin:0;padding:0;}
        .uiControlArea {margin:0;padding:12px;overflow:scroll;width:100%;max-width:100vw;flex-wrap:nowrap;left:0;box-shadow:none;border-top:1px solid;border-bottom:0;border-right:0;border-left:0;bottom:0;height:48px;z-index:3;}
        #controls button {padding:4px;}
        .startScreen .content {gap:16px;padding:24px;min-height:auto;flex-direction:column;}
        .startScreen .intro {flex-grow:0;}
        .startScreen .levelMenu {padding:24px 0;border:1px solid;}
        .startScreen .levelOption {gap:12px;}
        #levelButtonsContainer {margin:0;padding:0 24px;}
        .levelOption {}
        #uiContainer {border-top:1px solid;bottom:72px;}
        #ui {margin:0;border:0;box-shadow:none;padding:16px 12px;}
        .popup .content {flex-direction:column;}
    }