html, body {
    height: 100%;
}

body {
    overflow: hidden; /* keep everything locked to the viewport */
    background: #0f1115; /* subtle app background */
}

/* Layout wrapper: left controls + main stage */
.app-shell {
    display: flex;
    height: 100vh;
    width: 100vw;
}

/* Left controls */
.controls {
    width: 15%;
    background: #151924;
    border-right: 1px solid rgba(255,255,255,.08);
    padding: .75rem .5rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    align-items: center;
}

.controls .btn {
    width: 100%;
    padding: .75rem .25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .75rem;
}

/* Main area that centers the 16:9 #canvas */
.stage {
    flex: 1;
    display: grid;
    place-items: center; /* perfectly center the canvas */
    padding: 1rem; /* breathing room around the canvas */
    min-width: 0; /* prevents overflow due to min-content */
}

/* The 16:9 app "window" (NOT an actual <canvas>) */
#canvas {
    position: relative;
    background-color: #00ff00;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
    overflow: hidden;

    /* Maintain 16:9 at any size */
    aspect-ratio: 16 / 9;          /* modern browsers */
    width: 100%;                   /* expand to available width */
    max-height: 100%;              /* but never exceed stage height */
}

/* Fallback for very old browsers without aspect-ratio support */
.ratio-16x9 { position: relative; width: 100%; }
.ratio-16x9:before { content: ""; display: block; padding-top: 56.25%; }
.ratio-16x9 > .ratio-content { position: absolute; inset: 0; }

#canvas .canvas-content {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    color: #d8e1ff; font-size: 1.25rem;
}

/* Make sure the #canvas never overflows when the stage height is the limiter */
.stage-inner {
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    justify-items: center;
}

/* Optional utility to cap the canvas size on ultra-wide displays */
.max-1920 { max-width: 1920px; }
.max-1600 { max-width: 1600px; }

/* hide the system cursor when .cursor-hidden is on body */
body.cursor-hidden {
  cursor: none !important;
}

/* the fake cursor that will follow the mouse */
#fake-cursor {
  position: fixed;
  pointer-events: none; /* never blocks clicks */
  z-index: 9999;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%); /* center icon on mouse */
}

.stamp {
  transition: opacity 0.5s ease;
}
.stamp.fade {
  opacity: 0;
}

.controls {
  margin-top: 3.1rem;
  background: #151924;
  border-right: 1px solid rgba(255,255,255,.08);
  padding: .75rem .5rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  align-items: center;

  /* make it scrollable */
  overflow-y: auto; 
}

/* optional: nice scroll bar styling */
.controls::-webkit-scrollbar {
  width: 6px;
}
.controls::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.25);
  border-radius: 3px;
}
.controls::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.4);
}