*{
    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;
    }
}

/* Keep the additional energy controls available on short screens. */
@media (min-width: 821px) {
    #toolbar, .car-toolbar { gap: 6px; overflow-y: auto; }
    #toolbar > *, .car-toolbar > * { flex-shrink: 0; }
}


/* Energy controls use the document height, with no nested scrolling panels. */
body {
    display: grid;
    grid-template-columns: minmax(390px, 420px) minmax(280px, 1fr) minmax(280px, 340px);
    grid-template-rows: auto 1fr;
    align-items: start;
    gap: 16px;
    padding: 16px;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
}
#controlToolbar {
    position: relative;
    grid-column: 1; grid-row: 1;
    top: auto; left: auto; bottom: auto;
    width: 100%; height: auto; margin: 0;
    display: flex; flex-direction: row; align-items: center;
    padding: 12px; gap: 14px;
}
#controlToolbar .toolButton { width: 60px; flex: 0 0 60px; }
#controlToolbar .car-count-control { margin: 0; }
#carToolbars {
    display: grid;
    grid-column: 1; grid-row: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch; gap: 12px; margin: 0;
}
#carToolbars #toolbar, #carToolbars .car-toolbar {
    position: relative;
    top: auto; left: auto; bottom: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(72px, .8fr);
    align-content: start; align-items: center;
    gap: 9px 7px;
    width: 100%; min-width: 0;
    height: auto; min-height: 640px; max-height: none;
    padding: 12px; margin: 0; overflow: visible;
}
#carToolbars .car-toolbar[hidden] { display: none; }
#carToolbars:has(.car-toolbar[hidden]) { grid-template-columns: 1fr; }
#carToolbars .toolbar-title { grid-column: 1 / -1; padding-bottom: 8px; }
#carToolbars label { font-size: 12px; min-width: 0; margin: 0; line-height: 1.4; }
#carToolbars input, #carToolbars select { width: 100%; min-width: 0; height: 34px; }
#carToolbars select { font-size: 12px; border: 1px solid #c8d2dc; border-radius: 8px; padding: 3px; }
#canvas {
    grid-column: 2; grid-row: 1 / span 2;
    width: 100%; min-width: 0; height: max(720px, calc(100dvh - 32px)); margin: 0;
}
#graphsPanel {
    position: relative;
    grid-column: 3; grid-row: 1 / span 2;
    top: auto; right: auto; bottom: auto;
    width: 100%; min-width: 0;
    height: max(720px, calc(100dvh - 32px)); margin: 0;
}
#graphsPanel .timeGraph { min-height: 150px; aspect-ratio: auto; }
#simulationMessage { position: relative; grid-column: 1 / -1; left: auto; bottom: auto; max-width: 100%; margin: 0; }
@media (max-width: 1100px) {
    body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
    #controlToolbar { position: sticky; top: 8px; grid-column: 1; grid-row: auto; }
    #carToolbars { grid-column: 1; grid-row: auto; }
    #carToolbars #toolbar, #carToolbars .car-toolbar { min-height: 0; grid-template-columns: minmax(0, 1fr) minmax(105px, .8fr); }
    #canvas { grid-column: 1; grid-row: auto; height: 620px; margin-top: 12px; }
    #graphsPanel { grid-column: 1; grid-row: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); height: auto; gap: 12px; }
    #graphsPanel .timeGraph { width: 100%; height: 230px; min-height: 0; }
}
@media (max-width: 640px) {
    body { padding: 10px; gap: 12px; }
    #carToolbars { grid-template-columns: minmax(0, 1fr); }
    #carToolbars #toolbar, #carToolbars .car-toolbar { padding: 14px; gap: 9px; }
    #carToolbars input, #carToolbars select { height: 44px; font-size: 16px; }
    #carToolbars label { font-size: 13px; }
    #canvas { height: 540px; }
    #graphsPanel { grid-template-columns: minmax(0, 1fr); }
    #graphsPanel .timeGraph { height: 220px; }
}
.creator-credit {
    position: relative;
    grid-column: 1 / -1;
    grid-row: auto;
    justify-self: center;
    transform: none;
    padding: 4px 0;
    font-size: 12px;
    text-align: center;
}
#controlToolbar { flex-wrap: wrap; }
.frame-step-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 58px 90px;
    align-items: center;
    gap: 8px;
    flex: 1 0 100%;
    padding-top: 10px;
    border-top: 1px solid #dbeafe;
}
.frame-step-controls[hidden] { display: none; }
.frame-step-controls select, #stepFramesButton {
    min-width: 0;
    height: 36px;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    padding: 4px 7px;
    font-size: 13px;
}
#stepFramesButton { background: #dbeafe; color: #1e40af; cursor: pointer; font-weight: 600; }
#stepFramesButton:hover { background: #bfdbfe; }
#stepFramesButton:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
#frameStepStatus { grid-column: 1 / -1; color: #64748b; font-size: 12px; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
    .frame-step-controls select, #stepFramesButton { height: 44px; font-size: 16px; }
}
@media (max-width: 380px) {
    .frame-step-controls { grid-template-columns: minmax(0, 1fr) 48px 80px; gap: 6px; }
}
#carToolbars input[readonly]:not(.known-input-off) {
    background: #f1f5f9;
    color: #475569;
}
#carToolbars label { overflow-wrap: anywhere; }

.simulation-guide {
    grid-column: 1 / -1;
    min-width: 0;
    padding: 18px 22px;
    border: 1px solid #d7dee6;
    border-radius: 14px;
    background: #fff;
    color: #475569;
    line-height: 1.7;
}
.simulation-guide h1 { color: #1e3a8a; font-size: 22px; line-height: 1.4; margin-bottom: 8px; }
.simulation-guide h2 { color: #334155; font-size: 16px; margin: 16px 0 6px; }
.simulation-guide p { max-width: 100ch; font-size: 14px; }
.simulation-guide details { margin-top: 12px; }
.simulation-guide summary { cursor: pointer; font-weight: 600; color: #1d4ed8; }
@media (max-width: 640px) {
    .simulation-guide { padding: 16px; }
    .simulation-guide h1 { font-size: 20px; }
}