*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    overflow:hidden;

    font-family:Arial, Helvetica, sans-serif;

    background:#aebdca;

}

.creator-credit {
    position:absolute;
    top:0;
    bottom:auto;
    left:0;
    transform:translateX(-100%);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 400;

    color: rgba(60, 60, 60, 0.55);

    pointer-events: none;
    user-select: none;

    z-index: 10000;
}

/* ==========================================================
   Left Control Panel
========================================================== */

#toolbar,
.car-toolbar,
#controlToolbar{

    position:fixed;

    top:420px;

    left:20px;

    width:170px;

    display:flex;

    flex-direction:column;

    gap:10px;

    padding:16px;

    background:#ffffff;

    border:1px solid #d7dee6;

    border-radius:14px;

    box-shadow:0 8px 20px rgba(0,0,0,.15);

    z-index:100;

}

#controlToolbar{

    top:20px;

}

#carToolbars{

    display:contents;

}

#toolbar label,
.car-toolbar label,
#controlToolbar label{

    font-size:13px;

    font-weight:600;

    color:#555;

    margin-top:2px;

}

#toolbar input,
.car-toolbar input{

    width:100%;

    height:32px;

    padding:4px 8px;

    border:1px solid #c8d2dc;

    border-radius:8px;

    background:#fafafa;

    text-align:center;

    font-size:14px;

    transition:.2s;

}

#toolbar input:focus,
.car-toolbar input:focus{

    outline:none;

    border-color:#3b82f6;

    background:white;

    box-shadow:0 0 0 3px rgba(59,130,246,.12);

}


/* The value selected as Requested Unknown stays visually distinct both
   before calculation (the question mark) and after its result is shown. */
#toolbar input.requested-unknown,
.car-toolbar input.requested-unknown {

    color:#dc2626;

    -webkit-text-fill-color:#dc2626;

    font-weight:700;

    opacity:1;

    border:2px solid #dc2626;

    background:#fff1f2;
}


#toolbar input.known-input-off,
.car-toolbar input.known-input-off {

    color:#8a94a3;

    -webkit-text-fill-color:#8a94a3;

    background:#e8edf2;

    border:1px dashed #9aa6b2;

    cursor:pointer;

    opacity:1;
}

/* ==========================================================
   Car Count Radio Buttons
========================================================== */

.car-count-control {
    margin-bottom: 4px;
}

.car-count-control > label {
    display: block;
    margin-bottom: 5px;
}

.radio-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.radio-group label {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: normal;
    margin: 0;
}

#controlToolbar input[type="radio"] {
    width: 13px;
    height: 13px;
    padding: 0;
    margin: 0;
    cursor: pointer;
    accent-color: #3b82f6;
}

.car-toolbar {
    left:210px;
}


/* Keep both car controllers the same height and fully inside the viewport.
   Taller screens retain extra room at the bottom for future explanations. */
#toolbar,
.car-toolbar {

    top:auto;

    bottom:20px;

    height:min(650px, calc(100vh - 170px));

    max-height:none;

    overflow:visible;
}

.car-toolbar[hidden] {
    display:none;
}

.toolbar-title {
    color:#1d4ed8;
    font-size:15px;
    font-weight:700;
    border-bottom:1px solid #dbeafe;
    padding-bottom:6px;
}

#secondToolbar .toolbar-title {
    color:#dc2626;
    border-bottom-color:#fecaca;
}

.toolButton{

    width:100%;

    height:42px;

    border:none;

    border-radius:10px;

    cursor:pointer;

    font-size:18px;

    font-weight:bold;

    transition:.2s;

}

.toolButton:hover{

    transform:translateY(-1px);

}

.toolButton.actionPlay{

    background:#d9f6e5;

    color:#166534;

}

.toolButton.actionPlay:hover{

    background:#b9eacb;

}

.toolButton.actionPause{

    background:#ffe3e3;

    color:#b91c1c;

}

.toolButton.actionPause:hover{

    background:#ffcaca;

}

.toolButton.actionReset{

    background:#dbeafe;

    color:#1d4ed8;

}

.toolButton.actionReset:hover{

    background:#bfdbfe;

}

/* ==========================================================
   Simulation Canvas
========================================================== */

canvas{

    display:block;

}

#canvas {
    width:100%;
    height:100dvh;
}

/* ==========================================================
   Graphs
========================================================== */

#graphsPanel{

    position:fixed;

    top:20px;

    right:20px;

    bottom:20px;

    width:min(360px, 30vw);

    display:flex;

    flex-direction:column;

    gap:10px;

}

.timeGraph{

    display:block;

    width:100%;

    min-height:0;

    flex:1 1 0;

    background:white;

    border-radius:12px;

    box-shadow:0 5px 16px rgba(0,0,0,.15);

}


/* ==========================================================
   Timer
========================================================== */

#timer{

    position:absolute;

    transform:translateX(-50%);

    z-index:30;

    font-size:20px;

    font-weight:bold;

    background:rgba(255,255,255,.9);

    padding:8px 18px;

    border-radius:10px;

    box-shadow:0 4px 12px rgba(0,0,0,.12);

}


#simulationMessage{

    position:fixed;

    bottom:20px;

    left:400px;

    transform:none;

    z-index:20;

    max-width:min(310px, calc(100vw - 440px));

    padding:10px 18px;

    border:2px solid #7c3aed;

    border-radius:12px;

    background:rgba(255,255,255,.96);

    color:#5b21b6;

    font-size:16px;

    font-weight:bold;

    text-align:center;

    box-shadow:0 5px 16px rgba(0,0,0,.16);

}


#simulationMessage[hidden]{
    display:none;
}
/* ==========================================================
   Responsive
========================================================== */

/* ----------------------------------------------------------
   Tablet / Small Desktop
   821px - 1200px
---------------------------------------------------------- */

@media (max-width:1200px) {

    #canvas {
        width:100%;
        height:100dvh;
    }

    #toolbar,
    .car-toolbar,
    #controlToolbar {
        width:180px;
        padding:12px;
    }

    #graphsPanel {
        width:clamp(260px, 30vw, 360px);
    }
}


/* ----------------------------------------------------------
   Tablet
   821px - 900px
---------------------------------------------------------- */

@media (max-width:900px) {

    #toolbar,
    .car-toolbar,
    #controlToolbar {
        width:160px;
        left:10px;
        top:10px;
    }

    #toolbar,
    .car-toolbar {
        top:150px;
    }

    #toolbar input,
    .car-toolbar input {
        font-size:13px;
        height:30px;
    }

    .car-toolbar {
        left:180px;
        top:auto;
    }

    #graphsPanel {
        top:10px;
        right:10px;
        bottom:10px;

        /*
         * Do not allow the graphs to become too narrow.
         */
        width:clamp(270px, 32vw, 360px);

        gap:8px;
    }

    .timeGraph {
        width:100%;
        min-width:0;
    }
}


/* ----------------------------------------------------------
   Mobile
   <= 820px
---------------------------------------------------------- */

@media (max-width:820px) {

    body {
        overflow-x:hidden;
        overflow-y:auto;
        min-height:100dvh;
        padding:12px;
    }


    /* -------------------------
       Control panels
    ------------------------- */

    #toolbar,
    .car-toolbar,
    #controlToolbar {
        position:relative;

        top:auto;
        left:auto;

        width:100%;

        display:grid;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(105px, .8fr);

        align-items:center;

        gap:8px;

        padding:12px;
        margin-bottom:12px;

        max-height:none;
        overflow:visible;

        bottom:auto;
        height:auto;
    }


    #carToolbars {
        display:flex;
        flex-direction:column;
        align-items:stretch;

        gap:8px;
        margin-bottom:12px;
    }


    #carToolbars #toolbar,
    #carToolbars .car-toolbar {

        width:100%;

        min-width:0;

        grid-template-columns:minmax(0, 1fr) minmax(110px, .85fr);

        margin-bottom:0;
    }


    #carToolbars:has(.car-toolbar[hidden]) #toolbar {
        width:100%;
    }

    #carToolbars .toolbar-title {
        grid-column:1 / -1;
    }

    #carToolbars label {
        margin:0;
        min-width:0;
        font-size:12px;
    }

    #carToolbars select {
        width:100%;
        min-width:0;
        height:34px;
    }


    #controlToolbar .toolButton {
        grid-column:1 / -1;
        height:38px;
    }


    #controlToolbar .car-count-control {
        grid-column:1 / -1;
    }


    .car-toolbar {
        margin-bottom:12px;
    }


    #toolbar label,
    #controlToolbar label {
        margin:0;
        font-size:12px;
    }


    #toolbar input,
    .car-toolbar input {
        height:34px;
    }


    /* -------------------------
       Timer
    ------------------------- */

    #timer {
        width:max-content;
        max-width:100%;

        margin:0;

        font-size:16px;
    }


    #simulationMessage {
        position:relative;

        bottom:auto;
        left:auto;

        transform:none;

        max-width:100%;

        margin:0 auto 12px;

        font-size:14px;
    }


    /* -------------------------
       Simulation canvas
    ------------------------- */

    #canvas {
        display:block;

        width:100%;
        height:min(560px, 135vw);

        margin-top:54px;

        max-width:100%;
    }


    /* -------------------------
       Graphs
    ------------------------- */

    #graphsPanel {
        position:relative;

        top:auto;
        right:auto;
        bottom:auto;

        width:100%;

        height:auto;

        margin-top:12px;

        gap:12px;
    }


    .timeGraph {
        display:block;

        width:100%;
        min-width:0;

        flex:none;

        /*
         * Keep a stable aspect ratio on phones.
         * Width determines the height.
         */
        height:auto;
        aspect-ratio:16 / 9;
    }

    .creator-credit {
        position:absolute;
        margin:0;
        text-align:right;
    }
}


/* ----------------------------------------------------------
   Very small phones
   <= 380px
---------------------------------------------------------- */

@media (max-width:380px) {

    body {
        padding:8px;
    }


    #carToolbars #toolbar,
    #carToolbars .car-toolbar {
        grid-template-columns:minmax(0, 1fr) 96px;
        padding:10px;
    }


    .timeGraph {
        aspect-ratio:16 / 9;
    }
}