.emoji-menu {
  position: fixed;
  top: 50%;
  right: calc(env(safe-area-inset-right, 0px) + 108px);
  z-index: 75;
  display: grid;
  grid-template-columns: repeat(4, 54px);
  gap: 8px;
  padding: 17px;
  border: 4px solid #140b08;
  border-radius: 16px;
  background:
    radial-gradient(circle at 18% 14%, rgba(199, 234, 255, 0.22), transparent 28%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.13) 0 10px, rgba(57, 146, 220, 0.11) 10px 20px),
    linear-gradient(180deg, #b5e5ff 0%, #92d5fa 52%, #70bfea 100%);
  pointer-events: auto;
  box-shadow:
    inset 0 5px 0 rgba(255, 255, 255, 0.34),
    inset 0 -5px 0 rgba(35, 106, 154, 0.24),
    0 8px 0 rgba(0, 0, 0, 0.32),
    0 16px 28px rgba(0, 0, 0, 0.26);
}

.emoji-menu::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 3px solid rgba(36, 92, 133, 0.72);
  border-radius: 11px;
  pointer-events: none;
}

.emoji-choice {
  position: relative;
  z-index: 1;
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  padding: 3px;
  border: 3px solid #140b08;
  border-radius: 14px;
  background:
    radial-gradient(circle at 32% 24%, rgba(199, 234, 255, 0.28), transparent 28%),
    linear-gradient(180deg, #a8ddfa, #a8ddfa);
  cursor: pointer;
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.42),
    0 4px 0 rgba(0, 0, 0, 0.34);
}

.emoji-choice:hover {
  transform: translateY(2px) scale(1.04);
  background:
    radial-gradient(circle at 32% 24%, rgba(199, 234, 255, 0.34), transparent 28%),
    linear-gradient(180deg, #c8edff, #b5e6ff);
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.42),
    0 2px 0 rgba(0, 0, 0, 0.34),
    0 0 18px rgba(156, 222, 255, 0.52);
}

.emoji-choice img {
  display: block;
  width: 43px;
  height: 43px;
  object-fit: contain;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.38));
}

.emoji-shortcut {
  position: absolute;
  z-index: 2;
  top: -7px;
  left: -7px;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 2px solid #140b08;
  border-radius: 50%;
  background: linear-gradient(180deg, #c2e9ff, #91d2f5);
  color: #ffffff;
  font-family: var(--font-heavy);
  font-size: 12px;
  line-height: 1;
  -webkit-text-stroke: 0.35px #140b08;
  text-shadow:
    -1px -1px 0 #140b08,
    0 -1px 0 #140b08,
    1px -1px 0 #140b08,
    -1px 0 0 #140b08,
    1px 0 0 #140b08,
    0 1px 0 #140b08;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.42),
    0 2px 0 rgba(0, 0, 0, 0.32);
  pointer-events: none;
}

.emoji-menu.hidden { display: none; }
#emojiButton { background: linear-gradient(#afe1fc, #75c5f2); border-color: #254e70; }
#emojiButton.is-open { filter: brightness(1.1); }
#emojiButton > img { transform: translateY(-6px) scale(1.08); }
#emojiButton strong { position: absolute; bottom: 3px; left: 0; right: 0; color: white; font: bold 14px/1 var(--font-heavy); text-align: center; text-shadow: -1px -1px #050306, 1px -1px #050306, -1px 1px #050306, 1px 1px #050306; }
.emoji-choice:focus-visible { outline: 3px solid white; outline-offset: 2px; }
:where(html.has-touch-controls) .emoji-menu { grid-template-columns: repeat(4,43px); gap:6px; padding:12px; border-width:3px; border-radius:13px; }
:where(html.has-touch-controls) .emoji-menu::before { inset:8px; border-width:2px; border-radius:9px; }
:where(html.has-touch-controls) .emoji-choice { width:43px; height:43px; padding:2px; border-width:2px; border-radius:11px; }
:where(html.has-touch-controls) .emoji-choice img { width:34px; height:34px; }
:where(html.has-touch-controls) .emoji-shortcut { top:-5px; left:-5px; width:16px; height:16px; border-width:1px; font-size:10px; }
/* Keep the same artwork origin as the other touch HUD buttons. */
html.has-touch-controls #emojiButton > img { left:50%; top:3px; transform:translateX(-50%); }
html.has-touch-controls .emoji-menu {right:calc(var(--touch-right) + var(--touch-menu) + 8px);max-width:calc(100vw - var(--touch-menu) - 24px);}