/* Simple high-contrast layout optimized for screen readers and keyboard navigation */
:root{
  --bg:#000;
  --fg:#e6e6e6;
  --accent:#2ecc71;
  --muted:#999;
  --gap:12px;
  --btn-h:48px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
  -webkit-font-smoothing:antialiased;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}

#screen{
  width:100%;
  max-width:640px;
  padding:18px;
  background:linear-gradient(#070707,#000);
  /* remove visible border and roundness for a cleaner centered panel */
  border-radius:0;
  border:0;
  box-shadow:none;
  /* center inner content */
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:320px;
}

#status{
  font-size:18px;
  line-height:1.4;
  padding:8px 6px;
  margin-bottom:var(--gap);
  background:#060606;
  border:1px solid #121212;
  border-radius:6px;
  min-height:56px;
  display:flex;
  align-items:center;
}

#controls{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:var(--gap);
}

.ctrl{
  height:var(--btn-h);
  min-width:120px;
  padding:0 12px;
  /* flat, no edges */
  border-radius:0;
  border:0;
  background:#111;
  color:var(--fg);
  font-size:15px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow: none;
}

.ctrl:focus{
  outline:3px solid #444;
  outline-offset:2px;
}

.ctrl[disabled]{
  opacity:0.45;
  cursor:not-allowed;
}



/* Ensure buttons tap targets are large on mobile */
@media (max-width:420px){
  .ctrl{min-width:44%; font-size:16px}
}