index.css

/* ---------- index.css: Base layout and colors ----------
   This CSS file controls overall layout, colors, and fonts.
   Adjust colors and font-family as you like.
   Avoid changing dimensions unless you know and test the layout effect.
   NOTE: The game grid (canvas) background is PAINTED IN CODE, not by CSS.
         To change canvas background color, edit the fill color
         (look for ctx.fillStyle)
         in:
           - src/systems/renderer.ts  (main game canvas)
           - src/ui/hud.ts            (Next preview canvas)
*/

/* ---------- Assign Some Color variables (tweak these) ---------- */
:root {
  --page-bg: #505050; /* page background */
  --page-text: #eeeeee; /* default text color */

  --canvas-bg: #111111; /* used by JS fills in renderer/hud */
  --canvas-border: #888888;

  --grid-stroke: rgba(255, 255, 255, 0.06);

  --panel-bg: #6b6b6b;
  --panel-border: #333333;

  --accent: #6fa8dc; /* accent color (links, highlights) */
  --overlay-bg: rgba(0, 0, 0, 0.6);
  --overlay-text: #ffffff;

  --touchbar-height: 74px; /* matches min height + padding */
  --footer-height: 36px; /* footer visual height */
}

/* ---------- Base web page ---------- */

html,
body {
  margin: 0; /* keep 0 for full-screen canvas */
  background: var(--page-bg); /* page background color (safe to adjust) */
  color: var(--page-text); /* default text color (safe to adjust for contrast) */
  height: 100%;
  font-family:
    system-ui,
    -apple-system,
    Segoe UI,
    Arial,
    sans-serif;
}

/* ---------- Main game area layout ----------
   The game uses a 2-column grid:
   left = main canvas, right = side panel.
   Avoid changing display type or grid-template-columns.
   Mobile: Give the play area a little bottom room so the bar doesn't overlap it

    */
.wrap {
  display: grid;
  grid-template-columns: auto 180px; /* set side panel width */
  gap: 12px; /* space between game and side panel */
  height: 100vh; /* fill full window vertical height */
  align-items: center;
  justify-content: center;
  padding-bottom: var(--footer-height); /* reserve footer height */
}

/* ---------- Game board ----------
   This is the main play area canvas.
   Do not change width/height here - controlled by HTML attributes.
   NOTE: The canvas background color is filled in JS.
   Changing background here won't show unless you remove
   the JS fill in src/systems/renderer.ts.
*/

canvas {
  background: #444444; /* purely decorative since JS paints */
  border: 1px solid var(--canvas-border); /* change game area border size, type, and color */
}

/* ---------- Side panel layout ----------
   Displays score, next piece, and controls.
   Adjust padding and gap spacing.
*/

#side {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
}

/* ---------- Information panels ----------
   Each block on the right side (Status, Next, Controls).
   Safely change background and border colors.
   Avoid altering display or font-size drastically.
*/

.panel {
  background: var(--panel-bg); /* change panel background color */
  border: 1px solid var(--panel-border); /* change panel border size, type, and color */
  padding: 8px;
  border-radius: 6px;
  font-size: 14px;
}

/* ---------- Section titles ----------
   Used in each panel header (Status, Next, Controls).
   Change font-weight or spacing for style preference.
*/

.title {
  font-weight: 600;
  margin-bottom: 6px;
}

/* ---------- Buttons ----------
Make buttons feel instant on mobile */
.btn {
  touch-action: manipulation; /* no double-tap delay */
  -webkit-tap-highlight-color: transparent;
}

/* ---------- Next piece preview canvas ----------
   Displays the upcoming piece.
   NOTE: Its background is also filled in JS (src/ui/hud.ts).
   Do not change width/height - they are set in HTML for proper scaling.
*/

#next {
  width: 150px; /* do not change - set in HTML for proper scaling */
  height: 150px; /* do not change - set in HTML for proper scaling */
  background: #222; /* purely decorative since JS paints */
  border: 1px solid #444;
}

/* ---------- Overlay (Pause / Game Over) ----------
   Covers the screen when the game is paused or over.
   You can safely change color, opacity, or font-size.
   Do not remove "position: fixed" or "display: flex" - required for centering.
*/

#overlay {
  position: fixed; /* do not change - required to cover full screen */
  inset: 0;
  background: var(--overlay-bg); /* change overlay background color/opacity */
  color: var(--overlay-text); /* change overlay text color */
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  text-align: center;
  pointer-events: none; /* unless you want it clickable */
  z-index: 50; /* above game but below touchbar/footer */
}

/* This CSS class shows the overlay when active.
   Do not remove or rename - game logic toggles it.
*/

#overlay.show {
  display: flex;
}

/* Ensure canvas isn't above overlay */
#game {
  position: relative;
  z-index: 5;
}

/* ---------- Small text (controls)----------
   Used for control instructions.
   You can change font-size or opacity for readability.
*/

.small {
  font-size: 14px;
  opacity: 0.9;
}

/* ---------- Touch controls (mobile): stay above footer ---------- */
/* Hidden by default */
.touchbar {
  display: none;
}

/* Show + layout when JS adds `body.touch` */
body.touch .touchbar {
  display: grid;
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--footer-height) + env(safe-area-inset-bottom));
  z-index: 100;

  /* one row; every button gets a column */
  grid-auto-flow: column;
  grid-auto-columns: minmax(44px, 1fr);
  align-items: center;
  justify-items: center;

  gap: 6px;
  padding: 2px;

  background: var(--panel-bg);
  border-top: 1px solid var(--panel-border);
}

/* Buttons */
body.touch .touchbar .btn {
  min-width: 44px;
  min-height: 44px;
  padding: 8px;
  font-size: 18px;
  line-height: 1;
  border-radius: 8px;
  border: 1px solid var(--panel-border);
  background: #2b2b2b;
  color: var(--page-text);
}

body.touch .touchbar .btn:active {
  transform: translateY(1px);
  filter: brightness(1.1);
}

/* If the touchbar is visible, reserve space below the game area */
body.touch .wrap {
  padding-bottom: calc(var(--touchbar-height) + var(--footer-height));
}

/* Keep pause button snappy on touch */
button[data-action="pause"] {
  touch-action: manipulation;
}

/* ---------- Shared small button styling ---------- */
button.small {
  appearance: none;
  font: inherit;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid var(--panel-border);
  background: transparent;
  color: var(--accent);
  padding: 8px 14px;
  min-height: 44px;
  min-width: 88px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

/* Clear High Score stays outline-only for hierarchy */
#clear-data {
  margin: 6px 0;
  background: transparent;
  border-color: var(--panel-border);
}
#clear-data:hover {
  background: #333333;
}

/* ---------- Footer: bottom-most, safe area padding, visible under touchbar ---------- */
footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0; /* <- bottom-most */
  height: var(--footer-height);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 14px;
  background: var(--panel-bg);
  color: var(--page-text);
  border-top: 1px solid var(--panel-border);
  padding-bottom: env(safe-area-inset-bottom); /* iOS notch */
  z-index: 90; /* below touchbar */
}

footer a {
  color: var(--accent);
  text-decoration: none;
  margin: 0 4px;
}

footer a:hover {
  text-decoration: underline;
}

/* Media queries for responsive layout

/* On wider screens (hide touchbar), only reserve footer height */
@media (min-width: 900px) {
  body.touch .touchbar {
    display: none !important;
  }
  .wrap {
    padding-bottom: var(--footer-height);
  }
}

/* ---------- Mobile Layout: Compact single-column ---------- */
@media (max-width: 600px) {
  /* Collapse to one column */
  .wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: 100dvh; /* dynamic viewport height for iOS */
    padding-bottom: var(--touchbar-height);
    gap: 4px;
  }

  /* Hide bulky side panels EXCEPT the Next preview */
  #side {
    display: none !important;
  }

  /* Show ONLY the Next canvas on mobile, positioned absolutely */
  #side .panel:has(#next) {
    display: block !important;
    position: absolute;
    top: 8px;
    right: 8px;
    background: transparent;
    border: none;
    padding: 0;
    z-index: 10;
  }

  #side .panel:has(#next) .title {
    display: none; /* hide "Next" label on mobile */
  }

  /* Canvas dominates available space */
  #game {
    width: 100vw;
    height: auto;
    aspect-ratio: 1 / 2; /* 300x600 scaling */
    max-height: calc(100dvh - var(--touchbar-height) - 4px);
    border: 1px solid var(--canvas-border);
    background: #222;
  }

  /* Small "Next" preview overlaid top-right */
  #next {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 80px !important;
    height: 80px !important;
    background: #222;
    border: 1px solid #555;
    z-index: 10;
  }

  /* Overlay relative to .wrap so #next can sit above the game */
  .wrap {
    position: relative;
  }

  /* Make sure overlay covers full viewport when active */
  #overlay {
    font-size: 20px;
    padding: 0 12px;
  }

  /* Footer optional on tiny screens — hide if shorter than ~670px */
  @media (max-height: 670px) {
    footer {
      display: none;
    }
  }

  /* Touchbar: reduce padding slightly for smaller screens */
  .touchbar {
    gap: 3px;
    padding: 1px;
  }

  .touchbar .btn {
    min-width: 44px;
    min-height: 44px;
    font-size: 16px;
  }
}