@import url("https://fonts.googleapis.com/css2?family=Fragment+Mono&display=swap");

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

body {
   background: #0a0500;
   color: #eebc22;
   font-family: "Fragment Mono", monospace;
   overflow: hidden;
   cursor: crosshair;
   user-select: none;
   -webkit-user-select: none;
}

canvas {
   position: fixed;
   inset: 0;
   display: block;
   z-index: 1;
}

#ui {
   position: relative;
   z-index: 10;
   pointer-events: none;
}

#controls-panel {
   pointer-events: auto;
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;
   background: rgba(10, 5, 0, 0.95);
   backdrop-filter: blur(10px);
   padding: 20px 30px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   border-top: 1px solid rgba(238, 188, 34, 0.1);
}

.seed-section {
   display: flex;
   align-items: center;
   gap: 14px;
}
.cmd-label {
   color: #eebc22;
   font-size: 14px;
   font-weight: bold;
}

#seed-input {
   background: transparent;
   border: none;
   border-bottom: 1px solid #444;
   color: #fff;
   font-family: inherit;
   font-size: 16px;
   weight: bold;
   outline: none;
   width: 250px;
   padding-bottom: 4px;
   user-select: text;
   -webkit-user-select: text;
}

.live-info {
   font-size: 14px;
   color: #888;
}
.live-value {
   color: #eebc22;
   text-transform: uppercase;
   margin-left: 5px;
}

#clear-btn {
   background: #eebc22;
   border: none;
   color: #000;
   padding: 8px 15px;
   cursor: pointer;
   font-size: 10px;
   font-weight: bold;
   text-transform: uppercase;
}