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

/* Hide More/Less button by default (desktop) */
#mobileMoreBtn { display: none; }

html, body {
    height: 100%;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 0;
}

.game-container {
    /* Flow with the page so ads above/below do not overlap the game */
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: white;
}

.controls {
    background: #2c3e50;
    color: white;
    padding: 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

/* Mobile compact UI: hide non-core controls unless expanded (small screens) */
@media (max-width: 768px) {
    .controls .extra { display: none; }
    .controls.show-extra .extra { display: inline-flex; }
    /* Make core buttons larger touch targets */
    .controls .core { padding: 10px 16px; font-size: 15px; }
    /* Hide long instructions to free space */
    .controls .instructions { display: none; }
    /* Show the More/Less button only on small screens */
    #mobileMoreBtn { display: inline-flex; }
}

/* Also enable compact UI on large touch devices (e.g., iPhone Pro Max landscape) */
@media (hover: none) and (pointer: coarse) {
    .controls .extra { display: none; }
    .controls.show-extra .extra { display: inline-flex; }
    #mobileMoreBtn { display: inline-flex; }
    .controls .core { padding: 10px 16px; font-size: 15px; }
    .controls .instructions { display: none; }
}

button {
    background: #3498db;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.3s;
}

button:hover {
    background: #2980b9;
}

#clearBtn {
    background: #e74c3c;
}

#clearBtn:hover {
    background: #c0392b;
}

#startBtn {
    background: #2ecc71;
}

#startBtn:hover {
    background: #27ae60;
}

.instructions {
    margin-left: auto;
    text-align: right;
    font-size: 12px;
    opacity: 0.8;
}

.canvas-wrapper {
    position: relative;
    overflow: hidden;
    background: #ecf0f1;
    flex: 1;
}

canvas {
    /* Absolutely fill the wrapper to avoid gaps on mobile */
    position: absolute;
    inset: 0; /* top:0; right:0; bottom:0; left:0 */
    width: 100%;
    height: 100%;
    display: block;
    background: #fff;
    cursor: crosshair;
    /* Ensure mobile Safari doesn't hijack gestures; we handle touch ourselves */
    touch-action: none;
    -ms-touch-action: none;
}

/* Ad containers: hidden by default; shown via JS when filled to avoid whitespace */
#ad-top,
#ad-bottom {
  flex: 0 0 auto;
  display: none; /* avoid empty space before ads load */
  margin: 0;
  padding: 0;
  background: transparent;
}
#ad-top .adsbygoogle,
#ad-bottom .adsbygoogle {
  display: block;
  width: 100%;
}

/* Hide ads on small screens/touch devices to keep drawing fully interactive */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  #ad-top,
  #ad-bottom { display: none; }
}

/* Ensure desktop bottom banner is visible by default */
#ad-bottom {
  display: block;        /* override earlier display:none on desktop */
  text-align: center;    /* center the 728x90 ad */
  padding: 8px 0;
}