.notepad-game {
  background: #f8e58b;
  background-image: linear-gradient(transparent 31px, #8eafd0 32px, transparent 33px), linear-gradient(90deg, transparent 0 42px, #e17b72 43px, transparent 44px);
  background-size: 100% 33px, 100% 100%;
  color: #25344a;
  padding: 22px 24px 18px 58px;
  min-height: 260px;
}
.notepad-cover { background:url('assets/whack-a-mobile-cover.png') center/140% auto no-repeat; color:#fff; padding:30px 28px; min-height:260px; cursor:pointer; position:relative; overflow:hidden; }
.notepad-cover > * { position:relative; }
.cover-kicker { font-size:10px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; }
.notepad-cover h3 { margin:42px 0 20px; font:600 42px/.86 'Space Grotesk'; letter-spacing:-.07em; }
.notepad-cover h3 em { color:#1359d2; font-style:normal; }
.cover-action { font-size:11px; font-weight:700; }
.cover-action b { margin-left:8px; color:#1359d2; font-size:16px; }
.notepad-cover:hover { filter:saturate(1.08); }
.notepad-empty { margin:10px 0 0; color:#53627a; font-size:12px; }
.notepad-comment .delete-button { font-size:16px; opacity:.6; }
.notepad-comment .delete-button:hover { color:#d34c45; opacity:1; }
.notepad-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.notepad-heading h3 { margin:0; font:600 25px 'Space Grotesk'; letter-spacing:-.04em; }
.notepad-badge { border:1px solid #25344a66; border-radius:99px; padding:5px 9px; font-size:9px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.notepad-comments { display:grid; gap:8px; max-height:112px; overflow:auto; }
.notepad-comment { display:flex; align-items:center; gap:9px; font-size:12px; }
.notepad-comment span:first-child { flex:1; }
.notepad-comment button { border:0; background:transparent; color:#25344a; cursor:pointer; font:600 12px 'DM Sans'; padding:3px 5px; border-radius:4px; }
.notepad-comment button:hover, .notepad-comment button:focus-visible { background:#fff4b8; outline:1px solid #25344a55; }
.notepad-form { display:flex; gap:8px; margin-top:16px; }
.notepad-form input { min-width:0; flex:1; border:1px solid #25344a66; border-radius:4px; background:#fff7c9aa; color:#25344a; padding:9px 10px; font:12px 'DM Sans'; }
.notepad-form button { border:0; border-radius:4px; background:#25344a; color:#fff; padding:0 12px; cursor:pointer; font-size:12px; font-weight:700; }
.notepad-form button:hover, .notepad-form button:focus-visible { background:#1359d2; }
.notepad-status { margin:9px 0 0; font-size:10px; color:#53627a; }