@CHARSET "UTF-8";

body { 
    margin:0; 
    background:#fff; 
    overflow:hidden; 
}

canvas { display:block; 
 touch-action: none;}

#ui {
    position:fixed;
    top:20px; left:10px;
    color:white;
    font-family:Arial, sans-serif;
    font-size:20px;
    background:rgba(0,0,0,0.4);
    padding:10px 15px;
    border-radius:8px;
}

#moveSelector {
    position:fixed;
    top:10px; left:10px;
    margin-top: 95px;
    color:white;
    font-family:Arial, sans-serif;
    background:rgba(0,0,0,0.4);
    padding:10px 15px;
    border-radius:8px;
    display: inline-block;
    vertical-align: top;
}

#meshSelector {
    position:fixed;
    top:10px; right:10px;
    margin-top: 95px;
    color:white;
    font-family:Arial, sans-serif;
    background:rgba(0,0,0,0.4);
    padding:10px 15px;
    border-radius:8px;
    display: inline-block;
    vertical-align: top;
}

#moveSelector label, #meshSelector label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
}

#moveSelect, #meshSelect {
    width: 100%;
    padding: 8px;
    font-size: 14px;
    background-color: rgba(255, 255, 255, 0.9);
    color: #000;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
}

#buttons {
    position:fixed;
    top:10px; left:50%;
    padding: 30px 10px 10px 10px;
    transform: translateX(-50%); /* a gomb saját szélességének felével tolja vissza */
  z-index:10;

/* Responsive: small screens — add side margins so the big square doesn't touch edges */
@media (max-width: 600px) {
    :root { --side-gap: 24px; }
    #moveSelector { left: var(--side-gap); right: var(--side-gap); width: auto; }
    #hud { left: var(--side-gap); }
}

@media (min-width: 601px) {
    :root { --side-gap: 0px; }
}