:root { color-scheme: light; }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body {
    height: 100%;
    /* a sunny toy-box sky behind the diorama: sun glow, soft clouds, grass haze */
    background:
      radial-gradient(circle at 84% 10%, rgba(255, 242, 178, 0.95), rgba(255, 242, 178, 0) 24%),
      radial-gradient(150px 44px at 16% 20%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 70%),
      radial-gradient(190px 52px at 74% 30%, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 70%),
      radial-gradient(120px 36px at 42% 10%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0) 70%),
      linear-gradient(#79c2ec 0%, #a9def4 55%, #c9e8b8 100%);
    font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
    overflow: hidden;
    touch-action: none;
  }
  #wrap {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #game {
    display: block;
    border-radius: 16px;
    box-shadow:
      0 0 0 5px rgba(255, 255, 255, 0.6),
      0 0 0 9px rgba(70, 120, 55, 0.28),
      0 30px 60px rgba(30, 60, 25, 0.45);
    background: #8fce46;
    image-rendering: optimizeQuality;
  }
  /* how to play, along the foot of the page. It lies over the bottom of the
     board, so it is lettered like the captions drawn on the board itself:
     white and bold with a dark outline, its keycaps dark-backed as theirs are */
  #hint {
    position: fixed;
    bottom: 10px;
    width: 100%;
    text-align: center;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .3px;
    text-shadow:
      -1.5px -1.5px 0 rgba(0, 0, 0, 0.5), 1.5px -1.5px 0 rgba(0, 0, 0, 0.5),
      -1.5px 1.5px 0 rgba(0, 0, 0, 0.5), 1.5px 1.5px 0 rgba(0, 0, 0, 0.5),
      0 2px 3px rgba(0, 0, 0, 0.45);
    pointer-events: none;
  }
  #hint .gs-kbd { background: rgba(0, 0, 0, 0.5); text-shadow: none; }