.radial-menu {
  --radial-size: 390px;
  position: fixed;
  inset: auto;
  z-index: 2147483100;
  display: block;
  width: var(--radial-size);
  height: var(--radial-size);
  max-width: calc(100vw - 24px);
  max-height: calc(100svh - 24px);
  margin: 0;
  padding: 0;
  overflow: visible;
  isolation: isolate;
  border: 1px solid #b5c6a4;
  border-radius: 50%;
  background: radial-gradient(circle, #fff9eb 0 18%, #e5ecdaf7 35%, #f5f2e6f7 73%);
  color: #244b39;
  box-shadow: 0 22px 65px #193b3254, 0 0 0 5px #fff9e74d, inset 0 0 0 7px #fffdf544;
  backdrop-filter: blur(16px);
  font: 12px/1.2 var(--sans, 'Segoe UI', sans-serif);
  touch-action: manipulation;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}
.radial-menu[hidden] { display: none !important; }
.radial-menu::backdrop { background: transparent; pointer-events: none; }
.radial-menu::before { content: ''; position: absolute; z-index: -1; inset: 16%; border: 1px solid #bacbaa8c; border-radius: 50%; pointer-events: none; }
.radial-menu.is-open { animation: radial-arrive .18s cubic-bezier(.2,.7,.3,1); }
.radial-menu-item,
.radial-menu-center {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  width: clamp(48px, calc(var(--radial-size) * .225), 80px);
  height: clamp(48px, calc(var(--radial-size) * .225), 80px);
  min-width: 44px;
  min-height: 44px;
  padding: 8px 4px;
  translate: -50% -50%;
  border: 1px solid #b7c7a6;
  border-radius: 24px;
  background: #fffcf2e8;
  color: #2e513e;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 4px 13px #284a3310;
  font: inherit;
  line-height: 1.2;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.radial-menu-item span { max-width: 100%; overflow-wrap: anywhere; hyphens: auto; font-size: clamp(9px, calc(var(--radial-size) * .033), 12px); }
.radial-menu-item svg { width: clamp(23px, calc(var(--radial-size) * .08), 32px); height: clamp(23px, calc(var(--radial-size) * .08), 32px); }
.radial-menu svg { flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.radial-menu-item:hover,
.radial-menu-item:focus-visible { background: #345c43; color: #fff9e9; border-color: #345c43; box-shadow: 0 6px 15px #284a332e; }
.radial-menu-item:focus-visible,
.radial-menu-center:focus-visible { outline: 2px solid #456d46; outline-offset: 4px; }
/* Seven equally spaced points, with the same generous central Merle button. */
.radial-menu-item-0 { left: 50%; top: 15%; }
.radial-menu-item-1 { left: 77.365%; top: 28.178%; }
.radial-menu-item-2 { left: 84.122%; top: 57.788%; }
.radial-menu-item-3 { left: 65.186%; top: 81.534%; }
.radial-menu-item-4 { left: 34.814%; top: 81.534%; }
.radial-menu-item-5 { left: 15.878%; top: 57.788%; }
.radial-menu-item-6 { left: 22.635%; top: 28.178%; }
.radial-menu-center {
  left: 50%;
  top: 50%;
  gap: 0;
  width: calc(var(--radial-size) * .255);
  height: calc(var(--radial-size) * .255);
  padding: 5px;
  border: 1px solid #9eb393;
  border-radius: 50%;
  background: #d5e2c9;
  color: #284d37;
  cursor: pointer;
}
.radial-menu-center svg { width: 28px; height: 28px; margin: 0; stroke-width: 1.25; }
.radial-menu-center:hover { background: #c4d8b5; }
.radial-menu-center { width: calc(var(--radial-size) * .29); height: calc(var(--radial-size) * .29); padding: 2px; background: #f9f4e8; }
.radial-menu-center img { display: block; width: 116%; height: 116%; max-width: none; flex: none; object-fit: contain; pointer-events: none; filter: drop-shadow(0 3px 4px #15382b24); }
/* Keep image/link callouts out of the custom menu flow; text fields stay editable. */
img, a { -webkit-touch-callout: none; }
input, textarea, select, [contenteditable="true"], [contenteditable=""] { -webkit-touch-callout: default; user-select: text; -webkit-user-select: text; }
@keyframes radial-arrive { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .radial-menu.is-open { animation: none; } .radial-menu-item, .radial-menu-center { transition: none; } }